:root {
  color-scheme: dark;
  --night: #0d151d;
  --night-lift: #17232d;
  --ivory: #f3f0e8;
  --ivory-muted: #c7c3ba;
  --amber: #d6a86a;
  --amber-soft: #b98b54;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; scrollbar-color: var(--amber-soft) #111b24; scrollbar-width: thin; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--night); color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
::selection { background: var(--amber); color: var(--night); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111b24; }
::-webkit-scrollbar-thumb { border: 2px solid #111b24; border-radius: 999px; background: var(--amber-soft); }

.skip-link { position: fixed; top: 12px; left: 50%; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ivory); color: var(--night); text-decoration: none; transform: translate(-50%, -180%); transition: transform .25s var(--ease-out); }
.skip-link:focus { transform: translate(-50%, 0); }
.back-link:focus-visible, .wordmark:focus-visible, .motion-control:focus-visible, .begin-story:focus-visible, .share-story:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }

.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; background: #0b1218; transition: opacity .75s var(--ease-out), visibility .75s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__frame { position: relative; width: 54px; height: 68px; padding: 6px; border: 2px solid #9c784e; background: #161b1e; box-shadow: 10px 18px 42px #04080c99, inset 0 0 0 1px #e0bd8370; transform: perspective(300px) rotateY(-8deg); }
.loader__frame::after { content: ''; position: absolute; inset: 8px; background: linear-gradient(145deg, #f0e7d5, #605d58); opacity: .55; }
.loader__frame span { position: absolute; inset: 3px; border: 1px solid #e8c98d55; }
.loader p { margin: 24px 0 14px; color: var(--ivory-muted); font: 500 italic 1rem var(--serif); }
.loader__track { width: 172px; height: 1px; overflow: hidden; background: #f3f0e821; }
.loader__track i { display: block; width: 100%; height: 100%; background: var(--amber); transform: scaleX(.04); transform-origin: left; transition: transform .35s var(--ease-out); }

.experience { contain: strict; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(circle at 67% 36%, #263641 0%, #15222c 35%, var(--night) 76%); }
#memoryCanvas { display: block; width: 100%; height: 100%; }
.atmosphere, .film-grain { position: absolute; inset: 0; pointer-events: none; }
.atmosphere { background: radial-gradient(ellipse at 68% 46%, transparent 25%, #07101845 69%, #070d13a8 118%), linear-gradient(90deg, #08101782 0%, transparent 46%); }
.film-grain { opacity: .14; background: linear-gradient(112deg, transparent 18%, #f5e5c108 47%, transparent 66%); mix-blend-mode: screen; }
.fallback-frame { position: absolute; top: 50%; right: clamp(70px, 10vw, 170px); display: none; width: min(31vw, 420px); aspect-ratio: .8; margin: 0; padding: clamp(17px, 1.8vw, 27px); border: 1px solid #d5aa6d7d; background: linear-gradient(135deg, #3b3027, #171614 44%, #28201a); box-shadow: 0 44px 80px #02070cb8, 0 10px 22px #02070ca8, inset 0 0 0 7px #0c0e0f, inset 0 0 0 9px #b78d5682; transform: translateY(-47%) perspective(900px) rotateY(-4deg); }
.fallback-frame::before { content: ''; position: absolute; right: 14%; bottom: -12%; width: 68%; height: 14%; border-radius: 50%; background: #02060994; filter: blur(17px); transform: rotate(-2deg); }
.fallback-frame__mat { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 8%; background: #e6dfd0; box-shadow: inset 0 0 24px #7a6d5821; }
.fallback-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.08) contrast(1.02) saturate(.91); }

.back-link, .story-nav, .timeline-rail { position: fixed; z-index: 20; }
.back-link { top: 25px; left: 28px; display: inline-flex; align-items: center; gap: 9px; color: #f3f0e8c9; text-decoration: none; font-size: .69rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.back-link svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .25s var(--ease-out); }
.back-link:hover svg { transform: translateX(-4px); }

.story-nav { top: 20px; right: 28px; left: 50%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.story-nav > * { pointer-events: auto; }
.wordmark { color: var(--ivory); text-decoration: none; font: 500 italic 1.08rem var(--serif); }
.story-nav__status { display: grid; grid-template-columns: auto auto; align-items: center; gap: 13px; min-width: 205px; color: #f3f0e8ad; font-size: .65rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.story-nav__status b { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.motion-control { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #f3f0e833; border-radius: 999px; background: #101a22b8; cursor: pointer; font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s ease, background .25s ease, transform .25s var(--ease-out); }
.motion-control:hover { border-color: #d6a86a99; background: #1a2731e8; }
.motion-control:active { transform: scale(.97); }
.motion-control svg { width: 19px; fill: none; stroke: var(--amber); stroke-width: 1.5; }

.timeline-rail { top: 50%; right: 31px; width: 1px; height: min(252px, 36vh); background: #f3f0e829; transform: translateY(-50%); }
.timeline-rail i { position: absolute; inset: 0; background: var(--amber); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-out); }
.timeline-rail span { position: absolute; top: -6px; left: 50%; width: 5px; height: 5px; border: 1px solid var(--amber); border-radius: 50%; transform: translateX(-50%); }

.journey { position: relative; z-index: 5; }
.chapter { position: relative; min-height: 150svh; }
.chapter__marker { position: absolute; top: 37%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.chapter__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: 9vh clamp(28px, 7vw, 112px); pointer-events: none; }
.chapter__copy { width: min(470px, 37vw); opacity: .08; filter: blur(7px); transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease-out), filter .8s var(--ease-out), transform .8s var(--ease-out); }
.chapter.is-active .chapter__copy { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
.chapter h1, .chapter h2 { margin: 0; max-width: 9.5ch; color: var(--ivory); font: 500 clamp(3.6rem, 6vw, 5.8rem)/.9 var(--serif); letter-spacing: -.032em; text-wrap: balance; text-shadow: 0 5px 36px #050b10b8; }
.chapter h1 em, .chapter h2 em { color: var(--amber); font-weight: 500; }
.chapter p { max-width: 47ch; margin: 28px 0 0; color: #d7d3cabf; font-size: clamp(.92rem, 1.05vw, 1.02rem); font-weight: 300; line-height: 1.72; text-shadow: 0 3px 24px #071019d4; }
.chapter__era { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: #e4bd86; font: 500 italic 1.03rem var(--serif); }
.chapter__era::before { content: ''; width: 40px; border-top: 1px solid #d6a86a75; }
.begin-story, .share-story { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 31px; padding: 0 20px; border: 1px solid #d6a86a9e; border-radius: 999px; background: #111d26d9; color: var(--ivory); pointer-events: auto; text-decoration: none; white-space: nowrap; font-size: .69rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease-out); }
.begin-story:hover, .share-story:hover { border-color: var(--amber); background: var(--amber); color: #111922; }
.begin-story:active, .share-story:active { transform: scale(.97); }

.chapter--final { min-height: 170svh; }
.chapter--final .chapter__sticky { background: linear-gradient(90deg, #0d151d1f, transparent 60%); }
.closing-line { display: flex; align-items: center; gap: 15px; margin-top: 34px; color: var(--ivory); font: 500 italic clamp(1.22rem, 1.8vw, 1.55rem) var(--serif); }
.closing-line span { width: 45px; border-top: 1px solid #d6a86a73; }
.closing-line b { font-weight: 500; }
#shareFeedback { display: block; min-height: 1.25em; margin-top: 13px; color: #e4bd86; font-size: .75rem; }

.no-webgl .experience { background: radial-gradient(circle at 72% 35%, #2d3a42, #17242d 38%, #0d151d 78%); }
.no-webgl #memoryCanvas { display: none; }
.no-webgl .fallback-frame { display: block; }
.reduced-motion .chapter__copy { filter: none; transform: none; transition-duration: .15s; }

@media (max-width: 900px) {
  .back-link { top: 18px; left: 18px; }
  .back-link span, .wordmark, .story-nav__status span { display: none; }
  .story-nav { top: 17px; right: 18px; left: auto; gap: 14px; }
  .story-nav__status { min-width: auto; display: block; }
  .timeline-rail { right: 20px; height: 25vh; }
  .chapter { min-height: 145svh; }
  .chapter__marker { top: 32%; }
  .chapter__sticky { align-items: flex-end; padding: 44vh 26px 9vh; background: linear-gradient(transparent 35%, #091119b0 67%, #091119f2 91%); }
  .chapter__copy { width: min(620px, calc(100vw - 62px)); }
  .fallback-frame { top: 9.5vh; right: 50%; width: min(64vw, 300px); transform: translateX(50%) perspective(900px) rotateY(-2deg); }
  .chapter h1, .chapter h2 { max-width: 10ch; font-size: clamp(3.25rem, 14vw, 5rem); line-height: .9; }
  .chapter p { max-width: 45ch; margin-top: 20px; font-size: .92rem; line-height: 1.6; }
  .chapter__era { margin-top: 17px; }
  .begin-story, .share-story { margin-top: 23px; }
}

@media (max-width: 520px) {
  .motion-control { width: 38px; padding: 0; }
  .motion-control span { display: none; }
  .timeline-rail { display: none; }
  .chapter__sticky { padding-inline: 20px; }
  .chapter__copy { width: calc(100vw - 40px); padding-right: 12px; }
  .chapter h1, .chapter h2 { font-size: clamp(3rem, 14.7vw, 4.25rem); }
  .closing-line span { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .chapter__copy { filter: none; transform: none; }
}

@media (prefers-contrast: more) {
  .chapter p, .story-nav__status { color: var(--ivory); }
  .motion-control, .begin-story, .share-story { border-color: var(--ivory); }
}