/* Semantic type scale — PP Eiko (serif) for h1–h3, Avenir Next (sans) for h4–h6 and body.
   h1–h6 are styled directly so correct semantic HTML needs no extra class.
   Utility aliases (.heading-h1 etc.) are available where visual size must deviate from
   semantic level (pull-quotes, wordmarks, editorial spans).
   PP Eiko Light Italic fires automatically when font-style: italic is set on a heading
   using --font-heading. Mobile-first: base = small screen, @media raises sizes. */

/* ---- h1 / .heading-h1 — hero, cover, single per page ---- */
h1,
.heading-h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal); /* PPEiko Regular */
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--tracking-tight);
}

/* ---- h2 / .heading-h2 — primary section headings ---- */
h2,
.heading-h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal); /* PPEiko Regular */
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-tight);
}

/* ---- h3 / .heading-h3 — subsection headings ---- */
h3,
.heading-h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal); /* PPEiko Regular */
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

/* ---- h4 / .heading-h4 — functional headings, card titles ---- */
h4,
.heading-h4 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-demibold); /* AvenirNext DemiBold */
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

/* ---- h5 / .heading-h5 — small functional headings, sidebar labels ---- */
h5,
.heading-h5 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-demibold); /* AvenirNext DemiBold */
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

/* ---- h6 / .heading-h6 — label-weight headings, uppercase micro-titles ---- */
h6,
.heading-h6 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-demibold); /* AvenirNext DemiBold */
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Body ---- */
.body-large {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.body-regular {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-body-regular);
  line-height: var(--line-height-body-regular);
}

.body-small {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

/* ---- Labels ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium); /* AvenirNext Medium */
  font-size: var(--font-size-2);          /* 12px */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent); /* brand sand — home/project hero panels override this to sit on photography, see .panel__eyebrow */
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-1); /* 11px */
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* ---- Caption, large — same role as .caption (legal fine-print, utility
   rows) but for places .caption reads too small against surrounding body
   text ---- */
.caption-large {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-3); /* 13px */
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* ---- Responsive scale ---- */
@media (min-width: 768px) {
  h1, .heading-h1 { font-size: var(--font-size-h1-md); }
  h2, .heading-h2 { font-size: var(--font-size-h2-md); }
  h3, .heading-h3 { font-size: var(--font-size-h3-md); }
  h4, .heading-h4 { font-size: var(--font-size-h4-md); }
  .body-large      { font-size: var(--font-size-7); } /* 24px */
}

@media (min-width: 1280px) {
  h1, .heading-h1 { font-size: var(--font-size-h1-lg); }
  h2, .heading-h2 { font-size: var(--font-size-h2-lg); }
}

/* ---- Prose helper for long-form content (journal, service copy) ---- */
.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-12);
}

.prose h3 {
  margin-top: var(--space-8);
}