/* A09 · Watercolor Flower Garden: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Satisfy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satisfy-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: 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: 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-flowers-bl: 340 / 628; --sx-flowers-bl: 0.0; --sy-flowers-bl: 1068.5; --sw-flowers-bl: 180.5; --ar-flowers-br: 340 / 480; --sx-flowers-br: 865.0; --sy-flowers-br: 1039.5; --sw-flowers-br: 257.0; --ar-arch: 300 / 368; --sx-arch: 858.0; --sy-arch: 209.0; --sw-arch: 264.0; --ar-leaves-tr: 220 / 176; --sx-leaves-tr: 959.75; --sy-leaves-tr: 57.25; --sw-leaves-tr: 162.25; --ar-peony: 300 / 274; --sx-peony: 0.0; --sy-peony: 341.25; --sw-peony: 245.0; --ar-leaves-l: 130 / 318; --sx-leaves-l: 0.0; --sy-leaves-l: 780.0; --sw-leaves-l: 92.0; }
.phw { --cx0: 0; --cy0: 55; --cw: 520; --ch: 410; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-peony.webp); left: calc((var(--sx-peony) - var(--cx0)) * var(--k)); top: calc((var(--sy-peony) - var(--cy0)) * var(--k)); width: calc(var(--sw-peony) * var(--k)); aspect-ratio: var(--ar-peony); }

/* A09 · Watercolor Flower Garden: soft pink watercolour, peonies and lavender, plum serif with wide spacing, mauve script; the family photo, flowers and garden arch come from the mockup. */
:root {
  --bg: #fbeff3; --bg2: #f5e1ea; --ink: #4a2a4a; --muted: #6e5068; --accent: #9b5a8e; --accent2: #e6d3ef;
  --line: rgb(155 90 142 / .22);
  --card: rgb(255 251 252 / .85); --card-line: #efd9e5; --card-shadow: 0 10px 26px rgb(150 90 130 / .1); --radius: 20px;
  --btn-bg: linear-gradient(180deg, #b47aa6, #8e5383); --btn-ink: #fff; --btn-border: 2px solid rgb(255 255 255 / .6); --btn-shadow: 0 8px 20px rgb(142 83 131 / .3);
  --f-display: "Lora", Georgia, serif; --f-script: "Satisfy", cursive; --f-body: "Lora", "Amiri", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-font: var(--f-script); --name-size: 3.6rem; --name-weight: 400; --name-color: #b3609a;
  --head-size: 1.45rem; --head-weight: 600; --head-color: #5a2d5a; --head-ink: #5a2d5a;
  --kicker-color: #6a3a6e; --bism-color: #5a2d5a;
  --photo-radius: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 15% 20%, #f7dbe6 0, rgb(247 219 230 / 0) 45%), radial-gradient(ellipse at 85% 75%, #efdff3 0, rgb(239 223 243 / 0) 45%), #fdf3f6;
  --guest-bg: rgb(255 251 252 / .9); --guest-line: #efd9e5;
  --cd-title: #5a2d5a; --cd-num: #6a2f62; --cd-label: #6e5068;
  --cd-tile: linear-gradient(180deg, #f5e6f3, #ecd7ea); --cd-tile-border: 1px solid #fff; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 10px rgb(150 90 130 / .12);
  --dt-ic: #9b5a8e; --dt-ic-bg: transparent; --dt-label: #5a2d5a; --av-bg: #f1e2ec; --av-ink: #9b5a8e;
}
body { background: radial-gradient(ellipse at 0 15%, #f8dde7 0, rgb(248 221 231 / 0) 30%), radial-gradient(ellipse at 100% 45%, #efe0f3 0, rgb(239 224 243 / 0) 30%), radial-gradient(ellipse at 10% 85%, #f6e0ea 0, rgb(246 224 234 / 0) 30%), #fdf3f6; }
.inv { background: transparent; }

/* The family photo melts into the watercolour; the peonies spill over its corner */
.phw .photo { background: none; box-shadow: none; -webkit-mask: radial-gradient(ellipse 75% 72% at 52% 45%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 75% 72% at 52% 45%, #000 60%, transparent 100%); }
.phw--cover { --pw: min(80vw, 316px); margin: 6px auto calc(92 * var(--k)); }
.phw--hero { --pw: min(92vw, 370px); margin: 0 auto calc(96 * var(--k)); }
.phw--side { margin-bottom: calc(96 * var(--k)); }
.phw .p1 { opacity: .95; }

/* Title */
.ttl__kicker { font: 600 1.55rem/1.2 var(--f-display); letter-spacing: .16em; }
.ttl__bism { font-size: 1.45rem; }
.ttl__bism::before, .ttl__bism::after { content: ""; display: inline-block; width: 46px; height: 8px; vertical-align: middle; margin: 0 8px; border-top: 1.5px solid #c49ab8; border-radius: 50%; }
.ttl .lead { color: #4a2a4a; max-width: 340px; }
.ttl__name { margin: 2px 0 0; }
.ttl__name span { background: linear-gradient(180deg, #c672a8, #9b4f86); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em; }
.ttl__sub span { position: relative; color: #5a2d5a; background: linear-gradient(90deg, rgb(214 196 236 / 0), #d9c8ee 14%, #d4c1ec 86%, rgb(214 196 236 / 0)); padding: 5px 34px 6px; border-radius: 3px; font: 500 .95rem/1.2 var(--f-body); }
.par { margin-top: 12px; padding: 0 44px; position: relative; }
.par::before, .par::after { content: ""; position: absolute; top: 50%; width: 38px; height: 30px; margin-top: -15px; background: url(../img/a09-sprig.svg) center / contain no-repeat; }
.par::before { left: 0; transform: scaleX(-1) rotate(-20deg); } .par::after { right: 0; transform: rotate(-20deg); }
.par--ttl .par__l { display: none; }
.par__n { font: 600 1.12rem/1.35 var(--f-display); color: #4a2a4a; }
.par__amp { display: block; font-size: .9em; }
.gate__date, .side__date { color: #5a2d5a; font-style: italic; }

/* Headings: plum serif between sprigs */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 14px; flex: none; background: url(../img/a09-sprig.svg) center / contain no-repeat; }
.h-sec__t::before { transform: scaleX(-1); }
.sec--details .h-sec__t { background: linear-gradient(180deg, #f3e0ec, #ead2e3); padding: 6px 22px; border-radius: 999px; }
.h-sec__sub, .lead { color: #5e4058; }

/* Countdown */
.cd-box { background: rgb(255 251 252 / .7); border: 1px solid #efd9e5; border-radius: 24px; padding: 14px 12px 18px; box-shadow: var(--card-shadow); }
.cd__ic { color: #8e5383; }
.cd__n { font-weight: 600; }

/* Details */
.dts { gap: 0; background: var(--card); border: 1px solid #efd9e5; border-radius: 22px; 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(155 90 142 / .16); }
.dt__ic .ic { width: 28px; height: 28px; }
.btn--map { --map-ink: #8e5383; --map-line: #e8cde0; --map-bg: #fff; }
.link, .link--map, .link--cal { color: #8e5383; }
.gallery__item { border: 4px solid #fff; border-radius: 16px; box-shadow: 0 10px 22px rgb(150 90 130 / .16); }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.btn--send { padding: 12px 14px; }

/* Closing: script "Terima Kasih" with a heart, flowers at both corners */
.sec--closing { padding-bottom: 240px; }
.closing__t span { font: 400 2.6rem/1.2 var(--f-script); color: #9b4f86; }
.sec--closing .orn--div svg { color: #c27aa9; }
.closing__p { color: #4a2a4a; }

/* ---------- Flowers and the garden arch from the mockup ---------- */
.o { filter: drop-shadow(0 4px 6px rgb(150 90 130 / .1)); }
.gate__in .o1, .side__in .o1 { right: -22px; top: 210px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-arch); background-image: url(../img/st-arch.webp); opacity: .95; }
.gate__in .o2, .side__in .o2 { right: -16px; top: -10px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-leaves-tr); background-image: url(../img/st-leaves-tr.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -18px; top: -6px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-leaves-tr); background-image: url(../img/st-leaves-tr.webp); }
.sec--countdown .o1 { right: -26px; top: 10px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-arch); background-image: url(../img/st-arch.webp); opacity: .9; }
.sec--gallery .o1 { left: -10px; top: 0; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-leaves-l); background-image: url(../img/st-leaves-l.webp); }
.sec--closing .o1 { left: -10px; bottom: 0; width: 38vw; max-width: 150px; aspect-ratio: var(--ar-flowers-bl); background-image: url(../img/st-flowers-bl.webp); }
.sec--closing .o2 { right: -10px; bottom: 0; width: 38vw; max-width: 150px; aspect-ratio: var(--ar-flowers-br); background-image: url(../img/st-flowers-br.webp); }

@media (min-width: 1024px) { .phw--side { --pw: min(30vw, 380px); } .side__in .o1 { right: 4%; } }