/* ==========================================================
   Hillel Ontario — FY26 Impact Report site prototype
   Type stand-ins (swap via @font-face when licensed webfonts land):
   Archivo Black -> MD Nichrome (display)
   Fraunces italic (soft) -> Gooper (soft serif italic)
   Inter -> Neue Montreal (body)
   ========================================================== */

/* ---------- print typefaces (real fonts from the FY26 spread) ----------
   MD Nichrome + Neue Montreal are licensed OTFs; Gooper here is the TRIAL
   build — swap the licensed woff2 before production. */
@font-face{font-family:'MD Nichrome';src:url('../assets/fonts/mdnichrome-black.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'MD Nichrome Bold';src:url('../assets/fonts/mdnichrome-bold.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'MD Nichrome Regular';src:url('../assets/fonts/mdnichrome-regular.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

@font-face{font-family:'Gooper';src:url('../assets/fonts/gooper-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gooper';src:url('../assets/fonts/gooper-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Gooper';src:url('../assets/fonts/gooper-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gooper';src:url('../assets/fonts/gooper-medium-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Gooper';src:url('../assets/fonts/gooper-semibold-italic.woff2') format('woff2');font-weight:600 700;font-style:italic;font-display:swap}

@font-face{font-family:'Neue Montreal';src:url('../assets/fonts/neuemontreal-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../assets/fonts/neuemontreal-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../assets/fonts/neuemontreal-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../assets/fonts/neuemontreal-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

@font-face{font-family:'Roboto';src:url('../assets/fonts/roboto-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/roboto-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/roboto-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/roboto-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

@font-face{font-family:'Google Sans Text';src:url('../assets/fonts/googlesanstext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Google Sans Text';src:url('../assets/fonts/googlesanstext-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Google Sans Text';src:url('../assets/fonts/googlesanstext-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Google Sans Text';src:url('../assets/fonts/googlesanstext-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --cream:#F3EEE2;
  --cream-2:#EAE4D6;
  --ink:#1B1815;
  --ink-soft:#3A362F;
  --paper-dark:#161412;
  --hillel-blue:#52A9F9;  /* brand accent + focus */

  /* chapter accents. cNN = primary · cNN-deep = deep · cNNb = light */
  --c01:#4E8FD0;                                        /* the numbers */
  --c02:#D190BF;  --c02-deep:#BC70AE;  --c02b:#EAB5D9;  /* jewish life */
  --c03:#F26B2B;  --c03-deep:#C25027;  --c03b:#FCC9A4;  /* bolder programming */
  --c04:#234192;  --c04b:#DAE587;                       /* lev (+ accent) */
  --c05:#65A4D9;  --c05-deep:#317BBF;  --c05b:#AAD1EF;  /* emerging campuses */
  --c06:#491211;  --c06-deep:#2C0F0F;  --c06b:#F4E9E0;  /* post-grad */
  --c07:#64A4D9;  --c07b:#AAD1EF;                       /* advocacy */
  --c08:#C18A2C;  --c08-deep:#7A5020;  --c08b:#F3D9A6;  /* israel */
  --c09:#2E8B6C;  --c09-deep:#1C6B50;  --c09b:#ADDCC8;  /* allies */
  --c10:#317BBF;  --c10b:#6D767E;                       /* you (+ secondary) */

  --font-display:'MD Nichrome', 'Archivo Black', 'Arial Black', sans-serif;
  --font-soft:'Gooper', 'Fraunces', Georgia, serif;
  --font-body:'Neue Montreal', 'Inter', 'Helvetica Neue', sans-serif;
  --font-head:'Neue Montreal', 'Inter', 'Helvetica Neue', sans-serif;

  --measure:62ch;
  --pad:clamp(1.25rem, 4vw, 4rem);
  --accent:var(--hillel-blue);
  /* accent darkened toward ink for SMALL text on cream (AA ≥4.5:1 for every chapter);
     bright --accent stays for lines/dots/fills and for accents on dark sections */
  --accent-text:color-mix(in srgb, var(--accent) 55%, var(--ink));
  --sec-bg:var(--cream); /* current section's paper colour (for caption highlights) */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}   /* clip (not hidden) keeps position:sticky working */
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  position:relative;
  /* dock clearance now lives inside the final dark section (.upnext/.cta) so the
     floating route dock sits on that band instead of an empty cream strip */
  font-family:var(--font-body);
  font-size:var(--size-body,1rem);
  background:var(--cream);
  color:var(--ink);
  line-height:var(--leading-body,1.6);
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: clip doesn't create a scroll container, so position:sticky
     (the station-cover dwell on the one-page report) keeps working */
  overflow-x:clip;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem var(--pad) 1.5rem;   /* extra room beneath the menu row → taller header */
  /* frosted glass — semi-transparent + blurred; tint adapts to section context */
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  transition:background .35s ease, border-color .35s ease;
}
.topbar > *{pointer-events:auto}
.brand{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.01em;
  text-decoration:none;line-height:1;
  padding-block:.65rem;   /* enlarge tap area to ~42px (doesn't grow the bar — the menu button is taller) */
}
/* brand shape (Hillel graphic) — filled with a gradient of THIS section's colours
   (light → primary → deep) via a mask, so it works on any bg and shifts per chapter */
.brand .chip{
  width:1.5rem;height:1.6rem;flex:none;
  background:linear-gradient(150deg,
    var(--accent-light, color-mix(in srgb, var(--accent) 50%, #fff)) 0%,
    var(--accent) 50%,
    var(--accent-soft, color-mix(in srgb, var(--accent) 65%, #000)) 100%);
  background-size:100% 100%;
  -webkit-mask:url('../assets/brand-shape.svg') center/contain no-repeat;
          mask:url('../assets/brand-shape.svg') center/contain no-repeat;
}
/* home: the shape is Hillel blue → a darker blue */
body.is-home .topbar:not(.in-station) .brand .chip{
  background:linear-gradient(155deg,#52A9F9 0%,#1B4A85 100%);
  background-size:100% 200%;background-position:50% 0%;
}
/* the chip needs no entrance of its own: the loader's submark flies into this
   exact spot and cross-fades to it (see #loader.seating). */
/* Hillel Ontario wordmark — masked so it inherits the bar's colour (white on the dark
   hero bar, ink when the bar goes light), always legible */
.brand .wordmark{
  width:7.7rem;height:1.1rem;flex:none;background:currentColor;
  -webkit-mask:url('../assets/hillel-ontario-wordmark.svg') left center/contain no-repeat;
          mask:url('../assets/hillel-ontario-wordmark.svg') left center/contain no-repeat;
}
.topbar .report-tag{
  font-family:var(--font-display);
  font-size:1rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;
  opacity:.92;margin-left:auto;
}
.topbar .report-tag .rt-a{font-weight:900}          /* "Impact Report" — MD Nichrome Black */
.topbar .report-tag .rt-b{font-family:var(--font-display-bold);font-weight:400;opacity:.72}  /* "2025–2026" — the true Bold cut */
.topbar .here{
  font-family:var(--font-display);font-weight:700;   /* MD Nichrome Bold */
  font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;
  /* pull dark chapter accents toward ink so the label holds on the light bar */
  color:color-mix(in srgb, var(--accent) 82%, var(--ink));
}
/* on the dark bar, lift the accent toward cream — oxblood/navy chapters stay legible */
.topbar.is-dark-ctx .here{color:color-mix(in srgb, var(--accent) 55%, var(--cream))}
@media (max-width:820px){ .topbar .report-tag,.topbar .here{display:none} }
.topbar.is-dark-ctx, .topbar.on-dark-init{
  color:var(--cream);
  background:color-mix(in srgb, var(--paper-dark) 74%, transparent);
  border-bottom-color:color-mix(in srgb, var(--cream) 13%, transparent);
}
.topbar.is-dark-ctx .report-tag{opacity:.85}

/* contents button — the primary nav control */
.menu-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:400 .9375rem/1 var(--font-display);letter-spacing:.4px;text-transform:uppercase;
  color:inherit;background:color-mix(in srgb, var(--cream) 88%, transparent);
  border:1.5px solid currentColor;border-radius:999px;
  padding:.65rem 1.15rem;cursor:pointer;
  transition:background .2s,color .2s;
  min-height:44px;
}
.topbar.is-dark-ctx .menu-btn{background:color-mix(in srgb, var(--paper-dark) 55%, transparent)}
.menu-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}

/* contents overlay */
.contents{
  position:fixed;inset:0;z-index:60;background:var(--paper-dark);color:var(--cream);
  overflow-y:auto;padding:5.5rem var(--pad) 3rem;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.contents.open{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){ .contents{transition:none} }
.contents .close-btn{
  position:fixed;top:.9rem;right:var(--pad);
  font:700 .8rem/1 var(--font-display);letter-spacing:normal;text-transform:uppercase;
  color:var(--cream);background:transparent;border:1.5px solid var(--cream);
  border-radius:999px;padding:.65rem 1.15rem;cursor:pointer;min-height:44px;
}
.contents .close-btn:hover{background:var(--cream);color:var(--paper-dark)}
.contents .contents-title{
  font-family:var(--font-soft);font-style:italic;font-weight:600;
  font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:2.2rem;
}
.contents ol{list-style:none;max-width:760px;margin:0 auto}
.contents li{border-bottom:1px solid rgba(243,238,226,.15)}
.contents a{
  --dot:var(--hillel-blue);
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.05rem .4rem;text-decoration:none;
  min-height:52px;
  transition:background .15s;
}
.contents a:hover,.contents a:focus-visible{background:rgba(243,238,226,.06)}
.contents .c-num{
  font-family:var(--font-soft);font-style:italic;font-weight:600;
  font-size:1.5rem;color:var(--dot);min-width:2.4rem;
}
.contents .c-through{font-family:var(--font-soft);font-style:italic;font-size:1rem;opacity:.7}
.contents .c-name{
  font-family:var(--font-display);font-size:clamp(1.05rem,2.4vw,1.45rem);
  text-transform:uppercase;letter-spacing:.02em;
}
.contents .c-state{
  margin-left:auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.62;white-space:nowrap;
}
.contents a.now .c-state{color:var(--dot);opacity:1}
.contents a.soon{opacity:.45}
body.menu-open{overflow:hidden}
/* reserve the scrollbar gutter so locking scroll (Contents open) never shifts the page */
html{scrollbar-gutter:stable}
.contents{overscroll-behavior:contain}



/* ---------- spine line ---------- */
.spine{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;overflow:visible;
}
.spine path{
  fill:none;stroke-width:2.25;vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
.spine .node{
  transition:opacity .35s, r .35s;
  opacity:0;
}
.spine .node.lit{opacity:.7}
main{position:relative;z-index:2}

/* generic node anchor marker (invisible; JS reads position) */
[data-node]{position:relative}

/* ---------- shared section rhythm ---------- */
section{position:relative;padding:clamp(1.6rem,4.2vw,3.4rem) var(--pad)}
/* mobile: wider side margins for the edge-riding spine's gutter, and a little more
   top/bottom room so the line's cross-over curve between beats flows naturally */
@media (max-width:640px){ section{padding:clamp(2.3rem,8.5vw,3.2rem) clamp(1.9rem,8vw,2.4rem)} }
.inner{max-width:1100px;margin:0 auto;position:relative}
.narrow{max-width:var(--measure)}

.eyebrow{
  font-family:var(--font-head);
  font-size:var(--size-eyebrow,.72rem);letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--accent-text);margin-bottom:1.2rem;
}
.soft{font-family:var(--font-soft);font-style:italic;font-weight:600;letter-spacing:0}
.accent-soft{font-family:var(--font-soft);font-style:italic;color:var(--accent)}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.95;letter-spacing:-.005em}
/* no widows/orphans: balance every heading, title, subheading & eyebrow so a line
   never ends on a single stranded word */
h1,h2,h3,h4,h5,h6,
.eyebrow,.hero-title,.hero-kicker,.hero-sub,.index-sub,.contents-title,
.people-title,.principle,.upnext-title,.stat-label{
  text-wrap:balance;
}

.lede{font-size:var(--size-lede,clamp(1.125rem,1.7vw,1.3rem));color:var(--ink-soft);max-width:var(--measure)}
.lede + .lede{margin-top:1.1rem}
.lede strong{color:var(--ink);font-weight:700}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================
   LANDING
   ========================================================== */

.hero{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:0;overflow:hidden;isolation:isolate;position:relative;
  background:var(--paper-dark);color:var(--cream);
}
/* the block centers against the full viewport, but the fixed topbar eats the top of it —
   on shorter windows the kicker crowded the bar. Reserve the bar's share so the
   centering biases down and the kicker keeps clear air. (Phones keep their own 86svh hero.) */
@media (min-width:761px){ .hero{padding-top:clamp(4rem,8svh,6.5rem)} }
/* MAXIMALIST FLOW — ten thin columns of colour-graded photos in continuous, seamless
   flow (no pause: each column's content is duplicated x2 and translated a clean -50%
   on a linear loop). The whole field is tilted so the stream reads as a diagonal path,
   and the transit "route" lines thread back over it — the line, echoed. */
.hero-falls{
  position:absolute;inset:-18% -12%;z-index:0;display:flex;gap:6px;
  transform:rotate(-4deg) scale(1.16);transform-origin:center;
  /* own isolated GPU layer: the mouse-drift translate stays a cheap composite instead of
     repainting (and re-blending) the whole photo field — the source of the desktop flash */
  isolation:isolate;will-change:transform;
}
.fall{
  flex:1 1 0;min-width:0;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
}
.fall-inner{
  display:flex;flex-direction:column;gap:6px;
  animation:fallDown var(--fd,40s) linear infinite;animation-delay:var(--fdelay,0s);
  will-change:transform;
}
.fall:nth-child(even) .fall-inner{animation-name:fallUp}
@keyframes fallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes fallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* isolation + own GPU layer: keeps the colour/multiply blends contained to each photo
   so re-compositing the animated, tilted field can't flash the raw greyscale through */
.fall .hp{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 12px 26px -18px rgba(0,0,0,.8);
  isolation:isolate;transform:translateZ(0);backface-visibility:hidden}
.fall .hp img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05)}
.fall .hp::after{content:"";position:absolute;inset:0;background:var(--tint);mix-blend-mode:color;opacity:.88}
.fall .hp::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;opacity:.3;
  background:linear-gradient(160deg,transparent 48%,color-mix(in srgb,var(--tint) 55%,#000))}
/* responsive column count: 10 wide → down to 3 on the smallest screens */
@media (max-width:1180px){ .fall:nth-child(n+9){display:none} }
@media (max-width:920px){ .fall:nth-child(n+7){display:none} }
@media (max-width:680px){ .fall:nth-child(n+5){display:none} }
@media (max-width:470px){ .fall:nth-child(n+4){display:none} }
/* mobile: a touch slower still for a calm, premium drift (base is already slow) */
@media (max-width:680px){ .fall-inner{animation-duration:calc(var(--fd,34s) * 1.35)} }

/* the route lines, threaded over the flow — solid strokes whose gradient flows
   (the animation lives in the SVG gradient itself; no dash, no station dots) */
.hero-lines{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero-lines path{fill:none;stroke-width:2.6;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
/* the living line: heavier, with a soft glow so it reads over the photos. A vertical
   gradient mask (set in main.js) fades it where it crosses the reading copy. */
.hero-lines path.living{stroke-width:3.4;
  filter:drop-shadow(0 0 10px rgba(108,178,226,.4)) drop-shadow(0 2px 14px rgba(0,0,0,.5));
  opacity:0;animation:heroLineIn 1.1s .2s ease-out forwards}
@keyframes heroLineIn{to{opacity:1}}

/* vignette: upright (independent of the tilted field) — darkest at the centre + edges */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(76% 84% at 50% 50%, rgba(15,13,18,.74) 0%, rgba(15,13,18,.22) 46%, transparent 74%),
    linear-gradient(180deg, rgba(15,13,18,.72) 0%, transparent 22%, transparent 78%, rgba(15,13,18,.82) 100%)}
/* soft readability plate directly behind the headline block */
.hero .inner::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 54%, rgba(15,13,18,.68) 0%, transparent 76%)}

.hero .inner{position:relative;z-index:3;width:100%;padding:var(--pad);text-align:center}
.hero-title{font-size:clamp(3.4rem,13vw,10.5rem);text-transform:uppercase;line-height:.92}
.hero-title .w1,.hero-title .w3{display:block}
.hero-title .w2{
  display:block;font-family:var(--font-soft);font-style:italic;font-weight:600;
  text-transform:none;color:var(--hillel-blue);font-size:.92em;margin:.02em 0;
}
.hero-title .dot{color:var(--hillel-blue)}
.hero-kicker{
  font-size:.78rem;letter-spacing:.3125em;text-transform:uppercase;font-weight:700;
  margin-bottom:1.2rem;opacity:.92;
}
.hero-sub{margin:1.5rem auto 0;max-width:38ch;font-size:clamp(1rem,1.5vw,1.25rem);opacity:1;
  text-shadow:0 1px 3px rgba(15,13,18,.75),0 3px 22px rgba(15,13,18,.9),0 0 52px rgba(15,13,18,.6)}

.scroll-cue{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:3;
  font-size:.7rem;letter-spacing:.282em;text-transform:uppercase;font-weight:600;opacity:.7;
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{50%{transform:translate(-50%,6px)}}
@media (max-width:760px){ .fall-4{display:none} }
/* phones keep three columns — see the density note on .hero-falls */
@media (prefers-reduced-motion:reduce){ .fall-inner,.scroll-cue{animation:none} }

/* thesis strip */
.thesis{background:var(--cream);text-align:center}
.thesis p{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,3.2rem);line-height:1.12;
  max-width:31ch;margin:0 auto;
  text-wrap:balance;
}
@media (min-width:1440px){ .thesis p{max-width:46ch} }
.thesis .accent-soft{font-size:1.02em}

/* chapter index (dark) */
.index{background:var(--paper-dark);color:var(--cream);overflow:hidden}
.index .ghost{
  position:absolute;inset:0;display:grid;place-content:start center;
  font-family:var(--font-soft);font-style:italic;font-weight:600;
  font-size:clamp(6rem,22vw,19rem);line-height:.82;color:transparent;
  -webkit-text-stroke:1px rgba(243,238,226,.10);
  pointer-events:none;user-select:none;white-space:nowrap;
  padding-top:.5rem;
}
.index h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.6rem}
.index .index-sub{opacity:.7;max-width:52ch;margin-bottom:3.5rem}
.chapters{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:2.6rem 2.2rem;
}
.chapter{
  --dot:var(--hillel-blue);
  text-decoration:none;display:block;position:relative;
  padding-top:1rem;border-top:1px solid rgba(243,238,226,.16);
  transition:border-color .25s;
}
.chapter:hover,.chapter:focus-visible{border-top-color:var(--dot)}
.chapter .num{
  font-family:var(--font-soft);font-style:italic;font-weight:600;
  font-size:clamp(2.4rem,4vw,3.4rem);color:var(--dot);line-height:1;
}
.chapter .through{
  font-family:var(--font-soft);font-style:italic;font-size:1rem;opacity:.75;
  margin-top:.7rem;
}
.chapter .name{
  font-family:var(--font-display-bold);font-size:1.18rem;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.15;margin-top:.15rem;
}
.chapter .go{
  display:inline-block;margin-top:.8rem;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--dot);
  opacity:.75;transition:opacity .25s,transform .25s;
}
.chapter:hover .go,.chapter:focus-visible .go{opacity:1;transform:translateX(4px)}
.chapter.soon{opacity:.45}
.chapter.soon .go{color:var(--cream)}

/* leadership letter — print composition: team photo bleeds in top-right, headline
   sits bottom-left overlapping it, body + signature row beneath (ref print p3) */
.letter{background:var(--cream)}
.letter .inner{display:block}
/* photo + headline share one grid cell so the copy overlaps the photo's lower-left,
   the way the print lays it out — the team reads as a large background element and
   the headline sits over its bottom-left (mostly the faint/gradient areas). */
.letter-hero{
  position:relative;display:grid;grid-template-areas:"stack";
  margin-bottom:clamp(.4rem,1.6vw,1.2rem);
}
.letter-hero .slt-photo{
  grid-area:stack;justify-self:end;align-self:start;z-index:1;
  width:min(58%,600px);margin-right:-4%;pointer-events:none;
}
.letter-hero .slt-photo img{width:100%;max-width:none;height:auto;display:block}
.letter-hero-copy{
  grid-area:stack;justify-self:start;align-self:end;position:relative;z-index:2;
  max-width:min(60%,19ch);padding-bottom:clamp(.5rem,3vw,2.2rem);
}
.letter h2{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1;max-width:14ch;margin:0}
.letter h2 .msg{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em}
.letter h2 .soft{display:block;color:var(--c02);font-size:1.12em;margin-top:.06em}
/* body spans the full inner so the audio CTA can pull to the right edge; the reading
   text keeps its measure */
.letter-body{position:relative}
.letter-body .lede{max-width:var(--measure)}
.letter-body blockquote{max-width:68ch}
@media (max-width:720px){
  .letter-hero{display:block}
  .letter-hero .slt-photo{width:100%;margin:0 0 -1.2rem 0}
  .letter-hero-copy{max-width:none;padding-bottom:0}
  .letter-hero{margin-bottom:1.25rem}
}
/* desktop: force the headline to two lines ("A Message from" / "Our Leadership.")
   even if it bleeds further over the photo */
@media (min-width:721px){
  .letter-hero-copy{max-width:none}
  .letter h2{max-width:none}
  .letter h2 .msg{display:block;white-space:nowrap}
  .letter h2 .soft{white-space:nowrap}
}
.audio-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.8rem;
  border:1.5px solid var(--ink);border-radius:999px;background:transparent;
  padding:.7rem 1.35rem;min-height:44px;font:700 .8rem/1 var(--font-display);letter-spacing:normal;
  text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;
}
.audio-btn:hover{background:var(--ink);color:var(--cream)}
.audio-btn .tri{width:0;height:0;border-left:9px solid currentColor;border-block:6px solid transparent}
/* on-brand: a slim line fills along the button's base as the audio plays */
.audio-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;
  opacity:.9;transform:scaleX(var(--progress,0));transform-origin:left;transition:transform .2s linear;
}
.audio-note{font-size:.75rem;color:var(--ink-soft);max-width:30ch;line-height:1.35}
/* audio CTA pulled to the right edge, level with the body copy top; play/pause state */
.audio-cta{
  float:right;width:max-content;max-width:min(48%,20rem);margin:.1rem 0 1.2rem 2.5rem;
  display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right;
}
.letter-audio{display:none}
/* mobile: don't float — a right-aligned block above the copy */
@media (max-width:1100px){ .audio-cta{float:none;width:auto;max-width:none;margin:0 0 1.6rem;align-items:flex-start;text-align:left} }
@media (max-width:760px){ .audio-cta{display:none} }
.audio-btn.playing{background:var(--ink);color:var(--cream)}
.audio-btn.playing .tri{width:9px;height:12px;border-width:0 3px;border-style:solid;border-color:currentColor}
@media (prefers-reduced-motion:reduce){ .audio-btn::after{transition:none} }
.letter blockquote{
  font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.4;
  border-left:3px solid var(--c02);padding-left:1.4rem;margin:1.8rem 0;color:var(--hillel-blue);
}
.signatures{
  margin-top:2.4rem;display:grid;grid-template-columns:1fr;gap:1.9rem 2.4rem;
  max-width:min(780px,100%);font-size:.72rem;
}
.signatures{grid-template-columns:repeat(2,minmax(0,1fr))}  /* phones: 2+2+1 */
@media (min-width:700px){ .signatures{grid-template-columns:repeat(3,minmax(0,1fr))} }  /* 3 on top, 2 underneath */
.signatures b{display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:.01em}
.signatures span{display:block;font-family:var(--font-head);font-weight:500;font-size:.88rem;letter-spacing:-.02em;opacity:.6;margin-top:.14rem}
/* signatures: recolored to Hillel blue via alpha mask (SVG ink = mask, blue = fill).
   Mask URLs live here (not in inline vars) so they resolve against this stylesheet. */
.signatures .sig{
  display:block;width:190px;height:2.4rem;margin-bottom:.4rem;opacity:.95;
  background-color:#64A4D9;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
}
.sig-seth  {-webkit-mask-image:url('../assets/signatures/seth.svg');  mask-image:url('../assets/signatures/seth.svg')}
.sig-jay   {-webkit-mask-image:url('../assets/signatures/jay.svg');   mask-image:url('../assets/signatures/jay.svg')}
.sig-bev   {-webkit-mask-image:url('../assets/signatures/bev.svg');   mask-image:url('../assets/signatures/bev.svg')}
.sig-dan   {-webkit-mask-image:url('../assets/signatures/dan.svg');   mask-image:url('../assets/signatures/dan.svg')}
.sig-judith{-webkit-mask-image:url('../assets/signatures/judith.svg');mask-image:url('../assets/signatures/judith.svg')}
.signatures .sig-bev{transform:scale(.78);transform-origin:left center} /* Bev's runs large — scale down */
@media (max-width:820px){ .signatures .sig{width:158px;height:2.1rem} }

/* SLT leadership photo — the finished blue→gold halftone duotone (baked into the
   asset, matching the print report); layout in .letter-hero. A soft bottom fade
   dissolves the cropped legs into the cream section. */
.slt-photo{margin:0}
.slt-photo img{
  display:block;width:100%;height:auto;
  -webkit-mask:linear-gradient(to bottom,#000 78%,transparent 99%);
          mask:linear-gradient(to bottom,#000 78%,transparent 99%);
}

/* footer cta */
.cta{background:var(--paper-dark);color:var(--cream);text-align:center}
.cta h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:16ch;margin:0 auto}
.cta h2 .soft{color:var(--hillel-blue)}
.button{
  display:inline-block;margin-top:2.4rem;background:var(--hillel-blue);color:var(--paper-dark);
  font:400 1.125rem/1 var(--font-display-bold);letter-spacing:.5px;text-transform:uppercase;
  padding:1.05rem 2.2rem;border-radius:999px;text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(108,178,226,.35)}
.foot-meta{margin-top:4rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5}

/* ==========================================================
   CHAPTER — shared + Jewish Life
   ========================================================== */

.opener{
  min-height:100svh;display:flex;align-items:center;color:var(--cream);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #201) 0%, color-mix(in srgb, var(--accent) 68%, #103) 100%);
  isolation:isolate;overflow:hidden;
}
.opener .wash{
  position:absolute;inset:0;background:var(--opener-img) center/cover no-repeat;
  mix-blend-mode:luminosity;opacity:.38;z-index:0;
}
.opener .inner{z-index:1;width:100%}
/* "Through" — Gooper Medium, title case (NOT the display face, NOT all caps) */
.opener .through{
  font-family:var(--font-soft);font-style:italic;font-weight:500;text-transform:none;
  font-size:clamp(2rem,5vw,3.6rem);display:block;margin-bottom:.1em;
}
/* the word(s) under "Through" are the only MD Nichrome (display) here */
.opener h1,.opener .st-h1{font-size:clamp(3rem,10vw,8rem);text-transform:uppercase}
.opener h1 .dot,.opener .st-h1 .dot{color:var(--cream);opacity:.9}
/* shorter, tighter opener header on mobile */
@media (max-width:560px){
  .opener h1,.opener .st-h1{font-size:clamp(2.3rem,10.5vw,3.1rem);line-height:.98}
  .opener .through{font-size:clamp(1.4rem,5vw,1.9rem)}
}
/* subheading / copy under the title — Neue Montreal Bold, not the display face */
.opener .statement{
  margin-top:clamp(2rem,5vw,3.5rem);
  font-family:var(--font-head);font-weight:700;
  font-size:var(--size-statement,clamp(1.35rem,3.2vw,2.4rem));line-height:1.2;max-width:26ch;
}
.opener .statement .gold{font-family:var(--font-soft);font-weight:400;font-style:italic;color:#F0C75E;text-transform:none}

/* ---------- section-cover opener: photo + animated line + foreground cutout ----------
   Three aligned layers (all sized `cover` on the same box, same source aspect):
   bg photo → line (draws + flows) → cutout on top, so the line runs BEHIND the
   subject, like the print's connector threading past the cut-out figures. */
/* the cover opener doesn't need a full viewport — shorten it, and size the heading
   up a touch so the title reads larger relative to the (shorter) section */
.cover-opener{position:relative;overflow:hidden;isolation:isolate;min-height:80svh}
@media (min-width:900px){ .cover-opener{min-height:94svh} }
.cover-opener h1,.cover-opener .st-h1{font-size:var(--size-title,clamp(3.4rem,11vw,9rem))}
.cover-opener .through{font-size:clamp(2.1rem,5.4vw,4rem)}
.cover-opener .statement{margin-top:clamp(1.4rem,3.4vw,2.4rem)}
/* mobile: shrink so long titles (Bolder Programming, Emerging Campuses) don't overflow */
@media (max-width:560px){
  .cover-opener h1,.cover-opener .st-h1{font-size:clamp(2.1rem,9vw,3rem);line-height:.98}
  .cover-opener .through{font-size:clamp(1.5rem,5.5vw,2.1rem)}
}
.cover-opener .cover-bg,
.cover-opener .cover-cut{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;
}
.cover-opener .cover-bg{z-index:0}
.cover-opener .cover-line{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;   /* behind the cutout */
  pointer-events:none;overflow:visible;
}
.cover-opener .cover-line path{
  fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.cover-opener .cover-line .draw{
  /* stroke is an animated gradient: a light band travels the line (SMIL below) */
  stroke:url(#coverLineGrad);stroke-width:5;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:coverDraw 2.4s .35s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes coverDraw{to{stroke-dashoffset:0}}
.cover-opener .cover-line .g-edge{stop-color:var(--cover-edge, color-mix(in srgb, var(--accent) 60%, white))}
.cover-opener .cover-line .g-hi{stop-color:var(--cover-hi, #FFF)}
/* cutout carries NO shadow of its own — it sits in the scene, and the section's
   shadow scrim (below) passes OVER it, so it stops reading as a pasted cut-out */
.cover-opener .cover-cut{z-index:2}
.cover-opener::after{ /* shadow scrim — over the photo AND the cutout (left + bottom) */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,12,28,.88) 0%, rgba(20,12,28,.5) 36%, rgba(20,12,28,0) 66%),
    linear-gradient(0deg, rgba(20,12,28,.6), rgba(20,12,28,0) 46%);
}
.cover-opener .inner{position:relative;z-index:4}  /* stays absolute (top-right), just lifted above the layers */
@media (prefers-reduced-motion:reduce){
  .cover-opener .cover-line .draw{animation:none;stroke-dashoffset:0}
  /* the gradient's SMIL shimmer is paused in js/main.js on reduced-motion */
}

/* stat beats */
/* .stats has no paper of its own — the body cream shows through so the spine
   line stays visible travelling past it (an opaque bg would hide the stroke).
   Extra top room detaches the cards from the intro and lets the line settle into
   its channel below the copy before it reaches them. */
.stat-feature{padding-top:clamp(3.5rem,9vw,6.5rem)}

/* ---------- "By the numbers" — two detached stat cards ----------
   Each card floats (tinted paper, soft shadow, rounded), staggered for movement;
   the spine runs the clear channel BETWEEN them. Number = MD Nichrome w/ accent
   gradient over a ghost silhouette; draw-in underline; Gooper label. */
.stat-feature .stat-rail{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,7vw,5rem);align-items:start;
}
.statx{
  position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(1.7rem,3.5vw,2.7rem);color:var(--cream);
  /* container: chapter accent → deep accent gradient */
  background:linear-gradient(150deg,var(--accent) 0%,var(--accent-soft,var(--accent)) 100%);
  box-shadow:0 26px 54px -26px color-mix(in srgb,var(--accent-soft,var(--accent)) 72%, #000);
}
/* grain: a tiled fractal-noise texture over the gradient for depth */
.statx::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.16;mix-blend-mode:overlay;
}
@media (max-width:680px){
  .stat-feature .stat-rail{grid-template-columns:1fr;gap:1.4rem}
}
/* number over a faint oversized ghost for depth */
.statx-figure{position:relative;z-index:1}
.statx-figure::before{
  content:attr(data-ghost);position:absolute;left:-.05em;top:50%;
  transform:translateY(-52%);white-space:nowrap;pointer-events:none;z-index:0;
  font-family:var(--font-display);font-size:clamp(6rem,16vw,12rem);line-height:.8;
  letter-spacing:-.03em;color:color-mix(in srgb,#FFF 13%,transparent);
}
.statx .n{ /* number = MD Nichrome, cream sheen on the pink card */
  position:relative;z-index:1;display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(3.4rem,8vw,5.9375rem);line-height:.88;letter-spacing:0;
  background:linear-gradient(160deg,#FFF 0%,color-mix(in srgb,#FFF 72%,var(--accent-light,var(--accent))) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.statx-rule{ /* draws in on reveal */
  position:relative;z-index:1;
  display:block;height:3px;width:0;margin-top:1.15rem;border-radius:2px;
  background:linear-gradient(90deg,var(--cream),color-mix(in srgb,var(--cream) 25%,transparent));
  transition:width 1.05s cubic-bezier(.2,.7,.2,1) .15s;
}
.statx.in .statx-rule{width:clamp(56px,7vw,110px)}
.statx-label{ /* label = Gooper, sentence case */
  position:relative;z-index:1;margin-top:1.15rem;font-family:var(--font-soft);font-weight:400;
  font-size:1.3rem;line-height:1.25;letter-spacing:0;max-width:26ch;
  color:color-mix(in srgb,var(--cream) 92%,var(--accent));
}
@media (prefers-reduced-motion:reduce){ .statx-rule{transition:none;width:clamp(56px,7vw,110px)} }

/* ---------- Chapter 01 · The Numbers — full-viewport stat parade ----------
   Each stat is its own scroll beat and a station on the spine. One accent
   (the chapter blue) carries every number; the label ink carries the reading. */
.stat-hero{
  min-height:100svh;display:flex;align-items:center;
  background:var(--cream);overflow:hidden;
}
.stat-hero.alt{background:var(--cream-2)}
.stat-hero.right{justify-content:flex-end;text-align:right}
.stat-big{max-width:min(92vw,42rem)}
.stat-big .n{
  display:block;font-family:var(--font-display);
  font-size:clamp(4.5rem,20vw,16rem);line-height:.82;color:var(--accent);
  letter-spacing:-.02em;
}
.stat-big .l{
  margin-top:1.1rem;font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;max-width:22ch;color:var(--ink);
}
.stat-hero.right .stat-big .l{margin-left:auto}
/* the 35,663 climax: oversized and cropped off-frame, like the print spread */
.stat-hero.crop{justify-content:center;text-align:center;position:relative}
.stat-hero.crop .mega{
  font-family:var(--font-display);color:var(--accent);
  font-size:clamp(9rem,44vw,38rem);line-height:.8;letter-spacing:-.03em;
  white-space:nowrap;display:block;
}
.stat-hero.crop .mega-l{
  position:relative;margin-top:.4rem;
  font-size:clamp(.8rem,1.5vw,1.05rem);letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--ink);
}

/* ---------- The Numbers · line journey ----------
   Stats are stations along the spine (~3 fill a screen); the spine's traveling
   dot leads you down; every way in counts up; the line arrives at the total.
   Stat sections are transparent so the spine + dot show through them. */
.nj-intro{padding:clamp(2.4rem,7vw,4.5rem) var(--pad) 1vh;margin-bottom:clamp(2rem,6vh,4rem)}
/* narrower column so the spine keeps a clear right gutter past the intro and flows
   straight into the first (right-side) station instead of slicing the copy */
.nj-intro .narrow{max-width:68ch;margin-left:max(0px,calc((100% - 1100px)/2));margin-right:auto}
.nj-intro h2{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,6vw,3.4rem);line-height:1.04;letter-spacing:-.01em;text-transform:none;margin-bottom:1.2rem}
.nj-intro h2 .soft{color:var(--accent)}
.nj-cue{margin-top:1.8rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent-text)}

.nj-stat{min-height:19vh;display:flex;align-items:center;padding:1.1vh var(--pad)}
.nj-stat .inner{width:100%}
/* shrink-wrap to the number so the spine can hug its edge (not the column's).
   --nfocus (0..1, set by JS on scroll) zooms/brightens the stat as it nears centre */
.nj-figure{
  display:flex;flex-direction:column;align-items:flex-start;width:fit-content;max-width:min(60%,26rem);
  transform-origin:left center;
  transform:scale(calc(.93 + var(--nfocus,.7) * .12));
  opacity:calc(.4 + var(--nfocus,.7) * .6);
  will-change:transform,opacity;
}
.nj-figure.right{margin-left:auto;text-align:right;align-items:flex-end;transform-origin:right center}
/* desktop: per-stat horizontal offset (--njx) so the numbers cascade organically
   instead of a uniform left/right zig-zag — the line meanders to follow */
@media (min-width:641px){
  .nj-figure{margin-left:var(--njx,0)}
  .nj-figure.right{margin-left:auto;margin-right:var(--njx,0)}
}
@media (prefers-reduced-motion:reduce){ .nj-figure{transform:none;opacity:1} }
.nj-num{font-family:var(--font-display);font-size:clamp(3.5rem,12vw,8.5rem);line-height:.86;letter-spacing:-.02em}
.nj-lbl{font-family:var(--font-soft);font-weight:500;margin-top:.7rem;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);max-width:17ch}
/* desktop: keep every stat label to two lines max (wider measure + balanced wrap) */
@media (min-width:900px){ .nj-lbl{max-width:23ch;text-wrap:balance} }

.nj-total{min-height:56vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.nj-total .inner{width:100%}
.nj-total-lbl{display:block;font-family:var(--font-soft);font-weight:500;font-size:clamp(.9rem,1.7vw,1.2rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:.3rem}
.nj-total-num{display:block;font-family:var(--font-display);font-size:clamp(5rem,26vw,20rem);line-height:.84;letter-spacing:-.03em;color:var(--ink)}

@media (max-width:640px){
  /* The line only pins its turn points ~14px into this padding, so the old 10vw
     (83px a beat) was over-provisioned — measured, halving it moves the sharpest
     turn in the whole station by under a degree while giving back ~340px of scroll. */
  .nj-stat{min-height:auto;padding-block:clamp(1.25rem,4.5vw,2.2rem)}
  .nj-figure{max-width:80%}
  /* the finale number needs presence, not half a screen of air */
  .nj-total{min-height:40svh}
  .nj-intro{margin-bottom:clamp(1.2rem,3.5vh,2.2rem)}
  /* the stats keep their left/right zig-zag on phones — the journey weaves */
}

/* spine traveling dot (leads the drawn head of the line down the page) */
.spine .spine-travel{opacity:0;transition:opacity .3s} /* fill set per-section in js */
.spine .band-line{fill:none;stroke-width:2.4px;stroke-linecap:round;opacity:.95}
/* animated grain riding the line (noise pattern, soft-light over the gradient) */
.spine .grain{stroke-width:5;opacity:.5;mix-blend-mode:soft-light}
/* moving light band travelling down the line (replaces the old flowing dashes) */
.spine .shimmer{
  fill:none;stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linecap:round;
  opacity:.55;mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){
  .spine .spine-travel{display:none}
  .spine .shimmer{display:none}
}

/* ---------- photo band: 3-up spread, heading overlaid, line threading through
   (matches the print's "find their people" layout) ---------- */
/* connector line threads across the band (stretched horizontally) */
/* station dots stay perfectly round (positioned in CSS, not scaled SVG) */
/* heading overlaid bottom-left */
@media (max-width:680px){
}

/* print strip (the "find their people" spread SVG: photos + line + heading baked in) */
.photo-strip{margin:0 0 .6rem}
.photo-strip img{width:100%;height:auto;display:block;border-radius:6px}

/* "Find their people" — heading + responsive photo collage (2 landscape stacked +
   2 portrait tall on desktop; a clean stack on mobile) */
.people-title{max-width:16ch;margin-bottom:clamp(1.1rem,3vw,1.9rem);font-size:clamp(2rem,4.2vw,3.625rem)}
.people-grid{
  display:grid;gap:.7rem;margin-bottom:clamp(1.3rem,3.5vw,2.2rem);
  grid-template-columns:1.2fr .9fr .9fr;
  grid-auto-rows:clamp(140px,16.5vw,215px);
}
.people-grid figure{margin:0;overflow:hidden;border-radius:8px;background:var(--cream-2)}
.people-grid img{width:100%;height:100%;object-fit:cover;display:block}
.pg-a{grid-column:1;grid-row:1}
.pg-d{grid-column:1;grid-row:2}
.pg-b{grid-column:2;grid-row:1 / 3}
.pg-c{grid-column:3;grid-row:1 / 3}
@media (max-width:640px){
  .people-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(118px,31vw,175px);gap:.55rem}
  .pg-a{grid-column:1 / 3;grid-row:1}
  .pg-b{grid-column:1;grid-row:2 / 4}
  .pg-c{grid-column:2;grid-row:2 / 4}
  .pg-d{grid-column:1 / 3;grid-row:4}
}

/* story beats */
/* beat headings: Neue Montreal Bold (NOT the MD Nichrome display face) */
.story h2{font-family:var(--font-head);font-weight:700;font-size:var(--size-h2,clamp(1.9rem,4.5vw,3.2rem));letter-spacing:-.01em;max-width:20ch;line-height:1;margin-bottom:1.4rem}
.story h2 .soft{color:var(--accent-soft, var(--accent))}
/* no opaque tint on alt beats — it would hide the spine line passing behind it;
   the page stays one paper so the line reads continuously (the line is the scroll) */
.story.alt{background:transparent}
.photo-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.6rem}

/* beat split: copy on the left, a 3D photo deck on the right, vertically centred beside
   the text. The deck is the event's photos stacked with depth + a slight tilt; it auto-
   advances (front → back), the front card ringed in the chapter accent, pausing on hover
   and advancing on click. main.js sets data-d (0=front … 3=back); CSS transitions animate
   the shuffle. A thin accent bar tracks each card's turn. */
.beat-split{display:grid;grid-template-columns:1fr minmax(0,40%);gap:clamp(1.6rem,4vw,3.6rem);align-items:center;margin-top:.4rem}
.beat-deck{position:relative;perspective:1500px;height:clamp(340px,48vw,520px)}
.beat-deck .deck-card{
  position:absolute;inset:0;margin:0;border-radius:12px;overflow:hidden;cursor:pointer;
  transform-origin:center 62%;background:var(--paper-dark);
  transition:transform .8s cubic-bezier(.34,.1,.2,1),opacity .8s,box-shadow .8s;
  box-shadow:0 24px 52px -24px rgba(0,0,0,.6);
}
.beat-deck .deck-card img{width:100%;height:100%;object-fit:cover;display:block}
.beat-deck .deck-card[data-d="0"]{transform:none;opacity:1;z-index:4;
  box-shadow:0 32px 64px -26px rgba(0,0,0,.62),0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent)}
.beat-deck .deck-card[data-d="1"]{transform:translateY(-5%) scale(.93) rotate(-2.6deg);opacity:.7;z-index:3}
.beat-deck .deck-card[data-d="2"]{transform:translateY(-9.5%) scale(.86) rotate(2deg);opacity:.4;z-index:2}
.beat-deck .deck-card[data-d="3"]{transform:translateY(-13%) scale(.81) rotate(-1.4deg);opacity:.18;z-index:1}
.beat-deck .deck-hint{position:absolute;left:0;bottom:0;height:3px;z-index:5;width:100%;
  transform:scaleX(0);transform-origin:left;pointer-events:none;border-radius:0 0 12px 12px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
.beat-deck.playing .deck-hint{animation:deckProgress var(--deck-dur,3.4s) linear}
@keyframes deckProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .beat-split{grid-template-columns:1fr;gap:1.3rem}
  .beat-deck{height:clamp(300px,80vw,420px)}
}
@media (prefers-reduced-motion:reduce){
  .beat-deck .deck-card{transition:opacity .3s}
  .beat-deck.playing .deck-hint{animation:none}
}

/* featured portrait beside text (e.g. Rainbow Jews / Rabbi Greenberg) */
.beat-portrait{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:.6rem}
.beat-portrait > figure{margin:0;position:relative}
.beat-portrait > figure > img:not(.sticker){width:100%;border-radius:6px;display:block}
@media (max-width:720px){
  .beat-portrait{grid-template-columns:1fr;gap:1.4rem}
  /* stacked: keep the portrait small and left-aligned rather than a full-width slab */
  .beat-portrait > figure{width:min(64%,300px);margin-right:auto}
}

/* die-cut sticker badges (from the print) — playful, slightly rotated, over a photo */
.sticker{
  position:absolute;height:auto;z-index:3;pointer-events:none;--rot:0deg;
  transform:rotate(var(--rot));transform-origin:center;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.35));
  animation:stickerFloat 5.5s ease-in-out infinite;
}
/* gentle continuous float + sway so the stickers feel alive */
@keyframes stickerFloat{
  0%,100%{transform:rotate(var(--rot)) translateY(0)}
  50%{transform:rotate(calc(var(--rot) - 2.5deg)) translateY(-5px)}
}
.rj-portrait .sticker-rj{--rot:-7deg;width:60%;max-width:245px;left:-6%;bottom:6%;animation-duration:6.6s}
.sticker-jewski{--rot:6deg;width:30%;max-width:205px;right:4%;bottom:5%;animation-delay:.7s}
.sticker-shl{--rot:-4deg;width:min(20%,238px);right:3%;top:100%;margin-top:-2.2rem;animation-delay:.4s}
@media (max-width:640px){
  .rj-portrait .sticker-rj{width:50%;left:-3%}
  .sticker-jewski{width:40%;right:3%;bottom:4%}
  .sticker-shl{width:31%;right:2%;top:100%;margin-top:-1rem}
}
@media (prefers-reduced-motion:reduce){ .sticker{animation:none} }
@media (max-width:640px){ .photo-duo{grid-template-columns:1fr} }
.photo-duo figure{position:relative}
.photo-duo img:not(.sticker){width:100%;height:100%;object-fit:cover;border-radius:6px}
figcaption{
  margin-top:.7rem;font-size:var(--size-caption,.85rem);line-height:1.5;opacity:.72;
  font-style:italic;font-family:var(--font-soft);
}
.caption-strip{
  margin:.9rem 0 clamp(1rem,2.5vw,1.7rem);
  width:100%;max-width:60ch;   /* readable measure; long captions wrap, leaving negative space for stickers */
  font-family:var(--font-soft);font-style:italic;
  font-size:var(--size-caption,.78rem);line-height:1.5;
  color:color-mix(in srgb,var(--ink) 66%, var(--sec-bg));
  /* paper-coloured highlight, spanning the full photo spread, so the spine stroke
     doesn't read behind the words */
  background:var(--sec-bg);padding:.35em .2em;border-radius:5px;
  position:relative;z-index:2;
}

/* program cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem;margin-top:2.6rem}
.card{
  background:#FFF;border:1px solid rgba(27,24,21,.10);border-radius:8px;
  padding:1.8rem;position:relative;overflow:hidden;
  box-shadow:0 8px 22px -16px rgba(27,24,21,.22);
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
.card h3{
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);
  margin-bottom:.9rem;
}
.card p{font-size:.92rem;color:var(--ink-soft)}
.card p strong{color:var(--ink)}
/* card with its own photo (go-deeper: Kol Yisrael / JLF) */
.card.has-photo{padding:0}
.card.has-photo figure{margin:0}
.card.has-photo figure img{width:100%;height:210px;object-fit:cover;display:block}
.card.has-photo .card-body{padding:1.7rem 1.8rem}

/* full-width single photo (e.g. the Shabbat Hosting Lab group) */
.photo-solo{margin:2.6rem 0 0;position:relative}
.photo-solo img:not(.sticker){width:100%;height:clamp(280px,40vw,520px);object-fit:cover;border-radius:6px;display:block}

/* pull-quote principle band — rich, subtly-graded deep accent + fine grain for premium depth */
.principle{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;color:var(--cream);
  padding-block:clamp(3rem,7vw,5.4rem);
  background:
    radial-gradient(120% 130% at 78% 6%, color-mix(in srgb,var(--accent-soft,var(--accent)) 92%,#fff) 0%, transparent 46%),
    linear-gradient(158deg,
      color-mix(in srgb,var(--accent-soft,var(--accent)) 73%,var(--paper-dark)) 0%,
      color-mix(in srgb,var(--accent-soft,var(--accent)) 57%,var(--paper-dark)) 100%);
}
/* fine fractal grain, kept behind the copy so text stays crisp */
.principle::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.10;mix-blend-mode:overlay;
}
.principle .inner{position:relative;z-index:1}
.principle p{max-width:min(44rem,92vw);margin:0 auto}
.pr-lead{
  display:block;font-family:var(--font-soft);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.875rem);line-height:1.1;letter-spacing:0;text-wrap:balance;
  color:var(--cream);margin:0 auto .55em;max-width:38ch;
}
.pr-main{
  display:block;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.6rem,3.9vw,2.85rem);line-height:1.16;letter-spacing:-.01em;text-wrap:balance;
  margin:0 auto;max-width:24ch;
}

/* up next */
/* final dark sections carry the route-dock clearance in their own (dark) background,
   so the floating dock rests on the band and no cream gap shows below it */
.upnext,.cta{padding-bottom:calc(var(--bar-h,76px) + 1.9rem + env(safe-area-inset-bottom, 0px))}
/* connector: continues the spine into the CTA; the stroke gradients from this
   chapter's colour into the next chapter's colour (pink→orange) so the line itself
   makes the handoff, drawn by JS */
.back-home{
  display:inline-block;margin-top:3.5rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.55;text-decoration:none;
}
.back-home:hover{opacity:1}

/* focus visibility */
a:focus-visible,button:focus-visible{outline:2px solid var(--hillel-blue);outline-offset:3px;border-radius:3px}


/* ---------- chapter footer nav ---------- */
.chapter-nav{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:3rem;
}
.chapter-nav a{
  display:inline-flex;align-items:center;gap:.5rem;
  font:700 .78rem/1 var(--font-display);letter-spacing:normal;text-transform:uppercase;
  color:var(--cream);border:1.5px solid rgba(243,238,226,.4);border-radius:999px;
  padding:.85rem 1.4rem;text-decoration:none;min-height:48px;
  transition:border-color .2s,background .2s;
}
.chapter-nav a:hover{border-color:var(--cream);background:rgba(243,238,226,.08)}
.chapter-nav a.primary{background:var(--next-accent);border-color:var(--next-accent);color:var(--paper-dark)}
.chapter-nav a.primary:hover{background:color-mix(in srgb, var(--next-accent) 85%, white)}


/* ---------- bottom route dock (two modes: home teaser / chapter wayfinding) ---------- */
:root{--bar-h:76px}
@media (max-width:760px){ :root{--bar-h:92px} }
/* a frosted, centred dock off the bottom edge — border tinted to the active chapter.
   home mode = quiet "start of journey" teaser; chapter mode = live "you are here". */
.route-dock{
  position:fixed;left:50%;transform:translateX(-50%);z-index:45;
  bottom:calc(clamp(.7rem,1.6vw,1rem) + env(safe-area-inset-bottom, 0px));
  width:min(1120px, calc(100% - clamp(1.4rem,5vw,3rem)));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"lead route cta";
  align-items:center;gap:clamp(1rem,2.4vw,2.2rem);min-height:58px;
  padding:clamp(.5rem,1.2vw,.8rem) clamp(.7rem,1.4vw,1.1rem) clamp(.5rem,1.2vw,.8rem) clamp(1rem,2vw,1.5rem);
  border-radius:clamp(16px,1.8vw,22px);color:var(--cream);
  background:color-mix(in srgb, var(--paper-dark) 84%, transparent);
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid color-mix(in srgb, var(--dock-accent,#52A9F9) 24%, rgba(243,238,226,.15));
  box-shadow:0 20px 54px -22px rgba(0,0,0,.62), inset 0 1px 0 rgba(243,238,226,.06);
}
/* LEAD */
.dock-lead{grid-area:lead;display:flex;flex-direction:column;gap:3px;min-width:0}
.dock-start{font:500 .85rem/1 var(--font-display-reg);letter-spacing:.074em;text-transform:uppercase;opacity:.92}
.dock-here{display:flex;align-items:baseline;gap:.15em;color:color-mix(in srgb,var(--cream) 60%,transparent)}
.dh-lbl{font-family:var(--font-display-bold);font-weight:400;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase}
.dh-sep{opacity:.5}
.dh-num{font-family:var(--font-soft);font-style:italic;font-weight:300;font-size:.92rem;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.dock-chapter{display:flex;align-items:baseline;gap:.42rem;white-space:nowrap}
.dock-through{font-family:var(--font-soft);font-style:italic;font-weight:400;font-size:.96rem;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.dock-name{font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1;letter-spacing:.01em;text-transform:uppercase}
/* ROUTE */
.dock-route{grid-area:route;min-width:0;display:flex;align-items:center;position:relative}
.dock-route svg{width:100%;height:34px;display:block;overflow:visible}
.dock-track{stroke:rgba(243,238,226,.16);stroke-width:2;fill:none;stroke-linecap:round}
.dock-progress{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:dockDraw .9s .12s cubic-bezier(.55,0,.2,1) forwards}
@keyframes dockDraw{to{stroke-dashoffset:0}}
.dock-seg{fill:none;stroke-width:2.5;stroke-linecap:round}
.dock-node{transition:r .3s}
.dock-ring{transform-origin:center;transform-box:fill-box}
.dock-ring.pulse-once{animation:dockPulse 2.6s ease-out 1 .5s both}
.dock-ring.glow-once{animation:dockGlow 1.7s ease-out 1 both}
@keyframes dockPulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(2.5)}100%{opacity:0;transform:scale(2.5)}}
@keyframes dockGlow{0%{opacity:.55;transform:scale(1)}100%{opacity:.16;transform:scale(1.35)}}
.dock-route a{cursor:pointer}
.dock-route a:focus-visible .dock-hit{outline:2px solid var(--hillel-blue);outline-offset:1px;border-radius:50%}
/* node lights up its own section colour on hover/focus */
.dock-route a:hover .dock-node,.dock-route a:focus-visible .dock-node{
  fill:var(--node-accent);opacity:1;filter:drop-shadow(0 0 5px var(--node-accent));transition:fill .18s,filter .18s}
/* tooltip: wears the section colour; number in Gooper italic + title in MD Nichrome caps */
.dock-tip{
  position:absolute;bottom:calc(100% + 12px);left:0;z-index:10;pointer-events:none;white-space:nowrap;
  padding:.44rem .82rem;border-radius:10px;color:#fff;
  background:color-mix(in srgb,var(--tip-accent,#52A9F9) 68%, #17120f);
  border:1px solid color-mix(in srgb,var(--tip-accent,#52A9F9) 52%, #000);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateX(-50%) translateY(4px) scale(.96);transition:opacity .16s ease,transform .16s ease}
.dock-tip.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.dock-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:color-mix(in srgb,var(--tip-accent,#52A9F9) 68%, #17120f)}
.tip-num{font-family:var(--font-soft);font-style:italic;font-weight:300;font-size:.9rem;opacity:.72}
.tip-name{font-family:var(--font-display);font-weight:700;font-size:.82rem;line-height:1;letter-spacing:.03em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){ .dock-tip{transition:none} }
/* CTA */
.dock-cta{grid-area:cta;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font:700 .86rem/1 var(--font-display);letter-spacing:normal;text-transform:uppercase;text-decoration:none;
  background:var(--cream);color:var(--paper-dark);border:1.5px solid var(--cream);
  border-radius:999px;padding:.75rem 1.25rem;min-height:44px;transition:background .2s,color .2s}
.dock-cta:hover,.dock-cta:focus-visible{background:transparent;color:var(--cream)}
/* "Next:" in Gooper italic, the chapter title in MD Nichrome Bold */
.cta-lbl{font-family:var(--font-soft);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:.9em;opacity:.9}
.cta-name{font-family:var(--font-display);font-weight:700;font-size:1.08em}
/* long CTA labels swap to a short form on phones so the type can stay legible */
.cta-short{display:none}
@media (max-width:520px){
  .cta-full{display:none}
  .cta-short{display:inline}
}
/* mobile: two rows — lead on top, route + CTA beneath */
@media (max-width:760px){
  .route-dock{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lead lead" "route cta";
    gap:.55rem .8rem;padding:.7rem .9rem}
  .dock-lead{flex-direction:row;align-items:baseline;gap:.5rem;flex-wrap:wrap}
  /* the dock CTA is the primary action and the audience skews older: it was being
     squeezed to ~10px in a 40px pill. Hold a legible size and a real tap target —
     the long labels shorten instead (see .cta-short). */
  .dock-cta{padding:.7rem 1.05rem;min-height:44px;font-size:.8rem}
  .dock-route svg{height:28px}
}
@media (max-width:420px){
  .dock-here{font-size:.55rem;letter-spacing:.10em}
  .dock-through,.dock-name{font-size:.84rem}
  .dock-cta{font-size:.76rem;padding:.68rem .85rem}
  /* the arrow and the "You are here" lead already say Next — drop the word so the
     ten-station route keeps its width instead of being crushed by the button */
  .cta-lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dock-progress{animation:none;stroke-dashoffset:0}
  .dock-ring.pulse-once,.dock-ring.glow-once{animation:none;opacity:.18}
}

/* ---------- living lines ---------- */
.spine .flow,.threads .flow{
  fill:none;stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:2 16;opacity:.45;
  animation:dashflow 1.4s linear infinite;
}
@keyframes dashflow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){
  .spine .flow,.threads .flow{animation:none;opacity:0}
}

/* ================= ONE-PAGE REPORT — stations ================= */
/* Each chapter is a .station article scoped with its own color tokens. */
.station{position:relative}

/* station-stop dwell: the cover pins for ~half a viewport before its beats arrive —
   the line pauses at the station, then travel continues. Pure position:sticky
   (no scroll-jacking), so it degrades to normal flow everywhere else. */
.cover-wrap{height:118svh}
.cover-wrap .opener{position:sticky;top:0;min-height:100svh}
@media (max-width:760px){ .cover-wrap{height:110svh} }

/* per-station cover-line gradients (ids uniquified in the merged page) */
#ch-02 .cover-line .draw{stroke:url(#coverLineGrad02)}
#ch-03 .cover-line .draw{stroke:url(#coverLineGrad03)}

/* placeholder stations 04-10: colored band + outline name; full chapters replace these */
.station-stub .stub{
  min-height:62svh;display:flex;align-items:center;color:var(--cream);
  background:
    radial-gradient(120% 140% at 82% 0%, color-mix(in srgb,var(--accent) 34%, transparent) 0%, transparent 52%),
    linear-gradient(160deg, color-mix(in srgb,var(--accent) 30%, var(--paper-dark)) 0%, var(--paper-dark) 78%);
}
.station-stub .eyebrow{color:color-mix(in srgb,var(--cream) 78%, transparent)}
.stub-through{font-family:var(--font-soft);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.4vw,2.6rem);opacity:.9}
.stub-name{
  font-family:var(--font-display);text-transform:uppercase;line-height:.95;
  font-size:clamp(2.4rem,8vw,6.8rem);color:transparent;overflow-wrap:break-word;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 70%, var(--cream));
}
.stub-note{margin-top:1.3rem;font-size:.92rem;color:color-mix(in srgb,var(--cream) 72%, transparent);max-width:44ch}

/* topbar live station label */
.topbar .here[hidden]{display:none}

/* Lenis drives the scroll on the one-page report — CSS smooth-behavior hands off */
html.has-lenis{scroll-behavior:auto}

/* ===== editorial columns — one-page density ===== */
/* intro + stats: chapter intro copy left, compact stat cards stacked right */
.intro-stats .is-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.8rem,4vw,4.2rem);align-items:center}
.intro-stats .is-stats{display:flex;flex-direction:column;gap:clamp(1rem,1.8vw,1.5rem)}
/* compact cards: ~60% of the full-width rail */
.intro-stats .statx{padding:clamp(1.3rem,2vw,1.9rem) clamp(1.4rem,2.2vw,2.1rem);border-radius:18px}
.intro-stats .statx .n{font-size:clamp(2.6rem,4.6vw,4.2rem)}
.intro-stats .statx-figure::before{font-size:clamp(4rem,8vw,6.5rem)}
.intro-stats .statx-rule{margin-top:.8rem}
.intro-stats .statx.in .statx-rule{width:clamp(44px,5vw,80px)}
.intro-stats .statx-label{margin-top:.8rem;font-size:1.18rem;max-width:30ch}
@media (max-width:900px){ .intro-stats .is-grid{grid-template-columns:1fr;gap:1.8rem} }

/* beat columns: copy + a stacked photo pair, alternating sides */
.beat-cols .bc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.8rem,4vw,4.2rem);align-items:center}
.beat-cols .bc-grid.media-left{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.beat-cols .bc-media .photo-duo{grid-template-columns:1fr;margin-top:0}
.beat-cols .bc-media .photo-duo img:not(.sticker){aspect-ratio:3/2;object-fit:cover}
.beat-cols .bc-media .caption-strip{margin-top:.9rem;margin-bottom:0}
@media (max-width:900px){
  .beat-cols .bc-grid,.beat-cols .bc-grid.media-left{grid-template-columns:1fr;gap:1.6rem}
  .beat-cols .bc-copy{order:-1}   /* copy leads when stacked */
}

/* ===== dynamic collage treatment (print-inspired: tilt, overlap, drift) ===== */
/* stat cards: staggered sizes, opposing tilts, second card overlaps the first.
   --dy is scroll micro-parallax (set by JS); transform owns BOTH reveal states
   so .reveal.in{transform:none} can't flatten the tilt. */
.intro-stats .is-stats{gap:0;position:relative}
.intro-stats .statx{width:min(92%,370px)}
.intro-stats .statx:nth-child(1){--tilt:-1.5deg;z-index:2}
.intro-stats .statx:nth-child(2){--tilt:1.8deg;width:min(82%,330px);margin:1.1rem 0 0 auto;z-index:1}
.intro-stats .statx.reveal{opacity:0;transform:translateY(calc(var(--dy,0px) + 26px)) rotate(var(--tilt,0deg))}
.intro-stats .statx.reveal.in{opacity:1;transform:translateY(var(--dy,0px)) rotate(var(--tilt,0deg))}

/* photo pairs: SIDE-BY-SIDE staggered portraits — offset baselines, opposing
   tilts, and opposing scroll drift (--dy, set by JS) create a parallax shear
   as the pair travels. On wide screens the pair bleeds to the outer page edge. */
.beat-cols .bc-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.beat-cols .bc-grid.media-left{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.beat-cols .bc-media .photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.6vw,1.2rem);align-items:start;margin-top:0}
.beat-cols .bc-media .photo-duo figure{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.beat-cols .bc-media .photo-duo figure:nth-child(1){transform:translateY(var(--dy,0px)) rotate(-1.3deg)}
.beat-cols .bc-media .photo-duo figure:nth-child(2){margin-top:clamp(1.8rem,3.4vw,3.2rem);transform:translateY(var(--dy,0px)) rotate(1.3deg)}
.beat-cols .bc-grid.media-left .photo-duo figure:nth-child(1){transform:translateY(var(--dy,0px)) rotate(1.3deg)}
.beat-cols .bc-grid.media-left .photo-duo figure:nth-child(2){transform:translateY(var(--dy,0px)) rotate(-1.3deg)}
.beat-cols .bc-media .photo-duo img:not(.sticker){aspect-ratio:1/1;object-fit:cover;box-shadow:0 20px 42px -20px rgba(0,0,0,.45)}
.beat-cols .bc-media .caption-strip{margin-top:1.2rem}
/* bleed ONLY the photo pair to the outer page edge — the caption stays in the column */
@media (min-width:1000px){
  .beat-cols .bc-grid:not(.media-left) .bc-media :is(.photo-duo,.photo-quad,.bc-solo){margin-right:calc(clamp(0px,(100vw - 1100px)/2,600px) * -1)}
  .beat-cols .bc-grid.media-left .bc-media :is(.photo-duo,.photo-quad,.bc-solo){margin-left:calc(clamp(0px,(100vw - 1100px)/2,600px) * -1)}
}

/* ===== pinned scroll carousel — scroll advances the reel, then the page releases ===== */
.pin-carousel{padding:0;height:calc(100svh + (var(--slides,4) - 1) * 55svh)}
.pin-carousel .pc-sticky{
  position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
  padding:clamp(1.6rem,4.2vw,3.4rem) var(--pad);
}
.pin-carousel .inner{width:100%}
.pc-stage{position:relative;height:clamp(340px,52svh,560px)}
.pc-slide{
  position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transform:translateY(5%) scale(.97);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.pc-slide img{width:100%;height:100%;object-fit:cover;border-radius:14px;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.5)}
.pc-slide.is-active{opacity:1;transform:none}
.pc-slide.is-passed{opacity:0;transform:translateY(-5%) scale(1.02)}   /* exits upward — filmstrip */
/* progress: the reel is a segment of the line */
.pc-ui{position:absolute;right:-1.5rem;top:6%;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.pc-line{flex:1;width:3px;border-radius:2px;background:color-mix(in srgb,var(--accent) 22%, transparent);overflow:hidden}
.pc-line i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top;border-radius:2px}
.pc-count{font:700 .68rem/1 var(--font-display);letter-spacing:.04em;white-space:nowrap;
  color:color-mix(in srgb,var(--accent) 55%, var(--ink))}
.pc-count .pc-cur{font-size:1.05rem}
/* responsive: below 1000px the pin gives way to a native swipe strip */
@media (max-width:999px){
  .pin-carousel{height:auto;padding:clamp(2.3rem,8.5vw,3.2rem) 0}
  .pin-carousel .pc-sticky{position:static;min-height:0;display:block;padding:0 clamp(1.9rem,8vw,2.4rem)}
  .pc-stage{height:auto;display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.6rem;scrollbar-width:none}
  .pc-stage::-webkit-scrollbar{display:none}
  .pc-slide{position:relative;inset:auto;flex:0 0 82%;aspect-ratio:3/2;
    opacity:1!important;transform:none!important;pointer-events:auto;scroll-snap-align:center}
  .pc-ui{display:none}
}
/* reduced motion: no pin, no scrub — the photos simply stack, all visible */
@media (prefers-reduced-motion:reduce){
  .pin-carousel{height:auto}
  .pin-carousel .pc-sticky{position:static;min-height:0}
  .pc-stage{height:auto}
  .pc-slide{position:relative;inset:auto;opacity:1;transform:none;transition:none;margin-bottom:.8rem;aspect-ratio:3/2}
  .pc-ui{display:none}
}

/* ===== pinned horizontal travel gallery — the journey turns sideways ===== */
.hscroll{padding:0}
.hscroll .hs-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;padding:0 var(--pad)}
.hs-track{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);will-change:transform}
.hs-panel{flex:0 0 auto;margin:0}
.hs-panel img:not(.sticker){height:min(60svh,540px);width:auto;border-radius:14px;display:block;
  box-shadow:0 24px 48px -22px rgba(0,0,0,.45)}
.hs-intro{width:min(44vw,560px);padding-right:2vw}
/* below the pin threshold (and under reduced motion) it's a native swipe strip */
@media (max-width:999px), (prefers-reduced-motion:reduce){
  .hscroll{height:auto!important}
  .hscroll .hs-sticky{position:static;height:auto;display:block;padding:clamp(2.3rem,8.5vw,3.2rem) clamp(1.9rem,8vw,2.4rem)}
  .hs-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:none;align-items:flex-start}
  .hs-track::-webkit-scrollbar{display:none}
  /* while the strip introduces itself, snap must not fight the pan */
  .hs-track.hs-auto{scroll-snap-type:none}
  .hs-panel{scroll-snap-align:center}
  .hs-intro{width:min(82vw,430px);padding:0 0 1rem}
}

/* ===== living covers — depth parallax during the station-stop dwell =====
   --cp (0..1, set by JS) = dwell progress; photo and cutout drift apart. */
@media (prefers-reduced-motion:no-preference){
  .cover-wrap .cover-bg,.cover-wrap .wash{
    transform:scale(calc(1.04 + var(--cp,0) * .06)) translateY(calc(var(--cp,0) * -2.2%));
    transition:transform .25s linear;
  }
  .cover-wrap .cover-cut{
    transform:scale(calc(1.01 + var(--cp,0) * .02)) translateY(calc(var(--cp,0) * 1.6%));
    transition:transform .25s linear;
  }
  .cover-wrap .opener .inner{transform:translateY(calc(var(--cp,0) * -14px));transition:transform .25s linear}
}

/* ===== word scrub — the thesis assembles as you arrive ===== */
[data-words] .w{opacity:.14;transition:opacity .4s ease}
[data-words] .w.on{opacity:1}

/* cards lift on hover (pointer devices only) */
@media (hover:hover){
  .card{transition:transform .35s ease,box-shadow .35s ease}
  .card:hover{transform:translateY(-4px)}
}

/* text-heavy hs-intro panels (e.g. the basketball beat): wider column, and the
   copy tightens on short viewports so the pinned panel never clips */
.hs-intro{width:min(46vw,600px)}
.hs-intro .caption-strip{margin-bottom:0}
@media (max-height:780px) and (min-width:1000px){
  .hs-intro .lede{font-size:1.02rem}
  .hs-intro h2{font-size:clamp(1.5rem,2.4vw,2rem)}
}

/* ===== "the relay" — one line travels beneath the row; each shot lights as it passes =====
   Clean composition: four uniform frames on gently alternating baselines, a single
   soft line drawing left-to-right BEHIND them (visible in the gaps), the 1-in-3
   stat delivered at the line's end. All the drama is in the sequence. */
.play-court{position:relative;margin-top:clamp(2rem,4vw,3.2rem)}
.relay-wrap{position:relative}
.play-line{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.play-line path{
  fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;opacity:.85;
  stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;
}
.relay-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.play-shot{
  margin:0;position:relative;z-index:1;
  filter:saturate(.3) brightness(.95);opacity:.75;
  transform:translateY(calc(var(--off,0px) + 10px)) scale(.97);
  transition:filter .6s ease,opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.play-shot:nth-child(even){--off:16px}
.play-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block;
  box-shadow:0 18px 38px -18px rgba(0,0,0,.42)}
.play-shot.lit{filter:none;opacity:1;transform:translateY(var(--off,0px)) scale(1)}
/* the stat lands at the end of the line — right-aligned under the row */
.play-stat{
  margin:clamp(1.6rem,3vw,2.4rem) 0 0 auto;width:max-content;max-width:min(60%,30rem);text-align:right;
  opacity:.25;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;
}
.play-stat.lit{opacity:1;transform:none}
.ps-num{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:.9;
  color:color-mix(in srgb,var(--accent) 70%, var(--ink))}
.ps-label{display:block;margin-top:.5rem;font-family:var(--font-soft);font-weight:500;
  font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.35;color:var(--ink-soft);text-wrap:balance}
/* reduced motion: line drawn, everything lit */
@media (prefers-reduced-motion:reduce){
  .play-line path{stroke-dashoffset:0}
  .play-shot{filter:none;opacity:1;transform:translateY(var(--off,0px));transition:none}
  .play-stat{opacity:1;transform:none;transition:none}
}
/* mobile: 2-up grid, line hidden, stat beneath */
@media (max-width:999px){
  .play-line{display:none}
  .relay-row{grid-template-columns:1fr 1fr;gap:.9rem}
  .play-shot{filter:none;opacity:1;transform:none}
  .play-shot:nth-child(even){--off:0px;margin-top:1.4rem}
  .play-stat{margin-top:1.4rem;text-align:left;margin-left:0;max-width:none;opacity:1;transform:none}
}

/* compact travel gallery (basketball): smaller frames, and the 1-in-3 stat
   rides the track as the final stop */
.hs-compact .hs-panel img:not(.sticker){height:min(46svh,400px)}
.hs-stat{align-self:center;padding:0 3vw 0 1vw;text-align:left;white-space:nowrap}
.hs-stat .ps-label{white-space:normal;max-width:22ch}
@media (max-width:999px), (prefers-reduced-motion:reduce){
  .hs-stat{padding:0 1rem}
}

/* ===== pickleball: podium hero + snapshot inset =====
   The podium (the outcome) runs full width; the close-up rides its corner
   as a tilted print-snapshot (cream border), drifting slightly with scroll. */
.pickle-hero{position:relative}
.pickle-hero .ph-main{margin:0}
.pickle-hero .ph-main img{width:100%;height:clamp(300px,44vw,560px);object-fit:cover;border-radius:14px;display:block;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.4)}
.pickle-hero .ph-inset{
  position:absolute;right:3%;bottom:-9%;width:min(22%,230px);margin:0;z-index:2;
  transform:translateY(var(--dy,0px)) rotate(3deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.pickle-hero .ph-inset img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;
  border:4px solid var(--cream);box-shadow:0 22px 46px -18px rgba(0,0,0,.55)}
/* the snapshot fills the right side; caption sits normally on the left */
.pickle-hero + .caption-strip{margin-top:1.1rem}
@media (max-width:640px){
  .pickle-hero .ph-inset{width:32%;bottom:-7%}
}

/* four-photo shear mosaic: two staggered columns, opposing tilt + drift */
.photo-quad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.6vw,1.2rem);align-items:start}
.photo-quad figure{margin:0;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.photo-quad figure:nth-child(odd){transform:translateY(var(--dy,0px)) rotate(-1.2deg)}
.photo-quad figure:nth-child(even){margin-top:clamp(1.4rem,2.6vw,2.4rem);transform:translateY(var(--dy,0px)) rotate(1.2deg)}
.photo-quad img:not(.sticker){width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block;
  box-shadow:0 18px 38px -18px rgba(0,0,0,.42)}

/* single split-bleed photo inside a beat column (e.g. the ballgames crowd) */
.bc-solo{margin:0;transition:transform .55s cubic-bezier(.2,.7,.2,1);transform:translateY(var(--dy,0px))}
.bc-solo img:not(.sticker){width:100%;height:clamp(320px,44vw,600px);object-fit:cover;border-radius:14px;display:block;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.42)}
.bc-media .bc-solo + .caption-strip{margin-top:1rem;margin-bottom:0}

/* ===== convergence — the two program cards slide in from opposite sides =====
   Scroll-scrubbed (no pin): --cx eases to 0 as the beat crosses the viewport,
   so the pair meets in under one scroll gesture. Transform owns both reveal
   states so .reveal.in can't cancel the slide. */
.cards.converge .card.reveal{opacity:0;transform:translateX(var(--cx,0px)) translateY(18px)}
.cards.converge .card.reveal.in{opacity:1;transform:translateX(var(--cx,0px))}

/* ===== The Numbers: compact station plate =====
   The overview chapter gets a different kind of cover: a short, pure-type
   band (no photo, no dwell) — you read the plate and roll straight into
   the journey. Full covers + dwells stay reserved for the photo chapters. */
.nums-cover{
  min-height:52svh;
  background:linear-gradient(165deg, color-mix(in srgb,var(--c01) 84%, #16233A) 0%, color-mix(in srgb,var(--c01) 56%, var(--paper-dark)) 100%);
}
.nums-cover .st-h1{font-size:clamp(2.8rem,8.5vw,6.6rem)}

/* ===== wide intro: heading spans both cards; the lede sets in two text columns ===== */
.wide-intro{max-width:none}
.wide-intro h2{max-width:24ch}
@media (min-width:900px){
  .wide-intro .lede{max-width:none;column-count:2;column-gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:1.2rem}
}

/* ===== MOBILE PASS — final overrides (placed last so they win the cascade) ===== */
@media (max-width:900px){
  /* beat columns collapse to a single column (a later 6fr/6fr base rule was
     silently beating the original mobile query) */
  .beat-cols .bc-grid,.beat-cols .bc-grid.media-left{grid-template-columns:1fr}
}
@media (max-width:999px){
  /* gallery copy reads as a normal block above the strip (JS moves it out of
     the track); the strip is photos only */
  .hscroll > .hs-intro{width:auto;padding:clamp(2.3rem,8.5vw,3.2rem) clamp(1.9rem,8vw,2.4rem) 0}
  .hs-intro{width:auto}
  /* pickleball: the caption wraps in the space left of the overhanging snapshot */
  .pickle-hero + .caption-strip{margin-left:0;max-width:56%}
}
@media (max-width:760px){
  /* ten nodes in ~150px can never be honest tap targets — on phones the dock's
     nodes read as progress; navigation is the Contents menu + the Next button */
  .dock-route a{pointer-events:none}
}

@media (max-width:999px){
  /* every swipe slide fits the screen: aspect preserved, bounded both ways */
}

/* ===== program stickers (print die-cuts) on their beats ===== */
.hs-panel{position:relative}
.photo-quad{position:relative}
/* square tournament badge: bottom-left of the gallery's opening shot */
.sticker-bball{--rot:-7deg;width:37%;max-width:157px;left:-5%;bottom:-6%;animation-delay:.3s}
/* wide tour banner: stamped across the mosaic's centre seam */
.sticker-uj{--rot:-4deg;width:36%;max-width:238px;left:28%;top:41%;animation-delay:.5s}
/* camp script logo: riding the pair's bottom-right corner */
.sticker-chb{--rot:5deg;width:41%;max-width:246px;right:-3%;top:-5%;bottom:auto;animation-delay:.6s}

/* index section: mobile browse button (grid hides on phones) */
.index-browse{
  display:none;width:max-content;margin:1.7rem auto 0;align-items:center;gap:.5rem;
  font:700 .9rem/1 var(--font-display);text-transform:uppercase;letter-spacing:normal;
  color:var(--cream);background:transparent;border:1.5px solid rgba(243,238,226,.4);
  border-radius:999px;padding:.85rem 1.5rem;min-height:48px;cursor:pointer;
}
.index-browse:active{background:rgba(243,238,226,.12)}

/* ===== MOBILE PASS II — phones get shorter thresholds and no duplicate TOC ===== */
@media (max-width:760px){
  /* the chapter-card list duplicates the Contents overlay — keep the framing,
     swap the grid for one button that opens the overlay */
  .index .chapters{display:none}
  .index-browse{display:flex}
  /* covers: photo + title in about half a screen, no dwell pin — phone scrolling
     is flickier, a held cover reads as a bug */
  .cover-wrap{height:auto}
  /* relative, NOT static: static would re-parent the absolute cover photo to the
     whole station and paint it behind the entire chapter */
  .cover-wrap .opener{position:relative;min-height:44svh}
  .opener{min-height:50svh}
  .cover-opener,.cover-wrap .cover-opener{min-height:44svh}
  .nums-cover{min-height:32svh}
  /* the wide tour banner tames down on phones */
  .sticker-uj{width:37%;max-width:157px;top:38%}
}

@media (max-width:999px){
  /* the swipe strips own their horizontal gesture on touch devices */
  .hs-track{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
}

/* ================= CH-04 LEV — the Wall of 300 ================= */
/* per-station cover-line: LEV lime */
#ch-04 .cover-line .draw{stroke:url(#coverLineGrad04)}

/* intro: copy left, the 300/25/3 typographic stack right */
.lev-intro .li-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.8rem,4vw,4.2rem);align-items:center}
.li-stack{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.4rem)}
.lis{display:flex;align-items:baseline;gap:.7rem;padding-bottom:clamp(.5rem,1vw,.8rem)}
.lis-n{font-family:var(--font-display);font-size:clamp(3rem,6vw,5.3rem);line-height:.9;letter-spacing:-.015em;color:var(--c04)}
.lis-l{font-family:var(--font-soft);font-style:italic;font-weight:400;font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.25;color:var(--ink-soft)}

/* the wall: full-bleed, three columns drifting at different depths */
.lev-wall{padding:clamp(1rem,2.5vw,2.5rem) clamp(.8rem,1.6vw,1.6rem)}
.wall-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.1rem);max-width:1500px;margin:0 auto;align-items:start}
.wall-col{display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.1rem);
  transform:translateY(var(--dy,0px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wall-col:nth-child(2){margin-top:clamp(2rem,4vw,3.6rem)}
.wall-col:nth-child(3){margin-top:clamp(1rem,2vw,1.8rem)}
.wf{margin:0}
.wf img{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 16px 34px -18px rgba(0,0,0,.38)}
/* statement tiles live INSIDE the wall — navy, lime + cream type */
.wall-tile{border-radius:10px;background:linear-gradient(155deg,var(--c04) 0%, color-mix(in srgb,var(--c04) 82%, #0A1226) 100%);
  color:var(--cream);padding:clamp(1.3rem,2.4vw,2.2rem);box-shadow:0 16px 34px -18px rgba(0,0,0,.4)}
.wt-head p{font-family:var(--font-head);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.25;text-wrap:balance;
  color:var(--c04b)}
.wq-body{font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.55;color:color-mix(in srgb,var(--cream) 92%, transparent)}
.wq-pull{margin-top:.9rem;font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;color:var(--c04b)}

/* survey band: navy, lime counting numbers */
.lev-stats,.stat-band{background:linear-gradient(165deg, color-mix(in srgb,var(--accent,var(--c04)) 92%, #0A1226) 0%, color-mix(in srgb,var(--accent,var(--c04)) 70%, var(--paper-dark)) 100%);
  color:var(--cream);padding-block:clamp(3rem,6.5vw,5rem)}
.ls-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem);text-align:center}
.ls-n{display:block;font-family:var(--font-display);font-size:clamp(3rem,6vw,5.3rem);line-height:.9;letter-spacing:-.012em;color:var(--accent-light,var(--c04b))}
.ls-l{display:block;margin-top:.8rem;font-family:var(--font-soft);font-weight:400;line-height:1.3;font-size:clamp(.85rem,1.3vw,1.05rem);
  letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 88%, transparent);text-wrap:balance}

/* finale: all 300 in one frame */
.lev-finale .lf-photo{margin:0;position:relative}
.lev-finale .lf-photo img:not(.sticker){width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 26px 54px -26px rgba(0,0,0,.5)}
.sticker-lev{--rot:-6deg;width:min(18%,190px);left:2.5%;top:-6%;animation-delay:.4s}

/* mobile: two wall columns (third folds away), intro stacks, band stacks */
@media (max-width:900px){
  .lev-intro .li-grid{grid-template-columns:1fr;gap:1.6rem}
  .li-stack{flex-direction:row;gap:1.2rem}
  .lis{flex-direction:column;align-items:flex-start;gap:.2rem;flex:1}
}
@media (max-width:760px){
  .wall-cols{grid-template-columns:1fr 1fr}
  .wall-col.wc-3{display:none}
  .ls-row{grid-template-columns:1fr;gap:2rem}
  .sticker-lev{width:30%;top:-5%}
}

/* ================= CH-05 EMERGING CAMPUSES ================= */
#ch-05 .cover-line .draw{stroke:url(#coverLineGrad05)}
/* live CSS duotone cover (no official art): grayscale photo + chapter tint */
.duo-cover .cover-bg{filter:grayscale(1) contrast(1.05) brightness(.82)}
.duo-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 88%, #0A1B2E) 0%, color-mix(in srgb,var(--accent) 55%, #0A1B2E) 100%);
  mix-blend-mode:color}
.duo-cover::after{background:linear-gradient(180deg, rgba(10,16,26,.18) 0%, rgba(10,16,26,.55) 100%)}

/* the em intro mirrors LEV's grid (stat first) */
.em-intro .li-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.em-intro .lis-l{max-width:16ch}

/* ghost divider — outline type marks the section break */
.em-divider-sec{padding-block:clamp(1.4rem,3vw,2.6rem)}
.em-divider{
  font-family:var(--font-display);text-transform:uppercase;line-height:1;text-wrap:balance;
  font-size:clamp(2rem,6.2vw,5.2rem);letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 75%, var(--ink));
}

/* the 22/7 pair rides under the beat, side by side */
.em-pair{display:flex;flex-direction:column;justify-content:center;margin-top:clamp(1.8rem,3.4vw,3rem);gap:clamp(1.6rem,3vw,2.4rem)}
/* horizontal gradient stat cards: number left, label right, card hugs content */
.statx-row{display:flex;align-items:center;gap:clamp(1.2rem,2.2vw,1.9rem);
  width:fit-content;min-width:min(100%,20rem);max-width:100%;
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1.4rem,2.6vw,2.1rem)}
.statx-row .statx-figure{flex:0 0 auto}
.statx-row .n{font-size:clamp(2.5rem,4.2vw,3.75rem);line-height:1}
.statx-row .statx-figure::before{font-size:clamp(4rem,7.5vw,6.75rem)}
.statx-row .statx-label{margin-top:0;font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.3;max-width:20ch}

/* pull quote strip */
.pq-sec{padding-block:clamp(2.4rem,5vw,4rem)}
.pull-quote{margin:0 auto;max-width:52rem;text-align:center}
.pull-quote p{font-family:var(--font-soft);font-style:italic;font-weight:400;
  font-size:var(--size-pullquote,clamp(1.3rem,2.6vw,2.1rem));line-height:1.35;color:var(--ink);text-wrap:balance}
.pull-quote cite{display:block;margin-top:1.1rem;font-style:normal;
  font:900 .9rem/1.4 var(--font-body);letter-spacing:.03em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%, var(--ink))}

/* CRCSS decision callout */
.em-callout{
  margin:clamp(1.8rem,3.4vw,3rem) 0;
  border-left:4px solid var(--accent-soft,var(--accent));border-radius:0 12px 12px 0;
  background:color-mix(in srgb,var(--accent) 8%, var(--cream));
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1.4rem,2.8vw,2.2rem);
}
.em-callout p{font-size:1.02rem;line-height:1.65;color:var(--ink);max-width:70ch}

/* profile card */
.em-profile{padding-block:clamp(1rem,2vw,2rem)}
.emp-card{
  max-width:56rem;margin:0 auto;border-radius:18px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 14%, var(--cream)) 0%, var(--cream) 70%);
  border:1px solid color-mix(in srgb,var(--accent) 26%, transparent);
  padding:clamp(1.8rem,3.4vw,2.8rem);
}
.emp-name{font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1;margin:.35rem 0 .4rem}
.emp-role{font:700 .74rem/1.4 var(--font-head);letter-spacing:.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 62%, var(--ink))}
.emp-bio{margin-top:1rem;font-size:var(--size-body-md,.92rem);line-height:var(--leading-body-md,1.6);color:var(--ink-soft)}

/* tall solo photos inside beat columns */
.bc-solo.bc-tall img:not(.sticker){height:clamp(360px,50vw,640px)}
.sticker-anywhere{--rot:-5deg;width:min(46%,240px);left:-4%;top:-4%;animation-delay:.4s}

/* student quote cards (converge pair) */
.em-quotes{margin-top:clamp(1.8rem,3.4vw,3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem}
.quote-card{margin:0;background:#fff;border-radius:14px;padding:clamp(1.4rem,2.6vw,2rem);
  border:1px solid color-mix(in srgb,var(--ink) 8%, transparent);
  box-shadow:0 10px 26px -22px color-mix(in srgb,var(--ink) 30%, transparent)}
.quote-card p{font-family:var(--font-soft);font-style:normal;font-weight:400;font-size:var(--size-quote,1.05rem);line-height:1.5;color:var(--ink)}
.quote-card cite{display:block;position:relative;margin-top:1.1rem;padding-top:.95rem;font-style:normal;
  font:900 .9rem/1.4 var(--font-body);letter-spacing:.03em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 62%, var(--ink));
  border-top:1.5px solid color-mix(in srgb,var(--accent) 30%, transparent)}
.quote-card cite::before{ /* station dot riding the hairline track */
  content:"";position:absolute;left:0;top:-5.5px;width:9.5px;height:9.5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px #fff}

@media (max-width:900px){
  .em-intro .li-grid{grid-template-columns:1fr}
  .em-pair{flex-direction:column}
  .sticker-anywhere{width:46%;top:-3%}
}

/* ================= THE DIVISION SYSTEM (ch-05 + ch-06) =================
   New-division sections read like a mini-brochure inside the report:
   tinted canvas (painted below the spine by JS), collage masthead with a
   corner title block + italic tagline, wave divider, headshot profile cards. */
#tint-host{position:absolute;inset:0 0 auto 0;z-index:0;pointer-events:none}
.station-tint{position:absolute;left:0;width:100%}

/* masthead */
.div-mast{padding:0;position:relative}
.dm-collage{position:relative;display:grid;grid-template-columns:3fr 2fr;gap:6px;height:min(60svh,600px)}
.dm-collage figure{margin:0;overflow:hidden}
.dm-collage img:not(.sticker){width:100%;height:100%;object-fit:cover;display:block}
.dm-title{
  position:absolute;left:0;bottom:clamp(2.6rem,7vw,5rem);z-index:2;
  background:var(--accent);color:var(--cream);border-radius:0 14px 14px 0;
  padding:clamp(.9rem,2vw,1.6rem) clamp(1.3rem,2.8vw,2.4rem) clamp(.9rem,2vw,1.6rem) var(--pad);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.dm-title .st-h1{font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1}
.dm-title .through{font-size:clamp(1.1rem,2.2vw,1.9rem);margin-bottom:.05em}
.dm-tag{
  position:absolute;right:var(--pad);bottom:clamp(3.2rem,8vw,6rem);z-index:2;
  max-width:min(46%,30rem);text-align:right;color:#FFF;
  font-family:var(--font-head);font-weight:700;font-size:clamp(1rem,1.8vw,1.45rem);line-height:1.3;
  text-shadow:0 2px 16px rgba(0,0,0,.55);text-wrap:balance;
}
.dm-tag .gold{font-family:var(--font-soft);font-style:italic;font-weight:400;color:#F0C75E}
.dm-wave{display:block;width:100%;height:clamp(22px,3vw,36px);margin-top:clamp(.6rem,1.4vw,1rem)}
.sticker-fs{--rot:-6deg;width:min(26%,240px);right:2%;top:5%;animation-delay:.4s}

/* campus list panel (cream card on the tinted canvas) */
.campus-list{
  margin-top:clamp(1.4rem,2.8vw,2.2rem);border-radius:14px;background:var(--cream);
  border:1px solid color-mix(in srgb,var(--accent) 20%, transparent);
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1.4rem,2.8vw,2.2rem);
}
.campus-list p{font-size:.98rem;line-height:1.9;color:var(--ink-soft);max-width:none}
.campus-list i{font-style:normal;color:var(--accent);margin:0 .35em}

/* headshot profile cards */
.emp-has-photo{position:relative;padding-left:clamp(8.2rem,14vw,10.5rem)}
.emp-photo{
  position:absolute;left:clamp(1.6rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
  width:clamp(5rem,9vw,6.5rem);height:clamp(5rem,9vw,6.5rem);border-radius:50%;object-fit:cover;
  border:3px solid var(--cream);box-shadow:0 10px 26px -12px rgba(0,0,0,.4);
  background:color-mix(in srgb,var(--accent) 30%, #fff);
}

@media (max-width:760px){
  .dm-collage{grid-template-columns:1fr;height:auto}
  .dm-collage figure:first-child img:not(.sticker){height:44svh}
  .dm-collage figure:last-child{display:none}
  .dm-title{position:static;border-radius:0;padding:1.1rem clamp(1.9rem,8vw,2.4rem);box-shadow:none}
  .dm-tag{position:static;max-width:none;text-align:left;color:var(--ink);text-shadow:none;
    padding:1rem clamp(1.9rem,8vw,2.4rem) 0}
  .dm-tag .gold{color:color-mix(in srgb,var(--accent) 70%, var(--ink))}
  .sticker-fs{width:34%;top:3%}
  .emp-has-photo{padding-left:clamp(1.4rem,6vw,2rem);padding-top:5.6rem}
  .emp-photo{left:clamp(1.4rem,6vw,2rem);top:1.4rem;transform:none;width:4.4rem;height:4.4rem}
}

/* ================= CH-07 ADVOCACY — the dark chapter =================
   The station canvas is near-black (tint layer under the spine, so the
   light-blue line travels visibly over it); serious case-study material
   sits in cream light-panels, like the print's white interludes. */
#ch-07 .cover-line .draw{stroke:url(#coverLineGrad07)}
#ch-07 .principle{--accent-soft:var(--c05-deep)}   /* deep blue band; the light accent would sink the cream text */

/* dark scheme */
.station-dark{color:var(--cream)}
.station-dark h2,.station-dark h3{color:var(--cream)}
.station-dark .lede{color:color-mix(in srgb,var(--cream) 84%, transparent)}
.station-dark .lede strong{color:var(--cream)}
.station-dark .caption-strip{color:color-mix(in srgb,var(--cream) 60%, var(--sec-bg))}
.station-dark .eyebrow{color:var(--accent-light,var(--accent))}
/* --accent-text mixes 55% toward INK: right for eyebrows on cream, but on a dark
   panel it sinks the label into the background (the contents eyebrow measured
   1.14:1). Every dark context lifts to the light accent instead. */
.on-dark .eyebrow,.index .eyebrow,.isr-dark .eyebrow{color:var(--accent-light,var(--c05b))}
/* ch-10's Press / Recognition kickers sit on cream in the C10 blue: 3.85:1, just
   under the floor. The deep tone of the same hue clears it without changing the look. */
#ch-10 .eyebrow{color:#245A8C}
/* ...but not where the eyebrow sits on a white card inside a dark section */
.on-dark .card .eyebrow,.on-dark .quote-card .eyebrow,.on-dark .light-panel .eyebrow{color:var(--accent-text)}
.station-dark .lis-n{color:var(--accent-light,var(--accent))}
.station-dark .lis-l{color:color-mix(in srgb,var(--cream) 75%, transparent)}


/* light interludes restore the ink scheme */
.light-panel{background:var(--cream);--sec-bg:var(--cream)}
.station-dark .light-panel{color:var(--ink)}
.station-dark .light-panel h2,.station-dark .light-panel h3{color:var(--ink)}
.station-dark .light-panel .lede{color:var(--ink-soft)}
.station-dark .light-panel .lede strong{color:var(--ink)}
.station-dark .light-panel .caption-strip{color:color-mix(in srgb,var(--ink) 66%, var(--cream))}

/* inline quote (Menachem) */
.inline-quote{margin:1rem 0 1.4rem;border-left:3px solid var(--accent);padding-left:1.2rem}
.inline-quote p{font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.35;color:var(--cream);text-wrap:balance}
.inline-quote cite{display:block;margin-top:.7rem;font-style:normal;
  font:900 .9rem/1.4 var(--font-body);letter-spacing:.03em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 70%, transparent)}

/* case cards + tags */
.case-tag{font:700 .68rem/1 var(--font-display-bold);letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 58%, var(--ink));margin-bottom:.7rem}
.case-card p+p{margin-top:.8rem}
.case-card{font-size:.99rem;line-height:1.62;color:var(--ink-soft)}
.case-card strong{color:var(--ink)}
.case-card h3{font-family:var(--font-head);font-weight:700;font-size:1.15rem;line-height:1.3;margin-bottom:.6rem;color:var(--ink)}

/* quote-profile cards */
.quote-card .q-bio{margin-top:.9rem;font-family:var(--font-body);font-style:normal;font-size:var(--size-body-md,.92rem);line-height:var(--leading-body-md,1.6);color:var(--ink-soft)}
.quote-card .eyebrow{margin-bottom:.6rem}

/* international trio inherits .cards; tighter titles */
.intl-cards .card h3{font-family:var(--font-display-bold);font-weight:400;font-size:1.36rem;letter-spacing:.4px;text-transform:uppercase;color:var(--hillel-blue)}

/* where-it-happens bars — the line, quantified */
.rep-grid{align-items:start}
.wh-bars{border:1px solid color-mix(in srgb,var(--accent) 30%, transparent);border-radius:14px;
  padding:clamp(1.2rem,2.2vw,1.8rem);background:color-mix(in srgb,var(--accent) 7%, transparent)}
.wh-title{font:700 .7rem/1 var(--font-display);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-light,var(--accent));margin-bottom:1.1rem}
.wh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:.8rem;align-items:center;margin-top:.75rem}
.wh-l{font-size:.88rem;line-height:1.4;color:color-mix(in srgb,var(--cream) 78%, transparent)}
.wh-bar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--cream) 10%, transparent);overflow:hidden}
.wh-bar i{display:block;height:100%;width:var(--w,0%);border-radius:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .2s}
.reveal.in .wh-bar i, .wh-bars.in .wh-bar i{transform:scaleX(1)}
.wh-n{font:700 .95rem/1 var(--font-display);color:var(--cream)}

/* the 100% band + the 72/96 pair */
.big-band{margin-top:clamp(1.8rem,3.4vw,2.8rem);display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.2rem);
  border-radius:16px;background:linear-gradient(135deg,var(--accent) 0%, color-mix(in srgb,var(--accent) 70%, #0A1B2E) 100%);
  color:#fff;padding:clamp(1.4rem,2.8vw,2.2rem)}
.bb-n{font-family:var(--font-display-bold);font-size:clamp(3rem,6vw,5rem);line-height:.9;letter-spacing:-1px;white-space:nowrap}
.bb-l{font-size:clamp(.98rem,1.6vw,1.2rem);line-height:1.45;max-width:34ch;text-wrap:balance}
.mini-duo{margin-top:clamp(1rem,2vw,1.6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.mini{border-radius:14px;background:var(--cream);color:var(--ink);padding:.95rem 1.25rem;
  display:flex;align-items:center;gap:1.1rem}
.mini-n{display:block;flex:0 0 auto;font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;
  color:color-mix(in srgb,var(--accent) 62%, var(--ink))}
.mini p{margin:0;font-size:.92rem;line-height:1.45;color:var(--ink-soft);max-width:26ch}
.rep-note{margin-top:1rem;font-family:var(--font-soft);font-style:italic;font-size:1.125rem;color:var(--accent-light,var(--accent))}

.sticker-roots{--rot:6deg;width:min(34%,220px);right:-3%;top:-6%;animation-delay:.5s}

@media (max-width:900px){
  .mini-duo{grid-template-columns:1fr}
  .big-band{flex-direction:column;align-items:flex-start;gap:.8rem}
  .wh-bars{margin-top:1.4rem}
}

/* ===== LEV elevation: the wall blooms, the Havdalah goes cinematic, the finale reveals ===== */
/* wall photos wait in chapter-navy duotone and colorize as they cross the viewport */
@media (prefers-reduced-motion:no-preference){
  .lev-wall .wf{position:relative}
  .lev-wall .wf img{filter:grayscale(1) brightness(.94);transition:filter .8s ease}
  .lev-wall .wf::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
    background:var(--c04);mix-blend-mode:color;opacity:.85;transition:opacity .8s ease}
  .lev-wall .wf.lit img{filter:none}
  .lev-wall .wf.lit::after{opacity:0}
}

/* cinematic Havdalah band — full-bleed night shot, parallax scale via --sp */
.hav-band{position:relative;overflow:hidden;isolation:isolate;min-height:92svh;display:flex;align-items:flex-end;
  padding:clamp(2.5rem,6vw,5rem) var(--pad)}
.hb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(calc(1.16 - var(--sp,0) * .13)) translateY(calc((1 - var(--sp,0)) * -2%));
  transition:transform .3s linear}
.hav-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,8,16,.15) 0%, rgba(10,8,16,.72) 78%)}
.hav-band .inner{position:relative;z-index:2;width:100%}
.hb-copy{max-width:44rem}
.hb-lede{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.6;color:color-mix(in srgb,#FFF 92%, transparent);text-wrap:balance}
.hb-pull{margin-top:1rem;font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.05;color:var(--c04b);
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){ .hb-bg{transform:none;transition:none} }

/* finale: the group photo pulls back to fit all 300 */
.lf-photo{overflow:hidden;border-radius:14px}
.lf-photo img:not(.sticker){
  transform:scale(calc(1.14 - var(--sp,0) * .14));
  transition:transform .3s linear;transform-origin:center 40%}
@media (prefers-reduced-motion:reduce){ .lf-photo img:not(.sticker){transform:none;transition:none} }

/* ===== LEV v3: compact plate + the converging wall ===== */
/* plate header: type-led, the numbers are the poster */
.lev-plate{
  min-height:74svh;
  background:linear-gradient(165deg, color-mix(in srgb,var(--c04) 88%, #0A1226) 0%, color-mix(in srgb,var(--c04) 62%, var(--paper-dark)) 100%);
}
.lev-plate .st-h1{font-size:clamp(2.8rem,8.5vw,6.6rem)}
.plate-stats{display:flex;gap:clamp(1.6rem,4vw,3.6rem);margin-top:clamp(1.8rem,3.6vw,3rem)}
.ps{display:flex;flex-direction:column;gap:.15rem;padding-right:clamp(1.6rem,4vw,3.6rem);
  border-right:1px solid color-mix(in srgb,var(--cream) 22%, transparent)}
.ps:last-child{border-right:0;padding-right:0}
.ps-n{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,5rem);line-height:.9;letter-spacing:-.02em;color:var(--c04b)}
.ps-l{font-family:var(--font-soft);font-style:italic;font-weight:500;font-size:clamp(.95rem,1.6vw,1.25rem);
  color:color-mix(in srgb,var(--cream) 80%, transparent)}

/* intro ledes side-by-side; wall heading */
.duo-ledes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.4vw,3rem)}
.wall-head{padding-bottom:clamp(1.5rem,2.8vw,2.6rem)}
.wall-head h2{max-width:26ch}

/* the converging wall: photos arrive from every direction and assemble */
@media (prefers-reduced-motion:no-preference){
  .lev-wall{--e:min(1, calc(var(--sp, 0) * 3))}
  .lev-wall .wf{
    transform:translate(calc(var(--cx,0px) * (1 - var(--e))), calc(var(--cy,70px) * (1 - var(--e))))
              rotate(calc(var(--cr,0deg) * (1 - var(--e))));
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .wall-col:nth-child(1) .wf{--cx:-140px;--cr:-3deg}
  .wall-col:nth-child(2) .wf{--cx:0px;--cy:170px;--cr:2.4deg}
  .wall-col:nth-child(3) .wf{--cx:140px;--cr:3deg}
  .wall-col .wf:nth-child(even){--cy:120px}
  .wall-col:nth-child(1) .wf:nth-child(odd){--cx:-190px}
  .wall-col:nth-child(3) .wf:nth-child(even){--cx:190px}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .wall-col:nth-child(1) .wf{--cx:-70px}
  .wall-col:nth-child(1) .wf:nth-child(odd){--cx:-95px}
  .wall-col:nth-child(3) .wf{--cx:70px}
  .wall-col:nth-child(3) .wf:nth-child(even){--cx:95px}
}
@media (max-width:760px){
  .plate-stats{gap:1.2rem}
  .ps{padding-right:1.2rem}
  .duo-ledes{grid-template-columns:1fr;gap:1.1rem}
  .lev-plate{min-height:44svh}
}

/* LEV plate, print-matched: duotone crowd under the stacked declaration */
.lev-plate{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center}
.lp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lev-plate::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, color-mix(in srgb,var(--c04) 55%, transparent) 0%, transparent 70%)}
.lp-wave{position:absolute;top:clamp(4.2rem,7vw,5.5rem);left:0;width:100%;height:clamp(28px,4vw,52px);z-index:2}
.lp-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none}
.lev-plate .inner{position:relative;z-index:3}
.lp-eyebrow{
  margin-top:clamp(1.4rem,3vw,2.4rem);
  font:700 clamp(.8rem,1.4vw,1.05rem)/1.5 var(--font-display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c04b);max-width:26ch;
}
.lp-stack{margin-top:.55rem;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(1.1rem,2.8vw,2.4rem);row-gap:.15rem}
.lp-stack span{
  display:block;font-family:var(--font-head);font-weight:700;color:#FFF;
  font-size:clamp(1.7rem,3.7vw,3.4rem);line-height:1.12;letter-spacing:-.01em;white-space:nowrap;
}
.lp-stack b{font-weight:700;color:var(--accent-light,#DAE587)}

/* LEV band v2: the 300-person panorama is the climax — pull-back reveal keeps meaning */
.hav-band{min-height:0;height:clamp(430px,68svh,700px)}
.hav-band .sticker-lev{left:auto;right:2.5%;top:6%;width:min(15%,170px);z-index:2}
.hb-lede{max-width:46ch}
@media (max-width:760px){
  .hav-band{height:auto;padding:0}
  .hb-bg{position:relative;height:48svh}
  .hav-band::after{background:linear-gradient(180deg, transparent 0%, transparent 30%, rgba(10,8,16,.82) 78%)}
  .hav-band .inner{position:absolute;bottom:1.2rem;left:0;right:0;padding:0 clamp(1.9rem,8vw,2.4rem)}
  .hb-lede{font-size:.92rem}
  .hav-band .sticker-lev{width:26%;top:3%}
}

/* plate eyebrow: Gooper regular, all caps (print-matched) */
.lp-eyebrow{
  font-family:var(--font-soft);font-weight:400;font-style:normal;
  font-size:clamp(.95rem,1.7vw,1.3rem);letter-spacing:.1em;
}

/* ===== ch-05 compression: denser rows, standard cover ===== */
.cl-head{font:700 .78rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%, var(--ink));margin-bottom:.8rem}
.campus-list{margin-top:clamp(1.6rem,3vw,2.6rem)}
/* the 22/7 pair and the Mia quote share one row */
.sc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.6rem,3.4vw,3rem);
  align-items:center;margin-top:clamp(1.8rem,3.4vw,3rem)}
.sc-row .em-pair{margin-top:0}
/* the CRCSS closing copy and Mia's profile card share one row */
.adv-close{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(1.6rem,3.4vw,3rem);
  align-items:center;margin-top:clamp(1.6rem,3vw,2.6rem)}
.adv-close .emp-card{max-width:none;margin:0}
@media (max-width:900px){
  .sc-row,.adv-close{grid-template-columns:1fr;gap:1.4rem}
}

/* ===== ch-05 cleanup: wide horizontal Mia card w/ the sticker-collage portrait ===== */
.emp-wide{
  display:grid;grid-template-columns:clamp(180px,24%,260px) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:end;
  max-width:none;margin:clamp(1.8rem,3.4vw,3rem) 0 0;padding:0;overflow:hidden;
}
.emp-collage{
  width:100%;height:auto;display:block;align-self:end;
  padding-left:clamp(1.2rem,2.4vw,2rem);
}
.emp-wide .emp-body{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem) 0}
@media (max-width:760px){
  .emp-wide{grid-template-columns:1fr;align-items:start}
  .emp-collage{max-width:240px;padding:1.2rem 0 0 1.2rem}
  .emp-wide .emp-body{padding:1rem 1.4rem 1.4rem}
}

/* ch-05 routing: the list keeps a right gutter so the line rides beside it */
.campus-list{max-width:56rem}

/* ch-05: the closing copy sits in the right column, clear of the line's rail */
.ac-right{margin-left:0;max-width:none}

/* ===== campus ribbon — the network as two counter-flowing streams of stops ===== */
.campus-ribbon{padding:clamp(1.4rem,2.8vw,2.4rem) 0;overflow:hidden;position:relative;z-index:1;background:var(--sec-bg,var(--cream))}  /* above the spine: the line passes behind the flowing list */
.cr-label{
  padding:0 var(--pad);margin-bottom:1rem;
  font:700 .72rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%, var(--ink));
}
.sr-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cr-row{display:flex;align-items:center;gap:2.4rem;width:max-content;white-space:nowrap;will-change:transform}
.cr-row+.cr-row{margin-top:1rem}
.cr-row span{font-family:var(--font-soft);font-style:italic;font-weight:500;font-size:1.25rem;color:var(--ink-soft)}
.cr-row i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.65;flex:0 0 auto}
@keyframes crFlow{to{transform:translateX(-50%)}}
.cr-a{animation:crFlow 75s linear infinite}
.cr-b{animation:crFlow 95s linear infinite reverse}
@media (prefers-reduced-motion:reduce){
  .cr-a,.cr-b{animation:none;width:auto;white-space:normal;flex-wrap:wrap;gap:.9rem 1.4rem;padding:0 var(--pad)}
}

/* ch-05 cover: shorter band, no dwell (the wide art suits it) */
#ch-05 .cover-wrap{height:auto}
/* the band follows the art's native ratio (5100x2420) so nothing crops */
#ch-05 .cover-wrap .opener{position:relative;min-height:0;width:100%;aspect-ratio:5100/2179}
@media (max-width:760px){ #ch-05 .cover-wrap .opener{aspect-ratio:auto;min-height:clamp(280px,38svh,380px)} }

/* typographic widow control on display copy and paragraphs */
.statement{text-wrap:balance}
.lede,.hb-lede,.emp-bio,.quote-card p{text-wrap:pretty}

/* ===== LEV band v3: copy reads on cream; only the pull rides the photo ===== */
.hav-lead{padding-bottom:clamp(.8rem,1.6vw,1.4rem)}
.hav-band .inner{display:flex;align-items:flex-end;min-height:inherit}
.hav-band .hb-pull{margin:0}

/* ===== mobile strips hardened: uniform filmstrip, gentle snap, no transform hints ===== */
@media (max-width:999px){
  .hs-track{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;will-change:auto;align-items:center;padding-bottom:.6rem}
  .hscroll .hs-panel img:not(.sticker),.hs-compact .hs-panel img:not(.sticker){height:min(40svh,300px);width:auto;max-width:86vw;object-fit:cover;border-radius:12px}
  .hs-stat{align-self:center;max-width:72vw;padding:0 1.4rem}
  .hs-stat .ps-num{font-size:clamp(2.2rem,9vw,3rem)}
  .hs-stat .ps-label{max-width:24ch}
}

/* ch-05: long chapter name — smaller title so the short cover stays short */
#ch-05 .cover-opener .st-h1{font-size:clamp(2.4rem,6vw,5rem)}
#ch-05 .cover-opener .through{font-size:clamp(1.5rem,3vw,2.4rem)}
#ch-05 .cover-opener .statement{margin-top:clamp(1rem,2vw,1.6rem);font-size:clamp(1.15rem,2.2vw,1.7rem)}

/* ===== ch-06 cover: ratio-true band (art 5372x2444), sized title for the long name ===== */
#ch-06 .cover-line .draw{stroke:url(#coverLineGrad06)}
#ch-06 .cover-wrap{height:auto}
#ch-06 .cover-wrap .opener{position:relative;min-height:0;width:100%;aspect-ratio:auto;height:clamp(340px,62svh,640px)}
#ch-06 .cover-opener .st-h1{font-size:clamp(2.4rem,6vw,5rem)}
#ch-06 .cover-opener .through{font-size:clamp(1.5rem,3vw,2.4rem)}
#ch-06 .cover-opener .statement{margin-top:clamp(1rem,2vw,1.6rem);font-size:clamp(1.1rem,2vw,1.6rem);max-width:34ch}
@media (max-width:760px){ #ch-06 .cover-wrap .opener{aspect-ratio:auto;min-height:clamp(280px,38svh,380px)} }

/* ch-07 principle: the dark chapter's soft token is light-blue (right for headings
   on dark) but too light behind cream band text — the band uses the deep blue */
#ch-07 .principle{
  background:
    radial-gradient(120% 130% at 78% 6%, color-mix(in srgb,#317BBF 92%,#fff) 0%, transparent 46%),
    linear-gradient(158deg, color-mix(in srgb,#317BBF 73%,var(--paper-dark)) 0%, color-mix(in srgb,#317BBF 57%,var(--paper-dark)) 100%);
}

/* centre rails need real channels: wider column gaps, headings clear of centre */
.wide-intro h2{max-width:30ch;margin-left:0;margin-right:auto}
@media (min-width:900px){ .wide-intro .lede{column-gap:clamp(3rem,6vw,5rem)} }
.duo-ledes{gap:clamp(2.6rem,5vw,4.5rem)}

/* ===== Meet cards v2: smaller portrait, layered assembly, livelier quotes ===== */
.emp-wide{grid-template-columns:clamp(130px,16%,180px) minmax(0,1fr)}
.collage-stack{position:relative;width:100%;align-self:center}
.collage-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
/* the sticker assembles when the card reveals: block stamps, outline pops, portrait rises */
@media (prefers-reduced-motion:no-preference){
  .emp-card .cs-block,.fellow-card .cs-block{opacity:0;transform:scale(.9) rotate(-2.5deg);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .emp-card .cs-outline,.fellow-card .cs-outline{opacity:0;transform:scale(.82);transform-origin:bottom center;transition:opacity .35s ease .22s,transform .5s cubic-bezier(.34,1.56,.64,1) .22s}
  .emp-card .cs-photo,.fellow-card .cs-photo{opacity:0;transform:translateY(12%);transition:opacity .5s ease .4s,transform .6s cubic-bezier(.2,.7,.2,1) .4s}
  .emp-card.in .cs-block,.fellow-card.in .cs-block{opacity:1;transform:none}
  .emp-card.in .cs-outline,.fellow-card.in .cs-outline{opacity:1;transform:none}
  .emp-card.in .cs-photo,.fellow-card.in .cs-photo{opacity:1;transform:none}
}

/* quote cards: ghost mark drifts behind, accent tick draws in, gentle hover lift */
.quote-card{position:relative;overflow:visible}
.quote-card::before{
  content:"\201C";position:absolute;top:-.74em;left:-.08em;z-index:2;pointer-events:none;
  font-family:var(--font-soft);font-style:italic;font-weight:500;line-height:1;
  font-size:clamp(4.5rem,8vw,6.5rem);color:color-mix(in srgb,var(--accent) 55%, transparent);
  transform:translateY(var(--dy,0px));transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.quote-card p,.quote-card cite{position:relative;z-index:1}
@media (hover:hover){
  .quote-card{transition:transform .35s ease,box-shadow .35s ease}
  .quote-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px color-mix(in srgb,var(--ink) 32%, transparent)}
}
/* the big pull-quotes get the ghost mark too */
.pull-quote{position:relative}
.pull-quote::before{
  content:"\201C";position:absolute;top:-.42em;left:-.06em;z-index:0;pointer-events:none;
  font-family:var(--font-soft);font-style:italic;line-height:1;
  font-size:clamp(6rem,11vw,9rem);color:color-mix(in srgb,var(--accent) 12%, transparent);
}
.pull-quote p{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  }

/* ===== seam tightening: consecutive beats sit closer ===== */
main .story + .story{padding-top:clamp(1.1rem,2.4vw,2rem)}
.hscroll + section{padding-top:clamp(1rem,2vw,1.8rem)}
/* the gallery pin centres its track in a smaller box — less dead air at entry/exit */
@media (min-width:1000px){
  .hscroll .hs-sticky{height:calc(100svh - 112px);top:56px}
}

/* "genuinely magical." carries its weight inside the paragraph */
.mag{font-family:var(--font-soft);font-style:italic;font-weight:500;font-size:1.18em;
  color:color-mix(in srgb,var(--c04) 78%, var(--ink))}

/* ===== ADVOCACY CASE BOARD (PDF checkerboard: photo/copy alternating) ===== */
.case-board{display:grid;gap:clamp(2.4rem,4.5vw,4rem);margin-top:clamp(2.2rem,4vw,3.2rem)}
.cb-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.4vw,3.2rem);align-items:stretch}
.cb-photo{margin:0;border-radius:16px;overflow:hidden;position:relative;min-height:280px}
.cb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cb-copy{align-self:center}
.cb-copy p{font-size:var(--size-body,1rem);line-height:var(--leading-body,1.68);margin:0 0 1.05em;max-width:58ch}
.cb-copy p:last-child{margin-bottom:0}
.light-panel .cb-copy p{color:color-mix(in srgb, var(--ink) 88%, transparent)}
.light-panel .cb-copy strong{color:var(--ink)}
@media (max-width:760px){
  .cb-row{grid-template-columns:1fr;gap:1.1rem}
  .cb-flip .cb-photo{order:-1}  /* photo above its copy when stacked */
  .cb-photo{min-height:0;aspect-ratio:16/9}
  .cb-photo img{position:absolute}
  .case-board{gap:2.2rem}
}

/* ch-07 cover: bottom fade lands on the section bg so the photo blends into the chapter */
#ch-07 .cover-opener::after{
  background:
    linear-gradient(90deg, rgba(23,20,17,.80) 0%, rgba(23,20,17,.40) 36%, rgba(23,20,17,0) 66%),
    linear-gradient(0deg, #171411 0%, rgba(23,20,17,.85) 12%, rgba(23,20,17,.35) 34%, rgba(23,20,17,0) 58%);
}

/* panel head: headline left, lede right — fills the panel width */
.panel-head{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:end}
.panel-head h2{margin:0;max-width:none}
.panel-head .lede{margin:0;max-width:52ch}
@media (max-width:820px){
  .panel-head{grid-template-columns:1fr;gap:1.2rem}
}

/* quote pair: flank strips paint the section bg over the spine so no stray
   rail can ever sit beside the boxes, regardless of viewport routing */
.em-quotes{position:relative}
/* the quote block is a full-bleed plate on the spine's layer — the line passes
   behind it entirely, at every viewport width */
.em-quotes{
  position:relative;z-index:1;background:var(--sec-bg,var(--cream));
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  padding-top:36px;margin-top:calc(clamp(1.8rem,3.4vw,3rem) - 36px);
  padding-bottom:18px;margin-bottom:-18px;
}
.em-quotes > *{position:relative;z-index:1}

/* travel galleries, medium tier (761-1279px): swipeable strip with roomier imagery */
@media (min-width:761px) and (max-width:999px){
  .hscroll .hs-panel img:not(.sticker),.hs-compact .hs-panel img:not(.sticker){height:min(50svh,420px);max-width:70vw}
  .hs-intro,.hscroll > .hs-intro{max-width:56ch}
  .hs-track{gap:1.2rem}
}

/* signatures, compact tier (must trail the base rules) */
@media (max-width:899px){
  .signatures{gap:1.5rem 1.5rem}
  .signatures .sig{width:min(150px,100%);height:2rem}
  .signatures b{font-size:.85rem}
  .signatures span{font-size:.8rem}
}

/* strip-mode gallery controls: arrows + grab cursor + visible scrollbar (mouse users) */
.hs-nav{display:none;gap:.6rem;justify-content:flex-end;padding:0 clamp(1.9rem,8vw,2.4rem) 1.2rem}
.hs-arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 55%, transparent);
  background:var(--sec-bg,var(--cream));color:var(--accent-text);font-size:1.15rem;line-height:1;
  cursor:pointer;transition:background .2s,transform .2s;display:grid;place-items:center;
}
.hs-arrow:hover:not(:disabled){background:var(--accent);color:#fff;transform:translateY(-1px)}
.hs-arrow:disabled{opacity:.3;cursor:default}
.station-dark .hs-arrow{background:transparent;color:var(--accent-light,var(--accent))}
@media (max-width:999px){
  .hs-track{cursor:grab;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%, transparent) transparent}
  .hs-track::-webkit-scrollbar{display:block;height:7px}
  .hs-track::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 40%, transparent);border-radius:4px}
  .hs-track::-webkit-scrollbar-track{background:transparent}
}
@media (max-width:760px){ .hs-nav{display:none!important} }  /* phones: swipe is native */

/* phone strips: sticker tucks inside the frame (the scroller clips overhangs),
   and the next photo peeks in to make the swipe obvious */
@media (max-width:760px){
  .sticker-bball{left:2%;bottom:2%;width:40%}
  .hscroll .hs-panel img:not(.sticker),.hs-compact .hs-panel img:not(.sticker){max-width:74vw}
  .hs-track{scroll-padding-left:1rem}
}

/* the strip must never scroll vertically inside itself (reads as a glitch) */
@media (max-width:999px){
  .hs-track{overflow-y:hidden;overscroll-behavior-x:contain}
}

/* Meet cards on phones: single column — portrait on top, copy stacked below,
   everything flush left (must trail the v2 grid rules) */
@media (max-width:760px){
  .emp-wide{grid-template-columns:1fr;align-items:start;gap:0;padding:1.4rem 1.3rem}
  .emp-wide .emp-collage{max-width:175px;width:100%;padding:0;align-self:start;margin:0}
  .emp-wide .emp-body{padding:1.1rem 0 0;text-align:left}
}

/* phones: the flank strips would amputate the edge-routed line mid-photo —
   instead the quote cards bleed a touch wider so the rail passes BEHIND them */


/* LEV band sticker clusters: moose+heart pair bottom-left counterweights the
   logo top-right; candles tuck under the logo. Corners only — the crowd stays clear. */
.hav-band .sticker-lev-moose{left:2.2%;bottom:4.5%;width:min(13%,150px);--rot:-8deg;animation-delay:.6s}
.hav-band .sticker-lev-heart{left:11.5%;bottom:17%;width:min(8.5%,100px);--rot:9deg;animation-delay:1.1s;z-index:4}
.hav-band .sticker-lev-candles{right:3.2%;top:24%;width:min(5.5%,64px);--rot:6deg;animation-delay:.9s}
@media (max-width:760px){
  .hav-band .sticker-lev-moose{width:20%;left:3%;bottom:5%}
  .hav-band .sticker-lev-heart{width:13%;left:17%;bottom:19%}
  .hav-band .sticker-lev-candles{width:9%;top:auto;bottom:8%;right:4%}
}

/* Meet cards: print type treatment — Gooper italic "Meet", NM Bold name, Gooper caps role */
.emp-card .eyebrow{
  font-family:var(--font-soft);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1;
  color:var(--accent-text);margin-bottom:.2rem;
}
.emp-card .emp-name{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em}
.emp-card .emp-role{font:500 .8rem/1.5 var(--font-soft);font-style:normal;letter-spacing:.05em;text-transform:uppercase}

/* stat pair on phones: ledger rows — number left, label beside, slim cards */
@media (max-width:760px){
  .em-pair{gap:.7rem}
  .em-pair .statx{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1.3rem;border-radius:16px}
  .em-pair .statx .n{font-size:2.3rem;line-height:1}
  .em-pair .statx-figure{min-width:3.1ch;text-align:center}
  .em-pair .statx-figure::before{display:none}   /* ghost echo off at this scale */
  .em-pair .statx-rule{display:none}
  .em-pair .statx-label{margin:0;font-size:1.18rem;line-height:1.35}
}

/* mobile TOC: the button gives way to a swipeable station strip — ten chips,
   each carrying its chapter color, jumping straight to the station */
.toc-chips{display:none}
@media (max-width:760px){
  .index-browse{display:none}
  .toc-chips{
    display:flex;gap:.55rem;overflow-x:auto;padding:.4rem 2px 1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .toc-chips::-webkit-scrollbar{display:none}
  .tc{
    flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
    padding:.92rem 1.15rem;border-radius:999px;text-decoration:none;
    border:1px solid color-mix(in srgb,var(--dot) 55%, transparent);
    color:var(--cream);font:500 .85rem/1 var(--font-head);white-space:nowrap;
  }
  .tc b{font:700 .8rem/1 var(--font-display);color:var(--dot)}
  .tc:active{background:color-mix(in srgb,var(--dot) 22%, transparent)}
}

/* leadership photo: settles into place on scroll — rise, scale-settle, grade-in */
@media (prefers-reduced-motion:no-preference){
  .letter-hero .slt-photo img{
    transform:translateY(calc((1 - var(--sp,1)) * 26px)) scale(calc(1 + var(--sp,0) * .06));
    transform-origin:bottom center;
    filter:saturate(calc(.72 + var(--sp,1) * .28));
    transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease;
    will-change:transform;
  }
}

/* LEV wall on phones: the three columns become three slow auto-panning
   filmstrip rows (alternating directions) — every photo drifts past */
@media (max-width:760px){
  .lev-wall{overflow:hidden}
  .wall-cols{display:block;max-width:none}
  .wall-col,.wall-col.wc-3{display:flex;flex-direction:row;width:max-content;gap:.6rem;margin:0 0 .6rem}
  .wall-col:nth-child(2),.wall-col:nth-child(3){margin-top:0}
  .wall-col .wf{margin:0}
  .wall-col .wf img{height:148px;width:auto;display:block;border-radius:10px}
  @media (prefers-reduced-motion:no-preference){
    .wall-col{animation:wallPan var(--pan-dur,32s) ease-in-out infinite alternate}
    .wall-col:nth-child(2){animation-direction:alternate-reverse}
  }
}
@keyframes wallPan{from{transform:translateX(0)}to{transform:translateX(var(--pan,-320px))}}

/* Meet collage: scrapbook sway — the assembled sticker lifts and tilts a touch
   as the card transits the viewport (scrubbed, reversible, motion-safe) */
@media (prefers-reduced-motion:no-preference){
  .emp-card .collage-stack,.fellow-card .collage-stack{
    transform:translateY(calc((.5 - var(--sp,.5)) * 20px)) rotate(calc((var(--sp,.5) - .5) * 1.7deg));
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
}

/* ch-05 beat copy: a touch narrower so the descending curve clears the line-endings */
@media (min-width:1280px){ #ch-05 .beat-cols .bc-copy .lede{max-width:34ch} }

/* ===== 35,663 finale: the line arrives in the number =====
   gradient fill (chapter blue pouring into ink), outlined destination ghost
   behind the live counter, gentle scrubbed zoom */
.nj-total .inner{position:relative}
.nj-total-num{
  position:relative;z-index:1;
  background:linear-gradient(178deg, var(--c01) 4%, color-mix(in srgb,var(--c01) 42%, var(--ink)) 42%, var(--ink) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nj-total-ghost{
  position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;user-select:none;
  transform:translate(calc(-50% + 1.2vw), calc(-50% - 2.4vw));
  font-family:var(--font-display);font-size:clamp(5rem,26vw,20rem);line-height:.84;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--c01) 34%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .nj-total .inner{transform:scale(calc(.94 + var(--sp,.5) * .08));transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
}
@media (max-width:760px){ .nj-total-ghost{-webkit-text-stroke-width:1.2px} }

/* ===== STATION HANDOFF: the line marks every chapter switch =====
   a gradient seam (previous chapter's colour flowing into this one) crosses the
   top of each cover, with a station dot at centre — the transit map made literal */
.cover-wrap{position:relative}
.cover-wrap::before,.lev-plate::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg, var(--prev-accent,var(--accent)) 0%, var(--accent) 62%);
}
/* interchange glyph (built by JS at the LINE's x): the traveling dot hands off
   into this ring — it arrives in the departing colour, switches to the arriving
   colour while docked (pulsing), and stays lit as a passed station */
.lev-plate{position:relative}
.ic{position:absolute;top:0;z-index:7;width:17px;height:17px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--cream);border:2.5px solid var(--ic-prev,var(--accent));
  pointer-events:none}
.ic i{position:absolute;inset:2px;border-radius:50%;background:var(--ic-prev,var(--accent));
  transform:scale(0);transition:transform .45s cubic-bezier(.2,.7,.3,1),background .55s ease}
.ic.approach i{transform:scale(1)}
.ic.docked i,.ic.departed i{transform:scale(1);background:var(--ic-next,var(--accent))}
/* Arrival ripple: ONE slow ring on docking, then the station rests lit.
   The old loop ran 1.5s forever AND its keyframe returned to a visible ring at
   100% — so every cycle ended with the ring snapping back into existence. That
   snap is what read as blinking. A single ease-out ripple states the arrival and
   stops, instead of beaconing at the reader for the whole cover dwell. */
.ic.docked i{animation:icPulse 2.4s cubic-bezier(.16,.7,.3,1) 1 both}
@keyframes icPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ic-next,var(--accent)) 52%, transparent)}
  100%{box-shadow:0 0 0 11px color-mix(in srgb,var(--ic-next,var(--accent)) 0%, transparent)}
}
@media (prefers-reduced-motion:reduce){
  .ic i{animation:none!important;transition:none;transform:scale(1);background:var(--ic-next,var(--accent))}
}

/* ===== PRINCIPLE BANDS: nudge up + settle-in motion ===== */
.principle{margin-top:clamp(-.5rem,-1vw,0rem)}
@media (prefers-reduced-motion:no-preference){
  .principle .pr-lead{transform:translateY(calc((1 - min(var(--sp,1) * 2, 1)) * 16px));opacity:min(calc(var(--sp,1) * 2.6), 1);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
  .principle .pr-main{transform:translateY(calc((1 - min(var(--sp,1) * 1.7, 1)) * 24px));opacity:min(calc(var(--sp,1) * 2.2), 1);transition:transform .6s cubic-bezier(.2,.7,.2,1) .05s,opacity .6s ease .05s}
}

/* ===== PINNED GALLERY AFFORDANCE: progress rail + fading hint ===== */
@media (min-width:1000px){
  .hscroll .hs-sticky::after{
    content:"";position:absolute;left:var(--pad);right:auto;z-index:5;height:3px;
    bottom:calc(50% - min(30svh, 270px) - 26px);
    /* the rail is full-width and SCALED by progress — scaleX is GPU-composited,
       so it never triggers layout mid-scroll the way animating width did */
    width:calc(100% - var(--pad) * 2);
    transform:scaleX(var(--hsp,0));transform-origin:left center;
    background:var(--accent);border-radius:2px;pointer-events:none;
    opacity:min(.85, (1 - var(--hsp,0)) * 10);
    transition:transform .15s linear,opacity .3s ease;
    will-change:transform;
  }
  .hs-compact .hs-sticky::after{bottom:calc(50% - min(23svh, 200px) - 26px)}
  .hs-hint{
    position:absolute;right:var(--pad);bottom:12px;z-index:5;
    background:none;border:0;cursor:pointer;padding:.5rem .2rem;
    font:400 .75rem/1 var(--font-display-bold);letter-spacing:.083em;text-transform:uppercase;
    color:var(--accent-text);opacity:calc(1 - var(--hsp,0) * 7);transition:opacity .2s;
  }
  .hs-hint span{display:inline-block;animation:hintNudge 1.6s ease-in-out infinite}
  .station-dark .hs-hint{color:var(--accent-light,var(--accent))}
}
@media (max-width:999px){ .hs-hint{display:none} }
@keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){ .hs-hint span{animation:none} }

/* walkthrough batch 3 */
#ch-02 .card h3{font-family:var(--font-display-bold);font-weight:400;font-size:1.5rem;letter-spacing:.5px;color:var(--c02)}                /* program titles in JL pink */
@media (min-width:900px){
  #ch-03 .intro-stats{padding-bottom:clamp(.8rem,1.6vw,1.4rem)}                      /* less air under last stat card */
  .story:has(.pickle-hero) .narrow{max-width:76ch}                                   /* copy reaches toward the inset */
  .story:has(.pickle-hero){padding-bottom:clamp(1.6rem,3vw,2.4rem)}
}
.hs-compact .hs-track{gap:clamp(.7rem,1.6vw,1.3rem)}                                 /* tighter reel */
main .story + .story.tight-top{padding-top:.5rem}                                    /* feeds title closer to photos */

/* walkthrough batch 4 — LEV */
@media (min-width:900px){
  .lp-eyebrow{max-width:none}                             /* two lines, not three */
  .lp-stack{width:100%;justify-content:space-between;column-gap:0}
  .lp-stack span{font-size:clamp(2rem,4.4vw,4rem)}      /* declaration spans the plate */
}
/* band stickers live ON THE PAGE, overlapping the photo's frame — the wrapper
   escapes the band's clipping so they hang over the top/bottom seams */
.hav-wrap{position:relative}
.hav-wrap .sticker{animation:none;z-index:4}
.hav-wrap .sticker-lev-moose{left:3%;bottom:-3.6rem;width:min(13.5%,160px);--rot:-9deg}
.hav-wrap .sticker-lev-heart{left:17.5%;bottom:-1.4rem;width:min(8%,96px);--rot:10deg}
.hav-wrap .sticker-lev-candles{right:20%;top:-2.6rem;width:min(5.5%,64px);--rot:7deg}
@media (max-width:760px){
  .hav-wrap .sticker-lev-moose{width:20%;left:4%;bottom:-2.2rem}
  .hav-wrap .sticker-lev-heart{width:12%;left:27%;bottom:-1rem}
  .hav-wrap .sticker-lev-candles{width:9%;top:-1.6rem;right:26%}
}

@media (max-width:760px){ #ch-06 .cover-wrap .opener{height:clamp(270px,40svh,380px)} }

/* quote boxes, take three: the FLUSH tick stays on the card; the stray line goes.
   The whole quote block paints the section bg so no rail can show beside or
   between the boxes at any width. */
.quote-card{overflow:visible}
/* left-edge strip retired — attribution now carries the route motif (see cite rule) */
.em-quotes{background:var(--sec-bg,var(--cream))}

/* Emerging quotes: the Kol Yisrael / JLF program-card container style —
   white card, 8px radius, thin border, crisp 4px accent edge (no ghost mark) */
#ch-05 .quote-card{background:#FFF;border:1px solid rgba(27,24,21,.10);border-radius:8px;
  padding:1.8rem;overflow:hidden;box-shadow:0 8px 22px -16px rgba(27,24,21,.22)}
#ch-05 .pull-quote, #ch-06 .li-copy{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}
#ch-05 .quote-card::before{content:"";top:0;left:0;bottom:0;right:auto;width:4px;height:auto;
  font-size:0;transform:none;background:var(--accent)}

/* Emerging quote feature: real photo anchored over its halftone echo (print
   accent language), quote beside; the second quote staggers below-right */
.em-qfeature{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
  gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center;margin-top:clamp(2rem,4vw,3.4rem)}
/* halftone flush left and large (her face reads); the candid overlaps bottom-right */
.eqf-media{position:relative;padding:0 8% 12% 0}
.eqf-half{display:block;width:100%;opacity:1}
.eqf-photo{position:absolute;right:0;bottom:0;width:46%;border-radius:8px;display:block;
  box-shadow:0 22px 44px -20px color-mix(in srgb,var(--ink) 48%, transparent)}
/* quiet quote column: no ghost mark behind the text */
.em-qfeature .pull-quote::before{display:none}
/* Emilio's testimony lives inside Mia's profile card — proof under the bio */
/* Cortland: open editorial pull-quote beside the layered photos (no box) */
.eqf-quote{margin:0;max-width:none;text-align:left}
.eqf-quote p{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.45}
@media (max-width:820px){
  .em-qfeature{grid-template-columns:1fr;gap:1.4rem}
  .eqf-media{padding:7% 12% 0 0}
}


/* ===== ADVOCACY walkthrough (desktop notes) ===== */

/* light-bg headings: the soft span uses the darker blue for contrast */
#ch-07 .light-panel h2 .soft{color:var(--c05-deep)}

/* SHARE stat band on the light grouping */
.lev-stats.light-panel .ls-n{color:var(--c05-deep)}
.lev-stats.light-panel .ls-l{color:var(--ink-soft)}

/* Melissa/Leo: stacked rows — square photo beside the copy box */
.quote-rows{display:grid;gap:clamp(1.3rem,2.6vw,2rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.quote-rows .quote-card{display:grid;grid-template-columns:minmax(230px,32%) minmax(0,1fr);padding:0;overflow:hidden}
.quote-rows .quote-card figure{margin:0;height:100%}
.quote-rows .quote-card figure img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.quote-rows .quote-card .card-body{padding:clamp(1.5rem,2.6vw,2.2rem)}
.quote-rows .qr-flip{grid-template-columns:minmax(0,1fr) minmax(230px,32%)}
.quote-rows .qr-flip figure{order:2}
.quote-rows .quote-card::before{display:none}   /* ghost mark clutters the horizontal card */
#ch-07 .quote-rows .eyebrow{color:#2C5E8C}   /* Melissa's Voice / Leo's Story — on white, so the deep tone */
/* student-government panel: breathing room after the dark band; title centred
   against the lede instead of hanging at the column bottom */
#ch-07 .sg-panel{padding-top:clamp(3rem,6vw,5rem)}
#ch-07 .sg-panel .panel-head{align-items:center}
@media (max-width:760px){
  .quote-rows .quote-card,.quote-rows .qr-flip{grid-template-columns:1fr}
  .quote-rows .qr-flip figure{order:0}
  .quote-rows .quote-card figure img{min-height:0;aspect-ratio:16/9}
  /* Melissa is framed high in her portrait; a centred crop cuts her face —
     hold the band near the top (Leo is a wide room shot, keep it centred) */
  .quote-rows .quote-card:not(.qr-flip) figure img{object-position:50% 16%}
}

/* Reclaiming: heading breathes onto two lines; ROOTS sticker sits between the photos */
#ch-07 .light-panel.beat-cols h2{max-width:24ch}
.sticker-roots{left:50%;top:6%;translate:-50% -50%;width:min(38%,210px)}

/* international cards: two compact up top, WUJS spans full width as a horizontal feature */
.intl-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.intl-wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(240px,34%) minmax(0,1fr)}
.intl-wide figure{height:100%}
.intl-wide figure img{height:100%!important;min-height:230px;object-fit:cover}
@media (max-width:860px){
  .intl-cards{grid-template-columns:1fr}
  .intl-wide{grid-template-columns:1fr}
  .intl-wide figure img{min-height:0}
}

/* Every report: the mantra is its own centred beat */
.rep-head{text-align:center;margin-bottom:clamp(1.8rem,3.4vw,3rem)}
.rep-head h2{max-width:none;margin:0 auto}

/* evidence cards: native-ratio photos, print-scale titles and tags */
#ch-07 .case-card figure img{height:auto;object-fit:unset}
#ch-07 .case-card .case-tag{font-size:1.125rem;letter-spacing:.3px;color:var(--ink-soft)}
#ch-07 .case-card h3{font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;text-transform:none;line-height:1.2}


/* ===== international stage v2: one feature, two tickets ===== */
.intl-feature{
  display:grid;grid-template-columns:minmax(240px,36%) minmax(0,1fr);align-items:stretch;
  border:1px solid color-mix(in srgb,var(--accent) 26%, transparent);
  border-radius:18px;overflow:hidden;margin-top:clamp(1.6rem,3vw,2.4rem);
  background:color-mix(in srgb,var(--cream) 5%, transparent);
}
.intl-feature figure{margin:0;height:100%}
.intl-feature figure img{width:100%;height:100%;min-height:0;max-height:340px;object-fit:cover;display:block}
.if-body{padding:clamp(1.6rem,3vw,2.6rem);align-self:center}
.if-body h3{font-family:var(--font-display-bold);font-weight:400;font-size:1.36rem;letter-spacing:.4px;text-transform:uppercase;color:var(--hillel-blue);margin-bottom:.7rem}
.if-body p{font-size:var(--size-body,1rem);line-height:var(--leading-body,1.55);color:color-mix(in srgb,var(--cream) 84%, transparent)}
.intl-tickets{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(.9rem,1.8vw,1.4rem)}
.ticket{
  display:flex;gap:1.1rem;align-items:center;padding:clamp(1rem,1.8vw,1.4rem);
  border:1px solid color-mix(in srgb,var(--accent) 22%, transparent);border-radius:14px;
}
.ticket img{width:92px;height:92px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.ticket h3{font-family:var(--font-display-bold);font-weight:400;font-size:1.36rem;letter-spacing:.4px;text-transform:uppercase;color:var(--hillel-blue);margin-bottom:.3rem}
.ticket p{font-size:var(--size-body-md,.875rem);line-height:var(--leading-body-md,1.5);color:color-mix(in srgb,var(--cream) 78%, transparent)}
@media (max-width:860px){
  .intl-feature{grid-template-columns:1fr}
  .intl-feature figure img{min-height:0;aspect-ratio:16/9}
  .intl-tickets{grid-template-columns:1fr}
}

/* ===== SHARE / preserving the legacy: copy + staggered talls, wide duo beneath ===== */
.share-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center}
.share-talls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.2rem);align-items:start}
.share-talls figure{margin:0}
.share-talls img:not(.sticker){width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.share-talls figure:nth-child(2){margin-top:clamp(1.8rem,3.2vw,3rem)}
.share-duo{margin-top:clamp(1.2rem,2.4vw,2rem)}
.share-duo img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:860px){
  .share-grid{grid-template-columns:1fr;gap:1.4rem}
  .share-talls{align-items:start}
  .share-talls figure:nth-child(2){margin-top:1.2rem}
}

/* ADV CD pass: the 4,260 opening stat gets room to land (was a 242px sliver
   squeezed between the cover and the first panel) */
#ch-07 .em-intro{min-height:44svh;display:flex;align-items:center}
#ch-07 .em-intro .inner{width:100%}

/* the four-section light run gets one articulation: reclaiming sits on the
   alternate paper tint, separating its story from Melissa/Leo's */
#ch-07 .light-panel.beat-cols{background:var(--cream-2);--sec-bg:var(--cream-2)}

/* international head cleanup: heading and copy sit together (not end-hung),
   quieter body copy, breathing room at the section top */
#ch-07 .story:has(.intl-feature){padding-top:clamp(3rem,6vw,4.8rem)}
#ch-07 .story:has(.intl-feature) .panel-head{align-items:center}
#ch-07 .story:has(.intl-feature) .panel-head .lede{font-size:var(--size-body,1rem);line-height:var(--leading-body,1.55);max-width:50ch}
#ch-07 .story:has(.intl-feature) .panel-head .lede + .lede{margin-top:1rem}

/* Every report: copy runs full width in two magazine columns; the data
   infographic starts on its own row with clear air above */
@media (min-width:900px){
  #ch-07 .rep-grid{display:block}
  #ch-07 .rep-grid .bc-copy{max-width:none;columns:2;column-gap:clamp(2.6rem,5vw,4.6rem)}
  #ch-07 .rep-grid .bc-copy .lede{max-width:none;break-inside:avoid-column}
  #ch-07 .rep-grid .bc-copy .rep-note{column-span:all;margin-top:clamp(1.4rem,2.6vw,2.2rem)}
  #ch-07 .rep-grid .wh-bars{margin-top:clamp(2.4rem,4.4vw,3.6rem);max-width:820px}
}

/* Familiar Strangers sticker bridges the post-grad gathering pair */
.sticker-fs{left:50%;top:7%;translate:-50% -50%;width:min(42%,225px);--rot:-6deg;animation-delay:.5s;z-index:4}

/* SHARE sticker nests in the stagger notch of the legacy photo pair */
.share-talls{position:relative}
.sticker-share{left:50%;top:8%;translate:-50% -50%;width:min(52%,240px);--rot:-5deg;animation-delay:.4s;z-index:4}

/* tighter seams around the SHARE stat band */
#ch-07 .share-sec{padding-bottom:clamp(.9rem,1.8vw,1.4rem)}
#ch-07 .lev-stats.light-panel{padding-block:clamp(1.1rem,2vw,1.7rem)}
main #ch-07 .lev-stats.light-panel + .light-panel{padding-top:clamp(.7rem,1.4vw,1.1rem)}

/* ============ CH-08 THROUGH ISRAEL ============ */
#ch-08 .cover-line .draw{stroke:url(#coverLineGrad08)}

/* gold flag plate — copy anchored low like the print spread */
.isr-band{position:relative;overflow:hidden;isolation:isolate;min-height:56svh;display:flex;align-items:flex-end;padding:clamp(2.5rem,6vw,5rem) var(--pad)}
.ib-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(calc(1.08 - var(--sp,.5) * .08));transition:transform .5s ease-out;will-change:transform}
.isr-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(52,34,8,.78) 0%, rgba(52,34,8,.28) 42%, transparent 68%)}
.isr-band .inner{position:relative;z-index:2}
.isr-band h2{max-width:22ch;font-size:clamp(2.2rem,5vw,3.8rem)}
.isr-band .lede{max-width:62ch;color:color-mix(in srgb,var(--cream) 88%, transparent)}
.isr-band .lede strong{color:var(--cream)}

/* fellow profile cards — stylized cutouts on soft gold cards */
.fellows{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.fellow-card{
  border-radius:18px;padding:clamp(1.5rem,2.6vw,2.2rem);
  background:linear-gradient(150deg, color-mix(in srgb,var(--c08) 14%, var(--cream)) 0%, var(--cream) 70%);
  border:1px solid color-mix(in srgb,var(--c08) 26%, transparent);
}
.fc-photo{width:min(64%,300px);height:auto;display:block;margin-bottom:1.1rem;filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.fc-tag{font-family:var(--font-soft);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--accent-text);line-height:1;letter-spacing:.3px}
.fc-role{font:500 .8rem/1.5 var(--font-soft);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:.35rem 0 .9rem}
.fc-bio{font-size:var(--size-body-md,.875rem);line-height:var(--leading-body-md,1.5);color:var(--ink-soft)}
.fc-bio strong{color:var(--ink)}

/* culture duo with captions */
.culture-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem);margin-top:clamp(1.4rem,2.6vw,2.2rem)}
.culture-duo figure{margin:0}
.culture-duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.birthright{margin-top:clamp(2rem,3.6vw,3rem)}

/* impressions stats — gold-ruled, like the print row */
.impressions{background:var(--cream-2);--sec-bg:var(--cream-2)}
.imp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.2rem);margin-top:clamp(1.8rem,3.2vw,2.6rem)}
.imp{border-top:3px solid var(--c08);padding-top:.75rem}
.imp-n{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.375rem);line-height:1;color:var(--c08-deep)}
.imp-l{display:block;font:500 .8rem/1.4 var(--font-soft);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-top:.4rem}
.imp-duo{position:relative;margin-top:clamp(1.6rem,3vw,2.4rem)}
.imp-duo img:not(.sticker){aspect-ratio:4/3;object-fit:cover}
.impressions .inner{position:relative}
.sticker-impressions{right:6%;top:clamp(4rem,9vw,7.5rem);width:min(26%,230px);--rot:6deg;animation-delay:.4s;z-index:4}
@media (max-width:900px){
  .sticker-impressions{position:static;display:block;margin:1.2rem 0 0;width:min(46%,190px);transform:rotate(6deg)}
}

/* vincent feature row */
.vincent{
  display:grid;grid-template-columns:minmax(170px,22%) minmax(0,1fr);gap:clamp(1.4rem,2.6vw,2.2rem);
  align-items:center;margin-top:clamp(1.8rem,3.2vw,2.6rem);
  border:1px solid color-mix(in srgb,var(--c08) 26%, transparent);border-radius:18px;
  padding:clamp(1.3rem,2.4vw,2rem);background:var(--cream);
}
.vincent img{width:100%;height:auto;border-radius:12px;display:block}
.vincent h3{font-family:var(--font-head);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:.6rem}
.vincent h3 .soft{font-family:var(--font-soft);font-style:italic;font-weight:500;color:var(--accent-text)}
.vincent p{font-size:var(--size-body,1rem);line-height:var(--leading-body,1.55);color:var(--ink-soft)}
.vincent p strong{color:var(--ink)}

/* dark reflections band */
.isr-dark{--sec-bg:#2A1D10;background:var(--sec-bg)}
.isr-dark{position:relative;z-index:1}
.isr-dark .narrow{max-width:none}
.isr-dark h2{max-width:none;color:var(--cream)}
.isr-dark h2 .soft{color:var(--c08)}
.isr-groupshot{margin:clamp(1.4rem,2.6vw,2.2rem) 0 0}
.isr-groupshot img{width:100%;max-height:520px;object-fit:cover;border-radius:14px;display:block}
.isr-quotes{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(1.6rem,3vw,2.4rem);max-width:62rem}
.iq{margin:0;padding:0 0 0 3.6rem;position:relative}
.iq::before{content:"\201C";position:absolute;left:0;top:-.14em;font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:3.5rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c08) 78%, transparent)}
.iq p{font-family:var(--font-soft);font-style:normal;font-weight:500;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.5;
  color:color-mix(in srgb,var(--cream) 92%, transparent)}
.iq + .iq{border-top:1px solid color-mix(in srgb,var(--c08) 34%, transparent);padding-top:clamp(.9rem,1.8vw,1.4rem)}

@media (max-width:860px){
  .fellows{grid-template-columns:1fr}
  .culture-duo{grid-template-columns:1fr}
  .imp-stats{grid-template-columns:1fr 1fr;gap:1.2rem}
  .vincent{grid-template-columns:1fr}
  .vincent img{max-width:230px}
  .isr-band{min-height:52svh}
}


/* Priel's layered collage inside the fellow card */
.fellow-card .collage-stack{width:min(84%,360px);margin-bottom:1.1rem;align-self:auto;overflow:hidden;border-radius:6px}
.fellow-card .collage-stack img{object-position:center}

/* pinned travel in the 1000-1279 band: photos scale down so nothing clips */
@media (min-width:1000px) and (max-width:1279px){
  .hscroll .hs-panel img:not(.sticker){height:min(46svh,420px)}
  .hs-compact .hs-panel img:not(.sticker){height:min(38svh,330px)}
  .hs-intro,.hscroll .hs-intro{width:min(40vw,460px)}
}



/* Fellow collages: depth parallax — the cutout rides faster than its background,
   so the layers separate as you scroll (assembly transitions double as inertia) */
@media (prefers-reduced-motion:no-preference){
  .fellow-card.in .cs-block{transform:translateY(calc((.5 - var(--sp,.5)) * 8px))}
  .fellow-card.in .cs-photo{transform:translateY(calc((.5 - var(--sp,.5)) * 30px))}
}

/* copy plates: these blocks sit above the line so its transition sweeps pass
   behind the text (ch-08 fellows head, ch-07 report columns) */
#ch-08 .panel-head{position:relative;z-index:1;background:var(--cream);align-items:start}
/* birthright: copy left, night-flag photo right */
.birthright-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center;margin-top:clamp(2rem,4vw,3.2rem)}
.birthright-row .birthright{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}
.birthright-row .br-photo{margin:0}
.birthright-row .br-photo img{width:100%;height:clamp(260px,26vw,380px);object-fit:cover;border-radius:8px;display:block}
@media (max-width:820px){ .birthright-row{grid-template-columns:1fr;gap:1.3rem} }
#ch-08 .panel-head h2{margin-top:.12em} /* optical: cap-height aligns with the lede's first line */
#ch-07 .rep-grid .bc-copy{position:relative;z-index:1;background:var(--sec-bg,#171411)}

/* explicit LEV eyebrow break: two set lines on desktop, natural wrap on phones */
.lp-br{display:none}
@media (min-width:900px){ .lp-br{display:inline} }

/* gallery statement outsizes the (reduced) section heading — T06 */
.story h2.people-title,.hscroll .people-title{font-size:clamp(2rem,4.2vw,3.625rem)}

/* ===== ALLIES (ch-09) ===== */
/* line-safety plates: cream fields that hug every copy block so the spine can
   never paint behind text at any width (plates match the bg = invisible) */
#ch-09 section:not(.lev-intro) .narrow,
#ch-09 .lev-intro .lede,
#ch-09 .lev-intro .lis,
#ch-09 .beat-portrait > div,
#ch-09 .pull-quote{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}

#ch-09 .photo-duo figure img{height:clamp(240px,26vw,360px);object-fit:cover}

/* 727 — hero number beside the thesis (print gives it a full page); label stacks
   under the number like the print, and the number column carries the spine node */
#ch-09 .lis{margin-top:clamp(1.4rem,2.6vw,2.2rem);flex-direction:column;align-items:flex-start;gap:.15rem}
#ch-09 .lis-n{color:var(--accent);font-size:clamp(4rem,9vw,7.5rem)}
#ch-09 .lis-l{font-size:clamp(1.1rem,1.8vw,1.35rem);max-width:none}
#ch-09 .lev-intro .lede{max-width:var(--measure)}
@media (min-width:1000px){
  #ch-09 .lev-intro .narrow{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:clamp(2rem,4vw,4rem);align-items:center}
  #ch-09 .lev-intro .lis{margin-top:0;justify-self:end;padding-right:clamp(0px,3vw,3rem)}
}

/* TMU portrait: cap height so the copy column isn't dwarfed */
#ch-09 .bp-tall > figure > img:not(.sticker){height:clamp(320px,34vw,450px);object-fit:cover;object-position:center 30%}

/* Waterloo: copy left, photo right — zig-zag against the TMU beat (desktop only;
   the base 720px single-column stack must win on mobile) */
@media (min-width:721px){
  #ch-09 .bp-flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  #ch-09 .bp-flip > figure{order:2}
}

/* McMaster set-piece: a deliberate centered pause on a tinted station plate
   (opaque bg occludes the spine, so centered text is safe) */
#ch-09 .neighbour{position:relative;z-index:1;text-align:center;max-width:56rem;margin:0 auto;
  background:color-mix(in srgb,var(--accent) 8%, var(--cream));border-radius:18px;
  padding:clamp(2rem,4.5vw,3.4rem) clamp(1.4rem,4vw,3.2rem)}
#ch-09 .nb-ask{font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.15;color:var(--accent);margin-bottom:.35em}
#ch-09 .nb-answer{font-size:clamp(1.6rem,2.6vw,2.25rem);max-width:none;margin:0 auto .8rem}
#ch-09 .neighbour .lede{max-width:58ch;margin-inline:auto}

@media (max-width:720px){
  #ch-09 .bp-tall > figure > img:not(.sticker){height:clamp(240px,80vw,320px)}
  #ch-09 .neighbour{text-align:left}
  #ch-09 .neighbour .lede{margin-inline:0}
}

/* ===== YOU (ch-10) ===== */
/* the cover carries the TEN-line band across the art (each path its own colour) */
#ch-10 .cover-line .bdraw{fill:none;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:coverDraw 2.6s cubic-bezier(.7,0,.3,1) forwards}
#ch-10 .cover-line .bdraw:nth-of-type(1){animation-delay:0.25s}
#ch-10 .cover-line .bdraw:nth-of-type(2){animation-delay:0.32s}
#ch-10 .cover-line .bdraw:nth-of-type(3){animation-delay:0.39s}
#ch-10 .cover-line .bdraw:nth-of-type(4){animation-delay:0.46s}
#ch-10 .cover-line .bdraw:nth-of-type(5){animation-delay:0.53s}
#ch-10 .cover-line .bdraw:nth-of-type(6){animation-delay:0.60s}
#ch-10 .cover-line .bdraw:nth-of-type(7){animation-delay:0.67s}
#ch-10 .cover-line .bdraw:nth-of-type(8){animation-delay:0.74s}
#ch-10 .cover-line .bdraw:nth-of-type(9){animation-delay:0.81s}
#ch-10 .cover-line .bdraw:nth-of-type(10){animation-delay:0.88s}
@media (prefers-reduced-motion:reduce){
  #ch-10 .cover-line .bdraw{animation:none;stroke-dashoffset:0}
}
#ch-10 .cover-wrap{height:auto}
#ch-10 .cover-wrap .opener{position:relative;min-height:0;width:100%;height:clamp(360px,64svh,660px)}
#ch-10 .cover-opener .st-h1{font-size:clamp(2.6rem,6.5vw,5.5rem)}
#ch-10 .cover-opener .through{font-size:clamp(1.6rem,3.2vw,2.6rem)}
#ch-10 .cover-opener .statement{margin-top:clamp(1rem,2vw,1.6rem);font-size:clamp(1.1rem,2vw,1.6rem)}
#ch-10 .bb-l{font-family:var(--font-soft);font-style:italic}
#ch-10 .photo-solo img:not(.sticker){height:clamp(260px,34vw,460px)}

/* press cards */
.press-eyebrow{margin:clamp(1.8rem,3.4vw,2.6rem) 0 1rem;color:var(--accent)}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.press-card{background:#fff;border-radius:12px;padding:1.3rem 1.5rem 1.2rem;border-top:3px solid var(--accent);
  box-shadow:0 10px 26px -22px color-mix(in srgb,var(--ink) 30%, transparent)}
.press-card .pc-src{font:700 .72rem/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.press-card h3{font-family:var(--font-head);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.45rem}
.press-card .pc-deck{font-size:.9rem;line-height:1.45;color:var(--ink-soft);margin:0}

/* recognition cards */
.recog-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.recog-card{background:var(--paper-dark);color:var(--cream);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.recog-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.recog-card .rc-body{padding:1.2rem 1.4rem 1.4rem;border-top:3px solid var(--accent)}
.recog-card .rc-kicker{font:700 .68rem/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-light,#AAD1EF);margin-bottom:.5rem}
.recog-card h3{font-family:var(--font-display-bold);font-weight:400;font-size:1.2rem;line-height:1.15;
  text-transform:uppercase;letter-spacing:.4px;color:var(--cream);margin-bottom:.55rem}
.recog-card p{font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--cream) 82%, transparent);margin:0}

/* see the full story */

/* donor wall = a monument band: deep navy field, names in cream, tier route lit */
.donors{--sec-bg:#12233A;background:var(--sec-bg);color:var(--cream);
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.donors h2{color:var(--cream)}
.donors h2 .soft{color:#AAD1EF}
.donors .lede{color:color-mix(in srgb,var(--cream) 86%, transparent)}
.donors .tier{background:var(--sec-bg)}
.donors .tier + .tier{border-top-color:color-mix(in srgb,var(--cream) 12%, transparent)}
.donors .tier::before{background:var(--sec-bg)}
.donors .tier-list li{color:color-mix(in srgb,var(--cream) 74%, transparent)}
/* readability on navy: tier hues lifted slightly toward light (Sapphire etc.) */
.donors .tier-name{color:color-mix(in srgb,var(--tier,var(--accent)) 72%, #CFE0EF)}
.donors .tier.in::before{background:color-mix(in srgb,var(--tier,var(--accent)) 80%, #CFE0EF);border-color:color-mix(in srgb,var(--tier,var(--accent)) 80%, #CFE0EF)}
.donors .tier-wall::before{background:color-mix(in srgb,var(--cream) 22%, transparent)}

/* donor wall = a route: vertical track, one station per tier, dots light on arrival */
.tier-wall{position:relative;margin-top:clamp(1.8rem,3.4vw,2.8rem)}
.tier-wall::before{content:"";position:absolute;left:5px;top:1.4rem;bottom:1.4rem;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 24%, transparent)}
.donors .tier{position:relative;z-index:1;background:var(--cream);
  display:grid;grid-template-columns:clamp(140px,16vw,200px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:start;
  padding:clamp(1.1rem,2vw,1.6rem) 0 clamp(1.1rem,2vw,1.6rem) clamp(2rem,3.4vw,2.8rem)}
.donors .tier + .tier{border-top:1px solid color-mix(in srgb,var(--ink) 8%, transparent)}
.donors .tier::before{ /* station dot on the track, in the tier's own colour */
  content:"";position:absolute;left:0;top:clamp(1.35rem,2.3vw,1.9rem);width:12px;height:12px;border-radius:50%;
  background:var(--cream);border:2.5px solid color-mix(in srgb,var(--tier,var(--accent)) 45%, transparent);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.donors .tier.in::before{background:var(--tier,var(--accent));border-color:var(--tier,var(--accent));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tier,var(--accent)) 16%, transparent)}
.tier-name{font-family:var(--font-display-bold);font-weight:400;font-size:1.1rem;letter-spacing:.6px;
  text-transform:uppercase;color:var(--tier,var(--accent));margin:0;padding-top:.1rem}
.tier-list{list-style:none;margin:0;padding:0;columns:3;column-gap:clamp(1.4rem,3vw,2.6rem)}
.tier-list li{break-inside:avoid;font-size:.95rem;line-height:1.4;color:var(--ink-soft);padding:.22rem 0}
.tier-sm .tier-list{columns:3}
.tier-sm .tier-list li{font-size:.83rem;padding:.16rem 0}

/* thank-you closer */
.thanks-photo{margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.thanks-photo img{width:100%;height:clamp(260px,36vw,480px);object-fit:cover;border-radius:6px;display:block}
.thanks-h{font-family:var(--font-display);font-size:clamp(3rem,7vw,5.5rem)!important;line-height:.95;
  color:var(--accent);max-width:none!important;text-transform:none}
.thanks .soft-line{font-family:var(--font-soft);font-style:italic;color:var(--accent)}
.contact-link{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--accent) 55%, transparent);
  text-underline-offset:3px;font-weight:500}
.contact-link:hover{color:var(--accent)}
.fuel-card{margin-top:clamp(1.8rem,3.4vw,2.6rem);display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.4rem,3vw,2.6rem);background:var(--paper-dark);color:var(--cream);border-radius:16px;
  padding:clamp(1.6rem,3vw,2.4rem)}
.fuel-copy h3{font-family:var(--font-head);font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.25;
  color:var(--accent-light,#AAD1EF);margin-bottom:.6rem}
.fuel-copy p{font-size:.98rem;line-height:1.55;color:color-mix(in srgb,var(--cream) 85%, transparent);max-width:46ch;margin:0}
.fuel-cta{display:flex;flex-direction:column;align-items:center;gap:.6rem;flex:0 0 auto}
.fuel-cta .button{margin-top:0}
.fuel-url{font:700 .72rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 60%, transparent)}

@media (max-width:900px){
  .press-grid,.recog-grid{grid-template-columns:1fr}
  .donors .tier{grid-template-columns:1fr;gap:.7rem}
  .tier-list{columns:2}
  .tier-sm .tier-list{columns:2}
  .fuel-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .tier-list{columns:1}
  .tier-sm .tier-list{columns:2}
  }

/* review-mode section chips (?notes) */
.note-chip{position:absolute;top:10px;left:10px;z-index:95;pointer-events:none;
  font:700 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.05em;
  background:#E5484D;color:#fff;padding:4px 8px;border-radius:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* review-mode note bar + tap targeting */
.nt-bar{position:fixed;left:12px;bottom:86px;z-index:200;display:flex;gap:8px}
.nt-bar button{font:700 13px/1 ui-monospace,Consolas,monospace;padding:10px 14px;border-radius:999px;
  border:1.5px solid #E5484D;background:#fff;color:#E5484D;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.nt-bar .nt-arm.on{background:#E5484D;color:#fff}
.nt-bar .nt-send{background:#52A9F9;color:#161412}
.nt-armed body, .nt-armed{cursor:crosshair}
.nt-armed main *{cursor:crosshair!important}
.nt-flash{outline:3px solid #E5484D!important;outline-offset:2px}

/* ===== REVIEW BATCH 1 (2026-07-12) ===== */
/* L2: thesis in Neue Montreal Bold */
.thesis p[data-words]{font-family:var(--font-head);font-weight:700}
/* L3: contents title — Gooper medium italic caps, light blue */
.index h2{font-family:var(--font-soft);font-style:italic;font-weight:500;text-transform:uppercase;color:#AAD1EF}
/* 02-B: statx ghost numbers outlined + tracked */
.statx-figure::before{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.34);letter-spacing:.04em}
/* 01-I: 35,663 ghost larger, quieter stroke */
.nj-total-ghost{font-size:clamp(7rem,26vw,22rem)!important;-webkit-text-stroke:2.5px color-mix(in srgb,var(--c01) 26%, transparent)!important}
/* 02-C: gallery hint colour */
.hs-hint{color:color-mix(in srgb,#6D767E 90%, transparent)}
/* selected captions: no colour block on desktop */
@media (min-width:1000px){ .cap-clear{background:transparent} }
/* 03-I: tighten Gooper lead to NM payoff in principle bands */
.pr-lead{margin-bottom:.32em!important}
/* 03-C: bigger tournament sticker on desktop; 1-in-3 in chapter orange */
@media (min-width:1000px){ .sticker-bball{width:min(30%,240px)} }
.ps-num{color:#F26B2B}
/* 03: all soft heading accents in Bolder go primary orange */
#ch-03 h2 .soft{color:#F26B2B}
/* 04-E: LEV survey stat pair smaller */
#ch-04 .li-stack .lis-n{font-size:clamp(2.5rem,4.4vw,3.9rem)}
#ch-04 .li-stack .lis-l{font-size:clamp(.95rem,1.5vw,1.2rem)}
/* 02 + 08: shorter covers */
/* desktop only - on phones the base height:auto must win (no dwell leftover) */
@media (min-width:761px){
  #ch-02 .cover-wrap{height:100svh}
  #ch-02 .cover-wrap .opener{min-height:80svh}
  #ch-08 .cover-wrap{height:100svh}
  #ch-08 .cover-wrap .opener{min-height:80svh}
  #ch-09 .cover-wrap{height:100svh}
  #ch-09 .cover-wrap .opener{min-height:80svh}
}
/* 05-D: quote boxes — italic copy, no inline marks */
#ch-05 .quote-card p{font-style:italic}
/* 05-E: air between Mia's profile card and her quote */
#ch-05 .pull-quote:not(.eqf-quote){margin-top:clamp(2.4rem,4.5vw,4rem)}
/* 06-B: post-grad stat recolour + smaller label */
#ch-06 .lis-n{color:#4E0000}
#ch-06 .lis-l{font-size:clamp(1rem,1.6vw,1.3rem)}
/* 07: cover gold span to light blue; Melissa/Leo titles Nichrome Bold caps ink-soft */
#ch-07 .statement .gold{color:#AAD1EF}
#ch-07 .quote-rows .eyebrow{font-family:var(--font-display-bold);font-weight:400;
  text-transform:uppercase;letter-spacing:.5px;color:#3A362F}

/* ===== REVIEW BATCH 2 (2026-07-12) ===== */
/* finale band overlays the sections from its start onward */
.spine-over{z-index:3}
/* 08: all Gooper heading accents in Israel -> chapter gold */
#ch-08 h2 .soft{color:#C18A2C}
/* 08-F: Vincent title gets the section-heading treatment */
.vincent h3{font-family:var(--font-head);font-weight:700;font-size:var(--size-h2,clamp(1.8rem,2.85vw,2.65625rem));line-height:1;letter-spacing:-.01em;margin-bottom:.6rem}
.vincent h3 .soft{font-family:var(--font-soft);font-style:italic;font-weight:400;color:#C18A2C}
/* 09-F: neighbour plate — tighter ask/answer, air under the heading */
#ch-09 .nb-ask{line-height:1.02;margin-bottom:.12em}
#ch-09 .nb-answer{margin:0 auto 1.2rem}
/* 10-D: donor wall, fresh approach — quiet editorial certificate: centred tiers,
   flanked rules in tier colours, names flowing with middots (route track retired) */
.donors{--sec-bg:var(--cream);background:var(--cream);color:var(--ink);
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.donors h2{color:var(--ink)}
.donors h2 .soft{color:var(--c10)}
.donors .narrow{max-width:none;text-align:center}
.donors .narrow h2{max-width:none;margin-inline:auto}
.donors .lede{color:var(--ink-soft);max-width:52ch;margin-inline:auto}
.tier-wall{max-width:64rem;margin-inline:auto}
/* closing line under the full donor wall: a graceful nod to everyone unnamed */
.donor-coda{max-width:64rem;margin:clamp(1.6rem,3vw,2.6rem) auto 0;
  font-family:var(--font-soft);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,2vw,1.4rem);line-height:1.35;
  color:color-mix(in srgb, var(--accent, #317BBF) 78%, var(--ink));text-wrap:balance}
.tier-wall::before{display:none}
.donors .tier{display:block;background:transparent;padding:clamp(1.8rem,3.4vw,2.8rem) 0 0}
.donors .tier::before{display:none}
.donors .tier + .tier{border-top:0}
.donors .tier-name{display:flex;align-items:center;gap:1.2rem;justify-content:center;
  color:var(--tier,var(--accent));margin-bottom:1.1rem;padding:0}
.donors .tier-name::before,.donors .tier-name::after{content:"";flex:1;height:1.5px;
  background:color-mix(in srgb,var(--tier,var(--accent)) 32%, transparent)}
.donors .tier-list{columns:auto;column-count:auto;text-align:center;max-width:58rem;margin-inline:auto}
.donors .tier-list li{display:inline;font-size:.95rem;line-height:1.9;color:var(--ink-soft);padding:0}
.donors .tier-list li::after{content:"  \B7  ";color:color-mix(in srgb,var(--tier,var(--accent)) 60%, transparent);white-space:pre}
.donors .tier-list li:last-child::after{content:""}
.donors .tier-sm .tier-list li{font-size:.85rem;line-height:1.85}
/* 10-E: fuel card — white with a slow light-blue gradient drift; NM Medium voice */
.fuel-card{background:#fff;color:var(--ink);
  background-image:linear-gradient(115deg,#FFFFFF 0%,#DCEBF7 32%,#FFFFFF 60%,#EAF4FB 100%);
  background-size:230% 230%;animation:fuelShift 10s ease-in-out infinite alternate;
  border:1px solid color-mix(in srgb,var(--c10) 18%, transparent)}
@keyframes fuelShift{from{background-position:0% 0%}to{background-position:100% 100%}}
.fuel-copy h3{font-family:var(--font-head);font-weight:500;color:#317BBF}
.fuel-copy p{font-family:var(--font-head);font-weight:500;color:var(--ink-soft)}
.fuel-cta .button{font-family:var(--font-head);font-weight:500;letter-spacing:.3px}
.fuel-url{font-family:var(--font-head);font-weight:500;color:color-mix(in srgb,var(--ink) 64%, transparent)}
@media (prefers-reduced-motion:reduce){ .fuel-card{animation:none} }
/* L5: footer band placeholder */
.cta#finish{background:#52A9F9;min-height:34svh;padding:clamp(2rem,5vw,4rem) var(--pad)}

/* ===== donor wall v4: the typographic pyramid =====
   Hierarchy carried by type scale alone — Diamond largest, stepping down to
   Bronze. Tiny tier eyebrows with a short underline in the tier colour.
   No boxes, no tracks, no centring gimmicks: names, scale, and air. */
.donors .narrow{text-align:left}
.donors .narrow h2{margin-inline:0}
.donors .lede{margin-inline:0}
.donors .tier{padding:clamp(2rem,3.8vw,3.2rem) 0 0}
.donors .tier-name{display:inline-flex;gap:0;justify-content:flex-start;
  font-size:.78rem;letter-spacing:.14em;margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:2.5px solid var(--tier,var(--accent));
  color:var(--tier,var(--accent))}
.donors .tier-name::before,.donors .tier-name::after{display:none}
.donors .tier-list{text-align:left;max-width:none;
  font-family:var(--font-head);font-weight:500;color:var(--ink)}
.donors .tier-list li{font-size:inherit;line-height:inherit;color:var(--ink)}
.donors .tier-list li::after{content:"€2\B7€2";
  color:color-mix(in srgb,var(--ink) 26%, transparent);white-space:pre}
.donors .tier-list li:last-child::after{content:""}
.tier-wall .tier:nth-of-type(1) .tier-list{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.8}
.tier-wall .tier:nth-of-type(2) .tier-list{font-size:clamp(1.15rem,1.8vw,1.38rem);line-height:1.8}
.tier-wall .tier:nth-of-type(3) .tier-list{font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.85}
.tier-wall .tier:nth-of-type(4) .tier-list{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.85}
.tier-wall .tier:nth-of-type(5) .tier-list{font-size:1rem;line-height:1.9}
.tier-wall .tier:nth-of-type(6) .tier-list{font-size:.93rem;line-height:1.9}
.tier-wall .tier:nth-of-type(7) .tier-list{font-size:.84rem;line-height:1.9;font-weight:400}

/* ===== FOOTER on the brand-blue band ===== */
.cta#finish{display:flex;align-items:center}
.cta#finish .inner{width:100%}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.foot-brand .brand{display:inline-flex}
.foot-contact{margin-top:.9rem;font-size:.95rem;line-height:1.7}
.foot-contact a{color:var(--paper-dark);font-weight:500;text-decoration-color:color-mix(in srgb,var(--paper-dark) 40%, transparent);text-underline-offset:3px}
.foot-contact a:hover{text-decoration-color:var(--paper-dark)}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:.65rem clamp(1.4rem,3vw,2.6rem);padding-top:.3rem}
.foot-nav a{font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--paper-dark);
  text-decoration:none;width:fit-content;border-bottom:1.5px solid transparent}
.foot-nav a:hover,.foot-nav a:focus-visible{border-bottom-color:var(--paper-dark)}
.foot-donate{margin-top:0;background:var(--paper-dark);color:var(--cream)}
.foot-donate:hover{background:#000}
.foot-legal{margin-top:clamp(2rem,4.5vw,3.4rem);font-size:.8rem;
  color:color-mix(in srgb,var(--paper-dark) 70%, transparent)}
@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  .foot-nav{padding-top:0}
}

/* ===== FOOTER v2 — matches the hillelontario.org dark footer ===== */
.cta#finish{background:#0B0B0A;min-height:0;padding:clamp(3rem,6vw,5.5rem) var(--pad) clamp(2.6rem,5vw,4.5rem);
  display:block;position:relative}
.cta#finish .inner{position:static}
.foot-donate-pill{position:absolute;top:clamp(2.4rem,4.5vw,4rem);right:var(--pad);display:inline-flex;align-items:center;gap:.5rem;
  font:700 1.05rem/1 var(--font-display-bold);letter-spacing:.5px;text-transform:uppercase;
  color:#EAB5D9;border:1.5px solid #EAB5D9;border-radius:999px;padding:.8rem 1.6rem;
  text-decoration:none;transition:background .25s,color .25s}
.foot-donate-pill:hover,.foot-donate-pill:focus-visible{background:#EAB5D9;color:#0B0B0A}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(3.4rem,6vw,5rem)}
.foot-logo img{width:min(64%,260px);height:auto;display:block}
.foot-head{font-family:var(--font-soft);font-weight:500;font-size:1.35rem;color:var(--hillel-blue);margin-bottom:1.2rem}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem clamp(1.6rem,3vw,3rem)}
.foot-nav a{font-family:var(--font-head);font-weight:500;font-size:1.02rem;color:#fff;
  text-decoration:none;width:fit-content;border-bottom:1.5px solid transparent}
.foot-nav a:hover,.foot-nav a:focus-visible{border-bottom-color:#fff}
.foot-contact{display:grid;gap:1rem;font-family:var(--font-head);font-weight:500;font-size:1.02rem;color:#fff}
.foot-contact a{color:#fff;text-decoration:none;width:fit-content;border-bottom:1.5px solid transparent}
.foot-contact a:hover,.foot-contact a:focus-visible{border-bottom-color:#fff}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr;gap:2.2rem;margin-top:4.6rem}
  .foot-logo img{width:min(52%,220px)}
}

/* width/height attrs (CLS) must never force a skewed used height: images keep
   their intrinsic ratio unless a rule intentionally sets height (crops etc.) */
main img{height:auto}

/* ===== REVIEW BATCH 3 (2026-07-12) ===== */
/* L3: split contents title — Gooper sentence case + Nichrome white caps */
.index h2 .ti-a{text-transform:none}
.index h2 .ti-b{font-family:var(--font-display-bold);font-weight:400;font-style:normal;
  text-transform:uppercase;color:#fff;letter-spacing:.5px}
/* L4: audio button */
.audio-btn{font:400 .95rem/1 var(--font-display-bold)!important;letter-spacing:.35px!important}
.audio-btn:hover,.audio-btn:focus-visible{border-color:var(--hillel-blue);color:var(--hillel-blue)}
/* L4: less air above the leadership photo */
.letter-hero .slt-photo,.letter .slt-duo{margin-top:.8rem}
/* 02-B: statx ghosts larger, soft-light */
.statx-figure::before{font-size:clamp(7rem,19vw,14.5rem);mix-blend-mode:soft-light;
  -webkit-text-stroke:2px rgba(255,255,255,.55)}
/* 02-H: principle band lightened — pink lead instead of the deep mix */
#ch-02 .principle{--accent-soft:var(--c02)}
/* 07-H: Melissa/Leo titles at Kol Yisrael scale */
#ch-07 .quote-rows .eyebrow{font-size:1.5rem}
/* 10: cover statement back to the standard cover treatment */
#ch-10 .cover-opener .statement{font-size:var(--size-statement,clamp(1.35rem,3.2vw,2.4rem))}
/* 10-B: $250K band — outlined ghost + slow gradient drift */
.big-band{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent) 0%, color-mix(in srgb,var(--accent) 70%, #0A1B2E) 55%, var(--accent) 100%);
  background-size:220% 220%;animation:fuelShift 12s ease-in-out infinite alternate}
.big-band::before{content:attr(data-ghost);position:absolute;right:-.06em;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;font-family:var(--font-display-bold);font-size:clamp(6rem,14vw,11rem);
  line-height:.8;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28)}
.big-band > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .big-band{animation:none} }
/* 10-D: donor wall v5 — v1 row structure with distinct separations */
.donors h2{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,6vw,3.4rem);
  line-height:1.04;letter-spacing:-.01em;max-width:none}
.donors h2 .soft{color:var(--c10)}
.donors .tier{display:grid;grid-template-columns:clamp(150px,18vw,220px) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.8rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:2px solid color-mix(in srgb,var(--ink) 15%, transparent)}
.tier-wall{border-bottom:2px solid color-mix(in srgb,var(--ink) 15%, transparent)}
.donors .tier-name{display:block;border-bottom:0;padding:0;font-size:1.02rem;letter-spacing:.6px;
  color:var(--tier,var(--accent));margin-bottom:0}
.donors .tier-name::before,.donors .tier-name::after{display:none}
.donors .tier-list{columns:3;column-gap:clamp(1.4rem,3vw,2.6rem);text-align:left;max-width:none;
  font-family:var(--font-body);font-weight:400;font-size:.95rem}
.donors .tier-list li{display:block;break-inside:avoid;font-size:inherit;line-height:1.45;
  color:var(--ink-soft);padding:.2rem 0}
.donors .tier-list li::after{content:none}
.tier-wall .tier .tier-list{line-height:1.45}
.donors .tier-sm .tier-list{font-size:.84rem}
@media (max-width:900px){
  .donors .tier{grid-template-columns:1fr;gap:.8rem}
  .donors .tier-list{columns:2}
}
@media (max-width:560px){ .donors .tier-list{columns:1} .donors .tier-sm .tier-list{columns:2} }
/* 10-E: Give today matches the standard buttons; url lowercase NM medium */
.fuel-cta .button{font:400 1.125rem/1 var(--font-display-bold);letter-spacing:.5px;text-transform:uppercase}
.fuel-url{text-transform:none}

/* 06-F: post-grad heading accents in deep oxblood */
#ch-06 h2 .soft{color:#4E0000}
/* 07-D: Menachem attribution breaks to two lines on desktop */
@media (min-width:1000px){
  .cite-sep{display:none}
  .cite-rest{display:block}
}
/* statx ghost outline: barely-there — a design accent, not a second number */
.statx-figure::before{-webkit-text-stroke:1.5px rgba(255,255,255,.09)}

/* donor tiers: divider under each tier in the tier's own colour (elevation pass) */
.donors .tier{border-top:0;border-bottom:2px solid color-mix(in srgb,var(--tier,var(--accent)) 34%, transparent)}
.tier-wall{border-bottom:0;border-top:2px solid color-mix(in srgb,var(--ink) 14%, transparent)}
/* finale band: a touch more presence */
.spine-over .band-line{stroke-width:2.6px;opacity:.98}

/* CD audit: line-safety plates on the remaining crossing blocks (invisible —
   they match their section bg; the line weaves behind, per the house motif) */
#ch-02 .wide-intro{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}
#ch-05 .ac-right{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}
#ch-07 .story.on-dark .panel-head,
#ch-07 .rep-head{position:relative;z-index:1;background:var(--sec-bg,#171411)}

/* footer goes Hillel blue: the ten lines converge cleanly into the brand field */
.cta#finish{background:var(--hillel-blue)}
.foot-head{color:#fff}
.foot-nav a,.foot-contact,.foot-contact a{color:#fff}
.foot-nav a:hover,.foot-nav a:focus-visible,
.foot-contact a:hover,.foot-contact a:focus-visible{border-bottom-color:#fff}
.foot-donate-pill{color:#fff;border-color:#fff}
.foot-donate-pill:hover,.foot-donate-pill:focus-visible{background:#fff;color:var(--hillel-blue)}
/* route dock bows out at the footer */
#route-bar{transition:opacity .45s ease, transform .45s ease}
#route-bar.dock-out{opacity:0;transform:translateY(14px);pointer-events:none}

/* ===== press cards v2: whole card links out; per-publication accent rail ===== */
.press-card{position:relative;display:flex;flex-direction:column;text-decoration:none;
  border-top:0;padding:1.5rem 1.6rem 1.3rem 1.9rem;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  border:1px solid color-mix(in srgb,var(--ink) 10%, transparent)}
.press-card .pc-rail{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pc,var(--accent));
  transition:width .28s cubic-bezier(.2,.8,.2,1)}
.press-card .pc-src{color:var(--pct,var(--accent))}
.press-card .pc-title{display:block;font-family:var(--font-head);font-weight:700;font-size:1.05rem;
  line-height:1.3;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin-bottom:.45rem}
.press-card .pc-deck{display:block;font-size:.9rem;line-height:1.45;color:var(--ink-soft);margin:0 0 .5rem}
.press-card .pc-read{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.55rem;
  font:700 .8rem/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--pct,var(--accent))}
.press-card .pc-arrow{display:inline-block;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.press-card:hover,.press-card:focus-visible{transform:translateY(-3px);border-color:var(--pc,var(--accent));
  box-shadow:0 12px 28px rgba(30,30,29,.12), 0 3px 8px rgba(30,30,29,.06)}
.press-card:hover .pc-rail{width:9px}
.press-card:hover .pc-arrow{transform:translateX(6px)}
.press-card:focus-visible{outline:3px solid var(--hillel-blue);outline-offset:3px}

/* ===== donor wall: compact fill ===== */
.donors{padding-top:clamp(2.4rem,4.5vw,3.6rem);padding-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.donors .tier{padding:clamp(1.1rem,2vw,1.6rem) 0;gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:clamp(130px,15vw,180px) minmax(0,1fr)}
.donors .tier-list{columns:3;column-gap:clamp(1.2rem,2.4vw,2rem)}
.donors .tier-list li{padding:.14rem 0;line-height:1.35}
.donors .tier:nth-of-type(n+5) .tier-list{columns:4}   /* Pearl, Silver, Bronze pack tighter */
.donors .tier-sm .tier-list li{line-height:1.4}
@media (max-width:1100px){ .donors .tier:nth-of-type(n+5) .tier-list{columns:3} }
@media (max-width:900px){
  .donors .tier{grid-template-columns:1fr;gap:.6rem}
  .donors .tier-list,.donors .tier:nth-of-type(n+5) .tier-list{columns:2}
}
@media (max-width:560px){ .donors .tier-list{columns:1} .donors .tier:nth-of-type(n+5) .tier-list{columns:2} }

/* ===== press cards: back to the PDF style (cards stay links to the articles) ===== */
.press-card{background:#FAFAF8;border:0;border-top:3px solid var(--accent);border-radius:0;
  padding:1.4rem 1.6rem 1.3rem;box-shadow:0 8px 20px -16px color-mix(in srgb,var(--ink) 25%, transparent)}
.press-card .pc-rail,.press-card .pc-read{display:none}
.press-card .pc-src{order:1;color:var(--accent);font:700 .78rem/1 var(--font-body);letter-spacing:.11em;margin-bottom:.7rem}
.press-card .pc-title{order:2;font-family:var(--font-display-bold);font-weight:400;font-size:1.35rem;
  line-height:1.12;letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin-bottom:.55rem}
.press-card .pc-deck{order:3;font-family:var(--font-soft);font-style:italic;font-weight:400;
  font-size:.95rem;line-height:1.45;color:var(--ink-soft);margin:0}
.press-card:hover,.press-card:focus-visible{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 12px 26px -16px color-mix(in srgb,var(--ink) 35%, transparent)}
/* recognition cards: gold kicker rule per the print */
.recog-card{border-radius:0}
.recog-card .rc-body{border-top:3px solid #C6A15B}
.recog-card .rc-kicker{color:#CFC8B8}

/* band lives under the content layer: card surfaces occlude it; the donors
   section must stay transparent so the rails remain visible in its gutters */
.donors{background:transparent}

/* ===== FOOTER v3: disciplined grid on the brand field ===== */
.cta#finish{min-height:0;padding:clamp(3rem,5.5vw,4.5rem) var(--pad) clamp(1.6rem,3vw,2.2rem)}
.foot-grid{margin-top:0;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr) auto;
  gap:clamp(2rem,4.5vw,4rem);align-items:start}
.foot-logo img{width:min(70%,230px)}
.foot-head{font-size:1.25rem;margin-bottom:1.1rem;line-height:1;text-align:left}
.foot-nav{padding-top:0;gap:.8rem clamp(1.4rem,2.6vw,2.4rem)}
.foot-nav a,.foot-contact a,.foot-contact span{font-size:.98rem;line-height:1.5}
.foot-contact{display:grid;gap:.8rem;text-align:left}
.foot-donate-pill{position:static}
.foot-cta{justify-self:end}
.foot-bottom{margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.3rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1.5px solid color-mix(in srgb,#fff 32%, transparent)}
.foot-bottom p{font-size:.8rem;color:color-mix(in srgb,#fff 82%, transparent);margin:0}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .foot-cta{justify-self:start}
  .foot-logo img{width:min(46%,200px)}
}

/* ===== AUDIT FIXES (technical only, no content/design changes) ===== */
/* B3: measure discipline - no body paragraph exceeds a comfortable measure */
main .lede{max-width:min(72ch,100%)}
.hero-sub{max-width:min(56ch,100%)}
.letter .lede,.letter-body .lede{max-width:66ch}
#ch-02 .wide-intro .lede{max-width:72ch}
#ch-05 .ac-right .lede{max-width:80ch}
/* S3: tap targets to >=44px effective */
.hs-hint{padding:.85rem .6rem;min-height:44px}
.foot-nav a,.foot-contact a{padding-block:.45rem;margin-block:-.45rem}
.contact-link{display:inline-block;padding-block:.4rem}
/* S4: press kickers pass AA using each publication's own darker tone */
.press-card .pc-src{color:var(--pct,color-mix(in srgb,var(--accent) 75%, var(--ink)))}

/* GO DEEPER lede: one column, full content width; line hugs its right edge */
@media (min-width:900px){
  #ch-02 .wide-intro .lede{column-count:1;max-width:none}
}

/* light panels: cream now painted at z0 (tint layer) so the line rides over them */
.station-dark .light-panel{background:transparent}
/* Emilio card: accent edge flush to the card's rounded left edge */
#ch-05 .quote-card{overflow:hidden}
/* text safety inside the now-transparent light panels: plates on copy blocks */
#ch-07 .light-panel .narrow,#ch-07 .light-panel .panel-head,#ch-07 .light-panel .rec-head,
#ch-07 .light-panel .lede{position:relative;z-index:1;background:var(--sec-bg,var(--cream))}

/* ===== MOBILE PASS (2026-07-15) ===== */
@media (max-width:760px){
  /* A light panel opening under a dark one is a NEW field, not a continuation.
     `main .story + .story` tightens consecutive beats to ~18px, which is right
     between same-bg beats but leaves the headline hugging the colour change. */
  main .story.on-dark + .story:not(.on-dark){padding-top:clamp(2.4rem,8vw,3rem)}
  /* ...and its cards belong to that headline, so close the gap under it */
  #ch-07 .light-panel .narrow + .cards{margin-top:1.3rem}
  /* Vincent reads as a portrait on phones: square crop held high so his head clears */
  .vincent img{aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}

  /* Finale band, phones: the block's field is repainted at z0 by buildSpine, so the
     section itself goes transparent and the ten lines ride over the colour but stay
     under the copy. (The grain would repaint over the lines — retire it here.) */
  .principle.band-under{background:transparent}
  .principle.band-under::after{display:none}
  /* ...but the copy must not have the ten lines running between it and the reader.
     The plate's own field, re-laid behind ONLY the words: the band still crosses the
     block everywhere else (the weave reads), the sentence sits on calm colour. */
  .principle.band-under .inner{
    position:relative;z-index:1;border-radius:14px;
    padding:clamp(.7rem,3vw,1.1rem) clamp(.9rem,4vw,1.3rem);
    background:linear-gradient(158deg,
      color-mix(in srgb,var(--accent-soft,var(--accent)) 73%,var(--paper-dark)) 0%,
      color-mix(in srgb,var(--accent-soft,var(--accent)) 57%,var(--paper-dark)) 100%);
  }

  /* $250K card, phones: one solid card again (it had split into two floating text
     plates). Number leads, copy under it, the outlined ghost tucks bottom-right as a
     watermark instead of cropping mid-height. */
  .big-band{flex-direction:column;align-items:flex-start;gap:.55rem;
    padding:clamp(1.3rem,5vw,1.8rem) clamp(1.2rem,4.5vw,1.6rem)}
  .big-band::before{font-size:clamp(4.2rem,19vw,6.5rem);top:auto;bottom:-.1em;right:-.03em;transform:none}
  .bb-l{max-width:26ch}

  /* the hero gives back a sliver of screen, so the thesis below signals itself */
  .hero{min-height:86svh}

  /* the You finale held ~350px of empty crowd under its type */
  #ch-10 .cover-wrap .opener{height:clamp(280px,44svh,420px)}
  /* ...and its statement runs nearly edge-to-edge here, where the standard cover
     scrim has already faded out (transparent past 66%) — over this bright halftone
     the tail washed out. Carry the wash the full width on phones. */
  #ch-10 .cover-opener::after{
    background:
      linear-gradient(90deg, rgba(10,26,45,.86) 0%, rgba(10,26,45,.68) 52%, rgba(10,26,45,.5) 100%),
      linear-gradient(0deg, rgba(10,26,45,.55), rgba(10,26,45,0) 52%);
  }
}

/* ===== Melissa's song: the quote card's photo slot carries the performance =====
   The clip is the evidence for her quote, so it opens on its own poster frame and
   plays with sound on a deliberate tap — never muted-autoplay, which would strip the
   one thing that matters here. preload="none" keeps its 2MB off every other visit. */
.song{position:relative;margin:0;height:100%;overflow:hidden;background:#100E0C;isolation:isolate}
.song .song-vid{width:100%;height:100%;object-fit:cover;display:block;background:#100E0C}
.song-play{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;color:var(--cream);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.7rem;padding:clamp(.9rem,2vw,1.2rem);text-align:left;
  background:linear-gradient(0deg, rgba(16,14,12,.78) 0%, rgba(16,14,12,.22) 46%, rgba(16,14,12,0) 74%);
  transition:opacity .35s ease;
}
/* the station dot, borrowed from the line — it is the play control */
.sp-dot{
  position:relative;width:clamp(44px,11%,56px);aspect-ratio:1;flex:none;border-radius:50%;
  background:var(--cream);box-shadow:0 6px 20px -6px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2),background .25s;
}
.sp-dot::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:13px solid var(--accent,#64A4D9);border-block:8px solid transparent;
}
.sp-lbl{font:400 .82rem/1.2 var(--font-display-bold);letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sp-lbl i{font-family:var(--font-soft);font-style:italic;text-transform:none;letter-spacing:0;
  font-size:1.06em;color:var(--accent-light,#AAD1EF)}
.song-play:hover .sp-dot,.song-play:focus-visible .sp-dot{transform:scale(1.09);background:#fff}
.song-play:focus-visible{outline:3px solid var(--accent,#64A4D9);outline-offset:-3px}
/* once it is playing the poster furniture gets out of the way */
.song.playing .song-play{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .sp-dot,.song-play{transition:none} }

/* ===== caption highlights stop punching holes in photo shadows =====
   The paper highlight exists so the line does not read behind the words, and it is
   the exact page colour — but at z-index:2 it painted OVER the photo's drop shadow,
   cutting a clean rounded chip out of it (7 captions site-wide). The photo blocks now
   paint above the caption, so the shadow falls across it and the chip disappears.
   Occlusion is unaffected: main sits above the line layer regardless of this order. */
.caption-strip{z-index:0}
.photo-duo,.pickle-hero,.bc-solo,.photo-solo{position:relative;z-index:1}