/* Keep headings readable at narrow Android and iPhone widths. */
header h1,
main h2,
main h3 {
  text-wrap: balance;
}

header h1 > span:last-child {
  font-size: clamp(30px, 9.6vw, 92px);
  white-space: nowrap;
}

main p {
  text-wrap: pretty;
}

#for-whom .for-whom-title > span {
  display: block;
  white-space: nowrap;
}

/* The hero switches from the photo-overlay layout to two columns at 1024px.
   Let the main title become two clean lines there instead of sliding under
   the portrait. */
@media (min-width: 1024px) {
  header h1 > span:last-child {
    font-size: clamp(64px, 6vw, 82px);
    line-height: 0.94;
    white-space: normal;
  }
}