:root {
  --navy: #04152b;
  --red: #d10a18;
  --gold: #d8b332;
  --white: #fffdf8;
  --ink: #10243b;
  --line: rgba(255, 253, 248, .22);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Archivo Narrow', sans-serif;
  overflow: hidden;
}

.splash { min-height: 100svh; position: relative; overflow: hidden; }
.texture {
  position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(24px, 5vw, 72px); }
.eyebrow, .scene-index, .kicker, .replay, .logo-tagline, .coming-soon { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.eyebrow { margin: 0; font-size: 11px; color: var(--gold); }
.replay { display: inline-flex; align-items: center; gap: 9px; border: 0; color: inherit; background: none; font: inherit; font-size: 11px; cursor: pointer; padding: 8px 0; }
.replay-icon { color: var(--gold); font-size: 20px; line-height: .5; transition: transform .25s ease; }
.replay:hover .replay-icon { transform: rotate(-45deg); }
.progress { position: absolute; z-index: 20; top: 76px; left: clamp(24px, 5vw, 72px); right: clamp(24px, 5vw, 72px); height: 1px; background: var(--line); }
.progress-fill { display: block; width: 0; height: 100%; background: var(--gold); }
.corner-mark { position: absolute; z-index: 4; display: flex; gap: 5px; }
.corner-mark span { display: block; width: 5px; height: 5px; background: var(--gold); }
.corner-mark--top { top: 106px; left: clamp(24px, 5vw, 72px); }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 110px clamp(24px, 10vw, 150px) 80px; text-align: center; visibility: hidden; }
.scene-index { position: absolute; top: 108px; right: clamp(24px, 5vw, 72px); font-size: 11px; opacity: .7; }
.scene-copy { position: relative; z-index: 2; }
.scene-copy--large { margin-top: -1vh; }
.kicker { margin: 0 0 25px; font-size: 12px; color: var(--gold); }
h1, h2 { margin: 0; font-family: Bitter, Georgia, serif; font-weight: 800; letter-spacing: -.045em; line-height: .88; text-transform: uppercase; }
h1 { max-width: 900px; font-size: clamp(58px, 10.5vw, 158px); }
h2 { font-size: clamp(55px, 9vw, 132px); }
h1 em, h2 span { color: var(--red); font-style: normal; }
.scene--stories { background: var(--white); color: var(--ink); }
.scene--stories .scene-index { color: var(--ink); }
.scene--stories .kicker { color: var(--red); }
.scene--stories h2 span, .scene--stories .subline { color: var(--red); }
.subline { margin: 30px 0 0; font-size: clamp(18px, 2.2vw, 31px); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.scene--formats { background: var(--red); }
.scene--formats .kicker { color: var(--white); }
.scene--formats h2 span { color: var(--navy); }
.scene--logo { align-items: center; background: var(--navy); }
.logo { width: min(590px, 72vw); height: auto; display: block; }
.logo-tagline { margin: 30px 0 0; color: var(--gold); font-size: 11px; }
.coming-soon { margin: 28px 0 0; color: var(--red); font-size: clamp(18px, 2.2vw, 28px); }

@media (max-width: 600px) {
  .site-header { padding-top: 23px; }
  .eyebrow { max-width: 130px; line-height: 1.25; }
  .progress { top: 82px; }
  .corner-mark--top { top: 112px; }
  .scene { padding-left: 13vw; padding-right: 13vw; }
  .scene-index { top: 112px; }
  .logo { width: min(520px, 92vw); }
  .logo-tagline { text-align: center; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .replay-icon { transition: none; }
}