/* v5 fixes layered over the built main.css (no Tailwind rebuild needed).

   Phone nav: at 375 px the brand, the sound toggle (wrapping to two lines) and "Get launch updates" add up to
   400 px, so the button is clipped 25 px off the right edge. Same bug on the live site as of 2026-09-30.
   Tighten the nav under 430 px and keep the toggle on one line. */
@media (max-width: 430px) {
  .nav { padding: 0 14px; }
  .brand { font-size: 13px; letter-spacing: 0.08em; }
  .nav ul { gap: 8px; }
  .sound-toggle { white-space: nowrap; padding: 7px 10px; font-size: 12px; }
  .nav .btn-sm { padding: 8px 12px; font-size: 13px; }
}
/* Portrait crop: the frames are 16:9 and object-fit: cover centres them, which on a phone leaves a thin vertical
   strip and cuts the Capitol (about 78% across in every frame) off the edge. The live site avoids this with a
   purpose-cropped portrait video; the 4K frames need an object-position instead. 76% keeps the Capitol and the
   slab as it arrives overhead in view. Landscape and 4:3 windows still show it at the default centre. */
@media (max-aspect-ratio: 1/1) {
  .cinema-frame { object-position: 76% 50%; }
}

/* smallest phones (320 px): keep both controls by shortening the logo to "A.X." */
@media (max-width: 350px) {
  .brand span { display: none; }
}

/* v7: the hero film has its own portrait encode, already cropped around the Capitol */
.cinema-video { object-position: 50% 50% !important; background: #0d0f13; }