@import url("./colors_and_type.css");

/* ------------------------------------------------------------------
   TYPE OVERRIDES — keep Pirata One for display only, swap body & meta
   to readable serifs already loaded by colors_and_type.css.
   ------------------------------------------------------------------ */
:root {
  --font-display:   "Pirata One", "UnifrakturMaguntia", serif;       /* h1/h2/h3, wordmark, card titles */
  --font-smallcaps: "Cinzel", "Trajan Pro", serif;                   /* eyebrows, meta, buttons */
  --font-body:      "EB Garamond", "Garamond", "Georgia", serif;     /* paragraphs, card backs, schedules */
  --font-script:    "Caveat", "Homemade Apple", cursive;             /* signatures */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* fixed .nav clearance so section titles aren't tucked under */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--parchment);
  color: var(--fg-on-parchment);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Global cursor — gold sigil */
body { cursor: url("./assets/ornaments/sigil-cursor.svg") 8 8, auto; }

/* Section base */
section { position: relative; padding: 120px 0; }
/* Tighten the Witch Is → Tickets gap (was ~240px combined, now ~100px) */
#witch-is { padding-bottom: 50px; }
#tithe { padding-top: 50px; }
section.dark { background: var(--ink); color: var(--fg-on-ink); }
section.dark h1, section.dark h2, section.dark h3 { color: var(--fg-on-ink); }
section.dark .eyebrow { color: var(--gold); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.container.narrow { max-width: 860px; }

/* Universal grain + vignette overlays */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: drift 12s steps(6) infinite;
}
section.dark .grain { mix-blend-mode: screen; opacity: 0.09; }
@keyframes drift { 0% { transform: translate(0,0); } 100% { transform: translate(-12px,-8px); } }

.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(10,10,10,0.22) 100%);
}

section > .container, section > .full { position: relative; z-index: 2; }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-smallcaps);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before,
.eyebrow::after { content: ""; height: 1px; width: 22px; background: var(--gold-deep); }
.eyebrow.no-rules::before, .eyebrow.no-rules::after { display: none; }

/* Hero */
.hero {
  min-height: 100vh; padding: 80px 0 100px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 28px;
  /* Island photograph as the hero ground — dusk lake with fire lantern,
     the natural composition mirrors a portal-to-Neverland (dock leads
     into water, sky above for the wordmark, lantern flame for the gold
     accents). Heavy vertical gradient keeps text legible. */
  background-image:
    linear-gradient(180deg,
      rgba(10,10,10,0.75) 0%,
      rgba(10,10,10,0.55) 22%,
      rgba(10,10,10,0.55) 60%,
      rgba(10,10,10,0.82) 92%,
      rgba(10,10,10,0.95) 100%
    ),
    url('photos/island/fire-lantern-dusk.jpeg');
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: fixed, fixed;   /* subtle parallax on desktop */
  background-repeat: no-repeat, no-repeat;
}
/* iOS Safari doesn't support background-attachment: fixed reliably */
@media (max-width: 820px), (hover: none) {
  .hero { background-attachment: scroll, scroll; }
}
/* Hero video — fills the section as moving background. The static
   background-image above (gradient + fire-lantern photo) serves as
   the poster/fallback while video loads or if it cannot play. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
/* Dark gradient over the video so wordmark + lede stay readable
   regardless of which frame is showing. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.55) 0%,
    rgba(10,10,10,0.35) 22%,
    rgba(10,10,10,0.40) 60%,
    rgba(10,10,10,0.78) 92%,
    rgba(10,10,10,0.95) 100%);
}
/* Existing starfield dims now that we have a real background */
.hero .starfield { opacity: 0.45; }
.hero .vignette  { opacity: 0.7; }
.hero .seal { width: 280px; aspect-ratio: 1; opacity: 1; filter: drop-shadow(0 0 28px rgba(143,92,224,0.35)) drop-shadow(0 8px 24px rgba(0,0,0,0.5)); }

.hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(64px, 10vw, 160px); line-height: 0.9; letter-spacing: 0.005em;
  margin: 0; color: var(--parchment); max-width: 1200px;
}
.hero h1 .wordmark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.32em;            /* equal optical space on both sides of the ampersand */
  white-space: nowrap;
  flex-wrap: wrap;
}
.hero h1 .wordmark__word { display: inline-block; }
.hero h1 .gold { color: var(--gold); }

/* Universal styled ampersand — plain upright serif glyph in mystic violet.
   Wherever an "&" appears as visible content, wrap it: <span class="amp">&</span> */
.amp {
  font-family: "EB Garamond", "Georgia", "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  color: var(--violet);
  text-transform: none;
  letter-spacing: 0;
  display: inline;
  padding: 0 0.02em;
}
/* On dark surfaces, switch to the lighter violet for contrast */
section.dark .amp,
.dark .amp,
.hero .amp,
nav.nav .amp,
footer .amp {
  color: var(--violet-soft);
}

/* Hero wordmark ampersand — same .amp shape, sized 1em next to the caps */
.hero h1 .amp {
  font-size: 1em;
  line-height: 1;
}

@media (max-width: 640px) {
  .hero h1 .wordmark { gap: 0.22em; }
}
.hero .tagline {
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-style: italic; font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.5; font-weight: 400;
  color: rgba(245,240,230,0.92); max-width: 720px;
}
.hero .tagline em { color: var(--gold); font-style: italic; }

/* Hero lede — three-paragraph manifesto block under the wordmark */
.hero__lede {
  max-width: 720px; margin: 0 auto;
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65; font-weight: 400;
  color: rgba(245,240,230,0.88);
  text-align: center;
}
.hero__lede p { margin: 0 0 14px; }
.hero__lede p:last-child { margin-bottom: 0; }
.hero__lede p:first-child {
  font-style: italic;
  font-size: clamp(22px, 2vw, 26px);
  color: rgba(245,240,230,0.96);
}
.hero__lede em { color: var(--gold); font-style: italic; }

/* Hero ledger — concrete what-you-get bullets between lede and CTAs */
.hero__ledger {
  margin: 36px auto 0; max-width: 760px;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 4px 0;
  font-family: "Cinzel", serif; font-weight: 600;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-pale); line-height: 1.6;
}
.hero__ledger span { padding: 0 2px; }
.hero__ledger .dot { color: var(--gold); padding: 0 10px; }
@media (max-width: 640px) {
  .hero__ledger { gap: 6px 0; letter-spacing: 0.18em; }
  .hero__ledger .dot { padding: 0 6px; }
}
.hero .small-meta {
  font-family: var(--font-smallcaps); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
}
.hero .small-meta .dot { color: var(--gold-deep); }

/* Scroll indicator */
.scroll-down {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
  font-family: var(--font-smallcaps); font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold);
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-down img { width: 32px; height: auto; opacity: 0.85; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* Subtle starfield for hero */
.starfield {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(214,168,74,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(143,92,224,0.45), transparent 60%),
    radial-gradient(1px 1px at 34% 72%, rgba(214,168,74,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 84%, rgba(240,212,136,0.5), transparent 60%),
    radial-gradient(1px 1px at 52% 8%, rgba(143,92,224,0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 56%, rgba(214,168,74,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 50%, rgba(143,92,224,0.35), transparent 60%),
    radial-gradient(1px 1px at 24% 92%, rgba(214,168,74,0.4), transparent 60%);
  animation: starfield-drift 60s linear infinite;
}
@keyframes starfield-drift { from { transform: translateY(0); } to { transform: translateY(-30px); } }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 48px; background: rgba(10,10,10,0.78); backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(201,168,106,0.25);
  font-family: var(--font-smallcaps); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-pale);
}
.nav .brand {
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0.05em; color: var(--parchment);
  display: flex; align-items: center; gap: 12px;
}
.nav .brand img { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(143,92,224,0.4)); }
.nav .links { display: flex; gap: 26px; }
.nav .links a { color: var(--gold-pale); text-decoration: none; transition: color .2s ease; }
.nav .links a:hover { color: var(--parchment); }
.nav .cta {
  border: 1px solid var(--gold-deep); padding: 9px 18px; color: var(--gold-pale);
  background: transparent; cursor: inherit; font-family: inherit; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; transition: all .2s ease;
}
.nav .cta:hover { background: var(--gold-deep); color: var(--ink); }
.nav .hamburger { display: none; width: 32px; height: 32px; border: 1px solid var(--gold-deep); background: transparent; cursor: inherit; align-items: center; justify-content: center; color: var(--gold-pale); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--fg-on-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; transform: translateY(-100%); transition: transform .45s cubic-bezier(.7,0,.3,1);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-display); text-transform: uppercase; color: var(--parchment);
  text-decoration: none; font-size: 36px; letter-spacing: 0.04em; line-height: 1;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu a + a::before {
  content: "✦"; display: block; color: var(--gold); font-size: 14px;
  text-align: center; margin: 2px 0; opacity: 0.7;
}
.mobile-menu .close { position: absolute; top: 18px; right: 18px; background: transparent; border: 1px solid var(--gold-deep); color: var(--gold-pale); padding: 8px 14px; font-family: var(--font-smallcaps); font-size: 11px; letter-spacing: 0.24em; cursor: inherit; }

/* Buttons */
.btn {
  font-family: var(--font-smallcaps); font-size: 13px; letter-spacing: 0.26em;
  text-transform: uppercase; padding: 18px 34px; border: 1px solid var(--gold-deep);
  background: transparent; color: inherit; cursor: inherit; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 12px; font-weight: 500;
}
.btn:hover { background: var(--gold-deep); color: var(--ink); }
.btn.solid { background: var(--ink); color: var(--gold-pale); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-deep); padding: 19px 36px; }
.btn.solid:hover { background: var(--violet); border-color: var(--violet); }
.btn.on-dark { color: var(--gold-pale); border-color: var(--gold-deep); }

/* Marquee */
.marquee {
  background: var(--ink); color: var(--gold-pale);
  padding: 28px 0; overflow: hidden; position: relative;
  border-top: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
}
.marquee .track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: scroll 38s linear infinite;
  font-family: var(--font-display); font-size: 56px; text-transform: uppercase; letter-spacing: 0.01em;
}
.marquee:hover .track { animation-play-state: paused; }
.marquee .track .dot { color: var(--gold); padding: 0 16px; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mobile — marquee shrinks so the text is actually readable */
@media (max-width: 820px) {
  .marquee { padding: 16px 0; }
  .marquee .track { gap: 32px; font-size: 24px; }
  .marquee .track .dot { padding: 0 10px; }
}
@media (max-width: 480px) {
  .marquee .track { font-size: 20px; gap: 24px; }
}

/* Manifesto (used for "Witch Is · The Invocation") */
.manifesto { background: var(--parchment); }
.manifesto .body {
  font-family: var(--font-body); font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5; color: var(--ink); max-width: 820px;
}
.manifesto .body p { margin: 0 0 1.2em; }
.manifesto .body em { color: var(--violet); }
.manifesto .body .rose { color: var(--rose); font-style: italic; }
.manifesto .body .drop {
  float: left; font-family: var(--font-display); font-size: 110px;
  line-height: 0.85; padding: 8px 14px 0 0; color: var(--gold-deep);
}
.manifesto .sig {
  font-family: var(--font-script); font-weight: 500; font-size: 44px;
  color: var(--rose); margin-top: 24px; line-height: 1.1;
}

/* Organizers grid (Witch Is · II) */
.organizers-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 60px;
}
.organizer {
  background: var(--ink); color: var(--fg-on-ink);
  border: 1px solid var(--gold-deep);
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 0 rgba(26,20,16,0.04), 0 18px 40px -20px rgba(26,20,16,0.35);
}
.organizer::before { content: ""; position: absolute; inset: 8px; border: 0.5px solid var(--gold); pointer-events: none; z-index: 4; }
.organizer__portrait {
  position: relative; overflow: hidden; aspect-ratio: 4/5;
  background: #0a0a0a;
}
.organizer__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.18) contrast(1.05) saturate(0.88);
  transition: transform 1.1s ease, filter .4s ease;
}
.organizer:hover .organizer__portrait img { transform: scale(1.04); filter: sepia(0.05) contrast(1.05); }
.organizer__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.organizer__role {
  position: absolute; bottom: 18px; left: 18px; z-index: 2;
  font-family: "Cinzel", serif; font-weight: 600;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); padding: 6px 10px; background: rgba(10,10,10,0.6);
}
.organizer__body {
  padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;
}
.organizer__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 44px; line-height: 1; letter-spacing: 0.03em;
  color: var(--parchment); margin: 0 0 8px;
}
.organizer__bio {
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-size: 16px; line-height: 1.55; color: rgba(245,240,230,0.85);
  margin: 0;
}
.organizer__sig {
  font-family: var(--font-script); font-size: 28px; color: var(--gold-pale);
  margin-top: auto; padding-top: 8px;
}
/* Island video card — sits in the 4th grid cell so it's next to Johnny
   on desktop (2-col layout) and stacks under him on mobile (1-col).
   Matches organizer card chrome (gold border + inner frame + shadow) so
   the row reads as a coherent pair. align-self stretches to match
   Johnny's card height. */
.organizer-video {
  background: #000;
  border: 1px solid var(--gold-deep);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(26,20,16,0.04), 0 18px 40px -20px rgba(26,20,16,0.35);
  min-height: 320px;
  align-self: stretch;
}
.organizer-video::before {
  content: ""; position: absolute; inset: 8px;
  border: 0.5px solid var(--gold); pointer-events: none; z-index: 2;
}
.organizer-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 980px) {
  .organizers-grid { grid-template-columns: 1fr; }
  .organizer { grid-template-columns: 1fr; }
  .organizer__portrait { aspect-ratio: 16/10; }
  .organizer-video { aspect-ratio: 16/10; min-height: 0; }
}

.open-to-all {
  margin-top: 56px; padding-top: 28px; max-width: 540px; margin-left: auto; margin-right: auto;
  text-align: center; border-top: 1px solid var(--divider);
  font-family: var(--font-smallcaps); font-size: 12px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold-deep);
}
.open-to-all .dot { color: var(--rose); margin: 0 12px; }

/* Spells grid */
.spells-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px;
  margin-top: 60px;
}
.spells-grid > :nth-child(5) { grid-column: 2 / span 1; }
.spells-grid > :nth-child(6) { grid-column: 3 / span 1; }
.spells-grid > :nth-child(7) { grid-column: 4 / span 1; }

/* ============ TAROT CARDS — magical, ornate, alive ============ */
.tarot {
  perspective: 1400px; width: 100%; aspect-ratio: 2/3; cursor: inherit;
  position: relative;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 500ms ease;
}
.tarot:hover {
  transform: translateY(-8px);
  filter: drop-shadow(0 18px 28px rgba(74,31,156,0.32))
          drop-shadow(0 0 22px rgba(214,168,74,0.35));
  z-index: 2;
}
.tarot-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(0.5, -0.05, 0.2, 1.05);
}
.tarot:hover .tarot-inner, .tarot.flipped .tarot-inner { transform: rotateY(180deg); }

.tarot-face, .tarot-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 18px 16px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
  border: 1px solid var(--gold-deep);
  box-shadow:
    0 2px 0 rgba(26,20,16,0.04),
    0 22px 44px -20px rgba(26,20,16,0.6),
    inset 0 0 0 1px rgba(214,168,74,0.18);
  overflow: hidden;
  /* iOS Safari needs each face on its own GPU layer for backface-visibility
     to cull reliably (especially with emoji/filters present). */
  isolation: isolate;
  will-change: transform;
}

/* Triple-frame: outer gold-deep, middle thin gold, inner faint gold */
.tarot-face::before, .tarot-back::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--gold);
  pointer-events: none; z-index: 1;
}
.tarot-face::after, .tarot-back::after {
  content: ""; position: absolute; inset: 16px;
  border: 0.5px solid rgba(214,168,74,0.35);
  pointer-events: none; z-index: 1;
}

/* FRONT — aged parchment with subtle gold radial */
.tarot-face {
  background:
    radial-gradient(circle at 50% 38%, rgba(214,168,74,0.10) 0%, transparent 65%),
    linear-gradient(180deg, var(--parchment-deep) 0%, var(--parchment) 100%);
}

/* BACK — deep violet velvet */
.tarot-back {
  background:
    radial-gradient(circle at 50% 45%, rgba(214,168,74,0.22) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(143,92,224,0.45) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(74,31,156,0.65) 0%, transparent 50%),
    linear-gradient(160deg, #2a1655 0%, var(--violet-deep) 50%, #1a0e2c 100%);
  transform: rotateY(180deg);
}
.tarot-back::before { border-color: var(--gold-pale); }
.tarot-back::after { border-color: rgba(240,212,136,0.3); }

/* Corner ornaments — 4 small ✦ at the inner-frame corners */
.tarot-corners { position: absolute; inset: 22px; z-index: 3; pointer-events: none; }
.tarot-corners span {
  position: absolute; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; line-height: 1;
  color: var(--gold-deep);
}
.tarot-corners span::before { content: "✦"; }
.tarot-corners span:nth-child(1) { top: -7px; left: -7px; }
.tarot-corners span:nth-child(2) { top: -7px; right: -7px; }
.tarot-corners span:nth-child(3) { bottom: -7px; right: -7px; }
.tarot-corners span:nth-child(4) { bottom: -7px; left: -7px; }
.tarot-back .tarot-corners span { color: var(--gold-pale); }

/* Roman numeral — top of card, between ornamental dots */
.tarot-roman {
  position: relative; z-index: 3;
  text-align: center;
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.32em;
  color: var(--gold-deep);
  padding: 8px 0 2px;
  text-transform: uppercase;
}
.tarot-back .tarot-roman { color: var(--gold-pale); }

/* Art panel — the central illustration "stage" */
.tarot-art {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 14px;
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  min-height: 0;
  overflow: hidden;
}

/* Soft glowing halo behind the sigil */
.tarot-halo {
  position: absolute; left: 50%; top: 50%;
  width: 78%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,168,74,0.32) 0%, rgba(214,168,74,0.10) 35%, transparent 65%);
  animation: tarot-halo 4.2s ease-in-out infinite;
  z-index: 0;
}
@keyframes tarot-halo {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.7; }
  50%      { transform: translate(-50%,-50%) scale(1.12); opacity: 1; }
}

/* Sun-rays behind the sigil — slow rotating */
.tarot-rays {
  position: absolute; left: 50%; top: 50%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(214,168,74,0.10) 4deg, transparent 8deg,
      transparent 22deg, rgba(214,168,74,0.10) 26deg, transparent 30deg,
      transparent 44deg, rgba(214,168,74,0.10) 48deg, transparent 52deg,
      transparent 66deg, rgba(214,168,74,0.10) 70deg, transparent 74deg,
      transparent 88deg, rgba(214,168,74,0.10) 92deg, transparent 96deg,
      transparent 110deg, rgba(214,168,74,0.10) 114deg, transparent 118deg,
      transparent 132deg, rgba(214,168,74,0.10) 136deg, transparent 140deg,
      transparent 154deg, rgba(214,168,74,0.10) 158deg, transparent 162deg,
      transparent 176deg, rgba(214,168,74,0.10) 180deg, transparent 184deg,
      transparent 198deg, rgba(214,168,74,0.10) 202deg, transparent 206deg,
      transparent 220deg, rgba(214,168,74,0.10) 224deg, transparent 228deg,
      transparent 242deg, rgba(214,168,74,0.10) 246deg, transparent 250deg,
      transparent 264deg, rgba(214,168,74,0.10) 268deg, transparent 272deg,
      transparent 286deg, rgba(214,168,74,0.10) 290deg, transparent 294deg,
      transparent 308deg, rgba(214,168,74,0.10) 312deg, transparent 316deg,
      transparent 330deg, rgba(214,168,74,0.10) 334deg, transparent 338deg,
      transparent 352deg, rgba(214,168,74,0.10) 356deg, transparent 360deg
    );
  mask-image: radial-gradient(circle, transparent 30%, black 50%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 50%, transparent 75%);
  animation: tarot-rays 90s linear infinite;
  z-index: 0;
  opacity: 0.7;
}
@keyframes tarot-rays {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* The sigil glyph itself — large, breathing.
   font-variant-emoji: text — force iOS/macOS Safari to render Unicode
   symbols (like ☎ U+260E) as text glyphs in the page font instead of
   pulling in the system emoji font (which would draw a red phone and
   leak through the flipped backface). */
.tarot-illus {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(82px, 8.5vw, 116px);
  line-height: 1;
  color: var(--ink);
  text-shadow:
    0 1px 0 rgba(214,168,74,0.3),
    0 0 18px rgba(214,168,74,0.4);
  animation: tarot-breathe 5.5s ease-in-out infinite;
  font-variant-emoji: text;
  -webkit-font-feature-settings: "ss01";
}
@keyframes tarot-breathe {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.06) rotate(-1.5deg); }
}
/* Stagger sigil animations across the grid so they don't pulse in unison */
.spells-grid > :nth-child(2) .tarot-illus { animation-delay: -0.7s; }
.spells-grid > :nth-child(3) .tarot-illus { animation-delay: -1.4s; }
.spells-grid > :nth-child(4) .tarot-illus { animation-delay: -2.1s; }
.spells-grid > :nth-child(5) .tarot-illus { animation-delay: -2.8s; }
.spells-grid > :nth-child(6) .tarot-illus { animation-delay: -3.5s; }
.spells-grid > :nth-child(7) .tarot-illus { animation-delay: -4.2s; }
.spells-grid > :nth-child(2) .tarot-halo { animation-delay: -0.5s; }
.spells-grid > :nth-child(3) .tarot-halo { animation-delay: -1.0s; }
.spells-grid > :nth-child(4) .tarot-halo { animation-delay: -1.5s; }
.spells-grid > :nth-child(5) .tarot-halo { animation-delay: -2.0s; }
.spells-grid > :nth-child(6) .tarot-halo { animation-delay: -2.5s; }
.spells-grid > :nth-child(7) .tarot-halo { animation-delay: -3.0s; }

/* Title banner — flourish ✦ — title — flourish ✦ */
.tarot-banner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 6px 8px 4px;
  border-top: 0.5px solid rgba(214,168,74,0.3);
  margin: 0 6px;
}
.tarot-banner__flourish {
  font-family: var(--font-display);
  font-size: 13px; line-height: 1;
  color: var(--gold-deep);
  opacity: 0.85;
}
.tarot-back .tarot-banner { border-top-color: rgba(240,212,136,0.35); }
.tarot-back .tarot-banner__flourish { color: var(--gold-pale); }

.tarot-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: center; line-height: 1.1;
  flex: 0 1 auto;
  text-shadow: 0 1px 0 rgba(214,168,74,0.25);
}
.tarot-back .tarot-title {
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.tarot-title--small {
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.1em;
  opacity: 0.92;
}

/* BACK — twinkling star pattern + small breathing glyph + readable desc */
.tarot-back-pattern {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 16%, rgba(240,212,136,0.9), transparent 60%),
    radial-gradient(1px 1px   at 78% 22%, rgba(240,212,136,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 72%, rgba(240,212,136,0.85), transparent 60%),
    radial-gradient(1px 1px   at 88% 84%, rgba(240,212,136,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 8%,  rgba(240,212,136,0.9), transparent 60%),
    radial-gradient(1px 1px   at 8% 56%,  rgba(240,212,136,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 50%, rgba(240,212,136,0.85), transparent 60%),
    radial-gradient(1px 1px   at 24% 92%, rgba(240,212,136,0.6), transparent 60%),
    radial-gradient(1px 1px   at 92% 60%, rgba(240,212,136,0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 44% 38%, rgba(240,212,136,0.8), transparent 60%);
  animation: tarot-twinkle 5s ease-in-out infinite;
}
@keyframes tarot-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

.tarot-back-art {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  margin: 4px 14px;
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  padding: 16px 6px;
  min-height: 0;
}
.tarot-back-glyph {
  font-family: var(--font-display);
  font-size: 38px; line-height: 1;
  color: var(--gold-pale);
  text-shadow: 0 0 14px rgba(240,212,136,0.6);
  animation: tarot-breathe 5.5s ease-in-out infinite;
  opacity: 0.85;
}
.tarot-desc {
  position: relative; z-index: 1;
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  font-style: italic; font-weight: 400;
  color: var(--parchment);
  text-align: center;
  margin: 0; padding: 0 4px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

@media (prefers-reduced-motion: reduce) {
  .tarot-halo, .tarot-rays, .tarot-illus, .tarot-back-glyph, .tarot-back-pattern {
    animation: none;
  }
}

/* Day accordion — vertical, full-width rows */
.days {
  display: flex; flex-direction: column;
  margin-top: 60px;
  border-top: 1px solid var(--gold-deep);
}
.day {
  border-bottom: 1px solid var(--gold-deep);
  background: transparent;
  position: relative;
  transition: background .3s ease;
}
.day::before { display: none; }
.day:hover { background: rgba(214,168,74,0.06); }
.day.open { background: rgba(214,168,74,0.09); }
section.dark .day { background: transparent; }
section.dark .day:hover { background: rgba(214,168,74,0.05); }
section.dark .day.open { background: rgba(214,168,74,0.08); }

.day__head {
  display: grid;
  grid-template-columns: 88px 240px 1fr 56px;
  gap: 32px; align-items: center;
  padding: 32px 12px;
  width: 100%;
  background: transparent; border: 0;
  cursor: inherit; text-align: left;
  font: inherit; color: inherit;
  transition: padding-left .25s ease;
}
.day__head:hover { padding-left: 22px; }

.day .glyph {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 56px; line-height: 1;
  text-align: center;
  text-shadow: 0 0 18px rgba(214,168,74,0.35);
  transition: transform .4s ease, color .3s ease;
}
.day.open .glyph { transform: scale(1.08) rotate(-4deg); color: var(--gold-pale); }

/* SVG glyph (e.g. island for Day 0) — sized to match the text glyph */
.day .glyph .glyph-svg {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: middle;
  filter: drop-shadow(0 0 14px rgba(214,168,74,0.45));
  transition: filter .3s ease;
}
.day.open .glyph .glyph-svg {
  filter: drop-shadow(0 0 18px rgba(240,212,136,0.6));
}

.day__head-text { display: flex; flex-direction: column; gap: 6px; }
.day .num {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-deep);
}
section.dark .day .num { color: var(--gold); }
.day .name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: 0.03em; line-height: 1; color: var(--parchment);
}
section:not(.dark) .day .name { color: var(--ink); }

.day .what {
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
  color: rgba(245,240,230,0.7);
}
section:not(.dark) .day .what { color: var(--fg-on-parchment-muted); }

.day__toggle {
  font-family: var(--font-display);
  width: 44px; height: 44px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--gold);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  justify-self: end;
}
.day.open .day__toggle {
  background: var(--gold-deep); color: var(--ink);
  border-color: var(--gold-deep);
  transform: rotate(180deg);
}

/* Expanded body — readable prose column */
.day .reveal-schedule {
  max-height: 0; overflow: hidden;
  transition: max-height .65s cubic-bezier(0.4, 0, 0.2, 1);
}
.day.open .reveal-schedule { max-height: 2400px; }
.day .reveal-inner {
  max-width: 760px;
  margin: 0 0 0 120px;        /* visually aligns with the day__head's text column */
  padding: 8px 12px 44px;
}
.day .reveal-inner p {
  font-family: "EB Garamond", "Garamond", "Georgia", serif;
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7;
  color: rgba(245,240,230,0.88);
  margin: 0 0 18px;
}
.day .reveal-inner p:first-child {
  font-size: clamp(19px, 1.6vw, 22px);
  font-style: italic;
  color: rgba(245,240,230,0.96);
}
.day .reveal-inner p:last-child { margin-bottom: 0; }
section:not(.dark) .day .reveal-inner p { color: var(--fg-on-parchment); }
section:not(.dark) .day .reveal-inner p:first-child { color: var(--ink); }

@media (max-width: 820px) {
  .day__head {
    grid-template-columns: 56px 1fr 44px;
    gap: 16px;
    padding: 22px 8px;
  }
  .day__head:hover { padding-left: 8px; }
  .day .glyph { font-size: 36px; }
  .day__head-text { gap: 4px; }
  .day .name { font-size: clamp(22px, 5vw, 30px); }
  .day .what { display: none; }    /* hide teaser on narrow widths; visible after expand */
  .day .reveal-inner { margin-left: 0; padding: 4px 4px 28px; }
  .day .reveal-inner p { font-size: 16px; }
  .day .reveal-inner p:first-child { font-size: 18px; }
}

/* Ritual photography gallery — native vertical scroll-snap carousel.
   Layout: [↑ button] [scrollable viewport] [↓ button] stacked.
   Inside the viewport, each tile snaps to centre; user can either
   wheel/swipe through the photos OR click the arrows. Page scroll
   resumes once they reach the gallery's top/bottom edge (default
   scroll-chaining; we intentionally don't set overscroll-behavior:
   contain here so the page never feels stuck). */
.art-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.art-stack__viewport {
  width: 100%;
  height: 78vh;
  max-height: 720px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Padding-block = (viewport-h - tile-h) / 2 so the first/last tile
     can snap to vertical centre. Also creates the peek room above
     and below — at any snap point you see a slice of the previous
     and next tile in that padding band. */
  padding-block: calc((78vh - 62vh) / 2);
}
.art-stack__viewport::-webkit-scrollbar { display: none; }
.art-stack__tile {
  flex: 0 0 62vh;
  width: 100%;
  scroll-snap-align: center;
  position: relative;
  margin: 0;
  border: 1px solid var(--gold-deep);
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-stack__tile::before {
  content: ""; position: absolute; inset: 6px;
  border: 0.5px solid var(--gold);
  pointer-events: none; z-index: 2; opacity: 0.65;
}
.art-stack__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.art-stack__tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: sepia(0.16) contrast(1.05) saturate(0.85);
  transition: filter .4s ease;
}
.art-credit {
  position: absolute; bottom: 10px; right: 12px; z-index: 3;
  font-family: var(--font-script); font-size: 16px; color: var(--gold-pale);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Arrows — one above, one below, both centred in the column. */
.art-stack__btn {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--gold-deep);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  flex: 0 0 auto;
}
.art-stack__btn:hover {
  background: rgba(28, 22, 18, 0.88);
  color: var(--gold-pale);
}
.art-stack__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.art-stack__btn[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 820px) {
  /* Mobile: photo fills the entire tile (no black letterbox bars
     around landscape sources). Keep the native scroll-snap inside
     a fixed-height viewport — only the image's object-fit changes
     from contain to cover, so each photo edge-to-edge fills its
     tile with a gentle centre-crop for any aspect mismatch. */
  .art-stack__viewport {
    height: 72vh;
    max-height: 640px;
    padding-block: calc((72vh - 58vh) / 2);
  }
  .art-stack__tile { flex: 0 0 58vh; }
  .art-stack__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (prefers-reduced-motion: reduce) {
  .art-stack__viewport { scroll-behavior: auto; }
  .art-stack__tile img { transition: none; }
}

/* Witness pull-quote */
.witness-pull {
  margin: 0 auto 60px; max-width: 820px; text-align: center;
}
.witness-pull h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: 0.02em;
  color: var(--parchment); margin: 0 0 24px;
}
.witness-pull h3 em { color: var(--gold); font-style: italic; }
.witness-pull p { font-family: var(--font-body); font-style: italic; font-size: 19px; color: var(--fg-on-ink-muted); line-height: 1.6; max-width: 640px; margin: 0 auto 14px; }
.witness-pull p em { color: var(--gold); }
.witness-pull .credit-line { font-family: var(--font-script); font-size: 24px; color: var(--rose); margin-top: 12px; }

/* Deliverables list */
.deliverables {
  max-width: 720px; margin: 60px auto 0;
  padding: 36px 32px; border-top: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
}
.deliverables h4 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 3vw, 42px); letter-spacing: 0.02em; line-height: 1;
  color: var(--parchment); text-align: center; margin: 0 0 8px;
}
.deliverables-sub {
  font-family: "EB Garamond", "Georgia", serif;
  font-style: italic; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5;
  color: rgba(245,240,230,0.7);
  text-align: center; margin: 0 0 28px;
  max-width: 52ch; margin-left: auto; margin-right: auto;
}
.deliverables ul { list-style: none; padding: 0; margin: 0; }
.deliverables li {
  padding: 14px 0 14px 26px; border-bottom: 1px solid rgba(214,168,74,0.18);
  font-family: var(--font-body); font-size: 16px; color: var(--fg-on-ink); position: relative;
}
.deliverables li:last-child { border-bottom: 0; }
.deliverables li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.deliverables li em { color: var(--gold); font-style: italic; }

/* Tithe / Tickets */
.tithe { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 60px; align-items: stretch; }
.tier {
  background: var(--parchment-deep); border: 1px solid var(--gold-deep); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px; position: relative;
}
.tier::before { content: ""; position: absolute; inset: 6px; border: 0.5px solid var(--gold); pointer-events: none; }
.tier .tag { font-family: var(--font-smallcaps); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.tier .name { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; letter-spacing: 0.03em; line-height: 1; }
.tier .price { font-family: var(--font-display); font-size: 64px; color: var(--ink); line-height: 1; }
.tier .price .cur { color: var(--gold-deep); font-size: 24px; vertical-align: 20px; margin-right: 4px; }
.tier .price-deposit {
  font-family: "Cinzel", serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: -6px;
  display: block;
}
.tier.featured .price-deposit { color: var(--gold); }
.tier .desc { font-family: var(--font-body); font-style: italic; font-size: 15px; color: var(--fg-on-parchment-muted); line-height: 1.5; }
.tier ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tier ul li { font-family: var(--font-body); font-size: 14px; color: var(--ink); padding-left: 22px; position: relative; }
.tier ul li::before { content: "☞"; position: absolute; left: 0; color: var(--gold-deep); }
.tier ul li em { font-style: italic; color: var(--gold-deep); }
.tier.featured ul li em { color: var(--gold); }

/* "Includes" small caps label between desc and the bullets list */
.tier .tier-includes {
  font-family: "Cinzel", serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 12px 0 -4px;
  display: block;
}
.tier.featured .tier-includes { color: var(--gold); }

/* Italic explanation note that follows a title in a longer bullet item
   (e.g. "Pre-trip integration call" → 60 minutes with Maya …) */
.tier ul li .tier-note {
  display: block;
  font-family: "EB Garamond", "Georgia", serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: var(--fg-on-parchment-muted);
  margin-top: 3px;
}
.tier.featured ul li .tier-note { color: rgba(245,240,230,0.7); }
.tier.featured { background: var(--ink); }
.tier.featured .name, .tier.featured .price { color: var(--parchment); }
.tier.featured .price .cur { color: var(--gold); }
.tier.featured .desc { color: var(--fg-on-ink-muted); }
.tier.featured ul li { color: var(--fg-on-ink); }
.tier.featured ul li::before { color: var(--gold); }
.tier.featured::before { border-color: var(--gold); }
.tier.featured .tag { color: var(--gold); }

/* Petition form */
.petition .form {
  max-width: 720px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 36px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field .lbl { font-family: var(--font-smallcaps); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--parchment);
  padding: 12px 0 8px; font-family: var(--font-body); font-size: 22px;
  color: var(--parchment); outline: none; resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(245,240,230,0.32); font-style: italic; }
.field .hint { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--fg-on-ink-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* Whispers (FAQ) */
.faq { max-width: 820px; margin: 60px auto 0; }
.faq details {
  border-bottom: 1px solid var(--divider); padding: 22px 0; cursor: inherit;
}
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 22px;
  letter-spacing: 0.02em; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--gold-deep); font-size: 28px; }
.faq details[open] summary::after { content: "—"; }
.faq details > div {
  font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--fg-on-parchment);
  margin-top: 14px; max-width: 680px; font-style: italic;
}

/* Footer */
footer {
  background: var(--ink); color: var(--fg-on-ink); padding: 100px 48px 40px;
  position: relative; text-align: center;
}
footer h2 {
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95; color: var(--parchment); margin: 0 0 24px;
}
footer .seal-sm { width: 140px; aspect-ratio: 1; opacity: 1; filter: drop-shadow(0 0 14px rgba(143,92,224,0.35)); margin: 0 auto 32px; display: block; }
footer .handles { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 24px 0 16px; font-family: var(--font-smallcaps); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-pale); }
footer .handles a { color: var(--gold-pale); text-decoration: none; }
footer .handles a:hover { color: var(--rose); }
footer .handles .dot { color: var(--gold-deep); }
footer .credits { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 80px auto 0; padding-top: 32px; border-top: 1px solid rgba(201,168,106,0.2); font-family: var(--font-smallcaps); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-on-ink-muted); flex-wrap: wrap; gap: 16px; }
footer .credits .sig { font-family: var(--font-script); text-transform: none; font-size: 22px; letter-spacing: 0; color: var(--gold-pale); }

/* Section header layout */
.sec-head {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.sec-head .ornament-row { display: flex; align-items: center; gap: 18px; color: var(--gold-deep); margin-top: 4px; }
.sec-head .ornament-row img { width: 56px; height: auto; opacity: 0.85; }
.sec-head h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(48px, 6vw, 88px); line-height: 0.95; letter-spacing: 0.01em; margin: 0; max-width: 920px;
}
.sec-head .lede {
  font-family: var(--font-body); font-style: italic; font-size: 20px;
  color: var(--fg-on-parchment-muted); max-width: 620px; margin: 8px auto 0;
}
section.dark .sec-head .lede { color: var(--fg-on-ink-muted); }

/* Divider between sections */
.section-divider {
  display: flex; justify-content: center; padding: 0; margin: 0; color: var(--gold-deep);
}
.section-divider img { width: 360px; height: auto; opacity: 0.85; }

/* Neverland imagery card */
.neverland-grid {
  display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 60px; align-items: center; margin-top: 60px;
}
.neverland-img {
  aspect-ratio: 3/2; position: relative; border: 1px solid var(--gold-deep); padding: 8px;
  background: linear-gradient(160deg, #1a2418 0%, #0a0f08 60%, #1a1a14 100%);
  overflow: hidden;
}
.neverland-img img {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: cover; filter: sepia(0.15) contrast(1.04) saturate(0.9); z-index: 0;
}
/* Cross-fade slideshow — multiple <img> stack in the same frame, only the
   .is-active one is visible. Slow Ken Burns drift while active for "magic". */
.neverland-img .island-fade {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.8s ease-in-out, transform 9s linear;
  will-change: opacity, transform;
}
.neverland-img .island-fade.is-active {
  opacity: 1;
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .neverland-img .island-fade { transition: opacity 0.2s linear; transform: none; }
  .neverland-img .island-fade.is-active { transform: none; }
}
.neverland-img::before { content:""; position:absolute; inset:14px; border: 0.5px solid var(--gold); pointer-events: none; z-index: 2; }
.neverland-img::after {
  content:""; position:absolute; inset:8px; pointer-events:none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
}
.neverland-img .credit { position: absolute; bottom: 20px; right: 24px; font-family: var(--font-script); font-size: 20px; color: var(--gold-pale); z-index: 3; }
.neverland-copy h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 44px; line-height: 0.95; letter-spacing: 0.02em; margin: 0 0 24px; }
.neverland-copy p { font-family: var(--font-body); font-size: 19px; line-height: 1.6; max-width: 460px; }
.neverland-copy p em { color: var(--violet-soft); font-style: italic; }

/* The three Neverland headline cells — pictogram + label, side by side */
.neverland-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 56px 0 64px;
  align-items: end;
}
.trio-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 8px;
  border-left: 1px solid rgba(214,168,74,0.18);
}
.trio-cell:first-child { border-left: 0; }
.trio-icon {
  width: clamp(72px, 9vw, 110px);
  aspect-ratio: 1;
  color: var(--gold);
  filter: drop-shadow(0 0 12px rgba(214,168,74,0.30));
  display: flex; align-items: center; justify-content: center;
}
.trio-icon svg { width: 100%; height: 100%; display: block; }
.trio-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 26px);
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--parchment);
  margin: 0;
}
@media (max-width: 820px) {
  .neverland-trio { grid-template-columns: 1fr; gap: 36px; }
  .trio-cell { border-left: 0; border-top: 1px solid rgba(214,168,74,0.18); padding-top: 24px; }
  .trio-cell:first-child { border-top: 0; padding-top: 0; }
}
.neverland-stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.neverland-stats .stat { display: flex; flex-direction: column; gap: 4px; }
.neverland-stats .num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--parchment); }
.neverland-stats .lbl { font-family: var(--font-smallcaps); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* First paragraph in the Neverland copy column gets italic motto styling */
.neverland-copy__lead {
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 21px) !important;
  color: rgba(245,240,230,0.95) !important;
  line-height: 1.55 !important;
  margin-bottom: 18px !important;
}

/* Manicule + butterfly ornaments */
.ornament-row-deco {
  display: flex; justify-content: space-between; align-items: center; margin-top: 56px;
}
.ornament-row-deco img { width: 72px; height: auto; opacity: 0.7; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .spells-grid { grid-template-columns: repeat(2, 1fr); }
  .spells-grid > * { grid-column: auto !important; }
  .tithe { grid-template-columns: 1fr; }
  .neverland-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .nav .links, .nav > .cta { display: none; }
  .nav .hamburger { display: inline-flex; }

  .art-gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; }
  .art-tile--1 { grid-column: 1 / span 4; grid-row: span 3; }
  .art-tile--2 { grid-column: 5 / span 2; grid-row: span 2; }
  .art-tile--3 { grid-column: 5 / span 2; grid-row: span 2; }
  .art-tile--4 { grid-column: 1 / span 3; grid-row: span 2; }
  .art-tile--5 { grid-column: 4 / span 3; grid-row: span 2; }
  .art-tile--6 { grid-column: 1 / span 3; grid-row: span 2; }
  .art-tile--7 { grid-column: 4 / span 3; grid-row: span 2; }
}

@media (max-width: 640px) {
  .container { padding: 0 24px; }
  .hero h1 .wordmark { gap: 0.22em; }

  /* Tarot cards — collapse to a single column on phone widths so titles
     don't wrap into 5 lines and overlap the sigil. Each card is full
     container width, with proper room for sigil/halo/banner/title. */
  .spells-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    gap: 28px;
  }
  .spells-grid > * { grid-column: auto !important; }
  .spell-alice {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 2/3;       /* match the card slot shape */
  }
}

/* ============================================================
   CHARACTERS — inline next to their target title or wordmark.
   PNGs used as-is (transparent bg, ink outline intact).
   ============================================================ */

/* Title h2 with character — anchor for absolute-positioned title-char */
.sec-head h2 {
  display: inline-block;
  position: relative;
  padding-top: 0.4em;     /* breathing room so a tall character doesn't hit the eyebrow */
  max-width: 1100px;      /* allow long titles + side-character to fit comfortably */
}

/* Generic title-character — absolute, anchored to h2's bottom (text baseline),
   grows UPWARD only. Doesn't displace the title text. */
.sec-head h2 .title-char {
  position: absolute;
  bottom: 0;
  height: clamp(80px, 11vw, 180px);   /* ~2× the previous inline 1.05em */
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(10,10,10,0.16));
}
.sec-head h2 .title-char--left  { right: 100%; margin-right: 0.28em; }
.sec-head h2 .title-char--right { left:  100%; margin-left:  0.35em; }

/* "Lying" character ABOVE a specific word inside the title.
   Wrap the word: <span class="title-word"><img class="word-char"/>WORD</span> */
.sec-head h2 .title-word {
  position: relative;
  display: inline-block;
}
.sec-head h2 .word-char {
  position: absolute;
  bottom: 88%;            /* just above the cap-line, lightly resting on letter tops */
  left: 50%;
  transform: translateX(-50%);
  height: clamp(54px, 6.5vw, 110px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 4px 10px rgba(10,10,10,0.18));
  pointer-events: none;
}

/* HERO wordmark Tinkerbell — replaces the ampersand glyph,
   sits slightly below text mid so she doesn't poke into the meta line above. */
.wordmark-tink {
  height: 1.2em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(0.12em);
  filter: drop-shadow(0 6px 14px rgba(10,10,10,0.22));
}

/* SPELLS — Alice fills the empty grid cell (row 2 col 1) */
.spell-alice {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  pointer-events: none;
}
.spell-alice img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(10,10,10,0.18));
}

/* On narrow viewports — hide inline characters so they don't crowd
   the stacked single-column layout. The Tink-as-ampersand stays
   because she's part of the wordmark and needs to be visible. */
/* MOBILE characters — switch from absolute (next to/above title) to inline
   (in the title's flow), smaller. Tinkerbell in the wordmark stays as-is. */
@media (max-width: 820px) {
  /* Side characters (Smeagol, Jack, Dwarf) — inline next to title text */
  .sec-head h2 .title-char {
    position: static;
    display: inline-block;
    vertical-align: middle;
    height: clamp(44px, 11vw, 70px);
    width: auto;
    margin: 0 0.18em;
    left: auto; right: auto; bottom: auto;
  }
  /* Reclining characters (Peter, MJ) — also inline, slightly smaller */
  .sec-head h2 .word-char {
    position: static;
    display: inline-block;
    vertical-align: middle;
    height: clamp(38px, 9.5vw, 60px);
    width: auto;
    margin: 0 0.15em;
    transform: none;
    left: auto; bottom: auto;
  }
  /* h2 no longer needs space above the now-inline character */
  .sec-head h2 { padding-top: 0; }
  /* Alice in the tarot grid — show, sized to fit a single-column card slot */
  .spell-alice { display: flex; }
}

/* Section overflow — still clip overflow (no longer strictly needed since
   nothing is absolute-positioned, but keeps reveal animations clean) */
section { overflow: hidden; }

/* ============================================================
   MOTION UPGRADE — applies the animation-motion + frontend-design
   skills. Subtle, intentional, all GPU-accelerated (transform/opacity).
   ============================================================ */

/* ----- 1. Scroll progress bar (top hairline) ----- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-pale));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scroll-progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes scroll-progress {
    to { transform: scaleX(1); }
  }
}

/* ----- 2. Hero seal — idle breathing + glow pulse + scroll parallax -----
   seal-breathe animates only transform (cheap), seal-glow animates only
   filter (drop-shadow blur + alpha pulse, synced to the same 6.5s rhythm
   so the seal "exhales" its halo on the up-stroke and fades on the down).
   Both run on one element so the browser composites a single layer. */
.hero .seal {
  animation:
    seal-breathe 6.5s ease-in-out infinite,
    seal-glow 6.5s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes seal-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.025) rotate(0.4deg); }
}
@keyframes seal-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 22px rgba(143, 92, 224, 0.22))
      drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 50px rgba(143, 92, 224, 0.55))
      drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  }
}
@supports (animation-timeline: scroll()) {
  .hero .seal {
    animation:
      seal-breathe 6.5s ease-in-out infinite,
      seal-glow 6.5s ease-in-out infinite,
      seal-parallax linear;
    animation-timeline: auto, auto, scroll(root);
    animation-range: auto, auto, entry 0% cover 30%;
  }
  @keyframes seal-parallax {
    to { transform: scale(1) translateY(-30px); }
  }
}

/* ----- 3. Marquee speed variation — each marquee runs a touch differently
   so they don't lockstep when stacked on the page ----- */
.marquee:nth-of-type(2n) .track { animation-duration: 46s; }
.marquee:nth-of-type(3n) .track { animation-duration: 34s; }

/* ----- 4. Neverland stats — pop-in with stagger when in view ----- */
.neverland-stats .stat {
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in .neverland-stats .stat { opacity: 1; transform: none; }
.reveal.in .neverland-stats .stat:nth-child(1) { transition-delay: .15s; }
.reveal.in .neverland-stats .stat:nth-child(2) { transition-delay: .30s; }
.reveal.in .neverland-stats .stat:nth-child(3) { transition-delay: .45s; }

/* Stats number on entry has a subtle weight pulse so the eye lands */
.neverland-stats .num {
  display: inline-block;
  transform-origin: center;
}
.reveal.in .neverland-stats .stat .num {
  animation: stat-pop .9s cubic-bezier(.5,-0.05,.2,1.05) .6s both;
}
.reveal.in .neverland-stats .stat:nth-child(2) .num { animation-delay: .75s; }
.reveal.in .neverland-stats .stat:nth-child(3) .num { animation-delay: .9s; }
@keyframes stat-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ----- 5. Organizer cards — 3D tilt via JS (set via --rx, --ry) ----- */
.organizer {
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.organizer:hover {
  transform:
    perspective(1200px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateY(-6px);
  box-shadow:
    0 2px 0 rgba(26,20,16,0.04),
    0 32px 60px -24px rgba(26,20,16,0.55),
    0 0 0 1px rgba(214,168,74,0.32);
}
.organizer__portrait, .organizer__body { backface-visibility: hidden; }

/* ----- 6. Featured tier price — slow attention pulse ----- */
.tier.featured .price {
  animation: price-pulse 5s ease-in-out infinite;
  display: inline-block;
  transform-origin: left center;
}
@keyframes price-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(214,168,74,0); }
  50%      { transform: scale(1.025); text-shadow: 0 0 22px rgba(214,168,74,0.25); }
}

/* ----- 7. Day glyphs — gentle floating when their section is in view ----- */
.day .glyph {
  animation: glyph-float 4.8s ease-in-out infinite;
  will-change: transform;
}
.day:nth-of-type(2) .glyph { animation-delay: -.6s; }
.day:nth-of-type(3) .glyph { animation-delay: -1.2s; }
.day:nth-of-type(4) .glyph { animation-delay: -1.8s; }
.day:nth-of-type(5) .glyph { animation-delay: -2.4s; }
.day:nth-of-type(6) .glyph { animation-delay: -3.0s; }
.day:nth-of-type(7) .glyph { animation-delay: -3.6s; }
@keyframes glyph-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* When a day is open the glyph already has a scale+rotate transform —
   don't fight it with the float */
.day.open .glyph { animation: none; }

/* ----- 8. Hero ledger items — letter stagger entry ----- */
.hero__ledger span:not(.dot) {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in .hero__ledger span:not(.dot) { opacity: 1; transform: none; }
.reveal.in .hero__ledger span:nth-of-type(1) { transition-delay: .1s; }
.reveal.in .hero__ledger span:nth-of-type(3) { transition-delay: .25s; }
.reveal.in .hero__ledger span:nth-of-type(5) { transition-delay: .40s; }
.reveal.in .hero__ledger span:nth-of-type(7) { transition-delay: .55s; }
.reveal.in .hero__ledger span:nth-of-type(9) { transition-delay: .70s; }
.hero__ledger .dot { opacity: 0; transition: opacity .9s ease 1s; }
.reveal.in .hero__ledger .dot { opacity: 1; }

/* ----- 9. CTA buttons — gold shimmer on hover ----- */
.btn.solid, .pill {
  position: relative;
  overflow: hidden;
}
.btn.solid::after, .pill::after {
  content: "";
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214,168,74,0.4) 50%,
    transparent 100%);
  transition: left .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn.solid:hover::after, .pill:hover::after { left: 100%; }

/* ----- ALL MOTION respects prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .hero .seal,
  .marquee .track,
  .neverland-stats .stat,
  .neverland-stats .num,
  .organizer,
  .tier.featured .price,
  .day .glyph,
  .hero__ledger span,
  .btn.solid::after,
  .pill::after {
    animation: none !important;
    transition: none !important;
  }
}