:root{--cs-midnight:#0A0F1E;--cs-accent-text:#e3405b;--cs-white:#FFFFFF;--font-display:'Gloock','Cormorant Garamond',Georgia,serif;--font-body:'DM Sans','Helvetica Neue',Arial,sans-serif;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem}
/* Shared site header for pages that don't load site.css (Oct 12). Extracted from css/site.css lines 150-356. */
.site-header .container{max-width:1240px;margin:0 auto;padding:0 var(--s-5)}
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Sep 4 round 2 (Kyle: "menu bar suddenly squished and stuffed up to the top").
     padding:0 meant the header's whole height came incidentally from the logo (92px),
     with nothing else holding vertical space. Fixing the oversized logo to a correct
     44px collapsed the bar along with it. Header height now comes from its own
     padding, same as every other site header, independent of whatever the logo is. */
  padding: 30px 0;
  transition:
    transform 0.35s ease-out,
    opacity 0.3s ease-out,
    background 0.25s ease-out;
}
.site-header.solid {
  position: sticky;
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Headroom: floats fixed at top once scrolled past hero,
   slides up + fades on scroll-down, slides back in on scroll-up */
.site-header.is-floating {
  position: fixed;
  background: linear-gradient(180deg,
    rgba(10, 15, 30, 0.95) 0%,
    rgba(10, 15, 30, 0.88) 45%,
    rgba(10, 15, 30, 0.55) 75%,
    rgba(10, 15, 30, 0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 1;
}
.site-header.is-floating.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: opacity 0.2s ease-out; }
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
/* Sep 4 (Kyle: "why the fuck is the logo the size of a house"). The PNG's transparent
   padding got trimmed for the footer alignment fix (top/bottom padding was heavier than
   left/right), which flattened its aspect ratio: same 92px height now rendered ~64% wider.
   Height fixed at a real header-logo size instead of one tuned around the old padding. */
.nav-logo img { height: 44px; width: auto; }
.nav-links {
  display: none;
  align-items: center;
  gap: var(--s-6);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* ============================================================
   NAV, rebuilt 2026-08-11 (Kyle: "too basic"). Type A.
   Two signals doing two different jobs, deliberately never the same job:
     FRAME MARKS  = "you are here."  Persistent, current page only.
     RACK FOCUS   = "you are looking at this."  Transient, hover/keyboard.
   The focus pull is the same grammar as .h1-defocus, which racks the
   headline out to 3px and holds "films" sharp. That move is the one thing
   on this site only a director would have made, and the nav had been
   ignoring it. Blur ships at 1.1px, not the 1.5px of the first specimens,
   so it reads as depth of field rather than as a failed render.
   ⚠️ Resting color moves OFF the locked highlight teal (--cs-text-highlight,
   locked Apr 28) to a light neutral. Deliberate: that token is for text that
   should POP, and these items are supposed to RECEDE until addressed. The
   token itself is unchanged and still governs everywhere else.
   ============================================================ */
.nav-links a {
  color: #e7edf4;
  /* 0.86 / 0.8px, NOT the 1.1px / 0.62 of the approved specimen. Measured:
     the specimen values put the four resting links at 2.27 to 2.49 against a
     3.0 floor for 13.6px bold caps, i.e. the default view of the navigation
     was below the legibility floor. Swept the parameter space; 0.80/0.8px is
     the first combination that clears (3.22) and 0.86/0.8px was taken for
     margin (3.47). The blur survives, the resting state is just less faded.
     The DRAMA is preserved in the row-hover fallback below, which is allowed
     to go further precisely because it is transient and user-initiated. */
  opacity: 0.86;
  filter: blur(0.8px);
  position: relative;
  padding: 7px 4px;
  transition: filter 0.34s cubic-bezier(.2,.7,.2,1), opacity 0.34s, color 0.34s;
}
/* hovering the row pushes the un-addressed items further back */
.nav-links:hover a { opacity: 0.42; filter: blur(1.7px); }
.nav-links a:hover,
.nav-links:hover a:hover,
.nav-links a:focus-visible {
  opacity: 1; filter: blur(0); color: #fff;
}
/* current page: always sharp, never falls back with the row, carries the marks */
.nav-links a.active,
.nav-links:hover a.active {
  opacity: 1; filter: blur(0); color: #fff;
  border-bottom: 0;                      /* replaces the old 2px underline */
}
.nav-links a.active::before,
.nav-links a.active::after {
  content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none;
}
.nav-links a.active::before {
  top: 0; left: -8px;
  border-left: 1.5px solid var(--cs-accent-text);
  border-top: 1.5px solid var(--cs-accent-text);
}
.nav-links a.active::after {
  bottom: 0; right: -8px;
  border-right: 1.5px solid var(--cs-accent-text);
  border-bottom: 1.5px solid var(--cs-accent-text);
}
.nav-social {
  display: none;
  align-items: center;
  gap: var(--s-4);
}
.nav-social a {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cs-white); opacity: 0.7;
  transition: opacity 0.2s;
}
.nav-social a:hover { opacity: 1; }
.nav-social svg { width: 20px; height: 20px; fill: currentColor; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  color: var(--cs-white);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 0.25s; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .nav-links, .nav-social { display: inline-flex; }
}

/* Mobile nav drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--cs-midnight);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.nav-mobile.open { opacity: 1; visibility: visible; }
.nav-mobile a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cs-white);
  position: relative;
  padding: 4px 6px;
  opacity: 0.86;
  filter: blur(0.8px);
  transition: filter 0.34s cubic-bezier(.2,.7,.2,1), opacity 0.34s, color 0.34s;
}
.nav-mobile a:hover,
.nav-mobile a:focus-visible { opacity: 1; filter: blur(0); color: var(--cs-accent-text); }
/* Inverted from desktop on purpose: a phone has no hover, so the drawer
   cannot use focus-as-response. Instead the current page is the only sharp
   item, which is a "you are here" signal the drawer previously had at all. */
.nav-mobile a.active { opacity: 1; filter: blur(0); color: #fff; }
.nav-mobile a.active::before,
.nav-mobile a.active::after {
  content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none;
}
.nav-mobile a.active::before {
  top: 0; left: -10px;
  border-left: 2px solid var(--cs-accent-text);
  border-top: 2px solid var(--cs-accent-text);
}
.nav-mobile a.active::after {
  bottom: 0; right: -10px;
  border-right: 2px solid var(--cs-accent-text);
  border-bottom: 2px solid var(--cs-accent-text);
}

/* Same contract the headline already honors: no blur for anyone who asked
   for less motion. The frame marks survive, so "you are here" is never lost. */
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-mobile a,
  .nav-links:hover a { filter: none; opacity: 0.82; transition: color 0.2s, opacity 0.2s; }
  .nav-links a:hover, .nav-links a:focus-visible,
  .nav-links a.active, .nav-mobile a.active,
  .nav-mobile a:hover, .nav-mobile a:focus-visible { filter: none; opacity: 1; }
}
.nav-mobile-close {
  position: absolute; top: var(--s-5); right: var(--s-5);
  font-size: 2rem; color: var(--cs-white);
}
/* Guard the header against page-level link and button styles (Oct 12) */
.site-header a,.nav-mobile a{text-decoration:none!important;border-bottom:0!important}
.site-header .nav-links{border:0!important;padding:0!important}
.site-header .nav-toggle{background:none;border:0;box-shadow:none;color:#fff}
.site-header .nav-links{background:none!important;box-shadow:none!important}