feat: build step 3 — /about/, minus its memberships; close Q40–Q43

Applies Pouya's rulings on Q42, Q41(a)(b)(c), Q43 and Q40, then builds
`/about/` — six of docs/01's seven items.

`/about/` ships WITHOUT a memberships group. R10 is a prohibition on
shipping a page that lists memberships before they are re-confirmed; the
re-confirmation is a fact only Pouya holds and was not obtained. The
first version published all four and disclosed the gap in five places
instead; both review agents rejected that. Q44 carries the question.

Rulings:
- Q42 — ENE, dispute-system design and pre-dispute technical advisory
  rowed; settlement counsel struck as a partisan role. The strike
  exposed a hole in the offering test, which now states the prior
  question it was missing.
- Q41(a) — Q37 reaches prose, and prose is held to a higher bar. The
  sentence is now one constant, ASYMMETRY_LINE, because two hand-typed
  copies had already diverged inside one session.
- Q41(b) — not restored; the implication turned out to be in three
  places, two of which survived the sweep that closed it.
- Q41(c) — verified against the LAT's own Rules and extracted into
  docs/reference/lat-case-conference.md. Rule 2.4 makes "Pre-Hearing
  Conference" the Tribunal's own term for a case conference; the Rules
  contain zero occurrences of `mediat` in 66,593 characters.
- Q43 — the timings are service commitments; PROCESS_FRAMING renders
  adjacent to them, not in a lede above.
- Q40 — bundled to step 7 as R15, blocking cutover.

Four review passes, 43 findings, nine of them defects in their own
predecessors' fixes. The worst was mine: the false universal Q39 struck
reached a public page. Also fixed a portrait ladder that upscaled 1.93x
at 1024/DPR2 on BOTH pages — the shipped home page included — because
its 960 ceiling was derived from the layout range where the image is
narrowest.

Verified: check/lint/build/audit clean; 0 upscaling across 11 device
profiles; 0 overflow and 0 over-wide elements at 13 widths; 0 contrast
failures across 127 and 88 painted pairs; 0 print failures against white
paper; reveal 0 hidden under reduced-motion and print; zero JavaScript.
Lighthouse NOT RUN — tool unavailable until step 7 (R11). HTML validator
NOT RUN.

Opens Q44 (memberships), Q45 (PDF bio), Q46 (offering-test gating; the
glossary standard), Q47 (jobTitle without worksFor). Adds R15.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0148NztQskLKKApP5SzAA78e

src/styles/global.css

@@ -283,6 +283,44 @@ a:hover {
 .prose p {
   max-inline-size: var(--width-prose);
 }
+/* `.prose` HAD NO PARAGRAPH SPACING, AND NOTHING ANYWHERE SUPPLIED IT.
+   The reset above sets `* { margin: 0 }`, so a bare `.prose` with two <p>
+   children rendered them as one block. Measured on `/about/` §Language:
+   **gap between paragraph 1 and paragraph 2 = 0.0px** — "…history arrive
+   together." running straight into "Working in the parties' own language…", on
+   screen and in the printed PDF.
+
+   It survived step 2 because BOTH of `/`'s prose blocks supply their own
+   spacing: `.approach-prose` uses `display:flex; gap`, and `.bio-prose` on
+   `/about/` has its own `> p + p`. So the only two call sites happened to opt
+   out of the defect. The rule belongs HERE, where `.prose` lives, or it has to
+   be remembered on all fifteen remaining pages.
+
+   `:where()` KEEPS THE SPECIFICITY AT ZERO so a component's own rule for the
+   SAME PROPERTY wins without `!important`.
+
+   ⚠️ IT DOES NOT PROTECT AGAINST A FLEX `gap`, AND THIS COMMENT ONCE CLAIMED IT
+   DID — "Verified: with `:where()` the flex container's gap governs and this
+   contributes nothing." That was false and was measured false minutes later:
+   `:where()` lowers SPECIFICITY, which only matters when two rules set the same
+   property. A flex `gap` is a different property, so gap and margin both apply
+   and add. `/`'s `.approach-prose` went **24px -> 48px** on the strength of that
+   sentence. It has been converted to use this rule instead of a `gap`, and
+   `.bio-prose`'s duplicate `> p + p` was removed for the same reason. If a
+   future block needs different spacing, override `margin-block-start` — do not
+   reach for `gap`. */
+:where(.prose) > p + p {
+  margin-block-start: var(--space-5);
+}
+/* THE PAGE-OWNED WRAPPER FOR `SectionHeading`, and it lives here because it was
+   byte-identical in two pages with seventeen to come. It exists only because a
+   parent cannot style a child component's root (`CLAUDE.md`; measured on
+   `SectionHeading`), so every page that uses a section heading needs a wrapper
+   it owns — which means every page needs this rule. Same argument that extracted
+   `ContactBand`, applied to a rule instead of a component. */
+.section-head {
+  margin-block-end: var(--space-7);
+}
 .section {
   padding-block: var(--section-y);
 }
@@ -491,4 +529,76 @@ hr {
   .section {
     padding-block: var(--space-5);
   }
+
+  /* THE INVERSE GROUNDS HAD TO BE NEUTRALISED AND WERE NOT — and this block's
+     own heading says why it matters: the About page is printed by people
+     evaluating an appointment.
+
+     `print-color-adjust` defaults to `economy`, so a UA drops the BACKGROUND
+     and keeps the text. Chrome's default print dialog has "Background graphics"
+     unchecked, so `.section-inverse` and `.section-accent` printed cream text
+     on white paper. Measured with `Page.printToPDF`, `printBackground: false`,
+     rasterised at 150 dpi: the dominant glyph colour across the whole arc block
+     was **rgb(166,164,161) — 2.49:1 against white**, and that grey is Chrome's
+     own legibility fudge. The DECLARED colour is cream at ~1.04:1, which is
+     what a UA without that fudge renders. With `printBackground: true` the
+     pages are correct, which is what isolates the cause.
+
+     What vanished was the Q.Med / Q.Arb / C.Med-Arb progression on `/about/` —
+     §4's paired disclosure — plus the contact band. `!important` because the
+     rules being overridden are class-level and these must win regardless of
+     which section variant a future page uses. */
+  /* TOKENS FIRST, THEN CLASSES — and the token half is the part that works.
+     A class-by-class version of this block shipped first and MISSED TWO
+     ELEMENTS, both measured under print-media emulation: `.approach-metaphor`
+     on `/` and `.btn-gold` on both pages stayed at `rgb(226,200,154)` —
+     gold-l, which is **1.62:1 against white paper** once the ground is dropped.
+     One is the paragraph carrying the infinity-mark argument; the other is the
+     call to action. Enumerating class names cannot work here: `--text-inverse-2`
+     is consumed by page-scoped and component-scoped rules this file has never
+     heard of, and there will be seventeen more pages of them.
+
+     Custom properties INHERIT, and that is the one mechanism that crosses
+     Astro's component-scope boundary (see `Pill.astro`). Redefining the three
+     inverse tokens on the section itself therefore reaches every descendant
+     rule, including ones written after this block. */
+  .section-inverse,
+  .section-accent {
+    background: transparent !important;
+    color: #000 !important;
+    --text-inverse: #000;
+    --text-inverse-2: #000;
+    --pill-fg: #000;
+    --pill-border: #000;
+    --rule: #000;
+  }
+  /* The belt-and-braces half. These four set a colour LITERALLY rather than
+     through a token, so the inheritance above does not reach them. */
+  .section-inverse .eyebrow,
+  .section-accent .eyebrow,
+  .section-inverse .lede,
+  .section-accent .lede {
+    color: #000 !important;
+  }
+  /* The dot is a background, not text, so it does not follow `color`. */
+  .section-inverse .eyebrow .dot,
+  .section-accent .eyebrow .dot {
+    background: #000 !important;
+  }
+  /* EVERY BUTTON, NOT JUST THE ONES ON AN INVERSE GROUND. Two of the three
+     variants set light text on a coloured background of their own
+     (`.btn-primary` cream-on-maroon, `.btn-gold` gold-on-ink), and a UA at
+     `print-color-adjust: economy` drops the background and keeps the text.
+     Measured against white paper: `.btn-gold` 1.62:1, `.btn-primary` **1.07:1**.
+
+     The first version of this rule was scoped to `.section-accent .btn-gold`,
+     which fixed the contact band and left the HERO CTA on `/` unreadable —
+     `.btn-primary` sits on cream, inside no inverse section at all, so nothing
+     in this block reached it. A print sweep of all 89 visible text elements
+     found it; the class-scoped version had passed its own narrower check. */
+  .btn {
+    background: transparent !important;
+    color: #000 !important;
+    border-color: #000 !important;
+  }
 }