/* O05 · Warm Family Gathering: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dancing-script-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: "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-lanterns: 220 / 211; --sx-lanterns: 15.0; --sy-lanterns: 40.0; --sw-lanterns: 125.0; --ar-house: 280 / 234; --sx-house: 956.5; --sy-house: 242.5; --sw-house: 144.75; --ar-lantern: 140 / 241; --sx-lantern: 1042.75; --sy-lantern: 667.25; --sw-lantern: 61.75; --ar-ivy-l: 150 / 290; --sx-ivy-l: 0.0; --sy-ivy-l: 611.75; --sw-ivy-l: 87.0; --ar-house-big: 460 / 242; --ar-vase: 240 / 385; }
.phw { --cx0: 110; --cy0: 50; --cw: 550; --ch: 420; }

/* O05 · Warm Family Gathering: beige, caramel and brown, the family photo in soft light, a brown script title with a swash,
   the family name on a caramel ribbon, warm cards; lanterns, the painted house, the vase of flowers and ivy from the mockup. */
:root {
  --bg: #faf3e8; --bg2: #f1e3cc; --ink: #3b2a1d; --muted: #715e4c; --accent: #8a5a34; --accent2: #c0813f;
  --line: rgb(138 90 52 / .2);
  --card: #fffaf2; --card-line: #ead9bf; --card-shadow: 0 10px 24px rgb(110 70 30 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #9a6a40, #74492a); --btn-ink: #fff6e9; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(110 70 30 / .3);
  --f-display: "Dancing Script", cursive; --f-body: "Lora", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-font: "Lora", Georgia, serif; --name-size: 1.25rem; --name-weight: 600; --name-style: italic; --name-color: #6b4426;
  --head-size: 1.35rem; --head-weight: 600; --head-style: italic; --head-color: #6b4426; --head-ink: #6b4426;
  --photo-radius: 24px; --photo-border: 0; --photo-shadow: 0 16px 34px rgb(110 70 30 / .22);
  --gate-bg: radial-gradient(110% 60% at 50% 0, #fffaf1, #faf3e8 55%, #f3e6d1);
  --guest-bg: #fffaf2; --guest-line: #ead9bf;
  --cd-title: #6b4426; --cd-num: #6b4426; --cd-label: #8a6a4c;
  --cd-tile: #f3e3cc; --cd-tile-border: 1px solid #e6d0ad; --cd-tile-radius: 10px; --cd-tile-shadow: none;
  --dt-ic: #9a6a40; --dt-ic-bg: transparent; --dt-label: #6b4426; --av-bg: #f1e3cc; --av-ink: #8a5a34;
  --field-line: #e6d6bb;
}
body { background: #f6ecdc; }
.inv { background: linear-gradient(180deg, #fbf5ea, #f8efe1 50%, #f5e9d6); }

/* The family photo with a soft cream edge */
.phw .photo { border: 4px solid #fffaf2; }
.phw--cover { --pw: min(80vw, 320px); margin: 10px auto 18px; }
.phw--hero { --pw: min(86vw, 340px); margin: 8px auto 20px; }

/* Title: small capitals, the brown script with sprigs and a swash, the ribbon, the hosts */
.ttl__pre span { font: 600 .66rem/1.7 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #6b4426; max-width: 290px; }
.ttl__kicker { position: relative; padding-bottom: 14px; }
.ttl__kicker b { display: block; font: 700 2.6rem/1 var(--f-display); color: #7a4a26; }
.ttl__kicker b:last-child { font-size: 3.3rem; line-height: 1.02; }
.ttl__kicker b:first-child { position: relative; display: inline-block; padding: 0 40px; }
.ttl__kicker b:first-child::before, .ttl__kicker b:first-child::after { content: ""; position: absolute; top: 8px; width: 34px; height: 20px; background: url(../img/o05-sprig.svg) center / contain no-repeat; }
.ttl__kicker b:first-child::before { left: 0; transform: rotate(-50deg) scaleX(-1); } .ttl__kicker b:first-child::after { right: 0; transform: rotate(50deg); }
.ttl__kicker::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 170px; height: 18px; margin-left: -60px; background: url(../img/o05-swash.svg) center / contain no-repeat; }
.ttl__family { position: relative; z-index: 2; margin: 14px 0 -24px; }
.ttl__family span { font: italic 400 .9rem/1.2 var(--f-body); color: #6b4426; }
.ttl__name { margin: 0; }
.ttl .ttl__name span { padding: 22px 52px 16px; background: url(../img/o05-ribbon.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 8px rgb(110 70 30 / .2)); font-size: clamp(1.05rem, 5vw, 1.3rem); }
.ttl__sub span { font: 400 .92rem/1.45 var(--f-body); color: #5b4532; background: none; padding: 0; max-width: 280px; }
.gate__date, .side__date { color: #6b4426; font-weight: 600; margin-top: 14px; }

/* "Yuk, Silaturahmi di Rumah Kami!" */
.sec--greeting { padding-top: 26px; padding-bottom: 20px; }
.sec--greeting .h-sec { margin-bottom: 10px; }
.sec--greeting .h-sec__t { font: 700 1.85rem/1.15 var(--f-display); color: #7a4a26; text-wrap: balance; background: none; box-shadow: none; padding: 0 22px; max-width: 290px; }
.sec--greeting .h-sec__t::before, .sec--greeting .h-sec__t::after { width: 14px; height: 26px; background: repeating-linear-gradient(90deg, #b58447 0 2px, transparent 2px 6px); transform: skewX(-18deg); margin-top: -13px; }
.sec--greeting .h-sec__t::before { right: 100%; margin-right: 0; } .sec--greeting .h-sec__t::after { left: 100%; margin-left: 0; transform: skewX(18deg); }
.sec--greeting .lead { color: #4e3a29; }
.sec--greeting .sec__in::after { content: ""; display: block; width: 180px; height: 24px; margin: 12px auto 0; background: url(../img/o05-heart.svg) center / contain no-repeat; }

/* Countdown: a cream card */
.sec--countdown { padding-top: 16px; }
.cd-box { background: #fffaf2; border: 1px solid #ead9bf; border-radius: 18px; padding: 14px 14px 16px; box-shadow: var(--card-shadow); }
.cd__t { font: italic 600 1.08rem/1.3 var(--f-body); }
.cd__ic { color: #8a5a34; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #6b4426; }

/* Headings on a caramel ribbon with sprigs */
.h-sec__t { position: relative; padding: 6px 34px 7px; background: linear-gradient(180deg, #f3dfbd, #e7cc9f); border-radius: 6px; box-shadow: 0 4px 10px rgb(110 70 30 / .15); }
.h-sec__t::before, .h-sec__t::after { content: ""; position: absolute; top: 50%; width: 26px; height: 16px; margin-top: -8px; background: url(../img/o05-sprig.svg) center / contain no-repeat; }
.h-sec__t::before { right: 100%; margin-right: 6px; transform: scaleX(-1); } .h-sec__t::after { left: 100%; margin-left: 6px; }
.h-sec__ic { color: #8a5a34; }
.sec--wishes .h-sec__t, .sec--gallery .h-sec__t { background: none; box-shadow: none; padding: 0; }
.sec--wishes .h-sec__t { font: 700 2rem/1.1 var(--f-display); font-style: normal; }
.sec--wishes .h-sec__t::before, .sec--wishes .h-sec__t::after { display: none; }

/* Details */
.dt { border-color: #efe1c9; }
.agenda__i .ic { color: #8a5a34; }
.btn--map { --map-ink: #6b4426; --map-line: #e6d0ad; }
.link, .link--map, .link--cal { color: #6b4426; }

/* Gallery, wishes */
.gallery__item { border: 3px solid #fffaf2; box-shadow: 0 10px 20px rgb(110 70 30 / .16); }
.wish { border-color: #efe1c9; }
.wish__av { color: #8a5a34; }

/* Closing with the painted house */
.sec--closing { padding-bottom: 210px; }
.closing__t span { font: 700 2.4rem/1.1 var(--f-display); color: #7a4a26; text-transform: none; }
.sec--closing .orn--div svg { color: #b58447; }

/* ---------- Lanterns, the house, the vase and ivy from the mockup ---------- */
.o { filter: drop-shadow(0 8px 10px rgb(110 70 30 / .2)); }
.gate__in .o1, .side__in .o1 { left: -6px; top: -26px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-lanterns); background-image: url(../img/st-lanterns.webp); }
.gate__in .o2, .side__in .o2 { right: -22px; top: 196px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-house); background-image: url(../img/st-house.webp); }
.gate__in .o3, .side__in .o3 { left: -14px; top: 150px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-vase); background-image: url(../img/vase.webp); filter: none; }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -2px; top: -6px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-lanterns); background-image: url(../img/st-lanterns.webp); }
.sec--hero .o2 { right: -22px; top: 226px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-house); background-image: url(../img/st-house.webp); }
.sec--hero .o3 { left: -12px; top: 170px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-vase); background-image: url(../img/vase.webp); filter: none; }
.sec--details .o1 { right: 2px; top: 6px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.sec--details .o2 { left: -6px; top: 0; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-ivy-l); background-image: url(../img/st-ivy-l.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 70vw; max-width: 290px; aspect-ratio: var(--ar-house-big); background-image: url(../img/house-big.webp); filter: none; }

html:lang(en) .ttl__kicker b:first-child { font-size: 2.4rem; }

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