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

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-white);
}

h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
}

.section-title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  line-height: 1.05;
}

.section-title--light {
  color: var(--color-text-light);
}

.section-subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  max-width: 640px;
}

.section-subtitle--light {
  color: var(--color-text-muted-light);
}

.section-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-heading .section-title {
  margin-bottom: var(--space-xs);
  position: relative;
  display: inline-block;
}

.section-heading .section-subtitle {
  margin-inline: auto;
}

/* Gold underline flourish beneath section titles */
.section-heading .section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-gold);
  margin: var(--space-sm) auto 0;
}

p {
  color: var(--color-text-muted);
}

.text-light {
  color: var(--color-text-light);
}

.text-muted-light {
  color: var(--color-text-muted-light);
}

.nav-label,
.btn,
.card-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .section-heading {
    margin-bottom: var(--space-md);
  }
}