/* APTAVIA 2.0 · the street's the reading template (run 5, part p2a). GENERATED by scripts/dev/public/build-reading-sheets.mjs from walk/guide-page/guide.css, verbatim; never hand-edit. */
/* -------------------------------------------------------------------------- 15 · round 7 · one type system (7 Oct 2026, the round-7 kit owner)
   redo7/BRIEF.md G2 + G4. ADDITIVE ONLY: new custom properties and one zero-specificity rule for a NEW attribute
   ([data-reading], which no page before round 7 carries), so no earlier page changes by a pixel.
   Sizes: 12 labels · 14 body · 16 lead and names · 20 section head · 30 the one page title (28–32 band; the kit's own
   control sizes stay theirs). Weights: 400 reading · 500 body · 650 labels and buttons · 760 the title.
   UI sans (Schibsted Grotesk) everywhere; serif (Newsreader, then Georgia) ONLY inside [data-reading]; no monospace.
   Use:  .my-title { font: var(--r7-w-title) var(--r7-30)/1.15 var(--r7-ui); }   .my-label { font: var(--r7-w-label) var(--r7-12)/1.3 var(--r7-ui); }
   Manual: shared/ROUND6-KIT.md §R7. Measured by shared/r7-check.js (R7Check). */
:root {
  --r7-12: 12px;  --r7-14: 14px;  --r7-16: 16px;  --r7-20: 20px;  --r7-30: 30px;
  --r7-w-read: 400;  --r7-w-body: 500;  --r7-w-label: 650;  --r7-w-title: 760;
  --r7-ui: var(--sp-font);
  --r7-serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
}
/* Her reading material (G2: ACER passages and stimuli, a stem and its options, an essay prompt, her own writing and notes,
   the Judges' quotations of her words, a lesson's body) is wrapped in data-reading: R7Check exempts it from the word count,
   and it is the ONLY place a serif may appear. The rule is :where() (specificity 0), so any page or kit rule that names its
   own font still wins (the question card's stem stays the card's); it only gives inheriting text the reading serif at 400.
   data-reading="sans": reading that the live app sets in the UI sans (a stem, her notes) — still exempt, never serif. */
:where([data-reading]:not([data-reading="sans"])) { font-family: var(--r7-serif); font-weight: var(--r7-w-read); }
:where([data-reading="sans"]) { font-family: var(--r7-ui); }

/* =============================================================================
   APTAVIA 2.0 · walk · guide-page (round 10) — the reading template's own pieces, on top of shared/public-shell.css.
   One quiet signature figure per guide: the lesson's key idea drawn INTO the street (the titration curve is the horizon;
   the post's topic table is a terrace; the alternative's two clocks stand on the pavement). Dark first; light = ink.
   Tokens only (--pub-*, --fd-*, pp-*, --sp-*) and oklch(); no hex. Motion: once, opacity + translate, never a loop/scale.
   ============================================================================= */

/* ---------------------------------------------------------------- 0 · page tokens */
.gp {
  --gp-line: var(--pub-lamp);
  --gp-hill0: oklch(0.42 0.05 300 / .55);
  --gp-hill1: oklch(0.26 0.035 288 / .82);
  --gp-hill2: oklch(0.2 0.03 285 / 0);
  --gp-ok: oklch(0.80 0.13 160);
  --gp-ok-wash: oklch(0.80 0.13 160 / .12);
  --gp-warn: oklch(0.82 0.12 70);
  --gp-pick: var(--pub-edge-strong);
  --gp-card: var(--pub-card);
  --gp-panel: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop);
  --gp-ui: 600 13px/1.3 var(--pub-font);
}
html:not(.dark) .gp {
  --gp-line: var(--sp-ink);
  --gp-hill0: oklch(1 0 0 / .55);
  --gp-hill1: oklch(1 0 0 / .22);
  --gp-hill2: color-mix(in srgb, var(--pub-ground) 0%, transparent);
  --gp-ok: oklch(0.52 0.13 160);
  --gp-ok-wash: oklch(0.52 0.13 160 / .09);
  --gp-warn: oklch(0.55 0.12 60);
}

/* ---------------------------------------------------------------- 1 · the house pieces the figures borrow (as the bench draws them) */
.gp-fig { --wall: var(--fd-wall); --roof: oklch(0.205 0.014 48); --roof-hi: oklch(0.36 0.02 60 / .7); }
html:not(.dark) .gp-fig { --roof: oklch(0.40 0.02 55); --roof-hi: oklch(0.62 0.02 70); }
.pk-wall { fill: var(--wall); } .pk-board { stroke: var(--fd-board-lo); stroke-width: 1.2; }
.pk-roof { fill: var(--roof); } .pk-roof-hi { fill: none; stroke: var(--roof-hi); stroke-width: 2; } .pk-fascia { fill: var(--fd-fascia); } .pk-gutter { fill: var(--fd-gutter); }
.pk-s-room0 { stop-color: oklch(0.88 0.11 78); } .pk-s-room1 { stop-color: oklch(0.66 0.12 58); } .pk-s-room2 { stop-color: oklch(0.36 0.08 45); }
html:not(.dark) .pk-s-room0 { stop-color: oklch(0.95 0.015 230); } html:not(.dark) .pk-s-room1 { stop-color: oklch(0.88 0.02 230); } html:not(.dark) .pk-s-room2 { stop-color: oklch(0.80 0.025 235); }
.pk-s-spill0 { stop-color: oklch(0.82 0.11 72 / .45); } .pk-s-spill1 { stop-color: oklch(0.82 0.11 72 / 0); }
html:not(.dark) .gp-t-spill { display: none; }
.pk-shadow { fill: oklch(0.05 0.01 270 / .5); } html:not(.dark) .pk-shadow { fill: color-mix(in srgb, var(--sp-ink) 10%, transparent); }
.pk-line { fill: none; stroke: color-mix(in srgb, var(--sp-ink) 70%, transparent); stroke-width: 1.4; } html.dark .pk-line { stroke: oklch(0.05 0.01 50 / .55); }
.gp-fig-t { font: 650 15px/1 var(--pub-font); letter-spacing: .02em; fill: var(--pub-muted); }
.gp-fig-t--lamp { fill: var(--pub-lamp); font-size: 16px; }
html:not(.dark) .gp-fig-t--lamp { fill: var(--sp-ink); }
.gp-fig-t--q { fill: var(--pub-muted); }

/* ---- the guide's ridge: the titration curve as the horizon */
.gp-s-hill0 { stop-color: var(--gp-hill0); } .gp-s-hill1 { stop-color: var(--gp-hill1); } .gp-s-hill2 { stop-color: var(--gp-hill2); }
.gp-s-band0 { stop-color: oklch(0.86 0.11 78 / .20); } .gp-s-band1 { stop-color: oklch(0.86 0.11 78 / 0); }
html:not(.dark) .gp-s-band0 { stop-color: color-mix(in srgb, var(--sp-ink) 7%, transparent); }
.gp-hill-line { fill: none; stroke: var(--gp-line); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px oklch(0.86 0.11 78 / .7)) drop-shadow(0 0 2px oklch(0.95 0.08 85 / .9)); }
html:not(.dark) .gp-hill-line { stroke-width: 2.6; filter: none; }
.gp-strata { fill: none; stroke: oklch(0.86 0.08 300 / .5); stroke-width: 1; }
html:not(.dark) .gp-strata { stroke: color-mix(in srgb, var(--sp-ink) 30%, transparent); }
.gp-fig-t--in { fill: var(--pub-lamp); letter-spacing: .16em; text-transform: uppercase; font-size: 13px; }
html:not(.dark) .gp-fig-t--in { fill: var(--sp-ink); }
.gp-hill-spec { fill: none; stroke: oklch(0.96 0.03 300 / .16); stroke-width: 1.2; }
html:not(.dark) .gp-strata { fill: none; stroke: oklch(0.86 0.08 300 / .5); stroke-width: 1; }
html:not(.dark) .gp-strata { stroke: color-mix(in srgb, var(--sp-ink) 30%, transparent); }
.gp-fig-t--in { fill: var(--pub-lamp); letter-spacing: .16em; text-transform: uppercase; font-size: 13px; }
html:not(.dark) .gp-fig-t--in { fill: var(--sp-ink); }
.gp-hill-spec { stroke: color-mix(in srgb, var(--sp-ink) 12%, transparent); }
.gp-neutral { fill: none; stroke: var(--pub-edge-strong); stroke-width: 1; stroke-dasharray: 3 7; }
.gp-eq { fill: none; stroke: var(--pub-edge-strong); stroke-width: 1.2; stroke-dasharray: 2 6; }
.gp-bur-glass { fill: oklch(0.9 0.03 280 / .10); stroke: oklch(0.9 0.04 290 / .45); stroke-width: 1.2; }
.gp-bur-liq { fill: oklch(0.70 0.12 300 / .30); }
.gp-bur-grad { stroke: oklch(0.9 0.04 290 / .5); stroke-width: 1; }
.gp-clamp { fill: none; stroke: oklch(0.42 0.02 280); stroke-width: 3; stroke-linecap: round; }
html:not(.dark) .gp-clamp { stroke: color-mix(in srgb, var(--sp-ink) 45%, transparent); }
.gp-bur-cock { fill: var(--pub-brass); }
.gp-drop { fill: oklch(0.80 0.10 300 / .8); }
html:not(.dark) .gp-bur-glass { fill: oklch(1 0 0); stroke: var(--sp-ink); }
html:not(.dark) .gp-bur-liq { fill: color-mix(in srgb, var(--sp-ink) 12%, transparent); }
html:not(.dark) .gp-bur-grad { stroke: var(--sp-ink); }
html:not(.dark) .gp-drop { fill: color-mix(in srgb, var(--sp-ink) 55%, transparent); }
html.pub-arrive .gp-fig .gp-drop { opacity: 0; translate: 0 -10px; }
html.pub-arrive.pub-go .gp-fig .gp-drop { opacity: 1; translate: 0 0; transition: opacity .3s var(--pub-ease) 1s, translate .4s var(--pub-ease) 1s; }
.gp-post { stroke: var(--pd-iron, oklch(0.18 0.01 60)); stroke-width: 3; stroke-linecap: round; }
html:not(.dark) .gp-bur-glass { fill: oklch(0.9 0.03 280 / .10); stroke: oklch(0.9 0.04 290 / .45); stroke-width: 1.2; }
.gp-bur-liq { fill: oklch(0.70 0.12 300 / .30); }
.gp-bur-grad { stroke: oklch(0.9 0.04 290 / .5); stroke-width: 1; }
.gp-clamp { fill: none; stroke: oklch(0.42 0.02 280); stroke-width: 3; stroke-linecap: round; }
html:not(.dark) .gp-clamp { stroke: color-mix(in srgb, var(--sp-ink) 45%, transparent); }
.gp-bur-cock { fill: var(--pub-brass); }
.gp-drop { fill: oklch(0.80 0.10 300 / .8); }
html:not(.dark) .gp-bur-glass { fill: oklch(1 0 0); stroke: var(--sp-ink); }
html:not(.dark) .gp-bur-liq { fill: color-mix(in srgb, var(--sp-ink) 12%, transparent); }
html:not(.dark) .gp-bur-grad { stroke: var(--sp-ink); }
html:not(.dark) .gp-drop { fill: color-mix(in srgb, var(--sp-ink) 55%, transparent); }
html.pub-arrive .gp-fig .gp-drop { opacity: 0; translate: 0 -10px; }
html.pub-arrive.pub-go .gp-fig .gp-drop { opacity: 1; translate: 0 0; transition: opacity .3s var(--pub-ease) 1s, translate .4s var(--pub-ease) 1s; }
.gp-post { stroke: var(--sp-ink); }
.gp-dot { fill: var(--pub-ground); stroke: var(--gp-line); stroke-width: 2.6; }
html:not(.dark) .gp-halo { display: none; }

/* ---- the blog's terrace */
.gp-pane { fill: oklch(0.13 0.02 270); }
html:not(.dark) .gp-pane { fill: color-mix(in srgb, var(--sp-ink) 26%, var(--pub-ground)); }
.gp-glint { fill: none; stroke: oklch(0.9 0.03 280 / .14); stroke-width: 2; stroke-linecap: round; }
html:not(.dark) .gp-glint { stroke: oklch(1 0 0 / .9); }
.gp-curtain { fill: oklch(0.80 0.06 75 / .75); } html:not(.dark) .gp-curtain { fill: oklch(0.99 0.004 85); }
html:not(.dark) .gp-win--lit .gp-pane { stroke: var(--sp-ink); stroke-width: 1.6; }
.gp-plaque { fill: var(--pub-card-solid); stroke: var(--pub-brass); stroke-width: 1.4; }
.gp-plaque-wire { stroke: var(--pub-brass); stroke-width: 1.2; }
.gp-fig-t--plaque { fill: var(--pub-lamp); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
html:not(.dark) .gp-fig-t--plaque { fill: var(--sp-ink); }

/* ---- the alternative's two clocks */
.gp-book-top { fill: var(--gp-book); } .gp-book-side { fill: var(--gp-book-lo); } .gp-book-pages { fill: oklch(0.86 0.02 85); }
.gp-book-edge { stroke: oklch(0.70 0.02 80 / .7); stroke-width: .8; fill: none; }
.gp-book--red { --gp-book: oklch(0.42 0.12 28); --gp-book-lo: oklch(0.32 0.09 28); }
.gp-book--green { --gp-book: oklch(0.42 0.08 155); --gp-book-lo: oklch(0.32 0.06 155); }
.gp-book--purple { --gp-book: oklch(0.38 0.08 305); --gp-book-lo: oklch(0.29 0.06 305); }
html.dark .gp-c-books { opacity: .82; }
html:not(.dark) .gp-book--red { --gp-book: oklch(0.62 0.10 28); --gp-book-lo: oklch(0.50 0.09 28); }
html:not(.dark) .gp-book--green { --gp-book: oklch(0.62 0.07 155); --gp-book-lo: oklch(0.50 0.06 155); }
html:not(.dark) .gp-book--purple { --gp-book: oklch(0.60 0.06 305); --gp-book-lo: oklch(0.48 0.05 305); }
.gp-tag-string { fill: none; stroke: var(--pub-muted); stroke-width: 1.2; }
.gp-tag-card { fill: oklch(0.90 0.03 85); } .gp-tag-hole { fill: var(--pub-ground); }
.gp-fig-t--tag { fill: oklch(0.30 0.03 60); font-size: 13px; }
.gp-stand { fill: oklch(0.30 0.012 270); } html:not(.dark) .gp-stand { fill: color-mix(in srgb, var(--sp-ink) 22%, transparent); }
.gp-tab { fill: oklch(0.12 0.015 275); stroke: oklch(0.86 0.06 295 / .3); stroke-width: 1.4; }
html:not(.dark) .gp-tab { fill: oklch(1 0 0); stroke: color-mix(in srgb, var(--sp-ink) 40%, transparent); }
.gp-s-glass0 { stop-color: oklch(0.30 0.05 290 / .9); } .gp-s-glass1 { stop-color: oklch(0.19 0.03 280 / .9); }
html:not(.dark) .gp-s-glass0 { stop-color: oklch(0.99 0.004 85); } html:not(.dark) .gp-s-glass1 { stop-color: oklch(0.96 0.006 85); }
.gp-tab-spec { stroke: oklch(1 0 0 / .22); stroke-width: 2; stroke-linecap: round; }
.gp-ring-bg { fill: none; stroke: var(--pub-edge); stroke-width: 10; }
.gp-ring { fill: none; stroke: var(--pub-lamp); stroke-width: 10; stroke-linecap: round; }
html:not(.dark) .gp-ring { stroke: var(--sp-ink); }
.gp-fig-t--big { fill: var(--pub-ink); font-size: 54px; font-weight: 760; letter-spacing: -.02em; }
.gp-fig-t--sub { fill: var(--pub-body); font-size: 15px; }

/* ---------------------------------------------------------------- 2 · the hero: kicker + one line + one CTA, the figure standing on the street */
.gp-hero .pub-hero-copy .gp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 18px; }
.gp-hero .pub-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.gp-cat { color: inherit; text-decoration: none; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.gp-cat:hover { background: var(--pub-wash); }
.gp-hero .pub-hero-pic { max-width: 660px; }
.gp-hero--post .pub-h1 { max-width: 14ch; }
/* the figure's own beats (inside the kit's arrival; the kit holds the classes for 1.5 s, so all of this lands by 1.4 s) */
html.pub-arrive .gp-fig :is(.gp-r-hill, .gp-t-wall, .gp-c-books) { opacity: 0; translate: 0 18px; }
html.pub-arrive .gp-fig :is(.gp-r-band, .gp-r-grid, .gp-r-eq, .gp-r-lamp, .gp-t-wins, .gp-t-door, .gp-t-plaque, .gp-c-screen) { opacity: 0; }
html.pub-arrive .gp-fig .gp-win--lit .gp-pane { opacity: 0; }
html.pub-arrive.pub-go .gp-fig :is(.gp-r-hill, .gp-t-wall, .gp-c-books) { opacity: 1; translate: 0 0; transition: opacity .6s var(--pub-ease) .22s, translate .8s var(--pub-ease) .22s; }
html.pub-arrive.pub-go .gp-fig :is(.gp-r-grid, .gp-t-wins, .gp-t-door) { opacity: 1; transition: opacity .5s var(--pub-ease) .5s; }
html.pub-arrive.pub-go .gp-fig :is(.gp-r-band, .gp-r-eq, .gp-c-screen) { opacity: 1; transition: opacity .5s var(--pub-ease) .66s; }
html.pub-arrive.pub-go .gp-fig :is(.gp-r-lamp, .gp-t-plaque) { opacity: 1; transition: opacity .45s var(--pub-ease) .9s; }
html.pub-arrive.pub-go .gp-fig .gp-win--lit .gp-pane { opacity: 1; transition: opacity .4s var(--pub-ease) .82s; }

/* ---------------------------------------------------------------- 3 · under the hero: crumbs + the "Built for" strip */
.gp-intro { padding: 28px var(--pub-gut) 0; }
.gp-article .gp-built { font-family: var(--pub-font); margin: 18px 0 8px; }
.gp-built { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; padding: 14px 0; border-block: 1px solid var(--pub-edge); font: 500 14px/1.4 var(--pub-font); color: var(--pub-body); }
.gp-built > span + span::before { content: "·"; margin-right: 14px; color: var(--pub-muted); }
.gp-built-k { font: 650 12px/1 var(--pub-font); letter-spacing: .14em; text-transform: uppercase; color: var(--pub-muted); }
.gp-built-k + span::before { content: none !important; }
.gp-read { padding-top: clamp(32px, 4vw, 56px); }

/* ---------------------------------------------------------------- 4 · the article's blocks (serif body, sans UI) */
.gp-article :is(.gp-dek, .gp-trust, .gp-note, .gp-pill, .gp-q-eye, .gp-q-top, .gp-q-hint, .gp-opt-k, .gp-opt-pick, .gp-reset, .gp-step-h, .gp-call-h, .gp-plot-title, figcaption, .gp-passage-intro, .gp-links, .gp-arts span, .gp-foot-meta, .gp-src p, .gp-further, .gp-win-h, .gp-win-n, table, summary) { font-family: var(--pub-font); }
.gp-dek { margin: 0 0 14px; font-size: 21px; font-weight: 500; line-height: 1.5; color: var(--pub-ink); text-wrap: pretty; }
.gp-trust, .gp-note, .gp-foot-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--pub-muted); }
.gp-trust svg, .gp-note svg, .gp-foot-meta svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--pub-brass); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pub-article h2.gp-eyebrow-h { margin: 2.6em 0 .9em; font: 650 12.5px/1.2 var(--pub-font); letter-spacing: .14em; text-transform: uppercase; color: var(--pub-lamp); }
html:not(.dark) .pub-article h2.gp-eyebrow-h { color: var(--pub-muted); }
.pub-article h2.gp-eyebrow-h span { letter-spacing: .06em; color: var(--pub-muted); }
.pub-article h2.gp-first-h { margin-top: .3em; }
.gp-answer { position: relative; padding: 22px 26px; border-radius: 20px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-answer::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--pub-lamp); }
.gp-answer p { margin: 0; font-size: 21px; line-height: 1.5; color: var(--pub-ink); }
.gp-note { margin-top: 12px; }
.gp-pill { display: inline-block; margin: 18px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.gp-rule { margin: 3em 0 2em; border: 0; border-top: 1px solid var(--pub-edge); }

/* steps */
.gp-steps { list-style: none; margin: 0 0 1.6em; padding: 0; counter-reset: gp; display: grid; gap: 4px; }
.gp-steps li { position: relative; margin: 0; padding: 4px 0 14px 58px; counter-increment: gp; }
.gp-steps li::before { content: counter(gp); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font: 700 15px/1 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 1px 1px 0 var(--pub-spec); }
.gp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 1px; background: var(--pub-edge); }
.gp-steps p { margin: 0; }
.gp-step-h { font-size: 17px; font-weight: 650; color: var(--pub-ink); margin-bottom: 4px !important; }

/* callouts: insight = the lamp, warning = brass */
.gp-call { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; margin: 1.6em 0; padding: 20px 22px; border-radius: 20px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-call-i { width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--pub-lamp); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-call[data-variant="warning"] { background: linear-gradient(180deg, oklch(0.82 0.12 70 / .10), oklch(0.82 0.12 70 / .04)); box-shadow: inset 0 0 0 1px oklch(0.82 0.12 70 / .30); }
html:not(.dark) .gp-call[data-variant="warning"] { background: oklch(0.97 0.025 80); box-shadow: inset 0 0 0 1px oklch(0.55 0.12 60 / .35); }
.gp-call[data-variant="warning"] .gp-call-i { stroke: var(--gp-warn); }
.gp-call p { margin: 0; }
.pub-article .gp-call-h { margin: 0 0 6px; font: 650 18px/1.3 var(--pub-font); color: var(--pub-ink); letter-spacing: 0; }

/* plots */
.gp-plotfig { margin: 2em 0; padding: 22px 22px 18px; border-radius: 22px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-plot-title { margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--pub-ink); }
.gp-plot { display: block; width: 100%; height: auto; }
.gp-ax { fill: none; stroke: var(--pub-edge-strong); stroke-width: 1.2; }
.gp-tick { stroke: var(--pub-edge); stroke-width: 1; }
.gp-plot-t { font: 500 14px/1 var(--pub-font); fill: var(--pub-muted); }
.gp-plot-l { font: 600 14px/1 var(--pub-font); fill: var(--pub-body); }
.gp-plot-line { fill: none; stroke: var(--gp-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.dark .gp-plot-line { filter: drop-shadow(0 0 6px oklch(0.86 0.11 78 / .45)); }
.gp-plot-dot { fill: var(--pub-card-solid); stroke: var(--gp-line); stroke-width: 2.6; }
.gp-plot-a { font: 650 15px/1 var(--pub-font); fill: var(--pub-ink); }
.gp-plot-shade { fill: oklch(0.86 0.11 78 / .09); } html:not(.dark) .gp-plot-shade { fill: color-mix(in srgb, var(--sp-ink) 6%, transparent); }
.gp-plot-a--shade { fill: var(--pub-muted); font-weight: 600; font-size: 14px; }
.gp-plotfig figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--pub-body); }

/* worked example */
.gp-example { margin: 0 0 1.4em; padding: 22px 24px; border-radius: 20px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-example > p { margin: 0 0 14px; color: var(--pub-ink); }
.gp-example details > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 650; color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 1px 1px 0 var(--pub-spec); }
.gp-example details > summary::-webkit-details-marker { display: none; }
.gp-example details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; }
.gp-example details[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.gp-sum-open, .gp-example details[open] .gp-sum-closed { display: none; }
.gp-example details[open] .gp-sum-open { display: inline; }
.gp-example details > p { margin: 16px 0 0; }

/* questions (radios; :has() reveals; JS-free) */
.gp-q { margin: 1.4em 0; padding: 22px 24px; border-radius: 22px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-q fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gp-q-eye { margin: 0 0 10px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--pub-lamp); }
html:not(.dark) .gp-q-eye { color: var(--pub-muted); }
.gp-q-eye:empty { display: none; }
.gp-q-top { display: flex; justify-content: space-between; gap: 12px; margin: -4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pub-edge); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-muted); }
.gp-q-stim { margin: 0 0 16px; color: var(--pub-body); }
.gp-q-stem { padding: 0; margin: 0 0 14px; font-weight: 650; color: var(--pub-ink); }
.gp-opts { display: grid; gap: 10px; }
.gp-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 16px; cursor: pointer;
  font: 500 16.5px/1.4 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); transition: box-shadow .2s, background-color .2s, opacity .2s; }
.gp-opt:hover { box-shadow: inset 0 0 0 1px var(--pub-edge-strong); background: var(--pub-wash); }
.gp-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-opt:has(input:focus-visible) { outline: 2px solid var(--pub-lamp); outline-offset: 2px; }
.gp-opt-k { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; font-weight: 650; color: var(--pub-muted); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.gp-opt-t { flex: 1; min-width: 0; }
.gp-ok { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gp-ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; display: none; }
.gp-opt-pick { display: none; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--pub-muted); }
.gp-q:has(input:checked) .gp-opt { cursor: default; }
.gp-q:has(input:checked) .gp-opt:not([data-key]):not(:has(input:checked)) { opacity: .5; }
.gp-q:has(input:checked) .gp-opt[data-key] { background: var(--gp-ok-wash); box-shadow: inset 0 0 0 1.5px var(--gp-ok); }
.gp-q:has(input:checked) .gp-opt[data-key] .gp-ok { display: block; }
.gp-q:has(input:checked) .gp-opt[data-key] .gp-opt-k { color: var(--pub-ground); background: var(--gp-ok); box-shadow: none; }
.gp-opt:not([data-key]):has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--gp-pick); background: var(--pub-wash); }
.gp-opt:not([data-key]):has(input:checked) .gp-opt-pick { display: inline; }
.gp-q-hint { margin: 16px 0 0; font-size: 13.5px; color: var(--pub-muted); }
.gp-q:has(input:checked) .gp-q-hint { display: none; }
.gp-q-why { display: none; margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: var(--pub-wash); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.gp-q:has(input:checked) .gp-q-why { display: block; animation: gp-unfold .45s var(--pub-ease) both; }
@keyframes gp-unfold { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
html.pub-rest .gp-q-why { animation: none !important; }
.gp-q-why p { margin: 0 0 10px; }
.gp-q-verdict { font: 650 16px/1.4 var(--pub-font); color: var(--pub-ink); }
.gp-v-right, .gp-q:has([data-key] input:checked) .gp-v-wrong { display: none; }
.gp-q:has([data-key] input:checked) .gp-v-right { display: inline; }
.gp-reset { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pub-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.gp-reset:hover { color: var(--pub-ink); }

/* passage + tables */
.gp-passage { margin: 0 0 1em; padding: 22px 24px; border-radius: 22px; background: var(--pub-card-solid); box-shadow: var(--gp-panel); }
.gp-passage-intro { margin: 0 0 12px !important; font-size: 15px; font-style: italic; color: var(--pub-muted); }
.gp-passage > p:last-child { margin-bottom: 0; }
.gp-tablewrap { max-width: 100%; overflow-x: auto; margin: 1.2em 0; }
.gp-tablewrap table { margin: 0; min-width: 440px; }
.gp-core td[data-core] { color: var(--pub-ink); font-weight: 650; background: linear-gradient(90deg, oklch(0.86 0.11 78 / .14), transparent 90%); box-shadow: inset 3px 0 0 var(--pub-lamp); }
html:not(.dark) .gp-core td[data-core] { background: color-mix(in srgb, var(--sp-ink) 5%, transparent); box-shadow: inset 3px 0 0 var(--sp-ink); }

/* takeaways */
.gp-take { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 10px; }
.gp-take li { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; }
.gp-take .gp-ok { display: block; margin-top: 7px; }
.gp-take--plain i { flex: none; width: 7px; height: 7px; margin: 12px 6px 0 5px; border-radius: 50%; background: var(--pub-muted); }

/* link rows (the internal link graph: always painted, never hidden by motion) */
.gp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-links--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.gp-links li { margin: 0 !important; }
.pub-article .gp-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 16px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--pub-ink); background: var(--gp-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec); transition: box-shadow .2s, translate .2s; }
.pub-article .gp-links a:hover { box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 1px 1px 0 var(--pub-spec); translate: 0 -1px; }
.gp-links a > span { flex: 1; min-width: 0; }
.gp-links small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--pub-muted); }
.gp-li-i, .gp-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pub-brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-chev { stroke: var(--pub-muted); }
.gp-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-arts li { margin: 0 !important; }
.gp-arts span { font-size: 13px; color: var(--pub-muted); }
.gp-foot-meta { margin-top: 2.4em; }
.gp-src { padding: 18px 20px; border-radius: 18px; background: var(--gp-card); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.gp-src p { margin: 0 0 8px; font-size: 14px; color: var(--pub-muted); }
.gp-src ul { margin: 0; padding-left: 18px; font-size: 16px; }
.gp-further { margin-top: 18px; font-size: 15px; color: var(--pub-body); }

/* the rail's climb card (the live hero's "Your projected climb") */
.gp-climbcard .gp-climb-eye { margin: 0 0 2px; font: 650 12px/1.2 var(--pub-font); letter-spacing: .14em; text-transform: uppercase; color: var(--pub-muted); }
.gp-climb { display: block; width: 100%; height: auto; margin: 6px 0 2px; }
.gp-climb-target { stroke: var(--pub-edge-strong); stroke-width: 1.2; stroke-dasharray: 4 5; }
.gp-climb-fill { fill: oklch(0.86 0.11 78 / .10); } html:not(.dark) .gp-climb-fill { fill: color-mix(in srgb, var(--sp-ink) 6%, transparent); }
.gp-climb-arc { fill: none; stroke: var(--gp-line); stroke-width: 3; stroke-linecap: round; }
.gp-climb-a { fill: var(--pub-muted); } .gp-climb-b { fill: oklch(0.86 0.11 78 / .2); } .gp-climb-c { fill: var(--gp-line); }
.gp-climb-ends { display: flex; justify-content: space-between; font: 500 12px/1 var(--pub-font); color: var(--pub-muted); }
.pub-toc-cta .gp-climb-note { margin: 10px 0 12px; font: 500 12.5px/1.45 var(--pub-font); color: var(--pub-muted); }

/* ---------------------------------------------------------------- 5 · the alternative page */
.gp-alt-intro { max-width: 900px; }
.gp-disclose { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.gp-disclose svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--pub-brass); stroke-width: 2; stroke-linecap: round; }
.gp-disclose p { margin: 0; font: 500 14px/1.5 var(--pub-font); color: var(--pub-body); }
.gp-disclose a { color: var(--pub-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.gp-alt-intro .gp-disclose { margin-top: 22px; }
.gp-hero--alt + .gp-intro { padding-top: 48px; }
.gp-alt-lede { margin: 72px 0 0; font: 500 18px/1.65 var(--pub-font); color: var(--pub-body); text-wrap: pretty; }
.gp-duel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; margin-top: 36px; align-items: start; }
.gp-essay { margin: 0; padding: 22px; border-radius: 24px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-essay-top { display: flex; justify-content: space-between; gap: 10px; font: 600 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.gp-essay-fast { color: var(--pub-lamp); } html:not(.dark) .gp-essay-fast { color: var(--sp-ink); }
.gp-essay-score { display: flex; justify-content: space-between; align-items: flex-end; margin: 18px 0; padding: 18px; border-radius: 18px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.gp-essay-score p { margin: 0; font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.gp-essay-score .gp-essay-n { margin-top: 6px; font: 760 52px/1 var(--pub-font); letter-spacing: -.03em; color: var(--pub-ink); }
.gp-band { padding: 6px 12px; border-radius: 999px; font: 650 13px/1 var(--pub-font); color: var(--gp-ok); background: var(--gp-ok-wash); box-shadow: inset 0 0 0 1px var(--gp-ok); }
.gp-bars { display: grid; gap: 12px; }
.gp-bar > div { display: flex; justify-content: space-between; font: 600 13px/1.2 var(--pub-font); color: var(--pub-body); }
.gp-bar > i { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pub-lamp) var(--v), var(--pub-edge) var(--v)); }
html:not(.dark) .gp-bar > i { background: linear-gradient(90deg, var(--sp-ink) var(--v), var(--pub-edge) var(--v)); }
.gp-essay figcaption { margin-top: 16px; text-align: center; font: 500 12px/1.4 var(--pub-font); color: var(--pub-muted); }
.gp-versus { border-radius: 24px; background: var(--gp-card); box-shadow: var(--gp-panel); overflow: hidden; }
.gp-versus-h, .gp-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gp-versus-h span { padding: 16px 20px; font: 650 13px/1.2 var(--pub-font); letter-spacing: .08em; text-transform: uppercase; color: var(--pub-muted); border-bottom: 1px solid var(--pub-edge-strong); }
.gp-versus-h span + span { color: var(--pub-ink); }
.gp-vs + .gp-vs { border-top: 1px solid var(--pub-edge); }
.gp-vs p { margin: 0; padding: 18px 20px; font: 500 15px/1.5 var(--pub-font); }
.gp-vs-them { color: var(--pub-muted); }
.gp-vs-us { display: flex; gap: 10px; color: var(--pub-ink); background: var(--pub-wash); }
.gp-vs-us .gp-ok { display: block; flex: none; margin-top: 3px; }
.gp-vs-l { display: none; }
.gp-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 1.6em; }
.gp-win-card { padding: 20px; border-radius: 20px; background: var(--gp-card); box-shadow: var(--gp-panel); }
.gp-win-card p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.gp-win-n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--pub-ink); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.pub-article .gp-win-h { margin-bottom: 6px; font-size: 16px; font-weight: 650; color: var(--pub-ink); }
.gp-fine { margin: 28px 0 0; font: 500 13px/1.55 var(--pub-font); color: var(--pub-muted); }

/* ---------------------------------------------------------------- 6 · the review bar's state switch (review only) */
.gp-rv { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--pub-font); }
.gp-rv select { min-height: 32px; padding: 0 8px; border-radius: 8px; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; }

/* ---------------------------------------------------------------- 7 · phone */
@media (max-width: 899px) {
  .gp-duel { grid-template-columns: minmax(0, 1fr); }
  .gp-wins { grid-template-columns: minmax(0, 1fr); }
  .gp-hero .pub-hero-pic { max-width: 440px; }
}
@media (max-width: 599px) {
  .gp-dek, .gp-answer p { font-size: 19px; }
  .gp-q, .gp-example, .gp-passage, .gp-plotfig { padding: 18px 16px; border-radius: 18px; }
  .gp-opt { padding: 10px 12px; gap: 10px; font-size: 15.5px; }
  .gp-built { font-size: 13px; gap: 6px 10px; }
  .gp-built > span + span::before { margin-right: 10px; }
  .gp-vs, .gp-versus-h { grid-template-columns: minmax(0, 1fr); }
  .gp-versus-h span + span { display: none; }
  .gp-vs-l { display: block; margin-bottom: 4px; font: 650 12px/1.2 var(--pub-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pub-muted); }
  .gp-vs-us { flex-wrap: wrap; } .gp-vs-us .gp-vs-l { flex: 1 1 100%; }
  .gp-hero .pub-actions .pub-btn { flex: 1 1 100%; }
  .gp-q-top { flex-direction: column; gap: 4px; }
  /* svg labels: at phone scale (~0.55 for the hero, ~0.45 for plots) keep every label at 12 px or more */
  .gp-alt-lede { margin-top: 120px; }
  .gp-fig .gp-fig-t { font-size: 23px; }
  .gp-fig .gp-fig-t--big { font-size: 60px; }
  .gp-fig .gp-fig-t--plaque { font-size: 24px; }
  .gp-intro { padding-top: 72px; }
  .gp-plot :is(.gp-plot-t, .gp-plot-l, .gp-plot-a) { font-size: 28px; }
  .gp-plot .gp-t-thin { display: none; }
  .gp-plot .gp-plot-lx { translate: 0 14px; }
  .gp-plot .gp-plot-ly { translate: -14px 0; }
}