/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER — the dark stack (credbar + sticky nav) shared by index.html
   and search.html.

   Extracted verbatim from the two pages, which had drifted into keeping two
   copies of the same rules. Nothing here is page-specific: search.html's
   ".here" current-page marker is included because it is header furniture, and
   it simply matches nothing on pages that don't use it.

   Link order no longer matters. It used to: .nav set `padding:14px 0`, which
   tied with `.wrap`'s `padding:0 24px` at specificity (0,1,0) and won only by
   being later, costing the header its side gutters. That shorthand collision
   is gone — see the note above `header` — and nothing in this file now ties
   with a page rule on the same property. Loading it after the inline <style>
   is still the convention, but it is no longer load bearing.

   Depends on the page for: --dark, --gold, --mono, --rule-dark, the .wrap
   measure, and the base .btn / .btn-gold styles the CTA builds on.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── top rule bar ─────────────────────────── */
.credbar{background:var(--dark);padding:10px 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8FA0BE}
.credbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.credbar .star{color:var(--gold)}
.credbar strong{color:#FFFFFF;font-weight:600}

/* ── header ───────────────────────────────── */
/* The row's vertical rhythm lives on <header>, NOT on .nav. The nav element is
   <div class="wrap nav">, so .wrap and .nav both match it at (0,1,0); when .nav
   set `padding:14px 0` it won the tie on source order and silently zeroed the
   24px side gutters .wrap provides. The header then ran edge to edge: at any
   viewport equal to the wrap width the CTA and the wordmark sat flush against
   the screen, and the credbar above kept its gutters, leaving the two dark
   bands misaligned by 24px.

   Splitting the axes fixes it at the root — <header> owns the vertical, .wrap
   owns the horizontal, and .nav no longer sets padding at all, so there is no
   tie left to lose. */
header{position:sticky;top:0;z-index:50;background:var(--dark);border-top:1px solid rgba(184,145,46,.35);border-bottom:1px solid rgba(184,145,46,.35);padding:14px 0}
.nav{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;margin-right:20px}
.brand img{height:44px;width:auto;display:block}
.brand .name{font-family:var(--mono);font-weight:700;color:#FFFFFF;font-size:.95rem;letter-spacing:.14em;white-space:nowrap}
.brand .name span{color:var(--gold-bright,#D4AF37)}

/* The full eight-item row — six links, the login chip and the CTA — needs
   1130px beside the wordmark. The site's 1020px wrap only offers 972px, so
   the dark masthead stack (credbar + header) widens to 1200px and shows the
   whole row; every band below it keeps the 1020px measure. Under 1200px the
   row is trimmed in tiers rather than allowed to overflow — see the media
   queries at the end of this file.

   nowrap is load-bearing: without it the links silently break mid-label
   ("01 / CAPABILITIES") and the row looks like it fits when it does not. */
.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.nav-links a{font-family:var(--mono);color:#9FB0CC;text-decoration:none;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.nav-links a:hover{color:#FFFFFF}
/* current-page marker — used by search.html, inert elsewhere */
.nav-links a.here{color:#FFFFFF;border-bottom:1px solid var(--gold)}
.nav-links .btn{padding:9px 15px;font-size:.74rem;letter-spacing:.02em}
.nav-links .login-link{border:1px solid #3A4A66;padding:8px 12px}
.nav-links .login-link:hover{border-color:#9FB0CC}

/* ── nav: fitting the row ──────────────────────────────────────────────────
   The row is trimmed in tiers, widest first. Each tier states what the row
   costs and what the viewport offers, so the next person can check the
   arithmetic instead of re-deriving the breakpoints.

   Costs below are measured at the nav's own type size, brand included, and
   the viewport offers (viewport or wrap, whichever is smaller) minus the
   wrap's 48px of gutters.

   Order matters: nothing here removes an item a wider tier depends on, and
   each tier only ever removes. Priority follows the site's own: the numbered
   section anchors are the first to go — they point at sections you can also
   reach by scrolling — while Search Opportunities, Log In and the CTA are
   the row's real destinations and survive to the narrowest phone.          */

/* ≥1200px — the whole row. The dark stack widens to 1200 (content 1152) to
   seat a row that costs 1130; the paper bands below stay at 1020. */
@media(min-width:1200px){
  .credbar .wrap, header .wrap{max-width:1200px}
}

/* <1200px — content is 972 at most, so the four numbered anchors go and the
   row drops to 760. */
@media(max-width:1199px){
  .nav-links a:not(.btn):not(.login-link):not(.nav-search):not(.nav-watch){display:none}
}

/* <808px — 760 no longer clears the gutters (808 - 48 = 760 exactly, so this
   is the first width that fails). Market Watch goes; the row drops to 659. */
@media(max-width:807px){
  .nav-links .nav-watch{display:none}
}

/* Phones: the three survivors are compacted rather than dropped. Labels shed
   words from the outside in — "Search Opportunities" → "Search", "Request
   Founding Access" → "Request Access" — so nothing here invents copy that
   doesn't already appear in the full label. */
@media(max-width:760px){
  .nav-links{gap:8px}
  .nav-links .login-link{padding:8px 10px;font-size:.7rem;letter-spacing:.02em}
  .nav-links .nav-search{font-size:.7rem;letter-spacing:.02em}
  .nav-links .ns-long{display:none}
  .nav-links .btn{padding:9px 12px;font-size:.72rem;letter-spacing:.02em}
  .nav-links .cta-founding{display:none}
  /* icon-only brand on phones — the wordmark + login chip + CTA don't all fit in 375px */
  .brand .name{display:none}
  .brand img{height:32px}
}

/* ≤400px — the last squeeze before the row would overflow a 320px phone:
   the CTA shows only its final word and the gutter between items tightens. */
@media(max-width:400px){
  .nav-links{gap:6px}
  .nav-links .btn{padding:9px 10px}
  .nav-links .cta-request{display:none}
}