/* ─────────────────────────────────────────────────────────────────────────
   SELVA — editorial layer over the living canvas.

   Palette law: near-black green is the ground of everything; bone is the
   only colour type is allowed; firefly amber is what the world glows; one
   heliconia vermilion is the accent and it appears exactly where Kage's
   vermilion did — the chapter dot, the small labels, the mark's sun.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #050a07;
  --bg-2: #07130c;
  --bone: #efe9dc;
  --bone-70: rgba(239, 233, 220, 0.72);
  --bone-45: rgba(239, 233, 220, 0.45);
  --bone-20: rgba(239, 233, 220, 0.2);
  --bone-08: rgba(239, 233, 220, 0.08);
  --amber: #ffb347;
  --verm: #ff5a3c;
  --moss: #8fb08a;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-2: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
  --wrap: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--bone); }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: rgba(255, 179, 71, 0.35); color: #fff; }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 100;
  padding: 10px 14px; background: var(--bone); color: var(--bg);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.skip:focus { top: 16px; outline: 2px solid var(--amber); }

/* ── The world ─────────────────────────────────────────────────────────── */
#world {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; background: var(--bg);
}
/* A whisper of static over everything, so flat colour never reads as flat.
   Cheap: a tiny SVG turbulence tile, animated by translating the layer. */
.grain {
  position: fixed; inset: -60px; z-index: 1; pointer-events: none;
  opacity: 0.09; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-18px, 12px); }
  40% { transform: translate(14px, -20px); } 60% { transform: translate(-10px, -8px); }
  80% { transform: translate(20px, 16px); } 100% { transform: translate(0, 0); }
}

/* ── Foreground cutouts ────────────────────────────────────────────────── */
/* One group per chapter, pinned to the viewport. Set pieces (fern clumps,
   the palm cluster, the stone head) sit low; creatures perch where the shot
   wants them; two things hang from the top edge. They arrive at full
   opacity, hold while their chapter is active, then blur and fade away. */
.fg {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; filter: blur(14px); transform: translateY(24px);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease);
}
.fg.is-active { opacity: 1; filter: none; transform: none; }
.fg img { position: absolute; height: auto; }
.fg .set { filter: drop-shadow(0 -10px 40px rgba(0, 0, 0, 0.6)) brightness(0.72) saturate(0.85); }
.fg .creature { filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.7)) brightness(0.9) saturate(0.9); }
.fg .fg-l { left: -3vw; bottom: -4vh; }
.fg .fg-r { right: -2vw; bottom: -3vh; }
.fg .fg-t { top: -2vh; }
.no-fg .fg { display: none; }
/* 00 canopy: a palm cluster low left, the macaw perched right */
.fg[data-fg="0"] .fg-l { width: min(30vw, 480px); left: -6vw; bottom: -10vh; }
.fg[data-fg="0"] .fg-r { width: min(13vw, 220px); right: 6vw; bottom: -2vh; }
/* 01 understory: tree ferns and their log, the capuchin on the right */
.fg[data-fg="1"] .fg-l { width: min(34vw, 560px); left: -6vw; bottom: -6vh; }
.fg[data-fg="1"] .fg-r { width: min(16vw, 260px); right: 5vw; bottom: -1vh; }
/* 02 river: dark ferns low left, the sloth hanging from the top right */
.fg[data-fg="2"] .fg-l { width: min(34vw, 540px); left: -8vw; bottom: -22vh; }
.fg[data-fg="2"] .fg-t { width: min(12vw, 200px); right: 9vw; top: -3vh; }
/* 03 ruin: the stone head low left, monstera right */
.fg[data-fg="3"] .fg-l { width: min(22vw, 360px); left: 1vw; bottom: -6vh; }
.fg[data-fg="3"] .fg-r { width: min(30vw, 480px); right: -8vw; bottom: -14vh; }
/* 04 fireflies: the jaguar low in the left corner, the frog right */
.fg[data-fg="4"] .fg-l { width: min(19vw, 300px); left: 2vw; bottom: -8vh; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.8)) brightness(0.72) saturate(0.85); }
.fg[data-fg="4"] .fg-r { width: min(20vw, 320px); right: 4vw; bottom: -1vh; }
/* 05 first light: the morpho high on the left, the toucan on its branch right */
.fg[data-fg="5"] .fg-t { width: min(13vw, 210px); left: 24vw; top: 12vh; }
.fg[data-fg="5"] .fg-r { width: min(26vw, 420px); right: -2vw; bottom: -4vh; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  transition: background 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
}
.nav::after {
  content: ""; position: absolute; inset-inline: var(--gutter); bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone-20) 30%, var(--bone-20) 70%, transparent);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.nav.is-scrolled { background: linear-gradient(180deg, rgba(5, 10, 7, 0.82), rgba(5, 10, 7, 0)); }
.nav.is-scrolled::after { opacity: 1; }
.brand { display: flex; align-items: center; gap: 14px; justify-self: start; }
.brand-text { display: grid; line-height: 1; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.34em; }
.brand-sub { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; color: var(--bone-45); }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-70);
  position: relative; padding: 8px 0; transition: color 0.4s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--amber);
  transition: right 0.5s var(--ease-2);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--bone); }
.nav-links a.is-active::after { right: 0; }
.pill {
  justify-self: end; display: inline-flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 20px; border: 1px solid var(--bone-20); border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.pill:hover { border-color: var(--bone-70); background: rgba(239, 233, 220, 0.04); }
.pill span { transition: transform 0.4s var(--ease); }
.pill:hover span { transform: translate(2px, -2px); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 16px; }
/* The sound switch. Off is the resting state and it looks it — the waves are
   struck through until the visitor asks for them. */
.sound-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; min-width: 42px; padding: 0 4px;
  color: var(--bone-70); background: none; border: 0; cursor: pointer;
  transition: color 0.4s var(--ease);
}
.sound-btn[hidden] { display: none; }
.sound-btn:hover, .sound-btn:focus-visible { color: var(--bone); }
/* The browser's own focus ring lands as an ellipse round the glyph; the page
   already has a focus colour, so the switch borrows it. */
.sound-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 999px; }
.sound-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.sound-ico .wave { opacity: 0; transition: opacity 0.45s var(--ease); }
.sound-ico .slash { opacity: 0.9; transition: opacity 0.45s var(--ease); }
.sound-btn.is-on .slash { opacity: 0; }
.sound-btn.is-on .wave-1 { opacity: 1; }
.sound-btn.is-on .wave-2 { opacity: 1; transition-delay: 0.08s; }
/* The free-roam switch, built on the sound switch so the two read as a pair.
   On, it goes amber — the page's one attention colour, and the only thing in
   the nav wearing it, because while it is lit the visitor is somewhere the
   six shots cannot take them. */
.walk-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; min-width: 42px; padding: 0 4px;
  color: var(--bone-70); background: none; border: 0; cursor: pointer;
  transition: color 0.4s var(--ease);
}
.walk-btn[hidden] { display: none; }
.walk-btn:hover, .walk-btn:focus-visible { color: var(--bone); }
.walk-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 999px; }
.walk-btn.is-on { color: var(--amber); }
.walk-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; }

/* ── Free roam ───────────────────────────────────────────────────────────
   Everything the page draws over the canvas goes, and the world is left on
   its own. Faded rather than removed: `display: none` on main would collapse
   the scroll height, and the exit needs those offsets to put the reader back
   at the nearest chapter.

   The foreground cutouts are the ones that really have to go. They are
   photographs composited for a camera that is standing still; once the
   visitor is steering, they are stuck to the glass. */
html.is-walking main,
html.is-walking .foot,
html.is-walking .fg,
html.is-walking .rail,
html.is-walking .nav,
html.is-walking .cursor { opacity: 0; pointer-events: none; }
html.is-walking main,
html.is-walking .foot,
html.is-walking .nav { transition: opacity 0.5s var(--ease); }
html.is-walking { scroll-behavior: auto; }
html.is-walking body { cursor: none; }

.walk-hud {
  position: fixed; z-index: 40; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  padding: 11px 22px; border: 1px solid var(--bone-08); border-radius: 999px;
  background: rgba(5, 10, 7, 0.5); backdrop-filter: blur(7px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone-45); pointer-events: none;
  animation: hud-in 0.7s var(--ease-2) both 0.25s;
}
.walk-hud[hidden] { display: none; }
.walk-hud b { color: var(--bone-70); font-weight: 400; }
@keyframes hud-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .walk-hud { animation: none; } }

.menu-btn { display: none; justify-self: end; align-items: center; gap: 12px; height: 42px; }
.menu-lines { position: relative; width: 22px; height: 10px; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--bone); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.menu-lines::before { top: 0; } .menu-lines::after { top: 9px; }
.menu-btn[aria-expanded="true"] .menu-lines::before { top: 4.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines::after { top: 4.5px; transform: rotate(-45deg); }
.menu-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; }

.menu {
  position: fixed; inset: 0; z-index: 25; background: rgba(5, 10, 7, 0.94);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; display: grid; align-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; }
.menu nav a {
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--bone-08);
  font-size: clamp(2rem, 8vw, 3rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1;
}
.menu nav a i { font: 500 12px var(--mono); letter-spacing: 0.2em; color: var(--verm); }
.menu-foot { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--bone-45); }

/* ── Chapter rail ──────────────────────────────────────────────────────── */
.rail {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 20;
  display: grid; gap: 18px;
}
.rail a { display: flex; align-items: center; gap: 12px; height: 12px; }
.rail a i { width: 6px; height: 6px; border-radius: 50%; background: var(--bone-20); transition: background 0.5s var(--ease), transform 0.5s var(--ease-2); }
.rail a span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-45);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-2), color 0.5s;
}
.rail a.is-active i { background: var(--verm); transform: scale(1.5); }
.rail a.is-active span, .rail:hover a span { opacity: 1; transform: none; }
.rail a.is-active span { color: var(--bone); }

/* ── Sections ──────────────────────────────────────────────────────────── */
main { position: relative; z-index: 3; }
/* The world got dense enough to fight the type. A soft scrim rides behind each
   chapter's copy — from the reading edge, dying out before mid-frame, so the
   forest keeps its detail everywhere the eye isn't reading a sentence. */
.ch::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(3, 8, 5, 0.82) 0%, rgba(3, 8, 5, 0.62) 28%, rgba(3, 8, 5, 0.16) 58%, transparent 76%);
}
.ch.hero::before { background: linear-gradient(100deg, rgba(3, 8, 5, 0.78) 0%, rgba(3, 8, 5, 0.5) 30%, rgba(3, 8, 5, 0.1) 62%, transparent 80%); }
@media (max-width: 860px) {
  /* On a phone the scrim runs down the whole frame instead of down one side,
     so it has to be much lighter than the desktop one or the world behind the
     type goes out entirely. The type keeps its legibility from a shadow of its
     own rather than from drowning the picture. */
  .ch::before, .ch.hero::before {
    background: linear-gradient(180deg, rgba(3, 8, 5, 0.24) 0%, rgba(3, 8, 5, 0.5) 30%, rgba(3, 8, 5, 0.56) 72%, rgba(3, 8, 5, 0.46) 100%);
  }
  .h1, .h2, .col, .rv p, .notes h3, .notes p, .specs, .chnum, .eyebrow {
    text-shadow: 0 1px 12px rgba(3, 8, 5, 0.75), 0 1px 3px rgba(3, 8, 5, 0.6);
  }
  /* With the scrim lightened, chapter labels scrolling past were showing
     through the wordmark. The bar carries its own ground, and fades out just
     below itself so it never reads as a hard edge. */
  .nav.is-scrolled { background: linear-gradient(180deg, rgba(5, 10, 7, 0.96) 0%, rgba(5, 10, 7, 0.95) 76%, rgba(5, 10, 7, 0) 100%); }
  .nav.is-scrolled::before {
    content: ""; position: absolute; inset-inline: 0; top: 100%; height: 28px; pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 10, 7, 0.5), rgba(5, 10, 7, 0));
  }
}
@media (min-width: 1101px) { .ch .wrap { padding-left: calc(var(--gutter) + 40px); } }
.wrap { position: relative; margin-inline: auto; max-width: var(--wrap); padding-inline: var(--gutter); }
.ch { position: relative; min-height: 100vh; min-height: 100svh; padding: 22vh 0 26vh; display: flex; align-items: center; }
.ch .wrap { width: 100%; }
.hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 12vh) 0 20vh; align-items: flex-start; }
.close { padding-bottom: 20vh; }

.eyebrow, .chnum {
  display: flex; align-items: center; gap: 14px; margin-bottom: 34px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-70);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--verm); box-shadow: 0 0 12px var(--verm); }
.chnum b { font-weight: 500; color: var(--verm); }
.chnum .rule { flex: 1; max-width: 420px; height: 1px; background: linear-gradient(90deg, var(--bone-20), transparent); margin-left: 8px; }

.h1, .h2 {
  font-weight: 700; font-stretch: 100%; text-transform: uppercase; letter-spacing: -0.012em; line-height: 0.96;
  text-wrap: balance; max-width: 15ch;
}
.h1 { font-size: clamp(3rem, 8.4vw, 8.2rem); }
.h2 { font-size: clamp(2.4rem, 6.2vw, 5.8rem); margin-bottom: 40px; }
.hero .h1 { max-width: 12ch; }

.lede { max-width: 620px; margin-top: 34px; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--bone-70); font-weight: 300; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 40px; }
.hero-meta .mono { color: var(--bone-45); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; margin-top: 64px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-70); }
.scroll-cue b { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--bone-20); border-radius: 50%; font-weight: 400; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
.col p + p { margin-top: 22px; }
.cols p { color: var(--bone-70); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; }

.specs { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--bone-20); }
.specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--bone-08); }
.specs .mono { color: var(--bone-45); }
.specs b { font-weight: 500; font-size: 1.05rem; text-align: right; }

.cta {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 56px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
}
.cta b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bone-20); border-radius: 50%; font-weight: 400; transition: background 0.4s var(--ease), transform 0.4s var(--ease-2), border-color 0.4s; }
.cta:hover b { background: var(--bone); color: var(--bg); border-color: var(--bone); transform: translate(2px, -2px); }
.cta.ghost { color: var(--bone-70); }
.close-actions { display: flex; flex-wrap: wrap; gap: 20px 48px; }
.close-actions .cta { margin-top: 44px; }

/* Vertical Spanish word — the counterpart of Kage's vertical Japanese. */
.vert {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: 0.06em; color: var(--bone-20);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.hero .vert { top: 42%; }

/* The giant SELVA letters at the bottom of the hero, half behind the fronds. */
.giant {
  position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 1; margin: 0;
  display: flex; justify-content: space-between; padding-inline: var(--gutter);
  font-weight: 800; font-stretch: 112%; font-size: clamp(5rem, 19vw, 19rem); line-height: 0.8; letter-spacing: 0.02em;
  color: rgba(239, 233, 220, 0.9); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.giant span { display: block; opacity: 0; transform: translateY(0.25em); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease-2); transition-delay: calc(0.9s + var(--i, 0) * 0.08s); }
.giant span:nth-child(1) { --i: 0; } .giant span:nth-child(2) { --i: 1; } .giant span:nth-child(3) { --i: 2; } .giant span:nth-child(4) { --i: 3; } .giant span:nth-child(5) { --i: 4; }
.ch.in .giant span { opacity: 1; transform: none; }

/* ── Plates ────────────────────────────────────────────────────────────── */

/* Field notes grid — Kage's chapter cards, ours are the ruin's stations. */
.notes { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--bone-20); border-left: 1px solid var(--bone-20); }
.notes li { position: relative; padding: 28px 28px 30px; min-height: 240px; border-right: 1px solid var(--bone-20); border-bottom: 1px solid var(--bone-20); display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; transition: background 0.5s var(--ease); }
.notes li:hover { background: rgba(239, 233, 220, 0.03); }
.notes .mono { color: var(--bone-45); }
.notes h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.notes h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.95em; color: var(--bone-45); }
.notes p { color: var(--bone-70); font-size: 1rem; max-width: 34ch; }

/* ── Reveal choreography ───────────────────────────────────────────────── */
.words .w { display: inline-block; opacity: 0; transform: translateY(0.4em) rotate(0.4deg); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease-2); transition-delay: calc(var(--i, 0) * 90ms); }
.words .w:nth-child(1) { --i: 0; } .words .w:nth-child(2) { --i: 1; } .words .w:nth-child(3) { --i: 2; } .words .w:nth-child(4) { --i: 3; }
.words .w:nth-child(5) { --i: 4; } .words .w:nth-child(6) { --i: 5; } .words .w:nth-child(7) { --i: 6; } .words .w:nth-child(8) { --i: 7; } .words .w:nth-child(9) { --i: 8; }
.ch.in .words .w { opacity: 1; transform: none; }
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease-2); transition-delay: 0.45s; }
.rv + .rv, .cols .rv:nth-child(2), .notes.rv { transition-delay: 0.7s; }
.close-actions.rv, .cta.rv { transition-delay: 0.9s; }
.ch.in .rv { opacity: 1; transform: none; }
.eyebrow, .chnum { opacity: 0; transform: translateY(12px); transition: opacity 0.9s var(--ease), transform 1s var(--ease-2); }
.ch.in .eyebrow, .ch.in .chnum { opacity: 1; transform: none; }
.vert { opacity: 0; transition: opacity 1.6s var(--ease) 0.6s; }
.ch.in .vert { opacity: 1; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { position: relative; z-index: 3; background: linear-gradient(180deg, rgba(5, 10, 7, 0) 0%, rgba(5, 10, 7, 0.9) 18%, var(--bg) 100%); padding: 20vh 0 48px; }
.foot-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--bone-20); }
.manifesto { font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.35; font-weight: 300; letter-spacing: -0.005em; max-width: 30ch; text-wrap: balance; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; padding: 48px 0; border-bottom: 1px solid var(--bone-08); }
.foot-cols a { display: block; padding: 5px 0; color: var(--bone-70); transition: color 0.3s; }
.foot-cols a:hover { color: var(--bone); }
.foot-cols p { color: var(--bone-70); font-size: 15px; line-height: 1.6; }
.foot-cols p + p { margin-top: 12px; }
.foot-h { color: var(--bone-45); margin-bottom: 14px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; color: var(--bone-45); }
.foot-bottom a { color: var(--bone); border-bottom: 1px solid var(--bone-20); }

/* ── Cursor (fine pointers only) ───────────────────────────────────────── */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; will-change: transform; }
  .cursor i { display: block; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid rgba(239, 233, 220, 0.7); border-radius: 50%; transition: transform 0.35s var(--ease-2), background 0.35s, border-color 0.35s, opacity 0.5s; }
  .cursor.is-hover i { transform: scale(1.8); background: rgba(239, 233, 220, 0.08); border-color: var(--amber); }
  .cursor.is-hidden i { opacity: 0; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .pill { display: none; }
  .menu-btn { display: inline-flex; }
  .sound-label, .walk-label { display: none; }
  .nav-end { gap: 10px; }
  .rail { left: 18px; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .rail { display: none; }
  .ch { padding: 18vh 0 22vh; }
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .h2 { max-width: none; margin-bottom: 28px; }
  .h1 { font-size: clamp(2.7rem, 12.5vw, 5rem); }
  .notes { grid-template-columns: 1fr; margin-top: 40px; }
  .notes li { min-height: 0; padding: 22px 20px 24px; }
  .vert { right: 10px; font-size: 1.8rem; color: var(--bone-08); }
  .giant { font-size: clamp(3.4rem, 17vw, 8rem); bottom: 4vh; }
  .fg[data-fg="0"] .fg-l { width: 44vw; left: -12vw; } .fg[data-fg="0"] .fg-r { width: 20vw; right: 3vw; }
  .fg[data-fg="1"] .fg-l { width: 50vw; left: -14vw; } .fg[data-fg="1"] .fg-r { width: 26vw; }
  .fg[data-fg="2"] .fg-l { width: 60vw; } .fg[data-fg="2"] .fg-t { width: 20vw; right: 4vw; }
  .fg[data-fg="3"] .fg-l { width: 34vw; left: -2vw; } .fg[data-fg="3"] .fg-r { width: 46vw; }
  .fg[data-fg="4"] .fg-l { width: 30vw; } .fg[data-fg="4"] .fg-r { width: 32vw; }
  .fg[data-fg="5"] .fg-t { width: 22vw; left: 6vw; top: 14vh; } .fg[data-fg="5"] .fg-r { width: 42vw; }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }
  .foot-top { grid-template-columns: 36px 1fr; gap: 18px; }
  .brand-sub { display: none; }
  .hero-meta { gap: 8px 20px; }
  .hero-meta .mono { font-size: 10px; }
}
@media (max-width: 480px) {
  .eyebrow, .chnum { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 24px; }
}

/* ── Reduced motion: the whole reading experience, none of the choreography ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .words .w, .rv, .eyebrow, .chnum, .vert, .giant span, .fg, .scroll-cue b { transition: none !important; animation: none !important; }
  .words .w, .rv, .eyebrow, .chnum, .vert, .giant span { opacity: 1 !important; transform: none !important; }
  .fg { filter: none; transform: none; transition: opacity 0.4s linear; }
}