/* FTJ shared heading treatment. Keep this after page styles in RootLayout. */
:root {
  /* Subtle: the spacing selected from the typography comparison. */
  --ftj-heading-tracking: .005em;
}

/* Semantic headings cover new pages and headings entered through Sanity.
   Display selectors also cover existing titles rendered as links or strong.
   The body prefix keeps this shared rule above page-specific tracking. */
body :is(
  h1, h2, h3, h4, h5, h6, .ftj-heading,
  .masthead, .article-logo, .podium-brand, .footer-logo, .podium-footer > a,
  .hero-scribble, .story-card-copy > strong, .watch-overlay strong,
  .competition-intro > p, .competition-card > strong, .shop-stamp,
  .story-neighbor > strong, .archive-visual-type > span
) {
  letter-spacing: var(--ftj-heading-tracking);
  -webkit-text-stroke: 0;
  paint-order: normal;
}

/* The homepage masthead's yellow full stop keeps its original black border. */
body .masthead .masthead-period {
  -webkit-text-stroke: 2px var(--black);
  paint-order: normal;
}

/* Other yellow brand punctuation stays a solid fill, without an outline. */
body .article-logo > span,
body .podium-brand > span,
body .archive-heading h1 > span {
  -webkit-text-stroke: 0;
  paint-order: normal;
}

/* Small metadata nested in headings keeps its own normal spacing. */
body .watch-section h2 > em,
body .podium-division h2 > span {
  letter-spacing: normal;
  -webkit-text-stroke: 0;
}