/* The site's plain pages (about, privacy), in the app's tempered-steel palette. */
:root{
  --bg:#0d0f14; --panel:#13161d; --panel2:#1a1e27; --line:#262c38; --line2:#343c4b;
  --text:#ece8df; --muted:#9aa1ae; --faint:#666d7b;
  --accent:#f2a93b; --heat-hi:#ffc86f; --accent-ink:#ffc86f; --accent-soft:rgba(242,169,59,.14); --on-accent:#1c1305;
  --font-ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f4f5f7; --panel:#fbfbfc; --panel2:#eef0f3; --line:#dadee5; --line2:#c5cbd5;
  --text:#161a21; --muted:#535b6a; --faint:#858c99;
  --accent:#e0962a; --heat-hi:#f5b24c; --accent-ink:#9a5a08; --accent-soft:rgba(224,150,42,.16); --on-accent:#241803;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

header{display:flex;align-items:center;gap:18px;padding:14px clamp(16px,4vw,32px);border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;margin-right:auto}
.brand img{width:26px;height:26px;image-rendering:pixelated;border-radius:6px}
.brand span{font:600 15px/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase}
header nav{display:flex;gap:18px;font-size:14.5px}
header nav a{color:var(--muted);text-decoration:none}
header nav a:hover,header nav a[aria-current]{color:var(--text)}
.open{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.open:hover{background:var(--heat-hi)}

main{max-width:700px;margin:0 auto;padding:48px clamp(16px,5vw,32px) 64px}
.kicker{font:600 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
h1{font:700 clamp(30px,5vw,40px)/1.1 var(--font-ui);letter-spacing:-.02em;margin:0 0 14px}
h2{font:650 21px/1.3 var(--font-ui);margin:36px 0 8px}
p,ul{margin:0 0 14px}
ul{padding-left:22px}
li{margin:5px 0}
.lede{font-size:19px;color:var(--muted);line-height:1.6}
.updated{font:500 12.5px var(--font-mono);color:var(--faint)}
.short{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:14px 18px;margin:22px 0}
.short p:last-child,.short ul:last-child{margin:0}

footer{border-top:1px solid var(--line);padding:22px clamp(16px,4vw,32px);color:var(--faint);font-size:14px;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

@media (max-width:620px){ header nav{display:none} }