/* ---------------------------------------------------------------- fonts
   Self-hosted (PROJECT.md item 6). Generated from the Google Fonts CSS,
   latin and latin-ext only: this content has five distinct non-ASCII
   characters and no cyrillic, greek, or vietnamese, so those subsets are
   not carried. unicode-range is preserved, so a browser still fetches only
   the faces a page actually needs (~371KB for a latin reader) rather than
   all 649KB stored here.

   Note: U+2192 (the -> in lineage chains) is in NO Google subset for any of
   these families, so it renders in a system fallback. That was equally true
   on the CDN; self-hosting neither caused nor fixed it. */
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-grotesk-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-grotesk-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-grotesk-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-grotesk-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('fonts/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/source-serif-4-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('fonts/source-serif-4-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/source-serif-4-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fragment Mono';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fragment Mono';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* The Land Cruiser Codex — Chart Room
   Dark instrument surface; lineage ink is semantic, never decorative.
   HD #C7A468 · SW #92B8D8 · PR #C87848 · FJ #A3B26B · REF neutral.
   One curve: cubic-bezier(.2,.7,.2,1). 150/350/600ms. Travel ≤12px. */

:root{
  --bg:#111612; --bg2:#151b16; --bg3:#1a211b;
  --ink:#E8E4DA; --ink2:rgba(232,228,218,.66); --ink3:rgba(232,228,218,.52);  /* .40 gave 3.25:1, below AA for the small text this carries */
  --line:rgba(232,228,218,.14); --line2:rgba(232,228,218,.08);
  --hd:#C7A468; --sw:#92B8D8; --pr:#C87848; --fj:#A3B26B; --nt:#A8B2A6;
  --lc:var(--nt);
  --disp:"Schibsted Grotesk",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"Fragment Mono","SFMono-Regular",monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --t1:150ms; --t2:350ms; --t3:600ms;
  --spine:44px;
  /* focus is an instrument affordance, never a lineage signal */
  --focus:#E8E4DA;
  /* spacing scale, derived from this design's own frequencies (see REPLY-TO-CODE.md) */
  --s1:4px;--s2:6px;--s3:8px;--s4:10px;--s5:14px;
  --s6:18px;--s7:26px;--s8:34px;--s9:46px;--s10:64px;
}
[data-line="hd"]{--lc:var(--hd)}[data-line="sw"]{--lc:var(--sw)}
[data-line="pr"]{--lc:var(--pr)}[data-line="fj"]{--lc:var(--fj)}
[data-line="ref"]{--lc:var(--nt)}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--spine) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 18px/1.68 var(--serif);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--hd);color:#131209}
a{color:var(--ink);text-decoration-color:rgba(232,228,218,.35);text-underline-offset:3px}
a:hover{color:#fff;text-decoration-color:var(--hd)}
code{font-family:var(--mono);font-size:.8em;background:rgba(232,228,218,.07);
  border:1px solid var(--line2);border-radius:3px;padding:.08em .4em;white-space:nowrap}
code.chain{white-space:normal}
.ar{color:var(--ink3);padding:0 .15em}
.skip{position:fixed;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--bg);
  padding:var(--s3) var(--s5);font:500 13px var(--disp)}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Route changes move focus to the arriving heading so it is announced. Those
   headings carry tabindex="-1", so they are never reached by tabbing and the
   ring is not wayfinding: Chrome's focus-visible heuristic paints it even after
   a mouse click, boxing the page title on every navigation. Announcement does
   the work; suppress the ring on programmatic targets only. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--s7)}

/* ============================== spine ============================== */
.spine{
  position:fixed;inset:0 0 auto 0;z-index:40;height:var(--spine);
  display:flex;align-items:center;gap:var(--s6);padding:0 var(--s5);
  background:color-mix(in oklab,var(--bg) 86%,black);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2);
}
.sp-brand{display:flex;align-items:center;gap:var(--s4);text-decoration:none;flex:0 0 auto}
.sp-mark{font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--hd);
  border:1px solid color-mix(in oklab,var(--hd) 50%,transparent);
  padding:var(--s1) var(--s2);border-radius:2px}
.sp-name{font:500 13px var(--disp);letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.sp-name em{font:italic 500 13px var(--serif);color:var(--ink2)}
.sp-years{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;gap:var(--s4);
  transition:opacity var(--t2) var(--ease),filter var(--t2) var(--ease)}
.sp-yr{font:400 11px var(--mono);letter-spacing:.04em;color:var(--ink3);flex:0 0 auto}
.sp-years svg{flex:1 1 auto;min-width:0;height:34px;display:block}
/* Scoped to the svg, not the whole .sp-years container: that container also
   holds the "1951"/"2026" year labels, which are real text at --ink3, already
   at AA against --bg. Desaturating the container recedes the labels along with
   the track, compounding to an effective 1.61:1. The track alone (ticks and
   segment bars, no text) carries the "you are outside time" signal; the labels
   stay legible. */
html[data-part="ref"] .sp-years svg{opacity:.35;filter:saturate(.35)}
.spsvg .tick{stroke:var(--line2)}
.spsvg .trk{stroke:rgba(232,228,218,.10);stroke-width:1}
.spsvg .seg{fill:color-mix(in oklab,var(--lc) 45%,transparent);transition:fill var(--t1) var(--ease)}
.spsvg a:hover .seg{fill:var(--lc)}
.spsvg .seg.cur{fill:var(--lc)}
.spsvg .cursor{stroke:var(--ink);stroke-width:1;opacity:0;transition:opacity var(--t2) var(--ease)}
.spsvg .cursor.on{opacity:.9}
.sp-parts{display:flex;gap:2px;flex:0 0 auto}
/* 24x24 minimum is WCAG 2.2 SC 2.5.8. The narrow numerals ("I", "V") measured
   19px wide before this and were the only two targets on the site that failed.
   Centred rather than padded asymmetrically so the roman numerals stay optically
   even across all eight, which uneven padding would visibly break. */
.sp-parts a{font:400 11px/1 var(--mono);color:var(--ink3);text-decoration:none;
  min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--s2);border-radius:2px;transition:color var(--t1) var(--ease),background var(--t1) var(--ease)}
.sp-parts a:hover{color:var(--ink);background:rgba(232,228,218,.06)}
.sp-parts a.cur{color:var(--lc);background:color-mix(in oklab,var(--lc) 13%,transparent)}
.sp-k{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;cursor:pointer;
  font:400 11px var(--mono);color:var(--ink2);background:none;
  border:1px solid var(--line);border-radius:3px;padding:var(--s2) var(--s3);
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.sp-k:hover{border-color:var(--hd);color:var(--ink)}
.sp-k kbd{font:inherit;color:var(--ink3)}
.spk-code{letter-spacing:.06em}

/* spine tooltip — instant, replaces the native delayed title */
.sptip{position:fixed;z-index:70;transform:translateX(-50%);
  font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--ink);
  width:max-content;max-width:min(300px,calc(100vw - 24px));
  background:color-mix(in oklab,var(--bg) 70%,black);border:1px solid var(--line);
  border-radius:2px;padding:var(--s2) var(--s4);pointer-events:none;opacity:0;
  transition:opacity var(--t1) var(--ease)}
.sptip.on{opacity:1}

main{padding-top:var(--spine)}

/* ============================== home ============================== */
.hero{padding:calc(48px + 4vh) 0 var(--s9);border-bottom:1px solid var(--line2)}
.hero .eb{font:400 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 var(--s7)}
.hero h1{font:600 clamp(46px,7.4vw,96px)/1.02 var(--disp);letter-spacing:-.022em;margin:0}
.hero h1 .the{display:block;font:italic 300 clamp(20px,2.2vw,28px)/1 var(--serif);
  color:var(--ink2);letter-spacing:.02em;margin-bottom:var(--s4)}
.hero h1 em{font-style:normal;color:var(--hd)}
.hero .dek{font:300 clamp(19px,2vw,23px)/1.55 var(--serif);color:var(--ink2);
  max-width:56ch;margin:var(--s7) 0 0;text-wrap:pretty}
.stats{display:flex;gap:0;margin-top:var(--s9);border-top:1px solid var(--line2)}
.stat{flex:1;padding:var(--s6) var(--s6) 0 0}
.stat + .stat{padding-left:var(--s6);border-left:1px solid var(--line2)}
.stat b{display:block;font:500 27px/1.1 var(--disp);letter-spacing:-.01em}
.stat span{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

.chartwrap{padding:var(--s10) 0 var(--s8)}
.chead,.lhead,.striphead{display:flex;align-items:baseline;gap:var(--s6);margin-bottom:var(--s7)}
.chead h2,.lhead h1,.striphead h2{font:600 21px/1 var(--disp);letter-spacing:-.01em;margin:0}
.chead p,.lhead p,.striphead p{font:400 12px var(--mono);color:var(--ink3);margin:0}

/* hero chart (svg from build) */
.chartscroll{overflow-x:auto;scrollbar-width:thin;container-type:inline-size}
svg.lin{width:100%;min-width:760px;height:auto;display:block}
.lin .tick{stroke:var(--line2)}
.lin .ty{font:400 10px var(--mono);fill:var(--ink3)}
.lin .trk{font:400 10.5px var(--mono);letter-spacing:.1em;fill:var(--ink2);text-transform:uppercase}
/* honest degradation: below the legibility threshold the chart drops its labels */
@container (max-width:640px){.lin .trk,.lin .ty,.lin .kinlab{display:none}}
.lin .base{stroke:rgba(232,228,218,.09)}
.lin .seg rect{fill:color-mix(in oklab,var(--lc) 13%,transparent);
  stroke:color-mix(in oklab,var(--lc) 50%,transparent);stroke-width:1;
  transition:fill var(--t1) var(--ease)}
.lin .seg text{font:400 11.5px var(--mono);fill:var(--ink);pointer-events:none}
.lin .seg text.out{fill:var(--ink2)}
.lin .seg:hover rect,.lin .seg:focus-visible rect{fill:color-mix(in oklab,var(--lc) 34%,transparent)}
.lin .kin{stroke:var(--pr);stroke-width:1.2;fill:none}
.lin .spirit{stroke:var(--fj);stroke-width:1.2;stroke-dasharray:2 5;fill:none}
.lin .kinlab{font:italic 300 10.5px var(--serif);fill:var(--ink3)}

/* 8.1 decoder — the archetype: the code behind the thing */
.dcx{margin:var(--s8) 0 var(--s4)}
.dcx-in{position:absolute;opacity:0;width:1px;height:1px;border:0;padding:0}
.dcx-row{display:flex;justify-content:center;align-items:flex-start;gap:var(--s7);
  font-family:var(--mono);cursor:text;flex-wrap:wrap;min-height:118px}
.dcx-col{text-align:center;max-width:240px}
.dcx-g{font-size:clamp(42px,6.4vw,64px);line-height:1;letter-spacing:.02em;color:var(--ink)}
.dcx-col.dim .dcx-g{color:var(--ink3)}
.dcx-col[data-line] .dcx-g{color:var(--lc)}
.dcx-l{border-top:1px solid rgba(232,228,218,.35);margin-top:var(--s5);padding-top:var(--s3);
  font-size:10px;letter-spacing:.14em;color:var(--ink3);white-space:nowrap}
.dcx-col[data-line] .dcx-l{border-top-color:color-mix(in oklab,var(--lc) 50%,transparent);color:var(--lc)}
.dcx-m{font:400 12.5px/1.45 var(--disp);color:var(--ink2);margin-top:var(--s1)}
.dcx-caret .dcx-g{color:var(--hd);animation:dcxblink 1.1s steps(1) infinite}
@keyframes dcxblink{50%{opacity:0}}
.dcx-chips{display:flex;gap:var(--s5);justify-content:center;margin-top:var(--s7);flex-wrap:wrap}
.dcx-chip{font:400 11.5px var(--mono);letter-spacing:.02em;cursor:pointer;background:none;
  border:1px solid color-mix(in oklab,var(--lc) 40%,transparent);
  color:color-mix(in oklab,var(--lc) 78%,white);border-radius:2px;padding:var(--s2) var(--s4);
  transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.dcx-chip:hover{background:color-mix(in oklab,var(--lc) 13%,transparent);border-color:var(--lc)}
.dcx-res{margin-top:var(--s7);border-top:1px solid var(--line2);max-height:300px;overflow-y:auto}
.dcx-res:empty{display:none}
.dcx-res .rrow{padding:var(--s4) var(--s3)}

/* palette (decoder-styled search) */
#palq{
  width:100%;background:none;border:0;color:var(--ink);
  font:400 clamp(20px,2.6vw,26px)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:var(--s7) var(--s7);outline:none}
.dec-in::placeholder,#palq::placeholder{color:var(--ink3);text-transform:none;letter-spacing:.02em}
.pal-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line2)}
.dseg{padding:var(--s5) var(--s6) var(--s6);border-right:1px solid var(--line2)}
.dseg:last-child{border-right:0}
.dseg b{display:block;font:400 19px var(--mono);letter-spacing:.1em;color:var(--hd)}
.dseg i{display:block;font:400 9.5px var(--mono);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);margin:var(--s3) 0 3px}
.dseg span{font:400 13.5px/1.45 var(--serif);color:var(--ink2);display:block;text-wrap:pretty}
.palres{border-top:1px solid var(--line2);max-height:320px;overflow-y:auto}
.palres:empty,.pal-read:empty{display:none}
.rrow{display:flex;align-items:baseline;gap:var(--s5);padding:var(--s4) var(--s7);cursor:pointer;
  text-decoration:none;transition:background var(--t1) var(--ease)}
.rrow code{background:none;border:0;padding:0;font-size:13px;color:var(--lc);min-width:7ch}
.rrow .rt{font:400 15px var(--serif);color:var(--ink)}
.rrow .rk{font:400 10.5px var(--mono);color:var(--ink3);margin-left:auto;text-align:right}
.rrow:hover,.rrow.sel{background:color-mix(in oklab,var(--lc) 13%,transparent)}
/* The hover/selected tint lightens the row background toward the lineage
   ink, which pushes .rk's already-dim --ink3 below AA for the lighter
   lineages (found via axe on a selected Heavy-Duty result, HZJ79). One tier
   brighter on the states that add the tint. */
.rrow:hover .rk,.rrow.sel .rk{color:var(--ink2)}
.rnone{padding:var(--s5) var(--s7);font:italic 300 14px var(--serif);color:var(--ink3)}

/* ledger */
.ledgerwrap{padding:var(--s8) 0 var(--s4)}
.ledger{border-top:1px solid var(--line)}
.lg-part,.lg-sec{display:flex;align-items:baseline;gap:var(--s5);text-decoration:none;
  padding:var(--s4) var(--s2);border-bottom:1px solid var(--line2);
  transition:background var(--t1) var(--ease)}
.lg-part{padding-top:var(--s7)}
.lg-part .lg-rn{font:400 12px var(--mono);color:var(--lc);min-width:3.2ch}
.lg-part .lg-name{font:600 17px var(--disp);letter-spacing:-.005em;color:var(--ink)}
.lg-part .lg-tag{font:400 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lc);margin-left:auto;padding-left:var(--s5)}
.lg-sec .lg-num{font:400 11.5px var(--mono);color:var(--ink3);min-width:3.2ch;text-align:right}
.lg-sec .lg-name{font:400 16px var(--serif);color:var(--ink2)}
.lg-lead{flex:1;border-bottom:1px dotted rgba(232,228,218,.22);transform:translateY(-4px);min-width:24px}
.lg-sec .lg-pg{font:400 10.5px var(--mono);color:var(--ink3)}
.lg-part:hover,.lg-sec:hover{background:color-mix(in oklab,var(--lc) 13%,transparent)}
.lg-sec:hover .lg-name{color:var(--ink)}

/* fleet strip */
.stripwrap{padding:var(--s9) 0 var(--s10)}
.strip{display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s4);scrollbar-width:thin}
.strip .card{flex:0 0 216px;scroll-snap-align:start;position:relative;text-decoration:none;
  border:1px solid var(--line2);border-radius:3px;overflow:hidden;background:var(--bg2)}
.strip .card img{width:100%;height:140px;object-fit:cover;display:block;
  filter:saturate(.75) contrast(1.02);transition:filter var(--t2) var(--ease),opacity var(--t2) var(--ease);
  opacity:.88}
.strip .card:hover img{filter:saturate(1);opacity:1}
.strip .cl{position:absolute;left:8px;bottom:8px;font:400 10.5px var(--mono);letter-spacing:.08em;
  color:var(--ink);background:color-mix(in oklab,var(--bg) 78%,black);
  border:1px solid color-mix(in oklab,var(--lc) 50%,transparent);
  border-radius:2px;padding:3px var(--s3)}

/* ============================== document ============================== */
.doc{max-width:1080px}
.part{padding-top:var(--s7)}
.phead{padding:var(--s9) 0 var(--s3)}
.phead .ptag{font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lc)}
.phead h1{font:600 clamp(34px,4.6vw,58px)/1.05 var(--disp);letter-spacing:-.02em;margin:var(--s5) 0 0;
  max-width:22ch;text-wrap:pretty}
.phead .chain{font:italic 300 18px/1.5 var(--serif);color:var(--ink2);margin:var(--s5) 0 0;max-width:60ch}
section{padding:var(--s8) 0 var(--s3);max-width:820px}
section h2{font:600 clamp(24px,3vw,32px)/1.15 var(--disp);letter-spacing:-.015em;margin:0 0 var(--s6);
  display:flex;align-items:baseline;gap:var(--s5);text-wrap:pretty}
section h2 .n{font:400 13px var(--mono);color:var(--lc);letter-spacing:.06em;flex:0 0 auto}
h3{font:600 18.5px/1.3 var(--disp);letter-spacing:-.005em;margin:var(--s8) 0 var(--s4)}
p{margin:0 0 var(--s6);max-width:72ch;text-wrap:pretty}
p.lead{font:300 21px/1.6 var(--serif);color:var(--ink);max-width:64ch}
p.lbl{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);
  margin:var(--s8) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--line2);max-width:none}
.xref{text-decoration:none;border-bottom:1px dotted rgba(232,228,218,.4)}
.xref:hover{border-bottom-color:var(--hd)}
a.xref code{color:var(--ink)}
ul.bl{margin:0 0 var(--s6);padding:0;list-style:none;max-width:70ch}
ul.bl li{padding:3px 0 3px var(--s7);position:relative}
ul.bl li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:1px;background:var(--lc)}

/* tables */
figure.tbl{margin:var(--s6) 0 var(--s7);border:1px solid var(--line2);border-radius:3px;
  background:var(--bg2)}
/* wide matrices take the full measure rather than scrolling sideways */
figure.tbl:not(.spec){width:min(1024px,calc(100vw - 56px));max-width:none}
.tbl table{border-collapse:collapse;width:100%;min-width:0;table-layout:auto}
.tbl.spec table{min-width:0}
.tbl th{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:bottom}
.tbl:not(.spec) th{padding:var(--s4) var(--s4);letter-spacing:.1em}
.tbl:not(.spec) td{font-size:13.5px;padding:var(--s3) var(--s4)}
.tbl td code{white-space:normal;overflow-wrap:anywhere}
.tbl td{font:400 14.5px/1.5 var(--serif);color:var(--ink2);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(232,228,218,.025)}
.tbl td:first-child{color:var(--ink)}
.tbl.spec td:first-child{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);width:34%}
/* Evolution tables (Year/Change) are 2 columns, so they take the same "spec"
   class as Field/Detail datasheets, and the label dimming above was meant for
   plain-text labels like "ROLE". A bare year ("1960") matches CODE_RE and gets
   wrapped in <code>, whose own translucent background composites with the
   dimmed ink3 text to 4.26:1, under AA, even though ink3 alone clears it on
   every other spec table. The year is real data, not a category label, so it
   keeps full ink regardless. */
.tbl.spec td:first-child code{color:var(--ink)}

/* 1.2 The Four Series: one card per lineage, 2x2 */
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin:var(--s7) 0 var(--s8);
  max-width:none}
.qcard{background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  border-top:2px solid color-mix(in oklab,var(--lc) 62%,transparent);
  padding:var(--s6) var(--s6) var(--s2);display:flex;flex-direction:column}
.qcard > p{font:400 15.5px/1.6 var(--serif);color:var(--ink2);margin:0 0 var(--s5);max-width:none}
.qcard > p strong{font:600 15.5px/1.6 var(--disp);letter-spacing:-.005em;color:var(--lc)}
.qtag{font:400 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lc);
  margin-bottom:var(--s4)}
.qcard figure.tbl{margin:auto 0 var(--s5);border:0;border-top:1px solid var(--line2);border-radius:0;
  background:none;overflow:visible}
.qcard .tbl td{font-size:14px;padding:var(--s3) 0}
.qcard .tbl.spec td:first-child{width:42%;padding-right:var(--s5);font-size:10px}
.qcard .tbl thead{display:none}
@media (max-width:900px){
  .quad{grid-template-columns:1fr;gap:var(--s5)}
  .qcard{padding:var(--s6) var(--s6) var(--s1)}
  .qcard .tbl.spec td:first-child{width:38%}
}
@media (max-width:480px){
  .qcard .tbl.spec table,.qcard .tbl.spec tbody,.qcard .tbl.spec tr,.qcard .tbl.spec td{display:block;width:auto}
  .qcard .tbl.spec td:first-child{width:auto;padding:var(--s3) 0 0;border-bottom:0}
  .qcard .tbl.spec td:last-child{padding:1px 0 var(--s3)}
}

/* wide matrices: below the fold of legibility, each row becomes a labelled block */
@media (max-width:900px){
  figure.tbl:not(.spec){width:auto}
  .tbl:not(.spec) thead{display:none}
  .tbl:not(.spec) table,.tbl:not(.spec) tbody,.tbl:not(.spec) tr,.tbl:not(.spec) td{display:block;width:auto}
  .tbl:not(.spec) tr{padding:var(--s5) var(--s5);border-bottom:1px solid var(--line)}
  .tbl:not(.spec) tr:last-child{border-bottom:0}
  .tbl:not(.spec) td{border:0;padding:2px 0;display:grid;grid-template-columns:38% 1fr;gap:var(--s5);
    align-items:baseline}
  .tbl:not(.spec) td::before{content:attr(data-l);font:400 9.5px var(--mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink3)}
  .tbl:not(.spec) td:first-child{padding-bottom:var(--s2)}
  .tbl:not(.spec) td:first-child::after{content:""}
  .tbl:not(.spec) tr:hover td{background:none}
}
@media (max-width:480px){
  .tbl:not(.spec) td{grid-template-columns:1fr;gap:1px}
}

/* timeline */
ol.tl{list-style:none;margin:var(--s6) 0 var(--s7);padding:0;max-width:74ch}
ol.tl li{display:flex;gap:var(--s6);padding:var(--s3) 0;border-bottom:1px solid var(--line2)}
ol.tl li:last-child{border-bottom:0}
ol.tl .yr{font:400 12.5px/1.6 var(--mono);color:var(--lc);flex:0 0 4ch}
ol.tl .ev{font:400 15.5px/1.55 var(--serif);color:var(--ink2)}
ol.tl .ev strong{color:var(--ink);font-weight:500}

/* plates */
figure.ph{margin:var(--s7) 0 var(--s8)}
figure.ph img{width:100%;height:auto;display:block;border-radius:2px;
  border:1px solid var(--line2);filter:saturate(.82) contrast(1.03)}
figure.ph figcaption{font:400 11px var(--mono);color:var(--ink3);margin-top:var(--s4);letter-spacing:.02em}
figure.ph .pln{color:var(--lc);margin-right:var(--s3)}
figure.ph figcaption a{color:var(--ink3)}
/* every plate, lead or sheet, is a button that opens the full-screen viewer.
   The button is the image's own footprint; zoom cursor says what it does, and
   the ring is instrument ink (--focus), never lineage ink (D21). */
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:2px;overflow:hidden}
.zoom:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the plate sheet (D27): PLATES head (label, hairline, count), then the grid.
   Thumbnails are cropped to one ratio on purpose; a plate sheet is a grid, and
   a row of mixed aspect ratios reads as an accident. The lead plate is never
   cropped. */
.plateshead{display:flex;align-items:center;gap:var(--s5);margin:var(--s9) 0 var(--s6)}
.plateshead .lbl{font:400 10.5px var(--mono);letter-spacing:.16em;color:var(--lc)}
.plateshead .hair{flex:1;height:1px;background:var(--line2)}
.plateshead .ct{font:400 10.5px var(--mono);color:var(--ink3)}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:var(--s6) var(--s5);margin:0 0 var(--s8)}
.sheet figure.ph{margin:0}
.sheet figure.ph img{aspect-ratio:3/2;object-fit:cover;background:var(--bg2)}
.sheet figure.ph figcaption{font-size:10px;line-height:1.55}
@media (max-width:480px){
  .sheet{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .sheet figure.ph figcaption{font-size:9.5px}
}
/* the full-screen plate viewer: one dialog for the whole document. Entry and
   exit animate with @starting-style + allow-discrete; reduced motion collapses
   it to a short fade. */
dialog.lb{border:0;padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  background:transparent;color:var(--ink);overflow:hidden;
  opacity:0;transform:scale(.97);
  transition-property:opacity,transform,display,overlay;transition-duration:.28s;
  transition-timing-function:var(--ease);transition-behavior:allow-discrete}
dialog.lb[open]{opacity:1;transform:scale(1)}
@starting-style{dialog.lb[open]{opacity:0;transform:scale(.97)}}
dialog.lb::backdrop{background:rgba(9,12,10,0);backdrop-filter:blur(0px);
  transition:display .28s allow-discrete,overlay .28s allow-discrete,
  background-color .28s var(--ease),backdrop-filter .28s var(--ease)}
dialog.lb[open]::backdrop{background:rgba(9,12,10,.94);backdrop-filter:blur(3px)}
@starting-style{dialog.lb[open]::backdrop{background:rgba(9,12,10,0);backdrop-filter:blur(0px)}}
.lb .frame{width:100%;height:100dvh;display:grid;grid-template-rows:1fr auto;gap:0}
.lb .stage{min-height:0;display:grid;place-items:center;padding:var(--s7) var(--s7) 0;
  overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom}
.lb .stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:2px;border:1px solid var(--line2)}
.lb .meta{padding:var(--s6) var(--s7) calc(var(--s7) + env(safe-area-inset-bottom));
  font:400 11px/1.7 var(--mono);color:var(--ink3);letter-spacing:.02em;
  border-top:1px solid var(--line2);background:color-mix(in oklab,var(--bg) 86%,black)}
.lb .meta .pln{color:var(--nt);margin-right:var(--s3)}
.lb .meta .cap{color:var(--ink);display:block;margin-bottom:var(--s2);font-size:12px}
.lb .meta a{color:var(--ink2)}
.lb .meta .row{display:flex;gap:var(--s5);flex-wrap:wrap}
.lb .meta .k{color:rgba(232,228,218,.38);margin-right:var(--s2)}
.lb .x{position:absolute;top:var(--s5);right:var(--s5);z-index:3;
  font:400 11px var(--mono);color:var(--ink2);background:color-mix(in oklab,var(--bg) 70%,black);
  border:1px solid var(--line);border-radius:2px;padding:6px 11px;cursor:pointer}
.lb .x:hover{color:var(--ink)}
.lb .x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  dialog.lb{transform:none;transition-duration:.1s}
  @starting-style{dialog.lb[open]{transform:none}}
}
strong{font-weight:500;color:var(--ink)}

/* ============================== views ============================== */
/* no data-view (no JS): full document flow, home on top. */
html[data-view="home"] .doc > *{display:none}
html[data-view="home"] .contents{display:none}
html[data-view="page"] .home{display:none}
html[data-view="page"] .contents{display:none}
html[data-view="contents"] .home{display:none}
html[data-view="contents"] .doc > *{display:none}
html[data-view="contents"] .doc > footer{display:block}
/* .pgnav is fixed to the bottom; these four paddings are clearance for it,
   not rhythm, so they stay literal and outside the --s* scale. */
html[data-view="contents"] .contents{padding-bottom:70px}
html[data-view="page"] .doc > *{display:none}
html[data-view="page"] .doc > .curpart{display:block}
html[data-view="page"] .doc > section.cur{display:block}
html[data-view="page"] .curpart > section{display:none}
html[data-view="page"] .curpart > section.cur{display:block}
/* a section page keeps its part header as a compact breadcrumb band */
html[data-view="page"] .curpart:not(.introview) > *:not(section){display:none}
html[data-view="page"] .curpart:not(.introview) > .phead{
  display:flex;align-items:baseline;gap:var(--s5);padding:var(--s7) 0 0;margin:0}
html[data-view="page"] .curpart:not(.introview) > .phead h1{
  font:400 12px var(--mono);letter-spacing:.06em;color:var(--ink2);margin:0;
  max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-view="page"] .curpart:not(.introview) > .phead .chain{display:none}

/* part intro page: full-bleed band in lineage ink */
html[data-view="page"] .curpart.introview > .phead{
  padding:var(--s10) var(--s7) var(--s9);margin:var(--s7) calc(50% - 50vw) var(--s4);
  width:100vw;background:color-mix(in oklab,var(--lc) 13%,transparent);
  border-top:1px solid color-mix(in oklab,var(--lc) 50%,transparent);
  border-bottom:1px solid var(--line2)}
html[data-view="page"] .curpart.introview > .phead .ptag{color:var(--lc)}
html[data-view="page"] .curpart.introview > .phead h1{color:var(--ink)}
html[data-view="page"] .curpart.introview > .phead > *{max-width:1024px;margin-left:auto;margin-right:auto;width:100%}
html[data-view="page"] .curpart.introview > .phead h1{margin-top:var(--s5)}

/* series page: the plate opens the page, full-bleed under the title */
html[data-view="page"] .curpart > section.cur,
html[data-view="page"] .doc > section.cur{display:flex;flex-direction:column}
html[data-view="page"] .cur > h2{order:-2}
html[data-view="page"] .cur > figure.plate0{order:-1}
/* also h1: feedback is the one .cur section with no ancestor part (site.js
   PAGES gives it partId:null), so it supplies its own top-level heading
   instead of a part h1 supplying one, matching Contents' fix below */
html[data-view="page"] .cur > h2,html[data-view="page"] .cur > h1{font-size:clamp(30px,4.4vw,46px);margin-top:var(--s6)}
html[data-view="page"] .cur > figure.plate0{width:100vw;margin:var(--s7) calc(50% - 50vw) var(--s8)}
html[data-view="page"] .cur > figure.plate0 img{
  height:min(56vh,560px);object-fit:cover;border:0;border-radius:0;
  border-top:1px solid color-mix(in oklab,var(--lc) 50%,transparent);
  border-bottom:1px solid var(--line2)}
html[data-view="page"] .cur > figure.plate0 figcaption{max-width:1024px;margin:var(--s4) auto 0;padding:0 var(--s7)}
html[data-view="page"] .fb.cur{display:block}
html[data-view="page"] .doc > footer{display:none}
html[data-view="page"] .doc{padding-bottom:110px}

/* the develop: plates arrive like a print in the bath */
html[data-view="page"] .cur figure.plate0 img{animation:develop var(--t3) var(--ease) both}
@keyframes develop{
  from{opacity:0;filter:saturate(.2) contrast(.72) brightness(.8)}
  to{opacity:1;filter:saturate(.82) contrast(1.03)}
}
html.arriving [data-view] .cur{animation:none}
.cur,.curpart.introview .phead{animation:arrive var(--t2) var(--ease) both}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* view transitions: the selection becomes the page */
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t2);
  animation-timing-function:var(--ease)}
::view-transition-group(sel){animation-duration:var(--t3);animation-timing-function:var(--ease)}
.vt-sel{view-transition-name:sel}

/* the cover: home is one viewport, the chart fills it */
html[data-view="home"] .home{height:calc(100dvh - var(--spine));display:flex;flex-direction:column;
  overflow:hidden;padding-bottom:54px}
html[data-view="home"] .hero{padding:clamp(16px,3.6vh,44px) 0 clamp(10px,2.2vh,24px);flex:0 0 auto}
html[data-view="home"] .hero h1{font-size:clamp(36px,4.6vh + 1.6vw,80px)}
html[data-view="home"] .hero h1 .the{margin-bottom:var(--s2);font-size:clamp(16px,2vh,24px)}
html[data-view="home"] .hero .dek{margin-top:clamp(8px,1.5vh,20px);font-size:clamp(15px,1.8vh,21px)}
html[data-view="home"] .stats{margin-top:clamp(12px,2.4vh,36px)}
html[data-view="home"] .stat b{font-size:clamp(19px,2.4vh,27px)}
html[data-view="home"] .chartwrap{flex:1 1 auto;min-height:0;padding:clamp(12px,2.4vh,30px) 0 var(--s2);display:flex}
html[data-view="home"] .chartwrap > .wrap{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
html[data-view="home"] .chead{margin-bottom:var(--s5)}
html[data-view="home"] .chartscroll{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center;overflow:visible}
html[data-view="home"] svg.lin{min-width:0;width:100%;height:auto;max-height:100%}
/* short viewports: the cover scrolls rather than shrinking the chart into micro-type */
@media (max-width:760px),(max-height:760px){
  html[data-view="home"] .home{height:auto;display:block;overflow:visible;padding-bottom:76px}
  html[data-view="home"] .chartscroll{overflow-x:auto;display:block}
  html[data-view="home"] svg.lin{min-width:700px;width:100%;height:auto;max-height:none}
}

/* prev / next */
.pgnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:stretch;
  background:color-mix(in oklab,var(--bg) 86%,black);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line2)}
.pgnav[hidden]{display:none}
.pgnav a{flex:1;display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);text-decoration:none;
  font:400 12px var(--mono);color:var(--ink2);min-width:0;
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.pgnav a:hover{background:color-mix(in oklab,var(--lc) 13%,transparent);color:var(--ink)}
.pgnav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgnav .pg-home{flex:0 0 auto;border-left:1px solid var(--line2);border-right:1px solid var(--line2);
  color:var(--ink3)}
.pgnav .pg-next{justify-content:flex-end;text-align:right}
.pgnav a.off{visibility:hidden}
.pgnav i{font-style:normal;color:var(--lc)}

/* ============================== feedback + footer ============================== */
.fb{border-top:1px solid var(--line);margin-top:var(--s10);padding-top:var(--s9);max-width:820px}
.fb h1 .n{color:var(--hd)}
.fb form{max-width:640px}
.fb .row{display:flex;gap:var(--s6)}
.fb .row label{flex:1}
.fb label{display:block;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 var(--s5)}
/* opacity:.7 removed: it compounded with --ink3's own alpha to an effective
   .36, well under AA, on real instructional text ("optional", "optional, for
   a reply") a reader needs in order to know a field isn't required. */
.fb .opt{color:var(--ink3);text-transform:none;letter-spacing:.02em}
.fb input[type="text"],.fb input[type="email"],.fb select,.fb textarea{
  display:block;width:100%;margin-top:var(--s2);background:var(--bg2);color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:var(--s4) var(--s4);
  font:400 15px var(--serif);outline:none;
  transition:border-color var(--t1) var(--ease)}
.fb input:focus,.fb select:focus,.fb textarea:focus{border-color:var(--hd)}
.fb .hp{position:absolute;left:-9999px}
.fb button{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:var(--hd);color:#131209;border:0;border-radius:3px;padding:var(--s4) var(--s7);
  transition:filter var(--t1) var(--ease)}
.fb button:hover{filter:brightness(1.08)}
.fbstatus{font:italic 300 14px var(--serif);color:var(--ink2);margin-left:var(--s5)}
/* Out-of-service notice. Hidden unless build.py marks the key as unset, so the
   configured path carries no dead styling and needs no separate markup. */
.fbnotice{display:none}
/* border in var(--lc), not a lineage ink: this section is data-line="ref", so
   --lc resolves to the reference neutral. A taupe rule here would be decorative
   use of Heavy-Duty (D21), the same rule the focus ring obeys. */
.fb[data-formkey="unset"] .fbnotice{display:block;font:400 14px/1.6 var(--serif);
  color:var(--ink);border-left:2px solid var(--lc);padding:var(--s3) 0 var(--s3) var(--s5);
  margin:var(--s6) 0 0;max-width:640px}
.fb[data-formkey="unset"] form{opacity:.45;pointer-events:none}
footer{border-top:1px solid var(--line2);margin-top:var(--s10);padding:var(--s7) 0 var(--s9)}
footer p{font:400 11.5px/1.7 var(--mono);color:var(--ink3);max-width:88ch}
footer a{color:var(--ink3)}
/* .ai previously carried opacity:.75 on top of footer p's already-dimmed
   --ink3, compounding to an effective 3.16:1, under AA, and making the
   required AI-disclosure line the least legible text on the page for no
   editorial reason (D10 sets its wording, not its prominence). It now reads
   at the same weight as its three sibling footer paragraphs. */

/* ============================== palette (decoder modal) ============================== */
.pal{position:fixed;inset:0;z-index:60;background:rgba(7,10,8,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pal[hidden]{display:none}
.palbox{width:min(700px,93vw);margin:11vh auto 0;background:var(--bg2);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);animation:arrive var(--t1) var(--ease) both;
  transition:border-color var(--t1) var(--ease)}
.palbox:focus-within{border-color:var(--focus)}
#palq{font-size:21px;padding:var(--s6) var(--s7)}
.pal-read .dseg{padding:var(--s4) var(--s6) var(--s5)}
.pal-read .dseg b{font-size:16px}
.palres{max-height:44vh}
.palfoot{display:flex;gap:var(--s6);padding:var(--s4) var(--s6);border-top:1px solid var(--line2)}
.palfoot span{font:400 10px var(--mono);color:var(--ink3)}

/* ============================== responsive ============================== */
/* The numerals are the only wayfinding on a phone: they never leave. The year
   spine is the luxury — it goes first, since it needs width to mean anything. */
@media (max-width:1120px){.sp-years{display:none}}
@media (max-width:760px){
  .sp-name{display:none}
  .spk-code{display:none}
  .hero{padding-top:var(--s8)}
  .stats{flex-wrap:wrap}
  .stat{flex:1 1 42%;padding-bottom:var(--s5)}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .fb .row{flex-direction:column;gap:0}
  .wrap{padding:0 var(--s6)}
  .dseg{padding:var(--s4) var(--s5)}
  .lg-part .lg-tag{display:none}
  section h2{flex-wrap:wrap}
  html[data-view="page"] .cur > figure.plate0 img{height:44vh}
}
@media (max-width:520px){
  .sp-parts{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .sp-parts::-webkit-scrollbar{display:none}
  .sp-parts a{padding:var(--s3) var(--s4)}
}

/* ============================== motion discipline ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================== print ============================== */
@media print{
  :root{--bg:#fff;--bg2:#fff;--bg3:#fff;--ink:#1a1c18;--ink2:#3c3f39;--ink3:#6b6e66;
    --line:#c9c6bc;--line2:#dedbd2}
  .spine,.pgnav,.pal,.skip,.fb form{display:none!important}
  html[data-view] .home,html[data-view] .doc > *{display:block!important}
  main{padding-top:0}
  body{font-size:11pt}
  figure.ph img,.sheet img{filter:none}
  .plateshead .hair{border-top:1px solid #999;background:none}
  dialog.lb{display:none!important}
  a{text-decoration:none}
}