/* The tarot section (A-0204): the same site, header, footer and buy flow, shifted toward night and
   candlelight. It re-points the site's tokens inside main.tarot only, so every shared component
   (buttons, the CTA, the stepper, the footer) takes the night palette, while the buy drawer and the
   quote form, which live outside main, keep the site's paper look. Display face: Fraunces, as
   everywhere. Ornaments are CSS and inline SVG, no images. */

body.tarot-page {
  background:
    radial-gradient(1px 1px at 12% 8%, rgba(241, 230, 204, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 4%, rgba(241, 230, 204, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 14%, rgba(242, 196, 107, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 18%, rgba(241, 230, 204, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 11%, rgba(241, 230, 204, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 4% 26%, rgba(242, 196, 107, 0.45) 50%, transparent 51%),
    radial-gradient(ellipse 70% 40% at 70% 0%, rgba(92, 70, 150, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(170, 96, 40, 0.16), transparent 70%),
    #14112a;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, scroll, scroll, scroll;
}

.tarot {
  --paper: #14112a;
  --paper-2: #1d1838;
  --paper-3: #2a2347;
  --ink: #f1e6cc;
  --ink-2: #d4c7a6;
  --ink-3: #a99c80;
  --line: rgba(216, 178, 94, 0.24);
  --card: #1d1838;
  --gold: #d8b25e;
  --candle: #f2c46b;
  --accent: #e0ad4f;
  --accent-press: #c8953a;
  --accent-ink: #1a1426;
  --good: #e9c77a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.5);
  color: var(--ink);
}
.tarot .brand-mark { background: var(--ink); }   /* the mark reversed out of the night */
.tarot .btn-primary { color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 220, 150, 0.35), 0 6px 22px rgba(224, 173, 79, 0.28); }
.tarot .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--ink); }
.tarot .field { background: var(--paper-2); color: var(--ink); }
.tarot a:not(.btn) { color: inherit; }

/* --- Hero ------------------------------------------------------------------------------ */
.t-hero { display: grid; gap: var(--s6); padding: var(--s5) 0 var(--s8); }
.t-hero-img {
  margin: 0; position: relative; overflow: hidden; background: #2a1a10;
  border-radius: 46% 46% var(--radius-m) var(--radius-m) / 24% 24% var(--radius-m) var(--radius-m);
  box-shadow: 0 0 0 1px rgba(216, 178, 94, 0.55), 0 0 0 6px var(--paper), 0 0 0 7px rgba(216, 178, 94, 0.3),
              0 24px 60px rgba(0, 0, 0, 0.55);
}
.t-hero-img img { width: 100%; height: auto; }
.t-kicker {
  margin: 0 0 var(--s3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.t-title { margin: 0 0 var(--s4); font-size: var(--text-2xl); color: var(--ink); text-wrap: balance; }
.t-pitch { margin: 0 0 var(--s5); font-size: var(--text-l); line-height: 1.5; color: var(--ink-2); }
.t-price { margin: 0 0 var(--s4); display: flex; align-items: baseline; gap: var(--s3); }
.t-price .display { font-size: var(--text-xl); color: var(--candle); }
.t-price-note { font-size: var(--text-s); color: var(--ink-3); }
.t-buy { min-height: 52px; display: flex; flex-direction: column; gap: var(--s2); }
.t-buy .buy-row { max-width: 26rem; }
.t-buy .volume-note { text-align: left; max-width: 26rem; }

/* The print-run note (A-0204): next to Buy, never hidden, in candlelight */
.t-ships {
  display: flex; gap: var(--s3); align-items: flex-start; max-width: 26rem;
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  border: 1px solid rgba(242, 196, 107, 0.4); border-radius: var(--radius-s);
  background: linear-gradient(135deg, rgba(242, 196, 107, 0.13), rgba(242, 196, 107, 0.04));
  font-size: var(--text-s); line-height: 1.45; color: var(--ink);
}
.t-moon { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: var(--candle); }

.t-thanks {
  max-width: 26rem; margin: 0 0 var(--s4); padding: var(--s4);
  border-radius: var(--radius-s); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--gold);
}
.t-thanks strong { display: block; font-family: var(--font-display); font-size: var(--text-l); color: var(--candle); margin-bottom: var(--s1); }
.t-thanks p { margin: var(--s1) 0 0; font-size: var(--text-s); color: var(--ink-2); }

.t-facts { margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 30rem; }
.t-facts div { display: flex; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-s); }
.t-facts dt { flex: 0 0 88px; color: var(--ink-3); }
.t-facts dd { margin: 0; color: var(--ink); }

/* --- Ornament between sections: a gold rule with a star or a moon ---------------------------- */
.t-orn { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; color: var(--gold); }
.t-orn span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 178, 94, 0.55), transparent); }
.t-orn svg { width: 18px; height: 18px; fill: currentColor; opacity: 0.9; }

/* --- Sections -------------------------------------------------------------------------- */
.t-block { padding: var(--s6) 0; }
.t-h2 { margin: 0 0 var(--s2); font-size: var(--text-xl); color: var(--ink); }
.t-sub { margin: 0 0 var(--s5); color: var(--ink-2); }
.t-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s4); }
.t-gallery figure { margin: 0; border-radius: var(--radius-s); overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(216, 178, 94, 0.25); }
.t-gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.t-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
.t-cards figure { margin: 0; }
.t-cards img { width: 100%; height: auto; border-radius: 7px; box-shadow: var(--shadow-card), 0 0 0 1px rgba(216, 178, 94, 0.2); }
.t-cards figcaption { margin-top: var(--s2); font-size: var(--text-s); line-height: 1.35; }
.t-cards figcaption b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.t-cards figcaption span { color: var(--ink-3); }
.t-all { display: inline-block; margin-top: var(--s6); font-weight: 600; color: var(--candle) !important;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242, 196, 107, 0.5); }

.tarot .site-foot .nl-label { color: var(--ink-2); }

/* --- The buy drawer (outside main, on the site's paper): the print-run note ---------------- */
body.tarot-page .buy-sheet .t-drawer-ships {
  display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s4); padding: var(--s3);
  border-radius: var(--radius-s); background: #f3e6c4; color: #3a2c10; font-size: var(--text-s); line-height: 1.4;
}
body.tarot-page .buy-sheet .t-drawer-ships svg { flex: none; width: 18px; height: 18px; fill: #8a6216; margin-top: 1px; }
body.tarot-page .buy-thumb.has-case { width: 112px; }

@media (min-width: 560px) {
  .t-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .t-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s12); padding: var(--s8) 0 var(--s10); }
  .t-title { font-size: var(--text-3xl); }
  .t-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .t-cards { grid-template-columns: repeat(6, 1fr); gap: var(--s6) var(--s5); }
  .t-block { padding: var(--s8) 0; }
}