/* Paint the full viewport; browser chrome must not expose the page canvas below the menu. */
html.menu-is-open,body.menu-is-open{background:var(--gray-1);overscroll-behavior:none}
.menu-dialog{inset:0;width:100%;max-width:100%;background:var(--gray-1);color:var(--ink);height:100%;height:100dvh;max-height:none;overflow:hidden}
.menu-dialog::backdrop{background:var(--gray-1);backdrop-filter:none}
.menu-dialog .menu-inner{isolation:isolate;box-sizing:border-box;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:24px;padding:92px max(48px,calc((100vw - 920px)/2)) 32px;background:linear-gradient(132deg,var(--gray-1),var(--gray-2) 32%,var(--gray-4) 65%,var(--gray-3))}
/* The Okinawa photo section's #e3e3e3 softens the center, also without WebGL. */
.menu-dialog .menu-inner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse min(50vw,32vh) 72% at 50% 54%,#e3e3e3 0%,rgb(227 227 227 / .85) 28%,rgb(227 227 227 / .4) 60%,rgb(227 227 227 / 0) 100%)}
.menu-dialog .menu-inner nav{display:grid;grid-auto-rows:minmax(44px,1fr);gap:0;min-height:0;overflow-x:hidden;overflow-y:auto}
.menu-dialog .menu-inner nav a{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.5fr);align-items:center;gap:20px;min-height:44px;width:100%;padding:2px 0}
.menu-dialog .menu-inner nav a span{font-size:clamp(26px,3.5vw,40px);line-height:1.1}
.menu-dialog .menu-inner nav a .menu-label-long{font-size:clamp(25px,3vw,35px)}
.menu-dialog .menu-inner nav a small{font-size:13px;line-height:1.4;word-break:keep-all;overflow-wrap:normal}
.menu-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.menu-dialog .menu-signature{width:128px;flex:0 0 auto;margin:0}
.menu-signature img{display:block;width:100%;height:auto;mix-blend-mode:normal}
.menu-dialog .menu-heading{font-size:30px;line-height:1.35;margin:0;letter-spacing:-.035em}
.menu-gradient-canvas{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;pointer-events:none;visibility:hidden}
.menu-gradient-ready .menu-gradient-canvas{visibility:visible}
.menu-dialog .menu-close{position:fixed;min-height:48px;padding:12px 22px;border:1px solid var(--blue);border-radius:5px;background:var(--blue);color:#fff;box-shadow:4px 4px var(--ink);font-weight:700;line-height:1.5}
.menu-dialog .menu-close:focus{outline:none}
.menu-dialog .menu-close:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.menu-dialog .menu-close:active,.menu-dialog .menu-close.is-pressed{background:#fff!important;color:var(--ink)!important;transform:translate(4px,4px);box-shadow:none!important}
.menu-inner nav a[aria-current]{color:var(--ink)}
@media(hover:hover){.menu-dialog .menu-close:hover{background:#fff;color:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px var(--ink)}.menu-inner nav a:hover{color:var(--ink)}}
@media(max-width:600px){
 .menu-dialog .menu-inner{padding:84px max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));gap:20px}
 .menu-dialog .menu-close{top:max(20px,env(safe-area-inset-top));right:24px;min-height:44px;padding:8px 18px}
 .menu-dialog .menu-inner nav a{grid-template-columns:minmax(0,1fr) 104px;gap:14px}
 .menu-dialog .menu-inner nav a span{font-size:clamp(25px,7.4vw,34px)}
 .menu-dialog .menu-inner nav a .menu-label-long{font-size:clamp(22px,6.5vw,29px)}
 .menu-dialog .menu-inner nav a small{font-size:12px}
 .menu-dialog .menu-signature{width:104px}
 .menu-dialog .menu-heading{font-size:clamp(20px,5.4vw,26px)}
}
@media(max-height:600px){
 .menu-dialog .menu-inner{padding-top:66px;padding-bottom:max(12px,env(safe-area-inset-bottom));gap:10px}
 .menu-dialog .menu-close{top:12px;min-height:44px;padding:7px 17px}
 .menu-dialog .menu-signature{width:92px}
 .menu-dialog .menu-heading{font-size:20px;line-height:1.2}
 .menu-dialog .menu-inner nav a span{font-size:27px}
 .menu-dialog .menu-inner nav a .menu-label-long{font-size:24px}
}
@media(min-width:600px) and (max-height:540px){
 .menu-dialog .menu-inner nav{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(44px,1fr));grid-auto-flow:row;gap:0 28px}
 .menu-dialog .menu-inner nav a{grid-template-columns:minmax(0,1fr) 90px;gap:8px}
 .menu-dialog .menu-inner nav a span{font-size:26px}
 .menu-dialog .menu-inner nav a small{font-size:11px}
}
@media(max-width:599px) and (max-height:500px){
 .menu-dialog .menu-inner{padding-left:20px;padding-right:20px}
 .menu-dialog .menu-inner nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,minmax(44px,1fr));gap:0 16px}
 .menu-dialog .menu-inner nav a{grid-template-columns:minmax(0,1fr);align-content:center;gap:2px}
 .menu-dialog .menu-inner nav a span{font-size:21px}
 .menu-dialog .menu-inner nav a .menu-label-long{font-size:19px}
 .menu-dialog .menu-inner nav a small{font-size:11px}
 .menu-dialog .menu-signature{width:72px}
 .menu-dialog .menu-heading{font-size:18px}
}
@media(max-width:360px) and (min-height:501px){
 .menu-dialog .menu-inner nav a{grid-template-columns:minmax(0,1fr) 92px;gap:10px}
 .menu-dialog .menu-inner nav a .menu-label-long{font-size:22px}
 .menu-dialog .menu-inner nav a small{font-size:11px}
}