/* =========================================================================
   The site nav (20 Oct 2026). One bar for every page of the 1.0 site.
   Uses its own class names (.snav-*) so it never fights a page's older nav
   rules. Markup lives in each page; behaviour in site-nav.js.
   ========================================================================= */
.snav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 80;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.snav-bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 16px; min-height: 54px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.snav.scrolled .snav-bar { background: rgba(12, 12, 12, 0.82); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55); }

/* the language switch: its own glass circle beside the bar, not one of its links */
.snav { gap: 8px; align-items: center; }
.snav-lang {
  pointer-events: auto; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(18, 18, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s, color 0.2s, transform 0.15s;
}
.snav-lang:hover { color: #fff; background: rgba(40, 40, 40, 0.7); }
.snav-lang svg { display: block; }
.snav-lang:active { transform: scale(0.95); }
.snav.scrolled .snav-lang { background: rgba(12, 12, 12, 0.82); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55); }

.snav-brand { display: flex; align-items: center; gap: 8px; margin-right: 26px; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.snav-brand img { width: 22px; height: 22px; display: block; filter: drop-shadow(0 0 10px rgba(224, 169, 126, 0.5)); }

.snav-links { display: flex; align-items: center; gap: 4px; }
.snav-links a {
  position: relative; padding: 9px 14px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color 0.2s, background 0.2s;
}
.snav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.snav-links a.on { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* the one call to action: a white pill that opens the two stores */
.snav-get {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 22px;
  padding: 10px 16px 10px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: #fff; color: #000; font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: transform 0.15s, opacity 0.2s;
}
.snav-get:hover { opacity: 0.92; }
.snav-get:active { transform: scale(0.97); }
.snav-get svg { transition: transform 0.25s; }
.snav.open .snav-get svg { transform: rotate(180deg); }

/* store menu */
.snav-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 280px;
  padding: 8px; border-radius: 22px;
  /* solid: a backdrop-filter nested inside the bar's own one lets the page
     show through, so the menu is opaque instead */
  background: #151515; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  visibility: hidden; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.snav.open .snav-menu { opacity: 1; transform: none; visibility: visible; }
.snav-store {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px;
  color: #fff; text-decoration: none; transition: background 0.2s;
}
.snav-store:hover, .snav-store:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.snav-store .ic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); }
.snav-store b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.snav-store span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.snav-store .arrow { margin-left: auto; color: rgba(255, 255, 255, 0.35); }
.snav-store.soon { cursor: default; }
.snav-store.soon:hover { background: none; }
.snav-menu hr { border: none; height: 1px; background: rgba(255, 255, 255, 0.07); margin: 4px 10px; }
/* page links repeat inside the menu, for phones only */
.snav-menu .snav-mlinks { display: none; }

/* below 760px the links move into the menu, and the menu shows them */
@media (max-width: 760px) {
  .snav-links { display: none; }
  .snav-menu { width: 300px; }
  .snav-menu .snav-mlinks { display: block; }
  .snav-mlinks a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; }
  .snav-mlinks a:hover { background: rgba(255, 255, 255, 0.06); }
  .snav-mlinks a.on { color: #E0A97E; }
}

/* phones: links move into the menu, the bar keeps the brand and the button */
@media (max-width: 640px) {
  .snav { top: 14px; }
  .snav-bar { padding-left: 14px; min-height: 50px; }
  .snav-brand { margin-right: auto; }
  .snav-bar { width: 100%; max-width: 420px; min-width: 0; }
  .snav-lang { width: 50px; height: 50px; }
  .snav-links { display: none; }
  .snav-menu { width: auto; left: 0; right: 0; transform-origin: top center; }
  .snav-menu .snav-mlinks { display: block; }
  .snav-mlinks a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 14px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; }
  .snav-mlinks a:hover { background: rgba(255, 255, 255, 0.06); }
  .snav-mlinks a.on { color: #E0A97E; }
}
@media (prefers-reduced-motion: reduce) {
  .snav-menu, .snav-get svg { transition: none; }
}