/* ── NAV ──────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 200;
  transition: background 0.4s, border-color 0.4s;
}
nav.scrolled {
  background: rgba(33,33,36,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 2.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700;
  color: var(--white); text-decoration: none; letter-spacing: 0.01em;
}
.logo span { color: var(--red); }

/* ── Nav links (full nav) ────────────────── */
.nav-links {
  list-style: none; display: flex; align-items: center; gap: 2.5rem;
}
.nav-links a {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--red) !important; color: #fff !important; padding: 0.5rem 1.2rem;
  border-radius: 2px; text-decoration: none;
}
.nav-cta:hover { background: var(--red-dark) !important; text-decoration: none; }

/* ── Burger button ───────────────────────── */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--white); transition: 0.3s;
}

/* ── Homepage nav animation classes ──────── */
.nav-animated .logo {
  opacity: 0; animation: fadeIn 0.6s 1.8s forwards;
}
.nav-animated .nav-links {
  opacity: 0; animation: fadeIn 0.6s 2s forwards;
}

/* ── Interior nav (always solid bg) ──────── */
nav.nav-solid {
  background: rgba(33,33,36,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ── RESPONSIVE: mobile nav drawer ───────── */
@media (max-width: 900px) {
  .burger { display: flex; }

  .nav-links {
    display: flex !important;
    animation: none !important;
    opacity: 1 !important;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: rgba(22,22,25,0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 2.5rem;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  #nav.nav-open .nav-links {
    max-height: 420px;
    padding: 1rem 2.5rem 1.75rem;
    pointer-events: auto;
  }
  .nav-links li { border-bottom: 1px solid rgba(66,66,71,0.4); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 0.9rem 0; font-size: 0.82rem; }
  .nav-cta { background: none !important; padding: 0.9rem 0 !important; color: var(--red) !important; border-radius: 0 !important; }

  /* Burger → X animation */
  #nav.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  #nav.nav-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #nav.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}