/* ============================================================
   LAYOUT — nav, footer, page shell. Colophon-set footer, a
   single hairline-ruled nav (flat on paper, no drop shadow).
   ============================================================ */

.gh-main { display: block; }
.gh-main > * { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
/* the hero bleeds full-width; it manages its own inner wrap */
.gh-main > .hero { max-width: none; padding-inline: 0; }

/* ---- site nav ---- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  border-bottom: var(--line) solid var(--rule-strong);
  background: var(--surface-page);
}
.site-nav__brand {
  font-family: var(--font-serif);
  font-weight: var(--wt-semi);
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-decoration: none;
}
.site-nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.site-nav__links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.site-nav__link,
.site-nav__search,
.site-nav__toggle {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: var(--line) solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color var(--dur) var(--step-ease);
}
.site-nav__link:hover, .site-nav__search:hover { color: var(--text-strong); border-bottom-color: var(--ink); }
.site-nav__link.is-current, .site-nav__link[aria-current] { color: var(--text-strong); border-bottom-color: var(--ink); }
.site-nav__tools { display: flex; align-items: center; gap: 1.6rem; }
.site-nav__toggle { display: none; border-bottom-color: transparent; }

/* ---- footer: a printed colophon, not a sitemap ---- */
.site-footer {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: var(--space-xl);
  max-width: var(--content-max);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  border-top: var(--line) solid var(--rule-strong);
}
.site-footer__brand { font-family: var(--font-serif); font-weight: var(--wt-semi); font-size: var(--step-2); line-height: 1; color: var(--text-strong); }
.site-footer__note { font-family: var(--font-serif); font-style: italic; font-size: var(--step-0); color: var(--text-muted); margin-top: 0.3rem; }
.site-footer__copy { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--step--2); color: var(--text-faint); margin-top: var(--space-md); }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-lg); }
.site-footer__nav { display: flex; flex-direction: column; gap: 0.7rem; }
.site-footer__heading { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--step--2); font-weight: var(--wt-med); color: var(--text-faint); padding-bottom: 0.4rem; border-bottom: var(--hair) solid var(--rule); }
.site-footer__nav a { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--step--1); color: var(--text-muted); text-decoration: none; }
.site-footer__nav a:hover { color: var(--accent-text); }

/* ---- the pigment line: colophon furniture, not a widget ----
   One hairline-ruled line set across the foot of both columns, in the footer's
   own mono register at the copyright's size. Display is gated on BOTH .js and
   the data-wired stamp theme.js sets once the buttons answer — no-JS (or a
   theme.js that never arrived) prints nothing rather than five dead controls.
   The current set is marked in INK — the pressed underline + medium weight the
   nav already uses for the current link — not in sanguine: the accent in this
   view is already spent on the footer links' hover, which these buttons share
   so the line reads as the same furniture.
   The UNMARKED sets sit at --text-body, a register above the --text-muted the
   footer's own links use. That started as a floor repair: muted was ink-60,
   which reads 4.06 / 3.79 / 3.54 / 3.66 / 5.60:1 against each scheme's paper
   at --step--2 (bistre, iron gall, sanguine chalk, verdigris, aquatint night)
   — under the 4.5:1 small-text floor on four of the five, and these are
   controls, not labels. The 2026-08-14 round lifted muted itself to ink-80
   (7.54 / 6.82 / 6.11 / 6.49 / 8.94:1), so the repair is no longer load-
   bearing; --text-body stays because the reason it survives is now the better
   one — a control reads one step firmer than the labels beside it, and
   ink-90's 10.32 / 9.27 / 8.11 / 8.77 / 11.01:1 says so without the picker
   having to shout. That narrows the tonal step to the current set, so the mark
   leans on what was always carrying it: the ink rule under the word and the
   heavier stroke — binary, not tonal. */
.site-footer__pigment { display: none; grid-column: 1 / -1; }
.js .site-footer__pigment[data-wired] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--hair) solid var(--rule);
}
.site-footer__pigment-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--step--2);
  color: var(--text-faint);
}
.site-footer__pigment button {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--step--2);
  color: var(--text-body);
  background: none;
  border: 0;
  border-bottom: var(--line) solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color var(--dur) var(--step-ease);
}
.site-footer__pigment button:hover { color: var(--accent-text); }
.site-footer__pigment button[aria-pressed="true"] {
  color: var(--text-strong);
  /* --wt-med, not heavier: IBM Plex Mono ships 400 and 500 only (tokens/
     fonts.css), and asking for 600 buys a synthesised faux bold, not a face. */
  font-weight: var(--wt-med);
  border-bottom-color: var(--ink);
}

@media (max-width: 44rem) {
  .site-nav { flex-wrap: wrap; }
  .site-nav__toggle { display: inline-block; }
  .site-nav__menu { display: none; flex-direction: column; align-items: flex-start; gap: var(--space-sm); width: 100%; }
  .js .site-nav__menu[data-open] { display: flex; }
  .no-js .site-nav__menu { display: flex; }
  .site-footer { grid-template-columns: 1fr; gap: var(--space-lg); }
}