/* Common Nav — Glassmorphism Pill | Used by /about, /experience, /projects */
nav.site{display:flex;justify-content:center;padding:20px 16px 0;position:sticky;top:0;z-index:20}
.nav-pill{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;background:rgba(255,255,255,0.88);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(0,0,0,0.06);border-radius:9999px;box-shadow:0 8px 32px rgba(0,0,0,0.07),0 2px 8px rgba(0,0,0,0.04);max-width:100%}
.nav-pill a{padding:8px 16px;border-radius:9999px;font-family:'Outfit',system-ui,sans-serif;font-size:0.88rem;font-weight:500;color:#6B7280;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all 0.18s ease}
.nav-pill a:hover{background:rgba(99,102,241,0.08);color:#111827;text-decoration:none}
.nav-pill a.active{background:#111827;color:#fff;box-shadow:0 2px 8px rgba(17,24,39,0.14)}
.nav-pill a.active:hover{background:#1F2937;color:#fff}
/* Mobile: horizontal scroll instead of wrapping (UX fix) */
@media(max-width: 720px){
  nav.site{padding:12px 12px 0;justify-content:flex-start}
  .nav-pill{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px;padding:4px;max-width:calc(100vw - 24px)}
  .nav-pill::-webkit-scrollbar{display:none}
  .nav-pill a{padding:7px 12px;font-size:0.82rem}
}