.primary-nav a,
.mobile-bottom-nav a{
  position:relative;
  gap:8px;
  text-decoration:none;
  box-shadow:none;
  transition:color 160ms ease;
}

.primary-nav .nav-label,
.mobile-bottom-nav .nav-label{
  display:block;
  margin:0;
  color:inherit;
  font-size:inherit;
  letter-spacing:normal;
  line-height:1;
  white-space:nowrap;
}

.nav-icon{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:currentColor;
  opacity:.92;
  transition:opacity 160ms ease,transform 180ms cubic-bezier(.2,.8,.2,1);
}

.nav-icon svg{display:block;width:100%;height:100%;overflow:visible}
.nav-icon-home{background:currentColor;mask-image:url('./assets/brand/open-b-icon-v2.png');mask-mode:luminance;mask-size:34px 34px;mask-position:center;mask-repeat:no-repeat}
.nav-icon-home img{display:none}
.nav-icon-line{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:stroke-width 160ms ease;
}

.primary-nav a{
  color:#96999f;
  font-weight:600;
}

.primary-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:26px;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--brand-red);
  opacity:0;
  transform:translateX(-50%) scaleX(.45);
  transition:opacity 160ms ease,transform 180ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible{color:#f0f1f3}
.primary-nav a:hover .nav-icon,
.primary-nav a:focus-visible .nav-icon{opacity:1;transform:scale(1.045)}
.primary-nav a.active{color:#fff;box-shadow:none}
.primary-nav a.active .nav-icon{opacity:1}
.primary-nav a.active .nav-icon-line{stroke-width:2}
.primary-nav a.active::after{opacity:1;transform:translateX(-50%) scaleX(1)}

.primary-nav a:focus-visible,
.mobile-bottom-nav a:focus-visible{
  outline:2px solid rgba(239,56,78,.72);
  outline-offset:-4px;
  border-radius:8px;
}

@media (max-width:1100px) and (min-width:761px){
  .primary-nav a{gap:6px}
  .nav-icon{width:19px;height:19px;flex-basis:19px}
}

@media (max-width:760px){
  .mobile-bottom-nav{
    min-height:66px;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom));
    background:rgba(20,21,23,.97);
    box-shadow:0 -8px 28px rgba(0,0,0,.2);
    backdrop-filter:blur(18px);
  }

  .mobile-bottom-nav a{
    min-height:58px;
    flex-direction:column;
    gap:5px;
    color:#8b8d8f;
    box-shadow:none;
  }

  .mobile-bottom-nav a::before{
    content:"";
    position:absolute;
    top:-4px;
    width:26px;
    height:2px;
    border-radius:0 0 2px 2px;
    background:var(--brand-red);
    opacity:0;
    transform:scaleX(.45);
    transition:opacity 160ms ease,transform 180ms ease;
  }

  .mobile-bottom-nav .nav-icon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
  .mobile-bottom-nav .nav-icon-home{mask-size:38px 38px}

  .mobile-bottom-nav .nav-label{
    font-size:10px;
    font-weight:600;
    letter-spacing:.005em;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a:focus-visible{color:#e8e9eb}
  .mobile-bottom-nav a:hover .nav-icon,
  .mobile-bottom-nav a:focus-visible .nav-icon{opacity:1;transform:scale(1.045)}
  .mobile-bottom-nav a.active{color:#fff;box-shadow:none}
  .mobile-bottom-nav a.active .nav-icon{opacity:1}
  .mobile-bottom-nav a.active::before{opacity:1;transform:scaleX(1)}
  .mobile-bottom-nav a:active .nav-icon{transform:scale(.94)}
}

@media (prefers-reduced-motion:reduce){
  .nav-icon,.primary-nav a::after,.mobile-bottom-nav a::before{transition:none}
}
/* Event names retain the surrounding typography and expose a clear link affordance. */
#app a.event-name-link{color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none}
#app a.event-name-link:hover{text-decoration:underline;text-underline-offset:3px}
#app a.event-name-link:focus-visible{outline:2px solid var(--brand-red,#ef384e);outline-offset:3px;border-radius:2px}

/* Shared link interaction: red text instead of underlines. */
html body #app a,html body #app a *{text-decoration:none!important}
html body #app a:hover,html body #app a:focus-visible,html body #app a:hover .text-glow,html body #app a:focus-visible .text-glow{color:var(--brand-red-ink,#ff6678)!important;text-shadow:none!important}
html body #app a:hover :is(h1,h2,h3,h4,strong,b,span,small,p),html body #app a:focus-visible :is(h1,h2,h3,h4,strong,b,span,small,p){color:var(--brand-red-ink,#ff6678)!important}
html body #app a:is(:hover,:focus-visible) :is(.boom-rating,.rating,.tt-rating,.ml-grade,.lm-grade,.bs-grade){color:#fff!important}
html body #app a:focus-visible{outline:2px solid var(--brand-red,#ef384e);outline-offset:3px}

html body #app :is(button,summary,[role="button"]){text-decoration:none!important}