/* O02 · Ketupat Celebration: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lobster-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: "Courgette"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/courgette-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: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-ketupat-l: 200 / 403; --sx-ketupat-l: 63.25; --sy-ketupat-l: 150.25; --sw-ketupat-l: 108.0; --ar-lantern-l: 200 / 303; --sx-lantern-l: 63.5; --sy-lantern-l: 517.75; --sw-lantern-l: 97.25; --ar-lantern-r: 200 / 267; --sx-lantern-r: 961.75; --sy-lantern-r: 517.0; --sw-lantern-r: 101.5; --ar-lantern-w: 360 / 339; --sx-lantern-w: 10.0; --sy-lantern-w: 1057.75; --sw-lantern-w: 220.25; --ar-ketupat-br: 230 / 402; --sx-ketupat-br: 985.0; --sy-ketupat-br: 1224.0; --sw-ketupat-br: 101.75; --ar-skyline: 460 / 138; --ar-mosque-soft: 300 / 343; }
.phw { --cx0: 556; --cy0: 58; --cw: 566; --ch: 350; }

/* O02 · Ketupat Celebration: fresh green and sunny yellow, the illustrated family scene, a cream title plaque between ketupat,
   a "Selamat Idulfitri" badge under golden domes, a green countdown pill with yellow tiles; ketupat, lanterns, the green-domed mosque and the mosque skyline from the mockup. */
:root {
  --bg: #f7f9ec; --bg2: #eaf2d6; --ink: #1f3d1c; --muted: #4f6a45; --accent: #2f7d32; --accent2: #f5c842;
  --line: rgb(47 125 50 / .2);
  --card: #ffffff; --card-line: #e1ebc8; --card-shadow: 0 10px 24px rgb(47 90 30 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #ffe27a, #f5c330); --btn-ink: #1f4d1c; --btn-line: #e6b422; --btn-shadow: 0 8px 18px rgb(230 170 20 / .35);
  --f-display: "Lobster", "Courgette", cursive; --f-script: "Courgette", cursive; --f-body: "Nunito", system-ui, sans-serif; --f-head: "Nunito", system-ui, sans-serif; --f-num: "Nunito", system-ui, sans-serif;
  --name-font: "Nunito", system-ui, sans-serif; --name-size: 1.05rem; --name-weight: 800; --name-color: #1f4d1c;
  --head-size: 1.45rem; --head-weight: 800; --head-color: #2a6b2c; --head-ink: #2a6b2c;
  --photo-radius: 22px; --photo-border: 4px solid #fff; --photo-shadow: 0 14px 30px rgb(47 90 30 / .22);
  --gate-bg: url(../img/o02-diamonds.svg), radial-gradient(120% 60% at 50% 0, #e8f4ff, #f7f9ec 60%);
  --guest-bg: #fff; --guest-line: #dbe8bd;
  --cd-title: #fff; --cd-num: #2a6b2c; --cd-label: #5d7a36;
  --cd-tile: linear-gradient(180deg, #fff6c9, #ffe58a); --cd-tile-border: 1.5px solid #f2cf55; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 8px rgb(0 0 0 / .12);
  --dt-ic: #2a6b2c; --dt-ic-bg: #ffe27a; --dt-label: #2f5d2c; --av-bg: #e2efcc; --av-ink: #2a6b2c;
  --field-line: #d6e5b6;
}
body { background: url(../img/o02-diamonds.svg), #f7f9ec; }
.inv { background: transparent; }

/* The illustrated scene on top, then the cream plaque */
.phw--cover { --pw: min(88vw, 360px); margin: 2px auto 0; }
.phw--hero { --pw: min(90vw, 380px); margin: 0 auto; }
.ttl { position: relative; z-index: 2; gap: 2px; margin: 18px 4px 0; padding: 22px 16px 20px; background: #fffbea; border: 2px solid #e9d78a; border-radius: 28px;
  box-shadow: 0 0 0 5px #fffbea, 0 0 0 7px #cfe3a4, 0 16px 30px rgb(47 90 30 / .16); }
.ttl > .phw { margin: -22px -16px 18px; width: calc(100% + 32px); max-width: none; --pw: 100%; }
.ttl > .phw .photo { border-radius: 26px 26px 18px 18px; border: 0; box-shadow: 0 10px 20px rgb(47 90 30 / .18); }
.ttl__taq span { font: 400 1.02rem/1.3 var(--f-script); color: #2a6b2c; }
.ttl__badge { position: relative; margin-top: 18px; }
.ttl__badge::before { content: ""; position: absolute; left: 50%; top: -17px; width: 74px; height: 22px; margin-left: -37px; background: url(../img/o02-mosque.svg) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 #c9a227) drop-shadow(0 0 1px #c9a227); }
.ttl__badge span { font: 400 1.05rem/1.3 var(--f-script); color: #fffbe6; background: linear-gradient(180deg, #3f9a3f, #2a6b2c); padding: 5px 20px; border-radius: 999px; border: 2px solid #f2cf55; box-shadow: 0 4px 10px rgb(42 107 44 / .3); }
.ttl__year span { font: 700 .82rem/1.2 var(--f-body); color: #2a6b2c; letter-spacing: .06em; }
.ttl__kicker { margin-top: 2px; }
.ttl__kicker b { display: block; font: 400 2.5rem/1 var(--f-display); color: #2f7d32;
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 3px 0 #fff, 0 6px 8px rgb(30 70 20 / .25); }
.ttl__kicker b:last-child { font-size: 3rem; color: #1f6b26; }
.ttl .lead { color: #2f4d2a; font-size: .92rem; max-width: 300px; }
.ttl__family { margin-top: 14px; position: relative; z-index: 1; margin-bottom: -6px; }
.ttl__family span { font: 600 .82rem/1.2 var(--f-body); color: #4f6a45; background: #fffbea; padding: 0 10px; }
.ttl__name span { position: relative; padding: 12px 22px 10px 44px; background: #fff; border: 2px solid #e9d78a; border-radius: 18px; box-shadow: 0 6px 14px rgb(47 90 30 / .12); line-height: 1.3; }
.ttl__name span::before { content: "✿"; position: absolute; left: 14px; top: 50%; transform: translateY(-52%); font: 400 1.3rem/1 var(--f-body); color: #f2b705; }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 5px 16px; border-radius: 999px; background: #2f7d32; color: #fffbe6; font-weight: 700; }
.guest { box-shadow: var(--card-shadow); }

/* Headings in bold green between flower lines */
.h-sec__t { gap: 10px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 22px; height: 2px; background: #9cc46a; border-radius: 2px; }
.h-sec__ic { color: #2a6b2c; }
.sec--details .h-sec::before { content: ""; display: block; width: 44px; height: 22px; margin: 0 auto 4px; background: url(../img/o02-mosque.svg) center / contain no-repeat; filter: brightness(.45) sepia(1) hue-rotate(60deg) saturate(3); }

/* Countdown: a green pill with yellow tiles */
.sec--countdown { padding-top: 34px; }
.cd-box { background: linear-gradient(180deg, #3a8a3a, #22662a); border: 3px solid #fffbea; border-radius: 30px; padding: 14px 12px 18px; box-shadow: 0 0 0 2px #cfe3a4, 0 14px 26px rgb(34 102 42 / .3); }
.cd__t { font: 400 1.12rem/1.3 var(--f-script); }
.cd__ic { color: #ffe27a; }
.cd { gap: 14px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -11px; top: 50%; transform: translateY(-60%); font: 800 1.4rem var(--f-num); color: #ffe27a; }
.cd__n { font-weight: 800; }
.cd__l { font-weight: 700; }
.sec--countdown .link--cal { color: #2a6b2c; }

/* Details: white cards with yellow icon circles */
.dt { border-color: #e7efd2; }
.dt__ic { border-radius: 50%; }
.dt__l { font-weight: 800; }
.btn--cta { font-weight: 800; }
.btn--map { --map-ink: #2a6b2c; --map-line: #cfe3a4; }
.link, .link--map, .link--cal { color: #2a6b2c; }

/* Gallery and wishes */
.sec--gallery { background: linear-gradient(180deg, #eef6dc, #f7f9ec); }
.gallery__item { border: 3px solid #fff; box-shadow: 0 8px 18px rgb(47 90 30 / .15); }
.wish { border-color: #e7efd2; }
.wish__av { color: #2a6b2c; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.btn--send { font-weight: 800; }

/* Closing: the green band with the mosque skyline */
.sec--closing { background: linear-gradient(180deg, #3a8a3a, #1f5c25); color: #fffbe6; border-radius: 50% 50% 0 0 / 40px 40px 0 0; padding: 60px 22px 120px; margin-top: 10px; }
.closing__t span { font: 400 2rem/1.15 var(--f-script); color: #fffbe6; text-shadow: 0 2px 4px rgb(0 0 0 / .25); }
.closing__p { color: #f0f6dc; font-weight: 700; }
.closing__sign, .made { color: #e8f1d0; }
.sec--closing .orn--div svg { color: #ffe27a; }

/* ---------- Ketupat, lanterns, the mosque and the skyline from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(40 70 20 / .22)); }
.gate__in .o1, .side__in .o1 { left: -14px; top: 300px; width: 19vw; max-width: 76px; aspect-ratio: var(--ar-ketupat-l); background-image: url(../img/st-ketupat-l.webp); }
.gate__in .o2, .side__in .o2 { right: -14px; top: 300px; width: 19vw; max-width: 76px; aspect-ratio: var(--ar-ketupat-l); background-image: url(../img/st-ketupat-l.webp); transform: scaleX(-1); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -12px; top: 300px; width: 19vw; max-width: 76px; aspect-ratio: var(--ar-ketupat-l); background-image: url(../img/st-ketupat-l.webp); }
.sec--hero .o2 { right: -12px; top: 300px; width: 19vw; max-width: 76px; aspect-ratio: var(--ar-ketupat-l); background-image: url(../img/st-ketupat-l.webp); transform: scaleX(-1); }
.sec--details .o1 { left: 2px; top: 0; width: 16vw; max-width: 64px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
.sec--details .o2 { right: 2px; top: 0; width: 16vw; max-width: 64px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--wishes { padding-bottom: 150px; }
.sec--wishes .o1 { left: -10px; bottom: 0; width: 42vw; max-width: 170px; aspect-ratio: var(--ar-lantern-w); background-image: url(../img/st-lantern-w.webp); }
.sec--wishes .o2 { right: 0; bottom: 0; width: 38vw; max-width: 150px; aspect-ratio: var(--ar-mosque-soft); background-image: url(../img/mosque-soft.webp); filter: none; }
.sec--closing .deco { z-index: 1; }
.sec--closing .o1 { left: 0; bottom: 0; width: 56vw; max-width: 230px; aspect-ratio: var(--ar-skyline); background-image: url(../img/skyline.webp); filter: none; }
.sec--closing .o2 { right: 0; bottom: 0; width: 56vw; max-width: 230px; aspect-ratio: var(--ar-skyline); background-image: url(../img/skyline.webp); filter: none; transform: scaleX(-1); }
.sec--closing .o3 { right: 4px; bottom: 26px; width: 15vw; max-width: 62px; aspect-ratio: var(--ar-ketupat-br); background-image: url(../img/st-ketupat-br.webp); z-index: 3; }

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

@media (min-width: 1024px) { .phw--side { --pw: min(30vw, 400px); } #side .ttl { max-width: 430px; margin-inline: auto; } }