/* =============================================================================
   Component — Headlines (the split-headline pattern)
   -----------------------------------------------------------------------------
   The brand's primary headline pattern is a SPLIT: an upright lead, an
   italic-brass middle (the emphasis), and an optional upright tail. The
   italic word is the brand's signature design move (see VOICE.md for tone
   and usage rules).

   Examples:
     "Wear where you're <em>from.</em>"
     "Built to <em>swim in.</em>"
     "Eight <em>cities</em> by 2027."
     "A different partner for every <em>city.</em>"

   Markup:
     <h1 class="display-headline">
       Wear where you're <em class="brass">from.</em>
     </h1>

   Sizes:
     .display-headline       hero size (clamp 56–116px) — once per page max
     .display-headline.lg    section size (clamp 44–80px)
     .display-headline.md    sub-section size (40–56px)
     .display-headline.sm    card / box size (28–40px)

   Always uses --serif font (Fraunces). The italic word inherits weight
   from its parent, so don't bold it. The brand voice puts italics on
   PUNCTUATION-LIKE words — short emphatic words, often verbs or single
   nouns — never long phrases.
============================================================================= */

.display-headline {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: var(--display-track);
  line-height: 0.92;
  margin: 0;
  color: var(--navy);
  font-size: clamp(56px, 8.5vw, 116px);
}
.display-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

.display-headline.lg { font-size: clamp(44px, 6vw, 80px); line-height: 0.95; }
.display-headline.md { font-size: clamp(36px, 4.4vw, 56px); line-height: 0.98; }
.display-headline.sm { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; }

/* Hero — for use directly on hero sections (large + with eyebrow above) */

.hero-copy h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 8.5vw, 116px);
  letter-spacing: var(--display-track);
  line-height: 0.92;
  margin: 8px 0 0;
  color: var(--navy);
}
.hero-copy h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}