/* ============================================================
   display-headline.css — C5 display variant for h1 (Forge / S022 / 2026-06-05)

   Uses the Fraunces variable font (opsz 9..144, wght 300..900)
   already loaded by every page. The display variant engages the
   LARGE optical size (opsz=144), a heavier weight (wght=500-600),
   and slightly tighter letter-spacing — the editorial / "display"
   cut that Fraunces was designed for.

   Apply via the .display-headline class on h1 (or h2). Inherits
   the family from --serif. Falls back to the body weight (400)
   if the variable font is unavailable.

   Substrate-honest: we're not adding a second font request —
   the variable font is already cached. We're just consuming
   the variation axes the page already paid for.
   ============================================================ */

.display-headline {
  font-family: var(--serif, "Fraunces", "Iowan Old Style", Georgia, serif);
  font-variation-settings: "opsz" 144, "wght" 550, "SOFT" 30;
  font-weight: 550;
  font-style: italic;
  letter-spacing: -0.018em;
  line-height: 1.05;
  /* Subtle contrast lift vs body (which sits at wght 400, opsz 14). */
}

/* The hero h1 on V-085 pages defaults to italic at opsz ~24.
   This opt-in upgrades it to the display cut. */
.hero > h1.display-headline,
section.hero h1.display-headline,
h1.display-headline {
  font-size: clamp(2.6rem, 5.2vw, 3.8rem);
}

/* Drop cap variant — first letter of the first paragraph after
   a display headline gets a Fraunces-display treatment at opsz 144. */
.display-headline + p::first-letter,
.display-headline ~ p::first-letter {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: 4.2rem;
  line-height: 0.9;
  float: left;
  padding: 0.2rem 0.6rem 0 0;
  color: var(--accent, #b04a2f);
  font-weight: 500;
}

/* Fallback: if Fraunces variable font is missing the opsz/wght
   axes (older static build), the class still works because we
   set font-weight and font-style as primary properties. */
@supports not (font-variation-settings: normal) {
  .display-headline {
    font-weight: 600;
    font-style: italic;
  }
}