/* K04 · Javanese Heritage: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-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: 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: "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: 600; font-display: swap; src: url("../fonts/lora-latin-600-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-gunungan-l: 260 / 335; --sx-gunungan-l: 0.0; --sy-gunungan-l: 60.5; --sw-gunungan-l: 184.25; --ar-gunungan-r: 160 / 373; --sx-gunungan-r: 1018.25; --sy-gunungan-r: 186.25; --sw-gunungan-r: 103.75; --ar-joglo: 380 / 225; --sx-joglo: 784.0; --sy-joglo: 559.5; --sw-joglo: 338.0; --ar-gunungan-bl: 180 / 209; --sx-gunungan-bl: 88.0; --sy-gunungan-bl: 1278.0; --sw-gunungan-bl: 97.25; --ar-gunungan-br: 180 / 174; --sx-gunungan-br: 932.0; --sy-gunungan-br: 1278.0; --sw-gunungan-br: 120.0; }
.phw { --cx0: 0; --cy0: 55; --cw: 585; --ch: 490; }

/* K04 · Javanese Heritage: dark carved wood and gold, batik kawung, cream parchment, a swash italic serif; wayang, gunungan and the joglo come from the mockup. */
:root {
  --bg: #f3e6cf; --bg2: #e9d7b6; --ink: #3b2314; --muted: #6b4f38; --accent: #a8702f; --accent2: #c9934a;
  --line: rgb(168 112 47 / .3);
  --card: #fbf3e4; --card-line: #e0c89c; --card-shadow: 0 10px 24px rgb(60 35 15 / .12); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #ecc178, #b8823c); --btn-ink: #2e180b; --btn-border: 1px solid #f6dca4; --btn-shadow: 0 8px 20px rgb(120 70 20 / .32);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-font: var(--f-display); --name-size: 1.45rem; --name-weight: 700; --name-style: italic; --name-color: #4a2612;
  --head-size: 1.5rem; --head-weight: 600; --head-color: #3b2314; --head-ink: #3b2314;
  --kicker-color: #f6e4c4;
  --photo-radius: 16px; --photo-shadow: 0 0 0 2px #c9934a, 0 0 0 6px #2a170d, 0 0 0 7px rgb(224 180 106 / .6), 0 18px 34px rgb(0 0 0 / .45);
  --gate-bg: url(../img/k04-kawung.svg), radial-gradient(ellipse at 50% 30%, #4a2b17, #2a170d 70%);
  --gate-ink: #f6e4c4; --guest-bg: rgb(243 230 207 / .1); --guest-line: rgb(224 180 106 / .5);
  --cd-title: #f6e4c4; --cd-num: #fbecd0; --cd-label: #e9d2a8;
  --cd-tile: linear-gradient(180deg, #4a2b17, #2e180b); --cd-tile-border: 1.5px solid #d9a656; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 14px rgb(0 0 0 / .35);
  --dt-ic: #7a4a22; --dt-ic-bg: transparent; --dt-label: #6b4f38; --av-bg: #a8702f; --av-ink: #fbf3e4;
  --field-bg: #fbf3e4;
}
body { background: url(../img/k04-kawung-d.svg), #f3e6cf; }
.inv { background: transparent; }

/* Hero, countdown, RSVP, gallery and closing on dark carved wood with gold kawung */
.sec--hero, .sec--countdown, .sec--rsvp, .sec--gallery, .sec--closing { background: url(../img/k04-kawung.svg), linear-gradient(180deg, #3b2314, #2a170d); color: #f6e4c4; }
.sec--countdown { padding-top: 4px; }
.sec--rsvp { padding-bottom: 20px; }
.sec--gallery { padding-top: 20px; }

/* Title */
.phw--cover { --pw: min(70vw, 280px); margin: 8px auto 18px; }
.phw--hero { --pw: min(80vw, 320px); margin: 6px auto 20px; }
.orn--flourish svg { width: 130px; margin: 4px auto 0; color: #d9a656; }
.ttl__kicker b { display: block; font: italic 500 2.5rem/1 var(--f-display); color: #f6e4c4; text-shadow: 0 3px 8px rgb(0 0 0 / .45); }
.ttl__kicker b:last-child { font-size: 3.4rem; line-height: 1.05; }
.ttl .lead { color: #efdcb8; max-width: 330px; font-size: .95rem; }
/* the name on a cream-gold cartouche with pointed ends */
.ttl__name { margin: 16px 0 4px; filter: drop-shadow(0 0 1px #8a5a24) drop-shadow(0 0 1px #8a5a24) drop-shadow(0 8px 12px rgb(0 0 0 / .45)); }
.ttl__name span { padding: 10px 34px 11px; background: linear-gradient(180deg, #fbefd2, #ecd2a2 55%, #d9b27a); font-size: clamp(1.15rem, 5.2vw, 1.5rem); text-wrap: balance;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); }
.ttl .orn--div svg { width: 160px; color: #d9a656; }
.gate__date, .side__date { color: #ecd2a2; letter-spacing: .04em; }
.guest { color: #f6e4c4; }

/* Countdown */
.cd__t { font: 600 1.1rem/1.2 var(--f-body); gap: 10px; }
.cd__t::before, .cd__t::after { content: "\00BB\00BB"; color: #d9a656; font-size: .9em; letter-spacing: -.1em; }
.cd__t::before { transform: scaleX(-1); }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #ecd2a2; }

/* Greeting on cream parchment */
.sec--greeting .ttl__salam { font: italic 600 1.3rem/1.3 var(--f-body); color: #3b2314; margin-bottom: 10px; }
.sec--greeting .lead { color: #3b2314; max-width: 360px; }
.sec--greeting .lead.salam { font: italic 600 1.15rem/1.3 var(--f-body); margin-top: 16px; }
.sec--greeting .sec__in::after { content: ""; display: block; width: 120px; height: 30px; margin: 12px auto 0; background: url(../img/k04-flourish.svg) center / contain no-repeat; }

/* Headings: "Detail Acara" on a brown ribbon; the rest with icons */
.sec--details .h-sec__t { position: relative; color: #fbecd0; font: italic 600 1.35rem/1.2 var(--f-display); background: linear-gradient(180deg, #6a3b19, #4a2612); padding: 8px 30px 9px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.sec--details .h-sec { filter: drop-shadow(0 0 1px #d9a656) drop-shadow(0 0 1px #d9a656); }
.h-sec__ic { color: #a8702f; }
.sec--rsvp .h-sec__t, .sec--gallery .h-sec__t { color: #fbecd0; }
.sec--rsvp .h-sec__t { font-size: 1.3rem; }
.sec--rsvp .h-sec__ic, .sec--gallery .h-sec__ic { color: #ecc178; }
.sec--rsvp .lead--rsvp, .sec--rsvp .h-sec__sub, .sec--gallery .hint { color: #e9d2a8; }

/* Details */
.dts { gap: 0; background: rgb(251 243 228 / .85); border: 1px solid #e0c89c; border-radius: 16px; 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(168 112 47 / .25); }
.dt__ic .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.dt__v strong { font-weight: 600; }
.btn--map { --map-ink: #6a3b19; --map-line: #e0c89c; --map-bg: #fbf3e4; }
.link, .link--map, .link--cal { color: #7a4a22; }

/* RSVP card with a gold line, gallery */
.sec--rsvp .form { background: rgb(42 23 13 / .55); border: 1.5px solid #d9a656; box-shadow: inset 0 0 0 4px rgb(42 23 13 / .6), inset 0 0 0 5px rgb(224 180 106 / .35); }
.sec--rsvp .field > span { color: #f6e4c4; }
.sec--rsvp .field em, .sec--rsvp .field small { color: #e0c89c; }
.sec--rsvp .rsvp-done { background: rgb(42 23 13 / .55); color: #f6e4c4; border-color: #d9a656; }
.gallery__item { border: 3px solid #f3e6cf; border-radius: 14px; box-shadow: 0 10px 22px rgb(0 0 0 / .4); }

/* Wishes */
.wcomp { border-color: #e0c89c; }
.wish { border-color: #ead9b8; background: #fbf3e4; }

/* Closing */
.sec--closing { padding-bottom: 140px; }
.closing__t span { font: italic 500 2.2rem/1.2 var(--f-display); color: #f6e4c4; }
.sec--closing .orn--div svg { color: #d9a656; }
.closing__p, .closing__sign, .made { color: #efdcb8; }

/* ---------- Wayang, gunungan and the joglo from the mockup ---------- */
.o { filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.gate__in .o1, .side__in .o1 { left: -30px; top: 80px; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-gunungan-l); background-image: url(../img/st-gunungan-l.webp); }
.gate__in .o2, .side__in .o2 { right: -26px; top: 150px; width: 18vw; max-width: 70px; aspect-ratio: var(--ar-gunungan-r); background-image: url(../img/st-gunungan-r.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -36px; top: 360px; width: 28vw; max-width: 108px; aspect-ratio: var(--ar-gunungan-l); background-image: url(../img/st-gunungan-l.webp); }
.sec--hero .o2 { right: -26px; top: 360px; width: 19vw; max-width: 74px; aspect-ratio: var(--ar-gunungan-r); background-image: url(../img/st-gunungan-r.webp); }
.sec--details .o1 { right: -16px; bottom: 6px; width: 50vw; max-width: 200px; aspect-ratio: var(--ar-joglo); background-image: url(../img/st-joglo.webp); opacity: .35; filter: none; }
.sec--closing .o1 { left: 8px; bottom: 0; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-gunungan-bl); background-image: url(../img/st-gunungan-bl.webp); }
.sec--closing .o2 { right: 8px; bottom: 0; width: 24vw; max-width: 92px; aspect-ratio: var(--ar-gunungan-br); background-image: url(../img/st-gunungan-br.webp); }

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

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