/* Header theme switch sits beside the navigation call to action. */
.theme-switch {
  --ts-line: color-mix(in srgb, currentColor 30%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; margin-right: 4px;
  padding: 0; border: 1px solid var(--ts-line); border-radius: 0;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.theme-switch:hover { background: color-mix(in srgb, currentColor 16%, transparent); transform: translateY(-2px); }
.theme-switch:focus-visible { outline: 2px solid #2869e6; outline-offset: 3px; }
.theme-switch__i { width: 18px; height: 18px; display: block; }
.theme-switch__i--moon { display: none; }
.theme-switch[aria-pressed="true"] .theme-switch__i--sun { display: none; }
.theme-switch[aria-pressed="true"] .theme-switch__i--moon { display: block; }
@media (max-width: 600px) {
  .theme-switch { width: 40px; height: 40px; }
  .theme-switch__i { width: 16px; height: 16px; }
}

/* Keep the full-width header on one shared geometry in both editions. */
.nav {
  transition: background-color .25s ease, color .25s ease;
}

@media (min-width: 1001px) {
  .nav {
    height: 90px;
    gap: 20px;
    padding-inline: var(--gutter);
  }
  .nav__brand {
    width: 195px;
    min-width: 195px;
    height: 48px;
    gap: 12px;
  }
  .nav__word {
    font-family: "Funnel Display", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.16px;
  }
  .nav__links {
    width: 485.8px;
    min-width: 485.8px;
    justify-content: flex-start;
    gap: 2px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 21.45px;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav__links a {
    padding: 11px 15px;
  }
  .nav > .btn {
    width: 189.32px;
    min-width: 189.32px;
    height: 44px;
    min-height: 44px;
    padding: 0 0 0 14px;
    gap: 14px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16.8px;
    letter-spacing: .42px;
  }
  .nav > .btn:hover,
  .theme-switch:hover {
    transform: none;
  }
}

/* Ultrawide screens: align the header with the centred content column. */
@media (min-width: 1800px) {
  .nav { padding-inline: var(--gutter); }
}

/* Ultrawide screens: the centred column comes from the gutter padding, so any
   narrower max-width on .wrap would collapse the content. Keep them unbounded. */
@media (min-width: 1800px) {
  .wrap { max-width: none !important; }
}