/* A01 · Islamic Sage Green: 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; }
@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: 150 / 496; --sx-lantern-l: 58.0; --sy-lantern-l: 55.0; --sw-lantern-l: 70.75; --ar-lantern-r: 170 / 399; --sx-lantern-r: 970.75; --sy-lantern-r: 55.0; --sw-lantern-r: 74.0; --ar-mosque: 280 / 397; --sx-mosque: 965.0; --sy-mosque: 247.25; --sw-mosque: 157.0; }
.phw { --cx0: 135; --cy0: 100; --cw: 373; --ch: 400; }
.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); }

/* A01 · Islamic Sage Green: cream and sage, a mihrab arch with a gold line, Islamic star lattice, gold lanterns; the lanterns and mosque come from the mockup. */
:root {
  --bg: #f8f5ec; --bg2: #eceee2; --ink: #33402f; --muted: #59654f; --accent: #5f7a52; --accent2: #c9a85f;
  --line: rgb(95 122 82 / .2);
  --card: #fffdf7; --card-line: #e6d8b0; --card-shadow: 0 10px 26px rgb(70 90 60 / .1); --radius: 18px;
  --btn-bg: linear-gradient(180deg, #6d8b5f, #4f6b45); --btn-ink: #fbf7ea; --btn-border: 1.5px solid #d3b675; --btn-shadow: 0 8px 20px rgb(60 85 50 / .28);
  --f-display: "Lora", Georgia, serif; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-size: 1.8rem; --name-weight: 700; --name-color: #3e5634;
  --head-size: 1.5rem; --head-weight: 600; --head-color: #3e5634; --head-ink: #3e5634;
  --kicker-color: #5f7a52; --bism-color: #4f6b45;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: url(../img/a01-khatam.svg), linear-gradient(180deg, #f1ede0, #f8f5ec 45%, #eef0e4);
  --guest-bg: rgb(255 253 247 / .9); --guest-line: #e6d8b0;
  --cd-title: #3e5634; --cd-num: #3e5634; --cd-label: #59654f;
  --cd-tile: linear-gradient(180deg, #fffdf7, #f2ede0); --cd-tile-border: 1px solid #e3d3a8; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 10px rgb(70 90 60 / .1);
  --dt-ic: #4f6b45; --dt-ic-bg: transparent; --dt-label: #59654f; --av-bg: #e8ece0; --av-ink: #5f7a52;
}
body { background: url(../img/a01-khatam.svg), #f8f5ec; }
.inv { background: transparent; }

/* The photo in a mihrab arch with a gold and cream border */
.phw .photo { border-radius: 0; background: none; box-shadow: none; -webkit-mask: url(../img/a01-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a01-arch.svg) center / 100% 100% no-repeat; }
.phw::before, .phw::after { content: ""; position: absolute; pointer-events: none; -webkit-mask: url(../img/a01-arch.svg) center / 100% 100% no-repeat; mask: url(../img/a01-arch.svg) center / 100% 100% no-repeat; }
.phw::before { inset: -8px; z-index: -2; background: linear-gradient(160deg, #e9d49a, #b8954f 45%, #e4cb8b 70%, #a9853f); filter: drop-shadow(0 10px 18px rgb(70 90 60 / .2)); }
.phw::after { inset: -4px; z-index: -1; background: #fbf6e6; }
.phw--cover { --pw: min(60vw, 238px); margin-top: 10px; }
.phw--hero { --pw: min(70vw, 280px); margin-top: 6px; }
.phw .p2 { right: calc(-62 * var(--k)); top: calc(-46 * var(--k)); width: calc(74 * var(--k)); aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }

/* Title: Bismillah, sage serif, gold diamond line, the name on a cream plaque with pointed ends */
.ttl__bism { font-size: 1.6rem; }
.ttl__kicker { font: 600 1.85rem/1.2 var(--f-display); }
.orn--div svg { width: 150px; margin: 4px auto 6px; color: #b8954f; }
.ttl__salam { color: #3f4a3a; }
.ttl .lead { color: #46503f; max-width: 330px; }
.ttl__name { margin: 14px 0 6px; }
.ttl__name span { position: relative; padding: 6px 28px 8px; background: linear-gradient(180deg, #fffdf6, #f1ead6); border: 1.5px solid #c9a85f; border-radius: 999px;
  box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgb(201 168 95 / .4), 0 8px 18px rgb(70 90 60 / .12); }
.ttl__name span::before, .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -7px; background: #fbf5e3; border: 1.5px solid #c9a85f; transform: rotate(45deg); }
.ttl__name span::before { left: -8px; } .ttl__name span::after { right: -8px; }
.ttl__prayer { color: #46503f; }
.par { margin-top: 2px; }
.par__l { font-size: .9rem; color: #46503f; }
.par__n { font-size: 1.02rem; color: #2f3a2b; }
.par__b { display: inline; }
.gate__date, .side__date { color: #3e5634; letter-spacing: .02em; }

/* Headings: sage serif between small gold flourishes */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 14px; flex: none; background: url(../img/a01-flank.svg) center / contain no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }

/* Countdown in a cream card with a gold line */
.sec--countdown { padding-top: 26px; }
.cd-box { background: #fffdf7; border: 1px solid #e3d3a8; border-radius: 22px; padding: 16px 12px 18px; box-shadow: 0 10px 24px rgb(70 90 60 / .1); }
.cd__t { font-size: 1.2rem; gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 12px; height: 12px; border: 1.5px solid #c9a85f; transform: rotate(45deg); flex: none; }
.cd__n { font-weight: 700; }

/* Details: one card, three rows */
.dts { gap: 0; background: #fffdf7; border: 1px solid #e3d3a8; border-radius: 20px; 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(201 168 95 / .35); }
.dt__ic .ic { width: 28px; height: 28px; }
.btn--map { --map-ink: #4f6b45; --map-line: #d9c896; --map-bg: #fffdf7; }
.link, .link--map, .link--cal { color: #4f6b45; }

/* Gallery, wishes */
.gallery__item { border: 3px solid #fffdf7; box-shadow: 0 0 0 1px #e3d3a8, 0 10px 20px rgb(70 90 60 / .14); }
.wcomp { border-color: #e6d8b0; }
.btn--send { --btn-shadow: none; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }

/* Closing: a sage band with an arched top and a small mosque */
.sec--closing { background: url(../img/a01-khatam-w.svg), linear-gradient(180deg, #67835b, #4c6743); color: #f6f1e2; margin-top: 34px; border-radius: 50% 50% 0 0 / 54px 54px 0 0; padding-top: 74px; padding-bottom: 60px; }
.sec--closing::before { content: ""; position: absolute; top: 16px; left: 50%; width: 64px; height: 40px; margin-left: -32px; background: url(../img/a01-mosque.svg) center / contain no-repeat; z-index: 2; }
.closing__t span { color: #fbf6e6; }
.sec--closing .orn--div svg { color: #e2cb8c; }
.closing__p, .closing__sign { color: #eef0e2; }
.closing__p.salam { font-size: 1.08rem; margin-top: 16px; }
.made { color: #eef0e2; }

/* ---------- Lanterns and mosque from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(60 70 40 / .18)); }
.sec--hero { padding-bottom: 50px; }
.sec--gallery .o1 { left: -12px; top: 8px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--wishes .o1 { right: -14px; top: 6px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
#gate .o1 { right: -16px; bottom: 6px; width: 28vw; max-width: 108px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .5; filter: none; }

@media (min-width: 1024px) { .phw--side { --pw: min(22vw, 270px); } #side .o1 { right: 4%; bottom: 4%; width: 160px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .5; } }