/* ============================================================
   site.css — the shared identity layer for all four pages.

   Holds fonts, color tokens, base type, the header rail, and focus states.
   Each page keeps its own layout CSS inline; everything visual that must match
   across pages lives here, so a palette or typeface change is one edit instead
   of four. Every page links this file.

   Self-hosted fonts, no network at runtime. Do not add a CDN reference here:
   the pages are meant to work opened straight from disk.
   ============================================================ */

@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-var.woff2) format("woff2-variations");
           font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-400.woff2) format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-500.woff2) format("woff2");
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/plex-serif-400.woff2) format("woff2");
           font-weight:400;font-style:normal;font-display:swap}

/* ---- tokens: bare :root is the complete light palette ---- */
:root{
  --ground:#F1F4F8;
  --surface:#FFFFFF;
  --sunk:#E8EDF3;
  --line:#D3DAE4;
  --line-soft:#E4E9F0;
  --ink:#10151B;
  --ink-quiet:#566173;
  --ink-faint:#7E8899;
  --accent:#2E4A7D;
  --accent-soft:#E3EAF6;
  --good:#1F6B4D;
  --good-soft:#E2EFE8;

  --sans:"Plex Sans","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Plex Mono","Cascadia Code",ui-monospace,Consolas,monospace;
  --serif:"Plex Serif",Georgia,"Iowan Old Style","Times New Roman",serif;
}
/* the un-stamped default: only prefers-color-scheme separates the two. the
   :not() guard keeps an explicit light choice winning over a dark OS. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1217;
    --surface:#161B22;
    --sunk:#11161C;
    --line:#29313C;
    --line-soft:#1E242C;
    --ink:#E6EBF1;
    --ink-quiet:#94A0B0;
    --ink-faint:#6D7889;
    --accent:#8FAADC;
    --accent-soft:#1B2432;
    --good:#5FB289;
    --good-soft:#14231C;
  }
}
/* and the explicit dark stamp wins in the other direction */
:root[data-theme="dark"]{
  --ground:#0E1217;
  --surface:#161B22;
  --sunk:#11161C;
  --line:#29313C;
  --line-soft:#1E242C;
  --ink:#E6EBF1;
  --ink-quiet:#94A0B0;
  --ink-faint:#6D7889;
  --accent:#8FAADC;
  --accent-soft:#1B2432;
  --good:#5FB289;
  --good-soft:#14231C;
}

/* ---- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the recurring uppercase mono label */
.lab{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---- header rail, shared by every page ---- */
.rail{
  position:sticky;top:0;z-index:20;
  background:var(--ground);
  background:color-mix(in srgb,var(--ground) 95%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.rail-in{
  max-width:1120px;margin:0 auto;padding:0 32px;
  height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{
  font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.rail nav{display:flex;align-items:center;gap:4px;min-width:0}
.rail nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-quiet);
  text-decoration:none;padding:6px 10px;white-space:nowrap;
}
.rail nav a:hover{color:var(--ink);background:var(--sunk)}
.rail nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.tog{
  font-family:var(--mono);font-size:.72rem;color:var(--ink-quiet);
  background:none;border:1px solid var(--line);padding:5px 10px;cursor:pointer;
  line-height:1.4;
}
.tog:hover{color:var(--ink);border-color:var(--ink-faint)}
.m-short,.t-ico{display:none}

@media (max-width:880px){
  .rail-in{padding:0 20px}
  .rail nav a{padding:6px 7px}
}
@media (max-width:560px){
  /* the rail runs out of room: shorten the wordmark and reduce the theme
     control to its glyph rather than letting the row overflow the viewport */
  .rail nav .hide-s{display:none}
  .m-full,.t-txt{display:none}
  .m-short,.t-ico{display:inline}
  .tog{padding:5px 9px;font-size:.85rem}
}
/* the rail is chrome, not content: it never prints */
@media print{.rail{display:none}}