:root {
  --black: #070705;
  --black-soft: #12100b;
  --sand: #bd8b47;
  --sand-dark: #765126;
  --gold: #e0b95e;
  --beam: #f5eddc;
  --paper: #d8d0c0;
  --muted: #9b9385;
  --line: rgba(217, 178, 97, .25);
  --anton: 'Anton', sans-serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--sand-dark) #050403; scrollbar-width: thin; background: var(--black); }
body { --hero-x: 0px; --hero-y: 0px; margin: 0; overflow-x: hidden; background: var(--black); color: var(--paper); font-family: var(--mono); }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--gold); color: var(--black); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #050403; }
::-webkit-scrollbar-thumb { border: 3px solid #050403; background: var(--sand-dark); }

.skip-link { position: fixed; z-index: 1000; left: -10000px; top: 1rem; padding: .8rem 1rem; background: var(--beam); color: var(--black); }
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 4px; }
.film-grain { position: fixed; z-index: 90; inset: -50%; pointer-events: none; opacity: .16; mix-blend-mode: soft-light; 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='.7'/%3E%3C/svg%3E"); animation: grain .24s steps(2) infinite; }
.gate-line { position: fixed; z-index: 91; left: 0; right: 0; height: 1px; top: 8%; pointer-events: none; background: rgba(255,255,255,.08); box-shadow: 0 60vh rgba(255,255,255,.03); animation: gate 7s linear infinite; }
.reel-leader { position: fixed; z-index: 999; inset: 0; display: grid; place-content: center; justify-items: center; overflow: hidden; pointer-events: none; background: #020201; color: var(--beam); animation: leaderExit .9s .4s cubic-bezier(.76,0,.24,1) both; }
.reel-leader::before, .reel-leader::after { content: ''; position: absolute; background: rgba(245,237,220,.13); }
.reel-leader::before { width: 1px; height: 100%; left: 50%; }
.reel-leader::after { width: 100%; height: 1px; top: 50%; }
.leader-ring { width: 152px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(245,237,220,.5); border-radius: 50%; box-shadow: 0 0 0 22px rgba(245,237,220,.035); animation: leaderWeave .16s steps(2) infinite; }
.leader-ring span { font-family: var(--anton); font-size: 6rem; line-height: 1; }
.reel-leader p { margin: 42px 0 0; color: var(--gold); font-size: .56rem; letter-spacing: .22em; }
.reel-change { position: fixed; z-index: 998; inset: 0; display: grid; place-items: center; overflow: hidden; visibility: hidden; pointer-events: none; }
.reel-change-shutter, .reel-change-shutter::before, .reel-change-shutter::after { position: absolute; inset-inline: 0; }
.reel-change-shutter { inset-block: 0; overflow: hidden; }
.reel-change-shutter::before, .reel-change-shutter::after { content: ''; height: 51%; background: #020201; box-shadow: inset 0 0 70px rgba(224,185,94,.035); }
.reel-change-shutter::before { top: 0; transform: translateY(-102%); }
.reel-change-shutter::after { bottom: 0; transform: translateY(102%); }
.reel-change-slate { position: relative; z-index: 2; width: min(440px, calc(100vw - 40px)); padding: 28px; display: grid; justify-items: center; border: 1px solid rgba(224,185,94,.6); background: #050403; color: var(--beam); opacity: 0; text-align: center; box-shadow: 0 0 0 8px rgba(5,4,3,.72); }
.reel-change-slate::before, .reel-change-slate::after { content: ''; position: absolute; background: rgba(224,185,94,.35); }
.reel-change-slate::before { width: 1px; height: 140vh; top: 50%; }
.reel-change-slate::after { width: 140vw; height: 1px; left: 50%; }
.reel-change-slate span, .reel-change-slate small { letter-spacing: .18em; text-transform: uppercase; }
.reel-change-slate span { color: var(--gold); font-size: .52rem; }
.reel-change-slate strong { font-family: var(--anton); font-size: 7rem; font-weight: 400; line-height: 1.05; font-variant-numeric: tabular-nums; }
.reel-change-slate small { color: var(--muted); font-size: .44rem; }
.reel-change.active { visibility: visible; }
.reel-change.active .reel-change-shutter::before { animation: shutterTop 1.35s cubic-bezier(.76,0,.24,1) both; }
.reel-change.active .reel-change-shutter::after { animation: shutterBottom 1.35s cubic-bezier(.76,0,.24,1) both; }
.reel-change.active .reel-change-slate { animation: slateFlash 1.35s ease both; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; min-height: 80px; padding: 14px 3.2vw; display: grid; grid-template-columns: 180px 1fr 230px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); color: var(--beam); animation: headerEnter 1s .72s cubic-bezier(.16,1,.3,1) both; }
.wordmark { width: max-content; min-width: 44px; min-height: 44px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--gold); font-family: var(--anton); font-size: 1.25rem; color: var(--gold); }
.wordmark small { font-size: .58rem; letter-spacing: .15em; }
.site-header nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 54px); }
.site-header nav a { min-height: 44px; display: grid; align-items: center; position: relative; text-decoration: none; text-transform: uppercase; font-size: .62rem; letter-spacing: .15em; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: var(--gold); transition: right .35s cubic-bezier(.16,1,.3,1); }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--gold); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.sound-switch { min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--beam); text-transform: uppercase; font-size: .58rem; letter-spacing: .09em; cursor: pointer; transition: color .25s, background .25s; }
.sound-switch:hover { color: var(--gold); }
.sound-switch b { color: var(--gold); }
.switch-lamp { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 1px solid var(--gold); border-radius: 50%; }
.sound-switch[aria-pressed="true"] .switch-lamp { background: var(--gold); box-shadow: 0 0 16px var(--gold); }

.hero { position: relative; height: min(950px, 100svh); min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; background: #15100a; isolation: isolate; }
.hero::before, .hero::after { content: ''; position: absolute; z-index: 5; left: 0; right: 0; height: clamp(32px, 5.5vh, 72px); background: #030302; }
.hero::before { top: 0; }
.hero::after { bottom: 0; }
.hero-media { position: absolute; z-index: -3; inset: -2%; overflow: hidden; transform: translate3d(var(--hero-x), var(--hero-y), 0); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; filter: sepia(.25) saturate(.7) contrast(1.22) brightness(.63); transform: scale(1.08); animation: heroDrift 18s ease-in-out infinite alternate; }
.projector-dust { position: absolute; z-index: -1; inset: 5% -10%; pointer-events: none; opacity: .34; mix-blend-mode: screen; background-image: radial-gradient(circle at 12% 24%, rgba(255,242,210,.72) 0 1px, transparent 1.8px), radial-gradient(circle at 74% 41%, rgba(255,242,210,.54) 0 1px, transparent 1.7px), radial-gradient(circle at 33% 79%, rgba(255,242,210,.46) 0 1.2px, transparent 2px), radial-gradient(circle at 91% 66%, rgba(255,242,210,.58) 0 .8px, transparent 1.6px); background-size: 147px 173px, 223px 191px, 187px 251px, 271px 213px; filter: blur(.25px); animation: dustFloat 14s linear infinite; }
.hero-scrim { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(6,5,3,.84) 0%, rgba(6,5,3,.35) 47%, rgba(6,5,3,.15) 74%), linear-gradient(0deg, rgba(8,7,4,.94) 5%, transparent 47%, rgba(0,0,0,.65)); }
.hero-flare { position: absolute; z-index: -1; width: 70vw; height: 4px; left: 35%; top: 37%; background: linear-gradient(90deg, transparent, rgba(255,223,161,.1), rgba(255,238,198,.65), transparent); filter: blur(1px); box-shadow: 0 0 38px 14px rgba(255,191,91,.12); transform: rotate(-1deg); animation: flare 6s ease-in-out infinite; }
.hero-copy { width: 100%; padding: 0 5.2vw clamp(105px, 14vh, 155px); }
.report-line, .kicker { margin: 0 0 1rem; color: var(--gold); font-size: .65rem; line-height: 1.5; letter-spacing: .19em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--beam); font-family: var(--anton); font-size: clamp(7.5rem, 18.4vw, 19rem); font-weight: 400; line-height: .74; text-transform: uppercase; letter-spacing: -.035em; text-shadow: 0 8px 44px rgba(0,0,0,.7); }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 18.8vw; color: transparent; -webkit-text-stroke: 2px var(--beam); }
.hero-note { position: absolute; right: 6vw; bottom: 13vh; width: min(330px, 30vw); }
.hero-note p { margin: 0 0 22px; font-size: .72rem; line-height: 1.7; text-transform: uppercase; }
.enter-roll { min-height: 55px; padding: 0 0 0 18px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); color: var(--gold); text-decoration: none; font-size: .67rem; text-transform: uppercase; letter-spacing: .12em; }
.enter-roll::before { content: ''; position: absolute; inset: 0 55px 0 0; background: var(--gold); transform: translateX(-102%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.enter-roll span { position: relative; }
.enter-roll i { width: 55px; height: 55px; display: grid; place-items: center; border-left: 1px solid var(--gold); font-size: 1.25rem; font-style: normal; transition: background .2s, color .2s; }
.enter-roll:hover, .enter-roll:focus-visible { color: var(--black); }
.enter-roll:hover::before, .enter-roll:focus-visible::before { transform: none; }
.enter-roll:hover i, .enter-roll:focus-visible i { background: var(--gold); color: var(--black); }
.frame-data { position: absolute; z-index: 8; top: 5.8vh; left: 3.2vw; right: 3.2vw; display: flex; justify-content: space-between; color: rgba(255,255,255,.62); font-size: .5rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.scroll-cue { position: absolute; z-index: 8; left: 3.2vw; bottom: 6vh; color: rgba(255,255,255,.5); font-size: .5rem; letter-spacing: .15em; writing-mode: vertical-rl; }
.scroll-cue span { display: inline-block; height: 45px; width: 1px; margin-top: 12px; background: var(--gold); }
.hero-datum { position: absolute; z-index: 8; right: 3.2vw; top: 16vh; display: flex; align-items: center; gap: 12px; color: rgba(245,237,220,.45); font-size: .45rem; letter-spacing: .16em; writing-mode: vertical-rl; }
.hero-datum i { width: 1px; height: 38px; background: var(--gold); }
.load-in { animation: loadIn 1s cubic-bezier(.2,.75,.2,1) both; }
.hero h1.load-in { animation-delay: .18s; }
.hero-note.load-in { animation-delay: .55s; }

.debrief { position: relative; padding: 150px 6vw 110px; display: grid; grid-template-columns: .5fr 1.35fr 1fr; gap: 40px 5vw; background: linear-gradient(104deg, transparent 0 54%, rgba(224,185,94,.018) 54.1% 54.2%, transparent 54.3%), radial-gradient(circle at 78% 28%, rgba(182,137,76,.11), transparent 31%), var(--black); border-bottom: 1px solid var(--line); }
.section-number { color: var(--sand-dark); font-family: var(--anton); font-size: 8rem; line-height: .8; }
.debrief-heading { grid-column: 2 / 4; }
.debrief h2, .artifacts h2, .production-index h2 { margin: 0; color: var(--beam); font-family: var(--anton); font-size: clamp(3.6rem, 7.2vw, 8.2rem); font-weight: 400; line-height: .92; text-transform: uppercase; }
.debrief-copy { grid-column: 2; columns: 1; }
.debrief-copy p { margin: 0 0 1.5rem; max-width: 58ch; color: #beb6a7; font-size: .8rem; line-height: 1.9; }
.debrief-stats { grid-column: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.debrief-stats div { min-height: 135px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.debrief-stats dt { color: var(--gold); font-family: var(--anton); font-size: 3.5rem; line-height: 1; }
.debrief-stats dd { margin: 10px 0 0; color: var(--muted); font-size: .55rem; line-height: 1.5; text-transform: uppercase; }
.classification { grid-column: 1; grid-row: 2; width: 160px; height: 160px; display: grid; place-content: center; text-align: center; border: 1px solid var(--sand-dark); border-radius: 50%; transform: rotate(-8deg); color: var(--sand); }
.classification span { font-size: .45rem; letter-spacing: .14em; }
.classification strong { margin-top: 6px; font-size: .72rem; }

.credits-section { padding: 150px 3.2vw 120px; background: #060604; }
.credits-intro { position: relative; max-width: 1050px; margin: 0 auto 64px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 80px; align-items: end; }
.credits-intro::before { content: '02'; position: absolute; right: calc(100% + 3vw); bottom: 0; color: var(--sand-dark); font-family: var(--anton); font-size: 8rem; line-height: .8; }
.credits-intro .kicker { grid-column: 1 / -1; }
.credits-intro h2 { margin: 0; font-family: var(--anton); font-size: clamp(5.4rem, 11vw, 12rem); font-weight: 400; line-height: .8; text-transform: uppercase; color: var(--beam); }
.credits-intro > p:last-child { max-width: 45ch; margin: 0 0 8px; color: var(--muted); font-size: .72rem; line-height: 1.8; }
.theater { position: relative; max-width: 1220px; margin: auto; padding: clamp(18px, 3vw, 42px); background: #020201; border: 1px solid rgba(217,178,97,.3); box-shadow: 0 30px 90px #000, inset 0 0 80px rgba(217,178,97,.03); overflow: hidden; }
.theater::before { content: 'FINAL REEL · PRINT 001'; position: absolute; z-index: 6; top: 12px; left: 50%; transform: translateX(-50%); color: #8d7b5b; font-size: .46rem; letter-spacing: .2em; white-space: nowrap; }
.theater::after { content: 'CREDITS ACTIVE / 24 PRODUCTIONS'; position: absolute; z-index: 6; right: clamp(30px, 5vw, 76px); top: clamp(55px, 6vw, 88px); color: rgba(217,178,97,.42); font-size: .43rem; letter-spacing: .18em; pointer-events: none; writing-mode: vertical-rl; }
.projector-beam { position: absolute; z-index: 1; inset: -20% 12%; pointer-events: none; opacity: .14; background: linear-gradient(100deg, transparent 10%, rgba(255,242,210,.4) 43%, rgba(255,242,210,.14) 68%, transparent 90%); filter: blur(16px); animation: flicker .16s infinite alternate; }
.reel-locator { position: relative; z-index: 7; margin: 6px 0 18px; display: grid; grid-template-columns: 178px 1fr; gap: 12px 26px; align-items: end; }
.locator-label { display: grid; grid-template-columns: 32px 1fr; align-items: center; min-width: 0; color: var(--beam); }
.locator-label b { color: var(--gold); font-family: var(--anton); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.locator-label i { overflow: hidden; font-size: .47rem; font-style: normal; letter-spacing: .13em; text-overflow: ellipsis; white-space: nowrap; }
.locator-track { align-self: center; height: 1px; overflow: visible; background: rgba(217,178,97,.22); }
.locator-track span { width: 0; height: 2px; display: block; position: relative; top: -1px; background: var(--gold); box-shadow: 0 0 13px rgba(224,185,94,.45); transition: width .12s linear; }
.locator-track span::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--beam); }
.locator-chapters { grid-column: 2; display: grid; grid-template-columns: repeat(5, 1fr); }
.locator-chapters button { min-height: 44px; padding: 4px 10px; border: 0; border-left: 1px solid rgba(217,178,97,.22); background: transparent; color: #8f8778; text-align: left; text-transform: uppercase; font-size: .45rem; letter-spacing: .1em; cursor: pointer; transition: color .2s, background .2s; }
.locator-chapters button:last-child { border-right: 1px solid rgba(217,178,97,.22); }
.locator-chapters button span { display: block; margin-bottom: 3px; color: var(--sand-dark); font-size: .4rem; }
.locator-chapters button:hover, .locator-chapters button.active { background: rgba(224,185,94,.07); color: var(--gold); }
.roll-window { position: relative; z-index: 2; height: min(76vh, 820px); min-height: 600px; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #1d1910 0%, #0e0c08 46%, #030302 100%); border: 1px solid rgba(217,178,97,.2); box-shadow: inset 0 0 100px rgba(0,0,0,.82), inset 0 0 12px rgba(242,234,216,.08); }
.roll-window::before, .roll-window::after { content: ''; position: absolute; z-index: 5; left: 0; right: 0; height: 22%; pointer-events: none; }
.roll-window::before { top: 0; background: linear-gradient(#050403, transparent); }
.roll-window::after { bottom: 0; background: linear-gradient(transparent, #050403); }
.credit-track { position: absolute; top: 0; left: 50%; width: min(820px, 78%); transform: translate3d(-50%, 0, 0); will-change: transform; text-align: center; }
.credit-block { margin: 0 auto; }
.credit-opening { min-height: 760px; padding-top: 270px; }
.credit-opening p, .credit-opening span, .credit-opening small { display: block; text-transform: uppercase; letter-spacing: .2em; }
.credit-opening p { color: var(--gold); font-size: .65rem; }
.credit-opening span { margin-top: 28px; color: var(--muted); font-size: .55rem; }
.credit-opening h3 { margin: 25px 0; font-family: var(--anton); font-size: clamp(4.5rem, 9vw, 9rem); font-weight: 400; line-height: .85; color: var(--beam); }
.credit-opening small { color: var(--muted); font-size: .5rem; }
.department, .craft-credits { min-height: 620px; padding: 150px 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px 40px; text-align: right; align-content: center; }
.department span, .craft-credits span { color: var(--muted); font-size: .6rem; letter-spacing: .12em; }
.department strong, .craft-credits strong { color: var(--beam); font-family: var(--anton); font-size: clamp(1.9rem, 3.2vw, 3.2rem); font-weight: 400; line-height: 1; text-align: left; letter-spacing: .02em; }
.chapter { min-height: 520px; padding-top: 190px; }
.chapter span { color: var(--gold); font-size: .6rem; letter-spacing: .2em; }
.chapter h3 { margin: 20px 0; font-family: var(--anton); color: var(--beam); font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 400; line-height: .9; }
.credit-list { padding-bottom: 130px; }
.credit-list a { min-height: 106px; display: grid; grid-template-columns: 45px 1.2fr 1fr; align-items: center; gap: 20px; border-top: 1px solid rgba(217,178,97,.16); text-decoration: none; text-align: left; transition: background .2s, padding .2s; }
.credit-list a:last-child { border-bottom: 1px solid rgba(217,178,97,.16); }
.credit-list a:hover { padding: 0 14px; background: rgba(217,178,97,.08); }
.credit-list a > span { color: var(--sand-dark); font-size: .58rem; }
.credit-list strong { color: var(--beam); font-family: var(--anton); font-size: clamp(2rem, 3.7vw, 3.8rem); font-weight: 400; line-height: 1; }
.credit-list em { color: var(--muted); font-size: .56rem; font-style: normal; text-transform: uppercase; }
.diorama { min-height: 700px; padding: 100px 0 160px; }
.diorama-label { display: grid; justify-items: center; }
.diorama-label span { color: var(--gold); font-size: .52rem; letter-spacing: .16em; }
.diorama-label strong { margin-top: 15px; color: var(--beam); font-family: var(--anton); font-size: clamp(3.2rem, 6vw, 6rem); font-weight: 400; }
.diorama-label small { color: var(--muted); font-size: .52rem; text-transform: uppercase; }
.terrain { position: relative; width: min(560px, 90%); aspect-ratio: 1.8; margin: 60px auto 0; overflow: hidden; background: linear-gradient(145deg, #9a713d, #5f4427 55%, #ad8046); border: 9px solid #23190e; box-shadow: 28px 35px 50px #000, inset 0 0 40px rgba(20,10,0,.5); transform: perspective(650px) rotateX(59deg) rotateZ(-9deg); transform-style: preserve-3d; }
.terrain::before { content: ''; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(circle at 20% 32%, transparent 0 10%, rgba(54,32,13,.34) 11% 11.5%, transparent 12%), repeating-radial-gradient(ellipse at 72% 65%, transparent 0 18px, rgba(36,24,10,.3) 19px 20px); }
.contour { position: absolute; border: 2px solid rgba(49,31,12,.46); border-radius: 50%; }
.c1 { width: 170px; height: 80px; left: 5%; top: 12%; transform: rotate(20deg); }
.c2 { width: 210px; height: 110px; right: 3%; bottom: 2%; transform: rotate(-12deg); }
.c3 { width: 90px; height: 60px; left: 42%; top: 17%; }
.marker { position: absolute; z-index: 3; width: 26px; height: 26px; background: #322414; border: 2px solid var(--gold); box-shadow: 5px 8px 8px rgba(0,0,0,.5); transform: translateZ(24px); }
.marker::after { content: ''; position: absolute; width: 1px; height: 20px; left: 11px; bottom: 100%; background: var(--beam); transform-origin: bottom; }
.m1 { left: 34%; top: 34%; }.m2 { left: 41%; top: 34%; }.m3 { left: 48%; top: 34%; }
.m4 { left: 34%; top: 51%; }.m5 { left: 41%; top: 51%; }.m6 { left: 48%; top: 51%; }
.diorama.active .legion { animation: formation 3s ease-in-out infinite; }
.terrain-tag { position: absolute; right: 4%; top: 5%; color: #2d1f0e; font-size: .52rem; font-weight: 700; }
.catapult { position: absolute; z-index: 3; left: 28%; top: 54%; width: 70px; height: 40px; border: 5px solid #2b1b0d; transform: translateZ(20px); }
.catapult i { position: absolute; width: 8px; height: 80px; left: 40px; bottom: 10px; background: #28190b; transform-origin: bottom; transform: rotate(-38deg); }
.projectile { position: absolute; z-index: 4; width: 11px; height: 11px; border-radius: 50%; background: var(--beam); box-shadow: 0 0 15px var(--beam); }
.diorama.active .projectile { animation: shot 3.2s cubic-bezier(.35,.05,.65,.9) infinite; }
.arc { position: absolute; z-index: 2; width: 250px; height: 120px; left: 37%; top: 8%; border-top: 2px dashed rgba(242,234,216,.55); border-radius: 50%; transform: rotate(-12deg); }
.key { position: absolute; z-index: 3; top: 42%; width: 70px; height: 32px; background: #252018; border: 2px solid var(--gold); transform: translateZ(23px); }
.key::after { content: ''; position: absolute; width: 22px; height: 22px; right: -15px; top: 3px; border: 5px solid var(--gold); border-radius: 50%; }
.key i { position: absolute; left: 15px; top: 8px; width: 4px; height: 16px; background: var(--gold); }
.key-a { left: 18%; transform: translateZ(23px) rotate(10deg); }
.key-b { right: 18%; transform: translateZ(23px) rotate(170deg); }
.diorama.active .key-a { animation: keyA 2.8s ease-in-out infinite; }
.diorama.active .key-b { animation: keyB 2.8s ease-in-out infinite; }
.lock-line { position: absolute; left: 32%; right: 32%; top: 49%; border-top: 2px dashed rgba(242,234,216,.6); }
.end-card { min-height: 900px; padding-top: 260px; }
.end-card span { display: block; font-family: var(--anton); font-size: clamp(4.4rem, 9vw, 9rem); line-height: .9; color: var(--beam); }
.end-card span:nth-child(2) { color: var(--gold); }
.end-card i { width: 1px; height: 70px; display: block; margin: 45px auto; background: var(--gold); }
.end-card strong, .end-card small { display: block; }
.end-card strong { font-size: .75rem; letter-spacing: .2em; }
.end-card small { margin-top: 120px; color: var(--muted); font-size: .5rem; letter-spacing: .18em; }
.theater-controls { position: relative; z-index: 4; min-height: 68px; display: grid; grid-template-columns: 180px auto minmax(120px, 240px) 1fr; gap: 20px; align-items: center; padding: 10px 4px 0; }
.theater-controls button { min-height: 48px; border: 1px solid var(--sand-dark); background: transparent; color: var(--gold); cursor: pointer; text-transform: uppercase; font-size: .58rem; letter-spacing: .08em; }
.theater-controls button:hover { background: var(--gold); color: var(--black); }
.theater-controls label { color: var(--muted); text-transform: uppercase; font-size: .52rem; }
.theater-controls input { accent-color: var(--gold); }
.timecode { justify-self: end; color: #716956; font-size: .58rem; }
.sprockets { position: absolute; z-index: 3; top: 52px; bottom: 110px; width: 10px; opacity: .35; background: repeating-linear-gradient(0deg, var(--sand) 0 10px, transparent 10px 25px); }
.sprockets.left { left: 14px; }.sprockets.right { right: 14px; }

.artifacts { position: relative; padding: 145px 6vw 180px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 1.4vw; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), rgba(224,185,94,.035) calc(8.333% - 1px) 8.333%), radial-gradient(ellipse at 24% 16%, rgba(190,139,71,.16), transparent 36%), linear-gradient(118deg, #121009, #070705 63%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.artifacts::before { content: ''; position: absolute; width: 55vw; height: 55vw; max-width: 760px; max-height: 760px; left: -18vw; top: -22vw; border: 1px solid rgba(224,185,94,.08); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(224,185,94,.018), 0 0 0 14vw rgba(224,185,94,.012); }
.artifacts::after { content: 'EVIDENCE / 03'; position: absolute; right: -1.5rem; top: 48%; color: rgba(224,185,94,.22); font-size: .52rem; letter-spacing: .28em; writing-mode: vertical-rl; }
.artifacts .section-number { grid-column: 1 / 3; }
.artifact-title { grid-column: 4 / 12; padding-bottom: 110px; }
.artifacts article { position: relative; min-height: 470px; padding: 34px clamp(20px, 2.4vw, 42px) 55px; border-top: 1px solid var(--line); background: linear-gradient(155deg, rgba(255,255,255,.018), transparent 42%); }
.artifacts article:nth-of-type(1) { grid-column: 1 / 6; transform: translateY(72px); }
.artifacts article:nth-of-type(2) { grid-column: 6 / 10; transform: translateY(-18px); border-left: 1px solid var(--line); }
.artifacts article:nth-of-type(3) { grid-column: 10 / 13; transform: translateY(118px); border-left: 1px solid var(--line); }
.artifacts article span { color: var(--gold); font-size: .52rem; letter-spacing: .16em; }
.artifacts article > i { position: absolute; right: 22px; top: 32px; color: rgba(224,185,94,.25); font-size: .44rem; font-style: normal; letter-spacing: .14em; writing-mode: vertical-rl; }
.artifacts article h3 { max-width: 11ch; margin: 70px 0 30px; color: var(--beam); font-family: var(--anton); font-size: clamp(2.7rem, 4.7vw, 5.4rem); font-weight: 400; line-height: .88; text-transform: uppercase; }
.artifacts article p { color: #aaa294; font-size: .68rem; line-height: 1.85; }

.production-index { padding: 150px 6vw; display: grid; grid-template-columns: .85fr 1.35fr; gap: 8vw; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.28), transparent 23%), repeating-linear-gradient(0deg, rgba(62,43,17,.025) 0 1px, transparent 1px 7px), #d1c5ac; color: #16120c; }
.production-index .kicker { color: #66471f; }
.production-index h2 { color: #16120c; font-size: clamp(4rem, 7.5vw, 8.5rem); }
.index-head > p:last-child { max-width: 48ch; margin-top: 38px; font-size: .68rem; line-height: 1.8; }
.index-list { margin: 0; padding: 0; list-style-position: inside; counter-reset: production; border-top: 2px solid #251b0e; }
.index-list li { list-style: none; counter-increment: production; }
.index-list a { min-height: 70px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 0 10px 0 48px; position: relative; border-bottom: 1px solid rgba(31,22,12,.32); text-decoration: none; transition: background .18s, color .18s, padding .18s; }
.index-list a::before { content: counter(production, decimal-leading-zero); position: absolute; left: 8px; color: #785a31; font-size: .56rem; }
.index-list a:hover, .index-list a:focus-visible { padding-left: 56px; background: #16120c; color: var(--gold); }
.index-list li:nth-child(odd) a { background-image: linear-gradient(90deg, rgba(43,28,11,.045), transparent); }
.index-list b { font-family: var(--anton); font-size: 1.55rem; font-weight: 400; text-transform: uppercase; }
.index-list span { font-size: .53rem; text-transform: uppercase; }

.final-light { position: relative; min-height: 100svh; padding: 16vh 6vw 10vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% -25%, rgba(95,58,19,.08), transparent 56%), #050403; transition: background 2.4s ease; }
.final-light::before, .final-light::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18vw; opacity: .08; background: repeating-linear-gradient(90deg, #1b1208 0 7px, #050403 8px 20px); transition: opacity 2.2s ease, transform 2.2s cubic-bezier(.16,1,.3,1); }
.final-light::before { left: 0; transform: translateX(-45%); }
.final-light::after { right: 0; transform: translateX(45%); }
.house-light { position: absolute; inset: -36% -10% auto; height: 105%; opacity: 0; background: radial-gradient(ellipse at 50% 18%, rgba(255,235,190,.75), rgba(224,185,94,.22) 27%, rgba(111,67,18,.08) 47%, transparent 69%); filter: blur(12px); transform: scale(.72); transition: opacity 2.4s ease, transform 2.4s cubic-bezier(.16,1,.3,1); }
.final-light.lit { background: radial-gradient(ellipse at 50% -10%, rgba(120,75,24,.18), transparent 62%), #080603; }
.final-light.lit .house-light { opacity: .92; transform: scale(1); }
.final-light.lit::before, .final-light.lit::after { opacity: .3; transform: translateX(0); }
.aisle-lights { position: absolute; left: 4vw; right: 4vw; bottom: 7vh; display: flex; justify-content: space-between; }
.aisle-lights i { width: 5px; height: 5px; border-radius: 50%; background: #33200e; transition: background 1.5s 1s, box-shadow 1.5s 1s; }
.final-light.lit .aisle-lights i { background: var(--gold); box-shadow: 0 0 7px 2px rgba(224,185,94,.6); }
.final-light > p { position: relative; color: var(--gold); font-size: .58rem; letter-spacing: .2em; }
.final-light h2 { position: relative; margin: 3vh 0; color: var(--beam); font-family: var(--anton); font-size: clamp(6rem, 16vw, 16rem); font-weight: 400; line-height: .78; text-transform: uppercase; text-shadow: 0 12px 70px rgba(0,0,0,.9); transform: scale(.985); transition: transform 2s cubic-bezier(.16,1,.3,1), text-shadow 2s; }
.final-light.lit h2 { transform: scale(1); text-shadow: 0 12px 70px rgba(0,0,0,.45), 0 0 60px rgba(224,185,94,.1); }
.final-light h2 span { color: var(--gold); }
.final-rule { position: relative; width: 1px; height: 12vh; background: var(--gold); }
.final-light strong, .final-light small { position: relative; display: block; }
.final-light strong { margin-top: 3vh; letter-spacing: .22em; font-size: .75rem; }
.final-light small { margin-top: 14vh; color: var(--muted); font-size: .48rem; letter-spacing: .14em; }

.site-footer { min-height: 130px; padding: 34px 4vw; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); background: #050403; color: var(--muted); font-size: .55rem; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 30px; }
.site-footer a { min-height: 44px; display: grid; align-items: center; text-decoration-color: var(--sand-dark); text-underline-offset: 4px; }
.site-footer a { transition: color .2s, padding-left .25s; }
.site-footer a:hover, .site-footer a:focus-visible { padding-left: 4px; color: var(--gold); }

@keyframes grain { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(2%,-3%,0); } 50% { transform: translate3d(-3%,2%,0); } 75% { transform: translate3d(3%,4%,0); } 100% { transform: translate3d(-2%,-2%,0); } }
@keyframes gate { 0% { transform: translateY(-30vh); } 100% { transform: translateY(120vh); } }
@keyframes leaderExit { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 55% { opacity: 1; } 99% { visibility: visible; } 100% { opacity: 0; clip-path: inset(49.8% 0 49.8% 0); visibility: hidden; } }
@keyframes leaderWeave { from { transform: translate3d(-2px,1px,0); opacity: .78; } to { transform: translate3d(2px,-1px,0); opacity: 1; } }
@keyframes dustFloat { from { transform: translate3d(-2%, 3%, 0) rotate(.001deg); } to { transform: translate3d(4%, -6%, 0) rotate(.001deg); } }
@keyframes heroDrift { to { transform: scale(1.13) translate3d(-1.5%, 1%, 0); } }
@keyframes flare { 0%,100% { opacity: .35; transform: translateX(-3%) rotate(-1deg); } 50% { opacity: .95; transform: translateX(4%) rotate(-1deg); } }
@keyframes flicker { from { opacity: .1; } to { opacity: .18; } }
@keyframes loadIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes formation { 0%,100% { margin-left: 0; } 50% { margin-left: 10px; } }
@keyframes shot { 0% { left: 38%; top: 55%; opacity: 0; } 8% { opacity: 1; } 48% { left: 60%; top: 10%; } 90% { left: 86%; top: 52%; opacity: 1; } 100% { left: 88%; top: 55%; opacity: 0; } }
@keyframes keyA { 0%,100% { left: 18%; } 50% { left: 28%; } }
@keyframes keyB { 0%,100% { right: 18%; } 50% { right: 28%; } }
@keyframes shutterTop { 0% { transform: translateY(-102%); } 28%, 62% { transform: translateY(0); } 100% { transform: translateY(-102%); } }
@keyframes shutterBottom { 0% { transform: translateY(102%); } 28%, 62% { transform: translateY(0); } 100% { transform: translateY(102%); } }
@keyframes slateFlash { 0%, 23%, 66%, 100% { opacity: 0; transform: scale(.96); } 32%, 59% { opacity: 1; transform: scale(1); } }
@keyframes headerEnter { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 120px 1fr; }
  .site-header nav { justify-content: flex-end; }
  .site-header nav a:nth-child(2) { display: none; }
  .sound-switch { position: absolute; top: 88px; right: 26px; display: block; padding: 0 8px; background: rgba(4,3,2,.5); }
  .hero h1 { font-size: clamp(7rem, 20vw, 12rem); }
  .hero h1 span:last-child { margin-left: 10vw; }
  .debrief { grid-template-columns: .3fr 1.7fr; }
  .debrief-heading { grid-column: 2; }
  .debrief-copy { grid-column: 2; }
  .debrief-stats { grid-column: 2; }
  .classification { grid-column: 1; }
  .credits-intro { grid-template-columns: 1fr; }
  .credits-intro::before { position: static; grid-column: 1 / -1; margin-bottom: 8px; font-size: 6rem; }
  .credits-intro h2 { font-size: 8rem; }
  .credit-track { width: 84%; }
  .artifacts { grid-template-columns: repeat(8, 1fr); padding-inline: 6vw; }
  .artifacts .section-number { grid-column: 1 / 3; }
  .artifact-title { grid-column: 3 / 9; }
  .artifacts article:nth-of-type(1) { grid-column: 1 / 5; transform: none; }
  .artifacts article:nth-of-type(2) { grid-column: 5 / 9; transform: translateY(62px); }
  .artifacts article:nth-of-type(3) { grid-column: 2 / 7; transform: translateY(22px); }
  .artifacts article h3 { font-size: clamp(3rem, 7.2vw, 4.7rem); }
  .production-index { grid-template-columns: 1fr; }
  .index-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .index-head .kicker { grid-column: 1 / -1; }
  .index-head > p:last-child { align-self: end; }
}

@media (max-width: 600px) {
  .site-header { min-height: 70px; padding: 12px 16px; grid-template-columns: 70px 1fr; }
  .wordmark small { display: none; }
  .site-header nav { gap: 6px; }
  .site-header nav a { padding: 0 8px; font-size: .5rem; }
  .hero { min-height: 700px; height: 100svh; }
  .hero::before, .hero::after { height: 38px; }
  .hero-media img { object-position: 58% center; }
  .hero-copy { padding: 0 18px 130px; }
  .hero h1 { font-size: clamp(6.2rem, 31vw, 8rem); line-height: .78; }
  .hero h1 span:last-child { margin-left: 0; }
  .hero-note { position: static; width: 100%; margin-top: 32px; }
  .hero-note p { display: none; }
  .report-line { max-width: 28ch; }
  .frame-data { top: 78px; left: 18px; right: 18px; }
  .frame-data span:nth-child(2) { display: none; }
  .hero-datum { display: none; }
  .scroll-cue { display: none; }
  .debrief { padding: 96px 20px 80px; display: block; }
  .section-number { margin-bottom: 38px; font-size: 5rem; }
  .debrief h2, .artifacts h2, .production-index h2 { font-size: 3.7rem; }
  .debrief-copy { margin-top: 45px; }
  .debrief-stats { margin-top: 50px; }
  .debrief-stats div { min-height: 118px; padding: 17px; }
  .classification { width: 118px; height: 118px; margin: 50px 0 0 auto; }
  .credits-section { padding: 90px 10px 70px; }
  .credits-intro { padding: 0 10px; margin-bottom: 38px; }
  .credits-intro::before { grid-column: 1; font-size: 4.8rem; }
  .credits-intro h2 { font-size: 5.4rem; }
  .theater { padding: 20px 9px 8px; }
  .reel-locator { margin: 10px 0 14px; grid-template-columns: 1fr; gap: 9px; }
  .locator-label { grid-template-columns: 28px 1fr; padding: 0 5px; }
  .locator-label b { font-size: 1.45rem; }
  .locator-track { margin-inline: 5px; }
  .locator-chapters { grid-column: 1; }
  .locator-chapters button { padding: 3px 5px; text-align: center; font-size: .39rem; letter-spacing: .04em; }
  .locator-chapters button span { margin-bottom: 2px; }
  .roll-window { height: 68vh; min-height: 500px; }
  .credit-track { width: 92%; }
  .credit-opening { min-height: 620px; padding-top: 220px; }
  .credit-opening h3 { font-size: 4.3rem; }
  .department, .craft-credits { min-height: 540px; padding: 120px 10px; grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .department strong, .craft-credits strong { margin-bottom: 18px; font-size: 2.1rem; text-align: center; }
  .chapter { min-height: 450px; padding: 160px 10px 0; }
  .chapter h3 { font-size: 3.8rem; }
  .credit-list a { min-height: 102px; grid-template-columns: 28px 1fr; gap: 8px; }
  .credit-list strong { font-size: 2.1rem; }
  .credit-list em { display: none; }
  .diorama { min-height: 610px; padding: 80px 0 120px; }
  .diorama-label strong { font-size: 3.4rem; }
  .terrain { width: 95%; margin-top: 50px; border-width: 6px; }
  .marker { width: 18px; height: 18px; }
  .marker::after { left: 7px; }
  .end-card { min-height: 720px; padding-top: 220px; }
  .end-card span { font-size: 4.2rem; }
  .theater-controls { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .theater-controls label { display: none; }
  .theater-controls input { width: 100%; }
  .timecode { display: none; }
  .sprockets { display: none; }
  .theater::after { right: 18px; top: 52px; font-size: .38rem; }
  .artifacts { padding: 90px 20px 115px; display: block; }
  .artifact-title { padding-bottom: 60px; }
  .artifacts article { min-height: 0; padding: 30px 8px 64px; border-right: 0; border-left: 0 !important; transform: none !important; }
  .artifacts article:nth-of-type(2) { margin-left: 7vw; }
  .artifacts article:nth-of-type(3) { margin-left: 14vw; }
  .artifacts article h3 { margin-top: 52px; font-size: 3rem; }
  .production-index { padding: 90px 20px; }
  .index-head { display: block; }
  .index-list { margin-top: 50px; }
  .index-list a { min-height: 76px; grid-template-columns: 1fr; padding-left: 42px; }
  .index-list b { font-size: 1.35rem; }
  .index-list span { margin-top: -16px; }
  .final-light { min-height: 760px; padding-inline: 18px; }
  .final-light h2 { font-size: 6rem; }
  .site-footer { padding: 35px 20px; align-items: flex-start; flex-direction: column; }
  .site-footer nav { width: 100%; flex-direction: column; gap: 0; }
  .site-footer a { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .film-grain { display: none; }
  .reel-leader, .projector-dust { display: none; }
  .reel-change { display: none; }
  .hero-media img { transform: none; }
  .roll-window { overflow-y: auto; }
  .credit-track { position: relative; transform: translateX(-50%) !important; }
  .house-light { opacity: .5; }
}