/* ==========================================================================
   theFlourish — Shared site header
   Loaded by every page. Self-contained: it declares its own tokens scoped to
   the header, so it renders identically on pages built on flourish.css and on
   the subpages that still carry their own inline design system.
   Themes follow [data-theme="dark"] on <html>, which every page already sets.
   ========================================================================== */

.site-header,
.mobile-nav {
  --nv-paper: #faf9f5;
  --nv-paper-2: #f2efe7;
  --nv-ink: #0c0b0a;
  --nv-ink-2: #56534c;
  --nv-ink-3: #8b877e;
  --nv-rule: #e0dccf;
  --nv-rule-strong: #c9c4b4;

  --nv-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --nv-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --nv-container: 1280px;
  --nv-gutter: clamp(20px, 5vw, 48px);
  --nv-fast: 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .mobile-nav {
  --nv-paper: #0c0b0a;
  --nv-paper-2: #141311;
  --nv-ink: #f7f4ec;
  --nv-ink-2: #a7a29a;
  --nv-ink-3: #78746c;
  --nv-rule: #26241f;
  --nv-rule-strong: #3a3730;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--nv-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nv-rule);
  font-family: var(--nv-sans);
}

.site-header a {
  text-decoration: none;
  color: inherit;
}

.site-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav {
  max-width: var(--nv-container);
  margin-inline: auto;
  padding: 0 var(--nv-gutter);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--nv-ink);
  flex-shrink: 0;
  text-transform: none;
}

.brand-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--nv-ink);
  color: var(--nv-paper);
  font-family: var(--nv-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links > li > a,
.dropdown-trigger {
  font-family: var(--nv-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--nv-ink-2);
  transition: color var(--nv-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.nav-links > li > a:hover,
.dropdown-trigger:hover {
  color: var(--nv-ink);
}

.nav-dd {
  position: relative;
}

.nav-dd .chev {
  font-size: 0.55rem;
  opacity: 0.6;
  transition: transform var(--nv-fast);
}

.nav-dd:hover .chev,
.nav-dd:focus-within .chev {
  transform: rotate(180deg);
}

.dd-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 244px;
  background: var(--nv-paper);
  border: 1px solid var(--nv-rule-strong);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nv-fast), transform var(--nv-fast), visibility var(--nv-fast);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.4);
}

/* Keeps the menu reachable across the gap below the trigger. */
.dd-menu::before {
  content: '';
  position: absolute;
  inset: -14px 0 100% 0;
}

.nav-dd:hover .dd-menu,
.nav-dd:focus-within .dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dd-menu a {
  display: block;
  padding: 10px 12px;
  font-family: var(--nv-mono);
  font-size: 0.8125rem;
  color: var(--nv-ink-2);
  transition: background-color var(--nv-fast), color var(--nv-fast);
}

.dd-menu a:hover {
  background: var(--nv-paper-2);
  color: var(--nv-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--nv-rule);
  border-radius: 0;
  color: var(--nv-ink-2);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--nv-fast), color var(--nv-fast), background-color var(--nv-fast);
}

.icon-btn:hover {
  border-color: var(--nv-ink);
  color: var(--nv-ink);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.nav-toggle {
  display: none;
}

/* The CTA is styled here too, so subpages with their own .btn rules still
   render the header button identically. */
.site-header .btn,
.mobile-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--nv-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 13px 22px;
  border: 1px solid var(--nv-ink);
  border-radius: 0;
  background: var(--nv-ink);
  color: var(--nv-paper);
  cursor: pointer;
  text-align: center;
  box-shadow: none;
  transition: background-color var(--nv-fast), color var(--nv-fast), border-color var(--nv-fast), transform var(--nv-fast);
}

.site-header .btn:hover,
.mobile-nav .btn:hover {
  background: transparent;
  color: var(--nv-ink);
  transform: none;
  box-shadow: none;
}

.site-header .btn:active,
.mobile-nav .btn:active {
  transform: translateY(1px);
}

/* --- mobile panel --- */
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--nv-rule);
  background: var(--nv-paper);
  padding: 8px var(--nv-gutter) 20px;
  font-family: var(--nv-sans);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  font-family: var(--nv-mono);
  font-size: 0.9375rem;
  color: var(--nv-ink-2);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--nv-rule);
}

.mobile-nav a:hover {
  color: var(--nv-ink);
}

.mobile-nav .sub {
  padding-left: 16px;
  font-size: 0.8125rem;
  color: var(--nv-ink-3);
}

.mobile-nav .btn {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }
}

@media (max-width: 520px) {
  .site-header #nav-cta {
    display: none;
  }
}

/* The wordmark keeps its casing wherever it appears. */
.brand,
.brand-name {
  text-transform: none;
}