/* ============================================================================
   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 ONE HEADER MEASUREMENT -----------------------------------------
   Two inputs, one derived value, and nothing else in the site restates them.

     --jw-nav-row   the height of the logo/hamburger row itself
     env(safe-area-inset-top)   the device inset, counted HERE and nowhere else
     --jw-head-h    the bar's rendered height = the inset + the row

   The document is served viewport-fit=cover, so the layout viewport reaches
   the top of the screen and the bar would otherwise sit under the status bar.
   The padding-top below is the whole of the site's inset handling. Anything
   that needs to clear the bar — the mobile drawer, the hero stage, a scroll
   margin, the homepage plate solver — reads --jw-head-h and therefore counts
   the inset exactly once. walker-nav.js overwrites --jw-head-h with the bar's
   MEASURED height once it has rendered; the calc below is the pre-script
   fallback and computes the same quantity from the same two inputs. */
:root{--jw-nav-row:64px;
      --jw-head-h:calc(env(safe-area-inset-top,0px) + var(--jw-nav-row))}

/* ---- the bar: Carbon, above everything, no blur, no gradient ---- */
.nav{position:sticky;top:0;z-index:60;background:#171717;
  padding-top:env(safe-area-inset-top,0px);
  -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:var(--jw-nav-row);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;width:146px;height:30px}   /* its drawn size, from the first frame: no 300 x 150 default before the font gate opens (3 Oct 2026) */
/* 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){
  /* THE MOBILE ROW. The tallest thing it must carry is the 44 x 44 control;
     the lockup is 30px. 44 + 6 above + 6 below = 56, which is the row, and
     nothing further is added — the bar ends at the foot of this row and the
     Carbon does not continue past it. The control gains its full 44px target
     here (it was 38 x 38, under the 44px floor this site's own experience
     standard sets at 390 x 844).

     THE ROW IS 56px — compact, and the whole of the bar below the inset: the
     bar is env(safe-area-inset-top) + 56 + the 1px divider and nothing else.
     The 44px control and the 30px lockup are both centred inside the row by
     .nav-inner's align-items:center (44 + 6 + 6 = 56), so the control keeps
     its full 44 x 44 target while the bar reads eight pixels lighter. There
     is no spacer, no Carbon buffer and no second band beneath the divider —
     the first pixel of the hero photograph is the pixel under that line. */
  :root{--jw-nav-row:56px}
  .nav-toggle{display:inline-flex;padding:11px}   /* 22px rule + 11 + 11 = 44 */
  .nav-links{position:fixed;top:var(--jw-head-h);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}

/* ============================================================================
   PORTFOLIO EDIT (2 October 2026) · the name in the bar, and the footer links
   ----------------------------------------------------------------------------
   The bar now reads WALKER [EMBLEM] DESIGN | Jason Walker, then Work, About and
   Contact. The lockup is unchanged; the name sits beside it inside the same
   home link, set in Radikal at reading size so a visitor knows whose work this
   is before anything else loads. Field Notes moves to the footer links.
   ========================================================================== */
.rwordmark{gap:14px}
.nav-name{font-family:var(--font-brand,'Radikal',system-ui,sans-serif);font-weight:500;font-size:15px;
  letter-spacing:.01em;line-height:1;color:#F2EFE9;white-space:nowrap;
  padding-left:14px;border-left:1px solid rgba(242,239,233,.24)}
.rwordmark:hover .nav-name{color:#DFFF00}
/* the homepage keeps its lockup visible from the first frame (no opening hand-off) */
html[data-jw-home="portfolio"] .rwordmark{opacity:1;visibility:visible}
@media (max-width:820px){
  .rwordmark{gap:10px}
  .nav-name{font-size:14px;padding-left:10px}
}
@media (max-width:359px){ .nav-name{font-size:13px;padding-left:8px} .rwordmark{gap:8px} }

/* the footer links: Work, About, Field Notes, Contact */
.jw-footnav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;
  font-family:var(--font-brand,'Radikal',system-ui,sans-serif);font-size:13px;font-weight:500;letter-spacing:.02em}
.jw-footnav a{color:inherit;text-decoration:none;opacity:.86;padding:4px 0;border-bottom:1px solid transparent}
.jw-footnav a:hover{opacity:1;border-bottom-color:currentColor}
.jw-footnav a:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}