/* ============================================================
   auctionhistory.vin — Concept A "Quiet Confidence"
   Single stylesheet · Zero deps · System fonts · Mobile-first
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; }
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
button { cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 2. Design tokens ---------- */
:root {
  /* Surfaces — cool mist (was warm paper-cream) */
  --surface-page: #F1F5F5;
  --surface-card: #FFFFFF;
  --surface-deep: #E0EAE9;
  --surface-tint: #E9F1F0;

  /* Lines */
  --border-line: #D8E3E2;
  --border-strong: #93A3A1;

  /* Text */
  --text-primary: #14181A;
  --text-secondary: #51585A;
  --text-muted: #828A8C;
  --text-inverse: #F1F5F5;

  /* Single cool accent — petrol teal */
  --accent: #0D6E66;
  --accent-hover: #0A574F;
  --accent-tint: #D2E9E6;
  --accent-text: #FFFFFF;          /* white-on-teal — ~5.8:1 (AA) */

  /* Danger accent — Remove VIN destructive action.
     Dark red avoids signalling "salvage" status (--status-rebuilt) while
     still reading as a serious, irreversible-feeling action. */
  --danger: #8B1A1A;
  --danger-hover: #6B0F0F;
  --danger-text: #FAF8F4;

  /* Status (triple-encoded with icon + text) */
  --status-clean: #2F7D32;
  --status-clean-tint: #E5F0E5;
  --status-salvage: #B45309;
  --status-salvage-tint: #FCE7CE;
  --status-rebuilt: #B91C1C;
  --status-rebuilt-tint: #FBE5E5;
  --status-info: #5A5C63;
  --status-info-tint: #ECEAE4;

  /* Typography — system stack, zero font requests.
     Default Latin/Cyrillic fall-through via --font-sans-default;
     locale-aware overrides below switch on [lang] selector. */
  --font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-sans-default);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular 1.250 (major third) — body 16px desktop / 17px mobile */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5625rem;   /* 25px */
  --text-2xl: 1.9375rem;  /* 31px */
  --text-3xl: 2.4375rem;  /* 39px */
  --text-display: 3.0625rem; /* 49px */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  /* Spacing — 4px baseline */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius — never sharp, never pill */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Motion — subtle only */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;

  /* Layout */
  --container-max: 1280px;
  --container-text: 720px;
  --gutter: 16px;
  --header-h: 60px;
}

@media (min-width: 768px) { :root { --gutter: 20px; --header-h: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 24px; --header-h: 68px; } }

/* Dark mode tokens */
[data-theme="dark"] {
  --surface-page: #0F1115;
  --surface-card: #171A20;
  --surface-deep: #1F232B;
  --surface-tint: #14171D;
  --border-line: #2A2F39;
  --border-strong: #4A5161;
  --text-primary: #F0EDE6;
  --text-secondary: #9A98A0;
  --text-muted: #6A6E78;
  --text-inverse: #1A1B1F;
  --accent: #2DD4BF;
  --accent-hover: #5EEAD4;
  --accent-tint: #0E2E2A;
  --accent-text: #08100F;          /* ink stays dark on bright teal in dark mode too */
  --danger: #B91C1C;
  --danger-hover: #DC2626;
  --danger-text: #FAF8F4;
  --status-clean: #4CAF50;
  --status-clean-tint: #1A2A1A;
  --status-salvage: #F59E0B;
  --status-salvage-tint: #2A1F11;
  --status-rebuilt: #EF4444;
  --status-rebuilt-tint: #2A1414;
  --status-info: #9A98A0;
  --status-info-tint: #1F232B;
}

/* Auto dark-mode (prefers-color-scheme) intentionally disabled — the site is
   light-only for one consistent brand look. The [data-theme="dark"] block above
   is kept as infrastructure for an optional manual toggle later. */

/* ---------- 3. Base typography ---------- */
html {
  font-family: var(--font-sans);
  font-size: 17px;            /* mobile */
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "kern" 1, "liga" 1;
}
@media (min-width: 768px) { html { font-size: 16px; } }

body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 500; }

@media (min-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}

p { margin: 0; }

strong { font-weight: 500; }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

::selection { background: var(--accent-tint); color: var(--text-primary); }

/* ---------- 4. Utility ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hidden with the clip technique, not an off-screen offset: a -10000px
   inset-inline-start becomes right:-10000px in RTL and lets the page scroll
   10 000px into nothing on every Arabic page. */
.skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: var(--s-2);
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: var(--text-primary);
  color: var(--text-inverse);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  z-index: 100;
  font-size: var(--text-sm);
  font-weight: 500;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip: auto; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 var(--s-3);
}

.section-divider {
  border: 0;
  border-top: 1px solid var(--border-line);
  margin: 0;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              transform var(--dur-fast) var(--ease-std);
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--accent);
  color: var(--accent-text);
}
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:focus-visible { outline-color: var(--accent); outline-offset: 3px; }

.btn--ink {
  background: var(--text-primary);
  color: var(--text-inverse);
}
.btn--ink:hover { background: #000; }
[data-theme="dark"] .btn--ink:hover,
:root:not([data-theme="light"]) .btn--ink:hover { background: #fff; color: #000; }

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--outline:hover { background: var(--surface-deep); }

.btn--danger {
  background: var(--danger);
  color: var(--danger-text);
}
.btn--danger:hover { background: var(--danger-hover); }
.btn--danger:focus-visible { outline-color: var(--danger); outline-offset: 3px; }

.btn--lg { min-height: 52px; padding: var(--s-4) var(--s-6); font-size: var(--text-lg); }
.btn--sm { min-height: 36px; padding: var(--s-2) var(--s-4); font-size: var(--text-sm); }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-line);
  height: var(--header-h);
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;       /* never "auctionhistory. / vin"; the nav wraps instead */
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.brand__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-primary);
  display: inline-block;
}
.brand__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 1px 0 -1px;
  vertical-align: baseline;
}

.primary-nav { display: none; }
.site-header__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 36px;
  padding: 0 var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lang-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ---------- Language dropdown ---------- */
/* Pattern: globe icon + endonym + chevron, button toggles listbox.
   Used in nav header (id="lang-list-nav") and footer bottom (id="lang-list-footer").
   CSS-only fallback via :focus-within when JS unavailable. */
.lang-dropdown {
  position: relative;
  display: inline-flex;
}
.lang-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.lang-dropdown__trigger:hover,
.lang-dropdown__trigger:focus-visible { border-color: var(--border-strong); }
.lang-dropdown__current { line-height: 1; }
.lang-dropdown__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-fast) var(--ease-std);
  color: var(--text-secondary);
}
.lang-dropdown__trigger[aria-expanded="true"] .lang-dropdown__chevron {
  transform: rotate(180deg);
}
.lang-dropdown__list {
  position: absolute;
  inset-inline-end: 0;                /* aligns to start in RTL automatically */
  inset-block-start: calc(100% + var(--s-1));
  /* 25 locales — 2-column grid keeps the menu inside one viewport. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 300px;
  max-width: 340px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: var(--s-1) 0;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px rgba(26, 27, 31, 0.10);
  z-index: 50;
}
/* Force visible scrollbar so users know list is scrollable on macOS. */
.lang-dropdown__list { scrollbar-width: thin; }
.lang-dropdown__list::-webkit-scrollbar { width: 8px; }
.lang-dropdown__list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
[data-theme="dark"] .lang-dropdown__list,
:root:not([data-theme="light"]) .lang-dropdown__list {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.lang-dropdown__list[hidden] { display: none; }
/* CSS-only fallback when JS is disabled — show on focus-within */
.lang-dropdown:not(:has(.lang-dropdown__trigger[aria-expanded])) .lang-dropdown__list { display: none; }
.lang-dropdown:focus-within .lang-dropdown__list { display: grid; }
/* When JS is active and aria-expanded=false, force hidden via attribute */
.lang-dropdown__trigger[aria-expanded="false"] + .lang-dropdown__list { display: none; }
.lang-dropdown__trigger[aria-expanded="true"] + .lang-dropdown__list { display: grid; }
.lang-dropdown__list a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-decoration: none;
}
.lang-dropdown__list a:hover,
.lang-dropdown__list a:focus-visible { background: var(--surface-deep); }
.lang-dropdown__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
}
.lang-dropdown__name { flex: 1; }
.lang-dropdown__list li[aria-selected="true"] a { background: var(--surface-deep); }
@media (max-width: 479px) {
  /* Single column on narrow viewports — 2 columns would crowd the text. */
  .lang-dropdown__list {
    grid-template-columns: 1fr;
    min-width: 240px;
    max-width: calc(100vw - var(--s-7));
  }
}

/* Footer variant — chevron rotates from bottom-anchored dropdown */
.lang-dropdown--footer .lang-dropdown__list {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--s-1));
}

/* Mobile drawer — CSS-only checkbox-hack */
.nav-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.nav-toggle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  cursor: pointer;
  border-radius: var(--r-md);
}
.nav-toggle-label:hover { background: var(--surface-deep); }
.nav-toggle-label .icon-close { display: none; }
.nav-toggle:checked ~ .nav-toggle-label .icon-open { display: none; }
.nav-toggle:checked ~ .nav-toggle-label .icon-close { display: block; }

.nav-toggle:checked ~ .primary-nav {
  display: block;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--surface-page);
  z-index: 40;
  overflow-y: auto;
  padding: var(--s-5) var(--gutter);
  border-top: 1px solid var(--border-line);
}
.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.primary-nav__list a {
  display: block;
  padding: var(--s-3) var(--s-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-line);
}
.primary-nav__list a:hover { color: var(--accent); }
.primary-nav__list a[aria-current="page"] { color: var(--text-primary); }

/* The header CTA only fits next to the brand and the language control on
   desktop; the mobile menu carries a Reports item instead. */
.site-header__cta { display: none; }
@media (min-width: 1280px) {
  .site-header__cta { display: inline-flex; }
}
/* Phones: brand + burger + "Українська"/"ქართული" do not fit in 360px; the
   trigger keeps its aria-label, the globe and the chevron, the list shows
   the names. */
@media (max-width: 479px) {
  .site-header .lang-dropdown__current { display: none; }
}

/* 1024, not 768: between them the brand, six nav items and the language
   control overflow the row in most locales (uk needs 927px). */
@media (min-width: 1024px) {
  .nav-toggle-label { display: none; }
  /* Eight items overflow the row until 1280 in ka/hy/uk; Reports reaches
     the header as the CTA button from 1280 and sits in the footer meanwhile. */
  .primary-nav__reports { display: none; }
  .primary-nav,
  .nav-toggle:checked ~ .primary-nav {
    display: block;
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    border-top: 0;
    overflow: visible;
  }
  .primary-nav__list {
    flex-direction: row;
    gap: var(--s-1);
  }
  .primary-nav__list a {
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 0;
    border-radius: var(--r-md);
  }
  .primary-nav__list a:hover { color: var(--text-primary); background: var(--surface-deep); }
  .primary-nav__list a[aria-current="page"] { color: var(--text-primary); }
}

/* ---------- 7. Hero ---------- */
.hero {
  padding: var(--s-7) 0 var(--s-7);
  border-bottom: 1px solid var(--border-line);
}
@media (min-width: 768px) { .hero { padding: var(--s-9) 0 var(--s-8); } }
@media (min-width: 1024px) { .hero { padding: var(--s-10) 0 var(--s-9); } }

.hero__inner { max-width: 960px; }

.hero__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
@media (min-width: 768px) { .hero__title { font-size: var(--text-3xl); } }
@media (min-width: 1024px) { .hero__title { font-size: var(--text-display); } }

.hero__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: var(--s-6);
  line-height: var(--leading-snug);
}
@media (min-width: 768px) {
  .hero__sub { font-size: var(--text-lg); margin-bottom: var(--s-7); }
}

/* Search — dual VIN + Lot */
.search {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 768px) {
  .search {
    grid-template-columns: 1.7fr 1fr auto;
    gap: var(--s-3);
    align-items: end;
  }
}

.search__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.search__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  padding-inline-start: var(--s-1);
}
.search__input {
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.search__input::placeholder { color: var(--text-muted); text-transform: uppercase; }
.search__input:hover { border-color: var(--border-strong); }
.search__input:focus { border-color: var(--text-primary); outline: none; box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--text-primary); }

.search__submit {
  min-height: 56px;
  padding: 0 var(--s-6);
  background: var(--text-primary);
  color: var(--text-inverse);
  border-radius: var(--r-md);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background-color var(--dur-fast) var(--ease-std);
}
.search__submit:hover { background: #000; }
[data-theme="dark"] .search__submit:hover,
:root:not([data-theme="light"]) .search__submit:hover { background: #fff; color: #000; }
.search__submit:active { transform: translateY(1px); }

.search__submit--danger {
  background: var(--danger);
  color: var(--danger-text);
}
.search__submit--danger:hover { background: var(--danger-hover); color: var(--danger-text); }
[data-theme="dark"] .search__submit--danger:hover,
:root:not([data-theme="light"]) .search__submit--danger:hover {
  background: var(--danger-hover);
  color: var(--danger-text);
}

.form-note {
  margin-top: var(--s-3);
  max-width: 720px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Hero stat strip */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-line);
  margin-top: var(--s-5);
}
.stat-strip strong { color: var(--text-primary); font-weight: 500; }
.stat-strip__sep { color: var(--text-muted); }

/* ---------- 8. Section header ---------- */
.section {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-line);
}
@media (min-width: 768px) { .section { padding: var(--s-8) 0; } }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.section__title-wrap { display: flex; flex-direction: column; gap: var(--s-2); }
.section__title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
@media (min-width: 768px) { .section__title { font-size: var(--text-2xl); } }
.section__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--s-1);
}
.section__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.section__link:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }

/* Marker label — library-catalog "§ 01" */
.marker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-feature-settings: "tnum" 1;
}
/* "§ NN" section numbering hidden — it reads as a Linear/AI-template tell.
   Restore the library-catalog markers by deleting the display:none rule. */
.marker__num { display: none; }

/* ---------- 9. Carousel ---------- */
.carousel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--s-1) 0 var(--s-5);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-track { background: transparent; }
.carousel::-webkit-scrollbar-thumb { background: var(--border-line); border-radius: 3px; }
.carousel::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 76vw;
  max-width: 280px;
}
@media (min-width: 768px) { .carousel > * { flex: 0 0 240px; } }
@media (min-width: 1024px) { .carousel > * { flex: 0 0 256px; } }

@media (prefers-reduced-motion: reduce) {
  .carousel { scroll-behavior: auto; }
}

/* ---------- 9b. Model grid (wraps; used on /make/{slug} when there are
   too many models for a single-row carousel) ---------- */
.model-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: var(--s-1) 0 var(--s-5);
}

/* ---------- 10. Lot card ---------- */
.lot-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.lot-card:hover { border-color: var(--border-strong); }
.lot-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-deep), var(--surface-card));
  border-bottom: 1px solid var(--border-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lot-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.lot-card__media-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--s-3);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0));
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lot-card__media-label strong {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}

.lot-card__badge {
  position: absolute;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: 2;
}

.lot-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.lot-card__title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lot-card__vin {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
/* Compact lot-card meta (no visible labels for self-evident values; aria-label kept for SR) */
.lot-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-line);
}
.lot-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.lot-card__meta > span { white-space: nowrap; }
.lot-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lot-card__date span { color: var(--text-secondary); font-weight: 500; padding-inline-end: 4px; }

/* Stretched-link pattern: the title <a> stays the only real anchor (semantic
   heading-link), but its ::after pseudo-element overlays the whole card, so
   any click on the card surface routes to /vin/{vin}. The badge already has
   z-index 2 (set earlier), so it stays above the click overlay. */
.lot-card { position: relative; }
.lot-card__title a {
  color: inherit;
  text-decoration: none;
}
.lot-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lot-card:hover .lot-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lot-card__title a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- 11. Status badges (triple-encoded) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
  line-height: 1;
}
.badge svg { flex-shrink: 0; }
.badge--clean { color: var(--status-clean); background: var(--status-clean-tint); }
.badge--salvage { color: var(--status-salvage); background: var(--status-salvage-tint); }
.badge--rebuilt { color: var(--status-rebuilt); background: var(--status-rebuilt-tint); }
.badge--info { color: var(--status-info); background: var(--status-info-tint); }
.badge--multi {
  color: var(--status-salvage);
  background: var(--status-salvage-tint);
  border-color: var(--status-salvage);
}

/* ---------- 12. Quadrant grid (Browse by category) ---------- */
.quadrants {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .quadrants { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .quadrants { grid-template-columns: repeat(4, 1fr); } }

.quadrant {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  padding: var(--s-5);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.quadrant:hover { border-color: var(--border-strong); background: var(--surface-tint); }
.quadrant__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.quadrant__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: var(--s-3) 0 var(--s-2);
}
.quadrant__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}
.quadrant__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-top: var(--s-4);
}
.quadrant__arrow svg {
  transition: transform var(--dur-fast) var(--ease-std);
}
.quadrant:hover .quadrant__arrow svg { transform: translateX(4px); }

/* ---------- 13. Make grid (Top 10 makes) ---------- */
.makes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 480px) { .makes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .makes-grid { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } }
@media (min-width: 1024px) { .makes-grid { grid-template-columns: repeat(10, 1fr); } }

.make-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  aspect-ratio: 1 / 1;
  padding: var(--s-2);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.make-cell:hover { border-color: var(--border-strong); background: var(--surface-tint); }
.make-cell__mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.02em;
  border: 1px solid var(--border-line);
}
.make-cell__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.make-cell__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ---------- 14. Damage cards ---------- */
.damage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .damage-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .damage-grid { grid-template-columns: repeat(4, 1fr); } }

.damage-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.damage-card:hover { border-color: var(--border-strong); }
.damage-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.damage-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.damage-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.damage-card__count strong { color: var(--text-primary); font-weight: 500; }

/* ---------- 15. Why use (3-col value prop) ---------- */
.why {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) { .why { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.why__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--text-primary);
}
.why__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.why__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.why__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ---------- 16. Commercial CTA strip ---------- */
.cta-strip {
  background: var(--surface-deep);
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
  padding: var(--s-7) 0;
}
@media (min-width: 768px) { .cta-strip { padding: var(--s-8) 0; } }

.cta-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* not 1fr: the nowrap button would widen the track */
  gap: var(--s-5);
  align-items: center;
}
/* The big button carries a long label in some locales ("Отримати повний
   VIN-звіт"); let it wrap on phones instead of pushing the strip sideways. */
.cta-strip__action .btn--lg,
.vin-cta .btn { white-space: normal; text-align: start; }
@media (min-width: 768px) {
  .cta-strip__inner { grid-template-columns: 1.5fr auto; gap: var(--s-7); }
}
.cta-strip__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: var(--s-3);
  overflow-wrap: anywhere;
}
@media (min-width: 768px) { .cta-strip__title { font-size: var(--text-2xl); } }
.cta-strip__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 60ch;
  line-height: var(--leading-normal);
}
.cta-strip__action {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
}
@media (min-width: 768px) { .cta-strip__action { align-items: flex-end; } }
.cta-strip__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- 17. Footer (11-column link-equity distributor)
   Per planning/02-architecture/navigation-spec.md §3.1 — ~80 internal links,
   collapses into <details> accordion on mobile. */
.site-footer {
  background: var(--surface-page);
  padding: var(--s-7) 0 var(--s-5);
  font-size: var(--text-sm);
}
@media (min-width: 768px) { .site-footer { padding: var(--s-8) 0 var(--s-5); } }

/* Brand block */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-line);
  max-width: 720px;
}
.site-footer__brand .brand { font-size: var(--text-lg); }
.site-footer__tagline {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 56ch;
}

/* 11-column nav grid (mobile: 1-col stacked accordion / tablet: 3-col / desktop: 11-col) */
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-line);
}
@media (min-width: 600px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-5); }
}
/* minmax(0, …): a plain 1fr track grows to its longest word ("Rückerstattung")
   and pushes the grid past the viewport. */
@media (min-width: 1024px) {
  .site-footer__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}
@media (min-width: 1280px) {
  .site-footer__cols { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

/* Mobile: <details> accordion */
.site-footer__col { border-bottom: 1px solid var(--border-line); }
.site-footer__col:last-child { border-bottom: 0; }

.site-footer__col-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0;
}
.site-footer__col-title::-webkit-details-marker { display: none; }
.site-footer__col-title::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text-muted);
}
.site-footer__col[open] .site-footer__col-title::after { content: "−"; }

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 0 var(--s-4);
}
.site-footer__col a {
  display: inline-block;
  padding: var(--s-1) 0;          /* ≥ 28px tap height on touch screens */
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-std);
}
.site-footer__col a:hover { color: var(--text-primary); }
.site-footer__col a[aria-current="true"] { color: var(--text-primary); font-weight: 500; }

/* Tablet+: disable accordion behavior, force columns open */
@media (min-width: 600px) {
  .site-footer__col { border-bottom: 0; }
  .site-footer__col-title {
    display: block;
    cursor: default;
    padding: 0 0 var(--s-3);
  }
  .site-footer__col-title::after { display: none; }
  .site-footer__col ul { padding: 0; }
}

/* Bottom strip — copyright + disclaimer (Privacy/Terms/lang are in column 11) */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
.site-footer__disclaimer { color: var(--text-muted); }

/* ---------- 18. Icons ---------- */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* ============================================================
   SPOKE / LISTING PAGE COMPONENTS
   Used on /make/[make]/[model], /damage/[type], /copart/[date], etc.
   ============================================================ */

/* ---------- Breadcrumb (4-level) ---------- */
.breadcrumb {
  padding: var(--s-3) 0;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-line);
  font-size: var(--text-sm);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); padding: 0 2px; }
.breadcrumb a {
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  padding-block: var(--s-1) 1px;
  transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.breadcrumb a:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

/* ---------- Spoke header ---------- */
.spoke-header {
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--border-line);
}
@media (min-width: 768px) { .spoke-header { padding: var(--s-8) 0 var(--s-7); } }

.spoke-header__inner { max-width: 880px; }
.spoke-header__h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: var(--s-3);
}
@media (min-width: 768px) { .spoke-header__h1 { font-size: var(--text-3xl); } }

/* Spec-meta strip — facts panel under H1 */
.spec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
  margin: var(--s-4) 0 var(--s-5);
}
.spec-meta strong { color: var(--text-primary); font-weight: 500; }
.spec-meta__sep { color: var(--text-muted); }

/* Long-form intro */
.prose {
  max-width: 65ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}
.prose p { margin-bottom: var(--s-4); }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.prose a:hover { border-bottom-color: var(--text-primary); }
.prose strong { font-weight: 500; }
/* Long-form policy pages use .prose with h2 + ul. Re-introduce list-style
   (the global reset strips it) and add headroom between sections. */
.prose h2 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}
.prose h2:first-child { margin-top: 0; }
.prose ul {
  list-style: disc;
  padding-inline-start: var(--s-5);
  margin-bottom: var(--s-4);
}
.prose ul li { margin-bottom: var(--s-2); }
.prose ul li:last-child { margin-bottom: 0; }

/* Lead paragraph — single-paragraph variant of .prose, sits at hub-header top */
.prose__lead {
  max-width: 65ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin: 0;
}
.prose__lead a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.prose__lead a:hover { border-bottom-color: var(--text-primary); }
.prose__lead strong { font-weight: 500; }

/* Dense prose — for "About" tail content (smaller, secondary text color) */
.prose--dense {
  max-width: 65ch;
  font-size: 0.9375rem;        /* 15px — smaller than body 16px */
  line-height: 1.55;
  color: var(--text-secondary);
}
.prose--dense p { margin-bottom: var(--s-3); }
.prose--dense p:last-child { margin-bottom: 0; }
.prose--dense strong { color: var(--text-primary); font-weight: 500; }
.prose--dense a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-line);
  transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.prose--dense a:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }

/* "About this model" section — hub-page tail, lower visual weight than lead */
.about-section {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
  background: var(--surface-tint);
}
@media (min-width: 768px) { .about-section { padding: var(--s-8) 0; } }
.about-section__header { margin-bottom: var(--s-4); max-width: 65ch; }
.about-section__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 var(--s-2);
}
.about-section__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
@media (min-width: 768px) { .about-section__title { font-size: var(--text-2xl); } }

/* ---------- Filter strip (sticky, CSS-only dropdowns) ---------- */
.filter-strip {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-line);
  padding: var(--s-3) 0;
}
.filter-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.filter-strip__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-inline-end: var(--s-2);
  border-inline-end: 1px solid var(--border-line);
  white-space: nowrap;
  flex-shrink: 0;
}

.facet {
  position: relative;
  flex-shrink: 0;
}
.facet > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  min-height: 36px;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-std);
}
.facet[open] > summary::after { transform: rotate(-135deg) translateY(2px); }
.facet > summary:hover { border-color: var(--border-strong); }
.facet[open] > summary { border-color: var(--text-primary); background: var(--surface-tint); }
.facet__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.facet__panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  padding: var(--s-2);
  z-index: 31;
}
.facet__panel ul { display: flex; flex-direction: column; gap: 2px; }
.facet__panel a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
}
.facet__panel a:hover { background: var(--surface-deep); color: var(--text-primary); }
.facet__panel a span:last-child {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .facet__panel {
    position: static;
    margin-top: var(--s-2);
    width: 100%;
    box-shadow: none;
  }
}

/* AggregateOffer visible summary */
.agg-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.agg-summary strong { color: var(--text-primary); font-weight: 500; }
.agg-summary__sep { color: var(--text-muted); }

/* ---------- Lot grid (50 cards / page) ---------- */
.lot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 480px) { .lot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .lot-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .lot-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Pagination ---------- */
.pagination {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-line);
}
.pagination__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: stretch;
}
@media (min-width: 768px) {
  .pagination__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
}
.pagination__list a, .pagination__list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.pagination__list a:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pagination__list .is-current {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background: var(--surface-card);
}
.pagination__list .is-gap { border-color: transparent; color: var(--text-muted); }
.pagination__list a.is-prev,
.pagination__list a.is-next { border-color: var(--border-line); }

.pagination__jump {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.pagination__jump label { white-space: nowrap; }
.pagination__jump input {
  width: 64px;
  height: 36px;
  padding: 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  color: var(--text-primary);
}
.pagination__jump input:focus { border-color: var(--text-primary); outline: none; }
.pagination__jump button {
  padding: 0 var(--s-3);
  height: 36px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.pagination__jump button:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ---------- Sub-hub damage strip (3 cards) ---------- */
.sub-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .sub-hub-grid { grid-template-columns: repeat(3, 1fr); } }

.sub-hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.sub-hub-card:hover { border-color: var(--border-strong); }
.sub-hub-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.sub-hub-card__title {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sub-hub-card__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}
.sub-hub-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-line);
}
.sub-hub-card__count strong { color: var(--text-primary); font-weight: 500; }

/* ---------- Related model card (carousel-shaped) ---------- */
.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-std);
  height: 100%;
}
.related-card:hover { border-color: var(--border-strong); }
.related-card__model {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.related-card__make {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.related-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-top: var(--s-2);
  margin-top: var(--s-1);
  border-top: 1px solid var(--border-line);
}
.related-card__meta dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.related-card__meta dd { margin: 0; color: var(--text-primary); text-align: end; font-weight: 500; }

/* ---------- Spoke commercial CTA (single accent button at bottom) ---------- */
.spoke-cta {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-line);
}
.spoke-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 720px;
}
.spoke-cta__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.spoke-cta__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}
.spoke-cta__action { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- Cross-silo block ---------- */
.cross-silo {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-line);
}
.cross-silo__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--s-4);
}
.cross-silo__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2) var(--s-5);
}
@media (min-width: 600px) { .cross-silo__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cross-silo__list { grid-template-columns: repeat(3, 1fr); } }
.cross-silo__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-line);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-std);
}
.cross-silo__list a:hover { color: var(--accent); }
.cross-silo__list a span:last-child {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
/* The error page puts a sentence, not a count, in the trailing span: stack
   it under the label and let it wrap — nowrap made every 404 scroll sideways. */
.cross-silo__list--stacked a {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}
.cross-silo__list--stacked a span:last-child {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  white-space: normal;
}

/* ============================================================
   VIN / LOT DETAIL — densest page-type
   ============================================================ */

/* Multi-sale highlight banner — status-amber, NOT brand accent */
.banner-multi {
  background: var(--status-salvage-tint);
  border-top: 1px solid var(--status-salvage);
  border-bottom: 1px solid var(--status-salvage);
  padding: var(--s-3) 0;
}
.banner-multi__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--status-salvage);
}
.banner-multi__icon { color: var(--status-salvage); flex-shrink: 0; }
.banner-multi__text { font-weight: 500; }
.banner-multi__text strong { font-weight: 600; }
.banner-multi__link {
  margin-inline-start: auto;
  color: var(--status-salvage);
  border-bottom: 1px solid var(--status-salvage);
  padding-bottom: 1px;
  white-space: nowrap;
}

/* Entity header */
.entity-header {
  padding: var(--s-5) 0 var(--s-4);
}
.entity-header__h1 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
@media (min-width: 600px) { .entity-header__h1 { font-size: var(--text-xl); } }
@media (min-width: 1024px) { .entity-header__h1 { font-size: var(--text-2xl); } }
.vin-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.entity-subline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.entity-subline__sep { color: var(--text-muted); }

/* Sticky entity bar — 4-field tabular pattern (Polygonscan-borrowed).
   Default: in-flow with sticky-on-scroll baseline (graceful no-JS).
   .is-pinned: script.js toggles when scrollY > data-pin-after — switches to fixed top with elevation. */
.entity-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  background: var(--surface-card);
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
  padding: var(--s-3) 0;
}
.entity-bar.is-pinned {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 50;
  background: var(--surface-card);
  border-top: 0;
  box-shadow: 0 1px 0 var(--border-line), 0 4px 12px -8px rgba(26, 27, 31, 0.18);
}
[data-theme="dark"] .entity-bar.is-pinned,
:root:not([data-theme="light"]) .entity-bar.is-pinned {
  box-shadow: 0 1px 0 var(--border-strong), 0 4px 12px -6px rgba(0, 0, 0, 0.55);
}

.entity-bar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: center;
}
@media (min-width: 768px) {
  .entity-bar__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: var(--s-3) var(--s-5);
  }
}
.entity-bar__field {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.entity-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.entity-bar__value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-bar__value--mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.entity-bar__value--accent {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.entity-bar__cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-std);
}
.entity-bar__cta:hover { background: var(--accent-hover); }
.entity-bar__cta--danger {
  background: var(--danger);
  color: var(--danger-text);
}
.entity-bar__cta--danger:hover { background: var(--danger-hover); }
@media (min-width: 768px) { .entity-bar__cta { grid-column: auto; } }

/* Stack the primary + danger CTAs vertically in the same auto column so
   Remove VIN sits directly under Get report instead of wrapping to a
   second row of the entity bar. */
.entity-bar__cta-stack {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.entity-bar__cta-stack .entity-bar__cta { grid-column: auto; }
@media (min-width: 768px) {
  .entity-bar__cta-stack { grid-column: auto; min-width: 160px; }
}

/* Post-submit success notice — replaces the form once ?success=1 is set. */
.form-success {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: 500;
  max-width: 65ch;
}

/* Two-column main */
.vin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
}
@media (min-width: 1024px) {
  .vin-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-7); }
}
.vin-col { min-width: 0; }

/* Photo gallery */
.gallery__hero {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-deep), var(--surface-card));
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.gallery__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gallery__hero-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #fff;
  text-align: center;
  padding: var(--s-3) var(--s-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0));
  align-self: stretch;
  margin-top: auto;
}
.gallery__hero-label strong {
  display: block;
  color: #fff;
  font-size: var(--text-base);
  margin-bottom: var(--s-1);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.gallery__counter {
  position: absolute;
  bottom: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 2;
  background: rgba(26, 27, 31, 0.85);
  color: #fff;
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
}
.gallery__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.gallery__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-deep), var(--surface-card));
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std);
  text-decoration: none;
}
.gallery__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb:hover { border-color: var(--border-strong); }
.gallery__thumb--current {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--text-accent, #f59e0b);
}
.gallery__thumb--more { background: var(--surface-deep); color: var(--text-secondary); font-weight: 500; }

.gallery--lot { margin-bottom: 2rem; }
.gallery__lot-meta {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--text-accent, #f59e0b);
  background: var(--surface-deep);
}
.gallery__lot-title { display: block; font-size: 1.05rem; }
.gallery__lot-sub { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.15rem; }
.gallery__lot-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.85rem;
}
.gallery__stat-key { color: var(--text-secondary); margin-right: 0.25rem; }
.gallery__stat-val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Spec table — entity density (labels-start / values-end with tabular-nums) */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--text-sm);
}
.spec-table tr { transition: background-color var(--dur-fast) var(--ease-std); }
.spec-table tr:hover { background: var(--surface-deep); }
.spec-table th,
.spec-table td {
  padding: 10px var(--s-3);
  overflow-wrap: anywhere;
  vertical-align: middle;
  line-height: 1.3;
  border-bottom: 1px solid var(--border-line);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  text-align: start;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  width: 40%;
  padding-inline-end: var(--s-3);
}
.spec-table td {
  text-align: end;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 500;
}
.spec-table .badge { vertical-align: middle; }

/* Lever block */
.lever {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border-line);
}
.lever:first-child { border-top: 0; padding-top: 0; }
.lever__header { margin-bottom: var(--s-3); }
.lever__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 var(--s-2);
}
.lever__title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
@media (min-width: 768px) { .lever__title { font-size: var(--text-lg); } }
.lever__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  max-width: 65ch;
}
.lever__body p { margin-bottom: var(--s-3); }
.lever__body p:last-child { margin-bottom: 0; }
.lever__body a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
}
.lever__body a:hover { border-bottom-color: var(--text-primary); }
.lever__body strong { font-weight: 600; }
.lever__followup {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-line);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Lever 05 — Damage condition list (Run & drive + primary/secondary damage) */
.damage-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--s-3);
}
@media (min-width: 640px) {
  .damage-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-5);
  }
}
.damage-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-line);
}
.damage-list__item:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .damage-list__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.damage-list__item dt {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}
.damage-list__item dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  text-align: end;
  color: var(--text-primary);
}

/* Multi-sale timeline */
.timeline {
  display: grid;
  gap: var(--s-3);
}
.timeline__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);   /* 1fr alone grows to the longest dd on 320px */
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
}
.timeline__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.timeline__num small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: var(--s-1);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}
.timeline__details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.timeline__details dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.timeline__details dd { margin: 0; color: var(--text-primary); font-weight: 500; overflow-wrap: anywhere; }

/* Quartile meter */
.quartile { display: flex; flex-direction: column; gap: var(--s-3); }
.quartile__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 8px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-deep);
  border: 1px solid var(--border-line);
}
.quartile__seg { border-inline-end: 1px solid var(--border-line); }
.quartile__seg:last-child { border-inline-end: 0; }
.quartile__seg.is-active { background: var(--text-primary); }
.quartile__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quartile__labels span { padding: 0 4px; }
.quartile__labels .is-active { color: var(--text-primary); font-weight: 500; }

/* Right-column CTA card */
.vin-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
}
.vin-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 500;
}
.vin-cta__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.vin-cta__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}
.vin-cta__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
  font-size: var(--text-sm);
}
.vin-cta__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--text-secondary);
}
.vin-cta__list li svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.vin-cta__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-line);
}
.faq-list details { border-bottom: 1px solid var(--border-line); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-inline-start: var(--s-3);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover { color: var(--text-primary); }
.faq-list__answer {
  padding-bottom: var(--s-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 65ch;
}

/* Prev/Next lot nav */
.lot-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: var(--s-5) 0;
}
@media (min-width: 600px) { .lot-nav { grid-template-columns: 1fr 1fr; } }
.lot-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.lot-nav__link:hover { border-color: var(--border-strong); }
.lot-nav__link--next { text-align: end; }
.lot-nav__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.lot-nav__title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

/* Carousel header for VIN-detail similar-lots (smaller) */
.subcarousel { padding: var(--s-5) 0; border-top: 1px solid var(--border-line); }
.subcarousel:first-of-type { border-top: 0; }
.subcarousel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.subcarousel__title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.subcarousel__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. Print ---------- */
@media print {
  .site-header, .site-footer, .cta-strip, .nav-toggle-label, .toast { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* ---------- 21. JS-enhanced patterns (script.js) ----------
   All features below are progressive enhancement — pages work fully without JS.
   - .entity-bar.is-pinned: visual emphasis once scrollY > data-pin-after
   - .toast / .toast.show: clipboard / share feedback
   - [data-action="copy-vin"]: cursor pointer affordance on copyable rows
   ============================================================ */

.entity-bar.is-pinned {
  box-shadow: 0 1px 0 var(--border-line), 0 4px 12px -8px rgba(26, 27, 31, 0.18);
}
[data-theme="dark"] .entity-bar.is-pinned,
:root:not([data-theme="light"]) .entity-bar.is-pinned {
  box-shadow: 0 1px 0 var(--border-strong), 0 4px 12px -6px rgba(0, 0, 0, 0.55);
}

.spec-table tr[data-action="copy-vin"] { cursor: pointer; }
.spec-table tr[data-action="copy-vin"]:hover { background: var(--surface-deep); }
.spec-table tr[data-action="copy-vin"]:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
}

.toast {
  position: fixed;
  bottom: var(--s-5);
  inset-inline-start: var(--s-5);
  z-index: 100;
  background: var(--text-primary);
  color: var(--text-inverse);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-std),
              transform var(--dur-base) var(--ease-std);
  max-width: calc(100vw - var(--s-7));
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- 22. RTL: directional icons & symbols ----------
   Mark <svg class="icon icon-flip-rtl"> on directional glyphs (forward/back arrows,
   prev/next chevrons, breadcrumb separators, carousel controls) so they mirror in RTL.
   DO NOT add to: search/magnifier, brand logos, social icons, numbers/clocks/checkmarks,
   media play buttons (▶ — viewport-direction agnostic for media controls).
   The .quadrant__arrow svg moves on hover (translateX 4px); also flips in RTL.
   ============================================================ */

[dir="rtl"] .icon-flip-rtl,
[dir="rtl"] .quadrant__arrow svg,
[dir="rtl"] .quadrant:hover .quadrant__arrow svg {
  transform: scaleX(-1);
}
[dir="rtl"] .quadrant:hover .quadrant__arrow svg { transform: scaleX(-1) translateX(4px); }

/* ---------- 23. Language-aware font stacks ----------
   Override --font-sans on the locale selector. Each stack is system-only
   (zero web-font requests, zero CDN). The default stack handles Latin + Cyrillic
   (covers EN, UK, ES, FR, DE, RU, PL, etc. via Apple/Segoe UI/system-ui).
   ============================================================ */

[lang="ar"], [lang="he"], [lang="fa"], [lang="ur"],
[lang="ckb"], [lang="ps"], [lang="sd"], [lang="ug"], [lang="yi"], [lang="dv"] {
  --font-sans: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, var(--font-sans-default);
}

[lang^="zh-Hans"], [lang="zh-CN"], [lang="zh-SG"] {
  --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", var(--font-sans-default);
}
[lang^="zh-Hant"], [lang="zh-TW"], [lang="zh-HK"], [lang="zh-MO"] {
  --font-sans: -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", var(--font-sans-default);
}
[lang^="zh"]:not([lang^="zh-Hant"]):not([lang^="zh-TW"]):not([lang^="zh-HK"]):not([lang^="zh-MO"]) {
  --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", var(--font-sans-default);
}

[lang^="ja"] {
  --font-sans: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", var(--font-sans-default);
}

[lang^="ko"] {
  --font-sans: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", var(--font-sans-default);
}

[lang^="th"] {
  --font-sans: -apple-system, "Thonburi", "Leelawadee UI", "Noto Sans Thai", var(--font-sans-default);
}

/* Breadcrumb separator: slash glyph is symmetric, no flip needed.
   .facet > summary::after chevron points DOWN (block-axis), no flip needed.
   .faq-list summary::after is a +/− toggle, no flip needed. */

/* ===== YEAR CALENDAR (used by /{source}/{year}) =====
   12 month-cards in a responsive grid; each card has a heading and a
   day grid (7 columns, fixed cell). Days are mono-font links so the
   grid stays optically aligned regardless of digit width. */
.year-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin-block: var(--s-3) var(--s-6);
}
.year-calendar__month {
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.year-calendar__name {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  margin: 0 0 var(--s-2);
  text-transform: capitalize;
}
.year-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.year-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: transparent;
  border-radius: var(--r-sm, 4px);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-std);
}
.year-calendar__day:hover {
  background: var(--border-line);
  color: var(--text-primary);
}
.year-calendar__day--active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--surface-tint);
  position: relative;
}
.year-calendar__day--active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-accent, #f59e0b);
}
.year-calendar__day--empty {
  color: var(--text-muted);
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* ===== STACKED FORM (used by /contact) =====
   Vertical variant of the .search BEM block — same input styling, but
   fields stack always (no >768px column flip) and the wrapper is centred
   with a comfortable max-width. Lives at the end so the override
   for .search grid-template-columns wins by source order. */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 520px;
  margin-block: var(--s-4) var(--s-6);
}
.form-stack textarea.search__input {
  min-height: 160px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-base, 1rem);
  resize: vertical;
}
.form-stack .search__submit {
  align-self: flex-start;
}

/* ===== RTL READINESS =====
   This stylesheet uses CSS logical properties (inline-start/end, inset-inline-*,
   text-align: start/end, margin-inline-*) instead of physical (left/right).
   Layout auto-flips on:
       <html dir="rtl">
   for languages: ar, he, fa, ur, ckb, ps, sd, ug, yi, dv.
   Block-axis properties (top/bottom/height/padding-block-*) stay physical
   because writing-mode: horizontal-tb is the default and inline axis is what
   reverses in RTL. Specific exceptions retained as physical (with rationale):
       - top:    sticky/fixed positioning anchors to viewport top in all locales
       - bottom: toast/badge anchors to viewport bottom in all locales
       - border-bottom on dividers, focus rings, accordions — purely block-axis
       - rgba(...) overlays that don't change with reading direction
   Smoke test plan (Batch C): add `<html dir="rtl" lang="ar">` to a copy of
   home.html and verify nav/drawer/footer/sticky-header/lot cards mirror correctly.
   ============================================================ */

/* ============================================================
   Blog — index hub + post detail
   Concept A "Quiet Confidence" surfaces extended for long-form
   editorial. 720px reading column, modular typographic scale,
   1px-bordered cards (no shadow), restrained accent only on CTAs.
   ============================================================ */

/* Narrow container for prose */
.container--narrow { max-width: var(--container-text); }

/* Blog index — post grid */
.post-grid { padding: var(--s-7) 0; }
@media (min-width: 768px) { .post-grid { padding: var(--s-8) 0; } }

.post-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .post-grid__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .post-grid__list { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  background: var(--surface-card);
  border: 1px solid var(--border-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.post-card__link { text-decoration: none; color: inherit; }

.post-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
  text-wrap: balance;
  margin: 0;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-std);
}
.post-card:hover .post-card__title { color: var(--accent); }

.post-card__excerpt {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-line);
}

.post-grid__empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--s-8) 0;
  font-style: italic;
}

/* Blog post detail — article */
.article { padding: var(--s-7) 0 var(--s-8); }
@media (min-width: 768px) { .article { padding: var(--s-8) 0 var(--s-9); } }

.article__header {
  border-bottom: 1px solid var(--border-line);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-7);
}

.article__h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--text-primary);
}
@media (min-width: 768px) { .article__h1 { font-size: var(--text-3xl); } }
@media (min-width: 1024px) { .article__h1 { font-size: var(--text-display); } }

.article__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article__meta time { color: var(--text-secondary); }

/* Article body — long-form prose */
.article__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.article__body p { margin: 0 0 var(--s-4); }
.article__body > p:first-of-type {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.article__body h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--text-primary);
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-line);
}
@media (min-width: 768px) { .article__body h2 { font-size: var(--text-2xl); margin-top: var(--s-8); } }
.article__body > h2:first-of-type { border-top: 0; padding-top: 0; }

.article__body h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: var(--s-6) 0 var(--s-3);
}
@media (min-width: 768px) { .article__body h3 { font-size: var(--text-xl); } }

.article__body h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--s-5) 0 var(--s-2);
}

.article__body ul, .article__body ol {
  margin: 0 0 var(--s-5);
  padding-inline-start: var(--s-5);
  list-style: revert;
}
.article__body li { margin-bottom: var(--s-2); line-height: var(--leading-normal); }
.article__body li::marker { color: var(--text-muted); }

.article__body strong { color: var(--text-primary); font-weight: 600; }
.article__body em { font-style: italic; }

.article__body a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.article__body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.article__body blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-tint);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-style: italic;
}
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--surface-deep);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  border: 1px solid var(--border-line);
}
.article__body pre {
  margin: var(--s-5) 0;
  padding: var(--s-4);
  background: var(--surface-deep);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.article__body pre code { background: none; border: 0; padding: 0; }

.article__body hr { border: 0; border-top: 1px solid var(--border-line); margin: var(--s-6) 0; }

/* Tables */
.article__body table {
  margin: var(--s-5) 0 var(--s-6);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}
@media (min-width: 768px) { .article__body table { display: table; } }
.article__body th, .article__body td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border-line);
}
.article__body th {
  background: var(--surface-deep);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  border-bottom: 2px solid var(--border-strong);
}
.article__body tr:last-child td { border-bottom: 0; }
.article__body tbody tr:hover td { background: var(--surface-tint); }

/* Image fallback — placeholder card if image missing */
.article__body img {
  display: block;
  margin: var(--s-5) auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--surface-deep);
  border: 1px dashed var(--border-line);
  min-height: 60px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-align: center;
}

/* Q&A — H3 inside article body that follows a paragraph (looks question-like) */
.article__body h3 + p {
  background: var(--surface-tint);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border-inline-start: 2px solid var(--border-line);
  margin-top: var(--s-2);
}

/* Article footer CTA strip */
.article__footer {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-line);
}
.article__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}

/* Btn aliases — blog templates use --primary / --secondary names. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-std);
}
.btn--secondary:hover { background: var(--surface-deep); }

/* ---------- Author byline (blog post header) ---------- */
.article__byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}
.article__byline-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-line);
  background: var(--surface-deep);
  flex-shrink: 0;
}
.article__byline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.article__byline-name {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: baseline;
}
.article__byline-name a {
  font-weight: 600;
  border-bottom: 1px solid var(--border-line);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.article__byline-name a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.article__byline-role {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Reset article__meta inside byline so it stacks under name */
.article__byline .article__meta { margin: 0; padding: 0; }

/* ---------- Author bio page (/about/team/{slug}) ---------- */
.author-hero {
  padding: var(--s-7) 0 var(--s-5);
  border-bottom: 1px solid var(--border-line);
}
@media (min-width: 768px) { .author-hero { padding: var(--s-8) 0 var(--s-6); } }

.author-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
@media (min-width: 600px) {
  .author-hero__inner { flex-direction: row; align-items: center; gap: var(--s-6); }
}

.author-hero__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--border-line);
  background: var(--surface-deep);
  flex-shrink: 0;
}

.author-hero__head { flex: 1; min-width: 0; }
.author-hero__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin: var(--s-2) 0;
  color: var(--text-primary);
}
@media (min-width: 768px) { .author-hero__name { font-size: var(--text-3xl); } }
.author-hero__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--s-2);
}
.author-hero__short {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}

.author-bio { padding: var(--s-7) 0; }
.author-bio__h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--text-primary);
}
.author-bio__h2:first-child { margin-top: 0; }
.author-bio__text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin: 0 0 var(--s-4);
}

.author-bio__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.chip {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-deep);
  border: 1px solid var(--border-line);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.author-bio__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.author-bio__links a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--text-sm);
  word-break: break-all;
}
.author-bio__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.author-recent {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border-line);
}
.author-recent__h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-5);
  color: var(--text-primary);
}