/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-secondary);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-3); color: var(--color-text-muted); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--color-accent);
  display: inline-block;
}

.section-heading {
  max-width: 680px;
  margin-bottom: var(--space-6);
}

.section-heading p {
  margin-top: var(--space-3);
  font-size: var(--fs-body-lg);
}

.section-heading.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text-inverse { color: var(--color-text-inverse); }
.text-inverse h1, .text-inverse h2, .text-inverse h3 { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }

.lead { font-size: var(--fs-body-lg); }

::selection { background: var(--color-accent); color: var(--color-white); }