.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: rgba(18, 22, 28, .72);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { border-color: #40516a; background: var(--surface); }
.nav-toggle:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
.nav-toggle-lines { display: grid; width: 1.15rem; gap: .24rem; }
.nav-toggle-lines span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
  transition: transform 160ms ease, opacity 160ms ease;
}

@media (max-width: 760px) {
  .site-header.nav-ready {
    position: relative;
    z-index: 30;
    flex-wrap: nowrap;
  }
  .site-header.nav-ready .nav-toggle { display: inline-flex; flex: 0 0 auto; }
  .site-header.nav-ready .site-nav {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    left: 0;
    display: none;
    width: auto;
    flex-direction: column;
    gap: .2rem;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: rgba(11, 16, 24, .98);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .34);
    backdrop-filter: blur(12px);
  }
  .site-header.nav-ready.nav-open .site-nav { display: flex; }
  .site-header.nav-ready .site-nav a {
    display: flex !important;
    min-height: 3rem;
    align-items: center;
    padding: .65rem .85rem;
    border-radius: .45rem;
    color: var(--muted);
    text-decoration: none;
  }
  .site-header.nav-ready .site-nav a:hover,
  .site-header.nav-ready .site-nav [aria-current="page"] {
    background: var(--surface);
    color: var(--text);
  }
  .site-header.nav-open .nav-toggle-lines span:nth-child(1) { transform: translateY(.36rem) rotate(45deg); }
  .site-header.nav-open .nav-toggle-lines span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle-lines span:nth-child(3) { transform: translateY(-.36rem) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-lines span { transition: none; }
}