/* ============================================================
   Shared nav styles — included by all pages via <link>
   ============================================================ */

nav.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
nav.top .row{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:38px; width:auto; display:block; }
.brand-stack{ display:flex; flex-direction:column; line-height:1.15; }
.brand-tag{
  font-family:var(--mono); font-size:10px;
  letter-spacing:0.06em; color:var(--fg-3);
  margin-top:2px;
}
@media (max-width:520px){ .brand-tag{ display:none; } }
.brand-mark{
  width:22px; height:22px;
  color:var(--fg);
  display:grid; place-items:center;
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-name{ font-weight:500; letter-spacing:0.02em; font-size:15px; }
.brand-name .tail{ color:var(--fg-3); }

nav .links{ display:flex; gap:28px; align-items:center; }
nav .links a{ font-size:13.5px; color:var(--fg-2); }
nav .links a:hover{ color:var(--fg); }
nav .links a.cta{ color:#1a0f00; font-size:13px; }
nav .links a.cta:hover{ color:#1a0f00; }
nav .links a.cta.ghost{ color:var(--accent); }
nav .links a.cta.ghost:hover{ color:var(--accent); }
@media (max-width:760px){ nav .links a:not(.cta){ display:none; } }

/* ---------- Hamburger button ---------- */
.hamburger{
  display:none;
  width:40px; height:40px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  cursor:pointer;
  align-items:center; justify-content:center;
  padding:0;
  margin-left:8px;
  transition:border-color .15s ease;
}
.hamburger:hover{ border-color:var(--accent); color:var(--accent); }
.hamburger .bars{
  position:relative; width:18px; height:12px;
  display:inline-block;
}
.hamburger .bars::before,
.hamburger .bars::after,
.hamburger .bars i{
  content:""; position:absolute; left:0; right:0;
  height:1.5px; background:currentColor;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger .bars::before{ top:0; }
.hamburger .bars i{ top:5px; display:block; }
.hamburger .bars::after{ top:10px; }
.hamburger[aria-expanded="true"] .bars::before{ top:5px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] .bars i{ opacity:0; }
.hamburger[aria-expanded="true"] .bars::after{ top:5px; transform:rotate(-45deg); }

/* ---------- Mobile slide-down menu ---------- */
.mobile-menu{
  display:none;
  position:fixed; left:0; right:0;
  top:64px;
  background:var(--bg);
  border-bottom:1px solid var(--line-2);
  z-index:49;
  padding:8px 0 16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.mobile-menu.open{ display:block; }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu a{
  display:block;
  padding:14px 32px;
  font-size:16px;
  color:var(--fg);
  border-bottom:1px solid var(--line-2);
}
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu a:hover{ color:var(--accent); background:var(--bg-2); }
.mobile-menu a .num{
  font-family:var(--mono); font-size:11px; color:var(--fg-3);
  letter-spacing:0.1em; margin-right:14px;
}

@media (max-width:760px){
  .hamburger{ display:inline-flex; }
  .mobile-menu{ top:60px; }
  .mobile-menu a{ padding:14px 20px; }
}
@media (max-width:520px){
  .mobile-menu{ top:56px; }
  .mobile-menu a{ padding:13px 18px; font-size:15px; }
}