/*
  section-heading.css
  「EYEBROW（両側罫線）+ 見出し + リード文」の共通パターン。
  About/Access等の左寄せ見出しは後続でmodifierを追加する。
*/

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.section-heading__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.32em;
  color: var(--color-eyebrow);
}

.section-heading__eyebrow::before,
.section-heading__eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: var(--color-border);
}

.section-heading__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.section-heading__lead {
  max-width: 30rem;
  color: var(--color-text-muted);
  line-height: 1.9;
  text-wrap: pretty;
}