/* O07 · Modern Housewarming: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-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: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-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: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mulish-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: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/mulish-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: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/mulish-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-plant: 260 / 368; --sx-plant: 948.75; --sy-plant: 515.0; --sw-plant: 173.25; --ar-house: 200 / 196; --sx-house: 35.0; --sy-house: 1248.75; --sw-house: 124.25; --ar-living: 420 / 395; }
.phw { --cx0: 548; --cy0: 45; --cw: 574; --ch: 467; }

/* O07 · Modern Housewarming: warm white, soft beige and sage, the new house photo, a light serif "Undangan" with an italic
   "Housewarming" and a line-drawn roof, clean cards; the plant, the white house model and the living room from the mockup. */
:root {
  --bg: #fafaf6; --bg2: #efede6; --ink: #262b24; --muted: #5d625a; --accent: #66765a; --accent2: #c26a3a;
  --line: rgb(102 118 90 / .2);
  --card: #ffffff; --card-line: #e7e5dc; --card-shadow: 0 10px 26px rgb(40 45 35 / .07); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #73845f, #5f6f52); --btn-ink: #fbfbf6; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(95 111 82 / .3);
  --f-display: "Fraunces", Georgia, serif; --f-body: "Mulish", system-ui, sans-serif; --f-head: "Fraunces", Georgia, serif; --f-num: "Fraunces", Georgia, serif;
  --name-font: "Fraunces", Georgia, serif; --name-size: 1.45rem; --name-weight: 400; --name-color: #262b24;
  --head-size: 1.75rem; --head-weight: 400; --head-color: #262b24; --head-ink: #262b24;
  --photo-radius: 20px; --photo-border: 0; --photo-shadow: 0 18px 36px rgb(40 45 35 / .18);
  --gate-bg: radial-gradient(110% 60% at 50% 0, #ffffff, #fafaf6 60%, #f3f1ea);
  --guest-bg: #fff; --guest-line: #e7e5dc;
  --cd-title: #3a4234; --cd-num: #262b24; --cd-label: #6b7064;
  --cd-tile: #fff; --cd-tile-border: 1px solid #e7e5dc; --cd-tile-radius: 12px; --cd-tile-shadow: 0 4px 10px rgb(40 45 35 / .05);
  --dt-ic: #5f6f52; --dt-ic-bg: transparent; --dt-label: #5d625a; --av-bg: #8a9a78; --av-ink: #fff;
  --gal-radius: 14px; --gal-shadow: 0 10px 22px rgb(40 45 35 / .12);
}
body { background: #f5f4ee; }
.inv { background: #fafaf6; }

/* The new house */
.phw--cover { --pw: min(84vw, 340px); margin: 4px auto 22px; }
.phw--hero { --pw: min(88vw, 360px); margin: 2px auto 22px; }

/* Title: spaced capitals, the light serif with the roof drawing, the italic "Housewarming", a short rule */
.ttl__pre span { font: 600 .68rem/1.4 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: #3f4a3a; }
.ttl__kicker { position: relative; margin-top: 4px; padding-bottom: 16px; }
.ttl__kicker b { display: block; font: 400 2.6rem/1.04 var(--f-display); color: #2c3328; letter-spacing: -.01em; }
.ttl__kicker b:first-child { position: relative; display: inline-block; }
.ttl__kicker b:first-child::after { content: ""; position: absolute; left: 100%; top: -6px; width: 66px; height: 34px; margin-left: 6px; background: url(../img/o07-house.svg) center / contain no-repeat; }
.ttl__kicker b:last-child { font-style: italic; color: #5f6f52; font-size: 2.55rem; }
.ttl__kicker::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 46px; height: 2px; margin-left: -23px; background: #3f4a3a; }
.ttl .lead { color: #3a4234; font-size: .93rem; max-width: 320px; }
.ttl__family { margin-top: 14px; }
.ttl__family span { font: italic 400 1.05rem/1.2 var(--f-display); color: #4b5a40; }
.ttl__name { margin: 0; }
.gate__date, .side__date { color: #3f4a3a; font-weight: 700; margin-top: 14px; }
.guest { box-shadow: var(--card-shadow); }

/* Headings: light serif; the details heading under a small roof */
.h-sec__ic { color: #5f6f52; width: .9em; height: .9em; }
.sec--details .h-sec::before { content: ""; display: block; width: 54px; height: 28px; margin: 0 auto 2px; background: url(../img/o07-house-s.svg) center / contain no-repeat; }
.h-sec__sub { color: #5d625a; }

/* Countdown: a white card */
.sec--countdown { padding-top: 20px; }
.cd-box { background: #fff; border: 1px solid #e7e5dc; border-radius: 18px; padding: 14px 12px 16px; box-shadow: var(--card-shadow); }
.cd__t { font: 600 .95rem/1.3 var(--f-body); }
.cd__ic { color: #5f6f52; }
.cd__n { font-weight: 500; font-size: 1.9rem; }
.sec--countdown .link--cal { color: #4b5a40; }

/* Details */
.dt__ic .ic { stroke-width: 1.5; }
.dt__v small { color: #6b7064; }
.btn--map { --map-ink: #3f4a3a; --map-line: #dcdacf; }
.link, .link--map, .link--cal { color: #4b5a40; }
.lead--rsvp { display: flex; gap: 8px; justify-content: center; align-items: flex-start; font-size: .88rem; }
.lead--rsvp::before { content: "i"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border: 1.4px solid #6b7064; border-radius: 50%; font: 700 .7rem/1 var(--f-body); color: #6b7064; }

/* Gallery and wishes */
.sec--gallery { background: #f3f2ec; }
.wcomp { background: #f6f5ef; }
.wish__av { font-family: var(--f-body); font-size: .85rem; }

/* Closing: a soft sage band */
.sec--closing { background: #eef0e7; padding-bottom: 64px; }
.sec--closing::before { content: ""; display: block; width: 74px; height: 38px; margin: 0 auto 8px; background: url(../img/o07-house-s.svg) center / contain no-repeat; }
.closing__t span { font-weight: 400; }
.closing__t span { font-style: italic; color: #4b5a40; }

/* ---------- The plant, the house model and the living room from the mockup ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(40 45 35 / .15)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { right: -44px; bottom: -10px; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-plant); background-image: url(../img/st-plant.webp); opacity: .9; }
.sec--details { padding-top: 104px; }
.sec--details .o1 { left: 0; top: 0; width: 42vw; max-width: 170px; aspect-ratio: var(--ar-living); background-image: url(../img/living.webp); filter: none; opacity: .75; }
.sec--details .o2 { right: -44px; top: -20px; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-plant); background-image: url(../img/st-plant.webp); opacity: .9; }
.sec--wishes { padding-bottom: 120px; }
.sec--wishes .o1 { left: 6px; bottom: 8px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-house); background-image: url(../img/st-house.webp); }

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

@media (min-width: 1024px) { .phw--side { --pw: min(30vw, 400px); } .side__in .o1 { right: -150px; bottom: -60px; } }