:root {
  --c2k-hero: linear-gradient(135deg, #071528, #102b50);
  --c2k-hero-copy: #d0def0;
  --c2k-hero-meta: #aec4df;
  --c2k-hero-accent: #79b7ff;
  --c2k-action: #0866ff;
  --c2k-action-hover: #0055dc;
}

.hero,
.page-head {
  background: var(--c2k-hero);
  color: #fff;
  border-bottom-color: #243d5e;
}

.hero h1,
.page-head h1 {
  color: #fff;
}

.hero h1 > span,
.hero .eyebrow,
.page-head .eyebrow {
  color: var(--c2k-hero-accent);
}

.hero .tiny-line {
  background: var(--c2k-hero-accent);
}

.hero-copy > p,
.page-head p {
  color: var(--c2k-hero-copy);
}

.page-head .breadcrumb,
.hero .suggested,
.hero .art-caption {
  color: var(--c2k-hero-meta);
}

.page-head .breadcrumb a {
  color: #d7e8ff;
}

.page-head .breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-head .private-pill,
.hero .suggested a {
  color: #e9f3ff;
  background: #ffffff0d;
  border-color: #ffffff33;
}

.hero .suggested a:hover {
  color: #fff;
  background: #ffffff1a;
  border-color: var(--c2k-hero-accent);
}

.hero .orbit {
  border-color: #6aa9f145;
}

.hero .art-dot {
  background: #78b4fa;
}

.hero .art-node {
  color: #1b60ab;
  border-color: #d4e4fa;
}

.hero .art-card {
  color: var(--ink);
  box-shadow: 0 14px 40px #0004;
}

.site-header .header-support,
.hero .search-form .button,
.page-head .search-form .button {
  background: var(--c2k-action);
  color: #fff;
}

.site-header .header-support:hover,
.hero .search-form .button:hover,
.page-head .search-form .button:hover {
  background: var(--c2k-action-hover);
}

.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active,
.site-header .help-label:hover {
  color: #075bcf;
}

.hero .search-form,
.page-head .search-form,
.page-head .small-search {
  background: #fff;
  border-color: #d5e2f1;
}

.hero .search-form > .icon,
.page-head .search-form > .icon,
.page-head .small-search > .icon {
  color: #526d8c;
}

.hero .search-form:focus-within,
.page-head .search-form:focus-within,
.page-head .small-search:focus-within {
  border-color: var(--c2k-hero-accent);
  box-shadow: 0 0 0 3px #79b7ff66;
}

.hero a:focus-visible,
.page-head a:focus-visible {
  outline-color: var(--c2k-hero-accent);
}