/* Castellar is the title treatment for top-level pages: Journeys, Lifestyle,
   Artisans, etc. Keep Cormorant Garamond for journey names and other display copy.
   The title artwork contains genuine Castellar lettering; the accessible h1
   preserves the heading on devices without the installed font.
   Each future page supplies its own Castellar title artwork and width ratio. */
.page-title {
  font-family: Castellar, "Castellar MT", Georgia, serif;
  font-weight: 400;
}
.page-title__art {
  display: block;
  width: var(--page-title-art-width, 5.765625em);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Separate glyph windows add tracking without stretching the letterforms. */
.page-title--journeys { --page-title-image: url("./journeys-castellar-butter-clean.png"); }
.page-title__letters {
  display: inline-flex;
  gap: .115em;
  font-size: min(1em, calc((100vw - 48px) / 6.58));
  vertical-align: top;
}
.page-title__glyph {
  display: block;
  flex: none;
  width: calc(var(--glyph-width) * 1em / 128);
  height: .921875em;
  background: var(--mf-gold, #e7bf72);
  -webkit-mask-image: var(--page-title-image);
  mask-image: var(--page-title-image);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 5.765625em .921875em;
  mask-size: 5.765625em .921875em;
  -webkit-mask-position: calc(var(--glyph-start) * -1em / 128) 0;
  mask-position: calc(var(--glyph-start) * -1em / 128) 0;
}