/* === Typography — v5.0 === */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.02em; }

h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--text);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  color: var(--text);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-card);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kicker {
  font-family: var(--font-body);
  font-size: var(--text-kicker);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.mono, time, .stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Editorial italic accent */
.editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 71, 208, 0.35);
  border-radius: 4px;
}

/* Selection */
::selection { background: rgba(91, 71, 208, 0.15); color: var(--text); }

/* Smooth scroll */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }