:root { --navy:#002f6c; --yellow:#f5cb08; --ink:#0e1117; --white:#fff; --slate:#90a2bf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--navy); font-family:Archivo,Arial,sans-serif; margin:0; }
a { color:inherit; }
.site-header { align-items:center; background:var(--navy); color:var(--white); display:flex; justify-content:space-between; padding:1.5rem max(2rem,calc((100vw - 1200px)/2)); }
.wordmark { display:block; line-height:0; text-decoration:none; width:clamp(10.5rem,18vw,13rem); }
.wordmark img { display:block; height:auto; width:100%; }
nav { display:flex; gap:1.5rem; }
nav a,.kicker,.section-label,.card-index,.coming-soon,footer p { font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.11em; }
nav a { text-decoration:none; } nav a:hover { color:var(--yellow); }
main { overflow:hidden; }
.slash-rail { display:block; height:auto; width:clamp(11rem,24vw,22.5rem); }
.hero-rail { position:absolute; right:0; top:8rem; z-index:1; }
.hero { align-items:end; background:var(--navy); color:var(--white); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr); min-height:clamp(39rem,82vh,58rem); padding:clamp(6rem,13vw,10rem) max(2rem,calc((100vw - 1200px)/2)) 5rem; position:relative; }
.hero::after { background:var(--yellow); content:""; height:1rem; position:absolute; right:0; top:8rem; width:clamp(5rem,18vw,16rem); }
.hero-copy-wrap { position:relative; z-index:1; }
.kicker { color:var(--yellow); margin:0 0 1.2rem; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:800; letter-spacing:-.065em; line-height:.92; }
h1 { font-size:clamp(3.8rem,8.6vw,8.3rem); margin:0; } h1 span { color:var(--yellow); }
.hero-copy { font-size:clamp(1.1rem,2vw,1.42rem); line-height:1.5; margin:2.25rem 0; max-width:580px; }
.text-link { border-bottom:2px solid var(--yellow); color:var(--yellow); font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.08em; padding-bottom:.35rem; text-decoration:none; }
.text-link:hover { color:var(--white); }
.controller-mark { justify-self:end; max-width:30rem; position:relative; width:100%; z-index:1; }
.wordmark-banner { bottom:0; display:block; height:auto; left:0; position:absolute; width:100%; z-index:0; }
.manifesto,.lens { display:grid; gap:clamp(2rem,8vw,8rem); grid-template-columns:minmax(170px,.5fr) minmax(0,1.5fr); padding:clamp(5rem,10vw,9rem) max(2rem,calc((100vw - 1200px)/2)); }
.manifesto { position:relative; }.manifesto-rail { bottom:1.5rem; position:absolute; right:max(2rem,calc((100vw - 1200px)/2)); width:clamp(8rem,18vw,16rem); }
.section-label { border-top:2px solid currentColor; display:flex; justify-content:space-between; padding-top:.8rem; }
.manifesto h2,.lens h2 { font-size:clamp(3rem,6.4vw,6.2rem); margin:0 0 1.75rem; max-width:900px; }
.manifesto p,.lens p { font-size:clamp(1.1rem,1.75vw,1.35rem); line-height:1.55; max-width:690px; }
.lens { background:var(--yellow); color:var(--navy); grid-template-columns:minmax(170px,.45fr) minmax(0,1.1fr) minmax(10rem,.45fr); position:relative; }
.lens-mark { align-self:end; max-width:15rem; width:100%; }
.section { display:grid; gap:clamp(2rem,8vw,8rem); grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); padding:clamp(5rem,10vw,9rem) max(2rem,calc((100vw - 1200px)/2)); }
.section-heading h2 { font-size:clamp(3rem,5.5vw,5.5rem); margin:0; }.section-heading h2 span { color:var(--yellow); text-shadow:1px 1px 0 var(--navy); }
.signals { background:var(--ink); color:var(--white); }.signals .section-heading h2 span { text-shadow:none; }
.signal-grid { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }.signal-card { display:flex; flex-direction:column; justify-content:space-between; min-height:31rem; padding:2rem; }.dispatch-card { background:var(--yellow); color:var(--navy); }.watch-card { border:1px solid rgba(255,255,255,.45); color:var(--white); }
.card-index { margin-bottom:auto; }.signal-card h3 { font-size:clamp(2.3rem,3.5vw,3.7rem); margin:3rem 0 1.2rem; }.signal-card > p:not(.card-index):not(.coming-soon),.game-card > p { font-size:1.05rem; line-height:1.5; max-width:440px; }.watch-card .coming-soon { color:var(--yellow); }.coming-soon { margin-bottom:0; }
.play { background:var(--white); }.game-card { background:var(--navy); color:var(--white); display:flex; flex-direction:column; justify-content:space-between; min-height:31rem; padding:2rem; }.game-card .card-index { color:var(--yellow); }.game-card h3 { font-size:clamp(3rem,6vw,5.5rem); margin:0; }.button { align-self:start; background:var(--yellow); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500; letter-spacing:.06em; padding:1rem 1.15rem; text-decoration:none; }.button:hover { background:var(--white); color:var(--navy); }
footer { align-items:center; background:var(--navy); color:var(--white); display:flex; justify-content:space-between; padding:2rem max(2rem,calc((100vw - 1200px)/2)); } footer p { color:var(--slate); margin:0; }
@media (max-width:760px) { .site-header { padding:1.25rem; } nav { gap:.8rem; } nav a { font-size:.58rem; } .hero { display:block; min-height:45rem; padding:6rem 1.25rem 3rem; } .hero::after { top:5rem; }.controller-mark { display:block; margin:3rem 0 0 auto; max-width:16rem; }.wordmark-banner { bottom:1rem; width:155%; }.hero-rail { right:0; top:4.7rem; width:12rem; }.manifesto,.lens,.section { grid-template-columns:1fr; padding:4.5rem 1.25rem; }.manifesto-rail { right:1.25rem; }.lens-mark { display:none; }.signal-grid { grid-template-columns:1fr; }.signal-card,.game-card { min-height:25rem; } footer { align-items:flex-start; flex-direction:column; gap:1rem; padding:2rem 1.25rem; } }