/* ══ THE SITE'S CHROME, IN ONE PLACE ═══════════════════════════════════════════
 *
 * Design tokens, the reset, the header, the buttons and the footer — everything
 * that is the same on the marketing page and on the dev log. Each page keeps a
 * <style> block for what is only its own (the hero, the faction panels, the
 * article typography); nothing that appears twice belongs there.
 *
 * TWO CHROME MODES, and the difference between them is real rather than drift:
 * the marketing page floats its header OVER the hero photograph, the dev log
 * sits it on a rule above an article. The pages that want the second say so with
 * <body class="doc"> and everything below keys off that — which is also how the
 * active nav item is marked, so no page has to restate where it is.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0e1218; --bg2:#131922; --ink:#eef2f6; --mute:#9db0c2; --line:rgba(255,255,255,.10);
  --cyan:#5ab2ff;
  --head:'Oswald','Arial Narrow',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);font-weight:600;text-transform:uppercase;margin:0;letter-spacing:.01em;line-height:1.05}

/* ── header ───────────────────────────────────────────────────────────────── */
.top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:32px;padding:22px 40px}
.top img{height:44px;width:auto;filter:brightness(1.25) drop-shadow(0 2px 10px rgba(0,0,0,.8))}
nav{display:flex;gap:36px;margin-left:auto;font-family:var(--head);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
nav a{color:#c9d6e2}
nav a:hover{color:#fff}
.nav-dc{color:#aab4f8}

/* …and the dev log's version of it: in the flow, on a rule, no drop shadow to
   lift it off a photograph that isn't there. */
.doc .top{position:static;border-bottom:1px solid var(--line)}
.doc .top img{filter:brightness(1.25)}
.doc nav a[href="/blog/"]{color:var(--cyan)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{font-family:var(--head);font-size:16px;letter-spacing:.06em;text-transform:uppercase;display:inline-block;
     padding:15px 34px;border:1px solid var(--cyan);white-space:nowrap;text-align:center}
.btn.solid{background:var(--cyan);color:#0b0f16}
.btn.ghost{color:var(--ink);border-color:rgba(255,255,255,.55)}
.btn.small{padding:10px 20px;font-size:14px}
.btn.discord{color:#aab4f8;border-color:#5865f2}
.btn.discord:hover{background:#5865f2;color:#fff}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* ── prose links, on the pages that have prose ────────────────────────────────
   Scoped to <main> ON PURPOSE. The chrome above and the footer below sit outside
   it, so "links in an article are cyan and underline on hover" cannot reach in
   and repaint the nav — which is what a bare `.doc a` did. */
.doc main a{color:var(--cyan)}
.doc main a:hover{text-decoration:underline}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0;color:#66788a;font-size:13px}
/* Its own class rather than the .wrap the pages use: .wrap means a 1240px
   marketing row on one page and a 1080px column of article on another, and the
   footer is neither. */
.foot-wrap{max-width:1240px;margin:0 auto;padding-inline:28px;
           display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#c9d6e2}
footer a:hover{color:var(--ink)}

/* ── the one breakpoint the chrome cares about ────────────────────────────── */
@media (max-width:820px){
  .top{padding:16px 20px;gap:16px}
  .top img{height:34px}
  nav{display:none}
  .btn{display:block}
  .top .btn{margin-left:auto;display:inline-block}
  .foot-wrap{justify-content:center;text-align:center}
}
