/* Shared typography and alignment for content sections below the hero. */
:root {
  --section-width: 1472px;
  --text-muted: #58615e;
  --text-accent: #8b4a19;
}

.section {
  padding: 72px 4vw 64px;
  color: var(--forest);
}

.section__inner {
  max-width: var(--section-width);
  margin-inline: auto;
}

.section__label {
  margin: 0 0 24px;
  color: var(--text-accent);
  font: 700 12px / 1.5 var(--sans);
  letter-spacing: .18em;
  text-align: left;
  text-transform: uppercase;
}

.section__heading {
  margin: 0 0 32px;
  color: var(--forest);
  font: 400 clamp(38px, 4.9vw, 76px) / 1.03 var(--serif);
  letter-spacing: -.04em;
  text-align: left;
}

.section__heading:has(+ .section__intro) { margin-bottom: 0; }

.section__intro {
  max-width: 900px;
  margin: 26px 0 32px;
  color: var(--text-muted);
  font: 400 clamp(20px, 1.8vw, 26px) / 1.4 var(--serif);
  text-align: left;
}

.section__hint { display: none; }

@media (max-width: 700px) {
  .section { padding: 44px 20px 48px; }
  .section__label { margin-bottom: 20px; }
  .section__heading { margin-bottom: 20px; font-size: clamp(34px, 8.5vw, 48px); }
  .section__heading br, .section__intro br { display: none; }
  .section__intro { margin: 20px 0; font-size: 20px; }
  .section__hint {
    display: block;
    margin: 0 0 20px;
    color: var(--text-muted);
    font: 400 12px / 1.5 var(--sans);
  }
}