/* Hip Hop Library — homepage.
   World: a painted city wall. Matte black paint, chalky wheat-paste cream, enamel SEPTA colours as
   the paint, gold as the institution. Scenes are cut hard; the spine (spine.js) stitches them.
   Loads after lib/scrollcraft.css and overrides its tokens. The hero is authored in Figma pixels
   (1457 wide) and scaled as a unit; JS reads the --ww/--cw/... tokens. */

/* EDO, the brand's display face (1001Fonts free commercial licence: embedding allowed, file unmodified) */
/* EDO draws blank glyphs for # & + and the curly apostrophe: leave those four to the next font in --f-hand */
@font-face { font-family: "EDO"; src: url("/assets/fonts/edo.woff2") format("woff2"), url("/assets/fonts/edo.woff") format("woff"); font-display: swap;
  unicode-range: U+0000-0022, U+0024-0025, U+0027-002A, U+002C-2018, U+201A-10FFFF; }

:root {
  /* brand */
  --paper: #fefdfd;
  --cream: #f1e9d8;
  --cream-soft: #B4A69C;
  --ink: #000;
  --ink-soft: #111;
  --black: #000;
  --black-2: #111;
  --gold: #ECC371;
  --gold-earth: #AD7E32;
  --brown: #725024;
  --gold-soft: #E2B963;
  --gold-bright: #F3D08A;
  --grey-unrevealed: #4a463f;
  /* the paint: the Visual Identity Guide's secondary palette */
  --red: #902F3A;
  --rose: #A13F67;
  --teal: #317985;
  --olive: #5E8F57;
  --mustard: #AD7E32;
  --blue: #725024;
  --green: var(--olive);
  --orange: var(--mustard);
  --yellow: var(--gold);

  --f-hand: "EDO", "Permanent Marker", "Marker Felt", cursive;

  --f-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 3.3vw, 48px);
  --maxw: 1400px;

  /* scrollcraft tokens */
  --sc-canvas: var(--black);
  --sc-surface: var(--black-2);
  --sc-ink: var(--cream);
  --sc-ink-soft: var(--cream-soft);
  --sc-accent: var(--gold);
  --sc-accent-ink: #000;
  --sc-font-display: var(--f-display);
  --sc-font-text: var(--f-body);
  --sc-font-mono: var(--f-mono);
  --sc-shadow-color: 40 20% 2%;
  --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0;

  /* hero world: Frames 1–2 */
  --ww: 1457; --wh: 965; --hf: 185.6;
  /* hero cluster: Frames 3–4 */
  --cw: 1457; --ch: 1148; --logo-w: 387.2; --logo-top: 145;
  --hero-len: 250svh;

  --spine-w: 10px;
}
@media (max-width: 760px) {
  :root {
    --ww: 480; --wh: 760; --hf: 66;
    --cw: 480; --ch: 880; --logo-w: 236; --logo-top: 92;
    --hero-len: 240svh;
    --spine-w: 6px;
  }
}

/* ───────────────────────── base ───────────────────────── */
html { scrollbar-color: #2a2622 var(--black); }
body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
}
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 0; }
a { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--cream); color: #000; padding: 10px 16px;
  font: 500 14.4px/1 var(--f-label); letter-spacing: .10em; text-transform: uppercase; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.prose { margin: 0; max-width: 62ch; font: 400 clamp(1rem, 1.05vw, 1.0625rem)/1.65 var(--f-body); color: var(--cream-soft); text-wrap: pretty; }
.prose--center { margin-inline: auto; text-align: center; }

/* buttons (the client's: ink on cream, cream on ink; gold for the one ask) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px;
  font: 500 12.8px/19.2px var(--f-label); letter-spacing: .10em; text-transform: uppercase; text-decoration: none;
  border: 1px solid #000; cursor: pointer; white-space: nowrap;
  transition: background-color .16s var(--sc-ease-out), color .16s var(--sc-ease-out), border-color .16s var(--sc-ease-out), transform .12s var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: #000; color: #fff; }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.btn--ghost { background: transparent; color: #000; }
.btn--ghost:hover { background: #000; color: #fff; }
.btn--cream { background: var(--cream); color: #000; border-color: var(--cream); }
.btn--cream:hover { background: var(--gold); border-color: var(--gold); }
.btn--gold { background: var(--gold); color: #000; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn--big { padding: 18px 56px; font-size: 22px; letter-spacing: .12em; }
.link-arrow {
  font: 500 14.4px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
}
.link-arrow::after { content: ""; width: 36px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.78); transition: transform .16s var(--sc-ease-out); }
.link-arrow:hover::after { transform: scaleX(1.2); }
.link-arrow:hover { color: var(--gold); }

/* the wall: every dark scene stands on the same painted brick */
.wall {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* sprayed wall words must never widen the page */
  background: var(--black) url("assets/wall.webp") center / cover;
}
.wall::after { content: ""; position: absolute; inset: 0; background: rgb(11 10 8 / .42); }

/* wheat-paste bills: real markup on a real sheet */
.bill {
  position: relative; color: var(--ink-soft);
  padding: clamp(28px, 3.2vw, 48px) clamp(26px, 3vw, 44px);
  border-image: url("assets/paper.webp") 150 fill / clamp(28px, 3vw, 44px) / 0 stretch;
  border-style: solid; border-width: clamp(28px, 3vw, 44px);
  /* if the paper texture is late or fails to paint, the card still reads as paper: cream under the sheet, no dark frame */
  border-color: transparent; background: #ece5d6 padding-box;
  filter: drop-shadow(0 18px 28px rgb(0 0 0 / .45)) drop-shadow(0 2px 4px rgb(0 0 0 / .4));
}
.bill__quote { margin: 0; font: 400 clamp(1.25rem, 2.1vw, 1.8rem)/1.3 var(--f-display); text-wrap: pretty; color: #141210; }
.bill__by { margin-top: 18px; font: 500 12px/1.3 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: #2b2824; }
.bill__by::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--rose); vertical-align: middle; margin-right: 12px; }

/* stencil words sprayed on the wall */
.stencil {
  display: block; font: 800 clamp(1.488rem, 2.728vw, 2.604rem)/1 var(--f-label); letter-spacing: .01em; text-transform: uppercase;
  color: var(--cream); filter: url(#spray);
}

/* hand-tags: marker on the wall, with an arrow when they point at something */
.handtag { position: absolute; margin: 0; font: 400 clamp(1.25rem, 1.9vw, 1.8rem)/1 var(--f-hand); color: var(--c, var(--gold)); transform: rotate(var(--r, -4deg)); white-space: nowrap; pointer-events: none; z-index: 5; filter: url(#spray); text-shadow: 0 2px 0 rgb(0 0 0 / .5); }
.handtag .arrow { display: inline-block; width: 2.2em; height: 1.5em; vertical-align: middle; margin-left: .25em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.handtag .crown { display: inline-block; margin-right: .18em; font-size: .8em; transform: translateY(-.08em); }
.handtag--philly { left: 7%; bottom: 8%; --c: var(--rose); --r: -7deg; font-size: clamp(3.4rem, 7.5vw, 7.5rem); text-shadow: 0 .06em 0 rgb(0 0 0 / .6), 0 .22em 0 var(--rose); opacity: 0; }
.handtag--quote { right: 0; top: -2.6em; --c: var(--rose); --r: -6deg; }
.handtag--scrub { position: static; display: block; margin-bottom: 2rem; --c: var(--gold); --r: -3deg; transform: rotate(-3deg); }
.handtag--free { position: static; display: inline-block; margin-bottom: 14px; --c: var(--teal); --r: -5deg; }
.handtag--soon { left: 0; top: -1.2em; --c: var(--mustard); --r: -8deg; }
.handtag .arrow--down { width: 1.7em; height: 2.4em; vertical-align: top; margin-left: .1em; }
.handtag--motto { position: static; margin: 0 0 14px; --c: var(--gold); --r: -2deg; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
@media (max-width: 860px) { .handtag--quote { right: 0; top: -2.6em; font-size: 1.15rem; } }
/* sprayed words on the walls: ambient, never the message */
.walltag { position: absolute; left: var(--x, 50%); top: var(--y, 50%); margin: 0; font: 400 clamp(5rem, 14vw, 15rem)/1 var(--f-hand); color: var(--c, var(--gold)); opacity: .09; transform: rotate(var(--r, -6deg)); white-space: nowrap; pointer-events: none; user-select: none; filter: url(#spray); }
/* a colour wash behind an element, like the mural's fields behind the portraits */
.wash { position: relative; }
.wash::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; background: var(--w, var(--rose)); opacity: .55; filter: url(#splat) blur(14px); clip-path: polygon(6% 12%, 40% 2%, 72% 10%, 98% 30%, 92% 70%, 70% 96%, 30% 92%, 4% 72%); }
.wash--rose { --w: var(--rose); } .wash--teal { --w: var(--teal); } .wash--mustard { --w: var(--mustard); }
.link-arrow--hand { font: 400 1.6rem/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--gold); transform: rotate(-3deg); filter: url(#spray); }

/* murals: real panels pasted on the wall (ragged edge, tape) or faded into the wall behind a scene */
.mural { position: relative; margin: 0; filter: drop-shadow(0 16px 26px rgb(0 0 0 / .5)); }
.mural img { display: block; width: 100%; height: auto;
  clip-path: polygon(0 2%, 8% 0, 22% 1.5%, 40% 0, 63% 1.2%, 82% 0, 100% 1.8%, 99% 24%, 100% 52%, 98.8% 78%, 100% 98%, 78% 100%, 55% 98.6%, 33% 100%, 12% 98.8%, 0 100%, 1.2% 74%, 0 48%, 1% 22%); }
.mural::after { content: ""; position: absolute; left: 50%; top: -12px; width: 64px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgb(230 220 196 / .85); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.mural-bg { position: absolute; z-index: 0; pointer-events: none; }
.mural-bg img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .32;
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%); }

/* small data: years, addresses, tags */
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); padding: 9px 14px; border: 1px solid rgb(241 233 216 / .35); }
.tag__dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 3px rgb(240 138 26 / .25); }

/* ───────────────────────── LOADER (first paint only) ───────────────────────── */
.loader { position: fixed; inset: 0; z-index: 90; background: #000; display: none; }
.hhl-loading .loader { display: block; }
.hhl-loading body { overflow: hidden; }
.loader__map { position: absolute; inset: 0; overflow: hidden; }
.loader__ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.loader__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader .ln { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.loader .lsplat { transform-box: fill-box; transform-origin: center; opacity: 0; }
.loader__mark { position: absolute; left: 0; top: 0; width: 387px; height: auto; aspect-ratio: 387 / 330; transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 10px 30px rgb(0 0 0 / .6)); }

/* ───────────────────────── NAV ───────────────────────── */
.nav {
  --n: 1;
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: clamp(60px, 5.83vw, 96px);
  padding: 0 clamp(20px, 3.3vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgb(0 0 0 / 0);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--sc-ease-out), border-color .35s;
}
/* at the top the nav floats on the hero (a faint scrim keeps the links legible); it goes solid once you scroll */
.nav::before { content: ""; position: absolute; inset: 0 0 -40% 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / 0)); transition: opacity .35s; }
.nav.is-scrolled::before, .nav.is-open::before { opacity: 0; }
/* once scrolled, the nav is a soft smoke that fades into the page instead of a hard black bar */
.nav::after { content: ""; position: absolute; inset: 0 0 -60% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(11 10 8 / .84) 0%, rgb(11 10 8 / .6) 55%, rgb(11 10 8 / 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent);
  opacity: 0; transition: opacity .45s; }
.nav.is-scrolled::after { opacity: 1; }
.nav.is-open { background: #000; }
.nav.is-open::after { opacity: 0; }
.nav__brand { position: relative; display: block; height: 74%; aspect-ratio: 360 / 382; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); font: 400 clamp(13px, 1.1vw, 16px)/1.4 var(--f-body); }
.nav__links a { color: color-mix(in srgb, #fff calc(var(--n) * 100%), #000); text-decoration: none; }
.nav__links a:not(.nav__donate):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav__links .nav__donate {
  font: 500 clamp(11.5px, .88vw, 12.8px)/1.4 var(--f-label); letter-spacing: .10em; text-transform: uppercase;
  padding: 8px 24px;
  background: color-mix(in srgb, #fff calc(var(--n) * 100%), #000);
  color: color-mix(in srgb, #000 calc(var(--n) * 100%), #fff);
  border: 1px solid color-mix(in srgb, #fff calc(var(--n) * 100%), #000);
  transition: background-color .2s, color .2s;
}
.nav__links .nav__donate:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.nav__menu { display: none; align-items: center; gap: 10px; padding: 8px 4px; background: none; border: 0; color: #fff; font: 500 12.8px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.nav__menu-bars { position: relative; width: 22px; height: 12px; }
.nav__menu-bars::before, .nav__menu-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s var(--sc-ease-out), top .25s var(--sc-ease-out); }
.nav__menu-bars::before { top: 0; } .nav__menu-bars::after { top: 10px; }
.nav__menu[aria-expanded="true"] .nav__menu-bars::before { top: 5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-bars::after { top: 5px; transform: rotate(-45deg); }
@media (max-width: 760px) {
  .nav__menu { display: inline-flex; }
  .nav__links { position: fixed; inset: clamp(60px, 5.83vw, 96px) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px clamp(20px, 3.3vw, 48px) 28px; background: #000; border-bottom: 1px solid rgb(241 233 216 / .14);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--sc-ease-out), transform .25s var(--sc-ease-out), visibility 0s .25s; }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid rgb(241 233 216 / .14); font: 800 18.6px/1 var(--f-label); letter-spacing: .01em; text-transform: uppercase; }
  .nav__links a:not(.nav__donate):hover { text-decoration: none; color: var(--gold); }
  .nav__links .nav__donate { margin-top: 18px; padding: 14px; text-align: center; font-size: 17.6px; border-bottom: 0; }
}

.nav__give { display: none; margin-left: auto; margin-right: 18px; padding: 7px 16px; background: #fff; color: #000; border: 1px solid #fff; font: 500 12px/1.3 var(--f-label); letter-spacing: .10em; text-transform: uppercase; text-decoration: none; }
.nav__give:hover { background: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) { .nav__give { display: inline-block; } }

/* ───────────────────────── ROUTE MAP (fixed nav, filled by spine.js) ───────────────────────── */
.route {
  position: fixed; left: clamp(14px, 2vw, 28px); top: 50%; translate: 0 -50%; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s var(--sc-ease-out), transform .4s var(--sc-ease-out), visibility 0s .4s;
  pointer-events: none;
}
.route.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.route__list { list-style: none; margin: 0; padding: 0 0 0 7px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.route__list::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: rgb(241 233 216 / .18); }
.route__stop { position: relative; }
.route__btn {
  display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: rgb(241 233 216 / .55);
  transition: color .16s;
}
.route__btn::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  background: var(--black); border: 2px solid rgb(241 233 216 / .35);
  transition: background-color .25s var(--sc-ease-out), border-color .25s, transform .25s var(--sc-ease-out);
}
.route__stop.is-past .route__btn::before { background: var(--c, var(--cream)); border-color: var(--c, var(--cream)); }
.route__stop.is-here .route__btn { color: var(--cream); }
.route__stop.is-here .route__btn::before { background: var(--gold); border-color: var(--gold); transform: scale(1.35); box-shadow: 0 0 0 4px rgb(236 195 113 / .25); }
.route__btn:hover { color: var(--cream); }
.route__name { white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .18s var(--sc-ease-out), transform .18s var(--sc-ease-out); }
.route:hover .route__name, .route:focus-within .route__name, .route__stop.is-here .route__name { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .route { left: auto; right: 10px; }
  .route__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .route__list { gap: 10px; }
}

/* ───────────────────────── THE SPINE (document-height svg, drawn by spine.js) ───────────────────────── */
.spine { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.spine__leg { fill: none; stroke-width: var(--spine-w); stroke-linecap: round; stroke-linejoin: round; }
.spine__drip { fill: none; stroke-linecap: round; opacity: .9; }
.spine__station { fill: #fff; stroke: #111; stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.spine__station.is-on { transform: scale(1); }
.spine__splat { transform-box: fill-box; transform-origin: center; transform: scale(.1); opacity: 0; transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 200ms; }
.spine__splat.is-on { transform: scale(1); opacity: 1; }
.spine__train { fill: #fff; stroke: #111; stroke-width: 3; }

/* ───────────────────────── 1 · HERO ───────────────────────── */
.scene { position: relative; }
/* Nothing may widen the page (on phones it breaks every vw-based measurement). Only the flow scenes are clipped:
   an overflow clip on an ancestor of a sticky stage (the hero, the timeline) can push Safari's sticky positioning
   off its scrolling thread, and the pinned stage then shudders a frame behind the finger. */
.story, .culture, .site, .terminus { overflow-x: clip; }
.hero { height: var(--hero-len); z-index: 2; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; background: var(--black); }

.paper { position: absolute; inset: 0; z-index: 0; background: var(--black) url("assets/wall.webp") center / cover; }
.paper::after { content: ""; position: absolute; inset: 0; background: rgb(11 10 8 / .42); }

.city, .tower { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.city { z-index: 1; }
.tower { z-index: 1; }
.city__img, .tower__img { display: block; width: 100%; height: 100%; }
.tower__img { object-fit: cover; }
.tower { -webkit-mask: radial-gradient(62% 66% at 62% 42%, #000 46%, transparent 96%); mask: radial-gradient(62% 66% at 62% 42%, #000 46%, transparent 96%); }
.city .halftone { -webkit-mask: url("assets/city.webp") 0 0 / 100% 100%; mask: url("assets/city.webp") 0 0 / 100% 100%; }
/* the mural's print: a halftone screen over every photograph */
.halftone { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background: radial-gradient(circle at 50% 50%, #000 .9px, transparent 1.6px) 0 0 / 4px 4px; }
/* paint washes on the buildings, clipped to the cutout so the sky stays clean */
.city__paint { position: absolute; inset: 0; mix-blend-mode: color; -webkit-mask: url("assets/city.webp") 0 0 / 100% 100%; mask: url("assets/city.webp") 0 0 / 100% 100%; }
.city__paint svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bld__paint { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.bld__drop  { transform-box: fill-box; transform-origin: center; transform: scale(.2); opacity: 0; transition: transform 350ms cubic-bezier(.22, 1, .36, 1), opacity 350ms ease-out; }
.bld.on .bld__paint { transform: scale(1); }
.bld.on .bld__drop  { transform: scale(1); opacity: 1; }
/* the route line arrives with the buildings */
.city__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#paintEdge); }
.city__route .rt { stroke-dasharray: 1; stroke-dashoffset: 1; }
.city__route .rt-dots circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.city__route.is-on .rt-dots circle { transform: scale(1); }

.world { position: absolute; left: 0; top: 0; z-index: 2; width: calc(var(--ww) * 1px); height: calc(var(--wh) * 1px); transform-origin: 0 0; will-change: transform; }

.headline {
  position: absolute; left: 0; top: 215px; width: 100%; margin: 0;
  font: 800 calc(var(--hf) * 1px)/calc(var(--hf) * 1px) var(--f-display);
  letter-spacing: calc(var(--hf) * .04px);
  text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--cream);
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .55)) drop-shadow(0 14px 18px rgb(0 0 0 / .5));
  will-change: opacity, transform, filter;
}
.headline__line { display: block; }
/* each word is its own cut of paper so it can be slammed onto the wall on its own */
.slam { display: inline-block; transform-origin: 50% 60%;
  background: var(--cream) url("assets/paper.webp") center / cover;   /* cut paper letters, pasted on */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hhl-pre:not(.hhl-slam) .slam, .hhl-pre:not(.hhl-slam) .fly { opacity: 0 !important; }
.hhl-slam .slam { animation: slam .76s both; animation-delay: calc(var(--i) * 230ms); }
.hhl-slam .slam--o { animation-delay: 790ms; }
.hhl-slam .headline { animation: jolt 1.7s linear both; }
.hhl-slam-mark .fly { animation: slam .76s 790ms both; }
@keyframes slam {
  0%   { opacity: 0; scale: 2.8; translate: 0 -6%; filter: blur(10px); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  52%  { opacity: 1; scale: .93; translate: 0 0; filter: blur(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  72%  { scale: 1.035; }
  100% { opacity: 1; scale: 1; translate: 0 0; filter: none; }
}
/* the wall takes each hit: a short drop on every impact, the biggest on the last */
@keyframes jolt {
  0%, 22% { translate: 0 0; }
  23.3% { translate: 0 5px; } 27% { translate: 0 0; }
  36.8% { translate: 0 4px; } 40.5% { translate: 0 0; }
  50.4% { translate: 0 4px; } 54% { translate: 0 0; }
  69.8% { translate: -2px 9px; } 73.5% { translate: 1px -2px; } 78%, 100% { translate: 0 0; }
}
.headline__o { position: relative; display: inline-block; width: 1.16em; height: .7em; vertical-align: baseline; }
/* a real "o" for search and screen readers, never painted: the slam letters clip the paper texture to their glyphs,
   so it is shrunk and clipped out of sight rather than coloured transparent. The logo mark is what people see here. */
.headline__o-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; font-size: 1px; }
@media (max-width: 760px) {
  .headline { top: 150px; }
}

.fly { position: absolute; left: 0; top: 0; z-index: 4; width: calc(var(--logo-w) * 1px); height: auto; aspect-ratio: 387 / 330; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.fly__part { position: absolute; inset: 0; width: 100%; height: 100%; }
#flyHipHop, #flyLibrary { opacity: 0; will-change: opacity, transform, filter; }

.cluster { position: absolute; left: 0; top: 0; z-index: 3; width: calc(var(--cw) * 1px); height: calc(var(--ch) * 1px); transform-origin: 0 0; will-change: transform, opacity, filter; }
.statement { position: absolute; left: 179.5px; top: 515px; width: 1098px; margin: 0; font: 800 48px/60px var(--f-display); text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--cream); }
.statement b { font-weight: inherit; }
.w { color: color-mix(in srgb, var(--t, var(--cream)) calc(var(--r, 1) * 100%), var(--grey-unrevealed)); }
.gold { --t: var(--gold); }
.gold--soft { --t: var(--gold-soft); }
.ctas { position: absolute; left: 0; top: 871px; width: 100%; display: flex; justify-content: center; gap: 16px; will-change: opacity, transform; }
.ctas .btn--solid { background: var(--cream); color: #000; border-color: var(--cream); }
.ctas .btn--solid:hover { background: var(--gold); border-color: var(--gold); }
.ctas .btn--ghost { color: var(--cream); border-color: var(--cream); }
.ctas .btn--ghost:hover { background: var(--cream); color: #000; }
.stats { position: absolute; left: 0; top: 981px; width: 100%; height: 171px; margin: 0; padding: 32px 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; color: var(--cream); }
.stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stats dt { font: 800 33.48px/30.38px var(--f-label); letter-spacing: .01em; text-transform: uppercase; color: var(--gold); filter: url(#spray); }
.stats dd { margin: 0; padding-top: 6px; font: 500 12px/12.8px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
@media (max-width: 760px) {
  .statement { left: 24px; top: 318px; width: 432px; font-size: 27px; line-height: 33px; }
  .ctas { top: 622px; gap: 10px; }
  .ctas .btn { padding: 11px 22px; font-size: 15px; }
  .stats { top: 706px; height: 150px; padding: 0 24px; grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .stats dt { font-size: 21.08px; line-height: 36px; }
  .stats dd { font-size: 8.8px; max-width: 18ch; }
}


/* ───────────────────────── 2 · THE STORY ───────────────────────── */
.story { padding: clamp(96px, 12vw, 176px) 0 clamp(96px, 11vw, 160px); color: var(--cream); }
.story__inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 0 calc(var(--gutter) + 6vw);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(64px, 8vw, 120px);
  align-items: start;
}
.story__title { margin: 0 0 28px; font: 800 clamp(2.108rem, 3.968vw, 3.968rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); filter: url(#spray); }
.story__lead .prose + .prose { margin-top: 18px; }
.story__quote { margin: clamp(0px, 4vw, 56px) 0 0; max-width: 40rem; justify-self: end; width: 100%; }
.story .bill--quote { transform: rotate(-1.4deg); }
.mural--story { grid-column: 1; grid-row: 2; width: min(100%, 30rem); margin-top: -2rem; transform: rotate(1.6deg); }
/* the founder, pasted up under her own words: a print on the wall, warmed toward the section's rose */
.mural--malika { width: min(100%, 26rem); }
.mural--malika img { filter: contrast(1.05) saturate(.85); }
.mural--malika::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--rose); mix-blend-mode: color; opacity: .25; pointer-events: none;
  clip-path: polygon(0 2%, 8% 0, 22% 1.5%, 40% 0, 63% 1.2%, 82% 0, 100% 1.8%, 99% 24%, 100% 52%, 98.8% 78%, 100% 98%, 78% 100%, 55% 98.6%, 33% 100%, 12% 98.8%, 0 100%, 1.2% 74%, 0 48%, 1% 22%); }
.mural--malika .halftone { z-index: 1; opacity: .18; }
.stencils { grid-column: 1 / -1; list-style: none; margin: 0; padding: clamp(40px, 5vw, 72px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); border-top: 1px solid rgb(241 233 216 / .14); }
.stencils p { margin: 14px 0 0; max-width: 30ch; font: 400 .95rem/1.6 var(--f-body); color: var(--cream-soft); }
@media (max-width: 900px) {
  .story__inner { grid-template-columns: 1fr; padding-left: calc(var(--gutter) + 8vw); row-gap: 48px; }
  .story__quote { justify-self: stretch; max-width: none; }
  .mural--story { grid-row: auto; margin-top: 0; width: 86%; }
  .stencils { grid-template-columns: 1fr; gap: 28px; }
}

/* ───────────────────────── 3 + 4 · HISTORY: THE TIMELINE ───────────────────────── */
.mix { --line: rgb(236 195 113 / .14); --line-strong: rgb(236 195 113 / .3); --muted: #c8c0b0; --soft: #8a8478; color: var(--cream); }
.mix__stage { background: var(--black); }
.mix__stage .wall { z-index: 0; }
.mix__canvas, .mix__hud, .mix__track, .mix__rail { position: relative; }
.mix__bg { position: absolute !important; inset: 0; z-index: 1; overflow: hidden; }
.mix__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--sc-ease-out), transform 1200ms var(--sc-ease-out); transform: scale(1.06); }
.mix__bg img.is-on { opacity: .22; transform: scale(1); }
.mix__tint { position: absolute; inset: 0; background: var(--era, var(--gold)); mix-blend-mode: color; opacity: .75; transition: background-color 700ms var(--sc-ease-out); }
.mix__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(11 10 8 / .92) 0%, rgb(11 10 8 / .55) 45%, rgb(11 10 8 / .15) 100%); }
.mix__bg .halftone { opacity: .35; }
/* each era's art: a halftone portrait or a sprayed icon on a colour field, with a marker tag */
.panel__art { position: absolute; left: 46%; top: clamp(5rem, 8vh, 7rem); z-index: 1; width: clamp(12rem, 18vw, 16rem); margin: 0; pointer-events: none;
  --ak: clamp(0, (var(--rv, 0) - .1) * 1.6, 1); opacity: calc(var(--ak)); transform: translateY(calc(30px * (1 - var(--ak)))) rotate(-2deg); }
.panel__art::before { opacity: .72; inset: -10% -14%; }
.art__photo { display: block; width: 100%; height: auto; }
.art__photo--mural { clip-path: polygon(0 2%, 30% 0, 70% 2%, 100% 0, 99% 50%, 100% 98%, 60% 100%, 30% 98%, 0 100%, 1% 50%); }
.art__icon { display: block; width: 100%; height: auto; fill: none; stroke: var(--cream); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#spray); padding: 8%; box-sizing: border-box; }
.art__mark { display: block; width: 100%; height: auto; }
.panel__art .halftone { opacity: .55; -webkit-mask: var(--m, none); mask: var(--m, none); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.panel__art:not(:has(.art__photo)) .halftone { display: none; }
.art__tag { position: absolute; left: -10%; bottom: 6%; --c: var(--cream); --r: -8deg; font-size: clamp(1.6rem, 2.6vw, 2.4rem); text-shadow: 0 2px 0 rgb(0 0 0 / .6), 0 0 18px rgb(0 0 0 / .5); }
.panel--finale .panel__art { left: auto; right: 8%; top: 4rem; width: clamp(9rem, 12vw, 12rem); }
@media (max-width: 760px) {
  .panel__art { left: calc(100vw - 42vw - var(--gutter)); right: auto; top: 6.6rem; width: 36vw; }  /* panels are wider than the viewport: anchor to the viewport, not the panel */
  .panel--finale .panel__art { right: 6%; top: 5rem; width: 22vw; }
}
.mix__hud { position: absolute !important; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; padding: clamp(72px, 7vw, 112px) var(--gutter) 0; pointer-events: none; }
.hud__now { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid rgb(241 233 216 / .35); background: rgb(11 10 8 / .6); }
.hud__now-label { font: 500 12px/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--cream-soft); }
.hud__now-label::before { content: "●"; color: var(--gold-bright); margin-right: .6em; font-size: .7em; animation: now-blink 2.4s ease-in-out infinite; }
@keyframes now-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hud__now-title { font: 800 clamp(.868rem, 1.364vw, 1.24rem)/1 var(--f-label); text-transform: uppercase; letter-spacing: .01em; color: var(--gold-bright); }
.hud__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.hud__year { font: 800 clamp(1.612rem, 2.852vw, 2.604rem)/1 var(--f-label); color: var(--cream); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hud__time { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--cream-soft); font-variant-numeric: tabular-nums; }

.mix__track { display: flex; height: 100%; will-change: transform; z-index: 2; }
.panel { position: relative; flex: 0 0 auto; width: min(92vw, 78rem); height: 100%; display: flex; align-items: flex-end; padding: 8rem var(--gutter) 8.5rem; }
.panel--dense { width: min(104vw, 92rem); }
.panel--intro { width: 100vw; align-items: center; }
.panel--finale { width: 100vw; align-items: center; }
/* phones: the decade track (mix.js sets .is-decades under 761px). One screen per decade, the overview and a way into its chapter */
.mix__track--decades { display: none; }
.mix.is-decades .mix__track--eras { display: none; }
.mix.is-decades .mix__track--decades { display: flex; }
.mix.is-decades .hud__time, .mix.is-decades .hud__now-label, .mix.is-decades .player { display: none !important; }
.panel--era { width: 100vw; }
.panel__body.panel__body--era { grid-template-columns: minmax(18rem, 34rem); grid-template-areas: "kicker" "title" "lede" "more"; grid-template-rows: auto; }
.panel--era .panel__lede { max-width: 32rem; font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--cream-soft); }
.panel__more { grid-area: more; justify-self: start; margin-top: 2rem; color: var(--gold-bright); text-decoration: none; }
.panel [data-reveal] { will-change: opacity, transform; }

.panel__numeral {
  position: absolute; bottom: 4.5rem; left: 42%; z-index: 1;
  font: 800 clamp(9.92rem, 21.08vw, 21.08rem)/1 var(--f-label); letter-spacing: 0;
  color: rgb(241 233 216 / .05); user-select: none; white-space: nowrap; margin: 0; filter: url(#spray);
}
.panel__numeral--now { color: rgb(236 195 113 / .12); text-transform: uppercase; }

.panel__body {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(20rem, 1fr);
  grid-template-areas: "kicker kicker" "title roster" "lede roster" "more roster"; grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(2.5rem, 5vw, 6rem); align-items: end;
}
.panel__kicker { grid-area: kicker; display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 2.2rem; padding-bottom: 1.1rem; border-bottom: 2px solid rgb(241 233 216 / .22); font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .22em; color: var(--gold); }
.panel__kicker-years { color: var(--cream-soft); letter-spacing: .14em; }
.panel__title { grid-area: title; align-self: start; margin: 0 0 1.8rem; font: 800 clamp(2.232rem, 3.968vw, 3.968rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--cream); filter: url(#spray); }
.panel__lede { grid-area: lede; align-self: end; margin: 0; max-width: 26rem; font: 400 clamp(.95rem, 1.1vw, 1.05rem)/1.6 var(--f-body); color: var(--muted); }
.panel__roster { grid-area: roster; list-style: none; margin: 0; padding: 0; align-self: end; }
.panel__roster--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 3vw, 3.5rem); }
.roster__row { padding: 1.05rem 0; border-bottom: 1px solid rgb(241 233 216 / .14); transition: border-color .35s ease; }
.panel__roster > .roster__row:first-child { border-top: 1px solid rgb(241 233 216 / .14); }
.panel__roster--cols > .roster__row:nth-child(2) { border-top: 1px solid rgb(241 233 216 / .14); }
.roster__row:hover { border-bottom-color: var(--line-strong); }
.roster__name { margin: 0; font: 800 clamp(.93rem, 1.24vw, 1.209rem)/1.05 var(--f-label); letter-spacing: .01em; text-transform: uppercase; color: var(--cream); filter: url(#spray); transition: color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.roster__row:hover .roster__name { color: var(--gold-bright); transform: translateX(.4rem); }
.roster__note { margin: .35rem 0 0; max-width: 34rem; font: 400 .9rem/1.55 var(--f-body); color: var(--muted); text-shadow: 0 1px 10px rgb(14 13 11 / .95), 0 0 3px rgb(14 13 11 / .9); }
.roster__note em { font-style: italic; }

/* the silence: intro panel */
.panel__body--intro { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "lede"; justify-items: start; align-items: center; max-width: 60rem; }
.intro__kicker { grid-area: kicker; margin: 0 0 2.2rem; font: 500 12.8px/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.intro__title { grid-area: title; margin: 0; display: flex; flex-direction: column; font: 500 .8rem/.86 var(--f-label); text-transform: uppercase; color: var(--cream); filter: url(#spray); }
.intro__side { font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: .42em; color: var(--soft); margin-bottom: 1rem; }
.intro__city { font-size: clamp(4.4rem, 13.5vw, 13rem); letter-spacing: .015em; }
.intro__lede { grid-area: lede; margin: 2.6rem 0 0; max-width: 34rem; font: 400 clamp(1rem, 1.25vw, 1.15rem)/1.6 var(--f-body); color: var(--muted); }

/* finale */
.panel__body--finale { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "lede" "cta"; grid-template-rows: auto; justify-items: center; text-align: center; align-items: center; }
.panel__body--finale .panel__kicker { width: min(34rem, 80vw); justify-content: center; gap: 1.4rem; }
.panel__title--finale { font-size: clamp(3.8rem, 7.5vw, 7.5rem); text-transform: none; letter-spacing: .02em; }
.panel__lede--finale { max-width: 36rem; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.finale__cta-row { grid-area: cta; margin: 3rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.finale__slogan { font: 500 12px/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); filter: url(#spray); }

/* the era player: docked under the year counter. Our button drives the official Spotify embed. */
.player { position: absolute !important; right: var(--gutter); top: clamp(196px, 23vh, 214px); z-index: 21; width: 320px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.player__embed { width: 100%; height: 80px; border-radius: 12px; overflow: hidden; background: rgb(0 0 0 / .45); }
.player__embed iframe { display: block; }
.player__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: var(--gold); color: #000; border: 0; cursor: pointer;
  font: 500 12.8px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; transition: background-color .16s var(--sc-ease-out), transform .12s; }
.player__btn:hover { background: var(--gold-bright); }
.player__btn:active { transform: translateY(1px); }
.player__btn svg { width: 18px; height: 18px; fill: currentColor; }
.player__btn .i-pause { display: none; }
.player.is-playing .player__btn .i-play { display: none; }
.player.is-playing .player__btn .i-pause { display: block; }
.player__btn { position: relative; }
/* the pulse is a ring scaled on the compositor, not an animated box-shadow (which repaints every frame) */
.player.needs-tap .player__btn::after { content: ""; position: absolute; inset: 0; border: 2px solid rgb(236 195 113 / .7); pointer-events: none; animation: tap-pulse 1.6s var(--sc-ease-out) infinite; }
@keyframes tap-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.18, 1.6); opacity: 0; } }
/* looping animations rest while the timeline is off screen */
.mix:not(.is-live) *, .mix:not(.is-live) *::before, .mix:not(.is-live) *::after { animation-play-state: paused !important; }
.player__now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.player[hidden] { display: none; }
@media (max-width: 860px) {
  .player { left: var(--gutter); right: var(--gutter); top: 148px; width: auto; flex-direction: row-reverse; align-items: center; }
  .player__embed { flex: 1 1 auto; min-width: 0; }
  .player__btn { flex: 0 0 auto; padding: 12px; }
  .player__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .panel__art { top: 15rem !important; width: 30vw !important; }
}
@media (prefers-reduced-motion: reduce) { .player.needs-tap .player__btn { animation: none; } }

/* cue rail */
.mix__rail { position: absolute !important; left: var(--gutter); right: var(--gutter); bottom: 2.4rem; z-index: 20; }
.rail__groove { height: var(--spine-w); background: rgb(236 195 113 / .14); position: relative; border-radius: 99px; }
.rail__progress { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--gold-bright); border-radius: 99px; filter: url(#paintEdge); }
.rail__dots { position: relative; height: 2.4rem; }
.rail__dot { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; cursor: pointer; padding: .7rem .6rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.rail__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #111; box-sizing: border-box; margin-top: calc(-.7rem - var(--spine-w) + 1px); transition: background .3s ease, box-shadow .3s ease, transform .3s var(--sc-ease-out); }
.rail__dot-label { font: 500 12px/1 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); transition: color .3s ease; white-space: nowrap; }
.rail__dot:hover .rail__dot-label { color: var(--muted); }
.rail__dot.is-active::before { background: var(--gold-bright); transform: scale(1.25); }
.rail__dot.is-active .rail__dot-label { color: var(--gold-bright); }
.rail__dot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@media (max-width: 760px) {
  .panel, .panel--dense { width: auto; padding: 7rem var(--gutter) 7rem; }
  .panel--intro, .panel--finale, .panel--era { width: 100vw; }
  .panel__body.panel__body--era { grid-template-columns: 1fr; }
  .panel__body { grid-template-columns: min(80vw, 24rem) auto; column-gap: 2.4rem; }
  .panel__kicker { margin-bottom: 1.6rem; }
  .panel__title { font-size: clamp(1.674rem, 8.06vw, 2.232rem); margin-bottom: 1.2rem; }
  .panel__lede { font-size: .95rem; max-width: none; }
  .panel__roster, .panel__roster--cols { display: flex; align-items: flex-end; gap: 1.6rem; }
  .roster__row { flex: 0 0 min(66vw, 18rem); border: 0 !important; padding: 0; }
  .panel__numeral { font-size: 6.82rem; left: 60%; bottom: 3rem; }
  .mix__hud { padding-top: 76px; }
  .rail__dot-label { display: none; }
}

/* ───────────────────────── 5 · THE CULTURE (the programs as stops on a short line) ───────────────────────── */
.culture { padding: clamp(96px, 12vw, 176px) 0 clamp(96px, 11vw, 160px); color: var(--cream); background: var(--black); overflow: clip; }
.mural-bg--culture { right: -4%; bottom: -6%; width: 58%; height: 70%; }
.mural-bg--site { right: 0; top: 4%; width: 52%; height: 60%; }
.culture__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 0 calc(var(--gutter) + 6vw);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 110px); row-gap: 48px; align-items: start; }
.culture__lead { position: relative; max-width: 30rem; }
.culture__lead .culture__btn { margin-top: 30px; }
.culture__title { margin: 0 0 20px; font: 800 clamp(2.108rem, 3.968vw, 3.968rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); filter: url(#spray); }
/* the lineup: a short teal line with a station for each program */
.lineup { position: relative; list-style: none; margin: 0; padding: 4px 0 0 56px; display: grid; gap: clamp(30px, 3.4vw, 46px); }
.lineup::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 30px; width: 8px; border-radius: 4px; background: var(--teal); }
.lineup__stop { position: relative; }
.lineup__stop::before { content: ""; position: absolute; left: -54px; top: 2px; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 5px solid #111; box-shadow: 0 0 0 4px var(--c); }
.lineup__meta { margin: 0 0 8px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.lineup__name { margin: 0 0 8px; font: 800 clamp(1.24rem, 1.984vw, 1.798rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.lineup__body { margin: 0; max-width: 46ch; font: 400 .98rem/1.6 var(--f-body); color: var(--cream-soft); }
.lineup__stop--flagship::before { width: 34px; height: 34px; left: -58px; top: -2px; }
.lineup__cta { margin-top: 18px; }
@media (max-width: 860px) {
  .culture__inner { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--gutter) + 4vw); }
  .mural-bg--culture { width: 120%; height: 45%; right: -30%; bottom: 0; }
  .lineup { padding-left: 50px; }
  .lineup__stop::before { left: -48px; }
  .lineup__stop--flagship::before { left: -52px; }
}

/* ───────────────────────── 6 · 23RD & CECIL B. MOORE ───────────────────────── */
.site { padding: clamp(96px, 12vw, 176px) 0 clamp(96px, 11vw, 160px); color: var(--cream); }
.site__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 0 calc(var(--gutter) + 6vw); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.site__drawing { margin: 0; position: relative; }
.building { width: 100%; height: auto; display: block; overflow: visible; }
/* the drawing starts as it comes on screen and is finished, painted and lit, by the time it reaches the
   middle (--b: the section's progress when the drawing enters; earlier on the stacked phone layout) */
.site { --b: .26; }
@media (max-width: 900px) { .site { --b: .08; } }
.building__ink path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p) - var(--b)) / .13, 1)); }
.building__ink path:nth-child(n+8) { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p) - var(--b) - .04) / .12, 1)); }
.building__ink path:nth-child(n+14) { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p) - var(--b) - .08) / .1, 1)); }
.paint--sign { transform-origin: 92px 300px; transform: scaleX(clamp(0, (var(--sc-p) - var(--b) - .13) / .07, 1)); filter: url(#paintEdge); }
.paint--glow { opacity: calc(.85 * clamp(0, (var(--sc-p) - var(--b) - .15) / .07, 1)); }
.site__caption { margin: 14px 0 0; font: 500 12px/1.5 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream-soft); }
.site__title { margin: 0 0 20px; font: 800 clamp(2.108rem, 3.968vw, 3.968rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); filter: url(#spray); }
.site__copy .tag { margin-bottom: 24px; }
.site__history { margin-top: 16px; font-size: .95rem; }
.sign { margin: 28px 0 0; display: inline-flex; flex-direction: column; border: 2px solid var(--cream); max-width: 100%; }
.sign__band { padding: 7px 14px; background: var(--orange); color: #000; font: 500 12px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.sign__text { padding: 12px 14px; font: 500 clamp(.88rem, 1.12vw, 1.08rem)/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.list { position: relative; margin: 40px 0 0; padding: 24px clamp(18px, 2vw, 28px) 22px; background: rgb(14 12 10 / .92); border-top: 4px solid var(--orange); box-shadow: 0 18px 36px rgb(0 0 0 / .45); }
.list__label { display: block; margin: 0 0 16px; font: 500 clamp(1.04rem, 1.36vw, 1.28rem)/1.15 var(--f-label); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
.list__row { display: flex; }
.list__input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; background: #1d1a15; border: 1px solid rgb(241 233 216 / .55); border-right: 0; color: var(--cream); font: 400 1rem/1.4 var(--f-body); }
.list__input::placeholder { color: rgb(241 233 216 / .62); }
.list__input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.list__small { margin: 12px 0 0; font: 500 12px/1.4 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream-soft); }
@media (max-width: 900px) {
  .site__inner { grid-template-columns: 1fr; padding-left: calc(var(--gutter) + 8vw); row-gap: 48px; }
  .list__row { flex-direction: column; }
  .list__input { border-right: 1px solid rgb(241 233 216 / .55); border-bottom: 0; }
}

/* ───────────────────────── 7 · TERMINUS ───────────────────────── */
.terminus__stage { position: relative; min-height: 100svh; background: var(--black); display: flex; flex-direction: column; overflow: hidden; }
.terminus .mural { position: absolute; z-index: 1; opacity: .9; }
.mural--left { left: -2%; bottom: 10%; width: clamp(15rem, 25vw, 26rem); transform: rotate(-4deg); }
.mural--right { right: 2%; top: 14%; width: clamp(12rem, 17vw, 18rem); transform: rotate(3deg); }
@media (max-width: 1100px) { .terminus .mural { opacity: .28; } }
@media (max-width: 860px) { .mural--left { width: 70vw; bottom: 2%; left: -12%; } .mural--right { width: 42vw; top: 6%; right: -8%; } }
.terminus__drop { position: absolute; left: 0; top: 0; width: 100%; height: clamp(80px, 14vh, 150px); z-index: 1; overflow: visible; }
.terminus__drop path { stroke: var(--gold); stroke-width: var(--spine-w); stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--sc-p) / .22, 1)); filter: url(#paintEdge); }
.terminus__inner { position: relative; z-index: 2; flex: 1 1 auto; padding-bottom: clamp(56px, 9vh, 96px) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(100px, 16vh, 170px) var(--gutter) 24px; }
.terminus__label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); }
.terminus__dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #111; box-shadow: 0 0 0 4px var(--gold); transform: scale(clamp(0, (var(--sc-p) - .18) / .08, 1)); }
.terminus__title { margin: 0 0 20px; max-width: 16ch; font: 800 clamp(2.108rem, 3.968vw, 3.968rem)/1 var(--f-label); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; color: var(--cream); filter: url(#spray); }
.give { margin: 34px 0 0; width: min(560px, 100%); }
.give__amounts { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.amt { position: relative; display: block; }
.amt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.amt span { display: block; padding: 14px 10px; border: 1px solid rgb(241 233 216 / .35); font: 500 17.6px/1 var(--f-label); letter-spacing: .08em; color: var(--cream); transition: background-color .14s var(--sc-ease-out), color .14s, border-color .14s; }
.amt:hover span { border-color: var(--cream); }
.amt input:checked + span { background: var(--gold); border-color: var(--gold); color: #000; }
.amt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.give__other { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.give__other[hidden] { display: none; }
.give__currency { font: 500 17.6px/1 var(--f-label); color: var(--cream); }
.give__custom { flex: 1; padding: 12px 14px; background: rgb(241 233 216 / .06); border: 1px solid rgb(241 233 216 / .35); color: var(--cream); font: 500 1.1rem/1.2 var(--f-mono); }
.give .btn--big { width: 100%; margin-top: 16px; }
.give__small { margin: 12px 0 0; font: 500 12px/1.4 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream-soft); }
@media (max-width: 860px) {
  .terminus__inner { padding-top: clamp(84px, 13vh, 120px); }
  .give__amounts { gap: 8px; }
  .amt span { padding: 12px 8px; font-size: 16px; }
  .give .btn--big { padding: 15px 32px; font-size: 20px; }
}

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .bld__paint, .bld__drop, .city__route .rt-dots circle, .handtag--philly, .mix__bg img, .mix__tint { transition: none; }
  .mix__bg img { transform: none; }
  .stage { position: relative; }
  .panel [data-reveal] { opacity: 1; transform: none; }
  .building__ink path, .terminus__drop path { stroke-dashoffset: 0 !important; }
  .paint--sign { transform: none !important; } .paint--glow { opacity: .85 !important; }
  .terminus__dot { transform: none !important; }
  .spine__station, .spine__splat { transition: none; }
  .bld__paint, .bld__drop, .route, .route__btn::before { transition: none; }
}

/* timeline reveals: the needle passing a panel brings its lines up, staggered, scrubbed (no clock) */
.panel [data-reveal] { --rk: clamp(0, (var(--rv, 0) - var(--k, 0) * .07) * 1.8, 1); opacity: calc(var(--rk)); transform: translateY(calc(40px * (1 - var(--rk)))); }
@media (prefers-reduced-motion: reduce) {
  .mix__stage { overflow-x: auto; overflow-y: hidden; }
  .mix__track { transform: none !important; }
}

@media (max-width: 760px) { .nav__links .nav__donate { display: none; } }

/* photo credits: one closed dropdown above the footer */

/* licensed photographs in the timeline panels: grayscale under the paint */
.art__photo--grey { filter: grayscale(1) contrast(1.08); }

/* ───────────────────────── LITE: phones and touch devices ─────────────────────────
   The same page with the GPU-heavy effects taken out. Live SVG filters (the spray-paint edges, the paint
   washes, the route line's rough edge) re-run on every repaint, and on a phone that's most of the scroll budget.
   Set by the head script as html.hhl-lite; ?lite=0 / ?lite=1 force it for testing. */
.hhl-lite *, .hhl-lite *::before, .hhl-lite *::after { filter: none !important; }
.hhl-lite .wash::before { clip-path: none; background: radial-gradient(closest-side, var(--w, var(--rose)), transparent); opacity: .5; inset: -18% -14%; }
.hhl-lite .bill { box-shadow: none; }
.hhl-lite .mix__bg img { transition: opacity 600ms ease; transform: none !important; }
.hhl-lite .player.needs-tap .player__btn::after { animation-iteration-count: 4; }
.hhl-lite .nav::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(rgb(11 10 8 / .94) 0%, rgb(11 10 8 / .78) 55%, rgb(11 10 8 / 0) 100%); }
.hhl-lite .panel [data-reveal], .hhl-lite .headline, .hhl-lite #flyHipHop, .hhl-lite #flyLibrary { will-change: auto; }

/* Scroll progress (--sc-p) is written onto each act every frame by the engine. As an inherited custom property,
   every write restyled the act's whole subtree, the hero and the timeline included, which made scrolling heavy
   on phones. Registered as non-inherited, it restyles only the act itself; the three acts whose children read it
   pass it down explicitly. */
@property --sc-p { syntax: '<number>'; inherits: false; initial-value: 0; }
#site *, #donate * { --sc-p: inherit; }

/* ───────────────────────── NO-FX: Safari and phones ─────────────────────────
   Every SVG-filter (url(#…)) user, switched off. Drop shadows and blurs stay: they're cheap everywhere. */
.hhl-nofx :is(.stencil, .handtag, .walltag, .link-arrow--hand, .city__route, .stats dt, .story__title, .art__icon,
  .panel__numeral, .panel__title, .roster__name, .intro__title, .finale__slogan, .rail__progress, .string,
  .culture__title, .paint--sign, .site__title, .terminus__drop path, .terminus__title) { filter: none !important; }
.hhl-nofx .wash::before { filter: blur(10px); clip-path: none; background: radial-gradient(closest-side, var(--w, var(--rose)), transparent); opacity: .55; inset: -18% -14%; }

/* phones: a shorter, leaner read */
.hhl-lite .panel__roster > .roster__row:nth-child(n+4) { display: none; }          /* three names per era */
.hhl-lite .stencils, .hhl-lite .site__history { display: none; }                   /* covered on About and in the history */
.hhl-lite .bill { border-width: 18px; border-image-width: 18px; padding: 14px 12px; }
.hhl-lite .bill__quote { font-size: 1.12rem; line-height: 1.32; }
/* Safari: the nav's backdrop blur re-samples the hero's moving layers every frame and hitches there */
.hhl-nofx .nav::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(rgb(11 10 8 / .94) 0%, rgb(11 10 8 / .78) 55%, rgb(11 10 8 / 0) 100%); }

/* ───────────────────────── the scroll cue + skip intro ─────────────────────────
   The opening act plays by itself (home.js); the cue appears on the resting skyline and is gone for
   good after the first scroll. Sprayed tag, then a mustard line that keeps dripping down the wall. */
.scrollcue { position: absolute; left: 50%; bottom: clamp(18px, 3.2svh, 34px); z-index: 6; display: grid; justify-items: center; gap: 10px;
  transform: translate3d(-50%, 14px, 0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s var(--sc-ease-out), transform .8s var(--sc-ease-out), visibility 0s .6s; }
.scrollcue { padding: 14px 26px 16px; }
.scrollcue::before { /* a buffed patch of wall, rolled on rough, under the tag */
  content: ""; position: absolute; z-index: -1; inset: 0; background: #12100d; transform: rotate(-2deg);
  clip-path: polygon(3% 6%, 18% 0, 41% 4%, 63% 1%, 86% 5%, 100% 2%, 97% 28%, 100% 55%, 96% 80%, 99% 100%, 74% 95%, 52% 99%, 27% 94%, 6% 99%, 0 74%, 4% 47%, 1% 22%);
  box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
.scrollcue__tag { position: static; --c: var(--gold); --r: -5deg; font-size: clamp(1.7rem, 2.4vw, 2.3rem); text-shadow: 0 3px 0 rgb(0 0 0 / .7); }
.scrollcue__drip { position: relative; width: 6px; height: clamp(44px, 7svh, 64px); }
.scrollcue__drip::before { content: ""; position: absolute; inset: 0; background: var(--mustard); border-radius: 3px;
  transform-origin: top; transform: scaleY(0); animation: drip 2.2s cubic-bezier(.6, 0, .25, 1) infinite; }
.scrollcue__drip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 11px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--mustard); opacity: 0; animation: drop 2.2s cubic-bezier(.6, 0, .25, 1) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 85%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes drop { 0%, 45% { opacity: 0; transform: translateY(-8px) scale(.6); } 55% { opacity: 1; transform: translateY(0) scale(1); } 85%, 100% { opacity: 0; transform: translateY(18px) scale(.8); } }
.hhl-cue .scrollcue { opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); transition: opacity .6s var(--sc-ease-out), transform .8s var(--sc-ease-out), visibility 0s; }
.scrollcue__drip::before, .scrollcue__drip::after { animation-play-state: paused; }
.hhl-cue .scrollcue__drip::before, .hhl-cue .scrollcue__drip::after { animation-play-state: running; }

.skipintro { position: absolute; right: clamp(16px, 2.4vw, 36px); bottom: clamp(18px, 3.2svh, 34px); z-index: 6;
  padding: 10px 14px; background: rgb(11 10 8 / .78); font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); text-decoration: underline; text-decoration-color: rgb(173 126 50 / .7); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s, opacity .4s var(--sc-ease-out), visibility 0s; }
.skipintro:hover { text-decoration-color: var(--mustard); color: #fff; }
.skipintro:focus-visible { outline: 2px solid var(--mustard); outline-offset: 4px; }
.hhl-loading .skipintro, .hhl-scrolled .skipintro { opacity: 0; visibility: hidden; transition: opacity .4s var(--sc-ease-out), visibility 0s .4s; }
@media (prefers-reduced-motion: reduce) { .scrollcue { display: none; } }
@media (max-width: 760px) {
  /* phones: the Philly tag owns the bottom-left, so the cue stacks over the skip link on the right */
  .scrollcue { left: auto; right: 14px; bottom: 74px; transform: translate3d(0, 14px, 0); padding: 10px 18px 12px; }
  .hhl-cue .scrollcue { transform: none; }
  .scrollcue__drip { height: 34px; }
  .skipintro { right: 14px; bottom: 22px; }
}

/* nav, desktop: logo far left, the links centred on the page, Donate far right */
@media (min-width: 761px) {
  .nav__links { position: absolute; top: 0; bottom: 0; left: clamp(20px, 3.3vw, 48px); right: clamp(20px, 3.3vw, 48px); justify-content: center; pointer-events: none; }
  .nav__links a { pointer-events: auto; }
  .nav__links .nav__donate { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
}

/* the two asks under the full logo (positioned per frame by home.js) */
.restctas { position: absolute; left: 0; top: 0; width: 100%; z-index: 5; display: flex; justify-content: center; gap: 14px; padding: 0 16px; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.restctas .btn--ghost { color: var(--cream); border-color: var(--cream); background: rgb(11 10 8 / .35); }
.restctas .btn--ghost:hover { background: var(--cream); color: #000; }
.restctas .btn--gold:focus-visible, .restctas .btn--ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 420px) { .restctas .btn { padding: 12px 18px; font-size: 15px; } }

/* shadow on the wall behind the full logo + asks at the end of the opening act (opacity from home.js) */
.restscrim { position: absolute; left: 50%; top: 0; z-index: 2; width: min(1100px, 130vw); height: min(78svh, 700px); translate: -50% 0; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 58% at 50% 34%, rgb(11 10 8 / .9), rgb(11 10 8 / .72) 45%, rgb(11 10 8 / 0) 100%); }

/* internal links: the story to About, each era to its chapter, the ask to the full donate page, the site to Get Involved */
.link-arrow--gold { color: var(--gold-bright); }
.story__more { margin-top: 26px; }
.terminus__more { margin-top: 22px; }
.site__links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 26px 0 0; }

/* the nav logo: the white negative lockup (guide p6). Large at the top so LIBRARY reads, smaller once you scroll */
.nav__brand { height: auto !important; width: clamp(64px, 6.2vw, 92px); align-self: flex-start; margin-top: 10px; transition: width .35s var(--sc-ease-out, cubic-bezier(.23,1,.32,1)), margin-top .35s var(--sc-ease-out, cubic-bezier(.23,1,.32,1)); }
.nav__brand img, .nav__logo { position: static; width: 100%; height: auto; }
.nav.is-scrolled .nav__brand, .nav.is-open .nav__brand { width: clamp(46px, 4vw, 58px); margin-top: 6px; }
@media (max-width: 760px) { .nav__brand { width: 58px; margin-top: 8px; } .nav.is-scrolled .nav__brand, .nav.is-open .nav__brand { width: 44px; margin-top: 6px; } }

/* ── Nav: the "styled" option (review switch, html.hhl-nav-styled) ─────────────────────────────
   Links read as stops on the line: caps, a painted route-line swipe on hover, the current page marked
   with a SEPTA-style station. Donate is a gold wheat-pasted sticker with a tape tab. No SVG filters. */
.hhl-nav-styled .nav__links a:not(.nav__donate) { position: relative; padding: 6px 0 10px; font: 500 12.5px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none !important; }
.hhl-nav-styled .nav__links a:not(.nav__donate)::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0; height: 4px; background: var(--line, var(--gold)); border-radius: 2px;
  clip-path: polygon(0 35%, 6% 0, 30% 20%, 55% 0, 80% 25%, 100% 10%, 100% 75%, 82% 100%, 58% 80%, 33% 100%, 8% 85%, 0 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.23, 1, .32, 1); }
.hhl-nav-styled .nav__links a:not(.nav__donate):hover::after, .hhl-nav-styled .nav__links a:not(.nav__donate):focus-visible::after,
.hhl-nav-styled .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.hhl-nav-styled .nav__links a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: -4px; z-index: 1; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: #fff; border: 3px solid #000; box-shadow: 0 0 0 2px var(--line, var(--gold)); box-sizing: border-box; }
.hhl-nav-styled .nav__links .nav__donate, .hhl-nav-styled .nav__give { position: relative; padding: 10px 22px 9px; background: var(--gold); border: 0 !important; color: #000 !important;
  font: 800 13px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2.5deg);
  clip-path: polygon(1% 4%, 12% 0, 30% 3%, 52% 0, 74% 4%, 92% 0, 100% 6%, 98% 40%, 100% 72%, 97% 100%, 76% 96%, 50% 100%, 26% 96%, 6% 100%, 0 70%, 2% 38%);
  box-shadow: none; transition: transform .25s cubic-bezier(.23, 1, .32, 1), background-color .2s; }
.hhl-nav-styled .nav__links .nav__donate::before, .hhl-nav-styled .nav__give::before { content: ""; position: absolute; left: 50%; top: -1px; width: 30px; height: 9px; margin-left: -15px; background: rgb(241 233 216 / .8); transform: rotate(4deg); }
.hhl-nav-styled .nav__links .nav__donate:hover, .hhl-nav-styled .nav__give:hover { transform: rotate(0) translateY(-2px); background: var(--gold-bright); }
@media (max-width: 760px) {
  .hhl-nav-styled .nav__links { padding-left: calc(var(--gutter) + 26px); }
  .hhl-nav-styled .nav__links::before { content: ""; position: absolute; left: calc(var(--gutter) + 6px); top: 26px; bottom: 96px; width: 6px; background: var(--line, var(--gold)); border-radius: 3px; }
  .hhl-nav-styled .nav__links a:not(.nav__donate) { padding: 16px 0 16px 10px; border-bottom: 0 !important; font: 800 26px/1 var(--f-label); letter-spacing: .02em; }
  .hhl-nav-styled .nav__links a:not(.nav__donate)::after { display: none; }
  .hhl-nav-styled .nav__links a:not(.nav__donate)::before { content: ""; position: absolute; left: -28px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid #000; box-sizing: border-box; box-shadow: 0 0 0 3px var(--line, var(--gold)); }
  .hhl-nav-styled .nav__links a[aria-current="page"] { color: var(--line-ink, var(--gold)) !important; }
  .hhl-nav-styled .nav__give { transform: rotate(-3deg); padding: 9px 14px 8px; font-size: 12px; }
}
@media (min-width: 761px) { .hhl-nav-styled .nav__links .nav__donate { position: absolute; } }

/* ── 5 Oct review ─────────────────────────────────────────────────────────────────────────────── */

/* the paint burst (Malachi's splatter) behind the full logo at rest and behind the headline slam (guide p10) */
.fly { isolation: isolate; }
.fly__splat { position: absolute; left: -48%; right: -48%; top: -42%; bottom: -30%; z-index: -1; pointer-events: none; opacity: 0;
  background: url("assets/splatter.webp") center / contain no-repeat; }
.headline__splat { position: absolute; left: 50%; top: 52%; z-index: -1; width: 64%; aspect-ratio: 1100 / 1055; translate: -50% -50%; pointer-events: none;
  background: url("assets/splatter.webp") center / contain no-repeat; opacity: 0; }
.hhl-slam .headline__splat { animation: splat-in .9s .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes splat-in { 0% { opacity: 0; scale: .55; } 60% { opacity: .55; scale: 1.04; } 100% { opacity: .45; scale: 1; } }
.hhl-pre:not(.hhl-slam) .headline__splat { opacity: 0 !important; }

/* scroll indicator: a mouse with a rolling wheel (the cue says down, not sideways) */
.mouse { position: relative; display: block; width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 13px; box-sizing: border-box; }
.mouse__wheel { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: wheel 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(9px); } 100% { opacity: 0; transform: translateY(12px); } }
.scrollcue { color: var(--gold); justify-items: center; gap: 10px; }
.scrollcue .mouse { color: var(--cream); }
.scrollcue__tag { order: 2; font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
.scrollcue__drip { display: none; }
@media (prefers-reduced-motion: reduce) { .mouse__wheel { animation: none; top: 11px; } }

/* the pinned timeline's hint: shows when the timeline pins and again after the reader pauses (mix.js) */
.mixcue { position: absolute !important; left: 50%; bottom: clamp(5.4rem, 12vh, 7rem); z-index: 22; display: grid; justify-items: center; gap: 8px; color: var(--cream);
  translate: -50% 10px; opacity: 0; transition: opacity .5s var(--sc-ease-out), translate .6s var(--sc-ease-out); pointer-events: none; }
.mixcue.is-on { opacity: 1; translate: -50% 0; }
.mixcue__tag { position: static; --c: var(--gold); --r: -4deg; font-size: clamp(1.15rem, 1.6vw, 1.5rem); text-shadow: 0 2px 0 rgb(0 0 0 / .7), 0 0 14px rgb(0 0 0 / .6); }
.mixcue .mouse { background: rgb(0 0 0 / .45); }

/* the sound cue: under the two asks at the end of the opening act */
.restctas { flex-wrap: wrap; }
.soundcue { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; }
.soundcue__tag { position: static; --c: var(--gold); --r: -4deg; font-size: clamp(1.05rem, 1.4vw, 1.3rem); text-shadow: 0 2px 0 rgb(0 0 0 / .7); }
.soundcue__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid rgb(241 233 216 / .55); border-radius: 99px; background: rgb(0 0 0 / .55); color: var(--cream);
  font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.soundcue__btn:hover { border-color: var(--gold); color: var(--gold); }
.soundcue__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.soundcue__icon { width: 18px; height: 18px; }
.soundcue__waves { display: none; }
.soundcue__btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #000; }
.soundcue__btn[aria-pressed="true"] .soundcue__waves { display: inline; }
.soundcue__btn[aria-pressed="true"] .soundcue__x { display: none; }
@media (max-width: 420px) { .soundcue { gap: 10px; margin-top: 12px; } }

/* the top nav stays out of the way until the opening act is over (home.js toggles .is-hidden; focus brings it back) */
.nav { transition: background-color .35s var(--sc-ease-out), border-color .35s, opacity .45s var(--sc-ease-out), transform .45s var(--sc-ease-out); }
/* (the nav used to hide through the opening act; it now shows from the first screen) */

/* the timeline intro: Montserrat ExtraBold, sized so PHILADELPHIA fits the screen */
.intro__title { font: 800 1rem/.9 var(--f-label); }
.intro__side { font-size: clamp(1rem, 2vw, 1.7rem); letter-spacing: .3em; font-weight: 500; }
.intro__city { font-size: clamp(2.5rem, 8.6vw, 8.6rem); letter-spacing: -.01em; }

/* ── review option: grayscale skyline (html.hhl-sky-gray). The buildings stay gray, the SEPTA lines carry the colour,
   the paint is a faint stain, Philly goes white. ── */
.hhl-sky-gray .city__paint { opacity: .16; transition: opacity .6s; }
.hhl-sky-gray .handtag--philly { --c: var(--cream) !important; color: var(--cream) !important; text-shadow: 0 .06em 0 rgb(0 0 0 / .6) !important; }
.hhl-sky-gray .handtag--philly .crown { color: var(--gold); }
@media (max-width: 760px) { .handtag--philly { font-size: 2.7rem; bottom: 11%; } .scrollcue { padding: 8px 14px 10px; } .scrollcue__tag { font-size: 1.1rem; } }

/* the burst behind the gold logo is black paint (the splatter used as a mask) */
.fly__splat { left: -95%; right: -95%; top: -85%; bottom: -70%; background: #000; -webkit-mask: url("assets/splatter-dense.webp") center / contain no-repeat; mask: url("assets/splatter-dense.webp") center / contain no-repeat; }

/* footer: the same footer as the interior pages (copied from site.css) */
.foot { position: relative; z-index: 2; background: #000; border-top: 1px solid var(--hair); padding: clamp(56px, 6vw, 88px) var(--gutter) 28px; }
.foot__grid { width: min(var(--maxw), 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.foot__brand img { width: 64px; height: auto; display: block; }
.foot__slogan { margin: 18px 0 10px; font: 400 1.5rem/1 var(--f-hand); color: var(--gold); transform: rotate(-3deg); transform-origin: left; filter: url(#spray); }
.foot__timeline { margin: 4px 0 18px; color: var(--gold); }
.foot__about { margin: 0; max-width: 32ch; font: 400 .9rem/1.6 var(--f-body); color: var(--cream-soft); }
.foot__social { margin: 22px 0 0; display: flex; gap: 8px; }
.foot__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgb(241 233 216 / .3); color: var(--cream-soft); text-decoration: none; transition: border-color .16s, color .16s; }
.foot__social svg { width: 17px; height: 17px; }
.foot__social a:hover { border-color: var(--gold); color: var(--gold); }
.foot__col h2 { margin: 0 0 14px; font: 500 14.4px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.foot__col a { color: var(--cream-soft); text-decoration: none; font: 400 .9rem/1.4 var(--f-body); }
.foot__col a:hover { color: var(--cream); text-decoration: underline; }
.foot__legal { width: min(var(--maxw), 100%); margin: clamp(48px, 5vw, 72px) auto 0; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 500 12px/1.5 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream-soft); }
.foot__legal p { margin: 0; }
.foot__legal a { color: inherit; }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot__grid { column-gap: 16px; } }
.foot__mark { position: relative; display: grid; place-items: center; margin: 0 auto clamp(36px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0;
  background: var(--foot-books, none) center / cover no-repeat; }
.foot__mark img { width: clamp(170px, 20vw, 280px); height: auto; display: block; }

/* ── Spray edges: black sections are sprayed onto the wall, in the same speckle as the logo burst ── */
.foot { border-top: 0 !important; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(90px, 9vw, 150px); background: #000; pointer-events: none;
  -webkit-mask: url("/assets/spray-edge.webp") left bottom / 1200px 100% repeat-x; mask: url("/assets/spray-edge.webp") left bottom / 1200px 100% repeat-x; }

/* the footer logo sprays on as you reach it: a black burst, then the lockup slams onto it */
.foot__mark { isolation: isolate; }
.foot__mark::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: clamp(340px, 42vw, 620px); aspect-ratio: 1; translate: -50% -50%;
  background: rgb(241 233 216 / .08); -webkit-mask: url("/assets/splatter-dense.webp") center / contain no-repeat; mask: url("/assets/splatter-dense.webp") center / contain no-repeat; }
.js-foot .foot__mark img:not(.logo-hover) { opacity: 0; transform: scale(1.6) rotate(-4deg); filter: blur(8px); }
.js-foot .foot__mark::before { opacity: 0; scale: .35; }
.js-foot .foot.is-in .foot__mark::before { animation: foot-burst .9s cubic-bezier(.2, .7, .3, 1) both; }
.js-foot .foot.is-in .foot__mark img:not(.logo-hover) { animation: foot-slam .7s .25s cubic-bezier(.55, 0, .9, .45) both; }
@keyframes foot-burst { 0% { opacity: 0; scale: .35; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
@keyframes foot-slam { 0% { opacity: 0; transform: scale(1.6) rotate(-4deg); filter: blur(8px); } 55% { opacity: 1; transform: scale(.94) rotate(0); filter: blur(0); } 75% { transform: scale(1.03); } 100% { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .js-foot .foot__mark img:not(.logo-hover), .js-foot .foot__mark::before { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; animation: none !important; } }
.route { transition: opacity .35s; }
.hhl-at-foot .route { opacity: 0; pointer-events: none; }
.foot__home { display: block; border-radius: 4px; transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.foot__home:hover { transform: scale(1.03); }
.foot__home:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }

/* footer: Follow the build, the middle step between loving the site and giving */
.follow { width: min(640px, 100%); margin: 0 auto clamp(48px, 5vw, 72px); text-align: center; }
.follow__tag { position: static !important; display: inline-block; margin: 0 0 12px; --c: var(--gold); --r: -3deg; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.follow__text { margin: 0 auto 18px; max-width: 46ch; font: 400 .95rem/1.6 var(--f-body); color: var(--cream-soft); }
.follow__row { display: flex; }
.follow__input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; background: #1d1a15; border: 1px solid rgb(241 233 216 / .55); border-right: 0; color: var(--cream); font: 400 1rem/1.4 var(--f-body); }
.follow__input::placeholder { color: rgb(241 233 216 / .62); }
.follow__input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 520px) { .follow__row { flex-direction: column; } .follow__input { border-right: 1px solid rgb(241 233 216 / .55); border-bottom: 0; } }

/* ── The homepage timeline's controls live in one bar along the bottom, like the chapter pages' deck:
   now playing | era dots | year | play + Spotify. The top of each era is left to the content. (desktop and tablet) ── */
@media (min-width: 761px) {
  .mix { --deck-h: 96px; --deck-now: 14.5rem; --deck-meter: 7.5rem; --deck-player: 330px; }
  .mix__deckbg { position: absolute !important; left: 0; right: 0; bottom: 0; height: var(--deck-h); z-index: 19; background: rgb(0 0 0 / .9); border-top: 1px solid rgb(241 233 216 / .14); pointer-events: none; }
  .mix__hud { top: auto; bottom: 0; height: var(--deck-h); padding: 0 var(--gutter); align-items: center; }
  .hud__now { width: var(--deck-now); box-sizing: border-box; gap: 6px; padding: 8px 12px; }
  .hud__now-title { font-size: clamp(1rem, 1.25vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud__meter { width: var(--deck-meter); margin-right: calc(var(--deck-player) + 24px); }
  .hud__year { font-size: clamp(1.7rem, 2.2vw, 2.2rem); }
  .player { top: auto; bottom: calc((var(--deck-h) - 80px) / 2); width: var(--deck-player); flex-direction: row; align-items: center; gap: 10px; }
  .player__btn { flex: 0 0 auto; padding: 12px; }
  .player__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .player__embed { flex: 1 1 auto; min-width: 0; }
  .mix__rail { left: calc(var(--gutter) + var(--deck-now) + 28px); right: calc(var(--gutter) + var(--deck-meter) + var(--deck-player) + 52px); bottom: calc(var(--deck-h) / 2 - 14px); }
  .rail__dot-label { position: absolute; top: 100%; left: 50%; translate: -50% 0; opacity: 0; transition: opacity .25s, color .3s; }
  .rail__dot.is-active .rail__dot-label, .rail__dot:hover .rail__dot-label, .rail__dot:focus-visible .rail__dot-label { opacity: 1; }
  .rail__dot:first-child .rail__dot-label { left: 0; translate: -6px 0; }
  .rail__dot:last-child .rail__dot-label { left: auto; right: 0; translate: 6px 0; }
  .panel { padding-bottom: calc(var(--deck-h) + 3rem); padding-top: clamp(6rem, 12vh, 8rem); }
  .mixcue { bottom: calc(var(--deck-h) + 1.4rem); }
}
@media (min-width: 761px) and (max-width: 1100px) { .mix { --deck-now: 11rem; --deck-meter: 6rem; --deck-player: 260px; } }

/* logos turn gold on hover (the same lockup, its white recoloured to the brand's gold foil) */
.nav__brand, .foot__home { position: relative; }
.nav__brand img.logo-hover, .foot__home img.logo-hover { position: absolute !important; inset: 0; width: 100%; height: auto; opacity: 0; transition: opacity .3s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
.nav__brand:hover img.logo-hover, .nav__brand:focus-visible img.logo-hover, .foot__home:hover img.logo-hover, .foot__home:focus-visible img.logo-hover { opacity: 1; }
.foot__home img { display: block; }
.mixcue { padding: 10px 16px 8px; background: rgb(0 0 0 / .78); border-radius: 12px; }

/* the homepage sound note: a plain sentence, with "sound on" as the one EDO accent */
.soundcue__note { margin: 0; max-width: 44ch; font: 500 clamp(.82rem, .95vw, .9rem)/1.45 var(--f-label); color: var(--cream); text-align: left; text-shadow: 0 1px 2px rgb(0 0 0 / .8); }
.soundcue__note em { font: 400 1.35em/1 var(--f-hand); font-style: normal; color: var(--gold); white-space: nowrap; }
@media (max-width: 560px) { .soundcue { flex-direction: column; gap: 10px; } .soundcue__note { text-align: center; } }
.soundcue__note span { display: block; }

/* phones + Safari: the building draws on a timer once it is on screen (home.js adds .is-drawn), see home.js for why */
.hhl-build-timed .building__ink path,
.hhl-build-timed .building__ink path:nth-child(n+8),
.hhl-build-timed .building__ink path:nth-child(n+14) { stroke-dashoffset: 1px; transition: stroke-dashoffset 1.1s cubic-bezier(.3, .6, .2, 1); }
.hhl-build-timed .building__ink path:nth-child(n+8) { transition-delay: .35s; }
.hhl-build-timed .building__ink path:nth-child(n+14) { transition-delay: .7s; }
.hhl-build-timed .paint--sign { transform: scaleX(0); transition: transform .6s cubic-bezier(.3, .6, .2, 1) 1.3s; }
.hhl-build-timed .paint--glow { opacity: 0; transition: opacity .7s ease-out 1.6s; }
.hhl-build-timed .is-drawn .building__ink path { stroke-dashoffset: 0px; }
.hhl-build-timed .is-drawn .paint--sign { transform: scaleX(1); }
.hhl-build-timed .is-drawn .paint--glow { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .hhl-build-timed .building__ink path, .hhl-build-timed .paint--sign, .hhl-build-timed .paint--glow { transition: none !important; }
}

/* when Safari holds the music back, point at the Spotify player's own play button (mix.js / chapter.js add .is-held) */
.player__held { display: none; position: absolute; right: 0; bottom: calc(100% + 14px); z-index: 30; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 12px 14px;
  background: var(--gold); color: #000; font: 500 13px/1.4 var(--f-label); letter-spacing: .02em; box-shadow: 0 12px 28px rgb(0 0 0 / .5); }
.player__held::after { content: ""; position: absolute; right: 48px; top: 100%; border: 8px solid transparent; border-top-color: var(--gold); }
.player.is-held .player__held { display: block; }
.player.is-held .player__embed { outline: 2px solid var(--gold); outline-offset: 3px; }

/* footer: the logo sits in the gap between two stacks of books (Adobe Stock 267858079), grayscale and dimmed,
   fading into the black on every side. The photo is sized from the band's height (not the page width) so the
   gap stays snug around the logo on every screen. Loaded once the footer is on screen (foot.js adds .is-in). */
.foot__mark { --fh: clamp(340px, 38vw, 560px); --fw: calc(var(--fh) * 1.92);
  --fx: calc(50% - .019 * var(--fw));   /* the gap between the stacks is centred at 51.9% of the photo: put that point at the middle */ height: var(--fh); min-height: 0; padding: 0; background-color: #000; }
.foot.is-in .foot__mark, html:not(.js-foot) .foot__mark {
  background:
    linear-gradient(#000 0, rgb(0 0 0 / .3) 22%, rgb(0 0 0 / .3) 78%, #000 100%),
    radial-gradient(ellipse 18% 30% at 50% 50%, rgb(0 0 0 / .45), transparent 100%),
    linear-gradient(90deg, #000 0, rgb(0 0 0 / 0) 10%, rgb(0 0 0 / 0) 90%, #000 100%),
    linear-gradient(90deg, #000 0, rgb(0 0 0 / 0) 32%, rgb(0 0 0 / 0) 68%, #000 100%) var(--fx) 50% / var(--fw) 100% no-repeat,
    url("/assets/foot-books.webp") var(--fx) 50% / var(--fw) auto no-repeat,
    #000; }
@media (max-width: 760px) {
  .foot__mark { --fh: 300px; }
  .foot.is-in .foot__mark, html:not(.js-foot) .foot__mark {
    background:
      linear-gradient(#000 0, rgb(0 0 0 / .3) 22%, rgb(0 0 0 / .3) 78%, #000 100%),
      radial-gradient(ellipse 30% 30% at 50% 50%, rgb(0 0 0 / .45), transparent 100%),
      linear-gradient(90deg, #000 0, rgb(0 0 0 / 0) 10%, rgb(0 0 0 / 0) 90%, #000 100%),
    linear-gradient(90deg, #000 0, rgb(0 0 0 / 0) 32%, rgb(0 0 0 / 0) 68%, #000 100%) var(--fx) 50% / var(--fw) 100% no-repeat,
      url("/assets/foot-books-sm.webp") var(--fx) 50% / var(--fw) auto no-repeat,
      #000; }
}

}

/* music is desktop-only for now (sound.js adds .hhl-nosound on phones and touch screens) */
.hhl-nosound :is(.player, .player__held, .soundask, .soundcue, a.listen, .deck__label) { display: none !important; }
/* the homepage timeline's last panel: the second button (Next Generation) on the dark panel */
.finale__cta-row .btn--line { background: rgb(11 10 8 / .35); color: var(--cream); border-color: var(--cream); }
.finale__cta-row .btn--line:hover { background: var(--cream); color: #000; }
.finale__cta-row .btn--line:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* site forms (forms.js): the hidden bot trap, and the line that says how sending went */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { flex-basis: 100%; margin: 14px 0 0; font: 500 .95rem/1.5 var(--f-body); color: var(--gold); }
form.is-error .form-status { color: #f08aa3; }
.bill .form-status { color: #1d1a16; }
.bill form.is-error .form-status, form.bill.is-error .form-status { color: #902F3A; }
form.is-sending button[type="submit"] { opacity: .7; cursor: progress; }