/* ============================================================
   Invitation templates — phone size 1080 x 1920 px (9:16)
   Structure (made by invite.js):
   .inv.itpl-x > .inv-orn, .inv-top, .inv-content > (.inv-deity .inv-heading .inv-host
     .inv-photo .inv-names .inv-div .inv-when .inv-venue .inv-funcs .inv-rsvp .inv-note), .inv-wm
   ============================================================ */
.inv {
  --fs: 1; --gold: #f6d488; --text: #fff4dc; --soft: rgba(255, 244, 220, .8);
  width: 1080px; height: 1920px; position: relative; overflow: hidden;
  font-family: "Hind", sans-serif; color: var(--text);
}
.inv * { box-sizing: border-box; }
.inv-orn, .inv-top { position: absolute; pointer-events: none; }
.inv-orn { inset: 0; }
.inv-content {
  position: absolute; inset: 0; padding: 190px 110px 130px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: calc(var(--fs) * 26px);
}
.inv-deity { font-size: calc(var(--fs) * 40px); color: var(--gold); }
.inv-heading { font: 600 calc(var(--fs) * 44px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.inv-host { font: 500 italic calc(var(--fs) * 38px)/1.4 "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: var(--soft); max-width: 820px; }
.inv-photo { width: calc(var(--fs) * 300px); height: calc(var(--fs) * 300px); border-radius: 50%; overflow: hidden; border: 8px solid var(--gold); flex: none; }
.inv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-fill { width: 100%; height: 100%; background-size: cover; background-position: center 25%; border-radius: inherit; }
:where(.inv-content) > :where(div) { line-height: 1.35; }
.inv-names { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.inv-names .n { font: 400 calc(var(--fs) * 150px)/1.05 "Great Vibes", "Tiro Devanagari Hindi", cursive; color: var(--gold); }
.inv-names .j { font: 600 calc(var(--fs) * 56px) "Cormorant Garamond", serif; color: var(--soft); margin: calc(var(--fs) * 4px) 0; }
.inv-div { width: 360px; height: 24px; background: radial-gradient(circle, var(--gold) 5px, transparent 6px) center / 36px 24px repeat-x; flex: none; }
.inv-when .d { font: 400 calc(var(--fs) * 58px)/1.2 "Rozha One", "Tiro Devanagari Hindi", serif; color: var(--text); }
.inv-when .t { font-size: calc(var(--fs) * 36px); color: var(--soft); }
.inv-label { font: 700 calc(var(--fs) * 24px) "Hind", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.inv-venue .v { font: 600 calc(var(--fs) * 44px)/1.25 "Cormorant Garamond", "Tiro Devanagari Hindi", serif; }
.inv-venue .a { font-size: calc(var(--fs) * 32px); color: var(--soft); white-space: pre-line; }
.inv-funcs { width: 100%; max-width: 780px; }
.inv-funcs .row { display: flex; justify-content: space-between; gap: 24px; font-size: calc(var(--fs) * 32px); padding: calc(var(--fs) * 10px) 0; border-bottom: 1px solid rgba(246, 212, 136, .35); text-align: left; }
.inv-funcs .row b { font-weight: 600; }
.inv-funcs .row span { color: var(--soft); text-align: right; }
.inv-rsvp { font-size: calc(var(--fs) * 32px); }
.inv-note { font: 500 italic calc(var(--fs) * 36px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: var(--gold); }
/* Hindi / Marathi text: no letter-spacing, it breaks joined letters */
.inv.deva-head .inv-heading { letter-spacing: .02em; font-family: "Rozha One", "Tiro Devanagari Hindi", serif; font-weight: 400; font-size: calc(var(--fs) * 56px); }
.inv.lang-in .inv-label { letter-spacing: 0; font-size: calc(var(--fs) * 30px); }
.inv-wm { position: absolute; inset: -300px; z-index: 5; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; align-items: center; justify-items: center; transform: rotate(-28deg); }
.inv-wm span { font: 700 46px "Hind", sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .16); white-space: nowrap; }

/* 1. Marigold (maroon with garland) */
.itpl-marigold { background: radial-gradient(ellipse at 50% 35%, #7a1538 0%, #4a0b24 55%, #2c0716 100%); }
.itpl-marigold .inv-top { left: 0; right: 0; top: 0; height: 170px; }
.itpl-marigold .inv-orn { inset: 40px; border: 3px solid #d4a440; border-radius: 18px; top: 150px; }

/* 2. Royal arch (navy & gold) */
.itpl-royal { --gold: #e3c06e; --text: #f4ecd8; --soft: rgba(244, 236, 216, .78); background: linear-gradient(180deg, #0d1838 0%, #152657 50%, #0d1838 100%); }
.itpl-royal .inv-orn { inset: 70px; border: 4px solid #e3c06e; border-radius: 470px 470px 24px 24px; }
.itpl-royal .inv-top { inset: 92px; border: 1.5px solid rgba(227, 192, 110, .55); border-radius: 450px 450px 16px 16px; }
.itpl-royal .inv-content { padding-top: 250px; }

/* 3. Pastel floral (blush) */
.itpl-pastel { --gold: #b5446e; --text: #4a2d3a; --soft: #7d5868; background: linear-gradient(180deg, #fff3f4 0%, #fde6ea 100%); }
.itpl-pastel .inv-div { background-image: radial-gradient(circle, #e89bb5 5px, transparent 6px); }
.itpl-pastel .inv-funcs .row { border-bottom-color: #f0c3d1; }
.itpl-pastel .inv-photo { border-color: #f1b6c8; }
.itpl-pastel .inv-wm span { color: rgba(0, 0, 0, .1); }

/* 4. Ivory (gold line, black serif) */
.itpl-ivory { --gold: #a17c2f; --text: #1f1a14; --soft: #5b5246; background: #fbf6ec; }
.itpl-ivory .inv-orn { inset: 56px; border: 2px solid #a17c2f; }
.itpl-ivory .inv-top { inset: 74px; border: 1px solid rgba(161, 124, 47, .5); }
.itpl-ivory .inv-names .n { font-family: "Cormorant Garamond", "Tiro Devanagari Hindi", serif; font-weight: 500; font-size: calc(var(--fs) * 120px); letter-spacing: .02em; }
.itpl-ivory .inv-funcs .row { border-bottom-color: #e6dac2; }
.itpl-ivory .inv-wm span { color: rgba(0, 0, 0, .1); }

/* 5. Mehndi (green & gold) */
.itpl-mehndi { --gold: #e7c565; --text: #f6f1df; --soft: rgba(246, 241, 223, .8); background: radial-gradient(ellipse at 50% 40%, #2a6a4f 0%, #1a4535 60%, #10301f 100%); }