/* ============================================================================
   FOUNDRYSIDE — styles.css
   Layout and components, layered on tokens.css.

   The shape of the thing:

     - One light reading ground, with DARK PANELS where the site is either
       chrome or showing machine output: the header, the home hero, the project
       masthead, .codeblock, and the footer. The content column stays 980px
       while those panels bleed full-width — that edge-to-edge contrast is what
       makes them read as panels rather than boxes.
     - Mono carries the structural furniture (wordmark, labels, slugs, chips,
       metadata, breadcrumbs). Sans is for prose and headings only.
     - Identity is the 4px left rule, painted from the local channel scope.
     - No decorative texture: no body grid, no scanlines. The instrument
       character is structural.

   Channel scopes set --ch / --ch-text / --ch-inv (see tokens.css). Anything
   on a dark panel must use --ch-inv and the --*-inv chrome tokens: the
   light-ground aliases are not readable there. --text-muted, for instance,
   measures 1.90:1 on --ink-900.

   ReasonNote and the chip--fail / chip--unknown variants are the published
   component set with no current page using them. Kept deliberately.
   ============================================================================ */

/* ---- Element defaults ---- */
* { box-sizing: border-box; }

/* Keep in-page anchor targets (and the skip link's landing point) clear of
   the sticky header. */
html { scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

code, kbd, samp, pre { font-family: var(--font-mono); }

a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
a:active { color: var(--accent-press); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-wash); }

/* ---- Full-bleed dark panels -------------------------------------------------
   These sit INSIDE the centred column but must paint edge to edge. The
   box-shadow + clip-path pair does that without touching layout width:
   a 100vmax spread paints the band, and the inset clip trims it vertically to
   the element's own box. Deliberately not `margin-left: calc(50% - 50vw)` —
   100vw includes the scrollbar, so that approach produces horizontal overflow
   on every platform that reserves scrollbar space. */
.panel-dark {
  background: var(--surface-dark);
  box-shadow: 0 0 0 100vmax var(--surface-dark);
  clip-path: inset(0 -100vmax);
  color: var(--text-inverse);
}
/* Focus indicators need 3:1 against the ADJACENT background, and --accent
   measures about 2:1 on --ink-900. Every dark surface swaps the ring. */
.panel-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.codeblock :focus-visible { outline-color: var(--focus-ring-inv); }

/* ---- Skip link ---- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  z-index: 40;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* ---- Page scaffold ---- */
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; }

.wrap {
  max-width: var(--measure-column);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
}

main.wrap { padding-top: var(--space-10); }

/* ---- Header. Dark on every page. ---- */
.site-header {
  background: var(--surface-dark);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--nav-link-active);
  text-decoration: none;
}
.wordmark:hover, .wordmark:active { color: var(--nav-link-active); }

.site-nav { display: flex; gap: var(--space-6); }
.site-nav a {
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--nav-link);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--nav-link-active); }
.site-nav a.is-active { color: var(--nav-link-active); border-bottom-color: var(--accent-inv); }

/* ---- Mono eyebrow labels ---- */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}

/* Labels that read as capitals are transformed here, not typed in capitals:
   the markup stays sentence case so copy-paste and screen readers get words,
   not spelled-out letters. Fact keys, codeblock labels and banner titles are
   lowercase by design and stay untransformed. */
.block-label,
.hero .t-label,
.section-head .t-label,
.kv .k,
.meta-strip { text-transform: uppercase; }

/* ---- Hero (index) ---- */
.hero { margin-bottom: var(--space-10); }
.hero .t-label { display: block; margin-bottom: var(--space-4); }
.hero h1 {
  margin: 0;
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  max-width: 18ch;
}
.hero .lede {
  margin: var(--space-5) 0 0;
  font-size: var(--text-h3);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  max-width: var(--measure-prose);
}
.hero .actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* The home hero is continuous with the header: the negative top margin cancels
   main.wrap's padding so the two dark bands meet with no seam. */
.hero--dark {
  margin-top: calc(-1 * var(--space-10));
  padding: var(--space-12) 0 var(--space-16);
}
.hero--dark .t-label { color: var(--text-inverse-muted); }
.hero--dark h1 { color: var(--text-inverse); }
.hero--dark .lede { color: var(--text-inverse-muted); }

/* ---- Page titles, ledes and last sections (who, colophon) ---- */
.page-title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}
.page-lede {
  margin: var(--space-5) 0 var(--space-10);
  max-width: var(--measure-prose);
}
.masthead .page-title + .tagline { margin-top: var(--space-4); }
.section-lede {
  margin: 0 0 var(--space-5);
  max-width: var(--measure-prose);
}
.section--last { margin-bottom: var(--space-8); }
.btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* Tighter paragraph rhythm for the who-page prose column. */
.body-grid .prose--tight p { margin-bottom: var(--space-4); }
.body-grid .prose--tight p:last-of-type { margin-bottom: 0; }

/* ---- Buttons. Primary takes the local channel when scoped — via --ch-text,
   which is the channel value measured to clear 4.5:1 as a ground behind the
   inverse label. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--ch-text, var(--accent));
  background: var(--ch-text, var(--accent));
  color: var(--text-inverse);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard);
}
.btn:hover { color: var(--text-inverse); filter: brightness(0.92); }
.btn:active { color: var(--text-inverse); filter: brightness(0.85); }

.btn--secondary {
  background: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-strong);
}
.btn--secondary:hover { color: var(--text-body); background: var(--surface-sunken); filter: none; }
.btn--secondary:active { color: var(--text-body); filter: none; }

/* Buttons on a dark panel invert: light ground, ink label. */
.panel-dark .btn {
  background: var(--btn-inv-bg);
  border-color: var(--btn-inv-bg);
  color: var(--btn-inv-fg);
}
.panel-dark .btn:hover,
.panel-dark .btn:active { color: var(--btn-inv-fg); }
.panel-dark .btn--secondary {
  background: transparent;
  border-color: var(--border-component-inv);
  color: var(--text-inverse);
}
.panel-dark .btn--secondary:hover,
.panel-dark .btn--secondary:active {
  background: var(--surface-dark-raised);
  color: var(--text-inverse);
}

/* ---- Index meta strip ---- */
.meta-strip {
  margin-bottom: var(--space-10);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-4) 0;
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-faint);
}
/* The strip sits directly under the dark hero; it needs its own top spacing
   because .hero--dark supplies the band's bottom padding, not a margin. */
.hero--dark + .meta-strip { margin-top: var(--space-10); border-top: none; }

/* ---- Section heads ---- */
.section { margin-bottom: var(--space-12); }
.section-head {
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-head h2 { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-semibold); }
.section-blurb {
  margin: 0 0 var(--space-6);
  font-size: var(--text-small);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  max-width: var(--measure-prose);
}

/* ---- Project rows (index). The whole row is the link and identity is the
   4px channel rule on the left edge. ---- */
.rows { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.rows::after { content: ""; border-top: 1px solid var(--border-hairline); }

.project-row {
  border-top: 1px solid var(--border-hairline);
  border-left: var(--rule-state) solid var(--ch, var(--accent));
  padding: var(--space-4) var(--space-5);
  display: grid;
  /* The status column is sized to the longest snapshot label on ONE line
     ("HLD compiled · in recovery", 208px) plus headroom, so every chip is the
     same box. See the .status rules below. */
  grid-template-columns: 170px 1.2fr 1fr 216px;
  gap: var(--space-5);
  align-items: baseline;
  color: var(--text-body);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.project-row:hover { background: var(--surface-raised); color: var(--text-body); }
.project-row:active { color: var(--text-body); }

.project-row .ident { display: flex; flex-direction: column; gap: 3px; }
.project-row .slug {
  font-family: var(--font-mono);
  font-size: var(--text-body-size);
  color: var(--ch-text, var(--accent));
}
.project-row .kicker { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint); }

.project-row .tagline { font-size: var(--text-small); line-height: var(--leading-snug); }
.project-row .line { font-size: var(--text-micro); color: var(--text-muted); line-height: var(--leading-snug); }

/* Status column: every chip is the same box. Ragged right-aligned chips of six
   different widths and two different heights read as noise in a column that is
   meant to be scanned down. Stretching them to the column width and holding
   them to one line makes the status column an aligned readout — which is also
   why the labels sit left, flush with each other, rather than centred.

   The cost is deliberate: a snapshot label longer than the column will overflow
   visibly rather than quietly wrapping. That is the preferred failure here —
   the fix is a shorter label or a wider column, and both should be a decision
   rather than something the layout absorbs silently. */
.project-row .status { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.project-row .chip {
  width: 100%;
  line-height: 1;
  padding-top: 6px;
  padding-bottom: 6px;
  justify-content: flex-start;
}
.project-row .lang { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint); text-align: left; }

/* ---- Status chip. The only warm hues on the site. ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-left: var(--rule-state) solid var(--state-unknown);
  border-radius: var(--radius-sm);
  padding: 5px 8px 5px 7px;
  color: var(--state-unknown);
  white-space: nowrap;
}
.chip--ok      { color: var(--state-ok);      border-left-color: var(--state-ok); }
.chip--warn    { color: var(--state-warn);    border-left-color: var(--state-warn); }
.chip--fail    { color: var(--state-fail);    border-left-color: var(--state-fail); }
.chip--unknown { color: var(--state-unknown); border-left-color: var(--state-unknown); }

/* Inside a dark panel the chip switches to the inverse state set. Without
   this the masthead chip renders a light-ground value on ink-900. */
.panel-dark .chip {
  background: var(--surface-dark-raised);
  border-color: var(--border-hairline-inv);
  border-left-color: var(--state-unknown-inv);
  color: var(--state-unknown-inv);
}
.panel-dark .chip--ok      { color: var(--state-ok-inv);      border-left-color: var(--state-ok-inv); }
.panel-dark .chip--warn    { color: var(--state-warn-inv);    border-left-color: var(--state-warn-inv); }
.panel-dark .chip--fail    { color: var(--state-fail-inv);    border-left-color: var(--state-fail-inv); }
.panel-dark .chip--unknown { color: var(--state-unknown-inv); border-left-color: var(--state-unknown-inv); }

/* ---- Tag ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  white-space: nowrap;
}
.tag--channel { color: var(--ch-text, var(--accent)); }
.tag--channel::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ch, var(--accent));
  border-radius: 1px;
}
.panel-dark .tag {
  background: var(--surface-dark-raised);
  border-color: var(--border-hairline-inv);
  color: var(--text-inverse-muted);
}
.panel-dark .tag--channel { color: var(--ch-inv, var(--accent-inv)); }
.panel-dark .tag--channel::before { background: var(--ch-inv, var(--accent-inv)); }

/* ---- Key/value grid ("What this page does not show", throughlines) ---- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.kv {
  border-left: var(--rule-state) solid var(--ch, var(--ink-500));
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}
.kv .k { display: block; margin-bottom: 6px; }
.kv .v { font-size: var(--text-small); line-height: var(--leading-snug); }

/* ---- Breadcrumb ---- */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-faint);
  margin-bottom: var(--space-6);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-body); }
.crumbs [aria-current="page"] { color: var(--text-body); }

/* ---- Project / page masthead. A dark panel: the page's identity block. ---- */
.masthead {
  border-left: var(--rule-state) solid var(--ch-inv, var(--accent-inv));
  padding: var(--space-8) 0 var(--space-8) var(--space-5);
  margin-bottom: var(--space-10);
}
.masthead .title-row { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.masthead h1.slug {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  color: var(--ch-inv, var(--accent-inv));
}
.masthead .page-title { color: var(--text-inverse); }
.masthead .block-label { color: var(--text-inverse-muted); }
.masthead .tagline {
  margin: var(--space-3) 0 0;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  max-width: var(--measure-prose);
  color: var(--text-inverse);
}
.masthead .line {
  margin: var(--space-3) 0 0;
  font-size: var(--text-small);
  color: var(--text-inverse-muted);
  line-height: var(--leading-snug);
  max-width: var(--measure-prose);
}
.masthead .tags { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.masthead a { color: var(--accent-inv); }
.masthead a:hover { color: var(--text-inverse); }

/* ---- Two-column body: prose + sticky facts aside ---- */
.body-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: var(--space-8);
  align-items: start;
}
.body-grid .prose p { margin: 0 0 var(--space-8); line-height: var(--leading-body); }
.body-grid .prose .code-section,
.body-grid .prose .banner { margin-bottom: var(--space-8); }
.block-label { display: block; margin-bottom: var(--space-3); }

.facts { position: sticky; top: 76px; }
.facts .fact-list { border-top: 1px solid var(--border-hairline); }
.facts .fact {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.facts .fact .v { font-size: var(--text-small); line-height: var(--leading-snug); }
.facts .actions { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.facts .actions .btn { width: 100%; }
.facts .channel-note {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-faint);
  line-height: var(--leading-snug);
}

/* ---- Roster (weft page) ---- */
.roster { display: flex; flex-direction: column; }
.roster::after { content: ""; border-top: 1px solid var(--border-hairline); }
.roster .member {
  border-top: 1px solid var(--border-hairline);
  border-left: var(--rule-state) solid var(--ch, var(--accent));
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.roster .ident { display: flex; flex-direction: column; gap: 3px; }
.roster .key { font-family: var(--font-mono); font-size: var(--text-small); color: var(--ch-text, var(--accent)); }
.roster .meta { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint); }
.roster .domain { font-size: var(--text-small); line-height: var(--leading-snug); }
.roster-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-micro);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  max-width: var(--measure-prose);
}

/* ---- Code block. A dark readout: it contains machine output, which is what
   earns it the dark ground. ---- */
.codeblock {
  background: var(--surface-dark);
  border: var(--border-width) solid var(--border-hairline-inv);
  border-left: var(--rule-state) solid var(--ch-inv, var(--accent-inv));
  border-radius: var(--radius-md);
  overflow: hidden;
}
.codeblock .label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--text-inverse-muted);
  background: var(--surface-dark-raised);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline-inv);
}
.codeblock pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--text-inverse);
}

/* ---- Banner ---- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-left: var(--rule-state) solid var(--state-unknown);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.banner .banner-body { flex: 1; min-width: 0; }
.banner .banner-title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--state-unknown);
  margin-bottom: var(--space-2);
}
.banner .banner-text { font-size: var(--text-small); color: var(--text-body); line-height: var(--leading-snug); }

/* ---- Reason note. The house envelope: cause · reason_class · fix. ---- */
.reason-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-hairline);
  border-left: var(--rule-state) solid var(--state-unknown);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.reason-note .row { display: flex; gap: var(--space-4); align-items: baseline; }
.reason-note .k {
  flex: 0 0 92px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}
.reason-note .v { font-size: var(--text-small); color: var(--text-body); line-height: var(--leading-snug); }

/* ---- Simple ruled lists (practice, lineage, palette, sources) ---- */
.ruled { border-top: 1px solid var(--border-hairline); }
.ruled > * { border-bottom: 1px solid var(--border-hairline); padding: var(--space-3) 0; }

.practice-item { font-size: var(--text-small); line-height: var(--leading-snug); }

.lineage-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-5); align-items: baseline; }
.lineage-row .k { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-body); }
.lineage-row .v { font-size: var(--text-small); color: var(--text-muted); line-height: var(--leading-snug); }

.palette-row {
  display: grid;
  grid-template-columns: 34px 92px 108px 1fr;
  gap: var(--space-4);
  align-items: center;
}
.palette-row .swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--ch, var(--accent));
}
.palette-row .name { font-family: var(--font-mono); font-size: var(--text-small); }
.palette-row .hex { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-faint); }
.palette-row .note { font-size: var(--text-small); color: var(--text-muted); line-height: var(--leading-snug); }

.source-row { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: baseline; }
.source-row .k { font-family: var(--font-mono); font-size: var(--text-micro); word-break: break-all; }
.source-row .v { font-size: var(--text-small); color: var(--text-muted); line-height: var(--leading-snug); }

/* ---- Type specimens (colophon) ---- */
.specimen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.specimen-sans { font-size: 32px; font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: var(--tracking-display); }
.specimen-mono { font-family: var(--font-mono); font-size: 18px; line-height: 1.5; }

/* ---- Footer. Dark, closing the page the way the header opens it. ---- */
.site-footer { margin-top: var(--space-24); background: var(--surface-dark); }
.site-footer .wrap {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-inverse-muted);
}
/* The colophon lives here rather than in the nav; it reads as footer matter, not a section. */
.site-footer .wrap a { color: var(--text-inverse-muted); text-decoration: none; }
.site-footer .wrap a:hover { color: var(--text-inverse); }

/* ---- Small screens. The design is desk-first; these collapse the fixed
   grids without changing what anything is. ---- */
@media (max-width: 860px) {
  .body-grid { grid-template-columns: 1fr; }
  .facts { position: static; }
  .kv-grid, .specimen-grid { grid-template-columns: 1fr; }
  .project-row { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Single column: the chip shrinks back to its content, since there is no
     status column left for it to align to. */
  .project-row .status { flex-direction: row; align-items: baseline; }
  .project-row .chip { width: auto; }
}

@media (max-width: 720px) {
  /* .hero h1 needs no override here — --text-display is fluid (clamp). */
  .hero--dark { padding: var(--space-10) 0 var(--space-12); }
  .roster .member { grid-template-columns: 1fr; gap: var(--space-2); }
  .lineage-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .source-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .palette-row { grid-template-columns: 34px 1fr; grid-auto-rows: auto; }
  .palette-row .hex, .palette-row .note { grid-column: 2; }
  .site-nav { gap: var(--space-4); }
}