/* One responsive headline scale for the three illustrated opening sections. */
:root {
  --hero-title-size: clamp(3rem, min(6vw, 11svh), 5.75rem);
  --hero-text-inset: max(calc(var(--frame-gutter) + var(--page-inset) + 1px), calc((100% - 1600px)/2 + var(--page-inset)));
}
#main .home-heading h1,
#about .home-heading h1,
#science .science-content .cover h1 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--hero-title-size);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: none;
  margin: 0;
}
#main .home-content,
#about .home-content,
#science .science-content .cover-copy {
  position: relative;
  inset: auto;
  z-index: 2;
  isolation: isolate;
  padding-inline: var(--hero-text-inset);
}
#main > .home-hero { min-height: calc(100svh - 62px); }
#main .original-strip { background: var(--paper) !important; }
#science { --science-header-height: 56px; }

#main .home-content,
#about .home-content { padding-bottom: 36px; }
#about .about-hero-strip { padding-inline: var(--hero-text-inset); }
/* Short laptop windows need enough image height to keep the headline in
   the open foreground instead of pushing it into the trees. */
@media (min-width: 961px) {
  #main > .home-hero {
    min-height: max(calc(100svh - 62px), calc(min(100vw, 1600px)*.562799));
  }
  #about .about-hero.immunisation-home.home-hero {
    min-height: max(100svh, calc(min(100vw, 1600px)*.562799));
  }
}
@media (max-width: 960px) {
  /* The heading follows the illustration without a viewport-sized gap. */
  #main .home-content,
  #about .home-content {
    margin-top: 0;
    align-self: start;
    padding-top: 24px;
    padding-bottom: 32px;
  }
  #about .about-hero.immunisation-home.home-hero {
    grid-template-rows: auto minmax(min-content,1fr) auto auto;
  }
  #about { --hero-header-height: 56px; }
  /* Preserve the 16:9 animation plane while framing the courtyard for a tall screen. */
  #about .about-art,
  #about .home-fade {
    width: max(100%, calc((100svh - var(--hero-header-height) - var(--hero-title-size)*2.04 - 220px)*1.776833));
    max-width: none;
    justify-self: center;
    align-self: start;
  }
  #about .about-hero-strip { align-items: center; align-content: center; }
}
@media (max-width: 650px) {
  :root {
    --hero-title-size: clamp(2rem, 9vw, 3rem);
    --hero-text-inset: 22px;
  }
  #about { --hero-header-height: 140px; }
  #science { --science-header-height: 140px; }
  #main .home-content,
  #about .home-content { padding-top: 20px; padding-bottom: 28px; }
  #science .science-content .cover-copy { row-gap: 20px; }
}