.watamono-logo { position:absolute; top:30px; left:clamp(24px,4vw,64px); z-index:100; display:block; padding:6px 10px; color:var(--watamono-black); font-family:var(--watamono-heading-font); font-size:15px; font-weight:400; line-height:1; letter-spacing:.15em; text-decoration:none; }
.watamono-logo img { display:block; width:auto; max-width:min(180px,36vw); max-height:62px; height:auto; object-fit:contain; }
.watamono-menu-toggle { position:fixed; top:24px; right:clamp(18px,3.4vw,54px); z-index:10001; width:52px; height:52px; padding:13px 11px; border:0; background:transparent; color:currentColor; cursor:pointer; }
.watamono-menu-toggle span { display:block; width:100%; height:1px; margin:6px 0; background:currentColor; transition:transform .3s,opacity .3s; }
.watamono-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.watamono-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.watamono-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.watamono-menu { position:fixed; top:0; right:0; bottom:0; z-index:10000; display:grid; place-items:center; width:max(33.333vw,380px); padding:76px 0 38px; box-sizing:border-box; overflow-y:auto; visibility:hidden; background:rgba(255,255,255,.97); box-shadow:-18px 0 45px rgba(0,0,0,.12); transform:translateX(105%); transition:transform .42s cubic-bezier(.22,1,.36,1),visibility .42s; }
.watamono-menu::before { content:""; position:fixed; inset:0 100% 0 auto; width:calc(100vw - max(33.333vw,380px)); background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .42s; }
.watamono-menu.is-open { visibility:visible; transform:translateX(0); }
.watamono-menu.is-open::before { opacity:1; pointer-events:auto; }
.watamono-menu ul { list-style:none; margin:0; padding:0; text-align:center; }
.watamono-menu a { display:block; padding:.34em 1em; color:#111; font-size:clamp(1.25rem,2.4vw,2.25rem); text-decoration:none; letter-spacing:.08em; }
body.watamono-menu-open { overflow:hidden; }

@media (max-width: 767px) {
    .watamono-logo { top:16px; left:22px; max-width:calc(100vw - 100px); padding-inline:8px; }
    .watamono-logo img { max-width:min(142px,100%); max-height:50px; }
    .watamono-menu-toggle { top:10px; right:14px; width:52px; height:52px; padding:13px 10px; }
    .watamono-menu-toggle span { height:1.5px; margin:7px 0; }
    .watamono-menu-toggle[aria-expanded=true] span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
    .watamono-menu-toggle[aria-expanded=true] span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }
    .watamono-menu { width:min(88vw,420px); }
    .watamono-menu::before { width:12vw; }
}