/* About uses the homepage's paper hero and reading rhythm. */
.navigation-page .approach-hero {
  min-height: auto;
  padding: var(--hero-top-space) var(--page-gutter) 4rem;
  align-content: start;
  gap: 0;
  background: var(--paper);
  color: var(--ink);
}
.approach-hero h1 {
  font-size: clamp(3.2rem,6.3vw,6.5rem);
  font-weight: 700;
  line-height: .93;
  letter-spacing: 0;
  margin: .8rem 0 1.4rem;
}
.approach-hero h1 em { color: var(--clay); }
.approach-hero .hero-summary { max-width: 40rem; }
.approach-hero .hero-summary > p {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.75;
}
.approach-hero .button-outline { color: var(--ink); }
.approach-hero .button-outline:hover { color: var(--green); }
.navigation-page .collaborator-carousel {
  margin-inline: calc(-1 * var(--page-gutter));
  padding-inline: var(--page-gutter);
}
@media (max-width:760px) {
  .approach-hero h1 { font-size: clamp(3.5rem,13vw,5rem); }
  .navigation-page .approach-hero { padding-bottom: 3rem; }
}

/* Align visible hero text, rather than only the section boxes. */

:is(.approach-hero,.section-head,.notes-intro,.garden-title,.resources-title,.books-intro,.marks-title) > .eyebrow:first-child {
  margin-top: 0;
  margin-bottom: 0;
}
:is(.approach-hero,.section-head,.notes-intro,.garden-title,.resources-title,.books-intro,.marks-title) > h1 {
  margin-top: .8rem;
  margin-bottom: 1.4rem;
}

/* About hero in the field green palette. */
.navigation-page .approach-hero { background: #405c32; color: var(--paper); }
.approach-hero h1 em { color: var(--yellow); }
.approach-hero .button-outline { color: var(--paper); }
.approach-hero .button-outline:hover { color: var(--green); }