/* ============================================================ Mobile navigation drawer — taste-skill methodology - iOS-like easing: cubic-bezier(0.16, 1, 0.3, 1) - fixed full-viewport scrim layer beneath the panel - :focus-visible states, no emoji, line icon (~2px stroke) Desktop nav is left untouched; this only engages <= 860px. Shared by every page; state class `mn-open` lives on . ============================================================ */ :root { --mn-ease: cubic-bezier(0.16, 1, 0.3, 1); } .nav-toggle { display: none; } .nav-scrim { display: none; } @media (max-width: 860px) { /* hamburger button (line icon, animates to X) */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 0; border-radius: 10px; cursor: pointer; color: inherit; position: relative; z-index: 120; } .nav-toggle .bar { width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--mn-ease), opacity .25s var(--mn-ease); } .nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* the existing