/* ── NAV DESKTOP ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 2.5rem;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.5s ease;
}
nav.scrolled { opacity: 0; pointer-events: none; }

.logo {
  font-size: 3rem; letter-spacing: 0.14em; color: #fff;
  font-family: 'ClassyVogue', Georgia, serif; font-weight: normal;
  cursor: pointer; transition: text-shadow 0.5s ease;
}
.logo:hover {
  text-shadow:
    0 0 8px  rgba(255,255,255,0.6),
    0 0 22px rgba(255,255,255,0.35),
    0 0 55px rgba(255,255,255,0.15);
}

.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
  color: #777; text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.22em; transition: color 0.3s; cursor: pointer;
  font-family: 'NexaHeavy', Georgia, serif;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links .ig-link { display: flex; align-items: center; }
.nav-links .ig-link svg { width: 22px; height: 22px; fill: none; stroke: #777; stroke-width: 1.4; transition: stroke 0.3s; }
.nav-links .ig-link:hover svg { stroke: #fff; }

/* ── NAV MOBILE ── */
.mobile-nav { display: none; }

.hamburger {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 5px;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: #fff; }

.mobile-logo {
  font-size: 1.6rem; letter-spacing: 0.1em; color: #fff;
  font-family: 'ClassyVogue', Georgia, serif; font-weight: normal;
  text-align: center; flex: 1; cursor: pointer;
}
.mobile-ig { display: flex; align-items: center; }
.mobile-ig svg { width: 20px; height: 20px; fill: none; stroke: #777; stroke-width: 1.4; }

/* ── DRAWER ── */
.drawer {
  position: fixed; top: 0; left: -100%; width: 70%; max-width: 260px;
  height: 100vh; background: rgba(0,0,0,0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 200; transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; padding: 4rem 2rem 2rem; gap: 2rem;
}
.drawer.open { left: 0; }
.drawer a {
  color: #aaa; text-decoration: none; font-size: 1rem;
  letter-spacing: 0.25em; font-family: 'NexaHeavy', Georgia, serif;
  cursor: pointer; transition: color 0.3s;
  border-bottom: 1px solid #1a1a1a; padding-bottom: 1rem;
}
.drawer a:hover, .drawer a.active { color: #fff; }
.drawer-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none; color: #555; font-size: 1.5rem;
  cursor: pointer; transition: color 0.3s;
}
.drawer-close:hover { color: #fff; }
.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 199;
}
.drawer-overlay.open { display: block; }

/* ── MOBILE BREAKPOINTS ── */
@media (max-width: 768px) {
  nav { display: none; }
  .mobile-nav {
    display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    align-items: center; padding: 1rem 1.2rem;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.5s ease;
  }
  .mobile-nav.scrolled { opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  .mobile-logo { font-size: 1.3rem; }
}