/* ============================================================
   Your JDM Parts — stylesheet

   Every value here resolves to a token in tokens.css. No hex values,
   no invented colours, no gradients, no shadows except the modal.
   ============================================================ */

/* ── Reset ──────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  overflow-x: hidden; /* belt and braces: nothing may scroll sideways */
  -webkit-font-smoothing: antialiased;
}

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

img,
video { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* No italics anywhere in the system. */
i, em, cite, address, dfn, var { font-style: normal; }

/* ── Focus: a visible gold ring on everything interactive ───── */

:focus { outline: none; }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--bone);
  color: var(--text-on-bone);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

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

/* ── Layout ─────────────────────────────────────────────────── */

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

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-6 > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ── Pattern layer ──────────────────────────────────────────────
   Applied through its own absolutely-positioned element so opacity
   never touches content. Permitted on hero, page headers, footers,
   section dividers and empty states. Never behind listings, body
   copy, spec tables, product photos, checkout or forms.            */

.patterned { position: relative; isolation: isolate; }

.pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/assets/pattern-seigaiha.svg');
  background-repeat: repeat;
  background-size: var(--pattern-size) var(--pattern-size);
  opacity: var(--pattern-opacity);
  pointer-events: none;
}

/* ── Type ───────────────────────────────────────────────────── */

.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.display-1 { font-size: var(--size-d1); }
.display-2 { font-size: var(--size-d2); }
.display-3 { font-size: var(--size-d3); }

.mega {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: var(--size-mega);
  line-height: var(--leading-mega);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  margin: 0;
}

.mega__line { display: block; }
.mega__line--bone { color: var(--text-primary); }
.mega__line--sunrise { color: var(--sunrise); }

/* Outline stroke line. -webkit-text-stroke is the only reliable
   cross-browser route; the colour still comes from a token. */
.mega__line--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone-24);
}

.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-accent);
  margin: 0;
}

.eyebrow--muted { color: var(--text-muted); }

.label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.lede {
  font-size: var(--size-body-l);
  color: var(--text-muted);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); color: var(--text-muted); }
.prose > * + * { margin-top: var(--space-4); }
.prose strong { color: var(--text-primary); font-weight: 600; }

.mono {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.01em;
}

.price {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

.muted { color: var(--text-muted); }
.accent { color: var(--text-accent); }

/* ── Rule ───────────────────────────────────────────────────── */

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.rule--gold { border-top-color: var(--hairline-gold); }

/* ── Buttons ─────────────────────────────────────────────────────
   Marketing surfaces use a Sunrise fill for the section's one action.
   Retail and checkout surfaces use a Bone fill, and spend Sunrise only
   on "Add to order".                                                 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn[disabled],
.btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.btn--sunrise {
  background: var(--sunrise);
  color: var(--text-on-sunrise);
  border-color: var(--sunrise);
}
.btn--sunrise:hover { background: var(--bone); border-color: var(--bone); color: var(--text-on-bone); }

.btn--bone {
  background: var(--bone);
  color: var(--text-on-bone);
  border-color: var(--bone);
}
.btn--bone:hover { background: var(--gold); border-color: var(--gold); }

.btn--outline {
  border-color: var(--bone-24);
  color: var(--text-primary);
}
.btn--outline:hover { border-color: var(--bone); background: var(--bone-08); }

.btn--ghost { color: var(--text-muted); padding-inline: var(--space-3); }
.btn--ghost:hover { color: var(--text-primary); }

.btn--block { width: 100%; }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--size-body-l); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--hairline); }

.icon { width: 18px; height: 18px; stroke-width: 1.5; flex: none; }
.icon--sm { width: 16px; height: 16px; }

/* ── Badge and Tag ──────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem var(--space-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge--provenance { border-color: var(--hairline-gold); color: var(--text-accent); }
.badge--condition { border-color: var(--bone-24); color: var(--text-primary); }

/* Scarcity is an orange OUTLINE, never a fill. */
.badge--scarcity { border-color: var(--sunrise); color: var(--sunrise); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 44px on touch, where these are the main way into a chassis or a
     part type. Kept tighter on pointer devices so dense clusters of
     chassis codes do not turn into a wall of pills. */
  min-height: 34px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--size-small);
  color: var(--text-muted);
  transition: var(--transition);
}

a.tag:hover, button.tag:hover { color: var(--text-primary); border-color: var(--bone-24); }

.tag--active { color: var(--text-primary); border-color: var(--gold); }

.tag__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

/* ── Card ───────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card--flush { padding: 0; overflow: hidden; }
.card--ground { background: var(--surface-sunken); }

/* ── Listing cards ───────────────────────────────────────────────
   Sourcing, not stock. There are no prices and no stock counts on any
   card in this system: a price only exists once we have found the part. */

.card-eyebrow {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-accent);
}

/* ── Grids ──────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--space-5); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── SpecTable ──────────────────────────────────────────────── */

.spec-table { width: 100%; border-collapse: collapse; }

.spec-table caption {
  text-align: left;
  padding-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--size-small);
}

.spec-table th,
.spec-table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  width: 42%;
  padding-right: var(--space-4);
}

.spec-table td { color: var(--text-primary); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
}

.trade-strip {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunken);
  font-size: var(--size-micro);
}

.trade-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  min-height: 34px;
  padding-block: var(--space-1);
}

.trade-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

.trade-strip__item strong { color: var(--text-primary); font-weight: 700; }

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  padding-inline: var(--space-3);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.nav__link:hover { color: var(--text-primary); }
.nav__link[aria-current='page'] { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
  }
  .nav[data-open='true'] { display: flex; }
  .nav__link { min-height: 52px; }
  .site-header { position: sticky; }
  .nav-bar { position: relative; }
}

/* ── Logo ───────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* Clear space equals one post-width on all sides. */
  --logo-clear: 0.09em;
  padding: var(--logo-clear);
}

/* The header lockup is a link home, and on a phone it is a thumb target
   before it is a mark. At 40px plus clear space it measured 43px, one pixel
   under the minimum — so the link is given the height. The artwork is
   untouched: same size, same proportions, same clear space. */
a.logo { min-height: var(--hit); }

.logo--vertical { flex-direction: column; text-align: center; gap: var(--space-2); }

/* Mark-only lockup: nothing sits beside it, so it needs no gap. */
.logo--mark { gap: 0; }

.logo__gate { fill: var(--bone); }
.logo__sun { fill: var(--sunrise); }
.logo--mono .logo__gate { fill: currentColor; }

.logo__type { display: flex; flex-direction: column; gap: 2px; }

.logo__word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
  white-space: nowrap;
}

.logo__tagline {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-accent);
}

.logo--tile {
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-lg);
}

/* ── Hero ───────────────────────────────────────────────────────
   Media-optional. With no footage it is the patterned Midnight
   ground. Drop a poster or video in and it becomes full-bleed, with
   a FLAT scrim — never a gradient.                                  */

.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--midnight-86); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-9);
}

/* The headline is three lines by design. Never let one wrap into four. */
.hero .mega__line { white-space: nowrap; }

.hero__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__mark { display: flex; justify-content: center; align-items: center; }
.hero__mark .logo__mark { width: min(320px, 100%); height: auto; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-7); }
  .hero__mark { order: -1; justify-content: flex-start; }
  .hero__mark .logo__mark { width: 140px; }
}

/* ── Chassis ticker — the single sanctioned keyframe animation ── */

.ticker {
  border-block: 1px solid var(--hairline);
  overflow: hidden;
  padding-block: var(--space-3);
}

.ticker__track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  animation: ticker-scroll 48s linear infinite;
}

.ticker__item {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-muted);
  white-space: nowrap;
}

.ticker__item span { color: var(--text-accent); }

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: 100%; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Stat band ──────────────────────────────────────────────── */

.stat-band { border-block: 1px solid var(--hairline-gold); background: var(--surface-sunken); }

.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-7);
}

.stat { display: flex; flex-direction: column; gap: var(--space-2); }

.stat__value {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
}

.stat__label {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

@media (max-width: 860px) { .stat-band__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Editorial panels ───────────────────────────────────────── */

.panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--hairline);
}

.panel:last-of-type { border-bottom: 0; }
.panel--flip .panel__media { order: -1; }

.panel__media {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__media .logo__mark { width: 26%; height: auto; opacity: 0.12; }
.panel__media .logo__gate { fill: var(--bone); }

.panel__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

@media (max-width: 860px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-7); }
  .panel--flip .panel__media { order: 0; }
}

/* ── Page header ────────────────────────────────────────────── */

.page-head { border-bottom: 1px solid var(--hairline); }
.page-head__inner { padding-block: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* ── Breadcrumb ─────────────────────────────────────────────── */

.breadcrumb { padding-block: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--size-small); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); transition: var(--transition); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb [aria-current='page'] { color: var(--text-primary); }
.breadcrumb__sep { color: var(--bone-24); }

/* ── Forms ──────────────────────────────────────────────────── */

/* min-width:0 matters here. A grid item's automatic minimum is content
   based, and a <select> reports its widest option as min-content — which
   would otherwise push a single-column form wider than the viewport. */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.field__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
}

.field__hint { font-size: var(--size-small); color: var(--text-muted); }

.field__error {
  font-size: var(--size-small);
  color: var(--sunrise);
  font-weight: 600;
}

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--hit);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition);
}

.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-body); }

.input::placeholder, .textarea::placeholder { color: var(--bone-24); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--bone-24); }

.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--sunrise); }

/* The chevron is a real inline SVG in a wrapper rather than a data-URI
   background, so its colour comes from a token like everything else. */
.select-wrap { position: relative; display: block; min-width: 0; }

.select {
  appearance: none;
  padding-right: var(--space-7);
}

.select-wrap__chevron {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.select option { background: var(--ground); color: var(--text-primary); }

.file-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: var(--transition);
}
.file-input:hover { border-color: var(--bone-24); }
.file-input input { flex: 1; min-width: 0; font-size: var(--size-small); }

.file-input input::file-selector-button {
  margin-right: var(--space-3);
  min-height: 32px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--bone-24);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
  transition: var(--transition);
}

.file-input input::file-selector-button:hover {
  border-color: var(--bone);
  background: var(--bone-08);
}

.checkbox,
.switch-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--hit);
  padding-block: var(--space-2);
  cursor: pointer;
}

/* The input stays in the accessibility tree and keeps native keyboard
   behaviour; the adjacent span carries the visual box and the tick, so
   every colour resolves to a token. */
.checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-on-bone);
  transition: var(--transition);
}

.checkbox__box .icon { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transition: opacity var(--motion) var(--ease); }

.checkbox:hover .checkbox__box { border-color: var(--bone-24); }

.checkbox input:checked + .checkbox__box {
  background: var(--bone);
  border-color: var(--bone);
}

.checkbox input:checked + .checkbox__box .icon { opacity: 1; }

.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.checkbox__text { font-size: var(--size-body); color: var(--text-muted); }

/* Switch */
.switch-field { justify-content: space-between; align-items: center; }

.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  appearance: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: var(--transition);
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--bone-62);
  transition: transform var(--motion) var(--ease), background-color var(--motion) var(--ease);
}

.switch:checked { background: var(--gold); border-color: var(--gold); }
.switch:checked::after { transform: translateX(20px); background: var(--midnight); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form-grid > .field--wide { grid-column: 1 / -1; }

/* Hints are different lengths, which would leave the controls in a row
   sitting at different heights. Pushing the control to the bottom of its
   stretched cell keeps every input in a row on the same baseline. */
.form-grid > .field > .input,
.form-grid > .field > .textarea,
.form-grid > .field > .select-wrap { margin-top: auto; }

@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* min-width:0 is load-bearing: <fieldset> defaults to
   min-inline-size: min-content, so without it the widest <option> in any
   child <select> sets the floor and the form overflows on a narrow screen. */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset + .fieldset { margin-top: var(--space-7); }
.fieldset__legend {
  padding: 0 0 var(--space-2);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-body-l);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
}
.fieldset__intro { color: var(--text-muted); font-size: var(--size-small); margin-bottom: var(--space-5); }

/* ── Tabs ───────────────────────────────────────────────────── */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
}

.tabs__tab {
  min-height: var(--hit);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
  transition: var(--transition);
}

.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab[aria-selected='true'] { color: var(--text-primary); border-bottom-color: var(--gold); }
.tabs__panel[hidden] { display: none; }

/* ── Dialog — the only shadow in the system ─────────────────── */

.dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
}

.dialog::backdrop { background: var(--midnight-72); }

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.dialog__body { padding: var(--space-5); }
.dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--hairline);
}

/* ── Catalogue layout ───────────────────────────────────────── */

.catalogue {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  padding-block: var(--space-6) var(--space-9);
}

.facets { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 120px; }
.facet__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-2);
}

.facet__list { display: flex; flex-direction: column; }

.facet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--hit);
  padding: var(--space-2) 0;
  color: var(--text-muted);
  font-size: var(--size-body);
  transition: var(--transition);
}

.facet__link:hover { color: var(--text-primary); }
.facet__link[aria-current='true'] { color: var(--text-primary); }
.facet__count { color: var(--bone-24); font-family: var(--font-mono); font-size: var(--size-small); }

.catalogue__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
}

.catalogue__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

.facets-toggle { display: none; }

@media (max-width: 900px) {
  .catalogue { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; }
  .facets-toggle { display: inline-flex; }
  .facets[data-open='false'] { display: none; }
}

/* ── Empty state ────────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--gutter);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.empty .logo__mark { width: 72px; height: auto; opacity: 0.16; }
.empty .logo__gate { fill: var(--bone); }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ── Notice ─────────────────────────────────────────────────── */

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--size-small);
  color: var(--text-muted);
}

.notice--urgent { border-color: var(--sunrise); }
.notice strong { color: var(--text-primary); }

/* ── Closing band ───────────────────────────────────────────── */

.band { border-top: 1px solid var(--hairline); }
.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-8);
}
.band__copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--hairline); margin-top: var(--space-8); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-7);
}

.footer-col__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-muted);
  font-size: var(--size-body);
  transition: var(--transition);
}

.footer-col a:hover { color: var(--text-primary); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--size-small);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Source card — a thing we go and find ───────────────────── */

.source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  position: relative;
  transition: var(--transition);
}

.source-card:hover { border-color: var(--bone-24); }

.source-card__name {
  font-family: var(--font-display);
  font-size: var(--size-d3);
  font-weight: 600;
  line-height: var(--leading-snug);
  /* Email addresses and part numbers are unbreakable tokens. Let them
     wrap rather than push a narrow layout sideways. */
  overflow-wrap: anywhere;
}

.source-card__name a::after { content: ''; position: absolute; inset: 0; }

.source-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  transition: var(--transition);
}

.source-card:hover .source-card__cta { color: var(--text-accent); }

/* ── Brands ─────────────────────────────────────────────────────
   With no logo file the name is set in our own condensed face. That
   is deliberate — an approximated logo would misrepresent the mark. */

.brand-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
}

.brand-card:hover { border-color: var(--bone-24); }

.brand-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  margin: 0;
  padding: var(--space-5);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--hairline);
}

.brand-card__mark img { max-height: 64px; width: auto; object-fit: contain; }

.brand-card__wordmark {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
  text-align: center;
}

.brand-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }

.brand-card__name {
  font-family: var(--font-display);
  font-size: var(--size-d3);
  font-weight: 600;
  line-height: var(--leading-snug);
}


.brand-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.brand-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.brand-chip:hover { border-color: var(--gold); }
.brand-chip img { max-height: 40px; width: auto; object-fit: contain; }

.brand-chip__wordmark {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  text-align: center;
  transition: var(--transition);
}

.brand-chip:hover .brand-chip__wordmark { color: var(--text-primary); }

@media (max-width: 1080px) { .brand-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brand-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.brand-head { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }

.brand-head__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 116px;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.brand-head__mark img { max-height: 72px; width: auto; object-fit: contain; }

/* ── Process steps ──────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-gold);
}

.step__n {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--size-small);
  letter-spacing: var(--track-label);
  color: var(--text-accent);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--size-d3);
  font-weight: 600;
  line-height: var(--leading-snug);
}

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ── Chassis category blocks ────────────────────────────────── */

.chassis-category { padding-block: var(--space-5); border-bottom: 1px solid var(--hairline); }
.chassis-category:last-child { border-bottom: 0; }

/* ── Repeatable part blocks on the request form ─────────────── */

.part-block {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: 0 0 var(--space-4);
  min-width: 0;
}

.part-block__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 0 0 var(--space-4);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-accent);
}

/* ── Header quote action ────────────────────────────────────── */

.nav-cta { padding-inline: var(--space-4); }

@media (max-width: 560px) { .nav-cta { display: none; } }

/* ── Supplier logos ─────────────────────────────────────────────
   Artwork arrives black-on-transparent, drawn for a light ground, and
   some carries its own brand colour. Painting it through a mask keeps
   the shape exact while the colour stays a token — so it reads on the
   navy panel without introducing a sixth colour. */

.brand-mark {
  display: block;
  width: 100%;
  height: 44px;
  background-color: var(--text-muted);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color var(--motion) var(--ease);
}

.brand-mark--lg { height: 72px; }

.brand-card:hover .brand-mark,
.brand-chip:hover .brand-mark { background-color: var(--text-primary); }

.brand-chip .brand-mark { height: 32px; }

/* ── Split layout ───────────────────────────────────────────────
   A wide working column with a narrower aside: the request form beside
   "what happens next", the contact channels beside "where we are". */

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  padding-block: var(--space-6) var(--space-9);
}

@media (max-width: 900px) {
  .split-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── Touch targets ──────────────────────────────────────────────
   Anything that is a primary route in on a phone gets the full 44px. */

@media (hover: none), (max-width: 900px) {
  .tag { min-height: var(--hit); padding-inline: var(--space-4); }
  .facet__link { min-height: var(--hit); }
  .footer-col a { min-height: var(--hit); }
}

/* ── Mobile menu quote action ───────────────────────────────────
   The header button is hidden on the narrowest screens, so the menu
   has to carry the one action the whole site exists for. */

.nav__cta-mobile { display: none; }

@media (max-width: 900px) {
  .nav__cta-mobile { display: inline-flex; margin-top: var(--space-4); }
}

/* ── Request form steps ─────────────────────────────────────────
   Built by app.js, so none of this exists without JavaScript — and
   without JavaScript the form is simply one page, which is the
   behaviour it had before steps were introduced. */

/* The header is sticky; without this the step heading lands underneath it. */
[data-request-form] { scroll-margin-top: var(--space-6); }
[data-step] legend { scroll-margin-top: 120px; }

.steps-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.steps-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 2px solid var(--hairline);
  color: var(--text-muted);
  transition: var(--transition);
}

.steps-progress__step[data-state='current'] { border-top-color: var(--sunrise); color: var(--text-primary); }
.steps-progress__step[data-state='done'] { border-top-color: var(--gold); }

.steps-progress__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-micro);
}

.steps-progress__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .steps-progress__label { display: none; }
  .steps-progress__step { justify-content: center; }
}

.step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.fieldset legend:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ── Collapsible specialist fields ──────────────────────────────
   Eight empty technical boxes read as "you are not qualified to ask". */

.details {
  margin-top: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.details__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  cursor: pointer;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-accent);
  list-style: none;
}

.details__summary::-webkit-details-marker { display: none; }

.details__summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--motion) var(--ease);
}

.details[open] .details__summary::before { transform: rotate(45deg); }
.details__summary:hover { color: var(--text-primary); }

/* ══ Long-form documents ══════════════════════════════════════
   Privacy, terms, shipping. Reading surfaces: no pattern behind
   them, generous measure, and a contents list that sticks on wide
   screens and simply sits at the top on narrow ones.            */

.doc {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .doc { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-9); }
  .doc__aside { position: sticky; top: var(--space-8); align-self: start; }
}

.doc__toc ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.doc__toc li { margin-bottom: var(--space-1); }

.doc__toc a {
  display: block;
  padding: var(--space-2) 0;
  min-height: var(--hit);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--size-small);
  text-decoration: none;
  border-left: 2px solid var(--hairline);
  padding-left: var(--space-3);
  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease);
}

.doc__toc a:hover { color: var(--text-primary); border-left-color: var(--gold); }

.doc__body { max-width: var(--measure); }

.doc__updated {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.doc__section { margin-top: var(--space-8); scroll-margin-top: var(--space-9); }
.doc__section .display-3 { margin-bottom: var(--space-4); }
.doc__section .prose + .prose { margin-top: var(--space-4); }

.doc__list {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  color: var(--text-muted);
  line-height: var(--leading-body);
}

.doc__list li { margin-bottom: var(--space-3); }

/* ══ Quotation ════════════════════════════════════════════════ */

.quote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold);
}

.quote p {
  font-family: var(--font-display);
  font-size: var(--size-body-l);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.quote__cite {
  margin-top: var(--space-3);
  font-size: var(--size-small);
  color: var(--text-muted);
}

/* ══ Payment stages ═══════════════════════════════════════════ */

.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; }

.stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
}

.stage:last-child { border-bottom: 1px solid var(--hairline); }

.stage__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--text-muted);
}

.stage--payable .stage__n { border-color: var(--sunrise); color: var(--sunrise); }

.stage__title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--size-d3);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.stage__flag {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sunrise);
  border: 1px solid var(--sunrise);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

.stage__detail { margin-top: var(--space-2); color: var(--text-muted); line-height: var(--leading-body); }

/* ══ Column entries ═══════════════════════════════════════════ */

.article { max-width: var(--measure); }
.article .display-3 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.article .prose + .prose { margin-top: var(--space-4); }

.article__meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--text-muted);
}

.article__list { margin: var(--space-5) 0 0; }
.article__list dt {
  font-family: var(--font-condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-accent);
  margin-top: var(--space-4);
}
.article__list dd { margin: var(--space-2) 0 0; color: var(--text-muted); line-height: var(--leading-body); }

/* ══ Recent finds ═════════════════════════════════════════════
   Renders only when a real entry is published; the markup exists
   so the structure is reviewable and the CSS contract holds.    */

.find-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--motion) var(--ease);
}

.find-card:hover { border-color: var(--gold); }

.find-card__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.find-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }

.find-card__title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--size-d3);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-primary);
}

.find-card__price {
  margin-top: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.find-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.find-figure { margin: 0; }
.find-figure img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  display: block;
}
.find-figure figcaption { margin-top: var(--space-2); font-size: var(--size-small); }

/* ══ Touch targets ════════════════════════════════════════════
   Footer columns and breadcrumbs are navigation, and on a phone
   they are thumb targets before they are text. At their reading
   size they measured 30px and 21px respectively — comfortably
   under the 44px minimum.

   Gated on a coarse pointer or a narrow viewport rather than
   applied everywhere: with a mouse these are precise already, and
   44px rows would stretch the desktop footer for no gain. The
   padding goes on the link, so nothing about the type changes. */

@media (max-width: 48rem), (pointer: coarse) {
  .footer-col a { min-height: var(--hit); }

  .breadcrumb ol { gap: var(--space-3); }

  .breadcrumb a,
  .breadcrumb [aria-current='page'] {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit);
  }
}

/* A card whose only link is its title reads as one target but was only
   tappable across the title text — about 30px on a phone. The title link
   is stretched over the whole card instead, so the target matches what
   the card looks like. Each of these cards has exactly one link (the CTA
   beside it is a span), so nothing is covered over.

   Not gated on pointer type: a bigger click target is right with a mouse
   too, and this changes no spacing. */

.source-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Long-form intros are two or three separate thoughts, not one block. */
.doc__body > .lede + .lede { margin-top: var(--space-4); }
.doc__body > .rule { margin-top: var(--space-8); }
.doc__body > .rule + .prose { margin-top: var(--space-5); }
.doc__body > .cluster { margin-top: var(--space-5); }

/* A Column entry is a single reading column with nothing beside it — the
   policy pages fill that space with a contents rail, an entry has nothing
   to put there. Left-aligned it stranded half the page, so the measure is
   centred. The page head above stays full-bleed and left-aligned, which is
   the usual editorial arrangement. */

.article { margin-inline: auto; }

/* The closing rule and its call to action need air, or they read as the
   last paragraph of the piece rather than as the end of it. */
.article > .rule { margin-top: var(--space-8); }
.article > .rule + .prose { margin-top: var(--space-5); }
.article > .cluster { margin-top: var(--space-5); }

/* ══ Request reference ════════════════════════════════════════
   A quotable code on the success page. Set in the mono face so it
   survives being read down a phone or copied into an email. */

.reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-md);
}

.reference__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

.reference__code {
  font-size: var(--size-d3);
  color: var(--text-accent);
  letter-spacing: 0.08em;
}