/* Mount Fuji — the crater and the dawn lintel.
   Warm washi reading rooms against ember-night instrument panels; ember
   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: #f4efe4;
  --paper-soft: #e7dcc6;
  --ink: #232a2e;
  --ink-soft: #55606a;
  --night: #141a20;
  --night-abyss: #0c0f13;
  --night-panel: #1d232b;
  --lake: #5f8a9c;
  --mist: #7fb6c9;
  --snow: #f2ede2;
  --ember: #c08a2e;
  --ember-deep: #8a5f1a;
  --line: #d6cfba;
  --card: #faf6ec;
  --stage-bg: #16202a;
  --glow: rgba(127, 182, 201, 0.16);
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: #101418;
  --paper-soft: #182028;
  --ink: #f2ede2;
  --ink-soft: #9aa8b4;
  --line: #3a4a5c;
  --card: #182028;
  --glow: rgba(216, 160, 60, 0.10);
  color-scheme: dark;
}
/* Per-chapter accents: the same dawn, a different gauge in each room. */
.story-chapter[data-chapter="muntele"] { --accent: #55a0b4; --wash: rgba(85, 160, 180, 0.10); }
.story-chapter[data-chapter="eruptia-hoei"] { --accent: #a04a30; --wash: rgba(160, 74, 48, 0.10); }
.story-chapter[data-chapter="muntele-sacru"] { --accent: #b5482f; --wash: rgba(181, 72, 47, 0.10); }
.story-chapter[data-chapter="fuji-in-arta"] { --accent: #2f5f8a; --wash: rgba(47, 95, 138, 0.12); }
.story-chapter[data-chapter="masina-de-urcat"] { --accent: #5b8a5e; --wash: rgba(91, 138, 94, 0.12); }
.story-chapter[data-chapter="regulile-muntelui"] { --accent: #b08a3c; --wash: rgba(176, 138, 60, 0.10); }
.story-chapter[data-chapter="cele-cinci-lacuri"] { --accent: #3f7f8c; --wash: rgba(63, 127, 140, 0.10); }
.story-chapter[data-chapter="vulcanul-viu"] { --accent: #c05a2e; --wash: rgba(192, 90, 46, 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 dawn 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="muntele"] { --chapter-wash: rgba(85, 160, 180, 0.14); }
body[data-chapter="eruptia-hoei"] { --chapter-wash: rgba(160, 74, 48, 0.12); }
body[data-chapter="muntele-sacru"] { --chapter-wash: rgba(181, 72, 47, 0.12); }
body[data-chapter="fuji-in-arta"] { --chapter-wash: rgba(47, 95, 138, 0.14); }
body[data-chapter="masina-de-urcat"] { --chapter-wash: rgba(91, 138, 94, 0.16); }
body[data-chapter="regulile-muntelui"] { --chapter-wash: rgba(176, 138, 60, 0.12); }
body[data-chapter="cele-cinci-lacuri"] { --chapter-wash: rgba(63, 127, 140, 0.10); }
body[data-chapter="vulcanul-viu"] { --chapter-wash: rgba(192, 90, 46, 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(--ember); 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(--ember); 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(--ember-deep);
  margin: 0 0 0.75rem;
}
html[lang="zh-Hans"] .eyebrow { letter-spacing: 0.32em; }
html[data-theme="dark"] .eyebrow { color: var(--ember); }
/* 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(--ember); 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 cone 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(12, 15, 19, 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(--lake) 130%);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,15,19,0.36) 0%, rgba(12,15,19,0.05) 30%, rgba(12,15,19,0.22) 55%, rgba(12,15,19,0.9) 100%);
}
/* First light: a single dawn 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(232, 200, 126, 0.28) 50%, transparent 58%);
}
/* A breath of dawn 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(12, 15, 19, 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(216, 180, 160, 0.05) 46px 48px,
      transparent 48px 110px),
    repeating-linear-gradient(115deg,
      transparent 0 9px, rgba(216, 180, 160, 0.035) 9px 10px,
      transparent 10px 31px),
    radial-gradient(38% 30% at 22% 18%, rgba(216, 180, 160, 0.10), transparent 70%),
    radial-gradient(30% 26% at 78% 34%, rgba(216, 180, 160, 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: #f2ede2;
}
.hero-copy .eyebrow { color: var(--ember); }
.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(--ember), transparent);
}
.hero-seal {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  color: var(--ember); font-size: 1.25rem; line-height: 1;
  border: 2px solid var(--ember);
  background: rgba(12, 15, 19, 0.55);
  box-shadow: 0 0 1.2rem -0.2rem rgba(192, 138, 46, 0.7);
}
.hero-copy h1 {
  font-size: clamp(2.7rem, 7vw, 5.6rem); line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0.25rem 0 0.9rem; max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(12, 15, 19, 0.8), 0 1px 3px rgba(12, 15, 19, 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(12, 15, 19, 0.8);
}
.hero-cold-open {
  max-width: 62ch; margin: 0.9rem 0 0;
  font-style: italic;
  border-left: 3px solid var(--ember); padding: 0.6rem 1rem 0.6rem 0.9rem;
  background: rgba(12, 15, 19, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 0 0.5rem 0.5rem 0;
  text-shadow: 0 1px 8px rgba(12, 15, 19, 0.8);
}
/* The way up: an ember 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(12, 15, 19, 0.9);
}
.scroll-cue .cue-line {
  display: block; width: 2px; height: 2.6rem;
  background: linear-gradient(var(--ember), 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, #252d36 0%, var(--night-panel) 55%, var(--night-abyss) 100%);
  color: var(--snow);
  border-radius: 0.6rem; padding: 0.8rem 1rem;
  border: 1px solid #3a4a5c;
  border-top: 3px solid var(--ember);
  box-shadow: 0 1.25rem 2rem -1.25rem rgba(12, 15, 19, 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, 182, 201, 0.08) 14px 15px),
    linear-gradient(165deg, #252d36 0%, var(--night-panel) 55%, var(--night-abyss) 100%);
}
/* 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(--ember); border-radius: 0.45rem;
  padding: 0.5rem 0.65rem;
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(12, 15, 19, 0.5);
}
.chapter-index a:hover, .chapter-index a:focus-visible { border-color: var(--ember); }
.ci-numeral {
  font-family: "Syne", "PingFang SC", sans-serif; font-weight: 800; font-size: 0.85rem;
  color: var(--ember-deep); flex: none;
}
html[data-theme="dark"] .ci-numeral { color: var(--ember); }
.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: #55a0b4; }
.chapter-index a:nth-child(2) { border-left-color: #a04a30; }
.chapter-index a:nth-child(3) { border-left-color: #b5482f; }
.chapter-index a:nth-child(4) { border-left-color: #2f5f8a; }
.chapter-index a:nth-child(5) { border-left-color: #5b8a5e; }
.chapter-index a:nth-child(6) { border-left-color: #b08a3c; }
.chapter-index a:nth-child(7) { border-left-color: #3f7f8c; }
.chapter-index a:nth-child(8) { border-left-color: #c05a2e; }
.chapter-index a:nth-child(1) .ci-numeral { color: #55a0b4; }
.chapter-index a:nth-child(2) .ci-numeral { color: #a04a30; }
.chapter-index a:nth-child(3) .ci-numeral { color: #b5482f; }
.chapter-index a:nth-child(4) .ci-numeral { color: #2f5f8a; }
.chapter-index a:nth-child(5) .ci-numeral { color: #5b8a5e; }
.chapter-index a:nth-child(6) .ci-numeral { color: #b08a3c; }
.chapter-index a:nth-child(7) .ci-numeral { color: #3f7f8c; }
.chapter-index a:nth-child(8) .ci-numeral { color: #c05a2e; }
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(--ember-deep);
  border: 1px solid var(--ember); border-radius: 0.25rem;
  padding: 0 0.3rem; margin-left: 0.25rem; white-space: nowrap;
}
html[data-theme="dark"] .citation { color: var(--ember); }
.hero-copy .citation, .hero-stat .citation { color: var(--ember); border-color: var(--ember); }
.credit { display: block; font-size: 0.85rem; opacity: 0.85; margin-top: 0.25rem; overflow-wrap: anywhere; }
.media-grid > * { min-width: 0; }
/* Chapter gates: the signature. Between rooms, a dark torii band where
   nine ember threads hang from one dawn 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(--ember) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night-abyss) 0%, var(--night-panel) 55%, #252d36 130%);
  border-top: 1px solid #3a4a5c; border-bottom: 1px solid #3a4a5c;
  min-width: 0;
}
.gate svg { display: block; width: 100%; height: 12rem; }
.gate-line {
  stroke: var(--ember); stroke-width: 4;
  filter: drop-shadow(0 0 7px var(--ember));
}
.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(--ember) 72%, var(--mist));
  opacity: 0.6;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ember) 45%, transparent));
}
.gate-seal {
  position: absolute; left: 50%; top: 1.1rem; transform: translateX(-50%);
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(12, 15, 19, 0.7); color: var(--ember);
  border: 2px solid var(--ember); font-size: 1.2rem;
}
.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(12, 15, 19, 0.9);
}
/* Each gate borrows the accent of the room it opens into: the dawn
   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) { --ember: #a04a30; }
main > div.gate:nth-of-type(2) { --ember: #b5482f; }
main > div.gate:nth-of-type(3) { --ember: #2f5f8a; }
main > div.gate:nth-of-type(4) { --ember: #5b8a5e; }
main > div.gate:nth-of-type(5) { --ember: #b08a3c; }
main > div.gate:nth-of-type(6) { --ember: #3f7f8c; }
main > div.gate:nth-of-type(7) { --ember: #c05a2e; }
/* 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="eruptia-hoei"] .chapter-ghost {
  -webkit-text-stroke-color: var(--accent);
  opacity: 0.5;
}
/* The Prussian-blue and lake rooms strike their ghosts in accent too —
   each room's numeral carries its own gauge color. */
.story-chapter[data-chapter="fuji-in-arta"] .chapter-ghost,
.story-chapter[data-chapter="cele-cinci-lacuri"] .chapter-ghost {
  -webkit-text-stroke-color: var(--accent);
  opacity: 0.5;
}
/* The sacred room: the seal sits ringed like a shrine stamp, and the
   pull-line reads off a vermilion wash. Paint only. */
.story-chapter[data-chapter="muntele-sacru"] .chapter-seal {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent, var(--ember));
}
.story-chapter[data-chapter="muntele-sacru"] .chapter-opening blockquote {
  background: linear-gradient(90deg, var(--wash), var(--card) 45%);
}
/* The ticket room: the pull-line is a perforated stub — two paper
   notches punched out of the accent rule. Paint only, decorative. */
.story-chapter[data-chapter="regulile-muntelui"] .chapter-opening blockquote::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 24px;
  background:
    radial-gradient(circle 8px at 50% 16px, var(--paper) 97%, transparent 100%),
    radial-gradient(circle 8px at 50% calc(100% - 16px), var(--paper) 97%, transparent 100%);
  pointer-events: none;
}
/* The lake room: five dotted wavelets run under the pull-line. */
.story-chapter[data-chapter="cele-cinci-lacuri"] .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;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--night-panel); color: var(--accent, var(--ember));
  border: 1px solid var(--accent, var(--ember));
  font-size: 1.1rem; 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="muntele"] .chapter-opening h2,
.story-chapter[data-chapter="masina-de-urcat"] .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(--ember-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(--ember); }
.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(--ember));
  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(--ember));
}
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(--ember));
  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 ash and Prussian-blue rooms read their pull-lines off dark night glass. */
.story-chapter[data-chapter="eruptia-hoei"] .chapter-opening blockquote,
.story-chapter[data-chapter="fuji-in-arta"] .chapter-opening blockquote {
  background: linear-gradient(160deg, var(--night-panel), var(--night-abyss));
  color: var(--snow);
  border: 1px solid #3a4a5c;
  border-left: 4px solid var(--accent, var(--ember));
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(12, 15, 19, 0.6);
}
.story-chapter[data-chapter="eruptia-hoei"] .chapter-opening blockquote .citation,
.story-chapter[data-chapter="fuji-in-arta"] .chapter-opening blockquote .citation {
  color: var(--ember); border-color: var(--ember);
}
/* The ash room's pull-line breathes ember; the Prussian room stays cold. */
.story-chapter[data-chapter="eruptia-hoei"] .chapter-opening blockquote {
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(12, 15, 19, 0.6),
    0 0 2.5rem -1rem rgba(160, 74, 48, 0.5);
}
/* The climbing-machine room: the four-trail claim lands before the first
   beat, so the lead reads off dark night glass. The pull stays on paper. */
.story-chapter[data-chapter="masina-de-urcat"] .chapter-lead {
  background: linear-gradient(160deg, var(--night-panel), var(--night-abyss));
  color: var(--snow);
  border: 1px solid #3a4a5c; border-radius: 0.7rem;
  padding: 1.1rem 1.25rem; max-width: 62rem;
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(12, 15, 19, 0.6);
}
.story-chapter[data-chapter="masina-de-urcat"] .chapter-lead p { max-width: 62ch; margin: 0.5rem 0; }
.story-chapter[data-chapter="masina-de-urcat"] .chapter-lead p:first-child::first-letter { color: var(--ember); }
.story-chapter[data-chapter="masina-de-urcat"] .chapter-lead .citation { color: var(--ember); border-color: var(--ember); }
/* The coda: chapter 8 closes the ascent centered, seal ringed like a stamp. */
.story-chapter[data-chapter="vulcanul-viu"] .chapter-opening { text-align: center; }
.story-chapter[data-chapter="vulcanul-viu"] .chapter-kicker { justify-content: center; }
.story-chapter[data-chapter="vulcanul-viu"] .chapter-seal {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent, var(--ember));
}
.story-chapter[data-chapter="vulcanul-viu"] .chapter-opening h2 { margin-inline: auto; }
.story-chapter[data-chapter="vulcanul-viu"] .chapter-lead p { margin-inline: auto; }
.story-chapter[data-chapter="vulcanul-viu"] .chapter-lead p:first-child::first-letter {
  float: none; font-size: 1.35em; padding: 0 0.08em 0 0;
}
.story-chapter[data-chapter="vulcanul-viu"] .chapter-ghost {
  left: 50%; right: auto; transform: translateX(-50%); opacity: 0.35;
}
.story-chapter[data-chapter="vulcanul-viu"] .chapter-opening blockquote {
  margin-inline: auto; text-align: left;
}
.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 #3a4a5c;
  border-top: 4px solid var(--ember);
  box-shadow: 0 2rem 3rem -2rem rgba(12, 15, 19, 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, 182, 201, 0.20), transparent 62%),
    linear-gradient(170deg, #1a242e 0%, #141c24 55%, #0d1218 100%);
  border-color: #33465a;
}
.sticky-stage[data-grade="snow"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(35, 42, 46, 0.05) 22px 23px),
    linear-gradient(170deg, #faf6ec, #e7dcc6);
  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: #3a6f83; }
.sticky-stage[data-grade="snow"] .beat-art .g-aux { stroke: #9aa8b0; }
.sticky-stage[data-grade="snow"] .stage-note { color: var(--ink-soft); }
.sticky-stage[data-grade="snow"] .stage-kicker { color: var(--ember-deep); }
html[data-theme="dark"] .sticky-stage[data-grade="snow"] .stage-kicker { color: var(--ember); }
.sticky-stage[data-grade="snow"] .stage-citations .citation {
  color: var(--ember-deep); border-color: var(--ember);
}
html[data-theme="dark"] .sticky-stage[data-grade="snow"] .stage-citations .citation {
  color: var(--ember);
}
.sticky-stage[data-grade="snow"] .stage-gesture {
  background: rgba(35, 42, 46, 0.05);
  border-color: var(--line);
}
/* Ash: the Hōei 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(160, 74, 48, 0.16), transparent 62%),
    linear-gradient(170deg, #2e3338 0%, #1e2226 55%, #14171a 100%);
  border-color: #46505a;
}
/* Crater: ember 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(192, 90, 46, 0.22), transparent 60%),
    linear-gradient(170deg, #241a14 0%, #141a20 70%);
  border-color: #4a3a2c;
}
/* Dawn: first light cresting — gold haze over ember 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(216, 160, 60, 0.20), transparent 60%),
    linear-gradient(170deg, #2b2418 0%, var(--stage-bg) 60%, #0d1218 100%);
  box-shadow: 0 2rem 3rem -2rem rgba(12, 15, 19, 0.65), 0 0 3rem -1rem var(--glow);
}
/* Lake: deep water at the cone's foot — teal dark. */
.sticky-stage[data-grade="lake"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px),
    radial-gradient(100% 55% at 50% 0%, rgba(63, 127, 140, 0.24), transparent 62%),
    linear-gradient(170deg, #16262c 0%, #101c21 55%, #0b1417 100%);
  border-color: #2c4a52;
}
/* 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="lake"] .beat-art {
  filter: drop-shadow(0 0 5px rgba(127, 182, 201, 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="lake"] .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(12, 15, 19, 0.35);
  border: 1px solid rgba(127, 182, 201, 0.14);
  padding: 0.35rem 0.35rem 0.1rem;
}
/* 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(--ember)) 55%, rgba(127, 182, 201, 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: #5f7a8c; stroke-width: 3; }
.beat-art .g-mark { fill: none; stroke: var(--accent, var(--ember)); stroke-width: 4; }
.beat-art .g-dot { fill: var(--ember); }
.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(--ember); 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: #d9cfae; }
.sticky-stage[data-grade="crater"] .stage-label,
.sticky-stage[data-grade="crater"] .stage-subline { color: #e8c8a8; }
.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(--ember); border-color: var(--ember); }
.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(--ember)); }
/* Beat pips: crater-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(--ember); border-color: var(--ember); opacity: 1;
  box-shadow: 0 0 0.6rem rgba(192, 138, 46, 0.8);
}
/* Steps: each card carries an outlined step numeral, and an ember
   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: fuji-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(--ember)), var(--line) 85%);
  opacity: 0.7;
}
.story-step {
  position: relative;
  counter-increment: fuji-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(35, 42, 46, 0.35);
}
.story-step::after {
  content: "0" counter(fuji-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(--ember));
  -webkit-text-stroke-color: var(--accent, var(--ember));
  opacity: 0.85;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent, var(--ember)) 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(--ember));
  box-shadow: inset 4px 0 0 var(--accent, var(--ember)),
    0 1.25rem 2.5rem -1.25rem rgba(35, 42, 46, 0.45);
}
.step-kicker {
  font-family: "Syne", "PingFang SC", sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--ember-deep); margin: 0 0 0.4rem;
  padding-right: 2.75rem;
}
html[data-theme="dark"] .step-kicker { color: var(--ember); }
.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 ash room reads its steps off dark fallout glass: dim air, dim
   light. Paint only — padding and borders stay identical. */
.story-chapter[data-chapter="eruptia-hoei"] .story-step {
  background: linear-gradient(165deg, #252d36 0%, #141c24 70%, #0d1218 100%);
  border-color: #3a4a5c;
  color: var(--snow);
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(12, 15, 19, 0.7);
}
.story-chapter[data-chapter="eruptia-hoei"] .step-kicker { color: var(--ember); }
.story-chapter[data-chapter="eruptia-hoei"] .story-step h3 { color: var(--snow); }
.story-chapter[data-chapter="eruptia-hoei"] .step-subline { color: var(--mist); }
.story-chapter[data-chapter="eruptia-hoei"] .step-copy { color: #d9cfae; }
.story-chapter[data-chapter="eruptia-hoei"] .story-step .citation {
  color: var(--ember); border-color: var(--ember);
}
.story-chapter[data-chapter="eruptia-hoei"] .story-step.is-active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent),
    0 1.25rem 2.5rem -1.25rem rgba(12, 15, 19, 0.8);
}
.story-chapter[data-chapter="eruptia-hoei"] .story-step::after {
  -webkit-text-stroke-color: #46586a;
}
.story-chapter[data-chapter="eruptia-hoei"] .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; }
.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(12, 15, 19, 0.55);
  /* Ember-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, #252d36 0%, #141c24 60%, #0c0f13 100%);
}
/* Dawn-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: #3a4a5c;
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(12, 15, 19, 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(--ember)); 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(--ember)); }
.map-figure img, .diagram-figure img { border-top: 3px solid var(--ember); }
/* Trail-gauge instrument (pure CSS state) */
.sounding {
  margin: 0 0 1.5rem; padding: 1.25rem;
  background: linear-gradient(165deg, #252d36 0%, var(--night-panel) 50%, var(--night-abyss) 100%);
  color: var(--snow);
  border-radius: 0.9rem; border: 1px solid #3a4a5c;
  border-top: 4px solid var(--ember);
  box-shadow: 0 2rem 3rem -2rem rgba(12, 15, 19, 0.7);
  font-variant-numeric: tabular-nums;
}
.sounding .eyebrow { color: var(--ember); }
.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(--ember); border-color: var(--ember); }
.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 ember diamond capping the dashed trail 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(--ember);
}
.snd-tick {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.8rem; margin-bottom: 0.4rem;
  border: 1px solid #3a4a5c; border-radius: 0.5rem; cursor: pointer;
}
.snd-tick:hover { border-color: var(--mist); }
.snd-name { font-weight: 700; }
.snd-tick-value { color: var(--ember); 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"] {
  border-color: var(--ember); background: rgba(192, 138, 46, 0.12);
  box-shadow: 0 0 1.5rem -0.5rem rgba(192, 138, 46, 0.5);
}
.snd-read { display: none; border-top: 1px solid #3a4a5c; 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"] { display: block; }
.snd-value { font-family: "Syne", "PingFang SC", sans-serif; font-size: 1.9rem; font-weight: 800; margin: 0; color: #e8c87e; }
.snd-label { font-weight: 700; color: var(--mist); margin: 0.25rem 0; }
.snd-label .citation, .snd-subline .citation { color: var(--ember); border-color: var(--ember); }
.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(--ember);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 0.75rem 1.5rem -1.1rem rgba(12, 15, 19, 0.45);
}
.sources li:hover { border-color: var(--ember); }
.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(--ember-deep); }
html[data-theme="dark"] .site-footer a:hover { color: var(--ember); }
/* 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(--ember));
}
.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; }
.reading-rail a[aria-current] span {
  background: var(--ember); border-color: var(--ember-deep);
  box-shadow: 0 0 0.6rem rgba(192, 138, 46, 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(--ember); pointer-events: none;
  box-shadow: 0 0 0.5rem rgba(192, 138, 46, 0.55);
}
/* The gauge mark rides in the current room's accent. */
body[data-chapter="muntele"] .rail-marker { border-color: #55a0b4; box-shadow: 0 0 0.5rem rgba(85, 160, 180, 0.6); }
body[data-chapter="eruptia-hoei"] .rail-marker { border-color: #a04a30; box-shadow: 0 0 0.5rem rgba(160, 74, 48, 0.6); }
body[data-chapter="muntele-sacru"] .rail-marker { border-color: #b5482f; box-shadow: 0 0 0.5rem rgba(181, 72, 47, 0.6); }
body[data-chapter="fuji-in-arta"] .rail-marker { border-color: #2f5f8a; box-shadow: 0 0 0.5rem rgba(47, 95, 138, 0.6); }
body[data-chapter="masina-de-urcat"] .rail-marker { border-color: #5b8a5e; box-shadow: 0 0 0.5rem rgba(91, 138, 94, 0.6); }
body[data-chapter="regulile-muntelui"] .rail-marker { border-color: #b08a3c; }
body[data-chapter="cele-cinci-lacuri"] .rail-marker { border-color: #3f7f8c; box-shadow: 0 0 0.5rem rgba(63, 127, 140, 0.6); }
body[data-chapter="vulcanul-viu"] .rail-marker { border-color: #c05a2e; box-shadow: 0 0 0.5rem rgba(192, 90, 46, 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="muntele"] .reading-rail a[aria-current] span { background: #55a0b4; border-color: #55a0b4; box-shadow: 0 0 0.6rem rgba(85, 160, 180, 0.8); }
body[data-chapter="eruptia-hoei"] .reading-rail a[aria-current] span { background: #a04a30; border-color: #a04a30; box-shadow: 0 0 0.6rem rgba(160, 74, 48, 0.8); }
body[data-chapter="muntele-sacru"] .reading-rail a[aria-current] span { background: #b5482f; border-color: #b5482f; box-shadow: 0 0 0.6rem rgba(181, 72, 47, 0.8); }
body[data-chapter="fuji-in-arta"] .reading-rail a[aria-current] span { background: #2f5f8a; border-color: #2f5f8a; box-shadow: 0 0 0.6rem rgba(47, 95, 138, 0.8); }
body[data-chapter="masina-de-urcat"] .reading-rail a[aria-current] span { background: #5b8a5e; border-color: #5b8a5e; box-shadow: 0 0 0.6rem rgba(91, 138, 94, 0.8); }
body[data-chapter="regulile-muntelui"] .reading-rail a[aria-current] span { background: #b08a3c; border-color: #b08a3c; box-shadow: 0 0 0.6rem rgba(176, 138, 60, 0.8); }
body[data-chapter="cele-cinci-lacuri"] .reading-rail a[aria-current] span { background: #3f7f8c; border-color: #3f7f8c; box-shadow: 0 0 0.6rem rgba(63, 127, 140, 0.8); }
body[data-chapter="vulcanul-viu"] .reading-rail a[aria-current] span { background: #c05a2e; border-color: #c05a2e; box-shadow: 0 0 0.6rem rgba(192, 90, 46, 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(--ember); 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(--ember); outline-offset: 2px;
}
.sounding-instrument:focus-within .snd-stops {
  outline: 3px solid var(--ember); 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; }
  }
  .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(12, 15, 19, 0.5);
  }
  html[data-enhanced="true"] .story-step.is-active:hover {
    box-shadow: inset 4px 0 0 var(--accent, var(--ember)),
      0 1.5rem 2.75rem -1.25rem rgba(12, 15, 19, 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(12, 15, 19, 0.75);
  }
  html[data-enhanced="true"] .chapter-media figure:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.75rem 2.75rem -1.5rem rgba(12, 15, 19, 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 trail-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 { width: 2rem; height: 2rem; font-size: 1rem; 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; }
  .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: Fuji stages carry
     different copy, six skins, and different panel figures. 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. */
  #muntele .sticky-stage { min-height: 480px; }
  #eruptia-hoei .sticky-stage { min-height: 480px; }
  #muntele-sacru .sticky-stage { min-height: 480px; }
  #fuji-in-arta .sticky-stage { min-height: 480px; }
  #masina-de-urcat .sticky-stage { min-height: 480px; }
  #regulile-muntelui .sticky-stage { min-height: 480px; }
  #cele-cinci-lacuri .sticky-stage { min-height: 480px; }
  #vulcanul-viu .sticky-stage { min-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}