/* Race Ambiance FX — legal pages.
   Tokens, type ramp and spacing are lifted from index.html so these read as the
   same site. Nothing here is loaded by the landing page; its design is locked
   and untouched. */

:root {
  color-scheme: dark;

  --cyc:      #07080B;
  --plate:    #0B0D12;
  --raise:    #12151C;
  --edge:     #242A36;

  --ink:      #E9EBF0;
  --ink-2:    #AEB6C4;
  --ink-3:    #8790A0;

  --cobalt:   #2B4C9B;
  --rose:     #C4566B;
  --amber:    #E9A24A;
  --day:      #F2E9DC;

  --ramp-0: #101A3A; --ramp-1: #2B4C9B; --ramp-2: #5E6FA8; --ramp-3: #8A5F8E;
  --ramp-4: #C4566B; --ramp-5: #D9743F; --ramp-6: #E9A24A;
  --sweep: linear-gradient(90deg, var(--ramp-0), var(--ramp-1), var(--ramp-2),
           var(--ramp-3), var(--ramp-4), var(--ramp-5), var(--ramp-6));

  --focus-ring: var(--amber);

  --sp-hair: 3px; --sp-xs: 8px; --sp-sm: 13px; --sp-md: 18px; --sp-lg: 26px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure-body: 62ch;
  --narrow-max: 680px;

  --fs-headline: clamp(30px, 4.8vw, 54px);
  --fs-group:    21px;
  --fs-title:    16px;
  --fs-lede:     clamp(15px, 1.1vw + 12px, 18px);
  --fs-body:     14px;
  --fs-meta:     13px;
  --fs-label:    12px;
  --fs-readout:  14px;

  --font-display: 'Archivo', Bahnschrift, 'DIN Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

html { background: var(--cyc); }
body {
  background: var(--cyc); color: var(--ink-2); margin: 0;
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5;
}
html, body { overflow-x: clip; }

.headline, .group, .title, .label, .readout {
  font-family: var(--font-display); font-weight: 600;
}
.headline { font-variation-settings: 'wdth' 74; font-size: var(--fs-headline); line-height: 1; letter-spacing: .03em; color: var(--ink); margin: 0; }
.group    { font-variation-settings: 'wdth' 76; font-size: var(--fs-group); line-height: 1.1; letter-spacing: .08em; color: var(--ink); margin: 0; }
.title    { font-variation-settings: 'wdth' 76; font-size: var(--fs-title); line-height: 1; letter-spacing: .13em; color: var(--day); margin: 0; }
.label    { font-variation-settings: 'wdth' 80; font-size: var(--fs-label); line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.readout  { font-variation-settings: 'wdth' 80; font-size: var(--fs-readout); line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--amber); }

/* ---- Header: one light bar above the title, same motivated light ---- */
.legal-head {
  max-width: var(--narrow-max);
  margin: 0 auto;
  padding: clamp(40px, 9vw, 96px) var(--gutter) var(--sp-lg);
  border-bottom: 1px solid var(--edge);
  position: relative;
}
.legal-head::before {
  content: ''; position: absolute; left: var(--gutter); top: clamp(24px, 6vw, 60px);
  width: min(42vw, 220px); height: 3px; border-radius: 2px;
  background: var(--sweep); opacity: .85;
}
.back {
  display: inline-block; color: var(--ink-3); text-decoration: none;
  margin: 0 0 var(--sp-lg); padding: var(--sp-xs) 0;
}
.back:hover, .back:focus-visible { color: var(--amber); }
.legal-head .headline { margin-bottom: var(--sp-sm); }
.legal-head .readout { margin: 0; }

/* ---- Body ---- */
main.legal {
  max-width: var(--narrow-max);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) clamp(48px, 10vw, 110px);
}
main.legal p, main.legal li { max-width: var(--measure-body); }
main.legal p { margin: 0 0 var(--sp-md); }
main.legal .lede { font-size: var(--fs-lede); color: var(--ink); margin-bottom: var(--sp-lg); }

main.legal h2.group { margin: clamp(32px, 5vw, 52px) 0 var(--sp-sm); }
main.legal h2.group:first-of-type { margin-top: var(--sp-lg); }
main.legal h3.title { margin: var(--sp-lg) 0 var(--sp-sm); }

main.legal ul { margin: 0 0 var(--sp-md); padding-left: 1.2em; }
main.legal li { margin: 0 0 var(--sp-xs); }
main.legal strong { color: var(--ink); font-weight: 600; }

main.legal a {
  color: var(--amber); text-decoration: underline; text-underline-offset: 2px;
}
main.legal a:hover, main.legal a:focus-visible { color: var(--day); }

/* A quiet callout for the one or two lines that must not be skimmed past.
   Marked by the same short sweep rule as the page header, so the emphasis
   comes from the site's own light-bar motif rather than a bolted-on accent. */
main.legal .note {
  background: var(--plate); border: 1px solid var(--edge);
  border-radius: 3px; padding: var(--sp-md); margin: 0 0 var(--sp-md);
  max-width: none; position: relative;
}
main.legal .note::before {
  content: ''; position: absolute; left: var(--sp-md); top: -1px;
  width: 64px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--sweep); opacity: .85;
}
main.legal .note p:first-child { margin-top: var(--sp-hair); }
main.legal .note p:last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.legal-foot {
  border-top: 1px solid var(--edge);
  max-width: var(--narrow-max);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) clamp(40px, 8vw, 72px);
}
.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-lg); margin: 0 0 var(--sp-md); }
.legal-foot nav a { color: var(--ink-3); text-decoration: none; padding: var(--sp-xs) 0; }
.legal-foot nav a:hover, .legal-foot nav a:focus-visible { color: var(--amber); }
.legal-foot nav a[aria-current="page"] { color: var(--day); }
.legal-foot .copyright { color: var(--ink-3); font-size: var(--fs-meta); margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}