/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Permanent+Marker&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── Base body ── */
body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* ── Font utility classes ── */
.display {
  font-family: "Luckiest Guy", sans-serif;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.head {
  font-family: "Bangers", sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}

.marker {
  font-family: "Permanent Marker", cursive;
  line-height: 1.1;
}

.mono {
  font-family: "Space Mono", monospace;
}

/* ── Typographic scale ── */
.hero-title {
  font-family: "Luckiest Guy", sans-serif;
  font-size: clamp(48px, 8vw, 100px);
  line-height: 0.9;
  text-shadow: 5px 5px 0 var(--bg);
}

.s-title {
  font-family: "Luckiest Guy", sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  text-shadow: 4px 4px 0 var(--bg);
}

.s-title .marker {
  display: block;
  font-size: clamp(36px, 4.5vw, 66px);
  transform: rotate(-2deg);
  display: inline-block;
}

.s-eyebrow {
  font-family: "Bangers", sans-serif;
  font-size: 18px;
  letter-spacing: 0.3em;
  color: var(--hot);
  margin-bottom: 12px;
}

.stat-num {
  font-family: "Luckiest Guy", sans-serif;
  font-size: 76px;
  line-height: 0.95;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--bg);
}

/* ── Prose helpers ── */
strong {
  background: var(--yellow);
  color: var(--bg);
  padding: 0 4px;
  font-weight: 700;
}

mark {
  background: var(--hot);
  color: var(--ink);
  padding: 0 5px;
}

small, .caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--inkDim);
}

/* ── Text-shadow variants for light backgrounds ── */
.text-shadow-ink {
  text-shadow: 3px 3px 0 var(--ink);
}

.text-shadow-bg {
  text-shadow: 3px 3px 0 var(--bg);
}