/* Oil & Miles — single stylesheet for the whole site.
   One self-hosted webfont for headings; body text stays on system fonts.
   Nothing is requested from Google or any other origin, which keeps first
   paint fast and keeps EU visitors out of a third-party request. */

/* Archivo, bold, Latin subset only — 14 KB. SIL Open Font License, so it
   can be self-hosted and used commercially.
   swap: headings render immediately in the fallback and re-render when the
   file lands, rather than sitting invisible. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Oswald, subsetted to the eight characters in "OIL & MILES" and nothing
   else — 1.2 KB. A wordmark never needs an alphabet, and the subset is
   generated from the uppercase string because the logo is set in caps.
   Ask for the lowercase string and E, I, L and S silently fall back to
   another font on every machine but your own. */
@font-face {
  font-family: "Wordmark";
  src: url("../fonts/wm/oswald.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Color tokens

   Light is the base. Dark is applied twice on purpose:
   once for visitors who never touched the toggle (prefers-color-scheme),
   once for visitors who did ([data-theme]). The :not([data-theme="light"])
   guard is what lets the toggle win over the OS setting.
   -------------------------------------------------------------------------- */
:root {
  --bg:          #ffffff;
  --surface:     #f8f7f4;
  --surface-2:   #f1efea;
  --text:        #23272e;
  --heading:     #12151a;
  --muted:       #626b78;
  --line:        #e4e1db;
  --line-strong: #d3cfc7;

  --accent:      #a86a0c;   /* dark enough to pass contrast on white */
  --accent-hov:  #8a560a;
  --accent-wash: #fdf6e8;
  --accent-line: #f0dcb4;

  --ink-btn-fg:  #ffffff;
  --shadow:      0 1px 2px rgba(18,21,26,.05), 0 8px 24px rgba(18,21,26,.06);
  --shadow-lift: 0 2px 4px rgba(18,21,26,.06), 0 14px 34px rgba(18,21,26,.10);

  /* Headlines, numbers and anything else meant to be read as display type.
     The fallback list matters: until the woff2 arrives, headings are set in
     the nearest system grotesque rather than jumping from a serif. */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Logo only. The fallback is condensed so the lockup keeps its
     width if the 1.2 KB subset has not arrived yet. */
  --wordmark: "Wordmark", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1180px;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0f1216;
    --surface:     #161a20;
    --surface-2:   #1d222a;
    --text:        #dfe3e8;
    --heading:     #f4f6f8;
    --muted:       #98a2af;
    --line:        #252b34;
    --line-strong: #333b46;

    --accent:      #e9a63f;
    --accent-hov:  #f6bb5c;
    --accent-wash: #1f1a10;
    --accent-line: #3a2f1a;

    --ink-btn-fg:  #17130a;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  --bg:          #0f1216;
  --surface:     #161a20;
  --surface-2:   #1d222a;
  --text:        #dfe3e8;
  --heading:     #f4f6f8;
  --muted:       #98a2af;
  --line:        #252b34;
  --line-strong: #333b46;

  --accent:      #e9a63f;
  --accent-hov:  #f6bb5c;
  --accent-wash: #1f1a10;
  --accent-line: #3a2f1a;

  --ink-btn-fg:  #17130a;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  /* Backstop. Nothing may push the page sideways on a phone. */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hov); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--heading);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  /* Archivo bold sets a little loose at headline sizes; pulling it in is
     what stops a long title reading as a wall. */
  letter-spacing: -.021em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.15em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--accent); color: var(--ink-btn-fg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ink-btn-fg);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.head-in {
  display: flex; align-items: center; gap: 18px;
  min-height: 66px;
}

/* Logo lockup: the odometer-drop mark plus the wordmark. The mark is an
   inline SVG so it takes the accent color in either theme; the wordmark is
   real text so it stays selectable and searchable. */
.brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--heading); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex: none; color: var(--accent); }
.brand .wm {
  font-family: var(--wordmark);
  font-weight: 700; font-size: 1.34rem;
  letter-spacing: .015em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.brand .wm .amp { color: var(--accent); }

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none; border: 1px solid var(--line-strong);
  color: var(--text); border-radius: 8px;
  width: 40px; height: 40px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

.site-nav { display: flex; gap: 22px; align-items: center; }

.site-nav a {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 550;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.head-act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: none; color: var(--text); cursor: pointer;
  padding: 0;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.icon-btn svg { width: 18px; height: 18px; }

/* Show only the icon for the mode you can switch to. */
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; order: 3; margin-left: 0; }
  .head-act { margin-left: auto; order: 2; }
  .site-nav {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 14px;
    border-top: 1px solid var(--line);
  }
  .head-in { flex-wrap: wrap; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 2px; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
}

/* On a narrow phone the wordmark plus three buttons will not fit on one
   row, and the menu button drops to a second line. Shrink the mark and
   tighten the gaps rather than letting the header double in height. */
@media (max-width: 480px) {
  .head-in { gap: 10px; min-height: 58px; }
  .brand .mark { width: 25px; height: 25px; }
  .brand .wm { font-size: 1.14rem; }
  .icon-btn { width: 36px; height: 36px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--line); background: var(--surface); }
/* Block padding only — the horizontal padding belongs to .wrap and must
   not be overwritten, or the text runs into the edge of the screen. */
.hero-in { padding-top: 44px; padding-bottom: 46px; }

.hero-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.hero h1 { max-width: 16ch; margin-bottom: .35em; }
.hero-dek { font-size: 1.15rem; color: var(--muted); max-width: 58ch; margin: 0; }

/* The figure strip under the home page headline.

   A masthead that says "we explain what things cost" is a claim. Four real
   numbers, each linking to the article it came from, is the same claim with
   its evidence attached — and it reads in about two seconds, which is all
   the attention a home page gets. */
.hero-figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 860px) { .hero-figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .hero-figures { grid-template-columns: 1fr; } }

.hero-fig {
  display: block; padding: 18px 20px 20px;
  background: var(--bg); color: var(--text);
  transition: background .15s ease;
}
.hero-fig:hover { background: var(--accent-wash); text-decoration: none; }

.hero-fig .n {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.1rem); line-height: 1;
  color: var(--accent); letter-spacing: -.03em;
}
/* The unit rides with the number but must not compete with it. */
.hero-fig .n em {
  font-style: normal; font-family: var(--sans);
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  color: var(--muted); margin-left: 6px;
}
.hero-fig .l {
  display: block; margin-top: 8px;
  font-size: 13.4px; line-height: 1.45; color: var(--muted);
}
.hero-fig:hover .l { color: var(--text); }

.hero-grid { padding: 34px 0 44px; }

/* The lead article, laid across the full width: cover on one side, headline on
   the other. It replaced a narrow featured card beside a list of four
   thumbnails — and those thumbnails were the reason for the change. The covers
   on this site are data cards, not photographs. At 94x48 the number inside one
   is about eight pixels tall, so four of them read as four smudges. A
   photograph survives being shrunk; a number does not. */
.lead-wide {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg);
}
.lead-wide .lw-media { display: block; }
/* The cover's own composition decides the crop: figure and wordmark sit on the
   left, artwork on the right, so anything trimmed comes off the artwork. */
.lead-wide .lw-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
.lead-wide .lw-body {
  padding: 30px 34px;
  display: flex; flex-direction: column; justify-content: center;
}
.lead-wide h3 { font-size: clamp(1.35rem, 2.1vw, 1.72rem); line-height: 1.16; margin: .3em 0 .35em; }
.lead-wide h3 a { color: var(--heading); }
.lead-wide h3 a:hover { color: var(--accent); text-decoration: none; }
.lead-wide .card-dek { color: var(--muted); font-size: 15.2px; line-height: 1.55; margin: 0 0 14px; }

/* Three supporting articles, each led by its answer rather than its picture:
   a figure where one number carries the piece, the article's own Short answer
   where none does. Both come from tools/sync-figures.py, so neither can drift
   away from the article it points at. */
.fig-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 26px;
}
.fig-card {
  display: block; color: var(--text);
  border-top: 2px solid var(--heading); padding-top: 13px;
}
.fig-card:hover { text-decoration: none; }
.fig-card:hover .fc-t { color: var(--accent-hov); }
.fig-card .fc-n {
  display: block;
  font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  font-size: 1.6rem; line-height: 1.05; color: var(--accent);
}
.fig-card .fc-n em {
  font-style: normal; font-family: var(--sans);
  font-size: 11.6px; font-weight: 650; color: var(--muted); margin-left: 6px;
}
/* A verdict runs to a few words where a figure runs to four characters, so it
   is set smaller and in ink — it has to read as a sentence, not compete with
   the numbers on the cards beside it. */
.fig-card .fc-a {
  display: block;
  font-family: var(--display); font-weight: 700; letter-spacing: -.015em;
  font-size: 1.06rem; line-height: 1.25; color: var(--heading);
}
.fig-card .fc-t {
  display: block; margin-top: 9px;
  font-family: var(--display); font-weight: 650;
  font-size: 1.02rem; line-height: 1.32;
}
.fig-card .fc-m { display: block; margin-top: 6px; font-size: 12.2px; color: var(--muted); }

@media (max-width: 900px) {
  .lead-wide { grid-template-columns: 1fr; }
  .lead-wide .lw-media img { aspect-ratio: 800 / 450; height: auto; }
  .lead-wide .lw-body { padding: 18px 20px 22px; }
  .fig-row { grid-template-columns: 1fr; gap: 18px; }
}

/* "Why this site exists" — a claim on one side, its receipts on the other.

   It used to be a .note box, which is the same shape as an aside inside an
   article, so the site's one statement of position read as a footnote. More
   importantly it rested the site's credibility on counter experience. That is
   the wrong claim to lean on here: these articles are about American and
   European cars, written from outside those markets, and the thing that
   actually makes them trustworthy is that every figure is traceable. So the
   panel states the distance plainly and then shows what stands in its place. */
.why-site { border-top: 2px solid var(--heading); padding-top: 24px; }
.why-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.why-site h2 { font-size: 1.5rem; margin: 0 0 .45em; }
.why-site p { font-size: 15.6px; line-height: 1.62; margin: 0 0 .9em; }
.why-site p.why-soft { color: var(--muted); }

.why-list {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.why-item {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.why-item:last-child { border-bottom: 0; }
/* --accent-hov, not --accent: this sits on --surface rather than white, and
   18.5px bold is right on the large-text boundary rather than safely past it. */
.why-n {
  font-family: var(--display); font-weight: 700; font-size: 1.16rem;
  color: var(--accent-hov); letter-spacing: -.02em;
}
.why-l { font-size: 13.6px; line-height: 1.45; color: var(--muted); }
.why-l b { color: var(--text); font-weight: 650; }

@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 24px; } }

/* "New here? Start with these" — deliberately not a card grid.

   It used to be three cards identical to the Latest grid directly beneath it,
   which made it read as more feed rather than as a way in. Reading direction is
   what separates a block from its neighbour faster than color does, so this
   one runs down the page while Latest runs across it.

   Each row is the question a first-time visitor arrives with, answered in one
   sentence. Someone who never clicks has still been given something. */
/* No top rule of its own: .section-head above already draws the 2px heading
   rule, and a second one below the standfirst reads as a stray line. */
.start-qa { padding-top: 2px; }
.qa-row {
  display: block; padding: 20px 0;
  border-bottom: 1px solid var(--line); color: var(--text);
}
.qa-row:last-child { border-bottom: 0; }
.qa-row:hover { text-decoration: none; }
.qa-row:hover .qa-a { color: var(--accent); }
.qa-q {
  display: block;
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.1rem, 1.7vw, 1.24rem); line-height: 1.25; color: var(--heading);
}
/* The answer carries the accent, not the question: it is the part that is
   worth reading on its own, and color here marks payoff rather than heading.

   It takes --accent-hov rather than --accent because at 15px/600 this counts
   as normal text, and plain --accent measures 4.44:1 on white — just under the
   4.5 it needs. The hover then moves to --accent, which is a step in lightness
   in both themes rather than only a change of hue. */
.qa-a {
  display: block; margin-top: 9px;
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--accent-hov);
}
.qa-m { display: block; margin-top: 6px; font-size: 12.4px; color: var(--muted); }

/* Topic chips under the article, above the prev/next rail. Reuses .tag so
   they read as the same family as the category label at the top; the
   difference is only that there are several and they sit in a row. */
.article-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 34px 0 6px; padding-top: 18px; border-top: 1px solid var(--line);
}
.article-tags .tags-label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(3, 1fr);
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; gap: 22px; }
}

.card { display: flex; flex-direction: column; min-width: 0; }

/* Every cover is 1200x630, the size social previews want. Card frames use
   that same ratio so the branding baked into the corner never gets cropped
   off. Keep this in step with W/H in tools/make-images.py. */
.card-media {
  display: block; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  aspect-ratio: 1200 / 630;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.card:hover .card-media img { transform: scale(1.035); }

.card-body { padding-top: 13px; }

.card h3 {
  font-size: 1.16rem; margin: 0 0 .35em; line-height: 1.3;
}
.card h3 a { color: var(--heading); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }

.card-dek {
  color: var(--muted); font-size: 14.6px; margin: 0 0 .6em; line-height: 1.55;
}

/* Lead card at the top of the homepage. */
.card-lead h3 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.card-lead .card-dek { font-size: 1.02rem; }

/* Compact list used in the sidebar and under "Related". */
.card-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.card-row:last-child { border-bottom: 0; }
.card-row .card-media { border-radius: 7px; }
.card-row h3 { font-size: .99rem; margin: 0 0 .25em; line-height: 1.35; }

/* --------------------------------------------------------------------------
   Meta line: category, date, reading time
   -------------------------------------------------------------------------- */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.4px; color: var(--muted);
}
/* A hairline rather than a dot. Four facts sit on this row and a punctuation
   mark between them reads as more text; a rule reads as a gap. It also gives
   the tag's own underline something to align against. */
.meta .pipe {
  width: 1px; height: 11px; flex: none;
  background: var(--line-strong);
}
/* Still used by the article footer, which has no tag to sit beside. */
.meta .dot { opacity: .5; }

/* Section label, set the way print sets one: the word and a rule under it,
   no box. A filled pill competes with the headline directly beneath it, and
   the amber it was filled with is the same amber every link on the page uses.
   Dropping the fill hands that color back to the links. */
.tag {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--accent-line);
  padding: 2px 1px 3px;
}
a.tag:hover { border-bottom-color: var(--accent); text-decoration: none; }
/* Without a pill's own padding the label sits too close to the headline. */
.card .tag { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.section { padding: 46px 0; }
.section + .section { padding-top: 0; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
  padding-bottom: 12px; border-bottom: 2px solid var(--heading);
}
.section-head h2 { margin: 0; font-size: 1.4rem; }
.section-head .more { font-size: 14px; font-weight: 600; flex: none; }

.section-sub { color: var(--muted); margin: -12px 0 22px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Article page layout
   -------------------------------------------------------------------------- */
.layout {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  padding: 34px 0 60px;
}
/* A grid item defaults to min-width:auto, which means it refuses to shrink
   below its own min-content width. One table with a min-width was enough to
   push the whole article column to 460px inside a 375px phone — and because
   body carries overflow-x:hidden as a backstop, the document reported no
   overflow at all while the page was quietly panning sideways. The backstop
   hid the symptom; this removes the cause. */
.layout > * { min-width: 0; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 34px; } }

.sidebar { position: sticky; top: 88px; }
@media (max-width: 1000px) { .sidebar { position: static; } }

.side-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 22px; background: var(--surface);
}
.side-box h3 {
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  font-family: var(--sans); color: var(--muted); margin-bottom: 10px;
}

/* Sidebar rows: answer-led, no thumbnail. See the 'side' variant in site.js. */
.side-row {
  display: block; padding: 13px 0; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.side-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.side-row:hover { text-decoration: none; }
.side-row:hover .sr-t { color: var(--accent-hov); }
.side-row .sr-n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.22rem; line-height: 1.05; color: var(--accent); letter-spacing: -.02em;
}
.side-row .sr-n em {
  font-style: normal; font-family: var(--sans); font-size: 11px; font-weight: 650;
  color: var(--muted); margin-left: 5px; letter-spacing: .02em;
}
.side-row .sr-a {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .96rem; line-height: 1.25; color: var(--heading); letter-spacing: -.01em;
}
.side-row .sr-t {
  display: block; margin-top: 6px; font-size: 14px; line-height: 1.38;
  font-weight: 550; color: var(--text);
}
.side-row .sr-m { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* A link whose target is not published yet — see holdUnpublishedLinks() in
   site.js. Reads as plain prose until the article's release day. */
.link-held { color: inherit; }

.crumbs { font-size: 13px; color: var(--muted); padding: 18px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: .55; margin: 0 6px; }

/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */
.article-head { padding: 10px 0 6px; }
.article-head h1 { margin-bottom: .3em; }
.article-dek {
  font-size: 1.2rem; color: var(--muted); line-height: 1.5;
  margin: 0 0 18px; max-width: 62ch;
}

.byline {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 26px; font-size: 14px;
}
.byline .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--display); font-weight: 700; color: var(--accent);
}
.byline .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.byline b { color: var(--heading); }
.byline .byline-meta { color: var(--muted); font-size: 13px; }

.hero-figure { margin: 0 0 30px; }
/* Photographer and license, under the hero. Most of the photo library is
   CC BY or CC BY-SA and both require the credit to appear wherever the
   picture does — so this is a license condition, not a caption style. */
.hero-credit {
  font-size: 12.5px; color: var(--muted);
  padding-top: 7px; letter-spacing: .01em;
}
.hero-figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
figcaption { font-size: 13px; color: var(--muted); padding-top: 8px; }

.prose { font-size: 18px; line-height: 1.75; max-width: 72ch; }
.prose > h2 { margin-top: 1.9em; }
.prose > h3 { margin-top: 1.5em; font-size: 1.13rem; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--heading); }

.prose blockquote {
  margin: 1.7em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-family: var(--display); font-size: 1.2rem; line-height: 1.5;
  color: var(--heading);
}

/* Where first-hand shop experience goes. Deliberately loud — it is the one
   thing on this site a content farm cannot copy. */
/* The in-article side box.
   It used to be headed "From the counter" and written in the first person,
   which implied someone here had watched these things happen in a US or
   European workshop. Nobody had. The box now says where its material comes
   from instead: owner-filed complaints and public discussion, or nothing at
   all where the point is simply an argument. A box that names its source is
   worth more than a box that claims a story. */
.shop-note {
  margin: 1.9em 0;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 17px 20px;
  font-size: 16.5px;
}
.shop-note .box-label {
  margin: 0 0 .4em; font-family: var(--sans);
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.shop-note .provenance {
  margin: -.15em 0 .75em;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
  padding-bottom: .65em; border-bottom: 1px solid var(--accent-line);
}
.shop-note p:last-child { margin-bottom: 0; }

/* Tables scroll inside their own box. Without this the whole page shifts
   sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 460px; }
.prose th, .prose td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.prose th {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
}
.prose tbody tr:hover { background: var(--surface); }

/* Straight answer up top, for readers who came from a search result and
   want the number before the explanation. */
.answer-box {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; margin: 0 0 1.8em;
}
.answer-box .box-label {
  margin: 0 0 .45em; font-family: var(--sans); font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.answer-box p:last-child { margin-bottom: 0; }
.answer-box .big {
  font-family: var(--display); font-size: 1.7rem; color: var(--heading);
  line-height: 1.2; margin-bottom: .3em;
}

.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.8em 0; }
@media (max-width: 620px) { .verdict { grid-template-columns: 1fr; } }
.verdict > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.verdict h4 { margin: 0 0 .5em; font-family: var(--sans); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.verdict ul { margin: 0; padding-left: 1.15em; font-size: 15.5px; }
.verdict .pros h4 { color: #2e7d4f; }
.verdict .cons h4 { color: #b3402f; }
:root[data-theme="dark"] .verdict .pros h4 { color: #6bc48f; }
:root[data-theme="dark"] .verdict .cons h4 { color: #f0836f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .verdict .pros h4 { color: #6bc48f; }
  :root:not([data-theme="light"]) .verdict .cons h4 { color: #f0836f; }
}

.disclosure {
  font-size: 13px; color: var(--muted); font-style: italic;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2em;
}

/* Dated events in order.

   Where a subject has a history — a design introduced, complaints building,
   a regulator stepping in, the manufacturer responding — prose forces the
   reader to assemble the sequence themselves. A timeline hands it over. */
.timeline { margin: 1.9em 0; padding-left: 0; list-style: none; }
.timeline li {
  position: relative;
  padding: 0 0 22px 30px;
  border-left: 2px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
}
.timeline .when {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; color: var(--accent); letter-spacing: .01em;
  margin-bottom: 2px;
}
.timeline .what { font-size: 16.5px; }
.timeline li.now::before { background: var(--accent); }

/* Questions readers actually type, answered in two or three sentences.
   One article can then satisfy a dozen long-tail queries instead of one.
   Deliberately plain markup and no FAQPage schema — Google withdrew those
   rich results for most sites, so the value here is the wording, not markup. */
.faq { margin: 2.4em 0 0; }
.faq > h2 { margin-bottom: .6em; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 {
  font-size: 1.08rem; margin: 0 0 .4em;
  color: var(--heading);
}
.faq-item p { margin: 0; font-size: 16.5px; color: var(--text); }
.faq-item p + p { margin-top: .6em; }

/* Where the figures came from. Outbound citations are an E-E-A-T signal, so
   these are ordinary followed links — nofollow belongs on paid and sponsored
   links, not on the sources an article is built from. Link to primary
   documents, never to a site competing for the same search. */
.sources {
  margin: 2.4em 0 0; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.sources .box-label {
  margin: 0 0 .6em; font-family: var(--sans);
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.sources h2.box-label, .sources h3.box-label {
  font-weight: 700; line-height: 1.3;
}
.sources ol { margin: 0; padding-left: 1.25em; font-size: 14.4px; line-height: 1.55; }
.sources li { margin-bottom: .5em; }
.sources li:last-child { margin-bottom: 0; }
.sources .pub { color: var(--muted); }

/* --------------------------------------------------------------------------
   Ad slots

   Heights are reserved up front. An ad that loads late and shoves the
   article down is a layout shift, and layout shift costs ranking.
   -------------------------------------------------------------------------- */
/* Hidden until ads are real. site.js sets data-ads="live" from one
   constant; until then these reserve nothing and show nothing. Turning
   them on is a deliberate one-time change, so the layout shift that
   causes is not a CLS problem - it happens once, on purpose. */
.ad-slot { display: none; }

html[data-ads="live"] .ad-slot {
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  margin: 30px 0;
  overflow: hidden;
}
.ad-leader   { min-height: 96px; }
.ad-inline   { min-height: 262px; }
.ad-sidebar  { min-height: 604px; }
.ad-footer   { min-height: 96px; }
@media (max-width: 620px) {
  .ad-leader, .ad-footer { min-height: 106px; }
  .ad-inline { min-height: 292px; }
}

/* --------------------------------------------------------------------------
   Buttons and form fields
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 650;
  padding: 11px 22px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; background: var(--accent); color: var(--ink-btn-fg);
}
.btn:hover { background: var(--accent-hov); color: var(--ink-btn-fg); text-decoration: none; }
.btn-ghost { background: none; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }

.field {
  width: 100%; font: inherit; font-size: 16px;
  padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }

.search-form { display: flex; gap: 10px; margin-bottom: 28px; }
@media (max-width: 520px) { .search-form { flex-direction: column; } }

/* --------------------------------------------------------------------------
   Category and static pages
   -------------------------------------------------------------------------- */
.page-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.page-head-in { padding-top: 40px; padding-bottom: 40px; }
.page-head h1 { margin-bottom: .25em; }
.page-head p { color: var(--muted); max-width: 62ch; margin: 0; font-size: 1.08rem; }

.cat-strip {
  display: flex; gap: 9px; flex-wrap: wrap; padding: 18px 0 0;
}

/* Vertical only. This class sits on the same element as .wrap, and the
   padding shorthand would set left and right to zero — taking the page's
   20px side gutter with it and pushing every form field and card flush
   against the edge of a phone. Same trap .hero-in fell into once already:
   on anything that is also a .wrap, set padding-top and padding-bottom,
   never the shorthand. */
.static-page { padding-top: 34px; padding-bottom: 64px; }
.static-page h2 { margin-top: 1.8em; }
.static-page h2:first-child { margin-top: 0; }

.author-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
  align-items: start; margin-bottom: 34px;
}
@media (max-width: 560px) { .author-card { grid-template-columns: 1fr; } }
.author-photo {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--accent);
}
.author-photo img { width: 100%; height: 100%; object-fit: cover; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: 1fr; } }
.stat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 18px;
}
.stat .n { font-family: var(--display); font-size: 1.9rem; color: var(--heading); line-height: 1.1; }
.stat .l { font-size: 13px; color: var(--muted); margin-top: 4px; }

.note {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 15px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px; margin: 1.5em 0;
}
.note p:last-child { margin-bottom: 0; }

.empty {
  text-align: center; padding: 56px 20px; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 46px 0 30px;
  margin-top: 20px;
}
.foot-grid {
  display: grid; gap: 30px;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h4 {
  font-family: var(--sans); font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links a { color: var(--text); font-size: 14.5px; }
.foot-links a:hover { color: var(--accent); }
.foot-blurb { color: var(--muted); font-size: 14.5px; max-width: 42ch; margin: 12px 0 0; }
.foot-brand .mark { width: 27px; height: 27px; }
.foot-brand .wm { font-size: 1.2rem; }

.foot-legal {
  padding-top: 20px; font-size: 13px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Table of contents

   The wrapper reserves height before the script fills it, so the article
   below does not jump when the list appears. Articles with fewer than five
   sections have the wrapper removed entirely and lose the reserved space
   with it.
   -------------------------------------------------------------------------- */
/* Collapsed on a phone, so one row is all the space needed. On desktop the
   list is open and its height depends on how many sections the article has,
   so each page writes its own --toc-h inline. Guessing one number for every
   article would leave a gap on short ones and still shift the long ones. */
.toc { margin: 1.9em 0; min-height: 56px; }
@media (min-width: 761px) { .toc { min-height: var(--toc-h, 200px); } }

.toc-box {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  padding: 14px 20px;
}
.toc-box > summary {
  cursor: pointer; list-style: none;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::after {
  content: " +"; font-size: 14px;
}
.toc-box[open] > summary::after { content: " –"; }

.toc-box ol {
  margin: 12px 0 2px; padding-left: 1.3em;
  font-size: 15.6px; line-height: 1.5;
}
.toc-box li { margin-bottom: .42em; }
.toc-box a { color: var(--text); }
.toc-box a:hover { color: var(--accent); }

/* Anchored headings must not hide behind the sticky header. */
.prose > h2[id] { scroll-margin-top: 84px; }

/* --------------------------------------------------------------------------
   Section index

   Laid out like the contents page of a printed magazine: numerals, hairline
   rules and a dotted leader, rather than a grid of boxes. It reads as an
   established publication and, unlike a design built around headlines, it
   does not advertise how few articles sit behind each line.

   Accent colors match the cover artwork per category — keep in step with
   PALETTE in tools/make-images.py.
   -------------------------------------------------------------------------- */
.section-index { list-style: none; margin: 0; padding: 0; }

/* No rule on the first row — the section heading above already draws one,
   and two heavy lines with a gap between them looks like a mistake. */
.section-index li { border-bottom: 1px solid var(--line); }

/* Centered rather than baseline-aligned. With the number set this much
   larger than the label, sitting them on a shared baseline pushed all the
   slack to the top of the row and none to the bottom. Centering splits it
   evenly, and it keeps doing so if the number ever grows again. */
.section-index a {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 2px;
  color: var(--text);
}
.section-index a:hover { text-decoration: none; }

.si-num {
  flex: none; min-width: 58px;
  font-family: var(--display); font-size: 2.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* line-height 1 so the glyph box adds no space of its own above or below;
     the row's padding is then the only thing setting the gap. */
  line-height: 1;
  text-align: center;
  color: var(--tile-accent, var(--accent));
}

.si-icon {
  flex: none; width: 21px; height: 21px;
  color: var(--tile-accent, var(--accent));
  align-self: center;
}

.si-name {
  flex: none;
  font-family: var(--display); font-size: 1.42rem; font-weight: 700;
  color: var(--heading); line-height: 1.2;
}
.section-index a:hover .si-name { color: var(--accent); }

/* The dotted rule that carries the eye across to the numbers. */
.si-lead {
  flex: 1; min-width: 16px;
  border-bottom: 1px dotted var(--line-strong);
  /* Sits a touch under the middle so it runs beneath the label's x-height
     rather than straight through it. */
  transform: translateY(4px);
}

.si-meta { flex: none; font-size: 13.4px; color: var(--muted); }
.si-meta b { color: var(--text); font-weight: 600; }

/* On a phone the row needs two lines, and a wrapping flex row centers each
   item inside its own line — which left the number sitting against the top
   of the row rather than in the middle of it. A grid lets the number span
   both lines instead, so it centers against the full height. It also puts
   the meta line under the name automatically, which is what the hand-set
   left padding used to be faking. */
@media (max-width: 680px) {
  .section-index a {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "num icon name"
      "num icon meta";
    align-items: center;
    column-gap: 12px; row-gap: 3px;
    padding: 16px 2px;
  }
  .si-num  { grid-area: num;  align-self: center; min-width: 46px; font-size: 1.75rem; }
  .si-icon { grid-area: icon; }
  .si-name { grid-area: name; font-size: 1.18rem; align-self: end; }
  .si-meta { grid-area: meta; align-self: start; }
  .si-lead { display: none; }
}


/* The icon takes the tile's accent, so it matches the rule above it and the
   article thumbnails in that section. */


.cat-repair-costs     { --tile-accent: #2f6fa3; }
.cat-oil-and-fluids   { --tile-accent: #a86a0c; }
.cat-used-car-reviews { --tile-accent: #2f7d5c; }
.cat-symptoms         { --tile-accent: #b3402f; }
.cat-owner-guides     { --tile-accent: #5a4bb8; }

:root[data-theme="dark"] .cat-repair-costs     { --tile-accent: #5aa9e6; }
:root[data-theme="dark"] .cat-oil-and-fluids   { --tile-accent: #e9a63f; }
:root[data-theme="dark"] .cat-used-car-reviews { --tile-accent: #4fb286; }
:root[data-theme="dark"] .cat-symptoms         { --tile-accent: #e2705a; }
:root[data-theme="dark"] .cat-owner-guides     { --tile-accent: #9b8cf0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-repair-costs     { --tile-accent: #5aa9e6; }
  :root:not([data-theme="light"]) .cat-oil-and-fluids   { --tile-accent: #e9a63f; }
  :root:not([data-theme="light"]) .cat-used-car-reviews { --tile-accent: #4fb286; }
  :root:not([data-theme="light"]) .cat-symptoms         { --tile-accent: #e2705a; }
  :root:not([data-theme="light"]) .cat-owner-guides     { --tile-accent: #9b8cf0; }
}

/* --------------------------------------------------------------------------
   Previous / next article
   -------------------------------------------------------------------------- */
.prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
}
@media (max-width: 620px) { .prevnext { grid-template-columns: 1fr; } }

.pn-link {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 17px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); min-width: 0;
}
.pn-link:hover { text-decoration: none; border-color: var(--accent); background: var(--surface-2); }
.pn-next { text-align: right; }
.pn-dir {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.pn-title { font-family: var(--display); font-size: 1rem; color: var(--heading); line-height: 1.35; }
.pn-empty { display: none; }
@media (min-width: 621px) { .pn-empty { display: block; } }

/* --------------------------------------------------------------------------
   In-article images

   Photos are credited in the caption. The credit is plain text, not a link,
   so it cannot leak link equity or turn into a broken URL later.
   -------------------------------------------------------------------------- */
.prose figure { margin: 1.9em 0; }
.prose figure img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.prose figcaption {
  font-size: 13.4px; color: var(--muted); line-height: 1.5;
  padding-top: 9px;
}
.credit {
  display: block; font-size: 12.4px; color: var(--muted); opacity: .78;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Consent bar
   Sits above everything, but never covers the whole screen — a reader who
   ignores it can still read the article.
   -------------------------------------------------------------------------- */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.consent-bar.open { transform: translateY(0); }

.consent-in {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 22px;
}
.consent-text { flex: 1; min-width: 0; }
.consent-text strong { display: block; color: var(--heading); margin-bottom: 3px; }
.consent-text p { margin: 0; font-size: 14.4px; color: var(--muted); line-height: 1.5; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-actions .btn { padding: 9px 20px; font-size: 14.5px; }

@media (max-width: 700px) {
  .consent-in { flex-direction: column; align-items: stretch; gap: 13px; padding: 15px 18px; }
  .consent-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-head, .site-foot, .sidebar, .ad-slot, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
  .layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Calculators

   A tool answers a search a blog post can't: the visitor doesn't want to read,
   they want an answer about their own car. It also survives AI summaries in a
   way an article doesn't — a summary can describe a calculation, but it can't
   hand someone the working calculator.
   -------------------------------------------------------------------------- */
.calc {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); padding: 24px; margin: 0 0 28px;
}
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 620px) { .calc-row { grid-template-columns: 1fr; } }

.calc label { display: block; font-size: 13.5px; font-weight: 650; color: var(--heading); margin-bottom: 5px; }
.calc .hint { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

.calc-choice { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.calc-choice label {
  flex: 1; min-width: 150px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 11px 14px; cursor: pointer; background: var(--bg);
  font-weight: 550;
}
.calc-choice input { margin-right: 8px; accent-color: var(--accent); }
.calc-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }

/* The verdict. Color carries meaning, but never alone — each state also
   changes the wording, because a reader who cannot distinguish red from
   green still has to get the answer. */
.calc-out { margin-top: 4px; }
.verdict-card {
  border: 1px solid var(--line-strong); border-left: 5px solid var(--muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg); padding: 18px 20px;
}
.verdict-card.ok      { border-left-color: #2f7d5c; }
.verdict-card.soon    { border-left-color: #b07d12; }
.verdict-card.overdue { border-left-color: #b3402f; }
.verdict-card h3 { font-size: 1.3rem; margin: 0 0 .3em; }
.verdict-card p { margin: 0 0 .5em; font-size: 15.6px; }
.verdict-card p:last-child { margin-bottom: 0; }

.calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 0; }
@media (max-width: 620px) { .calc-figures { grid-template-columns: 1fr; } }
.calc-fig { border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; background: var(--surface); }
.calc-fig .n { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--heading); line-height: 1.15; }
.calc-fig .l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.calc-fig.lead { border-color: var(--accent); background: var(--accent-wash); }
.calc-fig.lead .n { color: var(--accent); }

/* The calculator's entry point on the home page.

   An ink band rather than another warm card. Everything around it — covers,
   answer boxes, the tag underline — is already amber, and one more amber
   panel just joins the queue. Dark reads as a break in the page.

   The colors are tokens because a band painted #12151a would all but vanish
   against the #0f1216 page the dark theme paints behind it. In dark mode it
   lifts instead of drops, which is the same idea reached from the other side.
   The band is dark in both themes, so its own text and button are fixed. */
:root {
  --band-bg:     #12151a;
  --band-line:   #12151a;
  --band-text:   #eef1f4;
  --band-muted:  #a8b2be;
  --band-btn:    #e9a63f;
  --band-btn-fg: #17130a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-bg: #1b212a; --band-line: #2c333d; }
}
:root[data-theme="dark"] { --band-bg: #1b212a; --band-line: #2c333d; }

.tool-band {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--band-bg); border: 1px solid var(--band-line);
  color: var(--band-text);
  border-radius: var(--radius); padding: 34px 32px;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.tool-band:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tool-band h2 {
  color: var(--band-text); margin: 7px 0 .3em;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.tool-band p { margin: 0; color: var(--band-muted); font-size: 15.5px; max-width: 52ch; }

.tool-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--band-btn);
}

.tool-go {
  flex: none;
  background: var(--band-btn); color: var(--band-btn-fg);
  font-weight: 700; font-size: 14.5px;
  padding: 12px 20px; border-radius: 8px; white-space: nowrap;
}
.tool-band:hover .tool-go { background: #f6bb5c; }

@media (max-width: 700px) {
  .tool-band { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px; }
}

/* The note shown when a verified engine is picked. It sits under the selector
   rather than beside it so it has room for a full sentence: why an interval
   changed matters more to a reader than the number it changed to. */
.preset-note {
  margin: 10px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 8px 8px 0;
  font-size: 15px; line-height: 1.55;
}
.preset-note strong { color: var(--heading); }