/* ACORNS: quiet glass menu control. */
html body .header>.menu{
 --menu-surface:rgba(255,255,255,.025);--menu-ink:#252525;--menu-hover:rgba(110,110,110,.12);
 top:20px!important;right:24px!important;left:auto!important;
 width:36px!important;height:36px!important;padding:0;
 background:var(--menu-surface)!important;color:var(--menu-ink)!important;
 border:0!important;border-radius:2px!important;box-shadow:none!important;filter:none!important;
 backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
 transition:background-color .25s ease,color .25s ease;
}
html body:has(.hero) .header:not(.scrolled)>.menu,
html body .header.menu-active>.menu{--menu-ink:#fff;--menu-hover:rgba(255,255,255,.14)}
html body .header>.menu::before,html body .header>.menu small{display:none!important}
/* The invisible margin preserves a 44px touch target. */
html body .header>.menu::after{content:"";display:block!important;position:absolute;inset:-4px;width:auto;height:auto;background:transparent;border:0;transform:none;pointer-events:auto}
html body .header>.menu span{
 left:10px!important;right:auto!important;width:16px!important;height:1px!important;
 background:currentColor!important;transform-origin:center;
 transition:transform .25s ease,opacity .2s ease;animation:none!important;
}
html body .header>.menu span:nth-child(1){top:14px;transform:none}
html body .header>.menu span:nth-child(2){top:18px;transform:none;opacity:1}
html body .header>.menu span:nth-child(3){top:22px;transform:none}
html body .header>.menu[aria-expanded=true] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
html body .header>.menu[aria-expanded=true] span:nth-child(2){transform:scaleX(0);opacity:0}
html body .header>.menu[aria-expanded=true] span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
@media(hover:hover){html body .header>.menu:hover{--menu-surface:var(--menu-hover)}}
html body .header>.menu:focus-visible{--menu-surface:var(--menu-hover);outline:1px solid currentColor;outline-offset:4px}
html body .header>.menu:active{--menu-surface:var(--menu-hover)}
@media(max-width:700px){html body .header>.menu{top:18px!important;right:18px!important}}
@media(prefers-reduced-motion:reduce){html body .header>.menu,html body .header>.menu span{transition:none}}