@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root { --black:#080808; --ink:#111; --paper:#e9e7e1; --red:#ff2a18; --grey:#9b9b95; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--black); font-family:'IBM Plex Mono',monospace; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:20; 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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.nav { position:relative; z-index:10; height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 4vw; border-bottom:1px solid #2d2d2d; background:#080808e8; backdrop-filter:blur(12px); }
.brand { font:24px 'Archivo Black',sans-serif; letter-spacing:-1px; }
.brand span { color:var(--red); }
.nav nav { display:flex; gap:30px; font-size:11px; letter-spacing:.14em; }
.nav nav a { padding:12px 4px; transition:.2s; }
.nav nav a:hover { color:var(--red); }
.status { justify-self:end; color:#999; font-size:10px; letter-spacing:.1em; }
.status i { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--red); border-radius:50%; box-shadow:0 0 14px var(--red); }
.hero { min-height:calc(100vh - 82px); position:relative; display:grid; grid-template-columns:58% 42%; overflow:hidden; }
.hero-copy { position:relative; z-index:2; padding:8vh 4vw 120px; }
.eyebrow,.section-tag { color:var(--red); font-weight:700; letter-spacing:.16em; font-size:11px; }
h1 { margin:3vh 0 0; font:clamp(82px,14vw,218px)/.73 'Archivo Black',sans-serif; letter-spacing:-.075em; }
h1 span { color:var(--red); font-size:.7em; }
.manifesto { position:absolute; right:1vw; top:16vh; margin:0; font-weight:700; font-size:12px; line-height:1.8; letter-spacing:.12em; writing-mode:vertical-rl; }
.actions { display:flex; gap:14px; margin-top:8vh; flex-wrap:wrap; }
.button { padding:15px 20px; border:1px solid #555; font-size:11px; font-weight:700; letter-spacing:.08em; transition:.2s; }
.button.primary { color:#080808; background:var(--red); border-color:var(--red); }
.button:hover { color:#080808; background:var(--paper); border-color:var(--paper); transform:translateY(-2px); }
.hero-art { position:relative; overflow:hidden; background:var(--red); clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.slash { position:absolute; width:28px; height:140%; top:-20%; background:#080808; transform:rotate(25deg); }
.slash-a { left:18%; } .slash-b { left:47%; width:9px; } .slash-c { right:14%; width:56px; }
.mask { position:absolute; left:50%; top:50%; transform:translate(-48%,-50%) rotate(-90deg); font:clamp(80px,12vw,190px) 'Archivo Black',sans-serif; color:transparent; -webkit-text-stroke:2px #080808; opacity:.8; }
.coordinate { position:absolute; bottom:96px; right:3vw; color:#080808; font-weight:700; font-size:10px; line-height:1.7; }
.ticker { position:absolute; z-index:4; left:0; bottom:0; height:52px; width:100%; display:flex; align-items:center; overflow:hidden; color:#080808; background:var(--paper); border-block:1px solid #080808; font-weight:700; font-size:12px; white-space:nowrap; }
.ticker div { min-width:max-content; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-100%); } }
.grid { display:grid; grid-template-columns:18% 47% 35%; padding:110px 4vw; border-bottom:1px solid #292929; }
.intro { background:var(--paper); color:var(--ink); }
h2 { margin:0; font:clamp(36px,5.3vw,80px)/.98 'Archivo Black',sans-serif; letter-spacing:-.04em; }
h2 em { color:var(--red); font-style:normal; }
.lead { max-width:720px; font-size:clamp(16px,1.7vw,24px); line-height:1.45; font-weight:500; }
.intro>div:nth-child(2) p:last-child { max-width:620px; color:#555; line-height:1.7; }
.fact-card { margin-left:4vw; padding:25px; border:2px solid #111; display:grid; grid-template-columns:1fr; align-self:start; box-shadow:10px 10px 0 var(--red); }
.fact-card span { margin-top:15px; color:#777; font-size:9px; letter-spacing:.15em; }
.fact-card b { font-size:14px; padding:5px 0 12px; border-bottom:1px solid #bbb; }
.fact-card .red { color:var(--red); }
.eras { padding:100px 4vw; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; }
.section-head p { color:#777; font-size:10px; line-height:1.7; text-align:right; }
.era-list { border-top:1px solid #444; }
.era-list article { display:grid; grid-template-columns:9% 1fr auto; align-items:center; min-height:112px; border-bottom:1px solid #333; transition:.25s; }
.era-list article:hover { color:#080808; background:var(--red); padding-inline:20px; }
.era-list .number { color:#777; font-size:11px; }
.era-list h3 { margin:0; font:clamp(28px,4vw,60px) 'Archivo Black',sans-serif; letter-spacing:-.04em; }
.era-list p { margin:4px 0 0; color:#777; font-size:10px; letter-spacing:.1em; }
.era-list article:hover p,.era-list article:hover .number { color:#080808; }
.era-list time { font-size:12px; }
.stream { background:#101010; }
.stream .external-links { margin-top:35px; border-top:1px solid #444; }
.external-links a { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid #444; font-size:12px; font-weight:700; }
.external-links a:hover { color:var(--red); padding-left:10px; }
.player { padding-left:4vw; align-self:center; }
.player iframe { border:0; border-radius:0; filter:grayscale(1) contrast(1.15); }
.quote { min-height:65vh; padding:11vh 4vw; position:relative; display:flex; align-items:center; overflow:hidden; background:var(--red); color:#080808; }
.quote p { position:relative; z-index:2; margin:0; font:clamp(48px,8.5vw,135px)/.85 'Archivo Black',sans-serif; letter-spacing:-.055em; }
.quote p span { color:transparent; -webkit-text-stroke:2px #080808; }
.xmark { position:absolute; right:-2vw; top:-14vh; font:50vw/.8 'Archivo Black',sans-serif; color:#f63a28; }
footer { min-height:260px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; align-items:end; padding:70px 4vw 40px; color:#777; font-size:9px; line-height:1.6; }
footer p:last-child { text-align:right; }
@media (max-width:850px) {
  .nav { grid-template-columns:1fr auto; } .nav nav { display:none; } .status { display:none; }
  .hero { grid-template-columns:1fr; } .hero-copy { min-height:70vh; } .hero-art { position:absolute; right:-30%; top:0; width:65%; height:100%; opacity:.45; }
  .manifesto { display:none; } .grid { grid-template-columns:1fr; gap:32px; padding:75px 6vw; }
  .fact-card,.player { margin:0; padding-left:0; } .section-head { align-items:flex-start; flex-direction:column; gap:15px; }
  .section-head p { text-align:left; } .era-list article { grid-template-columns:14% 1fr auto; }
  footer { grid-template-columns:1fr; align-items:start; } footer p:last-child { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ticker div { animation:none; } * { transition:none!important; } }