:root{--night:#0a1424;--deep:#0f2038;--blue:#2f5f9a;--amber:#e6a24a;--gold:#d9b979;--cream:#efe6d4;--mute:#9aa8bd}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(120% 60% at 50% 0%,#14284a 0%,var(--night) 55%) fixed,var(--night);color:var(--cream);font:300 16px/1.65 Inter,system-ui,sans-serif}
main,footer{max-width:560px;margin:0 auto;padding:0 22px}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:g 1s steps(4) infinite}
@keyframes g{0%{transform:translate(0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-2%)}}
.bar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;padding:10px 22px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--mute);background:linear-gradient(var(--night),rgba(10,20,36,.6))}
.rec{color:#e5533d}#tc{color:var(--amber)}
.hero{padding:26px 0 40px}
.slate-top,.num,.code,.cap span,.eyebrow{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.slate-top{color:var(--mute);margin-bottom:12px}
figure{overflow:hidden;border-radius:2px;background:#000}
figure img{display:block;width:100%;height:100%;object-fit:cover}
.scope{aspect-ratio:2.39/1;box-shadow:0 0 0 1px rgba(217,185,121,.18),0 20px 40px -20px #000}
.hero-frame{aspect-ratio:1220/1000;position:relative}
.hero-frame img{object-position:50% 50%}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;left:0;right:0;height:7%;background:#000;z-index:2}
.hero-frame::before{top:0}.hero-frame::after{bottom:0}
.eyebrow{color:var(--amber);margin:26px 0 10px}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.05;color:#fbf5e8}
h1{font-size:42px}h2{font-size:34px;margin-bottom:14px}h3{font-size:26px;margin:4px 0 6px}
em{font-style:italic;color:var(--gold)}
.lead{color:var(--mute);margin:14px 0 24px}
.btn{display:inline-block;padding:13px 22px;border:1px solid var(--amber);color:var(--amber);text-decoration:none;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
section{padding:46px 0}
section+section{border-top:1px solid rgba(154,168,189,.12)}
.num{color:var(--amber);margin-bottom:14px}
p{color:#d7d2c6}
a{color:var(--gold)}
.cap{margin-top:10px;font-size:13px;color:var(--mute)}.cap span{color:var(--amber);margin-right:8px}
.tall{aspect-ratio:4/5;margin-bottom:22px;box-shadow:0 0 0 1px rgba(217,185,121,.18)}
.crew .tall{margin-bottom:22px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags li{font:400 12px 'IBM Plex Mono',monospace;padding:6px 10px;border:1px solid rgba(47,95,154,.7);border-radius:20px;color:#c9d6ea;background:rgba(47,95,154,.15)}
.proj{margin-bottom:34px}.proj>div{padding-top:14px}.code{color:var(--mute)}
.links{list-style:none;margin-top:10px}
.links li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(154,168,189,.15)}
.links span{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.links a,.links b{color:var(--cream);text-decoration:none;font-weight:400}
footer{padding:50px 22px 40px;text-align:center;font-size:12px;color:var(--mute)}
.end{font:italic 500 40px 'Cormorant Garamond',serif;color:var(--amber);margin-bottom:8px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
.reveal.on{opacity:1;transform:none}
.shot .reveal{opacity:1;transform:none;transition:none}
@media(min-width:900px){h1{font-size:54px}}