/* Layout concept: the logo comes alive. Two flag-blue rails frame a night stage where a red
   Chicago star and a white dancer move with your scroll; the story and the people sit on
   photocopy paper like flyers pasted between the L stops. */
:root {
  --night: #070a12;      /* stage black with a little lake blue */
  --night-2: #0e1320;    /* raised night surface */
  --ink: #0d0d0f;        /* toner black on paper */
  --paper: #ebebe6;      /* photocopy paper */
  --paper-2: #d6d6cf;    /* second pass through the copier */
  --flag-blue: #0098c4;  /* from the CHHHM logo */
  --sky: #45c4ee;        /* flag blue, lifted for small text on black */
  --flag-red: #d41820;   /* from the CHHHM logo */
  --hot: #ff4b4f;        /* red, lifted for small text on black */
  --led: #ff6a3a;        /* CTA arrival-sign amber */
  --chrome: #c5cbd3;     /* spray chrome */
  --muted: #9aa3b2;      /* secondary text on night */
  --muted-ink: #4a4a4f;  /* secondary text on paper */

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --stencil: "Big Shoulders Stencil", "Big Shoulders Display", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dot: "Doto", "Courier New", monospace;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 1240px;
  --rail: clamp(8px, 1.15vw, 18px);
  --bar-h: 64px;
  color-scheme: dark;
}

@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/bigshoulders-display.cfab358e58.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.511f2ff3ff.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Doto"; src: url("/assets/fonts/doto.ce97a4a244.woff") format("woff"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--night); color: var(--paper);
  font-family: var(--body); font-size: 17px; line-height: 1.55; font-weight: 420;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 18px; } }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
/* photocopy grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background-image: url("/assets/img/noise.c46732e39f.png"); background-size: 180px; opacity: 0.045; mix-blend-mode: overlay;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--hot); }
.paper a:hover { color: var(--flag-red); }
::selection { background: var(--flag-red); color: #fff; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--flag-blue); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 64px); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
@media (min-width: 900px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* ---------- buttons ---------- */
.btn {
  --b: var(--paper); --f: var(--ink);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 9px;
  font: 800 21px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  background: var(--b); color: var(--f); border: 2px solid var(--b); border-radius: 0;
  transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--flag-red); color: var(--f); }
.btn--red { --b: var(--flag-red); --f: #fff; }
.btn--red:hover { box-shadow: 4px 4px 0 var(--paper); color: #fff; }
.btn--ghost { background: transparent; color: var(--b); }
.btn--ghost:hover { color: var(--b); }
.paper .btn { --b: var(--ink); --f: var(--paper); }
.paper .btn:hover { color: var(--paper); box-shadow: 4px 4px 0 var(--flag-red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */
.bar {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 18px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
@media (min-width: 900px) { .bar { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
.bar.is-solid { background: rgba(7, 10, 18, 0.94); border-bottom-color: #1b2233; backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); margin-right: auto; }
.brand img { height: 42px; width: auto; }
.brand span { font: 800 19px/0.92 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.brand span b { display: block; font-weight: 800; }
@media (max-width: 520px) { .brand span { font-size: 16px; } }
.nav { display: none; gap: 2px; }
.nav a {
  font: 700 19px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  color: var(--paper); padding: 10px 9px; position: relative;
}
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 3px; background: var(--flag-red); }
.nav a:hover { color: var(--sky); }
.bar .btn { min-height: 40px; padding: 8px 14px 7px; font-size: 18px; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 12px;
  font: 800 18px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--paper); border: 2px solid var(--paper); cursor: pointer;
}
@media (min-width: 1180px) { .nav { display: flex; } .menu-btn { display: none; } }
@media (max-width: 420px) { .bar .btn--red { display: none; } }

/* full-screen menu, drawn like an L line */
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--night); overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--gutter-r) 40px var(--gutter-l);
}
.menu ol { list-style: none; margin: 0 auto; padding: 0 0 0 34px; max-width: 560px; position: relative; }
.menu ol::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 8px; background: var(--flag-red); }
.menu li { position: relative; }
.menu li::before { content: ""; position: absolute; left: -30px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--paper); border: 5px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.menu a { display: block; padding: 6px 0 6px 18px; font: 900 clamp(40px, 11vw, 64px)/1 var(--display); text-transform: uppercase; text-decoration: none; color: var(--paper); }
.menu a[aria-current="page"] { color: var(--sky); }
.menu-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: var(--gutter-r); z-index: 81; }
.menu .menu-foot { max-width: 560px; margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 12px; }
.menu .menu-foot .btn { display: inline-flex; padding: 10px 20px 9px; font: 800 21px/1 var(--display); letter-spacing: 0.04em; color: var(--f); }   /* buttons, not menu stops */

/* ---------- stage (home) ---------- */
.stage { position: relative; }
.pin { --cx: 68%; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); isolation: isolate; }
.pin .bg { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; opacity: 0; transition: opacity .7s ease; transform: translateY(calc(var(--p, 0) * -3%)) scale(1.04); }
.pin .bg.is-on { opacity: 1; }
.pin::after { /* legibility: darken toward the text column and the floor */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,10,18,.55) 0%, rgba(7,10,18,0) 22%, rgba(7,10,18,0) 62%, rgba(7,10,18,.9) 100%),
    linear-gradient(90deg, rgba(7,10,18,.9) 0%, rgba(7,10,18,.55) 34%, rgba(7,10,18,0) 58%);
}
@media (max-width: 699px) { .pin::after { background: linear-gradient(180deg, rgba(7,10,18,.55) 0%, rgba(7,10,18,.15) 30%, rgba(7,10,18,.2) 60%, rgba(7,10,18,.92) 100%); } }
.rail { position: absolute; top: 0; bottom: 0; width: var(--rail); background: var(--flag-blue); z-index: 3; }
.rail--l { left: calc(var(--rail) * 0.9); }
.rail--r { right: calc(var(--rail) * 0.9); }

.word {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 3vh; white-space: nowrap; pointer-events: none;
  font: 900 min(31vw, 40vh)/0.78 var(--display); text-transform: uppercase; letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 2px rgba(235,235,230,.2);
  transform: translateX(calc(var(--wx, 0) * 1%));
}
.led {
  position: absolute; z-index: 5; top: calc(var(--bar-h) + 18px); left: var(--cx, 66%); translate: -50% 0;
  min-width: min(440px, 86vw); padding: 10px 16px 9px; background: #050506; border: 2px solid #23262e;
  box-shadow: 0 0 0 4px #000, inset 0 0 24px rgba(255,106,58,.08);
  font: 800 clamp(15px, 1.5vw, 20px)/1.25 var(--dot); color: var(--led); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255,106,58,.55);
}
.led b { display: block; font-weight: 900; font-size: 1.32em; color: #ffd0b8; text-shadow: 0 0 8px rgba(255,140,90,.7); }
.led .blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lmap { position: absolute; z-index: 5; left: var(--cx, 66%); translate: -50% 0; bottom: 22px; width: min(560px, 84vw); }
.lmap ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.lmap ol::before { content: ""; position: absolute; left: 11px; right: 11px; top: 9px; height: 6px; background: var(--flag-red); }
.lmap li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lmap button {
  all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font: 800 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.lmap button::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 5px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.lmap button[aria-current="true"] { color: var(--paper); }
.lmap button[aria-current="true"]::before { background: var(--sky); }
.lmap button:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.lmap .train { position: absolute; top: 2px; left: 0; width: 34px; height: 20px; margin-left: -17px; background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; transform: translateX(calc(var(--tx, 0) * 1px)); }
.lmap .train::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--led); box-shadow: 0 0 6px var(--led); }
.credit-chip { position: absolute; z-index: 5; right: calc(var(--rail) * 2.6); top: calc(var(--bar-h) + 10px); margin: 0; font: 500 11px/1.2 var(--body); color: rgba(235,235,230,.55); max-width: 46vw; text-align: right; }
@media (max-width: 699px) { .credit-chip { display: none; } }

.panels { position: relative; z-index: 6; margin-top: -100vh; margin-top: -100svh; }
.panel { min-height: 118svh; display: flex; align-items: center; padding-block: 18svh; }
.panel--hero { min-height: 100svh; align-items: flex-end; padding-block: calc(var(--bar-h) + 40px) 16svh; }
.panel--end { min-height: 120svh; }
.panel__in { width: 100%; max-width: 620px; margin-left: calc(var(--rail) * 3 + 2vw); margin-right: var(--gutter-r); }
@media (max-width: 699px) {
  .panel { min-height: 150svh; align-items: flex-start; padding-block: 12svh 0; }
  .panel--hero { min-height: 100svh; align-items: flex-end; padding-block: 0 9svh; }
  .panel__in { margin-left: max(26px, calc(var(--rail) * 2.6)); margin-right: max(26px, calc(var(--rail) * 2.6)); width: auto; }
  .panel:not(.panel--hero) .panel__in { background: rgba(7,10,18,.86); backdrop-filter: blur(6px); padding: 22px 20px 24px; border-top: 6px solid var(--flag-blue); }
}
.hero-logo { width: clamp(210px, 27vw, 380px); height: auto; margin-bottom: 26px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
@media (max-width: 899px) { .hero-logo { width: min(46vw, 210px); margin-bottom: 18px; } }
.hero-lede { font: 560 clamp(18px, 1.55vw, 22px)/1.42 var(--body); max-width: 34ch; margin: 0 0 26px; }
@media (max-width: 899px) { .hero-lede { font-size: 17px; max-width: 30ch; text-shadow: 0 1px 12px rgba(0,0,0,.8); } }
.kicker { font: 800 22px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; }
.panel h2 { font: 900 clamp(64px, 9vw, 132px)/0.84 var(--display); text-transform: uppercase; margin: 0 0 22px; letter-spacing: -0.005em; }
.statement { font: 600 clamp(21px, 2.05vw, 30px)/1.3 var(--body); font-stretch: 108%; margin: 0; }
@media (max-width: 699px) { .statement { font-size: 19px; line-height: 1.4; font-stretch: 100%; } .panel h2 { font-size: clamp(54px, 17vw, 84px); } }
@media (max-width: 899px) { .elements li { font-size: clamp(34px, 11vw, 52px); } }

/* ---------- paper sections ---------- */
.paper {
  background: var(--paper); color: var(--ink); position: relative;
  background-image: linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 7px 100%;
}
.paper::before { /* toner streak along the top edge, like a photocopy */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 40px, transparent 40px 44px, var(--ink) 44px 90px, transparent 90px 92px);
  opacity: .9;
}
.sec { padding-block: clamp(72px, 10vw, 140px); }
.sec-title { font: 900 clamp(56px, 9.4vw, 150px)/0.84 var(--display); text-transform: uppercase; margin: 0 0 clamp(28px, 4vw, 56px); letter-spacing: -0.01em; }
.sec-title .spray { display: block; }

.story-grid { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 980px) { .story-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.story-copy { font-size: clamp(18px, 1.3vw, 20px); line-height: 1.62; max-width: 64ch; }
.story-copy p { margin: 0 0 1em; }
.story-copy a:not(.btn) { color: var(--ink); text-decoration-color: var(--flag-red); text-decoration-thickness: 2px; }
.story-photo { margin: 34px 0 0; }
.story-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; border: 10px solid var(--ink); }
.story-photo figcaption { font: 600 13px/1.4 var(--body); color: var(--muted-ink); margin-top: 8px; }

/* ---------- photo wall (the museum's walls were floor-to-ceiling frames) ---------- */
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; grid-auto-flow: dense; gap: 10px; }
@media (min-width: 700px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; } }
@media (min-width: 1100px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 14px; } }
.wall figure { margin: 0; position: relative; background: #000; border: 6px solid #000; box-shadow: 0 0 0 1px #2a2f3b; overflow: hidden; }
.wall figure.t { grid-row: span 2; }
.wall figure.w { grid-column: span 2; grid-row: span 2; }
.wall figure > a { display: block; height: 100%; }
.wall img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; filter: saturate(.92) contrast(1.04); }
.wall figure:hover img { transform: scale(1.04); filter: saturate(1.05) contrast(1.06); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head .sec-title { margin: 0; }
.sec-head p { margin: 0; max-width: 38ch; color: var(--muted); font-size: 17px; }
.paper .sec-head p { color: var(--muted-ink); }

/* ---------- founders ---------- */
.founders { display: grid; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 860px) { .founders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.founder { display: flex; flex-direction: column; }
.founder .shot { position: relative; border: 8px solid var(--ink); background: var(--ink); }
.founder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: contrast(1.06); }
.founder .role { position: absolute; left: -8px; bottom: 14px; background: var(--flag-red); color: #fff; font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px 6px; }
.founder h3 { font: 900 clamp(36px, 3.4vw, 50px)/0.88 var(--display); text-transform: uppercase; margin: 18px 0 10px; }
.founder h3 i { font-style: normal; color: var(--flag-red); display: block; }
.founder p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: #2a2a2e; }
.founder a.more { margin-top: auto; font: 800 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.founder a.more::after { content: ""; width: 26px; height: 3px; background: var(--flag-red); transition: width .16s ease; }
.founder a.more:hover { color: var(--flag-red); }
.founder a.more:hover::after { width: 38px; }
.group { margin: clamp(48px, 6vw, 80px) 0 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .group { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; } }
.group img { width: 100%; border: 10px solid var(--ink); }
.group figcaption { font: 600 15px/1.5 var(--body); color: var(--muted-ink); max-width: 36ch; }

/* ---------- support band ---------- */
.support { position: relative; overflow: hidden; background: #160407; }
.support > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.support::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,2,4,.85), rgba(10,2,4,.2) 70%); }
.support .wrap { position: relative; z-index: 1; padding-block: clamp(90px, 13vw, 170px); }
.support h2 { font: 900 clamp(60px, 10vw, 156px)/0.82 var(--display); text-transform: uppercase; margin: 0 0 30px; max-width: 9ch; }

.field { display: grid; gap: 6px; }
.field label { font: 800 17px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.input { width: 100%; min-height: 52px; padding: 12px 14px; font: 500 18px/1.2 var(--body); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 0; }
.input:focus { outline: 3px solid var(--flag-blue); outline-offset: 2px; }
textarea.input { min-height: 160px; resize: vertical; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row .input { flex: 1 1 220px; }
.form-note { font: 600 15px/1.4 var(--body); margin: 10px 0 0; min-height: 1.4em; }
.night .input { border-color: var(--paper); }

/* ---------- footer ---------- */
.foot { background: var(--night); position: relative; }
.foot-pano { position: relative; height: clamp(150px, 22vw, 330px); overflow: hidden; }
.foot-pano img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.foot-pano::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(7,10,18,0) 30%, rgba(7,10,18,0) 70%, var(--night) 100%); }
.foot-grid { display: grid; gap: 34px; padding-block: 40px 30px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 200px repeat(3, minmax(0, 1fr)); } }
.foot-grid img.logo { width: 150px; }
.foot h4 { font: 800 18px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot ul a { text-decoration: none; font-size: 16px; }
.foot ul a:hover { text-decoration: underline; }
.fine { border-top: 1px solid #1b2233; padding-block: 18px 34px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.fine a { color: var(--muted); }
.fine p { margin: 0 0 8px; max-width: 110ch; }

/* ---------- inner pages ---------- */
.view { min-height: 100svh; }
.vhead { padding-block: calc(var(--bar-h) + clamp(40px, 7vw, 90px)) clamp(36px, 5vw, 64px); position: relative; overflow: hidden; }
.vhead h1 { font: 900 clamp(76px, 15vw, 230px)/0.8 var(--display); text-transform: uppercase; margin: 0; letter-spacing: -0.015em; position: relative; z-index: 1; }
.vhead .lede { margin: 26px 0 0; max-width: 46ch; font: 560 clamp(18px, 1.5vw, 22px)/1.45 var(--body); color: var(--chrome); position: relative; z-index: 1; }
.vhead .rail-pair { position: absolute; top: 0; bottom: 0; right: max(16px, 4vw); display: flex; gap: clamp(30px, 6vw, 90px); z-index: 0; }
.vhead .rail-pair span { width: var(--rail); background: var(--flag-blue); }
.prose { max-width: 66ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.65; }
.prose p { margin: 0 0 1.05em; }
.prose h4 { font: 900 28px/1 var(--display); text-transform: uppercase; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.2em; }
.two { display: grid; gap: clamp(32px, 5vw, 70px); }
@media (min-width: 960px) { .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

.bio { display: grid; gap: clamp(22px, 3vw, 44px); padding-block: clamp(40px, 5vw, 64px); border-top: 6px solid var(--ink); }
@media (min-width: 900px) { .bio { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.bio .shot { border: 8px solid var(--ink); background: var(--ink); position: sticky; top: calc(var(--bar-h) + 20px); }
.bio .shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bio h2 { font: 900 clamp(48px, 6vw, 92px)/0.84 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.bio .role { font: 800 20px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--flag-red); margin: 0 0 22px; }
.bio .lead { font: 600 clamp(19px, 1.5vw, 22px)/1.45 var(--body); margin: 0 0 18px; }
details.more { border-top: 2px solid var(--ink); margin-top: 10px; }
details.more summary { cursor: pointer; list-style: none; padding: 14px 0; font: 800 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--paper); font: 900 20px/1 var(--display); }
details.more[open] summary::before { content: "\2212"; }

/* sprayed marks */
.spray-line { display: block; width: min(540px, 80%); height: 34px; margin-top: 10px; overflow: visible; }
.spray-line path { fill: none; stroke: var(--flag-red); stroke-width: 16; stroke-linecap: round; }
.spray-line .drip { stroke-width: 5; filter: none; }   /* runs are wet paint, not spray */
.view.is-entering .spray-line path { animation: spray-draw .5s cubic-bezier(.2,.7,.2,1) both .15s; }
.view.is-entering .spray-line .drip { animation: drip .7s ease-out both .55s; }
@keyframes spray-draw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
@keyframes drip { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* spray transition layer */
.spray-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 100; pointer-events: none; display: none; }
.spray-can { position: fixed; z-index: 101; left: 0; top: 0; pointer-events: none; display: none; transform-origin: 50% 50%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
main { transition: opacity .11s ease; }
main.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .star { transition: none; }
  .led .blink, .led__track { animation: none; }
  .btn, .wall img { transition: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; background: var(--night); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(7,10,18,.65) 0%, rgba(7,10,18,.05) 26%, rgba(7,10,18,.1) 55%, rgba(7,10,18,.94) 100%),
  linear-gradient(90deg, rgba(7,10,18,.7) 0%, rgba(7,10,18,0) 55%); }
.hero .rail { z-index: 0; }
.hero-in { width: 100%; display: grid; gap: 28px 56px; align-items: end;
  padding: calc(var(--bar-h) + 40px) max(calc(var(--rail) * 3.2), var(--gutter-r)) clamp(150px, 19vh, 190px) max(calc(var(--rail) * 3.2), var(--gutter-l)); }
@media (min-width: 900px) { .hero-in { grid-template-columns: auto minmax(0, 520px); } }
.hero-logo { width: clamp(190px, 26vw, 380px); height: auto; filter: drop-shadow(0 12px 34px rgba(0,0,0,.55)); }
@media (max-width: 899px) { .hero-logo { width: min(52vw, 230px); } }
.hero-copy { padding-bottom: 6px; }
.led--hero { position: absolute; left: auto; right: max(calc(var(--rail) * 3.2), var(--gutter-r)); top: auto; bottom: 34px; translate: none; text-decoration: none; display: block; min-width: 0; font-size: clamp(14px, 1.2vw, 17px); width: min(560px, calc(100% - 2 * max(calc(var(--rail) * 3.2), 16px))); }
@media (max-width: 899px) { .led--hero { left: max(calc(var(--rail) * 3.2), var(--gutter-l)); right: auto; bottom: 26px; } }
.led--hero:hover { color: var(--led); border-color: #3a3f4b; }
.hero-credit { position: absolute; right: max(calc(var(--rail) * 3.2), var(--gutter-r)); bottom: 8px; margin: 0; font: 500 11px/1.2 var(--body); color: rgba(235,235,230,.5); }

/* ---------- mission / vision ---------- */
.mv-grid { display: grid; gap: clamp(40px, 6vw, 96px); }
.mv-text { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 980px) { .mv-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mv-h { font: 900 clamp(64px, 9vw, 140px)/0.82 var(--display); text-transform: uppercase; margin: 0 0 22px; position: relative; display: inline-block; }
.mv-h::after { content: ""; position: absolute; left: 0; right: -8px; bottom: -6px; height: 12px; background: var(--flag-red); transform: skewX(-12deg); z-index: -1; opacity: .95; }
.mv .statement { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.34; font-stretch: 104%; max-width: 30ch; }

/* ---------- elements stage ---------- */
.unit { position: absolute; z-index: 3; left: var(--cx, 68%); top: 50%; translate: -50% -50%;
  height: min(78svh, 92vw * 482 / 432); aspect-ratio: 432 / 482; }
@media (max-width: 699px) { .unit { --cx: 50%; top: 44%; height: min(62svh, 96vw * 482 / 432); } }
.unit .star { position: absolute; left: 0; top: 0; width: 100%; height: 100%; translate: none; transition: rotate .7s cubic-bezier(.3,1.35,.5,1); }
.unit .star path { fill: var(--flag-red); }
.unit .icon { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; scale: .86; transition: opacity .18s ease, scale .32s cubic-bezier(.3,1.5,.5,1); }
.unit .icon.is-on { opacity: 1; scale: 1; }
.unit .ghost.is-on { opacity: 0; }
.unit .can { transform-origin: 50% 47%; }            /* the middle of the can, where the hand holds it */
.unit .mic { transform-origin: 40% 72%; }
.unit .bboy, .unit .ghost { transform-origin: 43.5% 79.8%; }
.unit .full { inset: 4% 2%; width: 96%; height: 92%; object-fit: contain; }
.pin[data-el="knowledge"] .unit .star { opacity: 0; }
.unit .star { transition: rotate .7s cubic-bezier(.3,1.35,.5,1), opacity .3s ease; }
#el-knowledge h2 { font-size: clamp(46px, 5.2vw, 84px); }
#el-knowledge .statement { max-width: 26ch; }
.unit .sheen { position: absolute; left: calc(46.95% - 11.8%); top: calc(48.6% - 11.8% * 432 / 482); width: 23.6%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14%, rgba(255,255,255,.55) 18%, transparent 24% 64%, rgba(255,255,255,.4) 68%, transparent 74%);
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23% 100%); mask: radial-gradient(circle, transparent 0 22%, #000 23% 100%);
  opacity: 0; transition: opacity .2s ease; }
.unit .sheen.is-on { opacity: .9; }
.unit .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.word { bottom: 2vh; }
.lmap { width: min(640px, 88vw); }
.lmap button { font-size: 14px; }
@media (max-width: 520px) { .lmap button { font-size: 12px; letter-spacing: .03em; } }
.panel h2 { font-size: clamp(56px, 7.2vw, 112px); }
.panel--long { min-height: 170svh; }
@media (max-width: 699px) { .panel--long { min-height: 210svh; } }
.night { background: var(--night); }
.wall--all { grid-auto-rows: 130px; }
@media (min-width: 1100px) { .wall--all { grid-auto-rows: 170px; } }
.contact-form { display: grid; gap: 18px; }

/* phone layout for the elements stage: icon up top, cards rise from below it */
@media (max-width: 699px) {
  .pin { --cx: 50%; }
  .unit { top: 31%; height: min(46svh, 86vw * 482 / 432); }
  .stage .panel { min-height: 135svh; padding-block: 58svh 0; }
  .stage .panel--long { min-height: 190svh; }
  .panel__in { min-width: 0; }
  #el-knowledge h2 { font-size: clamp(30px, 9.4vw, 44px); }
  .lmap { bottom: 14px; }
}

/* sound toggle */
.sound-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 2px solid rgba(235,235,230,.35); color: var(--paper); cursor: pointer; }
.sound-btn:hover { border-color: var(--paper); }
.sound-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .spk { fill: currentColor; }
.sound-btn[aria-pressed="true"] .mute, .sound-btn[aria-pressed="false"] .wave { display: none; }
.sound-btn[aria-pressed="false"] { color: var(--muted); }


.group.group--stack { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 700px) and (max-width: 1099px) { .lmap { width: 56vw; } }

/* =====================================================================================
   Full-content pages (everything from the museum's site), production pieces, extras
   ===================================================================================== */
html.is-locked { overflow: hidden; }
.sr-focus:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 700; }
main { min-height: 60vh; }
main:focus { outline: none; }
.sec-title--md { font-size: clamp(40px, 5.4vw, 84px); margin-bottom: clamp(18px, 2.4vw, 30px); }
.sec-title a { text-decoration: none; }
.sec-title a:hover { color: var(--hot); }
.paper .sec-title a:hover { color: var(--flag-red); }
.kicker-h { font: 800 clamp(20px, 1.8vw, 26px)/1.1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--flag-red); margin: 28px 0 10px; }
.night .kicker-h { color: var(--sky); }
.kicker-h--sm { font-size: 19px; margin-top: 22px; }
.kicker-p { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--sky); margin: 0 0 10px; }
.paper .kicker-p { color: var(--flag-red); }
.statement--sm { font-size: clamp(19px, 1.5vw, 23px); }
.lead { font: 600 clamp(19px, 1.5vw, 22px)/1.5 var(--body); }
.btn[aria-current] { box-shadow: none; }

/* ---------- inner page header: crumbs for sub-pages, smaller type for long titles ---------- */
.crumb { margin: 0 0 14px; position: relative; z-index: 1; }
.crumb a { font: 800 20px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--sky); display: inline-flex; align-items: center; gap: 10px; }
.crumb a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.vhead--long h1 { font-size: clamp(50px, 8.6vw, 140px); line-height: .84; max-width: 13ch; }

/* ---------- hero LED: a CTA arrival sign that scrolls ---------- */
.led--hero { overflow: hidden; padding-inline: 0; }
.led__track { display: flex; width: max-content; animation: ticker 24s linear infinite; }
.led__track span { white-space: nowrap; padding-inline: 18px 3em; font-weight: 900; color: #ffd0b8; text-shadow: 0 0 8px rgba(255,140,90,.7); }
.led--hero:hover .led__track, .led--hero:focus-visible .led__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .led__track span + span { display: none; } .led__track span { white-space: normal; } .led__track { width: auto; animation: none; } }

/* ---------- the elements stage: the museum's own sentences, names in flyer type ---------- */
.el-quote { font: 600 clamp(20px, 1.9vw, 28px)/1.42 var(--body); max-width: 32ch; margin: 0 0 18px; color: var(--chrome); }
.el-quote .nm { font: 900 1.5em/1 var(--display); text-transform: uppercase; color: var(--paper); letter-spacing: .005em; }
.el-quote--2 { font-size: clamp(18px, 1.6vw, 24px); }
.el-quote--2 .nm { color: var(--sky); }
#el-knowledge .el-quote { color: var(--paper); font-size: clamp(22px, 2.1vw, 32px); }

/* ---------- home: story, team, memories, donate ---------- */
.story-grid { align-items: center; }
.story-p { font: 600 clamp(19px, 1.45vw, 23px)/1.6 var(--body); margin: 0 0 28px; max-width: 60ch; }
.story-p a:not(.btn) { color: var(--ink); text-decoration-color: var(--flag-red); text-decoration-thickness: 2px; }
.story-photo { margin: 0; }
.story-photo img { width: 100%; border: 10px solid var(--ink); }
.story-photo figcaption { font: 600 15px/1.5 var(--body); color: var(--muted-ink); }
.night .founder p { color: var(--chrome); }
.night .founder .shot { border-color: #000; }
.founder h3 a { text-decoration: none; }
.founder h3 a:hover { color: var(--hot); }
.founder .shot { display: block; }
.pos-brian { object-position: 60% 40%; }
.pos-carrico { object-position: 58% 30%; }
.pos-darrell { object-position: 50% 26%; }
.support-word { font: 900 clamp(90px, 17vw, 260px)/.8 var(--display); text-transform: uppercase; margin: 0 0 28px; color: transparent; -webkit-text-stroke: 2px rgba(235,235,230,.85); }

/* ---------- about ---------- */
.about-photo { margin: 0; }
.about-story a:not(.btn) { color: inherit; text-decoration-color: var(--flag-red); text-decoration-thickness: 2px; }
.honor-p .nm { font: 900 1.28em/1 var(--display); text-transform: uppercase; }
.hhm-btn { margin-top: 8px; text-align: left; line-height: 1.05; }
.team { margin-top: clamp(56px, 7vw, 96px); }
.bio-name { font: 900 clamp(48px, 6vw, 92px)/0.84 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.bio .prose li { margin-bottom: .5em; }

/* ---------- heritage month: the resolution as a city document ---------- */
.her-intro { max-width: 34ch; margin: 0 0 clamp(36px, 5vw, 60px); }
.resolution { background: #fff; color: #111; border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); padding: clamp(26px, 5vw, 64px); max-width: 82ch; position: relative; }
.res-seal { width: 64px; margin-bottom: 18px; }
.res-seal path { fill: var(--flag-red); }
.res-h { font: 900 clamp(24px, 2.6vw, 38px)/1.05 var(--display); text-transform: uppercase; margin: 0 0 28px; max-width: 26ch; }
.clauses { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.clause { position: relative; padding: 16px 0 16px 58px; border-top: 1px solid #d8d8d0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; }
.clause::before { counter-increment: c; content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 900 22px/1 var(--display); color: var(--flag-blue); }
.clause .kw { font: 900 1.25em/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.clause--resolved { background: linear-gradient(90deg, rgba(212,24,32,.07), transparent); }
.clause--resolved .kw { color: var(--flag-red); }
.res-sign { display: grid; gap: 2px; margin: 32px 0 0; padding-top: 22px; border-top: 3px solid var(--ink); font: 700 16px/1.4 var(--body); }
.res-sign span:nth-child(2), .res-sign span:nth-child(4) { font: 900 26px/1 var(--display); text-transform: uppercase; margin-top: 10px; }
.resolution .stamp { position: absolute; top: 22px; right: 22px; rotate: 7deg; border: 3px solid var(--flag-red); color: var(--flag-red); font: 900 18px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px 6px; }
.view.is-entering .clause { animation: clause-in .5s ease both; }
.view.is-entering .clause:nth-child(n+2) { animation-delay: .04s; }
@keyframes clause-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- projects ---------- */
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 6px solid var(--ink); }
.proj { display: grid; gap: 22px 40px; padding: clamp(28px, 3.4vw, 46px) 0; border-bottom: 2px solid var(--ink); align-items: center; }
@media (min-width: 900px) { .proj { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .proj--text { grid-template-columns: 1fr; } }
.proj__h { font: 900 clamp(38px, 4.6vw, 72px)/0.86 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.proj__h a { text-decoration: none; }
.proj__h a:hover { color: var(--flag-red); }
.proj__meta { font: 800 20px/1.25 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--flag-red); margin: 0; }
.proj__img img { width: 100%; border: 8px solid var(--ink); background: var(--ink); transition: transform .2s ease; }
.proj__img:hover img { transform: rotate(-1deg) scale(1.01); }
.proj__img--logo img { background: #6e6e6e; max-width: 360px; }
.proj__img--tall img { max-width: 360px; }
.proj__uic { display: inline-block; margin-top: 18px; }
.proj__uic img { width: 200px; border: 0; }

/* ---------- history project + survey ---------- */
.hp-logo img { width: min(100%, 420px); filter: drop-shadow(10px 10px 0 rgba(0,0,0,.18)); }
.kicker-h:first-child { margin-top: 0; }
.survey-head { max-width: 860px; margin-bottom: clamp(30px, 4vw, 54px); }
.survey { display: grid; gap: 30px; }
@media (min-width: 1100px) { .survey { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .survey-head { grid-column: 1 / -1; } }
.survey-line { position: sticky; top: calc(var(--bar-h) + 20px); }
@media (max-width: 1099px) { .survey-line { display: none; } }
.survey-line ol { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 6px; }
.survey-line ol::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 6px; background: var(--flag-red); }
.survey-line a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: var(--muted); font: 700 16px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 4px 0; position: relative; }
.survey-line a::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.survey-line a .n { color: var(--sky); font-weight: 900; }
.survey-line a:hover, .survey-line a.is-here { color: var(--paper); }
.survey-line a.is-here::before { background: var(--sky); }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.form-title { font: 900 clamp(40px, 5vw, 76px)/0.86 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.form-grid { display: grid; gap: 18px 22px; }
@media (min-width: 760px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid > .field:has(textarea), .form-grid > .field--checks, .form-grid > .field--file { grid-column: 1 / -1; } }
.form-card { background: #fff; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: clamp(22px, 3.4vw, 44px); margin-top: clamp(40px, 5vw, 70px); }
.contact .form-card { margin-top: 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend, .field .label { font: 800 17px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 2px solid currentColor; cursor: pointer; font: 600 16px/1.2 var(--body); }
.check input { width: 18px; height: 18px; accent-color: var(--flag-red); margin: 0; }
.check:has(input:checked) { background: var(--ink); color: var(--paper); }
.form--night .check:has(input:checked) { background: var(--paper); color: var(--ink); }
.check:focus-within { outline: 3px solid var(--flag-blue); outline-offset: 2px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.dob { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; }
.dob label { display: grid; gap: 4px; font: 700 14px/1 var(--body); text-transform: none; letter-spacing: 0; }
.field--file { justify-items: start; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field--file:focus-within .file-btn { outline: 3px solid var(--flag-blue); outline-offset: 3px; }
.file-btn { cursor: pointer; }
.paper .file-btn, .form--paper .file-btn { color: var(--ink); --b: var(--ink); }
.hint { font: 500 14px/1.4 var(--body); color: var(--muted-ink); }
.form--night .hint { color: var(--muted); }
.file-list { font: 600 15px/1.4 var(--body); }
.field-error { margin: 2px 0 0; font: 700 14px/1.3 var(--body); color: var(--flag-red); }
.form--night .field-error { color: var(--hot); }
.has-error .input { border-color: var(--flag-red); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-foot .form-note { margin: 0; }
.form-thanks { font: 900 clamp(32px, 4vw, 56px)/0.9 var(--display); text-transform: uppercase; color: var(--flag-red); margin: 0; }
.form-thanks:focus { outline: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sec { border-top: 6px solid var(--paper); padding-top: 22px; display: grid; gap: 18px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.form-sec__h { font: 900 clamp(26px, 2.6vw, 40px)/0.95 var(--display); text-transform: uppercase; margin: 0; color: var(--paper); }
.form--night { color: var(--paper); }
.form--night .input { border-color: var(--paper); }
.form--night .btn { --b: var(--paper); --f: var(--ink); }
.sig-modes { display: flex; gap: 8px; margin-bottom: 10px; }
.sig-modes label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid currentColor; cursor: pointer; font: 700 15px/1 var(--body); text-transform: none; letter-spacing: 0; }
.sig-modes label:has(input:checked) { background: var(--paper); color: var(--ink); }
.sig-pane { display: grid; gap: 8px; justify-items: start; }
.sig-pad { width: min(100%, 600px); aspect-ratio: 600 / 180; background: #fff; border: 3px solid var(--paper); touch-action: none; cursor: crosshair; }
.sig-clear { all: unset; cursor: pointer; font: 800 16px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; }

/* ---------- tapes: videos as cassettes on a shelf ---------- */
.tapes { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tapes--big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 28px; }
.tapes--one { grid-template-columns: minmax(0, 720px); }
.tape { display: grid; text-decoration: none; color: var(--paper); background: #111319; border: 2px solid #2a2f3b; padding: 10px 10px 0; position: relative; transition: transform .18s ease, border-color .18s ease; }
.tape::before, .tape::after { content: ""; position: absolute; top: 50%; width: 10px; height: 26px; margin-top: -13px; background: #2a2f3b; }
.tape::before { left: -6px; } .tape::after { right: -6px; }
.tape:hover, .tape:focus-visible { transform: translateY(-4px) rotate(-.6deg); border-color: var(--flag-red); color: var(--paper); }
.tape__shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000 linear-gradient(135deg, #1b2233, #070a12); }
.tape__shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }
.tape__shot--fit img { object-fit: contain; }
.tape__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; translate: -50% -50%; background: var(--flag-red); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: scaleX(.8); opacity: .95; transition: transform .18s ease; }
.tape:hover .tape__play { transform: scaleX(.9) scale(1.08); }
.tape__label { display: grid; gap: 4px; margin: 10px -10px 0; padding: 12px 14px 14px; background: var(--paper); color: var(--ink); border-top: 6px solid var(--flag-red); background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,152,196,.25) 22px 23px); }
.tape__title { font: 900 clamp(19px, 1.6vw, 24px)/1.02 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.tape__sub { font: 600 15px/1.35 var(--body); color: #333; }
.tapes--big .tape__title { font-size: clamp(22px, 2vw, 30px); }
.more-row { margin: -20px 0 clamp(50px, 6vw, 80px); }
.channel { margin: clamp(30px, 4vw, 60px) 0; padding-top: clamp(30px, 4vw, 50px); border-top: 6px solid var(--flag-blue); }
.channel__credit { margin: -26px 0 0; font: 600 16px/1.4 var(--body); color: var(--chrome); }
.channel__credit b { font: 900 22px/1 var(--display); color: var(--paper); text-transform: uppercase; margin-right: 8px; }
.awesome { grid-template-columns: 1fr !important; margin: clamp(40px, 5vw, 70px) 0 28px; }
.awesome img { border-color: #000; }
.awesome figcaption { color: var(--chrome); max-width: none; }
.awesome figcaption b { font: 900 24px/1 var(--display); color: var(--paper); text-transform: uppercase; margin-right: 8px; }

/* ---------- viewer (lightbox) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(5,6,10,.94); display: grid; grid-template-rows: 1fr auto; padding: max(56px, env(safe-area-inset-top)) 16px 18px; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img { max-width: min(96vw, 1400px); max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #fff; }
.lightbox__video { width: min(96vw, 1200px, calc((100svh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.lightbox__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__cap { margin: 12px auto 0; max-width: 80ch; text-align: center; font: 800 20px/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--paper); min-height: 1em; }
.lightbox__btn { position: absolute; display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 0; font: 900 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.lightbox__btn:hover { background: var(--flag-red); color: #fff; }
.lightbox__close { top: max(12px, env(safe-area-inset-top)); right: 16px; }
.lightbox__prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 700px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; translate: none; } }

/* ---------- photos ---------- */
.ph { margin: 0; }
.ph__a { display: block; cursor: zoom-in; }
.ph img { width: 100%; border: 8px solid var(--ink); background: var(--ink); }
.night .ph img { border-color: #000; }
.ph figcaption { margin-top: 8px; font: 700 16px/1.35 var(--body); }
.photo-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.photo-row img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.recap img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- can heal: album, liner notes, criteria ---------- */
.ch-top .wrap { display: grid; gap: clamp(36px, 4vw, 56px); }
.ch-flyer { margin: 0; }
.ch-flyer img { width: 100%; border: 10px solid #000; }
.album { display: grid; gap: 28px 44px; align-items: center; }
@media (min-width: 900px) { .album { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.album__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 10px solid #000; box-shadow: 18px 18px 0 var(--flag-red); }
.album__title { font: 900 clamp(44px, 5.4vw, 86px)/0.86 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.liner { margin: 0; display: grid; gap: 0; border-top: 6px solid var(--ink); }
.liner div { display: grid; gap: 4px 30px; padding: 18px 0; border-bottom: 2px solid var(--ink); }
@media (min-width: 800px) { .liner div { grid-template-columns: 260px minmax(0, 1fr); align-items: baseline; } }
.liner dt { font: 800 19px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--flag-red); }
.liner dd { margin: 0; font: 900 clamp(24px, 2.4vw, 36px)/1.08 var(--display); text-transform: uppercase; }
.criteria { margin-top: clamp(50px, 6vw, 90px); }
.facts { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts div { border: 3px solid var(--ink); padding: 14px 16px; }
.facts dt { font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #a8121a; }
.facts dd { margin: 6px 0 0; font: 900 30px/1 var(--display); text-transform: uppercase; }
.prose-list { padding-left: 1.2em; margin: 0; display: grid; gap: 10px; }
.topics { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.topics li { font: 900 clamp(18px, 1.6vw, 24px)/1 var(--display); text-transform: uppercase; padding: 10px 12px 8px; background: var(--ink); color: var(--paper); }
.topics li:nth-child(3n+2) { background: var(--flag-red); color: #fff; }
.topics li:nth-child(3n+3) { background: var(--flag-blue); color: #fff; }

/* ---------- unplugged ---------- */
.up-flyer { margin: 0; }
.up-flyer img { width: 100%; border: 10px solid var(--ink); }
.credit-line { font: 800 20px/1.3 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.hosts { list-style: none; margin: 0 0 clamp(50px, 6vw, 80px); padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.host__shot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid var(--paper); box-shadow: 0 0 0 8px var(--flag-blue); }
.host__name { display: block; margin-top: 18px; text-align: center; font: 900 clamp(30px, 3vw, 44px)/0.95 var(--display); text-transform: uppercase; }
.shows { display: grid; gap: clamp(50px, 6vw, 80px); }
.show--next { display: grid; gap: 22px 40px; align-items: start; }
@media (min-width: 900px) { .show--next { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.show__flyer img { width: 100%; border: 8px solid #000; box-shadow: 14px 14px 0 var(--flag-blue); }
.show__date { font: 800 clamp(22px, 2vw, 30px)/1 var(--dot); color: var(--led); text-shadow: 0 0 8px rgba(255,106,58,.55); text-transform: uppercase; margin: 0 0 12px; }
.show__title { font: 900 clamp(34px, 3.6vw, 58px)/0.9 var(--display); text-transform: uppercase; margin: 0 0 14px; }
/* past shows: a wall of flyers */
.past { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px 18px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); }
.past__item .ph { position: relative; }
.past__item .ph__a { display: block; position: relative; }
.past__item .ph__a::before { content: ""; position: absolute; z-index: 1; top: -8px; left: 50%; width: 54px; height: 16px; translate: -50% 0; background: rgba(214,214,207,.8); rotate: -3deg; }
.past__item img { border: 0; box-shadow: 0 0 0 1px #000, 0 12px 26px rgba(0,0,0,.5); aspect-ratio: 4 / 5; object-fit: cover; transition: transform .18s ease; }
.past__item:nth-child(3n+1) img { rotate: -1.2deg; } .past__item:nth-child(3n+2) img { rotate: .8deg; } .past__item:nth-child(3n) img { rotate: -.4deg; }
.past__item .ph__a:hover img { transform: translateY(-4px) scale(1.02); }
.past figcaption { color: var(--chrome); font: 800 17px/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-top: 12px; }
.sponsor-line { align-items: center; }
.sponsor-line a:not(.btn) { color: inherit; text-decoration-color: var(--flag-red); text-decoration-thickness: 2px; }
.sponsor-flyer img { width: 100%; border: 8px solid var(--ink); }
.sponsors-h { margin-top: clamp(40px, 5vw, 70px); }
.sponsors { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sponsors li { display: grid; place-items: center; background: #fff; border: 3px solid var(--ink); padding: 16px; aspect-ratio: 4 / 3; }
.sponsors img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.sponsors a { display: grid; place-items: center; width: 100%; height: 100%; }
.sponsors li:first-child { background: var(--night); }

/* details drawers on the night background */
.more--night { border-top-color: rgba(235,235,230,.4); }
.more--night summary::before { background: var(--paper); color: var(--ink); }
.ev-when { font: 700 16px/1.45 var(--body); color: var(--sky); }
.ev-h { font: 900 28px/1 var(--display); text-transform: uppercase; margin: 14px 0 6px; }
.ev-sub { font: 800 19px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--hot); }

/* ---------- media: a newsstand ---------- */
.stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); align-items: center; }
.stand__clip img { width: 100%; background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(13,13,15,.85); }
.stand__clip { position: relative; }
.stand__clip::before { content: ""; position: absolute; z-index: 1; top: -10px; left: 50%; width: 84px; height: 22px; translate: -50% 0; background: rgba(214,214,207,.8); rotate: -3deg; }
.stand__clip:nth-child(2n) { rotate: 1.2deg; } .stand__clip:nth-child(2n+1) { rotate: -1deg; }
.stand__clip--link a img { transition: transform .18s ease; }
.stand__clip--link a:hover img { transform: translate(-3px, -3px); }
.stand__logo a { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #fff; border: 3px solid var(--ink); padding: 18px 20px; transition: transform .15s ease, box-shadow .15s ease; }
.stand__logo:nth-child(3n) a { rotate: -1.2deg; } .stand__logo:nth-child(3n+1) a { rotate: .9deg; }
.stand__logo a:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--flag-red); }
.stand__logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.stand__hint { grid-column: 1 / -1; }
.stand__hint p { margin: 10px 0 0; font: 900 clamp(30px, 3.6vw, 54px)/0.9 var(--display); text-transform: uppercase; display: inline-flex; align-items: center; gap: 16px; }
.stand__hint p::after { content: ""; width: 60px; height: 10px; background: var(--flag-red); }
.stand--after { margin-top: 26px; }
.disclaimer { margin: clamp(30px, 4vw, 50px) 0 0; font: 600 16px/1.5 var(--body); color: var(--muted-ink); max-width: 70ch; }
.disclaimer a:not(.btn) { color: var(--ink); }

/* ---------- events: flyers on a wall ---------- */
.ev-top { margin: 0 0 clamp(30px, 4vw, 50px); }
.ev-bottom { margin-top: clamp(30px, 4vw, 50px); }
.posters { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.poster { position: relative; }
.poster__img { display: block; position: relative; }
.poster__img::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 96px; height: 24px; translate: -50% 0; background: rgba(214,214,207,.85); rotate: -2deg; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.poster img { width: 100%; box-shadow: 0 0 0 1px #000, 0 16px 34px rgba(0,0,0,.45); transition: transform .18s ease; }
.poster:nth-child(2n) img { rotate: .8deg; } .poster:nth-child(2n+1) img { rotate: -.7deg; }
.poster__img:hover img { transform: translateY(-4px); }
.poster.is-past img { filter: grayscale(.85) contrast(.95); }
/* events that have happened: stamped, sign-up buttons gone (set by the build, kept current by media.js) */
.is-past .live-only, .live-only.is-past { display: none !important; }
.camp-flyer { position: relative; }
.camp.is-past .camp-flyer img { filter: grayscale(.85) contrast(.95); }
.show--last { margin-bottom: clamp(40px, 5vw, 64px); }
.past-stamp { position: absolute; z-index: 2; top: 18%; left: 50%; translate: -50% 0; rotate: -14deg; padding: 8px 18px 4px; border: 5px solid var(--flag-red); color: var(--flag-red); background: rgba(255,255,255,.85); font: 900 clamp(38px, 4vw, 58px)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.ev-details { margin-top: 12px; }

/* ---------- camp out ---------- */
.camp-flyer { margin: 0; }
.camp-flyer img { width: 100%; border: 10px solid #000; }
.camp-tag { font: 900 clamp(40px, 5vw, 78px)/0.88 var(--display); text-transform: uppercase; margin: 0 0 24px; max-width: 12ch; }
.check-list { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 34px; font-weight: 560; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 6px solid var(--flag-red); box-sizing: border-box; }
.paper .check-list li::before { background: var(--paper); border-color: var(--flag-red); }
.check-list--night li::before { background: var(--night); border-color: var(--sky); }
.check-list a:not(.btn) { color: inherit; text-decoration-color: var(--flag-red); text-decoration-thickness: 2px; }
.package { background: #fff; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--flag-red); padding: clamp(20px, 3vw, 36px); align-self: start; }
.package__head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.package__head img { width: 92px; }
.package__head h2 { font: 900 clamp(30px, 3vw, 46px)/0.9 var(--display); text-transform: uppercase; margin: 0; }
.package__when { font: 800 18px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--flag-red); }
.package__list { margin: 0 0 22px; padding-left: 1.1em; display: grid; gap: 10px; }
.package__list a:not(.btn) { color: var(--ink); font-weight: 800; text-decoration-color: var(--flag-red); text-decoration-thickness: 3px; }
.programs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(46px, 6vw, 84px); }
.program { display: grid; gap: 24px 44px; scroll-margin-top: calc(var(--bar-h) + 20px); }
@media (min-width: 900px) { .program { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .program:nth-child(2n) .program__poster { order: 2; } }
.program__poster img { width: 100%; border: 8px solid #000; box-shadow: 14px 14px 0 var(--flag-blue); }
.program__h { font: 900 clamp(46px, 5.6vw, 92px)/0.84 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.program__h a { text-decoration: none; } .program__h a:hover { color: var(--hot); }
.program__when { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font: 800 clamp(18px, 1.6vw, 22px)/1.1 var(--dot); color: var(--led); text-shadow: 0 0 8px rgba(255,106,58,.5); text-transform: uppercase; }
.program__where { margin: 0 0 6px; font: 800 20px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.program__cost { display: inline-block; margin: 0 0 16px; padding: 7px 10px 5px; background: var(--flag-red); color: #fff; font: 800 16px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.program__cost a { color: #fff; }
.camp-outro { font: 900 clamp(28px, 3vw, 44px)/0.95 var(--display); text-transform: uppercase; color: var(--flag-red); margin: 18px 0 0; }

/* ---------- contact ---------- */
.contact-banner img { width: 100%; max-width: 560px; }
.contact { align-items: start; }

/* ---------- 404: a wall to spray ---------- */
.wall404 { position: relative; min-height: 100svh; display: grid; place-items: center; background: #d9d6cf; color: var(--ink); overflow: hidden; background-image: linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px); background-size: 120px 60px; }
.wall404__paint { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wall404__in { position: relative; pointer-events: none; text-align: center; padding-top: var(--bar-h); }
.wall404__in a { pointer-events: auto; }
.wall404__h { font: 900 clamp(140px, 30vw, 420px)/.8 var(--display); margin: 0; color: var(--ink); }
.wall404__p { font: 900 clamp(28px, 3vw, 44px)/1 var(--display); text-transform: uppercase; margin: 10px 0 24px; }
.wall404__in .btn-row { justify-content: center; }
.wall404__hint { margin-top: 26px; font: 800 18px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #555; }

/* ---------- footer ---------- */
.foot-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.foot-logo img { width: 150px; }
.foot .foot-nav { display: block; columns: 2; column-gap: 24px; }
.foot-nav li { break-inside: avoid; margin-bottom: 7px; }
.foot-nav a { font: 800 20px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.foot-nav a:hover { color: var(--sky); text-decoration: none; }
.foot-side .socials { margin-bottom: 22px; }
.foot-cta { padding-bottom: 0; }

/* ---------- menu: an L line with transfer stations ---------- */
.line-map { list-style: none; margin: 0 auto; padding: 0 0 0 34px; max-width: 620px; position: relative; }
.line-map::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 8px; background: var(--flag-red); }
.line-map > .stop { position: relative; }
.line-map > .stop::before { content: ""; position: absolute; left: -30px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 5px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.line-map > .stop > a { display: block; padding: 6px 0 6px 18px; font: 900 clamp(40px, 10vw, 62px)/1 var(--display); text-transform: uppercase; text-decoration: none; color: var(--paper); }
.line-map a[aria-current="page"] { color: var(--sky); }
.transfers { list-style: none; margin: 0 0 10px 18px; padding: 0 0 0 26px; border-left: 6px solid var(--flag-blue); display: grid; gap: 4px; }
.transfers a { display: inline-block; padding: 4px 0; font: 800 clamp(19px, 4.6vw, 24px)/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--chrome); }
.transfers a:hover, .transfers a[aria-current="page"] { color: var(--sky); }
.nav a[aria-current="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 3px; background: var(--flag-blue); }

/* ---------- the home video, on a museum monitor ---------- */

/* ---------- tapes: run time, channel, description ---------- */
.tape__dur { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px 3px; background: rgba(0,0,0,.82); color: var(--led); font: 800 14px/1 var(--dot); letter-spacing: .04em; text-shadow: 0 0 6px rgba(255,106,58,.6); }
.tape__by { font: 700 14px/1.2 var(--body); color: #444; text-transform: none; }
.tape__by::before { content: "\25B8\00A0"; color: var(--flag-red); }
.tape-item { display: grid; align-content: start; }
.tape__desc { margin: 0; padding: 10px 14px 0; background: #0b0d13; color: var(--chrome); font: 500 14px/1.45 var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; border: 2px solid #2a2f3b; border-top: 0; border-bottom: 12px solid #0b0d13; box-shadow: 0 2px 0 #2a2f3b; overflow-wrap: anywhere; }
.lightbox__stage:has(.lightbox__notes) { grid-template-rows: auto minmax(0, auto); align-content: center; gap: 12px; }
.lightbox__notes { width: min(96vw, 1200px, calc((100svh - 160px) * 16 / 9)); max-height: 22svh; overflow: auto; margin: 0 auto; padding: 12px 16px; background: #0b0d13; border: 2px solid #2a2f3b; color: var(--chrome); font: 500 15px/1.5 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.lightbox__stage:has(.lightbox__notes) .lightbox__video { width: min(96vw, 1200px, calc((100svh - 160px - 22svh) * 16 / 9)); }

/* ---------- Can Heal: the album's track list ---------- */
.album { align-items: start; }
.album__artist { margin: 0 0 18px; font: 800 20px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.tracks { list-style: none; margin: 0 0 30px; padding: 0; border-top: 3px solid var(--paper); counter-reset: none; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid rgba(235,235,230,.22); }
.track__play { all: unset; cursor: pointer; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px 12px 0; }
.track__play:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.track__n { position: relative; font: 800 16px/1 var(--dot); color: var(--muted); text-align: center; }
.track__play:hover .track__n, .track.is-current .track__n { color: transparent; }
.track__play:hover .track__n::after, .track.is-current .track__n::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 0; height: 0; border-left: 12px solid var(--led); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.track.is-playing .track__n::after { width: 12px; height: 14px; border: 0; background: linear-gradient(90deg, var(--led) 0 4px, transparent 4px 8px, var(--led) 8px 12px); }
.track__title { font: 800 clamp(17px, 1.4vw, 20px)/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--paper); overflow-wrap: anywhere; }
.track.is-current .track__title { color: var(--led); }
.track__dur { font: 700 15px/1 var(--dot); color: var(--chrome); }
.track__bar { position: absolute; left: 44px; right: 0; bottom: 0; height: 3px; background: transparent; }
.track__bar span { display: block; height: 100%; width: 0; background: var(--led); box-shadow: 0 0 8px rgba(255,106,58,.7); }
.track:not(.is-current) .track__bar span { width: 0 !important; }
.track__dl { display: grid; place-items: center; width: 44px; color: var(--muted); }
.track__dl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.track__dl:hover, .track__dl:focus-visible { color: var(--paper); }

/* the tape that keeps playing while you browse */
.nowplaying { position: fixed; z-index: 90; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 8px 14px 8px 8px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--flag-red); }
.nowplaying::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--flag-red); }
.nowplaying__btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); }
.nowplaying__btn:focus-visible { outline: 3px solid var(--flag-blue); outline-offset: 2px; }
.nowplaying__icon { width: 0; height: 0; border-left: 13px solid var(--paper); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.nowplaying.is-playing .nowplaying__icon { width: 12px; height: 15px; margin: 0; border: 0; background: linear-gradient(90deg, var(--paper) 0 4px, transparent 4px 8px, var(--paper) 8px 12px); }
.nowplaying__reel { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed var(--ink); flex: none; }
.nowplaying.is-playing .nowplaying__reel { animation: reel 1.6s linear infinite; }
@keyframes reel { to { rotate: 360deg; } }
.nowplaying__title { font: 800 16px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .nowplaying.is-playing .nowplaying__reel { animation: none; } }

/* ---------- contact sheets (Camp Out galleries) ---------- */
.sheet { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(30%, 130px), 1fr)); background: #111; border: 2px solid #000; }
.sheet .ph img { aspect-ratio: 1; object-fit: cover; border: 0; transition: filter .15s ease, transform .15s ease; }
.sheet .ph__a:hover img, .sheet .ph__a:focus-visible img { filter: brightness(1.1); transform: scale(1.03); }
.sheet--small { grid-template-columns: repeat(auto-fill, minmax(min(30%, 96px), 1fr)); }
.campsite { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) { .campsite { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.campsite__map img { border: 8px solid var(--ink); }
.recap { grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)) !important; gap: 12px !important; }
.recap img { border-width: 6px !important; }

/* ---------- the museum's accounts ---------- */
.socials, .foot .socials { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social { display: inline-block; padding: 10px 14px 8px; border: 2px solid currentColor; font: 800 18px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: inherit; }
.social:hover, .social:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.socials--big { margin-top: clamp(40px, 5vw, 70px); gap: 14px; }
.socials--big .social { font-size: clamp(26px, 3vw, 44px); padding: 14px 18px 10px; border-width: 3px; }
.socials--big li:nth-child(1) .social:hover { background: var(--flag-red); border-color: var(--flag-red); color: #fff; }
.socials--big li:nth-child(2) .social:hover { background: var(--flag-blue); border-color: var(--flag-blue); color: #fff; }
.socials--big li:nth-child(4) .social:hover { background: var(--led); border-color: var(--led); color: var(--ink); }
.ev-title { font: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; display: inline; }
/* native controls (checkboxes, date pickers, the video bar) follow the section they sit on */
.paper, .form-card, .package, .resolution { color-scheme: light; }
.night, .form--night { color-scheme: dark; }

/* =====================================================================================
   Phones: laid out for one thumb and a tall screen, not shrunk from the desktop. Same night,
   paper, rails, tapes and flyers. Long stacks become shelves you swipe, the header steps
   aside while you read, and the elements stage gets a window of its own under the star.
   ===================================================================================== */

/* touch screens get a press, not a hover that sticks after the tap */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn:hover, .paper .btn:hover, .btn--red:hover { transform: none; box-shadow: none; }
  .tape:hover, .tape:focus-visible { transform: none; border-color: #2a2f3b; }
  .tape:hover .tape__play { transform: scaleX(.8); }
  .wall figure:hover img { transform: none; filter: saturate(.92) contrast(1.04); }
  .poster__img:hover img, .proj__img:hover img, .past__item .ph__a:hover img, .stand__clip--link a:hover img { transform: none; }
  .stand__logo a:hover { transform: none; box-shadow: none; }
  .btn:active { transform: translate(1px, 1px) scale(.985); }
  .tape:active { transform: scale(.985); border-color: var(--flag-red); }
  .ph__a:active img, .poster__img:active img, .stand__logo a:active { transform: scale(.985); }
  .social:active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
}

/* shelves: the bar under each one (count + where you are on the shelf); phones only */
.shelf-bar { display: none; }

@media (max-width: 699px) {
  :root { --gutter-l: max(20px, env(safe-area-inset-left, 0px)); --gutter-r: max(20px, env(safe-area-inset-right, 0px)); --bar-h: 58px; }

  /* ---------- header: slimmer, and out of the way while you read ---------- */
  .bar { gap: 10px; transition: transform .32s cubic-bezier(.2, .7, .2, 1), background-color .25s ease, border-color .25s ease; }
  .bar.is-away { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 2px)); }
  .brand { gap: 10px; min-height: 44px; }
  .brand img { height: 36px; }
  .brand span { font-size: 15.5px; }
  .sound-btn { width: 42px; height: 42px; }
  .menu-btn { min-height: 42px; padding: 0 13px; font-size: 17px; }
  .menu { padding-top: calc(env(safe-area-inset-top, 0px) + 74px); }
  .menu .menu-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .menu .menu-foot .btn { display: flex; justify-content: center; min-height: 54px; }

  /* ---------- buttons: full width, one thumb ---------- */
  .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .btn-row .btn, p > .btn:only-child, .form-foot .btn { display: flex; width: 100%; justify-content: center; text-align: center; min-height: 54px; }
  .form-foot { display: grid; gap: 10px; }
  .wall404__in .btn-row { display: flex; justify-content: center; }
  .wall404__in .btn-row .btn { width: auto; }
  .hhm-btn { text-align: center; }

  /* ---------- home: the opening ---------- */
  .hero-in { gap: 24px; padding: calc(var(--bar-h) + 28px) 30px 136px; }
  .hero-logo { width: min(60vw, 250px); }
  .hero-lede { font-size: 18px; line-height: 1.45; max-width: 31ch; margin-bottom: 24px; }
  .led--hero { left: 30px; right: 30px; width: auto; bottom: 36px; }
  .hero-credit { right: 30px; bottom: 12px; font-size: 10px; }

  /* ---------- home: the elements stage ----------
     The star holds the top of the screen; the words read in a window below it, sliding up under
     the star's edge the way a teleprompter rolls (app.js sets each card's --t and --b). */
  .pin::after { background: linear-gradient(180deg, rgba(7,10,18,.6) 0%, rgba(7,10,18,.12) 22%, rgba(7,10,18,.35) 46%, rgba(7,10,18,.82) 62%, rgba(7,10,18,.94) 100%); }
  .unit { top: calc(var(--bar-h) + 6px); translate: -50% 0; height: min(37svh, 72vw * 482 / 432); }
  .word { display: none; }
  /* each card arrives at the bottom of the window just as the star turns to it, and the one
     before has slid under the star by then; the first starts in the window */
  .stage .panel, .stage .panel--long { min-height: 0; padding-block: 32svh 12svh; }
  .stage .panel:first-child { padding-top: 58svh; }
  .stage .panel:not(.panel--hero) .panel__in {
    --t: -1px; --b: 100000px;
    margin-inline: 30px; padding: 20px 18px 22px; background: rgba(7, 10, 18, .9); backdrop-filter: none;
    -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--t) - 64px), #000 var(--t), #000 calc(var(--b) - 56px), transparent var(--b));
    mask-image: linear-gradient(180deg, transparent calc(var(--t) - 64px), #000 var(--t), #000 calc(var(--b) - 56px), transparent var(--b));
  }
  .panel h2 { font-size: clamp(48px, 15vw, 64px); margin-bottom: 16px; }
  #el-knowledge h2 { font-size: clamp(34px, 10.4vw, 44px); }
  .el-quote { font-size: 18px; line-height: 1.5; }
  .el-quote .nm { font-size: 1.42em; }
  #el-knowledge .el-quote { font-size: 20px; }
  .lmap { width: calc(100% - 60px); bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .lmap button { font-size: 13px; letter-spacing: .04em; color: rgba(235, 235, 230, .62); }
  .lmap button[aria-current="true"] { color: var(--paper); }
  .lmap button { min-width: 44px; padding: 4px 4px 10px; margin: -4px -4px -10px; }      /* a thumb-sized stop */

  /* ---------- home: team, memories, donate ---------- */
  .story-photo { margin-top: 6px; }
  .support .wrap { padding-block: 84px 72px; }
  .support-word { font-size: clamp(84px, 26vw, 120px); }

  /* ---------- shelves: rows of tapes, people and hosts you swipe ---------- */
  .tapes:not(.tapes--one), .founders, .hosts {
    --shelf-w: 84%;
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--shelf-w);
    gap: 14px; align-items: start;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter-l) var(--gutter-r);
    margin-left: calc(-1 * var(--gutter-l)); margin-right: calc(-1 * var(--gutter-r));
    padding: 6px var(--gutter-r) 14px var(--gutter-l);
    scrollbar-width: none;
  }
  .tapes:not(.tapes--one)::-webkit-scrollbar, .founders::-webkit-scrollbar, .hosts::-webkit-scrollbar { display: none; }
  .tapes:not(.tapes--one) > *, .founders > *, .hosts > * { scroll-snap-align: start; min-width: 0; }
  /* the bar under a shelf carries the spacing; a shelf that fits the screen has no bar */
  .tapes:not(.tapes--one):has(+ .shelf-bar:not([hidden])), .hosts:has(+ .shelf-bar:not([hidden])) { margin-bottom: 0; }
  .tapes--notes { --shelf-w: 86%; }
  .founders { --shelf-w: 78%; gap: 16px; }
  .hosts { --shelf-w: 64%; gap: 18px; }
  .host__shot img { border-width: 6px; box-shadow: 0 0 0 6px var(--flag-blue); }
  .host__name { font-size: 30px; margin-top: 16px; }
  /* the shelf the cassettes stand on */
  .tapes:not(.tapes--one) { background: linear-gradient(#2a2f3b, #2a2f3b) left bottom / 100% 5px no-repeat; }
  .tape { padding: 8px 8px 0; }
  .tape__label { margin: 8px -8px 0; }
  .tape__title { font-size: 20px; }
  .tape__play { width: 54px; height: 38px; }
  .more-row { margin: 18px 0 44px; }

  .shelf-bar { display: flex; align-items: center; gap: 14px; margin: 12px 0 clamp(40px, 11vw, 56px); }
  .shelf-bar[hidden] { display: none; }
  .shelf-count { flex: none; font: 800 15px/1 var(--dot); letter-spacing: .06em; color: var(--led); text-shadow: 0 0 6px rgba(255, 106, 58, .55); min-width: 6.2ch; }
  .shelf-track { position: relative; flex: 1; height: 4px; background: rgba(235, 235, 230, .16); overflow: hidden; }
  .shelf-track span { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 30%); transform: translateX(var(--x, 0)); background: var(--paper); transition: transform .12s linear; }
  .shelf-hint { flex: none; font: 800 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: opacity .3s ease; }
  .shelf-bar.is-moved .shelf-hint { opacity: 0; }
  .paper .shelf-count { color: var(--flag-red); text-shadow: none; }
  .paper .shelf-track { background: rgba(13, 13, 15, .14); }
  .paper .shelf-track span { background: var(--ink); }
  .founders + .shelf-bar { margin-bottom: 0; }

  /* ---------- inner pages ---------- */
  .vhead { padding-block: calc(var(--bar-h) + 32px) 30px; }
  .sec { padding-block: 64px; }
  .sec-title { font-size: clamp(54px, 16vw, 72px); margin-bottom: 24px; }
  .sec-title--md { font-size: clamp(38px, 11vw, 48px); margin-bottom: 18px; }
  .prose { line-height: 1.62; }

  .crumb a { padding-block: 11px; }
  .topics li { font-size: 19px; }                      /* large type keeps white on flag blue legible */
  .sig-modes label { min-height: 44px; }
  .sig-clear { padding: 12px 4px; }

  /* About: each founder opens like a profile, photo beside the name */
  .bio { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; column-gap: 16px; row-gap: 0; padding-block: 30px 34px; }
  .bio > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .bio .shot { position: static; border-width: 6px; }
  .bio > .prose { display: contents; }
  .bio .bio-name { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(34px, 10.6vw, 46px); margin: 0 0 8px; overflow-wrap: anywhere; }
  .bio .role { grid-column: 2; grid-row: 2; margin: 0; font-size: 19px; }
  .bio .lead, .bio details.more { grid-column: 1 / -1; }
  .bio .lead { margin: 22px 0 8px; font-size: 18px; }

  /* Media: a newsstand you can take in at a glance; tap a clipping to read it */
  .stand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .stand__hint { grid-column: 1 / -1; }
  .stand__hint p { font-size: 30px; }
  .stand { align-items: start; }
  .stand__clip img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; box-shadow: 5px 5px 0 rgba(13, 13, 15, .85); }
  .stand__clip::before { width: 52px; height: 15px; top: -7px; }
  .stand__logo a { padding: 10px 12px; }

  /* photo walls: three across in even squares, like the camera roll; tap one for the whole picture */
  .wall, .wall--all { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 5px; }
  .wall figure, .wall figure.t, .wall figure.w { grid-row: auto; grid-column: auto; aspect-ratio: 1; border-width: 3px; }

  .wrap.two + .wrap > .kicker-h:first-child { margin-top: 36px; }   /* clear of the card's shadow above */

  /* Camp Out: the recap as a contact sheet */
  .recap { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .recap img { border-width: 3px !important; }

  /* forms: cards that fit the screen with their shadow */
  .form-card { padding: 22px 18px; box-shadow: 7px 7px 0 var(--ink); margin-right: 7px; }
  .package { box-shadow: 7px 7px 0 var(--flag-red); margin-right: 7px; }
  .resolution { box-shadow: 7px 7px 0 var(--ink); margin-right: 7px; padding: 22px 18px; }
  .clause { padding-left: 46px; }

  /* the album keeps playing in a bar along the bottom */
  .nowplaying { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); max-width: none; box-shadow: 0 0 0 3px var(--ink), 0 -6px 24px rgba(0, 0, 0, .45); border: 0; }

  /* ---------- footer: everything in reach, credits folded away ---------- */
  .foot-pano { height: 132px; }
  .foot-grid { gap: 28px; padding-block: 26px 26px; }
  .foot-logo img { width: 116px; }
  .foot .foot-nav { columns: 2; column-gap: 18px; }
  .foot-nav li { margin: 0; }
  .foot .foot-nav a { display: block; padding: 9px 0; font-size: 21px; }
  .foot .socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .foot .social { display: block; text-align: center; padding: 13px 10px 11px; }
  .fine { padding-block: 16px calc(30px + env(safe-area-inset-bottom, 0px)); }
}

/* the photo credits: open on wide screens, a fold-out on phones */
.credits > summary { display: none; }
@media (max-width: 699px) {
  .credits > summary { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; cursor: pointer; list-style: none; font: 800 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .credits > summary::-webkit-details-marker { display: none; }
  .credits > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; font: 900 17px/1 var(--display); }
  .credits[open] > summary::before { content: "\2212"; }
}

/* sections and flyers settle in as they arrive, where the browser can tie that to the scroll */
@supports (animation-timeline: view()) {
  @media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
    .poster, .proj, .program, .bio, .past__item, .wall figure, .stand > li, .story-photo, .album__cover, .ch-flyer, .up-flyer, .camp-flyer {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 150px;
    }
  }
}
@keyframes settle { from { opacity: 0; transform: translateY(26px); } }