/* ==========================================================================
   About - the only rules main.css does not already cover.
   Everything else on this page reuses figure, split, duties, team, statement,
   list-check and the CTA band as they are.
   ========================================================================== */

/* The home page opens on a full-bleed hero that sits under the floating nav
   pill. An interior page has no hero, so its first section has to clear the
   pill itself or the meta rail runs underneath it. */
.page-head {
  padding-top: clamp(7.5rem, 13vw, 10.5rem);
}

/* The home page headline is a full-bleed hero and can carry the full display
   scale. An interior page head sits in a column beside a lead paragraph, so
   the same size breaks the authored two-line break into four and dwarfs the
   copy next to it. */
.page-head .display--1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  max-width: 17ch;
}

/* Above the split breakpoint the authored line breaks hold; below it the
   headline is allowed to wrap naturally rather than overflow. */
@media (min-width: 62rem) {
  .page-head .line-clip > span { white-space: nowrap; }
}

/* Jon's identity block sits below the sticky portrait, so it needs the same
   optical gap the figure caption already establishes above it. */
.bio__id {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.bio__chips {
  margin-top: var(--s-4);
}

/* His opening paragraph is a lead, but on the light column full-strength text
   holds the top of the story better than the muted lead grey. */
.bio__lead {
  color: var(--fg);
}

/* The mission statement is the move; the two supporting paragraphs sit under
   it rather than beside it. */
.mission__body {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}