header{
  position:sticky; top:0; z-index:1000; backdrop-filter:blur(10px);
  background:color-mix(in oklab,var(--bg) 85%,transparent);
  border-bottom:1px solid var(--border);
}
nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ font-weight:700; letter-spacing:.2px; }
.brand a{ color:inherit; text-decoration:none; }
.nav-links{ display:flex; gap:20px; }
.nav-links a{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; outline:none;
}
.nav-links a[aria-current="page"]{ color:inherit; background:none; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--text); background:var(--card); }

/* Mobile adaptation */
/* keep dropdown positioned relative to the bar */
nav { position: relative; }

/* keep brand on one line; allow truncation on narrow screens */
.brand { flex: 1 1 auto; min-width: 0; }
.brand a{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding-right: 12px;
  line-height: 1.2;
}

/* hamburger hidden by default (desktop/tablet) */
.nav-toggle { display: none; }

/* mobile adaptation: hamburger + animated dropdown */
@media (max-width: 768px){
  .nav-toggle{
    display: inline-block;
    background: none;
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    padding: 6px 10px;
    font: inherit;
    margin-left: auto;
  }

  /* animate open/close using max-height + opacity + translateY */
  .nav-links{
    position: absolute;
    left: 0; right: 0; top: 64px;     /* aligns with nav height */
    display: flex;                     /* keep flex so transitions run */
    flex-direction: column;
    gap: 0;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border, #eee);
    z-index: 20;

    /* closed state */
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    pointer-events: none;

    transition:
      max-height 0.30s ease,
      opacity    0.25s ease,
      transform  0.25s ease;
    will-change: max-height, opacity, transform;
  }

  .nav-links.is-open{
    max-height: var(--menu-h, 60vh);  /* set precisely via JS for smoother anim */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* comfy taps in dropdown */
  .nav-links a{ padding: 14px 16px; }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .nav-links{ transition: none; transform: none; }
}

/* Extra narrow phones */
@media (max-width: 380px){
  .brand a{ font-size: .95em; }
}