.ri *{box-sizing:border-box}
.ri{--ri-ground:#000000;--ri-ink:#ffffff;--ri-ink-72:rgba(255,255,255,.72);--ri-ink-60:rgba(255,255,255,.60);--ri-ink-50:rgba(255,255,255,.50);
  --ri-hair:var(--ob-hairline);--ri-rule:rgba(255,255,255,.30);--ri-accent:var(--ofto-primary-on-black);
  --ri-mono:ui-monospace,'SF Mono',Menlo,monospace;
  background:var(--ri-ground);color:var(--ri-ink);font-family:'Manrope',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;
  border-bottom:1px solid var(--ri-rule);
  padding:clamp(30px,5vw,64px) clamp(22px,6vw,80px) clamp(36px,3.5vw,52px)}
.ri-doc{max-width:1060px;margin:0 auto}
.ri-meta{font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:.02em;color:var(--ri-ink-60);line-height:1.5}

.ri-plate{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--ri-rule)}
.ri-plate-l{font-size:15px;letter-spacing:.01em;color:var(--ri-ink)}
.ri-plate-l i{font-style:normal;color:var(--ri-ink-60)}
.ri-plate-r{font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--ri-ink-60)}

.ri-entry{display:grid;grid-template-columns:clamp(104px,13vw,178px) 1fr;gap:0 clamp(22px,3.4vw,46px);
  padding:clamp(56px,10vw,116px) 0 clamp(40px,6vw,64px)}
.ri-no{padding-top:clamp(8px,1.2vw,16px);font-variant-numeric:tabular-nums}
/* .ri-map is the one link the recomposed header below still emits from this old block, unchanged
   (map-client.test.js). Its sibling .ri-skip ("Skip to the chronicle") retired; that action now
   ships as the pill row's cream "Read the chronicle" pill (.ri-hpill--solid). */
.ri-map{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;margin-right:24px;
  font-size:11px;letter-spacing:.03em;color:var(--ri-ink-60);text-decoration:none}
.ri-map:hover{color:var(--ri-ink)}
.ri-map .ofto-arw{margin-left:6px}
.ri-no .ri-tot{white-space:normal}
.ri-no .ri-of{display:block;font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-60)}
.ri-no b{display:block;color:var(--ri-accent);font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.9rem,5.6vw,4.5rem);line-height:.86;letter-spacing:-.035em;margin:6px 0 8px}
.ri-no .ri-tot{display:block;font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-50);padding-top:9px;border-top:1px solid var(--ri-hair)}
/* Scoped to .ri-entry, not bare ".ri h1": .ri-entry is the OLD header grid, still used verbatim
   by src/investors.js's firm-page template (.ri-plate/.ri-entry/.ri-no/.ri-sector too -- "the
   backers" are re-tokened, not re-composed, spec 2026-09-07 section 4). The recomposed founder
   header below (.ri-head) never emits .ri-entry, so the two never collide. .ri-strap and
   .ri-pf/.ri-pf img (the old strap paragraph, the 132px grayscale square plate) had no other
   consumer and are deleted outright rather than left dead. */
.ri-entry h1{font-family:var(--font-display);font-weight:400;font-size:clamp(3.1rem,9.4vw,7rem);line-height:.92;
  letter-spacing:-.032em;margin:0;text-wrap:balance}
.ri-sector{margin:clamp(20px,2.6vw,28px) 0 0;font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-60)}

/* Recomposed founder record header (spec 2026-09-07 section 4, PR3 task 1): borrows the home
   hero's own vocabulary (homeHeroPremiumStyles, src/home.js) -- same scrim stops, same
   ghost/solid pill idiom, same oversized-fact-in-the-opposite-corner move. Full bleed: escapes
   .ri's own padding (and .ri-doc's max-width, by sitting outside it) via calc(-1 * <that
   clamp>), duplicated literally rather than shared through a custom property, because
   test/founder-controls-flip.test.js and test/founder-seam.test.js both pin .ri's padding
   declaration as an exact literal string with nothing else inside its braces -- a custom
   property tried there first broke both. Edit both places by hand if .ri's own padding moves. */
.ri-head{position:relative;isolation:isolate;overflow:hidden;min-height:600px;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--ri-ground);color:var(--ri-ink);
  margin:calc(-1 * clamp(30px,5vw,64px)) calc(-1 * clamp(22px,6vw,80px)) clamp(30px,5vw,64px)}
@media(max-width:760px){.ri-head{margin:-72px -18px clamp(30px,5vw,64px)}}
.ri-portrait{position:absolute;inset:0;background-color:var(--ri-ground);background-size:cover;background-repeat:no-repeat}
/* Same four stops as .hh2-scrim (src/home.js): hero and header darken identically. */
.ri-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.3) 55%,rgba(0,0,0,.95) 100%)}
/* No portrait: the header stays on black and states its own number, oversized and faint, behind the name. */
.ri-head--flat .ri-ghost{position:absolute;left:clamp(22px,6vw,64px);bottom:clamp(40px,7vw,76px);z-index:0;
  font-family:var(--font-display);font-weight:400;font-size:clamp(160px,30vw,420px);line-height:1;
  letter-spacing:-.03em;color:rgba(255,255,255,.3);pointer-events:none;user-select:none}
.ri-hin{position:relative;z-index:2;padding:clamp(22px,6vw,80px)}
.ri-hrow{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,56px);align-items:end}
.ri-hname{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,9vw,120px);line-height:.94;
  letter-spacing:-.03em;color:var(--ri-ink);margin:0;text-wrap:balance}
.ri-hrecord{font-weight:400;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.48;
  color:var(--ri-ink-72);max-width:44ch;margin:clamp(14px,2vw,20px) 0 0;text-wrap:pretty}
.ri-hfacts{margin:10px 0 0;font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-60)}
.ri-hleft .ri-map{margin:10px 0 0;color:var(--ri-ink-60)}
.ri-hright{text-align:right}
/* Restyles the SAME .ri-no/.ri-of/.ri-tot/<b> markup .ri-entry (still used by src/investors.js's
   firm pages) declares above, at higher specificity (two classes beat one class + element) so
   the override cannot leak onto a firm page. record-numbering.test.js reads this markup and its
   "of N"/"N retired" wording across every edition unchanged -- only face/size/colour/align move. */
.ri-hright .ri-no{padding-top:0;text-align:right}
.ri-hright .ri-no .ri-of{color:var(--ri-ink-60);text-align:right}
.ri-hright .ri-no b{font-family:var(--font-display);font-weight:400;color:var(--ri-ink);font-size:64px;
  line-height:1;letter-spacing:-.03em;margin:0 0 8px}
.ri-hright .ri-no .ri-tot{border-top:0;padding-top:0;color:var(--ri-ink-72);text-align:right}
.ri-hanchor{margin:8px 0 0;font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-60)}
/* Fix round 1 (measured one px either side of every breakpoint here, per this branch's lesson):
   the side-by-side grid read clean at 768+ only because .ri-hright's longest unwrapped line
   still fit its auto column there. Below ~768 (measured 601/650/700/730) the auto and 1fr
   columns fought for space, squeezing the number beside the wrapped strap (worst, broken, at
   601). Fix: the two columns stop sharing a row below 1280px, matching exactly where
   homeHeroPremiumStyles (src/home.js) draws its own tablet/desktop line (min-width:1281px) for
   the analogous drawn-card/statement collision. Confirmed clean at 1024/768/650/601/600/599. */
/* ADR 0030: portrait and text have separate areas, so neither can obscure the other. */
.ri-head--photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;
  gap:clamp(28px,5vw,64px);min-height:0;padding:100px clamp(24px,5vw,64px) 40px}
.ri-head--photo .ri-portrait{position:relative;inset:auto;width:100%;max-width:496px;aspect-ratio:4/5;justify-self:center}
.ri-head--photo .ri-scrim{display:none}
.ri-head--photo .ri-hin{padding:0}
.ri-head--photo .ri-hrow{grid-template-columns:1fr;gap:24px}
.ri-head--photo .ri-hright,.ri-head--photo .ri-no,.ri-head--photo .ri-of,.ri-head--photo .ri-tot{text-align:left}
.ri-head--photo .ri-hname{font-size:clamp(44px,6vw,86px)}
.ri > .fh-story{max-width:650px;padding:32px 0 var(--ob-section);scroll-margin-top:80px}
@media(max-width:1280px){
  .ri-hrow{grid-template-columns:1fr;justify-items:start;gap:20px}
  .ri-hright,.ri-hright .ri-no,.ri-hright .ri-no .ri-of,.ri-hright .ri-no .ri-tot{text-align:left}
}
@media(max-width:760px){
  .ri-head--photo{grid-template-columns:1fr;padding:88px 24px 32px;gap:28px}
  .ri-head--photo .ri-portrait{max-width:420px;max-height:none;margin:0 auto}
}
.ri-hpills{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3.4vw,34px);padding-top:20px;
  border-top:1px solid var(--ri-hair)}
.ri-hpill{display:inline-flex;align-items:center;height:38px;padding:0 20px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.55);color:var(--ri-ink);font-family:'Manrope',sans-serif;font-size:12.5px;
  font-weight:600;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease-out-expo),box-shadow .25s var(--ease-out-expo),border-color .2s var(--ease-hover)}
@media(max-width:600px){.ri-hpill{height:44px}}
.ri-hpill:hover{transform:translateY(-2px);box-shadow:0 14px 36px -14px rgba(255,255,255,.6);border-color:var(--ri-ink)}
.ri-hpill:active{transform:translateY(0) scale(.98);transition-duration:.1s}
@media(prefers-reduced-motion:reduce){.ri-hpill,.ri-hpill:hover,.ri-hpill:active{transition:none;transform:none}}
.ri-hpill--solid{background:var(--ob-cream);color:var(--ri-ground);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ri-hpill--solid:hover{background:var(--ob-cream)}
@media(max-width:600px){
  .ri-hname{font-size:clamp(38px,13vw,64px)}
  .ri-hright .ri-no b{font-size:44px}
  .ri-head--flat .ri-ghost{font-size:clamp(120px,42vw,220px)}
}

.ri-card{margin:clamp(30px,4vw,48px) 0 0}
.ri .fc-instrument .fc-face{box-shadow:none;border:1px solid var(--ri-hair)}

.ri-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,38px);
  border-top:1px solid var(--ri-rule);border-bottom:1px solid var(--ri-rule);padding:clamp(26px,3.4vw,38px) 0;
  margin:clamp(30px,4vw,48px) 0 0}
.ri-fig-n{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.2vw,3.15rem);line-height:1;
  letter-spacing:-.028em;color:var(--ri-ink);font-variant-numeric:tabular-nums}
.ri-fig-l{font-weight:500;font-size:11px;letter-spacing:.03em;
  color:var(--ri-ink-60);margin-top:11px}

.ri-rec{border-top:1px solid var(--ri-rule);padding-top:clamp(30px,4vw,44px)}
.ri-rec-h{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.7vw,2rem);letter-spacing:-.015em;margin:0}
.ri-rec-note{margin:10px 0 clamp(26px,3.4vw,38px);max-width:52ch}
.ri-row{display:grid;grid-template-columns:clamp(120px,15vw,190px) 1fr;gap:8px clamp(20px,3vw,38px);
  padding:16px 0;border-bottom:1px solid var(--ri-hair);align-items:baseline}
.ri-row-k{font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--ri-ink-60)}
.ri-row-v{font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.45;color:var(--ri-ink)}
/* A backer that has earned a firm page links to it. Distinguishable without colour (WCAG 1.4.1,
   the same rule the status strip follows): the resting state is an underline in the instrument's
   own hairline, not a colour swap, so the facts block keeps one ink. */
.ri-row-firm{color:inherit;text-decoration:underline;text-decoration-color:var(--ri-rule);text-underline-offset:3px}
.ri-row-firm:hover,.ri-row-firm:focus-visible{text-decoration-color:currentColor}

.ri-src{margin:clamp(52px,7vw,88px) 0 0;border-top:1px solid var(--ri-rule);padding-top:clamp(30px,4vw,44px)}
.ri-src-list{list-style:none;margin:0;padding:0;counter-reset:s;
  columns:2;column-gap:clamp(30px,4vw,56px)}
@media(max-width:760px){.ri-src-list{columns:1}}
.ri-src-list li{counter-increment:s;break-inside:avoid;padding:11px 0;border-bottom:1px solid var(--ri-hair);
  font-size:1rem;line-height:1.45;color:var(--ri-ink-72);position:relative;padding-left:30px}
.ri-src-list li::before{content:counter(s);position:absolute;left:0;top:13px;font-family:'Manrope',sans-serif;
  font-size:11px;letter-spacing:.03em;color:var(--ri-ink-50);font-variant-numeric:tabular-nums}
.ri-src-list a{color:var(--ri-ink-72);text-decoration:none;border-bottom:1px solid var(--ri-hair)}
.ri-src-list a:hover{color:var(--ri-ink);border-color:var(--ri-rule)}

.ri-prov{margin:clamp(58px,8vw,100px) 0 0;border-top:1px solid var(--ri-rule);padding-top:clamp(30px,4vw,44px);
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,34px)}
@media(min-width:860px){.ri-prov{grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,72px)}}
.ri-prov-h{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.7vw,2rem);letter-spacing:-.015em;margin:0 0 14px}
.ri-prov-p{font-weight:400;font-size:clamp(1.05rem,1.75vw,1.22rem);line-height:1.6;
  color:var(--ri-ink-72);max-width:44ch;margin:0 0 16px;text-wrap:pretty}
.ri-fingerprint{margin-top:clamp(20px,2.6vw,28px)}
.ri-fk{font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--ri-ink-60);margin-bottom:8px}
.ri-fv{font-family:var(--ri-mono);font-size:12.5px;line-height:1.85;color:var(--ri-ink-72);word-break:break-all;letter-spacing:.01em}
/* The record page's whole argument is "check this yourself", and the control that does it shipped
   as a hairline text link in the reading register -- quieter than the section heading above it and
   indistinguishable from prose at a glance. The home page already promoted the SAME action to a
   filled pill (.home-proof-cta, "made first-class in the reader's flow"); the page that actually
   puts the hash in front of the reader had not followed. Same geometry as .hh-cta-primary, the
   vault register's primary: cream fill on the near-black ground, sitting directly under the
   fingerprint it verifies. On black (spec 2026-09-07 section 3): the solid action is the cream
   pill, text always black on it, never white. */
.ri-verify{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;
  background:var(--ob-cream);color:var(--ri-ground);border-radius:9999px;padding:11px 24px;
  font-size:12px;font-weight:600;letter-spacing:.03em;
  text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s var(--ease-out-expo),background .25s var(--ease-hover),box-shadow .3s var(--ease-out-expo)}
.ri-verify:hover{transform:translateY(-2px);background:var(--ob-cream);box-shadow:0 14px 36px -14px rgba(255,255,255,.6)}
.ri-verify:active{transform:translateY(0) scale(.98);transition-duration:.1s}
@media(prefers-reduced-motion:reduce){.ri-verify{transition:none}.ri-verify:hover{transform:none}}
/* Narrow: the six-word label cannot hold one line, and a shrink-wrapped pill wrapping to two
   leaves a ragged well of empty fill on the second. Same escape .home-proof-cta already takes at
   the same width -- full-width block, centred, tracking eased. */
@media(max-width:420px){.ri-verify{display:block;width:100%;text-align:center;padding:14px 20px;font-size:11px;letter-spacing:.03em}}

.ri-states{display:flex;flex-direction:column}
.ri-state{padding:15px 0;border-bottom:1px solid var(--ri-hair)}
.ri-state:first-child{padding-top:0}
.ri-state-h{font-family:'Manrope',sans-serif;font-size:11.5px;letter-spacing:.03em;color:var(--ri-ink)}
.ri-state-h .ri-when{color:var(--ri-ink-50);margin-left:10px;letter-spacing:.03em}
.ri-state-p{font-size:1.02rem;line-height:1.55;color:var(--ri-ink-72);margin:7px 0 0;max-width:50ch}
.ri-state-p em{font-style:normal;color:var(--ri-ink);border-bottom:1px solid var(--ri-rule)}
.ri-state-p code{font-family:var(--ri-mono);font-size:11.5px;color:var(--ri-ink-50)}

/* The strip (Task 2, docs/superpowers/sdd/2026-07-27-version-history): a full-width third row
   under the two ri-prov columns, one line at both viewports. The revision-date phrase and the
   history link are each a single nowrap atom; the field list is the only part allowed to wrap,
   since it is the only part with unbounded length (an update can touch many fields). */
.ri-hist{grid-column:1/-1;margin:clamp(18px,2.4vw,26px) 0 0;padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--ri-hair);font-family:'Manrope',sans-serif;font-size:12px;
  letter-spacing:.02em;line-height:1.7;color:var(--ri-ink-60)}
.ri-hist-date{white-space:nowrap;color:var(--ri-ink-60)}
.ri-hist-fields{color:var(--ri-ink-72)}
.ri-hist-link{white-space:nowrap;color:var(--ri-ink);text-decoration:none;border-bottom:1px solid var(--ri-rule)}
.ri-hist-link:hover{border-color:var(--ri-ink)}

/* Instrument re-register of the shared founder-card control cluster (impeccable audit
   2026-07-25, P1). buildFounderCardHtml ships its controls in the paper-widget palette:
   #fff/#DAD7CE 8px buttons, a saturated var(--of-card) .fc-primary fill, #a2a9b0/#e9e7e0
   cool grays, all centered. Inside the vault instrument those read as "the style dropping."
   Here they speak the ri grammar instead: --ri-ink tokens, left-aligned on the card axis as
   one composed block, quiet hairline pills, the .ri-verify link register. Scoped under .ri so
   the article/entity card variants stay untouched and the founder-page contrast baseline stays
   0. The flip card (.fc-flip and its faces) is deliberately NOT touched; that artifact is right. */
.ri .fc-actions{max-width:none;margin:22px 0 0;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.ri .fc-actions button{flex:0 0 auto;min-height:44px;padding:0 22px;border-radius:9999px;border:1px solid var(--ri-rule);background:transparent;color:var(--ri-ink);letter-spacing:.03em}
.ri .fc-actions button:hover{border-color:var(--ri-ink)}
.ri .fc-actions button.fc-primary{background:transparent;border-color:var(--ri-rule);color:var(--ri-ink)}
.ri .fc-actions button.fc-primary:hover{border-color:var(--ri-ink)}
.ri .fc-shareline{justify-content:flex-start;margin:16px 0 0}
.ri .fc-shareline span{color:var(--ri-ink-60)}
.ri .fc-shareline a,.ri .fc-shareline button{color:var(--ri-ink)}
.ri .fc-status{max-width:none;margin:16px 0 0;text-align:left;color:var(--ri-ink-60);border-top-color:var(--ri-hair)}
.ri .fc-status a{color:var(--ri-ink);text-decoration-color:var(--ri-rule)}
.ri .fc-status a:hover{text-decoration-color:var(--ri-ink)}
.ri .fc-follow{max-width:none;margin:6px 0 0;text-align:left}
.ri .fc-follow-s{color:var(--ri-ink)}
.ri .fc-follow-p{color:var(--ri-ink-60)}
.ri .fc-follow-form{justify-content:flex-start}
.ri .fc-follow-form input[type=email]{border-color:var(--ri-hair);color:var(--ri-ink)}
.ri .fc-follow-form button{border-radius:9999px;border-color:var(--ri-rule);color:var(--ri-ink);min-height:44px}

@media(max-width:760px){
  .ri{padding:72px 18px 40px}
  .ri-entry{grid-template-columns:1fr;gap:0;padding:34px 0 30px}
  .ri-no{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding-top:0;margin-bottom:18px}
  .ri-no .ri-tot{flex:0 0 100%;margin-top:4px}
  .ri-no .ri-of{font-size:11px}
  .ri-no b{font-size:2.6rem;margin:0;line-height:1}
  .ri-no .ri-tot{border-top:0;padding-top:0;font-size:11px;color:var(--ri-ink-60)}
  .ri-entry h1{font-size:clamp(2.5rem,11vw,3.4rem);line-height:.98;letter-spacing:-.028em}
  .ri-figs{grid-template-columns:1fr 1fr;gap:22px 18px;padding:22px 0;margin-top:26px}
  .ri-fig-n{font-size:1.85rem}
  .ri-fig-l{font-size:11px;margin-top:8px}
  .ri-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .ri-row-k{font-size:11px}
  .ri-row-v{font-size:1.05rem}
  .ri-prov{gap:34px}
  .ri-prov-p,.ri-state-p{max-width:none}
  .ri-fingerprint .ri-fv{font-size:11px;line-height:1.8}
}


  /* The five body.founder-page .glass-nav rules that lived here (final whole-branch review,
     finding 3) were removed: no element in nav.html or any composer carries class="glass-nav"
     (home.js's own comment on this class already said so network-wide), so they never matched
     anything, and the first of the five was also a retired-colour offence twice over, in the
     decimal RGB of the paper register's old vault-ground and vault-ink tokens (register-
     gate.mjs's RETIRED list carries their hex; this file no longer does) that the widened
     register-gate now reads. See site-css.html's .glass-nav removal note for the rest of this
     class's history.
     Scroll-aware ink flip retired in effect (on black, spec 2026-09-07): the founder page has
     no cream zone left to flip into, every zone is the same #000000 ground, so this now matches
     the default dark corner-control treatment. The observer (~L1581) still toggles the class;
     left harmless rather than also touched, since removing it is a behavioural change beyond
     this sweep's token scope. */
  html.ofto-cream-zone .ofto-back,html.ofto-cream-zone .ofto-menu{color:var(--ob-ink)!important;background:rgba(0,0,0,.55)}
  /* Narrowed 836px -> 698px (closing round, design/on-black-pr3): the prior widen (same day,
     finding 6) chased the spec's literal "68ch" on the theory that a CSS ch is a character. It is
     not -- ch is the font's zero-glyph width, wider than Manrope's average letter -- so 836px (a
     788px content column, padding 24px each side) measured as intended, ~68ch, but empirically
     wrapped a real chronicle's own prose around 85-96 characters on a full line, well past the
     65-75 a readable measure actually asks for. Measured the same way this task measures itself:
     walking every real paragraph in .fh-story-body character by character with a Range, grouping
     into visual lines by line-box top, dropping each paragraph's ragged last line. 698px gives a
     650px content column that puts three chronicled founder pages at 69.5-71.4 characters average
     per full line, centred in a 65-72 target band, at a fixed 19px body size (.fh-story-body p,
     below) with no responsive bump so the figure holds at 1440, 1280 and 768 alike. Font size and
     colour are unchanged; only the column width moved. Mirrors the same correction on
     .reading/.article-body (_shared/includes/site-css.html), the two selectors this file's own
     comments already call a deliberate 1:1 mirror of one typographic system: .reading's own
     max-width moved to 650px, the same number this rule's content column lands on, so
     test/seam-balance.test.js's "the cream story shares the record column axis" (a record-only
     founder page reuses .reading for its own cream zone) still holds. test/founder-seam.test.js
     and test/seam-balance.test.js both pin this rule's literal max-width string; updated alongside
     it. */
  .fh-story{max-width:698px;margin:0 auto;padding:32px 24px 8px;scroll-margin-top:24px}
  .fh-story-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;color:var(--of-ink)}
  .fh-story-deck{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5;color:var(--ob-muted);margin-top:14px}
  .fh-story-byline{font-size:11px;letter-spacing:.03em;color:var(--ob-muted);margin-top:16px}
  .fh-story-evidence{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;border-bottom:1px solid var(--ob-hairline);padding-bottom:12px;font-size:12px}
  .fh-story-evidence a{display:inline-flex;align-items:center;min-height:44px;color:var(--ob-ink);text-decoration:underline;text-underline-offset:4px}
  .fh-story-body{margin-top:32px}
  /* Chronicle body typography (ADR 0027 decision 2, related defect): the merged founder page
     never inherited the .article-body ruleset (that class lives only on the retired /post/ and
     /essay/ templates), so h2/h3/p/blockquote here fell through to Tailwind's preflight, which
     resets headings to inherit the body's font-size and weight. Every subhead rendered flat --
     same 16px Manrope as body copy, the Sarwa audit's P1 finding. Mirrors .article-body 1:1
     (_shared/includes/head.html) rather than inventing a second system: same display-face h2
     with the Manrope label kicker, same h3, same pullquote and paragraph rhythm (on black, spec
     2026-09-07 section 3: h2/h3 move to var(--font-display), the kicker to a Manrope label). */
  .fh-story-body p,.fh-story-body li{margin:0 0 1.5rem 0;font-size:1.1875rem;line-height:1.75;color:var(--ob-ink-reading)}
  .fh-story-body > p:first-of-type::first-letter{font-family:var(--font-display);font-size:4.5rem;float:left;line-height:.9;margin:0 .12em 0 0;color:rgb(var(--ofto-primary-on-black-rgb))}
  .fh-story-body p:last-child{margin-bottom:0}
  .fh-story-body strong{font-weight:600;color:var(--of-ink)}
  .fh-story-body em{font-style:normal}
  .fh-story-body a{color:#f0577f;text-decoration:underline;text-underline-offset:0.2em;text-decoration-thickness:1px}
  .fh-story-body a:hover{opacity:0.7}
  .fh-story-body h2{font-family:var(--font-display);font-size:2.25rem;font-weight:400;line-height:1.15;letter-spacing:-0.01em;margin:3.5rem 0 1.5rem 0;color:var(--of-ink);position:relative;padding-top:1rem}
  @media(min-width:768px){.fh-story-body h2{font-size:2.75rem;margin-top:4.5rem}}
  .fh-story-body h2::before{content:attr(data-label);display:block;font-size:0.6875rem;font-style:normal;font-weight:600;letter-spacing:0.03em;color:#f0577f;margin-bottom:1rem}
  .fh-story-body h2:first-child{margin-top:0}
  .fh-story-body h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;line-height:1.3;margin:2.25rem 0 0.875rem 0;color:var(--of-ink)}
  .fh-story-body blockquote.pullquote{font-family:'Newsreader',serif;font-weight:300;font-size:1.75rem;line-height:1.3;letter-spacing:-0.005em;padding:1.25rem 0 0.5rem;margin:3rem auto;color:var(--of-ink);max-width:38em;text-align:center}
  .fh-story-body blockquote.pullquote::before{content:"";display:block;width:38px;height:2px;background:#f0577f;margin:0 auto 1.1rem}
  @media(min-width:768px){.fh-story-body blockquote.pullquote{font-size:2rem;margin:3.5rem 0}}
  .fh-story-body hr.ornament{border:none;height:1.5rem;margin:2.5rem auto;text-align:center;position:relative}
  .fh-story-body hr.ornament::after{content:"\2022   \2022   \2022";letter-spacing:1.25em;color:rgba(67,70,86,.35);font-size:0.625rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .fh-story-outro{margin-top:40px;padding-top:24px;border-top:1px solid var(--ob-hairline)}
  .fh-story-outro-k{display:block;font-size:11px;letter-spacing:.03em;color:var(--ob-muted);margin-bottom:10px}
  /* In-body founder links (retention research: highest-intent second-read surface). */
  .fh-story-body .prose-founder-link{color:#f0577f;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity .2s}
  .fh-story-body .prose-founder-link:hover{opacity:.7}
  /* "Read this next". Pulls a finished chronicle into another (retention research). */
  .fh-story-next{display:block;margin-top:44px;padding:22px 26px;border:1px solid var(--ob-hairline);border-radius:2px;text-decoration:none;transition:border-color .2s var(--ease-hover),transform .2s var(--ease-hover)}
  .fh-story-next:hover{border-color:#f0577f;transform:translateY(-2px)}
  .fh-story-next-label{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;color:#f0577f;margin-bottom:9px}
  .fh-story-next-title{display:block;font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.22;color:var(--of-ink)}
  .fh-story-next-cta{display:block;margin-top:9px;font-size:11px;font-weight:500;letter-spacing:.03em;color:var(--ob-muted)}
  /* Record-only pages (data-cream-zone="record", set at build time -- see founderVars in
     build.js): halve the cream zone's opening padding to join the seam rhythm. Fix loop 2
     (2026-07-26): the prior colon-has-scoped rule used a single-backslash bracket escape
     inside a JS template literal -- JS itself swallows a backslash before a non-escape
     character, so a single backslash there evaluates to no backslash at all in the emitted
     string, and the emitted CSS carried an UNESCAPED bracket in a class selector, which every
     browser treats as invalid and silently drops the whole rule. It also never discriminated:
     .fh-story-title renders INSIDE the cream-zone element as a sibling before this section
     (verified against the built DOM), so the old guard matched every founder page, story or
     not. This rule now keys off the build-time modifier instead of a runtime guess, and the
     bracket uses a doubled backslash in source so a single literal backslash reaches the
     emitted HTML/CSS. */
  [data-cream-zone="record"] > section > .max-w-\[680px\]:first-child{padding-top:24px}
  @media(min-width:768px){[data-cream-zone="record"] > section > .max-w-\[680px\]:first-child{padding-top:40px}}