/* design/site/method.css
 *
 * The method pages' own layer: the reading column with its Tufte margin, the figures, the end matter. On top of
 * tokens.css and site/site.css. Ported from tools/method_page_style.py (the second design of 2026-10-01), with every
 * component the site shares (buttons, lists, tiles, the scale, tables, callouts, the map, the frame) taken from
 * site.css; this file only sets the variables they read inside the reading column (.doc) and draws what only a
 * method page has. The grammar: docs/2026-10-01-method-page-grammar.md.
 */

/* the reading column as approved (pages/method-*.html, 2026-10-01): at 1280 the column was 704px beside the review
   notes, so the prose ran about 460px, near 60 characters, with the source notes in a 200px margin. Without the
   notes column the site keeps that column width rather than spreading to the frame's 860px */
:root { --read: 1.125rem; --lh: 1.66; --side: 200px; --sgap: var(--space-40); --fig: 52px; --col: var(--col-read); }
@media (min-width: 1600px) { :root { --side: 236px; --sgap: var(--space-48); } }
@media (min-width: 1920px) { :root { --side: 264px; --sgap: var(--space-56); --read: 1.1875rem; } }

.doc { --chapter-gap: var(--space-120); --section-gap: var(--space-80); --list-gap: var(--space-20); --list-fs: var(--read); --prose: calc(100% - var(--side) - var(--sgap)); font-optical-sizing: auto; }
.doc .cell { --prose: calc(100% - var(--side) - var(--sgap)); }
.sec-intro { padding-top: var(--space-32); }
.doc .ch-h + .sec { padding-top: var(--space-16); }

/* ==== the title, the lead, the drawn contents ==== */
.intro h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 1.5rem + 2.9vw, 4.25rem); line-height: .98; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
.intro .lead { margin-top: var(--space-28); font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); line-height: 1.42; max-width: var(--prose); text-wrap: pretty; }
.intro + .prose, .opening { margin-top: var(--space-28); }
.doc .intro + .prose { max-width: none; }
.doc .intro + .prose > p { color: var(--ink); }
.doc .prose > p { max-width: var(--prose); font-size: var(--read); line-height: var(--lh); color: var(--ink-dim); }
.opening > p:first-child { color: var(--ink); }

/* the contents, as a book has them (operator, 2026-10-14: the four-step strip "looks hideous and not like a toc"):
   a ruled block, the page's parts by name in a narrow column, beside each its chapters in the sans and every
   subheading in the reading face. Reading the headings in order gives you the argument */
.toc { margin-top: var(--space-56); padding-top: var(--space-20); border-top: var(--rule) solid var(--ink); max-width: min(100%, var(--prose-w)); }   /* the body text width (the operator, 2026-10-15) */
.toc-h { margin: 0 0 var(--space-6); font: 800 var(--text-title)/1.2 var(--font-display); letter-spacing: -.01em; }
.toc-g { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: var(--space-28); padding: var(--space-20) 0; border-top: var(--hair) solid var(--line); }
.toc-h + .toc-g { border-top: 0; padding-top: var(--space-10); }
.toc-part { margin: var(--space-px) 0 0; font: 600 .9375rem/1.35 var(--font-display); color: var(--ink-dim); }
.toc-chs { grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); }
.toc-subs { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.toc-ch { display: block; font: 700 1.0625rem/1.3 var(--font-display); color: var(--ink); text-decoration: none; text-wrap: balance; }
.toc-subs a { display: block; padding: var(--space-4) 0; font-family: var(--font-body); font-size: .9375rem; line-height: 1.45; color: var(--ink-dim); text-decoration: none; }
.toc-ch:hover, .toc-subs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ==== the reading column ==== */
.doc .cell > p, .doc .cell > .list, .doc .cell > .rm-line, .doc .cell > .sn-b { max-width: var(--prose); }
.doc .cell > p { font-size: var(--read); line-height: var(--lh); text-wrap: pretty; hanging-punctuation: first; }
.doc .cell > p + p, .doc .cell > .sn-b + p { margin-top: .95em; }
.doc .cell > p b, .doc .prose b { font-weight: 600; }
.doc .h2 { position: relative; line-height: 1.08; letter-spacing: -0.032em; max-width: 30ch; }
.doc .h3 { position: relative; font-size: var(--text-title); line-height: 1.22; letter-spacing: -0.016em; max-width: var(--prose); }
.doc .cell > .list { margin-top: 1.3em; }
.num { position: absolute; right: calc(100% + 18px); top: .62em; font-family: var(--font-mono); font-weight: 500; font-size: .875rem; line-height: 1; letter-spacing: 0; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc .h3 .num { top: .5em; font-size: .8125rem; }
.opener .num { position: static; display: inline-block; margin-right: .6em; vertical-align: .32em; font-size: .8125rem; }
.rm-line { display: flex; gap: var(--space-10); margin-top: var(--space-32); font-family: var(--font-display); font-weight: 500; font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.rm-line .ic { margin-top: var(--space-2); }
.rm-k { font-weight: 700; color: var(--ink); }
.rm-line a { font-weight: 600; color: var(--ink); }
.h3-fam .tiles { margin-right: var(--space-12); vertical-align: 3px; }

/* ==== the margin: numbered sources level with their sentence (sections U), and small drawings ==== */
.fn { font: 600 .66em/0 var(--font-mono); vertical-align: super; margin-left: var(--space-px); }
.fn a { color: var(--action); text-decoration: none; padding: 0 var(--space-px); border-radius: var(--r-sm); }
.fn a:hover { background: var(--action-tint-deep); }
.sn, .mfig { float: right; clear: right; width: var(--side); margin: .35em calc(-1 * (var(--side) + var(--sgap))) 1.4em 0; position: relative; }
.sn { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--space-10); font-family: var(--font-body); font-size: .8125rem; line-height: 1.5; color: var(--ink-dim); text-wrap: pretty; }
.sn-k { justify-self: start; min-width: 20px; height: 20px; padding: 0 var(--space-4); margin-top: var(--space-px); border-radius: var(--r-pill); background: var(--action); color: var(--on-action); display: grid; place-items: center; font: 600 .75rem/1 var(--font-mono); }
.sn-c { color: var(--ink); }
.sn a, .sn-p a { color: inherit; overflow-wrap: anywhere; }
.sn.folded .sn-r, .sn-p.folded .sn-r { display: none; }
.sn-more { display: inline; margin-left: var(--space-4); padding: var(--space-4) 0; border: 0; background: none; font: 600 .8125rem/1.5 var(--font-display); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .18em; cursor: pointer; }
.sn-b { display: none; }
.sn-p { grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-10); padding: var(--space-12) var(--space-14); border-radius: var(--r-lg); background: var(--stone); font-size: .8125rem; line-height: 1.5; color: var(--ink-dim); }
.mfig .dplate { width: 100%; max-width: 172px; aspect-ratio: 1; height: auto; background: var(--t); }
.mfig img { width: 76%; height: auto; }

/* ==== figures: full width, the page's only set pieces ==== */
.doc .fig, .doc .tbl { clear: both; margin: var(--fig) 0; }
.doc .cell > :first-child.fig, .doc .cell > :first-child.tbl { margin-top: var(--space-8); }
.doc .callout { clear: both; }
.opener { margin: 0 0 var(--space-40); padding: var(--space-32) 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--hair) solid var(--line); }
.opener .h3 { margin: 0 0 var(--space-4); max-width: none; text-align: center; font-size: clamp(1.375rem, 1.15rem + .5vw, 1.625rem); letter-spacing: -0.02em; }
.opener-h2 { margin: var(--space-36) 0 var(--space-48); padding: var(--space-28) 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--hair) solid var(--line); }

/* worked examples, placed on the scale (sections S) */
table.dots { width: 100%; border-collapse: collapse; border-bottom: var(--rule) solid var(--ink); }
.dots thead td, .dots thead th { padding: 0 0 var(--space-12); border-bottom: var(--hair) solid var(--ink); vertical-align: bottom; }
.dt-ends { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); }
.dt-ends > span { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.dt-ends > span:last-child { flex-direction: column-reverse; align-items: flex-end; }
.dt-ends img { width: 40px; height: 40px; }
.dt-ends b { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.dots tbody td { padding: var(--space-16) var(--space-28) var(--space-16) 0; border-top: var(--hair) solid var(--line); vertical-align: middle; }
.dots tbody tr:first-child td { border-top: 0; padding-top: var(--space-20); }
.dots td:last-child { padding-right: 0; }
.dt-case { width: 35%; font-size: .9375rem; line-height: 1.45; }
.dt-trk { width: 32%; }
.dt-v { font-size: .9375rem; line-height: 1.45; color: var(--ink-dim); }
.dt-v b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.dt-v.cont b { display: inline; }

/* tables of the method pages: the booktabs table's own cases */
table.compare th:first-child, table.compare td:first-child { padding-left: var(--space-14); }
table.compare td:last-child { padding-right: var(--space-14); }
table.compare tr.own > * { background: var(--stone); font-weight: 600; }
table.compare tr.own th { font-weight: 800; }
.doc .def:not(table) { max-width: var(--prose); }
table.def { max-width: none; }
table.def tbody th { width: 9.5em; font-size: 1.0625rem; vertical-align: middle; }
table.def thead th:first-child { width: 9.5em; }
table.def thead th:nth-child(2), table.def .lt-k { width: 64px; vertical-align: middle; }
table.def td:last-child { font-size: 1rem; vertical-align: middle; }
table.code .te { display: inline-flex; align-items: center; gap: var(--space-8); }
table.code .te > span { font-family: var(--font-display); font-weight: 500; font-size: .8125rem; color: var(--ink-dim); }
table.typetab th[scope="row"] { width: 31%; }
.ty-c { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.ty-c img { width: 72px; }
.ty-n { display: block; margin-bottom: var(--space-6); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--ink); }
.ty-short { width: 25%; font-family: var(--font-display); font-weight: 600; }
.ty-why { color: var(--ink-dim); }
table.typetab tbody td { vertical-align: middle; }
.lbl { display: none; }
table.typetab tr:target > * { background: var(--action-tint); }
table.words tbody th { width: 19%; }
table.words td:nth-child(2) { width: 37%; }
.wd { font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.wd::before { content: "\201C"; } .wd::after { content: "\201D"; }
.w-types { line-height: 2.1 !important; color: var(--ink-dim); }
.tchip { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-2) 0; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 600; font-size: .875rem; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; vertical-align: middle; }
.tchip:hover span:not(.tiles) { text-decoration: underline; text-underline-offset: .2em; }

/* ==== gains and costs: per end, the one list style, the source's pairs level ==== */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-56); }
.lg-end { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows); align-content: start; min-width: 0; }
.lg-head { display: flex; align-items: center; gap: var(--space-12); margin: 0; padding-bottom: var(--space-14); border-bottom: var(--rule) solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.012em; }
.lg-g { margin: var(--space-24) 0 var(--space-8); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; color: var(--ink); }
.lg-i { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-14); align-items: start; padding: var(--space-8) 0 var(--space-14); }
.lg-t { display: block; font-size: .9375rem; line-height: 1.55; color: var(--ink-dim); }

/* ==== the stages of skill, as a staircase (sections T) ==== */
.stairs { position: relative; padding-top: var(--space-120); }
.st-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.st { display: flex; flex-direction: column; padding-top: calc((4 - var(--i)) * var(--space-56)); }
.st-b { position: relative; flex: 1; width: 100%; padding: var(--space-20) var(--space-16) var(--space-24); border-radius: var(--r-lg) var(--r-lg) 0 0; background: color-mix(in srgb, var(--c) var(--t), var(--white)); display: grid; gap: var(--space-8); align-content: start; }
.st-n { font: 600 .75rem/1 var(--font-mono); color: var(--ink-dim); }
.st-h { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.st-w { font-size: .875rem; line-height: 1.45; }
.st-k { padding-top: var(--space-8); border-top: var(--hair) solid color-mix(in srgb, var(--c) 30%, transparent); font-style: italic; font-size: .875rem; line-height: 1.45; color: var(--ink-dim); }
.st-draw { position: absolute; bottom: 100%; left: 50%; width: 108px; margin-bottom: calc(-1 * var(--space-2)); transform: translateX(-50%); }
.st-draw img { width: 100%; }
.st-edge .st-b::before { content: ""; position: absolute; left: -4px; top: -56px; bottom: 0; border-left: 2px dashed var(--ink-dim); }
.st-e { position: absolute; left: -3px; top: -94px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); border-radius: var(--r-md); background: var(--white); }
.st-e b { font: 600 .75rem/1 var(--font-mono); color: var(--ink-dim); }
.st-key { position: absolute; left: 0; top: 0; width: 38%; display: grid; gap: var(--space-4); padding: var(--space-4) 0 0; }
.st-key span { line-height: 1.3; }
.st-kh { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.st-kw { font-size: .875rem; }
.st-kk { font-style: italic; font-size: .875rem; color: var(--ink-dim); }

/* ==== the code, taken apart (sections AB) ====
   the operator, 2026-10-15: the shield bigger, the letters stacked beside it ("this design needs some love"). The shield
   on the left, the five letters as one ruled list: the tile, the end with its aspect beside it, the quote under both.
   The .ap-box wrapper keeps the container query: below 640 the shield sits on top and the list runs under it */
.apart { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-40); align-items: center; padding: var(--space-36) var(--space-40); border-radius: var(--r-lg); background: var(--stone); }
.ap-arm { order: -1; justify-self: center; }
.ap-arm img { width: 200px; display: block; }
.ap-g { display: grid; gap: 0; }
.ap-c { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-12); row-gap: var(--space-2); padding: var(--space-14) 0; border-top: 1px solid var(--line-strong); }
.ap-c:first-child { border-top: 0; padding-top: 0; }
.ap-c:last-child { padding-bottom: 0; }
.ap-c .tiles { grid-row: 1 / span 2; align-self: center; --tile-w: 44px; --tile-h: 44px; --tile-r: var(--r-tile-l); --tile-fs: 1.25rem; }
.ap-c b { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.ap-a { grid-column: 3; font-family: var(--font-display); font-weight: 500; font-size: .8125rem; color: var(--ink-dim); }
.ap-c p { grid-column: 2 / -1; margin: 0; font-style: italic; font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.ap-c p::before { content: "\201C"; } .ap-c p::after { content: "\201D"; }
.ap-stem, .ap-dash { display: none; }
.ap-box { container-type: inline-size; }
@container (max-width: 640px) {
  .apart { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); padding: var(--space-28) var(--space-20); }
  .ap-arm img { width: 150px; }
  .ap-c { grid-template-columns: 40px minmax(0, 1fr); }
  .ap-c .tiles { grid-row: 1 / span 3; align-self: start; --tile-w: 40px; --tile-h: 40px; --tile-fs: 1.125rem; }
  .ap-a { grid-column: 2; }
}

/* ==== the traits page: together, and four people ==== */
.tog { display: grid; grid-template-columns: 200px 40px minmax(0, 1fr); column-gap: var(--space-12); align-items: stretch; padding: var(--space-28) 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--hair) solid var(--line); }
.tg-in { list-style: none; margin: 0; padding: 0; display: grid; align-content: space-around; gap: var(--space-14); }
.tg-in li { display: grid; gap: var(--space-px); }
.tg-k { font-family: var(--font-display); font-weight: 500; font-size: .8125rem; color: var(--ink-dim); }
.tg-in b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.tg-br { position: relative; margin: var(--space-12) 0; border: var(--rule) solid var(--ink-dim); border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.tg-br::after { content: ""; position: absolute; left: 100%; top: 50%; width: 14px; height: var(--rule); background: var(--ink-dim); }
.tg-sc { --endw: 88px; column-gap: var(--space-20); align-self: center; }
table.quad { border-collapse: separate; border-spacing: 8px; table-layout: fixed; margin: calc(-1 * var(--space-8)); width: calc(100% + 16px); }
.quad thead th { padding: 0 var(--space-20) var(--space-2); text-align: left; vertical-align: bottom; font-family: var(--font-display); font-weight: 600; font-size: .875rem; line-height: 1.3; color: var(--ink-dim); }
.quad thead td, .quad tbody th { width: 21%; }
.quad tbody th { padding-right: var(--space-10); text-align: left; vertical-align: middle; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.quad td { padding: var(--space-20) var(--space-20) var(--space-20); border-radius: var(--r-lg); vertical-align: top; font-size: .9375rem; line-height: 1.55; }
.q-agree { background: var(--stone); }
.q-mix { background: var(--paper); box-shadow: var(--ring-15) var(--ink); }

/* ==== the overview maps, in the B3 pattern ==== */
.glance { margin-top: var(--space-64); border-bottom: var(--rule) solid var(--ink); }
.gl-row { --endw: 96px; display: grid; grid-template-columns: var(--endw) minmax(0, 1fr) var(--endw); column-gap: var(--space-32); align-items: center; padding: var(--space-24) 0 var(--space-24); border-top: var(--hair) solid var(--line); }
.gl-key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) 0; padding: 0 0 var(--space-12); border-bottom: var(--rule) solid var(--ink); font-family: var(--font-display); font-weight: 600; font-size: .8125rem; line-height: 1.4; color: var(--ink-dim); }
.gl-key span + span::before { content: "\00B7"; margin: 0 var(--space-10); color: var(--line-strong); }
.gl-key + [role="list"] > .gl-row:first-child, [role="list"] > .gl-key + .gl-row { border-top: 0; }
.gl-name { padding-block: var(--space-8); margin-block: calc(-1 * var(--space-8)); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.gl-row.link:hover .gl-name { text-decoration: underline; text-decoration-color: var(--line-strong); }
.gl-q { margin-top: calc(-1 * var(--space-6)); font-family: var(--font-body); font-size: 1rem; line-height: 1.4; color: var(--ink-dim); }
.gl-asp { font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--ink-dim); margin-bottom: calc(-1 * var(--space-6)); }
.gl-tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-4); text-align: left; }
.gl-tr > span { display: grid; align-content: start; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.gl-tr > span:last-child { text-align: right; }
.gl-k { font-weight: 500; font-size: .8125rem; color: var(--ink-dim); }
.doc .sixteen { margin-top: var(--space-64); }

/* ==== 4.1: one type, two variants ==== */
.vars { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-rule), var(--ring-1) var(--line); }
.vr-h { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--space-6) var(--space-14); padding: var(--space-32) var(--space-24) var(--space-28); text-align: center; }
.vr-g { background: var(--paper); } .vr-o { background: var(--stone); }
.vr-p { width: 104px; height: 104px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--plate-light); }
.vr-p img { width: 86px; }
.vr-s img { width: 112px; }
.vr-who { grid-column: 1 / -1; margin-top: var(--space-12); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.012em; }
.vr-code { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: var(--space-10); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink-dim); }
.vr-or { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: var(--r-round); background: var(--charcoal); color: var(--stage-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; box-shadow: var(--halo-5) var(--white); z-index: 1; }

/* ==== the Why page: the four families ==== */
.two-safe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); max-width: 760px; }
.ts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.ts .shield { width: 110px; filter: var(--drop-shield); }
.aside-note { margin-top: var(--space-28); padding-left: var(--space-20); border-left: var(--rule) solid var(--line-strong); font-family: var(--font-display); font-weight: 500; font-size: 1rem !important; line-height: 1.5 !important; color: var(--ink-dim); max-width: var(--prose); }
.fams-fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-14); }

/* ==== the end of a method page: the scan, then the promise on charcoal ==== */
.sec-end { padding-top: var(--space-120); }
.end-scan { max-width: var(--col); margin-bottom: var(--space-28); padding: var(--space-32) 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--hair) solid var(--line); }
.ch-end .ch-h { padding-top: var(--space-120); }
.src { list-style: none; margin: 0; padding: var(--space-20) 0 0; display: grid; gap: var(--space-10); border-top: var(--rule) solid var(--ink); font-size: .875rem; line-height: 1.55; color: var(--ink-dim); }
.src li { display: grid; grid-template-columns: 34px minmax(0, 1fr); scroll-margin-top: 96px; }
.src li:target { color: var(--ink); }
.src-n { justify-self: start; min-width: 20px; height: 20px; padding: 0 var(--space-4); margin-top: var(--space-px); border-radius: var(--r-pill); background: var(--action); color: var(--on-action); display: grid; place-items: center; font: 600 .6875rem/1 var(--font-mono); }
.src p { overflow-wrap: anywhere; }
.src a { color: var(--ink); }
.fn-backs { white-space: nowrap; }
.fn-back sub { font: 600 .625rem/1 var(--font-mono); vertical-align: baseline; margin-left: var(--space-px); }
.fn-back { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: var(--space-2); border-radius: var(--r-sm); text-decoration: none; color: var(--ink-dim) !important; }
.fn-back:hover { background: var(--stone); color: var(--ink) !important; }
.doc .sec-tn { padding-top: var(--section-gap); }

/* the promise in the reading column stops at the body text's width, not out under the margin notes (the operator, 2026-10-15) */
:root { --prose-w: calc(var(--col) - var(--side) - var(--sgap)); }
.doc .pr { max-width: min(100%, var(--prose-w)); }   /* mid-page boxes at the text width; the end box runs the full column, like the sources above it (the operator, 2026-10-15) */
@media (max-width: 879px) { :root { --prose-w: min(68ch, 100%); } }

/* ==== the pager: read on (the operator, 2026-10-15). Next is a card, Previous a quiet line under it ==== */

/* ==== dark ==== */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dt-ends img { background: var(--plate-light); border-radius: var(--r-md); padding: var(--space-4); } :root:not([data-theme="light"]) .vr-or { background: var(--stage-ink); color: var(--charcoal); } }
:root[data-theme="dark"] .dt-ends img { background: var(--plate-light); border-radius: var(--r-md); padding: var(--space-4); }
:root[data-theme="dark"] .vr-or { background: var(--stage-ink); color: var(--charcoal); }
@media print {
  .sn.folded .sn-r { display: inline; }
  .sn-more { display: none !important; }
  .st-b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== widths ==== */
@media (max-width: 1100px) {
  .doc { --chapter-gap: var(--space-120); --section-gap: var(--space-72); }
  .num { position: static; display: inline-block; margin-right: .6em; vertical-align: .3em; }
}
@media (max-width: 879px) {
  :root { --side: 0px; --sgap: 0px; }
  .doc .cell { --prose: min(68ch, 100%); }
  .doc { --prose: min(68ch, 100%); }
  .sn { display: none; }
  .sn-b { display: grid; gap: var(--space-8); margin-top: var(--space-14); }
  .sn-p { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--space-10); padding: var(--space-12) var(--space-14); border-radius: var(--r-lg); background: var(--stone); border-top: 0; }
  .mfig { width: 112px; margin: var(--space-4) 0 var(--space-10) var(--space-20); }
  .opener .h3 { font-size: 1.375rem; }
}
@media (max-width: 760px) {
  :root { --read: 1.0625rem; --fig: 40px; }
  .doc { --chapter-gap: var(--space-96); --section-gap: var(--space-64); }
  .intro h1 { font-size: clamp(2.375rem, 1.2rem + 5.4vw, 2.75rem); }
  .doc .h3 { font-size: 1.25rem; }
  .ch-end .ch-h { padding-top: var(--space-96); }
  /* on a phone the contents is the parts and chapters only (1,478px with every subheading, 2026-10-14); the
     subheadings are all in the sticky bar, one tap away */
  .toc { margin-top: var(--space-40); padding-top: var(--space-14); }
  .toc-g { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); padding: var(--space-12) 0; }
  .toc-h + .toc-g { padding-top: var(--space-4); }
  .toc-chs { grid-column: auto; gap: 0; }
  .toc-ch { padding: var(--space-8) 0; font-size: 1.0625rem; }
  .toc-subs { display: none; }
  .opener { padding: var(--space-24) 0; --endw: 48px; grid-template-columns: var(--endw) minmax(0, 1fr) var(--endw); grid-template-areas: "h h h" "a t b" ". e ."; row-gap: var(--space-10); }
  .opener .sc-mid { display: contents; }
  .opener .h3 { grid-area: h; margin-bottom: var(--space-6); }
  .opener .sc-a { grid-area: a; } .opener .sc-b { grid-area: b; }
  .opener .trk { grid-area: t; align-self: center; }
  .opener .trk-e { grid-area: e; margin-top: calc(-1 * var(--space-2)); }
  .gl-row { --endw: 52px; column-gap: var(--space-12); padding: var(--space-20) 0 var(--space-20); }
  .gl-name { font-size: 1.1875rem; }
  .gl-q { font-size: .9375rem; }
  .gl-tr { grid-template-columns: 1fr; gap: var(--space-10); text-align: center; }
  .gl-tr > span:last-child { text-align: center; }
  table.dots, .dots tbody, .dots tr, .dots td, .dots thead th { display: block; width: auto !important; }
  .dots thead, .dots thead tr { display: block; }
  .dots thead td { display: none; }
  .dots thead th { padding: 0 0 var(--space-10); }
  .dots tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding: var(--space-14) 0 var(--space-16); border-top: var(--hair) solid var(--line); }
  .dots tbody tr:first-child { border-top: 0; }
  .dots tbody td { padding: 0 !important; border: 0 !important; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .lg-end { display: block; grid-row: auto !important; }
  .lg-end + .lg-end { margin-top: var(--space-48); }
  .stairs { padding-top: 0; }
  .st-l { grid-template-columns: 1fr; gap: var(--space-6); }
  .st { padding-top: 0; justify-items: start; }
  .st-b { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .st-0 .st-b { width: 76%; } .st-1 .st-b { width: 82%; } .st-2 .st-b { width: 88%; } .st-3 .st-b { width: 94%; } .st-4 .st-b { width: 100%; }
  .st-draw, .st-key, .st-edge .st-b::before { display: none; }
  .st-e { position: static; transform: none; margin: 0 0 var(--space-6); justify-self: start; background: none; padding: 0; }
  .tog { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); }
  .tg-br { display: none; }
  .tg-in { grid-template-columns: 1fr 1fr; }
  table.quad, .quad tbody, .quad tr, .quad tbody th, .quad td { display: block; width: auto !important; margin: 0; }
  .quad thead { display: none; }
  .quad tbody th { padding: var(--space-20) 0 var(--space-8); }
  .quad td { margin-top: var(--space-8); }
  .quad td::before { content: attr(data-label); display: block; margin-bottom: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: .8125rem; color: var(--ink-dim); }
  .mfig { float: none; width: 104px; margin: 0 0 var(--space-14); }
  table.typetab, table.typetab tbody, table.typetab tr, table.typetab th, table.typetab td { display: block; width: auto !important; }
  table.typetab thead { display: none; }
  table.typetab tbody tr { padding: var(--space-20) 0; border-top: var(--hair) solid var(--line); }
  table.typetab tbody tr:first-child { border-top: 0; }
  table.typetab tbody th, table.typetab tbody td { padding: 0 !important; border: 0 !important; }
  table.typetab td { margin-top: var(--space-12); }
  .lbl { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .8125rem; color: var(--ink-dim); }
  .vars { grid-template-columns: minmax(0, 1fr); }
  .vr-h { padding: var(--space-28) var(--space-16) var(--space-36); }
  .vr-o { padding-top: var(--space-40); }
  table.words, table.words tbody, table.words tr, table.words th, table.words td { display: block; width: auto !important; }
  table.words thead { display: none; }
  table.words tbody tr { padding: var(--space-16) 0; border-top: var(--hair) solid var(--line); }
  table.words tbody tr:first-child { border-top: 0; }
  table.words tbody th, table.words tbody td { padding: 0 !important; border: 0 !important; }
  table.words td { margin-top: var(--space-6); }
  table.compare th:first-child, table.compare td:first-child { padding-left: var(--space-10); }
  table.def tbody th, table.def thead th:first-child { width: 7em; }
  .fams-fig { grid-template-columns: minmax(0, 1fr); }
  .two-safe { grid-template-columns: minmax(0, 1fr); }
  .end-scan { padding: var(--space-24) 0; }
  .sec-end { padding-top: var(--space-96); }
}
@media (max-width: 560px) {
  .gl-row { grid-template-columns: minmax(0, 1fr); }
  .gl-row > .sc-end { display: none; }
  .tg-in { grid-template-columns: 1fr; }
  .end-scan { justify-items: stretch; }
  .end-scan .btn { width: 100%; justify-content: center; }
  .end-scan .scan-note { text-align: center; }
}

/* Read more as the menu's cards, smaller than the Next card above (the operator, 2026-10-15) */
.rm-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-12); max-width: var(--prose-w, 40rem); }
.rm-card { padding: var(--space-10) var(--space-10) var(--space-14); border: var(--hair) solid var(--line); }
.rm-card .mcard-art { height: 76px; margin-bottom: var(--space-2); }
.rm-card .mcard-art img { height: 52px; }
.rm-card b { font-size: 1rem; }
.rm-card .mcard-l { font-size: .875rem; }
@media (max-width: 560px) {
  .rm-cards { grid-template-columns: 1fr; gap: var(--space-8); }
  .rm-card { grid-template-columns: 92px 1fr; column-gap: var(--space-12); row-gap: var(--space-2); align-items: center; }
  .rm-card .mcard-art { grid-row: span 2; height: 64px; margin: 0; overflow: hidden; }
  .rm-card .mcard-art img { height: 40px; }
}

/* the Next card wears the next page's menu drawing (the operator, 2026-10-15) */

/* the call to the scan in a method page's text (the call itself is site.css's) */
.doc .scan-call { margin: var(--space-36) 0 var(--space-48); }

/* the four families from robustness to antifragility, the families map turned a quarter (the operator, 2026-10-15): a file */
.dia-fig { margin: var(--space-28) 0 var(--space-32); max-width: min(100%, var(--prose-w)); }


/* a reading page's rhythm (the operator, 2026-10-15: "on laptop ... just too much above the headings"). The site-wide
   gaps (72 above a subsection, 96 above a chapter) were set for the type pages and home's sections; a method page is
   continuous reading, so a subsection heading sits about two lines below the text before it */
.doc { --section-gap: var(--space-48); --chapter-gap: var(--space-80); }
.doc .ch-h + .sec { padding-top: var(--space-28); }
.doc .sec-tn { padding-top: var(--space-72); }
@media (max-width: 1100px) { .doc { --section-gap: var(--space-40); --chapter-gap: var(--space-72); } }   /* 44 before the scale of 2026-10-15; 40 keeps the step below the laptop's 48 */
@media (max-width: 700px) { .doc { --section-gap: var(--space-36); --chapter-gap: var(--space-56); } .doc .ch-h + .sec { padding-top: var(--space-20); } .doc .sec-tn { padding-top: var(--space-56); } }
/* a chapter with no lead of its own renders an empty section under its heading; it takes no space, and the first
   subsection sits close under the chapter heading */
.doc .sec:has(> .cell:empty) { display: none; }
.doc .ch-h + .sec:has(> .cell:empty) + .sec { padding-top: var(--space-28); }
@media (max-width: 700px) { .doc .ch-h + .sec:has(> .cell:empty) + .sec { padding-top: var(--space-28); } }

/* the contents, closed by default, on a tinted bar that reads as a control (the operator, 2026-10-15: "yes, do this";
   a click, never hover, so the page does not jump and a phone works the same way) */
.toc { border-top: 0; padding-top: 0; }
.toc-s { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-16); padding: var(--space-14) var(--space-20); border-radius: var(--r-md);
  background: var(--stone); cursor: pointer; list-style: none; transition: box-shadow var(--dur-fast) var(--ease-out); }
.toc-s::-webkit-details-marker { display: none; }
.toc-s .toc-h { margin: 0; }
.toc-sum { font: 500 .875rem/1.4 var(--font-display); color: var(--ink-dim); }
.toc-act { display: inline-flex; align-items: center; gap: var(--space-10); font: 600 .875rem/1 var(--font-display); color: var(--ink); }
.toc-act .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease-out); }
.toc-hide { display: none; }
.toc-d[open] .toc-show { display: none; }
.toc-d[open] .toc-hide { display: inline; }
.toc-d[open] .toc-act .chev { transform: rotate(225deg) translate(-2px, -2px); }
.toc-s:hover { box-shadow: var(--ring-15) var(--line-strong); }
.toc-s:hover .toc-act { text-decoration: underline; text-underline-offset: 3px; }
.toc-s:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.toc-d[open] .toc-s { margin-bottom: var(--space-8); }
@media (prefers-reduced-motion: reduce) { .toc-s, .toc-act .chev { transition: none; } }
@media (max-width: 700px) { .toc-s { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-4); padding: var(--space-12) var(--space-14); } .toc-sum { grid-column: 1 / -1; grid-row: 2; } .toc-act { grid-column: 2; grid-row: 1; } }

/* a numbered list inside a reading page's prose reads as prose: the body's size and ink, with the paragraph's space
   around it (the operator, 2026-10-15, on How careers differ's three tests: "Is this a different font size it looks odd") */
.doc .cell > .list-num { margin-block: var(--space-20); --list-gap: var(--space-12); }
.doc .cell > .list-num p { color: var(--ink); font-size: var(--read); line-height: var(--lh); }