/* =============================================================================
   Navigation — quiet, non-dominant during emergence
   Thin dark layer: transparency + light blur + hairline. Not glass UI.
   ============================================================================= */

.site-header {
  --nav-blur: 10px;
  --nav-wash: rgba(11, 11, 10, 0.42);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding: var(--space-m) var(--gutter);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -0.4rem, 0);
  background: var(--nav-wash);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid rgba(241, 240, 236, 0.06);
  transition:
    opacity var(--duration-ui) var(--ease-out),
    transform var(--duration-ui) var(--ease-out);
}

/* Interaction armed before full visual fade — brand escape hatch only */
.site-header.is-interactive {
  pointer-events: none;
}

.site-header.is-interactive .site-header__brand {
  pointer-events: auto;
}

.site-header.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Opaque-enough wash when backdrop-filter is unavailable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(11, 11, 10, 0.88);
  }
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-m);
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
}

.site-nav a {
  font-size: var(--text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-quiet);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav a:focus-visible {
  outline-offset: 4px;
  color: var(--color-fg);
}

.lang-btn:focus-visible {
  outline-offset: 3px;
}

.site-header__brand {
  font-size: var(--text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-quiet-strong);
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}

.site-header__brand:active {
  transform: scale(0.97);
}

.site-header__lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
}

.site-header__lang-sep {
  color: var(--color-quiet);
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.2rem 0.15rem;
  font-size: var(--text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-quiet);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}

.lang-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.lang-btn.is-active {
  color: var(--color-quiet-strong);
}

.lang-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--color-fg);
  }

  .site-header__brand:hover {
    color: var(--color-fg);
  }

  .lang-btn:hover:not(:disabled) {
    color: var(--color-fg);
  }
}

@media (max-width: 719px) {
  .site-header {
    --nav-blur: 12px;
    --nav-wash: rgba(11, 11, 10, 0.48);
    padding: var(--space-s) var(--gutter);
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-s);
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
  }

  .site-header__lang {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .site-header {
    --nav-blur: 8px;
    --nav-wash: rgba(11, 11, 10, 0.38);
  }
}

@media (min-width: 720px) and (max-width: 900px) {
  .site-nav {
    gap: var(--space-m);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0) {
  .site-header {
    transition: opacity var(--duration-fast) var(--ease-out);
    transform: none;
  }

  .site-header__brand:active,
  .lang-btn:active:not(:disabled) {
    transform: none;
  }
}