/* ============================================================================
   exhibition.css — JasonWalker.design exhibition chrome (shared)
   The production integration of the approved exhibition system: the continuous
   Intervention field, Bone-mounted evidence plates, philosophical intervention
   statements, the Bone navigation bar with the Intervention logotype, and the
   Intervention Contact field. Linked by the homepage (index), the Work-at-a-Glance
   pages and the prototypes. Satoshi only. Project-owned media/type never touched.
   ========================================================================== */
:root{
  --intervention:var(--walker-carbon,#171717);   /* Checkpoint 5: intervention red retired to Carbon */
  --bone:#F5F2EC;           /* the evidence surface */
  --carbon:#171717;         /* structure / metadata */
  --ex-gutter:clamp(20px,4.8vw,120px);   /* red gutter beside each plate */
  --ex-mat:clamp(12px,1.15vw,22px);      /* bone mat around each plate */
}

/* ---- the gallery is one continuous space ---- */
body.v2-body.exhibit-home,body.exhibit-home{background:var(--intervention)}
body.exhibit-home .v2-main{background:var(--intervention);background-color:var(--intervention)}

/* ---- navigation: the quiet institutional mark. Bone bar, Intervention logotype ---- */
.nav{position:sticky;top:0;z-index:30;background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid rgba(23,23,23,.08)}
.wordmark{font-family:var(--font,system-ui,sans-serif);font-weight:700;font-size:19px;letter-spacing:-.016em;color:var(--intervention);white-space:nowrap;display:inline-flex;align-items:baseline;gap:0}
.wordmark .wm-name{font-weight:700;color:var(--intervention)}
.wordmark .wm-design{font-weight:500;color:var(--intervention);opacity:.6}
.nav-links a{font-family:var(--font,system-ui,sans-serif);font-weight:500;font-size:14px;color:#3b3b3b}
.nav-links a:not(.nav-cta):hover{color:var(--carbon)}
.nav-links a:not(.nav-cta).active{color:var(--intervention)}
.nav-links a:not(.nav-cta).active::after{background:currentColor}
.nav-cta{border:1px solid var(--intervention);color:var(--intervention);border-radius:0}
.nav-cta::before{display:none}
.nav-cta:hover{background:var(--intervention);color:var(--bone)}
@media (max-width:820px){ .nav-links{background:var(--bone)} .nav-links a:not(.nav-cta).active{color:var(--intervention)} }


/* ---- nav mechanics: hide the toggle on desktop; bone drawer on mobile (self-contained so pages that don't load system.css still work) ---- */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--carbon)}
.nav-toggle svg{display:block;width:22px;height:22px}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;top:64px;left:0;right:0;background:var(--bone);flex-direction:column;align-items:flex-start;gap:0;padding:6px 20px 20px;border-bottom:1px solid rgba(23,23,23,.08);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.nav-cta){padding:13px 0;font-size:16px;width:100%;border-bottom:1px solid rgba(23,23,23,.07)}
  .nav-cta{margin-top:14px}
}

/* ---- evidence plates: mounted Bone objects over the field ---- */
.jwh + .ep-seq{margin-top:clamp(24px,5vw,96px)}
.ep-seq.sf2-wplate{background:var(--intervention)}
.sf2-wplate .ep-plate{background:var(--intervention)}
.sf2-wplate .ep-sheet{
  margin-left:var(--ex-gutter);margin-right:var(--ex-gutter);border-radius:0;
  box-shadow:
    0 0 0 var(--ex-mat) var(--bone),               /* the bone mat */
    0 0 0 calc(var(--ex-mat) + 1px) rgba(120,84,74,.26), /* a hair of warm-gray edge */
    0 30px 56px -32px rgba(34,5,2,.66);            /* short, dense, warm contact shadow — mounted a few mm off the wall */
}
.ep-seq.sf2-wplate + .ep-seq.sf2-wplate{margin-top:clamp(36px,7.4vw,148px)}   /* more red between exhibits */
@media (min-width:821px){ .sf2-wplate .ep-plate{min-height:150vh} }

/* ---- Intervention 1–2–4–1 declaration system removed 2026-08-05: the homepage now uses one
   Bone orientation bridge after the Hero (see index.html). Icon assets are retained on disk. ---- */

/* ---- Contact: the final state of the exhibition. Intervention field, Bone action. ---- */
.closing{background:var(--intervention);color:#fff;position:relative;overflow:hidden;margin-top:0;padding:clamp(96px,18vh,220px) 0 clamp(52px,9vh,88px)}
.closing .label,.closing .mono{color:rgba(255,255,255,.74)}
.closing h2,.closing .meaning-statement{color:#fff;font-weight:700}
/* .cta-accent colour is owned by contact-block.css (.site-contact .cta-accent) */
.closing-sub{color:rgba(255,255,255,.88)}
.closing-cta{background:var(--surface-white);color:var(--text-primary);border:0;border-radius:0;font-weight:500}
.closing-cta:hover{background:var(--accent-coral);color:var(--surface-white)}
.closing-cta .arr{color:var(--accent-coral)}
.closing-obs{font-style:normal}   /* colour owned by contact-block.css */
.closing-foot{border-top:1px solid var(--surf-line);color:var(--text-secondary)}   /* on silver, not on the retired Intervention field */
.closing + footer{display:none}   /* the red contact is the terminal state; no navy footer beneath */

/* ============================================================================
   REFINEMENT PASS — site-owned navy/soft-blue retired to neutral charcoal.
   Scoped to the homepage exhibition (.exhibit-home) so glance pages are untouched.
   Project-owned media and color are never recolored.
   ========================================================================== */
.exhibit-home{
  --blueprint-deep:#141210;   /* plate screen / letterbox — dense neutral charcoal, not navy */
  --bp-deep:#141210;
  --draft:#B8B2A6;            /* eyebrow / labels — warm neutral, was soft blue */
  --bp-3:#8B857A;             /* kicker — quieter warm neutral */
  --wht:#F5F2EC;             /* was blue-white → Bone */
  --oxide-red:var(--walker-carbon,#171717);        /* Checkpoint 5: retired to Carbon */
  --accent:var(--walker-carbon,#171717);           /* Checkpoint 5: interactive marks in Carbon */
  --blueprint:#6E685F;--blueprint-2:#6E685F;--blueprint-3:#8B857A;  /* residual structural blue → warm neutral */
}
/* plate mount surface + screen → charcoal */
.exhibit-home .sf2-wplate .ep-sheet{background:#141210}
.exhibit-home .sf2-wplate .ep-plate{background:var(--intervention)}
.exhibit-home .ep-scrim{background:linear-gradient(178deg,rgba(16,14,12,.34) 0%,rgba(16,14,12,.05) 26%,rgba(16,14,12,.16) 54%,rgba(16,14,12,.46) 80%,rgba(16,14,12,.74) 100%)}
.exhibit-home .ep-veil--copy{background:radial-gradient(122% 108% at 2% 100%,rgba(16,14,12,.76),rgba(16,14,12,.38) 38%,transparent 66%)}
.exhibit-home .ep-veil--data{background:radial-gradient(120% 100% at 100% 100%,rgba(16,14,12,.6),rgba(16,14,12,.2) 42%,transparent 68%)}
.exhibit-home .ep-media img,.exhibit-home .ep-media video{background:#141210}
/* retire decorative registration + connector marks (blue architecture-era ornament) */
.exhibit-home .ep-reg,.exhibit-home .ep-conn{display:none !important}
/* the oxide tick on the supporting line was a blue-era accent — neutralize to charcoal hairline */
.exhibit-home .ep-transform::before{background:rgba(245,242,236,.5)}
.exhibit-home .ep-data::after{border-right-color:rgba(245,242,236,.4);border-bottom-color:rgba(245,242,236,.4)}
.exhibit-home .ep-data::before{border-color:rgba(245,242,236,.5)}

/* ---- plate composition: copy LEFT · media CENTER released · data RIGHT ---- */
@media (min-width:821px){
  .exhibit-home .sf2-wplate .ep-lead{max-width:min(42%,540px)}           /* narrower left column releases the center */
  .exhibit-home .sf2-wplate .ep-data{margin-left:auto;max-width:clamp(280px,26vw,360px)}  /* right datum */
  /* Project Brief CTA → right-justified, sitting directly above the strategic data box */
  .exhibit-home .sf2-wplate .sf2-brief-toggle{left:auto;right:var(--pad,clamp(22px,6vw,120px));bottom:clamp(232px,34vh,340px);flex-direction:row-reverse}
}

/* ---- Contact: purge any inherited blue-era emphasis; the observation is set intentionally ---- */
.closing-obs{font-style:normal;font-weight:500}   /* was color:#fff !important — the component owns colour now */
/* .cta-accent colour is owned by contact-block.css */

/* ---- Contact refinement — the exhibition resolving into an invitation, not a footer ---- */
.exhibit-home .closing .wrap,.closing--exhibit .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(22px,6vw,120px)}
.exhibit-home .closing .label,.closing--exhibit .label{font-size:clamp(11px,.9vw,13px);letter-spacing:.135em;text-transform:uppercase;font-weight:500}
.exhibit-home .closing h2,.exhibit-home .closing .meaning-statement,.closing--exhibit h2,.closing--exhibit .meaning-statement{font-size:clamp(44px,6.6vw,104px);line-height:.98;letter-spacing:-.03em;margin:clamp(18px,2.4vh,30px) 0 0;max-width:16ch}
.exhibit-home .closing-sub,.closing--exhibit .closing-sub{font-size:clamp(18px,1.5vw,22px);line-height:1.5;max-width:46ch;margin:clamp(26px,3.4vh,40px) 0 clamp(30px,4vh,44px)}
.exhibit-home .closing-cta,.closing--exhibit .closing-cta{font-size:17px;padding:16px 28px}
.exhibit-home .closing-obs,.closing--exhibit .closing-obs{font-size:clamp(22px,2.4vw,32px);line-height:1.28;font-weight:500;max-width:22ch;margin:clamp(56px,8vh,104px) 0 0}   /* a resolving declaration, not a detached italic */
.exhibit-home .closing-foot,.closing--exhibit .closing-foot{margin-top:clamp(52px,8vh,96px);padding-top:22px;font-size:11px;letter-spacing:.14em;opacity:.72;display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;align-items:baseline}   /* quiet, not a utility bar */
@media (max-width:820px){
  .exhibit-home .closing h2,.exhibit-home .closing .meaning-statement,.closing--exhibit h2,.closing--exhibit .meaning-statement{font-size:clamp(34px,9vw,52px);max-width:none}
  .exhibit-home .closing-obs,.closing--exhibit .closing-obs{font-size:clamp(20px,5.6vw,26px);max-width:none}
  .exhibit-home .closing-foot,.closing--exhibit .closing-foot{flex-direction:column;gap:8px}
}

/* ---- work-plate asymmetry: copy left, work centered & breathing, data right ---- */
@media (min-width:821px){
  .exhibit-home .sf2-wplate .ep-lead{max-width:min(38%,470px)}
  .exhibit-home .sf2-wplate .ep-data{max-width:clamp(250px,23vw,330px)}
}

/* ============================================================================
   REFINEMENT PASS 2 — resolved exhibition system (homepage index).
   Plates sit comfortably in-window as floating boards with a full Bone mat on all
   four sides; copy is pushed left and the evidence cluster (metadata → brief → data)
   collects at the right; the Project Brief mark pulses; the Porn Tax campaign runs a
   horizontal ad sequence; residual blue is retired. Scoped to .exhibit-home.
   ========================================================================== */
.exhibit-home{--ep-board:80vh}

@media (min-width:821px){
  /* --- floating board: real sticky-stage resize (NOT transform), centered, mat on 4 sides --- */
  .exhibit-home .ep-seq.sf2-wplate{overflow:visible}
  .exhibit-home .sf2-wplate .ep-plate{overflow:visible;min-height:150vh}
  .exhibit-home .sf2-wplate .ep-sheet{position:sticky;height:var(--ep-board);top:calc((100svh - var(--ep-board)) / 2)}

  /* --- plate composition: title/subhead pushed LEFT; evidence cluster collects RIGHT,
        with a wide channel of released center between them (>30% more separation) --- */
  .exhibit-home .sf2-wplate .ep-field{align-items:flex-end;gap:clamp(56px,9vw,180px)}
  .exhibit-home .sf2-wplate .ep-lead{max-width:min(44%,540px);margin-right:auto}
  .exhibit-home .sf2-wplate .ep-side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(16px,2.4vh,26px);max-width:clamp(280px,30vw,382px);margin-left:auto}
  .exhibit-home .sf2-wplate .ep-side .ep-kicker{order:0;margin:0;text-align:right}
  .exhibit-home .sf2-wplate .ep-side .ep-data{order:1;margin:0;max-width:none;width:100%}

  /* Project Brief CTA — right-justified, sitting clear above the evidence cluster (metadata → data) */
  .exhibit-home .sf2-wplate .sf2-brief-toggle{left:auto;right:var(--pad,clamp(22px,6vw,120px));bottom:clamp(300px,41vh,438px);flex-direction:row-reverse}
  /* keep the metadata to a tidy measure so it never collides with the CTA above it */
  .exhibit-home .sf2-wplate .ep-side .ep-kicker{max-width:min(100%,330px);line-height:1.5}
}

/* ============================================================================
   PLATE-LOCAL EIGHT-COLUMN EXHIBIT GRID (desktop ≥1024). Geometry is derived from the
   plate interior — the centred --maxw content box inside the Bone mount — not the page grid.
   01 | 08 are protected buffers · narrative group 02–04 · open centre 05 · strategic group 06–07.
   The Project Brief CTA, role line and data-box border share the column-07 right datum.
   ============================================================================ */
@media (min-width:1024px){
  .exhibit-home{--ep-gap:clamp(10px,1vw,22px)}
  /* the grid must span the FULL plate interior (the usable image area inside the Bone mount),
     not the centred --maxw box — otherwise both groups are pulled toward the plate centre. */
  .exhibit-home .sf2-wplate .ep-inner{max-width:none}
  .exhibit-home .sf2-wplate .ep-field{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--ep-gap);align-items:end}
  /* narrative → columns 02–04, left datum on the start of column 02 */
  .exhibit-home .sf2-wplate .ep-lead{grid-column:2 / 5;justify-self:stretch;max-width:none;margin:0;text-align:left}
  /* strategic → columns 06–07, RIGHT datum on the end of column 07; pre-pass scale restored */
  .exhibit-home .sf2-wplate .ep-side{grid-column:6 / 8;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(16px,2.4vh,26px);max-width:clamp(280px,30vw,382px);margin:0;text-align:right}
  .exhibit-home .sf2-wplate .ep-side .ep-kicker{order:0;margin:0;text-align:right;max-width:min(100%,330px);line-height:1.5;min-height:calc(3 * 1.5em)}  /* reserve 3 role lines so the CTA sits consistently above the cluster (vertical only; no type/scale change) */
  .exhibit-home .sf2-wplate .ep-side .ep-data{order:1;margin:0;width:100%;max-width:none}
  /* Project Brief CTA — right edge on the column-07 datum of the full-interior grid, sitting above
     the strategic cluster; plain text+dot annotation, no border/box. Kept above the cluster via one
     vertical offset; the grid-media plate (Technology Changes Us) keeps its documented exception. */
  .exhibit-home .sf2-wplate .sf2-brief-toggle{
    left:auto;flex-direction:row-reverse;border-bottom:0;padding-bottom:0;
    right:calc(var(--pad,40px) + (100% - 2*var(--pad,40px))/8 + var(--ep-gap)/8);
    bottom:clamp(335px,31vh,346px);
  }
  .exhibit-home .sf2-wplate .ep-plate:has(.ep-media--grid) .sf2-brief-toggle{bottom:clamp(400px,38vh,418px)}  /* grid-media exception (Technology Changes Us — extra plate padding) */
  .exhibit-home .sf2-brief-toggle:focus-visible{outline:2px solid #fff;outline-offset:5px}
}

/* metadata line — a touch more contrast so it reads without strain (still museum-quiet) */
.exhibit-home .sf2-wplate .ep-kicker{color:rgba(245,242,236,.9);font-weight:500}
.exhibit-home .sf2-wplate .ep-kicker b{color:#fff;font-weight:700}

/* ---- STATIC Work-plate information (2026-08-05): the shared work-plate.css reveal
   (.sf2-wr{opacity:var(--rv,0);transform:…}, driven by work-plate.js) is neutralised on the
   homepage at this source, so every plate's title, statement, role line and data box render in
   their final visible state and remain visible with JavaScript disabled. The shared module is
   left untouched (other pages keep their behaviour); work-plate.js's --rv writes become inert. ---- */
.exhibit-home .sf2-wr{opacity:1;transform:none;will-change:auto}
.exhibit-home .sf2-wtitle.sf2-wr,.exhibit-home .ep-data__row.sf2-wr{transform:none}

/* Project Brief mark — a small solid white dot with a calm expanding white halo. Communicates
   "interactive", not "urgent". The dot stays solid; the halo grows 1×→2.2× and fades out. */
@keyframes sf2-briefhalo{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(2.2);opacity:0}}
.exhibit-home .sf2-brief-toggle .pl{position:relative;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#fff;color:transparent;font-size:0;line-height:0;transform:none}
.exhibit-home .sf2-brief-toggle .pl::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;pointer-events:none;animation:sf2-briefhalo 2s cubic-bezier(.22,.61,.36,1) infinite}
.exhibit-home .sf2-brief-toggle:hover .pl::after,.exhibit-home .ep-plate.brief-open .sf2-brief-toggle .pl::after{animation:none}
.exhibit-home .ep-plate.brief-open .sf2-brief-toggle .pl{transform:none}
@media (prefers-reduced-motion:reduce){ .exhibit-home .sf2-brief-toggle .pl::after{animation:none;opacity:0} }

/* Project Brief legibility — slightly more cover + fully white copy, atmosphere preserved */
.exhibit-home .sf2-tracing{background:linear-gradient(180deg,rgba(14,12,10,.62),rgba(12,10,9,.74))}
.exhibit-home .sf2-tracing__s{color:#fff}
.exhibit-home .sf2-tracing__s b{color:var(--intervention)}
.exhibit-home .sf2-tracing__k{color:rgba(245,242,236,.92)}

/* The Porn Tax Campaign — horizontal advertising sequence as the featured work */
.exhibit-home .ep-plate--gallery .ep-media--gallery{position:absolute;inset:0;overflow:hidden}
.exhibit-home .ep-plate--gallery .pt-strip{position:absolute;inset:0;display:flex;width:300%;height:100%;will-change:transform}
.exhibit-home .ep-plate--gallery .pt-strip__ad{flex:0 0 33.3333%;width:33.3333%;height:100%;object-fit:cover;object-position:center;background:#141210}
@media (min-width:821px){ .exhibit-home .ep-plate--gallery .pt-strip{animation:pt-pan 24s cubic-bezier(.65,0,.35,1) infinite} }
@keyframes pt-pan{0%,24%{transform:translateX(0)}33%,57%{transform:translateX(-33.3333%)}66%,90%{transform:translateX(-66.6666%)}99.9%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){ .exhibit-home .ep-plate--gallery .pt-strip{animation:none;transform:translateX(0)} }

/* retire residual blue: the type-plate screen aligns to the charcoal system */
.exhibit-home .ep-plate--type{background:#141210}

@media (max-width:820px){
  /* mobile: boards return to natural flow height; evidence cluster stacks under the copy */
  .exhibit-home .sf2-wplate .ep-side{align-items:flex-start;text-align:left}
  .exhibit-home .sf2-wplate .ep-side .ep-kicker{text-align:left}
}

/* Technology Changes Us — names hold steady through the four-up; they recede only when the
   Seducer's dance (State B) crossfades in, and return with State A. */
.exhibit-home .ep-media--grid .tcu-name{transition:opacity .5s ease}
.exhibit-home .ep-media--grid.is-danceB .tcu-name{opacity:0}


/* ---- living identity dot in the JasonWalker · design wordmark (intervention red) ---- */
/* ============================================================
   JW DOT IDENTITY — centralized Level A master mark (wordmark).
   True 1:1 circle, solid fill; no stroke/gradient/glow/shadow/opacity.
   Tokens: tokens.css (--jw-dot-*). Rules: DOT-IDENTITY-GOVERNANCE.md
   ============================================================ */
.jw-dot{display:inline-block;flex:0 0 auto;border-radius:50%;background:var(--jw-dot-brand,var(--intervention,#171717));aspect-ratio:1 / 1;line-height:0}
.wordmark .jw-dot--wordmark,.wordmark .wm-dot{align-self:center;flex:0 0 auto;width:var(--jw-dot-wordmark-size,clamp(5px,0.32em,8px));height:var(--jw-dot-wordmark-size,clamp(5px,0.32em,8px));margin:0 var(--jw-dot-wordmark-gap,0.18em);border-radius:50%;background:var(--jw-dot-brand,var(--intervention,#171717));transform-origin:50% 50%;transform:translateY(var(--jw-dot-wordmark-y,-0.02em));animation:none}
.nav .wordmark .jw-dot--wordmark,.nav .wordmark .wm-dot{animation:jwDotBreath var(--jw-dot-breath-duration,6400ms) ease-in-out infinite}
.nav .wordmark:hover .jw-dot--wordmark,.nav .wordmark:focus-visible .jw-dot--wordmark,.nav .wordmark:hover .wm-dot,.nav .wordmark:focus-visible .wm-dot{animation:jwDotHover 1150ms ease-out}
html[data-jw-living-mark="active"] .nav .wordmark .jw-dot--wordmark,html[data-jw-living-mark="active"] .nav .wordmark .wm-dot{animation:none}
@keyframes jwDotBreath{0%,74%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(1)}87%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(var(--jw-dot-breath-scale,1.035))}100%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(1)}}
@keyframes jwDotHover{0%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(1)}45%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(1.055)}100%{transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) scale(1)}}
@media (prefers-reduced-motion:reduce){.wordmark .jw-dot--wordmark,.wordmark .wm-dot{animation:none !important;transform:translateY(var(--jw-dot-wordmark-y,-0.02em)) !important}}