/* One surface: unfold from the actual UT button, without scaling the type. */
html { scrollbar-gutter:stable; }
body.atelier .mobile-menu-panel,
body.atelier.menu-open .mobile-menu-panel {
  top:24px; left:50%; right:auto; width:min(490px,calc(100% - 32px));
  height:auto; min-height:0; max-height:calc(100dvh - 48px); padding:0 0 24px;
  transform:translateX(-50%); border-radius:12px; background:var(--paper);
  border:1px solid var(--hairline); box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  transition:none; opacity:0; visibility:hidden; pointer-events:none;
}
body.atelier .mobile-menu-panel[data-menu-state]:not([data-menu-state="closed"]) {
  opacity:1; visibility:visible; pointer-events:auto;
}
body.atelier.menu-open .mobile-menu-panel:not([data-menu-state]) { opacity:1; visibility:visible; pointer-events:auto; }
body.atelier .mobile-menu-panel:is([data-menu-state="opening"],[data-menu-state="closing"]) { will-change:clip-path; }
body.atelier .mobile-menu-top { position:sticky; top:0; z-index:1; height:64px; background:var(--paper); }
body.atelier .mobile-menu-top:focus-visible { outline:1px solid var(--accent); outline-offset:-6px; }
body.atelier .mobile-menu-icon { height:13px; display:block; }
body.atelier .mobile-menu-icon span { position:absolute; left:0; top:6px; width:20px; height:1px; margin:0; transform-origin:50% 50%; }
body.atelier .mobile-menu-icon span:first-child { transform:rotate(45deg); }
body.atelier .mobile-menu-icon span:nth-child(2) { width:13px; left:7px; opacity:0; }
body.atelier .mobile-menu-icon span:last-child { transform:rotate(-45deg); }
body.atelier .mobile-menu-nav { margin-top:12px; }
body.atelier .mobile-menu-nav a { transition:color 180ms ease; }
body.atelier .mobile-menu-nav a:active { transform:none; }
body.atelier .site-header > .menu-toggle,
body.atelier .site-header.is-menu-open > .menu-toggle {
  transform:none; filter:none; transition:background-color 180ms,border-color 180ms;
}
body.atelier .site-header.is-menu-open > .menu-toggle { opacity:0; pointer-events:none; }
@media(max-width:640px) {
  body.atelier .mobile-menu-top { height:60px; }
  body.atelier .mobile-menu-panel,
  body.atelier.menu-open .mobile-menu-panel { top:16px; max-height:calc(100dvh - 32px); }
}
@media(prefers-reduced-motion:reduce) {
  body.atelier .mobile-menu-nav a,
  body.atelier .site-header > .menu-toggle { transition:none; }
}