/* ============================================================================
   500x — the site navigation, once.
   ----------------------------------------------------------------------------
   Every page had grown its own nav: the film has a transparent one that gains a
   ground on scroll, the case studies had a bare back-link, About had a
   different bare back-link again. Same problem the footers had, same fix.

   Loaded by every page. The film page overrides only the ground-on-scroll
   behaviour, via .site-nav--film.
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 3vw, 40px);
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1c1c1f;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.site-nav .brand { display: block; flex: 0 0 auto; }
/* The source PNG used to carry 144px of transparent padding above the glyphs
   and 265px below -- 32% of the file was empty, so a CSS height of 23px was
   drawing about 15px of actual logo, and the asymmetry sat the mark high in
   its own box. The asset is now cropped to its alpha bounds, so this number
   means what it says: 48px of wordmark, ~150px wide at the true 3.12:1. */
.site-nav .brand img { height: 48px; width: auto; display: block; }

.site-nav ul {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
/* Was #6b6b68, which measured 3.70:1 against the page ground -- under the 4.5:1
   floor, and this is 11px tracked-out uppercase, the least forgiving setting
   there is. Now 13.8:1. The nav was reading as disabled rather than quiet. */
.site-nav a.nav-link {
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #d8d8d3;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  position: relative;
}
.site-nav a.nav-link:hover { color: #fff; }
.site-nav a.nav-link[aria-current="page"] { color: #f4f4f0; }

/* With every link now bright, colour alone no longer separates the current
   page from the rest -- so it gets a mark instead of just a shade. Which is
   the more accessible way round regardless. */
.site-nav a.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a3fa8, #2a5cdb 55%, #d94a5e);
}

/* Pages that open on a full-bleed hero -- the film, every case study -- want
   the nav floating over it, taking a ground only once the hero is moving
   underneath. Sticky would shove a 100vh hero down by its own height. */
.site-nav--overlay {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}
.site-nav--overlay.solid {
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(12px);
  border-bottom-color: #1c1c1f;
}

/* Before the bar takes its ground, these sit directly on the film -- which is
   dark in some movements and near-white in others, so no single text colour
   is safe. They carry their own contrast until .solid arrives and makes it
   unnecessary. A shadow rather than a plate: it holds the type over a bright
   frame without putting a box on top of the film. */
.site-nav--overlay:not(.solid) a.nav-link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.6);
}
.site-nav--overlay:not(.solid) .brand img {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

/* Four links and the wordmark have to share one line on a phone. Measured, not
   guessed: at 12px the logo drops to 28px to make room; under 380px the type
   steps down once more, and under 360px no readable size fits, so the links
   take their own row beneath the mark rather than running off the edge. */
@media (max-width: 700px) {
  .site-nav ul { gap: 12px; }
  .site-nav a.nav-link { font-size: 12px; letter-spacing: 0.8px; }
  .site-nav .brand img { height: 28px; }
}
@media (max-width: 380px) {
  .site-nav a.nav-link { font-size: 11px; }
}
@media (max-width: 359px) {
  .site-nav { flex-wrap: wrap; row-gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .site-nav ul { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav a.nav-link { transition: none; }
}