/* ============================================================================
   RIG site-v2 — SHARED NAV CONTRACT (nav.css)
   Loaded LAST on every page so it wins the cascade over each page's inline CSS.

   Enforces the parts of the blueprint nav contract that "can't break":
     1. Top-nav is the ONLY primary nav — persistent, sticky, keyboard-focusable.
     2. Z-INDEX CONTRACT — the interactive UI layer is ALWAYS above any video/hero
        media. Video must NEVER overlay clickable elements.
     3. Mobile — top-nav collapses to a hamburger.
   Palette borrowed from the locked Noir system (gold #C8A96E on noir #000).
   ============================================================================ */

:root{
  --nav-gold:#C8A96E;
  --nav-gold-light:#D4BC8B;
  --nav-noir:#000;
  --nav-stone:#A09890;
  --nav-warm:#F5F0EB;
  --nav-mono:"JetBrains Mono",ui-monospace,monospace;
  --nav-serif:"Cormorant Garamond",Georgia,serif;

  /* ---- THE Z-INDEX CONTRACT (single source of truth) ----
     media (hero video/canvas) < page content < interactive UI < top-nav < portal/overlay.
     Nothing clickable may live below --z-ui. Media may never exceed --z-media-max. */
  --z-media-max:5;     /* hero video, shaders, posters cap out here */
  --z-content:10;      /* page copy, chapters */
  --z-ui:40;           /* clickable affordances: chapter arrows, rail, hotspots */
  --z-topnav:70;       /* the persistent top-nav — always above content + media */
  --z-overlay:120;     /* cold-open / portal reveal — only transient full-screen layers */
}

/* ----------------------------------------------------------------------------
   1 + 2. PERSISTENT STICKY TOP-NAV  (overrides the index shell's hide-on-hero rule)
   ---------------------------------------------------------------------------- */
.topbar.topnav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:var(--z-topnav);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1.1rem,4vw,3rem);
  /* PERSISTENT: never translated off-screen, never pointer-events:none. */
  transform:none !important;
  pointer-events:auto !important;
  background:linear-gradient(to bottom,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 60%,transparent 100%);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
/* the index shell toggles .show via JS — neutralize so the bar is ALWAYS visible */
.topbar.topnav,
.topbar.topnav.show{transform:none !important;pointer-events:auto !important}

.topbar.topnav .topbar__mark{
  font-family:var(--nav-serif);font-weight:500;font-size:1.3rem;letter-spacing:.05em;
  color:var(--nav-gold-light);text-decoration:none;flex:0 0 auto;
}
.topbar.topnav .topbar__mark span{color:var(--nav-stone)}

.topnav__links{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem)}
.topnav__links a{
  font-family:var(--nav-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nav-stone);text-decoration:none;position:relative;
  padding:.35rem .1rem;
  transition:color .3s ease;
}
.topnav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--nav-gold);
  transition:width .3s ease;
}
.topnav__links a:hover,
.topnav__links a:focus-visible{color:var(--nav-gold)}
.topnav__links a:hover::after,
.topnav__links a:focus-visible::after{width:100%}
.topnav__links a[aria-current="page"]{color:var(--nav-gold-light)}
.topnav__links a[aria-current="page"]::after{width:100%}

/* KEYBOARD-FOCUSABLE: visible focus ring on every nav target */
.topbar.topnav a:focus-visible,
.topbar.topnav .topnav__cta:focus-visible{
  outline:2px solid var(--nav-gold);outline-offset:3px;border-radius:2px;
}

/* Book-a-call CTA — reachable from ANY page / chapter */
.topnav__cta{
  flex:0 0 auto;
  font-family:var(--nav-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#0a0a0a;background:var(--nav-gold);text-decoration:none;
  padding:.6rem 1.15rem;border-radius:2px;white-space:nowrap;
  transition:background .25s ease,transform .12s ease;
}
.topnav__cta:hover{background:var(--nav-gold-light)}
.topnav__cta:active{transform:scale(.96)}

/* ----------------------------------------------------------------------------
   3. MOBILE — top-nav collapses to a hamburger; CTA stays visible.
   ---------------------------------------------------------------------------- */
.topnav__burger{
  display:none;flex:0 0 auto;
  width:2.6rem;height:2.6rem;border:1px solid rgba(200,169,110,.4);border-radius:3px;
  background:rgba(0,0,0,.5);color:var(--nav-gold);cursor:pointer;
  align-items:center;justify-content:center;font-size:1.1rem;
}
.topnav__burger:focus-visible{outline:2px solid var(--nav-gold);outline-offset:2px}

@media (max-width:760px){
  .topnav__burger{display:flex}
  .topnav__links{
    position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem;
    padding:5rem 2rem;
    background:rgba(6,6,6,.97);
    border-left:1px solid rgba(200,169,110,.22);
    transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
    z-index:var(--z-topnav);
  }
  .topnav__links a{font-size:.8rem}
  body.nav-open .topnav__links{transform:none}
  /* keep the CTA visible in the bar on mobile */
}

/* ----------------------------------------------------------------------------
   Z-INDEX CONTRACT — clamp media below the interactive layer everywhere.
   ---------------------------------------------------------------------------- */
.cs-stage video,
.cs-stage img,
.cs-media{z-index:var(--z-media-max) !important;pointer-events:none}
.cs-ui{z-index:var(--z-ui) !important}

/* ----------------------------------------------------------------------------
   Reduced motion — no transitions on the nav.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .topbar.topnav,.topnav__links,.topnav__links a::after,.topnav__cta{transition:none !important}
}