.site-header {
  background: transparent;
  border-color: transparent;
  margin-bottom: -76px;
  transition: background .2s ease, border-color .2s ease;
}
.site-header.scrolled {
  background: rgba(16,17,18,.96);
  border-color: rgba(255,255,255,.15);
}
.site-header .brand { color: var(--white); }
.site-header .brand-mark { background: var(--white); color: #161616; }
.site-header .brand span:not(.brand-mark) { color: var(--white); }
.site-header .brand .brand-dot { color: var(--lime) !important; }
.site-header .site-nav { gap: 8px; }
.site-header .site-nav a {
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: var(--white);
  padding: 7px 14px;
  font-size: 12px;
}
.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current] {
  background: rgba(255,255,255,.14);
  color: var(--white);
}
.site-header .nav-cta {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  margin-left: auto;
}
.site-header .nav-cta:hover { background: var(--white); color: #161616; }
.page-intro { padding-top: 170px; }
.article { padding-top: 136px; }
@media(max-width:800px) {
  .site-header { margin-bottom: -66px; }
  .site-header .site-nav { gap: 0; }
  .site-header .site-nav a { border: 0; border-radius: 0; }
  .page-intro { padding-top: 140px; }
  .article { padding-top: 126px; }
}
@media(max-width:560px) {
  .article { padding-top: 106px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header { transition: none; }
}