/* Black and navy brand palette. Shared across every page. */
.site-header,
.site-header.is-solid,
.site-header.is-solid.is-on-light {
  --hdr-bg: var(--ink);
  --hdr-fg: var(--paper);
  --hdr-line: var(--paper-20);
  background: var(--ink);
  color: var(--paper);
  mix-blend-mode: normal;
  box-shadow: inset 0 -1px 0 var(--hdr-line);
}
.site-header .menu-btn,
.site-header.is-solid .menu-btn { background: var(--accent); color: var(--ink); }
.site-header .nav-link:hover,
.site-header .site-header__brand:hover { color: var(--accent); }
.site-header :focus-visible,
.site-header.is-solid :focus-visible { outline-color: var(--accent); }
.menu { background: var(--ink); }
.menu__link:hover { color: var(--accent); }
.surface-dark { --line-strong: rgba(184, 194, 207, 0.5); }
.site-footer.surface-dark { --surface: var(--ink); background: var(--ink); }
.home-quiz.surface-dark { --surface: var(--navy); background: var(--navy); }
.hero__line--serif { color: var(--navy); }
.surface-dark .hero__line--serif { color: var(--accent); }
.btn,
.btn--light,
.float-cta .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
.btn:hover,
.btn--light:hover,
.float-cta .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--ink);
}
.btn--ghost { background: transparent; border-color: var(--slate); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.surface-dark .btn--ghost,
.menu .btn--ghost { background: transparent; border-color: var(--paper-70); color: var(--paper); }
.surface-dark .btn--ghost:hover,
.menu .btn--ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.surface-dark .btn:focus-visible,
.menu .btn:focus-visible { outline-color: var(--paper); }
.surface-light .link,
.surface-light .link-inline,
.surface-grey .link,
.surface-grey .link-inline { color: var(--navy); }
.surface-dark .link-inline,
.surface-dark .circle-link,
.surface-dark .index { color: var(--accent); }
.surface-dark .link:hover { color: var(--accent); }
.field__input:focus { border-color: var(--navy); }
.choice__option input { accent-color: var(--navy); }
.btn:disabled { cursor: wait; opacity: 0.7; }
@media (max-width: 767px) {
  .float-cta { background: var(--ink); }
  .float-cta .btn { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .float-cta .btn:hover { background: var(--accent-hover); color: var(--ink); }
}