/*
 * THE HERO ON A SHORT SCREEN.
 *
 * The record card added a whole block of content below the name, and on a
 * laptop in landscape — wide enough for the desktop padding, not tall enough to
 * afford it — the two together pushed BARBAROSOS up behind the navbar. The Next
 * build answered with this one query rather than by shrinking the type at every
 * width, and these are its exact values: less air above and below, a tighter gap
 * under the title and the subtitle, and a clamp() that also watches the viewport
 * height.
 *
 * Copied verbatim from the deployed stylesheet. Tailwind cannot express a
 * width-and-height query as a utility, which is why .hero-shell and
 * .hero-subtitle exist as plain classes on the markup at all.
 */
@media (min-width: 768px) and (max-height: 900px) {
  .hero-shell {
    padding-top: 8.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-shell h1 {
    margin-bottom: 0.75rem;
    font-size: clamp(2.5rem, min(9vw, 8.5vh), 7.5rem);
  }

  .hero-shell .hero-subtitle {
    margin-bottom: 1.75rem;
  }
}