/* Public-only readability and honest unavailable-art states. Masters unchanged. */
.tarot-page {
  --font-display: "Lunaire Share Display", Georgia, serif;
  --font-body: "Lunaire Share Mono", monospace;
}
.tarot-page [hidden] { display: none !important; }
.tarot-page [data-card-turn][aria-disabled="true"] { cursor: progress; }
.tarot-page .tarot-face--revealed { transform-style: preserve-3d; }
.tarot-edition { font: 0.75rem/1.6 var(--font-body); color: var(--midnight-ink); margin: 20px 0 0; }
.tarot-page .focus-divider { height: 46px; margin-top: 22px; }
.tarot-page .tarot-stage { margin-top: 42px; }
.tarot-page .stage-heading h2 { font-size: clamp(2rem, 3.5vw, 2.7rem); line-height: 1.08; }
.tarot-page .stage-heading > p:last-child { max-width: 600px; margin-top: 14px; }
.tarot-page .spread-grid { margin-top: 32px; }
.human-check { max-width: 360px; margin: 24px auto; font-size: 0.8rem; line-height: 1.6; }
#turnstileWidget { min-height: 70px; }
.human-check button { margin-top: 12px; min-height: 44px; }
.tarot-noscript { max-width: 650px; margin: 40px auto; padding: 24px; line-height: 1.7; }
.tarot-page .focus-helper, .tarot-page .private-prompt,
.tarot-page .draw-method p, .tarot-page .load-note,
.tarot-page .stage-heading > p:last-child { font-size: 0.85rem; color: var(--midnight-ink); }
.tarot-page .draw-method summary, .tarot-page .position-heading p { font-size: 0.75rem; color: var(--midnight-ink); }
/* The base focus treatment uses the Notebook’s exact watercolor asset.
   Keep it unobscured: a Tarot-only tint would flatten the shared marbling. */
@media (hover: hover) {
  .tarot-page .focus-option:hover input:checked:not(:disabled) + .focus-option__surface { filter: brightness(1.02); }
}
.tarot-page .tarot-card-viewport { aspect-ratio: 5 / 7; min-height: 0; }
/* Only the face typography fits to its fixed frame. Expanded prose below
   remains full-size and can grow freely with the reader’s text settings. */
.tarot-page .meaning-copy { font-size: calc(1rem * var(--meaning-scale, 1)); line-height: 1.28; color: var(--midnight-ink); }
.tarot-page .meaning-label { font-size: max(8px, calc(0.6rem * var(--meaning-scale, 1))); line-height: 1.6; }
.tarot-page .meaning-list > span + span { margin-top: 6px; padding-top: 6px; }
.tarot-page .meaning-inner { inset: 16px; padding: 12px; }
.tarot-page .meaning-inner > * { flex-shrink: 0; }
.tarot-page .meaning-card-name { font-size: max(20px, calc(1.6rem * var(--meaning-scale, 1))); line-height: 1.05; }
.tarot-page .meaning-orientation { font-size: max(9px, calc(0.65rem * var(--meaning-scale, 1))); color: var(--midnight-ink); }
.tarot-page .meaning-mark-wrap { min-height: 24px; margin-top: 6px; }
.tarot-page .meaning-mark-wrap img { aspect-ratio: 288 / 278; }
.tarot-page .tarot-face--cover, .tarot-page .tarot-view-face,
.tarot-page .tarot-card-control:not(:disabled):hover .tarot-face--cover,
.tarot-page .tarot-card-control:not(:disabled):hover .tarot-view-face { box-shadow: 0 8px 22px rgba(31, 42, 68, 0.1); }
.card-full-meaning { width: 100%; max-width: 318px; text-align: left; margin-top: 18px; }
.card-full-meaning summary { cursor: pointer; font-size: 0.75rem; line-height: 1.65; min-height: 44px; padding: 10px 0; }
.card-full-meaning p { font: 1.15rem/1.55 var(--font-display); margin: 12px 0; }
.card-full-meaning summary:focus-visible { outline: 2px solid var(--nav-indigo); outline-offset: 4px; }
.image-unavailable img { visibility: hidden; }
.image-unavailable::after { content: "Artwork didn’t load. Its description and meaning are below."; position: absolute; inset: 30%; display: grid; place-content: center; color: var(--midnight-ink); font: 1rem/1.5 var(--font-display); }
.tarot-page .synthesis-arc, .tarot-page .synthesis-focus__body,
.tarot-page .synthesis-focus__conclusion p { font-size: 1.3rem; line-height: 1.6; }
.tarot-page .reading-progress { max-width: 680px; margin: clamp(80px, 11vw, 130px) auto 0; padding: 28px 24px; border-top: 1px solid rgba(183, 146, 95, 0.5); border-bottom: 1px solid rgba(183, 146, 95, 0.5); text-align: center; }
.tarot-page .reading-progress h2 { margin: 18px 0 14px; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; }
.tarot-page .reading-progress > p:last-child { max-width: 540px; margin: 0 auto; color: var(--midnight-ink); font-size: 0.85rem; line-height: 1.7; }
.tarot-page .site-footer p { color: var(--midnight-ink); font-size: 0.75rem; line-height: 1.7; }
@media (min-width: 901px) and (max-width: 1000px) {
  .tarot-page .meaning-inner { inset: 12px; padding: 9px; }
  .tarot-page .meaning-list > span + span { margin-top: 4px; padding-top: 4px; }
  .tarot-page .meaning-mark-wrap { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No 3D compositing is needed for the non-animated face swap. Keeping a
     preserve-3d chain with hidden backfaces can leave Chrome painting nothing. */
  .tarot-page .tarot-reveal-turner, .tarot-page .tarot-view-turner,
  .tarot-page .tarot-face--revealed { transform-style: flat; }
  .tarot-page .tarot-face, .tarot-page .tarot-view-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
}
@media (max-width: 360px) {
  .tarot-intro, .reading-setup, .tarot-stage, .reading-progress, .taken-together { width: calc(100% - 32px); }
  .tarot-page .meaning-inner { inset: 12px; padding: 12px; }
}