/* ============================================================================
   site-nav.css — the ONE canonical JasonWalker.design navigation.
   ----------------------------------------------------------------------------
   CHECKPOINT 5 — THE CARBON STRIP. Carbon #171717 bar · the approved
   WALKER [EMBLEM] DESIGN navigation lockup, drawn by walker-nav.js from
   WALKER_DESIGN_LOCKUP_V2 at the exact Option C navigation spacing · Bone
   supporting links · Acid reserved for the emblem, the active mark and focus
   (always against the Carbon ground, never against a light field).

   There is no separate punctuation dot, no duplicate JasonWalker.design
   wordmark, no orange and no blue anywhere in this bar. The old .jw-dot
   wordmark system is retired.

   Structure preserved: .nav > .nav-inner > (.rwordmark canvas | .nav-toggle |
   .nav-links). Toggle expects #navToggle + #navLinks and the .open class
   (site.js / thinking.js / the homepage inline script all provide this).
   Load AFTER system.css. Pair with the canonical markup.
   ========================================================================== */

/* the navigation lockup's own face — the same production woff2 the site
   loads, under the runtime family name walker-nav.js measures with */
@font-face{font-family:'RadikalRec';src:url('../fonts/radikal/radikal-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block}

/* ---- the bar: Carbon, above everything, no blur, no gradient ---- */
.nav{position:sticky;top:0;z-index:60;background:#171717;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(242,239,233,.08)}
.nav .nav-inner{display:flex;justify-content:space-between;align-items:center;
  height:64px;width:100%;max-width:1200px;margin:0 auto;
  padding:0 clamp(20px,4.6vw,72px);box-sizing:border-box}

/* ---- the navigation identity: ONE canvas, one implementation ---- */
.rwordmark{display:inline-flex;align-items:center;text-decoration:none;opacity:1}
.rwordmark:focus-visible{outline:2px solid #DFFF00;outline-offset:4px}
.rnav-logo{display:block}
/* On the homepage the hero runtime withholds the compact identity while the
   large opening identity owns the sheet, and releases it (.rwm-in) only after
   the words are fully gone. Every other route shows it immediately. */
html[data-jw-meaning="production"] .rwordmark{opacity:0;visibility:hidden}
html[data-jw-meaning="production"] .rwordmark.rwm-in{opacity:1;visibility:visible;
  transition:opacity .5s ease .05s}

/* ---- supporting links: Bone on Carbon ---- */
.nav-links{display:flex;gap:30px;align-items:center;margin:0}
.nav-links a{font-family:var(--font-brand,system-ui);font-weight:500;font-size:14px;
  color:rgba(242,239,233,.78);text-decoration:none;transition:color .2s}
.nav-links a:not(.nav-cta){position:relative;padding:6px 0}
.nav-links a:not(.nav-cta):hover{color:#F2EFE9}
.nav-links a:not(.nav-cta).active,
.nav-links a:not(.nav-cta)[aria-current="page"]{color:#F2EFE9}
.nav-links a:not(.nav-cta).active::after,
.nav-links a:not(.nav-cta)[aria-current="page"]::after{content:'';position:absolute;
  left:0;right:0;bottom:-6px;height:2px;background:#DFFF00}
.nav-links a:focus-visible{outline:2px solid #DFFF00;outline-offset:4px}

/* ---- Contact CTA: square, Acid outline on Carbon, fills on hover ---- */
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid #DFFF00;color:#F2EFE9;border-radius:0;font-weight:500;
  font-size:14px;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s}
.nav-cta::before{display:none}
.nav-cta:hover{background:#DFFF00;color:#171717}
.nav-cta:focus-visible{outline:2px solid #DFFF00;outline-offset:4px}

/* ---- mechanics: hide toggle on desktop; Carbon drawer on mobile ---- */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;
  color:#F2EFE9}
.nav-toggle svg{display:block;width:22px;height:22px}
.nav-toggle:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;top:64px;left:0;right:0;background:#171717;
    flex-direction:column;align-items:flex-start;gap:0;padding:6px 20px 20px;
    border-bottom:1px solid rgba(242,239,233,.10);transform:translateY(-8px);
    opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.nav-cta){padding:13px 0;font-size:16px;width:100%;
    border-bottom:1px solid rgba(242,239,233,.08)}
  .nav-links a:not(.nav-cta).active::after,
  .nav-links a:not(.nav-cta)[aria-current="page"]::after{display:none}
  .nav-links a:not(.nav-cta).active,
  .nav-links a:not(.nav-cta)[aria-current="page"]{color:#DFFF00}
  .nav-cta{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .nav-links{transition:none}
  html[data-jw-meaning="production"] .rwordmark.rwm-in{transition:none}
}

/* The old JasonWalker·design text wordmark and its living dot are retired.
   Pages that still carry the markup render nothing from it. */
.wordmark .jw-dot,.jw-dot--wordmark,.wordmark .wm-dot{display:none}