/* A07 · Mosque & Arabesque: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-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: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-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: 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-lantern-l: 160 / 472; --sx-lantern-l: 126.5; --sy-lantern-l: 61.25; --sw-lantern-l: 72.25; --ar-lantern-r: 170 / 509; --sx-lantern-r: 925.75; --sy-lantern-r: 61.0; --sw-lantern-r: 71.25; --ar-lantern-s: 100 / 249; --sx-lantern-s: 265.25; --sy-lantern-s: 285.0; --sw-lantern-s: 46.25; --ar-lantern-s2: 100 / 250; --sx-lantern-s2: 821.5; --sy-lantern-s2: 285.0; --sw-lantern-s2: 45.75; --ar-fil-l: 140 / 211; --sx-fil-l: 360.0; --sy-fil-l: 355.0; --sw-fil-l: 65.0; --ar-fil-r: 140 / 203; --sx-fil-r: 690.0; --sy-fil-r: 355.0; --sw-fil-r: 68.0; --ar-scene-bl: 360 / 388; --ar-scene-br: 360 / 388; }
.phw { --cx0: 432; --cy0: 262; --cw: 261; --ch: 184; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-fil-l.webp); left: calc((var(--sx-fil-l) - var(--cx0)) * var(--k)); top: calc((var(--sy-fil-l) - var(--cy0)) * var(--k)); width: calc(var(--sw-fil-l) * var(--k)); aspect-ratio: var(--ar-fil-l); }
.phw--cover .p2, .phw--hero .p2, .phw--side .p2 { background-image: url(../img/st-fil-r.webp); left: calc((var(--sx-fil-r) - var(--cx0)) * var(--k)); top: calc((var(--sy-fil-r) - var(--cy0)) * var(--k)); width: calc(var(--sw-fil-r) * var(--k)); aspect-ratio: var(--ar-fil-r); }

/* A07 · Mosque & Arabesque: deep emerald with a gold arabesque lattice, a gold mihrab around the photo, gold serif, cream marble cards; lanterns, filigree and the lit mosques come from the mockup. */
:root {
  --bg: #f5efe2; --bg2: #ebe2cf; --ink: #1f3328; --muted: #4b5a4f; --accent: #b08a3e; --accent2: #0f4a37;
  --line: rgb(176 138 62 / .32);
  --card: linear-gradient(180deg, #fffaf0, #f5ecd9); --card-line: #d9b45f; --card-shadow: 0 0 0 4px rgb(255 250 240 / .7), 0 12px 26px rgb(40 50 30 / .16); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #f6dc9a, #d0a552); --btn-ink: #1f3328; --btn-border: 1px solid #fff0c6; --btn-shadow: 0 8px 20px rgb(150 110 40 / .3);
  --f-display: "Libre Caslon Text", Georgia, serif; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Libre Caslon Text", Georgia, serif; --f-num: "Libre Caslon Text", Georgia, serif;
  --name-size: 1.55rem; --name-weight: 700; --name-color: #f3d88f;
  --head-size: 1.45rem; --head-weight: 700; --head-color: #1f3328; --head-ink: #1f3328;
  --kicker-color: #f0d38a; --bism-color: #f3dfa6;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 50% 30%, rgb(40 110 80 / .55), rgb(40 110 80 / 0) 60%), url(../img/a07-khatam.svg), linear-gradient(180deg, #0c3a2b, #12503b 55%, #0d3f2f);
  --gate-ink: #f6eedb; --guest-bg: rgb(10 50 37 / .65); --guest-line: rgb(217 180 95 / .6);
  --cd-title: #fff6dc; --cd-num: #1f3328; --cd-label: #3c4a40;
  --cd-tile: linear-gradient(180deg, #fffaf0, #f2e8d2); --cd-tile-border: 1px solid #d9b45f; --cd-tile-radius: 10px; --cd-tile-shadow: 0 4px 10px rgb(40 50 30 / .14);
  --dt-ic: #0f4a37; --dt-ic-bg: transparent; --dt-label: #1f3328; --av-bg: #e7e1d1; --av-ink: #7d8a7f;
}
body { background: url(../img/a07-khatam.svg), linear-gradient(180deg, #0c3a2b 0, #12503b 760px, #e9e1cd 1200px, #f5efe2); }
.inv { background: transparent; }

/* Hero: emerald with the lattice; the photo in a gold mihrab with filigree at its sides */
.sec--hero { color: #f6eedb; padding-bottom: 40px; }
.phw .photo { border-radius: 0; background: none; box-shadow: none; -webkit-mask: url(../img/a07-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a07-arch.svg) center / 100% 100% no-repeat; }
.phw::before, .phw::after { content: ""; position: absolute; pointer-events: none; -webkit-mask: url(../img/a07-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a07-arch.svg) center / 100% 100% no-repeat; }
.phw::before { inset: -10px; z-index: -2; background: linear-gradient(160deg, #fbe7ae, #c99a45 40%, #f6dc9a 62%, #a77a2c); filter: drop-shadow(0 0 18px rgb(240 200 110 / .35)); }
.phw::after { inset: -5px; z-index: -1; background: #0f4a37; }
.phw--cover { --pw: min(60vw, 236px); margin: 18px auto 0; }
.phw--hero { --pw: min(64vw, 252px); margin: 22px auto 0; }

.ttl__bism { font-size: 1.6rem; }
.orn--div svg { width: 160px; color: #d9b45f; margin: 4px auto 8px; }
.ttl__kicker { font: 700 1.75rem/1.2 var(--f-display); }
.ttl__kicker span { background: linear-gradient(180deg, #fff1c4, #e6c06e 55%, #c9993f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl .lead { color: #efe6cf; max-width: 340px; }
/* the name on a dark green plaque with a gold border and pointed ends */
.ttl__name { margin: -8px 0 6px; position: relative; z-index: 2; }
.ttl__name span { position: relative; padding: 8px 24px 10px; white-space: nowrap; background: linear-gradient(180deg, #145a43, #0b3c2c); border: 2px solid #d9b45f; border-radius: 14px;
  box-shadow: inset 0 0 0 3px #0b3c2c, inset 0 0 0 4px rgb(240 210 140 / .5), 0 10px 22px rgb(0 0 0 / .3); color: #f3d88f; text-shadow: 0 2px 0 rgb(0 0 0 / .35); }
.ttl__name span::before, .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -8px; background: #0f4a37; border: 2px solid #d9b45f; transform: rotate(45deg); }
.ttl__name span::before { left: -9px; } .ttl__name span::after { right: -9px; }
.ttl__sub span { background: none; color: #f6eedb; font: 400 .98rem/1.3 var(--f-body); padding: 0; }
.par--ttl .par__l { display: none; }
.par__n { font: 700 1.2rem/1.35 var(--f-display); color: #fff2cf; }
.ttl__prayer { color: #efe6cf; }
.gate__date, .side__date { color: #f0d38a; letter-spacing: .03em; }
.guest { color: #f6eedb; }

/* Countdown: a cream marble card with a green tab */
.sec--countdown { padding-top: 34px; }
.cd-box { position: relative; background: var(--card); border: 1px solid #d9b45f; border-radius: 18px; padding: 30px 14px 18px; box-shadow: var(--card-shadow); }
.cd__head { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.cd__t { font: 700 .98rem/1 var(--f-display); background: linear-gradient(180deg, #145a43, #0b3c2c); border: 1px solid #d9b45f; padding: 8px 20px; border-radius: 8px; }
.cd__n { font-weight: 700; }
.link--cal { color: #0f4a37; }

/* Details */
.dts { gap: 0; background: var(--card); border: 1px solid #d9b45f; border-radius: 16px; 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(176 138 62 / .35); }
.dt__ic .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.dt__l { font-weight: 700; }
.btn--map { --map-ink: #0f4a37; --map-line: #d9b45f; --map-bg: #fffaf0; }
.link, .link--map { color: #0f4a37; }

/* Headings: dark serif between gold flourishes */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 30px; height: 14px; flex: none; background: url(../img/a07-flank.svg) center / contain no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.gallery__item { border: 2px solid #d9b45f; border-radius: 12px; box-shadow: 0 0 0 3px #fffaf0, 0 10px 20px rgb(40 50 30 / .18); }

/* Wishes in a dark green panel with a gold frame */
.sec--wishes .sec__in { background: url(../img/a07-khatam.svg), linear-gradient(180deg, #145a43, #0b3c2c); border: 2px solid #d9b45f; border-radius: 26px 26px 18px 18px; padding: 26px 14px 16px;
  box-shadow: inset 0 0 0 4px #0b3c2c, inset 0 0 0 5px rgb(240 210 140 / .45), 0 14px 30px rgb(0 0 0 / .2); color: #f6eedb; }
.sec--wishes .h-sec__t { color: #f3d88f; }
.sec--wishes .h-sec__ic { color: #f3d88f; }
.sec--wishes .h-sec__sub, .sec--wishes .wishes__n { color: #e7dcc2; }
.sec--wishes .wish, .sec--wishes .wcomp { background: #fffaf0; color: #1f3328; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }

/* Closing between the lit mosques */
.sec--closing { padding-bottom: 210px; }
.closing__t span { color: #0f4a37; }
.closing__p.salam { font-style: italic; color: #0f4a37; margin-top: 14px; }

/* ---------- Lanterns, filigree and mosques from the mockup ---------- */
.o { filter: drop-shadow(0 0 14px rgb(255 210 120 / .35)); }
.gate__in .o1, .side__in .o1 { left: -10px; top: -6px; width: 15vw; max-width: 56px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
.gate__in .o2, .side__in .o2 { right: -10px; top: -6px; width: 15vw; max-width: 56px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o1 { left: -6px; top: 4px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
.sec--hero .o2 { right: -6px; top: 4px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o3 { left: 18px; top: 250px; width: 9vw; max-width: 34px; aspect-ratio: var(--ar-lantern-s); background-image: url(../img/st-lantern-s.webp); }
.sec--hero .o4 { right: 18px; top: 250px; width: 9vw; max-width: 34px; aspect-ratio: var(--ar-lantern-s2); background-image: url(../img/st-lantern-s2.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-scene-bl); background-image: url(../img/scene-bl.webp); filter: none; }
.sec--closing .o2 { right: 0; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-scene-br); background-image: url(../img/scene-br.webp); filter: none; }

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