/* Keep the complete menu visible within the available viewport height. */
.menu-dialog[open]{
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.5svh,16px);
  height:100svh;
  max-height:100svh;
  padding:0 var(--gutter) max(12px,env(safe-area-inset-bottom,0px));
  border:0;
  overflow:auto;
}
.menu-dialog[open] .menu-top{flex:0 0 auto;min-height:96px}
.menu-dialog[open] nav{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:minmax(36px,1fr);
  gap:0;
  min-height:calc(var(--menu-item-count,8) * 36px);
  max-height:calc(var(--menu-item-count,8) * 52px);
  margin:0;
}
.menu-dialog[open] nav a{
  display:flex;
  align-items:center;
  min-width:0;
  padding:4px 0;
  font-size:clamp(13px,calc(8px + 1svh),16px);
  line-height:1.4;
  overflow-wrap:anywhere;
}
.menu-dialog[open] .menu-actions{flex:0 0 auto;gap:10px;margin:0;margin-top:auto}
.menu-dialog[open] .menu-actions .button{min-height:44px;padding:10px 14px;font-size:13px;line-height:1.4}
@media(max-width:800px){.menu-dialog[open] .menu-top{min-height:84px}}
@media(max-height:560px) and (min-width:600px){
  .menu-dialog[open] .menu-top{min-height:64px}
  .menu-dialog[open] nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
    min-height:calc(var(--menu-short-rows,4) * 36px);
    max-height:calc(var(--menu-short-rows,4) * 48px);
  }
}
@media(max-height:480px){
  .menu-dialog[open]{gap:8px}
  .menu-dialog[open] .menu-top{min-height:64px}
  .menu-dialog[open] .menu-actions .button{min-height:40px;padding-block:8px}
}
@media(max-height:480px) and (max-width:599px){
  .menu-dialog[open] nav{grid-auto-rows:minmax(32px,1fr);min-height:calc(var(--menu-item-count,8) * 32px)}
}

/* The mobile toggle lives outside the clipped, sticky hero while following the viewport. */
@media(max-width:800px){
  .menu-button.mobile-menu-toggle{
    display:block;
    position:fixed;
    top:max(20px,env(safe-area-inset-top,0px));
    right:max(24px,env(safe-area-inset-right,0px));
    z-index:100;
    margin:0;
    color:#fff;
    border-radius:5px;
    transition:background-color .2s,box-shadow .2s;
  }
  .detail-page .menu-button.mobile-menu-toggle{top:max(15px,env(safe-area-inset-top,0px))}
  .menu-button.mobile-menu-toggle.is-scrolled{background:#363534;box-shadow:0 2px 12px #0002}
}
@media(prefers-reduced-motion:reduce){
  .menu-button.mobile-menu-toggle{transition:none}
}