/* ============================================================
   Bruce Springsteen — The Roar and the Whisper
   Nebraska wilderness palette: near-black, high contrast, one rust accent.
   Hand-written CSS, no framework. Contrast ratios verified against #0d0d0d.
   ============================================================ */

:root {
  /* --- ground --------------------------------------------- */
  --void:   #0d0d0d;   /* page floor */
  --dust:   #161514;   /* cards, banded sections, faintly warm */
  --dust-2: #1c1a18;   /* raised surfaces */
  --line:   #2a2725;   /* rules and hairlines */

  /* --- text (ratios vs --void) --------------------------- */
  --ink:    #f2efe9;   /* 16.94:1  AAA */
  --muted:  #a8a29a;   /*  7.68:1  AAA */
  --faint:  #8a8580;   /*  5.32:1  AA  — captions, credits */

  /* --- rust: the only accent, in two grades -------------- */
  --rust:     #b8482f; /*  3.71:1  — ONLY >=24px bold, blocks, strokes */
  --rust-lit: #d4593c; /*  4.90:1  AA — inline links, small emphasis */
  --rust-dim: rgba(184, 72, 47, .22);

  /* --- inverted blocks (the "roar" side) ----------------- */
  --paper:  #f2efe9;
  --paper-ink: #0d0d0d;

  /* --- type ---------------------------------------------- */
  --sans:  "Arial Narrow", "Franklin Gothic Demi Cond", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --mono:  "Consolas", "SFMono-Regular", monospace;

  /* --- 4px spacing scale -------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --s10: 144px;

  --measure: 68ch;
  --shell: 1180px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0;
  text-transform: uppercase;
}

p { margin: 0 0 var(--s4); }

a {
  color: var(--rust-lit);
  text-decoration: none;
  border-bottom: 1px solid var(--rust-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
a:hover { color: var(--ink); border-bottom-color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

::selection { background: var(--rust); color: var(--ink); }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   film grain — one static feTurbulence, stepped drift only
   ============================================================ */

body::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 200;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grain 900ms steps(6) infinite; }
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-3%, 2%, 0); }
  33%  { transform: translate3d(2%, -3%, 0); }
  50%  { transform: translate3d(-2%, -2%, 0); }
  66%  { transform: translate3d(3%, 1%, 0); }
  83%  { transform: translate3d(-1%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
   layout primitives
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s6);
}

.measure { max-width: var(--measure); }

.band { padding-block: var(--s10); position: relative; }
.band--dust { background: var(--dust); }
.band--tight { padding-block: var(--s9); }

/* section heading block */
.head { margin-bottom: var(--s8); }

.head__index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rust-lit);
  margin-bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.head__index::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.head__title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -.01em;
  margin-bottom: var(--s5);
}

.head__lead {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: var(--measure);
  line-height: 1.72;
  margin: 0;
}

/* ============================================================
   generic image slot — used across every section.
   Renders a labelled placeholder until a real file exists at data-src.
   ============================================================ */

.slot {
  position: relative;
  overflow: hidden;
  background: var(--dust);
  border: 1px solid var(--line);
}
.slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.78) contrast(1.1) brightness(.95);
  transition: filter .5s var(--ease);
}
.slot:hover img { filter: saturate(1) contrast(1.04) brightness(.98); }

/* a very light rust wash ties the generated color series to the site palette */
.slot--washed::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--rust);
  opacity: .035;
  mix-blend-mode: color;
  pointer-events: none;
}

/* aspect variants */
.slot--sq    { aspect-ratio: 1; }
.slot--port  { aspect-ratio: 3 / 4; }
.slot--land  { aspect-ratio: 3 / 2; }
.slot--wide  { aspect-ratio: 16 / 9; }
.slot--pano  { aspect-ratio: 21 / 9; }
.slot--tall  { aspect-ratio: 4 / 5; }

/* the placeholder body */
.slot__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s5);
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px,
      rgba(184, 72, 47, .045) 11px 12px);
}
.slot__ph::before {
  content: '';
  position: absolute;
  inset: var(--s3);
  border: 1px dashed var(--line);
  pointer-events: none;
}

.slot__mark {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  letter-spacing: .04em;
  line-height: 1.1;
  color: #35302c;
  position: relative;
  max-width: 22ch;
}
.slot__hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  position: relative;
}
.slot__file {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: #4a443f;
  position: relative;
  word-break: break-all;
  max-width: 30ch;
}

/* caption under any slot */
.slot-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
  margin-top: var(--s3);
  line-height: 1.6;
}

/* figure wrapper */
.fig { margin: 0; }
.fig--pull { margin-block: var(--s8); }

/* two/three-up galleries */
.gal {
  display: grid;
  gap: var(--s4);
  margin-block: var(--s7);
}
.gal--2 { grid-template-columns: repeat(2, 1fr); }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--offset { align-items: start; }
.gal--offset > *:nth-child(even) { margin-top: var(--s7); }

/* full-bleed band image */
.bleed {
  position: relative;
  margin-block: var(--s9);
}

/* hero portrait beside the tagline */
.hero__portrait {
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .gal--2, .gal--3 { grid-template-columns: 1fr; }
  .gal--offset > *:nth-child(even) { margin-top: 0; }
}

/* ============================================================
   dual-language quote — never touched by setLanguage()
   ============================================================ */

.dual {
  margin: var(--s7) 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--rust);
  max-width: 60ch;
}

.dual__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.dual__zh {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--muted);
  margin: 0;
}

.dual__cite {
  display: block;
  margin-top: var(--s4);
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.dual--lg .dual__en { font-size: clamp(1.4rem, 3vw, 2rem); }

/* ============================================================
   top bar
   ============================================================ */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s3) var(--s6);
  background: rgba(13, 13, 13, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(13, 13, 13, .94);
}

.brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 0;
  white-space: nowrap;
}
.brand:hover { color: var(--rust-lit); }
.brand b { color: var(--rust-lit); font-weight: 700; }

.nav {
  display: flex;
  gap: var(--s2);
  margin-left: auto;
  flex-wrap: wrap;
}

.nav a {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: var(--s3) var(--s3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: 10px;
  height: 1px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); }

/* language toggle */
.lang {
  display: flex;
  border: 1px solid var(--line);
  margin-left: var(--s4);
  flex-shrink: 0;
}
.lang button {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--faint);
  border: 0;
  padding: 0 var(--s4);
  min-height: 44px;
  min-width: 52px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] {
  background: var(--rust);
  color: var(--ink);
}

/* ============================================================
   hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: var(--s9);
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(184, 72, 47, .13), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(242, 239, 233, .07), transparent 70%),
    var(--void);
}

/* the thesis quote inside the hero — sits above the horizon art */
.hero__quote {
  position: relative;
  z-index: 2;
  margin: var(--s6) 0 var(--s7);
  max-width: 54ch;
}
.hero__quote .dual__en { font-size: clamp(1.2rem, 2.6vw, 1.85rem); }

/* horizon + receding telephone poles */
.hero__scene {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 58vh;
  min-height: 300px;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s6);
}

.hero__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s5);
}

.hero__name {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 13.5vw, 11.5rem);
  line-height: .84;
  letter-spacing: -.025em;
  margin: 0 0 var(--s5);
  color: var(--ink);
}
.hero__name span { display: block; }
.hero__name span:last-child { color: var(--muted); }

.hero__rule {
  width: 96px;
  height: 3px;
  background: var(--rust);
  margin-bottom: var(--s5);
}

.hero__tagline {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  line-height: 1.34;
  color: var(--ink);
  margin: 0 0 var(--s5);
  max-width: 24ch;
}

.hero__lead {
  font-size: 1.02rem;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.76;
  margin: 0;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  border: 0;
}
.hero__cue i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--faint), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue i { animation: cue 2.4s var(--ease) infinite; }
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ============================================================
   reveal on scroll
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   "Two Men" — range-driven split. Native keyboard access.
   ============================================================ */

.two {
  --split: 62;                    /* 0 = all roar, 100 = all whisper */
  position: relative;
}

/* stage = text split (left) + image gallery (right) */
.two__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 560px;
  background: var(--void);
}

/* left column holds the two overlaid text panes */
.two__split {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.two__pane {
  position: absolute;
  inset: 0;
  padding: var(--s8) var(--s7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* right column: both images stacked, cross-fading with the slider */
.two__gallery {
  position: relative;
  min-width: 0;
  background: var(--dust);
}

.two__shot {
  position: absolute;
  inset: 0;
}
.two__shot .slot {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

/* opacity is driven off --split so the picture answers the prose */
.two__shot--roar    { opacity: calc(var(--split) / 100); }
.two__shot--whisper { opacity: calc(1 - var(--split) / 100); }

/* ROAR — inverted, shouting */
.two__pane--roar {
  background: var(--paper);
  color: var(--paper-ink);
}
.two__pane--roar .two__label { color: var(--rust); }
.two__pane--roar .two__body  { color: #3a3532; }

/* placeholder has to flip on the light half or it disappears */
.two__pane--roar .slot {
  background: #e6e1d6;
  border-color: #cdc6b8;
}
.two__pane--roar .slot__ph {
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px,
      rgba(184, 72, 47, .07) 11px 12px);
}
.two__pane--roar .slot__ph::before { border-color: #cdc6b8; }
.two__pane--roar .slot__mark { color: #8d857a; }
.two__pane--roar .slot__hint,
.two__pane--roar .slot__file { color: #a8a096; }
.two__pane--roar .slot--washed::after { opacity: .05; }

/* WHISPER — the near-black side, clipped over the top */
.two__pane--whisper {
  background: var(--void);
  color: var(--ink);
  clip-path: inset(0 0 0 calc(var(--split) * 1%));
}
.two__pane--whisper .two__body { color: var(--muted); }

.two__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--rust-lit);
  margin-bottom: var(--s4);
}

.two__word {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .88;
  letter-spacing: -.02em;
  margin: 0 0 var(--s5);
}

.two__body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.74;
  max-width: 40ch;
  margin: 0;
}

/* the divider line that tracks the split */
.two__seam {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--split) * 1%);
  width: 1px;
  background: var(--rust);
  z-index: 3;
  pointer-events: none;
}
.two__seam::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--rust);
}

/* control row */
.two__control {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
}

.two__ends {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.two__range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 44px;              /* touch target */
  cursor: pointer;
  margin: 0;
}
.two__range::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--line);
}
.two__range::-moz-range-track {
  height: 1px;
  background: var(--line);
}
.two__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: var(--rust);
  border: 0;
  border-radius: 0;
  transform: rotate(45deg);
  transition: background .2s var(--ease);
}
.two__range::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--rust);
  border: 0;
  border-radius: 0;
}
.two__range:hover::-webkit-slider-thumb { background: var(--rust-lit); }
.two__range:focus-visible::-webkit-slider-thumb { background: var(--ink); }

.two__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  margin-top: var(--s4);
}

/* ============================================================
   timeline
   ============================================================ */

.chapter { margin-bottom: var(--s10); }
.chapter:last-child { margin-bottom: 0; }

.chapter__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s7);
}

.chapter__years {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--rust-lit);
}

.chapter__name {
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  letter-spacing: -.01em;
}

.chapter__blurb {
  font-family: var(--serif);
  color: var(--muted);
  max-width: 58ch;
  margin: 0;
  line-height: 1.72;
}

/* events: rail on the left, entries hanging off it */
.events {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s7);
  position: relative;
}
.events::before {
  content: '';
  position: absolute;
  left: 3px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), var(--line) 88%, transparent);
}

.event {
  position: relative;
  padding-bottom: var(--s7);
}
.event:last-child { padding-bottom: 0; }

.event::before {                     /* node on the rail */
  content: '';
  position: absolute;
  left: calc(-1 * var(--s7) + 1px);
  top: 9px;
  width: 5px; height: 5px;
  background: var(--faint);
  transform: rotate(45deg);
}
.event--major::before {
  background: var(--rust);
  width: 9px; height: 9px;
  left: calc(-1 * var(--s7) - 1px);
  top: 7px;
}

.event__date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--faint);
  margin-bottom: var(--s2);
}

.event__title {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 var(--s3);
}
.event--major .event__title {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--ink);
}
.event--major .event__date { color: var(--rust-lit); }

.event__body {
  font-family: var(--serif);
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
  line-height: 1.75;
}
.event--major .event__body { color: #c4bdb2; }

/* ============================================================
   records — album grid + SVG abstractions
   ============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s7);
}

.chip {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 11px var(--s4);
  min-height: 44px;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip[aria-pressed="true"] {
  color: var(--void);
  background: var(--ink);
  border-color: var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--s5);
}

.card {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card[hidden] { display: none; }

.card__art {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--dust);
  transition: border-color .3s var(--ease);
}
.card:hover .card__art { border-color: var(--rust); }
.card__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.08) brightness(.96);
  transition: filter .4s var(--ease);
}
.card:hover .card__art img { filter: saturate(1) contrast(1.04) brightness(.99); }

/* placeholder shown until a real cover file exists at the data path */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 10px,
      rgba(184, 72, 47, .05) 10px 11px);
}
.ph::before {                     /* corner ticks, like a crop mark */
  content: '';
  position: absolute;
  inset: var(--s3);
  border: 1px dashed var(--line);
}
.ph__year {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: .02em;
  color: var(--line);
  line-height: 1;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  position: relative;
}

.card__year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--faint);
}
.card:hover .card__year { color: var(--rust-lit); }

.card__title {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .03em;
  margin: 0;
}

.card__zh {
  font-family: var(--serif);
  font-size: .86rem;
  color: var(--faint);
  margin: 0;
}

/* dialog */
.sheet {
  border: 1px solid var(--line);
  background: var(--dust);
  color: var(--ink);
  max-width: 700px;
  width: calc(100% - var(--s6));
  padding: 0;
}
.sheet::backdrop { background: rgba(5, 5, 5, .88); }

.sheet__inner { padding: var(--s7); }

.sheet__art {
  position: relative;
  aspect-ratio: 16 / 7;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--dust-2);
}
.sheet__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.06) brightness(.97);
}

.sheet__year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--rust-lit);
  margin-bottom: var(--s3);
}

.sheet__title {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  margin-bottom: var(--s2);
}

.sheet__zh {
  font-family: var(--serif);
  color: var(--faint);
  font-size: .95rem;
  margin: 0 0 var(--s5);
}

.sheet__note {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.76;
  margin: 0 0 var(--s3);
}
.sheet__noteAlt {
  font-family: var(--serif);
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.74;
  margin: 0 0 var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.sheet__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s3);
}

.sheet__tracks {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
}
.sheet__tracks li {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.sheet__legal {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--faint);
  margin: 0;
}

.sheet__close {
  position: absolute;
  top: var(--s4); right: var(--s4);
  width: 44px; height: 44px;
  background: rgba(13, 13, 13, .7);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.sheet__close:hover { background: var(--rust); border-color: var(--rust); }

/* ============================================================
   words — permanent bilingual pairs
   ============================================================ */

.words { display: grid; gap: var(--s8); }

.word {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
  padding-left: var(--s5);
  border-left: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.word:hover { border-left-color: var(--rust); }

/* alternate the image side so the column does not march */
.word:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.word:nth-child(even) .word__fig { order: 2; }
.word:nth-child(even) .word__col { order: 1; }

.word__fig { margin: 0; }
.word__col { min-width: 0; }

@media (max-width: 860px) {
  .word,
  .word:nth-child(even) { grid-template-columns: 1fr; gap: var(--s5); }
  .word:nth-child(even) .word__fig { order: 0; }
  .word:nth-child(even) .word__col { order: 0; }
}

.word__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.18rem, 2.6vw, 1.6rem);
  line-height: 1.52;
  color: var(--ink);
  margin: 0 0 var(--s4);
  white-space: pre-line;
}

.word__zh {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 var(--s4);
  white-space: pre-line;
}

.word__src {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust-lit);
  margin: 0 0 var(--s4);
}

.word__note {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.75;
  color: var(--faint);
  max-width: 58ch;
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* ============================================================
   culture
   ============================================================ */

.threads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s7) var(--s8);
}

.thread__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--rust-lit);
  margin-bottom: var(--s3);
}

.thread__title {
  font-size: 1.24rem;
  letter-spacing: .03em;
  margin-bottom: var(--s2);
}

.thread__sub {
  font-family: var(--serif);
  font-size: .88rem;
  color: var(--faint);
  margin: 0 0 var(--s4);
}

.thread__fig { margin: 0 0 var(--s5); }

.thread__body {
  font-family: var(--serif);
  color: var(--muted);
  line-height: 1.76;
  margin: 0;
}

/* the Tom Joad lineage chain */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.chain__node {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
}
.chain__arrow { color: var(--rust); font-size: 13px; }

/* ============================================================
   misread — the Born in the U.S.A. case study
   Heard side inverted and loud; unheard side dark and quiet.
   ============================================================ */

.misread { display: grid; gap: var(--s8); }

.heard {
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--s9) var(--s7);
  text-align: center;
}

.heard__label,
.unheard__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: var(--s5);
}
.heard__label { color: var(--rust); }
.unheard__label { color: var(--rust-lit); }

.heard__line {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0 0 var(--s5);
}

.heard__note,
.unheard__note {
  font-family: var(--serif);
  font-size: .95rem;
  margin: 0 auto;
  max-width: 46ch;
  line-height: 1.7;
}
.heard__note { color: #4a443f; }
.unheard__note { color: var(--faint); }

.unheard {
  background: var(--dust);
  border: 1px solid var(--line);
  padding: var(--s9) var(--s7);
}

.unheard__lines {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.44rem);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 var(--s5);
  white-space: pre-line;
  max-width: 52ch;
}

.unheard__zh {
  font-family: var(--serif);
  color: var(--muted);
  line-height: 1.8;
  white-space: pre-line;
  margin: 0 0 var(--s6);
  max-width: 52ch;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* the exchange: Reagan / the answer */
.exchange {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s7);
  margin-top: var(--s8);
}

.turn {
  border-top: 2px solid var(--rust);
  padding-top: var(--s5);
}

.turn__who {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.06rem;
  letter-spacing: .1em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.turn__when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--faint);
  margin-bottom: var(--s5);
}

.turn__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 var(--s4);
}

.turn__zh {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.78;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   now
   ============================================================ */

.beats { display: grid; gap: var(--s6); }

.beat {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.beat:last-child { border-bottom: 0; padding-bottom: 0; }

.beat__when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--rust-lit);
  padding-top: 5px;
}

.beat__title {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.14rem;
  letter-spacing: .04em;
  margin: 0 0 var(--s3);
}

.beat__body {
  font-family: var(--serif);
  color: var(--muted);
  line-height: 1.76;
  margin: 0;
  max-width: 62ch;
}

/* ============================================================
   photo treatment — unifies eras and photographers
   ============================================================ */

.shot { margin: var(--s7) 0; }

.shot__frame {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--dust);
}
.shot__frame img {
  width: 100%;
  filter: saturate(.78) contrast(1.1) brightness(.95);
}
.shot__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rust);
  opacity: .035;
  mix-blend-mode: color;
  pointer-events: none;
}

.shot__credit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
  margin-top: var(--s3);
}
.shot__credit a { color: var(--faint); border-bottom-color: var(--line); }
.shot__credit a:hover { color: var(--ink); }

/* ============================================================
   footer
   ============================================================ */

.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s7);
  background: var(--void);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s6);
  margin-bottom: var(--s7);
}

.foot__about {
  font-family: var(--serif);
  font-size: .9rem;
  line-height: 1.74;
  color: var(--faint);
  max-width: 52ch;
  margin: 0;
}

.foot__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.foot__links a {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 0;
  color: var(--muted);
}
.foot__links a:hover { color: var(--rust-lit); }

.foot__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================================================
   burger — hidden until 860
   ============================================================ */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 17px; height: 1px;
  background: currentColor;
  position: relative;
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0; width: 17px; height: 1px;
  background: currentColor;
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }

/* ============================================================
   responsive — 1024 / 860 / 640 / 520
   ============================================================ */

@media (max-width: 1024px) {
  :root { --s10: 112px; --s9: 80px; }
  .shell { padding-inline: var(--s5); }
  .hero__inner { padding-inline: var(--s5); }
}

@media (max-width: 860px) {
  .nav {
    display: none;
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    background: rgba(13, 13, 13, .97);
    border-bottom: 1px solid var(--line);
    padding: var(--s4) var(--s5) var(--s5);
    gap: 0;
    margin-left: 0;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; border-bottom: 1px solid var(--line); }
  .burger { display: inline-flex; margin-left: auto; }

  .two__stage { min-height: 420px; }
  .two__pane { padding: var(--s6) var(--s5); }
  .events { padding-left: var(--s6); }
  .event::before { left: calc(-1 * var(--s6) + 1px); }
  .event--major::before { left: calc(-1 * var(--s6) - 1px); }
}

@media (max-width: 640px) {
  :root { --s10: 88px; --s9: 64px; --s8: 48px; }
  body { font-size: 16px; }
  .topbar { padding: var(--s2) var(--s4); gap: var(--s3); }
  .brand { font-size: 13px; letter-spacing: .1em; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s4); }
  .beat { grid-template-columns: 1fr; gap: var(--s3); }
  .heard, .unheard { padding: var(--s8) var(--s5); }
  .sheet__inner { padding: var(--s6) var(--s5); }
  /* The clipped comparison needs desktop width. On phones, show both halves
     completely and keep the two color images as a simple paired coda. */
  .two__stage {
    display: block;
    min-height: 0;
    overflow: visible;
    border: 0;
  }
  .two__split {
    position: static;
    border: 1px solid var(--line);
  }
  .two__pane {
    position: static;
    min-height: 320px;
    padding: var(--s7) var(--s5);
  }
  .two__pane--whisper {
    clip-path: none;
    border-top: 1px solid var(--line);
  }
  .two__seam { display: none; }
  .two__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 250px;
    border: 1px solid var(--line);
    border-top: 0;
  }
  .two__shot {
    position: relative;
    inset: auto;
    min-height: 250px;
    opacity: 1;
  }
  .two__shot + .two__shot { border-left: 1px solid var(--line); }
  .two__control, .two__hint { display: none; }
}

@media (max-width: 520px) {
  .hero__name { font-size: clamp(2.6rem, 15vw, 4rem); }
  .grid { grid-template-columns: 1fr 1fr; }
  .threads { grid-template-columns: 1fr; }
  .lang { margin-left: var(--s2); }
  .lang button { padding: 0 var(--s3); min-width: 46px; }
}

@media print {
  body::after, .topbar, .hero__cue { display: none; }
  body { background: #fff; color: #000; }
}