/* ============================================================================
   SYSTEM — elements, primitives and the components every page shares.
   Reads tokens.css and nothing else. No raw values below this line.
   Component rules live here only if more than one page uses them; anything
   page-specific belongs in main.css.
   ========================================================================== */

/* ── RESET ────────────────────────────────────────────────────────────────── */

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

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

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

ul[role='list'], ol[role='list'] { list-style: none; }

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

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

/* ── DOCUMENT ─────────────────────────────────────────────────────────────── */

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

/* ScrollSmoother's required structure. Present on every direction; the module
   in scene/smoother.js decides whether it is used. The header is deliberately
   outside it — a fixed element inside a transformed ancestor stops being fixed
   to the viewport and starts being fixed to the transform, which is how a
   sticky header silently becomes a scrolling one. */
#smooth-wrapper { overflow: hidden; }

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* a page never scrolls sideways           */
}

::selection {
  background: var(--oxblood);
  color: var(--bone-050);
}

/* ── TYPE ─────────────────────────────────────────────────────────────────── */

.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: var(--measure-lead);
  color: var(--text);
}

.t-body  { font-size: var(--fs-body);   max-width: var(--measure); }
.t-body-s{ font-size: var(--fs-body-s); max-width: var(--measure); }
.t-muted { color: var(--text-muted); }

/* The micro-label. Mono, uppercase, tracked, five words at most, and never
   below the functional floor — mono runs optically small, so 14px is 14px. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

/* Figures. Anywhere a number aligns under another number. */
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Prose links stay underlined — the opposite bug from underlined nav. */
.t-body a:not([class]),
.t-body-s a:not([class]),
.t-lead a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.2em;
}

/* ── FOCUS ────────────────────────────────────────────────────────────────── */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--text);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  transform: translateY(calc(-1 * var(--sp-11)));
  background: var(--surface);
  color: var(--text);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */

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

.page--narrow { max-width: var(--page-narrow); }

.section {
  padding-block: var(--section-pt) var(--section-pb);
  background: var(--ground);
  color: var(--text);
}

.section--flush { padding-block: 0; }

.stack > * + * { margin-block-start: var(--sp-4); }
.stack-s > * + * { margin-block-start: var(--sp-2); }
.stack-l > * + * { margin-block-start: var(--sp-6); }

/* A section head: label above, title, then a lead. One shape, every page. */
.section-head { max-width: var(--measure-lead); }
.section-head > .t-label + .t-h2 { margin-block-start: var(--sp-3); }
.section-head > .t-h2 + .t-lead  { margin-block-start: var(--sp-4); }

/* ── HAIRLINES ────────────────────────────────────────────────────────────── */

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

/* ── CONTROLS ─────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--text);

  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;             /* 44 — the tap target                     */
  padding: var(--sp-3) var(--sp-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--hairline) solid var(--btn-bd);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color            var(--dur-2) var(--ease-out),
    border-color     var(--dur-2) var(--ease-out);
}

/* One primary per view. Flat fill — a control needs a surface whose contrast
   can be verified at every point of itself. */
.btn--primary {
  --btn-bg: var(--oxblood);
  --btn-fg: var(--bone-050);
  --btn-bd: var(--oxblood);
}

.btn--primary:hover { --btn-bg: var(--graphite-950); --btn-bd: var(--graphite-950); }
[data-ground='light'] .btn--primary:hover { --btn-bg: var(--ink-on-light); --btn-bd: var(--ink-on-light); }

.btn--ghost:hover { --btn-bg: var(--surface); }

.btn[aria-disabled='true'] {
  --btn-fg: var(--text-disabled);
  --btn-bd: var(--rule);
  pointer-events: none;
}

.btn__chev { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__chev { transform: translateX(var(--travel)); }

/* ── SPEC PLATE ───────────────────────────────────────────────────────────────
   The anchor dialect's centre of gravity: facts composed as a designed object.
   Hairline-ruled, no box, tabular figures, units present. A row whose value is
   a marketing phrase does not belong in one. */

.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-5);
  border-top: var(--hairline) solid var(--rule);
}

.spec__row {
  display: contents;
}

.spec__key,
.spec__val {
  padding-block: var(--sp-3);
  border-bottom: var(--hairline) solid var(--rule);
}

.spec__key {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: center;
}

.spec__val {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  font-variant-numeric: tabular-nums;
  text-align: right;
  align-self: center;
}

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

/* The horizontal variant — three facts beside the car, not a table under it. */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  border-top: var(--hairline) solid var(--rule);
  padding-block-start: var(--sp-4);
}

.spec-strip__item { display: grid; gap: var(--sp-1); }
.spec-strip__val {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── MANUFACTURER BADGE ───────────────────────────────────────────────────────
   Backdraft is the manufacturer, not a second brand voice. It gets a label
   register and never a logo lockup beside the wordmark. */
.badge-mfr {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

/* ── MOTION ROLES ─────────────────────────────────────────────────────────────
   Bound to what a mass IS, never to which section it happens to be in — a
   system written against one page's ids silently animates nothing on page two,
   and a silent no-op looks exactly like a page where motion was never designed.
   The scene's own choreography lives in assets/js/scene/. */

[data-motion='rise'] {
  opacity: 0;
  transform: translateY(var(--travel));
}

[data-motion='rise'].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

/* The authored static path: everything arrives, nothing travels. */
@media (prefers-reduced-motion: reduce) {
  [data-motion='rise'] { opacity: 1; transform: none; }
}

/* ── UTILITY ──────────────────────────────────────────────────────────────── */

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