/* ═══════════════════════════════════════════════════════════════════════════
   nav-base.css — the BASE nav component. Added 2026-08-26.

   🚨 READ css/nav.css's header FIRST. It says, in its own words:

       "It LAYERS ON TOP of whatever nav CSS the page already has. It
        deliberately does not restyle .nav, .nav-links or .nav-mobile."

   nav.css styles the Divisions DROPDOWN. It has never styled the nav itself.
   The base rules live in three places and a page must load one of them:

       · css/styles.css      — the ten column-footer pages
       · css/athenaeum.css   — the seven Athenaeum room pages
       · an inline <style>   — division/{bastion,foundry,mythrilworks}/, llypses/*

   ⚠️ THIS FILE EXISTS BECAUSE THAT LIST HAD NO FOURTH ENTRY FOR NEW PAGES.
   The arcade pages copied the nav MARKUP and the nav.css LINK from a division
   page but not the inline block that actually styles it — the one part that
   is invisible when you copy from a rendered page rather than from source.
   Result, live on 2026-08-26: `.nav-mobile` has no `display:none`, so the
   desktop nav AND the mobile sheet both rendered, unstyled, stacked, above
   a correctly styled page. It looked like a failed deploy. It was not.

   🚨 IF YOU ADD A PAGE WITH A NAV, LINK THIS FILE OR ONE OF THE THREE ABOVE.
   Never both — they define the same selectors and the later one wins.

   Rules below are copied VERBATIM from division/mythrilworks/index.html's
   inline block (lines 64–83 as of a6c362a) so a cabinet is pixel-identical to
   its division. If that block is ever edited, edit this too, or the arcade
   silently drifts away from MythrilWorks.

   ⚠️ EVERY var() HAS A LITERAL FALLBACK, for the same reason nav.css does:
   pages that load houses.css do NOT get --rws-white-50, --font-heading,
   --nav-h or --nav-max. Those live in the division pages' own inline palette.
   A missing token must degrade to the correct colour, never to nothing.

   ⚠️ --rws-white-30 IS .48, NOT .30. The name is historical. At .30 it
   computes to ~2.7:1 on our near-black, a WCAG AA failure, and it is used as
   TEXT. Do not "fix" the fallback below to match the name.

   The RESPONSIVE half is NOT here — css/nav.css owns the one sitewide
   breakpoint (1024px), where .nav-links hides and .nav-toggle appears. A
   second breakpoint in this file is how 861–975px got broken once already.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h,72px);
  background:rgba(6,11,15,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.35s;
}
.nav.scrolled{background:rgba(6,11,15,.95);border-bottom:1px solid var(--rws-border,rgba(255,255,255,0.06));}

.nav-inner{
  display:flex;align-items:center;
  height:var(--nav-h,72px);gap:2rem;
  max-width:var(--nav-max,min(1800px,100%));
  margin-inline:auto;
  padding-inline:var(--container-px,clamp(1.5rem,5vw,4rem));
}

/* 🚨 text-decoration:none IS REQUIRED HERE AND WAS MISSED FIRST TIME ROUND.
   Reported by Andrew 2026-08-26: underlines under "RED WARDEN" and "STUDIOS".
   The division pages never needed it because their inline block opens with a
   global `a{color:inherit;text-decoration:none;}` reset. The arcade pages only
   set `a{color:...}`, so every anchor keeps the browser's default underline
   and the logo is the most visible one. Do not solve this by adding a global
   `a{text-decoration:none}` to a page — prose links SHOULD stay underlined;
   it is only chrome that should not be. */
.nav-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;}
.nav-logo-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(192,57,43,.45));}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.15;}
.nav-logo-red{font-family:var(--font-heading,'Cinzel',Georgia,serif);font-size:.86rem;font-weight:700;letter-spacing:.2em;color:#fff;}
.nav-logo-sub{font-family:var(--font-heading,'Cinzel',Georgia,serif);font-size:.84rem;font-weight:500;letter-spacing:.34em;color:rgba(255,255,255,.62);}

.nav-links{display:flex;gap:2.25rem;margin-left:auto;}
.nav-links a{
  font-family:var(--font-heading,'Cinzel',Georgia,serif);
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rws-white-50,rgba(255,255,255,.50));
  text-decoration:none;transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:#fff;}

/* Hidden until nav.css's 1024px breakpoint turns it on. */
.nav-toggle{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:4px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--rws-white,#FFFFFF);transition:transform .3s,opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* 🚨 THE display:none HERE IS THE WHOLE BUG. Without this rule the mobile
   sheet renders inline, on desktop, under the real nav. */
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h,72px);left:0;right:0;
  background:rgba(6,11,15,.98);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rws-border,rgba(255,255,255,0.06));
  padding:2rem var(--container-px,clamp(1.5rem,5vw,4rem));
  flex-direction:column;gap:1.5rem;z-index:99;
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  font-family:var(--font-heading,'Cinzel',Georgia,serif);
  font-size:1rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rws-white-80,rgba(255,255,255,.80));
  text-decoration:none;
  /* 44px is the tap-target floor, not a look. Do not shrink. */
  min-height:44px;display:flex;align-items:center;
}
.nav-mobile a:hover,.nav-mobile a.active{color:#fff;}

/* The fixed nav sits above the document, so a page that loads this file must
   start its content below it. Division pages do that with the hero's
   padding-top; an ordinary page has nothing, and its first heading ends up
   under the bar. Opt in with <body class="has-fixed-nav">. */
body.has-fixed-nav{padding-top:var(--nav-h,72px);}