:root {
  --sire-page-width: min(90vw, 160vh, 1800px);
}

/* Keep desktop compositions close to a 16:9 reference. On extra-wide or
   short viewports, height becomes the limiting dimension instead of allowing
   vw-based headings and panels to dominate the screen. */
@media (min-width: 721px) {
  .topbar,
  .menu,
  .bottom-bar,
  .catalog-header,
  .catalog-main,
  .catalog-footer,
  .guides-header,
  .guides-main,
  .guides-footer,
  .guide-detail-header,
  .guide-detail-main,
  .guide-detail-footer,
  .detail-header,
  .detail-main,
  .detail-footer,
  .not-found {
    width: var(--sire-page-width);
  }

  .active-category {
    font-size: clamp(24px, min(2.79vw, 4.96vh), 54px);
  }

  .active-script {
    font-size: clamp(24px, min(3.6vw, 6.4vh), 68px);
  }

  .active-guide {
    font-size: clamp(25px, min(3.69vw, 6.56vh), 70px);
  }

  .guide-detail-shell .header-label {
    font-size: clamp(24px, min(3.6vw, 6.4vh), 68px);
  }

  .detail-shell .header-label {
    font-size: clamp(23px, min(2.97vw, 5.28vh), 58px);
  }

  .catalog-intro h1 {
    font-size: clamp(47px, min(6.48vw, 11.52vh), 117px);
  }

  .catalog-heading h1,
  .guides-heading h1 {
    font-size: clamp(34px, min(4.32vw, 7.68vh), 83px);
  }

  .guide-detail-shell h1,
  .detail-shell h1 {
    font-size: clamp(38px, min(4.5vw, 8vh), 86px);
  }

  .news-hero h1 {
    font-size: clamp(50px, min(5.58vw, 9.92vh), 106px);
  }

  .guide-detail-shell h2 {
    font-size: clamp(25px, min(2.7vw, 4.8vh), 52px);
  }

  .article-section h2 {
    font-size: clamp(28px, min(2.88vw, 5.12vh), 56px);
  }

  .detail-shell h2 {
    font-size: clamp(27px, min(2.97vw, 5.28vh), 56px);
  }

  .news-section-heading h2,
  .news-archive-heading h2 {
    font-size: clamp(38px, min(4.59vw, 8.16vh), 85px);
  }

  .news-section-heading > span {
    font-size: clamp(38px, min(4.14vw, 7.36vh), 74px);
  }

  .news-hero-copy {
    padding: clamp(31px, min(3.69vw, 6.56vh), 70px);
  }
}
.sire-responsive-picture {
  display: contents;
}