/* Compact mobile navigation shared by the homepage and every interior page. */
@media(max-width:900px){
  .about-menu-button,
  .menu-button{
    position:relative!important;
    display:inline-flex!important;
    width:auto!important;
    min-width:82px;
    height:38px!important;
    padding:0 12px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    border:1px solid currentColor!important;
    border-radius:999px!important;
    background:rgba(5,7,11,.28)!important;
    color:inherit!important;
    line-height:1;
    backdrop-filter:blur(12px);
  }

  .works-page .menu-button{background:rgba(255,255,255,.68)!important}

  .about-menu-button>span,
  .menu-button>span{
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
  }

  .menu-lines{display:grid;width:17px;gap:5px}
  .about-menu-button .menu-lines i,
  .menu-button .menu-lines i{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:17px!important;
    height:1px!important;
    margin:0!important;
    background:currentColor!important;
    transition:transform .28s ease!important;
  }

  .about-menu-button[aria-expanded="true"] .menu-lines,
  .menu-open .menu-button .menu-lines{gap:0}
  .about-menu-button[aria-expanded="true"] .menu-lines i:first-child,
  .menu-open .menu-button .menu-lines i:first-child{transform:translateY(.5px) rotate(45deg)!important}
  .about-menu-button[aria-expanded="true"] .menu-lines i:last-child,
  .menu-open .menu-button .menu-lines i:last-child{transform:translateY(-.5px) rotate(-45deg)!important}

  .mobile-menu,
  .about-mobile-menu{
    position:fixed!important;
    z-index:105!important;
    left:auto!important;
    right:14px!important;
    bottom:auto!important;
    width:50vw;
    min-width:176px;
    max-width:240px;
    max-height:calc(100svh - 88px);
    padding:10px!important;
    display:block!important;
    overflow:auto;
    background:rgba(5,7,11,.84)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.38);
    backdrop-filter:blur(24px) saturate(1.15);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.98);
    transform-origin:top right;
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease!important;
  }

  .mobile-menu{top:110px!important}
  .works-page .mobile-menu,
  .about-mobile-menu{top:70px!important}

  .menu-open .mobile-menu,
  .about-mobile-menu.is-open{
    display:block!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .mobile-menu nav,
  .about-mobile-menu nav{
    display:grid!important;
    gap:2px!important;
  }

  .mobile-menu nav a,
  .about-mobile-menu nav a{
    padding:12px 13px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
    border-radius:10px;
    color:#fff!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.2!important;
    transition:background-color .2s ease,color .2s ease;
  }

  .mobile-menu nav a:last-child,
  .about-mobile-menu nav a:last-child{border-bottom:0!important}
  .mobile-menu nav a:hover,
  .about-mobile-menu nav a:hover{background:rgba(255,106,34,.16);color:#ff8a50!important}
  .mobile-menu>p,
  .about-mobile-menu>p{display:none!important}
}