/* B04 · Under the Sea Mermaid: 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: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-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: 340 / 298; --ar-dolphin: 340 / 248; --ar-seahorse: 140 / 178; --ar-turtle: 320 / 204; --ar-seahorse-p: 180 / 285; --ar-shell: 380 / 369; --ar-jelly: 300 / 358; --ar-jelly-s: 140 / 192; }

/* B04 · Under the Sea Mermaid: aqua water, light rays and bubbles, pearl cards, pink and lilac shells; sea creatures from the mockup. */
:root {
  --bg: #7fdbe7; --bg2: #d8f4f8; --ink: #3a2a5a; --muted: #5d5280; --accent: #e0559b; --accent2: #f6c35b;
  --line: rgb(58 42 90 / .16);
  --card: rgb(255 250 253 / .9); --card-line: rgb(206 170 225 / .75); --card-shadow: 0 10px 26px rgb(20 90 120 / .18); --radius: 22px;
  --btn-bg: linear-gradient(180deg, #f27fb3, #d9488e); --btn-ink: #fff; --btn-shadow: 0 4px 0 #b3306f, 0 12px 22px rgb(170 40 110 / .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-color: #c93c8d;
  --head-size: 1.65rem; --head-color: #3a2a5a; --head-ink: #3a2a5a;
  --kicker-color: #3a2a5a; --kicker-font: var(--f-display);
  --photo-radius: 30px; --photo-border: 6px solid #fff; --photo-shadow: 0 0 0 3px rgb(230 190 240 / .9), 0 18px 34px rgb(10 70 100 / .3); --cover-ar: 1 / 1;
  --gate-bg: url(../img/b04-rays.svg) top / 100% 70% no-repeat, linear-gradient(180deg, rgb(150 235 245 / .35), rgb(40 170 195 / .25)), url(../img/bg.webp) center / cover, #45c2d4;
  --gate-ink: #3a2a5a; --guest-bg: rgb(255 250 253 / .9); --guest-line: rgb(206 170 225 / .9);
  --cd-title: #3a2a5a; --cd-num: #5a2d7a; --cd-label: #3a2a5a;
  --cd-tile: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(208 240 250 / .9)); --cd-tile-border: 2px solid #fff; --cd-tile-radius: 16px;
  --cd-tile-shadow: 0 0 0 1px rgb(150 200 230 / .6), 0 8px 16px rgb(20 90 120 / .2);
  --dt-ic: #e0559b; --dt-ic-bg: #fde3f0; --dt-label: #3a2a5a; --av-bg: linear-gradient(135deg, #fbd2e5, #d7c2f1); --av-ink: #8a3e7d;
}
body { background: url(../img/b04-rays.svg) top / 100% 900px no-repeat, linear-gradient(180deg, #9fe6ef 0, #62d1e0 30%, #3fc0d3 70%, #34b0c8 100%); }
.inv { background: transparent; }

/* Title: pearl plaque, crown, pink script, shell label */
.ttl__kicker span { font: 700 1.05rem/1.2 var(--f-display); letter-spacing: 0; text-transform: none; color: #3a2a5a; background: linear-gradient(180deg, #fff6f1, #f5ddd8);
  padding: 8px 22px; border-radius: 14px; border: 2px solid #f1c9c4; box-shadow: 0 4px 10px rgb(20 90 120 / .2); }
.ttl__pre { font: 600 1.15rem/1.3 var(--f-display); color: #3a2a5a; margin-top: 8px; max-width: 14em; }
.orn--crown svg { width: 52px; margin: 6px auto -8px; color: #e8b84a; filter: drop-shadow(0 2px 0 #fff6d8) drop-shadow(0 3px 4px rgb(120 90 20 / .3)); }
.ttl__name { background: linear-gradient(180deg, #f07cb6 0, #c93c8d 55%, #8c4fc0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em;
  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(60 30 110 / .3)); line-height: 1.1; }
.ttl__age span { font: 700 1.05rem/1.2 var(--f-display); background: linear-gradient(180deg, #f59ac3, #df6aa0); box-shadow: 0 3px 0 #c45087; }
.ttl .lead { color: #2f2350; font-size: 1rem; font-weight: 600; text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.ttl__theme { margin-top: 10px; }
.ttl__theme span { position: relative; font: italic 600 1.25rem/1.2 var(--f-display); color: #c93c8d; background: linear-gradient(180deg, #fffaf6, #fbe6ec); padding: 8px 46px;
  border-radius: 999px; border: 2px solid #f6cfdc; box-shadow: 0 6px 14px rgb(20 90 120 / .18); }
.ttl__theme span::before, .ttl__theme span::after { content: ""; position: absolute; top: 50%; width: 26px; height: 23px; margin-top: -12px; background: url(../img/b04-shell.svg) center / contain no-repeat; }
.ttl__theme span::before { left: 12px; } .ttl__theme span::after { right: 12px; }
.ttl__theme b { font-weight: inherit; }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 6px 18px; border-radius: 999px; background: rgb(255 250 253 / .88); color: #5a2d7a; font-weight: 600; }
.side__guest { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgb(255 250 253 / .85); }

/* Headings: plum serif between shells */
.h-sec .orn--head-top { display: none; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 30px; height: 26px; flex: none; background: url(../img/b04-shell.svg) center / contain no-repeat; }
.h-sec__t { text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.h-sec__sub, .lead { color: #2f2350; font-weight: 600; }
.hint { color: #2f2350; }

/* Hero, countdown */
.photo--hero { width: min(70vw, 290px); }
.cd-box { background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(220 245 252 / .45)); border: 2px solid rgb(255 255 255 / .8); border-radius: 40px 40px 26px 26px; padding: 18px 12px 20px;
  box-shadow: 0 12px 30px rgb(20 90 120 / .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd__t { font-size: 1.3rem; }
.link--cal, .link, .link--map { color: #5a2d7a; }

/* Details on pearl cards */
.dt { border: 2px solid rgb(206 170 225 / .75); }
.btn--map { --map-bg: rgb(255 250 253 / .92); --map-ink: #c93c8d; --map-line: #f3bfd6; }
.gallery__item { border: 5px solid #fff; border-radius: 20px; box-shadow: 0 10px 22px rgb(10 70 100 / .22); }
.wcomp, .wish, .card { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wcomp__ic { display: grid; place-items: center; width: 34px; height: 46px; color: #8a3e7d; }
.btn--send { padding: 12px; }
.closing__t { font-size: 1.9rem; }
.closing__name { font-size: 3.4rem; background: linear-gradient(180deg, #f07cb6, #8c4fc0); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  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); }
.sec--closing { padding-bottom: 130px; }
.closing__sign, .made, .closing__p { color: #2f2350; }
.made { opacity: .75; }

/* Rising bubbles */
.fx i { width: 16px; height: 16px; background: url(../img/b04-bubble.svg) center / contain no-repeat; }

/* ---------- Sea creatures from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(10 60 90 / .25)); }
.gate__in .o1, .side__in .o1 { right: -16px; top: 168px; width: 124px; aspect-ratio: var(--ar-dolphin); background-image: url(../img/st-dolphin.webp); }
.gate__in .o2, .side__in .o2 { left: -10px; top: 190px; width: 56px; aspect-ratio: var(--ar-seahorse-p); background-image: url(../img/st-seahorse-p.webp); }
.gate__in .o3, .side__in .o3 { right: 4px; top: -6px; width: 52px; aspect-ratio: var(--ar-jelly-s); background-image: url(../img/st-jelly-s.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -12px; top: 6px; width: 30vw; max-width: 124px; aspect-ratio: var(--ar-castle); background-image: url(../img/st-castle.webp); }
.sec--hero .o2 { left: -14px; top: 228px; width: 32vw; max-width: 128px; aspect-ratio: var(--ar-turtle); background-image: url(../img/st-turtle.webp); }
.sec--hero .o3 { right: -8px; top: 262px; width: 16vw; max-width: 62px; aspect-ratio: var(--ar-seahorse); background-image: url(../img/st-seahorse.webp); }
.sec--countdown .o1 { left: -16px; bottom: -4px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-seahorse-p); background-image: url(../img/st-seahorse-p.webp); }
.sec--details .o1 { right: -22px; top: 0; width: 32vw; max-width: 130px; aspect-ratio: var(--ar-dolphin); background-image: url(../img/st-dolphin.webp); }
.sec--gallery .o1 { left: -14px; top: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-jelly); background-image: url(../img/st-jelly.webp); opacity: .9; }
.sec--wishes .o1 { right: -14px; top: 4px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-jelly-s); background-image: url(../img/st-jelly-s.webp); }
.sec--closing .o1 { left: -14px; bottom: -6px; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-shell); background-image: url(../img/st-shell.webp); }
.sec--closing .o2 { right: -14px; bottom: 10px; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-turtle); background-image: url(../img/st-turtle.webp); }

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