/* K03 · Sage Minimalist: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-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: "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: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mulish-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: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/mulish-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: "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-euca-tr: 220 / 251; --sx-euca-tr: 984.0; --sy-euca-tr: 56.25; --sw-euca-tr: 138.0; --ar-lantern-a: 90 / 213; --sx-lantern-a: 950.0; --sy-lantern-a: 56.25; --sw-lantern-a: 42.0; --ar-mosque: 280 / 435; --sx-mosque: 950.0; --sy-mosque: 238.75; --sw-mosque: 156.5; --ar-euca-br: 260 / 191; --sx-euca-br: 950.0; --sy-euca-br: 395.5; --sw-euca-br: 172.0; --ar-leaf-bl: 150 / 220; --sx-leaf-bl: 0.0; --sy-leaf-bl: 1295.5; --sw-leaf-bl: 72.75; --ar-leaf-br: 140 / 218; --sx-leaf-br: 1047.5; --sy-leaf-br: 1286.0; --sw-leaf-br: 74.5; }
.phw { --cx0: 0; --cy0: 55; --cw: 455; --ch: 420; }

/* K03 · Sage Minimalist: warm off-white and sage, soft eucalyptus, a quiet high-contrast serif and a clean sans; eucalyptus, lantern, mosque and leaves come from the mockup. */
:root {
  --bg: #f6f5ef; --bg2: #eceee3; --ink: #2f3826; --muted: #5d6652; --accent: #6f8458; --accent2: #e6eadb;
  --line: rgb(111 132 88 / .22);
  --card: #fdfdf9; --card-line: #e1e5d6; --card-shadow: 0 10px 24px rgb(70 85 50 / .08); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #7d935f, #5f744a); --btn-ink: #fdfdf6; --btn-shadow: 0 8px 18px rgb(80 100 60 / .26);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Mulish", system-ui, sans-serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-size: clamp(1.3rem, 6.3vw, 1.85rem); --name-weight: 400; --name-color: #4a5634;
  --head-size: 1.7rem; --head-weight: 600; --head-color: #4a5634; --head-ink: #4a5634;
  --kicker-color: #6f8458; --bism-color: #6f8458;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 10% 20%, #e7ebdc 0, rgb(231 235 220 / 0) 40%), radial-gradient(ellipse at 90% 70%, #e9ecdf 0, rgb(233 236 223 / 0) 40%), #f6f5ef;
  --guest-bg: #fdfdf9; --guest-line: #e1e5d6;
  --cd-title: #4a5634; --cd-num: #4a5634; --cd-label: #5d6652;
  --cd-tile: #eef0e6; --cd-tile-border: 0; --cd-tile-radius: 14px; --cd-tile-shadow: none;
  --dt-ic: #5f744a; --dt-ic-bg: #e6eadb; --dt-label: #2f3826; --av-bg: #8a9a6e; --av-ink: #fff;
}
body { background: radial-gradient(ellipse at 0 20%, #e9ecdf 0, rgb(233 236 223 / 0) 30%), radial-gradient(ellipse at 100% 60%, #eaede0 0, rgb(234 237 224 / 0) 30%), #f6f5ef; }
.inv { background: transparent; }

/* The photo: a soft window with a gentle wave at the bottom */
.phw .photo { background: none; box-shadow: none; border-radius: 130px 130px 0 0 / 76px 76px 0 0;
  -webkit-mask: linear-gradient(180deg, #000 74%, transparent 100%); mask: linear-gradient(180deg, #000 74%, transparent 100%); }
.phw--cover { --pw: min(66vw, 256px); margin: 4px auto 0; }
.phw--hero { --pw: min(76vw, 300px); margin: 0 auto; }

/* Title */
.ttl__bism { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ttl__bism::before, .ttl__bism::after { content: ""; width: 34px; height: 1px; background: #a5b28f; }
.ttl .lead { font: 600 .7rem/1.6 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #4f5a41; max-width: 290px; margin-top: 6px; }
.ttl__kicker { margin-top: 6px; }
.ttl__kicker b { display: block; font-family: var(--f-display); }
.ttl__kicker b:first-child { font-size: 2.2rem; line-height: 1; color: #6f8458; font-weight: 400; }
.ttl__kicker b:last-child { position: relative; font-size: 3.3rem; line-height: 1.05; color: #4a5634; font-weight: 400; padding: 0 44px; }
.ttl__kicker b:last-child::before, .ttl__kicker b:last-child::after { content: ""; position: absolute; top: 50%; width: 40px; height: 24px; margin-top: -14px; background: url(../img/k03-leaf.svg) center / contain no-repeat; }
.ttl__kicker b:last-child::before { left: 0; transform: scaleX(-1); } .ttl__kicker b:last-child::after { right: 0; }
.ttl__ananda span { font: 700 .85rem/1 var(--f-body); color: #6f8458; letter-spacing: .06em; }
.ttl__ananda span::before, .ttl__ananda span::after { content: "\2022"; margin: 0 8px; color: #a5b28f; }
.ttl__name { margin: 4px 0 0; }
.ttl__prayer { font: 400 .88rem/1.6 var(--f-body); color: #5d6652; max-width: 330px; }
.gate__date, .side__date { color: #4a5634; letter-spacing: .04em; }

/* Countdown: big numbers on light sage tiles */
.cd__t { font: 600 1.2rem/1.2 var(--f-display); }
.cd__n { font-weight: 400; font-size: 2.2rem; }
.cd { gap: 8px; }

/* Details */
.dts { gap: 0; background: #fdfdf9; border: 1px solid #e1e5d6; 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 #e6e9dc; }
.dt__l { font-weight: 700; }
.dt__v strong { font-weight: 400; }
.btn--map { --map-ink: #5f744a; --map-line: #d3dbc2; --map-bg: #fdfdf9; }
.link, .link--map, .link--cal { color: #5f744a; }
.btn--cta { font-weight: 600; }

/* Headings: serif with a leaf, thin lines either side */
.h-sec__t { gap: 8px; }
.h-sec__ic { color: #7f9165; width: 1em; height: 1em; }
.sec--wishes .h-sec__t::before, .sec--wishes .h-sec__t::after { content: ""; width: 30px; height: 1px; background: #a5b28f; margin: 0 6px; }
.sec--gallery { background: #eef0e6; }
.gallery__item { border-radius: 12px; box-shadow: 0 8px 18px rgb(70 85 50 / .12); }
.wcomp { background: #eef0e6; border-color: #e1e5d6; box-shadow: none; }
.wish { background: #fff; border-color: #e6e9dc; }
.wish__av { font: 700 .82rem var(--f-body); letter-spacing: .02em; }
.sec--closing { padding-bottom: 120px; }
.closing__p.salam { font-style: italic; color: #4a5634; margin-top: 14px; }

/* ---------- Eucalyptus, lantern, mosque and leaves from the mockup ---------- */
.gate__in .o1, .side__in .o1 { right: -22px; top: -10px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-euca-tr); background-image: url(../img/st-euca-tr.webp); }
.gate__in .o2, .side__in .o2 { left: -14px; top: 140px; width: 10vw; max-width: 38px; aspect-ratio: var(--ar-lantern-a); background-image: url(../img/st-lantern-a.webp); }
.sec--hero .o1 { right: -22px; top: -10px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-euca-tr); background-image: url(../img/st-euca-tr.webp); }
.sec--hero .o2 { right: -44px; top: 250px; width: 30vw; max-width: 116px; aspect-ratio: var(--ar-mosque); background-image: url(../img/st-mosque.webp); opacity: .5; }
.sec--hero .o3 { left: -12px; top: 150px; width: 10vw; max-width: 38px; aspect-ratio: var(--ar-lantern-a); background-image: url(../img/st-lantern-a.webp); }
.sec--details .o1 { right: -30px; bottom: 10px; width: 34vw; max-width: 130px; aspect-ratio: var(--ar-euca-br); background-image: url(../img/st-euca-br.webp); opacity: .9; }
.sec--closing .o1 { left: 0; bottom: 0; width: 22vw; max-width: 84px; aspect-ratio: var(--ar-leaf-bl); background-image: url(../img/st-leaf-bl.webp); }
.sec--closing .o2 { right: 0; bottom: 0; width: 20vw; max-width: 78px; aspect-ratio: var(--ar-leaf-br); background-image: url(../img/st-leaf-br.webp); }

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