/* =========================================================
   CIELITO — Bespoke Template Designs
   Each template is its own art-directed design (not a color swap).

   Templates use a base .invite shell with [data-template] modifier
   that swaps decorations, palette, type, and layout.

   Heavy use of inline SVG (as data: URIs) for crisp,
   scalable hand-illustrated details.
   ========================================================= */

/* ==========================================================
   1. CIELITO LINDO — Mexican sky-themed baby shower
   Reference: blue clouds + papel picado banner + scalloped detail card
   Palette: dusty blue, kraft tan, papel pastels, soft cream
   ========================================================== */

.invite[data-template="cielito"] {
  background:
    /* soft rolling hills at bottom */
    radial-gradient(60% 18% at 20% 100%, var(--pal-hill-1) 0%, transparent 65%),
    radial-gradient(70% 22% at 80% 100%, var(--pal-hill-2) 0%, transparent 68%),
    radial-gradient(50% 14% at 50% 100%, var(--pal-hill-1) 0%, transparent 70%),
    /* sun glow on horizon */
    radial-gradient(40% 12% at 70% 78%, rgba(244, 220, 165, 0.7) 0%, transparent 60%),
    /* sky gradient — palette driven */
    linear-gradient(180deg, var(--pal-bg) 0%, var(--pal-bg-2) 38%, color-mix(in srgb, var(--pal-bg-2) 40%, var(--pal-bg-3)) 70%, var(--pal-bg-3) 100%);
  color: var(--pal-text);
}

/* Decorative birds + flower hints at bottom — fills the bottom 25% */
.invite[data-template="cielito"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='xMidYEnd slice'><g opacity='0.85'><path d='M40 60 Q 48 52 56 60 Q 62 54 68 60' stroke='%234a82b6' stroke-width='1.2' fill='none' stroke-linecap='round'/><path d='M120 45 Q 126 38 132 45 Q 136 40 140 45' stroke='%234a82b6' stroke-width='1' fill='none' stroke-linecap='round' opacity='0.7'/><path d='M280 50 Q 288 42 296 50 Q 302 44 308 50' stroke='%234a82b6' stroke-width='1.2' fill='none' stroke-linecap='round'/></g><g opacity='0.6'><circle cx='60' cy='88' r='2.5' fill='%23d96a8c'/><circle cx='66' cy='86' r='2' fill='%23f4dca5'/><circle cx='72' cy='90' r='2.5' fill='%23d96a8c'/><path d='M64 92 L64 96' stroke='%236a8e4a' stroke-width='1'/><path d='M70 92 L70 96' stroke='%236a8e4a' stroke-width='1'/></g><g opacity='0.55'><circle cx='320' cy='86' r='2' fill='%23f4dca5'/><circle cx='326' cy='88' r='2.5' fill='%23d96a8c'/><circle cx='332' cy='84' r='2' fill='%23f4dca5'/><path d='M324 92 L324 96' stroke='%236a8e4a' stroke-width='1'/></g></svg>");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
.invite[data-template="cielito"] > * { position: relative; z-index: 2; }

/* Papel picado banner — repeating SVG hung at the top */
.invite[data-template="cielito"] .invite__topdeco {
  display: block;
  position: absolute;
  top: 4%; left: 50%;
  transform: translateX(-50%);
  width: 86%;
  height: 14%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110' preserveAspectRatio='none'><path d='M10 14 Q 150 60 300 30 T 590 14' stroke='%2382a8c9' stroke-width='1.5' fill='none' opacity='0.6'/><g font-family='serif' fill='%23ffffff' stroke='%2382a8c9' stroke-width='0.5'><g transform='translate(28 18) rotate(-12)'><rect width='52' height='66' rx='2' fill='%23a8c5e0'/><circle cx='26' cy='18' r='5' fill='%23ffffff'/><circle cx='14' cy='34' r='3.5' fill='%23ffffff'/><circle cx='38' cy='34' r='3.5' fill='%23ffffff'/><circle cx='26' cy='50' r='5' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23a8c5e0'/></g><g transform='translate(108 26) rotate(-7)'><rect width='52' height='66' rx='2' fill='%23e8d6b3'/><rect x='10' y='10' width='32' height='3' fill='%23ffffff'/><rect x='10' y='26' width='32' height='3' fill='%23ffffff'/><circle cx='26' cy='44' r='6' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23e8d6b3'/></g><g transform='translate(188 30) rotate(-3)'><rect width='52' height='66' rx='2' fill='%23c8dceb'/><circle cx='26' cy='20' r='4' fill='%23ffffff'/><circle cx='12' cy='32' r='3' fill='%23ffffff'/><circle cx='26' cy='32' r='3' fill='%23ffffff'/><circle cx='40' cy='32' r='3' fill='%23ffffff'/><circle cx='26' cy='44' r='4' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23c8dceb'/></g><g transform='translate(268 32)'><rect width='52' height='66' rx='2' fill='%23ddc9a3'/><path d='M26 8 L34 22 L48 24 L38 34 L40 48 L26 40 L12 48 L14 34 L4 24 L18 22 Z' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23ddc9a3'/></g><g transform='translate(348 30) rotate(3)'><rect width='52' height='66' rx='2' fill='%23a8c5e0'/><circle cx='26' cy='18' r='5' fill='%23ffffff'/><circle cx='14' cy='34' r='3.5' fill='%23ffffff'/><circle cx='38' cy='34' r='3.5' fill='%23ffffff'/><circle cx='26' cy='50' r='5' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23a8c5e0'/></g><g transform='translate(428 26) rotate(7)'><rect width='52' height='66' rx='2' fill='%23e8d6b3'/><circle cx='26' cy='20' r='6' fill='%23ffffff'/><path d='M14 38 Q 26 30 38 38 Q 26 46 14 38 Z' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23e8d6b3'/></g><g transform='translate(508 18) rotate(12)'><rect width='52' height='66' rx='2' fill='%23c8dceb'/><circle cx='26' cy='18' r='5' fill='%23ffffff'/><circle cx='14' cy='34' r='3.5' fill='%23ffffff'/><circle cx='38' cy='34' r='3.5' fill='%23ffffff'/><circle cx='26' cy='50' r='5' fill='%23ffffff'/><path d='M0 60 L52 60 L46 66 L40 60 L34 66 L28 60 L22 66 L16 60 L10 66 L4 60 Z' fill='%23c8dceb'/></g></g></svg>");
}

/* Fluffy clouds around the title */
.invite[data-template="cielito"] .invite__cloud {
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(60, 110, 160, 0.12));
  opacity: 0.95;
}
.invite[data-template="cielito"] .invite__cloud::before,
.invite[data-template="cielito"] .invite__cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.invite[data-template="cielito"] .invite__cloud--1 {
  top: 22%; left: 6%; width: 44px; height: 22px;
}
.invite[data-template="cielito"] .invite__cloud--1::before {
  width: 22px; height: 22px; top: -10px; left: 8px;
}
.invite[data-template="cielito"] .invite__cloud--1::after {
  width: 16px; height: 16px; top: -6px; left: 26px;
}
.invite[data-template="cielito"] .invite__cloud--2 {
  top: 28%; right: 4%; width: 52px; height: 24px;
}
.invite[data-template="cielito"] .invite__cloud--2::before {
  width: 26px; height: 26px; top: -14px; left: 10px;
}
.invite[data-template="cielito"] .invite__cloud--2::after {
  width: 18px; height: 18px; top: -8px; left: 30px;
}
.invite[data-template="cielito"] .invite__cloud--3 {
  top: 36%; left: 12%; width: 30px; height: 14px;
  opacity: 0.7;
}
.invite[data-template="cielito"] .invite__cloud--3::before {
  width: 16px; height: 16px; top: -8px; left: 6px;
}

/* Cielito Lindo title — big script italic in dusty blue */
.invite[data-template="cielito"] .invite__hero {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 4.8vw, 38px);
  letter-spacing: -0.02em;
  color: var(--pal-primary);
  line-height: 0.95;
  margin-top: 18%;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.invite[data-template="cielito"] .invite__hero .accent { color: var(--pal-primary-2); }

/* Scalloped cream "papel picado" content card */
.invite[data-template="cielito"] .invite__details {
  margin-top: 8%;
  width: 86%;
  background: var(--pal-surface);
  padding: 14px 14px 10px;
  position: relative;
  font-family: var(--font-body);
  color: var(--pal-text);
  border-radius: 4px;
}
/* Top + bottom scalloped edges via radial gradient */
.invite[data-template="cielito"] .invite__details::before,
.invite[data-template="cielito"] .invite__details::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background-image: radial-gradient(circle at 5px 0, var(--pal-surface) 5px, transparent 5.5px);
  background-size: 10px 10px; background-repeat: repeat-x;
}
.invite[data-template="cielito"] .invite__details::before {
  top: -10px;
}
.invite[data-template="cielito"] .invite__details::after {
  bottom: -10px;
  transform: scaleY(-1);
}
.invite[data-template="cielito"] .invite__lead {
  font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pal-accent); line-height: 1.4;
}
.invite[data-template="cielito"] .invite__names {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--pal-primary);
  margin: 4px 0 6px;
  line-height: 1;
}
.invite[data-template="cielito"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-text); font-weight: 600; line-height: 1.5;
}
.invite[data-template="cielito"] .invite__where {
  font-size: 8px; color: var(--pal-text-soft);
  margin-top: 4px; line-height: 1.4;
}
.invite[data-template="cielito"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-accent); margin-top: 4px;
}

/* ==========================================================
   2. HONEY BEAR — Classic Pooh-inspired storybook
   Reference: honeycomb top-left, hanging beehive top-right, watercolor pastels
   Palette: golden honey, soft cream, sage green, sky blue
   ========================================================== */

.invite[data-template="pooh"] {
  background: linear-gradient(180deg, var(--pal-bg-2) 0%, var(--pal-surface) 50%, var(--pal-bg-2) 100%);
  color: var(--pal-text);
}

/* Top-left honeycomb cluster */
.invite[data-template="pooh"] .invite__topdeco {
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 30%;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><defs><pattern id='hex' x='0' y='0' width='28' height='32' patternUnits='userSpaceOnUse'><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' opacity='0.85'/></pattern><radialGradient id='honeyGlow' cx='0.3' cy='0.3'><stop offset='0' stop-color='%23ffd76a' stop-opacity='0.95'/><stop offset='1' stop-color='%23ffd76a' stop-opacity='0'/></radialGradient></defs><path d='M-10 -10 L210 -10 L210 80 Q 140 100 80 90 Q 30 80 -10 100 Z' fill='url(%23honeyGlow)'/><g opacity='0.92'><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' transform='translate(12 8)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' transform='translate(40 8)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' transform='translate(68 8)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' transform='translate(96 8)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23f4c94e' stroke='%23c98e1f' stroke-width='1' transform='translate(124 8)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(26 32)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(54 32)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(82 32)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(110 32)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(40 56)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(68 56)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffd76a' stroke='%23c98e1f' stroke-width='1' transform='translate(96 56)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffe28a' stroke='%23c98e1f' stroke-width='1' transform='translate(54 80)'/><path d='M14 2 L26 9 L26 23 L14 30 L2 23 L2 9 Z' fill='%23ffe28a' stroke='%23c98e1f' stroke-width='1' transform='translate(82 80)'/></g><path d='M30 70 Q 25 85 35 90 Q 45 88 40 75' fill='%23ffb84a' opacity='0.6'/></svg>");
}

/* Top-right hanging beehive */
.invite[data-template="pooh"] .invite__sidedeco {
  position: absolute;
  top: 3%; right: 4%;
  width: 30%; height: 28%;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><path d='M40 5 Q 60 10 75 25 Q 88 35 95 25' stroke='%238b5a2b' stroke-width='2.5' fill='none' stroke-linecap='round'/><g transform='translate(20 40)'><ellipse cx='30' cy='8' rx='28' ry='6' fill='%23e8a738' stroke='%23a06820' stroke-width='1.5'/><ellipse cx='30' cy='18' rx='26' ry='8' fill='%23f0b54c' stroke='%23a06820' stroke-width='1.5'/><ellipse cx='30' cy='30' rx='28' ry='8' fill='%23e8a738' stroke='%23a06820' stroke-width='1.5'/><ellipse cx='30' cy='42' rx='25' ry='8' fill='%23f0b54c' stroke='%23a06820' stroke-width='1.5'/><ellipse cx='30' cy='52' rx='20' ry='7' fill='%23d89125' stroke='%23a06820' stroke-width='1.5'/><ellipse cx='30' cy='34' rx='6' ry='8' fill='%235b3a18'/></g><g transform='translate(75 50) rotate(-15)'><ellipse cx='0' cy='0' rx='4' ry='3' fill='%23f5e8a0' stroke='%23000' stroke-width='0.5'/><path d='M-2 -2 L-6 -5 M2 -2 L6 -5' stroke='%2380a0c0' stroke-width='0.5' fill='none' opacity='0.6'/><path d='M-1 0 L-1 -3 M1 0 L1 -3' stroke='%23000' stroke-width='0.3'/></g><g transform='translate(20 25) rotate(20)' opacity='0.7'><path d='M0 0 Q 3 -2 6 0 Q 3 2 0 0 Z' fill='%23a6cce0'/></g><g transform='translate(15 75)' opacity='0.85'><ellipse cx='0' cy='0' rx='4' ry='3' fill='%23f5e8a0' stroke='%23000' stroke-width='0.5'/><path d='M-2 -2 L-6 -5 M2 -2 L6 -5' stroke='%2380a0c0' stroke-width='0.5' fill='none' opacity='0.6'/></g></svg>");
}

.invite[data-template="pooh"] .invite__hero {
  font-family: var(--font-script);
  font-size: clamp(22px, 4.8vw, 38px);
  color: var(--pal-primary);
  margin-top: 22%;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 3;
}
.invite[data-template="pooh"] .invite__hero .accent {
  display: block;
  font-family: var(--font-body);
  font-size: 0.32em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 6px;
  color: var(--pal-accent);
}

/* Watercolor pastel scene */
.invite[data-template="pooh"] .invite__scene {
  margin-top: 5%;
  width: 100%; height: 16%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 80'><defs><radialGradient id='skyP' cx='0.5' cy='0' r='0.7'><stop offset='0' stop-color='%23bbd9ee' stop-opacity='0.85'/><stop offset='1' stop-color='%23bbd9ee' stop-opacity='0'/></radialGradient></defs><ellipse cx='140' cy='35' rx='130' ry='25' fill='url(%23skyP)'/><path d='M5 65 Q 140 55 275 65 L 275 80 L 5 80 Z' fill='%23b8d09a' opacity='0.7'/><g transform='translate(55 30)'><ellipse cx='10' cy='28' rx='13' ry='12' fill='%23f0c878'/><ellipse cx='4' cy='14' rx='5' ry='5' fill='%23f0c878'/><ellipse cx='16' cy='14' rx='5' ry='5' fill='%23f0c878'/><circle cx='4' cy='14' r='2.5' fill='%23e8b860'/><circle cx='16' cy='14' r='2.5' fill='%23e8b860'/><ellipse cx='10' cy='24' rx='6' ry='4' fill='%23f8d088'/><circle cx='7' cy='20' r='1' fill='%23000'/><circle cx='13' cy='20' r='1' fill='%23000'/><path d='M9 24 Q 10 26 11 24' stroke='%23000' stroke-width='0.6' fill='none'/></g><g transform='translate(100 32)'><ellipse cx='12' cy='28' rx='13' ry='12' fill='%23d68a48'/><path d='M3 18 L8 12 L11 18 M21 18 L16 12 L13 18' fill='%23d68a48'/><path d='M5 25 Q 12 22 19 25 Q 12 30 5 25' fill='%23f0a868'/><circle cx='9' cy='22' r='1' fill='%23000'/><circle cx='15' cy='22' r='1' fill='%23000'/><path d='M11 26 Q 12 27 13 26' stroke='%23000' stroke-width='0.5' fill='none'/><path d='M6 28 L8 22 M14 22 L18 28' stroke='%23a05a28' stroke-width='0.6' fill='none' opacity='0.4'/></g><g transform='translate(140 35)'><ellipse cx='8' cy='25' rx='8' ry='9' fill='%23f4a8c8'/><ellipse cx='4' cy='14' rx='3' ry='3' fill='%23f4a8c8'/><ellipse cx='12' cy='14' rx='3' ry='3' fill='%23f4a8c8'/><circle cx='6' cy='22' r='0.8' fill='%23000'/><circle cx='10' cy='22' r='0.8' fill='%23000'/></g><g transform='translate(175 25)'><ellipse cx='15' cy='30' rx='16' ry='12' fill='%23a8c8e0'/><path d='M3 22 L8 12 L13 22 M27 22 L22 12 L17 22' fill='%23a8c8e0'/><ellipse cx='15' cy='26' rx='7' ry='4' fill='%23c0d8eb'/><circle cx='11' cy='24' r='1' fill='%23000'/><circle cx='19' cy='24' r='1' fill='%23000'/><path d='M13 28 Q 15 30 17 28' stroke='%23000' stroke-width='0.6' fill='none'/></g><g transform='translate(125 18)' opacity='0.75'><path d='M0 0 Q 2 -2 4 0 Q 2 2 0 0 Z' fill='%23d8a8d8'/><path d='M4 0 Q 6 -2 8 0 Q 6 2 4 0 Z' fill='%23d8a8d8'/></g></svg>");
}

.invite[data-template="pooh"] .invite__details {
  margin-top: auto; padding-top: 6%;
  font-family: var(--font-body);
  color: var(--pal-text);
  text-align: center;
}
.invite[data-template="pooh"] .invite__lead {
  font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pal-accent); line-height: 1.4;
}
.invite[data-template="pooh"] .invite__names {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--pal-primary);
  margin: 4px 0 6px;
  letter-spacing: 0.06em;
}
.invite[data-template="pooh"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-text); font-weight: 600; line-height: 1.5;
}
.invite[data-template="pooh"] .invite__where {
  font-size: 8px; color: var(--pal-text-soft);
  margin-top: 4px; line-height: 1.4;
}
.invite[data-template="pooh"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-accent); margin-top: 4px;
}

/* ==========================================================
   3. WILD ONE — Watercolor jungle safari
   Reference: lush sage greenery framing, animal vignettes, kraft accents
   Palette: sage, olive, kraft tan, warm beige
   ========================================================== */

.invite[data-template="safari"] {
  background: linear-gradient(180deg, var(--pal-bg-2) 0%, var(--pal-surface) 40%, var(--pal-bg-3) 100%);
  color: var(--pal-text);
}

/* Top jungle greenery */
.invite[data-template="safari"] .invite__topdeco {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%; height: 24%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'><g opacity='0.95'><path d='M-10 0 L-10 40 Q 20 60 50 50 Q 80 35 100 55 Q 130 70 160 50 Q 200 30 230 55 Q 260 75 310 50 L 310 0 Z' fill='%237a9352'/><g transform='translate(20 20) rotate(-20)'><ellipse cx='0' cy='0' rx='14' ry='6' fill='%2398b56e'/></g><g transform='translate(50 30) rotate(15)'><ellipse cx='0' cy='0' rx='16' ry='7' fill='%23a8c47e'/></g><g transform='translate(85 22) rotate(-10)'><ellipse cx='0' cy='0' rx='15' ry='6' fill='%237a9352'/></g><g transform='translate(120 35) rotate(20)'><ellipse cx='0' cy='0' rx='17' ry='7' fill='%2398b56e'/></g><g transform='translate(160 28) rotate(-15)'><ellipse cx='0' cy='0' rx='18' ry='7' fill='%23a8c47e'/></g><g transform='translate(200 38) rotate(10)'><ellipse cx='0' cy='0' rx='16' ry='6' fill='%237a9352'/></g><g transform='translate(240 25) rotate(-20)'><ellipse cx='0' cy='0' rx='18' ry='8' fill='%2398b56e'/></g><g transform='translate(275 35) rotate(15)'><ellipse cx='0' cy='0' rx='16' ry='6' fill='%23a8c47e'/></g><circle cx='35' cy='55' r='4' fill='%23c6a572' opacity='0.7'/><circle cx='42' cy='52' r='3' fill='%23c6a572' opacity='0.7'/><circle cx='38' cy='58' r='3.5' fill='%23c6a572' opacity='0.7'/><circle cx='180' cy='52' r='4' fill='%23c6a572' opacity='0.7'/><circle cx='186' cy='55' r='3' fill='%23c6a572' opacity='0.7'/></g></svg>");
}

/* Bottom jungle floor */
.invite[data-template="safari"] .invite__bottomdeco {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 18%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'><g><path d='M-10 80 L-10 40 Q 30 20 60 30 Q 90 45 120 25 Q 160 10 190 30 Q 220 45 250 25 Q 280 15 310 35 L 310 80 Z' fill='%237a9352'/><g transform='translate(40 60) rotate(15)'><ellipse cx='0' cy='0' rx='12' ry='5' fill='%2398b56e'/></g><g transform='translate(80 55) rotate(-10)'><ellipse cx='0' cy='0' rx='14' ry='6' fill='%23a8c47e'/></g><g transform='translate(140 65) rotate(20)'><ellipse cx='0' cy='0' rx='13' ry='5' fill='%2398b56e'/></g><g transform='translate(210 55) rotate(-15)'><ellipse cx='0' cy='0' rx='15' ry='6' fill='%23a8c47e'/></g><g transform='translate(260 65) rotate(10)'><ellipse cx='0' cy='0' rx='12' ry='5' fill='%2398b56e'/></g><rect x='-10' y='72' width='320' height='3' fill='%23c6a572' opacity='0.8'/></g></svg>");
}

/* Animal silhouettes on the side */
.invite[data-template="safari"] .invite__sidedeco {
  position: absolute;
  right: 0; top: 18%;
  width: 26%; height: 40%;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'><g transform='translate(20 5)'><path d='M30 0 Q 38 -2 42 8 Q 44 18 40 24 L 38 60 Q 38 90 28 100 L 24 100 L 26 60 Q 26 30 22 24 Q 18 18 22 8 Q 26 -2 30 0 Z' fill='%23e0a868'/><circle cx='34' cy='6' r='1.2' fill='%23000'/><circle cx='38' cy='12' r='3' fill='%23a87844' opacity='0.5'/><circle cx='30' cy='20' r='3' fill='%23a87844' opacity='0.5'/><circle cx='36' cy='32' r='4' fill='%23a87844' opacity='0.5'/><circle cx='28' cy='42' r='3.5' fill='%23a87844' opacity='0.5'/><circle cx='34' cy='52' r='3' fill='%23a87844' opacity='0.5'/><path d='M40 2 L43 -2 M44 6 L48 4' stroke='%238b5a2b' stroke-width='1.2'/></g></svg>");
}

.invite[data-template="safari"] .invite__hero {
  font-family: var(--font-script);
  font-size: clamp(24px, 5.2vw, 42px);
  color: var(--pal-primary);
  margin-top: 26%;
  font-weight: 700;
  line-height: 0.9;
  position: relative;
}
.invite[data-template="safari"] .invite__hero .pre {
  display: block;
  font-family: var(--font-body);
  font-size: 0.28em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pal-accent);
  margin-bottom: 4px;
}
.invite[data-template="safari"] .invite__hero .accent {
  display: block;
  font-family: var(--font-body);
  font-size: 0.24em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pal-text-soft);
  margin-top: 4px;
}

.invite[data-template="safari"] .invite__details {
  margin-top: 8%;
  padding: 0 4%;
  font-family: var(--font-body);
  text-align: center;
}
.invite[data-template="safari"] .invite__lead {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-text-soft); line-height: 1.4;
}
.invite[data-template="safari"] .invite__names {
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--pal-primary);
  margin: 4px 0 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.invite[data-template="safari"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-text); font-weight: 600; line-height: 1.5;
}
.invite[data-template="safari"] .invite__where {
  font-size: 8px; color: var(--pal-text-soft);
  margin-top: 4px; line-height: 1.4;
}
.invite[data-template="safari"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-accent-ink); margin-top: 4px;
  background: var(--pal-accent); padding: 4px 0;
  width: 100%; border-radius: 2px;
}

/* ==========================================================
   4. PAMPAS — Boho arch with dried florals
   Reference: warm tan arch, pampas grass sprays, terracotta/sand palette
   Palette: terracotta, sand, cream, dusty rose
   ========================================================== */

.invite[data-template="bohemian"] {
  background: var(--pal-bg);
  color: var(--pal-text);
  padding: 0 !important;
}

/* The arch shape — a rounded-top tan card centered inside */
.invite[data-template="bohemian"] .invite__topdeco {
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: 86%; height: 88%;
  background: linear-gradient(180deg, var(--pal-primary-2) 0%, var(--pal-primary) 60%, color-mix(in srgb, var(--pal-primary) 78%, #000) 100%);
  border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
  box-shadow: inset 0 4px 12px rgba(255,255,255,0.15);
}

/* Pampas grass top-right cluster on top of arch */
.invite[data-template="bohemian"] .invite__sidedeco {
  position: absolute;
  top: 8%; right: 4%;
  width: 36%; height: 38%;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><g><path d='M50 105 Q 48 80 45 50 Q 43 30 40 10' stroke='%238b6a40' stroke-width='0.8' fill='none'/><g transform='translate(40 10)'><path d='M0 0 Q -4 8 -2 14 M0 0 Q 4 8 2 14 M0 0 Q -2 10 0 16 M0 5 Q -6 14 -4 20 M0 5 Q 6 14 4 20' stroke='%23e8d4a8' stroke-width='2' stroke-linecap='round' fill='none'/></g><path d='M60 105 Q 60 78 58 48 Q 56 25 52 8' stroke='%238b6a40' stroke-width='0.8' fill='none'/><g transform='translate(52 8)'><path d='M0 0 Q -5 10 -3 16 M0 0 Q 5 10 3 16 M-2 5 Q -8 16 -6 22 M2 5 Q 8 16 6 22 M0 8 Q 0 18 0 24' stroke='%23d4b896' stroke-width='2.2' stroke-linecap='round' fill='none'/></g><path d='M70 105 Q 72 75 70 45 Q 67 22 62 4' stroke='%238b6a40' stroke-width='0.8' fill='none'/><g transform='translate(62 4)'><path d='M0 0 Q -4 8 -2 16 M0 0 Q 4 8 2 16 M-2 6 Q -8 14 -6 22 M2 6 Q 8 14 6 22 M0 10 Q 0 20 0 26' stroke='%23ede0b8' stroke-width='2' stroke-linecap='round' fill='none'/></g><g transform='translate(20 45)'><path d='M0 0 Q -10 8 -8 18 Q -4 22 0 22 Q 6 20 8 12 Q 10 4 4 0 Z' fill='%23a87858'/><path d='M-2 5 Q -6 10 -4 15' stroke='%238b6a40' stroke-width='0.5' fill='none'/></g><g transform='translate(15 65)'><path d='M0 0 Q -8 6 -8 16 Q -4 20 0 18 Q 6 16 6 8 Q 6 2 0 0 Z' fill='%23c4956e'/></g><g transform='translate(35 55)'><ellipse cx='0' cy='0' rx='10' ry='12' fill='%23d8c8a8'/><ellipse cx='0' cy='0' rx='5' ry='8' fill='%23a87858'/></g><g transform='translate(28 78)'><ellipse cx='0' cy='0' rx='8' ry='5' fill='%237a8060'/><ellipse cx='-3' cy='-2' rx='5' ry='3' fill='%238a906e' transform='rotate(-30)'/></g><g transform='translate(48 85)'><ellipse cx='0' cy='0' rx='7' ry='4' fill='%238a906e' transform='rotate(20)'/></g></g></svg>");
}

/* Pampas bottom-left cluster */
.invite[data-template="bohemian"] .invite__bottomdeco {
  position: absolute;
  bottom: 6%; left: 5%;
  width: 30%; height: 28%;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g><path d='M40 80 Q 38 60 35 40 Q 32 20 28 8' stroke='%23704a2a' stroke-width='0.8' fill='none'/><g transform='translate(28 8)'><path d='M0 0 Q -5 8 -3 16 M0 0 Q 5 8 3 16 M-2 5 Q -8 14 -6 20 M2 5 Q 8 14 6 20' stroke='%23ede0b8' stroke-width='2' stroke-linecap='round' fill='none'/></g><path d='M50 80 Q 50 58 48 38 Q 45 18 40 4' stroke='%23704a2a' stroke-width='0.8' fill='none'/><g transform='translate(40 4)'><path d='M0 0 Q -4 8 -2 14 M0 0 Q 4 8 2 14 M0 4 Q -6 12 -4 18 M0 4 Q 6 12 4 18 M0 8 Q 0 16 0 22' stroke='%23d4b896' stroke-width='2.2' stroke-linecap='round' fill='none'/></g><g transform='translate(20 55)'><path d='M0 0 Q -10 6 -10 18 Q -6 22 -2 20 Q 4 16 4 8 Q 2 2 0 0 Z' fill='%23a87858'/></g><g transform='translate(15 70)'><ellipse cx='0' cy='0' rx='6' ry='3' fill='%237a8060' transform='rotate(20)'/></g></g></svg>");
}

.invite[data-template="bohemian"] .invite__hero {
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 30px);
  color: #fdf5e6;
  margin-top: 32%;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  z-index: 2; position: relative;
}
.invite[data-template="bohemian"] .invite__hero .accent {
  display: block;
  font-family: var(--font-script);
  font-size: 0.55em;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  color: #fdf5e6;
  font-style: italic;
  margin-top: 2px;
  opacity: 0.92;
}

.invite[data-template="bohemian"] .invite__details {
  margin-top: 14%;
  padding: 0 14%;
  font-family: var(--font-body);
  text-align: center;
  color: #fdf5e6;
  z-index: 2; position: relative;
}
.invite[data-template="bohemian"] .invite__lead {
  font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #f5e8d0; line-height: 1.4;
  opacity: 0.85;
}
.invite[data-template="bohemian"] .invite__names {
  font-family: var(--font-display);
  font-size: 16px;
  color: #fdf5e6;
  margin: 6px 0 8px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
}
.invite[data-template="bohemian"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fdf5e6; font-weight: 600;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 6px;
}
.invite[data-template="bohemian"] .invite__when::before,
.invite[data-template="bohemian"] .invite__when::after {
  content: ""; width: 24px; height: 1px; background: #fdf5e6; opacity: 0.5;
}
.invite[data-template="bohemian"] .invite__where {
  font-size: 7.5px; color: #f5e8d0;
  margin-top: 6px; line-height: 1.5;
  opacity: 0.85;
}
.invite[data-template="bohemian"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5a4530; margin-top: 6px;
  background: #fdf5e6; padding: 5px 14px;
  border-radius: 9999px;
  display: inline-block;
}

/* ==========================================================
   Base .invite shell (used by all templates)
   ========================================================== */
.invite {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 6% 6% 5%;
  border-radius: 10px;
  background: white;
}
.invite__topdeco,
.invite__sidedeco,
.invite__bottomdeco,
.invite__scene,
.invite__cloud { pointer-events: none; z-index: 1; }
.invite__hero,
.invite__details { position: relative; z-index: 2; }
.invite__details {
  text-align: center;
  width: 100%;
}

/* ==========================================================
   TEMPLATE: rosegold (romantic — bridal & wedding)
   Blush peach background, foil-gold floral wreath, scripted serif
   ========================================================== */
.invite[data-template="rosegold"] {
  background: linear-gradient(180deg, #fbeae3 0%, #f7d6cb 100%);
  color: #6f3b3b;
}

/* Gold sparkle frame across the top */
.invite[data-template="rosegold"] .invite__topdeco {
  position: absolute;
  top: 4%; left: 8%; right: 8%;
  height: 24%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g><path d='M20 30 Q 30 8 50 12 Q 65 15 70 28 Q 75 14 90 12 Q 110 10 120 28 Q 130 12 150 14 Q 170 16 180 30' stroke='%23b76e79' stroke-width='1' fill='none' opacity='0.4'/><g fill='%23d18b94'><circle cx='35' cy='18' r='3'/><circle cx='55' cy='14' r='2.5'/><circle cx='75' cy='20' r='3.5'/><circle cx='100' cy='16' r='3'/><circle cx='125' cy='20' r='3.5'/><circle cx='150' cy='15' r='2.8'/><circle cx='170' cy='22' r='3'/></g><g fill='%23e8b8a8'><circle cx='42' cy='22' r='1.8'/><circle cx='62' cy='18' r='1.5'/><circle cx='85' cy='14' r='2'/><circle cx='110' cy='22' r='1.8'/><circle cx='135' cy='14' r='1.6'/><circle cx='160' cy='20' r='1.7'/></g><g fill='%23b76e79' opacity='0.65'><path d='M28 26 q -2 4 0 6 q 3 -1 4 -4 z'/><path d='M48 24 q -2 4 0 6 q 3 -1 4 -4 z'/><path d='M82 26 q -2 4 0 6 q 3 -1 4 -4 z'/><path d='M118 24 q -2 4 0 6 q 3 -1 4 -4 z'/><path d='M155 26 q -2 4 0 6 q 3 -1 4 -4 z'/></g><g fill='%23c9a574'><polygon points='50,5 51,9 55,10 51,11 50,15 49,11 45,10 49,9' opacity='0.85'/><polygon points='95,3 96,7 100,8 96,9 95,13 94,9 90,8 94,7' opacity='0.85'/><polygon points='150,5 151,9 155,10 151,11 150,15 149,11 145,10 149,9' opacity='0.85'/></g></g></svg>");
}

/* Bottom floral cluster with leaves */
.invite[data-template="rosegold"] .invite__bottomdeco {
  position: absolute;
  bottom: 4%; left: 8%; right: 8%;
  height: 22%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g><path d='M20 32 Q 30 50 50 48 Q 65 46 70 32 Q 80 48 100 45 Q 120 42 130 32 Q 140 50 160 48 Q 175 45 180 32' stroke='%23b76e79' stroke-width='1' fill='none' opacity='0.5'/><g fill='%23d18b94'><circle cx='35' cy='42' r='4'/><circle cx='65' cy='38' r='3.4'/><circle cx='100' cy='40' r='4.2'/><circle cx='135' cy='38' r='3.6'/><circle cx='165' cy='42' r='4'/></g><g fill='%23e8b8a8'><circle cx='42' cy='38' r='2.2'/><circle cx='72' cy='42' r='2'/><circle cx='95' cy='36' r='2'/><circle cx='130' cy='44' r='2.4'/><circle cx='160' cy='36' r='1.8'/></g><g fill='%237a8060' opacity='0.7'><path d='M28 44 q -4 3 -3 7 q 4 0 5 -5 z'/><path d='M58 46 q -4 2 -4 6 q 3 1 5 -3 z'/><path d='M88 45 q -4 2 -3 7 q 4 0 5 -4 z'/><path d='M118 44 q -4 3 -3 7 q 4 0 5 -5 z'/><path d='M148 45 q -4 2 -4 6 q 3 1 5 -3 z'/></g><g fill='%23c9a574' opacity='0.85'><polygon points='50,30 51,33 54,34 51,35 50,38 49,35 46,34 49,33'/><polygon points='110,28 111,31 114,32 111,33 110,36 109,33 106,32 109,31'/><polygon points='150,30 151,33 154,34 151,35 150,38 149,35 146,34 149,33'/></g></g></svg>");
}

/* Left/right gold ribbon flourish */
.invite[data-template="rosegold"] .invite__sidedeco {
  position: absolute;
  inset: 28% 4% 28% 4%;
  border-left: 1px solid #c9a574;
  border-right: 1px solid #c9a574;
  opacity: 0.32;
  pointer-events: none;
}

.invite[data-template="rosegold"] .invite__hero {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 36px);
  color: #6f3b3b;
  margin-top: 26%;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  text-align: center;
  z-index: 2; position: relative;
  line-height: 1.05;
}
.invite[data-template="rosegold"] .invite__hero .accent {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 0.45em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b76e79;
  margin-top: 8px;
  opacity: 0.92;
}

.invite[data-template="rosegold"] .invite__details {
  margin-top: 8%;
  padding: 0 14%;
  font-family: var(--font-body);
  color: #6f3b3b;
  z-index: 2; position: relative;
}
.invite[data-template="rosegold"] .invite__lead {
  font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9c5e63; line-height: 1.4;
}
.invite[data-template="rosegold"] .invite__names {
  font-family: var(--font-display);
  font-size: 18px;
  color: #6f3b3b;
  margin: 8px 0 10px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.05;
}
.invite[data-template="rosegold"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6f3b3b; font-weight: 600;
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.invite[data-template="rosegold"] .invite__when::before,
.invite[data-template="rosegold"] .invite__when::after {
  content: ""; width: 22px; height: 1px; background: #c9a574;
}
.invite[data-template="rosegold"] .invite__where {
  font-size: 7.5px; color: #9c5e63;
  margin-top: 4px; line-height: 1.5;
  font-style: italic;
}
.invite[data-template="rosegold"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fdf5e6; margin-top: 8px;
  background: #b76e79; padding: 5px 14px;
  border-radius: 9999px;
  display: inline-block;
}

/* ==========================================================
   TEMPLATE: confetti (bright birthday energy)
   Cream background, falling confetti, balloon strings
   ========================================================== */
.invite[data-template="confetti"] {
  background: linear-gradient(180deg, #fff8f0 0%, #ffe9d6 100%);
  color: #3a2c5c;
}

/* Balloon cluster top */
.invite[data-template="confetti"] .invite__topdeco {
  position: absolute;
  top: 0; left: 0; right: 0; height: 32%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'><g><line x1='40' y1='80' x2='42' y2='35' stroke='%23a08070' stroke-width='0.6'/><line x1='80' y1='80' x2='75' y2='28' stroke='%23a08070' stroke-width='0.6'/><line x1='120' y1='80' x2='125' y2='25' stroke='%23a08070' stroke-width='0.6'/><line x1='160' y1='80' x2='158' y2='35' stroke='%23a08070' stroke-width='0.6'/><ellipse cx='42' cy='28' rx='12' ry='14' fill='%23e94f64'/><ellipse cx='38' cy='22' rx='3' ry='4' fill='%23ff7a90' opacity='0.6'/><polygon points='42,42 38,46 46,46' fill='%23e94f64'/><ellipse cx='75' cy='20' rx='11' ry='13' fill='%23f5c542'/><ellipse cx='71' cy='14' rx='2.5' ry='3.5' fill='%23ffd969' opacity='0.6'/><polygon points='75,33 71,37 79,37' fill='%23f5c542'/><ellipse cx='125' cy='18' rx='12' ry='14' fill='%234ea8d9'/><ellipse cx='121' cy='12' rx='3' ry='4' fill='%237ec1e6' opacity='0.6'/><polygon points='125,32 121,36 129,36' fill='%234ea8d9'/><ellipse cx='158' cy='28' rx='11' ry='13' fill='%237ec548'/><ellipse cx='154' cy='22' rx='2.5' ry='3.5' fill='%23a3db73' opacity='0.6'/><polygon points='158,41 154,45 162,45' fill='%237ec548'/></g></svg>");
}

/* Falling confetti scattered through middle */
.invite[data-template="confetti"] .invite__sidedeco {
  position: absolute;
  inset: 28% 0 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280' preserveAspectRatio='none'><g><rect x='15' y='20' width='5' height='8' fill='%23e94f64' transform='rotate(20 17 24)'/><rect x='180' y='30' width='5' height='8' fill='%234ea8d9' transform='rotate(-15 182 34)'/><rect x='25' y='60' width='4' height='7' fill='%23f5c542' transform='rotate(40 27 63)'/><rect x='170' y='80' width='5' height='8' fill='%237ec548' transform='rotate(-25 172 84)'/><rect x='10' y='110' width='4' height='6' fill='%23e94f64' transform='rotate(15 12 113)'/><rect x='185' y='130' width='5' height='8' fill='%23f5c542' transform='rotate(-30 187 134)'/><rect x='20' y='160' width='4' height='7' fill='%234ea8d9' transform='rotate(45 22 163)'/><rect x='175' y='180' width='5' height='8' fill='%237ec548' transform='rotate(-20 177 184)'/><rect x='15' y='210' width='4' height='7' fill='%23e94f64' transform='rotate(35 17 213)'/><rect x='180' y='230' width='5' height='8' fill='%23f5c542' transform='rotate(-25 182 234)'/><circle cx='30' cy='40' r='2' fill='%23e94f64'/><circle cx='175' cy='55' r='2' fill='%234ea8d9'/><circle cx='15' cy='90' r='2' fill='%237ec548'/><circle cx='185' cy='105' r='2' fill='%23f5c542'/><circle cx='25' cy='140' r='2' fill='%23e94f64'/><circle cx='178' cy='160' r='2' fill='%234ea8d9'/><circle cx='12' cy='190' r='2' fill='%237ec548'/><circle cx='188' cy='215' r='2' fill='%23f5c542'/><circle cx='18' cy='250' r='2' fill='%23e94f64'/></g></svg>");
}

/* Bottom star burst */
.invite[data-template="confetti"] .invite__bottomdeco {
  position: absolute;
  bottom: 4%; left: 12%; right: 12%;
  height: 12%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><g><polygon points='30,10 32,18 40,20 32,22 30,30 28,22 20,20 28,18' fill='%23f5c542'/><polygon points='100,5 102,15 112,17 102,19 100,29 98,19 88,17 98,15' fill='%23e94f64'/><polygon points='170,10 172,18 180,20 172,22 170,30 168,22 160,20 168,18' fill='%234ea8d9'/><circle cx='65' cy='22' r='3' fill='%237ec548'/><circle cx='135' cy='20' r='3' fill='%23e94f64'/></g></svg>");
}

.invite[data-template="confetti"] .invite__hero {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.4vw, 38px);
  color: #3a2c5c;
  margin-top: 36%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.0;
  text-align: center;
  z-index: 2; position: relative;
}
.invite[data-template="confetti"] .invite__hero .accent {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.15em;
  letter-spacing: -0.02em;
  color: #e94f64;
  font-weight: 500;
  margin-left: 4px;
  transform: rotate(-3deg) translateY(2px);
}

.invite[data-template="confetti"] .invite__details {
  margin-top: 8%;
  padding: 0 12%;
  font-family: var(--font-body);
  color: #3a2c5c;
  z-index: 2; position: relative;
}
.invite[data-template="confetti"] .invite__lead {
  font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a4d8f; line-height: 1.4;
  font-weight: 600;
}
.invite[data-template="confetti"] .invite__names {
  font-family: var(--font-display);
  font-size: 18px;
  color: #3a2c5c;
  margin: 6px 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.invite[data-template="confetti"] .invite__when {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #3a2c5c; font-weight: 600;
}
.invite[data-template="confetti"] .invite__where {
  font-size: 7.5px; color: #6a4d8f;
  margin-top: 4px; line-height: 1.5;
}
.invite[data-template="confetti"] .invite__rsvp {
  font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; margin-top: 8px;
  background: #e94f64;
  padding: 5px 14px;
  border-radius: 9999px;
  display: inline-block;
  font-weight: 600;
}