/* K02 · Royal Blue & Gold: 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; }
@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-a: 150 / 608; --sx-lantern-a: 64.0; --sy-lantern-a: 51.5; --sw-lantern-a: 57.25; --ar-lantern-c: 140 / 543; --sx-lantern-c: 963.0; --sy-lantern-c: 51.75; --sw-lantern-c: 46.75; --ar-lantern-d: 140 / 525; --sx-lantern-d: 1007.25; --sy-lantern-d: 127.25; --sw-lantern-d: 53.0; --ar-flowers-r: 260 / 269; --sx-flowers-r: 1000.25; --sy-flowers-r: 376.0; --sw-flowers-r: 121.75; --ar-moon: 100 / 103; --sx-moon: 968.25; --sy-moon: 510.5; --sw-moon: 29.0; }
.phw { --cx0: 125; --cy0: 50; --cw: 430; --ch: 390; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-lantern-a.webp); left: calc((var(--sx-lantern-a) - var(--cx0)) * var(--k)); top: calc((var(--sy-lantern-a) - var(--cy0)) * var(--k)); width: calc(var(--sw-lantern-a) * var(--k)); aspect-ratio: var(--ar-lantern-a); }

/* K02 · Royal Blue & Gold: deep royal navy with a gold lattice, golden lanterns and arches, a gold name plaque; lanterns, blue flowers and the crescent come from the mockup. */
:root {
  --bg: #f6f1e4; --bg2: #ebe3cf; --ink: #14234a; --muted: #4a5675; --accent: #c39a46; --accent2: #13286e;
  --line: rgb(195 154 70 / .32);
  --card: #fffcf4; --card-line: #e3d1a2; --card-shadow: 0 10px 24px rgb(19 40 110 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f2d891, #c8a04c); --btn-ink: #13286e; --btn-border: 1px solid #fff0c4; --btn-shadow: 0 8px 20px rgb(160 120 40 / .3);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-size: 1.3rem; --name-weight: 700; --name-color: #13286e;
  --head-size: 1.6rem; --head-weight: 600; --head-color: #13286e; --head-ink: #13286e;
  --kicker-color: #e2c072; --bism-color: #e8c97c;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: url(../img/k02-khatam.svg), radial-gradient(ellipse at 50% 20%, #23409a, #13286e 60%, #0d1d55);
  --gate-ink: #f6f1e4; --guest-bg: rgb(13 29 85 / .6); --guest-line: rgb(217 180 95 / .6);
  --cd-title: #f3dfa6; --cd-num: #fff8e6; --cd-label: #e6dcc0;
  --cd-tile: linear-gradient(180deg, #1d3684, #13286e); --cd-tile-border: 1.5px solid #c9a352; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 14px rgb(0 0 0 / .25);
  --dt-ic: #c39a46; --dt-ic-bg: #f1e8d2; --dt-label: #13286e; --av-bg: #13286e; --av-ink: #f3dfa6;
}
body { background: #f6f1e4; }
.inv { background: transparent; }

/* Hero, countdown, gallery and closing on royal navy with the gold lattice */
.sec--hero, .sec--countdown, .sec--gallery, .sec--closing { background: url(../img/k02-khatam.svg), linear-gradient(180deg, #172f80, #13286e 55%, #0f2163); color: #f6f1e4; }
.sec--countdown { padding-top: 6px; }

/* The photo in a gold-edged royal arch */
.phw .photo { border-radius: 0; background: none; box-shadow: none; -webkit-mask: url(../img/k02-arch.svg) center / 100% 100% no-repeat; mask: url(../img/k02-arch.svg) center / 100% 100% no-repeat; }
.phw::before, .phw::after { content: ""; position: absolute; pointer-events: none; -webkit-mask: url(../img/k02-arch.svg) center / 100% 100% no-repeat; mask: url(../img/k02-arch.svg) center / 100% 100% no-repeat; }
.phw::before { inset: -10px; z-index: -2; background: linear-gradient(160deg, #f6e1a4, #c39a46 42%, #f0d68e 64%, #a07a2e); filter: drop-shadow(0 0 18px rgb(240 200 110 / .3)); }
.phw::after { inset: -6px; z-index: -1; background: #13286e; }
.phw--cover { --pw: min(58vw, 228px); margin: 14px auto 18px; }
.phw--hero { --pw: min(66vw, 260px); margin: 14px auto 20px; }

/* Title */
.ttl__bism { font-size: 1.6rem; }
.ttl__kicker b { display: block; font: 600 2.6rem/1.04 var(--f-display); background: linear-gradient(180deg, #fbe9b4 0, #e2c072 45%, #c39a46 80%, #f0d68e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35)); }
.ttl .lead { color: #e9e3d2; max-width: 330px; font-size: .95rem; }
/* "Ananda" and the name on a gold plaque */
.ttl__ananda { margin: 16px 0 0; position: relative; z-index: 2; line-height: 1; }
.ttl__ananda span { font: 600 .82rem/1 var(--f-body); color: #13286e; letter-spacing: .04em; }
.ttl__name { margin: 0; }
.ttl__name span { position: relative; padding: 24px 30px 12px; background: linear-gradient(180deg, #f8e7b4, #e2c072 55%, #c9a352); border-radius: 14px; font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  box-shadow: inset 0 0 0 2px #fff3cf, inset 0 0 0 4px #b8913e, 0 10px 22px rgb(0 0 0 / .3); text-wrap: balance; }
.ttl__name span::before, .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url(../img/k02-star.svg) center / contain no-repeat; }
.ttl__name span::before { left: -9px; } .ttl__name span::after { right: -9px; }
.ttl__ananda + .ttl__name { margin-top: -26px; }
.ttl .orn--div svg { width: 150px; color: #d9b45f; }
.par { margin-top: 6px; padding: 10px 18px; border: 1.5px solid #c9a352; border-radius: 14px; background: rgb(13 29 85 / .55); }
.par__l { color: #e6dcc0; font-size: .88rem; }
.par__n { color: #fff8e6; font-weight: 600; font-size: .98rem; }
.par__b { display: inline; }
.gate__date, .side__date { color: #f3dfa6; letter-spacing: .03em; }
.guest { color: #f6f1e4; }

/* Headings: navy (gold on navy) between gold stars */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 12px; flex: none;
  background: url(../img/k02-star.svg) right center / 12px 12px no-repeat, linear-gradient(#c39a46, #c39a46) left center / 24px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.sec--gallery .h-sec__t, .sec--closing .closing__t span { color: #f3dfa6; }
.h-sec__ic { color: #c39a46; }
.sec--gallery .h-sec__sub, .sec--gallery .hint { color: #d9d2bd; }

/* Countdown */
.cd__t { font-size: 1.2rem; }
.cd__ic { color: #e2c072; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #f3dfa6; }

/* Details on cream */
.dts { gap: 0; background: #fffcf4; border: 1px solid #e3d1a2; border-radius: 16px; padding: 6px 16px; box-shadow: inset 0 0 0 4px #fffcf4, inset 0 0 0 5px rgb(195 154 70 / .3), var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(195 154 70 / .3); }
.dt__ic { border-radius: 50%; }
.btn--map { --map-ink: #13286e; --map-line: #d9c48c; --map-bg: #fffcf4; }
.link, .link--map, .link--cal { color: #13286e; }
.btn--cta { --btn-bg: linear-gradient(180deg, #1d3684, #13286e); --btn-ink: #f3dfa6; --btn-border: 1.5px solid #c9a352; }

/* The invitation line, between gold lines */
.sec--prayer { padding-top: 10px; padding-bottom: 46px; }
.prayer { font: italic 400 1.02rem/1.65 var(--f-body); color: #14234a; }
.prayer::before, .prayer::after { content: none; }
.sec--prayer .orn--div svg { color: #c39a46; }

/* Gallery, RSVP, wishes */
.gallery__item { border: 2px solid #d9b45f; border-radius: 12px; box-shadow: 0 10px 22px rgb(0 0 0 / .3); }
.wcomp, .card { border-color: #e3d1a2; }
.wish { border-color: #ece0bd; }

/* Closing */
.sec--closing { padding-bottom: 120px; }
.closing__p, .closing__sign, .made { color: #e9e3d2; }
.closing__p.salam { font-style: italic; color: #f3dfa6; margin-top: 14px; }
.sec--closing .orn--div svg { color: #d9b45f; }

/* ---------- Lanterns, flowers and the crescent from the mockup ---------- */
.o, .phd i { filter: drop-shadow(0 0 12px rgb(255 210 120 / .3)); }
.gate__in .o1, .side__in .o1 { right: -10px; top: 60px; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-c); background-image: url(../img/st-lantern-c.webp); }
.gate__in .o2, .side__in .o2 { right: 24px; top: 96px; width: 11vw; max-width: 42px; aspect-ratio: var(--ar-lantern-d); background-image: url(../img/st-lantern-d.webp); }
.sec--hero .o1 { right: -6px; top: 70px; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-c); background-image: url(../img/st-lantern-c.webp); }
.sec--hero .o2 { right: 30px; top: 110px; width: 11vw; max-width: 42px; aspect-ratio: var(--ar-lantern-d); background-image: url(../img/st-lantern-d.webp); }
.sec--hero .o3 { right: -24px; top: 300px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-flowers-r); background-image: url(../img/st-flowers-r.webp); filter: none; }
.sec--countdown .o1 { right: 14px; top: 0; width: 9vw; max-width: 34px; aspect-ratio: var(--ar-moon); background-image: url(../img/st-moon.webp); }
.sec--closing .o1 { left: 10px; top: 0; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-d); background-image: url(../img/st-lantern-d.webp); }
.sec--closing .o2 { right: 10px; top: 0; width: 12vw; max-width: 46px; aspect-ratio: var(--ar-lantern-c); background-image: url(../img/st-lantern-c.webp); }
.sec--closing .o3 { right: -20px; bottom: 0; width: 34vw; max-width: 130px; aspect-ratio: var(--ar-flowers-r); background-image: url(../img/st-flowers-r.webp); filter: none; }

@media (min-width: 1024px) { .phw--side { --pw: min(18vw, 230px); } .side__in .o1 { right: 10%; } .side__in .o2 { right: 16%; } }

/* English: "Circumcision Celebration" is twice as long as "Undangan Khitanan" */
html:lang(en) .ttl__kicker b { font-size: 2.2rem; }