/* B02 · Pastel Unicorn & Rainbow: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-latin-700-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* sticker proportions (img/st-*.webp) */
:root { --ar-castle: 360 / 381; --ar-rainbow: 380 / 203; --ar-rainbow-s: 260 / 119; --ar-uni-fly: 300 / 375; --ar-uni-sleep: 340 / 307; }

/* B02 · Pastel Unicorn & Rainbow: pink and lilac sky, clouds, gold stars, magenta script and ribbons; unicorns, rainbow and castle from the mockup. */
:root {
  --bg: #fbe9f3; --bg2: #f7dcec; --ink: #5b2d4f; --muted: #7f5a76; --accent: #d6448a; --accent2: #f6c35b;
  --line: rgb(214 68 138 / .2);
  --card: rgb(255 255 255 / .72); --card-line: rgb(232 170 205 / .7); --card-shadow: 0 10px 26px rgb(200 110 160 / .14); --radius: 22px;
  --btn-bg: linear-gradient(180deg, #ef7fb2, #d6448a); --btn-ink: #fff; --btn-shadow: 0 4px 0 #b32f6f, 0 12px 22px rgb(214 68 138 / .3); --btn-font: "Lora", Georgia, serif;
  --f-display: "Playfair Display", Georgia, serif; --f-script: "Dancing Script", cursive; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-font: var(--f-script); --name-size: 4.6rem; --name-weight: 700; --name-color: #cf3f86;
  --head-size: 1.55rem; --head-color: #c2367d; --head-ink: #c2367d;
  --kicker-color: #c2367d; --kicker-font: var(--f-display);
  --photo-radius: 160px 160px 26px 26px; --photo-border: 6px solid #fff; --photo-shadow: 0 16px 34px rgb(190 90 150 / .28); --cover-ar: 3 / 4;
  --gate-bg: linear-gradient(180deg, rgb(255 240 248 / .55), rgb(246 222 240 / .35)), url(../img/bg.webp) center / cover, #f6d9ec; --gate-ink: #5b2d4f;
  --guest-bg: rgb(255 255 255 / .78); --guest-line: rgb(232 170 205 / .9);
  --cd-title: #c2367d; --cd-num: #8a2c66; --cd-label: #8a2c66;
  --cd-tile: linear-gradient(180deg, #fff 0, #fbe1ef 100%); --cd-tile-border: 3px solid #fff; --cd-tile-radius: 18px; --cd-tile-shadow: 0 6px 14px rgb(200 100 160 / .18);
  --dt-ic: #d6448a; --dt-ic-bg: #fde3f0; --dt-label: #c2367d; --av-bg: linear-gradient(135deg, #f7a8cc, #c58be0); --av-ink: #fff;
}
body { background: radial-gradient(ellipse at 10% 10%, #fde7f3 0, transparent 45%), radial-gradient(ellipse at 90% 40%, #eedcf7 0, transparent 45%),
  radial-gradient(ellipse at 20% 85%, #f6dcf3 0, transparent 45%), #fbe9f3; }
.inv { background: transparent; }

/* Title: magenta serif, gold crown, script name with a white outline, pink ribbon */
.ttl__kicker { font: 700 .95rem/1.3 var(--f-display); letter-spacing: .04em; text-transform: none; }
.ttl__pre { font: 700 1.5rem/1.2 var(--f-display); color: #c2367d; max-width: 13em; text-shadow: 0 2px 0 #fff; }
.orn--crown svg { width: 54px; margin: 8px auto -6px; color: #e2ac3f; filter: drop-shadow(0 2px 0 #fff6d8) drop-shadow(0 3px 4px rgb(160 110 20 / .3)); }
.ttl__name { background: linear-gradient(180deg, #ee69a8 0, #c2367d 60%, #a52a6b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 8px 10px rgb(180 60 120 / .28));
  padding: 0 .15em; line-height: 1.1; }
.ttl__age span, .h-sec__t { position: relative; isolation: isolate; }
.ttl__age span { font: 700 1.15rem/1.2 var(--f-display); color: #fff; background: linear-gradient(180deg, #f59ac3, #df6aa0); padding: 8px 26px 9px; border-radius: 4px;
  box-shadow: 0 3px 0 #c45087; text-shadow: 0 1px 0 rgb(150 40 90 / .4); }
.ttl__age span::before, .ttl__age span::after, .h-sec__t::before, .h-sec__t::after { content: ""; position: absolute; top: 9px; bottom: -9px; width: 26px; z-index: -1;
  background: #e98ab6; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.ttl__age span::before, .h-sec__t::before { left: -18px; }
.ttl__age span::after, .h-sec__t::after { right: -18px; transform: scaleX(-1); }
.ttl .lead { color: #5b2d4f; font-size: 1rem; }
.orn--div svg { width: 120px; color: #e57fb0; }
.gate__date, .side__date { font: italic 700 1.05rem var(--f-display); color: #8a2c66; }

/* Headings on a pale pink ribbon */
.h-sec__t { background: linear-gradient(180deg, #fde3ef, #f8c5dc); padding: 7px 22px 8px; border-radius: 4px; box-shadow: 0 3px 0 #eaa1c4; }
.h-sec__t::before, .h-sec__t::after { background: #f1afcd; }
.h-sec__ic { color: #c2367d; }
.h-sec__sub, .lead { color: #6c4061; }

/* Countdown on a cloud */
.sec--countdown { padding-top: 30px; }
.cd-box { background: rgb(255 255 255 / .62); border-radius: 48px 48px 30px 30px; padding: 20px 12px 22px; box-shadow: 0 14px 30px rgb(200 110 160 / .16); position: relative; }
.cd__t { font: italic 700 1.45rem/1.2 var(--f-display); }
.cd__c:nth-child(2) { --cd-tile: linear-gradient(180deg, #fff, #f1e2fb); }
.cd__c:nth-child(3) { --cd-tile: linear-gradient(180deg, #fff, #fde7da); }
.cd__c:nth-child(4) { --cd-tile: linear-gradient(180deg, #fff, #e6e3fb); }
.cd__n { font-weight: 700; }

/* Details, map and the rest */
.dt { background: rgb(255 255 255 / .75); border: 2px solid #f6d18a; }
.btn--map { --map-bg: linear-gradient(180deg, #b76ad8, #9147c4); --map-ink: #fff; --map-line: transparent; box-shadow: 0 4px 0 #7a35a8; }
.link--map, .link--cal, .link { color: #9147c4; }
.gallery__item { border: 5px solid #fff; border-radius: 20px; box-shadow: 0 10px 22px rgb(190 90 150 / .2); }
.wish { background: rgb(255 255 255 / .8); }
.closing__t { font-size: 1.9rem; color: #c2367d; }
.closing__name { font-size: 3.4rem; background: linear-gradient(180deg, #ee69a8, #a52a6b); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.sec--closing { padding-bottom: 120px; }
.sec--closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: url(../img/b02-cloud.svg) bottom / 100% 100% no-repeat; z-index: 1; opacity: .95; }

/* Falling gold sparkles and pink hearts */
.fx i { width: 13px; height: 13px; background: url(../img/b02-spark.svg) center / contain no-repeat; }
.fx i:nth-child(3n) { background-image: url(../img/b02-heart.svg); width: 12px; height: 11px; }

/* ---------- Unicorns, rainbow and castle from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(170 80 140 / .2)); }
.gate__in .o1, .side__in .o1 { left: -14px; top: 236px; width: 112px; aspect-ratio: var(--ar-uni-fly); background-image: url(../img/st-uni-fly.webp); }
.gate__in .o2, .side__in .o2 { right: -14px; top: 260px; width: 132px; aspect-ratio: var(--ar-uni-sleep); background-image: url(../img/st-uni-sleep.webp); }
.gate__in .o3, .side__in .o3 { left: 2px; top: 8px; width: 116px; aspect-ratio: var(--ar-rainbow-s); background-image: url(../img/st-rainbow-s.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -8px; top: 10px; width: 30vw; max-width: 124px; aspect-ratio: var(--ar-castle); background-image: url(../img/st-castle.webp); }
.sec--hero .o2 { left: -16px; top: 250px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-uni-fly); background-image: url(../img/st-uni-fly.webp); }
.sec--hero .o3 { right: -14px; top: 290px; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-uni-sleep); background-image: url(../img/st-uni-sleep.webp); }
.photo--hero { width: min(64vw, 260px); }
.sec--countdown .o1 { left: -24px; top: 0; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-rainbow-s); background-image: url(../img/st-rainbow-s.webp); opacity: .9; }
.sec--gallery .o1 { right: -30px; top: 0; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-rainbow); background-image: url(../img/st-rainbow.webp); opacity: .85; }
.sec--wishes .o1 { left: -18px; top: 6px; width: 28vw; max-width: 110px; aspect-ratio: var(--ar-uni-fly); background-image: url(../img/st-uni-fly.webp); }
.sec--closing .o1 { right: -20px; bottom: 18px; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-rainbow); background-image: url(../img/st-rainbow.webp); }
.sec--closing .o2 { left: -10px; bottom: 20px; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-uni-sleep); background-image: url(../img/st-uni-sleep.webp); transform: scaleX(-1); }

@media (min-width: 1024px) {
  .side__in .o1 { left: 40px; } .side__in .o2 { right: 40px; } .side__in .o3 { left: 60px; }
}