@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* ============================================================
   I'LL GO FOR A RUN — Core foundations: color + type
   Channel: @IllGoforaRun  ·  Accent: #FF8C00
   Fonts: Bebas Neue (display) + Montserrat (UI/body)
   Loaded from Google Fonts (see @import above). The design source
   bundled these locally from /fonts; switched to the CDN for the
   web deploy. To go self-contained again, restore the @font-face
   blocks and add the .ttf files under fonts/.
   ============================================================ */

:root {
  /* ---- Brand accent: trail orange ---------------------------- */
  --orange:         #FF8C00;   /* the one brand color */
  --orange-bright:  #FF9D24;   /* hover / glow */
  --orange-deep:    #E07B00;   /* pressed / underlines on light */
  --orange-press:   #C76B00;   /* active press on dark */
  --summit-gold:    #F2B33D;   /* ep-badge stroke, subtle highlights */

  /* ---- Neutral "basalt" scale (cool charcoal -> snow) -------- */
  --ink-950:  #0E1116;   /* deepest background (slides, channel) */
  --ink-900:  #15191F;   /* primary dark surface */
  --ink-850:  #191E25;
  --ink-800:  #1E242C;   /* raised dark surface / cards */
  --ink-700:  #2A313B;   /* hairline borders on dark */
  --ink-600:  #3A434F;
  --ink-500:  #5A6675;   /* muted text on light */
  --ink-400:  #7E8A98;
  --ink-300:  #9FAAB7;   /* muted text on dark */
  --ink-200:  #C7CFD8;
  --ink-100:  #DCE3EA;   /* hairline on light */
  --snow:     #F4F6F8;   /* paper / light background */
  --white:    #FFFFFF;

  /* ---- Alpine support (sky + forest), used sparingly --------- */
  --sky:        #4FA3D1;   /* clear-day blue */
  --sky-deep:   #2C6E96;
  --forest:     #3E7D5A;   /* trees / "go" / positive */
  --scree:      #B9A98F;   /* dry grass / autumn warmth */

  /* ---- Semantic tokens (dark-first, like the channel) -------- */
  --bg:            var(--ink-950);
  --surface:       var(--ink-900);
  --surface-2:     var(--ink-800);
  --border:        var(--ink-700);
  --border-strong: var(--ink-600);
  --fg:            var(--snow);
  --fg-muted:      var(--ink-300);
  --fg-subtle:     var(--ink-400);
  --accent:        var(--orange);
  --accent-hover:  var(--orange-bright);
  --accent-press:  var(--orange-press);
  --on-accent:     #1A1206;   /* near-black warm, sits on orange */
  --focus-ring:    color-mix(in srgb, var(--orange) 55%, transparent);

  /* ---- Light surface tokens (docs, light cards) ------------- */
  --bg-light:        var(--snow);
  --surface-light:   var(--white);
  --border-light:    var(--ink-100);
  --fg-light:        var(--ink-900);
  --fg-light-muted:  var(--ink-500);

  /* ---- Type families ---------------------------------------- */
  --font-display: 'Bebas Neue', 'Oswald', 'Anton', sans-serif;
  --font-ui:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (Montserrat unless noted) ----------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;

  /* ---- Radii ------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;    /* default control radius */
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation (cool, low-spread — alpine, not glossy) ----- */
  --shadow-sm: 0 1px 2px rgba(8,11,15,.40);
  --shadow-md: 0 6px 18px rgba(8,11,15,.45);
  --shadow-lg: 0 18px 48px rgba(8,11,15,.55);
  --glow-orange: 0 0 0 1px rgba(255,140,0,.35), 0 6px 22px rgba(255,140,0,.22);

  /* ---- Motion ------------------------------------------------ */
  --ease-out: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out: cubic-bezier(.5,0,.2,1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE  — apply these classes, don't restyle inline
   ============================================================ */

.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 160px);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--orange);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .9;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: .98;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.h2 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -.005em;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}

.lead {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--fg);
}

.body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
}

.body-sm {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}

.label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Big stat / distance number — Bebas, the channel's signature move */
.stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .85;
  color: var(--orange);
  letter-spacing: .01em;
}