/* ============================================
Previous Nav
============================================ */
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px; max-width:90%; margin:0 auto;
}
.logo{
font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ivory); display:flex; align-items:baseline; gap:6px;
}
.logo .mark{color:var(--gold-bright); font-style:italic;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{
font-family:var(--font-mono); font-size:14px;;
text-transform:uppercase; color:var(--ivory);   /* the header is dark, so the links are ivory at every width */
position:relative; padding-bottom:4px; transition:color 0.25s;
}
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
background:var(--gold-bright); transition:width 0.3s var(--ease);
}
.nav-links a:hover{color:var(--ivory);}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; color:var(--ivory); gap:18px;}
.nav-toggle{display:none; background:none; border:none; color:var(--ivory); font-size:16 px; cursor:pointer;}
@media (max-width:920px){
.nav-links{
position:fixed; top:64px; left:0; right:0; bottom:0;
background:var(--void); flex-direction:column; justify-content:flex-start;
padding:40px 24px; gap:26px; transform:translateX(100%);
transition:transform 0.4s var(--ease); border-top:1px solid var(--line);
}
.nav-links.open{transform:translateX(0);}
.nav-toggle{display:block;}
.nav-cta .btn-ghost{display:none;}
}

/* ============================================
Dropdown Menu
============================================ */
.dropdown { position: relative; }
.dropbtn { cursor: pointer; }
.dropdown-menu {
display: none;
position: absolute;
top: 100%; left: 0;
background: var(--purple-royal);
min-width: 200px;
list-style: none;
padding: 0.5rem 0;
z-index: 100;
}
.dropdown-menu li a {
display: block;
padding: 0.6rem 1rem;
color: var(--ivory);
white-space: nowrap;
}
.dropdown-menu li a:hover { background: var(--gold-bright); color: var(--ivory); }
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }


/* ============================================
   Header / Nav
   ============================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid var(--line);
  background:var(--void);
  backdrop-filter:blur(14px);
  transition:border-color 0.3s var(--ease);
}