#root-header {
  display: contents;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Transparent at the very top of the page; glass background after any scroll.
     Border is intentionally never drawn — toggled via `body.is-scrolled`
     from header-shell.js / shell.js. */
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 180ms var(--ease-out),
    backdrop-filter 180ms var(--ease-out);
}

body.is-scrolled .site-header {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Landing scrolled: solid dark glass with blur (no fade-out). */
.body--landing.is-scrolled .site-header--luxe {
  background: rgba(13, 17, 23, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ──────────────────────────────────────────────────────────────────────
   Luxe header (landing page, sits on top of the dark full-bleed video
   hero). Cream text + soft border at top, flips to standard glass +
   dark text once the user scrolls past the hero.
   Scoped to `body.body--landing` so member pages keep their existing
   light-text header behaviour.
   ────────────────────────────────────────────────────────────────────── */

.body--landing .site-header--luxe {
  /* Slightly taller header to feel more premium-magazine. */
  height: calc(var(--header-h) + 8px);
}

.body--landing:not(.is-scrolled) .site-header--luxe {
  background: linear-gradient(
    180deg,
    rgba(13, 17, 23, 0.55) 0%,
    rgba(13, 17, 23, 0) 100%
  );
}

/* Hero overlay: PNG is already white, just soften it a touch. */
.body--landing:not(.is-scrolled) .site-header--luxe .site-logo__img {
  opacity: 0.96;
}

/* Member pages have a light background, so flip the white wordmark to black
   to keep it visible. Landing keeps the white PNG in both states. */
body:not(.body--landing) .site-header .site-logo__img {
  filter: brightness(0);
}

.body--landing .site-header--luxe .site-nav__signin {
  color: var(--color-luxe-cream);
}

.body--landing .site-header--luxe .site-nav__signin:hover {
  color: #fff;
}

.body--landing .site-header--luxe .nav-toggle--luxe {
  background: transparent;
  border: 0;
}

.body--landing .site-header--luxe .nav-toggle--luxe .nav-toggle__bar,
.body--landing .site-header--luxe .nav-toggle--luxe .nav-toggle__bar::before,
.body--landing .site-header--luxe .nav-toggle--luxe .nav-toggle__bar::after {
  background: var(--color-luxe-cream);
}

.site-header__inner {
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.site-logo__img {
  height: 36px;
  width: auto;
  max-width: none;
  aspect-ratio: 3378 / 945;
  object-fit: contain;
  display: block;
}

@media (max-width: 799px) {
  .site-logo__img {
    height: 29px;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 880px) {
  .site-nav__links {
    display: flex;
  }
}

.site-nav__link {
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.site-nav__link:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Text-only "Sign In" link in the landing header — small caps style
   so it reads as Seeking-style "menu link, not button". */
.site-nav__signin {
  display: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-2);
  transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.site-nav__signin:hover {
  opacity: 0.75;
}

@media (min-width: 720px) {
  .site-nav__signin {
    display: inline-flex;
  }
}

/* Smaller button variant for use inside the header. */
.btn.btn--sm {
  min-height: 38px;
  padding: 0 var(--space-4);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* /me + landing: icon-only link to full UserProfile editor (desktop). */
.site-nav__settings {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink-muted);
  text-decoration: none;
  line-height: 0;
  transition:
    color 0.2s var(--ease-out),
    background 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

.site-nav__settings:hover {
  color: var(--color-accent-deep);
  background: var(--color-bg-subtle);
  border-color: var(--color-line-strong);
}

.site-nav__settings svg {
  display: block;
  flex-shrink: 0;
}

@media (min-width: 880px) {
  .site-nav__settings {
    display: inline-flex;
  }
}

.site-nav__actions .btn {
  display: none;
}

@media (min-width: 880px) {
  .site-nav__actions .btn {
    display: inline-flex;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.25s var(--ease-out),
    background 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.btn--ghost:hover {
  border-color: var(--color-ink);
}

.btn--primary {
  background: var(--color-ink);
  color: #fff;
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--color-ink) 90%, #fff 10%);
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background: var(--color-accent-deep);
  color: #fff;
}

/* Gold CTA — header, hero, section links (pages load header.css; hero.css is index-only). */
.btn.btn--gold {
  background: var(--color-luxe-gold);
  color: #fff;
  border: 1px solid var(--color-luxe-gold);
}

.btn.btn--gold:hover {
  background: var(--color-luxe-gold-deep);
  border-color: var(--color-luxe-gold-deep);
  color: #fff;
}

/* HEADER-ONLY OVERRIDE — the "My profile" / "Join Now" pill in the
   site header is a ghost button (transparent fill, white hairline border)
   so it sits cleanly over the dark hero photo and the dark scrolled
   glass. Anywhere else (hero CTA, "Ready when you are" section) keeps
   the solid gold look. */
.site-header .btn.btn--gold,
.site-header .btn.btn--gold:hover {
  background: transparent;
  border-color: var(--color-luxe-cream);
  color: var(--color-luxe-cream);
}

.site-header .btn.btn--gold:hover {
  background: color-mix(in srgb, var(--color-luxe-cream) 8%, transparent);
  border-color: var(--color-luxe-cream);
}

.nav-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

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

.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.2s var(--ease-out);
}

.nav-toggle__bar::before {
  top: -6px;
}

.nav-toggle__bar::after {
  top: 6px;
}

.site-nav.is-open .nav-toggle__bar {
  background: transparent;
}

.site-nav.is-open .nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.site-nav.is-open .nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--color-bg);
  padding: var(--space-6);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-line);
  overflow-y: auto;
  z-index: 45;
}

.mobile-panel.is-open {
  display: flex;
}

@media (min-width: 880px) {
  .mobile-panel {
    display: none !important;
  }
}

.mobile-panel__link {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
}


/* ──────────────────────────────────────────────────────────────────────
   Section nav pills (Discover ↔ My profile). Surfaces inside the
   site-header on /discover and /me so logged-in members can hop
   between the two main customer-facing pages without leaving the bar.
   ────────────────────────────────────────────────────────────────────── */

.discover-nav-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-right: var(--space-3);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.discover-nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font: 500 0.8125rem/1 var(--font-sans, "Plus Jakarta Sans"), system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--color-ink-muted);
  border-radius: 999px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.discover-nav-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ec4899, #db2777);
  color: #fff;
  font: 700 0.625rem/1 var(--font-sans, "Plus Jakarta Sans"), system-ui, sans-serif;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 2px var(--color-bg, #fff),
    0 4px 10px -4px rgba(219, 39, 119, 0.55);
  /* Subtle pulse — fired by the JS each time `[hidden]` is removed
     after badges refresh. */
  animation: badgeIn 280ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
.discover-nav-pill__badge[hidden] { display: none; }
@keyframes badgeIn {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.discover-nav-pill:hover {
  color: var(--color-ink);
  background: rgba(15, 23, 42, 0.04);
}
.discover-nav-pill.is-active {
  color: var(--color-ink);
  background: var(--color-surface, #fff);
}
@media (max-width: 640px) {
  .discover-nav-pills { display: none; }
}