/* =====================================================================
   avtoshyna.info  ·  site.css  ·  «Сервісна книжка», final contract
   Built on tokens.css (the only place with hex colours), which the layout
   links separately. Native CSS, no framework, mobile first, light + dark.
   Generated from design/prototype/prototype.css by views/build-css.mjs:
   do not edit by hand, edit that script.
   ===================================================================== */

/* ---------- 0. Fonts (SIL OFL, see public/fonts/README.md) ---------- */
@font-face { font-family: "Fixel Text"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/FixelText-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fixel Text"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/FixelText-Medium.woff2") format("woff2"); }
@font-face { font-family: "Fixel Text"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/FixelText-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fixel Text"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/FixelText-Bold.woff2") format("woff2"); }
@font-face { font-family: "Fixel Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/FixelDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Fixel Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("/static/fonts/FixelDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-style: normal; font-display: swap; src: url("/static/fonts/JetBrainsMono-VF.woff2") format("woff2-variations"), url("/static/fonts/JetBrainsMono-VF.woff2") format("woff2"); }

/* ---------- 1. Base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: var(--fs-3); } }

/* paper grain: fixed, non-interactive, light mode only */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius);
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--fs-6); }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); }
@media (min-width: 768px) { h1 { font-size: var(--fs-7); } }

p, ul, ol, table, figure, blockquote, dl { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-0); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
mark { background: var(--panel-2); color: inherit; padding: 0 .1em; border-radius: var(--radius); }

.num, .mono, td.n, th.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.help { font-size: var(--fs-0); color: var(--ink-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link: first element in <body>, visible on focus only */
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-skip); padding: var(--s-3) var(--s-4); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: var(--s-4); }

/* ---------- 2. Layout ------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

.section { padding-block: var(--s-7); }
@media (min-width: 1024px) { .section { padding-block: var(--s-8); } }
.section + .section { border-top: 1px solid var(--line); }
.section-title { margin-bottom: var(--s-5); }
.section-title .sub { display: block; margin-top: var(--s-2); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-1); color: var(--ink-2); letter-spacing: 0; }

.page-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .page-grid { grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s-8); } }
.page-grid.hub { margin-top: var(--s-6); gap: var(--s-6); }
@media (min-width: 1024px) { .page-grid.hub { grid-template-columns: minmax(0, 1fr) var(--rail-hub); gap: var(--s-8); } }
.page-single { max-width: 760px; }

.rail { display: grid; gap: var(--s-6); align-content: start; }
/* the rail is not sticky: with Зміст + section list + Головне it is taller than most viewports */

/* ---------- 3. Header / nav ------------------------------------------ */
.site-header { border-bottom: 1px solid var(--line); position: relative; z-index: var(--z-nav); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
@media (min-width: 1024px) { .site-header .wrap { min-height: 72px; } }

.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); gap: .1em; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.wordmark .o { width: 1.05em; height: 1.05em; flex: none; }
.wordmark .tld { color: var(--ink-2); font-weight: 500; }
.wordmark .by { display: none; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-0); color: var(--ink-2); margin-left: var(--s-3); letter-spacing: 0; }
@media (min-width: 768px) { .wordmark .by { display: inline; } }

.header-tools { display: flex; align-items: center; gap: var(--s-2); }

.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-1); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav a.nav-calc { color: var(--accent); font-weight: 600; }
@media (min-width: 1024px) { .nav { display: block; } .nav-toggle { display: none; } }

/* theme toggle: hidden without JS (the html.js class is set by the pre-paint script) */
.theme-toggle { display: none; }
.js .theme-toggle { display: inline-flex; }
.theme-toggle { align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-1); font-weight: 500; cursor: pointer; white-space: nowrap; }
.theme-toggle:hover { background: var(--panel); }
.theme-toggle .short { display: inline; }
.theme-toggle .long { display: none; }
@media (min-width: 1024px) { .theme-toggle .short { display: none; } .theme-toggle .long { display: inline; } }

/* mobile menu: a <details> disclosure, no JS */
.nav-toggle { position: relative; }
.nav-toggle summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; font-size: var(--fs-1); }
.nav-toggle summary::-webkit-details-marker { display: none; }
.nav-toggle[open] summary { background: var(--panel); }
.nav-toggle .menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 240px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-2); box-shadow: 0 12px 32px -12px rgb(var(--shadow) / .25); }
.nav-toggle .menu ul { list-style: none; margin: 0; padding: 0; }
.nav-toggle .menu a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: var(--ink); text-decoration: none; font-weight: 500; }
.nav-toggle .menu a:hover { background: var(--panel); }
.nav-toggle .menu a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.nav-toggle .menu a.nav-calc { color: var(--accent); font-weight: 600; }
.nav-toggle .menu li + li { border-top: 1px solid var(--line); }

/* ---------- 4. Buttons and forms ------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: var(--fs-1); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(.94); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--panel); }

label { font-weight: 600; font-size: var(--fs-1); }
select, input[type="text"], input[type="search"] { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); min-height: var(--tap); padding: 0 var(--s-3); }
select { font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding-right: var(--s-3); }
select:hover, input:hover { border-color: var(--ink); }
input::placeholder { color: var(--ink-2); opacity: 1; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; font-size: var(--fs-1); margin-bottom: var(--s-3); }

/* the tyre-size row: [195] / [65] R [15], each select with its own visible label */
.size-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: var(--s-2); }
.size-row .field { display: grid; gap: var(--s-1); min-width: 0; }
.size-row .field label { font-size: var(--fs-0); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.size-row .sep { font-family: var(--font-mono); color: var(--ink-2); text-align: center; min-height: var(--tap); display: flex; align-items: center; }
.size-row select { width: 100%; min-width: 0; }
.reads-as { margin-top: var(--s-3); font-size: var(--fs-1); color: var(--ink-2); }
.reads-as b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }

/* range input (speedometer reading) */
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: var(--tap); margin: 0; }

/* search form */
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); max-width: 560px; }
.search-form input { width: 100%; }

/* ---------- 5. Calculator -------------------------------------------- */
.calc { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); }
.calc-head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.calc-head h2, .calc-head h3 { font-size: var(--fs-4); }
.calc-head .pair { display: none; }
@media (min-width: 640px) { .calc-head .pair { display: inline; } }
.calc-body { padding: var(--s-5); display: grid; gap: var(--s-5); }
.calc-body + .calc-body { border-top: 1px solid var(--line); }
.calc-body > h2 { font-size: var(--fs-4); }
.calc-inputs { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .calc-inputs { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.lead-result { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--panel); border-radius: var(--radius); }
.lead-result .k { font-size: var(--fs-1); color: var(--ink-2); font-weight: 600; }
.lead-result .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-8); line-height: 1; color: var(--accent); font-weight: 600; letter-spacing: -.02em; }
.lead-result .v small { font-size: var(--fs-4); color: var(--ink-2); font-weight: 500; margin-left: .15em; }
.lead-result .also { font-size: var(--fs-1); color: var(--ink-2); }
.lead-result .also b { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* the 5 % check: always visible; "ok" outlined, "over" accent-filled */
.check { padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-1); }
.check b { font-weight: 700; }
.check .over-only { display: none; }
.check .ok-only { display: inline; }
.check[data-state="over"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.check[data-state="over"] .over-only { display: inline; }
.check[data-state="over"] .ok-only { display: none; }
.check .num { font-family: var(--font-mono); }

.calc-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; font-size: var(--fs-1); }
.calc-foot .share { word-break: break-all; }

/* results table: parameters as rows, so 4 columns fit a 360px phone */
.results { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.results caption { text-align: left; font-weight: 600; padding-bottom: var(--s-2); caption-side: top; }
.results th, .results td { padding: var(--s-2) var(--s-2); text-align: right; vertical-align: baseline; }
.results th { font-weight: 600; color: var(--ink-2); font-size: var(--fs-0); border-bottom: 1px solid var(--line-strong); }
.results th:first-child, .results td:first-child { text-align: left; }
.results td:first-child { font-weight: 600; }
.results td:first-child .letter { font-family: var(--font-mono); color: var(--accent); font-weight: 700; margin-right: .35em; }
.results td:first-child .unit { color: var(--ink-2); font-weight: 400; font-size: var(--fs-0); }
.results td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.results tbody tr + tr td { border-top: 1px solid var(--line); }
.results td.delta { color: var(--accent); font-weight: 700; }
.results td.delta .pct { display: block; font-size: var(--fs-0); color: var(--ink-2); font-weight: 500; }
.results td.delta[data-over="true"] .pct { color: var(--accent); font-weight: 700; }
@media (max-width: 400px) { .results { font-size: var(--fs-0); } .results th, .results td { padding-inline: var(--s-1); } }

/* speedometer */
.gauge-wrap { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .gauge-wrap { grid-template-columns: minmax(0, 440px) 1fr; align-items: start; gap: var(--s-6); } }
.gauge { width: 100%; max-width: 440px; font-family: var(--font-mono); }
.gauge .dial-arc { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.gauge .tick { stroke: var(--ink); stroke-width: 2; }
.gauge .tick.minor { stroke: var(--line-strong); stroke-width: 1; }
.gauge .reading { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.gauge .real { fill: var(--accent); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.gauge .needle { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transform-origin: 220px 206px; transform-box: view-box; transition: transform var(--dur-needle) var(--ease); }
.gauge .hub { fill: var(--ink); }
.gauge .cap { fill: var(--ink-2); font-family: var(--font-sans); font-size: 13px; text-anchor: middle; }
.gauge .cap.accent { fill: var(--accent); font-weight: 600; }
.reading-ctl { display: grid; gap: var(--s-2); }
.reading-ctl .row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-1); }
.reading-ctl .row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.reading-ctl .row .real { color: var(--accent); }
.speed-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1) var(--s-4); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-1); }
.speed-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: var(--s-1) 0; }
.speed-list li b { color: var(--accent); }
@media (min-width: 768px) { .speed-list { grid-template-columns: repeat(2, 1fr); } }

/* wheel cross-section with live values */
.wheel { width: 100%; max-width: 520px; font-family: var(--font-mono); }
.wheel .tyre { fill: var(--ink); stroke: none; }
.wheel .tyre-inner { fill: var(--paper); }
.wheel .rim { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.wheel .axis { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 6 4; }
.wheel .dim { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.wheel .dim-lbl { fill: var(--accent); font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.wheel .val { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.wheel .cap { fill: var(--ink-2); font-family: var(--font-sans); font-size: 13px; text-anchor: middle; }
.glossary { display: grid; gap: var(--s-3); }
.glossary dt { font-weight: 700; }
.glossary dt .letter { font-family: var(--font-mono); color: var(--accent); margin-right: .4em; }
.glossary dd { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--fs-1); }

/* ---------- 6. Home --------------------------------------------------- */
.hero { padding-block: var(--s-6) var(--s-7); }
.hero-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 5fr 7fr; gap: var(--s-8); } .hero { padding-top: var(--s-8); } }
.hero h1 { font-size: var(--fs-6); }
@media (min-width: 768px) { .hero h1 { font-size: var(--fs-7); } }
.hero .lede { margin-top: var(--s-4); font-size: var(--fs-3); color: var(--ink-2); max-width: 40ch; }
.hero .actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* contents list of the 8 hubs (the manual's table of contents) */
.contents { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; }
@media (min-width: 768px) { .contents { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.contents li { counter-increment: c; border-top: 1px solid var(--line); }
.contents a { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-3); padding: var(--s-4) 0; color: var(--ink); text-decoration: none; }
.contents a::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); font-weight: 700; font-size: var(--fs-1); padding-top: .2em; }
.contents .t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: var(--lh-tight); }
.contents a:hover .t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .15em; }
.contents .d { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-1); }

/* six families as sidewall stamps: caption, big word, count, faded corner crop, one accent rule */
.stamps { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .stamps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stamps { gap: var(--s-4); } .stamp { min-height: 190px; } }
.stamp { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: var(--s-3); background: var(--tile); color: var(--on-tile); text-decoration: none; border-radius: var(--radius); overflow: hidden; isolation: isolate; }
@media (min-width: 640px) { .stamp { padding: var(--s-4); } }
.stamp::before { content: ""; position: absolute; left: var(--s-3); top: var(--s-3); width: 28px; height: 3px; background: var(--accent); }
@media (min-width: 640px) { .stamp::before { left: var(--s-4); top: var(--s-4); } }
.stamp img { position: absolute; right: 0; top: 0; width: 55%; height: 62%; object-fit: cover; opacity: .38; z-index: -1; filter: grayscale(1) contrast(1.05); -webkit-mask-image: linear-gradient(200deg, rgb(0 0 0) 30%, rgb(0 0 0 / 0) 85%); mask-image: linear-gradient(200deg, rgb(0 0 0) 30%, rgb(0 0 0 / 0) 85%); }
.stamp .cap { font-size: var(--fs-0); color: var(--on-tile-2); }
.stamp .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 5.2vw, 1.875rem); line-height: 1; letter-spacing: -.02em; margin-top: var(--s-1); overflow-wrap: anywhere; }
.stamp .cnt { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--on-tile-2); margin-top: var(--s-2); }
.stamp:hover .big { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .12em; }
.stamp:focus-visible { outline-offset: 3px; }

/* the author's letter */
.letter { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .letter { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; } }
.letter .text p + p { margin-top: var(--s-4); }
.letter .motto { margin-top: var(--s-5); padding-left: var(--s-4); border-left: 3px solid var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: 1.3; }
.letter .sig { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); }
.letter .sig img { width: var(--face); height: var(--face); object-fit: cover; object-position: top; border-radius: var(--radius); filter: grayscale(1); flex: none; }
.letter .sig .name { font-weight: 700; }
.letter .aside { border-top: 1px solid var(--line); padding-top: var(--s-4); font-size: var(--fs-1); }
@media (min-width: 1024px) { .letter .aside { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 var(--s-6); } }
.letter .aside ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.letter .aside li { border-top: 1px solid var(--line); }
.letter .aside li a { display: block; padding: var(--s-2) 0; min-height: var(--tap); }
.letter .aside li span { display: block; color: var(--ink-2); }
.portrait { display: flex; gap: var(--s-4); align-items: center; }
.portrait a { display: inline-block; padding-block: var(--s-3); }
.portrait img { width: 72px; height: 88px; object-fit: cover; object-position: top; border-radius: var(--radius); filter: grayscale(1); flex: none; }

/* ---------- 7. Article ------------------------------------------------ */
.crumbs { font-size: var(--fs-1); color: var(--ink-2); padding-block: var(--s-4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-2); display: inline-block; padding-block: var(--s-2); }
.crumbs li { padding-block: 0; }
.crumbs [aria-current="page"] { display: inline-block; padding-block: var(--s-2); }

.article-head { padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); }
.article-head .lede, .hub-head .lede { margin-top: var(--s-4); font-size: var(--fs-3); color: var(--ink-2); max-width: var(--measure); }
.byline { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-1); color: var(--ink-2); }
.byline a { color: inherit; display: inline-flex; align-items: center; min-height: var(--tap); }
.byline .face { width: var(--face); height: var(--face); object-fit: cover; object-position: top; border-radius: var(--radius); filter: grayscale(1); }
.byline .who { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-weight: 600; }
.byline .who a { text-decoration: none; }
.byline .who a:hover { text-decoration: underline; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); scroll-margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-6); scroll-margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose figure { margin: var(--s-5) 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose figcaption { margin-top: var(--s-2); font-size: var(--fs-0); color: var(--ink-2); }
@media (min-width: 640px) { .prose figure.left { float: left; width: 46%; margin: .3em var(--s-5) var(--s-3) 0; } .prose figure.narrow { width: 40%; } }
.prose a:visited { text-decoration-color: var(--line-strong); }
.prose .verdict { color: var(--accent); font-weight: 700; }
.prose .short-answer { border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s-4) var(--s-5); background: var(--panel); }
.prose .short-answer .k { display: block; font-size: var(--fs-0); font-weight: 700; color: var(--ink-2); margin-bottom: var(--s-1); }
.prose .clear { clear: both; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.prose table th, .prose table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose table th { color: var(--ink-2); font-size: var(--fs-0); font-weight: 600; border-bottom-color: var(--line-strong); }

/* reference tables: dense, tabular figures, sticky header, never wider than a phone */
.table-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .table-grid { grid-template-columns: repeat(4, 1fr); } }
.table-grid.two { grid-template-columns: 1fr 1fr; }
.ref { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-1); }
.ref caption { text-align: left; caption-side: top; font-weight: 700; padding-bottom: var(--s-2); }
.ref thead th { position: sticky; top: 0; background: var(--panel); color: var(--ink-2); font-size: var(--fs-0); font-weight: 600; text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-strong); z-index: var(--z-sticky); }
.ref td { padding: var(--s-1) var(--s-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.ref td:last-child, .ref th:last-child { text-align: right; }
.ref tbody tr:nth-child(5n) td { border-bottom-color: var(--line-strong); }
.ref-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ref-wide:focus-visible { outline: 2px solid var(--focus); }
.table-note { font-size: var(--fs-0); color: var(--ink-2); margin-top: var(--s-2); }

/* series: a visible block above the body, prev/next once at the bottom */
.series-bar { border: 1px solid var(--line-strong); border-radius: var(--radius); margin-bottom: var(--s-6); }
.series-bar .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); min-height: var(--tap); }
.series-bar .head .pos { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-2); white-space: nowrap; }
.series-bar .head a { font-weight: 700; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.series-bar .head a:hover { color: var(--accent); }
.series-bar details { border-top: 1px solid var(--line); }
.series-bar summary { cursor: pointer; padding: var(--s-2) var(--s-4); font-weight: 600; font-size: var(--fs-1); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); }
.series-bar summary::-webkit-details-marker { display: none; }
.series-bar summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-2); }
.series-bar details[open] summary::after { content: "-"; }
.series-bar ol { list-style: none; margin: 0; padding: 0 0 var(--s-2); counter-reset: s; }
.series-bar ol li { counter-increment: s; }
.series-bar ol a { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-4); color: var(--ink); text-decoration: none; font-size: var(--fs-1); min-height: var(--tap); align-items: center; }
.series-bar ol a::before { content: counter(s); font-family: var(--font-mono); color: var(--ink-2); font-size: var(--fs-0); }
.series-bar ol a:hover { background: var(--panel); }
.series-bar ol a[aria-current="page"] { font-weight: 700; color: var(--accent); }
.series-bar ol a[aria-current="page"]::before { color: var(--accent); }

.prevnext { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 640px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext a { display: block; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.prevnext a:hover { background: var(--panel); }
.prevnext .k { display: block; font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-1); }
.prevnext .t { font-weight: 700; }
.prevnext .next { text-align: right; }
.series-all { margin-top: var(--s-4); font-size: var(--fs-1); }
.series-all a { display: inline-block; padding-block: var(--s-3); }

/* related articles: whole-card links; the thumb column exists only with a thumb */
.related { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .related { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related { grid-template-columns: repeat(3, 1fr); } }
.card { display: grid; grid-template-columns: 1fr; gap: var(--s-3); color: var(--ink); text-decoration: none; padding: var(--s-3) 0; border-top: 1px solid var(--line); min-height: var(--tap); }
.card--thumb { grid-template-columns: var(--card-w) 1fr; }
.card img { width: var(--card-w); height: var(--card-h); object-fit: cover; border-radius: var(--radius); filter: grayscale(.2); }
.card .t { font-weight: 700; line-height: 1.25; }
.card .d { display: block; margin-top: var(--s-1); font-size: var(--fs-0); color: var(--ink-2); }
.card:hover .t { color: var(--accent); }

/* ---------- 8. Section hub -------------------------------------------- */
.hub-head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.hub-head .intro { margin-top: var(--s-5); max-width: var(--measure); }

.questions { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.questions h2 { font-size: var(--fs-3); margin-bottom: var(--s-2); }
.questions ol { list-style: none; margin: 0; padding: 0; counter-reset: q; font-size: var(--fs-1); }
.questions li { counter-increment: q; border-top: 1px solid var(--line); }
.questions li a { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-2); align-items: center; min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; }
.questions li a::before { content: counter(q); font-family: var(--font-mono); color: var(--ink-2); font-size: var(--fs-0); }
.questions li a:hover { color: var(--accent); }

.hub-list { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.hub-list li { counter-increment: h; border-top: 1px solid var(--line); }
.hub-list a { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); padding: var(--s-4) 0; color: var(--ink); text-decoration: none; }
.hub-list a::before { content: counter(h, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); font-weight: 700; font-size: var(--fs-1); padding-top: .15em; }
.hub-list img { display: none; }
@media (min-width: 640px) { .hub-list a.row--thumb { grid-template-columns: 2rem var(--thumb-w) 1fr; } .hub-list img { display: block; width: var(--thumb-w); height: var(--thumb-h); object-fit: cover; border-radius: var(--radius); } }
.hub-list .t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: var(--lh-tight); }
.hub-list a:hover .t { color: var(--accent); }
.hub-list .d { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-1); }
.hub-list .m { display: block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-2); }

/* sub-sections of a family hub: compact rows */
.sub-list { list-style: none; margin: 0; padding: 0; }
.sub-list li { border-top: 1px solid var(--line); }
.sub-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.sub-list a:hover { color: var(--accent); }
.sub-list .m { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-2); font-weight: 400; white-space: nowrap; }

/* rail blocks: every link is a 44 px row */
.rail-block h2, .rail-block h3 { font-size: var(--fs-3); margin-bottom: var(--s-2); }
.rail-block ul, .rail-block ol { list-style: none; margin: 0; padding: 0; }
.rail-block li { border-top: 1px solid var(--line); }
.rail-block li a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; font-size: var(--fs-1); }
.rail-block li a:hover { color: var(--accent); }
.rail-block li a[aria-current="page"] { font-weight: 700; color: var(--accent); }
.rail-block ol { counter-reset: r; }
.rail-block ol li { counter-increment: r; }
.rail-block ol li a::before { content: counter(r); font-family: var(--font-mono); color: var(--ink-2); font-size: var(--fs-0); width: 1.5rem; flex: none; }
.rail-block ol li a[aria-current="page"]::before { color: var(--accent); }
.rail-block .btn { margin-top: var(--s-3); }

/* ---------- 9. Search, error, archive, sitemap ------------------------- */
.results { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.results li { border-top: 1px solid var(--line); }
.results a { display: block; padding: var(--s-4) 0; color: var(--ink); text-decoration: none; }
.results .t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: var(--lh-tight); }
.results a:hover .t { color: var(--accent); }
.results .s { display: block; margin-top: var(--s-1); font-size: var(--fs-0); color: var(--ink-2); }
.results .d { display: block; margin-top: var(--s-2); font-size: var(--fs-1); color: var(--ink-2); }
.result-line { margin-top: var(--s-5); font-size: var(--fs-1); color: var(--ink-2); }
.empty { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.empty ul { padding-left: 1.25em; margin-top: var(--s-3); font-size: var(--fs-1); }
.empty li + li { margin-top: var(--s-1); }

.index-list { list-style: none; margin: 0; padding: 0; counter-reset: i; }
@media (min-width: 640px) { .index-list { columns: 2; column-gap: var(--s-7); } }
.index-list li { counter-increment: i; border-top: 1px solid var(--line); break-inside: avoid; }
.index-list a { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-2); align-items: center; min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.index-list a::before { content: counter(i, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-1); font-weight: 700; }
.index-list a:hover { color: var(--accent); }

.sitemap { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 768px) { .sitemap { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.sitemap h2 { font-size: var(--fs-4); margin-bottom: var(--s-2); }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li { border-top: 1px solid var(--line); }
.sitemap ul ul { margin-left: var(--s-5); }
.sitemap ul ul li { border-top-color: transparent; border-top-style: dashed; }
.sitemap a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink); text-decoration: none; font-size: var(--fs-1); }
.sitemap a:hover { color: var(--accent); }
.sitemap ul ul a { font-weight: 400; color: var(--ink-2); }

/* ---------- 10. Footer -------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-strong); margin-top: var(--s-8); padding-block: var(--s-7); font-size: var(--fs-1); color: var(--ink-2); }
.site-footer .cols { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer .cols { grid-template-columns: 5fr 3fr 4fr 3fr; gap: var(--s-7); } }
.site-footer h2 { font-size: var(--fs-1); color: var(--ink); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { border-top: 1px solid var(--line); }
.site-footer li a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-2) 0; color: var(--ink-2); text-decoration: none; }
.site-footer li a:hover { color: var(--accent); }
.site-footer .motto { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: 1.3; max-width: 30ch; }
.site-footer .legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-0); }

/* ---------- 11. Utilities and states ---------------------------------- */
.flow > * + * { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  body::before, .site-header, .site-footer, .rail, .skip, .theme-toggle { display: none; }
  a { color: inherit; text-decoration: none; }
  .prose, .page-grid { max-width: none; }
}


.ref tbody th { padding: var(--s-1) var(--s-3); border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-weight: 600; text-align: left; color: var(--ink); }
.ref tbody th[scope="rowgroup"] { vertical-align: top; }
.ref thead th[scope="colgroup"] { text-align: center; }
.ref thead th[scope="colgroup"]:last-child { text-align: right; }
.ref caption b, .ref caption strong { font-weight: 700; }

.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.prose .table-wrap + .table-note { margin-top: var(--s-2); }
.prose .table-wrap { margin: var(--s-5) 0; }
.prose .table-grid .table-wrap { margin: 0; }

.table-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.page-grid > *, .page-grid.hub > * { min-width: 0; }

.sub-list a { flex-wrap: wrap; }
.sub-list .m { white-space: normal; text-align: right; min-width: 0; }

.page-archive .page-grid h3 a { display: inline-flex; align-items: center; min-height: var(--tap); }

.lead-block { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.lead-block h2 { font-size: var(--fs-3); margin-bottom: var(--s-2); }
.lead-block p { font-size: var(--fs-1); color: var(--ink-2); }
.lead-block p + p { margin-top: var(--s-3); }
.lead-block a { display: inline-block; padding-block: var(--s-2); color: var(--accent); }

.hub-list li.preface { counter-increment: none; }
.hub-list li.preface a::before { content: ""; }

.ad-slot { margin: var(--s-6) 0; }
.ad-slot__label { display: block; font-size: var(--fs-0); color: var(--ink-2); margin-bottom: var(--s-1); }
.adsbygoogle { display: block; }

.empty p { margin: 0; }
.empty .hint { margin-top: var(--s-3); font-size: var(--fs-1); color: var(--ink-2); }
.empty--quiet { border-style: dashed; }

.gauge .needle { transform: rotate(-27.69deg); }

@media print {
  .crumbs, .series-bar, .prevnext, .related, .search-form, .byline .face, .calc-foot, .stamps { display: none; }
  .page-grid, .page-grid.hub { display: block; }
  .ref thead th { position: static; }
  .table-grid { display: block; }
  .table-grid > * + * { margin-top: var(--s-5); }
  .table-wrap, .ref-wide { overflow: visible; }
  .ref { page-break-inside: auto; }
  .ref tr { page-break-inside: avoid; }
  .ref caption { page-break-after: avoid; }
}

@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --paper: white; --panel: white; --panel-2: white; --tile: white;
    --ink: black; --ink-2: black; --on-tile: black; --on-tile-2: black;
    --accent: black; --on-accent: black; --focus: black;
    --line: silver; --line-strong: gray; --grain-opacity: 0;
  }
}

.letter .text .verdict { color: var(--accent); }
.prose .motto .verdict, .letter .motto .verdict { color: inherit; }
.prose .motto { margin-top: var(--s-5); padding-left: var(--s-4); border-left: 3px solid var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: 1.3; }

.prose section > * + * { margin-top: var(--s-4); }
.prose section + section, .prose section + h2 { margin-top: var(--s-7); }

.table-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.prose .ref td, .prose .ref tbody th { padding: var(--s-1) var(--s-3); }
.ref--spans td:last-child, .ref--spans th:last-child { text-align: left; }
.table-wrap > table > caption { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter)); }
.table-wrap[data-scrolls] { border-right: 1px solid var(--line-strong); }

@media (min-width: 640px) { .prevnext .next { grid-column: 2; } }

.crumbs li + li::before { content: none; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--line-strong); }
.crumbs a, .crumbs [aria-current="page"] { padding-block: 10px; }
@media (max-width: 639px) {
  .crumbs li:last-child { display: none; }
  .crumbs li:nth-last-child(2)::after { content: none; }
}

.calc-foot .share-link { display: inline-block; overflow-wrap: anywhere; padding-block: var(--s-3); color: var(--accent); }

.wheel-pair { display: grid; gap: var(--s-5); }
.wheel--side { max-width: 320px; }
.wheel--section { max-width: 260px; }
.gauge-legend { margin-top: var(--s-3); }
.gauge-legend b { color: var(--accent); font-weight: 600; }
@media (max-width: 639px) {
  .gauge .real { display: none; }
}

.ad-slot { min-height: 1px; }
.ad-slot__label { visibility: hidden; }
.ad-slot.is-filled .ad-slot__label { visibility: visible; }
.ad-slot.is-empty { display: none; }

.prose p > img { display: block; margin: var(--s-4) 0; }
.sitemap h2 a { font-size: inherit; font-weight: inherit; }
.page-archive .sub-list .m { font-family: var(--font-sans); font-size: var(--fs-0); text-align: left; }

.calc-foot a, .lead-block a { display: inline-flex; align-items: center; min-height: var(--tap); }

.site-footer h3 { font-size: var(--fs-1); color: var(--ink); margin-bottom: var(--s-2); }

@media (max-width: 639px) { .ring-note { display: none; } }

@media (max-width: 639px) {
  .gauge-box { overflow: hidden; max-width: 440px; }
  .gauge-box .gauge { width: 137.5%; max-width: none; margin-left: -18.75%; }
  .gauge .reading, .gauge .cap { font-size: 14px; }
}
@media (max-width: 399px) {
  .gauge-box { margin-inline: calc(-1 * var(--s-3)); }
  .wheel .val, .wheel .cap { font-size: 14px; }
}

.wheel .dim-start { text-anchor: start; }
.wheel .dim-end { text-anchor: end; }

@media (max-width: 767px) {
  .hub-head { padding-bottom: var(--s-5); }
  .page-grid.hub { margin-top: var(--s-5); }
  .page-grid.hub > div > .mt-7:first-child { margin-top: var(--s-6); }
}

@media (max-width: 639px) {
  .page-archive .sub-list a { display: block; }
  .page-archive .sub-list .m { display: block; margin-top: var(--s-1); }
}