.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 1.625rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.badge--live {
  background-color: var(--color-forest-100);
  color: var(--color-forest-800);
}

.badge--live::before {
  content: "";
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
}

.badge--archived {
  background-color: var(--color-stone-200);
  color: var(--color-ink-700);
}

.badge--category {
  border: 1px solid var(--color-gold-200);
  background-color: var(--color-gold-50);
  color: var(--color-gold-800);
  transition: border-color var(--duration-fast) ease;
}

a.badge--category:hover {
  border-color: var(--color-gold-400);
}

.badge--on-media {
  background-color: var(--color-scrim);
  color: var(--color-on-dark);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}