/* Refined mobile navigation. All rules are isolated to compact viewports so the
   desktop header and desktop navigation remain unchanged. */
@media (max-width:900px){
  .nav-actions{
    gap:6px;
  }

  .menu{
    position:relative;
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    display:grid;
    place-items:center;
    margin-right:-8px;
    border-radius:50%;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s ease,transform .2s ease;
  }

  .menu i{
    position:absolute;
    left:50%;
    top:50%;
    width:16px;
    height:1px;
    margin:0;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:transform .32s var(--ease),width .22s ease,opacity .22s ease;
  }

  .menu i:first-child{
    transform:translate(-50%,-4px);
  }

  .menu i:last-child{
    transform:translate(-50%,4px);
  }

  .menu.open i:first-child{
    transform:translate(-50%,0) rotate(45deg);
  }

  .menu.open i:last-child{
    transform:translate(-50%,0) rotate(-45deg);
  }

  .menu:active{
    transform:scale(.94);
    background:rgba(255,255,255,.09);
  }

  .drawer{
    display:block;
    opacity:0;
    transform:translateY(-12px);
    background:rgba(7,8,10,.94);
    -webkit-backdrop-filter:blur(30px) saturate(135%);
    backdrop-filter:blur(30px) saturate(135%);
    overscroll-behavior:contain;
    transition:opacity .22s ease,transform .38s var(--ease),visibility 0s linear .38s;
  }

  .drawer.open{
    opacity:1;
    transform:none;
    transition:opacity .22s ease,transform .38s var(--ease),visibility 0s;
  }

  .drawer>div{
    width:min(100% - 40px,560px);
    min-height:100%;
    padding-top:calc(var(--jj-nav-mobile-height) + 28px + env(safe-area-inset-top));
    padding-bottom:max(34px,env(safe-area-inset-bottom));
  }

  .drawer button{
    align-items:flex-start;
    gap:16px;
    padding:13px 2px;
    border-bottom-color:rgba(255,255,255,.1);
    font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:clamp(24px,6.5vw,30px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.035em;
    opacity:0;
    transform:translateY(-7px);
    transition:opacity .26s ease,transform .36s var(--ease),color .2s ease;
  }

  .drawer.open button{
    opacity:1;
    transform:none;
  }

  .drawer.open button:nth-child(1){transition-delay:.035s}
  .drawer.open button:nth-child(2){transition-delay:.055s}
  .drawer.open button:nth-child(3){transition-delay:.075s}
  .drawer.open button:nth-child(4){transition-delay:.095s}
  .drawer.open button:nth-child(5){transition-delay:.115s}
  .drawer.open button:nth-child(6){transition-delay:.135s}
  .drawer.open button:nth-child(7){transition-delay:.155s}
  .drawer.open button:nth-child(8){transition-delay:.175s}
  .drawer.open button:nth-child(9){transition-delay:.195s}

  .drawer small{
    width:22px;
    flex:0 0 22px;
    padding-top:5px;
    color:rgba(255,255,255,.38);
    font-size:8px;
    font-weight:600;
    line-height:1;
    letter-spacing:.12em;
  }
}

@media (max-width:430px){
  .drawer>div{
    width:calc(100% - 32px);
  }

  .drawer button{
    gap:13px;
    padding-top:12px;
    padding-bottom:12px;
    font-size:clamp(22px,6.2vw,27px);
  }
}

@media (hover:hover) and (pointer:fine) and (max-width:900px){
  .menu:hover{
    background:rgba(255,255,255,.07);
  }

  .drawer button:hover{
    color:rgba(255,255,255,.72);
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .menu,
  .menu i,
  .drawer,
  .drawer button{
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
}