/* Rooibos World: the herbarium folio and the tea court.
   Ground is a pale cut-leaf green-grey, not cream. The oxidised red-brown owns whole regions
   (masthead, controls, selected states); the dark heap brown carries the market section;
   fynbos green and flower yellow are the only other colours. Bodoni Moda for display,
   Alegreya for reading, Alegreya Sans for controls and labels. Fonts are self-hosted (OFL). */

@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/BodoniModa-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/BodoniModa-Italic-var.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/Alegreya-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/Alegreya-Italic-var.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #eef0e8;          /* cut-leaf green-grey */
  --ground-deep: #e2e6d9;
  --ground-light: #f6f7f2;
  --ink: #1f1a14;             /* 15.1:1 on ground */
  --ink-soft: #4a4238;        /* 8.3:1 */
  --ink-faint: #5f5649;       /* 6.1:1 */
  --oxidised: #7b2d16;        /* the overnight red-brown, 7.5:1 on ground */
  --oxidised-deep: #5a1f0f;
  --on-oxidised: #f6e9df;     /* 8.9:1 on oxidised */
  --heap: #231510;            /* dark heap */
  --on-heap: #ead9c8;         /* 12.6:1 on heap */
  --on-heap-soft: #c9b39e;
  --fynbos: #3d5a2f;          /* 6.6:1 on ground */
  --fynbos-light: #8aa271;
  --flower: #e3b531;
  --flower-deep: #b88a12;
  --rule: #c9cfbd;
  --focus: #7b2d16;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Gill Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 42rem;
  --wide: 76rem;
  --s1: 0.25rem; --s2: 0.5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 7rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 112.5%; line-height: 1.55; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
p, li, dd, dt, td, th, label, legend, figcaption { overflow-wrap: anywhere; }
a { color: var(--oxidised); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--oxidised-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--flower); color: var(--ink); }
code { font-family: var(--mono); font-size: 0.85em; background: var(--ground-light); padding: 0 0.3em; }
details > summary { cursor: pointer; }
table { border-collapse: collapse; font-family: var(--sans); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.3rem 0.6rem 0.3rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 500; color: var(--ink-soft); }

.skip-link { position: absolute; left: var(--s3); top: -4rem; background: var(--heap); color: var(--on-heap); padding: var(--s2) var(--s3); font-family: var(--sans); z-index: 20; }
.skip-link:hover, .skip-link:focus { color: var(--on-heap); top: var(--s3); outline-color: var(--flower); }

/* ---------- masthead: an oxidised field ---------- */
.masthead { background: var(--oxidised); color: var(--on-oxidised); }
.masthead-inner { max-width: var(--wide); margin: 0 auto; padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.wordmark { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 600; font-variation-settings: "opsz" 36; letter-spacing: -0.01em; line-height: 1; }
.wordmark a { color: var(--on-oxidised); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2); }
.wordmark a:hover { color: var(--flower); }
.wordmark-leaf { width: 1.6rem; height: 1.6rem; fill: var(--flower); flex: none; }
.masthead nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-family: var(--sans); font-size: 0.95rem; font-weight: 500; }
.masthead nav a { color: var(--on-oxidised); text-decoration: none; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.masthead nav a:hover { color: var(--flower); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--flower); }

/* ---------- page frame ---------- */
main { max-width: none; margin: 0; padding: 0; }
.frame { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s4) var(--s7); }
.article { max-width: var(--measure); margin: 0 auto; }
.article-wide { max-width: var(--wide); }
.article-wide > p, .article-wide > ul, .article-wide > ol, .article-wide > dl, .article-wide > h2, .article-wide > h3, .article-wide > .preference, .article-wide > .article-header, .article-wide > .source-notes, .article-wide > .read-next, .article-wide > .model > p, .article-wide > .model > h2, .article-wide > .model > h3, .article-wide > .model > ul { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.article-wide > .plate-wide, .article-wide > .plate-bleed { max-width: none; }
.frame.with-aside { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 16rem); column-gap: var(--s6); align-items: start; justify-content: center; }
.with-aside .article { margin: 0; }
.side-notes { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); border-left: 1px solid var(--rule); padding-left: var(--s4); position: sticky; top: var(--s4); margin-top: var(--s7); }
.aside-heading { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: var(--s4) 0 var(--s2); }
.aside-heading:first-child { margin-top: 0; }

/* lead plate: full width of the viewport because it sits outside the padded frame; short enough that the title follows within the first view */
figure.plate.plate-bleed { margin: 0 0 var(--s4); width: 100%; max-width: none; }
figure.plate.plate-bleed img { width: 100%; height: clamp(14rem, 36vh, 24rem); object-fit: cover; display: block; border-radius: 0; }
.plate-bleed figcaption { max-width: var(--wide); margin: 0 auto; padding: var(--s2) var(--s4) 0; }
/* studies: small preview-origin files shown at native pixel size, never scaled up */
figure.plate.plate-study { width: max-content; max-width: 100%; margin: var(--s3) 0 var(--s4); }
figure.plate.plate-study img { width: auto; max-width: 100%; height: auto; }
.study-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-start; margin: var(--s4) 0 var(--s5); }
.study-row figure.plate { margin: 0; }
.has-lead .article-header { margin-top: 0; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.6rem); font-variation-settings: "opsz" 72; margin: 0 0 var(--s3); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); font-variation-settings: "opsz" 36; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.25rem; font-variation-settings: "opsz" 24; margin: var(--s5) 0 var(--s2); }
h2 + h3 { margin-top: var(--s3); }
.article-header { margin: var(--s6) 0 var(--s5); }
.folio { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-faint); margin: 0 0 var(--s3); }
.folio a { color: var(--ink-faint); }
.standfirst { font-size: 1.3rem; line-height: 1.4; color: var(--ink-soft); margin: 0 0 var(--s3); font-style: italic; }
.dateline { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin: 0; }
p { margin: 0 0 var(--s3); }
ul, ol { padding-left: 1.4rem; margin: 0 0 var(--s3); }
li { margin-bottom: var(--s2); }
.plain-list { list-style: none; padding: 0; }
.plain-list li { margin-bottom: var(--s1); }
.small, .hint { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); }
em { font-style: italic; }

dl.definitions, dl.timeline { margin: var(--s4) 0; }
dl.definitions div, dl.timeline div { border-top: 1px solid var(--rule); padding: var(--s3) 0; display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--s3); }
dl dt { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
dl dd { margin: 0; color: var(--ink-soft); }

ol.questions, ol.route { padding-left: 0; list-style: none; counter-reset: q; }
ol.questions li, ol.route li { counter-increment: q; position: relative; padding-left: 2.6rem; margin-bottom: var(--s3); }
ol.questions li::before, ol.route li::before { content: counter(q); position: absolute; left: 0; top: 0.1em; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--oxidised); color: var(--on-oxidised); font-family: var(--sans); font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.preference { background: var(--ground-light); border: 1px solid var(--rule); padding: var(--s4) var(--s4) var(--s3); margin: var(--s4) 0; border-radius: 4px; }
.preference-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--oxidised); margin-bottom: var(--s2); }
.preference p:last-child { margin-bottom: 0; }
.notice { background: var(--ground-deep); padding: var(--s3) var(--s4); font-family: var(--sans); font-size: 0.92rem; border-radius: 4px; }
.feature { background: var(--ground-light); border: 1px solid var(--rule); padding: var(--s4); margin: var(--s6) 0; border-radius: 4px; }
.feature h2 { margin-top: 0; }

/* ---------- plates ---------- */
figure.plate { margin: var(--s4) 0 var(--s5); }
figure.plate img { display: block; width: 100%; height: auto; background: var(--ground-deep); border-radius: 3px; }
figcaption { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin-top: var(--s2); line-height: 1.4; }
.plate-credit { color: var(--ink-faint); }
.plate-credit::before { content: " · "; }
.plate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); margin: var(--s4) 0 var(--s5); }
.plate-row figure.plate { margin: 0; }
.plate-inset { max-width: 24rem; }

/* ---------- home ---------- */
.home-intro, .home-market { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; margin: var(--s6) 0; }
.home-intro h2, .home-market h2 { margin-top: 0; }
.home-intro .plate, .home-market .plate { margin: 0; max-width: none; }
.way-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); }
.way-list a { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s3); align-items: start; color: var(--ink); text-decoration: none; padding: var(--s4); background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; min-height: 100%; }
.way-list a:hover { border-color: var(--oxidised); }
.way-list a:hover .way-title { color: var(--oxidised); }
.way-icon { width: 5rem; height: 5rem; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; grid-row: span 2; }
.way-icon .flower { fill: var(--flower); stroke: none; }
.way-icon .oxidised { fill: var(--oxidised); stroke: none; }
.way-icon .green { fill: var(--fynbos-light); stroke: none; }
.way-title { font-family: var(--display); font-size: 1.35rem; font-weight: 600; display: block; }
.way-text { display: block; font-size: 0.98rem; color: var(--ink-soft); }
.home-plates .plate-row { margin-top: var(--s3); }
.home-farm { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4) var(--s5); margin-top: var(--s6); }
.home-farm h2 { margin-top: 0; }

.library { margin-top: var(--s7); }
.library-search { font-family: var(--sans); max-width: var(--measure); margin-bottom: var(--s4); }
.library-search label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.library-search-row { display: flex; gap: var(--s2); }
.library-search input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: var(--s2) var(--s3); border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); }
.library-status { min-height: 1.4rem; font-size: 0.9rem; color: var(--ink-soft); margin: var(--s2) 0 0; }
.library-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s4) var(--s5); }
.library-group h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--oxidised); margin: 0 0 var(--s2); border-bottom: 2px solid var(--oxidised); padding-bottom: var(--s1); }
.library-group ul { list-style: none; padding: 0; margin: 0; }
.library-group li { margin: 0; border-bottom: 1px solid var(--rule); }
.library-group a { display: block; padding: var(--s3) 0; color: var(--ink); text-decoration: none; }
.library-group a:hover .library-title { color: var(--oxidised); text-decoration: underline; }
.library-title { font-family: var(--display); font-size: 1.25rem; font-weight: 600; display: block; }
.library-blurb { font-size: 0.95rem; color: var(--ink-soft); display: block; }

/* ---------- explorers: coherent line vocabulary ---------- */
.explorer { margin: var(--s7) 0; }
.explorer h2 { margin-top: 0; }
.explorer-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); }
.explorer-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.explorer-layout-process { grid-template-columns: minmax(0, 1fr); }
.explorer-stage { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.explorer-stage path, .explorer-stage circle, .explorer-stage ellipse, .explorer-stage rect, .explorer-stage line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.explorer-stage text { fill: var(--ink); font-size: 14px; stroke: none; }
.explorer-stage .stage-frame { fill: transparent; stroke: var(--rule); }
.explorer-stage .stage-number { font-family: var(--display); font-size: 22px; fill: var(--oxidised); }
.explorer-stage .stage-title { font-weight: 700; font-size: 16px; }
.explorer-stage .stage-when, .explorer-stage .stage-when-inline { font-size: 12px; fill: var(--ink-faint); }
.explorer-stage .ground { stroke: var(--ink-faint); }
.explorer-stage .sand, .explorer-stage .rain, .explorer-stage .air, .explorer-stage .heat, .explorer-stage .vapour, .explorer-stage .steam, .explorer-stage .rays { stroke: var(--ink-faint); }
.explorer-stage .root, .explorer-stage .cover, .explorer-stage .shoot { stroke: var(--fynbos); }
.explorer-stage .leaf { stroke: var(--fynbos); }
.explorer-stage .flower { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.explorer-stage .seed { fill: var(--oxidised); stroke: none; }
.explorer-stage .pod { fill: var(--ground-deep); }
.explorer-stage .heap { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.explorer-stage .spread { stroke: var(--oxidised); stroke-width: 3; }
.explorer-stage .sun, .explorer-stage .moon { fill: var(--flower); stroke: var(--flower-deep); }
.explorer-stage .grain { fill: var(--oxidised); stroke: none; }
.explorer-stage .label { fill: var(--on-oxidised); stroke: var(--ink); }
.explorer-stage .tick { stroke: var(--fynbos); stroke-width: 2.2; }
.explorer-stage .loop { stroke: var(--oxidised); stroke-dasharray: 4 4; }
.explorer-stage .loop-head { stroke: var(--oxidised); }
.explorer-stage .connector { stroke: var(--ink-faint); stroke-dasharray: 3 5; }
.explorer-stage .connector-return { stroke: var(--oxidised); stroke-dasharray: none; }
.explorer-stage .connector-head { stroke: var(--oxidised); }
.explorer-stage .connector-red { stroke: var(--oxidised); }
.explorer-stage .connector-green { stroke: var(--fynbos); }
.explorer-stage .branch-label { font-family: var(--display); font-size: 18px; font-weight: 600; }
.explorer-stage .branch-label-red { fill: var(--oxidised); }
.explorer-stage .branch-label-green { fill: var(--fynbos); }
.explorer-stage .stage-disc { fill: var(--ground); }
.explorer-stage .branch-red .stage-disc { stroke: var(--oxidised); }
.explorer-stage .branch-green .stage-disc { stroke: var(--fynbos); }
.explorer-stage .stage-figure { cursor: pointer; }
.explorer-stage .stage-figure:hover .stage-frame { stroke: var(--ink); }
.explorer-stage .stage-figure.is-selected .stage-frame { stroke: var(--oxidised); stroke-width: 3; fill: var(--ground); }
.explorer-stage .stage-figure.is-selected .stage-title { fill: var(--oxidised); }
.explorer-stage .stage-figure:focus-visible { outline: none; }
.explorer-stage .stage-figure:focus-visible .stage-frame { stroke: var(--focus); stroke-width: 4; }
.explorer-panel { font-family: var(--sans); }
.explorer-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.explorer-controls button { font: inherit; font-size: 0.92rem; font-weight: 500; padding: var(--s2) var(--s3); border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
.explorer-controls button:hover { border-color: var(--oxidised); color: var(--oxidised); }
.explorer-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.explorer-controls button[data-branch="green"] { border-color: var(--fynbos); }
.explorer-controls button[data-branch="green"][aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.control-number { font-family: var(--display); font-size: 1.05rem; }
.control-branch { font-size: 0.75rem; opacity: 0.8; }
.stage-detail { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); font-family: var(--text); }
.stage-detail h3 { margin: 0 0 var(--s2); }
.stage-when-inline { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); display: block; }
.stage-detail p { margin-bottom: var(--s2); }
.stage-more { color: var(--ink-soft); }
html:not(.js) .stage-detail[hidden] { display: block; }
html:not(.js) .explorer-controls { display: none; }
.explorer-text { font-family: var(--sans); font-size: 0.92rem; margin-top: var(--s3); }
.explorer-order { font-family: var(--text); font-size: 1rem; margin-top: var(--s2); }

/* ---------- supply chain: lenses, roles, stages ---------- */
.explorer-chain .explorer-lede { max-width: var(--measure); }
.chain-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); font-family: var(--sans); }
.chain-controls button { font: inherit; font-size: 0.92rem; font-weight: 500; padding: var(--s2) var(--s3); border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
.chain-controls button:hover { border-color: var(--oxidised); color: var(--oxidised); }
.chain-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.chain-lenses button { font-weight: 700; }
.chain-roles button[aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.chain-stages { margin-top: 0; }
.chain-stages button[data-branch="green"] { border-color: var(--fynbos); }
.chain-stages button[data-branch="green"][aria-pressed="true"] { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }
.chain-sheet .connector-bulk { stroke: var(--ink-soft); stroke-dasharray: none; }
.chain-sheet .connector-packed { stroke: var(--flower-deep); stroke-dasharray: none; }
.chain-sheet .branch-label-bulk { fill: var(--ink-soft); }
.chain-sheet .branch-label-packed { fill: var(--flower-deep); }
.chain-sheet .chain-edge-note { font-size: 12px; fill: var(--flower-deep); font-style: italic; }
.chain-sheet .connector-packed-return { stroke-dasharray: 6 5; }
.chain-sheet .connector-packed-head { stroke: var(--flower-deep); }
/* wide drawings: a contained, focusable pane that scrolls sideways only at narrow widths; captions and tables stay outside it */
.diagram-pane { max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.diagram-pane > svg { display: block; width: 100%; height: auto; }
.diagram-pane:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pane-hint { display: none; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s1) 0 var(--s2); }
.explorer-layout > .diagram-pane { min-width: 0; }
.explorer-layout > .pane-hint { margin-top: calc(-1 * var(--s3)); }
.chain-sheet .chain-node { cursor: pointer; text-decoration: none; }
.chain-sheet .chain-node .stage-number { font-size: 14px; }
.chain-sheet .chain-node .stage-title { font-size: 14px; }
.chain-sheet .branch-bulk .stage-disc, .chain-sheet .branch-packed .stage-disc, .chain-sheet .branch-destination .stage-disc { stroke: var(--ink-soft); }
.chain-sheet .branch-packed .stage-disc { stroke: var(--flower-deep); }
.chain-sheet .chain-node.is-dimmed { opacity: 0.3; }
.chain-sheet .chain-node:focus-visible { outline: none; }
.chain-sheet .chain-node:focus-visible .stage-frame { stroke: var(--focus); stroke-width: 4; }
.chain-sheet .water { stroke: #5b86a8; }
.chain-sheet .cup, .chain-sheet .bag { fill: var(--ground-deep); }
.chain-stage h3 .control-number { color: var(--oxidised); margin-right: var(--s1); }
.stage-facts { margin: var(--s3) 0 0; }
.stage-facts div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--s2) var(--s3); border-top: 1px solid var(--rule); padding: var(--s2) 0; }
.stage-facts dt { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.stage-facts dd { margin: 0; font-size: 0.98rem; }
.stage-chapter { font-family: var(--sans); font-weight: 700; margin: var(--s3) 0 0; }
.role-detail { background: var(--ground-deep); border: 1px solid var(--fynbos); border-radius: 6px; padding: var(--s4); margin-bottom: var(--s3); font-family: var(--text); }
.role-detail h3 { margin: 0 0 var(--s2); }
.role-stages-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: var(--s1); }
.role-stages { margin-bottom: var(--s2); }
.role-list li { margin-bottom: var(--s3); }
html:not(.js) .chain-controls { display: none; }
html:not(.js) .chain-stage[hidden], html:not(.js) .role-detail[hidden], html:not(.js) .dest-year[hidden] { display: block; }
html:not(.js) .chain-role-details { margin-top: var(--s4); }

/* ---------- diagrams: the same line vocabulary as the explorers ---------- */
.diagram { margin: var(--s4) 0 var(--s5); max-width: none; }
.diagram svg { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.diagram path, .diagram circle, .diagram ellipse, .diagram rect, .diagram line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.diagram text { fill: var(--ink); font-size: 14px; stroke: none; }
.diagram .label { font-size: 13px; font-weight: 500; }
.diagram .note { font-size: 12px; fill: var(--ink-faint); font-style: italic; }
.diagram .tick { font-size: 12px; fill: var(--ink-faint); }
.diagram .panel-title { font-family: var(--display); font-size: 17px; font-weight: 600; fill: var(--oxidised); }
.diagram .panel { stroke: var(--rule); }
.diagram .soft, .diagram .sand, .diagram .rain, .diagram .air, .diagram .heat, .diagram .vapour, .diagram .steam, .diagram .rays, .diagram .mesh { stroke: var(--ink-faint); }
.diagram .dotted { stroke-dasharray: 2 4; }
.diagram .dashed { stroke-dasharray: 5 4; }
.diagram .arrow { stroke: var(--ink-soft); }
.diagram .green, .diagram .root { stroke: var(--fynbos); }
.diagram .water, .diagram .arrow.water, .diagram .arrow.air { stroke: #5b86a8; }
.diagram .arrow.wind { stroke: var(--ink-soft); stroke-width: 2.4; }
.diagram .flower { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.diagram .seed, .diagram .grain { fill: var(--oxidised); stroke: none; }
.diagram .pod, .diagram .tray, .diagram .cup, .diagram .bag { fill: var(--ground-deep); }
.diagram .coat { fill: var(--ground-deep); stroke-width: 4; }
.diagram .coat-inner { stroke: var(--ink-faint); }
.diagram .ground-fill { fill: var(--ground-light); stroke: var(--ground-light); stroke-width: 5; }
.diagram .nick { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .embryo { fill: var(--fynbos-light); stroke: var(--fynbos); }
.diagram .soil { fill: var(--ground-deep); stroke: var(--ink-faint); }
.diagram .shade { fill: var(--ground-deep); stroke: none; }
.diagram .bar { fill: var(--fynbos-light); stroke: var(--fynbos); }
.diagram .red-line { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .cover { fill: #dfe5c4; stroke: var(--fynbos); stroke-dasharray: 3 3; }
.diagram .loop { stroke: var(--oxidised); stroke-dasharray: 4 4; }
.diagram .loop-head { stroke: var(--oxidised); }
.diagram .blade { stroke: var(--ink); stroke-width: 2.4; }
.diagram .cell { stroke-width: 2.4; }
.diagram .vacuole { fill: var(--ground-deep); stroke: var(--ink-faint); stroke-dasharray: 4 3; }
.diagram .compound { fill: var(--flower); stroke: var(--flower-deep); stroke-width: 1; }
.diagram .enzyme { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.diagram .scheme { fill: var(--ground); stroke: var(--rule); }
.diagram .sun { fill: var(--flower); stroke: var(--flower-deep); }
.diagram .layer { fill: var(--oxidised); fill-opacity: 0.18; stroke: var(--oxidised-deep); }
.diagram .sieve { stroke-width: 2; }
.diagram .band { fill: var(--oxidised); fill-opacity: 0.35; stroke: var(--oxidised); }
.diagram .overlap { fill: var(--flower); fill-opacity: 0.25; stroke: none; }
.diagram .box, .diagram .flask { fill: var(--ground-deep); }
.diagram .magnet { stroke: var(--oxidised); stroke-width: 2.4; }
.diagram .mark { fill: var(--oxidised); stroke: var(--oxidised-deep); }
.diagram .green-mark { fill: var(--fynbos); stroke: var(--fynbos); }
.diagram .label { stroke: none; }
.diagram path.label { fill: var(--on-oxidised); stroke: var(--ink); }
.diagram .tick { stroke: none; }
.diagram path.tick { stroke: var(--fynbos); stroke-width: 2.2; fill: none; }
.diagram figcaption { max-width: var(--measure); }

/* ---------- destinations chart ---------- */
.destinations { margin: var(--s6) 0; }
.destinations h2 { margin-top: 0; }
.dest-year h3 { margin-top: var(--s3); }
.dest-figure { margin: var(--s3) 0 var(--s4); }
.dest-chart { width: 100%; height: auto; display: block; background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); }
.dest-chart .grat { stroke: #c5cbba; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.dest-chart .equator { stroke: var(--ink-faint); stroke-dasharray: 4 4; }
.dest-chart .grat-label { fill: var(--ink-faint); font-size: 10px; }
.dest-chart .dest-arc { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.dest-chart .dest-disc { fill: var(--oxidised); fill-opacity: 0.55; stroke: var(--oxidised-deep); stroke-width: 1.2; }
.dest-chart .dest-approx { stroke-dasharray: 4 3; fill-opacity: 0.3; }
.dest-chart .dest-point { fill: var(--ground-light); stroke: var(--ink); stroke-width: 1.5; }
.dest-chart .dest-label { fill: var(--ink); font-size: 13px; font-weight: 500; paint-order: stroke; stroke: var(--ground-light); stroke-width: 3px; stroke-linejoin: round; }
.dest-chart .dest-note { fill: var(--ink-faint); font-size: 11px; font-style: italic; }
.dest-chart .dest-leader { fill: none; stroke: var(--ink-soft); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.dest-chart .dest-origin circle { fill: var(--fynbos); stroke: var(--ground-light); stroke-width: 1.5; }
.dest-chart .dest-europe { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.dest-chart .dest-inset { fill: var(--ground); stroke: var(--ink-soft); stroke-width: 1; }
.dest-chart .dest-legend text { fill: var(--ink-faint); }
.destinations table { width: 100%; max-width: var(--measure); margin: var(--s3) 0; }
.destinations caption { font-family: var(--sans); font-size: 0.85rem; text-align: left; color: var(--ink-soft); padding-bottom: var(--s2); }
.destinations td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dest-total, .dest-caveat { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- directory ---------- */
.role-guide h3 { margin-top: var(--s4); }
.directory { margin: var(--s6) 0; }
.directory h2 { margin-top: 0; }
.player-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s4); }
.player { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); margin: 0; }
.player h3 { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.player-place { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); }
.player-roles { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.role-tag { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; color: var(--fynbos); border: 1px solid var(--fynbos); border-radius: 999px; padding: 0.1rem 0.6rem; }
.player-claim { font-size: 0.98rem; }
.player-limits { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); }
.player-sources { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-top: var(--s2); }
.player-sources summary { color: var(--ink-soft); }
.player-basis { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s1) 0 0; }
.directory-note { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); margin-top: var(--s4); }

/* ---------- atlas ---------- */
.atlas { margin: var(--s7) 0; }
.atlas h2 { margin-top: 0; }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.atlas-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); font-family: var(--sans); }
.atlas-filters, .atlas-zoom { display: flex; flex-wrap: wrap; gap: var(--s1); }
.atlas-controls button { font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.3rem 0.7rem; border: 1px solid var(--ink-soft); border-radius: 4px; background: var(--ground-light); color: var(--ink); cursor: pointer; }
.atlas-controls button[aria-pressed="true"] { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.atlas-zoom button { min-width: 2.2rem; }
html:not(.js) .atlas-controls { display: none; }
.atlas-map { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 6px; background: var(--ground-light); font-family: var(--sans); cursor: grab; touch-action: none; }
.atlas-map:active { cursor: grabbing; }
.atlas-map .sea { fill: #d9e3e4; stroke: none; }
.atlas-map .atlas-view { transform-origin: 0 0; }
.atlas-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-map .coast { stroke: var(--ink); stroke-width: 1.3; }
.atlas-map .layer-coast path { fill: none; }
.atlas-map .province { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 6 4; }
.atlas-map .road { stroke: #b8ad9c; stroke-width: 0.8; }
.atlas-map .road-major { stroke: #9c8f7c; stroke-width: 1.3; }
.atlas-map .river { stroke: #5b86a8; stroke-width: 1; }
.atlas-map .river-label { fill: #3f6482; font-size: 11px; font-style: italic; }
.atlas-map .grat { stroke: #c5cbba; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.atlas-map .grat-label { fill: var(--ink-faint); font-size: 10px; }
.atlas-map .scalebar line { stroke: var(--ink); stroke-width: 1.5; }
.atlas-map .scalebar text { fill: var(--ink); font-size: 11px; }
.atlas-map .north { fill: var(--ink); font-size: 14px; font-weight: 700; }
.atlas-map .north-arrow { stroke: var(--ink); stroke-width: 1.5; }
.atlas-map .place { cursor: pointer; }
.atlas-map .place .mark { fill: var(--oxidised); stroke: var(--ground-light); stroke-width: 1.5; }
.atlas-map .place-region .mark-region { fill: var(--fynbos-light); fill-opacity: 0.25; stroke: var(--fynbos); stroke-dasharray: 3 3; }
.atlas-map .place-reserve .mark { fill: var(--fynbos); }
.atlas-map .place-river .mark { fill: none; stroke: #5b86a8; stroke-width: 2; }
.atlas-map .place-label { fill: var(--ink); font-size: 12.5px; font-weight: 500; paint-order: stroke; stroke: var(--ground-light); stroke-width: 3px; stroke-linejoin: round; }
.atlas-map .place-region .place-label { font-style: italic; fill: var(--fynbos); }
.atlas-map .place:hover .place-label, .atlas-map .place.is-selected .place-label { fill: var(--oxidised); font-weight: 700; }
.atlas-map .place.is-selected .mark { stroke: var(--oxidised); stroke-width: 3; }
.atlas-map .place.is-dimmed { opacity: 0.25; }
.atlas-map .place:focus-visible { outline: none; }
.atlas-map .place:focus-visible .mark { stroke: var(--focus); stroke-width: 4; }
.atlas-attribution { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin: var(--s2) 0; }
.atlas-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.atlas-legend li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.legend-mark { width: 0.8rem; height: 0.8rem; display: inline-block; background: var(--oxidised); border-radius: 50%; }
.legend-region .legend-mark { background: var(--fynbos-light); border: 1px dashed var(--fynbos); border-radius: 50%; }
.legend-reserve .legend-mark { background: var(--fynbos); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.legend-landmark .legend-mark { transform: rotate(45deg); border-radius: 0; }
.legend-river .legend-mark { background: #5b86a8; height: 0.25rem; border-radius: 2px; width: 1.2rem; }
.atlas-detail { background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s4); margin-bottom: var(--s4); min-height: 6rem; }
.atlas-detail h3 { margin: 0 0 var(--s1); }
.atlas-detail-empty { font-family: var(--sans); color: var(--ink-faint); margin: 0; }
html:not(.js) .atlas-detail { display: none; }
.atlas-list { list-style: none; padding: 0; margin: 0; max-height: 44rem; overflow: auto; border-top: 1px solid var(--rule); }
.atlas-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.atlas-list li.is-selected { background: var(--ground-light); }
.atlas-list h3 { margin: 0 0 var(--s1); font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.place-link { font: inherit; font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--oxidised); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 0.16em; }
.place-kind { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--ink-faint); }
.atlas-list p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---------- market: the dark heap field ---------- */
.page-market-cycle .chart { background: var(--heap); color: var(--on-heap); border-radius: 6px; padding: var(--s4); margin: var(--s4) 0 var(--s5); }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.chart .grid { stroke: #4a3a30; stroke-width: 0.6; }
.chart .axis { stroke: var(--on-heap-soft); stroke-width: 1; }
.chart .tick, .chart .unit { fill: var(--on-heap-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .unit { font-size: 12px; font-style: italic; }
.chart .series { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-price { stroke: #f0a35c; }
.chart .series-fob { stroke: var(--on-heap); }
.chart .series-stock { stroke: #f0a35c; }
.chart .series-crop { stroke: #9fc78b; }
.chart .series-use { stroke: var(--on-heap); }
.chart .series-share { stroke: #f0a35c; }
.chart .series-label { font-size: 12px; font-weight: 700; }
.chart .series-label.series-price, .chart .series-label.series-stock, .chart .series-label.series-share { fill: #f0a35c; }
.chart .series-label.series-fob, .chart .series-label.series-use { fill: var(--on-heap); }
.chart .series-label.series-crop { fill: #9fc78b; }
.chart .series-model { stroke-dasharray: 6 5; stroke-width: 2; }
.chart .series-model-0 { stroke: #f0a35c; }
.chart .series-model-1 { stroke: #9fc78b; }
.chart .series-model-2 { stroke: #d9c7b6; }
.chart .series-label.series-model-0 { fill: #f0a35c; }
.chart .series-label.series-model-1 { fill: #9fc78b; }
.chart .series-label.series-model-2 { fill: #d9c7b6; }
.chart .bar { fill: #f0a35c; }
.chart .bar-label { fill: var(--on-heap); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart figcaption { color: var(--on-heap-soft); margin-top: var(--s3); }
.chart figcaption strong { color: var(--on-heap); }
.chart-data { margin-top: var(--s2); font-family: var(--sans); font-size: 0.85rem; color: var(--on-heap-soft); }
.chart-data summary { color: var(--on-heap); }
.chart-data table { margin-top: var(--s2); color: var(--on-heap); }
.chart-data th, .chart-data td { border-color: #4a3a30; }
.chart-yield { max-width: 40rem; }
.model { border: 2px dashed var(--oxidised); border-radius: 8px; padding: var(--s4) var(--s4) var(--s2); margin: var(--s6) 0; background: var(--ground-light); }
.model h2 { margin-top: 0; }
.explorer-loop .explorer-stage { background: var(--heap); border-color: var(--heap); }
.explorer-loop .explorer-stage text { fill: var(--on-heap); }
.explorer-loop .loop-arc { stroke: var(--on-heap-soft); stroke-width: 2; fill: none; }
.explorer-loop .loop-arc-lag { stroke: #f0a35c; stroke-width: 4; stroke-dasharray: 2 8; }
.explorer-loop marker path { fill: var(--on-heap-soft); stroke: none; }
.explorer-loop .loop-lag-label { fill: #f0a35c; font-size: 14px; font-style: italic; }
.explorer-loop .loop-disc { fill: #3b2419; stroke: var(--on-heap-soft); stroke-width: 1.5; }
.explorer-loop .loop-title { font-size: 15px; font-weight: 700; }
.explorer-loop .loop-centre { font-family: var(--display); font-size: 26px; fill: var(--on-heap); }
.explorer-loop .loop-node { cursor: pointer; }
.explorer-loop .loop-node:hover .loop-disc, .explorer-loop .loop-node.is-selected .loop-disc { fill: #f0a35c; stroke: #f0a35c; }
.explorer-loop .loop-node.is-selected .loop-title, .explorer-loop .loop-node:hover .loop-title { fill: var(--heap); }
.explorer-loop .loop-node:focus-visible { outline: none; }
.explorer-loop .loop-node:focus-visible .loop-disc { stroke: var(--flower); stroke-width: 4; }

/* ---------- notes, next, sources ---------- */
.source-notes { margin-top: var(--s7); border-top: 1px solid var(--rule); padding-top: var(--s3); font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
.source-notes summary { font-weight: 700; color: var(--ink); }
.notes-text { margin: var(--s3) 0; }
.source-list { padding-left: 1.4rem; }
.read-next { margin-top: var(--s6); }
.read-next h2 { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; margin: 0 0 var(--s3); color: var(--oxidised); }
.read-next ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s3); }
.read-next a { display: block; padding: var(--s3) var(--s4); background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; }
.read-next a:hover .next-label { color: var(--oxidised); }
.next-label { font-family: var(--display); font-size: 1.2rem; font-weight: 600; display: block; }
.next-desc { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.bibliography { padding-left: 1.4rem; }
.bib-title { margin-bottom: var(--s1); }
.bib-meta { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin-bottom: var(--s1); }
.bib-note { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- forms (brief builder) ---------- */
form { font-family: var(--sans); }
form h2 { font-family: var(--display); }
.field { margin: 0 0 var(--s4); border: 0; padding: 0; min-width: 0; }
label, legend { display: block; font-weight: 700; margin-bottom: var(--s1); font-size: 0.95rem; }
.required { font-weight: 400; color: var(--ink-soft); }
.hint { margin: 0 0 var(--s2); }
input[type="text"], select, textarea { display: block; width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--ground-light); border: 1px solid var(--ink-soft); border-radius: 4px; padding: var(--s2) var(--s3); }
textarea { font-family: var(--text); line-height: 1.5; resize: vertical; }
#brief-output { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; min-height: 20rem; }
.check { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s2); }
.check input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; flex: none; accent-color: var(--oxidised); }
.check label { font-weight: 400; margin: 0; }
[aria-invalid="true"] { border: 2px solid var(--oxidised); }
.field-error { color: var(--oxidised-deep); font-size: 0.9rem; margin: var(--s1) 0 0; }
.error-summary { border: 2px solid var(--oxidised); background: var(--ground-light); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: 4px; }
.error-summary h2 { margin: 0 0 var(--s2); font-size: 1.1rem; }
.error-summary ul { margin: 0; }
.actions, .lead-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0 var(--s3); }
.lead-actions { margin: var(--s4) 0 0; }
.button { display: inline-block; font-family: var(--sans); font-size: 0.98rem; font-weight: 700; line-height: 1.3; padding: var(--s2) var(--s4); border-radius: 4px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; text-align: center; }
.button:hover { background: var(--ground-deep); color: var(--ink); }
.button.primary { background: var(--oxidised); border-color: var(--oxidised); color: var(--on-oxidised); }
.button.primary:hover { background: var(--oxidised-deep); border-color: var(--oxidised-deep); color: var(--on-oxidised); }
.button[disabled] { opacity: 0.5; cursor: default; }
.status { min-height: 1.5rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
.brief-result { border-top: 3px double var(--rule); margin-top: var(--s5); padding-top: var(--s4); }
.handoff { background: var(--ground-light); border: 1px solid var(--rule); padding: var(--s4); margin-top: var(--s5); border-radius: 6px; }
.handoff-links a { display: inline-block; margin: 0 var(--s4) var(--s2) 0; font-family: var(--sans); font-weight: 700; }
.handoff-note { display: block; margin: 0 0 var(--s3); }
.spec-list { font-size: 1.1rem; }
.contact-list li, .contact-block { margin-bottom: var(--s3); }
.contact-detail { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- colophon ---------- */
.colophon { background: var(--heap); color: var(--on-heap); margin-top: var(--s7); }
.colophon-inner { max-width: var(--wide); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s6); }
.colophon a { color: var(--on-heap); }
.colophon a:hover { color: var(--flower); }
.library-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s4); font-family: var(--sans); font-size: 0.92rem; }
.index-group h2 { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--on-heap-soft); margin: 0 0 var(--s2); }
.index-group ul { list-style: none; padding: 0; margin: 0; }
.index-group li { margin-bottom: var(--s1); }
.index-group a { text-decoration: none; }
.index-group a:hover, .index-group a[aria-current="page"] { text-decoration: underline; }
.colophon-text { font-size: 0.95rem; color: var(--on-heap-soft); }
.colophon-wordmark { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--on-heap); margin: 0 0 var(--s2); }
.colophon-meta { font-family: var(--sans); font-size: 0.8rem; }

/* ---------- responsive ---------- */
@media (max-width: 64rem) {
  .explorer-layout, .atlas-layout, .home-intro, .home-market { grid-template-columns: minmax(0, 1fr); }
  .atlas-list { max-height: none; }
  .frame.with-aside { grid-template-columns: minmax(0, 1fr); }
  .side-notes { position: static; border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s4); margin-top: var(--s5); }
  .colophon-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  html { font-size: 104%; }
  .frame { padding-left: var(--s3); padding-right: var(--s3); }
  .masthead-inner, .colophon-inner { padding-left: var(--s3); padding-right: var(--s3); }
  figure.plate.plate-bleed img { height: clamp(11rem, 30vh, 16rem); }
  .plate-bleed figcaption { padding-left: var(--s3); padding-right: var(--s3); }
  dl.definitions div, dl.timeline div { grid-template-columns: 1fr; gap: var(--s1); }
  .way-list a { grid-template-columns: 3.5rem 1fr; }
  .way-icon { width: 3.5rem; height: 3.5rem; }
  .actions .button, .lead-actions .button { width: 100%; }
  .explorer-controls button { flex: 1 1 8rem; }
  .chain-controls button { flex: 1 1 7rem; }
  .pane-hint { display: block; }
  .diagram-pane > svg { width: auto; }
  .diagram-pane.pane-m > svg { min-width: 44rem; }
  .diagram-pane.pane-l > svg { min-width: 52rem; }
  .diagram-pane.pane-xl > svg { min-width: 60rem; }
  .stage-facts div { grid-template-columns: 1fr; gap: var(--s1); }
  .player-list { grid-template-columns: minmax(0, 1fr); }
  .atlas-map { cursor: default; }
  h2 { margin-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .explorer-stage .stage-frame, .explorer-controls button, .atlas-map .place .mark, .explorer-loop .loop-disc { transition: stroke 160ms ease-out, fill 160ms ease-out, background 160ms ease-out; }
}
@media print {
  .masthead nav, .skip-link, .actions, .lead-actions, .atlas-controls, .explorer-controls, .chain-controls, .lang-invite, .lang-switch { display: none; }
  .chain-stage[hidden], .role-detail[hidden], .dest-year[hidden] { display: block; }
  html { background: #fff; }
  .stage-detail[hidden] { display: block; }
  .source-notes { display: block; }
}

/* ---------- language switch and the Japanese invitation (21 October 2026) ---------- */
.lang-switch { margin-left: auto; font-family: var(--sans); font-size: 0.9rem; }
.lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); }
.lang-switch a { display: inline-block; color: var(--on-oxidised); text-decoration: none; border: 1px solid var(--on-oxidised); border-radius: 999px; padding: 0.15rem 0.75rem; line-height: 1.4; }
.lang-switch a:hover { color: var(--flower); border-color: var(--flower); }
.lang-switch a[aria-current="page"] { background: var(--on-oxidised); color: var(--oxidised); }
.lang-invite { max-width: var(--wide); margin: var(--s4) auto 0; padding: var(--s4) var(--s5); background: var(--ground-light); border: 1px solid var(--rule); border-radius: 6px; }
.lang-invite[hidden] { display: none; }
.lang-invite h2 { margin: 0 0 var(--s2); font-size: 1.45rem; }
.lang-invite p { margin: 0 0 var(--s3); max-width: var(--measure); }
.lang-invite .actions { margin: 0; }
.lang-note { font-family: var(--sans); font-size: 0.8em; font-weight: 400; color: var(--ink-faint); }
.home-japanese h2 { margin-top: 0; }
.has-lead .lang-invite { margin-bottom: var(--s4); }
@media (max-width: 40rem) {
  .lang-switch { margin-left: 0; }
  .lang-invite { margin-left: var(--s3); margin-right: var(--s3); padding: var(--s3) var(--s4); }
}

/* ---------- Japanese pages: system fonts, strict line breaking, upright type ----------
   Japanese text uses the reader's own system fonts (no CJK web font is shipped). Mincho for display,
   gothic for reading and controls; the Latin wordmark keeps Bodoni Moda. */
body.lang-ja {
  --display: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", "Bodoni Moda", serif;
  --text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Alegreya Sans", sans-serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Alegreya Sans", sans-serif;
  font-family: var(--text);
  line-height: 1.85;
  letter-spacing: 0.02em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  font-kerning: normal;
}
.lang-ja h1, .lang-ja h2, .lang-ja h3, .lang-ja .next-label, .lang-ja .library-title, .lang-ja .aside-heading, .lang-ja dl dt { font-family: var(--display); font-weight: 600; letter-spacing: 0; line-height: 1.3; font-variation-settings: normal; }
.lang-ja h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }
.lang-ja h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.lang-ja h3 { font-size: 1.2rem; }
.lang-ja .standfirst { font-style: normal; font-size: 1.15rem; line-height: 1.75; }
.lang-ja .wordmark, .lang-ja .colophon-wordmark { font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; }
.lang-ja .way-title, .lang-ja .preference-label, .lang-ja .button, .lang-ja .lang-switch { letter-spacing: 0.02em; }
.lang-ja .way-text, .lang-ja .next-desc, .lang-ja figcaption, .lang-ja .notes-text { line-height: 1.7; }
.lang-ja p, .lang-ja li, .lang-ja dd { text-align: start; hanging-punctuation: allow-end; }
.lang-ja ol.route li, .lang-ja ol.questions li { line-height: 1.8; }