/* A06 · Moon & Stars Dreamland: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-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 / 363; --sx-lantern-l: 20.75; --sy-lantern-l: 0.0; --sw-lantern-l: 80.5; --ar-lantern-r: 130 / 349; --sx-lantern-r: 1053.25; --sy-lantern-r: 70.0; --sw-lantern-r: 49.75; --ar-mosque: 300 / 312; --sx-mosque: 937.5; --sy-mosque: 278.0; --sw-mosque: 154.25; --ar-branch: 240 / 458; --sx-branch: 0.0; --sy-branch: 848.5; --sw-branch: 97.75; }
.phw { --cx0: 100; --cy0: 40; --cw: 445; --ch: 390; }

/* A06 · Moon & Stars Dreamland: a navy night sky full of stars, a glowing gold crescent, lanterns, gold serif; then soft clouds below. Lanterns and mosque come from the mockup. */
:root {
  --bg: #16204a; --bg2: #232f63; --ink: #f6efe0; --muted: #d9d3e6; --accent: #e3c27a; --accent2: #9fb0e0;
  --line: rgb(227 194 122 / .35);
  --card: linear-gradient(180deg, rgb(37 49 104 / .9), rgb(24 33 76 / .92)); --card-line: rgb(227 194 122 / .6); --card-shadow: 0 14px 30px rgb(5 10 35 / .4); --radius: 18px;
  --btn-bg: linear-gradient(180deg, #f6dfa4, #cfa456); --btn-ink: #2a2140; --btn-border: 1px solid #fff0c8; --btn-shadow: 0 8px 22px rgb(227 194 122 / .35);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-size: 3.4rem; --name-weight: 500; --name-color: #f3d68f;
  --head-size: 1.5rem; --head-weight: 500; --head-color: #2b2f5e; --head-ink: #2b2f5e;
  --kicker-color: #f3d68f; --bism-color: #f8eccd;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 30% 25%, rgb(84 104 180 / .45), rgb(84 104 180 / 0) 55%), url(../img/a06-dots.svg), linear-gradient(180deg, #0f1638, #1a2557 60%, #26326b);
  --gate-ink: #f6efe0; --guest-bg: rgb(28 38 86 / .75); --guest-line: rgb(227 194 122 / .5);
  --cd-title: #f3d68f; --cd-num: #fff8e8; --cd-label: #e6dcc6;
  --cd-tile: linear-gradient(180deg, rgb(43 56 116 / .85), rgb(24 32 76 / .9)); --cd-tile-border: 1px solid rgb(227 194 122 / .75); --cd-tile-radius: 14px; --cd-tile-shadow: 0 0 14px rgb(227 194 122 / .18);
  --dt-ic: #f3d68f; --dt-ic-bg: transparent; --dt-label: #f3d68f; --av-bg: #e9e4f2; --av-ink: #6a6a95;
  --field-bg: #fff; --field-ink: #2b2f5e;
  color-scheme: dark;
}
body { background: radial-gradient(ellipse at 20% 6%, rgb(84 104 180 / .4), rgb(84 104 180 / 0) 40%), url(../img/a06-dots.svg), linear-gradient(180deg, #0f1638 0, #1a2557 900px, #26326b 1600px, #26326b); }
.inv { background: transparent; }

/* The crescent and the sleeping baby: the scene melts into the night */
.phw .photo { background: none; border-radius: 0; box-shadow: none;
  -webkit-mask: radial-gradient(ellipse 70% 66% at 50% 48%, #000 58%, transparent 100%); mask: radial-gradient(ellipse 70% 66% at 50% 48%, #000 58%, transparent 100%); }
.phw--cover { --pw: min(86vw, 340px); margin: 0 auto -10px; }
.phw--hero { --pw: min(92vw, 380px); margin: 0 auto -16px; }

/* Title: gold */
.ttl__bism { font-size: 1.7rem; }
.ttl .lead { color: #efe7d6; max-width: 340px; }
.ttl .lead--1 { margin-top: 0; }
.ttl__pre { margin: 10px 0 2px; }
.ttl__pre span { position: relative; font: 600 1.25rem/1.2 var(--f-display); color: #3a2c1a; background: linear-gradient(180deg, #fbe6b3, #d9b066); padding: 6px 26px; border-radius: 999px; box-shadow: 0 0 18px rgb(243 214 143 / .35); }
.ttl__pre span::before, .ttl__pre span::after { content: "\2605"; position: absolute; top: 50%; transform: translateY(-55%); color: #f3d68f; font-size: .8rem; }
.ttl__pre span::before { left: -24px; } .ttl__pre span::after { right: -24px; }
.ttl__name span { background: linear-gradient(180deg, #fff3cf 0, #f0cf83 45%, #c99a48 75%, #f3d68f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgb(243 214 143 / .35)) drop-shadow(0 3px 2px rgb(5 10 35 / .6)); padding: 0 .08em; }
.orn--div svg { width: 190px; color: #e3c27a; }
.gate__date, .side__date { color: #f3d68f; letter-spacing: .04em; }
.guest { color: #f6efe0; }

/* Details: a navy panel with a gold border and pointed ends */
.dts { gap: 0; background: var(--card); border: 1.5px solid rgb(227 194 122 / .75); border-radius: 26px; padding: 6px 18px; box-shadow: 0 0 0 5px rgb(15 22 56 / .6), 0 0 0 6px rgb(227 194 122 / .3), var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 13px 2px; }
.dt + .dt { border-top: 1px solid rgb(227 194 122 / .3); }
.dt__ic .ic { width: 28px; height: 28px; }
.dt__v small { color: #d9d3e6; }
.btn--map { --map-bg: rgb(28 38 86 / .7); --map-ink: #f3d68f; --map-line: rgb(227 194 122 / .6); }
.sec--details .link, .sec--countdown .link { color: #f3d68f; }

/* Countdown */
.cd__t { font: 500 1.3rem/1.2 var(--f-display); gap: 10px; }
.cd__t::before, .cd__t::after { content: "\2605"; font-size: .7em; color: #f3d68f; }
.cd__n { font-weight: 600; }

/* Hosts with gold laurels */
.sec--hosts { padding-top: 16px; padding-bottom: 70px; }
.par--hosts { position: relative; padding: 0 60px; }
.par--hosts::before, .par--hosts::after { content: ""; position: absolute; top: 18px; width: 52px; height: 32px; background: url(../img/a06-laurel.svg) center / contain no-repeat; }
.par--hosts::before { left: 0; transform: scaleX(-1); } .par--hosts::after { right: 0; }
.par__l { color: #efe7d6; }
.par__n { color: #fff3d6; font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }

/* From the gallery on: soft clouds and lavender light */
.sec--gallery, .sec--rsvp, .sec--wishes, .sec--closing { --ink: #2b2f5e; --muted: #5a5c85; --card: rgb(255 255 255 / .82); --card-line: rgb(255 255 255 / .95); --card-shadow: 0 10px 24px rgb(40 50 110 / .14);
  color: #2b2f5e; background: linear-gradient(180deg, #e9e4f3, #f3eff7); }
.sec--gallery { padding-top: 90px; }
.sec--gallery::before { content: ""; position: absolute; left: -6%; right: -6%; top: -1px; height: 80px; background: url(../img/a06-cloud.svg) top / 100% 100% no-repeat; z-index: 1; }
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 32px; height: 10px; flex: none;
  background: radial-gradient(circle, #8f6a2c 0 2.6px, transparent 3px) right center / 10px 10px no-repeat, linear-gradient(#8f6a2c, #8f6a2c) left center / 24px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__sub, .lead { color: #4f527c; }
.sec--rsvp .h-sec__sub { color: #4f527c; }
.gallery__item { border: 2px solid rgb(255 255 255 / .9); border-radius: 18px; box-shadow: 0 10px 22px rgb(40 50 110 / .2); }
.hint { color: #5a5c85; }
.field > span { color: #2b2f5e; }
.btn--send { --btn-bg: linear-gradient(180deg, #c9a36a, #9d7640); --btn-ink: #fff; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.wish__ago { color: #6a6a95; }
.tag--no { background: #e9e4f2; color: #5a5c85; }
.sec--closing { padding-bottom: 130px; }
.closing__t span { font-style: normal; color: #2b2f5e; }
.sec--closing .orn--div svg { color: #b08a46; }
.closing__p.salam { font-style: italic; color: #2b2f5e; margin-top: 14px; }
.made { color: #4f527c; }

/* Twinkling stars */
.fx i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff9e6 0 30%, rgb(243 214 143 / .8) 50%, transparent 72%); }
.fx i:nth-child(3n) { width: 4px; height: 4px; }

/* ---------- Lanterns and mosque from the mockup ---------- */
.o { filter: drop-shadow(0 0 16px rgb(243 200 110 / .35)); }
.gate__in .o1, .side__in .o1 { left: -16px; top: -8px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
.gate__in .o2, .side__in .o2 { right: -10px; top: 40px; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.gate__in .o3, .side__in .o3 { right: -26px; top: 196px; width: 27vw; max-width: 104px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .9; }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -12px; top: -6px; 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: 30px; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o3 { right: -26px; top: 214px; width: 27vw; max-width: 104px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); }
.sec--gallery .o1 { left: -20px; top: 70px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-branch); background-image: url(../img/st-branch.webp); filter: none; }
.sec--wishes .o1 { left: -12px; top: 0; width: 14vw; max-width: 54px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }

@media (min-width: 1024px) { .phw--side { --pw: min(28vw, 360px); } .side__in .o1 { left: 6%; } .side__in .o2 { right: 8%; } .side__in .o3 { right: 4%; } }