:root { --ink:#071315; --deep:#031011; --paper:#d8e4df; --mist:#9eb5ae; --signal:#68e7d6; --line:rgba(205,231,222,.18); --display:"Barlow Condensed",sans-serif; --mono:"IBM Plex Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--deep); }
body { margin:0; color:var(--paper); background:var(--deep); font-family:var(--mono); overflow-x:hidden; }
body::selection { background:var(--signal); color:var(--deep); }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; opacity:.045; z-index:20; pointer-events:none; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { position:fixed; top:0; left:0; width:100%; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:24px 3.5vw; mix-blend-mode:difference; }
.wordmark { position:relative; display:block; width:180px; height:42px; overflow:hidden; }
.wordmark img { display:block; width:180px; height:auto; mix-blend-mode:screen; }
.footer-mark { display:block; width:clamp(230px,32vw,500px); overflow:hidden; }
.footer-mark img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
nav { display:flex; align-items:center; gap:30px; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
nav a { position:relative; padding:6px 0; }
nav a:not(.nav-press)::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:.25s; }
nav a:hover::after { width:100%; }
.nav-press { border:1px solid currentColor; padding:10px 14px; }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.hero { height:100svh; min-height:680px; position:relative; display:flex; align-items:flex-end; overflow:hidden; }
.hero-image { position:absolute; inset:-4%; background:url('assets/blacked-out-beacon-hero.jpg') 50% 43%/cover no-repeat; transform:scale(1.04); filter:saturate(.72) contrast(1.08); animation:hero-drift 12s ease-out both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,14,16,.28) 0%,rgba(1,13,15,.2) 35%,rgba(1,11,13,.9) 88%,var(--deep)),linear-gradient(90deg,rgba(1,10,12,.72) 0%,rgba(1,10,12,.15) 68%,rgba(1,10,12,.38) 100%); }
.hero-content { z-index:2; position:relative; width:min(1220px,93vw); margin:0 auto clamp(160px,22vh,205px); }
.eyebrow,.section-label { margin:0 0 22px; color:var(--signal); text-transform:uppercase; font-size:10px; letter-spacing:.2em; }
h1,h2 { font-family:var(--display); text-transform:uppercase; margin:0; }
h1 { font-size:clamp(74px,12.3vw,192px); line-height:.72; letter-spacing:-.035em; }
h1 span { display:block; }
h1 span:last-child { color:transparent; -webkit-text-stroke:1.5px var(--paper); margin-left:8.5vw; }
.hero-title { width:min(1280px,100%); line-height:0; }
.hero-title img { display:block; width:100%; height:auto; mix-blend-mode:screen; filter:brightness(1.08) contrast(1.03); }
.hero-meta { display:flex; gap:30px; margin:34px 0; text-transform:uppercase; font-size:10px; letter-spacing:.15em; }
.hero-meta p { margin:0; }
.primary-button { display:inline-flex; align-items:center; gap:55px; border:1px solid var(--paper); padding:16px 20px; text-transform:uppercase; font-size:10px; letter-spacing:.12em; transition:.25s; background:transparent; color:var(--paper); font-family:var(--mono); }
.primary-button:hover { background:var(--signal); border-color:var(--signal); color:var(--deep); }
.primary-button.disabled { opacity:.45; cursor:not-allowed; }
.primary-button.disabled:hover { background:transparent; border-color:var(--paper); color:var(--paper); }
.hero-index,.scroll-note { position:absolute; z-index:2; right:3.5vw; margin:0; font-size:9px; text-transform:uppercase; letter-spacing:.18em; }
.hero-index { top:110px; color:var(--signal); }
.scroll-note { bottom:155px; writing-mode:vertical-rl; }
.countdown-section { position:absolute; z-index:3; left:0; bottom:0; width:100%; min-height:132px; border-top:1px solid rgba(205,231,222,.25); padding:24px 3.5vw; display:flex; align-items:center; gap:5vw; background:linear-gradient(90deg,rgba(2,15,17,.92),rgba(2,15,17,.72)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.countdown-intro { flex:0 0 210px; }
.countdown-intro .section-label { margin:0 0 10px; white-space:nowrap; }
.countdown-intro > span { color:var(--mist); font-size:8px; text-transform:uppercase; letter-spacing:.13em; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); width:100%; }
.countdown div { display:flex; align-items:baseline; gap:10px; border-left:1px solid rgba(205,231,222,.22); padding-left:2.4vw; }
.countdown strong { font:500 clamp(38px,4.3vw,64px)/1 var(--display); font-variant-numeric:tabular-nums; }
.countdown span { font-size:8px; text-transform:uppercase; color:var(--mist); }
.released-message { color:var(--signal); text-transform:uppercase; letter-spacing:.1em; }
.section { padding:12vw max(4vw,calc((100vw - 1220px)/2)); }
.signal { display:grid; grid-template-columns:minmax(320px,.85fr) 1.15fr; gap:9vw; align-items:center; }
.cover-wrap { position:relative; }
.cover-wrap::before { content:""; position:absolute; inset:-18px; border:1px solid var(--line); transform:rotate(2deg); }
.cover-wrap img { display:block; width:100%; filter:saturate(.85) contrast(1.05); position:relative; }
.cover-code { position:absolute; right:-42px; top:15%; writing-mode:vertical-rl; color:var(--signal); font-size:8px; letter-spacing:.18em; }
.signal-copy h2,.credits h2,.press-callout h2 { font-size:clamp(55px,7vw,108px); line-height:.86; letter-spacing:-.025em; }
.lead { max-width:650px; font-family:var(--display); font-size:clamp(25px,3vw,42px); line-height:1.08; color:var(--mist); }
blockquote { margin:60px 0; padding-left:24px; border-left:1px solid var(--signal); text-transform:uppercase; font:500 17px/1.6 var(--display); letter-spacing:.08em; }
.platforms { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:25px; color:var(--mist); font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.platforms span+span::before { content:"/"; margin-right:20px; color:var(--signal); }
.video-section { padding:4vw max(4vw,calc((100vw - 1400px)/2)) 13vw; }
.video-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:45px; }
.video-heading h2 { font-size:clamp(62px,9vw,136px); line-height:.78; letter-spacing:-.035em; }
.video-heading > p { margin:0; color:var(--mist); text-transform:uppercase; font-size:9px; letter-spacing:.14em; }
.crt-set { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 145px; gap:18px; width:min(1050px,90vw); margin:0 auto; padding:28px; border:1px solid #283536; border-radius:34px; background:linear-gradient(145deg,#1a2425,#091011 70%); box-shadow:inset 0 0 0 5px #050a0b,inset 0 0 30px rgba(255,255,255,.035),0 35px 90px rgba(0,0,0,.65); }
.crt-set::before,.crt-set::after { content:""; position:absolute; bottom:-26px; width:90px; height:28px; background:#080e0f; border-radius:0 0 9px 9px; }
.crt-set::before { left:10%; transform:skewX(-12deg); }
.crt-set::after { right:10%; transform:skewX(12deg); }
.crt-screen { position:relative; aspect-ratio:4/3; overflow:hidden; border:10px solid #030707; border-radius:8%/10%; background:#071718; box-shadow:inset 0 0 75px #000,inset 0 0 18px rgba(104,231,214,.28); isolation:isolate; animation:crt-flicker 5s infinite; }
.crt-screen::after { content:""; position:absolute; z-index:5; inset:0; border-radius:inherit; background:radial-gradient(ellipse at center,transparent 47%,rgba(0,0,0,.68) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 4px); pointer-events:none; }
.crt-static { position:absolute; z-index:1; inset:-30%; background-image:repeating-radial-gradient(circle at 23% 38%,rgba(200,240,232,.48) 0 1px,transparent 1px 3px),repeating-linear-gradient(117deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px); background-size:7px 6px,9px 7px; opacity:.45; animation:tv-noise .18s steps(2,end) infinite; }
.crt-scanline { position:absolute; z-index:4; left:0; right:0; height:15%; background:linear-gradient(transparent,rgba(104,231,214,.13),transparent); animation:crt-scan 4.5s linear infinite; }
.crt-message { position:absolute; z-index:3; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7%; text-align:center; text-transform:uppercase; text-shadow:2px 0 rgba(255,0,80,.28),-2px 0 rgba(0,220,255,.25),0 0 14px rgba(190,255,245,.35); }
.crt-message span { margin-bottom:6%; color:var(--signal); font-size:9px; letter-spacing:.35em; }
.crt-message strong { font:700 clamp(35px,5.8vw,78px)/.82 var(--display); letter-spacing:.025em; animation:signal-glitch 4.2s steps(1,end) infinite; }
.crt-message em { margin-top:4%; color:var(--signal); font:500 clamp(18px,2.5vw,34px)/1 var(--display); letter-spacing:.14em; font-style:normal; }
.crt-message small { position:absolute; bottom:6%; font-size:7px; letter-spacing:.25em; color:var(--mist); }
.crt-controls { display:flex; flex-direction:column; align-items:center; padding:10px 8px; color:var(--mist); text-transform:uppercase; }
.crt-brand { margin-bottom:30px; color:var(--signal); font:600 18px/1 var(--display); letter-spacing:.18em; }
.crt-speaker { width:72%; height:30%; margin-bottom:auto; opacity:.35; background:repeating-linear-gradient(0deg,transparent 0 5px,#80918d 5px 7px); }
.crt-knob { width:56px; height:56px; margin:13px 0; border:6px solid #050a0a; border-radius:50%; background:radial-gradient(circle at 38% 32%,#495554,#182120 55%,#050808 100%); box-shadow:0 4px 8px #000; }
.crt-knob::after { content:""; display:block; width:2px; height:17px; margin:4px auto; background:var(--signal); transform:rotate(35deg); transform-origin:bottom; }
.crt-knob.small { width:38px; height:38px; border-width:5px; }
.crt-controls > span { margin-top:16px; color:var(--signal); font-size:7px; letter-spacing:.2em; }
@keyframes tv-noise { 0% { transform:translate(0); } 25% { transform:translate(3%,-2%); } 50% { transform:translate(-2%,4%); } 75% { transform:translate(4%,2%); } }
@keyframes crt-scan { from { top:-18%; } to { top:105%; } }
@keyframes crt-flicker { 0%,96%,100% { opacity:1; } 97% { opacity:.72; } 98% { opacity:.94; } }
@keyframes signal-glitch { 0%,91%,100% { transform:none; } 92% { transform:translateX(-4px) skewX(-2deg); } 93% { transform:translateX(5px); } 94% { transform:none; } }
.manifesto { padding:13vw 4vw 8vw; position:relative; overflow:hidden; background:#cbd9d4; color:var(--deep); }
.manifesto .section-label { color:#1b6d68; }
.manifesto h2 { position:relative; font-size:clamp(68px,12vw,180px); line-height:.78; letter-spacing:-.045em; max-width:1200px; }
.manifesto h2 em { font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--deep); }
.beacon-glow { position:absolute; right:-8vw; top:-18vw; width:58vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(18,115,106,.22),rgba(18,115,106,0) 68%); }
.artist-files { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:9vw 0 0; }
.artist-file { position:relative; margin:0; overflow:hidden; background:var(--deep); isolation:isolate; transition:transform .35s ease,box-shadow .35s ease; }
.artist-file::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(2,16,17,.92) 100%); pointer-events:none; }
.artist-file::after { content:""; position:absolute; z-index:3; left:0; right:0; top:-18%; height:12%; background:linear-gradient(180deg,transparent,rgba(104,231,214,.38),transparent); opacity:0; pointer-events:none; }
.artist-file img { display:block; width:100%; aspect-ratio:1/1.04; object-fit:cover; filter:grayscale(1) contrast(1.12); transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease; }
.artist-file figcaption { position:absolute; z-index:4; left:0; right:0; bottom:0; padding:24px 22px; color:var(--paper); text-transform:uppercase; transform:translateY(25px); transition:transform .35s ease; }
.artist-file figcaption span { display:block; margin-bottom:12px; color:var(--signal); font-size:9px; letter-spacing:.12em; }
.artist-file figcaption strong { display:block; font:600 16px/1.1 var(--display); letter-spacing:.05em; opacity:0; transition:opacity .35s ease; }
.artist-file:hover { transform:translateY(-8px); box-shadow:0 22px 40px rgba(3,16,17,.24); }
.artist-file:hover::after { opacity:1; animation:scan-file 1.2s ease-out; }
.artist-file:hover img { transform:scale(1.045); filter:grayscale(.7) sepia(.12) hue-rotate(125deg) saturate(1.35) contrast(1.1); }
.artist-file:hover figcaption { transform:none; }
.artist-file:hover figcaption strong { opacity:1; }
@keyframes scan-file { from { top:-18%; } to { top:106%; } }
.manifesto-grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; width:min(900px,80vw); margin:8vw 0 8vw auto; font:500 clamp(18px,2vw,28px)/1.35 var(--display); }
.marquee { margin-inline:-4vw; overflow:hidden; border-block:1px solid rgba(3,16,17,.25); padding:18px 0; font:600 13px/1 var(--display); letter-spacing:.15em; white-space:nowrap; }
.marquee div { width:max-content; animation:marquee 30s linear infinite; }
.credits { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; }
.credit-list { margin:0; padding:0; list-style:none; counter-reset:credits; }
.credit-list li { counter-increment:credits; display:grid; grid-template-columns:40px 1fr 1fr; gap:18px; align-items:center; border-top:1px solid var(--line); padding:25px 0; }
.credit-list li::before { content:"0" counter(credits); color:var(--signal); font-size:8px; }
.credit-list span { color:var(--mist); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.credit-list strong { font:500 24px/1 var(--display); text-transform:uppercase; }
.press-callout { background:var(--signal); color:var(--deep); padding:7vw max(4vw,calc((100vw - 1220px)/2)); display:flex; justify-content:space-between; align-items:end; gap:30px; }
.press-callout .section-label { color:#1b635f; }
.primary-button.light { color:var(--deep); border-color:var(--deep); }
.primary-button.light:hover { background:var(--deep); color:var(--signal); }
footer { display:grid; grid-template-columns:1fr auto auto; gap:6vw; align-items:end; padding:65px 4vw; }
footer p { margin:0; color:var(--mist); text-transform:uppercase; font-size:8px; letter-spacing:.14em; }
.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes hero-drift { from { transform:scale(1.13); } to { transform:scale(1.04); } }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (max-width:760px) {
  .site-header { padding:20px; }
  .menu-toggle { display:block; z-index:2; }
  .menu-toggle span { display:block; width:24px; height:1px; background:white; margin:6px; }
  nav { position:fixed; inset:0; background:var(--deep); padding:100px 28px; flex-direction:column; align-items:flex-start; font:600 34px var(--display); transform:translateX(100%); transition:.35s; mix-blend-mode:normal; }
  nav.open { transform:none; }
  .hero { min-height:760px; }
  .hero-image { background-position:50% 46%; }
  .hero-content { margin-bottom:165px; padding:0 20px; }
  h1 { font-size:19vw; }
  .hero-title { width:100%; }
  .hero-title img { width:115%; max-width:none; margin-left:-7.5%; }
  .hero-index,.scroll-note { display:none; }
  .countdown-section { min-height:140px; display:block; padding:16px 20px 18px; }
  .countdown-intro { display:flex; align-items:center; justify-content:space-between; }
  .countdown-intro .section-label { margin:0; }
  .countdown-intro > span { font-size:7px; }
  .countdown { margin-top:16px; }
  .countdown div { display:block; padding-left:10px; }
  .countdown strong { font-size:36px; }
  .countdown span { display:block; margin-top:7px; }
  .section { padding:25vw 20px; }
  .signal { grid-template-columns:1fr; gap:25vw; }
  .cover-code { right:-10px; }
  .manifesto { padding:28vw 20px 16vw; }
  .artist-files { grid-template-columns:1fr; gap:12px; margin-top:20vw; }
  .artist-file img { aspect-ratio:1.25/1; }
  .artist-file figcaption { transform:none; }
  .artist-file figcaption strong { opacity:1; }
  .video-section { padding:10vw 20px 28vw; }
  .video-heading { display:block; }
  .video-heading > p { margin-top:24px; }
  .crt-set { grid-template-columns:minmax(0,1fr) 65px; gap:7px; width:100%; padding:12px; border-radius:18px; }
  .crt-screen { border-width:6px; }
  .crt-controls { padding:5px 2px; }
  .crt-brand { margin-bottom:12px; font-size:11px; }
  .crt-speaker { width:68%; }
  .crt-knob { width:32px; height:32px; border-width:4px; margin:7px 0; }
  .crt-knob.small { width:24px; height:24px; border-width:3px; }
  .crt-knob::after { height:9px; }
  .crt-controls > span { font-size:5px; }
  .manifesto h2 { font-size:21vw; }
  .manifesto-grid { grid-template-columns:1fr; width:auto; margin:20vw 0; }
  .credits { grid-template-columns:1fr; }
  .credit-list li { grid-template-columns:28px 1fr; }
  .credit-list strong { grid-column:2; }
  .press-callout { padding:22vw 20px; align-items:flex-start; flex-direction:column; }
  footer { grid-template-columns:1fr 1fr; padding:50px 20px; }
  .footer-mark { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }