/* Refine the original entry graphic without changing the interaction. */
@media (max-width: 900px) {
  .intro-bars .bar-b { top: 10%; height: 35%; }
  .intro-bars .bar-d { bottom: 15%; height: 28%; }
  .intro-bars .bar-b span { font-size: clamp(.56rem, 1.15vw, .72rem); }
}

@media (max-width: 540px) and (orientation: portrait) {
  .intro-bars .bar-b { top: 11%; height: 34%; }
  .intro-bars .bar-d { bottom: 17%; height: 27%; }

  /* The film and navigation form one group, with the footer at the bottom. */
  .site:has(.home-view:not([hidden])) {
    min-height: 100svh;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .site:has(.home-view:not([hidden])) .stage {
    justify-content: center;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .site:has(.home-view:not([hidden])) .category-nav {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  /* Allow long titles to wrap inside the project title panel. */
  .case-study-view .case-hero-streetpress h1,
  .case-study-view .case-hero-streetpress h1 span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .case-study-view .case-hero-streetpress h1 {
    font-size: clamp(.66rem, 3.2vw, .82rem);
    line-height: 1.24;
  }

  /* Project image then text: remove the oversized pause between them. */
  .case-study-view .case-hero + .case-intro,
  .case-study-view .case-hero + .case-manifesto,
  .case-study-view .case-hero + blockquote {
    margin-top: -1.5rem;
  }

  .case-study-view .case-intro { margin-bottom: 1.6rem; }

  /* The category descriptions and their first card belong to one section. */
  .realisations-view:not(.film-open) .subcategory-grid,
  .productions-view:not(.film-open) .subcategory-grid,
  .commercials-view:not(.film-open) .subcategory-grid {
    margin-top: 1.2rem;
  }
}