/* On compact screens the device leads; the copy is a quiet caption below it. */
.story-description-compact { display:none; }
@media (max-width:1000px) {
  .nav-shell { height:calc(78px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px); }
  .nav-shell .nav-detail { display:none; }
  .nav-shell .nav-cta { border-color:transparent;padding-inline:4px;font-size:11px; }
  .nav-shell .appearance-toggle { border-color:transparent; }
  .experience-sticky {
    --hero-min-height:700px;
    display:grid;
    grid-template-areas:'device' 'copy' 'controls';
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:20px;
    height:max(100svh,var(--hero-min-height));
    min-height:0;
    top:min(0px,calc(100svh - var(--hero-min-height)));
    padding:calc(94px + env(safe-area-inset-top,0px)) max(24px,6vw,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,6vw,env(safe-area-inset-left,0px));
  }
  .story-copy,.scene-unavailable .story-copy {
    grid-area:copy;position:relative;inset:auto;transform:none;
    width:100%;max-width:520px;min-width:0;min-height:120px;justify-self:center;text-align:center;
    display:flex;flex-direction:column;justify-content:center;
  }
  .story-copy .eyebrow,.story-actions { display:none; }
  .story-copy h1,.story-copy h2 {
    font-size:clamp(28px,6.6vw,40px);line-height:1.12;max-width:none;letter-spacing:-.045em;
  }
  .story-copy h1 br,.story-copy h2 br { display:none; }
  .story-copy h1 em,.story-copy h2 em { margin-left:0;letter-spacing:-.045em; }
  .story-copy p.story-description {
    max-width:330px;font-size:13px;line-height:1.6;margin:12px auto 0;text-wrap:pretty;
  }
  .story-description-full { display:none; }
  .story-description-compact { display:inline; }
  .device-stage {
    --scene-contained:1;
    grid-area:device;position:relative;inset:auto;
    width:100%;height:100%;min-width:0;min-height:0;
    overflow:hidden;contain:layout paint;
  }
  .device-stage .device-fallback,.scene-unavailable .device-stage .device-fallback {
    left:50%;top:50%;width:auto;height:82%;max-width:85%;
    border-width:5px;border-radius:24px;transform:translate(-50%,-50%) rotate(-5deg);
  }
  .scene-bottom {
    grid-area:controls;position:relative;inset:auto;min-width:0;
    display:flex;justify-content:center;align-items:center;
  }
  .scene-caption,.scroll-hint { display:none; }
  .scene-controls { justify-content:center;max-width:100%;gap:12px; }
  .chapter-buttons { border:0;background:transparent;padding:0;gap:4px;backdrop-filter:none; }
  .chapter-buttons button { min-height:44px;padding:8px 16px;font-size:11px;background:transparent; }
  .chapter-buttons button[aria-pressed='true'] { background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px; }
  .chapter-buttons svg { display:none; }
  .scene-controls .motion-control { border:0;background:transparent;backdrop-filter:none;color:var(--muted); }
  .scene-unavailable .experience { height:auto;min-height:0; }
  .scene-unavailable .experience-sticky { position:relative;top:0; }
  .scene-unavailable .scene-bottom { display:none; }
  #command-dialog { max-height:calc(100dvh - 24px);overflow:auto; }
  #command-input { font-size:16px; }
  .command-shell #command-results { max-height:min(50svh,calc(100dvh - 180px)); }
}
@media (max-width:430px) {
  .nav-shell { padding-inline:6%; }
  .nav-shell>nav { gap:8px; }
  .nav-shell .wordmark { font-size:29px; }
  .nav-shell .nav-cta { font-size:10px; }
  .story-copy p.story-description { max-width:280px;font-size:12px; }
  .ipad-menu-actions { flex-wrap:wrap; }
  .ipad-menu-actions>button { flex:1 1 100px; }
  .ipad-text-size { flex:none; }
  .mac-preview[data-view='focus'] .mac-preview-pages { aspect-ratio:auto;min-height:260px; }
  .mac-preview[data-view='focus'] .mac-preview-page { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:16px; }
  .mac-preview[data-view='focus'] .mac-preview-page h3 { font-size:clamp(25px,7.5vw,32px); }
  .mac-preview[data-view='focus'] .mac-preview-page img { min-height:220px; }
}
/* Landscape keeps the same device-first order without squeezing in extra copy. */
@media (max-width:1000px) and (min-width:501px) and (max-height:600px) {
  .nav-shell { height:calc(60px + env(safe-area-inset-top,0px)); }
  .experience-sticky {
    --hero-min-height:320px;
    gap:10px;
    padding-top:calc(68px + env(safe-area-inset-top,0px));
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  }
  .story-copy,.scene-unavailable .story-copy { min-height:27px; }
  .story-copy h1,.story-copy h2 { font-size:24px; }
  .story-copy p.story-description { display:none; }
}