@font-face {
  font-family: "Source Han Sans SC Web";
  src: url("./assets/fonts/source-han-sans-sc-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans SC Web";
  src: url("./assets/fonts/source-han-sans-sc-medium-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink-950: #040b11;
  --ink-900: #07121c;
  --ink-800: #102332;
  --silver-100: #f0eee7;
  --silver-300: #c8c7c0;
  --silver-500: #91989a;
  --ochre: #a56f4f;
  --journey-progress: 0;
  --font-poem: "Kaiti SC", "STKaiti", "FZKai-Z03S", "Songti SC", serif;
  --font-reading: "Source Han Sans SC Web", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif;
  --font-interface: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--font-interface);
  background: var(--ink-950);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-950);
}

button,
a { color: inherit; font: inherit; }

button { border: 0; }

button:focus-visible,
a:focus-visible {
  outline: 1px solid #c39778;
  outline-offset: 5px;
}

.journey,
.scene,
.scene__grade,
.scene__vignette,
.scene__grain {
  position: fixed;
  inset: 0;
}

.journey { isolation: isolate; }

.scene { z-index: -3; overflow: hidden; background: #06111a; }

.scene__deck,
.scene__media {
  position: absolute;
  inset: 0;
}

.scene__deck {
  opacity: 0;
  will-change: opacity;
}

.scene__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 900ms ease, filter 1200ms ease, transform 8s linear;
}

.scene__media.is-visible { opacity: 1; transform: scale(1); }

.scene__video { z-index: 1; }
.scene__image { z-index: 0; }
.scene__closing-loop {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.002);
  transition: opacity 520ms ease;
  will-change: opacity;
}
.scene__closing-loop.is-visible { opacity: 1; }

.scene__grade {
  z-index: 4;
  background: linear-gradient(180deg, #06101a 0%, transparent 34%, transparent 73%, #03080d 100%);
  opacity: .48;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.scene__handoff-veil {
  position: absolute;
  z-index: 5;
  inset: -12%;
  opacity: var(--handoff-veil, 0);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 46% 63%, rgba(31, 52, 62, .46) 0%, rgba(20, 39, 48, .32) 34%, transparent 70%),
    linear-gradient(180deg, transparent 24%, rgba(11, 27, 36, .36) 62%, transparent 91%);
  background-color: rgba(7, 19, 27, .52);
  filter: blur(28px);
  transform: scale(1.04);
  will-change: opacity;
}

.scene__vignette {
  z-index: 7;
  pointer-events: none;
  box-shadow: inset 0 0 160px 36px #02070c;
}

.scene__grain {
  z-index: 8;
  opacity: .12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.scene__fog {
  position: absolute;
  z-index: 6;
  left: -25%;
  width: 150%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #bcc8c9 0%, transparent 68%);
  filter: blur(22px);
  animation: drift 22s ease-in-out infinite alternate;
}

.scene__fog--far { bottom: 31%; height: 13%; opacity: .08; }
.scene__fog--near { bottom: 7%; height: 19%; opacity: .035; animation-duration: 31s; animation-direction: alternate-reverse; }

@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(5%); } }

body[data-scene="hero"] .scene__grade {
  background: linear-gradient(180deg, #100e10 0%, transparent 48%, #110908 100%);
}

body[data-scene="hero"] .scene__media { filter: saturate(.76) sepia(.12); }
body[data-scene="mayfly"] .scene__media { filter: brightness(.66) saturate(.7); }
body[data-scene="change"] .scene__media { filter: brightness(.9) saturate(.78); }
body[data-scene="dawn"] .scene__media { filter: brightness(1.12) saturate(.66) sepia(.07); }

.masthead {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 36px;
  color: var(--silver-100);
  font-family: var(--font-interface);
  transition:
    opacity 820ms ease,
    transform 920ms cubic-bezier(.22, .84, .27, 1);
}

.masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 112px;
  background: linear-gradient(180deg, rgba(3, 10, 16, .72), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms ease;
}

.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
.brand__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(180, 137, 109, .78);
  color: #d1a98d;
  font-family: var(--font-poem);
  font-size: 17px;
  box-shadow: inset 0 0 18px rgba(165, 111, 79, .08);
}
.brand__seal::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(180, 137, 109, .2); }
.brand__text { display: grid; gap: 3px; }
.brand__text strong { font-size: 14px; letter-spacing: .22em; font-weight: 500; }
.brand__text small { color: #a7ada9; font-size: 10px; letter-spacing: .16em; }

.chapter { display: flex; align-items: center; gap: 10px; color: var(--silver-300); font-size: 11px; letter-spacing: .14em; }
.chapter i { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, #818989, transparent); }

.sound {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  background: transparent;
  color: var(--silver-300);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .14em;
}

.sound__bars { height: 14px; display: flex; align-items: end; gap: 2px; }
.sound__bars i { width: 1px; background: currentColor; animation: soundbar .9s ease-in-out infinite alternate; }
.sound__bars i:nth-child(1) { height: 6px; }
.sound__bars i:nth-child(2) { height: 13px; animation-delay: -.4s; }
.sound__bars i:nth-child(3) { height: 9px; animation-delay: -.7s; }
.sound[aria-pressed="false"] .sound__bars i { animation: none; height: 2px; }
@keyframes soundbar { to { height: 3px; } }

.intro {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--silver-100);
  background:
    linear-gradient(180deg, rgba(3, 10, 16, .72) 0%, rgba(3, 10, 16, .08) 40%, rgba(3, 10, 16, .78) 100%);
  transition: opacity 1000ms ease, visibility 1000ms;
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 43%, transparent 0 12%, rgba(3, 10, 16, .18) 46%, #030a10 100%);
  opacity: .72;
  z-index: -1;
}

.entered .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__composition {
  position: relative;
  width: min(680px, calc(100vw - 48px));
  min-height: min(610px, calc(100vh - 88px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vh, 54px) 24px 16px;
  text-align: center;
}

.intro__composition::before {
  content: "";
  position: absolute;
  top: 9%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(183, 144, 117, .2) 22%, transparent 47%, rgba(183, 144, 117, .18) 78%, transparent);
  transform: translateX(-50%);
  opacity: 0;
  animation: intro-thread 1800ms cubic-bezier(.22, .68, .2, 1) 1180ms both;
}

.intro__eyebrow {
  position: relative;
  margin: 0 0 29px;
  color: #b9bfbd;
  font-size: 10px;
  letter-spacing: .48em;
  text-indent: .48em;
  opacity: 0;
  animation: intro-reveal 900ms cubic-bezier(.22, .68, .2, 1) 220ms both;
}

.intro h1 {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 17px;
  font-family: var(--font-poem);
  font-weight: 400;
  opacity: 0;
  animation: intro-title-reveal 1180ms cubic-bezier(.16, .72, .2, 1) 760ms both;
}

.intro h1 span {
  font-size: clamp(52px, 6.6vw, 94px);
  line-height: 1.04;
  letter-spacing: .3em;
  text-indent: .3em;
  text-shadow: 0 7px 44px #02070c;
}

.intro h1 em {
  display: flex;
  align-items: center;
  gap: 17px;
  color: #c19a7d;
  font-family: var(--font-interface);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .62em;
  text-indent: .62em;
}

.intro h1 em::before,
.intro h1 em::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193, 154, 125, .6));
}

.intro h1 em::after { transform: scaleX(-1); }

.intro__lead {
  position: relative;
  z-index: 1;
  margin: 35px 0 31px;
  display: grid;
  gap: 4px;
  color: #c9cbc6;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .13em;
}

.intro__lead-line {
  display: block;
  opacity: 0;
  animation: intro-reveal 900ms cubic-bezier(.22, .68, .2, 1) both;
}

.intro__lead-line:nth-child(1) { animation-delay: 1680ms; }
.intro__lead-line:nth-child(2) { animation-delay: 2140ms; }

.enter {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  visibility: hidden;
  opacity: 0;
  border-radius: 50%;
  border: 1px solid rgba(196, 203, 200, .72);
  background: rgba(7, 18, 28, .74);
  box-shadow: 0 15px 48px rgba(0, 0, 0, .22);
  backdrop-filter: blur(3px);
  color: var(--silver-100);
  cursor: pointer;
  font-family: var(--font-reading);
  font-size: 14px;
  letter-spacing: .25em;
  text-indent: .25em;
  animation: intro-enter 980ms cubic-bezier(.16, .72, .2, 1) 3000ms both;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.enter::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(75, 92, 101, .72); border-radius: 50%; }
.enter:hover { transform: translateY(-3px); background: rgba(20, 38, 53, .92); border-color: #e2dfd7; box-shadow: 0 18px 56px rgba(0, 0, 0, .34); }
.enter i { position: absolute; bottom: 15px; width: 14px; height: 1px; background: #b8b9b4; }
.intro__sound-note {
  margin: 17px 0 0;
  color: #949e9c;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .14em;
  opacity: 0;
  animation: intro-reveal 700ms ease 3500ms both;
}

@keyframes intro-reveal {
  from { opacity: 0; transform: translateY(13px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes intro-title-reveal {
  from { opacity: 0; transform: translateY(21px); filter: blur(5px); letter-spacing: .04em; }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes intro-thread {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.08); }
  42%, 72% { opacity: 1; }
  100% { opacity: .45; transform: translateX(-50%) scaleY(1); }
}

@keyframes intro-enter {
  from { visibility: hidden; opacity: 0; transform: translateY(17px) scale(.92); }
  1% { visibility: visible; }
  to { visibility: visible; opacity: 1; transform: none; }
}

.story-copy {
  position: fixed;
  z-index: 12;
  inset: 0;
  color: var(--silver-100);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.entered .story-copy { opacity: 1; }
.story-copy__beat {
  position: absolute;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.22, .76, .25, 1), visibility 240ms;
}

body[data-content-beat="arrival"] .story-copy__chapter-beat,
body[data-content-beat="verse"] .story-copy__verse-beat,
body[data-content-beat="reading"] .story-copy__reading-beat {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-duration: 520ms, 680ms, 0ms;
  transition-delay: 240ms;
}

body[data-content-beat="reading"] .story-copy__reading-beat { pointer-events: auto; }
.story-copy.is-changing .story-copy__beat {
  opacity: 0;
  transform: translateY(10px);
  transition-duration: 180ms;
  transition-delay: 0ms;
}

.story-copy__chapter-beat {
  top: clamp(108px, 16vh, 146px);
  inset-inline: 0;
  width: min(560px, calc(100vw - 180px));
  margin-inline: auto;
  text-align: center;
  transform: translateY(-10px);
}

.story-copy__chapter-line { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 0; color: #d7d5cd; font-family: var(--font-interface); font-size: 10px; letter-spacing: .22em; text-shadow: 0 3px 24px #02070c, 0 0 42px rgba(2, 7, 12, .84); }
.story-copy__chapter-line i { width: 34px; height: 1px; background: linear-gradient(90deg, rgba(165, 111, 79, .25), var(--ochre)); }
.story-copy__chapter-line strong { color: #f0ede5; font-family: var(--font-reading); font-size: clamp(15px, 1.35vw, 18px); font-weight: 500; letter-spacing: .14em; }

.story-copy__verse-beat {
  inset-inline: 0;
  bottom: clamp(58px, 9vh, 88px);
  width: min(1040px, calc(100vw - 120px));
  margin-inline: auto;
  text-align: center;
}

.story-copy__original-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 15px;
  color: #c8c3b8;
  font-family: var(--font-interface);
  font-size: 9px;
  letter-spacing: .42em;
  text-indent: .42em;
  text-shadow: 0 2px 16px #02070c;
}

.story-copy__original-label::before,
.story-copy__original-label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: #88715f;
}

.story-copy blockquote { margin: 0 auto; max-width: 920px; color: #f2eee4; font-family: var(--font-poem); font-size: clamp(29px, 3.25vw, 45px); line-height: 1.5; font-weight: 400; letter-spacing: .055em; text-wrap: pretty; text-shadow: 0 3px 22px #02070c, 0 0 46px rgba(2, 7, 12, .94); }
.story-copy blockquote > span,
.story-copy__reading-beat h3 > span,
.story-copy__teaser > span,
.epilogue__verse blockquote > span,
.reading h2 > span {
  display: block;
  line-break: strict;
  text-wrap: balance;
}

.story-copy__line {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;
}

.story-copy__terminal-mark {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: .04em;
}

.story-copy__reading-beat {
  inset-inline: 0;
  bottom: clamp(48px, 7vh, 72px);
  width: min(760px, calc(100vw - 160px));
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  border-left: 0;
  display: grid;
  text-align: center;
  filter: drop-shadow(0 8px 24px rgba(1, 6, 10, .48));
}

.story-copy__reading-insight,
.story-copy__reading-invitation {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 680ms cubic-bezier(.22, .76, .25, 1), visibility 520ms;
}

body[data-reading-moment="insight"] .story-copy__reading-insight,
body[data-reading-moment="invitation"] .story-copy__reading-invitation {
  opacity: 1;
  visibility: visible;
  transform: none;
}

body[data-reading-moment="invitation"] .story-copy__reading-invitation { pointer-events: auto; }

.story-copy__reading-label { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 8px; color: #d0a083; font-family: var(--font-interface); font-size: 9px; letter-spacing: .24em; }
.story-copy__reading-label::before { content: ""; width: 4px; height: 4px; background: var(--ochre); transform: rotate(45deg); }
.story-copy__reading-beat h3 { margin: 0; color: #f1eee6; font-family: var(--font-reading); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.48; font-weight: 500; letter-spacing: .08em; text-shadow: 0 2px 22px #02070c; }
.story-copy__teaser { max-width: 42em; margin: 0 auto; color: #ece9e1; font-family: var(--font-reading); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; font-weight: 400; letter-spacing: .035em; text-wrap: pretty; text-shadow: 0 2px 18px #02070c, 0 0 28px rgba(2, 7, 12, .88); }
.read-more { position: relative; display: flex; align-items: center; gap: 9px; width: max-content; min-height: 40px; margin: 9px auto 0; padding: 5px 0; background: transparent; color: #eeeae2; cursor: pointer; font-family: var(--font-interface); font-size: 10px; letter-spacing: .16em; }
.read-more::after { content: ""; position: absolute; width: 28px; height: 1px; margin-top: 25px; background: var(--ochre); opacity: .68; transition: width 280ms ease, opacity 280ms ease; }
.read-more:hover::after { width: 86px; }
.read-more i { color: #b88769; font-style: normal; }

.image-cue {
  position: fixed;
  z-index: 17;
  left: var(--cue-x, 50%);
  top: var(--cue-y, 50%);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(8px);
  background: transparent;
  color: #eee9de;
  cursor: pointer;
  transition: opacity 620ms ease, transform 760ms cubic-bezier(.22, .76, .25, 1), visibility 620ms;
}

body[data-content-beat="reading"][data-epilogue-beat="hidden"] .image-cue.is-available {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.image-cue__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d3b397;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(12, 24, 31, .22), 0 3px 20px #02070c;
}

.image-cue__ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(211, 179, 151, .42);
  border-radius: inherit;
  animation: cue-breathe 2.8s ease-out infinite;
}

.image-cue__ring i { width: 4px; height: 4px; border-radius: 50%; background: #f3e2d2; box-shadow: 0 0 12px #e2b995; }
.image-cue__label { padding: 7px 9px; background: #0a1720; border-left: 1px solid #9e7358; font-family: var(--font-reading); font-size: 11px; letter-spacing: .16em; white-space: nowrap; box-shadow: 0 5px 20px rgba(1, 6, 10, .42); }
.image-cue.is-label-left { flex-direction: row-reverse; }
.image-cue.is-label-left .image-cue__label { border-left: 0; border-right: 1px solid #9e7358; }
.image-cue:hover .image-cue__ring { border-color: #f0ddd0; }
.image-cue:hover .image-cue__label { color: #fffaf0; }
@keyframes cue-breathe { 0% { opacity: .75; transform: scale(.72); } 75%, 100% { opacity: 0; transform: scale(1.35); } }

.epilogue {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

.epilogue::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(4, 11, 17, .04) 0%, rgba(4, 11, 17, .2) 54%, rgba(4, 11, 17, .68) 100%);
  transition: opacity 1200ms ease;
}

.epilogue__beat {
  position: absolute;
  left: 50%;
  width: min(900px, calc(100vw - 80px));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 18px);
  text-align: center;
  transition: opacity 800ms ease, transform 1000ms cubic-bezier(.22, .76, .25, 1), visibility 800ms;
}

body[data-epilogue-beat="verse"] .epilogue__verse,
body[data-epilogue-beat="reflection"] .epilogue__reflection,
body[data-epilogue-beat="mark"] .epilogue__mark {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

body:not([data-epilogue-beat="hidden"]) .story-copy,
body:not([data-epilogue-beat="hidden"]) .timeline,
body:not([data-epilogue-beat="hidden"]) .image-cue { opacity: 0; pointer-events: none; }
body[data-epilogue-beat="mark"] .epilogue::before { opacity: 1; }
body[data-epilogue-beat="mark"] .epilogue__mark { pointer-events: auto; }
body[data-epilogue-beat="mark"] .masthead,
body[data-epilogue-beat="mark"] .river-progress { opacity: 0; pointer-events: none; }

.epilogue__verse { bottom: 12vh; }
.epilogue__label { margin: 0 0 16px; color: #c2bcb0; font-family: var(--font-interface); font-size: 9px; letter-spacing: .42em; text-indent: .42em; }
.epilogue__verse blockquote { margin: 0; color: #f1ece2; font-family: var(--font-poem); font-size: clamp(31px, 3.8vw, 52px); font-weight: 400; line-height: 1.55; letter-spacing: .045em; text-shadow: 0 3px 24px #02070c, 0 0 46px rgba(2, 7, 12, .84); }

.epilogue__reflection { bottom: 13vh; color: #eeeae2; font-family: var(--font-reading); text-shadow: 0 3px 24px #02070c, 0 0 42px rgba(2, 7, 12, .9); }
.epilogue__reflection p { margin: 0; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.95; letter-spacing: .055em; }
.epilogue__reflection p + p { color: #d9d8d1; }

.epilogue__mark { top: 50%; transform: translate(-50%, calc(-50% + 18px)); }
body[data-epilogue-beat="mark"] .epilogue__mark { transform: translate(-50%, -50%); }
.epilogue__eyebrow { margin: 0 0 20px; color: #c49a7d; font-family: var(--font-interface); font-size: 10px; letter-spacing: .5em; text-indent: .5em; }
.epilogue__mark h2 { margin: 0; color: #f2eee5; font-family: var(--font-poem); font-size: clamp(46px, 6vw, 78px); font-weight: 400; letter-spacing: .22em; text-indent: .22em; text-shadow: 0 4px 36px #02070c; }
.epilogue__byline { margin: 13px 0 0; color: #b7bab6; font-family: var(--font-interface); font-size: 11px; letter-spacing: .28em; text-indent: .28em; }
.epilogue__actions { display: flex; justify-content: center; gap: 28px; margin-top: 42px; }
.epilogue__actions button { min-width: 116px; padding: 11px 4px; border-bottom: 1px solid #80634f; background: transparent; color: #e8e4db; cursor: pointer; font-family: var(--font-reading); font-size: 11px; letter-spacing: .16em; transition: color 240ms ease, border-color 240ms ease; }
.epilogue__actions button:hover { color: #fffaf0; border-color: #d0ad93; }

.timeline {
  position: fixed;
  z-index: 25;
  right: 0;
  top: 50%;
  display: grid;
  width: 88px;
  padding-right: 32px;
  gap: 11px;
  justify-items: end;
  transform: translateY(-50%);
  opacity: 1;
  transition:
    opacity 680ms ease,
    transform 760ms cubic-bezier(.22, .84, .27, 1);
}

.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 32px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(190, 198, 195, .2) 22%, rgba(190, 198, 195, .2) 78%, transparent);
  pointer-events: none;
}

.timeline button { position: relative; min-width: 44px; min-height: 32px; width: 44px; height: 32px; background: transparent; cursor: pointer; }
.timeline button::before {
  content: "";
  position: absolute;
  right: 0;
  top: 15px;
  width: 7px;
  height: 1px;
  background: #89918f;
  transform-origin: right center;
  transition: width 320ms ease, background 320ms ease, box-shadow 320ms ease;
}
.timeline button::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 12px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(198, 154, 121, .72);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.55);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, .84, .27, 1), box-shadow 320ms ease;
}
.timeline button:hover::before { width: 16px; background: #c4c8c2; }
.timeline button[aria-current="step"]::before {
  width: 25px;
  background: #c69a79;
  box-shadow: 0 0 12px rgba(198, 154, 121, .42);
}
.timeline button[aria-current="step"]::after { opacity: 1; transform: scale(1); }
.timeline button:focus-visible { outline: none; }
.timeline button:focus-visible::after { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 3px rgba(198, 154, 121, .12); }
.timeline__number,
.timeline__label {
  position: absolute;
  top: 7px;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms ease;
}
.timeline__number {
  right: 51px;
  color: #d9d8d1;
  font-family: var(--font-interface);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  transform: translateX(6px);
}
.timeline__label {
  right: 76px;
  color: #b8beba;
  font-family: var(--font-interface);
  font-size: 10px;
  letter-spacing: .16em;
  transform: translateX(8px);
}
.timeline:hover .timeline__number,
.timeline:focus-within .timeline__number {
  opacity: 1;
  transform: none;
}
.timeline button:hover .timeline__label,
.timeline button:focus-visible .timeline__label {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .entered .masthead {
    opacity: 0;
    transform: translateY(-58px);
    transition-delay: 1800ms;
  }

  .entered .masthead:hover,
  .entered .masthead:focus-within {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }

  .entered .masthead:hover::before,
  .entered .masthead:focus-within::before { opacity: 1; }

  .entered .timeline {
    opacity: .1;
    transform: translate(42px, -50%);
    transition-delay: 1800ms;
  }

  .entered .timeline:hover,
  .entered .timeline:focus-within {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 0ms;
  }
}

.gesture {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8f9696;
  font-size: 9px;
  letter-spacing: .19em;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 600ms ease;
}

.entered .gesture { opacity: 1; }
.journey-started .gesture { opacity: 0; }
.gesture__mouse { width: 15px; height: 22px; border: 1px solid #777f80; border-radius: 9px; }
.gesture__mouse i { display: block; width: 1px; height: 5px; margin: 4px auto; background: #a9aeac; animation: wheel 1.5s ease infinite; }
@keyframes wheel { 70% { transform: translateY(6px); opacity: 0; } 71% { transform: none; opacity: 1; } }

.river-progress { position: fixed; z-index: 14; left: 0; bottom: 0; width: 100%; height: 2px; background: #15222a; }
.river-progress i { display: block; width: calc(var(--journey-progress) * 100%); height: 100%; background: #a57a5f; box-shadow: 0 0 18px #c7aa93; }

.reading-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #02070c;
  transition: opacity 500ms ease, visibility 500ms;
}

.reading-backdrop.is-open { visibility: visible; opacity: .62; pointer-events: auto; }
.reading {
  position: fixed;
  z-index: 45;
  top: 0;
  right: 0;
  width: min(610px, 47vw);
  height: 100%;
  padding: clamp(80px, 12vh, 130px) clamp(42px, 6vw, 86px) 60px;
  overflow-y: auto;
  color: #e5e2da;
  font-family: var(--font-reading);
  background: #0b1822;
  border-left: 1px solid #2d3a41;
  transform: translateX(100%);
  transition: transform 620ms cubic-bezier(.22, .84, .27, 1);
}

.reading.is-open { transform: none; }
.reading__close { position: absolute; top: 28px; right: 34px; width: 40px; height: 40px; background: transparent; color: #aeb4b2; font-size: 27px; font-weight: 200; cursor: pointer; }
.reading__kicker { margin: 0 0 20px; color: #b78568; font-size: 11px; letter-spacing: .28em; }
.reading h2 { margin: 0; font-family: var(--font-reading); font-size: clamp(27px, 2.6vw, 40px); line-height: 1.5; font-weight: 600; letter-spacing: .035em; }
.reading__original {
  margin: 30px 0 34px;
  padding: 22px 20px 25px;
  border-top: 1px solid rgba(183, 133, 104, .26);
  border-bottom: 1px solid rgba(183, 133, 104, .16);
  background: #101f29;
}
.reading__original[hidden] { display: none; }
.reading__original-label,
.reading__section-label {
  margin: 0 0 13px;
  color: #b78568;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .28em;
  text-align: center;
}
.reading__original blockquote,
.reading__section-original {
  margin: 0;
  color: #f0ece2;
  font-family: var(--font-poem);
  font-size: clamp(21px, 1.85vw, 28px);
  line-height: 1.72;
  letter-spacing: .045em;
  text-align: center;
}
.reading__original .story-copy__line,
.reading__section-original .story-copy__line { display: block; }
.reading__rule { display: flex; align-items: center; gap: 13px; margin: 31px 0; color: #929a99; font-size: 10px; letter-spacing: .22em; }
.reading__rule i { width: 56px; height: 1px; background: #795a48; }
.reading__body {
  max-width: 34em;
  margin: 0;
  color: #dcddd8;
  font-family: var(--font-reading);
  font-size: clamp(17px, 1.25vw, 18px);
  line-height: 2.08;
  letter-spacing: .025em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
  hanging-punctuation: first allow-end;
}
.reading__body p { margin: 0; orphans: 2; widows: 2; }
.reading__body p + p { margin-top: 1.1em; }
.reading__section + .reading__section { margin-top: 46px; padding-top: 34px; border-top: 1px solid rgba(184, 154, 132, .2); }
.reading__section h3 { margin: 0 0 24px; color: #d3a98d; font-family: var(--font-reading); font-size: 15px; line-height: 1.6; font-weight: 500; letter-spacing: .14em; }
.reading__section-original { margin-bottom: 25px; font-size: clamp(19px, 1.65vw, 24px); }
.reading__section-label--analysis { margin-top: 0; color: #929a99; text-align: left; }
.reading__section p { margin: 0; }
.reading__source { margin: 42px 0 0; padding-top: 20px; border-top: 1px solid #26343c; color: #899291; font-size: 10px; line-height: 1.8; letter-spacing: .12em; }

.reading::-webkit-scrollbar { width: 8px; }
.reading::-webkit-scrollbar-track { background: transparent; }
.reading::-webkit-scrollbar-thumb { background: #34434a; border: 2px solid #0b1822; border-radius: 999px; }

noscript { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--ink-950); color: white; }

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr auto; padding: 19px 18px; }
  .brand__text small, .chapter { display: none; }
  .brand__seal { width: 30px; height: 30px; }
  .story-copy__chapter-beat { top: clamp(86px, 13vh, 112px); inset-inline: 22px; width: auto; margin-inline: auto; text-align: center; }
  .story-copy__chapter-line { gap: 10px; font-size: 9px; }
  .story-copy__chapter-line i { width: 24px; }
  .story-copy__chapter-line strong { font-size: 15px; letter-spacing: .12em; }
  .story-copy__verse-beat { inset-inline: 20px; bottom: clamp(48px, 8vh, 68px); width: auto; margin-inline: auto; text-align: center; }
  .story-copy__original-label { justify-content: center; margin-bottom: 12px; }
  .story-copy blockquote { font-size: clamp(26px, 7.5vw, 35px); line-height: 1.55; letter-spacing: .025em; }
  .story-copy__reading-beat { inset-inline: 22px; bottom: clamp(38px, 6vh, 56px); width: auto; max-width: none; margin-inline: auto; padding: 0; text-align: center; }
  .story-copy__reading-beat h3 { font-size: 19px; line-height: 1.48; }
  .story-copy__teaser { max-width: 29em; font-size: 14px; line-height: 1.72; }
  .timeline { right: 0; width: 52px; padding-right: 4px; gap: 5px; }
  .timeline__number, .timeline__label { display: none; }
  .intro__composition { min-height: calc(100vh - 74px); width: calc(100vw - 28px); padding-inline: 8px; }
  .intro__eyebrow { margin-bottom: 24px; font-size: 9px; }
  .intro h1 { gap: 15px; }
  .intro h1 span { font-size: clamp(43px, 13vw, 54px); letter-spacing: .2em; text-indent: .2em; }
  .intro h1 em { gap: 12px; font-size: 10px; }
  .intro h1 em::before,
  .intro h1 em::after { width: 27px; }
  .intro__lead { margin: 31px 0 27px; font-size: 12px; letter-spacing: .08em; }
  .enter { width: 82px; height: 82px; }
  .reading { width: 100vw; padding: 86px clamp(30px, 8vw, 42px) 46px; border-left: 0; }
  .intro__sound-note { width: calc(100vw - 44px); margin-top: 16px; }
  .scene__vignette { box-shadow: inset 0 0 90px 18px #02070c; }
  .image-cue { left: var(--cue-mobile-x, 50%); top: var(--cue-mobile-y, 50%); }
  .image-cue__label { font-size: 10px; }
  .epilogue__beat { width: calc(100vw - 48px); }
  .epilogue__verse,
  .epilogue__reflection { bottom: 12vh; text-align: left; }
  .epilogue__verse blockquote { font-size: clamp(29px, 8.5vw, 39px); }
  .epilogue__reflection p { font-size: 16px; line-height: 1.9; }
  .epilogue__mark h2 { font-size: 48px; }
  .epilogue__actions { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .intro__eyebrow,
  .intro h1,
  .intro__lead-line,
  .intro__sound-note,
  .intro__composition::before { opacity: 1; filter: none; transform: none; }
  .enter { visibility: visible; opacity: 1; transform: none; }
}