/* Short landscape viewports: reserve distinct bands for identity, contacts and controls.
   Artwork and portrait/desktop layouts are deliberately untouched. */
@media (orientation: landscape) and (max-height: 500px) {
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) {
    top: 70px; bottom: auto;
  }
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) h1 {
    font-size: 36px; line-height: 1.08; margin: 7px 0; letter-spacing: -1.5px;
  }
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) > p:not([class]) {
    font-size: 13px; line-height: 1.4;
  }
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) nav {
    margin-top: 5px; gap: 22px;
  }
  #site :is(.sp-kicker,.ocean-eyebrow,.rain-eyebrow,.art-eyebrow,.weather-eyebrow) {
    font-size: 9px; line-height: 1.3; margin: 0;
  }
  #site .sp-page footer {
    bottom: calc(56px + env(safe-area-inset-bottom));
    gap: 12px; translate: none !important;
  }
  #site .sp-world footer {
    bottom: calc(8px + env(safe-area-inset-bottom)); gap: 2px;
  }
  #site .sp-world footer .sp-world-label { line-height: 1.45; }
  #site .sp-machine .typography-contacts { top: 57%; bottom: auto; }
  #site .sp-machine footer { left: 38px; right: auto; }
  #site .sp-machine .sp-hint {
    bottom: calc(14px + env(safe-area-inset-bottom)); right: 260px;
    translate: none !important; font-size: 10px;
  }
  #site .sp-page :is(.magnetic-label,.cradle-label) { top: 63px; left: 5%; right: 55%; font-size: 8px; }
  #site .sp-cradle footer { right: 38px; flex-direction: row; }
  #site .sp-cradle .cradle-actions button { min-height: 44px; }
  #site .sp-magnetic .magnetic-reset { min-height: 44px; }
  #scene-picker-panel { top: 66px; max-height: calc(100dvh - 82px); }
}
@media (orientation: landscape) and (max-height: 330px) {
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) { top: 61px; }
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) h1 { font-size: 30px; margin: 4px 0; }
  #site .sp-page :is(.sp-world-title,.ocean-title,.rain-title,.art-title,.weather-title) nav { margin-top: 0; }
  #site .sp-world footer .sp-world-label { font-size: 10px; }
}
/* Give the interactive artwork its own space beside the introduction. */
@media (orientation: landscape) and (max-height: 500px) {
  #site .sp-eclipse .weather-title { left: 58%; right: 5%; text-align: left; top: 85px; }
  #site .sp-eclipse .weather-title nav { justify-content: flex-start; }
  #site .sp-magnetic canvas { width: 52%; }
  #site .sp-magnetic .art-title { left: 56%; right: 5%; top: 85px; text-align: left; }
  #site .sp-magnetic .art-title nav { justify-content: flex-start; }
  #site .sp-machine .typography-contacts { top: 53%; }
}
@media (orientation: landscape) and (max-height: 330px) {
  #site .sp-eclipse .weather-title, #site .sp-magnetic .art-title { top: 68px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #site .sp-magnetic canvas { mask-image: linear-gradient(to right,#000 88%,transparent); }
}