/* Mystical Marvels From Within — tiered heading shadows.
   Gold display letterforms on dark surfaces get the deepest purple depth.
   Headings on ivory keep their readable letter color and use a softer purple
   version of the same treatment. Body text intentionally receives no shadow.
   CONTRAST RULE (Nov 3, 2026): on light backgrounds, heading/label letterforms
   are deep purple (#2a1a4e) or darker — never pale gold or parchment. Gold
   letterforms live on dark surfaces only (large display text there meets
   WCAG AA large-text contrast). Shadows are decoration; letters carry contrast.
   Enforced by tests/validate_static.mjs ("contrast:" checks). */
:root {
  --mm-heading-shadow-title: 0.055em 0.075em 0 rgba(42, 26, 78, 0.28), 0.12em 0.18em 0.45em rgba(42, 26, 78, 0.16);
  --mm-heading-shadow-section: 0.045em 0.06em 0 rgba(42, 26, 78, 0.22), 0.09em 0.13em 0.32em rgba(42, 26, 78, 0.12);
  --mm-heading-shadow-subhead: 0.035em 0.045em 0 rgba(42, 26, 78, 0.16), 0.06em 0.09em 0.22em rgba(42, 26, 78, 0.08);
  --mm-heading-shadow-title-dark: 0.055em 0.075em 0 rgba(7, 3, 20, 0.68), 0.12em 0.18em 0.45em rgba(7, 3, 20, 0.52), 0 0 0.65em rgba(42, 26, 78, 0.42);
  --mm-heading-shadow-section-dark: 0.045em 0.06em 0 rgba(7, 3, 20, 0.58), 0.09em 0.13em 0.32em rgba(7, 3, 20, 0.38);
  --mm-heading-shadow-subhead-dark: 0.035em 0.045em 0 rgba(7, 3, 20, 0.46), 0.06em 0.09em 0.22em rgba(7, 3, 20, 0.26);
  --mm-heading-gold-dark: #e8c86e;
}

/* Tier 1 — site title, wordmark, and page titles. */
h1,
.page-title,
.nav-logo,
.topband .brand {
  text-shadow: var(--mm-heading-shadow-title);
}

/* Tier 2 — section titles. */
h2,
.section-title,
.section-heading {
  text-shadow: var(--mm-heading-shadow-section);
}

/* Tier 3 — subheadings. */
h3,
.subhead,
.step-heading,
.modal-title {
  text-shadow: var(--mm-heading-shadow-subhead);
}

/* Dark-surface Tier 1: gold letterforms over midnight and deep purple. */
nav .nav-logo,
.topband .brand,
.hero h1,
.page-hero h1,
.page-title {
  color: var(--mm-heading-gold-dark);
  text-shadow: var(--mm-heading-shadow-title-dark);
}

/* Dark-surface Tier 2. */
#readings .section-title,
.legal-wrap h2,
footer h2,
.modal h2 {
  text-shadow: var(--mm-heading-shadow-section-dark);
}

/* Dark-surface Tier 3. */
.legal-wrap h3,
footer h3,
.modal h3,
.modal .modal-title {
  text-shadow: var(--mm-heading-shadow-subhead-dark);
}