/* ==========================================================================
   THE NAV. One implementation, one file, every page.

   There used to be four. index.html carried its own inline, style.css served
   the manifesto and the docs, privacy and terms had a third, and seventeen
   pages each repeated a fourth copy of the alignment formula in their own
   <style> block. They were kept level by hand, by a comment asking the next
   person to keep them level, and they were not level: the logotype sat three
   pixels lower on the home page than on anything you clicked through to, and
   privacy and terms had no goose at all and a bar 0.7px taller than the rest.

   So: nothing about this bar is defined anywhere else. If you find yourself
   adding a .nav rule to style.css or to a page's <style>, that is the bug
   starting again — put it here instead.

   Markup, and it is the same on every page:

     <nav class="nav">
       <a class="brand" href="/" aria-label="flock, home">
         GOOSE   WORDMARK
       </a>
       <div class="nav-links">
         …links…
         <a class="nav-cta" href="/download">Download</a>
       </div>
     </nav>

   The goose is either a bare <svg class="nav-goose"> or index's .goose-flap
   wrapper, which holds two sprites and beats its wing once on arrival. Both
   size identically here; the flap itself is index's, deliberately, and lives
   in index's own stylesheet. Everything about the BAR is this file's.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  /* Height is derived, never stated. 14px above and below whatever the tallest
     control measures — which is .nav-cta — so when that control changes the
     bar follows on its own. Stating a number here is exactly how the two navs
     drifted apart: index derived its height, style.css declared 62px, the
     control grew to 39px, and only one of them noticed. */
  padding-block: 14px;

  /* Aligned to the same shell the page content uses, derived from --shell
     rather than pre-computed. The old copies hardcoded 1016px, which is this
     expression with --shell at 1080 and the gutter at 32 already folded in —
     two constants for one measurement, and nothing to stop one moving. */
  padding-inline: max(var(--nav-gutter), calc((100vw - var(--shell)) / 2 + var(--nav-gutter)));

  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border, var(--hairline, transparent));
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

:root {
  --shell: 1080px;
  --nav-gutter: clamp(20px, 5vw, 32px);
}

/* index sets this on scroll; harmless everywhere else. */
.nav.scrolled { border-bottom-color: var(--hairline-soft, var(--border)); }

/* ─── The lockup ────────────────────────────────────────────────────────────
   PROPORTION IS THE LOCKUP AND IT IS EXACT. Bird and word are a pair: 72px of
   goose against a 35px wordmark puts them in one band on the goose's own 36:16
   grid. Resize them together or not at all. */

.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav .brand svg { display: block; }

.nav .brand .wordmark { font-size: 35px; }

.nav .nav-goose,
.nav .goose-flap svg {
  width: 72px;
  /* auto keeps the bird on its own 36:16 grid, the same grid the app's
     GooseMark derives its height from — 24.89px at this width. */
  height: auto;
  image-rendering: pixelated;
}

/* ─── Links ─────────────────────────────────────────────────────────────── */

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}

.nav-links a:not(.nav-cta) {
  color: var(--text-mid, var(--slate));
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:not(.nav-cta):hover { color: var(--text-hi, var(--ink)); }

.nav-cta {
  font-size: 14px;
  font-weight: 600;
  /* Stated, not inherited. This control is the tallest thing in the bar, so it
     is what sets the bar's height — and index.html's body is line-height 1.65
     against style.css's 1.6, which at 14px is 23.1px against 22.4px. One pixel,
     landing on the one element the whole nav is measured from. */
  line-height: 1.65;
  color: var(--bg, var(--ivory)) !important;
  background: var(--text-hi, var(--ink));
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 0.25s ease, opacity 0.12s ease-out;
}

.nav-cta:hover { background: var(--ink-hover, var(--text-hi)); }

/* ─── The GitHub link ───────────────────────────────────────────────────────
   The one nav destination that is not ours, so it gets the shape every
   open-source visitor already reads on sight: octocat, the word, and the
   repo's star count behind a hairline. The count is written in by /nav.js
   when GitHub answers; until then the span is empty and hides itself, the
   star stands alone, and nothing shifts when the number lands. */

.nav-links a.nav-oss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  line-height: 1;
  border: 1px solid var(--border, var(--hairline, currentColor));
  border-radius: 8px;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.nav-links a.nav-oss:hover { border-color: var(--text-low, var(--slate)); }

.nav-oss svg { display: block; flex-shrink: 0; }

.nav-oss .oss-stars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--border, var(--hairline, currentColor));
}

.nav-oss .oss-count {
  font-family: var(--font-mono, "Fragment Mono", ui-monospace, Menlo, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.nav-oss .oss-count:empty { display: none; }

/* ─── Narrow ────────────────────────────────────────────────────────────────
   One thing a visitor actually hunts for, plus the GitHub link; everything
   else waits in the footer. */

@media (max-width: 900px) {
  .nav-links a:not(.nav-cta):not(.nav-oss) { display: none; }
  .nav { gap: 16px; }
}

/* On a phone the octocat and the star say it all; the word gives its
   width back to the bar. */
@media (max-width: 560px) {
  .nav-oss .oss-label { display: none; }
}

/* ─── Theme toggle, retired ─────────────────────────────────────────────────
   The site is Graphite-only. The toggle buttons are still in shipped markup
   on every page and their styles live in each page's own <style>, so the
   retirement happens here, centrally, where every page already looks. */
.theme-toggle { display: none !important; }