/* back-zone.com — brand book v4.0 (pastel). The product's own 22 tokens, same laws:
   no frames, no radius, no gradients, every wash wearing its ink at 1px, the 8-scale for
   spacing, and the mark in ink and paper. */
:root{
  --kami:#FAF8F3; --kinu:#F2EFE7; --kuro:#211E19; --sumi:#1B1915;
  --hai:#6F6C61;  --usui:#A9A59A;
  --m-tint:#EFEAFB; --m-25:#DCD2F8; --m-wash:#B7A3F1; --m-75:#8F76E6; --m-ink:#6F51D9;
  --m-dark:#C9BCF6;
  --k-ink:#8F7300; --k-wash:#ECDC93; --k-tint:#F8F2D9;
  --a-ink:#B4483C; --a-wash:#F0B4AB; --a-tint:#FAE6E1;
  /* Series, in the book's order: violet · lilac · rose · plum · sand · stone. Rose and plum
     are the two that carry their own ink, and both were missing here — a series wash
     declared without its ink is an edgeless fill waiting to be drawn. */
  --s1c:#D5C9F7; --s2c:#F2ADC6; --s2i:#B4547E; --s3c:#CBA0DC; --s3i:#8A5B9E; --s4c:#DAD3C4;

  --paper:var(--kami); --sunk:var(--kinu); --ink:var(--sumi);
  --soft:var(--hai);   --faint:var(--usui);
  /* --line is the book's own hairline, sumi at 16%. --rule was a second, invented alpha
     (sumi at 30%) that appears in no token list; the book draws exactly one strong rule —
     the one under a table head — and draws it in solid sumi. So --rule is that rule now,
     and every other divider on the page is the hairline. */
  --line:rgba(27,25,21,.16); --rule:var(--sumi);
  --lw:var(--sumi); --lk:var(--sumi); --lz:var(--kami);

  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --g1:8px; --g2:16px; --g3:24px; --g4:40px; --g5:64px; --g6:104px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]){
    --paper:var(--kuro); --sunk:var(--sumi); --ink:var(--kami);
    --soft:var(--usui); --faint:var(--hai);
    --k-ink:var(--k-wash); --a-ink:var(--a-wash); --m-ink:var(--m-dark);
    /* Inside kuro, fuji draws — "plus fuji #C9BCF6 for lines inside kuro". The lines were
       being drawn in paper at 15% and 28%, a neutral the dark room does not own; they are
       fuji now, at the same two strengths the book builds --line from (its ink, thinned). */
    --line:rgba(201,188,246,.20); --rule:var(--m-dark);
    /* The tints select and fill on paper; on kuro there is no tint, so the ground shows
       through and the 1px ink does the drawing. Without this, every 8px status square and
       every rule bullet lit up as a near-white block at 14:1 against the room. */
    --m-tint:var(--kuro); --k-tint:var(--kuro); --a-tint:var(--kuro);
    --lw:var(--kami); --lk:var(--m-wash); --lz:var(--sumi);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
/* Body is the book's body: 16/1.65. It had drifted to 17/1.62, which put a third size in
   the page — 16px in the feature blocks, 17px in the prose — for no reason a reader gains. */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--m-wash);color:var(--sumi)}
/* The book's em: not a slant. Italic is a fourth voice the brand does not own, and the two
   emphasised lines on this page were the only italics in it — they take murasaki instead. */
em{font-style:normal;color:var(--m-ink)}
a{color:var(--m-ink);text-decoration:none}
a:hover{box-shadow:inset 0 -1px var(--m-ink)}
/* "1px m-ink outline, 4px offset. The only rectangle we draw around anything." It is
   murasaki in both rooms — the dark block already turns m-ink into fuji, which is 9.5:1 on
   kuro, so the ring never needed to be swapped out for a neutral. */
:focus-visible{outline:1px solid var(--m-ink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Guide §5: max-width 1180, padding-inline 5.5vw, sections divided by one hairline and
   96–104px — never boxes. */
/* First tab stop, invisible until focused, then styled as any link (guide §5, A11Y). */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--g2);top:var(--g1);background:var(--paper);color:var(--m-ink);
  padding:var(--g1) var(--g2);z-index:50;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:5.5vw}
@media (min-width:1300px){.wrap{padding-inline:var(--g5)}}

/* The book's four voices and no others: display clamp(34,4.6vw,50)/1.1 at −2%, H2 30/1.2,
   body 16/1.65, machine mono 11–13 with 12–18% tracking. The display was running to 74px
   at 7vw — half again the book's ceiling — and H2 could fall to 22px, under the book's own
   24px floor. */
h1{font-weight:500;font-size:clamp(34px,4.6vw,50px);line-height:1.1;letter-spacing:-.02em}
h2{font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.01em}
h3{font-weight:600;font-size:18px;line-height:1.35}
p{max-width:60ch}
/* Nothing separated one paragraph from the next: the reset zeroes margins and only the
   first paragraph after an h2 was spaced, so prose ran together as one block. Related
   things sit 8–24 apart. */
p+p{margin-top:var(--g2)}
.lb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
/* The machine speaks at 11–13px. These are terminal lines, so they take the book's
   terminal leading rather than the label tracking. */
.mono{font-family:var(--mono);font-size:13px;line-height:2;letter-spacing:.02em}
code{font-family:var(--mono);font-size:13px;background:var(--sunk);padding:2px 7px;white-space:nowrap}

/* ---- top bar: lockup, links, live status ------------------------------- */
/* Guide §6.2 and the kit's TOP BAR: sticky, mono uppercase links, the status on the right.
   One hairline under it and nothing else — no bar fill, no shadow. */
.top{position:sticky;top:0;z-index:40;background:var(--paper);
  box-shadow:inset 0 -1px var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--g2) var(--g3);
  padding-block:var(--g2);flex-wrap:wrap}
.top nav{display:flex;gap:var(--g2) var(--g3);flex-wrap:wrap;margin-inline-start:auto;
  min-width:0;flex-shrink:1}
@media (min-width:1100px){
  .top .wrap{flex-wrap:nowrap}
  .top nav{gap:var(--g3)}
}
.top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);padding-block:var(--g1)}
.top nav a:hover{color:var(--ink);box-shadow:none}
/* The active underline was sumi, which is invisible on kuro; it takes the room's ink. */
.top nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -1px var(--ink)}
.top .stat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--m-ink);white-space:nowrap;flex:0 0 auto}
.top .stat::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border:1px solid currentColor;background:var(--m-wash);vertical-align:0}
@media (max-width:860px){
  .top nav{margin-inline-start:0;order:3;flex-basis:100%;gap:var(--g2) var(--g3)}
  .top .stat{margin-inline-start:auto}
}
.mark{width:118px;height:auto;display:block}
.mark .w{fill:var(--lw)} .mark .k{fill:var(--lk)} .mark .z{fill:var(--lz)}

.hero{padding:var(--g6) 0 var(--g5)}
.hero .btns{display:flex;gap:var(--g3);flex-wrap:wrap;align-items:center;margin-top:var(--g4)}
.hero h1{max-width:16ch}
/* The standfirst is the book's tagline: 18px, ≤48ch, body leading. At 22px it was a fifth
   type size sitting between H2 and body, and the book allows no third voice, let alone a
   fifth size. */
.hero .stand{margin-top:var(--g3);font-size:18px;line-height:1.65;max-width:48ch;color:var(--ink)}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--m-ink);display:block;margin-bottom:var(--g2)}

section.band{padding:var(--g5) 0;box-shadow:inset 0 1px var(--line)}
section.band>.wrap>.lb{display:block;margin-bottom:var(--g2)}
section.band h2+p{margin-top:var(--g2)}

/* Four items on a 1080px measure gave three across and one orphan on a second row with a
   column and a half of nothing beside it. Two by two reads as a set. */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--g4)}
.cols h3{margin-bottom:var(--g1)}
.cols p{color:var(--soft);max-width:38ch}

/* A well, not a card: a tinted ground with one ink edge on its leading side. Every drawing
   is 1px — the leading edges were 2px, which is the one line the book never doubles. */
.well{background:var(--sunk);padding:var(--g3);max-width:74ch}
.well.warn{background:var(--k-tint);box-shadow:inset 1px 0 var(--k-ink)}
.well.acc{background:var(--m-tint);box-shadow:inset 1px 0 var(--m-ink)}
/* hai reads 4.47:1 on the murasaki tint and 4.58:1 on kinu — both under the book's 4.6
   floor, and this label is the well's title. It takes ink; the edge already carries the
   colour, and status is a word before it is a colour anyway. */
.well .lb{color:var(--ink)}
/* Guarded. `:root:not([data-theme=day])` matches when there is no attribute at all — which
   is every light-mode visitor — so this was overriding the kohaku and murasaki tints on the
   theme it was written to leave alone. The wash never rendered in light mode: the banner
   showed its ink hairline over bare paper. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .well.warn,:root:not([data-theme=day]) .well.acc{background:var(--sunk)}
}
/* Paragraphs inside a well are spaced by the same p+p rule as the rest of the page, so the
   old bottom margin would have stacked a 24px gap where the book asks for 16. */
.well p{margin-bottom:0}

/* The primary button, exactly as the kit draws it: a murasaki wash wearing its ink at 1px,
   sumi words inside the fill. It was a solid m-ink slab with kami words — a fill with no
   edge, and the one pastel on the page that had gone flat. Hover inverts to the ink. */
/* An <a> and a <button> sharing this class came out two different heights, neither on the
   8-scale: the anchor inherited the body's line-height and the button did not. Both pinned. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:12.5px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;border:0;border-radius:0;cursor:pointer;
  background:var(--m-wash);color:var(--sumi);box-shadow:inset 0 0 0 1px var(--m-ink);
  padding:0 26px;height:48px;white-space:nowrap}
.btn:hover{background:var(--m-ink);color:var(--kami)}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* The dark room remaps --m-ink to fuji so the hairlines read on kuro, and kami on fuji is
   1.65:1 — so the hover cannot invert to ink-and-paper there. It inverts the other way:
   the paper becomes the fill and sumi stays the word, 16.5:1. The resting state needs no
   dark case at all now that it is wash-on-ink like the book's. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .btn:hover{background:var(--kami);color:var(--sumi)}
}
/* --sumi is the ink on paper only; on kuro this underline and its label were being drawn in
   near-black on near-black and the whole secondary button vanished. --ink is the ink of
   whichever room the reader is in. */
.btn.sec{background:transparent;box-shadow:inset 0 -1px var(--ink);color:var(--ink);padding:15px 2px}
.btn.sec:hover{color:var(--m-ink);box-shadow:inset 0 -1px var(--m-ink);background:transparent}

form.get{margin-top:var(--g3);display:flex;flex-wrap:wrap;gap:var(--g2);align-items:flex-end;max-width:640px}
form.get label{display:block;flex:1 1 280px}
/* A person types their own address here, so the field speaks Sans; Mono is the machine's
   voice. Underline is the hairline, caret and focus are m-ink, per the kit's text input. */
form.get input{width:100%;font-family:var(--sans);font-size:16px;background:transparent;
  border:0;border-radius:0;box-shadow:inset 0 -1px var(--line);color:var(--ink);
  caret-color:var(--m-ink);padding:10px 0}
/* usui is 2.3:1 on kami and this placeholder is the only format hint on the form. */
form.get input::placeholder{color:var(--soft)}
form.get input:focus{box-shadow:inset 0 -1px var(--m-ink);outline:none}
.msg{margin-top:var(--g2);max-width:60ch}
.msg .lb{display:block;margin-bottom:2px}
.msg.ok .lb{color:var(--m-ink)}
.msg.bad .lb{color:var(--a-ink)}
.msg[hidden]{display:none}

/* Guide §7.2: a table that will not fit gets its own scroll and a mono hint, so the page
   never scrolls sideways. The capability table's first column is nowrap by design — a
   capability name broken across two lines is harder to scan than a scroll. */
.tscroll{overflow-x:auto;max-width:100%;margin-top:var(--g2)}
.tscroll>table{margin-top:0}
.tscroll::after{content:"scroll →";display:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding-top:var(--g1)}
@media (max-width:700px){.tscroll::after{display:block}}
table{width:100%;border-collapse:collapse;margin-top:var(--g2);font-size:15px}
caption{text-align:left;padding-bottom:var(--g1)}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--soft);padding:0 var(--g3) var(--g1) 0;box-shadow:inset 0 -1px var(--rule)}
td{padding:14px var(--g3) 14px 0;box-shadow:inset 0 -1px var(--line);vertical-align:top}
td:first-child{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em;white-space:nowrap}
/* "Hover = kinu." The kit's table has it and this one had no row feedback at all — nineteen
   rows of driver names are hard to track across four columns without it. */
tbody tr:hover td{background:var(--sunk)}
.st{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.st::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border:1px solid currentColor;vertical-align:0}
.st.yes{color:var(--m-ink)}  .st.yes::before{background:var(--m-wash)}
.st.part{color:var(--k-ink)} .st.part::before{background:var(--k-wash)}
.st.no{color:var(--a-ink)}   .st.no::before{background:var(--a-wash)}

footer{padding:var(--g5) 0 var(--g6);box-shadow:inset 0 1px var(--line);margin-top:var(--g5)}
footer .row{display:flex;flex-wrap:wrap;gap:var(--g2) var(--g4);align-items:baseline}
footer .row .lb+.lb{margin-left:0}
footer nav{display:flex;gap:var(--g3);flex-wrap:wrap;margin-left:auto}
/* These carry the .lb class, whose hai defeated the link colour, so the only two links in
   the footer looked exactly like the three labels beside them. The kit's footer nav is a
   row of links: m-ink on paper, fuji on kuro. A class outranks any number of elements, so
   :any-link carries the weight needed to outrank that class without borrowing it. */
footer nav a:any-link{color:var(--m-ink)}
footer nav a:any-link:hover{box-shadow:inset 0 -1px var(--m-ink)}

.banner{background:var(--k-tint);box-shadow:inset 0 -1px var(--k-ink);padding:var(--g2) 0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .banner{background:var(--sunk);box-shadow:inset 0 -1px var(--k-wash)}
}
.banner .wrap{display:flex;gap:var(--g2) var(--g3);flex-wrap:wrap;align-items:baseline}
/* k-ink on k-tint is 3.96:1, and this is the one word on the page carrying the warning.
   The tint stays; the word takes ink — the ink of the room, since on kuro sumi is 1.06:1. */
.banner strong{font-weight:500;color:var(--ink)}
.banner p{font-size:15px;max-width:none}

/* Guide §5.5: the demo block is the one dark moment on the page, previewing Night — kuro
   ground, fuji text, the pastel dark lockup. */
/* The band's own divider comes from section.band, where it is sumi at 16% — over kuro that
   is a line nobody can see. Inside kuro, fuji draws. The selector has to name the section
   too, or section.band's own shadow outranks it and the divider stays invisible. */
section.band.dark{box-shadow:inset 0 1px var(--m-dark)}
.dark{background:var(--kuro);color:var(--kami)}
.dark h2,.dark p{color:var(--kami)}
.dark .lb{color:var(--usui)}
.dark a:not(.btn){color:var(--m-dark)}
/* Same button, standing on kuro: the wash still wears an ink at 1px, but the ink is the
   fuji the dark room uses for lines — m-ink itself is too dark to be seen against it. */
.dark .btn{background:var(--m-wash);color:var(--sumi);box-shadow:inset 0 0 0 1px var(--m-dark)}
.dark .btn:hover{background:var(--kami);color:var(--sumi)}

/* Guide §5.1: the restore timeline, drawn. Squares and stairs, 1px inks, no slanted wire. */
.schema{width:100%;max-width:820px;height:auto;display:block;margin:var(--g4) 0 0}
/* Rail and ticks are one drawing — the kit's backup rail gives them a single line — and
   usui-then-hai left the ticks at 3.2:1 in the dark room, fainter than the rail they hang
   from. This is the schema line exactly as the book draws it: the room's own ink at 42%,
   which on kuro means fuji. */
.schema .rail,.schema .tick{stroke:var(--rule);stroke-opacity:.42;stroke-width:1;fill:none}
.schema .snap{fill:var(--m-tint);stroke:var(--m-ink);stroke-width:1}
.schema .held{fill:var(--m-wash);stroke:var(--m-ink);stroke-width:1}
.schema .bad{fill:var(--a-wash);stroke:var(--a-ink);stroke-width:1}
.schema .step{stroke:var(--m-ink);stroke-width:1;fill:none}
/* The viewBox is 820 wide and the drawing is capped at 820, so these are real pixels: at
   9px the machine voice was two sizes under its 11px floor. */
.schema text{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--soft)}
.schema .now{fill:var(--ink)}
.schema .warn{fill:var(--a-ink)}

/* A chip always carries a word (guide §5.4). BY DESIGN is a principle, not a gap. */
.st.design{color:var(--m-ink)} .st.design::before{background:var(--m-tint)}

/* The stat row, once. There used to be two of these — .big in Sans at 44px and .facts in
   Mono at 30px — describing the same thing two ways; the book has one stat and it is Sans
   500 44/1 at −2% over a mono label. The rule above each number is a hairline, not the
   invented 30%-sumi it was drawn in. */
.big,.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:var(--g3) var(--g4);margin-top:var(--g5)}
.facts{margin-top:var(--g3)}
.big div,.facts div{padding-top:var(--g1);box-shadow:inset 0 1px var(--line)}
.big .v,.facts .v{font-family:var(--sans);font-weight:500;font-size:44px;line-height:1;
  letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.big .k,.facts .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);display:block;margin-top:var(--g1)}
.big .v.acc,.facts .v.acc{color:var(--m-ink)}

/* A definition rail: mono key, prose value, one hairline each (guide §6.4 kv-rail). */
.rail{display:grid;grid-template-columns:minmax(min(210px,100%),1fr) 2.4fr;gap:0;margin-top:var(--g3)}
.rail dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);padding:var(--g2) var(--g3) var(--g2) 0;box-shadow:inset 0 -1px var(--line)}
.rail dd{margin:0;padding:var(--g2) 0;box-shadow:inset 0 -1px var(--line);max-width:74ch}
@media (max-width:700px){
  .rail{grid-template-columns:1fr}
  .rail dt{padding-bottom:2px;box-shadow:none}
  .rail dd{padding-top:0}
}

/* The design-boundaries pattern: what the product will not do, in its own words. */
.edges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--g4);margin-top:var(--g3)}
.edges h3{display:flex;gap:var(--g1);align-items:baseline}
.edges h3::before{content:"";display:inline-block;width:8px;height:8px;flex:0 0 8px;
  border:1px solid var(--m-ink);background:var(--m-tint)}
.edges p{color:var(--soft);max-width:44ch;margin-top:var(--g1)}

.terms{display:flex;flex-wrap:wrap;gap:var(--g1) var(--g2);margin-top:var(--g3)}
.terms span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft)}
/* The square is 8px everywhere else on the page and in the kit; 6px made these read as a
   different mark for the same idea. */
.terms span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border:1px solid var(--m-ink);background:var(--m-tint);vertical-align:0}


/* ---- fixes from the release audit ---------------------------------------- */

/* A jump to #security landed the reader 104px under the sticky bar on a laptop and 234px
   under it on a phone — mid-sentence, with the heading never seen. Seven nav links and the
   skip link, all arriving broken. */
/* The bar measures 128px with its padding, not the 104 the content suggests; a jump that
   lands flush against it reads as clipped. */
:root{--top-h:128px}
@media (max-width:1100px){:root{--top-h:150px}}
section[id],#main{scroll-margin-top:calc(var(--top-h) + var(--g3))}

/* Under 900px the bar was a third of the viewport and, at the page's resting scroll
   position on a 360-wide phone, it covered the entire lead form. It stops being sticky
   there — a header that hides the one thing the page asks you to do is not navigation. */
@media (max-width:900px){
  .top{position:static}
  :root{--top-h:0px}
}

/* The dark override was written for the filled button, where sumi on fuji is 10:1 and
   correct. It also caught .btn.sec, which has no fill — so the hero's second action became
   sumi on kuro at 1.06:1 and simply was not there at night, underline included. */
.btn.sec{box-shadow:inset 0 -1px var(--ink);color:var(--ink)}
@media (prefers-color-scheme: dark){
  /* `.btn` carries its own sumi label in both themes now that it is the kit's wash-and-ink
     button, so the dark room only has to answer for the secondary. */
  :root:not([data-theme=day]) .btn.sec:hover{color:var(--m-dark);box-shadow:inset 0 -1px var(--m-dark)}
}

/* A small button, for the top bar's call to action. */
.btn.sm{height:38px;padding:0 18px;font-size:11px;flex:0 0 auto}

/* ---- the market quadrant ------------------------------------------------- */
/* Drawn server-side as finished SVG, like every other picture here. Squares, 1px inks,
   dashed usui gridlines, and the quadrant we occupy carries the murasaki tint — no fill
   anywhere that is not one of the 22 tokens. */
.quad{width:100%;height:auto;display:block;margin:var(--g4) 0;max-width:900px}
.quad .q-on{fill:var(--m-tint)}
.quad .grid{stroke:var(--usui);stroke-width:1;stroke-dasharray:3 4}
.quad .axis{stroke:var(--ink);stroke-width:1}
.quad text{font-family:var(--mono)}
.quad .qlabel{font-size:15px;letter-spacing:.12em;text-transform:uppercase;fill:var(--soft)}
.quad .qlabel.on{fill:var(--m-ink)}
.quad .qsub{font-size:13px;fill:var(--faint)}
.quad .axname{font-size:14px;letter-spacing:.14em;text-transform:uppercase;fill:var(--soft)}
.quad .name{font-size:16px;fill:var(--ink);letter-spacing:.02em}
.quad .mark .dot{stroke-width:1}
.quad .us .dot{fill:var(--m-wash);stroke:var(--m-ink)}
.quad .us .name{fill:var(--m-ink)}
/* The series palette, in the book's fixed order: violet, lilac, rose, plum, stone. */
.quad .s1 .dot{fill:var(--m-25);stroke:var(--m-ink)}
.quad .s2 .dot{fill:var(--s2c);stroke:var(--s2i)}
.quad .s3 .dot{fill:var(--s3c);stroke:var(--s3i)}
.quad .s4 .dot{fill:var(--s4c);stroke:var(--soft)}
.quad .s5 .dot{fill:var(--sunk);stroke:var(--soft)}

/* The placement rationale under the chart: mono key, prose reason, one hairline each. */
.quad-why dt{white-space:normal}
.quad-why dd{color:var(--soft);font-size:15px}


/* ---- multi-page shell ---------------------------------------------------- */
/* Each nav item is its own URL now, so every page states what it is above the fold: a
   breadcrumb and the page's own h1, under one hairline. A search result that lands here has
   to make sense without the home page's context. */
.pagehead{padding:var(--g5) 0 var(--g4);box-shadow:inset 0 -1px var(--line)}
.pagehead h1{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;
  max-width:22ch;text-wrap:balance;margin-top:var(--g2)}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--soft);
  display:flex;gap:var(--g1);align-items:baseline}
.crumbs a{color:var(--soft)}
.crumbs a:hover{color:var(--m-ink);box-shadow:none}
.crumbs b{color:var(--ink);font-weight:500}

/* The lockup is the way home from every page. */
a.home{display:inline-flex;flex:0 0 auto}
a.home:hover{box-shadow:none}

/* The home page's index of the site: each card is a way in, its heading the link. */
.cols h3 a{color:var(--ink)}
.cols h3 a:hover{color:var(--m-ink);box-shadow:inset 0 -1px var(--m-ink)}