/* Phone menu (shared). Shown only at the widths where the header hides its nav links.
   Design Kit v1: Ink Navy on white, Poppins, 4px corners, no motion. */
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;margin-left:10px;padding:0 14px;
  background:#FFFFFF;color:#2A3A4F;border:1px solid rgba(42,58,79,.35);border-radius:4px;
  font:500 13px/1 'Poppins',sans-serif;letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-btn svg{width:18px;height:18px;flex:none}
.menu-btn .menu-icon-close{display:none}
.menu-btn[aria-expanded="true"] .menu-icon-open{display:none}
.menu-btn[aria-expanded="true"] .menu-icon-close{display:block}
.menu-btn:focus-visible{outline:2px solid #2A3A4F;outline-offset:2px}
/* On phones the header is just the wordmark and the Menu button; Shop lives in the menu (last item). */
@media (max-width:820px){.navlinks ~ .menu-btn{display:inline-flex;margin-left:auto}header.bar .navlinks{display:none !important}}
@media (max-width:640px){.nav ~ .menu-btn{display:inline-flex;margin-left:auto}header.bar .nav{display:none !important}}

.menu-panel{position:fixed;left:0;right:0;top:0;z-index:1000;background:#FFFFFF;color:#2A3A4F;
  border-top:1px solid rgba(42,58,79,.14);border-bottom:1px solid rgba(42,58,79,.14);
  box-shadow:0 12px 24px rgba(42,58,79,.08);overflow-y:auto;overscroll-behavior:contain;
  padding:8px 24px 24px}
.menu-panel[hidden]{display:none !important}
.menu-panel ul{list-style:none;margin:0 auto;padding:0;max-width:560px}
.menu-panel li{border-bottom:1px solid rgba(42,58,79,.14)}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:4px 0;
  font:400 16px/1.4 'Poppins',sans-serif;color:#2A3A4F;text-decoration:none}
.menu-panel a:hover{text-decoration:underline;text-underline-offset:4px}
.menu-panel a:focus-visible{outline:2px solid #2A3A4F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.menu-btn,.menu-panel,.menu-panel a{transition:none !important;animation:none !important}}