/* ═══════════════════════════════════════════════════════════
   COMPONENT — NAVIGATION  (reusable)
   Fixed top bar that gains a solid "scrolled" state (toggled by
   js/components/nav.js). Brand mark + links + sign-in + CTA.
   Page-agnostic: any public page can mount it. Depends on
   tokens.css and buttons.css.
═══════════════════════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:all .4s ease;padding:22px 0}
nav.scrolled{background:rgba(8,18,46,.97);border-bottom:1px solid rgba(200,149,26,.28);padding:14px 0;box-shadow:0 10px 40px rgba(0,0,0,.35)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 32px}

.brand{font-family:var(--font-display);font-weight:700;font-size:26px;color:#fff;letter-spacing:.2px;text-decoration:none;white-space:nowrap}
.brand .amber{color:var(--logo)}

.nav-right{display:flex;align-items:center;gap:34px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:#EFE7D5;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.2px;transition:color .25s}
.nav-links a:hover{color:var(--amber)}

.nav-signin{color:#fff;text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .25s}
.nav-signin:hover{color:var(--amber)}

@media(max-width:880px){.nav-links{display:none}.nav-right{gap:18px}}
@media(max-width:520px){.nav-signin{display:none}}