/* NEVERLOSE — mobile "Blackout" menu (2026-10-12)
   Loaded after the inline <style> blocks on purpose: it overrides the old
   white .mobile-nav rules that are still duplicated inline on every page.
   The old inline JS keeps toggling .open on #hamburger / #mobile-nav;
   /js/nav.js adds focus handling, ESC, link-close and the curtain timing. */

.mobile-nav {
  --nl-ease: cubic-bezier(.76, 0, .24, 1);
  --nl-curtain: .7s;
  display: flex;
  position: fixed; inset: 0;
  z-index: 150;
  flex-direction: column;
  align-items: center; justify-content: center;
  background: #000;
  color: #fff;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--nl-curtain) var(--nl-ease), visibility 0s linear var(--nl-curtain);
  overscroll-behavior: contain;
}
.mobile-nav.open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--nl-curtain) var(--nl-ease), visibility 0s;
}

/* head row: mirrors the navbar so the X sits where the hamburger was */
.mobile-nav-head {
  position: absolute; left: 0; right: 0;
  top: var(--nl-nav-top, 0px);
  height: var(--nl-nav-h, 60px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 20px;
}
.mobile-nav-close {
  position: relative; inset: auto;
  width: 36px; height: 36px; padding: 0;
  background: none; border: none; cursor: pointer;
  display: block;
  color: #fff; font-size: 0;
  justify-self: start;
}
.mobile-nav-close span {
  position: absolute; left: 8px; top: 17px;
  width: 20px; height: 1.5px;
  background: currentColor;
  transform: rotate(0deg) scaleX(.0);
  transition: transform .45s var(--nl-ease);
}
.mobile-nav.open .mobile-nav-close span { transition-delay: .35s; }
.mobile-nav.open .mobile-nav-close span:nth-child(1) { transform: rotate(45deg) scaleX(1); }
.mobile-nav.open .mobile-nav-close span:nth-child(2) { transform: rotate(-45deg) scaleX(1); }

.mobile-nav-logo { justify-self: center; display: block; opacity: 0; transition: opacity .4s ease; }
.mobile-nav-logo img { height: 36px; width: auto; display: block; filter: invert(1); }
.mobile-nav.open .mobile-nav-logo { opacity: 1; transition-delay: .45s; }

/* links */
.mobile-nav-links {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}
.mobile-nav-links a {
  display: block;
  overflow: hidden;
  padding: 4px 8px;
  font-size: clamp(40px, 13vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-links a > span {
  display: block;
  transform: translateY(110%);
  transition: transform .5s var(--nl-ease);
}
.mobile-nav.open .mobile-nav-links a > span { transform: translateY(0); transition-duration: .8s; }
.mobile-nav.open .mobile-nav-links a:nth-child(1) > span { transition-delay: .28s; }
.mobile-nav.open .mobile-nav-links a:nth-child(2) > span { transition-delay: .36s; }
.mobile-nav.open .mobile-nav-links a:nth-child(3) > span { transition-delay: .44s; }

/* focus one, dim the rest */
.mobile-nav-links:hover a, .mobile-nav-links:focus-within a { opacity: .35; }
.mobile-nav-links a:hover, .mobile-nav-links a:focus-visible, .mobile-nav-links a:active { opacity: 1; }
.mobile-nav :focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

/* hamburger: keep the existing morph, only smoother */
.hamburger span { transition: transform .45s cubic-bezier(.76,0,.24,1), opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav.open { clip-path: none; transition: opacity .2s ease, visibility 0s linear .2s; opacity: 0; }
  .mobile-nav.open { opacity: 1; transition: opacity .2s ease, visibility 0s; }
  .mobile-nav-links a > span, .mobile-nav-close span, .mobile-nav-logo { transition: none !important; }
  .mobile-nav-links a > span { transform: none; }
}

@media (min-width: 769px) {
  .mobile-nav { display: none; }
}