:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --ground:#0B1016; --panel:#12202A; --panel-2:#162A36;
  --ink:#E4EDF1; --muted:#8AA0AC; --line:#22333F;
  --accent:#DE7008; --accent-hi:#FF8F2E; --galaxite:#A855C7;
  --archive:#E9E4DA; --archive-ink:#2A2620;
}
@font-face{font-family:'Quadrangle';src:url(fonts/quadrangle.woff2) format('woff2');font-display:swap}
@font-face{font-family:'WI Euro';src:url(fonts/wi-eurostile.woff2) format('woff2');font-display:swap}

/* Reset. These files are served standalone, so nothing supplies a base reset for
   them — without this, body keeps the browser default 8px margin and shows as a white
   border around the whole page, and html has no background so overscroll flashes white. */
html,body{margin:0;padding:0}
html{background:var(--ground);color-scheme:dark}
body{background:var(--ground)}
*{box-sizing:border-box}
.wi{background:var(--ground);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  margin:0 auto;overflow-x:hidden}
.wi img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.eyebrow{font-family:'WI Euro',ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;color:var(--muted)}
h2.t{font-family:'Quadrangle',ui-sans-serif,system-ui,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,42px);line-height:1.05;margin:.2em 0 .35em;text-wrap:balance;letter-spacing:.01em}
.lede{color:#B9CCD6;font-size:clamp(15px,1.6vw,18px);max-width:62ch}

/* ── hero ── full-bleed key art; the wordmark is the game's own type, so the
   page opens in the subject's actual voice rather than a chosen substitute. */

/* ── footer ── */
.foot{border-top:1px solid var(--line);background:var(--panel)}
.foot .wrap{padding:34px 0;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:#9FB6C2;text-decoration:none;font-size:14px}
.foot a:hover,.foot a:focus-visible{color:var(--accent-hi);text-decoration:underline}
.foot small{color:#8BA2AF;font-size:12.5px}
a:focus-visible,.play:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* the primary action, used by BOTH the index hero and the subpage masthead */
.play{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-family:'WI Euro',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  padding:16px 30px;border-radius:2px;box-shadow:0 6px 26px rgba(222,112,8,.32);
  transition:background .16s ease,transform .16s ease}
.play:hover,.play:focus-visible{background:var(--accent-hi);transform:translateY(-1px)}


/* ── blog shell ───────────────────────────────────────────────────────────────
   Mirrors the www masthead/footer. The blog is a separate Pages project on its own
   domain, so it cannot share www's site.css without a cross-site dependency — this
   file is a deliberate copy of that design layer. Keep the two in step. */
.top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1a26,var(--panel))}
.top .wrap{padding:20px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.top .lock{display:inline-block;line-height:1;text-decoration:none;font-size:26px}
.top .lock .w{display:block;font-family:'Quadrangle',sans-serif;letter-spacing:-.025em;color:#8FA6E8;
  -webkit-text-stroke:.02em rgba(4,14,34,.9);paint-order:stroke fill}
.top .lock .i{display:block;width:100%;font-family:'WI Euro',sans-serif;color:#C3D4DE;font-size:.278em;
  text-align:justify;text-align-last:justify;margin-top:.28em}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{color:#9FB6C2;text-decoration:none;font-size:14px}
.top nav a:hover,.top nav a:focus-visible{color:var(--accent-hi)}
.top .play{font-size:13px;padding:11px 20px}

/* ── index: posts as cards, each with a lead image ── */
.page{padding:clamp(30px,5vw,56px) 0 clamp(40px,6vw,72px)}
.page h1{font-family:'Quadrangle',ui-sans-serif,system-ui,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,44px);line-height:1.06;margin:.1em 0 .5em;text-wrap:balance}
.posts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:22px}
@media(min-width:760px){.posts{grid-template-columns:repeat(2,1fr);gap:26px}}
.posts li{background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column}
.posts a.shot{display:block;line-height:0;border-bottom:1px solid var(--line)}
.posts a.shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .3s ease}
.posts a.shot:hover img,.posts a.shot:focus-visible img{transform:scale(1.03)}
.posts .txt{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.posts time{font-family:'WI Euro',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.posts h2{margin:0;font-size:19px;line-height:1.25}
.posts h2 a{color:#fff;text-decoration:none}
.posts h2 a:hover,.posts h2 a:focus-visible{color:var(--accent-hi)}
.posts p{margin:0;color:#A8BECB;font-size:14.5px;line-height:1.6}

/* ── a post ── */
.post{max-width:70ch}
.post .date{font-family:'WI Euro',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .4em}
.post h1{margin:0 0 .6em}
.post .lead{margin:0 0 28px;border:1px solid var(--line);border-radius:3px;overflow:hidden;line-height:0;
  max-width:none}
.post .lead img{width:100%;height:auto;display:block}
.post .lead figcaption{font-family:'WI Euro',sans-serif;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);padding:9px 12px;line-height:1.5;background:var(--panel)}
.post .body{color:#B9CCD6}
.post .body a{color:var(--accent-hi)}
.post .body h3{font-family:'WI Euro',sans-serif;font-size:17px;color:#fff;margin:1.9em 0 .5em}
.post .body ul{padding-left:20px}
.post .body li{margin:.35em 0}
.post .body figure{margin:26px 0}
.post .body figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px}
.post .body figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;font-style:italic}
.post .more{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.post .more a{color:#9FB6C2;text-decoration:none;font-size:14px}
.post .more a:hover{color:var(--accent-hi)}