/* ============================================================================
   thehowwhat.com — site.css (v4, dossier-LIGHT)
   Page-level styling on top of: tokens.css (press, light) + base.css +
   components.css + media.css + spectral.css. Materializes mockups.html.

   The page base is warm paper. Spectral RGB is ACCENT LIGHT and recombines
   ADDITIVELY toward WHITE — never multiply/black. On light surfaces the channels
   show as solid colored dots/echoes and a white core fades in as they converge;
   on NIGHT surfaces screen-blend produces the white directly. No dark backing.
   Driven by --t : 0 = split (RGB apart) → 1 = converged (white).
   ============================================================================ */

:root { --maxw: 1180px; }
.wrapn { width: min(var(--maxw), 100% - var(--bleed) * 2); margin-inline: auto; }
.section-dark, .night { background: var(--night); color: var(--cream); }



/* --- ECHO (display wordmarks: hero name, footer mark) --- */
.echo {
  position: absolute; inset: 0; pointer-events: none;
  font-style: italic; will-change: transform;
  mix-blend-mode: screen;                    /* TRUE additive: R+G+B → white, pairwise → C/M/Y */
  transition: transform 800ms var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out);
}
.echo--r { color: var(--add-r); }
.echo--g { color: var(--add-g); }
.echo--b { color: var(--add-b); }
.top { position: relative; display: inline-block; }   /* box-definer; transparent in additive contexts */
.colophon .mark .top { color: transparent; }
/* HERO NAME is rendered on a <canvas> (see m1-hero-name.js) — the ONLY way to combine
   three colour channels into a clean white with no edge-rim. Three stacked DOM/SVG layers
   always inflate the edge alpha (heavy dark halo); a canvas keys by alpha = max(r,g,b)
   so at rest every glyph pixel is white at exactly its anti-aliased coverage — clean white
   on tan, nothing else — and on scroll the channels explode into vivid un-washed R/G/B. */

/* --- CH (inline links / nav / chapter words) — RGB channel split.
   On LIGHT paper screen-blend washes the channels to near-invisible, so light context
   uses NORMAL blend = vivid offset RGB fringes peeking from behind the ink text. On the
   NIGHT surfaces the channels are TRUE additive (screen → white). --- */
.ch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  mix-blend-mode: normal;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slower) var(--ease-out-expo);
}
.on-night .ch { mix-blend-mode: screen; }
.ch--r { color: var(--add-r); } .ch--g { color: var(--add-g); } .ch--b { color: var(--add-b); }
.white { position: relative; display: inline-block; }










/* ============================================================================
   NAV — paper, blurred, sticky. Channel-split on brand + links (light/multiply).
   ============================================================================ */
.nav { position: sticky; top: 0; z-index: var(--z-sticky);
  /* the masthead is its own dark gray band on every page and in both modes —
     a dark ground under the name so the additive split reads true: R+G+B
     converge to WHITE, never a dark lens on the paper below */
  --nav-bg: #232327; --nav-text: #F2F1EC; --nav-muted: #A8A79F;
  --nav-border: rgba(255,255,255,.14); --nav-accent: #8FBCFF;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m);
  padding: var(--space-s) var(--bleed);
  background: color-mix(in oklab, var(--nav-bg) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
/* v7: the title bar leads with the NAME. The three identities sit beside it and
   carry the site's identity animation — each word takes a slow turn waking into
   ink with a one-breath RGB split (additive signature), then recedes. CSS-only:
   identical on React shells and generated static pages. */
.nav { justify-content: flex-start; gap: 2.2em; --ring: var(--nav-accent); }
.nav .meta-r { margin-left: auto; } /* desktop: links right but the cluster reads tight */
.nav .brand-name { display: flex; align-items: baseline; gap: .8em; white-space: nowrap; color: var(--nav-text); }
.nav .brand-name .bn { text-decoration: none; color: inherit; }
.nav .brand-name .bn:hover, .nav .brand-name .bn:focus-visible { color: var(--nav-accent); }
.nav .brand-name .bn:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; border-radius: 2px; }
.nav .brand-name .bi { cursor: default; }
.nav .brand-name .bn { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0);
  letter-spacing: -0.02em; text-transform: none; transition: color var(--dur-fast); }
.nav .brand-name .bi { display: inline-flex; align-items: baseline; gap: .55em;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--nav-muted); }
.nav .brand-name .bi-sep { opacity: .45; }
.nav .brand-name .bi-w { position: relative; isolation: isolate; transition: color .3s linear; }
/* the identities as SORTERS (home): plain buttons in the band; the active
   filter holds its word fully lit while the others fall back */
.nav .brand-name button.bi-w { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
  background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.nav .brand-name button.bi-w:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; border-radius: 2px; }
html[data-filter] .nav.id-glow .brand-name .bi-w { --gw: 0.08; }
html[data-filter="art"] .nav.id-glow .brand-name .bi-w:nth-child(1),
html[data-filter="science"] .nav.id-glow .brand-name .bi-w:nth-child(3),
html[data-filter="engineering"] .nav.id-glow .brand-name .bi-w:nth-child(5) { --gw: 1; }

/* IDENTITY GLOW v2 — the light lives INSIDE the letterforms (research:
   Codrops glowing-marquee, Argyle's gradient-bloom stack, aurora-clipped
   text; refs in docs/). Each word is glass: an oklch gradient is painted
   into the glyphs (background-clip: text) whose lightness and chroma rise
   with the page's weight var (--ga/--gs/--ge). The BLOOM is the word's own
   blurred letterforms (a ::before copy) — a typographic emission, never an
   airbrushed disc — blended plus-lighter so overlapping blooms recombine
   toward white on the dark band. A narrow hot passage drifts through the
   glyphs every ~9s: light traveling through glass. Repaints stay inside
   each word's box; reduced motion = lit, still. */
.nav.id-glow .brand-name .bi-w { position: relative; color: transparent;
  background: linear-gradient(100deg,
    oklch(calc(64% + var(--gw, 0) * 24%) calc(0.02 + var(--gw, 0) * 0.20) var(--hue, 0)) 0%,
    oklch(calc(68% + var(--gw, 0) * 24%) calc(0.03 + var(--gw, 0) * 0.24) calc(var(--hue, 0) + 14)) 42%,
    oklch(calc(66% + var(--gw, 0) * 30%) calc(0.02 + var(--gw, 0) * 0.10) var(--hue, 0)) 50%,
    oklch(calc(68% + var(--gw, 0) * 24%) calc(0.03 + var(--gw, 0) * 0.24) calc(var(--hue, 0) + 14)) 58%,
    oklch(calc(64% + var(--gw, 0) * 24%) calc(0.02 + var(--gw, 0) * 0.20) var(--hue, 0)) 100%);
  background-size: 320% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; }
.nav.id-glow .brand-name .bi-w::before { content: attr(data-text); position: absolute; inset: 0;
  background: inherit; background-size: inherit; background-position: inherit;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; filter: blur(7px) saturate(calc(1 + var(--gw, 0) * 1.6));
  opacity: calc(var(--gw, 0) * var(--gw, 0) * 0.9);
  mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { .nav.id-glow .brand-name .bi-w::before { mix-blend-mode: plus-lighter; } }
.nav.id-glow .brand-name .bi-w:nth-child(1) { --gw: var(--ga, 0); --hue: 19; }
.nav.id-glow .brand-name .bi-w:nth-child(3) { --gw: var(--gs, 0); --hue: 150; }
.nav.id-glow .brand-name .bi-w:nth-child(5) { --gw: var(--ge, 0); --hue: 256; }
@media (prefers-reduced-motion: no-preference) {
  .nav.id-glow .bi-w, .nav.id-glow .brand-name .bi-w::before { animation: bi-light-drift 9s linear infinite; }
  .nav.id-glow .brand-name .bi-w:nth-child(3), .nav.id-glow .brand-name .bi-w:nth-child(3)::before { animation-delay: -3s; }
  .nav.id-glow .brand-name .bi-w:nth-child(5), .nav.id-glow .brand-name .bi-w:nth-child(5)::before { animation-delay: -6s; }
}
@keyframes bi-light-drift { to { background-position: 320% 0; } }
/* m8 · HOME — the name fractures. At rest "Michael Stern" is pure white,
   its three chromatic ghosts stacked in perfect register beneath it. On
   scroll the ghosts fracture out and TRAVEL — red to ARTIST, green to
   SCIENTIST, blue to ENGINEER (the identities sit under the name on home) —
   fading into the words as they ignite; the name dims as its light leaves,
   and everything reverses on the way back up. m8-ident.js measures the
   travel vectors (--fx-r/g/b, --fy-r/g/b) and scrubs --m8p, --m8o, and the glows.
   Transform/opacity only — compositor-friendly in the sticky band. */
.nav.id-morph .brand-name { flex-direction: column; align-items: flex-start; gap: 4px; }
/* the home masthead is two rows tall — Bio/Studio center vertically in the band */
@media (min-width: 48rem) { .nav.id-morph { align-items: center; } }
.nav.id-morph .bn { color: var(--nav-text); opacity: calc(1 - var(--m8p, 0)); }
@media (prefers-reduced-motion: reduce) { .nav.id-morph .bn { opacity: 1; } }
.nav.id-morph .bn:focus-visible, .nav.id-morph .bn-wrap:hover .bn { opacity: 1; }   /* the home link never becomes unreachable */
/* the identities GROW as their Michael Sterns arrive, rising into the band's center */
.nav.id-morph .bi { font-size: calc(var(--step--2) * (1 + var(--m8p, 0) * 0.45));
  transform: translateY(calc(var(--m8p, 0) * -1 * var(--bi-rise, 13px))); transform-origin: left center; }
.bn-wrap { position: relative; display: inline-block; }
.bnf { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-0);
  letter-spacing: -0.02em; text-transform: none; line-height: inherit;
  mix-blend-mode: screen; opacity: var(--m8o, 0); will-change: transform, opacity;
  transform: translate(calc(var(--fx, 0px) * var(--m8p, 0)), calc(var(--fy, 0px) * var(--m8p, 0)))
             scale(calc(1 - 0.38 * var(--m8p, 0)));
  transform-origin: center center; }
.bnf-r { color: rgb(255, 45, 85);  --fx: var(--fx-r, 0px); --fy: var(--fy-r, 0px); }
.bnf-g { color: rgb(52, 199, 89);  --fx: var(--fx-g, 0px); --fy: var(--fy-g, 0px); }
.bnf-b { color: rgb(10, 132, 255); --fx: var(--fx-b, 0px); --fy: var(--fy-b, 0px); }
@media (prefers-reduced-motion: reduce) { .bnf { display: none; } }
/* narrow: identities stack under the name — they're the thesis, never hidden */
@media (max-width: 40rem) { .nav .brand-name { flex-direction: column; align-items: flex-start; gap: 3px; } }
/* touch targets: nav links must clear 24px (WCAG 2.5.8); the visual stays identical —
   padding extends the hit area, the underline keeps hugging the text */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .nav .meta-r a { padding-top: 8px; padding-bottom: 8px; }
  .colophon .downloads a { padding: 8px 0; display: inline-block; }
}

/* ---- v7: the WHAT/HOW tab pair + full-page theme inversion ----
   WHAT = the gallery (light); HOW = the darkroom. html[data-mode="how"]
   overrides the press tokens; --ink and --night are deliberately untouched so
   the footer and vitrines keep their own grounds. */
/* scoped to the themed BODY: the press tokens are declared on [data-theme],
   so the inversion must out-specify them there, not on html */
html[data-mode="how"] [data-theme] {
  --bg: #131316; --surface: #1B1B1F; --surface-2: #222226;
  --text: #ECEBE6; --muted: #9B9B93; --subtle: #8A8A82;
  --border: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.22);
  --accent: #6AA6FF; --accent-hover: #8FBCFF; --accent-2: #6AA6FF; --ring: #6AA6FF;
}
html[data-mode="how"] [data-theme] { --accent-contrast: #0E0E11; --muted: #ABABA2; --subtle: #98988F; }
/* --ink doesn't invert (the footer's ground depends on it), so every ink-colored
   element that can appear in How mode gets a token-driven override here */
html[data-mode="how"] [data-theme] .detail-pager .pager-ttl,
html[data-mode="how"] [data-theme] .detail-spec dd,
html[data-mode="how"] [data-theme] .detail-top .back-link:hover { color: var(--text); }
html[data-mode="how"] [data-theme] .detail-pager a:hover { background: rgba(255,255,255,.04); }
html[data-mode="how"] [data-theme] .acquire-btn { background: var(--text); color: #131316; border-color: var(--text); }

html[data-mode] body { transition: background-color .45s ease, color .45s ease; }
@media (prefers-reduced-motion: reduce) { html[data-mode] body { transition: none; } }
/* panel visibility is MODE-driven the instant prePaint runs — no flash while
   the deferred tabs.js loads; the [hidden] attr remains the no-JS fallback */
html:not([data-mode]) [data-panel][hidden] { display: none !important; }
html[data-mode="what"] [data-panel="how"], html[data-mode="how"] [data-panel="what"] { display: none !important; }
.tabbar { display: inline-flex; gap: 0; margin: var(--space-s) 0 var(--space-m);
  border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.tabbar button { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; padding: .6em 1.8em; background: var(--surface); color: var(--muted);
  border: 0; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.tabbar button + button { border-left: 1px solid var(--border-strong); }
.tabbar button:hover { color: var(--text); }
/* the active style is mode-driven too — the baked .on class would otherwise
   highlight the wrong tab until tabs.js runs on deep links */
html:not([data-mode]) .tabbar button.on,
html[data-mode="how"] .tabbar [data-tab="how"],
html[data-mode="what"] .tabbar [data-tab="what"] { background: var(--accent); color: var(--accent-contrast, #fff); }
.tabbar button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.how-voice { font-size: var(--step-1); line-height: 1.6; max-width: 56ch; color: var(--text); }
.printer-links a { color: var(--accent); font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none; margin-right: var(--space-m);
  white-space: nowrap; display: inline-block; }
.printer-links a:hover { color: var(--accent-hover); }
/* embedded film (How tab video) — responsive 16:9 */
.embed-16x9 { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0E0E11;
  border: 1px solid var(--border-strong); border-radius: 2px; overflow: hidden; }
.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* self-hosted looping clip in a How tab (e.g. G3DP3 printing) */
figure.embed-16x9.how-clip { margin: 0; }
.how-clip video.detail-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* paper figures as objects (recycled-2024 What tab) */
.paper-figs { display: grid; gap: var(--space-l); margin-top: var(--space-m); }
.paper-fig { margin: 0; }
.paper-fig img { width: 100%; display: block; border-radius: 2px; }
.paper-fig .pf-text { margin-top: .6em; font-size: var(--step-0); line-height: 1.55; color: var(--text); max-width: 60ch; }
.paper-fig .pf-text strong { font-weight: 700; }
.paper-fig.pf-wide img { background: #0E0E11; }

/* spec table (VAST AUAV, etc.) — real tabular data, monospace values */
.spec-table { width: 100%; max-width: 32rem; border-collapse: collapse; margin-top: var(--space-m);
  font-size: var(--step--1); }
.spec-table th, .spec-table td { text-align: left; padding: .55em .9em; border-bottom: 1px solid var(--border); }
.spec-table th { font-weight: 600; color: var(--text-dim); width: 60%; }
.spec-table td { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---- the spotlight poem reveal (Ultra) ---------------------------------- */
.poem-reveal-block { margin-top: var(--space-l); }
.poem-hint { font-size: var(--step--1); color: var(--text-dim); max-width: 52ch; margin: .2em 0 var(--space-m);
  transition: opacity .8s var(--ease-out); }
.poem-hint.is-faded { opacity: .32; }
.poem-reveal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.poem-reveal { position: relative; margin: 0; aspect-ratio: 1 / 1; background: #000;
  border: 1px solid var(--border-strong); border-radius: 3px; overflow: hidden;
  cursor: crosshair; touch-action: pan-y; isolation: isolate; }
.poem-reveal .poem-src { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: 0; }            /* the texture; the canvas paints from it */
.poem-reveal .poem-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 1; background: #000; }
.poem-reveal .poem-label { position: absolute; left: .7em; bottom: .55em; z-index: 2;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5); pointer-events: none; }
@media (max-width: 40rem) { .poem-reveal-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .poem-reveal { cursor: default; }
  .poem-reveal .poem-canvas { background: transparent; }
}
/* the How tab swaps the hero in place — a crossfade, never a second image */
.detail-hero .hero-how { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: 0; transition: opacity .5s var(--ease-out); }
html[data-mode="how"] .detail-hero .hero-how { opacity: 1; }

/* the meta line that sits under the artwork, above the tabs */
.detail-meta.under-art { margin: var(--space-m) 0 0; }

/* research WHAT tab: the artifacts grid (square tiles, same language as home).
   --rg-n / --rg-d are set inline to the item count (capped 2 / 3) so one, two,
   or three references each fill the row — no blank trailing slot. */
.rg-grid { display: grid; grid-template-columns: repeat(var(--rg-n, 2), 1fr); gap: 2px; margin-top: var(--space-m);
  background: var(--border-strong); border: 2px solid var(--border-strong); }
@media (min-width: 52rem) { .rg-grid { grid-template-columns: repeat(var(--rg-d, 3), 1fr); } }

/* recycled-glass How: the paper's process as a numbered list */
.process-steps { margin: var(--space-s) 0 0; padding: 0; list-style: none; counter-reset: ps;
  display: flex; flex-direction: column; gap: var(--space-s); max-width: 70ch; }
.process-steps li { counter-increment: ps; position: relative; padding-left: 2.6em;
  font-size: var(--step--1); line-height: 1.55; color: var(--text); }
.process-steps li::before { content: counter(ps, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 2px; padding: .15em .4em; line-height: 1; }
.process-steps li strong { color: var(--text); }

/* patent WHAT tab: the printer, as a linked plate to its project */
.patent-printer { display: block; text-decoration: none; margin-top: var(--space-s); }
.patent-printer .detail-hero { margin-bottom: var(--space-2xs); }
.patent-printer .patent-printer-cap { display: inline-block; font-family: var(--font-mono);
  font-size: var(--step--1); color: var(--accent); letter-spacing: .02em; }
.patent-printer:hover .patent-printer-cap { color: var(--accent-hover); }
.patent-printer:hover .detail-hero img { transform: scale(1.02); }
.rg-tile { position: relative; display: block; background: #131316; overflow: hidden; }
.rg-tile img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out); }
.rg-tile:hover img { transform: scale(1.04); }
.rg-tile .rg-ph { display: flex; align-items: flex-end; width: 100%; aspect-ratio: 1 / 1;
  padding: var(--space-s); font-family: var(--font-display); font-weight: 700; color: #8A8A82;
  background: radial-gradient(120% 90% at 30% 10%, #1B1B1F, #0E0E11); }
.rg-tile .rg-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  justify-content: space-between; gap: 1em; padding: .55em .8em;
  background: linear-gradient(to top, rgba(10,10,12,.75), rgba(10,10,12,0)); }
.rg-tile .rg-cap .t { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: #F2F1ED; }
.rg-tile .rg-cap .y { font-family: var(--font-mono); font-size: var(--step--2); color: #B7B7AF; }
.rg-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* ---- mobile full-bleed doctrine (overhaul v6): media runs edge to edge; text
   keeps the gutter. Negative-margin bleed (NOT 100vw — composes inside .wrapn
   with zero overflow). Never applied to already-100vw surfaces
   (.detail-hero, .gallery-band) or to labeled diagrams. ---- */
@media (max-width: 48rem) {
  .home-hero .hero-media { margin-inline: calc(-1 * var(--bleed)); border-radius: 0; }
  .bio-strip { padding-inline: 0; }
  .bio-strip .pic { margin-inline: calc(-1 * var(--bleed)); }
  /* thread chips on the generated work pages: the scrollport bleeds, the first
     chip keeps the text margin */
  /* the paper chips stack vertically and wrap their titles — a side-scroller
     with one 500px chip read as content running off the screen */
  .threads-row { display: flex; flex-direction: column; gap: 8px; }
  .threads-row .thread-chip { white-space: normal; max-width: 100%; line-height: 1.35; }
  .ledger-threads .thread-chip { white-space: normal; max-width: 100%; line-height: 1.35; }
}
.nav .meta-r { display: flex; gap: var(--space-l); align-items: baseline; }
.nav .meta-r a { position: relative; isolation: isolate; color: var(--nav-muted); text-decoration: none;
  padding-bottom: 4px; transition: color var(--dur-fast); }
.nav .meta-r a .white { color: var(--nav-muted); transition: color var(--dur-fast); }
.nav .meta-r a:hover .white, .nav .meta-r a:focus-visible .white { color: var(--nav-text); }
/* clean accent underline that slides in on hover/focus; persistent when active */
.nav .meta-r a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--nav-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out); }
.nav .meta-r a:hover::after, .nav .meta-r a:focus-visible::after { transform: scaleX(1); }
.nav .meta-r a.is-active .white { color: var(--nav-text); }
.nav .meta-r a.is-active::after { transform: scaleX(1); }
.nav .meta-r a.ext .white::after { content: "  \2197"; display: inline-block; transition: transform var(--dur-fast); }
.nav .meta-r a.ext:hover .white::after { transform: translate(2px,-2px); }

















@media (max-width: 48rem) {
  /* stack: brand on its own line, links wrap as a tidy left-aligned row (no orphans) */
  .nav { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .nav .meta-r { width: 100%; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--step--2); }
  }

/* ============================================================================
   HOME · HERO — name resolving out of three colors, on paper.
   ============================================================================ */
/* light gallery wall; the dark lives only in CONTAINED vitrines — the name plate
   and the media panel — the way Michael's glass actually sits in a room. The plate
   is the one dark ground where the additive R+G+B name legally converges to white;
   on scroll the channels explode and the colour escapes the plate onto the paper. */
.home-hero { position: relative; overflow: hidden; background: var(--bg);
  padding: var(--space-2xl-fluid) var(--bleed); }
.home-hero .hero-cta a.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.home-hero .hero-cta a.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.home-hero .stage { width: min(var(--maxw), 100%); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-xl); align-items: stretch; }
/* text column fills the image's height; the two groups anchor to top & bottom edges */
.hero-col { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-l); min-height: 100%; }
/* Roles read as an ADDITIVE SUM: three R/G/B "+" operators (the three channels) join the four
   disciplines, which resolve into the white name below — the same R+G+B → white logic as the
   canvas wordmark. The human note sits quietly beneath the name. */
.hero-roles { font-family: var(--font-mono); font-size: var(--step-0); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin-bottom: var(--space-xs); }
.hero-roles .op { font-style: normal; font-weight: 700; font-size: 1.15em; }
/* pure RGB — the same three channels as the canvas name */
.hero-roles .op--r { color: #FF0000; }
.hero-roles .op--g { color: #00DD00; }
.hero-roles .op--b { color: #0000FF; }
/* Font tokens here are READ by m1-hero-name.js to draw the canvas word — keep accurate
   even though no DOM text paints. The canvas itself is sized/positioned by the script
   (it overhangs this box so the scroll-explosion never clips); JS sets a negative margin
   so layout only reserves the word's own height. */
/* THE POINT: the name at rest is a ghost — white on the gray wall, barely there.
   It exists as COLOUR only in motion (load convergence, scroll explosion). Do not
   put a plate behind it; the subtlety is the design. */
.hero-name { position: relative; margin: var(--space-s) 0;
  font-family: var(--font-display); font-style: normal; font-weight: 800;
  font-size: clamp(1.9rem, 0.5rem + 6.1vw, 5.6rem); line-height: .95; letter-spacing: -0.035em; }
.hero-name-cv { display: block; }
.hero-tag { font-family: var(--font-display); font-style: italic; font-size: var(--step-2);
  color: var(--text); max-width: 34ch; line-height: 1.4; margin: 0 0 var(--space-m); }
.hero-tag b { color: var(--accent-2); font-style: normal; font-weight: 400; }
.hero-cta { display: inline-flex; gap: var(--space-s); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; }
.hero-cta a { padding: var(--btn-pad); border: 1px solid var(--ink); color: var(--ink); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.hero-cta a:hover { background: var(--ink); color: var(--surface); }
.hero-cta a.primary { background: var(--ink); color: var(--surface); }
.hero-cta a.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.hero-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--night);
  display: flex; align-items: center; justify-content: center; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 60% 35%, rgba(240,191,126,.4), transparent 70%); }
.hero-media .ph { position: relative; z-index: 2; text-align: center; color: #F0BF7E;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; line-height: 1.6; }
@media (max-width: 48rem) {
  .home-hero .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }
  /* on mobile the column flows normally — no stretch/spread (that's a desktop two-column move) */
  .hero-col { min-height: 0; justify-content: flex-start; gap: var(--space-m); }
  /* Phase Change reads as a full-width banner on mobile, not a tall side card */
  .hero-media { aspect-ratio: 16 / 9; }
}

.see-all { display: inline-block; margin-top: var(--space-l); font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent-2); padding-bottom: 3px; transition: color var(--dur-fast); }
.see-all:hover { color: var(--accent-2); }

/* ============================================================================
   NOW-PLAYING / URBAN GLASS card (home) + UG landing shared bits
   ============================================================================ */
.ug { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); }
.ug .art { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--night);
  display: flex; align-items: center; justify-content: center; color: #F0BF7E;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; text-align: center; padding: var(--space-m); }
.ug .art img { width: 100%; height: 100%; object-fit: cover; }
.ug .art .ug-art-ph { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .2rem; padding: var(--space-m); color: #C7BBA7; }
.ug .art .ug-art-ph-t { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--cream); }
.ug .art .ug-art-ph-b { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; }
.ug .art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 42% 40%, rgba(240,191,126,.28), transparent 64%); }
.ug .meta { padding: var(--space-xl-fluid) var(--space-l-fluid); display: flex; flex-direction: column; justify-content: center; }
.ug .meta .ph { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.ug .meta h3 { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--step-4); line-height: 1.05; margin: var(--space-2xs) 0 var(--space-s); color: var(--ink); }
.ug .meta h3 em { font-style: normal; color: var(--accent-2); }
.ug .meta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-m); margin: var(--space-m) 0; font-size: var(--step--1); }
.ug .meta dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ug .meta dd { margin: 0; color: var(--text); }
.ug .meta .rsvp { align-self: flex-start; margin-top: var(--space-s); padding: var(--btn-pad); background: transparent;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; transition: background var(--dur-fast), color var(--dur-fast); }
.ug .meta .rsvp:hover { background: var(--ink); color: var(--surface); }
@media (max-width: 48rem) {
  .ug { grid-template-columns: 1fr; }
  /* the show's key art is a landscape photograph — full-bleed it edge to edge
     at its own proportion instead of forcing the desktop 4/5 portrait crop */
  .ug .art { aspect-ratio: 3 / 2; }
}


.idx .list { padding: var(--space-l); border-right: 1px solid var(--border-strong); }
.idx .list ol { list-style: none; padding: 0; margin: 0; counter-reset: wn; }
.idx .list li { counter-increment: wn; display: grid; grid-template-columns: 3ch 1fr max-content; gap: var(--space-m);
  padding: var(--space-s) 0; border-bottom: 1px solid var(--border); align-items: baseline; cursor: pointer;
  transition: padding-left var(--dur-base) var(--ease-out); }
.idx .list li:hover { padding-left: var(--space-2xs); }
.idx .list li::before { content: "0" counter(wn); font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); letter-spacing: .1em; }
.idx .list li b { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--step-1); color: var(--text); }
.idx .list li span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.idx .list li[aria-current="true"] { background: linear-gradient(90deg, color-mix(in oklab, var(--prism-r) 8%, transparent), color-mix(in oklab, var(--prism-b) 8%, transparent)); }
.idx .list li[aria-current="true"] b { color: var(--accent-2); }
.idx .feature { position: relative; overflow: hidden; background: var(--night); display: flex; align-items: flex-end; color: #F0BF7E; padding: var(--space-m); }
.idx .feature img, .idx .feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idx .feature::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255,122,26,.36), transparent 70%); }


@media (max-width: 48rem) { .idx { grid-template-columns: 1fr; } .idx .list { border-right: 0; border-bottom: 1px solid var(--border-strong); } .idx .feature { min-height: 60vw; } }

/* ============================================================================
   BIO STRIP (home) — portrait left, bio right.
   ============================================================================ */
.bio-strip { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-l); align-items: center;
  background: var(--surface-2); padding: var(--space-l-fluid); }
.bio-strip .pic { position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: linear-gradient(160deg, #3A2F1F, #0E0C09); display: flex; align-items: flex-end;
  color: #F0BF7E; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; padding: var(--space-m); }
.bio-strip .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bio-strip h2 { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--step-3); margin: 0 0 var(--space-s); color: var(--ink); }
.bio-strip h2 .acc, .bio-strip h2 em { font-style: normal; color: var(--accent-2); }
.bio-strip p { font-size: var(--step-0); color: var(--text); max-width: none; }
.bio-strip p + p { margin-top: var(--space-s); }
.bio-strip p.muted { color: var(--muted); }
.bio-strip .creds { display: flex; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-s);
  font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 48rem) { .bio-strip { grid-template-columns: 1fr; } }

/* THREE STUDIOS — /bio bands (component: StudioBands) */
.studio-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
/* v2: the current studio leads full-width; the past pair shares the row below */
.studio-bands.v2 { grid-template-columns: 1fr; gap: var(--space-m); }
.studio-bands.v2 .sb-current { border-top: 2px solid var(--text); }
.studio-bands.v2 .sb-current h3 { font-size: var(--step-3); }
.studio-bands.v2 .sb-current h3 a { color: inherit; text-decoration: none; }
.studio-bands.v2 .sb-current h3 a:hover { color: var(--accent-2); }
/* the rule sits ABOVE the "Past studios" heading, so the label heads the block below it */
.studio-bands.v2 .sb-past-label { margin-top: var(--space-l); border-top: 1px solid var(--border-strong);
  padding-top: var(--space-s); font-family: var(--font-mono);
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--subtle); }
.studio-bands.v2 .sb-past { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); }
/* the past columns no longer carry their own top rule (the label's rule divides the block) */
.studio-bands.v2 .sb-past article { border-top: none; padding-top: 0; }
.studio-bands.v2 .sb-past h3 a { color: inherit; text-decoration: none; }
.studio-bands.v2 .sb-past h3 a:hover { color: var(--accent-2); }
@media (max-width: 40rem) { .studio-bands.v2 .sb-past { grid-template-columns: 1fr; } }
.studio-bands article { border-top: 1px solid var(--border-strong); padding-top: var(--space-s); }
.studio-bands .yr { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.studio-bands h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--step-2); color: var(--ink); margin: var(--space-2xs) 0 .1rem; }
.studio-bands .role { display: block; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.studio-bands p { font-size: var(--step--1); color: var(--text); line-height: 1.55; margin: var(--space-s) 0 0; max-width: 38ch; }
.studio-bands .visit { display: inline-block; margin-top: var(--space-s); font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-2); text-decoration: none; border-bottom: 1px solid var(--accent-2); padding-bottom: 1px; }
.studio-bands .visit:hover { color: var(--ink); border-color: var(--ink); }
.studio-bands .visit::after { content: " \2197"; }
@media (max-width: 48rem) { .studio-bands { grid-template-columns: 1fr; gap: var(--space-l); } }

/* ============================================================================
   COLOPHON / FOOTER — night bookend. M7 footer convergence lives here.
   ============================================================================ */
.colophon { background: var(--ink); color: #EAE0D0; padding: var(--space-2xl-fluid) var(--bleed); }
.colophon-inner { width: min(var(--maxw), 100%); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-xl); }
.colophon .colo-label { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; color: #9B8E78; margin: 0 0 var(--space-s); font-weight: 500; }
.colophon .mark { position: relative; isolation: isolate; display: inline-block; margin: 0 0 var(--space-s);
  font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: clamp(1.5rem, 1rem + 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; color: var(--cream); white-space: nowrap; }
.colophon .mark .top { color: var(--cream); }
.colophon .mark .echo { transition: transform 240ms linear; font-style: inherit; }   /* scrubbed by m7; upright like the mark — slanted echoes read as misregistration */
.colophon a { color: var(--cream); text-decoration: none; transition: color var(--dur-fast); }
.colophon a:hover { color: #FFFFFF; }
.colophon a:hover { border-color: var(--cream); }
.colophon .addr { color: #9B8E78; font-size: var(--step--1); line-height: 1.6; }
.colophon .cc { margin-top: var(--space-m); font-family: var(--font-mono); font-size: var(--step--2); color: #9B8E78; text-transform: uppercase; letter-spacing: .1em; }
.colophon .downloads { display: flex; gap: var(--space-m); margin-top: var(--space-s); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; }
.next-chapter { background: var(--surface-2); border-top: 1px solid var(--border); }
.next-chapter .wrapn { padding-block: var(--space-xl-fluid); }
.next-chapter-link { display: flex; align-items: baseline; gap: var(--space-m); text-decoration: none; color: var(--ink); }
.next-chapter-link .kicker { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-2); }
.next-chapter-link .word { position: relative; isolation: isolate; font-family: var(--font-display); font-style: italic; font-size: var(--step-4); }
.next-chapter-link .arrow { color: var(--accent-2); transition: transform var(--dur-fast); }
.next-chapter-link:hover .arrow { transform: translateX(6px); }
@media (max-width: 48rem) { .colophon-inner { grid-template-columns: 1fr; gap: var(--space-l); } }

/* ============================================================================
   SECTION RULE / CHAPTER HEADER (lifted from draft shell, light)
   ============================================================================ */
.sub-rule { display: flex; align-items: center; font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: var(--space-m); }
.section-rule { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-m); align-items: center;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  padding-bottom: var(--space-s); border-bottom: 1px solid var(--border); margin-bottom: var(--space-l); }
.section-rule .roman { color: var(--accent-2); }
.chapter-header { padding: var(--space-2xl-fluid) 0 var(--space-l); }
.chapter-eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: var(--space-s); }
.chapter-word { position: relative; isolation: isolate; display: inline-block; margin: 0;
  font-family: var(--font-display); font-weight: 300; font-size: var(--step-6); line-height: .95; letter-spacing: -0.02em; color: var(--ink); }
.chapter-sub { font-family: var(--font-display); font-size: var(--step-2); color: var(--muted); max-width: 54ch; margin-top: var(--space-s); }
.chapter-header + .section { padding-top: var(--space-l); }   /* the chapter header already supplies the big top gap */







































@media (max-width: 48rem) {










}

/* ============================================================================
   ENCODING DIAGRAM (components.jsx) — 3 cells, light.
   ============================================================================ */
.encoding-diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--space-s);
  margin: var(--space-l) 0; }
.encoding-diagram .cell { display: flex; flex-direction: column; }
.encoding-diagram .lbl { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: var(--space-2xs); }
.encoding-diagram .lbl .acc { color: var(--accent-2); }
.encoding-diagram .visual { aspect-ratio: 4/3; border: 1px solid var(--border-strong); overflow: hidden; background: var(--surface); }
.encoding-diagram .visual.phase-photo { background: radial-gradient(ellipse at 40% 45%, rgba(240,191,126,.5), #1f1714 70%); }
.encoding-diagram .arrow { align-self: center; color: var(--accent-2); font-family: var(--font-mono); }
.encoding-diagram .caption { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-2xs); line-height: 1.45; }
.encoding-diagram .caption em { color: var(--text); }
@media (max-width: 48rem) { .encoding-diagram { grid-template-columns: 1fr; } .encoding-diagram .arrow { transform: rotate(90deg); } }

/* ============================================================================
/* ============================================================================
   WORK DETAIL + EXHIBITIONS — shared page scaffolds (light, lifted from mockups)
   ============================================================================ */
.detail { padding: var(--space-s) 0 var(--space-2xl-fluid); }

/* top pager — orientation within the catalogue */
.detail-top { display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-l) 0 var(--space-s); border-bottom: 1px solid var(--border); }
.detail-top .back-link { font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted); text-decoration: none; }
.detail-top .back-link::before { content: "\2190\00a0\00a0"; color: var(--accent-2); }
.detail-top .back-link:hover { color: var(--ink); }
.detail-count { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em; color: var(--accent-2); }

/* hero — the piece, or a composed plate when documentation is pending */
.detail { overflow-x: clip; }
.detail-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(440px, 84vh, 940px);
  overflow: hidden; margin-top: var(--space-m);
  background: linear-gradient(150deg, #3A2F1F 0%, #0E0C09 60%);
  box-shadow: 0 40px 70px -40px rgba(40,28,12,.46); }
.detail-hero img, .detail-hero video.detail-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* dither "develop-in" reveal — image resolves from an ink-on-paper halftone under a raking light */
.detail-hero .hero-reveal { position: absolute; inset: 0; z-index: 1; }
.detail-hero .hero-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-wrap { position: relative; overflow: hidden; background: var(--paper); }
.reveal-canvas { position: absolute; inset: 0; z-index: 4; pointer-events: none; image-rendering: pixelated; }
.js-reveal .reveal-wrap > img, .js-reveal .hero-reveal > img { opacity: 0; }
.js-reveal .reveal-wrap.revealing > img, .js-reveal .reveal-wrap.revealed > img,
.js-reveal .hero-reveal.revealing > img, .js-reveal .hero-reveal.revealed > img { opacity: 1; transition: opacity .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal-wrap > img, .js-reveal .hero-reveal > img { opacity: 1; } }
.detail-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 28% 46%, rgba(240,191,126,.20), transparent 62%); }
.detail-hero-ph { position: absolute; inset: 0; z-index: 0; display: flex;
  align-items: center; justify-content: center; padding: var(--space-l); color: #C7BBA7; }
.detail-hero-ph .ph-medallion i { width: 1.15rem; height: 1.15rem; }
.detail-hero-ph .ph-window { position: absolute; left: var(--space-l); bottom: var(--space-l);
  background: rgba(18,14,9,.42); border: 1px solid rgba(244,238,226,.22);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.detail-hero-ph .ph-window .k { color: #F4EEE2; }
.detail-hero-ph .ph-window .s { color: #C7BBA7; }

/* placeholder frames — intentional "image forthcoming" slots with a caption window.
   Night ground (matches the site's other media placeholders); the additive RGB
   medallion screen-blends to WHITE on the dark ground; a paper caption window names
   the intended shot, so each frame doubles as a documentation brief. Restrained —
   no registration/crop marks (the rejected "specimen plate" treatment). */
.ph-medallion { display: inline-flex; align-items: center; }
.ph-medallion i { display: block; width: .8rem; height: .8rem; border-radius: 50%; mix-blend-mode: screen; }
.ph-medallion i.r { background: #FF2A2A; margin-right: -.34rem; }
.ph-medallion i.g { background: #18D24C; margin-right: -.34rem; }
.ph-medallion i.b { background: #2A7BFF; }
.ph-window { display: flex; flex-direction: column; gap: .12rem; padding: var(--space-s) var(--space-m); }
.ph-window .k { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent-2); }
.ph-window .s { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .03em; color: var(--muted); }
.ph-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); margin-top: var(--space-l); }
.ph-frame { border: 1px solid var(--border-strong); background: var(--surface); }
.ph-frame .ph-art { position: relative; aspect-ratio: 4 / 3; max-height: 240px; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 42% 38%, rgba(240,191,126,.16), var(--night) 72%); }
.ph-frame .ph-window { border-top: 1px solid var(--border-strong); background: var(--surface-2); }
@media (max-width: 60rem) { .ph-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .ph-gallery { grid-template-columns: 1fr; } }

/* full-width editorial layout: big title, then a two-column body that fills the width */
.detail-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-2xl-fluid);
  align-items: start; margin-top: var(--space-xl-fluid); }
.detail-main { min-width: 0; }
.detail-side { min-width: 0; position: sticky; top: var(--space-xl); align-self: start; }
.detail-head { padding-top: var(--space-xl-fluid); }
.detail-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(2.75rem, 1.4rem + 6.5vw, 7rem); line-height: 1.0; letter-spacing: -.02em; color: var(--text); margin: 0; }
.detail-meta { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); margin: var(--space-s) 0 0; }
.detail-lead { margin-top: var(--space-l); }
.detail-lead p { font-size: var(--step-1); line-height: 1.58; color: var(--text); margin: 0; max-width: 60ch; }
.detail-lead p + p { margin-top: var(--space-s); }   /* multi-paragraph leads breathe */
.how-voice + .how-voice { margin-top: var(--space-s); }   /* multi-paragraph abstracts too */
/* pause/play for the autoplaying hero video (WCAG 2.2.2) */
.vid-toggle { position: absolute; right: var(--space-s); bottom: var(--space-s); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(14,14,17,.55); color: #F2F1EC; font-size: .8rem; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vid-toggle:hover, .vid-toggle:focus-visible { background: rgba(14,14,17,.8); border-color: #fff; }

/* acquire — funnels to the unified evenline.co shop (mirrors their art-page CTA) */
.detail-acquire { margin-top: var(--space-l); }
.acquire-row { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.acquire-btn { display: inline-flex; align-items: center; min-height: 44px; padding: var(--btn-pad); background: var(--ink);
  color: var(--surface); border: 1px solid var(--ink); text-decoration: none; font-family: var(--font-mono);
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em;
  transition: background var(--dur-fast), border-color var(--dur-fast); }
.acquire-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.acquire-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.acquire-note { margin: var(--space-xs) 0 0; font-family: var(--font-mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.acquire-note a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid var(--accent-2); }
.acquire-note a:hover { color: var(--ink); border-color: var(--ink); }


/* spec — clean catalogue tombstone in the side column */
.detail-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-l);
  border-top: 1px solid var(--border); padding-top: var(--space-m); }
.detail-spec dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.detail-spec dd { margin: .2rem 0 0; font-size: var(--step-0); color: var(--ink); }

/* encoding diagram (Phase Change) */
.detail-encoding { padding-top: var(--space-2xl-fluid); }

/* gallery — full-bleed parallax bands (scroll experience) */
.detail-gallery { padding-top: var(--space-2xl-fluid); }
.gallery-bands { display: flex; flex-direction: column; gap: var(--space-l); margin-top: var(--space-l); }
.gallery-band { position: relative; display: block; width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(58vh, 86vh, 940px); overflow: hidden; background: var(--night); cursor: zoom-in; }
/* blurred backdrop fill — a dimmed cover of the image itself; its tone follows each work */
.gallery-band-bg { position: absolute; left: -6%; top: -8%; width: 112%; height: 120%; object-fit: cover;
  filter: blur(34px) brightness(.6) saturate(1.06); transform: scale(1.04); will-change: transform; z-index: 0; }
/* the complete image — contained, centered, sharp, lifted off the field */
.gallery-band-img { position: absolute; inset: 0; margin: auto; max-width: 88%; max-height: 82%; width: auto; height: auto;
  z-index: 1; box-shadow: 0 40px 90px -34px rgba(0,0,0,.62); }
.gallery-band-cap { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); z-index: 2;
  font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em;
  color: #F4EEE2; background: rgba(18,14,9,.42); padding: .4em .7em; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.js-scroll .gallery-band { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js-scroll .gallery-band.in { opacity: 1; transform: none; }
/* hero departure — scroll-story.js sets --dep 0..1 as you scroll past */
.detail-hero[data-hero-parallax] .hero-reveal img,
.detail-hero[data-hero-parallax] .detail-hero-video { transform: scale(calc(1 + var(--dep, 0) * 0.08)); }
@media (prefers-reduced-motion: reduce) {
  .js-scroll .gallery-band { opacity: 1; transform: none; }
}

/* frosted-light lightbox — in-page image viewer (no new tab, no dark lens over the light page) */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); cursor: zoom-out;
  background: rgba(244,241,235,.86); -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), visibility .28s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-s); cursor: default; }
.lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.lightbox-img { max-width: min(92vw, 1200px); max-height: 80vh; width: auto; height: auto; display: block;
  background: var(--paper); border: 1px solid var(--border); box-shadow: 0 50px 90px -40px rgba(30,20,8,.5); }
.lightbox-cap { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--border); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.lightbox-btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: -1.3rem; }
.lightbox-next { right: -1.3rem; }
.lightbox-close { top: -1.3rem; right: -1.3rem; transform: none; }
.lightbox-close:hover { transform: scale(1.06); }
@media (max-width: 48rem) {
  .lightbox-prev { left: .3rem; } .lightbox-next { right: .3rem; }
  .lightbox-close { top: .3rem; right: .3rem; }
  .lightbox-img { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* related */
.detail-related { padding-top: var(--space-2xl-fluid); }
@media (max-width: 64rem) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-s); }
.related-grid a { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--night); color: #F0BF7E;
  display: flex; align-items: flex-end; padding: var(--space-2xs); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .08em; }
.related-grid a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.related-grid a:hover img { opacity: .58; transform: scale(1.04); }
.related-grid a span { position: relative; z-index: 1; }

/* prev / next pager */
/* THE THREADS — omnipresent how↔what on every work page: the era's research,
   as clickable chips. Era line states the doctrine plainly. */
.detail-threads { margin: var(--space-xl-fluid) 0 0; }
.threads-era { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted);
  letter-spacing: .02em; margin: var(--space-2xs) 0 var(--space-s); max-width: 62ch; }
.threads-row { display: flex; flex-wrap: wrap; gap: 8px; }
.thread-chip { display: inline-flex; align-items: baseline; gap: .6em; text-decoration: none;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: .55em .8em; font-size: var(--step--1); line-height: 1.3;
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.thread-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.thread-chip .tk { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); }
.threads-all { display: inline-block; margin-top: var(--space-s); font-family: var(--font-mono);
  font-size: var(--step--1); letter-spacing: .04em; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.threads-all:hover { border-color: var(--accent); }

.detail-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m);
  margin-top: var(--space-2xl-fluid); padding-top: var(--space-l); border-top: 1px solid var(--border); }
.detail-pager a { text-decoration: none; display: flex; flex-direction: column; gap: .25rem; padding: var(--space-m);
  border: 1px solid var(--border); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.detail-pager a:hover { border-color: var(--accent-2); background: rgba(0,0,0,.015); }
.detail-pager .pager-next { text-align: right; align-items: flex-end; }
.detail-pager .pager-dir { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); }
.detail-pager .pager-ttl { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink); }

/* ---- Tablet & below (< 64rem / 1024px): the 2-col body stacks; spec spreads full width ---- */
@media (max-width: 64rem) {
  .detail-hero { height: clamp(360px, 70vh, 760px); }
  .detail-body { grid-template-columns: 1fr; gap: var(--space-xl); }
  .detail-side { position: static; }
  .detail-lead p { max-width: 64ch; }
  .detail-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-acquire { margin-top: var(--space-l); }
}
/* ---- Mobile (< 40rem / 640px) ---- */
@media (max-width: 40rem) {
  .detail-hero { height: 56vh; }
  .detail-head h1 { font-size: clamp(1.55rem, 0.9rem + 4.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.015em; font-style: normal; font-weight: 700; }
  .detail-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-band { height: 62vh; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-pager { grid-template-columns: 1fr; }
  .detail-pager .pager-next { text-align: left; align-items: flex-start; }
}

.ug-landing { background: var(--ink); color: #EAE0D0; }
.ug-landing .ug-hero { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 480px; }
.ug-landing .ug-art { position: relative; overflow: hidden; background: var(--night); display: flex; align-items: center; justify-content: center; }
.ug-landing .ug-art img { width: 100%; height: 100%; object-fit: cover; }
.ug-landing .ug-copy { padding: var(--space-xl-fluid) var(--space-l-fluid); display: flex; flex-direction: column; justify-content: center; }
.ug-landing .ug-copy .ph { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .18em; color: var(--hot); }
.ug-landing .ug-copy h1 { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.4rem,1.6rem+3vw,4rem); line-height: 1.02; letter-spacing: -.02em; margin: var(--space-2xs) 0; color: var(--cream); }
.ug-landing .ug-copy h1 em { font-style: normal; color: var(--hot); }
.ug-landing .ug-copy p { color: #C7BBA7; max-width: 46ch; }
.ug-landing .ug-copy dl { margin: var(--space-m) 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-m); color: #EAE0D0; }
.ug-landing .ug-copy dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; color: #9B8E78; }
.ug-landing .ug-copy a.rsvp { color: var(--hot); border-bottom: 1px solid #5B4636; text-decoration: none; }
.ug-landing .past { padding: var(--space-l-fluid); border-top: 1px solid #2C2620; }
.ug-landing .past h4 { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; color: #9B8E78; margin-bottom: var(--space-m); }
.ug-landing .past-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-m); }
.ug-landing .past-grid .yr { color: var(--hot); font-family: var(--font-mono); font-size: var(--step--1); }
.ug-landing .past-grid em { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--cream); display: block; }
/* mobile: the show hero stacks and the key art runs full-bleed at the
   photograph's own landscape proportion (it never had a mobile rule) */
@media (max-width: 48rem) {
  .ug-landing .ug-hero { grid-template-columns: 1fr; min-height: 0; }
  .ug-landing .ug-art { aspect-ratio: 3 / 2; }
}
.ug-landing .past-grid .venue { color: #9B8E78; font-size: var(--step--1); display: block; }
/* kind label (Solo / Group / Permanent + the showcase descriptor) and an out-link
   to the canonical archive or media article for each show. */
.ug-landing .past-grid .kind { display: block; margin-top: .4em; font-family: var(--font-mono);
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: #C7BBA7; }
.ug-landing .past-grid .kind-solo .kind { color: var(--hot); }
.ug-landing .past-grid .kind-permanent .kind { color: #E0B770; }
/* the fabricator/credit micro-line — explicit on non-solo shows so people in the
   know see his actual contribution (team fabricator, not lead artist). */
.ug-landing .past-grid .role { display: block; margin-top: .25em; font-family: var(--font-display);
  font-style: italic; font-size: var(--step--1); color: #9B8E78; }
.ug-landing .past-grid .ex-link { display: inline-block; margin-top: .55em; font-family: var(--font-mono);
  font-size: var(--step--2); letter-spacing: .04em; color: var(--hot); text-decoration: none;
  border-bottom: 1px solid #5B4636; transition: color var(--dur-fast), border-color var(--dur-fast); }
.ug-landing .past-grid .ex-link:hover { color: #FFD1A6; border-color: #FFD1A6; }
@media (max-width: 48rem) { .ug-landing .ug-hero { grid-template-columns: 1fr; } }

/* ============================================================================
   REDUCED MOTION — channel-split resolves to its static "prism poster" state.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {

  .echo { transition: none !important; }
  [data-motion="reduced"] .echo { transition: none !important; }
}


/* v7.1: tighter mobile gutter — one token feeds wrappers AND the full-bleed
   negative margins, so everything stays consistent */
@media (max-width: 48rem) {
  [data-theme] { --bleed: 16px; }
}

/* bio portrait caption appears on hover/focus only */
.portrait { position: relative; }
.portrait .port-window { opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.portrait:hover .port-window, .portrait:focus-within .port-window { opacity: 1; }

/* ---- narrow masthead: Bio / Evenline Studio fold into a hamburger ---- */
.nav-burger { display: none; flex: 0 0 auto; margin-left: auto; align-self: center;
  width: 42px; height: 38px; padding: 9px 10px; background: none; border: 0; cursor: pointer; }
.nav-burger span { display: block; height: 2px; background: var(--nav-text); margin: 5px 0;
  border-radius: 1px; transition: transform .25s var(--ease-out), opacity .2s; }
.nav-burger:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 47.99rem) {
  /* brand sits flush at the gutter (the desktop 2.2em gap centered it) */
  .nav { gap: 0; justify-content: flex-start; }
  .nav .brand-name { margin-right: auto; }
  /* the burger anchors to the band itself — dead-centered regardless of how
     the brand column wraps or grows */
  .nav { align-items: center; padding-right: calc(var(--bleed) + 50px); }
  .nav-burger { display: block; position: absolute; right: var(--bleed); top: 50%;
    transform: translateY(-50%); margin: 0; }
  /* the menu is a full-width SHEET sliding out of the band — same dark glass,
     big display type, links staggering in; the page dims beneath it */
  .nav .meta-r { display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    padding: 6px var(--bleed) 20px;
    background: color-mix(in oklab, var(--nav-bg) 96%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nav-border);
    visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s linear .28s; }
  .nav.menu-open .meta-r { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .nav .meta-r a { display: block; width: 100%; padding: 18px 0; margin: 0;
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
    letter-spacing: -.015em; text-transform: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  .nav .meta-r a::after { display: none; }
  .nav .meta-r a:last-child { border-bottom: 0; }
  .nav .meta-r a .white { color: var(--nav-text); }
  .nav .meta-r a:hover .white, .nav .meta-r a:focus-visible .white { color: var(--nav-accent); }
  .nav.menu-open .meta-r a { opacity: 1; transform: none; }
  .nav.menu-open .meta-r a:nth-child(1) { transition-delay: .07s; }
  .nav.menu-open .meta-r a:nth-child(2) { transition-delay: .14s; }
  .nav.menu-open::before { content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(10, 10, 12, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .nav .meta-r, .nav .meta-r a { transition: none; } }
}

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }