/* ==================================================================================================
   site.css — THE SHARED CHROME FOR handspike.dev
   ==================================================================================================

   WHY THIS FILE EXISTS. Every page used to carry its own copy of the palette, the reset, the body
   rules, the masthead and the footer inline. Ten copies of one design, and they drifted — the
   masthead broke twice for exactly that reason. The 2026-09-07 fix appended a block labelled
   "masthead, canonical (appended to end the per-page drift)" to all ten pages, but never deleted the
   older masthead it was overriding, so each page then carried TWO mastheads: a dead `.mast`-prefixed
   layer and the live `header.mast` one on top of it. `header.mast{` appeared SEVENTEEN times across
   ten files. Extracting it here was the only way to make "canonical" true rather than aspirational.

   THE RULE THIS FILE ESTABLISHES: chrome lives here, page-specific styling stays inline. This is
   linked BEFORE each page's own <style>, so anything a page genuinely needs to differ on it simply
   restates — no !important, no specificity games. Three pages legitimately differ and do exactly
   that: login re-centres <body> as a grid and re-sizes .fine, and eleven-failures.html carries its
   own accent (--signal) and a taller .shell.

   WHAT MUST NOT HAPPEN AGAIN: do not paste a masthead into a page. If the header needs to change, it
   changes HERE, once. A rule in this file that a page overrides is fine and visible; a second copy of
   this file's rules inside a page is the defect that cost two outages.
   ================================================================================================== */

/* --------------------------------------------------------------------------------------------------
   THE GROUND IS BLACK — one palette, no light variant, no prefers-color-scheme flip. The site used to
   carry a cream light theme wired to the READER's OS setting, so the owner's own machine served him a
   cream page while the cockpit and every screenshot were dark. There is now exactly one look.

   `color-scheme:dark` is load-bearing, not decoration: without it a light-mode browser paints a WHITE
   scrollbar track and light form-control internals down the side of a pure-black page.

   These values are tuned FOR #000, not carried over from the old #10141a ground. The old --ink-3
   (#6f767e) and --brass-dim (#8a7134) measured ~4.0:1 on that ground — already under AA — and
   dropping the ground to black without lifting them would have buried the footer, the smallprint and
   every uppercase label. Everything below clears 4.5:1 on black; --ink-2 clears 10:1.

   --panel is the COCKPIT's own ground (#0e1117) on purpose: a card on this site is the colour of the
   instrument it describes, and on the demo pages the embedded cockpit sits flush with the chrome
   around it instead of floating on a different dark.
   -------------------------------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --ground:#000000;
  --panel:#0e1117;
  --ink:#ece9e0;
  --ink-2:#b2b6ba;
  --ink-3:#7e858c;
  --rule:#31383f;
  --rule-2:#1d2229;
  --brass:#d4ac55;
  --brass-dim:#9a7e3c;
  --mono-bg:#151a21;
  --measure:34rem;
}
::selection{ background:var(--brass); color:#000; }

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.shell{ max-width:46rem; margin:0 auto; padding:2.4rem 1.5rem 5rem; }
p,li{ max-width:var(--measure); }
a{ color:var(--brass); text-decoration-color:var(--brass-dim); text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }

/* --------------------------------------------------------------------------------------------------
   MASTHEAD — canonical, and now canonical in the only sense that matters: there is one copy.
   Sized to FIT: at .62rem with .95rem gaps the eight items measure ~670px inside the 736px reading
   column, which leaves the rule bar real space instead of collapsing it to zero.
   -------------------------------------------------------------------------------------------------- */
header.mast{ display:flex; align-items:baseline; gap:.9rem; margin:0 0 3.4rem;
  font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
header.mast .markwrap{ text-decoration:none; white-space:nowrap; }
header.mast .mark{ color:var(--ink); font-weight:700; letter-spacing:.2em; font-size:.68rem; }
/* min-width keeps the rule visible even when the row is tight — a bar that vanishes reads as a broken
   header rather than as a design that ran out of room. */
header.mast .bar{ flex:1 1 auto; min-width:1.5rem; height:1px; background:var(--rule);
  align-self:center; }
header.mast nav{ display:flex; gap:.95rem; flex-wrap:wrap; align-items:baseline; }
/* nowrap is the fix for "THE / MEMO": a label may drop to the next LINE, but must never break in the
   middle of itself. */
header.mast nav a{ color:var(--ink-3); text-decoration:none; white-space:nowrap; }
header.mast nav a:hover{ color:var(--brass); }
header.mast nav a.op{ color:var(--brass); border:1px solid var(--rule);
  padding:.4em .75em; border-radius:3px; }
header.mast nav a.op:hover{ border-color:var(--brass-dim); }
/* THE CURRENT PAGE STAYS IN THE NAV, MARKED. Both selectors, because some pages carry the class and
   some carry only the attribute. */
header.mast nav a.cur,
header.mast nav a[aria-current="page"]{ color:var(--brass); cursor:default; }
@media (max-width:640px){
  header.mast{ flex-wrap:wrap; gap:.5rem; margin-bottom:2.4rem; }
  header.mast .bar{ display:none; }
  header.mast nav{ gap:.8rem .85rem; width:100%; }
}

/* ---- footer ---- */
footer{ margin:4.5rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rule);
        font-family:"Segoe UI",system-ui,sans-serif; font-size:.85rem; color:var(--ink-3); }
footer p{ max-width:none; }

/* The visitor count, appended to the colophon line by visitors.js. It inherits the footer's colour
   and size on purpose — this is a footnote about the site, not a metric about the account, and
   nothing here should compete with the live return badge at the top of the page.

   tabular-nums is the one thing it genuinely needs: the figure grows a digit at a time and, in a
   proportional face, "1,199" and "1,200" are different widths. Every page load would nudge the line
   ending sideways.

   It carries the `hidden` attribute in the markup and only ever loses it once a real number has
   arrived, so a page whose counter is unreachable renders as though the counter were never there. */
#visitors{ font-variant-numeric:tabular-nums; cursor:help; }
#visitors[hidden]{ display:none; }

.fine{ font-size:.78rem; line-height:1.6; }