/* Generated by build/tokens.mjs from design/tokens.json. Do not edit. */
:root {
  --c-aubergine: #2E1A2F;
  --c-aubergine-deep: #1F1122;
  --c-periwinkle: #9A9CC8;
  --c-periwinkle-light: #C9CBE6;
  --c-moss: #868554;
  --c-olive: #5F6338;
  --c-coral: #D9625A;
  --c-brick: #B8483F;
  --c-mustard: #E0A63A;
  --c-marigold: #F0BE55;
  --c-pink: #C98E9A;
  --c-lilac: #B29BC7;
  --c-cream: #F3E3D9;
  --c-paper: #F8F0E8;
  --c-ink: #241826;
  --c-ink-soft: #4E4252;
  --c-muted: #635868;
  --c-rule: #DED3CF;
  --maturity-1: #EEEBF6;
  --maturity-2: #C9CBE6;
  --maturity-3: #9A9CC8;
  --maturity-4: #5F5A8E;
  --maturity-5: #2E1A2F;
  --cat-1: #5B63C9;
  --cat-2: #C8412D;
  --cat-3: #0A9086;
  --cat-4: #7A4FA8;
  --cat-5: #B57A10;
  --cat-6: #B84A7E;
  --cat-dark-1: #6A72D2;
  --cat-dark-2: #D65A44;
  --cat-dark-3: #1E9B90;
  --cat-dark-4: #8E6EC4;
  --cat-dark-5: #B8841A;
  --cat-dark-6: #C65E93;
  --link: #A93E36;
  --link-dark: #F0937F;
  --focus-ring: #B8483F;
  --font-display: "Literata", Georgia, serif;
  --font-text: "Literata", Georgia, serif;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --fs-display-xl: clamp(3rem, 0.5rem + 4.5vw, 4.75rem);
  --fs-display: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  --fs-numeral: clamp(4.5rem, 3rem + 5vw, 7rem);
  --fs-h1: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1vw, 1.875rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-lede: 1.375rem;
  --fs-body: 1.125rem;
  --fs-callout: 1rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.5556;
  --lh-caption: 1.4;
  --measure-prose: 38rem;
  --measure-medium: 52rem;
  --measure-wide: 72rem;
  --measure-xwide: 90rem;
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-section: clamp(4rem, 8vw, 9rem);
  --space-inset-panel: 0.75rem 1rem;
  --space-inset-figure: 1rem 1.25rem;
  --space-inset-chip: 0.125rem 0.5rem;
  --space-stack-para: 0;
  --space-stack-subhead: 0.75rem;
  --space-stack-block: 1.5rem;
  --space-stack-heading: 2rem;
  --space-inline-numeral: 0.25rem;
  --space-gap-columns: 2rem;
  --space-gap-grid: 0.5rem;
  --space-stack-figure-title: 1rem;
  --space-stack-figure-note: 1rem;
}
@media (max-width: 51.25rem) {
  :root {
    --fs-display-xl: 2.625rem;
    --fs-display: 2.25rem;
    --fs-numeral: 3.5rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-lede: 1.25rem;
    --fs-body: 1.0625rem;
    --fs-callout: 1rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;
    --lh-body: 1.53;
  }
}

/* Meet the menders — site stylesheet, built to design/design-system.md (finalised 15 September 2026).
   Tokens come from tokens.css (generated from design/tokens.json). One ink; structure is carried by numerals, eyebrows
   and openers, not by part colours. Every vertical gap is a step of the 4 px web scale (--space-*).
   Breakpoints (GridWeb board): 68.75rem = 1100 px, the grid narrows and the aside stacks; 51.25rem = 820 px, the rail
   collapses and everything is one column. Checked at 375 and 390 px. */
/* self-hosted fonts */
@font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* end fonts */

:root {
  --gutter: clamp(20px, 5vw, 72px);
  --rail: 56px;
  --numeral: var(--maturity-4);            /* periwinkle step 4: 5.6:1 on paper; periwinkle itself is 2.3:1 */
  /* every text size is a rung of the ladder in design/tokens.json (ten roles, a desktop and a phone value each; 19 September 2026); these are aliases kept for the older names */
  --fs-ui: var(--fs-small);
  --fs-eyebrow: var(--fs-label);
  --fs-fig: var(--fs-small); --lh-fig: 1.4667;
  --fs-insight: var(--fs-lede); --lh-insight: 1.3636;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: calc(var(--rail) + var(--space-lg)); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--c-paper); color: var(--c-ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-variation-settings: "opsz" 12; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture { max-width: 100%; display: block; }
img { height: auto; }
/* One heading scale by role (18 September): page titles (chapter, Part opener, entry name, category head) at --fs-h1; section heads --fs-h2; sub-heads --fs-h3; minor heads at body size. Numerals keep their own sizes. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
h2 { font-size: var(--fs-h2); line-height: 1.15; font-variation-settings: "opsz" 24; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; font-variation-settings: "opsz" 18; }
h4 { font-size: var(--fs-body); line-height: 1.35; font-weight: 600; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-paper); border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, .strip-val, .mx-val, .mx-ov { font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-ui); color: var(--c-ink-soft); font-size: 0.875em; }
.label, .plabel { font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.25; color: var(--c-ink-soft); font-weight: 600; }
.plabel { margin-bottom: var(--space-xs); }
.eyebrow { font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.25; color: var(--c-ink-soft); font-weight: 600; }
.eyebrow a { color: inherit; text-decoration: none; }
@media (hover: hover) { .eyebrow a:hover { text-decoration: underline; } }
.numeral { font-family: var(--font-display); color: var(--numeral); font-variation-settings: "opsz" 72; line-height: 1; font-weight: 400; }
.skip { position: absolute; inset-inline-start: var(--gutter); top: -100px; z-index: 30; background: var(--c-aubergine); color: var(--c-cream); padding: var(--space-md) var(--space-lg); font-family: var(--font-ui); font-size: var(--fs-ui); text-decoration: none; }
.skip:focus-visible { top: var(--space-sm); }
main:focus { outline: none; }
main:focus-visible { outline: none; }

/* ---- the header: sticky, 56 px, the title and the PDF; on small screens the PDF gives way to the Contents menu (the sidebar's tree) */
.rail { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: var(--rail); padding: 0 var(--gutter); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--c-rule); background: var(--c-paper); }
.brand { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); color: var(--c-ink); text-decoration: none; white-space: nowrap; padding: var(--space-sm) 0; }
.rail-end { display: flex; align-items: center; gap: var(--space-md); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-lg); border: 1px solid var(--c-ink); border-radius: 2px; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink); text-decoration: none; background: transparent; cursor: pointer; }
.btn.solid { background: var(--c-aubergine); color: var(--c-cream); border-color: var(--c-aubergine); }
.rail-pdf { min-height: 40px; }
@media (hover: hover) { .btn:hover { background: var(--c-cream); } .btn.solid:hover { background: var(--c-aubergine-deep); } }
.mobile-nav { display: none; }

/* ---- the thread: a 2 px coral progress rail on the left, wide screens only */
.thread { position: fixed; inset-inline-start: calc(var(--gutter) / 2 - 1px); top: calc(var(--rail) + var(--space-lg)); bottom: var(--space-xl); width: 2px; background: var(--c-rule); z-index: 5; pointer-events: none; }
.thread i { position: absolute; inset-inline-start: 0; top: 0; width: 2px; height: 0; background: var(--c-coral); }

/* ---- page frame and the chapter grid: prose at 38 rem, an aside beside it, a wide track for figures */
.page { max-width: 88rem; margin-inline: auto; padding: var(--space-3xl) var(--gutter) 3.5rem; }
.page > * + * { margin-top: var(--space-section); }
/* the prose track is fixed at its measure so that, when the window tightens above 1100 px, the aside gives way first (audit, 19 September: it used to squeeze the prose to 60 characters between 1101 and 1209 px) */
.chapter { display: grid; grid-template-columns: minmax(0, 6rem) var(--measure-prose) minmax(12rem, 20rem); grid-template-rows: auto auto; column-gap: var(--space-2xl); row-gap: var(--space-3xl); align-items: start; }
.chapter.no-head { grid-template-rows: auto; }
.chapter-foot { margin-inline-start: calc(6rem + var(--space-2xl)); max-width: var(--measure-prose); }
.page > .chapter + .chapter-foot { margin-top: var(--space-4xl); }
.chapter > * { grid-column: 2; min-width: 0; }
/* the aside sticks under the rail while it fits the window; when it is taller than the window the script marks it .is-tall and it flows with the page instead of becoming a second scroller (author's note, 18 September) */
.chapter > .side { grid-column: 3; grid-row: 1 / -1; align-self: start; position: sticky; top: calc(var(--rail) + var(--space-xl)); padding-inline-start: var(--space-2xl); padding-block-end: var(--space-xl); min-width: 0; }
.chapter > .side.is-tall { position: static; }
.chapter > .flow { grid-column: 2; }
/* a section head announces a new section: a 3 px ink rule above and the title at weight 600 (author's note, 18 September) */
.chapter-head { display: flex; flex-direction: column; gap: var(--space-lg); border-top: 3px solid var(--c-ink); padding-top: var(--space-lg); }
.chapter-title { max-width: 20ch; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; font-weight: 600; }
.chapter-head .standfirst { font-size: var(--fs-lede); line-height: 1.4; font-variation-settings: "opsz" 18; color: var(--c-ink-soft); max-width: 34ch; }
.chapter-head .status { font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--c-ink-soft); border-top: 1px solid var(--c-rule); padding-top: var(--space-sm); max-width: 38rem; }

/* ---- prose */
.flow > * + * { margin-top: var(--space-xl); }
.flow > p + p { margin-top: var(--space-lg); }
.flow > h2 { margin-top: var(--space-3xl); }
.flow > h2 + * { margin-top: var(--space-lg); }
.flow > h3 + * { margin-top: var(--space-md); }
.flow > h3 { margin-top: var(--space-2xl); }
.flow ul, .flow ol { padding-inline-start: 1.25em; }
.flow li + li { margin-top: var(--space-sm); }
.flow li > p + p { margin-top: var(--space-sm); }
.flow sup { line-height: 0; font-size: 0.75em; }
.flow sup a { font-family: var(--font-ui); text-decoration: none; padding: 0 0.15em; }
.flow > section > * + * { margin-top: var(--space-xl); }
.flow > section > h2 + * { margin-top: var(--space-lg); }
.flow > section > h3 + * { margin-top: var(--space-md); }
.flow > section > p + p { margin-top: var(--space-lg); }
.lede { font-size: var(--fs-lede); line-height: 1.4; font-variation-settings: "opsz" 18; }
.pull { font-size: var(--fs-insight); line-height: var(--lh-insight); color: var(--c-aubergine); font-variation-settings: "opsz" 24; }

/* ---- callouts (§8): a cream panel, no rule and no colour accent; a placeholder opens with a label, a note with its own heading at h3 size (author's note, 18 September: the label size read as strangely small under a full-sentence heading) */
.examples, .note, .placeholder { background: var(--c-cream); padding: var(--space-inset-panel); }
.placeholder > p:first-child { font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.25; color: var(--c-ink-soft); font-weight: 600; margin: 0 0 var(--space-sm); }
.note > h2:first-child, .note > h3:first-child, .note > h4:first-child { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; color: var(--c-ink); font-weight: 600; font-variation-settings: "opsz" 18; margin: 0 0 var(--space-sm); }
.examples > .plabel { margin: 0 0 var(--space-sm); }
.note > :not(:first-child) + *, .examples > :not(:first-child) + * { margin-top: var(--space-md); }
.note p, .note li, .examples li, .examples p, .placeholder p { font-size: var(--fs-callout); line-height: 1.5; }
.examples ul { padding-inline-start: 1.1em; }
.examples li + li, .note li + li { margin-top: var(--space-xs); }
.assessment > h2 { font-size: var(--fs-h2); }
.placeholder { color: var(--c-ink-soft); }
blockquote.quotation { font-style: italic; font-size: var(--fs-lede); line-height: 1.4; color: var(--c-ink); font-variation-settings: "opsz" 18; }
blockquote.quotation + .label { margin-top: var(--space-sm); }
/* ---- the aside: chapter contents, cross-references, what the entry says about itself */
.side > * + * { margin-top: var(--space-xl); }
.side .label { margin-bottom: var(--space-sm); }
.side p, .side li { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; color: var(--c-ink-soft); }
.side p b { color: var(--c-ink); }
.side-nav > ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-rule); }
.side-nav > ol > li { border-bottom: 1px solid var(--c-rule); }
.side-nav a { display: block; padding: var(--space-sm) var(--space-md); color: var(--c-ink); text-decoration: none; min-height: 40px; line-height: 1.3; }
.side-nav li.is-current { background: var(--c-cream); box-shadow: inset 3px 0 0 var(--c-coral); }
.side-nav li.is-current > a, .side-nav li.is-current > .side-part-row > a { font-weight: 600; }
.side-nav a[aria-current="true"] { font-weight: 600; }
@media (hover: hover) { .side-nav a:not([aria-current]):hover { text-decoration: underline; } }
/* each Part: its title as a link beside a 40 px chevron that folds its chapters (Mintlify and Devin patterns); open on the Part in view */
.side-part-row { display: flex; align-items: stretch; }
.side-part-row > a { flex: 1 1 auto; min-width: 0; }
.disclose { flex: none; width: 40px; min-height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.disclose::before { content: ""; width: 8px; height: 8px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.side-part.is-open > .side-part-row .disclose::before { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) { .disclose:hover { background: var(--c-cream); } }
.js .side-part:not(.is-open) > .side-kids { display: none; }
.side-kids { list-style: none; margin: 0; padding: var(--space-xs) 0 var(--space-lg); }
.side-nav .side-kids a { min-height: 32px; padding: var(--space-xs) var(--space-md) var(--space-xs) calc(var(--space-md) + var(--space-lg)); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.35; color: var(--c-ink-soft); }
.side-nav .side-kids li.is-current a { color: var(--c-ink); }
/* the local level on an entry page: the category and its disciplines, a separate block beneath the chapter tree */
.local-nav { margin-top: var(--space-2xl); }
.local-nav .label { margin-bottom: var(--space-sm); }
.local-cat { font-family: var(--font-display); font-size: var(--fs-callout); line-height: 1.3; color: var(--c-ink); padding: 0 var(--space-md); }
.local-cat a { color: inherit; text-decoration: none; }
.local-cat .num { font-family: var(--font-ui); color: var(--c-ink-soft); margin-inline-end: var(--space-xs); }
.local-nav ol { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.local-nav ol a { display: block; min-height: 32px; padding: var(--space-xs) var(--space-md); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.35; color: var(--c-ink-soft); text-decoration: none; }
.local-nav ol a .num { margin-inline-end: var(--space-xs); }
.local-nav li.is-current { background: var(--c-cream); box-shadow: inset 3px 0 0 var(--c-coral); }
.local-nav li.is-current a { color: var(--c-ink); font-weight: 600; }
@media (hover: hover) { .local-nav a:not([aria-current]):hover { text-decoration: underline; } }
/* ---- the foot of every page: a hairline, then Previous and Next as a balanced pair (label over destination title),
   then the return link to the parent section; the block takes the height its content needs */
.pager { border-top: 1px solid var(--c-rule); padding-top: var(--space-2xl); }
.pager-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); align-items: start; }
.pager-pair a { display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: var(--c-ink); }
.pager-next { text-align: end; }
.pager-k { font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.25; color: var(--c-ink-soft); }
.pager-t { font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.3; font-weight: 500; font-variation-settings: "opsz" 18; text-wrap: balance; hyphens: manual; }
@media (hover: hover) { .pager-pair a:hover .pager-t { text-decoration: underline; text-underline-offset: 0.15em; } }
.pager-back { margin-top: 2.5rem; font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4; color: var(--c-ink-soft); }
.pager-back a { color: inherit; text-decoration: none; }
@media (hover: hover) { .pager-back a:hover { text-decoration: underline; } }

/* ---- part openers: a 70 px aubergine strip with the numeral and title, a 4:1 picture beneath (2:1 on phones; client review, 16 September); each opener's crop position comes from its focal point in data/illustrations.json */
.opener { background: var(--c-aubergine); color: var(--c-cream); }
.opener-band { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); min-height: 70px; padding: var(--space-md) var(--gutter); max-width: 88rem; margin-inline: auto; }
.opener-band .numeral { font-size: var(--fs-h1); color: var(--c-cream); }
.opener-band h1 { font-size: var(--fs-h1); color: var(--c-cream); line-height: 1.1; }
.opener img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; object-position: 50% 60%; }

/* ---- home */
.hero { position: relative; background: var(--c-aubergine); }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 55% 62%; }
/* the title block sits in the light sky of the cover picture (its top third): ink on the sky, sized so the whole block stays above the rooftops at every width */
.hero-title { position: absolute; inset-inline-start: var(--gutter); top: clamp(24px, 3.5vw, 48px); max-width: min(720px, 64%); color: var(--c-ink); }
.hero-title .eyebrow { color: inherit; }
.hero-title h1 { font-size: var(--fs-display-xl); line-height: 1.05; font-weight: 600; margin: var(--space-sm) 0 var(--space-md); color: inherit; }
.hero-title .sub { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lede); line-height: 1.25; color: inherit; }
.hero-title .kicker { margin-top: var(--space-md); font-family: var(--font-ui); font-size: var(--fs-ui); color: inherit; }
.hero-title .kicker a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.15em; }
.home .page > * + * { margin-top: 5rem; }
.brief { max-width: 34rem; }
.brief .lede { margin-top: var(--space-lg); font-size: var(--fs-lede); line-height: 1.45; }
/* four levels: marker, title, one-sentence description, quiet subordinate links */
.contents-head { margin-bottom: var(--space-2xl); }
.contents-head h2 { font-size: var(--fs-h1); line-height: 1.1; }
.contents { list-style: none; padding: 0; margin: 0; max-width: 72rem; border-top: 1px solid var(--c-rule); }
.contents > li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-xl); align-items: baseline; padding: 2.5rem 0; border-bottom: 1px solid var(--c-rule); }
.contents .numeral { font-size: var(--fs-h2); font-variant-numeric: tabular-nums; text-align: end; }
.contents .t { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; font-variation-settings: "opsz" 24; text-decoration: none; color: var(--c-ink); }
@media (hover: hover) { .contents .t:hover { text-decoration: underline; text-underline-offset: 0.12em; } }
.contents .d { font-size: var(--fs-callout); line-height: 1.55; font-variation-settings: "opsz" 14; color: var(--c-ink-soft); margin-top: var(--space-lg); max-width: 36em; }
.contents .d a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-rule); text-underline-offset: 0.15em; }
.contents .sub { margin-top: var(--space-xl); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.6; color: var(--c-ink-soft); }
.contents .sub a { color: inherit; text-decoration: none; }
.contents-cats { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 17rem)); gap: var(--space-sm) var(--space-2xl); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4; }
.contents-cats a { display: inline-flex; align-items: baseline; gap: var(--space-sm); min-height: 28px; color: var(--c-ink); text-decoration: none; }
.contents-cats .num { color: var(--c-ink-soft); font-size: 1em; min-width: 0.75em; }
@media (hover: hover) { .contents-cats a:hover, .contents .sub a:hover { text-decoration: underline; text-underline-offset: 0.15em; } }
.contents-cats + .sub { margin-top: var(--space-xl); }
/* the acknowledgements follow the contents (the client, 19 September 2026), in the prose measure, indented like the contents titles */
.acknowledgements { max-width: var(--measure-prose); margin-inline-start: calc(3.5rem + var(--space-xl)); }
.acknowledgements h2 { margin-bottom: var(--space-lg); }
.acknowledgements p + p { margin-top: var(--space-md); }
.home .pager { max-width: 72rem; margin-top: var(--space-2xl); }
.home .pager-pair { padding-inline-start: calc(3.5rem + var(--space-xl)); }
/* ---- the entry head: a quiet breadcrumb, the name, the entry's one portrait */
.entry-head { display: flex; flex-direction: column; gap: var(--space-lg); }
/* the category mark: six squares, the current category filled, then its name */
.cat-mark { display: flex; align-items: center; gap: var(--space-md); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4; color: var(--c-ink-soft); }
.cat-mark ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.cat-mark li { width: 20px; height: 20px; border: 1px solid var(--c-ink); display: flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 600; line-height: 1; color: var(--c-ink-soft); }
.cat-mark li[aria-current] { background: var(--c-ink); color: var(--c-cream); }
.cat-mark-name { color: var(--c-ink); }
.cat-mark a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cat-mark a:hover { text-decoration: underline; } }
/* the entry title: the discipline's number large beside its name, the portrait at the end */
.entry-title { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-lg); align-items: start; }
.entry-num { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.1; color: var(--numeral); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 36; }
.entry-title h1 { font-size: var(--fs-h1); line-height: 1.1; max-width: 18ch; align-self: center; }
.entry-portrait img { width: 120px; height: 120px; background: var(--c-cream); }
.entry-strip { max-width: 36rem; margin-top: var(--space-sm); }
.entry-strip .label { margin-bottom: var(--space-sm); }
/* the category introduction sits a level above the discipline: a 3 px rule, the mark, the letter and the name at display size */
.category-intro { max-width: var(--measure-prose); margin: 0 auto var(--space-3xl) calc(6rem + var(--space-2xl)); padding-top: var(--space-lg); padding-bottom: var(--space-2xl); border-top: 3px solid var(--c-ink); border-bottom: 1px solid var(--c-rule); }
.category-intro > * + * { margin-top: var(--space-lg); }
.category-intro h2 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.category-intro h2 .cat-letter { color: var(--numeral); margin-inline-end: var(--space-md); }
.category-intro .category-entries { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.8; }
/* ---- the typology index: six categories; a category's disciplines appear when it is selected (all open without the script) */
.typology { margin-top: var(--space-3xl); }
/* the index head: a 3 px rule, the numeral 15 large beside the heading, the site's own device for entries and Parts (client note of 19 September; the user chose this over a coloured panel) */
.typology-head { display: flex; align-items: center; gap: var(--space-xl); border-top: 3px solid var(--c-ink); padding: var(--space-xl) 0 var(--space-2xl); }
.typology-num { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: 0.9; font-weight: 400; color: var(--numeral); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 72; letter-spacing: -0.02em; flex: none; }
.typology-head h2 { font-size: var(--fs-h1); line-height: 1.05; font-weight: 600; letter-spacing: -0.01em; max-width: 10ch; }
.typology-list { list-style: none; padding: 0; margin: var(--space-lg) 0 0; border-top: 1px solid var(--c-rule); }
.typology-list > li { padding: var(--space-lg) 0; border-bottom: 1px solid var(--c-rule); }
.typology-list h3 { display: flex; align-items: baseline; gap: var(--space-md); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.typology-list .cat-n { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--numeral); flex: none; min-width: 1.25rem; }
.typology-list .cat-name { color: var(--c-ink); text-decoration: none; }
@media (hover: hover) { .typology-list .cat-name:hover { text-decoration: underline; text-underline-offset: 0.12em; } }
.typology-list .gloss { font-family: var(--font-text); font-style: italic; font-size: var(--fs-callout); line-height: 1.45; color: var(--c-ink-soft); margin-top: var(--space-xs); padding-inline-start: calc(1.25rem + var(--space-md)); }
.typo-list { list-style: none; padding: var(--space-md) 0 var(--space-sm) calc(1.25rem + var(--space-md)); margin: 0; }
.typo-list a { display: inline-flex; align-items: baseline; gap: var(--space-sm); min-height: 40px; color: var(--c-ink); text-decoration: none; }
.typo-list a .num { min-width: 1.5em; font-size: 0.9375em; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .typo-list a:hover { text-decoration: underline; text-underline-offset: 0.15em; } }
/* ---- the rating strip: five cells, value and label as text; with the overall in a sixth, outlined cell (client, 19 September 2026) */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.strip.has-overall { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.15fr); }
.strip-overall-cell { background: var(--c-paper); border: 2px solid var(--c-ink); }
.strip-cell { min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-sm) var(--space-sm); color: var(--c-ink); font-family: var(--font-ui); }
.strip-cell.is-dark { color: #fff; }
.strip-val { font-size: var(--fs-callout); line-height: 1.25; font-weight: 600; }
.strip-lab { font-size: var(--fs-label); line-height: 1.25; margin-top: var(--space-2xs); }
.lab-short { display: none; }

/* figure 2: the fifteen as rows, the five practices as columns; numbered heads with a key beneath on a phone */
.presence { border-collapse: collapse; width: 100%; }
.presence caption { text-align: start; }
.presence th, .presence td { padding: 0; text-align: start; vertical-align: middle; }
.presence thead th { padding: 0 var(--space-xs) var(--space-sm); font-weight: 600; font-size: var(--fs-label); line-height: 1.25; vertical-align: bottom; border-bottom: 1px solid var(--c-ink); }
.presence thead th:not(.th-name) { text-align: center; width: 5.5rem; }
.th-short { display: none; }
.presence tbody th { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; font-weight: 400; border-bottom: 1px solid var(--c-rule); }
.presence tbody th a { display: block; padding: var(--space-sm) 0; color: var(--c-ink); text-decoration: none; }
@media (hover: hover) { .presence tbody th a:hover { text-decoration: underline; } }
.presence tbody td { border-bottom: 1px solid var(--c-rule); text-align: center; height: 44px; }
.presence tbody td i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--c-rule); vertical-align: middle; font-style: normal; font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.presence tbody td.r1 i { background: var(--maturity-2); border-color: var(--maturity-3); color: var(--c-ink); }
.presence tbody td.r2 i { background: var(--c-aubergine); border-color: var(--c-aubergine); color: var(--c-cream); }
.thread-key { display: none; list-style: none; padding: 0; margin: var(--space-md) 0 0; font-size: var(--fs-label); color: var(--c-ink-soft); }
.thread-key li { display: flex; align-items: baseline; gap: var(--space-sm); }
.thread-key li + li { margin-top: var(--space-2xs); }
.thread-key b { color: var(--c-ink); min-width: 1em; }

/* ---- figures (§9): cream ground, 16 × 20 px inset, a hairline under the title, note and source beneath */
.fig { background: var(--c-cream); padding: var(--space-inset-figure); max-width: 48rem; }
.fig-narrow { max-width: 40rem; }
.fig-head { display: block; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--c-rule); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; }
.fig-num { color: var(--link); font-weight: 600; }
.fig-title { font-weight: 600; }
.fig-body { margin-top: var(--space-lg); font-family: var(--font-ui); font-size: var(--fs-fig); line-height: var(--lh-fig); }
.fig-body > * + * { margin-top: var(--space-lg); }
.fig-body p { max-width: 64ch; }
.fig-body a { color: var(--c-ink); }
.fig-note { margin-top: var(--space-lg); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; color: var(--c-ink-soft); max-width: 72ch; }
.fig-note b { color: var(--c-ink); }
.fig-strip img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
/* figure 3: the college cutaway with seven numbered places and its key */
.cutaway-pic { position: relative; }
.markers { list-style: none; margin: 0; padding: 0; }
.markers li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.markers a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-paper); border: 1px solid var(--c-ink); color: var(--c-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); text-decoration: none; position: relative; }
.markers a::after { content: ""; position: absolute; inset: -8px; }
.keyed { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); }
.keyed li { display: flex; flex-direction: column; border-top: 1px solid var(--c-rule); padding-top: var(--space-sm); }
.keyed .numeral { font-size: var(--fs-h3); font-weight: 600; }
.keyed h3 { font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600; }
/* each key item's head is a button (it selects the place on a phone); above 820 px it reads as a plain heading */
.keyed-toggle { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: start; font: inherit; color: inherit; cursor: default; }
.keyed-chev { display: none; }
.keyed-quote { margin-top: var(--space-xs); margin-inline-start: calc(1.5rem + var(--space-sm)); }
.college-nav { display: none; }
.keyed li:target { background: var(--c-paper); outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.fig-body .label { margin-bottom: var(--space-sm); }
.fig-body .lead { font-family: var(--font-display); font-size: var(--fs-callout); line-height: 1.5; }
.fig .levels-cap h3, .fig .keyed h3 { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.cols { display: grid; gap: var(--space-lg) var(--space-xl); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols > div > * + * { margin-top: var(--space-xs); }
.cols dt { font-family: var(--font-display); font-size: var(--fs-callout); font-weight: 600; }
.cols dd { color: var(--c-ink-soft); }
.ruled, .ruled-cols > div { border-top: 1px solid var(--c-ink); padding-top: var(--space-sm); }
.ruled > * + *, .ruled-cols > div > * + * { margin-top: var(--space-xs); }
.ruled-cols .who { color: var(--c-ink-soft); }
.ruled-cols .gloss { color: var(--c-ink-soft); }
/* ---- Table 1: one table; a heatmap on wide screens, fifteen cards of strip and value on a phone */
.matrix-block { max-width: var(--measure-prose); }
.matrix-block > * + * { margin-top: var(--space-lg); }
.matrix-main > * + * { margin-top: var(--space-lg); }
.mx-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-family: var(--font-ui); font-size: var(--fs-ui); }
.mx-sort-label { color: var(--c-ink-soft); margin-inline-end: var(--space-xs); }
.mx-sort button { font: inherit; background: none; border: 1px solid transparent; color: var(--c-ink); padding: 0 var(--space-sm); min-height: 40px; border-radius: 2px; cursor: pointer; }
.mx-sort button[aria-pressed="true"] { border-color: var(--c-ink); font-weight: 600; }
@media (hover: hover) { .mx-sort button:hover { background: var(--c-cream); } }
.mx-sort-compact { display: none; }
/* above the phone form the seven chips are wider than the reading column: a grid of the label and four chips, three aligned beneath, rather than a ragged wrap with one chip orphaned (audit, 21 September) */
@media (min-width: 51.26rem) { .mx-sort { display: grid; grid-template-columns: auto repeat(4, max-content); justify-content: start; column-gap: var(--space-xs); row-gap: var(--space-xs); } .mx-sort-label { grid-column: 1; margin-inline-end: var(--space-sm); } .mx-sort button:nth-of-type(n + 5) { grid-column: auto; } .mx-sort button:nth-of-type(5) { grid-column: 2; } }
.name-short, .th-abbr { display: none; }
.mx-outer { position: relative; }
.mx-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table.mx { border-collapse: collapse; width: 100%; font-family: var(--font-ui); font-size: var(--fs-ui); }
table.mx caption { text-align: start; padding-bottom: var(--space-md); }
table.mx thead th { text-align: center; font-weight: 600; font-size: var(--fs-label); line-height: 1.25; padding: 0 var(--space-xs) var(--space-sm); color: var(--c-ink-soft); border-bottom: 1px solid var(--c-ink); vertical-align: bottom; }
table.mx thead th.mx-h-name { text-align: start; }
table.mx tbody th, table.mx tbody td { border-bottom: 1px solid var(--c-rule); padding: var(--space-2xs); vertical-align: middle; }
table.mx .mx-name { text-align: start; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-callout); padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; min-width: 11rem; }
table.mx .mx-name a { color: var(--c-ink); text-decoration: none; display: inline-block; padding: var(--space-xs) 0; }
@media (hover: hover) { table.mx .mx-name a:hover { text-decoration: underline; } }
.mx-id { margin-inline-end: var(--space-2xs); }
table.mx .mx-cell { width: 3.25rem; }
table.mx .mx-val { display: flex; height: 40px; align-items: center; justify-content: center; background: var(--cell); color: var(--c-ink); font-size: var(--fs-callout); font-weight: 600; }
table.mx .is-dark .mx-val { color: #fff; }
table.mx .mx-ov { width: 4rem; text-align: center; font-weight: 600; font-size: var(--fs-callout); border-inline-start: 1px solid var(--c-rule); }
table.mx tr.mx-mean th, table.mx tr.mx-mean td { border-top: 1px solid var(--c-ink); border-bottom: 0; font-weight: 600; text-align: center; padding: var(--space-sm) var(--space-xs); }
table.mx tr.mx-mean th { text-align: start; font-family: var(--font-ui); font-size: var(--fs-ui); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; font-family: var(--font-ui); font-size: var(--fs-label); color: var(--c-ink-soft); }
.legend dt { font-weight: 600; }
.legend i { display: inline-block; width: 22px; height: 12px; vertical-align: -1px; margin-inline-end: var(--space-xs); }
.matrix-block .fig-note { max-width: none; }
/* the phone-only parts of Table 1 and the figures (19 September 2026) are in the DOM at every width and shown at 820 px and below */
.mx-tg, .mx-h-tg, .mx-detail, .mx-key, .levels-phone, .pp-legend, .practices-phone { display: none; }
html:not(.js) .levels-tabs { display: none; }

/* ---- strands (Part 3, other recommendations) */
/* Other recommendations: one left edge for title, labels and prose; the number hangs in a gutter to the left.
   Each boundary has one spacing rule: item to item 40 px above the rule and 32 px below it; heading to first label 20 px;
   label to its paragraph 8 px (the label's own margin, so the paragraph rule is switched off there); paragraph to
   paragraph 16 px; problem to Recommendation label 28 px. */
.recommendations .chapter { row-gap: var(--space-2xl); }
.flow > .strand { margin-top: 2.5rem; padding-top: var(--space-2xl); border-top: 1px solid var(--c-rule); }
.strand > h2 { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; margin-inline-start: -3rem; font-size: var(--fs-h2); line-height: 1.2; font-variation-settings: "opsz" 24; }
.strand-n { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.22; color: var(--numeral); font-variation-settings: "opsz" 72; text-align: end; }
.strand .plabel { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink); margin: 0 0 var(--space-sm); }
.strand > .problem { margin-top: 1.25rem; }
.strand > .recommendation { margin-top: 1.75rem; }
.strand .problem > p + p, .strand .recommendation > p + p { margin-top: var(--space-lg); }
.strand .problem > .plabel + p, .strand .recommendation > .plabel + p { margin-top: 0; }

/* ---- footnotes, downloads, footer */
.footnotes { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; color: var(--c-ink-soft); border-top: 1px solid var(--c-rule); padding-top: var(--space-lg); }
.footnotes ol { padding-inline-start: 1.5em; }
.footnotes li + li { margin-top: var(--space-sm); }
.footnotes li:target { background: var(--c-cream); outline: 4px solid var(--c-cream); }
.footnotes .fn-back { text-decoration: underline; margin-inline-start: 0.25em; }
.foot { max-width: 88rem; margin-inline: auto; padding: var(--space-3xl) var(--gutter) calc(var(--space-3xl) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-rule); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; color: var(--c-ink-soft); display: flex; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.foot b { color: var(--c-ink); }

/* ---- 1100 px and below: the grid narrows, the aside stacks beneath its prose, the matrix key drops below */
@media (max-width: 68.75rem) {
  .thread { display: none; }
  .chapter { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .chapter > * { grid-column: 1; }
  .chapter > .flow { grid-column: 1; }
  .chapter > .side { grid-column: 1; grid-row: auto; position: static; padding-inline-start: 0; max-width: var(--measure-prose); border-top: 1px solid var(--c-rule); padding-top: var(--space-lg); }
  .chapter > .flow, .chapter > .chapter-head { max-width: var(--measure-prose); }
  .category-intro { margin-inline-start: 0; }
  .strand > h2 { grid-template-columns: 2rem minmax(0, 1fr); margin-inline-start: -2.5rem; }
  .chapter > .side { display: none; }
  .chapter-foot { margin-inline-start: 0; }
  .rail-pdf { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--c-ink); border-radius: 2px; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::after { content: "▾"; font-size: 0.8em; }
  .mobile-nav[open] summary::after { content: "▴"; }
  .mobile-nav .menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-sm)); width: 22rem; max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100vh - var(--rail) - var(--space-2xl)); overflow-y: auto; overscroll-behavior: contain; background: var(--c-paper); border: 1px solid var(--c-rule); box-shadow: 0 8px 24px rgba(36, 24, 38, 0.12); padding: var(--space-sm); z-index: 30; }
  .mobile-nav .label { display: none; }
  .mobile-nav .side-nav > ol { border-top: 0; }
  .mobile-nav .side-nav a { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding-top: var(--space-xs); padding-bottom: var(--space-xs); font-family: var(--font-ui); font-size: var(--fs-ui); }
  .mobile-nav .side-nav .side-kids a { min-height: 40px; font-size: var(--fs-small); }
  .mobile-nav .local-nav { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--c-rule); }
  .mobile-nav .local-nav .label { display: block; padding: 0 var(--space-md); }
  .mobile-nav .local-nav ol a { min-height: 40px; }
  .mobile-nav .disclose { width: 44px; }
  table.mx .mx-name { position: sticky; inset-inline-start: 0; background: var(--c-paper); z-index: 1; }   /* the name keeps its 11 rem; a 12 rem minimum here made the table 12 px wider than its column and clipped Overall (audit, 19 September) */
  .mx-outer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 24px; background: linear-gradient(to right, transparent, var(--c-paper)); pointer-events: none; }
}

/* ---- 820 px and below: the rail collapses to a disclosure; one column; tables become cards; columns stack */
@media (max-width: 51.25rem) {
  .page { padding-top: var(--space-2xl); }
  .page > * + * { margin-top: var(--space-4xl); }
  /* the 41-character measure: soft hyphenation (the page is lang="en-GB") and no single-word last lines */
  .flow p, .note p, .examples li, .contents .d, .fig-body p { hyphens: auto; text-wrap: pretty; }
  .strand > h2 { display: block; margin-inline-start: 0; line-height: 1.25; }
  .strand-n { display: inline; margin-inline-end: var(--space-sm); }
  .flow > .strand { margin-top: var(--space-2xl); padding-top: var(--space-xl); }
  .chapter { row-gap: var(--space-xl); }
  .hero { background: var(--c-paper); }
  /* the picture's own sources switch to the 4:5 portrait crop here; capped at 55 % of the screen so the title is on the first screen of a tablet too (audit, 19 September: at 768 px the picture alone was 960 px tall) */
  .hero img { aspect-ratio: 4 / 5; max-height: 55vh; object-position: 50% 50%; }
  .hero-title { position: static; max-width: none; padding: var(--space-xl) var(--gutter) 0; color: var(--c-ink); }
  .hero-title .eyebrow { color: var(--link); }
  .hero-title .kicker { color: var(--c-ink-soft); }
  .hero-title .kicker a { color: var(--link); }
  .opener img { aspect-ratio: 2 / 1; }
  .contents > li { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-lg); padding: var(--space-2xl) 0; }
  .contents-cats { grid-template-columns: minmax(0, 1fr); }
  .home .pager-pair { padding-inline-start: 0; }
  .acknowledgements { margin-inline-start: 0; }
  /* Previous and Next stack, both left-aligned, so a long title never has to break inside a word (the user's note, 19 September: "Recommendatio-ns" at 320 px) */
  .pager-pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .pager-pair > span:empty { display: none; }
  .pager-next { text-align: start; }
  .entry-title { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .entry-portrait { order: -1; }
  .entry-portrait img { width: 96px; height: 96px; }
  .lab-full { display: none; }
  .lab-short { display: inline; }
  .strip-cell { padding: var(--space-sm) var(--space-xs); text-align: center; align-items: center; }
  .strip-overall-cell .lab-full { display: inline; }
  .strip.has-overall .strip-lab { font-size: 0.625rem; }   /* six cells across 288 px at 320 */
  .cols-2, .cols-3, .cols-4, .keyed { grid-template-columns: minmax(0, 1fr); }
  .markers a { width: 32px; height: 32px; }
  .js .markers li.is-on a { background: var(--c-ink); color: var(--c-cream); box-shadow: 0 0 0 2px var(--c-coral); }
  .entry-title { grid-template-columns: auto minmax(0, 1fr); }
  .typology-head { gap: var(--space-lg); padding: var(--space-lg) 0 var(--space-xl); }
  .entry-portrait { grid-column: 1 / -1; }
  .fig { padding: var(--space-lg) var(--space-lg); }
  .fig-strip img { aspect-ratio: 2 / 1; }
  .th-full { display: none; }
  .th-short { display: inline; }
  .presence thead th:not(.th-name) { width: 2.5rem; }
  .presence tbody th { font-size: var(--fs-ui); }
  .thread-key { display: block; }
  /* Table 1 as one line per discipline under a sticky header line: short name, five small cells, overall, a chevron; the line
     opens into a detail panel (Formula 1 standings and FotMob career-table patterns). The sort buttons become a row of chips
     that scrolls sideways; a Key disclosure holds the scale and spells the columns out. */
  .mx-sort { flex-wrap: nowrap; overflow-x: auto; gap: var(--space-sm); padding-bottom: 2px; scrollbar-width: none; }
  .mx-sort::-webkit-scrollbar { display: none; }
  .mx-sort-label { flex: none; }
  .mx-sort button { flex: none; border: 1px solid var(--c-ink); border-radius: 20px; padding: 0 14px; white-space: nowrap; }
  .mx-sort button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-cream); }
  .matrix-main > .legend { display: none; }
  .mx-key { display: block; }
  .mx-key summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); margin-inline-start: calc(-1 * var(--space-sm)); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600; }
  .mx-key summary::-webkit-details-marker { display: none; }
  .mx-key summary svg { transition: transform 150ms; }
  .mx-key[open] summary svg { transform: rotate(180deg); }
  .mx-key-body { background: var(--c-cream); padding: var(--space-inset-panel); display: flex; flex-direction: column; gap: var(--space-md); }
  .mx-key-body .legend { display: flex; }
  .mx-cols { margin: 0; font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.4; color: var(--c-ink); }
  .mx-cols > div { display: flex; gap: var(--space-sm); }
  .mx-cols dt { font-weight: 600; min-width: 2.25rem; }
  .mx-cols dd { margin: 0; }
  .mx-cols dd span { color: var(--c-ink-soft); }
  .mx-outer::after { display: none; }
  .mx-wrap { overflow: visible; }
  table.mx, table.mx thead, table.mx tbody { display: block; }
  table.mx caption { display: block; }
  /* the line stays compact and left-aligned however wide the window: the name column grows to 12 rem at most and the table to 27 rem, so the cells follow the name instead of drifting to the far edge in a narrowed desktop window */
  table.mx { max-width: 27rem; }
  table.mx tr { display: grid; grid-template-columns: minmax(0, 12rem) repeat(5, 22px) 2.25rem 40px; column-gap: 2px; align-items: center; justify-content: start; border-bottom: 1px solid var(--c-rule); }
  table.mx tr[hidden] { display: none; }
  .mx-tg, .mx-h-tg { display: block; }
  .mx-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--c-ink-soft); cursor: pointer; }
  .mx-toggle svg { transition: transform 150ms; }
  .mx-row.is-open .mx-toggle svg { transform: rotate(180deg); }
  table.mx tr.mx-detail { display: block; padding: 0 0 var(--space-md); }
  table.mx tr.mx-detail[hidden] { display: none; }   /* after the block rule, or the hidden attribute loses to it and every panel stays open (the user's note, 19 September) */
  table.mx tr.mx-detail td { display: block; padding: 0; border: 0; }
  .mx-panel { background: var(--c-cream); padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
  .mx-panel-cat { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--c-ink-soft); }
  .mx-panel-name { font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.3; font-weight: 600; margin-top: calc(-1 * var(--space-sm)); }
  .mx-domains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
  .mx-domains li { display: grid; grid-template-columns: minmax(0, 1fr) 128px; column-gap: var(--space-md); align-items: center; border-top: 1px solid var(--c-rule); padding-top: var(--space-sm); }
  .mx-dom-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--font-ui); }
  .mx-dom-head b { font-size: var(--fs-small); }
  .mx-dom-gloss { font-size: var(--fs-eyebrow); line-height: 1.25; color: var(--c-ink-soft); }
  .mx-dom-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
  .mx-meter { display: flex; gap: 2px; }
  .mx-meter i { display: block; width: 24px; height: 10px; border: 1px solid var(--c-rule); box-sizing: border-box; }
  .mx-meter i.on { border-color: transparent; }
  .mx-dom-val { font-family: var(--font-ui); font-size: var(--fs-eyebrow); }
  .mx-panel-overall { border-top: 1px solid var(--c-ink); padding-top: var(--space-sm); font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1.45; }
  .mx-panel-overall span { color: var(--c-ink-soft); }
  .mx-panel-reason { font-style: italic; font-size: var(--fs-ui); line-height: 1.4667; }
  .mx-panel-link { align-self: flex-start; }
  table.mx thead tr { position: sticky; top: var(--rail); z-index: 2; background: var(--c-paper); border-bottom: 1px solid var(--c-ink); padding: var(--space-xs) 0; }
  table.mx thead th { display: block; padding: 0; border: 0; text-align: center; font-size: 0.625rem; letter-spacing: 0; }
  table.mx thead th.mx-h-name { text-align: start; margin-inline-end: var(--space-sm); }
  table.mx thead th.mx-h-ov { text-align: end; margin-inline-start: var(--space-sm); }
  table.mx thead th.mx-col .th-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .th-abbr { display: inline; }
  table.mx tbody th, table.mx tbody td { display: block; border: 0; padding: 0; }
  table.mx tbody tr { min-height: 48px; padding: var(--space-xs) 0; }
  table.mx .mx-name { position: static; min-width: 0; background: none; line-height: 1.25; margin-inline-end: var(--space-sm); }
  table.mx .mx-name .name-full { display: none; }   /* the name is not a link on a phone: the line opens its detail, and the detail carries the one link */
  table.mx .mx-name .name-short { padding: var(--space-xs) 0; min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-xs); }
  .mx-reason { font-size: var(--fs-label); }
  table.mx .mx-cell { width: 22px; }
  table.mx .mx-cell .mx-val { height: 28px; font-size: var(--fs-label); }
  table.mx .mx-ov { text-align: end; border: 0; width: auto; padding: 0; margin-inline-start: var(--space-sm); }
  table.mx tr.mx-mean { border-top: 1px solid var(--c-ink); border-bottom: 0; }
  table.mx tr.mx-mean th, table.mx tr.mx-mean td { border: 0; padding: 0; font-size: var(--fs-label); text-align: center; }
  table.mx tr.mx-mean th { text-align: start; }
  table.mx tr.mx-mean .mx-ov { text-align: end; font-size: var(--fs-callout); }
  .foot { flex-direction: column; }

  /* Figure 1: one scene at a time, chosen from a three-segment bar under the picture; nothing is cropped */
  .fig-1 .fig-strip, .fig-1 .cols { display: none; }
  .levels-phone { display: flex; flex-direction: column; gap: var(--space-lg); }
  .levels-pics { display: flex; align-items: center; justify-content: center; height: 400px; padding: var(--space-sm); background: var(--c-paper); margin: 0 calc(-1 * var(--space-lg)); }
  .levels-pic, .levels-pic picture { height: 100%; display: flex; justify-content: center; }
  .levels-pic img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .js .levels-pic:not(.is-on), .js .levels-cap:not(.is-on) { display: none; }
  .levels-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-lg)) 0; }
  .levels-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 var(--space-xs); border: 0; border-top: 3px solid var(--c-rule); background: transparent; color: var(--c-ink); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; cursor: pointer; }
  .levels-tab[aria-pressed="true"] { background: var(--c-ink); color: var(--c-cream); border-top-color: var(--c-coral); }
  .levels-n { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--fs-eyebrow); }
  .levels-caps { list-style: none; margin: 0; padding: 0; }
  .levels-cap { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 6rem; }
  .levels-cap .label { margin: 0; }
  .levels-cap h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
  .levels-cap p { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4667; color: var(--c-ink-soft); }

  /* Figure 2: five practice rows, each opening on the disciplines it belongs to */
  .fig-2 .presence, .fig-2 .thread-key { display: none; }
  .pp-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-family: var(--font-ui); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
  .pp-legend i, .pp-strip i { display: inline-block; border: 1px solid var(--c-rule); box-sizing: border-box; }
  .pp-legend i { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; }
  .pp-legend i.r1, .pp-strip i.r1 { background: var(--maturity-2); border-color: var(--maturity-3); }
  .pp-legend i.r2, .pp-strip i.r2 { background: var(--c-aubergine); border-color: var(--c-aubergine); }
  .practices-phone { display: block; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-rule); }
  .pp { border-bottom: 1px solid var(--c-rule); }
  .pp-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; column-gap: var(--space-sm); align-items: start; width: 100%; min-height: 72px; margin: 0; padding: var(--space-md) 0; border: 0; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
  .pp-n { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; color: var(--numeral); font-variant-numeric: tabular-nums; }
  .pp-body { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
  .pp-title { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; }
  .pp-name { font-family: var(--font-display); font-size: var(--fs-callout); line-height: 1.3; font-weight: 600; }
  .pp-count { flex: none; font-family: var(--font-ui); font-size: var(--fs-eyebrow); color: var(--c-ink-soft); }
  .pp-strip { display: flex; gap: 2px; }
  .pp-strip i { display: block; width: 16px; height: 12px; }
  .pp-chev { display: flex; align-items: center; justify-content: center; width: 40px; height: 24px; color: var(--c-ink-soft); }
  .pp-chev svg { transition: transform 150ms; }
  .pp-head[aria-expanded="true"] .pp-chev svg { transform: rotate(180deg); }
  .pp-panel { margin: 0 0 var(--space-lg) 36px; padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--c-paper); display: flex; flex-direction: column; gap: var(--space-md); }
  .pp-panel[hidden] { display: none; }   /* after the flex rule, or the hidden attribute loses to it and every panel stays open (as Table 1's detail rows did, 19 September) */
  .pp-panel > p { font-size: var(--fs-ui); line-height: 1.4667; }
  .pp-panel > .label { margin: 0 0 calc(-1 * var(--space-sm)); }
  .pp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .pp-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-md); border-radius: 2px; font-family: var(--font-ui); font-size: var(--fs-label); text-decoration: none; }
  .pp-chips a .num { font-size: 1em; }
  .pp-strong a { background: var(--c-aubergine); color: var(--c-cream); }
  .pp-strong a .num { color: var(--c-cream); opacity: 0.8; }
  .pp-some a { background: var(--maturity-2); color: var(--c-ink); }

  /* Figure 3: the markers, a previous/next pair and the key rows select one place; only its words are open */
  .college-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
  html:not(.js) .college-nav { display: none; }
  .college-nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--c-ink); border-radius: 2px; background: none; color: var(--c-ink); cursor: pointer; }
  .college-pos { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin: 0; text-align: center; }
  .college-pos .label { margin: 0; }
  .college-dots { display: flex; gap: 6px; }
  .college-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--c-ink); box-sizing: border-box; }
  .college-dots i.is-on { background: var(--c-ink); }
  .keyed { gap: 0; margin-top: var(--space-lg); }
  .keyed li { padding-top: 0; }
  .keyed-toggle { grid-template-columns: 2rem minmax(0, 1fr) 40px; align-items: center; min-height: 52px; padding-inline-start: var(--space-md); cursor: pointer; }
  .keyed-title { font-family: var(--font-display); font-size: var(--fs-callout); line-height: 1.3; font-weight: 400; }
  .js .keyed-item.is-on .keyed-title { font-weight: 600; }
  .keyed-chev { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--c-ink-soft); }
  .keyed-chev svg { transition: transform 150ms; }
  .js .keyed-item.is-on .keyed-chev svg { transform: rotate(180deg); }
  .js .keyed-item:not(.is-on) .keyed-quote { display: none; }
  .js .keyed-item.is-on { background: var(--c-paper); box-shadow: inset 3px 0 0 var(--c-coral); }
  .keyed-quote { margin: 0; padding: 0 var(--space-lg) var(--space-lg) calc(2rem + var(--space-sm) + var(--space-md)); font-size: var(--fs-ui); line-height: 1.4667; }
}

/* ---- motion is opt-in and never the only cue */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .thread i { transition: height 120ms linear; }
  .btn, .mx-sort button, .chip { transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  .btn:active, .mx-sort button:active { scale: 0.96; }
}
@media (forced-colors: active) {
  .strip-cell, .mx-val, .legend i, .presence tbody td i { forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  .side-nav li.is-current { box-shadow: inset 3px 0 0 Highlight; }
}

/* ---- browser print of a page (the PDF edition is separate) */
@media print {
  .rail, .thread, .mobile-nav, .skip, .mx-sort, .mx-sort-compact, .pager, .side-nav, .local-nav { display: none !important; }
  .page { padding: 0; }
  a { color: inherit; text-decoration: none; }
  .fig, .examples, .note { break-inside: avoid; }
}