/* ==========================================================================
   microcarfan.com: "Little Wonders"
   One stylesheet for every page. No JavaScript. The contract is design/DESIGN.md.
   Order: fonts, tokens, base, label voice, chrome, atoms, home, profile, pictures,
   data blocks, theme, indexes, motion, print.
   Layout answers to slot containers (@container slot, rem); viewport queries (em) are page chrome only.
   ========================================================================== */

/* ---------- 1. Fonts: five static OFL subsets, about 110 KB in all ---------- */
@font-face { font-family: "Bricolage Display"; src: url("/assets/fonts/bricolage-display.34d94824.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/assets/fonts/bricolage-label.102d1e7e.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("/assets/fonts/fraunces-400.1ed766e3.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("/assets/fonts/fraunces-650.39307802.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("/assets/fonts/fraunces-italic.51f64781.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

/* ---------- 2. Tokens. Theme logic lives here and nowhere else:
   every colour that changes with the scheme is a light-dark() pair, so
   `color-scheme` (the OS, a forced wrapper, or print) flips them all. ---------- */
:root {
  color-scheme: light dark;

  /* surfaces and ink */
  --paper:   light-dark(#fff8ec, #17121f);
  --paper-2: light-dark(#fcedd3, #211a2c);
  --card:    light-dark(#fffdf8, #221b2e);
  --ink:     light-dark(#211a30, #fff3e0);
  --ink-2:   light-dark(#5a4e66, #cdbfd8);
  --rule:    light-dark(#e6d3b3, #3d3249);
  --shadow-c: light-dark(rgb(33 26 48 / 0.42), rgb(0 0 0 / 0.7));
  --accent:  light-dark(#cc3219, #ff7a50);     /* tomato: the wordmark, the hero's "wonders.", A–Z letters */
  --on-accent: light-dark(#ffffff, #1c1528);
  --kei:     #ffd94a;                          /* kei number-plate yellow: year plates, hover, focus halo */
  --on-paint: #1c1528;                         /* any text on an era paint or on the kei yellow */

  /* dark enamel: the spec plate, the footer and the enlarged view (light ink in print) */
  --plate-bg:   light-dark(#1c1528, #2a2238);
  --plate-ink:  #fff3e0;
  --plate-soft: #e8dccb;
  --plate-line: rgb(255 243 224 / 0.2);
  --footer-bg:  light-dark(#1c1528, #0f0b15);

  /* seven era paints (fills) and deeps (text-safe on paper and on the wash) */
  --e1-paint: #ff7a50; --e1-deep: light-dark(#a8331a, #ff7a50);   /* Bédélia vermilion */
  --e2-paint: #f7b928; --e2-deep: light-dark(#855700, #f7b928);   /* Seven mustard     */
  --e3-paint: #a6cf7e; --e3-deep: light-dark(#3b6620, #a6cf7e);   /* ration sage       */
  --e4-paint: #5dd3c8; --e4-deep: light-dark(#0a6762, #5dd3c8);   /* Isetta aqua       */
  --e5-paint: #82b5ff; --e5-deep: light-dark(#1f55b2, #82b5ff);   /* kei sky           */
  --e6-paint: #d3a6f5; --e6-deep: light-dark(#6e36a6, #d3a6f5);   /* sans-permis lilac */
  --e7-paint: #cdea52; --e7-deep: light-dark(#496300, #cdea52);   /* volt lime         */

  /* type */
  --f-display: "Bricolage Display", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --f-label: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --f-text: "Fraunces Soft", "Iowan Old Style", Georgia, serif;
  --track-label: 0.12em;                      /* the one tracking of the uppercase label voice */
  --step--3: 0.7rem;                          /* micro labels: ribbon years, ruler, draft tag, dial unit */
  --step-lane: clamp(0.66rem, 2.6cqi, 0.95rem); /* size-comparison labels: scale with the stage (cqi resolves at the use site) */
  --step--2: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.4rem, 1.24rem + 0.8vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.3vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.6rem + 3vw, 4.4rem);
  --step-5:  clamp(2.7rem, 1.5rem + 6vw, 8rem);
  --step-6:  clamp(3.4rem, 1.2rem + 11vw, 13rem);

  /* space and frame */
  --s-1: 0.25rem; --s0: 0.5rem; --s1: 0.75rem; --s2: 1rem; --s3: 1.5rem;
  --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 36rem;
  --wide: 82rem;
  --max: 110rem;

  /* bubble geometry */
  --r-s: 0.6rem;
  --r-m: 1.25rem;
  --r-l: 2rem;
  --r-pill: 999px;
  --r-canopy: clamp(4rem, 14vw, 11rem) clamp(4rem, 14vw, 11rem) var(--r-m) var(--r-m);
  --line: 2px solid var(--ink);
  --shadow: 0 10px 30px -14px var(--shadow-c);
  --ease: cubic-bezier(.2, .9, .25, 1.15);

  /* scale: every yardstick is a 0–3,500 mm track; the red notch is a Fiat Nuova 500 */
  --track-mm: 3500;
  --fiat-mm: 2970;

  /* default era (pages outside an era) */
  --paint: var(--e4-paint);
  --deep: var(--e4-deep);
}
.era-1 { --paint: var(--e1-paint); --deep: var(--e1-deep); }
.era-2 { --paint: var(--e2-paint); --deep: var(--e2-deep); }
.era-3 { --paint: var(--e3-paint); --deep: var(--e3-deep); }
.era-4 { --paint: var(--e4-paint); --deep: var(--e4-deep); }
.era-5 { --paint: var(--e5-paint); --deep: var(--e5-deep); }
.era-6 { --paint: var(--e6-paint); --deep: var(--e6-deep); }
.era-7 { --paint: var(--e7-paint); --deep: var(--e7-deep); }
/* derived from the era paint wherever it is set: the wash (light tint) and the band (an opening's fill,
   a little deeper at night so it does not glare on night paper) */
:root, .era-1, .era-2, .era-3, .era-4, .era-5, .era-6, .era-7 {
  --wash: light-dark(color-mix(in oklab, var(--paint) 22%, var(--paper)), color-mix(in oklab, var(--paint) 14%, var(--paper)));
  --band: light-dark(var(--paint), color-mix(in oklab, var(--paint) 90%, var(--paper)));
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* hyphenate-limit-chars is inherited, so it holds wherever hyphenation is on: words of 7 letters or more, 4 letters
   before the break and 3 after. Chrome counts trailing punctuation in the word (",", "”:"), hence 8 and 4: with 3 before,
   "sau-cer”:" broke. Safari takes the 4 and 3 from its own properties and has no word-length minimum. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem;
  hyphenate-limit-chars: 8 4 3; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3;
  @media (min-width: 120em) { font-size: 118%; }
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: var(--step-0); line-height: 1.6;
  overflow-x: clip; font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--kei); border-radius: 4px; }
table { border-collapse: collapse; }
figure { margin: 0; }
cite { font-style: italic; }
figcaption, .stop__hook, .card p, .gallery__cap { hyphens: auto; }
@container slot (max-width: 35.99rem) { .prose { hyphens: auto; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nobr { white-space: nowrap; }
/* a name that must never break inside a word: the build gives --w, its longest word's width in em (from the font's
   advances); the name shrinks below its role size only when that word would not fit the box it sits in */
.fit { display: block; container-type: inline-size; hyphens: manual; }
.fit > span { display: block; font-size: min(1em, calc(100cqi / var(--w, 1))); }
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 60;
  background: var(--kei); color: var(--on-paint); padding: var(--s0) var(--s2);
  border-radius: var(--r-pill); font-family: var(--f-label); font-weight: 700;
}
.skip-link:focus { top: var(--s0); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.wrap--max { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.num { font-family: var(--f-label); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 4. The label voice: one declaration for every uppercase catalogue label ---------- */
.label, .draft, .crumbs, .chip, .era__num, .home-hero__facts li, .disc__label, .disc__sub, .plate__sub, .plate dt,
.plate__missing b, .dial span, .table thead th, .table--stack td::before, .specs h3, .kv th, .trust, .points li::before,
.card__rel, .gallery__group h3, .fig__no, .tally__band span, .milestone__year small {
  font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); line-height: 1.3;
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.label { color: var(--ink-2); margin: 0; }
.draft { display: inline-block; font-size: var(--step--3); border: 1.5px dashed currentColor; border-radius: var(--r-pill); padding: 0.1em 0.7em; margin: 0 0 var(--s1); }

/* ---------- 5. Chrome: masthead, menu, crumbs, footer ---------- */
.masthead { position: relative; z-index: 20; background: var(--paper); border-bottom: var(--line); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 4rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.12em; text-decoration: none; line-height: 1;
  font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); letter-spacing: -0.02em;
}
.wordmark__fan {
  display: inline-block; background: var(--accent); color: var(--on-accent); font-family: var(--f-label); font-weight: 700;
  padding: 0.12em 0.42em 0.16em; border-radius: var(--r-pill); font-size: 0.74em; rotate: -4deg; margin-left: 0.1em;
}
.nav { display: flex; align-items: center; gap: var(--s1); }
.nav__links { display: none; gap: var(--s0); list-style: none; margin: 0; padding: 0; }
.nav__links a, .menu > summary {
  display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none;
  font-family: var(--f-label); font-weight: 700; font-size: var(--step--1);
  padding: 0.5em 1em; border-radius: var(--r-pill); border: 2px solid transparent;
}
.nav__links a:hover { border-color: var(--ink); }
.nav__links a[aria-current] { background: var(--ink); color: var(--paper); }
.menu { position: relative; }
.menu > summary, summary.chip { list-style: none; cursor: pointer; }         /* summaries drawn as controls: no marker */
.menu > summary::-webkit-details-marker, summary.chip::-webkit-details-marker { display: none; }
.menu > summary { border-color: var(--ink); background: var(--card); }
.menu > summary::after { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); transition: scale 0.25s var(--ease); }
.menu[open] > summary { background: var(--ink); color: var(--paper); }
.menu[open] > summary::after { scale: 1.5; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(100vw - 2 * var(--gutter), 34rem);
  background: var(--card); border: var(--line); border-radius: var(--r-l); padding: var(--s3);
  box-shadow: var(--shadow); display: grid; gap: var(--s3);
}
.menu__panel .label { margin-bottom: var(--s0); }
.menu__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.menu__panel a { display: inline-block; text-decoration: none; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); padding: 0.35em 0.85em; border-radius: var(--r-pill); background: var(--paper-2); }
.menu__panel a:hover, a.chip:hover, summary.chip:hover, .ref:hover, .lightbox__bar a:hover, .lightbox__nav a:hover,
.prevnext a:hover, .az-jump a:hover, .kinds a:hover { background: var(--kei); color: var(--on-paint); } /* the kei hover, in one place */
.menu__panel .menu__eras a { background: none; border: 2px solid var(--paint); }
.menu__primary { flex-direction: column; }
.menu__primary a { font-family: var(--f-display); font-weight: 800; font-size: var(--step-1); background: none; padding-left: 0; }
@media (min-width: 64em) { .nav__links { display: flex; } .menu__primary-group { display: none; } }

.crumbs { color: var(--ink-2); padding-block: var(--s2) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; }
.crumbs li + li::before { content: "→"; margin-right: 0.4em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.footer { margin-top: var(--s7); background: var(--footer-bg); color: var(--plate-ink); }
.footer__paint { display: grid; grid-template-columns: repeat(7, 1fr); height: 0.6rem; }
.footer__paint i:nth-child(1) { background: var(--e1-paint); } .footer__paint i:nth-child(2) { background: var(--e2-paint); }
.footer__paint i:nth-child(3) { background: var(--e3-paint); } .footer__paint i:nth-child(4) { background: var(--e4-paint); }
.footer__paint i:nth-child(5) { background: var(--e5-paint); } .footer__paint i:nth-child(6) { background: var(--e6-paint); }
.footer__paint i:nth-child(7) { background: var(--e7-paint); }
.footer__grid { display: grid; gap: var(--s4); padding-block: var(--s5); }
@media (min-width: 48em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer .wordmark { font-size: var(--step-5); }
.footer .wordmark__fan { color: var(--on-paint); background: var(--kei); }
.footer p { font-size: var(--step--1); color: var(--plate-soft); max-width: 28rem; }
.footer .label { color: var(--kei); margin-bottom: var(--s1); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.footer ul a { font-family: var(--f-label); font-weight: 700; text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.footer :focus-visible { outline-color: var(--plate-ink); }
.era__open :focus-visible, .theme-hero :focus-visible { outline-color: var(--on-paint); } /* on a painted band the ring is ink in both schemes */
.footer__small { border-top: 1px solid var(--plate-line); padding-block: var(--s2); font-family: var(--f-label); font-size: var(--step--2); color: var(--plate-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1); }

/* ---------- 6. Atoms: chips, year plate, tax disc, roundel, yardstick, source marks ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; padding: 0.38em 0.9em 0.34em; border-radius: var(--r-pill); border: 1.5px solid currentColor; }
.chip--paint { background: var(--paint); color: var(--on-paint); border-color: var(--paint); }
.chip--fill { background: var(--ink); color: var(--paper); border-color: var(--ink); }
a.chip:hover, summary.chip:hover { border-color: var(--on-paint); }
summary.chip::after { content: "+"; } /* a chip that opens a <details>: + when closed, − when open */
[open] > summary.chip::after { content: "−"; }

/* the year as a kei number plate */
.yearplate {
  display: inline-block; font-family: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em; line-height: 1.15; background: var(--kei); color: var(--on-paint);
  border: 2px solid var(--on-paint); border-radius: 0.35rem; padding: 0.05em 0.42em 0.08em;
  box-shadow: inset 0 0 0 1.5px var(--kei), inset 0 0 0 2.5px var(--on-paint);
}

/* tax disc: the build years on every profile hero. Text is sized in container units so it always fits. */
.disc {
  --size: clamp(6.5rem, 18vw, 9.5rem);
  container-type: inline-size;
  width: var(--size); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1cqi;
  background: radial-gradient(circle, transparent 63%, var(--paint) 63.5% 68%, transparent 68.5%), var(--card);
  border: 3px dotted var(--ink); outline: 2px solid var(--ink); outline-offset: 3px;
  color: var(--ink); rotate: -8deg; box-shadow: var(--shadow);
}
.disc__label { font-size: 7.2cqi; }
.disc__years { font-family: var(--f-display); font-size: 17cqi; line-height: 0.92; font-variant-numeric: tabular-nums; }
.disc__sub { font-size: 6.4cqi; max-width: 60cqi; margin-inline: auto; }

/* enamel roundel: the monogram when there is no free picture (never a drawing) */
.mono {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--paint); color: var(--on-paint); line-height: 1;
  box-shadow: inset 0 0 0 0.28em var(--paint), inset 0 0 0 0.38em var(--on-paint);
  font-family: var(--f-display); font-weight: 800;
}

/* yardstick: a length on the shared 0–3.5 m track; the red notch is a Fiat 500 */
.yard {
  --l: 0;
  position: relative; display: block; height: 0.8rem; border-radius: var(--r-pill);
  background: repeating-linear-gradient(to right, color-mix(in oklab, var(--ink) 22%, transparent) 0 1px, transparent 1px calc(100% / 7)), var(--paper-2);
}
.yard::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: min(100%, calc(var(--l) / var(--track-mm) * 100%));
  background: var(--paint); border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  animation: drive-in 0.9s var(--ease) both;
}
.yard::after { content: ""; position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; border-radius: 2px; left: calc(var(--fiat-mm) / var(--track-mm) * 100%); background: var(--accent); }
.yard--unknown { background: none; }
.yard--unknown::before { width: 100%; top: 50%; bottom: auto; height: 0; border: 0; border-top: 2px dotted var(--ink-2); background: none; animation: none; }
@keyframes drive-in { from { width: 0; } }

/* source marks in text: small numbered roundels */
.ref {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding-inline: 0.25em;
  margin-left: 0.15em; vertical-align: 0.45em; border-radius: var(--r-pill); background: var(--paper-2);
  font-family: var(--f-label); font-weight: 700; font-size: 0.62em; line-height: 1; text-decoration: none; color: var(--deep);
}

/* ---------- 7. Home: hero, era ribbon, era openings, the road ---------- */
.home-hero { padding-block: var(--s4) var(--s3); }
.hero-grid { display: grid; gap: var(--s3) var(--s5); align-items: end; }
@container slot (min-width: 64rem) { .home-hero { padding-block: var(--s5) var(--s4); } .hero-grid { grid-template-columns: 1.35fr 1fr; } }
.home-hero__title { font-size: var(--step-6); line-height: 0.82; letter-spacing: -0.03em; }
.home-hero__title .pop { color: var(--accent); }
.home-hero__lede { font-size: var(--step-1); line-height: 1.45; max-width: 34rem; margin: var(--s3) 0 0; }
.home-hero__facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.home-hero__facts li { color: var(--ink-2); }
.home-hero__facts b { display: block; font-family: var(--f-display); font-size: var(--step-3); color: var(--ink); letter-spacing: 0; line-height: 1; text-transform: none; }
.hero-side { display: grid; gap: var(--s3); }
.bubble-row { list-style: none; margin: 0; padding: 0 0 0.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2%; border-bottom: 3px solid var(--ink); }
.bubble-row li { flex: 0 0 calc(var(--l) / 10400 * 100%); display: grid; gap: 0.3rem; justify-items: center; text-align: center; }
.bubble-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--ink); }
.bubble-row span { font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); line-height: 1.1; }
.bubble-row b { display: block; color: var(--deep); }
.key { display: grid; gap: var(--s0); max-width: 30rem; }
.key p { font-size: var(--step--1); line-height: 1.45; margin: 0; color: var(--ink-2); }
.key .yard { height: 1rem; }

/* the era ribbon: sticky jump links, paint as a tab, ink on paper */
.ribbon { position: sticky; top: 0; z-index: 15; background: var(--paper); border-block: var(--line); }
.ribbon ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ribbon a {
  display: grid; align-content: center; gap: 0.1em; min-height: 3rem; padding: 0.35rem 0.25rem;
  text-decoration: none; text-align: center; font-family: var(--f-label); line-height: 1.05;
  border-top: 0.45rem solid var(--paint); border-right: 1px solid var(--rule);
}
.ribbon li:last-child a { border-right: 0; }
.ribbon a:hover { background: var(--wash); }
.ribbon__years { font-weight: 700; font-size: var(--step--3); font-variant-numeric: tabular-nums; }
.ribbon__name { display: none; font-weight: 700; font-size: var(--step--2); color: var(--ink-2); }
@media (min-width: 30em) { .ribbon__years { font-size: var(--step--1); } }
@media (min-width: 64em) { .ribbon a { text-align: left; padding-inline: 0.75rem; } .ribbon__name { display: block; } }

/* an era opening: the band is the opening, not the page */
.era__open { background: var(--band); color: var(--on-paint); border-bottom: var(--line); position: relative; overflow: hidden; padding-block: var(--s4) var(--s3); }
.era__open::after { /* the bubble: a translucent canopy rising behind the name */
  content: ""; position: absolute; right: -10vw; bottom: -45%; width: min(60vw, 40rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.4), transparent 58%);
  border: 2px solid color-mix(in oklab, var(--on-paint) 22%, transparent); pointer-events: none;
}
.era__grid { display: grid; gap: var(--s2) var(--s5); position: relative; z-index: 1; }
@container slot (min-width: 64rem) { .era__open { padding-block: var(--s5) var(--s4); } .era__grid { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.era__num { margin: 0 0 var(--s0); }
.era__name { font-size: var(--step-5); line-height: 0.86; letter-spacing: -0.025em; }
.era__intro { font-size: var(--step--1); line-height: 1.55; max-width: 38rem; }
.era__intro p:last-of-type { margin-bottom: 0; }
.era__stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--s1) 0 0; padding: 0; list-style: none; }
.era__stats li { font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); border-radius: var(--r-pill); padding: 0.3em 0.8em; border: 1.5px solid var(--on-paint); }
@container slot (min-width: 48rem) { .era__intro { font-size: var(--step-0); } }

/* The road. In a slot under 80rem: one dense row per car on a vertical road (two columns of rows from 48rem).
   From an 80rem slot: the road turns horizontal and runs along the tops of rows of cards. */
.road { list-style: none; margin: 0 auto; padding: var(--s2) 0 var(--s4); isolation: isolate; }
@container slot (min-width: 48rem) and (max-width: 79.99rem) { .road { columns: 2; column-gap: var(--s5); } }
.stop, .milestone { position: relative; break-inside: avoid; }
.stop {
  display: grid; align-items: center; column-gap: 0.6rem;
  grid-template-columns: 3.4rem 2.5rem minmax(0, 1fr) 4.25rem;
  grid-template-areas: "year pic name len" "year pic meta yard";
  padding-block: 0.4rem; border-bottom: 1px solid var(--rule);
}
.stop::before, .milestone::before { /* this row's stretch of the road */
  content: ""; position: absolute; top: 0; bottom: -1px; left: 1.45rem; width: 0.5rem; z-index: -1;
  background: repeating-linear-gradient(to bottom, var(--paper) 0 0.7rem, transparent 0.7rem 1.4rem) center / 2px 100% no-repeat, var(--ink);
}
.stop__year { grid-area: year; justify-self: center; font-size: var(--step--3); }
.stop__pic { grid-area: pic; width: 2.5rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); font-size: var(--step--1); }
.stop .mono { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 0.2em var(--paint); } /* calm roundels: 250 rows of paint would shout */
.stop__name { grid-area: name; font-size: var(--step-0); line-height: 1.1; }
.stop__name a { text-decoration: none; }
.stop__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.stop__name a:focus-visible { outline: none; box-shadow: none; }
.stop:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--kei); border-radius: var(--r-s); z-index: 3; }
.stop__meta { grid-area: meta; margin: 0; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); line-height: 1.3; color: var(--ink-2); }
@container slot (max-width: 29.99rem) { .stop__country { display: none; } } /* narrow phones keep the kind whole; the country is on the profile */
.stop__star { color: var(--deep); font-weight: 700; }
.stop__hook { display: none; }
.stop__len { grid-area: len; justify-self: end; font-weight: 700; font-size: var(--step--2); color: var(--ink-2); }
.stop .yard { grid-area: yard; height: 0.55rem; }
.stop:hover .stop__name a { text-decoration: underline; }
.milestone { display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 0.6rem; align-items: center; padding-block: var(--s1) 0.3rem; }
.milestone__dot { justify-self: center; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--paint); border: 3px solid var(--ink); }
.milestone__year { font-family: var(--f-display); font-size: var(--step-2); line-height: 1; color: var(--deep); margin: 0; }
.milestone__year small { color: var(--ink-2); margin-left: 0.5em; }

@container slot (min-width: 80rem) {
  .road { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s4) var(--s3); padding-block: var(--s5); }
  .stop {
    align-self: start; grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "pic name name" "pic meta meta" "hook hook hook" "yard yard len";
    gap: 0.2rem var(--s1); padding: 1.6rem var(--s2) var(--s2); border: var(--line); border-radius: var(--r-m);
    background: var(--card); box-shadow: var(--shadow); transition: translate 0.25s var(--ease), rotate 0.25s var(--ease);
  }
  .stop::before, .milestone::before { /* lane markings: each row of cards reads as one road */
    top: -0.32rem; bottom: auto; left: -2px; right: calc(-1 * var(--s3) - 2px); width: auto; height: 0.5rem;
    background: repeating-linear-gradient(to right, var(--paper) 0 1rem, transparent 1rem 2rem) center / 100% 2px no-repeat, var(--ink);
  }
  .stop__year { position: absolute; top: -0.85rem; left: var(--s2); z-index: 3; font-size: var(--step--1); }
  .stop__pic { width: 3.5rem; font-size: var(--step-1); align-self: start; }
  .stop__name { font-size: var(--step-1); }
  .stop__hook { display: block; grid-area: hook; font-size: var(--step--1); line-height: 1.45; margin: var(--s0) 0 var(--s-1); }
  .stop .yard { height: 0.8rem; align-self: center; }
  .stop:hover { translate: 0 -3px; rotate: -0.4deg; }
  /* an essential car: the same card, led by a 16:10 picture (or its roundel on a wash panel) */
  .stop--star { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pic pic" "name name" "meta meta" "hook hook" "yard len"; padding-top: 0; }
  .stop--star .stop__pic { width: calc(100% + 2 * var(--s2)); max-width: none; margin: 0 calc(-1 * var(--s2)) var(--s1); aspect-ratio: 16 / 10; border-radius: calc(var(--r-m) - 2px) calc(var(--r-m) - 2px) 0 0; border: 0; border-bottom: var(--line); font-size: var(--step-3); }
  .stop--star .mono.stop__pic { box-shadow: none; background: radial-gradient(circle closest-side, var(--paint) 0 44%, var(--on-paint) 44.5% 47%, var(--paint) 47.5% 52%, var(--on-paint) 52.5% 54.5%, var(--wash) 55%); }
  .stop--star .stop__name { font-size: var(--step-2); }
  /* a decade is a full-width marker on the road, so cards always pack */
  .milestone { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: var(--s1); padding: 0; }
  .milestone__dot { width: 1.25rem; margin-top: -0.45rem; }
  .milestone__year { font-size: var(--step-4); padding-top: var(--s1); }
}

/* ---------- 8. Profile: hero, poster hero, contents, sections ---------- */
.car-hero { background: var(--wash); border-bottom: var(--line); }
.car-hero__grid { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s4); align-items: end; container-type: inline-size; } /* the name is sized by the hero's own width (cqi) */
@container slot (min-width: 64rem) { .car-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding-block: var(--s4) var(--s5); } }
.car-hero__kicker { margin-bottom: var(--s2); }
.car-hero__title { --size: clamp(3.3rem, 1.4rem + 8cqi, 8rem); font-size: var(--size); line-height: 0.86; letter-spacing: -0.03em; }
.car-hero__title .h1-marque { display: block; font-size: 0.42em; line-height: 1; letter-spacing: -0.01em; color: var(--deep); margin-bottom: 0.08em; }
.car-hero__aka { font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); color: var(--ink-2); margin: var(--s1) 0 0; }
.standfirst { font-size: var(--step-1); line-height: 1.42; margin: var(--s3) 0 0; max-width: 33rem; }
.car-hero__picture { position: relative; padding-top: 1.75rem; }
.car-hero__frame { border-radius: var(--r-canopy); overflow: hidden; border: 3px solid var(--ink); background: var(--paint); box-shadow: var(--shadow); }
.car-hero__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.car-hero__picture .disc { position: absolute; top: 0; right: 0.75rem; }
@container slot (min-width: 64rem) { .car-hero__picture .disc { right: auto; left: -1.25rem; } }

/* no photograph: the poster hero sets the name as large as its slot allows. A long name is held to two or three lines
   (--t is its whole width in em, from the build), but never set smaller than the photographed hero's name */
.car-hero--poster .car-hero__grid { grid-template-columns: 1fr; }
.car-hero--poster .car-hero__title { font-size: max(var(--size), min(clamp(5.5rem, 1rem + 30cqi, 30rem), 200cqi / var(--t))); line-height: 0.8; letter-spacing: -0.04em; }
.poster-row { display: grid; gap: var(--s3); align-items: center; }
@container slot (min-width: 64rem) { .poster-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 24rem); gap: var(--s4); } }
.poster-row .standfirst { margin: 0; }
.nopic-note { display: flex; gap: var(--s2); align-items: center; background: var(--card); border: 2px dashed var(--ink); border-radius: var(--r-l); padding: var(--s2) var(--s3); font-size: var(--step--1); line-height: 1.45; }
.nopic-note .mono { width: 3.25rem; flex: none; font-size: var(--step-1); }
.nopic-note p { margin: 0; }
.mark { background: var(--paint); color: var(--on-paint); border-radius: 0.25em; padding: 0 0.12em; font-weight: 700; }

.toc { border-bottom: var(--line); background: var(--paper); padding-block: var(--s2); }
.toc__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem var(--s1); }
.toc .chips { gap: 0.35rem; }

.section { padding-block: var(--s5) 0; }
/* layout slots: components that change layout (size comparison, related cards) respond to the slot they sit in,
   never to the viewport, so they work in a full section, an aside column or a narrow specimen alike */
main, .section, .aside-col { container: slot / inline-size; }
@container slot (min-width: 48rem) { .section { padding-block: var(--s6) 0; } }
.section__head { display: flex; align-items: center; gap: var(--s0) var(--s1); flex-wrap: wrap; margin-bottom: var(--s3); }
.section__head h2 { font-size: var(--step-3); line-height: 1; }
.section__num {
  display: inline-grid; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: var(--paint); color: var(--on-paint); border: 2px solid var(--ink); font-family: var(--f-label); font-weight: 700; font-size: var(--step--1);
}
.section__head .label { flex-basis: 100%; color: var(--deep); padding-left: calc(2rem + var(--s1)); }
@container slot (min-width: 36rem) { .section__head .label { flex-basis: auto; padding-left: var(--s0); } }

/* ---------- 9. The spec plate (adaptive: unknown fields are dropped and listed once) ---------- */
.plate {
  --rivet: radial-gradient(circle, #f2e6cf 0 0.26rem, #8e8273 0.28rem 0.36rem, transparent 0.38rem);
  --plate-label: var(--paint);
  position: relative; background-color: var(--plate-bg); color: var(--plate-ink);
  border-radius: var(--r-l); padding: var(--s3) var(--s2) var(--s2);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet);
  background-position: 0.8rem 0.8rem, calc(100% - 0.8rem) 0.8rem, 0.8rem calc(100% - 0.8rem), calc(100% - 0.8rem) calc(100% - 0.8rem);
  background-size: 1rem 1rem; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 6px var(--plate-bg), inset 0 0 0 8px var(--paint), var(--shadow);
}
@container slot (min-width: 36rem) { .plate { padding: var(--s4) var(--s3) var(--s3); } }
.plate__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s0) var(--s2); flex-wrap: wrap; padding: 0 var(--s1) var(--s2); }
.plate__title { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.05; margin: 0; }
.plate__sub { color: var(--plate-label); margin: 0; }
/* fields wrap like words: each row's last field grows to the edge, so no row has a hole and every rule runs full width */
.plate dl { display: flex; flex-wrap: wrap; margin: 0; }
.plate dl > div { flex: 1 0 50%; padding: var(--s2) var(--s1); border-top: 1px solid var(--plate-line); min-width: 0; }
.plate .plate__wide { flex-basis: 100%; }
@container slot (min-width: 36rem) { .plate dl > div { flex-basis: 33.333%; } .plate .plate__wide { flex-basis: 100%; } }
@container slot (min-width: 72rem) { .plate dl > div { flex-basis: 25%; } .plate .plate__wide { flex-basis: 50%; } }
.plate dt { color: var(--plate-label); margin-bottom: 0.2rem; }
.plate dd { margin: 0; font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; overflow-wrap: anywhere; }
.plate dd small { display: block; font-family: var(--f-text); font-size: var(--step--1); line-height: 1.35; color: var(--plate-soft); margin-top: 0.25rem; }
.plate .plate__dial dd { display: flex; gap: var(--s2); align-items: center; }
.plate__missing { margin: var(--s2) var(--s1) 0; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--plate-soft); }
.plate__missing b { color: var(--plate-label); margin-right: 0.4em; }

/* dashboard dial: a 270° arc filled to --v of --max, with a needle; used for top speed and for records */
.dial {
  --v: 0; --max: 140; --dial-bg: var(--plate-bg); --dial-ink: var(--plate-ink);
  position: relative; display: grid; place-content: center; text-align: center; flex: none;
  width: 6.5rem; aspect-ratio: 1; border-radius: 50%; color: var(--dial-ink);
  background:
    radial-gradient(circle, var(--dial-bg) 0 56%, transparent 57%),
    conic-gradient(from 225deg, var(--paint) 0 calc(var(--v) / var(--max) * 270deg), color-mix(in oklab, var(--dial-ink) 20%, transparent) 0 270deg, transparent 270deg);
}
.dial::before { /* the needle */
  content: ""; position: absolute; left: calc(50% - 1px); top: 8%; width: 2px; height: 42%; border-radius: 2px;
  background: var(--paint); transform-origin: 50% 100%; rotate: calc(-135deg + var(--v) / var(--max) * 270deg); opacity: 0.9;
}
.dial b { position: relative; font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); line-height: 0.9; margin-top: 0.9rem; }
.dial span { position: relative; font-size: var(--step--3); color: var(--paint); }
.dial--paper { --dial-bg: var(--card); --dial-ink: var(--ink); width: 9rem; }
.dial--paper b { font-size: var(--step-3); }
.dial--paper span { color: var(--deep); }

/* ---------- 10. Size comparison: one true-scale stage, sized by its own width, so nothing floats ---------- */
.scale { background: var(--card); border: var(--line); border-radius: var(--r-l); padding: var(--s3) var(--s2) var(--s2); box-shadow: var(--shadow); display: grid; gap: var(--s3); }
@container slot (min-width: 36rem) { .scale { padding: var(--s3); } }
@container slot (min-width: 64rem) { .scale { grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); align-items: center; column-gap: var(--s5); } }
.scale__verdict { display: grid; gap: var(--s1); }
.scale__big { font-family: var(--f-display); font-size: var(--step-5); line-height: 0.82; color: var(--deep); margin: 0; font-variant-numeric: tabular-nums; }
.scale__big small { font-size: 0.4em; color: var(--ink); }
.scale__big--unknown { font-size: var(--step-3); line-height: 1; }
.scale__words { font-size: var(--step-1); line-height: 1.35; margin: 0; max-width: 32rem; }
.scale__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: var(--s0) 0 0; padding: 0; }
.scale__facts li { font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); background: var(--wash); border-radius: var(--r-pill); padding: 0.35em 0.9em; }
.scale__note { font-size: var(--step--1); color: var(--ink-2); margin: 0; grid-column: 1 / -1; }
.scale__box { container-type: inline-size; }
/* the stage is 4.2 m wide: a 3.6 m track and a 0.6 m column for the standing adult.
   So the adult's 1.75 m is 1.75 / 4.2 = 41.667% of the stage width, and the three lanes share exactly that height. */
.stage { display: grid; grid-template-columns: 36fr 6fr; grid-template-rows: 41.667cqi auto; }
.stage__lanes { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); row-gap: 1.6cqi; }
.lane { --mm: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: var(--s0); align-items: end; min-height: 0; }
.lane__name, .lane__len, .lane--unknown .lane__bar span { font-family: var(--f-label); font-weight: 700; font-size: var(--step-lane); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane__len { font-variant-numeric: tabular-nums; padding-right: 1.5cqi; }
.lane__name { white-space: normal; } /* a long name wraps in its lane, never cut with … */
.lane__bar {
  grid-column: 1 / -1; align-self: stretch; margin-top: 0.8cqi; position: relative;
  width: calc(var(--mm) / 3600 * 100%); /* the lane is the 3.6 m track */
  border: 2.5px solid var(--ink); border-radius: var(--r-pill) 1.6rem 1.6rem var(--r-pill); background: var(--paint);
  animation: drive-in 1.1s var(--ease) both;
}
.lane__bar::after { /* a wheel at each end: the footprint reads as a vehicle, not a drawing */
  content: ""; position: absolute; bottom: -0.5rem; left: 12%; right: 12%; height: 0.9rem;
  background: radial-gradient(circle, var(--ink) 0 45%, transparent 47%) left / 0.9rem 0.9rem no-repeat, radial-gradient(circle, var(--ink) 0 45%, transparent 47%) right / 0.9rem 0.9rem no-repeat;
}
.lane--fiat .lane__bar { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--ink) 16%, transparent) 0 2px, transparent 2px 9px), var(--card); }
.lane--peel .lane__bar { background: var(--card); border-style: dashed; }
.lane--unknown .lane__bar { width: 100%; background: none; border-style: dashed; display: grid; place-items: center; animation: none; }
.lane--unknown .lane__bar::after { display: none; }
.lane--unknown .lane__bar span { color: var(--ink-2); }
.stage__person { position: relative; }
.stage__person::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.stage__person::after { content: ""; position: absolute; top: 14.5%; bottom: 0; left: 18%; right: 18%; border-radius: 45% 45% 10% 10% / 16% 16% 3% 3%; background: var(--ink); }
.stage__ruler {
  grid-column: 1; position: relative; height: 1.9rem; border-top: 2.5px solid var(--ink);
  background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px calc(100% / 7)) 0 0 / 100% 0.6rem no-repeat;
}
.stage__ruler span, .stage__plabel { font-family: var(--f-label); font-weight: 700; font-size: var(--step--3); font-variant-numeric: tabular-nums; }
.stage__ruler span { position: absolute; top: 0.65rem; translate: -50% 0; white-space: nowrap; }
.stage__ruler span:first-child { translate: 0 0; }
.stage__plabel { grid-column: 2; border-top: 2.5px solid var(--ink); padding-top: 0.4rem; text-align: center; line-height: 1.15; }

/* contemporaries and line-ups: the same yardstick, one row per car */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; }
.lineup__row { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; grid-template-areas: "name len" "yard yard"; gap: 0.2rem var(--s1); align-items: baseline; padding-block: 0.55rem; border-bottom: 1px solid var(--rule); }
.lineup__name { grid-area: name; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); line-height: 1.2; min-width: 0; }
.lineup__name a { text-decoration: none; }
.lineup__name a:hover { text-decoration: underline; }
.lineup__name small { display: block; font-weight: 700; font-size: var(--step--2); color: var(--ink-2); }
.lineup__len { grid-area: len; justify-self: end; font-weight: 700; font-size: var(--step--1); }
.lineup .yard { grid-area: yard; height: 0.85rem; }
.lineup__row--self .lineup__name { color: var(--deep); }
.lineup__row--group { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name len"; } /* no yardstick: the count of makers takes its track, on one line */
@container slot (min-width: 36rem) {
  .lineup__row { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 4rem; grid-template-areas: "name yard len"; align-items: center; }
  .lineup__row--group { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); grid-template-areas: "name len"; }
}
.contemporaries { margin-top: var(--s4); }
.contemporaries h3 { font-size: var(--step-2); margin-bottom: var(--s0); }
.contemporaries > p { font-size: var(--step--1); color: var(--ink-2); max-width: 40rem; }

/* ---------- 11. Prose (a measure and an aside column), pull quotes, notes ---------- */
.prose-grid { display: grid; gap: var(--s4); }
.prose-grid > .table-wrap { align-self: start; } /* a table alone in the aside keeps its own height, never the section's */
@container slot (min-width: 56rem) { .prose-grid { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); column-gap: var(--s6); } }
.prose { max-width: var(--measure); }
.prose > p:first-of-type:not(.draft)::first-letter, .prose > .draft + p::first-letter { float: left; font-family: var(--f-display); font-weight: 800; font-size: 4.4em; line-height: 0.78; margin: 0.06em 0.12em 0 0; color: var(--deep); }
.prose h3 { font-size: var(--step-2); margin: var(--s4) 0 var(--s1); }
.aside-col { display: grid; gap: var(--s4); align-content: start; }
.pull { margin: var(--s4) 0 var(--s5); position: relative; background: var(--wash); border: var(--line); border-radius: var(--r-l) var(--r-l) var(--r-l) 0.3rem; padding: var(--s3); }
.pull::after { /* speech-bubble tail */
  content: ""; position: absolute; left: -2px; bottom: -1.1rem; width: 1.4rem; height: 1.1rem;
  background: var(--wash); border-left: var(--line); border-bottom: var(--line); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pull blockquote { margin: 0; }
.pull blockquote p { font-style: italic; font-size: var(--step-2); line-height: 1.22; margin: 0; letter-spacing: -0.01em; }
.pull figcaption { margin-top: var(--s1); font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); line-height: 1.35; color: var(--ink-2); }
.pull figcaption cite { font-family: var(--f-text); }
.note { margin-top: var(--s3); border-left: 6px solid var(--paint); background: var(--paper-2); border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--s2) var(--s3); max-width: 46rem; }
.note h3 { font-size: var(--step-1); margin-bottom: var(--s0); }
.note p { font-size: var(--step--1); line-height: 1.5; margin: 0 0 0.6em; }
.note p:last-child { margin: 0; }

/* ---------- 12. Pictures: figure, period plate, pair, bleed, gallery, enlarged view ---------- */
.fig img { width: 100%; border-radius: var(--r-m); border: var(--line); background: var(--paper-2); }
.fig--canopy img { border-radius: var(--r-canopy); }
figcaption { font-size: var(--step--1); line-height: 1.4; margin-top: var(--s1); max-width: 40rem; }
.credit { display: block; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--ink-2); margin-top: 0.2rem; }
/* a period photograph: never tinted, never cropped; a framed print on a mat, numbered in Roman numerals */
.fig--period { background: var(--card); padding: clamp(0.5rem, 1.6vw, 0.9rem) clamp(0.5rem, 1.6vw, 0.9rem) var(--s2); border: 1px solid var(--rule); box-shadow: var(--shadow); max-width: 40rem; }
.fig--period img { border-radius: 0; border: 1px solid var(--ink); }
.fig--period figcaption { margin-top: var(--s1); padding-inline: 0.2rem; }
.fig__no { color: var(--deep); margin-right: 0.5em; font-variant-numeric: tabular-nums; }
.fig--small { max-width: 26rem; } /* a small original: shown at its own size, never stretched */
.fig--bleed { margin-top: var(--s5); }
.fig--bleed img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: 0; border-inline: 0; }
@container slot (min-width: 120rem) { .fig--bleed img { max-width: 120rem; margin-inline: auto; border-radius: var(--r-l); border: var(--line); } }
.fig--bleed figcaption { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; max-width: none; }
.pair { display: grid; gap: var(--s3); }
@container slot (min-width: 36rem) { .pair { grid-template-columns: 1fr 1fr; } }
.pair .fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.pair .fig:first-child img { border-radius: var(--r-canopy); }

/* gallery: a swipeable strip per group in a narrow slot; four fixed columns from a 44rem slot */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.gallery__group h3 { color: var(--deep); margin-bottom: var(--s1); }
.gallery__group h3 span { color: var(--ink-2); }
.gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2) var(--s1); grid-auto-flow: column; grid-auto-columns: min(72%, 17rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--s1); scrollbar-width: thin; }
.gallery__grid > li { scroll-snap-align: start; }
@container slot (min-width: 44rem) {
  .gallery__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: 0; gap: var(--s3) var(--s2); }
  /* the lead takes its height from the two rows beside it, never from its own picture (a portrait print would stretch the rows) */
  .gallery__lead { grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .gallery__lead .gallery__thumb { position: relative; }
  .gallery__lead .gallery__thumb img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .gallery__item--period.gallery__lead .gallery__thumb img { inset: 0.4rem; width: calc(100% - 0.8rem); height: calc(100% - 0.8rem); }
}
.gallery__thumb { display: block; border-radius: var(--r-m); overflow: hidden; border: var(--line); background: var(--paper-2); }
.gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 0.35s var(--ease); }
.gallery__thumb:hover img { scale: 1.04; }
.gallery__item--period .gallery__thumb { border-radius: 0; border: 1px solid var(--rule); padding: 0.4rem; background: var(--card); box-shadow: var(--shadow); }
.gallery__item--period .gallery__thumb img { object-fit: contain; background: var(--card); scale: none; }
.gallery__cap { font-size: var(--step--2); line-height: 1.35; margin: 0.45rem 0 0; font-family: var(--f-label); font-weight: 700; }
.gallery__cap b { color: var(--deep); font-variant-numeric: tabular-nums; }
.gallery__more, .fold { margin-top: var(--s2); }
.gallery__more[open] > summary, .fold[open] > summary { margin-bottom: var(--s2); }
.gallery__more:not([open]) > summary > span + span, .gallery__more[open] > summary > span:first-child,
.fold:not([open]) > summary > span + span, .fold[open] > summary > span:first-child { display: none; } /* "12 more pictures +" / "Fewer pictures −" */
/* the credits list is folded on every width: each enlarged view carries its own credit */
.gallery__credits { margin: var(--s4) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--rule); }
.gallery__credits ol { margin: var(--s2) 0 0; padding: 0; font-family: var(--f-label); font-size: var(--step--2); color: var(--ink-2); line-height: 1.5; columns: 2 18rem; column-gap: var(--s4); list-style: none; }
.gallery__credits li { break-inside: avoid; }
.gallery__credits b { color: var(--ink); }

/* enlarged view, no JavaScript: each picture is a :target overlay, all of them in one .lightboxes wrapper
   after the footer. While one is open everything else is hidden, so focus and screen readers stay inside it. */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: var(--footer-bg); color: var(--plate-ink); padding: var(--s2) var(--gutter);
  grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s1);
}
.lightbox:target { display: grid; }
@media screen { body:has(.lightbox:target) > :not(.lightboxes) { visibility: hidden; } } /* print always prints the page */
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); }
.lightbox__bar a, .lightbox__nav a { color: var(--plate-ink); text-decoration: none; border: 2px solid var(--plate-ink); border-radius: var(--r-pill); padding: 0.35em 1em; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); }
.lightbox__bar a:hover, .lightbox__nav a:hover { border-color: var(--kei); }
.lightbox :focus-visible { outline-color: var(--plate-ink); }
.lightbox figure { display: grid; align-content: center; justify-items: center; gap: var(--s1); min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { text-align: center; max-width: 46rem; }
.lightbox .credit { color: var(--plate-soft); }
.lightbox__nav { display: flex; justify-content: center; gap: var(--s1); flex-wrap: wrap; margin: 0; }

/* ---------- 13. Data blocks: tables, specification, production, points, records, screen, cards, sources ---------- */
.table-wrap { border: var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--card); container-type: inline-size; }
.table { width: 100%; font-size: var(--step--1); }
.table caption { text-align: left; font-family: var(--f-display); font-size: var(--step-1); padding: var(--s2) var(--s2) var(--s1); }
.table th, .table td { text-align: left; padding: 0.7rem var(--s2); vertical-align: top; border-top: 1px solid var(--rule); }
.table thead th { background: var(--paper-2); border-top: 0; border-bottom: 3px solid var(--paint); }
.table tbody th { font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); }
/* a narrow table (a phone, or an aside column): each row becomes a small card; no sideways scrolling, nothing cut */
@container (max-width: 35.99rem) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem var(--s2); padding: var(--s2); border-top: 1px solid var(--rule); }
  .table--stack tbody tr:first-child { border-top: 0; }
  .table--stack th, .table--stack td { border: 0; padding: 0; }
  .table--stack tbody th { grid-column: 1 / -1; font-size: var(--step-0); }
  .table--stack td::before { content: attr(data-th); display: block; color: var(--ink-2); }
  .table--stack td.full { grid-column: 1 / -1; }
}
.specs { display: grid; gap: var(--s4) var(--s3); }
@container slot (min-width: 44rem) { .specs { grid-template-columns: 1fr 1fr; } }
.specs h3 { color: var(--deep); margin-bottom: var(--s0); }
.kv { width: 100%; font-size: var(--step--1); }
.kv th { width: 38%; color: var(--ink-2); }
.kv th, .kv td { padding: 0.6rem var(--s2); border-top: 1px solid var(--rule); vertical-align: top; text-align: left; }
.kv tr:first-child th, .kv tr:first-child td { border-top: 0; }
.kv td { overflow-wrap: anywhere; }
.kv td .nobr { white-space: normal; } /* a data cell may break anywhere, glued marks too, before it overflows */
.kv td small { display: block; color: var(--ink-2); font-size: var(--step--2); margin-top: 0.15rem; }

/* production: every figure on one axis; the disputed range is marked on the axis itself */
.tally { --max: 45000; background: var(--card); border: var(--line); border-radius: var(--r-l); padding: var(--s3) var(--s2); box-shadow: var(--shadow); }
@container slot (min-width: 36rem) { .tally { padding: var(--s3); } }
.tally__verdict { font-size: var(--step-0); line-height: 1.45; max-width: 46rem; }
.tally__verdict b { font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); color: var(--deep); display: block; line-height: 1.1; margin-bottom: 0.2rem; }
.tally__chart { position: relative; padding-top: 1.6rem; }
.tally__axis { position: relative; height: 1.4rem; border-bottom: var(--line); margin-bottom: var(--s2); font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tally__axis span { position: absolute; bottom: 0.25rem; left: calc(var(--at) / var(--max) * 100%); translate: -50% 0; white-space: nowrap; background: var(--card); padding-inline: 0.2em; }
.tally__axis span:first-child { translate: 0 0; }
.tally__axis span:last-child { translate: -100% 0; } /* the last label ends at its tick, inside the chart */
.tally__band { /* solid tint, dashed ends; spans the label and the axis only, never the rows */
  position: absolute; top: 0; height: 3rem; left: calc(var(--lo) / var(--max) * 100%); width: calc((var(--hi) - var(--lo)) / var(--max) * 100%);
  background: color-mix(in oklab, var(--paint) 30%, transparent); border-inline: 2px dashed var(--deep);
}
.tally__band span { position: absolute; top: 0.15rem; right: 0; white-space: nowrap; font-size: var(--step--3); color: var(--deep); background: var(--card); padding: 0 0.3em; } /* anchored at the band's top end; knocks out the tint */
.tally__band--start span { right: auto; left: 0; } /* a band in the left half labels from its start, inside the chart */
.tally__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tally__row { display: grid; gap: 0.35rem; }
.tally__bar { display: block; height: 1.1rem; width: max(1.1rem, calc(var(--n) / var(--max) * 100%)); background: var(--paint); border: 2px solid var(--ink); border-radius: var(--r-pill); animation: drive-in 1s var(--ease) both; }
.tally__bar--unsure { background: repeating-linear-gradient(-45deg, var(--paint) 0 6px, var(--card) 6px 10px); }
.tally__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem var(--s1); margin: 0; }
.tally__fig { font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); line-height: 1; }
.tally__what { font-size: var(--step--1); }
.tally__src { font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--ink-2); margin: 0; }
.trust { padding: 0.15em 0.6em; border-radius: var(--r-pill); border: 1.5px solid var(--ink); white-space: nowrap; }
.trust--two { background: var(--ink); color: var(--paper); }
.trust--one { background: var(--kei); color: var(--on-paint); border-color: var(--on-paint); }
.trust--lead { border-style: dashed; }
.tally__key { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--ink-2); }
.tally__key li { display: inline-flex; align-items: center; gap: 0.4em; }

/* famous for: kei-catalogue points */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s3); counter-reset: pt; }
@container slot (min-width: 44rem) { .points { grid-template-columns: repeat(3, 1fr); } }
.points li { counter-increment: pt; position: relative; background: var(--card); border: var(--line); border-radius: var(--r-l); padding: var(--s4) var(--s3) var(--s3); }
.points li::before {
  content: "Point " counter(pt); position: absolute; top: -0.95rem; left: var(--s3);
  background: var(--paint); color: var(--on-paint); border: var(--line); font-weight: 700; padding: 0.3em 1em; border-radius: var(--r-pill);
}
.points h3 { font-size: var(--step-2); margin-bottom: var(--s0); }
.points p { font-size: var(--step--1); margin: 0; }

/* racing and records: the dial, then a log of numbers */
.records { display: grid; gap: var(--s4); align-items: center; }
@container slot (min-width: 44rem) { .records { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s5); } }
.records__lede { font-size: var(--step--1); max-width: 40rem; margin: 0 0 var(--s3); }
.records__log { display: grid; gap: var(--s3); margin: 0; }
@container slot (min-width: 36rem) { .records__log { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.records__log div { border-top: 5px solid var(--paint); padding-top: var(--s1); }
.records__log dt { font-family: var(--f-display); font-size: var(--step-4); line-height: 0.9; color: var(--deep); font-variant-numeric: tabular-nums; }
.records__log dd { margin: var(--s0) 0 0; font-size: var(--step--1); max-width: 24rem; }

.screen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.screen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: center; background: var(--card); border: var(--line); border-radius: 2.6rem; padding: var(--s1) var(--s3) var(--s1) var(--s1); }
.screen__year { display: grid; place-items: center; width: 3.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; font-size: var(--step--1); }
.screen .screen__t { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; margin: 0; }
.screen__t cite { font-style: normal; }
.screen p { margin: 0.15rem 0 0; font-size: var(--step--1); }

/* related cards, by slot width: one horizontal card a row; two vertical cards from a 36rem slot; three from 56rem */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@container slot (min-width: 36rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }
@container slot (min-width: 56rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); height: 100%; background: var(--card); border: var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); transition: translate 0.25s var(--ease); }
.card__pic, .card__mono { width: 100%; height: 100%; min-height: 7rem; object-fit: cover; border-right: var(--line); }
.card__mono { display: grid; place-items: center; background: var(--wash); container-type: inline-size; }
.card__mono .mono { width: 70%; font-size: 26cqi; } /* letters sized by the panel, so they always fit the roundel */
.card__body { padding: var(--s1) var(--s2); display: grid; gap: 0.25rem; align-content: start; }
.card__rel { color: var(--deep); margin: 0; }
.card h3 { font-size: var(--step-1); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:focus-visible { outline: none; box-shadow: none; }
.card:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--kei); }
.card:hover { translate: 0 -3px; }
.card p { font-size: var(--step--2); margin: 0; font-family: var(--f-label); font-weight: 700; color: var(--ink-2); }
.card .yard { margin-top: 0.3rem; height: 0.6rem; }
@container slot (min-width: 36rem) {
  .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .card__pic, .card__mono { aspect-ratio: 4 / 3; height: auto; min-height: 0; border-right: 0; border-bottom: var(--line); }
  .card__mono .mono { width: 44%; font-size: 17cqi; }
  .card__body { padding: var(--s2); }
}

/* sources: numbered, full titles, plain text (links live on the Credits page) */
.sources { font-size: var(--step--1); line-height: 1.5; columns: 2 24rem; column-gap: var(--s5); padding-left: 2.2em; margin: 0; }
.sources li { break-inside: avoid; margin-bottom: var(--s1); padding-left: 0.3em; }
.sources li::marker { font-family: var(--f-label); font-weight: 700; color: var(--deep); }
.sources li:target { background: var(--wash); outline: 2px solid var(--paint); outline-offset: 3px; border-radius: 4px; }
.sources__note { font-size: var(--step--1); color: var(--ink-2); max-width: 46rem; }

.prevnext { display: grid; gap: var(--s2); margin-top: var(--s6); }
@container slot (min-width: 44rem) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext a { display: grid; gap: 0.2rem; text-decoration: none; padding: var(--s2) var(--s4); border-radius: var(--r-pill); border: var(--line); background: var(--card); }
.prevnext .label { color: inherit; }
.prevnext b { font-family: var(--f-display); font-weight: 800; font-size: var(--step-2); line-height: 1; }
.prevnext__next { text-align: right; justify-items: end; }

/* ---------- 14. Theme page ---------- */
.theme-hero { background: var(--band); color: var(--on-paint); border-bottom: var(--line); overflow: hidden; }
.theme-hero__grid { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s5); }
@container slot (min-width: 64rem) { .theme-hero__grid { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.theme-hero h1 { font-size: var(--step-6); line-height: 0.8; letter-spacing: -0.035em; }
.theme-hero .crumbs { color: var(--on-paint); }
.bubbles { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.bubbles img { width: clamp(5rem, 14vw, 9rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--on-paint); }
.bubbles img:nth-child(2) { width: clamp(7rem, 20vw, 13rem); }
.bubbles img:nth-child(3) { width: clamp(4rem, 10vw, 6.5rem); }

/* ---------- 15. Indexes: A–Z and makers ---------- */
.index-head { padding-block: var(--s4) var(--s3); display: grid; gap: var(--s2); }
.index-head h1 { font-size: var(--step-5); line-height: 0.84; letter-spacing: -0.03em; }
.index-head .standfirst { margin: 0; }
.az-jump { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0; }
.az-jump a, .az-jump span { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: 50%; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); text-decoration: none; border: 2px solid var(--ink); background: var(--card); }
.az-jump span { color: var(--ink-2); border-style: dashed; border-color: var(--rule); background: none; }
.kinds { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.kinds a { display: inline-flex; gap: 0.5em; align-items: baseline; text-decoration: none; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); padding: 0.35em 0.9em; border-radius: var(--r-pill); border: 2px solid var(--ink); background: var(--card); }
.kinds a b { color: var(--deep); font-variant-numeric: tabular-nums; }
.kinds a:hover b { color: var(--on-paint); }
.az-letter { display: grid; gap: var(--s1); padding-block: var(--s3); border-top: var(--line); }
.az-letter__l { font-size: var(--step-4); line-height: 0.8; color: var(--accent); align-self: start; }
@container slot (min-width: 64rem) {
  .az-letter { grid-template-columns: 7rem minmax(0, 1fr); padding-block: var(--s4); }
  .az-letter__l { position: sticky; top: var(--s2); font-size: var(--step-5); }
}
.az-list, .makers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); column-gap: var(--s4); }
.az-list li { border-bottom: 1px solid var(--rule); }
.az-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 4rem; grid-template-areas: "n y y" "c len yard"; gap: 0.15rem var(--s1); padding: 0.5rem 0.3rem; text-decoration: none; align-items: center; }
.az-list a:hover { background: var(--wash); }
.az__n { grid-area: n; font-family: var(--f-display); font-size: var(--step-0); line-height: 1.15; }
.az__y, .az__len { grid-area: y; justify-self: end; font-weight: 700; font-size: var(--step--2); color: var(--ink-2); white-space: nowrap; } /* years and lengths are short: kept whole on one line */
.az__len { grid-area: len; color: var(--ink); }
.az__c { grid-area: c; display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); line-height: 1.3; color: var(--ink-2); }
.az__c::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--paint); border: 1.5px solid var(--ink); flex: none; align-self: center; }
.az-list .yard { grid-area: yard; height: 0.5rem; }
.az-kinds { display: grid; gap: var(--s1); }
.az-kinds details { border: var(--line); border-radius: var(--r-m); background: var(--card); }
.az-kinds summary { cursor: pointer; padding: var(--s1) var(--s2); font-family: var(--f-display); font-size: var(--step-1); }
.az-kinds summary b { font-family: var(--f-label); color: var(--deep); font-size: var(--step--1); margin-left: 0.4em; }
.az-kinds ul { list-style: none; margin: 0; padding: 0 var(--s2) var(--s2); display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-family: var(--f-label); font-weight: 700; font-size: var(--step--1); }
.az-kinds li span { color: var(--ink-2); font-weight: 700; margin-left: 0.3em; }
.maker { padding-block: var(--s1); border-bottom: 1px solid var(--rule); }
.maker__n { font-size: var(--step-1); line-height: 1.1; }
.maker__meta { margin: 0.1rem 0 0.35rem; font-family: var(--f-label); font-weight: 700; font-size: var(--step--2); color: var(--ink-2); }
.maker__cars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.maker__cars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5rem; gap: var(--s1); align-items: center; font-family: var(--f-label); font-size: var(--step--1); }
.maker__cars a { font-weight: 700; text-decoration: none; min-width: 0; }
.maker__cars a:hover { text-decoration: underline; }
.maker__cars .num { font-size: var(--step--2); color: var(--ink-2); font-weight: 700; }
.maker__cars .yard { height: 0.5rem; }

/* 404 */
.notfound { padding-block: var(--s6); text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.notfound__code { font-family: var(--f-display); font-size: clamp(7rem, 36vw, 20rem); line-height: 0.75; letter-spacing: -0.05em; display: flex; align-items: center; gap: 0.04em; margin: 0; }
.notfound__code .mono { width: 2.2em; font-size: 0.36em; } /* 2.2 × 0.36 = 0.79 of the digit size */
.notfound h1 { font-size: var(--step-4); }
.notfound .chips { justify-content: center; }

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

/* ---------- 17. Print: light ink on white, no chrome, figures kept whole ---------- */
@media print {
  :root { color-scheme: light; --paper: #fff; --paper-2: #f3f0ea; --card: #fff; --ink: #000; --ink-2: #333; --shadow: none;
          --plate-bg: #fff; --plate-ink: #000; --plate-soft: #333; --plate-line: #bbb; --footer-bg: #fff; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body { font-size: 10.5pt; }
  .masthead nav, .ribbon, .toc, .skip-link, .prevnext, .footer__grid > div + div, .footer__paint, .lightboxes { display: none; }
  .masthead { border: 0; }
  .era__open, .theme-hero, .car-hero { background: none; color: var(--ink); border-bottom: 3pt solid var(--paint); }
  .era__open::after { display: none; }
  .plate { --plate-label: var(--deep); background-image: none; border: 1.5pt solid var(--ink); box-shadow: inset 0 0 0 3pt var(--paper), inset 0 0 0 4pt var(--paint); }
  .dial { --dial-bg: var(--paper); --dial-ink: var(--ink); }
  .dial span { color: var(--deep); }
  .road { columns: 2; column-gap: 12pt; padding: 0; }
  .stop { box-shadow: none; }
  .section { padding-top: 16pt; }
  .plate, .tally, .scale, .card, .points li, figure, .lineup__row, .records__log div { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .footer { color: var(--ink); margin-top: 18pt; border-top: 1pt solid var(--ink); }
  .footer__small { border: 0; color: var(--ink-2); }
  .disc { rotate: 0deg; box-shadow: none; }
  a { text-decoration: none; }
  /* pictures print small: the hero and aside pictures at half width, the bleed as a strip */
  .car-hero__picture, .aside-col > figure { max-width: 60%; }
  .pair { grid-template-columns: 1fr 1fr; }
  .fig--bleed img { max-height: 70mm; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card__pic, .card__mono { aspect-ratio: 3 / 2; }
  /* the gallery prints as a contact sheet: six small frames a row, each with its number, matching the credits */
  /* one grid per group, so a folded group's pictures run on from its first 5 without a break */
  .gallery__group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4pt; }
  .gallery__group > h3 { grid-column: 1 / -1; margin: 0; }
  .gallery__grid, .gallery__more, .fold { display: contents; }
  .gallery__cap { font-size: 0; margin-top: 1pt; }
  .gallery__cap b { font-size: 7pt; }
  .gallery__lead { grid-column: auto; grid-row: auto; }
  .gallery__lead .gallery__thumb img { position: static; aspect-ratio: 4 / 3; height: auto; }
  /* print shows everything: folded pictures and credits print open; the fold chips do not print */
  .gallery__more::details-content, .fold::details-content, .gallery__credits::details-content { content-visibility: visible; display: contents; }
  @supports selector(::details-content) { .gallery__more > summary, .fold > summary { display: none; } } /* without it the fold prints closed, and its chip says so */
  .gallery__credits > summary { border: 0; padding: 0; } /* a label on paper, not a button */
  .gallery__credits > summary::after { content: none; }
}