.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  margin-left:auto;
  padding:9px;
  border:0;
  background:transparent;
  color:var(--ink,#15130f);
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:4px auto;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease;
}

@media(max-width:820px){
  body{padding-top:65px;}
  header.nav{
    position:fixed!important;
    top:0;left:0;right:0;
    width:100%;
    z-index:1000!important;
    overflow:visible!important;
  }
  .menu-toggle{display:block;position:relative;z-index:3;}
  header.nav>ul{
    position:absolute!important;
    top:100%;left:0;right:0;
    z-index:2;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    max-height:0;
    padding:0 18px;
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid transparent;
    backdrop-filter:blur(14px);
    transition:max-height .3s ease,padding .3s ease,opacity .2s ease,visibility .3s ease;
  }
  header.nav.menu-open>ul{
    max-height:320px;
    padding:8px 18px 16px;
    visibility:visible;
    opacity:1;
    border-bottom-color:var(--hair,rgba(21,19,15,.12));
  }
  header.nav>ul li{width:100%;}
  header.nav>ul a{
    display:block;
    width:100%;
    padding:11px 0;
    border-top:1px solid var(--hair,rgba(21,19,15,.12));
    font-size:13px!important;
    line-height:1.2;
    letter-spacing:.06em!important;
    text-align:right;
  }
  header.nav>ul li:first-child a{border-top:0;}
  header.nav.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  header.nav.menu-open .menu-toggle span:nth-child(2){opacity:0;}
  header.nav.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle span,header.nav>ul{transition:none!important;}
}