/* ════════════════════════════════════════════════════════════════════
   SHARED NAV — single source of truth (2026-06-19)
   ────────────────────────────────────────────────────────────────────
   This file styles the ONE uniform nav used on every page. The markup is
   stamped from _BUILD/nav-partial.html into the NAV-AUTOGEN sentinels by
   the build; the behaviour lives in assets/nav.js. DO NOT copy nav CSS
   back into any page — edit it HERE only.
   Per-page nav behaviour (e.g. the old homepage hero glass-handoff) was
   intentionally removed for launch; re-add it later, but keep it OUT of
   this shared file so the cross-page transition stays flicker-free.
   Depends on page brand tokens: --w50 --black --white --red --max --gutter.
   ════════════════════════════════════════════════════════════════════ */

/* ─── PAGE-TO-PAGE TRANSITION (cross-document View Transitions) ───
   navigation:auto = the nav (view-transition-name: site-nav) HOLDS STATIC
   across navigation → "no jumps, ever". The page body does one quick
   crossfade. Keep this on every route or the persistence breaks. */
@view-transition { navigation: auto; }
/* The ACTIVE nav stroke just APPEARS on the page you land on — no slide/grow. */
::view-transition-group(nav-active-ink),
::view-transition-old(nav-active-ink),
::view-transition-new(nav-active-ink) { animation-duration: 0s; animation-delay: 0s; }
/* The whole nav SNAPS to the new page's ink instead of cross-fading. Otherwise the
   persistent nav blends the OLD page's ink over the new one for the transition's
   duration — a white flash on a dark→light navigation — now visible because prerender
   makes the swap instant. Nav content/position are identical page-to-page, so a snap
   reads as "no change" except the ink is correct immediately. (2026-07-13) */
::view-transition-group(site-nav),
::view-transition-old(site-nav),
::view-transition-new(site-nav) { animation-duration: 0s; animation-delay: 0s; }
/* ASYMMETRIC crossfade (2026-07-09): the OLD page is held 100% opaque underneath and the NEW page fades
   in on top — so there is never a translucent mid-point where the white canvas bleeds through (the old symmetric
   old→0 + new→1 fade dipped see-through and flashed white, worse on the preview server). Pairs with the per-page
   hero preload + pagereveal skip-guard so the incoming full-screen hero is decoded before it's revealed. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-fade-in 0.2s ease both; }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ─── NAV BAR ─────────────────────────────────────────────────────
   Fixed glass bar. The ink engine in nav.js is a real-pixel sampler
   (v4, 2026-07-16): it reads the actual pixels painted under every
   link/chip/hamburger box and flips the whole set dark/light as ONE,
   via an inline color the engine sets. --nav-ink below is only the
   pre-JS seed so there is no flash before the engine's first paint.
   Manual per-page overrides = NAV_INK_STAMPS in nav.js (hand-edited). */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 87px;
  /* HOLDS STATIC across page navigation — no flash. Glass moved to
     #nav-glass so the backdrop-filter survives the vt-named nav. */
  view-transition-name: site-nav;
}
/* REFRACTION GLASS — separate sibling layer (deliberately NOT
   view-transition-named) so its backdrop-filter keeps sampling the LIVE
   page and SURVIVES the persistent-nav transition. Always-on frosted bar.
   z190 = below the nav bar (z200). */
#nav-glass {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 87px;
  z-index: 190;
  background: rgba(16,24,32, 0.01);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 67%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 0%, black 67%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01);
  opacity: 1;   /* glass frost ON on land */
  pointer-events: none;
}

/* --nav-ink = the PRE-JS SEED only. The v4 engine paints each item's ink
   inline per frame; this var just sets the first-paint colour so there is
   no flash before the engine's seed pass. Default = dark, for the light
   backgrounds most pages land on. */
:root { --nav-ink: var(--black); }
/* Land light: pages that open on a dark hero set data-nav-land="light" on <html>
   so the FIRST paint is already light — no dark-ink flash before nav.js runs.
   The engine then takes over per item. */
html[data-nav-land="light"] { --nav-ink: #ffffff; }
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateY(-8px); /* optical centre vs top-weighted glass mask */
  position: relative;
  z-index: 1;
}
.nav-logo {
  justify-self: start;
  /* Brand-locked red-badge SVG — fills baked in, never inherits color. */
}
.nav-logo svg {
  height: 42px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  color: var(--nav-ink);
}
/* Hover keeps the nav ink — the affordance is the red underline
   + the opacity lift below, not a colour change. */
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--nav-ink); } }
/* Nav link hover — ultra-thin red underline wipes left→right. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.45s cubic-bezier(0.16, 0.84, 0.34, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { width: 100%; } }
/* Page links DIMMED except the current page; current + any hover go full. */
.nav-links a { opacity: 0.5; transition: opacity 0.3s ease; }
.nav-links a[aria-current="page"] { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { opacity: 1; } }
/* ACTIVE PAGE = persistent stroke. aria-current="page" (stamped per page by
   the build) holds the current link's underline full; hovering another link
   collapses it while the hovered one grows. */
.nav-links a[aria-current="page"]::after {
  width: 100%;
  view-transition-name: nav-active-ink;
}
@media (hover: hover) and (pointer: fine) { .nav-links:hover a[aria-current="page"]:not(:hover)::after { width: 0; } }

/* Nav-ink colour GLIDE — the v4 engine sets each item's color inline; these
   ease the change instead of snapping. Gated on html.nav-ink-ready (added by
   the engine AFTER the seed paint) so the initial ink lands instantly, no flash. */
html.nav-ink-ready .nav-links a { transition: opacity 0.3s ease, color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
html.nav-ink-ready .nav-hamburger { transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.nav-right {
  grid-column: 3;   /* stay in the RIGHT column even when nav-links is display:none on mobile (else it auto-places to the centre column → hamburger drifts to mid-page) */
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Nav social square chips (f · IG) — hairline glyphs riding the nav
   text-color mix (so they wipe dark/light with the links); brand hover. */
.nav-social {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--nav-ink);
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-social[aria-label*="Facebook"]:hover { color: #1877F2; }
  .nav-social[aria-label*="Instagram"]:hover { color: #E1306C; }
}
.nav-social svg { display: block; }
.nav-social + .nav-social { margin-left: -12px; }

/* ─── MOBILE NAV DRAWER (≤960px) ─── */
.nav-drawer { display: none; }
@media (max-width: 960px) {
  .nav-links { display: none; }   /* desktop links hide → drawer */
  .nav-social { display: none; }  /* chips are desktop-only */
  /* Hamburger: right-gutter aligned, NO box/stroke/fill — just three lines, riding the nav ink (2026-06-23). */
  .nav-hamburger { display: inline-flex !important; justify-self: end; width: 26px; height: 18px; background: transparent; border: 0; border-radius: 0; align-items: center; justify-content: flex-end; cursor: pointer; padding: 0; margin: 0; color: var(--nav-ink); }
  .nav-hamburger span, .nav-hamburger span::before, .nav-hamburger span::after { content: ""; display: block; width: 26px; height: 2px; background: currentColor; position: relative; }
  .nav-hamburger span::before { position: absolute; top: -8px; left: 0; }
  .nav-hamburger span::after  { position: absolute; top: 8px;  left: 0; }
  body.menu-open .nav-drawer { transform: translateX(0); box-shadow: -16px 0 60px rgba(0,0,0,0.18); }   /* shadow ONLY when open — the closed drawer sits off-screen right, and a shadow on the base rule bled ~76px back into the viewport's right edge, full-height (position:fixed escapes overflow clipping, so this was the phantom right-edge shadow). 2026-07-10 */
  .nav-drawer { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--white,#fff); z-index: 200; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); padding: 100px 32px 32px; flex-direction: column; gap: 22px; }
  .nav-drawer a { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .nav-drawer a:hover { color: var(--red); } }
  /* Close (X) — lands on the hamburger's EXACT spot: right = the capped gutter min(--gutter,32px) (so it tracks
     the homepage's 20px phone gutter, not a fixed 32); top 26px = the raw 34px MINUS the −8px optical nudge that
     .nav-inner (nav.css:87) applies to the hamburger but NOT to this X (it lives in the drawer, outside .nav-inner).
     Lives INSIDE the drawer, so it rides the drawer's slide-in AND fades+scales in on top of it → it
     "animates in with the rest of the menu," never just snaps into the spot. Dark ink on the white drawer
     (fixed, not nav-ink, so it's always legible). Two 22px bars crossed = the X. (2026-07-10) */
  .nav-drawer-close { position: absolute; top: 26px; right: min(var(--gutter, 32px), 32px); width: 26px; height: 18px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; color: var(--black,#191A1C); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1); transition-delay: 0.14s; }
  .nav-drawer-close span { position: relative; display: block; width: 22px; height: 2px; }
  .nav-drawer-close span::before, .nav-drawer-close span::after { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 2px; background: currentColor; }
  .nav-drawer-close span::before { transform: rotate(45deg); }
  .nav-drawer-close span::after  { transform: rotate(-45deg); }
  body.menu-open .nav-drawer-close { opacity: 1; transform: scale(1); }
  @media (hover: hover) and (pointer: fine) { .nav-drawer-close:hover { color: var(--red); } }
  @media (prefers-reduced-motion: reduce) { .nav-drawer-close { transition: none; transform: none; } body.menu-open .nav-drawer-close { transform: none; } }
}

/* ─── NAV INSET CAP — reconciled to the CONTENT gutter breakpoint (≤760px) ───
   .nav-inner pads by the page's --gutter so nav edges track the content column.
   Above 760px every page keeps them flush on the raw --gutter: main pages already
   shrink --gutter to 32px at ≤960, and utility pages (privacy/accessibility/404)
   hold --gutter:80px until their own content gutter collapses at 760. Only at ≤760
   — where the content gutter itself drops (utility → 24px, main → 20/32px) — does
   this cap trim any oversized 80px utility gutter down to 32px, so the logo +
   hamburger don't sit jammed inward on phones. Previously the cap fired at ≤960,
   which pulled the nav ~48px inside the content column across the 761–960px band on
   utility pages; matching the 760 content breakpoint keeps nav edges on the content
   edge at every width. (2026-07-09) */
@media (max-width: 760px) {
  .nav-inner { padding-left: min(var(--gutter), 32px); padding-right: min(var(--gutter), 32px); }
}