/* ───────────────────────────────────────────────────────────────
   ASYNCRACING — legal pages (privacy / terms)
   The same night-session identity as the landing page: asphalt
   ground, sodium-amber accent, scanline + grain veil, Khand display
   over Chakra Petch body. Utilitarian treatment — these are documents
   — but unmistakably OUR documents.
   ─────────────────────────────────────────────────────────────── */

:root{
  --asphalt:#08080B; --asphalt-lo:#0C0C11; --panel:#111118; --panel2:#16161E;
  --hairline:#24242E; --ink:#E9E6DD; --ink-dim:#9B98A3; --ink-faint:#55525E;
  --amber:#FFB000; --amber-hot:#FFD24A; --green:#3AE26A; --red:#FF4D42;
  --khand:"Khand",sans-serif; --chakra:"Chakra Petch",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

::selection{background:var(--amber);color:var(--asphalt)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--asphalt)}
::-webkit-scrollbar-thumb{background:var(--hairline);border:2px solid var(--asphalt)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}

html{scroll-behavior:smooth}

body{
  background:var(--asphalt);
  color:var(--ink);
  font-family:var(--chakra);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ── the veil: vignette + amber top-glow + scanlines + grain ── */
body::before{               /* scanlines + vignette, one fixed layer */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(8,8,11,.78) 100%);
}
body::after{                /* amber glow bleeding from the top, like strip lamps */
  content:"";position:fixed;inset:0 0 auto 0;height:42vh;pointer-events:none;z-index:49;
  background:linear-gradient(180deg, rgba(255,176,0,.06), transparent);
  mix-blend-mode:screen;
}

.wrap{
  max-width:740px;
  margin:0 auto;
  padding:28px 22px 70px;
  position:relative;
  z-index:1;
}

/* ── header: wordmark back-link + kicker chip ── */
.back{
  display:inline-block;
  font-family:var(--khand);
  font-weight:700;
  font-size:20px;
  letter-spacing:.04em;
  color:var(--amber);
  text-decoration:none;
  text-transform:uppercase;
  margin-bottom:34px;
}
.back span{color:var(--ink)}
.back:hover{color:var(--amber-hot)}

.kicker{
  display:inline-block;
  font-size:10px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--amber);
  border:1px solid rgba(255,176,0,.45);
  padding:6px 12px 5px;
  margin-bottom:18px;
}

/* ── the headline: big Khand with a ghost § behind it ── */
h1{
  font-family:var(--khand);
  font-weight:700;
  font-size:clamp(52px,12vw,86px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.01em;
  position:relative;
  margin:0 0 10px;
}
h1::after{                  /* the ghost glyph — same move as the landing "48" */
  content:"§";
  position:absolute;
  right:-6px; top:-24px;
  font-size:clamp(120px,30vw,220px);
  color:transparent;
  -webkit-text-stroke:1px rgba(255,176,0,.14);
  pointer-events:none;
  z-index:-1;
  font-weight:600;
}

.updated{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin:0 0 30px;
  padding-bottom:22px;
  border-bottom:1px solid var(--hairline);
}

/* ── body copy ── */
.lede{
  font-size:16px;
  color:var(--ink);
  line-height:1.75;
  margin:0 0 14px;
  padding:18px 20px;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-left:3px solid var(--amber);
}

p{font-size:14px;color:var(--ink-dim);margin:14px 0}
p b, li b{color:var(--ink);font-weight:600}
p i{color:var(--ink)}

h2{
  font-family:var(--khand);
  font-weight:600;
  font-size:24px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ink);
  margin:44px 0 6px;
  padding-top:26px;
  border-top:1px solid var(--hairline);
  position:relative;
}
h2::before{                 /* staging-bulb tick before every section */
  content:"";
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px rgba(255,176,0,.55);
  margin-right:12px;
  vertical-align:3px;
}
h2 .hot{color:var(--amber)}

/* the danger section header + safety card = the red-pole moment */
h2.danger{color:var(--amber-hot)}
h2.danger::before{background:var(--red);box-shadow:0 0 12px rgba(255,77,66,.6)}

.safety{
  background:linear-gradient(180deg, rgba(255,176,0,.07), rgba(255,176,0,.02));
  border:1px solid rgba(255,176,0,.5);
  padding:18px 20px;
  color:var(--ink-dim);
  box-shadow:0 0 34px rgba(255,176,0,.05), inset 0 0 24px rgba(255,176,0,.03);
}
.safety b{color:var(--amber-hot)}

ul{margin:14px 0;padding-left:4px;list-style:none}
li{
  font-size:14px;
  color:var(--ink-dim);
  margin:9px 0;
  padding-left:22px;
  position:relative;
}
li::before{
  content:"▸";
  position:absolute;left:0;top:0;
  color:var(--amber);
}

a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,176,0,.35)}
a:hover{color:var(--amber-hot);border-bottom-color:var(--amber-hot)}
.back, .foot a{border-bottom:none}

/* ── footer cross-link ── */
.foot{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.foot a{
  font-family:var(--khand);
  font-weight:600;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink);
  padding:10px 16px;
  border:1px solid var(--hairline);
  background:var(--panel);
  transition:border-color .15s, color .15s;
}
.foot a:hover{border-color:var(--amber);color:var(--amber)}
.foot::after{
  content:"CLOSED-COURSE RUNS ONLY · PUBLIC ROADS ARE NEVER SCORED";
  font-size:9px;letter-spacing:.18em;color:var(--ink-faint);
  text-align:right;
}

@media(max-width:560px){
  .wrap{padding:22px 16px 56px}
  h1::after{right:-2px;top:-14px}
  .foot{flex-direction:column;align-items:flex-start}
  .foot::after{text-align:left}
}

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