/* ==========================================================================
   Reimagining the Harlem River
   Tokens -> base -> layout -> components -> sections -> dialogs -> motion
   ========================================================================== */


/* Fonts live in css/fonts.css (embedded). */

/* ---------- Tokens ---------- */
:root {
  --navy-950: #050f18;
  --navy-900: #07182a;
  --navy-800: #0b2540;
  --navy-700: #123656;
  --deep-teal: #082a33;
  --river-300: #6bb4dc;
  --river-500: #2f7fb0;
  --river-700: #1f628c;
  --teal-300: #7cc4bd;
  --teal-500: #3e8e8c;
  --teal-700: #2b6b6a;
  --moss-300: #a3c79a;
  --moss-600: #5c8a58;
  --paper: #f6f3ee;
  --paper-2: #ece7de;
  --ink: #0c1b2a;
  --ink-2: #3d4e5e;
  --white-warm: #f3f0ea;

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --wave-h: clamp(40px, 6vw, 96px);
  --ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);
  --radius: 10px;
}

.theme-dark, .theme-abyss, .theme-deep {
  --bg: var(--navy-900);
  --bg-2: var(--navy-800);
  --fg: var(--white-warm);
  --muted: #b9cbd9;
  --line: rgba(243, 240, 234, 0.16);
  --accent: var(--river-300);
  --accent-2: var(--teal-300);
  --card: rgba(243, 240, 234, 0.05);
  --focus: var(--river-300);
}
.theme-abyss { --bg: var(--navy-950); --bg-2: #0a1c2e; }
.theme-deep { --bg: var(--deep-teal); --bg-2: #0c3540; --accent: var(--teal-300); --accent-2: var(--river-300); }
.theme-light {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --muted: var(--ink-2);
  --line: rgba(12, 27, 42, 0.16);
  --accent: var(--river-700);
  --accent-2: var(--teal-700);
  --card: #ffffff;
  --focus: var(--river-700);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--navy-950);
  color: var(--white-warm);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
[hidden] { display: none !important; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus, var(--river-300)); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--river-300); color: var(--navy-950); }

.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-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1.25rem; background: var(--white-warm); color: var(--navy-950); border-radius: 8px; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 1rem; }
.noscript { position: fixed; inset: auto 1rem 1rem; z-index: 100; padding: 1rem; background: #fff; color: #000; border-radius: 8px; }

.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Sections and wave transitions ---------- */
.section { position: relative; padding-block: clamp(5rem, 10vw, 9rem); background: var(--bg); color: var(--fg); }
.section--stage { padding-bottom: clamp(4rem, 8vw, 7rem); }

.wave { position: absolute; left: 0; right: 0; top: 0; height: var(--wave-h); transform: translateY(-99%); overflow: hidden; pointer-events: none; z-index: 2; color: var(--bg); }
.wave svg { position: absolute; left: 0; bottom: -1px; width: 200%; max-width: none; height: 100%; fill: currentColor; animation: drift 24s linear infinite; }
.wave svg + svg { height: 78%; opacity: 0.4; animation-duration: 38s; animation-direction: reverse; }
@keyframes drift { to { transform: translateX(-50%); } }

.section-head { max-width: 48rem; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.section-head h2 { font-size: clamp(2.25rem, 5.4vw, 4.4rem); letter-spacing: -0.01em; }
.section-head p { margin-top: 1.1rem; max-width: 58ch; font-size: 1.2rem; color: var(--muted); }
.subhead { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: clamp(3rem, 6vw, 5rem) 0 1.5rem; }
.lede { font-size: 1.2rem; max-width: 60ch; }

.tba { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 600 0.75rem/1.6 var(--font-body); font-style: normal; vertical-align: 0.08em; white-space: nowrap; }
.is-placeholder { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.1rem; padding: 0.7rem 1.5rem; border: 1.5px solid transparent; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn--primary { background: var(--river-300); color: var(--navy-950); }
.btn--primary:hover { background: #93cbea; }
.btn--ghost { border-color: rgba(243, 240, 234, 0.55); color: var(--white-warm); }
.btn--ghost:hover { background: rgba(243, 240, 234, 0.12); border-color: var(--white-warm); }
.btn--quiet { border-color: var(--line); color: var(--fg); background: transparent; }
.btn--quiet:hover { border-color: var(--accent); }
.icon-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, opacity 0.2s; }
.icon-btn:hover:not(:disabled) { background: rgba(243, 240, 234, 0.12); border-color: currentColor; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Navigation ---------- */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color 0.3s, box-shadow 0.3s; color: var(--white-warm); }
.site-nav[data-solid="true"], .site-nav[data-open="true"] { background: rgba(7, 24, 42, 0.95); box-shadow: 0 1px 0 rgba(243, 240, 234, 0.1); }
.site-nav__inner { width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-size: 1.2rem; }
.brand__mark { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--river-300); stroke-width: 2; stroke-linecap: round; }
.site-menu ul { display: flex; align-items: center; gap: 0.25rem; }
.site-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.8rem; font-weight: 500; font-size: 0.97rem; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.site-menu a:hover { color: var(--river-300); }
.site-menu a[aria-current="true"] { border-bottom-color: var(--river-300); color: #fff; }
.nav-toggle { display: none; width: 3rem; height: 3rem; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

@media (max-width: 899px) {
  .nav-toggle { display: grid; }
  .site-menu { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 0.5rem var(--gutter) 1.5rem; background: rgba(7, 24, 42, 0.98); box-shadow: 0 1px 0 rgba(243, 240, 234, 0.1); }
  .site-nav[data-open="true"] .site-menu { display: block; }
  .site-menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-menu a { width: 100%; min-height: 52px; font-size: 1.1rem; border-bottom: 1px solid rgba(243, 240, 234, 0.1); }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: var(--navy-900); color: var(--white-warm); }
.hero__fallback { position: absolute; inset: 0; z-index: -5; background: radial-gradient(110% 75% at 72% 8%, #1d6288 0%, transparent 62%), radial-gradient(80% 60% at 10% 60%, rgba(62, 142, 140, 0.35), transparent 70%), linear-gradient(180deg, #0f3d5e 0%, #0a2b46 48%, #07182a 100%); }
.hero__media { position: absolute; inset: -3% 0 0; z-index: -4; will-change: transform; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media img { animation: kenburns 36s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero__shimmer { position: absolute; inset: -20%; z-index: -3; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.6; background: radial-gradient(38% 28% at 20% 30%, rgba(255, 255, 255, 0.38), transparent 70%), radial-gradient(34% 26% at 76% 56%, rgba(155, 214, 235, 0.42), transparent 70%); animation: shimmer 28s ease-in-out infinite alternate; }
@keyframes shimmer { to { transform: translate3d(7%, 4%, 0) scale(1.1); } }
.hero__scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(5, 15, 24, 0.62) 0%, rgba(5, 15, 24, 0.12) 28%, rgba(5, 15, 24, 0.5) 62%, rgba(5, 15, 24, 0.92) 100%); }
.hero__inner { padding-block: 8rem calc(var(--wave-h) + 7.5rem); }
.hero__title { font-size: clamp(2.8rem, 8.2vw, 7.6rem); line-height: 0.97; letter-spacing: -0.02em; max-width: 15ch; text-shadow: 0 2px 40px rgba(5, 15, 24, 0.4); }
.hero__sub { margin-top: clamp(1.25rem, 3vw, 2rem); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 500; max-width: 34ch; text-wrap: balance; color: #fff; }
.hero__intro { margin-top: 1.25rem; max-width: 52ch; color: #dfe9f0; font-size: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--wave-h) + 0.6rem); transform: translateX(-50%); display: grid; justify-items: center; gap: 0.45rem; min-width: 44px; min-height: 44px; color: var(--white-warm); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.scroll-cue__track { position: relative; width: 2px; height: 52px; overflow: hidden; border-radius: 2px; background: rgba(243, 240, 234, 0.28); }
.scroll-cue__drop { position: absolute; left: 0; top: -14px; width: 2px; height: 14px; border-radius: 2px; background: var(--river-300); animation: cue 2.3s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.hero__pause { position: absolute; z-index: 3; right: var(--gutter); bottom: calc(var(--wave-h) + 0.6rem); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(243, 240, 234, 0.5); border-radius: 50%; background: rgba(5, 15, 24, 0.35); color: var(--white-warm); cursor: pointer; }
.hero__pause:hover { background: rgba(5, 15, 24, 0.6); }
.hero__pause .i-play { display: none; }
.hero__pause[data-paused="true"] .i-play { display: inline; }
.hero__pause[data-paused="true"] .i-pause { display: none; }

/* Orchestrated entrance: the title rises out of the waterline once */
.js .hero__title { animation: rise 1.15s var(--ease-out) backwards; }
.js .hero__sub { animation: settle 0.9s 0.55s var(--ease-out) backwards; }
.js .hero__intro, .js .hero__actions { animation: settle 0.9s 0.8s var(--ease-out) backwards; }
.js .scroll-cue { animation: settle-x 1s 1.4s ease backwards; }
@keyframes rise { from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); } to { clip-path: inset(-0.1em -0.1em -0.2em -0.1em); transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle-x { from { opacity: 0; } to { opacity: 1; } }

/* Section headings share the same waterline reveal, once when scrolled into view */
.js .reveal:not(.is-in) { clip-path: inset(0 0 100% 0); }
.js .reveal.is-in { animation: rise 1s var(--ease-out) backwards; }
.js .fade-in:not(.is-in) { opacity: 0; }
.js .fade-in.is-in { animation: settle-x 0.7s ease backwards; animation-delay: calc(var(--d, 0) * 45ms); }

/* ---------- Introduction ---------- */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.about__question { font-size: clamp(1.9rem, 3.9vw, 3.4rem); line-height: 1.12; letter-spacing: -0.01em; }
.about__body > p + p { margin-top: 1rem; }
.about__body h3 { margin: 2.25rem 0 1rem; font-size: 1.45rem; }
.droplets li { position: relative; padding: 0.35rem 0 0.35rem 1.7rem; }
.droplets li::before { content: ""; position: absolute; left: 0.1rem; top: 0.82rem; width: 0.7rem; height: 0.95rem; background: var(--accent); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform: rotate(180deg) scale(0.9); }
.toc { margin-top: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 1.25rem; min-height: 4.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.toc__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; }
.toc__blurb { color: var(--muted); }
.toc__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--line); border-radius: 50%; transition: transform 0.25s var(--ease-out), background-color 0.2s, color 0.2s, border-color 0.2s; }
.toc a:hover .toc__go { transform: translateX(6px); background: var(--accent); border-color: var(--accent); color: var(--bg); }
.toc a:hover .toc__title { color: var(--accent); }

/* ---------- The Event ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.facts dd { margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; }

.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 240px); grid-auto-flow: dense; gap: 0.75rem; }
.mosaic--art { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 22vw, 300px); }
.tile { position: relative; isolation: isolate; overflow: hidden; padding: 0; border: 0; border-radius: 8px; background: var(--bg-2); color: #fff; text-align: left; cursor: pointer; }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__label { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; padding: 2.75rem 0.95rem 0.85rem; background: linear-gradient(to top, rgba(5, 15, 24, 0.88), transparent); font-weight: 600; font-size: 0.97rem; line-height: 1.3; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }
.tile:hover .tile__label, .tile:focus-visible .tile__label, .tile--empty .tile__label { opacity: 1; transform: none; }
@media (hover: none) { .tile__label { opacity: 1; transform: none; } }
.tile .tba { margin-left: 0; background: rgba(5, 15, 24, 0.6); color: var(--river-300); }
.tile__icon { position: absolute; left: 50%; top: 42%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); color: rgba(243, 240, 234, 0.7); stroke-width: 1.4; }

/* Placeholder art: shared by gallery tiles, cards and viewers */
.ph { position: absolute; inset: 0; background: var(--ph-bg, linear-gradient(160deg, #1c5a82, #0b2e4a 70%)); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.2' stroke-width='1.4'%3E%3Cpath d='M0 120c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12'/%3E%3Cpath d='M0 150c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12'/%3E%3Cpath d='M0 180c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12'/%3E%3Cpath d='M0 210c40 0 40-12 80-12s40 12 80 12 40-12 80-12 40 12 80 12 40-12 80-12'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat; }
.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 15%, rgba(255, 255, 255, 0.16), transparent 70%); }
.ph--0 { --ph-bg: linear-gradient(160deg, #20648f, #0b2e4a 72%); }
.ph--1 { --ph-bg: linear-gradient(160deg, #2c7f7d, #0c3b45 72%); }
.ph--2 { --ph-bg: linear-gradient(160deg, #2d70a0, #103a58 55%, #2c6a5e); }
.ph--3 { --ph-bg: linear-gradient(160deg, #3d805f, #12413f 72%); }
.ph--4 { --ph-bg: linear-gradient(160deg, #285f8c, #0f3a52 50%, #357a72); }
.ph--5 { --ph-bg: linear-gradient(160deg, #346f78, #0a3140 72%); }

/* Tabs */
.tabs { display: flex; gap: 0.25rem; margin: 0 0 2rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { flex: none; min-height: 3rem; margin-bottom: -1px; padding: 0.8rem 1.15rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 600; font-size: 1.05rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabpanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 5vw, 4rem); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.note__kind { margin-bottom: 0.35rem; color: var(--accent); font-size: 0.95rem; font-weight: 600; }
.note__source { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.75rem; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 0.97rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.note__source:hover { text-decoration-thickness: 2px; }
.tabpanel[hidden] { display: none; }
.note { padding-top: 1.1rem; border-top: 2px solid var(--accent); }
.note h4 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.note p { color: var(--muted); white-space: pre-line; }
.note p:not(.is-placeholder) { color: var(--fg); }
.note__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.1rem; }
.note__media .tile { aspect-ratio: 3 / 4; }
/* Paragraph breaks (a blank line in content.js) show up as paragraph breaks. */
.theme__text, .qa__a, .about__body p, .lede { white-space: pre-line; }
/* "pretty" wrapping shortens the last few lines of a paragraph; plain wrapping keeps long answers even. */
.theme__text, .qa__a, .about__body p, .lede, .note p { text-wrap: wrap; }

/* Video */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.video__frame video, .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.video__facade { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer; background: #000 center / cover no-repeat; }
.video__play { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(243, 240, 234, 0.94); color: var(--navy-950); }
.video__play .icon { width: 1.9rem; height: 1.9rem; margin-left: 0.2rem; }
.video__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.9rem; padding: 1.5rem; text-align: center; }
.video__ph .video__play { position: relative; background: rgba(243, 240, 234, 0.16); color: var(--white-warm); border: 1.5px solid rgba(243, 240, 234, 0.55); }
.video__ph p { position: relative; max-width: 28ch; font-weight: 500; color: #e5eef4; }
.video figcaption { margin-top: 0.8rem; }
.video__title { font-weight: 600; }
.video__text { color: var(--muted); font-size: 0.97rem; }

/* ---------- Learning stations: cards floating down the river ---------- */
.stations__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.stage { --card-w: clamp(250px, 34vw, 500px); --card-top: 34%; position: relative; height: clamp(520px, 76vh, 720px); margin-top: 0.5rem; perspective: 1800px; perspective-origin: 50% 36%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage.is-dragging { cursor: grabbing; }
.stage__glow { position: absolute; left: 50%; top: var(--card-top); width: min(1100px, 90%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(62, 142, 140, 0.3), transparent); filter: blur(12px); pointer-events: none; }

/* The river: a soft surface with wave lines drifting at different speeds, glints, rings under the featured card and autumn leaves. */
.stage__water { position: absolute; left: 0; right: 0; top: 60%; bottom: 0; overflow: hidden; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 86, 108, 0) 0, rgba(20, 86, 108, 0.5) 14%, rgba(8, 40, 58, 0.8) 62%, rgba(5, 18, 30, 0.9) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); }
.stage__wave { position: absolute; left: 0; width: calc(100% + var(--tile)); background-repeat: repeat-x; animation: stage-drift linear infinite; }
.stage__wave--far { --tile: 160px; top: 9%; height: 20px; background-size: 160px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='20' viewBox='0 0 160 20'%3E%3Cpath d='M0 10 Q40 0 80 10 T160 10' fill='none' stroke='%23bfe6f2' stroke-width='1.4'/%3E%3C/svg%3E"); opacity: 0.2; animation-duration: 40s; }
.stage__wave--mid { --tile: 280px; top: 30%; height: 28px; background-size: 280px 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 280 28'%3E%3Cpath d='M0 14 Q70 2 140 14 T280 14' fill='none' stroke='%23bfe6f2' stroke-width='1.6'/%3E%3C/svg%3E"); opacity: 0.28; animation-duration: 28s; animation-direction: reverse; }
.stage__wave--near { --tile: 460px; top: 56%; height: 40px; background-size: 460px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='40' viewBox='0 0 460 40'%3E%3Cpath d='M0 20 Q115 2 230 20 T460 20' fill='none' stroke='%23bfe6f2' stroke-width='2'/%3E%3C/svg%3E"); opacity: 0.34; animation-duration: 20s; }
@keyframes stage-drift { to { transform: translateX(calc(var(--tile) * -1)); } }
.stage__glint { position: absolute; width: 38px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(220, 244, 252, 0.9), transparent); opacity: 0; animation: stage-glint 7s ease-in-out infinite; }
@keyframes stage-glint { 0%, 100% { opacity: 0; transform: scaleX(0.6); } 50% { opacity: 0.55; transform: scaleX(1.4); } }
.stage__ripple { position: absolute; left: 50%; top: 12%; width: calc(var(--card-w) * 0.9); aspect-ratio: 6 / 1; margin-left: calc(var(--card-w) * -0.45); border: 2px solid rgba(190, 232, 246, 0.5); border-radius: 50%; opacity: 0; transform: scale(0.35); animation: stage-ripple 6s ease-out infinite; }
.stage__ripple:nth-last-child(2) { animation-delay: -2s; }
.stage__ripple:nth-last-child(1) { animation-delay: -4s; }
@keyframes stage-ripple { 0% { opacity: 0; transform: scale(0.35); } 15% { opacity: 0.55; } 100% { opacity: 0; transform: scale(1.25); } }
.stage__leaf { position: absolute; left: 0; width: 20px; height: 10px; border-radius: 80% 0 80% 0; background: var(--leaf, #c9772f); opacity: 0.85; animation: stage-leaf linear infinite; }
@keyframes stage-leaf { from { transform: translateX(-60px) rotate(8deg); } 50% { transform: translateX(50vw) rotate(-10deg); } to { transform: translateX(calc(100vw + 60px)) rotate(12deg); } }

/* Each station is an arched window onto the river with its own rippling waterline and a reflection beneath. */
.ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.stn { position: absolute; left: 50%; top: var(--card-top); width: var(--card-w); aspect-ratio: 5 / 4; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; will-change: transform, opacity; transform: translate3d(-50%, -50%, 0); }
.stn:focus-visible { outline: none; }
.stn:focus-visible .stn__face { outline: 3px solid var(--focus, var(--river-300)); outline-offset: 5px; }
.stn__body { position: absolute; inset: 0; animation: stn-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.9s); }
@keyframes stn-bob { 0%, 100% { transform: translateY(0) rotate(-0.3deg); } 50% { transform: translateY(-7px) rotate(0.35deg); } }
.stn__face { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 20px 20px / 27% 27% 20px 20px; background: var(--navy-800); box-shadow: 0 0 0 1px rgba(170, 220, 238, 0.2), 0 26px 46px -28px rgba(0, 0, 0, 0.75); }
.stn__face::after { content: ""; position: absolute; inset: 0; background: var(--navy-950); opacity: var(--dim, 0); pointer-events: none; }
.stn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stn__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 15, 24, 0.55), rgba(5, 15, 24, 0) 55%); }
.stn__wave { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; overflow: hidden; pointer-events: none; background: linear-gradient(rgba(10, 62, 86, 0.62), rgba(5, 26, 40, 0.92)) 0 40px / 100% calc(100% - 40px) no-repeat; }
.stn__wave::before, .stn__wave::after { content: ""; position: absolute; left: 0; top: 0; width: calc(100% + var(--tile)); height: 40px; background-repeat: repeat-x; animation: stage-drift linear infinite; }
.stn__wave::before { --tile: 160px; background-size: 160px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 12 Q40 4 80 12 T160 12' fill='none' stroke='%23dff4fb' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E"); animation-duration: 9s; animation-direction: reverse; }
.stn__wave::after { --tile: 200px; background-size: 200px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 8 Q50 0 100 8 T200 8 V40 H0Z' fill='%230a3e56' fill-opacity='.62'/%3E%3Cpath d='M0 8 Q50 0 100 8 T200 8' fill='none' stroke='%23c4e9f5' stroke-opacity='.9' stroke-width='1.6'/%3E%3C/svg%3E"); animation-duration: 6s; }
.stn__title { position: absolute; left: 7%; bottom: 1.15rem; max-width: 66%; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.1; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.stn__go { position: absolute; right: 7%; bottom: 1.05rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--white-warm); color: var(--navy-950); }
.stn__go::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(220, 244, 252, 0.75); opacity: 0; }
.stn[aria-current] .stn__go::after { animation: stn-pulse 2.6s ease-out infinite; }
@keyframes stn-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.stn__tba { position: absolute; left: 1.35rem; top: 1.2rem; z-index: 1; }
.stn__reflect { position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 40%; overflow: hidden; transform: scaleY(-1); opacity: 0.38; filter: blur(2px) saturate(0.85); pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000, transparent 92%); mask-image: linear-gradient(to top, #000, transparent 92%); }
.stn__reflect::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(6, 28, 42, 0.7) 7px 10px); }
.stn__mirror { position: absolute; left: 0; right: 0; bottom: 0; height: 250%; }

.stage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.pager { display: inline-flex; align-items: center; gap: 0.75rem; }
.pager__count { min-width: 6rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }
.stage-hint { color: var(--muted); font-size: 0.95rem; max-width: 22rem; text-align: right; }

/* ---------- Voices ---------- */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.voice { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.voice__wave { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; padding-inline: 0.25rem; }
.voice__wave span { flex: none; width: 3px; height: var(--h); border-radius: 2px; background: var(--accent); opacity: 0.55; }
.voice h3 { font-size: 1.6rem; }
.voice__role { margin-top: 0.15rem; color: var(--muted); }
.voice blockquote { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; }
.voice blockquote.is-placeholder { font-size: 1.1rem; font-family: var(--font-body); }
.voice audio { width: 100%; }
/* The interviews are phone videos (tall and narrow), so give them a set height and let the picture fit inside it. */
.voice video { display: block; width: 100%; height: clamp(380px, 62vh, 560px); object-fit: contain; border-radius: 10px; background: #000; }
.player-ph { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; padding: 0.6rem 1.1rem 0.6rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.95rem; }
.player-ph__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.voice details { margin-top: 0.25rem; color: var(--muted); font-size: 0.97rem; }
.voice details p { white-space: pre-line; }
.voice summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--fg); }

/* ---------- Themes ---------- */
.themes { border-top: 1px solid var(--line); }
.theme { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(10rem, 3fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); padding-block: clamp(1.75rem, 4vw, 2.75rem); border-bottom: 1px solid var(--line); }
.theme h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; }
.theme__wave { width: 4.5rem; height: 1.6rem; margin-bottom: 1rem; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.theme__text { max-width: 58ch; }
.theme__groups-label { margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.theme__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-height: 2.75rem; padding: 0.3rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); font-weight: 600; font-size: 0.97rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--static { display: inline-flex; align-items: center; cursor: default; }

/* ---------- Art & Poetry ---------- */
.tile--poem { padding: 1.5rem 1.4rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(165deg, #1b4b52, #0e2f3d 70%); }
.tile--poem .tile__poem { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; }
.tile--poem .tile__poem.is-placeholder { color: #bcd2dc; }
.tile--poem .tile__by { margin-top: 1rem; color: var(--moss-300); font-weight: 600; font-size: 0.95rem; }
.tile--poem .tile__by .tba { margin-left: 0.4rem; }

/* ---------- Reflections and team ---------- */
.reflect { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.reflect .section-head { margin-bottom: 0; position: sticky; top: 6rem; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; padding: 1.15rem 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.22; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { transition: transform 0.25s var(--ease-out); }
.qa details[open] summary .icon { transform: rotate(180deg); }
.qa__a { max-width: 62ch; padding: 0 0 1.6rem; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2.25rem 1.5rem; }
.person__photo { position: relative; width: 6.5rem; height: 6.5rem; margin-bottom: 1rem; overflow: hidden; border-radius: 50%; background: var(--bg-2); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo .icon { position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; transform: translate(-50%, -50%); color: rgba(243, 240, 234, 0.8); }
.person h4 { font-size: 1.3rem; }
.person p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Footer ---------- */
.footer { padding-block: clamp(4.5rem, 9vw, 7rem) 3rem; }
.footer__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.08; max-width: 16ch; text-wrap: balance; }
.footer__thanks { margin-top: 1.25rem; max-width: 32rem; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; text-wrap: pretty; }
.facts .tba { margin-left: 0; }
.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after { animation-play-state: paused !important; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.footer__grid dt { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.footer__grid dd { margin-top: 0.2rem; }
.footer__top { margin-top: 3rem; }

/* ---------- Dialogs ---------- */
dialog { padding: 0; border: 0; color: inherit; background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(3, 10, 18, 0.84); }
dialog[open]::backdrop { animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

.sheet { width: min(1120px, calc(100vw - 1.5rem)); border-radius: 18px; overflow: hidden; }
.sheet[open] { display: block; animation: pop 0.32s var(--ease-out); }
.sheet__inner { max-height: min(94vh, 960px); max-height: min(94dvh, 960px); overflow-y: auto; overscroll-behavior: contain; background: var(--navy-800); color: var(--white-warm); }
.sheet__head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.35rem clamp(1.25rem, 3vw, 2.5rem); background: var(--navy-800); border-bottom: 1px solid var(--line); }
.sheet__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.sheet__body { padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sheet__body h3 { font-size: 1.6rem; margin-bottom: 1.1rem; }
.station-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.station-gallery .tile { aspect-ratio: 4 / 3; }
.sheet__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sheet__foot .btn { min-width: 0; }

.viewer { width: 100vw; height: 100vh; height: 100dvh; background: #040b13; color: var(--white-warm); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: fade 0.25s ease; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem clamp(1rem, 3vw, 2rem); }
.viewer__count { font-variant-numeric: tabular-nums; color: var(--muted, #b9cbd9); font-weight: 500; }
.viewer__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding-inline: clamp(0.5rem, 2vw, 1.5rem); min-height: 0; }
.viewer__stage { display: grid; place-items: center; min-height: 0; min-width: 0; overflow: hidden; touch-action: none; }
.viewer__stage img { transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.viewer__stage img.is-animated { transition: transform 0.22s var(--ease-out); }
.viewer__stage.is-zoomed img { cursor: grab; }
.viewer__stage.is-panning img { cursor: grabbing; }
.viewer__poem { touch-action: pan-y; }
.viewer__tools { display: flex; align-items: center; gap: 0.5rem; }
.viewer__tools[hidden] { display: none; }
.viewer__reset { min-height: 3rem; padding: 0.4rem 1rem; }
.viewer__count { margin-right: auto; }
.viewer__stage img { max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); object-fit: contain; border-radius: 4px; }
.viewer__ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 1.1rem; width: min(900px, 100%); aspect-ratio: 16 / 10; max-height: calc(100dvh - 12rem); padding: 2rem; overflow: hidden; border-radius: 14px; text-align: center; }
.viewer__ph > :not(.ph) { position: relative; }
.viewer__ph .icon { width: 3rem; height: 3rem; color: rgba(243, 240, 234, 0.85); stroke-width: 1.4; }
.viewer__ph p { max-width: 24ch; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.2; }
.viewer__poem { max-width: 38rem; max-height: calc(100dvh - 12rem); overflow: auto; padding: 1rem 1.5rem; font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.55; white-space: pre-line; }
.viewer__nav[hidden] { display: none; }
.viewer__caption { max-width: 60rem; margin-inline: auto; padding: 0.75rem clamp(1rem, 3vw, 2rem) 1.5rem; text-align: center; }
.viewer__title { font-family: var(--font-display); font-size: 1.4rem; }
.viewer__text { margin-top: 0.35rem; color: #b9cbd9; }
.viewer__credit { margin-top: 0.35rem; color: #8fa6b8; font-size: 0.9rem; }
.viewer .tba { background: rgba(107, 180, 220, 0.18); color: var(--river-300); }

/* ---------- Water effects (js/fx.js) ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.fx-row, .fx-spot { position: absolute; --fx-hull: #0b2540; --fx-a: #2f7fb0; --fx-b: #3e8e8c; --fx-water: #2f7fb0; --fx-drop: #2f7fb0; }
.fx-on-dark { --fx-hull: #f3f0ea; --fx-a: #6bb4dc; --fx-b: #7cc4bd; --fx-water: #6bb4dc; --fx-drop: #6bb4dc; }
.fx-row { overflow: hidden; }
.fx-spot { width: 0; height: 0; }
.fx-water { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; overflow: hidden; }
.fx-water svg { position: absolute; left: 0; bottom: 0; max-width: none; }
.fx-water-body { fill: var(--fx-water); opacity: 0.22; }
.fx-water-line { fill: none; stroke: var(--fx-water); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.fx-boat { position: absolute; left: 0; bottom: 9px; will-change: transform; }
.fx-boat svg { display: block; height: auto; max-width: none; overflow: visible; }
.fx-boat--sail svg { width: 54px; }
.fx-boat--canoe svg { width: 70px; }
.fx-bob { transform-origin: 50% 100%; transform-box: fill-box; }
.fx-hull { fill: var(--fx-hull); }
.fx-a { fill: var(--fx-a); }
.fx-b { fill: var(--fx-b); }
.fx-oar { fill: none; stroke: var(--fx-hull); stroke-width: 1.8; stroke-linecap: round; }
.fx-band { position: absolute; left: 0; bottom: 0; height: 82%; transform-origin: 50% 100%; will-change: transform; }
.fx-band svg { display: block; width: 100%; height: 100%; max-width: none; }
.fx-swell { fill: var(--fx-water); opacity: 0.34; }
.fx-foam { fill: none; stroke: var(--fx-water); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fx-ring { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border: 2px solid var(--fx-drop); border-radius: 50%; }
.fx-ring--small { width: 28px; height: 28px; }
.fx-drop { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.fx-drop svg { display: block; width: 100%; height: 100%; max-width: none; fill: var(--fx-drop); }

.fx-small .fx-boat { bottom: 6px; }
.fx-small .fx-boat--sail svg { width: 38px; }
.fx-small .fx-boat--canoe svg { width: 50px; }

/* ---------- A canoe in the nav bar shows how far down the page you are ---------- */
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; --fx-hull: #f3f0ea; --fx-a: #6bb4dc; --fx-b: #7cc4bd; }
.nav-progress__line { position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(243, 240, 234, 0.2); }
.nav-progress__trail { position: absolute; left: 0; bottom: 3px; width: 100%; height: 2px; border-radius: 2px; background: var(--river-300); transform: scaleX(0); transform-origin: 0 50%; }
.nav-progress__boat { position: absolute; left: 0; bottom: 3px; width: 34px; will-change: transform; }
.nav-progress__boat svg { display: block; width: 34px; height: auto; max-width: none; overflow: visible; transition: transform 0.25s ease; }
.nav-progress__boat.is-back svg { transform: scaleX(-1); }
.nav-progress .fx-bob { animation: nav-bob 1.7s ease-in-out infinite alternate; }
@keyframes nav-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-1.5px) rotate(2deg); } }

/* ---------- What would the river say? ---------- */
.river { --rw: 1000px; position: relative; isolation: isolate; height: clamp(240px, 34vw, 330px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #0c2f42 0%, #164f63 52%, #0d3646 100%); }
.river__sky { position: absolute; inset: 0; background:
  radial-gradient(40% 55% at 82% 18%, rgba(243, 240, 234, 0.22), transparent 70%),
  radial-gradient(2px 2px at 12% 22%, rgba(243, 240, 234, 0.7), transparent 60%),
  radial-gradient(2px 2px at 32% 12%, rgba(243, 240, 234, 0.5), transparent 60%),
  radial-gradient(1.5px 1.5px at 58% 26%, rgba(243, 240, 234, 0.6), transparent 60%),
  radial-gradient(1.5px 1.5px at 70% 10%, rgba(243, 240, 234, 0.5), transparent 60%); }
.river__waves { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.river__waves svg { display: block; width: 200%; max-width: none; height: 100%; animation: drift 26s linear infinite; }
.river__waves path { fill: currentColor; }
.river__waves--back { height: 62%; z-index: 1; color: rgba(62, 142, 140, 0.55); }
.river__waves--back svg { animation-duration: 38s; animation-direction: reverse; }
.river__waves--front { height: 40%; z-index: 3; color: rgba(11, 37, 64, 0.9); }
.river__bottles { position: absolute; inset: 0; z-index: 2; }

.bottle { position: absolute; left: 0; bottom: var(--y, 34%); width: calc(clamp(64px, 6.4vw, 100px) * var(--s, 1)); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; animation: float-by var(--dur, 60s) linear var(--delay, 0s) infinite; will-change: transform; }
.bottle svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); transition: filter 0.2s; }
.bottle:hover svg, .bottle:focus-visible svg { filter: drop-shadow(0 0 10px rgba(124, 196, 189, 0.95)); }
.bottle:hover, .bottle:focus-visible { animation-play-state: paused; }
.bottle__art { transform-box: fill-box; transform-origin: 50% 60%; animation: bob 3.4s ease-in-out infinite alternate; }
.b-glass { fill: rgba(190, 232, 236, 0.28); stroke: rgba(243, 240, 234, 0.85); stroke-width: 1.2; }
.b-cork { fill: #c9a27a; }
.b-paper { fill: #f3f0ea; }
.b-ink { fill: none; stroke: #2b6b6a; stroke-width: 1; stroke-linecap: round; opacity: 0.7; }
.bottle--yours { left: var(--x0, 0px); pointer-events: none; animation: send-off var(--dur, 16s) linear forwards; }
.bottle--yours .b-paper { fill: #7cc4bd; }
/* While a bottle is being read, the big one stands in for it and the little one waits where it is. */
.bottle.is-reading { visibility: hidden; animation-play-state: paused; }
.bottle--yours.is-reading { animation: none; }
@keyframes send-off { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--rw) - var(--x0, 0px) + 120px), 0, 0); } }
@keyframes float-by { from { transform: translate3d(-120px, 0, 0); } to { transform: translate3d(calc(var(--rw) + 120px), 0, 0); } }
@keyframes bob { from { transform: translateY(0) rotate(-9deg); } to { transform: translateY(-5px) rotate(7deg); } }
.river.is-paused .bottle:not(.bottle--yours), .river.is-paused .bottle__art, .river.is-paused .river__waves svg { animation-play-state: paused; }
.river.is-still .river__waves svg, .river.is-still .bottle__art { animation: none; }
.river.is-still .bottle { left: var(--pos, 10%); animation: none; transform: none; }
.river.is-still .bottle--yours { left: 8%; }

/* Zooming in to read a bottle */
.river__camera { position: absolute; inset: 0; isolation: isolate; will-change: transform, filter; }
.reader { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.reader[hidden] { display: none; }
.reader > * { grid-area: 1 / 1; }
.reader__bottle { width: min(94%, 680px); aspect-ratio: 66 / 28; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
.reader__bottle svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; }
.reader__paper { position: relative; width: min(66%, 460px); max-height: 82%; overflow: hidden; padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.1rem, 3vw, 2rem); border-radius: 6px; rotate: -1.5deg;
  background: #f6f1e6 repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.55em - 1px), rgba(31, 98, 140, 0.16) calc(1.55em - 1px), rgba(31, 98, 140, 0.16) 1.55em);
  background-position: 0 clamp(1rem, 2.4vw, 1.6rem); color: #10202e; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4); }
.reader__text { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.55; overflow-wrap: anywhere; }
.reader__from { margin-top: 0.7rem; color: #4a5b6a; font-size: 0.9rem; line-height: 1.4; }
.reader__hint { align-self: end; margin: 0 0 0.55rem; font-size: 0.85rem; color: rgba(243, 240, 234, 0.8); text-align: center; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }

.river__tools { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.river__pause[aria-pressed="true"] { background: var(--white-warm); color: var(--navy-950); border-color: var(--white-warm); }
.river__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: clamp(1.25rem, 3vw, 2rem); }
.bottle-form { display: grid; gap: 0.75rem; }
.bottle-form label { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.bottle-form textarea { width: 100%; min-height: 7rem; padding: 0.9rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: rgba(243, 240, 234, 0.06); color: var(--fg); font: inherit; resize: vertical; }
.bottle-form textarea::placeholder { color: var(--muted); opacity: 0.85; }
.bottle-form textarea[aria-invalid="true"] { border-color: #ffb4a4; }
.bottle-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.bottle-form__count { color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.bottle-form__error { min-height: 1.5em; color: #ffb4a4; font-weight: 600; }
.bottle-form__note { color: var(--muted); font-size: 0.93rem; }
.reading { min-height: 11rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.reading__idle { color: var(--muted); }
.reading__lead { margin-bottom: 0.35rem; color: var(--accent); font-weight: 600; }
.reading__quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
.reading__quote--yours { font-size: 1.2rem; color: var(--muted); }
.reading__from { margin-top: 0.6rem; color: var(--muted); font-size: 0.97rem; }
.reading__echo { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.reading > .reading__echo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reading__echo .btn { margin-top: 0.9rem; }

/* ---------- Art & Poetry title: a little river of its own ---------- */
.water-title { position: relative; display: inline-block; margin-bottom: 0.55em; padding-bottom: 0.2em; }
.water-title__text { background: linear-gradient(100deg, #f3f0ea 0%, #f3f0ea 16%, #a9d9f0 32%, #6bb4dc 45%, #7cc4bd 58%, #f3f0ea 74%, #f3f0ea 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 22px rgba(62, 142, 140, 0.4)); animation: water-flow 10s ease-in-out infinite alternate; }
@keyframes water-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* the reflection, rippled and fading out below the water line */
.water-title::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; left: 0; top: 100%; width: 100%; transform: scaleY(-1); opacity: 0.32; color: var(--river-300); white-space: nowrap; pointer-events: none; filter: url(#water-ripple); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%); }
.water-title__wave { position: absolute; left: 0; right: 0; bottom: -0.02em; height: 0.3em; overflow: hidden; pointer-events: none; }
.water-title__wave svg { position: absolute; left: 0; top: 0; width: 200%; max-width: none; height: 100%; fill: none; stroke-linecap: round; animation: drift 9s linear infinite; }
.water-title__wave svg.back { animation-duration: 14s; animation-direction: reverse; }
.water-title__wave .w1 { stroke: var(--river-300); stroke-width: 3; vector-effect: non-scaling-stroke; }
.water-title__wave .w2 { stroke: var(--teal-300); stroke-width: 2; opacity: 0.8; vector-effect: non-scaling-stroke; }
.water-title__bubble { position: absolute; left: var(--x); bottom: 0.15em; width: var(--s); height: var(--s); border: 1.5px solid rgba(155, 214, 235, 0.8); border-radius: 50%; opacity: 0; pointer-events: none; animation: bubble-up 5.5s ease-in infinite var(--d); }
@keyframes bubble-up { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(0.25em, -1.1em) scale(1.1); opacity: 0; } }
/* a wide tile (such as the last poem) takes a full row in three columns, but only one cell in two */
@media (max-width: 1000px) { .mosaic--art .tile--wide { grid-column: auto; } }

/* ---------- Before and after (inside a group's panel) ---------- */
.ba__question { margin-bottom: 1.25rem; font-family: var(--font-display); font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.2; }
.ba__asked { display: block; margin-bottom: 0.3rem; color: var(--muted); font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; }
.ba__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.ba__card { position: relative; isolation: isolate; margin: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.6rem) 3.6rem; overflow: hidden; border: 1px solid rgba(243, 240, 234, 0.16); border-radius: 16px; color: var(--white-warm); }
.ba__card--before { background: linear-gradient(180deg, #134d6d 0%, #1b6a8c 58%, #2b8ba5 100%); }
.ba__card--after { background: linear-gradient(180deg, #1f3a35 0%, #38573f 56%, #5d6a3e 100%); }
.ba__label { margin-bottom: 0.6rem; color: rgba(243, 240, 234, 0.82); font-size: 0.95rem; font-weight: 600; }
.ba__quote { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; overflow-wrap: anywhere; }
/* the water at the foot of each card: two waves sliding past each other */
.ba__water { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 2.8rem; overflow: hidden; pointer-events: none; }
.ba__water::before, .ba__water::after { content: ""; position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-size: 120px 100%; animation: drift 14s linear infinite; }
.ba__water::before { opacity: 0.55; animation-duration: 22s; animation-direction: reverse; }
.ba__card--before .ba__water::before, .ba__card--before .ba__water::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q30 4 60 18 T120 18 V40 H0Z' fill='%23d8f1fa' fill-opacity='.30'/%3E%3C/svg%3E"); }
.ba__card--after .ba__water::before, .ba__card--after .ba__water::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q30 4 60 18 T120 18 V40 H0Z' fill='%23161f14' fill-opacity='.42'/%3E%3C/svg%3E"); }
/* murky specks drifting up through the "after" water */
.ba__card--after::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
  background: radial-gradient(circle at 12% 74%, rgba(222, 214, 160, 0.3) 0 2px, transparent 3px), radial-gradient(circle at 34% 88%, rgba(222, 214, 160, 0.24) 0 3px, transparent 4px), radial-gradient(circle at 58% 70%, rgba(222, 214, 160, 0.28) 0 2px, transparent 3px), radial-gradient(circle at 78% 84%, rgba(222, 214, 160, 0.22) 0 3px, transparent 4px), radial-gradient(circle at 92% 66%, rgba(222, 214, 160, 0.26) 0 2px, transparent 3px);
  animation: specks 9s ease-in-out infinite alternate; }
@keyframes specks { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.ba__arrow { display: grid; place-items: center; align-self: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--line); border-radius: 50%; color: var(--accent); }
.ba__note { margin-top: 0.9rem; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 760px) {
  .ba__pair { grid-template-columns: minmax(0, 1fr); }
  .ba__arrow { justify-self: center; transform: rotate(90deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .about, .reflect, .theme { grid-template-columns: minmax(0, 1fr); }
  .reflect .section-head { position: static; margin-bottom: 1rem; }
  .voices { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .tabpanel, .notes-grid, .river__panel { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 24vw, 220px); }
  .mosaic--art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stage { --card-w: 72vw; height: clamp(380px, 54vh, 460px); }
  .videos { grid-template-columns: minmax(0, 1fr); }
  .toc a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; }
  .toc__blurb { grid-column: 1; grid-row: 2; }
  .toc__go { grid-row: 1 / span 2; grid-column: 2; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
  .station-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-hint { text-align: left; }
  .brand__text { font-size: 1.05rem; }
  .viewer__nav { position: absolute; bottom: 0.25rem; z-index: 2; }
  .viewer__nav--prev { left: 0.75rem; }
  .viewer__nav--next { right: 0.75rem; }
  .viewer__main { grid-template-columns: minmax(0, 1fr); }
  .viewer__caption { padding-bottom: 4.5rem; }
}

/* The site name is long, so it gets a little smaller on the narrowest phones to keep the menu button beside it. */
.brand__text { white-space: nowrap; }
@media (max-width: 420px) {
  .brand { gap: 0.5rem; }
  .brand__text { font-size: 0.95rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
  .hero__media img { animation: none; }
}