/* ============================================================
   WHO ARE THESE PEOPLE? — WLL Fan Lifecycle Cohort Study
   Palette sampled from the generated film stills: golden-hour
   amber over cloud cream, dropping into deep teal-black shadow.
   ============================================================ */

:root{
  /* ground */
  --ink:#0A0D0F;
  --ink-2:#101619;
  --ink-3:#182126;
  --teal:#24424C;

  /* light */
  --cream:#F5EEE2;
  --cream-2:#EBE1CF;
  --cream-3:#DED2BC;
  --sand:#B9A88E;

  /* signal */
  --amber:#E9963F;
  --amber-2:#F5B569;
  --flame:#DC5A16;
  --ash:#7C8C90;

  /* text roles */
  --on-dark:#F2EADC;
  --on-dark-mid:#BFB3A2;
  --on-dark-dim:#7E8A8C;
  --on-light:#14191B;
  --on-light-mid:#4E585A;
  --on-light-dim:#8A9092;

  --rgb-ink:10,13,15;
  --rgb-cream:245,238,226;

  /* One family, top to bottom. A cohort study is a document about counts —
     sends, opens, cohorts, dollars — and a monospace face is the one class of
     type that treats a number as a first-class citizen: every digit occupies the
     same width, so columns line up down the page without tabular-figure hacks
     and a figure never re-flows the sentence around it as it counts up.

     IBM Plex Mono rather than a display mono: it was drawn as a text face with a
     real weight range and true italics, so it carries long reading copy as well
     as headlines. Using ONE family across display, body and accent is also the
     opposite of the four-trendy-fonts look — the hierarchy comes from weight and
     size, which is how a document is actually set. */
  --display:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --gut:clamp(20px,5vw,72px);
  --max:1180px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  font-family:var(--sans);
  /* Mono runs wide — every character takes an em of its own — so it is set a
     shade smaller than the serif was and given more leading, because long
     monospace lines need the extra air to stay trackable. */
  font-size:clamp(14.5px,.96vw,15.8px);
  line-height:1.74;
  font-weight:400;
  color:var(--on-light);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--flame);color:var(--cream)}

a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:600}

:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:840px}
/* There is no serif in the stack any more — the accent is now the family's own
   true italic, held apart by colour and weight rather than by a second face. */
/* Upright, not italic: see the note on the accent colour below. Weight and the
   amber do the separating now. */
.serif{font-family:var(--serif);font-style:normal;font-weight:600;letter-spacing:-.01em}
.amber{color:var(--amber)}
.flame{color:var(--flame)}

/* ─────────── shared type ─────────── */

.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:clamp(9.5px,.78vw,11px);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin-bottom:clamp(20px,2.4vw,34px);
}
.eyebrow i{display:block;width:clamp(18px,2.6vw,38px);height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow.dark{color:var(--flame)}

.sec-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.05rem,5.1vw,4.15rem);
  line-height:1.02;letter-spacing:-.033em;
  color:var(--on-light);
  margin-bottom:clamp(18px,2vw,28px);
}
.sec-h b{font-weight:700;color:var(--flame)}
.sec-h.light{color:var(--on-dark)}
.sec-h.light b{color:var(--amber)}

.sec-lede{
  font-size:clamp(1rem,1.28vw,1.19rem);
  line-height:1.62;color:var(--on-light-mid);
  max-width:47ch;margin-bottom:clamp(30px,3.6vw,54px);
}
.sec-lede b{color:var(--on-light);font-weight:600}
.sec-lede em{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--amber);font-size:1em}
.sec-lede.light{color:var(--on-dark-mid)}
.sec-lede.light b{color:var(--on-dark)}

.method{
  font-family:var(--mono);font-size:clamp(10.5px,.82vw,12px);line-height:1.75;
  letter-spacing:.005em;color:var(--on-light-dim);
  max-width:57ch;margin-top:clamp(26px,3vw,40px);
  padding-left:14px;border-left:1px solid var(--cream-3);
}
.method.light{color:var(--on-dark-dim);border-left-color:rgba(242,234,220,.18)}
/* Opt out of the reading measure and run the full column width. text-wrap:nowrap
   is deliberately NOT used — these have to stay readable when the column is
   narrower than the sentence, so they collapse to more lines rather than
   overflowing. balance keeps the break points even when they do wrap. */
.method--wide{max-width:none}
.method--up{font-size:clamp(.94rem,1.12vw,1.08rem);color:var(--on-light-mid);text-wrap:balance}
/* Compound / descendant selectors, not bare classes: these rules sit above the
   originals in the sheet, so a single class ties on specificity and loses. */
/* fills each line before breaking, rather than evening the lines out */
.sec-lede.sec-lede--wide{max-width:none;text-wrap:wrap}
/* Same idea for a heading: drop the measure cap and let it use the column. The
   <br> is removed in the markup too — a forced break plus a full-width line is
   two different instructions about where the line should end. */
.sec-h.sec-h--wide{max-width:none;text-wrap:balance}
/* Two lines, split where the author put the break. text-wrap:balance would
   re-break it into three even lines, which is the opposite of what an authored
   <br> is for. */
#flip .sec-h--wide{text-wrap:nowrap;white-space:nowrap}
/* Wide means the lines run the full measure. text-wrap:balance was evening them
   out into a short centred stack, which is the look the cap was removed to get
   away from — and where the markup carries its own <br>, balance overrode it. */
.band-h.band-h--wide{max-width:none;text-wrap:wrap}
/* Sized so each of these lands on two lines. At the inherited 72px the first
   clause overran the column and broke onto a third line with four words on it —
   which reads as a mistake, not a heading. 64px is the largest size at which
   both wide headings hold their intended break at the capped column width. */
@media (min-width:900px){
  .band-h.band-h--wide{font-size:min(64px,4.4vw)}
}
.lock-h.lock-h--wide{max-width:none}
.lock-h.lock-h--wide .ll{display:block}
/* Each line of the wide lockup is one line. The word-scrub animates per line,
   so a line that wraps splits its own reveal in half and the effect reads as a
   stutter rather than a turn. Below the breakpoint the lines are allowed to
   wrap again — a locked line would run off the side of a phone. */
@media (min-width:900px){
  .lock-h.lock-h--wide .ll{white-space:nowrap}
  /* Sized to the longest line rather than to the viewport. The type is mono, so
     the measure is exact: 33 characters at a 0.6em advance less the tracking is
     18.65em, and the heading has to stay inside its own column or a locked line
     runs off the page. 62px is that ceiling at the capped wrap width. */
  .lock-h.lock-h--wide{font-size:min(62px,4.6vw)}
}
/* no balance here — it evens the line lengths, which leaves the first line
   short of the column. Plain wrapping fills each line before breaking. */
.mpp-lede.mpp-lede--wide{max-width:none;text-wrap:wrap}
.sc-head p.note-wide{max-width:none;text-wrap:balance}
/* a note hanging off a pull-quote reads as part of it, so it sits close rather
   than a full block's gap away */
.pull + .method{margin-top:clamp(12px,1.5vw,20px)}

.pull{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.55vw,2.15rem);line-height:1.22;letter-spacing:-.02em;
  color:var(--on-light);margin-top:clamp(36px,4.4vw,64px);
}
.pull.light{color:var(--on-dark)}
.pull.small{font-size:clamp(1.15rem,1.85vw,1.5rem)}
/* compound, so it outranks .pull.small rather than tying on one class */
.pull.pull--tight{font-size:clamp(.98rem,1.35vw,1.18rem)}
/* Down off the key rather than tight against it — the line is the reading of the
   chart above, and it needs the gap to land as a conclusion and not a caption. */
.pull.pull--tight{margin-top:clamp(30px,4.6vh,64px)}
/* runs the full column instead of breaking on a hard <br> */
.pull.pull--wide{max-width:none;text-wrap:wrap}

.count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ─────────── loader ─────────── */

#loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--ink);
  transition:opacity .8s var(--ease),visibility .8s;
}
#loader.done{opacity:0;visibility:hidden}
.ld-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.ld-mark{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.2rem,10vw,6.4rem);line-height:1;
  /* All three letters carry the league's amber — only the timing is staggered,
     so the mark lands as one word rather than two letters and a highlight. */
  letter-spacing:.02em;color:var(--amber);display:flex;
}
.ld-mark span{opacity:0;transform:translateY(.25em);animation:ldIn .7s var(--ease) forwards}
/* Scoped to .ld-mark so these outrank the `animation` shorthand on
   `.ld-mark span`, which resets delay to 0 and was quietly cancelling the
   stagger — all three letters had been arriving together. */
.ld-mark .ld-l{animation-delay:.1s}
.ld-mark .ld-l2{animation-delay:.2s}
@keyframes ldIn{to{opacity:1;transform:none}}
.ld-sub{
  font-family:var(--mono);font-size:clamp(9.5px,.85vw,11.5px);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-dim);
  margin-top:14px;
}
.ld-track{width:min(240px,54vw);height:2px;margin-top:34px;background:rgba(242,234,220,.14);overflow:hidden}
#ld-bar{display:block;width:0;height:100%;background:var(--amber);transition:width .35s var(--ease)}
.ld-pct{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--on-dark-dim);margin-top:12px;font-variant-numeric:tabular-nums}
.ld-pctmark{opacity:.5}

/* ─────────── chrome ─────────── */

.chrome{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  padding:14px var(--gut);
  color:var(--on-dark);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid rgba(242,234,220,0);
}
/* Over dark bands the bar has no panel, so the scrim has to carry legibility
   on its own — it runs past the bar's own height so the fade never hard-edges. */
.chrome::before{
  content:"";position:absolute;inset:0 0 -26px;z-index:-1;
  background:linear-gradient(180deg,
    rgba(var(--rgb-ink),.88) 0%,
    rgba(var(--rgb-ink),.62) 52%,
    rgba(var(--rgb-ink),0) 100%);
  transition:opacity .5s var(--ease);
}
.chrome.on-light{color:var(--on-light);background:rgba(var(--rgb-cream),.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--cream-3)}
.chrome.on-light::before{opacity:0}

.chrome-back{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);font-weight:500;letter-spacing:.15em;text-transform:uppercase;opacity:.82;transition:opacity .25s,gap .25s var(--ease);flex:none}
.chrome-back:hover{opacity:1;gap:13px}
.chrome-back svg{width:17px;height:10px;flex:none}

.chrome-title{margin-left:auto;display:flex;align-items:baseline;gap:12px;min-width:0}
.chrome-title b{font-family:var(--display);font-weight:700;font-size:clamp(11px,.95vw,13.5px);letter-spacing:-.005em;white-space:nowrap}
.chrome-title span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;white-space:nowrap}

.chrome-menu{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);font-weight:500;letter-spacing:.15em;text-transform:uppercase;opacity:.82;transition:opacity .25s;flex:none}
.chrome-menu:hover{opacity:1}
.chrome-menu-bars{display:flex;flex-direction:column;gap:4px;width:17px}
.chrome-menu-bars i{display:block;height:1.5px;background:currentColor;transition:transform .35s var(--ease),width .35s var(--ease)}
.chrome-menu-bars i:last-child{width:11px;margin-left:auto}
.chrome-menu[aria-expanded="true"] .chrome-menu-bars i:first-child{transform:translateY(2.75px) rotate(45deg)}
.chrome-menu[aria-expanded="true"] .chrome-menu-bars i:last-child{width:17px;transform:translateY(-2.75px) rotate(-45deg)}

.chrome-prog{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:rgba(128,128,128,.18)}
#chromeProg{display:block;height:100%;width:0;background:var(--flame);transform-origin:left}

/* index panel */
.index-panel{
  position:fixed;top:0;right:0;z-index:89;
  width:min(430px,88vw);height:100dvh;
  background:var(--ink);color:var(--on-dark);
  padding:clamp(84px,11vh,120px) clamp(28px,5vw,52px) 40px;
  transform:translateX(100%);visibility:hidden;
  transition:transform .66s var(--ease),visibility .66s;
  overflow-y:auto;border-left:1px solid rgba(242,234,220,.1);
}
.index-panel.open{transform:none;visibility:visible}
.index-list{list-style:none;counter-reset:none}
.index-list li{border-bottom:1px solid rgba(242,234,220,.09)}
.index-list a{
  display:flex;align-items:baseline;gap:16px;padding:13px 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.16rem);
  letter-spacing:-.012em;color:var(--on-dark-mid);
  transition:color .25s,padding-left .3s var(--ease);
}
.index-list a:hover,.index-list a:focus-visible{color:var(--amber);padding-left:8px}
.index-list em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--on-dark-dim);flex:none}

/* ─────────── 00 hero ─────────── */

/* Tall scroll track. The pinned child holds for the length of it while the
   descent scrubs from the aerial plate down to pitch level. */
.hero{
  position:relative;
  /* Sets the pace of the descent: the whole move — clouds down to the centre
     circle — is spread across this much scroll. Back at 340vh: shortening it to
     265vh sped the camera up but gave the push less room to read. */
  /* Scales with the frame count so the scroll-per-frame pace stays put: 104 of
     the clip's 121 frames now play, and 265vh * 104/121 is 228vh. Leaving the
     track long would have stretched the same footage over more scroll and
     undone the pacing. */
  height:var(--hero-track,228vh);
  background:var(--ink);
}
.hero-pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(58px,9vh,110px);
  overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--ink)}
.hero-plate,.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(1.04);
  transform:scale(1.02);transform-origin:50% 46%;will-change:transform;
}
/* the canvas fades in once the frame sequence is decoded and ready to scrub */
.hero-canvas{opacity:0;transition:opacity .5s var(--ease)}
.hero-canvas.live{opacity:1}
.hero-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(var(--rgb-ink),.5) 0%,rgba(var(--rgb-ink),.06) 34%,rgba(var(--rgb-ink),.5) 76%,rgba(var(--rgb-ink),.9) 100%),
    radial-gradient(120% 78% at 20% 88%,rgba(var(--rgb-ink),.7),transparent 62%);
}


.hero-stage{position:relative;z-index:2;max-width:1100px;color:var(--on-dark)}
.hero-eyebrow{color:var(--amber-2)}

.hero-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.05rem,11.2vw,10.4rem);
  line-height:.9;letter-spacing:-.045em;
  margin:0 0 clamp(24px,3vw,40px) -.035em;
  text-shadow:0 2px 40px rgba(0,0,0,.3);
}
.hl{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hw{display:inline-block;transform:translateY(105%)}
.hero-h .serif{
  font-family:var(--serif);font-weight:400;font-style:normal;
  letter-spacing:-.01em;color:var(--amber-2);
  padding-right:.06em;
}

.hero-sub{
  display:flex;flex-wrap:wrap;gap:.55em 1.5em;align-items:baseline;
  font-size:clamp(1.02rem,1.75vw,1.5rem);font-weight:300;
  color:var(--on-dark-mid);
}
.hero-sub b{font-family:var(--display);font-weight:700;color:var(--on-dark);font-variant-numeric:tabular-nums}
.hero-sub em{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--amber-2)}
.hero-sub span{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero-sub span.in{opacity:1;transform:none}
.hs-b{transition-delay:.16s!important}

.hero-by{
  margin-top:clamp(26px,3.2vw,44px);
  font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-dim);
}

.hero-scroll{
  position:absolute;right:var(--gut);bottom:clamp(58px,9vh,110px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-dark-dim);writing-mode:vertical-rl;
}
.hero-scroll-line{display:block;width:1px;height:56px;background:linear-gradient(180deg,var(--amber),transparent);position:relative;overflow:hidden}
.hero-scroll-line::after{content:"";position:absolute;inset:0;background:var(--amber);animation:scrollRun 2.1s var(--ease-io) infinite}
@keyframes scrollRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ─────────── 01 lockup ─────────── */

.lockup{
  background:var(--cream);
  padding:clamp(96px,17vh,190px) var(--gut) clamp(90px,15vh,170px);
  max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;
}
.lock-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.75rem,5.35vw,4.5rem);
  line-height:1.06;letter-spacing:-.035em;
  color:var(--on-light);text-wrap:balance;
}
.ll{display:block}
/* the half of the lockup that sits after the quote — it needs the breathing
   room the quote's own bottom margin used to give the scope line */
.lock-h--after{margin-bottom:clamp(32px,3.6vw,48px)}
.lock-h b{font-weight:700;color:var(--flame)}
.lock-h .wd{display:inline-block;opacity:.13;transition:opacity .42s var(--ease),transform .42s var(--ease);transform:translateY(.1em)}
.lock-h .wd.lit{opacity:1;transform:none}

.lock-quote{
  margin:clamp(44px,5.5vw,76px) 0 clamp(32px,3.6vw,48px);
  padding-left:clamp(18px,2.4vw,30px);
  border-left:2px solid var(--flame);
  /* full column: the quote is the claim the whole section turns on, and at 50ch
     it was setting to about half the measure of the heading above it */
  max-width:none;
}
.lock-quote p{
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:clamp(1.14rem,2.05vw,1.75rem);line-height:1.4;
  color:var(--on-light);letter-spacing:0;
}
.lock-quote cite{
  display:block;margin-top:14px;font-family:var(--mono);font-style:normal;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-light-dim);
}

.lock-scope{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,48px);
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--cream-3);
}
.lock-scope span{
  font-family:var(--mono);font-size:clamp(10.5px,.85vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-dim);
}
.lock-scope b{
  display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.3rem);
  letter-spacing:-.03em;color:var(--on-light);margin-bottom:2px;
}

/* ─────────── bands (dark, image-backed) ─────────── */

.band{
  position:relative;isolation:isolate;color:var(--on-dark);
  background:var(--ink);
  padding:clamp(88px,15vh,168px) 0 clamp(88px,15vh,168px);
  overflow:hidden;
}
.band-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:scale(1.08);will-change:transform;
}
.band-bg--vid video{width:100%;height:100%;object-fit:cover}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--rgb-ink),.94) 0%,rgba(var(--rgb-ink),.7) 26%,rgba(var(--rgb-ink),.74) 70%,rgba(var(--rgb-ink),.96) 100%),
    linear-gradient(96deg,rgba(var(--rgb-ink),.9) 0%,rgba(var(--rgb-ink),.42) 52%,rgba(var(--rgb-ink),.24) 100%);
}
.band-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,4.5rem);
  line-height:1.02;letter-spacing:-.035em;
  color:var(--on-dark);margin-bottom:clamp(20px,2.2vw,30px);
}
.band-h b{font-weight:700}
.band-h .serif{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:-.008em}

/* 02 attention */
.duo{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4.5vw,72px);
  margin-top:clamp(38px,5vw,64px);
}
.duo-item{border-top:1px solid rgba(242,234,220,.2);padding-top:clamp(18px,2.2vw,28px)}
.duo-num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.9rem,7.4vw,6rem);line-height:.94;letter-spacing:-.045em;
  color:var(--on-dark);display:flex;align-items:baseline;
}
/* The parent runs -.045em to pull the big figure together, and that tracking
   applies to the gap before the % as well — so the sign was being dragged onto
   the last digit. The margin is widened and the negative tracking cancelled on
   the sign itself, which is the part that was actually closing the gap. */
.duo-num i{font-style:normal;color:var(--amber);font-size:.52em;
  margin-left:.14em;letter-spacing:0}
.duo-item figcaption{
  display:block;margin-top:14px;font-size:clamp(.94rem,1.18vw,1.06rem);
  color:var(--on-dark-mid);max-width:30ch;
}
.duo-item figcaption em{
  display:block;font-family:var(--mono);font-style:normal;
  font-size:clamp(10px,.8vw,11.5px);letter-spacing:.1em;
  color:var(--on-dark-dim);margin-top:7px;text-transform:uppercase;
}
.duo-bars{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:11px}
/* Full column width, and roomier with it — a bar that runs the width of the page
   can afford to be thicker and to set its labels larger than one squeezed into
   half a grid. */
.duo-bars--wide{margin-top:clamp(34px,4.4vw,58px);gap:clamp(14px,1.7vw,20px)}
.duo-bars--wide .db{padding-bottom:13px}
.duo-bars--wide .db span{height:5px}
.duo-bars--wide .db b{font-size:clamp(12px,1.05vw,14px)}
.duo-bars--wide .db u{font-size:clamp(1rem,1.5vw,1.3rem)}
.db{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding-bottom:9px}
.db span{
  position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--amber);
  transition:width 1.5s var(--ease);
}
[data-reveal].in .db span{width:var(--w)}
.db:nth-child(2) span{transition-delay:.14s}
.db--muted span{background:var(--ash);opacity:.55}
.db b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mid)}
.db u{text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.3vw,1.18rem);font-variant-numeric:tabular-nums}
.duo-spark{margin-top:clamp(20px,2.4vw,30px);height:78px;display:flex;align-items:flex-end;gap:2px}
.duo-spark i{flex:1;background:linear-gradient(180deg,var(--amber),rgba(233,150,63,.12));height:0;transition:height .9s var(--ease)}

/* 04 age chart */
.agechart{margin-top:clamp(30px,4vw,52px)}
.ac-legend{display:flex;gap:22px;margin-bottom:22px}
.acl{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim);display:flex;align-items:center;gap:8px}
.acl::before{content:"";width:11px;height:11px;flex:none}
.acl--wll::before{background:var(--amber)}
.acl--full::before{background:rgba(242,234,220,.26)}

.ac-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.6vw,22px);
  height:clamp(220px,30vh,320px);
  border-bottom:1px solid rgba(242,234,220,.22);
}
.acb{
  position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,.7vw,9px);
  cursor:default;
}
.acb::after{
  content:attr(data-band);
  position:absolute;left:0;right:0;bottom:-26px;text-align:center;
  font-family:var(--mono);font-size:clamp(9.5px,.82vw,11px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-dim);transition:color .25s;white-space:nowrap;
}
.acb .abr{
  width:50%;max-width:74px;height:0;
  transition:height 1.25s var(--ease),opacity .25s;
  position:relative;
}
.acb .abr-w{background:linear-gradient(180deg,var(--amber),#B4682A)}
.acb .abr-f{background:rgba(242,234,220,.24)}
.acb .abr b{
  position:absolute;left:0;right:0;top:-22px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:clamp(10.5px,.95vw,13px);
  color:var(--on-dark);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s;
}
.acb.is-hot .abr b,.ac-grid:not(.lit) .acb.is-peak .abr b{opacity:1}
.ac-grid.lit .acb:not(.is-hot) .abr{opacity:.4}
.acb.is-hot::after,.ac-grid:not(.lit) .acb.is-peak::after{color:var(--amber)}

.ac-hint{margin-top:42px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim)}
.ac-out{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  margin-top:14px;padding-top:16px;border-top:1px solid rgba(242,234,220,.16);
}
.ac-out b{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.1vw,1.75rem);letter-spacing:-.02em;color:var(--on-dark)}
.ac-out span{font-family:var(--mono);font-size:clamp(11px,.95vw,13px);color:var(--on-dark-mid);font-variant-numeric:tabular-nums}
.ac-out span i{font-style:normal;letter-spacing:.16em;text-transform:uppercase;font-size:.82em;color:var(--on-dark-dim);margin-right:6px}
.ac-out em{flex-basis:100%;font-family:var(--mono);font-style:normal;font-size:clamp(10px,.85vw,11.5px);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* 05 fan score */
.fs-tool{
  display:grid;grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(30px,5vw,72px);align-items:center;
  margin-top:clamp(32px,4vw,54px);
}
.fs-ring{position:relative;aspect-ratio:1;width:100%;max-width:300px}
.fs-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fs-tr{fill:none;stroke:rgba(242,234,220,.1);stroke-width:19}
.fs-arc{
  fill:none;stroke-width:19;stroke-linecap:butt;
  stroke-dasharray:0 515.2;
  transition:stroke-dasharray 1.35s var(--ease),stroke-width .3s,opacity .3s;
}
.fs-arc--dorm{stroke:#4B565A}
.fs-arc--casual{stroke:var(--sand)}
.fs-arc--active{stroke:var(--amber)}
.fs-ring.dim .fs-arc{opacity:.3}
.fs-ring.dim .fs-arc.hot{opacity:1;stroke-width:24}
.fs-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fs-mid-n{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.3vw,2.5rem);letter-spacing:-.035em;color:var(--on-dark);font-variant-numeric:tabular-nums}
.fs-mid-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-dim);margin-top:5px}

.fs-key{list-style:none;display:flex;flex-direction:column;gap:2px}
/* Full width for the cohort key. Beside the ring it was squeezed into half a
   grid, so "mostly auto-subscribed at ticket purchase" wrapped onto three lines
   under a number it was meant to sit beside. Across the section each row gets
   one line and the three percentages line up as a column you can read down. */
.fs-tool--wide{display:block}
.fs-tool--wide .fs-ring{margin:0 auto clamp(26px,4vw,52px)}
.fs-tool--wide .fs-key{width:100%}
/* Five columns, one per element. The previous version declared four areas and
   left the number's own area ('num') undeclared, so it fell back onto the
   label's cell and the two stacked — which is why DORMANT / CASUAL / ACTIVE were
   sitting underneath their own figures. Each now has a column of its own and the
   row reads straight across: dot, label, number, description, share. */
.fs-tool--wide .fs-key li{
  grid-template-columns:auto minmax(74px,auto) minmax(84px,auto) minmax(0,1fr) auto;
  grid-template-areas:"dot name num desc pct";
  align-items:center;gap:0 clamp(12px,1.9vw,30px);
  padding:clamp(15px,1.9vw,22px) 0;
}
.fs-tool--wide .fs-key li b{align-self:center}
.fs-tool--wide .fs-key li u{grid-area:num;justify-self:start;align-self:center}
.fs-tool--wide .fs-key li em{margin-top:0}
@media (max-width:760px){
  .fs-tool--wide .fs-key li{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"dot name pct" "dot num pct" ". desc .";
    align-items:baseline;
  }
}
.fs-key li{
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"dot name pct" "dot num pct" ". desc .";
  align-items:baseline;gap:2px 14px;
  padding:15px 0;border-bottom:1px solid rgba(242,234,220,.1);
  cursor:pointer;transition:opacity .25s;
}
.fs-key li i{grid-area:dot;width:11px;height:11px;align-self:center;transform:translateY(-2px)}
.fs-key li:nth-child(1) i{background:#4B565A}
.fs-key li:nth-child(2) i{background:var(--sand)}
.fs-key li:nth-child(3) i{background:var(--amber)}
.fs-key li b{grid-area:name;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-mid)}
.fs-key li u{grid-area:num;text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.03em;color:var(--on-dark);font-variant-numeric:tabular-nums;line-height:1.1}
.fs-key li em{grid-area:desc;font-family:var(--mono);font-style:normal;font-size:clamp(10px,.8vw,11.5px);line-height:1.6;color:var(--on-dark-dim);margin-top:4px}
/* Across the full section these lines are the only place the three cohorts get
   defined, so they were doing real work at caption size. Up a step, and lighter
   on the dim so they hold against the ground. */
.fs-tool--wide .fs-key li em{font-size:clamp(12.5px,1.06vw,15px);line-height:1.5;color:var(--on-dark-mid)}
.fs-key li span{grid-area:pct;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--on-dark-dim);align-self:center;font-variant-numeric:tabular-nums}
.fs-key li.is-on span{color:var(--amber)}
.fs-key.dim li:not(.is-on){opacity:.45}

/* ─────────── light chart sections ─────────── */

.chart-sec{background:var(--cream);padding:clamp(88px,15vh,168px) 0}
.chart-sec--tight{padding-bottom:clamp(70px,11vh,130px)}
.chart-sec--dark{background:var(--ink-2);color:var(--on-dark)}

/* 03 flip */
.flip-tool{
  display:grid;grid-template-columns:1fr minmax(0,290px);
  /* One row. The segmented control that used to occupy a second row is gone,
     and leaving the two-row track behind left a phantom row the panel spanned —
     so it filled its own area and could never be centred against the bar. */
  grid-template-rows:auto;
  gap:0 clamp(28px,4.5vw,64px);
  align-items:center;
  /* The lede moved inside this grid, so the block now carries the whole answer
     to the heading and wants a little air off it — the collapse note above no
     longer applies, there is nothing between the two to collapse against. */
  margin-top:clamp(18px,2.6vh,34px);
}
/* The panel answers the lede, so the block sits tight under it instead of a
   full section gap away. Scoped: every other .sec-lede keeps its own spacing. */
#flip .sec-lede{margin-bottom:clamp(10px,1.4vw,18px)}
/* The pull closes the attention band, so it wants a clear gap after the bars
   rather than sitting on the same rhythm as the rest of the stack. */
#attention .pull--wide{margin-top:clamp(38px,6vh,86px)}
.seg{position:relative;display:inline-flex;background:var(--cream-2);padding:4px;margin-bottom:clamp(24px,3vw,36px)}
.seg button{
  position:relative;z-index:1;padding:9px 20px;
  font-family:var(--mono);font-size:clamp(10px,.85vw,11.5px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mid);
  transition:color .3s var(--ease);
}
.seg button[aria-selected="true"]{color:var(--cream)}
.seg-ink{position:absolute;top:4px;bottom:4px;left:4px;background:var(--on-light);transition:transform .5s var(--ease),width .5s var(--ease)}

/* Column one now carries the copy as well as the bar, so it stacks rather than
   being a bare wrapper, and the pair aligns against the panel as one block. */
.flip-stage{grid-column:1;display:flex;flex-direction:column}
.flip-stage .sec-lede{max-width:none;margin-bottom:clamp(18px,2.4vw,30px)}
.flip-bar{display:flex;height:clamp(84px,11vw,132px);overflow:hidden;background:var(--cream-2)}
.fb{
  position:relative;flex-basis:0;flex-grow:var(--v);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(14px,1.8vw,24px);
  transition:flex-grow 1.05s var(--ease),background .5s var(--ease);
  min-width:0;overflow:hidden;
}
.fb--w{background:var(--flame);color:var(--cream)}
.fb--m{background:var(--ink-3);color:var(--on-dark)}
.fb b{font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);font-weight:500;letter-spacing:.15em;text-transform:uppercase;opacity:.78;white-space:nowrap}
.fb u{text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.1vw,2.5rem);letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.flip-cap{margin-top:16px;font-size:clamp(.92rem,1.1vw,1.02rem);color:var(--on-light-mid);max-width:44ch;min-height:3em;transition:opacity .3s}

/* align-self overrides the grid's align-items:start, so the panel sits centred
   against the bar beside it instead of hanging off the top of the row */
/* Lifted clear of its row so it rides alongside the lede rather than starting
   level with the chart. A negative margin, not a transform, so it still takes
   part in layout — and it is undone at 1024px where the columns stack and this
   would drag the panel over the bar. */
/* The negative top margin used to lift this card alongside the bar, back when
   the lede above was capped at 56ch and the right-hand column beside it was
   empty. The lede now runs the full width, so pulling the card up drove it
   straight into the last line of that paragraph. It sits in its own row. */
.sowhat{grid-column:2;grid-row:1;align-self:center;margin-top:0;background:var(--cream-2);padding:clamp(22px,2.6vw,32px);border-top:3px solid var(--flame)}
.sowhat h3{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.02em;margin-bottom:10px}
.sowhat p{font-size:clamp(.92rem,1.05vw,1rem);color:var(--on-light-mid)}

/* 06 mpp + scatter */
/* Down off the heading: the figures are the evidence for the claim above them,
   and they read better arriving after a beat than butted up against it. */
.mpp{margin-top:clamp(20px,3.2vh,44px);margin-bottom:clamp(52px,7vw,96px)}
.mpp-lede{font-size:clamp(.98rem,1.2vw,1.1rem);color:var(--on-light-mid);max-width:44ch;margin-bottom:clamp(22px,2.6vw,32px)}
.mpp-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px)}
.mpp-row li{border-top:2px solid var(--on-light);padding-top:14px}
.mpp-row b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.85rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mpp-row span{display:block;margin-top:8px;font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-dim);line-height:1.55}
.mpp-note{margin-top:clamp(18px,2.2vw,26px);font-size:clamp(.94rem,1.1vw,1.04rem);color:var(--on-light-mid);max-width:50ch}
/* opt out of the 60ch measure and run the full column width */
.mpp-note--wide{max-width:none}

.scatter{border-top:1px solid var(--cream-3);padding-top:clamp(34px,4.4vw,58px)}
.sc-head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.05em;margin-bottom:8px}
.sc-head p{font-size:clamp(.94rem,1.1vw,1.04rem);color:var(--on-light-mid);max-width:47ch}
.sc-tabs{display:flex;flex-wrap:wrap;gap:0;margin:clamp(24px,3vw,36px) 0 0;border-bottom:1px solid var(--cream-3)}
.sc-tabs button{
  position:relative;padding:13px clamp(12px,1.8vw,24px) 15px;
  font-family:var(--mono);font-size:clamp(10px,.88vw,12px);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-dim);
  transition:color .28s;text-align:left;
}
.sc-tabs button em{display:block;font-style:normal;font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.5vw,1.25rem);letter-spacing:-.02em;margin-top:5px;color:var(--on-light-dim);transition:color .28s;font-variant-numeric:tabular-nums}
.sc-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sc-tabs button:hover{color:var(--on-light-mid)}
.sc-tabs button[aria-selected="true"]{color:var(--on-light)}
.sc-tabs button[aria-selected="true"] em{color:var(--flame)}
.sc-tabs button[aria-selected="true"]::after{transform:none}

.sc-plot{position:relative;margin-top:clamp(22px,2.6vw,34px)}
#scatter{width:100%;height:auto;aspect-ratio:1200/620;background:var(--cream-2)}
.sc-verdict{
  margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding-top:16px;border-top:1px solid var(--cream-3);
}
.sc-verdict b{font-family:var(--mono);font-size:clamp(10px,.85vw,11.5px);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--flame)}
.sc-verdict span{font-size:clamp(.94rem,1.1vw,1.04rem);color:var(--on-light-mid)}
.sc-verdict u{text-decoration:none;font-weight:600;color:var(--on-light);font-variant-numeric:tabular-nums}

/* 07 rank */
.rank{list-style:none;counter-reset:none;margin-top:clamp(24px,3vw,40px)}
.rank li{
  display:grid;grid-template-columns:auto minmax(0,1fr) 2.2fr auto;
  align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(15px,1.9vw,24px) 0;border-bottom:1px solid rgba(242,234,220,.12);
}
.rk-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--on-dark-dim)}
.rk-l{font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.85vw,1.55rem);letter-spacing:-.045em;color:var(--on-dark)}
.rk-bar{display:block;height:6px;background:rgba(242,234,220,.1)}
.rk-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--flame),var(--amber));transition:width 1.35s var(--ease)}
.rank.in .rk-bar i{width:calc(var(--v) / 0.62 * 100%)}
.rk-v{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.6rem);letter-spacing:-.03em;color:var(--amber);font-variant-numeric:tabular-nums}

.aside-card{
  margin-top:clamp(38px,5vw,64px);
  background:rgba(242,234,220,.05);border-left:3px solid var(--amber);
  padding:clamp(22px,2.8vw,34px);max-width:58ch;
}
.aside-card h3{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.45rem);letter-spacing:-.024em;color:var(--on-dark);margin-bottom:10px}
.aside-card p{color:var(--on-dark-mid);font-size:clamp(.95rem,1.12vw,1.06rem)}
.aside-card b{color:var(--on-dark)}

/* 08 ceiling */
.ceiling{background:var(--cream);padding:clamp(88px,15vh,168px) 0}
.ceil-viz{display:grid;grid-template-columns:1fr minmax(0,280px);gap:clamp(28px,4.5vw,64px);align-items:start;margin-top:clamp(20px,2.6vw,36px)}
#ceilCanvas{width:100%;height:auto;background:var(--ink);}
.ceil-key{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px)}
.ck{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"dot num" ". lab";gap:2px 12px;align-items:center}
.ck i{grid-area:dot;width:11px;height:11px}
.ck-dim{background:#3A4448}
.ck-hot{background:var(--flame)}
.ck b{grid-area:num;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.5vw,2rem);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ck span{grid-area:lab;font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-dim);line-height:1.6}
.ck--big{grid-template-columns:1fr;grid-template-areas:"num" "lab";border-top:2px solid var(--flame);padding-top:14px}
.ck--big b{font-size:clamp(2.4rem,5vw,3.8rem);color:var(--flame)}

/* 09 youth gap */
.ygap{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,44px);margin-top:clamp(30px,4vw,50px)}
.yg{display:flex;flex-direction:column;gap:6px;padding-bottom:16px}
.yg b{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.95;letter-spacing:-.045em;color:var(--amber);font-variant-numeric:tabular-nums}
.yg--full b{color:var(--on-dark-dim)}
.yg>span{font-family:var(--mono);font-size:clamp(9.5px,.82vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim)}
.yg i{display:block;height:4px;width:0;background:var(--amber);margin-top:8px;transition:width 1.4s var(--ease)}
.yg--full i{background:rgba(242,234,220,.28)}
.ygap.in .yg i{width:calc(var(--v) * 4%)}

/* ─────────── rail ─────────── */

/* No overflow:hidden here. It makes this a scroll container, which silently
   kills position:sticky on .rail-pin inside — the pane scrolled away instead of
   holding, so the strip ran out of screen before the last card arrived. The
   horizontal clipping is done by .rail-pin itself. */
/* Up a step: the section before it closes on a full-width line, and the gap
   the two padding blocks made together read as a break in the argument. */
/* This eyebrow carries the section TITLE rather than a number, and the hint
   below it is the one instruction telling you the section runs sideways — so it
   is sized as the heading it is, not as a caption. The leading rule that the
   numbered eyebrows use is dropped from the markup here: beside a line this
   long it read as a stray dash rather than as an index mark. */
.rail-sec .eyebrow{
  font-size:clamp(28px,2.7vw,40px);letter-spacing:.06em;
  margin-bottom:clamp(16px,2vw,28px);
}
.rail-sec{margin-top:calc(-1 * clamp(16px,2.8vh,40px));background:var(--cream);padding:clamp(8px,1.2vh,18px) 0 clamp(24px,3.6vh,48px)}
.rail-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px}
.rail-head .eyebrow{margin-bottom:0}
/* Up from 10px. It is an instruction — the one line telling you the section
   goes sideways — and at caption size it was the least legible thing on a
   slide whose whole point is that there is more to see. */
.rail-hint{font-family:var(--mono);font-size:clamp(21px,2.04vw,29px);letter-spacing:.05em;text-transform:uppercase;color:var(--on-light-mid)}
.rail-hint kbd{font:inherit;border:1px solid var(--cream-3);padding:2px 5px;margin:0 1px}

/* The track is taller than the viewport; the surplus is the horizontal travel.
   JS sets its height once it knows how far the strip actually has to move. */
.rail-track{position:relative}
.rail-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}

.rail{
  display:flex;gap:clamp(12px,1.8vw,24px);
  margin-top:clamp(26px,3.2vw,44px);
  padding:4px calc(50vw - var(--max)/2 + var(--gut));
  padding-left:max(var(--gut),calc(50vw - var(--max)/2 + var(--gut)));
  /* Driven by scroll now, not by its own scrollbar — the page scroll is the
     input, so native overflow scrolling would fight it.

     overflow MUST stay visible. This element carries the transform, and an
     overflow clip applies in the element's own coordinate space: cards sitting
     past its padding box get clipped permanently, and translating the element
     moves the clip box with them, so they never appear. The fourth card was
     being cut for exactly that reason. .rail-pin does the clipping instead. */
  overflow:visible;
  will-change:transform;
}
.rail.dragging{scroll-snap-type:none}
.rail.dragging *{pointer-events:none}
.card{
  /* At the old 3/4 a narrow card stood only ~410px high, and once the title,
     four bullets and the bottom padding were stacked into the lower two thirds
     of it there was nothing left — the last bullet ran past the card edge at
     every width below about 1200px, enlarged type or not.

     WIDENING is what buys the room back while keeping the card close to square.
     A wider card wraps the bullets onto fewer lines and is taller for the same
     aspect, so both sides of the problem move the right way at once; making it
     taller alone would have fixed the overflow by stretching the card into a
     letterbox. */
  position:relative;flex:none;width:clamp(260px,34vw,420px);aspect-ratio:3/4.05;
  overflow:hidden;background:var(--ink);scroll-snap-align:start;isolation:isolate;
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(1.02)}
/* The scrim has to start where the TEXT starts, not where it used to — the copy
   now begins as high as 19% on a narrow card, and a gradient that stayed clear
   until 30% left the first line sitting on bare photograph. */
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rgb-ink),.04) 12%,rgba(var(--rgb-ink),.55) 46%,rgba(var(--rgb-ink),.88) 100%);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .card:hover img{transform:scale(1.06)}
}
/* Anchored from a fixed top, not the bottom. Bottom-anchoring let each card's
   text block grow upward by its own bullet count, so the four titles sat at
   four different heights — this lines the titles up, and the bullet lists start
   on a common baseline underneath them. */
/* The share reserved for picture has to come down as the card narrows. A card
   keeps its aspect, so a narrower one is shorter in pixels while its text wraps
   onto MORE lines — the two move against each other, and a single fixed 37%
   that fits at 1280 cannot fit at 1024. Stepped down instead, so the titles
   still line up with each other at any given width. */
.card-txt{position:absolute;left:0;right:0;top:34%;bottom:0;z-index:2;
  display:flex;flex-direction:column;
  padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) clamp(30px,3.7vw,46px);
  color:var(--on-dark)}
@media (max-width:1200px){ .card-txt{top:24%} }
@media (max-width:1000px){ .card-txt{top:15%} }
.card-txt h3{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.85vw,1.5rem);letter-spacing:-.05em;margin-bottom:10px;
  /* reserve the tallest title (card 04 runs to three lines) so every list
     starts on the same baseline, not just every title */
  min-height:3.45em}
/* The caption carries the finding, so it always reads — hover just lifts it. */
.card-txt p{font-size:clamp(.86rem,.98vw,.95rem);line-height:1.55;color:var(--on-dark-mid);max-width:30ch;
  opacity:.74;transition:opacity .45s var(--ease),color .45s var(--ease)}
.card-txt p em{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--amber-2)}
/* bullet form — same voice as the body copy it replaced, just parsed faster */
.card-list{
  list-style:none;margin:0;padding:0;
  /* Bigger type on a tighter leading, which is the pairing that actually reads
     — the gain in size is spent on the glyphs rather than on the space between
     them, so the block ends up no taller than before. The gap does the job the
     leading used to: separating one point from the next, instead of every line
     inside a point drifting apart. Raised from .78 to .88 because the copy sits
     on photography and was losing its thinner strokes into the image. */
  display:flex;flex-direction:column;gap:7px;
  font-size:clamp(.98rem,1.16vw,1.12rem);line-height:1.32;color:var(--on-dark-mid);
  letter-spacing:-.005em;
  opacity:.88;transition:opacity .45s var(--ease),color .45s var(--ease);
  text-shadow:0 1px 2px rgba(10,13,15,.45);
}
.card-list li{position:relative;padding-left:15px}
.card-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--amber-2);opacity:.9}
.card-list b{color:var(--on-dark);font-weight:600}
.card-list em{font-family:var(--serif);font-style:normal;color:var(--amber-2);font-size:1.08em}
.card:hover .card-list,.card:focus-within .card-list{opacity:1;color:var(--on-dark)}
.card:hover .card-txt p,.card:focus-within .card-txt p{opacity:1;color:var(--on-dark)}

.rail-prog{height:2px;background:var(--cream-3);margin-top:clamp(22px,2.6vw,32px)}
#railProg{display:block;height:100%;width:18%;background:var(--on-light);transform-origin:left}

/* ─────────── 10 split ─────────── */

.split{display:grid;grid-template-columns:1fr 1fr;background:var(--cream-2);align-items:stretch}
#identity{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.split-media{position:relative;min-height:clamp(340px,52vw,760px);overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
/* A composed campaign layout, not a photographic still — cover would crop the
   headline off the top and the Shop Now off the bottom. Ground colour sampled
   from the artwork itself so the letterboxing reads as part of it. */
/* Padded at the top so the artwork sits low in the panel and its headline has
   room to breathe. Contain fits the image into the remaining box, and the
   padding shows the same ground colour, so it reads as part of the artwork
   rather than as a gap. */
/* Top-aligned with the section, and static — no parallax (excluded in JS) and
   no scale, so the composed layout holds still and reads whole.

   height:auto lets the artwork set the row height instead of being letterboxed
   into a taller box, so the section ends exactly at the bottom of the image.
   min-height is dropped for the same reason — it would floor the panel above
   the artwork's own height on a narrow column. */
.split-media--fit{background:#1c1f1c;min-height:0}
/* Capped and centred: the tee reads as an exhibit beside the copy rather than a
   backdrop, and the panel beside it is set to match its height. */
.split-media--fit img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  transform:none;margin:0;
}
.split-txt{padding:clamp(56px,8vh,120px) clamp(28px,5vw,84px);display:flex;flex-direction:column;justify-content:center;max-width:880px}
/* The tee is now capped at 520px, so this column has to come down to meet it —
   otherwise the copy runs on past the bottom of the image and the two halves of
   the split stop reading as a pair. Every step is scaled rather than just the
   body, so the hierarchy inside the column survives the reduction. */
.split-txt .sec-h{font-size:clamp(1.75rem,3.1vw,2.7rem);margin-bottom:clamp(14px,1.6vw,22px)}
.split-txt .sec-lede{font-size:clamp(1rem,1.24vw,1.2rem);line-height:1.6;margin-bottom:clamp(20px,2.4vw,32px)}
.split-txt .idstats{gap:clamp(18px,2.4vw,36px);margin:clamp(8px,1vw,14px) 0 clamp(10px,1.4vw,18px)}
.split-txt .idstats b{font-size:clamp(2rem,3.8vw,3rem)}
/* > div > span, not a descendant: the figure itself is a .count SPAN inside the
   <b>, so a loose selector here shrinks the number to label size and leaves the
   percent sign behind at full size. */
.split-txt .idstats>div>span{font-size:clamp(10.5px,.9vw,12px)}
.split-txt .idstats em{font-size:.96em}
.split-txt .pull.small{font-size:clamp(1.06rem,1.42vw,1.3rem);line-height:1.44}
/* the kicker sat a full block away from the stats above it */
.split-txt .pull{margin-top:clamp(18px,2.2vw,32px)}
.split-txt .eyebrow{font-size:clamp(10.5px,.88vw,12px)}
.idstats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,34px);margin:clamp(6px,1vw,14px) 0 clamp(8px,1.4vw,18px)}
.idstats>div{border-top:2px solid var(--flame);padding-top:14px}
.idstats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.042em;line-height:1;color:var(--on-light);font-variant-numeric:tabular-nums}
.idstats>div>span{display:block;margin-top:9px;font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-mid)}
.idstats em{display:block;font-style:normal;color:var(--on-light-dim);margin-top:4px}

/* ─────────── 11 volume ─────────── */

.vol{margin-top:clamp(10px,1.6vw,20px)}
.vol-bar{display:flex;height:clamp(56px,7vw,86px);overflow:hidden;background:var(--cream-2)}
.vol-bar span{
  flex-basis:0;flex-grow:0;position:relative;cursor:default;
  transition:flex-grow 1.25s var(--ease),filter .3s;
}
.vol-bar.in span{flex-grow:var(--v)}
.v1{background:var(--flame)}
.v2{background:#C9762E}
.v3{background:var(--amber)}
.v4{background:var(--sand)}
.v5{background:#9AA6A2}
.v6{background:var(--cream-3)}
.vol-bar:hover span{filter:saturate(.35) opacity(.55)}
.vol-bar span:hover{filter:none}
.vol-key{list-style:none;display:flex;flex-wrap:wrap;gap:8px clamp(16px,2.4vw,32px);margin-top:18px}
.vol-key li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:clamp(9.5px,.82vw,11.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--on-light-mid)}
.vol-key li i{width:11px;height:11px;flex:none}
.vol-key li b{font-family:var(--display);font-weight:700;font-size:1.15em;color:var(--on-light);letter-spacing:-.01em;font-variant-numeric:tabular-nums}

.callout{
  margin-top:clamp(40px,5.4vw,72px);background:var(--on-light);color:var(--cream);
  padding:clamp(26px,3.6vw,48px);max-width:44ch;
}
.callout h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.1vw,1.7rem);letter-spacing:-.05em;margin-bottom:12px}
.callout p{color:rgba(245,238,226,.76);font-size:clamp(.96rem,1.14vw,1.08rem)}
.callout b{color:var(--amber);font-weight:600}

/* ─────────── 12 playbook ─────────── */

.playbook{background:var(--ink);color:var(--on-dark);padding:clamp(88px,15vh,168px) 0}
.pb-grid{display:grid;gap:1px;background:rgba(242,234,220,.14);border-top:1px solid rgba(242,234,220,.14);border-bottom:1px solid rgba(242,234,220,.14)}
.pb{background:var(--ink)}
.pb-hd{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2.4vw,32px);padding:clamp(20px,2.6vw,34px) 0;text-align:left;
}
.pb-hd em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--on-dark-dim);transition:color .3s}
.pb-hd h3{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.6vw,2.15rem);letter-spacing:-.032em;color:var(--on-dark);transition:color .3s}
.pb-hd i{position:relative;width:16px;height:16px;flex:none}
.pb-hd i::before,.pb-hd i::after{content:"";position:absolute;background:var(--on-dark-dim);transition:transform .45s var(--ease),background .3s}
.pb-hd i::before{left:0;right:0;top:7.5px;height:1.5px}
.pb-hd i::after{top:0;bottom:0;left:7.5px;width:1.5px}
.pb:hover .pb-hd h3,.pb:hover .pb-hd em{color:var(--amber)}
.pb[data-open="true"] .pb-hd h3{color:var(--amber)}
.pb[data-open="true"] .pb-hd i::after{transform:scaleY(0)}
.pb[data-open="true"] .pb-hd i::before{background:var(--amber)}
.pb-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.pb[data-open="true"] .pb-bd{grid-template-rows:1fr}
.pb-bd>ul{overflow:hidden;list-style:none}
.pb-bd li{
  position:relative;padding:0 0 12px clamp(30px,4.6vw,66px);
  color:var(--on-dark-mid);font-size:clamp(.95rem,1.12vw,1.06rem);max-width:57ch;
}
.pb-bd li::before{content:"";position:absolute;left:clamp(14px,2.4vw,34px);top:.72em;width:8px;height:1px;background:var(--amber)}
.pb-bd li:last-child{padding-bottom:clamp(24px,3vw,38px)}
.pb-bd b{color:var(--on-dark)}
.pb-bd em{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--on-dark)}

/* ─────────── history chips ─────────── */

.history{background:var(--cream);padding:clamp(8px,1.4vh,18px) 0 clamp(80px,13vh,150px)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(6px,1vw,14px)}
.chips li{
  font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.5vw,1.22rem);
  letter-spacing:-.035em;padding:11px 20px;border:1px solid var(--cream-3);
  color:var(--on-light);background:var(--cream-2);
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .3s,color .3s;
}
.chips.in li{opacity:1;transform:none}
.chips.in li:nth-child(2){transition-delay:.07s}
.chips.in li:nth-child(3){transition-delay:.14s}
.chips.in li:nth-child(4){transition-delay:.21s}
.chips.in li:nth-child(5){transition-delay:.28s}
.chips li:hover{border-color:var(--flame);color:var(--flame)}

/* ─────────── two ways ─────────── */

.twoways{background:var(--cream-2);padding:clamp(80px,13vh,150px) 0}
/* Two cards and the exhibit beside them. The third track is narrower and sized
   to content, so the email sits at a sane size rather than being stretched to
   match a card, and align-items:start stops any column padding out to the
   tallest one. */
.tw-grid{
  display:grid;
  /* The exhibit column, widened: the email is the artefact the whole section is
     arguing about, and at 24% it read as a thumbnail beside two cards of text. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,clamp(280px,33%,430px));
  gap:clamp(16px,2.4vw,32px);
  align-items:stretch;
  margin-top:clamp(20px,2.6vw,36px);
}
/* align-items was start, so each card stopped at its own content and the pair
   ended at different heights — the core card carries a list the dormant one does
   not. stretch makes the row set them to a common height, and the card lays its
   own content out in a column so the trailing note still sits at the bottom
   rather than floating mid-card. */
.tw{background:var(--cream);padding:clamp(26px,3.4vw,46px);border-top:3px solid var(--flame);
  display:flex;flex-direction:column;height:100%}
.tw > :last-child{margin-bottom:0}
.tw--dorm{border-top-color:var(--ash)}
.tw-tag{font-family:var(--mono);font-size:clamp(9.5px,.8vw,11px);font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--flame);margin-bottom:14px}
.tw--dorm .tw-tag{color:var(--on-light-dim)}
/* Down a step so the authored break holds. "Founding fan" / is unearnable is
   two lines by design — the <br> is the point of the phrasing — and at the old
   size the first half wrapped again and made it three. */
.tw h3{font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,2.05vw,1.62rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.tw p{color:var(--on-light-mid);font-size:clamp(.95rem,1.1vw,1.04rem);margin-bottom:16px}
.tw ul{list-style:none;border-top:1px solid var(--cream-3)}
.tw li{padding:10px 0;border-bottom:1px solid var(--cream-3);font-family:var(--mono);font-size:clamp(10.5px,.88vw,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--on-light)}
/* The email the dormant card describes, shown rather than only asserted. It
   sits below both cards and is held to a modest width — it is a portrait
   mockup, and run full-bleed it would tower over the section it supports. */
/* dropped down the column so its top sits with the cards' body copy rather
   than level with their tags */
.tw-shot{margin:clamp(26px,4vw,64px) 0 0;max-width:100%}

/* Below three viable columns the cards stack into the first track and the
   exhibit keeps its own column beside them, spanning both rows — so the email
   stays next to the cards on a phone instead of dropping underneath. */
@media (max-width:860px){
  .tw-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(106px,32%,220px));
    gap:clamp(12px,2vw,20px);
  }
  .tw--core{grid-column:1;grid-row:1}
  .tw--dorm{grid-column:1;grid-row:2}
  .tw-shot{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--bar,0px) + 12px)}
  .tw{padding:clamp(18px,3.4vw,32px)}
}
/* Holds on a phone too: the exhibit keeps its column all the way down rather
   than dropping below the cards. Only the very narrowest widths give it up,
   where a 100px column would render the email unreadable anyway. */
@media (max-width:360px){
  .tw-grid{grid-template-columns:1fr}
  .tw--core,.tw--dorm,.tw-shot{grid-column:1;grid-row:auto}
  .tw-shot{position:static;max-width:min(320px,100%);margin-inline:auto}
}
.tw-shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--cream-3);
  background:#fff;
}
/* Up from caption size. This line is the one that explains what the reader is
   looking at, and set in 10px tracked-out uppercase it was the smallest type in
   the section carrying the most necessary sentence in it. */
.tw-shot figcaption{
  margin-top:14px;
  font-family:var(--mono);font-size:clamp(12px,1.02vw,14.5px);
  letter-spacing:.06em;text-transform:none;line-height:1.5;color:var(--on-light-mid);
}
.tw-note{margin-top:16px;margin-bottom:0;font-family:var(--serif);font-style:normal;font-size:clamp(1rem,1.35vw,1.2rem);color:var(--on-light)}

/* ─────────── 13 close ─────────── */

/* opened on the stats now that the eyebrow and heading above them are gone —
   the old top padding was sized for a section that started with a title */
.close{position:relative;isolation:isolate;background:var(--ink);color:var(--on-dark);padding:clamp(30px,5vh,64px) 0 clamp(80px,12vh,140px);overflow:hidden;text-align:center}
.close-bg{position:absolute;inset:0;z-index:-2}
.close-bg video{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.close::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--rgb-ink),.9),rgba(var(--rgb-ink),.7) 30%,rgba(var(--rgb-ink),.92))}
.close .eyebrow{justify-content:center}
.close-h{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,6.6vw,5.4rem);line-height:1;letter-spacing:-.04em;margin-bottom:clamp(22px,2.6vw,34px)}
.close-h .serif{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:-.01em}
.close-lede{font-size:clamp(1.02rem,1.35vw,1.24rem);color:var(--on-dark-mid);max-width:47ch;margin:0 auto clamp(26px,3vw,40px)}
.close-fix{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.22;letter-spacing:-.024em;color:var(--on-dark)}
.close-fix b{color:var(--amber);font-weight:700}
.close-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,36px);margin:clamp(44px,6vw,80px) auto;max-width:760px}
.close-stats>div{border-top:1px solid rgba(242,234,220,.24);padding-top:15px}
.close-stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4.4vw,3.2rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.close-stats>div>span{display:block;margin-top:9px;font-family:var(--mono);font-size:clamp(9px,.78vw,10.5px);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim)}
.close-kick{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.8rem);line-height:1.12;letter-spacing:-.032em;color:var(--on-dark)}
.close-kick .serif{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:-.008em}
/* The two lines were butted together on the heading's own tight leading, which
   suits a single sentence running over but not two separate statements. */
.close-kick{line-height:1.24}
/* One line each. Broken across two, "837 fans are already listening." loses the
   figure off the front of the sentence, which is the whole point of it. */
@media (min-width:900px){ .close-kick{white-space:nowrap} }
/* The second line is the turn, not a match for the first. Set smaller and
   pushed further down, it reads as the answer to the line above rather than the
   second half of one sentence broken across two. */
.close-kick .serif{display:block;font-size:.72em;margin-top:.86em}

.film{margin-top:clamp(52px,7vw,96px)}
.film-v{width:100%;height:auto;background:#000;border:1px solid rgba(242,234,220,.2)}
.film figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-dim)}

/* ─────────── 14 Q&A ─────────── */

.qa{background:var(--cream);padding:clamp(88px,15vh,168px) 0}
.acc{border-top:1px solid var(--cream-3);margin-top:clamp(8px,1.4vw,18px)}
.acc details{border-bottom:1px solid var(--cream-3)}
.acc summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(17px,2.1vw,26px) 44px clamp(17px,2.1vw,26px) 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.62vw,1.32rem);
  letter-spacing:-.02em;color:var(--on-light);transition:color .25s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--flame)}
.acc summary::after,.acc summary::before{content:"";position:absolute;right:8px;background:var(--on-light-dim);transition:transform .4s var(--ease),background .25s}
.acc summary::before{top:calc(50% - .75px);width:15px;height:1.5px}
.acc summary::after{top:calc(50% - 7.5px);right:14.75px;width:1.5px;height:15px}
.acc details[open] summary{color:var(--flame)}
.acc details[open] summary::after{transform:scaleY(0)}
.acc details[open] summary::before{background:var(--flame)}
.acc details p{
  padding:0 clamp(40px,7vw,90px) clamp(22px,2.8vw,34px) 0;
  color:var(--on-light-mid);font-size:clamp(.96rem,1.14vw,1.08rem);max-width:58ch;
  animation:accIn .5s var(--ease);
}
.acc details p b{color:var(--on-light)}
.acc details p em{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--on-light)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ─────────── footer ─────────── */

.foot{background:var(--ink);color:var(--on-dark);padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,70px)}
.foot-top{display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);flex-wrap:wrap;padding-bottom:clamp(26px,3.2vw,42px);border-bottom:1px solid rgba(242,234,220,.16)}
.foot-mark{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:.01em;line-height:.9;color:var(--on-dark)}
.foot-t b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:-.02em}
.foot-t span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim)}
.foot-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);margin:clamp(26px,3.2vw,42px) 0}
.foot-meta dt{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-dim);margin-bottom:7px}
.foot-meta dd{font-size:clamp(.86rem,1vw,.96rem);color:var(--on-dark-mid);line-height:1.55}
.foot-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--on-dark-dim);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid rgba(242,234,220,.16)}
.foot-back{display:inline-block;margin-top:clamp(24px,3vw,38px);font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);transition:opacity .25s}
.foot-back:hover{opacity:.7}

/* ─────────── reveal ─────────── */

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ─────────── responsive ─────────── */

@media (max-width:1024px){
  .flip-tool{grid-template-columns:1fr}
  .sowhat{grid-column:1;grid-row:auto;margin-top:clamp(20px,3vw,32px)}
  .fs-tool{grid-template-columns:1fr;justify-items:start}
  .fs-ring{max-width:250px;margin:0 auto}
  .ceil-viz{grid-template-columns:1fr}
  .ceil-key{flex-direction:row;flex-wrap:wrap;gap:24px 40px}
  .ck--big{flex-basis:100%}
  .split,#identity{grid-template-columns:1fr}
  .split-media{min-height:clamp(260px,46vw,430px)}
  .foot-meta{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  /* the title carried margin-left:auto — hiding it would bunch the two
     controls together on the left, so the menu takes over the push */
  .chrome-title{display:none}
  .chrome-menu{margin-left:auto}
  .chrome-back span{display:inline}
  .hero-pin{padding-bottom:clamp(72px,12vh,120px)}
  .hero-scroll{display:none}
  /* on a phone she has to clear the headline instead of sitting behind it */
  .hero-grade{
    background:
      linear-gradient(180deg,rgba(var(--rgb-ink),.55) 0%,rgba(var(--rgb-ink),.05) 26%,rgba(var(--rgb-ink),.72) 62%,rgba(var(--rgb-ink),.96) 100%);
  }
  .duo,.mpp-row,.ygap,.idstats{grid-template-columns:1fr}
  .duo-item figcaption{max-width:100%}
  .close-stats{grid-template-columns:1fr;max-width:280px}
  .ac-grid{height:clamp(180px,26vh,240px);gap:6px}
  .acb .abr{width:46%}
  .sc-tabs button{flex:1 1 33%;padding-inline:8px}
  .rank li{grid-template-columns:auto 1fr auto;gap:10px 14px}
  .rk-bar{grid-column:1/-1;order:3}
  .rail{padding-left:var(--gut);padding-right:var(--gut)}
  .card{width:min(78vw,320px)}
  .foot-meta{grid-template-columns:1fr}
  .vol-bar{height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hw{transform:none!important}
  .hero-vid,.band-bg,.close-bg video,.split-media img{transform:none!important}
  [data-reveal]{opacity:1;transform:none}
  .lock-h .wd{opacity:1;transform:none}
  .hero-sub span{opacity:1;transform:none}
}


/* ---- accessibility: transparency and contrast preferences ----
   Honours two OS settings the page previously ignored. Both raise opacity and
   remove blur rather than restyling: the layers keep their job as surfaces,
   they just stop being see-through. */
@media (prefers-reduced-transparency: reduce){
  [class*="chrome"],[class*="glass"],[class*="rail"],[class*="hint"],
  [class*="lens-nav"],[class*="header"],[class*="tint"],[class*="panel"]{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
}
@media (prefers-contrast: more){
  [class*="chrome"],[class*="glass"],[class*="header"],[class*="panel"]{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
}

html{ font-optical-sizing:auto; }