/* Themes describe the subject, never a card's position or destination section. */
:root {
  --card-surface: var(--app-surface);
  --card-art: url("/artwork/celestial-atlas-wide-v2-1100.webp");
  --content-art-astrology: url("/artwork/botanical-plum-v1-1024.webp");
  --content-art-tarot: url("/artwork/brief-tarot-v1-1536.webp");
  --content-art-relationships: url("/artwork/brief-pair-v1-1536.webp");
  --content-art-moon: url("/artwork/brief-moon-v1-1536.webp");
}
[data-content-theme="personal"] { --card-surface: var(--app-surface); --card-art: url("/artwork/celestial-atlas-wide-v2-1100.webp"); }
[data-content-theme="astrology"] { --card-surface: var(--content-horoscope); --card-art: var(--content-art-astrology); }
[data-content-theme="tarot"] { --card-surface: var(--content-tarot); --card-art: var(--content-art-tarot); }
[data-content-theme="relationships"] { --card-surface: var(--content-pair); --card-art: var(--content-art-relationships); }
[data-content-theme="moon"] { --card-surface: var(--content-moon); --card-art: var(--content-art-moon); }
:is(.navigation-row, .person-row, .collection-entry, .lux-card, .micro-lesson, .spread-chapter, .section-cover)[data-content-theme] { background-color: var(--card-surface); }
:is(.collection-entry, .lux-card, .spread-chapter)[data-content-theme] { position: relative; isolation: isolate; overflow: hidden; }
:is(.collection-entry, .lux-card, .spread-chapter)[data-content-theme]::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--card-art) center / cover no-repeat; opacity: .12; mask-image: linear-gradient(90deg, transparent, #000); }
.spread-chapter[data-content-theme] { margin: 20px 0; padding: 24px; border: 1px solid #a6b9cc40; border-radius: var(--app-radius); }
@media (max-width: 360px) { .spread-chapter[data-content-theme] { padding: 18px; gap: 14px; } }