/* FCS Magazine — Unified section eyebrow component.
 * V7's strongest signature (per Doc #163 §1). Used everywhere a section
 * announces its category: stats, quote, issue, blog, media-kit, post titles,
 * page heroes, tag headers.
 *
 * Markup:
 *   <div class="section-eyebrow">
 *     <span class="section-eyebrow-mark">FCS</span>
 *     <span class="section-eyebrow-divider"></span>
 *     <span class="section-eyebrow-text">{{label}}</span>
 *   </div>
 *
 * Use the partial: {{> "eyebrow" text="By the Numbers"}}
 */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  color: var(--copper);
}

.section-eyebrow-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0;
  padding: 0.4em 0.55em 0.35em;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.section-eyebrow-divider {
  width: 1px;
  height: 0.85rem;
  background: currentColor;
  opacity: 0.4;
}

.section-eyebrow-text {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Per-ground color overrides — override `color` on .section-eyebrow,
 * the children inherit via currentColor. */
.quote-section .section-eyebrow { color: var(--sage-deep); }