/* ==========================================================================
   Artist Name Generator — responsive.css
   Cross-cutting responsive adjustments not tied to a single component.
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --container: 960px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .site-header { position: sticky; }
  .nav { min-height: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .gen-actions .btn { flex: 1 1 auto; }
  .footer__bottom { flex-direction: column; align-items: center; }
}

@media (max-width: 400px) {
  .container { padding-inline: 1rem; }
  .btn { font-size: .92rem; padding: .85rem 1.2rem; }
}

/* Larger screens: cap hero text width nicely */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
}