/* Infinity OS Foundation: the one stylesheet. The blueprint restyle (15 October 2026), ported from the design
   admiral's approved mock-up (DESIGN-ADMIRAL\mockups\nonprofit-website\assets\blueprint.css, version 2), with its
   review furniture (the mock-up flag) left out. It no longer imports styleguide/tokens.css: the colours below are
   one self-contained palette table whose values were copied from it.
   The nonprofit's own palette (steel, bronze, patina, the loop mark) carrying the SHARED PARTNER LAYER of the brand
   blueprint direction, per the design admiral's alignment baseline (decisions A1 to A8):
     1 the 8 unit module (every space a multiple of 8 px, drawn as a ruler between bands);
     2 the title block (1.5 px outline, 1 px inner rules, mono upper case key over value);
     3 mono id badges on drawings and figures only (A6), never on sections;
     4 dimension lines in faint ink, outside the thing measured, never a state colour;
     5 orthogonal connectors (drawn in the drawings themselves);
     6 the five states as word plus shape;
     7 bronze only on the one main action; no glow; the drafting grid on bands only, never behind rows.
   One stylesheet for every page, nothing loaded from another site, no script needed. System font stacks (A8).
   Colour values are copied from the live site's styleguide/tokens.css (version 1, 14 October 2026); the grid and
   construction inks from the blueprint direction's tokens (inf-l, inf-d). No em or en dashes.
   Token NAMES follow BRAND-BLUEPRINT\blueprint-tokens-v0.css (15 October) where one fits: --page, --paper, --sunk,
   --rule, --edge, --field, --ink, --line, --soft, --faint, --grid, --grid2, --construct, --run, --ok, --wait, --bad,
   --quiet, --tile, --accent, --on-accent, --accent-hover, --accent-pressed, --unit, --stroke-strong, --stroke-hair,
   --radius-control, --sans, --mono. The VALUES stay the Foundation's own (styleguide/tokens.css). Names with no v0
   match stay the Foundation's own: --steel-text, --tile-line, --selection, --link-line,
   --w-open, --gutter, --wrap. This file does not link v0: a paper choice is the ONE palette table below
   (light-dark() pairs, as v0 section 1) swapped for another. */

/* To switch the draft banner off site-wide, uncomment the next line. */
/* .draft-banner { display: none !important; } */

/* ---------- Module and shape (theme free) ---------- */
:root {
  --unit: 8px;                                 /* the module: every space below is a multiple of it */
  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 16px;
  --wrap: 1200px;
  --radius-control: 999px;                       /* buttons: a soft pill (friendlier pass, 16 October) */
  --radius-card: 12px;                           /* F: cards, plates and title blocks: a gently rounded sheet */
  --radius-sm: 8px;                              /* F: chips, badges and small frames */
  --stroke-strong: 1.5px;                         /* plate and title block outline */
  --w-open: 2.25px;                         /* the one open or leading part */
  --stroke-hair: 1px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* ---------- THE PALETTE: one table (v0's shape and names, the Foundation's own values) ---------- */
/* Every colour is one light-dark() pair, as in blueprint-tokens-v0.css section 1. Choosing a paper (graphite,
   blueprint, merged, or this one) is swapping this one table. Names marked F are the Foundation's own, with no v0
   match.
   LIGHT BY DEFAULT (Andrew, 16 October 2026: "make light mode by default and make look more friendly"). The site no
   longer follows the visitor's system setting: color-scheme is light for everyone, so every pair below resolves to
   its FIRST (light) value. The SECOND (dark) value of each pair is kept but UNUSED. To bring dark back as one change,
   set the first rule below to "color-scheme: light dark" (and restore the two meta tags in each page's head and
   the .mk-adapt rule near the end of this file). data-theme="dark" on <html> still forces dark.
   The light half is the warm paper of the friendlier pass (16 October); the dark half is unchanged from the
   blueprint restyle of 15 October. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root {
  --page: light-dark(#F8F4EE, #17181A);
  --paper: light-dark(#FFFDFA, #1F2124);
  --sunk: light-dark(#F1EBE1, #111213);
  --rule: light-dark(#E7E0D5, #2D2F33);
  --edge: light-dark(#D3CABD, #3E4146);
  --field: light-dark(#776F65, #85847F);
  --ink: light-dark(#24211D, #EBEAE6);
  --line: light-dark(#2C2824, #EBEAE6);
  --frame: light-dark(#C9BFB1, #3E4146);          /* F: the soft outline of cards and title blocks */
  --soft: light-dark(#57514A, #B3B2AD);
  --faint: light-dark(#6A645C, #8E8D88);
  --grid: light-dark(rgb(122 92 52 / 0.035), rgb(235 234 230 / 0.035));
  --grid2: light-dark(rgb(122 92 52 / 0.065), rgb(235 234 230 / 0.07));
  --construct: light-dark(rgb(44 40 36 / 0.22), rgb(235 234 230 / 0.22));
  --run: light-dark(#4A6C8C, #8DB1D3);
  --ok: light-dark(#2C6B60, #86C9BA);
  --wait: light-dark(#7D5800, #E0B75A);
  --bad: light-dark(#A3341F, #EC8A74);
  --quiet: light-dark(#8C857B, #77767A);
  --tile: light-dark(#F6F0E7, #26282B);
  --accent: light-dark(#8F5722, #D4A06A);
  --on-accent: light-dark(#FFFFFF, #2A1806);
  --accent-hover: light-dark(#7A4A1C, #E2B37F);
  --accent-pressed: light-dark(#6A3F14, #C08A4A);
  --tile-line: light-dark(#D8CEC0, #3E4146);      /* F */
  --steel-text: light-dark(#3F5F7D, #8DB1D3);     /* F */
  --link-line: light-dark(#9A8F80, #85847F);      /* F */
  --selection: light-dark(#F2E4CF, #223244);      /* F */
}
/* F: the soft card shadow. light-dark() takes colours only, so it is set plainly and switched off under dark. */
:root { --shadow: 0 1px 2px rgb(74 52 24 / 0.05), 0 6px 20px rgb(74 52 24 / 0.06); }
:root[data-theme="dark"] { --shadow: none; }
/* Night: once a graphite band; in the light default it is a warm, deeper paper band with the grid, so the hero and
   the ages read as friendly sheets, not a dark mode. Its dark half keeps the old graphite grounds for when dark
   returns. It is a band, not a second palette. */
.night { --page: light-dark(#F2EADD, #111213); --paper: light-dark(#FFFDFA, #1A1B1E); --sunk: light-dark(#EBE1D2, #0B0C0D); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 18px/28px var(--sans);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 calc(1.5 * var(--unit)); font-weight: 600; text-wrap: balance; }
h1, h2 { font-weight: 560; }
h1 { font-size: clamp(2.25rem, 6.4vw, 4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; margin-bottom: calc(2 * var(--unit)); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 calc(2 * var(--unit)); }
ul, ol { padding-left: 24px; }
strong { font-weight: 600; }
code, kbd, pre { font-family: var(--mono); font-size: 15px; }
hr { border: 0; border-top: var(--stroke-hair) solid var(--rule); margin: calc(5 * var(--unit)) 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.soft { color: var(--soft); }
.faint { color: var(--faint); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 8px; top: -64px; z-index: 10; background: var(--paper); color: var(--ink);
  padding: 8px 16px; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.skip:focus { top: 8px; }

/* The draft banner, one element directly after <body> on every page: needs you, as a word plus a shape, in the sans. */
.draft-banner { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px var(--gutter);
  background: var(--paper); color: var(--ink); border-bottom: var(--stroke-hair) solid var(--rule);
  font: 600 13px/1.4 var(--sans); text-align: center; }
.draft-banner::before { content: ""; flex: none; width: 10px; height: 9px; background: var(--wait); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- Partner layer 1: the 8 unit module, drawn as a ruler ---------- */
/* Minor tick every 8, half tick every 40, major tick every 80. Under the header, under a page head, below each
   night band and above the footer. */
.ruler { height: 8px; border-top: var(--stroke-hair) solid var(--edge);
  background-image:
    linear-gradient(90deg, var(--faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--construct) 1px, transparent 1px),
    linear-gradient(90deg, var(--construct) 1px, transparent 1px);
  background-size: 80px 8px, 40px 5px, 8px 3px; background-position: var(--gutter) 0; background-repeat: repeat-x; }
.night::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  border-top: var(--stroke-hair) solid var(--rule);
  background-image:
    linear-gradient(90deg, var(--faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--construct) 1px, transparent 1px),
    linear-gradient(90deg, var(--construct) 1px, transparent 1px);
  background-size: 80px 8px, 40px 5px, 8px 3px; background-position: var(--gutter) 0; background-repeat: repeat-x; }
/* The last band before the footer: the footer's own ruler stands in for it. */
main > .night:last-child::after { display: none; }

/* The drafting grid: 16 minor, 80 major. On every band, including the bands of running text, faint, at Andrew's ask
   of 15 October (the live site grids its lower sections too). This is his exception to the baseline's "bands only,
   never behind rows or text": record it in his words in the style guide so no one "fixes" it back. Every row, card,
   plate and title block still sits on a solid ground, so the grid never shows behind a row. */
.night, .page-head, .lost, .section { background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px), linear-gradient(90deg, var(--grid2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: -1px -1px; }

/* ---------- Partner layer 3: mono id badges, on drawings and figures only (A6) ---------- */
.id { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm);
  font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--ink); background: var(--paper);
  white-space: nowrap; vertical-align: middle; }

/* Labels: mono upper case, led by a short ink leader in place of the live site's steel dot. */
.label { font: 600 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--steel-text);
  margin: 0 0 calc(2 * var(--unit)); }
.label .dot { display: inline-block; width: 16px; height: 0; border-top: 2px solid currentColor; border-radius: 2px;
  margin-right: 8px; vertical-align: .3em; }
.label a { color: inherit; }

/* ---------- Header ---------- */
.site-head { background: var(--page); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--ink); text-decoration: none;
  font-weight: 600; letter-spacing: -0.02em; font-size: 18px; margin-right: auto; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand span b { font-weight: 400; color: var(--soft); }
.site-nav { order: 3; width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 24px; }
.site-nav a { color: var(--soft); text-decoration: none; font: 500 15px/1 var(--sans); letter-spacing: 0;
  text-transform: none; display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); }
@media (min-width: 980px) {
  .site-nav { order: 0; width: auto; }
  .site-nav ul { flex-wrap: wrap; gap: 0 16px; }
  .brand { margin-right: 8px; }
  .head-row > .btn { margin-left: auto; }
}
@media (min-width: 1200px) { .site-nav ul { gap: 0 24px; } }
@media (max-width: 979px) {
  .head-row { column-gap: 8px; padding-bottom: 0; }
  .head-row > .btn { margin-left: auto; padding: 8px 16px; }
  .brand { margin-right: 0; font-size: 15px; }
  .site-nav { margin: 0 calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); }
  .site-nav ul { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 0 calc(var(--gutter) + 24px) 0 var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav li { flex: none; }
}

/* ---------- Buttons: bronze is the reader's own hand, kept for the page's one main action ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 28px;
  border-radius: var(--radius-control); font: 600 16px/1.2 var(--sans); text-decoration: none; border: var(--stroke-hair) solid transparent;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } .btn:active { transform: none; } }
.btn-main { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgb(74 52 24 / 0.12), 0 4px 12px rgb(143 87 34 / 0.18); }
.btn-main:hover { background: var(--accent-hover); }
.btn-main:active { background: var(--accent-pressed); }
.btn-line { border-color: var(--field); color: var(--ink); background: var(--paper); box-shadow: 0 1px 2px rgb(74 52 24 / 0.06); }
.btn-line:hover { background: var(--sunk); }
.night .btn-line { background: transparent; }
.btn-sm { min-height: 40px; padding: 8px 20px; font-size: 14px; }
/* The light and dark switch: a round icon button beside Download. Hidden until theme.js wires it, so it never shows dead. */
.theme-switch { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 1px solid var(--frame);
  border-radius: 999px; background: var(--paper); color: var(--soft); cursor: pointer; flex: none; }
.theme-switch[hidden] { display: none; }
.theme-switch:hover { color: var(--ink); background: var(--sunk); }
.theme-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .ts-sun, :root[data-theme="dark"] .theme-switch .ts-moon { display: none; }
:root[data-theme="dark"] .theme-switch .ts-sun { display: block; }
.theme-switch:not([hidden]) + .btn { margin-left: 0; }
@media (max-width: 419px) {
  .theme-switch { width: 36px; height: 36px; }
  .head-row { column-gap: 6px; }
  .head-row > .btn.btn-sm { padding: 6px 12px; min-height: 36px; }
  .head-row .brand { font-size: 14px; gap: 6px; }
  .head-row .brand svg { width: 28px; height: 28px; }
}
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: calc(5 * var(--unit)); }

/* ---------- Bands ---------- */
.section { padding: calc(8 * var(--unit)) 0; }
.sunk { background-color: var(--sunk); }
.section-head { max-width: 760px; margin-bottom: calc(6 * var(--unit)); }
.section-head p:not(.label) { color: var(--soft); font-size: 1.125rem; }
@media (min-width: 900px) { .section { padding: calc(14 * var(--unit)) 0; } }
.night { background-color: var(--page); color: var(--ink); position: relative; }
.night .label { color: var(--steel-text); }

/* ---------- Hero ---------- */
.hero { padding: calc(6 * var(--unit)) 0 calc(8 * var(--unit)); }
.hero .wrap { position: relative; display: grid; gap: calc(5 * var(--unit)); align-items: center; }
.hero h1 { max-width: 15ch; margin-bottom: calc(3 * var(--unit)); }
.hero .lede { font-size: clamp(1.125rem, 2.4vw, 1.3125rem); line-height: 1.55; color: var(--soft); max-width: 40em; }
.hero-word { font-style: normal; color: var(--ink); }
@media (min-width: 900px) {
  .hero { padding: calc(12 * var(--unit)) 0 calc(13 * var(--unit)); }
  .hero .wrap { grid-template-columns: 1.2fr .8fr; gap: calc(7 * var(--unit)); }
}

/* Plates: a square drawing frame with its id badge on the corner (the title block's little sibling). */
.plate { margin: 0; position: relative; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); padding: 40px 16px 16px; min-width: 0; }
.plate > .id { position: absolute; top: -1px; left: -1px; border-radius: var(--radius-card) 0 var(--radius-sm) 0; }
/* The hero mark: a clean bronze loop on the band, no plate. It draws once, then a soft glint sweeps it now and then. */
.hero-mark { margin: 0; max-width: 460px; width: 100%; justify-self: center; align-self: center; }
.hero-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-mark .hm-shadow { stroke: #6E4216; opacity: .22; }
.hero-mark .hm-glint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .hm-glint { animation: hm-glint 7s ease-in-out 1.9s infinite; }
  @keyframes hm-glint { 0% { transform: skewX(-20deg) translateX(0); opacity: 0; } 4% { opacity: 1; } 22% { transform: skewX(-20deg) translateX(150px); opacity: 1; } 26%, 100% { transform: skewX(-20deg) translateX(150px); opacity: 0; } }
}

/* The mark drawing itself once, only where motion is welcome. */
.draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .draw { animation: draw 1.6s cubic-bezier(.6,.05,.3,1) .2s both; }
  @keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
}

/* ---------- The three ages: a staircase of title blocks on a hatched ground line ---------- */
.ages-band { padding: calc(8 * var(--unit)) 0 calc(9 * var(--unit)); }
@media (min-width: 900px) { .ages-band { padding: calc(13 * var(--unit)) 0; } }
.stair { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: end; }
.stair > * { min-width: 0; }
.stair::after { content: ""; grid-column: 1 / -1; height: 16px; margin-top: -17.5px; border-top: var(--stroke-strong) solid var(--line);
  background: repeating-linear-gradient(-45deg, var(--construct) 0 1px, transparent 1px 8px); }
.step { position: relative; background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 0 16px 16px; }
.step h3 { color: var(--ink); font-size: 1.5rem; margin-bottom: 8px; }
.step p { color: var(--soft); font-size: 15px; margin-bottom: 8px; }
.step p:last-child { margin-bottom: 0; }
.step .step-age { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 -16px 16px; padding: 8px 16px;
  border-bottom: var(--stroke-hair) solid var(--rule); font: 600 14px/24px var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.step .step-date { font: 600 15px/1.5 var(--sans); color: var(--ink); }
.step .step-date time { font: 600 12px/1.5 var(--mono); letter-spacing: .02em; }
.step-3 { grid-column: 1 / -1; border: var(--stroke-strong) solid var(--line); padding: 0 24px 24px; }
.step-3 .step-age { margin: 0 -24px 24px; padding: 8px 24px; color: var(--ink); }
.step-3 h3 { font-size: clamp(2.75rem, 11vw, 5.5rem); font-weight: 560; letter-spacing: -0.035em; line-height: 1; margin: 0 0 16px; }
/* "Beginning now" is the working state: a ring and the word. */
.step-now { display: inline-flex; align-items: center; gap: 8px; color: var(--steel-text); letter-spacing: 0; }
.step-now::before { content: ""; width: 9px; height: 9px; border: 1.75px solid currentColor; border-radius: 50%; }
.step-3 .step-lede { font-size: clamp(1.125rem, 2.4vw, 1.25rem); line-height: 1.5; color: var(--ink); max-width: 30em; }
.step-3 .step-big { font-size: clamp(1.3rem, 3.4vw, 1.875rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 16px; }
@media (min-width: 900px) {
  .stair { grid-template-columns: 1fr 1fr 2.3fr; gap: 16px; }
  .step-3 { grid-column: auto; }
  .step-1 { min-height: 248px; }
  .step-2 { min-height: 328px; }
  .step-3 { min-height: 472px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 32px 40px; }
  .step-3 .step-age { margin: 0 -32px auto; padding: 8px 32px; }
  .step-3 h3 { margin-top: 32px; }
}

/* ---------- Words beside a drawing ---------- */
.duo { display: grid; gap: calc(4 * var(--unit)); align-items: center; }
.duo > * { min-width: 0; }
.duo .section-head { margin-bottom: 0; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 5fr 6fr; gap: calc(7 * var(--unit)); }
  .duo.flip > .dia { order: -1; }
}
.points { list-style: none; margin: 0 0 calc(4 * var(--unit)); padding: 0; display: grid; gap: 20px; }
.points li { padding-left: 24px; position: relative; color: var(--soft); }
.points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--steel-text); }
.points strong { color: var(--ink); }
.sub-head { font-size: clamp(1.25rem, 3vw, 1.625rem); }
.goal { font-size: clamp(1.1875rem, 2.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.015em; font-weight: 600; max-width: 34em; margin: 0 0 32px; }
.own-line { margin: 8px 0 24px; }
.steward { margin-top: calc(6 * var(--unit)); max-width: 820px; padding-left: 24px; border-left: var(--stroke-strong) solid var(--line); }
.steward .goal { margin-bottom: 16px; }
.sovereign { margin-bottom: 0; max-width: 820px; }
.sovereign .goal { color: var(--ink); margin: 8px 0 0; padding: 16px 0 0 24px; border-left: var(--stroke-strong) solid var(--line); }
.story-link { margin: calc(4 * var(--unit)) 0 0; font-size: 1.125rem; color: var(--soft); }

/* ---------- Partner layer 2: the title block ---------- */
/* One grammar everywhere: a 1.5 px outline, 1 px inner rules, mono keys in faint upper case, the value under it.
   Used for the page heads, every grid of cards, the providers, the principles, the ledger, the questions, the
   repository list, the status schedules and the footer. */
.tb { border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.tb-cell { padding: 32px; min-width: 0; }
.grid { display: grid; gap: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.grid > * { min-width: 0; }
.grid > .card { border: 0; border-top: var(--stroke-hair) solid var(--rule); border-radius: 0; box-shadow: none; background: transparent; padding: 24px 32px 32px; }
.grid > .card:first-child { border-top: 0; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2 > .card:nth-child(2) { border-top: 0; }
  .grid-2 > .card:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); }
}
.card .label, .provider-group .label { font: 600 15px/1.4 var(--sans); letter-spacing: 0; color: var(--steel-text); margin: 0 0 8px; }
.principle::before { font: 600 12px/1.35 var(--mono); letter-spacing: .14em; color: var(--faint); margin: 0 0 8px; }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.grid .card p:not(.label) { color: var(--soft); }
.jobs-cards .card h3 { font-size: 1.5rem; }
/* A card on its own is a plate: a 1.5 px outline on a solid surface, square, no shadow. */
.card { background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 32px; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { background: var(--sunk); }
a.card .more { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
  border-top: var(--stroke-hair) solid var(--rule); padding-top: 16px; margin-top: 8px; width: 100%; }

/* Page heads: one title block on a gridded band. */
.page-head { padding: calc(5 * var(--unit)) 0 calc(6 * var(--unit)); }
.page-head h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); max-width: 20ch; }
.page-head .lede { font-size: 1.125rem; color: var(--soft); max-width: 40em; margin-bottom: 0; }
.page-head .byline { margin: 16px -24px -24px; padding: 8px 24px; border-top: var(--stroke-hair) solid var(--rule); }
@media (min-width: 900px) {
  .page-head { padding: calc(8 * var(--unit)) 0 calc(7 * var(--unit)); }
  .page-head .tb-cell { padding: 32px 40px 40px; }
  .page-head .byline { margin: 24px -40px -40px; padding: 8px 40px; }
}

/* ---------- Partner layer 6: the five states, a word and a shape ---------- */
/* done: filled circle. working: ring. needs you: filled triangle. broke: a cross. resting: hollow square. */
.state { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.35 var(--sans); letter-spacing: 0;
  text-transform: none; white-space: nowrap; }
.state::before { content: ""; flex: none; width: 9px; height: 9px; box-sizing: border-box; }
.s-done { color: var(--ok); }   .s-done::before { background: currentColor; border-radius: 50%; }
.s-run { color: var(--steel-text); } .s-run::before { border: 1.75px solid currentColor; border-radius: 50%; }
.s-wait { color: var(--wait); }  .s-wait::before { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; }
.s-bad { color: var(--bad); }   .s-bad::before { content: "\2715"; width: auto; height: auto; font-size: 12px; line-height: 1; }
.s-rest { color: var(--soft); }   .s-rest::before { border: 1.5px solid var(--quiet); }

/* Status lists: a schedule in title block grammar, one row per item, the state in the key column. */
.status { list-style: none; margin: 0; padding: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.status li { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 8px 16px; align-items: baseline;
  padding: 16px 24px; border-top: var(--stroke-hair) solid var(--rule); }
.status li:first-child { border-top: 0; }
.status .when { grid-column: 2; font: 400 12px/1.4 var(--mono); color: var(--faint); }
.status.offer-status { margin-top: calc(5 * var(--unit)); }
.jobs-points { max-width: 820px; margin-bottom: calc(4 * var(--unit)); }
@media (max-width: 599px) {
  .status li { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .status .when { grid-column: 1; }
}

/* ---------- Providers: one title block, two cells, chips with our own drawn tiles ---------- */
.providers { margin-top: calc(7 * var(--unit)); }
.providers > .soft { max-width: 40em; }
.provider-groups { display: grid; margin-top: 24px; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.provider-groups > * { min-width: 0; }
.provider-group { padding: 24px 32px 32px; }
.provider-group + .provider-group { border-top: var(--stroke-hair) solid var(--rule); }
@media (min-width: 800px) {
  .provider-groups { grid-template-columns: 1fr 1fr; }
  .provider-group + .provider-group { border-top: 0; border-left: var(--stroke-hair) solid var(--rule); }
}
.provider-note { color: var(--soft); font-size: 15px; margin-bottom: 16px; }
.name-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.name-chips li { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em;
  padding: 4px 16px 4px 4px; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.pmark { width: 32px; height: 32px; flex: none; display: block; }
.pmark svg, .pmark img { width: 100%; height: 100%; display: block; }
.pt-tile { fill: var(--tile); stroke: var(--tile-line); stroke-width: 1.25; rx: 3px; }
.pt-glyph { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.04em; }
.pt-acc { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.provider-fine { margin: 16px 0 0; font: 400 13px/1.6 var(--sans); color: var(--faint); max-width: 60em; }

/* ---------- Calls: three plates ---------- */
.calls { display: grid; gap: 32px; }
.calls > * { min-width: 0; }
@media (min-width: 800px) { .calls { grid-template-columns: repeat(3, 1fr); } }
.call { display: flex; flex-direction: column; gap: 8px; }
.call p { color: var(--soft); }
.call .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Principles: one title block, numbered cells ---------- */
.principles { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: pr; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.principles > * { min-width: 0; }
.principle { counter-increment: pr; padding: 24px 32px 32px; border-top: var(--stroke-hair) solid var(--rule); }
.principle:first-child { border-top: 0; }
.principle::before { content: counter(pr, decimal-leading-zero); display: block; }
.principle h3 { font-size: 1.125rem; }
.principle p { color: var(--soft); margin-bottom: 0; }
@media (min-width: 800px) {
  .principles { grid-template-columns: 1fr 1fr; }
  .principle:nth-child(2) { border-top: 0; }
  .principle:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); }
}

/* ---------- Closing message ---------- */
.closing { padding: calc(10 * var(--unit)) 0 calc(11 * var(--unit)); }
.closing h2 { font-size: clamp(1.875rem, 5vw, 3.125rem); max-width: 18ch; }
.closing-lede { font-size: clamp(1.125rem, 2.4vw, 1.3125rem); line-height: 1.55; color: var(--soft); max-width: 40em; }
.closing-lede + .closing-lede { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .closing { padding: calc(14 * var(--unit)) 0 calc(15 * var(--unit)); } }

/* ---------- Diagrams: the site's approved drawings, redrawn in the blueprint grammar ---------- */
.dia { margin: 0; }
.dia-scroll { min-width: 0; }
svg.v { color: var(--ink); font-family: var(--sans); font-size: 13px; width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; }
svg.v text { fill: var(--ink); font-family: var(--sans); }
svg.v rect { rx: 2px; }
svg.v .h { font-weight: 600; }
svg.v .ts { fill: var(--soft); }
svg.v .tf { fill: var(--faint); }
svg.v .tl { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; fill: var(--faint); }
svg.v .tp, svg.v .tr, svg.v .tst { fill: var(--ink); }          /* were patina, red and steel: identity, not state */
svg.v .tl.tp, svg.v .tl.tr, svg.v .tl.tst { fill: var(--faint); }
/* State words beside a state shape keep the state's colour: the word and the shape are one mark. */
svg.v .t-ok { fill: var(--ok); }
svg.v .t-run { fill: var(--steel-text); }
svg.v .ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.v .lf { fill: none; stroke: var(--rule); stroke-width: 1; }
svg.v rect.lf { stroke-dasharray: 6 4; stroke: var(--edge); }
svg.v .ls { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
svg.v .card { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
svg.v .sunk2 { fill: var(--sunk); stroke: var(--edge); stroke-width: 1; }
svg.v .em { fill: var(--paper); stroke: var(--line); stroke-width: 2.25; }
/* Every node is an ink outline on paper: no state colour as identity (design review 2, SHOULD 1). */
svg.v .pw, svg.v .sw { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
svg.v .pf, svg.v .pfc, svg.v .stf { fill: var(--line); stroke: none; }
svg.v .sqo { fill: none; stroke: var(--quiet); stroke-width: 1.5; }
svg.v .grid { display: inline; fill: none; stroke: var(--construct); stroke-width: .75; border: 0; background: none; }
/* The competitor's copy: the same ink outline, dashed. The words say "a perfect copy"; red is kept for damage. */
svg.v .rl { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 4; }
svg.v .card.rl { fill: var(--paper); }
svg.v .rlx { fill: none; stroke: var(--line); stroke-width: 2.25; stroke-linecap: round; }
/* The progress line was bronze; bronze is never in a chart, so it is drawn as the leading ink line. */
svg.v .prog { fill: none; stroke: var(--line); stroke-width: 2.25; stroke-linecap: square; stroke-linejoin: miter; }
svg.v .dash { stroke-dasharray: 5 4; }
svg.v .mk { fill: var(--line); }
svg.v .mkr { fill: var(--line); }
svg.v .st-done { fill: var(--ok); }
svg.v .st-run { fill: none; stroke: var(--run); stroke-width: 1.75; }
.figure { margin: calc(6 * var(--unit)) 0 0; }
.figure.dia { margin: 32px 0; }
.dia-wide { margin: calc(5 * var(--unit)) 0 0; }

/* ---------- Partner layer 4: dimension lines ---------- */
/* A faint line with end ticks and a mono figure, outside the thing it measures. Never a state colour. */
.dim { position: relative; display: flex; align-items: center; justify-content: center; color: var(--faint);
  font: 400 12px/1 var(--mono); letter-spacing: .04em; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--faint); opacity: .8; }
.dim > span { position: relative; background: var(--paper); padding: 0 8px; }
.dim-h { height: 16px; margin-bottom: 8px; border-left: 1px solid var(--faint); border-right: 1px solid var(--faint); }
.dim-v { width: 16px; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.dim-v::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--faint); }
.dim-v > span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; }

/* ---------- People ---------- */
.people { display: grid; gap: 32px; }
@media (min-width: 900px) { .people { grid-template-columns: repeat(3, 1fr); } }
.people > * { min-width: 0; }
.person { display: flex; flex-direction: column; background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 24px; }
.person-fig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto auto; gap: 0 8px; margin: 0 0 24px; padding-top: 32px; }
.person-fig > .id { position: absolute; top: -25px; left: -25px; border-radius: var(--radius-card) 0 var(--radius-sm) 0; }
.person-fig .dim-h { grid-column: 1; grid-row: 1; }
.person-fig .frame { grid-column: 1; grid-row: 2; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm); padding: 4px; }
.person-fig .dim-v { grid-column: 2; grid-row: 2; }
.person-portrait { display: block; width: 100%; height: auto; aspect-ratio: 700 / 875; object-fit: cover; }
.person h2, .person h3 { font-size: 1.5rem; margin-bottom: 8px; }
.person .role { margin: 0 0 16px; padding: 8px 0; border-top: var(--stroke-hair) solid var(--rule); border-bottom: var(--stroke-hair) solid var(--rule);
  font: 600 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); }
.person p { color: var(--soft); }
.person p:last-child { margin-bottom: 0; }

/* ---------- Ledger, questions, repositories: title blocks in rows ---------- */
.ledger-note { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .ledger-note { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.ledger { margin: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); font-size: 15px; }
.ledger-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); border-top: var(--stroke-hair) solid var(--rule); }
.ledger-row:first-child { border-top: 0; }
.ledger-row > * { padding: 8px 16px; }
.ledger-row dt { font: 600 14px/2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); border-right: var(--stroke-hair) solid var(--rule); }
.ledger-row dd { margin: 0; }
.ledger-cap { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--faint); padding: 8px 16px; border-top: var(--stroke-hair) solid var(--rule); }
.use-not-build { display: grid; gap: 32px; }
.praise { font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.5; }
.questions { list-style: none; margin: 0 0 16px; padding: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.questions li { padding: 16px 16px 16px 56px; border-top: var(--stroke-hair) solid var(--rule); position: relative; font-weight: 600; margin: 0; color: var(--ink); }
.questions li:first-child { border-top: 0; }
.questions li::before { content: "?"; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm);
  color: var(--ink); font: 600 13px/22px var(--mono); text-align: center; }
.repo-list { display: grid; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.repo-list > * { min-width: 0; }
.repo { padding: 16px 24px; display: grid; gap: 8px; border-top: var(--stroke-hair) solid var(--rule); }
.repo:first-child { border-top: 0; }
.repo h3 { font-family: var(--mono); font-size: 15px; letter-spacing: 0; margin: 0; }
.repo p { margin: 0; color: var(--soft); }
.repo .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 400 12px/1.4 var(--mono); color: var(--faint); align-items: center; }
/* The licence is a fact, not a state: a plain mono tag, no shape. */
.repo .chip { font: 600 12px/1 var(--mono); letter-spacing: .1em; padding: 4px 8px; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm); color: var(--ink); }
.repo-list + * { margin-top: 24px; }

/* ---------- Prose: articles and long pages ---------- */
.prose { max-width: 700px; }
.prose h2 { font-size: 1.5rem; margin-top: calc(6 * var(--unit)); }
.prose h3 { margin-top: calc(4 * var(--unit)); }
.prose p, .prose li { color: var(--ink); }
.prose li { margin-bottom: 8px; }
.prose blockquote { margin: 24px 0; padding: 0 0 0 24px; border-left: var(--stroke-strong) solid var(--line); color: var(--soft); }
.prose .callout { background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 16px 24px; margin: 24px 0; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose pre, .card pre { background: var(--sunk); border: var(--stroke-hair) solid var(--rule); padding: 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.card pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.card code { overflow-wrap: anywhere; }
.byline { font: 600 13px/1.5 var(--sans); color: var(--faint); margin-top: 16px; }
.article-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sources { font-size: 15px; color: var(--soft); }
.prose .sources li { color: var(--soft); }

/* ---------- The Foundation and StarMynd ---------- */
.rel-fig svg.v { max-width: 500px; }
.rel-words .sub-head { margin-top: 0; }
.rel-words * + .sub-head { margin-top: 32px; }
.rel-steps { margin: 0 0 24px; padding-left: 24px; display: grid; gap: 16px; }
.rel-steps li { color: var(--soft); padding-left: 8px; }
.rel-steps li::marker { font: 600 13px/1 var(--mono); color: var(--faint); }
.rel-steps strong { color: var(--ink); }
.rel-note { font-size: 15px; margin-bottom: 0; }
.rel-origin p:not(.label):not(.byline) { font-size: 1.125rem; }
@media (min-width: 900px) { .rel-duo { grid-template-columns: 6fr 5fr; align-items: start; } }
/* Our StarMynd origin story: relationship.html as a visual doc (main.fk.rel), 16 October 2026 */
.fk.rel .rel-fig svg.v { max-width: 460px; }
.fk.rel .rel-duo { margin-top: 32px; }
.fk.rel .rel-duo figure.dia { margin-top: 0; margin-bottom: 0; }
.fk.rel .rel-principles { margin-top: 32px; }
.fk.rel .ch-words + .duo, .fk.rel .duo + .ch-words { margin-top: 40px; }
.fk.rel .rel-true { margin-top: 24px; }

/* ---------- Precedents (precedents.html): every rule scoped under main.pc ---------- */
/* Ported from the counsel review page's letterhead (15 October 2026) into this sheet's grammar: no serif, no section
   numbers (ids stay on drawings only), ink outlines on paper, the five states as word plus shape. */
.pc .pc-notice { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; padding: 16px 24px; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow);
  background: var(--paper); font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 760px; }
.pc .pc-notice p { margin: 0; }
.pc .pc-notice strong { color: var(--ink); }
.pc .pc-five { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: f; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.pc .pc-five li { counter-increment: f; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 12px 24px 12px 16px;
  border-top: var(--stroke-hair) solid var(--rule); font-size: 16px; line-height: 1.5; }
.pc .pc-five li:first-child { border-top: 0; }
.pc .pc-five li::before { content: counter(f, decimal-leading-zero); font: 600 12px/1.9 var(--mono); color: var(--faint); letter-spacing: .08em; }
.pc .pc-toc { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.pc .pc-toc a { display: inline-flex; align-items: center; min-height: 48px; color: var(--soft); text-decoration: none; font: 500 15px/1 var(--sans);
  letter-spacing: 0; text-transform: none; }
.pc .pc-toc a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pc .section-head .intro { color: var(--soft); font-size: 1.125rem; }
.pc .pc-prose { max-width: 42em; }
.pc .sowhat { max-width: 42em; border-left: var(--w-open) solid var(--line); padding: 4px 0 4px 20px; margin: 40px 0 0; font-weight: 600; }
.pc .sowhat span { display: block; font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc .analogy { position: relative; margin: 32px 0 0; padding: 48px 24px 24px; background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); max-width: 52em; }
.pc .analogy::before { content: "Analogy"; position: absolute; top: -1px; left: -1px; border-radius: var(--radius-card) 0 var(--radius-sm) 0; height: 24px; padding: 0 8px; display: inline-flex; align-items: center;
  background: var(--ink); color: var(--page); font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.pc .analogy h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.pc .analogy p { color: var(--soft); }
.pc .analogy p:last-child { margin-bottom: 0; }
.pc .analogy .ag { display: grid; margin: 16px 0; border: var(--stroke-hair) solid var(--rule); }
.pc .analogy .ag > div { padding: 12px 16px; border-top: var(--stroke-hair) solid var(--rule); min-width: 0; }
.pc .analogy .ag > div:first-child { border-top: 0; }
.pc .analogy .ag dt { font: 600 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc .analogy .ag dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
@media (min-width: 720px) {
  .pc .analogy { padding: 56px 40px 32px; }
  .pc .analogy .ag { grid-template-columns: 1fr 1fr; }
  .pc .analogy .ag > div:nth-child(2) { border-top: 0; }
  .pc .analogy .ag > div:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); }
}
.pc .duo { align-items: start; margin-top: 32px; }
.pc .duo .analogy { margin-top: 0; }
.pc .plate figcaption { margin-top: 16px; padding-top: 12px; border-top: var(--stroke-hair) solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--soft); }
.pc .plate figcaption ol { margin: 0; padding-left: 20px; }
.pc figure.dia { margin: 32px 0 0; }
.pc .duo figure.dia { margin-top: 0; }
.pc .legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 600 14px/1.4 var(--sans);
  letter-spacing: 0; text-transform: none; color: var(--soft); }
.pc .legend li { display: inline-flex; align-items: center; gap: 8px; }
.pc .sh { display: inline-block; width: 10px; height: 10px; flex: none; }
.pc .sh-a { background: var(--line); border-radius: 50%; }
.pc .sh-b { border: 1.75px solid var(--line); }
.pc .sh-c { background: var(--line); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
.pc .sh-d { position: relative; }
.pc .sh-d::before, .pc .sh-d::after { content: ""; position: absolute; left: 4px; top: -1px; width: 2.25px; height: 12px; background: var(--bad); transform: rotate(45deg); }
.pc .sh-d::after { transform: rotate(-45deg); }
/* The precedents' drawings: the same ink grammar, their own small class set (svg.v.pv) so the site's drawings are untouched. */
svg.v.pv { font-size: 13px; }
svg.v.pv.port { max-width: 460px; }
svg.v.pv.port .ts { font-size: 14px; }
svg.v.pv.port .h { font-size: 16px; }
svg.v.pv .h { font-weight: 600; font-size: 15px; }
svg.v.pv .tf { fill: var(--faint); font-size: 14px; }
svg.v.pv .tl { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; fill: var(--faint); }
svg.v.pv.tl-svg .tl { font-size: 11px; letter-spacing: .02em; }
svg.v.pv .tlab { font-size: 15px; font-weight: 600; fill: var(--ink); }
svg.v.pv a:hover .tlab { text-decoration: underline; }
svg.v.pv .dsh { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 4; }
svg.v.pv .sunkb { fill: var(--sunk); stroke: var(--edge); stroke-width: 1; }
svg.v.pv .ln.dashl { stroke-dasharray: 5 4; }
svg.v.pv .ls { fill: none; stroke: var(--faint); stroke-width: 1; }
svg.v.pv .lf { fill: none; stroke: var(--construct); stroke-width: 6; }
svg.v.pv .lead { fill: none; stroke: var(--construct); stroke-width: 1; }
svg.v.pv .sqo2 { fill: var(--paper); stroke: var(--line); stroke-width: 1.75; }
svg.v.pv .xk { fill: none; stroke: var(--bad); stroke-width: 2.25; stroke-linecap: round; }
svg.v.pv .ok { fill: var(--ok); }
svg.v.pv .okt { fill: var(--ok); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 600; }
svg.v.pv .wait { fill: var(--wait); }
svg.v.pv .waitt { fill: var(--wait); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 600; }
svg.v.pv .badt { fill: var(--bad); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; font-weight: 600; }
svg.v.pv .badge { fill: var(--ink); }
svg.v.pv .badge-t { fill: var(--page); font: 600 12px var(--mono); }
svg.v.pv .cut { fill: none; stroke: var(--bad); stroke-width: 2.5; stroke-linecap: round; }
svg.v.pv-wide { max-width: none; min-width: 760px; }
.pc figure.dia .dia-scroll.pc-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 719px) { .pc figure.dia .dia-scroll > svg.v.pv-wide { min-width: 760px; max-width: none; } }
@media (min-width: 428px) and (max-width: 799px) {
  .pc figure.dia.pc-wide::after { content: "Swipe to see the whole drawing \2192"; position: absolute; top: 4px; right: var(--gutter);
    font: 600 14px/24px var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
}
/* Story cards */
.pc .group-head { margin: 56px 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.pc .group-head h3 { font-size: clamp(1.25rem, 3vw, 1.625rem); margin: 0; }
.pc .group-head .legend { margin: 0; }
.pc .group-note { color: var(--soft); max-width: 42em; }
.pc .cards { display: grid; gap: 24px; }
@media (min-width: 900px) { .pc .cards { grid-template-columns: 1fr 1fr; } }
.pc .ex { display: flex; flex-direction: column; background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); min-width: 0; scroll-margin-top: 24px; }
.pc .ex-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: var(--stroke-hair) solid var(--rule);
  font: 600 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc .ex-top .yr { color: var(--ink); text-align: right; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.pc .ex-body { padding: 16px 16px 8px; }
.pc .ex h4 { font-size: 1.375rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.pc .ex .tag { margin: 0 0 12px; color: var(--soft); font-size: 15px; }
.pc .ex dl { margin: 0 0 12px; border-top: var(--stroke-hair) solid var(--rule); }
.pc .ex dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: var(--stroke-hair) solid var(--rule); }
.pc .ex dt { font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc .ex dd { margin: 0; font-size: 15px; line-height: 1.5; }
.pc .ex .lesson { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.pc .ex .lesson::before { content: "Why it matters here. "; font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc .ex .q { margin: 0 0 12px; padding-left: 12px; border-left: var(--stroke-strong) solid var(--line); font-size: 1rem; line-height: 1.45; font-style: italic; }
.pc .ex .q cite { display: block; font: 600 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); font-style: normal; margin-top: 4px; }
.pc .ex .src, .pc .tale .src { margin: auto 0 0; padding: 8px 16px; border-top: var(--stroke-hair) solid var(--rule); font-size: 13px; line-height: 1.6; color: var(--faint); }
.pc .ex .src a, .pc .tale .src a { color: var(--soft); }
.pc .ex.feature { border: var(--stroke-strong) solid var(--line); }
@media (min-width: 900px) { .pc .ex.feature { grid-column: 1 / -1; } .pc .ex.feature .ex-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } }
@media (min-width: 480px) { .pc .ex-body { padding: 16px 24px 8px; } .pc .ex-top, .pc .ex .src { padding-left: 24px; padding-right: 24px; } }
/* Cautionary tales */
.pc .tales { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 900px) { .pc .tales { grid-template-columns: 1fr 1fr; } }
.pc .tale { background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); min-width: 0; scroll-margin-top: 24px; display: flex; flex-direction: column; }
.pc .tale-head { padding: 16px 24px; border-bottom: var(--stroke-hair) solid var(--rule); }
.pc .tale-head h3 { margin: 0; font-size: 1.5rem; }
.pc .tale-head p { margin: 4px 0 0; color: var(--soft); font-size: 15px; }
.pc .steps { list-style: none; margin: 0; padding: 8px 24px; }
.pc .steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: var(--stroke-hair) solid var(--rule); font-size: 15px; line-height: 1.5; }
.pc .steps li:last-child { border-bottom: 0; }
.pc .steps time { font: 600 12px/1.9 var(--mono); letter-spacing: .04em; color: var(--faint); }
.pc .fair { margin: 0; padding: 12px 24px; border-top: var(--stroke-hair) solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--soft); background: var(--tile); }
.pc .fair b { color: var(--ink); }
.pc .tale .src { padding: 8px 24px; }
@media (max-width: 479px) { .pc .steps li { grid-template-columns: minmax(0, 1fr); gap: 0; } .pc .tale-head, .pc .steps, .pc .fair, .pc .tale .src { padding-left: 16px; padding-right: 16px; } }
/* Reasons */
.pc .reasons { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: r; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.pc .reasons > li { counter-increment: r; padding: 16px 24px 24px; border-top: var(--stroke-hair) solid var(--rule); min-width: 0; }
.pc .reasons > li:first-child { border-top: 0; }
.pc .reasons > li::before { content: counter(r, decimal-leading-zero); display: block; font: 600 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--faint); margin-bottom: 8px; }
.pc .reasons p { color: var(--soft); margin: 0 0 8px; font-size: 16px; }
.pc .reasons .ev { font: 400 13px/1.5 var(--mono); color: var(--faint); margin: 0; }
.pc .reasons .ev a { color: var(--soft); }
@media (min-width: 800px) { .pc .reasons { grid-template-columns: 1fr 1fr; } .pc .reasons > li:nth-child(2) { border-top: 0; } .pc .reasons > li:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); } }
@media (min-width: 1200px) { .pc .reasons { grid-template-columns: 1fr 1fr 1fr; } .pc .reasons > li:nth-child(3) { border-top: 0; } .pc .reasons > li:nth-child(even) { border-left: 0; } .pc .reasons > li:not(:nth-child(3n+1)) { border-left: var(--stroke-hair) solid var(--rule); } }
/* Common questions and the practices list */
.pc .qa { display: grid; gap: 24px; }
.pc .qa article { background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); min-width: 0; }
.pc .qa .ask { position: relative; margin: 0; padding: 16px 24px 16px 64px; border-bottom: var(--stroke-hair) solid var(--rule); font-size: 1.25rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.pc .qa .ask::before { content: "?"; position: absolute; left: 20px; top: 18px; width: 28px; height: 28px; border: var(--stroke-hair) solid var(--edge); border-radius: var(--radius-sm); font: 600 14px/26px var(--mono); text-align: center; }
.pc .qa .ans { padding: 16px 24px 8px; }
.pc .qa .ans p { font-size: 16px; }
.pc .check { list-style: none; margin: 24px 0 0; padding: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.pc .check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 24px; border-top: var(--stroke-hair) solid var(--rule); font-size: 16px; line-height: 1.5; }
.pc .check li:first-child { border-top: 0; }
.pc .check li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--quiet); }
.pc .check li span { display: block; color: var(--soft); font-size: 15px; margin-top: 2px; }
.pc .check-cap { font: 600 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); margin: 8px 0 0; }
.pc .sub-head { margin-top: 48px; }
/* The gap: a table in title block rows */
.pc .pc-ledger { margin: 32px 0 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); font-size: 15px; }
.pc .pc-ledger > div { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--stroke-hair) solid var(--rule); }
.pc .pc-ledger > div:first-child { border-top: 0; }
.pc .pc-ledger > div > * { padding: 8px 16px; min-width: 0; }
.pc .pc-ledger .hd { font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); background: var(--tile); }
.pc .pc-ledger .k { font-weight: 600; }
.pc .pc-ledger .s { color: var(--soft); }
@media (min-width: 800px) { .pc .pc-ledger > div { grid-template-columns: 1.1fr 1.4fr 1.4fr; } .pc .pc-ledger > div > * + * { border-left: var(--stroke-hair) solid var(--rule); } }
@media (max-width: 799px) { .pc .pc-ledger .hd:not(:first-child) { display: none; } .pc .pc-ledger > div > .s::before { content: attr(data-k); display: block; font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); } }
/* Glossary and sources */
.pc .gl { display: grid; margin: 0; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.pc .gl > div { padding: 12px 24px; border-top: var(--stroke-hair) solid var(--rule); min-width: 0; }
.pc .gl > div:first-child { border-top: 0; }
.pc .gl dt { font-weight: 600; }
.pc .gl dd { margin: 2px 0 0; color: var(--soft); font-size: 15px; }
@media (min-width: 800px) { .pc .gl { grid-template-columns: 1fr 1fr; } .pc .gl > div:nth-child(2) { border-top: 0; } .pc .gl > div:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); } }
.pc .srcs { columns: 1; column-gap: 40px; font-size: 14px; line-height: 1.5; padding-left: 20px; margin: 16px 0 0; }
.pc .srcs li { break-inside: avoid; margin: 0 0 8px; color: var(--soft); }
.pc .srcs a { overflow-wrap: anywhere; }
@media (min-width: 900px) { .pc .srcs { columns: 2; } }
.pc .src-h { font: 600 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); margin: 32px 0 0; }
@media (max-width: 479px) {
  .pc .ex dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pc .pc-notice, .pc .pc-five li, .pc .reasons > li, .pc .qa .ans, .pc .check li, .pc .gl > div { padding-left: 16px; padding-right: 16px; }
  .pc .qa .ask { padding-left: 56px; padding-right: 16px; }
  .pc .qa .ask::before { left: 16px; }
  .pc .analogy { padding: 48px 16px 16px; }
}

/* ---------- A letter from Andrew (letter.html) ---------- */
.letter { display: grid; gap: 32px; align-items: start; }
.letter > * { min-width: 0; }
.letter-person { max-width: 320px; }
.letter-person .role { margin-bottom: 0; }
.letter-sheet { background: var(--paper); border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); max-width: 760px; }
.letter-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: 0; padding: 8px 24px; border-bottom: var(--stroke-hair) solid var(--rule);
  font: 600 14px/24px var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.letter-body { padding: 24px; }
.letter-body p { font-size: 1.125rem; line-height: 1.65; }
.letter-body h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; margin: 40px 0 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.letter-body > p:first-child + h3 { margin-top: 24px; }
.letter-body ul, .letter-body ol { margin: 0 0 16px; padding-left: 24px; }
.letter-body li { font-size: 1.125rem; line-height: 1.6; margin-bottom: 12px; }
.letter-body li strong, .letter-body p strong { color: var(--ink); }
.letter-body .letter-mission { margin: 24px 0; padding: 4px 0 4px 24px; border-left: var(--w-open) solid var(--line); font-weight: 600; }
.signoff { margin-top: 32px; padding-top: 16px; border-top: var(--stroke-hair) solid var(--rule); }
.signoff p { margin: 0; font-size: 1rem; line-height: 1.5; }
.signoff .sig-name { font-weight: 600; font-size: 1.125rem; }
.signoff .sig-role { color: var(--soft); }
@media (min-width: 900px) {
  .letter { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
  .letter-person { position: sticky; top: 24px; }
  .letter-body { padding: 40px 48px 48px; }
  .letter-meta { padding: 8px 48px; }
}
@media (max-width: 899px) { .letter-person { max-width: 240px; } }
@media (max-width: 719px) { .letter-body { padding: 24px 16px; } .letter-meta { padding: 8px 16px; } }

/* ---------- The fork in the road (articles/fork-in-the-road.html): a visual doc, every rule scoped under main.fk ---------- */
/* A chapter rail (a title block, sticky from 1100 px; the same list sits in the page head below that), one idea per
   chapter, the site's own drawing grammar (svg.v), no section ids (ids stay on drawings only), no script. */
.fk .fk-toc { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: ft; display: grid; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.fk .fk-toc li { counter-increment: ft; border-top: var(--stroke-hair) solid var(--rule); min-width: 0; }
.fk .fk-toc li:first-child { border-top: 0; }
.fk .fk-toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 48px; padding: 12px 16px;
  color: var(--soft); text-decoration: none; font-size: 15px; line-height: 1.4; }
.fk .fk-toc a::before { content: counter(ft, decimal-leading-zero); font: 600 12px/1.7 var(--mono); letter-spacing: .08em; color: var(--faint); }
.fk .fk-toc a:hover { color: var(--ink); background: var(--sunk); }
@media (min-width: 720px) {
  .fk .fk-toc { grid-template-columns: 1fr 1fr; }
  .fk .fk-toc li:nth-child(2) { border-top: 0; }
  .fk .fk-toc li:nth-child(even) { border-left: var(--stroke-hair) solid var(--rule); }
}
.fk .fk-doc { display: grid; }
.fk .fk-doc > * { min-width: 0; }
.fk .fk-rail { display: none; }
@media (min-width: 1100px) {
  .fk .fk-head-toc { display: none; }
  .fk .fk-doc { grid-template-columns: 224px minmax(0, 1fr); gap: 56px; align-items: start; }
  .fk .fk-rail { display: block; position: sticky; top: 24px; }
  .fk .fk-rail .fk-toc { grid-template-columns: minmax(0, 1fr); margin: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .fk .fk-rail .fk-toc li:nth-child(2) { border-top: var(--stroke-hair) solid var(--rule); }
  .fk .fk-rail .fk-toc li:nth-child(even) { border-left: 0; }
  .fk .fk-rail .fk-toc a { min-height: 0; padding: 8px 16px; font-size: 14px; }
  .fk .fk-rail .label { margin: 0; padding: 8px 16px; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: none; border-bottom: 0; background: var(--paper); }
}
/* Chapters: a hair rule and generous air between them, the words at reading size. */
.fk .ch { padding: calc(8 * var(--unit)) 0; border-top: var(--stroke-hair) solid var(--edge); scroll-margin-top: 16px; }
.fk .ch:first-child { border-top: 0; padding-top: 0; }
.fk .ch:last-child { padding-bottom: 0; }
.fk .ch-words { max-width: 42em; }
.fk .ch-words p, .fk .ch-words li { font-size: 1.125rem; line-height: 1.7; }
.fk .ch h2 { font-size: clamp(1.875rem, 4.6vw, 2.75rem); max-width: 20ch; }
.fk .ch-words h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: calc(5 * var(--unit)) 0 calc(2 * var(--unit)); }
.fk .ch .goal { max-width: 30em; }
.fk .sowhat { max-width: 42em; border-left: var(--w-open) solid var(--line); padding: 4px 0 4px 20px; margin: 40px 0 0; font-weight: 600; font-size: 1.125rem; line-height: 1.55; }
.fk .sowhat span { display: block; font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.fk .fk-mission { margin: 24px 0; padding: 4px 0 4px 24px; border-left: var(--w-open) solid var(--line); font-weight: 600; font-size: 1.25rem; line-height: 1.55; max-width: 36em; }
.fk figure.dia { margin: 40px 0; }
.fk svg.v { max-width: 620px; }
.fk .plate figcaption { margin-top: 16px; padding-top: 12px; border-top: var(--stroke-hair) solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--soft); }
/* The three forks: title block cards, one per wave. */
.fk .forks { margin-top: 40px; }
.fk .forks .card h3 { font-size: 1.375rem; margin: 0 0 8px; }
.fk .forks dl { margin: 8px 0 12px; border-top: var(--stroke-hair) solid var(--rule); }
.fk .forks dl > div { padding: 8px 0; border-bottom: var(--stroke-hair) solid var(--rule); }
.fk .forks dt { font: 600 14px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.fk .forks dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.fk .forks .src { margin: 0; font-size: 13px; line-height: 1.5; color: var(--faint); }
.fk .forks .src a { color: var(--soft); }
@media (min-width: 900px) {
  .fk .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fk .grid-3 > .card { border-top: 0; }
  .fk .grid-3 > .card + .card { border-left: var(--stroke-hair) solid var(--rule); }
}
.fk .fk-links { margin: 32px 0 0; padding: 0; list-style: none; border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); max-width: 42em; }
.fk .fk-links li { border-top: var(--stroke-hair) solid var(--rule); }
.fk .fk-links li:first-child { border-top: 0; }
.fk .fk-links a { display: block; padding: 16px 24px; text-decoration: none; color: var(--ink); }
.fk .fk-links a:hover { background: var(--sunk); }
.fk .fk-links b { display: block; font-weight: 600; }
.fk .fk-links span { display: block; color: var(--soft); font-size: 15px; }
.fk .calls { margin-top: 32px; }
.fk .ch-words .sources li { font-size: 15px; line-height: 1.6; color: var(--soft); }
@media (max-width: 719px) { .fk .ch { padding: calc(6 * var(--unit)) 0; } .fk .fk-links a { padding: 16px; } }

/* ---------- Not found ---------- */
.lost { padding: calc(12 * var(--unit)) 0; text-align: center; }
.lost svg { width: 160px; height: auto; margin: 0 auto 24px; display: block; }
.mk-adapt { stroke: url(#metal-paper); }
/* Unused while light is the default; restore with dark:
   @media (prefers-color-scheme: dark) { .mk-adapt { stroke: url(#metal-graphite); } } */
:root[data-theme="dark"] .mk-adapt { stroke: url(#metal-graphite); }

/* ---------- Footer: the sheet's own title block ---------- */
.site-foot { padding: calc(6 * var(--unit)) 0 calc(7 * var(--unit)); font-size: 15px; color: var(--soft); }
.foot-tb { border: var(--stroke-hair) solid var(--frame); border-radius: var(--radius-card); box-shadow: var(--shadow); background: var(--paper); }
.foot-grid { display: grid; }
.foot-grid > * { padding: 24px; border-top: var(--stroke-hair) solid var(--rule); min-width: 0; }
.foot-grid > *:first-child { border-top: 0; }
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-grid > * { border-top: 0; border-left: var(--stroke-hair) solid var(--rule); }
  .foot-grid > *:first-child { border-left: 0; }
}
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; }
.site-foot ul a { display: inline-flex; align-items: center; min-height: 40px; color: var(--soft); }
.site-foot a:hover { color: var(--ink); }
.site-foot .brand { margin-bottom: 8px; }
.site-foot .label { margin-bottom: 8px; }
.site-foot p:last-child { margin-bottom: 0; }
.foot-fine { margin: 0; padding: 16px 24px; border-top: var(--stroke-hair) solid var(--rule); font: 400 13px/1.6 var(--sans); color: var(--faint); }

/* ---------- Phones ---------- */
@media (max-width: 979px) {
  .site-foot ul a { min-height: 48px; }
  .repo h3 a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 719px) {
  .section { padding: calc(7 * var(--unit)) 0; }
  .ages-band { padding: calc(7 * var(--unit)) 0 calc(8 * var(--unit)); }
  .hero { padding: calc(6 * var(--unit)) 0 calc(7 * var(--unit)); }
  .page-head { padding: calc(5 * var(--unit)) 0 calc(4 * var(--unit)); }
  .section-head { margin-bottom: calc(4 * var(--unit)); }
  .duo { gap: calc(4 * var(--unit)); }
  /* A 400 unit drawing keeps a 396 px floor (about 11 px for its smallest words), runs to the screen edges, and
     scrolls sideways inside its own plate when the screen is narrower: the live site's phone rule. */
  figure.dia { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; padding: 40px 0 16px; }
  figure.dia > .id { left: 0; border-radius: 0 0 var(--radius-sm) 0; }
  figure.dia .dia-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--gutter); }
  figure.dia .dia-scroll > svg.v { min-width: 396px; max-width: 560px; }
  .figure.dia { margin: 32px calc(-1 * var(--gutter)); }
  .tb-cell, .grid > .card, .principle, .provider-group, .repo { padding: 16px 16px 24px; }
  .status li { padding: 16px; }
  .card, .person { padding: 16px; }
  .person-fig > .id { top: -17px; left: -17px; }
  .foot-grid > * { padding: 16px; }
  .foot-fine { padding: 16px; }
  .hero-mark { max-width: 320px; }
  .page-head .byline { margin: 16px -16px -24px; padding: 8px 16px; }
  .steward, .sovereign .goal { padding-left: 16px; }
}
/* Where the drawing is wider than the screen, say so on the plate's top edge. */
@media (max-width: 427px) {
  figure.dia::after { content: "Swipe to see the whole drawing \2192"; position: absolute; top: 4px; right: var(--gutter);
    font: 600 14px/24px var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
}
@media (max-width: 479px) {
  .actions > .btn { flex: 1 1 100%; }
  .call .btn { align-self: stretch; }
}
@media print {
  .site-nav, .skip, .actions, .head-row > .btn, .theme-switch { display: none; }
  .night, .page-head, .lost, .section { background-image: none; }
}

/* Fork article hook: the kicker under the title and "the argument in one minute" (Andrew, 16 October). */
main.fk .fk-kicker, .fk-kicker { font-size: 1.5rem; line-height: 1.3; font-weight: 600; margin: 0 0 16px; color: var(--ink); max-width: 30em; }
.fk-minute { border: var(--stroke-strong, 1.5px) solid var(--line, var(--ink)); background: var(--paper, var(--surface)); padding: 16px 24px; margin: 24px 0 16px; max-width: 46em; }
.fk-minute-head { font: 600 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); margin: 0 0 8px; }
.fk-minute ul { margin: 0; padding-left: 20px; }
.fk-minute li { margin-bottom: 8px; line-height: 1.55; }
.fk-minute li:last-child { margin-bottom: 0; }

/* ---------- Friendlier pass (16 October 2026) ---------- */
/* Rounded sheets clip their own rows, so a row's hover ground stays inside the corner. */
.grid, .status, .principles, .repo-list, .questions, .ledger, .provider-groups, .foot-tb, .fk .fk-toc, .fk .fk-links,
.pc .pc-five, .pc .reasons, .pc .check, .pc .pc-ledger, .pc .gl, .letter-sheet { overflow: hidden; }
:root[data-theme="dark"] .hero-mark .hm-loop { stroke: url(#metal-graphite); }
:root[data-theme="dark"] .hero-mark .hm-shadow { stroke: #000; opacity: .5; }
/* The ages ground line in a softer ink. */
.stair::after { border-top-color: var(--frame); }
/* Cards that are links lift a little on hover. */
a.card { transition: background-color .15s ease, box-shadow .15s ease; }
a.card:hover { box-shadow: 0 2px 4px rgb(74 52 24 / 0.06), 0 10px 28px rgb(74 52 24 / 0.10); }