/* ──────────────────────────────────────────────────────────────────────────
   Secret Character — shared site navigation.
   SINGLE SOURCE OF TRUTH. Do not duplicate these rules inline in any page;
   that's what caused the cross-page drift (different brand size, CTA width).
   Pages just need: a :root defining --text/--text-dim/--accent/--accent-hot/--cyan,
   and <link rel="stylesheet" href="/assets/sc-nav.css">.
   ────────────────────────────────────────────────────────────────────────── */

.site-nav {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 52px;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}
.nav-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: 0.04em;
  text-decoration: none; text-transform: uppercase; text-align: center;
  position: relative; flex: 0 0 auto; white-space: nowrap; line-height: 1;
}
.nav-brand-word { display: inline; }
.nav-brand::before, .nav-brand::after {
  content: 'SECRET CHARACTER'; position: absolute; top: 0; left: 0; width: 100%;
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.nav-brand::before { color: var(--accent-hot); transform: translate(-1.5px, 0); mix-blend-mode: screen; }
.nav-brand::after  { color: var(--cyan);       transform: translate(1.5px, 0);  mix-blend-mode: screen; }
.nav-brand:hover::before, .nav-brand:hover::after { opacity: 0.7; }

.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }

.nav-cta {
  background: var(--accent) !important; color: #09090b !important;
  padding: 6px 16px; border-radius: 8px; font-weight: 600 !important; font-size: 13px; transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .nav-brand { font-size: 13px; line-height: 1.05; margin-right: 16px; }
  .nav-brand-word { display: block; }
  .nav-brand::before, .nav-brand::after { display: none; }
  .nav-links { gap: 12px !important; }
  .nav-links a { font-size: 12px !important; }
  .nav-cta {
    display: inline-flex !important; flex-direction: column; line-height: 1.05;
    padding: 6px 10px !important; font-size: 10px !important; font-weight: 800;
    letter-spacing: 0.05em; text-align: center; gap: 1px;
  }
  .nav-cta span { display: block; }
  .site-nav { height: auto !important; min-height: 52px; padding: 10px 18px !important; align-items: center; }
}
@media (max-width: 460px) {
  .nav-brand { font-size: 12px; margin-right: 14px; }
  .nav-links a { font-size: 11px !important; }
}