/* Reset, type, backgrounds, focus. */

/* Garet (numbers and scores). Put the files in assets/fonts/; a locally installed Garet also works. */
@font-face {
  font-family: 'Garet'; font-weight: 300 599; font-style: normal; font-display: swap;
  src: local('Garet Book'), local('Garet-Book'),
       url('../assets/fonts/Garet-Book.woff2') format('woff2'), url('../assets/fonts/Garet-Book.otf') format('opentype'), url('../assets/fonts/Garet-Book.ttf') format('truetype');
}
@font-face {
  font-family: 'Garet'; font-weight: 600 900; font-style: normal; font-display: swap;
  src: local('Garet Heavy'), local('Garet-Heavy'),
       url('../assets/fonts/Garet-Heavy.woff2') format('woff2'), url('../assets/fonts/Garet-Heavy.otf') format('opentype'), url('../assets/fonts/Garet-Heavy.ttf') format('truetype');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 500ms var(--ease-out);
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; line-height: var(--lh-ui); }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--lh-head); font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--accent-rgb), .4); }
a:not([class]):hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }

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

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* ---- Type helpers ---- */
.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display); line-height: var(--lh-head); font-weight: 800; }
.t-hero { font-size: var(--fs-hero); }
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-ui); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-accent { color: var(--accent); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
.eyebrow {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); line-height: var(--lh-ui);
}
.lede { font-size: clamp(17px, 1.3vw, 19px); color: var(--text-2); max-width: 60ch; }

/* ---- Brand backgrounds (fixed, behind everything) ---- */
.backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.backdrop__layer { position: absolute; inset: 0; transition: opacity 700ms var(--ease-out); }
.backdrop__blitz {
  background:
    radial-gradient(60vmax 45vmax at 0% 105%, rgba(255, 150, 40, .22), transparent 60%),
    radial-gradient(55vmax 40vmax at 100% 105%, rgba(255, 120, 30, .16), transparent 62%),
    radial-gradient(70vmax 50vmax at 50% -20%, rgba(255, 190, 110, .05), transparent 60%),
    #050403;
}
.backdrop__f15 {
  opacity: 0;
  background:
    radial-gradient(60vmax 45vmax at 100% 110%, rgba(224, 35, 78, .20), transparent 60%),
    radial-gradient(50vmax 40vmax at 0% -10%, rgba(224, 35, 78, .08), transparent 60%),
    linear-gradient(rgba(7, 6, 10, .82), rgba(7, 6, 10, .9)),
    url("../assets/media/asphalt.webp") center / 640px repeat,
    #07060A;
}
.backdrop__grain {
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
[data-brand="f15"] .backdrop__blitz { opacity: 0; }
[data-brand="f15"] .backdrop__f15 { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}