.menu-toggle,.menu-backdrop{display:none}

@media (max-width:1024px){
  body{padding-top:68px}
  body.menu-open{overflow:hidden}
  aside{
    position:fixed;top:0;right:0;bottom:auto;left:0;z-index:1000;
    width:100%;height:68px;padding:10px 16px;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 4px 18px rgba(10,35,30,.16)
  }
  aside .brand{
    display:grid;grid-template-columns:32px 1fr;margin:0;padding:0;
    align-items:center;min-width:0
  }
  aside .brand span{font-size:27px}
  aside .brand b{font-size:22px}
  aside .brand small{display:block;white-space:nowrap}
  .menu-toggle{
    display:grid;place-content:center;gap:5px;width:44px;height:44px;padding:0;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
    border-radius:9px;flex:0 0 auto
  }
  .menu-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  aside.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  aside.menu-open .menu-toggle span:nth-child(2){opacity:0}
  aside.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  aside nav{
    display:none;position:fixed;top:68px;right:0;bottom:0;left:auto;
    width:min(360px,88vw);padding:18px;background:#17483e;
    grid-template-columns:1fr;align-content:start;gap:5px;
    overflow-y:auto;box-shadow:-14px 12px 35px rgba(0,0,0,.25)
  }
  aside.menu-open nav{display:grid}
  aside nav a{padding:14px 15px;font-size:15px}
  aside .account{display:none!important}
  .menu-backdrop{
    position:fixed;inset:68px 0 0;z-index:999;background:rgba(8,20,18,.55);
    border:0;border-radius:0;padding:0
  }
  body.menu-open .menu-backdrop{display:block}
  main{margin-left:0;padding:24px;min-height:calc(100vh - 68px)}
}

@media (max-width:600px){
  aside .brand small{display:none}
  main{padding:18px 14px}
}