/* Approved ADC logo: open rings, upright antibody and a close rose payload. */
.wordmark {
  --brand-accent: #a5476e;
  color: #331526;
  font-weight: 600;
}
.wordmark .brand-mark {
  flex-shrink: 0;
  color: #630b3a;
}
/* Scale both SVGs together so the ADC payload and wordmark period match. */
.wordmark .brand-mark,
.site-header .wordmark .brand-mark {
  width: calc(36em / 29);
  height: calc(36em / 29);
}
.wordmark .brand-payload { fill: var(--brand-accent); }
.wordmark .wordmark-period { color: var(--brand-accent); }
.wordmark .brand-word {
  display: block;
  width: 5.103448em;
  height: 1em;
  flex-shrink: 0;
  overflow: visible;
}
.brand-word .wordmark-period { fill: var(--brand-accent); }

/* Light treatment for the navigation over the dark hero animation. */
.site-header:not(.is-scrolled) .wordmark {
  --brand-accent: #e6b4c8;
  color: #fff5ee;
}
.site-header:not(.is-scrolled) .wordmark .brand-mark { color: #f6e4ed; }
.site-header:not(.is-scrolled) .wordmark .wordmark-period { color: var(--brand-accent); }

/* Keep the comparison page's two light backgrounds legible as well. */
.header-options-page[data-header-theme="light"] .site-header:not(.is-scrolled) .wordmark {
  --brand-accent: #a5476e;
  color: #331526;
}
.header-options-page[data-header-theme="light"] .site-header:not(.is-scrolled) .wordmark .brand-mark {
  color: #630b3a;
}