/* 12 Gauge unified mobile header + navigation — 2026-10-23 */
@media (max-width:850px){
  html.nav-open,body.nav-open{overflow:hidden}
  header{z-index:1000}
  header .nav.wrap{
    box-sizing:border-box;
    min-height:92px;
    height:92px;
    padding-top:max(8px,env(safe-area-inset-top));
    position:relative;
  }
  header .brand-logo{
    width:172px !important;
    height:78px !important;
    object-fit:contain;
  }
  header .menu{
    top:50% !important;
    right:18px !important;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    padding:0 !important;
    display:grid !important;
    place-items:center;
    line-height:1;
    z-index:1002;
  }
  header .links{
    box-sizing:border-box;
    position:fixed !important;
    z-index:1001 !important;
    inset:0 !important;
    top:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-height:none !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:
      calc(max(96px, env(safe-area-inset-top) + 82px))
      18px
      calc(max(24px, env(safe-area-inset-bottom) + 18px)) !important;
    background:
      radial-gradient(circle at 50% 0,#33280f55 0,transparent 34%),
      linear-gradient(#090909f8,#050505fc) !important;
    border:0 !important;
  }
  header .links.open{display:flex !important}
  header .links>a{
    box-sizing:border-box !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:11px 16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.05 !important;
    flex:none !important;
  }
  header .links .nav-shop{
    width:100% !important;
    min-height:48px !important;
    padding:11px 16px !important;
    justify-content:center !important;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%) !important;
  }
  header .links .nav-shop::after{
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%) !important;
  }
  header .links .nav-shop::before{margin-right:4px !important}
  header .links .nav-high-five{min-height:48px !important}
  header .links .nav-tickets{order:-8}
  header .links .nav-events{order:-10}
  header .links .nav-fans{order:-9}
  header .links .nav-roster{order:-7}
  header .links .nav-records{order:-6}
  header .links .nav-watch{order:-5}
  header .links .nav-shop{order:-4}
  header .links .nav-sponsors{order:-3}
  header .links .nav-legend{order:-2}
  header .links .nav-mission{order:-1}
  header .links .nav-high-five{order:0}
}
@media (max-width:560px){
  header .nav.wrap{height:84px;min-height:84px}
  header .brand-logo{width:150px !important;height:68px !important}
  header .menu{width:48px;height:48px;right:14px !important}
  header .links{
    gap:7px !important;
    padding:
      calc(max(88px, env(safe-area-inset-top) + 76px))
      14px
      calc(max(18px, env(safe-area-inset-bottom) + 14px)) !important;
  }
  header .links>a,
  header .links .nav-shop{min-height:44px !important;padding:9px 13px !important}
}