/* ═══════════════════════════════════════════════════════════════
   nx-nav.css — Einheitliches Haupt-Nav für alle Unterseiten
   Artwork-Detail, Lore-Detail, Project-Detail etc.
   Basiert auf index.css Nav-Styles.
═══════════════════════════════════════════════════════════════ */

/* ── CSS-Variablen (Fallback falls Seite keine eigenen hat) ── */
:root {
  --o:   #ff6b00;
  --dim: rgba(255,255,255,.42);
  --f:   'G', 'Geomanist', system-ui, sans-serif;
  --ez:  cubic-bezier(.25,.46,.45,.94);
}

/* ── Nav Container ─────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  padding: 28px 52px;
  display: flex;
  align-items: center;
  gap: 0;
  transition: background .35s, backdrop-filter .35s, padding .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}

#nav.scrolled {
  background: rgba(20,20,20,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 52px;
  border-bottom-color: rgba(255,255,255,.07);
}

/* ── Logo ──────────────────────────────────────────────────── */
.n-logo {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  transition: color .3s;
}
.n-logo:hover { color: var(--o); }

/* ── Links ─────────────────────────────────────────────────── */
.n-links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  margin-right: 36px;
}

.n-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.n-a {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--dim);
  transition: color .3s;
  position: relative;
  text-decoration: none;
}
.n-a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--o);
  transition: width .35s var(--ez);
}
.n-a:hover           { color: var(--o); }
.n-a:hover::after    { width: 100%; }
.n-a--active         { color: rgba(255,255,255,.85); }
.n-a--active::after  { width: 100%; background: var(--o); opacity: .5; }

/* ── Account Icon ──────────────────────────────────────────── */
.n-a--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.38);
  transition: color .3s;
}
.n-a--icon::after  { display: none; }
.n-a--icon:hover   { color: var(--o); }
.n-a--icon svg     { display: block; }

/* ── Scrolled-State via JS ─────────────────────────────────── */

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #nav { padding: 20px 28px; }
  #nav.scrolled { padding: 14px 28px; }
  .n-links { gap: 22px; margin-right: 20px; }
  .n-a { font-size: .62rem; letter-spacing: .18em; }
}
@media (max-width: 640px) {
  .n-links { display: none; }
  .n-actions { margin-left: auto; }
}