/* Keep the first-edition phone introduction, fan, and caption together. */
@media (max-width: 800px) {
  body:is(.design-midnight, .design-folio) #t-overview:checked ~ .hero {
    /* The fixed 60px header occupies the top of the visible phone screen. */
    min-height: calc(100vh - 60px) !important;
    min-height: calc(100svh - 60px) !important;
    margin-inline: 0 !important;
    width: 100%;
  }

  body:is(.design-midnight, .design-folio) .hero-inner {
    width: 100%;
    padding: clamp(12px, 3svh, 24px) 18px 20px !important;
    gap: 12px !important;
  }

  body:is(.design-midnight, .design-folio) .hero h1.bibliographical-title {
    margin: 0 0 18px !important;
    font-size: clamp(34px, 5.3svh, 44px) !important;
  }

  body:is(.design-midnight, .design-folio) .hero .full-historical-title {
    margin: 0 0 12px;
  }

  body:is(.design-midnight, .design-folio) .hero .author-credit {
    margin: 0;
    color: inherit;
  }

  body.design-midnight .hero .hero-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.design-midnight .hero .hero-stage-label {
    max-width: 100%;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  body.design-midnight .hero .hero-highlight {
    margin-top: 10px;
    font-size: 18px;
  }
}