.fade{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.fade.in{opacity:1; transform: translateY(0)}

/* Mobile Drawer - Full viewport */
.drawer{
  position:fixed;
  inset:0;
  z-index:9998;
  visibility:hidden;
  pointer-events:none;
}
.drawer.open{
  visibility:visible;
  pointer-events:auto;
}

.drawer::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  opacity:0;
  transition:opacity .3s ease;
}
.drawer.open::before{
  opacity:1;
}

.drawer .panel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  height:100dvh;
  width:min(380px, 92vw);
  background:#09090a;
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer.open .panel{
  transform:translateX(0);
}

.drawer .panel .spread{
  padding:20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}

.drawer a{
  display:block;
  padding:16px 20px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s ease, color .2s ease;
}
.drawer a:hover{
  background:rgba(255,255,255,.04);
  color:#fff;
}

body.drawer-open{
  overflow:hidden;
}