/* ---------------------------------------------------------------- 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;
  /* One Wink motion register (D40). The roll's constants are tokens rather than
     JS literals so there is one source of truth: site.js reads these back with
     getComputedStyle at boot. Tuned and owner-approved; do not drift them. */
  --roll-dur:1600ms; --roll-stagger:140ms; --roll-tail:170ms;
  --roll-overshoot:7px; --roll-blur:1.2px;
  --roll-suf-dur:950ms; --roll-suf-stagger:70ms;
  /* winkSwap, the register's small move, plus the throttle-safe fallback margin */
  --wink-out:130ms; --wink-in:260ms; --wink-mount:280ms; --wink-fallback:320ms;
  --wink-lift:9px; --wink-drop:12px; --wink-ease-out:cubic-bezier(.4,0,1,1);
}
[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)}

/* 8.8's sourcing register (D51c), generated from src/claims.tsv on every build. Seven columns
   since D80a split Cited into Toyota and other, so .tbl.spec's first-child rule cannot reach it;
   the count columns are named rather than picked by position, because a column added here would
   otherwise silently restyle the wrong cell, which is the trap the decode-in-place expansion
   already fell into. The bar is --nt, the neutral: a sourcing rate is not a lineage signal and
   must never take a lineage ink. */
.tbl.srcreg td:first-child{width:24%}
.tbl.srcreg td.num{font:400 12.5px var(--mono);text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink)}
.tbl.srcreg td.surf{font-size:12.5px;color:var(--ink3);line-height:1.45}
/* A fixed track so the rows are comparable at a glance; without it each bar is as wide as its own
   number and the column reads as an underline rather than as a meter. */
.srcbar{position:relative;display:block;width:64px;height:3px;margin:5px 0 1px auto;
  background:var(--line)}
/* Two segments on one track (D80a): i is everything cited, b is the Toyota part of it, drawn over
   i from the same left edge so the remainder reads as the lower grade continuing the same meter.
   The grade ramp is a dilution of --nt rather than a second hue, because the four lineage inks stay
   reserved and a sourcing grade is not a lineage signal. */
.srcbar i,.srcbar b{position:absolute;left:0;top:0;display:block;height:100%}
.srcbar i{background:color-mix(in oklab,var(--nt) 45%,transparent)}
.srcbar b{background:var(--nt)}
.tbl.srcreg tfoot td{border-top:1px solid var(--line);border-bottom:0;color:var(--ink)}
.tbl.srcreg tfoot td:first-child{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* Under 900px the house stacks a table into label-over-value pairs. A right-aligned figure is
   correct in a column and wrong in a stack, where it drifts away from the label that names it, so
   the alignment and the fixed meter track are both handed back to the stacked layout. */
@media (max-width:900px){
  .tbl.srcreg td:first-child{width:auto}
  .tbl.srcreg td.num{text-align:left;white-space:normal}
  .srcbar{margin-left:0}
}

/* 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 5ch}
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)}
/* The footer's fourth paragraph was the AI-disclosure line (D10), struck by
   the owner on 2026-09-12 (D88); the `.ai` class it carried went with it, and
   the corrections pointer that shared the paragraph stayed. The rule that used
   to sit here set opacity:.75 on top of footer p's already-dimmed --ink3,
   compounding to an effective 3.16:1, under AA. Do not reintroduce either. */

/* ============================== 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}
}
/* The spine's budget at 375: padding 20 + brand 29 + numerals 236 + toggle 28 + search chip 31 + three
   gaps 30 = 374. It was 407 without the toggle and 453 with it (measured 2026-09-11, Chrome at 393), and
   the search chip left the screen on every phone. The numerals keep their 24px minimum target; the
   parts nav can now shrink and scroll, so a narrower device loses a numeral to a swipe and never a chip. */
@media (max-width:520px){
  .spine{gap:var(--s4);padding:0 var(--s4)}
  .sp-parts{flex:1 1 auto;min-width:0;gap:1px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .sp-parts::-webkit-scrollbar{display:none}
  .sp-parts a{padding:var(--s3) var(--s2)}
}

/* ============================== 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}
}

/* ---------------------------------------------- One Wink: decode in place */
/* The expansion row the prefix and suffix tables unfold. Styles live here
   rather than as inline cssText in the runtime, so the register is themable
   with the rest of the volume. */
/* The expansion cell is a td:first-child, so in a two-column spec table it
   inherited the uppercase letterspaced mono of the Position label column and
   restyled every meaning in the readout. Neutralise the cell; the .dcx-*
   classes inside carry their own type. tr.dcx-exp outranks .tbl.spec
   td:first-child on specificity rather than on source order. */
.tbl tr.dcx-exp > td,.tbl.spec tr.dcx-exp > td{
  padding:var(--s5) var(--s4) var(--s6);background:rgba(232,228,218,.02);
  font:400 12.5px/1.45 var(--disp);letter-spacing:normal;text-transform:none;
  color:var(--ink2);width:auto}
.dcx-exp .dcx-row{justify-content:flex-start;min-height:72px;gap:var(--s7);cursor:default}
.dcx-mini .dcx-g{font-size:30px}
.tbl tr.dcx-open > td{background:rgba(232,228,218,.02)}
.tbl tr[data-dcx]{cursor:pointer}

/* table interactions: roll sort, pin to compare */
.tbl th.sortable{cursor:pointer;user-select:none;transition:color var(--t1) var(--ease)}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th .sarr{margin-left:6px;color:var(--lc);opacity:0;transition:opacity var(--t1) var(--ease)}
.tbl th[aria-sort] .sarr{opacity:1}
.tbl tr.pinned{background:color-mix(in oklab,var(--lc) 7%,transparent)}
.pintag{font:400 9px var(--mono);letter-spacing:.16em;color:var(--lc);margin-left:8px}
.cmp{margin:var(--s4) 0 var(--s8)}
/* the grid scrolls sideways inside itself, the way a wide table does: two pins at 375 wide
   are 441px of grid, and left visible they widened the whole page to 459. Nothing sits below
   the grid at rest; y is hidden so a cell's 12px wink-in never shows a vertical scrollbar */
.cmp-grid{display:grid;gap:0 var(--s7);margin-top:var(--s5);align-items:baseline;overflow-x:auto;overflow-y:hidden}
.cmp-grid .cg{font-family:var(--mono);font-size:24px;line-height:1;color:var(--ink);padding:0 0 10px}
.cmp-grid .cf{font:400 9.5px var(--mono);letter-spacing:.16em;color:var(--ink3);padding:8px 0;border-top:1px solid rgba(232,228,218,.14)}
.cmp-grid .cv{font:400 12.5px/1.5 var(--disp);color:var(--ink2);padding:8px 0;border-top:1px solid rgba(232,228,218,.14)}
.cmp-grid .cv.dim{color:var(--ink3);font-style:italic}
/* the one ranked mark is instrument ink and weight: a larger figure is not a lineage signal (D21) */
.cmp-grid .cv.top{color:var(--ink);font-weight:600}

/* ============================== Sources mode (D85) ============================== */
/* docs/handoff/sources-mode/README.md is the spec; every value below is its own. Seven new
   inks, each paired with an underline construction so the construction alone identifies the
   grade; none of them nears the four lineage inks or the focus ring. Oxide rose is never text.
   Reading mode paints nothing: every rule that shows a mark is gated on html[data-src="on"],
   and the base .src rule below is layout-neutral (a transparent underline, no padding). */
:root{
  --src-toyota:#7FD6BE; --src-institution:#6FB9B3; --src-reference:#8E97C6; --src-press:#A98BC0;
  --src-community:#B78AA9; --src-tertiary:#9A8C98; --src-none:#C27C8C; --src-declared:#A8B2A6;
  --src-surface:#222622;
  /* the same inks as channels, for the 13% fill, the 50% rule and the filter's 30% */
  --src-toyota-rgb:127 214 190; --src-institution-rgb:111 185 179; --src-reference-rgb:142 151 198;
  --src-press-rgb:169 139 192; --src-community-rgb:183 138 169; --src-tertiary-rgb:154 140 152;
  --src-none-rgb:194 124 140; --src-declared-rgb:168 178 166;
}

/* the mark, both modes: nothing painted, nothing moved. The transparent underline exists so the
   350ms fade has a property to run on when the mode changes. */
.src{--src-a:1;--src-i:var(--src-declared-rgb);--src-ls:solid;--src-w:1px;
  text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:1px;
  text-decoration-color:transparent;text-underline-offset:3px;text-decoration-skip-ink:none;
  transition:text-decoration-color var(--t1) var(--ease),background-color var(--t1) var(--ease),
    box-shadow var(--t1) var(--ease),padding var(--t1) var(--ease)}
html.src-fade .src{transition-duration:var(--t2)}
.src[data-grade="toyota"]{--src-i:var(--src-toyota-rgb);--src-ls:solid;--src-w:2px}
.src[data-grade="institution"]{--src-i:var(--src-institution-rgb);--src-ls:solid;--src-w:1px}
.src[data-grade="reference"]{--src-i:var(--src-reference-rgb);--src-ls:double;--src-w:1px}
.src[data-grade="press"]{--src-i:var(--src-press-rgb);--src-ls:dashed;--src-w:1px}
.src[data-grade="community"]{--src-i:var(--src-community-rgb);--src-ls:dotted;--src-w:1px}
.src[data-grade="tertiary"]{--src-i:var(--src-tertiary-rgb);--src-ls:wavy;--src-w:1px}
.src[data-family="none"]{--src-i:var(--src-none-rgb)}
.src[data-family="declared"]{--src-i:var(--src-declared-rgb)}

/* sources on */
html[data-src="on"] .src{cursor:default}
html[data-src="on"] .src a{cursor:pointer}
html[data-src="on"] .src[data-family="cited"]{text-decoration-style:var(--src-ls);
  text-decoration-thickness:var(--src-w);text-decoration-color:rgb(var(--src-i) / var(--src-a))}
html[data-src="on"] .src:hover,html[data-src="on"] .src:focus-visible,html[data-src="on"] .src.open{
  background:rgb(var(--src-i) / calc(.13 * var(--src-a)));padding:0 2px}
html[data-src="on"] .src[data-family="none"]{background:rgb(var(--src-none-rgb) / calc(.13 * var(--src-a)));
  box-shadow:inset 0 -1px 0 rgb(var(--src-none-rgb) / calc(.5 * var(--src-a)));padding:0 2px}
html[data-src="on"] .src[data-family="none"]:hover,html[data-src="on"] .src[data-family="none"]:focus-visible,
html[data-src="on"] .src[data-family="none"].open{background:rgb(var(--src-none-rgb) / calc(.2 * var(--src-a)))}
/* declared: a 5px hollow square at the head of the span, the reference grey */
html[data-src="on"] .src[data-family="declared"]::before{content:"";display:inline-block;width:5px;height:5px;
  box-sizing:border-box;border:1px solid rgb(var(--src-declared-rgb) / var(--src-a));margin-right:4px;
  vertical-align:3px}
/* hedged: a mono tilde at the head of the span in the grade ink */
html[data-src="on"] .src[data-hedged]::before{content:"~";display:inline;width:auto;height:auto;border:0;
  font:400 .7em/1 var(--mono);vertical-align:.4em;margin-right:1px;color:rgb(var(--src-i) / var(--src-a))}
/* both: the square comes first, drawn as four hairlines behind the tilde's own box */
html[data-src="on"] .src[data-family="declared"][data-hedged]::before{display:inline-block;padding-left:9px;
  background:
    linear-gradient(var(--src-declared),var(--src-declared)) 0 1px/5px 1px no-repeat,
    linear-gradient(var(--src-declared),var(--src-declared)) 0 5px/5px 1px no-repeat,
    linear-gradient(var(--src-declared),var(--src-declared)) 0 1px/1px 5px no-repeat,
    linear-gradient(var(--src-declared),var(--src-declared)) 4px 1px/1px 5px no-repeat}
/* the filter (11.2): every mark not kept drops to 30%, underline and fill alike */
html[data-srcf] .src{--src-a:.3}
html[data-srcf~="toyota"] .src[data-grade="toyota"],html[data-srcf~="institution"] .src[data-grade="institution"],
html[data-srcf~="reference"] .src[data-grade="reference"],html[data-srcf~="press"] .src[data-grade="press"],
html[data-srcf~="community"] .src[data-grade="community"],html[data-srcf~="tertiary"] .src[data-grade="tertiary"],
html[data-srcf~="none"] .src[data-family="none"],html[data-srcf~="declared"] .src[data-family="declared"]{--src-a:1}
/* The stacked table below 900px lays each cell out as a two-column grid, and a grid makes every
   child element its own item: a split cell's two marks and the separator between them would land
   in three cells of that grid instead of one run of text. In reading mode the marks therefore
   have no box at all there (display:contents), which leaves the grid with exactly the items it had
   before the marks existed. In sources mode the cell becomes a block with the label held in the
   same 38% column by absolute position, so the value stays one inline run and the marks paint. */
@media (max-width:900px){
  html:not([data-src="on"]) .tbl:not(.spec) td .src{display:contents}
  html[data-src="on"] .tbl:not(.spec) td{display:block;position:relative;padding-left:calc(38% + var(--s5))}
  html[data-src="on"] .tbl:not(.spec) td::before{position:absolute;left:0;top:3px;width:38%}
}
@media (max-width:480px){
  html[data-src="on"] .tbl:not(.spec) td{padding-left:0}
  html[data-src="on"] .tbl:not(.spec) td::before{position:static;display:block;margin-bottom:1px}
}

/* the toggle: a second instrument control on the spine, left of the search chip */
.sp-src{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;height:28px;padding:0 var(--s4);
  cursor:pointer;background:none;border:1px solid var(--line);border-radius:3px;
  font:400 11px var(--mono);letter-spacing:.06em;color:rgba(232,228,218,.7);
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease),background var(--t1) var(--ease)}
.sp-src .fix{width:12px;height:12px;border-radius:50%;border:1px solid rgba(232,228,218,.5);
  position:relative;flex:0 0 auto;transition:border-color var(--t1) var(--ease)}
.sp-src .fix::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;background:var(--ink);opacity:0;transition:opacity var(--t1) var(--ease)}
.sp-src:hover{border-color:rgba(232,228,218,.5);color:var(--ink)}
.sp-src[aria-pressed="true"]{background:rgba(232,228,218,.13);border-color:rgba(232,228,218,.5);color:var(--ink)}
.sp-src[aria-pressed="true"] .fix{border-color:var(--ink)}
.sp-src[aria-pressed="true"] .fix::after{opacity:1}
@media (max-width:600px){
  .sp-src{width:28px;padding:0;justify-content:center}
  .sp-src .sp-src-l{display:none}
}
/* the arrival readout and the key row sit under the toggle in the spine tooltip's own dress */
.src-tip{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)}
.src-tip.on{opacity:1}
.src-tip.out{transition-duration:var(--t3)}
.src-keybtn{position:fixed;z-index:39;transform:translateX(-50%);font:400 10.5px/1.5 var(--mono);
  letter-spacing:.06em;color:var(--ink2);background:color-mix(in oklab,var(--bg) 70%,black);
  border:1px solid var(--line);border-radius:2px;padding:var(--s1) var(--s4);cursor:pointer;
  transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease),opacity var(--t1) var(--ease)}
.src-keybtn:hover,.src-keybtn[aria-expanded="true"]{color:var(--ink);border-color:rgba(232,228,218,.5)}
.src-keybtn[hidden]{display:none}
.src-key{position:fixed;z-index:39;width:420px;max-width:calc(100vw - 32px);padding:var(--s3) 0;
  background:var(--src-surface);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 12px 32px rgba(0,0,0,.5)}
.src-key[hidden]{display:none}
.src-key .src-kh{font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(232,228,218,.5);
  padding:var(--s2) var(--s5) var(--s3);display:flex;justify-content:space-between;gap:var(--s4)}
.src-krow{display:grid;grid-template-columns:max-content 1fr auto;gap:var(--s4);align-items:baseline;width:100%;
  text-align:left;background:none;border:0;padding:var(--s2) var(--s5);cursor:pointer;color:var(--ink2);
  font:400 12px/1.4 var(--disp);transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.src-krow:hover{background:rgba(232,228,218,.06);color:var(--ink)}
.src-krow[aria-pressed="true"]{background:rgba(232,228,218,.13);color:var(--ink)}
.src-krow .src-ks{font:400 13px var(--serif);color:var(--ink);white-space:nowrap}
.src-krow .src-kt b{font-weight:600;color:var(--ink)}
.src-krow .src-kn{font:400 11px var(--mono);color:rgba(232,228,218,.5);font-variant-numeric:tabular-nums}

/* the popup: one element, moved and refilled per claim */
#src-popup{position:fixed;z-index:50;width:340px;max-width:calc(100vw - 32px);padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;box-sizing:border-box;
  background:var(--src-surface);color:var(--ink);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);font:400 14px/1.45 var(--serif);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
#src-popup.on{opacity:1;transform:none;pointer-events:auto}
#src-popup[hidden]{display:none}
#src-popup:focus{outline:none}
#src-popup:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the top edge draws the grade's construction */
#src-popup[data-grade="toyota"]{border-top:2px solid var(--src-toyota)}
#src-popup[data-grade="institution"]{border-top:1px solid var(--src-institution)}
#src-popup[data-grade="reference"]{border-top:3px double var(--src-reference)}
#src-popup[data-grade="press"]{border-top:1px dashed var(--src-press)}
#src-popup[data-grade="community"]{border-top:1px dotted var(--src-community)}
#src-popup[data-grade="tertiary"]{padding-top:6px}
#src-popup[data-grade="tertiary"]::before{content:"                                                                                                    ";
  display:block;height:6px;line-height:6px;margin:0 -14px 6px;padding:0 14px;overflow:hidden;white-space:pre;
  font:400 6px/6px var(--mono);text-decoration:underline wavy var(--src-tertiary) 1px;text-underline-offset:1px;
  text-decoration-skip-ink:none;box-sizing:border-box}
#src-popup[data-family="none"]{border-top:1px solid rgba(194,124,140,.5)}
#src-popup[data-family="declared"]{border-top:1px solid var(--src-declared)}
/* the leader: 1px by 9px in the grade ink, from the mark's line to the popup's edge */
#src-popup .ldr{position:absolute;left:20px;top:-10px;width:1px;height:9px;background:var(--src-ink,var(--src-declared))}
#src-popup.up .ldr{top:auto;bottom:-10px}
.sp-eb{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(232,228,218,.5)}
.sp-eb .g{color:var(--src-ink,var(--src-declared));text-align:right}
#src-popup[data-family="none"] .sp-eb .g{color:var(--src-none)}
#src-popup[data-family="declared"] .sp-eb .g{color:var(--src-declared)}
.sp-hedge{font:400 11px var(--mono);color:rgba(232,228,218,.7)}
.sp-surf{font:600 14px/1.3 var(--disp);color:var(--ink)}
.sp-title{font:400 15px/1.4 var(--serif);color:var(--ink)}
.sp-loc{font:400 13px/1.4 var(--serif);color:rgba(232,228,218,.7)}
.sp-head{font:600 14px/1.3 var(--disp);color:var(--ink)}
#src-popup[data-family="none"] .sp-head{color:var(--src-none)}
.sp-line{font:400 14px/1.45 var(--serif);color:var(--ink)}
#src-popup.quiet .sp-surf,#src-popup.quiet .sp-title,#src-popup.quiet .sp-foot a.doc{color:rgba(232,228,218,.7)}
.sp-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:2px}
.sp-id{font:400 11px var(--mono);color:rgba(232,228,218,.5);margin-right:auto}
.sp-foot a{font:500 13px var(--disp);color:var(--ink);text-decoration:none}
.sp-foot a:hover{color:#fff}
.sp-foot a.reg{color:rgba(232,228,218,.7)}
.sp-foot a .arr{color:var(--src-ink,var(--src-declared))}
.sp-chip{font:400 11px var(--mono);letter-spacing:.02em;border:1px solid var(--line);background:none;
  color:var(--ink2);padding:3px 8px;border-radius:2px;cursor:pointer;
  transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.sp-chip:hover{color:var(--ink);border-color:rgba(232,228,218,.5)}
.sp-ask{font:400 11px var(--mono);letter-spacing:.04em;border:1px solid rgba(232,228,218,.5);
  background:rgba(232,228,218,.08);color:var(--ink);padding:5px 10px;border-radius:2px;text-decoration:none}
.sp-ask:hover{background:rgba(232,228,218,.13)}
/* below 600px the popup is not floated: it sits in the flow after the block that holds the mark */
@media (max-width:599px){
  #src-popup{position:relative;width:auto;max-width:none;margin:var(--s5) 0 var(--s6);
    transform:translateY(12px);transition-duration:var(--t2)}
  #src-popup.on{transform:none}
  #src-popup .ldr{top:-10px}
  #src-popup.up .ldr{top:-10px;bottom:auto}
  .sp-foot a,.sp-ask,.sp-chip{min-height:44px;display:inline-flex;align-items:center}
}

/* the section coverage readout (11.1) and the ledger heat (11.7): sources mode only */
.src-cov{display:none;font:400 11px var(--mono);letter-spacing:.02em;color:rgba(232,228,218,.5);
  margin:calc(-1 * var(--s3)) 0 var(--s6);max-width:none}
html[data-src="on"] .src-cov{display:block}
html[data-view="page"] .cur > .src-cov{order:-2}
html[data-view="page"] .curpart:not(.introview) > .phead .src-cov{display:none}
.phead .src-cov{margin:var(--s5) 0 0}
.lg-src{display:none;font:400 11px var(--mono);color:rgba(194,124,140,.7);text-align:right;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
html[data-src="on"] .lg-src{display:inline}

/* the know-a-source prefill (7): the filled lines read at ink 50% until edited */
.fb textarea.prefilled{color:rgba(232,228,218,.5)}
.fb textarea.prefilled:focus{border-color:var(--focus)}

@media (prefers-reduced-motion:reduce){
  #src-popup{transform:none}
}
@media print{
  #src-popup,.src-key,.src-keybtn,.src-tip,.src-cov,.lg-src,.sp-src{display:none!important}
}