/* K01 · Islamic Emerald Mosque: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lora-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: "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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-lantern-l: 150 / 542; --sx-lantern-l: 54.0; --sy-lantern-l: 45.0; --sw-lantern-l: 51.75; --ar-lantern-r: 160 / 611; --sx-lantern-r: 1048.0; --sy-lantern-r: 75.0; --sw-lantern-r: 47.0; --ar-leaves-l: 240 / 273; --sx-leaves-l: 0.0; --sy-leaves-l: 322.75; --sw-leaves-l: 138.25; --ar-leaves-r: 220 / 268; --sx-leaves-r: 994.0; --sy-leaves-r: 324.25; --sw-leaves-r: 128.0; --ar-lantern-s: 120 / 306; --sx-lantern-s: 57.0; --sy-lantern-s: 580.0; --sw-lantern-s: 46.25; --ar-mosque-l: 380 / 204; --sx-mosque-l: 132.75; --sy-mosque-l: 1289.75; --sw-mosque-l: 207.25; --ar-mosque-r: 360 / 220; --sx-mosque-r: 807.75; --sy-mosque-r: 1295.5; --sw-mosque-r: 159.0; }
.phw { --cx0: 112; --cy0: 50; --cw: 370; --ch: 426; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-lantern-l.webp); left: calc((var(--sx-lantern-l) - var(--cx0)) * var(--k)); top: calc((var(--sy-lantern-l) - var(--cy0)) * var(--k)); width: calc(var(--sw-lantern-l) * var(--k)); aspect-ratio: var(--ar-lantern-l); }
.phw--cover .p2, .phw--hero .p2, .phw--side .p2 { background-image: url(../img/st-leaves-l.webp); left: calc((var(--sx-leaves-l) - var(--cx0)) * var(--k)); top: calc((var(--sy-leaves-l) - var(--cy0)) * var(--k)); width: calc(var(--sw-leaves-l) * var(--k)); aspect-ratio: var(--ar-leaves-l); }

/* K01 · Islamic Emerald Mosque: cream and emerald, gold arches and lanterns, Islamic star lattice; the title on an emerald arch panel; lanterns, leaves and mosques from the mockup. */
:root {
  --bg: #f7f2e4; --bg2: #ece5d0; --ink: #1d3a2c; --muted: #4b5f52; --accent: #b8913e; --accent2: #0f4a35;
  --line: rgb(184 145 62 / .3);
  --card: #fffcf3; --card-line: #e2d2a4; --card-shadow: 0 10px 24px rgb(15 74 53 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #1b6a4b, #0f4a35); --btn-ink: #fbf5e2; --btn-border: 1.5px solid #d3b36a; --btn-shadow: 0 8px 20px rgb(15 74 53 / .28);
  --f-display: "Lora", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-size: 1.3rem; --name-weight: 700; --name-color: #1f4a33;
  --head-size: 1.5rem; --head-weight: 700; --head-color: #1f4a33; --head-ink: #1f4a33;
  --kicker-color: #d9b65e;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: url(../img/k01-khatam.svg), linear-gradient(180deg, #f3eedd, #f7f2e4 50%, #efe8d4);
  --guest-bg: #fffcf3; --guest-line: #e2d2a4;
  --cd-title: #1f4a33; --cd-num: #fbf3d9; --cd-label: #e8dfc3;
  --cd-tile: linear-gradient(180deg, #1b6a4b, #0f4a35); --cd-tile-border: 1px solid #c9a24a; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 12px rgb(15 74 53 / .2);
  --dt-ic: #0f4a35; --dt-ic-bg: #efe7cf; --dt-label: #6b5a2e; --av-bg: #0f4a35; --av-ink: #f3e3b3;
}
body { background: url(../img/k01-khatam.svg), #f7f2e4; }
.inv { background: transparent; }

/* The photo in an emerald arch with a gold edge */
.phw .photo { border-radius: 0; background: none; box-shadow: none; -webkit-mask: url(../img/k01-arch.svg) center / 100% 100% no-repeat; mask: url(../img/k01-arch.svg) center / 100% 100% no-repeat; }
.phw::before, .phw::after { content: ""; position: absolute; pointer-events: none; -webkit-mask: url(../img/k01-arch.svg) center / 100% 100% no-repeat; mask: url(../img/k01-arch.svg) center / 100% 100% no-repeat; }
.phw::before { inset: -11px; z-index: -2; background: linear-gradient(160deg, #f0dc9c, #b8913e 42%, #ecd28c 64%, #9c7a2e); filter: drop-shadow(0 12px 20px rgb(15 74 53 / .22)); }
.phw::after { inset: -8px; z-index: -1; background: url(../img/k01-khatam-w.svg), #0f4a35; }
.phw--cover { --pw: min(56vw, 220px); margin: 16px auto 0; }
.phw--hero { --pw: min(64vw, 252px); margin: 14px auto 0; }

/* The title on an emerald arch panel with a gold line */
.ttl { position: relative; z-index: 3; background: url(../img/k01-khatam-w.svg), linear-gradient(180deg, #186447, #0f4a35 60%, #0c3f2d); color: #f4ecd4;
  border: 2px solid #c9a24a; border-radius: 160px 160px 20px 20px / 58px 58px 20px 20px; padding: 26px 16px 22px; margin: -18px 2px 0;
  box-shadow: inset 0 0 0 4px #0f4a35, inset 0 0 0 5px rgb(217 182 94 / .45), 0 14px 30px rgb(15 74 53 / .25); }
.orn--mosque svg { width: 46px; margin: 0 auto 2px; color: #d9b65e; }
.ttl__bism-l { color: #f3e7c6; font-size: 1rem; }
.ttl .orn--div svg { width: 130px; margin: 6px auto; color: #d9b65e; }
.ttl .lead { color: #ece3c7; font-size: .95rem; max-width: 300px; }
.ttl__kicker { margin-top: 6px; }
.ttl__kicker span { position: relative; padding: 0 30px; }
.ttl__kicker b { display: block; font: 700 2.25rem/1.08 var(--f-display); background: linear-gradient(180deg, #f6e3a6 0, #d9b65e 50%, #b8913e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl__kicker span::before, .ttl__kicker span::after { content: ""; position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url(../img/k01-star.svg) center / contain no-repeat; }
.ttl__kicker span::before { left: 0; } .ttl__kicker span::after { right: 0; }
.ttl__ananda { margin-top: 12px; }
.ttl__ananda span { font: 600 .82rem/1 var(--f-body); color: #1f4a33; background: #f6efdc; padding: 6px 16px 4px; border-radius: 10px 10px 0 0; border: 1.5px solid #c9a24a; border-bottom: 0; margin-bottom: -2px; }
.ttl__name { margin: 0; }
.ttl__name span { position: relative; padding: 8px 26px 9px; background: linear-gradient(180deg, #fffaea, #efe3c2); border: 1.5px solid #c9a24a; border-radius: 999px; font-size: clamp(1.08rem, 5vw, 1.35rem);
  box-shadow: inset 0 0 0 3px #fffaea, inset 0 0 0 4px rgb(201 162 74 / .4), 0 8px 18px rgb(0 0 0 / .18); text-wrap: balance; }
.ttl__name span::before, .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -7px; background: #fffaea; border: 1.5px solid #c9a24a; transform: rotate(45deg); }
.ttl__name span::before { left: -8px; } .ttl__name span::after { right: -8px; }
.par { margin-top: 2px; }
.par__l { color: #e6dcbf; font-size: .9rem; }
.par__n { color: #fbf3d9; font-weight: 600; font-size: 1rem; }
.gate__date, .side__date { color: #1f4a33; font-weight: 700; letter-spacing: .02em; }

/* Headings: emerald serif between gold stars */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 16px; height: 16px; flex: none; background: url(../img/k01-star.svg) center / contain no-repeat; }
.h-sec__ic { color: #b8913e; }

/* Countdown on a cream card with a gold line */
.sec--countdown { padding-top: 28px; }
.cd-box { background: #fffcf3; border: 1px solid #e2d2a4; border-radius: 20px; padding: 16px 12px 18px; box-shadow: 0 0 0 5px rgb(255 252 243 / .7), var(--card-shadow); }
.cd__t { font-size: 1.2rem; font-weight: 700; }
.cd__ic { color: #b8913e; }
.cd__n { font-weight: 700; }

/* Details: one card, three rows */
.dts { gap: 0; background: #fffcf3; border: 1px solid #e2d2a4; border-radius: 18px; padding: 6px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(184 145 62 / .3); }
.dt__ic { border-radius: 50%; }
.btn--map { --map-ink: #0f4a35; --map-line: #d9c48c; --map-bg: #fffcf3; }
.link, .link--map, .link--cal { color: #0f4a35; }

/* Gallery, RSVP, wishes */
.gallery__item { border: 3px solid #fffcf3; box-shadow: 0 0 0 1px #d9c48c, 0 10px 20px rgb(15 74 53 / .14); }
.wcomp { border-color: #e2d2a4; }
.wish { border-color: #ece0bd; }

/* Closing: an emerald band with the mosques at the bottom */
.sec--closing { background: url(../img/k01-khatam-w.svg), linear-gradient(180deg, #186447, #0f4a35); color: #f4ecd4; margin-top: 24px; border-radius: 50% 50% 0 0 / 46px 46px 0 0; padding: 64px 22px 150px; }
.closing__t span { color: #f3dc9b; }
.sec--closing .orn--div svg { color: #d9b65e; }
.closing__p, .closing__sign { color: #ece3c7; }
.closing__p.salam { font-style: italic; color: #f3e7c6; margin-top: 14px; }
.made { color: #ece3c7; }

/* ---------- Lanterns, leaves and mosques from the mockup ---------- */
.o, .phd i { filter: drop-shadow(0 6px 8px rgb(30 50 20 / .2)); }
#gate .o1 { right: -14px; top: -8px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o1 { right: -6px; top: -6px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o2 { right: -26px; top: 220px; width: 30vw; max-width: 116px; aspect-ratio: var(--ar-leaves-r); background-image: url(../img/st-leaves-r.webp); }
.sec--countdown .o1 { left: 2px; top: 0; width: 11vw; max-width: 42px; aspect-ratio: var(--ar-lantern-s); background-image: url(../img/st-lantern-s.webp); }
.sec--gallery .o1 { right: -24px; top: 0; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-leaves-r); background-image: url(../img/st-leaves-r.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 52vw; max-width: 210px; aspect-ratio: var(--ar-mosque-l); background-image: url(../img/st-mosque-l.webp); filter: none; }
.sec--closing .o2 { right: 0; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-mosque-r); background-image: url(../img/st-mosque-r.webp); filter: none; }

@media (min-width: 1024px) { .phw--side { --pw: min(18vw, 220px); } #side .ttl { max-width: 400px; margin-inline: auto; } #side .o1 { right: 8%; top: 0; width: 60px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); } }