/* ============================================================
   Announcement bar / Nav / Mobile panel
   ============================================================ */

/* ---------- Announcement bar ---------- */

.announce {
  position: relative;
  z-index: var(--z-bar);
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: var(--surface-invert);
  color: color-mix(in oklab, var(--n-0) 82%, transparent);
  font-size: var(--t-sm);
  letter-spacing: -0.003em;
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  padding-inline: var(--gutter);
}

.announce__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}

.announce__item svg {
  color: var(--e-300);
}

.announce__strong {
  color: var(--n-0);
  font-weight: 500;
}

.announce__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

@media (max-width: 60rem) {
  .announce__item--wide,
  .announce__dot--wide {
    display: none;
  }
}

@media (max-width: 30rem) {
  .announce__item:not(.announce__strong),
  .announce__dot {
    display: none;
  }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .nav {
    backdrop-filter: saturate(180%) blur(16px);
  }
}

.nav--scrolled {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 20px color-mix(in oklab, var(--n-900) 4%, transparent);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--r-md);
}

/* This is the stacked full lockup (icon, "STORE", tagline lines), not the
   horizontal icon+wordmark version — its own aspect is close to 1:1, so
   sized by height the way the horizontal version was, it comes out roughly
   square rather than wide. The tagline lines read fine in the footer at
   full size but are below legible size here; only the icon and "STORE"
   register at nav height. */
.nav__logo {
  height: 4.5rem;
  width: auto;
}

@media (max-width: 30rem) {
  .nav__logo {
    height: 3.75rem;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  font-weight: 450;
  color: var(--text-muted);
  transition: color var(--d-base) var(--ease);
}

.nav__link:hover {
  color: var(--text);
}

/* Underline grows from the centre on hover. 2px, accent, 60% width —
   enough to register, not enough to read as a tab bar. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  width: 60%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--detail);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--d-base) var(--ease);
}

.nav__link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* The page you are already on. Same underline as the hover state, just
   already drawn — a separate treatment would mean two visual languages
   for one row of five links. */
.nav__link--active {
  color: var(--text);
  font-weight: 500;
}

.nav__link--active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* The nav sits on a blurred, semi-transparent bar, so the full primary
   shadow stack reads as heavy at this size. Tighter padding, a smaller
   label, and only two outer shadows — contact and a short ambient. The
   far glow is dropped entirely; it belongs on the hero and footer CTAs
   where the button is the focal point, not here.
   The :has() rule has to be restated because .btn:has(.btn__arrow) in
   base.css outranks a bare .nav__cta on specificity. */
.nav__cta {
  padding: 0.5625rem 1.125rem;
  font-size: 0.875rem;
  letter-spacing: -0.004em;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--n-0) 26%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--a-700) 40%, transparent),
    0 1px 2px color-mix(in oklab, var(--a-800) 22%, transparent),
    0 2px 6px color-mix(in oklab, var(--a-700) 18%, transparent);
}

.nav__cta:has(.btn__arrow) {
  padding-right: 0.9375rem;
}

.nav__cta:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--n-0) 34%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--a-700) 46%, transparent),
    0 1px 2px color-mix(in oklab, var(--a-800) 24%, transparent),
    0 4px 12px color-mix(in oklab, var(--a-700) 26%, transparent);
}

.nav__cta:active {
  box-shadow:
    inset 0 2px 4px color-mix(in oklab, var(--a-800) 40%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--a-700) 50%, transparent);
}

.nav__burger {
  display: none;
  padding: var(--s-2);
  border-radius: var(--r-md);
  color: var(--text);
  transition: background-color var(--d-fast) var(--ease);
}

.nav__burger:hover {
  background: var(--n-100);
}

@media (max-width: 62rem) {
  .nav__links {
    display: none;
  }
  .nav__inner {
    justify-content: space-between;
  }
}

@media (max-width: 48rem) {
  .nav__cta {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
  }
}

/* ---------- Mobile panel ---------- */

.mobile-menu {
  position: fixed;
  inset: var(--menu-top, calc(var(--nav-h) + var(--bar-h))) 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-6) var(--gutter) var(--s-10);
  background: var(--bg);
  overflow-y: auto;
}

/* An author-level `display: flex` beats the UA stylesheet's
   `[hidden] { display: none }`, so the attribute has to be re-asserted
   here or the panel is permanently visible. */
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-1);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: var(--tr-heading);
  color: var(--text);
}

.mobile-menu__link svg {
  color: var(--text-subtle);
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Links stagger in behind the panel — 45ms apart, which reads as one
   gesture rather than five separate animations. */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu--open .mobile-menu__link {
    animation: menu-in var(--d-slow) var(--ease) backwards;
    animation-delay: calc(var(--i) * 45ms + 40ms);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}