/* ============================================================
   MIDNIGHT IRIS, ELEVATED
   Near-black gallery ground, iris-purple glows, gold line work.
   A very large centered logo crowns the hero over a breathing
   aurora, star dust drifts, gold geometry draws itself in,
   and a gong welcomes you at the door.
   ============================================================ */


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

html { scroll-behavior: smooth; color-scheme: dark; }
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--ink-black);
  color: var(--lavender);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-pale); }

/* Tapping anything on a phone flashes a translucent box behind it, and the browser's own is a
   grey-blue that belongs to no part of this site. Gold, at the weight of a shadow, so pressing
   the phone number or any other link answers in the site's own colour. */
html { -webkit-tap-highlight-color: rgba(214, 164, 82, 0.3); }

/* iOS finds phone numbers in plain text and styles them with its system blue, which lands in the
   middle of a gold page. The numbers here are already links, so the detector is turned off in the
   head and the real links are held to the gold explicitly, active state included, because a
   tapped tel: link is the one people see most and the one a browser is most eager to recolour. */
a[href^="tel:"], a[href^="mailto:"] { color: var(--gold-bright); }
a[href^="tel:"]:hover, a[href^="mailto:"]:hover { color: var(--gold-pale); }
a[href^="tel:"]:active, a[href^="mailto:"]:active { color: var(--gold-pale); }
a[href^="tel:"]:visited, a[href^="mailto:"]:visited { color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold-pale);
  outline-offset: 3px;
  border-radius: 2px;
}

a, button { touch-action: manipulation; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

section { scroll-margin-top: 5.5rem; }
/* The old Healing Modalities anchors, kept alive on the Sessions page for the redirect map. */
#MC, #UWTH, #LEH, #PVC, #SH { scroll-margin-top: 6.5rem; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); color: var(--gold-bright); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.25rem;
}

.lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--lavender); max-width: var(--measure); }
.muted { color: var(--lavender-dim); }

.rule {
  border: 0;
  height: 1px;
  width: 5.5rem;
  margin: 1.75rem 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.rule.center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--gold-ink); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--gold-bright);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-pale); transform: translateY(-1px); }

/* ============================================================
   ENTRY OVERLAY, the gong at the door
   ============================================================ */

.entry {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(107, 63, 160, 0.34), transparent 70%),
    radial-gradient(40% 35% at 78% 80%, rgba(155, 107, 212, 0.16), transparent 70%),
    var(--midnight);
  opacity: 1;
  transition: opacity 1s ease;
}
.entry.is-leaving { opacity: 0; pointer-events: none; }

.entry-card { text-align: center; max-width: 40rem; }
.entry-logo {
  width: min(80vw, 540px);
  height: auto;
  aspect-ratio: 1220 / 338;
  margin-inline: auto;
  filter: drop-shadow(0 0 46px rgba(107, 63, 160, 0.6));
}
.entry-rule { margin-top: 2.2rem; margin-bottom: 1.6rem; }
.entry-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  color: var(--gold-pale);
  margin-bottom: 0.6rem;
}
.entry-desc { color: var(--lavender-dim); font-size: 0.98rem; max-width: 34rem; margin-inline: auto; }
.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}
.entry-hint {
  margin-top: 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(176, 160, 206, 0.82);
}
html.entry-open { overflow: hidden; }

/* ============================================================
   THE CROWN, a very large centered logo over the night
   ============================================================ */

.crown {
  position: relative;
  overflow: hidden;
  background: var(--ink-black);
  text-align: center;
  padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(1.5rem, 3.2vw, 2.4rem);
}
.crown-aura {
  position: absolute;
  inset: -45% -20%;
  pointer-events: none;
  filter: blur(34px);
  background:
    radial-gradient(42% 55% at 50% 68%, rgba(107, 63, 160, 0.5), transparent 70%),
    radial-gradient(26% 34% at 26% 30%, rgba(155, 107, 212, 0.22), transparent 70%);
  animation: auraBreathe 9s ease-in-out infinite alternate;
}
@keyframes auraBreathe {
  from { opacity: 0.68; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.05); }
}
.crown-inner { position: relative; z-index: 1; }
.crown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.crown-line {
  flex: 1;
  max-width: 12rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.crown-line.right { background: linear-gradient(90deg, var(--gold), transparent); }
.crown-logo { display: inline-flex; flex-shrink: 0; }
.crown-logo img {
  width: min(86vw, 620px);
  height: auto;
  aspect-ratio: 1220 / 338;
  filter: drop-shadow(0 0 42px rgba(107, 63, 160, 0.55));
}
.js .crown-inner { opacity: 0; transition: opacity 1.2s ease 0.1s; }
.entered .crown-inner { opacity: 1; }

/* ============================================================
   NAV BAR, slim, sticky, obvious
   ============================================================ */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(9, 5, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--hairline-soft);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.nav-bar.is-stuck {
  background: rgba(9, 5, 17, 0.93);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
.nav-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.45rem;
}
.nav-links { display: flex; flex: 1; justify-content: center; gap: 0.15rem; }
/* A destination never breaks across two lines; if the row runs out of room the
   burger takes over instead. */
.nav-item { white-space: nowrap; }
/* Nor does the call to action. Squeezed by a long menu it broke into "Upcoming /
   Events", which is the same failure as a wrapped label and easier to miss. */
.btn-nav { white-space: nowrap; flex: none; }
.nav-actions { flex: none; }
.nav-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Ten destinations need the room. At 0.75rem the row wanted 928px of the 929px
     it had, which is not slack, it is luck: a different font rendering or one
     longer label breaks it. 0.6rem buys about 48px and does not read as a
     change. */
  padding: 0.4rem 0.6rem;
  color: var(--lavender);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid transparent;
}
.nav-item:hover { color: var(--gold-pale); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.btn-nav { padding: 0.5rem 1.1rem; font-size: 0.86rem; }

.sound-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--gold-bright);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.sound-toggle:hover { border-color: var(--gold-bright); color: var(--gold-pale); }
.sound-toggle svg { width: 22px; height: 22px; }
.sound-toggle .slash { display: none; }
.sound-toggle.is-muted .wave { display: none; }
.sound-toggle.is-muted .slash { display: block; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--gold-bright);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--gold-bright); }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-bars { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

.mobile-menu { display: none; }

/* The bar folds into the burger at 1140px rather than 960px. With nine destinations
   the labels start wrapping inside their own items well before the row itself runs
   out of space, and "For Children" broken across two lines looks like a mistake
   rather than a menu. */
@media (max-width: 1139px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-bar-inner { justify-content: space-between; }
  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--midnight);
    border-bottom: 1px solid var(--hairline);
    padding: 0.6rem clamp(1.25rem, 5vw, 3rem) 1.1rem;
  }
  .nav-open .mobile-menu { display: block; }
  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--lavender);
    text-decoration: none;
    font-size: 0.98rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(188, 138, 59, 0.10);
  }
  .mobile-menu a:hover { color: var(--gold-pale); }
}
@media (max-width: 460px) {
  .btn-nav { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
  .nav-toggle .nav-toggle-text { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-black);
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(5rem, 11vw, 8rem);
}
.hero-aura {
  position: absolute;
  inset: -30% -10%;
  pointer-events: none;
  will-change: transform;
}
.glow-a, .glow-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.glow-a {
  width: 52rem; height: 52rem;
  left: 50%; top: -16rem;
  margin-left: -26rem;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.44), transparent 65%);
  animation: breatheA 9s ease-in-out infinite alternate;
}
.glow-b {
  width: 32rem; height: 32rem;
  right: -12rem; bottom: -12rem;
  background: radial-gradient(circle, rgba(155, 107, 212, 0.22), transparent 65%);
  animation: breatheB 11s ease-in-out infinite alternate-reverse;
}
@keyframes breatheA {
  from { opacity: 0.65; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.08); }
}
@keyframes breatheB {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.1); }
}

.stardust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-tetra {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(46rem, 120vw);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; }
.js .hero-inner { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease 0.3s, transform 1.1s ease 0.3s; }
.entered .hero-inner { opacity: 1; transform: none; }

.hero h1 {
  margin-bottom: 1.4rem;
  text-shadow: 0 0 60px rgba(107, 63, 160, 0.55);
}
.hero .lede { margin-inline: auto; margin-bottom: 2.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.hero-note {
  margin-top: 3.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lavender-dim);
}

/* ============================================================
   SCROLL REVEALS + LINE-DRAWING GEOMETRY
   ============================================================ */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .reveal.in { opacity: 1; transform: none; }
.js .card-grid > .reveal:nth-child(2),
.js .begin-grid > .reveal:nth-child(2) { transition-delay: 0.12s; }
.js .card-grid > .reveal:nth-child(3),
.js .begin-grid > .reveal:nth-child(3) { transition-delay: 0.24s; }

.js .draw-svg .dl {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.js .draw-svg.in .dl { stroke-dashoffset: 0; }

.divider {
  display: flex;
  justify-content: center;
  padding-block: clamp(2rem, 5vw, 3.4rem) 0;
}
.divider svg { width: 64px; height: 64px; opacity: 0.55; }

/* ============================================================
   THE CONSECRATED ROOM, film band + photo treatment
   ============================================================ */

.room {
  background: var(--ink-black);
  border-top: 1px solid var(--hairline-soft);
  padding-block: var(--band-pad);
}
.section-head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section-head .lede { margin-inline: auto; margin-top: 1rem; }

/* full-bleed simulated walkthrough film */
.film-band {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 58vh, 620px);
  border-block: 1px solid var(--hairline-soft);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  background: #140B24;
}
.film-scene { position: absolute; inset: -7%; will-change: transform; }
.film-scene svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .film-scene { animation: filmPan 34s ease-in-out infinite alternate; }
}
@keyframes filmPan {
  from { transform: scale(1.02) translate(1.4%, 0.6%); }
  to   { transform: scale(1.14) translate(-2%, -1.4%); }
}
@media (prefers-reduced-motion: reduce) {
  .film-scene { animation: none; transform: scale(1.06); }
}
.film-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 7, 22, 0.72), rgba(57, 36, 96, 0.2) 45%, rgba(12, 7, 22, 0.82)),
    radial-gradient(80% 60% at 50% 45%, rgba(107, 63, 160, 0.26), transparent 72%);
}
.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(237, 217, 166, 0.75);
  display: grid;
  place-items: center;
  background: rgba(9, 5, 17, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: playPulse 4s ease-in-out infinite;
}
.film-play svg { width: 26px; height: 26px; margin-left: 4px; }
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(188, 138, 59, 0.35); }
  50%      { box-shadow: 0 0 0 18px rgba(188, 138, 59, 0); }
}
.film-label {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iris-pale);
  border: 1px solid rgba(201, 175, 239, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  background: rgba(12, 7, 22, 0.6);
}
@media (max-width: 520px) {
  .film-label { white-space: normal; text-align: center; width: max-content; max-width: 88vw; }
}

.room-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .room-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.room-panel {
  background: rgba(19, 11, 34, 0.6);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.room-panel p { max-width: var(--measure); }
.room-panel p + p { margin-top: 1.1rem; }

/* the photo treatment panel */
.photo-still { margin: 0; }
.photo-frame {
  position: relative;
  border: 1px solid var(--iris-edge);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #140B24;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
.photo-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(107, 63, 160, 0.48), rgba(12, 7, 22, 0.05) 52%, rgba(28, 16, 47, 0.55) 100%);
}
.photo-still figcaption {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iris-pale);
  text-align: center;
}

.room-facts {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 880px) {
  .room-facts { grid-template-columns: repeat(3, 1fr); }
}
.room-facts li {
  background: rgba(12, 7, 22, 0.72);
  padding: 1.15rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.room-facts .fact-figure {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
  min-width: 4.5rem;
}
.room-facts .fact-text { color: var(--lavender-dim); font-size: 0.95rem; line-height: 1.5; }

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  background: var(--ink-raised);
  padding-block: var(--band-pad);
}
.card-grid {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 880px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Four cards in a grid of three leaves the fourth stranded on a row of its own, which reads as an
   unfinished page rather than a deliberate one. Exactly four go two-and-two, and across a wide
   screen all four on one line, where 74rem still leaves each card a comfortable width. */
@media (min-width: 880px) {
  .card-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .card-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}
/* Two cards in a grid of three sit against the left with a hole where the third would be. They
   go side by side in a narrower, centred grid instead, which also keeps each card about the width
   it has when there are three, rather than stretching it across half the page. */
@media (min-width: 880px) {
  .card-grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 48rem;
    margin-inline: auto;
  }
}
/* And however many there are, a last card left alone at the end of a row is centred rather than
   pushed against the left edge under a full row above it. The count changes every month as CJ
   writes, so this is a rule rather than a page size chosen to come out even. The four-card grid
   is excluded because the rule above has already given it its own shape. */
@media (min-width: 880px) {
  .card-grid:not(:has(> :last-child:nth-child(4))) > :last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}
.card {
  background: var(--iris-veil);
  border: 1px solid var(--iris-edge);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 50px rgba(107, 63, 160, 0.35);
}
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(188, 138, 59, 0.08);
}
.card-icon svg { width: 24px; height: 24px; }
.card p { color: var(--lavender-dim); font-size: 0.96rem; }
.card .card-meta {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.services-caption {
  text-align: center;
  margin-top: 2.2rem;
  font-size: 0.88rem;
  color: var(--lavender-dim);
  font-style: italic;
}

/* ============================================================
   WHISPERS
   ============================================================ */

.whispers {
  position: relative;
  overflow: hidden;
  background: var(--iris-band);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  padding-block: var(--band-pad);
}
.whispers::before {
  content: "";
  position: absolute;
  width: 38rem; height: 38rem;
  left: -14rem; top: 20%;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(107, 63, 160, 0.38), transparent 65%);
  pointer-events: none;
}
.whispers .wrap { position: relative; z-index: 1; }

.whispers-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .whispers-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--iris-edge);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 50% 15%, rgba(155, 107, 212, 0.30), transparent 60%),
    linear-gradient(160deg, #241540 0%, #140B24 70%, #0E0719 100%);
  display: grid;
  place-items: center;
}
.video-frame .video-halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  opacity: 0.16;
  pointer-events: none;
}
.play-btn {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(9, 5, 17, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.play-btn:hover {
  transform: scale(1.06);
  background: rgba(188, 138, 59, 0.18);
  box-shadow: 0 0 40px rgba(188, 138, 59, 0.35);
}
.play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.video-caption {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.player-note {
  margin-top: 0.5rem;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--lavender-dim);
}

.audio-player {
  background: rgba(9, 5, 17, 0.6);
  border: 1px solid var(--iris-edge);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
}
.audio-title {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.audio-row { display: flex; align-items: center; gap: 1rem; }
.audio-play {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.audio-play:hover { background: var(--gold-bright); transform: scale(1.05); }
.audio-play svg { width: 16px; height: 16px; margin-left: 2px; }
.waveform { flex: 1; min-width: 0; }
.waveform svg { width: 100%; height: 48px; display: block; }
.audio-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--lavender-dim);
}
.podcast-line {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--lavender-dim);
}

.signoff {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  text-align: center;
}
.signoff blockquote {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.4;
  color: var(--gold);
  max-width: 46rem;
  margin-inline: auto;
  text-shadow: 0 0 45px rgba(107, 63, 160, 0.5);
}
.signoff cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lavender-dim);
}

/* ============================================================
   THE GONG
   ============================================================ */

.gong-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-black);
  padding-block: var(--band-pad);
  text-align: center;
}
.gong-band::before {
  content: "";
  position: absolute;
  width: 46rem; height: 46rem;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(107, 63, 160, 0.3), transparent 65%);
  pointer-events: none;
}
.gong-band .wrap { position: relative; z-index: 1; }
.gong-band .section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.gong-stage { display: inline-block; }
.gong-btn {
  display: block;
  width: clamp(220px, 42vw, 330px);
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.gong-btn:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 6px; border-radius: 50%; }
.gong-btn svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 34px rgba(188, 138, 59, 0.25)); }

.gong-svg .ripple {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.is-ringing .gong-svg .ripple { animation: gongRipple 5s ease-out infinite; }
.is-ringing .gong-svg .ripple.r2 { animation-delay: 1.6s; }
.is-ringing .gong-svg .ripple.r3 { animation-delay: 3.2s; }
@keyframes gongRipple {
  0%   { transform: scale(0.42); opacity: 0.8; }
  100% { transform: scale(1.16); opacity: 0; }
}
.gong-core { transform-box: fill-box; transform-origin: center; }
.is-ringing .gong-core { animation: gongSway 3.8s ease-in-out infinite; }
@keyframes gongSway {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
.gong-status {
  margin-top: 1.5rem;
  min-height: 1.6em;
  color: var(--lavender-dim);
  font-size: 0.95rem;
}
.gong-note {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(176, 160, 206, 0.82);
}

/* ============================================================
   THREE WAYS TO BEGIN
   ============================================================ */

.begin {
  background: var(--ink-raised);
  border-top: 1px solid var(--hairline-soft);
  padding-block: var(--band-pad);
}
.begin-grid {
  display: grid;
  gap: 1.4rem;
  counter-reset: begin;
  list-style: none;
}
@media (min-width: 880px) {
  .begin-grid { grid-template-columns: repeat(3, 1fr); }
}
.begin-step {
  position: relative;
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: 1.9rem 1.6rem;
  background: linear-gradient(180deg, rgba(37, 21, 64, 0.35), rgba(12, 7, 22, 0.2));
}
.begin-step .step-num {
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  margin-bottom: 0.9rem;
}
@supports not (-webkit-text-stroke: 1px black) {
  .begin-step .step-num { color: var(--gold); }
}
.begin-step h3 { margin-bottom: 0.5rem; }
.begin-step p { color: var(--lavender-dim); font-size: 0.96rem; }

/* ============================================================
   ABOUT CJ + BOOK
   ============================================================ */

.about {
  background: var(--ink-black);
  border-top: 1px solid var(--hairline-soft);
  padding-block: var(--band-pad);
}
.about-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .about-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.about-copy p { max-width: var(--measure); }
.about-copy p + p { margin-top: 1.1rem; }
.about-quote {
  margin: 1.6rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold-bright);
  line-height: 1.5;
}

.book-block {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  background: rgba(9, 5, 17, 0.55);
  border: 1px solid var(--iris-edge);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.book-cover-img {
  flex-shrink: 0;
  width: 168px;
  height: auto;
  border-radius: 3px 8px 8px 3px;
  border: 1px solid var(--gold);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}
.book-info { flex: 1; min-width: min(100%, 16rem); }
.book-info h3 { margin-bottom: 0.5rem; }
.book-info p { color: var(--lavender-dim); font-size: 0.96rem; max-width: 34ch; margin-bottom: 1.4rem; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--midnight);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem;
  text-align: center;
}
.footer-logo { display: inline-flex; margin-bottom: 2rem; }
.footer-logo img {
  width: min(72vw, 300px);
  height: auto;
  aspect-ratio: 1220 / 338;
}
/* The footer reads in tiers now: the mark, the accounts, how to reach the temple, the small print.
   Each tier gets its own spacing and its own weight, rather than five different kinds of thing
   strung along one line with middots between them. */

/* The social accounts. Deliberately not gold: on this site gold means a link that does something
   for the reader on this page, and these send them somewhere else. Iris violet groups them as one
   set and lets the eye skip them when it is looking for the phone number. Brand glyphs, but no
   brand colours; four corporate palettes in a row would pull the eye out of the page entirely. */
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  display: flex;
  justify-content: center;
  gap: 0.85rem;
}
.site-footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--iris-bright);
  background: rgba(107, 63, 160, 0.16);
  border: 1px solid rgba(155, 107, 212, 0.38);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.site-footer .social-link svg { width: 21px; height: 21px; display: block; }
/* Scoped to the footer so it outranks the site-wide a:hover, which is a type plus a
   pseudo-class and therefore beat a bare class on its own. */
.site-footer .social-link:hover, .site-footer .social-link:focus-visible {
  color: var(--gold-pale);
  background: rgba(188, 138, 59, 0.18);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Address, phone and email, each on its own line on a phone and in a row with generous space on a
   wider screen. <address> is the element for exactly this and italicises by default, which is not
   the voice of the rest of the page. */
.footer-visit {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem 2rem;
  font-size: 0.95rem;
}
.footer-visit a {
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.2rem;
}
.footer-service {
  margin-top: 0.6rem;
  color: var(--lavender-dim);
  font-size: 0.92rem;
}
.footer-fine {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-fine a {
  color: var(--lavender-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-fine a:hover { color: var(--gold-bright); }
.copyright {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.82rem;
  color: var(--lavender-dim);
  letter-spacing: 0.04em;
}

/* --- CJ copy revisions 2026-08-16 --- */
.hero-est { margin-top: 1.1rem; opacity: 0.85; }
.room-mission { font-size: 1.12em; line-height: 1.55; color: #E9DCF6; border-left: 2px solid #BC8A3B; padding-left: 1rem; margin-bottom: 1.1rem; }

/* --- home page: events + blog strips (Task 3) --- */
/* Both strips sit between full bands on the home page, so they keep the same rhythm the bands
   keep. They used to run on their own smaller scale, which made the page breathe unevenly on
   the way down. */
.events-strip, .blog-strip { padding-block: var(--band-pad); }
.strip-more { margin-top: 2rem; text-align: center; }

/* --- events archive + cards (Task 5) --- */
.events-page { padding-block: clamp(3rem, 7vw, 6rem); }
.events-page .card-grid, .events-strip .card-grid, .blog-strip .card-grid { display: grid; gap: 1.4rem; }
.card-grid.three { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.event-card .card-img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0; }
.event-card.is-sold-out { opacity: 0.6; }

/* Event cards stand side by side, so they have to end the same way: the same amount of
   text, the same gap, and the buttons on one line across the row. Descriptions do not
   cooperate on their own (CJ's ceremony copy runs six paragraphs, the intro class is two
   sentences), so the blurb is clamped to three lines and Read more carries the rest to
   the event's own page. */
.event-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
}
.event-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.event-facts .price-pill { margin: 0; }

.event-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-more a {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold-pale);
}
.event-more a:hover { color: var(--gold-bright); }

/* The button was flush against the paragraph, which read as scrunched. It now sits at
   the foot of the card with room above it, and margin-top:auto keeps every button on the
   same line however short one card's text happens to be. */
.event-cta {
  margin-top: auto;
  padding-top: 1.5rem;
}
.price-pill { display: inline-block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-pale); border: 1px solid var(--gold); border-radius: 999px; padding: 0.2rem 0.7rem; margin: 0.4rem 0 0.8rem; }
.btn.is-disabled { pointer-events: none; opacity: 0.55; }

/* --- blog index: articles + whispers, filter tabs, rail, ghl_form (Task 6) --- */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 64rem) { .blog-layout { grid-template-columns: minmax(0, 1fr) 18rem; } }
.rail { display: none; }
@media (min-width: 64rem) { .rail { display: block; position: sticky; top: 5rem; align-self: start; } }
.rail-block { border: 1px solid var(--iris-edge); border-radius: 0.6rem; padding: 1.2rem; margin-bottom: 1.4rem; background: var(--ink-raised); }
.rail-event { display: block; color: var(--lavender); text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid var(--iris-edge); }
.rail-event span { display: block; font-size: 0.85rem; color: var(--lavender-dim); }
.filter-tabs { display: flex; gap: 1.2rem; margin: 1rem 0 2rem; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.filter-tabs a { color: var(--lavender-dim); text-decoration: none; padding-bottom: 0.3rem; border-bottom: 1px solid transparent; }
.filter-tabs a[aria-current] { color: var(--gold-pale); border-color: var(--gold); }
.card-grid.two { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.blog-featured { grid-column: 1 / -1; margin-bottom: 2rem; }
.badge { display: inline-block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; margin-bottom: 0.5rem; }
.badge-article { color: var(--iris-pale); border: 1px solid var(--iris-glow); }
.badge-newsletter { color: var(--iris-pale); border: 1px solid var(--iris-glow); }
.badge-whisper { color: var(--gold-pale); border: 1px solid var(--gold); }
.post-card .card-meta, .prose .card-meta { font-family: var(--sans); font-size: 0.8rem; color: var(--lavender-dim); margin-top: 0.4rem; padding-top: 0; border-top: 0; letter-spacing: normal; text-transform: none; }
.card-img-empty { display: block; aspect-ratio: 8 / 5; background: linear-gradient(135deg, var(--iris-veil), var(--iris-glow)); }
.form-fallback { font-size: 0.9rem; color: var(--lavender-dim); margin-top: 0.6rem; }

/* --- single article + whisper templates (Task 7) --- */
.prose { max-width: 42rem; font-size: 1.12rem; line-height: 1.75; color: var(--lavender); font-family: var(--serif); }
.prose h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; margin: 0.4rem 0 0.6rem; }
.prose h2 { margin-top: 2.2rem; }
.prose blockquote { border-left: 2px solid var(--gold); padding-left: 1.1rem; font-style: italic; color: var(--gold-pale); margin: 1.8rem 0; }
.prose-hero { width: 100%; border-radius: 0.6rem; margin: 1.2rem 0 1.8rem; }
.prose-cta { margin: 2.4rem 0; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.author-block { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--iris-edge); padding-top: 1.4rem; margin-top: 2rem; }
.author-block img { border-radius: 50%; }
.whisper-player { width: 100%; margin: 1rem 0 1.6rem; }
.transcript { margin-top: 1.6rem; border: 1px solid var(--iris-edge); border-radius: 0.5rem; padding: 0.8rem 1rem; }
.related { margin-top: 3rem; }

/* --- sacred space page (Task 9) --- */
.wrap.narrow { max-width: 46rem; }
.page-hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem); }

.rates .part {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--iris-edge);
  padding-bottom: 0.5rem;
  margin: 2.2rem 0 1rem;
}
.rates .tier { margin-bottom: 1.6rem; }
.rates .tier h3 { font-size: 1.35rem; margin: 0 0 0.2rem; }
.rates .who { color: var(--lavender-dim); font-style: italic; margin: 0 0 0.6rem; }
.rates-table { width: 100%; border-collapse: collapse; }
.rates-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--iris-edge);
  color: var(--lavender);
  vertical-align: baseline;
}
.rates-table tr:last-child td { border-bottom: 0; }
.rates-table td.price {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--gold-pale);
  padding-left: 1rem;
}
.rates .panel {
  background: var(--ink-raised);
  border: 1px solid var(--iris-edge);
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
}
.rates .panel-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--iris-pale);
  margin: 0 0 0.5rem;
}
.rates .cols { display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .rates .cols { grid-template-columns: 1fr 1fr; } }
.rates .micro { font-size: 0.85rem; font-style: italic; color: var(--lavender-dim); margin: 0.6rem 0 0; }
.rates .note-block { border-left: 2px solid var(--gold); padding-left: 0.9rem; color: var(--lavender-dim); margin: 1rem 0 0; }
.rates ul { padding-left: 1.1rem; }
.rates li { margin-bottom: 0.4rem; color: var(--lavender); }
.rates li strong, .rates-table strong { color: var(--gold-pale); }
.rates-section, .inquire { padding: clamp(2rem, 5vw, 4rem) 0; }

/* --- sessions, about, contact pages (Task 10) --- */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1.2rem; }
.steps li { position: relative; padding-left: 3rem; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-pale); display: grid; place-items: center; font-family: var(--sans); font-size: 0.9rem; }
.steps strong { display: block; color: var(--lavender); margin-bottom: 0.2rem; }
.price-line { font-size: 1.15rem; color: var(--gold-pale); margin: 1.4rem 0; }
.testimonial { border-left: 2px solid var(--gold); padding-left: 1rem; margin: 1.4rem 0; color: var(--lavender); }
.testimonial footer { font-family: var(--sans); font-size: 0.85rem; color: var(--lavender-dim); margin-top: 0.4rem; }
.modalities, .offering, .modality-notes, .classes, .how-remote, .testimonials, .contact-details, .living-temple { padding: clamp(2rem, 5vw, 4rem) 0; }
.contact-details p { font-size: 1.15rem; margin: 0 0 0.6rem; }

/* --- Final fix wave --- */

/* Long-form reading rhythm. The global reset zeroes every margin, so .prose
   has to restate its own spacing or article bodies run together. */
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { margin: 1.2rem 0; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose h2, .prose h3 { margin-bottom: 0.6rem; }
.prose figure, .prose img { margin: 1.6rem 0; }
/* Body links only. Buttons inside the article keep their own text color, or the
   gold button reads gold-on-gold until hover. */
.prose a:not(.btn) { color: var(--gold-bright); }
.prose .btn-gold { color: var(--gold-ink); }

/* Card titles read as headings, not as underlined links. */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { color: var(--gold-bright); }

/* Seats remaining, shown beside the price pill on events. */
.seats-left {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iris-pale);
  border: 1px solid var(--iris-pale);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-left: 0.4rem;
}

/* Sacred Space gallery. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.gallery img { border-radius: 0.5rem; width: 100%; height: auto; }

/* Editor-supplied body copy appended under a static page hero. */
.page-extra { padding: clamp(1.5rem, 4vw, 3rem) 0; }

/* Search and archive result lists. */
.results-list { padding: 0 0 clamp(2rem, 5vw, 4rem); }

/* ---- 2026-08-27: footer social links ---- */
.footer-social { display: flex; gap: 1.2rem; justify-content: center; margin-top: 0.9rem; }
.footer-social a { color: var(--gold-pale); display: inline-flex; transition: color 0.3s ease, transform 0.2s ease; }
.footer-social a:hover { color: var(--gold-bright); transform: translateY(-1px); }
.footer-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* --- Daily Whispers: real vertical player + archive (2026-08-28) --- */
.whisper-stage { max-width: 24rem; margin-inline: auto; }
.whisper-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--iris-edge);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 50% 15%, rgba(155, 107, 212, 0.30), transparent 60%),
    linear-gradient(160deg, #241540 0%, #140B24 70%, #0E0719 100%);
  display: grid;
  place-items: center;
}
.whisper-frame .video-halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  opacity: 0.16;
  pointer-events: none;
}
.whisper-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.whisper-fallback {
  padding: 1.5rem;
  color: var(--lavender-dim);
  font-size: 0.9rem;
}
.whisper-now-date {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.whisper-now-title {
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 400;
  color: var(--lavender);
}

.whisper-archive { min-width: 0; }
.archive-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.whisper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 41rem;
  scrollbar-width: thin;
  scrollbar-color: var(--iris-edge) transparent;
  /* fade the last row so it reads as "there is more below" */
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.whisper-item {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.whisper-item:hover { background: rgba(155, 107, 212, 0.10); }
.whisper-item:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.whisper-item.is-current {
  background: rgba(155, 107, 212, 0.14);
  border-left-color: var(--gold);
}
.whisper-thumb {
  flex: none;
  width: 54px;
  height: 96px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--iris-edge);
}
.whisper-meta { min-width: 0; }
.whisper-item-title {
  display: block;
  color: var(--lavender);
  font-size: 0.98rem;
  line-height: 1.35;
}
.whisper-item.is-current .whisper-item-title { color: var(--gold-pale); }
.whisper-item-sub {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lavender-dim);
}
.archive-note {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--lavender-dim);
}
.archive-note a { color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) {
  .whisper-item { transition: none; }
}

/* Sessions: the one offering, what it can include, the payment line and the classes
   block. CJ's 2026-09-03 audio: modalities live inside the session, classes stand apart. */
.offering .lede { margin: 0 0 1rem; }
.offering > .wrap > p:not(.eyebrow):not(.lede) { color: var(--lavender-dim); }
.includes-heading { margin-top: 1.8rem; font-size: 1.25rem; }
.includes { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.7rem; }
@media (min-width: 640px) { .includes { grid-template-columns: repeat(2, 1fr); } }
.includes li {
  background: var(--iris-veil);
  border: 1px solid var(--iris-edge);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.includes strong { color: var(--lavender); }
.includes strong a { color: inherit; text-decoration: none; }
.includes strong a:hover, .includes strong a:focus-visible { color: var(--gold-bright); }
.includes span { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
.offering-meta { font-size: 0.96rem; }
.booking-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin: 0.6rem 0 0; color: var(--lavender-dim); }
.classes p { color: var(--lavender-dim); }
.classes .btn { margin-top: 0.4rem; }
.back-link { margin-top: 1.4rem; }
.back-link a { color: var(--gold-bright); }

/* Sessions: what CJ may bring into a session. CJ's 2026-09-11 audio: these are descriptions,
   not separate bookings, taken from the Healing Modalities page of her original site. */
.modality-notes .lede { margin: 0 0 0.5rem; }
.modality-notes .note { border-top: 1px solid var(--iris-edge); padding: 1.7rem 0 0.4rem; margin-top: 1.4rem; }
.modality-notes .note h3 { margin: 0 0 0.25rem; font-size: 1.3rem; }
.modality-notes .note-meta { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 0.8rem; }
.modality-notes .note p { color: var(--lavender-dim); }
.modality-notes .note p + p { margin-top: 0.8rem; }

/* Visually hidden, still read aloud. Several templates print a short duration for the eye
   ("15:01") and the spoken form ("15 minutes 1 second") for a screen reader. WordPress core
   happens to ship this rule in the block library stylesheet, so the theme worked by accident;
   dropping that stylesheet is a routine speed tweak and would print the spoken text on the
   page, so the theme owns the rule here. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Newsletter archive. These were page-scoped in the approved design, which had its own
   <style> block; /newsletter/ is the posts page now and has nowhere else to put them. */
.nl-signup { border: 1px solid var(--hairline); border-radius: 12px; background: var(--ink-raised); padding: 2rem; text-align: center; margin-top: 3.5rem; }
.nl-note { font-family: var(--sans); font-size: 0.9rem; color: var(--lavender-dim); margin: 0.8rem 0 0; max-width: var(--measure); }
.nl-note a { color: var(--gold-pale); }
.nl-note a:hover { color: var(--gold-bright); }

/* paginate_links() output. Nothing styled it, on the theme or on the review site, because no
   page there had a second page of results. /newsletter/ does: thirteen letters at ten a page. */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; }
.pagination .page-numbers {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--lavender-dim);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.pagination a.page-numbers:hover { color: var(--gold-bright); border-color: var(--gold); }
.pagination .page-numbers.current { color: var(--gold-pale); border-color: var(--gold); }
.pagination .page-numbers.dots { border-color: transparent; }

/* The temple walkthrough, filmed September 2026. The poster ships with the theme so the band
   is never a blank rectangle; the film itself streams from the CDN, because an 8 MB video
   served by the web server slows down every other request behind it. */
.film-band { border-block: 1px solid var(--hairline-soft); margin-bottom: clamp(2.5rem, 6vw, 4rem); background: #140B24 url("../img/film-poster.jpg") center / cover; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-band .film-scrim { pointer-events: none; }

/* Someone who asked their system to stop moving things gets the still frame, not a loop. */
@media (prefers-reduced-motion: reduce) {
  .film-video { display: none; }
}

/* ============================================================
   THE PHOTOGRAPH SHOOT, September 2026
   Ported from the approved review site, which had these rules and the theme did not.
   The photographs themselves live in assets/img/shoot/ and travel with the theme, so a
   deploy cannot land with the pictures missing.
   ============================================================ */

/* These three restate rules the theme already had. A photograph changes what the hero needs:
   a guaranteed height so the picture is not cropped to whatever the text happens to fill, the
   copy centred in it, and less padding now that the image carries the height. Ported from the
   approved stylesheet, where they sit in the same block as the photo rules. */
.hero { min-height: clamp(26rem, 64vh, 38rem); display: grid; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem); }
.room { padding-block-start: clamp(2.5rem, 5vw, 4rem); }
.room .section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* The heading and lede sit over the brightest part of the photograph, where the darkening
   gradient is weakest. Without a dark shadow behind them the white serif loses contrast. */
.hero h1, .hero .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75); }

/* Say the stacking out loud. The aura, the stardust canvas and the tetrahedron happen to paint
   over the photograph today because they come after it in the markup, which would stop being
   true the moment anyone reorders the hero children. */
.hero-aura, .stardust, .hero-tetra { z-index: 1; }

.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.8; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 7, 22, 0.32) 0%, rgba(12, 7, 22, 0.14) 40%, rgba(12, 7, 22, 0.82) 100%), radial-gradient(ellipse at center 45%, rgba(28, 16, 47, 0.05), rgba(12, 7, 22, 0.32) 75%); }
.room-gallery { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3.5rem) 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.room-gallery figure, .photo-pair figure, .photo-band { margin: 0; }
.room-gallery img, .photo-pair img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid var(--iris-edge); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.room-gallery figcaption, .photo-pair figcaption, .photo-band figcaption, .about-portrait figcaption { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--lavender-dim); margin-top: 0.6rem; }
.room-gallery.named { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.photo-band { position: relative; margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
.photo-band img { display: block; width: 100%; height: clamp(260px, 52vh, 560px); object-fit: cover; object-position: center 40%; border-block: 1px solid var(--hairline-soft); }
.photo-band figcaption { text-align: center; margin-top: 0.7rem; }
.photo-pair { list-style: none; padding: 0; margin: 0 0 clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1.2rem; }
.gong-photo { position: absolute; inset: 0; z-index: 0; }
.gong-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.45; }
.gong-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 7, 22, 0.05), rgba(12, 7, 22, 0.8) 85%); }
.about-portrait { margin: 0; max-width: 24rem; }
.about-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 4px; border: 1px solid var(--gold); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); }
/* about page: the founder photo is a landscape frame, so it takes half the row instead of a tall portrait column */

.about-portrait--wide { max-width: none; }
.about-portrait--wide img { aspect-ratio: 3 / 2; object-position: center; }
/* home page testimonial strip, filled by tools/build-testimonials.py */


.quotes-band { background: var(--ink-raised); padding-block: var(--band-pad); border-block: 1px solid var(--hairline-soft); }
.quotes-grid { display: grid; gap: 1.4rem; }
.quotes-grid .testimonial { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; }
.quotes-grid .testimonial p { color: var(--gold-pale); }
.quotes-band .testimonials-more { text-align: center; margin-top: 2rem; }
@media (min-width: 720px) {
  .room-gallery { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .photo-pair { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .about-grid--wide { grid-template-columns: 1fr 1fr; align-items: center; }
  .quotes-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The standing amethyst fills its frame rather than sitting in the flow, and the purple wash
   over it drops to just under half so the photograph reads through it. */
.photo-frame .photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-frame .photo-wash { opacity: 0.55; }

/* With a portrait beside it the About row wants the copy wider than the picture, and the book
   block below spans the whole row instead of leaving an empty cell next to it. */
@media (min-width: 880px) {
  .about-grid { grid-template-columns: 0.8fr 1.2fr; }
  .about-grid .book-block { grid-column: 1 / -1; }
}

/* Events, from the same September pass. The approved page tightens the space above the listing
   and under its opening line, so the first card is visible without scrolling on a laptop. */
.events-page { padding-block-start: clamp(1.75rem, 4vw, 3rem); }
.events-page .lede { margin-bottom: clamp(2rem, 5vw, 3rem); }
.events-page .card-grid { margin-top: 0.75rem; }


/* The forms carry a fixed height because GoHighLevel's resizing script is not loaded (inc/ghl.php
   says why). In the narrow rail the same signup form stacks taller than it does in a page column,
   so it gets its own height rather than a band of the form's white page showing under the card. */
.ghl-form iframe { width: 100%; border: 0; display: block; height: var(--form-h, 640px); }
/* Where the column narrows the labels and fields stack taller, so each box is given room rather
   than left to scroll inside itself, which is the one failure a reader actually has to fight. */
@media (max-width: 40rem) {
  .ghl-form iframe { height: calc(var(--form-h, 640px) + 3.5rem); }
}
.rail .ghl-form iframe { height: 470px; }

/* A single upright photograph in a page that is otherwise landscape: held to a portrait column so
   it sits as its own moment rather than being cropped into a band it was never framed for. */
.photo-portrait { max-width: 30rem; margin: 3rem auto; }
.photo-portrait img { width: 100%; height: auto; display: block; border-radius: 12px; }
.photo-portrait figcaption { margin-top: 0.75rem; text-align: center; }

/* ============================================================
   THE CLOSING BAND
   The last thing before the footer. Quiet on purpose: after ten
   screens the reader is not to be shouted at, only asked.
   ============================================================ */

.closing {
  padding-block: var(--band-pad);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(84, 46, 138, 0.28), transparent 70%),
    var(--ink-black);
  border-top: 1px solid var(--hairline-soft);
}
/* A small gold lozenge standing in for the rule the other sections use, so the eye knows this is
   an ending and not one more heading. */
.closing-mark {
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto 1.6rem;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(188, 138, 59, 0.12);
}
.closing h2 { margin-top: 0.4rem; }
.closing-line {
  color: var(--lavender-dim);
  max-width: 34rem;
  margin: 1.1rem auto 0;
}
.closing-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* The footer sat straight under the last section with only its own border. This lifts a thin gold
   thread above it, fading out at both ends, so the page closes rather than stops. */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(30rem, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}