/* Mobile menu. Used by every page. The script (nav.js) adds .nav-js to <html>, builds the button and the
   overlay from the header links, and the rules below only apply on phones. Without the script the normal
   links stay in the header. */
.menu-btn,.menu{display:none}
@media (max-width:760px){
  .nav-js .top > nav{display:none}
  .nav-js .menu-btn{
    display:block;font:inherit;font-size:15px;color:var(--mute);background:none;border:0;
    padding:10px 0 10px 24px;margin:-10px 0;cursor:pointer;transition:color .15s;
  }
  .nav-js .menu-btn:hover{color:var(--ink)}
  .nav-js .menu{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;overflow-y:auto;
    background:var(--bg);color:var(--ink);padding:0 var(--gut,20px) 32px;
    visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s;
  }
  .nav-js .menu[data-open]{visibility:visible;opacity:1;transition:opacity .2s ease}
  .menu-bar{display:flex;justify-content:space-between;align-items:baseline;padding-top:28px;font-size:15px;color:var(--mute)}
  .menu-bar a{color:var(--mute)}
  .menu-close{font:inherit;font-size:15px;color:var(--mute);background:none;border:0;padding:10px 0 10px 24px;margin:-10px 0;cursor:pointer}
  .menu-close:hover{color:var(--ink)}
  .menu-links{list-style:none;margin-top:clamp(40px,12vh,96px)}
  .menu-links a{
    display:block;padding:8px 0;font-weight:500;font-size:clamp(38px,11vw,52px);line-height:1.1;letter-spacing:-.025em;
    color:var(--mute);transition:color .15s;
  }
  .menu-links a:hover,.menu-links a[aria-current]{color:var(--ink)}
  .menu-more{margin-top:auto;padding-top:48px;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--mute);font-size:15px}
  .menu-more a:first-child{flex-basis:100%}
  .menu-more a:hover{color:var(--ink)}
  html.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .nav-js .menu,.nav-js .menu[data-open]{transition:none}
}