/* ════════════════════════════════════════════════════════
   COMPONENT — EYEBROW
   The small typographic mark that sits above a headline,
   acting as a section label or section number. Mono caps,
   tracked-out, marginalia gray — the same one that already
   appears as .breadcrumb / .note-label / .book-list-eyebrow
   in the wild, now formalized as a single component the
   rest of the system reaches into.

   Variants (combine with .eyebrow):
   • .eyebrow--accent — accent-red color, replaces gray
   • .eyebrow--center — center-aligned (used for centered hero)
   • .eyebrow--with-rule — adds the hairline-rule prefix the
                            book-list eyebrow has
   ════════════════════════════════════════════════════════ */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-75);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marginalia);
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  gap: 14px;
  line-height: 1.4;
  margin: 0;
}

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

.eyebrow--center {
  display: flex;
  justify-content: center;
}

.eyebrow--with-rule::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
  flex: 0 0 auto;
}

/* Smaller variant — used when the eyebrow sits inside a tighter
   block (e.g., dropdown header, card label) */
.eyebrow--sm {
  font-size: var(--t-69);
  letter-spacing: 0.20em;
  gap: 10px;
}
.eyebrow--sm.eyebrow--with-rule::before { width: 18px; }

/* Larger variant — only the homepage hero uses this. Sized so
   it reads as a deliberate section marker, not a caption. */
.eyebrow--lg {
  font-size: var(--t-87);
  letter-spacing: 0.24em;
  gap: 18px;
}
.eyebrow--lg.eyebrow--with-rule::before { width: 36px; }