/* ============================================================
   Slipstream Paddock
   Palette sourced from a timing screen, not a mood board.
   ============================================================ */

:root{
  --sp-asphalt:#14181D;
  --sp-armco:#1B2027;
  --sp-kerb:#2C333D;
  --sp-paper:#E9E6DF;
  --sp-paper-line:#CFC9BE;
  --sp-ink:#14181D;
  --sp-text:#E4E8EE;
  --sp-text-dim:#C3CAD4;
  --sp-muted:#8A94A3;

  /* sector states: overall best / personal best / held */
  --sp-fastest:#B14CE8;
  --sp-pb:#24D66B;
  --sp-hold:#F2C230;

  /* Ghost injects --gh-font-* when a font is picked in Design settings.
     Our own pairing is the fallback. */
  --sp-display:var(--gh-font-heading,'Archivo',system-ui,-apple-system,sans-serif);
  --sp-body:var(--gh-font-body,'Newsreader',Georgia,serif);
  --sp-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --sp-gut:clamp(1.25rem,4vw,4rem);
  --sp-max:1240px;
  --sp-measure:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--sp-asphalt);
  color:var(--sp-text);
  font-family:var(--sp-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sp-fastest);outline-offset:3px}

/* ── layout utilities ───────────────────────────────────── */
.sp-wrap{max-width:var(--sp-max);margin:0 auto;padding-inline:var(--sp-gut)}
.sp-measure{max-width:calc(var(--sp-measure) + var(--sp-gut) * 2)}

.sp-vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}

.sp-skip{
  position:absolute;top:-100px;left:var(--sp-gut);z-index:100;
  background:var(--sp-fastest);color:#fff;padding:.7rem 1.1rem;
  font-family:var(--sp-mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;transition:top .15s
}
.sp-skip:focus{top:.75rem}

/* the mono voice: anything a timing screen would print */
.sp-label{
  font-family:var(--sp-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sp-muted)
}
.sp-label a{color:inherit}
.sp-dot{color:var(--sp-kerb)}

/* identity mark: three sectors, three states */
.sp-sectors{display:flex;gap:3px;height:4px;width:34px;flex:none}
.sp-sectors i{flex:1;display:block;background:var(--sp-fastest)}
.sp-sectors i:nth-child(2){background:var(--sp-pb)}
.sp-sectors i:nth-child(3){background:var(--sp-hold)}

/* ── sector colour system ───────────────────────────────────
   Categories are coloured like sector times. Map a Ghost tag
   slug here and it colours itself everywhere it appears.
   Add new tags by adding a slug to the right group.
   ─────────────────────────────────────────────────────────── */
[data-tag]{color:var(--sp-muted)}

[data-tag="analysis"],
[data-tag="race-report"],
[data-tag="data"]        {color:var(--sp-fastest)}

[data-tag="sim"],
[data-tag="sim-racing"],
[data-tag="iracing"],
[data-tag="acc"]         {color:var(--sp-pb)}

[data-tag="technique"],
[data-tag="hardware"],
[data-tag="setup"],
[data-tag="reference"]   {color:var(--sp-hold)}

/* ── masthead ───────────────────────────────────────────── */
.sp-mast{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--sp-kerb);
  background:rgba(20,24,29,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.sp-mast__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:64px}

.sp-logo{display:flex;align-items:center;gap:.75rem;flex:none}
.sp-logo__txt{
  font-family:var(--sp-display);font-variation-settings:'wdth' 118;
  font-weight:800;font-size:.9375rem;letter-spacing:.04em;
  text-transform:uppercase;line-height:1
}

/* Ghost renders {{navigation}} as ul.nav > li.nav-* > a */
.sp-nav ul,.sp-drawer ul,.sp-foot__nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:1.75rem
}
.sp-nav a,.sp-foot__nav a{
  font-family:var(--sp-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted);transition:color .15s
}
.sp-nav a:hover,.sp-foot__nav a:hover{color:var(--sp-text)}

.sp-mast__cta{
  flex:none;font-family:var(--sp-mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--sp-kerb);
  padding:.5rem .9rem;transition:border-color .15s,color .15s
}
.sp-mast__cta:hover{border-color:var(--sp-fastest);color:var(--sp-fastest)}

.sp-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer
}
.sp-burger span[aria-hidden]{display:block;height:1.5px;width:20px;background:var(--sp-text);margin-inline:auto}
.sp-burger[aria-expanded="true"] span[aria-hidden]:first-of-type{background:var(--sp-fastest)}

.sp-drawer{border-top:1px solid var(--sp-kerb);padding:1.25rem var(--sp-gut) 1.75rem}
.sp-drawer[hidden]{display:none}
.sp-drawer ul{flex-direction:column;gap:1.1rem}
.sp-drawer a{font-family:var(--sp-mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}

/* ── hero: lead story over a telemetry trace ────────────── */
.sp-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--sp-kerb)}
.sp-hero__trace{
  position:absolute;inset:auto 0 0 0;height:62%;width:100%;
  pointer-events:none;opacity:.5
}
.sp-hero__trace path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.sp-hero__in{position:relative;padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem)}

.sp-hero__eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.75rem}
.sp-hero__eyebrow span[aria-hidden]{color:var(--sp-fastest)}

.sp-hero h1{
  font-family:var(--sp-display);font-variation-settings:'wdth' 112;
  font-weight:800;font-size:clamp(2.4rem,7.2vw,5.25rem);line-height:.98;
  letter-spacing:-.025em;margin:0 0 1.5rem;max-width:16ch;text-wrap:balance
}
.sp-hero h1 a{transition:color .15s}
.sp-hero h1 a:hover{color:var(--sp-fastest)}

.sp-hero__stand{
  font-size:clamp(1.0625rem,2vw,1.3125rem);line-height:1.55;
  color:var(--sp-text-dim);max-width:46ch;font-weight:300;margin:0 0 2.25rem
}
.sp-hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;
  padding-top:1.25rem;border-top:1px solid var(--sp-kerb);max-width:46ch;margin:0
}

/* ── timing tower: position = recency, gap = age ────────── */
.sp-tower{padding-block:clamp(3rem,6vw,4.5rem)}
.sp-tower--related{padding-top:0;padding-bottom:clamp(2.5rem,5vw,4rem)}

.sp-tower__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem
}
.sp-tower__head h2{
  font-family:var(--sp-display);font-variation-settings:'wdth' 115;
  font-weight:800;font-size:1.0625rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0
}

.sp-cols,.sp-row{
  display:grid;
  grid-template-columns:3rem minmax(0,1fr) 7.5rem 5.5rem;
  gap:1.5rem
}
.sp-cols{padding:0 0 .6rem;border-bottom:1px solid var(--sp-kerb)}
.sp-cols span:last-child{text-align:right}

.sp-row{
  align-items:baseline;padding:1.15rem 0;
  border-bottom:1px solid var(--sp-kerb);transition:background .15s
}
.sp-row:hover{background:var(--sp-armco)}

.sp-row__pos{
  font-family:var(--sp-mono);font-size:1rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--sp-muted)
}
.sp-row--lead .sp-row__pos{color:var(--sp-fastest)}

.sp-row__title{
  font-family:var(--sp-display);font-variation-settings:'wdth' 104;
  font-weight:600;font-size:clamp(1.0625rem,2.1vw,1.375rem);
  line-height:1.25;letter-spacing:-.01em
}
.sp-flag{color:var(--sp-hold);font-size:.5em;vertical-align:middle;margin-left:.4em}

.sp-row__cat{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase
}

.sp-row__gap{
  font-family:var(--sp-mono);font-size:.8125rem;
  font-variant-numeric:tabular-nums;color:var(--sp-muted);text-align:right
}
.sp-row--lead .sp-row__gap{color:var(--sp-fastest)}

/* ── paddock: reference material, on the dark asphalt ────── */
.sp-paddock{
  background:var(--sp-asphalt);color:var(--sp-text);
  padding-block:clamp(3.25rem,6vw,5rem)
}
.sp-paddock .sp-label{color:var(--sp-muted)}
.sp-paddock__head{margin-bottom:2.25rem;max-width:48ch}
.sp-paddock__head h2{
  font-family:var(--sp-display);font-variation-settings:'wdth' 112;
  font-weight:800;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.03;
  letter-spacing:-.02em;margin:.9rem 0 .75rem
}
.sp-paddock__head p{margin:0;color:var(--sp-text-dim);font-size:1.0625rem;font-weight:300}

.sp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--sp-kerb);border-block:1px solid var(--sp-kerb)
}
.sp-card{
  background:var(--sp-asphalt);padding:1.75rem 1.5rem 2rem;
  display:flex;flex-direction:column;gap:.75rem;transition:background .15s
}
.sp-card:hover{background:var(--sp-armco)}
.sp-card__num{font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--sp-muted);text-transform:uppercase}
.sp-card h3{
  font-family:var(--sp-display);font-variation-settings:'wdth' 104;
  font-weight:600;font-size:1.1875rem;line-height:1.25;margin:0;letter-spacing:-.01em
}
.sp-card p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--sp-text-dim);font-weight:300}

/* ── pit board: the newsletter ask ──────────────────────── */
.sp-foot{padding-block:2.5rem 3.5rem}
.sp-foot__in{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;
  justify-content:space-between;align-items:center
}
.sp-foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

/* ── article ────────────────────────────────────────────── */
.sp-article__head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.75rem,4vw,2.5rem)}
.sp-article__eyebrow{margin:0 0 1.5rem}
.sp-article__title{
  font-family:var(--sp-display);font-variation-settings:'wdth' 108;
  font-weight:800;font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.02;
  letter-spacing:-.025em;margin:0 0 1.25rem;text-wrap:balance
}
.sp-article__stand{
  font-size:clamp(1.0625rem,1.7vw,1.25rem);line-height:1.55;
  color:var(--sp-text-dim);font-weight:300;margin:0 0 1.75rem
}
.sp-article__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;
  padding-top:1.25rem;border-top:1px solid var(--sp-kerb);margin:0
}

.sp-article__figure{margin:0 auto clamp(2rem,5vw,3.5rem);max-width:var(--sp-max);padding-inline:var(--sp-gut)}
.sp-article__figure figcaption{margin-top:.85rem;text-align:center}

/* ── prose ──────────────────────────────────────────────── */
.sp-prose{font-size:1.1875rem;line-height:1.72;padding-bottom:clamp(2.5rem,6vw,4rem)}
.sp-prose > * + *{margin-top:1.4em}
.sp-prose p{margin:0}
.sp-prose a{color:var(--sp-fastest);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.sp-prose strong{font-weight:600;color:#fff}
.sp-prose em{font-style:italic}

.sp-prose h2,.sp-prose h3,.sp-prose h4{
  font-family:var(--sp-display);font-variation-settings:'wdth' 106;
  font-weight:700;line-height:1.15;letter-spacing:-.015em;
  margin-top:2.4em;margin-bottom:-.3em
}
.sp-prose h2{font-size:1.75rem}
.sp-prose h3{font-size:1.375rem}
.sp-prose h4{font-size:1.125rem}

.sp-prose ul,.sp-prose ol{padding-left:1.35em;margin-block:0}
.sp-prose li + li{margin-top:.5em}
.sp-prose li::marker{color:var(--sp-fastest)}

.sp-prose blockquote{
  margin-inline:0;padding-left:1.35rem;border-left:2px solid var(--sp-fastest);
  font-size:1.25rem;line-height:1.5;color:var(--sp-text-dim);font-style:italic
}

.sp-prose hr{border:0;border-top:1px solid var(--sp-kerb);margin-block:2.5em}

.sp-prose code{
  font-family:var(--sp-mono);font-size:.85em;background:var(--sp-armco);
  border:1px solid var(--sp-kerb);padding:.14em .38em
}
.sp-prose pre{
  font-family:var(--sp-mono);font-size:.875rem;line-height:1.6;
  background:var(--sp-armco);border:1px solid var(--sp-kerb);
  padding:1.25rem;overflow-x:auto
}
.sp-prose pre code{background:none;border:0;padding:0;font-size:inherit}

/* tables read like a results sheet */
.sp-prose table{
  width:100%;border-collapse:collapse;font-family:var(--sp-mono);
  font-size:.8125rem;font-variant-numeric:tabular-nums
}
.sp-prose th,.sp-prose td{
  text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--sp-kerb)
}
.sp-prose th{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.6875rem;color:var(--sp-muted)
}
.sp-prose tbody tr:hover{background:var(--sp-armco)}

/* Koenig card widths */
.sp-prose .kg-card,.sp-prose figure{margin-block:2.4em}
.sp-prose figcaption{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted);text-align:center;margin-top:.85rem
}
.sp-prose .kg-width-wide{
  width:min(100vw - var(--sp-gut) * 2, 62rem);
  margin-inline:calc(50% - min(100vw - var(--sp-gut) * 2, 62rem) / 2)
}
.sp-prose .kg-width-full{
  width:100vw;margin-inline:calc(50% - 50vw)
}
.sp-prose .kg-bookmark-card a{text-decoration:none;color:inherit}
.sp-prose .kg-callout-card{
  background:var(--sp-armco);border-left:2px solid var(--sp-hold);padding:1.25rem 1.5rem
}

/* ── tags, archive heads, error ─────────────────────────── */
.sp-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.25rem;
  padding-block:1.5rem;border-top:1px solid var(--sp-kerb);
  margin-bottom:clamp(2.5rem,6vw,4rem)
}
.sp-tags__list{display:flex;flex-wrap:wrap;gap:1.25rem}
.sp-tags__list a{transition:opacity .15s}
.sp-tags__list a:hover{opacity:.7}

.sp-archive-head{padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,3vw,2rem)}
.sp-archive-head__title{
  font-family:var(--sp-display);font-variation-settings:'wdth' 115;
  font-weight:800;font-size:clamp(2.25rem,6vw,4rem);line-height:1;
  letter-spacing:-.025em;margin:.75rem 0 .85rem;text-transform:uppercase
}
.sp-archive-head__desc{margin:0 0 1rem;color:var(--sp-text-dim);font-weight:300;max-width:52ch}

.sp-error{padding-block:clamp(5rem,14vw,10rem);text-align:center}
.sp-error__code{
  font-family:var(--sp-display);font-variation-settings:'wdth' 125;
  font-weight:900;font-size:clamp(5rem,18vw,11rem);line-height:.9;
  letter-spacing:-.04em;margin:.5rem 0;color:var(--sp-fastest)
}
.sp-error__msg{color:var(--sp-text-dim);margin:0 0 2rem;font-weight:300}


/* ── responsive ─────────────────────────────────────────── */
@media (max-width:900px){
  .sp-grid{grid-template-columns:1fr}
  .sp-board__in{grid-template-columns:1fr}
}

@media (max-width:720px){
  .sp-nav,.sp-mast__cta{display:none}
  .sp-burger{display:flex}
  .sp-cols{display:none}

  .sp-row{grid-template-columns:2.25rem minmax(0,1fr);gap:.6rem 1rem;padding:1.05rem 0}
  .sp-row__cat{grid-column:2}
  .sp-row__gap{display:none}

  .sp-hero__trace{height:48%;opacity:.35}
  .sp-prose{font-size:1.0625rem}
  .sp-prose .kg-width-wide{width:auto;margin-inline:0}
  .sp-foot__in{flex-direction:column;align-items:flex-start}
}

/* ── motion: one orchestrated moment, then stillness ────── */
@media (prefers-reduced-motion:no-preference){
  .sp-hero__trace path{
    stroke-dasharray:2400;stroke-dashoffset:2400;
    animation:sp-draw 2.6s cubic-bezier(.22,.61,.36,1) .25s forwards
  }
  .sp-hero__trace path:nth-child(2){animation-delay:.45s}
}
@keyframes sp-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── calendar: sector colours by data-sector (JS-rendered rows) ── */
[data-sector="fastest"]{color:var(--sp-fastest)}
[data-sector="pb"]     {color:var(--sp-pb)}
[data-sector="hold"]   {color:var(--sp-hold)}

/* ── next-session strip ─────────────────────────────────────── */
.sp-strip{border-bottom:1px solid var(--sp-kerb);background:var(--sp-armco)}
.sp-strip[hidden]{display:none}
.sp-strip__in{
  display:flex;align-items:center;gap:1rem;min-height:44px;
  padding-block:.5rem;transition:background .15s
}
.sp-strip__in:hover{background:rgba(255,255,255,.03)}
.sp-strip__flag{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--sp-pb);box-shadow:0 0 0 3px rgba(36,214,107,.16)
}
.sp-strip__lead{flex:none}
.sp-strip__what{
  display:flex;align-items:baseline;gap:.75rem;min-width:0;flex:1;
  overflow:hidden;white-space:nowrap
}
.sp-strip__event{
  font-family:var(--sp-display);font-variation-settings:'wdth' 104;
  font-weight:600;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis
}
.sp-strip__session{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted);flex:none
}
.sp-strip__countdown{
  flex:none;font-family:var(--sp-mono);font-size:.8125rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--sp-text)
}

/* ── grid rows (calendar) ───────────────────────────────────── */
.sp-grid-band[hidden],.sp-rail[hidden]{display:none}

.sp-cols--grid,.sp-row--grid{
  grid-template-columns:7.5rem minmax(0,1fr) 8rem 6rem
}
.sp-row--grid .sp-row__title{font-size:clamp(1rem,1.8vw,1.1875rem)}
.sp-row__sess{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted)
}
.sp-row--grid .sp-row__gap{color:var(--sp-text-dim)}
.sp-row--grid.sp-row--lead .sp-row__gap{color:var(--sp-pb);font-weight:700}

.sp-grid-band__note{margin:1.1rem 0 0;color:var(--sp-muted)}
.sp-grid-band__note[hidden]{display:none}

/* compact variant for the post rail */
.sp-row--compact{grid-template-columns:6rem minmax(0,1fr) 4.5rem;padding:.8rem 0}
.sp-row--compact .sp-row__title{font-size:.9375rem}
.sp-row--compact .sp-row__sess{display:none}

.sp-rail{padding-bottom:clamp(2rem,5vw,3rem)}
.sp-rail__head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:.6rem;border-bottom:1px solid var(--sp-kerb)
}

/* ── series filters ─────────────────────────────────────────── */
.sp-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.sp-filter{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sp-muted);cursor:pointer;
  background:none;border:1px solid var(--sp-kerb);padding:.45rem .8rem;
  transition:border-color .15s,color .15s,background .15s
}
.sp-filter:hover{border-color:var(--sp-muted);color:var(--sp-text)}
.sp-filter[aria-pressed="true"]{
  color:var(--sp-text);border-color:currentColor;background:var(--sp-armco)
}

/* ── round counters ─────────────────────────────────────────── */
.sp-rounds{padding-bottom:clamp(3rem,6vw,4.5rem)}
.sp-rounds[hidden]{display:none}
.sp-rounds__grid{display:grid;gap:1px;background:var(--sp-kerb);border-block:1px solid var(--sp-kerb)}
.sp-round{
  background:var(--sp-asphalt);display:grid;
  grid-template-columns:8rem 5rem minmax(0,1fr);
  gap:1.25rem;align-items:center;padding:1rem 0
}
.sp-round__count{
  font-family:var(--sp-mono);font-size:1.0625rem;font-weight:700;
  font-variant-numeric:tabular-nums
}
.sp-round__count i{font-style:normal;font-size:.75em;color:var(--sp-muted)}
.sp-round__bar{display:block;height:2px;background:var(--sp-kerb)}
.sp-round__bar i{display:block;height:100%;background:var(--sp-fastest)}

/* ── calendar responsive ────────────────────────────────────── */
@media (max-width:720px){
  .sp-cols--grid{display:none}
  .sp-row--grid{grid-template-columns:minmax(0,1fr) 4.5rem;gap:.4rem .75rem}
  .sp-row--grid .sp-row__cat{grid-column:1;grid-row:1}
  .sp-row--grid .sp-row__title{grid-column:1 / -1;grid-row:2}
  .sp-row--grid .sp-row__sess{grid-column:1;grid-row:3}
  .sp-row--grid .sp-row__gap{grid-column:2;grid-row:1;display:block}
  .sp-row--compact{grid-template-columns:minmax(0,1fr) 4.5rem}

  .sp-strip__session{display:none}
  .sp-round{grid-template-columns:6.5rem 4.5rem minmax(0,1fr);gap:.85rem}
}

@media (max-width:420px){
  .sp-strip__lead{display:none}
}

/* ══ starting grid ═══════════════════════════════════════════
   A real starting grid is staggered: P2 sits behind and beside
   P1, P4 behind P3. The right column drops half a card to echo
   that, so the layout reads as a grid box rather than a card wall. */
.sp-startgrid{padding-block:clamp(3rem,6vw,4.5rem)}

.sp-startgrid__slots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
  border-top:1px solid var(--sp-kerb);
  padding-top:clamp(2rem,4vw,3rem)
}
.sp-startgrid__slots > :nth-child(even){margin-top:clamp(2rem,5vw,4.5rem)}

.sp-slot{display:flex;flex-direction:column;gap:1.1rem;min-width:0}

.sp-slot__frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--sp-armco);border:1px solid var(--sp-kerb)
}
.sp-slot__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s
}
.sp-slot:hover .sp-slot__img{transform:scale(1.035);filter:saturate(1) contrast(1.06)}

/* no feature image: a trace on asphalt, not a grey box */
.sp-slot__fallback{display:block;width:100%;height:100%}
.sp-slot__fallback svg{width:100%;height:100%;display:block}
.sp-slot__fallback path{
  fill:none;stroke:var(--sp-kerb);stroke-width:1.5;vector-effect:non-scaling-stroke
}

/* grid-slot position marker: painted on the tarmac */
.sp-slot__pos{
  position:absolute;left:0;bottom:0;
  min-width:3.25rem;padding:.35rem .7rem;
  font-family:var(--sp-mono);font-size:1.125rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;text-align:center;
  color:var(--sp-text);background:rgba(20,24,29,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--sp-kerb);border-right:1px solid var(--sp-kerb)
}

.sp-slot__body{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.sp-slot__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem
}
.sp-slot__gap{
  font-family:var(--sp-mono);font-size:.75rem;
  font-variant-numeric:tabular-nums;color:var(--sp-muted);flex:none
}

.sp-slot__title{
  font-family:var(--sp-display);font-variation-settings:'wdth' 106;
  font-weight:700;font-size:clamp(1.25rem,2.3vw,1.625rem);line-height:1.15;
  letter-spacing:-.015em;margin:0;text-wrap:balance;transition:color .15s
}
.sp-slot:hover .sp-slot__title{color:var(--sp-fastest)}

.sp-slot__excerpt{
  margin:0;font-size:.9375rem;line-height:1.55;font-weight:300;
  color:var(--sp-text-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.sp-slot__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem}

@media (max-width:720px){
  .sp-startgrid__slots{grid-template-columns:1fr;gap:2.25rem}
  .sp-startgrid__slots > :nth-child(even){margin-top:0}
  .sp-slot__excerpt{-webkit-line-clamp:3}
}

/* ══ masthead: world switch, nav states, tools ═══════════════ */
.sp-mast__in{gap:1.25rem}

/* Primary axis. A segmented control, because it's a choice between two
   states rather than a list of destinations. */
.sp-world{display:flex;flex:none;border:1px solid var(--sp-kerb)}
.sp-world a{
  font-family:var(--sp-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sp-muted);
  padding:.4rem .8rem;transition:color .15s,background .15s
}
.sp-world a + a{border-left:1px solid var(--sp-kerb)}
.sp-world a:hover{color:var(--sp-text)}
.sp-world a[aria-current="true"]{color:var(--sp-text);background:var(--sp-armco)}
.sp-world a[data-world="sim"][aria-current="true"]{box-shadow:inset 0 -2px 0 var(--sp-pb)}
.sp-world a[data-world="real"][aria-current="true"]{box-shadow:inset 0 -2px 0 var(--sp-fastest)}

/* Secondary axis. Ghost puts .nav-current on the active item. */
.sp-nav{flex:1;min-width:0;justify-content:flex-end;display:flex}
.sp-nav ul{flex-wrap:wrap}
.sp-nav li{position:relative}
.sp-nav a{display:block;padding-block:.35rem}
.sp-nav .nav-current a{color:var(--sp-text)}
.sp-nav .nav-current a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--sp-fastest)
}

.sp-mast__tools{display:flex;align-items:center;gap:.75rem;flex:none}
.sp-icon{
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  background:none;border:1px solid transparent;color:var(--sp-muted);
  cursor:pointer;transition:color .15s,border-color .15s
}
.sp-icon:hover{color:var(--sp-text);border-color:var(--sp-kerb)}
.sp-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* ══ mobile panel ════════════════════════════════════════════ */
.sp-panel{
  position:fixed;inset:0;z-index:40;background:var(--sp-asphalt);
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.sp-panel[hidden]{display:none}
.sp-panel__inner{
  min-height:100%;padding:calc(64px + 1.5rem) var(--sp-gut) 3rem;
  display:flex;flex-direction:column;gap:2.25rem
}

.sp-panel__search{
  display:flex;align-items:center;gap:.75rem;width:100%;cursor:pointer;
  background:var(--sp-armco);border:1px solid var(--sp-kerb);
  padding:.9rem 1rem;color:var(--sp-muted);
  font-family:var(--sp-mono);font-size:.8125rem;letter-spacing:.04em
}
.sp-panel__search:hover{border-color:var(--sp-muted);color:var(--sp-text)}
.sp-panel__search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;flex:none}

.sp-panel__world{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.sp-panel__world a{
  display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1rem;
  border:1px solid var(--sp-kerb);transition:border-color .15s,background .15s
}
.sp-panel__world a:hover{background:var(--sp-armco)}
.sp-panel__world a[aria-current="true"]{background:var(--sp-armco)}
.sp-panel__world a[data-world="real"][aria-current="true"]{border-color:var(--sp-fastest)}
.sp-panel__world a[data-world="sim"][aria-current="true"]{border-color:var(--sp-pb)}
.sp-panel__world-name{
  font-family:var(--sp-display);font-variation-settings:'wdth' 112;
  font-weight:800;font-size:1.5rem;line-height:1;text-transform:uppercase;
  letter-spacing:-.01em
}

.sp-panel__heading{display:block;margin-bottom:.4rem}
.sp-panel__classes{display:flex;flex-direction:column}
.sp-panel__class{
  display:flex;align-items:center;gap:.9rem;padding:.95rem 0;
  border-bottom:1px solid var(--sp-kerb)
}
.sp-panel__swatch{
  width:4px;height:20px;flex:none;background:currentColor;color:var(--sp-muted)
}
.sp-panel__swatch--all{
  background:linear-gradient(var(--sp-fastest) 33%,var(--sp-pb) 33% 66%,var(--sp-hold) 66%)
}
.sp-panel__class-name{
  flex:1;font-family:var(--sp-display);font-variation-settings:'wdth' 106;
  font-weight:600;font-size:1.125rem;color:var(--sp-text)
}
.sp-panel__count{
  font-family:var(--sp-mono);font-size:.8125rem;
  font-variant-numeric:tabular-nums;color:var(--sp-muted)
}

.sp-panel__more{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:auto;padding-top:1rem}
.sp-panel__more a,.sp-panel__more ul a{
  font-family:var(--sp-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted)
}
.sp-panel__more a:hover{color:var(--sp-text)}
.sp-panel__more ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0;padding:0}

body.sp-panel-open{overflow:hidden}

/* ══ class index ═════════════════════════════════════════════ */
.sp-classes{padding-bottom:clamp(3rem,6vw,4.5rem)}
.sp-classes__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1px;background:var(--sp-kerb);border-block:1px solid var(--sp-kerb)
}
.sp-class{
  background:var(--sp-asphalt);padding:1.4rem 1.25rem 1.6rem;
  display:flex;flex-direction:column;gap:.65rem;transition:background .15s
}
.sp-class:hover{background:var(--sp-armco)}
.sp-class__rule{height:2px;width:2.5rem;background:currentColor;color:var(--sp-muted)}
.sp-class__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sp-class__count{
  font-family:var(--sp-mono);font-size:1.125rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--sp-text)
}
.sp-class__desc{font-size:.9375rem;line-height:1.5;color:var(--sp-text-dim);font-weight:300}

.sp-worlds{padding-bottom:clamp(3rem,6vw,4.5rem)}
.sp-worlds__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.sp-world-card{
  border:1px solid var(--sp-kerb);padding:1.75rem 1.5rem 2rem;
  display:flex;flex-direction:column;gap:.5rem;transition:border-color .15s,background .15s
}
.sp-world-card:hover{background:var(--sp-armco)}
.sp-world-card:first-child:hover{border-color:var(--sp-fastest)}
.sp-world-card:last-child:hover{border-color:var(--sp-pb)}
.sp-world-card h3{
  font-family:var(--sp-display);font-variation-settings:'wdth' 115;
  font-weight:800;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;margin:.2rem 0 .3rem
}
.sp-world-card p{margin:0;color:var(--sp-text-dim);font-weight:300;font-size:.9375rem;line-height:1.55}

@media (max-width:600px){.sp-worlds__grid{grid-template-columns:1fr}}

/* masthead responsive: shed the desktop axes into the panel */
@media (max-width:1080px){
  .sp-nav{display:none}
}
@media (max-width:820px){
  .sp-world{display:none}
  .sp-mast__cta{display:none}
  .sp-burger{display:flex}
}
@media (min-width:821px){
  .sp-burger{display:none}
  .sp-panel{display:none!important}
}

/* ══ reading progress ════════════════════════════════════════
   Three sectors filling left to right, pinned under the masthead. */
.sp-progress{
  position:sticky;top:64px;z-index:15;height:2px;
  background:var(--sp-kerb);overflow:hidden
}
.sp-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,
    var(--sp-fastest) 0 33.3%,
    var(--sp-pb) 33.3% 66.6%,
    var(--sp-hold) 66.6%);
  background-size:100vw 100%;
  transition:width .1s linear
}
@media (prefers-reduced-motion:reduce){.sp-progress i{transition:none}}

/* ══ paywall ═════════════════════════════════════════════════ */
.sp-paywall{
  padding-bottom:clamp(2.5rem,6vw,4rem);
  /* fade the last of the free content into the gate */
  margin-top:-6rem;padding-top:6rem;
  background:linear-gradient(180deg,transparent,var(--sp-asphalt) 5rem)
}
.sp-paywall__card{
  border:1px solid var(--sp-kerb);background:var(--sp-armco);
  padding:clamp(1.75rem,4vw,2.75rem);
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start
}
.sp-paywall__card h2{
  font-family:var(--sp-display);font-variation-settings:'wdth' 110;
  font-weight:800;font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.1;
  letter-spacing:-.02em;margin:.4rem 0 0
}
.sp-paywall__card p{margin:0;color:var(--sp-text-dim);font-weight:300;max-width:44ch}
.sp-paywall__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}

/* buttons (paywall, and anywhere else an action is needed) */
.sp-btn{
  display:inline-block;font-family:var(--sp-mono);font-size:.75rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.75rem 1.1rem;border:1px solid var(--sp-kerb);color:var(--sp-text-dim);
  transition:border-color .15s,color .15s,background .15s
}
.sp-btn:hover{border-color:var(--sp-muted);color:var(--sp-text)}
.sp-btn--go{background:var(--sp-fastest);border-color:var(--sp-fastest);color:#fff;font-weight:700}
.sp-btn--go:hover{filter:brightness(1.12);border-color:var(--sp-fastest);color:#fff}

/* ══ comments ════════════════════════════════════════════════
   Ghost renders comments in an iframe, so we can only style the
   frame around it — the colour scheme is passed via the helper. */
.sp-comments{padding-bottom:clamp(2.5rem,6vw,4rem)}
.sp-comments__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--sp-kerb)
}
.sp-comments__head h2{
  font-family:var(--sp-display);font-variation-settings:'wdth' 115;
  font-weight:800;font-size:1.0625rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0
}

/* ══ print ═══════════════════════════════════════════════════
   The Paddock section promises a setup sheet you can print and fill
   in. Make that true: black on white, chrome stripped, URLs exposed
   so a printed reference is still navigable. */
@media print{
  :root{
    --sp-asphalt:#fff;--sp-armco:#fff;--sp-kerb:#bbb;
    --sp-text:#000;--sp-text-dim:#333;--sp-muted:#555;
    --sp-fastest:#000;--sp-pb:#000;--sp-hold:#000
  }

  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}

  /* Chrome that means nothing on paper */
  .sp-mast,.sp-strip,.sp-panel,.sp-progress,.sp-board,.sp-foot,
  .sp-rail,.sp-tower--related,.sp-grid-band,.sp-comments,
  .sp-paywall,.sp-skip,.sp-burger,.sp-filters{display:none!important}

  .sp-wrap{max-width:none;padding-inline:0}
  .sp-measure{max-width:none}

  .sp-article__title{font-size:22pt;line-height:1.1}
  .sp-article__figure{max-width:100%;padding:0}
  .sp-article__figure img{max-height:8cm;object-fit:contain}

  .sp-prose{font-size:11pt}
  .sp-prose a{color:#000;text-decoration:underline}
  /* Expose destinations, but not for anchors or mailto */
  .sp-prose a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-family:var(--sp-mono);font-size:8pt;color:#555;word-break:break-all
  }

  .sp-prose pre,.sp-prose code,.sp-circuit{
    background:#fff;border:1px solid #bbb
  }
  .sp-prose pre,.sp-prose blockquote,.sp-circuit,
  .sp-prose table,.sp-prose figure{break-inside:avoid}
  .sp-prose h2,.sp-prose h3{break-after:avoid}

  .sp-circuit__stats{background:#bbb}
  .sp-circuit__stat{background:#fff}

  /* Leave room to actually write on it */
  .sp-prose table td{height:1.6em}

  @page{margin:18mm}
}

/* ══ circuit widget ══════════════════════════════════════════
   Authored as <div data-circuit="slug"></div> in a Ghost HTML card,
   hydrated by paddock.js from /data/circuits.json. */
.sp-circuit{
  border:1px solid var(--sp-kerb);background:var(--sp-armco);
  margin-block:2.4em;font-family:var(--sp-body)
}
.sp-circuit--missing{
  padding:1rem 1.25rem;font-family:var(--sp-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sp-hold);
  border-color:var(--sp-hold)
}

.sp-circuit__top{
  display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:1.5rem;padding:1.35rem;align-items:start
}
.sp-circuit__map{background:var(--sp-asphalt);border:1px solid var(--sp-kerb);padding:.6rem}
.sp-circuit__svg{display:block;width:100%;height:auto}
/* Outlines are centreline paths with vector-effect baked in, so this
   stroke width is screen pixels regardless of the source viewBox. */
.sp-circuit__svg .sp-track path{
  stroke:var(--sp-fastest);stroke-width:2.25;
  stroke-linecap:round;stroke-linejoin:round;fill:none
}

.sp-circuit__meta{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.sp-circuit__name{
  font-family:var(--sp-display);font-variation-settings:'wdth' 108;
  font-weight:700;font-size:1.3125rem;line-height:1.15;
  letter-spacing:-.015em;margin:0
}
.sp-circuit__note{
  margin:.35rem 0 0;font-size:.9375rem;line-height:1.55;
  color:var(--sp-text-dim);font-weight:300
}

.sp-circuit__stats{display:flex;flex-wrap:wrap;gap:1.5rem;margin:.35rem 0 0}
.sp-circuit__stat dt{
  font-family:var(--sp-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sp-muted);margin:0 0 .15rem
}
.sp-circuit__stat dd{
  margin:0;font-family:var(--sp-mono);font-size:1.0625rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1
}
.sp-circuit__stat dd small{font-size:.65em;font-weight:400;color:var(--sp-muted);margin-left:.15em}

.sp-circuit__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;cursor:pointer;background:none;color:var(--sp-text-dim);
  border:0;border-top:1px solid var(--sp-kerb);padding:.85rem 1.35rem;
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;transition:color .15s,background .15s
}
.sp-circuit__toggle:hover{color:var(--sp-text);background:rgba(255,255,255,.03)}
.sp-circuit__toggle-label::after{content:" ▾";opacity:.6}
.sp-circuit__toggle[aria-expanded="true"] .sp-circuit__toggle-label::after{content:" ▴"}
.sp-circuit__count{
  font-variant-numeric:tabular-nums;color:var(--sp-muted);
  border:1px solid var(--sp-kerb);padding:.1rem .45rem
}

.sp-circuit__laps{border-top:1px solid var(--sp-kerb);padding:1.1rem 1.35rem 1.35rem}
.sp-circuit__laps[hidden]{display:none}
.sp-circuit__empty{margin:0;color:var(--sp-muted)}
.sp-circuit__flag{margin:1rem 0 0;color:var(--sp-hold)}
.sp-circuit__credit{margin:.5rem 0 0;color:var(--sp-muted);opacity:.7}

/* lap comparison: bars scale to the slowest lap, so what you read is the
   spread between classes rather than absolute times. Colour separates the
   two worlds — purple for real, green for sim. */
.sp-laps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.sp-lap{
  display:grid;
  grid-template-columns:minmax(0,9rem) minmax(0,1fr) 4.75rem 3.25rem;
  gap:.3rem .9rem;align-items:center
}
.sp-lap__who{font-size:.875rem;color:var(--sp-text-dim);min-width:0}
.sp-lap__who b{
  font-family:var(--sp-mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;display:block;color:var(--sp-text)
}
.sp-lap__track{display:block;height:6px;background:var(--sp-kerb);min-width:0}
.sp-lap__track i{display:block;height:100%;background:var(--sp-fastest)}
.sp-lap[data-world="sim"] .sp-lap__track i{background:var(--sp-pb)}
.sp-lap[data-world="sim"] .sp-lap__who b{color:var(--sp-pb)}
.sp-lap[data-world="real"] .sp-lap__who b{color:var(--sp-fastest)}

.sp-lap__time{
  font-family:var(--sp-mono);font-size:.9375rem;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right
}
.sp-lap__delta{
  font-family:var(--sp-mono);font-size:.75rem;
  font-variant-numeric:tabular-nums;color:var(--sp-muted);text-align:right
}
.sp-lap__ctx{grid-column:1 / -1;color:var(--sp-muted);opacity:.85}

@media (max-width:640px){
  .sp-circuit__top{grid-template-columns:1fr;gap:1.1rem}
  .sp-circuit__map{max-width:14rem}
  .sp-lap{grid-template-columns:minmax(0,1fr) 4.5rem 3rem}
  .sp-lap__track{grid-column:1 / -1;order:3}
  .sp-lap__ctx{order:4}
}

/* print: the widget is reference material, keep it */
@media print{
  .sp-circuit{background:#fff;border:1px solid #bbb;break-inside:avoid}
  .sp-circuit__laps[hidden]{display:block!important}
  .sp-circuit__toggle{display:none}
  .sp-circuit__svg .sp-track path{stroke:#000}
  .sp-lap__track{background:#eee}
  .sp-lap__track i{background:#000}
}

/* ══ circuits carousel ═══════════════════════════════════════ */
.sp-circuits-band{padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--sp-kerb)}
.sp-circuits-band[hidden]{display:none}

.sp-carousel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center}
.sp-carousel__nav{
  display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--sp-kerb);color:var(--sp-muted);
  transition:color .15s,border-color .15s,opacity .15s
}
.sp-carousel__nav:hover:not(:disabled){color:var(--sp-text);border-color:var(--sp-muted)}
.sp-carousel__nav:disabled{opacity:.25;cursor:default}
.sp-carousel__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sp-carousel__track{
  list-style:none;margin:0;padding:.25rem 0 1rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--sp-kerb) transparent
}
.sp-carousel__track::-webkit-scrollbar{height:3px}
.sp-carousel__track::-webkit-scrollbar-thumb{background:var(--sp-kerb)}
.sp-carousel__track:focus-visible{outline:2px solid var(--sp-fastest);outline-offset:4px}

.sp-ccard{scroll-snap-align:start;min-width:0}
.sp-ccard > a{
  display:flex;flex-direction:column;gap:.55rem;height:100%;
  border:1px solid var(--sp-kerb);background:var(--sp-armco);
  padding:1rem 1rem 1.1rem;transition:border-color .15s,background .15s
}
.sp-ccard > a:hover{border-color:var(--sp-fastest);background:#1F252E}

.sp-ccard__map{
  display:block;background:var(--sp-asphalt);border:1px solid var(--sp-kerb);
  padding:.7rem;aspect-ratio:4/3;display:grid;place-items:center
}
.sp-ccard__svg{width:100%;height:100%;display:block}
.sp-ccard__svg .sp-track path{
  stroke:var(--sp-fastest);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round
}
.sp-ccard > a:hover .sp-ccard__svg .sp-track path{stroke:#C77BF0}
.sp-ccard__nomap{display:block;width:100%;aspect-ratio:4/3;background:var(--sp-asphalt)}

.sp-ccard__country{display:block;margin-top:.25rem}
.sp-ccard__name{
  font-family:var(--sp-display);font-variation-settings:'wdth' 106;
  font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em;
  display:block;text-wrap:balance
}

.sp-ccard__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;
  margin-top:auto;padding-top:.7rem;border-top:1px solid var(--sp-kerb)
}
.sp-ccard__len{
  font-family:var(--sp-mono);font-size:.9375rem;font-weight:700;
  font-variant-numeric:tabular-nums
}
.sp-ccard__len small{font-size:.65em;font-weight:400;color:var(--sp-muted);margin-left:.1em}

/* the hook: how close the sim gets to the real thing */
.sp-ccard__gap{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;text-align:right}
.sp-ccard__gap b{
  font-family:var(--sp-mono);font-size:1rem;font-variant-numeric:tabular-nums;
  color:var(--sp-pb);line-height:1
}
.sp-ccard__gap--none .sp-label{opacity:.6}

/* ══ circuits page ═══════════════════════════════════════════ */
.sp-circuits-page{padding-bottom:clamp(3rem,6vw,4.5rem)}
.sp-circuits-page__grid > div{scroll-margin-top:90px}
.sp-circuits-page__grid .sp-circuit:first-child{margin-top:0}

@media (max-width:600px){
  .sp-carousel{grid-template-columns:1fr}
  .sp-carousel__nav{display:none}
  .sp-carousel__track{grid-auto-columns:minmax(78%,1fr)}
}

/* ── lap groups: comparisons only within a class ─────────────── */
.sp-lapgroup + .sp-lapgroup{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--sp-kerb)}
.sp-lapgroup__head{
  display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;color:var(--sp-muted)
}
.sp-lapgroup__badge{
  font-size:.5625rem;letter-spacing:.12em;padding:.15rem .4rem;
  border:1px solid currentColor;color:var(--sp-pb)
}
.sp-lapgroup.is-matched .sp-lapgroup__head{color:var(--sp-text)}

.sp-lap__who b{margin-bottom:.1rem}
.sp-lap__delta{font-size:.6875rem}

/* the card hook names the class it compared, so the number is checkable */
.sp-ccard__gap .sp-label{max-width:9rem;line-height:1.3}

/* ══ pit board ═══════════════════════════════════════════════
   The section is named after a physical object, so it should look
   like one: a slab of short codes and numbers beside the ask. */
.sp-board{padding-block:clamp(3.5rem,7vw,5.5rem);border-block:1px solid var(--sp-kerb)}
.sp-board__in{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center
}
.sp-board__copy{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0}
.sp-board h2{
  font-family:var(--sp-display);font-variation-settings:'wdth' 110;
  font-weight:800;font-size:clamp(1.875rem,4.4vw,3rem);line-height:1.02;
  letter-spacing:-.025em;margin:.35rem 0 .15rem;max-width:15ch;text-wrap:balance
}
.sp-board p{margin:0;color:var(--sp-text-dim);font-weight:300;max-width:44ch;font-size:1.0625rem}
.sp-board .sp-form{width:100%;max-width:26rem;margin-top:1rem}

/* the board */
.sp-slab{
  border:1px solid var(--sp-kerb);background:var(--sp-asphalt);
  padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.9rem;
  justify-self:end;width:100%;max-width:17rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)
}
.sp-slab__rows{margin:0;display:flex;flex-direction:column}
.sp-slab__rows > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--sp-kerb)
}
.sp-slab__rows > div:last-child{border-bottom:0;padding-bottom:0}
.sp-slab__rows dt{
  font-family:var(--sp-mono);font-size:.6875rem;letter-spacing:.18em;
  color:var(--sp-muted);margin:0
}
.sp-slab__rows dd{
  margin:0;font-family:var(--sp-mono);font-size:1.375rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--sp-text)
}
.sp-slab__rows > div:last-child dd{color:var(--sp-pb)}

/* form */
.sp-form{display:flex;border:1px solid var(--sp-kerb)}
.sp-form input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--sp-text);
  font-family:var(--sp-mono);font-size:.875rem;padding:.95rem 1rem
}
.sp-form input::placeholder{color:#5E6874}
.sp-form button{
  background:var(--sp-fastest);color:#fff;border:0;cursor:pointer;
  font-family:var(--sp-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.35rem;
  transition:filter .15s
}
.sp-form button:hover{filter:brightness(1.12)}
.sp-form__note{
  margin:.6rem 0 0;font-family:var(--sp-mono);font-size:.6875rem;
  letter-spacing:.06em;color:#5E6874
}
.sp-form__note a{color:var(--sp-fastest)}
.sp-form__note:empty{display:none}

.sp-board.loading .sp-form button{opacity:.6;pointer-events:none}
.sp-board.success .sp-form{border-color:var(--sp-pb)}
.sp-board.error .sp-form{border-color:#E8564C}

@media (max-width:820px){
  .sp-board__in{grid-template-columns:1fr;gap:2.25rem}
  .sp-slab{justify-self:start;max-width:15rem}
}

/* ── pagination: only rendered when there's somewhere to go ──── */
.pagination{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  max-width:var(--sp-max);margin:0 auto;padding:0 var(--sp-gut) clamp(2.5rem,5vw,4rem);
  font-family:var(--sp-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-muted)
}
.pagination a{color:var(--sp-text)}
.pagination a:hover{color:var(--sp-fastest)}
.pagination__at{font-variant-numeric:tabular-nums}