/* Give each public landing page a complete opening below the sticky header.
   Minimum height lets longer copy grow naturally on small screens or at zoom. */
:root { --aca-header-height: 86px; }
main > :is(.page-hero, .home-campus-banner, .bookstore-cover):first-child {
  box-sizing: border-box;
  min-height: calc(100vh - var(--aca-header-height));
  min-height: calc(100svh - var(--aca-header-height));
}

/* Leave a cream border below each opening banner. */
main > :is(.home-campus-banner, .bookstore-cover):first-child {
  background: var(--cream, #f8f4e8);
}

@media (min-width: 651px) {
  .home-campus-banner img,
  .bookstore-cover .bookstore-cover-image img {
    /* Taller canvases preserve the full scenes, with at least 64px of
       cream below them even on shorter laptop screens. */
    height: min(43.6vw, calc(100svh - var(--aca-header-height) - 64px));
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 650px) {
  :root { --aca-header-height: 74px; }

  /* On phones, the shallow panoramic banner and its introduction share the
     opening. This avoids an empty screen beneath a small, undistorted image. */
  main > :is(.home-campus-banner, .bookstore-cover):first-child {
    min-height: 0;
  }
  main > :is(.home-campus-banner + .home-hero, .bookstore-cover + .page-hero) {
    box-sizing: border-box;
    min-height: calc(100svh - var(--aca-header-height) - 33.3333vw);
  }
}