/* ============================================================
   Rising Tide — About page header typography (shared)
   Matches about.html hero: DM Sans gold eyebrow + Cormorant
   headline with teal italic emphasis.
   Scope: add class rt-header-about-typography to the page-header
   section (or header). Use rt-header-about-typography--dark on
   dark-gradient heroes so headline ink flips to light.
   ============================================================ */

section.page-header.rt-header-about-typography .page-eyebrow,
section.page-header.rt-header-about-typography .page-header-eyebrow,
header.page-header.rt-header-about-typography .page-eyebrow,
header.page-header.rt-header-about-typography .page-header-eyebrow,
section.page-header.rt-header-about-typography .eyebrow.page-header-eyebrow,
header.page-header.rt-header-about-typography .eyebrow.page-header-eyebrow,
section.page-header.rt-header-about-typography span.page-header-eyebrow,
header.page-header.rt-header-about-typography span.page-header-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #d28936);
  margin-top: 0;
  margin-bottom: 1.75rem;
}

section.page-header.rt-header-about-typography .page-headline,
header.page-header.rt-header-about-typography .page-headline,
section.page-header.rt-header-about-typography .page-header-hed,
header.page-header.rt-header-about-typography .page-header-hed,
header.page-header.rt-header-about-typography .page-title {
  font-family: "Cormorant Garamond", "GFS Didot", serif;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--intro-text, #1f2724);
  letter-spacing: -0.02em;
}

section.page-header.rt-header-about-typography .page-headline,
header.page-header.rt-header-about-typography .page-headline {
  max-width: 18ch;
}

section.page-header.rt-header-about-typography .page-header-hed,
header.page-header.rt-header-about-typography .page-header-hed,
header.page-header.rt-header-about-typography .page-title {
  max-width: min(52rem, 100%);
}

section.page-header.rt-header-about-typography .page-headline em,
header.page-header.rt-header-about-typography .page-headline em,
section.page-header.rt-header-about-typography .page-header-hed em,
header.page-header.rt-header-about-typography .page-header-hed em,
header.page-header.rt-header-about-typography .page-title em {
  font-family: "Cormorant Garamond", "GFS Didot", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  color: var(--teal-vivid, #1b9baf);
  letter-spacing: -0.02em;
}

section.page-header.rt-header-about-typography .page-intro,
section.page-header.rt-header-about-typography .page-header-intro,
section.page-header.rt-header-about-typography .page-header-sub,
header.page-header.rt-header-about-typography .page-intro,
header.page-header.rt-header-about-typography .page-header-intro,
header.page-header.rt-header-about-typography .page-header-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(31, 39, 36, 0.68);
}

/* ---------- Dark hero (approach, join, acknowledgements, …) ---------- */

section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-headline,
section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-hed,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-headline,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-hed,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-title {
  color: rgba(255, 255, 255, 0.96);
}

section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-headline em,
section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-hed em,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-headline em,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-hed em,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-title em {
  color: var(--teal-vivid, #1b9baf);
}

section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-intro,
section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-intro,
section.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-sub,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-intro,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-intro,
header.page-header.rt-header-about-typography.rt-header-about-typography--dark .page-header-sub {
  color: rgba(255, 255, 255, 0.55);
}