/* The masthead — one component, one file, every page.
   Extracted 2026-08-12 on Daniel's instruction ("always the same bigger width"),
   and because DESIGN.md §5 requires a shared file once a fifth CSS surface
   exists; the masthead was living in five. Colours are literals on purpose:
   the palette is constant across the site and the riding pages carry it under
   document-flavoured variable names, so variables here would resolve
   differently per surface.

   Behaviour: sticky at the top, transparent and borderless at rest; once the
   page scrolls it takes the ground colour and a hairline. The transition is
   colour only — rule 6, nothing moves.

   Width: 1180px, the same on every page, independent of the page's own
   content measure. This supersedes the Aug 12 "logo flush with content edge"
   rule on pages whose measure is narrower — Daniel's later instruction wins. */
.masthead{position:sticky;top:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease}
.masthead.scrolled{background:rgba(10,10,11,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:#232326}
.masthead .mhwrap{max-width:1180px;margin:0 auto;padding:1.05rem 2rem;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.masthead a.mhome{display:flex;align-items:center;gap:.65rem;
  text-decoration:none;flex:none}
.masthead .mhflame{height:1.45rem;width:auto;flex:none;
  filter:drop-shadow(0 0 12px rgba(255,90,45,.22))}
.masthead .mhwm{font-family:var(--sans,'Satoshi',system-ui,sans-serif);
  font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:#ece7dd}
.masthead .mhwm .mk2{color:#807b72}
/* Nav links are language a human wrote — sans, Title case. The uppercase mono
   treatment was retired 2026-08-12 ("Title case not TITLE and Satoshi font"). */
.masthead nav{margin-left:auto;display:flex;gap:1.35rem;flex-wrap:wrap;
  row-gap:.35rem}
.masthead nav a{font-family:var(--sans,'Satoshi',system-ui,sans-serif);
  font-size:.88rem;font-weight:500;letter-spacing:-.015em;color:#807b72;
  text-decoration:none;padding-bottom:.15rem;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.masthead nav a:hover,.masthead nav a:focus-visible{color:#ece7dd;
  border-bottom-color:#ffcf8a}
.masthead nav a[aria-current="page"]{color:#ece7dd}
@media(max-width:620px){.masthead .mhwrap{padding:.9rem 1.4rem}}
/* Mobile: the nav collapses into a burger (2026-08-24, Daniel: "collapse into
   a hamburger on mobile, which opens a full screen overlay, centred vertically,
   a column of options"). Button and overlay are injected by masthead.js so the
   1,300+ pages carrying this masthead needed no HTML edits; without JS the nav
   stays inline as before, which is why every rule is scoped to html.mhjs.
   The overlay fades — rule 6, reveal only, nothing travels. The icon swap to ✕
   is instant, no transition, for the same reason. */
.mhburger{display:none}
html.mhjs .mhburger{background:none;border:0;cursor:pointer;padding:.55rem .35rem;
  margin-left:auto;flex-direction:column;justify-content:center;gap:5px;
  -webkit-tap-highlight-color:transparent}
html.mhjs .mhburger span{display:block;width:20px;height:1.5px;background:#ece7dd}
html.mhjs .mhburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
html.mhjs .mhburger[aria-expanded="true"] span:nth-child(2){opacity:0}
html.mhjs .mhburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mhoverlay{position:fixed;inset:0;z-index:55;background:rgba(10,10,11,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease}
/* This line is load-bearing. The rule above sets display:flex unconditionally,
   which outranks the UA stylesheet's [hidden]{display:none} — so from 4a7347a
   (2026-08-24) until 2026-09-18 the closed overlay stayed laid out at inset:0,
   z-index:55, pointer-events:auto, invisible at opacity:0, and swallowed every
   click on every page of the site at every width. Found by hit-testing
   production, not by looking at it: it renders correctly and is unusable.
   Rendering is not verification; looking is not verification; clicking is. */
.mhoverlay[hidden]{display:none}
.mhoverlay.open{opacity:1}
.mhoverlay nav{display:flex;flex-direction:column;align-items:center;gap:1.55rem;
  padding-bottom:2.5rem}
.mhoverlay nav a{font-family:var(--sans,'Satoshi',system-ui,sans-serif);
  font-size:1.45rem;font-weight:500;letter-spacing:-.025em;color:#b9b3a8;
  text-decoration:none}
.mhoverlay nav a:hover,.mhoverlay nav a:focus-visible{color:#ece7dd}
.mhoverlay nav a[aria-current="page"]{color:#ffcf8a}
@media(max-width:620px){
  html.mhjs .masthead nav{display:none}
  html.mhjs .mhburger{display:flex}
}
/* The footer index — every page, on every page.
   Added 2026-09-18 when the masthead was cut from eleven links to five
   ("the nav needs to be way simplified"). Six pages left the masthead that
   day; without this they would have been reachable only from the root, which
   is how pages quietly die. The masthead is for the subjects the site counts;
   this is the full table of contents, and it sits where a table of contents
   belongs. The current page is omitted rather than disabled — a link to here
   is not navigation. */
.allpages{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;
  padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid #232326}
.allpages a{font-family:var(--sans,'Satoshi',system-ui,sans-serif);
  font-size:.82rem;letter-spacing:-.01em;color:#807b72;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.allpages a:hover,.allpages a:focus-visible{color:#ece7dd;border-bottom-color:#ffcf8a}
@media print{.allpages{display:none}}

/* Print keeps the identity, loses the chrome. */
@media print{.masthead{position:static;background:#fff;border-bottom:1px solid #bbb}
  .masthead .mhwm{color:#000}.masthead .mhwm .mk2{color:#555}
  .masthead nav{display:none}.masthead .mhflame{filter:none}}