/* Mobile menu (additive). Above 720px the design's own navigation row applies and the button is hidden. */
.nav-toggle { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; color: var(--cream); background: rgba(255,255,255,.08); border: 1px solid rgba(233,199,120,.6); border-radius: 4px; font: inherit; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.nav-toggle-bars { display: inline-grid; gap: 3px; width: 18px; }
.nav-toggle-bars span { display: block; height: 2px; background: var(--gold); transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  /* `header .nav-wrap` outranks the design's own `.nav-wrap { align-items: flex-start }` whichever stylesheet loads last
     (the templates link this file before the design's inline CSS; the home page injects it after) */
  header .nav-wrap { flex-wrap: wrap; align-items: center; gap: 12px; }
  .nav-wrap .brand { flex: 1 1 0; min-width: 0; }
  .nav-wrap .brand-copy strong { font-size: 1.25rem; line-height: 1; }
  .nav-wrap.nav-open nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(233,199,120,.35); }
  .nav-wrap.nav-open nav a { padding: 12px 10px; font-size: .95rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-wrap.nav-open nav a.nav-submit { margin-top: 8px; text-align: center; border: 1px solid #ea6872; }
  html.nav-lock { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle-bars span { transition: none; } }