/* J. Gomez Fine Art — Oracle Collection
   Shared design system across hub, deck, and admin pages */

/* P22 Cezanne — the brand wordmark font.
   Self-hosted from /assets/fonts/. .woff2 first (modern browsers),
   .woff fallback for older ones. font-display:swap so the page
   doesn't block on font load — Sacramento renders briefly first
   then swaps to Cezanne when ready. */
@font-face {
  font-family: 'P22 Cezanne';
  src: url('/assets/fonts/P22CezanneRegular.woff2') format('woff2'),
       url('/assets/fonts/P22CezanneRegular.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0a0807;
  --ink-soft: #14100c;
  --paper: #f4ead8;
  --gold: #c9a961;
  --gold-soft: #8a7340;
  --gold-glow: rgba(201, 169, 97, 0.15);
  --bone: #e8dcc4;
  --bone-mute: rgba(232, 220, 196, 0.7);
  --blood: #6b1a1a;
  --shadow-accent: #9a3a3a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: radial-gradient(ellipse at center top, #020100 0%, #010000 40%, #000000 100%);
  color: var(--bone);
  font-family: 'Cormorant Garamond', serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body {
  background: transparent;
  color: var(--bone);
  font-family: 'Cormorant Garamond', serif;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--bone); }

button { font-family: inherit; }

/* drifting film grain overlay (sits above content, semi-transparent) */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  pointer-events: none;
  opacity: 0.13;
  z-index: 1000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size: 220px 220px;
  animation: grain-shift 1.8s steps(6) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(4%, -5%); }
  50%  { transform: translate(-3%, -4%); }
  66%  { transform: translate(5%, 3%); }
  83%  { transform: translate(-4%, 5%); }
  100% { transform: translate(0, 0); }
}

/* SOFT BLURRED SPOTS — distant warm embers, witchier and dimmer */
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 28%, rgba(201, 169, 97, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 80% 20%, rgba(154, 58, 58, 0.08)  0%, transparent 34%),
    radial-gradient(circle at 65% 78%, rgba(201, 169, 97, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 28% 82%, rgba(154, 58, 58, 0.07)  0%, transparent 36%),
    radial-gradient(circle at 92% 52%, rgba(154, 58, 58, 0.06)  0%, transparent 32%);
  animation: spots-drift 60s ease-in-out infinite alternate;
  will-change: transform;
  filter: blur(60px);
}

@keyframes spots-drift {
  0%   { transform: translate(0, 0)        scale(1); }
  25%  { transform: translate(-3%, 4%)     scale(1.04); }
  50%  { transform: translate(4%, -3%)     scale(0.98); }
  75%  { transform: translate(-2%, -5%)    scale(1.05); }
  100% { transform: translate(3%, 5%)      scale(1.02); }
}

/* SPECKS & SCRATCHES — film-print imperfections, real <div> for reliable rendering.
   Injected by assets/atmosphere.js on every page that includes it. */
.atmosphere-flecks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    /* SCRATCHES — thin streaks at varied angles (vertical, diagonal, near-horizontal) */
    linear-gradient(91.2deg, transparent 7.8%,  rgba(232,220,196,0.06) 7.85%, transparent 7.92%),
    linear-gradient(43deg,   transparent 14.6%, rgba(232,220,196,0.05) 14.64%, transparent 14.71%),
    linear-gradient(132deg,  transparent 21.3%, rgba(232,220,196,0.07) 21.36%, transparent 21.43%),
    linear-gradient(2deg,    transparent 28.7%, rgba(154,58,58,0.05)   28.74%, transparent 28.81%),
    linear-gradient(67deg,   transparent 36.2%, rgba(232,220,196,0.06) 36.25%, transparent 36.32%),
    linear-gradient(118deg,  transparent 44.8%, rgba(232,220,196,0.05) 44.83%, transparent 44.9%),
    linear-gradient(89deg,   transparent 53.5%, rgba(232,220,196,0.07) 53.55%, transparent 53.62%),
    linear-gradient(159deg,  transparent 61.1%, rgba(154,58,58,0.05)   61.15%, transparent 61.22%),
    linear-gradient(33deg,   transparent 68.7%, rgba(232,220,196,0.05) 68.74%, transparent 68.81%),
    linear-gradient(105deg,  transparent 76.3%, rgba(232,220,196,0.06) 76.34%, transparent 76.41%),
    linear-gradient(8deg,    transparent 84.1%, rgba(232,220,196,0.05) 84.15%, transparent 84.22%),
    linear-gradient(172deg,  transparent 91.6%, rgba(232,220,196,0.06) 91.65%, transparent 91.72%),
    linear-gradient(56deg,   transparent 5%,    rgba(232,220,196,0.04) 5.04%, transparent 5.1%),
    linear-gradient(143deg,  transparent 12%,   rgba(232,220,196,0.05) 12.05%, transparent 12.11%),
    linear-gradient(78deg,   transparent 18%,   rgba(154,58,58,0.04)   18.04%, transparent 18.1%),
    linear-gradient(24deg,   transparent 25%,   rgba(232,220,196,0.05) 25.04%, transparent 25.1%),
    /* SPECKS — small dust particles, irregular sizes, scattered everywhere */
    radial-gradient(1.5px 1.5px at  4% 11%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 11% 26%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.8px 1.8px at  8% 41%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.2px 1.2px at 17% 53%, rgba(232,220,196,0.30), transparent 65%),
    radial-gradient(1px 1px     at 13% 68%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.6px 1.6px at  6% 82%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 19% 91%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(2px 2px     at 24% 17%, rgba(232,220,196,0.50), transparent 65%),
    radial-gradient(1px 1px     at 27% 38%, rgba(154,58,58,0.30),   transparent 65%),
    radial-gradient(1.4px 1.4px at 31% 59%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.1px 1.1px at 26% 74%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.7px 1.7px at 34% 88%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 38%  8%, rgba(232,220,196,0.30), transparent 65%),
    radial-gradient(1.4px 1.4px at 42% 27%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.2px 1.2px at 46% 49%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1px 1px     at 41% 64%, rgba(154,58,58,0.30),   transparent 65%),
    radial-gradient(1.6px 1.6px at 49% 78%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1.1px 1.1px at 44% 95%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.4px 1.4px at 53% 14%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1px 1px     at 57% 33%, rgba(232,220,196,0.30), transparent 65%),
    radial-gradient(1.8px 1.8px at 61% 51%, rgba(232,220,196,0.50), transparent 65%),
    radial-gradient(1px 1px     at 56% 70%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.3px 1.3px at 63% 85%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.5px 1.5px at 68%  6%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 72% 22%, rgba(154,58,58,0.30),   transparent 65%),
    radial-gradient(1.2px 1.2px at 76% 43%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.6px 1.6px at 71% 60%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 78% 76%, rgba(232,220,196,0.30), transparent 65%),
    radial-gradient(1.4px 1.4px at 82% 91%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.1px 1.1px at 86% 12%, rgba(232,220,196,0.35), transparent 65%),
    radial-gradient(1.7px 1.7px at 89% 31%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 93% 48%, rgba(154,58,58,0.30),   transparent 65%),
    radial-gradient(1.3px 1.3px at 97% 67%, rgba(232,220,196,0.40), transparent 65%),
    radial-gradient(1.5px 1.5px at 91% 83%, rgba(232,220,196,0.45), transparent 65%),
    radial-gradient(1px 1px     at 96% 96%, rgba(232,220,196,0.35), transparent 65%);
  animation: flecks-shift 14s ease-in-out infinite alternate;
  opacity: 0.55;
}

@keyframes flecks-shift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-0.4%, 0.4%); }
  100% { transform: translate(0.5%, -0.3%); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .atmosphere-flecks { animation: none; }
}

/* ─────────────────────────  TYPOGRAPHY  ───────────────────────── */

.deck-mark, .nav-mark, .meta-mark {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5em;
  font-size: 0.7rem;
  color: var(--gold-soft);
  text-transform: uppercase;
}

.serif-title {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bone);
}

.italic-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--bone);
}

.rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 2rem auto;
  opacity: 0.6;
}

/* ─────────────────────────  TOP NAV  ───────────────────────── */

nav.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
  position: relative;
  z-index: 10;
}

nav.top .brand {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.4em;
  font-size: 0.85rem;
  color: var(--bone);
  text-indent: 0.4em;
}

nav.top .brand .accent { color: var(--gold); }

/* Handwritten signature style for the jgomez brand */
.brand-script {
  font-family: 'P22 Cezanne', 'P22 Cezanne Regular', 'Sacramento', cursive !important;
  letter-spacing: 0.02em !important;
  text-indent: 0 !important;
  text-transform: none !important;
  font-size: 1.7rem !important;
  color: var(--gold) !important;
  line-height: 1;
}
nav.top .brand-script { font-size: 1.7rem !important; }
footer.site-footer .credit.brand-script {
  font-size: 1.5rem !important;
  font-style: normal;
}

nav.top .links a {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  margin-left: 2rem;
  color: var(--bone-mute);
  text-indent: 0.3em;
  transition: color 0.3s;
}
nav.top .links a:hover, nav.top .links a.active { color: var(--gold); }

/* ─────────────────────────  PAGE HEADERS  ───────────────────────── */

header.page-header {
  text-align: center;
  padding: 5rem 2rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

header.page-header h1 {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: 0.18em;
  color: var(--bone);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

header.page-header .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--bone);
  opacity: 0.7;
  letter-spacing: 0.05em;
}

header.page-header .intro {
  font-size: 1.15rem;
  line-height: 1.8;
  opacity: 0.75;
  max-width: 620px;
  margin: 0 auto;
}
header.page-header .intro em { color: var(--gold); font-style: italic; }

/* ─────────────────────────  CARD (oracle/tarot)  ───────────────────────── */

.card {
  perspective: 1500px;
  -webkit-perspective: 1500px;
  aspect-ratio: 2 / 3.2;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1.1s cubic-bezier(0.4, 0.1, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;     /* iOS Safari requires explicit prefix in 3D-flip contexts */
  will-change: transform;                    /* hint compositor to GPU-accelerate */
}

.card:hover .card-inner,
.card.flipped .card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* preserve-3d on the face is also needed on iOS Safari so that
     child elements (img, ::before/::after, text) don't accidentally
     flatten the back-facing geometry into the visible face. */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.25),
    0 25px 50px -12px rgba(0, 0, 0, 0.9),
    0 0 80px -20px var(--gold-glow);
}

.card-face::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 169, 97, 0.45);
  pointer-events: none;
  z-index: 3;
}
.card-face::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  pointer-events: none;
  z-index: 3;
}

/* FRONT */
.card-front .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.card-front .vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 35%, transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 25%);
  z-index: 2;
}

.card-front .numeral {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  color: var(--gold);
  z-index: 4;
  text-indent: 0.45em;
}

.card-front .title-block {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  padding: 0 1.5rem;
}

.card-front .title {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.32em;
  color: var(--bone);
  text-indent: 0.32em;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.card-front .ornament {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.4rem;
}
.card-front .ornament-rule {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.card-front .ornament-moon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.card-front .keyword {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-top: 0.6rem;
  text-indent: 0.1em;
}

/* BACK */
.card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 30%, rgba(201,169,97,0.08) 0%, transparent 60%),
    linear-gradient(135deg, var(--ink-soft) 0%, var(--ink) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.card-back .sigil {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 0.5rem;
}

.card-back .sigil-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0.8rem 0 1.4rem;
}

.card-back .back-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  color: var(--bone);
  text-indent: 0.4em;
  margin-bottom: 0.6rem;
}

.card-back .back-keyword {
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 1.6rem;
  font-size: 1rem;
}

.card-back .message {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--bone);
  opacity: 0.88;
  font-weight: 300;
  max-width: 240px;
}

.card-back .invocation {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold-soft);
  margin-top: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  max-width: 220px;
  border-top: 1px solid rgba(201, 169, 97, 0.2);
  padding-top: 1rem;
}

.card-back .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  opacity: 0.5;
  z-index: 4;
}
.card-back .corner.tl { top: 18px; left: 18px; border-right: none; border-bottom: none; }
.card-back .corner.tr { top: 18px; right: 18px; border-left: none; border-bottom: none; }
.card-back .corner.bl { bottom: 18px; left: 18px; border-right: none; border-top: none; }
.card-back .corner.br { bottom: 18px; right: 18px; border-left: none; border-top: none; }

/* ─────────────────────────  DECK GRID (gallery)  ───────────────────────── */

main.deck-grid {
  max-width: 1500px;
  margin: 4rem auto 6rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 3rem 2rem;
}

/* ─────────────────────────  HUB (collection page)  ───────────────────────── */

main.hub {
  max-width: 1400px;
  margin: 3rem auto 6rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3rem 2.5rem;
}

.deck-tile {
  position: relative;
  aspect-ratio: 2 / 3.2;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.25),
    0 25px 50px -12px rgba(0, 0, 0, 0.9),
    0 0 80px -20px var(--gold-glow);
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1), box-shadow 0.6s;
  display: block;
}

.deck-tile:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.6),
    0 35px 60px -12px rgba(0, 0, 0, 0.95),
    0 0 100px -10px rgba(201, 169, 97, 0.3);
}

.deck-tile::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 169, 97, 0.45);
  z-index: 3;
  pointer-events: none;
}
.deck-tile::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  z-index: 3;
  pointer-events: none;
}

.deck-tile .cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.85);
}

.deck-tile .cover-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(201,169,97,0.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--ink-soft) 0%, var(--ink) 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-tile .cover-fallback .ornament {
  width: 64px;
  height: 64px;
  color: var(--gold);
  opacity: 0.5;
  display: block;
  filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.25));
}

.deck-tile .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.15) 70%, transparent 100%);
  z-index: 2;
}

.deck-tile .body {
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  text-align: center;
  z-index: 4;
  padding: 0 2rem;
}

.deck-tile .label {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.4em;
  font-size: 0.65rem;
  color: var(--gold);
  text-indent: 0.4em;
  margin-bottom: 0.8rem;
  opacity: 0.85;
}

.deck-tile h2 {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  color: var(--bone);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.deck-tile .deck-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone);
  opacity: 0.78;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.deck-tile .stat {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
  text-indent: 0.3em;
}

.deck-tile.planned .body { opacity: 0.65; }
.deck-tile.planned .label::after { content: ' · forthcoming'; }

/* ─────────────────────────  DECK PAGE TOOLBAR  ───────────────────────── */

.deck-toolbar {
  padding: 0 2rem 2rem;
}

/* New deck navigation: mode tabs row + optional series row */
.deck-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.deck-nav .nav-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  position: relative;
  padding: 0.25rem;
  border: 1px solid rgba(201, 169, 97, 0.18);
  background: rgba(0, 0, 0, 0.4);
}
.nav-mode-btn {
  background: transparent;
  border: none;
  color: var(--bone);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-mode-btn:hover { color: var(--gold); background: rgba(201, 169, 97, 0.05); }
.nav-mode-btn.active {
  background: var(--gold);
  color: var(--ink);
}
.nav-mode-btn .dropdown-caret { font-size: 0.85em; opacity: 0.7; }

.nav-spread-wrap { position: relative; }
.nav-spread-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #100c09 0%, #060403 100%);
  border: 1px solid rgba(201, 169, 97, 0.35);
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.9);
  min-width: 320px;
  z-index: 30;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nav-spread-menu[hidden] { display: none; }
.nav-spread-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bone);
  text-align: left;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: background 0.18s, border-color 0.18s;
}
.nav-spread-item:hover {
  background: rgba(201, 169, 97, 0.08);
  border-color: rgba(201, 169, 97, 0.4);
}
.nav-spread-item .spread-item-name {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-indent: 0.25em;
}
.nav-spread-item .spread-item-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bone-mute);
}

.nav-series-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-series-link {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(201, 169, 97, 0.3);
  text-decoration: none;
  color: var(--bone-mute);
  transition: all 0.18s;
}
.nav-series-link:hover { color: var(--gold); border-color: var(--gold); }
.nav-series-link.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.tool-btn {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--bone);
  padding: 0.7rem 1.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  cursor: pointer;
  transition: all 0.3s;
}

.tool-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 169, 97, 0.05);
}

.tool-btn.active {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--gold);
}

/* ─────────────────────────  DRAW MODE  ───────────────────────── */

.draw-stage, .spread-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  gap: 2rem;
}

.draw-stage .prompt, .spread-wrapper .prompt {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--bone-mute);
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 540px;
  line-height: 1.6;
}

.draw-stage .draw-slot {
  width: min(340px, 80vw);
}

.draw-stage .single-card { width: 100%; }

/* draw-card: starts face-down. The deck-back-face is at default (rotateY 0), front is at rotateY 180. */
/* Each rule duplicates with -webkit- prefix for iOS Safari 3D-context stability. */
.card.draw-card .card-inner          { transform: rotateY(0);      -webkit-transform: rotateY(0); }
.card.draw-card.revealed .card-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.card.draw-card .card-front          { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.card.draw-card .deck-back-face      { transform: rotateY(0);      -webkit-transform: rotateY(0); }

/* override the default :hover flip for draw cards */
.card.draw-card:hover .card-inner { transform: rotateY(0); }
.card.draw-card.revealed:hover .card-inner { transform: rotateY(180deg); }

/* deck-back face — purely decorative, no card meaning */
.deck-back-face {
  background:
    radial-gradient(circle at 50% 30%, rgba(201,169,97,0.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--ink-soft) 0%, var(--ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-back-face .back-art {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deck-back-face .back-moon {
  width: 56px;
  height: 56px;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 0 14px rgba(201, 169, 97, 0.25));
}

.deck-back-face .back-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0.6rem auto 0.7rem;
}

.deck-back-face .back-signature {
  font-family: 'P22 Cezanne', 'P22 Cezanne Regular', 'Sacramento', cursive;
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.85;
}

/* Position numeral on the deck back, shown in spread mode only.
   Sits above the moon — Cinzel small caps, ceremonial. */
.deck-back-face .back-position-num {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* Locked / next-up / active states for spread cards */
.card.draw-card.locked {
  opacity: 0.32;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.card.draw-card.locked .deck-back-face { box-shadow: none; }

.spread-position.next-up .card.draw-card .deck-back-face {
  box-shadow: 0 0 0 1px rgba(201,169,97,0.5), 0 0 30px -2px rgba(201,169,97,0.3);
  animation: nextup-pulse 2.4s ease-in-out infinite;
}
@keyframes nextup-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201,169,97,0.5), 0 0 30px -2px rgba(201,169,97,0.3); }
  50%      { box-shadow: 0 0 0 1px rgba(201,169,97,0.8), 0 0 50px 0px  rgba(201,169,97,0.5); }
}

.spread-position.active-reading .card-face {
  box-shadow:
    0 0 0 1px var(--gold),
    0 25px 50px -12px rgba(0, 0, 0, 0.9),
    0 0 80px -10px rgba(201, 169, 97, 0.4);
}

/* the reading panel that appears below a drawn card */
.reading-panel {
  max-width: 540px;
  text-align: center;
  padding: 2rem 1.5rem;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.reading-mark {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 0.4rem;
}

.reading-rule {
  width: 50px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0.5rem auto 1.2rem;
}

.reading-title {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--bone);
  margin-bottom: 0.6rem;
}

.reading-keyword {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

.reading-message {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--bone);
  font-weight: 300;
  margin-bottom: 1.2rem;
}

.reading-invocation {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-soft);
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(201, 169, 97, 0.2);
  padding-top: 1rem;
  max-width: 360px;
  margin: 0 auto;
}

.spread-stage {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 2rem 2rem;
}

/* row layout (default for three-card, relationship, decision) */
.spread-stage-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* arc layout (horseshoe) — staggered vertical offsets create a U-shape */
.spread-stage-arc {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-end;
  max-width: 1400px;
  margin: 0 auto;
  /* Reserve headroom equal to the largest translateY (-100px) plus a small
     buffer, so lifted cards don't overlap the prompt/header above. */
  padding-top: 120px;
}
.spread-stage-arc .spread-position:nth-child(1) { transform: translateY(-30px); }
.spread-stage-arc .spread-position:nth-child(2) { transform: translateY(-60px); }
.spread-stage-arc .spread-position:nth-child(3) { transform: translateY(-90px); }
.spread-stage-arc .spread-position:nth-child(4) { transform: translateY(-100px); }
.spread-stage-arc .spread-position:nth-child(5) { transform: translateY(-90px); }
.spread-stage-arc .spread-position:nth-child(6) { transform: translateY(-60px); }
.spread-stage-arc .spread-position:nth-child(7) { transform: translateY(-30px); }
@media (max-width: 1100px) {
  .spread-stage-arc .spread-position { transform: none !important; }
}

/* celtic cross layout — left column = cross (6 cards), right = staff (4 cards) */
.spread-stage-celtic {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 2rem 4rem;
  flex-wrap: wrap;
}

/* Hide per-position labels in Celtic Cross — the modal shows them on click.
   This also keeps slots compact (= card size only) so adjacent cards don't
   collide with the rotated Crossing. */
.spread-stage-celtic .spread-position .pos-label,
.spread-stage-celtic .spread-position .pos-meaning {
  display: none;
}

.celtic-cross {
  position: relative;
  width: 720px;
  height: 1180px;
  flex-shrink: 0;
}
.celtic-cross .spread-position {
  position: absolute;
  width: 220px;
}
/* Position 1 — Significator (center) */
.celtic-cross .spread-position[data-pos-index="0"] { left: 250px; top: 400px; }
/* Position 2 — Crossing (overlay, rotated + scaled to fit within Significator) */
.celtic-cross .spread-position[data-pos-index="1"] {
  left: 250px; top: 400px;
  transform: rotate(90deg) scale(0.72);
  z-index: 2;
}
/* Position 3 — Crown (above) */
.celtic-cross .spread-position[data-pos-index="2"] { left: 250px; top: 20px; }
/* Position 4 — Root (below) */
.celtic-cross .spread-position[data-pos-index="3"] { left: 250px; top: 800px; }
/* Position 5 — Past (left) */
.celtic-cross .spread-position[data-pos-index="4"] { left: 0px;   top: 400px; }
/* Position 6 — Future (right) */
.celtic-cross .spread-position[data-pos-index="5"] { left: 500px; top: 400px; }

/* Belt-and-braces: in case the rotated card visually still overflows on
   some browsers, only the card itself (not the slot's bounding box) catches
   pointer events for the Crossing card. Stops it from eating adjacent clicks. */
.celtic-cross .spread-position[data-pos-index="1"] { pointer-events: none; }
.celtic-cross .spread-position[data-pos-index="1"] .pos-card-slot,
.celtic-cross .spread-position[data-pos-index="1"] .card { pointer-events: auto; }

.celtic-staff {
  display: flex;
  flex-direction: column-reverse; /* 7 at bottom, 10 at top */
  gap: 1.5rem;
  flex-shrink: 0;
}
.celtic-staff .spread-position {
  width: 220px;
}

/* On smaller screens, fall back to a stacked column for celtic cross */
@media (max-width: 1100px) {
  .celtic-cross,
  .celtic-staff {
    width: auto;
    height: auto;
    position: static !important;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .celtic-cross .spread-position,
  .celtic-staff .spread-position {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .spread-stage-celtic .spread-position .pos-label,
  .spread-stage-celtic .spread-position .pos-meaning {
    display: block;
  }
}

.spread-position {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 280px;
}

.spread-position .pos-label {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.4em;
  font-size: 0.75rem;
  color: var(--gold);
  text-indent: 0.4em;
  text-align: center;
}

.spread-position .pos-meaning {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-mute);
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.spread-position .pos-card-slot { width: 100%; }
.spread-position .pos-card-slot .card { width: 100%; }

/* Shared reading panel — single panel below the spread, updates when any
   revealed card is clicked. Replaces inline .pos-reading per card. */
.spread-reading-panel {
  max-width: 640px;
  margin: 2rem auto 1.2rem;
  padding: 1.6rem 1.4rem;
  min-height: 220px;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
  text-align: center;
  transition: opacity 0.3s;
}
.spread-reading-panel .spread-reading-empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-mute);
  font-size: 1.1rem;
  padding: 2.5rem 0;
}
.spread-reading-panel .spread-reading-empty strong {
  font-style: normal;
  color: var(--gold);
  letter-spacing: 0.15em;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
}

.spread-reading-panel .reading-active {
  animation: fadeIn 0.5s ease-out;
}

.spread-reading-panel .reading-pos-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.spread-reading-panel .reading-pos-meaning {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--bone-mute);
  font-size: 0.95rem;
  text-transform: lowercase;
}

.spread-reading-panel .reading-panel {
  border: none;
  padding: 0;
}

.spread-controls {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ─────────────  PER-CARD READING MODAL (overlay on click)  ───────────── */

.reading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  animation: readingFade 0.25s ease-out;
}
.reading-overlay[hidden] { display: none; }

@keyframes readingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reading-modal {
  position: relative;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0806 0%, #050302 100%);
  border: 1px solid rgba(201, 169, 97, 0.35);
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4);
  animation: readingRise 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes readingRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.reading-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--bone-mute);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
  font-family: 'Cinzel', serif;
}
.reading-close:hover { color: var(--gold); }

.reading-content .reading-pos-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.reading-content .reading-pos-meaning {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--bone-mute);
  font-size: 0.95rem;
  text-transform: lowercase;
  text-indent: 0;
  margin-top: 0.3rem;
}

.reading-content .reading-panel {
  border: none;
  padding: 1rem 0 0;
  margin: 0;
  text-align: center;
}

/* ─────────────────────────  SPREAD SYNTHESIS  ───────────────────────── */

.spread-synthesis-slot {
  width: 100%;
  max-width: 640px;
  margin: 1rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.synthesis-cta {
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  padding: 0.9rem 2rem;
  border-color: var(--gold);
  color: var(--gold);
}
.synthesis-cta:hover {
  background: var(--gold);
  color: var(--ink);
}

.synthesis-hint {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-mute);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
}

.synthesis-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-mute);
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  padding: 2rem 0;
}

.syn-spin {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(201, 169, 97, 0.3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: syn-spin 0.9s linear infinite;
}
@keyframes syn-spin { to { transform: rotate(360deg); } }

.synthesis-reading {
  max-width: 640px;
  margin: 1.5rem auto;
  padding: 2rem 1.5rem;
  text-align: left;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
  animation: fadeIn 1s ease-out;
}

.synthesis-reading .synthesis-mark {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.4rem;
  text-indent: 0.5em;
}

.synthesis-reading p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--bone);
  font-weight: 300;
  margin-bottom: 1.1rem;
}
.synthesis-reading p:last-child { margin-bottom: 0; }

.synthesis-error {
  color: var(--shadow-accent);
  font-style: italic;
  text-align: center;
}
.synthesis-error p {
  margin-bottom: 0.8rem;
  font-family: 'Cormorant Garamond', serif;
  color: var(--bone-mute);
}

.cta-credits {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-left: 0.4em;
}

/* ── paywall modal ─────────────────────────────────────────────────── */
.jgfa-paywall-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
}
.jgfa-paywall-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 6, 0.85);
  backdrop-filter: blur(4px);
}
.jgfa-paywall-panel {
  position: relative;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: linear-gradient(170deg, rgba(20,16,16,0.98), rgba(12,10,10,0.98));
  border: 1px solid rgba(201, 169, 97, 0.35);
  padding: 2rem 1.6rem 1.4rem;
  color: var(--bone);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.jgfa-paywall-panel h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--gold);
  margin: 0 0 1rem;
}
.paywall-blurb {
  font-style: italic;
  color: var(--bone-mute);
  margin: 0 0 1.4rem;
  line-height: 1.5;
}
.paywall-sandbox-banner {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  color: var(--shadow-accent);
  border: 1px solid rgba(154, 58, 58, 0.5);
  padding: 0.3rem 0.8rem;
  margin: -0.4rem 0 1.2rem;
}
.paywall-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  margin-bottom: 1.2rem;
}
.paywall-opt {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(201, 169, 97, 0.25);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.paywall-opt:hover {
  border-color: rgba(201, 169, 97, 0.55);
  background: rgba(201, 169, 97, 0.04);
}
.paywall-opt.selected {
  border-color: var(--gold);
  background: rgba(201, 169, 97, 0.07);
}
.paywall-opt input[type="radio"] {
  display: none;
}
.paywall-opt-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--bone);
}
.paywall-opt-title strong {
  color: var(--gold);
  font-weight: 500;
}
.paywall-opt-sub {
  display: block;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--bone-mute);
  margin-top: 0.3rem;
}
.paywall-tip-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
}
.paywall-tip-amount input {
  width: 4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201, 169, 97, 0.3);
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
  text-align: right;
  outline: none;
}
.paywall-tip-amount input:focus {
  border-color: var(--gold);
}
#paypal-button-container {
  margin: 1rem 0 0.8rem;
}
.paywall-recover {
  font-size: 0.85rem;
  color: var(--bone-mute);
  margin: 0.6rem 0 1rem;
}
.paywall-recover a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted rgba(201, 169, 97, 0.4);
}
.paywall-cancel {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.25);
  color: var(--bone-mute);
  padding: 0.55rem 1.2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.paywall-cancel:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.paywall-token {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--gold);
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.3);
  padding: 0.8rem;
  margin: 1rem 0;
  word-break: break-all;
  user-select: all;
}

.synthesis-audio {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
  text-align: center;
}

.synthesis-listen {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  padding: 0.7rem 1.6rem;
  border: 1px solid rgba(201, 169, 97, 0.5);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.3s;
}
.synthesis-listen:hover {
  background: var(--gold);
  color: var(--ink);
}
.synthesis-listen:disabled { cursor: wait; opacity: 0.85; }

.synthesis-audio .audio-slot { margin-top: 0.5rem; }

/* Custom audio player — replaces the default <audio controls> */
.aud-player {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(201, 169, 97, 0.05);
  border: 1px solid rgba(201, 169, 97, 0.3);
  padding: 0.75rem 1.1rem 0.75rem 0.85rem;
  margin: 0.4rem auto 0;
  max-width: 540px;
  position: relative;
}

.aud-player .aud-play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  padding: 0;
}
.aud-player .aud-play svg { display: block; }
.aud-player .aud-play .aud-icon-play { margin-left: 2px; } /* optical centering */
.aud-player .aud-play:hover { background: var(--gold); color: var(--ink); }
.aud-player .aud-play:active { transform: scale(0.95); }
.aud-player .aud-play.is-playing { background: var(--gold); color: var(--ink); }

.aud-player .aud-track {
  flex: 1 1 auto;
  cursor: pointer;
  padding: 0.7rem 0;             /* generous click target */
  position: relative;
}

.aud-player .aud-bar {
  height: 2px;
  background: rgba(232, 220, 196, 0.18);
  position: relative;
}
.aud-player .aud-fill {
  height: 100%;
  background: var(--gold);
  width: 0%;
  transition: width 0.08s linear;
}
.aud-player .aud-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
  pointer-events: none;
  transition: left 0.08s linear, transform 0.15s;
}
.aud-player .aud-track:hover .aud-knob { transform: translate(-50%, -50%) scale(1.3); }

.aud-player .aud-time {
  flex: 0 0 auto;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────────────────────  FOOTER  ───────────────────────── */

footer.site-footer {
  text-align: center;
  padding: 3rem 2rem 5rem;
  color: var(--gold-soft);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

footer.site-footer .credit {
  display: block;
  font-family: 'Cinzel', serif;
  font-style: normal;
  letter-spacing: 0.4em;
  font-size: 0.7rem;
  color: var(--gold);
  margin-top: 0.8rem;
  text-indent: 0.4em;
}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */

@media (max-width: 700px) {
  nav.top { padding: 1rem 1.5rem; flex-wrap: wrap; }
  nav.top .links a { margin-left: 1rem; font-size: 0.65rem; }
  main.deck-grid, main.hub { gap: 2rem 1rem; padding: 0 1rem; }
  header.page-header { padding: 3rem 1.5rem 2rem; }
}

/* ─────────────────────────  STORAGE STATUS BANNER  ───────────────────────── */
.storage-status {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 9500;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(201, 169, 97, 0.4);
  background: linear-gradient(135deg, #14100c 0%, #0a0807 100%);
  color: var(--gold);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.7);
  max-width: 360px;
  transition: opacity 0.4s, transform 0.4s;
}
.storage-status.warn {
  border-color: rgba(154, 58, 58, 0.6);
  color: var(--shadow-accent);
  letter-spacing: 0.05em;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
}
.storage-status.hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ─────────────────────────  BACKUP / SAFETY TOOLS  ───────────────────────── */
.backup-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  border: 1px solid;
  margin-bottom: 0.5rem;
}
.backup-pill .backup-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  text-indent: 0;
}
.backup-pill.ok {
  border-color: rgba(120, 180, 100, 0.5);
  color: #9ec98a;
}
.backup-pill.ok .backup-pill-dot { background: #9ec98a; }
.backup-pill.warn {
  border-color: rgba(154, 58, 58, 0.6);
  color: var(--shadow-accent);
}
.backup-pill.warn .backup-pill-dot { background: var(--shadow-accent); }
.backup-pill.muted {
  border-color: rgba(201, 169, 97, 0.3);
  color: var(--bone-mute);
}
.backup-pill.muted .backup-pill-dot { background: var(--bone-mute); }

.backup-meta {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--bone-mute);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.backup-meta strong {
  font-style: normal;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

/* ─────────────────────────  REVERSED CARDS  ───────────────────────── */
/* When a card is drawn reversed, the front face displays upside-down once
   the card is flipped. Composes with the existing rotateY(180deg) used by
   the flip animation — adding rotate(180deg) on Z makes the artwork and
   title block read upside-down. The card back stays upright (the moon
   and signature are symmetric so it's not visible until the flip). */
.card.draw-card.reversed .card-front {
  transform: rotateY(180deg) rotate(180deg);
}

.reading-reversed-badge {
  display: block;
  width: fit-content;
  margin: 0.4rem auto 1.2rem;
  padding: 0.3rem 0.8rem;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--shadow-accent);
  border: 1px solid rgba(154, 58, 58, 0.5);
  background: rgba(154, 58, 58, 0.08);
  text-align: center;
}

/* ─────────────────  ADMIN EDITOR — REVERSED READING BLOCK  ───────────── */
.ed-reversed-block {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(154, 58, 58, 0.4);
}
.ed-reversed-head {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--shadow-accent);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ed-rev-status {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-indent: 0;
  text-transform: lowercase;
}
.ed-rev-status.saved {
  color: var(--gold);
}
.ed-rev-status.missing {
  color: var(--bone-mute);
}