/* The tarot pages' own styles (products/astro/site/tarot.ts: every tarot page links this after /site.css): the card's face (its picture
   from the 1909 deck, its room kept by the picture's width and height), the lists of cards, the yes or no form. Kept out of /site.css,
   which every page loads. */
.tarot-card { width: 150px; margin: 0 0 1.25rem; }
.tarot-card img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 30px -12px rgba(0, 0, 0, .45); }
.tarot-card.is-reversed img { transform: rotate(180deg); }
@media (min-width: 720px) { .tarot-card { width: 180px; } }
.tarot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.tarot-list a { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 720px) { .tarot-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarot-ask { display: grid; gap: .5rem; margin: 1rem 0 1.5rem; max-width: 34rem; }
.tarot-ask input, .tarot-ask select { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: transparent; color: inherit; }
.tarot-answer { margin: 0 0 1.5rem; }
.tarot-spread { display: grid; gap: 1.5rem; margin: 1rem 0; }
.tarot-spread-card h3 { margin-top: 0; }
@media (min-width: 720px) { .tarot-spread { grid-template-columns: repeat(3, minmax(0, 1fr)); } }