/* =========================================================
   InterStalgia design system — defined ONCE here.
   --bg        page background (deep night blue)
   --bg-2      raised panels
   --bg-3      inputs / wells
   --ink       primary text
   --ink-dim   secondary text
   --line      hairlines / borders
   --hot       hot pink accent (primary CTA)
   --teal      teal accent (links, secondary)
   --gold      gold accent (numbers, highlights)
   --violet    violet accent (tags)
   --radius    corner radius
   --mono      VT323 pixel display face (headings, numbers)
   --sans      Space Grotesk body face
   ========================================================= */
@font-face{font-family:"VT323";src:url(/assets/fonts/vt323-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#0d0b1f;--bg-2:#17142f;--bg-3:#211d42;--ink:#f3eefc;--ink-dim:#b3abcf;--line:#342e63;
  --hot:#ff4fa3;--teal:#33e1d1;--gold:#ffcf4a;--violet:#9b7bff;
  --radius:14px;--mono:"VT323",ui-monospace,monospace;--sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);
  background-image:radial-gradient(1200px 500px at 50% -200px,#2a1f5c 0,transparent 70%)}
a{color:var(--teal)}a:hover{color:var(--gold)}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--mono);font-weight:400;line-height:1.05;letter-spacing:.5px;margin:0 0 .4em}
h1{font-size:clamp(44px,8vw,78px)}h2{font-size:clamp(32px,5vw,46px)}h3{font-size:28px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--gold);color:#000;padding:8px;z-index:99}

/* header */
.site-head{border-bottom:1px solid var(--line);background:rgba(13,11,31,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.logo{font-family:var(--mono);font-size:34px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo b{color:var(--hot);font-weight:400}
.logo .tape{display:inline-block;width:30px;height:20px;border:2px solid var(--gold);border-radius:4px;position:relative}
.logo .tape:before,.logo .tape:after{content:"";position:absolute;top:5px;width:6px;height:6px;border-radius:50%;border:2px solid var(--gold)}
.logo .tape:before{left:4px}.logo .tape:after{right:4px}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink-dim);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:15px}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);background:var(--bg-3)}

/* sections */
.hero{padding:60px 0 30px;text-align:center}
.hero p.lede{font-size:20px;color:var(--ink-dim);max-width:680px;margin:0 auto 24px}
.eyebrow{font-family:var(--mono);font-size:22px;color:var(--gold);letter-spacing:2px;text-transform:uppercase}
.section{padding-top:34px;padding-bottom:34px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--ink);display:block;transition:transform .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);border-color:var(--hot);color:var(--ink)}
.card h3{color:var(--gold)}
.card p{color:var(--ink-dim);margin:0}
.card .emoji{font-size:34px;line-height:1;margin-bottom:10px;display:block}
.btn{display:inline-block;background:var(--hot);color:#16051a;border:0;border-radius:999px;padding:12px 22px;font:700 16px var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--gold);color:#16051a}
.btn.alt{background:var(--bg-3);color:var(--ink);border:1px solid var(--line)}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.muted{color:var(--ink-dim)}
.small{font-size:14px}
.big-num{font-family:var(--mono);font-size:44px;color:var(--gold);line-height:1}
input,select{background:var(--bg-3);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:16px var(--sans)}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink-dim);font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.5px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
.crumbs{font-size:14px;color:var(--ink-dim);padding:18px 0 0}.crumbs a{color:var(--ink-dim)}
.prose{max-width:760px}
.pill{display:inline-block;background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:14px;color:var(--ink-dim);margin:0 6px 6px 0;text-decoration:none}
a.pill:hover{border-color:var(--teal);color:var(--ink)}
.year-nav{display:flex;justify-content:space-between;gap:10px;margin-top:30px;margin-bottom:30px}

/* newsletter */
.news{background:linear-gradient(135deg,#2b1650,#11284a);border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center}
.news form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.news input[type=email]{min-width:260px}
.hidden{display:none}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:50px;padding:30px 0;color:var(--ink-dim);font-size:14px}
.site-foot .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.site-foot a{color:var(--ink-dim)}

/* ======= Retro TV ======= */
.tv-stage{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0}
.tv{position:relative;width:min(100%,760px);background:linear-gradient(#5b4632,#3b2c1f);border-radius:28px;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12)}
.tv-body{display:flex;gap:18px}
.tv-screen-wrap{flex:1;background:#111;border-radius:22px;padding:14px;box-shadow:inset 0 0 0 4px #2a2018}
.tv-screen{position:relative;aspect-ratio:4/3;background:#000;border-radius:16px;overflow:hidden}
.tv-screen .player,.tv-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050505;color:#555;font-family:var(--mono);font-size:26px;text-align:center;padding:10px}
.tv-static{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .1s;background:repeating-radial-gradient(#777 0 .0001%,#000 0 .0002%) 50% 0/2500px 2500px,repeating-conic-gradient(#777 0 .0001%,#000 0 .0002%) 60% 60%/2500px 2500px;background-blend-mode:difference;animation:static .2s infinite alternate}
@keyframes static{100%{background-position:50% 0,60% 50%}}
.tv-osd{position:absolute;top:12px;right:16px;font-family:var(--mono);font-size:34px;color:#7CFF6B;text-shadow:0 0 6px #2f0;pointer-events:none;opacity:0;transition:opacity .3s}
.tv-side{width:96px;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.tv-knob{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9c8a8,#7a6548);border:0;cursor:pointer;box-shadow:0 4px 0 #2a1f15;font:12px var(--sans);color:#2a1f15}
.tv-knob:active{transform:translateY(2px);box-shadow:0 2px 0 #2a1f15}
.tv-grille{width:70px;height:70px;background:repeating-linear-gradient(#2a2018 0 3px,#4a3a2a 3px 6px);border-radius:8px;margin-top:auto}
.tv-led{width:10px;height:10px;border-radius:50%;background:#400;box-shadow:none}
.tv-led.on{background:#f33;box-shadow:0 0 8px #f33}
.tv-legs{display:flex;justify-content:space-between;width:min(84%,620px);margin-top:-6px}
.tv-legs span{width:16px;height:34px;background:#2a1f15;border-radius:0 0 6px 6px}
.remote{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.remote button{background:var(--bg-3);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:700 15px var(--sans);cursor:pointer}
.remote button:hover{border-color:var(--hot)}
.remote button.power{background:#a8173f;border-color:#d63a64}
.chan-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chan-list button{background:var(--bg-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:15px var(--sans);cursor:pointer}
.chan-list button.on{color:#16051a;background:var(--gold);border-color:var(--gold)}
.now-playing{min-height:48px;text-align:center;color:var(--ink-dim);font-size:15px;max-width:760px}
.now-playing strong{color:var(--ink)}
@media (max-width:600px){.tv{padding:14px;border-radius:18px}.tv-side{display:none}.tv-screen-wrap{padding:8px}}

/* tools */
.tool-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.tool-row label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-dim)}
.result-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:18px}
.stat{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat .lbl{font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}
.stat .val{font-family:var(--mono);font-size:38px;color:var(--gold);line-height:1.1}
.stat .sub{font-size:14px;color:var(--ink-dim)}
.chart-list{counter-reset:c;list-style:none;padding:0;margin:0}
.chart-list li{counter-increment:c;display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.chart-list li:before{content:counter(c);font-family:var(--mono);font-size:26px;color:var(--hot);width:30px;flex:none;line-height:1.1}
.chart-list .a{color:var(--ink-dim);font-size:15px}

/* game */
.game{max-width:640px;margin:0 auto}
.clue{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.clue .lbl{font-family:var(--mono);color:var(--violet);font-size:22px}
.clue.locked{opacity:.4}
.guesses{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.guess{display:flex;justify-content:space-between;background:var(--bg-3);border-radius:10px;padding:8px 14px;font-family:var(--mono);font-size:26px}
.guess.hit{background:#14532d;color:#bbf7d0}.guess.close{background:#713f12;color:#fde68a}
@media (max-width:700px){.site-head{position:static}.logo{font-size:28px}.nav a{padding:5px 8px;font-size:14px}}

/* ======= Time Dial (homepage face) ======= */
.console{background:linear-gradient(#1d1940,#141130);border:1px solid var(--line);border-radius:22px;padding:26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);margin-top:10px}
.dial-head{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.dial-year{font-family:var(--mono);font-size:clamp(84px,16vw,150px);line-height:.9;color:var(--gold);text-shadow:0 0 18px rgba(255,207,74,.35);min-width:3.2ch;text-align:center}
.dial-btn{background:var(--bg-3);color:var(--ink);border:1px solid var(--line);border-radius:50%;width:52px;height:52px;font-size:22px;cursor:pointer}
.dial-btn:hover{border-color:var(--hot)}
.dial-track{margin:16px auto 6px;max-width:820px}
.dial-track input[type=range]{width:100%;accent-color:var(--hot);height:34px;background:transparent;border:0;padding:0}
.dial-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:20px;color:var(--ink-dim);max-width:820px;margin:0 auto}
.dial-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:22px}
.dial-cols{display:grid;gap:26px;grid-template-columns:1.2fr 1fr;margin-top:24px}
@media (max-width:760px){.dial-cols{grid-template-columns:1fr}}
.ms-list{list-style:none;padding:0;margin:0}
.ms-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.ms-date{display:block;font-family:var(--mono);color:var(--teal);font-size:20px}
.tv-mini{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.tv-mini a{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:15px}
.tv-mini img{border-radius:6px;flex:none;background:#000}

/* ======= Internet timeline ======= */
.tl-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 24px}
.tl-filters button{background:var(--bg-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:15px var(--sans);cursor:pointer}
.tl-filters button.on{background:var(--teal);color:#06201d;border-color:var(--teal)}
.timeline{list-style:none;margin:0;padding:0 0 0 26px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 26px 10px}
.timeline li:before{content:"";position:absolute;left:-35px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--hot)}
.timeline li[data-cat=web]:before{border-color:var(--teal)}.timeline li[data-cat=domains]:before{border-color:var(--gold)}
.timeline li[data-cat=computers]:before{border-color:var(--violet)}.timeline li[data-cat=culture]:before{border-color:#7CFF6B}
.timeline .when{font-family:var(--mono);font-size:22px;color:var(--ink-dim)}
.timeline h3{font-family:var(--sans);font-weight:700;font-size:20px;color:var(--ink);margin:2px 0 4px}
.timeline .src{font-size:13px}
.decade-h{font-family:var(--mono);font-size:40px;color:var(--gold);margin:10px 0 16px -26px}
.bars{display:flex;align-items:flex-end;gap:4px;height:180px;border-bottom:1px solid var(--line);padding-top:10px}
.bars div{flex:1;background:linear-gradient(var(--hot),var(--violet));border-radius:4px 4px 0 0;min-height:2px;position:relative}
.bars-x{display:flex;gap:4px;font-family:var(--mono);font-size:15px;color:var(--ink-dim)}
.bars-x span{flex:1;text-align:center}
tr.me td{background:rgba(255,207,74,.12)}
tr.me td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
.timeline li.decade-li:before{display:none}
@media (max-width:600px){.domains-table td:nth-child(5),.domains-table th:nth-child(5){display:none}}