/* Purpose comes first, expressed through typography and open space. */
.about-page .about-purpose {
  display: grid; grid-template-columns: .8fr 1.2fr; align-items: start;
  gap: 72px; padding-block: clamp(64px, 7vw, 100px);
}
.about-purpose h1 {
  margin: 0; font: clamp(2.6rem, 4.7vw, 4.4rem)/1.12 var(--display);
  text-transform: uppercase; letter-spacing: -.045em;
}
.about-purpose h1 em { font-style: normal; color: var(--warm); }
.about-purpose-statements { display: grid; gap: 34px; max-width: 680px; }
.about-purpose-statements h2 {
  margin: 0 0 14px; font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.4 var(--display);
  letter-spacing: -.025em; text-transform: none;
}
.about-purpose-statements p { margin: 0; font-size: 17px; line-height: 1.85; }
.about-page .page-hero-mentors { min-height: 0; }
.about-page .page-hero-mentors h2 {
  margin: 0 0 24px; font: clamp(2rem, 3.6vw, 3.5rem)/1.12 var(--display);
  text-transform: uppercase; letter-spacing: -.04em;
}
.about-page .page-hero-mentors h2 em { color: var(--warm); font-style: normal; }
@media (max-width: 900px) {
  .about-page .about-purpose { grid-template-columns: 1fr; gap: 36px; }
  .about-purpose-statements { max-width: 700px; }
}
@media (max-width: 600px) {
  .about-purpose h1 { font-size: clamp(2.2rem, 8.7vw, 3.2rem); }
  .about-purpose-statements p { font-size: 16px; }
  .about-purpose-statements { gap: 30px; }
  .about-page .page-hero-mentors h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
}