/* nav-v3.css — shared floating nav bar. Renamed v2 -> v3 purely for
   cache-busting (new asset filenames so browsers never serve a stale
   mix of old/new behavior) — the mount id and class prefix are
   deliberately NOT bumped, since versioning those was unnecessary
   churn last time (see project memory: nav-asset-architecture-debt).
   Class/id prefix stays "nav-v2" throughout; only the CSS/JS asset
   filenames change.

   Two rounds of changes since the v2 baseline, both per explicit
   feedback:
   Round 1 — logo enlarged (wordmark 20px -> 28px) and hide-on-
   scroll-down/show-on-scroll-up added (see nav-v3.js).
   Round 2 — the logo icon is now sized in em relative to the
   wordmark (1.15em of the shared 28px basis, replacing the earlier
   canvas cap-height-matched px value, per explicit request to make
   it bigger and keep it tied to the wordmark's size); and the nav's
   hidden state moved into this CSS as the DEFAULT (no modifier class
   needed to hide it) so there's no flash of it showing then hiding
   on load — nav-v3.js now only ever ADDS .nav-v2--visible on an
   explicit upward scroll, removing it on a downward scroll or at the
   very top. :focus-within keeps it visible for keyboard users
   tabbing into a nav link, independent of scroll state. */
:root{
  --nav-v2-inset: 24px;          /* top offset == side inset, per spec */
  --nav-v2-radius: 24px;         /* scaled up from Selected Works cards' 18px radius: appropriate for a ~72px-tall bar (18px read as too subtle at this height; a full pill (999px) over-committed past "rounded bar") */
  --nav-v2-maxw: 1200px;
  --nav-v2-height: 72px;
  --nav-v2-height-mobile: 64px;
  --nav-v2-cream: #E9E6DF;
  --nav-v2-ink: #252224;         /* reuses the site's actual --color-near-black/--ink token; the original brief's literal #0B0B0F doesn't exist anywhere else in the codebase */
  --nav-v2-violet: #7D63E4;      /* reuses --color-violet's current value (post palette-swap); the original brief's literal #7A5CFF is the pre-swap value */
  --nav-v2-z: 40;                 /* measured live: #flameCursor is z-index 60, #pixelTrailCanvas is 50 -- nav must stay below both so the cursor/trail render on top, per spec. Still above ordinary page content. */
}
#nav-v2-mount{ position: relative; z-index: var(--nav-v2-z); }
.nav-v2{
  position: fixed;
  top: var(--nav-v2-inset);
  left: 50%;
  /* hidden by default — see the file banner comment. -220% clears the
     bar (plus its box-shadow and the top inset) regardless of
     desktop/mobile height, since the percentage is relative to the
     element's own height. */
  transform: translateX(-50%) translateY(-220%);
  width: calc(100% - (var(--nav-v2-inset) * 2));
  max-width: var(--nav-v2-maxw);
  height: var(--nav-v2-height);
  z-index: var(--nav-v2-z);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nav-v2-cream);
  color: var(--nav-v2-ink);
  border-radius: var(--nav-v2-radius);
  padding: 0 10px 0 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  font-family: 'Aspekta Variable', 'DM Sans', sans-serif;
  transition: transform .3s ease;
}
/* revealed on an upward scroll (JS adds .nav-v2--visible — see
   nav-v3.js), or on keyboard focus landing on any nav link/button
   regardless of scroll state, so keyboard users can always tab to it. */
.nav-v2.nav-v2--visible,
.nav-v2:focus-within{
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .nav-v2{ transition: none; }
}
.nav-v2__logo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-v2-ink);
  text-decoration: none;
  flex: 0 0 auto;
  font-size: 28px; /* shared em basis for the icon + wordmark below, so the icon can be sized in em relative to the wordmark */
}
.nav-v2__logo-icon{ height: 1.15em; width: auto; color: var(--nav-v2-ink); } /* 1.15em of the shared 28px basis (~32.2px), per explicit request to size it bigger and in em relative to the wordmark */
.nav-v2__logo-icon .flame{ opacity: 0; animation: navV2FlameFlicker .6s steps(1) infinite; }
@keyframes navV2FlameFlicker{ 0%{opacity:1;} 16.667%{opacity:0;} 100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .nav-v2__logo-icon .flame{ animation: none; }
  .nav-v2__logo-icon .flame.f0{ opacity: 1; }
}
.nav-v2__wordmark{
  font-weight: 650;
  font-size: 1em; /* was a literal 28px; now inherits the shared basis on .nav-v2__logo via em, kept in sync with the icon's em-based sizing */
  letter-spacing: 0.01em;
}
.nav-v2__center{
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}
.nav-v2__item{
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--nav-v2-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-v2__item:hover, .nav-v2__item:focus-visible{
  color: color-mix(in srgb, var(--nav-v2-ink) 65%, transparent);
}
.nav-v2__right{ display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-v2__talk{
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--nav-v2-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-v2__talk:hover{ color: color-mix(in srgb, var(--nav-v2-ink) 65%, transparent); }
.nav-v2__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-v2-violet);
  color: var(--nav-v2-cream);
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  width: var(--nav-v2-cta-size, 44px);
  height: var(--nav-v2-cta-size, 44px);
}
.nav-v2__menu-btn{
  display: none;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--nav-v2-ink);
  cursor: pointer;
  padding: 8px;
}
.nav-v2__mobile-panel{
  position: fixed;
  inset: 0;
  z-index: calc(var(--nav-v2-z) - 1);
  background: var(--nav-v2-cream);
  color: var(--nav-v2-ink);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-v2-height-mobile) + 32px) 24px 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.nav-v2__mobile-panel.is-open{ opacity: 1; visibility: visible; }
.nav-v2__mobile-links{ border-top: 1px solid color-mix(in srgb, var(--nav-v2-ink) 15%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--nav-v2-ink) 15%, transparent); padding: 18px 0; }
.nav-v2__mobile-panel a{
  display: block;
  font-size: 22px;
  font-weight: 650;
  color: var(--nav-v2-ink);
  text-decoration: none;
  padding: 10px 0;
  min-height: 44px;
}
.nav-v2__mobile-talk{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nav-v2-violet);
  color: var(--nav-v2-cream) !important;
  font-size: 18px;
  font-weight: 650;
  text-decoration: none;
  border-radius: 999px;
  padding: 18px 24px;
  min-height: 44px;
}

@media (max-width: 767px){
  .nav-v2{ height: var(--nav-v2-height-mobile); padding: 0 8px 0 14px; }
  .nav-v2__center, .nav-v2__talk{ display: none; }
  .nav-v2__menu-btn{ display: inline-block; }
}
@media (min-width: 768px){
  .nav-v2__mobile-panel{ display: none; }
}
.nav-v2__logo:focus-visible,
.nav-v2__item:focus-visible,
.nav-v2__talk:focus-visible,
.nav-v2__cta:focus-visible,
.nav-v2__menu-btn:focus-visible{
  outline: 2px solid var(--nav-v2-ink);
  outline-offset: 3px;
}