/* =========================================================
   INSPIRATION DECK — internal, The Verge-ish brutalist-editorial
   ========================================================= */
:root{
  /* DARK — default */
  --paper:#0c0c0f;
  --card:#17171b;
  --ink:#f3f2ee;
  --ink-2:#c7c7cf;
  --ink-3:#8c8c95;
  --line:#f3f2ee;
  --volt:#4b28ff;
  --volt-ink:#8b6bff;
  --acid:#d7ff2e;
  --hot:#ff6b6b;
  --good:#3ddc97;
  --shadow:6px 6px 0 var(--line);
  --fd:"Archivo","Arial Narrow",system-ui,sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1120px;
}
:root[data-theme="light"]{
  --paper:#f2f1ec;
  --card:#ffffff;
  --ink:#0b0b0d;
  --ink-2:#3a3a42;
  --ink-3:#6a6a72;
  --line:#0b0b0d;
  --volt:#4b28ff;
  --volt-ink:#4b28ff;
  --hot:#d81111;
  --good:#0a8c5e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}

/* ---------- progress ---------- */
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--acid);border-right:2px solid var(--line);z-index:60}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--volt);color:#fff;border-bottom:3px solid var(--line)}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-family:var(--fd);font-weight:900;font-size:19px;letter-spacing:-.03em;text-transform:lowercase;text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:9px}
.wordmark .blk{background:var(--acid);color:#0b0b0d;padding:2px 8px;transform:skewX(-9deg);display:inline-block}
.topbar nav{display:flex;gap:16px;align-items:center;font-family:var(--fd);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.topbar nav a{text-decoration:none;opacity:.82}
.topbar nav a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tglbtn{font-family:var(--fd);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:transparent;border:2px solid rgba(255,255,255,.55);padding:5px 10px;cursor:pointer;line-height:1;transition:border-color .15s}
.tglbtn:hover{border-color:#fff}

/* ---------- ticker ---------- */
.ticker{background:#0b0b0d;color:#f3f2ee;border-bottom:3px solid var(--line);overflow:hidden;white-space:nowrap}
.ticker .track{display:inline-block;padding:8px 0;font-family:var(--fd);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;animation:marquee 34s linear infinite}
.ticker .track span{padding:0 26px;position:relative}
.ticker .track span::after{content:"◆";position:absolute;right:-3px;color:var(--acid)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- masthead (dashboard) ---------- */
.masthead{padding:60px 0 38px;border-bottom:3px solid var(--line)}
.masthead h1{font-family:var(--fd);font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(2.8rem,9vw,6.4rem);margin-top:16px}
.masthead .lede{margin-top:22px;max-width:640px;font-size:1.18rem;color:var(--ink-2)}

.eyebrow{font-family:var(--fd);font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--volt-ink);display:inline-flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:22px;height:12px;background:var(--acid);border:2px solid var(--line);display:inline-block}

.howto{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0 0}
.howto .chip{font-family:var(--fd);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--line);padding:6px 11px;background:var(--card)}

/* ---------- feed ---------- */
.feed{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;padding:42px 0}
.post{grid-column:span 6;background:var(--card);border:3px solid var(--line);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:13px;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.post:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--line)}
.post h2{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:.98;font-size:clamp(1.6rem,3.6vw,2.7rem)}
.post p{color:var(--ink-2);font-size:1rem}
.post .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--fd);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.post .meta .tagpill{border:2px solid currentColor;padding:4px 9px}
.post--feature{grid-column:span 12;background:var(--volt);color:#fff}
.post--feature .eyebrow{color:#fff}
.post--feature p{color:rgba(255,255,255,.86)}
.post--ghost{border-style:dashed;box-shadow:none;opacity:.55;justify-content:center;min-height:170px}
.post--ghost:hover{transform:none;box-shadow:none;opacity:.8}
@media(max-width:820px){.post,.post--feature{grid-column:span 12}}

/* ---------- article head + tabs ---------- */
.article-head{padding:50px 0 24px;border-bottom:3px solid var(--line)}
.article-head h1{font-family:var(--fd);font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(2.4rem,7vw,4.8rem);margin:16px 0}
.article-head .dek{font-size:1.2rem;color:var(--ink-2);max-width:660px}
.article-head .byline{margin-top:18px;font-family:var(--fd);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}

.tabbar{position:sticky;top:40px;z-index:40;background:var(--paper);border-bottom:3px solid var(--line)}
.tabbar .in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;gap:10px;flex-wrap:wrap}
.tabbar button{font-family:var(--fd);font-weight:800;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;background:var(--card);color:var(--ink);border:3px solid var(--line);box-shadow:3px 3px 0 var(--line);padding:10px 15px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.tabbar button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.tabbar button.on{background:var(--volt);color:#fff}
@media(max-width:640px){.tabbar .in{flex-wrap:wrap;gap:8px;padding:12px 16px}.tabbar button{font-size:10.5px;padding:9px 10px}}

/* ---------- panels / prose ---------- */
.panel{display:none;padding:18px 0 70px}
.panel.on{display:block;animation:fadeUp .4s ease}
.prose{max-width:760px}
.prose > section{padding:44px 0;border-bottom:2px solid var(--line)}
.prose > section:last-child{border-bottom:none}
.prose h2{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:1;font-size:clamp(1.7rem,4.6vw,2.6rem);margin:14px 0 18px;max-width:20ch}
.prose h3{font-family:var(--fd);font-weight:900;font-size:1.2rem;margin:22px 0 8px}
.prose p{margin:0 0 16px;color:var(--ink-2);font-size:1.06rem}
.prose p strong,.prose li strong,.prose p b{color:var(--ink)}
.prose em{font-style:italic}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--acid);color:#0b0b0d;padding:1px 5px;border:1px solid var(--line)}

.intro{padding:34px 0;border-bottom:3px solid var(--line)}
.intro h2{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:.98;font-size:clamp(1.9rem,5vw,3rem);margin:14px 0 14px;max-width:24ch}
.intro .dek{font-size:1.12rem;color:var(--ink-2);max-width:640px}

.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:6px solid var(--volt);font-family:var(--fd);font-weight:700;font-size:1.32rem;line-height:1.16;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:10px;font-size:.78rem;font-weight:700;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.callout{margin:26px 0;background:var(--card);border:3px solid var(--line);box-shadow:var(--shadow);padding:20px 22px}
.callout h4{font-family:var(--fd);font-weight:900;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-ink);margin-bottom:8px}
.callout p{color:var(--ink);margin:0}
.callout--volt{background:var(--volt)}
.callout--volt h4{color:var(--acid)}
.callout--volt p{color:#fff}

.points{list-style:none;display:grid;gap:10px;margin:22px 0}
.points li{display:flex;gap:12px;padding:14px 16px;background:var(--card);border:2px solid var(--line)}
.points li .n{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--fd);font-weight:800;font-size:12px}
.points li .t{font-size:.98rem;color:var(--ink-2)}

/* figure / animation */
figure.viz{margin:28px 0;background:var(--card);border:3px solid var(--line);box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden;max-width:100%}
figure.viz::after{content:attr(data-tag);position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);font-family:var(--fd);font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
figure.viz .stage{background:#0b0b0d;border:2px solid var(--line);padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.viz svg{display:block;width:100%;height:auto;overflow:visible}
figure.viz figcaption{margin-top:14px;font-family:var(--fd);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:center}

/* protocol timeline */
.phase{display:grid;grid-template-columns:104px 1fr;border-left:3px solid var(--line);margin-left:6px}
.phase+.phase{margin-top:6px}
.phase .when{padding:18px 14px 18px 0;position:relative}
.phase .when::before{content:"";position:absolute;left:-11px;top:22px;width:16px;height:16px;background:var(--volt);border:3px solid var(--line)}
.phase .when b{font-family:var(--fd);font-weight:900;display:block;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.phase .when span{font-size:10px;color:var(--ink-3);font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.phase .body{padding:18px 0 28px 22px}
.phase .body .sub{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--fd);font-weight:600;margin-bottom:14px}
.qset{display:grid;gap:8px}
.qset .q{padding:12px 14px;background:var(--card);border:2px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.qset .q .lead{font-family:var(--fd);font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt-ink);margin-right:8px}
.sched{display:grid;gap:6px;margin-bottom:12px}
.sched .row{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:center;padding:10px 12px;background:var(--card);border:2px solid var(--line);font-size:.92rem;color:var(--ink-2)}
.sched time{font-family:var(--fd);font-weight:900;font-size:12px;color:var(--hot)}

/* game grid */
.gamegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.gamecard{padding:16px;background:var(--card);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line)}
.gamecard .tag{font-family:var(--fd);font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt-ink);margin-bottom:6px}
.gamecard h4{font-family:var(--fd);font-weight:900;font-size:1.02rem;margin-bottom:4px}
.gamecard p{font-size:.9rem;color:var(--ink-2);margin:0}
@media(max-width:640px){.gamegrid{grid-template-columns:1fr}}

/* vs table */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.vs .col{padding:18px;border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);background:var(--card)}
.vs .col h4{font-family:var(--fd);font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.vs .bad h4{color:var(--hot)}
.vs .good h4{color:var(--good)}
.vs ul{list-style:none;display:grid;gap:9px}
.vs li{font-size:.93rem;color:var(--ink-2);padding-left:17px;position:relative}
.vs .bad li::before{content:"\00d7";position:absolute;left:0;color:var(--hot);font-weight:800}
.vs .good li::before{content:"\2192";position:absolute;left:0;color:var(--good);font-weight:800}
@media(max-width:640px){.vs{grid-template-columns:1fr}}

/* closing + footer */
.closing{padding:74px 0}
.closing h2{font-family:var(--fd);font-weight:900;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.03em;margin-bottom:16px}
.closing p{color:var(--ink-2);max-width:560px}
.closing .sig{margin-top:22px;font-family:var(--fd);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.foot{border-top:3px solid var(--line);padding:26px 0 56px;font-family:var(--fd);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.foot a{color:var(--ink-2)}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}

/* keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shake{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes crumble{0%,70%{opacity:1;transform:translateY(0)}85%{opacity:.3;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes steadyGlow{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes dashMove{to{stroke-dashoffset:-1000}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes orbitRev{to{transform:rotate(-360deg)}}
@keyframes pulseNode{0%,100%{r:6;opacity:.5}50%{r:9;opacity:1}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fill{to{width:100%}}
@keyframes drift{0%{transform:translate(0,0)}40%{transform:translate(38px,26px) rotate(18deg)}100%{transform:translate(0,0)}}
@keyframes incoming{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}15%{opacity:1}60%{opacity:1;transform:translate(calc(var(--fx)*.28),calc(var(--fy)*.28)) scale(1)}72%{transform:translate(calc(var(--fx)*.36),calc(var(--fy)*.36)) scale(1)}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .topbar .in{flex-wrap:wrap;gap:8px;padding:8px 16px}
  .topbar nav{width:100%;flex-wrap:wrap;gap:10px 14px;font-size:10px}
  .wrap{padding:0 16px}
}
@media (max-width:560px){
  body{font-size:16px}
  .masthead{padding:44px 0 30px}
  .article-head{padding:36px 0 20px}
  .feed{padding:30px 0;gap:16px}
  .post{padding:20px}
  .panel{padding:12px 0 56px}
  .prose > section{padding:32px 0}
  .phase{grid-template-columns:76px 1fr}
  .phase .body{padding:14px 0 22px 16px}
  figure.viz{padding:14px}
  figure.viz .stage{padding:10px}
  blockquote,.prose blockquote{font-size:1.1rem}
  .ticker .track{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}