/* Keep the editorial scale on laptops. Content may extend below the fold;
   never shrink a whole section simply to make it fit. */
@media (min-width:1000px) {
  .section { padding-block:clamp(64px,8svh,108px); }
  .window-stage { display:grid; gap:32px; }
  .window-heading, .window-stage .sky-tabs { margin:0; }
  .window-heading { gap:56px; }
  .window-stage .sky-panel { grid-template-columns:1.15fr 1fr; gap:clamp(40px,5vw,72px); align-items:center; }
  /* Cap the photo height by reducing the entire frame proportionately.
     Its source aspect ratio stays intact at every viewport height. */
  .window-stage .scene-photo { width:min(100%,calc(clamp(360px,calc(100svh - 540px),580px) * var(--scene-ratio))); height:auto; min-width:0; justify-self:center; }
  .window-stage .scene-info { padding:0; }
  .window-stage [data-scene="aurora"] .screen-peek { display:flex; padding:12px 18px; gap:18px; background:var(--soft); }
  .window-stage [data-scene="aurora"] .screen-peek img { width:120px; height:80px; object-fit:cover; border-radius:6px; }
  .window-stage [data-scene="aurora"] .screen-peek > span { display:block; padding:0; }
  .window-footer { margin-top:56px; padding-top:40px; }
  #first-class { overflow:clip; }
}

/* The frame uses the photo's aspect ratio. Absolute sizing avoids an
   intrinsic image height expanding a flexible frame in Safari. */
.scene-image > img { position:absolute; inset:0; width:100%; height:100%; }

/* Taller desktop windows get complete visual chapters. Their height is a
   minimum, so expanded details, zoomed text and longer copy remain reachable. */
@media (min-width:1000px) and (min-height:900px) {
  :root { --chapter-gutter:clamp(32px,4svh,56px); --chapter-height:calc(100svh - var(--site-header-height,85px) - var(--chapter-gutter) * 2); }
  .hero-grid { min-height:calc(100svh - var(--site-header-height,85px) - 80px); }
  #window, #inbound, #screens { padding-block:var(--chapter-gutter); }
  .window-stage { min-height:var(--chapter-height); align-content:center; gap:clamp(24px,2.6svh,36px); }
  .window-heading h2 { font-size:clamp(2.4rem,3.4vw,3.5rem); }
  .window-stage .sky-choice { padding-block:10px; }
  .window-stage .sky-window { width:58px; height:75px; }
  #inbound .intelligence-layout { min-height:var(--chapter-height); }
  #first-class .suite-grid { min-height:calc(100svh - var(--site-header-height,85px)); padding-block:var(--chapter-gutter); }
  #screens .screen-stage { min-height:var(--chapter-height); display:flex; flex-direction:column; justify-content:center; }
  .screen-carousel .screen-slide { min-height:500px; height:clamp(500px,calc(100svh - 440px),680px); }
  .screen-carousel .phone { width:auto; height:100%; max-height:calc(100svh - 520px); max-width:280px; aspect-ratio:660 / 1434; }
  .carousel-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
  .carousel-controls { grid-column:2; grid-row:1; margin:8px 0 14px; }
  .carousel-status { grid-column:1; grid-row:1; text-align:left; }
  .carousel-footer .reel-note { grid-column:3; grid-row:1; margin:0; text-align:right; }
}

/* Short native holds, only after measuring that the complete composition fits.
   Vertical gestures always keep their normal page direction and momentum. */
@media (min-width:1000px) and (min-height:900px) and (prefers-reduced-motion:no-preference) {
  .section-hold.can-hold { min-height:calc(var(--hold-height) + clamp(60px,10svh,110px)); }
  .section-hold.can-hold > :first-child { position:sticky; top:var(--section-top,121px); }
}