/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
}

:where(h1, h2, h3, h4, .title, .eyebrow) {
  text-wrap: var(--text-balance);
  hyphens: auto;
}

:where(p, li, dd, blockquote, figcaption, .lead) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: var(--text-pretty);
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--primary-green);
  opacity: 0.95;
  margin-bottom: 0.4rem;
}

.title {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--primary-green);
  margin-bottom: 1rem;
  letter-spacing: 0.2px;
}

.lead {
  font-size: 1.05rem;
  color: var(--text-soft);
}

.text-sheen {
  color: #355a2a;
  font-weight: 700;
}