:root {
  --ivory: #f3eee5;
  --sand: #cbb894;
  --ink: #0b0b0c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); }
body { background: var(--ink); color: var(--ivory); font: 300 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.veil { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #000; transition: opacity 1.4s ease; }
.veil span { font: 300 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.55; }
.veil.is-gone { opacity: 0; pointer-events: none; }

.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(16px, 4vw, 44px); pointer-events: none; }
.brand { pointer-events: auto; color: var(--ivory); text-decoration: none; font: 400 12px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; }
.brand i { font-style: normal; color: var(--sand); }
.concept { font: 400 10px/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; border: 1px solid rgba(243, 238, 229, 0.35); padding: 7px 10px 6px; }

.chapters { position: fixed; right: clamp(16px, 4vw, 44px); top: 50%; transform: translateY(-50%); z-index: 10; display: grid; gap: 14px; }
.chapters button { background: none; border: 0; color: var(--ivory); opacity: 0.45; font: 400 10px/1 var(--sans); letter-spacing: 0.24em; text-align: right; cursor: pointer; transition: opacity 0.4s; }
.chapters button span { display: inline-block; margin-left: 8px; text-transform: uppercase; }
.chapters button.is-on, .chapters button:hover { opacity: 1; }

.journey { position: relative; height: 3440vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.say { position: absolute; left: clamp(16px, 7vw, 110px); top: 50%; transform: translateY(-50%); max-width: 640px; opacity: 0; pointer-events: none; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); }
.say--low { top: auto; bottom: clamp(70px, 12vh, 130px); transform: none; }
.say--side { max-width: 400px; }
.kicker { font: 400 10.5px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sand); margin-bottom: 18px; }
h1 { font: 300 clamp(40px, 6.4vw, 92px)/1.02 var(--serif); letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; }
h2 { font: 300 clamp(26px, 3.2vw, 44px)/1.12 var(--serif); }
.say p:not(.kicker) { margin-top: 16px; max-width: 34ch; opacity: 0.82; }
.hint { margin-top: 40px !important; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.5 !important; }

.say--end { top: auto; bottom: clamp(70px, 14vh, 150px); transform: none; }
.say--end .cta { pointer-events: auto; }
.cta { display: inline-block; margin-top: 28px; padding: 15px 26px 14px; border: 1px solid rgba(243, 238, 229, 0.6); color: var(--ivory); text-decoration: none; font: 400 11px/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; transition: background 0.4s, color 0.4s; }
.cta:hover, .cta:focus-visible { background: var(--ivory); color: var(--ink); }
.film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; }
.dim { position: absolute; left: 0; top: 0; z-index: 3; font: 400 10px/1 var(--sans); letter-spacing: 0.18em; color: #fffaf0; white-space: nowrap; opacity: 0; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(243, 238, 229, 0.12); }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--sand); }

.credits { position: relative; z-index: 2; padding: 64px clamp(16px, 7vw, 110px); background: var(--ink); font-size: 12px; opacity: 0.7; display: grid; gap: 10px; max-width: 900px; }

@media (max-width: 760px) {
  .chapters { display: none; }
  .say, .say--side { left: 16px; right: 16px; max-width: none; }
  .say--side { top: auto; bottom: 64px; transform: none; }
}