/* A04 · Elegant White & Gold: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-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: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-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-lanterns: 220 / 444; --sx-lanterns: 960.5; --sy-lanterns: 53.25; --sw-lanterns: 113.25; --ar-crescent: 280 / 341; --sx-crescent: 48.75; --sy-crescent: 352.5; --sw-crescent: 136.0; --ar-quran: 260 / 151; --sx-quran: 186.25; --sy-quran: 410.0; --sw-quran: 168.5; --ar-mosque: 320 / 238; --sx-mosque: 867.0; --sy-mosque: 280.0; --sw-mosque: 255.0; --ar-mosque-bl: 160 / 257; --sx-mosque-bl: 0.0; --sy-mosque-bl: 1289.75; --sw-mosque-bl: 70.0; --ar-mosque-br: 160 / 220; --sx-mosque-br: 1049.0; --sy-mosque-br: 1301.75; --sw-mosque-br: 73.0; }
.phw { --cx0: 126; --cy0: 98; --cw: 330; --ch: 380; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-crescent.webp); left: calc((var(--sx-crescent) - var(--cx0)) * var(--k)); top: calc((var(--sy-crescent) - var(--cy0)) * var(--k)); width: calc(var(--sw-crescent) * var(--k)); aspect-ratio: var(--ar-crescent); }
.phw--cover .p2, .phw--hero .p2, .phw--side .p2 { background-image: url(../img/st-quran.webp); left: calc((var(--sx-quran) - var(--cx0)) * var(--k)); top: calc((var(--sy-quran) - var(--cy0)) * var(--k)); width: calc(var(--sw-quran) * var(--k)); aspect-ratio: var(--ar-quran); }

/* A04 · Elegant White & Gold: ivory and champagne, gold lattice, a mihrab arch, gold serif; crescent lantern, Qur'an stand, lanterns and mosque from the mockup. */
:root {
  --bg: #fbf8f0; --bg2: #f3ecdc; --ink: #2e2a22; --muted: #5f584a; --accent: #a87f2f; --accent2: #e8d6a6;
  --line: rgb(168 127 47 / .25);
  --card: #fffdf7; --card-line: #e2cf9f; --card-shadow: 0 10px 26px rgb(120 95 40 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #c49a4c, #94692a); --btn-ink: #fffaf0; --btn-border: 1px solid #e7cf92; --btn-shadow: 0 8px 20px rgb(140 100 40 / .3);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-size: 2.5rem; --name-weight: 600; --name-color: #9a6f24;
  --head-size: 1.55rem; --head-weight: 600; --head-color: #7a5a1e; --head-ink: #7a5a1e;
  --kicker-color: #9a6f24; --bism-color: #9a6f24;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 50% 30%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 60%), #f8f3e6;
  --guest-bg: rgb(255 253 247 / .92); --guest-line: #e2cf9f;
  --cd-title: #7a5a1e; --cd-num: #6e5020; --cd-label: #6b5a3a;
  --cd-tile: #fffdf7; --cd-tile-border: 1px solid #d9bf7f; --cd-tile-radius: 6px; --cd-tile-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px rgb(217 191 127 / .5), 0 6px 14px rgb(120 95 40 / .1);
  --dt-ic: #a87f2f; --dt-ic-bg: transparent; --dt-label: #7a5a1e; --av-bg: #f1e7cf; --av-ink: #a87f2f;
}
body { background: #fbf8f0; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(../img/a04-khatam.svg);
  -webkit-mask: radial-gradient(circle at 0 0, #000 0, transparent 34%), radial-gradient(circle at 100% 0, #000 0, transparent 34%), radial-gradient(circle at 0 100%, #000 0, transparent 30%), radial-gradient(circle at 100% 100%, #000 0, transparent 30%);
  mask: radial-gradient(circle at 0 0, #000 0, transparent 34%), radial-gradient(circle at 100% 0, #000 0, transparent 34%), radial-gradient(circle at 0 100%, #000 0, transparent 30%), radial-gradient(circle at 100% 100%, #000 0, transparent 30%); }
#gate::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url(../img/a04-khatam.svg);
  -webkit-mask: radial-gradient(circle at 0 0, #000 0, transparent 40%), radial-gradient(circle at 100% 0, #000 0, transparent 40%); mask: radial-gradient(circle at 0 0, #000 0, transparent 40%), radial-gradient(circle at 100% 0, #000 0, transparent 40%); }
.inv { background: transparent; }

/* The photo in a gold mihrab arch; the crescent lantern and the Qur'an stand sit at its foot */
.phw .photo { border-radius: 0; background: none; box-shadow: none; -webkit-mask: url(../img/a04-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a04-arch.svg) center / 100% 100% no-repeat; }
.phw::before, .phw::after { content: ""; position: absolute; pointer-events: none; -webkit-mask: url(../img/a04-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a04-arch.svg) center / 100% 100% no-repeat; }
.phw::before { inset: -9px; z-index: -2; background: linear-gradient(160deg, #f3e2b0, #c6a052 40%, #f1dca0 62%, #a9802f); filter: drop-shadow(0 12px 20px rgb(120 95 40 / .2)); }
.phw::after { inset: -5px; z-index: -1; background: #fffaf0; }
.phw--cover { --pw: min(56vw, 220px); margin: 12px auto 26px; }
.phw--hero { --pw: min(66vw, 262px); margin: 8px auto 34px; }

/* Title */
.ttl__bism { font-size: 1.55rem; }
.orn--div svg { width: 170px; margin: 6px auto; color: #b8913f; }
.ttl__kicker { font: 600 1.7rem/1.2 var(--f-display); }
.ttl__kicker span, .ttl__name span, .h-sec__t span, .closing__t span { background: linear-gradient(180deg, #c9a256 0, #9a6f24 55%, #b98d3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em; }
.ttl__salam { font-weight: 400; font-size: .92rem; color: #3b3427; }
.ttl .lead { color: #3b3427; font-size: .95rem; max-width: 340px; }
.ttl__name { margin: 12px 0 0; filter: drop-shadow(0 2px 2px rgb(120 90 30 / .18)); }
.par__l { color: #3b3427; }
.par__n { font-weight: 600; color: #2e2a22; font-size: 1.08rem; }
.gate__date, .side__date { color: #7a5a1e; letter-spacing: .03em; }

/* Headings: gold serif between small diamonds */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 9px; height: 9px; background: #c6a052; transform: rotate(45deg); flex: none; }

/* Details: a framed card with notched corners */
.dts { gap: 0; background: #fffdf7; border: 1px solid #d9bf7f; border-radius: 4px; padding: 10px 18px; box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px rgb(217 191 127 / .45), var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 2px; flex-direction: column; gap: 4px; text-align: center; }
.dt + .dt { border-top: 1px solid rgb(217 191 127 / .5); }
.dt__ic { width: 36px; height: 36px; }
.dt__l { font: 400 1rem/1.3 var(--f-display); color: #7a5a1e; }
.dt__v strong { font: 600 1.08rem/1.35 var(--f-body); }
.btn--map { --map-ink: #94692a; --map-line: #e2cf9f; --map-bg: #fffdf7; }
.link, .link--map, .link--cal { color: #94692a; }

/* Countdown */
.cd__t { font: 400 1.35rem/1.2 var(--f-display); gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 8px; height: 8px; background: #c6a052; transform: rotate(45deg); }
.cd__c { clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.cd__n { font-weight: 600; font-size: 2.1rem; }

/* Prayer, gallery, wishes */
.prayer { font-size: 1.02rem; color: #2e2a22; }
.gallery { background: #fffdf7; padding: 10px; border: 1px solid #e2cf9f; border-radius: 16px; box-shadow: var(--card-shadow); }
.gallery__item { border-radius: 10px; box-shadow: none; }
.wcomp { border-color: #e2cf9f; }
.wish { border-color: #ecdcb6; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.sec--closing { padding-bottom: 130px; }
.closing__p.salam { font-style: italic; color: #7a5a1e; margin-top: 14px; }

/* ---------- Lanterns, mosque and minarets from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(120 95 40 / .18)); }
.gate__in .o1, .side__in .o1 { right: -16px; top: -10px; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-lanterns); background-image: url(../img/st-lanterns.webp); }
.gate__in .o2, .side__in .o2 { left: -30px; top: 200px; width: 40vw; max-width: 150px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .35; filter: none; transform: scaleX(-1); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -12px; top: -6px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-lanterns); background-image: url(../img/st-lanterns.webp); }
.sec--hero .o2 { right: -26px; top: 330px; width: 40vw; max-width: 150px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .3; filter: none; z-index: -1; }
.sec--prayer .o1 { right: -26px; top: -14px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lanterns); background-image: url(../img/st-lanterns.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-mosque-bl); background-image: url(../img/st-mosque-bl.webp); opacity: .55; filter: none; }
.sec--closing .o2 { right: 0; bottom: 0; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-mosque-br); background-image: url(../img/st-mosque-br.webp); opacity: .55; filter: none; }

@media (min-width: 1024px) { .phw--side { --pw: min(20vw, 250px); } .side__in .o1 { right: 8%; } .side__in .o2 { left: 2%; } }