/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--color-body);
  background: var(--color-canvas);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ── Typography Classes ── */
.hero-display {
  font-family: var(--font-display);
  font-size: var(--text-hero-display-size);
  font-weight: var(--text-hero-display-weight);
  line-height: var(--text-hero-display-lh);
  letter-spacing: var(--text-hero-display-ls);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-ls);
}

.display-md {
  font-family: var(--font-text);
  font-size: var(--text-display-md-size);
  font-weight: var(--text-display-md-weight);
  line-height: var(--text-display-md-lh);
  letter-spacing: var(--text-display-md-ls);
}

.lead {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-lh);
  letter-spacing: var(--text-lead-ls);
}

.tagline {
  font-family: var(--font-display);
  font-size: var(--text-tagline-size);
  font-weight: var(--text-tagline-weight);
  line-height: var(--text-tagline-lh);
  letter-spacing: var(--text-tagline-ls);
}

.body-text {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
}

.caption {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-lh);
  letter-spacing: var(--text-caption-ls);
}

.fine-print {
  font-size: var(--text-fine-print-size);
  font-weight: var(--text-fine-print-weight);
  line-height: var(--text-fine-print-lh);
  letter-spacing: var(--text-fine-print-ls);
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container-narrow {
  width: 100%;
  max-width: var(--content-narrow-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── Section ── */
.section {
  padding: var(--space-section) 0;
}

/* ── Responsive Typography ── */
@media (max-width: 1068px) {
  .hero-display {
    font-size: 40px;
  }
}

@media (max-width: 734px) {
  .hero-display {
    font-size: 34px;
  }
  .display-lg {
    font-size: 32px;
  }
  .display-md {
    font-size: 28px;
  }
  .lead {
    font-size: 22px;
  }
  .section {
    padding: var(--space-xxl) 0;
  }
}

@media (max-width: 480px) {
  .hero-display {
    font-size: 28px;
  }
  .display-lg {
    font-size: 28px;
  }
}