/* ==========================================================================
   soulmatereadings.com — "Candlelit Night" skin (presentation layer only).
   Dark-first by design: midnight indigo ground, candle-flame gold accent,
   warm cream text. No frameworks, no build step.
   ========================================================================== */

:root {
  --ink-0: #0B0917;          /* deepest night — page ground   */
  --ink-1: #131027;          /* midnight indigo — section     */
  --ink-2: #1D1734;          /* raised surface / card         */
  --plum:  #261B40;          /* deep plum highlight           */
  --cream: #F4ECDC;          /* primary text                  */
  --cream-dim: #C4B8AC;      /* secondary text                */
  --cream-faint: #94879B;    /* tertiary / disclaimer         */
  --gold: #E0A94F;           /* candle-flame gold — THE accent*/
  --gold-hi: #F2C878;
  --gold-dim: #A87F35;
  --ember: #DF7A3C;
  --line: rgba(224, 169, 79, .18);
  --line-soft: rgba(244, 236, 220, .09);
  --glow: rgba(224, 169, 79, .40);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--ink-0);
  /* faint scattered stars + two vast night-sky glows */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg fill='%23F4ECDC'%3E%3Ccircle cx='72' cy='94' r='1' opacity='.30'/%3E%3Ccircle cx='210' cy='40' r='.7' opacity='.22'/%3E%3Ccircle cx='355' cy='150' r='1.1' opacity='.26'/%3E%3Ccircle cx='520' cy='75' r='.8' opacity='.20'/%3E%3Ccircle cx='640' cy='210' r='1' opacity='.28'/%3E%3Ccircle cx='120' cy='300' r='.7' opacity='.20'/%3E%3Ccircle cx='300' cy='390' r='1' opacity='.24'/%3E%3Ccircle cx='470' cy='330' r='.7' opacity='.18'/%3E%3Ccircle cx='610' cy='470' r='1.1' opacity='.26'/%3E%3Ccircle cx='90' cy='540' r='1' opacity='.24'/%3E%3Ccircle cx='250' cy='620' r='.7' opacity='.18'/%3E%3Ccircle cx='430' cy='560' r='1' opacity='.26'/%3E%3Ccircle cx='560' cy='650' r='.7' opacity='.20'/%3E%3C/g%3E%3Cg fill='%23E0A94F'%3E%3Ccircle cx='170' cy='180' r='1' opacity='.30'/%3E%3Ccircle cx='585' cy='390' r='1' opacity='.26'/%3E%3Ccircle cx='340' cy='680' r='1' opacity='.24'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 85% -100px, rgba(58, 40, 96, .45), transparent 65%),
    radial-gradient(1000px 800px at -10% 45%, rgba(38, 27, 64, .55), transparent 60%);
  background-attachment: fixed;
  color: var(--cream);
  font: 400 1.03rem/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(224, 169, 79, .35); color: var(--cream); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.5rem, 8.5vw, 4rem); font-weight: 500; margin: 0 0 .7rem; }
h2 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); margin: 0 0 1rem; }
h3 { font-size: 1.45rem; margin: 1.4rem 0 .5rem; }
h1 em, h2 em { color: var(--gold-hi); font-style: italic; }

p { margin: 0 0 1.05rem; }
strong { color: var(--cream); }
em { color: inherit; }

a { color: var(--gold-hi); text-decoration-color: rgba(224, 169, 79, .4); text-underline-offset: 3px; }
a:hover { color: #FFDFA0; text-decoration-color: var(--gold-hi); }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* full-bleed section escape hatch (content stays in .wrap/.wrap-wide) */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---------- eyebrows / small labels ---------- */
.eyebrow {
  display: block;
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.eyebrow::before { content: '\2726\00a0\00a0'; color: var(--gold-dim); } /* ✦ */

.micro { color: var(--cream-dim); font-size: .9rem; font-family: var(--sans); }

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 12px 0;
  background: rgba(11, 9, 23, .74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
header.site .wrap-wide { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: auto; height: 42px; flex: none; filter: drop-shadow(0 0 6px rgba(224, 169, 79, .35)); }
.brand-word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .03em;
  color: var(--cream);
  white-space: nowrap;
}
.brand-word em { font-style: italic; color: var(--gold-hi); }
nav.main { margin-left: auto; display: flex; gap: clamp(12px, 3vw, 26px); }
nav.main a {
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
nav.main a.on, nav.main a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (max-width: 520px) {
  .brand-word { font-size: 1.05rem; }
  nav.main a { letter-spacing: .08em; font-size: .72rem; }
  header.site .wrap-wide { justify-content: center; }
  nav.main { margin-left: 0; }
}

main { padding: 0 0 40px; }

/* ---------- sections ---------- */
.sec { padding: clamp(3.2rem, 8vw, 5rem) 0 0; scroll-margin-top: 90px; }
#book { scroll-margin-top: 96px; }
.sec-center { text-align: center; }

/* constellation divider (styles existing <hr class="divider">) */
hr.divider, .divider {
  border: 0;
  height: 40px;
  margin: clamp(2.8rem, 7vw, 4.2rem) auto 0;
  max-width: 420px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='40' viewBox='0 0 420 40'%3E%3Cg stroke='%23A87F35' stroke-width='1' opacity='.6'%3E%3Cline x1='0' y1='20' x2='168' y2='20'/%3E%3Cline x1='252' y1='20' x2='420' y2='20'/%3E%3C/g%3E%3Cg fill='%23E0A94F'%3E%3Cpath d='M210 8l2.6 9.4L222 20l-9.4 2.6L210 32l-2.6-9.4L198 20l9.4-2.6z'/%3E%3Ccircle cx='182' cy='20' r='1.6' opacity='.8'/%3E%3Ccircle cx='238' cy='20' r='1.6' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(4.2rem, 12vw, 7.5rem) 0 clamp(4.6rem, 12vw, 7rem);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0D0A1D 0%, #131027 55%, #0B0917 100%);
  border-bottom: 1px solid var(--line-soft);
}
/* Heritage underlay: the original Soulmate Readings "cosmic lovers" banner,
   ghosted into the night sky — brand continuity, treated so it reads as
   mythology rather than the 2011 artwork. Sits under the starfield. */
.hero-heritage {
  position: absolute;
  inset: 0;
  background: url('/assets/soulmates.jpg') center 32% / cover no-repeat;
  opacity: .40;
  filter: saturate(.85) brightness(.72) contrast(1.05);
  pointer-events: none;
}
.hero-heritage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,10,29,.40) 0%, rgba(13,10,29,.06) 38%, rgba(11,9,23,.88) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(13,10,29,.55) 100%);
}
.hero .stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-glow {
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: 150vw;
  max-width: 1600px;
  height: 75%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
      rgba(226, 138, 60, .30) 0%,
      rgba(224, 169, 79, .12) 38%,
      transparent 70%);
  pointer-events: none;
}
html.anim .hero-glow { animation: candle 7s ease-in-out infinite alternate; }
@keyframes candle {
  from { opacity: .7; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;  transform: translateX(-50%) scale(1.07); }
}
.hero-inner { position: relative; z-index: 2; }
.hero .lede { font-size: 1.12rem; max-width: 34em; margin: 0 auto 1.6rem; color: var(--cream-dim); }
.hero h1 { text-shadow: 0 0 60px rgba(224, 169, 79, .25); }
h1, h2, h3 { text-wrap: balance; } /* no orphaned last words, ever */
.hero .micro { margin-top: 1.1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(180deg, #EDBB63 0%, #D99A3B 55%, #C9832B 100%);
  color: #241505;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 36px;
  font: 700 1rem/1.2 var(--sans);
  letter-spacing: .02em;
  cursor: pointer;
  min-width: 210px;
  text-align: center;
  box-shadow: 0 3px 16px rgba(224, 169, 79, .28), inset 0 1px 0 rgba(255, 240, 210, .55);
  transition: box-shadow .3s, transform .3s, filter .3s;
}
.btn:hover, .btn:focus-visible {
  color: #241505;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 30px var(--glow), inset 0 1px 0 rgba(255, 240, 210, .55);
}
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.btn:active { transform: translateY(0); }
.btn-block { display: block; width: 100%; }

/* ---------- cards ---------- */
.card {
  position: relative;
  background: linear-gradient(165deg, var(--ink-2) 0%, #171130 60%, #130E26 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  margin: 0 0 20px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .38);
}

/* gilded: inner gold hairline, like a tarot card border */
.gilded { border-color: rgba(224, 169, 79, .38); }
.gilded::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(224, 169, 79, .28);
  border-radius: 10px;
  pointer-events: none;
}

/* ---------- offerings (DB-driven, styled as gilded tarot cards) ---------- */
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
  gap: 22px;
  align-items: stretch;
  margin: 1.6rem 0 1rem;
}
.offering {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 34px 26px 26px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.offering:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 169, 79, .55);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .5), 0 0 34px rgba(224, 169, 79, .12);
}
.offering-sigil { height: 30px; margin: 0 auto 12px; color: var(--gold); }
.offering-sigil svg { height: 100%; width: auto; display: block; }
.offering h3 { margin: 0 0 .35rem; font-size: 1.55rem; }
.offering .price {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold-hi);
  margin-bottom: .8rem;
}
.offering .price .micro { font-size: .85rem; color: var(--cream-dim); }
.offering p { color: var(--cream-dim); font-size: .98rem; }
.offering form { margin-top: auto !important; padding-top: 16px; } /* beats the template's inline margin so buttons baseline-align across cards */

/* optional coupon input on offering forms (admin toggle: show_coupon_field) */
.coupon-row { margin: 0 0 12px; text-align: left; }
.coupon-row label { display: block; margin: 0 0 4px; font-size: .78rem; letter-spacing: .04em; }
.coupon-input {
  width: 100%;
  background: rgba(11, 9, 23, .55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--cream);
  font: 600 .95rem/1.2 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.coupon-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224, 169, 79, .22); }

.price { color: var(--gold-hi); font-size: 1.5rem; font-weight: 600; font-family: var(--serif); }

/* ---------- honest lists (IS / IS NOT) ---------- */
.truth-cols { display: grid; gap: 20px; margin: 1.4rem 0 .4rem; }
@media (min-width: 860px) { .truth-cols { grid-template-columns: 1fr 1fr; } }
.truth-cols .card { margin: 0; }
.truth-cols .card > p:first-child { margin-bottom: .9rem; }

ul.honest { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.honest li { position: relative; padding-left: 1.7rem; margin-bottom: .7rem; color: var(--cream-dim); }
ul.honest li strong { color: var(--cream); }
ul.honest li::before { content: '\2726'; position: absolute; left: 0; top: 0; color: var(--gold); }
ul.honest.honest-not li::before { content: '\2715'; color: var(--cream-faint); font-size: .85em; top: .15em; }

/* ---------- how it works: steps that light in sequence ---------- */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.6rem 0 1.2rem; }
ol.steps li { position: relative; padding: 0 0 1.5rem 62px; margin: 0; }
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 1.2rem/1 var(--serif);
  color: var(--gold-hi);
  background: #181231;
  border: 1px solid var(--gold-dim);
  transition: border-color .5s, box-shadow .5s, color .5s;
}
ol.steps li:not(:last-child)::after {   /* thread between the steps */
  content: '';
  position: absolute;
  left: 20px;
  top: 42px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), transparent);
}
ol.steps li strong { color: var(--cream); }

/* ---------- scroll reveals (only when JS + motion allowed) ---------- */
html.anim .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
html.anim .rv.in { opacity: 1; transform: none; }

/* staggered children (steps light up one by one) */
html.anim .rv-seq > li { opacity: .18; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease; }
html.anim .rv-seq > li::before { border-color: rgba(224, 169, 79, .18); color: var(--cream-faint); }
html.anim .rv-seq.in > li { opacity: 1; transform: none; }
html.anim .rv-seq.in > li::before {
  border-color: var(--gold);
  color: var(--gold-hi);
  box-shadow: 0 0 16px rgba(224, 169, 79, .38);
}
html.anim .rv-seq.in > li:nth-child(1), html.anim .rv-seq.in > li:nth-child(1)::before { transition-delay: .05s; }
html.anim .rv-seq.in > li:nth-child(2), html.anim .rv-seq.in > li:nth-child(2)::before { transition-delay: .40s; }
html.anim .rv-seq.in > li:nth-child(3), html.anim .rv-seq.in > li:nth-child(3)::before { transition-delay: .75s; }
html.anim .rv-seq.in > li:nth-child(4), html.anim .rv-seq.in > li:nth-child(4)::before { transition-delay: 1.10s; }
html.anim .rv-seq.in > li:nth-child(5), html.anim .rv-seq.in > li:nth-child(5)::before { transition-delay: 1.45s; }
html.anim .rv-seq.in > li:nth-child(6), html.anim .rv-seq.in > li:nth-child(6)::before { transition-delay: 1.80s; }

/* ---------- tarot fan: Love · Path · Clarity ---------- */
.fan-sec { text-align: center; }
.fan {
  position: relative;
  height: 250px;
  margin: 2.4rem auto 0;
  max-width: 520px;
  perspective: 1100px;
}
.tcard {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 132px;
  height: 214px;
  margin-left: -66px;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  transform-origin: 50% 120%;
}
.tcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, .7, .3, 1);
}
.tface {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(224, 169, 79, .5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.tface::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(224, 169, 79, .3);
  border-radius: 8px;
  pointer-events: none;
}
.tback {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 169, 79, .16), transparent 55%),
    linear-gradient(160deg, #241B44 0%, #171130 100%);
  color: var(--gold-dim);
}
.tfront {
  background: linear-gradient(170deg, #201743 0%, #151027 100%);
  color: var(--gold-hi);
}
.tface svg { width: 44px; height: 44px; }
.tlabel {
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: .3em; /* optically recenter letterspaced caps */
}
/* resting state (also the no-JS / reduced-motion state): fanned, face up */
.t1 { transform: translateX(-108px) rotate(-11deg); }
.t2 { transform: translateY(-14px); }
.t3 { transform: translateX(108px) rotate(11deg); }
/* pre-entrance state, only under animation */
html.anim .fan-sec:not(.in) .t1,
html.anim .fan-sec:not(.in) .t2,
html.anim .fan-sec:not(.in) .t3 { transform: translateX(0) rotate(0); }
html.anim .fan-sec:not(.in) .tcard-inner { transform: rotateY(180deg); }
html.anim .fan-sec.in .t1 { transition-delay: .1s; }
html.anim .fan-sec.in .t2 { transition-delay: .2s; }
html.anim .fan-sec.in .t3 { transition-delay: .3s; }
html.anim .fan-sec.in .t1 .tcard-inner { transition-delay: .45s; }
html.anim .fan-sec.in .t2 .tcard-inner { transition-delay: .70s; }
html.anim .fan-sec.in .t3 .tcard-inner { transition-delay: .95s; }
@media (max-width: 480px) {
  .fan { height: 210px; }
  .tcard { width: 106px; height: 172px; margin-left: -53px; }
  .t1 { transform: translateX(-84px) rotate(-11deg); }
  .t3 { transform: translateX(84px) rotate(11deg); }
  .tface svg { width: 34px; height: 34px; }
}

/* ---------- micro-ritual: hold your question ---------- */
.ritual-sec { text-align: center; }
.ritual-card {
  display: block;
  margin: 2rem auto 0;
  width: 186px;
  height: 296px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}
.ritual-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; border-radius: 14px; }
.rc-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, .7, .3, 1);
}
.ritual-card.is-open .rc-inner { transform: rotateY(180deg); }
.rc-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(224, 169, 79, .55);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 18px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 30px rgba(224, 169, 79, .10);
}
.rc-face::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(224, 169, 79, .3);
  border-radius: 9px;
  pointer-events: none;
}
.rc-back {
  background:
    radial-gradient(circle at 50% 38%, rgba(224, 169, 79, .18), transparent 58%),
    linear-gradient(160deg, #271D4A 0%, #161129 100%);
  color: var(--gold);
}
.rc-back .rc-hint {
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding-left: .28em;
}
.rc-front {
  transform: rotateY(180deg);
  background: linear-gradient(170deg, #221948 0%, #151027 100%);
}
.rc-front .rp {
  font: 500 italic 1.08rem/1.5 var(--serif);
  color: var(--cream);
}
.rc-front::after { content: '\2726'; color: var(--gold); font-size: .8rem; }
.ritual-hint { margin-top: 1.2rem; }
/* the ritual is interactive-only; without JS it would be a dead button */
html:not(.js) .ritual-sec { display: none; }
html.anim .ritual-card:hover .rc-inner { box-shadow: none; }
html.anim .ritual-card:not(.is-open):hover { filter: drop-shadow(0 0 18px rgba(224, 169, 79, .25)); }

/* ---------- her story / signoff ---------- */
.signoff { font-style: italic; margin-top: 1.4rem; font-family: var(--serif); font-size: 1.2rem; }
.signoff strong { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-hi); }

/* ---------- final CTA band ---------- */
.final-cta {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 5.5rem) 0;
  margin-top: clamp(3rem, 8vw, 4.5rem);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(600px 300px at 50% 115%, rgba(226, 138, 60, .22), transparent 70%),
    linear-gradient(180deg, transparent, #100C22);
}

/* ---------- celebration (paid thank-you page only) ---------- */
body.celebrate main { position: relative; }
body.celebrate main::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  width: min(150vw, 1400px);
  height: 460px;
  background: radial-gradient(ellipse at 50% 0%,
      rgba(224, 169, 79, .22) 0%,
      rgba(226, 138, 60, .10) 45%,
      transparent 72%);
  pointer-events: none;
}
html.anim body.celebrate main::before,
html.anim .celebrate main::before { animation: candle-top 6s ease-in-out infinite alternate; }
@keyframes candle-top {
  from { opacity: .75; }
  to   { opacity: 1; }
}
.celebrate .wrap > h1 { text-align: center; text-shadow: 0 0 60px rgba(224, 169, 79, .3); }
.cta-card {
  border-color: rgba(224, 169, 79, .6);
  background: linear-gradient(165deg, #2B1F4C 0%, #1B1433 60%, #151027 100%);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(224, 169, 79, .16);
}
.cta-card a { color: var(--gold-hi); }

/* ---------- blog ---------- */
.card h3 a { color: var(--cream); text-decoration: none; }
.card h3 a:hover { color: var(--gold-hi); }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line);
  background: #080614;
  padding: 40px 0 52px;
  color: var(--cream-dim);
  font-size: .9rem;
  font-family: var(--sans);
}
footer.site .foot-mark { display: block; width: auto; height: 44px; margin-bottom: 14px; opacity: .9; }
footer.site strong { color: var(--cream); font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em; }
footer.site nav { margin: .7rem 0 1rem; display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { color: var(--cream-dim); }
footer.site a:hover { color: var(--gold-hi); }
.disclaimer { font-size: .78rem; line-height: 1.55; color: var(--cream-faint); margin-top: .8rem; }

/* ---------- P.S. personal note (booking section trust block) ---------- */
.ps-note {
  max-width: 620px;
  margin: 2rem auto 1.3rem;
  text-align: left;
  border-color: rgba(224, 169, 79, .5);
}
.ps-note .signoff { margin-top: .8rem; font-size: 1.1rem; }

/* ---------- explore strip: topic teaser cards (quiet, secondary to booking) ---------- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
  margin: 1.4rem 0 0;
}
a.explore-card {
  display: block;
  margin: 0;
  padding: 16px 18px;
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  transition: border-color .3s, transform .3s;
}
a.explore-card:hover { border-color: rgba(224, 169, 79, .5); transform: translateY(-2px); }
a.explore-card.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(224, 169, 79, .18); }
.strip-top { text-align: center; margin: 1.4rem 0 0; }
.strip-top a { font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
a.explore-card strong {
  display: block;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: .2rem;
}
a.explore-card span { color: var(--cream-dim); }

/* ---------- topic pages ---------- */
.topic-cta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  margin-top: 1.8rem;
}

/* ---------- footer topic links ---------- */
footer.site nav.foot-topics { margin: 0 0 1rem; gap: 6px 16px; font-size: .82rem; }
footer.site .foot-topics-label { color: var(--cream-faint); }

/* ---------- reduced motion: everything lands in its final state, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}