html {
  font-size: 100%;
}

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

.display,
h1,
h2,
h3,
h4 {
  font-weight: 700;
  color: var(--color-forest);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
}

h5,
.h5 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h6,
.h6 {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p {
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.small {
  font-size: var(--fs-small);
}

.caption {
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.4;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
}

.eyebrow--bare::before {
  display: none;
}

.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.section--dark .display,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--charcoal .display,
.section--charcoal h1,
.section--charcoal h2,
.section--charcoal h3,
.section--charcoal h4 {
  color: var(--color-offwhite);
}

.on-dark p,
.on-dark .lead,
.section--dark p,
.section--dark .lead,
.section--charcoal p,
.section--charcoal .lead {
  color: var(--color-text-invert-muted);
}

.on-dark .eyebrow,
.section--dark .eyebrow,
.section--charcoal .eyebrow {
  color: var(--color-accent-soft);
}

.on-dark .caption,
.section--dark .caption,
.section--charcoal .caption {
  color: var(--color-text-invert-muted);
}

a.text-link {
  color: var(--color-forest);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease);
}

a.text-link:hover {
  color: var(--color-accent);
}

blockquote {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-forest);
  font-weight: 500;
}

@media (min-width: 768px) {
  .display {
    letter-spacing: 0.02em;
  }
}