@charset "UTF-8";

:root {
  --obsidian: #070604;
  --ink: #0d0a07;
  --ivory: #f4ead8;
  --initial-focus: 18%;
  --ivory-muted: rgba(244, 234, 216, .66);
  --gold: #d7a54c;
  --amber: #ef8d2f;
  --copper: #a94f28;
  --line: rgba(244, 234, 216, .18);
  --header-h: 82px;
  color-scheme: dark;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  background: var(--obsidian);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--obsidian); }
body { margin: 0; min-width: 320px; color: var(--ivory); background: var(--obsidian); overflow-x: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px;
  color: var(--obsidian); background: var(--ivory); transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.experience { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--obsidian); }
.poster, #sequence, .grade, .grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { background: url("assets/poster.webp") var(--initial-focus) 50% / max(108vw, 192vh) auto no-repeat; opacity: 1; transition: opacity 1.2s ease; }
body.canvas-ready .poster { opacity: 0; }
#sequence { display: block; opacity: 0; transition: opacity 1s ease; }
body.canvas-ready #sequence { opacity: 1; }
.grade {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, transparent 20%, rgba(5, 3, 2, .12) 55%, rgba(5, 3, 2, .72) 115%),
    linear-gradient(90deg, rgba(5, 3, 2, .56) 0%, transparent 34%, transparent 68%, rgba(5, 3, 2, .36) 100%),
    linear-gradient(180deg, rgba(5, 3, 2, .32), transparent 20%, transparent 76%, rgba(5, 3, 2, .7));
}
.grain { opacity: .13; pointer-events: none; mix-blend-mode: soft-light; }
.grain::before {
  content: ""; position: absolute; inset: -30%; width: 160%; height: 160%;
  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='.55'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(2%,-3%) } 50% { transform: translate(-3%,2%) } 75% { transform: translate(3%,3%) } 100% { transform: translate(-2%,-2%) } }

.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 72px);
  border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease;
}
body.scrolled .site-header { background: linear-gradient(180deg, rgba(7,6,4,.82), rgba(7,6,4,0)); border-color: rgba(244,234,216,.07); }
.wordmark { display: flex; align-items: center; gap: 13px; font-size: 13px; letter-spacing: .32em; font-weight: 650; text-decoration: none; }
.wordmark-mark { position: relative; display: grid; place-items: center; width: 20px; height: 29px; border: 1px solid rgba(239,141,47,.78); clip-path: polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%); }
.wordmark-mark::before { content: ""; width: 9px; height: 16px; border: 1px solid var(--gold); clip-path: inherit; }
.wordmark-mark i { position: absolute; width: 1px; height: 15px; background: linear-gradient(var(--gold), var(--copper)); transform: rotate(28deg); }
.header-meta { display: flex; align-items: center; gap: clamp(18px,3vw,48px); }
.site-label { font-size: 10px; letter-spacing: .24em; color: var(--ivory-muted); text-transform: uppercase; }
.header-cta { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(215,165,76,.65); padding: 9px 0 7px; }
.header-cta:hover, .header-cta:focus-visible { color: #ffc16a; border-color: #ffc16a; }

.chapter-rail { position: fixed; z-index: 50; right: clamp(20px, 2.4vw, 42px); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 18px; pointer-events: none; }
.chapter-rail p { display: flex; gap: 5px; margin: 0; color: rgba(244,234,216,.44); font: 9px/1 monospace; letter-spacing: .1em; writing-mode: vertical-rl; }
.chapter-rail p span:first-child { color: var(--ivory); }
.chapter-rail nav { display: grid; gap: 3px; pointer-events: auto; }
.chapter-rail a { display: grid; place-items: center; width: 32px; height: 32px; text-decoration: none; }
.chapter-rail i { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(244,234,216,.33); transition: height .3s ease, background .3s ease, box-shadow .3s ease; }
.chapter-rail a.active i { height: 19px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 14px rgba(239,141,47,.7); }

.load-status { position: fixed; z-index: 30; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; color: rgba(244,234,216,.65); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; transition: opacity .5s ease, transform .5s ease; }
.load-status.ready { opacity: 0; transform: translate(-50%,12px); pointer-events: none; }
.load-line { display: block; width: 56px; height: 1px; background: rgba(244,234,216,.18); overflow: hidden; }
.load-line i { display: block; width: 34%; height: 100%; background: linear-gradient(90deg,var(--gold),var(--amber)); animation: load 1.25s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%) } to { transform: translateX(310%) } }

main { position: relative; z-index: 2; }
.chapter { position: relative; min-height: var(--scroll-span, 120vh); display: block; padding: 0 clamp(72px, 9vw, 168px); }
.chapter:not(.chapter-hero):not(.chapter-final) { padding-left: clamp(40px, 6vw, 112px); padding-right: clamp(40px, 6vw, 112px); }
.chapter::before { display: none; }
.copy { position: sticky; top: 31vh; isolation: isolate; width: min(620px, 43vw); opacity: 0; pointer-events: none; transform: translateY(38px); filter: blur(4px); transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.2,1), filter .65s ease; }
.chapter-hero .copy { top: 29vh; }
.chapter.active .copy { opacity: 1; pointer-events: auto; transform: translateY(0); filter: none; }
.align-right .copy { width: min(500px, 36vw); margin-left: auto; text-align: left; }
.align-right .copy::before { content: ""; position: absolute; z-index: -1; inset: -58px -84px; pointer-events: none; background: radial-gradient(ellipse at 54% 50%, rgba(7,6,4,.82) 0%, rgba(7,6,4,.55) 43%, rgba(7,6,4,.18) 68%, transparent 78%); filter: blur(13px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: rgba(244,234,216,.64); font-size: 10px; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg,var(--gold),transparent); }
.eyebrow span { color: var(--gold); font: 10px/1 monospace; letter-spacing: .08em; }
h1, h2 { margin: 0; max-width: 760px; color: var(--ivory); font-size: clamp(46px, 6vw, 96px); font-weight: 460; line-height: .92; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 5px 30px rgba(0,0,0,.38); }
h2 { font-size: clamp(38px, 4.65vw, 76px); }
h1 em, h2 em { color: #e6bc76; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.copy > p:not(.eyebrow):not(.fine-print) { max-width: 520px; margin: 29px 0 0; color: var(--ivory-muted); font-size: clamp(15px,1.18vw,18px); line-height: 1.72; letter-spacing: .005em; text-shadow: 0 2px 15px rgba(0,0,0,.75); }
.fine-print { max-width: 470px; margin: 17px 0 0; color: rgba(244,234,216,.44); font-size: 10px; line-height: 1.55; letter-spacing: .06em; }
.text-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 34px; color: var(--ivory); font-size: 11px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.text-link span { color: var(--gold); font-size: 16px; transition: transform .25s ease; }
.text-link:hover span { transform: translate(4px,4px); }
.scroll-cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; margin: 0; color: rgba(244,234,216,.45); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.scroll-cue span { width: 1px; height: 36px; background: linear-gradient(var(--gold),transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.4 } 50% { transform:scaleY(1);opacity:1 } }

.chapter-creative h2 em { color: #ef9a4a; }
.chapter-final { padding-bottom: 120px; }
.chapter-final .copy { top: 37vh; width: min(650px, 48vw); }
.cta-row { display: flex; align-items: center; gap: 20px; margin-top: 38px; flex-wrap: wrap; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-width: 260px; padding: 17px 20px; color: #170d04; background: linear-gradient(100deg,#e9c17d,#ef8d2f); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; overflow: hidden; }
.button::before { content:""; position:absolute; inset:0; background:#f5d59f; transform:translateX(-102%); transition:transform .35s ease; }
.button:hover::before, .button:focus-visible::before { transform:translateX(0); }
.button-disabled { cursor: default; opacity: .62; pointer-events: none; }
.button-disabled::before { display: none; }
.button span, .button { isolation:isolate; }
.button span { font-size:17px; }
.draft-note { color: rgba(244,234,216,.38); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
footer { position: absolute; left: clamp(24px,4vw,72px); right: clamp(24px,4vw,72px); bottom: 26px; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); color: rgba(244,234,216,.42); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
footer p { margin:0; } footer span { margin-left:14px; }
.noscript { position:relative; z-index:40; padding:12px 20px; color:#1b1007; background:#e9c17d; text-align:center; }

@media (max-width: 800px) {
  :root { --header-h: 68px; --initial-focus: 42%; }
  .site-header { padding: 0 18px; }
  .wordmark { font-size: 11px; gap:9px; letter-spacing:.25em; }
  .wordmark-mark { width:17px;height:25px; }
  .site-label, .header-cta { display:none; }
  .chapter-rail { right: 5px; }
  .chapter-rail p { display:none; }
  .chapter-rail nav { gap:0; }
  .chapter-rail a { width:44px;height:44px; }
  .chapter { min-height: max(var(--scroll-span), 105vh); padding: 0 42px 0 22px; }
  .copy, .align-right .copy, .chapter-final .copy { top: 26vh; width: min(92%, 580px); margin-left: 0; }
  .chapter-hero .copy { top: 23vh; }
  .chapter-final .copy { top: 31vh; }
  .copy { padding: 22px 18px 24px 0; }
  .copy::before { content:""; position:absolute; z-index:-1; left:-22px; right:-32px; top:-20px; bottom:-28px; background:linear-gradient(90deg,rgba(7,6,4,.88),rgba(7,6,4,.45) 74%,transparent); filter:blur(10px); }
  h1 { font-size:clamp(43px,13vw,66px); }
  h2 { font-size:clamp(36px,10.5vw,56px); }
  .copy > p:not(.eyebrow):not(.fine-print) { max-width:440px; font-size:14px; line-height:1.6; margin-top:20px; }
  .eyebrow { font-size:8px; letter-spacing:.17em; margin-bottom:15px; }
  .eyebrow::before { width:20px; }
  .text-link { margin-top:24px; }
  .scroll-cue { left:22px; transform:none; bottom:26px; }
  .grade { background:linear-gradient(180deg,rgba(5,3,2,.12),transparent 26%,rgba(5,3,2,.18) 45%,rgba(5,3,2,.93) 90%); }
  .chapter-final { padding-bottom: 170px; }
  .button { min-width:min(100%,280px); }
  footer { left:22px;right:22px;bottom:20px;display:block;line-height:1.8; }
  footer p:last-child { display:none; }
  .load-status { bottom:18px; white-space:nowrap; }
}

@media (max-width: 420px) {
  .chapter { padding-right:34px; }
  h1 { font-size:42px; }
  h2 { font-size:36px; }
  .copy > p:not(.eyebrow):not(.fine-print) { font-size:13px; }
  .fine-print { font-size:9px; }
  .draft-note { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .experience { display:none; }
  body { background:var(--obsidian); }
  .chapter { min-height:100svh; display:flex; align-items:center; isolation:isolate; overflow:hidden; }
  .chapter::before { content:""; display:block; position:absolute; z-index:-2; inset:0; background:var(--chapter-poster) center/cover no-repeat; }
  .chapter::after { content:""; position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(7,6,4,.86),rgba(7,6,4,.26)),linear-gradient(0deg,rgba(7,6,4,.72),transparent 55%); }
  .copy, .chapter-hero .copy, .chapter-final .copy { position:relative; top:auto; opacity:1; pointer-events:auto; transform:none; filter:none; transition:none; }
  .grain::before, .load-line i, .scroll-cue span { animation:none; }
  .load-status { display:none; }
}