/* Hip Hop Library: interior pages (About, Archive, Programs, Get Involved).
   Same world as the homepage: a painted city wall, wheat-paste bills, hand-tags, the mural palette, gold as
   the institution. The homepage's signature (the painted line that runs through every scene) carries over
   as one line per page, in that page's colour, painting itself down the left as you read. Each section
   heading is a stop on it. Self-contained: interior pages do not load scrollcraft or home.css. */

/* 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 {
  --paper: #fefdfd;
  --cream: #f1e9d8;
  --cream-soft: #B4A69C;
  --ink-soft: #141210;
  --ink-mid: #2b2824;
  --black: #000;
  --black-2: #111;
  --gold: #ECC371;
  --gold-earth: #AD7E32;
  --brown: #725024;
  --gold-bright: #F3D08A;
  --red: #902F3A;
  --rose: #A13F67;
  --teal: #317985;
  --olive: #5E8F57;
  --mustard: #AD7E32;
  --blue: #725024;
  /* paint lifted for type on black (the raw paint is for fields, not letters) */
  --rose-ink: #B66988;
  --teal-ink: #4A8994;
  --red-ink: #B16D75;
  --mustard-ink: #C89A4E;
  --blue-ink: #977E5D;
  --olive-ink: #7FAA78;
  --teal-deep: #24606A; /* teal for text on paper */

  --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;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(20px, 3.3vw, 48px);
  --maxw: 1320px;
  --nav-h: clamp(60px, 5.83vw, 96px);
  --hair: rgb(241 233 216 / .14);

  /* the line: x position inside .wrap, and how far content sits right of it */
  --line: var(--gold);
  --line-ink: var(--gold);
  --line-w: 8px;
  --indent: clamp(44px, 6.5vw, 104px);
}
body[data-line="rose"]    { --line: var(--rose);    --line-ink: var(--rose-ink); --line-on: #fff; }
body[data-line="teal"]    { --line: var(--teal);    --line-ink: var(--teal-ink); }
body[data-line="mustard"] { --line: var(--mustard); --line-ink: var(--mustard-ink); }
body[data-line="red"]     { --line: var(--red);     --line-ink: var(--red-ink); }
@media (max-width: 760px) { :root { --line-w: 5px; --indent: 34px; } }

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: #2a2622 var(--black); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--black); color: var(--cream); font: 400 1rem/1.6 var(--f-body); overflow-x: clip; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.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.7 var(--f-body); color: var(--cream-soft); text-wrap: pretty; }
.prose + .prose { margin-top: 1.1em; }
.prose strong { color: var(--cream); font-weight: 400; }
.lede { margin: 0; max-width: 46ch; font: 400 clamp(1.1rem, 1.5vw, 1.35rem)/1.55 var(--f-body); color: var(--cream); text-wrap: pretty; }
.small { margin: 12px 0 0; font: 500 12px/1.4 var(--f-label); letter-spacing: .10em; text-transform: uppercase; color: var(--cream-soft); }

/* ───────── buttons and links ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; font: 500 13.6px/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(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out), transform .12s var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--solid { background: #000; color: #fff; }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.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--line { background: transparent; color: var(--cream); border-color: rgb(241 233 216 / .5); }
.btn--line:hover { border-color: var(--cream); background: var(--cream); color: #000; }
.btn--big { padding: 18px 56px; font-size: 22px; letter-spacing: .12em; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.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(--ease-out); }
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover::after { transform: scaleX(1.2); }

/* ───────── nav (solid on interiors) ───────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); padding: 0 var(--gutter); 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(--ease-out), border-color .35s; }
/* 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 { display: block; height: 74%; aspect-ratio: 360 / 382; }
.nav__brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
.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: #fff; text-decoration: none; }
.nav__links a:not(.nav__donate):hover, .nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav__links a[aria-current="page"] { text-decoration-color: var(--line-ink); text-decoration-thickness: 2px; }
.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: #fff; color: #000 !important; border: 1px solid #fff; transition: background-color .2s, border-color .2s; }
.nav__donate:hover { background: var(--gold); border-color: var(--gold); }
.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(--ease-out), top .25s var(--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: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 28px; background: #000; border-bottom: 1px solid var(--hair);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease-out), transform .25s var(--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 var(--hair); font: 800 18.6px/1 var(--f-label); letter-spacing: .01em; text-transform: uppercase; }
  .nav__links a[aria-current="page"] { color: var(--line-ink); text-decoration: none; }
  .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; } }

/* ───────── the wall, paint, bills, tags (shared vocabulary with the homepage) ───────── */
.wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--black) url("/assets/wall.webp") center / cover; }
.wall::after { content: ""; position: absolute; inset: 0; background: rgb(11 10 8 / .5); }
.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); }
.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; }
.mural-bg { position: absolute; z-index: 0; pointer-events: none; }
.mural-bg img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.35);
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%); }
.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, .tape::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); }

.bill { position: relative; color: var(--ink-soft); padding: clamp(22px, 2.6vw, 40px) clamp(20px, 2.4vw, 36px);
  border-image: url("/assets/paper.webp") 150 fill / clamp(24px, 2.6vw, 40px) / 0 stretch; border-style: solid; border-width: clamp(24px, 2.6vw, 40px);
  /* 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 a:not(.btn) { color: var(--ink-soft); }

.handtag { 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; 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 .arrow--down { width: 1.7em; height: 2.4em; vertical-align: top; margin-left: .1em; }
.handtag .crown { display: inline-block; width: .9em; height: .75em; margin-right: .2em; vertical-align: -.05em; fill: currentColor; }
.wash { position: relative; isolation: isolate; }
.wash::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: var(--w, var(--rose)); opacity: .5; filter: blur(16px); clip-path: polygon(6% 12%, 40% 2%, 72% 10%, 98% 30%, 92% 70%, 70% 96%, 30% 92%, 4% 72%); }

/* SEPTA station sign: wayfinding, used once per page as the "you are here" */
.sign { display: inline-flex; flex-direction: column; border: 2px solid var(--cream); max-width: 100%; margin: 0; }
.sign__band { padding: 7px 14px; background: var(--line); color: var(--line-on, #000); font: 500 12px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.sign__text { padding: 11px 14px; font: 500 clamp(.84rem, 1.08vw, 1.04rem)/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }

/* ───────── page hero ───────── */
.hero { position: relative; isolation: isolate; min-height: min(86svh, 860px); padding: calc(var(--nav-h) + clamp(56px, 9vh, 120px)) 0 clamp(56px, 8vh, 104px); display: flex; align-items: flex-end; overflow: clip; }
.hero .mural-bg { right: -6%; top: 4%; width: min(62vw, 900px); height: 104%; }
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 13ch; font: 800 clamp(2.232rem, 5.332vw, 5.208rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); filter: url(#spray); }
.hero__title em { font-style: normal; color: var(--line-ink); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.hero .handtag { position: absolute; z-index: 3; }
@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 72px); }
  .hero .mural-bg { width: 120vw; right: -40%; top: 0; height: 70%; }
}

/* ───────── layout + the line ───────── */
.wrap { position: relative; width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; padding-left: var(--indent); }
.sec { position: relative; isolation: isolate; overflow-x: clip; }
.sec > .wrap { padding-top: clamp(80px, 11vw, 168px); padding-bottom: clamp(16px, 2vw, 32px); }
.sec:last-of-type > .wrap { padding-bottom: clamp(80px, 10vw, 140px); }
/* the painted line: one segment per section, flush so it reads as a single stroke */
.wrap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--line-w); background: var(--line); transform-origin: 50% 0; z-index: 1;
  -webkit-mask: linear-gradient(90deg, #000 0 0); }
.hero .wrap::before { top: auto; height: clamp(120px, 20vh, 200px); bottom: calc(-1 * clamp(56px, 8vh, 104px)); }
/* stop heading: the station dot sits on the line */
.stop { position: relative; margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 16ch; font: 800 clamp(1.736rem, 3.472vw, 3.348rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--cream); }
.stop::before { content: ""; position: absolute; left: calc(-1 * var(--indent) + var(--line-w) / 2 - 11px); top: .22em; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #111; box-shadow: 0 0 0 4px var(--line); z-index: 2; }
.stop__title { filter: url(#spray); }
.sec__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.6vw, 64px); }
.sec__intro .stop { margin: 0; }
@media (max-width: 860px) { .sec__intro { grid-template-columns: minmax(0, 1fr); } }

/* JS-on: the line paints down and each stop splats on as it arrives. Visible by default without JS. */
@media (prefers-reduced-motion: no-preference) {
  .js .wrap::before { transform: scaleY(0); transition: transform 1.1s var(--ease-out); }
  .js .wrap.is-in::before { transform: scaleY(1); }
  .js .stop::before { transform: scale(.2); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .2s .35s; }
  .js .wrap.is-in .stop::before { transform: scale(1); opacity: 1; }
  .js .hero__title { opacity: 0; transform: translateY(18px); filter: url(#spray) blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
  .js .is-ready .hero__title { opacity: 1; transform: none; filter: url(#spray); }
}

/* ───────── forms ───────── */
.field { display: grid; gap: 8px; }
.field > span, .field legend { font: 500 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); padding: 0; }
.input, .textarea, .select { width: 100%; padding: 13px 16px; background: rgb(241 233 216 / .06); border: 1px solid rgb(241 233 216 / .3); border-radius: 0; color: var(--cream); font: 400 1rem/1.4 var(--f-body); caret-color: var(--gold); }
.textarea { min-height: 128px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(135deg, var(--cream) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.select option { background: var(--black-2); color: var(--cream); }
.input::placeholder, .textarea::placeholder { color: rgb(241 233 216 / .5); }
.input:hover, .textarea:hover, .select:hover { border-color: rgb(241 233 216 / .55); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-color: transparent; }
.input:user-invalid, .textarea:user-invalid { border-color: var(--red-ink); }
.list { margin: 0; }
.list__label { display: block; margin: 0 0 14px; font: 400 .95rem/1.5 var(--f-body); color: var(--cream-soft); }
.list__row { display: flex; max-width: 560px; }
.list__row .input { border-right: 0; }
@media (max-width: 560px) { .list__row { flex-direction: column; } .list__row .input { border-right: 1px solid rgb(241 233 216 / .3); border-bottom: 0; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-note { margin: 0; font: 400 .9rem/1.55 var(--f-body); color: var(--cream-soft); }
.form-status { margin: 14px 0 0; font: 400 .95rem/1.5 var(--f-body); color: var(--cream); }
.form-status[data-state="error"] { color: var(--red-ink); }
.form-status:empty { display: none; }

/* ───────── closing scene: full wall, the ask ───────── */
.closer { position: relative; isolation: isolate; overflow: clip; padding: clamp(96px, 13vw, 180px) 0; text-align: center; }
.closer .mural { position: absolute; z-index: 1; opacity: .9; }
.closer__inner { position: relative; z-index: 2; width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.closer__title { margin: 0 0 22px; font: 800 clamp(1.984rem, 4.34vw, 3.968rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; filter: url(#spray); }
.closer .prose { text-align: center; }
.closer .btns { justify-content: center; }
.closer .handtag { margin-bottom: 18px; }

/* the page's line runs on into the closer and ends at a terminus beside the ask */
.closer__rail { position: absolute; z-index: 3; top: 0; bottom: calc(clamp(96px, 13vw, 180px) + 34px); left: 0; right: 0; padding: 0; }
.closer__rail::after { content: ""; position: absolute; left: calc(var(--line-w) / 2 - 18px); bottom: -18px; width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 7px solid #111; box-shadow: 0 0 0 5px var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .js .closer__rail::after { transform: scale(.2); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .9s, opacity .2s .9s; }
  .js .closer__rail.is-in::after { transform: none; opacity: 1; }
}
@media (max-width: 760px) { .closer--line .closer__inner { padding-left: 26px; } }

/* ───────── footer ───────── */
.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; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 760px) { .nav__links .nav__donate { display: none; } }
@media (max-width: 560px) { .btn--big { padding: 16px 24px; font-size: 20px; white-space: normal; text-align: center; } }
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; padding-inline: 20px; } }

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

/* phones and touch devices: the same page without the GPU-heavy live filters and background blurs */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after { filter: none !important; }
  .nav::after, .deck { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav::after { background: linear-gradient(rgb(11 10 8 / .94) 0%, rgb(11 10 8 / .78) 55%, rgb(11 10 8 / 0) 100%); }
  .wash::before { clip-path: none; background: radial-gradient(closest-side, var(--w, var(--rose)), transparent); opacity: .5; }
}

/* Safari and phones: no SVG noise filters (WebKit renders them on the CPU on every repaint) */
.hhl-nofx :is(.walltag, .handtag, .hero__title, .stop__title, .closer__title, .foot__slogan, .value__word,
  .pull p, .spread__title, .year__numeral, .year__art .art__icon, .tagwall li, .decade__n, .upnext__title) { filter: none !important; }
.hhl-nofx .nav::after, .hhl-nofx .deck { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hhl-nofx .nav::after { background: linear-gradient(rgb(11 10 8 / .94) 0%, rgb(11 10 8 / .78) 55%, rgb(11 10 8 / 0) 100%); }

/* 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: var(--gutter); right: var(--gutter); 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%; }
}

/* video clips: the poster with a play button; the browser's own controls once it plays */
.clips { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, .65fr); gap: clamp(20px, 3vw, 40px); align-items: end; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 760px) { .clips { grid-template-columns: minmax(0, 1fr); } .clips .clip--tall { width: min(300px, 80%); } }
.clip { margin: 0; }
.clip__frame { position: relative; overflow: hidden; background: #000; box-shadow: 0 20px 36px rgb(0 0 0 / .5); }
.clip__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.clip__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(rgb(11 10 8 / .05), rgb(11 10 8 / .45)); color: #000; }
.clip__play svg { width: clamp(56px, 7vw, 76px); height: clamp(56px, 7vw, 76px); padding: 18px; border-radius: 50%; background: var(--line, var(--gold)); fill: currentColor;
  box-shadow: 0 10px 24px rgb(0 0 0 / .5); transition: transform .2s var(--ease-out), background-color .2s; }
.clip__play:hover svg { transform: scale(1.08); background: var(--cream); }
.clip__play:focus-visible { outline: 3px solid var(--line-ink, var(--gold)); outline-offset: -3px; }
.clip.is-playing .clip__play { display: none; }
.clip__cap { margin-top: 12px; font: 500 12px/1.35 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.mic__lede { max-width: 56ch; }
.entry .clip { width: min(260px, 70%); margin-top: 22px; }

/* a hero whose backdrop moves: a muted loop in place of the mural, screened like every photo on the site
   (grayscale, the page's colour, halftone). site.js holds it still for reduced motion / data saver and off screen. */
.mural-bg--video { -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%); overflow: hidden; }
.mural-bg--video video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(1) contrast(1.12); }
.mural-bg--video::after { content: ""; position: absolute; inset: 0; background: var(--line, var(--gold)); mix-blend-mode: color; opacity: .6; }
.mural-bg--video .halftone { opacity: .4; }
.hero .mural-bg--tall { right: 4%; width: min(40vw, 560px); }
.mural-bg--tall video { object-position: 50% 30%; }
@media (max-width: 760px) { .hero .mural-bg--tall { right: -10%; width: 80vw; } }

/* 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; } }

/* the sound cue on the timeline pages (sound.js adds it when the visitor arrives here first) */
.soundcue { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.soundcue--page { margin: 0 0 clamp(18px, 2vw, 26px); }
.soundcue__tag { position: static; display: inline-block; margin: 0; --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; }

/* footer: the white lockup, big and centred (Diona's books image will sit behind it) */
.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; }
.soundcue--page { flex-wrap: nowrap; width: max-content; max-width: 100%; position: relative; z-index: 3; }
.hero .soundcue__tag { position: static; }

/* heroes fill the screen (5 Oct review) */
.hero { min-height: 96svh; }
.hero--chapter { min-height: 96svh; }
@media (max-width: 760px) { .hero, .hero--chapter { min-height: 94svh; } }

/* ── 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; } }

/* interior heroes: the black page below is sprayed up into the hero instead of a hard edge */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: clamp(90px, 10vw, 170px); 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; }

/* Wall sections are cut out of the black page with the spray edge, top and bottom, so you spray into and out of
   every black section. (Heroes do their bottom edge with ::after below, over the mural too.) */
:root { --spray-h: clamp(70px, 8vw, 130px); }
.wall {
  -webkit-mask: url("/assets/spray-cut-top.webp") left top / 1200px var(--spray-h) repeat-x,
                linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--spray-h) + 2px) no-repeat,
                url("/assets/spray-cut-bottom.webp") left bottom / 1200px var(--spray-h) repeat-x;
          mask: url("/assets/spray-cut-top.webp") left top / 1200px var(--spray-h) repeat-x,
                linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--spray-h) + 2px) no-repeat,
                url("/assets/spray-cut-bottom.webp") left bottom / 1200px var(--spray-h) repeat-x; }
.hero .wall { -webkit-mask: none; mask: none; }   /* the hero sits under the nav; its bottom edge is .hero::after */

/* heroes: the full screen, the spray at the very bottom, content padded clear of it */
.hero, .hero--chapter { min-height: 100vh; min-height: 100svh; padding-bottom: calc(clamp(56px, 8vh, 104px) + clamp(40px, 6vh, 72px)); }
.hero::after { height: clamp(48px, 7vh, 90px); }
@media (max-width: 760px) { .hero, .hero--chapter { min-height: 100svh; } }

/* the hero line runs through the spray to meet the next section (matches the hero bottom padding) */
.hero .wrap::before { height: clamp(170px, 28vh, 280px); bottom: calc(-1 * (clamp(56px, 8vh, 104px) + clamp(40px, 6vh, 72px)) - 1px); }
.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; } }

/* 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; }

/* 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; }

/* 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; }