/* The article reader (js/article.js, lane L8). DESIGN-SYSTEM.md §4 type: the serif carries the hierarchy (lede 28,
   section 32), Geist is the long text (16/1.65), mono only on numbers. No boxes: hairlines and whitespace; the one
   deliberate card is the Myth callout. Controls are opaque. Everything is scoped under .ar / .ar-* so nothing else
   changes. Loaded after colorpage.css. */
:root{
  --ar-body:#D9D4C8;        /* long text, a notch under --ink (still 12:1 on the ground) */
  --ar-hex-w:76px; --ar-hex-h:88px;
  --ar-clip:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.ar-slot{display:block}
.ar-slot[hidden]{display:none}

.ar{margin-top:34px;padding-bottom:8px}
.ar-wrap{margin-top:0}
.ar-wrap .ar-head,.ar-wrap .ar-body{margin-top:0}
.ar-body{margin-top:34px}   /* the split color-page case: head has its own margin from the layout above it; this one needs its own gap after the lede */
.ar-kind{font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.ar-lede{font:400 28px/1.2 var(--serif);letter-spacing:-.015em;color:var(--paper);margin-top:12px;text-wrap:pretty}
.ar-personal{font:400 15px/1.5 var(--sans);color:var(--soft);margin-top:10px}
.ar-personal .ar-link{font:inherit;color:inherit}
.ar-draft{font:italic 400 17px/1.4 var(--serif);color:var(--soft);margin-top:14px}

/* ---------- origin facts + also called ---------- */
.ar-facts{margin:22px 0 0;border-top:1px solid var(--rule)}
.ar-facts>div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ar-facts dt{font:italic 400 17px/1.35 var(--serif);color:var(--soft)}
.ar-facts dd{margin:0;font:400 15px/1.5 var(--sans);color:var(--ar-body)}
.ar-aka{font:italic 400 17px/1.35 var(--serif);color:var(--soft);margin-top:14px}

/* ---------- Contents, inline (David, 2026-10-09: "feels separate from the article" -- no more bottom sheet):
   the summary row stays a sticky progress line; tapping it expands the chapter list right there, pushing the
   rest of the article down (arAccordion, js/article.js), chevron rotating; reduced-motion -> instant. ---------- */
.ar-bar{position:sticky;top:var(--top);z-index:5;margin:26px 0 0;background:var(--ground)}
.ar-bar-sum{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 2px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left;overflow:hidden}
.ar-bar-l{font:400 18px/1 var(--serif);flex:none}
.ar-bar-c{flex:1;min-width:0;font:italic 400 17px/1 var(--serif);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-bar-n{flex:none;font-size:13px;color:var(--soft)}
.ar-bar-i{width:9px;height:9px;flex:none;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg);transition:transform .25s var(--ease)}
.ar-bar-sum[aria-expanded="true"] .ar-bar-i{transform:rotate(225deg)}
.ar-bar-p{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);opacity:.7}
.ar-bar-list{overflow:hidden}
.ar-bar-list[hidden]{display:none}
.ar-bar-row{display:grid;grid-template-columns:28px 1fr;align-items:baseline;width:100%;min-height:52px;padding:14px 2px;border-bottom:1px solid var(--rule);text-align:left}
.ar-bar-row .mono{font-size:13px;color:var(--soft)}
.ar-bar-row b{font:400 20px/1.12 var(--serif)}
@media (prefers-reduced-motion:reduce){.ar-bar-i{transition:none}}

/* ---------- reading ---------- */
.ar-sec{padding-top:6px;scroll-margin-top:64px}
.ar-sec h2,.ar-qs h2,.ar-fam h2{font:400 32px/1.04 var(--serif);letter-spacing:-.02em;margin:46px 0 16px;text-wrap:balance}
.ar-sec>p,.ar-hubi>p{font:400 16px/1.66 var(--sans);color:var(--ar-body);margin:0 0 1.05em;text-wrap:pretty}
.ar-sec>p:last-of-type{margin-bottom:0}
.ar-sec em,.ar-hubi em{font-family:var(--serif);font-style:italic;font-size:1.08em;letter-spacing:0}
.ar-sec strong{font-weight:600;color:var(--ink)}

/* footnote refs: small mono numbers with a 44px-ish touch area that doesn't push the line apart */
.ar-fnw{font-size:0;line-height:0;vertical-align:baseline;white-space:nowrap}
.ar-fn{position:relative;display:inline-block;min-width:18px;margin:0 1px;padding:0 3px;vertical-align:super;font:500 13px/1 var(--mono);color:var(--ink);background:var(--surface-3);border-radius:var(--r-1);height:16px;text-align:center}
.ar-fn::after{content:"";position:absolute;inset:-14px -6px}
.ar-fn:active{background:var(--ink);color:var(--ground)}

/* a [[link]]: a small swatch and the name, one tap opens that color */
.ar-link{display:inline;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal;padding:2px 0}
.ar-link i{display:inline-block;width:.72em;height:.72em;margin:0 .32em 0 .02em;border-radius:2px;background:var(--c);vertical-align:-.03em;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ar-link .ar-bk{display:inline-block;width:.8em;height:.8em;margin:0 .3em 0 .02em;vertical-align:-.05em;opacity:.7}
.ar-x{text-decoration:none;color:var(--ar-body)}

/* a system-reference swatch (David, 2026-10-09): "Maerz & Paul... plate 46 B2" gets a small swatch of that entry's own
   color inline, same shape as a [[link]], tappable to the nearest name's page */
.ar-sysref{display:inline;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal;padding:2px 0}
.ar-sysref i{display:inline-block;width:.72em;height:.72em;margin:0 .32em 0 .02em;border-radius:2px;background:var(--c);vertical-align:-.03em;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ar-sysref:active{opacity:.7}
.ar-link:active{opacity:.7}

/* ---------- callouts ---------- */
.ar-call{margin:24px 0}
.ar-tag{font:italic 400 18px/1.2 var(--serif);color:var(--ink);margin:0 0 6px}
.ar-books{padding:2px 0 2px 16px;border-left:2px solid var(--rule-strong)}
.ar-books>p:not(.ar-tag){font:400 15px/1.6 var(--sans);color:var(--ar-body);margin:0;text-wrap:pretty}
.ar-myth{padding:18px 18px 20px;background:var(--surface-1);border-radius:var(--r-2);border:1px solid var(--rule)}
.ar-myth .ar-tag{color:var(--soft)}
.ar-myth p{margin:0}
.ar-say{font:400 17px/1.5 var(--serif);color:var(--soft);text-wrap:pretty}
.ar-say em,.ar-rec em{display:block;font:italic 400 17px/1.2 var(--serif);color:var(--faint);margin-bottom:3px;letter-spacing:0}
.ar-rec{font:400 16px/1.6 var(--sans);color:var(--ink);margin-top:14px!important;padding-top:14px;border-top:1px solid var(--rule);text-wrap:pretty}
.ar-rec em{color:var(--soft)}

/* ---------- actions next to their facts ---------- */
.ar-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ar-act{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 20px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);font:italic 400 18px/1 var(--serif);color:var(--ink);background:none}
.ar-act svg{flex:none;opacity:.7}
.ar-act:active{background:var(--ink);color:var(--ground)}
.ar-slotpanel{margin-top:14px}

/* the inline duel: judged swatches sit on booth grey with 16px of grey around, feedback is a ring outside */
.ar-duel{background:var(--booth);color:var(--b-ink);padding:18px 16px 14px;border-radius:var(--r-2)}
.ar-dq{font:400 24px/1.1 var(--serif);letter-spacing:-.01em}
.ar-dq b{font-weight:400;font-style:italic}
.ar-dt{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.ar-dtile{display:flex;flex-direction:column;gap:8px}
.ar-dtile button{display:block;width:100%;height:104px;background:var(--c);border-radius:var(--r-1);outline:3px solid transparent;outline-offset:3px}
.ar-dtile button.ok{outline-color:var(--good)}
.ar-dtile button.no{outline-color:var(--bad)}
.ar-dn{font:400 17px/1.1 var(--serif);text-align:center;min-height:19px;color:var(--b-ink)}
.ar-df{font:400 15px/1.45 var(--sans);color:var(--b-soft);margin-top:12px;min-height:20px}
.ar-dfoot{display:flex;align-items:center;gap:14px;margin-top:10px;min-height:44px}
.ar-dcount{font-size:13px;color:var(--b-soft);margin-right:auto}
.ar-dnext{min-height:44px;padding:0 22px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:400 18px/1 var(--serif)}
.ar-dlink{font:italic 400 17px/1 var(--serif);color:var(--b-ink);text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* ---------- Family (David, 2026-10-09): "usually one hex above a line of siblings, no visible structure" ----------
   A segmented switch (js/family.js famHTML/famWire), remembered per viewer: Tree (the honeycomb, legible with
   row labels and connectors), Spectrum (one sorted strip), Compare (self beside its closest relatives, a
   draggable split on the nearest), Map (a button out to the honeycomb). Every swatch is one tap to its page
   (the shared .ar-hex, reused from the old honeycomb) and keeps the known/met/unmet states. */
.ar-fam h2{margin-top:50px}
.fam-seg{display:flex;gap:4px;margin:6px 0 20px;padding:3px;border-radius:999px;background:var(--surface-1);width:max-content;max-width:100%;overflow-x:auto}
.fam-seg-b{flex:none;min-height:38px;padding:0 16px;border-radius:999px;font:400 15px/1 var(--sans);color:var(--soft)}
.fam-seg-b.on{background:var(--surface-3);color:var(--ink)}
.fam-seg-sm{background:none;padding:0;gap:8px}
.fam-seg-sm .fam-seg-b{min-height:30px;padding:0 4px;font-size:14px;color:var(--soft);border-bottom:2px solid transparent}
.fam-seg-sm .fam-seg-b.on{background:none;color:var(--ink);border-bottom-color:var(--ink)}
.fam-empty{padding:10px 0}

/* Tree: thin connector lines parent -> self -> children, a tiny label per row, empty rows dropped */
.fam-tree{display:flex;flex-direction:column;align-items:center;gap:0}
.fam-trow{width:100%;text-align:center}
.fam-trow-l{font:400 13px/1 var(--sans);color:var(--soft);margin-bottom:8px}
.fam-trow-hex{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.fam-trow-mid .fam-trow-hex{gap:3px}
.fam-line{display:block;width:1px;height:20px;background:var(--rule-strong);margin:2px auto}
.ar-hex{position:relative;flex:none;width:var(--ar-hex-w);height:var(--ar-hex-h);clip-path:var(--ar-clip);background:var(--c);display:block;transition:transform .2s var(--spring)}
.ar-hex>span{position:absolute;inset:0;clip-path:var(--ar-clip);background:var(--c);display:grid;place-items:center;padding:0 10px}
.ar-hex b{font:400 13px/1.05 var(--serif);text-align:center;text-wrap:balance;color:#fff;overflow-wrap:anywhere}
.ar-hex[data-ink="dark"] b{color:#141311}
.ar-hex[data-know="met"]{background:var(--ink)}
.ar-hex[data-know="met"]>span{inset:3px}
.ar-hex[data-know="unmet"]{opacity:.5}
.ar-hex.self{background:var(--paper)}
.ar-hex.self>span{inset:4px}
.ar-hex:not(.self):active{transform:scale(.94)}
.fam-note{font:italic 400 17px/1.4 var(--serif);color:var(--soft);margin-top:16px;text-wrap:pretty}

/* Spectrum: one sorted strip, self marked, names under each -- scrolls at 320px rather than squeezing */
.fam-spec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fam-spec-h{font:400 15px/1 var(--sans);color:var(--soft)}
.fam-spec-strip{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.fam-spec-c{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;text-align:center}
.fam-spec-c i{display:block;width:44px;height:44px;border-radius:50%;background:var(--c)}
.fam-spec-c.self i{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--ground)}
.fam-spec-c[data-know="unmet"] i{opacity:.5}
.fam-spec-c b{font:400 13px/1.15 var(--serif);text-wrap:balance}

/* Compare: self beside its closest relatives -- the nearest is a draggable split, the rest are plain rows */
.fam-cmp-split{position:relative;height:160px;border-radius:var(--r-2);overflow:hidden;touch-action:none}
.fam-cmp-half{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;background:var(--c)}
.fam-cmp-half b{font:400 20px/1.1 var(--serif);text-wrap:balance}
.fam-cmp-a[data-ink="dark"],.fam-cmp-b[data-ink="dark"]{color:#141311}.fam-cmp-a[data-ink="light"],.fam-cmp-b[data-ink="light"]{color:#fff}
.fam-cmp-b{clip-path:inset(0 0 0 50%)}
.fam-cmp-handle{position:absolute;top:0;bottom:0;width:40px;transform:translateX(-20px);display:flex;align-items:center;justify-content:center;cursor:ew-resize}
.fam-cmp-handle i{width:3px;height:36px;border-radius:2px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.fam-cmp-line{font:400 20px/1.3 var(--serif);letter-spacing:-.01em;margin-top:14px;text-wrap:pretty}
.fam-cmp-open{min-height:44px;padding:0 4px;margin-top:4px;display:inline-flex;align-items:center;gap:6px;font:italic 400 17px/1 var(--serif);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fam-cmp-open svg{width:16px;height:16px}
.fam-cmp-rows{display:flex;flex-direction:column;margin-top:18px}
.fam-cmp-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border-top:1px solid var(--rule);text-align:left}
.fam-cmp-row-sw{display:flex;flex:none}
.fam-cmp-row-sw i{width:22px;height:22px;border-radius:50%;background:var(--c)}
.fam-cmp-row-sw i+i{margin-left:-8px;box-shadow:0 0 0 2px var(--ground)}
.fam-cmp-row-tx{min-width:0}
.fam-cmp-row-tx b{display:block;font:400 18px/1.15 var(--serif)}
.fam-cmp-row-tx span{font:400 14px/1.4 var(--sans);color:var(--soft)}

/* Map: a quiet way out to the honeycomb when an inline map isn't worth the weight */
.fam-map-btn{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px;font:400 18px/1 var(--serif);color:var(--ink)}
.fam-map-btn svg{width:17px;height:17px}

.ar-h3{font:400 22px/1.12 var(--serif);letter-spacing:-.01em;margin:34px 0 4px}
.ar-rows{display:flex;flex-direction:column}
.ar-row{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);min-height:56px}
.ar-row i{grid-row:1/3;width:30px;height:30px;border-radius:var(--r-1);background:var(--c)}
.ar-row b{font:400 20px/1.05 var(--serif)}
.ar-row span{grid-column:2;font:400 13px/1.4 var(--sans);color:var(--soft);margin-top:2px}
.ar-row:not(:has(span)) i{grid-row:1}
.ar-more{margin-top:14px}
.ar-more a{font:italic 400 17px/1 var(--serif);color:var(--soft);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px;padding:10px 0;display:inline-block}

/* ---------- you and this color ---------- */
.ar-you{margin-top:44px;padding:18px 0 4px;border-top:1px solid var(--rule-strong)}
.ar-you-line{font:400 22px/1.22 var(--serif);letter-spacing:-.01em;margin-bottom:16px;text-wrap:pretty}
.ar-you-line .ar-link{font:inherit}

/* ---------- Test yourself (David, 2026-10-09: "takes too much space and is too cheesy") -- a single quiet
   disclosure row, collapsed by default, the same open/close mechanics as the inline Contents above ---------- */
.ar-disc{margin-top:50px;border-top:1px solid var(--rule)}
.ar-disc-sum{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:14px 2px;text-align:left}
.ar-disc-l{font:400 18px/1 var(--serif)}
.ar-disc-c{flex:1;text-align:right;font:400 14px/1 var(--sans);color:var(--soft)}
.ar-disc-i{width:9px;height:9px;flex:none;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg);transition:transform .25s var(--ease)}
.ar-disc-sum[aria-expanded="true"] .ar-disc-i{transform:rotate(225deg)}
.ar-disc-body{overflow:hidden}
.ar-disc-body[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ar-disc-i{transition:none}}
.ar-q{padding:18px 0 22px;border-top:1px solid var(--rule)}
.ar-qt{font:400 22px/1.2 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.ar-qc{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ar-choice{display:block;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--rule-strong);border-radius:var(--r-2);font:400 15px/1.35 var(--sans);color:var(--ink);text-align:left}
.ar-choice:active:not(:disabled){background:var(--surface-3)}
.ar-choice:disabled{color:var(--soft)}
.ar-choice.ok{border-color:var(--good);color:var(--ink);background:rgba(154,212,174,.1)}
.ar-choice.no{border-color:var(--bad);background:rgba(240,154,134,.1)}
.ar-qf{font:400 15px/1.55 var(--sans);color:var(--ar-body);margin-top:12px;text-wrap:pretty}
.ar-qf:empty{display:none}
.ar-qscore{font:italic 400 18px/1.35 var(--serif);color:var(--soft);margin-top:6px;text-wrap:pretty}
.ar-qscore:empty{display:none}

/* ---------- notes (Sources: a collapsed disclosure now, same mechanics as Test yourself above) ---------- */
.ar-notes ol{list-style:none;margin:0;padding:0}
.ar-notes li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--rule);font:400 15px/1.5 var(--sans);color:var(--ar-body)}
.ar-nn{font:500 13px/1.9 var(--mono);color:var(--soft)}
.ar-nc em{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.ar-nc a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:3px;white-space:nowrap}

/* ---------- sheets: a footnote, the contents ---------- */
.ar-ns-k{font:italic 400 17px/1 var(--serif)!important;color:var(--soft)!important;margin:0 0 10px!important}
.ar-ns-k .mono{font-style:normal;font-size:13px}
.ar-ns-c{font:400 22px/1.25 var(--serif)!important;color:var(--ink)!important;margin:0 0 18px!important;text-wrap:pretty}
.ar-ns-a{display:inline-flex;align-items:center;min-height:44px;font:italic 400 18px/1 var(--serif);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ar-ns-sys{display:flex}

/* ---------- hub + which pages ---------- */
.ar-page{padding-bottom:calc(var(--tabh) + 24px)}
.ar-hubband{position:relative;display:flex;margin:0 calc(-1 * var(--g)) 0;   /* (an .article screen has no top padding to bleed past: app.css .article) */
  width:calc(100% + var(--g) * 2);height:34dvh;min-height:200px;background:var(--surface-1)}
.ar-hubband>i{flex:1;background:var(--c)}
.ar-hubband.ar-flat{height:calc(var(--top) + 64px);min-height:0;background:none}
.ar-back{background:var(--surface-2);border-radius:50%;color:var(--ink)}
.ar-hubt{font:400 56px/.92 var(--serif);letter-spacing:-.035em;margin-top:22px;text-wrap:balance}
.ar-hubt em{font-style:italic}
.ar-hubd{font:400 22px/1.28 var(--serif);color:var(--paper);margin-top:14px;text-wrap:pretty}
.ar-hubn{font:italic 400 17px/1 var(--serif);color:var(--soft);margin-top:12px}
.ar-hubi{margin-top:22px}
.ar-page .ar-rows{margin-top:24px}
.ar-all{margin-top:20px}
.ar-plates{display:flex;flex-direction:column;gap:2px;margin:28px 0 0}
.ar-plate{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:104px;padding:16px;background:var(--c);border-radius:var(--r-1);text-align:left}
.ar-plate b{font:400 30px/1 var(--serif);letter-spacing:-.02em}
.ar-plate span{font:400 14px/1.4 var(--sans);opacity:1;max-width:30ch}
.ar-plate[data-ink="dark"]{color:#141311}
.ar-plate[data-ink="light"]{color:#fff}

@media (prefers-reduced-motion:reduce){.ar-hex{transition:none}}
.ar-act[hidden],.ar-slotpanel[hidden]{display:none}
/* craft pass 2026-10-08: each sense on a "Which" page says how it differs from the main one */
.ar-plate em{font:italic 400 17px/1.25 var(--serif);max-width:30ch}

/* ---------- reference chips and figure cards (js/article-refs.js) ----------
   A [[gem:..]] style reference is an inline chip: a small line icon and the name, underlined like a color link. A paragraph that
   holds one, and the nearest twins of the color, get a figure card: a fixed 112px picture, the name, and "94% match to Fiery
   Rose". The card is a hairline-ruled row (no box); the picture box never changes size, so nothing moves when the image lands. */
.ar-ref{display:inline;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal;padding:2px 0}
.ar-ref svg{display:inline-block;width:.8em;height:.8em;margin:0 .3em 0 .02em;vertical-align:-.06em;opacity:.72}
.ar-ref:active{opacity:.7}
span.ar-ref.ar-x{text-decoration:none;color:var(--ar-body)}
.ar-fig{margin:22px 0;padding:14px 0 10px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ar-fig-b{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:center;width:100%;min-height:112px;text-align:left;color:var(--ink)}
.ar-fig-b:active .ar-fig-n{opacity:.75}
.ar-fig-im{position:relative;display:block;width:112px;height:112px;overflow:hidden;border-radius:var(--r-1);background:var(--c,var(--surface-2));box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.ar-fig-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.ar-fig-im img.ld{opacity:1}
/* the veil over everything but the color is off (David, 2026-10-11: show the painting as it is, nothing darkened); arfHighlight still centers a wide crop on the color */
.ar-fig-hl{display:none}
.ar-fig-strip{display:flex}
.ar-fig-strip i{flex:1 1 0;background:var(--c)}
.ar-fig-strip i.on{box-shadow:inset 0 -5px 0 rgba(255,255,255,.9)}
.ar-fig-tx{display:flex;flex-direction:column;min-width:0;gap:5px}
.ar-fig-k{font:italic 400 17px/1.25 var(--serif);color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-fig-n{font:400 22px/1.08 var(--serif);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.ar-fig-m{display:flex;align-items:center;gap:8px;font:400 15px/1.4 var(--sans);color:var(--ar-body)}
.ar-fig-d{flex:none;display:inline-flex}
.ar-fig-d i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.ar-fig-d i+i{margin-left:-4px}
.ar-fig-c{font:400 15px/1.35 var(--sans);color:var(--soft)}
.ar-fig-cr{margin:8px 0 0 128px;font:400 15px/1.4 var(--sans);color:var(--soft)}
.ar-fig-cr a{color:inherit;text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:2px}
/* the painter's own link, separate from the painting their picture opens (David, 2026-10-10) */
.ar-fig-painter{display:inline-flex;align-items:center;min-height:36px;margin:4px 0 0 128px;font:italic 400 15px/1.3 var(--serif);color:var(--soft);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:3px}
.ar-fig-painter:active{opacity:.7}
@media (max-width:359px){.ar-fig-painter{margin-left:100px}}
.ar-fig+.ar-fig{margin-top:-1px}
.ar-seen{margin-top:8px}
.ar-seen-h{font:400 22px/1.12 var(--serif);letter-spacing:-.01em;margin:42px 0 4px}
.ar-seen .ar-fig:first-of-type{margin-top:14px}
@media (max-width:359px){.ar-fig-b{grid-template-columns:88px minmax(0,1fr);column-gap:12px}.ar-fig-im{width:88px;height:88px}.ar-fig-cr{margin-left:100px}.ar-fig-n{font-size:19px}}
@media (prefers-reduced-motion:reduce){.ar-fig-im img,.ar-fig-hl{transition:none}}

/* ---------- the book: its own screen ---------- */
.ar-rd-top{display:flex;align-items:center;gap:12px;min-height:48px;padding-top:calc(var(--top) + 10px)}   /* below the status bar (an .article screen has no top padding) */
.ar-rd-t{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font:italic 400 17px/1.2 var(--serif);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-rd-t i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.ar-rd-sp{width:44px;flex:none}
.ar-rd-band{margin:14px calc(-1 * var(--g)) 0;padding:56px var(--g) 18px;background:var(--c)}
.ar-rd-band[data-ink="dark"]{color:#141311}.ar-rd-band[data-ink="light"]{color:#fff}
.ar-rd-band h1{font:400 48px/1 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.ar-read .ar{margin-top:22px}
.ar-rd-end{margin-top:40px}
.ar-kin{border-top:1px solid var(--rule)}

/* ---------- easier reading (David, 2026-10-08: "a lot of text and hard to read ... break up the text, add color to it") ----------
   18px body at a comfortable measure, a drop cap and a chapter number in the page's color (--ar-acc, set by js/article.js
   arAccent: the color itself when it passes 3:1 on the ground, else a lifted tint of its hue), color words that stay legible
   (hl-t: the color or its tint as text, >= 4.5:1; hl-l: white text, an underline in the color, for pale colors and greys),
   and between paragraphs: plates of the colors named, the chapter's attributed quotation, its key dates, wide pictures. */
.ar{--ar-acc-x:var(--ar-acc,var(--ink))}
/* David, 2026-10-10: "not too small" -- 19px at phone widths (never below 18px), 20px from 420px up, ~62ch measure */
.ar-sec>p,.ar-hubi>p{font-size:19px;line-height:1.6;max-width:62ch;margin-bottom:1.1em}
@media (min-width:420px){.ar-sec>p{font-size:20px;line-height:1.58}}
.ar-sec>p.ar-chk{font:italic 400 17px/1.2 var(--serif);color:var(--ar-acc-x);margin:40px 0 0;max-width:none}
.ar-sec .ar-chk+h2{margin-top:6px}
/* a tuned float drop cap, not initial-letter: Safari's -webkit-initial-letter renders low with Instrument Serif
   (its cap-height/line metrics don't match what initial-letter assumes), so both engines get the same plain
   float sizing instead — top of the glyph lands on line 1's cap height, its foot on line 2's baseline. */
/* raised initial (2026-10-09): a sunk drop cap rendered low on iPhone Safari twice, so the first letter sits on the
   first line's baseline, larger and in the page's color; it can never misalign */
.ar-sec>p.ar-dc::first-letter{font-family:var(--serif);color:var(--ar-acc-x);font-weight:400;font-size:2.15em;line-height:0;letter-spacing:-.01em}
/* color words */
.ar-link.hl-t,.ar-hl.hl-t,.ar-sysref.hl-t{color:var(--hl);font-weight:500}
.ar-link.hl-t,.ar-sysref.hl-t{text-decoration-color:color-mix(in srgb,var(--hl) 45%,transparent)}
.ar-link.hl-l,.ar-sysref.hl-l{text-decoration-color:var(--hl);text-decoration-thickness:2px;font-weight:500}
.ar-hl.hl-l{text-decoration:underline;text-decoration-color:var(--hl);text-decoration-thickness:2px;text-underline-offset:4px;font-weight:500;color:var(--ink)}
.ar-link.ar-cw.hl-t{text-decoration:none}
.ar-nw{white-space:nowrap}
/* the sticky bar's line is the chapter's progress, in the page's color */
.ar-bar-p{background:var(--ar-acc-x);opacity:1}

/* side-by-side plates: the page's color first, then the ones the paragraph names (fixed height: nothing moves) */
.ar-plate2{display:flex;gap:6px;margin:26px 0 28px}
.ar-pl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--ink);padding:0}
.ar-pl i{display:block;height:84px;border-radius:var(--r-tile,6px);background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.ar-pl b{font:400 17px/1.15 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ar-pl.me b{color:var(--soft)}
button.ar-pl i{transition:transform .12s ease-out}
button.ar-pl:active i{transform:scale(.97)}

/* the pull quotation */
.ar-pq{margin:30px 0 32px}
.ar-pq blockquote{margin:0;position:relative;padding-top:30px}
.ar-pq blockquote::before{content:"\201C";position:absolute;left:-2px;top:-14px;font:400 76px/1 var(--serif);color:var(--ar-acc-x)}
.ar-pq p{font:400 27px/1.18 var(--serif);letter-spacing:-.012em;color:var(--paper);text-wrap:balance;margin:0}
.ar-pq figcaption{margin-top:12px;font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.ar-pq figcaption::before{content:"";display:inline-block;width:22px;height:1px;background:var(--ar-acc-x);vertical-align:.32em;margin-right:10px}

/* key dates: a mini timeline (dots placed in proportion to the years) and the chapter's own words beside each date */
.ar-tl{margin:28px 0 30px;padding:16px 0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ar-tl-h{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.ar-tl-axis{position:relative;height:42px;margin:12px 0 4px}
.ar-tl-line{position:absolute;left:4%;right:4%;top:9px;height:2px;border-radius:1px;background:var(--rule-strong,rgba(236,232,223,.22))}
.ar-tl-dot{position:absolute;top:4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ar-acc-x);box-shadow:0 0 0 3px var(--ground)}
.ar-tl-lo,.ar-tl-hi{position:absolute;top:24px;font:400 15px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--soft)}
.ar-tl-lo{left:0}.ar-tl-hi{right:0}
.ar-tl ol{list-style:none;margin:0;padding:0}
.ar-tl li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule)}
.ar-tl li b{font:400 22px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ar-acc-x)}
.ar-tl li span{font:400 16px/1.45 var(--sans);color:var(--ar-body)}

/* wide pictures: the full measure, a fixed box (cropped toward the color, see arfHighlight), the words under it */
.ar-fig.ar-wide{margin:28px 0 30px;padding:0 0 12px;border-top:0}
.ar-wide .ar-fig-b{display:block;min-height:0}
.ar-wide .ar-fig-im{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-tile,6px)}
.ar-wide[data-kind="painting"] .ar-fig-im,.ar-wide[data-kind="painter"] .ar-fig-im{aspect-ratio:3/2}
.ar-wide .ar-fig-tx{margin-top:12px}
.ar-wide .ar-fig-cr{margin:8px 0 0}
.ar-fig.ar-wide+.ar-fig{margin-top:0}
@media (max-width:359px){.ar-wide .ar-fig-im{width:100%;height:auto}.ar-wide .ar-fig-cr{margin-left:0}.ar-pq p{font-size:24px}.ar-pl i{height:68px}}
@media (prefers-reduced-motion:reduce){button.ar-pl i{transition:none}}

/* ---------- the lead picture (David, 2026-10-08): every story opens with one; a fixed 16:10 box, cropped, lazy ---------- */
.ar-lead{margin:18px 0 6px}
.ar-lead-b{display:block;width:100%;text-align:left;color:inherit}
.ar-lead-im{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-2);background:var(--c,var(--surface-2));box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.ar-lead-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.ar-lead-im img.ld{opacity:1}
.ar-lead-tx{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:10px}
.ar-lead-k{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.ar-lead-n{font:400 18px/1.2 var(--serif);color:var(--ink)}
b.ar-lead-n{font-weight:400}
.ar-lead-m{display:flex;align-items:center;gap:8px;flex-basis:100%;font:400 15px/1.4 var(--sans);color:var(--soft)}
.ar-lead-cr{margin-top:4px;font:400 15px/1.4 var(--sans);color:var(--soft)}
.ar-lead-cr a{color:inherit;text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:2px}
.ar-read .ar-lead{margin:16px 0 0}
@media (prefers-reduced-motion:reduce){.ar-lead-im img{transition:none}}

/* ---------- collapsible chapters, Wikipedia-style (David, 2026-10-09: "the article should be part of the
   page... minimizing the article could be like minimizing sections — every section can be collapsed, and you
   tap a section to expand it, just like a Wikipedia article"). A chapter's heading is the whole tap target
   (≥44px, chevron rotating); the panel opens and closes with the same height animation as the inline Contents
   bar and the Sources/Test yourself disclosures above (arAccordion, js/article.js). "Expand all / Collapse all"
   is one quiet text control, not another button. ---------- */
.ar-sec.ar-cs{margin-top:40px}
.ar-cs-sum{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:52px;padding:2px 2px 6px;text-align:left}
.ar-cs-tx{flex:1;min-width:0}
.ar-cs-sum h2{margin:0}
.ar-cs-sum .ar-chk{margin:0 0 4px}
.ar-cs-i{width:9px;height:9px;flex:none;margin-top:20px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:rotate(45deg);transition:transform .25s var(--ease)}
.ar-cs-sum[aria-expanded="true"] .ar-cs-i{transform:rotate(225deg)}
.ar-cs-body{overflow:hidden}
.ar-cs-body[hidden]{display:none}
.ar-expand-all{display:inline-flex;align-items:center;min-height:40px;margin:16px 2px 0;font:italic 400 16px/1 var(--serif);color:var(--soft);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px}
.ar-expand-all:active{opacity:.7}
/* "Continue reading -- N more chapters" (David, 2026-10-10): sits between the open run and the first collapsed
   chapter, a clear next step rather than a bare chevron */
.ar-continue{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:30px 0 6px;padding:0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:italic 400 18px/1 var(--serif);color:var(--ar-acc-x,var(--ink))}
.ar-continue svg{flex:none}
.ar-continue:active{opacity:.7}
@media (prefers-reduced-motion:reduce){.ar-cs-i{transition:none}}