:root {
  --font-ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-hero: clamp(1.85rem, 2.8vw, 2.4rem);
  --fs-h2: clamp(1.35rem, 1.9vw, 1.75rem);
  --fs-h3: clamp(.96rem, 1.1vw, 1.08rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-caption: 0.78rem;

  --lh-tight: 1.06;
  --lh-title: 1.18;
  --lh-body: 1.72;

  --ls-hero: -0.045em;
  --ls-tight: -0.03em;
  --ls-normal: -0.01em;
  --ls-wide: 0.01em;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
  font-weight: 650;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: var(--fw-semibold);
}

p {
  margin: 0;
  line-height: var(--lh-body);
  color: var(--muted);
}

small {
  font-size: var(--fs-caption);
  line-height: 1.45;
}

@media (max-width: 980px) {
  :root {
    --lh-tight: 1.08;
    --lh-title: 1.2;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-body: .97rem;
  }
}