/* WHAT THIS FILE IS: Devangana's supplied visual composition and local fonts.
   The final contract rules support optional customer data, captions, native
   hidden states and conditional decorative downloads without resizing art. */
/* ═══════════════════════════════════════════════════════════════════════
   Devangana · Maharaja
   A temple at the water's edge: carved sandstone, haldi and kumkum, saffron
   and old brass. The sanctum doors open on a sunrise darshan; dusk falls on
   the ghat as the lamps are lit; the evening ends with the aarti.
   Every ornament breathes a little and nothing sits on a line of text.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cinzel-400.woff2) format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cinzel-500.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/alegreya-400.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/alegreya-400i.woff2) format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/alegreya-500.woff2) format("woff2");
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/marcellus-400.woff2) format("woff2");
}
@font-face {
  font-family: "Italianno";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/italianno-400.woff2) format("woff2");
}
@font-face {
  font-family: "Tiro Devanagari Sanskrit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/tiro-deva-400.woff2) format("woff2");
}

:root {
  --sand: #f7ecd6;
  --sand-2: #efdfc0;
  --haldi: #f8e6bf;
  --haldi-2: #f1d59e;
  --stone: #e5cfa2;
  --marble: #fff9ee;
  --kumkum: #a3162b;
  --sindoor: #c8352b;
  --saffron: #e07b1a;
  --marigold: #f0a030;
  --brass: #b5852f;
  --brass-lt: #e2be6e;
  --brass-pale: #f6e5b6;
  --brass-dk: #7a5418;
  --leaf: #55702f;
  --ink: #3c1e12;
  --ink-2: #6b4329;
  --ink-3: #9a7656;
  --sanct: #1f0e08;
  --sanct-2: #3a1b0d;
  --night: #140910;
  --night-2: #2a1018;
  --cream: #f6ead3;
  --col: 100%;
  --pad: 22px;
  --gap: 100px;
  --eo: cubic-bezier(0.16, 1, 0.3, 1);
  --es: cubic-bezier(0.65, 0, 0.35, 1);
  --soft: cubic-bezier(0.45, 0, 0.25, 1);
  --carve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23B5852F' stroke-opacity='.13' stroke-width='.8'%3E%3Cpath d='M36 6c6 10 6 20 0 30c-6-10-6-20 0-30Z'/%3E%3Cpath d='M36 66c6-10 6-20 0-30c-6 10-6 20 0 30Z'/%3E%3Cpath d='M6 36c10-6 20-6 30 0c-10 6-20 6-30 0Z'/%3E%3Cpath d='M66 36c-10-6-20-6-30 0c10 6 20 6 30 0Z'/%3E%3Ccircle cx='36' cy='36' r='3'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='72' cy='0' r='2'/%3E%3Ccircle cx='0' cy='72' r='2'/%3E%3Ccircle cx='72' cy='72' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='40' viewBox='0 0 76 40'%3E%3Cpath d='M0 3 Q38 15 76 3' fill='none' stroke='%23B5852F' stroke-width='1.4'/%3E%3Cg fill='%2355702F'%3E%3Cpath d='M14 7c-4 7-4 15 0 21c4-6 4-14 0-21Z'/%3E%3Cpath d='M62 7c-4 7-4 15 0 21c4-6 4-14 0-21Z'/%3E%3C/g%3E%3Cg fill='%237E9A44'%3E%3Cpath d='M14 9c-1.5 5-1.5 12 0 17'/%3E%3C/g%3E%3Cpath d='M38 9v7' stroke='%23B5852F' stroke-width='1'/%3E%3Ccircle cx='38' cy='21' r='6.4' fill='%23F0A030'/%3E%3Ccircle cx='38' cy='21' r='4.4' fill='%23E07B1A'/%3E%3Ccircle cx='38' cy='21' r='1.8' fill='%23B8541A'/%3E%3Ccircle cx='38' cy='31' r='2.6' fill='%23C8352B'/%3E%3C/svg%3E");
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23FFF0D2'%3E%3Ccircle cx='12' cy='18' r='.9' opacity='.6'/%3E%3Ccircle cx='70' cy='40' r='.6' opacity='.5'/%3E%3Ccircle cx='118' cy='12' r='1' opacity='.45'/%3E%3Ccircle cx='38' cy='88' r='.7' opacity='.5'/%3E%3Ccircle cx='96' cy='104' r='.9' opacity='.55'/%3E%3Ccircle cx='128' cy='70' r='.6' opacity='.4'/%3E%3Ccircle cx='58' cy='128' r='.8' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 640px) {
  :root {
    --col: 640px;
    --pad: 40px;
    --gap: 112px;
  }
}
@media (min-width: 960px) {
  :root {
    --col: 800px;
    --pad: 56px;
    --gap: 126px;
  }
}
@media (min-width: 1280px) {
  :root {
    --col: 860px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #2a140c;
  color: var(--ink);
  font-family: "Alegreya", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #4e2a16 0%, #2a140c 60%, #160a06 100%);
}
body.is-closed {
  overflow: hidden;
  height: 100vh;
}
img {
  max-width: 100%;
  display: block;
}
sup {
  font-size: 0.62em;
  line-height: 0;
}
button {
  font: inherit;
  color: inherit;
}
@media (min-width: 640px) {
  body {
    font-size: 19px;
  }
}

#page {
  position: relative;
  z-index: 2;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--sand);
  box-shadow:
    0 0 0 1px rgba(226, 190, 110, 0.25),
    0 0 90px rgba(0, 0, 0, 0.55);
}
.edge {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  width: calc((100vw - var(--col)) / 2);
  object-fit: cover;
}
.edge-l {
  left: 0;
  object-position: left center;
}
.edge-r {
  right: 0;
  object-position: right center;
}
@media (min-width: 1180px) {
  .edge {
    display: block;
  }
}
#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 30;
  pointer-events: none;
}
.src {
  display: none;
}

/* ─────────── type ─────────── */
.eyebrow {
  margin: 0 0 12px;
  font-family: "Marcellus", serif;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.eyebrow-lt {
  color: var(--brass-lt);
}
.h2 {
  margin: 0 0 8px;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(30px, 8vw, 50px);
  line-height: 1.12;
  color: var(--kumkum);
  letter-spacing: 0.03em;
}
.h2-lt {
  color: var(--brass-pale);
}
.inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.inner-wide {
  max-width: 820px;
}
.ph-tag {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(60, 30, 18, 0.74);
  color: var(--brass-pale);
  font-family: "Marcellus", serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ─────────── sections ─────────── */
.sec {
  position: relative;
  padding: var(--gap) var(--pad);
  text-align: center;
  isolation: isolate;
  overflow-x: clip;
}
.sand {
  background:
    var(--carve) 0 0/72px 72px,
    radial-gradient(ellipse 90% 360px at 50% 0%, #fff6e4, rgba(255, 246, 228, 0)),
    linear-gradient(180deg, var(--sand), var(--sand-2));
}
.haldi {
  background:
    var(--carve) 36px 36px/72px 72px,
    radial-gradient(ellipse 90% 360px at 50% 0%, #fff2d2, rgba(255, 242, 210, 0)),
    linear-gradient(180deg, var(--haldi), #f3dcaa);
}
/* a toran of marigold and mango leaves where one room opens into the next */
.sec::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 40px;
  z-index: 3;
  pointer-events: none;
  background: var(--toran) 0 0/76px 40px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(60, 30, 10, 0.18));
  transform-origin: 50% 0;
  animation: toran 9s ease-in-out infinite;
}
@keyframes toran {
  0%,
  100% {
    transform: skewX(-0.6deg);
  }
  50% {
    transform: skewX(0.6deg);
  }
}

/* the kolam that draws itself above each heading */
.kolam {
  display: block;
  overflow: visible;
}
.kolam .k {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--soft);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.kolam .kf {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.4);
  transition:
    opacity 0.9s var(--soft),
    transform 1.2s var(--eo);
  transition-delay: calc(900ms + var(--d, 0) * 60ms);
}
.kolam.in .k {
  stroke-dashoffset: 0;
}
.kolam.in .kf {
  opacity: 1;
  transform: none;
}
.head-kolam {
  width: clamp(66px, 16vw, 86px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 12px;
}
.head-kolam .k {
  stroke: var(--kumkum);
  stroke-width: 1.6;
}
.head-kolam .k2 {
  stroke: var(--brass);
  stroke-width: 1.2;
}
.head-kolam .kf {
  fill: var(--marigold);
}
.head-kolam .kf2 {
  fill: var(--kumkum);
}
.sanctum .head-kolam .k {
  stroke: var(--brass-lt);
}
.sanctum .head-kolam .k2 {
  stroke: #f6e5b6;
}

/* ─────────── reveal ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.6s var(--soft),
    transform 1.6s var(--eo);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.kolam.reveal {
  transform: none;
}

/* ─────────── ambient: tiny, slow, never obvious ─────────── */
@keyframes bellSwing {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
@keyframes bellRing {
  0% {
    transform: rotate(0);
  }
  12% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-11deg);
  }
  48% {
    transform: rotate(8deg);
  }
  66% {
    transform: rotate(-5deg);
  }
  84% {
    transform: rotate(2.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes flicker {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.9);
  }
  35% {
    opacity: 0.95;
    transform: translate(-50%, -51%) scale(1.05);
  }
  70% {
    opacity: 0.7;
    transform: translate(-50%, -49%) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@keyframes beam {
  0% {
    transform: translateX(-120%) rotate(16deg);
  }
  100% {
    transform: translateX(230%) rotate(16deg);
  }
}
@keyframes cloud {
  from {
    transform: translateX(-60%);
  }
  to {
    transform: translateX(160%);
  }
}
@keyframes drift {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
@keyframes sunPulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shine {
  to {
    background-position: -240% 0;
  }
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes flame {
  0% {
    transform: translateX(-50%) scale(1, 1) skewX(0);
  }
  25% {
    transform: translateX(-52%) scale(0.94, 1.06) skewX(-3deg);
  }
  50% {
    transform: translateX(-49%) scale(1.04, 0.95) skewX(2deg);
  }
  75% {
    transform: translateX(-51%) scale(0.97, 1.04) skewX(-1deg);
  }
  100% {
    transform: translateX(-50%) scale(1, 1) skewX(0);
  }
}

/* ═══════════ OPENING: the sanctum doors ═══════════ */
#cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1.4s var(--soft);
}
#cover:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: -6px;
}
.cv-wall {
  position: absolute;
  inset: 0;
  background:
    var(--carve) 0 0/72px 72px,
    radial-gradient(ellipse 70% 60% at 50% 45%, #6a3a1c 0%, #3a1b0d 55%, #1a0b06 100%);
}
.cv-light {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--soft) 0.4s;
  background: radial-gradient(
    ellipse 46% 52% at 50% 46%,
    #fffdf2 0%,
    #ffe8b0 26%,
    #f6b65e 56%,
    rgba(224, 123, 26, 0.3) 78%,
    rgba(120, 50, 10, 0) 100%
  );
}
.cv-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.55;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 244, 210, 0.7) 0 2.5deg,
    rgba(255, 244, 210, 0) 2.5deg 11deg
  );
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 18%, transparent 52%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 18%, transparent 52%);
  animation: spin 80s linear infinite;
}
.cv-sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.cv-scene {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-origin: 50% 46%;
  transition:
    transform 3s cubic-bezier(0.55, 0, 0.2, 1) 0.5s,
    opacity 1.2s var(--soft) 1.9s;
}
.cv-doors {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  transform-style: preserve-3d;
  z-index: 2;
}
.cv-half {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45));
  transition:
    transform 2.6s cubic-bezier(0.6, 0, 0.2, 1) 0.35s,
    filter 2s;
}
.cv-half-l {
  right: -1px;
  transform-origin: 0 50%;
}
.cv-half-r {
  left: -1px;
  transform-origin: 100% 50%;
}
.cv-seam {
  position: absolute;
  left: -2px;
  top: 10%;
  bottom: 6%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 226, 150, 0),
    rgba(255, 236, 180, 0.95) 30%,
    rgba(255, 226, 150, 0.9) 70%,
    rgba(255, 226, 150, 0)
  );
  box-shadow:
    0 0 18px 6px rgba(255, 200, 110, 0.45),
    0 0 60px 18px rgba(255, 170, 70, 0.18);
  animation: seam 3.6s ease-in-out infinite;
}
@keyframes seam {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.cv-bell {
  position: absolute;
  top: -2%;
  z-index: 5;
  width: clamp(30px, 8vw, 48px);
  transform-origin: 50% 0;
  animation: bellSwing 4.8s ease-in-out infinite;
}
.cv-bell img {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px rgba(255, 200, 110, 0.25));
}
.cv-bell-l {
  left: calc(50% - min(40vw, 240px));
}
.cv-bell-r {
  right: calc(50% - min(40vw, 240px));
  animation-duration: 5.6s;
  animation-delay: -2.2s;
}
#cover.go .cv-bell {
  animation: bellRing 2.2s ease-out both;
}
#cover.go .cv-bell-r {
  animation-delay: 0.12s;
}
.cv-seal-wrap {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(30vw, 26vh, 170px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 6;
  transition:
    transform 1.2s var(--eo),
    opacity 0.9s var(--soft) 0.2s;
}
.cv-kolam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  height: 210%;
  transform: translate(-50%, -50%);
}
.cv-kolam .k {
  stroke: #fff4de;
  stroke-width: 1.15;
  filter: drop-shadow(0 0 2px rgba(80, 30, 10, 0.55));
}
.cv-kolam .k2 {
  stroke: #f6c46a;
  stroke-width: 1;
}
.cv-kolam .kf {
  fill: #f0a030;
}
.cv-kolam .kf2 {
  fill: #c8352b;
}
.cv-kolam .kd {
  fill: #fff4de;
}
.cv-seal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #fffbf2;
  box-shadow:
    0 0 0 2px #b5852f,
    0 0 0 6px #f6e5b6,
    0 0 0 7px rgba(122, 84, 24, 0.8),
    0 16px 30px rgba(0, 0, 0, 0.45),
    0 0 50px 10px rgba(255, 200, 110, 0.35);
  animation: sealGlow 4s ease-in-out infinite;
}
@keyframes sealGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px #b5852f,
      0 0 0 6px #f6e5b6,
      0 0 0 7px rgba(122, 84, 24, 0.8),
      0 16px 30px rgba(0, 0, 0, 0.45),
      0 0 36px 6px rgba(255, 200, 110, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 2px #e2be6e,
      0 0 0 6px #f6e5b6,
      0 0 0 7px rgba(122, 84, 24, 0.8),
      0 16px 30px rgba(0, 0, 0, 0.45),
      0 0 70px 16px rgba(255, 200, 110, 0.5);
  }
}
.cv-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.cv-tap-wrap {
  position: absolute;
  left: 50%;
  bottom: max(5vh, 28px);
  transform: translateX(-50%);
  z-index: 8;
  padding: 13px 28px;
  border-radius: 99px;
  background: linear-gradient(180deg, #b32a33, #86141f);
  box-shadow:
    inset 0 0 0 1px rgba(246, 229, 182, 0.85),
    inset 0 0 0 4px #8f1a25,
    inset 0 0 0 5px rgba(246, 229, 182, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
  transition:
    opacity 0.5s,
    transform 0.8s var(--eo);
}
.cv-tap {
  display: block;
  font-family: "Marcellus", serif;
  font-size: 12px;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(
    100deg,
    #e2be6e 0%,
    #fff1cc 32%,
    #ffffff 46%,
    #f3d58e 58%,
    #e2be6e 84%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3.6s linear infinite;
}
.cv-flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 46%,
    #fffdf4 0%,
    rgba(255, 236, 196, 0.85) 35%,
    rgba(255, 226, 180, 0) 75%
  );
}
.cv-burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
}
#cover.go .cv-seal-wrap {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 0;
}
#cover.go .cv-half-l {
  transform: translateX(-62%) rotateY(34deg);
}
#cover.go .cv-half-r {
  transform: translateX(62%) rotateY(-34deg);
}
#cover.go .cv-seam {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#cover.go .cv-light {
  opacity: 1;
}
#cover.go .cv-scene {
  transform: scale(1.5);
  opacity: 0;
}
#cover.go .cv-tap-wrap {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
}
#cover.go .cv-flash {
  animation: flash 2.2s var(--soft) 1.5s both;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}
#cover.done {
  opacity: 0;
  pointer-events: none;
}

/* music + progress */
.music {
  position: fixed;
  top: 14px;
  right: max(14px, calc((100vw - var(--col)) / 2 + 14px));
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(226, 190, 110, 0.85);
  background: rgba(60, 30, 18, 0.58);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.6s,
    transform 0.6s var(--eo);
  pointer-events: none;
}
body.is-open .music {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.eq {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 16px;
}
.eq i {
  width: 3px;
  height: 100%;
  background: var(--brass-lt);
  border-radius: 2px;
  transform-origin: 50% 100%;
  animation: eq 1s ease-in-out infinite;
}
.eq i:nth-child(2) {
  animation-delay: -0.3s;
}
.eq i:nth-child(3) {
  animation-delay: -0.6s;
}
.eq i:nth-child(4) {
  animation-delay: -0.15s;
}
.music[aria-pressed="false"] .eq i {
  animation: none;
  transform: scaleY(0.25);
}
@keyframes eq {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}
.progress {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--col);
  max-width: 100%;
  height: 2px;
  z-index: 91;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #f0a030, #e2be6e, #c8352b);
}

/* ═══════════ STAGES (hero + invitation) ═══════════ */
.stage,
.pin-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: #e9cfa6;
}
.st-veil {
  position: absolute;
  inset: 0;
  background:
    var(--carve) 0 0/72px 72px,
    radial-gradient(ellipse 90% 70% at 50% 45%, #f8e3c2 0%, #e9c99a 60%, #d2a877 100%);
}
.st-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.st-img {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 50% 55%;
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.st-clouds {
  position: absolute;
  left: 14%;
  right: 8%;
  top: 14%;
  height: 42%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}
.st-clouds i {
  position: absolute;
  width: 60%;
  height: 18%;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 248, 236, 0.85),
    rgba(255, 248, 236, 0.3) 50%,
    rgba(255, 248, 236, 0)
  );
  animation: cloud linear infinite;
}
.st-clouds i:nth-child(1) {
  top: 12%;
  animation-duration: 160s;
  animation-delay: -40s;
}
.st-clouds i:nth-child(2) {
  top: 46%;
  width: 44%;
  animation-duration: 200s;
  animation-delay: -120s;
}
.st-clouds i:nth-child(3) {
  top: 74%;
  width: 70%;
  animation-duration: 180s;
  animation-delay: -80s;
  opacity: 0.7;
}
.st-sun {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.st-sun i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 250, 232, 0.95) 0 5%,
    rgba(255, 224, 160, 0.55) 14%,
    rgba(255, 196, 120, 0.15) 38%,
    rgba(255, 180, 110, 0) 64%
  );
  animation: sunPulse 6s ease-in-out infinite;
}
.st-mist {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 6%;
  pointer-events: none;
  opacity: 0.6;
}
.st-mist i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 240, 226, 0.85),
    rgba(255, 240, 226, 0)
  );
  animation: drift 26s ease-in-out infinite alternate;
}
.st-mist i:nth-child(2) {
  left: 30%;
  right: -20%;
  top: 30%;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
  opacity: 0.7;
}
.st-lake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glows i {
  position: absolute;
  width: calc(5% * var(--gs, 1));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle,
    rgba(255, 236, 180, 0.95) 0%,
    rgba(255, 190, 100, 0.45) 32%,
    rgba(255, 160, 70, 0) 70%
  );
  animation: flicker var(--fd, 1.8s) ease-in-out infinite alternate;
  animation-delay: var(--fdl, 0s);
}
.st-beam {
  position: absolute;
  top: -30%;
  left: 0;
  width: 34%;
  height: 160%;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background: linear-gradient(
    90deg,
    rgba(255, 244, 220, 0),
    rgba(255, 244, 220, 0.9) 50%,
    rgba(255, 244, 220, 0)
  );
  animation: beam 17s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.st-beam-soft {
  opacity: 0.32;
  animation-duration: 23s;
  animation-delay: -9s;
}
.st-window {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  --ww: 300px;
}
.hero .st-window::before {
  content: "";
  position: absolute;
  inset: -6% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 251, 242, 0.7),
    rgba(255, 251, 242, 0.46) 55%,
    rgba(255, 251, 242, 0)
  );
}
.st-fit {
  width: 100%;
  transform-origin: 50% 50%;
}

/* hero copy and the darshan */
.hero-in > * {
  opacity: 0;
  transform: translateY(16px);
}
body.is-open .hero-in > * {
  animation: rise 1.3s var(--eo) forwards;
  animation-delay: calc(1.5s + var(--i, 0) * 0.16s);
}
body.is-open .hero-in > .darshan {
  animation: none;
  opacity: 1;
  transform: none;
}
body.is-open .hero .st-img {
  animation:
    kb 12s var(--eo) both,
    cam 46s ease-in-out 12s infinite alternate;
}
@keyframes kb {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}
@keyframes cam {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.05) translate(-1%, -0.6%);
  }
}
.darshan {
  position: relative;
  width: calc(var(--ww) * 0.4);
  max-width: 180px;
  margin: 0 auto calc(var(--ww) * 0.02);
}
.deity {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0;
  filter: brightness(2.4) blur(8px) drop-shadow(0 6px 14px rgba(120, 60, 20, 0.22));
  transform: scale(0.9);
}
body.is-open .deity {
  animation: darshan 2.4s var(--soft) 0.55s forwards;
}
@keyframes darshan {
  0% {
    opacity: 0;
    filter: brightness(2.6) blur(10px) drop-shadow(0 6px 14px rgba(120, 60, 20, 0));
    transform: scale(0.88);
  }
  45% {
    opacity: 1;
    filter: brightness(1.7) blur(2px) drop-shadow(0 6px 14px rgba(120, 60, 20, 0.1));
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0) drop-shadow(0 6px 14px rgba(120, 60, 20, 0.22));
    transform: none;
  }
}
.halo {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
}
body.is-open .halo {
  animation: haloIn 2.6s var(--eo) 0.3s forwards;
}
@keyframes haloIn {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.halo-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 250, 228, 0.95) 0 18%,
    rgba(255, 220, 140, 0.55) 36%,
    rgba(255, 200, 110, 0) 68%
  );
  animation: sunPulse 5.5s ease-in-out infinite;
}
.halo-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 90s linear infinite;
  opacity: 0.7;
}
.halo-rays path {
  fill: rgba(255, 236, 180, 0.55);
}
.invocation {
  margin: 0 0 calc(var(--ww) * 0.025);
  font-family: "Tiro Devanagari Sanskrit", serif;
  font-size: clamp(15px, calc(var(--ww) * 0.056), 20px);
  color: var(--kumkum);
}
.hero-in .eyebrow {
  font-size: clamp(11px, calc(var(--ww) * 0.036), 13px);
  margin-bottom: calc(var(--ww) * 0.02);
  color: #6a4013;
}
.names {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Cinzel", serif;
  font-weight: 400;
  line-height: 1.02;
}
.nm {
  position: relative;
  display: block;
  font-size: min(calc(var(--ww) * 0.158), 68px);
  color: #7e1220;
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 0 rgba(255, 250, 240, 0.8),
    0 0 26px rgba(255, 236, 200, 0.75);
}
.nm .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
}
body.is-open .nm .ch {
  animation: chIn 1.4s var(--eo) forwards;
  animation-delay: calc(2s + var(--d) * 75ms);
}
@keyframes chIn {
  to {
    opacity: 1;
    transform: none;
  }
}
.nm::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 246, 222, 0.95) 46%,
    #d9a84a 50%,
    rgba(255, 246, 222, 0.95) 54%,
    transparent 70%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.nm.lit::after {
  opacity: 1;
  animation: nameShine 7s ease-in-out infinite;
}
.nm-bride.lit::after {
  animation-delay: 0.7s;
}
@keyframes nameShine {
  0% {
    background-position: 160% 0;
  }
  55%,
  100% {
    background-position: -60% 0;
  }
}
.amp {
  order: 2;
  font-family: "Italianno", cursive;
  font-size: min(calc(var(--ww) * 0.16), 66px);
  line-height: 0.9;
  color: var(--brass);
}
.nm-groom {
  order: 1;
}
.nm-bride {
  order: 3;
}
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(var(--ww) * 0.56);
  margin: calc(var(--ww) * 0.03) auto;
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass));
}
.rule::after {
  transform: scaleX(-1);
}
.rule i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sindoor);
  box-shadow:
    0 0 0 2px var(--brass-pale),
    0 0 0 3px var(--brass);
}
.hero-date {
  margin: 0 0 6px;
  font-family: "Marcellus", serif;
  font-size: clamp(12px, calc(var(--ww) * 0.042), 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-venue {
  margin: 0;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: clamp(17px, calc(var(--ww) * 0.066), 24px);
  line-height: 1.3;
  color: var(--ink-2);
}
.hero-venue span {
  font-style: normal;
  font-family: "Marcellus", serif;
  font-size: 0.56em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cue {
  position: absolute;
  left: 50%;
  bottom: max(14px, 2.2vh);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--brass-pale);
  font-family: "Marcellus", serif;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s 3.2s;
}
body.is-open .cue {
  opacity: 0.95;
}
.cue.ready {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
body.is-open .cue.gone {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}
.cue i {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, var(--brass-lt), transparent);
  animation: cueLine 2.4s ease-in-out infinite;
}
.cue span {
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(60, 30, 18, 0.55);
}
@keyframes cueLine {
  0% {
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  45% {
    transform: scaleY(1);
    transform-origin: 50% 0;
  }
  55% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
}

/* ═══════════ THE GHAT ═══════════ */
.ghat {
  position: relative;
  height: 290vh;
  --p: 0;
  --n: 0;
  --pt: 0;
}
.gh-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  --wl: 74%;
}
.gh-sky,
.gh-sky i {
  position: absolute;
  inset: 0;
}
.gh-sky-a {
  background: linear-gradient(180deg, #9db6d2 0%, #e6cfc0 32%, #f6c99a 58%, #f2a866 74%);
}
.gh-sky-b {
  opacity: var(--p);
  background: linear-gradient(
    180deg,
    #1e1a3f 0%,
    #46305e 30%,
    #9a5674 54%,
    #e2876a 70%,
    #f0a060 75%
  );
}
.gh-stars {
  background: var(--stars) 0 0/140px 140px;
  opacity: calc(var(--p) * var(--p));
}
.gh-sun {
  position: absolute;
  left: 50%;
  top: calc(58% + var(--p) * 14%);
  width: min(110vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: calc(1 - var(--p) * 0.55);
}
.gh-sun i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 250, 232, 1) 0 4.5%,
    rgba(255, 220, 150, 0.85) 9%,
    rgba(255, 186, 110, 0.35) 26%,
    rgba(255, 160, 90, 0) 56%
  );
  animation: sunPulse 7s ease-in-out infinite;
}
.gh-sheer {
  position: absolute;
  left: -12%;
  top: 31%;
  width: min(78%, 520px);
  max-width: none;
  opacity: 0.55;
  pointer-events: none;
  transform: translateX(calc(var(--p) * 26%)) rotate(-4deg);
  filter: saturate(0.9);
}
.gh-text {
  position: absolute;
  left: 0;
  right: 0;
  top: max(7%, 56px);
  z-index: 4;
  text-align: center;
  padding: 0 22px;
}
.gh-text::before {
  content: "";
  position: absolute;
  inset: -50% -6% -40%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(1 - var(--pt));
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 250, 242, 0.6),
    rgba(255, 250, 242, 0.28) 55%,
    rgba(255, 250, 242, 0)
  );
}
.gh-text::after {
  content: "";
  position: absolute;
  inset: -50% -6% -40%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--pt);
  background: radial-gradient(
    ellipse closest-side,
    rgba(30, 16, 40, 0.42),
    rgba(30, 16, 40, 0.18) 55%,
    rgba(30, 16, 40, 0)
  );
}
.gh-line {
  margin: 0;
  font-family: "Tiro Devanagari Sanskrit", serif;
  font-size: clamp(25px, 7vw, 40px);
  line-height: 1.2;
  color: color-mix(in srgb, #f6e5b6 calc(var(--pt) * 100%), #8e1a24);
  text-shadow:
    0 0 18px rgba(255, 236, 200, calc(0.7 - var(--pt) * 0.7)),
    0 1px 10px rgba(40, 10, 30, calc(var(--pt) * 0.55));
}
.gh-flourish {
  display: block;
  width: 140px;
  height: 14px;
  margin: 10px auto 0;
  background:
    radial-gradient(circle, #e2be6e 0 3px, transparent 3.5px) 50% 50%/14px 14px no-repeat,
    linear-gradient(
        90deg,
        transparent,
        #b5852f 40%,
        transparent 40%,
        transparent 60%,
        #b5852f 60%,
        transparent
      )
      50% 50%/100% 1px no-repeat;
}
.gh-kick {
  margin: 10px 0 0;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: clamp(19px, 5.2vw, 26px);
  color: color-mix(in srgb, #f6ead3 calc(var(--pt) * 100%), #5b331c);
  text-shadow:
    0 0 14px rgba(255, 236, 200, calc(0.7 - var(--pt) * 0.7)),
    0 1px 8px rgba(40, 10, 30, calc(var(--pt) * 0.6));
}
.gh-names {
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Cinzel", serif;
  font-size: clamp(28px, 8vw, 52px);
  line-height: 1;
  color: #fff0d0;
  text-shadow: 0 0 24px rgba(255, 190, 100, 0.5);
  opacity: var(--n);
  transform: translateY(calc((1 - var(--n)) * 14px));
}
.gh-names em {
  order: 2;
  font-family: "Italianno", cursive;
  font-style: normal;
  font-size: 1.05em;
  color: var(--brass-lt);
}
.gn-groom {
  order: 1;
}
.gn-bride {
  order: 3;
}
.gh-cam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 70%;
  transform: translateY(calc(var(--p) * -2%)) scale(calc(1 + var(--p) * 0.07));
  z-index: 2;
}
.gh-steps {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(100% - var(--wl));
  width: min(122%, 640px);
  aspect-ratio: 544/295;
  transform: translateX(-50%);
}
.gh-steps > img {
  width: 100%;
  height: 100%;
}
.gh-temple {
  position: absolute;
  left: 50%;
  z-index: 0;
  transform: translateX(-46%) translateY(calc(var(--p) * 1.5%));
}
.gh-shikhara {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: none;
  filter: brightness(calc(1 - var(--p) * 0.35)) saturate(calc(1 - var(--p) * 0.2));
}
.gh-aura {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, 40%);
  border-radius: 50%;
  opacity: calc(0.25 + var(--p) * 0.75);
  background: radial-gradient(
    circle,
    rgba(255, 214, 140, 0.7),
    rgba(255, 170, 80, 0.25) 35%,
    rgba(255, 150, 60, 0) 64%
  );
}
.gh-lamps i {
  position: absolute;
  width: 3.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.gh-lamps i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 46%;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  background: radial-gradient(ellipse at 50% 0, #c9763a, #7a3412 70%);
  box-shadow: inset 0 2px 0 rgba(255, 210, 150, 0.6);
}
.gh-lamps i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 46%;
  height: 90%;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  background: radial-gradient(
    ellipse at 50% 75%,
    #fffdf0 0 20%,
    #ffd27a 45%,
    #ff9a2e 75%,
    rgba(255, 120, 30, 0)
  );
  transition: transform 0.9s var(--eo);
  box-shadow: 0 0 10px 4px rgba(255, 180, 80, 0.55);
}
.gh-lamps i.lit::after {
  transform: translateX(-50%) scale(1);
  animation: flame 1.4s ease-in-out infinite;
}
.gh-water {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--wl);
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--wl));
  z-index: 3;
}
.gh-lotus {
  position: absolute;
  bottom: -2%;
  z-index: 5;
  width: min(40%, 250px);
  transform-origin: 50% 100%;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(40, 20, 10, 0.3))
    brightness(calc(1 - var(--p) * 0.3));
}
.gh-lotus-l {
  left: -8%;
  animation: sway 9s ease-in-out infinite;
  translate: 0 calc((1 - var(--p)) * 30px);
}
.gh-lotus-r {
  right: -8%;
  transform: scaleX(-1);
  animation: swayR 10s ease-in-out infinite -3s;
  translate: 0 calc((1 - var(--p)) * 46px);
}
@keyframes swayR {
  0%,
  100% {
    transform: scaleX(-1) rotate(-1.4deg);
  }
  50% {
    transform: scaleX(-1) rotate(1.4deg);
  }
}

/* ═══════════ INVITATION ═══════════ */
.pin {
  position: relative;
}
.js .pin-stage {
  position: sticky;
  top: 0;
}
body.is-open .pin .st-img {
  animation: cam 40s ease-in-out infinite alternate;
}
.chap-window {
  overflow: visible;
}
.shila {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    var(--carve) 0 0/72px 72px,
    linear-gradient(180deg, rgba(255, 250, 240, 0.93), rgba(250, 240, 222, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(181, 133, 47, 0.85),
    inset 0 0 0 6px rgba(255, 250, 240, 0.6),
    inset 0 0 0 7px rgba(181, 133, 47, 0.45),
    0 22px 40px rgba(80, 40, 10, 0.2);
}
.shila::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  width: 30px;
  height: 30px;
  transform: translateX(-50%) rotate(45deg);
  background: #f7ecd6;
  box-shadow:
    0 0 0 1px #b5852f,
    inset 0 0 0 5px #f7ecd6,
    inset 0 0 0 6px #c8352b;
}
.chap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 7%;
  will-change: opacity, transform;
}
.chap-b {
  opacity: 0;
}
.js .chap-a {
  opacity: var(--ca, 1);
}
.js .chap-b {
  opacity: var(--cb, 0);
}
.chap-kolam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: var(--ko, 0);
}
.chap-kolam .k {
  stroke: var(--kumkum);
  stroke-width: 1.2;
  transition: none;
  stroke-dashoffset: calc(1 - var(--kd, 0));
}
.chap-kolam .k2 {
  stroke: var(--brass);
}
.chap-kolam .kf {
  fill: var(--marigold);
  transition: none;
  opacity: var(--kf, 0);
  transform: scale(calc(0.4 + var(--kf, 0) * 0.6));
}
.chap-kolam .kf2 {
  fill: var(--kumkum);
}
.chap-kolam .kd {
  fill: var(--brass);
}
.chap-dots {
  position: absolute;
  left: 50%;
  bottom: max(16px, 2.4vh);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.chap-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.6);
  box-shadow: 0 0 0 1px rgba(181, 133, 47, 0.9);
  transition: all 0.4s;
}
.chap-dots i.on {
  width: 22px;
  border-radius: 5px;
  background: var(--brass-lt);
}
.seal-wrap {
  position: relative;
  width: min(calc(var(--ww) * 0.4), 170px);
  aspect-ratio: 1;
  margin: 0 auto calc(var(--ww) * 0.06);
}
.seal-ring {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  animation: spin 50s linear infinite;
}
.seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--brass),
    0 12px 26px rgba(80, 40, 10, 0.22);
}
.chap .eyebrow {
  font-size: clamp(10px, calc(var(--ww) * 0.034), 12px);
}
.chap .h2 {
  font-size: min(calc(var(--ww) * 0.088), 40px);
  margin-bottom: calc(var(--ww) * 0.045);
}
.prose {
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(15.5px, calc(var(--ww) * 0.058), 19px);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: balance;
}
.union {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ww) * 0.025);
}
.side-groom {
  order: 1;
}
.weds {
  order: 2;
}
.side-bride {
  order: 3;
}
.side-name {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: clamp(19px, calc(var(--ww) * 0.072), 28px);
  color: #7e1220;
  line-height: 1.2;
}
.side-role {
  margin: 6px 0 4px;
  font-family: "Marcellus", serif;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.side-parents {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(15px, calc(var(--ww) * 0.054), 18px);
  color: var(--ink-2);
  line-height: 1.45;
  text-wrap: balance;
}
.weds {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  width: 70%;
}
.weds i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass));
}
.weds i:last-child {
  transform: scaleX(-1);
}
.weds em {
  font-family: "Italianno", cursive;
  font-style: normal;
  font-size: clamp(34px, calc(var(--ww) * 0.13), 50px);
  color: var(--brass);
  line-height: 0.9;
}
.hosted {
  margin: calc(var(--ww) * 0.065) auto 0;
  max-width: 30ch;
}
.hosted-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.hosted-label {
  margin: 0 0 6px;
  font-family: "Marcellus", serif;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sindoor);
}
.hosted-names {
  margin: 0;
  font-size: clamp(15px, calc(var(--ww) * 0.054), 18px);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: balance;
}

/* ═══════════ COUNTDOWN: the sanctum ═══════════ */
.sanctum {
  color: var(--cream);
  background:
    var(--carve) 0 0/72px 72px,
    radial-gradient(ellipse 80% 60% at 50% 40%, #4a2412 0%, #2a130a 60%, #160904 100%);
  overflow: hidden;
  padding-bottom: 0;
}
.sanctum::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--lit, 0);
  transition: opacity 1.6s var(--soft);
  background: radial-gradient(
    ellipse 70% 46% at 50% 52%,
    rgba(255, 180, 90, 0.32),
    rgba(255, 150, 60, 0) 70%
  );
}
.big-bell {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: clamp(56px, 13vw, 92px);
  transform-origin: 50% 0;
  translate: -50% 0;
  animation: bellSwing 5.2s ease-in-out infinite;
  cursor: pointer;
}
.big-bell::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 99%;
  width: 2px;
  height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(181, 133, 47, 0), #b5852f);
}
.big-bell img {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 16px rgba(255, 200, 110, 0.25));
}
.big-bell.ring {
  animation: bellRing 2.4s ease-out;
}
.count .inner {
  padding-top: clamp(120px, 26vw, 170px);
}
.cd-date {
  margin: 4px auto 0;
  max-width: 16em;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: clamp(19px, 5.2vw, 24px);
  color: #ebd9b8;
}
.lamps {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  margin: 34px auto 0;
  max-width: 460px;
}
.lamp-col {
  flex: 1;
  min-width: 0;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.diya-btn {
  position: relative;
  width: 74px;
  height: 62px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.diya-btn:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 4px;
  border-radius: 12px;
}
.diya {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 62px;
  height: 56px;
  transform: translateX(-50%);
}
.diya .bowl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  border-radius: 6px 6px 50% 50%/6px 6px 100% 100%;
  background: radial-gradient(ellipse at 50% 0, #d3884a 0, #9a4a1d 60%, #5e2a0e 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 214, 160, 0.55),
    0 6px 12px rgba(0, 0, 0, 0.4);
}
.diya .bowl::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #b8642c;
  border-radius: 2px;
}
.diya .bowl::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 5px;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #f0a030 0 4px, transparent 4px 8px);
  opacity: 0.8;
}
.diya .flame {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 16px;
  height: 30px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(0);
  border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  background: radial-gradient(
    ellipse at 50% 78%,
    #fffffa 0 18%,
    #ffe39a 40%,
    #ffa63a 72%,
    rgba(255, 110, 30, 0) 100%
  );
  transition: transform 0.9s var(--eo);
}
.diya .flame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 206, 120, 0.55),
    rgba(255, 170, 70, 0.15) 40%,
    rgba(255, 150, 60, 0) 70%
  );
  transition: opacity 1s;
}
.diya-btn:not(.lit) .diya {
  animation: bob 3.4s ease-in-out infinite;
}
.diya-btn:not(.lit)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(226, 190, 110, 0.5);
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% {
    transform: translateX(-50%) scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-50%) scale(1.6);
    opacity: 0;
  }
}
.diya-btn.lit .flame {
  animation: flame 1.3s ease-in-out infinite;
  transform: translateX(-50%) scale(1);
}
.diya-btn.lit .flame::after {
  opacity: 1;
}
.tile {
  width: 100%;
  padding: 16px 4px 12px;
  border-radius: 50% 50% 14px 14px/34px 34px 14px 14px;
  background: linear-gradient(180deg, #3a1b0d, #24100a);
  box-shadow:
    inset 0 0 0 1px rgba(226, 190, 110, 0.55),
    inset 0 0 0 4px #2e150b,
    inset 0 0 0 5px rgba(226, 190, 110, 0.22);
  transition:
    box-shadow 1.2s var(--soft),
    background 1.2s;
}
.tile b {
  display: block;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(32px, 10vw, 50px);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3d2, #e2be6e 55%, #b5852f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.08;
  filter: blur(3px);
  transition:
    opacity 1.2s var(--soft),
    filter 1.2s;
}
.tile i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: "Marcellus", serif;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #cdb48a;
}
.lamp-col.lit .tile {
  background: linear-gradient(180deg, #5a2c12, #2e150b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 140, 0.9),
    inset 0 0 0 4px #3a1b0d,
    inset 0 0 0 5px rgba(255, 214, 140, 0.4),
    0 0 40px 4px rgba(255, 170, 70, 0.25);
}
.lamp-col.lit .tile b {
  opacity: 1;
  filter: none;
}
.lamp-col.lit .tile i {
  color: var(--brass-pale);
}
.lamp-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  font-family: "Marcellus", serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cdb48a;
  transition: opacity 0.5s;
}
.lamp-hint.gone {
  opacity: 0;
}
.hand {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--marigold) 0 3px, transparent 3.5px);
  box-shadow: 0 0 0 1px var(--marigold);
  animation: tapHint 1.8s ease-in-out infinite;
}
@keyframes tapHint {
  0%,
  100% {
    transform: translateX(-4px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}
.lamp-all {
  display: block;
  margin: 8px auto 0;
  padding: 7px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--brass-lt);
  text-decoration: underline;
  text-decoration-color: rgba(226, 190, 110, 0.4);
  text-underline-offset: 3px;
}
.lamp-all.gone {
  display: none;
}
.count .hashtag {
  margin: 26px 0 0;
  font-family: "Marcellus", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--brass-lt);
}
.altar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  margin: 30px auto 0;
  max-width: 560px;
  padding-bottom: 14px;
  pointer-events: none;
}
.altar::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 190, 100, 0.32),
    rgba(255, 190, 100, 0)
  );
}
.altar-diya {
  width: min(24%, 130px);
}
.altar-urli {
  width: min(40%, 220px);
  margin-bottom: 4px;
}
.altar-diya-r {
  transform: scaleX(-1);
}

/* ═══════════ EVENTS: behind the temple doors ═══════════ */
.evs {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  max-width: 430px;
}
@media (min-width: 760px) {
  .evs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    gap: 40px 30px;
  }
}
.ev {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s var(--soft),
    transform 1.2s var(--eo);
}
.ev.in {
  opacity: 1;
  transform: none;
}
.ev-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 16px;
  background: var(--marble);
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(181, 133, 47, 0.75),
    0 0 0 6px var(--marble),
    0 0 0 7px rgba(181, 133, 47, 0.35),
    0 24px 40px rgba(80, 40, 10, 0.13);
}
.ev-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -19px;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  z-index: 3;
  background:
    radial-gradient(circle at 50% 70%, #f0a030 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 70%, #b5852f 0 9px, transparent 9.5px);
  -webkit-mask: linear-gradient(#000, #000);
  filter: drop-shadow(0 2px 2px rgba(80, 40, 10, 0.25));
}
.ev-art {
  position: relative;
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  background: #3a1b0d;
  perspective: 900px;
}
.ev-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.08);
  filter: brightness(0.8);
  transition:
    transform 2.8s var(--eo),
    filter 1.8s var(--soft);
}
.ev-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2s var(--soft) 0.5s;
  background: radial-gradient(
    ellipse 40% 70% at 50% 50%,
    rgba(255, 236, 190, 0.9),
    rgba(255, 200, 120, 0.3) 50%,
    rgba(255, 180, 90, 0) 80%
  );
}
.ev-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  z-index: 2;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow:
    inset 0 0 0 1px rgba(122, 84, 24, 0.7),
    inset 0 0 0 5px rgba(240, 220, 170, 0.25),
    inset 0 0 22px rgba(60, 30, 10, 0.4);
  transition:
    transform 2.2s cubic-bezier(0.55, 0, 0.2, 1),
    filter 2s;
}
.ev-door-l {
  left: 0;
  background-image: url(assets/el/door_leaf.webp);
  transform-origin: 0 50%;
}
.ev-door-r {
  right: 0;
  background-image: url(assets/el/door_leaf_r.webp);
  transform-origin: 100% 50%;
}
.ev.open .ev-door-l {
  transform: rotateY(-104deg);
  filter: brightness(0.7);
}
.ev.open .ev-door-r {
  transform: rotateY(104deg);
  filter: brightness(0.7);
}
.ev.open .ev-art img {
  transform: scale(1);
  filter: none;
}
.ev.open .ev-art::after {
  opacity: 0;
}
.ev-body {
  position: relative;
  padding: 24px 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ev-no {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 3;
  background: linear-gradient(180deg, #b32a33, #86141f);
  color: var(--brass-pale);
  font-family: "Cinzel", serif;
  font-size: 13px;
  box-shadow:
    0 0 0 2px var(--marble),
    0 0 0 3px var(--brass);
}
.ev-name {
  margin: 0 0 4px;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.1;
  color: #7e1220;
  letter-spacing: 0.03em;
}
.ev-when {
  margin: 0;
  font-family: "Marcellus", serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.ev-time {
  margin: 2px 0 8px;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--sindoor);
}
.ev-venue {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.ev-venue span {
  font-size: 0.92em;
  color: var(--ink-3);
}
.ev-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 14px;
  width: 100%;
}
.ev-meta div {
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(240, 160, 48, 0.08);
  box-shadow: inset 0 0 0 1px rgba(181, 133, 47, 0.4);
  min-width: 0;
}
.ev-meta dt {
  font-family: "Marcellus", serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.ev-meta dd {
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 11px 26px;
  border-radius: 99px;
  text-decoration: none;
  font-family: "Marcellus", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff3de;
  background: linear-gradient(180deg, #b32a33, #86141f);
  box-shadow:
    inset 0 0 0 1px rgba(246, 229, 182, 0.6),
    0 8px 18px rgba(134, 20, 31, 0.25);
  transition: transform 0.3s var(--eo);
}
.btn:hover {
  transform: translateY(-2px);
}

/* ═══════════ OUR STORY: saptapadi ═══════════ */
.corner {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.corner-tr {
  right: -40px;
  top: 18px;
  width: clamp(120px, 28vw, 210px);
  transform-origin: 100% 0;
  animation: sway 9s ease-in-out infinite;
}
.walk {
  position: relative;
  max-width: 760px;
  margin: 40px auto 0;
}
.steps-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.steps-svg .ft {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    opacity 0.9s var(--soft),
    transform 0.9s var(--eo);
}
.steps-svg .ft.on {
  opacity: 1;
}
.mo {
  position: relative;
  z-index: 1;
  margin: 0 0 150px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s var(--soft),
    transform 1.2s var(--eo);
}
.mo:last-of-type {
  margin-bottom: 0;
}
.mo.in {
  opacity: 1;
  transform: none;
}
.mo-ph {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  padding: 10px;
  background: var(--marble);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(181, 133, 47, 0.7),
    0 0 0 5px var(--marble),
    0 0 0 6px rgba(181, 133, 47, 0.35),
    0 18px 32px rgba(80, 40, 10, 0.14);
}
.mo-ph::before,
.mo-ph::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 16px;
  height: 16px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f0a030 0 4px,
    #b5852f 4.5px 6px,
    transparent 6.5px
  );
}
.mo-ph::before {
  left: -6px;
}
.mo-ph::after {
  right: -6px;
}
.mo-ph img {
  width: 100%;
  aspect-ratio: 4/4.3;
  object-fit: cover;
  border-radius: 6px;
}
.mo-ph .ph-tag {
  top: auto;
  bottom: 18px;
}
.mo-tx {
  padding: 16px 6px 0;
  max-width: 400px;
  margin: 0 auto;
}
.mo-when {
  margin: 0 0 4px;
  font-family: "Marcellus", serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.mo-head {
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(21px, 5.8vw, 26px);
  line-height: 1.2;
  color: #7e1220;
}
.mo-words {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (min-width: 760px) {
  .mo {
    width: 42%;
    margin-bottom: -30px;
  }
  .mo:nth-of-type(odd) {
    margin-right: auto;
  }
  .mo:nth-of-type(even) {
    margin-left: auto;
  }
  .mo:last-of-type {
    margin-bottom: 0;
  }
}

/* ═══════════ FILM ═══════════ */
.theatre {
  position: relative;
  max-width: 600px;
  margin: 30px auto 0;
  padding-top: 96px;
}
.th-bell {
  position: absolute;
  top: 0;
  z-index: 3;
  width: clamp(28px, 6vw, 40px);
  transform-origin: 50% 0;
  animation: bellSwing 5s ease-in-out infinite;
  pointer-events: none;
}
.th-bell img {
  filter: drop-shadow(0 8px 12px rgba(80, 40, 10, 0.3));
}
.th-bell-l {
  left: 9%;
}
.th-bell-r {
  right: 9%;
  animation-duration: 6s;
  animation-delay: -2.4s;
}
.frame {
  position: relative;
  padding: 14px;
  border-radius: 16px;
  background:
    var(--carve) 0 0/72px 72px,
    linear-gradient(180deg, #f1dfba, #e2c68e);
  box-shadow:
    inset 0 0 0 1px rgba(122, 84, 24, 0.6),
    inset 0 0 0 6px rgba(255, 248, 232, 0.4),
    inset 0 0 0 7px rgba(181, 133, 47, 0.55),
    0 26px 48px rgba(80, 40, 10, 0.22);
}
.film {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  background: #2a140c;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(122, 84, 24, 0.7);
}
.film-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s var(--eo);
}
.film:hover .film-poster {
  transform: scale(1.08);
}
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 45%,
    rgba(40, 18, 8, 0.45)
  );
}
.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 6;
}
.film .ph-tag {
  top: auto;
  bottom: 12px;
}
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d2, #e2be6e 45%, #a9782a);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.play::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(246, 229, 182, 0.9);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.play i {
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #86141f;
}

/* ═══════════ GALLERY: the fan ═══════════ */
.fan {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1/1.08;
  margin: 36px auto 0;
  touch-action: pan-y;
}
.fc {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 70%;
  margin: 0;
  transform-origin: 50% 120%;
  transition:
    transform 1.1s var(--eo),
    opacity 0.9s var(--soft),
    filter 0.9s;
  cursor: pointer;
}
.fc-mat {
  display: block;
  padding: 10px 10px 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffbf2, #f4e6c8);
  box-shadow:
    0 0 0 1px rgba(181, 133, 47, 0.8),
    inset 0 0 0 5px #fffbf2,
    inset 0 0 0 6px rgba(181, 133, 47, 0.45),
    0 20px 36px rgba(80, 40, 10, 0.22);
}
.fc-mat img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 3px;
}
.fc .ph-tag {
  top: auto;
  bottom: 40px;
}
.fc.act {
  cursor: default;
}
.fan-nav {
  position: absolute;
  top: 44%;
  z-index: 20;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1px solid rgba(181, 133, 47, 0.9);
  background: rgba(255, 250, 240, 0.9);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(80, 40, 10, 0.15);
}
.fan-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border: solid var(--kumkum);
  border-width: 0 0 1.5px 1.5px;
  transform: translate(-30%, -50%) rotate(45deg);
}
.fan-nav.next::before {
  transform: translate(-70%, -50%) rotate(-135deg);
}
.fan-nav.prev {
  left: -6px;
}
.fan-nav.next {
  right: -6px;
}
.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;
}
.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: transparent;
  cursor: pointer;
  transition: all 0.4s;
}
.dots button[aria-current="true"] {
  background: var(--sindoor);
  border-color: var(--sindoor);
  width: 22px;
  border-radius: 5px;
}

/* ═══════════ VENUE ═══════════ */
.venue {
  padding-bottom: calc(var(--gap) + 40px);
}
.venue-art {
  position: relative;
  width: min(250px, 62%);
  margin: 22px auto 18px;
}
.venue-art::before {
  content: "";
  position: absolute;
  inset: -14% -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 150, 0.75),
    rgba(255, 214, 150, 0) 66%
  );
  animation: sunPulse 6s ease-in-out infinite;
}
.venue-art img {
  filter: drop-shadow(0 18px 20px rgba(80, 40, 10, 0.18));
}
.v-name {
  margin: 0 0 6px;
  font-family: "Marcellus", serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.v-addr {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mapcard {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  background: var(--marble);
  box-shadow:
    inset 0 0 0 1px rgba(181, 133, 47, 0.55),
    0 14px 28px rgba(80, 40, 10, 0.1);
  color: var(--ink);
  transition: transform 0.3s var(--eo);
}
.mapcard:hover {
  transform: translateY(-2px);
}
.mapcard svg {
  width: 22px;
  height: 22px;
  stroke: var(--kumkum);
  fill: var(--kumkum);
}
.mc-pin {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(163, 22, 43, 0.08);
  flex: none;
}
.mc-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--ink-3);
}
.mc-txt b {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
}
.mc-go svg {
  fill: none;
}
.route {
  margin: 24px auto 0;
  width: min(330px, 86%);
}
.route-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ═══════════ SANDHYA AARTI ═══════════ */
.night {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  text-align: center;
  padding: calc(var(--gap) + 150px) var(--pad) 0;
  background:
    var(--stars) 0 0/140px 140px,
    linear-gradient(180deg, #4a1e22 0, #2a1018 28%, #170a10 100%);
}
.nt-dusk {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 320px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #efdfc0 0%,
    #f0b979 16%,
    #d9734a 32%,
    #9a3a3a 52%,
    #5a2028 74%,
    rgba(74, 30, 34, 0) 100%
  );
}
.nt-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.nt-bells {
  position: absolute;
  top: 150px;
  z-index: 2;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.nt-bells-l {
  left: 5%;
}
.nt-bells-r {
  right: 5%;
}
.nb {
  width: clamp(22px, 5.4vw, 36px);
  height: auto;
  transform-origin: 50% 0;
  animation: bellSwing 5s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 190, 100, 0.4));
}
.nb2 {
  margin-top: 30px;
  animation-duration: 6.2s;
  animation-delay: -2s;
}
.nt-bells-r .nb1 {
  animation-delay: -1.3s;
}
.nt-bells-r .nb2 {
  animation-delay: -3.6s;
}
.nt-inner {
  z-index: 3;
}
.nt-orn {
  width: clamp(70px, 17vw, 96px);
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 22px rgba(255, 190, 100, 0.6));
}
.nt-orn.reveal.in {
  animation: bob 6s ease-in-out infinite;
}
.rv-lead {
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 21px;
  color: #ebdcc0;
  text-align: center;
  max-width: 24ch;
  text-wrap: balance;
  margin: 6px auto 30px;
  line-height: 1.5;
}
#rsvp-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(34px, 9vw, 46px) clamp(20px, 6vw, 38px) clamp(30px, 8vw, 40px);
  border-radius: 20px;
  text-align: center;
  color: var(--ink);
  background:
    var(--carve) 0 0/72px 72px,
    radial-gradient(ellipse at 50% 0%, #fffdf6 0%, var(--marble) 40%, #f5e8cf 100%);
  box-shadow:
    0 0 0 1px var(--brass),
    0 0 0 6px var(--marble),
    0 0 0 7px rgba(181, 133, 47, 0.7),
    0 0 0 9px rgba(226, 190, 110, 0.16),
    0 0 70px 12px rgba(255, 170, 80, 0.18),
    0 40px 70px rgba(0, 0, 0, 0.5);
}
#rsvp-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 13px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(181, 133, 47, 0.45);
}
.rv-choices {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto 24px;
}
@media (min-width: 420px) {
  .rv-choices {
    flex-direction: row;
  }
  .rv-ch {
    flex: 1;
  }
  #rsvp-wrap {
    padding: 50px 44px 44px;
  }
}
.rv-ch {
  border-radius: 14px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(181, 133, 47, 0.5);
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(80, 40, 10, 0.06);
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.2s var(--es),
    box-shadow 0.3s;
}
.rv-ch:hover {
  box-shadow: 0 10px 20px rgba(80, 40, 10, 0.12);
}
.rv-ch:active {
  transform: scale(0.98);
}
.rv-ch.sy {
  border-color: var(--sindoor);
  background: linear-gradient(180deg, #fff5ee, #fbe1d2);
  box-shadow:
    inset 0 0 0 1px #edb7a0,
    0 8px 18px rgba(200, 53, 43, 0.16);
}
.rv-ch.sn {
  border-color: #8a7b70;
  background: linear-gradient(180deg, #f7f4f0, #ece6df);
  box-shadow:
    inset 0 0 0 1px #cfc4b8,
    0 8px 18px rgba(80, 60, 40, 0.12);
}
.rv-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(200, 53, 43, 0.07);
  border: 1px solid rgba(181, 133, 47, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.rv-ico svg {
  width: 21px;
  height: 21px;
  stroke: var(--kumkum);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}
.rv-ch.sy .rv-ico {
  background: linear-gradient(135deg, #b32a33, #86141f);
  border-color: #86141f;
}
.rv-ch.sy .rv-ico svg {
  stroke: #fff3de;
}
.rv-ch.sn .rv-ico {
  background: #6e6158;
  border-color: #5a4e46;
}
.rv-ch.sn .rv-ico svg {
  stroke: #f7f4f0;
}
.rv-lbl {
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 21px;
  color: #7e1220;
  transition: color 0.3s;
}
.rv-ch.sn .rv-lbl {
  color: #5a4e46;
}
.rv-form {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.rv-form.act {
  opacity: 1;
  pointer-events: all;
}
.f-lbl {
  font-family: "Marcellus", serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: 8px;
  text-align: left;
}
.f-opt {
  font-size: 0.85em;
  opacity: 0.7;
  letter-spacing: 0.1em;
  text-transform: none;
}
.f-in,
.f-ta {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(181, 133, 47, 0.5);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: "Alegreya", Georgia, serif;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  box-shadow: inset 0 1px 3px rgba(80, 40, 10, 0.06);
  -webkit-appearance: none;
  appearance: none;
}
.f-in::placeholder,
.f-ta::placeholder {
  color: #b8a089;
}
.f-in:focus,
.f-ta:focus {
  border-color: var(--sindoor);
  box-shadow: 0 0 0 3px rgba(200, 53, 43, 0.14);
}
.f-ta {
  resize: none;
  min-height: 88px;
}
.ff.hide {
  display: none;
}
.f-err {
  margin: 0;
  font-size: 15px;
  color: #a1222c;
  text-align: left;
}
.f-err:empty {
  display: none;
}
.btn-sub {
  width: 100%;
  padding: 16px;
  margin-top: 4px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(180deg, #b32a33, #86141f);
  color: #fff3de;
  font-family: "Marcellus", serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(246, 229, 182, 0.7),
    0 10px 22px rgba(134, 20, 31, 0.3);
  transition:
    transform 0.2s var(--es),
    opacity 0.2s;
}
.btn-sub:active {
  transform: scale(0.97);
}
.btn-sub:disabled {
  opacity: 0.6;
  pointer-events: none;
}
.rv-contact {
  position: relative;
  margin: 26px auto 0;
  text-align: center;
  padding: 20px;
  background: rgba(240, 160, 48, 0.06);
  border: 1px solid rgba(181, 133, 47, 0.45);
  border-radius: 14px;
}
.rv-contact[hidden] {
  display: none;
}
.rc-lbl {
  font-family: "Marcellus", serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-dk);
  margin: 0 0 10px;
}
.rc-one + .rc-one {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(181, 133, 47, 0.3);
}
.rc-name {
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 21px;
  color: #7e1220;
  margin: 0 0 6px;
}
.rc-ph {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Marcellus", serif;
  font-size: 14px;
  color: var(--kumkum);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.rc-ph svg {
  width: 15px;
  height: 15px;
  stroke: var(--brass);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.rv-ok {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 20px 10px 10px;
}
.rv-ok.show {
  display: flex;
}
.ok-r {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b32a33, #86141f);
  border: 1px solid rgba(226, 190, 110, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(134, 20, 31, 0.3);
  animation: okPop 0.8s var(--eo) both;
}
@keyframes okPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
.ok-r svg {
  width: 28px;
  height: 28px;
  stroke: #fff3de;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.ok-t {
  font-family: "Cinzel", serif;
  font-size: 28px;
  color: #7e1220;
  margin: 0;
}
.ok-x {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
}
.foot {
  position: relative;
  padding: var(--gap) 0 26px;
}
.foot-line {
  margin: 0 0 10px;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 21px;
  color: #ebdcc0;
}
.foot-names {
  margin: 0 0 12px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  font-family: "Cinzel", serif;
  font-size: clamp(32px, 8.6vw, 52px);
  line-height: 1.1;
  color: var(--brass-pale);
}
.foot-names em {
  order: 2;
  font-family: "Italianno", cursive;
  font-style: normal;
  color: var(--brass-lt);
  font-size: 1.05em;
}
.fn-groom {
  order: 1;
}
.fn-bride {
  order: 3;
}
.foot-tag {
  margin: 0 0 16px;
  font-family: "Marcellus", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--brass-lt);
}
.ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #ebdcc0;
  font-size: 17px;
}
.ig svg {
  width: 20px;
  height: 20px;
  stroke: var(--brass-lt);
  fill: var(--brass-lt);
}
.foot-rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: 28px auto 22px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.made {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Marcellus", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #cdbba2;
}
.made img {
  width: 88px;
  height: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(226, 190, 110, 0.4),
    0 0 24px rgba(255, 190, 100, 0.25);
}
.nt-river {
  position: relative;
  height: clamp(150px, 34vw, 230px);
  margin: 10px calc(var(--pad) * -1) 0;
  pointer-events: none;
  background: linear-gradient(180deg, #24101a, #120810);
}
.nt-river::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 150, 0.45), transparent);
}
.nt-river canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.nt-lotus {
  position: absolute;
  bottom: -4%;
  width: min(64%, 380px);
  transform-origin: 50% 100%;
  filter: brightness(0.62) saturate(0.85);
  animation: sway 10s ease-in-out infinite;
}
.nt-lotus-l {
  left: -12%;
}

@media (max-height: 520px) {
  .stage,
  .pin-stage,
  .gh-stage {
    min-height: 0;
  }
  .gh-text {
    top: 12px;
  }
  .gh-line {
    font-size: 22px;
  }
  .gh-kick {
    font-size: 17px;
    margin-top: 4px;
  }
  .gh-names {
    font-size: 26px;
    margin-top: 6px;
  }
  .gh-steps {
    width: min(38%, 340px);
  }
  .gh-lotus {
    width: min(22%, 200px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .ev,
  .mo,
  .hero-in > *,
  .nm .ch,
  .deity {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .halo {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  #sky,
  .st-lake,
  .gh-water,
  .nt-sky,
  .cv-sparks,
  .lamp-hint,
  .lamp-all {
    display: none;
  }
  .ghat {
    --p: 0.8 !important;
    --n: 1 !important;
    --pt: 1 !important;
  }
  .ev-door {
    display: none;
  }
  .ev-art img {
    filter: none !important;
    transform: none !important;
  }
  .ev-art::after {
    opacity: 0 !important;
  }
  .tile b {
    opacity: 1 !important;
    filter: none !important;
  }
  .kolam .k {
    stroke-dashoffset: 0 !important;
  }
  .kolam .kf {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Config-driven states: hidden attributes must beat authored display rules.
   Desktop borders are backgrounds so phones never download invisible art. */
[hidden] {
  display: none !important;
}
.edge {
  background-size: cover;
  background-repeat: no-repeat;
}
.edge-l {
  background-position: left center;
}
.edge-r {
  background-position: right center;
}
@media (min-width: 1180px) {
  .edge-l {
    background-image: url(assets/el/border-l.webp);
  }
  .edge-r {
    background-image: url(assets/el/border-r.webp);
  }
}
.ev-meta > div:only-child {
  grid-column: 1 / -1;
}
.evs.one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin-inline: auto;
}
.mo.text-only {
  grid-template-columns: minmax(0, 1fr);
}
.mo.text-only .mo-tx {
  grid-column: 1 / -1;
}
.invocation.roman {
  font-family: inherit;
  font-style: normal;
}
.seal-initials {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: clamp(16px, 4vw, 30px);
  color: #6b4329;
}
.deity-glyph {
  display: block;
  font-size: 56px;
}
.photo-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  margin: 0;
  color: #fff9ee;
  background: rgba(35, 15, 9, 0.86);
  font-size: 15px;
  line-height: 1.35;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.mo-words,
.rv-lead {
  white-space: pre-line;
}