:root {
  --paper: #071017;
  --ink: #f1eee6;
  --accent: #ff7a1a;
  --accent-2: #89bcd9;
  --muted: color-mix(in srgb, var(--ink) 58%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Inter, "Segoe UI", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); }
body::after { content: ""; position: fixed; z-index: 70; inset: 0; pointer-events: none; opacity: .045; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.22) 5px); mix-blend-mode: overlay; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.progress { position: fixed; z-index: 100; top: 0; left: 0; width: 0; height: 3px; background: var(--accent); box-shadow: 0 0 20px var(--accent); }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__image { position: absolute; z-index: -3; inset: -5%; background: var(--hero) var(--hero-position, center) / cover no-repeat; filter: saturate(.88) brightness(.72); transform: scale(1.04); animation: hero-enter 1.5s cubic-bezier(.16,1,.3,1) both; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, color-mix(in srgb,var(--paper) 98%,transparent) 0%, color-mix(in srgb,var(--paper) 78%,transparent) 41%, color-mix(in srgb,var(--paper) 12%,transparent) 78%), linear-gradient(0deg,var(--paper) 0%,transparent 48%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; background: linear-gradient(90deg,transparent 49.9%,var(--line) 50%,transparent 50.1%), linear-gradient(transparent 49.9%,var(--line) 50%,transparent 50.1%); background-size: 7vw 7vw; mask-image: linear-gradient(90deg,transparent 36%,black); }
.masthead { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px clamp(18px,4vw,68px); border-bottom: 1px solid rgba(255,255,255,.22); font: 700 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.masthead__brand { justify-self: start; }
.masthead__status { color: var(--accent); }
.masthead__index { justify-self: end; }
.hero__content { width: min(1500px,100%); margin: 0 auto; padding: 140px clamp(20px,5vw,82px) clamp(56px,8vh,96px); }
.eyebrow { margin: 0 0 20px; color: var(--accent); font: 700 11px/1.4 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { max-width: 1100px; margin: 0; font: 900 clamp(76px,15vw,220px)/.72 var(--display); letter-spacing: -.07em; text-transform: uppercase; text-wrap: balance; }
.hero__tagline { max-width: 780px; margin: clamp(34px,5vw,68px) 0 0; color: #eef0ed; font-size: clamp(20px,2vw,31px); line-height: 1.34; text-wrap: balance; }
.hero__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 900px; margin-top: clamp(44px,7vw,86px); border-top: 1px solid rgba(255,255,255,.25); }
.hero__meta div { padding: 17px 20px 0 0; border-right: 1px solid rgba(255,255,255,.18); }
.hero__meta div+div { padding-left: 20px; }
.hero__meta small { display: block; margin-bottom: 7px; color: var(--muted); font: 700 9px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hero__meta b { font-size: 14px; line-height: 1.4; }

.finalist-nav { position: sticky; z-index: 50; top: 0; display: flex; width: 100%; overflow-x: auto; background: color-mix(in srgb,var(--paper) 91%,transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.finalist-nav::-webkit-scrollbar { display:none; }
.finalist-nav a { flex: 1 0 25%; min-width: 155px; padding: 17px 12px; border-right: 1px solid var(--line); color: var(--muted); text-align: center; text-decoration: none; font: 700 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: .25s; }
.finalist-nav a:hover,.finalist-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb,var(--accent) 10%,transparent); }
.finalist-nav a[aria-current="page"] { box-shadow: inset 0 2px var(--accent); }

.wrap { width: min(1500px,100%); margin: 0 auto; padding-inline: clamp(20px,5vw,82px); }
.section { position: relative; padding-block: clamp(92px,12vw,174px); border-bottom: 1px solid var(--line); }
.section--tight { padding-block: clamp(70px,8vw,116px); }
.section-kicker { margin: 0 0 18px; color: var(--accent); font: 700 10px/1.4 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.section h2 { max-width: 1100px; margin: 0; font: 900 clamp(48px,8vw,124px)/.82 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.section-lead { max-width: 900px; margin: 34px 0 0; color: color-mix(in srgb,var(--ink) 82%,transparent); font-size: clamp(19px,2vw,30px); line-height: 1.42; }

.opening { display: grid; grid-template-columns: minmax(250px,.58fr) minmax(420px,1.42fr); gap: clamp(38px,8vw,150px); align-items: start; }
.opening__mark { position: sticky; top: 100px; color: var(--accent); font: 900 clamp(90px,16vw,230px)/.7 var(--display); letter-spacing: -.08em; }
.opening blockquote { margin: 0 0 34px; padding-left: 22px; border-left: 3px solid var(--accent); color: var(--ink); font: 700 clamp(19px,2vw,30px)/1.43 var(--mono); }
.opening p { max-width: 78ch; margin: 0; color: color-mix(in srgb,var(--ink) 76%,transparent); font-size: clamp(16px,1.35vw,21px); line-height: 1.7; }

.why-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(56px,7vw,100px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why-item { min-height: 260px; padding: clamp(25px,3vw,42px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-item b { display: block; margin-bottom: 24px; color: var(--accent); font: 700 13px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.why-item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; }

.visual-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(440px,1.28fr); gap: clamp(30px,5vw,82px); align-items: end; margin-top: clamp(58px,8vw,110px); }
.media-frame { position: relative; overflow: hidden; border: 1px solid var(--line); background:#050505; }
.media-frame img { width: 100%; transition: transform .7s cubic-bezier(.16,1,.3,1),filter .4s; }
.media-frame:hover img { transform: scale(1.018); filter: brightness(1.05); }
.media-frame--poster img { aspect-ratio: 2/3; object-fit: cover; }
.media-frame--merch img { aspect-ratio: 3/2; object-fit: cover; }
.media-note { display:flex; justify-content:space-between; gap:20px; margin-top:12px; color:var(--muted); font:700 9px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.visual-copy { margin-top: 26px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.dossier { background: radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 32%); }
.dossier-head { display:grid; grid-template-columns:100px 1fr; gap:clamp(22px,4vw,62px); align-items:start; margin-bottom:clamp(70px,9vw,130px); }
.dossier-head__no { color:var(--accent); font:900 clamp(55px,8vw,112px)/.8 var(--display); }
.dossier-head p { max-width:780px; margin:26px 0 0; color:var(--muted); font-size:18px; line-height:1.58; }
.chapter { display:grid; grid-template-columns:minmax(170px,.35fr) minmax(0,1.65fr); gap:clamp(30px,6vw,104px); padding:clamp(58px,7vw,100px) 0; border-top:1px solid var(--line); }
.chapter__label { color:var(--accent); font:700 10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.chapter h3 { margin:0 0 28px; font:900 clamp(30px,4vw,58px)/.94 var(--display); letter-spacing:-.035em; text-transform:uppercase; }
.prose p { max-width:82ch; margin:0 0 22px; color:color-mix(in srgb,var(--ink) 78%,transparent); font-size:clamp(15px,1.18vw,18px); line-height:1.72; }
.prose p:last-child { margin-bottom:0; }
.terminal { margin:26px 0 0; padding:20px 22px; overflow-x:auto; border:1px solid var(--line); border-left:3px solid var(--accent); background:rgba(255,255,255,.028); color:var(--ink); font:700 clamp(12px,1vw,14px)/1.75 var(--mono); letter-spacing:.035em; white-space:pre-wrap; }
.terminal::first-line { color:var(--accent); }
.timeline { margin:0; padding:0; list-style:none; }
.timeline li { position:relative; padding:0 0 36px 32px; border-left:1px solid var(--line); }
.timeline li:last-child { padding-bottom:0; border-left-color:transparent; }
.timeline li::before { content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; background:var(--accent); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 65%,transparent); }
.timeline b { display:block; margin-bottom:10px; color:var(--accent); font:700 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.timeline p { max-width:78ch; margin:0; color:var(--muted); font-size:15px; line-height:1.67; }
.entity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.entity { min-height:220px; padding:25px 22px; background:var(--paper); }
.entity b { display:block; font:700 15px/1.35 var(--mono); }
.entity i { display:block; margin:8px 0 15px; color:var(--accent); font:700 10px/1.4 var(--mono); font-style:normal; letter-spacing:.13em; text-transform:uppercase; }
.entity span { color:var(--muted); font-size:14px; line-height:1.65; }
.conflict-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,5vw,80px); }
.track-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.track-list li { display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr); gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.track-list b { color:var(--accent); font:700 11px/1.5 var(--mono); letter-spacing:.1em; }
.track-list span { color:var(--muted); font-size:14px; line-height:1.58; }
.spoiler { margin-bottom:18px; border:1px solid var(--line); }
.spoiler button { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:19px 21px; border:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px); color:var(--ink); text-align:left; cursor:pointer; font:700 11px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; transition:.25s; }
.spoiler button:hover { background:color-mix(in srgb,var(--accent) 13%,transparent); }
.spoiler button span:last-child { flex:0 0 auto; color:var(--accent); }
.spoiler__body { display:none; padding:0 21px 23px; }
.spoiler.is-open .spoiler__body { display:block; animation:reveal-in .35s ease both; }
.spoiler__body p { max-width:82ch; margin:0; color:color-mix(in srgb,var(--ink) 80%,transparent); font-size:15px; line-height:1.7; }
.final-protocol { padding:clamp(28px,4vw,54px); border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.final-protocol .statement { margin-top:26px; color:var(--ink); font-size:clamp(18px,2vw,28px); font-weight:700; line-height:1.45; }

.sponsor { background:var(--accent); color:#07090a; }
.sponsor .section-kicker { color:#07090a; opacity:.68; }
.sponsor h2 { max-width:1200px; }
.sponsor-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:clamp(58px,8vw,110px); background:rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.24); }
.sponsor-item { min-height:250px; padding:clamp(26px,3.5vw,46px); background:color-mix(in srgb,var(--accent) 94%,white 6%); }
.sponsor-item b { display:block; margin-bottom:20px; font:900 clamp(23px,2.5vw,34px)/1 var(--display); text-transform:uppercase; }
.sponsor-item p { margin:0; max-width:60ch; font-size:15px; line-height:1.68; }

.production-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:clamp(56px,7vw,100px); background:var(--line); border:1px solid var(--line); }
.production-item { min-height:240px; padding:24px 20px; background:var(--paper); }
.production-item b { display:block; margin-bottom:18px; color:var(--accent); font:700 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.production-item p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.source-list { margin:52px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.source-list li { display:grid; grid-template-columns:minmax(130px,190px) minmax(0,1fr) auto; gap:24px; align-items:start; padding:17px 0; border-bottom:1px solid var(--line); }
.source-list b { color:var(--accent); font:700 11px/1.4 var(--mono); }
.source-list span { color:var(--muted); font-size:14px; line-height:1.6; }
.source-list a { color:var(--ink); font:700 10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }

.finale { position:relative; min-height:85svh; display:grid; align-content:center; overflow:hidden; background:color-mix(in srgb,var(--ink) 94%,white 6%); color:var(--paper); text-align:center; }
.finale::before { content:""; position:absolute; inset:-20%; opacity:.07; background:repeating-radial-gradient(circle at center,var(--paper) 0 1px,transparent 1px 42px); animation:orbit 24s linear infinite; }
.finale .wrap { position:relative; }
.finale small { font:700 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.finale h2 { max-width:1300px; margin:26px auto; font:900 clamp(58px,11vw,170px)/.76 var(--display); letter-spacing:-.065em; text-transform:uppercase; }
.finale p { max-width:840px; margin:36px auto 0; font-size:clamp(18px,2vw,27px); line-height:1.47; }
.finale__domain { display:inline-block; margin-top:42px; padding:14px 24px; border:1px solid var(--paper); font:700 12px/1.4 var(--mono); letter-spacing:.08em; text-decoration:none; }

[data-reveal] { opacity:1; transform:none; }
.js [data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .75s ease,transform .75s cubic-bezier(.16,1,.3,1); }
.js [data-reveal].visible { opacity:1; transform:none; }
@keyframes hero-enter { from { opacity:0; transform:scale(1.13); } to { opacity:1; transform:scale(1.04); } }
@keyframes reveal-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes orbit { to { transform:rotate(360deg); } }

@media (max-width:1100px) {
  .why-grid { grid-template-columns:1fr; }
  .why-item { min-height:0; }
  .entity-grid { grid-template-columns:repeat(2,1fr); }
  .production-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .hero::before { background:linear-gradient(0deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 25%,transparent) 75%,color-mix(in srgb,var(--paper) 70%,transparent)); }
  .hero__image { background-position:var(--hero-position,center); }
  .masthead { grid-template-columns:1fr auto; }
  .masthead__status { display:none; }
  .hero h1 { font-size:clamp(64px,20vw,118px); }
  .hero__meta,.visual-grid,.opening,.conflict-grid { grid-template-columns:1fr; }
  .hero__meta div { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding:14px 0; }
  .hero__meta div+div { padding-left:0; }
  .opening__mark { position:static; }
  .visual-grid { align-items:start; }
  .chapter { grid-template-columns:1fr; gap:18px; }
  .dossier-head { grid-template-columns:1fr; }
  .entity-grid { grid-template-columns:1fr; }
  .sponsor-grid { grid-template-columns:1fr; }
  .source-list li { grid-template-columns:1fr; gap:8px; }
}
@media (max-width:520px) {
  .masthead { padding:16px; font-size:9px; }
  .masthead__brand { max-width:230px; }
  .hero__content { padding-inline:18px; }
  .hero h1 { font-size:clamp(58px,21vw,90px); line-height:.78; }
  .hero__tagline { font-size:19px; }
  .wrap { padding-inline:18px; }
  .section h2 { max-width:100%; font-size:clamp(42px,11vw,58px); overflow-wrap:anywhere; }
  .finalist-nav a { flex:1 0 25%; min-width:0; padding-inline:4px; letter-spacing:.08em; }
  .track-list li { grid-template-columns:1fr; gap:7px; }
  .spoiler button { align-items:flex-start; }
  .production-grid { grid-template-columns:1fr; }
  .media-note { flex-direction:column; gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; }
  [data-reveal] { opacity:1; transform:none; }
}