/* Narrow screens.
   One media query overriding six blocks rather than a responsive tail in each
   of them: at this width the whole page reflows as a unit, and keeping the
   overrides together is what lets a reader see the small-screen layout at
   once. It is numbered to sit after every block it overrides; moving it
   earlier would silently hand the desktop rules the win.

   880px is the canonical tablet stop (see tokens.css). It replaces a 60rem
   (960px) value that was outside that set: .split holds its two columns down
   to 880, so the extra 80px of stacking bought nothing. */

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; min-height: 0; }

  /* The photo stacks above its text rather than sitting beside it: at this
     width a 12rem column leaves the captions too narrow to read. */
  .draft { grid-template-columns: 1fr; }

  .draft__image { max-width: 16rem; }

  /* The photo becomes a band above the form rather than a column beside it.
     The gap replaces space-between: at this height the three blocks would
     otherwise bunch against the top edge. */
  .split__aside {
    min-height: 22rem;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }

  .split__promise p { font-size: 1.625rem; }
  .split__main { padding: 2rem 1.5rem 3rem; }

  .site-main { padding: 2rem 1.25rem 3rem; }
  /* Only the tightening here: the wrapping itself is a base rule in 020-shell,
     because the nav must not overflow at any width. */
  .site-header { padding: 1rem 1.25rem; }
  .site-nav { gap: 1rem; }
  .panel { padding: 1.5rem; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .page-head h1 { font-size: 2rem; }
}