/*
 * Eyebrow — the shared section-label pattern.
 *
 * A short uppercase label in accent colour, preceded by a thin
 * horizontal stripe. Sits above section headings to give each
 * section a quiet, strong introduction. Use .eyebrow-muted when
 * the accent colour is too loud for the surrounding context.
 *
 *   <div class="eyebrow">Over ons water</div>
 *   <h2>Een kristalhelder forellenreservoir in het hart van Drenthe</h2>
 *
 * See docs/design_system.md §"Koppen & Sectielabels".
 */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
}

.eyebrow-muted {
  color: var(--muted);
}

.eyebrow-muted::before {
  background: var(--muted);
}