/* G05 · Pastel Floral Graduation: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/great-vibes-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: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-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: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-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: 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-flowers-l: 260 / 457; --sx-flowers-l: 0.0; --sy-flowers-l: 255.0; --sw-flowers-l: 165.0; --ar-flowers-tr: 220 / 158; --sx-flowers-tr: 955.0; --sy-flowers-tr: 50.0; --sw-flowers-tr: 167.0; --ar-sprig-r: 160 / 102; --sx-sprig-r: 1000.0; --sy-sprig-r: 392.5; --sw-sprig-r: 122.0; --ar-flowers-bl: 380 / 231; --sx-flowers-bl: 0.0; --sy-flowers-bl: 1219.75; --sw-flowers-bl: 299.25; --ar-flowers-br: 240 / 283; --sx-flowers-br: 997.5; --sy-flowers-br: 1255.0; --sw-flowers-br: 124.5; }
.phw { --cx0: 30; --cy0: 45; --cw: 505; --ch: 425; }

/* G05 · Pastel Floral Graduation: soft pink and lilac watercolour, the graduate among flowers, a mauve laurel and cap,
   "Tasyakuran Kelulusan" in script, a pink ribbon; hydrangea, lilies and sprigs from the mockup. */
:root {
  --bg: #fbf0f3; --bg2: #f4e3ea; --ink: #4a2d3d; --muted: #7a5a6b; --accent: #a35d7f; --accent2: #c79bb3;
  --line: rgb(163 93 127 / .22);
  --card: rgb(255 255 255 / .78); --card-line: #f0dbe4; --card-shadow: 0 10px 24px rgb(163 93 127 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #b26b8d, #93506f); --btn-ink: #fff; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(147 80 111 / .3);
  --f-display: "Great Vibes", cursive; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-font: "Playfair Display", Georgia, serif; --name-size: clamp(1.35rem, 6vw, 1.7rem); --name-weight: 600; --name-color: #6e3a55;
  --head-size: 1.45rem; --head-weight: 400; --head-style: italic; --head-color: #8a4a6a; --head-ink: #8a4a6a;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --wash: radial-gradient(60% 30% at 10% 8%, rgb(232 182 205 / .55), transparent 70%), radial-gradient(50% 25% at 95% 30%, rgb(214 190 235 / .5), transparent 70%),
    radial-gradient(70% 30% at 30% 80%, rgb(244 205 220 / .5), transparent 70%), #fbf0f3;
  --gate-bg: var(--wash); --guest-bg: rgb(255 255 255 / .8); --guest-line: #efd5e0;
  --cd-title: #8a4a6a; --cd-num: #6e3a55; --cd-label: #8a6a7b;
  --cd-tile: rgb(255 255 255 / .7); --cd-tile-border: 1px solid #f0dbe4; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 10px rgb(163 93 127 / .08);
  --dt-ic: #a35d7f; --dt-ic-bg: transparent; --dt-label: #6e3a55; --av-bg: #f3d9e4; --av-ink: #a35d7f;
  --field-line: #efd5e0; --map-ink: #8a4a6a; --map-line: #efd5e0;
  --gal-border: 3px solid #fff; --gal-radius: 14px; --gal-shadow: 0 8px 18px rgb(163 93 127 / .15);
}
body { background: #f8e9ef; }
.inv { background: var(--wash); }

/* The graduate among flowers, edges melting into the wash */
.phw .photo { background: none; -webkit-mask: radial-gradient(75% 70% at 50% 42%, #000 62%, transparent); mask: radial-gradient(75% 70% at 50% 42%, #000 62%, transparent); }
.phw--cover { --pw: min(88vw, 360px); margin: -18px auto 4px; }
.phw--hero { --pw: min(92vw, 380px); margin: -22px auto 6px; }
.ttl { position: relative; z-index: 2; }

/* Title: small capitals, the mauve laurel and cap, the script, the name, the ribbon */
.ttl__pre span { font: 600 .68rem/1.4 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: #8a4a6a; }
.ttl .orn--cap svg { width: 64px; margin: 4px auto 0; color: #a35d7f; }
.ttl__kicker span { font: 400 3.2rem/1.05 var(--f-display); color: #8a4a6a; padding: 0 .1em; }
.ttl__name { margin: 2px 0 6px; }
.ttl__tag span { padding: 5px 46px 9px; background: url(../img/g05-ribbon.svg) center / 100% 100% no-repeat; font: italic 600 .98rem/1.2 var(--f-head); color: #fff; }
.ttl .lead { color: #5e4252; font-size: .93rem; max-width: 310px; margin-top: 12px; }
.ttl .orn--heart svg { width: 150px; margin: 8px auto 0; color: #c79bb3; }
.gate__date, .side__date { color: #8a4a6a; font-weight: 600; margin-top: 14px; }

/* Headings: italic serif between sprigs */
.h-sec__t, .cd__t { gap: 10px; }
.h-sec__t::before, .h-sec__t::after, .cd__t::before, .cd__t::after { content: ""; width: 34px; height: 20px; flex: none; background: url(../img/g05-sprig.svg) center / contain no-repeat; }
.h-sec__t::before, .cd__t::before { transform: scaleX(-1); }
.h-sec__ic { color: #a35d7f; }

/* Countdown */
.sec--countdown { padding-top: 18px; }
.cd__t { font: italic 400 1.15rem/1.3 var(--f-head); }
.cd__ic { color: #a35d7f; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #8a4a6a; }

/* Details on a white translucent card */
.dts { gap: 0; background: rgb(255 255 255 / .75); border: 1px solid #f0dbe4; border-radius: 18px; padding: 4px 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 #f3e1e9; }
.link, .link--map, .link--cal { color: #8a4a6a; }

/* Wishes: user icons in pink circles */
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.wcomp { border-color: #f0dbe4; }

/* Closing with the cap and a script "Terima Kasih"; flowers in the corners */
.sec--closing { padding-bottom: 170px; }
.sec--closing::before { content: ""; display: block; width: 64px; height: 28px; margin: 0 auto 2px; background: url(../img/g05-cap.svg) center / contain no-repeat; }
.closing__t span { font: 400 2.9rem/1.1 var(--f-display); color: #8a4a6a; font-style: normal; }
.sec--closing .orn--div svg { color: #c79bb3; }

/* ---------- Hydrangea, lilies and sprigs from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(163 93 127 / .15)); }
.gate__in > .deco, .side__in > .deco { z-index: 3; }
.gate__in .o1, .side__in .o1 { left: -24px; top: 180px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-l); background-image: url(../img/st-flowers-l.webp); }
.gate__in .o2, .side__in .o2 { right: -16px; top: -26px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-tr); background-image: url(../img/st-flowers-tr.webp); }
.gate__in .o3, .side__in .o3 { right: -12px; top: 300px; width: 20vw; max-width: 80px; aspect-ratio: var(--ar-sprig-r); background-image: url(../img/st-sprig-r.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -22px; top: 210px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-l); background-image: url(../img/st-flowers-l.webp); }
.sec--hero .o2 { right: -16px; top: -8px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-tr); background-image: url(../img/st-flowers-tr.webp); }
.sec--details .o1 { right: -10px; top: 6px; width: 20vw; max-width: 80px; aspect-ratio: var(--ar-sprig-r); background-image: url(../img/st-sprig-r.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 56vw; max-width: 220px; aspect-ratio: var(--ar-flowers-bl); background-image: url(../img/st-flowers-bl.webp); }
.sec--closing .o2 { right: 0; bottom: 0; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-flowers-br); background-image: url(../img/st-flowers-br.webp); }

html:lang(en) .ttl__kicker span { font-size: 2.7rem; }

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