/* Mobile layer. Loads last so it settles the scene artwork, which logos.css
   and photo-layout.css pin to fixed offsets for a wide stage. Below 760px the
   scenes become a single column: copy first, artwork after it in normal flow,
   so a scene is only as tall as what it holds. Approved desktop layout is
   untouched. */

@media (max-width: 760px) {

  /* Decorative art is rotated and deliberately overhangs its scene. On a phone
     that overhang becomes a sideways scroll, so each scene clips its own. */
  .stage, .scene { overflow-x: clip; }

  /* Scenes size to their content instead of a fixed storyboard height. */
  .stage, .all .scene { min-height: 0; height: auto; max-height: none; }
  .all .scene { padding-bottom: 46px; }

  /* Copy stacks, artwork follows it. The scenes order their children
     differently in the markup, so the artwork is ordered last explicitly. */
  .all .scene { display: flex; flex-direction: column; }
  .scene > .art { order: 9; }
  .scene > .caption { order: 10; }

  /* Artwork joins the flow. Widths stay under the column so the rotated pieces
     have room; the clip above catches whatever still overhangs. */
  .art,
  .hero .art, .origin .art, .sound .art,
  .ai .art, .community .art, .support .art {
    position: relative;
    inset: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    max-width: 420px;
    height: 330px;
    margin: 34px auto 0;
  }

  .origin .art { height: auto; aspect-ratio: 1; max-width: 360px; }
  .sound .art  { height: 370px; }
  .ai .art     { height: 345px; margin-top: 46px; }
  .community .art { height: 410px; }
  .support .art { height: 320px; max-width: 330px; }

  /* The arc is a wide-stage flourish that crosses the copy once the scene is
     one narrow column, so it sits out on phones. */
  .line { display: none; }

  /* Comfortable touch targets in the header navigation. */
  .site-nav a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 6px 0;
  }
  .site-nav .nav-donate { padding: 6px 17px; }
  .top .motion-toggle { min-height: 44px; }

  /* Room to tap between the calls to action. */
  .actions { gap: 14px; }
  .actions button, .actions a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Footer links sit a thumb-width apart instead of stacking tight. */
  .site-footer-links a,
  .site-footer-social a,
  .site-footer-legal nav a,
  .site-footer address a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer-links { gap: 0; }
  .site-footer-social { gap: 0 22px; }
}