/* ============================================================
   P.S. Research v1: the hub (/research) and one reader per deep dive (/research/<slug>).
   Lit paper, long-form. Serif for the argument, sans for labels and numbers. Ink and bronze draw the charts; orange is
   used once per screen at most (the reading line and the live chapter). Every colour is a site token, so all themes hold.
   ============================================================ */
.rs { --rs-measure: 40rem; --rs-fs: clamp(17px, calc(.3vw + 15.6px), 19px); padding: 0 var(--gutter); font-variant-numeric: lining-nums;
  --rs-a: color-mix(in srgb, var(--ink) 84%, var(--paper)); --rs-b: var(--bronze); --rs-c: color-mix(in srgb, var(--ink) 54%, var(--paper));
  --rs-d: color-mix(in srgb, var(--bronze) 50%, var(--paper)); --rs-e: color-mix(in srgb, var(--ink) 28%, var(--paper)); }
/* On the dark papers the theme's bronze turns pale and takes the accent's hue (grey-blue in rain, green in terminal), so it
   sat within 3 to 9 OKLab units of the ink series. The second series there is a mid-tone of the foil highlight instead:
   at least 26 units from the first in every dark theme (also under protan and deutan simulation), 3.2:1 or more on paper. */
:root[data-tone="dark"] .rs { --rs-b: color-mix(in srgb, color-mix(in srgb, var(--bronze-hi) 50%, var(--bronze)) 55%, var(--paper));
  --rs-c: color-mix(in srgb, var(--ink) 58%, var(--paper)); --rs-d: var(--bronze-hi); }
@media (min-width: 760px) and (max-width: 1023px) { .rs > * { padding-left: 32px; } }
.rs > * { max-width: var(--frame); margin-inline: auto; }
.rs-page main#main:focus { outline: none; }
.rs-page { overflow-x: clip; }

/* reading line */
.rs-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-nav, 50) + 6); pointer-events: none; }
.rs-prog i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- hub ---------- */
.rs-hero { padding: clamp(44px, 8vw, 112px) 0 clamp(28px, 4vw, 48px); }
/* the kicker above each h1 follows the house label scale (--lbl-m: 12px on phones, 11px from 641px); a long one wraps evenly */
.rs-hero .tag, .rs-head .tag { display: block; margin-bottom: clamp(16px, 2vw, 24px); line-height: 1.5; text-wrap: balance; }
.rs-hero h1 { font: 400 clamp(38px, 6.4vw, 92px)/1.02 var(--serif); letter-spacing: -.02em; max-width: 14em; margin: 0 0 clamp(18px, 2.4vw, 30px); text-wrap: balance; }
.rs-lede { font: 400 clamp(18px, 1.6vw, 22px)/1.5 var(--serif); color: var(--ink-2); max-width: 36em; margin: 0 0 clamp(24px, 3vw, 40px); text-wrap: pretty; }
.rs-lede b { color: var(--ink); font-weight: 400; }
.rs-start { display: grid; gap: 0; border-top: 1px solid var(--hair-strong); max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.rs-start a { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rs-start a:active b { color: var(--bronze); }
.rs-start a::after { content: "\2192"; color: var(--bronze); transition: translate var(--d-2) var(--ease-out); }
.rs-start span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
.rs-start b { font: 400 clamp(18px, 1.7vw, 23px)/1.25 var(--serif); }
@media (hover: hover) { .rs-start a:hover::after { translate: 6px 0; } .rs-start a:hover b { color: var(--bronze); } }
.rs-meta { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 0; padding: 0; }
.rs-meta div { display: flex; gap: 10px; align-items: baseline; }
.rs-meta dt { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
.rs-meta dd { margin: 0; font: 400 15px/1 var(--sans); color: var(--ink); }

.rs-ctl { position: relative; display: grid; gap: 12px; padding: 14px 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .rs-ctl { grid-template-columns: minmax(240px, 380px) 1fr; grid-template-areas: "q s" "c c"; align-items: center; gap: 14px 20px; } .rs-search { grid-area: q; } .rs-sort { grid-area: s; justify-self: end; } .rs-chips { grid-area: c; flex-wrap: wrap; overflow: visible; } }
/* the field is a full 44px target; 16px type so iOS never zooms the page on focus */
.rs-search input { width: 100%; box-sizing: border-box; min-height: var(--tap, 44px); font: 400 16px/1.2 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong); padding: 10px 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.rs-search input::placeholder { color: var(--dim, var(--ink-2)); opacity: 1; }
.rs-search input:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; }
/* chips: a 44px tap row, the pill drawn inside it. On phones the row runs to the screen edges and fades only on a side
   that still has chips to scroll to (research.js sets data-l / data-r) */
.rs-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0; }
.rs-chips::-webkit-scrollbar { display: none; }
@media (max-width: 899px) {
  .rs-chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .rs-chips[data-r] { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }
  .rs-chips[data-l] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
  .rs-chips[data-l][data-r] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
/* the 44px row is the button; transparent 4px borders above and below leave a 36px pill (fill clipped to the padding box,
   hairline drawn as an inset ring), so the pill's own colours stay on the element itself */
.rs-chip { flex: none; display: inline-block; box-sizing: border-box; min-height: var(--tap, 44px); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; white-space: nowrap; font: 400 13.5px/36px var(--sans); color: var(--ink-2); background: transparent; background-clip: padding-box; border: 4px solid transparent; border-inline-width: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-strong); padding: 0 16px; cursor: pointer; transition: color var(--d-1) var(--ease-out), background-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out), scale var(--d-1) var(--spring); }
.rs-chip i { font-style: normal; color: var(--dim, var(--ink-2)); margin-left: 5px; font-variant-numeric: tabular-nums; }
.rs-chip[aria-pressed="true"] { color: var(--paper); background-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rs-chip[aria-pressed="true"] i { color: inherit; opacity: .72; }
@media (hover: hover) { .rs-chip:not([aria-pressed="true"]):hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } }
.rs-chip:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -1px; }
.rs-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 999px; }
.rs-sort { display: flex; align-items: center; gap: 10px; font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
/* a quiet native select: 44px, 16px type on phones (no iOS zoom), a drawn chevron in the theme's ink */
.rs-sort select { -webkit-appearance: none; appearance: none; min-height: var(--tap, 44px); font: 400 16px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 1px solid var(--hair-strong); border-radius: 6px; padding: 0 34px 0 12px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (min-width: 900px) and (hover: hover) { .rs-sort select { font-size: 14px; min-height: 38px; } }
@media (hover: hover) { .rs-sort select:hover { border-color: var(--ink); } }
.rs-sort select:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.rs-count { font: 400 13px/1 var(--sans); color: var(--ink-2); margin: 18px auto 14px; font-variant-numeric: tabular-nums; }

.rs-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 640px) { .rs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rs-grid { grid-template-columns: repeat(3, 1fr); } }
.rs-card { background: var(--paper); }
.rs-card[hidden] { display: none; }
.rs-card a { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: clamp(20px, 2.2vw, 30px); color: var(--ink); text-decoration: none; min-height: 270px; transition: background-color var(--d-2) var(--ease-out); }
.rs-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rs-cn { font: 400 15px/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums tabular-nums; }
.rs-cth { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
.rs-card h3 { font: 400 clamp(22px, 2vw, 28px)/1.15 var(--serif); letter-spacing: -.01em; margin: 6px 0 0; text-wrap: balance; }
.rs-card p { font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); margin: 0; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-cs { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; align-items: baseline; gap: 10px; }
.rs-cs b { flex: none; white-space: nowrap; font: 400 26px/1 var(--serif); color: var(--ink); }
.rs-cs span { font: 400 12.5px/1.3 var(--sans); color: var(--ink-2); }
.rs-cf { display: flex; gap: 14px; font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
.rs-go { margin-left: auto; color: var(--bronze); opacity: 0; translate: -6px 0; transition: opacity var(--d-2) var(--ease-out), translate var(--d-2) var(--ease-out); }
@media (hover: hover) { .rs-card a:hover { background: var(--vellum); } .rs-card a:hover .rs-go { opacity: 1; translate: 0 0; } }
.rs-card a { -webkit-tap-highlight-color: transparent; }
.rs-card a:active { background: var(--vellum); }
.rs-card a:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; border-radius: 0; }
.rs-card a:focus-visible .rs-go { opacity: 1; translate: 0 0; }
@media (hover: none) { .rs-go { opacity: 1; translate: 0 0; } }
.rs-none { text-align: center; font: 400 16px/1.5 var(--serif); color: var(--ink-2); padding: 40px 0; }

/* ---------- reader: head ---------- */
.rs-head { padding: clamp(28px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); max-width: 1080px; }
/* a 44px target with the same visual spacing: the extra height is taken back out of the margins */
.rs-back { display: inline-flex; align-items: center; min-height: var(--tap, 44px); font: 400 13px/1 var(--sans); color: var(--ink-2); text-decoration: none; margin: -15px 0 calc(clamp(20px, 3vw, 36px) - 15px); -webkit-tap-highlight-color: transparent; }
.rs-back:active { color: var(--bronze); }
@media (hover: hover) { .rs-back:hover { color: var(--bronze); } }
.rs-head h1 { font: 400 clamp(36px, 6vw, 84px)/1.03 var(--serif); letter-spacing: -.02em; margin: 0 0 clamp(14px, 2vw, 24px); text-wrap: balance; }
.rs-sub { font: 400 clamp(18px, 1.8vw, 24px)/1.4 var(--serif); color: var(--ink-2); margin: 0 0 clamp(16px, 2vw, 26px); max-width: 34em; text-wrap: pretty; }
.rs-thesis { font: italic 400 clamp(17px, 1.5vw, 20px)/1.5 var(--serif); color: var(--ink); margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 36em; padding-left: 22px; border-left: 2px solid var(--bronze); text-wrap: pretty; }
.rs-hstats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair); margin-bottom: clamp(32px, 5vw, 64px); }
@media (min-width: 760px) { .rs-hstats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
/* every cell keeps clear air on both sides of a divider; the outer edges stay flush with the text column */
.rs-hs { container-type: inline-size; min-width: 0; padding: 24px 22px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.rs-hs:nth-child(2n+1) { padding-left: 0; }
.rs-hs:nth-child(2n) { padding-right: 0; border-right: 0; }
.rs-hs:nth-child(n+3) { border-top: 1px solid var(--hair); }
@media (min-width: 760px) {
  .rs-hs:nth-child(n) { padding: 24px 26px; border-top: 0; border-right: 1px solid var(--hair); }
  .rs-hs:first-child { padding-left: 0; }
  .rs-hs:last-child { padding-right: 0; border-right: 0; }
}
.rs-hs b { font: 400 clamp(30px, 3.6vw, 52px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
@supports (font-size: 1cqi) { .rs-hs b { font-size: clamp(26px, 20cqi, 52px); } }
.rs-hs span { font: 500 13px/1.3 var(--sans); color: var(--ink); }
.rs-hs em { font: normal 400 12.5px/1.4 var(--sans); color: var(--ink-2); }

.rs-tk { max-width: 980px; margin-bottom: clamp(40px, 6vw, 80px); }
.rs h2.rs-lbl, .rs-tk h2, .rs-srcs h2, .rs-more h2 { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); margin: 0 0 18px; }
.rs-tk ol { list-style: none; counter-reset: tk; margin: 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.rs-tk li { counter-increment: tk; display: grid; grid-template-columns: 3em 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.rs-tk li::before { content: counter(tk, decimal-leading-zero); grid-row: span 2; font: 400 22px/1.2 var(--serif); color: var(--bronze); }
.rs-tk b { font: 500 16px/1.4 var(--sans); }
.rs-tk span { font: 400 15.5px/1.5 var(--sans); color: var(--ink-2); }

/* ---------- reader: layout ---------- */
.rs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
.rs-layout > * { min-width: 0; }
@media (min-width: 1100px) { .rs-layout { grid-template-columns: 220px minmax(0, 1fr); } }
/* The sticky stack under 1100px: the site nav (its resting bottom edge is --rs-nav) and this chapter bar right under it
   (--rs-bar tall). research.js measures both and writes them here; the values below are the fallbacks.
   On phones the nav steps away while you read down; the bar's sticky top then eases to 0 on the nav's own curve, so no
   strip of text shows above it (a change of top only moves the bar while it is stuck, never while it sits in the flow).
   Anchors, focus and the rail's own jumps all land below the bar. */
:root:has(.rs-rail) { --rs-nav: 56px; --rs-bar: 51px; }
@media (min-width: 641px) { :root:has(.rs-rail) { --rs-nav: 79px; } }
@media (max-width: 1099px) {
  html:has(.rs-rail) { scroll-padding-top: calc(var(--rs-nav) + var(--rs-bar) + 4px); }
  .rs-ch { scroll-margin-top: -5px; }
}
.rs-rail { position: sticky; top: var(--rs-nav, 56px); z-index: 4; background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: var(--glass-fx, blur(10px)); backdrop-filter: var(--glass-fx, blur(10px)); margin: 0 calc(var(--gutter) * -1); padding: 3px 0; border-bottom: 1px solid var(--hair); }
@media (max-width: 640px) {
  .rs-page:has(.nav--glass.nav-away) .rs-rail { top: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .rs-rail { transition: top var(--d-2) var(--ease-out); }
    .rs-page:has(.nav--glass.nav-away) .rs-rail { transition: top 240ms var(--ease-in); }
  }
}
.rs-rail > p { display: none; }
/* the chapter row runs edge to edge and fades only where there are more chapters (research.js sets data-l / data-r) */
.rs-rail ol { list-style: none; margin: 0; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rs-rail ol::-webkit-scrollbar { display: none; }
.rs-rail ol[data-r] { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }
.rs-rail ol[data-l] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.rs-rail ol[data-l][data-r] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* each chapter is a 44px target; the live one wears a 34px pill (transparent borders above and below, fill on the padding box) */
.rs-rail a { display: flex; gap: 8px; align-items: baseline; box-sizing: border-box; min-height: var(--tap, 44px); white-space: nowrap; padding: 0 12px; border-radius: 999px; font: 400 13px/34px var(--sans); color: var(--ink-2); text-decoration: none; border: 5px solid transparent; border-inline-width: 0; background-clip: padding-box; -webkit-tap-highlight-color: transparent; transition: color var(--d-1) var(--ease-out), background-color var(--d-1) var(--ease-out); }
.rs-rail a i { font: normal 500 var(--lbl-s)/34px var(--sans); color: var(--bronze); font-variant-numeric: tabular-nums; }
.rs-rail a[aria-current="true"] { color: var(--ink); background-color: var(--vellum); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.rs-rail a:active { color: var(--ink); }
.rs-rail a:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
@media (hover: hover) { .rs-rail a:hover { color: var(--ink); } }
/* Phone and tablet bar: solid, so text never shows through it, and long chapter names end in an ellipsis
   so the current chapter never runs off the screen and its neighbours stay in view. */
@media (max-width: 1099px) {
  .rs-rail { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rs-rail a { display: block; max-width: min(74vw, 30em); overflow: hidden; text-overflow: ellipsis; }
  .rs-rail a i { margin-inline-end: 8px; }
}
.rs-tools { display: none; }
@media (min-width: 1100px) {
  .rs-rail { align-self: start; top: 88px; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .rs-rail > p { display: block; font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); margin: 0 0 14px; }
  .rs-rail ol { flex-direction: column; gap: 0; padding: 0; overflow: visible; border-left: 1px solid var(--hair); -webkit-mask-image: none; mask-image: none; }
  .rs-rail a { min-height: 0; border-radius: 0; border: 0; border-left: 2px solid transparent; margin-left: -1px; padding: 11px 0 11px 16px; white-space: normal; line-height: 1.3; font-size: 14px; box-shadow: none; }
  .rs-rail a i { min-width: 1.6em; line-height: 1.3; }
  .rs-rail a[aria-current="true"] { border-left-color: var(--accent); background: none; box-shadow: none; color: var(--ink); }
  .rs-tools { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 22px; }
}
.rs-btn { font: 400 12.5px/1 var(--sans); color: var(--ink-2); background: transparent; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 11px 16px; cursor: pointer; }
@media (hover: hover) { .rs-btn:hover { color: var(--ink); border-color: var(--ink); } }
.rs-keys { font: 400 12px/1 var(--sans); color: var(--dim, var(--ink-2)); }

.rs-main { min-width: 0; }
.rs-ch { padding: clamp(36px, 6vw, 80px) 0 clamp(12px, 2vw, 24px); border-top: 1px solid var(--hair-strong); }
.rs-ch:first-child { border-top: 0; padding-top: clamp(20px, 3vw, 36px); }
.rs-chh { display: grid; grid-template-columns: auto 1fr; gap: 14px clamp(16px, 2.4vw, 32px); align-items: baseline; margin-bottom: clamp(24px, 3vw, 40px); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .rs-chh { cursor: pointer; } }
.rs-chn { font: 400 clamp(44px, 7vw, 100px)/.9 var(--serif); letter-spacing: -.03em; color: var(--bronze); font-variant-numeric: lining-nums tabular-nums; }
.rs-chh h2 { font: 400 clamp(28px, 3.8vw, 52px)/1.08 var(--serif); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.rs-chh p { font: 500 var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); margin: 10px 0 0; }
.rs-ch[data-folded] .rs-body { display: none; }
.rs-ch[data-folded] .rs-chh::after { content: "Show"; grid-column: 2; font: 400 12.5px/1 var(--sans); color: var(--bronze); }
.rs-ch[data-latest] .rs-chn { color: var(--foil-line, var(--accent)); }
.rs-ch[data-latest] { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 5%, transparent), transparent 40%); }

.rs-body { max-width: 46rem; }
.rs-body > * { margin-top: 0; }
.rs-hd { margin: clamp(32px, 4vw, 52px) 0 16px; scroll-margin-top: 100px; }
.rs-hd:first-child { margin-top: 0; }
.rs-eye { display: block; font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.rs-hd h3 { font: 400 clamp(21px, 2.1vw, 28px)/1.25 var(--serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.rs-p { font: 400 var(--rs-fs)/1.6 var(--serif); color: var(--ink); margin: 0 0 1.1em; text-wrap: pretty; }
.rs-list { margin: 0 0 1.3em; padding: 0; list-style: none; counter-reset: l; }
.rs-list li { position: relative; padding: 13px 0 13px 1.7em; border-top: 1px solid var(--hair); font: 400 calc(var(--rs-fs) - 1px)/1.55 var(--serif); }
.rs-list li:last-child { border-bottom: 1px solid var(--hair); }
ul.rs-list li::before { content: ""; position: absolute; left: .25em; top: 1.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }
ol.rs-list li { counter-increment: l; }
ol.rs-list li::before { content: counter(l); position: absolute; left: 0; top: 1em; font: 500 13px/1.6 var(--sans); color: var(--bronze); }
.rs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair); margin: 8px 0 1.6em; }
/* Four or more figures sit two across: the reading column is too narrow for four with air around each divider. */
.rs-st { container-type: inline-size; padding: 22px 22px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--hair); min-width: 0; }
.rs-st:nth-child(2n+1) { padding-left: 0; }
.rs-st:nth-child(2n) { padding-right: 0; border-right: 0; }
.rs-st:nth-child(n+3) { border-top: 1px solid var(--hair); }
.rs-stats[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.rs-stats[data-n="1"] .rs-st:nth-child(n), .rs-stats[data-n="3"] .rs-st:nth-child(n) { padding: 20px 0; border-right: 0; border-top: 0; }
.rs-stats[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
.rs-stats[data-n="3"] .rs-st:nth-child(n+2) { border-top: 1px solid var(--hair); }
@media (min-width: 760px) {
  .rs-stats[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-stats[data-n="3"] .rs-st:nth-child(n) { padding: 22px 26px; border-top: 0; border-right: 1px solid var(--hair); }
  .rs-stats[data-n="3"] .rs-st:first-child { padding-left: 0; }
  .rs-stats[data-n="3"] .rs-st:last-child { padding-right: 0; border-right: 0; }
}
.rs-st b { font: 400 26px/1.05 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
@supports (font-size: 1cqi) { .rs-st b { font-size: clamp(22px, 15.5cqi, 38px); } }
.rs-st span { font: 500 13px/1.3 var(--sans); }
.rs-st em { font: normal 400 12px/1.4 var(--sans); color: var(--ink-2); }
.rs-call { margin: 1.4em 0; padding: 18px 22px; border-left: 2px solid var(--bronze); background: var(--vellum); border-radius: 0 6px 6px 0; }
.rs-call span { display: block; font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.rs-call p { margin: 0; font: 400 calc(var(--rs-fs) - 1px)/1.55 var(--serif); }
.rs-q { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--hair-strong); }
.rs-q p { font: italic 400 clamp(20px, 2vw, 26px)/1.4 var(--serif); margin: 0; }
.rs-q cite { display: block; margin-top: 10px; font: normal 400 13px/1 var(--sans); color: var(--ink-2); }
.rs-tbl { margin: 1em 0 1.6em; }
.rs-tt { font: 500 14px/1.3 var(--sans); margin: 0 0 10px; }
.rs-tw { overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid var(--hair-strong);
  /* without script: soft edge shadows only on the side that still has table to scroll to (ink-tinted, so they show on dark papers too) */
  background: linear-gradient(to right, var(--paper) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--paper) 30%, transparent) right center / 28px 100% no-repeat local, linear-gradient(to right, color-mix(in srgb, var(--ink) 12%, transparent), transparent) left center / 12px 100% no-repeat scroll, linear-gradient(to left, color-mix(in srgb, var(--ink) 12%, transparent), transparent) right center / 12px 100% no-repeat scroll; }
/* with script: research.js marks the side that still has table (data-l / data-r) and that edge fades out. A mask needs no
   paper colour, so it holds on vellum, on the latest chapter's tint and in all sixteen themes */
.rs-js .rs-tw { background: none; }
.rs-tw[data-r] { -webkit-mask-image: linear-gradient(to left, transparent, #000 40px); mask-image: linear-gradient(to left, transparent, #000 40px); }
.rs-tw[data-l] { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.rs-tw[data-l][data-r] { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.rs-tw:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; -webkit-mask-image: none; mask-image: none; }
.rs-tw table { width: 100%; border-collapse: collapse; font: 400 14px/1.45 var(--sans); min-width: 420px; }
.rs-tw th, .rs-tw td { text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.rs-tw thead th { font: 500 var(--lbl-s)/1.2 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--dim, var(--ink-2)); }
.rs-tw tbody th { font-weight: 500; color: var(--ink); min-width: 8em; }
.rs-tl { list-style: none; margin: 1em 0 1.6em; padding: 0 0 0 18px; border-left: 1px solid var(--hair-strong); }
.rs-tl li { position: relative; display: grid; gap: 4px; padding: 0 0 22px 18px; }
.rs-tl li::before { content: ""; position: absolute; left: -24px; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--bronze); }
.rs-tl time { font: 500 13px/1.2 var(--sans); color: var(--bronze); font-variant-numeric: tabular-nums; }
.rs-tl span { font: 400 calc(var(--rs-fs) - 1px)/1.5 var(--serif); }

/* charts */
.rs-fig { margin: 1.6em 0 2em; }
.rs-fig figcaption { font: 500 14px/1.35 var(--sans); margin-bottom: 12px; }
.rs-fig figcaption i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.rs-plot { position: relative; width: 100%; }
.rs-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.rs-plot .ax { stroke: var(--hair); stroke-width: 1; }
.rs-plot .ax0 { stroke: var(--hair-strong); }
/* axis and value labels: 12px at every width (the SVG is drawn at its real pixel width, so this is the printed size) */
.rs-plot text { font: 400 12px var(--sans); fill: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.rs-plot .vl { font-weight: 500; fill: var(--ink); }
.rs-plot .vl.in { fill: var(--paper); }
.rs-plot .bar { transition: opacity var(--d-1) var(--ease-out); }
.rs-plot[data-on] .bar:not([data-hot]), .rs-plot[data-on] .ln:not([data-hot]) { opacity: .35; }
.rs-plot .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; transition: opacity var(--d-1) var(--ease-out); }
.rs-plot .dot { transition: r var(--d-1) var(--ease-out); }
/* the crosshair shows only while a point is read (CSS opacity outranks the SVG attribute, so the state lives here) */
.rs-plot .cur { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--d-1) var(--ease-out); }
.rs-plot[data-cur] .cur { opacity: .5; }
/* the tooltip wraps inside the chart instead of running off a 360px screen; research.js keeps it inside the plot and,
   for a finger, lifts it above the touch point */
.rs-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; background: var(--ink); color: var(--paper); font: 400 13px/1.4 var(--sans); font-variant-numeric: lining-nums tabular-nums; padding: 8px 11px; border-radius: 6px; width: max-content; max-width: min(17rem, 100%); box-sizing: border-box; overflow-wrap: anywhere; box-shadow: 0 6px 18px color-mix(in srgb, #000 18%, transparent); opacity: 0; transition: opacity var(--d-1) var(--ease-out); }
.rs-tip[data-show] { opacity: 1; }
.rs-tip b { font-weight: 500; display: block; margin-bottom: 3px; }
/* swatches keep a paper ring, so the ink series still shows on the ink tooltip */
.rs-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: .05em; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--paper) 75%, transparent); }
.rs-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font: 400 13px/1.3 var(--sans); color: var(--ink-2); }
.rs-leg span { display: inline-flex; align-items: center; gap: 7px; }
.rs-leg i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.rs-dt { margin-top: 6px; }
/* "View the data": a 44px target, a drawn chevron that turns when open */
.rs-dt summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap, 44px); font: 400 13px/1.2 var(--sans); color: var(--bronze); cursor: pointer; list-style: none; padding: 0; -webkit-tap-highlight-color: transparent; }
.rs-dt summary::-webkit-details-marker { display: none; }
.rs-dt summary::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate var(--d-1) var(--ease-out), translate var(--d-1) var(--ease-out); }
.rs-dt[open] summary::after { rotate: 225deg; translate: 0 1px; }
@media (hover: hover) { .rs-dt summary:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.rs-dt summary:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.rs-dt[open] summary { margin-bottom: 4px; }
.rs-src { font: 400 12px/1.4 var(--sans); color: var(--dim, var(--ink-2)); margin: 8px 0 0; }

/* end matter */
.rs-srcs { max-width: 46rem; margin: clamp(32px, 5vw, 64px) 0 0; padding-top: 24px; border-top: 1px solid var(--hair-strong); }
.rs-srcs p { font: 400 14px/1.7 var(--sans); color: var(--ink-2); margin: 0; }
.rs-pnav { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: clamp(48px, 7vw, 96px) auto 0; }
@media (min-width: 720px) { .rs-pnav { grid-template-columns: 1fr 1fr; } }
.rs-pn { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--paper); color: var(--ink); text-decoration: none; }
.rs-next { text-align: right; }
.rs-pn span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); }
.rs-pn b { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--serif); }
@media (hover: hover) { .rs-pn:hover { background: var(--vellum); } }
.rs-pn, .rs-rel { -webkit-tap-highlight-color: transparent; }
.rs-pn:active, .rs-rel:active { background: var(--vellum); }
.rs-pn:focus-visible, .rs-rel:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; border-radius: 0; }
.rs-more { margin-top: clamp(40px, 6vw, 72px); }
.rs-relg { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 800px) { .rs-relg { grid-template-columns: repeat(3, 1fr); } }
.rs-rel { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--paper); color: var(--ink); text-decoration: none; }
.rs-rel span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); }
.rs-rel b { font: 400 21px/1.2 var(--serif); }
.rs-rel em { font: normal 400 14px/1.5 var(--sans); color: var(--ink-2); }
/* three across, the blurbs hold to three lines so the cards stay level; stacked on a phone, each one reads in full */
@media (min-width: 800px) { .rs-rel em { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
@media (hover: hover) { .rs-rel:hover { background: var(--vellum); } }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .rs-js .rs-hd, .rs-js .rs-p, .rs-js .rs-stats, .rs-js .rs-fig, .rs-js .rs-call, .rs-js .rs-tbl, .rs-js .rs-list { opacity: 0; translate: 0 14px; transition: opacity var(--d-3) var(--ease-out), translate var(--d-3) var(--ease-out); }
  .rs-js .rs-in { opacity: 1; translate: 0 0; }
}
@media print { .rs-rail, .rs-ctl, .rs-prog, .nav { display: none !important; } .rs-ch[data-folded] .rs-body { display: block; } }

/* quiz + calculators */
.rs-qa { margin: 12px 0; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--paper); }
.rs-qa summary { cursor: pointer; list-style: none; padding: 14px 18px; font: 400 calc(var(--rs-fs) - 1px)/1.5 var(--serif); display: grid; gap: 4px; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-1) var(--ease-out), scale var(--d-1) var(--spring); border-radius: 8px; }
@media (hover: hover) { .rs-qa summary:hover { background: var(--vellum); } }
.rs-qa summary:active { background: var(--vellum); }
.rs-qa[open] summary { border-radius: 8px 8px 0 0; }
.rs-qa summary::-webkit-details-marker { display: none; }
.rs-qa summary span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); }
.rs-qa summary::after { content: "Show answer"; font: 400 13px/1.2 var(--sans); color: var(--bronze); margin-top: 6px; }
.rs-qa[open] summary::after { content: "Hide answer"; }
.rs-qa p { margin: 0; padding: 0 18px 16px; font: 400 calc(var(--rs-fs) - 1px)/1.55 var(--serif); color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 14px; }
.rs-qa summary:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 8px; }
.rs-calc { margin: 1.8em 0 2.2em; padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--vellum); }
.rc-t { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); margin: 0 0 6px; }
.rc-d { font: 400 14px/1.5 var(--sans); color: var(--ink-2); margin: 0 0 16px; max-width: 40em; }
.rc-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; margin-bottom: 18px; }
.rc-f label { display: grid; gap: 6px; font: 500 12.5px/1.2 var(--sans); color: var(--ink); }
.rc-f input, .rc-f select { width: 100%; box-sizing: border-box; min-height: var(--tap, 44px); font: 400 16px/1.2 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 6px; padding: 10px 12px; font-variant-numeric: tabular-nums; }
/* the slider keeps a 44px touch row around its thin track */
.rc-f input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--foil-line, var(--accent)); height: var(--tap, 44px); margin: -6px 0; touch-action: pan-y; }
.rc-f input:focus-visible, .rc-f select:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
.rc-f small { font: 400 12px/1.35 var(--sans); color: var(--dim, var(--ink-2)); }
.rc-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--hair-strong); }
.rc-o div { padding: 14px 14px 4px 0; display: grid; gap: 4px; align-content: start; }
.rc-o b { font: 400 clamp(22px, 2.6vw, 32px)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.rc-o span { font: 500 12px/1.3 var(--sans); color: var(--ink-2); }
/* a loss reads in the foil text tone: still orange, and at least 4.5:1 on the vellum panel in every theme */
.rc-o .neg b { color: var(--foil-text, var(--accent)); }
.rc-n { font: 400 13px/1.5 var(--sans); color: var(--ink-2); margin: 12px 0 0; }
.rc-n.warn { color: var(--ink); border-left: 2px solid var(--foil-line, var(--accent)); padding-left: 14px; }
.rc-plot { margin: 4px 0 14px; }
.rc-plot svg { width: 100%; height: auto; display: block; }
.rc-plot text { font: 400 12px var(--sans); fill: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.rc-plot .ax { stroke: var(--hair); } .rc-plot .ax0 { stroke: var(--hair-strong); }
.rc-plot .pl { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.rc-plot .pf { fill: color-mix(in srgb, var(--bronze) 22%, transparent); }
.rc-plot .pt { fill: var(--accent); }
.rc-plot .pv { stroke: var(--accent); stroke-dasharray: 3 3; stroke-width: 1; }
.rc-plot .pl2 { stroke: var(--bronze); stroke-width: 1.6; stroke-dasharray: 5 4; }

/* multiple-choice quiz */
.rs-quiz { margin: 1.6em 0; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--paper); }
.rq-k { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); margin: 0 0 10px; }
.rq-q { font: 400 clamp(18px, 1.8vw, 21px)/1.4 var(--serif); margin: 0 0 14px; text-wrap: pretty; }
.rq-o { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* options: the letter sits on the answer's first baseline; a press answers on touch, a hover previews on a mouse */
.rq-b { width: 100%; min-height: 48px; display: grid; grid-template-columns: 1.9em 1fr; gap: 10px; align-items: baseline; text-align: left; font: 400 15px/1.45 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 8px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--d-1) var(--ease-out), background-color var(--d-1) var(--ease-out), opacity var(--d-2) var(--ease-out), scale var(--d-1) var(--spring); }
.rq-b i { font: normal 500 12px/1.45 var(--sans); color: var(--bronze); white-space: nowrap; }
@media (hover: hover) { .rs-quiz:not([data-done]) .rq-b:hover { border-color: var(--ink); background: var(--vellum); } }
.rs-quiz:not([data-done]) .rq-b:active { border-color: var(--ink); background: var(--vellum); }
.rq-b:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.rs-quiz[data-done] .rq-b { cursor: default; opacity: .62; }
.rs-quiz[data-done] .rq-b:active { scale: none; }
.rs-quiz[data-done] .rq-b[data-ok] { opacity: 1; border-color: var(--ink); background: color-mix(in srgb, var(--bronze) 12%, var(--paper)); }
.rs-quiz[data-done] .rq-b[data-bad] { opacity: 1; border-color: var(--foil-line, var(--accent)); }
.rq-b[data-ok] i::after { content: " \2713"; } .rq-b[data-bad] i::after { content: " \2717"; color: var(--foil-text, var(--accent)); }
.rq-fb { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.rq-fb b { display: block; font: 500 14px/1.3 var(--sans); margin-bottom: 6px; }
.rq-fb[data-right] b { color: var(--bronze); } .rq-fb[data-wrong] b { color: var(--foil-text, var(--accent)); }
.rq-fb p { margin: 0; font: 400 16px/1.55 var(--serif); color: var(--ink-2); }
.rq-fb p span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); margin-right: 6px; }
.rs-score { font: 400 13px/1.3 var(--sans); color: var(--ink-2); margin: 4px 0 0; } .rs-score b { color: var(--ink); font-weight: 500; }

/* ---------- Test yourself: out of the reading flow ----------
   Each chapter ends with one quiet button; its questions wait in a dialog until the reader asks for them.
   A bottom sheet on phones, a centred card of reading width on larger screens. */
.rs-tq { margin: clamp(20px, 3vw, 32px) 0 clamp(8px, 1.5vw, 16px); }
.rs-tq-b { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap, 44px); box-sizing: border-box; padding: 0 18px 0 16px; border: 1px solid var(--hair-strong); border-radius: 999px; background: transparent; color: var(--ink-2); font: 400 13px/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--d-1) var(--ease-out), background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out), scale var(--d-1) var(--spring); }
.rs-tq-b span { font: 500 var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); }
.rs-tq-b i { font-style: normal; font-variant-numeric: tabular-nums; }
/* a small drawn arrow: it opens something */
.rs-tq-b::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; margin-left: -2px; transition: translate var(--d-2) var(--ease-out); }
@media (hover: hover) { .rs-tq-b:hover { border-color: var(--ink); color: var(--ink); background: var(--vellum); } .rs-tq-b:hover::after { translate: 2px 0; } }
.rs-tq-b:active { background: var(--vellum); border-color: var(--ink); }
.rs-tq-b:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
/* answered questions in this chapter: the button says so quietly with a filled dot (research.js sets data-done) */
.rs-tq-b[data-done] i::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--bronze); vertical-align: .1em; }

/* the gutter is reserved from the first paint (the body class is parsed before any dialog), so locking the page later never
   moves it sideways */
html:has(> body.rs-page:not(.rs-hubpage)) { scrollbar-gutter: stable; }
html:has(.rs-qd[open]) { overflow: hidden; }
.rs-qd { box-sizing: border-box; padding: 0; border: 1px solid var(--hair-strong); color: var(--ink); background: var(--paper); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; color-scheme: inherit;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .08); }
.rs-qd::backdrop { background: rgba(10, 9, 8, .48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rs-qd:focus { outline: none; }
/* phones: a bottom sheet, full width, rounded top corners, never taller than 85% of the screen */
@media (max-width: 640px) {
  .rs-qd { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 85vh; max-height: 85dvh; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
}
/* larger screens: a card of reading width in the middle of the screen */
@media (min-width: 641px) {
  .rs-qd { margin: auto; width: min(42rem, calc(100% - 64px)); max-height: min(85vh, 880px); border-radius: 12px; }
}
.rs-qd-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px clamp(20px, 3vw, 28px); background: var(--paper); border-bottom: 1px solid var(--hair); }
.rs-qd-t { margin: 0; font: 500 var(--lbl-s)/1.2 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--bronze); }
.rs-qd-t:focus { outline: none; }
/* close: a 44px button with a drawn cross */
.rs-qd-x { position: relative; flex: none; width: var(--tap, 44px); height: var(--tap, 44px); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out), scale var(--d-1) var(--spring); }
.rs-qd-x::before, .rs-qd-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: currentColor; border-radius: 1px; rotate: 45deg; }
.rs-qd-x::after { rotate: -45deg; }
@media (hover: hover) { .rs-qd-x:hover { background: var(--vellum); color: var(--ink); } }
.rs-qd-x:active { background: var(--vellum); color: var(--ink); }
.rs-qd-x:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.rs-qd-b { padding: 0 clamp(20px, 3vw, 28px); }
.rs-qd .rs-quiz { margin: 0; padding: 22px 0 24px; border: 0; border-radius: 0; background: none; }
.rs-qd .rs-quiz + .rs-quiz { border-top: 1px solid var(--hair); }
.rs-qd-f { padding: 0 clamp(20px, 3vw, 28px) max(20px, env(safe-area-inset-bottom)); }
.rs-qd-f:empty { padding-top: 0; }
.rs-qd-f .rs-score { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hair); }
@media (prefers-reduced-motion: no-preference) {
  .rs-qd[open] { animation: rsQdIn var(--d-3) var(--ease-out); }
  .rs-qd[open]::backdrop { animation: rsQdFade var(--d-2) var(--ease-out); }
  @media (max-width: 640px) { .rs-qd[open] { animation-name: rsQdUp; } }
}
@keyframes rsQdIn { from { opacity: 0; translate: 0 14px; } }
@keyframes rsQdUp { from { translate: 0 100%; } }
@keyframes rsQdFade { from { opacity: 0; } }
/* the deck-wide score stays quiet: nothing until the reader has answered something */
.rs-score[hidden] { display: none; }
@media print { .rs-tq, .rs-qd { display: none !important; } }