/* ---- Top navigation ---- */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(5,7,11,0.55), transparent);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
nav.top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

nav.top .brand {
  font-weight: 500; letter-spacing: -0.01em; font-size: 15px;
  display: flex; align-items: center; gap: 10px;
}
nav.top .brand .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
nav.top ul { list-style: none; display: flex; gap: 28px; font-size: 13px; }
nav.top ul a { color: var(--ink-dim); transition: color .2s; font-weight: 400; letter-spacing: 0.02em; }
nav.top ul a:hover { color: var(--ink); }

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer; padding: 4px;
  z-index: 6;
}
.nav-toggle span {
  display: block; width: 100%; height: 1px;
  background: var(--ink); border-radius: 1px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
/* Animate to × when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Mobile dropdown panel ---- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  nav.top {
    flex-wrap: wrap;
    padding: 16px 20px;
    /* solid bg when menu is open so links are readable */
    transition: opacity .35s ease, transform .35s ease, background .3s ease;
  }
  nav.top.menu-open {
    background: rgba(5, 7, 11, 0.97);
    backdrop-filter: blur(16px);
  }

  nav.top ul {
    display: flex;               /* override responsive.css display:none */
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
    padding: 0;
  }
  nav.top.menu-open ul {
    max-height: 320px;
    padding: 12px 0 4px;
  }
  nav.top ul li { border-bottom: 1px solid var(--line); }
  nav.top ul li:last-child { border-bottom: none; }
  nav.top ul a {
    display: block;
    padding: 14px 4px;
    font-size: 15px; letter-spacing: 0.06em;
    color: var(--ink-dim);
  }
  nav.top ul a:hover { color: var(--accent); }
}