/* Shared by every page: self-hosted fonts, the Graphite tokens, buttons, layout helpers and the two brand marks.
   The shared header and footer are styled by chrome.css; each page's own look is in /assets/pages/<slug>.css. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --bg:#0a0b0d; --panel:#0d0e10;
  --t0:#f4f5f6; --t1:#eceef1; --t2:#a9afb8; --t3:#7a818b; --t4:#4f555d; --label:#858c96; --val:#c9cdd3; --eyebrow:#7d848e; --wire:#8b929b;
  --sep:#3a3f46; --ln1:#1b1e22; --ln2:#1f2226; --ln3:#22262b; --ln4:#16181b; --frame:#262a30; --btn-ln:#2a2e34; --rail:#23272c;
  --ac:#5ee0a0; --wn:#e8b04a; --bd:#f07a6a;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:32px;
}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--t1);text-decoration:none}
a:hover{color:var(--ac)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
/* clip, not hidden: hidden would make .page a scroll container and stop the header sticking */
.page{position:relative;overflow-x:hidden}
@supports (overflow-x:clip){.page{overflow-x:clip}}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}
h1,h2,h3{margin:0;font-weight:500}
h1{text-wrap:balance}
p{margin:0}

/* the moving grid behind the top of each page (drawn by /assets/field-*.js) */
.field{position:absolute;left:0;right:0;top:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.field canvas{display:block;width:100%;height:100%}

/* brand marks for page bodies: Astra is the outlined square with the green corner, Lunar the half-lit moon
   (the header and footer draw their own moon, .site-moon, in chrome.css) */
.mark{position:relative;flex:none;width:18px;height:18px;border:1.5px solid var(--t1);border-radius:3px;box-sizing:border-box}
.mark::after{content:"";position:absolute;right:-1.5px;top:-1.5px;width:7px;height:7px;background:var(--ac)}
.moon{position:relative;flex:none;width:18px;height:18px;box-sizing:border-box;border:1.5px solid var(--t1);border-radius:999px;overflow:hidden}
.moon::after{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;background:var(--t1)}
.moon.sm{width:14px;height:14px;border-color:var(--val)}
.moon.sm::after{background:var(--val)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:6px;font-weight:600;white-space:nowrap}
.btn.solid{background:var(--t1);color:var(--bg)}
.btn.solid:hover{background:#fff;color:var(--bg)}
.btn.line{padding:0 18px;border:1px solid var(--btn-ln);color:var(--t1);font-weight:500}
.btn.line:hover{border-color:var(--sep);color:var(--t1)}
.btn.sm{height:34px;padding:0 14px}
.btn .arr{font-family:var(--mono);font-size:12px;color:var(--t3)}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* layout helpers */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--eyebrow)}
.eyebrow i{font-style:normal;color:var(--sep)}
.panel{min-width:0;border:1px solid var(--ln2);border-radius:6px;background:var(--panel);font-family:var(--mono);font-size:12px;overflow-x:auto}
figure{margin:0}
.cap{font-family:var(--mono);font-size:11px;color:var(--label)}
.dim{color:var(--t3)}.soft{color:var(--wire)}.sepc{color:var(--sep)}.acc{color:var(--ac)}.bad{color:var(--bd)}.warn{color:var(--wn)}.val{color:var(--val)}

@media (max-width:560px){
  :root{--gutter:16px}
}