/* ============================================================
   Gold sheen — animates the metallic-gold treatment that lives
   on the № 02 in the homepage title across every <em> in major
   titles site-wide.

   Targets only TITLE-level <em>: page headers, hero, section
   heads. Body-copy filament <em> stays plain (a moving sheen on
   small inline text reads as broken).

   The verdigris override on subpages targets nth-of-type(2) of
   any title em — so the FIRST em in any heading gets gold here,
   and the second can stay verdigris. We deliberately don't fight
   that with !important.
   ============================================================ */

.page-header h1 em:nth-of-type(1),
.page-header h1 em:only-of-type,
.m-page-header h1 em:nth-of-type(1),
.m-page-header h1 em:only-of-type,
.hero h1 em:nth-of-type(1),
.hero h1 em:only-of-type,
.hero-h1 em:nth-of-type(1),
.hero-h1 em:only-of-type,
section h2 em:nth-of-type(1),
section h2 em:only-of-type,
.section-head h2 em:nth-of-type(1),
.section-head h2 em:only-of-type,
.makecase h2 em:nth-of-type(1),
.makecase h2 em:only-of-type,
.manifesto h1 em,
.manifesto-h1 em,
.cfp-banner .headline em {
  font-style: italic;
  /* metallic gold — readable range on cream paper */
  background: linear-gradient(135deg,
    #6B4F1E 0%,
    #8B6914 18%,
    #B68A3E 38%,
    #D4A53A 50%,
    #B68A3E 62%,
    #8B6914 82%,
    #6B4F1E 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.4px rgba(107,79,30,0.55);
  filter: drop-shadow(0 0 6px rgba(182,138,62,0.18));
  animation: __title-em-sheen 7s ease-in-out infinite;
}

@keyframes __title-em-sheen {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}

/* Respect the second-em verdigris rhythm: leave second-em alone
   so it stays var(--accent) where the page sets it. We just need
   to make sure our gold doesn't bleed into siblings. */
@media (prefers-reduced-motion: reduce) {
  .page-header h1 em,
  .m-page-header h1 em,
  .hero h1 em,
  .hero-h1 em,
  section h2 em,
  .section-head h2 em,
  .manifesto h1 em,
  .manifesto-h1 em,
  .cfp-banner .headline em {
    animation: none;
    background-position: 50% 0;
  }
}