/* v2.css — BFC Article Anatomy v2, page rules only.
 *
 * WHY THIS FILE EXISTS (D17). These rules used to be appended to `global.css`. That file is served
 * with `Cache-Control: max-age=31536000` — one year — and every page references it as
 * `global.css?v=7c6d4230`, a token inherited verbatim from the captured template that does NOT
 * change when the file changes. A returning browser therefore holds the old stylesheet for up to a
 * year and has no reason to re-fetch it: the new pages would render with these rules missing.
 *
 * The token cannot simply be bumped — it lives in the cloned template, so changing it alters V1
 * page bytes and breaks the STR byte-identity gate.
 *
 * So V2 rules live here instead, and the build emits this file under a CONTENT-HASHED name
 * (`/styles/v2.<hash>.css`) linked only from V2 pages. Three consequences, all deliberate:
 *   - V1 pages are untouched, so their bytes and their long cache stay exactly as they are;
 *   - the URL changes whenever the content changes, so cache invalidation is structural rather
 *     than dependent on someone remembering to bump a query string;
 *   - a brand-new filename has no cached copy anywhere, so the one-year header works FOR us.
 *
 * Add v2-only rules here, never to global.css. `npm test` asserts that every V2 page references
 * the hash of this file's current contents.
 */

/* ══ V2 DESIGN-SYSTEM REFINEMENT — ratified Aug 2026 ═════════════════════════════
 *
 * A controlled refinement of the V2 baseline, applied BEFORE Batch 3 so Financing is built on the
 * final visual system rather than retrofitted onto it afterwards.
 *
 * WHY EVERY LINE OF IT IS HERE AND NOT IN global.css. The legacy sheet is shared with the deployed
 * STR pages and served under a one-year cache with a token that never changes (D17). Restyling it
 * would restyle live STR pages we are forbidden to touch, and could not be cache-busted anyway.
 * v2.css loads AFTER global.css and only on V2 pages, so an equal-specificity rule here wins for
 * exactly the pages this refinement governs and no others. That is why the overrides below look
 * like duplicates of global rules: they are deliberate, scoped re-declarations.
 *
 * THE FONTS SHIP WITH THE STYLESHEET THAT USES THEM, and the faces themselves are declared once,
 * in the D98 block at the foot of this file. What stood here was the D31/D34 declaration of the
 * previous three-family system; it was superseded in full on 23 Sep 2026 and is removed rather than
 * left as a commented history, because a retired face NAMED in a shipped stylesheet is exactly what
 * the acceptance check reads for. The reasoning that survives is D17's, above: these rules live in a
 * content-hashed file so they reach every browser, and never in global.css.
 */

:root{
  --ivory:#faf7f1;
  /* One step deeper, still warm. The full-width newsletter band (`.s6`) uses `--paper` to separate
     itself from the article above and the footer below. Warming the page ground without warming
     that band left a cool stripe across an otherwise warm page — a seam introduced by this change,
     not one that was there before. Flattening it to `--ivory` would remove the separation the band
     exists for, so it moves into the warm family rather than out of the design. */
  --ivory-sink:#f3efe4;
}

body{background:var(--ivory)}

/* The newsletter band's colour is an INLINE style in the captured template
   (`style="background:var(--paper)"`), which outranks any stylesheet rule. Rather than answer that
   with `!important`, this redefines `--paper` ON the element: the inline declaration then resolves
   against the warm value. It works THROUGH the inline style instead of fighting it, needs no
   specificity escalation, and leaves the template untouched. Scoped to `.s6`, so `--paper` keeps its
   cool value everywhere else it is used — panels, inputs, table headers, the figure plate. */
.s6{--paper:var(--ivory-sink)}

/* H2/H3/H4 left the display face. global.css groups h1-h3 under `--display` and h4 separately; the ruling
   separates them from h1. h4 is included because on these pages it is not an editorial heading at
   all — it is the label on a callout panel ("Key Takeaways", "The Common Mistake"), and the ruling
   puts callout UI in the sans. Equal specificity, later source, so this wins without !important.
   SUPERSEDED by D98, which returns article h2/h3 to the serif and keeps h4 in the sans. */
h2,h3,h4{font-family:var(--sans)}

/* The guide-type label stops repeating the hero's gold. The BASE `.typebadge` treatment is already
   the muted navy the ruling asks for (#3d5c7a on #e6eef5); it was only the `.ahero` override that
   forced gold, so this restores the base rather than inventing a third treatment. `!important` is
   required only because the rule it answers uses it. */
.ahero .typebadge{
  color:#3d5c7a!important;background:#e6eef5!important;
  border:1px solid rgba(255,255,255,.16)!important;
}


/* .checklist — BFC Article Anatomy v2 "Your Action Plan" (added Aug 2026).
   Its step counter is the one genuinely NUMERIC context on an article page today, so it takes
   `--numeric` (then a monospace, retired as a face by D98) rather than the decorative `--mono`. Changed here at the
   declaration rather than overridden below it: an override placed earlier in the file loses to this
   rule and silently does nothing, which is how the first attempt failed.
   Additive: no existing page uses `.checklist` as a block (the legacy `.rtype.checklist` chip is
   a different selector), so V1/STR output is unaffected. Styled as a numbered sibling of
   .takeaways using the locked tokens. */
.checklist{border:1px solid var(--hairline);border-left:2px solid var(--navy);border-radius:3px;background:#fbfcfe;padding:22px 24px;margin:30px 0}
.checklist h2{font-size:1.05rem;font-weight:400;letter-spacing:normal;line-height:inherit;margin:0 0 12px}
.checklist ol{list-style:none;margin:0;padding:0;counter-reset:cl}
.checklist li{counter-increment:cl;position:relative;padding:6px 0 6px 32px;font-size:.98rem;color:#2f3a54}
.checklist li::before{content:counter(cl,decimal-leading-zero);position:absolute;left:0;top:6px;font-family:var(--numeric);font-size:.66rem;color:var(--gold-deep,#8a6a16);font-weight:600}

/* Signature-diagram assets are text-dense: below their natural width they scroll inside the
   figure rather than shrinking to illegibility. The PAGE never scrolls horizontally — the
   figure's own container does. */
.figure{overflow-x:auto}
.figure svg{display:block;width:100%;height:auto;min-width:520px}

/* --- mobile scroll affordance -------------------------------------------------
 * A figure narrower than its content scrolls (above). On a phone that means the reader's first
 * paint of a calculation diagram can be labels with every VALUE off-screen — "Net operating
 * income" with no $15,516 — which reads as missing information rather than as more to see.
 *
 * Ruled: keep the 520px minimum and the scrolling (shrinking these to fit ~350px would trade an
 * incomplete first paint for illegible numbers, which is worse), and add the missing SIGNAL. Two
 * cues, both at the component level — nothing is baked into an SVG, so no approved figure changes.
 */

/* 1 · The right-edge fade is NOT here, deliberately. The obvious implementation — scroll-shadow
 * gradients on the container, two `local` and two `scroll`, which self-hide at each end — was
 * written, rendered, and found to do nothing: these SVGs paint their own opaque background across
 * the whole canvas, so the container's background sits behind the figure where no one can see it.
 * Doing it properly needs the scroll box moved into a child element so an overlay can sit above the
 * content, which is a structural change to every figure and is being ruled on separately. Shipping
 * the gradients meanwhile would have added twelve lines of CSS that render nothing while reading,
 * to anyone maintaining this, as though the fade were handled.
 */

/* 2 · The words, because a shadow alone does not tell a first-time reader what to DO. Shown only
 * when the figure is actually narrower than its content.
 *
 * 564px = the SVG minimum (520px, above) + the figure's horizontal padding (22px a side, in
 * global.css). A container query asks the COLUMN's width rather than the viewport's, so gutters,
 * zoom and a future sidebar cannot put it out of step.
 *
 * It is a LITERAL, and CSS gives no way to make it otherwise: a container query condition cannot
 * read a custom property. So the relationship between these three numbers is asserted in
 * `test/architecture.test.mjs` instead. An earlier version of this comment claimed the breakpoint
 * "follows" if you change the minimum or the padding. It does not — change either and this number
 * must be changed by hand, which is exactly why the test exists. Between the old and new
 * thresholds the cue would otherwise hide while the figure still scrolls, or appear when there is
 * nothing to scroll to. */
.article{container-type:inline-size}
/* `.article .figure-swipe`, not `.figure-swipe`. This is a <p> inside .article, and global.css
 * carries `.article p{margin-bottom:20px;font-size:1.04rem}` — one specificity point higher than a
 * lone class, so the bare selector lost and the cue rendered at 16.6px beside figure text that
 * renders at about 7px. Measured, not guessed: the SVG is drawn on a 700-unit canvas and displayed
 * at 520px, so everything inside it is scaled to 0.74 while HTML text is not. */
.article .figure-swipe{
  display:none;margin:0 0 6px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.04em;color:var(--gold-deep,#8a6a16);text-align:right;opacity:.85;
  padding-right:23px;   /* line the arrow up with the figure's CONTENT edge: 22px pad + 1px border */
}
@container (max-width:564px){ .article .figure-swipe{display:block} }

/* Authored figure footnote — answers a starred claim inside the diagram. Sentence case and
   left-aligned, deliberately unlike .figcap's uppercase mono label: this is a qualification the
   reader is meant to READ, not a caption. Three Tax nodes carry one. */
/* Below the scroll canvas, in reading order: swipe cue (mobile only) → caption → footnote(s).
   Each is a SIBLING of .figure so only the canvas moves horizontally. The figure's own bottom
   margin is tightened here so the group still reads as one unit. */
.article .figure{margin-bottom:12px}
/* The followers align with the figure's CONTENT edge, not the column edge — 22px of figure padding
   plus its 1px border, the same constant the swipe cue already uses. Inside the box the caption
   inherited that inset for free; outside it has to be stated, or the caption's text sits a
   character-width left of the artwork it describes. */
.article .figcap{margin:0 0 6px;padding:0 23px}
.article .fignote{font-family:var(--mono);font-size:.62rem;line-height:1.5;color:var(--ink-soft);
  text-align:left;margin:0 0 6px;padding:0 23px;letter-spacing:.01em}
.article .figure + .figure-swipe ~ .figcap:last-of-type{margin-bottom:0}


/* ══ V2 LIBRARY SYSTEM — hubs, chips, accessibility, the PRO masthead ═══════════════
 *
 * Added 18 Sep 2026 with the editorial niche hub. Every selector below is NEW: nothing here
 * can reach a V1/STR page, which is the same gate the rest of this file runs under.
 */

/* ── shared ─────────────────────────────────────────────────────────────── */

.bfc-hub { --band: clamp(46px, 5.4vw, 72px); }
.bfc-hub section { padding: var(--band) 0; }

/* Eyebrow: the sans, not mono. v2.css already retired mono as a decorative face; the legacy hubs
   predate that and still render these in IBM Plex Mono. */
.eb {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep, #8a6a16); display: block;
}
.navy .eb, .eb-on-navy { color: var(--gold); }

.num {
  font-family: var(--numeric, ui-monospace, monospace);
  font-size: .78rem; font-weight: 600; color: var(--gold-deep, #8a6a16);
  letter-spacing: .02em;
}

/* Type chips — one size, one shape, hue carries the family but never carries the meaning alone:
   the word is always present. The legacy hub rendered DECISION GUIDE as a large peach block and
   CONCEPT GUIDE as a small blue one, so two chips of the same rank read as different weights. */
.chip {
  display: inline-block; flex: none;
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
  min-width: 108px; text-align: center;
}
.chip-concept   { color: #3d5c7a; background: #e8eff6; border-color: #d6e3ef; }
.chip-decision  { color: #8a5a2a; background: #f8efe4; border-color: #eddfcd; }
.chip-howto     { color: #3f6b52; background: #e7f1eb; border-color: #d4e6dc; }
.chip-reference { color: #55506e; background: #eeecf5; border-color: #e0dcee; }
.chip-pillar    { color: #7a5a12; background: #f7f0dc; border-color: #ece0bd; }
.chip-tool      { color: #6b4a74; background: #f2eaf5; border-color: #e6daeb; }

/* ── hub hero ───────────────────────────────────────────────────────────── */

.hubhero { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(44px, 5.5vw, 72px); }
.hubhero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08;
  letter-spacing: -.022em; max-width: 19ch; color: #fff;
}
.hubhero .promise {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--gold); margin-top: 16px; max-width: 46ch;
}
.hubhero .dek2 {
  font-size: 1.02rem; line-height: 1.66; color: var(--on-navy);
  max-width: 54ch; margin-top: 18px;
}

/* The frame rail — Scale → Hold → Exit. A single line that tells the reader what the domain is
   about before any card does. */
.frame {
  margin-top: clamp(26px, 3vw, 38px); padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.frame .eb { margin: 0; }
.frame .steps {
  font-family: var(--display); font-size: 1.06rem; color: #fff; font-weight: 400;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.frame .steps i { font-style: normal; color: var(--gold); opacity: .8; }

/* ── jump index (niche hub) ─────────────────────────────────────────────── */

.jump { margin-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line); }
.jumprow {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: 8px 18px; padding: 15px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: .18s;
}
.jumprow:hover { background: rgba(255,255,255,.035); }
.jumprow h3 { font-family: var(--display); font-size: 1.26rem; color: #fff; font-weight: 400; margin: 0; }
.jumprow p  { grid-column: 2; margin: 3px 0 0; font-size: .89rem; color: var(--on-navy-soft); line-height: 1.5; }
.jumprow .go {
  font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-navy-soft); transition: .18s;
}
.jumprow:hover .go { color: var(--gold); }

/* ── flagship "start here" card ─────────────────────────────────────────── */

.flag {
  display: block; background: #fff; border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); border-radius: 4px;
  padding: clamp(22px, 2.6vw, 32px); text-decoration: none;
  transition: .2s; box-shadow: 0 1px 2px rgba(16,31,66,.04);
}
.flag:hover { box-shadow: 0 10px 30px rgba(16,31,66,.09); transform: translateY(-1px); }
.flag h3 {
  font-family: var(--display); font-weight: 400; color: var(--navy);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.14; margin: 10px 0 0; max-width: 24ch;
}
.flag .sub { margin-top: 12px; font-size: 1rem; line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }
.flag .covers { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.flag .covers ul {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 28px;
}
.flag .covers li { font-size: .92rem; color: var(--ink); padding-left: 22px; position: relative; line-height: 1.5; }
.flag .covers li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-deep, #8a6a16); opacity: .55; }
.flag .foot {
  margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep, #8a6a16);
}
.flag .foot .meta { color: var(--ink-soft); font-weight: 500; letter-spacing: .06em; }

/* ── curriculum stages (domain hub) ─────────────────────────────────────── */

.stage { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; padding: 26px 0; border-top: 1px solid var(--hairline); }
.stage:first-of-type { border-top: 0; padding-top: 6px; }
.stage .sname { font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--navy); margin: 2px 0 0; letter-spacing: -.012em; }
.stage .spurpose { font-size: .93rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.55; max-width: 62ch; }
.stage .rows { margin-top: 14px; }

.grow {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 14px;
  padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 3px;
  background: #fff; text-decoration: none; margin-bottom: 7px; transition: .16s;
}
.grow:hover { border-color: #c9d3e2; background: #fcfdff; }
.grow .t { font-family: var(--display); font-size: 1.04rem; font-weight: 400; color: var(--navy); line-height: 1.3; }
.grow .w { grid-column: 2; font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }

/* ── three-column triage (niche hub) ────────────────────────────────────── */

.tri { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: clamp(22px, 2.6vw, 40px); margin-top: 30px; }
.tricol h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep, #8a6a16);
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline); margin: 0;
}
.tricol a {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; transition: .16s;
}
.tricol a:last-child { border-bottom: 0; }
.tricol a:hover .tt { color: var(--gold-deep, #8a6a16); }
.tricol .tt { font-size: .95rem; color: var(--navy); line-height: 1.4; }
.tricol .empty { font-size: .89rem; color: var(--ink-soft); font-style: italic; padding: 12px 0; }

/* ── domain band (niche hub) ────────────────────────────────────────────── */

.domband { border-top: 1px solid var(--hairline); }
.domband:nth-of-type(even) { background: #fff; }
.domhead { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 6px 18px; margin-bottom: 26px; }
.domhead h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--ink); margin: 0; letter-spacing: -.018em; }
.domhead .motto { grid-column: 2; font-family: var(--display); font-style: italic; color: var(--gold-deep, #8a6a16); font-size: 1.02rem; margin-top: 2px; }
.domhead .open {
  font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--gold-deep, #8a6a16);
  border-bottom: 1px solid rgba(138,106,22,.3); padding-bottom: 4px; white-space: nowrap;
}

/* ── related-disciplines band ───────────────────────────────────────────── */

.enable { color: var(--on-navy); }
.enable h2 { font-family: var(--display); font-weight: 400; color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 10px 0 0; }
.enable .lead { color: var(--on-navy-soft); margin-top: 12px; max-width: 58ch; font-size: 1rem; line-height: 1.6; }
.encards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.encard {
  display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 4px;
  background: rgba(255,255,255,.035); text-decoration: none; transition: .2s;
}
.encard:hover { background: rgba(255,255,255,.07); border-color: rgba(201,168,76,.4); }
.encard h3 { font-family: var(--display); font-weight: 400; color: #fff; font-size: 1.18rem; margin: 8px 0 0; }
.encard p { color: var(--on-navy-soft); font-size: .89rem; line-height: 1.55; margin-top: 8px; }

/* ── article refinements ────────────────────────────────────────────────── */

/* One context strip in the hero replaces the duplicated type badge + "Guide details" rail card. */
.ctx {
  display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 26px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.ctx div { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.ctx dt {
  font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-navy-soft);
}
.ctx dd { margin: 0; font-size: .95rem; color: #fff; }

/* Byline sits with the context strip rather than floating under a half-empty hero. */
.ahero .abyline { margin-top: 22px; }

/* Continue-learning cards: equal height, one reason line each, consistent chip. */
.article .continue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.article .continue > a {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  background: #fff; border: 1px solid var(--hairline); border-radius: 4px;
  padding: 18px; text-decoration: none; transition: .18s;
}
.article .continue > a:hover { border-color: #c9d3e2; box-shadow: 0 8px 24px rgba(16,31,66,.07); }
.article .continue h3 { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--navy); margin: 0; line-height: 1.24; }
.article .continue p { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* One disclaimer treatment site-wide: short, sentence case, italic. Replaces both the all-caps
   grey block on Library pages and the separate blog variant. */
.article .disclaim {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--hairline);
  font-family: var(--sans); font-style: italic; font-size: .86rem; line-height: 1.6;
  color: var(--ink-soft); text-transform: none; letter-spacing: normal; max-width: 70ch;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .tri, .encards { grid-template-columns: 1fr; gap: 26px; }
  .article .continue { grid-template-columns: 1fr; }
  .flag .covers ul { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; gap: 0; }
  .stage .num { display: block; margin-bottom: 6px; }
  .domhead { grid-template-columns: 1fr; }
  .domhead .motto, .jumprow p { grid-column: 1; }
  .domhead .open { margin-top: 12px; }
  .jumprow { grid-template-columns: 1fr auto; }
  .jumprow .num { grid-row: 1; }
  .jumprow h3 { grid-column: 1; }
  .frame { flex-direction: column; gap: 8px; }
  .ctx { gap: 0 20px; }
}


/* Related-disciplines strip on a light band (the navy .encard version is for the domain hub). */
.relstrip {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.relstrip .eb { margin-right: 4px; }
.relchip {
  font-family: var(--sans); font-size: .76rem; font-weight: 500; color: var(--navy);
  border: 1px solid var(--hairline); background: #fff; border-radius: 3px;
  padding: 7px 13px; text-decoration: none; transition: .16s;
}
.relchip:hover { border-color: var(--gold); color: var(--gold-deep, #8a6a16); }

/* Hub section headings take the display face — hubs are navigational surfaces. Article subheads
   stay in the sans, which is the rule v2.css already set for reading surfaces. */
.bfc-hub section h2.sech {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 10px 0 6px; letter-spacing: -.018em;
}

/* Continue-learning chips must not stretch to the card width. */
.article .continue > a { align-items: flex-start; }

/* The type badge is retired from the hero: the context strip below the dek carries domain and
   type, and carrying both was the duplication this consolidates. */
.ahero .typebadge.retired { display: none; }

/* ── rev 2: accessibility, semantics, the PRO masthead ──────────────────── */

/* Skip link — the site has none today, on any route. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #101f42; font-weight: 600; font-size: .9rem;
  padding: 12px 20px; border-radius: 0 0 3px 0;
}
.skip:focus { left: 0; }

/* Visually hidden, still announced. Used for headings a sighted reader does not need twice. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A visible focus ring. global.css sets none, so keyboard users currently navigate blind. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}

/* THE FOCUS RING ON THE CONTENT LANDMARK, PAINTED INSIDE IT.
 *
 * The skip link moves focus to `<main tabindex="-1">` and the UA paints its own 1px ring. Measured
 * on served staging, that ring is perceptible on a D108 guide, About and Contact and NOT
 * perceptible on Home or the Library root. The cause is geometry, not colour: `<main>` is the full
 * viewport wide and runs 3,500-6,800px below the fold, and an outline is drawn OUTSIDE the border
 * edge, so on those pages every painted pixel lands off screen. A focus treatment that exists in
 * computed style and produces no visible change is not a focus treatment.
 *
 * WHY NOT `outline-offset: -2px`, WHICH WAS TRIED FIRST AND MEASURED. An outline paints in the
 * element's own background-and-border phase; descendant backgrounds paint after it. `<main>`'s
 * first child on every V2 family is a full-bleed `section.hero` with an opaque background
 * (measured rgb(16,31,66) over 0-747px of a 5,458px landmark), so an inset outline on the parent
 * is painted and then covered. It made all five pages imperceptible - worse than the UA ring,
 * which at least showed on three. The ring has to paint ABOVE the children, and that is a
 * pseudo-element.
 *
 * THE COLOUR IS `--gold-deep`, NOT `--gold`, and that is the one real choice here. This ring is
 * the only element in the system that crosses BOTH grounds: it runs from the navy hero down
 * through the ivory body. Measured against every ground this file declares, `--gold` is 7.09:1 on
 * navy but 2.14:1 on ivory and 1.99:1 on ivory-sink, failing WCAG 2.2's 3:1 for non-text contrast
 * over most of the ring's length. `--gold-deep` is 3.20 / 3.57 / 4.73 / 4.40 / 5.06 against navy,
 * navy-deep, ivory, ivory-sink and paper - the only token already in this system that clears all
 * five. `--ink` is the mirror failure: 15.33:1 on ivory, 1.01:1 on navy.
 *
 * IT IS STILL THE HOUSE FOCUS LANGUAGE - 2px solid gold, an existing token, keyboard-only via
 * :focus-visible - drawn with a border because a border can be stacked and an outline cannot.
 *
 * `position: relative` is permanent and layout-neutral: measured across six pages at 1440 and 390,
 * the elements whose boxes move are the same four in a static-to-static control run (the `.rise`
 * reveal in the signup band), so the count attributable to this declaration is zero.
 *
 * THE UA OUTLINE IS LEFT ALONE - no `outline: none` here. Where the browser's own ring was already
 * perceptible it still is; this only ever adds. */
/* AND THE SKIP TARGET LANDS BELOW THE STICKY HEADER (S1).
 *
 * Fragment navigation aligns `<main>` with the top of the viewport, and `header` is
 * `position:sticky;top:0`, so the header then sits ON the first 75px of the target: at 390 the
 * breadcrumb was completely hidden, at 1440 the head's top spacing was compressed against the
 * header. The reader was sent to the content and shown the wrong edge of it. It predates the focus
 * correction; it is closed with it because they are one behaviour.
 *
 * `scroll-margin-top` is the mechanism this file already uses for exactly this - `.guide h2[id]`
 * has carried `calc(var(--ghead-h) + 24px)` since D108 - so the skip target is the same idea
 * applied to the landmark, against the same measurement.
 *
 * NOTE WHAT THIS DOES TO THE SCROLL. On every V2 family `<main>` already begins at the header's
 * bottom edge at rest, so the correct landing position is scrollY 0 and the page does not move at
 * all. "The page scrolled" was never the requirement - it was a symptom of the target being
 * mis-aligned - so the gate measures the target's position against the header instead. */
main[tabindex="-1"] { position: relative; scroll-margin-top: var(--site-head-h); }
main[tabindex="-1"]:focus-visible::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border: 2px solid var(--gold-deep, #8a6a16);
}

/* Section intros — the explanatory copy a hub needs to be understandable on its own. */
.secintro { margin-bottom: 30px; max-width: 68ch; }
.domintro {
  font-size: 1.02rem; line-height: 1.68; color: var(--ink);
  max-width: 74ch; margin: 0 0 26px;
}
section.alt { background: #fff; border-top: 1px solid var(--hairline); }

/* Jump index, rebuilt as a list inside a labelled nav. It was a stack of <h3>s before any <h2>
   on the page — a heading outline that told a screen reader the six domains were subsections of
   nothing. */
.jump ul { list-style: none; margin: 0; padding: 0; }
.jump li { margin: 0; }
.jumprow .jt {
  font-family: var(--display); font-size: 1.26rem; color: #fff; font-weight: 400; line-height: 1.2;
}
.jumprow .jp { grid-column: 2; font-size: .89rem; color: var(--on-navy-soft); line-height: 1.5; }

/* The Profitable Real Estate Operator — masthead treatment.
   The lockup appears once per page, in the subscribe band, and identifies the PUBLICATION.
   The framework of the same name is always set in running prose, never as this mark. */
.promast { text-align: center; }
.promast img {
  display: block; margin: 0 auto; width: 100%; max-width: 430px; height: auto;
}
.promast .prosub {
  margin: 20px auto 0; max-width: 56ch; font-size: .98rem; line-height: 1.62; color: var(--ink-soft);
}
.s6 form { margin-top: 26px; }
@media (max-width: 600px) { .promast img { max-width: 300px; } }

/* "Key Takeaways" promoted from a panel label to a real h2 so the article's outline starts at the
   summary rather than at the first body subhead. Visual treatment is unchanged. */
.article .takeaways h2.tkh {
  font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: inherit;
  letter-spacing: normal; margin: 0 0 12px; color: var(--ink);
}

/* The italic promise under a discipline name on the Library root. `.motto` says the same thing on
   a niche hub but is scoped to `.domhead`, and widening that selector would restyle six bands on
   two pages to serve one. One rule, one place. */
.stage .dpromise {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--gold-deep, #8a6a16); font-size: 1.04rem; margin-top: 5px;
}

/* ---- THE RULED PLATE ---------------------------------------------------------------------- */
/* A fixed set of numbered cells read as one object rather than as stacked rows, with the sequence
   drawn through it: a rule in at the top, a rule out at the bottom, and the two ends named.
   Added 19 Sep 2026 for the homepage's six disciplines, as treatment C of three rendered against
   the existing page as control -- the alternative was a separate figure above a separate list,
   which said the same thing twice in two vocabularies.

   NOT A HOMEPAGE COMPONENT. It is named for what it is, so the next fixed set that has to read as
   a system can use it. The cells sit outside .stage, so the two rules that give a discipline its
   voice are restated below -- restated, never re-invented: same family, same italic, same gold. */
.dplate { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px;
  border-top: 1px solid rgba(22,35,63,.14); border-left: 1px solid rgba(22,35,63,.14); }
.dplate .dcell { border-right: 1px solid rgba(22,35,63,.14);
  border-bottom: 1px solid rgba(22,35,63,.14); padding: 26px 28px 30px; }
.dplate .num { display: block; margin-bottom: 10px; }
/* The plate sits outside .stage, so the two rules that give a discipline its voice have to be
   restated here. Restated, not re-invented: same family, same italic, same gold as .stage. */
.dplate .sname { font-family: var(--display); font-size: 1.3rem; font-weight: 400;
  color: var(--navy); margin: 0; letter-spacing: -.012em; }
.dplate .dpromise { font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--gold-deep, #8a6a16); font-size: 1.04rem; margin: 5px 0 0; }
@media (max-width: 760px) {
  .dplate { grid-template-columns: 1fr; }
  .dplate .dcell { padding: 20px 0 22px; border-right: 0; border-left: 0; }
  .dplate { border-left: 0; }
}

.dsys { margin-top: 30px; }
.dsys-cap { display: block; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); }
.dsys-in { margin-bottom: 8px; }
.dsys-out { margin-top: 8px; text-align: right; }
.dplate-sys { position: relative; border-top-color: var(--gold); border-top-width: 2px; }
.dplate-sys::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  border-bottom: 2px solid var(--gold); }
@media (max-width: 760px) { .dsys-out { text-align: left; } }
/* ══ BODY LINKS (D94; first used by the STR Domain Guides, 22 Sep 2026) ═══════════════════════════
 * The captured template's global.css sets `a{text-decoration:none;color:inherit}`, so a structural
 * body link would publish indistinguishable from the prose around it and a Domain Guide's router
 * would read as plain text. Links inside the article's prose blocks -- paragraphs, list items,
 * blockquotes and table cells -- take the captured Library's link colour (gold-deep) and an
 * underline, so the meaning is not carried by colour alone. Continue cards (an <a> that CONTAINS its
 * paragraph), the rail and all chrome sit outside these selectors and are unchanged. */
.article p a, .article li a, .article td a, .article th a {
  color: var(--gold-deep, #8a6a16);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article p a:hover, .article li a:hover, .article td a:hover, .article th a:hover {
  color: var(--navy, #101f42);
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * D98 — THE APPROVED VISUAL DIRECTION (ratified 22 Sep 2026, implemented 23 Sep 2026)
 *
 * Brand's Implementation Handoff, §1 through §5, against the measured repository. Everything here
 * is presentation: no route, schema, content type or semantic model moves. It is appended rather
 * than merged into the sections above because equal-specificity later source wins, so each rule
 * states what it replaces without editing the rule it replaces - and the file stays readable as a
 * history of rulings rather than a flattened end state.
 *
 * REACH. This file ships under a content-hashed name and is linked only from V2 pages, so every
 * rule below reaches exactly the 139 producer-rendered pages and none of the 40 capture-emitted
 * ones. That boundary is the handoff's §0.2 and is deliberate: the legacy populations converge
 * through their own producers, not through a stylesheet that never reaches them.
 * ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ---- §1.2 FAMILIES. Source Serif 4 carries long-form reading; Source Sans 3 is the functional
     scan layer. `--display` is kept as a name because global.css has 30-odd users of it, and it
     now resolves to the serif: one declaration moves every heading. `--mono` and `--numeric` are
     RETIRED as faces - both resolve to the sans, and genuine numeric contexts ask for tabular
     figures instead of a monospace. The names survive so nothing downstream has to change. */
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --display:var(--serif);
  --mono:var(--sans);
  --numeric:var(--sans);

  /* ---- §1.1 COLOUR. Redeclared here for V2 pages only. The legacy sheet's values stay exactly as
     they are for the capture-emitted population. */
  --navy:#101f42;
  --navy-deep:#0a1530;
  --on-navy:#e9edf4;
  --on-navy-2:#aab4c7;
  --on-navy-line:rgba(255,255,255,.12);
  --gold:#c9a84c;
  --gold-text:#8a6a16;
  --gold-deep:#8a6a16;
  /* THE SHARED STICKY HEADER'S HEIGHT, PROMOTED RATHER THAN DUPLICATED.
     This value already existed as `--ghead-h` on `.guide`, where D108 declared it as a local
     property precisely so it could not escape that scope - correct while only the guide family
     needed it. The skip target needs the same number on every family, and the one thing not to do
     is type 76px a second time: two copies of the header's height is exactly the drift D108's own
     comment warns about. So the literal lives here once and `.guide` derives its local name from
     it, keeping D108's scoping intent with a single source.
     MEASURED, not assumed: the header is 75px at 1440 and 71px at 390 on every V2 family, so 76px
     clears it at both widths. A skip target that overshoots by a pixel is invisible; one that
     undershoots puts the breadcrumb back under the header, which is the defect. */
  --site-head-h:76px;
  --ivory:#faf7f1;
  --paper:#ffffff;
  --sink:#f3efe4;
  --ivory-sink:var(--sink);
  --ink:#131f38;
  --ink-2:#434c63;
  --ink-3:#6a7186;
  --ink-soft:var(--ink-2);
  --rule:#e3ddd0;
  --rule-2:#cfc6b2;
  --hairline:var(--rule);
  --note:#b5523b;
  --note-text:#9a3f2c;

  /* ---- §3 NICHE MARKERS. Swatch value and the text-safe value that carries any coloured niche
     NAME. Nothing else may take these: no grounds, no headlines, no buttons, no body text. */
  --niche-str:#c9a84c;      --niche-str-text:#7f6214;
  --niche-ltr:#3d8a5e;      --niche-ltr-text:#2c6a47;
  --niche-flip:#c05c20;     --niche-flip-text:#9c4513;
}

/* The page ground, and tabular lining figures wherever the sans carries numbers. */
body{background:var(--ivory);color:var(--ink);font-family:var(--sans)}
.article,.article p,.article li,.article blockquote{font-feature-settings:normal}

/* ---- §1.3 TYPE ROLES ------------------------------------------------------------------------
 * Sizes are desktop / phone at the 600px breakpoint, in px, as specified. The clamp() expressions
 * they replace were tuned for the previous display face on a cool ground and do not survive a change of face. */

.navy.hubhero h1,.hubhero h1{font-family:var(--serif);font-size:50px;font-weight:400;line-height:1.06;letter-spacing:-.018em}
.domain-hub .hubhero h1{font-size:44px}
.ahero h1,.article h1{font-family:var(--serif);font-size:46px;font-weight:450;line-height:1.08;letter-spacing:-.012em;max-width:22ch}
.plainhead h1{font-size:40px}
.dek{font-family:var(--serif);font-size:21.5px;font-weight:400;line-height:1.5;color:var(--ink-2);max-width:40em;letter-spacing:normal;margin-top:14px}
.navy .dek,.hubhero .dek{color:var(--on-navy)}

/* Landing-section H2 (home, hubs, About, Books, legal). A2: the gap to the next element was 0. */
.sechead h2,.s1 h2,.s2 h2,.s3 h2,.s4 h2,.s5 h2,section > .wrap > h2{
  font-family:var(--serif);font-size:38px;font-weight:500;line-height:1.15;letter-spacing:-.012em;margin-bottom:14px}

/* Article headings. h2/h3 return to the serif - the ruling that sent them to the sans is superseded
   by the approved system, where the serif carries the reading hierarchy and the sans is the scan
   layer. h4 stays sans because on these pages it labels a component, not a section. */
.article h2{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:1.9em 0 .55em}
.article h3{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.25;margin:1.5em 0 .4em}
.article h4{font-family:var(--sans);font-size:15.5px;font-weight:650}

/* Body: the serif carries long-form prose at 19px/1.62. */
.article p,.article li,.article blockquote{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink)}
.article p{margin:0 0 1.05em}
.article strong{font-weight:650}

/* Labels, eyebrows, chips, navigation, metadata, captions, buttons - the sans scan layer. */
.eyebrow,.sec-eb,.lb,.ct,.crumb,.byline,.rtype,.chip,.fignote,.caption{font-family:var(--sans)}
.eyebrow,.sec-eb{font-size:12.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.bar nav a,.bar .tlink{font-family:var(--sans);font-size:15.5px;font-weight:500}
.btn,.more,.tlink{font-family:var(--sans);font-size:15.5px;font-weight:650}
/* `.figcap`, NOT `figcaption` (D99 M4). The D98 rule named the ELEMENT and the renderer emits a
 * `div.figcap`, so nothing here ever reached a caption: all 96 kept global.css's treatment - the
 * mono face at .62rem (about 9.9px rendered), uppercase and centred, which is a label's costume on
 * the one sentence that says what the figure means. Same declarations, the class the corpus
 * actually carries, and `figcaption` kept for anything that emits the element. */
.article .fignote,.article .figcap,.article figcaption{font-family:var(--sans);font-size:15px;font-weight:400;
  line-height:1.45;color:var(--ink-3);letter-spacing:normal;text-transform:none;text-align:left}

/* Tabular lining figures wherever the sans carries numbers, since the mono is retired. */
table.matrix,.checklist li::before,.rail .mr,.mnum,.numeric{font-variant-numeric:tabular-nums lining-nums}

@media(max-width:600px){
  .navy.hubhero h1,.hubhero h1{font-size:36px}
  .domain-hub .hubhero h1{font-size:34px}
  .ahero h1,.article h1{font-size:33px}
  .plainhead h1{font-size:32px}
  .dek{font-size:18.5px}
  .sechead h2,.s1 h2,.s2 h2,.s3 h2,.s4 h2,.s5 h2,section > .wrap > h2{font-size:30px}
  .article h2{font-size:25px}
  .article h3{font-size:20px}
  .article p,.article li,.article blockquote{font-size:18px}
}

/* ---- §5 COMPONENT HIERARCHY: ONE FRAMED OBJECT PER READING PAGE -----------------------------
 * The measured defect was not that any one component was wrong; it was that five of them competed
 * at the same visual weight - a cream box, a pink box, a blue-left-ruled box, a white card grid and
 * a bordered table, each announcing itself as important. The hierarchy below is the ruling: one
 * framed object, everything else ruled or in flow. */

/* A9 · TIER 1 - the one frame. Key takeaways is the lead object for every type until the
   type-specific lead objects exist (they are separately governed and not in this wave). */
.article .takeaways{background:var(--paper);border:1px solid var(--rule);border-left:1px solid var(--rule);
  border-top:3px solid var(--gold);border-radius:0;padding:24px 28px;margin:0 0 28px}
.article .takeaways h2{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 14px;line-height:1.2}
.article .takeaways ul{list-style:none;margin:0;padding:0}
.article .takeaways li{font-family:var(--sans);font-size:16.5px;line-height:1.5;color:var(--ink);
  padding:11px 0;border-top:1px solid var(--rule)}
.article .takeaways li:first-child{border-top:0;padding-top:0}
.article .takeaways li::before{content:none}
.article .takeaways li strong{font-weight:650}
@media(max-width:600px){.article .takeaways{padding:18px}}

/* A5 · TIER 2 - the principle, with its hierarchy the right way up. The maxim was a 0.68rem caps
   eyebrow and the explanation was a 1.7rem centred italic: the quiet line was the argument and the
   loud line was the gloss. The maxim is now the serif italic statement and the explanation is body
   prose beneath it, between two rules, with no fill and no centring. */
.article .principle{text-align:left;margin:34px 0;padding:22px 0;background:none;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.article .principle .lab{font-family:var(--serif);font-style:italic;font-size:27px;font-weight:400;
  line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--ink);display:block;margin:0 0 10px;max-width:34ch}
.article .principle .stmt{font-family:var(--serif);font-style:normal;font-weight:400;font-size:18px;
  line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch;text-align:left}
.article .principle .exp{font-family:var(--serif);font-size:18px;color:var(--ink-2);max-width:62ch;margin:8px 0 0}
@media(max-width:600px){.article .principle .lab{font-size:23px}}

/* A6 · TIER 2 - the common mistake as a ruled note, not a pink box; the action plan unboxed. */
.article .callout,.article .callout.mistake,.article .callout.rule{background:none;border:0;border-radius:0;
  padding:0 0 0 20px;margin:26px 0}
.article .callout.mistake{border-left:3px solid var(--note)}
.article .callout.rule{border-left:3px solid var(--rule-2)}
.article .callout .ct{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 8px}
.article .callout.mistake .ct{color:var(--note-text)}
.article .callout p{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink)}

.article .checklist{background:none;border:0;border-left:0;border-radius:0;padding:0;margin:30px 0}
.article .checklist h2{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1.18;
  letter-spacing:-.01em;margin:0 0 .55em;color:var(--ink)}
.article .checklist ol{list-style:none;margin:0;padding:0;counter-reset:cl}
.article .checklist li{counter-increment:cl;position:relative;padding:12px 0 12px 34px;
  font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);border-top:1px solid var(--rule)}
.article .checklist li:first-child{border-top:0}
.article .checklist li::before{content:counter(cl);position:absolute;left:0;top:14px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--gold-text);
  font-variant-numeric:tabular-nums lining-nums}

/* A7 · TIER 2 - the figure is one plain canvas. The SVG draws its own panel, so the outer card
   chrome was a second frame around a frame. On desktop it breaks right into the rail gutter so it
   renders at its native width rather than shrunk; on a phone it keeps the swipe container. */
.article .figure{background:var(--paper);border:1px solid var(--rule);border-radius:0;padding:0;overflow-x:auto}
.article .figure svg{display:block;width:100%;height:auto;min-width:700px}
@media(min-width:1100px){.article .figure{width:calc(100% + 292px);max-width:calc(100vw - 96px)}}
.article .fignote{display:block;margin:8px 0 0}

/* A8 · TIER 2 - tables. Sans, tabular figures, a rule system instead of a grid of boxes. */
.article .matrix-wrap{border:0;border-radius:0;margin:26px 0;overflow-x:auto}
.article table.matrix{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--sans);font-size:15.5px}
.article table.matrix th,.article table.matrix td{padding:11px 14px;border-right:0;border-bottom:1px solid var(--rule);
  text-align:left;font-family:var(--sans)}
.article table.matrix thead th{background:none;color:var(--ink-3);font-family:var(--sans);font-size:13px;
  font-weight:650;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.article table.matrix tbody th{font-weight:650;color:var(--ink)}
.article table.matrix tbody tr:last-child td,.article table.matrix tbody tr:last-child th{border-bottom:0}

/* A11 · TIER 3 - the disclaimer in sentence case. The source text is already sentence case; the
   all-caps grey treatment was the stylesheet shouting a caveat the copy states quietly. */
.article .fine,.article .disclaim,.article .disclaimer{font-family:var(--sans);font-style:italic;
  font-size:14.5px;font-weight:400;line-height:1.55;letter-spacing:normal;text-transform:none;
  color:var(--ink-3);max-width:62ch}

/* A10 · TIER 3 - Continue Learning as ruled rows. The card grid produced orphans whenever the
   count was not a multiple of three, and on a phone it collided with the rail cards. Rows have no
   such arithmetic. This is the interim treatment; the merge with "In this discipline" into one
   "Keep going in [Discipline]" list is renderer work. */
.article .continue{display:block;grid-template-columns:none;gap:0;margin-top:8px}
.article .continue > a{display:block;border:0;border-top:1px solid var(--rule);border-radius:0;
  background:none;box-shadow:none;padding:16px 0}
.article .continue > a:hover{border-color:var(--rule-2);box-shadow:none}
.article .continue > a:first-child{border-top:0}

/* The discipline remainder is a sibling block that READS as the same list and is a separate
   element, because the authored Continue-Learning block carries a locked cardinality contract
   (see lib/render-guide.mjs). Same rules, same rhythm, no second heading. */
.article .keepgoing{display:block;margin-top:0}
.article .keepgoing > a{display:block;border:0;border-top:1px solid var(--rule);border-radius:0;
  background:none;box-shadow:none;padding:16px 0;text-decoration:none}
.article .keepgoing > a span{font-family:var(--sans);font-size:11.5px;font-weight:650;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:4px}
.article .keepgoing > a h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin:0}
.article .continue > a span{font-family:var(--sans);font-size:11.5px;font-weight:650;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:4px}
.article .continue > a h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin:0 0 3px}
.article .continue > a p{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-3);margin:0}

/* A3 · CHROME - the footer headings were invisible. global.css styles `footer h3`; the V2 footer
   emits `h4`, which fell through to the base `h4{color:var(--ink)}` - dark ink on the navy-deep
   footer. `nicheAwareFooter` depends on the h4 tag, so the tag stays and the style moves. */
footer h4{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;line-height:inherit}

/* A12 · CHROME - the phone menu is opaque. At .97 alpha the page showed through the menu, which
   reads as a rendering fault rather than as a scrim. */
.msheet{background:var(--navy-deep)}
.msheet a{font-family:var(--sans);font-size:20px;font-weight:500;color:var(--on-navy);
  border-bottom:1px solid var(--on-navy-line)}

/* A12 · the PRO band on a phone: the input flexes, nothing overflows. */
.s6{--paper:var(--sink)}
@media(max-width:600px){
  .s6 form{display:flex;flex-wrap:wrap;gap:10px}
  .s6 form input{flex:1 1 100%;min-width:0;max-width:100%}
  .s6 form .btn{flex:1 1 100%}
}

/* A13 · THE READING HEAD IS IVORY. Navy means choose where to go; ivory means read or work. The
   article hero was navy, so every reading page opened with the visual language of a hub. The
   `!important`s answer global.css's own `!important`s on the same three properties, and only those. */
.ahero{background:var(--ivory);color:var(--ink);border-bottom:1px solid var(--rule);overflow:visible}
.ahero::before{content:none}
.ahero h1{color:var(--ink)}
.ahero .dek{color:var(--ink-2)}
.ahero .crumb{color:var(--ink-3)!important}
.ahero .crumb a{color:var(--ink-2)!important}
.ahero .crumb a:hover{color:var(--ink)!important}
.ahero .byline{color:var(--ink-2);border-left-color:var(--rule-2)}
.ahero .typebadge{color:var(--gold-text)!important;background:none!important;border:0!important;
  padding:0!important;font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.07em}

/* ---- §4 CHIPS: NEUTRAL, NO PER-TYPE COLOUR -------------------------------------------------
 * Six type colours made the type label compete with the niche marker and with gold, for a
 * distinction the reader does not navigate by. One outline, one weight, everywhere. */
.chip,.chip-concept,.chip-decision,.chip-howto,.chip-reference,.chip-tool,.chip-pillar,
.article .rtype,.rtype.guide,.rtype.template,.rtype.checklist,.rtype.tool,.rtype.decision,.rtype.comparison{
  font-family:var(--sans);font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid var(--rule-2);border-radius:2px;padding:3px 7px}

/* ---- §3 NICHE MARKERS, in exactly four placements ------------------------------------------
 * Keyed from `data-niche` on <main>, emitted by every V2 producer. The swatch is always paired
 * with the niche name; the rules are inset; the text-safe value carries a coloured niche name.
 * Nothing else may take niche colour. */
.nswatch{display:inline-block;width:10px;height:10px;border-radius:1px;margin-right:7px;
  vertical-align:baseline;background:var(--niche,var(--rule-2))}
[data-niche="str"]{--niche:var(--niche-str);--niche-text:var(--niche-str-text)}
[data-niche="ltr"]{--niche:var(--niche-ltr);--niche-text:var(--niche-ltr-text)}
[data-niche="flip"]{--niche:var(--niche-flip);--niche-text:var(--niche-flip-text)}
.nname{color:var(--niche-text,var(--ink-2))}
.navy .nname,.hubhero .nname{color:var(--on-navy)}
.nichecard{border-top:4px solid var(--niche,var(--rule-2))}
/* The card rule REPLACES the gold left rule `.flag` carries elsewhere (§3.2). A card cannot have
 * two rules of its own without one of them meaning nothing, and the niche's is the one that says
 * which library the reader is about to enter. */
.flag.nichecard{border-left:1px solid var(--hairline)}
.hubhero.nichehead{border-top:4px solid var(--niche,var(--gold))}

/* ---- §2 HEAD VARIANTS ----------------------------------------------------------------------
 * Four grounds, one rule: navy is for choosing where to go, ivory is for reading or working. The
 * masthead and section heads keep the navy they have; these two are the ones that were wrong. */

/* Plain head - Privacy, Terms, /coming-soon/. Compact, ivory, one rule at the foot. */
.plainhead{background:var(--ivory);color:var(--ink);border-bottom:1px solid var(--rule)}
.plainhead .wrap{padding-top:44px;padding-bottom:26px}
.plainhead h1{font-family:var(--serif);font-size:40px;font-weight:450;line-height:1.08;
  letter-spacing:-.012em;color:var(--ink);margin:10px 0 0}
.plainhead .dek,.plainhead p{color:var(--ink-2)}
.plainhead .crumb,.plainhead .crumb a{color:var(--ink-3)}
.plainhead .eyebrow{color:var(--gold-text)}
@media(max-width:600px){.plainhead .wrap{padding-top:26px;padding-bottom:20px}.plainhead h1{font-size:32px}}

/* AND EVERY PIECE OF METADATA IN IT TAKES INK, NOT ON-NAVY (D99 M3). The legal pages and
 * /coming-soon/ were built from the navy section head and kept its furniture when the ground turned
 * ivory: `.dek2` at --on-navy (1.9:1), the `.frame` rail's `.steps` at #fff (1.05:1) and two
 * `eb-on-navy` labels in brand gold, which §1.1 forbids as text on ivory outright. "Last updated"
 * and the date under it were the visible casualty; these are the same three declarations, restated
 * for the ground the head actually has. The markup is left alone on purpose - the head variant owns
 * its colours, so a producer that reuses the rail gets the right ones without knowing it exists. */
.plainhead .dek2{color:var(--ink-2)}
.plainhead .eb,.plainhead .eb-on-navy{color:var(--gold-text)}
.plainhead .frame{border-top-color:var(--rule)}
.plainhead .frame .steps{font-family:var(--serif);color:var(--ink)}
.plainhead .frame .steps i{color:var(--gold-text);opacity:1}

/* Section head - the niche and domain hubs take the niche's 4px rule as an inset (§3.3).
 *
 * THE PADDING IS RESTORED (D99 M2). The D98 wave wrote `padding-top:0` here intending to move the
 * head's vertical space onto `.wrap`, and never wrote the second half - so every navy head opened
 * flush against the site bar.
 *
 * THE MASTHEAD VARIANT IS GONE (D104). D98 declared two variants because Home's navy head was a
 * masthead at 96/56 while every other navy head was a section head at 56/36. D104 gives Home a hero
 * of its own - a photograph, a scrim and a text block whose padding it sets itself (§2) - so no
 * page carries `hubhero masthead` any more. It is deleted rather than kept for symmetry: a
 * declaration with nothing behind it is protection it does not give, which is the same reasoning
 * that retired test/v1-baseline.md5 at a zero population (D93). If a second masthead is ever
 * needed, the variant comes back with the page that needs it. */
.hubhero{padding-top:56px}
@media(max-width:600px){.hubhero{padding-top:36px}}

/* Reading head padding (§2): 40/34 desktop, 24/24 phone. */
.ahero .wrap{padding-top:40px;padding-bottom:34px}
@media(max-width:600px){.ahero .wrap{padding-top:24px;padding-bottom:24px}}

/* The byline row carries what the rail's details card used to (§2). */
.abyline{display:flex;align-items:center;gap:12px;margin-top:22px;padding-left:0;border-left:0}
.abyline .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}
.abyline .who{font-family:var(--sans);font-size:15px;color:var(--ink);font-weight:400}
.abyline .who strong,.abyline .who b{font-weight:600}
.abyline .meta{font-family:var(--sans);font-size:15px;color:var(--ink-3)}
@media(max-width:600px){.abyline .who,.abyline .meta{font-size:14px}}

/* AND IT IS ACTUALLY READABLE (D99 M1). global.css styles the byline for the NAVY hero the reading
 * head used to be - `.ahero .abyline .who{color:#fff!important}` and the on-navy grey beside it -
 * and it wins twice over: a longer selector and an `!important` the unqualified `.abyline` rules
 * above carry neither of. So the name rendered white on ivory (1.05:1) and the read time at 2.1:1
 * on all 130 reading pages. This answers those two declarations, at the same selector depth, and
 * nothing else: it is a correction to global.css's own overrides, not a new layer.
 *
 * IT IS FIXED HERE, NOT IN global.css, because global.css ships under three frozen one-year cache
 * tokens (§0.1) - an edit there reaches no returning browser, which is the whole reason v2.css is
 * content-hashed. Fixing the rule rather than the 130 pages is the other half of the same point. */
.ahero .abyline .who{color:var(--ink)!important}
.ahero .abyline .who strong,.ahero .abyline .who b{color:var(--ink)!important}
.ahero .abyline .meta{color:var(--ink-3)!important}

/* The author block at the end of the article is one line beside a 44px portrait (§5).
 *
 * `.authorline` IS THE CLASS THE RENDERER EMITS (D99). `.abox` and `.authorbox` were written from
 * two guesses at what the captured block is called; it is called nothing - it carries its whole
 * appearance as inline styles and no class at all - so neither rule ever matched, and the block
 * kept its 52px portrait and four-line biography. The renderer now strips those styles and names
 * it. The two guessed selectors stay only because they cost one comma and a page that does emit
 * either gets the same treatment. */
.article .abox,.article .authorbox,.article .authorline{display:flex;gap:14px;align-items:center;
  border-top:1px solid var(--rule);padding-top:22px;margin-top:34px}
.article .abox img,.article .authorbox img,.article .authorline img{width:44px;height:44px;
  border-radius:50%;object-fit:cover;flex:none}
.article .authorline p{margin:0;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink-2)}
.article .authorline p strong{font-weight:600;color:var(--ink)}
.article .authorline .authorlink{display:inline-block;margin-top:2px;font-family:var(--sans);
  font-size:14.5px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.article .authorline .authorlink:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
@media(max-width:600px){.article .authorline{align-items:flex-start}}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * D104 — THE HOME PAGE, AS APPROVED (25 Sep 2026)
 *
 * THIS REPLACES D100–D103 RATHER THAN EXTENDING THEM, and the deletion is the point. Those four
 * waves were successive corrections to one another: D100 gave the page a shape, D101 gave it copy
 * and an icon set, D102 gave it diagrams, D103 took most of the diagrams away. Left stacked, the
 * page would carry the vocabulary of all four — a hero whose second column is a list of names, a
 * lifecycle rule, a six-cell plate with end captions, cards with "what you will learn" lists —
 * under a fifth block written to hide them. The approved specification describes one page; this is
 * that page's stylesheet, and the rules it supersedes are gone rather than overridden.
 *
 * SCOPED TO `.home`, WHICH lib/render-home.mjs PUTS ON <main>, with ONE declared shared exception
 * at the foot: the footer, which is a shared component by ruling and reaches every V2 page. D100
 * declared two; the second — the subscribe band's opt-in treatment — is retired here. Exactly one
 * page carries that treatment, so its rules belong under `.home` like everything else, and spec
 * §12.4 asks the suite to assert that no other page's band takes the Home composition. An exception
 * that exists because a rule was written in the wrong place is not an exception.
 *
 * EVERY VALUE BELOW IS THE SPECIFICATION'S. Where the spec names a number — 136px of section
 * padding, a 34px head offset, a 96px rule above "Choose your path" — it is written literally
 * rather than expressed as a clamp, because HQ ruling R1 asks for the generous spacing to be kept
 * and a clamp is how spacing gets quietly tightened at the width nobody reviewed. Ruling R10
 * retired the old ~6,700px page-length target: there is no height to hit, and
 * `tools/home-check.mjs` measures the PADDING instead, which is the thing that was actually being
 * protected.
 *
 * NO TEXTURE, NO NOISE, NO DECORATIVE GRADIENT (§1.2). The page has exactly two gradients: the hero
 * scrim over the photograph, and the navy band's ground. Both are named in the spec.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- 1 · page-level system (§1.1, §1.3, §1.4) -------------------------------------------------
 * The wrap is global.css's 1180px and its gutter, so the header, the page and the footer share one
 * measure and only the hero photograph reaches the viewport edge. */
.home section,.libroot section,.dhub section,.nhub section{padding-block:136px}
/* BALANCED HEADING WRAPS (Brand §14 acceptance, C1). The reference build balances its headings and
   this block did not, so four headings dropped one or two words onto a last line of their own —
   the hero at 1024, the discipline and "Where to begin" H2s at 1440, and two decision questions on
   a phone. `text-wrap: balance` is a wrapping hint, not a layout change: it redistributes words
   across the lines a heading already occupies and cannot change its measure, its size or its line
   count. It applies to headings only; body copy is left to wrap normally, where balancing a long
   paragraph would be both wrong and (past a few lines) ignored by the browser anyway.
   The `nowrap` on the hero's gold phrase stays: the two do not conflict, and with both applied the
   hero reads "Make better financial / decisions in your / real estate business." at all four
   widths. Brand verified that against the rendered changeset before asking for it. */
.home h1,.home h2,.home h3,.home h4,
.libroot h1,.libroot h2,.libroot h3,.libroot h4,
.dhub h1,.dhub h2,.dhub h3,.dhub h4,
.nhub h1,.nhub h2,.nhub h3,.nhub h4{text-wrap:balance}
.home .eb,.libroot .eb,.dhub .eb,.nhub .eb{display:block;font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text)}
.home .h2,.libroot .h2,.dhub .h2,.nhub .h2{font-family:var(--serif);font-size:44px;font-weight:450;line-height:1.12;
  letter-spacing:-.015em;margin:12px 0 0;color:var(--ink)}
.home .intro,.libroot .intro,.dhub .intro,.nhub .intro{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink-2);
  max-width:32em;margin:0}
.home .caps,.libroot .caps{font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-text)}
.home a.caps:hover{text-decoration:underline;text-underline-offset:.16em}

/* THE TWO-COLUMN HEAD, WRITTEN ONCE AND USED THREE TIMES (§3.1). The thesis, the discipline band
 * and "Where to begin" all take it, so the three cannot drift apart. The right column drops 34px
 * so its first line meets the H2 rather than the eyebrow. */
.home .head2,.libroot .head2,.dhub .head2,.nhub .head2{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:start}
.home .head2 .intro,.home .head2 .body,.libroot .head2 .intro,.dhub .head2 .intro,
.nhub .head2 .intro{padding-top:34px}
.home .head2 .body p{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--ink-2);
  max-width:36em;margin:0}
.home .head2 .body p+p{margin-top:22px}

/* ---- 2 · hero (§2) ----------------------------------------------------------------------------
 * The photograph is an ELEMENT, not a background: it has to be reorderable below 1100px, it has to
 * be a `<picture>` so the right resource is served at every density, and it is the Largest
 * Contentful Paint, so it carries `fetchpriority` and must not wait for the stylesheet to be
 * parsed.
 *
 * THE SCRIM IS OVER THE PHOTOGRAPH ONLY, and it is a dissolve rather than a darkening layer: solid
 * navy at the left edge of the image, transparent by 58% of it, so there is no visible seam between
 * the picture and the hero ground and the photograph itself is never dimmed to buy contrast. */
.home .hero{position:relative;background:var(--navy);overflow:hidden;padding:0}
.home .hero-photo{position:absolute;top:0;right:0;bottom:0;left:44%}
.home .hero-photo picture{display:block;height:100%}
.home .hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:58% 70%}
.home .hero-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(16,31,66,.88) 12%,rgba(16,31,66,.55) 28%,
    rgba(16,31,66,.15) 44%,rgba(16,31,66,0) 58%)}
.home .hero>.wrap{position:relative;z-index:2}
/* THE TEXT BLOCK SETS THE HERO'S HEIGHT — about 675px at 1440. Nothing here is a fixed height, so
   a longer headline makes the hero taller instead of overflowing the photograph. */
.home .hero-copy{padding-block:128px 136px;max-width:700px}
/* 590px ON THE HEADLINE AND 28em ON THE DEK, so body text stays over solid or near-solid navy at
   every width from 1100 to 1920. The measured worst case is H1 4.8:1 and dek 6.5:1; the action row
   may run wider because both actions are large or gold on the darkest part of the scrim. */
.home .hero h1{font-family:var(--serif);font-size:66px;line-height:1.04;font-weight:400;
  letter-spacing:-.02em;color:#fff;max-width:590px;margin:0}
/* THE GOLD PHRASE DOES NOT BREAK. "real estate" is one phrase and §2 prints the intended
   desktop break with it whole on the last line; left to wrap it splits across lines two and
   three at 1440, which reads as two gold words rather than one gold phrase. `nowrap` on the
   span is the whole of the fix and it costs nothing at any width — the phrase is 230px at the
   40px phone size, inside a 350px measure. */
.home .hero h1 .g{color:var(--gold);white-space:nowrap}
.home .hero .dek{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--on-navy-2);
  max-width:28em;margin:26px 0 0}
.home .ctas{display:flex;flex-wrap:wrap;gap:22px 32px;align-items:center;margin:40px 0 0}
/* `border:0` BECAUSE ONE CONSUMER IS A <button> (D111 C5). Every other page applies this to an
   <a>, which has no default border; the Run control is a real button, so it took the browser's
   1.6px outset bevel and was the one place the family looked like an unstyled form. Declared in the
   shared list rather than overridden under `.twork`, because the next family to put this on a
   button would hit the same thing. */
.home .btn-gold,.dhub .btn-gold,.nhub .btn-gold,.twork .btn-gold{display:inline-block;border:0;background:var(--gold);color:var(--navy-deep);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:16px 24px;border-radius:2px;transition:background .16s}
.home .btn-gold:hover,.dhub .btn-gold:hover,.nhub .btn-gold:hover,.twork .btn-gold:hover{background:#d7ba63}
.home .link-gold,.dhub .link-gold,.nhub .link-gold{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold)}
.home .link-gold:hover,.dhub .link-gold:hover,.nhub .link-gold:hover{text-decoration:underline;text-underline-offset:.16em}

/* ---- 3 · approach and choose your path (§3) ---------------------------------------------------
 * One ivory section with two parts. The rule across the wrap and the serif heading are the whole of
 * the transition R4 asked for: no intro line, no icons, no second ground. */
.home .approach{background:var(--ivory)}
.home .paths-h{font-family:var(--serif);font-size:32px;font-weight:450;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin:96px 0 0;padding-top:40px;
  border-top:1px solid var(--rule-2)}
.home .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;
  align-items:stretch}
/* THE WHOLE CARD IS THE LINK, and a card whose library the release does not serve is a <div> with
   no call to action — not a dimmed card, not a card saying "soon". The two are styled identically
   on purpose: the third path is a first-class business that has no door yet, not a lesser one. */
/* `nichecard` STAYS ON THE ELEMENT AND ITS TOP RULE DOES NOT (D104 §3.3). The class is the
   corpus-wide hook for a doorway into one niche and suite §46 checks Home and the Library root
   for it together; what D104 drops is the 4px coloured rule it carries elsewhere, because the
   swatch beside the title is this card's one niche mark and two would spend the colour rule
   twice. The Library root's cards are untouched. */
.home .card.nichecard{border-top:1px solid var(--rule)}
.home .card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);
  padding:10px;box-shadow:0 1px 2px rgba(16,31,66,.04);transition:box-shadow .2s}
.home a.card:hover{box-shadow:0 14px 34px rgba(16,31,66,.10)}
.home .card .ph{aspect-ratio:3/2;overflow:hidden}
.home .card .ph picture{display:block;width:100%;height:100%}
.home .card .ph img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s}
.home a.card:hover .ph img{transform:scale(1.03)}
.home .card .tx{display:flex;flex-direction:column;flex:1;padding:26px 20px 22px}
/* ONE NICHE MARK PER CARD (§3.3): a 10x10 swatch before the title and nothing else. The coloured
   top rule D99 put here is gone — two marks for one niche on one card spends the colour rule
   twice, and the swatch is the placement §3 of that rule actually names. */
.home .card h4{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:28px;
  font-weight:450;line-height:1.18;letter-spacing:0;color:var(--ink);margin:0}
.home .card h4 .nswatch{width:10px;height:10px;flex:none;background:var(--niche)}
.home .card .sub{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  margin:12px 0 0}
.home .card .go{margin-top:auto;padding-top:28px}

/* ---- 4 · six disciplines (§4) -----------------------------------------------------------------
 * Six ruled columns of plain type. They are NOT links (R5): no per-discipline destination exists,
 * and there is no hover state or pointer cursor here to suggest one. Exactly one link leaves this
 * section, and it is the sentence that sat under the thesis until D104 moved it here. */
.home .disc,.libroot .disc{background:radial-gradient(1000px 520px at 88% -20%,rgba(72,116,200,.2),transparent 60%),
  linear-gradient(170deg,var(--navy),var(--navy-deep))}
.home .disc .eb,.libroot .disc .eb{color:var(--gold)}
.home .disc .h2,.libroot .disc .h2{color:#fff}
.home .disc .intro,.libroot .disc .intro{color:var(--on-navy-2)}
.home .six,.libroot .six{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);margin:72px 0 0;padding:0}
.home .six li,.libroot .six>li{padding:4px 22px 8px;border-left:1px solid var(--on-navy-line)}
.home .six li:first-child,.libroot .six>li:first-child{padding-left:0;border-left:0}
.home .six .n,.libroot .six .n{display:block;font-family:var(--sans);font-size:15px;font-weight:650;color:var(--gold);
  font-variant-numeric:tabular-nums}
.home .six h3,.libroot .six h3{font-family:var(--serif);font-size:22px;font-weight:450;line-height:1.2;
  letter-spacing:0;color:#fff;margin:14px 0 0}
.home .six p,.libroot .six>li>p{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--on-navy-2);
  margin:10px 0 0}
.home .disc-go{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--on-navy-line)}

/* ---- 5 · where to begin (§5) ------------------------------------------------------------------
 * Full-measure editorial rows, one link each. The question is the only thing with size; the
 * discipline, the reader type and the library share the line above it. The niche marker is a
 * swatch PAIRED WITH THE NICHE'S NAME, which is the only form the colour rule allows here: colour
 * never carries meaning on its own. */
.home .dec{background:var(--ivory)}
.home .rows,.dhub .rows{list-style:none;margin:64px 0 0;padding:0;border-top:1px solid var(--rule-2)}
.home .row,.dhub .row{display:grid;grid-template-columns:1fr auto;gap:0 32px;padding-block:30px;
  border-bottom:1px solid var(--rule-2)}
.home .row .meta,.dhub .row .meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-family:var(--sans);
  font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.home .row .niche{display:inline-flex;align-items:center;gap:8px;color:var(--niche-text)}
.home .row .niche .nswatch{width:8px;height:8px;flex:none;background:var(--niche)}
.home .row h3,.dhub .row h3{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1.2;
  letter-spacing:0;color:var(--ink);margin:12px 0 0}
.home .row p,.dhub .row p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:62ch;margin:8px 0 0}
.home .row .arr,.dhub .row .arr{align-self:center;font-size:24px;color:var(--gold-text);transition:transform .2s}
.home .row:hover h3,.dhub .row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.home .row:hover .arr,.dhub .row:hover .arr{transform:translateX(4px)}
.home .browse{margin:40px 0 0}

/* ---- 6 · who writes this (§6) -----------------------------------------------------------------
 * THE TWO CONTRAST CORRECTIONS THE SPEC FOUND, AND THEY ARE SCOPED TO THIS SECTION (§1.5). On
 * `--sink` the standard `--gold-text` measures 4.40:1 and `--ink-3` measures 4.23:1 — both under AA
 * for the sizes they are used at here. The eyebrow and the link take #7d6013 (5.1:1); the three
 * credential lines take `--ink-2` (7.5:1). Neither token is redefined: this band is the only ground
 * where the standard pair falls short, so the correction lives where the problem is.
 *
 * THE SECTION'S BOTTOM PADDING IS 0 AND EACH COLUMN CARRIES ITS OWN 136px, so the two vertical
 * rules reach the section edge together instead of stopping at whichever column is shorter. */
.home .who{background:var(--sink);padding-bottom:0}
.home .who .eb,.home .who .caps{color:#7d6013}
.home .who-grid{display:grid;grid-template-columns:250px 1fr 270px;gap:0 56px;align-items:stretch}
/* NEVER WIDER THAN 250px AND NEVER UPSCALED (§6). The file is 250x202 and that is the whole of the
   sizing rule: a soft portrait on the page whose job is credibility is worse than a small sharp
   one. If a larger original is ever commissioned this is the rule that changes. */
.home .portrait{display:flex;flex-direction:column;align-items:center;margin:0}
.home .portrait img{width:250px;height:auto;display:block;box-shadow:0 18px 40px rgba(16,31,66,.14)}
.home .portrait::after{content:"";flex:1;width:1px;min-height:80px;background:var(--rule-2);
  margin-top:28px}
.home .who .txt{padding-bottom:136px}
.home .who .txt .h2{font-size:40px}
.home .who .txt p{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--ink-2);
  max-width:34em;margin:20px 0 0}
.home .who .txt p:first-of-type{margin-top:24px}
.home .who .txt .caps{display:inline-block;margin-top:28px}
.home .marks{display:grid;gap:26px;align-content:start;border-left:1px solid var(--rule-2);
  padding-left:32px;padding-bottom:136px}
.home .marks b{display:block;font-family:var(--sans);font-size:16px;font-weight:650;color:var(--ink)}
.home .marks span{display:block;font-family:var(--sans);font-size:15px;line-height:1.5;
  color:var(--ink-2);margin-top:4px}

/* ---- 7 · The Profitable Real Estate Operator (§7) ---------------------------------------------
 * THE HOME COMPOSITION OF A SHARED BAND, AND IT REACHES ONE PAGE. lib/v2-chrome.mjs emits the
 * fuller markup only for a page that passes the weekly promise and the standing structure, and
 * Home is the only page that does; every other page's band is untouched apart from the masthead
 * file swap. Scoping these rules under `.home` is what makes that true of the STYLESHEET as well as
 * of the markup — under D100–D103 they were written unscoped and were the second declared shared
 * exception.
 *
 * THE GROUND IS SET THROUGH `--paper`, NOT THROUGH `background`. The captured template carries
 * `style="background:var(--paper)"` on this section as an inline attribute, which no stylesheet
 * rule can outrank; remapping the token is the only honest way to change the ground, and it is why
 * the email input below asks for #fff literally. A control inside this band that asks for
 * `var(--paper)` gets the band's own colour — the exact trap the D103 cadence eyebrow fell into. */
.home .s6{--paper:var(--ivory);padding-block:136px;border-top:1px solid var(--rule-2);text-align:left}
/* `text-align:left` IS RESTATED ON THE GRID, not inherited from the section. `.promast` carries
   `text-align:center` from the band's original centred treatment, and a rule on the element beats
   an inherited value from its ancestor however specific that ancestor's selector is — so setting
   it on `.home .s6` alone left the masthead panel and the whole contents column centred. */
.home .s6 .promast.proissue{display:grid;grid-template-columns:1.15fr 1fr;gap:96px;align-items:start;
  text-align:left;border:0;background:none;max-width:none;margin:0}
.home .s6 .procover{display:block;padding:0 0 0 44px;border:0;border-left:3px solid var(--gold);
  background:none}
.home .s6 .procover img{width:360px;max-width:100%;height:auto;margin:0;display:block}
.home .s6 .proimprint{border-top:0;padding-top:0;margin:14px 0 0;font-family:var(--sans);
  font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.home .s6 .protues{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule-2)}
.home .s6 .procadence{display:block;margin:0}
.home .s6 .propromise{font-family:var(--serif);font-size:30px;line-height:1.25;font-weight:400;
  color:var(--ink);margin:12px 0 0}
.home .s6 .prosheet{padding:0}
.home .s6 .prosecs{list-style:none;display:grid;gap:18px;margin:0;padding:0}
.home .s6 .prosecs strong{display:block;font-family:var(--sans);font-size:15.5px;font-weight:650;
  color:var(--ink)}
.home .s6 .prosecs .prosp{display:block;font-family:var(--sans);font-size:15px;line-height:1.5;
  color:var(--ink-3);margin-top:2px}
.home .s6 .probar{margin-top:28px}
/* THE COLUMN IS DECLARED, AND `justify-content` IS RESET WITH IT. global.css sets
   `form{display:flex;justify-content:center}` for the captured centred band; switching the
   display to grid does not clear that property, and on a grid it centres the track instead of
   the items — so on a phone the input and the button sat in a 330px block inset 66px from the
   copy above them. One explicit track and one reset. */
.home .s6 .probar form{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;
  gap:10px;margin:0}
.home .s6 .probar input{font:16px var(--sans);width:100%;padding:13px 14px;
  border:1px solid var(--rule-2);background:#fff}
.home .s6 .probar .btn{font:700 13px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  width:100%;background:var(--gold);color:var(--navy-deep);border:0;padding:15px 22px;border-radius:2px}
.home .s6 .probar .fine{font-family:var(--sans);font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin:10px 0 0}

/* ---- 8 · motion, only where it is an affordance -----------------------------------------------
 * Two transitions on the page, both on a link: a card's shadow and photograph, and a row's arrow.
 * Nothing moves on load and nothing moves on scroll. */
@media(prefers-reduced-motion:reduce){
  .home .card,.home .card .ph img,.home .row .arr,.home .btn-gold,
  .dhub .row .arr,.dhub .btn-gold,.nhub .btn-gold,.twork .btn-gold{transition:none}
  .home a.card:hover .ph img{transform:none}
  .home .row:hover .arr,.dhub .row:hover .arr{transform:none}
}

/* ---- 9 · tablet, 768–1099 (§11) ---------------------------------------------------------------
 * THE HERO STACKS, because a side-by-side photograph at these widths puts the picture under the
 * dek instead of beside it. Text first, then the photograph as a full-bleed 380px band with the
 * scrim turned through 90 degrees so it grows out of the hero ground rather than butting against
 * it. */
@media(max-width:1099px){
  .home .hero{display:flex;flex-direction:column}
  .home .hero>.wrap{order:1;width:100%}
  .home .hero-photo{position:relative;left:auto;order:2;height:380px}
  .home .hero-photo::before{background:linear-gradient(180deg,var(--navy) 0%,rgba(16,31,66,0) 30%)}
  .home .hero-copy{padding-block:96px 64px}
  .home .hero h1{font-size:54px}
  .home .six,.libroot .six{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .home .six li:nth-child(4),.libroot .six>li:nth-child(4){padding-left:0;border-left:0}
  .home .who{padding-bottom:136px}
  .home .who-grid{grid-template-columns:250px 1fr;gap:0 48px}
  .home .portrait::after{display:none}
  .home .who .txt,.home .marks{padding-bottom:0}
  .home .marks{grid-column:1/-1;grid-template-columns:repeat(3,1fr);border-left:0;padding-left:0;
    margin-top:56px;padding-top:32px;border-top:1px solid var(--rule-2)}
  .home .s6 .promast.proissue{gap:56px}
}

/* ---- 10 · the 900px step (§1.1) ---------------------------------------------------------------
 * The card grid and the two-column heads stack here rather than at the tablet boundary: three
 * cards at 900px are 280px wide, which is narrower than the photograph needs to read. */
@media(max-width:900px){
  .home .cards{grid-template-columns:1fr;max-width:620px}
  .home .card .ph{aspect-ratio:16/9}
  .home .head2,.libroot .head2,.dhub .head2,.nhub .head2{grid-template-columns:1fr;gap:16px}
  .home .head2 .intro,.home .head2 .body,.libroot .head2 .intro,.dhub .head2 .intro,
  .nhub .head2 .intro{padding-top:0}
}

/* ---- 11 · phone, below 768 (§11) --------------------------------------------------------------
 * 72px of section padding, not 136 — and that is the ONLY place the page's spacing is reduced.
 * R1 and the pacing rule in §1.4 are explicit that padding is never cut to shorten the page. */
@media(max-width:767px){
  .home section,.libroot section,.dhub section,.nhub section{padding-block:72px}
  /* `.home .s6` sets its own 136px above, at a higher specificity than `.home section`, so the
     phone value has to be restated at the same specificity or the band alone stays at 136. */
  .home .s6{padding-block:72px}
  .home .hero{padding:0}
  .home .hero-photo{height:240px}
  .home .hero-copy{padding-block:48px 44px}
  .home .hero h1{font-size:40px}
  .home .hero .dek{font-size:17px}
  .home .ctas{flex-direction:column;align-items:stretch}
  .home .btn-gold,.home .link-gold,.dhub .btn-gold,.dhub .link-gold,
  .nhub .btn-gold,.nhub .link-gold,.twork .btn-gold{text-align:center}
  .home .h2,.libroot .h2,.dhub .h2,.nhub .h2{font-size:32px}
  .home .paths-h{margin-top:56px;padding-top:28px;font-size:26px}
  .home .cards{margin-top:28px}
  .home .card h4{font-size:24px}
  .home .six,.libroot .six{grid-template-columns:1fr;row-gap:0;margin-top:44px}
  .home .six li,.home .six li:nth-child(4),
  .libroot .six>li,.libroot .six>li:nth-child(4){padding:20px 0;border-left:0;
    border-top:1px solid var(--on-navy-line)}
  .home .six li:first-child,.libroot .six>li:first-child{border-top:0;padding-top:0}
  .home .disc-go{margin-top:32px}
  /* THE ARROW GOES TOP-RIGHT, LEVEL WITH THE LABEL (§5.2), so the question keeps the full measure
     instead of losing a column to a glyph. */
  .home .rows,.dhub .rows{margin-top:40px}
  .home .row,.dhub .row{position:relative;grid-template-columns:1fr;padding-block:26px}
  .home .row .meta,.dhub .row .meta{padding-right:36px}
  .home .row .arr,.dhub .row .arr{position:absolute;right:0;top:22px;font-size:22px}
  .home .row h3,.dhub .row h3{font-size:24px}
  .home .who{padding-bottom:72px}
  .home .who-grid{grid-template-columns:1fr}
  .home .portrait{align-items:flex-start}
  .home .who .txt{margin-top:32px}
  .home .who .txt .h2{font-size:32px}
  .home .marks{grid-template-columns:1fr;gap:0;margin-top:36px;padding-top:0;border-top:0}
  .home .marks>div{padding-block:16px;border-top:1px solid var(--rule-2)}
  .home .s6 .promast.proissue{grid-template-columns:1fr;gap:40px}
  .home .s6 .procover{padding-left:24px}
  .home .s6 .propromise{font-size:24px}
  /* The band's own 600px rules turn the form into a flex row; the D104 composition is a two-line
     grid at every width, so they are restated here rather than left to fight. */
  .home .s6 .probar form{display:grid;grid-template-columns:minmax(0,1fr)}
  .home .s6 .probar input,.home .s6 .probar .btn{width:100%;min-width:0;max-width:none}
  /* A LINK IS A TARGET, NOT A LINE OF TEXT — the rule the footer has carried since D100, applied
     to the four standalone caps links on the page. At 13px on a phone they are 18-21px tall, under
     half the 44px both platform guidelines ask for and well under the 30px floor
     tools/home-check.mjs has held since D100. The padding is what makes them tappable; the type,
     the colour and the position are unchanged. Desktop is untouched: a pointer does not need it,
     and the section rhythm above 767px is the approved one. */
  .home .hero .link-gold,.home .disc-go .link-gold,.home .browse .caps,.home .who .txt .caps{
    display:inline-block;padding-block:9px}
  .home .hero .link-gold{padding-block:12px}
}

/* ══ THE ONE SHARED EXCEPTION, DECLARED ════════════════════════════════════════════════════════
 * Everything above is scoped to `.home`. This is not, and it is a shared component by ruling
 * rather than a homepage choice: it reaches every V2 page, which is the intended reach. The
 * alternative is a second footer that exists only on one page, which is the thing the brief
 * forbids. Unchanged by D104 except that its wordmark is now a file — see lib/v2-chrome.mjs.
 *
 * THE FOOTER (D100, item 9). Four columns rather than three — Privacy and Terms are split out of
 * Company into Legal by lib/v2-chrome.mjs — with the type and the spacing an authority site's
 * footer needs. No route is created, renamed or removed; the links are the ones already there. */
footer .fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
@media(max-width:1000px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){footer .fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--sans);font-size:12px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px}
footer .fgrid ul{list-style:none;margin:0;padding:0}
footer .fgrid li+li{margin-top:2px}
/* A LINK IS A TARGET, NOT A LINE OF TEXT. At 14.5px on a 1.5 line-height these were 21px tall on
   a phone — under half the 44px both platform guidelines ask for, and the footer is where a reader
   goes on purpose. The padding is what makes them tappable; the type is unchanged. */
footer .fgrid a{display:inline-block;padding:5px 0;font-family:var(--sans);font-size:14.5px;
  line-height:1.5;color:#c3cbdb;transition:.16s}
footer .fgrid a:hover{color:var(--gold)}
footer .fbase{font-family:var(--sans);font-size:13px;line-height:1.6;color:#8a94ab;
  margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid var(--on-navy-line)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * D105 — THE LIBRARY ROOT, AS APPROVED (26 Sep 2026)
 *
 * SCOPED TO `.libroot`, WHICH lib/render-library-root.mjs PUTS ON <main>. It declares no shared
 * exception of its own: the one exception in this file is still the footer, above, and it reaches
 * every V2 page by ruling rather than by either page's choice.
 *
 * THIS BLOCK IS SHORT BECAUSE THE PAGE SHARES RATHER THAN COPIES (§11.1). D105 is the same visual
 * system as D104 doing a different job, so everything the two pages genuinely have in common —
 * `section` padding at 136/72, the eyebrow, the H2, the intro, the caps link, the two-column head,
 * and the whole navy discipline band — is styled by the D104 rules above, whose selector lists now
 * name both scopes. Only what is actually different is written here. The alternative was a second
 * copy of those rules under `.libroot`, and the day one copy was edited the two pages would have
 * started drifting with nothing to notice it.
 *
 * WHAT IS GENUINELY DIFFERENT, AND WHY:
 *   the head      ivory rather than navy, the photograph from 54% rather than 44%, and a scrim
 *                 that stays at 12% ivory at the right edge instead of dissolving to nothing —
 *                 HQ's ruling is that the photograph is atmosphere and the copy is the anchor.
 *   the columns   open, divided by hairlines. Home's paths are cards with a ground and a border;
 *                 §3 is explicit that these have no card, no border and no fill.
 *   the band      D104's exactly, plus a way into each discipline at the foot of its column,
 *                 kept deliberately secondary so number, name and promise still lead (§4).
 *   the questions two columns of ruled rows at 24px, against Home's one column at 29px (§5).
 *   the latest    typography only — a numeral, a label line, a title and a month (§6).
 *
 * THERE IS NO SEARCH FIELD AND THERE ARE NO RULES FOR ONE. HQ ruling D1 made it conditional on
 * Infrastructure and Infrastructure measured it and reported against it; §2 rules that the form is
 * then not rendered at all and the jump links move up to 40px below the dek, which is the value
 * `.libroot .jump` carries. A dormant `.search` block waiting for a decision that has been taken
 * is how a search box ships over an index that does not exist.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- 1 · the head (§2) ------------------------------------------------------------------------
 * The photograph is an ELEMENT for the three reasons D104's hero gives: it reorders below 1100px,
 * it is a `<picture>` so the right resource is served at every density, and it is the Largest
 * Contentful Paint. The quiet treatment — desaturated, lower contrast — is baked into the file and
 * is deliberately NOT a `filter` here: a filter costs a compositing layer on the LCP, is not
 * applied by a browser that fails to parse the rule, and would leave the shipped bytes carrying
 * the saturation HQ turned down. */
.libroot .lhead{position:relative;background:var(--ivory);overflow:hidden;padding:0;
  border-bottom:1px solid var(--rule)}
.libroot .lhead-photo{position:absolute;top:0;right:0;bottom:0;left:54%}
.libroot .lhead-photo picture{display:block;height:100%}
.libroot .lhead-photo img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:62% 50%}
/* A WASH, NOT A DISSOLVE. Home's scrim reaches full transparency so the picture meets the navy
   with no seam; this one stays at 12% ivory even at the right edge, so no part of the frame is
   ever shown at full strength and the head's heaviest object is the copy. */
.libroot .lhead-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--ivory) 0%,rgba(250,247,241,.9) 18%,
    rgba(250,247,241,.45) 42%,rgba(250,247,241,.18) 70%,rgba(250,247,241,.12) 100%)}
.libroot .lhead>.wrap{position:relative;z-index:2}
.libroot .lhead-copy{padding-block:104px 96px;max-width:620px}
.libroot .lhead h1{font-family:var(--serif);font-size:64px;line-height:1.04;font-weight:400;
  letter-spacing:-.02em;color:var(--ink);margin:16px 0 0}
/* `--gold-text` AND NOT `--gold`, WHICH IS THE ONE PLACE THIS HEAD DIFFERS FROM HOME'S ON COLOUR.
   Home's gold phrase sits on navy, where `--gold` is the readable token; this one sits on ivory,
   where it measures about 2.0:1. The text-safe token is the same decision D99 made for the founder
   band, applied where the ground changed. */
.libroot .lhead h1 .g{color:var(--gold-text)}
.libroot .lhead .dek{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink-2);
  max-width:30em;margin:24px 0 0}
/* THE JUMP LINKS ARE THE HEAD'S ONLY ACTIONS (§2, D1 not shipping), so they sit where the search
   field would have: 40px below the dek rather than the 30px the spec gives them under a field.
   The lead rule and the ticks are generated content on the list, so no separator character reaches
   the accessibility tree and a screen reader hears three links rather than three links and two
   vertical bars. */
.libroot .jump{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;
  margin:40px 0 0;padding:0;font-family:var(--sans);font-size:14px;font-weight:600;
  white-space:nowrap}
.libroot .jump::before{content:"";width:28px;height:1px;background:var(--gold);margin-right:14px}
.libroot .jump li+li::before{content:"";display:inline-block;width:1px;height:14px;
  background:var(--rule-2);margin:0 13px;vertical-align:-2px}
.libroot .jump a{color:var(--ink)}
.libroot .jump a::after{content:" \2192";color:var(--gold-text)}
.libroot .jump a:hover{color:var(--gold-text)}

/* ---- 2 · choose your real estate path (§3) ----------------------------------------------------
 * OPEN COLUMNS. No card, no border, no fill — the divider is a hairline centred in the 72px gap,
 * drawn by the column after it so the outer edges stay clean. */
.libroot .paths{background:var(--ivory)}
.libroot .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px;margin-top:64px}
.libroot .col{display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative}
.libroot .col+.col::before{content:"";position:absolute;left:-36px;top:0;bottom:0;width:1px;
  background:var(--rule-2)}
/* `nichecard` IS THE CORPUS-WIDE HOOK AND ITS 4px RULE IS NOT WANTED HERE. Suite §46 checks Home
   and this page together for "an object that is a doorway into one niche says so", so the class
   stays; §3 forbids a border on these columns, so the shared rule is neutralised exactly as D104
   neutralises it for Home's cards. The square beside the name is the column's one niche mark. */
.libroot .col.nichecard{border-top:0}
.libroot .col .ph{width:100%;aspect-ratio:3/2;overflow:hidden;
  box-shadow:0 12px 30px rgba(16,31,66,.10)}
.libroot .col .ph picture{display:block;width:100%;height:100%}
.libroot .col .ph img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s}
.libroot a.col:hover .ph img{transform:scale(1.03)}
.libroot .col h3{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:28px;
  font-weight:450;line-height:1.18;letter-spacing:0;color:var(--ink);margin:28px 0 0}
.libroot .col h3 .nswatch{width:10px;height:10px;flex:none;background:var(--niche)}
.libroot .col p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:26em;margin:12px 0 0}
.libroot .col .caps{display:inline-block;margin-top:22px}
.libroot a.col:hover .caps{text-decoration:underline;text-underline-offset:.16em}

/* ---- 3 · the way into each discipline (§4) -----------------------------------------------------
 * The band itself is D104's, shared above. This is the one thing added to it, and it is added
 * quietly on purpose: plain, sentence case, 13.5px, `--on-navy-2` with a gold arrow. No caps and
 * no bold, so the number, the name and the promise always lead.
 *
 * THE LINK GROUP RESERVES THE HEIGHT OF THREE, WHICH IS WHAT KEEPS THE SIX COLUMNS ALIGNED. At
 * most three links can ever appear — one per niche — so a fixed minimum on the group means the
 * rules above the links sit on one line across all six columns whether a column carries two today
 * or three the day Flippers is served. The alternative, letting the group size itself, would make
 * the band visibly re-align on the release that adds a niche. */
.libroot .six>li{display:flex;flex-direction:column}
.libroot .six>li>p{margin-bottom:22px}
.libroot .sixgo{list-style:none;display:grid;gap:6px;align-content:start;min-height:92px;
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--on-navy-line)}
.libroot .sixgo li{font-family:var(--sans);font-size:13.5px;line-height:1.5}
.libroot .sixgo a{color:var(--on-navy-2)}
.libroot .sixgo a::after{content:" \2192";color:var(--gold)}
.libroot .sixgo a:hover{color:#fff}

/* ---- 4 · find answers to real questions (§5) ---------------------------------------------------
 * HOME'S ROW LANGUAGE, TIGHTENED INTO TWO COLUMNS. A rule above the list and below each row, no
 * boxes, no fills, no shadows. The question is the dominant element; the discipline and the niche
 * marker share the line above it. The niche marker is a swatch PAIRED WITH THE NICHE'S NAME, the
 * only form D98 §3 allows outside a card or a head.
 *
 * THE TWO COLUMNS SHARE ROW HEIGHTS, so the hairlines line up across them. That is what a grid
 * gives and a pair of independent lists does not: `grid-auto-rows` is left alone and the rows
 * align because they are rows of one grid rather than rows of two. */
.libroot .libqs,.guide .libqs{background:var(--ivory)}
.libroot .libqgrid,.nhub .libqgrid,.guide .libqgrid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 64px;margin:64px 0 0;padding:0;border-top:1px solid var(--rule-2)}
.libroot .libq,.nhub .libq,.guide .libq{display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:center;
  height:100%;padding:24px 0 26px;border-bottom:1px solid var(--rule-2)}
.libroot .libq .meta,.nhub .libq .meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
  font-family:var(--sans);font-size:11.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text)}
.libroot .libq .niche{display:inline-flex;align-items:center;gap:7px;color:var(--niche-text)}
.libroot .libq .niche .nswatch{width:7px;height:7px;flex:none;background:var(--niche)}
.libroot .libq h3,.nhub .libq h3,.guide .libq h3{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.25;
  letter-spacing:0;color:var(--ink);margin:9px 0 0}
/* C1 (Brand's D105 §12 acceptance, 26 Sep 2026). The arrow is set EXPLICITLY rather than left to
   inherit. Inheritance is what let it drift: the legacy component supplied Source Serif 4 at 300
   while Home's equivalent arrow renders Source Sans 3 at 400, and nothing declared which was
   intended. The rename above removes the leak; this line makes the face a stated fact, so the next
   ancestor that sets a font cannot quietly move it again. Size and colour were already correct. */
.libroot .libq .arr,.nhub .libq .arr,.guide .libq .arr{font-family:var(--sans);font-weight:400;font-size:22px;color:var(--gold-text);
  transition:transform .2s}
.libroot .libq:hover h3,.nhub .libq:hover h3,.guide .libq:hover h3{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.12em}
.libroot .libq:hover .arr,.nhub .libq:hover .arr,.guide .libq:hover .arr{transform:translateX(4px)}

/* B2 · THE ERROR DOCUMENT'S ROW BLOCK, and nothing else.
 * NO NEW CLASS NAME, because none is needed: /404.html is the ONLY built page carrying both
 * `.guide` and `.libqs` — measured across all 182 built documents, not assumed — so this selector
 * cannot reach another page, and it is one class more specific than the shared rule above it.
 *
 * WHY IT IS NEEDED, measured: the shared `.libqgrid` declares `repeat(2,minmax(0,1fr))`, right for
 * the Library root's question grid and wrong for three navigational rows under a message — at 1440
 * it set Library beside Short-Term Rentals and dropped Long-Term Rentals to a second line.
 *
 * THE WIDTH IS AN EXISTING TOKEN, not a new number: `--gcol-w` is D108's reading column. The 64px
 * gap above the rows is the shared rule's own `margin:64px 0 0`, which became the single gap once
 * the row block stopped being a <section> and taking global.css's bare-element `--pad`. */
.guide .libqs .libqgrid{grid-template-columns:1fr;max-width:var(--gcol-w)}

/* B2 D1 (Brand's staging rejection, 5 Oct 2026): THE CLOSING SPACE UNDER THE LAST ROW.
 *
 * The row block opened with 64px and closed with nothing — the last row's bottom rule sat directly
 * against the navy PRO band, measured at 0px. The closing figures are NOT new numbers: they are the
 * shared grid's own `margin-top`, which is 64px above 768 and 40px below it (the D105 phone rule),
 * so the block is symmetrical at every width by construction rather than by a chosen value.
 *
 * IT IS PADDING ON THE IVORY BLOCK, NOT MARGIN ON THE GRID, AND THAT WAS MEASURED BOTH WAYS.
 * `margin-bottom` on the `<ul>` produces the same 64px gap and COLLAPSES THROUGH `.libqs`, whose
 * own bottom edge then still sits on the last row: the closing space falls OUTSIDE the ivory and
 * shows whatever is painted behind it. Background does not stop margin collapse — only padding, a
 * border or a new formatting context does. Measured as `.libqs.bottom - lastRow.bottom`: 0px with
 * the margin, 64px with the padding. Padding also matches the family's idiom, where D108 carries a
 * region's bottom space on the wrapper (`.guide .gwrap{padding-block:40px 96px}`).
 *
 * The shared rule above cannot carry this: `.libroot .libqs` and the niche hubs want no such space,
 * and B2 is not permitted to change them. */
.guide .libqs{padding-bottom:64px}

/* ---- 5 · latest guides and updates (§6) --------------------------------------------------------
 * TYPOGRAPHY ONLY (HQ item 2): a rank numeral, a label line, a title and a month. No thumbnail, no
 * stock image, no invented cover.
 *
 * THESE RULES ARE PRESENT AND THE SECTION IS NOT, TODAY, and that is the honest state rather than
 * dead CSS. config/guide-updates.mjs is the authority D3 requires and it is empty, so the producer
 * emits nothing here; the section appears the day Content populates it. The suite asserts both
 * directions, so this cannot quietly become a block nothing selects.
 *
 * THE LABEL TAKES #7d6013 AND NOT `--gold-text`. This band is `--sink`, the one ground on the site
 * where the standard token measures 4.40:1 and misses AA at this size — the same correction D104
 * makes in the founder band, for the same reason, scoped to where the problem is. */
.libroot .recent{background:var(--sink)}
.libroot .rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  flex-wrap:wrap}
.libroot .recent .eb{color:#7d6013}
.libroot .btn-line{display:inline-block;border:1px solid var(--gold-text);color:var(--gold-text);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:14px 22px;border-radius:2px;transition:background .16s,color .16s}
.libroot .btn-line:hover{background:var(--gold-text);color:#fff}
.libroot .rlist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 48px;margin:56px 0 0;padding:0}
.libroot .rlist a{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding-top:24px;
  border-top:1px solid var(--rule-2);height:100%;transition:border-color .16s}
.libroot .rlist a:hover{border-top-color:var(--gold)}
.libroot .rn{font-family:var(--serif);font-weight:400;font-size:40px;line-height:.9;
  color:var(--rule-2);font-variant-numeric:lining-nums tabular-nums}
.libroot .rlist .meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font-family:var(--sans);font-size:11.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:#7d6013}
.libroot .rlist .niche{display:inline-flex;align-items:center;gap:7px;color:var(--niche-text)}
.libroot .rlist .niche .nswatch{width:7px;height:7px;flex:none;background:var(--niche)}
.libroot .rlist h3{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.28;
  letter-spacing:0;color:var(--ink);margin:9px 0 0}
.libroot .rlist a:hover h3{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.12em}
.libroot .rlist .when{font-family:var(--sans);font-size:14px;color:var(--ink-2);margin:9px 0 0}

/* ---- 6 · motion, only where it is an affordance ------------------------------------------------
 * Three transitions on this page, all on a link: a column's photograph, a question's arrow, and a
 * recent row's top rule. Nothing moves on load and nothing moves on scroll. */
@media(prefers-reduced-motion:reduce){
  .libroot .col .ph img,.libroot .libq .arr,.libroot .rlist a,.libroot .btn-line{transition:none}
  .libroot a.col:hover .ph img{transform:none}
  .libroot .libq:hover .arr,.nhub .libq:hover .arr{transform:none}
}

/* ---- 7 · tablet, 768–1099 (§10) ----------------------------------------------------------------
 * THE HEAD STACKS, for the reason D104's hero does: a side-by-side photograph at these widths puts
 * the picture under the dek instead of beside it. Text first, then a 340px full-bleed band with
 * the scrim turned through 90 degrees so it grows out of the ivory rather than butting against it.
 * The recent list becomes a single ruled list, so three 21px titles are not squeezed into thirds. */
@media(max-width:1099px){
  .libroot .lhead{display:flex;flex-direction:column}
  .libroot .lhead>.wrap{order:1;width:100%}
  .libroot .lhead-photo{position:relative;left:auto;order:2;height:340px}
  .libroot .lhead-photo::before{background:linear-gradient(180deg,var(--ivory) 0%,
    rgba(250,247,241,0) 30%)}
  .libroot .lhead-copy{padding-block:88px 56px}
  .libroot .lhead h1{font-size:54px}
  .libroot .sixgo{min-height:0}
  .libroot .rlist{grid-template-columns:1fr;gap:0}
  .libroot .rlist a{padding-block:20px 22px}
}

/* ---- 8 · the 900px step (§10) ------------------------------------------------------------------
 * Three columns at 900px are 252px wide, which is narrower than the photograph needs to read, and
 * two columns of questions at that width put a 24px serif question into 22em. Both stack here
 * rather than at the tablet boundary — the same 900px step D104 uses, for the same reason. */
@media(max-width:900px){
  .libroot .cols{grid-template-columns:1fr;gap:56px;max-width:560px;margin-inline:auto}
  .libroot .col+.col::before{display:none}
  .libroot .col .ph{aspect-ratio:16/9}
  .libroot .libqgrid,.nhub .libqgrid,.guide .libqgrid{grid-template-columns:1fr}
}

/* ---- 9 · phone, below 768 (§10) ----------------------------------------------------------------
 * 72px of section padding, shared above, and that is the only place this page's spacing is
 * reduced. The head's own padding is the exception the spec writes (§2: 48/40). */
@media(max-width:767px){
  .libroot .lhead{padding:0}
  .libroot .lhead-copy{padding-block:48px 40px}
  .libroot .lhead-photo{height:220px}
  .libroot .lhead h1{font-size:40px}
  .libroot .lhead .dek{font-size:17px}
  /* THE TICKS GO AND THE LINKS STACK. A vertical bar between two stacked links is a separator
     pointing the wrong way, and the lead rule has nothing to lead into once the row is a column. */
  .libroot .jump{flex-direction:column;align-items:flex-start;gap:0;margin-top:32px}
  .libroot .jump::before,.libroot .jump li+li::before{display:none}
  /* A LINK IS A TARGET, NOT A LINE OF TEXT — the 30px floor tools/library-check.mjs holds, applied
     to every standalone link on the page. At 14px these are 21px tall; the padding is what makes
     them tappable and the type, the colour and the position are unchanged. Desktop is untouched. */
  .libroot .jump a{display:inline-block;padding-block:9px}
  .libroot .cols{margin-top:44px}
  .libroot .col h3{font-size:24px}
  .libroot .col .caps{padding-block:6px}
  .libroot .sixgo{grid-auto-flow:column;justify-content:start;gap:6px 22px;min-height:0}
  /* THE PADDING GOES ON THE LINK, NOT ON THE LIST ITEM. The 30px floor is about the TARGET a
     thumb hits, and that is the <a>; padding the <li> grows the row and leaves the hit area at
     19px, which is what the first form of this rule did and what the rendered check caught. */
  .libroot .sixgo a{display:inline-block;padding-block:6px}
  .libroot .six>li>p{margin-bottom:14px}
  .libroot .libqgrid,.nhub .libqgrid,.guide .libqgrid{grid-template-columns:1fr;margin-top:40px}
  /* B2 D1 on the phone: the closing space tracks the opening one, which the line above sets to
     40px here. One declaration, and it reads its partner two lines up rather than restating 40
     as an independent choice. */
  .guide .libqs{padding-bottom:40px}
  .libroot .libq h3,.nhub .libq h3{font-size:21px}
  .libroot .rlist{margin-top:36px}
  .libroot .rn{font-size:32px}
  .libroot .btn-line{padding-block:15px}
}

/* ══ SHARED · THE LEGACY ELEMENT LEAKS, CLOSED AT EVERY V2 FAMILY ROOT ═════════════════════════
 *
 * global.css styles BARE ELEMENTS, not classes, and it is loaded first on every page. Five of its
 * rules reach inside `<main>` wherever the element appears: `em` is gold, `ul`/`ol` keep their
 * markers, `nav` is the masthead — flex, and DISPLAY:NONE below 860px — `nav a` is the masthead's
 * link type, and `header` is the sticky site header.
 *
 * D108 answered all five for `.guide` and is the reference implementation. Every family that
 * followed borrowed D108's components without borrowing its closures, and the cost was measured
 * in a browser, twice, after deployment:
 *
 *   C1 (30 Sep 2026) — `header` reached `.twork`, and the Tool page's reading head WAS the site
 *   header: painted in the middle of the page, sticky, following the reader over the worksheet.
 *
 *   This block (1 Oct 2026) — `nav` reached `.twork`, `.dhub` and `.nhub`. Below 860px both tool
 *   pages lost their breadcrumb AND the Keep going band, and all 12 discipline hubs and both
 *   niche roots lost their breadcrumb. Sixteen pages with no breadcrumb on a phone, and every
 *   gate green, because a scope check reads selector text and this defect is an ABSENT selector.
 *
 * THE CLOSURES ARE UNIFORM ACROSS THE FOUR ROOTS rather than fitted to what each family happens
 * to emit today. `header` occurs in neither `.dhub` nor `.nhub`, and `em` occurs in none of the
 * three; closing them there resets a leak that currently reaches nothing, at zero specificity,
 * for one selector each. Fitting each root to its present markup is precisely what produced both
 * defects above — a list assembled by noticing things cannot notice the element a family gains
 * next week — so the suite compares the four sets for EQUALITY, with no element excused.
 *
 * `:where()` holds every rule here at zero specificity, so any family rule wins without being
 * written more forcefully than it should be. Nothing is added to or removed from global.css: the
 * one-year cache on it is why that direction is not negotiable (D17).
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */
.guide :where(em),.twork :where(em),.dhub :where(em),.nhub :where(em){color:inherit;font-weight:inherit;font-style:italic}
.guide :where(ul,ol),.twork :where(ul,ol),.dhub :where(ul,ol),.nhub :where(ul,ol){list-style:none}
/* `nav{display:flex;align-items:center;gap:30px;margin-left:auto}` is the SITE HEADER's rule and
   `@media(max-width:860px){nav{display:none}}` is its mobile collapse — the masthead folding into
   the hamburger. Both reach every <nav> on the page. D108 emits three (breadcrumb, contents, Keep
   going) and the contents laid out as a row: the "On this page" label beside its own list, both
   squeezed into a 236px track. D109, D110 and D111 emit a breadcrumb, and D111 also emits the
   shared Keep going band. The legacy sheet answers this for its own TOC with `nav.toc{display:
   block}`, one rule at a time; this answers it once, for every family. `nav a` is reset with it,
   or the masthead's .9rem/500 link type carries into the breadcrumb and the band's cards. */
.guide :where(nav),.twork :where(nav),.dhub :where(nav),.nhub :where(nav){display:block;align-items:normal;gap:normal;margin-left:0}
.guide :where(nav a),.twork :where(nav a),.dhub :where(nav a),.nhub :where(nav a){color:inherit;font-size:inherit;font-weight:inherit;transition:none}
/* AND `header{position:sticky;top:0;z-index:50;padding:16px 0;backdrop-filter:blur(8px);
   border-bottom:...}` IS THE SITE HEADER'S RULE, applying to every <header> element. A family's
   reading head is a <header> (D108 §11's structure), so it inherited all of it and PINNED ITSELF
   over the article: scroll into the body and the navy head slid down with you, covering the
   takeaways. It also took 16px of padding on top of its own, a border on a head the spec says has
   none, and a blur filter over a gradient. */
.guide :where(header),.twork :where(header),.dhub :where(header),.nhub :where(header){position:static;top:auto;z-index:auto;padding:0;border-bottom:0;backdrop-filter:none}

/* ══ D108 · THE STANDARD GUIDE ═══════════════════════════════════════════════════════════════
 *
 * The reading page for the 118 Standard Guides. D104 is the cover of the publication, D105 its
 * table of contents, and this is the page you actually read. It inherits their visual system and
 * changes only what reading requires: a 680px serif column, a scan layer that stays sans, and the
 * canonical rhythm — navy orientation, ivory reading, navy onward-navigation.
 *
 * EVERY SELECTOR IN THIS BLOCK BEGINS WITH `.guide`, AND THE SUITE ASSERTS IT (§14.1).
 * Not a convention — a check. `.article` was held only by convention, and D106 spent a release on
 * a class collision that convention did not prevent. `<main class="guide">` is emitted by
 * `lib/render-standard-guide.mjs` and by nothing else, so a rule here cannot reach the six Pillars,
 * the 41 captures, Home or the Library root however it is written.
 *
 * NOTHING BELOW IS ADDED TO global.css, and nothing in global.css is deleted or restyled (R2).
 * `.alayout`, `.rail`, `.toc`, `.toc-card`, `.card2` and `.lb` still serve capture families B and C
 * and are left exactly as they are; D108 emits its own vocabulary instead of borrowing theirs. The
 * one-year cache on global.css is the reason that direction is not negotiable (D17).
 *
 * THE TOKENS ARE D98's, UNCHANGED. Not one is redeclared here: a `--gold` redefined inside `.guide`
 * would be a second source of truth for a value the whole V2 system shares. Where D108 needs a
 * measurement of its own — the column, the header offset — it declares a local custom property on
 * `.guide` itself, which cannot escape the scope.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

.guide{
  /* The reading measure, the TOC width and the two offsets the header height sets. 76px is the
     shared sticky header measured at 1440; the spec asks for it plus 24px on an anchor and plus
     40px under the sticky TOC, so both are expressed against one constant rather than typed twice
     and drifting when the header changes. */
  --gcol-w:680px;
  --gtoc-w:236px;
  /* DERIVED, not typed. The literal moved to :root as `--site-head-h` when the skip target needed
     the same measurement on every family; this keeps D108's local name and its scoping intent
     while there is only one copy of the number. */
  --ghead-h:var(--site-head-h);
  --gsec-gap:64px;
  display:block;
  background:var(--ivory);
}

/* ---- WHAT THE LEGACY SHEET DOES TO THIS PAGE, UNDONE INSIDE THE SCOPE --------------------------
 *
 * global.css is loaded first on every page and styles bare elements, not classes: `section` carries
 * 72–132px of vertical padding and `h1,h2,h3` are weight 300 at −.024em. Those are correct for the
 * captured families and wrong for a reading column. They are answered here, inside `.guide`,
 * rather than by editing the legacy sheet, which is the whole point of the scope. `:where()` keeps
 * these at zero specificity so every rule further down wins without needing to be written more
 * forcefully than it should be.
 *
 * THE FIVE LEAKS D108 SHARES WITH EVERY OTHER FAMILY — `em`, `ul`/`ol`, `nav`, `nav a`, `header`
 * — ARE NOT HERE. They moved, unchanged for `.guide`, to the SHARED block above this one, whose
 * selector lists now name `.twork`, `.dhub` and `.nhub` as well. They were written here first
 * because D108 was the first family to meet them; keeping them here is what let three later
 * families borrow D108's components and not its closures. The two below are D108's own, because
 * no other family emits the elements they answer. */
/* THE SECTION RESET NAMES D108's OWN SECTIONS, NOT EVERY <section> INSIDE THE SCOPE. Written as
   `:where(section)` it also caught `section.s6` — the shared PRO band, which the composer appends
   unchanged and which §8.2 and the Stage 3 guardrails say must stay exactly as it is. It lost its
   129.6px of vertical padding on all 118 pages and stood 366px tall instead of 625px, while every
   assertion stayed green: the band's own markup was untouched, so only a measurement could see it.
   The three below are the sections D108 emits, and they take their spacing from their own rules. */
.guide :where(.gsec,.gplan,.gbottom){padding:0;position:static}
.guide :where(h1,h2,h3,h4){font-family:var(--serif);font-weight:400;letter-spacing:normal;color:var(--ink)}

/* ---- §3 · THE READING HEAD (navy) -------------------------------------------------------------
 * Breadcrumb · label row · H1 · dek · byline. No photograph, no date, and no bottom border: the
 * navy simply ends where the ivory begins. */
.guide .ghead,.twork .ghead{
  /* THE NAVY IS DECLARED AS A COLOUR AS WELL AS A GRADIENT. The `background` shorthand resets
     background-color to transparent, so with only gradient layers the ground is painted entirely
     by images — and white text over a failed image layer lands on the ivory page beneath it. The
     colour underneath is what the contrast in §11 is actually measured against. */
  background-color:var(--navy);
  background-image:
    radial-gradient(1000px 520px at 88% -30%, rgba(72,116,200,.22), transparent 60%),
    linear-gradient(170deg, var(--navy), var(--navy-deep));
  color:var(--on-navy);
}
.guide .ghead>.wrap,.twork .ghead>.wrap{padding-block:72px 64px}
.guide .gcrumb,.twork .gcrumb{font-family:var(--sans);font-size:14px;color:var(--on-navy-2)}
.guide .gcrumb a,.twork .gcrumb a{color:var(--on-navy-2)}
.guide .gcrumb a:hover,.twork .gcrumb a:hover{color:#fff;text-decoration:underline}
.guide .gcrumb span,.twork .gcrumb span{color:rgba(255,255,255,.28);margin:0 8px}
.guide .gmeta,.twork .gmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:26px;
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
}
.guide .gmeta .gniche,.twork .gmeta .gniche{display:inline-flex;align-items:center;color:var(--on-navy);letter-spacing:.08em}
.guide .gmeta .nswatch,.twork .gmeta .nswatch{width:8px;height:8px;flex:none;margin-right:7px}
.guide .gmeta .gtype,.twork .gmeta .gtype{color:var(--gold)}
.guide .ghead h1,.twork .ghead h1{
  margin-top:14px;font-size:52px;font-weight:450;line-height:1.08;letter-spacing:-.015em;
  color:#fff;max-width:19em;text-wrap:balance;
}
.guide .gdek,.twork .gdek{
  margin-top:22px;font-family:var(--serif);font-size:21.5px;font-weight:400;line-height:1.5;
  color:var(--on-navy-2);max-width:34em;
}
.guide .gby,.twork .gby{display:flex;align-items:center;gap:14px;margin-top:32px;font-family:var(--sans)}
.guide .gavatar,.twork .gavatar{width:48px;height:48px;flex:none;border-radius:2px;object-fit:cover;object-position:50% 28%}
.guide .gwho,.twork .gwho{display:flex;flex-direction:column;line-height:1.3}
.guide .gwho b,.twork .gwho b{font-size:16px;font-weight:600;color:#fff}
.guide .grole,.twork .grole{font-size:14px;color:var(--on-navy-2)}
/* The tick between the name and the reading time is a rule, not a character, so it never lands in
   a screen reader or a copied line. */
.guide .gread{
  font-size:14px;color:var(--on-navy-2);padding-left:18px;
  border-left:1px solid var(--on-navy-line);align-self:center;
}

/* ---- §2.3 · THE GRID ---------------------------------------------------------------------------
 * Two columns at 1100 and above: the reading measure on the wrap's left edge, the contents on its
 * right. THERE IS NEVER AN EMPTY COLUMN — a guide with no contents emits no `.gtoc` element at all
 * (the composer omits it), so the second track collapses rather than being reserved and hidden. */
.guide .gwrap{
  display:grid;grid-template-columns:minmax(0,var(--gcol-w)) minmax(0,1fr);
  column-gap:clamp(96px,10vw,176px);align-items:start;
  padding-block:56px 112px;
}
/* A LOCKED TOKEN CAN BE LONGER THAN THE COLUMN, AND THE COLUMN IS NOT ALLOWED TO LOSE.
   `exit/death/dispute/deadlock/dissolution` is 39 characters with no space in it, in the
   Multi-Member LLC guide's action plan. At the phone measure it renders 359px wide in a 350px box
   and spills 9px past the viewport — and because an unbreakable word overflows its box WITHOUT
   growing it, the paragraph's own geometry stays innocent and only the document's scrollWidth
   shows it. Rule 1 says the content is not edited to suit the layout, so the layout accommodates
   the content: `break-word` breaks a word only when it cannot otherwise fit, leaving every line
   that does fit set exactly as before. Scoped to D108's own subtrees, not `.guide`, so the shared
   PRO band's behaviour is unchanged. */
.guide .gart,.guide .gkeep,.twork .gkeep{overflow-wrap:break-word}
.guide .gcol{min-width:0;max-width:var(--gcol-w)}
/* THE DEFAULT FLOW GAP, AND IT IS A DEFAULT ON PURPOSE. §2.2 sets the paragraph gap at 1.05em, and
   it has to reach prose wherever it sits — directly in the column, inside a `<section>`, inside the
   opening block. Written as `.gcol>*+*` alone it reached only the column's own children, and every
   paragraph after the first inside a section ran straight into the next with no gap at all.
   `:where()` keeps this at the specificity of `.guide` alone, so every component below — the 48px
   above an H3, the 8px under a numeral, a figure's 48px — overrides it by being more specific
   rather than by being written later, and the block does not depend on its own line order. */
.guide :where(.gcol,.gsec,.gopen,.gplan li,.gbottom,.gtake li)>*+*{margin-top:1.05em}

/* ---- §4 · THE READING COLUMN -------------------------------------------------------------------
 * Serif, never justified. The scan layer below is sans; this is the only place continuous prose
 * lives. */
/* THE BASE PROSE RULE IS DELIBERATELY LOW-SPECIFICITY. Written as `.guide .gcol p` it scores
   (0,2,1) and quietly OUTRANKS every component rule that names a class on a <p> — the disclaimer,
   the figure footnote, the principle's maxim and statement all sit inside the column and are
   paragraphs, and all four were losing their own type to the body's. `:where()` drops the scope to
   (0,1,0) so a component's class always wins, which is the relationship those rules assume. */
.guide :where(.gcol) :where(p,li){
  font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.66;color:var(--ink);
}
.guide .gcol b,.guide .gcol strong{font-weight:650}
/* A BODY LINK IS UNDERLINED IN GOLD, not coloured. Colour alone would fail on the ivory ground at
   the body's size, and the offset keeps the rule clear of the descenders in a serif face. */
/* NAMED BY THE PROSE CONTAINERS, NOT BY THE COLUMN. Written as `.gcol li a` this rule also caught
   the collapsed "On this page" list, which lives inside the column too — every contents entry on a
   phone published with the gold body-link underline, reading as running prose rather than as
   navigation. The containers below are the ones that hold editorial copy; the contents, the
   figure's chrome and the end matter carry their own link treatments. */
.guide :where(.gsec,.gopen,.gtake,.gplan,.gbottom,.gmistake,.gprin,.matrix,.ledger)
  :where(p,li,blockquote,td,th) a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:.22em;
}
.guide :where(.gsec,.gopen,.gtake,.gplan,.gbottom,.gmistake,.gprin,.matrix,.ledger)
  :where(p,li,blockquote,td,th) a:hover{
  color:var(--gold-text);text-decoration-thickness:2px;
}
/* Unordered lists take a dash, not a bullet: a 12×1px gold rule on the marker line. */
.guide .gcol ul:not(.gtake ul){margin-left:28px}
.guide .gcol ul:not(.gtake ul)>li{position:relative;padding-left:0}
.guide .gcol ul:not(.gtake ul)>li+li{margin-top:.75em}
.guide .gcol ul:not(.gtake ul)>li::before{
  content:"";position:absolute;left:-28px;top:.78em;width:12px;height:1px;background:var(--gold-text);
}
/* Ordered lists in prose count in two-digit sans numerals, like the action plan's rows. */
.guide .gcol>ol{counter-reset:gol;margin-left:40px}
.guide .gcol>ol>li{position:relative}
.guide .gcol>ol>li+li{margin-top:.75em}
.guide .gcol>ol>li::before{
  counter-increment:gol;content:counter(gol,decimal-leading-zero);
  position:absolute;left:-40px;top:.34em;
  font-family:var(--sans);font-size:13px;font-weight:650;color:var(--gold-text);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ---- §5.2 · H2 SECTION HEAD --------------------------------------------------------------------
 * A rule across the column, the numeral, then the heading. The numeral is CHROME: it lives in its
 * own aria-hidden span outside the <h2>, so it is not in the heading text, the accessible name or
 * the anchor (ruling 1) — and the same reasoning is why it is positioned rather than floated into
 * the heading's own box. */
.guide .gsec{margin-top:var(--gsec-gap);border-top:1px solid var(--rule-2);padding-top:20px}
.guide .gsec>.gnum{
  display:block;font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:.08em;
  color:var(--gold-text);font-variant-numeric:tabular-nums lining-nums;
}
.guide .gsec>h2{margin-top:8px;font-size:31px;font-weight:500;line-height:1.18;letter-spacing:-.01em}
/* Every heading is a link target, so every heading clears the sticky header when it is jumped to. */
.guide h2[id],.guide h3[id]{scroll-margin-top:calc(var(--ghead-h) + 24px)}

/* ---- §5.3 · H3 SUBSECTION ---------------------------------------------------------------------- */
.guide .gcol h3{
  margin-top:48px;font-size:23px;font-weight:600;line-height:1.28;position:relative;padding-top:14px;
}
.guide .gcol h3::before{content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:var(--gold)}
.guide .gcol h3+*{margin-top:.85em}

/* ---- §5.3b · THE KICKERED H3, AND THE COLUMN'S FIRST SECTION (B3, Brand D1/D2, 5 Oct 2026) -----
 *
 * THREE DECLARATIONS, THREE RULES, AND NOT ONE OF THEM IS A NEW CLASS OR A NEW COMPONENT. Brand
 * rejected the B3 mirror on presentation and HQ ruled the fix must prefer existing D108 structure.
 * Two of the three defects needed no CSS at all: D1's column edge was `.gwrap` emitted without
 * `.wrap` beside it (markup, now corrected in both renderers), and D3's kicker colour was `.gmeta`
 * — the NAVY head's label row, whose gold is `var(--gold)` — standing in for `.gsec>.gnum`, which
 * is the family's label-above-a-heading component and already declares `var(--gold-text)`.
 *
 * WHAT IS LEFT IS SPACING, AND IT WAS INVERTED. D108 declares `.gcol h3{margin-top:48px}`, which is
 * the gap between one subsection and the next and is correct when the h3 opens the group. With a
 * kicker above it the 48px landed BETWEEN the kicker and its own heading while the kicker sat 13.65px
 * below the previous paragraph — so every kicker read as a tailpiece to the block above it rather
 * than as the label of the block below. The two rules move that gap in front of the pair and close
 * the pair to 8px, which is `.gsec>h2{margin-top:8px}`: the family's own numeral-to-heading value,
 * reused rather than chosen.
 *
 * `:has(+h3)` KEEPS IT OFF THE SECTION EYEBROW. The first `.gnum` in a section labels the `<h2>` and
 * is the first child, so it takes no margin and must keep taking none; only a `.gnum` whose next
 * sibling is an h3 is a subsection kicker. `:has()` is already load-bearing in this sheet (§6.1's
 * contents rail), so this is not a new dependency.
 *
 * AND THE FIRST SECTION PAYS NO TRANSITION GAP. `.gsec{margin-top:var(--gsec-gap)}` is a gap
 * BETWEEN sections; on top of `.gwrap`'s own padding-block-start it opened About and Contact at
 * 120px against the family's 56px, which is the third thing Brand measured. It had never surfaced
 * because of all 129 pages in this family only these two open their column with a `.gsec` — the
 * other 127 open with `.gotp` (85) or `.gtake` (42), neither of which carries that margin. So this
 * is the family's existing opening rhythm restated for a first child that is a section, not a new
 * one invented for two pages: the opening is now `.gwrap`'s 56/40/28 exactly as everywhere else,
 * and the 64px section-to-section transition is untouched. */
.guide .gcol>.gsec:first-child{margin-top:0}
.guide .gsec>.gnum:has(+h3){margin-top:48px}
.guide .gsec>.gnum+h3{margin-top:8px}

/* ---- §6.1 · THE CONTENTS, STICKY, ON DESKTOP ---------------------------------------------------
 * Unboxed by ruling — Key takeaways is the page's ONE framed object, and a second frame beside it
 * would make the contents compete with the reading. It sticks within the article grid only: the
 * grid item ends where the article does, so the rail cannot ride down into the navy band below. */
.guide .gtoc{
  position:sticky;top:calc(var(--ghead-h) + 40px);justify-self:end;
  width:var(--gtoc-w);max-height:calc(100vh - var(--ghead-h) - 80px);overflow-y:auto;
  font-family:var(--sans);
}
.guide .gtoc .glab{
  font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);
}
.guide .gtoc ol{margin-top:14px;border-left:1px solid var(--rule-2)}
.guide .gtoc li{position:relative}
.guide .gtoc a{
  display:grid;grid-template-columns:26px 1fr;align-items:baseline;
  padding:6px 0 6px 18px;font-size:14.5px;line-height:1.4;color:var(--ink-2);
}
.guide .gtoc a:hover{color:var(--ink)}
.guide .gtoc .gnum{font-size:12.5px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums}
/* ENTRY TEXT ALWAYS SITS IN THE SECOND COLUMN, numbered or not. Your action plan and The bottom
   line carry no numeral (§6), and without this they fell into the 26px numeral track and wrapped
   one word per line. Placing the text explicitly also keeps every entry's left edge on one line,
   which is what makes the list read as a list rather than as two. */
.guide .gtoc .gtoct,.guide .gotp .gtoct{grid-column:2}
/* §6's 14px gap between the numbered sections and the unnumbered entries after them. Expressed as
   the boundary itself — the first unnumbered entry that follows a numbered one — so it cannot land
   on a guide whose entries are all of one kind. Where `:has()` is unsupported the gap is simply
   absent, which costs a little air and no meaning. */
.guide .gtoc li:has(>a>.gnum)+li:not(:has(>a>.gnum)),
.guide .gotp li:has(>a>.gnum)+li:not(:has(>a>.gnum)){margin-top:14px}
/* The current section: the text steps up, the numeral takes gold, and a 2px marker sits ON the
   rule. The marker is a pseudo-element on the link, so nothing is added to the DOM for a state. */
.guide .gtoc a[aria-current="true"]{color:var(--ink);font-weight:600}
.guide .gtoc a[aria-current="true"] .gnum{color:var(--gold-text)}
.guide .gtoc a[aria-current="true"]::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--gold);
}
.guide .gtoc .gtop{margin-top:16px;padding-left:18px}
.guide .gtoc .gtop a{display:inline;padding:0;font-size:13.5px;color:var(--ink-3)}
.guide .gtoc .gtop a:hover{color:var(--gold-text)}

/* ---- §6.2 · "ON THIS PAGE", COLLAPSED, BELOW 1100 ----------------------------------------------
 * A native <details>. It carries LINKS ONLY, which is why collapsing it hides nothing a reader or
 * an extraction tool needs (§11). Hidden above 1100, where the sticky rail serves instead. */
.guide .gotp{display:none}
.guide .gotp summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:14px;cursor:pointer;list-style:none;font-family:var(--sans);
  font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);
}
.guide .gotp summary::-webkit-details-marker{display:none}
.guide .gotp .gotp-n{
  font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink-3);
  display:flex;align-items:center;gap:12px;
}
.guide .gotp .gotp-n::after{content:"+";font-size:17px;font-weight:400;color:var(--ink-2);line-height:1}
.guide .gotp[open] .gotp-n::after{content:"\2212"}
.guide .gotp ol{padding-bottom:8px}
.guide .gotp li+li{border-top:1px solid var(--rule)}
/* THE SANS IS SET ON THE ROW, NOT INHERITED. `.gotp` lives INSIDE `.gcol`, so its list items are
   matched directly by the column's base prose rule and take the serif; a `font-family` on `.gotp`
   loses to that, because a rule that matches an element always beats a value inherited into it.
   The sticky rail never had this problem — it sits outside the column — so the defect existed only
   in the rendering that serves tablet and phone, which is exactly where nobody was looking. */
.guide .gotp li,.guide .gotp a{font-family:var(--sans)}
.guide .gotp a{
  display:grid;grid-template-columns:30px 1fr;align-items:baseline;gap:6px;
  min-height:44px;align-content:center;padding-block:10px;font-size:16px;color:var(--ink-2);
}
.guide .gotp .gnum{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums}

/* ---- §7.1 · KEY TAKEAWAYS — the one framed object (tier 1) -------------------------------------- */
.guide .gtake{
  background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);
  padding:26px 32px 12px;
}
.guide .gtake-h{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);line-height:1.2;
}
.guide .gtake ul{margin-top:14px}
.guide .gtake li{
  position:relative;padding:0 0 14px 22px;font-family:var(--sans);font-size:16.5px;font-weight:400;
  line-height:1.55;color:var(--ink);
}
.guide .gtake li+li{border-top:1px solid var(--rule);padding-top:14px}
.guide .gtake li b,.guide .gtake li strong{font-weight:650}
.guide .gtake li::before{
  content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--gold-text);
}
.guide .gtake li+li::before{top:calc(14px + .72em)}

/* ---- §7.2 · THE OPENING ------------------------------------------------------------------------
 * Prose before the first H2. No heading, no rule — it simply begins. */
.guide .gopen{margin-top:44px}

/* ---- §7.3 · FIGURE -----------------------------------------------------------------------------
 * The generated SVG on a paper canvas. ONLY THE CANVAS SCROLLS on a phone (D22): the cue, the
 * caption and the footnote are siblings of `.gfig`, never children, or they would be dragged
 * off-screen with the diagram. */
.guide .gfig{
  margin-top:48px;background:var(--paper);border:1px solid var(--rule);padding:24px;overflow-x:auto;
}
.guide .gfig svg{display:block;width:100%;height:auto;min-width:620px}
.guide .gswipe{
  display:none;margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--ink-3);
}
.guide .gfigcap{
  margin-top:14px;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-3);
}
.guide .gfigcap .glab{
  font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);margin-right:8px;
}
.guide .gfignote{
  margin-top:10px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-3);
}
.guide .gfig+.gswipe+.gfigcap,.guide .gfig+.gfigcap{margin-bottom:44px}

/* ---- §7.4 · THE PRINCIPLE ---------------------------------------------------------------------- */
.guide .gprin{
  margin-top:52px;margin-bottom:52px;padding:30px 32px;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
}
.guide .gprin .glab{
  display:block;font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text);
}
.guide .gmaxim{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.3;color:var(--ink)}

/* ---- §7.4b · THE FOUNDER PORTRAIT (B3, HQ R1, 5 Oct 2026) --------------------------------------
 * THE ONLY NEW CLASS B3 DECLARES, and HQ's narrow R1 allowance is what pays for it.
 *
 * It replaces an inline `style` attribute of the same four declarations on /about/. The page was
 * composed but classified nowhere, and its five inline styles were the residue of having no family
 * to put rules in; this is one of them retired into the stylesheet.
 *
 * THE SIZE IS THE FILE'S OWN. /matt-nunn.jpg is 120x120 because it was made to sit beside an
 * article byline, so it is rendered at native size: larger is a blurry upscale, and a soft
 * photograph on the page whose job is credibility is worse than a small sharp one. The width and
 * height attributes carry the same numbers so the box is reserved before the image loads.
 *
 * WHAT IT DELIBERATELY IS NOT: a founder COMPONENT. HQ R1 permits the minimum genuinely required
 * and R2 ruled that "D104 founder treatment" means the editorial and authority posture rather than
 * home-family markup or CSS, so there is no grid, no media query, no panel and nothing copied from
 * `.home`. The founder section is a `.gsec` like the two beside it and the authority comes from the
 * biography. The principles needed no new class at all: D108's own `.gprin` is literally "The
 * principle", and these three are maxims with explanatory bodies. */
.guide .gportrait{width:120px;height:120px;border-radius:3px;margin-block:18px}
.guide .gstmt{margin-top:16px;font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink-2)}

/* ---- §7.5 · THE COMMON MISTAKE ------------------------------------------------------------------
 * The note colour appears here and nowhere else in the family: a 2px left rule and the label. */
.guide .gmistake{margin-top:44px;border-left:2px solid var(--note);padding-left:24px}
.guide .gmistake .glab{
  display:block;font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--note-text);
}
.guide .gmistake p{margin-top:10px;font-size:18.5px}

/* ---- §7.6 · BLOCKQUOTE -------------------------------------------------------------------------- */
.guide .gcol blockquote{
  margin:32px 0;border-left:2px solid var(--rule-2);padding-left:22px;
}
.guide .gcol blockquote p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-2)}

/* ---- §7.7 · TABLE --------------------------------------------------------------------------------
 * The WRAPPER scrolls, never the page. Sans, tabular figures, a 2px ink rule under the header row.
 *
 * NO INFERENCE, BY RULING (R4; D52 remains controlling). There is deliberately no rule here that
 * right-aligns a column because it "looks numeric", none that suppresses a repeated group label,
 * and none that emboldens a row because a cell says "Total". Those would be the stylesheet deciding
 * what the content means from how it is worded, and the same reasoning that keeps the parser from
 * inferring a row header keeps the sheet from inferring a total. Every source-visible cell is
 * shown, every cell reads left, and the author's own words carry the emphasis. */
/* EVERY LEGACY DECLARATION IS ANSWERED, not just the ones D108 changes. `table.matrix` in
   global.css gives the header a NAVY FILL, every cell a right and bottom border, the row header the
   display face, and the wrapper a rounded 1px frame — a boxed grid with a navy band across the top.
   Setting only the new values left all of that underneath: the first render of this block produced
   a table in the legacy chrome with D108's type on it. A reset a rule forgets is a rule that still
   applies, so the overrides below are written property by property against what global declares. */
.guide .matrix-wrap{margin-top:32px;margin-bottom:32px;overflow-x:auto;border:0;border-radius:0}
.guide .matrix{
  width:100%;border-collapse:collapse;background:var(--paper);
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.guide .matrix th,.guide .matrix td{
  background:none;border-right:0;border-bottom:0;font-family:var(--sans);
  text-align:left;padding:10px 16px;vertical-align:top;
}
.guide .matrix thead th{
  font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:2px solid var(--ink);
}
.guide .matrix tbody td,.guide .matrix tbody th{border-top:1px solid var(--rule)}
.guide .matrix tbody th{font-weight:650;color:var(--ink-2)}

/* ---- §7.8 · WORKED CALCULATION (ruling 3) --------------------------------------------------------
 * A ledger, not a code block: the expression is a row header and the result is its cell, so
 * assistive technology and an extraction tool both read "this expression gives this result".
 *
 * THE RESULT'S ALIGNMENT IS STRUCTURAL, NOT INFERRED, which is why it survives R4. A `.ledger` has
 * exactly two columns by construction — the parser refuses any fenced block that is not
 * `expression = result` — so "the second column holds the result" is a fact about the component,
 * not a guess about the wording of a cell. */
.guide .ledgerwrap{
  margin-top:32px;margin-bottom:32px;background:var(--paper);
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  padding:14px 20px 8px;overflow-x:auto;
}
.guide .ledger{width:100%;border-collapse:collapse;font-family:var(--sans)}
.guide .ledger caption{
  text-align:left;font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);padding-bottom:10px;
}
.guide .ledger th,.guide .ledger td{
  padding:10px 0;border-top:1px solid var(--rule);
  font-variant-numeric:tabular-nums lining-nums;
}
.guide .ledger tr:first-child th,.guide .ledger tr:first-child td{border-top:0}
.guide .ledger th{text-align:left;font-weight:400;font-size:16px;color:var(--ink-2)}
/* The " =" belongs to the reading of the row, not to the source: the parser splits the line at its
   last " = " and keeps both halves verbatim, so the sign is restored here as presentation. */
.guide .ledger th::after{content:" =";color:var(--ink-3)}
.guide .ledger td{text-align:right;font-size:17px;font-weight:650;color:var(--ink);padding-left:20px}

/* ---- §7.9 · YOUR ACTION PLAN --------------------------------------------------------------------- */
.guide .gplan{margin-top:var(--gsec-gap);border-top:1px solid var(--rule-2);padding-top:20px}
.guide .gplan>h2{font-size:31px;font-weight:500;line-height:1.18;letter-spacing:-.01em}
.guide .gplan ol{margin-top:20px;counter-reset:gpl}
.guide .gplan li{
  position:relative;padding:14px 0 14px 48px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:18.5px;line-height:1.6;color:var(--ink);
}
.guide .gplan li:first-child{border-top:0;padding-top:0}
.guide .gplan li::before{
  counter-increment:gpl;content:counter(gpl,decimal-leading-zero);
  position:absolute;left:0;top:1.05em;
  font-family:var(--sans);font-size:15px;font-weight:650;color:var(--gold-text);
  font-variant-numeric:tabular-nums lining-nums;
}
.guide .gplan li:first-child::before{top:.28em}
.guide .gplan li b,.guide .gplan li strong{font-weight:650}

/* ---- §7.10 · THE BOTTOM LINE, AUTHOR LINE, DISCLAIMER --------------------------------------------
 * The bottom line's rule is GOLD rather than stone: it is the one rule on the page that marks a
 * close rather than a division. */
.guide .gbottom{margin-top:var(--gsec-gap);border-top:1px solid var(--gold);padding-top:20px}
.guide .gbottom>h2{font-size:31px;font-weight:500;line-height:1.18;letter-spacing:-.01em}
.guide .gbottom p{margin-top:16px;font-size:20px}
.guide .gauthor{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:48px;border-top:1px solid var(--rule);padding-top:22px;
}
.guide .gauthor img{width:44px;height:44px;flex:none;border-radius:2px;object-fit:cover;object-position:50% 28%}
.guide .gauthor p{flex:1 1 14em;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink-2)}
.guide .gauthor p b{font-weight:650;color:var(--ink)}
.guide .gabout{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);margin-left:auto;
}
.guide .gabout:hover{text-decoration:underline}
.guide .gfine{
  margin-top:22px;font-family:var(--sans);font-style:italic;font-size:14.5px;line-height:1.55;
  color:var(--ink-3);max-width:62ch;
}

/* ---- §8.1 · KEEP GOING IN [DISCIPLINE] (navy, ruling 5) -------------------------------------------
 * One band where there used to be two components. It is a SIBLING of the article, not its tail:
 * navigation between two reads rather than the end of this one, which is why it is a <nav> outside
 * `<article>` and why it takes the full width the article never does. */
.guide .gkeep,.twork .gkeep{
  /* THE NAVY IS DECLARED AS A COLOUR AS WELL AS A GRADIENT. The `background` shorthand resets
     background-color to transparent, so with only gradient layers the ground is painted entirely
     by images — and white text over a failed image layer lands on the ivory page beneath it. The
     colour underneath is what the contrast in §11 is actually measured against. */
  background-color:var(--navy);
  background-image:
    radial-gradient(1000px 520px at 88% -30%, rgba(72,116,200,.22), transparent 60%),
    linear-gradient(170deg, var(--navy), var(--navy-deep));
  color:var(--on-navy);padding-block:104px 112px;
}
.guide .gkeep .glab,.twork .gkeep .glab{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);
}
/* THE FAMILY AND THE TRACKING ARE DECLARED HERE, not inherited (Brand N1, 1 Oct 2026).
   `.guide :where(h1,h2,h3,h4)` sets the serif and clears the legacy tracking for D108's
   headings, and it names only `.guide` - so on the Tool page this H2 took `global.css`'s
   heading rule instead: Source Sans 3 at -.024em, in the one band that is supposed to be
   the same object on both families. Measured at 1440: guide Serif/normal, tool Sans/-0.96px,
   with size, weight and colour already identical. Declared in the SHARED list rather than
   overridden under `.twork`, and rather than widening the heading closure - which would also
   strip the tracking from the four `.th2` section heads Brand accepted as served. */
.guide .gkeep>.wrap>h2,.twork .gkeep>.wrap>h2{margin-top:14px;font-family:var(--serif);font-size:40px;font-weight:450;letter-spacing:normal;line-height:1.14;color:#fff}
.guide .gkeep>.wrap>h2 i,.twork .gkeep>.wrap>h2 i{font-style:italic}
.guide .gnexts,.twork .gnexts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:48px;margin-top:48px}
.guide .gnext,.twork .gnext{display:block;border-top:1px solid var(--on-navy-line);padding-top:18px}
.guide .gnext:hover,.twork .gnext:hover{border-top-color:var(--gold)}
.guide .gnext-m,.twork .gnext-m{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-family:var(--sans);font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
}
.guide .gnext-m .gtype,.twork .gnext-m .gtype{color:var(--gold)}
.guide .gnext-m .gniche,.twork .gnext-m .gniche{display:inline-flex;align-items:center;color:var(--on-navy)}
.guide .gnext-m .nswatch,.twork .gnext-m .nswatch{width:8px;height:8px;flex:none;margin-right:7px}
.guide .gnext-t,.twork .gnext-t{display:block;margin-top:12px;font-family:var(--serif);font-size:22px;line-height:1.28;color:#fff}
.guide .gnext-p,.twork .gnext-p{display:block;margin-top:10px;font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--on-navy-2)}
/* "Also in" merges the declared overflow with the domain rail. The two ranks look the same to a
   reader on purpose — they are all "other things in this discipline" — and `.gnext-o` is a
   provenance hook for the build, deliberately carrying no treatment of its own. */
.guide .galso,.twork .galso{margin-top:64px}
.guide .galso .glab,.twork .galso .glab{display:block}
.guide .galso ul,.twork .galso ul{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.guide .galso li,.twork .galso li{border-top:1px solid var(--on-navy-line)}
.guide .galso a,.twork .galso a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block:14px;min-height:44px;
}
.guide .galso a:hover,.twork .galso a:hover{border-top-color:var(--gold)}
.guide .galso .gnext-t,.twork .galso .gnext-t{margin-top:0;font-size:18.5px}
.guide .galso a:hover .gnext-t,.twork .galso a:hover .gnext-t{color:var(--gold)}
.guide .garr,.twork .garr{flex:none;color:var(--gold);font-size:15px}
.guide .ghub,.twork .ghub{margin-top:28px}
.guide .ghub a,.twork .ghub a{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);
}
.guide .ghub a:hover,.twork .ghub a:hover{text-decoration:underline}

/* ---- §10 · TABLET, 768–1099 -----------------------------------------------------------------------
 * One centred column at the same measure. The sticky rail is replaced by the collapsed list, which
 * is the same derivation rendered twice — never two lists that could disagree. */
@media(max-width:1099px){
  .guide .gwrap{grid-template-columns:minmax(0,1fr);justify-items:center;padding-block:40px 96px}
  .guide .gcol{width:100%;max-width:var(--gcol-w)}
  .guide .gtoc{display:none}
  .guide .gotp{display:block;width:100%;max-width:var(--gcol-w);margin-inline:auto;
    border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  /* B2 D2 (Brand's staging rejection, 5 Oct 2026). THE ERROR DOCUMENT'S ROW BLOCK JOINS THIS
   * SELECTOR LIST — it is not a second rule that says the same thing.
   *
   * THE DEFECT, MEASURED. Above 1100 the reading column is the FIRST TRACK of `.guide .gwrap`, so
   * it sits on the wrap's left edge; below 1100 that grid collapses and this rule re-creates the
   * column by capping the head's children and CENTRING them. The 404's rows were capped to the
   * same `--gcol-w` by the D105-block rule above but never centred, so from the moment the head
   * started centring the two columns parted: measured 5.6px apart at 768, 66px at 900, 128px at
   * 1024 and 165.5px at 1099. One cause, one number diverging, not a per-width defect.
   *
   * WHY IT IS 756px RATHER THAN 768px WHERE THIS BEGINS, AND WHY THAT DOES NOT MATTER HERE.
   * `--gutter` is `clamp(20px,5vw,44px)`, so the wrap's content box is `0.9 * vw` below 880px and
   * exceeds 680px whenever vw > ~756 — twelve pixels below the band Brand could see. Fixing the
   * CAUSE closes the whole band without anyone having to know where its edge is; a rule written
   * against `768` would have left a visible seam at 760.
   *
   * SHARED RULES ARE LIFTED, NOT COPIED. Centring the collapsed column is one fact about this
   * family, and the error document is aligning TO that column, so it belongs in this list. Written
   * twice, the day someone changes the collapsed column's measure the 404 keeps the old one and
   * nothing fails. It adds no declaration. */
  .guide .ghead>.wrap>*,.twork .ghead>.wrap>*,
  .guide .libqs>.wrap>*{max-width:var(--gcol-w);margin-inline:auto}
  .guide .ghead>.wrap,.twork .ghead>.wrap{padding-block:56px 48px}
  .guide .ghead h1,.twork .ghead h1{font-size:44px}
  .guide .gkeep>.wrap>*,.twork .gkeep>.wrap>*{max-width:var(--gcol-w);margin-inline:auto}
  .guide .gnexts,.twork .gnexts{grid-template-columns:minmax(0,1fr);gap:32px}
  .guide .galso ul,.twork .galso ul{grid-template-columns:1fr}
}

/* ---- §10 · PHONE, below 768 ------------------------------------------------------------------------
 * Full width inside the gutters. The figure canvas becomes a swipe surface and says so; everything
 * else simply narrows. */
@media(max-width:767px){
  .guide .ghead>.wrap,.twork .ghead>.wrap{padding-block:40px 36px}
  .guide .ghead h1,.twork .ghead h1{font-size:34px;line-height:1.1}
  .guide .gdek,.twork .gdek{font-size:18.5px}
  .guide .gmeta,.twork .gmeta{margin-top:20px}
  /* The reading time drops to its own line, indented under the name rather than under the portrait. */
  .guide .gby,.twork .gby{flex-wrap:wrap}
  .guide .gread{flex-basis:100%;margin-left:62px;margin-top:8px;padding-left:0;border-left:0}
  .guide .gwrap{padding-block:28px 72px}
  /* THE SAME LOW SPECIFICITY AS THE BASE PROSE RULE, for the same reason. Written as
     `.guide .gcol p` this scores (0,2,1) and outranks every component that names a class on a <p>
     inside the column — the principle's maxim published at 18px instead of 23px on every phone,
     and the takeaways at 18px instead of 16px, with the desktop sizes correct and only a browser
     able to say so. `tools/guide-check.mjs` found it on its first run. */
  .guide :where(.gcol) :where(p,li){font-size:18px}
  .guide .gtake li{font-size:16px}
  .guide .gtoc a,.guide .gotp a{font-size:16px}
  .guide .gsec>h2,.guide .gplan>h2,.guide .gbottom>h2{font-size:25px}
  .guide .gcol h3{font-size:20px}
  .guide .gtake{padding:22px 20px 8px}
  .guide .gmaxim{font-size:23px}
  .guide .gswipe{display:block}
  .guide .gfig{padding:16px}
  .guide .gkeep,.twork .gkeep{padding-block:72px}
  .guide .gkeep>.wrap>h2,.twork .gkeep>.wrap>h2{font-size:30px}
  .guide .gauthor{align-items:flex-start}
  .guide .gabout{margin-left:0;flex-basis:100%;margin-top:12px}
}

/* ---- §11 · FOCUS AND REDUCED MOTION -----------------------------------------------------------------
 * A visible gold focus ring on every interactive target in the family.
 *
 * THE REDUCED-MOTION BLOCK IS A FLOOR, NOT A FIX, and saying so matters. D108 declares no
 * transition, no animation, no keyframes and no scroll-behavior anywhere — a suite assertion holds
 * it to that (HQ ruling 3, 27 Sep 2026: D108 introduces no smooth-motion behaviour of its own) — so
 * there is nothing here for this block to switch off today. It exists to neutralise motion
 * INHERITED from the shared sheets on D108's own elements, and to catch a future edit that adds
 * some.
 *
 * WHAT IT CANNOT REACH is recorded rather than worked around. Both predate D108, both are shared
 * chrome under the one-year cache and the D96 token, and both are a separate global follow-up —
 * not something to reach out of this scope and change (HQ, 27 Sep 2026):
 *
 *   1. `html{scroll-behavior:smooth}` in global.css.
 *   2. `assets/main.js` intercepts EVERY same-page anchor click, calls `preventDefault()` and
 *      scrolls with `behavior:'smooth'`. Two consequences for a Standard Guide, both measured:
 *      the animation runs identically whether or not the reader asks for reduced motion; and
 *      because the default action is cancelled, choosing a contents entry never updates
 *      `location.hash`, so a reader cannot copy the address of the section they are reading.
 *      Deep links INTO a page still work — the browser handles `#id` on load — and the landing
 *      position is correct, because `scrollIntoView` honours the `scroll-margin-top` set above. */
.guide a:focus-visible,.guide summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* SCOPED TO WHAT D108 OWNS, not to everything inside the scope. `.guide *` also reaches the shared
   PRO band the composer appends, and the band would then behave one way on a guide and another on
   a Pillar for the same reader — a difference D108 has no business introducing. */
@media(prefers-reduced-motion:reduce){
  .guide .gart,.guide .gart *,.guide .gkeep,.guide .gkeep *,.twork .gkeep,.twork .gkeep *{
    transition:none !important;animation:none !important;
  }
}

/* ===============================================================================================
 * D109 · THE NICHE DISCIPLINE HUB, AS APPROVED (27 Sep 2026)
 * ===============================================================================================
 *
 * `/library/<niche>/<discipline>/`, scoped to `.dhub` on <main>. Every rule below names that scope
 * and the suite fails on one that does not. The rules this family SHARES with Home and the Library
 * root — the section padding, the eyebrow, the H2, the intro, the two-column head, the gold button
 * and caps link, and the "Where to begin" row — are not repeated here: `.dhub` was added to their
 * selector lists in the D104 block, so the three pages cannot drift apart by one being edited.
 *
 * SEVEN BANDS (§2.4): navy head, ivory Start here, sink curriculum, ivory decisions, sink tools,
 * navy ending, then the shared PRO band. Navy is where a reader chooses; the light bands between
 * are where a reader reads.
 *
 * ONE FRAMED OBJECT (§1.3-1). `.pub` is the only element in `.dhub` with a border, a fill and a
 * shadow. Tools, guides and related disciplines are ruled rows. This is asserted, not trusted.
 *
 * NO NEW TOKEN AND NO NEW TYPE SIZE. Every value below is already in use on D104, D105 or D108.
 * ----------------------------------------------------------------------------------------------- */

/* ---- 0 · what the unscoped V2 Library System block would otherwise do here --------------------
 * `.chip` is a shared class and D109 keeps it, because the chip vocabulary is the same object on
 * every page that shows one. What it does NOT keep is the 2018-vintage pill: a 108px minimum width
 * and a 3px radius were drawn for a card grid, and in a ruled row they read as a button. §2.2 sets
 * the chip's size and outline for this family and it is restated here at `.dhub`'s specificity.
 * `.dstage` rather than `.stage` for the same reason, one level up: `.stage` is live, unscoped and
 * still styling other pages, so D109's stage carries its own name (HQ ruling 2, 28 Sep 2026). */
.dhub .chip{font-family:var(--sans);font-size:11.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);background:none;border:1px solid var(--rule-2);
  border-radius:2px;padding:3px 7px;min-width:0;line-height:1.4}

/* ---- 1 · the head (§3) -----------------------------------------------------------------------
 * D104's hero one level down. The photograph runs from the horizontal midpoint to the right edge
 * under Home's fade, and the copy sits in a 640px column on flat navy. The 4px niche rule on top
 * is the placement the Visual Direction handoff reserved for hub heads — a border, which is the
 * one form the niche colour may take outside a swatch. */
.dhub .dhead,.nhub .dhead{position:relative;background:var(--navy);overflow:hidden;
  border-top:4px solid var(--niche);padding-block:0}
.dhub .dhead-photo,.nhub .dhead-photo{position:absolute;inset:0 0 0 50%}
.dhub .dhead-pic,.dhub .dhead-pic img,
.nhub .dhead-pic,.nhub .dhead-pic img{display:block;width:100%;height:100%;object-fit:cover}
.dhub .dhead-photo::after,.nhub .dhead-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(16,31,66,.88) 12%,rgba(16,31,66,.55) 28%,
    rgba(16,31,66,.15) 44%,rgba(16,31,66,0) 58%)}
.dhub .dhead .wrap,.nhub .dhead .wrap{position:relative}
.dhub .dhead-copy,.nhub .dhead-copy{max-width:640px;padding-block:104px 96px}
.dhub .dcrumb ol,.nhub .dcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 10px;margin:0;padding:0}
.dhub .dcrumb li+li::before,.nhub .dcrumb li+li::before{content:"/";margin-right:10px;color:rgba(255,255,255,.32)}
.dhub .dcrumb a,.nhub .dcrumb a{font-family:var(--sans);font-size:14px;color:var(--on-navy-2)}
.dhub .dcrumb a:hover,.nhub .dcrumb a:hover{color:var(--on-navy);text-decoration:underline;text-underline-offset:.16em}
.dhub .dident,.nhub .dident{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:40px 0 0;
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase}
.dhub .dident .niche,.nhub .dident .niche{display:inline-flex;align-items:center;color:var(--on-navy)}
.dhub .dident .nswatch,.nhub .dident .nswatch{width:9px;height:9px;margin-right:9px;background:var(--niche)}
.dhub .dident-div{width:1px;height:13px;background:rgba(255,255,255,.28)}
.dhub .dident-d{color:var(--gold)}
.dhub .dhead h1,.nhub .dhead h1{font-family:var(--serif);font-size:54px;font-weight:400;line-height:1.06;
  letter-spacing:-.02em;color:#fff;max-width:600px;margin:18px 0 0}
.dhub .dhead h1 .g,.nhub .dhead h1 .g{color:var(--gold)}
.dhub .dhead .dek,.nhub .dhead .dek{font-family:var(--sans);font-size:18px;font-weight:400;line-height:1.6;
  color:var(--on-navy-2);max-width:30em;margin:24px 0 0;letter-spacing:normal}
.dhub .dacts,.nhub .dacts{display:flex;flex-wrap:wrap;gap:22px 32px;align-items:center;margin:40px 0 0}

/* ---- 2 · Start here — THE one framed object (§4) ----------------------------------------------
 * Paper on ivory, a hairline border, a 2px gold top rule and a shadow just heavy enough to lift it
 * off the ground. Seven-to-five, so "What it covers" is a column and not a footnote. */
.dhub .start{background:var(--ivory)}
/* THE LEGACY `.pub` COMPONENT IS RESET HERE, NOT INHERITED (Brand C1/C2, 28 Sep 2026).
   `assets/global.css` owns `.pub`, `.pub::before` and `.pub-sub`, it is still served on these
   pages, and this family reuses those names — so every property the D109 rules do NOT declare is
   supplied by the legacy component. The frame's 5px radius and its 44px shadow were already
   overridden; the 3px gold gradient SPINE on `::before` was not, and it put a second accent on the
   one framed object in a family that has no left-spine grammar anywhere. It is switched off rather
   than restyled: D109 declares no spine, so the honest expression is that there is none. */
.dhub .pub{display:grid;grid-template-columns:7fr 5fr;gap:56px;background:var(--paper);
  border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:2px;
  box-shadow:0 1px 2px rgba(16,31,66,.04);padding:52px 56px 56px}
.dhub .pub::before{content:none}
.dhub .pub .h2{font-size:40px;margin-top:10px}
/* WEIGHT AND TRACKING ARE DECLARED, because the legacy `.pub-sub` sets 300 and -.012em in a
   display face. Setting family, size and colour and leaving those two behind is what made the
   subtitle read pale and thin against the D108 dek it is meant to match (Brand C2). §2.2 sets
   sans 400 at 18/1.6; all four properties are named so none of them can be inherited again. */
.dhub .pub-sub{font-family:var(--sans);font-size:18px;font-weight:400;letter-spacing:0;
  line-height:1.6;color:var(--ink-2);max-width:34em;margin:18px 0 0}
.dhub .pub-by{font-family:var(--sans);font-size:14.5px;color:var(--ink-3);margin:16px 0 0}
.dhub .pub-go{margin:28px 0 0}
.dhub .pcovers{border-left:1px solid var(--rule);padding-left:44px}
.dhub .pcovers-l{font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text);margin:0}
.dhub .pcovers ul{list-style:none;margin:18px 0 0;padding:0}
.dhub .pcovers li{position:relative;font-family:var(--sans);font-size:16px;line-height:1.55;
  color:var(--ink);padding:14px 0 14px 28px;border-top:1px solid var(--rule)}
.dhub .pcovers li:first-child{border-top:0;padding-top:0}
/* THE MARKER IS OFFSET FROM THE ITEM'S TOP EDGE, WHICH INCLUDES ITS PADDING (Brand C3).
   `top:.72em` centres the dash on the first line of an UNPADDED item; every item after the first
   carries 14px of top padding, so the same value put its dash half a line high, against the rule
   above it, and the four dashes did not line up with each other. The padding is added back. */
.dhub .pcovers li::before{content:"";position:absolute;left:0;top:calc(14px + .72em);width:12px;
  height:1.5px;background:var(--gold)}
.dhub .pcovers li:first-child::before{top:.72em}
/* `.dsupports`, NOT `.supports` — the third name in this family deliberately not the obvious one.
 * global.css owns `.supports` for the captured hubs' centred display-italic line and declares
 * weight 300, -.01em tracking, text-align:center and max-width:44ch. None of those are this
 * line, and every one of them would have been inherited: the Brand C2 defect exactly, on a
 * second class. Found by the collision reconciliation the moment a hub first emitted it. */
.dhub .dsupports{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;
  color:var(--ink-2);max-width:40em;margin:36px 0 0}

/* ---- 3 · the curriculum (§5) ------------------------------------------------------------------
 * The signature. Stages are an <ol> because the order is the content; the serif numerals are
 * presentation over that order and are the only serif numerals on the page. Five-to-seven: the
 * stage's own name and purpose on the left, its guides as ruled rows on the right. */
.dhub .curr{background:var(--sink)}
.dhub .curr .eb{color:#7d6013}
.dhub .dstages{list-style:none;margin:64px 0 0;padding:0;border-bottom:1px solid var(--rule-2)}
.dhub .dstage{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:44px 48px;
  border-top:1px solid var(--rule-2)}
.dhub .dstage-n{display:block;font-family:var(--serif);font-size:40px;font-weight:400;
  line-height:1;color:#7d6013;font-variant-numeric:lining-nums tabular-nums}
.dhub .dstage-k{display:block;font-family:var(--sans);font-size:12px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:#7d6013;margin-top:20px}
.dhub .dstage-h h3{font-family:var(--serif);font-size:28px;font-weight:450;line-height:1.2;
  color:var(--ink);margin:18px 0 0}
.dhub .dstage-k+h3{margin-top:10px}
.dhub .dstage-l{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:30em;margin:12px 0 0}
.dhub .glist,.dhub .tgrid{list-style:none;margin:0;padding:0}
.dhub .glist li+li,.dhub .tgrid li+li{border-top:1px solid var(--rule-2)}
.dhub .gr{display:grid;grid-template-columns:1fr auto;gap:0 28px;align-items:center;
  padding-block:18px}
.dhub .glist li:first-child .gr{padding-top:0}
.dhub .gr-n{display:block;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.25;
  color:var(--ink);margin-top:10px}
.dhub .gr-d{display:block;font-family:var(--sans);font-size:15.5px;line-height:1.55;
  color:var(--ink-2);max-width:40em;margin-top:8px}
/* THE "Pairs" LINE TAKES --ink-2, NOT --ink-3, AND THAT IS A MEASUREMENT. `.gr-p` renders only
 * inside the Tools band, the band is on `--sink`, and --ink-3 there is 4.23:1 against §11's
 * 4.5 floor. No new colour is coined for it: --ink-2 is the token one step darker, already
 * used by the row description above it, and the hierarchy between the two lines is carried by
 * the size step (15.5px against 13.5px) rather than by a ratio that fails. Invisible until a
 * hub first served a tool. */
.dhub .gr-p{display:block;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);
  margin-top:8px}
/* THE SINK-SAFE GOLD, BY MEASUREMENT. The guide row lives on `--sink`, and `--gold-text` there is
   4.40:1 — under §11's 4.5 floor, which `tools/hub-check.mjs` found on its first run and no build
   could have. §2.1 already names the remedy: `#7d6013` is the D105 sink-safe gold, declared for
   labels and numerals on exactly this ground, and it measures 5.1:1. The ending's arrows are on
   navy and keep `--gold`. */
.dhub .darr{font-family:var(--sans);font-size:22px;color:#7d6013;transition:transform .2s}
.dhub .gr:hover .gr-n{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.12em}
.dhub .gr:hover .darr{transform:translateX(4px)}

/* ---- 4 · decision guides (§6) -----------------------------------------------------------------
 * D104's row, shared rather than restated. Only the ground is D109's. */
.dhub .dec{background:var(--ivory)}

/* ---- 5 · templates & tools (§7) ---------------------------------------------------------------
 * Two columns of the same ruled row the curriculum uses. Rendered only when a served tool belongs
 * to the discipline; there is no empty state, so there is no rule for one. */
/* `.dtools`, NOT `.tools`, for the same reason and a louder failure: global.css declares
 * `.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}` for the captured card
 * grid, and this band is a <section>. It would have become a three-column grid containing one
 * wrap, with a gap nobody chose. */
.dhub .dtools{background:var(--sink)}
/* THE SINK-SAFE GOLD, for the third time in this family and the same reason each time. The
 * band eyebrow is `--gold` on `--sink`, which measures 4.40:1 against §11's 4.5 floor; §2.1
 * names #7d6013 as the sink-safe cut and D104 made this identical correction on Home. It
 * reached this band only when a hub first served a tool — the curriculum band carried the
 * fix from Release 1 and this one had nothing to measure. */
.dhub .dtools .eb{color:#7d6013}
.dhub .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:56px;
  border-top:1px solid var(--rule-2)}
.dhub .tgrid li{border-top:0}
.dhub .tgrid li+li{border-top:0}
.dhub .tgrid li .gr{border-bottom:1px solid var(--rule-2);padding-block:22px}

/* ---- 6 · the ending (§8) ----------------------------------------------------------------------
 * D105's discipline band: three equal columns on navy, divided by hairlines, each ending in one
 * quiet way in. Then the "<Discipline> in other libraries" line, which is navigation and not a
 * section — one line, served niches only, above a hairline. */
.dhub .dend{background:radial-gradient(1000px 520px at 88% -20%,rgba(72,116,200,.20),transparent 60%),
  linear-gradient(170deg,var(--navy),var(--navy-deep));background-color:var(--navy)}
.dhub .dend .eb{color:var(--gold)}
.dhub .dend .h2{color:#fff}
.dhub .dend .intro p{color:var(--on-navy-2);margin:0}
/* THE COLUMN GAP IS DECLARED RATHER THAN INHERITED. `global.css` styles a bare `.three` with
   `gap:clamp(22px,2.6vw,32px)`, and this block did not name `gap` at all — so the related band's
   column separation was a legacy value nobody had chosen. The value below is the one Brand
   reviewed and accepted on staging, pinned here so it is OWNED rather than inherited: this change
   moves no pixel. Whether the band should instead take the §8.1 divider-and-padding separation
   with no gap is a Brand question, reported rather than decided here. */
.dhub .three{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:72px 0 0;
  padding:0;gap:clamp(22px,2.6vw,32px)}
.dhub .three>li{padding:4px 32px 8px;border-left:1px solid var(--on-navy-line)}
.dhub .three>li:first-child{padding-left:0;border-left:0}
.dhub .three-n{display:block;font-family:var(--sans);font-size:15px;font-weight:650;
  color:var(--gold);font-variant-numeric:tabular-nums}
.dhub .three h3{font-family:var(--serif);font-size:22px;font-weight:450;line-height:1.25;
  color:#fff;margin:12px 0 0}
.dhub .three p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--on-navy-2);
  max-width:24em;margin:12px 0 0}
.dhub .three-go{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--on-navy-line)}
.dhub .three-go a{font-family:var(--sans);font-size:13.5px;color:var(--on-navy-2)}
.dhub .three-go .darr{font-size:15px;color:var(--gold);margin-left:8px}
.dhub .three-go a:hover{color:var(--on-navy);text-decoration:underline;text-underline-offset:.16em}
.dhub .dother,.nhub .dother{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:56px 0 0;
  padding-top:28px;border-top:1px solid var(--on-navy-line)}
.dhub .dother-l,.nhub .dother-l{font-family:var(--sans);font-size:15px;color:var(--on-navy-2)}
.dhub .dother a,.nhub .dother a{display:inline-flex;align-items:center;font-family:var(--sans);font-size:15px;
  font-weight:600;color:var(--on-navy)}
.dhub .dother .nswatch,.nhub .dother .nswatch{width:9px;height:9px;margin-right:9px;background:var(--niche)}
.dhub .dother .darr,.nhub .dother .darr{font-size:15px;color:var(--gold);margin-left:8px}
.dhub .dother a:hover,.nhub .dother a:hover{text-decoration:underline;text-underline-offset:.16em}

/* ---- 7 · tablet, below 1100 (§10) -------------------------------------------------------------
 * The head reorders: copy first, then the photograph as a band with a top fade from navy, which is
 * the Library's tablet rule. */
@media(max-width:1099px){
  .dhub .dhead-photo,.nhub .dhead-photo{position:static;height:340px}
  .dhub .dhead-photo::after,.nhub .dhead-photo::after{position:absolute;inset:auto 0 0 0;height:340px;
    background:linear-gradient(180deg,var(--navy) 0%,rgba(16,31,66,0) 38%)}
  .dhub .dhead .wrap,.nhub .dhead .wrap{order:-1}
  .dhub .dhead,.nhub .dhead{display:flex;flex-direction:column}
  .dhub .dhead-copy,.nhub .dhead-copy{max-width:none;padding-block:88px 56px}
  .dhub .pub{padding:44px 40px 48px;gap:40px}
}

/* ---- 8 · the 900px step (§10) -----------------------------------------------------------------
 * The two-column objects stack here rather than at the tablet boundary, for D104's reason: at
 * 900px a 5fr column is narrower than its own numeral and name need. */
@media(max-width:900px){
  .dhub .pub{grid-template-columns:1fr}
  .dhub .pcovers{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:28px}
  .dhub .dstage{grid-template-columns:1fr;gap:28px}
  .dhub .tgrid{grid-template-columns:1fr}
}

/* ---- 9 · phone, below 768 (§10) ---------------------------------------------------------------
 * 72px of section padding, from the shared rule. Only the objects that would otherwise overflow
 * their measure are restated. */
@media(max-width:767px){
  .dhub .dhead-photo,.dhub .dhead-photo::after,
  .nhub .dhead-photo,.nhub .dhead-photo::after{height:220px}
  .dhub .dhead-copy,.nhub .dhead-copy{padding-block:48px 40px}
  .dhub .dhead h1,.nhub .dhead h1{font-size:40px}
  .dhub .dhead .dek,.nhub .dhead .dek{font-size:17px}
  .dhub .dacts,.nhub .dacts{flex-direction:column;align-items:stretch}
  .dhub .pub{padding:32px 22px 36px}
  .dhub .pub .h2{font-size:30px}
  .dhub .pub-sub,.dhub .dsupports{font-size:17px}
  .dhub .dsupports{font-size:18px}
  .dhub .dstages{margin-top:44px}
  .dhub .dstage{padding:32px 0 36px}
  .dhub .dstage-n{font-size:32px}
  .dhub .dstage-h h3{font-size:24px}
  .dhub .gr-n{font-size:19px}
  .dhub .three{grid-template-columns:1fr;margin-top:44px}
  .dhub .three>li{padding:20px 0;border-left:0;border-top:1px solid var(--on-navy-line)}
  .dhub .three>li:first-child{border-top:0;padding-top:0}
  /* TAP TARGETS, BY MEASUREMENT (§11: 44px on a phone). §10 gives the head's caps link 12px of
     vertical padding and §8.2 gives the other-libraries links 8px; measured, those land at 21px
     and 36px, under the floor §11 sets for every one of them. The links become inline blocks with
     enough padding to reach 44 — the same correction, for the same reason, that D104 made to the
     rows on Home. Nothing moves at desktop, where these are pointer targets. */
  .dhub .dacts .link-gold,.dhub .three-go a,.dhub .dother a,.dhub .dcrumb a,
  .nhub .dacts .link-gold,.nhub .dother a,.nhub .dcrumb a{
    display:inline-block;padding-block:12px}
  .dhub .dacts,.nhub .dacts{gap:8px}
  .dhub .three-go{padding-top:6px}
  .dhub .dother,.nhub .dother{flex-direction:column;align-items:flex-start;gap:0}
}

/* ---- 10 · focus and motion (§11) --------------------------------------------------------------
 * The focus ring is the system's. The only motion in the family is the 4px arrow nudge, and
 * reduced motion removes it — there is no entrance animation and no smooth scrolling here. */
.dhub a:focus-visible,.nhub a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ---- the identity row stacks below 480px (Brand C2, 29 Sep 2026) --------------------------
 * IT ALREADY WRAPPED, AND THAT WAS THE DEFECT. `flex-wrap` put the discipline on a second
 * line while the divider stayed at the end of the first, so the row ended on a hairline
 * pointing at nothing. A divider separates two things side by side; once they are stacked it
 * is not a quieter separator, it is a mark with no job.
 *
 * STACKED EXPLICITLY RATHER THAN LEFT TO WRAP, so the break is the same on every hub in both
 * niches whatever the discipline is called — `Bookkeeping & Reporting` wrapped and
 * `Tax Strategy` did not, which is how one family came to have two identity rows.
 *
 * 479.98px, not 479px: a fractional viewport between the two would fall through both rules. */
@media(max-width:479.98px){
  .dhub .dident,.nhub .dident{flex-direction:column;align-items:flex-start;gap:7px}
  .dhub .dident-div{display:none}
}

@media(prefers-reduced-motion:reduce){
  .dhub .darr{transition:none}
  .dhub .gr:hover .darr{transform:none}
}

/* ===============================================================================================
 * D110 · THE NICHE HUB, AS APPROVED (27 Sep 2026)
 * ===============================================================================================
 *
 * `/library/<niche>/`, scoped to `.nhub` on <main>. Every rule below names that scope and the suite
 * fails on one that does not. The rules this family SHARES — the section padding, the eyebrow, the
 * H2, the intro, the two-column head, the gold button and caps link, D105's question grid, and the
 * whole of D109's head — are not repeated here: `.nhub` was added to their selector lists where
 * they already live, so the families cannot drift apart by one being edited (§12.1).
 *
 * THREE BANDS AND THE SHARED ONE (§2.4): navy head, ivory contents index, sink "Where to begin"
 * with the quiet Other-libraries line at its foot, then the shared PRO band. There is deliberately
 * NO NAVY BAND MID-PAGE — the Library root owns "six disciplines on navy", and D110's choosing
 * device is a contents page rather than a second navy wall.
 *
 * NO FRAMED OBJECT (§1.3-1). D109 has exactly one, because that page has a single right answer to
 * "what do I read first". This page offers six equal starting points, so framing one would be a
 * claim it does not make: nothing here combines a border with a fill and a shadow, and nothing
 * rounds a corner past 2px. Asserted, not trusted.
 *
 * NO NEW TOKEN AND NO NEW TYPE SIZE. Every value below is already in use on D104, D105 or D109.
 *
 * ONE NEW COMPONENT, and it is the contents index. Everything else on the page is a band this
 * system already had.
 * ----------------------------------------------------------------------------------------------- */

/* ---- 0 · the head, and the one thing it adds to D109's ----------------------------------------
 * A HYPHENATED COMPOUND IN THE GOLD PHRASE IS HELD TOGETHER (§3). Both niches open their phrase on
 * one — "short-term rental owners" — and a break at that hyphen splits the name of the reader the
 * page addresses across two lines, in gold, at 54px. The renderer wraps the compound and this is
 * the one declaration that does the work; it is a class rather than an inline style so the rule
 * lives in the sheet, where the scope walk and the collision census can both see it. */
.nhub .nb{white-space:nowrap}

/* ---- 1 · the contents index (§4) --------------------------------------------------------------
 * THE ONE NEW COMPONENT. An <ol>, because the order is the library order; five-to-seven, so the
 * discipline and its promise sit against the two ways in rather than above them. Ruled rows and
 * nothing else: no card, no fill, no shadow. */
.nhub .idx{background:var(--ivory)}
.nhub .nrows{list-style:none;margin:64px 0 0;padding:0;border-bottom:1px solid var(--rule-2)}
.nhub .nrow{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:40px 44px;
  border-top:1px solid var(--rule-2)}
/* THE NUMERAL IS THE DISCIPLINE'S LIBRARY POSITION, never the row's index, so "05" is Tax Strategy
   on every page in every niche even where a niche serves fewer than six. Lining tabular figures so
   the column aligns; `aria-hidden` in the markup, because the order is already the list's. */
.nhub .nrow-n{display:block;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1;
  color:var(--gold-text);font-variant-numeric:lining-nums tabular-nums}
.nhub .nrow-d h3{font-family:var(--serif);font-size:28px;font-weight:450;line-height:1.2;
  color:var(--ink);margin:18px 0 0}
/* THE PROMISE IS THE SHARED FIELD (D110-4) — the same sentence D109's head carries as its H1. */
.nhub .nrow-p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:30em;margin:12px 0 0}

/* ---- 2 · the two paths, and why neither of them is a card (§4.2) ------------------------------
 * THE DOMAIN GUIDE LEADS AND THE HUB PATH STAYS. The emphasis rule is explicit in the
 * specification and it cuts both ways: "Start with" carries a serif title and a larger arrow, and
 * the hub path must stay FULLY VISIBLE, FULL-WIDTH AND A REAL LINK AT EVERY WIDTH — never hidden
 * behind hover, never collapsed on a phone, never below 13px and never in `--ink-3`. Both are
 * measured rendered at four widths rather than asserted from the markup. */
.nhub .sw{display:grid;grid-template-columns:1fr auto;gap:0 28px;align-items:center}
.nhub .sw-l{display:block;font-family:var(--sans);font-size:12px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.nhub .sw-n{display:block;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.25;
  color:var(--ink);margin-top:10px}
.nhub .sw-m{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-3);
  margin-top:8px}
.nhub .sw .darr{font-family:var(--sans);font-size:22px;color:var(--gold-text);
  transition:transform .2s}
.nhub .sw:hover .sw-n{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.12em}
.nhub .sw:hover .darr{transform:translateX(4px)}
/* THE HUB PATH IS A ROW, NOT A FOOTNOTE. Its own hairline above it, the full width of the column,
   and a tap target the phone rules keep at 44px or more. */
.nhub .hub{display:flex;align-items:center;justify-content:space-between;gap:0 20px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-2)}
.nhub .hub-l{font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-text)}
.nhub .hub .darr{font-family:var(--sans);font-size:18px;color:var(--gold-text);
  transition:transform .2s}
.nhub .hub:hover .hub-l{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.12em}
.nhub .hub:hover .darr{transform:translateX(4px)}

/* ---- 3 · Where to begin, on sink (§5) ---------------------------------------------------------
 * The grid itself is D105's, shared above under its `lib` names. Only the GROUND is D110's, and
 * the ground is what forces the two colour corrections below.
 *
 * THE SINK-SAFE GOLD, BY MEASUREMENT (§9). `--gold-text` on `--sink` is 4.40:1, under the 4.5
 * floor; `#7d6013` is the D105 sink-safe gold declared for labels on exactly this ground and it
 * measures 5.14:1. D104's Home band and D109's curriculum and Tools bands each took this same
 * correction on the same ground — it is a property of the pairing, not of the page. */
.nhub .begin{background:var(--sink)}
.nhub .begin .eb{color:#7d6013}
.nhub .begin .libq .meta{color:#7d6013}
.nhub .begin .libq .arr{color:#7d6013}
/* ---- 4 · "Other libraries", D109's line on a light ground (§5.1) ------------------------------
 * THE STRUCTURE IS SHARED and only the colours are this page's: D109 sets this line on navy, where
 * the label is `--on-navy-2`, the name `--on-navy` and the rule `--on-navy-line`. On sink each of
 * those is invisible or illegible, so the light-ground variant names the three tokens the same
 * system already uses there. Not a heading, not a landmark, not a band — a <p> of links. */
.nhub .dother{border-top-color:var(--rule-2)}
.nhub .dother-l{color:var(--ink-2)}
.nhub .dother a{color:var(--ink)}
.nhub .dother .darr{color:#7d6013}

/* ---- 5 · the 900px step (§4.3) ----------------------------------------------------------------
 * One column, with the discipline above its two paths. 26px rather than the 64px grid gap: stacked,
 * the two halves of a row are one object and the desktop gutter would read as a break between two. */
@media(max-width:899.98px){
  .nhub .nrow{grid-template-columns:1fr;gap:26px}
}

/* ---- 6 · phone, below 768 (§4.3, §8) ----------------------------------------------------------
 * The row loosens rather than reflows: the grid is already one column from 900. What changes is the
 * type scale and the hub path's tap target, which takes 14px of vertical padding to clear 44px. */
@media(max-width:767.98px){
  .nhub .nrows{margin-top:40px}
  .nhub .nrow{padding:30px 34px}
  .nhub .nrow-n{font-size:32px}
  .nhub .nrow-d h3{font-size:24px}
  .nhub .sw-n{font-size:19px}
  .nhub .hub{padding-block:14px}
  .nhub .dother{flex-direction:column;align-items:flex-start;gap:0}
  /* NO LINK PADDING IS DECLARED HERE, AND THAT IS THE CORRECTION. §5.1 describes 8px of link
     padding on a phone; 8px above and below a 24px line is a 40px tap target, and §9's floor is
     44px. The two clauses of the specification disagree, and the accessibility floor is the one
     that governs — so this family takes the 12px the D109 phone rule already declares for exactly
     these links, shared rather than restated. Measured at 40px by tools/niche-check.mjs on its
     first run, which is the only surface that could have seen it. */
}

/* ---- 7 · motion, only where it is an affordance -----------------------------------------------
 * The only motion in the family is the 4px arrow nudge on the two paths. There is no entrance
 * animation and no smooth scrolling here, so reduced motion has exactly these to remove. */
@media(prefers-reduced-motion:reduce){
  .nhub .sw .darr,.nhub .hub .darr{transition:none}
  .nhub .sw:hover .darr,.nhub .hub:hover .darr{transform:none}
}



/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * D111 · THE TOOL PAGE, AS APPROVED (27 Sep 2026; class ruled 30 Sep 2026)
 *
 * The worksheet for the two served STR Deal Analysis calculators. D104 is the cover of this
 * publication, D105 its contents, D110 the front of one edition, D109 the front of one section and
 * D108 its articles. This is the one page a reader WORKS rather than reads.
 *
 * THE SCOPE IS `.twork`, NOT `.tool`. §13 and §17.1 of the frozen specification say `.tool`;
 * `global.css:231-234` already owns that name with ten declarations — a bordered, 24px-padded,
 * `cursor:pointer` flex-column card with a hover lift, plus unscoped `.tool h3{font-size:1.15rem}`
 * and `.tool p{flex:1}`. `global.css` has no scoping root, so all of it would have applied to the
 * page. HQ ruled `.twork` on 30 Sep 2026 and the specification is amended to record it.
 *
 * THE LEGACY SHEET LEAKS INTO THIS FAMILY IN FIVE PLACES, and each is neutralised at the root
 * rather than fought per element. They are unscoped element rules, so nothing about naming avoids
 * them:
 *     global.css:14   section{padding:var(--pad) 0;position:relative}
 *     global.css:120  form{display:flex;flex-wrap:wrap;justify-content:center;margin-top:34px}
 *     global.css:121  input{...;min-width:min(330px,100%);padding:15px 19px;font-size:1rem}
 *     global.css:122  input:focus{outline:none}
 *     global.css:9    *{box-sizing:border-box;margin:0;padding:0}
 *
 * THE `section` ONE WAS FOUND BY THE PRINT MEASUREMENT AND BY NOTHING ELSE. D104, D105, D109 and
 * D110 all put their bands in full-width `<section>`s and WANT that padding, so the D104 block
 * overrides it with a larger value and no family has ever had to turn it off. D111's bands are
 * sub-sections inside a 760px reading column, and `--pad` was adding about 278px to each of them —
 * on screen as well as on paper. The working paper measured 1122px against a 950px budget, and
 * that is the only reason anyone looked.
 * `input{min-width:min(330px,100%)}` is the one that decides whether this page exists at 390px:
 * the legacy calculator needed `.calc .inputs input{min-width:0}` to escape it and this family
 * needs the same escape, written once, at the root.
 *
 * `select`, `textarea`, `fieldset`, `legend` and `output` have ZERO declarations in either sheet,
 * bare or scoped. D111 styles them first, including the focus ring `v2.css`'s `:focus-visible` rule
 * does not reach.
 *
 * SHARED RULES ARE LIFTED, NOT COPIED. `.twork` joins the D104 selector lists for `section`
 * padding, `.h2`, `.btn-gold` and the PRO band; the head is D108's `.ghead`, which now names this
 * scope too. What is below is only what this family adds.
 *
 * THE PRINT BLOCK AT THE FOOT IS THE FIRST IN THIS CODEBASE. There is no `@media print` and no
 * `@page` rule anywhere else in either stylesheet, so every navy band prints white-on-white by
 * default and no family has a paper precedent. §6.2 is therefore written from nothing rather than
 * adapted, and `tools/tool-check.mjs` measures it in a real browser under
 * `emulateMedia({media:'print'})`, because nothing in `npm test` can see a print layout.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.twork{background:var(--ivory)}
.twork .twrap{max-width:1180px;margin:0 auto;padding:0 32px 8px}

/* THE FOUR LEGACY LEAKS, CLOSED AT THE ROOT. Written as element selectors under the scope because
   that is what they are overriding; naming D111's own classes here would leave the leak live for
   any element the family adds later. */
.twork section{padding:0}
.twork form{display:block;flex-wrap:initial;justify-content:initial;margin-top:0}
.twork input,.twork textarea{min-width:0;padding:0;font-size:inherit;font-family:inherit;
  color:inherit;background:transparent;border:0;border-radius:0}
.twork fieldset{border:0;margin:0;padding:0;min-width:0}
.twork legend{padding:0}

/* ---- the lead (§4.1) -------------------------------------------------------------------------- */
.twork .tlead{font-family:var(--serif);font-size:1.1875rem;line-height:1.62;color:var(--ink);
  max-width:680px;margin:34px 0 26px}

/* ---- the worksheet: the page's ONE framed object (§1.3-4, §4.1) -------------------------------- */
.twork .tsheet{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);
  border-radius:0;box-shadow:0 1px 2px rgba(16,31,66,.04);padding:0 48px 48px;margin:0 0 20px}

/* The state line describes the INPUTS (§4.2). It is not a result state and never says "results". */
.twork .tstate{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:20px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.twork .tchip{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);padding:3px 9px;
  white-space:nowrap}
.twork .tstate[data-input-state="user"] .tchip{color:var(--ink);border-color:var(--ink)}
.twork .tstate-t{font-family:var(--sans);font-size:.875rem;color:var(--ink-3);line-height:1.5}
.twork .tstate-t a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* Two columns at 1100px (inputs 5fr, results 7fr, gap 56), one below it (§4.3). */
.twork .tgrid{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:1100px){.twork .tgrid{grid-template-columns:5fr 7fr;gap:56px;align-items:start}}

.twork .tset{margin:0 0 26px}
.twork .tlegend{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 14px}

/* A FIELD IS RULED, NOT BOXED (§4.3): a 1px underline that thickens to 2px gold on focus. */
.twork .tfield{margin:0 0 20px}
.twork .tlabel{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:600;
  color:var(--ink);margin:0 0 5px}
.twork .tinput{display:flex;align-items:baseline;gap:7px;
  border-bottom:1px solid var(--rule-2);padding:6px 0}
.twork .tinput:focus-within{border-bottom:2px solid var(--gold);padding-bottom:5px}
.twork .tfix{font-family:var(--sans);font-size:.8125rem;color:var(--ink-3);flex:none}
.twork .tinput input{flex:1 1 auto;width:100%;font-family:var(--sans);font-size:1.25rem;
  font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
/* `v2.css:447` restores a visible ring for `a, button, input` only, and the ring is drawn on the
   INPUT there. Here the rule above moves the affordance to the container, so the input's own
   outline is removed and the container carries it — which keeps the 44px target intact. */
.twork .tinput input:focus,.twork .tinput input:focus-visible{outline:none}
.twork .tdef{font-family:var(--sans);font-size:.84375rem;line-height:1.5;color:var(--ink-3);
  margin:6px 0 0}
.twork .terr{font-family:var(--sans);font-size:.84375rem;line-height:1.5;color:var(--note-text);
  margin:5px 0 0;font-weight:600}
.twork .tfield-bad .tinput{border-bottom-color:var(--note-text)}

/* The no-JS line stands where the script inserts the Run control. It is never both. */
.twork .tnojs{font-family:var(--sans);font-size:.875rem;line-height:1.55;color:var(--ink-3);
  border-left:2px solid var(--rule-2);padding-left:12px;margin:4px 0 0}
.twork .trun{margin-top:6px}
@media(max-width:699px){.twork .trun{display:block;width:100%}}

/* ---- results (§4.5) ---------------------------------------------------------------------------- */
.twork .tres{min-width:0}
@media(min-width:1100px){
  /* STICKY, BOUNDED, AND NEVER UNDER THE 72px HEADER (§4.8, D111-7). `top:96px` clears it. The
     column is bounded by the sheet's own grid — it is not an internal scroll pane and never gets
     `overflow:auto` or a fixed height, so the results stop at the foot of the sheet rather than
     following the reader into Method, Keep going, PRO or the footer. */
  .twork .tres{position:sticky;top:96px}
}
@media(min-width:1100px) and (max-height:819px){.twork .tres{position:static}}
@media(max-width:1099px){
  .twork .tres{border-top:1px solid var(--rule-2);padding-top:28px}
}

.twork .tres-h{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.twork .tres-h:focus{outline:none}
.twork .tres-h:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* STALE IS NOT CARRIED BY OPACITY ALONE (§5.1). The heading text changes, the note appears, and the
   retention actions are removed; the dimming is the third signal, not the only one. */
.twork .tres[data-state="stale"] .tres-body,
.twork .tres[data-state="stale"] .tverdict{opacity:.42}
.twork .tstale{font-family:var(--sans);font-size:.9375rem;line-height:1.5;color:var(--ink);
  background:var(--sink);border-left:2px solid var(--ink);padding:10px 14px;margin:0 0 18px}

.twork .tkick{font-family:var(--sans);font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.twork .tkick b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums lining-nums}

/* The D108 table: heavy header rule, hairline rows, tabular lining figures, right-aligned values.
   The Expected column is marked by its label and by nothing else — no tint, no fill (§4.5). */
.twork .ttablewrap{min-width:0}
.twork .ttable{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.875rem}
.twork .ttable th,.twork .ttable td{padding:9px 0;vertical-align:baseline}
.twork .ttable thead th{font-size:.6875rem;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid var(--ink);padding-bottom:8px}
.twork .ttable tbody th{text-align:left;font-weight:600;color:var(--ink);padding-right:12px}
.twork .ttable tbody tr{border-bottom:1px solid var(--rule)}
.twork .ttable .tnum{text-align:right;font-variant-numeric:tabular-nums lining-nums;
  padding-left:10px;white-space:nowrap}
.twork .ttable tbody th+.tnum{padding-left:14px}
/* The key row: the D108 total rule, weight 650. It is the row the verdict is about. */
.twork .tkeyrow{border-top:2px solid var(--ink)}
.twork .tkeyrow th,.twork .tkeyrow td{font-weight:650;padding-top:12px}
/* NEGATIVES CARRY A MINUS SIGN AND `--note-text`; COLOUR IS NEVER THE ONLY SIGNAL, AND THERE IS NO
   GREEN ANYWHERE IN THIS FAMILY (D111-6). A positive value is `--ink`, exactly as a label is. */
.twork .tneg{color:var(--note-text)}
/* The result-term definition, tied to its row header. It is present for every term shown (D111-9)
   and it is not a tooltip: family rule 5 forbids putting method behind a hover. */

/* The D108 worked-calculation ledger (§4.5, shape B). */
.twork .tled-h{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.twork .tled-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.twork .tled-lb{font-family:var(--sans);font-size:.9375rem;color:var(--ink)}
.twork .tled-v{font-family:var(--serif);font-size:2rem;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums}
.twork .tled-none{color:var(--ink-3)}
.twork .tled-thr{border-top:2px solid var(--ink);border-bottom:0;margin-top:2px}
.twork .tled-thr .tled-v{font-size:1.375rem}
.twork .tled-cush{font-family:var(--sans);font-size:.9375rem;color:var(--ink);margin:14px 0 0}
.twork .tled-cush b{font-variant-numeric:tabular-nums lining-nums}

/* The verdict: one serif sentence, its live region announced after a run (§4.6). */
.twork .tverdict{font-family:var(--serif);font-size:1.1875rem;line-height:1.6;color:var(--ink);
  margin:24px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.twork .tnote{font-family:var(--sans);font-size:.9375rem;line-height:1.55;color:var(--ink);
  background:var(--sink);border-left:2px solid var(--rule-2);padding:10px 14px;margin:16px 0 0}
.twork .tshared{font-family:var(--sans);font-size:.84375rem;line-height:1.5;color:var(--ink-3);
  margin:14px 0 0}
.twork .tlimit{font-family:var(--sans);font-style:italic;font-size:.875rem;line-height:1.5;
  color:var(--ink-3);margin:12px 0 0}

/* Retention (§6.1): text buttons, visually subordinate to Run — no fill, no outline. They exist in
   `user-current` and nowhere else, which the script enforces by not creating them. */
.twork .tkeepbar{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.twork .tlink{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--sans);
  font-size:.8125rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-text)}
.twork .tlink:hover{text-decoration:underline;text-underline-offset:3px}
.twork .tcopied{font-family:var(--sans);font-size:.8125rem;color:var(--ink-3)}
.twork .tfallback{display:block;width:100%;margin-top:10px;padding:10px;font-family:var(--mono);
  font-size:.75rem;line-height:1.5;color:var(--ink);background:var(--sink);
  border:1px solid var(--rule-2);min-height:9em}
.twork .tfallback:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Visually hidden, for the table caption. */
.twork .tvh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- pairing, assumptions, method, privacy, keep going ---------------------------------------- */
.twork .tpair{font-family:var(--sans);font-size:.9375rem;color:var(--ink);margin:0 0 40px}
.twork .tpair-l{font-size:.6875rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-right:12px}
.twork .tpair a{font-family:var(--serif);font-size:1.1875rem;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.twork .tarr{font-family:var(--sans);margin-left:8px;color:var(--gold-text)}

.twork .th2{font-family:var(--serif);font-size:1.625rem;font-weight:450;line-height:1.2;
  color:var(--ink);margin:0}
@media(max-width:699px){.twork .th2{font-size:1.375rem}}
.twork .tassume,.twork .tmethod{max-width:760px;margin:0 0 44px}
.twork .tassume-l{list-style:none;margin:18px 0 0;padding:0}
.twork .tassume-l li{font-family:var(--sans);font-size:.9375rem;line-height:1.62;color:var(--ink);
  padding:11px 0;border-bottom:1px solid var(--rule)}
.twork .tassume-l li b{font-weight:650}
.twork .tmethod-p{font-family:var(--serif);font-size:1.0625rem;line-height:1.66;color:var(--ink);
  margin:18px 0 0}
.twork .tmethod-p b{font-family:var(--sans);font-size:.9375rem;font-weight:650}
.twork .tmeth-box{background:var(--sink);border-left:2px solid var(--gold);padding:20px 24px;
  margin:26px 0 0}
.twork .tmeth-h{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 12px}
.twork .tmeth-l{list-style:none;margin:0;padding:0}
.twork .tmeth-l li{font-family:var(--sans);font-size:.9375rem;line-height:1.58;color:var(--ink);
  padding:5px 0}
.twork .troute{font-family:var(--sans);font-size:.9375rem;line-height:1.62;color:var(--ink-3);
  margin:26px 0 0}
.twork .troute a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:3px}

.twork .tpriv{max-width:760px;margin:0 0 44px;border-top:1px solid var(--rule);padding-top:22px}
.twork .tpriv-h{font-family:var(--sans);font-size:.6875rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.twork .tpriv p{font-family:var(--sans);font-size:.9375rem;line-height:1.62;color:var(--ink-3)}

/* THE RESULT-TERM DEFINITIONS, in "What the results mean" where §7 puts them (C3). A ruled list of
   run-in heads — the same form `.tassume-l` already uses two bands above, so the page gains no new
   shape. They were inside the results table and the ledger, where eight of them ran the table to
   about 1,800px at 390. */
.twork .tdefs{margin:0 0 26px;padding:0}
/* SCOPED TO THE LIST, NOT TO THE CLASS (Brand N2, 1 Oct 2026). `.tdef` was already the input
   definition - `<p class="tdef">` under each field, styled at line 2761 - and C3's results
   definition list reused the name for its `<div class="tdef">` rows. Written as `.twork .tdef`
   this rule reached both, putting a hairline and 13px of padding under every input on the
   worksheet. The rows live inside `<dl class="tdefs">` and nothing else does, so that container
   is the scope; the class is not renamed, because `aria-describedby` ties the reference to the
   definition through `defnId()` and the id rather than the class. */
.twork .tdefs .tdef{border-top:1px solid var(--rule);padding:13px 0}
.twork .tdefs .tdef dt{font-family:var(--sans);font-size:.875rem;font-weight:650;color:var(--ink)}
.twork .tdefs .tdef dd{margin:4px 0 0;font-family:var(--sans);font-size:.9375rem;line-height:1.6;
  color:var(--ink-3)}

/* KEEP GOING HAS NO RULES OF ITS OWN ANY MORE (C2). `.tkeep`, `.tkeep-l`, `.tkeep-k`, `.tkeep-t`
   and `.tkeep-w` declared an ivory list inside the reading column — every word right, the shape
   wrong, and the page never returned to navy. The band is D108's `.gkeep` now, and `.twork` was
   added to those selector lists above rather than copied down here, which is why this space is
   empty instead of holding a second definition of the same component. */

/* The working-paper head is print-only. It is in the markup rather than injected, so a reader who
   prints from the browser's own menu gets it too (§6.2). */
.twork .tpaper{display:none}

/* ---- widths ------------------------------------------------------------------------------------ */
@media(max-width:1023px){
  .twork .twrap{padding:0 24px 8px}
  .twork .tsheet{padding:0 36px 40px}
}
@media(max-width:699px){
  .twork .twrap{padding:0 16px 8px}
  .twork .tsheet{padding:0 18px 28px}
  .twork .tled-v{font-size:1.75rem}
  /* THE TABLE FITS AT 390px WITHOUT HORIZONTAL SCROLL (§11). The row header takes the width it
     needs and the three case columns are equal; the definition under each row header is what
     would otherwise force the overflow, so it is the thing that wraps. `overflow-x:auto` is NOT a
     fallback here — `tools/tool-check.mjs` fails a run where the table needs one. */
  /* THE COLUMN HEADS WRAP AT 390px AND THE FIGURES DO NOT. "Conservative" is 86px of Source Sans
     at 13px and the column is 80px, so a nowrap head overflows its cell — measured, not estimated
     (D29). A head on two lines is ordinary; a figure broken mid-number is not, which is why the
     `nowrap` stays on the cells. */
  .twork .ttable thead .tnum{white-space:normal;hyphens:auto}
  .twork .ttable{font-size:.8125rem;table-layout:fixed}
  .twork .ttable tbody th{width:38%;padding-right:6px;hyphens:auto}
  .twork .ttable .tnum{padding-left:4px}
  .twork .tled-row{gap:10px}
}

/* ══ THE PRINT SHEET (§6.2) — the first @media print in this codebase ═══════════════════════════
 *
 * WHAT IT KEEPS: the paper head, the inputs used, the results, the verdict, the first method
 * section, the limitation. WHAT IT SUPPRESSES: the shared header, the D108 head, the lead, the
 * state line, every control, the pairing line, the remaining method, the assumptions, privacy,
 * Keep going, the PRO band and the footer.
 *
 * NEGATIVES PRINT IN BLACK WITH THE MINUS SIGN — a red that reads as emphasis on screen reads as a
 * printer fault on paper, and D111-6's rule is that the sign is always present. LINKS PRINT AS
 * PLAIN TEXT, since a printed underline suggests something the paper cannot do. */
@media print{
  @page{margin:14mm 16mm}
  html,.twork-page{background:#fff}
  /* SCOPED TO THE TOOL PAGE'S BODY, not written bare. The shared header, the footer and the PRO
     band sit outside `<main class="twork">`, so the family root cannot reach them — and a bare
     `header{display:none}` here would blank the header of every page in the corpus when a reader
     printed one. `.twork-page` is set on <body> by the renderer for exactly this. */
  .twork-page header,.twork-page nav,.twork-page footer,.twork-page .s6,.twork-page .ghead,
  .twork-page .tlead,.twork-page .tstate,.twork-page .trun,.twork-page .tnojs,
  .twork-page .tkeepbar,.twork-page .tpair,.twork-page .tassume,.twork-page .tpriv,
  .twork-page .gkeep,.twork-page .tfallback{display:none!important}
  /* A FOCUSED FIELD PRINTED ITS FOCUS BOX (C6). The ring is correct on screen and meaningless on
     paper, where nothing has focus. Suppressed in print ONLY — weakening it on screen would trade
     a paper artefact for a keyboard reader's ability to see where they are. */
  .twork :focus-visible,.twork :focus{outline:0!important;box-shadow:none!important}
  .twork .twrap{max-width:none;padding:0}
  .twork .tsheet{border:0;box-shadow:none;padding:0}
  .twork .tgrid{display:block}
  .twork{background:#fff;color:#000;font-size:10pt}

  .twork .tpaper{display:block;border-bottom:2px solid var(--gold);padding-bottom:8pt;
    margin-bottom:14pt}
  .twork .tpaper-m{display:block;height:18pt;width:auto;margin-bottom:8pt}
  .twork .tpaper-k{font-family:var(--sans);font-size:7.5pt;font-weight:650;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gold-text)}
  .twork .tpaper-n{font-family:var(--serif);font-size:17pt;line-height:1.2;margin-top:3pt}
  .twork .tpaper-u{font-family:var(--sans);font-size:7.5pt;color:#444;margin-top:4pt}

  /* The inputs used: label / value pairs in three columns, with no definitions and no errors. */
  .twork .tinputs{columns:3;column-gap:16pt;margin-bottom:14pt;
    break-inside:avoid;page-break-inside:avoid}
  .twork .tset{break-inside:avoid;page-break-inside:avoid;margin-bottom:8pt}
  .twork .tdef,.twork .terr{display:none!important}
  .twork .tfield{margin-bottom:5pt}
  .twork .tlabel{font-size:7.5pt;color:#444;margin:0}
  .twork .tinput{border:0;padding:0}
  .twork .tinput input{font-size:10pt;font-weight:600}

  .twork .tres{position:static;border:0;padding:0}
  .twork .tres[data-state="stale"] .tres-body,
  .twork .tres[data-state="stale"] .tverdict{opacity:1}
  /* The calculated line prints in the PAPER HEAD now (C6), under the tool name, written in the
     reader's own locale by the client. `.tcalc` at the foot, carrying an ISO string, is gone. */
  .twork .tpaper-c{font-family:var(--sans);font-size:7.5pt;color:#444;margin-top:3pt}
  .twork .tpaper-c:empty{display:none}
  .twork .ttable,.twork .tled{break-inside:avoid;page-break-inside:avoid}
  .twork .ttable{font-size:9pt}
  /* `.tdefn` is retired with C3 — the definitions are not in the results to be hidden. The band
     that now holds them is suppressed on paper as a whole, below. */
  .twork .tdefs{display:none}
  .twork .tneg{color:#000}
  .twork .tled-v{font-size:16pt}
  .twork .tverdict{font-size:11pt}
  /* THE METHOD NOTE IS ONE PARAGRAPH ON PAPER (§6.2): the tool's first method section and nothing
     else. Its heading, the Underwriting Method box and the routing paragraph are all screen
     furniture for a reader who is still deciding; the working paper is for one that has decided.
     `.th2` is named rather than `.h2` — D111's headings are its own class (see the block above),
     and naming the shared one here would have hidden nothing while looking correct. */
  .twork .tmethod{margin:10pt 0 0}
  .twork .tmethod .th2,.twork .tmeth-box,.twork .troute,
  .twork .tmethod-p:not(:first-of-type){display:none}
  .twork .tmethod-p{font-size:9pt;line-height:1.4}
  /* ONE LETTER PAGE, less the 14mm margins, is about 950px at 96dpi. Measured at 1406px before
     these: the table's row padding and the ledger's 32px figures are screen sizes on paper. */
  .twork .ttable th,.twork .ttable td{padding:4pt 0}
  .twork .tkick{font-size:8.5pt;margin-bottom:6pt}
  .twork .tres-h{font-size:7.5pt;margin-bottom:6pt}
  .twork .tled-row{padding:5pt 0}
  .twork .tverdict{margin-top:10pt;padding-top:8pt;line-height:1.4}
  .twork .tshared{display:none}
  .twork .tlimit{font-size:7.5pt;margin-top:6pt}
  .twork a{text-decoration:none;color:#000}
}

/* The family adds no motion of its own: no entrance animation, no smooth scrolling, no transition
   beyond the focus and hover affordances above — so there is nothing here for reduced motion to
   remove, and an empty block would be a claim rather than a courtesy. */