/* Inter loaded for --font-article; swap family in :root to try others (add to URL if needed). */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&family=Inter:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap");
/*
  Other --font-article candidates (add family=… to @import if you switch):

  Source Sans 3:  family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400
  Literata:       family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,600;1,7..72,400
  Source Serif 4: family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400
  system-ui:      no import
*/

/* ── FONT FAMILY VARIABLES ───────────────────────────── */
:root {
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Barlow Condensed", sans-serif;
  --font-serif: "DM Serif Display", serif;
  --font-mono: "JetBrains Mono", monospace;

  /*
    --font-article → long-form prose only (.post-body, .article-body, …).
    UI / cards / nav stay on --font-body (Barlow Condensed).

    Active: Inter. Swap the value to play:
      "Inter", system-ui, sans-serif
      "Source Sans 3", system-ui, sans-serif   (+ import)
      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
      "Literata", Georgia, serif               (+ import)
      "Source Serif 4", Georgia, serif         (+ import)
      var(--font-body)                         — back to Barlow Condensed
  */
  --font-article: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── TYPE SCALE — sole size truth (TZ map, do not alter clamps) ─
   Font-families stay as above. Pick a planet per role + optical weight:
   Bebas (display) reads large · Barlow (UI body) condensed · Mono = meta ·
   --font-article = long prose only.
   No other font-size values exist.
*/
:root {
  /* Charon — content-type chips (RECAP, TRADE, …) on cards */
  --fs-charon: clamp(11px, 0.7vw, 12px);

  /* Pluto — micro text: metadata, timestamps, labels, badges */
  --fs-pluto: clamp(12px, 0.75vw, 14px);

  /* Moon — small body text: secondary descriptions, hints, captions */
  --fs-moon: clamp(14px, 0.85vw, 16px);

  /* Mercury — regular text: paragraphs, navigation, UI elements */
  --fs-mercury: clamp(15px, 0.95vw, 18px);

  /* Venus — card text: article cards, menu items, compact headings */
  --fs-venus: clamp(16px, 1.05vw, 20px);

  /* Earth — subheadings: card titles, secondary sections */
  --fs-earth: clamp(18px, 1.15vw, 22px);

  /* Mars — medium headings: content blocks, featured cards */
  --fs-mars: clamp(20px, 1.25vw, 24px);

  /* Jupiter — large card titles: major content components */
  --fs-jupiter: clamp(21px, 1.35vw, 26px);

  /* Saturn — section headings: page sections, category titles */
  --fs-saturn: clamp(22px, 1.45vw, 28px);

  /* Uranus — large section titles: important page headers */
  --fs-uranus: clamp(24px, 1.6vw, 30px);

  /* Neptune — hero secondary: featured content, large summaries */
  --fs-neptune: clamp(28px, 1.9vw, 36px);

  /* Sun — hero title: main page headlines, primary attention */
  --fs-sun: clamp(36px, 2.8vw, 48px);

  /* Supernova — maximum headline: landing hero, breaking stories */
  --fs-supernova: clamp(40px, 3.2vw, 52px);
}

/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  --coal: #111010;
  --coal-mid: #1a1816;
  --coal-card: #201e1b;
  --coal-border: #2e2a25;
  --coal-hover: #272320;
  --accent: #f5a623;
  --accent-dim: #c4811a;
  --accent-glow: rgba(245, 166, 35, 0.12);
  --red-nav: #c0182a;
  --red-live: #ff3b3b;
  --white: #f2ede6;
  --grey-hi: #e1ddd6;
  --grey-mid: #7a6e60;
  --grey-lo: #3d3830;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 28px;
  --gap-xl: 48px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 6px;
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;
  --t-accent: 0.35s ease;
}

[data-league="nfl"] {
  --accent: #4c70a1;
  --accent-dim: #0f172a;
  --accent-glow: rgba(76, 112, 161, 0.35);
}
[data-league="mlb"] {
  --accent: #fb3232;
  --accent-dim: #7f1d1d;
  --accent-glow: rgba(251, 50, 50, 0.35);
}
[data-league="nba"] {
  --accent: #f97316;
  --accent-dim: #c2410c;
  --accent-glow: rgba(249, 115, 22, 0.35);
}
[data-league="mls"] {
  --accent: #85bf26;
  --accent-dim: #4d7c0f;
  --accent-glow: rgba(133, 191, 38, 0.35);
}
[data-league="nhl"] {
  --accent: #94a3b8;
  --accent-dim: #334155;
  --accent-glow: rgba(148, 163, 184, 0.35);
}
[data-league="cfb"] {
  --accent: #0d9488;
  --accent-dim: #115e59;
  --accent-glow: rgba(13, 148, 136, 0.35);
}
[data-league="cbb"] {
  --accent: #d97706;
  --accent-dim: #92400e;
  --accent-glow: rgba(217, 119, 6, 0.35);
}

/* ── RESET ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--coal);
  color: var(--white);
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-mercury);
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
ul,
ol {
  list-style: none;
}

/* Long-form prose → --font-article (switch family in :root above) */
.post-body,
.article-body,
.post-content {
  font-size: var(--fs-uranus);
  line-height: 1.55;
  font-family: var(--font-article);
}
/* Entity HTML prose (picks analysis, etc.) — same article family */
.ent-prose,
.ent-prose--html {
  font-family: var(--font-article);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.65);
  }
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-live);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-saturn);
  letter-spacing: 0.08em;
  color: var(--white);
  white-space: nowrap;
}
.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--coal-border), transparent);
}
.section-more {
  font-family: var(--font-mono);
  font-size: var(--fs-moon);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--accent-dim);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition:
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-accent);
}
.section-more:hover {
  background: var(--accent);
  color: #111;
}

.league-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #111;
  font-family: var(--font-mono);
  font-size: var(--fs-pluto);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  width: fit-content;
  transition: background var(--t-accent);
}

.widget {
  background: var(--coal-card);
  border: 1px solid var(--coal-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  line-height: 2;
}
.widget-header {
  background: var(--coal-mid);
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-earth);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--coal-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wh-accent {
  color: var(--accent);
  transition: color var(--t-accent);
}

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

@media (max-width: 700px) {
  .section-title {
    font-size: var(--fs-mars);
  }
}