/* ═══════════════════════════════════════════════════════════════════
   Hillside — "The Marquee" preview
   One stylesheet for all pages. Tweak the tokens below and every page
   follows. Forest is the only accent. No dollar figures anywhere.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fonts (self-hosted; no external requests) ───────────────────── */
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/Newsreader-Variable.woff2') format('woff2-variations');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/fonts/DMSans-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

/* ── TOKENS — the tweak surface ──────────────────────────────────── */
:root{
  /* colour */
  --paper:#F1EBDE;
  --ink:#191813;
  --forest:#1F3D2A;         /* THE accent */
  --forest-deep:#16301F;    /* the full-bleed band */
  --ink-soft:rgba(25,24,19,.78);
  --ink-faint:rgba(25,24,19,.55);
  --rule-hair:rgba(25,24,19,.28);

  /* type */
  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --serif:'Newsreader',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;

  /* Display scale. Instrument Serif is a DISPLAY face — it looks
     elegant large and heavy/cramped small, which is why interior
     titles read "bolder" than the homepage when they're set smaller.
     Interior titles therefore run close to hero scale. */
  --hero:clamp(2.9rem,10.8vw,10rem);
  --title:clamp(2.7rem,9.4vw,8.5rem);
  --band:clamp(2.5rem,7.4vw,7rem);
  --body:clamp(1rem,1.15vw,1.0625rem);

  /* structure */
  --gut:clamp(1.25rem,4.2vw,3.5rem);
  --page:1360px; /* the page column — nothing stretches to the corners of big monitors */
  --rule-w:2px;
  --ease:cubic-bezier(.19,1,.22,1);
  --lift:cubic-bezier(.22,.61,.36,1);
}

/* ── the hill, watching from behind the page (homepage only) ───────
   A real element, first child of <main>, sticky at 11vh: it follows
   the reader down the page exactly like a fixed watermark, then stops
   with the email capture (where <main> ends) and lets the footer scroll
   in beneath it. It keeps its real height in flow (sticky constrains
   the MARGIN box, so a negative margin here would let it stick past
   main's end) and the hero pulls up over it instead. --hill-h = width ×
   1116/1493. z-index -1 inside main's stacking context keeps it under
   every word and frame. */
body.has-hill{--hill-h:min(49.33vw,717.6px)}
.hill{
  position:sticky;top:11vh;z-index:-1;pointer-events:none;
  width:min(66vw,960px);height:var(--hill-h);
  margin-left:auto;margin-right:max(7vw,calc(50vw - var(--page)/2));
  /* the stop point: sticky constrains the margin box, so this negative
     margin lets the hill ride 4rem PAST main's end before it anchors —
     Ryan wanted it to sit a little lower on the capture. It collapses
     into the hero's (larger) negative margin, so the layout doesn't move. */
  margin-bottom:-4rem;
  background-color:var(--forest);opacity:.15;
  -webkit-mask:url('/assets/logos/hillside-hill-mark.png') center / contain no-repeat;
  mask:url('/assets/logos/hillside-hill-mark.png') center / contain no-repeat;
}
body.has-hill header,body.has-hill main,body.has-hill footer,
body.has-tg header,body.has-tg main,body.has-tg footer{position:relative;z-index:1}
/* the TG monogram, watching from behind the foundation page */
body.has-tg::before{
  content:"";position:fixed;z-index:0;pointer-events:none;
  right:max(7vw,calc(50vw - var(--page)/2));top:14vh;width:min(44vw,600px);aspect-ratio:1;
  background-color:var(--forest);opacity:.07;
  -webkit-mask:url('/assets/logos/hillside-mark-white-b.png') center / contain no-repeat;
  mask:url('/assets/logos/hillside-mark-white-b.png') center / contain no-repeat;
}

/* ── base ────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-synthesis:none;
  overflow-x:clip;
}
body.menu-open{overflow:hidden}
img,video{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--forest);color:var(--paper)}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.wrap{padding-inline:var(--gut);max-width:var(--page);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.5rem;z-index:99;background:var(--forest);color:var(--paper);padding:.7rem 1rem;font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* ── type voices ─────────────────────────────────────────────────── */
.cap{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.cap-faint{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:1.5}
.lede{font-family:var(--serif);font-weight:330;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.45;letter-spacing:-.008em;text-wrap:pretty}
.prose{max-width:58ch;color:var(--ink-soft);text-wrap:pretty}
.prose + .prose{margin-top:1.1em}
.quote{font-family:var(--serif);font-style:italic;font-weight:310;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.55;color:var(--ink-soft);text-wrap:pretty}

/* ── masthead ────────────────────────────────────────────────────── */
.mast{padding-top:1.4rem}
.mast-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.8rem;padding-bottom:.9rem}
.wordmark{display:inline-flex;align-items:center;min-height:44px}
.wordmark-img{
  display:block;width:132px;aspect-ratio:447/71;background-color:var(--ink);
  -webkit-mask:url('/assets/logos/hillside-wordmark-tight.png?v=2') center / contain no-repeat;
  mask:url('/assets/logos/hillside-wordmark-tight.png?v=2') center / contain no-repeat;
}
/* the menu panel's plain-text wordmark keeps the old voice */
.nav{display:flex;gap:.25rem clamp(1rem,2.1vw,1.9rem);align-items:center;flex-wrap:wrap}
.nav a{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.nav a:hover{color:var(--forest)}
.nav a.give{font-weight:600;color:var(--forest)}
.nav a[aria-current="page"]{font-weight:600;color:var(--forest);box-shadow:0 2px 0 var(--forest)}
.rule{border-top:var(--rule-w) solid var(--ink)}

/* menu button — the nav below the inline breakpoint */
.menu-btn{
  display:none;align-items:center;gap:.6em;min-height:44px;
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.menu-btn .bars{display:inline-block;width:20px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
/* the panel only replaces the inline nav when JS is there to open it */
@media (max-width:859px){
  .js .nav{display:none}
  .js .menu-btn{display:inline-flex}
}

/* The panel toggles on `display`, not opacity — visibility must never
   depend on a transition running, or a stalled one hides the nav. */
.menu-panel{position:fixed;inset:0;z-index:80;background:var(--paper);display:none}
.menu-panel.open{display:flex;flex-direction:column}
.menu-panel.open .menu-links a{animation:menuIn .42s var(--lift) both}
.menu-panel.open .menu-links a:nth-child(2){animation-delay:.04s}
.menu-panel.open .menu-links a:nth-child(3){animation-delay:.08s}
.menu-panel.open .menu-links a:nth-child(4){animation-delay:.12s}
.menu-panel.open .menu-links a:nth-child(5){animation-delay:.16s}
.menu-panel.open .menu-links a:nth-child(6){animation-delay:.2s}
.menu-panel.open .menu-links a:nth-child(7){animation-delay:.24s}
.menu-panel.open .menu-links a:nth-child(8){animation-delay:.28s}
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.menu-inner{display:flex;flex-direction:column;height:100%;padding-top:1.4rem;padding-bottom:2rem}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:.9rem;border-bottom:var(--rule-w) solid var(--ink)}
.menu-links{display:flex;flex-direction:column;margin-top:auto;margin-bottom:auto;gap:.1rem}
.menu-links a{
  font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.18;
  letter-spacing:-.01em;color:var(--ink);
  display:block;padding:.15em 0;transition:color .3s var(--lift),transform .4s var(--lift);
}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--forest);transform:translateX(.14em)}
.menu-links a[aria-current="page"]{color:var(--forest);font-style:italic}
.menu-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;border-top:1px solid var(--rule-hair);padding-top:1.1rem}

/* every standalone link is a 44px touch target */
.wordmark,.nav a,.bill-link,.memorial .more,.ask a,.plate-cap a,.more,.menu-close{
  display:inline-flex;align-items:center;min-height:44px;
}
.menu-close{background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.menu-close:hover{color:var(--forest)}

/* ── hero (home) ─────────────────────────────────────────────────── */
/* --hero is capped so the headline's longest line ("showing up." in
   italic, ~4.6em) always clears the right column. */
.hero{margin-top:clamp(1.6rem,4vw,2.5rem)}
/* the hill is in flow above the hero; the hero climbs back over it */
body.has-hill .hero{margin-top:calc(clamp(1.6rem,4vw,2.5rem) - var(--hill-h))}
.hero-kicker{display:block;color:var(--ink-faint);margin-bottom:clamp(1.2rem,2.6vw,1.8rem)}
.hero h1{font-family:var(--display);font-weight:400;font-size:var(--hero);line-height:.94;letter-spacing:-.02em;text-transform:uppercase}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero-note{margin-top:clamp(1.8rem,3.6vw,3rem);max-width:34ch;color:var(--ink-soft)}
.hero-founded{display:block;margin-top:1.1rem}

/* the TG monogram holds the hero's right column — the memorial at the
   top of the page, without a word. White-on-transparent PNG recolored
   to forest via mask so the source asset stays untouched. */
/* The narrow text column keeps the headline's three-line fall
   (A NEW / GENERATION / SHOWING UP.) and leaves the right side open
   for the hill. Below 660px the font is sized in vw so the same three
   lines fall on a phone. */
@media (min-width:660px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:clamp(1.75rem,4vw,4rem);
    align-items:center;
  }
  .hero-type{padding-top:1.5rem}
}
@media (max-width:659.98px){
  .hero h1{font-size:clamp(2.9rem,17vw,7rem)}
  body.has-hill{--hill-h:65.8vw}
  .hill{width:88vw;margin-right:4vw;top:9vh}
}

/* ── the season bill — an open ledger, not a box ─────────────────
   Same grammar as the wall and the timeline: one strong top rule,
   hairlines between entries, no frames. Years in the display face,
   place/date in serif, counts in quiet caps, actions as arrow links. */
.bill{border-top:var(--rule-w) solid var(--ink);margin-top:clamp(2.5rem,6vw,4.5rem)}
.bill-row{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.25rem;align-items:baseline;padding:clamp(1.5rem,3.2vw,2.2rem) 0;border-bottom:1px solid var(--rule-hair)}
/* the year centers on the whole entry (place + count + link) on phones,
   exactly as it centers on the row on desktop */
.bill-year{grid-row:span 2;align-self:center}
.bill-link{justify-self:start}
.bill-year{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:1}
.bill-row--next .bill-year{color:var(--forest)}
.bill-place{font-family:var(--serif);font-weight:380;font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.008em;margin-top:.35rem}
.bill-link{color:var(--forest)}
@media (min-width:760px){
  .bill-row{grid-template-columns:7rem minmax(0,1fr) auto;gap:1rem 2.5rem;align-items:center}
  .bill-year{grid-row:auto}
  .bill-place{margin-top:0}
}
/* a ledger row may carry a real button (the walk ticket) — it sits
   where the arrow link would, centered on the row like everything else */
.bill-row .btn{justify-self:start;font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.75rem}
@media (max-width:759px){.bill-row .btn{grid-column:1 / -1;justify-self:stretch;text-align:center;margin-top:.4rem}}
.btn{display:inline-block;background:var(--forest);color:var(--paper);padding:.85rem 1.15rem;border:0;cursor:pointer;font-family:var(--sans);transition:background .3s var(--lift),transform .3s var(--lift)}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}

/* ── full-bleed band ─────────────────────────────────────────────── */
.band{background:var(--forest-deep);color:var(--paper);margin-top:clamp(3.5rem,8vw,6rem);padding-block:clamp(3.5rem,8vw,7rem)}
.band .cap{color:var(--paper);opacity:.65}
.band-statement{font-family:var(--display);font-weight:400;font-size:var(--band);line-height:1.02;margin-top:1.4rem}
.band-statement em{font-style:italic}
.band-note{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.45;max-width:38ch;margin-top:1.5rem}
.band-num{display:block;font-family:var(--display);font-weight:400;font-size:clamp(4.5rem,12vw,11rem);line-height:.9;margin-top:.6rem}
/* quieter band: a statement inside a story, not the page's one big claim.
   Centered — small type left-aligned in a full-bleed pane leaves a void. */
.band--sub{text-align:center}
.band--sub .band-statement{font-size:clamp(2rem,4.4vw,4.4rem);margin-top:1rem;max-width:20ch;margin-inline:auto}
.band--sub .band-note{max-width:46ch;margin-inline:auto}
/* a quieter band — same voice, lower volume */
.band--tight{padding-block:clamp(2.4rem,5.5vw,4.5rem)}
.band--tight .band-num{font-size:clamp(3.4rem,8vw,6.5rem)}
.band--tight .band-statement{font-size:clamp(1.8rem,3.6vw,3.4rem)}
.band-statement em{font-style:italic}
.band-cta{color:var(--paper);opacity:.85;display:inline-flex;align-items:center;min-height:44px;margin-top:1.6rem;gap:.5em}
.band-cta:hover{opacity:1}
.band-cta span{display:inline-block;transition:transform .4s var(--lift)}
.band-cta:hover span{transform:translateX(.3em)}

/* ── the artists field ────────────────────────────────────────────
   The page title stays pinned in the middle of the viewport while the
   work scrolls past it, scattered on the paper with air — smaller
   frames, native ratios, never cropped. The figures ride ABOVE the
   pinned title (z1 over z0) so pieces pass over it, and the field
   hands the scroll to the commitment band. Pure CSS (sticky) — no
   observers, no rAF. */
.afield{position:relative;height:451vh;max-width:var(--page);margin-inline:auto}
/* the field hands off snugly to whatever band follows it */
.afield + .band{margin-top:-18vh}
.afig video{display:block;width:100%;height:auto}
.acenter{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:0}
.acenter h1{font-family:var(--display);font-weight:400;font-size:var(--title);line-height:.94;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.1rem}
.acenter h1 em{font-style:italic;color:var(--forest)}
.afig{position:absolute;margin:0;z-index:1}
.afig img{display:block;width:100%;height:auto}
.afig figcaption{margin-top:.55rem;font:500 .62rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
@media (min-width:660px){
  /* the title is clean at load (only corner pieces above the fold)
     and clean again at the end — the field runs ~38vh past the last
     frame so it clears the pinned title well before the release
     toward the band. Tunney moments (1, 7, 15) are spread through
     the run; artists interleave. */
  .afig:nth-of-type(1){left:76%;top:2vh;width:min(240px,22vw)}
  .afig:nth-of-type(2){left:5%;top:2vh;width:min(260px,30vw)}
  .afig:nth-of-type(3){left:8%;top:70vh;width:min(380px,34vw)}
  .afig:nth-of-type(4){left:70%;top:70vh;width:min(230px,22vw)}
  .afig:nth-of-type(5){left:40%;top:108vh;width:min(260px,26vw)}
  .afig:nth-of-type(6){left:68%;top:108vh;width:min(330px,28vw)}
  .afig:nth-of-type(7){left:8%;top:150vh;width:min(240px,24vw)}
  .afig:nth-of-type(8){left:64%;top:150vh;width:min(360px,32vw)}
  .afig:nth-of-type(9){left:36%;top:184vh;width:min(340px,30vw)}
  .afig:nth-of-type(10){left:74%;top:188vh;width:min(200px,20vw)}
  .afig:nth-of-type(11){left:10%;top:218vh;width:min(320px,30vw)}
  .afig:nth-of-type(12){left:64%;top:224vh;width:min(280px,26vw)}
  .afig:nth-of-type(13){left:40%;top:256vh;width:min(250px,24vw)}
  .afig:nth-of-type(14){left:8%;top:258vh;width:min(220px,22vw)}
  .afig:nth-of-type(15){left:66%;top:272vh;width:min(290px,28vw)}
  .afig:nth-of-type(16){left:10%;top:306vh;width:min(400px,36vw)}
  .afig:nth-of-type(17){left:46%;top:344vh;width:min(280px,26vw)}
}
@media (max-width:659.98px){
  .afield{height:432vh}
  .afield + .band{margin-top:-12vh}
  .afig:nth-of-type(1){left:64%;top:2vh;width:32vw}
  .afig:nth-of-type(2){left:4%;top:4vh;width:46vw}
  .afig:nth-of-type(3){left:6%;top:64vh;width:58vw}
  .afig:nth-of-type(4){left:68%;top:64vh;width:28vw}
  .afig:nth-of-type(5){left:8%;top:98vh;width:40vw}
  .afig:nth-of-type(6){left:52%;top:98vh;width:46vw}
  .afig:nth-of-type(7){left:54%;top:124vh;width:38vw}
  .afig:nth-of-type(8){left:4%;top:136vh;width:48vw}
  .afig:nth-of-type(9){left:6%;top:170vh;width:44vw}
  .afig:nth-of-type(10){left:64%;top:172vh;width:30vw}
  .afig:nth-of-type(11){left:6%;top:196vh;width:50vw}
  .afig:nth-of-type(12){left:62%;top:202vh;width:34vw}
  .afig:nth-of-type(13){left:10%;top:230vh;width:36vw}
  .afig:nth-of-type(14){left:56%;top:236vh;width:30vw}
  .afig:nth-of-type(15){left:8%;top:270vh;width:44vw}
  .afig:nth-of-type(16){left:40%;top:316vh;width:56vw}
  .afig:nth-of-type(17){left:12%;top:346vh;width:48vw}
}

/* ── the film hero (home) ─────────────────────────────────────────
   First frame of the site: the terrace at dusk, full bleed, silent,
   looping. Sized to the LARGE viewport (100lvh) so on a phone nothing
   below it shows until the reader scrolls; the wordmark and cue are
   offset by (lvh − svh) so they still sit above the browser bars. The
   masthead rides over the film in paper. Video never hides content:
   the poster is a still of the same frame. */
body.has-film header{position:relative;z-index:5}
body.has-film .mast{position:absolute;left:0;right:0;top:0;color:var(--paper)}
body.has-film .wordmark-img{background-color:var(--paper)}
body.has-film .menu-btn,body.has-film .nav a,body.has-film .nav a.give{color:var(--paper)}
body.has-film .nav a:hover{color:#fff}
body.has-film .rule{border-top-color:rgba(241,235,222,.55)}
/* the headline pane gets more air above it now that it is the second act */
body.has-film.has-hill .hero{margin-top:calc(clamp(4rem,9vw,7rem) - var(--hill-h))}
.fhero{position:relative;height:100vh;height:100lvh;min-height:560px;overflow:hidden;background:#0f120f;color:var(--paper)}
.fhero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;background:#0f120f url('/assets/video/hero-terrace-poster.webp') center/cover no-repeat}
/* phone: the cover crop shows ~26% of the frame's width — sit it on the
   fire escape, the red building and the bar, not the white wall */
@media (max-width:659px){.fhero-v{object-position:64% 40%}}
/* desktop: the left 14% of the frame is a dark brick wall. Anchor the crop
   to the right so the wall is what a narrow window loses first; on wide
   screens (where cover shows the whole width) scale from the right edge
   so the wall leaves the picture and the view reads balanced */
@media (min-width:660px){.fhero-v{object-position:100% 45%}}
@media (min-width:660px) and (min-aspect-ratio:16/9){.fhero-v{transform:scale(1.165);transform-origin:100% 45%}}
.fhero-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,18,15,.45),rgba(15,18,15,.05) 35%,rgba(15,18,15,.15) 70%,rgba(15,18,15,.6))}
.fhero-type{position:absolute;left:0;right:0;bottom:clamp(3.5rem,9vh,6rem);bottom:calc(100lvh - 100svh + clamp(3.5rem,9vh,6rem));display:flex;flex-direction:column;align-items:center;gap:.9rem;padding-inline:var(--gut)}
.fhero-mark{display:block;width:min(46vw,300px);aspect-ratio:447/71;background-color:var(--paper);-webkit-mask:url('/assets/logos/hillside-wordmark-tight.png?v=2') center/contain no-repeat;mask:url('/assets/logos/hillside-wordmark-tight.png?v=2') center/contain no-repeat;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
.fhero-est{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ── the media grid ──────────────────────────────────────────────
   A composed 12-column system, one gap token, aligned edges. Rows
   pair a wide landscape (span 8 @ 3:2) with a tall pocket (span 4
   @ 3:4) — the two heights are identical by construction, so every
   row closes flush. Pockets are looping windows of the films. */
.mgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2.5rem);padding-inline:var(--gut);max-width:var(--page);margin-inline:auto}
.mgrid > *{margin:0}
.m-w{grid-column:span 8 / span 8}
.m-t{grid-column:span 4 / span 4}
.m-full{grid-column:1 / -1}
.mgrid img,.mgrid video{width:100%;height:auto;object-fit:cover;display:block}
.m-w img,.m-w video{aspect-ratio:3/2}
.m-t img,.m-t video{aspect-ratio:3/4}
.m-full img,.m-full video{aspect-ratio:21/9}
.mgrid + .mgrid{margin-top:clamp(1.25rem,2.6vw,2.5rem)}
@media (max-width:659px){
  /* phone: photos full width; the two film pockets share one row so the
     column gets rhythm instead of eight stacked tiles; the third pocket
     (same film) steps out */
  .m-w{grid-column:1 / -1}
  .m-t{grid-column:span 6 / span 6}
  .m-t img,.m-t video{aspect-ratio:3/4}
  .mgrid figure.m-t:last-of-type{display:none}
  .m-full img,.m-full video{aspect-ratio:16/9}
}

/* ── memorial ────────────────────────────────────────────────────── */
.memorial{text-align:center;padding-block:clamp(4rem,9vw,8rem)}
.memorial .quote{max-width:44ch;margin-inline:auto}
.memorial .more{margin-top:1.2rem;color:var(--forest)}

/* ── email capture ───────────────────────────────────────────────── */
.capture{padding-bottom:clamp(3.5rem,8vw,7rem)}
.capture-form{display:flex;border:var(--rule-w) solid var(--ink);align-items:stretch;flex-wrap:wrap}
.capture-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.capture-form #stayName{border-right:var(--rule-w) solid var(--ink)}
.capture-form input{
  flex:1 1 14rem;min-width:0;border:0;background:transparent;
  font-family:var(--sans);font-size:1.0625rem;color:var(--ink);
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.1rem,2.2vw,1.8rem);
}
.capture-form input::placeholder{color:rgba(25,24,19,.5)}
.capture-form input:focus{outline:none;background:rgba(31,61,42,.05)}
.capture-form button{
  border:0;cursor:pointer;background:var(--forest);color:var(--paper);
  font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:1.15rem clamp(1.5rem,3.5vw,2.75rem);transition:background .3s;
  white-space:nowrap;
}
/* when the row is too tight, the button takes its own full row rather
   than breaking its label mid-sentence */
@media (max-width:760px){.capture-form button{flex:1 1 100%}}
.capture-form button:hover{background:var(--ink)}
.capture-note{margin-top:1rem}
.form-status{margin-top:.75rem;min-height:1.4em;color:var(--forest)}

/* ── interior pages ──────────────────────────────────────────────── */
.page-head{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.page-head h1{font-family:var(--display);font-weight:400;font-size:var(--title);line-height:.94;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.2rem}
.page-head h1 em{font-style:italic;color:var(--forest)}
.page-head--quiet h1{text-transform:none;letter-spacing:-.018em;font-size:clamp(2.5rem,8vw,7rem)}
.page-head .lede{margin-top:1.6rem;max-width:34ch}
.page-head .prose{margin-top:1.5rem}

.section{padding-block:clamp(2.5rem,6vw,4.5rem)}
.section-head{border-top:var(--rule-w) solid var(--ink);padding-top:1rem;margin-bottom:clamp(1.8rem,4vw,2.8rem);display:flex;justify-content:space-between;gap:.4rem 1.5rem;flex-wrap:wrap;align-items:center}
.section-head h2{font-family:var(--serif);font-weight:380;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.01em;line-height:1.2}

.split{display:grid;gap:clamp(2rem,4.5vw,3rem)}
@media (min-width:660px){
  .split{grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,3rem)}
  /* portrait column is deliberately narrow and centre-aligned: a tall
     image beside short copy otherwise leaves a large void to its right */
  .split--portrait{grid-template-columns:3fr 8fr;align-items:center;gap:clamp(2rem,4vw,3.5rem)}
  .split-aside{border-left:var(--rule-w) solid var(--ink);padding-left:clamp(1.75rem,3vw,3rem)}
}
/* the portrait file is 428px wide — never scale it past that or it softens */
.split--portrait figure{max-width:428px}
/* desktop: the caption hangs below the figure's box so the text column
   centers on the PHOTOGRAPH, not photograph-plus-caption */
@media (min-width:660px){
  .split--portrait figure{position:relative}
  .split--portrait figure .plate-cap{position:absolute;top:100%;left:0;right:0}
}

/* landscape | portrait | landscape — column ratios chosen so all
   three run at their NATIVE ratios and the row stays flush */
.trio{display:grid;grid-template-columns:2.25fr 1fr 1fr;gap:clamp(.35rem,.9vw,.7rem);margin-top:clamp(.35rem,.9vw,.7rem)}
.trio a{display:block;overflow:hidden}
.trio img{aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease)}
.trio a:nth-child(2) img,.trio a:nth-child(3) img{aspect-ratio:2/3}
.trio a:hover img{transform:scale(1.03)}
/* landscape | portrait | landscape — the About row: columns still
   proportional to the native ratios (3:2 = 2.25, 2:3 = 1) so nothing crops */
.trio--lpl{grid-template-columns:2.25fr 1fr 2.25fr}
.trio--lpl a:nth-child(3) img{aspect-ratio:3/2}
@media (max-width:659.98px){
  .trio,.trio--lpl{grid-template-columns:1fr}
}

.duo{display:grid;grid-template-columns:2.25fr 1fr;gap:clamp(.35rem,.9vw,.7rem);margin-top:clamp(2.5rem,6vw,5rem)}
.duo a{display:block;overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover}
.duo a:first-child img{aspect-ratio:3/2}
.duo + .plate-cap{padding-top:.75rem}

.plate{margin-top:clamp(2.5rem,6vw,5rem)}
.plate img{object-fit:cover}
.plate-cap{display:flex;justify-content:space-between;align-items:center;gap:.3rem 1.5rem;flex-wrap:wrap;padding-top:.75rem}

/* timeline (foundation) */
.timeline{border-top:var(--rule-w) solid var(--ink)}
.timeline li{list-style:none;display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.4rem 0;border-bottom:1px solid var(--rule-hair)}
@media (min-width:660px){
  /* the year centers on the whole entry (title + body), like the bill */
  .timeline li{grid-template-columns:8rem minmax(0,1fr);gap:2.5rem;align-items:center}
}
.timeline .year{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;color:var(--forest)}
.timeline strong{display:block;font-family:var(--serif);font-weight:430;font-size:clamp(1.1rem,1.6vw,1.3rem);margin-bottom:.3rem}
.timeline p{color:var(--ink-soft);max-width:54ch}

/* stat ledger */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--rule-w) solid var(--ink);gap:0 clamp(1.5rem,3vw,3rem)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:clamp(1.3rem,2.6vw,1.9rem) 0;border-bottom:1px solid var(--rule-hair)}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1}
.stat span{display:block;margin-top:.5rem}

/* sponsor wall */
.wall{border-top:var(--rule-w) solid var(--ink);display:grid;grid-template-columns:1fr;gap:0 clamp(2rem,4vw,4rem);margin-top:.7rem}
@media (min-width:660px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wall li{list-style:none;font-family:var(--serif);font-weight:380;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.008em;border-bottom:1px solid var(--rule-hair);padding:1.05rem 0}
.wall-note{font-family:var(--serif);font-style:italic;font-weight:310;font-size:1.15rem;color:var(--ink-faint);margin-top:1.6rem}

/* artist bill — same open-ledger grammar */
.artist-bill{border-top:var(--rule-w) solid var(--ink);margin-top:clamp(2rem,5vw,3.5rem)}
/* the medium sits on the right on desktop, always; under the name on
   phones, always — never sometimes-right, sometimes-wrapped */
.artist-row{display:flex;align-items:baseline;gap:.5rem 2rem;flex-wrap:nowrap;padding:clamp(1.3rem,2.6vw,1.9rem) 0;border-bottom:1px solid var(--rule-hair)}
.artist-name{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.7vw,2.75rem);line-height:1.05;flex:1 1 auto;min-width:0}
.artist-row .cap-faint{flex:none;margin-left:auto;white-space:nowrap}
@media (max-width:659px){
  .artist-row{flex-direction:column;align-items:flex-start;gap:.35rem}
  .artist-row .cap-faint{margin-left:0}
}

/* ── the night: masonry, whole frames, no square crops ───────────
   Photographs keep their own proportions — a uniform square crop
   decapitates people in group shots. Each tile carries the photo's
   average colour, so a frame still loading reads as a colour block
   rather than a hole. */
.mason{columns:2;column-gap:clamp(.35rem,.9vw,.7rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:660px){.mason{columns:3}}
@media (min-width:1180px){.mason{columns:4}}
.mason a{display:block;break-inside:avoid;margin-bottom:clamp(.35rem,.9vw,.7rem);overflow:hidden;position:relative}
.mason img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .5s var(--lift)}
.mason a:hover img{transform:scale(1.03)}
.mason a::after{
  content:attr(data-n);position:absolute;left:.5rem;bottom:.5rem;
  font:600 .625rem/1 var(--sans);letter-spacing:.14em;color:#F1EBDE;
  opacity:0;transition:opacity .35s var(--lift);text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.mason a:hover::after{opacity:.85}

.chapter{margin-top:clamp(3rem,7vw,5.5rem)}
.chapter:first-of-type{margin-top:clamp(1.5rem,3vw,2rem)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(13,16,13,.97);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:clamp(3rem,6vw,4rem) clamp(3rem,7vw,5rem)}
.lb img{max-width:100%;max-height:80svh;width:auto;height:auto;object-fit:contain}
.lb figcaption{color:rgba(241,235,222,.6);font:500 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.lb button{
  position:absolute;background:none;border:0;color:#F1EBDE;cursor:pointer;
  font:600 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  opacity:.75;transition:opacity .3s;
}
.lb button:hover{opacity:1}
.lb-close{top:.75rem;right:1rem}
.lb-prev{left:.35rem;top:50%;transform:translateY(-50%);font-size:1.5rem}
.lb-next{right:.35rem;top:50%;transform:translateY(-50%);font-size:1.5rem}
@media (prefers-reduced-motion:reduce){.mason img{transition:none}.mason a:hover img{transform:none}}

/* closing ask */
.ask{border-top:var(--rule-w) solid var(--ink);margin-top:clamp(3rem,7vw,5rem);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap}
.ask-q{font-family:var(--serif);font-weight:330;font-size:clamp(1.25rem,2.1vw,1.65rem);max-width:34ch}
.ask a{color:var(--forest)}


/* forest CTA band */
/* ── the film (2026 page) ────────────────────────────────────────── */
.film{margin-top:clamp(1rem,2.5vw,2rem)}
.film video{display:block;width:100%;height:auto;background:#0f120f}

/* ── socials (about) — recreated previews in our grammar: rules,
   not boxes; the circle avatar is the one platform idiom kept ──── */
/* sits right under the 'in the room next time?' ask — the text is as far
   from this rule as from its own (the old 3–5rem margin left a void) */
.socials{margin-top:1.5rem}
.social-duo{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:660px){.social-duo{grid-template-columns:1fr 1fr}}
/* faithful recreations of the actual profiles, framed as specimens —
   the one place platform idioms (blue buttons, round avatars, white
   ground) are kept on purpose */
.social-embed{display:block;background:#fff;color:#111;border:1px solid var(--rule-hair);border-radius:14px;overflow:hidden;font-family:var(--sans);line-height:1.4;transition:transform .5s var(--lift),box-shadow .5s var(--lift)}
.social-embed:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(25,24,19,.12)}
.ig{padding:1.1rem 1.1rem 0;background:#000;color:#fafafa}
.ig-head{display:flex;align-items:center;gap:1.3rem}
.ig-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.ig-id{display:flex;flex-direction:column;gap:.55rem;flex:1;min-width:0}
.ig-name{font-size:.92rem;font-weight:600;line-height:1.2}
.ig-stats{display:flex;justify-content:space-between;max-width:15.5rem;font-size:.72rem;color:#fafafa}
.ig-stats span{display:flex;flex-direction:column;align-items:center;gap:.05rem}
.ig-stats b{font-weight:700;font-size:1.02rem}
.ig-bio{display:block;font-size:.8rem;margin-top:.9rem;color:#fafafa}
.ig-link{display:block;color:#fafafa;font-weight:600;margin-top:.2rem}
.ig-btn{display:block;text-align:center;background:#0095f6;color:#fff;font-weight:600;font-size:.82rem;border-radius:8px;padding:.5rem 0;margin-top:.9rem}
.ig-hl{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.66rem;color:#fafafa;margin-top:1rem}
.ig-hl-ring{display:block;width:56px;height:56px;border-radius:50%;border:1px solid #3a3a3a;padding:3px}
.ig-hl-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:1rem -1.1rem 0}
.ig-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.li{padding-bottom:1.1rem}
.li-banner img{width:100%;aspect-ratio:4/1;object-fit:cover;display:block}
.li-logo{width:72px;height:72px;display:block;border:3px solid #fff;background:var(--forest-deep);margin:-38px 0 0 1.1rem;position:relative}
.li-name{display:block;font-size:1.3rem;font-weight:700;margin:.55rem 1.1rem 0}
.li-tag{display:block;font-size:.8rem;color:#333;margin:.3rem 1.1rem 0;max-width:40ch}
.li-meta{display:block;font-size:.72rem;color:#777;margin:.4rem 1.1rem 0}
.li-btn{display:inline-block;background:#0a66c2;color:#fff;font-weight:600;font-size:.82rem;border-radius:999px;padding:.42rem 1.2rem;margin:.9rem 1.1rem 0}
.li-tabs{display:flex;gap:1.3rem;border-top:1px solid #e8e8e8;margin-top:1.1rem;padding:.75rem 1.1rem 0;font-size:.78rem;color:#555}
.li-tabs b{color:#01754f;font-weight:600}
.social-duo > div > .social-follow{margin-top:1rem}
.social-follow{display:inline-flex;align-items:center;margin-top:1.1rem;color:var(--forest)}
.social-follow span{display:inline-block;margin-left:.35em;transition:transform .4s var(--lift)}
.social-card:hover .social-follow span{transform:translateX(.3em)}

/* ── the sponsor credits — the night rolls behind the names ──────
   Each .reel pins a muted window of the film to the viewport (sticky,
   like the artists field — no observers, no rAF; the clip-pocket JS
   windows and visibility-pauses the video) while the names scroll
   over it like end credits. */
.reel{position:relative}
.reel-screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0f120f}
.reel-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.2s var(--lift)}
.reel-screen video.on{opacity:1}
.reel-scrim{position:absolute;inset:0;background:rgba(15,18,15,.4)}
/* the roll flows AFTER the pinned screen, so the names rise over the
   film for the roll's whole height — a beat of pure film first */
.reel-roll{position:relative;z-index:1;text-align:center;color:var(--paper);padding-block:24vh 34vh}
.reel-kicker{color:var(--paper);opacity:.62;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.roll{list-style:none;display:grid;gap:clamp(1.2rem,2.8vh,2rem);padding:0;margin:0}
.roll li{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.01em;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.reel-note{font-family:var(--serif);font-style:italic;font-weight:310;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--paper);opacity:.75;max-width:36ch;margin-inline:auto;margin-top:clamp(2rem,5vh,3.2rem)}
/* the film hands straight to the forest band — no cream sliver */
.reel + .cta-band{margin-top:0}

.cta-band{background:var(--forest-deep);color:var(--paper);margin-top:clamp(3.5rem,8vw,6rem);padding-block:clamp(3rem,7vw,5.5rem)}
.cta-band .cap{color:var(--paper);opacity:.65}
.cta-band h2{font-family:var(--display);font-size:clamp(2.4rem,6.4vw,6rem);line-height:1;font-weight:400;margin-top:1.2rem}
.cta-band p{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45;max-width:38ch;margin-top:1.2rem}
.cta-actions{display:flex;gap:1rem 2rem;flex-wrap:wrap;align-items:center;margin-top:2.2rem}
/* the button stands clear of the paragraph — a beat of air before the ask */
.cta-band .btn{background:var(--paper);color:var(--forest-deep);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.75rem;margin-top:clamp(2rem,3.5vw,2.75rem)}
.cta-band .btn:hover{background:var(--ink);color:var(--paper)}
.cta-band .plain{color:var(--paper);opacity:.8;display:inline-flex;align-items:center;min-height:44px}
.cta-band .plain:hover{opacity:1}


/* ── the walk: their page in a window + our map ────────────────────
   The browser is a faithful recreation (the same sanctioned exception
   as the social embeds); the cursor and the page scroll are CSS
   keyframes only. The map is line-drawn on the paper — no box. */
.walk-pair{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,6vw,4.5rem);align-items:start}
@media (min-width:660px){.walk-pair{grid-template-columns:7fr 5fr}}
.browser{margin:0}
.bw-chrome{display:flex;align-items:center;gap:.9rem;background:#e9e6df;border:1px solid rgba(25,24,19,.22);border-bottom:0;border-radius:10px 10px 0 0;padding:.55rem .8rem}
.bw-dots{display:inline-flex;gap:.38rem}
.bw-dots i{width:.68rem;height:.68rem;border-radius:50%;background:#c9c4b8;display:block}
.bw-url{flex:1;background:#fff;border-radius:6px;font:500 .72rem/1.6 var(--sans);color:rgba(25,24,19,.6);padding:.15rem .7rem;letter-spacing:.01em}
.bw-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;border:1px solid rgba(25,24,19,.22);border-radius:0 0 10px 10px;container-type:inline-size}
/* the recreated page is laid out in em; 1em = 16px at 1100px wide,
   and cqw keeps that ratio at every container width */
.bw-page{position:absolute;inset:0 0 auto 0;font-size:1.4545cqw;font-family:"Proxima Nova",Montserrat,"Helvetica Neue",Arial,sans-serif;color:#041e42;line-height:1.3;animation:bwScroll 14s ease-in-out infinite}
.bw-page *{font-family:inherit}
.sp-announce{background:#9543ff;color:#fff;font-size:.82em;text-align:center;padding:1em 3em;position:relative;font-weight:500}
.sp-announce b{font-weight:700}
.sp-x{position:absolute;right:1.3em;top:.9em;font-weight:700}
.sp-head{display:flex;align-items:center;gap:1.4em;padding:1.1em 1.6em;background:#fff}
.sp-logo{display:flex;align-items:center;gap:.5em;line-height:1.05;flex:none}
.sp-logo b{display:block;font-size:1.25em;font-weight:800;letter-spacing:-.01em}
.sp-logo em{display:block;font-style:normal;font-weight:800;font-size:1.05em;color:#9543ff}
.sp-logo small{display:block;font-size:.5em;font-weight:700;color:#fff;background:#9543ff;padding:.1em .3em;margin-top:.15em;width:max-content}
.sp-mark{width:1.7em;height:1.7em;display:block;background:
  conic-gradient(from 0deg,#2cd5c4 0 12deg,transparent 12deg 45deg,#2cd5c4 45deg 57deg,transparent 57deg 90deg,#2cd5c4 90deg 102deg,transparent 102deg 135deg,#2cd5c4 135deg 147deg,transparent 147deg 180deg,#2cd5c4 180deg 192deg,transparent 192deg 225deg,#2cd5c4 225deg 237deg,transparent 237deg 270deg,#2cd5c4 270deg 282deg,transparent 282deg 315deg,#2cd5c4 315deg 327deg,transparent 327deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 23%);mask:radial-gradient(circle,transparent 22%,#000 23%);border-radius:50%}
.sp-nav{display:flex;gap:1.3em;margin-left:auto;font-weight:700;font-size:.95em}
.sp-pill{display:inline-block;border-radius:999px;font-weight:700;font-size:1.05em;padding:.62em 1.25em;white-space:nowrap}
.sp-teal{background:#2cd5c4;color:#041e42}
.sp-navy{background:#041e42;color:#fff}
.sp-purple{background:#9543ff;color:#fff;transition:background .2s}
.sp-menu{background:#041e42;color:#fff;display:flex;align-items:center;justify-content:center;gap:0;font-size:.95em;font-weight:600}
.sp-menu b{padding:0 1.4em}
.sp-menu span{padding:1em 1.1em}
.sp-menu .on{background:#2cd5c4;color:#041e42}
.sp-band{background:#e6ecf4;padding:1.5em 1.5em 2.4em}
.sp-hero{background:#041e42;border-radius:1.4em;display:grid;grid-template-columns:47% 1fr;overflow:hidden;min-height:20em}
.sp-photo{background:linear-gradient(160deg,#0b3c8a,#041e42 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-mark--big{width:15em;height:15em;opacity:.25;transform:rotate(15deg)}
.sp-hero-text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:1.5em 2em}
.sp-hero-text h3{font-size:2.35em;font-weight:700;line-height:1.1;margin:0}
.sp-hero-text p{font-size:1.1em;margin:.9em 0 1.2em}
.sp-btns{display:flex;gap:.9em}
.sp-thermo{margin:-1.5em 1.5em 0;background:#fff;border-radius:1em;padding:1.1em;box-shadow:0 .6em 1.6em rgba(4,30,66,.12);position:relative}
.sp-track{background:#cfd7e2;border-radius:.5em;height:2.6em;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-weight:700}
.sp-fill{background:#2cd5c4;color:#041e42;height:100%;display:flex;align-items:center;padding:0 1em;width:22%}
.sp-goal{padding:0 1em}
.sp-body{padding:2.2em 3em 3em;text-align:center}
.sp-body h4{font-size:1.5em;font-weight:700;margin:0 0 1.4em}
.sp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em;text-align:left;font-size:.95em}
.sp-cols h5{font-size:1.15em;margin:0 0 .4em;font-weight:700}
.sp-cols p{margin:0;color:#333}
.sp-register{margin-top:2em}
/* the cursor: arrives, the page scrolls to the details and back,
   then it lands on Donate and clicks */
/* positions are all in cqw — the view is a fixed 16:10, and cqh would
   fall back to the viewport (the view is an inline-size container) */
.bw-cursor{position:absolute;left:0;top:0;width:5%;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));animation:bwCursor 14s ease-in-out infinite;transform:translate(96cqw,45cqw)}
@keyframes bwCursor{
  0%,8%{transform:translate(96cqw,45cqw)}
  18%,52%{transform:translate(60cqw,36cqw)}
  64%,70%{transform:translate(79cqw,38.4cqw)}
  72%{transform:translate(79cqw,38.4cqw) scale(.82)}
  74%,86%{transform:translate(79cqw,38.4cqw)}
  100%{transform:translate(96cqw,45cqw)}
}
@keyframes bwScroll{
  0%,24%{transform:translateY(0)}
  34%,48%{transform:translateY(-24em)}
  58%,100%{transform:translateY(0)}
}
.sp-donate{animation:bwDonate 14s ease-in-out infinite}
@keyframes bwDonate{
  0%,66%{background:#9543ff;transform:none}
  70%,72%{background:#7a2ee6;transform:none}
  73%,75%{background:#5f1fc2;transform:scale(.94)}
  78%,84%{background:#7a2ee6;transform:none}
  88%,100%{background:#9543ff;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bw-page,.bw-cursor,.sp-donate{animation:none}
  .bw-cursor{display:none}
}
/* the map — public-domain USGS imagery (Apple-Maps bright), the route
   as a vector overlay so it stays crisp at every size: white casing,
   blue line, white-ringed pin at Pier 76, labels haloed like Apple's */
.wmap{margin:0}
.sat{position:relative;overflow:hidden;background:#3d5a4a}
.sat img{display:block;width:100%;height:auto}
.sat-ov{position:absolute;inset:0;width:100%;height:100%;display:block}
.sat-route-case{fill:none;stroke:#fff;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.sat-route{fill:none;stroke:#2f7cf6;stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round}
.sat-turn{fill:#fff;stroke:#2f7cf6;stroke-width:4}
.sat-pin-ring{fill:rgba(255,255,255,.55)}
.sat-pin{fill:#2f7cf6;stroke:#fff;stroke-width:5}
.sat-lbl{font-family:var(--sans);font-size:28px;font-weight:600;fill:#fff;letter-spacing:.01em;paint-order:stroke fill;stroke:rgba(0,0,0,.55);stroke-width:6px;stroke-linejoin:round}
.sat-lbl--big{font-size:34px;font-weight:700}
.sat-lbl--water{font-style:italic;font-weight:500;fill:#dbeafe;font-size:30px}
.sat-lbl--n{font-size:26px;font-weight:700}
@media (max-width:659px){
  .sat-lbl{font-size:44px;stroke-width:9px}.sat-lbl--big{font-size:52px}.sat-lbl--water{font-size:46px}.sat-lbl--n{font-size:40px}
  .sat-route-case{stroke-width:20}.sat-route{stroke-width:12}.sat-turn{r:13;stroke-width:6}.sat-pin{r:18;stroke-width:7}.sat-pin-ring{r:30}
}

/* ── footer ──────────────────────────────────────────────────────── */
footer{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.foot-row{border-top:var(--rule-w) solid var(--ink);padding-top:1.25rem;display:flex;justify-content:space-between;gap:.7rem 2.5rem;flex-wrap:wrap}
.nw{white-space:nowrap}
@media (max-width:659px){.foot-row{gap:.45rem 2rem}}
.foot-row a:hover{color:var(--forest)}

/* ── motion ───────────────────────────────────────────────────────
   Subtle and once. THE RULE: nothing may hide its own content except
   the scroll sweep that will reveal it. marquee.js arms only elements
   that start below the fold, and the same script's timestamp-throttled
   scroll sweep adds .in as they enter — no observers, no rAF, no
   timers. A dead script means nothing was ever hidden. Never put
   .lift/.wipe on first-viewport elements (header, page-head, hero).
   Durations stay ≤620ms: past that, readers skip the content. */
.js .lift.armed{opacity:0;transform:translateY(12px)}
.js .lift.armed.in{opacity:1;transform:none;transition:opacity .5s var(--lift),transform .5s var(--lift)}
.js .wipe.armed{clip-path:inset(0 0 100% 0)}
.js .wipe.armed.in{clip-path:inset(0 0 0 0);transition:clip-path .62s var(--ease)}

.plate img,.strip img{transition:transform 1.2s var(--ease)}
.plate a:hover img,.strip a:hover img{transform:scale(1.015)}
.plate a,.strip a{display:block;overflow:hidden}
/* inline-flex links drop the space before the arrow — give it back */
.more span,.bill-link span,.ask a span,.plate-cap a span{display:inline-block;margin-left:.4em;transition:transform .4s var(--lift)}
.more:hover span,.bill-link:hover span,.ask a:hover span,.plate-cap a:hover span{transform:translateX(.3em)}

@media (prefers-reduced-motion:reduce){
  .js .lift.armed,.js .wipe.armed{opacity:1;transform:none;clip-path:none;transition:none}
  .plate img,.strip img,.grid img{transition:none}
  .plate a:hover img,.strip a:hover img,.grid a:hover img{transform:none}
  .menu-panel.open .menu-links a{animation:none}
}