/* O06 · Traditional Batik Open House: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-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: 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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-gunungan: 120 / 183; --sx-gunungan: 830.75; --sy-gunungan: 69.5; --sw-gunungan: 55.75; --ar-batik-bl: 420 / 140; --sx-batik-bl: 0.0; --sy-batik-bl: 751.75; --sw-batik-bl: 340.0; --ar-batik-br: 420 / 169; --sx-batik-br: 798.25; --sy-batik-br: 735.0; --sw-batik-br: 323.75; --ar-batik-wl: 200 / 210; --sx-batik-wl: 0.0; --sy-batik-wl: 1244.5; --sw-batik-wl: 150.0; --ar-batik-wr: 200 / 255; --sx-batik-wr: 975.0; --sy-batik-wr: 1214.5; --sw-batik-wr: 147.0; --ar-joglo-l: 260 / 347; --ar-joglo-r: 260 / 349; --ar-batik-soft: 220 / 931; }
.phw { --cx0: 30; --cy0: 50; --cw: 632; --ch: 396; }

/* O06 · Traditional Batik Open House: indigo batik with gold, a sogan-brown countdown band, parchment panels,
   gold serif titles; the gunungan, batik flowers and the joglo pavilions from the mockup. */
:root {
  --bg: #f3e8d6; --bg2: #eadbc2; --ink: #3a2516; --muted: #6e5440; --accent: #b07a3a; --accent2: #1a2547;
  --line: rgb(176 122 58 / .3);
  --card: #fbf4e7; --card-line: #d9c09a; --card-shadow: 0 8px 20px rgb(70 40 15 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #23305a, #141d3a); --btn-ink: #f6e3b8; --btn-border: 1.5px solid #c99a55; --btn-shadow: 0 8px 18px rgb(20 29 58 / .35);
  --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Cormorant Garamond", Georgia, serif; --f-num: "Cormorant Garamond", Georgia, serif;
  --name-size: 1.55rem; --name-weight: 700; --name-color: #f1d49a;
  --head-size: 1.7rem; --head-weight: 700; --head-color: #3a2516; --head-ink: #3a2516;
  --photo-radius: 8px; --photo-border: 0; --photo-shadow: none;
  --navy: url(../img/o06-kawung.svg), radial-gradient(120% 70% at 70% 20%, #24325e, #16213f 60%, #111a33);
  --gate-bg: var(--navy); --gate-ink: #f3e6cc; --guest-bg: rgb(17 26 51 / .75); --guest-line: #b98b4e;
  --cd-title: #f6e3b8; --cd-num: #fbecd0; --cd-label: #e8d3ad;
  --cd-tile: transparent; --cd-tile-border: 1.5px solid #e2c189; --cd-tile-radius: 10px; --cd-tile-shadow: none;
  --dt-ic: #7a4a22; --dt-ic-bg: transparent; --dt-label: #3a2516; --av-bg: #ead7b6; --av-ink: #7a4a22;
  --field-line: #d9c09a;
}
body { background: url(../img/o06-kawung-d.svg), #f3e8d6; }
.inv { background: transparent; }

/* Hero on indigo batik */
.sec--hero { background: var(--navy); color: #f3e6cc; padding-bottom: 104px; }
.phw .photo { box-shadow: 0 0 0 2px #16213f, 0 0 0 4px #c99a55, 0 16px 30px rgb(0 0 0 / .4); }
.phw--cover { --pw: min(80vw, 320px); margin: 6px auto 20px; }
.phw--hero { --pw: min(86vw, 340px); margin: 4px auto 22px; }

/* Title under the gunungan, gold serif, a flourish, italic invitation, the hosts */
.ttl__kicker { position: relative; padding-top: 58px; }
.ttl__kicker::before { content: ""; position: absolute; left: 50%; top: 0; width: 46px; margin-left: -23px; aspect-ratio: var(--ar-gunungan); background: url(../img/st-gunungan.webp) center / contain no-repeat; }
.ttl__kicker b { display: block; font: 700 2.7rem/1 var(--f-display); background: linear-gradient(180deg, #fbe7bd, #e3b874 55%, #c08a45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl__kicker b:last-child { font-size: 3.1rem; }
.ttl .orn--div svg { width: 150px; margin: 8px auto 4px; color: #d9a656; }
.ttl .lead { font: italic 400 .95rem/1.55 var(--f-body); color: #efe2c6; max-width: 300px; }
.ttl__family { margin-top: 10px; }
.ttl__family span { font: 400 .95rem/1.2 var(--f-body); color: #e3c58e; }
.ttl__name { margin: 2px 0 0; }
.gate__date, .side__date { color: #f1d49a; font-weight: 600; margin-top: 16px; }
.guest { color: #f3e6cc; }

/* Countdown on a sogan-brown batik band */
.sec--countdown { background: url(../img/o06-parang.svg), #4a2814; color: #f6e3b8; padding: 26px 18px 28px; border-top: 3px solid #c99a55; border-bottom: 3px solid #c99a55; }
.cd-box { background: rgb(58 30 12 / .55); border-radius: 14px; padding: 12px 10px 14px; }
.cd__t { font: italic 600 1.15rem/1.3 var(--f-body); }
.cd__ic { color: #e2c189; }
.cd__n { font-weight: 700; font-size: 2.1rem; }
.sec--countdown .link--cal { color: #f6e3b8; }

/* Headings: dark serif between gold scrolls */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, transparent, #b07a3a); }
.h-sec__t::after { transform: scaleX(-1); }

/* Details on parchment with joglo pavilions */
.sec--details { background: url(../img/o06-kawung-d.svg), linear-gradient(180deg, #f6ecdb, #efe2cb); padding-bottom: 96px; }
.dts { gap: 10px; }
.dt { flex-direction: column; text-align: center; gap: 4px; background: rgb(251 244 231 / .9); border: 1px solid #d9c09a; }
.dt__ic { width: 34px; height: 34px; }
.dt__ic .ic { width: 28px; height: 28px; }
.dt__l { font-weight: 600; }
.note { background: none; border: 0; font: italic 400 .95rem/1.55 var(--f-body); color: #4a3424; padding: 8px 0; position: relative; }
.note::before, .note::after { content: ""; display: block; width: 60px; height: 1px; margin: 6px auto; background: #b07a3a; }
.btn--map { --map-ink: #3a2516; --map-line: #d9c09a; }
.link, .link--map, .link--cal { color: #7a4a22; }
.btn--cta { font-weight: 600; }

/* Gallery on an indigo band */
.sec--gallery { background: var(--navy); border-top: 3px solid #c99a55; border-bottom: 3px solid #c99a55; }
.sec--gallery .h-sec__t { color: #f1d49a; }
.sec--gallery .hint { color: #d8c6a2; }
.gallery__item { border: 2px solid #c99a55; }

/* Wishes on parchment */
.sec--wishes { background: url(../img/o06-kawung-d.svg), #f3e8d6; padding-bottom: 110px; }
.sec--wishes .h-sec__sub { font-style: italic; }
.wish { border-color: #e1cca9; }
.wish__av { color: #7a4a22; }
.sec--rsvp { background: #efe2cb; }

/* Closing on indigo */
.sec--closing { background: var(--navy); color: #f3e6cc; padding-bottom: 70px; border-top: 3px solid #c99a55; }
.closing__t span { color: #f1d49a; font-size: 2.3rem; }
.sec--closing .orn--div svg { color: #d9a656; }
.closing__p, .closing__sign, .made { color: #efe2c6; }

/* ---------- Gunungan, batik flowers and joglo pavilions from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); }
.gate__in .o1, .side__in .o1 { right: -10px; bottom: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-wr); background-image: url(../img/st-batik-wr.webp); }
.gate__in .o2, .side__in .o2 { left: -10px; bottom: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-wl); background-image: url(../img/st-batik-wl.webp); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o3, .side__in .o3 { right: 0; top: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-soft); background-image: url(../img/batik-soft.webp); filter: none; }
.gate__in .o4, .side__in .o4 { left: 0; top: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-soft); background-image: url(../img/batik-soft.webp); filter: none; transform: scaleX(-1); }
.sec--hero .o1 { right: -10px; bottom: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-wr); background-image: url(../img/st-batik-wr.webp); }
.sec--hero .o2 { left: -10px; bottom: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-wl); background-image: url(../img/st-batik-wl.webp); }
.sec--hero .o3 { right: 0; top: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-soft); background-image: url(../img/batik-soft.webp); filter: none; }
.sec--hero .o4 { left: 0; top: 0; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-batik-soft); background-image: url(../img/batik-soft.webp); filter: none; transform: scaleX(-1); }
.sec--details .o1 { left: 0; top: 0; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-joglo-l); background-image: url(../img/joglo-l.webp); filter: none; opacity: .8; }
.sec--details .o2 { right: 0; top: 0; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-joglo-r); background-image: url(../img/joglo-r.webp); filter: none; opacity: .8; }
.sec--details .o3 { left: 0; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-batik-bl); background-image: url(../img/st-batik-bl.webp); }
.sec--details .o4 { right: 0; bottom: 0; width: 46vw; max-width: 190px; aspect-ratio: var(--ar-batik-br); background-image: url(../img/st-batik-br.webp); }
.sec--wishes .o1 { left: 0; bottom: 0; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-batik-wl); background-image: url(../img/st-batik-wl.webp); }
.sec--wishes .o2 { right: 0; bottom: 0; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-batik-wr); background-image: url(../img/st-batik-wr.webp); }

html:lang(en) .ttl__kicker b:first-child { font-size: 2.3rem; }
html:lang(en) .ttl__name span { font-size: 1.25rem; }

@media (min-width: 1024px) { .phw--side { --pw: min(26vw, 340px); } }