/* ENVOY — nav.css
   the fixed bar, over every panel

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 2.4vw, 34px);
  /* A solid black bar of its own, sitting on top of the first panel, rather
     than the soft falloff it used to fade out with. The hairline is what makes
     it read as a box edge against the video behind it instead of a shadow. */
  background: #000;
  border-bottom: 1px solid rgba(239, 32, 21, 0.22);
}

.brand,
.menu a {
  color: var(--red);
  text-decoration: none;
  /* no glow — just a tight dark shadow so the text stays legible where it
     crosses a lit frame of the video */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.18s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(15px, 1.32vw, 19px);
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* The mark to the left of the wordmark. A background image rather than an
   <img> on purpose: if assets/logo.svg is not there yet the box simply draws
   nothing, where an <img> would leave a broken-image glyph in the nav. It is
   sized off the wordmark so the two always scale together. */
.brand-mark {
  flex: none;
  width: 1.65em;
  height: 1.65em;
  background: center / contain no-repeat url("../assets/logo.svg");
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
}

.menu a {
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.brand:hover,
.menu a:hover,
.menu a:focus-visible {
  color: var(--red-bright);
}

a:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 4px;
}