/* O04 · Royal Islamic Arabesque: 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: normal; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-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: 130 / 356; --sx-lantern: 33.75; --sy-lantern: 90.0; --sw-lantern: 70.25; --ar-dome-orn: 260 / 109; --sx-dome-orn: 690.0; --sy-dome-orn: 62.75; --sw-dome-orn: 180.0; --ar-flourish: 520 / 52; --sx-flourish: 593.0; --sy-flourish: 206.0; --sw-flourish: 398.0; --ar-mosque-gl: 420 / 194; --sx-mosque-gl: 0.0; --sy-mosque-gl: 1256.5; --sw-mosque-gl: 246.0; --ar-mosque-gr: 420 / 145; --sx-mosque-gr: 793.0; --sy-mosque-gr: 1256.75; --sw-mosque-gr: 329.0; --ar-mosque-night: 360 / 420; }
.phw { --cx0: 30; --cy0: 70; --cw: 522; --ch: 332; }

/* O04 · Royal Islamic Arabesque: deep emerald with gold, the eight-point lattice, the family in a gold arch between lanterns,
   a gold title under the mockup's domed ornament and over its flourish, gold-framed panels; lanterns, mosques (the night mosque opens the closing) and ornaments from the mockup. */
:root {
  --bg: #0b3a2d; --bg2: #0f4a39; --ink: #f4ead0; --muted: #d8cba6; --accent: #d9b45f; --accent2: #0b3a2d;
  --line: rgb(217 180 95 / .35);
  --card: linear-gradient(180deg, rgb(16 74 57 / .9), rgb(9 48 37 / .9)); --card-line: #c9a24a; --card-shadow: 0 10px 24px rgb(0 0 0 / .3); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f6dc8e, #d9b45f 55%, #b8913e); --btn-ink: #13261d; --btn-line: #f2dfa4; --btn-shadow: 0 8px 20px rgb(0 0 0 / .35);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-font: "Lora", Georgia, serif; --name-size: 1.05rem; --name-weight: 600; --name-color: #f6ead0;
  --head-size: 1.5rem; --head-weight: 600; --head-color: #f1d690; --head-ink: #f1d690;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: url(../img/o04-khatam.svg), radial-gradient(120% 60% at 50% 0, #145a44, #0b3a2d 70%);
  --gate-ink: #f4ead0; --guest-bg: rgb(9 48 37 / .85); --guest-line: #c9a24a;
  --cd-title: #f4ead0; --cd-num: #f6e3a6; --cd-label: #e6d8b2;
  --cd-tile: linear-gradient(180deg, #0f4a39, #093025); --cd-tile-border: 1.5px solid #d9b45f; --cd-tile-radius: 10px; --cd-tile-shadow: inset 0 0 0 3px #0b3a2d, inset 0 0 0 4px rgb(217 180 95 / .4);
  --dt-ic: #e8c977; --dt-ic-bg: transparent; --dt-label: #f1d690; --av-bg: #e9dcc0; --av-ink: #0b3a2d;
  --field-bg: #fbf6e8; --field-ink: #1d2a22; --field-line: #c9a24a;
  --map-bg: transparent; --map-ink: #f1d690; --map-line: #c9a24a;
  --gal-border: 2px solid #d9b45f; --gal-radius: 12px; --gal-shadow: 0 10px 20px rgb(0 0 0 / .3);
}
body { background: url(../img/o04-khatam.svg), #0b3a2d; color: var(--ink); }
.inv { background: url(../img/o04-khatam.svg), linear-gradient(180deg, #0d4434, #0b3a2d 40%, #09302a); }
::placeholder { color: #8a8a74; }

/* The family in a gold arch */
.phw .photo { border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px; box-shadow: 0 0 0 3px #0b3a2d, 0 0 0 5px #d9b45f, 0 0 0 9px #0b3a2d, 0 0 0 10px rgb(217 180 95 / .6), 0 18px 34px rgb(0 0 0 / .4); }
.phw--cover { --pw: min(70vw, 280px); margin: 12px auto 22px; }
.phw--hero { --pw: min(76vw, 300px); margin: 14px auto 24px; }

/* Title: the domed ornament, gold serif, the flourish; the hosts on a gold-edged plaque */
.ttl__kicker { position: relative; padding-top: 66px; padding-bottom: 44px; }
.ttl__kicker::before { content: ""; position: absolute; left: 50%; top: 0; width: 150px; margin-left: -75px; aspect-ratio: var(--ar-dome-orn); background: url(../img/st-dome-orn.webp) center / contain no-repeat; }
.ttl__kicker::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(80vw, 300px); transform: translateX(-50%); aspect-ratio: var(--ar-flourish); background: url(../img/st-flourish.webp) center / contain no-repeat; }
.ttl__kicker b { display: block; font: 600 2.25rem/1.05 var(--f-display); background: linear-gradient(180deg, #fbeab0, #e3c06a 50%, #b88f3c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35)); }
.ttl__kicker b:last-child { font: 700 2.7rem/1.05 var(--f-display); }
.ttl .lead { color: #efe4c4; font-size: .95rem; max-width: 310px; }
.ttl__family { position: relative; z-index: 1; margin: 16px 0 -30px; }
.ttl__family span { font: 600 .9rem/1.2 var(--f-body); color: #f1d690; }
.ttl__name { margin: 0; filter: drop-shadow(0 0 1px #d9b45f) drop-shadow(0 0 1px #d9b45f) drop-shadow(0 8px 14px rgb(0 0 0 / .35)); }
.ttl__name span { padding: 28px 30px 10px; background: linear-gradient(180deg, #0f4a39, #093025); min-width: min(76vw, 300px);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.gate__date, .side__date { color: #f1d690; font-weight: 600; letter-spacing: .02em; margin-top: 16px; }
.guest { color: #f4ead0; }

/* Headings: gold serif between short gold lines */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 42px; height: 12px; flex: none; background: url(../img/o04-star.svg) right center / 12px 12px no-repeat, linear-gradient(#d9b45f, #d9b45f) left center / 30px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__sub { color: #e6d8b2; }
.lead { color: #e6d8b2; }

/* Gold-framed panels (countdown, details, RSVP, wishes) */
.cd-box, .dts, .sec--rsvp .card.form, .wcomp { border: 1.5px solid #d9b45f; box-shadow: inset 0 0 0 4px rgb(11 58 45 / .9), inset 0 0 0 5px rgb(217 180 95 / .35), 0 14px 28px rgb(0 0 0 / .3); }
.sec--countdown { padding-top: 26px; }
.cd-box { background: rgb(9 48 37 / .85); border-radius: 18px; padding: 16px 12px 18px; }
.cd__t { font: 600 1.1rem/1.3 var(--f-body); }
.cd__ic { color: #e8c977; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #f1d690; }

/* Details: icon on top, centred, in gold-edged cards */
.dts { gap: 0; background: rgb(9 48 37 / .85); border-radius: 16px; padding: 4px 16px; }
.dt { flex-direction: column; text-align: center; gap: 6px; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 4px; }
.dt + .dt { border-top: 1px solid rgb(217 180 95 / .35); }
.dt__ic { width: 34px; height: 34px; }
.dt__ic .ic { width: 28px; height: 28px; }
.dt__l { font-size: .95rem; font-weight: 600; font-family: var(--f-body); }
.dt__v { color: #f4ead0; }
.dt__v small { color: #d8cba6; }
.note { background: none; border: 0; color: #efe4c4; font-size: .95rem; padding: 4px 6px; }
.dts__act .link { color: #f1d690; }
.btn--cta { position: relative; font-weight: 700; }

/* RSVP and wishes */
.sec--rsvp .card.form { background: rgb(9 48 37 / .85); color: #f4ead0; }
.field em, .field small { color: #cbbd98; }
.rsvp-done { background: rgb(9 48 37 / .85); color: #f4ead0; border-color: #d9b45f; }
.wcomp { background: rgb(9 48 37 / .85); border-radius: 18px; }
.wish { position: relative; background: rgb(9 48 37 / .85); border: 1.5px solid rgb(217 180 95 / .75); color: #f4ead0; }
.wish::after { content: "\201D"; position: absolute; right: 12px; top: 2px; font: 700 2rem/1 var(--f-display); color: #d9b45f; }
.wish__top { padding-right: 18px; }
.wish__ago { color: #cbbd98; }
.wishes__n { color: #d8cba6; }
.tag--no { background: #e9dcc0; color: #0b3a2d; }

/* Gallery on a cream band with gold edges */
.sec--gallery { background: linear-gradient(180deg, #f3e8cc, #e9dbb5); border-top: 3px solid #d9b45f; border-bottom: 3px solid #d9b45f; box-shadow: inset 0 4px 0 #0b3a2d, inset 0 -4px 0 #0b3a2d; }
.sec--gallery .h-sec__t { color: #13261d; }
.sec--gallery .hint { color: #5e5536; }

/* Closing between the gold mosques */
.sec--closing { padding-bottom: 170px; }
.closing__t span { color: #f1d690; }
.closing__p, .closing__sign, .made { color: #efe4c4; }
.sec--closing .orn--div svg { color: #d9b45f; }

/* ---------- Lanterns, mosques and ornaments from the mockup ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(0 0 0 / .35)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { left: 0; top: 6px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.gate__in .o2, .side__in .o2 { right: 0; top: 6px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); transform: scaleX(-1); }
.sec--hero .o1 { left: 4px; top: 30px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.sec--hero .o2 { right: 4px; top: 30px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); transform: scaleX(-1); }
/* the night mosque from beside the mockup's title opens the closing */
.sec--closing { padding-top: 262px; }
.sec--closing .o3 { left: 50%; top: 16px; width: 52vw; max-width: 206px; margin-left: max(-26vw, -103px); aspect-ratio: var(--ar-mosque-night); background-image: url(../img/mosque-night.webp); filter: none; }
.sec--closing .o1 { left: -6px; bottom: 0; width: 52vw; max-width: 210px; aspect-ratio: var(--ar-mosque-gl); background-image: url(../img/st-mosque-gl.webp); filter: none; }
.sec--closing .o2 { right: -6px; bottom: 0; width: 52vw; max-width: 210px; aspect-ratio: var(--ar-mosque-gr); background-image: url(../img/st-mosque-gr.webp); filter: none; }

html:lang(en) .ttl__kicker b:first-child { font-size: 1.9rem; }

@media (min-width: 1024px) { .phw--side { --pw: min(22vw, 280px); } }