/* O08 · Tropical Garden Party: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/lora-latin-500-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: "Allura"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/allura-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: 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-hibiscus: 140 / 158; --sx-hibiscus: 348.5; --sy-hibiscus: 183.25; --sw-hibiscus: 77.0; --ar-hibiscus-red: 160 / 231; --sx-hibiscus-red: 17.25; --sy-hibiscus-red: 347.5; --sw-hibiscus-red: 78.25; --ar-monstera-br: 420 / 228; --sx-monstera-br: 806.0; --sy-monstera-br: 453.25; --sw-monstera-br: 236.75; --ar-monstera-bl: 300 / 165; --sx-monstera-bl: 0.0; --sy-monstera-bl: 478.25; --sw-monstera-bl: 250.0; --ar-lamp: 120 / 150; --sx-lamp: 149.0; --sy-lamp: 110.0; --sw-lamp: 71.5; --ar-monstera-r: 280 / 255; --sx-monstera-r: 927.0; --sy-monstera-r: 782.5; --sw-monstera-r: 195.0; --ar-monstera-l: 260 / 215; --sx-monstera-l: 0.0; --sy-monstera-l: 815.0; --sw-monstera-l: 174.5; --ar-tropic-bl: 280 / 414; --sx-tropic-bl: 0.0; --sy-tropic-bl: 1101.25; --sw-tropic-bl: 203.5; --ar-tropic-br: 300 / 404; --sx-tropic-br: 897.0; --sy-tropic-br: 1099.0; --sw-tropic-br: 225.0; }
.phw { --cx0: 0; --cy0: 45; --cw: 345; --ch: 475; }

/* O08 · Tropical Garden Party: the string-lit garden at the top, cream paper, deep leaf green, a white script "Open House"
   on a green brush stroke beside a hibiscus, a green countdown with gold edges; monstera, hibiscus and the rattan lamp from the mockup. */
:root {
  --bg: #f6f1e4; --bg2: #ebe4d0; --ink: #23331f; --muted: #57644f; --accent: #2f4f2c; --accent2: #c9a24a;
  --line: rgb(47 79 44 / .2);
  --card: #fbf8ef; --card-line: #e2dcc6; --card-shadow: 0 10px 24px rgb(40 60 30 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #355a32, #24402a); --btn-ink: #f8f3e3; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(36 64 42 / .32);
  --f-display: "Lora", Georgia, serif; --f-script: "Allura", cursive; --f-body: "Lora", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif;
  --name-size: 1.15rem; --name-weight: 600; --name-style: italic; --name-color: #2f4f2c;
  --head-size: 1.65rem; --head-weight: 500; --head-color: #2f4f2c; --head-ink: #2f4f2c;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: #f6f1e4;
  --guest-bg: #fbf8ef; --guest-line: #e2dcc6;
  --cd-title: #f8f3e3; --cd-num: #fff; --cd-label: #dfe7d2; --cd-tile: transparent; --cd-tile-border: 0; --cd-tile-shadow: none;
  --dt-ic: #2f4f2c; --dt-ic-bg: #e3ead6; --dt-label: #2f4f2c; --av-bg: #e3ead6; --av-ink: #2f4f2c;
}
body { background: #efe8d6; }
.inv { background: #f6f1e4; }

/* The garden across the top, fading into the paper */
.phw--cover, .phw--hero { --pw: auto; width: auto; margin: -28px -22px 0; }
.phw--hero { margin-top: -34px; }
.phw .photo { aspect-ratio: 390 / 330; -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent); }
.phw .photo img { object-position: 50% 30%; }
.ttl { position: relative; z-index: 2; margin-top: -52px; gap: 2px; }
.ttl::before { content: ""; position: absolute; inset: -14px -40px 30% -40px; z-index: -1; background: radial-gradient(closest-side, rgb(246 241 228 / .96), rgb(246 241 228 / .75) 72%, transparent); }

/* Title: spaced capitals, the serif "Undangan", the white script on a brush stroke with a hibiscus */
.ttl__pre span { display: inline-flex; align-items: center; gap: 10px; font: 600 .66rem/1.4 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: #2f4f2c; }
.ttl .ttl__pre span::before, .ttl .ttl__pre span::after { content: ""; width: 26px; height: 1px; background: #6b7f5c; }
.ttl__kicker { position: relative; margin-top: 2px; }
.ttl__kicker b:first-child { display: block; font: 500 2.6rem/1.05 var(--f-display); color: #2c4a2a; text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.ttl__kicker b:last-child { position: relative; z-index: 0; display: inline-block; padding: 6px 30px 2px 42px; margin-top: 2px; font: 400 3.4rem/1 var(--f-script); color: #fff; text-shadow: 0 2px 4px rgb(0 0 0 / .25); }
.ttl__kicker b:last-child::before { content: ""; position: absolute; inset: 4px -6px -2px 8px; z-index: -1; background: url(../img/o08-brush.svg) center / 100% 100% no-repeat; }
.ttl__kicker b:last-child::after { content: ""; position: absolute; left: -24px; top: 2px; width: 58px; aspect-ratio: var(--ar-hibiscus); background: url(../img/st-hibiscus.webp) center / contain no-repeat; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.ttl__tag { margin-top: 8px; }
.ttl__tag span { font: italic 400 .92rem/1.4 var(--f-body); color: #2f4f2c; }
.ttl__family { position: relative; z-index: 1; margin: 12px 0 -10px; }
.ttl__family span { font: italic 600 .8rem/1 var(--f-body); color: #2f4f2c; background: #f6f1e4; padding: 0 8px; }
.ttl__name { margin: 0; }
.ttl__name span { position: relative; padding: 10px 40px 8px; background: #fbf8ef; border: 1.5px solid #2f4f2c; border-radius: 12px; box-shadow: inset 0 0 0 3px #fbf8ef, inset 0 0 0 4px rgb(47 79 44 / .35); }
.ttl .ttl__name span::before, .ttl .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 34px; height: 20px; margin-top: -10px; background: url(../img/o08-leaf.svg) center / contain no-repeat; }
.ttl .ttl__name span::before { left: -26px; transform: scaleX(-1); } .ttl .ttl__name span::after { right: -26px; }
.ttl .lead { font-style: italic; color: #3a4a33; font-size: .93rem; max-width: 310px; }
.gate__date, .side__date { color: #2f4f2c; font-weight: 600; margin-top: 16px; }
.guest { box-shadow: var(--card-shadow); }

/* Headings between leaf sprigs */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 36px; height: 20px; flex: none; background: url(../img/o08-leaf.svg) center / contain no-repeat; }
.h-sec__t::before { transform: scaleX(-1); }
.h-sec__ic { color: #2f4f2c; }

/* Countdown: a deep green panel with a gold edge */
.sec--countdown { padding-top: 14px; }
.cd-box { background: linear-gradient(180deg, #355a32, #22402a); border: 2px solid #c9a24a; border-radius: 20px; padding: 14px 10px 16px; box-shadow: inset 0 0 0 3px #2c4d2c, inset 0 0 0 4px rgb(201 162 74 / .4), 0 14px 26px rgb(36 64 42 / .3); }
.cd__t { font: italic 600 1.08rem/1.3 var(--f-body); gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 26px; height: 14px; background: url(../img/o08-leaf.svg) center / contain no-repeat; filter: brightness(2.2) saturate(.6); }
.cd__t::before { transform: scaleX(-1); }
.cd { gap: 0; }
.cd__c + .cd__c { border-left: 1px solid rgb(248 243 227 / .35); }
.cd__n { font-weight: 600; font-size: 2.1rem; }
.sec--countdown .link--cal { color: #2f4f2c; }

/* Details */
.dt__ic { border-radius: 50%; }
.note { background: none; border: 0; font-style: italic; color: #3a4a33; padding: 4px 30px; position: relative; }
.note::before, .note::after { content: ""; position: absolute; top: 50%; width: 30px; height: 18px; margin-top: -9px; background: url(../img/o08-leaf.svg) center / contain no-repeat; }
.note::before { left: -4px; transform: scaleX(-1); } .note::after { right: -4px; }
.btn--map { --map-ink: #2f4f2c; --map-line: #cfd8bf; }
.link, .link--map, .link--cal { color: #2f4f2c; }

/* Gallery on a leaf-green band */
.sec--gallery { background: linear-gradient(180deg, #557f49, #3f6b3a); }
.sec--gallery .h-sec__t { color: #fbf8ef; }
.sec--gallery .h-sec__t::before, .sec--gallery .h-sec__t::after { filter: brightness(2.6) saturate(.4); }
.sec--gallery .hint { color: #e3ead6; }
.gallery__item { border: 2px solid #fbf8ef; }
.wish { border-color: #e6e0cb; }

/* Closing in deep green */
.sec--closing { background: linear-gradient(180deg, #355a32, #22402a); color: #f8f3e3; padding-bottom: 170px; }
.closing__t span { font: 400 3rem/1.1 var(--f-script); color: #fff; }
.sec--closing .orn--div svg { color: #c9a24a; }
.closing__p, .closing__sign, .made { color: #eef1e2; }

/* ---------- Monstera, hibiscus and the rattan lamp from the mockup ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(20 40 15 / .25)); }
.gate__in .o1, .side__in .o1 { left: -16px; top: 250px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-hibiscus-red); background-image: url(../img/st-hibiscus-red.webp); }
.gate__in .o2, .side__in .o2 { right: -40px; top: 210px; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-monstera-br); background-image: url(../img/st-monstera-br.webp); }
.gate__in .o3, .side__in .o3 { left: -34px; top: 226px; width: 42vw; max-width: 168px; aspect-ratio: var(--ar-monstera-bl); background-image: url(../img/st-monstera-bl.webp); z-index: -1; }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.sec--hero .o1 { left: -16px; top: 260px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-hibiscus-red); background-image: url(../img/st-hibiscus-red.webp); }
.sec--hero .o2 { right: -40px; top: 220px; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-monstera-br); background-image: url(../img/st-monstera-br.webp); }
.sec--hero .o3 { left: -34px; top: 236px; width: 42vw; max-width: 168px; aspect-ratio: var(--ar-monstera-bl); background-image: url(../img/st-monstera-bl.webp); z-index: -1; }
.sec--details .o1 { right: -20px; bottom: 0; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-monstera-r); background-image: url(../img/st-monstera-r.webp); }
.sec--details .o2 { left: -20px; top: 20px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-monstera-l); background-image: url(../img/st-monstera-l.webp); }
.sec--wishes { padding-bottom: 150px; }
.sec--wishes .o1 { left: -14px; bottom: 0; width: 36vw; max-width: 150px; aspect-ratio: var(--ar-tropic-bl); background-image: url(../img/st-tropic-bl.webp); }
.sec--wishes .o2 { right: -14px; bottom: 0; width: 36vw; max-width: 150px; aspect-ratio: var(--ar-tropic-br); background-image: url(../img/st-tropic-br.webp); }
.sec--closing .o1 { left: 50%; bottom: 20px; width: 16vw; max-width: 64px; margin-left: max(-8vw, -32px); aspect-ratio: var(--ar-lamp); background-image: url(../img/st-lamp.webp); }

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

@media (min-width: 1024px) { .phw--side { --pw: auto; width: auto; margin: -36px -32px 0; } .side__in .ttl { margin-top: -56px; } .side__in .o2 { display: none; } }