/* Hallmark · shape: Field Record (Furrow layout: survey-map hero, ruled lists, one open notebook card, the book as an index) · genre: modern-minimal · theme: Furrow (by request, palette: the Lumen Ink & Brass design system) · redesign: full · job: sign up
 * hero: Stage · nav: slab · footer: mast · imagery: a real map of Jakarta drawn on a canvas from BPS kecamatan boundaries (jakarta.js), contour bands generated for the price and closing sections · signature: the two sample locations pinned on Jakarta, each in its own kecamatan with its 2.500 m analysis circle, beside the notebook card of their saved results
 * axes: dark-default/grotesk-sans/gold · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the map could be any records app; tied its pins to the five stages of this product and its card to the stored Kelapa Gading result */
/* Hallmark · added Jatinegara (Jakarta Timur) as a third sample location · real runs on 2026-11-05: Internal through Overpass (road data did not load, so accessibility is flagged as partial, as the app does) and Eksternal through the local engine without a proxy, 84 of 94 months with news
/* Hallmark · hero map moved to a full-bleed background with Jakarta at the right · by request; the card sits below Jatinegara (the canvas measures it), a framed square map replaces it under 60rem */
/* Hallmark · replaced hero contour map and five-stage pins · by request: the generated contours had no place in them; the hero now draws Jakarta from real kecamatan boundaries with the two sample locations at their coordinates, the pipeline stays in #cara */
/* Hallmark · dropped #pool, #ask, #ledger-cap, #scan · the 25-disc counting device and the typed-question loop break gates 82 and 18; the ledger caption is now the strips' lead and the single scan marker became one per strip */
/* Hallmark · reworded hero line and four coverage figures · 58 and 19 name the long opener; the fourth figure moved into the FAQ answer on data */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial · finish-review: subagent · 8 findings · 7 resolved 1 partial (phone table still long) · gap: no screenshots of the running app */
/* Hallmark · waive 84 · the hero, strategy and council cards are built from stored analyses, not an invented mock · the app needs Postgres and a seeded user to run, and every figure on the cards is a real stored result from kelapa-gading.json and council-feed */
/* Hallmark · reworded "Bayar per analisis, bukan langganan." to "Satu lokasi lengkap, 70 kredit." · the swap test, the old head fits any pricing page */
/* Hallmark · dismissed render · the fallback-face warning · document.fonts reports Red Hat Display and Red Hat Mono loaded and the shots set in them; the latin-ext subset stays unloaded because no glyph needs it */
/* Hallmark · waive 3 · the cards hold a bar chart, a news strip and an empty plot, no icon tiles · the user asked for three cards of the same width and height */
/* Hallmark · dismissed 59 · 13 sections · the redesign keeps every section's own content (facts, problem, steps, news, index, strategy, council, limits, price, faq, close), none is padding */

@font-face { font-family: "Red Hat Display"; src: url("fonts/red-hat-display-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Display"; src: url("fonts/red-hat-display-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/red-hat-mono-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }

html { scroll-behavior: smooth; scroll-padding-top: var(--space-3xl); }
body { font-weight: 400; font-synthesis: none; }
body { text-rendering: optimizeLegibility; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
a { text-decoration-color: var(--color-muted); }
a:hover { text-decoration-color: var(--color-ink); }
.num, .fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 500; }
.muted { color: var(--color-muted); }

.skip { min-height: 44px; display: inline-flex; align-items: center; position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); font-weight: 500; text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

/* ---------- keys (controls) ---------- */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.key:hover { background: var(--color-paper-3); border-color: var(--color-ink); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.key:disabled, .key[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key[aria-busy="true"] { cursor: progress; }
.key--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-sheet) 32%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent); }
.key--primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-sheet)); border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- nav: slab ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-slab); color: var(--color-slab-ink); border-bottom: var(--rule-hair) solid var(--color-ring); }
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; color: inherit; }
.brand img { width: 30px; height: 30px; }
.nav__links { display: flex; align-items: center; gap: var(--space-2xs); margin-left: var(--space-md); }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); color: var(--color-slab-muted); text-decoration: none; font-size: var(--text-md); font-weight: 500; border-radius: var(--radius-pill); transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-slab-ink); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); }
.nav .key { background: transparent; color: var(--color-slab-ink); border-color: var(--color-slab-muted); box-shadow: none; min-height: 44px; padding: 0 var(--space-md); }
.nav .key:hover { background: var(--color-paper-3); border-color: var(--color-slab-ink); }
.nav .key:focus-visible, .nav__links a:focus-visible { outline-color: var(--color-accent); }
.theme { width: 44px; padding: 0; }
.theme .i-sun { display: none; }
:root[data-theme="light"] .theme .i-sun { display: block; }
:root[data-theme="light"] .theme .i-moon { display: none; }
@media (max-width: 60rem) {
  .nav { position: static; }
  .nav__in { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-xs); }
  .nav__links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nav__links a { white-space: nowrap; min-height: 44px; }
  .brand { min-height: 44px; }
}

/* ---------- hero: Stage ---------- */
.hero { position: relative; isolation: isolate; min-height: calc(100dvh - 64px); display: flex; align-items: center; padding-block: var(--space-2xl); overflow: clip; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.hero h1 { max-width: none; font-size: var(--text-display-s); line-height: 1; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-muted); max-width: 32ch; }
.actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fine { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }

.stage { position: relative; min-width: 0; }
.stage__map { position: relative; display: grid; gap: var(--space-lg); }
.map--frame { position: relative; z-index: auto; inset: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 3px; box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-lift); background: var(--color-paper-2); }
html:not(.js) .map--frame, html:not(.js) .map--bg { display: none; }
#cara { position: relative; isolation: isolate; overflow: clip; }
.map--cara { z-index: -1; pointer-events: none; }
html:not(.js) .map--cara { display: none; }
html:not(.js) .stage__map { background: var(--color-paper-2) url("assets/map-still-m.jpg") center top / cover no-repeat; min-height: 560px; align-content: end; }
.stage__cap { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); max-width: 60ch; }
@media (min-width: 60rem) { .hero__grid { position: relative; } .stage { position: static; align-self: end; } .stage__cap { position: absolute; left: var(--gutter); bottom: calc(-1 * var(--space-2xl) + var(--space-xs)); margin: 0; max-width: 52ch; } }
.map--bg { display: none; }
@media (min-width: 60rem) {
  .stage__map { display: block; min-height: 240px; }
  .map--frame { display: none; }
  .map--bg { display: block; }
  html:not(.js) .hero { background: var(--color-paper-2) url("assets/map-still.jpg") center / cover no-repeat; }
  html:not(.js) .stage__map { background: none; }
}
.glyph { display: block; width: 18px; height: 18px; flex: none; background: var(--color-ink); border: 2px solid var(--color-paper); box-sizing: border-box; }
.glyph--disc { border-radius: 50%; }
.glyph--diamond { transform: rotate(45deg) scale(0.82); }
.glyph--triangle { border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.glyph--square { border-radius: 2px; }
.glyph--ring { background: transparent; border: 3px solid var(--color-ink); border-radius: 50%; }

.entry { margin: 0; border-radius: var(--radius-entry); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-lift); overflow: hidden; animation: open 640ms var(--ease-out) 700ms both; }
@keyframes open { from { opacity: 0; transform: translateY(8px); } }
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); align-items: stretch; }
.entries .entry:nth-child(2) { animation-delay: 820ms; }
.entries .entry:nth-child(3) { animation-delay: 940ms; }
@media (min-width: 60rem) { .stage .entries { position: absolute; right: 0; bottom: 0; width: min(504px, 100%); } }
.loc { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.loc__band { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md) var(--space-md); background: var(--color-slab); color: var(--color-slab-ink); border-top: var(--rule-hair) solid var(--color-ring); }
.mk { display: inline-block; inline-size: 10px; block-size: 10px; margin-right: var(--space-xs); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-slab), 0 0 0 3px var(--color-slab-ink); vertical-align: baseline; }
.mk--disc { border-radius: 50%; }
.mk--square { border-radius: 1px; }
.mk--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; background: var(--color-accent); outline: 0; }
.loc__cat { font-size: var(--text-xs); color: var(--color-slab-muted); }
.loc__name { font: 600 var(--text-sm)/1.2 var(--font-body); color: var(--color-slab-ink); }
.loc .notebook { grid-template-columns: minmax(0, 1fr); }
.loc .cell:nth-child(n) { border-left: 0; }
.loc .cell b { font-size: var(--text-md); }
.entry__fig { font: var(--display-weight) 2.75rem/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.notebook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper-2); }
.cell { position: relative; padding: var(--space-lg) var(--space-md) var(--space-sm); min-height: 68px; border-top: var(--rule-hair) solid var(--color-ring); min-width: 0; }
.cell:nth-child(even) { border-left: var(--rule-hair) solid var(--color-ring); }
.cell--wide { grid-column: 1 / -1; border-left: 0 !important; }
.cell small { position: absolute; left: var(--space-md); top: var(--space-xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.cell b { display: block; font-size: var(--text-lg); line-height: 1.25; font-weight: 500; font-variant-numeric: tabular-nums; }
.entry__foot { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-ring); background: var(--color-paper-2); }
.chip { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: 4px; background: var(--color-green-soft); color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; }

/* ---------- sections ---------- */
.sec { padding-block: var(--section-gap-s); }
.sec--m { padding-block: var(--section-gap); }
.sec--l { padding-block: var(--section-gap-l); }
.sec--tint { background: var(--color-paper-3); padding-block: var(--section-gap-s); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-muted); max-width: 56ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .council .split { align-items: center; } .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; } .split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .sticky { position: sticky; top: calc(64px + var(--space-xl)); } }
.split .head { margin-bottom: 0; }
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled > * { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* figures */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.figures > * { padding: var(--space-lg); border-radius: var(--radius-card); min-width: 0; background: var(--color-paper-3); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ring); }
.figures > :nth-child(1) { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.figures > :nth-child(2) { background: var(--color-slab); color: var(--color-slab-ink); }
.figures b { display: block; font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: var(--space-xs); color: var(--color-muted); max-width: 30ch; }
.figures > :nth-child(1) span { color: var(--color-accent-ink); }
.figures > :nth-child(2) span { color: var(--color-slab-muted); }
/* the coverage section fills one screen, like the hero */
.sec--screen { min-height: calc(100dvh - 64px); display: flex; align-items: center; padding-block: var(--space-xl); }
.cover { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.cover__intro .head { margin-bottom: var(--space-lg); gap: var(--space-sm); }
.coverage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.coverage h3 { margin-bottom: var(--space-xs); }
.coverage .rows { margin-top: var(--space-md); }
.rows.rows--src li { justify-content: flex-start; align-items: flex-start; gap: var(--space-md); }
.src-logo { flex: none; inline-size: 64px; block-size: 40px; object-fit: contain; padding: var(--space-2xs) var(--space-xs); background: var(--color-tile); border: var(--rule-hair) solid var(--color-rule); border-radius: 6px; box-sizing: border-box; }
.coverage .rows li > b { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
@media (min-width: 60rem) { .coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); } }
@media (min-width: 75rem) {
  .cover { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl); align-items: start; }
  .coverage { display: contents; }
  .cover__intro h2 { font-size: var(--text-2xl); }
  .cover__intro .figures { grid-template-columns: minmax(0, 1fr); }
  .cover__intro .figures > * { display: grid; grid-template-columns: minmax(0, 6.75rem) minmax(0, 1fr); align-items: center; column-gap: var(--space-sm); padding: var(--space-md); }
  .cover__intro .head .lead { font-size: var(--text-md); }
  .cover__intro .figures b { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; }
  .cover__intro .figures span { margin-top: 0; font-size: var(--text-sm); }
  .cover__intro .figures { gap: var(--space-sm); }
}
@media (max-width: 40rem) { .figures { grid-template-columns: minmax(0, 1fr); } }

/* problem: three across, hairlines */
/* the gap: what a map shows, what the news shows, and the empty strategy between them */
.sec--ink { background: var(--color-slab); color: var(--color-slab-ink); }
.gap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 60rem) { .gap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gap__card { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); min-width: 0; }
.gap__card h3 { max-width: 24ch; font-size: var(--text-lg); }
.gap__card p { margin-top: var(--space-sm); color: var(--color-muted); }
.gap__viz { margin: 0; height: 252px; box-sizing: border-box; padding: var(--space-md); display: grid; align-content: space-between; gap: var(--space-md); border-radius: 6px; background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); }
.gap__viz figcaption { font-size: var(--text-xs); color: var(--color-muted); }
.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.tally li { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 2ch; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.tally i { display: block; block-size: 12px; inline-size: calc(var(--v) * 1%); background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-ink); }
.tally b { font: 500 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }
.strip--mini { height: 120px; border-left: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); box-sizing: content-box; padding-inline: 1px; }
.mini { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--space-xs); }
.mini__plot { position: relative; min-width: 0; }
.mini__y { position: relative; block-size: 120px; }
.mini__y span { position: absolute; right: 0; bottom: calc(var(--p) * 1% - 0.55em); font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mini__grid { position: absolute; inset: 0 0 auto 0; block-size: 120px; pointer-events: none; }
.mini__grid i { position: absolute; left: 0; right: 0; bottom: calc(var(--p) * 1%); border-top: var(--rule-hair) dashed var(--color-rule); }
.mini__x { position: relative; block-size: var(--space-md); margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.mini__x span { position: absolute; top: 0; left: calc(var(--at) / 94 * 100%); }
.plot--empty { width: 100%; height: 150px; }
.plot--empty path { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plot--empty .ql { fill: var(--color-ink); font: 600 12px var(--font-body); dominant-baseline: middle; }
.plot--empty .qc { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.6; }
.plot--empty .qm { fill: var(--color-ink); font: 700 40px var(--font-display); dominant-baseline: middle; }
.plot--empty rect { fill: none; stroke: var(--color-ring); stroke-width: 1; stroke-dasharray: 4 4; }

/* how it works: a route of pins drawn as a flow, each stage a notebook card with its three actors as a ruled list */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.link { position: relative; justify-self: center; inline-size: 0; block-size: var(--space-xl); border-left: 2px dashed var(--color-ring); }
.link::after { content: ""; position: absolute; left: -7px; bottom: -2px; inline-size: 12px; block-size: 10px; background: var(--color-ring); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.st { align-self: center; min-width: 0; padding: var(--space-md); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-card); background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper-2); }
.st__head { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.st__ico { flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 9px; background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 60%, var(--color-ink)), inset 0 1px 0 color-mix(in oklab, var(--color-sheet) 40%, transparent), inset 0 -2px 0 color-mix(in oklab, var(--color-ink) 14%, transparent); }
.st__ico .icon { width: 20px; height: 20px; stroke-width: 2; }
.st__head h3 { font-size: var(--text-lg); }
.st__n { margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; }
.st__gist { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.st__rows { margin-top: var(--space-md); }
.rows.st__rows li { align-items: flex-start; gap: var(--space-sm); padding: var(--space-xs) 0 var(--space-xs) var(--space-sm); }
.st__rows li small { margin-top: var(--space-3xs); line-height: 1.4; font-size: var(--text-xs); }
.st__rows .who { display: block; font-weight: 500; }
.st__rows .who .icon { display: inline-block; vertical-align: -4px; margin-right: var(--space-xs); width: 18px; height: 18px; }
.st__rows b { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; padding-top: var(--space-3xs); }
.st__rows li.is-off .who { font-weight: 400; }
.par { align-self: center; display: grid; gap: var(--space-md); padding: var(--space-md); border: 2px dashed var(--color-ring); border-radius: 16px; min-width: 0; }
.par__cap { font-size: var(--text-sm); font-weight: 500; }
.side { margin-top: var(--space-2xl); }
.side__cap { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-md); }
.side__grid .st { align-self: stretch; }
.side__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 60rem) {
  .flow { grid-template-columns: minmax(0, 1fr) var(--space-xl) minmax(0, 1fr) var(--space-xl) minmax(0, 1fr) var(--space-xl) minmax(0, 1fr); }
  .link { inline-size: auto; block-size: 0; border-left: 0; border-top: 2px dashed var(--color-ring); }
  .link::after { left: auto; right: -2px; bottom: auto; top: -7px; inline-size: 10px; block-size: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .side__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-xl); }
}

/* news strips */
.chart { min-width: 0; }
.strips { position: relative; display: grid; gap: var(--space-lg); }
.strip__name { display: block; margin-bottom: var(--space-xs); font-weight: 500; }
.strip { position: relative; display: grid; grid-template-columns: repeat(94, minmax(0, 1fr)); gap: var(--space-3xs); height: 112px; align-items: end; }
.strip i { display: block; height: calc(var(--s) * 100%); border-radius: 1px; background: color-mix(in oklab, var(--c) calc(var(--k) * 100%), var(--color-grid-strong)); }
.strip i[data-empty] { height: var(--space-2xs); background: var(--color-grid-strong); }
.strips__hit { position: relative; touch-action: pan-y; border-radius: 4px; }
.strips__hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.scan { position: absolute; top: calc(-1 * var(--space-2xs)); bottom: calc(-1 * var(--space-2xs)); left: 0; width: calc(100% / 94); background: var(--color-accent-soft); box-shadow: inset 1px 0 0 var(--color-accent), inset -1px 0 0 var(--color-accent); pointer-events: none; transform: translateX(calc(var(--at, 0) * 100%)); }
.years { position: relative; height: var(--space-lg); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.years span { position: absolute; top: 0; left: calc(var(--at) / 94 * 100%); }
.readout { margin-top: var(--space-lg); display: grid; grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1.4fr)); border-top: 2px solid var(--color-ink); }
.readout > div { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.readout small { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.readout b { display: block; white-space: pre-line; font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: var(--space-xs); border-radius: 2px; vertical-align: -1px; }
.legend .pos { background: var(--color-green); } .legend .neg { background: var(--color-coral); }
@media (max-width: 40rem) { .readout { grid-template-columns: minmax(0, 1fr); } .readout > div { padding-right: 0; } }

/* the book as an index */
.panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: stretch; }
.dossier { background: var(--color-sheet); border-radius: 3px; box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-lift); padding: var(--space-lg); display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.dossier__head { display: grid; gap: var(--space-2xs); }
.dossier__head h3 { font: 600 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.025em; overflow-wrap: break-word; min-width: 0; }
.dossier__head p { color: var(--color-muted); font-size: var(--text-sm); }
.figs { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 2px solid var(--color-ink); }
.figs > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; min-width: 0; }
.figs > div + div { border-top: var(--rule-hair) solid var(--color-rule); }
.figs small { grid-column: 2; grid-row: 1; color: var(--color-muted); font-size: var(--text-sm); }
.figs b { grid-column: 1; grid-row: 1 / span 2; font: 500 var(--text-2xl)/1 var(--font-outlier); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.figs span { grid-column: 2; grid-row: 2; font-size: var(--text-sm); }
.blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.block--wide { grid-column: 1 / -1; }
.block h4 { font: 600 var(--text-md)/1.2 var(--font-body); margin-bottom: var(--space-xs); }
.block .rows { margin-top: 0; }
.block p { color: var(--color-muted); font-size: var(--text-sm); }
.block p + p { margin-top: var(--space-sm); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bars li:last-child { border-bottom: 0; }
.bars b { font: 500 var(--text-sm)/1.4 var(--font-outlier); font-variant-numeric: tabular-nums; }
.bars small { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.bar { grid-column: 1 / -1; display: block; block-size: 8px; background: var(--color-paper-3); box-shadow: inset 0 0 0 1px var(--color-rule); }
.bar i { display: block; block-size: 100%; inline-size: calc(var(--v) * 1%); background: var(--color-accent); }
.dossier__note { color: var(--color-muted); font-size: var(--text-sm); max-width: 70ch; }

/* strategy: the plot as a notebook cell */
.plotcell { padding: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ring); display: grid; place-items: center; }
.plot { width: 100%; max-width: 440px; height: auto; display: block; }
.plot text { font-family: var(--font-body); font-size: 12px; fill: var(--color-muted); }
.plot .q { fill: var(--color-grid); }
.plot .q--hit { fill: var(--color-accent-soft); }
.plot .ax { stroke: var(--color-ring); stroke-width: 1; fill: none; }
.plot .dot { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 1.5; }
.rows { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows li small { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.rows li b { font-weight: 500; text-align: right; text-wrap: balance; }
.rows--total li:last-child { border-bottom: 2px solid var(--color-ink); }
.note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.stress { margin-top: var(--space-xl); }
.entry__head { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); background: var(--color-slab); color: var(--color-slab-ink); }
.entry__kind { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-slab-muted); }
.plotkey { list-style: none; margin: 0; padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-ring); display: grid; gap: var(--space-2xs); }
.plotkey li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 1.6rem 5.6rem 5.6rem; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.plotkey b { font-weight: 500; }
@media (max-width: 40rem) { .plotkey { padding-inline: var(--space-sm); } .plotkey li { grid-template-columns: 16px minmax(0, 1fr) 1.4rem 4.2rem 4.2rem; gap: var(--space-2xs); } }
.plotkey .num { font-size: var(--text-xs); }
.mkv { display: inline-block; inline-size: 16px; block-size: 16px; flex: none; fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; vertical-align: -3px; }
.cmp .mkv { margin-right: var(--space-xs); }
.dotlab { font: 600 12px var(--font-body); fill: var(--color-ink); }
.cmp { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; }
.cmp thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border-bottom: 2px solid var(--color-ink); }
.cmp tbody th { font-weight: 500; white-space: nowrap; }
.cmp td small { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.cmp .num { text-align: right; white-space: nowrap; font-size: var(--text-sm); padding-right: var(--space-sm); }
.cmp thead th.num { font-family: var(--font-body); white-space: normal; max-width: 8rem; }
.cmp td:nth-child(2) { min-width: 13rem; }
.cmp .num small { font-family: var(--font-body); }
.cmp .is-weak { color: var(--color-coral); font-weight: 500; }
.cmp .is-weak small { color: var(--color-coral); }
@media (max-width: 40rem) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .cmp tr > * { display: block; border: 0; padding: var(--space-3xs) 0; }
  .cmp tbody th, .cmp td:nth-child(2) { grid-column: 1 / -1; }
  .cmp .num { text-align: left; padding-right: 0; }
  .cmp .num::before { content: attr(data-label); display: block; color: var(--color-muted); font: 400 var(--text-xs)/1.3 var(--font-body); white-space: normal; }
}
.stress h3 { margin-bottom: var(--space-xs); }

/* council */
.council__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .council__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: stretch; } }
.tiers2 { list-style: none; margin: 0; padding: 0; display: grid; justify-items: stretch; grid-template-rows: 1fr auto 1fr auto 1fr; align-self: stretch; }
.t { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-ring); background: var(--color-paper-2); color: var(--color-ink); }
.t b { font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.t span { font-size: var(--text-md); }
@media (min-width: 64rem) { .t { grid-template-columns: 7.5rem minmax(0, 1fr); } .t b { font-size: var(--text-display); } .t span { font-size: var(--text-lg); } }
.t--a { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.t--b { background: var(--color-slab); color: var(--color-slab-ink); }
.tiers2 .link { inline-size: 0; block-size: var(--space-lg); border-top: 0; border-left: 2px dashed var(--color-ring); }
.tiers2 .link::after { left: -7px; right: auto; bottom: -2px; top: auto; inline-size: 12px; block-size: 10px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sheet2 { background: var(--color-sheet); border-radius: 3px; box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-lift); overflow: hidden; min-width: 0; }
.sheet2__head { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm) var(--space-lg); background: var(--color-slab); color: var(--color-slab-ink); font-size: var(--text-sm); font-weight: 500; }
.sheet2__head span:last-child { color: var(--color-slab-muted); }
.sheet2 small { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.sheet2__q { padding: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet2__q p { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; }
.sheet2__verdict { padding: var(--space-lg); border-top: 3px solid var(--color-accent); background: var(--color-accent-soft); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet2__verdict p { font-size: var(--text-md); line-height: 1.5; max-width: 62ch; }
.sheet2__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); }
@media (min-width: 52rem) { .sheet2__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } }
.sheet2__cols h3 { font: 600 var(--text-md)/1.2 var(--font-body); letter-spacing: 0; padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-ink); margin-bottom: var(--space-xs); }
.seats { list-style: none; margin: 0; padding: 0; display: grid; }
.seat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-xs) 0 var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.seat__name { font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-xs); }
.seat__ico { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 6px; background: var(--color-tile); color: var(--color-accent-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.seat__ico svg { inline-size: 14px; block-size: 14px; display: block; }
.seat__stance { color: var(--color-muted); padding-left: var(--space-xl); }
.seat--no .seat__stance { color: var(--color-coral); font-weight: 600; }
.seat--no .seat__name { text-decoration: underline; text-decoration-color: var(--color-coral); text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.sheet2__why { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.risks { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; }
.risks li { counter-increment: r; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.risks li::before { content: counter(r); grid-row: span 2; font: 500 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-muted); }
.risks b { font-weight: 500; }
.risks span { color: var(--color-muted); }
.sheet2__foot { padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-ring); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .t { grid-template-columns: 4rem minmax(0, 1fr); padding: var(--space-md); } .sheet2__head, .sheet2__q, .sheet2__verdict, .sheet2__cols, .sheet2__foot { padding-inline: var(--space-md); } }
.caution { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }

/* limits */
.sec--limits { background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 32px 32px, var(--color-paper); }
.limits { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-ink); }
.limits li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; padding: var(--space-md) 0 var(--space-md) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 82%, transparent); color: var(--color-muted); }
.limits li + li { margin-top: 0; }
.lim__n { font: 500 var(--text-sm)/1.5 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.limits p { margin: 0; max-width: 58ch; }
.limits b { display: block; color: var(--color-ink); font-weight: 500; font-size: var(--text-md); margin-bottom: var(--space-3xs); }

/* price: the bill over the land */
.field { position: relative; isolation: isolate; overflow: clip; background: var(--color-slab); color: var(--color-slab-ink); padding-block: var(--section-gap); }
.field .map { z-index: -1; }
.field .head .lead, .field .bill small, .field .bill td + td { color: var(--color-slab-muted); }
.field a:focus-visible, .field :focus-visible { outline-color: var(--color-accent); }
.bills { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .bills { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; } }
.bill { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-accent); }
.bill caption { text-align: left; font-weight: 600; font-size: var(--text-lg); padding-bottom: var(--space-sm); caption-side: top; }
.bill th, .bill td { text-align: left; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-slab-ink) 22%, var(--color-slab)); font-weight: 400; vertical-align: baseline; }
.bill th { font-weight: 500; }
.bill th small { display: block; font-size: var(--text-sm); font-weight: 400; }
.bill td { text-align: right; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.bill td + td { padding-left: var(--space-lg); font-weight: 400; }
.bill tfoot th, .bill tfoot td { border-bottom: 2px solid var(--color-accent); font-weight: 600; }
.packs { list-style: none; margin: 0; padding: 0; }
.packs h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); max-width: none; }
.packs li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3xs) var(--space-lg); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-slab-ink) 22%, var(--color-slab)); align-items: baseline; }
.packs li:last-child { border-bottom: 2px solid var(--color-accent); }
.packs .p-name, .packs .p-get { font-family: var(--font-outlier); font-size: var(--text-xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.packs .p-name.p-name--text { font-family: var(--font-body); font-weight: 600; }
.packs small { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-slab-muted); }

/* faq */
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:first-child { border-top: var(--rule-hair) solid var(--color-ink); }
.faq details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 64px; padding: var(--space-md) 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary .icon { transition: transform var(--dur-long) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .a { padding: 0 0 var(--space-lg); color: var(--color-muted); max-width: 62ch; }

/* close and footer */
.close { position: relative; isolation: isolate; overflow: clip; background: var(--color-paper-3); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap); }
.close .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
@media (min-width: 60rem) { .close .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }
.close h2 { font-size: var(--text-display-s); max-width: 14ch; }
.close .lead { color: var(--color-muted); max-width: 52ch; }
.close .actions { margin-top: var(--space-lg); }
footer { background: var(--color-slab); color: var(--color-slab-muted); padding-block: var(--space-3xl) var(--space-2xl); font-size: var(--text-sm); }
footer .container { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { footer .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3xl); align-items: start; } footer .brand, footer nav { grid-column: 1; } footer p { grid-column: 2; grid-row: 1 / span 2; } }
footer .brand { font-size: var(--text-3xl); color: var(--color-slab-ink); }
footer .brand img { width: 44px; height: 44px; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-slab-ink); }
footer p { max-width: 70ch; }

/* the one reveal */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .pin, .entry { animation: none; } html { scroll-behavior: auto; } }

@media (max-width: 40rem) {
  .actions .key { width: 100%; }
}

@media (max-width: 40rem) { .years span.alt { display: none; } }
@media (max-width: 40rem) {
  .entry__fig { font-size: 2rem; }
  .entries { grid-template-columns: minmax(0, 1fr); }
  .entries .entry { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto; }
  .entries .notebook { border-left: var(--rule-hair) solid var(--color-ring); }
  .entries .cell { border-top: 0; }
}


/* review pass: CTA text link, mobile dock, reading guide, folded dossiers, flow note */
.textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.textlink:hover { text-decoration-thickness: 2px; }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dock { display: none; }
@media (max-width: 59.99rem) {
  .dock { display: inline-flex; justify-content: center; position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: var(--z-sticky); box-shadow: var(--shadow-lift); transform: translateY(160%); transition: transform var(--dur-long) var(--ease-out); }
  .dock.is-on { transform: none; }
  footer { padding-bottom: calc(var(--space-2xl) + 72px); }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
.readme { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring); }
.readme__verdict { font-size: var(--text-lg); line-height: 1.4; }
.readme__verdict b { font-weight: 600; }
.readme__terms { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); }
@media (min-width: 52rem) { .readme__terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.readme__terms dt { font-weight: 600; }
.readme__terms dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.fold { display: none; }
html.js .fold { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ring); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; justify-self: start; }
html.js .fold:hover { background: var(--color-paper-3); }
html.js .fold:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dossier.is-folded > :not(.dossier__head) { display: none; }
/* an open dossier is wide on desktop: headline figures at the left, the three blocks across */
@media (min-width: 64rem) {
  .dossier:not(.is-folded) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: var(--space-2xl); align-items: start; }
  .dossier:not(.is-folded) > .dossier__head { grid-column: 1; grid-row: 1; }
  .dossier:not(.is-folded) > .figs { grid-column: 1; grid-row: 2; }
  .dossier:not(.is-folded) > .blocks { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
  .dossier:not(.is-folded) > .dossier__note { grid-column: 1 / -1; }
}
.flow__note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }
.cmp .is-weak, .cmp .is-weak small { color: color-mix(in oklab, var(--color-coral) 70%, var(--color-ink)); }
:root[data-theme="dark"] .cmp .is-weak, :root[data-theme="dark"] .cmp .is-weak small { color: var(--color-coral); }


/* round 2 */
.brand:focus-visible, .skip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.st__more { margin-top: var(--space-md); }
.st__more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); min-height: 44px; font-size: var(--text-sm); font-weight: 500; border-top: 2px solid var(--color-ink); }
.st__more summary::-webkit-details-marker { display: none; }
.st__more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.st__more summary .icon { transition: transform var(--dur-short) var(--ease-out); }
.st__more[open] summary .icon { transform: rotate(45deg); }
.st__more .st__rows { margin-top: 0; }
.dossier__sum { display: none; color: var(--color-muted); font-size: var(--text-sm); }
.dossier.is-folded .dossier__sum { display: block; }
.dossier__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dossier__head > :not(h3):not(.fold) { grid-column: 1 / -1; }
.dossier.is-folded .dossier__head > p:not(.dossier__sum) { display: none; }
.quadkey { margin: var(--space-md) 0 0; display: grid; gap: var(--space-xs); max-width: 56ch; }
.quadkey div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm); }
.quadkey dt { font-weight: 600; font-size: var(--text-sm); }
.quadkey dd { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.close__proof { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; max-width: 46ch; margin-bottom: var(--space-md); }
@media (max-width: 59.99rem) {
  .nav__links { -webkit-mask-image: linear-gradient(90deg, var(--color-ink) 88%, transparent); mask-image: linear-gradient(90deg, var(--color-ink) 88%, transparent); }
  .nav__links a { min-inline-size: 44px; justify-content: center; }
}