/* Preserve the spacious desktop composition as the available viewport shrinks.
   The reference uses roughly 2190 x 1100 CSS pixels after display scaling.
   Scale layout dimensions, rather than zooming the page or its WebGL canvas.
   Reading sizes and controls have independent, accessible lower bounds. */
@media (min-width: 1101px) {
  :root {
    --desktop-unit: clamp(.72px, min(.0457vw, .0912svh), 1px);
  }

  /* Opening: keep the complete invitation, CTA and scroll cue in the frame. */
  .hero {
    min-height: calc(1030 * var(--desktop-unit));
    padding-bottom: calc(105 * var(--desktop-unit));
  }
  .hero-copy { padding-top: calc(105 * var(--desktop-unit)); }
  .hero h1 {
    font-size: min(9.7vw, calc(180 * var(--desktop-unit)));
    margin-bottom: calc(40 * var(--desktop-unit));
  }
  .hero-introduction, .hero-incentive {
    max-width: max(560px, calc(630 * var(--desktop-unit)));
  }
  .hero-introduction .hero-chapter { margin-bottom: calc(18 * var(--desktop-unit)); }
  .hero-introduction h2 {
    font-size: max(16px, calc(18 * var(--desktop-unit)));
    margin-bottom: calc(15 * var(--desktop-unit));
  }
  .hero-introduction > p:not(.hero-chapter) {
    font-size: max(16px, calc(18 * var(--desktop-unit)));
  }
  .hero-incentive {
    margin-top: calc(27 * var(--desktop-unit));
    padding-top: calc(23 * var(--desktop-unit));
  }
  .hero-incentive > .eyebrow { max-width: none; }
  .hero-incentive > p:not(.eyebrow) {
    font-size: max(14px, calc(16 * var(--desktop-unit)));
    margin: calc(12 * var(--desktop-unit)) 0 calc(22 * var(--desktop-unit));
  }
  .hero-collaboration { gap: calc(50 * var(--desktop-unit)); }
  .hero-brand-lockup { gap: calc(58 * var(--desktop-unit)); }
  .hero-mini { max-width: calc(290 * var(--desktop-unit)); }
  .hero-tradmans { max-width: calc(200 * var(--desktop-unit)); }
  .hero-cross { font-size: calc(34 * var(--desktop-unit)); }
  .hero-brand-rule { width: calc(75 * var(--desktop-unit)); }
  .hero .story-link { bottom: calc(33 * var(--desktop-unit)); }

  /* Keep the editorial rhythm consistent beyond the opening. */
  .section-pad { padding-block: calc(120 * var(--desktop-unit)); }
  .section-intro { margin-bottom: calc(65 * var(--desktop-unit)); }
  .section-intro h2 { font-size: min(5.9vw, calc(100 * var(--desktop-unit))); }
  .section-number { margin-bottom: calc(28 * var(--desktop-unit)); }
  .intro-body p { font-size: max(16px, calc(17 * var(--desktop-unit))); }
  .button {
    min-height: 48px;
    padding: max(11px, calc(13 * var(--desktop-unit))) max(20px, calc(23 * var(--desktop-unit)));
    gap: calc(44 * var(--desktop-unit));
  }
  .film-section { padding-block: calc(80 * var(--desktop-unit)); }
  .film-section > .section-intro { margin-bottom: calc(40 * var(--desktop-unit)); }
  .film-frame.film-artwork { height: min(37vw, calc(720 * var(--desktop-unit))); }
  .review-image { height: calc(520 * var(--desktop-unit)); }
  .review-feature { padding-bottom: calc(70 * var(--desktop-unit)); }
  .review-copy h3 { font-size: min(3.7vw, calc(62 * var(--desktop-unit))); }
  .story-grid { margin-top: calc(70 * var(--desktop-unit)); }
  .story-image { height: calc(300 * var(--desktop-unit)); }
  .cooper-image img { height: calc(560 * var(--desktop-unit)); }
  .cooper-qualities { margin-block: calc(65 * var(--desktop-unit)); }
  .event-grid figure { height: calc(280 * var(--desktop-unit)); }

  /* The scroll-grown bonsai keeps its established growth distance and timing. */
  .connection { padding-bottom: calc(100 * var(--desktop-unit)); }

  .finale { padding-top: calc(115 * var(--desktop-unit)); padding-bottom: 36px; }
  .finale-copy h2 { font-size: min(5.05vw, calc(90 * var(--desktop-unit))); }
  .finale-copy > p:not(.eyebrow) {
    font-size: max(16px, calc(18 * var(--desktop-unit)));
    margin: calc(26 * var(--desktop-unit)) 0 calc(30 * var(--desktop-unit));
  }
  .finale-prizes { padding-top: calc(25 * var(--desktop-unit)); }
  .prize-photo { height: calc(200 * var(--desktop-unit)); }
  .finale-prize h3 { font-size: max(28px, calc(34 * var(--desktop-unit))); }
  .finale-actions { padding-top: calc(32 * var(--desktop-unit)); }
  .finale-cooper { height: min(30vw, calc(530 * var(--desktop-unit))); }
  .finale-signoff {
    font-size: min(11vw, calc(190 * var(--desktop-unit)));
    margin-top: calc(70 * var(--desktop-unit));
    padding-top: calc(35 * var(--desktop-unit));
  }
}

/* Short desktop windows need more room for copy, not smaller reading type. */
@media (min-width: 1101px) and (max-height: 800px) {
  .hero-copy { padding-top: 45px; }
  .hero h1 { font-size: min(8.3vw, 16svh); margin-bottom: 24px; }
  .hero-introduction .hero-chapter { margin-bottom: 12px; }
  .hero-incentive { margin-top: 20px; padding-top: 18px; }
  .hero { padding-bottom: 80px; }
}