/* Compact navigation controls, with room for the complete Stride brand. */
.header .brand,.header .brand img{flex-shrink:0}
.header .menu{width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;color:var(--ink);background:transparent;cursor:pointer;align-items:center;justify-content:center;transition:background-color .2s}
.header .menu:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.menu-icon{position:relative;display:block;width:20px;height:16px}
.menu-bar{position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .18s ease}
.menu-bar:nth-child(1){top:0}
.menu-bar:nth-child(2){top:7px}
.menu-bar:nth-child(3){top:14px}
.menu[aria-expanded=true] .menu-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded=true] .menu-bar:nth-child(2){opacity:0;transform:scaleX(.5)}
.menu[aria-expanded=true] .menu-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){.header .menu{display:flex}.header .nav-links.open{animation:menu-reveal .2s ease-out both}}
@media(max-width:350px){.header .nav{padding-inline:16px;gap:4px}.header .brand{font-size:22px;gap:5px}.header .brand img{width:28px;height:28px}}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.menu-bar,.header .menu{transition:none}.header .nav-links.open{animation:none}}