/* Logo mark: three overlapping circles drawn with ink lines, filled with the pastels. */

.brand-mark {
  width: 46px;
  height: 26px;
  position: relative;
  flex: 0 0 auto;
}

.brand-mark span {
  position: absolute;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}

.brand-mark span:nth-child(1) {
  left: 0;
  background: var(--blue);
}

.brand-mark span:nth-child(2) {
  left: 11px;
  background: var(--coral);
}

.brand-mark span:nth-child(3) {
  left: 22px;
  background: var(--mint);
}

/* Small context label above a heading: sentence case, muted. */
.eyebrow {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
}