/* ═══════════════════════════════════════════════
   LYON HUANG — SHARED NAV + OVERFLOW MENU
   Single source of truth (injected by assets/nav.js)
   ═══════════════════════════════════════════════ */

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1rem 3rem;background:linear-gradient(to bottom,rgba(8,8,7,0.95),transparent);transition:background .3s}
nav.scrolled{background:rgba(8,8,7,0.20);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:var(--font-display);font-size:1.2rem;color:var(--text-primary);transition:transform .2s var(--ease-in-out)}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent);transition:width .25s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{width:100%}
.nav-links a.is-active{color:var(--text-primary)}
.nav-links a.is-active::after{width:100%}

/* overflow menu: two-line toggle → X */
.nav-toggle{display:none;position:relative;width:22px;height:16px;background:none;border:0;padding:0;cursor:none;z-index:210}
.nav-toggle-bar{position:absolute;left:0;width:22px;height:2px;background:var(--text-primary);transition:transform .3s var(--ease-out),background .2s}
.nav-toggle-bar:nth-child(1){top:4px}
.nav-toggle-bar:nth-child(2){top:10px}
@media (hover:hover){.nav-toggle:hover .nav-toggle-bar{background:var(--accent)}}
.nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav-toggle.open .nav-toggle-bar:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* overflow menu: full-screen overlay */
.nav-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(8,8,7,0.97);backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease-out),visibility .4s}
.nav-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.nav-overlay-links{list-style:none;display:flex;flex-direction:column;align-items:center;gap:1.75rem;text-align:center}
.nav-overlay-links a{font-family:var(--font-display);font-size:clamp(2.25rem,11vw,3.25rem);line-height:1;color:var(--text-primary);transition:color .2s}
@media (hover:hover){.nav-overlay-links a:hover{color:var(--accent)}}
.nav-overlay-links li{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.nav-overlay.open .nav-overlay-links li{opacity:1;transform:none}
.nav-overlay.open .nav-overlay-links li:nth-child(1){transition-delay:.06s}
.nav-overlay.open .nav-overlay-links li:nth-child(2){transition-delay:.12s}
.nav-overlay.open .nav-overlay-links li:nth-child(3){transition-delay:.18s}
.nav-overlay.open .nav-overlay-links li:nth-child(4){transition-delay:.24s}
.nav-overlay.open .nav-overlay-links li:nth-child(5){transition-delay:.30s}
body.menu-open{overflow:hidden}
body.menu-open nav,body.menu-open nav.scrolled{background:transparent;backdrop-filter:none;border-bottom-color:transparent}

/* responsive: collapse links → hamburger overlay */
@media(max-width:600px){
  .nav-links{gap:1.5rem}
}
@media(max-width:480px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}