/* A03 · Blush Pink Floral: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Alex Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alex-brush-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: 500; font-display: swap; src: url("../fonts/lora-latin-500-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: 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-mobile: 220 / 244; --sx-mobile: 941.75; --sy-mobile: 45.0; --sw-mobile: 148.75; --ar-horse: 220 / 197; --sx-horse: 959.75; --sy-horse: 269.0; --sw-horse: 127.0; --ar-rose-l: 200 / 338; --sx-rose-l: 0.0; --sy-rose-l: 445.0; --sw-rose-l: 127.25; --ar-rose-r: 200 / 285; --sx-rose-r: 993.75; --sy-rose-r: 444.0; --sw-rose-r: 128.25; --ar-roses-bl: 340 / 279; --sx-roses-bl: 0.0; --sy-roses-bl: 1200.0; --sw-roses-bl: 245.75; --ar-roses-br: 340 / 238; --sx-roses-br: 868.0; --sy-roses-br: 1224.25; --sw-roses-br: 254.0; --ar-bow: 300 / 77; --sx-bow: 462.0; --sy-bow: 505.5; --sw-bow: 156.0; --ar-bow-big: 300 / 92; --sx-bow-big: 465.0; --sy-bow-big: 1342.25; --sw-bow-big: 195.0; }
.phw { --cx0: 95; --cy0: 52; --cw: 440; --ch: 330; }

/* A03 · Blush Pink Floral: dusty pink and ivory, roses and baby's breath, satin bows, mauve script; flowers, bows, mobile and rocking horse from the mockup. */
:root {
  --bg: #fcf1f1; --bg2: #f7e1e4; --ink: #4d3036; --muted: #7a5a60; --accent: #b25f78; --accent2: #f2c9d2;
  --line: rgb(178 95 120 / .2);
  --card: rgb(255 252 251 / .88); --card-line: #f1d3da; --card-shadow: 0 10px 26px rgb(178 95 120 / .1); --radius: 20px;
  --btn-bg: linear-gradient(180deg, #cf7e95, #b05d76); --btn-ink: #fff; --btn-border: 2px solid rgb(255 255 255 / .7); --btn-shadow: 0 8px 20px rgb(176 93 118 / .3);
  --f-display: "Lora", Georgia, serif; --f-script: "Alex Brush", 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.9rem; --name-weight: 400; --name-color: #b25f78;
  --head-size: 1.4rem; --head-weight: 500; --head-color: #7d3b52; --head-ink: #7d3b52;
  --kicker-color: #a65b73; --bism-color: #8e4d62;
  --photo-radius: 28px 28px 0 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 10% 90%, #f9dfe4 0, rgb(249 223 228 / 0) 40%), radial-gradient(ellipse at 95% 10%, #fbe6e9 0, rgb(251 230 233 / 0) 40%), #fdf4f3;
  --guest-bg: rgb(255 252 251 / .9); --guest-line: #f1d3da;
  --cd-title: #7d3b52; --cd-num: #a1455f; --cd-label: #7a5a60;
  --cd-tile: linear-gradient(180deg, #fbe6ea, #f5d4db); --cd-tile-border: 1px solid #fff; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 10px rgb(178 95 120 / .14);
  --dt-ic: #b25f78; --dt-ic-bg: transparent; --dt-label: #a65b73; --av-bg: #f6dde3; --av-ink: #b25f78;
}
body { background: radial-gradient(ellipse at 0 15%, #f9e1e5 0, rgb(249 225 229 / 0) 32%), radial-gradient(ellipse at 100% 60%, #fae4e7 0, rgb(250 228 231 / 0) 32%), #fdf4f3; }
.inv { background: transparent; }

/* The photo: a soft banner that fades into the page */
.phw .photo { background: none; box-shadow: none; -webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%); mask: linear-gradient(180deg, #000 72%, transparent 100%); }
.phw--cover { --pw: min(86vw, 350px); margin: 0 auto 2px; }
.phw--hero { --pw: calc(100% + 44px); margin: -34px -22px 0; }
.phw--hero .photo { border-radius: 0; }

/* Title */
.ttl__bism { font-size: 1.5rem; }
.ttl__kicker { font: 500 1.65rem/1.2 var(--f-display); }
.ttl__kicker::before { content: ""; display: block; width: 120px; height: 22px; margin: 0 auto 4px; background: url(../img/st-bow.webp) center / contain no-repeat; }
.ttl__pre { font: 400 1.05rem/1.3 var(--f-display); color: #5b3d44; }
.ttl__name { margin: 2px 0 6px; }
.ttl__name span { background: linear-gradient(180deg, #c8708c, #a64f6a); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em; }
.ttl__sub span { position: relative; color: #7d3b52; background: linear-gradient(180deg, #fbe3e8, #f4cfd8); padding: 5px 36px 6px; border-radius: 3px; font: 500 .92rem/1.2 var(--f-body); }
.ttl__sub span::before, .ttl__sub span::after { content: "\2665"; position: absolute; top: 50%; transform: translateY(-52%); color: #d8839b; font-size: .9rem; }
.ttl__sub span::before { left: 13px; } .ttl__sub span::after { right: 13px; }
.gate__date, .side__date { font-style: italic; color: #7d3b52; }

/* Greeting under the banner */
.sec--greeting { padding-top: 10px; padding-bottom: 6px; }
.sec--greeting .ttl__salam { font: italic 500 1.18rem/1.4 var(--f-display); color: #8e4d62; margin-bottom: 4px; }
.sec--greeting .lead { color: #4d3036; max-width: 360px; }

/* Details: one card with a satin bow on top */
.sec--details { padding-top: 40px; }
.dts { gap: 0; background: var(--card); border: 1px solid #f1d3da; border-radius: 22px; padding: 18px 16px 8px; box-shadow: var(--card-shadow); position: relative; }
.dts::before { content: ""; position: absolute; left: 50%; top: -24px; width: 156px; height: 40px; margin-left: -78px; background: url(../img/st-bow.webp) center / contain no-repeat; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(178 95 120 / .18); }
.dt__ic .ic { width: 28px; height: 28px; }
.btn--map { --map-ink: #a64f6a; --map-line: #f1d3da; --map-bg: #fff; }
.link, .link--map, .link--cal { color: #a64f6a; }

/* Countdown */
.sec--countdown { padding-top: 18px; }
.cd__t { font-style: italic; font-weight: 500; gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 30px; height: 12px; background: url(../img/a03-sprig.svg) center / contain no-repeat; }
.cd__t::before { transform: scaleX(-1); }

/* Hosts */
.sec--hosts { padding-top: 10px; padding-bottom: 20px; }
.par--hosts .par__l { font-size: .95rem; color: #7a5a60; display: flex; gap: 10px; align-items: center; }
.par--hosts .par__l::before, .par--hosts .par__l::after { content: ""; width: 14px; height: 1px; background: #b97c8c; }
.par__n { color: #3e2a2f; font-size: 1.15rem; }
.orn--div svg { width: 160px; color: #d27e98; }

/* Headings */
.h-sec__ic { color: #b25f78; }
.sec--gallery { padding-top: 70px; }
.sec--gallery .sec__in::before { content: ""; display: block; width: 200px; height: 46px; margin: -40px auto 14px; background: url(../img/st-bow-big.webp) center / contain no-repeat; }
.gallery__item { border: 4px solid #fff; border-radius: 16px; box-shadow: 0 10px 22px rgb(178 95 120 / .16); }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.btn--send { padding: 12px 14px; }

/* Closing: roses at the corners, a bow in the middle */
.sec--closing { padding-bottom: 170px; }
.closing__t span { color: #a64f6a; font-weight: 500; }
.closing__p.salam { font-style: italic; color: #8e4d62; margin-top: 14px; }
.closing__sign { color: #5b3d44; }

/* Falling petals */
.fx i { width: 13px; height: 11px; background: url(../img/a03-petal.svg) center / contain no-repeat; }

/* ---------- Flowers, bows, mobile and rocking horse from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(160 90 110 / .14)); }
.gate__in .o1, .side__in .o1 { right: -14px; top: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-mobile); background-image: url(../img/st-mobile.webp); }
.gate__in .o2, .side__in .o2 { left: -26px; bottom: 120px; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-rose-l); background-image: url(../img/st-rose-l.webp); }
.gate__in .o3, .side__in .o3 { right: -26px; bottom: 180px; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-rose-r); background-image: url(../img/st-rose-r.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: 4px; top: 6px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-mobile); background-image: url(../img/st-mobile.webp); }
.sec--hero .o2 { right: -6px; top: 210px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-horse); background-image: url(../img/st-horse.webp); }
.sec--greeting .o1 { left: -44px; top: 0; width: 20vw; max-width: 78px; aspect-ratio: var(--ar-rose-l); background-image: url(../img/st-rose-l.webp); }
.sec--greeting .o2 { right: -44px; top: 40px; width: 20vw; max-width: 78px; aspect-ratio: var(--ar-rose-r); background-image: url(../img/st-rose-r.webp); }
.sec--wishes .o1 { right: -30px; top: 10px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-rose-r); background-image: url(../img/st-rose-r.webp); }
.sec--closing .o1 { left: -10px; bottom: 0; width: 44vw; max-width: 176px; aspect-ratio: var(--ar-roses-bl); background-image: url(../img/st-roses-bl.webp); }
.sec--closing .o2 { right: -10px; bottom: 0; width: 44vw; max-width: 176px; aspect-ratio: var(--ar-roses-br); background-image: url(../img/st-roses-br.webp); }
.sec--closing .o3 { left: 50%; bottom: 6px; width: 40vw; max-width: 150px; margin-left: min(-20vw, -75px); aspect-ratio: var(--ar-bow-big); background-image: url(../img/st-bow-big.webp); }

@media (min-width: 1024px) { .phw--side { --pw: min(30vw, 380px); } .side__in .o1 { right: 6%; } .side__in .o2 { left: 4%; } .side__in .o3 { right: 4%; } }