/* A shared navigation layer; the artwork remains visible beside the opened panel. */
body{--nav-top:42px;--nav-right:4vw;--nav-gap:28px;--nav-type:24px}
.menu-brand{position:fixed;top:var(--nav-top);z-index:80}
.menu-brand{color:#fff;mix-blend-mode:difference}
.nav-controls{display:contents}
.site-menu{position:fixed;top:var(--nav-top);right:var(--nav-right);z-index:80;mix-blend-mode:difference}
.site-menu[open]{mix-blend-mode:normal}
.theme-toggle{position:fixed;top:var(--nav-top);right:calc(var(--nav-right) + 2.444em + var(--nav-gap));z-index:80;font-size:var(--nav-type);display:flex;align-items:center;justify-content:center;width:64px;height:44px;flex-shrink:0;padding:0;color:var(--musou-ink);mix-blend-mode:normal}
.theme-toggle[hidden]{display:none}
.theme-track{position:relative;display:block;width:64px;height:30px;border:1px solid var(--musou-muted);border-radius:30px;background:var(--musou-panel);transition:background-color .48s ease,border-color .48s ease}
.theme-thumb{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--musou-ink);transform:translateX(34px);transition:transform .48s cubic-bezier(.4,0,.2,1),background-color .48s ease}
.theme-track svg{position:absolute;top:7px;z-index:1;transition:color .38s ease,opacity .38s ease}
.theme-sun{left:7px;opacity:.65}.theme-moon{right:7px;color:var(--musou-panel)}
[data-theme="light"] .theme-thumb{transform:translateX(0)}
[data-theme="light"] .theme-sun{color:var(--musou-panel);opacity:1}
[data-theme="light"] .theme-moon{color:var(--musou-ink);opacity:.65}
.menu-brand{left:4vw;padding:10px;display:block}
.menu-brand .brand-lockup{width:154px;filter:brightness(0) invert(1)}
.site-menu>summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;padding:0;height:44px;font-size:var(--nav-type);font-weight:500;line-height:1;min-height:44px;color:#fff;text-align:right}
.site-menu>summary::-webkit-details-marker{display:none}
.menu-open-label,.menu-close-label,.menu-dismiss>span{position:relative;display:inline-block}
.menu-open-label::after,.menu-close-label::after,.menu-dismiss>span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .2s}
.site-menu>summary:hover span::after,.site-menu>summary:focus-visible span::after,.menu-dismiss:hover span::after,.menu-dismiss:focus-visible span::after{transform:scaleX(1)}
.menu-close-label,.site-menu[open] .menu-open-label{display:none}
.site-menu[open] .menu-close-label{display:inline}
.site-menu[open]>summary{z-index:92;mix-blend-mode:difference}
.has-site-menu .site-menu>summary{visibility:hidden;pointer-events:none}
.menu-dialog{position:fixed;inset:0;width:100%;height:100svh;max-width:none;max-height:none;padding:0;margin:0;border:0;background:transparent;color:var(--musou-ink);overflow:hidden}
.menu-dialog::backdrop{background:transparent}
.menu-sheet{position:fixed;inset:0;z-index:90;height:100svh;color:var(--musou-ink)}
.menu-scrim{position:absolute;inset:0;background:rgb(0 0 0 / .25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.menu-panel{position:relative;width:66%;height:100%;background:var(--musou-panel);padding:8svh 4vw 7svh 5vw;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;align-items:stretch}
.menu-panel>nav{width:100%;margin-block:auto}
.menu-legal{flex:none;padding-top:16px}.menu-legal nav{display:flex;flex-wrap:wrap;gap:4px 24px}.menu-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;line-height:1.4;text-decoration:underline;text-underline-offset:4px}.menu-legal a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.menu-links{list-style:none;counter-reset:menu-link;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.menu-links>li{counter-increment:menu-link;min-width:0}
.menu-links a{display:flex;align-items:center;gap:24px;width:fit-content;max-width:100%;color:var(--musou-muted);font-family:var(--musou-font-heading);font-size:clamp(64px,min(10.5vw,17svh),190px);font-weight:500;letter-spacing:-.035em;line-height:1.06;text-transform:uppercase;overflow-wrap:anywhere;transition:color .18s,transform .25s}
.menu-links>li>a::before{content:counter(menu-link,decimal-leading-zero) ".";flex-shrink:0;align-self:center;font-size:.24em;letter-spacing:-.02em;min-width:1.65em}
.menu-links a[aria-current="page"],.menu-links a:hover,.menu-links a:focus-visible{color:var(--musou-ink)}
.menu-links a:hover{transform:translateX(6px)}
.menu-links .sub-menu{list-style:none;padding:8px 0 8px 5vw}
.menu-links .sub-menu a{font-family:var(--musou-font-body);font-size:22px;line-height:1.4;text-transform:none;letter-spacing:0}
.menu-dismiss{position:absolute;z-index:91;right:var(--nav-right);top:var(--nav-top);padding:0;min-width:44px;height:44px;display:flex;align-items:center;justify-content:flex-end;font-family:var(--musou-font-body);font-size:var(--nav-type);font-weight:500;line-height:1;text-align:right;cursor:pointer;color:#fff;mix-blend-mode:difference}
.theme-toggle:focus-visible,.menu-brand:focus-visible,.site-menu>summary:focus-visible,.menu-links a:focus-visible,.menu-dismiss:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.has-site-menu{overflow:hidden}
body[data-opening] .menu-brand,body[data-opening] .site-menu,body[data-opening] .theme-toggle{visibility:hidden;pointer-events:none}
.menu-dialog[open] .menu-panel,.site-menu[open] .menu-panel{animation:menu-panel-enter .6s cubic-bezier(.22,1,.36,1) both}
.menu-dialog[open] .menu-links>li,.site-menu[open] .menu-links>li{animation:menu-link-enter .5s .14s cubic-bezier(.22,1,.36,1) both}
.menu-dialog[open] .menu-links>li:nth-child(2){animation-delay:.19s}
.menu-dialog[open] .menu-links>li:nth-child(3){animation-delay:.24s}
.menu-dialog[open] .menu-links>li:nth-child(n+4){animation-delay:.29s}
@keyframes menu-panel-enter{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes menu-link-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.admin-bar{--nav-top:74px}
.home{--nav-top:42px}
@media(max-width:900px){.menu-panel{width:84%}.menu-links a{font-size:clamp(62px,min(12vw,17svh),140px)}}
@media(max-width:600px){
 .menu-brand{left:5vw;padding:8px 0;min-height:44px}.menu-brand .brand-lockup{width:clamp(108px,calc(100vw - 222px),128px)}
 body{--nav-right:5vw;--nav-top:28px;--nav-gap:18px;--nav-type:20px}
 .admin-bar:not(.home){--nav-top:74px}.home{--nav-top:28px}
 .menu-panel{width:100%;padding:100px 5vw 60px;align-items:stretch}
 .menu-links{gap:22px}.menu-links a{font-size:clamp(48px,min(13.5vw,14svh),82px);gap:14px;line-height:1.15}
}
@media(prefers-reduced-motion:reduce){.menu-panel,.menu-links>li{animation:none!important}.menu-links a{transition:none}.menu-links a:hover{transform:none}}

/* Dialog controls share header geometry; keyboard focus uses an underline. */
.site-menu>summary:focus-visible,.menu-dialog .menu-dismiss:focus-visible{outline:0}
.site-menu>summary:focus-visible .motion-label,.menu-dialog .menu-dismiss:focus-visible .motion-label{background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat}

/* Keep the page visible behind the shared controls; Home never auto-hides. */
.site-navigation{background:transparent;box-shadow:none;border:0}
.menu-brand,.site-menu,.theme-toggle{translate:0 var(--nav-shift,0px);opacity:var(--nav-opacity,1);transition:translate .34s cubic-bezier(.16,1,.3,1),opacity .18s linear}
body.nav-is-hidden:not(.home):not(.has-site-menu){--nav-shift:calc(-1 * var(--nav-top) - 80px);--nav-opacity:0}
body.nav-is-hidden:not(.home):not(.has-site-menu) :is(.menu-brand,.site-menu,.theme-toggle){pointer-events:none}
@media(prefers-reduced-motion:reduce){.menu-brand,.site-menu,.theme-toggle{transition:none}}