/* =========================================================
   THE ALCHEMY OF NOT — TAROT PAGE
   ========================================================= */

.tarot-page {
  min-height: 100vh;
}

.tarot-hero {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: 7vw;
  align-items: start;

  min-height: calc(100vh - 70px);

  padding: 74px 7vw 82px;

  background:
    radial-gradient(
      circle at 77% 24%,
      rgba(210, 170, 93, 0.07),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(3, 8, 11, 0.82),
      rgba(2, 7, 10, 0.95)
    );

  border-bottom: 1px solid rgba(210, 170, 93, 0.18);
}


/* ---------------------------------------------------------
   Decorative geometry
   --------------------------------------------------------- */

.tarot-geometry {
  position: absolute;

  left: -8vw;
  top: 4%;

  width: min(47vw, 700px);

  opacity: 0.38;

  pointer-events: none;
}

.tarot-geometry svg {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   Left text / interpretation column
   --------------------------------------------------------- */

.tarot-copy-column {
  position: relative;
  z-index: 2;

  max-width: 760px;
}

.tarot-title {
  margin: 8px 0 0;

  font-size: clamp(68px, 7vw, 110px);
  line-height: 0.88;

  color: #f2e5cf;
}

.tarot-ornament {
  justify-content: flex-start;

  margin: 28px 0;
}

.tarot-intro {
  max-width: 700px;

  color: #c3bbb0;

  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  line-height: 1.65;
}


/* Selected-card interpretation */

.selected-reading {
  max-width: 720px;

  margin-top: 42px;
  padding: 34px 36px 38px;

  border: 1px solid rgba(210, 170, 93, 0.28);

  background:
    linear-gradient(
      180deg,
      rgba(6, 12, 15, 0.76),
      rgba(3, 8, 11, 0.91)
    );

  box-shadow:
    inset 0 0 38px rgba(210, 170, 93, 0.025);
}

.selected-card-number {
  margin: 0 0 7px;

  color: var(--gold);

  font-size: 9px;
  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.selected-reading h2 {
  margin: 0;

  color: #e9dcc5;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(31px, 3vw, 45px);
  font-weight: 500;
  line-height: 1.08;
}

.selected-reading .gold-rule {
  margin-top: 17px;
}

.selected-reading p:last-child {
  margin: 0;

  color: #beb6aa;

  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  line-height: 1.7;
}


/* ---------------------------------------------------------
   Right card column
   --------------------------------------------------------- */

.tarot-card-column {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding-top: 4px;
}

.tarot-card-frame {
  position: relative;

  width: min(100%, 430px);
  aspect-ratio: 825 / 1425;

  padding: 8px;

  border: 1px solid rgba(210, 170, 93, 0.36);

  background: rgba(3, 8, 11, 0.82);

  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.42),
    0 0 35px rgba(210, 170, 93, 0.06);
}

.tarot-card-frame::before {
  content: "";

  position: absolute;

  inset: -28px;

  z-index: -1;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(210, 170, 93, 0.12),
    transparent 68%
  );

  filter: blur(17px);
}

.tarot-card-frame img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #020608;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.tarot-card-frame img.is-changing {
  opacity: 0.18;
  transform: scale(0.985);
}

.random-card-button {
  margin-top: 28px;

  min-width: 255px;

  background: rgba(3, 8, 11, 0.72);

  cursor: pointer;
}

.deck-note {
  max-width: 390px;

  margin: 15px 0 0;

  text-align: center;

  color: #89847d;

  font-size: 10px;
  letter-spacing: 0.06em;
}


/* ---------------------------------------------------------
   Philosophy section
   --------------------------------------------------------- */

.tarot-philosophy {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 8vw;
  align-items: start;

  background:
    radial-gradient(
      circle at 15% 45%,
      rgba(210, 170, 93, 0.06),
      transparent 25%
    ),
    rgba(3, 8, 11, 0.96);

  border-bottom: 1px solid rgba(210, 170, 93, 0.13);
}

.tarot-philosophy-copy {
  max-width: 760px;
}

.tarot-philosophy-copy p {
  margin-top: 0;

  color: #bdb5aa;

  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  line-height: 1.68;
}


/* ---------------------------------------------------------
   Return CTA
   --------------------------------------------------------- */

.tarot-return {
  text-align: center;

  background:
    linear-gradient(
      180deg,
      rgba(5, 11, 14, 0.95),
      rgba(3, 8, 11, 0.98)
    );

  border-bottom: 1px solid var(--line);
}

.tarot-return p {
  margin: 7px 0 3px;

  color: #b9b1a6;

  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {

  .tarot-hero {
    grid-template-columns: 1fr;

    gap: 52px;

    padding-top: 54px;
  }

  .tarot-copy-column {
    max-width: 820px;

    margin: auto;

    text-align: center;
  }

  .tarot-ornament {
    justify-content: center;
  }

  .tarot-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .selected-reading {
    margin-left: auto;
    margin-right: auto;

    text-align: left;
  }

  .tarot-card-column {
    max-width: 520px;

    margin: auto;
  }

  .tarot-geometry {
    left: 10vw;

    width: 80vw;
  }

  .tarot-philosophy {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .tarot-philosophy .section-title.left {
    text-align: center;
  }

  .tarot-philosophy .gold-rule {
    margin-left: auto;
    margin-right: auto;
  }

  .tarot-philosophy-copy {
    margin: auto;
  }
}


@media (max-width: 620px) {

  .tarot-hero {
    padding:
      44px
      5vw
      58px;
  }

  .tarot-title {
    font-size: 62px;
  }

  .tarot-intro {
    font-size: 18px;
  }

  .selected-reading {
    padding: 27px 22px 30px;
  }

  .selected-reading p:last-child {
    font-size: 18px;
  }

  .tarot-card-frame {
    width: min(92vw, 405px);
  }

  .random-card-button {
    min-width: 0;

    width: min(92vw, 405px);
  }

  .tarot-philosophy-copy p {
    font-size: 18px;
  }
}

/* VERSION 7 — compact full-width hero */
.tarot-page-hero{width:100%;text-align:center;padding:24px 6vw 26px;background:radial-gradient(ellipse at 50% 35%,rgba(210,170,93,.08),transparent 48%),linear-gradient(180deg,rgba(6,12,15,.92),rgba(3,8,11,.98));border-bottom:1px solid rgba(210,170,93,.18)}
.tarot-page-hero-copy{max-width:980px;margin:auto}
.tarot-page-hero h1{margin:1px 0 0;color:#f2e5cf;font-family:"Cormorant Garamond",serif;font-size:clamp(40px,4.5vw,66px);font-weight:500;line-height:1}
.tarot-page-hero .ornament{margin:11px auto 7px}
.tarot-page-hero-copy>p:last-child{max-width:720px;margin:6px auto 0;color:#bbb3a8;font-family:"Cormorant Garamond",serif;font-size:17px;line-height:1.4}
.tarot-reading-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:5.5vw;align-items:start;width:100%;padding:34px 7vw 68px;background:radial-gradient(circle at 78% 18%,rgba(210,170,93,.06),transparent 23%),rgba(2,7,10,.95);border-bottom:1px solid rgba(210,170,93,.18)}
.tarot-reading-area .tarot-copy-column{width:100%;max-width:760px}
.tarot-reading-area .selected-reading{margin-top:0}
.tarot-reading-area .tarot-card-column{padding-top:0}
.tarot-reading-area .tarot-card-frame{width:min(100%,365px)}
@media(max-width:1000px){.tarot-reading-area{grid-template-columns:minmax(0,1fr) minmax(285px,.65fr);gap:4vw;padding:30px 5vw 58px}.tarot-reading-area .tarot-copy-column{margin:0;text-align:left}.tarot-reading-area .selected-reading{margin:0}}
@media(max-width:760px){.tarot-reading-area{grid-template-columns:1fr;gap:36px}.tarot-reading-area .tarot-copy-column{max-width:720px;margin:auto}.tarot-reading-area .tarot-card-frame{width:min(88vw,390px)}}
@media(max-width:620px){.tarot-page-hero{padding:21px 5vw 23px}.tarot-page-hero-copy>p:last-child{font-size:16px}.tarot-reading-area{padding:27px 5vw 50px}}


/* =========================================================
   VERSION 8 — OBJECT OF BEING / DESCRIPTION / MEANING
   ========================================================= */

.object-of-being {
  margin: 9px 0 0;

  color: var(--gold);

  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;

  letter-spacing: 0.025em;
}

.reading-section {
  margin-top: 26px;
}

.reading-section:first-of-type {
  margin-top: 4px;
}

.reading-section h3 {
  margin: 0 0 8px;

  color: var(--gold-soft);

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;

  letter-spacing: 0.035em;
}

.reading-section p {
  margin: 0;

  color: #beb6aa;

  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  line-height: 1.7;
}

@media (max-width: 620px) {
  .object-of-being {
    font-size: 21px;
  }

  .reading-section h3 {
    font-size: 20px;
  }

  .reading-section p {
    font-size: 18px;
  }
}