/* ── Microsite designs: layouts, colour themes, heading fonts ──────────────
   A theme re-skins everything inside .msx by redefining the tokens the page already
   uses (--gold = accent, --navy = ink, --cream / --cream2 = paper tints, --line).
   --ms-h1 / --ms-h2 feed the hero gradient. Options are listed in Services/MicrositeDesign.cs. */
.ms-theme-navy       { --ms-h1:#1B335A; --ms-h2:#0F2340; --gold:#856527; --navy:#14284A; --cream:#FAF8F3; --cream2:#F3EEE2; --line:#E7E1D2; }
.ms-theme-blush      { --ms-h1:#697A5F; --ms-h2:#485943; --gold:#925861; --navy:#34423A; --cream:#FBF7F5; --cream2:#F4E9E7; --line:#EADCD8; }
.ms-theme-midnight   { --ms-h1:#2A2350; --ms-h2:#120E2B; --gold:#7C652F; --navy:#1C1740; --cream:#F8F7FB; --cream2:#ECE9F5; --line:#DDD8EC; }
.ms-theme-terracotta { --ms-h1:#AC6144; --ms-h2:#7C412B; --gold:#A74C2B; --navy:#3B2A22; --cream:#FBF6EF; --cream2:#F2E7D8; --line:#E8D9C4; }
.ms-theme-emerald    { --ms-h1:#1F5A47; --ms-h2:#0E3326; --gold:#80672C; --navy:#12342A; --cream:#FAF8F1; --cream2:#EDF0E6; --line:#DCE3D5; }
.ms-theme-dusty      { --ms-h1:#5E788F; --ms-h2:#3D5871; --gold:#476A8C; --navy:#243447; --cream:#F7F9FB; --cream2:#E8EEF4; --line:#D9E2EA; }
.ms-theme-lavender   { --ms-h1:#7A6BA7; --ms-h2:#544684; --gold:#735CAD; --navy:#2E2547; --cream:#FAF8FD; --cream2:#EFEAF8; --line:#E2DBF0; }
.ms-theme-champagne  { --ms-h1:#86714D; --ms-h2:#5F4A2A; --gold:#85642B; --navy:#3A2F1E; --cream:#FDFAF4; --cream2:#F4ECDB; --line:#EADFC8; }
.ms-theme-mono       { --ms-h1:#2B2B2E; --ms-h2:#0B0B0C; --gold:#3A3A3F; --navy:#0B0B0C; --cream:#FAFAFA; --cream2:#F0F0F0; --line:#E4E4E4; }
[class*="ms-theme-"] { --ms-bg: radial-gradient(120% 120% at 75% 0%, var(--ms-h1), var(--ms-h2)); }

/* --ms-photo defaults to "none" so layers like "var(--ms-photo) center / cover, var(--ms-bg)" stay valid
   when the couple hasn't uploaded a header photo (an undefined var would drop the whole declaration).
   The hero's inline style overrides it once a photo exists. */
.msx { --ms-font: 'Playfair Display', Georgia, serif; --ms-photo: none; }
.msx-names, .msx-rsvp-hd { font-family: var(--ms-font); overflow-wrap: anywhere; word-break: break-word; }
.msx[data-fonttype="script"] .msx-names { font-weight: 400; font-size: max(20px, calc(clamp(54px, 15vw, 110px) * var(--ms-nscale, 1))); line-height: 1.12; }
.msx[data-fonttype="script"] .msx-rsvp-hd { font-weight: 400; font-size: 34px; }
.msx[data-fonttype="caps"] .msx-names { letter-spacing: .05em; font-size: max(20px, calc(clamp(32px, 9vw, 64px) * var(--ms-nscale, 1))); }
.msx[data-fonttype="sans"] .msx-names { letter-spacing: -.01em; }

/* Small hero text stays fully opaque so it keeps 4.5:1 on every theme's gradient */
.msx-kicker { color: #fff; }
.msx-sub, .msx-venue { opacity: 1; }

/* Long names shrink: the page sets --ms-nscale from the name length (1 = normal) */
.msx-names { font-size: max(20px, calc(clamp(42px, 12vw, 80px) * var(--ms-nscale, 1))); }

/* Hero base: gradient, or the couple's photo under a scrim */
.msx-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ms-bg); }
.msx-hero-media { display: none; }
.msx-lay-Classic .msx-hero.has-photo {
  /* Scrim sized so white text keeps 4.5:1 even over a near-white photo */
  background: linear-gradient(rgba(10,20,40,.56), rgba(10,20,40,.64)), var(--ms-photo) center / cover no-repeat, var(--ms-bg);
}

/* Cinematic: full-screen photo, names bottom-left */
.msx-lay-Cinematic .msx-hero {
  min-height: 100vh; min-height: 100svh; align-items: flex-start; justify-content: flex-end; text-align: left;
  padding: 0 clamp(20px, 6vw, 72px) clamp(40px, 9vh, 88px);
}
.msx-lay-Cinematic .msx-hero.has-photo {
  background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.56) 40%, rgba(0,0,0,.84) 100%), var(--ms-photo) center / cover no-repeat, var(--ms-bg);
}
.msx-lay-Cinematic .msx-hero-in { max-width: 980px; margin: 0; }
.msx-lay-Cinematic .msx-names { font-size: max(20px, calc(clamp(52px, 12vw, 132px) * var(--ms-nscale, 1))); line-height: 1; }
.msx-lay-Cinematic[data-fonttype="script"] .msx-names { font-size: max(20px, calc(clamp(60px, 15vw, 150px) * var(--ms-nscale, 1))); }
.msx-lay-Cinematic .msx-cta, .msx-lay-Cinematic .msx-countdown { justify-content: flex-start; }
.msx-lay-Cinematic .msx-body { max-width: 960px; }
.msx-lay-Cinematic .msx-gallery { gap: 4px; }

/* Editorial: text left, photo right */
.msx-lay-Editorial .msx-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; justify-content: stretch;
  min-height: 88vh; padding: 0; text-align: left; background: var(--cream); color: var(--navy);
}
.msx-lay-Editorial .msx-hero-in { display: flex; flex-direction: column; justify-content: center; max-width: none; margin: 0; padding: clamp(32px, 6vw, 80px); }
.msx-lay-Editorial .msx-hero-media { display: block; order: 2; background: var(--ms-photo) center / cover no-repeat, var(--ms-bg); }
.msx-lay-Editorial .msx-countdown, .msx-lay-Minimal .msx-countdown { color: var(--navy); background: transparent; border: 1px solid var(--line); }
.msx-lay-Editorial .msx-kicker { color: var(--gold); }
.msx-lay-Editorial .msx-names { text-shadow: none; color: var(--navy); }
.msx-lay-Editorial .msx-sub, .msx-lay-Editorial .msx-venue { color: var(--navy); }
.msx-lay-Editorial .msx-date { color: var(--gold); font-weight: 600; }
.msx-lay-Editorial .msx-cta { justify-content: flex-start; }
.msx-lay-Editorial .msx-ghost { color: var(--navy); border-color: var(--line); background: transparent; }
.msx-lay-Editorial .msx-card { text-align: left; border-left: 3px solid var(--gold); border-radius: 6px; }

/* Arch: photo in an arch, names beneath */
.msx-lay-Arch .msx-hero { padding-top: clamp(40px, 8vh, 80px); }
.msx-lay-Arch .msx-hero-media {
  display: block; order: -1; width: min(300px, 70vw); aspect-ratio: 3 / 4; margin-bottom: 28px;
  border-radius: 999px 999px 18px 18px; border: 3px solid rgba(255,255,255,.6); box-shadow: 0 18px 50px rgba(0,0,0,.28);
  background: var(--ms-photo) center / cover no-repeat, linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
}
@supports not (aspect-ratio: 3 / 4) { .msx-lay-Arch .msx-hero-media { height: 400px; } }
.msx-lay-Arch .msx-card { border-radius: 999px 999px var(--r) var(--r); padding-top: 38px; }

/* Minimal: typographic, light */
.msx-lay-Minimal .msx-hero { min-height: 70vh; background: var(--cream); color: var(--navy); }
.msx-lay-Minimal .msx-kicker { color: var(--gold); }
.msx-lay-Minimal .msx-names { text-shadow: none; color: var(--navy); font-size: max(20px, calc(clamp(46px, 13vw, 112px) * var(--ms-nscale, 1))); }
.msx-lay-Minimal .msx-hero-in { border-bottom: 1px solid var(--line); padding-bottom: 36px; }
.msx-lay-Minimal .msx-sub, .msx-lay-Minimal .msx-venue { color: var(--navy); }
.msx-lay-Minimal .msx-date { color: var(--gold); font-weight: 600; }
.msx-lay-Minimal .msx-ghost { color: var(--navy); border-color: var(--line); background: transparent; }
.msx-lay-Minimal .msx-hero-media {
  display: none; order: 2; width: min(920px, 100%); height: 42vh; margin-top: 36px; border-radius: var(--r);
  background: var(--ms-photo) center / cover no-repeat;
}
.msx-lay-Minimal .msx-hero.has-photo .msx-hero-media { display: block; }
.msx-lay-Minimal .msx-card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }

/* Links, labels and the RSVP block pick up the theme */
.msx-rsvp { background: var(--cream2); }
.msx .msx-link, .msx .label.gold { color: var(--gold); }

@media (max-width: 760px) {
  .msx-lay-Editorial .msx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .msx-lay-Editorial .msx-hero-media { order: -1; min-height: 46vh; }
  .msx-lay-Editorial .msx-countdown { align-self: flex-start; }
  .msx-lay-Editorial .msx-hero-in { padding: 32px 22px 44px; }
}

/* Editor live preview reuses the real hero markup, scaled to the side panel */
.msx-prev .msx-hero { min-height: 420px; }
.msx-prev .msx-names { font-size: max(20px, calc(clamp(30px, 4.2vw, 46px) * var(--ms-nscale, 1))); }
.msx-prev[data-fonttype="script"] .msx-names { font-size: max(20px, calc(clamp(38px, 5vw, 56px) * var(--ms-nscale, 1))); }
.msx-prev.msx-lay-Cinematic .msx-hero { min-height: 520px; padding-bottom: 32px; }
.msx-prev.msx-lay-Cinematic .msx-names { font-size: max(20px, calc(clamp(34px, 4.6vw, 52px) * var(--ms-nscale, 1))); }
.msx-prev.msx-lay-Editorial .msx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.msx-prev.msx-lay-Editorial .msx-hero-media { order: -1; min-height: 180px; }
.msx-prev.msx-lay-Editorial .msx-hero-in { padding: 24px 20px 28px; }
.msx-prev.msx-lay-Arch .msx-hero-media { width: 150px; margin-bottom: 18px; }
.msx-prev.msx-lay-Minimal .msx-hero { min-height: 340px; }
.msx-prev.msx-lay-Minimal .msx-names { font-size: max(20px, calc(clamp(34px, 5vw, 54px) * var(--ms-nscale, 1))); }

/* Editor option cards */
.dsn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.dsn-opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer; text-align: left; }
.dsn-opt:hover { border-color: var(--gold); }
.dsn-opt:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.dsn-opt:has(input:checked), .dsn-opt.is-on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.dsn-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.dsn-desc { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.dsn-thumb { height: 74px; border-radius: 8px; background: #f3f3f1; position: relative; overflow: hidden; display: block; }
.dsn-thumb i { position: absolute; display: block; background: var(--navy); opacity: .85; border-radius: 2px; }
.dsn-thumb .ph { background: linear-gradient(135deg, #b9c3d4, #8d9bb3); opacity: 1; }
.dsn-thumb.t-Classic { background: linear-gradient(135deg, #b9c3d4, #8d9bb3); }
.dsn-thumb.t-Classic i { background: #fff; left: 50%; transform: translateX(-50%); height: 5px; }
.dsn-thumb.t-Classic i:nth-child(1) { top: 26px; width: 56%; height: 8px; }
.dsn-thumb.t-Classic i:nth-child(2) { top: 40px; width: 34%; }
.dsn-thumb.t-Classic i:nth-child(3) { top: 50px; width: 24%; opacity: .6; }
.dsn-thumb.t-Cinematic { background: linear-gradient(180deg, #8d9bb3, #3a4660 60%, #1c2438); }
.dsn-thumb.t-Cinematic i { background: #fff; left: 10px; height: 5px; }
.dsn-thumb.t-Cinematic i:nth-child(1) { bottom: 24px; width: 62%; height: 9px; }
.dsn-thumb.t-Cinematic i:nth-child(2) { bottom: 13px; width: 34%; opacity: .7; }
.dsn-thumb.t-Cinematic i:nth-child(3) { display: none; }
.dsn-thumb.t-Editorial { background: #faf8f3; }
.dsn-thumb.t-Editorial i:nth-child(1) { top: 24px; left: 10px; width: 34%; height: 8px; }
.dsn-thumb.t-Editorial i:nth-child(2) { top: 38px; left: 10px; width: 24%; height: 5px; opacity: .6; }
.dsn-thumb.t-Editorial i:nth-child(3) { right: 0; top: 0; bottom: 0; width: 46%; border-radius: 0; background: linear-gradient(135deg, #b9c3d4, #8d9bb3); opacity: 1; }
.dsn-thumb.t-Arch { background: linear-gradient(135deg, #5d7396, #2c3d5e); }
.dsn-thumb.t-Arch i:nth-child(1) { left: 50%; transform: translateX(-50%); top: 7px; width: 28px; height: 36px; border-radius: 28px 28px 3px 3px; background: linear-gradient(135deg, #b9c3d4, #8d9bb3); opacity: .95; }
.dsn-thumb.t-Arch i:nth-child(2) { background: #fff; left: 50%; transform: translateX(-50%); top: 50px; width: 40%; height: 7px; }
.dsn-thumb.t-Arch i:nth-child(3) { background: #fff; left: 50%; transform: translateX(-50%); top: 61px; width: 26%; height: 4px; opacity: .6; }
.dsn-thumb.t-Minimal { background: #faf8f3; }
.dsn-thumb.t-Minimal i { left: 50%; transform: translateX(-50%); }
.dsn-thumb.t-Minimal i:nth-child(1) { top: 20px; width: 62%; height: 11px; }
.dsn-thumb.t-Minimal i:nth-child(2) { top: 38px; width: 30%; height: 5px; opacity: .5; }
.dsn-thumb.t-Minimal i:nth-child(3) { top: 52px; width: 68%; height: 1px; opacity: .3; }
.dsn-swatch { height: 40px; border-radius: 8px; position: relative; overflow: hidden; display: block; }
.dsn-swatch::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.dsn-fontsample { font-size: 24px; line-height: 1.1; color: var(--navy); min-height: 40px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.dsn-fontsample.kind-script { font-size: 28px; }
.dsn-fontsample.kind-caps { font-size: 17px; letter-spacing: .03em; }
.dsn-fontsample.kind-sans { font-size: 21px; }

/* A long unbroken name (or a pasted URL) must wrap inside the page instead of widening it */
.msx-person, .msx-person > div, .msx-card, .msx-group-hd, .msx-time { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.msx-people { max-width: 100%; }
.msx-person { flex: 0 1 130px; }

/* Custom theme: the tokens arrive inline from MicrositeDesign.ThemeVars (these are only a fallback). */
.ms-theme-custom { --ms-h1:#8E6B66; --ms-h2:#634B47; --gold:#7E4C53; --navy:#392B29; --cream:#FBF8F7; --cream2:#F5EEED; --line:#ECE1DF; }

/* Arch, light and romantic: paper-toned hero with the names in ink, a fine accent frame round the
   arch, and a botanical sprig in the arch until the couple adds a photo (QA: the dark version read
   as sombre). */
.msx-lay-Arch .msx-hero { background: radial-gradient(120% 90% at 50% 0%, var(--cream2), var(--cream)); color: var(--navy); }
.msx-lay-Arch .msx-kicker { color: var(--gold); }
.msx-lay-Arch .msx-names { text-shadow: none; color: var(--navy); }
.msx-lay-Arch .msx-sub, .msx-lay-Arch .msx-venue { color: var(--navy); }
.msx-lay-Arch .msx-date { color: var(--gold); font-weight: 600; }
.msx-lay-Arch .msx-countdown { color: var(--navy); background: transparent; border: 1px solid var(--line); }
.msx-lay-Arch .msx-ghost { color: var(--navy); border-color: var(--line); background: transparent; }
.msx-lay-Arch .msx-hero-media {
  position: relative; border: 2px solid var(--gold);
  box-shadow: 0 0 0 8px var(--cream), 0 0 0 9px var(--line), 0 18px 40px rgba(0,0,0,.10);
  background: var(--ms-photo) center / cover no-repeat, linear-gradient(170deg, var(--cream2), color-mix(in srgb, var(--ms-h1) 22%, var(--cream)));
}
.msx-lay-Arch .msx-hero:not(.has-photo) .msx-hero-media::after {
  content: ""; position: absolute; inset: 16% 24% 14%; background: var(--gold); opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M50 156C50 120 47 80 52 6'/%3E%3Cpath d='M50 128c-14-4-24-14-27-28 13 2 24 12 27 28zM50 128c14-4 24-14 27-28-13 2-24 12-27 28zM50 96c-13-4-21-13-23-26 12 2 21 11 23 26zM51 96c13-4 21-13 23-26-12 2-21 11-23 26zM51 64c-11-3-18-11-20-22 10 1 18 9 20 22zM51 64c11-3 18-11 20-22-10 1-18 9-20 22zM52 34c-8-2-13-8-14-16 7 1 13 7 14 16zM52 34c8-2 13-8 14-16-7 1-13 7-14 16z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M50 156C50 120 47 80 52 6'/%3E%3Cpath d='M50 128c-14-4-24-14-27-28 13 2 24 12 27 28zM50 128c14-4 24-14 27-28-13 2-24 12-27 28zM50 96c-13-4-21-13-23-26 12 2 21 11 23 26zM51 96c13-4 21-13 23-26-12 2-21 11-23 26zM51 64c-11-3-18-11-20-22 10 1 18 9 20 22zM51 64c11-3 18-11 20-22-10 1-18 9-20 22zM52 34c-8-2-13-8-14-16 7 1 13 7 14 16zM52 34c8-2 13-8 14-16-7 1-13 7-14 16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dsn-thumb.t-Arch { background: linear-gradient(180deg, #F6EFEC, #EFE4E0); }

/* Editor: the Custom theme card carries two colour pickers. */
.dsn-custom-pickers { display: flex; gap: 8px; align-items: center; }
.dsn-custom-pickers input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.dsn-thumb.t-Arch i:nth-child(1) { background: linear-gradient(170deg, #F3E6E3, #D9C2BD); border: 1.5px solid #B08A84; opacity: 1; }
.dsn-thumb.t-Arch i:nth-child(2), .dsn-thumb.t-Arch i:nth-child(3) { background: #5E4B48; }

/* Find your invitation (public page, no personal link) */
.msx-find { max-width: 380px; margin: 16px auto 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.msx-find .btn { align-self: center; }

/* ── Six more layouts: Bloom, Confetti, Garden, Polaroid, Monogram, Postcard ──────────────
   They reuse the same hero markup as the other layouts (decoration is CSS only) and read the
   theme tokens, so every colour theme and name font works. No :has() or color-mix(): guests'
   older Android browsers don't have them. The initials for Monogram come from data-ini. */
.msx-lay-Bloom .msx-hero, .msx-lay-Confetti .msx-hero, .msx-lay-Garden .msx-hero,
.msx-lay-Polaroid .msx-hero, .msx-lay-Postcard .msx-hero { color: var(--navy); }
.msx-lay-Bloom .msx-kicker, .msx-lay-Confetti .msx-kicker, .msx-lay-Garden .msx-kicker,
.msx-lay-Polaroid .msx-kicker, .msx-lay-Postcard .msx-kicker { color: var(--gold); }
.msx-lay-Bloom .msx-sub, .msx-lay-Bloom .msx-venue, .msx-lay-Confetti .msx-sub, .msx-lay-Confetti .msx-venue,
.msx-lay-Polaroid .msx-sub, .msx-lay-Polaroid .msx-venue, .msx-lay-Postcard .msx-sub, .msx-lay-Postcard .msx-venue { color: var(--navy); }
.msx-lay-Bloom .msx-names, .msx-lay-Confetti .msx-names, .msx-lay-Polaroid .msx-names, .msx-lay-Postcard .msx-names { text-shadow: none; }
.msx-lay-Bloom .msx-hero-in, .msx-lay-Confetti .msx-hero-in, .msx-lay-Garden .msx-hero-in,
.msx-lay-Polaroid .msx-hero-in, .msx-lay-Monogram .msx-hero-in, .msx-lay-Postcard .msx-hero-in { position: relative; z-index: 1; }
.msx-lay-Bloom .msx-ghost, .msx-lay-Confetti .msx-ghost, .msx-lay-Garden .msx-ghost,
.msx-lay-Polaroid .msx-ghost, .msx-lay-Postcard .msx-ghost { color: var(--navy); border-color: var(--line); background: transparent; }
.msx-lay-Bloom .msx-countdown, .msx-lay-Garden .msx-countdown, .msx-lay-Polaroid .msx-countdown, .msx-lay-Postcard .msx-countdown { color: var(--navy); background: transparent; border: 1px solid var(--line); }

/* Bloom */
.msx-lay-Bloom .msx-hero { background: linear-gradient(180deg, var(--cream2), var(--cream) 72%, #fff); padding-top: 110px; }
.msx-lay-Bloom .msx-hero::before, .msx-lay-Bloom .msx-hero::after {
  content: ""; position: absolute; top: 0; width: min(46vw, 280px); height: min(40vw, 236px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 210'%3E%3Cg fill='%23A9C2A0'%3E%3Cellipse cx='62' cy='128' rx='46' ry='15' transform='rotate(60 62 128)'/%3E%3Cellipse cx='122' cy='58' rx='46' ry='15' transform='rotate(20 122 58)'/%3E%3Cellipse cx='152' cy='140' rx='36' ry='12' transform='rotate(40 152 140)'/%3E%3C/g%3E%3Cg transform='translate(46 46) scale(1.25)' fill='%23F6C9D2'%3E%3Ccircle cy='-18' r='14'/%3E%3Ccircle cx='15.6' cy='-9' r='14'/%3E%3Ccircle cx='15.6' cy='9' r='14'/%3E%3Ccircle cy='18' r='14'/%3E%3Ccircle cx='-15.6' cy='9' r='14'/%3E%3Ccircle cx='-15.6' cy='-9' r='14'/%3E%3Ccircle r='9' fill='%23E9B872'/%3E%3C/g%3E%3Cg transform='translate(146 88) scale(.95)' fill='%23F2B3C0'%3E%3Ccircle cy='-18' r='14'/%3E%3Ccircle cx='15.6' cy='-9' r='14'/%3E%3Ccircle cx='15.6' cy='9' r='14'/%3E%3Ccircle cy='18' r='14'/%3E%3Ccircle cx='-15.6' cy='9' r='14'/%3E%3Ccircle cx='-15.6' cy='-9' r='14'/%3E%3Ccircle r='9' fill='%23E9B872'/%3E%3C/g%3E%3Cg transform='translate(214 30) scale(.7)' fill='%23fff' stroke='%23E7D3CC'%3E%3Ccircle cy='-18' r='14'/%3E%3Ccircle cx='15.6' cy='-9' r='14'/%3E%3Ccircle cx='15.6' cy='9' r='14'/%3E%3Ccircle cy='18' r='14'/%3E%3Ccircle cx='-15.6' cy='9' r='14'/%3E%3Ccircle cx='-15.6' cy='-9' r='14'/%3E%3Ccircle r='9' fill='%23E9B872' stroke='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / contain;
}
.msx-lay-Bloom .msx-hero::before { left: 0; }
.msx-lay-Bloom .msx-hero::after { right: 0; transform: scaleX(-1); }
.msx-lay-Bloom .msx-date { color: var(--gold); font-weight: 700; }
.msx-lay-Bloom .msx-hero-media { display: none; }
.msx-lay-Bloom .msx-hero.has-photo .msx-hero-media { display: block; order: -1; position: relative; z-index: 1; width: 160px; height: 160px; margin-bottom: 24px; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 12px 30px rgba(0,0,0,.16); background: var(--ms-photo) center / cover no-repeat; }

/* Confetti */
.msx-lay-Confetti .msx-hero { background: var(--cream2); overflow: hidden; }
.msx-lay-Confetti .msx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background-image: radial-gradient(circle, var(--gold) 0 5px, transparent 6px), radial-gradient(circle, var(--ms-h1) 0 6px, transparent 7px), radial-gradient(circle, #E9B872 0 5px, transparent 6px);
  background-size: 230px 270px, 310px 230px, 190px 310px; background-position: 24px 40px, 150px 120px, 90px 210px;
}
.msx-lay-Confetti .msx-hero::after { content: ""; position: absolute; right: -90px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: var(--line); opacity: .75; pointer-events: none; }
.msx-lay-Confetti .msx-names { color: var(--ms-h1); }
.msx-lay-Confetti .msx-date { display: inline-block; background: #fff; color: var(--navy); padding: 10px 18px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.12); transform: rotate(2deg); font-weight: 800; }
.msx-lay-Confetti .msx-countdown { background: var(--gold); color: #fff; border: 0; font-weight: 800; transform: rotate(-3deg); }
.msx-lay-Confetti .msx-cta .btn-gold { border-radius: 999px; box-shadow: 0 6px 0 var(--navy); transform: translateY(-3px); }
.msx-lay-Confetti .msx-hero-media { display: none; }
.msx-lay-Confetti .msx-hero.has-photo .msx-hero-media { display: block; order: -1; position: relative; z-index: 1; width: 150px; height: 150px; margin-bottom: 22px; border-radius: 50%; border: 6px solid #fff; transform: rotate(4deg); box-shadow: 0 12px 28px rgba(0,0,0,.16); background: var(--ms-photo) center / cover no-repeat; }

/* Garden */
.msx-lay-Garden .msx-hero { background: linear-gradient(180deg, var(--cream), var(--cream2)); justify-content: flex-start; padding-top: 44px; }
.msx-lay-Garden .msx-hero-media {
  display: block; order: -1; position: relative; width: min(300px, 78vw); height: 420px; border-radius: 999px 999px 20px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42)), var(--ms-photo) center / cover no-repeat, linear-gradient(180deg, var(--line), var(--ms-h1));
}
.msx-lay-Garden .msx-hero-media::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255,255,255,.85); border-radius: 999px 999px 10px 10px; }
.msx-lay-Garden .msx-hero-in { margin-top: -176px; }
.msx-lay-Garden .msx-kicker, .msx-lay-Garden .msx-names, .msx-lay-Garden .msx-sub { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.msx-lay-Garden .msx-names { font-size: max(20px, calc(clamp(40px, 11vw, 64px) * var(--ms-nscale, 1))); }
.msx-lay-Garden .msx-date { margin-top: 44px; color: var(--gold); font-weight: 700; }
.msx-lay-Garden .msx-venue { color: var(--navy); }

/* Polaroid */
.msx-lay-Polaroid .msx-hero { background: var(--cream); overflow: hidden; padding-top: 76px; }
.msx-lay-Polaroid .msx-hero::before {
  content: ""; position: absolute; top: 94px; left: calc(50% + 6px); width: 220px; height: 260px; box-sizing: border-box;
  border: 12px solid #fff; border-bottom-width: 46px; background: linear-gradient(135deg, var(--cream2), var(--line)); box-shadow: 0 12px 26px rgba(0,0,0,.16); transform: rotate(8deg);
}
.msx-lay-Polaroid .msx-hero-media {
  display: block; order: -1; position: relative; z-index: 1; width: 220px; height: 260px; box-sizing: border-box; margin-bottom: 34px; transform: rotate(-5deg);
  border: 12px solid #fff; border-bottom-width: 46px; box-shadow: 0 14px 30px rgba(0,0,0,.2);
  background: var(--ms-photo) center / cover no-repeat, linear-gradient(135deg, var(--line), var(--ms-h1));
}
.msx-lay-Polaroid .msx-hero-media::before { content: "forever starts here"; position: absolute; left: 0; right: 0; bottom: -36px; text-align: center; font-family: var(--ms-font); font-size: 15px; color: #555; }
.msx-lay-Polaroid .msx-hero-media::after { content: ""; position: absolute; top: -24px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: rgba(233,184,114,.75); transform: rotate(-4deg); }
.msx-lay-Polaroid .msx-names { color: var(--gold); }
.msx-lay-Polaroid .msx-date { color: var(--navy); font-weight: 700; }

/* Monogram */
.msx-lay-Monogram .msx-hero { background: var(--ms-bg); color: #fff; }
.msx-lay-Monogram .msx-hero-media {
  display: flex; order: -1; position: relative; align-items: center; justify-content: center; width: 150px; height: 150px; margin-bottom: 28px; border-radius: 50%;
  border: 2px solid #E9D9AE; background: var(--ms-photo) center / cover no-repeat;
}
.msx-lay-Monogram .msx-hero-media::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(233,217,174,.6); }
.msx-lay-Monogram .msx-hero-media::before { content: attr(data-ini); font-family: var(--ms-font); font-size: 38px; letter-spacing: .04em; color: #E9D9AE; }
.msx-lay-Monogram .msx-hero.has-photo .msx-hero-media::before { display: none; }
.msx-lay-Monogram .msx-names { text-transform: uppercase; letter-spacing: .06em; }
.msx-lay-Monogram[data-fonttype="script"] .msx-names { text-transform: none; letter-spacing: 0; }
.msx-lay-Monogram .msx-kicker { color: #E9D9AE; }
.msx-lay-Monogram .msx-sub::after { content: ""; display: block; width: 60px; height: 1px; background: #E9D9AE; margin: 18px auto 0; }
.msx-lay-Monogram .msx-date { color: #E9D9AE; font-weight: 600; }
.msx-lay-Monogram .msx-cta .btn-gold { background: #E9D9AE; color: var(--ms-h2); }

/* Postcard */
.msx-lay-Postcard .msx-hero { background: var(--cream2); overflow: hidden; padding: 56px 18px; }
.msx-lay-Postcard .msx-hero-in {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.14);
  padding: 34px 28px 30px; transform: rotate(-1.5deg); max-width: 560px; text-align: left; box-sizing: border-box;
}
.msx-lay-Postcard .msx-hero-in::before { content: "MWN\A 2026"; white-space: pre; position: absolute; top: 16px; right: 16px; width: 58px; height: 72px; box-sizing: border-box; border: 2px dashed var(--gold); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 1.4; color: var(--gold); }
.msx-lay-Postcard .msx-hero-in::after { content: "SAVE\A THE DATE"; white-space: pre; position: absolute; top: 34px; right: 68px; width: 64px; height: 64px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; color: var(--gold); transform: rotate(-14deg); }
.msx-lay-Postcard .msx-names { padding-right: 90px; }
.msx-lay-Postcard .msx-cta, .msx-lay-Postcard .msx-countdown { justify-content: flex-start; }
.msx-lay-Postcard .msx-date { color: var(--gold); font-weight: 700; }
.msx-lay-Postcard .msx-hero-media {
  display: block; order: 2; position: relative; width: min(560px, 100%); height: 150px; margin-top: -16px; border-radius: 4px;
  background: var(--ms-photo) center / cover no-repeat, linear-gradient(135deg, var(--ms-h1), var(--ms-h2));
}
.msx-lay-Postcard .msx-hero-media::after { content: "SAVE THE DATE"; position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .18em; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
@media (max-width: 480px) {
  .msx-lay-Postcard .msx-hero-in { padding: 28px 18px 24px; }
  .msx-lay-Postcard .msx-names { padding-right: 70px; }
  .msx-lay-Postcard .msx-hero-in::before { width: 48px; height: 60px; font-size: 8px; }
  .msx-lay-Postcard .msx-hero-in::after { display: none; }
}

/* Editor thumbnails for the new layouts */
.dsn-thumb.t-Bloom { background: linear-gradient(180deg, #E3ECDF, #F3F6F0); }
.dsn-thumb.t-Bloom i:nth-child(1) { left: 50%; transform: translateX(-50%); top: 34px; width: 50%; height: 8px; background: #34423A; }
.dsn-thumb.t-Bloom i:nth-child(2) { left: 50%; transform: translateX(-50%); top: 48px; width: 30%; height: 4px; opacity: .55; }
.dsn-thumb.t-Bloom i:nth-child(3) { left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #F2B3C0; box-shadow: 14px 16px 0 -5px #A9C2A0, 30px 4px 0 -6px #fff; opacity: 1; }
.dsn-thumb.t-Confetti { background: #FFF1F4; }
.dsn-thumb.t-Confetti i:nth-child(1) { left: 50%; transform: translateX(-50%); top: 26px; width: 48%; height: 9px; background: #E8336E; }
.dsn-thumb.t-Confetti i:nth-child(2) { left: 50%; transform: translateX(-50%); top: 42px; width: 30%; height: 5px; opacity: .5; background: #2A1E24; }
.dsn-thumb.t-Confetti i:nth-child(3) { right: 8px; bottom: 9px; width: 26px; height: 10px; border-radius: 99px; background: #E8336E; opacity: 1; box-shadow: -60px -50px 0 -3px #A9C2A0, -48px 0 0 -3px #E9B872; }
.dsn-thumb.t-Garden { background: #F7FAF5; }
.dsn-thumb.t-Garden i:nth-child(1) { left: 50%; transform: translateX(-50%); top: 5px; width: 30px; height: 42px; border-radius: 30px 30px 3px 3px; background: linear-gradient(#DCE8D9, #9DB894); opacity: 1; }
.dsn-thumb.t-Garden i:nth-child(2) { left: 50%; transform: translateX(-50%); top: 53px; width: 44%; height: 7px; background: #2F4A30; }
.dsn-thumb.t-Garden i:nth-child(3) { left: 50%; transform: translateX(-50%); top: 64px; width: 26%; height: 4px; opacity: .5; }
.dsn-thumb.t-Polaroid { background: #FBF6EF; }
.dsn-thumb.t-Polaroid i:nth-child(1) { left: 24%; top: 8px; width: 30px; height: 36px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transform: rotate(-8deg); opacity: 1; border-radius: 1px; }
.dsn-thumb.t-Polaroid i:nth-child(2) { right: 24%; top: 12px; width: 30px; height: 36px; background: linear-gradient(135deg, #E6C3A8, #C98F6B); box-shadow: 0 2px 5px rgba(0,0,0,.25); transform: rotate(6deg); opacity: 1; border-radius: 1px; }
.dsn-thumb.t-Polaroid i:nth-child(3) { left: 50%; transform: translateX(-50%); bottom: 9px; width: 46%; height: 7px; background: #A74C2B; }
.dsn-thumb.t-Monogram { background: #0E3326; }
.dsn-thumb.t-Monogram i:nth-child(1) { left: 50%; transform: translateX(-50%); top: 8px; width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1.5px solid #D9BE7A; opacity: 1; }
.dsn-thumb.t-Monogram i:nth-child(2) { left: 50%; transform: translateX(-50%); top: 50px; width: 44%; height: 6px; background: #E9D9AE; }
.dsn-thumb.t-Monogram i:nth-child(3) { left: 50%; transform: translateX(-50%); top: 62px; width: 26%; height: 3px; opacity: .6; background: #E9D9AE; }
.dsn-thumb.t-Postcard { background: #E8EEF4; }
.dsn-thumb.t-Postcard i:nth-child(1) { left: 14%; top: 9px; width: 72%; height: 36px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: rotate(-2deg); opacity: 1; border-radius: 2px; }
.dsn-thumb.t-Postcard i:nth-child(2) { right: 20%; top: 14px; width: 11px; height: 14px; border: 1.5px dashed #476A8C; background: transparent; opacity: 1; border-radius: 0; }
.dsn-thumb.t-Postcard i:nth-child(3) { left: 14%; bottom: 8px; width: 72%; height: 14px; background: #5E788F; opacity: 1; border-radius: 2px; }