/**
 * Site header — a solid near-black bar, pinned, always.
 *
 * It used to be transparent over the hero and gain a background past 8px of
 * scroll. That stops working the moment the page alternates bands: a
 * transparent bar inherits nothing useful, and a bar backed with `--vc-bg`
 * would be cream where it overlaps the cream sections and cream where it
 * overlaps the near-black ones. Either way it disappears against half the
 * page.
 *
 * So the bar carries `data-vc-surface="dark"` in the markup and is opaque from
 * the first frame. It is the page's one fixed element, it reads as a masthead
 * rule, and it never has to guess what is behind it.
 *
 * `main.js` still adds `.site-header--scrolled` past 8px. All that does now is
 * draw the rule under the bar, so the edge is there when the page has content
 * running beneath it and absent when the hero sits flush below.
 */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--vc-z-overlay);
  height: var(--noir-header-h);
  background: var(--vc-bg);
  border-bottom: var(--noir-rule) solid transparent;
  transition: border-color var(--vc-dur-base) var(--vc-ease-out);
}

.site-header--scrolled {
  border-bottom-color: var(--vc-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--vc-space-5);
  height: 100%;
}

.site-header__mark {
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: var(--noir-rule) solid var(--vc-ink);
  border-radius: 0;
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-header__name {
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Below the fold-width the full name is the first thing to go. */
@media (max-width: 26rem) {
  .site-header__name {
    display: none;
  }
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  gap: var(--vc-space-6);
}

/**
 * inline-flex with a min-height, not a bare inline link. A 12px link is a 15px
 * hit area, which is under the 24x24 minimum in WCAG 2.2 Target Size (AA) —
 * and a nav you have to aim at is a nav people use the scrollbar instead of.
 */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--vc-dur-fast) var(--vc-ease-out);
}

.site-nav__link:hover {
  color: var(--vc-ink);
}

.site-header__cta {
  min-height: 2.25rem;
  padding: var(--vc-space-2) var(--vc-space-5);
  font-size: var(--vc-text-xs);
}

/* The nav collapses before the CTA does — the CTA is the point of the bar. */
@media (max-width: 40rem) {
  .site-nav {
    display: none;
  }

  .site-header__cta {
    margin-left: auto;
  }
}