/* K05 · Betawi Sunatan: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/playfair-display-latin-800-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: "Playfair Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/playfair-display-latin-800-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: italic; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-latin-700-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: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-ketupat: 160 / 264; --sx-ketupat: 967.0; --sy-ketupat: 435.0; --sw-ketupat: 77.0; --ar-kembang-l: 300 / 227; --sx-kembang-l: 22.25; --sy-kembang-l: 972.0; --sw-kembang-l: 169.0; --ar-kembang-r: 300 / 223; --sx-kembang-r: 933.25; --sy-kembang-r: 972.0; --sw-kembang-r: 172.25; --ar-rumah: 320 / 199; --sx-rumah: 916.0; --sy-rumah: 588.0; --sw-rumah: 206.0; --ar-flowers-r: 220 / 498; --sx-flowers-r: 992.0; --sy-flowers-r: 278.0; --sw-flowers-r: 130.0; }
.phw { --cx0: 0; --cy0: 105; --cw: 548; --ch: 460; }

/* K05 · Betawi Sunatan: warm cream, Betawi red, green and yellow, the gigi balang roof trim, Monas and fireworks; ketupat, kembang kelapa and the Betawi house come from the mockup. */
:root {
  --bg: #fbf3dc; --bg2: #f3e5bf; --ink: #3a2414; --muted: #6a4e36; --accent: #c8102e; --accent2: #1d6b3a;
  --line: rgb(200 16 46 / .2);
  --card: #fffaf0; --card-line: #ecd9a8; --card-shadow: 0 10px 24px rgb(120 60 20 / .12); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #23824a, #146034); --btn-ink: #fff; --btn-border: 2px solid rgb(255 255 255 / .7); --btn-shadow: 0 8px 18px rgb(20 96 52 / .32);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Nunito", system-ui, sans-serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Nunito", system-ui, sans-serif;
  --name-font: var(--f-display); --name-size: 1.35rem; --name-weight: 700; --name-style: italic; --name-color: #fff;
  --head-size: 1.75rem; --head-weight: 800; --head-color: #b3122a; --head-ink: #b3122a;
  --kicker-color: #c8102e;
  --photo-radius: 18px; --photo-border: 4px solid #fff; --photo-shadow: 0 0 0 3px #e0b040, 0 16px 30px rgb(120 60 20 / .28);
  --gate-bg: url(../img/k05-monas-faint.svg) right 6% top 40px / 70px auto no-repeat, radial-gradient(ellipse at 50% 30%, #fff8e6, #fbf0d2 70%);
  --guest-bg: #fffaf0; --guest-line: #ecd9a8;
  --cd-title: #1d6b3a; --cd-num: #fff; --cd-label: #ffe9d0;
  --cd-tile: linear-gradient(180deg, #d61a36, #a50d24); --cd-tile-border: 0; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 12px rgb(165 13 36 / .3);
  --dt-ic: #c8102e; --dt-ic-bg: transparent; --dt-label: #1d6b3a; --av-bg: #1d6b3a; --av-ink: #fff;
}
body { background: #fbf3dc; }
.inv { background: transparent; }
/* the gigi balang trim along the top of the cover and of the first screen */
#gate::before, .sec--hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: url(../img/k05-gigi.svg) 0 0 / 44px 26px repeat-x; z-index: 4; }
.gate__in { padding-top: 48px; }
.sec--hero { padding-top: 46px; background: url(../img/k05-monas-faint.svg) right 4% top 360px / 80px auto no-repeat; }

/* Title: Monas, fireworks, red "Undangan", green "Khitanan", the name on a red banner */
.phw--cover { --pw: min(66vw, 260px); margin: 0 auto 16px; }
.phw--hero { --pw: min(76vw, 300px); margin: 0 auto 18px; }
.orn--monas svg { width: 30px; margin: 0 auto -2px; color: #c8102e; }
.ttl__kicker { background: url(../img/k05-fireworks.svg) center / 300px 110px no-repeat; padding: 2px 0 4px; }
.ttl__kicker b { display: block; font-family: var(--f-display); line-height: 1.02; }
.ttl__kicker b:first-child { font: italic 800 2.5rem/1.02 var(--f-display); color: #c8102e; }
.ttl__kicker b:last-child { font: 800 3rem/1.04 var(--f-display); color: #1d6b3a; }
.ttl .lead { color: #3a2414; font-size: .95rem; max-width: 320px; }
.ttl__name { margin: 12px 0 0; filter: drop-shadow(0 0 1px #e0b040) drop-shadow(0 0 1px #e0b040) drop-shadow(0 8px 12px rgb(120 20 20 / .3)); }
.ttl__name span { padding: 8px 34px 9px; background: linear-gradient(180deg, #d61a36, #a50d24); font-size: clamp(1.1rem, 5vw, 1.4rem); text-wrap: balance;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.ttl .orn--div svg { width: 170px; color: #c8102e; margin: 8px auto 0; }
.gate__date, .side__date { color: #1d6b3a; font-weight: 800; }

/* Headings: red serif between gold leaves (white on the green and red bands) */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 20px; flex: none; background: url(../img/k05-leaf.svg) center / contain no-repeat; }
.h-sec__t::before { transform: scaleX(-1); }
.sec--gallery .h-sec__t, .sec--wishes .h-sec__t { color: #fff; }
.sec--gallery .h-sec__sub, .sec--gallery .hint, .sec--wishes .h-sec__sub, .sec--wishes .wishes__n { color: #fdebd0; }

/* Countdown in a cream box with a gold line */
.sec--countdown { padding-top: 10px; }
.cd-box { background: #fffaf0; border: 1.5px solid #e0b040; border-radius: 18px; padding: 14px 12px 18px; box-shadow: var(--card-shadow); }
.cd__t { font: 800 1.15rem/1.2 var(--f-body); }
.cd__n { font-weight: 800; }

/* Details */
.dts { gap: 0; background: #fffaf0; border: 1px solid #ecd9a8; 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 rgb(200 16 46 / .15); }
.dt__ic .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.dt__l { font-weight: 800; }
.btn--map { --map-ink: #146034; --map-line: #cfe1c9; --map-bg: #fffaf0; }
.link, .link--map, .link--cal { color: #146034; }

/* Gallery on a green band, wishes on a red band, both with a light batik pattern */
.sec--gallery { background: url(../img/k05-batik.svg), linear-gradient(180deg, #1f7442, #155c33); border-top: 4px solid #e0b040; border-bottom: 4px solid #e0b040; }
.gallery__item { border: 3px solid #fff; border-radius: 14px; box-shadow: 0 10px 20px rgb(0 0 0 / .25); }
.sec--wishes { background: url(../img/k05-batik.svg), linear-gradient(180deg, #c8102e, #a50d24); border-top: 4px solid #e0b040; }
.sec--wishes .wcomp { background: #fffaf0; border-color: #e0b040; }
.sec--wishes .wish { background: #fffaf0; border-color: transparent; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }

/* Closing with the gigi balang along the bottom */
.sec--closing { padding-bottom: 120px; }
.sec--closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: url(../img/k05-gigi.svg) 0 0 / 44px 26px repeat-x; transform: scaleY(-1); z-index: 2; }
.closing__t span { color: #b3122a; }

/* ---------- Ketupat, kembang kelapa and the Betawi house from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(100 50 20 / .2)); }
.gate__in .o1, .side__in .o1 { right: -16px; top: 250px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); }
.gate__in .o2, .side__in .o2 { left: -12px; top: 268px; width: 13vw; max-width: 50px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); transform: scaleX(-1) rotate(-8deg); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -22px; top: 250px; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-flowers-r); background-image: url(../img/st-flowers-r.webp); }
.sec--hero .o2 { left: -10px; top: 300px; width: 14vw; max-width: 54px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); transform: scaleX(-1); }
.sec--details .o1 { right: -16px; bottom: 0; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-rumah); background-image: url(../img/st-rumah.webp); opacity: .9; }
.sec--details { padding-bottom: 110px; }
.sec--rsvp .o1 { left: -40px; top: 20px; width: 30vw; max-width: 116px; aspect-ratio: var(--ar-kembang-l); background-image: url(../img/st-kembang-l.webp); }
.sec--rsvp .o2 { right: -40px; top: 20px; width: 30vw; max-width: 116px; aspect-ratio: var(--ar-kembang-r); background-image: url(../img/st-kembang-r.webp); }
.sec--closing .o1 { left: 8px; bottom: 30px; width: 13vw; max-width: 50px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); transform: scaleX(-1); }
.sec--closing .o2 { right: 8px; bottom: 30px; width: 13vw; max-width: 50px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); }

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

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