:root {
  --rose: #a6384f;
  --rose-dark: #77283a;
  --sage: #8d9a7a;
  --leaf-dark: #1f3329;
  --ivory: #f7eedc;
  --parchment: #e9d7b8;
  --amber: #d8a957;
  --amber-lit: #f0c86a;
  --ink: #3e2b22;
  --night: #060d0b;
  --display: "Cormorant Garamond", Georgia, serif;
  --script: "Parisienne", cursive;
  --body: "EB Garamond", Georgia, serif;
  --px-bg-x: 0px;
  --px-bg-y: 0px;
  --px-jhm-x: 0px;
  --px-jhm-y: 0px;
  --px-flr-x: 0px;
  --px-flr-y: 0px;
  --px-dya-x: 0px;
  --px-dya-y: 0px;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--night);
  overflow-x: hidden;
}
body.intro-active {
  overflow: hidden;
  height: 100svh;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}
.intro.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}
.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}
.intro-bg-dark {
  z-index: 1;
  transform: translate3d(var(--px-bg-x), var(--px-bg-y), 0) scale(1.06);
  transition: transform 1.1s ease-out;
}
.intro-bg-lit {
  z-index: 2;
  opacity: 0;
  transform: translate3d(var(--px-bg-x), var(--px-bg-y), 0) scale(1.06);
  transition: transform 1.1s ease-out;
}
@keyframes lightFlicker {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.55;
  }
  8% {
    opacity: 0.03;
  }
  15% {
    opacity: 0.68;
  }
  21% {
    opacity: 0.07;
  }
  29% {
    opacity: 0.82;
  }
  40% {
    opacity: 0.58;
  }
  52% {
    opacity: 0.94;
  }
  62% {
    opacity: 0.82;
  }
  to {
    opacity: 1;
  }
}
.intro.is-lit .intro-bg-lit {
  animation: lightFlicker 1.4s ease forwards;
}
.intro-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 54% 62% at 50% 43%,
      rgba(216, 169, 87, 0.075) 0%,
      rgba(166, 56, 79, 0.045) 38%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(4, 8, 6, 0.78) 0%,
      transparent 18%,
      transparent 50%,
      rgba(4, 8, 6, 0.92) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 8, 6, 0.54) 0%,
      transparent 20%,
      transparent 80%,
      rgba(4, 8, 6, 0.52) 100%
    );
  transition: background 2.2s ease;
}
.intro.is-lit .intro-vignette {
  background:
    linear-gradient(
      180deg,
      rgba(4, 8, 6, 0.28) 0%,
      transparent 16%,
      transparent 58%,
      rgba(4, 8, 6, 0.72) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 8, 6, 0.22) 0%,
      transparent 18%,
      transparent 82%,
      rgba(4, 8, 6, 0.2) 100%
    );
}
.intro-dark-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 70% at 50% 46%,
    transparent 28%,
    rgba(2, 5, 4, 0.76) 100%
  );
  opacity: 1;
  transition: opacity 2.4s ease;
}
.intro.is-lit .intro-dark-vignette {
  opacity: 0;
}
.intro-warm-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px-jhm-x), var(--px-jhm-y), 0);
  background: radial-gradient(
    ellipse 70% 34% at 50% 0%,
    rgba(216, 169, 87, 0.3) 0%,
    transparent 68%
  );
  mix-blend-mode: screen;
  transition: opacity 1.6s ease 0.3s;
  will-change: transform, opacity;
}
.intro.is-lit .intro-warm-glow {
  opacity: 1;
  animation: warmBreath 8s ease-in-out 1.4s infinite;
}
@keyframes warmBreath {
  0%,
  to {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}
.intro-jhoomer-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px-jhm-x), var(--px-jhm-y), 0);
  background: radial-gradient(
    ellipse 52% 28% at 50% 0%,
    rgba(216, 169, 87, 0.42) 0%,
    rgba(216, 169, 87, 0.12) 40%,
    transparent 66%
  );
  mix-blend-mode: screen;
  transition: opacity 1.4s ease 0.32s;
  will-change: transform, opacity;
}
.intro.is-lit .intro-jhoomer-glow {
  opacity: 1;
  animation: lampBreath 6s ease-in-out 1.1s infinite;
}
@keyframes lampBreath {
  0%,
  to {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}
@keyframes cinemaFlash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.94;
  }
  to {
    opacity: 0;
  }
}
.diya-floor-glow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 120%;
  padding-top: 40%;
  transform: translate(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(216, 169, 87, 0.55) 0%,
    transparent 72%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease 0.9s;
}
.intro.is-lit .diya-floor-glow {
  opacity: 1;
}
.intro-rose-scatter {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 60% 28% at 14% 86%,
      rgba(166, 56, 79, 0.14) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 56% 26% at 86% 86%,
      rgba(166, 56, 79, 0.12) 0%,
      transparent 64%
    );
  mix-blend-mode: screen;
  transition: opacity 2s ease 0.9s;
}
.intro.is-lit .intro-rose-scatter {
  opacity: 1;
}
.intro-dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.4s ease 1.1s;
}
.intro.is-lit .intro-dust {
  opacity: 1;
}
.dust-particle {
  position: absolute;
  border-radius: 50%;
  background: #d8a957cc;
  animation: dustRise linear infinite;
  will-change: transform, opacity;
}
@keyframes dustRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  55% {
    opacity: 0.48;
  }
  to {
    transform: translateY(-58svh) scale(0.35);
    opacity: 0;
  }
}
.intro-petals {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease 1.6s;
}
.intro.is-lit .intro-petals {
  opacity: 1;
}
.petal {
  position: absolute;
  border-radius: 50% 50% 0;
  background: #dfa2a894;
  animation: petalDrift ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes petalDrift {
  0% {
    transform: translateY(0) rotate(0) translate(0);
    opacity: 0;
  }
  7% {
    opacity: 0.62;
  }
  86% {
    opacity: 0.38;
  }
  to {
    transform: translateY(-52svh) rotate(300deg) translate(24px);
    opacity: 0;
  }
}
.intro-jhoomer {
  position: absolute;
  top: -20px;
  left: 50%;
  width: min(200px, 50vw);
  transform: translate3d(calc(-50% + var(--px-jhm-x)), var(--px-jhm-y), 0);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 0px rgba(216, 169, 87, 0));
  transition:
    opacity 1.2s ease 0.28s,
    filter 1.2s ease 0.28s;
  will-change: transform, opacity;
}
.intro.is-lit .intro-jhoomer {
  opacity: 0.92;
  filter: drop-shadow(0 26px 52px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 52px rgba(216, 169, 87, 0.78))
    drop-shadow(0 0 16px rgba(247, 218, 166, 0.5));
  animation: jhoomerSway 5.4s ease-in-out 1.1s infinite;
}
@keyframes jhoomerSway {
  0%,
  to {
    transform: translate3d(calc(-50% + var(--px-jhm-x)), var(--px-jhm-y), 0)
      rotate(-0.55deg);
  }
  50% {
    transform: translate3d(
        calc(-50% + var(--px-jhm-x)),
        calc(var(--px-jhm-y) + 4px),
        0
      )
      rotate(0.55deg);
  }
}
.rope-button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 11;
  width: clamp(100px, 24vw, 132px);
  height: clamp(440px, 60svh, 580px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  transform-origin: 50% 0;
  overflow: visible;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 20px rgba(0, 0, 0, 0.36));
  animation: ropeDrop 1.15s ease 0.35s both;
  will-change: transform, filter;
}
@keyframes ropeDrop {
  0% {
    transform: translate(-50%) rotate(-0.4deg);
    opacity: 0;
  }
  55% {
    transform: translate(-50%) rotate(0.22deg);
    opacity: 1;
  }
  to {
    transform: translate(-50%) rotate(0);
    opacity: 1;
  }
}
@keyframes ropeIdle {
  0% {
    transform: translate(-50%) rotate(0);
  }
  20% {
    transform: translate(-50%) rotate(0.5deg);
  }
  52% {
    transform: translate(-50%) rotate(-0.42deg);
  }
  78% {
    transform: translate(-50%) rotate(0.28deg);
  }
  to {
    transform: translate(-50%) rotate(0);
  }
}
.rope-button.rope-ready:not(.rope-idle) {
  animation: none;
  opacity: 1;
}
.rope-button.rope-idle {
  animation: ropeIdle 5.2s ease-in-out infinite;
  opacity: 1;
}
.rope-button.is-pulling {
  animation: none;
  opacity: 1;
  cursor: grabbing;
  filter: drop-shadow(0 38px 74px rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 24px rgba(216, 169, 87, 0.16));
}
.rope-button.is-pulling:after {
  opacity: 0.62;
  filter: blur(10px);
  animation-duration: 2.2s;
}
.rope-button:active {
  cursor: grabbing;
}
.rope-button:focus {
  outline: none;
}
.rope-button:focus-visible {
  filter: drop-shadow(-6px 0 16px rgba(0, 0, 0, 0.82))
    drop-shadow(6px 0 16px rgba(0, 0, 0, 0.82))
    drop-shadow(0 48px 90px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 34px rgba(247, 238, 220, 0.22));
}
.rope-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform-origin: top center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.rope-halo {
  position: absolute;
  top: clamp(112px, 20svh, 168px);
  left: 50%;
  width: min(118px, 34vw);
  height: min(118px, 34vw);
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(
    circle,
    rgba(216, 169, 87, 0.34) 0%,
    rgba(216, 169, 87, 0.12) 42%,
    transparent 70%
  );
  pointer-events: none;
  animation: haloBreath 3.4s ease-in-out infinite;
}
.rope-button:after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(104px, 19svh, 158px);
  width: min(148px, 40vw);
  height: min(148px, 40vw);
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(
    circle,
    rgba(240, 200, 106, 0.3) 0%,
    rgba(216, 169, 87, 0.15) 34%,
    rgba(166, 56, 79, 0.07) 58%,
    transparent 74%
  );
  filter: blur(8px);
  opacity: 0.42;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: tasselBloom 4.4s ease-in-out infinite;
}
@keyframes haloBreath {
  0%,
  to {
    opacity: 0.28;
    transform: translate(-50%) scale(1);
  }
  50% {
    opacity: 0.72;
    transform: translate(-50%) scale(1.24);
  }
}
@keyframes tasselBloom {
  0%,
  to {
    opacity: 0.3;
    transform: translate(-50%) scale(0.94);
  }
  50% {
    opacity: 0.56;
    transform: translate(-50%) scale(1.08);
  }
}
.intro.is-lit .rope-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transform: translate(-50%) translateY(-120%);
  transition:
    opacity 0.52s ease 40ms,
    visibility 0ms linear 0.62s,
    transform 0.62s ease 40ms;
}
.rope-anchor-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(180px, 46vw);
  height: min(120px, 15svh);
  transform: translate(-50%);
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 100% at 50% 0%,
    rgba(216, 169, 87, 0.22) 0%,
    transparent 100%
  );
  animation: anchorBreath 4.8s ease-in-out infinite;
}
@keyframes anchorBreath {
  0%,
  to {
    opacity: 0.36;
    transform: translate(-50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%) scale(1.14);
  }
}
.intro.is-lit .rope-anchor-glow {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.intro-floral-left {
  position: absolute;
  left: -14vw;
  bottom: -12svh;
  width: min(280px, 70vw);
  z-index: 8;
  opacity: 0;
  transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0) rotate(-4deg)
    translateY(16px);
  filter: saturate(0) blur(0.6px);
  transition:
    opacity 1.8s ease 0.6s,
    filter 2s ease 0.6s,
    transform 2s ease 0.6s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.intro.is-lit .intro-floral-left {
  opacity: 0.72;
  filter: saturate(1) blur(0);
  transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0) rotate(-3deg)
    translateY(0);
  animation: floralSway 10s ease-in-out 1.8s infinite;
}
.intro-floral-right {
  position: absolute;
  right: -14vw;
  bottom: -12svh;
  width: min(280px, 70vw);
  z-index: 8;
  opacity: 0;
  transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0)
    scaleX(-1) rotate(-4deg) translateY(16px);
  filter: saturate(0) blur(0.6px);
  transition:
    opacity 1.8s ease 0.7s,
    filter 2s ease 0.7s,
    transform 2s ease 0.7s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.intro.is-lit .intro-floral-right {
  opacity: 0.65;
  filter: saturate(1) blur(0);
  transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0)
    scaleX(-1) rotate(-3deg) translateY(0);
  animation: floralSwayR 11.5s ease-in-out 2s infinite;
}
@keyframes floralSway {
  0%,
  to {
    transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0) rotate(-3deg)
      translateY(0);
  }
  50% {
    transform: translate3d(var(--px-flr-x), calc(var(--px-flr-y) - 6px), 0)
      rotate(-2.2deg) translateY(-4px);
  }
}
@keyframes floralSwayR {
  0%,
  to {
    transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0)
      scaleX(-1) rotate(-3deg) translateY(0);
  }
  50% {
    transform: translate3d(
        calc(var(--px-flr-x) * -1),
        calc(var(--px-flr-y) - 6px),
        0
      )
      scaleX(-1) rotate(-2.2deg) translateY(-4px);
  }
}
.diya-wrap {
  position: absolute;
  width: min(76px, 19vw);
  z-index: 8;
  opacity: 0;
  transition:
    opacity 1s ease 1s,
    transform 1s ease 1s;
  pointer-events: none;
}
.diya-wrap.diya-left {
  left: 4vw;
  bottom: 27svh;
  transform: translate3d(var(--px-dya-x), var(--px-dya-y), 0) scale(0.88)
    translateY(10px);
}
.diya-wrap.diya-right {
  right: 4vw;
  bottom: 27svh;
  transform: translate3d(calc(var(--px-dya-x) * -1), var(--px-dya-y), 0)
    scale(0.88) translateY(10px);
}
.intro.is-lit .diya-wrap {
  opacity: 1;
}
.intro.is-lit .diya-wrap.diya-left {
  transform: translate3d(var(--px-dya-x), var(--px-dya-y), 0) scale(1)
    translateY(0);
  animation: diyaFlicker 4.3s ease-in-out 1.3s infinite;
}
.intro.is-lit .diya-wrap.diya-right {
  transform: translate3d(calc(var(--px-dya-x) * -1), var(--px-dya-y), 0)
    scale(1) translateY(0);
  animation: diyaFlicker 5.4s ease-in-out 1.7s infinite;
}
@keyframes diyaFlicker {
  0%,
  to {
    filter: drop-shadow(0 -10px 18px rgba(216, 169, 87, 0.5))
      drop-shadow(0 12px 20px rgba(0, 0, 0, 0.22));
    opacity: 0.88;
  }
  30% {
    opacity: 0.78;
  }
  48% {
    filter: drop-shadow(0 -10px 28px rgba(216, 169, 87, 0.9))
      drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18));
    opacity: 0.96;
  }
  72% {
    opacity: 0.84;
  }
}
.diya-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.intro-instruction {
  position: absolute;
  z-index: 12;
  bottom: 28svh;
  left: 50%;
  transform: translate(-50%) translateY(14px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.intro.is-waiting .intro-instruction {
  opacity: 1;
  transform: translate(-50%) translateY(0);
}
.pull-label {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.46rem, 6.3vw, 2.28rem);
  color: #f8e2badb;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(216, 169, 87, 0.2);
  letter-spacing: 0.075em;
  white-space: nowrap;
}
.pull-feedback {
  position: absolute;
  left: 50%;
  bottom: 21.5svh;
  z-index: 13;
  transform: translate(-50%) translateY(10px) scale(0.97);
  padding: 9px 16px 10px;
  border: 1px solid rgba(216, 169, 87, 0.22);
  border-radius: 999px;
  background: radial-gradient(
    ellipse 80% 120% at 50% 0%,
    #d8a95729,
    #1f120d33 62%,
    #1f120d14
  );
  color: #f8e2bad6;
  font-family: var(--display);
  font-size: clamp(0.92rem, 3.45vw, 1.08rem);
  font-style: italic;
  letter-spacing: 0.055em;
  text-align: center;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(216, 169, 87, 0.14);
  box-shadow:
    0 16px 42px #0003,
    inset 0 0 18px #f7e2be0a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    visibility 0ms linear 0.42s,
    transform 0.52s cubic-bezier(0.18, 1, 0.3, 1);
  white-space: nowrap;
}
.pull-feedback.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%) translateY(0) scale(1);
  transition:
    opacity 0.42s ease,
    visibility 0ms,
    transform 0.52s cubic-bezier(0.18, 1, 0.3, 1);
}
.pull-ritual-cue {
  position: relative;
  width: 26px;
  height: 34px;
  margin: 0 auto 10px;
}
.pull-ritual-cue:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 22px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%);
  background: radial-gradient(
    ellipse,
    rgba(216, 169, 87, 0.46),
    transparent 72%
  );
  filter: blur(1px);
  opacity: 0.62;
  animation: diyaEmber 3.4s ease-in-out infinite;
}
.pull-ritual-cue:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 12px;
  height: 22px;
  border-radius: 60% 60% 55% 55%;
  transform: translate(-50%) rotate(2deg);
  background:
    radial-gradient(
      circle at 50% 78%,
      rgba(255, 236, 176, 0.88) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 60%,
      rgba(240, 200, 106, 0.88) 0%,
      rgba(216, 122, 66, 0.72) 42%,
      rgba(166, 56, 79, 0.22) 72%,
      transparent 100%
    );
  filter: blur(0.15px) drop-shadow(0 0 12px rgba(216, 169, 87, 0.36));
  animation: diyaFlame 2.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes diyaFlame {
  0%,
  to {
    opacity: 0.62;
    transform: translate(-50%) rotate(2deg) scaleY(0.92);
  }
  45% {
    opacity: 0.92;
    transform: translate(-50%) rotate(-3deg) scaleY(1.08);
  }
  70% {
    opacity: 0.74;
    transform: translate(-50%) rotate(1deg) scaleY(0.98);
  }
}
@keyframes diyaEmber {
  0%,
  to {
    opacity: 0.42;
    transform: translate(-50%) scale(0.88);
  }
  50% {
    opacity: 0.72;
    transform: translate(-50%) scale(1.12);
  }
}
.intro-reveal {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.intro-reveal:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 28svh;
  width: min(500px, 94vw);
  height: 40svh;
  transform: translate(-50%) scale(0.88);
  border-radius: 50% 50% 46% 46%/12% 12% 18% 18%;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(18, 5, 4, 0.58) 0%,
    rgba(18, 5, 4, 0.32) 42%,
    rgba(18, 5, 4, 0.08) 68%,
    transparent 88%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition:
    opacity 1.6s ease 0.4s,
    transform 1.8s ease 0.4s;
}
.intro.show-names .intro-reveal:after {
  opacity: 1;
  transform: translate(-50%) scale(1);
}
.intro-reveal:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46svh;
  width: min(520px, 94vw);
  height: 42svh;
  transform: translate(-50%, -50%) scale(0.86);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(247, 226, 190, 0.16) 0%,
    rgba(247, 226, 190, 0.06) 40%,
    transparent 70%
  );
  opacity: 0;
  transition:
    opacity 1.8s ease 0.52s,
    transform 2.2s ease 0.52s;
}
.intro.show-names .intro-reveal:before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.intro-reveal-item {
  position: absolute;
  left: 50%;
  opacity: 0;
  transform: translate(-50%) translateY(22px);
  transition:
    opacity 1.1s ease,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  z-index: 1;
  width: min(600px, calc(100vw - 24px));
}
.intro-reveal .names {
  top: 34svh;
  font-family: var(--display);
  font-size: clamp(4rem, 17vw, 7.2rem);
  font-weight: 300;
  font-style: italic;
  color: #fcf1dafc;
  line-height: 1;
  letter-spacing: 0.012em;
  text-shadow:
    0 1px 0 rgba(255, 240, 200, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.96),
    0 6px 32px rgba(0, 0, 0, 0.82),
    0 0 60px rgba(216, 169, 87, 0.55),
    0 0 120px rgba(216, 169, 87, 0.28);
  transform: translate(-50%) translateY(28px) scale(0.96);
  transition:
    opacity 1.3s ease,
    transform 1.5s cubic-bezier(0.14, 1, 0.28, 1);
}
.intro.show-names .names {
  opacity: 1;
  transform: translate(-50%) translateY(0) scale(1);
  animation: nameGlow 6s ease-in-out 1.8s infinite;
}
@keyframes nameGlow {
  0%,
  to {
    text-shadow:
      0 1px 0 rgba(255, 240, 200, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.96),
      0 6px 32px rgba(0, 0, 0, 0.82),
      0 0 60px rgba(216, 169, 87, 0.48),
      0 0 120px rgba(216, 169, 87, 0.22);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 248, 210, 0.36),
      0 2px 4px rgba(0, 0, 0, 0.92),
      0 6px 28px rgba(0, 0, 0, 0.72),
      0 0 80px rgba(240, 200, 106, 0.78),
      0 0 150px rgba(216, 169, 87, 0.42),
      0 0 220px rgba(216, 169, 87, 0.18);
  }
}
.names .amp {
  font-family: var(--script);
  font-size: 0.84em;
  font-style: normal;
  color: #f0c46cfc;
  display: inline-block;
  margin: 0 0.06em;
  text-shadow:
    0 0 10px rgba(255, 220, 120, 0.6),
    0 0 28px rgba(216, 169, 87, 0.55),
    0 0 60px rgba(216, 169, 87, 0.32),
    0 3px 20px rgba(0, 0, 0, 0.52);
}
.names .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity 0.9s ease,
    transform 1.05s cubic-bezier(0.14, 1, 0.28, 1);
}
.names .amp-wrap {
  margin: 0 0.05em;
}
.intro.show-names .names .word {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.intro.show-names .names .word:nth-child(1) {
  transition-delay: 0ms;
}
.intro.show-names .names .word:nth-child(2) {
  transition-delay: 175ms;
}
.intro.show-names .names .word:nth-child(3) {
  transition-delay: 0.34s;
}
.intro-reveal .ornament {
  top: 54.4svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(240px, 60vw);
  transition:
    opacity 0.9s ease,
    transform 1s ease;
}
.intro-reveal .ornament span {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.88),
    transparent
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}
.intro.show-date .ornament span {
  transform: scaleX(1);
}
.intro-reveal .ornament i {
  width: 7px;
  height: 7px;
  background: #d8a957e6;
  font-style: normal;
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow:
    0 0 8px #d8a95799,
    0 0 18px #d8a9574d;
  flex-shrink: 0;
}
.intro.show-date .ornament {
  opacity: 1;
  transform: translate(-50%) translateY(0);
}
.intro-reveal .date {
  top: 57.2svh;
  font-family: var(--display);
  font-size: clamp(1.08rem, 4.45vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: #fcf2dafc;
  padding: 5px 20px 6px;
  background: #08030270;
  border-radius: 999px;
  border: 1px solid rgba(216, 169, 87, 0.22);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 3px 14px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(216, 169, 87, 0.42);
  transition:
    opacity 0.9s ease,
    transform 1s ease;
}
.intro.show-date .date {
  opacity: 1;
  transform: translate(-50%) translateY(0);
}
.intro-reveal .venue {
  top: 62.2svh;
  font-family: var(--display);
  font-size: clamp(1.02rem, 4.05vw, 1.22rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #fceed6f7;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 3px 16px rgba(0, 0, 0, 0.9),
    0 0 36px rgba(166, 56, 79, 0.42),
    0 0 70px rgba(216, 169, 87, 0.28);
  transition:
    opacity 0.9s ease,
    transform 1s ease;
}
.intro.show-venue .venue {
  opacity: 1;
  transform: translate(-50%) translateY(0);
}
.lotus-cta-group {
  position: absolute;
  left: 50%;
  top: 70svh;
  transform: translate(-50%, 30px) scale(0.9);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro.show-lotus .lotus-cta-group {
  opacity: 1;
  transform: translate(-50%) scale(1);
  pointer-events: auto;
}
.lotus-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: clamp(84px, 23vw, 112px);
  height: clamp(84px, 23vw, 112px);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.lotus-icon-img {
  display: block;
  width: clamp(80px, 22vw, 108px);
  height: clamp(80px, 22vw, 108px);
  grid-area: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 22px rgba(223, 162, 168, 0.55));
  transition:
    transform 0.8s ease,
    filter 0.8s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.intro.show-lotus .lotus-icon-img {
  animation:
    lotusPulse 3.8s ease-in-out 0.6s infinite,
    lotusSacredTurn 18s linear 0.6s infinite,
    lotusBlink 1.18s ease-in-out 0.8s infinite;
}
@keyframes lotusBlink {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}
@keyframes lotusPulse {
  0%,
  to {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28))
      drop-shadow(0 0 16px rgba(223, 162, 168, 0.4));
  }
  50% {
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.16))
      drop-shadow(0 0 48px rgba(223, 162, 168, 0.85))
      drop-shadow(0 0 80px rgba(216, 169, 87, 0.35));
  }
}
@keyframes lotusSacredTurn {
  0% {
    transform: rotate(-1.5deg) scale(1);
  }
  50% {
    transform: rotate(1.5deg) scale(1.022);
  }
  to {
    transform: rotate(-1.5deg) scale(1);
  }
}
.lotus-button.is-open .lotus-icon-img {
  transform: scale(1.4);
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.16))
    drop-shadow(0 0 54px rgba(223, 162, 168, 0.88));
}
.lotus-glow-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, 86vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.28);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  transition:
    opacity 0.8s ease,
    transform 1s ease;
}
.lotus-button.is-open .lotus-glow-burst {
  opacity: 0.46;
  transform: translate(-50%, -50%) scale(0.92);
}
.lotus-cta-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 4.2vw, 1.22rem);
  letter-spacing: 0.06em;
  color: #fcf1daf2;
  text-align: center;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 3px 18px rgba(0, 0, 0, 0.72),
    0 0 36px rgba(216, 169, 87, 0.3);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.7s ease 0.2s,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  pointer-events: none;
}
.intro.show-lotus .lotus-cta-label {
  opacity: 1;
  transform: translateY(0);
  animation: lotusBlink 1.18s ease-in-out 0.8s infinite;
}
.lotus-button.is-open ~ .lotus-cta-label {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}
.skip-intro {
  position: absolute;
  z-index: 14;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
  transform: none;
  border: 0;
  padding: 8px 0 8px 14px;
  background: transparent;
  color: #f7e2be57;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.skip-intro:hover {
  color: #f7e2bea3;
}
.intro.is-lit .skip-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    visibility 0ms linear 0.46s;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.page-shell {
  position: relative;
  z-index: 1;
}
.section {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 18px;
  overflow: hidden;
}
.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--rose);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-title {
  color: var(--rose);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 0.9;
}
.section-lede {
  max-width: 620px;
  margin: 18px auto 0;
  font-family: var(--display);
  font-size: clamp(1.18rem, 2.6vw, 1.72rem);
  line-height: 1.38;
}
body {
  background:
    radial-gradient(
      circle at top left,
      rgba(166, 56, 79, 0.13),
      transparent 28rem
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(86, 107, 61, 0.16),
      transparent 24rem
    ),
    linear-gradient(135deg, #f9efdd, #ead8b9);
}
.invite-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.invite-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../invite/pn-inv-bg-panel-m-v01.webp) center / cover no-repeat;
  animation: kenBurns 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
.invite-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}
.invite-petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.invite-birds {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s ease 2.2s;
}
.invite-section.invite-active .invite-birds {
  opacity: 1;
}
.inv-bird {
  position: absolute;
  overflow: hidden;
  background-image: url(../invite/Bird_frames.webp);
  background-repeat: no-repeat;
  pointer-events: none;
}
.inv-bird--a {
  width: 80px;
  height: 82px;
  background-size: 480px 160px;
  background-position: 0px -38px;
  top: 10%;
  animation:
    birdFlapA 0.35s steps(6, end) infinite,
    birdFlyA 5s linear 1.8s infinite,
    birdDriftA 3.7s ease-in-out 1.8s infinite;
}
@keyframes birdFlapA {
  0% {
    background-position-x: 0px;
  }
  to {
    background-position-x: -480px;
  }
}
@keyframes birdFlyA {
  0% {
    left: -12%;
  }
  to {
    left: 108%;
  }
}
@keyframes birdDriftA {
  0% {
    top: 10%;
  }
  25% {
    top: 8%;
  }
  55% {
    top: 11%;
  }
  80% {
    top: 9%;
  }
  to {
    top: 10%;
  }
}
.inv-bird--b {
  width: 60px;
  height: 62px;
  background-size: 360px 120px;
  background-position: 0px -28px;
  top: 6%;
  transform: scaleX(-1);
  animation:
    birdFlapB 0.42s steps(6, end) 0.15s infinite,
    birdFlyB 7s linear 8s infinite,
    birdDriftB 5.1s ease-in-out 8s infinite;
}
@keyframes birdFlapB {
  0% {
    background-position-x: 0px;
  }
  to {
    background-position-x: -360px;
  }
}
@keyframes birdFlyB {
  0% {
    left: 110%;
  }
  to {
    left: -12%;
  }
}
@keyframes birdDriftB {
  0% {
    top: 6%;
  }
  22% {
    top: 8%;
  }
  60% {
    top: 4%;
  }
  85% {
    top: 7%;
  }
  to {
    top: 6%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .invite-birds {
    display: none !important;
  }
}
.invite-card-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: archFloat 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes archFloat {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.invite-arch-frame {
  display: block;
  height: 216svh;
  width: auto;
  max-width: 96vw;
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 28px rgba(216, 169, 87, 0.44))
    drop-shadow(0 0 10px rgba(166, 56, 79, 0.24));
}
.invite-text-content {
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 50%;
  transform: translate(-50%);
  max-width: min(360px, 70vw);
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  overflow: visible;
  background: radial-gradient(
    ellipse 85% 90% at 50% 50%,
    rgba(247, 238, 220, 0.28) 0%,
    rgba(247, 238, 220, 0.12) 55%,
    transparent 80%
  );
  border-radius: 50% 50% 46% 46%/8% 8% 14% 14%;
}
.inv-cta {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
  opacity: 0;
}
.invite-section.invite-active .inv-cta {
  animation: fadeUp 0.9s ease-out 1.3s both;
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes goldGlow {
  0%,
  to {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 24px rgba(166, 56, 79, 0.1);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 40px rgba(166, 56, 79, 0.22);
  }
}
@keyframes nameReveal {
  0% {
    opacity: 0;
    transform: scale(0.86) translateY(18px);
    filter: blur(6px);
    letter-spacing: 0.12em;
  }
  55% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    letter-spacing: 0.05em;
  }
}
@keyframes namePulse {
  0%,
  to {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45),
      0 0 18px rgba(200, 144, 42, 0.22),
      0 0 48px rgba(200, 144, 42, 0.08);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 36px rgba(200, 144, 42, 0.46),
      0 0 80px rgba(200, 144, 42, 0.16),
      0 0 10px rgba(166, 56, 79, 0.14);
  }
}
@keyframes ampFlicker {
  0%,
  to {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(200, 144, 42, 0.3));
  }
  28% {
    opacity: 0.82;
    filter: drop-shadow(0 0 14px rgba(216, 169, 87, 0.7));
  }
  52% {
    opacity: 0.94;
    filter: drop-shadow(0 0 8px rgba(200, 144, 42, 0.5));
  }
  74% {
    opacity: 0.88;
    filter: drop-shadow(0 0 18px rgba(216, 169, 87, 0.6));
  }
}
@keyframes nameRadiance {
  0%,
  to {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes inkSettle {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(14px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes scrollUnfurl {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.24em;
    transform: translateY(0);
  }
}
@keyframes lotusBloom {
  0% {
    opacity: 0;
    transform: scale(0.78) translateY(8px);
  }
  to {
    opacity: 0.68;
    transform: scale(1) translateY(0);
  }
}
@keyframes datePulse {
  0%,
  to {
    text-shadow: 0 0 0px rgba(166, 56, 79, 0);
  }
  50% {
    text-shadow:
      0 0 22px rgba(166, 56, 79, 0.36),
      0 0 8px rgba(216, 169, 87, 0.22);
  }
}
@keyframes venueDrift {
  0%,
  to {
    transform: translateY(0);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-2px);
    opacity: 0.8;
  }
}
@keyframes occasionShimmer {
  0% {
    opacity: 0;
    letter-spacing: 0.01em;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.03em;
    transform: translateY(0);
  }
}
.inv-blessing,
.inv-blessing-alt,
.inv-kicker,
.inv-lotus-div,
.inv-names,
.inv-parents,
.inv-occasion,
.inv-meta,
.inv-cta {
  opacity: 0;
}
.invite-section.invite-active .inv-blessing,
.invite-section.invite-active .inv-blessing-alt {
  animation: inkSettle 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}
.invite-section.invite-active .inv-kicker {
  animation: scrollUnfurl 1s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.invite-section.invite-active .inv-lotus-div {
  animation: lotusBloom 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.invite-section.invite-active .inv-names {
  animation:
    nameReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both,
    namePulse 5.5s ease-in-out 2.2s infinite;
}
.invite-section.invite-active .inv-amp {
  animation: ampFlicker 6.5s ease-in-out 2.4s infinite;
}
.invite-section.invite-active .inv-parents {
  animation: inkSettle 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.88s both;
}
.invite-section.invite-active .inv-occasion {
  animation: occasionShimmer 1s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}
.invite-section.invite-active .inv-meta {
  animation: inkSettle 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}
.invite-section.invite-active .inv-date {
  animation: datePulse 4.2s ease-in-out 2.4s infinite;
}
.invite-section.invite-active .inv-venue {
  animation: venueDrift 6s ease-in-out 2.8s infinite;
}
.inv-blessing {
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* margin-bottom: 1rem; */
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(119, 40, 58, 0.15);
  width: 80%;
}
.inv-overline {
  font-size: 1rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose-dark);
  opacity: 0.78;
  font-weight: 600;
  margin-bottom: 3px;
  text-shadow: 0 1px 6px rgba(247, 238, 220, 0.55);
}
.inv-blessing p:not(.inv-overline) {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.07rem;
  color: var(--ink);
  opacity: 0.82;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247, 238, 220, 0.4);
}
.inv-blessing-alt {
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(119, 40, 58, 0.15);
  width: 80%;
}
.inv-blessing-alt-line1 {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247, 238, 220, 0.4);
}
.inv-blessing-alt-line2 {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 4px rgba(247, 238, 220, 0.4);
}
.inv-blessing-alt-line3 {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-dark);
  font-weight: 500;
  opacity: 0.82;
  margin-top: 4px;
}
.inv-blessing-alt.inv-bless-stacked {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.35rem;
  gap: 6px;
}
.inv-blessing-alt.inv-bless-stacked .inv-blessing-alt-line1,
.inv-blessing-alt.inv-bless-stacked .inv-blessing-alt-line2 {
  font-size: 0.86rem;
  line-height: 1.45;
}
.inv-blessing-alt.inv-bless-deva .inv-blessing-alt-line1,
.inv-blessing-alt.inv-bless-deva .inv-blessing-alt-line2 {
  font-style: normal;
  line-height: 1.6;
}
.inv-kicker {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose-dark);
  font-weight: 500;
  opacity: 0.82;
  margin-bottom: 0.3rem;
}
.inv-lotus-div {
  display: block;
  width: clamp(70px, 19vw, 110px);
  height: auto;
  margin: 0.2rem auto;
  opacity: 0.68;
  pointer-events: none;
  user-select: none;
}
.inv-names {
  font-family: var(--display);
  font-size: clamp(4.2rem, 9vw, 6.4rem);
  font-weight: 300;
  font-style: italic;
  color: #c8902a;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  margin: 0.3rem 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
}
.inv-names:before {
  content: "";
  position: absolute;
  inset: -60% -28%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 144, 42, 0.16) 0%,
    rgba(216, 169, 87, 0.07) 42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: none;
}
.invite-section.invite-active .inv-names:before {
  animation: nameRadiance 5.5s ease-in-out 2s infinite;
}
.inv-amp {
  font-family: var(--script);
  font-style: normal;
  font-size: 0.8em;
  color: #c8902a;
}
.inv-parents {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  opacity: 0.88;
  line-height: 1.52;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.5rem;
  width: 92%;
  text-shadow: 0 1px 4px rgba(247, 238, 220, 0.4);
}
.inv-parents p {
  margin: 0;
  padding: 6px 0;
}
.inv-parents p + p {
  border-top: 1px solid rgba(119, 40, 58, 0.14);
}
.inv-occasion {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
  opacity: 0.65;
  margin-bottom: 0.55rem;
}
.inv-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(119, 40, 58, 0.15);
  width: 84%;
}
.inv-date {
  font-family: var(--display);
  font-size: 1.79rem;
  letter-spacing: 0.16em;
  color: var(--rose-dark);
  font-weight: 500;
  white-space: nowrap;
}
.inv-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.29rem;
  color: var(--ink);
  opacity: 0.65;
}
.inv-btn {
  display: inline-block;
  border: 1px solid rgba(216, 169, 87, 0.55);
  color: var(--ivory);
  background: #060d0b5c;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.52rem 2.2rem;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.inv-btn:hover {
  background: #d8a95724;
  border-color: #d8a957d1;
  color: var(--amber);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(62, 43, 34, 0.14);
  border-radius: 999px;
  padding: 12px 22px;
  color: var(--ivory);
  background: var(--rose);
  font-family: var(--body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 30px #3e2b2224;
}
.btn.secondary {
  color: var(--rose);
  background: #f7eedcc7;
}
.events-section {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: none;
  color: var(--ivory);
}
.evt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 80% 28% at 50% 0%,
      rgba(190, 215, 255, 0.07) 0%,
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #080513,
      #110a1c 10%,
      #1b0e22 22%,
      #24132a 36%,
      #261520,
      #2e1a26 68%,
      #1a0e16
    );
}
.evt-tex-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../shared/pn-tex-ovl-watercolor-rose-x-v01.webp) center /
    cover;
  opacity: 0.05;
  pointer-events: none;
}
.evt-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.evt-bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #1a0e1699,
    #1a0e161f 8%,
    #1a0e1600 20% 80%,
    #1a0e161f 92%,
    #1a0e1699
  );
}
.evt-header {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: clamp(210px, 56vw, 260px) 24px clamp(8px, 1.5svh, 18px);
}
.evt-header .evt-eyebrow,
.evt-header .evt-title,
.evt-header .evt-divider {
  opacity: 0;
}
.evt-header.in-view .evt-eyebrow {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0ms both;
}
.evt-header.in-view .evt-title {
  animation: fadeUp 0.88s cubic-bezier(0.16, 1, 0.3, 1) 0.13s both;
}
.evt-header.in-view .evt-divider {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.29s both;
}
.evt-eyebrow {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e9d7b899;
  margin: 0 0 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.evt-title {
  font-family: var(--display);
  font-size: clamp(2.8rem, 9vw, 4.8rem);
  font-weight: 300;
  font-style: italic;
  color: #f7eedcf7;
  line-height: 0.94;
  letter-spacing: 0.02em;
  margin-bottom: clamp(12px, 2.5vw, 20px);
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(0, 0, 0, 0.22);
}
.evt-divider {
  display: block;
  width: clamp(80px, 22vw, 148px);
  height: auto;
  margin: 0 auto clamp(8px, 1.8vw, 16px);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.36));
}
.evt-journey {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: clamp(36px, 6svh, 72px);
}
.evt-path-wrap {
  display: none;
}
.evt-stops {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: clamp(12px, 2.5vw, 20px) 0 clamp(18px, 4vw, 32px);
}
.evt-stop {
  width: min(168px, 46vw);
  opacity: 0;
  transform: translateY(28px) scale(0.976);
  transition:
    opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.96s cubic-bezier(0.16, 1, 0.3, 1);
}
.evt-stop.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.evt-stop--left {
  align-self: flex-start;
  margin-left: clamp(10px, 5vw, 28px);
}
.evt-stop--right {
  align-self: flex-end;
  margin-right: clamp(10px, 5vw, 28px);
}
.evt-stop-plaque {
  position: relative;
  background-image: url(../event/pn-evt-crd-plaque-m-v01.html);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  aspect-ratio: 971 / 1619;
  width: 100%;
}
.evt-stop-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 34% 10% 18%;
  gap: 4px;
}
.evt-stop-motif {
  width: clamp(40px, 10.5vw, 54px);
  height: clamp(40px, 10.5vw, 54px);
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  margin-bottom: clamp(4px, 1.2vw, 7px);
  filter: drop-shadow(0 2px 6px rgba(62, 43, 34, 0.26));
}
@keyframes motifFloat {
  0%,
  to {
    transform: translateY(0) rotate(0);
  }
  38% {
    transform: translateY(-7px) rotate(0.5deg);
  }
  72% {
    transform: translateY(-3px) rotate(-0.3deg);
  }
}
@keyframes motifGlow {
  0%,
  to {
    filter: drop-shadow(0 3px 8px rgba(62, 43, 34, 0.22))
      drop-shadow(0 0 0px rgba(166, 56, 79, 0));
  }
  50% {
    filter: drop-shadow(0 7px 18px rgba(62, 43, 34, 0.12))
      drop-shadow(0 0 18px rgba(166, 56, 79, 0.18));
  }
}
.evt-stop.in-view .evt-stop-motif {
  animation:
    motifFloat var(--motif-dur, 6s) ease-in-out var(--motif-del, 0.9s) infinite,
    motifGlow var(--motif-gdur, 4.4s) ease-in-out var(--motif-del, 0.9s)
      infinite;
}
.evt-stop-name {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  color: var(--rose-dark);
  letter-spacing: 0.03em;
  line-height: 1.02;
  margin: 0 0 3px;
}
.evt-stop-datetime {
  font-family: var(--display);
  font-size: clamp(0.58rem, 1.55vw, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
  line-height: 1.3;
}
.evt-stop-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.62rem, 1.65vw, 0.72rem);
  color: var(--ink);
  opacity: 0.72;
  margin: 2px 0 0;
  line-height: 1.32;
}
.evt-stop-note {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.56rem, 1.5vw, 0.64rem);
  color: var(--ink);
  opacity: 0.5;
  margin: 1px 0 0;
  line-height: 1.36;
}
.evt-stop-map {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.54rem, 1.4vw, 0.62rem);
  color: var(--rose-dark);
  text-decoration: none;
  opacity: 0.6;
  margin-top: 6px;
  transition: opacity 0.22s ease;
}
.evt-stop-map:hover {
  opacity: 0.92;
}
.evt-footstep {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(10px, 2.6vw, 16px) 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.evt-footstep.in-view {
  opacity: 1;
}
.evt-paw {
  display: block;
  color: #d8a9579e;
  width: 22px;
  height: 26px;
  flex-shrink: 0;
}
.evt-paw--l {
  transform: translate(-8px) rotate(-6deg);
  opacity: 0;
}
.evt-paw--r {
  transform: translate(8px) rotate(6deg);
  opacity: 0;
}
@keyframes pawStepL {
  0% {
    opacity: 0;
    transform: translate(-8px) rotate(-6deg) translateY(8px) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(-8px) rotate(-6deg) translateY(0) scale(1);
  }
}
@keyframes pawStepR {
  0% {
    opacity: 0;
    transform: translate(8px) rotate(6deg) translateY(8px) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(8px) rotate(6deg) translateY(0) scale(1);
  }
}
.evt-footstep.in-view .evt-paw--l {
  animation: pawStepL 0.52s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
.evt-footstep.in-view .evt-paw--r {
  animation: pawStepR 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.evt-birds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.evt-bird {
  position: absolute;
  top: var(--bird-top, 20%);
  width: var(--bird-w, 20px);
  height: calc(var(--bird-w, 20px) * 0.5);
  color: #3e2b2261;
  animation: birdFly var(--bird-dur, 26s) linear var(--bird-del, 0s) infinite;
  will-change: transform;
}
.evt-bird:before,
.evt-bird:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border-top: 2px solid currentColor;
  border-radius: 50% 50% 0 0;
}
.evt-bird:before {
  left: 0;
  border-right: none;
  transform: skew(4deg);
}
.evt-bird:after {
  right: 0;
  border-left: none;
  transform: skew(-4deg);
}
@keyframes birdFly {
  0% {
    transform: translate(108vw) translateY(0);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  to {
    transform: translate(-14vw) translateY(var(--bird-drift, 0));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .evt-bird {
    animation: none !important;
    display: none;
  }
}
.evt-glow-mid {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  width: 140%;
  height: 55%;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(216, 169, 87, 0.09) 0%,
    rgba(166, 56, 79, 0.07) 45%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
.evt-jhoomer-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 4;
  width: clamp(82px, 22vw, 110px);
  pointer-events: none;
}
.evt-jhoomer-inner {
  transform-origin: 50% 0%;
  animation: evtJhoomerSway 7s ease-in-out infinite;
}
@keyframes evtJhoomerSway {
  0%,
  to {
    transform: rotate(0);
  }
  28% {
    transform: rotate(2deg);
  }
  72% {
    transform: rotate(-2deg);
  }
}
.evt-jhoomer-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: evtJhoomerGlow 3.8s ease-in-out infinite;
}
@keyframes evtJhoomerGlow {
  0%,
  to {
    filter: drop-shadow(0 6px 20px rgba(166, 56, 79, 0.38))
      drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 0px rgba(216, 169, 87, 0));
  }
  50% {
    filter: drop-shadow(0 6px 20px rgba(166, 56, 79, 0.28))
      drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45))
      drop-shadow(0 0 38px rgba(216, 169, 87, 0.55));
  }
}
.evt-corner {
  position: absolute;
  z-index: 3;
  width: clamp(80px, 22vw, 148px);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.65;
}
.evt-corner--tl {
  top: 0;
  left: 0;
}
.evt-corner--tr {
  top: 0;
  right: 0;
}
.evt-floral-border {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  opacity: 0.58;
}
.evt-floral-border--top {
  top: clamp(44px, 12vw, 80px);
}
.evt-floral-border--bot {
  bottom: 0;
  transform: scaleY(-1);
}
.evt-floral-border img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.evt-bananaleaf {
  position: absolute;
  top: 12%;
  left: -8%;
  z-index: 1;
  width: clamp(110px, 30vw, 200px);
  opacity: 0.52;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45));
  transform-origin: 80% 10%;
  animation: evtLeafSway 9s ease-in-out infinite;
}
.evt-chhatri {
  position: absolute;
  top: 8%;
  right: -10%;
  z-index: 1;
  width: clamp(100px, 28vw, 190px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 22px rgba(49, 27, 40, 0.5));
  animation: evtMotifDrift 12s ease-in-out 2s infinite;
}
.evt-peacock {
  position: absolute;
  top: 36%;
  left: -8%;
  z-index: 1;
  width: clamp(130px, 36vw, 210px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 -4px 28px rgba(49, 27, 40, 0.55))
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.38));
  animation: evtMotifDrift 14s ease-in-out 0s infinite;
  will-change: transform;
}
.evt-diya {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.evt-diya--l {
  width: clamp(44px, 11vw, 76px);
  bottom: 22%;
  left: 4%;
  opacity: 0.72;
  filter: drop-shadow(0 -6px 22px rgba(255, 180, 60, 0.38))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  animation: evtDiyaFlicker 2.8s ease-in-out 0s infinite;
}
.evt-diya--r {
  width: clamp(38px, 9vw, 64px);
  bottom: 28%;
  right: 5%;
  opacity: 0.65;
  filter: drop-shadow(0 -6px 20px rgba(255, 180, 60, 0.32))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  animation: evtDiyaFlicker 3.2s ease-in-out 1.1s infinite;
}
.evt-elephant {
  position: absolute;
  top: 44%;
  right: -8%;
  z-index: 1;
  width: clamp(140px, 38vw, 220px);
  opacity: 0.58;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 -4px 28px rgba(49, 27, 40, 0.5))
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
  transform: scaleX(-1);
  animation: evtElephantDrift 16s ease-in-out 3s infinite;
  will-change: transform;
}
.evt-cow {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
  width: clamp(100px, 26vw, 180px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 -4px 24px rgba(49, 27, 40, 0.45));
  animation: evtMotifDrift 13s ease-in-out 5s infinite;
}
.evt-lotus {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.evt-lotus--1 {
  width: clamp(52px, 13vw, 88px);
  top: 22%;
  left: 5%;
  opacity: 0.28;
  filter: drop-shadow(0 4px 16px rgba(216, 169, 87, 0.22));
  animation: evtLotusFloat 9s ease-in-out 0s infinite;
}
.evt-lotus--2 {
  width: clamp(38px, 9vw, 64px);
  top: 58%;
  right: 6%;
  opacity: 0.22;
  filter: drop-shadow(0 4px 14px rgba(166, 56, 79, 0.2));
  animation: evtLotusFloat 11s ease-in-out 3.5s infinite;
}
@keyframes evtLeafSway {
  0%,
  to {
    transform: rotate(0);
  }
  30% {
    transform: rotate(4deg);
  }
  70% {
    transform: rotate(-3deg);
  }
}
@keyframes evtMotifDrift {
  0%,
  to {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(-4px);
  }
}
@keyframes evtElephantDrift {
  0%,
  to {
    transform: scaleX(-1) translateY(0);
  }
  40% {
    transform: scaleX(-1) translateY(-8px);
  }
  75% {
    transform: scaleX(-1) translateY(-3px);
  }
}
@keyframes evtDiyaFlicker {
  0%,
  to {
    opacity: 0.72;
  }
  30% {
    opacity: 0.55;
  }
  60% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.5;
  }
}
@keyframes evtLotusFloat {
  0%,
  to {
    transform: translateY(0) rotate(0);
  }
  45% {
    transform: translateY(-10px) rotate(4deg);
  }
  78% {
    transform: translateY(-4px) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .evt-jhoomer-inner,
  .evt-jhoomer-img,
  .evt-lotus,
  .evt-bananaleaf,
  .evt-chhatri,
  .evt-peacock,
  .evt-elephant,
  .evt-cow,
  .evt-diya {
    animation: none !important;
  }
}
.gallery-section {
  position: relative;
  overflow: hidden;
  padding: 0 0 80px;
  min-height: 100vh;
}
.gal-bg {
  position: absolute;
  inset: 0;
  background: url(../gallery/pn-gal-bg-hanging-courtyard-m-v01.webp) center
    top / cover no-repeat;
  transform-origin: center top;
}
.gal-bg-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #1e120a2e,
    #1e120a0a 18% 72%,
    #1e120a85
  );
  pointer-events: none;
  z-index: 1;
}
.gal-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 72px 24px 0;
}
.gal-eyebrow {
  color: var(--amber);
  letter-spacing: 0.22em;
}
.gal-title {
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(30, 18, 10, 0.55);
}
.gal-lede {
  color: #f7eedcb8;
  max-width: 460px;
  margin: 12px auto 0;
  font-style: italic;
}
.gal-wall {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0 32px;
  padding: 48px 24px 0;
  max-width: 1240px;
  margin: 0 auto;
}
.gal-frame-slot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-60px);
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease;
}
.gal-frame-slot.in-view {
  transform: translateY(0);
  opacity: 1;
}
@keyframes galSway {
  0%,
  to {
    transform: rotate(0);
  }
  25% {
    transform: rotate(0.9deg);
  }
  75% {
    transform: rotate(-0.9deg);
  }
}
.gal-frame-slot.in-view .gal-frame-inner {
  animation: galSway 6s ease-in-out infinite;
  transform-origin: 50% 0%;
}
.gal-frame-slot:nth-child(1) .gal-frame-inner {
  animation-delay: 0s;
}
.gal-frame-slot:nth-child(2) .gal-frame-inner {
  animation-delay: -2.1s;
}
.gal-frame-slot:nth-child(3) .gal-frame-inner {
  animation-delay: -4.3s;
}
.gal-frame-slot:nth-child(4) .gal-frame-inner {
  animation-delay: -1.6s;
}
.gal-frame-slot:nth-child(5) .gal-frame-inner {
  animation-delay: -3.4s;
}
.gal-frame-slot:nth-child(6) .gal-frame-inner {
  animation-delay: -0.8s;
}
.gal-frame-slot:nth-child(7) .gal-frame-inner {
  animation-delay: -2.7s;
}
.gal-frame-slot:nth-child(8) .gal-frame-inner {
  animation-delay: -5.1s;
}
.gal-frame-inner {
  position: relative;
  display: block;
  overflow: hidden;
}
.gal-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  -webkit-user-drag: none;
}
.gal-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  background: transparent;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.gal-frame-slot.in-view .gal-photo-wrap {
  transform: scaleY(1);
}
.gal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gal-photo-wrap:hover .gal-photo {
  transform: scale(1.045);
}
.gal-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f7eedc14;
  cursor: pointer;
}
.gal-placeholder-icon {
  width: 44px;
  height: 44px;
  border: 1.5px dashed rgba(216, 169, 87, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #d8a9578c;
}
.gal-placeholder-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.7rem, 2vw, 0.82rem);
  color: #d8a95773;
  text-align: center;
  padding: 0 12px;
}
input.gal-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}
.gal-slot-landscape {
  width: clamp(280px, 52vw, 560px);
}
.gal-slot-landscape .gal-frame-inner {
  width: 100%;
  padding-top: 80%;
}
.gal-slot-landscape .gal-photo-wrap {
  clip-path: polygon(
    14% 86%,
    16% 88%,
    84% 88%,
    86% 86%,
    86% 38%,
    76% 32%,
    24% 32%,
    14% 38%
  );
}
.gal-slot-landscape.gal-slot-sm {
  width: clamp(200px, 30vw, 300px);
}
.gal-slot-portrait {
  width: clamp(180px, 32vw, 340px);
}
.gal-slot-portrait .gal-frame-inner {
  width: 100%;
  padding-top: 150%;
}
.gal-slot-portrait .gal-photo-wrap {
  clip-path: polygon(
    18% 94%,
    82% 94%,
    82% 25%,
    78% 23%,
    65% 21.5%,
    50% 21%,
    35% 21.5%,
    22% 23%,
    18% 25%
  );
}
.gal-slot-hero {
  width: clamp(200px, 36vw, 380px);
}
.gal-slot-hero .gal-frame-inner {
  width: 100%;
  padding-top: 150%;
}
.gal-slot-hero .gal-photo-wrap {
  clip-path: polygon(
    15% 93%,
    85% 93%,
    85% 28%,
    80% 26.5%,
    65% 25.5%,
    50% 25%,
    35% 25.5%,
    20% 26.5%,
    15% 28%
  );
}
.gal-frame-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
@keyframes galDustRise {
  0% {
    opacity: 0;
    transform: translateY(0) translate(0);
  }
  15% {
    opacity: 0.65;
  }
  85% {
    opacity: 0.35;
  }
  to {
    opacity: 0;
    transform: translateY(-40px) translate(var(--dx, 8px));
  }
}
.gal-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #d8a957d9, #d8a95700 70%);
  animation: galDustRise var(--dur, 4s) ease-out var(--del, 0s) infinite;
  opacity: 0;
}
.gal-frame-caption {
  display: none;
}
.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #060d0beb;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.gal-lightbox:not([hidden]) {
  opacity: 1;
}
.gal-lightbox[hidden] {
  display: none !important;
}
.gal-lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  gap: 14px;
}
.gal-lb-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 32px 80px #0009;
  transform: scale(0.92);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}
.gal-lightbox:not([hidden]) .gal-lb-img {
  transform: scale(1);
  opacity: 1;
}
.gal-lb-caption {
  font-family: var(--display);
  font-style: italic;
  color: #f7eedc8c;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.gal-lb-close,
.gal-lb-prev,
.gal-lb-next {
  position: fixed;
  background: #f7eedc1a;
  border: 0.5px solid rgba(247, 238, 220, 0.18);
  color: var(--ivory);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  font-family: var(--display);
}
.gal-lb-close:hover,
.gal-lb-prev:hover,
.gal-lb-next:hover {
  background: #d8a95738;
  transform: scale(1.08);
}
.gal-lb-close {
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 16px;
}
.gal-lb-prev,
.gal-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
}
.gal-lb-prev {
  left: 16px;
}
.gal-lb-next {
  right: 16px;
}
.gal-lb-prev:hover,
.gal-lb-next:hover {
  transform: translateY(-50%) scale(1.08);
}
.gal-lightbox.single .gal-lb-prev,
.gal-lightbox.single .gal-lb-next {
  display: none;
}
@media (max-width: 860px) {
  .gal-wall {
    gap: 0 18px;
    padding-top: 32px;
  }
  .gal-slot-landscape {
    width: clamp(240px, 80vw, 420px);
  }
  .gal-slot-portrait {
    width: clamp(140px, 40vw, 240px);
  }
  .gal-slot-hero {
    width: clamp(160px, 44vw, 260px);
  }
}
@media (max-width: 560px) {
  .gal-wall {
    flex-direction: column;
    align-items: center;
    gap: 24px 0;
  }
  .gal-slot-landscape,
  .gal-slot-portrait,
  .gal-slot-hero,
  .gal-slot-landscape.gal-slot-sm {
    width: min(88vw, 360px);
  }
  .gal-slot-landscape .gal-frame-inner {
    padding-top: 80%;
  }
  .gal-slot-portrait .gal-frame-inner,
  .gal-slot-hero .gal-frame-inner {
    padding-top: 150%;
  }
}
.ttk-section {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 11svh, 100px) 0 clamp(52px, 10svh, 90px);
  background:
    radial-gradient(
      ellipse 80% 45% at 15% 10%,
      rgba(194, 64, 96, 0.55),
      transparent 65%
    ),
    radial-gradient(
      ellipse 70% 45% at 85% 90%,
      rgba(110, 20, 45, 0.65),
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 35% at 50% 50%,
      rgba(140, 30, 55, 0.3),
      transparent 70%
    ),
    linear-gradient(160deg, #bf3e5e, #a6384f 35%, #8e2f42 65%, #70202f);
  color: var(--ivory);
  isolation: isolate;
}
.ttk-section:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 100% 40% at 50% 0%,
      rgba(247, 238, 220, 0.09),
      transparent 70%
    ),
    radial-gradient(
      ellipse 80% 30% at 50% 100%,
      rgba(20, 40, 30, 0.28),
      transparent 80%
    );
}
.ttk-section:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(216, 169, 87, 0.025) 0px,
      rgba(216, 169, 87, 0.025) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(216, 169, 87, 0.025) 0px,
      rgba(216, 169, 87, 0.025) 1px,
      transparent 1px,
      transparent 28px
    );
}
.ttk-border-top,
.ttk-border-bot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(216, 169, 87, 0.5) 18%,
    rgba(247, 238, 220, 0.85) 50%,
    rgba(216, 169, 87, 0.5) 82%,
    transparent 100%
  );
}
.ttk-border-top {
  top: 0;
}
.ttk-border-bot {
  bottom: 0;
}
.ttk-motif-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ttk-motif {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: brightness(3.5) sepia(0.6) saturate(0.4) hue-rotate(-10deg);
}
.ttk-motif--peacock {
  bottom: -6%;
  left: 50%;
  transform: translate(-50%);
  width: clamp(260px, 68vw, 440px);
  opacity: 0.11;
}
.ttk-motif--elephant-l {
  left: -6%;
  bottom: 8%;
  width: clamp(120px, 26vw, 190px);
  opacity: 0.14;
  transform: scaleX(1);
}
.ttk-motif--elephant-r {
  right: -6%;
  bottom: 8%;
  width: clamp(120px, 26vw, 190px);
  opacity: 0.14;
  transform: scaleX(-1);
}
.ttk-motif--cow {
  top: 8%;
  right: 3%;
  width: clamp(70px, 14vw, 105px);
  opacity: 0.1;
}
.ttk-inner {
  position: relative;
  z-index: 2;
  width: min(560px, 92vw);
  margin: 0 auto;
}
.ttk-header {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 44px);
}
.ttk-eyebrow {
  font-family: var(--display);
  font-size: clamp(0.78rem, 2.2vw, 0.91rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #f0c86abf;
  display: block;
  margin-bottom: 8px;
}
.ttk-heading {
  font-family: var(--script);
  font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 0;
  text-shadow:
    0 2px 18px rgba(62, 43, 34, 0.35),
    0 0 40px rgba(216, 169, 87, 0.18);
}
.ttk-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 10px;
}
.ttk-ornament span {
  height: 1px;
  width: clamp(28px, 7vw, 48px);
  background: linear-gradient(90deg, transparent, rgba(240, 200, 106, 0.8));
}
.ttk-ornament span:last-child {
  background: linear-gradient(90deg, rgba(240, 200, 106, 0.8), transparent);
}
.ttk-ornament i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #f0c86ad9;
  transform: rotate(45deg);
}
.ttk-lotus-divider {
  width: clamp(30px, 8vw, 40px);
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: brightness(2.2) sepia(0.3) saturate(0.6);
  pointer-events: none;
  user-select: none;
}
.ttk-subline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.07rem, 2.9vw, 1.22rem);
  color: #f7eedcb8;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.ttk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 3vw, 16px);
}
.ttk-grid--single {
  grid-template-columns: minmax(0, 220px);
  justify-content: center;
}
.ttk-card--last-odd {
  grid-column: 1 / -1;
  max-width: calc(50% - clamp(5px, 1.5vw, 8px));
  justify-self: center;
}
.ttk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(22px, 5vw, 30px) clamp(13px, 3vw, 20px) clamp(20px, 4vw, 26px);
  border-radius: 16px;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(255, 240, 210, 0.55) 0%,
      transparent 70%
    ),
    linear-gradient(170deg, #fef9f0, #f8ecd6 55%, #f1e0c2);
  border: 1.5px solid rgba(216, 169, 87, 0.48);
  box-shadow:
    0 1px #ffffffe6,
    0 3px #d8a9572e,
    0 10px 28px #3e2b2233,
    inset 0 0 0 1px #ffffff8c;
  opacity: 0;
  transform: translateY(36px) rotate(-1.5deg) scale(0.93);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s ease;
}
.ttk-card:nth-child(2n) {
  transform: translateY(36px) rotate(1.5deg) scale(0.93);
}
.ttk-card:before,
.ttk-card:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.ttk-card:before {
  top: 6px;
  left: 6px;
  border-top: 1.5px solid rgba(216, 169, 87, 0.55);
  border-left: 1.5px solid rgba(216, 169, 87, 0.55);
  border-radius: 4px 0 0;
}
.ttk-card:after {
  bottom: 6px;
  right: 6px;
  border-bottom: 1.5px solid rgba(216, 169, 87, 0.55);
  border-right: 1.5px solid rgba(216, 169, 87, 0.55);
  border-radius: 0 0 4px;
}
.ttk-card:hover {
  transform: translateY(-4px) rotate(0) scale(1.02) !important;
  box-shadow:
    0 1px #fffffff2,
    0 3px #d8a9573d,
    0 22px 44px #3e2b2242,
    inset 0 0 0 1px #ffffffb3;
}
.ttk-card.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.ttk-card-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 18vw, 80px);
  height: clamp(64px, 18vw, 80px);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ttk-card-icon-wrap:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(216, 169, 87, 0.18) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.ttk-card.in-view .ttk-card-icon-wrap:before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s;
}
.ttk-card-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(62, 43, 34, 0.18));
  opacity: 0;
  transform: scale(0.3) translateY(8px);
  transition: none;
}
.ttk-card.in-view .ttk-card-icon {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition:
    opacity 0.5s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.2s;
}
@keyframes ttkIconFloat {
  0%,
  to {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-6px) scale(1.03);
  }
  75% {
    transform: translateY(-3px) scale(1.01);
  }
}
.ttk-card.in-view .ttk-card-icon {
  animation: ttkIconFloat 4.2s ease-in-out 1s infinite;
}
.ttk-card-icon.icon-sprung {
  transition: none !important;
}
.ttk-card:nth-child(1) .ttk-card-icon {
  animation-delay: 1s;
}
.ttk-card:nth-child(2) .ttk-card-icon {
  animation-delay: 1.4s;
}
.ttk-card:nth-child(3) .ttk-card-icon {
  animation-delay: 1.7s;
}
.ttk-card:nth-child(4) .ttk-card-icon {
  animation-delay: 2.1s;
}
.ttk-card:nth-child(5) .ttk-card-icon {
  animation-delay: 1.2s;
}
.ttk-card:nth-child(6) .ttk-card-icon {
  animation-delay: 1.6s;
}
.ttk-card-rule {
  width: 34px;
  height: 1px;
  flex-shrink: 0;
  margin-bottom: 8px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.8) 30%,
    rgba(240, 200, 106, 0.9) 50%,
    rgba(216, 169, 87, 0.8) 70%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ttk-card.in-view .ttk-card-rule {
  transform: scaleX(1);
  transition-delay: 0.35s;
}
.ttk-card-title {
  font-family: var(--display);
  font-size: clamp(0.83rem, 2.3vw, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b2a3d;
  line-height: 1.2;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ttk-card.in-view .ttk-card-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
}
.ttk-card-body {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.98rem, 2.6vw, 1.12rem);
  color: #3e2b22;
  opacity: 0;
  line-height: 1.48;
  white-space: pre-line;
  transform: translateY(6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ttk-card.in-view .ttk-card-body {
  opacity: 0.82;
  transform: translateY(0);
  transition-delay: 0.5s;
}
.ttk-card-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.63rem, 1.7vw, 0.72rem);
  color: #8b2a3d;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.ttk-card.in-view .ttk-card-link {
  opacity: 0.7;
  transform: translateY(0);
  transition-delay: 0.58s;
}
.ttk-card-link:hover {
  opacity: 1 !important;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .ttk-card,
  .ttk-card-icon,
  .ttk-card-rule,
  .ttk-card-title,
  .ttk-card-body,
  .ttk-card-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .ttk-card-icon-wrap:before {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}
.rsvp-section {
  min-height: 72svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(216, 169, 87, 0.18),
      transparent 15rem
    ),
    linear-gradient(160deg, var(--leaf-dark), #16231f);
  color: var(--ivory);
  text-align: center;
}
.rsvp-card {
  width: min(720px, 100%);
  padding: clamp(34px, 7vw, 70px);
  border: 1px solid rgba(247, 238, 220, 0.18);
  border-radius: 34px;
  background: #f7eedc12;
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px #1f332938;
}
.rsvp-card h2 {
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.9;
}
.floating-menu {
  position: fixed;
  right: 6px;
  bottom: 18px;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.floating-menu.is-visible {
  display: flex;
}
.music-toggle {
  position: relative;
  z-index: 2;
  width: 101px;
  height: 101px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 8px rgba(216, 169, 87, 0.18));
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
  opacity: 0.52;
  margin-right: -12px;
  margin-bottom: -18px;
}
.music-toggle.is-playing {
  opacity: 1;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 18px rgba(216, 169, 87, 0.52));
}
.music-toggle:hover {
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 22px rgba(216, 169, 87, 0.44));
  opacity: 0.85;
}
.music-toggle.is-playing:hover {
  opacity: 1;
}
.music-icon-img {
  width: 101px;
  height: 101px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s ease;
}
.music-toggle.is-playing .music-icon-img {
  animation: musicSpin 8s linear infinite;
}
@keyframes musicSpin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes musicRingPulse {
  0%,
  to {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
.menu-toggle {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 12px rgba(216, 169, 87, 0.22));
  transition: filter 0.3s ease;
}
.menu-toggle:hover {
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 22px rgba(216, 169, 87, 0.44));
}
.compass-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 50%;
  animation: compassSpin 24s linear infinite;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.floating-menu.is-open .compass-img {
  animation-play-state: paused;
}
@keyframes compassSpin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.menu-panel {
  position: absolute;
  bottom: 80px;
  right: -28px;
  width: 380px;
  height: 380px; 
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transform: scale(0.72) translateY(20px);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 0 0 2.5px #d8a9578c,
    0 0 0 5px #d8a9572e,
    0 22px 56px #00000085;
}
.floating-menu.is-open .menu-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.menu-bg-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.menu-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.menu-bg-circle:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0a040861;
}
.menu-nav-header {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #f7eedc8c;
  margin-bottom: 2px;
}
.menu-lotus-top {
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  opacity: 0.72;
}
.menu-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.menu-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  color: #f7eedceb;
  font-family: var(--display);
  font-size: clamp(0.88rem, 2.5vw, 1rem);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition:
    color 0.18s ease,
    letter-spacing 0.18s ease;
  white-space: nowrap;
}
.menu-link:hover {
  color: var(--amber-lit);
  letter-spacing: 0.14em;
}
.menu-divider {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.55) 30%,
    rgba(216, 169, 87, 0.55) 70%,
    transparent
  );
  margin: 0 auto;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .evt-header .evt-eyebrow,
  .evt-header .evt-title,
  .evt-header .evt-divider {
    opacity: 1 !important;
    animation: none !important;
  }
  .evt-path-wrap {
    display: none !important;
  }
  .evt-stop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .evt-stop.in-view .evt-stop-motif {
    animation: none !important;
  }
}
@media (max-width: 620px) {
  .invite-arch-frame {
    height: auto;
    width: 125vw;
    max-width: 125vw;
  }
  .invite-text-content {
    max-width: min(300px, 76vw);
    top: 12%;
    bottom: 6%;
  }
  .inv-cta {
    bottom: 4%;
  }
  .inv-names {
    font-size: clamp(3.4rem, 11vw, 4.5rem);
  }
  .inv-overline {
    font-size: 0.81rem;
  }
  .inv-blessing p:not(.inv-overline) {
    font-size: 0.98rem;
  }
  .inv-kicker {
    font-size: 0.95rem;
  }
  .inv-parents {
    font-size: 1rem;
  }
  .inv-occasion {
    font-size: 1.06rem;
  }
  .inv-venue {
    font-size: 1rem;
  }
  .inv-date {
    font-size: 1.57rem;
  }
  .inv-lotus-div {
    width: clamp(60px, 17vw, 90px);
    margin: 0.1rem auto;
  }
  .inv-blessing,
  .inv-blessing-alt {
    margin-bottom: 0.2rem;
    padding-bottom: 0.3rem;
  }
  .inv-kicker {
    margin-bottom: 0.1rem;
  }
  .inv-parents {
    margin-bottom: 0.2rem;
  }
  .inv-occasion {
    margin-bottom: 0.25rem;
  }
  .inv-meta {
    padding-top: 0.25rem;
  }
}
.evt-stops {
  align-items: center;
  gap: clamp(32px, 8svh, 72px);
  padding-bottom: clamp(40px, 8svh, 90px);
}
.farman-stop {
  position: relative;
  width: min(480px, 92vw);
  align-self: center;
}
.farman-rolled-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(28px);
  opacity: 0;
  transform-origin: center center;
  transition:
    opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.farman-stop.is-entering .farman-rolled-wrap {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  animation: farmanRolledFloat 3.6s ease-in-out 0.7s infinite;
}
@keyframes farmanRolledFloat {
  0%,
  to {
    transform: translate(-50%, -50%) translateY(0);
  }
  44% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
  72% {
    transform: translate(-50%, -50%) translateY(-4px);
  }
}
.farman-stop.is-unrolling .farman-rolled-wrap,
.farman-stop.is-open .farman-rolled-wrap {
  opacity: 0;
  animation: none;
  transform: translate(-50%, -50%) scaleY(0.12) translateY(10px);
  transition:
    opacity 0.5s ease 0ms,
    transform 0.6s cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.farman-rolled-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 28px rgba(62, 43, 34, 0.32));
}
.farman-open-wrap {
  position: relative;
  width: 100%;
  clip-path: inset(0 0 100% 0 round 2px);
  transition:
    -webkit-clip-path 0.86s cubic-bezier(0.4, 0, 0.2, 1) 60ms,
    clip-path 0.86s cubic-bezier(0.4, 0, 0.2, 1) 60ms;
  will-change: clip-path;
  transform: translateZ(0);
}
.farman-stop.is-unrolling .farman-open-wrap {
  clip-path: inset(0 0 0% 0 round 2px);
}
.farman-stop.is-open .farman-open-wrap {
  clip-path: inset(0 0 0% 0 round 2px);
  transition: none;
  filter: drop-shadow(0 22px 48px rgba(62, 43, 34, 0.22))
    drop-shadow(0 4px 12px rgba(62, 43, 34, 0.12));
}
.farman-parchment-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.farman-content {
  position: absolute;
  inset: 8% 10% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6%;
  padding-bottom: 4%;
  text-align: center;
  gap: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.ev-fit {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  transform-origin: center center;
}
.farman-stop.is-unrolling .farman-content,
.farman-stop.is-open .farman-content {
  visibility: visible;
  pointer-events: auto;
}
.farman-motif,
.farman-name,
.farman-rule,
.farman-datetime,
.farman-venue,
.farman-note,
.farman-map,
.farman-map-rule {
  opacity: 0;
}
@keyframes farmanMotifIn {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes farmanTextIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes farmanMotifFloat {
  0%,
  to {
    filter: drop-shadow(0 6px 18px rgba(166, 56, 79, 0.22))
      drop-shadow(0 0 0px rgba(216, 169, 87, 0));
  }
  50% {
    filter: drop-shadow(0 10px 28px rgba(166, 56, 79, 0.18))
      drop-shadow(0 0 22px rgba(216, 169, 87, 0.3));
  }
}
@keyframes farmanDustRise {
  0% {
    opacity: 0;
    transform: translateY(0) translate(0) scale(1);
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.4;
  }
  to {
    opacity: 0;
    transform: translateY(-38px) translate(var(--dx, 6px)) scale(0.5);
  }
}
.farman-stop.is-unrolling .farman-motif,
.farman-stop.is-open .farman-motif {
  animation:
    farmanMotifIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both,
    farmanMotifFloat 3.8s ease-in-out 0.9s infinite;
}
.farman-stop.is-unrolling .farman-name,
.farman-stop.is-open .farman-name {
  animation: farmanTextIn 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
.farman-stop.is-unrolling .farman-rule,
.farman-stop.is-open .farman-rule {
  animation: farmanTextIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.42s both;
}
.farman-stop.is-unrolling .farman-datetime,
.farman-stop.is-open .farman-datetime {
  animation: farmanTextIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}
.farman-stop.is-unrolling .farman-venue,
.farman-stop.is-open .farman-venue {
  animation: farmanTextIn 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.58s both;
}
.farman-stop.is-unrolling .farman-note,
.farman-stop.is-open .farman-note {
  animation: farmanTextIn 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.65s both;
}
.farman-stop.is-unrolling .farman-map,
.farman-stop.is-open .farman-map {
  animation: farmanTextIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.72s both;
}
.farman-stop.is-unrolling .farman-map-rule,
.farman-stop.is-open .farman-map-rule {
  animation: farmanTextIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.76s both;
}
.farman-dust-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 2px;
}
.farman-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #d8a957e6, #d8a95700 70%);
  animation: farmanDustRise var(--dur, 4s) ease-out var(--del, 0s) infinite;
  opacity: 0;
}
.farman-motif {
  width: clamp(140px, 44%, 220px);
  height: clamp(140px, 44%, 220px);
  object-fit: contain;
  flex-shrink: 0;
  margin-top: -18px;
  margin-bottom: 2px;
}
.farman-name {
  /* font-family: var(--script); */
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.1rem, 9.8vw, 4.5rem);
  color: var(--rose-dark);
  line-height: 1;
  margin: 0 0 2px;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.farman-name.farman-name--fallback {
  font-family: var(--display);
  font-style: italic;
  letter-spacing: 0.01em;
}
.farman-name.farman-name--fallback.farman-name--deva {
  font-style: normal;
}
.farman-rule {
  width: clamp(60px, 16vw, 90px);
  height: 1px;
  flex-shrink: 0;
  margin: 8px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.8) 30%,
    rgba(216, 169, 87, 0.8) 70%,
    transparent
  );
}
.farman-datetime {
  font-family: var(--display);
  font-size: clamp(1.09rem, 3.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.farman-venue {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.23rem, 3.8vw, 1.54rem);
  color: var(--ink);
  opacity: 0.78;
  margin: 4px 0 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.farman-note {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.04rem, 3.1vw, 1.26rem);
  color: var(--ink);
  opacity: 0.62;
  max-width: 82%;
  margin: 4px auto 0;
  line-height: 1.34;
  overflow-wrap: break-word;
  min-width: 0;
  white-space: pre-line;
}
.farman-map-rule {
  width: clamp(50px, 14vw, 72px);
  height: 1px;
  flex-shrink: 0;
  margin: 6px 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.55) 30%,
    rgba(216, 169, 87, 0.55) 70%,
    transparent
  );
}
.farman-map {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.98rem, 2.9vw, 1.18rem);
  color: var(--rose-dark);
  text-decoration: none;
  opacity: 0.62;
  margin-top: 10px;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}
.farman-map:hover {
  opacity: 1;
}
@keyframes farmanAwaitPulse {
  0%,
  to {
    filter: drop-shadow(0 22px 48px rgba(62, 43, 34, 0.22))
      drop-shadow(0 4px 12px rgba(62, 43, 34, 0.12));
  }
  50% {
    filter: drop-shadow(0 22px 48px rgba(62, 43, 34, 0.22))
      drop-shadow(0 4px 12px rgba(62, 43, 34, 0.12))
      drop-shadow(0 0 32px rgba(216, 169, 87, 0.28));
  }
}
.farman-stop.farman-awaiting .farman-open-wrap {
  animation: farmanAwaitPulse 2.2s ease-in-out infinite;
}
.farman-inter {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.farman-inter.in-view {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .farman-rolled-wrap {
    display: none !important;
  }
  .farman-open-wrap {
    clip-path: none !important;
    transition: none !important;
  }
  .farman-content {
    visibility: visible !important;
  }
  .farman-stop .farman-motif,
  .farman-stop .farman-name,
  .farman-stop .farman-rule,
  .farman-stop .farman-datetime,
  .farman-stop .farman-venue,
  .farman-stop .farman-note,
  .farman-stop .farman-map,
  .farman-stop .farman-map-rule {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.rsvp-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}
.rsvp-bg {
  position: absolute;
  inset: 0;
  background-image: url(../rsvp/pn-rsvp-bg-royal-finale-m-v01.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.03);
  transition: transform 14s ease-out;
}
.rsvp-section.rsvp-alive .rsvp-bg {
  transform: scale(1);
  background-position:center top;
  background-size: auto;
}
.rsvp-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #060d0b1a, #060d0b4d 40%, #060d0bb8 72%, #060d0be0),
    radial-gradient(
      ellipse 78% 52% at 50% 38%,
      rgba(8, 14, 30, 0.36) 0%,
      transparent 70%
    );
}
.rsvp-fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.rsvp-lamp-glows {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.rsvp-lamp {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.rsvp-lamp--l {
  left: 10%;
  bottom: 36%;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(240, 190, 80, 0.28) 0%,
    transparent 72%
  );
  animation: lampPulse 4.8s ease-in-out infinite;
}
.rsvp-lamp--r {
  right: 10%;
  bottom: 36%;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(240, 190, 80, 0.26) 0%,
    transparent 72%
  );
  animation: lampPulse 5.2s ease-in-out 0.6s infinite;
}
.rsvp-lamp--cl {
  left: 26%;
  bottom: 28%;
  width: 56px;
  height: 56px;
  background: radial-gradient(
    circle,
    rgba(240, 190, 80, 0.2) 0%,
    transparent 72%
  );
  animation: lampPulse 6.1s ease-in-out 1.1s infinite;
}
.rsvp-lamp--cr {
  right: 26%;
  bottom: 28%;
  width: 56px;
  height: 56px;
  background: radial-gradient(
    circle,
    rgba(240, 190, 80, 0.2) 0%,
    transparent 72%
  );
  animation: lampPulse 5.7s ease-in-out 1.8s infinite;
}
@keyframes lampPulse {
  0%,
  to {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.22);
  }
}
.rsvp-lotus-top {
  position: relative;
  z-index: 6;
  width: min(340px, 82vw);
  margin: clamp(32px, 7svh, 64px) auto 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 1.1s ease 0.4s,
    transform 1.1s ease 0.4s;
  pointer-events: none;
}
.rsvp-section.rsvp-alive .rsvp-lotus-top {
  opacity: 0.82;
  transform: translateY(0);
}
.rsvp-lotus-top img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(166, 56, 79, 0.28));
}
.rsvp-content {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 4svh, 40px) clamp(20px, 6vw, 48px)
    clamp(48px, 10svh, 96px);
  max-width: 540px;
  width: 100%;
}
.rsvp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.rsvp-section.rsvp-alive .rsvp-reveal {
  opacity: 1;
  transform: translateY(0);
}
.rsvp-eyebrow {
  transition-delay: 0.5s;
}
.rsvp-headline {
  transition-delay: 0.75s;
}
.rsvp-body {
  transition-delay: 1.05s;
}
.rsvp-cta-wrap {
  transition-delay: 1.35s;
}
.rsvp-std {
  transition-delay: 1.7s;
}
.rsvp-eyebrow {
  font-family: var(--display);
  font-size: clamp(0.94rem, 3.1vw, 1.12rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d8a957e0;
  margin-bottom: clamp(14px, 3vw, 22px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.rsvp-section.rsvp-alive .rsvp-eyebrow {
  opacity: 0.5;
}
.rsvp-headline {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  margin-bottom: clamp(30px, 3svh, 28px);
  text-shadow:
    0 4px 28px rgba(0, 0, 0, 0.6),
    0 1px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
}
.rsvp-hl-will {
  font-size: clamp(1.9rem, 7.5vw, 3.2rem);
  color: #f7eedcd1;
  letter-spacing: 0.04em;
}
.rsvp-hl-join {
  font-size: clamp(3.2rem, 13vw, 5.4rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ivory);
  line-height: 1;
  text-shadow:
    0 0 60px rgba(216, 169, 87, 0.34),
    0 4px 32px rgba(0, 0, 0, 0.68),
    0 1px 6px rgba(0, 0, 0, 0.44);
}
.rsvp-body {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.3rem, 4.9vw, 1.56rem);
  line-height: 1.72;
  color: #f7eedcc7;
  max-width: 360px;
  margin-bottom: clamp(28px, 5svh, 44px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.rsvp-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(36px, 7svh, 60px);
}
.rsvp-btn-primary {
  display: inline-block;
  text-decoration: none;
  color: var(--ivory);
  background: linear-gradient(135deg, #77283af2, #641c2efa 55%, #501424f5);
  border: 1px solid rgba(216, 169, 87, 0.38);
  border-radius: 2px;
  padding: clamp(14px, 3.2svh, 18px) clamp(32px, 8vw, 56px);
  font-family: var(--display);
  font-size: clamp(1.14rem, 4.4vw, 1.37rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow:
    0 8px 36px #641c2e85,
    0 2px 8px #00000057,
    inset 0 1px #d8a9572e,
    inset 0 -1px #0000002e;
  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.18s ease;
  position: relative;
  overflow: hidden;
}
.rsvp-btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(216, 169, 87, 0.14) 50%,
    transparent 70%
  );
  transform: translate(-100%);
  transition: transform 0.55s ease;
}
.rsvp-btn-primary:hover:before {
  transform: translate(100%);
}
.rsvp-btn-primary:hover {
  box-shadow:
    0 12px 48px #641c2ead,
    0 3px 12px #00000061,
    inset 0 1px #d8a95742,
    inset 0 -1px #00000038;
  transform: translateY(-1px);
}
.rsvp-btn-primary:active {
  transform: translateY(0);
}
.rsvp-btn-inner {
  position: relative;
  z-index: 1;
}
.rsvp-helper {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.94rem, 3.4vw, 1.07rem);
  color: #f7eedc70;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  max-width: 280px;
  line-height: 1.55;
}
.rsvp-std {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.8svh, 22px);
}
.rsvp-std-heading {
  font-family: var(--display);
  font-size: clamp(0.88rem, 2.9vw, 1.04rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d8a957b8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
  display: flex;
  align-items: center;
  gap: 14px;
}
.rsvp-std-heading:before,
.rsvp-std-heading:after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 169, 87, 0.48),
    transparent
  );
}
.rsvp-std-btns {
  display: flex;
  gap: clamp(10px, 3vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
}
.rsvp-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f7e2bee0;
  background: #060d0b80;
  border: 1px solid rgba(216, 169, 87, 0.38);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.96rem;
  letter-spacing: 0.1em;
  text-transform: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px #0000003d;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.rsvp-cal-btn:hover {
  background: #d8a9571f;
  border-color: #d8a957b3;
  color: #f7eedcf5;
}
.rsvp-cal-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.72;
}
@media (min-width: 640px) {
  .rsvp-content {
    padding-top: clamp(16px, 3svh, 28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rsvp-fireworks-canvas {
    display: none !important;
  }
  .ftn-jet,
  .ftn-mist,
  .ftn-pool-shim {
    animation: none !important;
    opacity: 0.5 !important;
  }
  .rsvp-lamp {
    animation: none !important;
    opacity: 0.4 !important;
  }
  .rsvp-bg {
    transform: none !important;
    transition: none !important;
  }
  .rsvp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rsvp-lotus-top {
    opacity: 0.8 !important;
    transform: none !important;
    transition: none !important;
  }
}
.cpl-section {
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
.cpl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../meet_the_couple/pn-cpl-bg-secret-garden-m-v01.webp) center
    top / cover no-repeat;
}
.cpl-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #060d0b8c,
    #060d0b00 10% 55%,
    #f7eedc8c 80%,
    #f7eedceb
  );
}
.cpl-content {
  position: relative;
  z-index: 3;
  padding: clamp(48px, 8svh, 80px) 32px clamp(40px, 7svh, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}
.cpl-header {
  text-align: center;
}
.cpl-eyebrow {
  font-family: var(--display);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c48c2deb;
  margin-bottom: 6px;
}
.cpl-title {
  font-family: var(--display);
  font-size: clamp(3rem, 10.6vw, 4.75rem);
  font-weight: 300;
  font-style: italic;
  color: var(--rose-dark);
  line-height: 0.96;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-shadow:
    0 2px 20px rgba(247, 238, 220, 0.7),
    0 4px 32px rgba(0, 0, 0, 0.35);
}
.cpl-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
}
.cpl-ornament span {
  display: block;
  width: clamp(24px, 7vw, 38px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 56, 79, 0.5));
}
.cpl-ornament span:last-child {
  background: linear-gradient(270deg, transparent, rgba(166, 56, 79, 0.5));
}
.cpl-ornament i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.65;
}
.cpl-story {
  text-align: center;
  width: 100%;
}
.cpl-story-body {
  font-family: var(--body);
  font-size: clamp(1.1rem, 4.25vw, 1.25rem);
  line-height: 1.78;
  color: #3e2b22f5;
}
.cpl-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.cpl-tags:empty {
  display: none;
}
.cpl-tag-chip {
  font-family: var(--body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3e2b22c7;
  border: 1px solid rgba(216, 169, 87, 0.45);
  padding: 5px 14px;
  background: #d8a95714;
}
.cpl-story-htag {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  letter-spacing: 0.02em;
  color: var(--amber);
  text-align: center;
  margin-top: 26px;
}
.cpl-story-htag[hidden] {
  display: none;
}
.cpl-tree {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: 58%;
  pointer-events: none;
  user-select: none;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
}
.cpl-tree--left {
  left: 0;
  background-image: url(../meet_the_couple/pn-cpl-ovl-tree-left-m-v01.webp);
}
.cpl-tree--right {
  right: 0;
  background-image: url(../meet_the_couple/pn-cpl-ovl-tree-right-m-v01.webp);
}
.cpl-tree img {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cpl-tree--left {
    transform: translate(-100%) !important;
  }
  .cpl-tree--right {
    transform: translate(100%) !important;
  }
  .cpl-header,
  .cpl-story {
    opacity: 1 !important;
    transform: none !important;
  }
}
.inv-kicker {
  font-family: var(--script) !important;
  font-size: clamp(1.54rem, 5.3vw, 1.85rem) !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  font-style: italic;
  color: var(--rose) !important;
  font-weight: 400 !important;
  opacity: 0.88 !important;
  margin-bottom: 0.45rem !important;
  text-shadow: 0 1px 10px rgba(166, 56, 79, 0.14);
}
.invite-section.invite-active .inv-kicker {
  animation: inkSettle 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}
@keyframes lotusRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0.62;
  }
  to {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
.lotus-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(84px, 22vw, 108px);
  height: clamp(84px, 22vw, 108px);
  border-radius: 50%;
  border: 1.5px solid rgba(223, 162, 168, 0.52);
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  animation: lotusRipple 2.6s ease-out 1.2s infinite;
}
.intro.show-lotus .lotus-button:before {
  animation: lotusRipple 2.6s ease-out 0s infinite;
}
.lotus-cta-group:before {
  content: "";
  position: absolute;
  top: clamp(42px, 11vw, 54px);
  left: 50%;
  width: clamp(84px, 22vw, 108px);
  height: clamp(84px, 22vw, 108px);
  border-radius: 50%;
  border: 1px solid rgba(216, 169, 87, 0.36);
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  animation: lotusRipple 2.6s ease-out 1.9s infinite;
}
.lotus-open-img {
  display: block;
  width: clamp(80px, 22vw, 108px);
  height: clamp(80px, 22vw, 108px);
  grid-area: 1 / 1;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.42s ease 0.1s;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 38px rgba(223, 162, 168, 0.75))
    drop-shadow(0 0 70px rgba(216, 169, 87, 0.4));
}
.lotus-button.lotus-phase-1 .lotus-icon-img {
  animation: none !important;
  transform: scale(0.9) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(223, 162, 168, 0.35)) !important;
}
.lotus-button.lotus-phase-2 .lotus-icon-img {
  animation: none !important;
  transform: scale(1.15) !important;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease !important;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 52px rgba(223, 162, 168, 0.95))
    drop-shadow(0 0 90px rgba(216, 169, 87, 0.52)) !important;
}
.lotus-button.lotus-phase-2 .lotus-glow-burst {
  opacity: 0.28 !important;
  transform: translate(-50%, -50%) scale(0.6) !important;
  transition:
    opacity 0.4s ease,
    transform 0.6s ease !important;
}
.lotus-button.lotus-phase-3 .lotus-glow-burst {
  opacity: 0.36 !important;
  transform: translate(-50%, -50%) scale(0.75) !important;
  transition:
    opacity 0.3s ease,
    transform 0.5s ease !important;
}
.lotus-button.is-open .lotus-open-img {
  opacity: 1;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.18))
    drop-shadow(0 0 60px rgba(223, 162, 168, 0.92))
    drop-shadow(0 0 110px rgba(216, 169, 87, 0.55));
}
.farman-stop.farman-left {
  align-self: flex-start;
  margin-left: clamp(0px, 3vw, 18px);
}
.farman-stop.farman-right {
  align-self: flex-end;
  margin-right: clamp(0px, 3vw, 18px);
}
.farman-stop--main {
  width: min(520px, 96vw);
}
.farman-stop--main .farman-open-wrap {
  filter: drop-shadow(0 28px 60px rgba(62, 43, 34, 0.32))
    drop-shadow(0 0 42px rgba(216, 169, 87, 0.22))
    drop-shadow(0 4px 14px rgba(62, 43, 34, 0.18));
}
.farman-stop--main .farman-name {
  font-size: clamp(1.96rem, 6.3vw, 2.66rem);
}
.farman-inter--lotus {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(6px, 1.5svh, 12px) 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.farman-inter--lotus.in-view {
  opacity: 1;
}
.farman-inter--lotus img {
  width: clamp(48px, 14vw, 72px);
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 0 12px rgba(216, 169, 87, 0.28));
  animation: closingLotusBreath 5s ease-in-out infinite;
}
@keyframes ttkGlowPulse {
  0%,
  to {
    opacity: 0.7;
    transform: scale(1);
    box-shadow:
      0 0 0 3px #d8a9571f,
      0 0 18px #d8a9571a;
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow:
      0 0 0 5px #d8a95738,
      0 0 32px #d8a95738;
  }
}
.ttk-card.in-view .ttk-card-icon-wrap:before {
  background: radial-gradient(
    circle,
    rgba(216, 169, 87, 0.28) 0%,
    rgba(216, 169, 87, 0.12) 45%,
    transparent 72%
  );
  animation: ttkGlowPulse 3.8s ease-in-out infinite;
  animation-delay: 0.6s;
}
.ttk-ornament svg,
.cpl-ornament svg {
  display: block;
  flex-shrink: 0;
}
.closing-section {
  position: relative;
  overflow: hidden;
  min-height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 12svh, 120px) 24px clamp(80px, 14svh, 144px);
  background: linear-gradient(180deg, #0c1a16, #060d0b);
  color: var(--ivory);
  text-align: center;
}
.closing-bg {
  position: absolute;
  inset: 0;
  background: url(../rsvp/pn-rsvp-bg-royal-finale-m-v01.webp) center bottom /
    cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.closing-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #060d0beb, #060d0b9e 45%, #060d0bd1);
  pointer-events: none;
}
.closing-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.rsvp-closing-frame {
  position: relative;
  width: 100%;
  max-width: min(300px, 88vw);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 48px) clamp(24px, 6vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rsvp-closing-frame:before,
.rsvp-closing-frame:after,
.rsvp-corner {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border-color: #d8a95766;
  border-style: solid;
}
.rsvp-closing-frame:before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}
.rsvp-closing-frame:after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}
.rsvp-corner--tr {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}
.rsvp-corner--bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}
.closing-lotus {
  width: clamp(56px, 16vw, 84px);
  height: auto;
  opacity: 0;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 0 18px rgba(216, 169, 87, 0.38));
}
.closing-content.in-view .closing-lotus {
  animation:
    inkSettle 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0ms both,
    closingLotusBreath 5.5s ease-in-out 1.5s infinite;
}
@keyframes closingLotusBreath {
  0%,
  to {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.06);
  }
}
.closing-eyebrow {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.8rem, 2.5vw, 0.94rem);
  letter-spacing: 0.2em;
  color: #d8a957b3;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}
.closing-content.in-view .closing-eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.closing-names {
  font-family: var(--script);
  font-size: clamp(3.2rem, 11vw, 5.4rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition:
    opacity 1.1s ease,
    transform 1.2s cubic-bezier(0.14, 1, 0.28, 1);
  transition-delay: 0.38s;
}
.closing-content.in-view .closing-names {
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(216, 169, 87, 0.3),
    0 0 130px rgba(216, 169, 87, 0.14);
  animation: closingNameGlow 6s ease-in-out 1.4s infinite;
}
@keyframes closingNameGlow {
  0%,
  to {
    text-shadow:
      0 2px 24px rgba(0, 0, 0, 0.65),
      0 0 50px rgba(216, 169, 87, 0.24);
  }
  50% {
    text-shadow:
      0 2px 20px rgba(0, 0, 0, 0.55),
      0 0 80px rgba(216, 169, 87, 0.46),
      0 0 150px rgba(216, 169, 87, 0.18);
  }
}
.closing-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: scaleX(0.6);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.56s;
}
.closing-content.in-view .closing-ornament {
  opacity: 1;
  transform: scaleX(1);
}
.closing-ornament span {
  height: 1px;
  flex: 1;
  max-width: 60px;
  background: linear-gradient(90deg, transparent, rgba(216, 169, 87, 0.55));
}
.closing-ornament span:last-child {
  background: linear-gradient(90deg, rgba(216, 169, 87, 0.55), transparent);
}
.closing-ornament i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8a957c7;
  box-shadow: 0 0 9px #d8a95785;
  font-style: normal;
}
.closing-line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.92rem, 3vw, 1.5rem);
  color: #f7e2beb8;
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.68s;
}
.closing-content.in-view .closing-line {
  opacity: 1;
  transform: translateY(0);
}
.closing-date {
  font-family: var(--display);
  font-size: clamp(0.7rem, 2.1vw, 1.12rem);
  font-weight:700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d8a95770;
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: 0.84s;
}
.closing-content.in-view .closing-date {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .closing-lotus,
  .closing-eyebrow,
  .closing-names,
  .closing-ornament,
  .closing-line,
  .closing-date {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .section {
    padding-left: clamp(28px, 4vw, 56px);
    padding-right: clamp(28px, 4vw, 56px);
  }
  .section-inner {
    width: min(1180px, 100%);
  }
  .section-title {
    font-size: clamp(4.2rem, 7.2vw, 6.8rem);
  }
  .section-lede {
    max-width: 560px;
    font-size: clamp(1.22rem, 1.8vw, 1.62rem);
  }
  .intro-bg {
    object-position: center top;
  }
  .intro-vignette {
    background:
      radial-gradient(
        ellipse 42% 60% at 50% 43%,
        rgba(216, 169, 87, 0.09) 0%,
        rgba(166, 56, 79, 0.04) 44%,
        transparent 70%
      ),
      linear-gradient(
        180deg,
        rgba(4, 8, 6, 0.72) 0%,
        transparent 20%,
        transparent 56%,
        rgba(4, 8, 6, 0.86) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4, 8, 6, 0.62) 0%,
        transparent 24%,
        transparent 76%,
        rgba(4, 8, 6, 0.6) 100%
      );
  }
  .intro.is-lit .intro-vignette {
    background:
      linear-gradient(
        180deg,
        rgba(4, 8, 6, 0.24) 0%,
        transparent 18%,
        transparent 62%,
        rgba(4, 8, 6, 0.66) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4, 8, 6, 0.36) 0%,
        transparent 22%,
        transparent 78%,
        rgba(4, 8, 6, 0.34) 100%
      );
  }
  .intro-jhoomer {
    top: -24px;
    width: clamp(210px, 24vw, 290px);
  }
  .rope-button {
    width: clamp(110px, 13vw, 144px);
    height: clamp(500px, 64svh, 640px);
  }
  .intro-floral-left,
  .intro-floral-right {
    width: clamp(180px, 18vw, 260px);
    bottom: -10svh;
  }
  .intro-floral-left {
    left: -6vw;
  }
  .intro-floral-right {
    right: -6vw;
  }
  .diya-wrap {
    width: clamp(72px, 8vw, 102px);
  }
  .diya-wrap.diya-left {
    left: clamp(120px, 22vw, 280px);
    bottom: 22svh;
  }
  .diya-wrap.diya-right {
    right: clamp(120px, 22vw, 280px);
    bottom: 22svh;
  }
  .intro-reveal:after {
    top: 38svh;
    width: min(680px, 66vw);
    height: 43svh;
  }
  .intro-reveal:before {
    width: min(720px, 70vw);
    top: 56svh;
  }
  .intro-reveal-item {
    width: min(760px, 82vw);
  }
  .intro-reveal .names {
    top: 42svh;
    font-size: clamp(6rem, 9vw, 8.4rem);
  }
  .intro-reveal .ornament {
    top: 66svh;
    width: clamp(220px, 24vw, 320px);
  }
  .intro-reveal .date {
    top: 69svh;
    font-size: clamp(1.08rem, 1.5vw, 1.34rem);
  }
  .intro-reveal .venue {
    top: 73svh;
    font-size: clamp(1.06rem, 1.45vw, 1.3rem);
  }
  .lotus-cta-group {
    top: 79svh;
  }
  .lotus-button,
  .lotus-icon-img,
  .lotus-open-img {
    width: clamp(96px, 10vw, 124px);
    height: clamp(96px, 10vw, 124px);
  }
  .lotus-button:before,
  .lotus-cta-group:before {
    width: clamp(96px, 10vw, 124px);
    height: clamp(96px, 10vw, 124px);
  }
  .lotus-cta-group:before {
    top: clamp(48px, 5vw, 62px);
  }
  .lotus-cta-label {
    font-size: clamp(1.12rem, 1.45vw, 1.34rem);
  }
  .invite-section {
    min-height: 100svh;
    padding: 0;
  }
  .invite-bg {
    background-image: url(../invite/pn-inv-bg-panel-d-v01.webp);
    background-size: cover;
    background-position: center center;
  }
  .invite-vignette {
    background:
      radial-gradient(
        ellipse 35% 72% at center,
        #00000005,
        #0000001f 62%,
        #0000007a
      ),
      linear-gradient(
        90deg,
        rgba(6, 13, 11, 0.38) 0%,
        transparent 22%,
        transparent 78%,
        rgba(6, 13, 11, 0.36) 100%
      );
  }
  .invite-card-wrap {
    align-items: center;
  }
  .invite-arch-frame {
    content: url(../invite/pn-inv-fr-card-d-v01.webp);
    width: clamp(1040px, 172vw, 1320px);
    height: auto;
    max-width: none;
  }
  .invite-text-content {
    top: 52%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: min(500px, 52vw);
    min-height: 0;
    height: min(480px, 50svh);
    justify-content: center;
    padding-top: 0;
  }
  .inv-blessing,
  .inv-blessing-alt {
    font-size: 0.88rem;
  }
  /* .inv-blessing p:not(.inv-overline) {
    font-size: 0.9rem;
  } */
  .inv-kicker {
    margin-bottom: 0;
  }
  .inv-lotus-div {
    margin: 0 auto;
    width: clamp(54px, 10vw, 80px);
  }
  .inv-names {
    font-size: clamp(3.6rem, 5.2vw, 4.8rem);
    white-space: nowrap;
    margin-top: 0;
    margin-bottom: 10px;
  }
  .inv-parents {
    max-width: 420px;
    margin-bottom: 0.2rem;
    /* font-size: 0.95rem; */
  }
  .inv-parents p {
    padding: 3px 0;
  }
  .inv-occasion {
    /* font-size: 1rem; */
    margin-bottom: 0.25rem;
  }
  .inv-meta {
    gap: 4px;
  }
  .inv-cta {
    bottom: clamp(25px, 3svh, 72px);
  }
  .inv-btn {
    padding: 0.62rem 2.6rem;
  }
  .inv-bird--a {
    width: 92px;
    height: 94px;
    background-size: 552px 184px;
    background-position: 0 -43px;
    animation:
      birdFlapADesktop 0.35s steps(6, end) infinite,
      birdFlyA 5s linear 1.8s infinite,
      birdDriftA 3.7s ease-in-out 1.8s infinite;
  }
  .inv-bird--b {
    width: 72px;
    height: 74px;
    background-size: 432px 144px;
    background-position: 0 -34px;
    animation:
      birdFlapBDesktop 0.42s steps(6, end) 0.15s infinite,
      birdFlyB 7s linear 8s infinite,
      birdDriftB 5.1s ease-in-out 8s infinite;
  }
  @keyframes birdFlapADesktop {
    0% {
      background-position-x: 0px;
    }
    to {
      background-position-x: -552px;
    }
  }
  @keyframes birdFlapBDesktop {
    0% {
      background-position-x: 0px;
    }
    to {
      background-position-x: -432px;
    }
  }
  .events-section {
    padding-left: 0;
    padding-right: 0;
  }
  .evt-bg-vignette {
    background: linear-gradient(
      180deg,
      #1a0e168c,
      #1a0e161a 10%,
      #1a0e1600 22% 78%,
      #1a0e161a 90%,
      #1a0e168c
    );
  }
  .evt-glow-mid {
    top: 20%;
    width: 100%;
    height: 65%;
  }
  .evt-jhoomer-wrap {
    width: clamp(120px, 11vw, 180px);
    top: 0;
  }
  .evt-corner {
    width: clamp(140px, 15vw, 220px);
  }
  .evt-peacock {
    width: clamp(200px, 20vw, 320px);
    left: 0;
    bottom: 0;
  }
  .evt-elephant {
    width: clamp(220px, 22vw, 340px);
    right: 0;
    bottom: 0;
  }
  .evt-lotus--1 {
    width: clamp(70px, 6vw, 110px);
    top: 16%;
    left: 2%;
  }
  .evt-lotus--2 {
    width: clamp(52px, 4.5vw, 80px);
    top: 58%;
    right: 3%;
  }
  .evt-lotus--3 {
    width: clamp(58px, 5vw, 90px);
    top: 36%;
    right: 2%;
  }
  .evt-lotus--4 {
    width: clamp(40px, 3.5vw, 64px);
    top: 76%;
    left: 3%;
  }
  .evt-header {
    padding-top: clamp(260px, 24vw, 420px);
  }
  .evt-title {
    font-size: clamp(4.2rem, 7vw, 6.8rem);
  }
  .evt-divider {
    width: clamp(126px, 16vw, 180px);
  }
  .evt-journey {
    max-width: min(720px, 86vw);
  }
  .evt-stops {
    align-items: center;
    gap: clamp(46px, 8svh, 82px);
  }
  .farman-stop,
  .farman-stop.farman-left,
  .farman-stop.farman-right {
    align-self: center;
    width: min(560px, 72vw);
    margin-left: 0;
    margin-right: 0;
  }
  .farman-stop--main {
    width: min(600px, 76vw);
  }
  .farman-content {
    left: 12%;
    right: 12%;
  }
  .farman-motif {
    width: clamp(150px, 34%, 210px);
    height: clamp(150px, 34%, 210px);
  }
  .farman-name {
    font-size: clamp(3.29rem, 5.6vw, 4.69rem);
  }
  .farman-stop--main .farman-name {
    font-size: clamp(2.52rem, 4.5vw, 3.29rem);
  }
  .farman-datetime {
    font-size: clamp(1.15rem, 1.75vw, 1.4rem);
  }
  .farman-venue {
    font-size: clamp(1.32rem, 1.9vw, 1.57rem);
  }
  .farman-note {
    font-size: clamp(1.09rem, 1.5vw, 1.29rem);
  }
  .farman-map {
    font-size: clamp(0.72rem, 1vw, 0.84rem);
  }
  .farman-inter--lotus img {
    width: clamp(62px, 8vw, 84px);
  }
  .evt-floral-border--bot {
    display: none;
  }
  .evt-cow {
    bottom: 8%;
    left: 2%;
    top: auto;
    transform: none;
    width: clamp(70px, 7vw, 110px);
    opacity: 0.55;
    z-index: 1;
  }
  .cpl-section {
    min-height: 82svh;
    padding-left: 0;
    padding-right: 0;
  }
  .cpl-bg {
    background-image: url(../meet_the_couple/pn-cpl-bg-secret-garden-d-v01.webp);
    background-position: center top;
    background-size: cover;
  }
  .cpl-vignette {
    background:
      linear-gradient(
        180deg,
        #060d0b9e,
        #060d0b1f 12%,
        #060d0b00 50%,
        #f7eedc57 78%,
        #f7eedce6
      ),
      radial-gradient(
        ellipse 38% 58% at 50% 48%,
        rgba(247, 238, 220, 0.62) 0%,
        rgba(247, 238, 220, 0.28) 48%,
        transparent 76%
      );
  }
  .cpl-content {
    max-width: min(620px, 70vw);
    min-height: 82svh;
    justify-content: center;
    padding: clamp(78px, 11svh, 126px) clamp(44px, 6vw, 72px);
    isolation: isolate;
  }
  .cpl-content:before {
    content: "";
    position: absolute;
    inset: clamp(44px, 7svh, 84px) 0;
    z-index: -1;
    border-radius: 48% 48% 44% 44%/12% 12% 18% 18%;
    background: radial-gradient(
      ellipse 72% 66% at 50% 42%,
      rgba(247, 238, 220, 0.68) 0%,
      rgba(247, 238, 220, 0.34) 54%,
      transparent 78%
    );
    filter: blur(0.2px);
    pointer-events: none;
  }
  .cpl-title {
    font-size: clamp(3.4rem, 5.2vw, 5.2rem);
  }
  .cpl-story-body {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.86;
    margin-bottom: 20px; 
  }
  .cpl-tree {
    width: 64%;
    background-size: 100% auto;
    z-index: 1;
  }
  .cpl-tree--left {
    left: -6vw;
  }
  .cpl-tree--right {
    right: -6vw;
  }
  .gallery-section {
    min-height: 100svh;
    padding-bottom: clamp(92px, 11svh, 132px);
  }
  .gal-bg {
    background-image: url(../gallery/pn-gal-bg-hanging-courtyard-d-v01.webp);
    background-position: center top;
    background-size: cover;
  }
  .gal-bg-vignette {
    background:
      linear-gradient(
        to bottom,
        #1e120a7a,
        #1e120a24 18%,
        #1e120a0f 50%,
        #1e120a24 72%,
        #1e120aa3
      ),
      linear-gradient(
        90deg,
        rgba(30, 18, 10, 0.34) 0%,
        transparent 22%,
        transparent 78%,
        rgba(30, 18, 10, 0.32) 100%
      );
  }
  .gal-header {
    padding-top: clamp(86px, 11svh, 128px);
  }
  .gal-lede {
    max-width: 520px;
    text-shadow:
      0 1px 12px rgba(20, 10, 4, 0.62),
      0 2px 24px rgba(20, 10, 4, 0.38);
  }
  .gal-wall {
    max-width: min(940px, 94vw);
    padding-top: clamp(56px, 7svh, 82px);
    gap: clamp(16px, 3vw, 34px);
  }
  .gal-slot-hero {
    width: clamp(240px, 34vw, 390px);
  }
  .gal-slot-portrait {
    width: clamp(170px, 24vw, 280px);
  }
  .gal-slot-landscape {
    width: clamp(320px, 56vw, 540px);
  }
  .ttk-section {
    padding-top: clamp(76px, 10svh, 112px);
    padding-bottom: clamp(78px, 10svh, 118px);
  }
  .ttk-inner {
    width: min(760px, 90vw);
  }
  .ttk-heading {
    font-size: clamp(3rem, 5.4vw, 4rem);
  }
  .ttk-subline {
    max-width: 460px;
    margin: 0 auto;
    font-size: clamp(0.96rem, 1.45vw, 1.08rem);
  }
  .ttk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.2vw, 22px);
  }
  .ttk-card {
    border-radius: 14px;
    padding: clamp(24px, 3.2vw, 32px) clamp(18px, 2.5vw, 24px)
      clamp(22px, 2.8vw, 28px);
  }
  .ttk-card-icon-wrap {
    width: clamp(68px, 9vw, 84px);
    height: clamp(68px, 9vw, 84px);
  }
  .ttk-card-title {
    font-size: clamp(0.88rem, 1.3vw, 1.01rem);
  }
  .ttk-card-body {
    font-size: clamp(1.07rem, 1.5vw, 1.2rem);
  }
  .ttk-motif--peacock {
    width: clamp(420px, 46vw, 640px);
    bottom: -12%;
  }
  .ttk-motif--elephant-l,
  .ttk-motif--elephant-r {
    width: clamp(190px, 18vw, 280px);
  }
  .ttk-motif--cow {
    width: clamp(100px, 9vw, 138px);
  }
  .rsvp-section {
    min-height: 100svh;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .rsvp-bg {
    background-image: url(../rsvp/rsvp-bg-royal-new1.webp);
    background-position: center center;
    transform: scale(1.04);
  }
  .rsvp-veil {
    /* background:
      linear-gradient(
        180deg,
        #060d0b1a,
        #060d0b4d 40%,
        #060d0bb8 72%,
        #060d0be0
      ),
      radial-gradient(
        ellipse 44% 48% at 50% 42%,
        rgba(8, 14, 30, 0.42) 0%,
        rgba(8, 14, 30, 0.22) 46%,
        transparent 76%
      ); */
      background: #0000008c;
  }
  .rsvp-lotus-top {
    width: clamp(280px, 28vw, 390px);
    margin-top: clamp(28px, 5svh, 54px);
  }
  .rsvp-content {
    max-width: 600px;
    padding: clamp(18px, 3svh, 30px) 44px clamp(100px, 13svh, 150px);
  }
  .rsvp-hl-will {
    font-size: clamp(2.35rem, 3.6vw, 3.7rem);
  }
  .rsvp-hl-join {
    /* font-size: clamp(4.6rem, 7.2vw, 7.2rem); */
    font-size: clamp(4.6rem, 5.2vw, 7.1rem);
  }
  .rsvp-body {
    max-width: 430px;
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  }
  .rsvp-btn-primary {
    padding-left: clamp(44px, 5vw, 70px);
    padding-right: clamp(44px, 5vw, 70px);
  }
  .rsvp-lamp--l {
    left: 15%;
    bottom: 35%;
  }
  .rsvp-lamp--r {
    right: 15%;
    bottom: 35%;
  }
  .rsvp-lamp--cl {
    left: 32%;
    bottom: 27%;
  }
  .rsvp-lamp--cr {
    right: 32%;
    bottom: 27%;
  }
  .closing-section {
    min-height: 70svh;
  }
  .closing-bg {
    background-image: url(../rsvp/pn-rsvp-bg-royal-finale-d-v01.webp);
  }
  .closing-content {
    max-width: 620px;
  }
  .closing-names {
    font-size: clamp(5.2rem, 7vw, 7rem);
  }
  .rsvp-closing-frame {
    max-width: min(680px, 78vw);
    padding: clamp(40px, 5vw, 60px) clamp(60px, 9vw, 110px);
  }
}
@media (min-width: 1024px) {
  .intro-bg {
    object-position: center center;
  }
  .intro-jhoomer {
    width: clamp(250px, 20vw, 330px);
  }
  .intro-floral-left,
  .intro-floral-right {
    width: clamp(190px, 16vw, 280px);
    bottom: -12svh;
  }
  .intro-floral-left {
    left: max(-5vw, calc(50% - 760px));
  }
  .intro-floral-right {
    right: max(-5vw, calc(50% - 760px));
  }
  .diya-wrap.diya-left {
    left: clamp(200px, 26vw, 400px);
    bottom: 20svh;
  }
  .diya-wrap.diya-right {
    right: clamp(200px, 26vw, 400px);
    bottom: 20svh;
  }
  .intro-reveal .names {
    width: min(820px, 78vw);
    font-size: clamp(6.8rem, 7.4vw, 9rem);
  }
  .invite-arch-frame {
    width: clamp(1320px, 128vw, 1440px);
  }
  .invite-text-content {
    max-width: min(540px, 46vw);
    height: min(580px, 60svh);
  }
  .inv-names {
    font-size: clamp(5.95rem, 6.4vw, 7.5rem);
  }
  .evt-journey {
    max-width: min(1120px, 92vw);
  }
  .evt-stops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    column-gap: clamp(22px, 3vw, 42px);
    row-gap: clamp(42px, 7svh, 76px);
    padding-left: clamp(20px, 3vw, 38px);
    padding-right: clamp(20px, 3vw, 38px);
  }
  .farman-stop,
  .farman-stop.farman-left,
  .farman-stop.farman-right {
    width: min(100%, 340px);
    align-self: start;
    justify-self: center;
  }
  .farman-stop--main {
    width: min(100%, 350px);
  }
  .farman-inter {
    display: none;
  }
  .farman-content {
    inset: 8% 10% 12%;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left:5px;
    padding-right:5px;
  }
  .farman-motif {
    width: clamp(94px, 30%, 128px);
    height: clamp(94px, 30%, 128px);
    margin-top: -8px;
  }
  .farman-name {
    font-size: clamp(2.52rem, 3.78vw, 3.57rem);
  }
  .farman-stop--main .farman-name {
    font-size: clamp(2.03rem, 2.8vw, 2.66rem);
  }
  .farman-rule {
    margin: 5px 0;
  }
  .farman-datetime {
    font-size: clamp(0.9rem, 1.15vw, 1.09rem);
    letter-spacing: 0.13em;
  }
  .farman-venue {
    font-size: clamp(1.04rem, 1.33vw, 1.26rem);
    margin-top: 3px;
  }
  .farman-note {
    font-size: clamp(0.87rem, 1.15vw, 1.06rem);
    max-width: 76%;
    margin-top: 3px;
  }
  .farman-map {
    font-size: clamp(0.84rem, 1.09vw, 1.01rem);
    margin-top: 6px;
  }
  .farman-map-rule {
    margin-top: 4px;
  }
  .cpl-section {
    min-height: 92svh;
  }
  .cpl-content {
    max-width: min(680px, 58vw);
    min-height: 92svh;
  }
  .cpl-tree {
    width: 66%;
  }
  .cpl-tree--left {
    left: -10vw;
  }
  .cpl-tree--right {
    right: -10vw;
  }
  .gallery-section {
    min-height: 108svh;
  }
  .gal-wall {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 1.12fr) minmax(
        240px,
        1.12fr
      ) minmax(150px, 0.8fr);
    align-items: start;
    max-width: min(1120px, 92vw);
    gap: clamp(8px, 1.8vw, 26px) clamp(22px, 3vw, 46px);
    padding-left: 0;
    padding-right: 0;
  }
  .gal-frame-slot {
    justify-self: center;
  }
  .gal-slot-hero {
    grid-column: 2 / 4;
    grid-row: 1;
    width: clamp(300px, 28vw, 430px);
    z-index: 3;
  }
  .gal-frame-slot:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 1;
    margin-top: clamp(68px, 9vw, 116px);
  }
  .gal-frame-slot:nth-child(3) {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: clamp(-34px, -2vw, -12px);
  }
  .gal-frame-slot:nth-child(4) {
    grid-column: 4 / 5;
    grid-row: 1;
    margin-top: clamp(108px, 13vw, 168px);
  }
  .gal-frame-slot:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 2;
    margin-top: clamp(16px, 3vw, 56px);
  }
  .gal-frame-slot:nth-child(6) {
    grid-column: 4 / 5;
    grid-row: 2;
    margin-top: clamp(16px, 3vw, 56px);
  }
  .gal-frame-slot:nth-child(7) {
    grid-column: 2 / 3;
    grid-row: 3;
    justify-self: end;
    margin-top: clamp(16px, 2.5vw, 40px);
  }
  .gal-frame-slot:nth-child(8) {
    grid-column: 3 / 4;
    grid-row: 3;
    justify-self: start;
    margin-top: clamp(16px, 2.5vw, 40px);
  }
  .gal-slot-landscape.gal-slot-sm {
    width: clamp(300px, 28.5vw, 450px);
  }
  .gal-slot-landscape {
    width: clamp(390px, 42vw, 590px);
  }
  .gal-slot-portrait {
    width: clamp(180px, 17vw, 250px);
  }
  .ttk-inner {
    width: min(1040px, 90vw);
  }
  .ttk-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
  }
  .ttk-card {
    grid-column: span 2;
  }
  .ttk-grid--single {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ttk-grid--single .ttk-card {
    grid-column: 3 / span 2;
  }
  .ttk-card--last-odd {
    grid-column: span 2;
    max-width: none;
    justify-self: stretch;
  }
  .ttk-card:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }
  .ttk-card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }
  .ttk-card:last-child:nth-child(3n + 2) {
    grid-column: 4 / span 2;
  }
  .rsvp-content {
    margin-top: -2svh;
  }
  .floating-menu {
    right: clamp(8px, 1.2vw, 18px);
    bottom: clamp(24px, 2.4vw, 38px);
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .music-toggle {
    pointer-events: auto;
    touch-action: manipulation;
  }
  .menu-panel {
    right: 84px;
    bottom: 0;
    transform-origin: bottom right;
  }
  .floating-menu.is-open .menu-panel {
    transform: scale(1) translateY(0);
  }
  .farman-content .farman-name {
    font-size: 40px !important;
  }
}
@media (min-width: 1280px) {
  .section-title {
    font-size: clamp(5rem, 5.4vw, 7.4rem);
  }
  .intro-jhoomer {
    width: clamp(280px, 18vw, 360px);
  }
  .rope-button {
    width: clamp(118px, 9vw, 152px);
  }
  .intro-floral-left,
  .intro-floral-right {
    width: clamp(200px, 14vw, 280px);
  }
  .diya-wrap {
    width: clamp(88px, 6.5vw, 116px);
  }
  .diya-wrap.diya-left {
    left: clamp(250px, 28vw, 430px);
    bottom: 18svh;
  }
  .diya-wrap.diya-right {
    right: clamp(250px, 28vw, 430px);
    bottom: 18svh;
  }
  .intro-reveal:after {
    top: 40svh;
  }
  .intro-reveal .names {
    top: 48svh;
    font-size: clamp(7.2rem, 6.6vw, 9.4rem);
  }
  .intro-reveal .ornament {
    top: 68svh;
  }
  .intro-reveal .date {
    top: 72svh;
  }
  .intro-reveal .venue {
    top: 78svh;
  }
  .lotus-cta-group {
    top: 80svh;
  }
  .invite-arch-frame {
    width: clamp(1420px, 112vw, 1540px);
  }
  .invite-text-content {
    max-width: 560px;
    height: min(620px, 64svh);
  }
  .events-section {
    min-height: 100svh;
  }
  .evt-journey {
    max-width: min(1180px, 90vw);
  }
  .farman-stop,
  .farman-stop.farman-left,
  .farman-stop.farman-right {
    width: min(100%, 350px);
  }
  .farman-stop--main {
    width: min(100%, 360px);
  }
  .cpl-content {
    max-width: 980px;
  }
  .cpl-tree {
    width: 68%;
  }
  .cpl-tree--left {
    left: -14vw;
  }
  .cpl-tree--right {
    right: -14vw;
  }
  .gal-wall {
    max-width: min(1240px, 90vw);
  }
  .gal-slot-hero {
    width: clamp(340px, 26vw, 460px);
  }
  .gal-slot-landscape {
    width: clamp(440px, 40vw, 620px);
  }
  .gal-slot-portrait {
    width: clamp(200px, 15vw, 270px);
  }
  .ttk-inner {
    width: min(1120px, 88vw);
  }
  .ttk-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ttk-card {
    grid-column: span 2;
  }
  .ttk-grid--single .ttk-card {
    grid-column: 4 / span 2;
  }
  .ttk-card:last-child:nth-child(3n + 1),
  .ttk-card:nth-last-child(2):nth-child(3n + 1),
  .ttk-card:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
  .ttk-card:last-child:nth-child(4n + 1) {
    grid-column: 4 / span 2;
  }
  .ttk-card:nth-last-child(2):nth-child(4n + 1) {
    grid-column: 3 / span 2;
  }
  .ttk-card:last-child:nth-child(4n + 2) {
    grid-column: 5 / span 2;
  }
  .ttk-card:nth-last-child(3):nth-child(4n + 1) {
    grid-column: 2 / span 2;
  }
  .ttk-card:nth-last-child(2):nth-child(4n + 2) {
    grid-column: 4 / span 2;
  }
  .ttk-card:last-child:nth-child(4n + 3) {
    grid-column: 6 / span 2;
  }
  .rsvp-bg {
    background-position: center center;
  }
  .rsvp-content {
    max-width: 640px;
  }
}
@media (min-width: 1536px) {
  .intro-bg {
    object-position: center 46%;
  }
  .intro-floral-left {
    left: calc(50% - 900px);
  }
  .intro-floral-right {
    right: calc(50% - 900px);
  }
  .diya-wrap.diya-left {
    left: calc(50% - 520px);
  }
  .diya-wrap.diya-right {
    right: calc(50% - 520px);
  }
  .invite-arch-frame {
    width: 1560px;
  }
  .evt-journey {
    max-width: min(1220px, 88vw);
  }
  .gallery-section {
    min-height: 112svh;
  }
  .gal-wall {
    max-width: 1320px;
  }
  .cpl-tree {
    width: 70%;
  }
  .cpl-tree--left {
    left: -17vw;
  }
  .cpl-tree--right {
    right: -17vw;
  }
  .rsvp-content {
    padding-bottom: clamp(120px, 14svh, 172px);
  }
  .rsvp-hl-join {
    font-size: clamp(3rem, 4vw, 5rem);
  }
  .invite-text-content {
    top: 55%;
  }
}
@media (max-width:1240px) and (min-width:1024px){
  .blessing-image-wrapper .blessing-image-box img{
    height: 75px !important;
    width: 75px !important;
  }
  .invite-text-content {
      /* height: 100%; */
      /* justify-content: flex-start; */
  }
  .inv-parents {
    font-size: 1rem;
  }
  .inv-blessing p:not(.inv-overline) {
    font-size: 0.9rem;
  }
  .inv-occasion {
    font-size: 1rem;
  }
  .invite-text-content .inv-names {
    font-size: clamp(3.25rem, 5vw, 7.5rem) !important;
  }
  .inv-overline {
    font-size: 0.8rem;
  }
  .invite-text-content {
    top: 50%;
  }
  .inv-btn {
    padding: 0.42rem 2rem;
  }
  .inv-btn{
    font-size: 0.52rem;
  }
}
@media (max-width:1024px) and (min-width:900px){
  .inv-cta{
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .invite-bg,
  .gal-bg,
  .rsvp-bg {
    transform: none !important;
  }
}
@media (max-width: 767px) {
  .invite-bg {
    animation: none !important;
    transform: none !important;
  }
  .inv-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #060d0b9e !important;
  }
  .rsvp-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #22342ceb !important;
  }
  .rsvp-cal-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #060d0bb8 !important;
  }
}
@media (max-width:420px){
	.farman-name{
		font-size:clamp(2.2rem, 9.8vw, 4.5rem) !important;
	}
	.farman-map{
		margin-top: 5px;
	}
}
@media (max-width:380px){
  .inv-names
  {
    font-size: clamp(2.4rem, 11vw, 4.5rem);
    margin:0;
  }
  .inv-blessing p:not(.inv-overline)
  {
    font-size: 0.65rem;
  }
  .inv-parents {
    font-size: 0.65rem;
  }
  .inv-overline {
    font-size: 0.71rem;
  }
  .inv-occasion {
    font-size: 0.8rem;
  }
  .blessing-image-wrapper .blessing-image-box img {
    width: 70px;
    height: 70px;
  }
  .inv-parents p{
    padding: 0;
  }
}
@media (max-width:340px){
	.farman-datetime {
    	font-size: clamp(0.89rem, 3.4vw, 1.4rem);
	}
	.farman-venue {
    	font-size: clamp(1.03rem, 3.8vw, 1.54rem);
	}
	p.farman-note {
    	font-size: 0.75rem !important;
	}
}