/* ============================================================
   SHARED NAV — the single source of truth for every page.
   Edit here once and every page changes; nothing to keep in sync.
   f.html overrides only its scroll behaviour (transparent over the
   hero, dropping in solid after) in its own stylesheet.
   ============================================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  /* 56px matches every section, the hero and the footer, so the logo and the
     deploy status sit on the site's own left and right edges. */
  padding:20px 56px;border-bottom:1px solid var(--line);background:rgba(10,11,13,.82);backdrop-filter:blur(12px)}
nav .logo{display:block;width:102px;height:26.5px;background-color:var(--ink);
  -webkit-mask:var(--logo) no-repeat center/contain;mask:var(--logo) no-repeat center/contain;
  transition:background-color .3s ease}
nav .logo:hover{background-color:var(--accent)}
nav .logo img{display:none}
/* Phone menu button — hidden until the phone breakpoint. Sits above the sheet
   (z-index 2 vs 1) so it stays tappable and becomes the close control. */
nav .navtog{display:none;position:relative;z-index:2;
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:0;margin-right:-11px;   /* 44px hit target, optically flush */
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
  -webkit-tap-highlight-color:transparent}
nav .navtog i{display:block;width:22px;height:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
nav.open .navtog i:nth-child(1){transform:translateY(4px) rotate(45deg)}
nav.open .navtog i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){nav .navtog i{transition:none}}
nav ul{display:flex;gap:40px;list-style:none}
nav ul a{font-family:var(--mono);font-size:13.9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .2s}
nav ul a:hover,nav ul a.here{color:var(--accent)}
nav .status{display:flex;align-items:center;gap:12.6px;font-size:12.5px;
  font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  transition:color .25s}
nav a.status:hover{color:var(--ink)}
.dot{display:inline-block;width:6.85px;height:6.85px;border-radius:50%;background:var(--accent);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* ── Breakpoints, site-wide: tablet <=1024, phone <=600 ───────────────────
   The gutter steps 56 -> 32 -> 20 so the nav always sits on the same left
   edge as the page content below it. */
@media(max-width:1024px){
  nav{padding:18px 32px}
  nav ul{gap:28px}
  nav .status{font-size:11.5px}
}
/* ≤900 — phones AND portrait tablets. A portrait iPad has the same problem a
   phone does: four tracked-out mono words plus the deploy status do not fit
   beside the logo without colliding, and the row was only "fitting" by pushing
   everything to the edges. Landscape (1024) keeps the full row. */
@media(max-width:900px){
  nav .logo{position:relative;z-index:2}   /* above the sheet, stays tappable */
  /* Squeezing four tracked-out mono words next to the logo left them colliding
     with it, so at these widths the same list becomes a full-screen sheet behind
     the bar, opened by the button. The deploy status has no room here at all. */
  nav .status{display:none}
  nav .navtog{display:flex}
  /* THE BAR'S BLUR MUST GO WHILE THE SHEET IS OPEN.
     backdrop-filter establishes a containing block for fixed-position
     descendants, so with it applied the sheet's `inset:0` resolved against the
     73px NAV BAR rather than the viewport — the links rendered in a 72px strip
     and collided with the page heading underneath. Dropping it for the open
     state hands the containing block back to the viewport. Nothing is lost:
     the sheet covers the whole screen anyway, so there is no backdrop left to
     blur. f.html and about.html never showed this because their own nav
     override already sets backdrop-filter:none. */
  nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;
    border-bottom-color:transparent}
  nav ul{position:fixed;inset:0;z-index:1;
    flex-direction:column;justify-content:center;align-items:stretch;gap:0;
    padding:0 32px;
    background:rgba(8,9,11,.975);backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility .34s}
  nav.open ul{opacity:1;visibility:visible;transform:none}
  nav ul li{border-bottom:1px solid var(--line)}
  nav ul li:first-child{border-top:1px solid var(--line)}
  /* Headline treatment, centred: the sheet is the whole screen, so the links
     carry the page's display face at h1 weight rather than reading as a shrunk
     desktop navbar. */
  nav ul a{display:block;text-align:center;padding:17px 0;
    font-family:var(--disp);font-weight:800;font-stretch:115%;
    font-size:clamp(30px,8.4vw,46px);line-height:1.06;
    letter-spacing:-.015em;text-transform:uppercase;color:var(--ink)}
  nav ul a:hover,nav ul a.here{color:var(--accent)}
  @media(prefers-reduced-motion:reduce){
    nav ul{transition:opacity .01s linear,visibility .01s}
  }
}
/* Phone-only: the gutter steps 32 -> 20 and the wordmark shrinks with it.
   Everything else about the collapsed nav is shared with portrait tablet. */
@media(max-width:600px){
  nav{padding:14px 20px}
  nav .logo{width:84px;height:21.8px}
  nav ul{padding:0 20px}
}