/* Kilimanjaro — the torch and the snowline.
   Warm savanna reading rooms against torch-night instrument panels; torch
   marks only the reader's live position and every gauge mark. Per-chapter
   accents and per-grade stage skins keep all eight chapters distinct.
   font-display: optional on all faces (not swap/block): fallback→webfont
   swaps reflowed late (+25px measured on the template), shifting beats
   across the reading line after the scroll pass runs. Same-origin woff2
   (preloaded) renders from first paint; on slow networks the fallback
   stays for the page lifetime — either way, zero mid-read swaps. */
@font-face {
  font-family: "Syne";
  src: url("syne-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: optional;
}
/* latin-ext is shipped AND declared: Syne Ș/Ț render from the subset
   file instead of falling back to system sans. */
@font-face {
  font-family: "Syne";
  src: url("syne-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("Newsreader.woff2") format("woff2");
  font-weight: 400 700;
  font-display: optional;
}
@font-face {
  font-family: "Newsreader";
  src: url("Newsreader-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: optional;
}
:root {
  --paper: #f5f0e1;
  --paper-soft: #e6d9bd;
  --ink: #222b28;
  --ink-soft: #57616a;
  --night: #10161a;
  --night-abyss: #090d10;
  --night-panel: #18242a;
  --glacier: #5d93a5;
  --mist: #7fc4d4;
  --snow: #eef2f0;
  --torch: #c46a28;
  --torch-deep: #8f4a1c;
  --gold: #e3b96f;
  --ember: #e0732f;
  --line: #d3c9ae;
  --card: #faf6ea;
  --stage-bg: #14202a;
  --glow: rgba(127, 196, 212, 0.16);
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: #0e1316;
  --paper-soft: #162026;
  --ink: #eef2f0;
  --ink-soft: #9aabb3;
  --line: #33424b;
  --card: #162026;
  --glow: rgba(196, 106, 40, 0.10);
  color-scheme: dark;
}
/* Per-chapter accents: the same torch, a different gauge in each room. */
.story-chapter[data-chapter="acoperisul-africii"] { --accent: #4f9aae; --wash: rgba(79, 154, 174, 0.10); }
.story-chapter[data-chapter="trei-conuri"] { --accent: #8a5a3c; --wash: rgba(138, 90, 60, 0.10); }
.story-chapter[data-chapter="zapezile-care-pleaca"] { --accent: #6fa8bf; --wash: rgba(111, 168, 191, 0.12); }
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] { --accent: #b4502e; --wash: rgba(180, 80, 46, 0.10); }
.story-chapter[data-chapter="primii-pasi"] { --accent: #7a6a4f; --wash: rgba(122, 106, 79, 0.12); }
.story-chapter[data-chapter="drumul-spre-varf"] { --accent: #4e7f6a; --wash: rgba(78, 127, 106, 0.12); }
.story-chapter[data-chapter="cinci-lumi"] { --accent: #6a8a3c; --wash: rgba(106, 138, 60, 0.10); }
.story-chapter[data-chapter="muntele-din-carti"] { --accent: #7a5f9e; --wash: rgba(122, 95, 158, 0.10); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Noto Serif CJK SC", "PingFang SC", serif;
  font-size: 1.125rem;
  line-height: 1.65;
}
html[lang="zh-Hans"] body { line-height: 1.85; }
/* The chapter wash: a faint torch glow that follows the reader down. */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 46vh;
  pointer-events: none; z-index: 0;
  background: radial-gradient(60% 100% at 70% 0%, var(--chapter-wash, transparent), transparent 70%);
}
body[data-chapter="acoperisul-africii"] { --chapter-wash: rgba(79, 154, 174, 0.14); }
body[data-chapter="trei-conuri"] { --chapter-wash: rgba(138, 90, 60, 0.12); }
body[data-chapter="zapezile-care-pleaca"] { --chapter-wash: rgba(111, 168, 191, 0.14); }
body[data-chapter="de-la-kaiser-la-uhuru"] { --chapter-wash: rgba(180, 80, 46, 0.12); }
body[data-chapter="primii-pasi"] { --chapter-wash: rgba(122, 106, 79, 0.16); }
body[data-chapter="drumul-spre-varf"] { --chapter-wash: rgba(78, 127, 106, 0.14); }
body[data-chapter="cinci-lumi"] { --chapter-wash: rgba(106, 138, 60, 0.12); }
body[data-chapter="muntele-din-carti"] { --chapter-wash: rgba(122, 95, 158, 0.12); }
main, .site-header, .site-footer, .reading-rail { position: relative; z-index: 1; }
h1, h2, h3, .eyebrow, .hero-stat strong, .stage-value {
  font-family: "Syne", "Newsreader", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
.shell {
  max-width: 76rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 4.5rem;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--torch); color: #141414; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--torch); color: #141414;
  padding: 0.5rem 1rem; border-radius: 0.25rem;
  font-weight: 700; z-index: 60; transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 0.75rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.78rem; font-weight: 700; color: var(--torch-deep);
  margin: 0 0 0.75rem;
}
html[lang="zh-Hans"] .eyebrow { letter-spacing: 0.32em; }
html[data-theme="dark"] .eyebrow { color: var(--torch); }
/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.wordmark {
  font-family: "Syne", "PingFang SC", sans-serif; font-weight: 800;
  text-decoration: none; font-size: 1.05rem; letter-spacing: 0.02em;
}
.wordmark-short { display: none; }
.top-jumps { display: flex; gap: 0.9rem; margin-left: auto; font-size: 0.95rem; }
.top-jumps a { text-decoration: none; border-bottom: 2px solid transparent; }
.top-jumps a[aria-current] { border-color: var(--torch); font-weight: 700; }
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
.language-switch { display: flex; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; }
.language-switch a {
  text-decoration: none; padding: 0.15rem 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
}
#theme-control, #copy-link {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; width: 2.1rem; height: 2.1rem; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
/* Hero: the massif fills the first viewport. The copy lives inside the
   media frame now, so it can never collide with the gauge strip below. */
.hero { padding: 0 0 2.5rem; }
.hero-field { margin: 0; }
.hero-media {
  position: relative; overflow: hidden;
  display: grid;
  border-radius: 0 0 1.25rem 1.25rem;
  border: 1px solid var(--line); border-top: 0;
  box-shadow: 0 2.5rem 4rem -2.5rem rgba(9, 13, 16, 0.55);
  background: var(--night-abyss);
}
/* The frame grows past the photograph's minimum whenever the copy runs
   tall (narrow phones, short landscape heights), so the headline can
   never clip against the rounded top edge. */
.hero-peak {
  grid-area: 1 / 1; width: 100%; height: 100%;
  min-height: clamp(30rem, 82svh, 60rem); object-fit: cover;
}
.hero-curtain {
  grid-area: 1 / 1; height: 100%;
  min-height: clamp(30rem, 82svh, 60rem);
  background: linear-gradient(180deg, var(--night) 0%, var(--night-panel) 55%, var(--glacier) 130%);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,13,16,0.36) 0%, rgba(9,13,16,0.05) 30%, rgba(9,13,16,0.22) 55%, rgba(9,13,16,0.9) 100%);
}
/* First light: a single torch band sweeps the frame once on arrival,
   then rests invisible. Keyframe-only ending at rest, so no-JS and
   reduced-motion readers always land on the finished photograph. */
.hero-media::before {
  content: ""; position: absolute; inset: -10% -30%; z-index: 1;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%,
    rgba(227, 185, 111, 0.28) 50%, transparent 58%);
}
/* A breath of high-altitude haze along the frame's foot: the copy sits inside weather. */
.hero-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem;
  background: linear-gradient(transparent, rgba(9, 13, 16, 0.5));
  pointer-events: none;
}
/* First light over the photograph: soft diagonal drift plus a breath of
   grain. Pure weather, no meaning — kept faint so it never reads as
   scratches on the frame. */
.hero-threads {
  position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 46px, rgba(224, 180, 142, 0.05) 46px 48px,
      transparent 48px 110px),
    repeating-linear-gradient(115deg,
      transparent 0 9px, rgba(224, 180, 142, 0.035) 9px 10px,
      transparent 10px 31px),
    radial-gradient(38% 30% at 22% 18%, rgba(224, 180, 142, 0.10), transparent 70%),
    radial-gradient(30% 26% at 78% 34%, rgba(224, 180, 142, 0.08), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 24%, transparent 88%);
  mask-image: linear-gradient(180deg, black 24%, transparent 88%);
}
.hero-copy {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 2;
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem; color: #eef2f0;
}
/* The thesis, set in weather: the frozen summit figure repeated as a
   hollow ghost over the photograph's sky. Absolute inside the clipped
   frame, so it can never shift layout or overflow the page. */
.hero-ghost {
  position: absolute; top: 0.5rem; right: clamp(0.75rem, 3vw, 2.5rem); z-index: 1;
  font-family: "Syne", "PingFang SC", sans-serif; font-weight: 800;
  font-size: clamp(5rem, 17vw, 13rem); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(238, 242, 240, 0.5);
  opacity: 0.55; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 96%);
  mask-image: linear-gradient(180deg, black 55%, transparent 96%);
  font-variant-numeric: tabular-nums;
}
.hero-copy .eyebrow { color: var(--torch); }
.hero-kicker { display: flex; align-items: center; gap: 0.75rem; }
.hero-kicker::after {
  content: ""; height: 2px; width: clamp(3rem, 12vw, 9rem);
  background: linear-gradient(90deg, var(--torch), transparent);
}
.hero-seal {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  color: var(--torch); font-size: 1.25rem; line-height: 1;
  border: 2px solid var(--torch);
  background: rgba(9, 13, 16, 0.55);
  box-shadow: 0 0 1.2rem -0.2rem rgba(196, 106, 40, 0.7);
  font-family: "Syne", sans-serif; font-weight: 800;
}
.hero-copy h1 {
  font-size: clamp(2.7rem, 7vw, 5.6rem); line-height: 1.0;
  letter-spacing: -0.025em; font-weight: 800;
  margin: 0.25rem 0 0.9rem; max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(9, 13, 16, 0.8), 0 1px 3px rgba(9, 13, 16, 0.9);
}
html[lang="zh-Hans"] .hero-copy h1 { max-width: 26ch; }
.deck {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 62ch; margin: 0;
  text-shadow: 0 1px 10px rgba(9, 13, 16, 0.8);
}
.hero-cold-open {
  max-width: 62ch; margin: 0.9rem 0 0;
  font-style: italic;
  border-left: 3px solid var(--torch); padding: 0.6rem 1rem 0.6rem 0.9rem;
  background: rgba(9, 13, 16, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 0 0.5rem 0.5rem 0;
  text-shadow: 0 1px 8px rgba(9, 13, 16, 0.8);
}
/* The way up: a torch thread the reader can follow with a keypress. */
.scroll-cue {
  position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: 3.6rem; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--snow); text-decoration: none;
  font-family: "Syne", "PingFang SC", sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(9, 13, 16, 0.9);
}
.scroll-cue .cue-line {
  display: block; width: 2px; height: 2.6rem;
  background: linear-gradient(var(--torch), transparent);
}
.hero-stats {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem; padding: 0 clamp(1.25rem, 4vw, 3rem);
  margin-top: -2.75rem;
}
.hero-stat {
  background: linear-gradient(165deg, #1f2c33 0%, var(--night-panel) 55%, var(--night-abyss) 100%);
  color: var(--snow);
  border-radius: 0.6rem; padding: 0.8rem 1rem;
  border: 1px solid #33424b;
  border-top: 3px solid var(--torch);
  box-shadow: 0 1.25rem 2rem -1.25rem rgba(9, 13, 16, 0.7);
  font-variant-numeric: tabular-nums;
}
.hero-stat strong { display: block; font-size: 1.35rem; letter-spacing: -0.01em; }
.hero-stat span { font-size: 0.92rem; color: var(--mist); }
.hero-stat {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(127, 196, 212, 0.08) 14px 15px),
    linear-gradient(165deg, #1f2c33 0%, var(--night-panel) 55%, var(--night-abyss) 100%);
}
/* The summit gauge leads the strip: gold rule, warmer glow, larger
   figure. Static emphasis — the grid still lays out the same way. */
.hero-stats > :first-child {
  border-top-color: var(--gold);
  box-shadow: 0 1.25rem 2rem -1.25rem rgba(9, 13, 16, 0.7),
    0 0 2rem -0.75rem rgba(227, 185, 111, 0.55);
}
.hero-stats > :first-child strong { font-size: 1.6rem; color: var(--gold); }
/* The ascent index: eight rooms previewed before the first scroll. */
.chapter-index {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem; padding: 1rem clamp(1.25rem, 4vw, 3rem) 0;
  position: relative; z-index: 3;
}
.chapter-index a {
  display: flex; align-items: baseline; gap: 0.55rem; min-width: 0;
  text-decoration: none; overflow-wrap: anywhere;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--torch); border-radius: 0.45rem;
  padding: 0.5rem 0.65rem;
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(9, 13, 16, 0.5);
}
.chapter-index a:hover, .chapter-index a:focus-visible { border-color: var(--torch); }
.ci-numeral {
  font-family: "Syne", "PingFang SC", sans-serif; font-weight: 800; font-size: 0.85rem;
  color: var(--torch-deep); flex: none;
}
html[data-theme="dark"] .ci-numeral { color: var(--torch); }
.ci-title { font-size: 0.92rem; font-weight: 700; line-height: 1.3; min-width: 0; }
/* The index previews all eight rooms: each card takes its chapter's
   gauge color on the rule and numeral. Paint only — same widths. */
.chapter-index a:nth-child(1) { border-left-color: #4f9aae; }
.chapter-index a:nth-child(2) { border-left-color: #8a5a3c; }
.chapter-index a:nth-child(3) { border-left-color: #6fa8bf; }
.chapter-index a:nth-child(4) { border-left-color: #b4502e; }
.chapter-index a:nth-child(5) { border-left-color: #7a6a4f; }
.chapter-index a:nth-child(6) { border-left-color: #4e7f6a; }
.chapter-index a:nth-child(7) { border-left-color: #6a8a3c; }
.chapter-index a:nth-child(8) { border-left-color: #7a5f9e; }
.chapter-index a:nth-child(1) .ci-numeral { color: #4f9aae; }
.chapter-index a:nth-child(2) .ci-numeral { color: #8a5a3c; }
.chapter-index a:nth-child(3) .ci-numeral { color: #6fa8bf; }
.chapter-index a:nth-child(4) .ci-numeral { color: #b4502e; }
.chapter-index a:nth-child(5) .ci-numeral { color: #7a6a4f; }
.chapter-index a:nth-child(6) .ci-numeral { color: #4e7f6a; }
.chapter-index a:nth-child(7) .ci-numeral { color: #6a8a3c; }
.chapter-index a:nth-child(8) .ci-numeral { color: #7a5f9e; }
html[data-theme="dark"] .chapter-index a:nth-child(n) .ci-numeral { filter: brightness(1.25); }
.hero-caption {
  display: block; padding: 0.85rem clamp(1.25rem, 4vw, 3rem) 0;
  font-size: 0.95rem; color: var(--ink-soft);
}
/* Citations */
.citation {
  font-family: "Syne", sans-serif; font-size: 0.72rem; font-weight: 700;
  text-decoration: none; color: var(--torch-deep);
  border: 1px solid var(--torch); border-radius: 0.25rem;
  padding: 0 0.3rem; margin-left: 0.25rem; white-space: nowrap;
}
html[data-theme="dark"] .citation { color: var(--torch); }
.hero-copy .citation, .hero-stat .citation { color: var(--torch); border-color: var(--torch); }
.credit { display: block; font-size: 0.85rem; opacity: 0.85; margin-top: 0.25rem; overflow-wrap: anywhere; }
.media-grid > * { min-width: 0; }
/* Chapter camps: the signature. Between rooms, a dark high-camp band where
   nine torch threads hang from one snowline lintel over the next room's
   numeral, seal and title. Full-bleed rhythm against the shelled chapters. */
.gate {
  position: relative; overflow: hidden; margin: 3rem 0 0.5rem;
  background:
    radial-gradient(90% 140% at 50% -20%, color-mix(in srgb, var(--torch) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night-abyss) 0%, var(--night-panel) 55%, #1f2c33 130%);
  border-top: 1px solid #33424b; border-bottom: 1px solid #33424b;
  min-width: 0;
}
.gate svg { display: block; width: 100%; height: 13.5rem; }
/* Night snow over the camp: faint dotted drift on its own layer.
   Paint only — the threads SVG keeps the band's height. */
.gate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(238, 242, 240, 0.5) 1.4px, transparent 2px),
    radial-gradient(circle at 32% 66%, rgba(238, 242, 240, 0.4) 1.2px, transparent 1.9px),
    radial-gradient(circle at 52% 30%, rgba(238, 242, 240, 0.45) 1.5px, transparent 2.2px),
    radial-gradient(circle at 68% 74%, rgba(238, 242, 240, 0.35) 1.1px, transparent 1.8px),
    radial-gradient(circle at 84% 40%, rgba(238, 242, 240, 0.5) 1.3px, transparent 2px),
    radial-gradient(circle at 93% 82%, rgba(238, 242, 240, 0.35) 1.1px, transparent 1.8px),
    radial-gradient(circle at 22% 88%, rgba(238, 242, 240, 0.4) 1.2px, transparent 1.9px),
    radial-gradient(circle at 44% 8%, rgba(238, 242, 240, 0.4) 1.2px, transparent 1.9px);
  background-size: 34rem 13.5rem;
}
.gate-line {
  stroke: var(--torch); stroke-width: 4;
  filter: drop-shadow(0 0 7px var(--torch));
}
.gate-threads line { opacity: 0.9; }
.gate-numeral {
  position: absolute; left: clamp(1rem, 6vw, 5rem); top: 50%;
  transform: translateY(-50%);
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--torch) 72%, var(--mist));
  opacity: 0.6;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--torch) 45%, transparent));
}
.gate-seal {
  position: absolute; left: 50%; top: 1.1rem; transform: translateX(-50%);
  display: inline-grid; place-items: center;
  min-width: 2.4rem; height: 2.4rem; border-radius: 1.2rem;
  padding: 0 0.5rem;
  background: rgba(9, 13, 16, 0.7); color: var(--torch);
  border: 2px solid var(--torch); font-size: 1rem;
  font-family: "Syne", sans-serif; font-weight: 800;
}
.gate-camp {
  position: absolute; left: 50%; top: 3.9rem; transform: translateX(-50%);
  max-width: calc(100% - 3rem); overflow-wrap: anywhere; white-space: nowrap;
  font-family: "Syne", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mist);
  text-shadow: 0 1px 8px rgba(9, 13, 16, 0.9);
}
.gate-title {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  width: min(46rem, calc(100% - 7rem));
  text-align: center; overflow-wrap: anywhere;
  font-family: "Syne", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-weight: 800; font-size: clamp(1.15rem, 2.8vw, 1.8rem); line-height: 1.2;
  color: var(--snow);
  text-shadow: 0 2px 14px rgba(9, 13, 16, 0.9);
}
/* Each camp borrows the accent of the room it opens into: the snowline
   lintel, seal and numeral take the next chapter's gauge color.
   Gates are the only divs directly inside main, so nth-of-type(1..7)
   addresses them in reading order. */
main > div.gate:nth-of-type(1) { --torch: #8a5a3c; }
main > div.gate:nth-of-type(2) { --torch: #6fa8bf; }
main > div.gate:nth-of-type(3) { --torch: #b4502e; }
main > div.gate:nth-of-type(4) { --torch: #7a6a4f; }
main > div.gate:nth-of-type(5) { --torch: #4e7f6a; }
main > div.gate:nth-of-type(6) { --torch: #6a8a3c; }
main > div.gate:nth-of-type(7) { --torch: #7a5f9e; }
/* Chapters */
.story-chapter { padding: 2.5rem 0 1rem; scroll-margin-top: 5rem; }
.chapter-opening { position: relative; margin-bottom: 1.5rem; }
.chapter-ghost {
  position: absolute; right: 0; top: -2.2rem;
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: clamp(4rem, 10vw, 7rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--line);
  opacity: 0.6; pointer-events: none;
}
.story-chapter[data-chapter="zapezile-care-pleaca"] .chapter-ghost {
  -webkit-text-stroke-color: var(--accent);
  opacity: 0.5;
}
/* The torch-night and book rooms strike their ghosts in accent too —
   each room's numeral carries its own gauge color. */
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .chapter-ghost,
.story-chapter[data-chapter="muntele-din-carti"] .chapter-ghost {
  -webkit-text-stroke-color: var(--accent);
  opacity: 0.5;
}
/* The torch room: the seal sits ringed like a summit stamp, and the
   pull-line reads off a torch wash. Paint only. */
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .chapter-seal {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent, var(--torch));
}
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .chapter-opening blockquote {
  background: linear-gradient(90deg, var(--wash), var(--card) 45%);
}
/* The ice room: five dotted snowlines run under the pull-line. */
.story-chapter[data-chapter="zapezile-care-pleaca"] .chapter-opening blockquote {
  background-color: var(--card);
  background-image: radial-gradient(circle at 12px 100%,
    color-mix(in srgb, var(--accent) 60%, transparent) 2.5px, transparent 3.2px);
  background-size: 26px 9px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-bottom: 1.1rem;
}
.chapter-kicker { display: flex; align-items: center; gap: 0.6rem; }
.chapter-seal {
  display: inline-grid; place-items: center;
  min-width: 2.2rem; height: 2.2rem; border-radius: 1.1rem;
  padding: 0 0.45rem;
  background: var(--night-panel); color: var(--accent, var(--torch));
  border: 1px solid var(--accent, var(--torch));
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 0.95rem; flex: none;
}
.chapter-opening h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.12; margin: 0.25rem 0 0.75rem; text-wrap: balance;
  letter-spacing: -0.01em;
}
.story-chapter[data-chapter="acoperisul-africii"] .chapter-opening h2,
.story-chapter[data-chapter="drumul-spre-varf"] .chapter-opening h2 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
}
.chapter-lead p { max-width: 68ch; }
/* Drop cap in Newsreader, not Syne: Syne 800 flattens Î's circumflex into a
   bar, so "În…" reads as "T…" (parent review 2026-10-07, also live on 065).
   Serif cap keeps full RO coverage and still contrasts the sans headings. */
.chapter-lead p:first-child::first-letter {
  font-family: "Newsreader", Georgia, serif; font-weight: 700;
  font-size: 2.6em; line-height: 0.9; float: left;
  padding: 0.08em 0.12em 0 0; color: var(--torch-deep);
}
html[lang="zh-Hans"] .chapter-lead p:first-child::first-letter {
  font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 1.6em; float: none; padding: 0 0.1em 0 0;
}
html[data-theme="dark"] .chapter-lead p:first-child::first-letter { color: var(--torch); }
.chapter-opening blockquote {
  position: relative;
  margin: 1.25rem 0 0; padding: 0.9rem 1.2rem 0.9rem 2.9rem;
  border-left: 4px solid var(--accent, var(--torch));
  background: var(--card); font-style: italic; max-width: 62ch;
  font-size: 1.16rem; line-height: 1.55;
  border-radius: 0 0.5rem 0.5rem 0;
}
.chapter-opening blockquote::before {
  content: "\201E";
  position: absolute; left: 0.75rem; top: 0.35rem;
  font-family: "Newsreader", Georgia, serif; font-style: normal;
  font-size: 2.4rem; line-height: 1;
  color: var(--accent, var(--torch));
}
html[lang="en"] .chapter-opening blockquote::before,
html[lang="zh-Hans"] .chapter-opening blockquote::before { content: "\201C"; }
.chapter-flip .chapter-opening blockquote {
  border-left: 0; border-right: 4px solid var(--accent, var(--torch));
  border-radius: 0.5rem 0 0 0.5rem;
  padding-left: 1.2rem; padding-right: 2.9rem;
}
.chapter-flip .chapter-opening blockquote::before {
  left: auto; right: 0.75rem;
}
/* The ice and ink rooms read their pull-lines off dark night glass. */
.story-chapter[data-chapter="zapezile-care-pleaca"] .chapter-opening blockquote,
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening blockquote {
  background: linear-gradient(160deg, var(--night-panel), var(--night-abyss));
  color: var(--snow);
  border: 1px solid #33424b;
  border-left: 4px solid var(--accent, var(--torch));
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(9, 13, 16, 0.6);
}
.story-chapter[data-chapter="zapezile-care-pleaca"] .chapter-opening blockquote .citation,
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening blockquote .citation {
  color: var(--torch); border-color: var(--torch);
}
/* The torch room's pull-line breathes warm light; the ice room stays cold. */
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .chapter-opening blockquote {
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(9, 13, 16, 0.6),
    0 0 2.5rem -1rem rgba(180, 80, 46, 0.5);
}
/* The route room: the seven-route claim lands before the first
   beat, so the lead reads off dark night glass. The pull stays on paper. */
.story-chapter[data-chapter="drumul-spre-varf"] .chapter-lead {
  background: linear-gradient(160deg, var(--night-panel), var(--night-abyss));
  color: var(--snow);
  border: 1px solid #33424b; border-radius: 0.7rem;
  padding: 1.1rem 1.25rem; max-width: 62rem;
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(9, 13, 16, 0.6);
}
.story-chapter[data-chapter="drumul-spre-varf"] .chapter-lead p { max-width: 62ch; margin: 0.5rem 0; }
.story-chapter[data-chapter="drumul-spre-varf"] .chapter-lead p:first-child::first-letter { color: var(--torch); }
.story-chapter[data-chapter="drumul-spre-varf"] .chapter-lead .citation { color: var(--torch); border-color: var(--torch); }
/* The coda: chapter 8 closes the ascent centered, seal ringed like a stamp. */
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening { text-align: center; }
.story-chapter[data-chapter="muntele-din-carti"] .chapter-kicker { justify-content: center; }
.story-chapter[data-chapter="muntele-din-carti"] .chapter-seal {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent, var(--torch));
}
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening h2 { margin-inline: auto; }
.story-chapter[data-chapter="muntele-din-carti"] .chapter-lead p { margin-inline: auto; }
.story-chapter[data-chapter="muntele-din-carti"] .chapter-lead p:first-child::first-letter {
  float: none; font-size: 1.35em; padding: 0 0.08em 0 0;
}
.story-chapter[data-chapter="muntele-din-carti"] .chapter-ghost {
  left: 50%; right: auto; transform: translateX(-50%); opacity: 0.35;
}
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening blockquote {
  margin-inline: auto; text-align: left;
}
/* Room treatments: each of the eight rooms reads differently, all in
   static paint — no state-dependent box ever changes size. */
/* The cones room: twin-peak rules cap every step card. */
.story-chapter[data-chapter="trei-conuri"] .story-step {
  border-top: 3px solid var(--accent);
  border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem;
}
/* The ice room: steps read off cold glass. */
.story-chapter[data-chapter="zapezile-care-pleaca"] .story-step {
  background: linear-gradient(165deg, #f4f7f6 0%, var(--card) 60%, #dfe9ec 130%);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
html[data-theme="dark"] .story-chapter[data-chapter="zapezile-care-pleaca"] .story-step {
  background: linear-gradient(165deg, #1b2830 0%, var(--card) 70%, #101820 130%);
}
/* The torch room: the active step breathes ember light. Shadows never
   move boxes, so the inset-marker rule still holds. */
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step.is-active {
  box-shadow: inset 4px 0 0 var(--accent),
    0 1.25rem 2.5rem -1.25rem rgba(9, 13, 16, 0.8),
    0 0 2.5rem -0.75rem rgba(224, 115, 47, 0.55);
}
/* The archive room: ledger cards with a dashed date rule. */
.story-chapter[data-chapter="primii-pasi"] .story-step {
  background-color: var(--card);
  background-image: repeating-linear-gradient(180deg, transparent 0 1.55rem,
    color-mix(in srgb, var(--accent) 22%, transparent) 1.55rem 1.62rem);
  border-top: 2px dashed var(--accent);
}
/* The worlds room: five strata run under the opening, echoing the
   zone schematic's bands without restating any figure. */
.story-chapter[data-chapter="cinci-lumi"] .chapter-opening::after {
  content: ""; display: block; height: 0.55rem; margin-top: 1.25rem;
  max-width: 62ch; border-radius: 0.3rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg,
    #8a7a4f 0 20%, #4e7f6a 20% 40%, #7a6a8a 40% 60%,
    #b0a58e 60% 80%, #eef2f0 80% 100%);
}
/* The coda: a book-spine double rule signs the closing pull-line. */
.story-chapter[data-chapter="muntele-din-carti"] .chapter-opening blockquote {
  border-left-width: 7px;
  border-left-style: double;
}
.chapter-layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem; align-items: start;
}
.chapter-flip .chapter-layout { direction: rtl; }
.chapter-flip .chapter-layout > * { direction: ltr; }
.chapter-layout > * { min-width: 0; }
/* Sticky stage: one instrument, six skins, chosen per beat. */
.stage-column { position: sticky; top: 5.5rem; align-self: start; min-width: 0; }
.stage-pin { position: static; min-width: 0; }
.sticky-stage, .story-steps, .story-step { min-width: 0; overflow-wrap: anywhere; }
.sticky-stage {
  background: var(--stage-bg); color: var(--snow);
  border-radius: 0.9rem; padding: 1.25rem 1.25rem 1rem;
  border: 1px solid #33424b;
  border-top: 4px solid var(--torch);
  box-shadow: 0 2rem 3rem -2rem rgba(9, 13, 16, 0.65);
  font-variant-numeric: tabular-nums;
}
.sticky-stage[data-grade="night"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(110% 55% at 50% 0%, rgba(127, 196, 212, 0.20), transparent 62%),
    linear-gradient(170deg, #162028 0%, #111a20 55%, #0b1014 100%);
  border-color: #2e4250;
}
.sticky-stage[data-grade="snow"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(34, 43, 40, 0.05) 22px 23px),
    linear-gradient(170deg, #faf6ea, #e6d9bd);
  color: var(--ink); border-color: var(--line);
}
.sticky-stage[data-grade="snow"] .stage-label,
.sticky-stage[data-grade="snow"] .stage-subline { color: var(--ink-soft); }
.sticky-stage[data-grade="snow"] .beat-art .g-thread { stroke: #35697c; }
.sticky-stage[data-grade="snow"] .beat-art .g-aux { stroke: #97a5ac; }
.sticky-stage[data-grade="snow"] .stage-note { color: var(--ink-soft); }
.sticky-stage[data-grade="snow"] .stage-kicker { color: var(--torch-deep); }
html[data-theme="dark"] .sticky-stage[data-grade="snow"] .stage-kicker { color: var(--torch); }
.sticky-stage[data-grade="snow"] .stage-citations .citation {
  color: var(--torch-deep); border-color: var(--torch);
}
html[data-theme="dark"] .sticky-stage[data-grade="snow"] .stage-citations .citation {
  color: var(--torch);
}
.sticky-stage[data-grade="snow"] .stage-gesture {
  background-color: rgba(34, 43, 40, 0.05);
  border-color: var(--line);
}
/* Ash: the old eruptions' fallout — grey strata over cooling dark. */
.sticky-stage[data-grade="ash"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(100% 55% at 50% 0%, rgba(138, 90, 60, 0.16), transparent 62%),
    linear-gradient(170deg, #2b2f33 0%, #1c2024 55%, #121518 100%);
  border-color: #424c54;
}
/* Crater: torch breath on the rim — the warmest dark skin. */
.sticky-stage[data-grade="crater"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(90% 45% at 50% 0%, rgba(196, 106, 40, 0.22), transparent 60%),
    linear-gradient(170deg, #221913 0%, #10161a 70%);
  border-color: #463626;
}
/* Dawn: first light cresting — gold haze over torch night. */
.sticky-stage[data-grade="dawn"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(120% 60% at 50% 0%, rgba(196, 106, 40, 0.20), transparent 60%),
    linear-gradient(170deg, #292117 0%, var(--stage-bg) 60%, #0b1014 100%);
  box-shadow: 0 2rem 3rem -2rem rgba(9, 13, 16, 0.65), 0 0 3rem -1rem var(--glow);
}
/* Forest: montane green at the cone's foot — deep green dark. */
.sticky-stage[data-grade="forest"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(100% 55% at 50% 0%, rgba(78, 127, 106, 0.24), transparent 62%),
    linear-gradient(170deg, #14241e 0%, #0e1a15 55%, #090f0c 100%);
  border-color: #28443a;
}
/* The instrument's linework glows faintly on dark grades; the snow
   grade keeps flat ink for contrast. Filter is paint-only. */
.sticky-stage[data-grade="night"] .beat-art,
.sticky-stage[data-grade="ash"] .beat-art,
.sticky-stage[data-grade="crater"] .beat-art,
.sticky-stage[data-grade="dawn"] .beat-art,
.sticky-stage[data-grade="forest"] .beat-art {
  filter: drop-shadow(0 0 5px rgba(127, 196, 212, 0.35));
}
.sticky-stage[data-grade="night"] .stage-value,
.sticky-stage[data-grade="ash"] .stage-value,
.sticky-stage[data-grade="crater"] .stage-value,
.sticky-stage[data-grade="dawn"] .stage-value,
.sticky-stage[data-grade="forest"] .stage-value {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.stage-gesture {
  margin-bottom: 0.75rem; border-radius: 0.55rem;
  background: rgba(9, 13, 16, 0.35);
  border: 1px solid rgba(127, 196, 212, 0.14);
  padding: 0.35rem 0.35rem 0.1rem;
  /* Surveyor's corner ticks: a HUD frame drawn in background paint,
     so the gesture box keeps its exact geometry. */
  background-image:
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch)),
    linear-gradient(var(--torch), var(--torch));
  background-size: 0.7rem 2px, 0.7rem 2px, 2px 0.7rem, 2px 0.7rem,
    0.7rem 2px, 0.7rem 2px, 2px 0.7rem, 2px 0.7rem;
  background-position: 0.3rem 0.3rem, right 0.3rem top 0.3rem,
    0.3rem 0.3rem, right 0.3rem top 0.3rem,
    0.3rem bottom 0.3rem, right 0.3rem bottom 0.3rem,
    0.3rem bottom 0.3rem, right 0.3rem bottom 0.3rem;
  background-repeat: no-repeat;
}
/* The instrument's linework frame takes the room's accent. Same width. */
.story-chapter[data-chapter] .stage-gesture {
  border-color: color-mix(in srgb, var(--accent, var(--torch)) 55%, rgba(127, 196, 212, 0.14));
}
.beat-art { display: none; width: 100%; height: auto; }
.beat-art:first-child { display: block; }
.beat-art .g-thread { fill: none; stroke: var(--mist); stroke-width: 5; }
.beat-art .g-aux { fill: none; stroke: #5d7a86; stroke-width: 3; }
.beat-art .g-mark { fill: none; stroke: var(--accent, var(--torch)); stroke-width: 4; }
.beat-art .g-dot { fill: var(--torch); }
.stage-note { font-size: 0.8rem; color: var(--mist); margin: 0 0 0.5rem; }
.stage-kicker {
  font-family: "Syne", "PingFang SC", sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--torch); margin: 0;
}
.stage-value {
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
  line-height: 1.05; margin: 0.25rem 0; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.stage-value, .stage-label { text-wrap: balance; }
.stage-label { font-weight: 700; margin: 0; color: var(--mist); }
.sticky-stage[data-grade="ash"] .stage-label,
.sticky-stage[data-grade="ash"] .stage-subline { color: #d8cfae; }
.sticky-stage[data-grade="crater"] .stage-label,
.sticky-stage[data-grade="crater"] .stage-subline { color: #e8c8a0; }
.stage-subline { font-size: 0.95rem; margin: 0.35rem 0 0; color: var(--mist); }
.stage-citations { margin-top: 0.5rem; }
.stage-citations .citation { color: var(--torch); border-color: var(--torch); }
.stage-progress { font-size: 0.8rem; opacity: 0.75; margin: 0.6rem 0 0; }
/* Each room signs its instrument: a chapter-accent rule down the stage. */
.story-chapter[data-chapter] .sticky-stage { border-left: 4px solid var(--accent, var(--torch)); }
/* Beat pips: snowline-mark progress inside the instrument. */
.stage-pips {
  display: flex; gap: 0.45rem; list-style: none; margin: 0.7rem 0 0; padding: 0;
  min-width: 0;
}
.stage-pips li span {
  display: block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: transparent; border: 2px solid var(--mist);
  opacity: 0.55;
}
.sticky-stage[data-grade="snow"] .stage-pips li span { border-color: var(--ink-soft); }
.stage-pips li.is-now span {
  background: var(--torch); border-color: var(--torch); opacity: 1;
  box-shadow: 0 0 0.6rem rgba(196, 106, 40, 0.8);
}
/* Steps: each card carries an outlined step numeral, and a torch
   climbing thread runs beside the column on wide screens. Both are
   absolutely positioned, so step heights — and the reading line —
   never move. */
.story-steps { position: relative; counter-reset: kili-step; }
.story-steps::before {
  content: ""; position: absolute; left: -1rem; top: 1.5rem; bottom: 1.5rem;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent, var(--torch)), var(--line) 85%);
  opacity: 0.7;
}
.story-step {
  position: relative;
  counter-increment: kili-step;
  padding: 1.25rem 1.25rem 1.5rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: var(--card); scroll-margin-top: 6rem;
  box-shadow: 0 1rem 2rem -1.5rem rgba(34, 43, 40, 0.35);
}
.story-step::after {
  content: "0" counter(kili-step);
  position: absolute; top: 0.85rem; right: 1.1rem;
  font-family: "Syne", "PingFang SC", sans-serif; font-weight: 800;
  font-size: 1.15rem; line-height: 1; letter-spacing: 0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line);
  pointer-events: none;
}
.story-step.is-active::after {
  color: var(--accent, var(--torch));
  -webkit-text-stroke-color: var(--accent, var(--torch));
  opacity: 0.85;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent, var(--torch)) 50%, transparent));
}
/* Active marker is an INSET shadow, never a wider border: border-left
   1px→5px under border-box narrows the content box 4px on activation,
   reflowing text +1 line (+28px measured on the template) and pushing
   beats below the reading line — freezing stale stages. */
.story-step.is-active {
  border-color: var(--accent, var(--torch));
  box-shadow: inset 4px 0 0 var(--accent, var(--torch)),
    0 1.25rem 2.5rem -1.25rem rgba(34, 43, 40, 0.45);
}
.step-kicker {
  font-family: "Syne", "PingFang SC", sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--torch-deep); margin: 0 0 0.4rem;
  padding-right: 2.75rem;
}
html[data-theme="dark"] .step-kicker { color: var(--torch); }
.story-step h3 { margin: 0 0 0.4rem; font-size: 1.3rem; line-height: 1.25; }
.step-subline { font-weight: 700; margin: 0 0 0.5rem; }
.step-copy { margin: 0; }
/* The torch room reads its steps off dark summit-night glass: dim air,
   dim light. Paint only — padding and borders stay identical. */
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step {
  background: linear-gradient(165deg, #1f2c33 0%, #111a20 70%, #0b1014 100%);
  border-color: #33424b;
  color: var(--snow);
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(9, 13, 16, 0.7);
}
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .step-kicker { color: var(--torch); }
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step h3 { color: var(--snow); }
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .step-subline { color: var(--mist); }
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .step-copy { color: #d8cfae; }
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step .citation {
  color: var(--torch); border-color: var(--torch);
}
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step.is-active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent),
    0 1.25rem 2.5rem -1.25rem rgba(9, 13, 16, 0.8);
}
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step::after {
  -webkit-text-stroke-color: #44545e;
}
.story-chapter[data-chapter="de-la-kaiser-la-uhuru"] .story-step.is-active::after {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}
/* Media galleries */
.chapter-media { margin-top: 1.5rem; }
.media-grid { display: grid; gap: 1.25rem; }
@media (min-width: 1100px) {
  .media-grid:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
  .media-grid:has(> :nth-child(2)) > :first-child { grid-column: 1 / -1; }
}
.media-grid figure { margin: 0; min-width: 0; }
/* Evidence prints mount on card plates; narrow frames centre instead
   of hugging the gutter. Static geometry, grid-safe. */
.photo-figure {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.55rem 0.55rem 0.75rem;
}
.photo-figure img { margin-inline: auto; }
.photo-figure figcaption { margin-inline: 0.2rem; }
/* K07 is evidence, not scenery: the NASA pair reads as a data graphic
   on dark instrument glass, capped so it never goes full-bleed. */
.photo-figure[data-photo="k07-nasa-pair"] {
  background: linear-gradient(165deg, #1f2c33 0%, var(--night-panel) 55%, var(--night-abyss) 100%);
  border: 1px dashed var(--mist);
  max-width: 34rem; margin-inline: auto; width: 100%;
}
.photo-figure[data-photo="k07-nasa-pair"] figcaption { color: var(--mist); }
.photo-figure[data-photo="k07-nasa-pair"] .caption-copy { color: var(--snow); }
.photo-figure[data-photo="k07-nasa-pair"] .citation { color: var(--torch); border-color: var(--torch); }
.photo-figure img, .map-figure img, .diagram-figure img {
  border-radius: 0.6rem; border: 1px solid var(--line);
  box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(9, 13, 16, 0.55);
  /* Torch-night developing plate: while a lazy frame is still on its
     way, the reserved box reads as intentional dark glass, never a
     broken white void. */
  background: linear-gradient(160deg, #1f2c33 0%, #111a20 60%, #090d10 100%);
}
/* Torch-room grade on the prints; the full frame returns on hover. */
.photo-figure img {
  filter: saturate(1.02) contrast(1.01);
}
.map-figure img, .diagram-figure img {
  border-color: #33424b;
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(9, 13, 16, 0.7);
}
.photo-figure figcaption, .map-figure figcaption, .diagram-figure figcaption {
  font-size: 0.92rem; color: var(--ink-soft); padding-top: 0.5rem;
  border-left: 2px solid var(--accent, var(--torch)); padding-left: 0.75rem;
  margin-top: 0.5rem;
}
/* Each room frames its evidence in its own accent. */
.photo-figure img { border-top: 3px solid var(--accent, var(--torch)); }
.map-figure img, .diagram-figure img { border-top: 3px solid var(--torch); }
/* Route-gauge instrument (pure CSS state) */
.sounding {
  margin: 0 0 1.5rem; padding: 1.25rem;
  background: linear-gradient(165deg, #1f2c33 0%, var(--night-panel) 50%, var(--night-abyss) 100%);
  color: var(--snow);
  border-radius: 0.9rem; border: 1px solid #33424b;
  border-top: 4px solid var(--torch);
  box-shadow: 0 2rem 3rem -2rem rgba(9, 13, 16, 0.7);
  font-variant-numeric: tabular-nums;
}
.sounding .eyebrow { color: var(--torch); }
.sounding h3 { margin: 0.25rem 0 0.5rem; font-size: 1.4rem; }
.sounding-note { font-size: 0.92rem; color: var(--mist); margin: 0 0 0.5rem; }
.dispute-tag { font-size: 0.9rem; margin: 0 0 1rem; }
.dispute-tag .citation { color: var(--torch); border-color: var(--torch); }
.sounding-instrument { border: 0; padding: 0; margin: 0; }
.snd-stop { position: absolute; opacity: 0; }
.snd-stops { position: relative; padding-left: 2rem; margin-bottom: 1rem; }
.snd-line {
  position: absolute; left: 0.6rem; top: 0.4rem; bottom: 0.4rem;
  border-left: 3px dashed var(--mist);
}
/* The plumb anchor: a small torch diamond capping the dashed route line,
   marking where the gauge hangs. Decorative; the radios carry meaning. */
.plumb {
  position: absolute; left: calc(0.6rem - 5px); top: 0.1rem;
  width: 0.65rem; height: 0.65rem; transform: rotate(45deg);
  background: var(--night-panel); border: 2px solid var(--torch);
}
.snd-tick {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.8rem; margin-bottom: 0.4rem;
  border: 1px solid #33424b; border-radius: 0.5rem; cursor: pointer;
}
.snd-tick:hover { border-color: var(--mist); }
.snd-name { font-weight: 700; }
.snd-tick-value { color: var(--torch); font-weight: 700; }
#snd-0:checked ~ .snd-stops label[for="snd-0"],
#snd-1:checked ~ .snd-stops label[for="snd-1"],
#snd-2:checked ~ .snd-stops label[for="snd-2"],
#snd-3:checked ~ .snd-stops label[for="snd-3"],
#snd-4:checked ~ .snd-stops label[for="snd-4"],
#snd-5:checked ~ .snd-stops label[for="snd-5"],
#snd-6:checked ~ .snd-stops label[for="snd-6"] {
  border-color: var(--torch); background: rgba(196, 106, 40, 0.12);
  box-shadow: 0 0 1.5rem -0.5rem rgba(196, 106, 40, 0.5);
}
.snd-read { display: none; border-top: 1px solid #33424b; padding-top: 0.9rem; }
#snd-0:checked ~ .snd-readouts [data-snd="0"],
#snd-1:checked ~ .snd-readouts [data-snd="1"],
#snd-2:checked ~ .snd-readouts [data-snd="2"],
#snd-3:checked ~ .snd-readouts [data-snd="3"],
#snd-4:checked ~ .snd-readouts [data-snd="4"],
#snd-5:checked ~ .snd-readouts [data-snd="5"],
#snd-6:checked ~ .snd-readouts [data-snd="6"] { display: block; }
.snd-value { font-family: "Syne", "PingFang SC", sans-serif; font-size: 1.9rem; font-weight: 800; margin: 0; color: #e3b96f; }
.snd-label { font-weight: 700; color: var(--mist); margin: 0.25rem 0; }
.snd-label .citation, .snd-subline .citation { color: var(--torch); border-color: var(--torch); }
.snd-subline { font-size: 0.92rem; color: var(--mist); margin: 0; }
/* Sources, footer */
.sources { padding: 2.5rem 0; scroll-margin-top: 5rem; }
.sources h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.25rem 0 0.5rem; }
.sources ol { padding-left: 0; list-style: none; }
.sources li {
  margin-bottom: 0.8rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--torch);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 0.75rem 1.5rem -1.1rem rgba(9, 13, 16, 0.45);
}
.sources li:hover { border-color: var(--torch); }
.sources li p { margin: 0.2rem 0; font-size: 0.95rem; color: var(--ink-soft); }
.sources li a { overflow-wrap: anywhere; font-size: 0.85rem; }
.source-status { font-family: "Syne", sans-serif; font-size: 0.75rem; font-weight: 700; }
.site-footer {
  border-top: 2px solid var(--line); padding: 1.5rem 0 3rem;
  display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: baseline;
  font-size: 0.95rem; color: var(--ink-soft);
}
.site-footer p { margin: 0; }
.site-footer a { text-underline-offset: 3px; }
.site-footer a:hover { color: var(--torch-deep); }
html[data-theme="dark"] .site-footer a:hover { color: var(--torch); }
/* Reading rail */
.reading-rail {
  position: fixed; right: 0.55rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 0.22rem; z-index: 40;
  max-height: 86vh; overflow: hidden; padding: 0.5rem 0.25rem;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(6px);
}
.rail-river {
  position: absolute; left: 50%; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: var(--line); transform: translateX(-50%);
  border-radius: 2px; overflow: hidden;
}
.rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(var(--mist), var(--torch));
}
.reading-rail a {
  position: relative; display: block; width: 1.6rem; height: 1.1rem;
  text-decoration: none;
}
.reading-rail a span {
  position: absolute; left: 50%; top: 50%;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper); border: 2px solid var(--ink-soft);
}
.reading-rail a.rail-step span { width: 0.4rem; height: 0.4rem; }
/* Each chapter dot carries its room's gauge color, so the rail reads
   as a legend of the ascent. Paint only — dot geometry untouched. */
.reading-rail a[href="#acoperisul-africii"] span { border-color: #4f9aae; }
.reading-rail a[href="#trei-conuri"] span { border-color: #8a5a3c; }
.reading-rail a[href="#zapezile-care-pleaca"] span { border-color: #6fa8bf; }
.reading-rail a[href="#de-la-kaiser-la-uhuru"] span { border-color: #b4502e; }
.reading-rail a[href="#primii-pasi"] span { border-color: #7a6a4f; }
.reading-rail a[href="#drumul-spre-varf"] span { border-color: #4e7f6a; }
.reading-rail a[href="#cinci-lumi"] span { border-color: #6a8a3c; }
.reading-rail a[href="#muntele-din-carti"] span { border-color: #7a5f9e; }
.reading-rail a[aria-current] span {
  background: var(--torch); border-color: var(--torch-deep);
  box-shadow: 0 0 0.6rem rgba(196, 106, 40, 0.8);
}
.reading-rail a::after {
  content: attr(data-label);
  position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.75rem; font-weight: 700;
  background: var(--night-panel); color: var(--snow);
  padding: 0.15rem 0.55rem; border-radius: 0.3rem;
  opacity: 0; pointer-events: none;
}
.reading-rail a:hover::after, .reading-rail a:focus-visible::after { opacity: 1; }
.rail-marker {
  position: absolute; left: 50%; top: 0;
  width: 1rem; height: 1rem; border-radius: 50%;
  transform: translate(-50%, 0);
  border: 2px solid var(--torch); pointer-events: none;
  box-shadow: 0 0 0.5rem rgba(196, 106, 40, 0.55);
}
/* The torch mark rides in the current room's accent. */
body[data-chapter="acoperisul-africii"] .rail-marker { border-color: #4f9aae; box-shadow: 0 0 0.5rem rgba(79, 154, 174, 0.6); }
body[data-chapter="trei-conuri"] .rail-marker { border-color: #8a5a3c; box-shadow: 0 0 0.5rem rgba(138, 90, 60, 0.6); }
body[data-chapter="zapezile-care-pleaca"] .rail-marker { border-color: #6fa8bf; box-shadow: 0 0 0.5rem rgba(111, 168, 191, 0.6); }
body[data-chapter="de-la-kaiser-la-uhuru"] .rail-marker { border-color: #b4502e; box-shadow: 0 0 0.5rem rgba(180, 80, 46, 0.6); }
body[data-chapter="primii-pasi"] .rail-marker { border-color: #7a6a4f; box-shadow: 0 0 0.5rem rgba(122, 106, 79, 0.6); }
body[data-chapter="drumul-spre-varf"] .rail-marker { border-color: #4e7f6a; box-shadow: 0 0 0.5rem rgba(78, 127, 106, 0.6); }
body[data-chapter="cinci-lumi"] .rail-marker { border-color: #6a8a3c; box-shadow: 0 0 0.5rem rgba(106, 138, 60, 0.6); }
body[data-chapter="muntele-din-carti"] .rail-marker { border-color: #7a5f9e; box-shadow: 0 0 0.5rem rgba(122, 95, 158, 0.6); }
/* The lit dot burns in the room's accent too — the rail always tells
   you which room you stand in. Paint only. */
body[data-chapter="acoperisul-africii"] .reading-rail a[aria-current] span { background: #4f9aae; border-color: #4f9aae; box-shadow: 0 0 0.6rem rgba(79, 154, 174, 0.8); }
body[data-chapter="trei-conuri"] .reading-rail a[aria-current] span { background: #8a5a3c; border-color: #8a5a3c; box-shadow: 0 0 0.6rem rgba(138, 90, 60, 0.8); }
body[data-chapter="zapezile-care-pleaca"] .reading-rail a[aria-current] span { background: #6fa8bf; border-color: #6fa8bf; box-shadow: 0 0 0.6rem rgba(111, 168, 191, 0.8); }
body[data-chapter="de-la-kaiser-la-uhuru"] .reading-rail a[aria-current] span { background: #b4502e; border-color: #b4502e; box-shadow: 0 0 0.6rem rgba(180, 80, 46, 0.8); }
body[data-chapter="primii-pasi"] .reading-rail a[aria-current] span { background: #7a6a4f; border-color: #7a6a4f; box-shadow: 0 0 0.6rem rgba(122, 106, 79, 0.8); }
body[data-chapter="drumul-spre-varf"] .reading-rail a[aria-current] span { background: #4e7f6a; border-color: #4e7f6a; box-shadow: 0 0 0.6rem rgba(78, 127, 106, 0.8); }
body[data-chapter="cinci-lumi"] .reading-rail a[aria-current] span { background: #6a8a3c; border-color: #6a8a3c; box-shadow: 0 0 0.6rem rgba(106, 138, 60, 0.8); }
body[data-chapter="muntele-din-carti"] .reading-rail a[aria-current] span { background: #7a5f9e; border-color: #7a5f9e; box-shadow: 0 0 0.6rem rgba(122, 95, 158, 0.8); }
/* To-top + status */
.to-top {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 40;
  display: flex; gap: 0.4rem; align-items: center;
  background: var(--night-panel); color: var(--snow);
  border: 1px solid var(--torch); border-radius: 999px;
  padding: 0.55rem 1rem; cursor: pointer; font-size: 0.9rem;
}
.to-top[hidden] { display: none; }
#share-status:empty { display: none; }
#share-status {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: var(--night-panel); color: var(--snow);
  padding: 0.5rem 1rem; border-radius: 0.4rem; z-index: 60;
}
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--torch); outline-offset: 2px;
}
.sounding-instrument:focus-within .snd-stops {
  outline: 3px solid var(--torch); outline-offset: 2px;
}
/* Choreography: everything stays visible unless motion is welcome AND
   JavaScript confirmed enhancement. Captures emulate reduced motion,
   and no-JS readers never set data-enhanced, so both keep full text. */
@media (prefers-reduced-motion: no-preference) {
  html[data-enhanced="true"] .chapter-opening,
  html[data-enhanced="true"] .story-step,
  html[data-enhanced="true"] .chapter-media figure,
  html[data-enhanced="true"] .sounding,
  html[data-enhanced="true"] .gate,
  html[data-enhanced="true"] .hero-stats,
  html[data-enhanced="true"] .chapter-index {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  html[data-enhanced="true"] .is-inview {
    opacity: 1; transform: none;
  }
  html[data-enhanced="true"] .story-steps > :nth-child(2) { transition-delay: 0.06s; }
  html[data-enhanced="true"] .story-steps > :nth-child(3) { transition-delay: 0.12s; }
  html[data-enhanced="true"] .story-steps > :nth-child(4) { transition-delay: 0.18s; }
  /* Flipped rooms arrive from the other side; the override below keeps
     the settled state exact (higher specificity than the diagonal). */
  html[data-enhanced="true"] .chapter-flip .story-step { transform: translate(-30px, 18px); }
  html[data-enhanced="true"] .story-chapter:not(.chapter-flip) .story-step { transform: translate(30px, 18px); }
  html[data-enhanced="true"] .story-step.is-inview { transform: none; }
  /* The gauges file in one after another on arrival; the container's
     own reveal still guards readers who land mid-page. */
  .hero-stat { animation: hero-copy-in 0.8s ease-out backwards; }
  .hero-stats > :nth-child(2) { animation-delay: 0.35s; }
  .hero-stats > :nth-child(3) { animation-delay: 0.45s; }
  .hero-stats > :nth-child(4) { animation-delay: 0.55s; }
  .hero-peak { animation: hero-settle 1.6s ease-out; }
  @keyframes hero-settle {
    from { transform: scale(1.045); } to { transform: scale(1); }
  }
  .hero-threads { animation: thread-drift 11s linear infinite; }
  @keyframes thread-drift {
    from { background-position-y: 0; } to { background-position-y: 236px; }
  }
  /* The summit figure breathes against the sky; the camp snow sifts
     down. Transform/position-only ambient loops — captures disable all
     animation, reduced-motion kills them, no-JS keeps the rest state. */
  .hero-ghost { animation: ghost-breathe 9s ease-in-out infinite; }
  @keyframes ghost-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
  }
  .gate::after { animation: snow-sift 16s linear infinite; }
  @keyframes snow-sift {
    from { background-position-y: 0; } to { background-position-y: 13.5rem; }
  }
  .scroll-cue .cue-line { animation: cue-rise 2.2s ease-in-out infinite; }
  @keyframes cue-rise {
    0% { transform: scaleY(0); transform-origin: bottom; }
    55% { transform: scaleY(1); transform-origin: bottom; }
    56% { transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: top; }
  }
  .gate-threads line { animation: gate-rise 3.2s ease-in-out infinite; }
  @keyframes gate-rise {
    0%, 100% { transform: translateY(7px); opacity: 0.5; }
    50% { transform: translateY(-9px); opacity: 1; }
  }
  .gate-line { animation: gate-shimmer 5s ease-in-out infinite; }
  @keyframes gate-shimmer {
    0%, 100% { opacity: 0.7; } 50% { opacity: 1; }
  }
  .beat-art .g-thread {
    stroke-dasharray: 11 9;
    animation: gauge-flow 1.8s linear infinite;
  }
  @keyframes gauge-flow {
    from { stroke-dashoffset: 0; } to { stroke-dashoffset: 40; }
  }
  .sticky-stage.is-swap [data-stage-kicker],
  .sticky-stage.is-swap [data-stage-value],
  .sticky-stage.is-swap [data-stage-label],
  .sticky-stage.is-swap [data-stage-subline] {
    animation: stage-in 0.45s ease;
  }
  .sticky-stage.is-swap [data-stage-label] { animation-delay: 0.05s; }
  .sticky-stage.is-swap [data-stage-subline] { animation-delay: 0.1s; }
  @keyframes stage-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  .sticky-stage.is-swap .stage-gesture { animation: stage-in 0.4s ease; }
  html[data-enhanced="true"] .chapter-media figure,
  html[data-enhanced="true"] .chapter-index a {
    transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  html[data-enhanced="true"] .story-step {
    transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  html[data-enhanced="true"] .story-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 1.5rem 2.75rem -1.25rem rgba(9, 13, 16, 0.5);
  }
  html[data-enhanced="true"] .story-step.is-active:hover {
    box-shadow: inset 4px 0 0 var(--accent, var(--torch)),
      0 1.5rem 2.75rem -1.25rem rgba(9, 13, 16, 0.5);
  }
  .hero-stat { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .hero-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.75rem 2.5rem -1.25rem rgba(9, 13, 16, 0.75);
  }
  html[data-enhanced="true"] .chapter-media figure:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.75rem 2.75rem -1.5rem rgba(9, 13, 16, 0.55);
  }
  html[data-enhanced="true"] .chapter-index a:hover {
    transform: translateY(-2px);
  }
  .photo-figure img { transition: filter 0.45s ease; }
  .photo-figure:hover img { filter: none; }
  /* First viewport entrance: the headline and deck rise out of the
     weather. Keyframe-only, ending at the natural state, so no-JS
     and reduced-motion readers always land on full text. */
  .hero-copy > * { animation: hero-copy-in 0.9s ease-out both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  @keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
  .hero-media::before { animation: hero-dawn 2.6s ease-out 0.35s 1; }
  @keyframes hero-dawn {
    0% { opacity: 0; transform: translateX(-38%); }
    22% { opacity: 1; }
    60% { opacity: 0.55; }
    100% { opacity: 0; transform: translateX(38%); }
  }
  /* Each newly shown beat gesture draws itself in; the animation
     restarts every time the layer flips from display:none. */
  .sticky-stage .beat-art { animation: beat-in 0.5s ease; }
  @keyframes beat-in {
    from { opacity: 0.15; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
  .stage-pips li.is-now span { animation: pip-pulse 2.4s ease-in-out infinite; }
  @keyframes pip-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
  }
  /* The route-gauge readout lands softly on every radio change. */
  .snd-read { animation: snd-in 0.45s ease; }
  @keyframes snd-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 900px) {
  .chapter-layout { grid-template-columns: 1fr; }
  .stage-column { position: sticky; top: 6rem; z-index: 5; }
  .top-jumps { display: none; }
  .chapter-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Single column: no gap for the climbing thread, numerals carry it. */
  .story-steps::before { display: none; }
}
@media (max-width: 740px) {
  body { font-size: 1.05rem; }
  .shell { padding-right: 3.4rem; }
  .site-header { gap: 0.5rem; }
  .wordmark { font-size: 0.85rem; white-space: nowrap; }
  .wordmark-full { display: none; }
  .wordmark-short { display: inline; }
  .header-actions { gap: 0.35rem; margin-left: auto; }
  html[lang="ro"] .language-switch a[lang="ro"],
  html[lang="en"] .language-switch a[lang="en"],
  html[lang="zh-Hans"] .language-switch a[lang="zh-Hans"] { display: none; }
  #theme-control, #copy-link { width: 1.8rem; height: 1.8rem; font-size: 0.9rem; }
  .reading-rail { right: 0.25rem; }
  .reading-rail a.rail-step { display: none; }
  .hero, .story-chapter, .sources, .site-footer { margin-right: 3.4rem; }
  .gate { margin-right: 3.4rem; }
  .gate svg { height: 9.5rem; }
  .gate-numeral { font-size: 2.6rem; opacity: 0.4; }
  .gate-seal { min-width: 2rem; height: 2rem; font-size: 0.85rem; top: 0.8rem; }
  .gate-title { width: calc(100% - 3rem); bottom: 0.9rem; }
  .hero-peak, .hero-curtain { min-height: clamp(26rem, 78svh, 44rem); }
  .hero-copy { padding-bottom: 3.6rem; min-width: 0; }
  /* Parent review 2026-10-07: hero h1 clipped on 320/390px phones. Real
     Syne-800 at the 2.7rem desktop minimum sets "Kilimanjaro:" ~300px+,
     wider than the ~254px content box; the grid item's min-width:auto
     blew the h1 to 392px and hero-media's overflow:hidden silently cut
     ~98px (gate-blind: overflow:hidden masks document scrollWidth).
     Cap the mobile size so the longest word fits, and belt-and-braces
     the wrap so no future word can clip again. */
  .hero-copy h1 {
    font-size: clamp(1.8rem, 8.5vw, 2rem);
    min-width: 0; max-width: 100%;
    hyphens: auto; overflow-wrap: break-word;
  }
  /* The ghost sits top-left on phones, clear of the scroll-cue line. */
  .hero-ghost {
    top: 0.25rem; right: auto; left: 0.75rem;
    font-size: clamp(4rem, 26vw, 6rem);
    opacity: 0.35;
  }
  .gate-camp { top: 3.1rem; letter-spacing: 0.22em; }
  .scroll-cue { bottom: auto; top: 1rem; }
  .scroll-cue span:first-child { display: none; }
  .hero-stats { margin-top: -2.25rem; }
  .ci-title { font-size: 0.85rem; }
  .chapter-ghost { top: -1.4rem; }
  /* PROVISIONAL stage minima — parent MUST re-measure. Beat swaps change
     stage text, which wraps to different heights per beat and shifts every
     chapter below on scroll, freezing stale stages on the template. The
     template's measured values do NOT transfer: Kilimanjaro stages carry
     different copy, six skins, and different panel figures; this scaffold
     ran no browser, so no measurement was possible here. Values below
     are uniform placeholders until the parent drives every beat active at
     320+390px in all editions and records
     max-height × RO/EN/ZH × 320/390 + 8px margin per chapter id. */
  #acoperisul-africii .sticky-stage { min-height: 500px; }
  #trei-conuri .sticky-stage { min-height: 500px; }
  #zapezile-care-pleaca .sticky-stage { min-height: 500px; }
  #de-la-kaiser-la-uhuru .sticky-stage { min-height: 500px; }
  #primii-pasi .sticky-stage { min-height: 500px; }
  #drumul-spre-varf .sticky-stage { min-height: 500px; }
  #cinci-lumi .sticky-stage { min-height: 500px; }
  #muntele-din-carti .sticky-stage { min-height: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}