:root {
  --ink: #f3ecd9;
  --muted: #bdb4ca;
  --night: #090715;
  --night-2: #100b23;
  --plum: #26102d;
  --wine: #4b193b;
  --gold: #d7b86a;
  --gold-pale: #f3dda0;
  --line: rgba(215, 184, 106, .26);
  --shadow: 0 28px 70px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(93, 55, 122, .28), transparent 38rem),
    linear-gradient(160deg, #080612 0%, #0d0819 46%, #160b20 100%);
  font: 400 1rem/1.65 Inter, system-ui, sans-serif;
  min-height: 100vh;
}

button, input { font: inherit; }
button { color: inherit; }
.stars {
  position: fixed; inset: 0; pointer-events: none; opacity: .45;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.65) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(215,184,106,.55) 0 1px, transparent 1.3px);
  background-size: 79px 79px, 137px 137px;
  background-position: 11px 19px, 53px 61px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.site-header {
  position: relative; z-index: 2;
  max-width: 1320px; margin: 0 auto; padding: 1.25rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .75rem; font: 600 1.2rem/1 Cormorant Garamond, serif; letter-spacing: .08em; text-transform: uppercase; }
.brand i { color: var(--gold); font-style: normal; }
.brand-moon { color: var(--gold-pale); font-size: 2rem; filter: drop-shadow(0 0 12px rgba(215,184,106,.35)); }
.quiet-button, .listen-button, .draw-again {
  border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink);
  border-radius: 999px; padding: .65rem 1rem; cursor: pointer;
}
.quiet-button:hover, .listen-button:hover, .draw-again:hover { border-color: var(--gold); background: rgba(215,184,106,.08); }

main { position: relative; z-index: 1; }
.reading-room { max-width: 1320px; margin: 0 auto; padding: 4.5rem 2rem 5rem; }
.intro-copy { max-width: 760px; text-align: center; margin: 0 auto 2rem; }
.eyebrow { margin: 0 0 .55rem; color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: .75rem; font-weight: 600; }
h1, h2, h3 { font-family: Cormorant Garamond, Georgia, serif; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: .95; margin: 0 0 1.25rem; font-weight: 600; letter-spacing: -.025em; }
.intro-copy > p:last-child { color: var(--muted); max-width: 650px; margin: 0 auto; font-size: 1.05rem; }

.question-form { max-width: 850px; margin: 2.25rem auto 4rem; }
.question-form label { display: block; margin: 0 0 .65rem; font: 600 1.05rem Cormorant Garamond, serif; letter-spacing: .04em; }
.question-form label span { color: var(--muted); font: 400 .78rem Inter, sans-serif; }
.question-row { display: grid; grid-template-columns: minmax(0,1fr) auto; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 14px; padding: .35rem; box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.question-row:focus-within { border-color: rgba(215,184,106,.7); box-shadow: 0 0 0 3px rgba(215,184,106,.09); }
.question-row input { width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; padding: .85rem 1rem; font-size: 1rem; }
.question-row input::placeholder { color: #8d8599; }
.draw-button { display: flex; align-items: center; gap: .75rem; border: 1px solid #e5ca84; background: linear-gradient(135deg, #d9ba68, #9b6e2c); color: #120b17; border-radius: 10px; padding: .75rem 1.15rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.4); }
.draw-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.draw-button:disabled { opacity: .7; cursor: wait; }
.form-note { color: #8d8599; font-size: .75rem; margin: .55rem 0 0 .2rem; }

.spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); align-items: start; }
.card-slot { min-width: 0; text-align: center; }
.position-label { margin-bottom: 1rem; }
.position-label span { display: block; color: var(--gold); font-size: .7rem; letter-spacing: .2em; }
.position-label h2 { margin: .1rem 0 0; font-size: 1.7rem; line-height: 1; }
.position-label p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }

.tarot-card { width: min(100%, 294px); aspect-ratio: 2 / 3; position: relative; border: 0; background: none; padding: 0; cursor: default; perspective: 1200px; }
.card-back, .card-face { position: absolute; inset: 0; border-radius: 13px; backface-visibility: hidden; transition: transform .85s cubic-bezier(.2,.78,.2,1); box-shadow: var(--shadow); overflow: hidden; }
.card-back {
  border: 1px solid var(--gold);
  background: #090714 url("card-back.webp") center / cover no-repeat;
  transform: rotateY(0deg);
}
.card-back > * { display: none; }
.card-face { background: #170f20; transform: rotateY(180deg); border: 1px solid rgba(215,184,106,.7); }
.card-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-face .card-name { position: absolute; inset: auto .55rem .55rem; padding: .65rem .5rem; border: 1px solid rgba(215,184,106,.55); background: rgba(8,6,15,.9); color: var(--gold-pale); font: 600 1rem Cormorant Garamond, serif; letter-spacing: .05em; }
.tarot-card.is-revealed .card-back { transform: rotateY(-180deg); }
.tarot-card.is-revealed .card-face { transform: rotateY(0deg); }
.tarot-card.is-reversed .card-face img { transform: rotate(180deg); }
.tarot-card.image-missing .card-face img { display: none; }
.tarot-card.image-missing .card-face { background: radial-gradient(circle at 50% 36%, #473053, #140c1d 62%); }
.tarot-card.image-missing .card-face::before { content: "☾"; position: absolute; inset: 28% 0 auto; color: var(--gold); font: 5rem/1 Cormorant Garamond, serif; }

.card-reading { text-align: left; margin: 1.25rem auto 0; max-width: 360px; border-top: 1px solid var(--line); padding-top: 1rem; animation: readingIn .7s both; }
.orientation { color: var(--gold); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.card-reading h3 { font-size: 1.45rem; line-height: 1.1; margin: .35rem 0 .45rem; }
.keywords { color: var(--gold-pale); font-size: .78rem; margin: 0 0 .75rem; }
.card-reading p:last-child { color: var(--muted); margin: 0; font-size: .9rem; }

.synthesis { max-width: 960px; margin: 5rem auto 0; padding: clamp(1.5rem, 4vw, 3.5rem); background: linear-gradient(135deg, rgba(65,29,67,.58), rgba(13,9,25,.92)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); animation: readingIn .7s both; }
.synthesis-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.synthesis-heading h2 { margin: 0; font-size: 2.4rem; }
.listen-button { display: flex; gap: .55rem; align-items: center; flex: 0 0 auto; }
.asked-question { color: var(--gold-pale); font: italic 1.15rem Cormorant Garamond, serif; border-left: 2px solid var(--gold); padding-left: 1rem; }
#synthesisText p { color: #d5cede; font-size: 1rem; }
#synthesisText p:first-child::first-letter { float: left; font: 600 4rem/.75 Cormorant Garamond, serif; color: var(--gold); padding: .2rem .5rem 0 0; }
.reflection { margin-top: 1.75rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); background: rgba(4,3,9,.3); border-radius: 12px; }
.reflection span { color: var(--gold); text-transform: uppercase; letter-spacing: .17em; font-size: .68rem; font-weight: 600; }
.reflection p { margin: .45rem 0 0; font: 600 1.35rem/1.25 Cormorant Garamond, serif; }
.draw-again { margin-top: 1.25rem; }

.tarot-guide { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(4,3,10,.5); }
.guide-inner { max-width: 1180px; margin: auto; padding: 4.5rem 2rem; }
.guide-heading { text-align: center; }
.guide-heading h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin: 0 0 2rem; }
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.guide-grid article { padding: 1.5rem; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 12px; }
.guide-grid strong { color: var(--gold); font: 600 2.8rem/1 Cormorant Garamond, serif; }
.guide-grid h3 { font-size: 1.35rem; margin: .5rem 0; }
.guide-grid p, .history-note { color: var(--muted); font-size: .9rem; }
.suits { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem 2rem; margin: 2rem 0; }
.suits > div { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.suit-mark { color: var(--gold); font-size: 1.8rem; width: 2rem; text-align: center; }
.suits p { color: var(--muted); }
.suits b { color: var(--ink); }
.history-note { max-width: 900px; }
footer { position: relative; z-index: 1; display: flex; justify-content: center; gap: .8rem; align-items: center; padding: 2rem; color: #8d8599; font: 600 .78rem Cormorant Garamond, serif; letter-spacing: .14em; text-transform: uppercase; }
footer span { color: var(--gold); }

@keyframes readingIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 880px) {
  .spread { grid-template-columns: 1fr; gap: 3.5rem; }
  .card-slot { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0,1fr); grid-template-areas: "label reading" "card reading"; justify-content: center; gap: 0 1.5rem; text-align: left; }
  .position-label { grid-area: label; text-align: center; }
  .tarot-card { grid-area: card; justify-self: center; }
  .card-reading { grid-area: reading; align-self: center; margin: 0; }
  .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-header { padding: 1rem; }
  .brand { font-size: .95rem; }
  .brand-moon { font-size: 1.5rem; }
  .reading-room { padding: 3.25rem 1rem 4rem; }
  h1 { font-size: 3rem; }
  .question-row { grid-template-columns: 1fr; background: transparent; padding: 0; border: 0; box-shadow: none; gap: .65rem; }
  .question-row input { border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 10px; }
  .draw-button { justify-content: center; min-height: 48px; }
  .card-slot { display: block; text-align: center; }
  .card-reading { margin: 1.25rem auto 0; text-align: left; }
  .synthesis { margin-top: 4rem; border-radius: 12px; }
  .synthesis-heading { align-items: flex-start; }
  .listen-button { padding: .6rem; }
  .listen-button span { display: none; }
  .suits { grid-template-columns: 1fr; }
  .guide-inner { padding: 3.5rem 1rem; }
}