/* A02 · Baby Blue Blessing: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Satisfy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satisfy-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: italic; font-weight: 600; font-display: swap; src: url("../fonts/lora-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; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-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: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-bismillah.woff2") format("woff2"); unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-moon: 330 / 180; --sx-moon: 86.75; --sy-moon: 67.0; --sw-moon: 206.75; --ar-star-hang: 70 / 171; --sx-star-hang: 363.75; --sy-star-hang: 50.0; --sw-star-hang: 30.5; --ar-bunting: 380 / 172; --sx-bunting: 836.0; --sy-bunting: 51.75; --sw-bunting: 249.5; --ar-balloon: 230 / 360; --sx-balloon: 932.5; --sy-balloon: 177.25; --sw-balloon: 138.0; --ar-star-sleep: 200 / 162; --sx-star-sleep: 31.5; --sy-star-sleep: 1072.0; --sw-star-sleep: 109.0; --ar-mosque: 170 / 283; --sx-mosque: 1004.0; --sy-mosque: 1185.75; --sw-mosque: 95.5; }
.phw { --cx0: 15; --cy0: 108; --cw: 440; --ch: 410; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-moon.webp); left: calc((var(--sx-moon) - var(--cx0)) * var(--k)); top: calc((var(--sy-moon) - var(--cy0)) * var(--k)); width: calc(var(--sw-moon) * var(--k)); aspect-ratio: var(--ar-moon); z-index: -1; }

/* A02 · Baby Blue Blessing: watercolour sky blue, white clouds, a gold crown and stars, navy script; moon, bunting, balloon and mosque from the mockup. */
:root {
  --bg: #e6f1fb; --bg2: #d3e6f6; --ink: #22406a; --muted: #4a6488; --accent: #4f86c1; --accent2: #f1c86b;
  --line: rgb(79 134 193 / .22);
  --card: rgb(255 255 255 / .72); --card-line: rgb(255 255 255 / .95); --card-shadow: 0 10px 26px rgb(60 110 170 / .14); --radius: 20px;
  --btn-bg: linear-gradient(180deg, #86b6e2, #5a92c8); --btn-ink: #fff; --btn-border: 2px solid rgb(255 255 255 / .8); --btn-shadow: 0 8px 20px rgb(70 120 180 / .3);
  --f-display: "Lora", Georgia, serif; --f-script: "Satisfy", cursive; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-font: var(--f-script); --name-size: 2.65rem; --name-weight: 400; --name-color: #1f3d6e;
  --head-size: 1.35rem; --head-weight: 600; --head-style: italic; --head-color: #22406a; --head-ink: #22406a;
  --kicker-color: #22406a; --bism-color: #2b4a78;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 15% 80%, #fff 0, rgb(255 255 255 / 0) 42%), radial-gradient(ellipse at 90% 30%, #fff 0, rgb(255 255 255 / 0) 38%), linear-gradient(180deg, #cfe3f6, #e8f2fc 55%, #f3f8fd);
  --guest-bg: rgb(255 255 255 / .75); --guest-line: rgb(255 255 255 / .95);
  --cd-title: #22406a; --cd-num: #22406a; --cd-label: #4a6488;
  --cd-tile: rgb(255 255 255 / .8); --cd-tile-border: 1px solid #fff; --cd-tile-radius: 14px; --cd-tile-shadow: 0 4px 12px rgb(60 110 170 / .12);
  --dt-ic: #3d6ea8; --dt-ic-bg: transparent; --dt-label: #22406a; --av-bg: #d5e6f6; --av-ink: #3d6ea8;
}
body { background: radial-gradient(ellipse at 0 20%, #fff 0, rgb(255 255 255 / 0) 30%), radial-gradient(ellipse at 100% 55%, #fff 0, rgb(255 255 255 / 0) 30%), linear-gradient(180deg, #d7e8f8, #eaf3fc 30%, #e3effa 70%, #edf5fc); }
.inv { background: transparent; }
.card, .dt, .wcomp, .wish, .note { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* The baby on clouds: the photo melts into the sky */
.phw .photo { background: none; border-radius: 0; box-shadow: none;
  -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 99%); mask: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 99%); }
.phw--cover { --pw: min(70vw, 280px); margin: 44px auto 4px; }
.phw--hero { --pw: min(84vw, 340px); margin: 40px auto 0; }
.phw .p2 { left: calc((var(--sx-star-hang) - var(--cx0)) * var(--k)); top: calc((var(--sy-star-hang) - var(--cy0)) * var(--k)); width: calc(var(--sw-star-hang) * var(--k)); aspect-ratio: var(--ar-star-hang); background-image: url(../img/st-star-hang.webp); }

/* Title: Bismillah, the kicker on a pale blue brush ribbon with sprigs, crown, navy script on a cloud */
.ttl__bism { font-size: 1.55rem; }
.ttl__kicker span, .h-sec__t { position: relative; background: linear-gradient(90deg, rgb(185 214 240 / 0), #bcd8f1 14%, #c6def3 50%, #bcd8f1 86%, rgb(185 214 240 / 0)); padding: 5px 40px 7px; border-radius: 4px; }
.ttl__kicker span { font: italic 600 1.55rem/1.2 var(--f-display); }
.ttl__kicker span::before, .ttl__kicker span::after, .h-sec__t::before, .h-sec__t::after { content: ""; position: absolute; top: 50%; width: 30px; height: 13px; margin-top: -6px; background: url(../img/a02-sprig.svg) center / contain no-repeat; }
.ttl__kicker span::before, .h-sec__t::before { left: -24px; transform: scaleX(-1); }
.ttl__kicker span::after, .h-sec__t::after { right: -24px; }
.ttl__salam { font-weight: 600; color: #22406a; margin-top: 10px; }
.ttl .lead { color: #263f63; max-width: 330px; }
.orn--crown svg { width: 40px; margin: 10px auto -6px; color: #ecb840; filter: drop-shadow(0 2px 2px rgb(150 100 20 / .25)); }
.ttl__name span { padding: 14px 22px 18px; background: radial-gradient(ellipse at center, #fff 50%, rgb(255 255 255 / .7) 62%, rgb(255 255 255 / 0) 72%); line-height: 1.15; }
.ttl__sub span { position: relative; color: #22406a; background: linear-gradient(180deg, #d4e6f7, #b9d5ef); padding: 5px 34px 6px; border-radius: 3px; font: 500 .95rem/1.2 var(--f-body); }
.ttl__sub span::before, .ttl__sub span::after { content: "\2665"; position: absolute; top: 50%; transform: translateY(-52%); color: #fff; font-size: .95rem; }
.ttl__sub span::before { left: 12px; } .ttl__sub span::after { right: 12px; }
.par__l { color: #263f63; font-size: .92rem; }
.par__n { color: #1f3d6e; font-size: 1.12rem; }
.gate__date, .side__date { color: #22406a; font-style: italic; }

/* Headings on the same ribbon, with icons */
.h-sec__t { font-size: 1.3rem; }
.h-sec__ic { color: #3d6ea8; }
.h-sec__sub, .lead { color: #3c5679; }

/* Countdown in a frosted card */
.sec--countdown { padding-top: 20px; }
.cd-box { background: rgb(255 255 255 / .55); border: 1.5px solid rgb(255 255 255 / .95); border-radius: 22px; padding: 14px 12px 18px; box-shadow: 0 12px 28px rgb(60 110 170 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd__t { font-style: italic; font-size: 1.15rem; }
.cd__ic { color: #3d6ea8; }
.cd__n { font-weight: 600; }

/* Details */
.dts { gap: 0; background: rgb(255 255 255 / .7); border: 1.5px solid #fff; border-radius: 22px; padding: 6px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dt + .dt { border-top: 1px solid rgb(79 134 193 / .18); }
.dt__l { font-weight: 700; color: #22406a; }
.btn--map { --map-bg: rgb(255 255 255 / .8); --map-ink: #3d6ea8; --map-line: #fff; }
.link, .link--map, .link--cal { color: #3d6ea8; }

/* Gallery, wishes */
.gallery__item { border: 4px solid #fff; border-radius: 16px; box-shadow: 0 10px 22px rgb(60 110 170 / .18); }
.btn--send { padding: 12px 14px; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }

/* Closing on clouds */
.sec--closing { padding-bottom: 150px; }
.sec--closing::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 90px; background: url(../img/a02-cloud.svg) bottom / 100% 100% no-repeat; z-index: 1; }
.closing__t span { font-style: italic; }
.closing__p.salam { font-style: italic; font-weight: 600; color: #22406a; margin-top: 14px; }
.closing__sign, .closing__p { color: #263f63; }
.orn--div svg { width: 130px; color: #3d6ea8; }

/* Drifting gold stars */
.fx i { width: 11px; height: 11px; background: url(../img/a02-star.svg) center / contain no-repeat; }

/* ---------- Moon, bunting, balloon, sleeping star and mosque from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(60 110 170 / .15)); }
.gate__in .o1, .side__in .o1 { right: -40px; top: -8px; width: 52vw; max-width: 200px; aspect-ratio: var(--ar-bunting); background-image: url(../img/st-bunting.webp); }
.gate__in .o2, .side__in .o2 { right: -18px; top: 210px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-balloon); background-image: url(../img/st-balloon.webp); }
.sec--hero .o1 { right: -40px; top: -6px; width: 52vw; max-width: 200px; aspect-ratio: var(--ar-bunting); background-image: url(../img/st-bunting.webp); }
.sec--hero .o2 { right: -14px; top: 280px; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-balloon); background-image: url(../img/st-balloon.webp); }
.sec--details .o1 { left: -20px; bottom: 30px; width: 24vw; max-width: 94px; aspect-ratio: var(--ar-star-sleep); background-image: url(../img/st-star-sleep.webp); }
.sec--gallery .o1 { right: -16px; top: 10px; width: 20vw; max-width: 80px; aspect-ratio: var(--ar-balloon); background-image: url(../img/st-balloon.webp); }
.sec--closing .o1 { right: 4px; bottom: 26px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); z-index: 2; }
.sec--closing .o2 { left: 2px; bottom: 34px; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-star-sleep); background-image: url(../img/st-star-sleep.webp); z-index: 2; }

@media (min-width: 1024px) { .phw--side { --pw: min(26vw, 320px); } .side__in .o1 { right: 4%; } .side__in .o2 { right: 8%; top: 40%; } }