feat: eyebrow 14px and one small-text floor; fix a site-wide reflow defect; stamp TTL; §4 bars the struck universal

Pouya's five rulings of 2026-08-31, after 64bce10. One commit, because AGENTS.md entry (aj) covers all five and the review fixes interleave across them — recorded here rather than left to be inferred. 1. THE EYEBROW, 13 -> 14px, at the one token definition. `--text-eyebrow` is deliberately NOT an alias of `--text-sm` despite sharing its value: the two move for different reasons, and aliasing would mean a change to body-meta type silently moving every eyebrow. Sweep by rendering, 22 pages x 2 widths, 801 mono instances: 441 carry `.eyebrow`, 420 now at 14px, 21 held at 11px. Zero of 801 below 4.5:1. Header check, which Pouya asked for explicitly: nothing header-side consumes the token, `--header-h` is 81px, and the sticky header measures exactly 81.00px at every width from 66rem up with the CTA on `.header-inner`'s content edge. Nothing overflowed, so nothing was improvised. 2. /contact/'s LABELS RAISED, AND THE FLOOR CLAIM REWRITTEN BECAUSE THE RULING'S PREMISE WAS FALSE. The ruling asked docs/02 to record the tagline as "the ONLY sub-14px text on the site". It is not: the `--text-xs` 12px rung has ten declaration sites and 130 elements rendering at 12px. So docs/02 records the claim that IS verified — `--text-2xs` has one consumer in the repository — and enumerates the 12px rung as a separate treatment. Writing a false claim into the spec because the conclusion was handed down is the move the rules forbid. A third block moved that the ruling did not name: /bio/'s ten <h2>s and its strap were copies of five of `.eyebrow`'s six declarations at 11px — the same escape the footer headings were. docs/02 justified holding them by the one-page PDF constraint; measured, `@media print` sets both to 7pt, so the screen size never reached the PDF and that was never the reason. Consolidating them DID change the printed sheet, because the missing sixth declaration was `font-weight`: 500 grew the PDF 89,496 -> 91,151 bytes. Print therefore freezes 400, the committed PDF stays byte-identical (10 differing bytes, all /CreationDate and /ModDate), and unifying is Pouya's call. 3. THE REFLOW DEFECT WAS SITE-WIDE AND /bio/ WAS NOT THE BINDING CAUSE. `white-space: nowrap` on `SiteHeader .brand-name` held all 22 pages 63px over at 320px/root 32. Eight cause-specific fixes, no `overflow-x` anywhere; all eight produce byte-identical geometry at root 16. `Pill` is marked in docs/02 as the backstop it is — the real cause was `PracticeCard`'s rem-based padding, and with it clamped "Construction" goes from 94x220 in six two-character lines to 158x85 in two. Three instrument findings now in docs/02, each of which hid a real defect: `break-word` does not reduce min-content and `anywhere` does; `getBoundingClientRect()` reports border boxes, so an element sweep cannot see text spilling outside its own box; and `mobile: true` emulation expands the layout viewport, so `scrollWidth - innerWidth` reads 0 while the reader still scrolls sideways. 4. TTL STAMPED `ENABLED` in §7, with `DISABLED` at first verification recorded rather than overwritten. Q60 narrowed to its second half and OPEN: no record has been watched to vanish, and `ENABLED` proves the setting, not the behaviour. R19's sweep found three stale copies outside §7; all now defer to it. R19 itself was not edited — it points at §7 rather than carrying state, which is the property that made it work. 5. §4 GAINS THE STRUCK-UNIVERSAL ROW, citing the committed ontario.ca extract and cross-referenced to `check:claims`'s `struck-universal-q39`. It bars the claim in BOTH directions: the commercial half is Pouya's attributed position, not a verified fact. The row immediately caught two places asserting it flatly — `SiteHeader.astro` and §9 Q33 — both now attributed. `check:claims` unmodified; still frozen. REVIEW: adversarial-reviewer, two rounds, 16 findings, ALL ACCEPTED, NONE DECLINED. claims-auditor did not run (D20). Eight of round 2's ten were defects in round 1's own fixes. Round 1's blocking finding was a defect in my own record: I wrote that every reflow residual was zero at "root 16 and root 32, 286 measurements". Two ways of simulating 200% text are NOT equivalent, because media-query `rem` resolves against the DEFAULT font size, not the root element's. Under the method docs/02 itself prescribes the site is 944px over on 21 pages and 508px on / at 1280, and 304px at 1920 — nav clipped mid-word, Practice/Fees/Contact and the CTA off-screen, WCAG 1.4.4 with loss of functionality. My 286 excluded exactly the widths where the defect lives. NOT FIXED, DELIBERATELY: the cause is `flex-wrap: nowrap` on `.nav-list` above 66rem, a locked step-1 decision, and the standing instruction is to stop and report rather than improvise a header change. It is now a blocking item on docs/06's cutover checklist, ticked only by ruling on it — "not by re-measuring it with the method that reports zero". Round 2 also caught: a 63,743-byte figure that was the `cmp -l` differing-byte count rather than the 1,655-byte size delta; a lost-navigation list naming Med-Arb, which is not in the masthead at any width, while omitting Contact; the tagline's justification left recorded at 13px, where one clause of it is false at 14px (20px of document overflow at 1216 with a seventh nav item); my own label raise reintroducing a 38px element overflow at the width just ruled on; two copies of the eyebrow treatment left at weight 400; three stale residual tables; and the min-content explanation duplicated six times in src/. VERIFIED, exit statuses read directly, never through a pipe: build 0 (22 pages), check 0 (0 errors/0 warnings/0 hints), check:claims 0, og:proof 0, check:intake 0, lint 0, minifier tripwire clean, TODO in dist 0 with a source sanity check. Overflow: 374 measurements over 22 pages, every one zero, row counts asserted before reading, with positive controls (119px at width 200, 319px at root 64). Lighthouse 0, run three times with identical category scores: perf 99 on / and 100 elsewhere, a11y 100, best practices 100, SEO 100 on all indexable pages, CLS 0.000. / sits at LCP 2.03s against a 2.0s budget, unchanged by this work. The zsh `$VAR` word-split trap fired twice more and both times read as a clean pass; caught only by asserting row counts first. Two of my own instruments were wrong before they were right: a `grep -F '0.875rem'` state check that could never match because Lightning CSS writes `.875rem`, and a probe whose inline `!important` was outranked by a running CSS transition. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Md3GndFqWPzK78xAoebsg5
2026-08-31 15:44:13 -04:00
parent 64bce105f8
commit 0f7595b602
15 changed files with 534 additions and 120 deletions
@@ -57,10 +57,12 @@ const { slots } = Astro.props;
       measured-sounding comment that was false is this project's own named
       failure mode.

-       `minmax(0, 1fr)` cannot overflow at any width or any root font size,
-       which also retires the `min(11rem, 100%)` guard this line briefly
+       `minmax(0, 1fr)` means the TRACK cannot overflow at any width or any root
+       font size, which retires the `min(11rem, 100%)` guard this line briefly
       carried — that guard was fixing the overflow symptom of a floor that
-       should not have been there. */
+       should not have been there. ⚠️ **THE TRACK IS NOT THE CONTENT:** a label's
+       own words can overflow the track, and at a 200% default font size they
+       did. That is why `.credential-label` below carries `overflow-wrap`. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
@@ -102,7 +104,10 @@ const { slots } = Astro.props;
       deliberately long (AGENTS.md Q37) — it wraps to two lines at every width
       and must not be prevented from doing so. Do not add `white-space: nowrap`
       here, and do not shorten the label to make the row tidier: the asymmetry
-       is the honest part. */
+       is the honest part. ⚠️ `overflow-wrap: anywhere` is LOAD-BEARING here, not
+       cosmetic — `anywhere`, not `break-word`: see `docs/02` §Reflow, instrument
+       finding 1. */
    text-wrap: pretty;
+    overflow-wrap: anywhere;
  }
 </style>
@@ -85,7 +85,12 @@ void _props;
       200% default font size (root 32px) overflowed the document by 111px at
       320px — WCAG 1.4.10 Reflow. Measured 2026-08-28; no pill on the site is
       that long today, which is exactly why this is easy to delete and must not
-       be. `normal` costs nothing at default size. */
+       be. `normal` costs nothing at default size.
+       ⚠️ `normal` ALONE IS NOT ENOUGH — a one-word pill cannot wrap at a space
+       that is not there. `anywhere`, not `break-word`, and this is the BACKSTOP
+       rather than the cause: `docs/02` §Reflow, instrument finding 1 and the
+       `Pill` row. */
    white-space: normal;
+    overflow-wrap: anywhere;
  }
 </style>
@@ -48,7 +48,13 @@ const H = `h${level}` as 'h2' | 'h3';
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
-    padding: var(--space-6);
+    /* CLAMPED, not a flat --space-6, for the reason `.feature` on `/` carries:
+       the space scale is rem-based, so `2rem` is 64 px a side at a 200% default
+       font size — 128 px of padding inside a ~224 px content box, which left
+       ~96 px for the whole card column and was the real cause of a `Pill`
+       overflowing. The 10vw term holds it at 32 px on every viewport from 320 px
+       up and lets it collapse only when the rem is doubled. */
+    padding: clamp(var(--space-4), 10vw, var(--space-6));
    background: var(--bg);
    border: 1px solid var(--border);
    border-block-start: 2px solid var(--rule);
@@ -171,8 +171,14 @@ const aboutLinks = [
    border-block-end: 1px solid var(--rule);
  }

+  /* `flex-wrap: wrap` is the reflow fix, chosen OVER `overflow-wrap: anywhere` on
+     the name: the name is a flex item at `min-width: auto` and cannot shrink
+     below "Lajevardi", and wrapping the flex line breaks no word where
+     `anywhere` would have hyphenated a person's name. No effect at any normal
+     size. `docs/02` §Reflow carries the measurement. */
  .footer-brand {
    display: flex;
+    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 44px;
@@ -158,10 +158,15 @@ const isHome = path === '/';
     Pouya's name read as a held capability, and §4 then recorded Q.Arb as
     merely commenced. Q33 answered that the same day, and the premise was
     wrong twice over — §4 now records Q.Arb as HELD, and even before it did:
-     ADR designations are voluntary credentials, not licences, and COMMERCIAL
-     arbitral appointment in Ontario is not gated behind a designation — so the
-     constraint was always positional, never legal, and Pouya accepts sole,
-     party-appointed and co-arbitration work today. See §4 Offerings.
+     ADR designations are voluntary credentials rather than licences, and on
+     **Pouya's stated position, which §4 Offerings records attributed to him and
+     deliberately unstamped**, commercial arbitral appointment in Ontario is not
+     gated behind a designation — so the constraint was always positional rather
+     than legal, and he accepts sole, party-appointed and co-arbitration work
+     today. ⚠️ **STATED AS HIS POSITION, NOT AS FACT, AND THAT IS REQUIRED:** §4
+     Forbidden bars the class claim about arbitral gating **in both directions**,
+     and this repository does not conclude a proposition of law. See §4 Offerings
+     and the `struck-universal-q39` row.

     SCOPED 2026-08-27 (Q39). This comment said "Anyone may be appointed an
     arbitrator in Ontario", which Pouya checked and found FALSE as a universal:
@@ -199,24 +204,31 @@ const isHome = path === '/';
     same words as the hero eyebrow (docs/01). */
  .brand-tagline {
    display: none;
-    /* HELD AT 11px, BELOW THE `.eyebrow` THIS ELEMENT CARRIES. Two reasons, both
-       measured 2026-08-31 at 13px. (1) `--header-h` is 81px and the header goes
-       to 83.4px — `global.css` drives `scroll-padding-top` from that token. (2)
-       With a seventh nav item the CTA lands past `.header-inner`'s content edge
-       by 42px at 1216, 18px at 1240 and 26px at 1280 and 1440 — it does not
-       resolve as the viewport widens. Insights is that item; `showInsights`
-       turns it on at two published articles. ⚠️ Document overflow is 0 in every
-       one of those cases: flex lets the CTA sit past the padding edge without
-       growing the document, so a page-level check cannot see this. */
+    /* HELD AT 11px, BELOW THE `.eyebrow` THIS ELEMENT CARRIES. Measured at the
+       LIVE token value, 14px, on 2026-08-31 — earlier figures here were taken at
+       13px and understated all three costs. (1) `--header-h` is 81px and the
+       header goes to 84.98px; `global.css` drives `scroll-padding-top` from that
+       token. (2) The CTA lands past `.header-inner`'s content edge — 1.3px at
+       1216 with the SIX nav items shipping today, and 67.8 / 43.8 / 51.8 / 51.8px
+       at 1216 / 1240 / 1280 / 1440 with a seventh. It does not resolve as the
+       viewport widens. Insights is that item; `showInsights` turns it on at two
+       published articles. (3) ⚠️ AND AT 14px IT DOES GROW THE DOCUMENT: 20px of
+       overflow at 1216 and 4px at 1280 with seven items. At 13px it did not,
+       which is why this comment used to say a page-level check could not see it.
+       At 11px all three are zero, with six items and with seven. */
    font-size: var(--text-2xs);
    white-space: nowrap;
  }
+  /* ⚠️ NEVER `white-space: nowrap` HERE. It was, until 2026-08-31, and because the
+     masthead is on all 22 pages that one declaration was the site's binding
+     reflow defect at a 200% default font size. The name is two words and takes
+     two lines when it has to; at every normal size it never wraps. WCAG 1.4.4 /
+     1.4.10; `docs/02` §Reflow carries the measurement. */
  .brand-name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
-    white-space: nowrap;
    color: var(--text);
  }
  .brand:hover .brand-name {