/* B09 · Sweet Seventeen Glam: 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: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pinyon-script-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: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-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: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-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; }

/* sticker proportions (img/st-*.webp) */
:root { --ar-balloons: 300 / 473; --ar-roses: 300 / 270; --ar-disco: 220 / 167; --ar-cake: 300 / 287; --ar-bow: 340 / 271; --ar-gifts: 300 / 258; --ar-roses-r: 340 / 375; }

/* B09 · Sweet Seventeen Glam: warm rose-gold bokeh, glitter script, champagne pages and deep rose buttons; balloons, cake, roses and gifts from the mockup. */
:root {
  --bg: #f8ebe6; --bg2: #f1dcd5; --ink: #5e3530; --muted: #85605a; --accent: #b9776a; --accent2: #e8c3a8;
  --line: rgb(150 90 80 / .22);
  --card: rgb(255 250 247 / .85); --card-line: rgb(205 160 145 / .55); --card-shadow: 0 10px 26px rgb(120 60 50 / .1); --radius: 18px;
  --btn-bg: linear-gradient(180deg, #a85563, #7d3442); --btn-ink: #fff3ec; --btn-border: 1px solid #e3b7a6; --btn-shadow: 0 10px 22px rgb(110 40 50 / .3); --btn-font: "Cormorant Garamond", Georgia, serif;
  --f-display: "Cormorant Garamond", Georgia, serif; --f-script: "Great Vibes", cursive; --f-body: "EB Garamond", Georgia, serif; --f-head: "Cormorant Garamond", Georgia, serif; --f-num: "Cormorant Garamond", Georgia, serif;
  --name-font: "Pinyon Script", cursive; --name-size: 3.4rem; --name-weight: 400; --name-color: #fff4ec;
  --head-size: 2.2rem; --head-weight: 500; --head-style: italic; --head-color: #6e3a36; --head-ink: #6e3a36;
  --kicker-color: #f6e2d6; --kicker-font: var(--f-display);
  --photo-radius: 999px 999px 20px 20px; --photo-border: 3px solid #f3d5c6; --photo-shadow: 0 0 0 7px rgb(255 240 232 / .18), 0 20px 40px rgb(30 10 10 / .45); --cover-ar: 1 / 1;
  --gate-bg: linear-gradient(180deg, rgb(70 35 30 / .55), rgb(60 30 28 / .62)), url(../img/bg.webp) center / cover, #6a3d36; --gate-ink: #fff4ec;
  --guest-bg: rgb(255 240 232 / .12); --guest-line: rgb(243 213 198 / .45);
  --cd-title: #fff4ec; --cd-num: #6e3a36; --cd-label: #8a5a52;
  --cd-tile: linear-gradient(180deg, #fffaf6, #f6e3da); --cd-tile-border: 1px solid #ecc8b8; --cd-tile-radius: 10px; --cd-tile-shadow: 0 4px 10px rgb(80 30 30 / .2);
  --dt-ic: #8a4d45; --dt-ic-bg: transparent; --dt-label: #8a5a52; --av-bg: linear-gradient(135deg, #e8b9a8, #c98b7a); --av-ink: #fff;
}
body { background: radial-gradient(ellipse at 100% 0, rgb(232 195 170 / .45), transparent 40%), radial-gradient(ellipse at 0 60%, rgb(240 205 195 / .5), transparent 40%), #f8ebe6; }
.inv { background: transparent; }

/* Title: spaced caps, glitter script, script name in cream */
.ttl__kicker { font: 500 .8rem/1.5 var(--f-display); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ttl__kicker::before, .ttl__kicker::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #f1cdb9); }
.ttl__kicker::after { transform: scaleX(-1); }
.ttl__theme { font: 400 4.1rem/.9 var(--f-script); margin: 8px 0 2px; }
.ttl__theme span { background: linear-gradient(170deg, #fff2e6 0, #f2c6a8 30%, #d79a83 50%, #fbe2d2 70%, #e2a88f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgb(40 10 10 / .45)); padding: 0 .15em; }
.ttl__theme b { display: block; }
.ttl__theme b + b { margin-top: -.12em; padding-left: .6em; }
.ttl__sub { font: 500 .86rem/1.4 var(--f-display); letter-spacing: .4em; color: #f6e2d6; }
.ttl__sub span::before, .ttl__sub span::after { content: "✦"; font-size: .7em; margin: 0 .7em; color: #f1cdb9; }
.ttl .lead { color: #fbe9df; font: 400 1.02rem/1.6 var(--f-body); margin-top: 12px; }
.ttl__name { margin-top: 8px; text-shadow: 0 3px 10px rgb(40 10 10 / .45); }
.gate__date, .side__date { font: 500 .9rem/1.5 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: #f6e2d6; margin-top: 14px; }
.guest { color: #fff4ec; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--open { --btn-bg: linear-gradient(180deg, #f6dccd, #e3b7a2); --btn-ink: #6e3a36; }

/* Hero on the dark bokeh, then champagne sections */
.sec--hero { background: linear-gradient(180deg, rgb(70 35 30 / .5), rgb(60 30 28 / .66)), url(../img/bg.webp) center / cover; color: #fff4ec; padding-bottom: 54px; }
.photo--hero { width: min(70vw, 290px); }
.sec--countdown { background: linear-gradient(180deg, #6b3b35, #8b5148); padding: 34px 18px; }
.cd__t { margin-bottom: 12px; }
.cd__t { font: italic 500 1.35rem/1.2 var(--f-display); }
.cd__t::before, .cd__t::after { content: "✦"; font-size: .7em; color: #f1cdb9; font-style: normal; }
.cd { gap: 12px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -9px; top: 50%; transform: translateY(-60%); font: 500 1.4rem var(--f-display); color: #f6e2d6; }
.cd__n { font-weight: 600; font-size: 2.1rem; }
.sec--countdown .link--cal { color: #f6e2d6; }

/* Headings: italic serif between sparkle lines */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 44px; height: 12px; flex: none;
  background: radial-gradient(circle, #c9897a 0 2.2px, transparent 2.6px) right center / 12px 12px no-repeat, linear-gradient(#d6a291, #d6a291) left center / 34px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.sec--rsvp .h-sec__t, .sec--wishes .h-sec__t { font: 400 2.5rem/1.1 var(--f-script); }
.h-sec__sub, .lead { color: #6e4a44; }
.dts { gap: 0; background: rgb(255 250 247 / .8); border: 1px solid rgb(205 160 145 / .5); border-radius: 20px; padding: 6px 18px; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(205 160 145 / .45); }
.dt__v strong { font: 600 1.15rem/1.3 var(--f-display); }
.btn--map { --map-bg: transparent; --map-ink: #6e3a36; --map-line: #c99c8d; }
.link, .link--map, .link--cal { color: #8a4d45; }
.gallery__item { border: 4px solid #fff7f2; border-radius: 16px; box-shadow: 0 12px 24px rgb(90 40 35 / .2); }
.wcomp { background: rgb(255 250 247 / .85); }
.wcomp__row { flex-wrap: wrap; }
.wcomp__row textarea { flex: 1; }
.btn--send { flex: 1 0 100%; }
.wcomp__ic { display: grid; place-items: center; width: 34px; height: 46px; color: #8a4d45; }
.closing__t { font: 400 2.8rem/1.1 var(--f-script); color: #8a4d45; }
.closing__name { color: #8a4d45; font-size: 2.6rem; text-shadow: none; }
.sec--closing { padding-bottom: 130px; }

/* Gold sparkles */
.fx i { width: 12px; height: 12px; background: radial-gradient(circle, #fff6e8 0 20%, #f3c9a3 40%, transparent 70%); border-radius: 50%; }
.fx i:nth-child(3n) { width: 7px; height: 7px; }

/* ---------- Balloons, roses, cake and gifts from the mockup ---------- */
.o { filter: drop-shadow(0 8px 10px rgb(40 10 10 / .3)); }
.gate__in .o1, .side__in .o1 { left: -18px; top: 4px; width: 96px; aspect-ratio: var(--ar-balloons); background-image: url(../img/st-balloons.webp); }
.gate__in .o2, .side__in .o2 { right: -16px; top: 210px; width: 104px; aspect-ratio: var(--ar-roses); background-image: url(../img/st-roses.webp); }
.gate__in .o3, .side__in .o3 { left: -12px; top: 236px; width: 78px; aspect-ratio: var(--ar-disco); background-image: url(../img/st-disco.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -18px; top: 10px; width: 28vw; max-width: 110px; aspect-ratio: var(--ar-balloons); background-image: url(../img/st-balloons.webp); }
.sec--hero .o2 { right: -16px; top: 236px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-roses); background-image: url(../img/st-roses.webp); }
.sec--hero .o3 { left: -10px; top: 262px; width: 22vw; max-width: 86px; aspect-ratio: var(--ar-disco); background-image: url(../img/st-disco.webp); }
.sec--details .o1 { right: -18px; top: -6px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-cake); background-image: url(../img/st-cake.webp); }
.sec--details .o2 { left: -16px; top: 0; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-gifts); background-image: url(../img/st-gifts.webp); }
.sec--rsvp .o1 { left: -24px; top: -10px; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-bow); background-image: url(../img/st-bow.webp); opacity: .95; }
.sec--closing .o1 { left: -16px; bottom: -6px; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-gifts); background-image: url(../img/st-gifts.webp); }
.sec--closing .o2 { right: -18px; bottom: -10px; width: 38vw; max-width: 156px; aspect-ratio: var(--ar-roses-r); background-image: url(../img/st-roses-r.webp); }

@media (min-width: 1024px) { .side__in .o1 { left: 40px; } .side__in .o2 { right: 30px; } .side__in .o3 { left: 40px; } }