/* AutoMotor News design system. Read site/DESIGN.md before changing anything here.
   One file, no framework, no web fonts. Tokens first; components use only tokens. */

/* ------------------------------------------------------------------ 1. Tokens */
:root {
  color-scheme: light dark;
  /* Colour (light). Contrast on --bg: fg 16.6:1, text-2 11:1, muted 7:1, link 6.4:1. */
  --bg: #fbfaf8;
  --surface: #f3efe9;
  --surface-2: #ebe5dc;
  --fg: #1c1a17;
  --text-2: #3d3933;
  --muted: #5c564e;
  --line: #e2dcd2;
  --line-strong: #1c1a17;
  --accent: #a8321a;
  --accent-hover: #8a2814;
  --accent-ink: #fff;
  --link: #a8321a;
  --link-hover: #7a2311;
  --note-bg: #fbf3e2;
  --note-fg: #4d3a06;
  --note-line: #c99a2e;
  --focus: #1f5fbf;
  /* Charts: one series colour, a neutral for context. */
  --chart-1: #a8321a;
  --chart-2: #8b8378;
  --chart-grid: #e2dcd2;
  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-body: 1.125rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.625rem;
  --t-2xl: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  /* Space */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  /* Layout */
  --page: 72rem;
  --measure: 42rem; /* about 68 characters of body text */
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Contrast on --bg: fg 15.2:1, text-2 12:1, muted 7.3:1, link 8.1:1. */
    --bg: #151413;
    --surface: #211f1c;
    --surface-2: #2b2824;
    --fg: #ede9e3;
    --text-2: #d6d0c7;
    --muted: #aaa298;
    --line: #38342f;
    --line-strong: #ede9e3;
    --accent-hover: #c2432a;
    --link: #f0957c;
    --link-hover: #ffb8a5;
    --note-bg: #2e2715;
    --note-fg: #f3dfa6;
    --note-line: #9c7a2a;
    --focus: #8ab4ff;
    --chart-1: #e0765c;
    --chart-2: #7d766d;
    --chart-grid: #38342f;
  }
}

/* ------------------------------------------------------------------ 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: var(--t-md)/1.6 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; color: var(--fg); text-wrap: balance; }
h1 { font-size: var(--t-2xl); line-height: 1.12; margin: var(--s2) 0 var(--s3); letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); margin: var(--s6) 0 var(--s3); }
h3 { font-size: var(--t-lg); margin: var(--s5) 0 var(--s2); }
p, ul, ol { margin: 0 0 var(--s4); }
code { font: .9em var(--mono); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4); }
.narrow, .story, .policy { max-width: var(--measure); margin: 0 auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 10; padding: var(--s2) var(--s4); background: var(--accent); color: var(--accent-ink); font: 600 var(--t-sm) var(--sans); }
.skip:focus { left: 0; }
.muted, .dates { color: var(--muted); font-size: var(--t-sm); }

/* Kicker: the desk or story-type label. The one place the accent is used as text colour besides links. */
.kicker { margin: 0; font: 700 var(--t-xs)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--link); }

/* Buttons: one primary style, used for the VIN check and search. */
button, .button {
  display: inline-block; padding: .55rem 1.1rem; font: 600 var(--t-sm)/1.4 var(--sans);
  border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-ink); }
button:disabled { opacity: .6; cursor: progress; }
input[type="search"], input[type="text"] {
  min-width: 0; padding: .5rem .7rem; font: var(--t-md) var(--sans); color: var(--fg);
  background: var(--bg); border: 1px solid var(--muted); border-radius: var(--radius);
}

/* ------------------------------------------------------------------ 3. Site chrome */
.site-header { background: var(--bg); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--line); font-family: var(--sans); }
.header-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; justify-content: space-between; padding-top: var(--s4); padding-bottom: var(--s2); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); }
.brand-mark { display: block; width: 40px; height: 40px; border-radius: 9px; }
.wordmark { font: 700 1.5rem/1 var(--serif); letter-spacing: -.01em; }
.search { display: flex; gap: var(--s2); flex: 1 1 14rem; max-width: 22rem; }
.search input { flex: 1; }
.site-header .search input { padding: .4rem .7rem; font-size: var(--t-sm); border-color: var(--line); background: var(--surface); }
.site-header .search button { padding: .4rem .9rem; }
.site-nav ul, .footer-links, .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav ul { gap: 0 var(--s3); }
.site-nav a { display: block; padding: var(--s2) 0; border-bottom: 3px solid transparent; color: var(--fg); font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.site-nav a:hover { color: var(--link); }
.site-nav a[aria-current] { border-bottom-color: var(--accent); }
.crumbs { padding-top: var(--s4); font: var(--t-xs)/1.4 var(--sans); color: var(--muted); }
.crumbs ol { gap: var(--s1) var(--s2); max-width: var(--measure); margin: 0 auto; }
.crumbs a { display: inline-block; min-height: 24px; line-height: 24px; color: var(--muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s2); }
.crumbs span[aria-current] { display: inline-block; max-width: min(22rem, 45vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
main { flex: 1 0 auto; width: 100%; padding-top: var(--s5); padding-bottom: var(--s7); }

.banner { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); font: var(--t-sm)/1.45 var(--sans); background: var(--note-bg); color: var(--note-fg); border-left: 4px solid var(--note-line); border-radius: var(--radius); }
.banner-preview { margin: 0; border-radius: 0; border-left: 0; text-align: center; }
.draft-copy { font: italic var(--t-sm) var(--sans); color: var(--muted); }

.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s5); font: var(--t-sm)/1.55 var(--sans); color: var(--text-2); }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--link); }
.footer-grid { display: grid; gap: var(--s5); }
.footer-name { font: 700 var(--t-lg) var(--serif); color: var(--fg); margin-bottom: var(--s2); }
.footer-links { gap: var(--s2) var(--s5); }
.footer-legal p { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); }

/* ------------------------------------------------------------------ 4. Article */
.story-header { padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.dek { font: 400 var(--t-lg)/1.45 var(--serif); color: var(--text-2); margin: 0 0 var(--s4); }
.byline { margin: 0; font: var(--t-sm)/1.5 var(--sans); color: var(--text-2); }
.byline a { color: var(--fg); font-weight: 600; }
.byline .reviewer { color: var(--fg); font-weight: 600; }
.story-header .dates { margin: var(--s1) 0 0; }
.story p, .story li, .policy p, .policy li { font-size: var(--t-body); line-height: 1.65; }
.story section > h2, .policy h2 { padding-top: var(--s1); }
.story ul, .story ol, .policy ul { padding-left: 1.3rem; }
.story li, .policy li { margin-bottom: var(--s2); }
.lead-image { margin: 0 0 var(--s5); }
.lead-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); border-radius: var(--radius); }
.lead-image figcaption, .credit { font: var(--t-xs)/1.4 var(--sans); color: var(--muted); }
.lead-image figcaption { margin-top: var(--s2); }
.cite { font: 600 .7rem var(--sans); text-decoration: none; vertical-align: super; }

/* Callouts. One shape (surface panel, 4px left rule, sans label); the rule colour carries meaning:
   accent = answer/action, ink = human voice, amber = disclosure or warning. */
.quick-answer, .verdict, .cta, .human-note, .disclosure, .vin-disclaimer, .empty-state, .vin-nojs {
  margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--surface);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.quick-answer h2, .verdict h2, .human-note h2, .facts h2 {
  margin: 0 0 var(--s2); font: 700 var(--t-xs)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.quick-answer p, .verdict p { font: var(--t-lg)/1.5 var(--serif); margin: 0; }
.cta p, .disclosure p, .empty-state p:last-child { margin: 0; }
.cta { font-family: var(--sans); }
.cta p { font-size: var(--t-md); }
.disclosure, .sponsored-line { background: var(--note-bg); color: var(--note-fg); border-left-color: var(--note-line); font: var(--t-sm)/1.5 var(--sans); }
.disclosure a { color: inherit; }
.human-note { border-left-color: var(--line-strong); }
.human-note blockquote { margin: 0; }
.human-note blockquote p { font: italic var(--t-lg)/1.55 var(--serif); }
.human-note-by { margin: 0; font: var(--t-xs) var(--sans); color: var(--muted); }
.empty-state { border-left-color: var(--line); font-family: var(--sans); }

/* Key facts: a labelled panel of fact rows, two columns on wide screens. */
.facts { margin: var(--s5) 0; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); }
.facts dl { margin: 0; display: grid; gap: 0 var(--s5); }
.facts dl > div { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.facts dt { font: 700 var(--t-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.facts dd { margin: var(--s1) 0 0; font: var(--t-md)/1.5 var(--sans); }
.facts ul { padding-left: 1.2rem; font-family: var(--sans); }

/* Tables: sans, zebra rows, scroll sideways inside their own box on small screens. */
.table-scroll { overflow-x: auto; margin: var(--s4) 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font: var(--t-sm)/1.45 var(--sans); font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: var(--s3) var(--s3) var(--s2); font-weight: 600; color: var(--text-2); }
th, td { text-align: left; padding: var(--s2) var(--s3); vertical-align: top; }
thead th { background: var(--surface-2); border-bottom: 2px solid var(--line-strong); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
tbody tr:nth-child(even) { background: var(--surface); }
tbody th { font-weight: 600; }

/* Charts (charts.py): inline SVG, colours from tokens so dark mode follows. */
.chart { margin: var(--s6) 0; }
.chart-title { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.35 var(--sans); }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-bar { fill: var(--chart-1); }
.chart-bar:hover { fill: var(--fg); }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--chart-2); stroke-width: 1; }
.chart-tick, .chart-value, .chart-axis-title { font: 12px var(--sans); fill: var(--muted); }
.chart-value { fill: var(--fg); font-weight: 600; }
.chart figcaption { font: var(--t-xs)/1.5 var(--sans); color: var(--muted); margin-top: var(--s2); }
.chart-data summary { margin-top: var(--s2); font: 600 var(--t-sm) var(--sans); color: var(--link); cursor: pointer; }

/* End matter: AI note, Zilocar credit, sources, related, corrections. Small sans, ruled off. */
.ai-note, .credit-note { margin: var(--s6) 0 0; padding: var(--s3) var(--s4); font: var(--t-sm)/1.5 var(--sans); color: var(--text-2); background: var(--surface); border-radius: var(--radius); }
.story .ai-note, .story .credit-note { font-size: var(--t-sm); }
.credit-note + .ai-note { margin-top: var(--s2); }
.sources, .related, .corrections, .data-files, .method { font-family: var(--sans); }
.sources h2, .related h2, .corrections h2, .data-files h2 { font-size: var(--t-lg); padding-top: var(--s4); border-top: 1px solid var(--line); }
.story .sources li, .story .corrections li, .story .related li, .story .data-files li { font-size: var(--t-sm); line-height: 1.5; }
.sources ol { padding-left: 1.6rem; }
.sources li { overflow-wrap: anywhere; }
.sources li:target { background: var(--note-bg); }
.sources .kind { color: var(--muted); }
.related ul { list-style: none; padding: 0; }
.related li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.related a { font: 600 var(--t-md)/1.35 var(--serif); text-decoration: none; }
.related a:hover { text-decoration: underline; }
.ownership-note { font: var(--t-xs) var(--sans); color: var(--muted); }

/* ------------------------------------------------------------------ 5. Lists of stories */
.page-header { max-width: var(--measure); margin: 0 auto var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5) var(--s6); }
.card { padding-top: var(--s3); border-top: 1px solid var(--line); }
.card-title { margin: var(--s1) 0 var(--s2); font-size: var(--t-lg); line-height: 1.25; }
.card-title a { color: var(--fg); text-decoration: none; }
.card-title a:hover { color: var(--link); text-decoration: underline; }
.card-dek { margin: 0 0 var(--s2); color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }
.card-meta { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.cards-list { gap: 0; }
.cards-list .card { padding: var(--s3) 0; }
.cards-desk, main > .empty-state { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.cards.cards-desk, .cards.cards-list { grid-template-columns: 1fr; }
.cards-desk .card-title { font-size: var(--t-xl); }

/* Homepage */
.home-top { padding-top: var(--s3); display: grid; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--line-strong); }
.lead-title { margin: var(--s2) 0 var(--s3); font-size: var(--t-2xl); line-height: 1.12; }
.lead-title a { color: var(--fg); text-decoration: none; }
.lead-title a:hover { color: var(--link); text-decoration: underline; }
.lead-story .dek { max-width: var(--measure); }
.vin-promo { align-self: start; padding: var(--s5); background: var(--surface); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); font-family: var(--sans); }
.vin-promo h2 { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.vin-promo p:last-child { margin: 0; }
.home-section { margin-top: var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); border-bottom: 2px solid var(--line-strong); }
.section-head h2 { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.more { font: 600 var(--t-sm) var(--sans); white-space: nowrap; }
.section-blurb, .section-empty { color: var(--text-2); }
.research-block { padding: var(--s5); background: var(--surface); border-radius: var(--radius); }
.research-block .card { border-top-color: var(--surface-2); }

/* ------------------------------------------------------------------ 6. Tools: search, VIN check */
.search-page { max-width: none; margin-bottom: var(--s4); flex-wrap: wrap; }
.search-page label { flex-basis: 100%; font-weight: 600; }
.search-results { padding-left: 1.4rem; }
.search-results li { margin-bottom: var(--s4); }
.search-title { margin: 0 0 var(--s1); font-size: var(--t-lg); }
.search-results p { margin: 0 0 var(--s1); }

.vin-form { margin: var(--s5) 0; padding: var(--s5); background: var(--surface); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); }
.vin-form label { display: block; font: 700 var(--t-md) var(--sans); }
.vin-form .muted { margin: var(--s1) 0 var(--s3); }
.vin-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.vin-row input { flex: 1 1 14rem; padding: .6rem .7rem; font: 1.125rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.vin-row input[aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }
.vin-row button { padding: .6rem 1.4rem; font-size: var(--t-md); }
.vin-error, .vin-warn { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); font: var(--t-sm)/1.5 var(--sans); background: var(--note-bg); color: var(--note-fg); border-left: 4px solid var(--note-line); border-radius: 0 var(--radius) var(--radius) 0; }
.vin-error a, .vin-warn a { color: inherit; }
.vin-results:focus { outline: none; }
.vin-results dl { margin: 0 0 var(--s4); }
.vin-results dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font: var(--t-sm)/1.45 var(--sans); }
.vin-results dt { font-weight: 700; color: var(--muted); }
.vin-results dd { margin: 0; }
.vin-recall-list { list-style: none; padding: 0; }
.vin-recall { margin-bottom: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.vin-recall h3 { margin-top: 0; font-size: var(--t-md); }
.vin-disclaimer { border-left-color: var(--note-line); font: var(--t-sm)/1.5 var(--sans); }
.sponsored-line { margin: var(--s5) 0; padding: var(--s3) var(--s4); border-left: 4px solid var(--note-line); border-radius: 0 var(--radius) var(--radius) 0; }
.sponsored-line .kicker { display: inline; margin-right: var(--s2); color: inherit; }
.vin-about li { font-size: var(--t-md); margin-bottom: var(--s2); }

/* ------------------------------------------------------------------ 7. Breakpoints, print */
@media (max-width: 24rem) {
  .site-nav a { font-size: .875rem; }
  .wordmark { font-size: 1.3rem; }
}
@media (min-width: 48rem) {
  .wrap { padding: 0 var(--s5); }
  .site-nav ul { gap: 0 var(--s5); }
  .facts dl { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 3fr 2fr; }
}
@media (min-width: 64rem) {
  .home-top { grid-template-columns: 2fr 1fr; gap: var(--s6); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* Wide tables break out of the text measure, centred on it. */
  .story .table-scroll { --w: min(60rem, 100vw - 3rem); width: var(--w); margin-left: calc((100% - var(--w)) / 2); }
}
@media print {
  .site-header form, .site-nav, .skip, .cta, .vin-promo, .site-footer nav { display: none; }
  body { background: #fff; color: #000; }
}