/*
 * 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);
}

/* Eyebrow-block heading — the large Playfair Display title that sits
 * directly under an .eyebrow label in every public section. Two sizes
 * for the two visual rhythms the design system defines. Previously
 * lived in pages/design_system.css and was implicitly shared with
 * every public page through Propshaft's full-directory include; lifted
 * here so every page depends on it explicitly. */
.eyebrow-block-title {
  font-family: "Playfair Display", serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-top: .625rem;
}

.eyebrow-block-title-sm {
  font-family: "Playfair Display", serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-top: .625rem;
}

/* Pattern-link — the small amber uppercase "→" text-link that caps
 * each card or section CTA. Lives here alongside the eyebrow pattern
 * because the two always travel together in practice. */
.pattern-link {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}