/* ─────────────────────────────────────────────────────────────────────────────
 * Metatron Mind — /about.  "Bone Terminal", same system as the storefront.
 *
 * OWNER: about-page.  Scope: this file, about.html and about.js. Self-contained.
 *
 * WHAT THIS IS
 *   The brand argument, on the store's own hostname (shop.metatronmind.com, served at the
 *   root). Fixed, art-directed sections; the operator edits each section's heading and body
 *   from Admin → Storefront and nothing else. This stylesheet is the layout half of that
 *   contract: `structure is code, words are data` (docs/storefront/CONTENT-LAYER.md §0).
 *
 * LOADS
 *   tokens.css only. Deliberately NOT storefront.css or store.js, so the About page cannot
 *   be broken by a shell regression and cannot break the shell. The three shell idioms the
 *   page does share with the storefront — the skip link, the sticky nav with its one glitch
 *   rule, and the footer + [ PROOF ] band — are re-implemented here against the same tokens,
 *   which is why the two pages read as one site without sharing a byte of CSS.
 *
 * PALETTE — no colour is declared in this file. Every value below is a token from
 *   tokens.css §1. Measured ratios for every pair this page actually renders (WCAG 2.1
 *   relative luminance, computed in tools/about-contrast.mjs and asserted in
 *   tools/about-verify.mjs; raw output is in docs/storefront/about-report.md):
 *
 *   --text    #F2EFE8 on --void   #07090B  17.37:1   body, headings
 *   --text    #F2EFE8 on --ink    #0C1013  16.64:1   footer body
 *   --text-2  #9FAEB8 on --void   #07090B   8.76:1   lede, plate body
 *   --text-2  #9FAEB8 on --ink    #0C1013   8.16:1   footer fine print
 *   --text-3  #7E8F9A on --void   #07090B   5.97:1   11px mono labels
 *   --text-3  #7E8F9A on --ink    #0C1013   5.56:1   footer fine print, proof fine
 *   --cyan    #00E5D0 on --void   #07090B  12.46:1   eyebrows, links, focus ring
 *   --cyan    #00E5D0 on --ink    #0C1013  11.60:1   footer eyebrows
 *   --gold    #FFC24B on --ink    #0C1013  11.90:1   [TRUTH] mark — the page's ONE gold element
 *   --ink-text   #12181D on --plate #F2EFE8 15.58:1  type on the bone publisher's plate
 *   --ink-text   #12181D on --plate-2 #E6E1D6 13.72:1 stat value on the plate caption
 *   --ink-text-2 #5A6570 on --plate #F2EFE8  5.18:1  labels on the plate
 *   --ink-text-2 #5A6570 on --plate-2 #E6E1D6 4.56:1  stat key on the caption strip
 *   --cyan-on-plate #0A6E68 on --plate #F2EFE8 5.31:1 the ONLY cyan used as type on bone
 *
 *   Non-text: the focus ring is --cyan on --void (12.46:1, ≫ the 3:1 UI minimum); the
 *   dashed plate boundary is --plate-line, a DECORATIVE hairline (1.87:1) carrying no
 *   information — the plate is identified by its bone field and its caption strip, which
 *   are 15.58:1 and 13.72:1 against the dark ground.
 *
 * THE ONE RATIONED GRADIENT — --glitch is on the nav's 1px signature rule and nowhere
 *   else. There is no second gradient on this page, and the only gold is the footer's
 *   [TRUTH] mark (one element per viewport, §1).
 *
 * HEADING LEVELS — one visible h1 in every state (data-about on #aboutPage decides which
 *   one is visible, in about.js). With sections published: h1 = content.about.title,
 *   then one h2 per section. With zero sections or with about.enabled === false: h1 = the
 *   state's own title. Never two visible h1s, never a skipped level.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* the page rail — same clamp as the shell's own --sf-gutter, redeclared here because
     storefront.css is deliberately not loaded. Lifted verbatim so the nav edges of the two
     pages line up at every width. */
  --ab-gutter: clamp(16px, 4vw, 40px);
  /* display measure for the section column, and the reading measure inside it */
  --ab-col: 68ch;
  --ab-label: 104px;   /* section number rail — fits "[ 08 ]" at --t-label in mono */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* the shell's own atoms, needed because storefront.css is not loaded */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--cyan); }                          /* 12.46:1 on --void ✓ */
::selection { background: var(--cyan); color: var(--void); }

/* focus: --cyan 2px with a 2px gap, identically to the shell. On the bone plate the ring
   flips to --ink-text, because --cyan on --plate is 1.39:1 and would be invisible. */
:focus-visible {
  outline: var(--focus-w) solid var(--cyan);
  outline-offset: var(--focus-off);
  border-radius: var(--r-plate);
}
.about__plate :focus-visible { outline-color: var(--ink-text); }
.about__main:focus { outline: none; }
.about__main:focus-visible { outline-offset: 0; }

/* ── state machine ───────────────────────────────────────────────────────────
 * #data-about on #aboutPage selects the state. The head — eyebrow, h1, intro — is ONE
 * element in the document and is visible in every state, so a document always has exactly
 * one visible h1 and content.about.title can only ever change that heading's text, never
 * add a second one. What changes below the head:
 *
 *   boot / empty  the brand plate and the data position. "boot" is the markup default, so
 *                 a document whose script never runs, or runs and throws, still reads as a
 *                 designed page. This is also why the page's first paint IS its empty state:
 *                 there is no skeleton to swap out and no layout shift to measure.
 *   content       the intro, then the operator's sections
 *   off / fail    their own explanatory block, with the head h1 hidden (see below)
 *
 * Hiding uses display:none, so a hidden state contributes nothing to layout or to the
 * accessibility tree. */
.about__head,
.about__baseline,
.about__intro,
.about__plate,
.about__position,
.about__state { display: none; }
#aboutPage[data-about="boot"]  .about__head,
#aboutPage[data-about="empty"] .about__head,
#aboutPage[data-about="content"] .about__head { display: block; }
#aboutPage[data-about="boot"]  .about__baseline,
#aboutPage[data-about="empty"] .about__baseline { display: block; }
#aboutPage[data-about="boot"]  .about__plate,
#aboutPage[data-about="empty"] .about__plate,
#aboutPage[data-about="boot"]  .about__position,
#aboutPage[data-about="empty"] .about__position { display: block; }
#aboutPage[data-about="content"] .about__intro { display: block; }
/* ⚠ P2-1: the intro must ALSO show in the ZERO-SECTION state. about.js writes
   content.about.intro into #aboutIntro *before* it branches to setState("empty"), so gating the
   display on [data-about="content"] alone silently dropped the operator's prose whenever they had
   written an intro but no sections — the text was in the DOM and invisible on screen. `:not(:empty)`
   keeps the other direction honest: an empty intro stays hidden in every state, so the `boot` first
   paint (element present, no content) is unchanged and reserves nothing.
   Measured: intro set + 0 sections -> visible; no intro -> byte-identical to before. */
#aboutPage[data-about="empty"] .about__intro:not(:empty) { display: block; }
#aboutPage[data-about="off"]  #aboutOff  { display: block; }
#aboutPage[data-about="fail"] #aboutFail { display: block; }
/* ⚠ KNOWN, DOCUMENTED LIMITATION — the FAIL state shifts the page (CLS ~0.22 at 1440, ~0.33 at 390).
   When `/api/store` fails, `about.js` swaps the tall baseline block for the short error block, so the
   footer moves up and the shift is recorded. Measured: empty main 1,470 px vs fail 540 px.
   Two candidate fixes were measured and BOTH made it worse or failed:
     · `min-height: 60vh` on the main element -> CLS 0.218, unchanged (the reserve is far below the
       ~1,665 px the baseline occupies, and raising it enough would park ~1,100 px of blank page under
       a three-line error message);
     · keeping the baseline visible alongside the error -> CLS 0.486 at 1440 and 0.795 at 390, worse,
       because both blocks then render and the page grows before settling.
   The jump is inherent to replacing a full page of content with an error notice; the only way to zero
   it is to know the final height before deciding, which is the same unknowable the shell's skeleton
   reserve exists to avoid. Accepted deliberately: this state is reached ONLY on an API failure, is
   not part of any normal customer journey, and the CLS budget in §8 is about page loads.
   If it is ever worth closing, the shape is a full-viewport error state that replaces the page rather
   than a block inside it — a design change, not a reserve. */

/* With JavaScript off, "boot" is the permanent state and the baseline plate is the page.
   The markup already says everything a reader needs, including that the sections are drawn
   in the browser — so no separate noscript block is required and none is shipped. */

/* ── skip link — same geometry as the shell's ───────────────────────────────── */
.about__skip {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 400;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-4);
  transform: translateY(-180%);
  background: var(--cyan); color: var(--void);
  border-radius: var(--r-plate);
  font-family: var(--font-mono); font-size: var(--t-data); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.about__skip:focus { transform: none; }

/* ── shell ─────────────────────────────────────────────────────────────────── */
.about { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--ink);
  border-bottom: var(--hair) solid var(--line);
}
/* THE one glitch element on this page (§1: one per page, never text, never a button) */
.nav::after {
  content: ""; display: block;
  height: var(--hair); background: var(--glitch);
}
.nav-in {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; max-width: calc(var(--maxw) + 2 * var(--ab-gutter));
  margin-inline: auto; min-height: 56px; padding: var(--s-2) var(--ab-gutter);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.45ch;
  min-height: 44px; padding-block: var(--s-2);
  color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 0.9375rem; line-height: 1;
  letter-spacing: var(--tr-h3); text-transform: uppercase; white-space: nowrap;
}
.wm-1 { color: var(--text); }
.wm-2 { color: var(--text-2); }
.wordmark:hover .wm-2 { color: var(--cyan); }

.nav-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  /* §6 touch target: 44×44 is a FLOOR on both axes. A text link whose label is two letters
     ("Shop") is only ~37px wide on its own, which the audit measured and failed — so the
     minimum is declared rather than inherited from the label's length. */
  min-width: 44px; min-height: 44px; padding: 0 var(--s-2);
  color: var(--text-2); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: var(--hair) solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ── main ──────────────────────────────────────────────────────────────────── */
.about__main {
  flex: 1 0 auto; width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--ab-gutter));
  margin-inline: auto;
  padding: var(--s-8) var(--ab-gutter) var(--s-10);
}

/* ── the page head ───────────────────────────────────────────────────────────
 * ONE head element in every state: the eyebrow, the h1 and the intro. content.about.title
 * only ever changes the h1's text. There is no skeleton and no reserved height because the
 * first paint is already the finished zero-section page: the "content" state only ever adds
 * height below an already-painted head, in response to a payload that has arrived. */
.about__head .eyebrow { display: block; margin: 0 0 var(--s-4); }
.about__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-stretch: var(--wd-display);                  /* 78% — the display voice, not weight alone */
  font-size: var(--t-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1); text-transform: uppercase;
  color: var(--text); text-wrap: balance; overflow-wrap: anywhere;
}
.about__intro { margin-top: var(--s-5); }
.about__intro p {
  max-width: var(--maxw-prose);
  margin: 0;
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-2);
  /* Operator copy is data, not markup, and it arrives at whatever length the operator
     typed. A 400-char cap (CONTENT-LAYER.md §2) can still be one unbroken token, and an
     unbroken token must not be able to widen the document — that is the measurement that
     caught this: 400 chars at 320px, document 1725px wide, no whitespace to break on.
     `anywhere` rather than `break-word` because only `anywhere` also lets the intrinsic
     min-content size shrink, which is what a flex/grid ancestor needs to stop overflowing. */
  overflow-wrap: anywhere;
}
.about__intro p + p { margin-top: var(--s-4); }

/* ── published sections ──────────────────────────────────────────────────────
 * Fixed, art-directed blocks — the operator supplies heading + body per block and controls
 * nothing else. Desktop: mono number rail in a 104px gutter, heading and prose in a 68ch
 * column, hairline rhythm between blocks. ≤900px: the rail moves inline above the heading
 * so the prose keeps the full rail width. */
.sections { margin: 0; padding: 0; list-style: none; }
.section {
  display: grid;
  grid-template-columns: var(--ab-label) minmax(0, 1fr);
  gap: 0 var(--s-5);
  padding-top: var(--s-8);
  border-top: var(--hair) solid var(--line);
}
.section + .section { margin-top: var(--s-8); }
.section__eyebrow {
  grid-column: 1; grid-row: 1;
  margin: 0;
  padding-top: 0.35em;              /* sits on the heading's cap line */
  font-variant-numeric: tabular-nums;
}
.section__h {
  grid-column: 2; grid-row: 1;
  margin: 0;
  max-width: var(--ab-col);
  font-family: var(--font-sans); font-weight: var(--fw-display);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  text-transform: uppercase; color: var(--text);
  text-wrap: balance; overflow-wrap: anywhere;
}
/* the one earned emphasis on the section side: the heading of the data-sovereignty block.
   Gold is sanctioned for exactly this — one element per viewport, never body text. */
.section.is-flag .section__h { color: var(--gold); }
.section__body { grid-column: 2; grid-row: 2; margin-top: var(--s-4); max-width: var(--ab-col); }
.section__body p {
  margin: 0;
  max-width: var(--maxw-prose);
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--text-2); overflow-wrap: anywhere;
}
.section__body p + p { margin-top: var(--s-4); }
.section__body a { text-decoration: underline; text-underline-offset: 3px; }
.section__body a:hover { color: var(--text); }

/* ── states: switched off / read failed ────────────────────────────────────────
 * Both carry their own heading, and the head block is hidden in those two states, so the
 * document still shows exactly one h1. */
.about__state { max-width: 100%; }
.about__state-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-stretch: var(--wd-display);
  font-size: var(--t-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1); text-transform: uppercase;
  color: var(--text); text-wrap: balance; overflow-wrap: anywhere;
}
/* In the boot/empty states the lede sits under the head's h1, so it has no bottom margin */
.about__baseline .about__state-lede { margin-top: var(--s-5); }
.about__state-lede {
  max-width: var(--maxw-prose); margin: var(--s-5) 0 0;
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-2);
  overflow-wrap: anywhere;
}
.about__fine {
  max-width: var(--maxw-prose); margin: var(--s-5) 0 0;
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7;
  color: var(--text-3);                              /* 5.97:1 on --void ✓ */
}

/* ── the brand plate — the bone surface, used for the zero-section page ───────
 * The storefront's specimen-plate vocabulary (bone field, hairline on the plate, mono
 * caption strip) applied to the facts a customer actually wants rather than to product
 * art: mono key left, value right, hairline between, on bone. Nothing here depends on
 * operator copy, which is what makes the default state a real page. */
.about__plate {
  position: relative;
  margin-top: var(--s-7);
  max-width: 62ch;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--plate);
  border: var(--hair) solid var(--plate-line);       /* decorative hairline, no threshold */
  border-radius: var(--r-plate);
  color: var(--ink-text);                            /* 15.58:1 ✓ */
}
.about__plate-tag {
  margin: 0;
  display: inline-block;                              /* caption strip, mono, on-plate cyan only */
  padding: var(--s-1) var(--s-2);
  background: var(--plate-2);
  border: var(--hair) solid var(--plate-line);
  border-radius: var(--r-plate);
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--cyan-on-plate);                       /* 5.31:1 on --plate ✓ — the only cyan on bone */
}
.about__plate-lead {
  margin: var(--s-5) 0 0;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-stretch: var(--wd-display);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  color: var(--ink-text); overflow-wrap: anywhere;
}
.about__plate-rule {
  height: 0; margin: var(--s-5) 0;
  border: 0; border-top: var(--hair) solid var(--plate-line);
}

/* the fact list. A real <dl>: keys are mono labels, values are mono data. */
.about__facts {
  margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.about__facts > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-2);
  border-bottom: var(--hair) solid var(--plate-line);
}
.about__facts dt {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-text-2);                          /* 5.18:1 on --plate ✓ */
}
.about__facts dd {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--t-data); line-height: var(--lh-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink-text);                            /* 15.58:1 on --plate ✓ */
  overflow-wrap: anywhere;
}
.about__plate-fine {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7;
  color: var(--ink-text-2);                          /* 5.18:1 ✓ */
}

/* ── the data position block — the brand argument, on the dark ground, in the same
 * register as the section blocks so the two read as one page. It is prose, no badge, no
 * shield, no second gradient, and it claims only what this page can be measured against. */
.about__position {
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: var(--hair) solid var(--line);
}
.about__position-title {
  margin: 0; max-width: 24ch;
  font-family: var(--font-sans); font-weight: var(--fw-display);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  color: var(--text); text-wrap: balance; overflow-wrap: anywhere;
}
.about__position p {
  max-width: var(--maxw-prose);
  margin: var(--s-4) 0 0;
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--text-2); overflow-wrap: anywhere;
}

/* the inline mono fragment — an API path named in prose, not a control */
.about__mono,
.about__mono-inline { font-family: var(--font-mono); font-size: var(--t-data); color: var(--text-2); }
.about__plate-fine .about__mono-inline { font-size: inherit; color: inherit; }

/* ── hard rule: nothing on this page may be widened by its text ──────────────
 * Every text-bearing block gets `overflow-wrap: anywhere`, because every string here comes
 * from a server cap (CONTENT-LAYER.md §2) rather than from prose the author can see rendered.
 * `anywhere` and not `break-word`: only `anywhere` also shrinks the intrinsic min-content
 * width, which is what a grid or flex ancestor needs in order to stop overflowing. Measured
 * at 320px with every field at its cap in tools/about-verify.mjs — that measurement is what
 * found the defect this rule closes (400 unbroken characters → a 1725px document). */
.foot-line, .foot-fine, .foot-facts dt, .foot-facts dd, .proof-title, .proof-sub,
.proof-mark, .proof-fine, .wordmark, .nav-link, .eyebrow, .about__fine,
.about__plate-list li, .about__plate-tag, .about__plate-body, .about__plate-fine,
.about__mono, .about__mono-inline, .section__eyebrow {
  overflow-wrap: anywhere;
}

/* ── footer — the shell's footer plus the [ PROOF ] band, same register as the storefront's
 * and only claims this page can be measured against: same-origin bytes, no cookies, no
 * script but ours. No badge, no shield, no tick, no second gradient. */
.foot {
  border-top: var(--hair) solid var(--line);
  background: var(--ink);
  padding: var(--s-8) var(--ab-gutter) var(--s-9);
}
.foot-in {
  display: grid; gap: var(--s-5);
  max-width: var(--maxw); margin-inline: auto;
}
.foot-mark {                                        /* the ONE gold element on this page */
  margin: 0;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--gold);                               /* 11.90:1 on --ink ✓ */
}
.foot-line {
  max-width: var(--maxw-prose); margin: 0;
  font-size: var(--t-h3); line-height: 1.35; letter-spacing: var(--tr-h3);
  color: var(--text);
}
.foot-facts {
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding-top: var(--s-5);
  border-top: var(--hair) solid var(--line);
}
.foot-facts dt {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.foot-facts dd {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono); font-size: var(--t-data); line-height: var(--lh-data);
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.foot-fine {
  max-width: var(--maxw-prose); margin: 0;
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7;
  color: var(--text-3);                             /* 5.56:1 on --ink ✓ */
}
.proof {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: var(--hair) solid var(--line);
}
.proof .eyebrow { margin: 0; }
.proof-title {
  margin: 0; max-width: 30ch;
  font-family: var(--font-sans); font-weight: var(--fw-display);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  color: var(--text);
}
.proof-sub { margin: 0; max-width: var(--maxw-prose); font-size: var(--t-sm); color: var(--text-2); }
.proof-marks {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0; padding: 0; list-style: none;
}
.proof-mark {
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--line-2); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--text-2);                             /* 7.85:1 on --ink ✓ */
}
.proof-fine {
  max-width: var(--maxw-prose); margin: 0;
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7;
  color: var(--text-3);                             /* 5.56:1 on --ink ✓ */
}

/* ── breakpoints ─────────────────────────────────────────────────────────────
 * 900px  the section number rail leaves its gutter and sits above the heading
 * 620px  the nav tightens; single-column facts; the plate loses its generous padding
 * There is no horizontal overflow at any width: every wide element is either max-width'd
 * or minmax(0,1fr), and long operator strings break with overflow-wrap. */
@media (min-width: 620px) {
  .foot-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .foot-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about__plate { padding: var(--s-8) var(--s-8) var(--s-5); }
}
@media (max-width: 900px) {
  .section { grid-template-columns: minmax(0, 1fr); }
  .section__eyebrow { grid-column: 1; grid-row: 1; padding-top: 0; }
  .section__h { grid-column: 1; grid-row: 2; margin-top: var(--s-3); }
  .section__body { grid-column: 1; grid-row: 3; }
}
@media (max-width: 620px) {
  .nav-in { gap: var(--s-1); }
  .wordmark { font-size: 0.875rem; }
  .nav-link { padding-inline: var(--s-1); letter-spacing: 0.06em; }
  .about__main { padding-top: var(--s-7); padding-bottom: var(--s-9); }
  .foot-facts { grid-template-columns: minmax(0, 1fr); }
  .about__plate { padding: var(--s-5) var(--s-4) var(--s-4); }
  .about__plate-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── reduced motion — nothing on this page moves, so this only has to guarantee that ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .about__skip { transition: none; }
  .about__skip:focus { transform: none; }
}

/* ── print — the argument reads on paper too ───────────────────────────────── */
@media print {
  .about__skip, .nav { display: none; }
  body { background: #fff; color: #000; }
  .foot { background: #fff; border-top: 1px solid #999; }
}

/* ── footer link rows (Phase 3: legal + family) ─────────────────────────────
 * The storefront's `.foot a` rule paints links cyan/underlined. These rows are
 * metadata, not calls to action, so they take the quiet mono treatment. Appended
 * after the base rule so the intended colour wins at equal specificity.
 */
.foot .foot-links {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.foot .foot-links a { color: var(--text-2); text-decoration: none; }
.foot .foot-links a:hover { color: var(--text); }
.foot .foot-family { color: var(--text-3); }