/* Layout: a velvet table; each part of the invitation is a hand-made card lying on it.
   Rendered card faces (velvet / cotton paper with embossed gold) carry the craft; HTML text is
   foil-stamped or letterpressed on top, and paintings sit behind laser-cut windows. */
:root {
  --gold: #a07a37;
  --gold-lo: #765723;
  --ink: #5a1420;
  --ink-soft: #7d5a4a;
  --maroon: #5c0e1b;

  --script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --serif: 'Ovo', 'Cormorant Garamond', Georgia, serif;
  --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --deva: 'Tiro Devanagari Hindi', 'Kohinoor Devanagari', serif;

  --velvet: url("assets/card/velvet.webp");
  --paper: url("assets/card/paper.webp");
  --brocade: url("assets/art/brocade-tile.webp");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jharokha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V46C0 24 28 15 42 7Q47 4 50 0Q53 4 58 7C72 15 100 24 100 46V125Z'/%3E%3C/svg%3E");
  --foil: linear-gradient(100deg, #8a6420 0%, #f3d98f 20%, #b98d3e 40%, #fff1c2 54%, #c49a45 70%, #7a5418 100%);
  --foil-deep: linear-gradient(100deg, #5e3f10 0%, #a87a2c 24%, #e7c676 44%, #8f6522 64%, #c9a050 82%, #5e3f10 100%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--velvet) 0 0 / 360px, #4a0614;
  color: #f0dcb2;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.6;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {   /* soft pool of light on the table */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(110% 70% at 50% 35%, rgba(255, 190, 170, .07), transparent 50%, rgba(10, 0, 2, .5) 100%);
}
body.locked { overflow: hidden; height: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #e3c47e; outline-offset: 3px; }

/* ---------- type finishes ---------- */
.script { font-family: var(--script); font-weight: 400; line-height: 1.12; }
.caps { font-family: var(--caps); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.deva { font-family: var(--deva); }
.small { font-size: 13px; }
.title { font-size: clamp(32px, 9.4vw, 44px); text-wrap: balance; }
.lead { font-size: 17px; line-height: 1.55; max-width: 34ch; margin: 12px auto 0; text-wrap: pretty; }
@keyframes goldshift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.foil, .foil-paper, .gold {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%; padding-inline: .12em;
  animation: goldshift 7s ease-in-out infinite alternate;
}
.foil { background-image: var(--foil); filter: drop-shadow(0 1px 0 rgba(30, 0, 6, .9)) drop-shadow(0 -.5px 0 rgba(255, 236, 190, .35)); }
.foil-paper, .gold { background-image: var(--foil-deep); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .75)) drop-shadow(0 1px 1.2px rgba(90, 55, 10, .35)); }
.ink { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.ink-gold { color: #8a6420; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.on-velvet { color: #ecd7ad; }

.chev {
  display: block; width: 10px; height: 10px; margin: 0 auto 10px;
  border-left: 1.2px solid currentColor; border-top: 1.2px solid currentColor;
  transform: rotate(45deg);
  animation: nudge 2.2s ease-in-out infinite;
}
.chev.down { transform: rotate(225deg); margin: 6px auto 0; animation-name: nudgeDown; }
@keyframes nudge { 50% { translate: 0 -5px; } }
@keyframes nudgeDown { 50% { translate: 0 5px; } }

/* ---------- opening: a laser-cut lotus gatefold on the velvet table, opening onto a pop-up paper palace ----------
   The palace is six paper layers at real depths, so they slide against each other as the card tilts. */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: max(18px, 3svh); overflow: hidden;
  background: var(--velvet) 0 0 / 360px, #4a0614; transition: opacity .8s ease; }
.intro::before { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .35s ease;
  background: radial-gradient(70% 50% at 50% 46%, rgba(255, 196, 160, .18), transparent 70%), radial-gradient(130% 95% at 50% 50%, transparent 52%, rgba(12, 0, 4, .6)); }
.no-js .intro { display: none; }
.op-head { position: relative; text-align: center; line-height: 1.15; transition: opacity .6s ease, transform .45s cubic-bezier(.5, 0, .9, .5); }
.op-head .deva { margin: 0; font-size: clamp(14px, 4vw, 19px); letter-spacing: .06em; }
.op-names { margin: 0; font-size: clamp(30px, 9.4vw, 46px); }
.op-names .amp { font-size: .7em; }
/* --fx/--fy: the camera's aim inside the palace arch; it is also the vanishing point, so depth compensation stays exact */
.opcard { --P: 1000; --fx: 50.8%; --fy: 46%; position: relative; width: min(88vw, calc(73svh * 1128 / 2016), 470px); aspect-ratio: 1128 / 2016; perspective: 1000px; perspective-origin: var(--fx) var(--fy); cursor: pointer; }
.op-shadow { position: absolute; inset: 1.5% 2%; border-radius: 4px; box-shadow: 0 22px 40px rgba(10, 0, 3, .7), 0 6px 12px rgba(10, 0, 3, .5); transform: translateY(6px); }
.dio { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: var(--fx) var(--fy); transform: translateZ(calc(var(--cz, 0) * 1px)) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); }
.ly { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; transform-origin: var(--fx) var(--fy);
  transform: translateZ(calc(var(--z) * 1px)) scale(calc((var(--P) - var(--z)) / var(--P))); }
.ly-back { scale: .985; }
/* while the gatefold is shut, nothing behind it exists (no peeking around the doors when the card tilts) */
.intro:not(.open) .ly { visibility: hidden; }
/* cut-outs lie folded flat until the gatefold opens, then spring upright like a pop-up card */
/* (the hinge sits at each cut-out's base; scaling stays centred so the depth compensation holds) */
.pop { --sc: calc((var(--P) - var(--z)) / var(--P));
  transform: translateZ(calc(var(--z) * 1px)) scale(var(--sc)) translateY(calc(var(--oy) - var(--fy))) rotateX(0deg) translateY(calc(var(--fy) - var(--oy)));
  transition: transform 1.15s cubic-bezier(.3, 1.5, .5, 1) calc(var(--pd, 0s) + .25s), opacity .6s ease; }
.intro:not(.open) .pop { transform: translateZ(calc(var(--z) * 1px)) scale(var(--sc)) translateY(calc(var(--oy) - var(--fy))) rotateX(84deg) translateY(calc(var(--fy) - var(--oy))); }
.gf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: var(--fx) var(--fy); transform: translateZ(calc(var(--z) * 1px)) scale(calc((var(--P) - var(--z)) / var(--P))); }
.gf-leaf { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transition: transform 2s cubic-bezier(.62, .02, .22, 1); }
.gf-l { left: 0; transform-origin: 0 50%; }
.gf-r { right: 0; transform-origin: 100% 50%; }
.gf-front, .gf-back { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity .5s ease; }
.gf-back { transform: rotateY(180deg); background: var(--paper) 0 0 / 240px, #f4ecdc;
  box-shadow: inset 0 0 0 9px #f4ecdc, inset 0 0 0 10px rgba(160, 122, 55, .85), inset 0 0 0 14px #f4ecdc, inset 0 0 0 15px rgba(160, 122, 55, .55), inset 0 0 40px rgba(120, 80, 40, .25); }
.gf-sheen { position: absolute; inset: 0; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 210, .85) 46%, rgba(255, 255, 255, .95) 50%, rgba(255, 244, 210, .85) 54%, transparent 70%) no-repeat;
  background-size: 300% 100%; animation: gfsheen 5s ease-in-out infinite; }
.gf-r .gf-sheen { animation-delay: .35s; }
@keyframes gfsheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }
.intro.open .gf-l { transform: rotateY(-158deg); }
.intro.open .gf-r { transform: rotateY(158deg); transition-delay: .06s; }
.intro.open .gf-sheen { display: none; }
.gf-glow { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 170, .55), rgba(255, 200, 150, .18) 40%, transparent 68%); mix-blend-mode: screen; animation: gfglow 2.6s ease-in-out infinite; transition: opacity .4s ease; }
@keyframes gfglow { 50% { opacity: .35; transform: scale(.88); } }
.op-glints { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s ease; }
.intro.open .gf-glow, .intro.open .op-glints { opacity: 0; }
/* entering: a real camera push (app.js moves the whole diorama toward the lens) through the palace arch;
   the arch is a window onto the invitation itself, so there is no fade, only the push */
.intro.zoom { background: transparent; }
.intro.zoom::before { opacity: 0; }
.intro.zoom .ly-garden { opacity: 0; transition: opacity .28s ease; }
.intro.zoom .ly-couple { transform: translateZ(calc(var(--z) * 1px)) scale(var(--sc)) translateY(calc(var(--oy) - var(--fy))) rotateX(0deg) translateY(calc(var(--fy) - var(--oy) + 110%));
  transition: transform .7s cubic-bezier(.45, 0, .85, .45); }
.intro.zoom .op-head { transform: translateY(-45vh); }
.intro.zoom .door-tap { transform: translateY(45vh); transition: transform .45s cubic-bezier(.5, 0, .9, .5); }
.rose-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rose-fall i {
  position: absolute; left: var(--x); top: -4%; width: calc(11px * var(--s)); aspect-ratio: 1 / 1.25;
  border-radius: 70% 20% 70% 30%; background: radial-gradient(120% 90% at 30% 25%, #ff6b7d, #c0102e 55%, #6e0016);
  box-shadow: inset -2px -3px 4px rgba(60, 0, 10, .45); opacity: .92;
  animation: petal var(--t) linear infinite; animation-delay: var(--d);
}
@keyframes petal {
  0% { transform: translate(0, 0) rotate(0deg) rotateX(0deg); }
  25% { transform: translate(3vw, 28vh) rotate(90deg) rotateX(60deg); }
  50% { transform: translate(-2vw, 56vh) rotate(180deg) rotateX(0deg); }
  75% { transform: translate(3vw, 84vh) rotate(270deg) rotateX(60deg); }
  100% { transform: translate(0, 112vh) rotate(360deg) rotateX(0deg); }
}
.door-tap {
  position: relative; z-index: 4; cursor: pointer;
  padding: 10px 20px 11px 24px; border-radius: 999px; border: 0;
  background: rgba(40, 6, 12, .8); box-shadow: 0 0 0 1px rgba(232, 199, 122, .75), 0 6px 18px rgba(0, 0, 0, .5);
  font-family: var(--caps); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; color: #f2d896;
  transition: opacity .4s ease;
}
.door-tap .chev { display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; vertical-align: middle; }
.intro.open:not(.ready) .door-tap { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rose-fall { display: none; } .gf-sheen, .gf-glow { animation: none; } }

/* wax seal */
.seal {
  position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 7px rgba(30, 5, 8, .55)) drop-shadow(0 1px 1px rgba(30, 5, 8, .5));
  transition: transform .4s ease, filter .4s ease, opacity .5s ease; z-index: 5;
}
.seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal .mono { font-family: var(--script); }
.seal .caps-svg { font-family: var(--caps); font-weight: 500; }
.seal::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(232, 199, 122, .75); animation: ring 2.6s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.seal:hover { transform: translate(-50%, -50%) scale(1.04); }
.env.opening .seal { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 0 10px rgba(255, 215, 140, .95)) drop-shadow(0 0 26px rgba(255, 180, 90, .7)); }
.env.opening .seal::after { display: none; }
.env.open .seal { opacity: 0; transform: translate(-50%, -50%) scale(2.2); transition: transform .7s cubic-bezier(.5, 0, .3, 1), opacity .5s ease .15s; }
.env-hint {
  position: absolute; left: 50%; top: 63%; translate: -50% 0; padding: 8px 16px 9px 20px; border-radius: 999px;
  background: rgba(62, 4, 16, .82); box-shadow: 0 0 0 1px rgba(232, 199, 122, .55);
  font-family: var(--caps); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
  color: #f0d495; z-index: 4; transition: opacity .3s;
}
.env-hint .chev { display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; vertical-align: middle; }
.env.opening .env-hint { opacity: 0; }

/* ---------- the table and its cards ---------- */
.table { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding-bottom: 30px; }
.scene { position: relative; display: grid; justify-items: center; gap: 36px; padding: 30px 0; perspective: 1300px; }
.scene-cover { min-height: 100vh; min-height: 100svh; align-content: center; gap: 18px; padding-top: max(16px, 3svh); transition: transform 1.1s cubic-bezier(.25, .6, .25, 1); transform-origin: 50% 42%; }
/* waits small and far behind the palace arch; the camera push brings it up to full size */
.js .scene-cover.pre { transform: scale(.78); }

.card {
  position: relative; width: min(92vw, 440px);
  container-type: inline-size;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.card .face {
  position: relative; z-index: 2; width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 1.5px 0 var(--edge, #2a0309)) drop-shadow(0 26px 26px rgba(0, 0, 0, .5)) drop-shadow(0 6px 7px rgba(0, 0, 0, .35));
}
.win { position: absolute; z-index: 1; overflow: hidden; background: #1a0604; }
.win .paint { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; }
.sheen {   /* light gliding across the card as it moves */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, transparent calc(var(--sh, 40%) - 22%), rgba(255, 248, 230, .55) var(--sh, 40%), transparent calc(var(--sh, 40%) + 22%));
  mix-blend-mode: soft-light;
  -webkit-mask: var(--face-mask) center / 100% 100% no-repeat; mask: var(--face-mask) center / 100% 100% no-repeat;
}

/* cover card: velvet with the gold jharokha window */
.cover-card { --edge: #2a0309; --face-mask: url("assets/card/cover-card.webp?v=20"); }
.cc-win { left: 13%; top: 10.3%; width: 74%; height: 59%; }
.cc-win .paint { object-position: 50% 62%; }
.cc-finial { --s: 22cqw; position: absolute !important; left: 50%; top: 7.4%; translate: -50% -50%; z-index: 4; }
.cc-text { position: absolute; z-index: 4; left: 10%; right: 10%; top: 71.6%; height: 17.6%; display: grid; place-content: center; gap: .6cqw; }
.cc-text .deva { font-size: 4.4cqw; letter-spacing: .05em; }
.cc-names { font-size: 12.5cqw; line-height: 1.05; white-space: nowrap; }
.cc-names .amp { font-size: .62em; }
.cc-date { position: absolute; z-index: 4; left: 22%; right: 22%; top: 92.3%; font-size: 2.7cqw; letter-spacing: .18em; white-space: nowrap; }
.cc-close { font-size: 9.2cqw; }
.cc-sign { font-size: 3.4cqw; letter-spacing: .3em; margin-top: 1.4cqw; }
.scroll-cue { text-decoration: none; color: #e9cf96; }
.scroll-cue .script { font-size: 24px; }

/* invitation card: cotton paper with the gold-foil arch */
.invite-card { --edge: #c4b08a; --face-mask: url("assets/card/invite-card.webp?v=20"); }
.ic-text {
  position: absolute; z-index: 4; left: 14%; right: 14%; top: 28.4%; bottom: 7.4%;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
}
.ic-text .deva { font-size: 4.3cqw; }
.ic-tag { font-size: 7.6cqw; }
.ic-lead { font-size: 4.05cqw; line-height: 1.5; }
.ic-names { font-size: 11.5cqw; white-space: nowrap; }
.ic-names .amp { font-size: .6em; }
.ic-small { font-size: 3.5cqw; line-height: 1.45; color: var(--ink-soft); }
.ic-div { width: 26cqw; color: #a07a37; }
.ic-fam { display: grid; gap: 2.4cqw; }
.ic-fam .caps { font-size: 2.5cqw; color: var(--ink-soft); }
.ic-fam p { font-size: 3.9cqw; line-height: 1.3; }

/* event insert cards */
.event-card { --edge: #c4b08a; --face-mask: url("assets/card/event-card.webp?v=20"); width: min(90vw, 420px); }
.ec-win { left: 8.6%; top: 6.8%; width: 82.8%; height: 50.2%; }
.ec-text { position: absolute; z-index: 4; left: 8%; right: 8%; top: 60%; bottom: 5%; display: grid; place-content: center; gap: 1cqw; }
.ec-text .caps { font-size: 2.8cqw; color: var(--ink-soft); }
.ev-name { font-size: 11cqw; line-height: 1.1; }
.ev-name .deva { font-size: .38em; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); margin-left: .3em; }
.ec-time { font-size: 4.3cqw; }
.ec-desc { font-size: 3.5cqw; font-style: italic; line-height: 1.35; padding: 0 7%; }
.ev-name .deva { white-space: nowrap; }
.table-sub { text-align: center; margin: -.4rem 0 1.2rem; font-size: .78rem; letter-spacing: .22em; }
.day-head { text-align: center; margin: 2.6rem 0 .2rem; }
.day-head:first-of-type { margin-top: .4rem; }
.day-no { margin: 0; font-size: .7rem; letter-spacing: .32em; opacity: .85; }
.day-title { margin: .1rem 0 .3rem; font-weight: 400; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.15; }
.day-head .table-sub { margin: 0 0 1rem; }
.table-title { position: relative; z-index: 1; }

/* flexible cards: rendered texture + embossed gold border image */
.cut-card {
  padding: clamp(26px, 7vw, 38px) clamp(20px, 5vw, 30px);
  border: 26px solid transparent;
  border-image: url("assets/card/gold-border.webp?v=20") 72 / 26px round;
  background-origin: border-box; background-clip: border-box;
  box-shadow: 0 2px 0 var(--edge), 0 30px 40px -18px rgba(0, 0, 0, .65), 0 8px 12px -6px rgba(0, 0, 0, .4);
}
.cut-card .sheen { inset: -26px; -webkit-mask: none; mask: none; }
.velvet-card { --edge: #2a0309; background: var(--velvet) 0 0 / 300px, #5e0a1c; }
.paper-card { --edge: #c4b08a; background: var(--paper) 0 0 / 360px, #f4ecd9; color: var(--ink); }
.paper-card .lead { color: var(--ink); }

/* countdown */
.count { display: flex; justify-content: center; align-items: flex-start; gap: clamp(6px, 2.4vw, 14px); margin: 18px auto 24px; font-variant-numeric: tabular-nums; }
.unit { display: grid; gap: 4px; min-width: 0; }
.unit b { font-weight: 400; font-size: clamp(36px, 11vw, 52px); line-height: 1; }
.unit span { font-size: 13px; color: #d9c196; }
.count i { font-style: normal; font-size: clamp(28px, 8.5vw, 40px); color: #e3c47e; line-height: 1.1; }
.unit b.tick { animation: tick .55s cubic-bezier(.2, .8, .2, 1), goldshift 7s ease-in-out infinite alternate; }
@keyframes tick { from { transform: translateY(-38%); opacity: .15; } to { transform: none; opacity: 1; } }

.btn-line, .btn-gold {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 999px; transition: transform .25s ease, background .25s;
}
.btn-line { color: #f0d698; border: 1px solid rgba(233, 201, 126, .6); }
.btn-line:hover { background: rgba(233, 201, 126, .12); }
.btn-gold {
  color: #fff8ea; border: 0; background: linear-gradient(180deg, #c49a50, #8d6a2d);
  box-shadow: 0 6px 16px -6px rgba(90, 60, 20, .6), inset 0 1px 0 rgba(255, 240, 200, .5), inset 0 -1px 0 rgba(60, 30, 0, .4);
}
.btn-gold:hover { transform: translateY(-1px); }

/* venue */
.venue-name { font-size: 22px; margin-top: 8px; }
.addr { font-size: 15px; opacity: .85; }
.palace-img { width: 100%; height: auto; margin: 16px auto 0; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.map-frame { position: relative; width: 100%; aspect-ratio: 1 / .9; margin: 18px auto 22px; padding: 6px; background: linear-gradient(135deg, #f6df9c, #b98b3c 28%, #f1d58c 50%, #a5782d 74%, #e9cb7c); box-shadow: 0 10px 20px -10px rgba(60, 30, 10, .6); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(.2) saturate(.85); background: #e9e2d3; }

/* dress code */
.dress { list-style: none; padding: 0; margin: 16px auto 0; display: grid; gap: 12px; max-width: 290px; text-align: left; }
.dress li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; font-size: 16px; }
.dress b { font-weight: 400; font-size: 18px; margin-right: 6px; }
.sw { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 2px #f6eedd, 0 0 0 3px rgba(160, 122, 55, .6), 0 2px 3px rgba(60, 30, 0, .4); }
.ic-div { display: block; margin: 20px auto; width: 110px; color: #a07a37; }

/* rsvp */
.rsvp-seal { position: relative; left: auto; top: auto; transform: none; display: block; width: 128px; margin: 24px auto 6px; }
.rsvp-seal:hover { transform: translateY(-2px) scale(1.03); }
.rsvp-seal::after { inset: -10%; }
.tap-hint { color: #e3c47e; }
.tap-hint .script { font-size: 26px; }
.tap-hint .chev { margin-bottom: 6px; }

/* couple photo (shown when assets/couple.jpg exists) */
.photo { margin: 10px auto 0; }
.photo-wrap { position: relative; width: min(70vw, 320px); aspect-ratio: 4 / 5; margin: 0 auto; }
.photo-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--jharokha) center / 100% 100% no-repeat; mask: var(--jharokha) center / 100% 100% no-repeat; }
.photo-frame { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; overflow: visible; pointer-events: none; }
.photo-frame path { fill: none; stroke: #e3c47e; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.photo-frame path.outer { stroke-width: .8; stroke-opacity: .7; }

/* footer on the table */
.foot { position: relative; z-index: 1; padding: 30px 24px 50px; color: #e8d2a6; }
.foot .caps { color: #d9c196; }
.contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 10px; font-size: 16px; }
.contacts a { color: #e3c47e; text-decoration: none; font-variant-numeric: tabular-nums; }
.welcome { margin-top: 24px; }
.welcome .deva { font-size: 19px; }
.hashtag { font-size: 34px; margin-top: 16px; }
.credit { font-size: 11px; color: #c9ad86; margin-top: 22px; opacity: .75; }

/* shamsa medallion with monogram */
.shamsa { position: relative; width: var(--s, 120px); aspect-ratio: 1; border-radius: 50%; }
.shamsa img { width: 100%; height: 100%; animation: spin 240s linear infinite; filter: drop-shadow(0 6px 10px rgba(30, 5, 0, .6)); }
.shamsa .mono {
  position: absolute; inset: 27%; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; padding-top: .08em;
  background: radial-gradient(circle at 40% 35%, #8e1d30, #5c0e1b 70%);
  box-shadow: 0 0 0 1.5px #e3c47e, 0 0 0 3.5px #5c0e1b, 0 0 0 4.5px #e3c47e, 0 2px 8px rgba(0, 0, 0, .4);
  font-family: var(--script); font-size: calc(var(--s, 120px) * .2); line-height: 1; color: #f2d896;
}
.shamsa .mono i { font-style: normal; font-size: .62em; margin-inline: .04em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* twinkling glints */
.glint {
  position: absolute; z-index: 5; width: var(--g, 14px); height: var(--g, 14px); pointer-events: none;
  translate: -50% -50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, transparent 40%), linear-gradient(90deg, transparent 46%, rgba(255, 250, 225, .95) 50%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 250, 225, .95) 50%, transparent 54%);
  filter: drop-shadow(0 0 3px rgba(255, 220, 140, .9));
  animation: twinkle var(--dur, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* entrance + ink */
.js .rise { opacity: 0; transform: translateY(14px); }
body.revealing .rise { animation: rise 1.5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .write { clip-path: inset(-25% 102% -25% -6%); }
.js .write.inked { animation: ink 1.9s cubic-bezier(.55, .05, .3, 1) forwards; }
@keyframes ink { to { clip-path: inset(-25% -6% -25% -6%); } }

/* RSVP dialog */
.rsvp { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(92vw, 430px); max-height: 90vh; max-height: 90svh; overflow: visible; }
.rsvp::backdrop { background: rgba(30, 2, 8, .6); backdrop-filter: blur(3px); }
.rsvp[open] { animation: pop .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.rsvp-inner {
  position: relative; max-height: 90vh; max-height: 90svh; overflow: auto; padding: 38px 26px 30px;
  border: 22px solid transparent; border-image: url("assets/card/gold-border.webp?v=20") 72 / 22px round;
  background: var(--paper) 0 0 / 360px, #f4ecd9; background-origin: border-box;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.rsvp-x { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; z-index: 1; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 50%; }
#rsvp-title { font-size: 44px; }
.rsvp form { display: grid; gap: 18px; text-align: left; }
.rsvp form > .script, .rsvp form > .caps { text-align: center; }
.rsvp form > .caps { margin-top: -14px; color: var(--ink-soft); }
.field { display: grid; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, legend { font-family: var(--caps); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding: 0; }
.field input:not([type]), .field input[type=tel], .field select, .field textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(160, 122, 55, .5); padding: 7px 2px; border-radius: 0; outline: none; resize: vertical; }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--gold) 50%) right 8px center / 6px 6px no-repeat, transparent; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.choice { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.choice legend { width: 100%; margin-bottom: 6px; }
.choice label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--serif); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.choice input { accent-color: #6e1422; width: 17px; height: 17px; margin: 0; }
.rsvp .btn-gold { justify-self: center; margin-top: 4px; }
.rsvp-err { color: #8c1d2c; font-size: 14px; text-align: center; }
.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 12px; }
.rsvp { color-scheme: light; }
.rsvp input[type=radio] { accent-color: #8c1d2c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rsvp .btn-gold[disabled] { opacity: .65; cursor: progress; }
.rsvp button.link { all: unset; cursor: pointer; color: var(--gold-lo); text-decoration: underline; text-underline-offset: 3px; }
.rsvp-thanks { padding: 10px 0; }
.rsvp-thanks .small { margin-top: 16px; color: var(--ink-soft); }

/* music + petals */
.music {
  position: fixed; z-index: 30; right: max(16px, calc((100vw - 560px) / 2 + 16px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #f6e6c4;
  background: radial-gradient(circle at 35% 30%, #8f2233, #6e1422 60%, #4a0b15); box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .55), 0 0 0 1px rgba(227, 196, 126, .5);
}
.music svg { width: 22px; height: 22px; fill: currentColor; grid-area: 1 / 1; }
.music .i-pause { display: none; }
.music.playing .i-pause { display: block; }
.music.playing .i-play { display: none; }
.petals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .js .rise { opacity: 1; transform: none; }
  .js .write { clip-path: none; }
  .glint { display: none; }
}

/* ---------- the cover painting comes alive: flickering diyas, shimmering pool, breathing sunset, rising embers ---------- */
.paint-wrap { position: absolute; left: 0; top: 62%; width: 100%; aspect-ratio: 752 / 1344; translate: 0 -62%; will-change: transform; }
.paint-wrap .paint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; animation: drift 22s ease-in-out infinite alternate; transform-origin: 50% 65%; }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1.2%); } }
.alive { position: absolute; inset: 0; pointer-events: none; animation: drift 22s ease-in-out infinite alternate; transform-origin: 50% 65%; }
.alive .glow { position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 214, 150, .5), rgba(255, 170, 90, .14) 35%, transparent 62%); mix-blend-mode: screen; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(1.06); } }
.alive .rays { position: absolute; left: 50%; top: 41%; width: 220%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 170, .16) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 6%, transparent 40%); mask: radial-gradient(circle, #000 6%, transparent 40%);
  mix-blend-mode: screen; animation: rays 40s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }
.alive .pool { position: absolute; left: 14%; right: 14%; top: 64%; bottom: 0;
  background: repeating-linear-gradient(178deg, transparent 0 7px, rgba(255, 228, 160, .55) 8px, transparent 10px) 0 0 / 100% 40px;
  -webkit-mask: radial-gradient(70% 90% at 50% 70%, #000 30%, transparent 75%); mask: radial-gradient(70% 90% at 50% 70%, #000 30%, transparent 75%);
  mix-blend-mode: soft-light; filter: blur(.6px); opacity: .7; animation: ripple 5s linear infinite; }
@keyframes ripple { to { background-position: 30px 40px; } }
.alive .diya { position: absolute; width: var(--sz); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 210, .95), rgba(255, 190, 90, .55) 28%, rgba(255, 140, 40, .15) 55%, transparent 70%);
  mix-blend-mode: screen; animation: flick var(--t) ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes flick { 0% { opacity: .55; transform: scale(.82); } 40% { opacity: 1; transform: scale(1.06); } 70% { opacity: .7; transform: scale(.92); } 100% { opacity: .95; transform: scale(1.12); } }
.alive .ember { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255, 170, 70, .8);
  animation: ember var(--t) linear infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -9cqw); } }

@media (prefers-reduced-motion: reduce) { .alive { display: none; } .paint-wrap .paint { animation: none; } }