/* ==========================================================================
   Roulo Glace — reset, elements, typography, layout primitives, utilities.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-ui);
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Atmosphere. A dark ground with nothing behind it reads as a void; two very
   soft gold washes give the page a light source without a single gradient
   being visible as a gradient. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 82% -12%, oklch(0.805 0.155 79 / 0.075), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, oklch(0.760 0.105 232 / 0.05), transparent 60%);
}
body > * { position: relative; z-index: 1; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--surface-2); }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: var(--rule); }

/* ---- Headings — Sora, tight, confident ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--t-18); }
p  { text-wrap: pretty; }

.p-h1 { font-family: var(--font-display); font-size: var(--t-22); font-weight: 650;
        line-height: var(--lh-snug); letter-spacing: var(--tracking-heading); }
.p-h2 { font-family: var(--font-display); font-size: var(--t-18); font-weight: 600;
        line-height: var(--lh-snug); letter-spacing: -0.018em; }

/* The section label. Sentence case, weighted, gold — not a tracked-out
   uppercase eyebrow. */
.rubric {
  font-family: var(--font-body);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: var(--tracking-rubric);
  color: var(--primary);
  line-height: 1.35;
}
.rubric-line { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.rubric-line::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent); }

/* ---- The mono register ---- */
.mono, code, kbd, samp, .vin, .num, .money, .tnum {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
  letter-spacing: -0.015em;
}
.vin { font-size: 0.92em; }
.money { font-weight: 500; }

/* The price. Gold, and large enough that it is the first thing seen. */
.price {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.03em;
}

/* ---- Layout primitives ---- */
.wrap  { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { max-width: var(--container-wide); }
.wrap-narrow { max-width: var(--container-narrow); }
.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--flow, var(--s-4)); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.row-wrap { flex-wrap: wrap; }
.spread { flex: 1; }
.cols { display: flex; flex-wrap: wrap; gap: var(--gap-grid); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); }

/* ---- Utilities ---- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted   { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.gold    { color: var(--primary); }
.small   { font-size: var(--fs-small); }
.xs      { font-size: var(--fs-xs); }
.t-12 { font-size: var(--t-12); } .t-13 { font-size: var(--t-13); } .t-14 { font-size: var(--t-14); }
.strong  { font-weight: 600; }
.center  { text-align: center; }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hide { display: none !important; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (min-width: 721px) { .only-sm { display: none !important; } }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}
::selection { background: var(--primary); color: var(--on-primary); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full);
  border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }