/* ---------------------------------------------------------------------------
   NAV — one floating glass pill, on every page including the landing film.

   Self-contained on purpose. The landing page loads cinematic/blueprint/footer;
   /faq and /about load pages.css; neither set is a superset of the other, so
   this sheet declares everything it needs and prefixes what it owns. `--nav-h`
   is the one token it publishes — pages.css measures its top padding, its
   scroll-padding and the timeline's sticky offset from it.

   The hard part is not the pill, it is the film underneath it. The landing page
   is a 19,000px scroll-scrubbed film whose beats own their own top edge:
   the red card stamps HYREN across it, the honest-coach slide puts an eyebrow
   at top-left, the blueprint puts SCAN labels at top-right, and the closing
   Bento runs its headline edge to edge from y=0. No fixed position clears all
   of them.

   So the bar yields instead of dodging: it is present at rest, retracts the
   moment you scroll INTO the film, and comes back the moment you scroll back —
   which is the same gesture as "I want to leave this page". It is therefore
   never on screen during a beat you are actually watching, and always one
   gesture away on every one of them. src/nav.js drives it.
--------------------------------------------------------------------------- */

:root {
  /* Clears the pill plus its top offset. Anything that must not sit under the
     bar measures from this, so the bar can be resized in one place. */
  --nav-h: 76px;
  --nav-fg: #F5F5F7;
  --nav-red: #FF2233;
}

.nav {
  position: fixed;
  /* Above the hands canvas (z10) and the footer (z30): this is chrome, and
     chrome sits on top of the picture. */
  z-index: 100;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  /* Shrink-to-fit, not a spanning bar. Two reasons, and the second is the one
     that decided it: a full-width pill leaves a dead gap between the mark and
     the links, and — on the landing film — it reaches into the top-left and
     top-right corners where the beats keep their own chrome. It clipped "THE
     HONEST COACH" mid-word and sat on the blueprint's SCAN label. At ~400px
     centred it clears both at every width the film is legible at. */
  width: -webkit-max-content;
  width: max-content;
  max-width: calc(100% - 24px);
  border-radius: 999px;
  /* The glass: a blurred, over-saturated sample of whatever scrolls under it,
     one hairline, and a single light lip along the top edge so the pill reads
     as lit from above rather than as a flat translucent rectangle. */
  background: rgba(14, 14, 16, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 26px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  transition:
    background-color .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    opacity .26s ease,
    transform .32s cubic-bezier(.22, .61, .36, 1);
}
/* Chromium 79 (the webOS 6 TVs src/legacy.css targets) has no backdrop-filter,
   and an unbacked 58%-alpha bar over scrolling text is unreadable. Those
   browsers get an opaque pill instead — same shape, no glass. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: #0e0e10; }
}
/* Past the first few pixels the content behind the bar is busier, so the glass
   is darkened and the shadow tightened. Set by src/nav.js. */
.nav.is-scrolled {
  background: rgba(10, 10, 12, 0.76);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 34px rgba(0, 0, 0, 0.55);
}

/* Retracted. `translateX(-50%)` has to be restated — a transform replaces the
   whole list, and dropping it would slide the bar to the right as it leaves. */
.nav.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-100% - 16px));
  pointer-events: none;
}

/* No space-between: the pill is only as wide as this row, so there is nothing
   to distribute. The gap is the separation between lockup and links. */
.nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 10px 9px 16px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--nav-fg);
  text-decoration: none;
}
/* The same monogram geometry the film stamps and the footer etches, at nav
   volume. Flat white here — the footer's engraved treatment needs a surface,
   and the glass pill is not one. */
.nav-mark {
  height: 22px;
  aspect-ratio: 433 / 487;
  flex: 0 0 auto;
  fill: var(--nav-fg);
}
@supports not (aspect-ratio: 1 / 1) {
  .nav-mark { width: calc(22px * (433 / 487)); }
}
.nav-wordmark {
  font-family: 'Anton', 'Helvetica Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 34px tall keeps every target above the 24px WCAG 2.2 minimum. */
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(245, 245, 247, 0.62);
  font: 700 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
/* Hover-gated: a tapped link on a touchscreen keeps :hover until something
   else is tapped, so the pill would stay lit behind whichever label the finger
   last touched — including after navigating back to the page. */
@media (hover: hover) {
  .nav-link:hover { color: var(--nav-fg); background: rgba(255, 255, 255, 0.06); }
}
/* The current page is stated by aria-current, and styled from it — one source
   of truth, so the highlight can never disagree with what a screen reader
   announces. */
.nav-link[aria-current="page"] {
  color: var(--nav-fg);
  background: rgba(255, 255, 255, 0.09);
}
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--nav-red);
}
.nav a:focus-visible {
  outline: 2px solid rgba(255, 34, 51, .75);
  outline-offset: 3px;
}

/* ---- the landing film ----------------------------------------------------
   Two differences, both because the film is louder than a document.

   1. The glass is deeper. The film passes through a full-bleed #FF2233 flood
      and a bright red Bento; the content-page alpha turns pink behind the
      labels there and the 10px mono stops being readable.
   2. No wordmark. The film already sets HYREN in 100px across the red card and
      again as the neon mark — a third one in the chrome is noise, and the
      monogram alone still says whose site this is and still links home.
--------------------------------------------------------------------------- */
.nav--film {
  background: rgba(8, 8, 10, 0.78);
  border-color: rgba(255, 255, 255, 0.11);
  /* Saturation pulled back from 180%. On a document that lift is what makes the
     glass feel like glass; over a full-bleed #FF2233 flood it blooms the red
     straight through the pill and the labels sit on maroon. */
  -webkit-backdrop-filter: blur(26px) saturate(105%);
  backdrop-filter: blur(26px) saturate(105%);
}
.nav--film.is-scrolled {
  background: rgba(6, 6, 8, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav--film, .nav--film.is-scrolled { background: #08080a; }
}
.nav--film .nav-wordmark { display: none; }

/* The boot gate holds scrolling until the mosaic can paint (src/main.js). Chrome
   over a black screen that cannot yet be scrolled reads as a broken page, so the
   bar waits with it. No transition on the way in — it fades in with the film. */
html.crt-boot .nav {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  :root { --nav-h: 68px; }
  /* max-width only — setting `width` here would override the shrink-to-fit
     above and stretch the pill edge to edge again. */
  .nav { top: 8px; max-width: calc(100% - 16px); }
  .nav-inner { padding: 7px 7px 7px 12px; gap: 8px; }
  .nav-links { gap: 1px; }
  .nav-link { padding: 0 8px; font-size: 9px; letter-spacing: .12em; }
  .nav-mark { height: 19px; }
  @supports not (aspect-ratio: 1 / 1) { .nav-mark { width: calc(19px * (433 / 487)); } }
  .nav-wordmark { font-size: 15px; }
}
/* Below 380px the wordmark and four labels cannot both fit, and something has
   to go. The mark alone still identifies the site and still links home, so the
   word is what is dropped — the navigation is what people came for. The
   breakpoint sits under 390 on purpose: an iPhone 14 has ~18px to spare and
   keeps the full lockup; a 375 or 360 phone does not. */
@media (max-width: 380px) {
  .nav-wordmark { display: none; }
  .nav-link { padding: 0 6px; letter-spacing: .08em; }
}

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