/* SOURCE VERSION: v1.0.7 / 2026-09-05 */
/* Narrative upgrade: the existing sound system remains the hero. */
.opening-chapter .image-opening-depth img { filter: blur(6px) saturate(.55) contrast(1.08) brightness(.52); transition: filter 2.4s ease, opacity 2.4s ease, transform 2.4s ease; }
body.narrative-listening .opening-chapter .image-opening-depth img { filter: blur(0) saturate(.72) contrast(1.1) brightness(.68); }
.image-opening-depth .opening-wheat { inset: 41% 7% 3% 3%; z-index: -1; clip-path: polygon(0 18%, 100% 0, 94% 88%, 6% 100%); opacity: .7; mix-blend-mode: screen; }
.image-opening-depth .opening-wheat img { opacity: .19; filter: blur(7px) saturate(.74) contrast(1.16) brightness(.72); }
body.narrative-listening .image-opening-depth .opening-wheat img { opacity: .31; filter: blur(0) saturate(.86) contrast(1.1) brightness(.76); }
.opening-hero-readout { position: absolute; z-index: 7; right: 7%; bottom: 14%; display: grid; gap: 5px; color: rgba(242,238,231,.56); font: 8px/1.5 var(--mono); letter-spacing: .18em; text-align: right; pointer-events: none; }
.opening-hero-readout b { color: var(--gold); font-weight: 400; }
.opening-narration { position: absolute; z-index: 8; left: 7%; bottom: 9%; max-width: 330px; color: rgba(242,238,231,.52); font: 10px/1.7 var(--serif); opacity: .76; pointer-events: none; }
.opening-narration span { display: block; margin-bottom: 5px; color: var(--jade); font: 8px var(--mono); letter-spacing: .15em; }
.opening-narration em { color: var(--paper); font-style: normal; }
.narration-skip { margin-top: 5px; padding: 2px 0; border-bottom: 1px solid rgba(242,238,231,.22); color: rgba(242,238,231,.58); background: transparent; font: 8px var(--mono); pointer-events: auto; }
.river-data-anchor { position: relative; z-index: 6; display: grid; grid-template-columns: auto 1fr; gap: 19px; align-items: end; max-width: 760px; margin: 27px 7vw 0; padding: 17px 0 12px; border-top: 1px solid rgba(226,181,104,.24); border-bottom: 1px solid rgba(121,181,165,.18); }
.river-data-number { display: grid; gap: 3px; min-width: 120px; }
.river-data-number strong { color: var(--gold); font: clamp(50px, 7vw, 88px)/.82 var(--serif); font-weight: 400; letter-spacing: -.07em; }
.river-data-number span, .river-data-copy small { color: rgba(242,238,231,.48); font: 8px/1.6 var(--mono); letter-spacing: .1em; }
.river-data-copy { display: grid; gap: 7px; padding-bottom: 4px; }
.river-data-copy p { margin: 0; color: #c1c9c1; font: 16px/1.7 var(--serif); }
.river-data-copy b { color: var(--jade); font: 8px var(--mono); letter-spacing: .17em; font-weight: 400; }
.river-data-line { position: absolute; right: 0; bottom: 0; left: 0; height: 47px; pointer-events: none; opacity: .66; }
.river-data-line canvas { width: 100%; height: 100%; }
.river-state-label { position: absolute; z-index: 7; top: 17px; left: 5%; color: rgba(242,238,231,.48); font: 8px var(--mono); letter-spacing: .18em; transition: color .3s; }
.river-chapter.river-state-b .river-state-label { color: var(--coral); }
.river-chapter.river-state-b .image-river-system .river-hero { transform: scale(1.06); }
.river-chapter.river-state-b .image-river-system .river-water { opacity: .95; }
.human-narrative-anchor { position: relative; z-index: 6; display: grid; grid-template-columns: auto auto 1fr; gap: 20px; align-items: end; margin: 30px 7vw -42px; max-width: 880px; }
.human-narrative-stat { display: grid; gap: 3px; padding-right: 20px; border-right: 1px solid rgba(17,22,25,.24); }
.human-narrative-stat strong { color: var(--ink); font: clamp(32px, 4vw, 54px)/.9 var(--serif); font-weight: 400; letter-spacing: -.06em; }
.human-narrative-stat span { color: var(--coral); font: 8px var(--mono); letter-spacing: .12em; }
.human-narrative-anchor p { max-width: 410px; margin: 0; color: #535a53; font: 14px/1.8 var(--serif); }
.human-narrative-anchor small { display: block; margin-top: 7px; color: #82877f; font: 8px var(--mono); letter-spacing: .13em; }
.sound-population-dots { position: absolute; z-index: 2; inset: 18% 9% 15% 5%; pointer-events: none; opacity: .52; }
.sound-population-dots i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(237,101,79,.08); animation: starPulse 5s ease-in-out infinite; }
.sound-population-dots::after { content: '9744 / DATA VISUALIZATION / NOT ONE DOT = ONE PERSON'; position: absolute; right: 0; top: 2%; color: rgba(17,22,25,.42); font: 7px var(--mono); letter-spacing: .12em; }
.human-chapter .field-map { z-index: 3; }
.human-chapter .field-map .map-note { content: ''; }
.new-data-anchor { position: absolute; z-index: 6; top: 17%; right: 8%; display: grid; gap: 3px; text-align: right; }
.new-data-anchor strong { color: var(--paper); font: clamp(30px, 4vw, 54px)/.9 var(--serif); font-weight: 400; }
.new-data-anchor span { color: var(--blue); font: 8px var(--mono); letter-spacing: .12em; }
.new-data-anchor small { color: rgba(242,238,231,.42); font: 7px var(--mono); letter-spacing: .1em; }
.new-signal-map { position: relative; z-index: 6; width: min(740px, 76vw); height: 285px; margin: 21px 6% 0 auto; border-top: 1px solid rgba(135,159,197,.22); border-bottom: 1px solid rgba(135,159,197,.15); background: radial-gradient(circle at center, rgba(135,159,197,.1), transparent 47%); }
.new-signal-map::before { content: 'NEW HENAN SIGNAL MAP / SOUND ROUTES'; position: absolute; top: 11px; left: 13px; color: rgba(242,238,231,.45); font: 8px var(--mono); letter-spacing: .16em; }
.signal-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid rgba(226,181,104,.58); border-radius: 50%; color: var(--gold); font: 8px var(--mono); letter-spacing: .12em; transform: translate(-50%, -50%); }
.signal-core::after { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(121,181,165,.44); border-radius: 50%; animation: rotateSlow 16s linear infinite; }
.signal-route { position: absolute; width: 155px; height: 1px; background: linear-gradient(90deg, rgba(135,159,197,.1), var(--blue)); transform-origin: left; opacity: .7; }
.signal-route.route-move { top: 40%; left: 52%; transform: rotate(-155deg); }.signal-route.route-make { top: 51%; left: 53%; transform: rotate(8deg); }.signal-route.route-think { top: 53%; left: 47%; transform: rotate(174deg); }.signal-route.route-connect { top: 47%; left: 48%; transform: rotate(-25deg); }
.signal-node { position: absolute; z-index: 3; display: grid; gap: 3px; padding: 7px 9px; border-left: 1px solid var(--blue); color: var(--paper); background: rgba(12,20,26,.65); text-align: left; cursor: pointer; }
.signal-node strong { font: 11px var(--mono); letter-spacing: .14em; font-weight: 400; }.signal-node span { color: rgba(242,238,231,.58); font: 11px var(--serif); }.signal-node small { color: var(--blue); font: 7px var(--mono); }.signal-node:hover, .signal-node:focus { border-color: var(--gold); background: rgba(135,159,197,.12); transform: translateY(-3px); }
.signal-node.node-move { top: 16%; left: 12%; }.signal-node.node-make { top: 65%; left: 58%; }.signal-node.node-think { top: 70%; left: 10%; }.signal-node.node-connect { top: 16%; right: 10%; }
.archive-chapter { min-height: 1080px; color: var(--paper); background: #182321; background-image: radial-gradient(circle at 75% 22%, rgba(121,181,165,.16), transparent 26%), linear-gradient(112deg, rgba(13,25,25,.98), rgba(24,42,39,.82)), url('../generated/sound_grid.svg'); background-size: auto, auto, 720px 720px; }
.archive-chapter::after { opacity: .55; background: linear-gradient(180deg, transparent 55%, rgba(6,13,14,.62)); }
.archive-chapter-heading { position: relative; z-index: 5; max-width: 720px; margin: 75px 0 0 7vw; }.archive-chapter-heading h2 { margin: 14px 0 0; font: clamp(45px, 6vw, 82px)/1.15 var(--serif); font-weight: 400; letter-spacing: -.06em; }.archive-chapter-heading h2 em { color: var(--coral); font-style: normal; }.archive-chapter-heading p { max-width: 420px; margin: 20px 0 0; color: #a5b1a9; font: 15px/1.9 var(--serif); }
.archive-chapter-grid { position: relative; z-index: 6; display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; margin: 67px 7vw 0; }.archive-chapter-panel { padding-top: 18px; border-top: 1px solid rgba(242,238,231,.2); }.archive-chapter-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.archive-chapter-panel h3 { margin: 0; font: 27px var(--serif); font-weight: 400; }.archive-chapter-panel header small { color: var(--jade); font: 8px var(--mono); letter-spacing: .15em; }.archive-count { display: flex; align-items: baseline; gap: 8px; color: var(--gold); }.archive-count strong { font: 45px var(--serif); font-weight: 400; }.archive-count span { color: rgba(242,238,231,.48); font: 8px var(--mono); }
.archive-view-toggle { display: flex; gap: 10px; margin: 17px 0; }.archive-view-toggle button { padding: 7px 0; border-bottom: 1px solid rgba(242,238,231,.18); color: #96a29a; background: transparent; font: 8px var(--mono); letter-spacing: .11em; }.archive-view-toggle button.is-active { border-color: var(--coral); color: var(--paper); }.archive-system-list { display: grid; max-height: 360px; overflow: auto; border-top: 1px solid rgba(242,238,231,.12); }.archive-chapter-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(242,238,231,.12); color: #c5cdc5; background: transparent; text-align: left; }.archive-chapter-row:hover { color: var(--paper); padding-left: 7px; }.archive-chapter-row > b { color: var(--coral); font: 9px var(--mono); font-weight: 400; }.archive-chapter-row strong { display: block; font: 17px var(--serif); font-weight: 400; }.archive-chapter-row small { display: block; margin-top: 3px; color: #829089; font: 8px var(--mono); letter-spacing: .04em; }.archive-chapter-row em { color: var(--jade); font: 10px var(--mono); font-style: normal; }.archive-local-note { margin-top: 30px; padding: 19px; border-left: 1px solid var(--coral); background: rgba(7,13,14,.3); }.archive-local-note label { display: grid; gap: 7px; color: var(--jade); font: 8px var(--mono); letter-spacing: .14em; }.archive-local-note input { padding: 8px 0; border-bottom: 1px solid rgba(242,238,231,.25); color: var(--paper); background: transparent; font: 18px var(--serif); outline: none; }.archive-local-note p { margin: 11px 0; color: #9ba79f; font: 11px/1.7 var(--serif); }.archive-local-note button { padding: 8px 0; border-bottom: 1px solid var(--coral); color: var(--paper); background: transparent; font: 9px var(--mono); }.record-status { min-height: 18px; margin-top: 10px; color: var(--gold); font: 8px/1.5 var(--mono); }.record-status.is-error { color: var(--coral); }.voice-star-preview { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; min-height: 180px; margin-top: 20px; padding: 15px; border: 1px solid rgba(226,181,104,.2); background: rgba(7,13,14,.24); }.voice-star-preview canvas { width: 180px; height: 180px; }.voice-star-preview p { margin: 0; color: #a2aea6; font: 11px/1.7 var(--serif); }.voice-star-preview p b { display: block; margin-bottom: 7px; color: var(--gold); font: 9px var(--mono); letter-spacing: .14em; }.archive-local-total { color: #829089; font: 8px var(--mono); }.archive-local-total strong { color: var(--coral); font-weight: 400; }.archive-empty { color: #84918a; font: 12px/1.8 var(--serif); }.archive-local-list { display: grid; max-height: 270px; margin-top: 18px; overflow: auto; }.local-row { grid-template-columns: 78px 1fr auto; }.mini-voice-star { width: 78px; height: 78px; }.local-row-actions { display: flex; gap: 10px; }.text-action { color: var(--jade); background: transparent; font: 8px var(--mono); }.text-action + .text-action { color: var(--coral); }.voice-wall { position: relative; min-height: 470px; margin-top: 18px; overflow: hidden; border: 1px solid rgba(121,181,165,.22); background: radial-gradient(circle at center, rgba(121,181,165,.12), transparent 49%), repeating-radial-gradient(circle at center, transparent 0 56px, rgba(121,181,165,.05) 57px 58px); }.voice-wall::before { content: 'SOUND WALL / HENAN + YOU'; position: absolute; top: 15px; left: 17px; color: rgba(242,238,231,.52); font: 8px var(--mono); letter-spacing: .16em; }.voice-wall-node { position: absolute; display: grid; gap: 5px; color: var(--paper); background: transparent; transform: translate(-50%, -50%); }.voice-wall-node i { display: block; width: 9px; height: 9px; border: 2px solid var(--jade); border-radius: 50%; box-shadow: 0 0 0 7px rgba(121,181,165,.08), 0 0 23px rgba(121,181,165,.3); }.voice-wall-node span { max-width: 130px; color: rgba(242,238,231,.64); font: 9px var(--mono); white-space: nowrap; }.voice-wall-node:hover i, .voice-wall-node:focus i { transform: scale(1.5); }.voice-wall-node.local-node i { width: calc(8px + var(--star-energy) * 13px); height: calc(8px + var(--star-energy) * 13px); border-color: var(--coral); box-shadow: 0 0 0 7px rgba(237,101,79,.1), 0 0 28px rgba(237,101,79,.38); }.archive-chapter:not(.archive-list-mode) .archive-local-list, .archive-chapter:not(.archive-list-mode) .archive-system-list { display: none; }.archive-chapter.archive-list-mode .voice-wall { display: none; }.archive-chapter .archive-local-count-note { margin-top: 9px; color: #829089; font: 8px var(--mono); }.archive-chapter .archive-local-count-note b { color: var(--coral); font-weight: 400; }
.resonance-mixer { margin-top: 26px; padding: 17px; border: 1px solid rgba(121,181,165,.2); background: rgba(7,13,14,.24); }.resonance-mixer > header { display: flex; justify-content: space-between; color: var(--jade); font: 8px var(--mono); letter-spacing: .13em; }.mixer-rows { display: grid; margin-top: 12px; }.mixer-row { display: grid; grid-template-columns: 1fr 82px 26px 24px; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(242,238,231,.1); }.mixer-row span { color: #c3ccc4; font: 12px var(--serif); }.mixer-row small { display: block; color: #7e8c84; font: 7px var(--mono); }.mixer-row input { width: 100%; accent-color: var(--coral); }.mixer-row output { color: var(--gold); font: 8px var(--mono); text-align: right; }.mixer-empty { color: #829089; font: 10px var(--serif); }
.resonance-video-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 0; border-bottom: 1px solid var(--coral); color: var(--paper); background: transparent; font: 9px var(--mono); }.resonance-video-note { margin: 8px 0 0; color: #829089; font: 9px/1.6 var(--serif); }.video-save-status { display: block; margin-top: 8px; color: var(--gold); font: 8px var(--mono); }
body.narrative-fading .resonance-chapter, body.narrative-fading .epilogue-chapter { filter: saturate(.5); transition: filter 2.5s ease; }
@media (max-width: 760px) {
  .opening-hero-readout { right: 18px; bottom: 18%; font-size: 7px; }.opening-narration { right: 18px; bottom: 8%; left: 18px; max-width: 250px; font-size: 9px; }.opening-narration p { display: none; }
  .river-data-anchor { grid-template-columns: 100px 1fr; gap: 10px; margin: 20px 0 0; }.river-data-number strong { font-size: 49px; }.river-data-copy p { font-size: 13px; }.river-state-label { top: 12px; left: 18px; }
  .human-narrative-anchor { grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0 -18px; }.human-narrative-stat { padding-right: 8px; }.human-narrative-stat strong { font-size: 32px; }.human-narrative-anchor p { grid-column: 1 / -1; font-size: 12px; }.sound-population-dots { inset: 13% 0 17% 0; }.sound-population-dots::after { right: 8px; top: 0; font-size: 6px; }
  .new-data-anchor { top: 10%; right: 18px; }.new-data-anchor strong { font-size: 31px; }.new-signal-map { width: 100%; height: 315px; margin: 21px 0 0; }.signal-route { width: 105px; }.signal-node { padding: 6px 7px; }.signal-node strong { font-size: 9px; }.signal-node span { font-size: 9px; }.signal-node.node-move { top: 21%; left: 4%; }.signal-node.node-make { top: 68%; left: 55%; }.signal-node.node-think { top: 70%; left: 3%; }.signal-node.node-connect { top: 20%; right: 4%; }
  .archive-chapter { min-height: 1510px; }.archive-chapter-heading { margin: 55px 0 0; }.archive-chapter-heading h2 { font-size: 45px; }.archive-chapter-grid { grid-template-columns: 1fr; gap: 48px; margin: 48px 0 0; }.archive-system-list { max-height: 315px; }.voice-star-preview { grid-template-columns: 120px 1fr; min-height: 120px; }.voice-star-preview canvas { width: 120px; height: 120px; }.voice-wall { min-height: 405px; }.voice-wall-node span { font-size: 7px; }.resonance-mixer { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .signal-core::after, .sound-population-dots i { animation: none; transition: none; } }

@keyframes rotateSlow { to { transform: rotate(360deg); } }

/* Continuous chapter transitions: a transparent line bridge, never a modal. */
.chapter-title-rail {
  position: fixed;
  z-index: 63;
  top: 88px;
  left: clamp(18px, 6vw, 108px);
  width: min(360px, 47vw);
  min-height: 66px;
  pointer-events: none;
  user-select: none;
}
.chapter-title-rail::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -14px;
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--coral), rgba(121,181,165,.12));
  opacity: .72;
}
.chapter-rail-slot {
  position: absolute;
  inset: 0 auto auto 0;
  display: grid;
  gap: 3px;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
}
.chapter-rail-slot small { color: var(--jade); font: 8px var(--mono); letter-spacing: .17em; }
.chapter-rail-slot strong { color: var(--paper); font: clamp(25px, 3vw, 38px)/1.02 var(--serif); font-weight: 400; letter-spacing: -.045em; }
.chapter-rail-slot span { color: var(--gold); font: 8px var(--mono); letter-spacing: .13em; }
.chapter-rail-next { opacity: 0; transform: translateY(10px); }
.chapter-title-rail.is-switching .chapter-rail-current { opacity: 0; transform: translateY(-10px); }
.chapter-title-rail.is-switching .chapter-rail-next { opacity: 1; transform: translateY(0); }
.transition-canvas {
  position: fixed;
  z-index: 58;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}
body[data-transition-to] .transition-canvas { opacity: .9; }
.voice-chapter.is-transitioning .chapter-index { opacity: .14; transform: translateY(-4px); transition: opacity .72s ease, transform .72s ease; }
.voice-chapter .chapter-index { transition: opacity .72s ease, transform .72s ease; }

/* The existing image layers crossfade while the transparent bridge carries the eye. */
.image-opening-depth img, .image-river-system img, .image-human-archive img, .image-material-stage img, .image-new-movement img, .image-memory-layer img { transition: opacity 1.05s ease, filter 1.05s ease, transform 1.05s ease; }
body[data-transition-to="river"] .image-opening-depth img { opacity: .12; }
body[data-transition-to="river"] .image-river-system img { opacity: .42; }
body[data-transition-to="human"] .image-river-system img { opacity: .1; filter: saturate(.32) contrast(1.08) brightness(.78); }
body[data-transition-to="human"] .image-human-archive img { opacity: .62; }
body[data-transition-to="ancient"] .image-human-archive img { opacity: .12; filter: grayscale(.5) saturate(.35) contrast(1.1); }
body[data-transition-to="ancient"] .image-material-stage img { opacity: .68; }
body[data-transition-to="new"] .image-material-stage img { opacity: .12; filter: grayscale(.72) saturate(.45); }
body[data-transition-to="new"] .image-new-movement img { opacity: .64; }
body[data-transition-to="archive"] .image-new-movement img { opacity: .14; filter: saturate(.42) contrast(1.06); }
body[data-transition-to="archive"] .image-memory-layer img { opacity: .52; }
body[data-transition-to="resonance"] .image-memory-layer img { opacity: .22; }
body[data-transition-to="epilogue"] .image-memory-layer img { opacity: .13; filter: saturate(.3) brightness(.7); }
body[data-transition-to="epilogue"] .transition-canvas { opacity: .55; }

@media (max-width: 760px) {
  .chapter-title-rail { top: 78px; left: 30px; width: min(270px, 72vw); min-height: 55px; }
  .chapter-title-rail::before { left: -10px; height: 42px; }
  .chapter-rail-slot strong { font-size: 25px; }
  .chapter-rail-slot small, .chapter-rail-slot span { font-size: 7px; }
  .transition-canvas { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-rail-slot, .voice-chapter .chapter-index, .image-opening-depth img, .image-river-system img, .image-human-archive img, .image-material-stage img, .image-new-movement img, .image-memory-layer img { transition: none; }
  .transition-canvas { display: none; }
}




/* v1.0.5 / TITLE RAIL, RIVER CURRENT, HUMAN LANDSCAPE */
/* One fixed rail provides the only chapter identity. Body chapter labels stay in the narrative, not in a second floating HUD. */
.voice-chapter > .chapter-index { display: none !important; }
.river-chapter .chapter-words > .chapter-micro,
.human-chapter .human-header .chapter-micro,
.ancient-chapter .ancient-heading .chapter-micro,
.new-chapter .new-intro .chapter-micro,
.archive-chapter .archive-chapter-heading > .chapter-micro,
.resonance-chapter .resonance-heading > .chapter-micro,
.epilogue-chapter .epilogue-center > .chapter-micro { display: none; }
.chapter-title-rail { top: 88px; left: clamp(24px, 6vw, 108px); width: min(500px, 54vw); min-height: 82px; }
.chapter-title-rail::before { top: 4px; left: -15px; height: 63px; background: linear-gradient(180deg, var(--coral), rgba(121,181,165,.12)); }
.chapter-rail-slot { gap: 5px; }
.chapter-rail-slot small { color: var(--coral); font: 9px/1 var(--mono); letter-spacing: .24em; }
.chapter-rail-slot strong { color: var(--jade); font: 9px/1.2 var(--mono); font-weight: 400; letter-spacing: .17em; white-space: nowrap; }
.chapter-rail-slot span { color: var(--paper); font: clamp(18px, 2.2vw, 25px)/1.12 var(--serif); letter-spacing: -.035em; }
body[data-active-chapter="human"] .chapter-rail-slot span,
body[data-transition-to="human"] .chapter-rail-slot span { color: var(--ink); }
body[data-active-chapter="human"] .chapter-rail-slot strong,
body[data-transition-to="human"] .chapter-rail-slot strong { color: #47786e; }
body[data-active-chapter="human"] .chapter-title-rail::before,
body[data-transition-to="human"] .chapter-title-rail::before { background: linear-gradient(180deg, var(--coral), rgba(17,22,25,.12)); }

/* The supplied river visuals now form a single continuous water surface. The image remains the scene; canvas and linework are its sonic layer. */
.river-chapter { position: relative; isolation: isolate; background: #061a2a !important; }
.river-chapter::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(2,14,26,.42), rgba(2,31,50,.12) 42%, rgba(1,10,22,.76)), linear-gradient(90deg, rgba(1,10,19,.86), rgba(3,24,42,.12) 62%, rgba(1,12,23,.38)); pointer-events: none; }
.river-chapter .image-river-system { z-index: 1; inset: 0; opacity: 1; }
.river-chapter .image-river-system::after { background: linear-gradient(180deg, rgba(1,12,24,.2), rgba(2,23,41,.08) 42%, rgba(1,10,20,.5)); mix-blend-mode: normal; }
.image-river-system figure { position: absolute; margin: 0; overflow: hidden; }
.image-river-system .river-water { z-index: 0; inset: 0; opacity: .98; clip-path: none; mix-blend-mode: normal; animation: riverWaterDrift 18s ease-in-out infinite alternate; }
.image-river-system .river-water img { --img-opacity: .86; opacity: .86 !important; filter: hue-rotate(155deg) saturate(1.25) contrast(1.24) brightness(.56); }
.image-river-system .river-hero { z-index: 1; inset: 0; opacity: .5; clip-path: none; mix-blend-mode: screen; animation: riverHeroDrift 22s ease-in-out infinite alternate; }
.image-river-system .river-hero img { --img-opacity: .48; opacity: .48 !important; filter: hue-rotate(145deg) saturate(1.08) contrast(1.22) brightness(.58); }
.river-chapter .river-stage { z-index: 3; overflow: hidden; background: linear-gradient(180deg, rgba(4,33,53,.12), rgba(1,14,28,.54)); box-shadow: inset 0 1px rgba(146,213,232,.18), inset 0 -1px rgba(121,181,165,.16); }
.river-chapter .river-stage::before { content: ''; position: absolute; z-index: 1; inset: 0; background: repeating-linear-gradient(108deg, transparent 0 26px, rgba(137,206,226,.12) 28px, transparent 31px); mix-blend-mode: screen; opacity: .36; animation: riverCaustic 12s linear infinite; pointer-events: none; }
.river-chapter .river-stage canvas, .river-chapter .river-svg { z-index: 2; }
.river-chapter .river-pulse, .river-chapter .river-state-label { z-index: 4; }
@keyframes riverWaterDrift { 0% { transform: translate3d(-1.2%, -1%, 0) scale(1.02); } 100% { transform: translate3d(1.1%, 1.2%, 0) scale(1.045); } }
@keyframes riverHeroDrift { 0% { transform: translate3d(1.5%, 0, 0) scale(1.02); } 100% { transform: translate3d(-1%, 1.4%, 0) scale(1.045); } }
@keyframes riverCaustic { from { background-position: 0 0; } to { background-position: 160px 0; } }

/* Human is land first: wheat texture and translucent field imagery sit behind a readable Henan sound map. */
.human-chapter { position: relative; isolation: isolate; background: linear-gradient(115deg, rgba(244,239,225,.97), rgba(218,204,166,.88)), url('../generated/paper_grain.png') !important; }
.human-chapter::before { content: 'LAND / LIFE / FIELD / PEOPLE'; position: absolute; z-index: 0; right: 6vw; top: 26%; color: rgba(17,22,25,.08); font: clamp(34px, 8vw, 126px)/.82 var(--mono); letter-spacing: -.09em; writing-mode: vertical-rl; pointer-events: none; }
.human-chapter .image-human-archive { z-index: 1; inset: 10% 2% 10% 34%; opacity: .62; }
.human-chapter .image-human-archive figure:nth-child(1), .human-chapter .image-human-archive figure:nth-child(2) { opacity: .3; }
.human-chapter .image-human-archive figure:nth-child(3) { opacity: .88; }
.human-chapter .image-human-archive figure:nth-child(4) { opacity: .62; }
.human-field { z-index: 2; min-height: 650px; }
.human-field > canvas { z-index: 1; opacity: .24; mix-blend-mode: multiply; }
.human-chapter .field-map { z-index: 4; left: 4%; width: min(710px, 68%); height: 610px; padding: 20px; border-top: 1px solid rgba(17,22,25,.28); border-bottom: 1px solid rgba(17,22,25,.2); background: linear-gradient(135deg, rgba(244,239,225,.82), rgba(226,181,104,.13)); }
.human-chapter .field-map::before { content: 'HENAN / SOUND FIELD'; position: absolute; z-index: 5; top: 14px; left: 20px; color: rgba(17,22,25,.68); font: 8px var(--mono); letter-spacing: .18em; }
.human-chapter .field-map::after { content: 'LAND · WHEAT · VILLAGE · DAILY LIFE'; position: absolute; z-index: 5; right: 20px; top: 14px; color: rgba(17,22,25,.42); font: 7px var(--mono); letter-spacing: .11em; }
.human-chapter .field-map svg { filter: drop-shadow(0 15px 18px rgba(17,22,25,.11)); }
.human-chapter .province-outline { fill: rgba(226,181,104,.28); stroke: rgba(17,22,25,.66); stroke-width: 2.3; stroke-dasharray: 9 6; }
.human-chapter .field-river { stroke: var(--coral); stroke-width: 4; stroke-dasharray: 2 8; opacity: .86; animation: fieldRiverRun 13s linear infinite; }
.human-chapter .field-map #fieldNodes { z-index: 4; }
.human-chapter .field-map .map-note { right: 20px; bottom: 16px; color: rgba(17,22,25,.62); font-size: 8px; }
.human-chapter .sound-population-dots { z-index: 3; opacity: .76; mix-blend-mode: multiply; }
.human-chapter .human-sounds { z-index: 7; }
@keyframes fieldRiverRun { to { stroke-dashoffset: -130; } }

@media (max-width: 760px) {
  .chapter-title-rail { top: 79px; left: 30px; width: min(320px, 76vw); min-height: 67px; }
  .chapter-title-rail::before { left: -11px; height: 55px; }
  .chapter-rail-slot strong { font-size: 8px; letter-spacing: .13em; }
  .chapter-rail-slot span { font-size: 17px; }
  .river-chapter .image-river-system { inset: 0; }
  .image-river-system .river-water, .image-river-system .river-hero { inset: 0; }
  .image-river-system .river-water img { filter: hue-rotate(155deg) saturate(1.13) contrast(1.16) brightness(.62); }
  .image-river-system .river-hero img { filter: hue-rotate(145deg) saturate(.96) contrast(1.14) brightness(.61); }
  .river-chapter .river-stage::before { opacity: .22; }
  .human-chapter::before { right: 10px; top: 37%; font-size: 38px; }
  .human-chapter .image-human-archive { inset: 18% 0 28%; opacity: .26; }
  .human-chapter .field-map { left: 0; width: 100%; height: 410px; padding: 10px; }
  .human-chapter .field-map::before { top: 8px; left: 11px; font-size: 7px; }
  .human-chapter .field-map::after { right: 11px; top: 8px; font-size: 6px; }
  .human-chapter .field-map .map-note { right: 11px; bottom: 10px; font-size: 6px; }
  .human-chapter .field-river { stroke-width: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .image-river-system .river-water, .image-river-system .river-hero, .river-chapter .river-stage::before, .human-chapter .field-river { animation: none; }
}


/* v1.0.6 / 2026-09-05 / HENAN MAP · RIVER · NEW HENAN SIGNALS */
/* All chapter identity stays in the same upper-left rail; scene content remains in-flow. */
.chapter-title-rail { top: 92px; left: clamp(28px, 6vw, 112px); width: min(520px, 54vw); z-index: 110; }
.chapter-title-rail::before { left: -16px; height: 69px; opacity: .58; }
.chapter-rail-slot { gap: 5px; }
.chapter-rail-slot small { font-size: 9px; letter-spacing: .26em; }
.chapter-rail-slot strong { font-size: 9px; letter-spacing: .18em; }
.chapter-rail-slot span { font-size: clamp(19px, 2.35vw, 28px); line-height: 1.08; }

/* River: supplied water images form the photographic surface; these layers provide measured current, caustics and FFT response. */
.river-chapter .image-river-system { pointer-events: none; }
.river-chapter .image-river-system .river-water img { object-position: 50% 62%; }
.river-chapter .image-river-system .river-hero img { object-position: 50% 46%; }
.river-chapter .river-stage { min-height: 370px; border-color: rgba(146,213,232,.25); }
.river-chapter .river-current-wash { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; opacity: calc(.26 + var(--river-state-energy, .42) * .24); mix-blend-mode: screen; }
.river-current-wash::before, .river-current-wash::after { content: ''; position: absolute; left: -12%; width: 124%; height: 38%; border-radius: 50%; border: 1px solid rgba(176,226,238,.18); transform: rotate(-5deg); animation: currentSheet 13s linear infinite; }
.river-current-wash::before { top: 18%; box-shadow: 0 32px 0 rgba(176,226,238,.07), 0 64px 0 rgba(226,181,104,.05), 0 96px 0 rgba(176,226,238,.06); }
.river-current-wash::after { top: 44%; transform: rotate(4deg); animation-duration: 17s; animation-direction: reverse; }
.river-current-wash i { position: absolute; display: block; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, rgba(178,229,241,.24), transparent); animation: currentGlint 7s ease-in-out infinite; }
.river-current-wash i:nth-child(1) { top: 34%; left: -8%; }
.river-current-wash i:nth-child(2) { top: 55%; left: 36%; animation-delay: -2.4s; }
.river-current-wash i:nth-child(3) { top: 72%; left: 58%; animation-delay: -4.8s; }
.river-current-wash span { position: absolute; right: 5%; top: 17px; color: rgba(187,226,235,.48); font: 8px var(--mono); letter-spacing: .15em; }
.river-chapter.river-state-b .river-state-label { color: #c4ebf2; }
.river-chapter.river-state-c .river-state-label { color: var(--gold); }
.river-chapter.river-state-c .river-current-wash { opacity: .72; }
.river-chapter.river-state-c .river-stage::before { opacity: .54; animation-duration: 7s; }
.river-chapter.river-state-c .river-trace { stroke-width: 2.6; opacity: .82; }
.river-chapter.river-state-c .river-pulse span { background: var(--gold); box-shadow: 0 0 18px rgba(226,181,104,.35); }
@keyframes currentSheet { from { transform: translate3d(-3%, 0, 0) rotate(-5deg); } to { transform: translate3d(3%, 12px, 0) rotate(-5deg); } }
@keyframes currentGlint { 0%, 100% { transform: translateX(-20%); opacity: .1; } 50% { transform: translateX(210%); opacity: .8; } }

/* Human: one accurate local province outline, six motif nodes, and a detail rail keep the map about land and life. */
.human-chapter .human-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 270px); align-items: end; gap: 54px; margin-top: 72px; }
.human-chapter .human-header > div:first-child { max-width: 760px; }
.human-chapter .human-header h2 { letter-spacing: -.075em; }
.human-narrative-anchor { grid-template-columns: minmax(140px, 185px) minmax(140px, 185px) minmax(240px, 1fr); gap: 25px; max-width: 1040px; margin: 29px 7vw -22px; align-items: start; }
.human-narrative-stat { position: relative; min-height: 84px; padding: 0 25px 18px 0; border-right: 1px solid rgba(17,22,25,.22); }
.human-narrative-stat strong { display: block; font-size: clamp(38px, 4.35vw, 62px); }
.human-narrative-stat span { display: block; margin-top: 6px; }
.human-narrative-stat i { position: absolute; right: 25px; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--coral) var(--stat-fill), rgba(17,22,25,.12) var(--stat-fill)); }
.human-narrative-stat[data-stat="urban"] i { background: linear-gradient(90deg, var(--jade) var(--stat-fill), rgba(17,22,25,.12) var(--stat-fill)); }
.human-narrative-copy { padding-top: 4px; }
.human-narrative-copy p { max-width: 470px; }
.human-chapter .human-field { min-height: 710px; margin-top: 70px; }
.human-chapter .field-map { left: 4%; width: min(860px, 56vw); height: 660px; padding: 25px; background: linear-gradient(138deg, rgba(246,241,225,.94), rgba(222,189,112,.2) 55%, rgba(121,181,165,.14)); box-shadow: 0 22px 60px rgba(94,77,39,.1); }
.human-chapter .field-map svg { filter: drop-shadow(0 16px 18px rgba(17,22,25,.12)); }
.human-chapter .province-outline { fill: rgba(226,181,104,.25); stroke: rgba(17,22,25,.7); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: none; }
.human-chapter .province-outline::after { content: ''; }
.human-chapter .field-river { stroke: var(--coral); stroke-width: 3.6; stroke-dasharray: 2 9; opacity: .86; }
.human-chapter .field-map #fieldNodes { z-index: 5; }
.human-chapter .motif-node { z-index: 6; gap: 8px; }
.human-chapter .motif-node i { width: 12px; height: 12px; border-width: 1px; }
.human-chapter .motif-node span { display: grid; gap: 2px; color: var(--ink); font: 12px/1.1 var(--serif); }
.human-chapter .motif-node span b { color: rgba(17,22,25,.45); font: 7px var(--mono); letter-spacing: .15em; font-weight: 400; }
.human-chapter .motif-node:hover span, .human-chapter .motif-node.is-active span { color: var(--coral); }
.field-detail { position: absolute; z-index: 9; right: 24px; bottom: 29px; width: min(240px, 34%); padding: 13px 15px 14px; border-left: 1px solid var(--coral); background: rgba(246,241,225,.78); box-shadow: 0 10px 30px rgba(17,22,25,.08); }
.field-detail span, .field-detail i { display: block; color: #6c776e; font: 7px/1.4 var(--mono); letter-spacing: .12em; font-style: normal; }
.field-detail strong { display: block; margin: 7px 0 5px; color: var(--ink); font: 21px/1 var(--serif); font-weight: 400; }
.field-detail small { display: block; color: #60685f; font: 11px/1.55 var(--serif); }
.field-detail i { margin-top: 9px; color: var(--coral); }
.human-chapter .human-sounds { right: 7vw; bottom: 24px; width: min(330px, 24vw); }
.human-chapter .human-sounds .sound-line { padding: 10px 0; }
.human-chapter .human-photo { opacity: .34; filter: sepia(.22); }

/* New Henan: a signal atlas with one official economy anchor, not three dashboard cards. */
.new-chapter { overflow: hidden; }
.new-chapter .new-intro { max-width: 720px; margin-top: 77px; }
.new-data-anchor { top: 144px; right: 8vw; text-align: right; }
.new-data-anchor span { color: var(--gold); font-size: 8px; }
.new-data-anchor small { display: block; margin-top: 4px; max-width: 230px; color: rgba(242,238,231,.43); line-height: 1.5; }
.new-signal-map { width: min(1200px, 86vw); height: 640px; margin: 58px 7vw 0; overflow: hidden; border-top: 1px solid rgba(135,159,197,.35); border-bottom: 1px solid rgba(135,159,197,.22); background: radial-gradient(circle at 50% 45%, rgba(121,181,165,.12), transparent 36%), linear-gradient(120deg, rgba(10,18,22,.18), rgba(135,159,197,.06)); }
.signal-map-kicker { position: absolute; z-index: 8; top: 16px; left: 18px; color: rgba(242,238,231,.62); font: 8px var(--mono); letter-spacing: .17em; }
.signal-province-svg { position: absolute; z-index: 1; top: 49%; left: 50%; width: min(650px, 54%); height: auto; overflow: visible; transform: translate(-50%, -50%); opacity: .85; filter: drop-shadow(0 0 18px rgba(121,181,165,.18)); }
.signal-province-outline { fill: rgba(121,181,165,.09); stroke: rgba(147,211,218,.6); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.signal-rail-trace, .signal-digital-trace { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 9 11; animation: signalRoute 12s linear infinite; }
.signal-rail-trace { stroke: rgba(226,181,104,.76); }
.signal-digital-trace { stroke: rgba(135,159,197,.75); animation-duration: 9s; animation-direction: reverse; }
@keyframes signalRoute { to { stroke-dashoffset: -220; } }
.signal-economy { position: absolute; z-index: 4; top: 190px; left: 50%; display: grid; place-items: center; width: 210px; text-align: center; transform: translateX(-50%); }
.signal-economy > span, .signal-economy > p, .signal-economy > small { color: rgba(242,238,231,.55); font: 8px var(--mono); letter-spacing: .12em; }
.signal-economy > strong { color: var(--paper); font: clamp(42px, 5vw, 68px)/.9 var(--serif); font-weight: 400; letter-spacing: -.08em; }
.signal-economy > strong em { margin-left: 5px; color: var(--gold); font: 18px var(--serif); font-style: normal; letter-spacing: 0; }
.signal-economy > p { margin: 6px 0 10px; color: var(--blue); letter-spacing: .09em; }
.signal-economy > b { color: var(--gold); font: 31px/.8 var(--mono); font-weight: 400; letter-spacing: .06em; }
.signal-economy > b i { font-style: normal; }
.signal-economy > small { margin-top: 5px; font-size: 7px; }
.signal-economy .signal-growth { position: absolute; right: -65px; top: 78px; color: #9bd3cb; font: 13px var(--mono); font-style: normal; }
.signal-node { z-index: 7; display: grid; grid-template-columns: 62px 1fr; gap: 11px; align-items: stretch; width: 270px; min-height: 116px; padding: 10px; border: 1px solid rgba(135,159,197,.25); border-left: 2px solid var(--blue); color: var(--paper); background: rgba(9,17,22,.72); text-align: left; transform: translate3d(0, 0, 0); transition: border-color .35s, background .35s, transform .35s, box-shadow .35s; }
.signal-node-image { display: block; min-height: 94px; overflow: hidden; }
.signal-node-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.15) brightness(.7); transition: transform .8s, filter .5s; }
.signal-node-copy { display: grid; align-content: center; gap: 4px; }
.signal-node-copy small { color: var(--blue); font: 7px var(--mono); letter-spacing: .12em; }
.signal-node-copy strong { color: var(--paper); font: 12px var(--mono); font-weight: 400; letter-spacing: .08em; }
.signal-node-copy em { min-height: 28px; color: rgba(242,238,231,.63); font: 11px/1.42 var(--serif); font-style: normal; }
.signal-node-copy i { color: var(--gold); font: 7px var(--mono); font-style: normal; letter-spacing: .12em; }
.signal-node:hover, .signal-node:focus, .signal-node.is-active { border-color: var(--gold); background: rgba(135,159,197,.14); box-shadow: 0 12px 30px rgba(0,0,0,.2), 0 0 30px rgba(121,181,165,calc(.06 + var(--signal-energy, 0) * .16)); transform: translate3d(0, -5px, 0); outline: none; }
.signal-node:hover img, .signal-node:focus img, .signal-node.is-active img { transform: scale(1.06); filter: saturate(.9) contrast(1.2) brightness(.83); }
.signal-node.node-ai { top: 80px; left: 5%; border-left-color: #9bd3cb; }
.signal-node.node-robotics { top: 80px; right: 5%; border-left-color: var(--gold); }
.signal-node.node-smart { bottom: 82px; left: 5%; border-left-color: var(--jade); }
.signal-node.node-move { right: 5%; bottom: 82px; border-left-color: var(--coral); }
.signal-detail { position: absolute; z-index: 8; right: 50%; bottom: 22px; width: 300px; padding: 12px 14px; border-top: 1px solid rgba(121,181,165,.4); background: rgba(9,17,22,.45); transform: translateX(50%); }
.signal-detail span, .signal-detail i { display: block; color: var(--blue); font: 7px/1.4 var(--mono); letter-spacing: .13em; font-style: normal; }
.signal-detail strong { display: block; margin: 5px 0 4px; color: var(--paper); font: 19px/1.1 var(--serif); font-weight: 400; }
.signal-detail small { display: block; color: rgba(242,238,231,.62); font: 11px/1.5 var(--serif); }
.signal-detail i { margin-top: 7px; color: var(--gold); }
.new-chapter .new-sounds { margin-top: 38px; }

/* A smaller cursor leaves the visual language in charge. */
.custom-cursor { width: 25px; height: 25px; top: -12px; left: -12px; opacity: .72; }
.custom-cursor::before { inset: 7px; opacity: .7; }
.custom-cursor::after { opacity: .42; }

@media (max-width: 760px) {
  .chapter-title-rail { top: 80px; left: 29px; width: min(330px, 76vw); min-height: 68px; }
  .chapter-title-rail::before { left: -11px; height: 56px; }
  .chapter-rail-slot span { font-size: 18px; }
  .river-chapter .river-stage { min-height: 275px; height: 275px; }
  .river-current-wash span { top: 12px; right: 16px; font-size: 6px; }
  .river-chapter .river-current-wash { opacity: .38; }
  .human-chapter .human-header { grid-template-columns: 1fr; gap: 27px; margin-top: 62px; }
  .human-chapter .sonic-data-panel { width: 100%; }
  .human-narrative-anchor { grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 -8px; }
  .human-narrative-stat { min-height: 75px; padding-right: 12px; }
  .human-narrative-stat i { right: 12px; }
  .human-narrative-stat strong { font-size: 35px; }
  .human-narrative-copy { grid-column: 1 / -1; }
  .human-chapter .human-field { min-height: 690px; margin-top: 50px; }
  .human-chapter .field-map { left: 0; width: 100%; height: 430px; padding: 11px; }
  .human-chapter .field-map::before { top: 9px; left: 12px; font-size: 7px; }
  .human-chapter .field-map::after { right: 12px; top: 9px; font-size: 6px; }
  .human-chapter .field-map .map-note { right: 12px; bottom: 10px; font-size: 6px; }
  .human-chapter .motif-node span { font-size: 10px; }
  .field-detail { right: 11px; bottom: 23px; width: 46%; padding: 9px 10px; }
  .field-detail strong { font-size: 17px; }
  .field-detail small { font-size: 9px; }
  .human-chapter .human-sounds { right: 0; bottom: 0; width: 100%; }
  .human-chapter .human-sounds .sound-line { padding: 8px 0; }
  .human-chapter .human-photo { right: 10px; bottom: 280px; width: 80px; height: 108px; opacity: .2; }
  .new-chapter .new-intro { margin-top: 63px; }
  .new-data-anchor { top: 160px; right: 18px; }
  .new-signal-map { width: 100%; height: 780px; margin: 48px 0 0; }
  .signal-map-kicker { left: 12px; top: 13px; font-size: 6px; letter-spacing: .12em; }
  .signal-province-svg { top: 157px; width: 88%; }
  .signal-economy { top: 49px; }
  .signal-economy > strong { font-size: 47px; }
  .signal-economy .signal-growth { right: -53px; top: 64px; font-size: 11px; }
  .signal-node { width: calc(50% - 18px); min-height: 100px; grid-template-columns: 43px 1fr; gap: 7px; padding: 7px; }
  .signal-node-image { min-height: 83px; }
  .signal-node-copy strong { font-size: 9px; line-height: 1.25; }
  .signal-node-copy em { min-height: 27px; font-size: 9px; line-height: 1.35; }
  .signal-node.node-ai { top: 305px; left: 12px; }
  .signal-node.node-robotics { top: 305px; right: 12px; }
  .signal-node.node-smart { top: 421px; left: 12px; bottom: auto; }
  .signal-node.node-move { top: 421px; right: 12px; bottom: auto; }
  .signal-detail { right: 12px; bottom: 22px; left: 12px; width: auto; transform: none; }
  .signal-detail strong { font-size: 17px; }
  .new-chapter .new-sounds { margin-top: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .river-current-wash::before, .river-current-wash::after, .river-current-wash i, .signal-rail-trace, .signal-digital-trace { animation: none; }
}

/* COMPETITION POLISH v1.0.7 / 2026-09-05 */
:root { --page-padding: clamp(24px, 6vw, 112px); --content-max-width: 1280px; --chapter-gutter: clamp(16px, 3vw, 48px); --safe-top: 92px; --safe-bottom: 48px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; }
.chapter-title-rail { z-index: 60; top: clamp(84px, 9vh, 112px); left: var(--page-padding); width: min(360px, 31vw); }
.chapter-rail-slot { gap: var(--space-8); }
.chapter-rail-slot small { letter-spacing: .22em; }
.chapter-rail-slot strong { letter-spacing: .13em; }
.chapter-rail-slot span { margin-top: var(--space-4); letter-spacing: .08em; }
.opening-chapter { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; padding: var(--safe-top) var(--page-padding) var(--safe-bottom); overflow: hidden; isolation: isolate; }
.opening-chapter::after { z-index: 4; content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,17,22,.78) 0%, rgba(8,17,22,.32) 45%, rgba(8,17,22,.06) 78%), linear-gradient(0deg, rgba(8,17,22,.72), transparent 42%, rgba(8,17,22,.16)); }
.opening-chapter .opening-copy { z-index: 8; grid-column: 2 / span 5; position: relative; margin: 0; align-self: center; max-width: 620px; }
.opening-chapter .opening-mark-wrap { z-index: 8; grid-column: 8 / span 4; position: relative; inset: auto; width: min(100%, 560px); aspect-ratio: 1; justify-self: end; }
.opening-chapter .opening-footer { z-index: 9; left: auto; right: auto; bottom: var(--safe-bottom); grid-column: 2 / -2; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--space-24); align-items: end; }
.opening-hero-readout { z-index: 8; top: auto; left: auto; right: var(--page-padding); bottom: 34%; width: min(250px, 20vw); }
.opening-hero-readout b { font: 19px/1.4 var(--serif); }
.image-opening-depth { z-index: 1; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.image-opening-depth .opening-image { position: absolute; inset: 0; border: 0; pointer-events: auto; overflow: hidden; }
.image-opening-depth .opening-horizon { position: absolute; inset: 0 0 38% 0; clip-path: polygon(0 0, 100% 0, 100% 83%, 71% 77%, 45% 88%, 0 73%); opacity: .82; }
.image-opening-depth .opening-city-river { position: absolute; inset: 18% 0 22% 18%; clip-path: polygon(0 22%, 100% 0, 100% 86%, 39% 76%, 0 100%); opacity: .46; mix-blend-mode: screen; }
.image-opening-depth .opening-wheatfield { position: absolute; inset: 42% 0 0 0; clip-path: polygon(0 19%, 30% 7%, 68% 26%, 100% 3%, 100% 100%, 0 100%); opacity: .72; mix-blend-mode: multiply; }
.image-opening-depth .opening-water-refraction { position: absolute; inset: 60% 0 0 0; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); opacity: .76; mix-blend-mode: screen; }
.image-opening-depth .opening-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(var(--img-x, 0), var(--img-y, 0), 0) scale(var(--img-scale, 1.02)); filter: saturate(.76) contrast(1.14) brightness(.67); transition: transform 1.2s ease, filter 1.2s ease; }
.image-opening-depth .opening-horizon img { object-position: center 57%; }
.image-opening-depth .opening-wheatfield img { object-position: center 54%; }
.image-opening-depth .opening-water-refraction img { object-position: center 72%; }
.image-opening-depth figcaption, .image-opening-depth .image-sound-meta, .image-opening-depth .image-sound-archive-action { display: none; }
.opening-surface-canvas { z-index: 5; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .58; }
.image-river-system { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; background: #0b3440; }
.image-river-system figure { position: absolute; inset: 0; margin: 0; border: 0; overflow: hidden; pointer-events: none; transition: opacity 1.8s ease, transform 2.2s ease, filter 1.8s ease; }
.image-river-system figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; transform: translate3d(var(--img-x, 0), var(--img-y, 0), 0) scale(1.04); filter: saturate(.84) contrast(1.16) brightness(.58); transition: transform 2.2s ease, filter 1.8s ease; }
.image-river-system .river-hero { opacity: .92; transform: scale(1); }
.image-river-system .river-water { opacity: .18; transform: scale(1.03); mix-blend-mode: screen; }
.river-state-a .image-river-system .river-hero { opacity: .9; transform: scale(1); }
.river-state-a .image-river-system .river-water { opacity: .15; }
.river-state-b .image-river-system .river-hero { opacity: .38; transform: scale(1.035); }
.river-state-b .image-river-system .river-water { opacity: .86; transform: scale(1); }
.river-state-c .image-river-system .river-hero { opacity: .18; }
.river-state-c .image-river-system .river-water { opacity: .95; transform: scale(1); }
.image-river-system figcaption, .image-river-system .image-sound-meta, .image-river-system .image-sound-archive-action { display: none; }
.river-chapter::after { z-index: 2; background: linear-gradient(90deg, rgba(4,20,28,.83), rgba(4,20,28,.18) 55%, rgba(4,20,28,.38)), linear-gradient(0deg, rgba(4,20,28,.72), transparent 48%); }
.river-chapter .river-stage, .river-chapter .river-header, .river-chapter .river-controls, .river-chapter .river-archives, .river-chapter .river-data-anchor { z-index: 8; }
.river-data-anchor { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, .8fr) minmax(260px, 1.8fr) minmax(100px, .55fr); gap: var(--space-24); align-items: end; width: min(calc(100% - 2 * var(--page-padding)), var(--content-max-width)); margin: 0 auto var(--space-24); padding: var(--space-16) 0; border-top: 1px solid rgba(175,226,238,.28); border-bottom: 1px solid rgba(175,226,238,.15); }
.river-data-number strong, .river-data-basin strong { display: block; color: #d7f1f0; font: clamp(32px, 4vw, 64px)/.88 var(--serif); font-weight: 400; }
.river-data-number span, .river-data-basin span, .river-data-copy small { display: block; color: rgba(215,241,240,.62); font: 8px/1.5 var(--mono); letter-spacing: .1em; }
.river-data-basin strong { color: var(--gold); font-size: clamp(22px, 3vw, 42px); }
.river-data-copy b { color: #a5d4d7; font: 8px var(--mono); letter-spacing: .12em; }
.river-data-copy p { max-width: 390px; margin: var(--space-8) 0; color: rgba(242,238,231,.82); font: 15px/1.65 var(--serif); }
.river-data-line { align-self: stretch; min-height: 44px; border-bottom: 1px solid rgba(226,181,104,.62); }
.river-data-line canvas { width: 100%; height: 100%; }
.river-state-label { z-index: 8; position: absolute; right: var(--space-24); bottom: var(--space-16); color: rgba(215,241,240,.62); font: 8px var(--mono); letter-spacing: .16em; }
.image-human-archive { z-index: 1; position: absolute; inset: auto 0 0; height: 43%; overflow: hidden; pointer-events: none; }
.image-human-archive .human-layer { position: absolute; inset: 0; border: 0; overflow: hidden; opacity: .27; mix-blend-mode: multiply; }
.image-human-archive .human-layer:nth-child(1) { clip-path: polygon(0 22%, 35% 0, 70% 19%, 100% 0, 100% 100%, 0 100%); opacity: .42; }
.image-human-archive .human-layer:nth-child(2) { inset: 6% 10% 6% 46%; clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 83%); opacity: .18; mix-blend-mode: screen; }
.image-human-archive .human-layer:nth-child(3) { inset: 9% 0 0 0; opacity: .22; }
.image-human-archive .human-layer:nth-child(4) { inset: 28% 0 0 38%; opacity: .3; mix-blend-mode: soft-light; }
.image-human-archive .human-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(.55) sepia(.22) contrast(1.1) brightness(.9); }
.image-human-archive figcaption, .image-human-archive .image-sound-meta, .image-human-archive .image-sound-archive-action { display: none; }
.human-chapter::after { z-index: 2; background: linear-gradient(90deg, rgba(246,241,225,.78), rgba(246,241,225,.22) 66%, rgba(246,241,225,.42)), linear-gradient(0deg, rgba(246,241,225,.86), transparent 47%); }
.human-chapter .human-header, .human-chapter .human-field, .human-chapter .human-sounds, .human-chapter .human-narrative-anchor, .human-chapter .street-strip { z-index: 8; }
.human-narrative-anchor { grid-template-columns: minmax(150px, 1.1fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(260px, 2fr); gap: var(--space-24); align-items: end; margin: var(--space-32) auto 0; width: min(calc(100% - 2 * var(--page-padding)), var(--content-max-width)); }
.human-narrative-stat { border-top: 1px solid rgba(17,22,25,.32); padding-top: var(--space-8); }
.human-narrative-stat strong { font-size: clamp(30px, 4vw, 56px); }
.human-narrative-stat span { letter-spacing: .08em; }
.human-narrative-copy p { max-width: 470px; margin: 0; font-size: 15px; line-height: 1.75; }
.human-narrative-copy small { display: block; margin-top: var(--space-8); color: rgba(17,22,25,.52); font: 8px var(--mono); letter-spacing: .1em; }
.human-chapter .field-map { width: min(55vw, 680px); }
.human-chapter .field-map::before { content: 'ACCURATE HENAN OUTLINE / 410000 / MOTIF FIELD'; }
.human-chapter .field-map::after { content: 'SOUND · LAND · LIFE'; }
.image-material-stage { z-index: 1; position: absolute; inset: 24% 0 0; pointer-events: none; overflow: hidden; }
.image-material-stage > figure { position: absolute; inset: 0; margin: 0; opacity: 0; border: 0; overflow: hidden; transition: opacity 1.2s ease, transform 1.8s ease, clip-path 1.6s ease; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 84%); transform: scale(1.025); }
.image-material-stage > figure.is-active { opacity: .42; transform: scale(1); }
.image-material-stage > figure > .material-primary { position: absolute; inset: 0; border: 0; }
.image-material-stage .material-primary img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.44) sepia(.22) contrast(1.2) brightness(.58); }
.image-material-stage .material-wash { position: absolute; inset: 10% 10% 12% 45%; border: 0; opacity: .45; mix-blend-mode: screen; }
.image-material-stage figcaption, .image-material-stage .image-sound-meta, .image-material-stage .image-sound-archive-action { display: none; }
.ancient-chapter::after { z-index: 2; background: linear-gradient(90deg, rgba(17,16,16,.9), rgba(17,16,16,.5) 56%, rgba(17,16,16,.35)), linear-gradient(0deg, rgba(17,16,16,.76), transparent 48%); }
.ancient-chapter .ancient-heading, .ancient-chapter .ancient-lab, .ancient-chapter .ancient-note, .ancient-chapter .civilization-timeline, .ancient-chapter .civilization-data-note { z-index: 8; }
.civilization-timeline { width: min(calc(100% - 2 * var(--page-padding)), var(--content-max-width)); margin: var(--space-48) auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(226,181,104,.32); border-bottom: 1px solid rgba(226,181,104,.2); }
.civilization-timeline-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) 0; color: rgba(242,238,231,.6); font: 8px var(--mono); letter-spacing: .12em; }
.civilization-node { min-height: 84px; padding: var(--space-12); border: 0; border-right: 1px solid rgba(226,181,104,.18); border-radius: 0; background: transparent; color: var(--paper); text-align: left; }
.civilization-node:last-child { border-right: 0; }
.civilization-node b { color: var(--gold); font: 8px var(--mono); }
.civilization-node span { display: block; margin: var(--space-8) 0; color: var(--paper); font: 16px/1.2 var(--serif); }
.civilization-node small { color: rgba(242,238,231,.42); font: 7px var(--mono); letter-spacing: .13em; }
.civilization-node:hover, .civilization-node.is-active { background: rgba(226,181,104,.08); }
.civilization-data-note { width: min(calc(100% - 2 * var(--page-padding)), var(--content-max-width)); margin: var(--space-16) auto 0; border-left: 1px solid var(--gold); padding-left: var(--space-16); }
.civilization-data-note strong { color: var(--gold); font: 26px var(--mono); font-weight: 400; }
.civilization-data-note span, .civilization-data-note small { display: block; color: rgba(242,238,231,.62); font: 9px/1.6 var(--mono); letter-spacing: .08em; }
.civilization-data-note small { max-width: 900px; margin-top: var(--space-4); font-family: var(--serif); letter-spacing: 0; }
.image-new-movement { z-index: 1; position: absolute; inset: 30% 0 0; overflow: hidden; pointer-events: none; }
.image-new-movement .new-movement-image { position: absolute; margin: 0; border: 0; overflow: hidden; opacity: .28; }
.image-new-movement .new-movement-image:nth-child(1) { inset: 0 51% 31% 7%; }
.image-new-movement .new-movement-image:nth-child(2) { inset: 15% 7% 23% 55%; }
.image-new-movement .new-movement-image:nth-child(3) { inset: 61% 39% 0 13%; opacity: .2; }
.image-new-movement .new-movement-image:nth-child(4) { inset: 58% 4% 0 59%; opacity: .2; }
.image-new-movement .new-movement-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.2) brightness(.54); }
.image-new-movement figcaption, .image-new-movement .image-sound-meta, .image-new-movement .image-sound-archive-action { display: none; }
.new-chapter::after { z-index: 2; }

@media (max-width: 760px) {
  :root { --page-padding: 24px; --safe-top: 82px; --safe-bottom: 28px; }
  .chapter-title-rail { top: 76px; left: 24px; width: min(330px, 82vw); }
  .opening-chapter { display: block; padding: var(--safe-top) var(--page-padding) var(--safe-bottom); }
  .opening-chapter .opening-copy { position: absolute; left: var(--page-padding); right: var(--page-padding); top: 27%; max-width: 100%; }
  .opening-chapter .opening-mark-wrap { position: absolute; top: 48%; right: 8%; width: 52vw; }
  .opening-chapter .opening-footer { position: absolute; left: var(--page-padding); right: var(--page-padding); bottom: var(--safe-bottom); width: auto; display: block; }
  .opening-hero-readout { right: var(--page-padding); bottom: 30%; width: 145px; }
  .opening-hero-readout b { font-size: 14px; }
  .image-opening-depth .opening-horizon { inset: 0 0 50% 0; }
  .image-opening-depth .opening-city-river { inset: 18% 0 32% 7%; }
  .image-opening-depth .opening-wheatfield { inset: 44% 0 15% 0; }
  .image-opening-depth .opening-water-refraction { inset: 67% 0 0 0; }
  .river-data-anchor { grid-template-columns: 1fr 1fr; gap: var(--space-12); width: calc(100% - 2 * var(--page-padding)); }
  .river-data-copy { grid-column: 1 / -1; }
  .river-data-line { grid-column: 1 / -1; min-height: 34px; }
  .river-state-label { right: var(--page-padding); bottom: var(--space-8); font-size: 6px; }
  .human-narrative-anchor { grid-template-columns: 1fr 1fr; width: calc(100% - 2 * var(--page-padding)); gap: var(--space-12); }
  .human-narrative-copy { grid-column: 1 / -1; }
  .human-chapter .field-map { width: 100%; }
  .image-human-archive { height: 35%; }
  .image-human-archive .human-layer:nth-child(2) { inset: 0 0 0 38%; }
  .image-material-stage { inset: 35% 0 0; }
  .civilization-timeline { grid-template-columns: repeat(5, minmax(115px, 1fr)); width: calc(100% - 2 * var(--page-padding)); overflow-x: auto; }
  .civilization-timeline-head { position: sticky; left: 0; min-width: 560px; }
  .civilization-node { min-width: 115px; }
  .civilization-data-note { width: calc(100% - 2 * var(--page-padding)); }
  .image-new-movement { inset: 38% 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .image-river-system figure, .image-material-stage > figure, .image-opening-depth .opening-image img { transition-duration: .01ms; }
}