/* ============================================================
   ARCANA TAROT — Art Nouveau Stylesheet
   Palette: Forest-night · Amber gold · Warm ivory
   ============================================================ */

/* Register --card-color so colour values can be tweened */
@property --card-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #161A26;
}

/* ---- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Rebind to design-token layer ── */
  --bg:        var(--ink-900);
  --bg2:       var(--ink-800);
  --bg3:       var(--ink-700);
  --surface:   color-mix(in srgb, var(--ink-700) 90%, var(--gold-600) 10%);
  --surface2:  color-mix(in srgb, var(--ink-700) 78%, var(--gold-600) 22%);

  --gold:      var(--gold-300);
  --gold-lt:   var(--gold-200);
  --gold-pale: var(--gold-100);
  --gold-warm: var(--gold-400);
  /* gold-500 measured 2.80:1 on the ground and carried ~33 text rules, all at
     8–12px — under the 4.5:1 AA floor for text that size. gold-400 is 4.92:1 and
     still clearly the quiet step below --gold (8.17:1) and --gold-pale (15.9:1).
     Revert this one line to restore the previous, dimmer decorative hairlines. */
  --gold-dim:  var(--gold-400);
  --gold-faint: color-mix(in srgb, var(--gold-300) 10%, transparent);
  --gold-byz:  var(--gold-300);

  --sage:      #4a6a50;
  --sage-dim:  #2a3d30;

  --text:      var(--parchment);
  --text-dim:  var(--parchment-dim);
  --text-lt:   var(--parchment);

  --rule:      color-mix(in srgb, var(--gold-300) 16%, transparent);
  --rule-hover: color-mix(in srgb, var(--gold-300) 42%, transparent);

  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 2px 16px rgba(0,0,0,.55);
  --shadow:    0 8px 48px rgba(0,0,0,.68);
  --shadow-lg: 0 20px 70px rgba(0,0,0,.78);

  --transition: 0.28s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  /* A calm, near-even dark field anchored to the viewport (fixed) so its
     brightness stays consistent as the page scrolls, rather than a bright
     hotspot near the document top that competes with the content. */
  background: radial-gradient(130% 100% at 50% 0%, #0d0c15 0%, #09080f 55%, #07060c 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.75;
  font-size: 16px;
}

a { color: var(--gold-lt); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-pale); }

/* ---- Grain / noise overlay -------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ---- Keyboard focus ring ---------------------------------- */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold-300) 65%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Starfield canvas ------------------------------------- */
#stars-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
}

/* ---- Decorative sparkle field ----------------------------- */
.bg-sparkles {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* ---- Navbar ----------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 60px;
  /* Transparent so the body's radial-gradient background shows through and the
     navbar blends seamlessly into the page rather than reading as a bar. */
  background: transparent;
  border-bottom: 1px solid var(--rule);
}

.nav-brand {
  display: flex;
  align-items: baseline;
  gap: .12em;
  line-height: 1;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .13em;
  color: var(--gold);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}
.nav-brand:hover { color: var(--gold-pale); }
.brand-mark {
  display: block;
  height: .72em;
  height: 1cap;
  width: auto;
  flex-shrink: 0;
}
.brand-name { display: block; line-height: 1; }

.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-link {
  font-family: var(--font-accent);
  font-size: var(--caps-2-size);
  font-weight: var(--caps-2-weight);
  letter-spacing: var(--caps-2-track);
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color var(--transition);
  padding: .75rem 0;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--gold-300); }
.nav-link.active::after { width: 100%; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--gold-dim);
  padding: .3rem .6rem;
  font-size: .9rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Layout ----------------------------------------------- */
.main-content { position: relative; z-index: 1; padding-top: 60px; }
/* Home hero: drop the 60px top gap so the hero spans the FULL viewport height and
   the card can grow taller. The navbar is transparent and fixed, so the card's
   feathered top sits cleanly behind it. */
.main-content:has(.arcana-hero) { padding-top: 0; }

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .8rem 2.2rem;
  min-height: 44px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--gold-300) 18%, transparent);
}
.btn-primary:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  color: var(--bg);
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--gold-300) 30%, transparent), 0 6px 28px color-mix(in srgb, var(--gold-300) 22%, transparent);
}
.btn-outline {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--rule-hover);
  font-size: .66rem;
  padding: .8rem 1.6rem;
}
.btn-outline:hover {
  border-color: var(--gold-dim);
  color: var(--gold-dim);
  background: transparent;
}
.btn-large { font-size: .78rem; padding: .95rem 2.8rem; }
.btn-sm    { font-size: .65rem; padding: .5rem 1.25rem; }
/* Ghost: borderless secondary variant (the hero re-skins this for its
   art-directed CTA via .arcana-hero .cta-row .btn-ghost). */
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
  font-size: .66rem;
  padding: .8rem 1.4rem;
}
.btn-ghost:hover { color: var(--gold-dim); background: transparent; }

/* ── Left panel ─────────────────────────────────────────── */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.2rem;
  padding: 5rem 3rem 4rem 5vw;
  z-index: 4;
  position: relative;
  /* Subtle right border */
  border-right: 1px solid var(--rule);
}
/* Faint warm wash behind the left panel */
.hero-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--ink-900) 40%, transparent), transparent);
  pointer-events: none;
}

/* ============================================================
   ARCHITECTURAL PAGE HEADER — Cards & Reading pages
   ============================================================ */
.page-hero-arch {
  padding: 1.25rem 3rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.page-hero-arch::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .08;
}
.page-hero-arch::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at 50% 100%,
    color-mix(in srgb, var(--gold-300) 7%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.page-arch-eyebrow {
  display: flex; align-items: center;
  justify-content: center; gap: 14px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.page-arch-rule {
  width: 28px; height: 1px;
  background: var(--gold);
  display: inline-block; opacity: .55;
}
.page-arch-label {
  font-family: var(--font-display);
  font-size: var(--caps-3-size);
  font-weight: var(--caps-3-weight);
  letter-spacing: var(--caps-3-track);
  color: var(--gold); text-transform: uppercase;
}
.page-arch-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-pale);
  mix-blend-mode: screen;
  line-height: .92;
  letter-spacing: -.005em;
  text-shadow: none;
  margin: 0 0 .5rem;
  position: relative; z-index: 1;
}

/* ── Error pages (404 / 500) — reuse the page-hero idiom, centred ── */
.error-page {
  border-bottom: none;
  min-height: calc(100vh - 60px - 120px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4rem 2rem;
}
.error-eyebrow .page-arch-label { letter-spacing: .5em; }
.error-text {
  font-family: var(--font-body);
  font-size: 1.1rem; line-height: 1.7;
  color: var(--text-dim);
  max-width: 34rem; margin: .75rem auto 0;
  position: relative; z-index: 1;
}
.error-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: 2rem;
  position: relative; z-index: 1;
}

/* ============================================================
   CARDS — Grid
   ============================================================ */
.cards-grid-section { padding: 2rem 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.card-tile {
  display: block; aspect-ratio: 2/3;
  background: var(--bg2);
  cursor: pointer; transition: background var(--transition);
  position: relative; overflow: hidden; color: var(--text);
}
.card-tile:hover { background: var(--surface); color: var(--text); z-index: 2; }
.card-tile-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: .65rem .5rem .6rem; position: relative;
}
.card-tile-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
  opacity: .75; transition: opacity var(--transition);
}
.card-tile:hover .card-tile-img { opacity: .92; }
/* Warm colour wash from the card's unique hue */
.card-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--card-color, transparent);
  opacity: .05; transition: opacity var(--transition);
}
.card-tile:hover::before { opacity: .1; }
/* Candlelight glow from bottom on hover */
.card-tile::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to top, color-mix(in srgb, var(--gold-300) 7%, transparent), transparent);
  opacity: 0; transition: opacity var(--transition);
}
.card-tile:hover::after { opacity: 1; }

.card-tile-header {
  width: 100%; display: flex;
  justify-content: space-between; align-items: flex-start;
}
.card-tile-number {
  font-family: var(--font-accent);
  font-size: .55rem; letter-spacing: .08em; color: var(--gold);
}
/* No opacity here: .55 composited these down to 1.62:1 — the token's own value
   is the whole contrast budget at this size. */
.card-tile-suit, .card-tile-arcana { font-size: .58rem; color: var(--gold-dim); }
.card-tile-footer { width: 100%; text-align: center; }
.card-tile-name {
  font-family: var(--font-accent);
  font-size: .52rem; letter-spacing: .06em;
  color: var(--text-dim); line-height: 1.3;
  text-transform: uppercase;
  transition: color var(--transition);
}
.card-tile:hover .card-tile-name { color: var(--gold-pale); }
.card-tile-arcana-label { font-size: .5rem; color: var(--text-dim); opacity: .7; margin-top: .08rem; }
.card-tile-hover-info {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--ink-900) 92%, transparent));
  display: flex; align-items: flex-end;
  padding: .5rem; opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.card-tile:hover .card-tile-hover-info { opacity: 1; }
.card-tile-keywords {
  font-size: .82rem; color: var(--gold-pale); opacity: .85;
  text-align: center; width: 100%; line-height: 1.4;
  font-style: italic; font-family: var(--font-body);
}

/* ============================================================
   CARD DETAIL
   ============================================================ */

/* Full-width spotlight hero */
.card-detail-hero {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 30% 50%,
    color-mix(in srgb, var(--card-color, #161A26) 22%, transparent) 0%,
    transparent 70%);
}

/* two-column spotlight: art | text */
.card-detail-spotlight {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
  padding: 1.25rem 3rem 3rem;
}

/* "Back to the deck" — an escape hatch up to the listing, kept visually
   distinct from the lateral prev/next nav under the card. Shares the
   spotlight's max-width + gutter so it lines up with the art column. */
.card-detail-backbar {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.75rem 3rem 0;
  position: relative;
  z-index: 1;
}
.card-detail-back {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--transition);
}
.card-detail-back:hover { color: var(--gold); }
.card-detail-back-arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.card-detail-back:hover .card-detail-back-arrow { transform: translateX(-3px); }

/* text column: eyebrow cap-height locked to the card's top border */
.card-detail-spotlight-text {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* thin rule between the hero identity block and body copy */
.card-detail-spotlight-text .card-detail-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.card-detail-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; opacity: .08;
}
.card-detail-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--gold-300) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.card-detail-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  color: var(--gold-pale);
  line-height: .95;
  letter-spacing: -.005em;
  text-shadow: 0 0 80px color-mix(in srgb, var(--gold-100) 14%, transparent);
  margin: .6rem 0 .85rem;
  position: relative; z-index: 1;
  text-align: left;
}

/* spotlight eyebrow sits left-aligned inside the text column */
.card-detail-spotlight-text .page-arch-eyebrow { justify-content: flex-start; }
.card-detail-hero-meta {
  display: flex; align-items: center;
  justify-content: flex-start; gap: .65rem;
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.card-detail-hero-num {
  font-family: var(--font-display);
  font-size: .62rem; letter-spacing: .38em;
  color: var(--gold); text-transform: uppercase;
}
.card-detail-hero-element {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .2em;
  color: var(--gold-dim); text-transform: uppercase;
}
.card-detail-hero-symbol {
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .2em;
  color: var(--gold-dim);
}
.card-detail-hero-sep { color: var(--rule-hover); font-size: .85rem; font-weight: 200; opacity: .6; margin: 0 .05em; vertical-align: middle; }
.card-detail-position {
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .3em;
  color: var(--gold); text-transform: uppercase;
}
/* The large card */
.card-large {
  width: 100%; max-width: 360px; aspect-ratio: 2/3;
  margin: 0 auto; border-radius: var(--radius-md);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='rgba(196%2C147%2C58%2C0.1)' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='rgba(196%2C147%2C58%2C0.08)' stroke-width='0.5'/%3E%3Cpath d='M18 10 Q20 14 18 18 Q16 14 18 10Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M18 26 Q20 22 18 18 Q16 22 18 26Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M10 18 Q14 20 18 18 Q14 16 10 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M26 18 Q22 20 18 18 Q22 16 26 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(196%2C147%2C58%2C0.12)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,
      color-mix(in srgb, var(--card-color, #161A26) 72%, var(--ink-900)),
      var(--bg));
  border: 1px solid var(--rule-hover);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  justify-content: space-between; padding: .9rem;
  position: relative; overflow: hidden;
}
/* Double inner frame */
.card-large::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--gold-300) 11%, transparent);
  border-radius: calc(var(--radius-md) - 2px);
  pointer-events: none; z-index: 1;
}
/* Candlelight glow at base of card */
.card-large::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to top, color-mix(in srgb, var(--gold-300) 6%, transparent), transparent);
  pointer-events: none;
}
/* Art Nouveau corner ornaments via SVG inside .card-large */
.card-corner {
  position: absolute; width: 22px; height: 22px;
  color: var(--gold-dim); opacity: .55; z-index: 2;
}
.card-corner-tl { top: 10px; left: 10px; }
.card-corner-br { bottom: 10px; right: 10px; transform: rotate(180deg); }

.card-large-corner { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; z-index: 2; }
.card-large-corner.bottom-right { align-items: flex-end; transform: rotate(180deg); }
.cl-number { font-family: var(--font-display); font-size: .58rem; letter-spacing: .12em; color: var(--gold-dim); }
.cl-symbol-small { font-size: .78rem; color: var(--gold-dim); opacity: .65; }
.card-large-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; z-index: 2;
}
.card-large-suit {
  font-family: var(--font-display);
  font-size: .55rem; letter-spacing: .2em;
  color: var(--gold-dim); text-transform: uppercase;
}
.card-large.has-image .card-large-corner,
.card-large.has-image .card-large-center,
.card-large.has-image .card-corner { display: none; }

/* Card detail image — fills the card, sits behind text overlays */
.card-detail-art {
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.card-detail-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
  display: block;
}

.card-meta-badges {
  display: flex; gap: .5rem;
  justify-content: flex-start; flex-wrap: wrap; margin-top: 1.25rem;
}
.meta-badge {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .15em; padding: .3rem .85rem;
  border: 1px solid var(--rule); color: var(--gold-dim);
  text-transform: uppercase; border-radius: var(--radius);
}

.card-nav { display: flex; justify-content: space-between; margin-top: 1.1rem; gap: .5rem; }
.card-nav-btn {
  font-family: var(--font-display); font-size: .7rem;
  letter-spacing: .14em; color: var(--text-dim);
  padding: .5rem .9rem; min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius); transition: all var(--transition);
  text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.card-nav-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Detail info */
.detail-desc {
  color: var(--text-body); font-style: italic;
  font-family: var(--font-body);
  font-size: .95rem; line-height: 1.7;
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

.meanings-tabs { display: flex; border-bottom: 1px solid var(--rule); }
.tab-btn {
  font-family: var(--font-display); font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .6rem 1.1rem; min-height: 44px;
  background: transparent; border: none;
  color: var(--text-dim); cursor: pointer;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: all var(--transition);
  display: inline-flex; align-items: center;
}
.tab-btn:hover { color: var(--gold); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); gap: .5rem; }
.tab-btn.active::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .85; flex-shrink: 0; }
/* Reversed side wears the verdigris half of the upright/reversed duality */
.tab-btn[data-tab="reversed"]:hover { color: var(--reversed-pale); }
.tab-btn[data-tab="reversed"].active { color: var(--reversed-pale); border-bottom-color: var(--reversed); }
.tab-btn[data-tab="reversed"].active::before { background: var(--reversed); }
.tab-content { display: none; }
/* Crossfade the freshly-activated meaning in instead of a hard display swap */
.tab-content.active { display: block; animation: tab-fade .42s ease; }
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meaning-box {
  padding: 1.1rem 1.25rem 1.1rem 1.35rem; line-height: 1.75; font-size: 1rem;
  max-width: 58ch;
  color: var(--text);
  border: 1px solid var(--rule); border-top: none;
  border-left-width: 2px;   /* state-coloured accent rule */
}
.meaning-upright  {
  background: color-mix(in srgb, var(--gold-300) 4%, transparent);
  border-left-color: color-mix(in srgb, var(--gold-300) 45%, transparent);
}
.meaning-reversed {
  background: var(--reversed-tint);
  border-left-color: var(--reversed-line);
}

/* ── Card-detail entrance — one orchestrated reveal on load ──
   The eyebrow and the card art FADE ONLY (no translate): the lockEyebrow
   script measures their getBoundingClientRect tops to align the eyebrow
   cap to the card's border, and a vertical transform would poison that
   measurement. Everything the script doesn't measure rises as it fades. */
@keyframes detail-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes detail-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card-detail-visual                  { animation: detail-fade .9s ease both; animation-delay: .1s; }
.card-detail-spotlight-text .page-arch-eyebrow { animation: detail-fade .7s ease both; animation-delay: .16s; }
.card-detail-title                   { animation: detail-rise .7s ease both; animation-delay: .24s; }
.card-detail-hero-meta               { animation: detail-rise .7s ease both; animation-delay: .34s; }
.card-detail-spotlight-text .card-detail-info { animation: detail-rise .75s ease both; animation-delay: .44s; }

/* ============================================================
   READING — Two-column layout
   ============================================================ */

/* Outer grid */
.reading-layout {
  display: grid;
  grid-template-columns: 520px 1fr;
  min-height: calc(100vh - 60px);
  max-width: 100%;
}

/* Left column — sticky, scrollable if content overflows */
.reading-left {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  /* Scroll if content is taller than the viewport, but never show the scrollbar */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge/IE */
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  padding: 1.75rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.reading-left::-webkit-scrollbar { display: none; }   /* Chrome / Safari / Edge */
.reading-left::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; opacity: .05;
}

.reading-left-panel {
  display: flex; flex-direction: column;
  flex: 1;
  position: relative; z-index: 1;
}

/* Left eyebrow — left-aligned not centred */
.reading-eyebrow { justify-content: flex-start; margin-bottom: 1.25rem; }

.reading-left-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  color: var(--gold-pale);
  letter-spacing: -.005em;
  text-shadow: 0 0 60px color-mix(in srgb, var(--gold-100) 14%, transparent);
  margin: 0 0 .75rem; line-height: .95;
}
.reading-left-sub {
  font-family: var(--font-body);
  font-style: italic; font-size: 1.1rem;
  color: var(--text-dim); line-height: 1.7;
  margin-bottom: 2rem;
}
.reading-result-desc {
  font-family: var(--font-body);
  font-style: italic; font-size: 1.2rem;
  color: var(--text-dim); line-height: 1.65;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
/* Whole-reading observation (composer's reading_notes): a gilt callout above
   the legend, set apart from the italic spread description by its boxed frame. */
.reading-notes {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.65;
  color: var(--gold-200);
  margin-bottom: 1.5rem;
  padding: .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--gold-300) 26%, transparent);
  background: color-mix(in srgb, var(--gold-300) 7%, transparent);
  border-radius: var(--radius-md);
}

.reading-new-btn { margin-bottom: 1.5rem; align-self: flex-start; }
.reading-email-btn { margin-bottom: .75rem; align-self: flex-start; }
.reading-email-form {
  display: grid; gap: .65rem; margin: 0 0 1rem; padding: 1rem;
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink-800) 65%, transparent);
}
.reading-email-form label { color: var(--text-dim); font-size: .88rem; }
.reading-email-form input[type="email"] {
  width: 100%; padding: .75rem; color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--ink-900); font: inherit;
}
.reading-email-consent { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.35; }
.reading-email-consent input { margin-top: .2rem; }
.reading-email-status { color: var(--gold-200); line-height: 1.45; margin: .25rem 0 0; }

/* Numbered legend — each drawn card's meaning, keyed to a number on the card */
.reading-legend { display: flex; flex-direction: column; gap: .7rem; }
.legend-item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-800) 45%, transparent);
  transition: border-color .2s, background .2s;
}
.legend-item:hover { border-color: color-mix(in srgb, var(--gold-300) 45%, transparent); }
.legend-item.is-linked {
  border-color: var(--gold-300);
  background: color-mix(in srgb, var(--gold-300) 12%, transparent);
}
/* Shared circular number — used in the legend and on each card */
.legend-num, .spread-card-num {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--gold-300);
  color: var(--gold-pale);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  background: color-mix(in srgb, var(--ink-900) 70%, transparent);
}
.legend-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.legend-pos {
  font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim);
}
.legend-name {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .03em;
  color: var(--gold-pale);
}
.legend-meaning {
  font-family: var(--font-body); font-size: .82rem; line-height: 1.45;
  color: var(--text-dim); margin: .15rem 0 0;
}

/* Number badge on each spread card, keyed to the legend entry */
.spread-card-num {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  width: 1.5rem; height: 1.5rem; font-size: .78rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events: none;
}
.spread-card.reversed .spread-card-num { transform: rotate(180deg); }
.spread-card.is-linked { outline: 2px solid var(--gold-300); outline-offset: 3px; }

/* Right column */
.reading-right {
  padding: 1.25rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: calc(100vh - 60px);
}
/* Atmospheric glow in the right column */
.reading-right::before {
  content: '';
  position: absolute;
  top: 20%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--gold-300) 5%, transparent) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* Spread selector — lives in the right column */
.reading-right-selector {
  width: 100%;
  max-width: 780px;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
  padding-top: .5rem;
}
.reading-selector-eyebrow { justify-content: center; margin-bottom: 1rem; }

/* Spread layout — top-aligned in the right column (cards sit near the top) */
.reading-right .spread-layout {
  position: relative; z-index: 1;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  flex: 1;
  padding: 0.5rem 1rem;
}

/* Flex spreads (everything but Celtic Cross) span the full column width,
   distributing the fixed-width cards evenly instead of clustering centre.
   :not() keeps higher specificity than the rule above and excludes the
   Celtic Cross grid, which must stay a tight, centred cross+staff unit. */
.reading-right .spread-layout:not(.spread-celtic-cross) {
  justify-content: space-evenly;
}

/* Celtic Cross is a calibrated grid — its crossing card (#2, "The Challenge")
   overlaps the significator via a negative margin that assumes the grid items
   are centre-aligned in their row tracks. Keep align-items: center here so the
   general top-align rule above doesn't shift the crossing card out of place.
   (align-content stays flex-start, so the whole cross still sits near the top.) */
.reading-right .spread-layout.spread-celtic-cross { align-items: center; }

@media (max-width: 900px) {
  .reading-layout { grid-template-columns: 1fr; }
  .reading-left { position: static; height: auto; border-right: none; border-left: none; border-bottom: 1px solid var(--rule); }
  .reading-right { padding: 2rem 1.5rem 3rem; }
}
/*
*/
.spread-options {
  display: flex;
  gap: .6rem; margin-bottom: 1.25rem;
}

.spread-option {
  flex: 1; min-width: 0;
  background: color-mix(in srgb, var(--ink-800) 65%, transparent);
  padding: 1.25rem 1rem;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .35rem;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.spread-option:hover {
  background: color-mix(in srgb, var(--ink-700) 80%, transparent);
  border-color: color-mix(in srgb, var(--gold-400) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--gold-300) 15%, transparent);
}
.spread-option:active {
  transform: translateY(0);
  box-shadow: none;
}
.spread-option.selected {
  background: color-mix(in srgb, var(--ink-700) 80%, transparent);
  border-color: color-mix(in srgb, var(--gold-300) 55%, transparent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--gold-300) 22%, transparent),
              inset 0 0 18px -8px color-mix(in srgb, var(--gold-300) 10%, transparent);
}

.spread-option-count {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 600;
  color: var(--gold); line-height: 1; opacity: .5;
  transition: opacity var(--transition);
}
.spread-option.selected .spread-option-count { opacity: 1; }
.spread-option-name {
  font-family: var(--font-display); font-size: .82rem;
  font-weight: 500; color: var(--gold-pale); letter-spacing: .04em;
}
.spread-option-desc {
  font-family: var(--font-body);
  font-size: .88rem; font-style: italic;
  color: var(--text-dim); line-height: 1.45;
}
/* Loading */
.reading-loading {
  display: flex; flex-direction: column;
  align-items: center; gap: 2.5rem; padding: 5rem 0;
}
.loading-cards { display: flex; gap: 1rem; align-items: flex-end; }
.loading-card {
  border-radius: var(--radius-md);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='rgba(196%2C147%2C58%2C0.1)' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='rgba(196%2C147%2C58%2C0.08)' stroke-width='0.5'/%3E%3Cpath d='M18 10 Q20 14 18 18 Q16 14 18 10Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M18 26 Q20 22 18 18 Q16 22 18 26Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M10 18 Q14 20 18 18 Q14 16 10 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M26 18 Q22 20 18 18 Q22 16 26 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(196%2C147%2C58%2C0.12)'/%3E%3C/svg%3E"),
    var(--surface);
  border: 1px solid var(--rule);
  animation: loading-rise 1.4s ease-in-out infinite;
}
.lc1 { width: 44px; height: 72px; }
.lc2 { width: 44px; height: 86px; animation-delay: .22s; }
.lc3 { width: 44px; height: 72px; animation-delay: .44s; }
@keyframes loading-rise {
  0%, 100% { opacity: .3; transform: scaleY(.92); }
  50%       { opacity: .85; transform: scaleY(1); border-color: var(--gold-dim); }
}
.loading-text {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .22em; color: var(--gold-dim); text-transform: uppercase;
}

/* Spread layouts */
.spread-layout {
  display: flex; gap: 2rem;
  justify-content: center; flex-wrap: wrap; margin-bottom: 3rem;
}
.spread-card-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: .85rem;
  opacity: 0;
  animation: card-appear .55s ease forwards;
  animation-delay: var(--delay);
}
@keyframes card-appear {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spread-card {
  width: 175px; height: 292px;
  border-radius: var(--radius-md); position: relative;
  cursor: pointer; transition: transform .28s ease, box-shadow .28s ease;
  perspective: 1200px;   /* depth for the flip; coexists with the 2D transforms below */
}
.spread-card.reversed { transform: rotate(180deg); }
.spread-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.spread-card.reversed:hover { transform: translateY(-6px) rotate(180deg); }
/* The flipper: holds both faces and rotates from cover (0deg) to art (180deg).
   preserve-3d keeps the two faces in the card's depth so backface-visibility
   can hide whichever one is turned away. */
.spread-card-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0);
  transition: transform .72s cubic-bezier(.2,.75,.2,1);
}
.spread-card.revealed .spread-card-flip { transform: rotateY(180deg); }
.spread-card-back, .spread-card-face {
  position: absolute; inset: 0;
  border-radius: var(--radius-md); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .3rem; padding: .55rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.spread-card-back {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='rgba(196%2C147%2C58%2C0.1)' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='rgba(196%2C147%2C58%2C0.08)' stroke-width='0.5'/%3E%3Cpath d='M18 10 Q20 14 18 18 Q16 14 18 10Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M18 26 Q20 22 18 18 Q16 22 18 26Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M10 18 Q14 20 18 18 Q14 16 10 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M26 18 Q22 20 18 18 Q22 16 26 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(196%2C147%2C58%2C0.12)'/%3E%3C/svg%3E"),
    var(--surface);
  transform: rotateY(0);   /* cover faces the viewer first */
}
.spread-card-back::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid color-mix(in srgb, var(--gold-300) 10%, transparent);
  border-radius: calc(var(--radius-md) - 2px);
}
.card-back-symbol { font-size: 1.1rem; color: var(--gold-dim); opacity: .3; }
.spread-card-face {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--card-color, #161A26) 68%, var(--ink-900)),
    var(--bg));
  transform: rotateY(180deg);   /* pre-rotated so it lands un-mirrored after the flip */
  border-color: var(--rule-hover);
}

.spread-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius-md);
  opacity: .82; pointer-events: none;
}
.sc-number { font-family: var(--font-accent); font-size: .5rem; letter-spacing: .08em; color: var(--gold-dim); align-self: flex-start; }
.sc-reversed-badge { font-family: var(--font-accent); font-size: .42rem; letter-spacing: .12em; color: var(--reversed-pale); border: 1px solid var(--reversed-line); padding: .1rem .35rem; border-radius: var(--radius); text-transform: uppercase; }

/* Celtic cross */
.spread-celtic-cross { display: grid; grid-template-columns: repeat(4, auto) 2.5rem repeat(1, auto); grid-template-rows: repeat(4, auto); gap: .75rem; justify-content: center; align-items: center; position: relative; }
.spread-celtic-cross .spread-card { width: 110px; height: 183px; }
/* The cross (cards 1–6) spans 3 rows; the staff spans 4. Shift the whole cross
   block down by half a row-pitch so its centre sits on the line between staff
   cards 8 and 9 — i.e. the cross is vertically centred against the staff. Uses
   position/top, not transform, because the wraps' card-appear entrance animation
   owns `transform` (animated values would override it). */
.spread-celtic-cross .spread-card-wrap:nth-child(-n+6) {
  position: relative;
  top: calc((183px + .75rem) / 2);
}
.spread-celtic-cross .spread-card-wrap:nth-child(1)  { grid-column: 3; grid-row: 2; z-index: 1; }
/* Card 2 (crossing) — shares the significator's cell so it lies directly on top
   of card 1, rotated 90° to form the classic cross. */
.spread-celtic-cross .spread-card-wrap:nth-child(2)  {
  grid-column: 3; grid-row: 2;
  z-index: 3;
  align-items: center;
  /* The crossing card is rotated 90° via `transform`, which does NOT shrink its
     layout/hit-test box — the wrapper stays a 110×183 rectangle sitting on top of
     the significator (card 1) at z-index 3, so its transparent area swallowed every
     click on card 1's exposed top/bottom edges (card 1 was 0% clickable). Let the
     wrapper pass clicks through; the rotated card below re-enables its own. */
  pointer-events: none;
}
.spread-celtic-cross .spread-card-wrap:nth-child(2) .spread-card {
  transform: rotate(90deg);
  transform-origin: center center;
  pointer-events: auto;
}
.spread-celtic-cross .spread-card-wrap:nth-child(2) .spread-card:hover { transform: rotate(90deg) translateY(-6px); }
.spread-celtic-cross .spread-card-wrap:nth-child(3)  { grid-column: 3; grid-row: 3; }
.spread-celtic-cross .spread-card-wrap:nth-child(4)  { grid-column: 2; grid-row: 2; }
.spread-celtic-cross .spread-card-wrap:nth-child(5)  { grid-column: 3; grid-row: 1; }
.spread-celtic-cross .spread-card-wrap:nth-child(6)  { grid-column: 4; grid-row: 2; }
.spread-celtic-cross .spread-card-wrap:nth-child(7)  { grid-column: 6; grid-row: 4; }
.spread-celtic-cross .spread-card-wrap:nth-child(8)  { grid-column: 6; grid-row: 3; }
.spread-celtic-cross .spread-card-wrap:nth-child(9)  { grid-column: 6; grid-row: 2; }
.spread-celtic-cross .spread-card-wrap:nth-child(10) { grid-column: 6; grid-row: 1; }

/* Card panel */
.card-panel {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: fade-in .22s ease;
  /* Even, quiet scrim — but not pure black: ~17% lets the blurred spread read
     faintly through so the modal floats above its context rather than a void. */
  background: color-mix(in srgb, var(--ink-900) 83%, transparent);
  backdrop-filter: blur(20px) saturate(55%);
  cursor: pointer;
}
.card-panel .panel-inner { cursor: default; }
.card-panel .panel-inner { pointer-events: all; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.panel-inner {
  background: var(--bg2); border: 1px solid var(--rule-hover);
  border-radius: var(--radius-lg); padding: 1.5rem;
  max-width: 760px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: minmax(180px, 250px) 1fr;
  gap: 1.75rem; position: relative;
  box-shadow: var(--shadow-lg);
  animation: slide-up .3s ease;
}
@media (max-width: 580px) { .panel-inner { grid-template-columns: 1fr; } }
@keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Out of the grid flow and pinned to the panel's top-right corner, so the close
   sits on the same line as the top of the image instead of claiming its own
   full-width row above it. Higher z-index keeps it above the corner brackets. */
.panel-nav {
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  display: flex; align-items: center;
}
.panel-close {
  background: none; border: 1px solid var(--rule);
  color: var(--text-dim); width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.panel-close:hover { border-color: var(--gold-dim); color: var(--gold); }

/* Visual column: stretches to the height of the text column so the card
   reads as the dominant element; corner brackets frame the card itself
   rather than the whole dialog. */
.panel-card-visual {
  position: relative;
  align-self: start;      /* don't stretch to the text column — let the card keep its true 2:3 ratio */
  display: flex; flex-direction: column;
  gap: .7rem;             /* breathing room between the card and its label */
  padding-bottom: .75rem; /* lifts the orientation label clear of the bottom bracket */
}
.panel-card-visual::before,
.panel-card-visual::after {
  content: '';
  position: absolute; width: 30px; height: 30px;
  border-color: var(--gold-dim); border-style: solid; opacity: .45;
  pointer-events: none; z-index: 2;
}
.panel-card-visual::before {
  top: -9px; left: -9px;
  border-width: 1px 0 0 1px;
  border-radius: 6px 0 0 0;
}
.panel-card-visual::after {
  bottom: -9px; right: -9px;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 6px 0;
}
.panel-card {
  width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-md);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='rgba(196%2C147%2C58%2C0.1)' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='rgba(196%2C147%2C58%2C0.08)' stroke-width='0.5'/%3E%3Cpath d='M18 10 Q20 14 18 18 Q16 14 18 10Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M18 26 Q20 22 18 18 Q16 22 18 26Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M10 18 Q14 20 18 18 Q14 16 10 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Cpath d='M26 18 Q22 20 18 18 Q22 16 26 18Z' fill='rgba(196%2C147%2C58%2C0.07)'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(196%2C147%2C58%2C0.12)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,
      color-mix(in srgb, var(--card-color, #161A26) 68%, var(--ink-900)),
      var(--bg));
  border: 1px solid var(--rule-hover); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.panel-card.reversed { transform: rotate(180deg); }
.panel-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius-md);
  opacity: .92; pointer-events: none;
}
.panel-card-inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1rem; position: relative; z-index: 1; }
.panel-card-number { font-family: var(--font-accent); font-size: .6rem; color: var(--gold-dim); letter-spacing: .1em; }
.panel-card-suit { font-family: var(--font-accent); font-size: .57rem; color: var(--gold-dim); letter-spacing: .15em; text-transform: uppercase; }
.panel-position-top { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-200); margin: 0 0 .5rem; }
/* Orientation — always shown (not just when reversed), since it's central
   to interpretation. Sits below the card on the dark modal ground (legible,
   unlike over the art), lifted by the column's bottom padding so it tucks just
   inside the bottom bracket rather than colliding with it. Upright reads as a
   quiet aside; reversed picks up the verdigris hue used for reversed meanings. */
.panel-orientation {
  margin: 0; text-align: center;
  font-family: var(--font-accent); font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-200);
}
.panel-orientation.is-reversed { color: var(--reversed-pale); }
.panel-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--gold-pale); margin-bottom: .35rem; letter-spacing: -.005em; text-shadow: 0 0 40px color-mix(in srgb, var(--gold-100) 10%, transparent); }
/* Element line sits a touch brighter; the extra margin below keeps it from
   blurring into the keyword run, which shares its gold-caps register. */
.panel-element { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; color: var(--gold-200); text-transform: uppercase; margin-bottom: 1.1rem; }
/* Keyword run — de-boxed: small-caps gold text separated by faint dots,
   mirroring the .st-kw / .st-kw-sep pattern used on the deck/detail pages. An
   inline flow (not flex) so `text-wrap: balance` can split a long run into even
   lines instead of stranding a lone keyword on its own line. */
.panel-keywords {
  display: block; text-align: left; text-wrap: balance;
  line-height: 1.8; margin-bottom: 1rem;
}
.panel-kw {
  font-family: var(--font-display);
  font-size: var(--caps-4-size); font-weight: var(--caps-4-weight);
  letter-spacing: var(--caps-4-track);
  text-transform: uppercase; color: var(--gold-dim); white-space: nowrap;
}
.panel-kw.is-reversed { color: var(--reversed-pale); }
.panel-kw-sep { color: var(--gold-500); font-size: .52rem; }

/* Reading-specific narrative (composer): the personalised interpretation, so it
   sits directly on the modal ground — a gilt left-hairline and eyebrow mark it
   as reading-specific without boxing it in. */
.panel-narrative {
  margin-bottom: 1rem;
  padding-left: 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--gold-300) 55%, transparent);
}
.panel-narrative h4 { font-family: var(--font-accent); font-size: .6rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; margin-bottom: .6rem; }
.panel-narrative p { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.8; color: var(--gold-pale); margin: 0; }
/* Position purpose, shown above the card title in the panel */
.panel-position-meaning { font-family: var(--font-body); font-style: italic; font-size: .92rem; color: var(--text-dim); line-height: 1.5; margin: 0 0 1rem; }

/* "View full card" — a hairline-rule link, mirroring .st-meta-cta, so it
   reads as the secondary action beneath closing/continuing the reading. */
.panel-cta {
  display: inline-flex; align-items: center;
  text-decoration: none; cursor: pointer;
  padding: .5rem 0; margin-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  transition: border-color .25s;
}
.panel-cta:hover { border-color: color-mix(in srgb, var(--gold-200) 70%, transparent); }
.panel-cta-inner {
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-dim);
  transition: color .25s;
}
.panel-cta:hover .panel-cta-inner { color: var(--gold-pale); }

/* ============================================================
   READING — five-stage flow & spread geometries (Approach A)
   Stage shape lives in CSS; reading.js only drops generic numbered
   cards into #spreadLayout and toggles the [hidden] attribute.
   ============================================================ */

/* Author display rules (e.g. .reading-loading{display:flex}) beat the UA
   [hidden] rule, so re-assert hidden for every stage in the reading view. */
.reading-layout [hidden] { display: none !important; }

/* ── Spread selector: wrap nicely + shape glyph ──────────── */
.spread-options { flex-wrap: wrap; }
.spread-option { flex: 1 1 140px; align-items: flex-start; }
.spread-glyph {
  width: 46px; height: 26px; margin-bottom: .2rem;
  background: left center / contain no-repeat;
  opacity: .5; transition: opacity var(--transition);
}
.spread-option:hover .spread-glyph,
.spread-option.selected .spread-glyph { opacity: 1; }
.spread-glyph-single      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Ccircle cx='23' cy='13' r='3' fill='%23C8A24C'/%3E%3C/svg%3E"); }
.spread-glyph-three_card  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Ccircle cx='13' cy='15' r='2.6' fill='%23C8A24C'/%3E%3Ccircle cx='23' cy='9' r='2.6' fill='%23C8A24C'/%3E%3Ccircle cx='33' cy='15' r='2.6' fill='%23C8A24C'/%3E%3C/svg%3E"); }
.spread-glyph-five_card   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Ccircle cx='23' cy='13' r='2.4' fill='%23C8A24C'/%3E%3Ccircle cx='23' cy='4' r='2.4' fill='%23C8A24C'/%3E%3Ccircle cx='23' cy='22' r='2.4' fill='%23C8A24C'/%3E%3Ccircle cx='14' cy='13' r='2.4' fill='%23C8A24C'/%3E%3Ccircle cx='32' cy='13' r='2.4' fill='%23C8A24C'/%3E%3C/svg%3E"); }
.spread-glyph-horseshoe   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Ccircle cx='5' cy='21' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='11' cy='14' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='18' cy='9' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='24' cy='7' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='30' cy='9' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='37' cy='14' r='2.2' fill='%23C8A24C'/%3E%3Ccircle cx='43' cy='21' r='2.2' fill='%23C8A24C'/%3E%3C/svg%3E"); }
.spread-glyph-celtic_cross{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Ccircle cx='15' cy='13' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='15' cy='5' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='15' cy='21' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='7' cy='13' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='23' cy='13' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='37' cy='4' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='37' cy='10' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='37' cy='16' r='2' fill='%23C8A24C'/%3E%3Ccircle cx='37' cy='22' r='2' fill='%23C8A24C'/%3E%3C/svg%3E"); }

/* ── Intention stage ─────────────────────────────────────── */
.reading-intention {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem; position: relative; z-index: 1;
}
.intention-spread-name {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--gold-pale); letter-spacing: .01em;
}
.intention-deck { position: relative; width: 86px; height: 116px; margin: .25rem 0 .5rem; animation: deck-float 4s ease-in-out infinite; }
.intention-deck-card {
  position: absolute; inset: 0; border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: linear-gradient(170deg, color-mix(in srgb, var(--ink-700) 90%, var(--gold-600)), var(--bg));
}
.intention-deck-card:nth-child(1) { transform: rotate(-8deg) translate(-5px, 3px); }
.intention-deck-card:nth-child(2) { transform: rotate(4deg)  translate(4px, -1px); }
.intention-deck-card:nth-child(3) { transform: rotate(-1deg); border-color: var(--rule-hover); box-shadow: var(--shadow-sm); }
@keyframes deck-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.intention-label {
  font-family: var(--font-mono);
  font-size: var(--caps-5-size); font-weight: var(--caps-5-weight);
  letter-spacing: var(--caps-5-track);
  text-transform: uppercase; color: var(--gold-dim);
}
.intention-optional { font-style: italic; text-transform: none; letter-spacing: .04em; opacity: .7; }
.intention-input {
  width: 100%; resize: vertical; min-height: 2.8rem; text-align: center;
  background: color-mix(in srgb, var(--ink-800) 70%, transparent);
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  color: var(--text); font-family: var(--font-body); font-size: 1.05rem;
  padding: .85rem 1rem; transition: border-color var(--transition), box-shadow var(--transition);
}
.intention-input::placeholder { color: var(--text-dim); opacity: .6; font-style: italic; }
.intention-input:focus {
  outline: none; border-color: var(--rule-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-300) 10%, transparent);
}
.intention-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin-top: .25rem; }

/* ── Left column: position preview (intention) + question echo ── */
.reading-positions-preview { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pos-preview-item { display: flex; align-items: center; gap: .6rem; }
.pos-preview-num {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--rule-hover); color: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .68rem;
}
.pos-preview-name { font-family: var(--font-accent); font-size: .95rem; letter-spacing: .02em; color: var(--parchment-dim); }
.reading-asked {
  font-family: var(--font-body); font-style: italic; font-size: 1.05rem;
  color: var(--gold-200); line-height: 1.5; margin-bottom: 1rem;
  padding-left: .9rem; border-left: 2px solid var(--rule-hover);
}

/* Legend entries start muted ("face down") and fill in on reveal */
.legend-item:not(.is-revealed) .legend-name { color: var(--gold-dim); font-style: italic; opacity: .75; font-size: .72rem; }
.legend-item.is-revealed { cursor: pointer; }

/* ── Shuffle animation (reuses the loading deck) ─────────── */
.loading-cards.shuffling .loading-card { animation-name: shuffle-sway; animation-duration: 1s; }
@keyframes shuffle-sway {
  0%, 100% { transform: translateX(0) rotate(0); opacity: .8; }
  25%      { transform: translateX(-7px) rotate(-6deg); }
  75%      { transform: translateX(7px) rotate(6deg); }
}

/* ── Error stage ─────────────────────────────────────────── */
.reading-error { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 4rem 0; text-align: center; }
.reading-error-text { font-family: var(--font-body); font-style: italic; font-size: 1.1rem; color: var(--text-dim); }

/* ── Board stage: toolbar + position labels ──────────────── */
.reading-board { width: 100%; max-width: 1120px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.board-toolbar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 36px; margin-bottom: 1.5rem; padding: 0 .5rem; }
.board-hint { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.board-reveal-all { flex-shrink: 0; }
.spread-card-label {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dim); text-align: center;
  max-width: 13ch; line-height: 1.35; transition: color var(--transition);
}
.spread-card-wrap:has(.spread-card.revealed) .spread-card-label { color: var(--gold-200); }

/* ── Spread geometries. Card→cell mapping below depends on the ORDER of
      SPREADS[key].positions in data/tarot_data.py. ──────────── */

/* Single — one large focal card */
.reading-right .spread-layout.spread-single { justify-content: center; }
.spread-single .spread-card { width: 220px; height: 366px; }

/* Three Card — a row with the present (centre) lifted */
.spread-three-card .spread-card { width: 165px; height: 275px; }
.spread-three-card .spread-card-wrap:nth-child(2) { position: relative; top: -26px; }

/* Five Card Cross — a real plus on a 3×3 grid */
.reading-right .spread-layout.spread-five-card {
  display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto);
  gap: 1rem 1.25rem; justify-content: center; align-items: start;
}
.spread-five-card .spread-card { width: 122px; height: 203px; }
.spread-five-card .spread-card-wrap:nth-child(1) { grid-column: 2; grid-row: 2; } /* Situation — centre */
.spread-five-card .spread-card-wrap:nth-child(2) { grid-column: 1; grid-row: 2; } /* Challenge — left   */
.spread-five-card .spread-card-wrap:nth-child(3) { grid-column: 2; grid-row: 3; } /* Foundation — below */
.spread-five-card .spread-card-wrap:nth-child(4) { grid-column: 3; grid-row: 2; } /* Advice — right     */
.spread-five-card .spread-card-wrap:nth-child(5) { grid-column: 2; grid-row: 1; } /* Outcome — above    */

/* Horseshoe — a rising arch of 7. Offsets via position/top (NOT transform)
   so they coexist with the card-appear entrance animation, the same
   technique the Celtic Cross uses. position:relative offsets don't reserve
   space, so padding-bottom makes room for the dipped end cards. */
.reading-right .spread-layout.spread-horseshoe {
  display: grid; grid-template-columns: repeat(7, auto); gap: .9rem;
  justify-content: center; align-items: start; padding-bottom: 6rem;
}
.spread-horseshoe .spread-card { width: 116px; height: 193px; }
.spread-horseshoe .spread-card-wrap { position: relative; }
.spread-horseshoe .spread-card-wrap:nth-child(1),
.spread-horseshoe .spread-card-wrap:nth-child(7) { top: 76px; }
.spread-horseshoe .spread-card-wrap:nth-child(2),
.spread-horseshoe .spread-card-wrap:nth-child(6) { top: 38px; }
.spread-horseshoe .spread-card-wrap:nth-child(3),
.spread-horseshoe .spread-card-wrap:nth-child(5) { top: 10px; }
.spread-horseshoe .spread-card-wrap:nth-child(4) { top: 0; }

/* Celtic Cross keeps its calibrated grid; inline labels would clutter it,
   so it relies on the numbered legend instead. */
.spread-celtic-cross .spread-card-label { display: none; }

/* ── Responsive: collapse geometric spreads to a wrapped flow ── */
@media (max-width: 960px) {
  .reading-right .spread-layout.spread-five-card,
  .reading-right .spread-layout.spread-horseshoe {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    justify-content: center; align-items: flex-start; padding-bottom: 0;
  }
  .spread-horseshoe .spread-card-wrap,
  .spread-three-card .spread-card-wrap:nth-child(2) { top: 0; }
}
@media (max-width: 720px) {
  /* Celtic Cross can't reflow (fixed grid) — let it scroll on small screens */
  .reading-board { overflow-x: auto; }
}
@media (max-width: 560px) {
  .spread-option { flex-basis: calc(50% - .3rem); }
  .intention-actions { flex-direction: column-reverse; }
  .intention-actions .btn { width: 100%; justify-content: center; }
}

/* ── Reduced motion: deal in place, no shuffle/float ─────── */
@media (prefers-reduced-motion: reduce) {
  .reading-layout .spread-card-wrap { animation: none !important; opacity: 1 !important; }
  .reading-layout .spread-card-flip { transition: none !important; }
  .intention-deck { animation: none !important; }
  .loading-cards.shuffling .loading-card { animation: none !important; }
}

/* ── Hero without border (spread view) ───────────────────── */
.page-hero-arch--spread {
  border-bottom: none;
  padding-bottom: .5rem;
}

/* ── Suit tiles (inside hero, spread view only) ──────────── */
.suit-tiles {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-top: 1.75rem;
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.suit-tile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem 1.4rem .75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .22s;
  color: var(--gold-500);
  position: relative;
}
.suit-tile::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tile-accent, var(--gold-300)), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.suit-tile:hover { color: var(--gold-300); }
.suit-tile:hover::after { opacity: .5; }
.suit-tile--active { color: var(--gold-200); }
.suit-tile--active::after { opacity: 1; }
.suit-tile--active .suit-tile-sigil { color: var(--tile-accent); filter: drop-shadow(0 0 8px currentColor); }
.suit-tile--active .suit-tile-name { color: var(--parchment); }
.suit-tile--active .suit-tile-count { color: var(--gold-200); opacity: 1; }

.suit-tile-sigil {
  line-height: 1;
  color: var(--gold-500);
  transition: color .25s, filter .25s;
  font-size: 1.4rem;
}
.sigil-svg { width: 24px; height: 24px; display: block; }
.suit-tile--active .suit-tile-sigil {
  color: var(--tile-accent);
  filter: drop-shadow(0 0 6px currentColor);
}
.suit-tile-name {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--parchment-dim);
  transition: color .22s;
}
.suit-tile-el {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--parchment-dim); opacity: .8;
}
.suit-tile-count {
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .1em;
  color: var(--gold-dim); opacity: .7;
  margin-top: .1rem;
}

/* ============================================================
   SPREAD TABLE (Direction C)
   ============================================================ */
.st-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  color: var(--text);
  /* When a suit tile scrolls the arc into view, keep it clear of the fixed
     60px navbar (+16px breathing gap). See the .suit-tile click handler. */
  scroll-margin-top: 76px;
  padding-bottom: .5rem;
}

/* Ambient glows */
.st-glow { position: absolute; pointer-events: none; }
.st-glow-top {
  width: 80%; max-width: 1100px; height: 500px;
  left: 50%; transform: translateX(-50%); top: -200px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--gold-100) 9%, transparent), transparent 60%);
}
.st-glow-center {
  width: 55%; max-width: 700px; height: 700px;
  left: 50%; transform: translateX(-50%); top: 260px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--gold-100) 9%, transparent), transparent 65%);
}
.st-glow-bottom {
  width: 100%; height: 350px;
  left: 0; bottom: -100px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--gold-300) 7%, transparent), transparent 65%);
}

/* ── Major Arcana arc ─────────────────────────────────────── */
.st-arc-section {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  z-index: 4;
  overflow: visible;
}

/* Constellation grain behind the fan */
.st-arc-section::before {
  content: '';
  position: absolute; inset: -60px 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(200,162,76,0.45) 0.5px, transparent 0.5px),
    radial-gradient(circle, rgba(200,162,76,0.3) 0.5px, transparent 0.5px);
  background-size: 97px 97px, 53px 53px;
  background-position: 0 0, 28px 28px;
  opacity: .18;
  z-index: 0;
}
.st-arc-container {
  position: relative;
  width: 100%;
  min-height: 120px;
  overflow: visible;
}
.st-arc-rule-svg {
  position: absolute;
  bottom: 28px; left: 0;
  width: 100%; height: 40px;
  pointer-events: none;
}
.st-arc-label {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: .75rem 0 .35rem;
  z-index: 5;
}
/* Centre text: diamond dot + JetBrains Mono progress label */
.st-arc-label-inner {
  display: flex; align-items: center; gap: 9px;
}
.st-arc-label-dot {
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--gold-300);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.st-arc-label-inner span {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .22em;
  color: var(--gold-400); text-transform: uppercase;
}

/* Nav discs — mirrors arcana-hero .nav-disc / .nav-btn */
.st-suit-nav {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
  padding: 0;
}
.st-suit-nav:hover { transform: scale(1.06); filter: brightness(1.2); }
.st-suit-disc {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--gold-300) 65%, transparent);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--gold-300) 16%, transparent), rgba(8,7,14,.55));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.8);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.st-suit-nav:hover .st-suit-disc,
.st-suit-nav:focus-visible .st-suit-disc {
  border-color: var(--gold-200);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--gold-200) 28%, transparent), rgba(8,7,14,.5));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-200) 45%, transparent),
              0 0 22px -2px color-mix(in srgb, var(--gold-300) 55%, transparent);
}
.st-suit-roman {
  font-family: var(--font-display); font-style: normal;
  font-size: 15px; letter-spacing: .06em; line-height: 1;
  color: var(--gold-pale);
  transition: color .25s;
}
.st-suit-nav:hover .st-suit-roman { color: var(--gold-100); }
.st-suit-nav-label {
  font-family: var(--font-display);
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-dim);
  transition: color .25s;
}
.st-suit-nav:hover .st-suit-nav-label { color: var(--gold-pale); }

/* Individual arc card */
.st-arc-card {
  position: absolute;
  width: 120px; height: 180px;
  background: var(--bg2);
  border: 1px solid var(--gold-500);
  border-radius: 3px;
  overflow: hidden;
  transform-origin: 50% 100%;
  box-shadow: 0 6px 18px rgba(0,0,0,.72),
              inset 0 0 0 1px color-mix(in srgb, var(--gold-300) 10%, transparent);
  cursor: pointer;
  text-decoration: none;
  translate: 0 0;
  scale: 1;
  transition: left .7s cubic-bezier(.22, .8, .3, 1),
              top  .7s cubic-bezier(.22, .8, .3, 1),
              width  .7s cubic-bezier(.22, .8, .3, 1),
              height .7s cubic-bezier(.22, .8, .3, 1),
              transform .7s cubic-bezier(.22, .8, .3, 1),
              translate .6s cubic-bezier(.22, .8, .3, 1),
              scale .6s cubic-bezier(.22, .8, .3, 1),
              box-shadow .5s ease, border-color .4s ease,
              filter .45s ease;
}
.st-arc-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: .85; display: block;
  transition: opacity .22s;
}

.st-arc-card.lifted {
  left: var(--disp-x) !important;
  top:  var(--disp-y) !important;
  width:  var(--disp-w) !important;
  height: var(--disp-h) !important;
  transform: rotate(0deg) !important;
  translate: 0 0;
  scale: 1;
  filter: brightness(1.06);
  border-color: var(--gold-200);
  box-shadow: 0 32px 80px rgba(0,0,0,.92),
              0 0 0 1px var(--gold-300),
              0 0 60px color-mix(in srgb, var(--gold-300) 40%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--gold-100) 14%, transparent);
  z-index: 50 !important;
}
.st-arc-card.lifted img { opacity: 1; }
.st-arc-num {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display); font-size: var(--step--1); letter-spacing: .18em;
  color: var(--gold-200);
  padding: 14px 0 3px;
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
}
.st-arc-card.lifted .st-arc-num { color: var(--gold-100); }

/* Corner flourishes */
.st-arc-corner {
  position: absolute;
  font-size: .45rem; line-height: 1;
  color: var(--gold-300);
  opacity: 0;
  transition: opacity .22s;
  pointer-events: none;
}
.st-arc-corner.tl { top: 5px; left: 6px; }
.st-arc-corner.br { bottom: 5px; right: 6px; }
.st-arc-card.lifted .st-arc-corner { opacity: .75; color: var(--gold-100); }

/* Halo bloom on active card */
.st-arc-card.lifted::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%,
    color-mix(in srgb, var(--gold-100) 18%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 8;
}

/* Placeholder when no image */
.st-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gold-300) 18%, transparent), transparent 65%);
}
.st-ph span { font-size: 1.4rem; color: var(--gold); opacity: .7; }
.st-ph b {
  font-family: var(--font-display); font-weight: 400;
  font-size: .6rem; color: var(--gold-pale); letter-spacing: .18em;
}

/* ── Showcase — meta text only, card displayed in-arc ─────── */
.st-showcase {
  position: relative; z-index: 10;
  display: block;
  padding: .75rem clamp(1.5rem, 4vw, 4rem) 1.25rem;
  max-width: 1100px; margin: 0 auto;
}

/* RIGHT: large card — tall tarot proportions, bleeds toward right margin */
.st-showcase-frame {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  width: clamp(200px, 18vw, 300px);
  aspect-ratio: 2 / 3;
  height: auto;
  background: var(--bg2);
  border: 1px solid color-mix(in srgb, var(--gold-300) 50%, transparent);
  border-radius: 4px; overflow: hidden;
  transition: border-color .38s, box-shadow .38s;
  text-decoration: none; display: block;
}
/* Two fixed image layers — opacity crossfade only, no keyframes */
.st-showcase-img-wrap {
  position: absolute; inset: 0;
}
@keyframes stShimmer {
  0%   { opacity: 0; transform: scale(.6); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Showcase meta — full-width strip below the arc */
.st-showcase-meta {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  row-gap: .4rem;
  align-items: center;
  padding: .5rem 0;
  border-top: 1px solid var(--rule);
}

/* Eyebrow row: gold dot + small-caps label — mirrors arcana-hero eyebrow */
.st-meta-eyebrow {
  display: flex; align-items: center; gap: 10px;
  grid-column: 1; grid-row: 1;
}
.st-meta-eyebrow-dot {
  width: 5px; height: 5px;
  background: var(--gold-300);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  flex-shrink: 0;
}
.st-meta-eyebrow-label {
  font-family: var(--font-display); font-size: .58rem; letter-spacing: .38em;
  color: var(--gold-dim); text-transform: uppercase;
  transition: color .25s;
}

/* Big card name — same Cinzel display treatment as home title */
.st-meta-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 500;
  color: var(--gold-pale); letter-spacing: -.005em;
  margin: 0; line-height: .95;
  text-shadow: 0 0 60px color-mix(in srgb, var(--gold-100) 14%, transparent);
  grid-column: 1; grid-row: 2;
}


/* Keywords */
.st-meta-kw-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem;
  grid-column: 2; grid-row: 1;
  justify-content: flex-end;
}
.st-kw {
  font-family: var(--font-display);
  font-size: var(--caps-4-size); font-weight: var(--caps-4-weight);
  letter-spacing: var(--caps-4-track);
  text-transform: uppercase; color: var(--gold-dim);
  white-space: nowrap;
}
.st-kw-sep {
  color: var(--gold-500); font-size: .5rem;
}

.st-meta-cta {
  display: inline-flex; align-items: center;
  text-decoration: none;
  cursor: pointer;
  padding: .5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  transition: border-color .25s;
  grid-column: 2; grid-row: 2;
  justify-self: end;
}
.st-meta-cta:hover {
  border-color: color-mix(in srgb, var(--gold-200) 70%, transparent);
}
.st-cta-inner {
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  transition: color .25s;
}
.st-meta-cta:hover .st-cta-inner { color: var(--gold-pale); }

@media (max-width: 900px) {
  .st-showcase-meta {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .st-meta-eyebrow { grid-column: 1; grid-row: 1; }
  .st-meta-name    { grid-column: 1; grid-row: 2; }
  .st-meta-kw-block { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .st-meta-cta     { grid-column: 1; grid-row: 4; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .st-arc-card {
    transition: box-shadow .22s, border-color .22s, opacity .22s;
  }
  .st-arc-card.lifted {
    translate: 0 -20px;
    scale: 1.04;
    filter: brightness(1.06);
  }
  .suit-tile { transition: none; }

  /* Reading + card-detail polish: drop the entrance, flip, and tab-crossfade
     motion. `animation: none` reverts the staggered reveals to their resting
     state (opacity 1, no transform) thanks to the `both` fill-mode. The flip
     still resolves to the card face — it just snaps instead of rotating. */
  .card-detail-visual,
  .card-detail-spotlight-text .page-arch-eyebrow,
  .card-detail-title,
  .card-detail-hero-meta,
  .card-detail-spotlight-text .card-detail-info,
  .tab-content.active { animation: none; }
  .spread-card-wrap { animation: none; opacity: 1; }
  .spread-card-flip { transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--rule); padding: 2.5rem;
  margin-top: 4rem; position: relative; z-index: 1;
}
.footer-inner { text-align: center; }
.footer-rule {
  display: block; width: 36px; height: 1px;
  background: var(--rule); margin: 0 auto .75rem;
  border: none;
}
.footer-text {
  font-family: var(--font-accent);
  font-size: var(--caps-5-size); font-weight: var(--caps-5-weight);
  letter-spacing: var(--caps-5-track);
  color: var(--text-dim); text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .card-detail-hero { padding: 0 1.5rem; }
  .card-detail-spotlight { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; }
  .card-large { max-width: 300px; }
  .card-detail-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  .card-detail-hero-meta { gap: .5rem; }
}

@media (max-width: 900px) {
  /* Stack hero vertically on tablet/mobile */
  .hero-left {
    padding: 6rem 2rem 2.5rem;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .navbar { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 60px; left: 0; right: 0;
    background: color-mix(in srgb, var(--ink-900) 98%, transparent); border-bottom: 1px solid var(--rule);
    padding: 1rem 1.5rem; gap: .75rem;
  }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .spread-layout { gap: .65rem; }
  .spread-card { width: 120px; height: 200px; }
  .spread-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .spread-options { grid-template-columns: 1fr; }
  .card-detail-spotlight { gap: 1.5rem; }
}

/* ============================================================
   LORE — history & symbolism page (/lore)
   Lives in its own sheet: static/css/lore.css, loaded from
   lore.html's {% block head %}. Nothing lore-specific belongs here.
   ============================================================ */