/* ============================================================
   NAV.CSS — Top navigation bar
   ============================================================ */

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(252,243,227,0.88);
  backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s, background .3s;
}
.topbar.scrolled{border-color:var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-mark{
  width:30px;height:30px;border-radius:50%;
  background:var(--midnight);color:var(--lionsmane);
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:16px;font-weight:500;
}
.brand-name{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-0.01em}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink-mute);text-transform:uppercase;margin-left:4px}
nav.links{display:flex;gap:32px;align-items:center}
nav.links a{
  font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:400;
  transition:color .2s;position:relative;
}
nav.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--midnight);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
nav.links a:hover::after{transform:scaleX(1)}
nav.links a.cta{padding:9px 16px;border-radius:999px;background:var(--midnight);color:var(--lionsmane);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
nav.links a.cta::after{display:none}
nav.links a.cta:hover{background:var(--marigold);color:var(--midnight)}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--midnight);margin:5px 0;border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Responsive */
@media (max-width:720px){
  .nav-toggle{display:block}
  nav.links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--bg);flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid var(--rule)}
  nav.links.open{display:flex}
}