/* ──────────────────────────────────────────────────────────────
   Lazarus Ministry of Praise — styles.css
   Cinematic Catholic. Editorial typography. Dark + warm gold.
   ────────────────────────────────────────────────────────────── */

:root {
  --bg:           #0A0E1A;
  --bg-2:         #0E1322;
  --surface:      #131826;
  --surface-hi:   #1A2030;
  --border:       #232B40;
  --border-soft:  rgba(212, 168, 87, 0.18);
  --text:         #F5EFE7;
  --text-dim:     #B7BCC9;
  --text-muted:   #7B8294;
  --gold:         #D4A857;
  --gold-hi:      #E8BE6B;
  --gold-soft:    rgba(212, 168, 87, 0.12);
  --sacred-red:   #8B2E2E;

  --display: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw:  1240px;
  --pad:   28px;
  --rhythm: 80px;
  --radius: 14px;
  --shadow: 0 30px 80px -20px rgba(0,0,0,0.65), 0 8px 24px -8px rgba(0,0,0,0.4);
}

/* Theme variants via [data-theme]/[data-gold] on body */
body[data-theme="ink"]  { --bg: #0A0E1A; --bg-2: #0E1322; }
body[data-theme="navy"] { --bg: #060C20; --bg-2: #0A1230; }
body[data-theme="char"] { --bg: #0E0E12; --bg-2: #15151B; }

body[data-gold="warm"]  { --gold: #D4A857; --gold-hi: #E8BE6B; --gold-soft: rgba(212,168,87,0.12); --border-soft: rgba(212,168,87,0.18); }
body[data-gold="brass"] { --gold: #B8862F; --gold-hi: #D7A24A; --gold-soft: rgba(184,134,47,0.14); --border-soft: rgba(184,134,47,0.22); }
body[data-gold="champ"] { --gold: #E8D08E; --gold-hi: #F2E0AC; --gold-soft: rgba(232,208,142,0.14); --border-soft: rgba(232,208,142,0.22); }
body[data-gold="rose"]  { --gold: #C9925E; --gold-hi: #DBA877; --gold-soft: rgba(201,146,94,0.14); --border-soft: rgba(201,146,94,0.22); }

body[data-density="cinematic"] { --rhythm: 120px; }
body[data-density="balanced"]  { --rhythm: 80px;  }
body[data-density="compact"]   { --rhythm: 56px;  }

body[data-display="cormorant"] { --display: "Cormorant Garamond", serif; }
body[data-display="playfair"]  { --display: "Playfair Display", "Cormorant Garamond", serif; }
body[data-display="dmserif"]   { --display: "DM Serif Display", "Cormorant Garamond", serif; }

/* ───────────── Base ───────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #0a0e1a; }

/* ───────────── Ambient stained-glass color wash ───────────── */
.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.ambient__pool {
  position: absolute;
  width: 80vw; height: 80vw;
  border-radius: 50%;
  filter: blur(120px);
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: poolDrift 38s ease-in-out infinite alternate;
}
.ambient__pool--sapphire {
  top: -20%; left: -25%;
  background: radial-gradient(circle, #2a4a8b 0%, #1a2e5c 35%, transparent 65%);
  animation-duration: 42s;
}
.ambient__pool--ruby {
  top: 35%; right: -30%;
  background: radial-gradient(circle, #6b1f1f 0%, #3a0e0e 35%, transparent 65%);
  opacity: 0.28;
  animation-duration: 48s;
  animation-delay: -8s;
}
.ambient__pool--gold {
  top: 65%; left: 20%;
  background: radial-gradient(circle, #8b6a2f 0%, #4d3a15 35%, transparent 65%);
  opacity: 0.22;
  animation-duration: 54s;
  animation-delay: -16s;
}
@keyframes poolDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.15); }
}
.ambient__grain {
  position: absolute; inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
}
.ambient__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,168,87,0.05), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.7), transparent 60%);
}

/* ───────────── Nav ───────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 32px;
  padding: 22px var(--pad);
  background: transparent;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
  padding: 14px var(--pad);
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
}
.nav__logo {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(212,168,87,0.3));
}
.nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav__wordmark--alt { padding-left: 12px; margin-left: 4px; border-left: 1px solid rgba(212,168,87,0.25); }
.nav__sub {
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0;
}
.nav__links {
  display: flex; gap: 38px;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color .25s ease;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a::after {
  content: ""; position: absolute;
  left: 50%; bottom: 0; width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s ease, left .3s ease;
}
.nav__links a:hover::after { width: 100%; left: 0; }
.nav__cta { justify-self: end; }
.nav__burger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px;
}
.nav__burger span {
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform .3s ease, opacity .3s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobileNav[hidden] { display: none !important; }
.mobileNav {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 49;
  background: rgba(10,14,26,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 18px var(--pad) 28px;
  display: flex; flex-direction: column; gap: 4px;
}
.mobileNav a {
  padding: 14px 0;
  font-family: var(--display);
  font-size: 22px;
  border-bottom: 1px solid var(--border);
}
.mobileNav a:last-child { border-bottom: 0; }
.mobileNav__cta { color: var(--gold) !important; }

/* ───────────── Buttons ───────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  cursor: pointer;
}
.btn--sm { padding: 10px 18px; font-size: 11px; letter-spacing: 0.24em; }
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0e1a;
}
.btn--gold:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(212,168,87,0.6);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn__arrow {
  display: inline-block;
  transition: transform .3s ease;
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ───────────── Typography utilities ───────────── */
.eyebrow {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--soft { color: var(--text-muted); font-size: 10.5px; }
.cross {
  font-family: var(--display);
  color: var(--gold);
  font-size: 1.1em;
  line-height: 1;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 36px;
  text-wrap: balance;
}
.display__line { display: block; }
.display__line--italic {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.section__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.section__title em {
  font-weight: 300;
  color: var(--gold);
  font-style: italic;
}
.section__title--center { text-align: center; }

.section__intro {
  font-size: 17px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 440px;
  margin: 0;
}

.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section__head::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px; height: 1px;
  background: var(--gold);
}
.section__head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.section__head--center::after { left: 50%; transform: translateX(-50%); }

.rule {
  display: block;
  width: 80px; height: 1px;
  background: var(--gold);
  margin: 0 0 26px;
}
.rule--short { width: 32px; }
.ilink {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  transition: border-color .2s ease;
}
.ilink:hover { border-bottom-color: var(--gold); }

/* ───────────── Sections ───────────── */
.section {
  position: relative;
  padding: var(--rhythm) var(--pad);
  z-index: 2;
}
.section > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section--band-2 {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(42,74,139,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(139,46,46,0.08), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,168,87,0.05), transparent 70%),
    linear-gradient(180deg,
      rgba(14,19,34,0) 0%,
      var(--bg-2) 8%, var(--bg-2) 92%,
      rgba(14,19,34,0) 100%);
}

/* ───────────── Hero ───────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--pad) 80px;
  display: grid;
  align-content: center;
  overflow: hidden;
  z-index: 2;
}
.hero__scene {
  position: absolute; inset: 0; z-index: 1;
}

/* ─── Stained-glass color wash ─── */
.stained {
  position: absolute; inset: 0;
  overflow: hidden;
}
/* Rose window — big radial of conic sacred color, heavily blurred */
.stained__rose {
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: 560px; aspect-ratio: 1;
  border-radius: 50%;
  animation: roseGlow 9s ease-in-out infinite alternate;
}
.stained__rose-petals {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #5a8fd9 0deg, #1e3a6f 25deg,
      #d97070 50deg, #8b2e2e 80deg,
      #f5d68a 105deg, #d4a857 135deg,
      #5a8fd9 165deg, #1e3a6f 195deg,
      #d97070 220deg, #8b2e2e 250deg,
      #f5d68a 275deg, #d4a857 305deg,
      #5a8fd9 335deg, #5a8fd9 360deg);
  filter: blur(34px);
  opacity: 0.7;
  mix-blend-mode: screen;
}
.stained__rose-core {
  position: absolute; inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, #fef0c8 0%, #f5d68a 30%, #d4a857 55%, transparent 75%);
  filter: blur(14px);
  opacity: 0.9;
  mix-blend-mode: screen;
}
.stained__rose-leadwork {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 35%, rgba(8,10,18,0.45) 36%, transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 18%, rgba(8,10,18,0.4) 19%, transparent 21%),
    conic-gradient(from 0deg,
      transparent 0deg, transparent 28deg, rgba(8,10,18,0.45) 29deg, rgba(8,10,18,0.45) 31deg,
      transparent 32deg, transparent 60deg, rgba(8,10,18,0.45) 61deg, rgba(8,10,18,0.45) 63deg,
      transparent 64deg, transparent 88deg, rgba(8,10,18,0.45) 89deg, rgba(8,10,18,0.45) 91deg,
      transparent 92deg, transparent 118deg, rgba(8,10,18,0.45) 119deg, rgba(8,10,18,0.45) 121deg,
      transparent 122deg, transparent 148deg, rgba(8,10,18,0.45) 149deg, rgba(8,10,18,0.45) 151deg,
      transparent 152deg, transparent 178deg, rgba(8,10,18,0.45) 179deg, rgba(8,10,18,0.45) 181deg,
      transparent 182deg, transparent 208deg, rgba(8,10,18,0.45) 209deg, rgba(8,10,18,0.45) 211deg,
      transparent 212deg, transparent 238deg, rgba(8,10,18,0.45) 239deg, rgba(8,10,18,0.45) 241deg,
      transparent 242deg, transparent 268deg, rgba(8,10,18,0.45) 269deg, rgba(8,10,18,0.45) 271deg,
      transparent 272deg, transparent 298deg, rgba(8,10,18,0.45) 299deg, rgba(8,10,18,0.45) 301deg,
      transparent 302deg, transparent 328deg, rgba(8,10,18,0.45) 329deg, rgba(8,10,18,0.45) 331deg,
      transparent 332deg, transparent 358deg, rgba(8,10,18,0.45) 359deg);
  filter: blur(2px);
  opacity: 0.65;
  -webkit-mask: radial-gradient(circle, #000 0%, #000 47%, transparent 50%);
          mask: radial-gradient(circle, #000 0%, #000 47%, transparent 50%);
}
@keyframes roseGlow {
  0%   { filter: brightness(0.92); }
  100% { filter: brightness(1.15); }
}

/* Lancet windows — tall vertical glows */
.stained__lancet {
  position: absolute;
  bottom: 14%;
  width: 110px; height: 380px;
  border-radius: 55px 55px 0 0;
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.stained__lancet--l {
  left: 18%;
  background: linear-gradient(180deg, #6aa0ec 0%, #2a4a8b 50%, #0a1f4a 85%, transparent 100%);
  animation: lancetBreathe 11s ease-in-out infinite alternate;
}
.stained__lancet--c {
  left: 50%; transform: translateX(-50%);
  width: 140px; height: 460px;
  background: linear-gradient(180deg, #f5d68a 0%, #d4a857 40%, #8b6a2f 75%, transparent 100%);
  animation: lancetBreathe 13s ease-in-out infinite alternate;
  animation-delay: -3s;
}
.stained__lancet--r {
  right: 18%;
  background: linear-gradient(180deg, #ec8a8a 0%, #8b2e2e 50%, #3a0a0a 85%, transparent 100%);
  animation: lancetBreathe 15s ease-in-out infinite alternate;
  animation-delay: -6s;
}
@keyframes lancetBreathe {
  0%   { opacity: 0.45; transform: translateX(var(--tx,0)) scaleY(1); }
  100% { opacity: 0.7;  transform: translateX(var(--tx,0)) scaleY(1.04); }
}
.stained__lancet--c { --tx: -50%; }

/* Distant transept windows on the sides */
.stained__transept {
  position: absolute;
  top: 30%;
  width: 70px; height: 200px;
  border-radius: 35px 35px 0 0;
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0.4;
}
.stained__transept--l { left: 4%;  background: linear-gradient(180deg, #8b2e2e 0%, transparent 100%); }
.stained__transept--r { right: 4%; background: linear-gradient(180deg, #2a4a8b 0%, transparent 100%); }

/* Heavy stone silhouette — dark vignette framing the glass */
.hero__stone {
  position: absolute; inset: 0;
  background:
    /* Floor darkening */
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.65) 88%, rgba(0,0,0,0.95) 100%),
    /* Side stone */
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.6) 100%),
    /* Top arch shadow */
    radial-gradient(ellipse 120% 35% at 50% -10%, transparent 30%, rgba(0,0,0,0.5) 80%);
  pointer-events: none;
}
.hero__stone::before {
  /* Gothic arch keystone — a dark inverted "cathedral interior" silhouette frame at top */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(900px, 70vw);
  height: 70%;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, transparent 55%, rgba(8,10,18,0.4) 65%, transparent 75%);
}

/* Colored light shafts bleeding downward from the windows */
.hero__shaft {
  position: absolute;
  pointer-events: none;
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: shaftPulse 9s ease-in-out infinite alternate;
}
.hero__shaft--gold {
  top: 12%; left: 50%;
  width: 10%; height: 110%;
  transform: translateX(-50%) rotate(3deg);
  background: linear-gradient(180deg, transparent 0%, rgba(245,214,138,0.55) 25%, rgba(212,168,87,0.3) 70%, transparent 100%);
  animation-duration: 7s;
}
.hero__shaft--sapphire {
  top: 14%; left: 22%;
  width: 7%; height: 95%;
  transform: rotate(8deg);
  background: linear-gradient(180deg, transparent 0%, rgba(106,160,236,0.35) 30%, rgba(42,74,139,0.2) 70%, transparent 100%);
  opacity: 0.38;
  animation-duration: 11s;
}
.hero__shaft--ruby {
  top: 14%; right: 22%;
  width: 7%; height: 95%;
  transform: rotate(-8deg);
  background: linear-gradient(180deg, transparent 0%, rgba(236,138,138,0.32) 30%, rgba(139,46,46,0.2) 70%, transparent 100%);
  opacity: 0.38;
  animation-duration: 13s;
}
@keyframes shaftPulse {
  0%   { opacity: 0.42; }
  100% { opacity: 0.72; }
}

/* Dust motes */
.hero__motes {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero__motes span {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(245,214,138,0.85);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(245,214,138,0.7);
  opacity: 0;
  animation: mote 14s linear infinite;
}
.hero__motes span:nth-child(1){ left: 32%; top: 80%; animation-delay: 0s; }
.hero__motes span:nth-child(2){ left: 48%; top: 90%; animation-delay: 2s; }
.hero__motes span:nth-child(3){ left: 55%; top: 85%; animation-delay: 4s; }
.hero__motes span:nth-child(4){ left: 60%; top: 95%; animation-delay: 6s; }
.hero__motes span:nth-child(5){ left: 42%; top: 88%; animation-delay: 1.5s; }
.hero__motes span:nth-child(6){ left: 52%; top: 92%; animation-delay: 3.5s; }
.hero__motes span:nth-child(7){ left: 38%; top: 84%; animation-delay: 5.5s; }
.hero__motes span:nth-child(8){ left: 58%; top: 78%; animation-delay: 7s; }
.hero__motes span:nth-child(9){ left: 45%; top: 96%; animation-delay: 8s; }
.hero__motes span:nth-child(10){ left: 50%; top: 82%; animation-delay: 10s; }
.hero__motes span:nth-child(11){ left: 56%; top: 90%; animation-delay: 11s; }
.hero__motes span:nth-child(12){ left: 40%; top: 86%; animation-delay: 13s; }
@keyframes mote {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-280px) translateX(-30px); }
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.hero__cta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 8px;
}
.scripture {
  margin: 0 0 44px;
  padding: 0;
  max-width: 580px;
}
.scripture blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: 0.005em;
}
.scripture figcaption {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__meta {
  position: absolute;
  right: var(--pad); bottom: 100px;
  z-index: 3;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--border-soft);
  padding-left: 22px;
  font-size: 11px;
}
.hero__meta p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.meta__label {
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 9.5px;
}
.meta__val {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 9.5px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero__scroll-line {
  display: block; width: 1px; height: 60px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute;
  left: 0; top: -30px; width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, var(--gold-hi));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%   { top: -30px; }
  100% { top: 100%; }
}

/* ───────────── Music · Albums ───────────── */
.album {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.album--flip { grid-template-columns: 1.2fr 1fr; }

.albumCover {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  background: #0a0e1a;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.albumCover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.albumCover:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 36px 90px -20px rgba(0,0,0,0.7), 0 0 24px rgba(212,168,87,0.25);
}
.albumCover:hover img { transform: scale(1.03); }

.album__pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px;
}
.streamPill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
.streamPill svg { color: var(--gold); }
.streamPill:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-2px);
}

.album__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 12px 0 22px;
}
.album__desc {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 540px;
  margin: 0 0 32px;
  line-height: 1.7;
}
.album__desc em { color: var(--text); font-style: italic; }

/* Tracklist */
.tracklist {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--border);
}
.tracklist li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background .25s ease;
}
.tracklist li:hover { background: rgba(212,168,87,0.04); }
.trackPlay {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: transparent;
  position: relative;
  flex-shrink: 0;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.trackPlay::after {
  content: attr(data-roman);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: opacity .2s ease, color .2s ease;
}
.trackPlay::before {
  content: "";
  position: absolute;
  top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--gold);
  opacity: 0;
  transition: opacity .2s ease;
}
.tracklist li:hover .trackPlay,
.trackPlay:focus-visible {
  border-color: var(--gold);
  background: rgba(212,168,87,0.05);
}
.tracklist li:hover .trackPlay::after { opacity: 0; }
.tracklist li:hover .trackPlay::before { opacity: 1; }
.tracklist li.is-playing .trackPlay {
  border-color: var(--gold);
  background: var(--gold);
}
.tracklist li.is-playing .trackPlay::before {
  border-color: transparent transparent transparent #0a0e1a;
  opacity: 1;
}
.tracklist li.is-playing .trackPlay::after { opacity: 0; }
.tracklist li.is-playing .track__name { color: var(--gold); }

body[data-roman="false"] .trackPlay::after { content: counter(idx, decimal); }

.track__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.track__name::before {
  /* waveform pulse appears when playing */
  content: "";
  display: inline-block;
  width: 0;
  height: 12px;
  transition: width .25s ease;
}
.tracklist li.is-playing .track__name::before {
  width: 22px;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) 12%, transparent 12%, transparent 22%,
    var(--gold) 22%, var(--gold) 38%, transparent 38%, transparent 48%,
    var(--gold) 48%, var(--gold) 64%, transparent 64%, transparent 74%,
    var(--gold) 74%, var(--gold) 90%);
  -webkit-mask: linear-gradient(#000, #000);
  margin-right: 8px;
  animation: wave 1.1s steps(3) infinite;
}
@keyframes wave {
  0%   { transform: scaleY(0.4); }
  50%  { transform: scaleY(1);   }
  100% { transform: scaleY(0.6); }
}
.track__len {
  font-size: 12px;
  font-family: var(--body);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.albumDivider {
  text-align: center;
  padding: 60px 0;
  position: relative;
}
.albumDivider::before, .albumDivider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 50%, transparent);
}
.albumDivider::before { left: 0; }
.albumDivider::after { right: 0; }
.albumDivider .cross {
  font-size: 22px;
  color: var(--gold);
}

/* ───────────── Missions ───────────── */
.tour {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--border);
}
.tourRow {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tourRow__head {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  align-items: center;
  gap: 36px;
  padding: 28px 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .3s ease, padding .3s ease;
  position: relative;
}
.tourRow__head:hover,
.tourRow__head:focus-visible {
  background: linear-gradient(90deg, transparent, var(--gold-soft) 50%, transparent);
  padding-left: 18px;
  padding-right: 18px;
  outline: none;
}
.tourRow.is-open .tourRow__head {
  background: linear-gradient(90deg, transparent, var(--gold-soft) 50%, transparent);
  padding-left: 18px;
  padding-right: 18px;
}
.tourRow__date {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border-soft);
  padding-right: 24px;
  font-family: var(--display);
}
.tourRow__mo {
  font-size: 11px;
  font-family: var(--body);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
}
.tourRow__day {
  font-size: 56px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.tourRow__yr {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--body);
  margin-top: 4px;
}
.tourRow__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tourRow__main > .tag { flex-shrink: 0; }
.tourRow__mainText { min-width: 0; flex: 1; }
.tourRow__event {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.tourRow__event em { color: var(--gold); font-style: italic; font-weight: 300; }
.tourRow__venue {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.tourRow__head .tag {
  justify-self: end;
}
.tourRow__chevron {
  width: 12px; height: 12px;
  display: inline-block;
  justify-self: end;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .35s ease;
  margin-left: 14px;
}
.tourRow.is-open .tourRow__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.tourRow__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.tourRow.is-open .tourRow__panel { max-height: 600px; }
.tourRow__panelInner {
  padding: 0 18px 32px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 36px;
}
.tourRow__panelInner > * { grid-column: 2; }
.tourMeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 36px;
  margin: 0 0 22px;
}
.tourMeta > div {
  display: flex; flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--gold-soft);
  padding-left: 14px;
}
.tourMeta dt {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.tourMeta dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}
.tourRow__desc {
  margin: 0 0 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 640px;
}
.tourRow__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tourFoot {
  margin-top: 36px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: var(--gold-soft);
  color: var(--gold);
  white-space: nowrap;
}
.tag--gold { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); }
.tag--sacred { color: #C97676; border-color: rgba(139,46,46,0.32); background: rgba(139,46,46,0.18); }
.tag--frost {
  background: rgba(10,14,26,0.6);
  backdrop-filter: blur(8px);
  border-color: rgba(245,239,231,0.16);
  color: var(--text);
}
.tourRow__cta {
  display: none;
}
.tourFoot {
  margin-top: 36px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ───────────── Scripture Interlude ───────────── */
.interlude {
  position: relative;
  text-align: center;
  padding: 40px var(--pad) 60px;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}
.interlude__mark {
  font-family: var(--display);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.5em;
  margin: 0 0 36px;
  line-height: 1.3;
  letter-spacing: 0.5em;
  opacity: 0.7;
}
.interlude__quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.35;
  margin: 0 0 28px;
  color: var(--text);
  text-wrap: balance;
}
.interlude__quote em { color: var(--gold); }
.interlude__dropcap {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: 1.4em;
  color: var(--gold);
  line-height: 1;
  margin-right: 0.04em;
  vertical-align: -0.08em;
}
.interlude__cite {
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ───────────── Media · Bento ───────────── */
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 18px;
}
.vcard {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .4s ease, border-color .4s ease;
  display: block;
  color: var(--text);
  background: #0a0e1a;
}
.vcard:hover { transform: translateY(-4px); border-color: var(--gold-soft); }
.vcard--feat {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* Card 2-5 flow into the right 2 columns × 2 rows */
.vcard__thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s ease, opacity .4s ease;
}
.vcard:hover .vcard__thumb { transform: scale(1.04); }
.vcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.vcard .tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
}
.vcard__body {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  z-index: 2;
}
.vcard__title {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 6px;
  font-weight: 400;
  text-wrap: balance;
}
.vcard--feat .vcard__title { font-size: 30px; }
.vcard__meta {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.playBtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(10,14,26,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245,239,231,0.3);
  display: grid; place-items: center;
  color: var(--text);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.vcard:hover .playBtn {
  background: var(--gold);
  color: #0a0e1a;
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ───────────── About ───────────── */
.aboutGrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.aboutPortrait {
  margin: 0;
  position: sticky; top: 120px;
}
.aboutPortrait__img {
  aspect-ratio: 3 / 4;
  width: 100%;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212,168,87,0.18), transparent 60%),
    linear-gradient(180deg, #131826 0%, #08101e 100%);
  box-shadow: var(--shadow);
}
.aboutPortrait__initials {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: 0 0 60px rgba(212,168,87,0.25);
  user-select: none;
  z-index: 2;
}
.aboutPortrait__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  filter: grayscale(1) contrast(1.05);
}
.aboutPortrait.is-changing .aboutPortrait__initials,
.aboutPortrait.is-changing .aboutPortrait__photo {
  animation: portraitFade .5s ease;
}
.aboutPortrait__img.is-changing .aboutPortrait__initials,
.aboutPortrait__img.is-changing .aboutPortrait__photo {
  animation: portraitFade .5s ease;
}
@keyframes portraitFade {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.aboutPortrait__shaft {
  position: absolute;
  top: -10%; right: 15%;
  width: 30%; height: 130%;
  background: linear-gradient(180deg, transparent 0%, rgba(232,190,107,0.22) 45%, transparent 100%);
  filter: blur(18px);
  transform: rotate(14deg);
}
.aboutPortrait__caption {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aboutPortrait__caption .rule { margin-bottom: 14px; }
.aboutPortrait__name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--text);
}
.aboutPortrait__role {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.aboutPortrait figcaption {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aboutBody p {
  font-size: 17px;
  line-height: 1.78;
  color: var(--text-dim);
  margin: 0 0 22px;
  max-width: 580px;
}
.aboutBody__lead { color: var(--text) !important; font-size: 18px !important; }
.dropcap {
  font-family: var(--display);
  float: left;
  font-size: 4.6em;
  line-height: 0.85;
  font-weight: 400;
  color: var(--gold);
  padding: 0.06em 0.12em 0 0;
  margin-right: 4px;
}
body[data-dropcaps="false"] .dropcap {
  float: none;
  font-size: 1em;
  color: inherit;
  padding: 0; margin: 0;
}

.aboutQuote {
  margin: 36px 0 44px;
  padding: 28px 32px;
  border-left: 2px solid var(--gold);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  position: relative;
}
.aboutQuote__mark {
  position: absolute;
  top: -10px; left: 24px;
  font-family: var(--display);
  font-size: 60px;
  line-height: 1;
  color: var(--gold);
  font-style: italic;
}
.aboutQuote p {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--text) !important;
  margin: 0;
  max-width: none !important;
}
.aboutQuote__cite {
  margin-top: 16px !important;
  font-family: var(--body) !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

.memberHead {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 48px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.memberHead__hint {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.members {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
.member {
  text-align: center;
}
.memberBtn {
  background: transparent;
  border: 0;
  padding: 10px 6px;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: background .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: inherit;
  font: inherit;
  text-align: center;
}
.memberBtn:hover {
  background: rgba(212,168,87,0.04);
}
.memberBtn:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}
.member__name {
  margin: 12px 0 2px;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.2;
}
.member__role {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.member.is-active .member__avatar {
  border-color: var(--gold);
  background: var(--gold);
  color: #0a0e1a;
}
.member.is-active .member__name {
  color: var(--gold);
}
.member__avatar {
  display: grid; place-items: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  margin: 0 auto 12px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--gold);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

/* ───────────── Triptych ───────────── */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ctaCard {
  position: relative;
  display: block;
  padding: 44px 36px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .4s ease, border-color .4s ease, background .4s ease;
  overflow: hidden;
}
.ctaCard:hover {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  background: var(--surface-hi);
}
.ctaCard__glow {
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 200%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 40%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.ctaCard:hover .ctaCard__glow { opacity: 1; }
.ctaCard__icon {
  display: block;
  color: var(--gold);
  margin-bottom: 24px;
}
.ctaCard__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.ctaCard__desc {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 0 24px;
  min-height: 5.5em;
}
.ctaCard__desc strong { color: var(--gold); font-weight: 500; }
.ctaCard__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 6px;
  transition: gap .3s ease, border-color .3s ease;
}
.ctaCard:hover .ctaCard__cta { gap: 14px; border-bottom-color: var(--gold); }

/* ───────────── Footer ───────────── */
.footer {
  position: relative;
  padding: 100px var(--pad) 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  z-index: 2;
  text-align: left;
}
.footer__top {
  max-width: var(--maxw);
  margin: 0 auto 60px;
}
.footer__brand {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 560px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer__brand .newsletter { margin: 0 auto; }
.footer__mark {
  color: var(--gold);
  margin-bottom: 24px;
}
.footer__logo {
  width: 96px;
  max-width: 40%;
  height: auto;
  color: var(--gold);
  filter: drop-shadow(0 0 24px rgba(212,168,87,0.2));
}
.footer__name {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 16px;
}
.footer__tag {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 360px;
}
.newsletter {
  display: flex;
  align-items: center;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 4px 4px 22px;
  max-width: 380px;
  transition: border-color .3s ease;
}
.newsletter:focus-within { border-color: var(--gold); }
.newsletter input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 12px 0;
}
.newsletter input::placeholder { color: var(--text-muted); }
.newsletter button {
  background: var(--gold);
  color: #0a0e1a;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .25s ease;
}
.newsletter button:hover { background: var(--gold-hi); }
.newsletter.is-joined {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.newsletter.is-joined button { background: transparent; color: var(--gold); pointer-events: none; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer__cols h5 {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.footer__cols a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-dim);
  transition: color .25s ease;
}
.footer__cols a:hover { color: var(--gold); }
.footer__addr {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 12px 0 0;
}

.footer__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.socials {
  display: flex;
  gap: 14px;
}
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.socials a:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
  background: var(--gold-soft);
  transform: translateY(-2px);
}
.footer__legal {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.04em;
  text-align: right;
}

/* ───────────── Inline album player ───────────── */
.album__player {
  margin: 6px 0 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s ease, opacity .4s ease;
}
.album__player[hidden] { display: none; }
.album__player.is-active {
  max-height: 200px;
  opacity: 1;
}
.album__playerHost iframe {
  width: 100%;
  height: 80px;
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  background: rgba(212,168,87,0.04);
  display: block;
}

/* ───────────── Floating now-playing bar (single shared player) ───────────── */
.nowPlaying {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  transform: translateY(110%);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
  padding: 0 20px 16px;
  pointer-events: none;
}
.nowPlaying.is-open { transform: translateY(0); pointer-events: auto; }
.nowPlaying__inner {
  max-width: 980px; margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, rgba(10,14,26,0.92), rgba(10,14,26,0.96));
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,168,87,0.06) inset;
  padding: 10px 44px 10px 14px;
  backdrop-filter: blur(8px);
}
.nowPlaying__host iframe {
  width: 100%; height: 80px;
  border: 0; border-radius: 10px; display: block;
}
.nowPlaying__close {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  color: var(--gold);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.nowPlaying__close:hover { background: rgba(212,168,87,0.12); }
body.has-nowPlaying { padding-bottom: 110px; }

/* ───────────── Tweaks panel ───────────── */
.tweaks {
  position: fixed;
  top: 80px; right: 24px;
  width: 280px;
  z-index: 70;
  background: rgba(14,19,34,0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
  font-size: 12px;
  color: var(--text);
}
.tweaks__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.tweaks__head p {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tweaks__close {
  width: 24px; height: 24px;
  font-size: 18px;
  color: var(--text-muted);
  border-radius: 4px;
}
.tweaks__close:hover { color: var(--gold); }
.tweaks__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.tweak__label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tweak__seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--surface);
  border-radius: 6px;
  padding: 3px;
}
.tweak__seg button {
  padding: 7px 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  border-radius: 4px;
  color: var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
.tweak__seg button.is-on {
  background: var(--gold);
  color: #0a0e1a;
  font-weight: 600;
}
.tweak__sw {
  display: flex;
  gap: 8px;
}
.tweak__sw button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.tweak__sw button.is-on {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--gold);
}
.tweak__check {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 0;
}
.tweak__check input { accent-color: var(--gold); }

/* ───────────── Reveal animation ───────────── */
.reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease; }
.reveal.js-ready { opacity: 0; transform: translateY(28px); }
.reveal.is-in, .reveal.js-ready.is-in { opacity: 1; transform: none; }
.reveal-stagger { opacity: 1; transform: none; transition: opacity .9s ease calc(var(--d) * 0.12s), transform .9s ease calc(var(--d) * 0.12s); }
.js-ready .reveal-stagger { opacity: 0; transform: translateY(20px); }
.is-in .reveal-stagger,
.reveal.is-in .reveal-stagger { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger { opacity: 1 !important; transform: none !important; }
  .stained__rose, .stained__lancet, .hero__shaft, .hero__motes span, .ambient__pool { animation: none !important; }
}

/* ───────────── Responsive ───────────── */
@media (max-width: 980px) {
  :root { --rhythm: 80px; --pad: 24px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav { grid-template-columns: 1fr auto; }
  .hero__meta { display: none; }
  .section__head { grid-template-columns: 1fr; gap: 30px; align-items: start; margin-bottom: 60px; }
  .album, .album--flip { grid-template-columns: 1fr; gap: 40px; }
  .album--flip .album__art { order: -1; }
  .albumCover { max-width: 480px; margin: 0 auto; }
  .album__pills { justify-content: center; }
  .album__info { text-align: left; }
  .tourRow__head { grid-template-columns: 90px 1fr auto auto; gap: 24px; }
  .tourRow__panelInner { grid-template-columns: 1fr; padding: 0 18px 28px; }
  .tourRow__panelInner > * { grid-column: 1; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 240px; gap: 14px; }
  .vcard--feat { grid-column: span 2; grid-row: auto; }
  .bento > .vcard:nth-child(2) { grid-column: span 2; grid-row: auto; }
  .vcard--feat .vcard__title { font-size: 26px; }
  .aboutGrid { grid-template-columns: 1fr; gap: 40px; }
  .aboutPortrait { position: static; max-width: 380px; }
  .members { grid-template-columns: 1fr 1fr; gap: 28px; }
  .triptych { grid-template-columns: 1fr; }
  .ctaCard__desc { min-height: 0; }
  .footer__top { gap: 40px; }
  .footer__brand { margin-bottom: 36px; padding-bottom: 32px; }
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal { text-align: left; }
  .tweaks { top: auto; bottom: 16px; right: 16px; width: 260px; }
}
@media (max-width: 680px) {
  :root { --pad: 20px; }
  .hero { padding-top: 110px; min-height: 90vh; }
  .display { font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .scripture blockquote { font-size: 1.1rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .vcard--feat { grid-column: auto; grid-row: auto; grid-row: span 1; }
  .bento > .vcard:nth-child(2) { grid-column: auto; }
  .vcard--feat .vcard__title { font-size: 24px; }
  .members { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .tourRow {
    border-bottom: 1px solid var(--border);
  }
  .tourRow__head {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }
  .tourRow__date {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 10px;
  }
  .tourRow__day { font-size: 32px; }
  .tourRow__chevron { position: absolute; top: 28px; right: 12px; }
  .tag { justify-self: start; }
  .album__title { font-size: 2rem; }
  .track__name { font-size: 16px; }
  .tracklist li { grid-template-columns: 36px 1fr auto; gap: 12px; }
}