/* ===== Invitation pages: fixed 540 x 960 (9:16), exported at 2x = 1080 x 1920 ===== */

.page {
  --bg: #fff; --ink: #222; --accent: #8c2f39; --muted: #777;
  --display: 'Cormorant Garamond', serif; --script: 'Great Vibes', cursive; --body: 'Cormorant Garamond', serif;
  --pad-y: 120px; --pad-x: 80px;
  width: 540px; height: 960px; position: relative; overflow: hidden;
  background: var(--bg); color: var(--ink); font-family: var(--body);
  text-align: center; box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.pg-bg, .pg-fg { position: absolute; inset: 0; pointer-events: none; }
.pg-fg { z-index: 2; }
.orn { position: absolute; }
.orn > svg { display: block; width: 100%; height: 100%; }
.orn > svg[width] { height: auto; }
.pg-inner {
  position: absolute; inset: var(--pad-y) var(--pad-x); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.ph { opacity: .42; font-style: italic; }
.kicker, .tagline, .body-text, .blessing, .closing, .ev-note { text-wrap: balance; }
.emblem { width: 58px; height: 62px; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.emblem svg { width: 100%; height: 100%; }
.emblem-glyph { font-family: 'Tiro Devanagari Hindi', serif; font-size: 50px; line-height: 1; }
.mantra { font-family: 'Tiro Devanagari Hindi', 'Noto Sans Gurmukhi', serif; color: var(--accent); font-size: 17px; line-height: 1.55; margin-bottom: 16px; max-width: 360px; }
.kicker { font-family: var(--display); letter-spacing: .22em; font-size: 11.5px; line-height: 1.6; text-transform: uppercase; color: var(--muted); margin: 8px 0 12px; max-width: 330px; }
.names { display: flex; flex-direction: column; align-items: center; }
.names .n { font-family: var(--script); line-height: 1.12; color: var(--accent); white-space: nowrap; padding: 0 6px; }
.names .amp { font-family: var(--display); font-size: 26px; line-height: 1; margin: 2px 0; color: var(--ink); font-style: italic; }
.date { font-family: var(--display); letter-spacing: .16em; font-size: 19px; margin-top: 22px; }
.loc { letter-spacing: .26em; font-size: 11.5px; text-transform: uppercase; margin-top: 8px; color: var(--muted); }
.tagline { font-style: italic; font-size: 17px; margin-top: 20px; max-width: 320px; line-height: 1.45; }
.divider { width: 170px; height: 18px; color: var(--accent); margin: 14px auto; flex-shrink: 0; }
.h2 { font-family: var(--display); font-size: 30px; color: var(--accent); line-height: 1.2; }
.p-invite .h2 { font-family: 'Tiro Devanagari Hindi', var(--display); }
.body-text { font-size: 18px; line-height: 1.55; max-width: 360px; margin: 0; }
.fams { margin: 26px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fam-name { font-family: var(--script); font-size: 40px; color: var(--accent); line-height: 1.15; }
.fam-rel { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.fam-par, .fam-gp { font-size: 18px; line-height: 1.4; }
.fam-gp { font-size: 15px; font-style: italic; }
.fam-amp { font-family: var(--display); font-size: 22px; font-style: italic; margin: 6px 0; }
.blessing { font-style: italic; font-size: 16px; max-width: 330px; margin: 14px 0 0; color: var(--muted); }

.mini { font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.ev-name { font-family: var(--script); color: var(--accent); line-height: 1.15; }
.ev-note { font-style: italic; font-size: 17px; max-width: 320px; margin-top: 6px; }
.ev-when { font-family: var(--body); font-size: 20px; letter-spacing: .04em; line-height: 1.45; }
.ev-when div + div { font-size: 17px; letter-spacing: .14em; color: var(--accent); }
.ev-venue { font-family: var(--display); font-size: 24px; margin-top: 18px; color: var(--accent); line-height: 1.25; }
.ev-addr { font-size: 16px; margin-top: 4px; color: var(--muted); line-height: 1.4; }
.ev-dress { margin-top: 26px; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ev-dress .lbl, .rsvp-by { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ev-dress .sw { display: flex; gap: 8px; }
.ev-dress .sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg); outline: 1px solid var(--accent); display: block; }
.rsvp-by { margin-top: 14px; }
.contacts { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.ct { display: flex; gap: 10px; justify-content: center; }
.ct b { font-weight: 600; }
.regards { margin-top: 22px; }
.reg-txt { font-family: var(--display); font-size: 21px; color: var(--accent); }
.closing { font-style: italic; font-size: 16px; max-width: 320px; margin: 18px 0 0; }
.mono { margin-top: 22px; width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--script); font-size: 34px; color: var(--accent); }
.mono i { font-family: var(--display); font-size: 16px; font-style: italic; color: var(--ink); }
.hashtag { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Highlight what the couple is editing, in the live preview only */
.pv-screen [data-f].hl { outline: 2px dashed #3b82f6; outline-offset: 4px; border-radius: 4px; }

/* ---------- Rajmahal ---------- */
.tpl-rajmahal { --bg: #5b1020; --ink: #f6e7c8; --accent: #e8c06a; --muted: #d4b086; --display: 'Cinzel', serif; --script: 'Great Vibes', cursive; --body: 'Cormorant Garamond', serif; }
.tpl-rajmahal { background: radial-gradient(ellipse at 50% 40%, #6e1828 0%, #5b1020 55%, #470b18 100%); }
.tpl-rajmahal.p-cover { --pad-y: 230px; --pad-x: 110px; }
.tpl-rajmahal.p-cover .pg-inner { top: 250px; bottom: 120px; }

/* ---------- Sheesh Mahal ---------- */
.tpl-sheeshmahal { --bg: #f8f1e3; --ink: #1f2b4d; --accent: #9e7430; --muted: #6b7088; --display: 'Cormorant Garamond', serif; --script: 'Pinyon Script', cursive; }
.tpl-sheeshmahal.p-cover .pg-inner { top: 250px; bottom: 120px; left: 100px; right: 100px; }
.tpl-sheeshmahal .names .n { color: var(--ink); }
.tpl-sheeshmahal .date { color: var(--accent); }

/* Marcellus draws '1' like 'I', so dates use the body serif */
.tpl-navratna .date, .tpl-kalamkari .date { font-family: var(--body); font-size: 21px; }

/* ---------- Navratna ---------- */
.tpl-navratna { --bg: #0f3d33; --ink: #f3ead2; --accent: #e2c27a; --muted: #a9c9b8; --display: 'Marcellus', serif; --script: 'Great Vibes', cursive; }
.tpl-navratna { background: radial-gradient(circle at 50% 45%, #145244 0%, #0f3d33 50%, #0a2c25 100%); }

/* ---------- Bandhani ---------- */
.tpl-bandhani { --bg: #a5113a; --ink: #4e0b1f; --accent: #b0123c; --muted: #8a4b2a; --display: 'Rozha One', serif; --script: 'Rozha One', serif; --body: 'Cormorant Garamond', serif; --pad-y: 58px; --pad-x: 42px; }
/* --panel: surface behind website sections where the background is too busy for text */
.tpl-bandhani { --panel: #fff4e0; --on-accent: #fff; }
.tpl-bandhani .pg-inner { background: #fff4e0; border-radius: 26px; padding: 36px 34px; outline: 3px dotted #f2a516; outline-offset: -12px; box-shadow: 0 0 0 6px #f2a516; }
.tpl-bandhani .names .n { line-height: 1.05; }
.tpl-bandhani .names .amp { font-family: 'Kalam', cursive; color: #e07b00; }
.tpl-bandhani .kicker { font-family: 'Kalam', cursive; letter-spacing: .06em; text-transform: none; font-size: 15px; color: #c25a00; }
.tpl-bandhani .fam-name, .tpl-bandhani .ev-name { font-family: 'Rozha One', serif; }
.tpl-bandhani .h2 { font-family: 'Rozha One', serif; }

/* ---------- Kalamkari ---------- */
.tpl-kalamkari { --bg: #f3e6cf; --ink: #2b1d14; --accent: #9c3d1f; --muted: #5d4a37; --display: 'Marcellus', serif; --script: 'Playfair Display', serif; --pad-x: 92px; }
.tpl-kalamkari { background: radial-gradient(ellipse at 50% 50%, #f7eedc 0%, #f3e6cf 60%, #e9d7b7 100%); }
.tpl-kalamkari .names .n, .tpl-kalamkari .fam-name, .tpl-kalamkari .ev-name { font-style: italic; }
.tpl-kalamkari .emblem { color: #1f3b2d; }

/* ---------- Gulmohar ---------- */
.tpl-gulmohar { --bg: #fdf0ea; --ink: #4a2a2a; --accent: #d0573f; --muted: #9a6f66; --display: 'Playfair Display', serif; --script: 'Great Vibes', cursive; }
.tpl-gulmohar { background: radial-gradient(circle at 85% 12%, #fbd9cc 0, transparent 34%), radial-gradient(circle at 10% 90%, #fde3d6 0, transparent 38%), #fdf0ea; }
.tpl-gulmohar .kicker { font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .08em; text-transform: none; font-size: 15px; }

/* ---------- Mogra ---------- */
.tpl-mogra { --bg: #e6ede3; --ink: #2f4a3a; --accent: #3e6b52; --muted: #6f8576; --display: 'Cormorant Garamond', serif; --script: 'Parisienne', cursive; }
.tpl-mogra { background: linear-gradient(180deg, #edf2ea 0%, #e2eadf 100%); }
.tpl-mogra.p-cover .pg-inner { top: 200px; }

/* ---------- Filmi ---------- */
.tpl-filmi { --bg: #f6c445; --ink: #1b1b3a; --accent: #e2366b; --muted: #3b3b6b; --display: 'Abril Fatface', serif; --script: 'Abril Fatface', serif; --body: 'Playfair Display', serif; --pad-x: 66px; }
.tpl-filmi { background: repeating-conic-gradient(from 0deg at 50% 46%, #f6c445 0deg 7deg, #f1b42f 7deg 14deg); }
.tpl-filmi { --panel: rgba(255, 248, 225, .94); --on-accent: #fff; }
.tpl-filmi .pg-inner { background: rgba(255, 248, 225, .92); border: 4px solid var(--ink); border-radius: 18px; padding: 30px 26px; box-shadow: 8px 8px 0 var(--ink); top: 92px; bottom: 92px; }
.tpl-filmi.p-cover .pg-inner { background: transparent; border: 0; box-shadow: none; }
.tpl-filmi .kicker { background: #1aa3a3; color: #fff; padding: 6px 16px; transform: rotate(-3deg); font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .16em; font-size: 11px; box-shadow: 3px 3px 0 var(--ink); }
.tpl-filmi .names .n, .tpl-filmi .ev-name { text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); letter-spacing: .02em; }
.tpl-filmi .names .amp { font-family: 'Kalam', cursive; color: var(--accent); font-size: 34px; font-style: normal; }
.tpl-filmi .date { background: var(--ink); color: #f6c445; padding: 6px 14px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .2em; font-size: 15px; }
.tpl-filmi.p-cover .loc, .tpl-filmi.p-cover .tagline { color: var(--ink); }
.tpl-filmi.p-cover .tagline { font-weight: 600; }
.tpl-filmi .fam-name { font-family: 'Abril Fatface', serif; font-size: 30px; }
.tpl-filmi .mono { font-family: 'Abril Fatface', serif; }

/* ---------- Kanjeevaram ---------- */
.tpl-kanjeevaram { --bg: #7a0c3e; --ink: #fbe7c6; --accent: #f0c35a; --muted: #f2b8c6; --display: 'Cinzel', serif; --script: 'Great Vibes', cursive; --pad-y: 140px; }
.tpl-kanjeevaram { background: radial-gradient(ellipse at 50% 50%, #8e1149 0%, #7a0c3e 55%, #5e0830 100%); }

/* ---------- Toran ---------- */
.tpl-toran { --bg: #fbe39a; --ink: #4a1d0a; --accent: #a8360f; --muted: #7a4a1a; --display: 'Rozha One', serif; --script: 'Great Vibes', cursive; --pad-y: 130px; }
.tpl-toran { background: radial-gradient(circle at 50% 45%, #fff0bf 0%, #fbe39a 55%, #f4cf6a 100%); }
.tpl-toran .h2 { font-family: 'Tiro Devanagari Hindi', serif; }