/* O09 · Christmas Open House: fonts (SIL Open Font License 1.1, self-hosted) */
@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: 600; font-display: swap; src: url("../fonts/playfair-display-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; }
@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-manger: 160 / 114; --sx-manger: 819.0; --sy-manger: 50.5; --sw-manger: 93.0; --ar-ribbon: 520 / 76; --sx-ribbon: 706.0; --sy-ribbon: 202.75; --sw-ribbon: 308.25; --ar-bow: 140 / 79; --sx-bow: 524.75; --sy-bow: 527.75; --sw-bow: 71.25; --ar-nativity: 420 / 391; --sx-nativity: 26.25; --sy-nativity: 1123.5; --sw-nativity: 261.75; --ar-gifts: 400 / 319; --sx-gifts: 896.25; --sy-gifts: 1210.25; --sw-gifts: 225.75; --ar-sprig: 160 / 57; --sx-sprig: 371.25; --sy-sprig: 808.75; --sw-sprig: 68.25; --ar-garland-r: 440 / 257; --ar-garland-l: 420 / 133; }
.phw { --cx0: 0; --cy0: 45; --cw: 600; --ch: 375; }

/* O09 · Christmas Open House: pine green, cranberry red and gold, the family by the fire, a gold title under the manger star with
   the red ribbon, a cream countdown with red tiles and a bow, a red velvet wishes wall; the lit garlands, holly sprig, ribbon, bow, nativity and gifts from the mockup. */
:root {
  --bg: #123826; --bg2: #0d2a1c; --ink: #f4ead2; --muted: #d9ccaa; --accent: #e6c46a; --accent2: #9e1b22;
  --line: rgb(230 196 106 / .3);
  --card: #fbf3df; --card-line: #e2cf9f; --card-shadow: 0 10px 24px rgb(0 0 0 / .25); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #8e1820, #5e0b12); --btn-ink: #fbf0d6; --btn-border: 1.5px solid #e6c46a; --btn-shadow: 0 8px 18px rgb(0 0 0 / .35);
  --f-display: "Playfair Display", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-size: 1.75rem; --name-weight: 600; --name-style: italic; --name-color: #f0d38a;
  --head-size: 1.7rem; --head-weight: 600; --head-style: italic; --head-color: #f0d38a; --head-ink: #f0d38a;
  --photo-radius: 12px; --photo-border: 0; --photo-shadow: none;
  --pine: url(../img/o09-sparkles.svg), radial-gradient(120% 60% at 50% 0, #1b4a33, #123826 55%, #0d2a1c);
  --gate-bg: var(--pine); --gate-ink: #f4ead2; --guest-bg: rgb(13 42 28 / .8); --guest-line: #c9a24a;
  --cd-title: #1d3a28; --cd-num: #fbf0d6; --cd-label: #f1dcc0;
  --cd-tile: linear-gradient(180deg, #a3222a, #7a1018); --cd-tile-border: 1px solid #d9b25c; --cd-tile-radius: 10px; --cd-tile-shadow: 0 4px 8px rgb(0 0 0 / .2);
  --dt-ic: #9e1b22; --dt-ic-bg: transparent; --dt-label: #3a2a1a; --av-bg: #ead9b4; --av-ink: #7a1018;
  --field-bg: #fffaf0; --field-ink: #2a2014; --field-line: #e2cf9f;
  --map-bg: #fbf3df; --map-ink: #7a1018; --map-line: #e2cf9f;
}
body { background: #0d2a1c; color: var(--ink); }
.inv { background: var(--pine); }
::placeholder { color: #9a8f78; }

/* The family by the fire in a gold frame */
.phw .photo { box-shadow: 0 0 0 3px #123826, 0 0 0 5px #d9b25c, 0 18px 34px rgb(0 0 0 / .45); }
.phw--cover { --pw: min(80vw, 320px); margin: 8px auto 18px; }
.phw--hero { --pw: min(86vw, 340px); margin: 6px auto 20px; }

/* Title under the manger star, gold serif, the red ribbon, the hosts */
.ttl__kicker { position: relative; padding-top: 50px; padding-bottom: 42px; }
.ttl__kicker::before { content: ""; position: absolute; left: 50%; top: 0; width: 72px; margin-left: -36px; aspect-ratio: var(--ar-manger); background: url(../img/st-manger.webp) center / contain no-repeat; }
.ttl__kicker::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(76vw, 300px); transform: translateX(-50%); aspect-ratio: var(--ar-ribbon); background: url(../img/st-ribbon.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); }
.ttl__kicker b { display: block; font: italic 600 2.1rem/1.08 var(--f-display); background: linear-gradient(180deg, #fbe7ae, #e6c46a 55%, #c49a3e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl__kicker b:last-child { font: 600 2.45rem/1.05 var(--f-display); }
.ttl__family { margin-top: 10px; }
.ttl__family span { font: 400 .95rem/1.2 var(--f-body); color: #efe3c6; }
.ttl__name { margin: 0; }
.ttl .orn--div svg { width: 150px; margin: 8px auto 4px; color: #d9b25c; }
.ttl .lead { color: #efe3c6; font-size: .95rem; max-width: 320px; }
.gate__date, .side__date { color: #f0d38a; font-weight: 600; margin-top: 16px; }
.guest { color: #f4ead2; }

/* Headings: gold italic serif */
.h-sec__sub { color: #e8dcc0; }
.lead { color: #e8dcc0; }

/* Countdown: a cream panel with red tiles, holly and the bow */
.sec--countdown { padding: 30px 22px 56px; }
.cd-box { position: relative; background: linear-gradient(180deg, #fdf6e4, #f3e4c1); border: 2px solid #d9b25c; border-radius: 16px; padding: 12px 34px 16px; box-shadow: inset 0 0 0 3px #fdf6e4, inset 0 0 0 4px rgb(201 162 74 / .5), 0 14px 26px rgb(0 0 0 / .3); }
.cd-box::before, .cd-box::after { content: ""; position: absolute; top: 50%; width: 34px; height: 22px; margin-top: -6px; background: url(../img/o09-holly.svg) center / contain no-repeat; }
.cd-box::before { left: 2px; transform: rotate(-70deg); } .cd-box::after { right: 2px; transform: rotate(70deg) scaleX(-1); }
.cd__t { font: italic 600 1.1rem/1.3 var(--f-display); }
.cd { gap: 8px; }
.cd__n { font-weight: 600; font-size: 1.8rem; }
.sec--countdown .link--cal { color: #f0d38a; margin-top: 30px; }

/* Details: cream cards with red icons */
.dts { gap: 10px; }
.dt { color: #2a2014; }
.dt__v small { color: #5e5444; }
.dt__l { color: #3a2a1a; }
.btn--map { box-shadow: none; }
.dts__act .link { color: #f0d38a; }

/* RSVP and wishes cards stay cream on the dark page */
.card.form, .rsvp-done, .wcomp { color: #2a2014; }
.field em, .field small { color: #6e624c; }
.wish { background: #fbf3df; border-color: #e2cf9f; color: #2a2014; }
.wish__ago { color: #6e624c; }
.tag--no { background: #ead9b4; color: #5e0b12; }
.wishes__n { color: #f1e2c2; }

/* Gallery on a cream band */
.sec--gallery { background: linear-gradient(180deg, #fbf3df, #f1e2bf); color: #1d3a28; border-top: 2px solid #d9b25c; border-bottom: 2px solid #d9b25c; }
.sec--gallery .h-sec__t { color: #1d3a28; gap: 14px; }
.sec--gallery .h-sec__t::before, .sec--gallery .h-sec__t::after { content: ""; width: 54px; aspect-ratio: var(--ar-sprig); background: url(../img/st-sprig.webp) center / contain no-repeat; }
.sec--gallery .h-sec__t::after { transform: scaleX(-1); }
.sec--gallery .hint { color: #5e5444; }
.gallery__item { border: 3px solid #fffaf0; box-shadow: 0 8px 18px rgb(60 40 10 / .25); }

/* Wishes on red velvet */
.sec--wishes { background: radial-gradient(120% 70% at 50% 0, #a3222a, #7a1018 60%, #5e0b12); padding-bottom: 190px; }
.sec--wishes .h-sec__t { color: #fbe7ae; }

/* Closing */
.sec--closing { padding-bottom: 120px; }
.closing__t span { font-size: 2.2rem; }
.sec--closing .orn--div svg { color: #d9b25c; }
.closing__p, .closing__sign, .made { color: #efe3c6; }

/* ---------- Lit garlands, holly sprigs, the bow, nativity and gifts from the mockup ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(0 0 0 / .3)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { right: 0; top: 196px; width: 54vw; max-width: 216px; aspect-ratio: var(--ar-garland-r); background-image: url(../img/garland-r.webp); filter: none; }
.gate__in .o2, .side__in .o2 { left: 0; top: 214px; width: 52vw; max-width: 206px; aspect-ratio: var(--ar-garland-l); background-image: url(../img/garland-l.webp); filter: none; }
.sec--hero .o1 { right: 0; top: 206px; width: 54vw; max-width: 216px; aspect-ratio: var(--ar-garland-r); background-image: url(../img/garland-r.webp); filter: none; }
.sec--hero .o2 { left: 0; top: 224px; width: 52vw; max-width: 206px; aspect-ratio: var(--ar-garland-l); background-image: url(../img/garland-l.webp); filter: none; }
.sec--countdown .deco { z-index: 3; }
.sec--countdown .o1 { left: 50%; bottom: 14px; width: 18vw; max-width: 72px; margin-left: max(-9vw, -36px); aspect-ratio: var(--ar-bow); background-image: url(../img/st-bow.webp); }
.sec--wishes .o1 { left: -10px; bottom: 0; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-nativity); background-image: url(../img/st-nativity.webp); }
.sec--wishes .o2 { right: -10px; bottom: 0; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-gifts); background-image: url(../img/st-gifts.webp); }
.sec--closing .o1 { right: -6px; top: 14px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-sprig); background-image: url(../img/st-sprig.webp); transform: rotate(-20deg); }
.sec--closing .o2 { left: -6px; top: 14px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-sprig); background-image: url(../img/st-sprig.webp); transform: scaleX(-1) rotate(-20deg); }

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

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

html:lang(en) .ttl__kicker b { text-wrap: balance; }