/* ═══════════════════════════════════════════════════════════════
   MAHARAJA AURELIA · vowstory.app

   Palette measured off the plates: the flat interior of Hero_1 sits at
   #F8EDE2 and Hero_2 at #F8EBDF, so the page colour is the artwork's own
   paper and the plates dissolve into it at their edges.

   The hero is layered, never one flat image: plate, then foreground
   bouquets, then drifting petals, then a lantern hanging from the top edge.

   Elements carry real alpha (rebuilt from baked checkerboards on five
   sheets) and composite by alpha with no blend mode.

   Base rules come first, modifiers after. A modifier declared before its
   base loses at equal specificity.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #f8ede2;
  --paper-2: #f2e3d3;
  --paper-3: #fcf6ee;
  --ink: #4a2b20;
  --ink-2: #7a5340;
  --ink-3: #a4836e;
  --gold: #b08a4a;
  --gold-lt: #d9bc85;
  --gold-dp: #8a6835;
  --wine: #6e3328;
  --line: rgba(176, 138, 74, 0.3);
  --line-2: rgba(176, 138, 74, 0.16);

  --col: 480px;
  --pad: 24px;
  --gap: 54px;
  --fpad: 52px;
  --fcorner: 38px;
  --es: cubic-bezier(0.22, 0.61, 0.36, 1);
  --eo: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 600px) {
  :root {
    --col: 620px;
    --fpad: 62px;
    --fcorner: 46px;
  }
  body {
    font-size: 17px;
  }
}
@media (min-width: 960px) {
  :root {
    --col: 800px;
    --gap: 70px;
    --fpad: 74px;
    --fcorner: 56px;
  }
  body {
    font-size: 18px;
  }
}
@media (min-width: 1400px) {
  :root {
    --col: 880px;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.75 "Jost",
    system-ui,
    sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
#page {
  max-width: var(--col);
  margin: 0 auto;
}

/* ── type ──────────────────────────────────────────────────── */
.eyebrow {
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-dp);
}
.h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(1.85rem, 7vw, 2.6rem);
  line-height: 1.16;
  color: var(--wine);
}
.prose {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 34em;
  margin-inline: auto;
}
.deva {
  font-family: "Noto Serif Devanagari", serif;
}
.guru {
  font-family: "Noto Sans Gurmukhi", sans-serif;
}
.rule {
  display: block;
  width: 132px;
  height: 1px;
  margin: 20px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── sections ──────────────────────────────────────────────── */
.sec {
  position: relative;
  padding: var(--gap) var(--pad);
  isolation: isolate;
}
.sec > * {
  position: relative;
}
.sec-tight {
  padding-top: calc(var(--gap) * 0.4);
}
.sec-flush {
  padding-left: 0;
  padding-right: 0;
}
.sec-corners {
  padding-top: calc(var(--gap) + 40px);
}
.inner {
  max-width: var(--col);
  margin: 0 auto;
  text-align: center;
}

/* section corner ornaments — every section belongs to the same world */
/* A 4.3:1 ornament gets very tall from a modest width. Rendered height plus
   the top offset must stay inside the section's top padding or the ornament
   reaches the text — asserted at all four widths in the suite. */
.sc {
  position: absolute;
  width: clamp(42px, 10vw, 64px);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.sc-tl {
  top: 10px;
  left: 6px;
}
.sc-tr {
  top: 10px;
  right: 6px;
  transform: scaleX(-1);
}
.sec.lit .sc {
  opacity: 0.85;
  transition: opacity 1s var(--eo);
}

/* transition ornament between sections */
.trans {
  display: block;
  width: min(38%, 186px);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
}
.trans.in {
  opacity: 0.92;
  transform: none;
  transition:
    opacity 0.9s var(--es),
    transform 0.9s var(--es);
}

/* ═══ CURTAIN OPENING ═════════════════════════════════════════
   Two panels meeting at the centre, the couple's seal held in the
   centrepiece aperture between them. On tap the seal presses, dust
   rises, the panels draw apart and the centrepiece lifts away. */
#cover {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    opacity 0.8s var(--es) 0.3s,
    visibility 0.8s 0.3s;
}
#cover.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cv-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(26px, 7vh, 64px);
  background: var(--paper-2);
  transition: transform 1s var(--eo);
}
.cv-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.cv-bar-t {
  top: 0;
}
.cv-bar-t::after {
  bottom: 0;
}
.cv-bar-b {
  bottom: 0;
}
.cv-bar-b::after {
  top: 0;
}
#cover.opening .cv-bar-t {
  transform: translateY(-100%);
}
#cover.opening .cv-bar-b {
  transform: translateY(100%);
}

.cv-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.cp {
  position: relative;
  width: min(76vw, 336px);
  transition:
    transform 1.2s var(--eo),
    opacity 0.9s ease;
}
.cp-art {
  width: 100%;
  display: block;
}
/* aperture measured from the artwork: centre 49.9% / 48.7%, 26.2% wide */
.cp-logo {
  position: absolute;
  left: 49.9%;
  top: 48.7%;
  width: 25.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.cp-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-sheen {
  position: absolute;
  left: 49.9%;
  top: 48.7%;
  width: 25.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 34%,
    rgba(255, 255, 255, 0.66) 48%,
    transparent 62%
  );
  background-size: 250% 250%;
  animation: sheen 5s var(--es) infinite;
}
@keyframes sheen {
  0% {
    background-position: 130% 130%;
  }
  55%,
  100% {
    background-position: -40% -40%;
  }
}
#cover.pressed .cp {
  transform: scale(0.955);
}
#cover.opening .cp {
  transform: scale(1.1) translateY(-16px);
  opacity: 0;
}

.cv-tap {
  margin-top: 26px;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-dp);
  transition: opacity 0.5s ease;
}
#cover.opening .cv-tap {
  opacity: 0;
}

.mote {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-lt);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
#cover.opening .mote {
  animation: rise 1.7s var(--es) forwards;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--mx), var(--my)) scale(1.15);
  }
}

/* ═══ MUSIC ═══ */
.mus {
  position: fixed;
  top: 16px;
  z-index: 40;
  right: max(16px, calc((100vw - var(--col)) / 2 + 10px));
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(252, 246, 238, 0.9);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gold-dp);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease 0.4s,
    visibility 0.6s 0.4s;
}
.mus.on {
  opacity: 1;
  visibility: visible;
}
.mus svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mus .m-off {
  display: none;
}
.mus.muted .m-on {
  display: none;
}
.mus.muted .m-off {
  display: block;
}

/* ═══ PLATES ══════════════════════════════════════════════════
   The plate keeps the artwork's own aspect so cover can never crop, and
   there is no inset, so it cannot crop vertically either. The ken-burns
   is a scale on the art layer; nothing else writes transform, so the two
   can never cancel. */
.plate {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 865 / 1819;
  overflow: hidden;
}
.plate-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.07);
  transform-origin: 50% 42%;
}
.plate.settled .plate-art {
  transform: scale(1);
  transition: transform 2.8s var(--eo);
}
.plate-hero .plate-art {
  background-image: url(assets/hero-1.webp);
}
.plate-fam .plate-art {
  background-image: url(assets/hero-2.webp);
}

.plate-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  bottom: 24%;
  padding: 0 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  z-index: 3;
}
.plate-fam .plate-body {
  top: 10%;
  bottom: 18%;
  padding: 0 15%;
  justify-content: space-evenly;
}
.fam-prose {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 26em;
}
.fam-date {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dp);
}

/* The "Hosted by …" line under the families (pack 0011 T1) — quiet italic,
   the body ink, so it reads as a sentence and not as another heading. */
.fam-hosted {
  margin-top: 10px;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* ── hero foreground layers ──
   The bouquets sit in front of the plate, not inside it, so the hero
   reads as depth rather than a flat picture. */
.fg {
  position: absolute;
  bottom: -2%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.fg-l {
  left: -5%;
  width: 36%;
}
.fg-r {
  right: -4%;
  width: 26%;
}
.plate.settled .fg {
  opacity: 1;
  transition: opacity 1.4s var(--eo) 0.5s;
}

.hang {
  position: absolute;
  top: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 0;
  opacity: 0;
}
.hang-l {
  left: 8%;
  width: 10%;
}
.hang-r {
  right: 9%;
  width: 10%;
}
.plate.settled .hang {
  opacity: 0.96;
  animation: sway 7s ease-in-out infinite;
  transition: opacity 1.2s ease 0.3s;
}
.plate.settled .hang-r {
  animation-duration: 8.4s;
  animation-delay: -2s;
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-1.7deg);
  }
  50% {
    transform: rotate(1.7deg);
  }
}

/* ── the floating layer ──
   Dust wisps and blossom drifting through every section, seeded in JS so
   each element gets its own path, size, speed and spin. Disabled wholesale
   under prefers-reduced-motion. */
.floats {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.flo {
  position: absolute;
  opacity: 0;
  will-change: transform;
}
.sec.lit .flo {
  animation: floatby linear infinite;
}
@keyframes floatby {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0) rotate(0deg);
  }
  14% {
    opacity: var(--o);
  }
  82% {
    opacity: var(--o);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), calc(0px - var(--dy)), 0) rotate(var(--spin));
  }
}

/* drifting petals across the hero */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
.pet {
  position: absolute;
  top: -8%;
  opacity: 0;
  will-change: transform;
}
.plate.settled .pet {
  animation: drift linear infinite;
}
@keyframes drift {
  0% {
    opacity: 0;
    transform: translate3d(0, -10%, 0) rotate(0deg);
  }
  8% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 115%, 0) rotate(var(--spin));
  }
}

.deity {
  width: clamp(74px, 20%, 132px);
  margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(110, 51, 40, 0.16));
}
.hero-inv {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--gold-dp);
}
.hero-eye {
  margin-top: 16px;
}
.hero-names {
  margin-top: 12px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 10.5vw, 3.5rem);
  line-height: 1.02;
  color: var(--wine);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-names .amp {
  font-family: "Pinyon Script", cursive;
  font-size: 0.46em;
  color: var(--gold);
  margin: 0.06em 0;
  order: 1;
}
.hero-names .n-groom {
  order: 0;
}
.hero-names .n-bride {
  order: 2;
}
.hero-date {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dp);
}
.hero-venue {
  margin-top: 9px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-style: italic;
}

.cue {
  display: block;
  margin: 22px auto 0;
  width: 22px;
  height: 34px;
  transition: opacity 0.5s ease;
}
.cue.hide {
  opacity: 0;
}
.cue span {
  display: block;
  width: 1px;
  height: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cuedrop 1.9s ease-in-out infinite;
}
@keyframes cuedrop {
  0% {
    transform: scaleY(0.2);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0.2);
    transform-origin: bottom;
  }
}

/* ── the couple's seal, reused through the page, always large enough to read ── */
.seal-lg {
  width: min(42%, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(110, 51, 40, 0.1);
}
.seal-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seal-md {
  width: min(34%, 132px);
}

/* ═══ THE UNION BLOCK — now on the families plate ═════════════
   One block, each side complete, joined by "weds" in the gutter. Names
   are never stranded. Order flips with the card; both families always
   appear. On the plate it stays stacked at every width — the plate caps
   at 560px, so a viewport-width media query would try to put two
   full-name columns into 372px. */
.weds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.weds .side {
  flex: 1;
  min-width: 0;
}
.side-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 4.9vw, 1.5rem);
  line-height: 1.2;
  color: var(--wine);
}
.side-role {
  margin-top: 4px;
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dp);
}
.side-parents {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.weds em {
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  font-size: 1.35rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  order: 1;
}
.weds em::before,
.weds em::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--line);
}
.weds .side-groom {
  order: 0;
}
.weds .side-bride {
  order: 2;
}

/* ═══ COUNTDOWN + SCRATCH FOIL ════════════════════════════════ */
.clock {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.unit {
  flex: 1;
  max-width: 118px;
  padding: 16px 4px;
  border: 1px solid var(--line-2);
  background: var(--paper-3);
}
.unit b {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1;
  color: var(--wine);
}
.unit i {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dp);
}

/* the reveal: units lift and the numbers count up from zero */
.clock.revealed .unit {
  animation: landing 0.9s var(--eo) both;
}
.clock.revealed .unit:nth-child(2) {
  animation-delay: 0.12s;
}
.clock.revealed .unit:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes landing {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.clock.revealed .unit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scratch {
  position: relative;
  margin-top: 8px;
}
.scratch .clock {
  position: relative;
}
.foil {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  touch-action: none;
  transition:
    opacity 0.8s var(--es),
    transform 0.8s var(--es);
}
.foil.done {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.scratch-hint {
  margin-top: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dp);
  transition: opacity 0.5s ease;
}
.scratch-hint.gone {
  opacity: 0;
}
.foil-btn {
  margin: 14px auto 0;
  display: block;
  font: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dp);
  background: none;
  border: 1px solid var(--line);
  padding: 9px 20px;
  cursor: pointer;
}
.foil-btn:hover {
  border-color: var(--gold);
  background: var(--paper-3);
}
.foil-btn.gone {
  display: none;
}

/* ═══ EVENTS — each card in its own gilded frame ══════════════ */
.ev {
  position: relative;
  margin-bottom: 34px;
  padding: 0;
}
.ev-frame {
  width: min(72%, 280px);
  margin: 0 auto;
}
.ev-in {
  margin-top: 20px;
  text-align: center;
}
.ev-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  color: var(--wine);
  line-height: 1.2;
}
.ev-when {
  margin-top: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dp);
}
.ev-where {
  margin-top: 9px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Dress code · note under the venue, and the per-event map link — the two
   things this design dropped until pack 0011 T1. The link is set like the
   design's small-caps eyebrows, in the deep gold, with a hairline border. */
.ev-note {
  margin-top: 8px;
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.ev-map {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-dp);
  border: 1px solid currentColor;
}
@media (min-width: 780px) {
  .ev {
    display: flex;
    align-items: center;
    gap: 34px;
    text-align: left;
  }
  .ev-frame {
    width: 42%;
    max-width: 280px;
    flex: none;
    margin: 0;
  }
  .ev-in {
    margin-top: 0;
    flex: 1;
    text-align: left;
  }
}

/* ═══ OUR STORY ═══════════════════════════════════════════════ */
.sky {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.sky-moon {
  top: 4%;
  right: 4%;
  width: clamp(64px, 14vw, 110px);
}
.sky-cloud-a {
  top: 16%;
  left: -4%;
  width: clamp(96px, 22vw, 148px);
  opacity: 0;
}
.sky-cloud-b {
  bottom: 12%;
  right: -6%;
  width: clamp(90px, 24vw, 180px);
}
.sky-lamp {
  top: 30%;
  left: 9%;
  width: clamp(30px, 6vw, 44px);
}
.sec.lit .sky {
  opacity: 0.38;
  transition: opacity 1.6s var(--eo);
}
.sec.lit .sky-moon {
  opacity: 0.9;
}
.sec.lit .sky-lamp {
  opacity: 0.8;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 10px;
}
.st {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
}
.st-frame {
  width: min(64%, 236px);
}
.st-when {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dp);
}
.st-head {
  margin-top: 6px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  color: var(--wine);
  line-height: 1.2;
}
.st-body {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 28em;
}
.st-link {
  display: block;
  width: 20px;
  margin: 24px auto;
  opacity: 0.75;
}
@media (min-width: 720px) {
  .st {
    flex-direction: row;
    text-align: left;
    gap: 32px;
  }
  .st-frame {
    width: 34%;
    max-width: 236px;
    flex: none;
  }
  .st:nth-of-type(even) {
    flex-direction: row-reverse;
    text-align: right;
  }
  .st-txt {
    flex: 1;
  }
}

/* ═══ FILM ════════════════════════════════════════════════════ */
.film {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  cursor: pointer;
}
.film img,
.film iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.film img {
  object-fit: cover;
}
.film-veil {
  position: absolute;
  inset: 0;
  background: rgba(74, 43, 32, 0.26);
}
.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(252, 246, 238, 0.8);
  background: rgba(252, 246, 238, 0.22);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.4s var(--eo),
    background 0.4s ease;
}
.film:hover .film-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(252, 246, 238, 0.36);
}
.film-play svg {
  width: 22px;
  height: 22px;
  fill: #fcf6ee;
  margin-left: 3px;
}
.film.playing .film-veil,
.film.playing .film-play,
.film.playing img {
  display: none;
}

/* ═══ GALLERY — a frame system, not a slab ════════════════════ */
.gal {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
}
.gal-track {
  display: flex;
  transition: transform 0.8s var(--es);
}
.gal-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.gal-fr {
  width: min(70%, 272px);
}
/* ═══ FRAMES ══════════════════════════════════════════════════
   The frame ornaments on the sheets occupy about 300px of a 1536px grid,
   which is 0.41 of the pixels a 300px frame needs on a retina screen —
   that is where the blur came from, and no amount of re-cropping fixes it
   because the detail was never in the source.

   So the geometry is drawn in CSS, which is sharp at any size, and raster
   is used only for the corner ornaments, which never render above 104px
   and have twice the pixels they need. */
.pf {
  position: relative;
  width: min(74%, 300px);
  margin: 0 auto;
  padding: 12px;
}
.pf::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  opacity: 0.9;
}
.pf::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gold);
  opacity: 0.34;
}
.pf-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.pf-c {
  position: absolute;
  width: 40%;
  max-width: 104px;
  z-index: 3;
  pointer-events: none;
}
.pf-c-tl {
  top: -8%;
  left: -8%;
}
.pf-c-br {
  bottom: -8%;
  right: -8%;
  transform: rotate(180deg);
}

/* shapes — the rule, the inner rule and the photo all take the same radius */
.pf-oval::before,
.pf-oval::after,
.pf-oval .pf-img {
  border-radius: 50%;
}
.pf-arch::before,
.pf-arch::after,
.pf-arch .pf-img {
  border-radius: 48% 48% 3% 3% / 34% 34% 2% 2%;
}
.pf-soft::before,
.pf-soft::after,
.pf-soft .pf-img {
  border-radius: 3px;
}
.pf-tall .pf-img {
  aspect-ratio: 4/5;
}
.pf-wide .pf-img {
  aspect-ratio: 5/4;
}

.pf-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--paper-2);
  position: relative;
  z-index: 1;
}
.pf-oval .pf-empty {
  border-radius: 50%;
}
.pf-arch .pf-empty {
  border-radius: 48% 48% 3% 3% / 34% 34% 2% 2%;
}
.ph-badge {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dp);
  border: 1px solid var(--line);
  padding: 6px 11px;
  background: var(--paper-3);
  text-align: center;
}
.gal-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.gal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
}
.gal-dot.on {
  background: var(--gold);
}

/* ═══ VENUE ═══ */
.venue-art {
  width: min(84%, 260px);
  margin: 0 auto 22px;
}
.venue-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  color: var(--wine);
  line-height: 1.25;
}
.venue-addr {
  margin-top: 9px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.mapcard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px auto 0;
  max-width: 420px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  text-decoration: none;
}
.mapcard:hover {
  border-color: var(--gold);
  background: #fff;
}
.mapcard-pin {
  flex: none;
  color: var(--gold-dp);
}
.mapcard-pin svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.mapcard-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.mapcard-text b {
  display: block;
  font-weight: 400;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: var(--wine);
}
.mapcard-text span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 2px;
}
.mapcard-go {
  flex: none;
  color: var(--gold);
}
.mapcard-go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ═══ RSVP — its own visual identity ══════════════════════════
   Structure and copy are locked across every tier; only colour, type and
   surrounding ornament change. */
.rsvp-mark {
  width: min(36%, 148px);
  margin: 0 auto 22px;
}
.rv-lead {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.rv-panel {
  position: relative;
  margin-top: 26px;
  padding: 34px var(--pad) 30px;
  background: var(--paper-3);
  border: 1px solid var(--line-2);
}
.rv-panel {
  padding-top: 72px;
}
.rv-panel .sc {
  width: clamp(30px, 7vw, 44px);
  opacity: 0.8;
}
.rv-choices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto 26px;
}
.rv-ch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.rv-ch:hover {
  border-color: var(--gold);
}
.rv-ch.sy {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 138, 74, 0.1);
}
.rv-ch.sn {
  border-color: var(--ink-3);
}
.rv-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dp);
}
.rv-ico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.rv-lbl {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: var(--wine);
}
.rv-form {
  max-width: 400px;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--es);
}
.rv-form.act {
  opacity: 1;
  pointer-events: all;
}
.ff {
  margin-bottom: 15px;
  text-align: left;
}
.ff.hide {
  display: none;
}
.f-lbl {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dp);
  margin-bottom: 6px;
}
.f-in,
.f-ta {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.f-in:focus,
.f-ta:focus {
  border-color: var(--gold);
}
.f-ta {
  min-height: 88px;
  resize: vertical;
}
.f-opt {
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: none;
}
.btn-sub {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--paper-3);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-sub:hover {
  background: var(--gold-dp);
  border-color: var(--gold-dp);
}
.btn-sub[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.rv-contact {
  margin-top: 34px;
  text-align: center;
}
.rc-lbl {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rc-name {
  margin-top: 7px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  color: var(--wine);
}
.rc-ph {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--gold-dp);
  text-decoration: none;
}
.rc-ph svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Templatising additions ─────────────────────────────────────
   .rc-line   one contact — name over number. The config carries a LIST, so
              each pair is cloned from tpl-contact and stacked; the old markup
              hard-coded exactly one.
   .ic-*      the two link glyphs. script.js deletes whichever does not apply,
              so `mode: "whatsapp"` and `mode: "call"` never both show.
   .deity-*   a blessing arrives EITHER as this design's own artwork (an <img>)
              or, for the seventeen it was not drawn for, as a plain character
              in `blessing.symbol`. The glyph is sized to sit where the
              illustration would have. */
.rc-line {
  display: block;
}
.rc-line + .rc-line {
  margin-top: 14px;
}
.deity-glyph {
  display: block;
  line-height: 1;
  text-align: center;
  font-family: "Noto Serif Devanagari", "Noto Sans Gurmukhi", "Cormorant Garamond", serif;
  font-size: clamp(38px, 10vw, 60px);
  color: var(--gold-dp);
}
.rv-ok {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.rv-ok.show {
  display: block;
}

/* The refused-reply line under the form (pack 0011 T8) — the form's body
   size, in a deep wine so it reads as a warning without a new colour token. */
.rv-err {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #7c3040;
}
.ok-r {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 18px;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dp);
}
.ok-r svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ok-t {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  color: var(--wine);
}
.ok-x {
  margin-top: 9px;
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* ═══ FOOTER — ornament in normal flow above the credit ═══════ */
.foot {
  padding: var(--gap) var(--pad) 46px;
  text-align: center;
}
.foot-orn {
  width: min(100%, 400px);
  margin: 0 auto 26px;
}
.foot-line {
  font-size: 0.92rem;
  color: var(--ink-2);
  font-style: italic;
}
.foot-names {
  margin-top: 12px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  color: var(--wine);
}
.foot-tag {
  margin-top: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--gold-dp);
}
.ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--gold-dp);
  text-decoration: none;
}
.ig svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}
.ig svg circle:last-child {
  fill: currentColor;
  stroke: none;
}
.foot-rule {
  display: block;
  width: 60%;
  max-width: 280px;
  height: 1px;
  background: var(--line);
  margin: 32px auto 24px;
}
.made {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-3);
}
.made span {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.made img {
  width: 112px;
}

/* ═══ REVEALS ═══ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s var(--es),
    transform 0.85s var(--es);
}

/* ═══ TWO CARDS ═══ */
[data-side="bride"] .hero-names .n-bride {
  order: 0;
}
[data-side="bride"] .hero-names .n-groom {
  order: 2;
}
[data-side="bride"] .weds .side-bride {
  order: 0;
}
[data-side="bride"] .weds .side-groom {
  order: 2;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .plate-art {
    transform: scale(1);
  }
  .cp-sheen {
    display: none;
  }
  .petals {
    display: none;
  }
  .fg,
  .hang,
  .sky,
  .trans,
  .sc {
    opacity: 1;
    transform: none;
  }
  .floats {
    display: none;
  }
  .foil {
    display: none;
  }
}