/* Justin Restaino — Portfolio v3
   Editorial layout • Scroll-driven motion • Smooth scroll • Dot cursor only
*/

:root {
  /* Inks */
  --ink:        #0c0a08;
  --ink-1:      #100d0a;
  --ink-2:      #16110d;
  --ink-3:      #1d1813;
  /* Light surface — warm off-white with subtle light-show overlay (NOT cream) */
  --bone:       #f4f0e7;
  --bone-1:     #f7f3eb;
  --bone-2:     #faf6ee;
  --bone-3:     #d8d3c4;
  /* Text on dark */
  --on-d:       #ede4d0;
  --on-d-dim:   rgba(237, 228, 208, 0.65);
  --on-d-mute:  rgba(237, 228, 208, 0.42);
  --on-d-faint: rgba(237, 228, 208, 0.20);
  /* Text on light */
  --on-l:       #161510;
  --on-l-dim:   rgba(22, 21, 16, 0.72);
  --on-l-mute:  rgba(22, 21, 16, 0.48);
  --on-l-faint: rgba(22, 21, 16, 0.22);

  --line-d: rgba(237, 228, 208, 0.10);
  --line-d-2: rgba(237, 228, 208, 0.20);
  --line-l: rgba(22, 21, 16, 0.14);
  --line-l-2: rgba(22, 21, 16, 0.28);

  /* Stage palette */
  --stage-1: #ff5824;
  --stage-2: #ff2876;
  --stage-3: #ffb750;
  --stage-4: #2858ff;
  --stage-5: #e8e2d4;
  --stage-6: #b945ff;

  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --display-alt: "Big Shoulders Display", "Arial Narrow", "Impact", sans-serif;
  --body: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink); scroll-behavior: auto; }
body {
  background: var(--ink);
  color: var(--on-d);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02";
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--stage-1); color: #fff; }

/* ─── Page-to-page transition: the new page slides UP over the old ───
   Uses the native cross-document View Transitions API (no JS). The incoming
   page rises from the bottom while the outgoing page holds and dims beneath —
   echoing the homepage's vertical page-turn. Falls back to an instant load on
   browsers without support. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: vtPageRecede; z-index: 1; }
::view-transition-new(root) { animation-name: vtPageUp;     z-index: 2; }
@keyframes vtPageUp     { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vtPageRecede { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s; }
}

/* ─── Sticky stack "page-turn" sections ─── */
main.stack { position: relative; }
main.stack > .section.stick {
  position: sticky;
  top: 0;
  /* opaque background must be set per-section so card covers what's beneath */
}

/* ─── Type ───────────────────────────────── */
.display, .display-xxl, .display-xl, .display-l, .display-m {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.display-xxl { font-size: clamp(56px, 9vw, 132px); font-weight: 500; letter-spacing: -0.03em; }
.display-xl  { font-size: clamp(40px, 6vw, 92px);  font-weight: 500; }
.display-l   { font-size: clamp(28px, 4vw, 60px);  font-weight: 500; }
.display-m   { font-size: clamp(20px, 2.4vw, 36px); font-weight: 500; }

body.font-bigshoulders .display,
body.font-bigshoulders .display-xxl,
body.font-bigshoulders .display-xl,
body.font-bigshoulders .display-l,
body.font-bigshoulders .display-m,
body.font-bigshoulders .name-line,
body.font-bigshoulders .reel-title,
body.font-bigshoulders .tease-title,
body.font-bigshoulders .contact-headline,
body.font-bigshoulders .work-title,
body.font-bigshoulders .stat-n,
body.font-bigshoulders .philo-h,
body.font-bigshoulders .statement-body,
body.font-bigshoulders .marquee-item {
  font-family: var(--display-alt);
  font-weight: 900;
  letter-spacing: -0.02em;
}
body.font-bricolage .display,
body.font-bricolage .display-xxl,
body.font-bricolage .display-xl,
body.font-bricolage .name-line,
body.font-bricolage .reel-title,
body.font-bricolage .tease-title,
body.font-bricolage .contact-headline,
body.font-bricolage .work-title,
body.font-bricolage .stat-n,
body.font-bricolage .philo-h,
body.font-bricolage .statement-body,
body.font-bricolage .marquee-item {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--on-d-mute);
  font-weight: 400;
}
.meta-strong { color: var(--on-d); }
.numeral { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ─── Animated noise (TV static feel) ────── */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: noiseShift 0.7s steps(10) infinite;
  will-change: transform;
}
@keyframes noiseShift {
  0%   { transform: translate3d(0%, 0%, 0); }
  10%  { transform: translate3d(-4%, 2%, 0); }
  20%  { transform: translate3d(6%, -5%, 0); }
  30%  { transform: translate3d(-2%, 8%, 0); }
  40%  { transform: translate3d(8%, 1%, 0); }
  50%  { transform: translate3d(-7%, -3%, 0); }
  60%  { transform: translate3d(3%, 6%, 0); }
  70%  { transform: translate3d(-5%, -2%, 0); }
  80%  { transform: translate3d(7%, 4%, 0); }
  90%  { transform: translate3d(-3%, -7%, 0); }
  100% { transform: translate3d(0%, 0%, 0); }
}

/* ─── Cursor: small dot only ─────────────── */
.cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--on-d);
  left: var(--cx, 50vw);
  top: var(--cy, 50vh);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.cursor-dot.is-hover { width: 26px; height: 26px; opacity: 0.7; }
.cursor-dot.is-hidden { opacity: 0; }
body.custom-cursor { cursor: none; }
body.custom-cursor a, body.custom-cursor button, body.custom-cursor [data-hover] { cursor: none; }

@media (max-width: 800px) {
  .cursor-dot { display: none !important; }
  body.custom-cursor { cursor: auto; }
}

/* ─── Layout helpers ─────────────────────── */
.container { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 44px; position: relative; }
@media (max-width: 800px) { .container { padding: 0 22px; } }
.section { position: relative; }

/* ─── Reveal — IO-driven mask fade ───────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d-1 { transition-delay: 80ms; }
.reveal-d-2 { transition-delay: 160ms; }
.reveal-d-3 { transition-delay: 240ms; }
.reveal-d-4 { transition-delay: 320ms; }
.reveal-d-5 { transition-delay: 400ms; }

.mask-line { display: block; overflow: hidden; line-height: inherit; }
.mask-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.is-in .mask-line > span,
.mask-line.is-in > span { transform: translateY(0); }
.mask-line.d1 > span { transition-delay: 80ms; }
.mask-line.d2 > span { transition-delay: 160ms; }
.mask-line.d3 > span { transition-delay: 240ms; }
.mask-line.d4 > span { transition-delay: 320ms; }
.mask-line.d5 > span { transition-delay: 400ms; }

/* ─── Scroll-driven FX ───────────────────── */
/* JS writes --p (0→1 progress through viewport) on [data-fx] elements. */

/* Parallax up (rises faster than scroll → "leaves" earlier) */
.fx-rise   { transform: translate3d(0, calc(var(--p, 0) * -160px), 0); will-change: transform; }
.fx-rise-l { transform: translate3d(0, calc(var(--p, 0) * -260px), 0); will-change: transform; }
.fx-sink   { transform: translate3d(0, calc(var(--p, 0) *  120px), 0); will-change: transform; }

/* Fade out as it scrolls past */
.fx-fade-out { opacity: calc(1 - var(--p, 0) * 1.4); }
/* Fade in over middle of viewport (already in IO-territory) */
.fx-blur-out { filter: blur(calc(var(--p, 0) * 14px)); will-change: filter; }
.fx-shrink   { transform: scale(calc(1 - var(--p, 0) * 0.10)) translate3d(0, calc(var(--p, 0) * -120px), 0); transform-origin: 50% 30%; will-change: transform; }

/* Hero composite — name blurs out + fades as scroll progresses through the pin.
   Pairs with the reel-bd-blur formula that sharpens the video on the same --p. */
.fx-hero-name {
  filter: blur(calc(var(--p, 0) * 28px));
  opacity: calc(1 - var(--p, 0) * 1.6);
  transform: scale(calc(1 + var(--p, 0) * 0.06));
  transform-origin: 50% 50%;
  will-change: filter, opacity, transform;
}

/* Subtle bg parallax — for backgrounds (slower than content) */
.fx-bg { transform: translate3d(0, calc(var(--p, 0) * 60px), 0); will-change: transform; }

/* ─── Vertical edge labels (editorial) ──── */
.vert-label {
  position: absolute;
  top: 50%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  white-space: nowrap;
  pointer-events: none;
}
.vert-label.right {
  right: 22px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
}
.vert-label.left {
  left: 22px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}
.vert-label.on-light { color: var(--on-l-mute); }
@media (max-width: 900px) { .vert-label { display: none; } }

/* ─── Crosshair markers (film slate vibe) ── */
.crosshair {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  color: var(--on-d-faint);
}
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; background: currentColor;
}
.crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.crosshair::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.crosshair.on-light { color: var(--on-l-faint); }

/* ─── Nav ───────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0;
  z-index: 50;
  padding: 22px 44px;
  display: flex; align-items: center; gap: 4px;
  mix-blend-mode: difference;
  color: #fff;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}

/* ─── Hero "gack" — corner crosshairs + tiny editorial labels ──────
   Fixed overlay sitting between the reel video and the nav. Whole layer
   fades with --hero-morph (1 at top, 0 once you've scrolled one viewport),
   so it's only visible while the hero is the focal point. */
.hero-gack {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: var(--hero-morph, 1);
  color: var(--on-d-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  will-change: opacity;
}
.gack-plus {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.55;
}
.gack-plus::before,
.gack-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.gack-plus::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.gack-plus::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
/* Corners */
.gack-tl { top: 32px; left: 32px; }
.gack-tr { top: 32px; right: 32px; }
.gack-bl { bottom: 32px; left: 32px; }
.gack-br { bottom: 32px; right: 32px; }
/* Top + bottom edges: 3 evenly spaced marks at 25 / 50 / 75 % */
.gack-t-1 { top: 32px; left: calc(25% - 6px); }
.gack-t-2 { top: 32px; left: calc(50% - 6px); }
.gack-t-3 { top: 32px; left: calc(75% - 6px); }
.gack-b-1 { bottom: 32px; left: calc(25% - 6px); }
.gack-b-2 { bottom: 32px; left: calc(50% - 6px); }
.gack-b-3 { bottom: 32px; left: calc(75% - 6px); }
/* Left + right edges: 3 evenly spaced marks at 25 / 50 / 75 % */
.gack-l-1 { left: 32px; top: calc(25% - 6px); }
.gack-l-2 { left: 32px; top: calc(50% - 6px); }
.gack-l-3 { left: 32px; top: calc(75% - 6px); }
.gack-r-1 { right: 32px; top: calc(25% - 6px); }
.gack-r-2 { right: 32px; top: calc(50% - 6px); }
.gack-r-3 { right: 32px; top: calc(75% - 6px); }
.gack-time {
  position: absolute;
  top: 32px;
  right: 54px;             /* leave room for the corner plus */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  opacity: 0.75;
  white-space: nowrap;
}
@media (max-width: 800px) { .gack-time { top: 18px; right: 40px; } }

/* ─── "Click to see reel" button — blurs on as the video sharpens ─── */
.reel-cta {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  z-index: 4;
  appearance: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-d);
  padding: 14px 26px;
  border: 1px solid rgba(237, 228, 208, 0.5);
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  /* Reveal tied to hero --p (set by useScrollFX on the hero section).
     Stays invisible while video is blurred; blurs ON + fades in as the
     video sharpens. */
  --rev: clamp(0, calc((var(--p, 0) - 0.35) * 2.2), 1);
  opacity: var(--rev);
  filter: blur(calc((1 - var(--rev)) * 18px));
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, filter;
}
.reel-cta:hover {
  background: var(--stage-1);
  border-color: var(--stage-1);
  color: #fff;
  transform: translate(-50%, -3px);
}
@media (max-width: 800px) {
  .gack-tl, .gack-tr, .gack-t-1, .gack-t-2, .gack-t-3 { top: 18px; }
  .gack-bl, .gack-br, .gack-b-1, .gack-b-2, .gack-b-3 { bottom: 18px; }
  .gack-tl, .gack-bl, .gack-l-1, .gack-l-2, .gack-l-3 { left: 18px; }
  .gack-tr, .gack-br, .gack-r-1, .gack-r-2, .gack-r-3 { right: 18px; }
}

/* ─── Morphing name: hero (big, centered) → nav (small, top-center) ─────
   Anchored at top:22, left:50% — JS each frame writes
   `transform: translate(tx, ty) scale(s)` with tx = -w*scale/2 so the
   scaled element stays horizontally centered, and ty animates from 0 (nav
   state, top of viewport) to (vh/2 - 22 - h*S/2) (hero state, vertically
   centered). The element also exposes a --morph variable (1 at hero, 0 at
   nav) which the subheader uses to fade. */
.name-morph {
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 60;
  text-decoration: none;
  color: var(--on-d);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform-origin: top left;
  will-change: transform;
}
.name-morph .name-text {
  font-family: var(--display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.025em;
  line-height: 0.9;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Hover scale-up with a soft bounce (overshoot + settle) — sits on
     .name-text so it doesn't conflict with the parent's JS-driven morph
     transform. Letter-spacing intentionally stays put so the chars don't
     reflow ("rigid shake"). */
  transition: transform .65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.name-morph .name-text > span {
  display: block;
}
.name-morph:hover .name-text {
  transform: scale(1.06);
}
/* Hover glow — drop-shadow on the morph element wraps the gradient text
   with an orange-ish halo. Doesn't fight the .name-reel's own filter
   animation because it's on the parent, not on .name-text. */
.name-morph {
  transition: filter .4s ease;
}
.name-morph:hover {
  filter: drop-shadow(0 0 32px rgba(255, 88, 36, 0.55))
          drop-shadow(0 0 12px rgba(255, 40, 118, 0.35));
}
/* Standalone subheader — separate fixed element so it doesn't scale with
   the name. JS sets `top` (tracking the name's visual bottom) and `opacity`
   (fading with the morph). */
.name-sub {
  position: fixed;
  left: 50%;
  top: 50vh;             /* placeholder; JS overrides */
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-d-dim);
  pointer-events: none;
  will-change: top, opacity;
}
.nav .brand {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.nav .brand .dot { width: 7px; height: 7px; background: currentColor; border-radius: 50%; display: inline-block; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  overflow: hidden;
}
.nav-link .idx { opacity: 0.5; }
.nav-link .lbl {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
  vertical-align: middle;
}
.nav-link .lbl-inner {
  display: block;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.nav-link .lbl-inner::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}
.nav-link:hover .lbl-inner { transform: translateY(-100%); }
.nav-link:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 800px) {
  /* Safety net against stray horizontal scroll on phones. `clip` (not `hidden`)
     so it doesn't create a scroll container that would break the sticky pages. */
  html { overflow-x: clip; }
  /* Keep the nav usable on phones: compact links, drop the index numbers. */
  .nav { padding: 14px 16px; gap: 2px; }
  .nav-links { display: flex; }
  .nav-link { padding: 7px 9px; font-size: 10px; letter-spacing: 0.1em; gap: 0; }
  .nav-link .idx { display: none; }
}
body.nav-hidden .nav.hide { transform: translateY(-100%); opacity: 0; }
body.nav-numerals .nav-link .lbl { display: none; }
body.nav-numerals .nav-link .idx { opacity: 1; }
body.nav-rail .nav-links { display: none; }
.rail {
  position: fixed; top: 50%; left: 22px; transform: translateY(-50%);
  z-index: 50; display: none; flex-direction: column; gap: 18px;
  mix-blend-mode: difference; color: #fff;
}
body.nav-rail .rail { display: flex; }
.rail-item {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.42);
  transition: color .3s ease;
}
.rail-item .bar { width: 18px; height: 1px; background: currentColor; transition: width .35s ease; }
.rail-item:hover, .rail-item.active { color: #fff; }
.rail-item.active .bar { width: 32px; }

/* ─── Hero ─────────────────────────────────
   Tall section provides scroll budget for the pin. The first ~100vh of scroll
   drives --p from 0 → 1 (reel unblurs, name fades). The remaining ~70vh holds
   --p at 1 — a beat of "fully revealed reel" before the pin releases and
   Statement comes up. */
.hero {
  min-height: 270vh;
  height: 270vh;
  position: relative;
  background: #0c0a08;
  isolation: isolate;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 96px 0 36px;
  overflow: hidden;
  background: #0c0a08;
}

/* Hero reel backdrop — blurred + cursor-revealed sharp + play CTA */
.reel-bd {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
  overflow: hidden;
}
.reel-bd-blur,
.reel-bd-sharp {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.reel-bd-blur {
  filter: blur(calc((1 - var(--p, 0)) * 22px)) saturate(1.05);
  transform: scale(1.08); /* avoid blurred edge */
  opacity: calc(0.78 + var(--p, 0) * 0.22);
  will-change: filter, opacity;
}
.reel-bd-sharp {
  /* radial mask centered on cursor reveals a sharp aperture (wider, softer falloff) */
  -webkit-mask-image: radial-gradient(circle 350px at var(--mx, 50%) var(--my, 50%),
    #000 0%, #000 42%, rgba(0,0,0,0.68) 70%, rgba(0,0,0,0.22) 92%, transparent 100%);
          mask-image: radial-gradient(circle 350px at var(--mx, 50%) var(--my, 50%),
    #000 0%, #000 42%, rgba(0,0,0,0.68) 70%, rgba(0,0,0,0.22) 92%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* Fade out as the blur layer sharpens — once both layers are sharp they'd
     ghost against each other (the two <video>s drift by a frame). By p≈0.7
     the sharp/cursor layer is gone and only the now-sharp blur layer shows. */
  opacity: clamp(0, calc(1 - var(--p, 0) * 1.4), 1);
}
.reel-bd-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 22%, transparent 70%, rgba(0,0,0,0.55) 100%);
}

/* Animated stage — a layered "video reel" placeholder.
   Replace .reel-stage div with a <video> later; structure is identical. */
.reel-stage {
  position: absolute; inset: -4%;
  overflow: hidden;
  background-color: #0a0806;
  background-image:
    radial-gradient(ellipse 28% 40% at 18% 30%, rgba(255,88,36,0.85) 0%, transparent 60%),
    radial-gradient(ellipse 22% 32% at 70% 28%, rgba(255,40,118,0.75) 0%, transparent 60%),
    radial-gradient(ellipse 30% 35% at 48% 78%, rgba(255,183,80,0.75) 0%, transparent 65%),
    radial-gradient(ellipse 26% 38% at 86% 68%, rgba(40,88,255,0.78) 0%, transparent 60%),
    radial-gradient(ellipse 22% 30% at 12% 80%, rgba(185,69,255,0.70) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(232,226,212,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a0c08 0%, #050505 100%);
  background-size: 200% 200%, 220% 220%, 240% 240%, 200% 200%, 220% 220%, 280% 280%, 100% 100%;
  background-repeat: no-repeat;
  animation: stageDrift 22s cubic-bezier(.55,.05,.45,.95) infinite alternate,
             stageBreath 9s ease-in-out infinite;
}
.reel-stage::before {
  /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
.reel-stage::after {
  /* color sweep — "chromatic" film light */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  mix-blend-mode: screen;
  animation: stageSheen 7s ease-in-out infinite;
}
.reel-stage.sharp { animation-duration: 18s, 7s; }
/* Real reel <video> fills the stage box; sits beneath the scanline/sheen pseudos */
.reel-stage > .reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  pointer-events: none;
  background: #050505;
}
.reel-stage::before, .reel-stage::after { z-index: 1; }
/* When a real <video> reel is present, suppress the placeholder gradient + stage animations
   so the footage isn't competing with the AI-generated stage-light fake. */
.reel-stage:has(> .reel-video) {
  background-image: none;
  background-color: #050505;
  animation: none;
}
@keyframes stageDrift {
  0%   { background-position: 0% 30%, 30% 70%, 60% 20%, 80% 50%, 10% 80%, 50% 50%, 0 0; }
  100% { background-position: 100% 60%, 80% 30%, 20% 80%, 30% 80%, 80% 20%, 50% 50%, 0 0; }
}
@keyframes stageBreath {
  0%, 100% { filter: saturate(1.0) contrast(1.02) brightness(1.0); }
  50%      { filter: saturate(1.18) contrast(1.08) brightness(1.06); }
}
@keyframes stageSheen {
  0%, 100% { transform: translateX(-30%); opacity: 0.4; }
  50%      { transform: translateX(30%);  opacity: 0.9; }
}

.reel-bd-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 28px 44px;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d);
  pointer-events: none;
}
@media (max-width: 800px) { .reel-bd-cta { padding: 16px 22px; } }
.reel-bd-cue { display: inline-flex; align-items: center; gap: 10px; color: var(--on-d-mute); }
.reel-bd-cue .reel-bd-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.85);
  animation: pulse 1.6s ease-in-out infinite;
}
.reel-bd-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(237,228,208,0.35);
  border-radius: 999px;
  background: rgba(12,10,8,0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.reel-bd:hover .reel-bd-arrow {
  background: var(--stage-1);
  border-color: var(--stage-1);
  color: #fff;
  transform: translateY(-2px);
}

.hero-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 24px;
  padding: 0 44px;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) { .hero-top { grid-template-columns: 1fr; gap: 16px; padding: 0 22px; } }

.hero-status {
  display: flex; flex-direction: column; gap: 8px;
}
.hero-status .row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.hero-status .row .lt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stage-1);
  box-shadow: 0 0 14px rgba(255,88,36,0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.25); }
}

.hero-centroid {
  text-align: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  opacity: calc(1 - var(--p, 0) * 1.6);
  transition: opacity .2s ease-out;
  pointer-events: none;
}
.hero-centroid .strong { color: var(--on-d); }

.hero-vol {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
}
.hero-vol .strong { color: var(--on-d); }

.hero-name {
  margin: 0;
  width: 100%;
  padding: 0 44px;
  position: relative;
  pointer-events: none;
  text-align: center;
}
@media (max-width: 800px) { .hero-name { padding: 0 22px; } }

.name-line {
  display: block;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(56px, 10vw, 156px);
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.name-line .inner { display: block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero-name.is-in .name-line .inner { transform: translateY(0); }
.name-line.d1 .inner { transition-delay: 120ms; }
.name-line.d2 .inner { transition-delay: 240ms; }
/* Name block (centered) */
.hero-name-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
  position: relative;
  z-index: 2;
}
.name-line.second { padding-left: 0; }

/* The reel inside the name */
.name-reel {
  background-color: var(--on-d);
  background-image:
    radial-gradient(circle at 18% 32%, var(--stage-1) 0%, transparent 28%),
    radial-gradient(circle at 78% 22%, var(--stage-2) 0%, transparent 26%),
    radial-gradient(circle at 42% 78%, var(--stage-3) 0%, transparent 30%),
    radial-gradient(circle at 88% 68%, var(--stage-4) 0%, transparent 28%),
    radial-gradient(circle at 8% 88%, var(--stage-6) 0%, transparent 24%),
    radial-gradient(circle at 55% 45%, var(--stage-5) 0%, transparent 18%);
  background-size: 220% 220%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 14s cubic-bezier(.55,.05,.45,.95) infinite alternate,
             reelHue 22s linear infinite;
  filter: saturate(1.05) contrast(1.05);
}
@keyframes reelDrift {
  0%   { background-position: 0% 30%; }
  33%  { background-position: 100% 70%; }
  66%  { background-position: 20% 100%; }
  100% { background-position: 80% 10%; }
}
@keyframes reelHue {
  0%, 100% { filter: saturate(1.05) contrast(1.05) hue-rotate(0deg); }
  50%      { filter: saturate(1.15) contrast(1.10) hue-rotate(18deg); }
}
.name-stage {
  position: relative;
  display: inline-block;
}
.name-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
body.reel-off .name-reel {
  background: none;
  color: var(--on-d);
  -webkit-text-fill-color: currentColor;
  animation: none;
  filter: none;
}
body.reel-off .name-stage::after { display: none; }

/* Bottom row — 4-col asymmetric grid */
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr;
  align-items: end;
  gap: 32px;
  padding: 0 44px;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) { .hero-bottom { grid-template-columns: 1fr 1fr; padding: 0 22px; gap: 24px; } }

.h-cell .k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center;
}
.h-cell .k .num { color: var(--stage-1); }
.h-cell .v {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-d);
}
.h-cell.statement .v {
  font-family: var(--body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.45;
  color: var(--on-d-dim);
}
.h-cell.statement .v .em { color: var(--on-d); font-weight: 600; }

.scroll-cue {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
}
.scroll-cue .line { width: 1px; height: 56px; background: var(--on-d-faint); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; top: -56px; left: 0; right: 0;
  height: 56px; background: var(--stage-1);
  animation: scrollDrip 2.4s cubic-bezier(.55,.05,.45,.95) infinite;
}
@keyframes scrollDrip {
  0% { transform: translateY(0); }
  60% { transform: translateY(112px); }
  100% { transform: translateY(112px); }
}

/* ─── Statement-over-image cards ──────────────────────
   Each card pins for 100vh of scroll. As you scroll through that pin,
   --p goes 0 → 1 (written by useStatementImageCards). The text fades
   out and the background image sharpens from blur → 0. When the card
   unsticks, the next one slides up over it via the standard
   sticky-stack page-turn. */
.si-card {
  /* position is `sticky` from `main.stack > .section.stick`. Don't override. */
  /* 250vh tall → pin lasts 150vh of scroll; "pure pin" (next card not yet
     approaching) runs to p≈0.6. The word-reveal → color-bloom → text-fade
     sequence all lands inside that window, then a beat of the full-color
     photo before the page-turn handoff. */
  min-height: 210vh;
  overflow: hidden;
  background: #000;
  /* Soft leading-edge shadow: as a card rises to take over, this casts above
     its top edge onto the card below, feathering the seam into a smooth
     hand-off instead of a hard horizontal line. Off-screen once pinned. */
  box-shadow: 0 -22px 70px -10px rgba(0, 0, 0, 0.55);
}
/* The visible content (image, vignette, container) all sit in the TOP
   100vh of the 200vh card, so when the card is pinned at top:0 they fill
   the viewport. The bottom 100vh of the card is empty scroll budget. */
.si-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Kinetic image: FULL COLOR throughout, sharpens fast (blur clears by
     p≈0.18 so the photo reads immediately), a continuous Ken-Burns zoom so
     it never sits still, and an exit "push-back" (scale down + darken) as
     the next card rises over it for a dynamic scene-cut handoff. */
  --si-exit: clamp(0, calc((var(--p, 0) - 0.58) * 2.6), 1);
  filter:
    blur(calc(clamp(0, calc(1 - var(--p, 0) * 5.5), 1) * 22px))
    saturate(1.12)
    brightness(calc((1 - var(--si-exit) * 0.5) * (0.7 + var(--enter, 1) * 0.3)));
  transform:
    scale(calc(1.08 + var(--p, 0) * 0.14 - var(--si-exit) * 0.22))
    translateY(calc((1 - var(--enter, 1)) * 2.2vh));
  will-change: filter, transform;
  z-index: 1;
}
.si-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.7) 100%);
  /* Hold the scrim while the text is present (legibility), then clear. */
  opacity: clamp(0, calc(1 - (var(--p, 0) - 0.42) * 2.4), 1);
}
.si-card .container {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  align-items: center;
}
.si-text {
  font-family: var(--display);
  font-weight: 400;                      /* clean weight; key words carry the bold */
  font-size: clamp(36px, 6vw, 104px);    /* much bigger */
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 18ch;
  /* Exit: once the words have landed, the whole block lifts up and fades
     out quickly — a kinetic exit rather than a flat dissolve. */
  opacity: clamp(0, calc(1 - (var(--p, 0) - 0.42) * 9), 1);
  transform: translateY(calc(clamp(0, calc((var(--p, 0) - 0.42) * 6), 1) * -44px));
  will-change: opacity, transform;
}
body.font-bigshoulders .si-text { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .si-text { font-family: var(--body); font-weight: 700; letter-spacing: -0.045em; }

/* Each word — animated light-show gradient + staggered word-by-word reveal.
   --w-eff drives the reveal: word i starts at p = i × 0.022 and ramps over
   0.08 of --p, so the line "writes on" left→right early in the pin. */
.si-word {
  display: inline-block;
  /* Per-word write-on reveal — kept for every word (plain or key): each word
     POPS up, rising 0.7em while scaling 0.7 → 1 and un-blurring. */
  --w-eff: clamp(0, calc((var(--p, 0) - var(--word-idx, 0) * 0.016) / 0.055), 1);
  transform-origin: 50% 100%;
  opacity: var(--w-eff);
  transform: translateY(calc((1 - var(--w-eff)) * 0.7em)) scale(calc(0.7 + var(--w-eff) * 0.3));
  filter:
    blur(calc((1 - var(--w-eff)) * 10px))
    drop-shadow(0 3px 18px rgba(0, 0, 0, 0.55));
  will-change: opacity, transform, filter;
}
/* Important words — animated light-show gradient + heavier weight, so the key
   words carry the color while the rest of the line stays clean white. */
.si-key {
  font-weight: 700;
  background-image:
    radial-gradient(circle at 18% 45%, var(--stage-1) 0%, transparent 38%),
    radial-gradient(circle at 68% 22%, var(--stage-2) 0%, transparent 36%),
    radial-gradient(circle at 86% 78%, var(--stage-3) 0%, transparent 38%),
    radial-gradient(circle at 42% 92%, var(--stage-6) 0%, transparent 36%);
  background-color: var(--on-d);
  background-size: 280% 280%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 9s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

/* Alignment modifiers — same convention as before. */
.si-text.stmt-left   { text-align: left;   margin-left: 0;    margin-right: auto; }
.si-text.stmt-center { text-align: center; margin-left: auto; margin-right: auto; }
.si-text.stmt-right  { text-align: right;  margin-left: auto; margin-right: 0; }

/* Split card — two lines, opposite alignment, single fading block. */
.si-text.si-split {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  max-width: none;
  line-height: 0.98;
}
.stmt-split-line.stmt-left  { text-align: left; }
.stmt-split-line.stmt-right { text-align: right; }

/* ───────────────── Statement "gack" (print-registration overlay) ─────────────────
   Technical garnish framing each pinned statement card. Inherits the card's --p
   (0→1 across the pin) to sweep the reticle, fill the scrub bar and tick the live
   readouts. Sits above the photo/vignette (z-2) but below the headline (z-3). */
.si-gack {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 2; pointer-events: none;
  font-family: var(--mono);
  --gk-pad: clamp(22px, 3.5vw, 56px);
  --gk-top: clamp(76px, 10vh, 110px);
  --gk-line: rgba(244, 240, 231, 0.42);
  --gk-acc: var(--stage-1);
  /* Sweep: the reticle + scrub complete their full left→right travel over the
     card's active pin window (p 0→0.6), so the reticle reaches the far side
     instead of stalling mid-screen. */
  --gk-sweep: clamp(0, calc(var(--p, 0) / 0.6), 1);
  /* Envelope: appear WITH the image (first few %), hold while the photo is on
     screen, then clear as the image pushes back for the page-turn (~p 0.6). */
  --gk-in:  clamp(0, calc(var(--p, 0) / 0.04), 1);
  --gk-out: clamp(0, calc((var(--p, 0) - 0.6) * 6), 1);
  opacity: calc(var(--gk-in) * (1 - var(--gk-out)));
}
@media (hover: none) { .si-gack { display: none; } } /* keep touch clean + fast */

/* Corner crop marks */
.gk-corner { position: absolute; width: 15px; height: 15px; }
.gk-corner::before, .gk-corner::after { content: ""; position: absolute; background: var(--gk-line); }
.gk-corner::before { width: 15px; height: 1.5px; }
.gk-corner::after  { width: 1.5px; height: 15px; }
.gk-tl { top: var(--gk-top);   left: var(--gk-pad); }
.gk-tl::before, .gk-tl::after { top: 0; left: 0; }
.gk-tr { top: var(--gk-top);   right: var(--gk-pad); }
.gk-tr::before, .gk-tr::after { top: 0; right: 0; }
.gk-bl { bottom: var(--gk-pad); left: var(--gk-pad); }
.gk-bl::before, .gk-bl::after { bottom: 0; left: 0; }
.gk-br { bottom: var(--gk-pad); right: var(--gk-pad); }
.gk-br::before, .gk-br::after { bottom: 0; right: 0; }

/* Registration targets ⊕ */
.gk-reg { position: absolute; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--gk-line); }
.gk-reg::before, .gk-reg::after { content: ""; position: absolute; background: var(--gk-line); }
.gk-reg::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); }
.gk-reg::after  { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); }
.gk-reg-a { top: calc(var(--gk-top) + 30px); left: calc(var(--gk-pad) + 1px);
  border-color: color-mix(in srgb, var(--gk-acc) 65%, transparent); }
.gk-reg-a::before, .gk-reg-a::after { background: color-mix(in srgb, var(--gk-acc) 65%, transparent); }
.gk-reg-b { bottom: calc(var(--gk-pad) + 30px); right: calc(var(--gk-pad) + 1px); }

/* Top-row labels */
.gk-index { position: absolute; top: var(--gk-top); left: calc(var(--gk-pad) + 28px);
  font-size: 11px; letter-spacing: 0.22em; color: var(--bone);
  display: flex; gap: 5px; align-items: baseline; }
.gk-index i { font-style: normal; color: rgba(244, 240, 231, 0.45); }
.gk-coord { position: absolute; top: var(--gk-top); right: calc(var(--gk-pad) + 28px);
  font-size: 11px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums;
  color: rgba(244, 240, 231, 0.7); }
.gk-coord b { font-weight: 500; margin: 0 12px 0 5px; }
.gk-coord b:last-child { margin-right: 0; }
.gk-coord .gk-x { color: var(--gk-acc); }

/* Dimension line + measurement (top-center) */
.gk-dim { position: absolute; top: calc(var(--gk-top) + 1px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.2em; color: rgba(244, 240, 231, 0.5); }
.gk-dim i { width: clamp(48px, 7vw, 110px); height: 1px; background: var(--gk-line); position: relative; }
.gk-dim i::before, .gk-dim i::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--gk-line); }
.gk-dim i::before { left: 0; } .gk-dim i::after { right: 0; }
.gk-dim b { font-weight: 500; white-space: nowrap; }

/* Scanning reticle — rides a faint vertical line that sweeps left→right with --p */
.gk-scan { position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(var(--gk-pad) + var(--gk-sweep) * (100% - var(--gk-pad) * 2));
  background: linear-gradient(to bottom, transparent, rgba(244, 240, 231, 0.16) 16%, rgba(244, 240, 231, 0.16) 84%, transparent); }
.gk-reticle { position: absolute; top: 17%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; }
.gk-reticle::before, .gk-reticle::after { content: ""; position: absolute; background: var(--gk-acc); }
.gk-reticle::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.gk-reticle::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }

/* Scrub bar (bottom edge) */
.gk-scrub { position: absolute; left: calc(var(--gk-pad) + 28px); right: calc(var(--gk-pad) + 28px);
  bottom: calc(var(--gk-pad) + 6px); height: 8px;
  background-image: repeating-linear-gradient(to right, var(--gk-line) 0 1px, transparent 1px 30px);
  background-position: 0 50%; background-size: 100% 6px; background-repeat: repeat-x; }
.gk-scrub-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 2px; width: calc(var(--gk-sweep) * 100%); background: var(--gk-acc); }
.gk-scrub-fill::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gk-acc); }
.gk-scrub-val { position: absolute; right: 0; bottom: 13px; font-size: 10px; letter-spacing: 0.18em;
  color: rgba(244, 240, 231, 0.6); font-variant-numeric: tabular-nums; }

/* Generic .reel-em — animated stage-light gradient inside chosen text. */
.reel-em {
  background-image:
    radial-gradient(circle at 20% 50%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 70% 30%, var(--stage-2) 0%, transparent 28%),
    radial-gradient(circle at 80% 80%, var(--stage-3) 0%, transparent 30%);
  background-color: var(--on-d);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

/* ─── Old Statement (legacy, now unused but kept for project pages) ───────── */
.statement {
  padding: clamp(160px, 22vh, 240px) 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.statement-lead {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 64px;
  display: flex; align-items: center; gap: 14px;
}
.statement-lead .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 240px; }

.statement-body {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--on-d);
  max-width: 34ch;
  margin: 0 auto;       /* center the block within the container */
  text-align: center;   /* center each wrapped line */
}
.statement-body .mask-line { display: block; margin: 0.4em 0; }
.statement-body .lg { display: inline-block; }
.statement-body .reel-em {
  background-image:
    radial-gradient(circle at 20% 50%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 70% 30%, var(--stage-2) 0%, transparent 28%),
    radial-gradient(circle at 80% 80%, var(--stage-3) 0%, transparent 30%);
  background-color: var(--on-d);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.statement-body .dim { color: var(--on-d-mute); }

.statement-credit {
  margin-top: 64px;
  display: flex; gap: 18px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
}

/* Statement section sits the marquees pinned to the bottom of its 100vh */
.statement {
  position: relative;
}
.statement-marquees {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--line-d);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  z-index: 3;
}

/* ─── Marquee (two rows opposing) ──────── */
.marquees {
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.marquee {
  display: flex;
  white-space: nowrap;
  width: max-content;
  padding: 20px 0;
}
.marquee.row-a { animation: marqueeL 60s linear infinite; }
.marquee.row-b { animation: marqueeR 70s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 24px;
  padding: 0 24px;
  font-family: var(--display);
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--on-d);
  flex-shrink: 0;
  line-height: 1;
}
.marquee.row-b .marquee-item { font-size: clamp(12px, 1.3vw, 18px); color: var(--on-d-dim); font-weight: 400; }
.marquee-item .glyph { color: var(--stage-1); font-weight: 400; font-size: 0.4em; transform: translateY(-0.4em); }
@keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ─── Work (LIGHT, editorial index) ────── */
.work {
  background: var(--bone);
  color: var(--on-l);
  padding: 160px 0 180px;
  position: relative;
  overflow: hidden;
}
.work-head {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  gap: 32px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line-l);
}
@media (max-width: 900px) { .work-head { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; } }
.work-head .lead {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-l-mute);
  display: flex; flex-direction: column; gap: 8px;
}
.work-head .lead .strong { color: var(--on-l); }
.work-head .work-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 72px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  color: var(--on-l);
  text-align: center;
}
.work-head .count {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-l-mute);
  text-align: right;
}
.work-head .count .strong { color: var(--on-l); }

.reel { padding-top: 0; }
.reel-item {
  display: grid;
  grid-template-columns: 60px 1fr 200px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-l);
  align-items: center;
  position: relative;
  transition: padding .4s ease;
  overflow: hidden;
}
@media (max-width: 900px) {
  .reel-item { grid-template-columns: 60px 1fr; gap: 16px; padding: 28px 0; }
  .reel-item .reel-meta { display: none; }
}

.reel-num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-l-mute);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.reel-num .of {
  color: var(--on-l-faint);
}
body.font-bigshoulders .reel-num { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .reel-num { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }

.reel-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.reel-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--on-l);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.reel-title .arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--stage-1);
  letter-spacing: 0.16em;
  align-self: center;
}
.reel-item:hover .reel-title { transform: translateX(14px); }
.reel-item:hover .reel-title .arrow { opacity: 1; transform: translateX(0); }

.reel-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-l-mute);
}
.reel-tags .tag { padding: 5px 10px; border: 1px solid var(--line-l-2); border-radius: 999px; }

.reel-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-l-mute);
  text-align: right;
}
.reel-meta .form { color: var(--on-l); font-size: 12px; }
.reel-meta .year { font-size: 11px; }

/* Reel hover — dim siblings + stage-light reel inside hovered title */
.reel.has-hover .reel-item:not(.is-hover) .reel-title,
.reel.has-hover .reel-item:not(.is-hover) .reel-num {
  opacity: 0.18;
}
.reel.has-hover .reel-item:not(.is-hover) .reel-tags,
.reel.has-hover .reel-item:not(.is-hover) .reel-meta {
  opacity: 0.32;
}
.reel-item.is-hover .reel-title {
  background-image:
    radial-gradient(circle at 18% 32%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 78% 22%, var(--stage-2) 0%, transparent 28%),
    radial-gradient(circle at 42% 78%, var(--stage-3) 0%, transparent 32%),
    radial-gradient(circle at 88% 68%, var(--stage-4) 0%, transparent 30%);
  background-color: var(--on-l);
  background-size: 220% 220%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: reelDrift 8s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

/* Floating preview card */
.reel-preview {
  position: fixed; pointer-events: none; z-index: 4;
  width: 480px; height: 310px;
  left: var(--cx, 50%); top: var(--cy, 50%);
  transform: translate(20px, 20px) scale(0.92);
  opacity: 0;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.reel-preview.is-on { opacity: 1; transform: translate(40px, 40px) scale(1); }
.reel-preview .frame {
  position: absolute; inset: 0;
  background: var(--ink-3);
  overflow: hidden;
}
.reel-preview .frame::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  animation: sheen 3s ease-in-out infinite;
}
@keyframes sheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.reel-preview .play {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--stage-1);
  display: flex; align-items: center; gap: 8px; z-index: 3;
}
.reel-preview .play .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-1); animation: pulse 1.4s ease-in-out infinite; }
.reel-preview .tc {
  position: absolute; right: 16px; top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(237,228,208,0.7);
  z-index: 3;
}
.reel-preview .center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.reel-preview .label {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d);
  z-index: 3;
}

/* Project preview swatches */
.swatch-1 {
  background:
    radial-gradient(ellipse 70% 50% at 30% 50%, rgba(255,88,36,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255,40,118,0.35) 0%, transparent 60%),
    linear-gradient(135deg, #1a0c08, #050505);
}
.swatch-2 {
  background:
    radial-gradient(ellipse 80% 30% at 50% 90%, rgba(255,183,80,0.32) 0%, transparent 60%),
    linear-gradient(180deg, #0a0e16, #050505);
}
.swatch-2::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 16px, rgba(232,226,212,0.05) 16px, rgba(232,226,212,0.05) 17px);
}
.swatch-3 {
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(185,69,255,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(40,88,255,0.30) 0%, transparent 60%),
    linear-gradient(180deg, #0a0612, #050505);
}
.swatch-4 {
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(232,226,212,0.20) 49.6%, rgba(232,226,212,0.20) 50.4%, transparent 50.4%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255,183,80,0.20) 0%, transparent 60%),
    linear-gradient(180deg, #161311, #050505);
}
.swatch-5 {
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(232,226,212,0.05) 8px, rgba(232,226,212,0.05) 9px),
    radial-gradient(ellipse at 70% 30%, rgba(255,40,118,0.22) 0%, transparent 50%),
    linear-gradient(135deg, #170c12, #050505);
}
.swatch-6 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,183,80,0.20) 0%, transparent 40%),
    linear-gradient(180deg, #0e0a06, #050505);
}

/* Work backdrop: subtle light-show on warm white, with per-project image
   revealed sharp inside a cursor radial mask. */
.work { isolation: isolate; }
.work-light { display: none; } /* deprecated */
.work-lightshow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 36% 40% at 18% 24%, rgba(255, 88, 36, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 30% 36% at 78% 32%, rgba(255, 40, 118, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 50% 84%, rgba(40, 88, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 32% 36% at 90% 78%, rgba(255, 183, 80, 0.12) 0%, transparent 60%);
  background-size: 220% 220%;
  animation: workLightDrift 26s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
@keyframes workLightDrift {
  0%   { background-position: 0% 30%, 30% 70%, 60% 20%, 80% 50%; }
  100% { background-position: 80% 70%, 60% 30%, 30% 80%, 30% 20%; }
}

.work-bd {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.work-bd-blur,
.work-bd-sharp {
  position: absolute; inset: 0;
}
.work-bd-blur { filter: blur(46px) saturate(1.05); transform: scale(1.12); }
.work-bd-sharp {
  -webkit-mask-image: radial-gradient(circle 240px at var(--wmx, -400px) var(--wmy, -400px),
    #000 0%, #000 38%, rgba(0,0,0,0.5) 60%, transparent 90%);
          mask-image: radial-gradient(circle 240px at var(--wmx, -400px) var(--wmy, -400px),
    #000 0%, #000 38%, rgba(0,0,0,0.5) 60%, transparent 90%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.work-bd-overlay {
  position: absolute; inset: 0;
  background: rgba(244, 240, 231, 0.88);
  transition: background .55s ease;
}
.work.is-active .work-bd-overlay { background: rgba(244, 240, 231, 0.62); }
.work-bd .work-stage {
  position: absolute; inset: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.work .container,
.work .vert-label { position: relative; z-index: 2; }

/* ─── Numbers ("By the numbers") ────────── */
.numbers-wrap { background: var(--ink); padding: 120px 0; position: relative; overflow: hidden; }
.numbers-head {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 64px;
  text-align: center;
}

/* ─── Numbers — editorial spread ──────────────────────────
   Layout: eyebrow + display headline up top, hairline, then a two-col
   grid: (a) hero stat with gradient text + count-up; (b) cluster of
   three supporting stats above a punchline closer ("0 Super Bowls").
   A slow marquee ticker pins to the section's bottom for ambient
   texture. Background uses a subtle radial stage-light wash. */
.numbers-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 22% 35%, rgba(255, 88, 36, 0.10) 0%, transparent 65%),
    radial-gradient(50% 55% at 85% 75%, rgba(40, 88, 255, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* Lift in-flow content above the radial wash. Vert-label keeps its own
   absolute positioning — only bump its stacking. */
.numbers-wrap .numbers-stage,
.numbers-stage .container { position: relative; z-index: 1; }
.numbers-wrap > .vert-label { z-index: 4; }

/* ── Intro role title-card ─────────────────────────────────
   Reveals line by line, holds, then fades out (driven by --p) so the
   "By the numbers" content can take over. Absolutely positioned over the
   stage so it shares the same optical center as the numbers content. */
.numbers-rolecard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  /* Whole card fades out after the read-hold (p 0.2 → 0.28). */
  opacity: clamp(0, calc(1 - (var(--p, 0) - 0.2) * 12.5), 1);
}
.numbers-rolecard .container { display: flex; flex-direction: column; gap: 0.06em; }
.role-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--on-d);
  /* Per-line stagger in from the left. */
  --r-eff: clamp(0, calc((var(--p, 0) - var(--line-idx, 0) * 0.025) / 0.06), 1);
  opacity: var(--r-eff);
  transform: translate3d(calc((1 - var(--r-eff)) * -48px), 0, 0);
  will-change: opacity, transform;
}
body.font-bigshoulders .role-line { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .role-line { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }
/* Lead line "3× Emmy Award Winning" gets the animated light-show gradient. */
.role-line.role-lead {
  font-size: clamp(30px, 5.4vw, 92px);
  letter-spacing: -0.04em;
  margin-bottom: 0.12em;
  background-image:
    radial-gradient(circle at 18% 50%, var(--stage-1) 0%, transparent 32%),
    radial-gradient(circle at 70% 30%, var(--stage-2) 0%, transparent 30%),
    radial-gradient(circle at 84% 80%, var(--stage-3) 0%, transparent 32%);
  background-color: var(--on-d);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

.numbers-spread {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 56px);
  /* Fades in as the role title-card fades out (crossfade p 0.2 → 0.33). */
  opacity: clamp(0, calc((var(--p, 0) - 0.2) * 8), 1);
}

/* Intro = full-width header bar. Eyebrow anchored left, headline aligned
   right so the top of the section spans edge-to-edge instead of feeling
   left-stacked. Wraps to a column on smaller screens. */
.numbers-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.numbers-intro .numbers-eyebrow { flex: 0 0 auto; padding-bottom: 6px; }
.numbers-intro .numbers-headline { flex: 1 1 60%; text-align: right; max-width: none; }
@media (max-width: 720px) {
  .numbers-intro .numbers-headline { text-align: left; }
}
.numbers-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}
.numbers-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stage-1);
  box-shadow: 0 0 14px rgba(255, 88, 36, 0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
.numbers-headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--on-d);
  margin: 0;
  max-width: 38ch;
  /* "Cool reveal": clip-wipe from the right after the role card clears. */
  --hl-reveal: clamp(0, calc((var(--p, 0) - 0.24) * 5.5), 1);
  -webkit-clip-path: inset(0 calc((1 - var(--hl-reveal)) * 103%) -0.18em 0);
          clip-path: inset(0 calc((1 - var(--hl-reveal)) * 103%) -0.18em 0);
}
body.font-bigshoulders .numbers-headline { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.015em; }
body.font-bricolage .numbers-headline { font-family: var(--body); font-weight: 700; letter-spacing: -0.03em; }

.numbers-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-d-2) 8%, var(--line-d-2) 92%, transparent);
  /* Draws out from the left as the headline wipes on. */
  transform: scaleX(clamp(0, calc((var(--p, 0) - 0.26) * 5), 1));
  transform-origin: left center;
}

/* Single horizontal row, evenly spread edge-to-edge. The hero column
   (Social views — 2nd cell) gets a little more weight. */
.numbers-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(24px, 2.6vw, 44px);
  align-items: start;
  position: relative;
}
.numbers-row > .nstory + .nstory {
  padding-left: clamp(16px, 1.6vw, 28px);
  border-left: 1px solid var(--line-d-2);
}

/* ── Focus-wave reveal with per-cell HOLD ──────────────────
   --p is written 0→1 by useNumbersProgress on .numbers-wrap. Each cell
   gets its own scroll window: RISE → PEAK HOLD → FALL → SETTLED, then
   the next cell takes over. The hold gives the reader time to absorb
   each stat at its peak (~18vh of scroll = several seconds of read time).
     --cell-start     : where this cell begins rising
     --cell-peak-end  : where this cell starts falling (after the hold)
     --rise           : 0→1 monotone, hits 1 at peak start, stays at 1
     --fall           : 0→1 monotone, starts after the peak hold ends
   Visuals interpolate OFF → PEAK → SETTLED. By p≈0.95 the last cell has
   also fallen to settled, leaving a beat before the page-turn. */
.nstory {
  --lead-in: 0.30;        /* delay so the role title-card plays first */
  --cell-span: 0.124;     /* total per-cell window */
  --rise-span: 0.022;     /* rise duration */
  --hold-span: 0.08;      /* peak HOLD (read time) */
  --fall-span: 0.018;     /* fall duration */
  --cell-start: calc(var(--lead-in) + var(--col-idx, 0) * var(--cell-span));
  --cell-peak-end: calc(var(--cell-start) + var(--rise-span) + var(--hold-span));
  --rise: clamp(0, calc((var(--p, 0) - var(--cell-start)) / var(--rise-span)), 1);
  --fall: clamp(0, calc((var(--p, 0) - var(--cell-peak-end)) / var(--fall-span)), 1);
  /* "Intensity" used downstream — 1 at peak, 0.5 at settled, 0 at off */
  --intensity: calc(var(--rise) - var(--fall) * 0.5);

  /* Light-show reveal — controls when the gradient layer is visible:
     - During PEAK of THIS cell (intensity ~ 1)
     - During FINALE (last ~12% of pin) when all cells light up together */
  --peak-strength: clamp(0, calc((var(--intensity) - 0.55) * 4.5), 1);
  --finale: clamp(0, calc((var(--p, 0) - 0.88) * 8), 1);
  --gradient-reveal: max(var(--peak-strength), var(--finale));
}

@media (max-width: 1100px) {
  .numbers-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
  .numbers-row > .nstory + .nstory { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .numbers-row { grid-template-columns: 1fr 1fr; }
  /* On narrow screens pin the wave to PEAK for every cell + force the
     gradient reveal — no horizontal focus to ride, so we just show
     full-state lit stats. */
  .nstory {
    --rise: 1; --fall: 0; --intensity: 1;
    --gradient-reveal: 1;
  }
}

/* ── Generic NumberStory cell ──────────────────────────────
   Two reveal phases driven by one --eff (0 → 1):
     1. The number itself grows + bolds + gains color/saturation. The
        number is VISIBLE FROM THE START (small, thin, desaturated) so
        the row feels populated even before reveal — then each cell
        "comes alive" in left-to-right sequence.
     2. The eyebrow + body context fade in just behind the number.
   --eff is per-cell, computed from --p (scroll) + --col-idx (stagger). */
.nstory {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nstory-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  line-height: 1.4;
  min-height: 2.4em;
  /* Context fades in WITH the rise (around peak time) and STAYS after
     the cell settles — tied to --rise only so it never fades back out. */
  opacity: clamp(0, calc((var(--rise, 0) - 0.55) * 2.5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--rise, 0) - 0.55) * 2.5), 1)) * 8px));
}
/* Outer .nstory-num reserves the slot. UNIFIED font-size across ALL cells
   so the OFF state (small dim placeholder) reads identically across the
   row — hero distinction comes from gradient/glow and a peak-size bump
   on its own .nstory-numtext, not from a different parent slot. */
.nstory-num {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(54px, 5.5vw, 96px);
  display: flex;
  align-items: flex-start;    /* numbers hug the eyebrow above them */
  min-height: 1.5em;          /* reserves room for the hero's peak swell (1.45em) */
}
body.font-bigshoulders .nstory-num { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .nstory-num { font-family: var(--body); font-weight: 700; letter-spacing: -0.05em; }

/* The actual rendered number — interpolates size, weight, letter-spacing
   via the focus-wave. Color is handled by the two stacked child layers
   (.num-plain and .num-gradient), crossfaded via --gradient-reveal. */
.nstory-numtext {
  /* Two-layer stack: both children occupy the same grid cell. */
  display: inline-grid;
  grid-template-areas: "stack";
  transform-origin: 0 100%;
  /* Size: OFF=0.44em, PEAK=1.0em, SETTLED=0.9em — numbers stay big & bold
     after the wave passes (these are impressive numbers). */
  font-size: calc(0.44em + var(--rise, 0) * 0.56em - var(--fall, 0) * 0.1em);
  /* Weight: OFF=400, PEAK=700, SETTLED=600 — stays bold at settled */
  font-weight: calc(400 + var(--rise, 0) * 300 - var(--fall, 0) * 100);
  letter-spacing: calc(-0.025em - var(--rise, 0) * 0.015em + var(--fall, 0) * 0.008em);
  transition: none;
  will-change: font-size, font-weight;
}
.num-plain,
.num-gradient {
  grid-area: stack;
  display: block;
  white-space: nowrap;
}

/* PLAIN layer — solid color. Fades in from off→settled (driven by --intensity)
   and fades OUT as the gradient layer takes over (driven by --gradient-reveal).
   At settled (between peaks), this is fully visible as a solid bone number. */
.num-plain {
  color: color-mix(in srgb, var(--on-d-faint) 100%, var(--on-d) calc(min(1, var(--intensity, 0) * 2) * 100%));
  opacity: calc(1 - var(--gradient-reveal, 0));
}

/* GRADIENT layer — animated "light show" via background-clip:text. Opacity
   tied to --gradient-reveal so it only shows during this cell's PEAK or
   during the FINALE (all cells light up at end of section). */
.num-gradient {
  background-image:
    radial-gradient(circle at 20% 50%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 70% 30%, var(--stage-2) 0%, transparent 28%),
    radial-gradient(circle at 80% 80%, var(--stage-3) 0%, transparent 30%);
  background-color: var(--on-d);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
  opacity: var(--gradient-reveal, 0);
  /* Subtle glow only when gradient is showing — fades in/out with the reveal */
  filter: drop-shadow(0 8px 32px rgba(255, 88, 36, calc(var(--gradient-reveal, 0) * 0.22)));
  will-change: opacity, filter;
}
.nstory-suffix {
  font-size: 0.36em;
  margin-left: 4px;
  vertical-align: top;
  position: relative;
  top: 0.18em;
  color: color-mix(in srgb, var(--on-d-faint) 100%, var(--stage-1) calc(min(1, var(--intensity, 0) * 2) * 100%));
}
/* In the gradient layer, the suffix must be transparent too so the
   background-clip:text gradient paints through it. */
.num-gradient .nstory-suffix {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nstory-body {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(12px, 0.95vw, 14.5px);
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--on-d-dim);
  margin: 6px 0 0;
  /* Body fades in with rise + STAYS (no fall coupling) */
  opacity: clamp(0, calc((var(--rise, 0) - 0.65) * 2.8), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--rise, 0) - 0.65) * 2.8), 1)) * 10px));
}

/* Hero stat — same slot as the others (so OFF state matches), but its
   peak swells larger via a custom .nstory-numtext font-size below. */
.nstory.is-hero .nstory-num {
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.nstory.is-hero .nstory-numtext {
  /* Hero peak swells LARGER than the others — 1.45em at peak vs 1.0em.
     OFF: 0.44em (same as others). SETTLED: 1.0em (stays biggest). */
  font-size: calc(0.44em + var(--rise, 0) * 1.01em - var(--fall, 0) * 0.45em);
}
.nstory.is-hero .nstory-body {
  color: var(--on-d);
  font-size: clamp(13px, 1vw, 16px);
}

/* Closer — orange punchline. The plain layer interpolates to stage-1
   (so "0" reads as orange at settled). Gradient layer takes over at peak
   and finale just like every other cell. */
.nstory.is-accent .num-plain {
  color: color-mix(in srgb, var(--on-d-faint) 100%, var(--stage-1) calc(min(1, var(--intensity, 0) * 2) * 100%));
}
.nstory.is-accent .nstory-eyebrow,
.nstory.is-accent .nstory-body { color: var(--on-d); }

/* ── Brand logo ticker — pinned at the section's lower edge ──────
   Placeholder chips for now; swap .brand-chip spans for <img> logos. */
.brand-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 2;
  /* Fades in with the numbers content, after the role card clears. */
  opacity: clamp(0, calc((var(--p, 0) - 0.24) * 7), 1);
}
.brand-ticker-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  text-align: center;
  margin-bottom: 18px;
}
.brand-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.brand-marquee {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marqueeL 42s linear infinite;
}
.brand-marquee:hover { animation-play-state: paused; }
.brand-chip {
  flex-shrink: 0;
  margin: 0 22px;
  width: clamp(120px, 11vw, 168px);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-d-2);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  background: rgba(237, 228, 208, 0.02);
  transition: border-color .4s ease, color .4s ease;
}
.brand-chip:hover { border-color: var(--stage-1); color: var(--on-d); }

/* Uploaded company logos — normalized to a clean white monochrome wall so
   any logo reads consistently on the dark background. */
.brand-logo {
  flex-shrink: 0;
  margin: 0 30px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo img {
  max-height: clamp(26px, 3vw, 42px);
  max-width: 170px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* solid white */
  opacity: 0.6;
  transition: opacity .35s ease;
}
.brand-marquee:hover .brand-logo img { opacity: 1; }
@media (max-width: 900px) {
  .brand-ticker { bottom: 14px; }
  .brand-chip { height: 46px; }
  .brand-logo { height: 46px; margin: 0 20px; }
}

.metrics-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.metrics-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .metrics-cols,
  .metrics-cols-5 { grid-template-columns: 1fr 1fr; gap: 48px 0; }
}
@media (max-width: 600px) {
  .metrics-cols,
  .metrics-cols-5 { grid-template-columns: 1fr; }
}

.metric-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 28px;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  border-left: 1px solid var(--line-d-2);
}
.metric-col:first-child { border-left: 0; padding-left: 0; }
.metric-col:last-child { padding-right: 0; }
/* Hairline divider keeps showing on mobile only between rows where it makes sense */
@media (max-width: 900px) {
  .metric-col { padding: 0; border-left: 0; }
  .metric-col:nth-child(even) { border-left: 1px solid var(--line-d-2); padding-left: 24px; }
  .metric-col:nth-child(odd)  { padding-right: 24px; }
}
@media (max-width: 600px) {
  .metric-col:nth-child(even),
  .metric-col:nth-child(odd) { border-left: 0; padding: 0; padding-top: 24px; border-top: 1px solid var(--line-d-2); }
  .metric-col:first-child { border-top: 0; padding-top: 0; }
}

/* Subtle orange accent dot pinned to the bottom of one divider — quietly
   draws the eye toward the "Super Bowls = 0" punchline next to it. */
.metric-col.has-accent::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stage-1);
  box-shadow: 0 0 14px rgba(255, 88, 36, 0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
@media (max-width: 900px) { .metric-col.has-accent::before { display: none; } }
.metric-col > * {
  --col-stagger: calc(var(--col-idx, 0) * 0.08);
  --row-stagger: 0;
  will-change: transform, opacity;
}
.metric-col > .m-k { --row-stagger: 0.00; }
.metric-col > .m-n { --row-stagger: 0.06; }
.metric-col > .m-l { --row-stagger: 0.12; }
.metric-col > * {
  --eff: clamp(0, calc((var(--p, 0) - var(--col-stagger) - var(--row-stagger)) * 3.5), 1);
  transform: translateY(calc((1 - var(--eff)) * -160%));
  opacity: var(--eff);
}

.m-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  line-height: 1.45;
  /* Reserve room for up to ~3 lines of label so the numbers stay aligned
     across columns regardless of how long each label is. */
  min-height: 3.2em;
  max-width: 22ch;
}
.m-n {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 0.94;
  color: var(--on-d);
}
body.font-bigshoulders .m-n { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .m-n { font-family: var(--body); font-weight: 700; letter-spacing: -0.05em; }
.m-n .m-unit {
  color: var(--stage-1);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.34em;
  vertical-align: top;
  margin-left: 2px;
}
.m-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  max-width: 24ch;
  line-height: 1.5;
}

.numbers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 64px;
}
.stat-cell { display: flex; flex-direction: column; gap: 10px; }
.stat-cell.s1 { grid-column: 1 / span 4; }
.stat-cell.s2 { grid-column: 5 / span 4; padding-top: 80px; }
.stat-cell.s3 { grid-column: 8 / span 4; padding-top: 24px; }
.stat-cell.s4 { grid-column: 4 / span 4; padding-top: 0; }
@media (max-width: 900px) {
  .stat-cell.s1, .stat-cell.s2, .stat-cell.s3, .stat-cell.s4 { grid-column: 1 / -1; padding-top: 0; }
}

.stat-n {
  font-family: var(--display);
  font-size: clamp(40px, 5.5vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.94;
  color: var(--on-d);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.stat-n .unit {
  color: var(--stage-1); font-family: var(--display); font-weight: 700;
  font-size: 0.34em; vertical-align: top;
}
.stat-l {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
  max-width: 24ch;
  margin-top: 8px;
}
.stat-cell .k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--stage-1);
  margin-bottom: 4px;
}

/* ─── Philosophy ────────────────────────── */
.philosophy {
  background: var(--ink);
  padding: clamp(160px, 22vh, 240px) 0;
  position: relative;
}
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .philosophy-grid { grid-template-columns: 1fr; gap: 40px; } }
.philosophy-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  position: sticky; top: 120px;
}
.philosophy-label .strong { color: var(--on-d); }
.philosophy-label .rule { display: block; width: 60px; height: 1px; background: var(--line-d-2); margin: 14px 0; }
.philosophy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 64px; }
.philosophy-item {
  border-top: 1px solid var(--line-d);
  padding-top: 36px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
}
.philosophy-item .n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--on-d-mute); letter-spacing: -0.02em;
  line-height: 0.9;
}
body.font-bigshoulders .philosophy-item .n { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .philosophy-item .n { font-family: var(--body); font-weight: 700; }

.philo-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--on-d);
}
.philo-p {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-d-dim);
  max-width: 56ch;
  margin: 0;
}

/* ─── Philosophy / "Approach" — light theme ──────────────────────────
   When .philosophy carries .is-light it flips to the warm off-white canvas
   and on-light text. Used in tandem with .stick so the section locks in
   place as a white "card" over the dark Numbers card beneath it. */
.philosophy.is-light { background: var(--bone); color: var(--on-l); }
.philosophy.is-light .philosophy-label { color: var(--on-l-mute); }
.philosophy.is-light .philosophy-label .strong { color: var(--on-l); }
.philosophy.is-light .philosophy-label .rule { background: var(--line-l-2); }
.philosophy.is-light .philosophy-item { border-top-color: var(--line-l); }
.philosophy.is-light .philosophy-item .n { color: var(--on-l-mute); }
.philosophy.is-light .philo-h { color: var(--on-l); }
.philosophy.is-light .philo-p { color: var(--on-l-dim); }
.philosophy.is-light .vert-label { color: var(--on-l-mute); }

/* Philosophy is a plain sticky section — no circle/mask reveal.
   Sticky-stack styling lives near the other main.stack > .X.stick rules
   below; .is-light raises specificity so the dark .section.stick base
   can't override the bone background. */

/* ─── What I Do (light, editorial) ─────────────────────────
   Big "WHAT I DO" headline with the "Do" set in the light-background
   stage-light gradient, then three discipline columns. Each item lifts
   + lights its title on hover. */
.wid {
  background: var(--bone);
  color: var(--on-l);
  position: relative;
  overflow: hidden;
}
.wid-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 88px);
  width: 100%;
}
.wid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.wid-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-l-mute);
  padding-bottom: 10px;
}
.wid-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--on-l);
  text-transform: uppercase;
}
body.font-bigshoulders .wid-title { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .wid-title { font-family: var(--body); font-weight: 700; }
/* "Do" set in the light-bg stage-light gradient. */
.wid-do {
  background-image:
    radial-gradient(circle at 18% 50%, var(--stage-1) 0%, transparent 32%),
    radial-gradient(circle at 70% 28%, var(--stage-2) 0%, transparent 30%),
    radial-gradient(circle at 52% 82%, var(--stage-3) 0%, transparent 32%),
    radial-gradient(circle at 90% 72%, var(--stage-6) 0%, transparent 30%);
  background-color: var(--on-l);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

.wid-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 64px);
}
@media (max-width: 860px) {
  .wid-list { grid-template-columns: 1fr; gap: 8px; }
}
.wid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0 0;
  border-top: 1px solid var(--line-l);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 860px) { .wid-item { padding: 24px 0; } }
.wid-item:hover { transform: translateY(-6px); }
.wid-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--on-l-mute);
  transition: color .4s ease;
}
.wid-item:hover .wid-index { color: var(--stage-1); }
.wid-disc {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-l);
}
body.font-bigshoulders .wid-disc { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .wid-disc { font-family: var(--body); font-weight: 700; }
/* Title lights up with the gradient on hover (crossfade between the solid
   text and a gradient overlay rendered from data-text). */
.wid-disc-text {
  position: relative;
  display: inline-block;
}
.wid-disc-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 50%, var(--stage-1) 0%, transparent 36%),
    radial-gradient(circle at 72% 28%, var(--stage-2) 0%, transparent 34%),
    radial-gradient(circle at 88% 80%, var(--stage-3) 0%, transparent 36%);
  background-color: var(--on-l);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity .45s ease;
  animation: reelDrift 9s cubic-bezier(.55,.05,.45,.95) infinite alternate;
  pointer-events: none;
}
.wid-item:hover .wid-disc-text::after { opacity: 1; }
.wid-desc {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.55;
  color: var(--on-l-dim);
  max-width: 36ch;
}

/* ─── Selected Case (light) ─────────────── */
.tease {
  background: var(--bone-1);
  color: var(--on-l);
  padding: 160px 0 180px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.tease-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 24px;
  margin-bottom: 64px;
}
@media (max-width: 900px) { .tease-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; } }
.tease-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-l-mute); }
.tease-eyebrow .strong { color: var(--on-l); }
.tease-status {
  text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-l-mute);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.tease-status .dt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.6);
  animation: pulse 1.8s ease-in-out infinite;
}
.tease-frame {
  text-align: right;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-l-mute);
}

.tease-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  color: var(--on-l);
  text-align: center;
}
.tease-title .alt {
  background-image:
    radial-gradient(circle at 18% 50%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 75% 30%, var(--stage-2) 0%, transparent 30%),
    radial-gradient(circle at 50% 80%, var(--stage-3) 0%, transparent 30%),
    radial-gradient(circle at 90% 70%, var(--stage-6) 0%, transparent 28%);
  background-color: var(--on-l);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
  display: inline-block;
}

.tease-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 72px;
  align-items: end;
  margin-top: 80px;
}
@media (max-width: 900px) { .tease-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; } }

.tease-visual {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #0a0606;
}
.tease-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px;
}
.tease-meta .row .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-l-mute); margin-bottom: 8px; }
.tease-meta .row .v { font-size: 15px; line-height: 1.45; color: var(--on-l); font-family: var(--body); font-weight: 500; }
.tease-meta .body { grid-column: 1 / -1; font-size: 18px; line-height: 1.55; color: var(--on-l-dim); max-width: 60ch; margin-top: 14px; font-family: var(--body); }

.tease-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-l);
  padding: 16px 24px;
  border: 1px solid var(--on-l);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: color .35s ease;
}
.tease-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--on-l);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.tease-cta > * { position: relative; z-index: 1; }
.tease-cta:hover { color: var(--bone); }
.tease-cta:hover::before { transform: translateY(0); }

/* Run-of-show timeline */
.runofshow {
  margin-top: 80px;
  border-top: 1px solid var(--line-l);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.runofshow .lbl {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-l-mute);
  display: flex; justify-content: space-between;
}
.runofshow .track {
  position: relative; height: 22px;
}
.runofshow .track .bar {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--line-l-2); transform: translateY(-50%);
}
.runofshow .track .tick {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--on-l-mute); text-transform: uppercase;
  transform: translateX(-50%);
}
.runofshow .track .tick .mk { width: 1px; height: 14px; background: var(--on-l-mute); }
.runofshow .track .tick.active .mk { background: var(--stage-1); height: 22px; }
.runofshow .track .tick.active { color: var(--on-l); font-weight: 500; }
.runofshow .track .tick .t { margin-top: 6px; white-space: nowrap; }

/* ─── Contact ───────────────────────────── */
.contact {
  background: var(--ink);
  padding: clamp(120px, 20vh, 200px) 0 24px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.contact-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
}
.contact-eyebrow .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 220px; }
.contact-eyebrow .strong { color: var(--on-d); }

/* Brutalist asymmetric headline */
.contact-headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--on-d);
}
.contact-headline .line { display: block; overflow: hidden; }
.contact-headline .line .word { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.contact-headline.is-in .line .word { transform: translateY(0); }
.contact-headline .line.d1 .word { transition-delay: 80ms; }
.contact-headline .line.d2 .word { transition-delay: 160ms; }
.contact-headline .line.d3 .word { transition-delay: 240ms; }
.contact-headline .lg     { font-size: clamp(48px, 7vw, 132px); }
.contact-headline .md     { font-size: clamp(24px, 3vw, 48px); color: var(--on-d-mute); display: inline-block; vertical-align: baseline; padding-bottom: 0.15em; }
.contact-headline .sm     { font-size: clamp(18px, 2vw, 32px); color: var(--on-d-dim); font-weight: 400; }
.contact-headline .link {
  display: inline-block; position: relative;
}
.contact-headline .link .underline {
  position: absolute; left: 0; right: 0; bottom: 0.08em;
  height: 6px; background: var(--stage-1);
  transform: scaleX(0); transform-origin: left;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.contact-headline .link:hover .underline { transform: scaleX(1); }
.contact-headline .punct { color: var(--stage-1); }

/* ── Direct links to Work + About pages ─────────────────── */
.contact-links {
  margin-top: clamp(22px, 2.6vw, 38px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 720px) { .contact-links { grid-template-columns: 1fr; } }
.contact-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "k arrow" "title arrow";
  align-items: center;
  gap: 4px 16px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-d);
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.contact-link::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(255,88,36,0.16) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(40,88,255,0.12) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
}
.contact-link:hover {
  border-color: var(--stage-1);
  transform: translateY(-4px);
}
.contact-link:hover::before { opacity: 1; }
.cl-k {
  grid-area: k;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-d-mute);
}
.cl-title {
  grid-area: title;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--on-d);
}
body.font-bigshoulders .cl-title { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .cl-title { font-family: var(--body); font-weight: 700; }
.cl-arrow {
  grid-area: arrow;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  color: var(--stage-1);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.contact-link:hover .cl-arrow { transform: translateX(10px); }

.contact-meta {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-d);
}
@media (max-width: 900px) { .contact-meta { grid-template-columns: 1fr 1fr; } }
.contact-meta .col .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute); margin-bottom: 12px; }
.contact-meta .col .v { font-size: 14px; color: var(--on-d); line-height: 1.5; font-family: var(--mono); }
.contact-meta .col a { position: relative; display: inline-block; }
.contact-meta .col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.contact-meta .col a:hover::after { transform: scaleX(1); }

.now-playing {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line-d);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .now-playing { grid-template-columns: 1fr; } }
.now-playing .row { display: flex; gap: 14px; align-items: flex-start; }
.now-playing .row .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-d-mute);
  min-width: 84px;
  padding-top: 2px;
}
.now-playing .row .v { font-family: var(--body); font-size: 14px; color: var(--on-d); line-height: 1.45; }
.now-playing .row .v .em { font-style: italic; color: var(--on-d-dim); }

/* ─── Footer ────────────────────────────── */
.footer {
  background: var(--ink);
  padding: 36px 0 36px;
  border-top: 1px solid var(--line-d);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
}
.footer .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   STAGE SECTIONS — pinned, content animates from scroll progress (--p)
   ═══════════════════════════════════════════════════════════════════ */

.stage { position: relative; background: var(--ink); }
.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.stage-pin > .section {
  position: relative !important;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.stage-pin > .section .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hide inner sticky/scroll-into elements that break inside pin */
.stage .statement-marquees { display: none !important; }
.stage .runofshow { display: none !important; }
.stage .now-playing { display: none !important; }
.stage .philosophy-label { position: relative !important; top: auto !important; }
.stage .philosophy-list { gap: 28px !important; }
.stage .philosophy-item { padding-top: 16px !important; }

/* Reset stick-card cover-fx (cards no longer "covered by next" here) */
.stage-pin > .section[data-covered] { transform: none !important; filter: none !important; }

/* ── 01 Word EXPLODE — Statement ────────────────────────── */
.statement-body .exp { display: inline; }
.statement-body .exp-word {
  display: inline-block;
  --eff: clamp(0, calc(var(--p, 0) * 1.8 - 0.05), 1);
  transform:
    translate3d(
      calc((1 - var(--eff)) * var(--dx, 0px)),
      calc((1 - var(--eff)) * var(--dy, 0px)),
      0
    )
    rotate(calc((1 - var(--eff)) * var(--dr, 0deg)))
    scale(calc(0.4 + var(--eff) * 0.6));
  opacity: var(--eff);
  filter: blur(calc((1 - var(--eff)) * 14px));
  will-change: transform, filter, opacity;
}

/* ── 02 SCRAMBLE COUNT — Numbers ────────────────────────── */
/* ScrambleNumber updates text content directly. Numbers section static otherwise. */
.numbers-wrap .stat-cell {
  --eff: clamp(0, calc(var(--p, 0) * 1.4), 1);
  transform: translateY(calc((1 - var(--eff)) * 24px));
  opacity: var(--eff);
}

/* ── 03 LETTER DECODE — Philosophy headings ─────────────── */
/* ScrambleText updates text directly. Each item has stagger. */
.philosophy-item {
  --eff: clamp(0, calc(var(--p, 0) * 1.5), 1);
}
.philosophy-list > .philosophy-item:nth-child(1) { --stagger: 0; }
.philosophy-list > .philosophy-item:nth-child(2) { --stagger: 0.12; }
.philosophy-list > .philosophy-item:nth-child(3) { --stagger: 0.24; }
.philosophy-list > .philosophy-item:nth-child(4) { --stagger: 0.36; }
.philosophy-item {
  --pp: clamp(0, calc(var(--p, 0) * 1.6 - var(--stagger, 0)), 1);
  transform: translateX(calc((1 - var(--pp)) * -60px));
  opacity: var(--pp);
}

/* ── 04 CURTAIN WIPE + TILT-IN — Tease ──────────────────── */
.tease-visual.curtain {
  --eff: clamp(0, calc(var(--p, 0) * 1.5 - 0.1), 1);
  -webkit-mask-image: linear-gradient(
    100deg,
    black 0%,
    black calc(var(--eff) * 100%),
    rgba(0,0,0,0.3) calc(var(--eff) * 100% + 3%),
    transparent calc(var(--eff) * 100% + 8%)
  );
  mask-image: linear-gradient(
    100deg,
    black 0%,
    black calc(var(--eff) * 100%),
    rgba(0,0,0,0.3) calc(var(--eff) * 100% + 3%),
    transparent calc(var(--eff) * 100% + 8%)
  );
}
.tease-title.tilt-in {
  --eff: clamp(0, calc(var(--p, 0) * 2), 1);
  transform:
    perspective(800px)
    rotateX(calc((1 - var(--eff)) * 24deg))
    translateY(calc((1 - var(--eff)) * 80px));
  opacity: clamp(0, calc(var(--p, 0) * 2.4), 1);
  transform-origin: 50% 100%;
}

/* ── 05 ZOOM-IN from tiny — Contact ─────────────────────── */
.contact-headline.zoom-in {
  --eff: clamp(0, calc(var(--p, 0) * 1.4), 1);
  transform: scale(calc(0.08 + var(--eff) * 0.92));
  filter: blur(calc((1 - var(--eff)) * 14px));
  opacity: clamp(0, calc(var(--p, 0) * 2.5), 1);
  transform-origin: 50% 50%;
}
.contact-headline.zoom-in .line .word {
  /* Override the mask-line word slide — we use scale instead */
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL ("read like a book") — sections 01→05
   ═══════════════════════════════════════════════════════════════════ */

.hscroll {
  position: relative;
  background: var(--ink);
}
.hscroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}
.hscroll-track {
  display: flex;
  height: 100vh;
  width: max-content;
  will-change: transform;
}
.hscroll-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.hscroll-progress {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  pointer-events: none;
}

/* Sections inside hscroll-panel — no sticky, fill panel */
.hscroll-panel > .section {
  position: relative !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.hscroll-panel > .section.tease,
.hscroll-panel > .section.philosophy {
  overflow: hidden;
}
.hscroll-panel > .section[data-covered] {
  transform: none !important;
  filter: none !important;
}
.hscroll-panel > .section .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tighten sections to fit 100vh comfortably */
.hscroll-panel > .statement { padding: 80px 0 0 !important; }
.hscroll-panel > .numbers-wrap { padding: 80px 0 !important; }
.hscroll-panel > .philosophy { padding: 80px 0 !important; }
.hscroll-panel > .tease { padding: 60px 0 !important; }
.hscroll-panel > .contact { padding: 80px 0 !important; }

/* Disable inner sticky elements that would break inside panels */
.hscroll-panel .philosophy-label { position: relative !important; top: auto !important; }
.hscroll-panel .statement-marquees { display: none !important; } /* simplify panel content */

/* Compact philosophy items so all 4 fit one viewport */
.hscroll-panel .philosophy-list { gap: 28px !important; }
.hscroll-panel .philosophy-item { padding-top: 18px !important; }
.hscroll-panel .philo-h { font-size: clamp(16px, 1.7vw, 22px) !important; margin-bottom: 8px !important; }
.hscroll-panel .philo-p { font-size: 13.5px !important; line-height: 1.5 !important; max-width: 52ch !important; }
.hscroll-panel .philosophy-item .n { font-size: clamp(18px, 1.8vw, 24px) !important; }
.hscroll-panel .philosophy-grid { gap: 48px !important; }

/* Compact tease */
.hscroll-panel .tease-grid { margin-top: 32px !important; gap: 32px !important; }
.hscroll-panel .runofshow { display: none !important; } /* trim for panel fit */
.hscroll-panel .tease-head { margin-bottom: 24px !important; }

/* Compact contact */
.hscroll-panel .now-playing { display: none !important; }
.hscroll-panel .contact-meta { margin-top: 48px !important; padding-top: 20px !important; }

/* Stronger left/right border between panels — like book pages */
.hscroll-panel + .hscroll-panel {
  border-left: 1px solid var(--line-d);
}

/* Mobile fallback — stack panels vertically, no horizontal trick */
@media (max-width: 800px) {
  .hscroll { height: auto !important; }
  .hscroll-pin { position: relative; height: auto; }
  .hscroll-track { display: block; width: 100vw; height: auto; transform: none !important; }
  .hscroll-panel { width: 100vw; height: auto; min-height: 100vh; border-left: 0; border-bottom: 1px solid var(--line-d); }
  .hscroll-panel > .section { height: auto; max-height: none; overflow: visible; }
  .hscroll-progress { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   WORK INDEX PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Work Index Hero (sticky 100vh) ─── */
.work-hero {
  min-height: 100vh;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 110px 0 56px;
  background: #0c0a08;
  isolation: isolate;
}
.work-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.work-hero-stage {
  position: absolute; inset: -4%;
  background-color: #0a0806;
  background-image:
    radial-gradient(ellipse 30% 36% at 14% 22%, rgba(255,88,36,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 28% 30% at 86% 18%, rgba(255,40,118,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 36% 32% at 50% 88%, rgba(255,183,80,0.32) 0%, transparent 65%),
    radial-gradient(ellipse 26% 32% at 78% 72%, rgba(40,88,255,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 24% 30% at 16% 80%, rgba(185,69,255,0.30) 0%, transparent 60%),
    linear-gradient(180deg, #1a0c08 0%, #050505 100%);
  background-size: 220% 220%;
  background-repeat: no-repeat;
  filter: blur(36px) saturate(1.05);
  transform: scale(1.1);
  animation: stageDrift 22s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.work-hero-stripes {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.work-hero-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.55) 100%);
}

.work-hero-top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  padding: 0 44px;
}
@media (max-width: 800px) { .work-hero-top { padding: 0 22px; } }

.work-hero-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
  position: relative;
  z-index: 2;
}
.work-hero-title {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 168px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  pointer-events: none;
}
.work-hero-title .mask-line { display: block; line-height: 0.92; }
body.font-bigshoulders .work-hero-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .work-hero-title { font-family: var(--body); font-weight: 700; letter-spacing: -0.045em; }

.work-hero-title .reel-em {
  background-color: var(--on-d);
  background-image:
    radial-gradient(circle at 18% 32%, var(--stage-1) 0%, transparent 28%),
    radial-gradient(circle at 78% 22%, var(--stage-2) 0%, transparent 26%),
    radial-gradient(circle at 42% 78%, var(--stage-3) 0%, transparent 30%),
    radial-gradient(circle at 88% 68%, var(--stage-4) 0%, transparent 28%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reelDrift 12s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

.work-hero-bottom {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 32px;
  padding: 0 44px;
}
@media (max-width: 800px) { .work-hero-bottom { padding: 0 22px; grid-template-columns: 1fr; } }

/* ─── Year Scrubber bar ─── */
.filter-bar {
  background: var(--ink);
  padding: 64px 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
}
.filter-head {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 36px;
}
.filter-head .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 280px; }

.year-scrubber {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 28px 0 8px;
}
.scrubber-track-line {
  position: absolute;
  left: 0; right: 0;
  top: 40px;
  height: 1px;
  background: var(--line-d-2);
  z-index: 0;
}
.scrubber-tick {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--on-d-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  transition: color .35s ease;
}
.scrubber-tick.all {
  flex: 0.7;
  margin-right: 20px;
}
.scrubber-tick .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--on-d-mute);
  position: relative;
  z-index: 1;
  transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.scrubber-tick .lbl { color: inherit; transition: color .35s ease; font-weight: 500; }
.scrubber-tick .count {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--on-d-faint);
  transition: color .35s ease;
}
.scrubber-tick:hover { color: var(--on-d); }
.scrubber-tick:hover .dot { border-color: var(--on-d); transform: scale(1.2); }
.scrubber-tick:hover .count { color: var(--on-d-mute); }
.scrubber-tick.active { color: var(--on-d); }
.scrubber-tick.active .dot {
  background: var(--stage-1);
  border-color: var(--stage-1);
  box-shadow: 0 0 0 4px rgba(255, 88, 36, 0.18), 0 0 16px rgba(255, 88, 36, 0.55);
  transform: scale(1.3);
}
.scrubber-tick.active .count { color: var(--stage-1); }

/* ─── Filmstrip ─── */
.filmstrip {
  background: var(--ink);
  padding: 64px 0 160px;
  min-height: 60vh;
}
.filmstrip-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-d);
  margin-bottom: 16px;
}
.filmstrip-head .lead,
.filmstrip-head .count {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  line-height: 1.6;
}
.filmstrip-head .count { text-align: right; }

.filmstrip-list { display: flex; flex-direction: column; }

.film-strip {
  display: block;
  position: relative;
  overflow: hidden;
  height: 76px;
  border-bottom: 1px solid var(--line-d);
  transition: height .65s cubic-bezier(.2,.7,.2,1);
}
.film-strip:hover { height: 480px; }

.strip-row {
  display: grid;
  grid-template-columns: 70px 1.6fr 1.4fr 80px;
  gap: 32px;
  padding: 24px 0;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .strip-row { grid-template-columns: 50px 1fr 80px; }
  .strip-row .strip-tags { display: none; }
}
.strip-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.strip-num .of { color: var(--on-d-faint); }
.strip-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 26px);
  letter-spacing: -0.025em;
  color: var(--on-d);
  line-height: 1.0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
body.font-bigshoulders .strip-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage .strip-title { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }

.strip-tags {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
}
.strip-year {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--on-d-mute);
  text-align: right;
}
.film-strip:hover .strip-title { transform: translateX(10px); color: var(--on-d); }
.film-strip:hover .strip-num,
.film-strip:hover .strip-tags,
.film-strip:hover .strip-year { color: var(--on-d-dim); }

/* Filmstrip image — expanded on hover */
.strip-image {
  position: absolute;
  left: 0; right: 0; top: 76px;
  height: 380px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease .12s, transform .65s cubic-bezier(.2,.7,.2,1);
  transform: translateY(12px) scale(0.99);
  transform-origin: 50% 0%;
  overflow: hidden;
}
.film-strip:hover .strip-image {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.strip-image::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
  animation: sheen 4s ease-in-out infinite;
}
.strip-image-inner {
  position: absolute; inset: 0;
  padding: 28px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
}
@media (max-width: 800px) { .strip-image-inner { padding: 18px 22px; } }
.strip-image-tl,
.strip-image-tr,
.strip-image-bl,
.strip-image-br {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-d);
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.strip-image-tr { justify-content: flex-end; color: rgba(237,228,208,0.7); }
.strip-image-bl { align-items: flex-end; flex-direction: column; gap: 6px; }
.strip-image-br { justify-content: flex-end; align-items: flex-end; color: var(--stage-1); }
.strip-image-clip {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.025em;
  color: var(--on-d);
  text-transform: none;
  line-height: 1.0;
}
.strip-image-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237,228,208,0.65);
}
.strip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.7);
  display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
  margin-right: 8px;
}

.empty-state {
  padding: 80px 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  color: var(--on-d-mute);
}

/* ─── Work Index — sticky stack treatment ─── */
main.stack > .work-hero.stick { background: #0c0a08; }
main.stack > .filter-bar.stick { background: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   PROJECT CASE STUDY (editorial — natural scroll, no section takeover)
   ═══════════════════════════════════════════════════════════════════ */

.case-page { position: relative; background: var(--ink); }

.read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--stage-1);
  z-index: 999;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  mix-blend-mode: difference;
}

/* ── Header ─────────────────────────── */
.case-header {
  padding: 132px 0 0;
  background: var(--ink);
  position: relative;
}
.case-slug {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 42px;
}
.case-slug .sep { color: var(--on-d-faint); }
.case-slug .strong { color: var(--on-d); }

.case-title {
  margin: 0 0 32px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(72px, 11vw, 200px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--on-d);
}
body.font-bigshoulders .case-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.025em; }
body.font-bricolage   .case-title { font-family: var(--body); font-weight: 700; letter-spacing: -0.045em; }
.case-title .mask-line { display: block; line-height: 0.92; }
.case-title .case-sub {
  font-family: var(--serif, var(--display));
  font-style: italic;
  font-weight: 400;
  color: var(--on-d-mute);
  letter-spacing: -0.02em;
  padding-left: 0.08em;
}
.case-byline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-d-dim);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-d);
}
.case-byline .sep { color: var(--on-d-faint); }

.case-plate {
  margin: 56px 0 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.case-plate-stage {
  position: absolute; inset: 0;
  background-size: cover;
}
.case-plate-grain {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.case-plate-cap {
  position: absolute; left: 32px; right: 32px; bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d);
}
.case-plate-cap > :first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--stage-1); }
.case-plate-cap > :first-child .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.case-plate-cap > :last-child { color: rgba(237,228,208,0.7); letter-spacing: 0.06em; }

/* ── Two-column editorial layout ────── */
.case-twocol {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 96px;
}
.case-twocol-flip {
  grid-template-columns: 1fr 280px;
}
@media (max-width: 900px) {
  .case-twocol, .case-twocol-flip { grid-template-columns: 1fr; gap: 36px; }
}

.case-side {
  position: sticky;
  top: 100px;
}
.case-side-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-d-mute);
  margin-bottom: 18px;
}
.case-side-list { margin: 0; padding: 0; }
.case-side-row {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line-d);
}
.case-side-row dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-faint);
}
.case-side-row dd {
  margin: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--on-d);
  font-weight: 500;
  line-height: 1.4;
}

.case-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stage-1);
  margin-bottom: 24px;
}

.case-body { max-width: 70ch; }
.case-lead {
  font-family: var(--body);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--on-d);
  margin: 0 0 28px;
  font-weight: 400;
}
.case-lead .dropcap {
  float: left;
  font-family: var(--display);
  font-weight: 500;
  font-size: 5.4em;
  line-height: 0.88;
  margin: 0.04em 0.12em 0 -0.04em;
  color: var(--stage-1);
}
body.font-bigshoulders .case-lead .dropcap { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage   .case-lead .dropcap { font-family: var(--body); font-weight: 700; }
.case-lead-light {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--on-d);
  font-weight: 400;
}
.case-p {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-d-dim);
  margin: 0 0 22px;
  max-width: 68ch;
}

/* ── Pull quote ─────────────────────── */
.case-pull {
  padding: 96px 0;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
}
.case-pullquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--on-d);
  max-width: 26ch;
  position: relative;
}
body.font-bigshoulders .case-pullquote { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage   .case-pullquote { font-family: var(--body); font-weight: 600; letter-spacing: -0.03em; }
.case-pullquote em {
  font-style: normal;
}
.case-pullquote .dim { color: var(--on-d-mute); }
.case-pullquote .open-q,
.case-pullquote .close-q {
  color: var(--stage-1);
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
}
.case-pull-attr {
  margin-top: 28px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-d-mute);
}

/* ── "I led" sidebar list ───────────── */
.case-led {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.case-led li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line-d);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-d-dim);
}
.case-led li .num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--on-d-faint);
  padding-top: 3px;
}

/* ── Photo essay figures ────────────── */
.case-essay { padding: 24px 0 24px; background: var(--ink); }
.case-essay-pair { padding-top: 32px; padding-bottom: 32px; gap: 32px; align-items: stretch; }
.case-essay-pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .case-essay-pair { grid-template-columns: 1fr; } }

.case-figure {
  margin: 0;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.case-fig-full { padding: 24px 44px; }
.case-fig-full .case-figure-img { aspect-ratio: 16 / 7; }
.case-fig-half .case-figure-img { aspect-ratio: 4 / 3; }
@media (max-width: 800px) { .case-fig-full { padding: 12px 22px; } }

.case-figure-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #0a0606;
}
.case-figure-overlay {
  position: absolute; left: 24px; right: 24px; bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d);
  pointer-events: none;
}
.case-figure-overlay > :first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--stage-1); }
.case-figure-overlay > :first-child .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--stage-1);
  box-shadow: 0 0 10px rgba(255,88,36,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.case-figure-overlay > :last-child { color: rgba(237,228,208,0.65); letter-spacing: 0.06em; }

.case-figure figcaption {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-d-mute);
}
.case-figure figcaption .case-fig-num { color: var(--on-d-faint); }
.case-figure figcaption .case-fig-cap {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--on-d-dim);
  line-height: 1.45;
}

/* ── Cuesheet table ─────────────────── */
.case-runofshow {
  padding: 96px 0;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
}
.case-runhead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 800px) { .case-runhead { grid-template-columns: 1fr; gap: 24px; } }

.case-h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--on-d);
  max-width: 22ch;
}
body.font-bigshoulders .case-h2 { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage   .case-h2 { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }

.case-runhead-meta {
  display: flex; gap: 32px;
}
.case-runhead-meta > div { display: flex; flex-direction: column; gap: 4px; }
.case-runhead-meta .k {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.case-runhead-meta .v {
  font-family: var(--display); font-weight: 500;
  font-size: 28px; letter-spacing: -0.02em; color: var(--on-d);
  line-height: 1;
}

.case-cuesheet {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--on-d-dim);
}
.case-cuesheet th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-d);
  font-weight: 400;
}
.case-cuesheet td {
  padding: 18px 12px;
  border-bottom: 1px solid var(--line-d);
  vertical-align: top;
  line-height: 1.4;
}
.case-cuesheet td.tc { color: var(--on-d); font-variant-numeric: tabular-nums; white-space: nowrap; width: 11ch; }
.case-cuesheet td.cn { color: var(--stage-1); font-weight: 500; width: 8ch; }
.case-cuesheet td.ac .kicker {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-d-mute);
  padding: 3px 8px;
  border: 1px solid var(--line-d-2);
  border-radius: 999px;
}
.case-cuesheet td.nm {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: var(--on-d);
  letter-spacing: -0.005em;
  width: 18ch;
}
.case-cuesheet td.pt {
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--on-d-dim);
  letter-spacing: -0.005em;
  line-height: 1.5;
  max-width: 56ch;
}
.case-cuesheet td.lk {
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-d-mute);
}
@media (max-width: 1000px) {
  .case-cuesheet, .case-cuesheet thead, .case-cuesheet tbody, .case-cuesheet tr, .case-cuesheet td, .case-cuesheet th { display: block; }
  .case-cuesheet thead { display: none; }
  .case-cuesheet tr { padding: 18px 0; border-bottom: 1px solid var(--line-d); }
  .case-cuesheet td { padding: 4px 0; border: 0; }
}

.case-closer { padding: 48px 0 96px; background: var(--ink); }

/* ── Receipts ───────────────────────── */
.case-receipts {
  padding: 96px 0;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
}
.case-receipts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .case-receipts-row { grid-template-columns: 1fr 1fr; gap: 36px; } }

.case-receipts-cell {
  padding-top: 18px;
  border-top: 1px solid var(--line-d-2);
}
.r-k {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-d-mute);
  margin-bottom: 18px;
}
.r-n {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--on-d);
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-bottom: 14px;
}
body.font-bigshoulders .r-n { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage   .r-n { font-family: var(--body); font-weight: 700; letter-spacing: -0.05em; }
.r-n .unit { color: var(--stage-1); font-size: 0.28em; font-weight: 500; vertical-align: top; margin-left: 2px; letter-spacing: 0.04em; }
.r-l {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--on-d-dim);
  max-width: 28ch;
}

/* ── Press ──────────────────────────── */
.case-press {
  padding: 96px 0;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
}
.case-press-list { margin: 0; padding: 0; list-style: none; }
.case-press-item {
  padding: 36px 0;
  border-top: 1px solid var(--line-d);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
}
@media (max-width: 800px) { .case-press-item { grid-template-columns: 1fr; gap: 12px; } }
.case-press-item .src {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.case-press-item blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--on-d-dim);
}
body.font-bigshoulders .case-press-item blockquote { font-family: var(--display-alt); font-weight: 700; letter-spacing: -0.015em; }
body.font-bricolage   .case-press-item blockquote { font-family: var(--body); font-weight: 500; letter-spacing: -0.02em; }
.case-press-item blockquote .q { color: var(--stage-1); }
.case-press-item blockquote .mark { color: var(--on-d); font-style: normal; }

/* ── Credits ────────────────────────── */
.case-credits {
  padding: 96px 0;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
}
.case-credits-head { margin-bottom: 48px; }
.case-credits-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 48px;
}
@media (max-width: 800px) { .case-credits-cols { grid-template-columns: 1fr; gap: 16px; } }
.case-credits-col { display: flex; flex-direction: column; }
.cr-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-d);
}
.cr-k {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
}
.cr-v {
  font-family: var(--body); font-size: 14px;
  color: var(--on-d); letter-spacing: -0.005em; line-height: 1.4;
}

/* ── Next ───────────────────────────── */
.case-next {
  padding: 120px 0 80px;
  background: var(--ink-2);
  border-top: 1px solid var(--line-d-2);
}
.case-next-eyebrow {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 32px;
}
.case-next-eyebrow .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 240px; }
.case-next-link {
  display: block;
  padding: 36px 0;
  border-top: 1px solid var(--line-d-2);
  border-bottom: 1px solid var(--line-d-2);
}
.case-next-row {
  display: grid;
  grid-template-columns: 80px 1fr 220px;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) { .case-next-row { grid-template-columns: 50px 1fr; } .case-next-meta { display: none; } }

.case-next-num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.025em;
  color: var(--on-d-mute);
  line-height: 1;
}
.case-next-num .of { color: var(--on-d-faint); font-size: 0.5em; }
body.font-bigshoulders .case-next-num { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage   .case-next-num { font-family: var(--body); font-weight: 700; }

.case-next-title {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--on-d);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
body.font-bigshoulders .case-next-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage   .case-next-title { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }
.case-next-title .arrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--stage-1);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  align-self: center;
}
.case-next-link:hover .case-next-title { transform: translateX(10px); }
.case-next-link:hover .case-next-title .arrow { opacity: 1; transform: translateX(0); }

.case-next-meta {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
  line-height: 1.6;
}
.case-next-meta .strong { color: var(--on-d); }

.case-next-foot {
  margin-top: 36px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-d-mute);
}
.case-next-foot a { color: inherit; }
.case-next-foot a:hover { color: var(--on-d); }

/* Reveal helpers for table rows */
.case-cuesheet tr.reveal { opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.case-cuesheet tr.reveal.is-in { opacity: 1; transform: none; }

/* ───────────────── Sticky-stack section backgrounds ───────────────── */
/* Each "stick" section needs an opaque background so it covers the one beneath. */
main.stack > .section.stick { background: var(--ink); }
main.stack > .hero.stick { background: #0c0a08; }
main.stack > .work.stick { background: var(--bone); }
main.stack > .tease.stick { background: var(--bone-1); }

/* Tighten dense sections so they fit closer to 100vh when stuck */
main.stack > .statement.stick { padding: clamp(120px, 16vh, 180px) 0; min-height: 100vh; }
main.stack > .numbers-wrap.stick {
  /* 380vh tall = ~280vh of pin time. --p (written by useNumbersProgress)
     advances 0→1 over that window, sequencing: role title-card intro
     (p 0→0.28) → "By the numbers" reveal → left→right stat wave with a
     PEAK HOLD on each → finale where all five light up together. */
  padding: 0;
  min-height: 380vh;
}
/* Inner stage stays pinned at the viewport top for the full pin window. */
.numbers-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 10vh, 120px) 0 clamp(80px, 10vh, 120px);
  box-sizing: border-box;
}
main.stack > .contact.stick { padding: clamp(120px, 16vh, 180px) 0 40px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
main.stack > .tease.stick { padding: clamp(80px, 12vh, 140px) 0; min-height: 100vh; }
main.stack > .wid.stick.is-light {
  background: var(--bone);
  /* Taller than the viewport so the section stays pinned a bit longer
     before the next section rises over it (a longer "hold"). */
  min-height: 145vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vh, 120px) 0;
}
main.stack > .wid.stick.is-light[data-covered] { transform: none; filter: none; }

/* Section z-index ladder so later sticky cards paint over earlier ones */
main.stack > .section:nth-of-type(1) { z-index: 1; }
main.stack > .section:nth-of-type(2) { z-index: 2; }
main.stack > .section:nth-of-type(3) { z-index: 3; }
main.stack > .section:nth-of-type(4) { z-index: 4; }
main.stack > .section:nth-of-type(5) { z-index: 5; }
main.stack > .section:nth-of-type(6) { z-index: 6; }
main.stack > .section:nth-of-type(7) { z-index: 7; }
main.stack > .section:nth-of-type(8) { z-index: 8; }
main.stack > .section:nth-of-type(9) { z-index: 9; }
main.stack > .section:nth-of-type(10) { z-index: 10; }
main.stack > .section:nth-of-type(11) { z-index: 11; }
main.stack > .section:nth-of-type(12) { z-index: 12; }
main.stack > .section:nth-of-type(13) { z-index: 13; }
main.stack > .section:nth-of-type(14) { z-index: 14; }

/* The footer must paint ABOVE every sticky section so the tall, light-bg
   "What I Do" section can't bleed its bone color over the footer at the very
   bottom of the page. */
main.stack > .footer { position: relative; z-index: 30; background: var(--ink); }

/* Subtle drifting charcoal gradient on statement cards — adds atmosphere
   behind the type without competing with it. Specificity bumped with the
   .section.statement-card.stick chain so it wins over the generic
   .section.stick { background: var(--ink) } shorthand above. */
main.stack > .section.statement-card.stick {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 60% 50% at 22% 32%, rgba(232, 226, 212, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 78% 68%, rgba(232, 226, 212, 0.035) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(232, 226, 212, 0.02) 0%, transparent 70%);
  background-size: 220% 220%, 240% 240%, 200% 200%;
  background-repeat: no-repeat;
  animation: stmtBgDrift 32s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
@keyframes stmtBgDrift {
  0%   { background-position: 0% 30%, 100% 70%, 50% 50%; }
  100% { background-position: 100% 70%, 0% 30%, 50% 50%; }
}

/* Subtle "card behind" treatment when section is being covered by the next */
.stick-card {
  transition: filter .35s ease;
  will-change: transform, filter;
}
.stick-card[data-covered] {
  transform: scale(calc(1 + var(--cover, 0) * 0.08));
  filter: blur(calc(var(--cover, 0) * 8px)) brightness(calc(1 - var(--cover, 0) * 0.30));
  transform-origin: 50% 50%;
  transition: none;
}

/* Sharp top edge — no fade mask on entering cards */

/* ───────────────── Reel modal (fullscreen popup) ───────────────── */
.reel-modal {
  position: fixed; inset: 0;
  z-index: 100000;
  background: rgba(5, 4, 3, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  animation: reelModalIn .45s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 800px) { .reel-modal { padding: 16px; } }
@keyframes reelModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reel-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.6);
  animation: reelFrameIn .65s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes reelFrameIn {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.reel-modal-frame > .reel-stage { inset: 0; }

/* ─── Reel modal: minimal player controls ─────────────
   Slim pill at the bottom-center holding play/pause, mute/unmute, and
   a volume slider. No timecode, no labels, no editorial chrome. */
.reel-modal-controls {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: rgba(8, 6, 4, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(237, 228, 208, 0.18);
  border-radius: 999px;
  color: var(--on-d);
}
.reel-ctl-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-d);
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.reel-ctl-btn:hover { background: rgba(237, 228, 208, 0.12); color: var(--stage-1); }
.reel-ctl-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 3px;
  background: rgba(237, 228, 208, 0.22);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.reel-ctl-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--stage-1);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255, 88, 36, 0.18);
}
.reel-ctl-volume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--stage-1);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255, 88, 36, 0.18);
}

/* Close button — tiny X in the top-right corner of the frame */
.reel-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  appearance: none;
  background: rgba(8, 6, 4, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--on-d);
  border: 1px solid rgba(237, 228, 208, 0.25);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.reel-modal-close:hover { background: rgba(237, 228, 208, 0.12); border-color: rgba(237, 228, 208, 0.55); color: var(--stage-1); }
@media (max-width: 800px) {
  .reel-modal-controls { gap: 10px; padding: 8px 12px; bottom: 18px; }
  .reel-ctl-volume { width: 70px; }
  .reel-modal-close { top: 12px; right: 12px; width: 30px; height: 30px; }
}

/* When the reel modal is open, restore the native OS cursor and hide the
   custom dot — otherwise body.custom-cursor's `cursor: none` makes the cursor
   invisible inside the modal (and the dot is buried behind the backdrop). */
body.custom-cursor:has(.reel-modal) { cursor: auto; }
body.custom-cursor:has(.reel-modal) .reel-modal,
body.custom-cursor:has(.reel-modal) .reel-modal * { cursor: auto; }
body.custom-cursor:has(.reel-modal) .reel-modal a,
body.custom-cursor:has(.reel-modal) .reel-modal button,
body.custom-cursor:has(.reel-modal) .reel-modal [data-hover] { cursor: pointer; }
body.custom-cursor:has(.reel-modal) .cursor-dot { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE — "Aurora — A Residency in Light"
   Reuses .vert-label, .meta, .mask-line, .reveal, .reel-em, .grain,
   .cursor-dot, .stick-card, .swatch-*, .container, and the sticky stack.
   ═══════════════════════════════════════════════════════════════════ */

main.stack > .proj-hero.stick    { background: #0c0a08; }
main.stack > .proj-brief.stick   { background: var(--bone); }
main.stack > .proj-cuesheet.stick{ background: var(--ink); }
main.stack > .proj-plates.stick  { background: var(--ink-1); }
main.stack > .proj-numbers.stick { background: var(--ink); }
main.stack > .proj-credits.stick { background: var(--bone-1); }
main.stack > .proj-next.stick    { background: #0c0a08; }

/* ─── Hero ──────────────────────────────── */
.proj-hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 110px 0 56px;
  background: #0c0a08;
  isolation: isolate;
}
.proj-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.proj-hero-stage {
  position: absolute; inset: -4%;
  background-color: #0a0806;
  background-image:
    radial-gradient(ellipse 30% 36% at 14% 22%, rgba(255,88,36,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 28% 30% at 86% 18%, rgba(255,40,118,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 36% 32% at 50% 88%, rgba(255,183,80,0.30) 0%, transparent 65%),
    radial-gradient(ellipse 26% 32% at 78% 72%, rgba(40,88,255,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 24% 30% at 16% 80%, rgba(185,69,255,0.28) 0%, transparent 60%),
    linear-gradient(180deg, #1a0c08 0%, #050505 100%);
  background-size: 220% 220%;
  filter: blur(34px) saturate(1.05);
  transform: scale(1.1);
  animation: stageDrift 22s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.proj-hero-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.proj-hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.55) 100%);
}

.proj-hero-top {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 24px;
  padding: 0 44px;
}
@media (max-width: 900px) { .proj-hero-top { grid-template-columns: 1fr; gap: 12px; padding: 0 22px; } }
.proj-crumbs {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.proj-crumbs a { color: var(--on-d-mute); transition: color .25s ease; }
.proj-crumbs a:hover { color: var(--on-d); }
.proj-crumbs .sep { margin: 0 8px; color: var(--on-d-faint); }
.proj-crumbs .strong { color: var(--on-d); }

.proj-plate {
  text-align: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
}
.proj-plate .lt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
.proj-plate .strong { color: var(--on-d); }

.proj-tc {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.proj-tc .strong { color: var(--on-d); }

.proj-hero-titlewrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
  position: relative;
  z-index: 2;
}
.proj-hero-title {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 168px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--on-d);
  pointer-events: none;
}
.proj-hero-title .mask-line { display: block; line-height: 0.92; }
body.font-bigshoulders .proj-hero-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage    .proj-hero-title { font-family: var(--body);        font-weight: 700; letter-spacing: -0.045em; }

.proj-hero-title .reel-em {
  background-color: var(--on-d);
  background-image:
    radial-gradient(circle at 18% 32%, var(--stage-1) 0%, transparent 28%),
    radial-gradient(circle at 78% 22%, var(--stage-2) 0%, transparent 26%),
    radial-gradient(circle at 42% 78%, var(--stage-3) 0%, transparent 30%),
    radial-gradient(circle at 88% 68%, var(--stage-4) 0%, transparent 28%),
    radial-gradient(circle at  8% 88%, var(--stage-6) 0%, transparent 24%);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: reelDrift 12s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}

.proj-hero-sub {
  position: relative; z-index: 2;
  text-align: center;
  margin: 4px auto 0;
  max-width: 60ch;
  padding: 0 22px;
  font-family: var(--body);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.45;
  color: var(--on-d-dim);
}
.proj-hero-sub .em { color: var(--on-d); }

.proj-hero-bottom {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 220px;
  gap: 32px;
  padding: 0 44px;
  align-items: end;
}
@media (max-width: 1100px) { .proj-hero-bottom { grid-template-columns: repeat(2, 1fr); padding: 0 22px; gap: 22px; } }
.proj-hero-bottom .h-cell .k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center;
}
.proj-hero-bottom .h-cell .k .num { color: var(--stage-1); }
.proj-hero-bottom .h-cell .v {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-d);
}

/* ─── Brief (light editorial) ──────────── */
.proj-brief {
  background: var(--bone);
  color: var(--on-l);
  padding: clamp(140px, 18vh, 200px) 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proj-brief .lead {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-l-mute);
  margin-bottom: 56px;
  display: flex; align-items: center; gap: 14px;
}
.proj-brief .lead .rule { flex: 1; height: 1px; background: var(--line-l); max-width: 240px; }
.proj-brief .lead .strong { color: var(--on-l); }
.proj-brief-body {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.10;
  letter-spacing: -0.025em;
  color: var(--on-l);
  max-width: 22ch;
}
body.font-bigshoulders .proj-brief-body { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage    .proj-brief-body { font-family: var(--body);        font-weight: 700; letter-spacing: -0.04em; }
.proj-brief-body .dim { color: var(--on-l-mute); }
.proj-brief-body .reel-em {
  background-image:
    radial-gradient(circle at 22% 40%, var(--stage-1) 0%, transparent 30%),
    radial-gradient(circle at 78% 30%, var(--stage-2) 0%, transparent 28%),
    radial-gradient(circle at 60% 80%, var(--stage-3) 0%, transparent 30%);
  background-color: var(--on-l);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: reelDrift 10s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.proj-brief-footer {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-l);
}
@media (max-width: 900px) { .proj-brief-footer { grid-template-columns: repeat(2, 1fr); } }
.proj-brief-footer .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-l-mute); margin-bottom: 10px; }
.proj-brief-footer .v { font-family: var(--body); font-size: 15px; color: var(--on-l); line-height: 1.45; }

/* ─── Cuesheet (run-of-show) ──────────── */
.proj-cuesheet {
  background: var(--ink);
  color: var(--on-d);
  padding: clamp(120px, 16vh, 180px) 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.proj-cuesheet-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-d);
  margin-bottom: 16px;
}
@media (max-width: 900px) { .proj-cuesheet-head { grid-template-columns: 1fr; gap: 12px; } }
.proj-cuesheet-head .lead {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  line-height: 1.6;
}
.proj-cuesheet-head .lead .strong { color: var(--on-d); }
.proj-cuesheet-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--on-d);
  text-align: center;
  margin: 0;
}
body.font-bigshoulders .proj-cuesheet-h { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage    .proj-cuesheet-h { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }

.proj-cuesheet-meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
  text-align: right;
  line-height: 1.6;
}
.proj-cuesheet-meta .strong { color: var(--on-d); }

.cue-list { display: flex; flex-direction: column; }
.cue-row {
  display: grid;
  grid-template-columns: 80px 70px 1fr 1.2fr 160px;
  gap: 28px;
  padding: 28px 0;
  align-items: center;
  border-bottom: 1px solid var(--line-d);
  transition: background .4s ease;
}
.cue-row:hover { background: rgba(237,228,208,0.025); }
@media (max-width: 900px) {
  .cue-row { grid-template-columns: 60px 1fr; gap: 14px; padding: 22px 0; }
  .cue-row .cue-cuepoint, .cue-row .cue-look { display: none; }
}
.cue-tc {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--stage-1);
  font-variant-numeric: tabular-nums;
}
.cue-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--on-d-mute);
}
.cue-act {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--on-d);
  display: flex; flex-direction: column; gap: 6px;
}
body.font-bigshoulders .cue-act { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage    .cue-act { font-family: var(--body); font-weight: 700; letter-spacing: -0.04em; }
.cue-act .kicker {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
}
.cue-cuepoint {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-d-dim);
  max-width: 48ch;
}
.cue-look {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d-mute);
  text-align: right;
}
.cue-look .swatch-bar {
  display: flex; gap: 4px; height: 14px;
}
.cue-look .swatch-bar i {
  width: 18px; height: 14px; display: block;
}

/* ─── Plates (gallery of stage placeholders) ── */
.proj-plates {
  background: var(--ink-1);
  padding: clamp(120px, 16vh, 180px) 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.proj-plates-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-d);
  margin-bottom: 36px;
}
@media (max-width: 900px) { .proj-plates-head { grid-template-columns: 1fr; } }
.proj-plates-head .lead {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
}
.proj-plates-head .lead .strong { color: var(--on-d); }
.proj-plates-head .counter {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  text-align: right;
}
.proj-plates-head .counter .strong { color: var(--on-d); }

.proj-plate-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  grid-auto-rows: minmax(180px, auto);
}
.plate {
  position: relative;
  overflow: hidden;
  background: #0a0806;
  min-height: 260px;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.plate:hover { transform: translateY(-3px); }
.plate.p1 { grid-column: 1 / span 8; aspect-ratio: 16 / 9; }
.plate.p2 { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
.plate.p3 { grid-column: 1 / span 4; aspect-ratio: 1 / 1; }
.plate.p4 { grid-column: 5 / span 4; aspect-ratio: 1 / 1; }
.plate.p5 { grid-column: 9 / span 4; aspect-ratio: 1 / 1; }
.plate.p6 { grid-column: 1 / span 12; aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
  .proj-plate-grid { grid-template-columns: 1fr; }
  .plate.p1, .plate.p2, .plate.p3, .plate.p4, .plate.p5, .plate.p6 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

.plate-inner {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 22px 26px;
  pointer-events: none;
  z-index: 2;
}
.plate-tl, .plate-tr, .plate-bl, .plate-br {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-d);
  display: inline-flex; align-items: center; gap: 10px;
}
.plate-top { display: flex; justify-content: space-between; align-items: flex-start; }
.plate-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.plate-tl .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stage-1);
  box-shadow: 0 0 12px rgba(255,88,36,0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.plate-tr { color: rgba(237,228,208,0.65); }
.plate-bl { flex-direction: column; align-items: flex-start; gap: 4px; }
.plate-bl .clip {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -0.02em; color: var(--on-d); text-transform: none; line-height: 1;
}
.plate-bl .clip-meta { color: rgba(237,228,208,0.65); }
.plate-br { color: var(--stage-1); }
.plate::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  animation: sheen 5s ease-in-out infinite;
}

/* ─── Project numbers ─────────────────── */
.proj-numbers {
  background: var(--ink);
  padding: clamp(100px, 14vh, 150px) 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.proj-numbers-head {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 56px;
  display: flex; gap: 16px; align-items: center;
}
.proj-numbers-head .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 240px; }
.proj-numbers-head .strong { color: var(--on-d); }

/* ─── Credits ─────────────────────────── */
.proj-credits {
  background: var(--bone-1);
  color: var(--on-l);
  padding: clamp(120px, 16vh, 180px) 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.proj-credits-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-l);
  margin-bottom: 56px;
}
@media (max-width: 900px) { .proj-credits-head { grid-template-columns: 1fr; gap: 12px; } }
.proj-credits-head .lead,
.proj-credits-head .right {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-l-mute);
  line-height: 1.6;
}
.proj-credits-head .right { text-align: right; }
.proj-credits-head .strong { color: var(--on-l); }
.proj-credits-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--on-l);
  text-align: center;
  margin: 0;
}
body.font-bigshoulders .proj-credits-h { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage    .proj-credits-h { font-family: var(--body); font-weight: 700; }

.credits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 56px;
}
@media (max-width: 900px) { .credits-grid { grid-template-columns: 1fr; gap: 6px; } }
.credit-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-l);
  align-items: baseline;
}
.credit-row .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-l-mute);
}
.credit-row .v {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-l);
  line-height: 1.4;
}

.press-strip {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line-l);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 900px) { .press-strip { grid-template-columns: 1fr; gap: 24px; } }
.press-item .src {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-l-mute);
  margin-bottom: 12px;
}
.press-item .q {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--on-l);
}
.press-item .q .mark { color: var(--stage-1); }

/* ─── Next project ────────────────────── */
.proj-next {
  background: #0c0a08;
  color: var(--on-d);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.proj-next-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0a0806;
  background-image:
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(255,88,36,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 32% 40% at 20% 80%, rgba(40,88,255,0.28) 0%, transparent 60%),
    linear-gradient(180deg, #1a0c08 0%, #050505 100%);
  background-size: 220% 220%;
  filter: blur(34px) saturate(1.05);
  transform: scale(1.1);
  animation: stageDrift 26s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.proj-next-vignette {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.65) 100%);
}
.proj-next-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 60px;
}
.proj-next-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.proj-next-eyebrow .rule { flex: 1; height: 1px; background: var(--line-d); max-width: 220px; }
.proj-next-eyebrow .strong { color: var(--on-d); }

.proj-next-link {
  display: block;
  position: relative;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  padding: 56px 0;
  margin-top: 28px;
  transition: padding .5s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
.proj-next-link:hover { padding: 68px 0; }
.proj-next-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) { .proj-next-row { grid-template-columns: 60px 1fr; } .proj-next-row .right { display: none; } }
.proj-next-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--on-d-mute);
}
.proj-next-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--on-d);
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.proj-next-link:hover .proj-next-title { transform: translateX(18px); }
body.font-bigshoulders .proj-next-title { font-family: var(--display-alt); font-weight: 900; letter-spacing: -0.02em; }
body.font-bricolage    .proj-next-title { font-family: var(--body);        font-weight: 700; letter-spacing: -0.045em; }
.proj-next-title .arrow {
  display: inline-block;
  opacity: 0; transform: translateX(-18px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  font-family: var(--mono); font-size: 13px; font-weight: 400;
  color: var(--stage-1); letter-spacing: 0.16em;
}
.proj-next-link:hover .proj-next-title .arrow { opacity: 1; transform: translateX(0); }
.proj-next-row .right {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
  text-align: right;
}
.proj-next-row .right .strong { color: var(--on-d); }

.proj-next-foot {
  position: relative; z-index: 2;
  margin-top: 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-d-mute);
}
.proj-next-foot a { color: var(--on-d-mute); transition: color .25s ease; }
.proj-next-foot a:hover { color: var(--on-d); }

/* ─────────────── Project case study ("Big Screen") ─────────────── */
.pc-page { background: var(--ink); color: var(--on-d); }
.pc-temp { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--on-d-mute); }

/* Media slot — fills its parent; parent controls size. */
.pc-media { position: absolute; inset: 0; overflow: hidden; background: #050403; }
.pc-media video,
.pc-media .pc-media-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-media .pc-media-img { background-position: center; background-repeat: no-repeat; background-size: cover; }
.pc-media-controls {
  position: absolute; bottom: 18px; right: 18px; z-index: 4;
  display: flex; gap: 8px; opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.pc-media:hover .pc-media-controls { opacity: 1; transform: none; }
.pc-mc-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d); background: rgba(8,6,5,0.55); border: 1px solid rgba(237,228,208,0.25);
  border-radius: 999px; padding: 7px 13px; cursor: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s ease, background .3s ease;
}
.pc-mc-btn:hover { border-color: var(--stage-1); }
.pc-mc-btn.is-on { border-color: var(--stage-1); color: var(--stage-1); }
.pc-media-cap {
  position: absolute; left: 18px; bottom: 18px; z-index: 4; max-width: 60%;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.4;
  color: var(--on-d-dim); text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

/* Hero — full-bleed media with a curved "Sphere" framing + overlay. */
.pc-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: #050403; }
.pc-hero-media {
  position: absolute; inset: 0;
  border-bottom-left-radius: 50% 9vh;
  border-bottom-right-radius: 50% 9vh;
  overflow: hidden;
  transform: scale(1.02);
}
.pc-hero-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, transparent 0%, rgba(5,4,3,0.35) 70%, rgba(5,4,3,0.85) 100%),
    linear-gradient(180deg, rgba(5,4,3,0.45) 0%, transparent 22%, transparent 55%, rgba(5,4,3,0.9) 100%);
}
.pc-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: clamp(64px, 12vh, 140px); z-index: 5;
  padding: 0 clamp(24px, 5vw, 96px); pointer-events: none;
}
.pc-hero-tags {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-d-dim); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px;
}
.pc-hero-tags .sep { color: var(--stage-1); }
.pc-hero-title { margin: 0; }
.pc-hero-title .mask-line { display: block; overflow: hidden; }
.pc-hero-title .mask-line > span {
  display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.2,1);
  font-family: var(--display); font-weight: 700; line-height: 0.92; letter-spacing: -0.04em;
  font-size: clamp(48px, 11vw, 184px); color: var(--on-d);
}
.pc-hero-title .mask-line.is-in > span,
.pc-hero-title .mask-line.is-in span { transform: translateY(0); }
body.font-bigshoulders .pc-hero-title .mask-line > span { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .pc-hero-title .mask-line > span { font-family: var(--body); font-weight: 700; }
.pc-hero-tagline {
  margin: 18px 0 0; max-width: 30ch;
  font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.8vw, 26px);
  letter-spacing: -0.015em; line-height: 1.25; color: var(--on-d-dim);
}
.pc-scrollcue {
  position: absolute; left: 50%; bottom: 26px; z-index: 6; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-d-mute);
}
.pc-scrollcue-line { width: 1px; height: 40px; background: linear-gradient(var(--on-d-mute), transparent); }

/* Facts bar — thin band of label/value pairs under the hero. */
.pc-facts { background: var(--ink-1); border-bottom: 1px solid var(--line-d); }
.pc-facts-inner {
  max-width: 1400px; margin: 0 auto; padding: clamp(20px, 3vh, 36px) clamp(24px, 5vw, 96px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
@media (max-width: 900px) { .pc-facts-inner { grid-template-columns: 1fr 1fr; gap: 24px 32px; } }
@media (max-width: 540px) { .pc-facts-inner { grid-template-columns: 1fr; } }
.pc-fact-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-d-mute); margin-bottom: 8px;
}
.pc-fact-v {
  font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: -0.01em; line-height: 1.3; color: var(--on-d);
}

/* Text breather — compact editorial copy, optionally over a dark media still.
   Body is set in the readable body font at a comfortable reading size (not
   giant display type) so multi-sentence sections stay short to scroll. */
.pc-breather { position: relative; overflow: hidden; background: var(--ink);
  padding: clamp(56px, 9vh, 104px) clamp(24px, 5vw, 96px); }
.pc-breather-bg { position: absolute; inset: 0; z-index: 0; }
.pc-breather-bg .pc-media { filter: grayscale(1) brightness(0.5); transform: scale(1.05); }
.pc-breather-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(12,10,8,0.85), rgba(12,10,8,0.7)); }
.pc-breather-inner { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; }
.pc-breather-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stage-1); margin-bottom: 22px;
}
.pc-breather-p {
  font-family: var(--body); font-weight: 400; letter-spacing: 0;
  font-size: clamp(15px, 1.15vw, 18.5px); line-height: 1.6;
  color: var(--on-d-dim); margin: 0 0 1.05em; max-width: 60ch;
}
/* Lead paragraph: a short display-type pull-statement above the body copy. */
.pc-breather-p.is-lead {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.28;
  color: var(--on-d); max-width: 26ch; margin-bottom: 0.7em;
}
body.font-bigshoulders .pc-breather-p.is-lead { font-family: var(--display-alt); font-weight: 700; }

/* Feature moment — single strongest asset, full-bleed, tall. */
.pc-feature { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #050403; }
.pc-feature .pc-media-cap { left: clamp(24px, 5vw, 96px); bottom: clamp(24px, 5vh, 56px); font-size: 12px; max-width: 40ch; }

/* Approach — compact editorial copy paired with a numbered "what I led" list. */
.pc-approach { background: var(--ink); padding: clamp(56px, 10vh, 120px) clamp(24px, 5vw, 96px); }
.pc-approach-inner {
  max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
@media (max-width: 900px) { .pc-approach-inner { grid-template-columns: 1fr; gap: 40px; } }
.pc-approach-solo .pc-approach-inner { grid-template-columns: 1fr; max-width: 920px; }
.pc-approach-solo .pc-approach-body .pc-breather-p { max-width: 60ch; }
.pc-approach-body .pc-breather-p { max-width: 52ch; font-size: clamp(15px, 1.15vw, 18.5px); }
.pc-approach-body .pc-breather-p.is-lead { max-width: 26ch; font-size: clamp(20px, 2.1vw, 30px); }
.pc-led-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-d-mute); margin-bottom: 24px; padding-top: 8px;
}
.pc-led-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pc-led-item { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--line-d); padding-top: 18px; }
.pc-led-n { font-family: var(--mono); font-size: 12px; color: var(--stage-1); flex-shrink: 0; }
.pc-led-t {
  font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--on-d);
}

/* Selected work — horizontal reel. Section height is set in JS; the pin stays
   fixed at viewport top while the track translates left as you scroll. */
.pc-gallery { position: relative; background: var(--ink-1); }
.pc-gallery-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.pc-gallery-head {
  position: absolute; top: clamp(28px, 5vh, 56px); left: clamp(24px, 5vw, 96px);
  right: clamp(24px, 5vw, 96px); z-index: 4; display: flex; justify-content: space-between; align-items: baseline;
}
.pc-gallery-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-d-mute); }
.pc-gallery-track {
  display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 clamp(24px, 5vw, 96px);
  width: max-content; will-change: transform;
}
.pc-gallery-item { margin: 0; flex-shrink: 0; cursor: zoom-in; }
.pc-gallery-media {
  position: relative; width: clamp(320px, 56vw, 880px); height: clamp(280px, 62vh, 620px);
  border-radius: 12px; overflow: hidden; background: #050403;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
/* Clickable affordance: lift + dim the image and reveal a "View" badge. */
.pc-gallery-item:hover .pc-gallery-media {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.pc-gallery-item:hover .pc-gallery-media .pc-media { filter: brightness(0.6); }
.pc-gallery-media .pc-media { transition: filter .4s ease; }
.pc-gallery-zoom {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; transform: scale(0.9);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  color: var(--on-d);
}
.pc-gallery-item:hover .pc-gallery-zoom { opacity: 1; transform: scale(1); }
.pc-zoom-icon {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(237,228,208,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: rgba(8,6,5,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pc-zoom-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
}

/* ── Lightbox (click-to-enlarge) ───────────────────────── */
.pc-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(5,4,3,0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: zoom-out;
  opacity: 0; animation: pcLightboxIn .28s ease forwards;
}
@keyframes pcLightboxIn { to { opacity: 1; } }
/* Full-screen takeover: the media fills the viewport, scaled to fit while
   preserving its aspect ratio (no cropping, no square box). */
.pc-lightbox-media {
  width: 100vw; height: 100vh;
  object-fit: contain; display: block;
  animation: pcLightboxZoom .32s cubic-bezier(.2,.7,.2,1);
}
@keyframes pcLightboxZoom { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pc-lightbox-close {
  position: fixed; top: 22px; right: 26px; z-index: 2;
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(8,6,5,0.6); border: 1px solid rgba(237,228,208,0.3);
  color: var(--on-d); font-size: 16px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s ease, transform .3s ease;
}
.pc-lightbox-close:hover { border-color: var(--stage-1); transform: rotate(90deg); }
/* When the dot cursor is on, hide native cursors but keep zoom hints sensible */
body.custom-cursor .pc-gallery-item,
body.custom-cursor .pc-lightbox,
body.custom-cursor .pc-lightbox-close { cursor: none; }
@media (hover: none) {
  /* Touch devices: fall back to native horizontal scroll, no pin. */
  .pc-gallery { height: auto !important; }
  .pc-gallery-pin { position: relative; height: auto; padding: clamp(64px,10vh,96px) 0; }
  .pc-gallery-track { overflow-x: auto; transform: none !important; scroll-snap-type: x mandatory; }
  .pc-gallery-item { scroll-snap-align: center; }
}

/* Impact — big light-up metric numbers + an outcome note. */
.pc-impact { background: var(--ink); padding: clamp(96px, 16vh, 200px) clamp(24px, 5vw, 96px); position: relative; overflow: hidden; }
.pc-impact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 25% 30%, rgba(255,88,36,0.10), transparent 65%);
}
.pc-impact-inner { position: relative; max-width: 1300px; margin: 0 auto; }
.pc-impact-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 56px);
  margin: 40px 0 48px;
}
@media (max-width: 900px) { .pc-impact-row { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 520px) { .pc-impact-row { grid-template-columns: 1fr; } }
.pc-metric-n {
  font-family: var(--display); font-weight: 700; font-size: clamp(56px, 8vw, 132px);
  letter-spacing: -0.045em; line-height: 0.9;
}
body.font-bigshoulders .pc-metric-n { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .pc-metric-n { font-family: var(--body); font-weight: 700; }
.pc-metric-suffix { font-size: 0.4em; margin-left: 2px; vertical-align: top; }
.pc-metric-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d-mute); margin-top: 14px; line-height: 1.4; max-width: 22ch;
}
.pc-impact-note {
  font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2.2vw, 32px);
  letter-spacing: -0.02em; line-height: 1.25; color: var(--on-d); max-width: 32ch; margin: 0;
}

/* Credits — role → name pairs in a multi-column grid. */
.pc-credits { background: var(--ink-1); padding: clamp(80px, 12vh, 160px) clamp(24px, 5vw, 96px); border-top: 1px solid var(--line-d); }
.pc-credits-inner { max-width: 1300px; margin: 0 auto; }
.pc-credits-grid {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 56px;
}
@media (max-width: 760px) { .pc-credits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pc-credits-grid { grid-template-columns: 1fr; } }
.pc-credit { border-top: 1px solid var(--line-d); padding-top: 14px; }
.pc-credit-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d-mute); margin-bottom: 6px;
}
.pc-credit-v { font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.1vw, 17px); color: var(--on-d); }

/* Next project — full-bleed media teaser + footer row. */
.pc-next { background: var(--ink); }
.pc-next-link { display: block; position: relative; height: 70vh; min-height: 460px; overflow: hidden; text-decoration: none; }
.pc-next-media { position: absolute; inset: 0; }
.pc-next-media .pc-media { filter: grayscale(0.6) brightness(0.55); transition: filter .6s ease, transform .6s ease; transform: scale(1.04); }
.pc-next-link:hover .pc-next-media .pc-media { filter: grayscale(0) brightness(0.8); transform: scale(1.0); }
.pc-next-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(12,10,8,0.6), rgba(12,10,8,0.5) 50%, rgba(12,10,8,0.9)); }
.pc-next-overlay { position: absolute; z-index: 3; left: clamp(24px, 5vw, 96px); bottom: clamp(48px, 9vh, 100px); }
.pc-next-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stage-1); margin-bottom: 16px; }
.pc-next-title {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 120px);
  letter-spacing: -0.04em; line-height: 0.92; color: var(--on-d); display: flex; align-items: center; gap: 0.3em;
}
body.font-bigshoulders .pc-next-title { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .pc-next-title { font-family: var(--body); font-weight: 700; }
.pc-next-arrow { color: var(--stage-1); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.pc-next-link:hover .pc-next-arrow { transform: translateX(16px); }
.pc-next-tagline { margin: 16px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.6vw, 22px); color: var(--on-d-dim); }
.pc-next-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: clamp(28px, 5vh, 48px) clamp(24px, 5vw, 96px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-d-mute);
  border-top: 1px solid var(--line-d);
}
.pc-next-foot a { color: var(--on-d-mute); text-decoration: none; }
.pc-next-foot a:hover { color: var(--on-d); }

/* ─────────────── Work index — stacked full-bleed reel ─────────────── */
.wi-page { background: var(--ink); color: var(--on-d); }

/* Header — short, big title, then the reel begins. */
.wi-header { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden;
  padding: clamp(96px, 16vh, 180px) clamp(24px, 5vw, 96px) clamp(64px, 10vh, 120px); background: var(--ink); }
.wi-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 22% 30%, rgba(255,88,36,0.10), transparent 65%),
              radial-gradient(50% 55% at 85% 80%, rgba(40,88,255,0.06), transparent 65%);
}
.wi-header-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.wi-header-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stage-1); margin-bottom: 20px;
}
.wi-header-title { margin: 0; }
.wi-header-title .mask-line { display: block; overflow: hidden; }
.wi-header-title .mask-line > span {
  display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.2,1);
  font-family: var(--display); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  font-size: clamp(56px, 13vw, 220px); color: var(--on-d);
}
.wi-header-title .mask-line.is-in > span { transform: translateY(0); }
body.font-bigshoulders .wi-header-title .mask-line > span { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .wi-header-title .mask-line > span { font-family: var(--body); font-weight: 700; }
.wi-header-meta {
  margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--on-d-mute);
}
.wi-header-meta .strong { color: var(--on-d); }
.wi-header-meta .sep { color: var(--stage-1); }

/* Reel — stack of full-bleed project bands. */
.wi-reel { display: block; }
.wi-band {
  position: relative; display: block; height: 88vh; min-height: 520px; overflow: hidden;
  text-decoration: none; background: #050403; border-top: 1px solid rgba(237,228,208,0.08);
}
.wi-band-media { position: absolute; inset: 0; z-index: 0; }
.wi-band-media .pc-media { filter: grayscale(0.45) brightness(0.6); transform: scale(1.06);
  transition: filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.wi-band:hover .wi-band-media .pc-media { filter: grayscale(0) brightness(0.92); transform: scale(1.0); }
.wi-band-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,3,0.55) 0%, transparent 30%, transparent 50%, rgba(5,4,3,0.92) 100%); }
.wi-band-overlay {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 5vh, 56px) clamp(24px, 5vw, 96px);
}
.wi-band-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.wi-band-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--on-d); }
.wi-band-num .of { color: var(--on-d-mute); }
.wi-band-tags { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-d-dim); text-align: right; }
.wi-band-bottom { display: flex; flex-direction: column; gap: 14px; }
.wi-band-title {
  margin: 0; font-family: var(--display); font-weight: 700; line-height: 0.92; letter-spacing: -0.035em;
  font-size: clamp(40px, 7vw, 124px); color: var(--on-d);
  transform: translateY(0); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
body.font-bigshoulders .wi-band-title { font-family: var(--display-alt); font-weight: 900; }
body.font-bricolage .wi-band-title { font-family: var(--body); font-weight: 700; }
.wi-band:hover .wi-band-title { transform: translateY(-4px); }
.wi-band-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.wi-band-client { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--on-d-dim); }
.wi-band-cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stage-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.wi-band-cta .arr { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.wi-band:hover .wi-band-cta .arr { transform: translateX(10px); }

/* Footer */
.wi-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: clamp(28px, 5vh, 48px) clamp(24px, 5vw, 96px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-d-mute);
  border-top: 1px solid var(--line-d); background: var(--ink-1);
}
.wi-foot a { color: var(--on-d-mute); text-decoration: none; }
.wi-foot a:hover { color: var(--on-d); }

/* ─────────────── About page ─────────────── */
.ab-page { background: var(--ink); color: var(--on-d); }

/* Hero — name + descriptor beside a portrait. */
.ab-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden;
  padding: clamp(110px, 16vh, 180px) clamp(24px, 5vw, 96px) clamp(64px, 10vh, 120px); }
.ab-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 18% 30%, rgba(255,88,36,0.10), transparent 62%),
              radial-gradient(50% 55% at 90% 80%, rgba(40,88,255,0.07), transparent 62%); }
.ab-hero-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .ab-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.ab-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stage-1); margin-bottom: 18px; }
.ab-name { margin: 0; }
.ab-name .mask-line { display: block; overflow: hidden; }
.ab-name .mask-line > span { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.2,1);
  font-family: var(--display); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; font-size: clamp(46px, 7vw, 120px); color: var(--on-d); }
.ab-name .mask-line.is-in > span { transform: translateY(0); }
body.font-bigshoulders .ab-name .mask-line > span { font-family: var(--display-alt); font-weight: 900; }
.ab-descriptor { margin: 22px 0 0; max-width: 22ch;
  font-family: var(--display); font-weight: 500; font-size: clamp(17px, 2vw, 28px); line-height: 1.25; letter-spacing: -0.02em; color: var(--on-d-dim); }
.ab-hero-portrait { justify-self: end; width: 100%; }
.ab-portrait-frame { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; margin-left: auto;
  border-radius: 16px; overflow: hidden; background: #050403;
  border-bottom-left-radius: 50% 8%; border-bottom-right-radius: 50% 8%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ab-portrait-frame .pc-media-img { background-position: center 25%; }

/* Bio — feature statement. */
.ab-bio { padding: clamp(70px, 12vh, 150px) clamp(24px, 5vw, 96px); }
.ab-bio-inner { max-width: 1100px; margin: 0 auto; }
.ab-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stage-1); margin-bottom: 24px; }
.ab-bio-text { margin: 0; max-width: 24ch;
  font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3vw, 42px); line-height: 1.2; letter-spacing: -0.025em; color: var(--on-d); }
body.font-bigshoulders .ab-bio-text { font-family: var(--display-alt); font-weight: 700; }

/* Highlight chips — scannable proof points under the bio statement. */
.ab-highlights { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.ab-highlight {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-d-dim);
  padding: 11px 18px; border: 1px solid var(--line-d); border-radius: 999px;
  transition: border-color .35s ease, color .35s ease;
}
.ab-highlight::before { content: "✦ "; color: var(--stage-1); }
.ab-highlight:hover { border-color: var(--stage-1); color: var(--on-d); }

/* Wide photo band. */
.ab-wide { position: relative; height: clamp(420px, 78vh, 760px); overflow: hidden; background: #050403; }
.ab-wide .pc-media-img { transform: scale(1.03); }

/* Beliefs — philosophy + mission, readable. */
.ab-beliefs { padding: clamp(70px, 12vh, 150px) clamp(24px, 5vw, 96px); }
.ab-beliefs-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
@media (max-width: 800px) { .ab-beliefs-inner { grid-template-columns: 1fr; gap: 44px; } }
.ab-belief-text { margin: 0; font-family: var(--body); font-weight: 400; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; color: var(--on-d-dim); max-width: 42ch; }
.ab-belief-text.ab-mission { color: var(--on-d); font-weight: 500; }

/* Fun facts — photo + playful list. */
.ab-facts { padding: clamp(60px, 10vh, 130px) clamp(24px, 5vw, 96px); background: var(--ink-1); border-top: 1px solid var(--line-d); }
.ab-facts-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 800px) { .ab-facts-inner { grid-template-columns: 1fr; gap: 40px; } }
.ab-facts-photo-frame { position: relative; width: 100%; max-width: 380px; aspect-ratio: 53 / 60; border-radius: 14px; overflow: hidden; background: #050403; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.ab-facts-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.ab-fact { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-d); padding-top: 20px; }
.ab-fact-mark { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stage-1); }
.ab-fact-text { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -0.02em; color: var(--on-d); max-width: 28ch; }
body.font-bigshoulders .ab-fact-text { font-family: var(--display-alt); font-weight: 700; }

/* CTA + footer. */
.ab-cta { padding: clamp(80px, 14vh, 180px) clamp(24px, 5vw, 96px) 0; }
.ab-cta-inner { max-width: 1100px; margin: 0 auto; }
.ab-cta-title { margin: 22px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 6vw, 96px); line-height: 0.96; letter-spacing: -0.04em; color: var(--on-d); }
body.font-bigshoulders .ab-cta-title { font-family: var(--display-alt); font-weight: 900; }
.ab-cta-email { display: inline-block; margin: 28px 0 0; font-family: var(--mono); font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 0.04em; color: var(--on-d); text-decoration: none; position: relative; }
.ab-cta-email::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--stage-1); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ab-cta-email:hover::after { transform: scaleX(1); }
.ab-cta-links { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
@media (max-width: 640px) { .ab-cta-links { grid-template-columns: 1fr; } }
.ab-cta-link { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k arrow" "title arrow"; align-items: center; gap: 4px 16px;
  padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-d); border-radius: 14px; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.ab-cta-link::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 0% 100%, rgba(255,88,36,0.16) 0%, transparent 55%); opacity: 0; transition: opacity .5s ease; }
.ab-cta-link:hover { border-color: var(--stage-1); transform: translateY(-4px); }
.ab-cta-link:hover::before { opacity: 1; }
.ab-cta-link .cl-k { grid-area: k; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-d-mute); }
.ab-cta-link .cl-title { grid-area: title; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1; color: var(--on-d); }
body.font-bigshoulders .ab-cta-link .cl-title { font-family: var(--display-alt); font-weight: 900; }
.ab-cta-link .cl-arrow { grid-area: arrow; font-family: var(--display); font-size: clamp(26px, 3vw, 40px); color: var(--stage-1); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.ab-cta-link:hover .cl-arrow { transform: translateX(10px); }
.ab-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: clamp(48px, 8vh, 96px) 0 clamp(28px, 5vh, 48px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-d-mute); }
.ab-foot a { color: var(--on-d-mute); text-decoration: none; }
.ab-foot a:hover { color: var(--on-d); }