.shop { position: static; }
.navbtn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; min-width: 44px; gap: var(--px-2);
padding-inline: var(--px-2);
font-size: var(--px-t-ui); font-weight: 600; color: var(--px-dim);
cursor: pointer; list-style: none; user-select: none}
.navbtn::-webkit-details-marker { display: none; }
.navbtn::marker { content: ""; }
.navbtn:hover, .shop[open] .navbtn { color: var(--px-chalk); }
.navbtn:focus-visible { outline: 2px solid var(--px-focus); outline-offset: 2px; }
.navbtn::after {
content: ""; width: 7px; height: 7px; border: var(--px-hair) solid currentColor;
border-width: 0 var(--px-hair) var(--px-hair) 0; transform: translateY(-2px) rotate(45deg)}
.shop[open] .navbtn::after { transform: translateY(2px) rotate(-135deg); }
.nvscrim { display: none; position: fixed; inset: 44px 0 0;
z-index: var(--px-z-scrim); background: rgba(0,0,0,.55); }
body.nav-open .nvscrim { display: block; }
body.nav-open .bar { z-index: var(--px-z-sheet); }
.npanel {
position: fixed; z-index: var(--px-z-sheet);
background: var(--px-ink-2);
border: var(--px-hair) solid var(--px-rule)}
.ncol { min-width: 0; }
.ncol h2 {
font-size: var(--px-t-micro); font-weight: 600; letter-spacing: .04em;
color: var(--px-dim); margin: 0 0 var(--px-1)}
.nv {
display: flex; align-items: center; gap: var(--px-2);
min-height: 44px; font-size: var(--px-t-ui); color: var(--px-chalk)}
.npanel .nv, .fcols .nv { display: flex; }
.nv b { font-weight: 600; font-size: var(--px-t-micro); color: var(--px-dim); }
.nv:hover { text-decoration: underline; text-underline-offset: 4px; }
.nv:focus-visible { outline: 2px solid var(--px-focus); outline-offset: 2px; }
.bar .nv { min-width: 44px; justify-content: center; }
.nv[aria-current="page"] {
color: var(--px-chalk); text-decoration: underline; text-underline-offset: 4px;
text-decoration-thickness: var(--px-hair)}
.npanel .nall {
grid-column: 1 / -1; border-top: var(--px-hair) solid var(--px-rule);
margin-top: var(--px-2); font-weight: 600}
@media (max-width: 1023.98px) {
.bar nav > .nv { display: none; }
.bar nav > .find { display: inline-flex; }
.npanel {
inset: 44px 0 0 0; overflow-y: auto; overscroll-behavior: contain;
border-width: var(--px-hair) 0 0;
padding: var(--px-5) var(--px-4) var(--px-16);
animation: nvup var(--px-t-enter) var(--px-e-enter)}
.ncol { margin-bottom: var(--px-6); }
}
body.nav-open { overflow: hidden; }
@keyframes nvup { from { transform: translateY(8px); opacity: 0; } }
@media (min-width: 1024px) {
body.nav-open .nvscrim { inset: 64px 0 0; }
.nsheet { display: none; }
.npanel {
position: absolute; left: 0; right: 0; top: 64px;
display: grid; gap: var(--px-3) var(--px-8);
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: var(--px-6) var(--px-14) var(--px-8);
max-height: min(82vh, 720px); overflow-y: auto;
border-width: 0 0 var(--px-hair)}
.npanel .nv { min-height: 32px; }
.npanel .nall { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.npanel { animation: none; }
.navbtn::after { transition: none; }
}
.fcols {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--px-4) var(--px-6); margin-top: var(--px-8)}
@media (min-width: 1024px) {
.fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fcols .nv { color: var(--px-chalk); }