/* Layout bounds shared by large screens, including shallow desktop windows. */
@media (min-width: 901px) {
  :root {
    --layout-gutter: clamp(32px, 5vw, 96px);
    --layout-inset: max(var(--layout-gutter), calc((100vw - 1600px) / 2));
  }
  .site-header, .hero, .chapter, .contact-section, body > footer {
    padding-inline: var(--layout-inset);
    max-width: none;
  }
  .hero-top, .hero-bottom { left: var(--layout-inset); right: var(--layout-inset); }
  .discipline-nav, .faq-section { margin-inline: var(--layout-inset); }
  .trust-band { margin-inline: max(32px, calc((100vw - 1760px) / 2)); }
  .photography { padding-inline: 0; }
  .photography > .section-heading, .photography > .filter-bar,
  .photography > .section-end, .photo-contact-sheet { margin-inline: var(--layout-inset); }
  .heading-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 310px); }
  .heading-line h2 { max-width: none; min-width: 0; }
  .heading-line > p { max-width: 100%; }
  .hero-composition { height: clamp(430px, calc(100svh - 90px), 1000px); min-height: 0; }
  .hero-composition::after { inset: 0 calc(-1 * var(--layout-inset)); }
  .hero h1 { font-size: clamp(68px, min(11.8vw, 17.5svh), 186px); }
  .hero-copy { top: 18%; }
  .hero-cinema { left: 34%; right: -6%; top: 9%; height: 78%; }
  .hero-film {
    --reel-card-width: min(48%, calc((100svh - 170px) * .78), 500px);
    width: var(--reel-card-width);
    left: calc(50% - var(--reel-card-width) / 2);
  }
  .footer-wordmark { font-size: clamp(120px, 13vw, 230px); }
}

/* Fit the entire demo viewport, including its browser bar, without cropping. */
.showcase-stage { aspect-ratio: auto; height: calc(var(--preview-scale, .65) * 900px + 36px); }
@media (max-width: 600px) {
  .showcase-stage { height: calc(var(--preview-scale, .65) * 900px + 31px); }
}

@media (min-width: 901px) and (min-aspect-ratio: 16/9) {
  .chapter { padding-top: clamp(65px, 10svh, 110px); }
  .heading-line h2 { font-size: clamp(54px, min(6.5vw, 12svh), 108px); }
  .heading-line { padding-top: clamp(24px, 4svh, 40px); }
  .showcase {
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 45px;
    max-width: min(100%, calc(max(300px, 100svh - 240px) * 1.422222 + 280px));
    margin-inline: auto;
  }
  .showcase-theatre { width: 100%; }
  .showcase-world > .section-heading { margin-bottom: 40px; }
  .design-art, .design-preview { height: clamp(270px, 50svh, 440px); }
  .about-grid { gap: clamp(40px, 6vw, 100px); }
  .project-reader { min-height: 0; }
  .project-stage { min-height: min(520px, 70svh); }
}

/* A short landscape viewport needs a shorter composition, not hidden controls. */
@media (min-width: 601px) and (max-height: 600px) and (min-aspect-ratio: 16/9) {
  .site-header { height: 68px; }
  .hero-composition { height: max(360px, calc(100svh - 68px)); min-height: 0; }
  .hero-top { top: 16px; font-size: 7px; }
  .hero-copy { top: 18%; }
  .hero h1 { font-size: clamp(58px, 15svh, 90px); }
  .hero h1 em { margin-bottom: 12px; }
  .hero-copy > p { font-size: 11px; margin-bottom: 14px; }
  .hero-copy .action-button { min-height: 42px; padding-block: 11px; }
  .hero-cinema { left: 35%; right: -5%; top: 10%; height: 75%; }
  .hero-film { width: 52%; left: 24%; }
  .hero-film-caption { bottom: 77px; font-size: 18px; }
  .hero-card-actions { left: 12px; right: 12px; bottom: 14px; gap: 5px; }
  .hero-card-actions button { font-size: 8px; padding: 9px 11px; min-height: 36px; }
  .hero-bottom { bottom: 12px; }
  section[id] { scroll-margin-top: 80px; }
}

@media (min-width: 601px) and (max-height: 450px) and (min-aspect-ratio: 16/9) {
  .hero-composition { height: max(300px, calc(100svh - 68px)); }
  .hero-copy { top: 16%; }
  .hero h1 { font-size: clamp(48px, 14svh, 64px); }
  .hero h1 em { margin-bottom: 8px; }
  .hero-copy > p { margin-bottom: 10px; }
  .hero-bottom { bottom: 8px; }
}