/*
  nav.css: the Nav, one shared component of the /a system (2026-09-25).

  Sam, 2026-09-25: "lets also try to keep the same NAV across all pages." ... "yes lets keep it like
  the homepage we're thinking". So every page in scope carries homepage v1's top chrome as one
  markup (a/COMPONENTS.md, "Nav"): About, MarzyOS and Blog at the left, the Mulholland lockup at
  the right linking home (the brain alone on a phone). No burger: the three links fit at 320px.

  It measures exactly as the homepage's .chrome--top did (system.css) at the browser's default text
  size, from the --nav-* roles in tokens.css (held in px, so the /a pages, whose root is set in px,
  draw it the same). Every value is a token; this file states none of its own, except the one face
  it declares (an @font-face descriptor cannot read a token).

  Colour: --nav-foreground follows the ground under the nav (nav.js sets data-nav-over; tokens.css
  rebinds): ink over bone and white, white over the homepage film and every dark ground. On the
  /a pages it also frosts once the page has scrolled and hides on the way down, back on the way up
  (nav.js); the homepage keeps it still over its fog. Load it after the page's own stylesheet.
*/

@font-face { font-display: swap; font-family: 'Helvetica Now Display'; font-style: normal; font-weight: 500; src: url('/vendor/fonts/helvetica-now/HelveticaNowDisplay-Md.otf') format('opentype'); }

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--nav-layer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: var(--nav-gutter);
  color: var(--nav-foreground);
  font-size: var(--nav-text-size); /* so an em in the nav (the focus ring's offset) is the same on every page */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-synthesis: none;
  pointer-events: none;
  user-select: none;
  -webkit-tap-highlight-color: var(--surface-clear);
  translate: 0 var(--nav-y, 0px);
  transition: color var(--motion-normal) var(--motion-ease-fade);
}

/* The frost: behind the nav's whole box, in the ground's own tint, once the page has scrolled. The
   blur is on only while frosted (the homepage never frosts): a backdrop filter puts the nav on a
   layer of its own, which redraws its hairlines, so at rest the nav draws exactly as the homepage's. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--layer-below);
  background: var(--nav-frost);
  opacity: 0;
  transition: opacity var(--motion-normal) var(--motion-ease-fade), background-color var(--motion-normal) var(--motion-ease-fade);
}

.nav.is-frosted::before {
  -webkit-backdrop-filter: blur(var(--frost-blur));
  backdrop-filter: blur(var(--frost-blur));
  opacity: 1;
}

/* A line of links: each padded, so words sit two paddings apart and the first starts at the gutter;
   the hit area is the pitch tall. */
.nav__links {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-inline-start: calc(var(--nav-link-padding) * -1);
  padding: 0;
  list-style: none;
}

.nav__links > li {
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--nav-line);
  padding-inline: var(--nav-link-padding);
  color: inherit;
  font-family: var(--nav-face);
  font-size: var(--nav-text-size);
  font-style: normal;
  font-weight: var(--nav-weight);
  line-height: var(--nav-leading);
  letter-spacing: var(--nav-tracking);
  cursor: pointer;
  pointer-events: auto;
  text-decoration-line: underline;
  text-decoration-color: var(--surface-clear);
  text-decoration-thickness: from-font;
  transition: opacity var(--nav-link-duration) var(--nav-link-ease), text-decoration-color var(--nav-link-duration) var(--nav-link-ease);
}

/* Rest, hover, focus, pressed, current: the homepage's link states. */
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    text-decoration-color: currentColor;
  }
}

.nav__link:focus-visible,
.nav__link[aria-current] {
  text-decoration-color: currentColor;
}

.nav__link:focus-visible,
.nav__home:focus-visible {
  outline: var(--nav-ring-width) solid currentColor;
  outline-offset: var(--nav-ring-offset);
}

.nav__link:active {
  opacity: var(--nav-active-opacity);
  text-decoration-color: currentColor;
}

/* The mark: the lockup from 64em, the brain alone below it (drawn in the nav's colour). */
.nav__home {
  position: relative;
  display: block;
  flex: none;
  block-size: var(--nav-mark-size);
  color: inherit;
  pointer-events: auto;
}

/* The lockup is two files stacked, the white one in the flow and the ink one over it; the ground
   shows one (--nav-lockup-*-opacity), crossfading with the links' colour. */
.nav__wordmark {
  display: none;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  transition: opacity var(--motion-normal) var(--motion-ease-fade);
}

.nav__wordmark--white {
  opacity: var(--nav-lockup-white-opacity);
}

.nav__wordmark--ink {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: var(--nav-lockup-ink-opacity);
}

.nav__mark {
  display: block;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__mark path {
  stroke-width: var(--nav-mark-stroke);
  vector-effect: non-scaling-stroke;
}

@media (min-width: 64em) {
  .nav__wordmark {
    display: block;
  }

  .nav__mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav::before,
  .nav__wordmark {
    transition: none;
  }
}