/* O10 · Chinese New Year 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: "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-cloud-orn: 220 / 67; --sx-cloud-orn: 735.0; --sy-cloud-orn: 72.5; --sw-cloud-orn: 161.0; --ar-plum-tr: 300 / 129; --sx-plum-tr: 905.0; --sy-plum-tr: 49.25; --sw-plum-tr: 193.75; --ar-lantern-r: 130 / 278; --sx-lantern-r: 1031.75; --sy-lantern-r: 95.0; --sw-lantern-r: 90.25; --ar-pagoda: 130 / 261; --sx-pagoda: 1025.0; --sy-pagoda: 298.0; --sw-pagoda: 97.0; --ar-lantern-l: 160 / 244; --sx-lantern-l: 0.0; --sy-lantern-l: 562.75; --sw-lantern-l: 112.25; --ar-lion: 280 / 223; --sx-lion: 0.0; --sy-lion: 657.25; --sw-lion: 217.75; --ar-plum-vase: 280 / 346; --sx-plum-vase: 908.0; --sy-plum-vase: 549.0; --sw-plum-vase: 214.0; --ar-plum-l: 320 / 281; --sx-plum-l: 0.0; --sy-plum-l: 1062.75; --sw-plum-l: 230.5; --ar-pagoda-w: 260 / 248; --sx-pagoda-w: 925.0; --sy-pagoda-w: 1087.25; --sw-pagoda-w: 186.0; --ar-fan-l: 170 / 133; --sx-fan-l: 0.0; --sy-fan-l: 1304.0; --sw-fan-l: 125.0; --ar-fan-r: 190 / 179; --sx-fan-r: 1016.0; --sy-fan-r: 1302.25; --sw-fan-r: 106.0; }
.phw { --cx0: 20; --cy0: 45; --cw: 580; --ch: 501; }

/* O10 · Chinese New Year Open House: lacquer red and gold with auspicious clouds, the family in red, a gold title under the cloud
   ornament, cream panels with red tiles and gold fretwork; lanterns, plum blossom, the lion dance head, pagodas and fans from the mockup. */
:root {
  --bg: #fbf0dc; --bg2: #f4e2c0; --ink: #3d1a12; --muted: #6e4a3a; --accent: #b3141b; --accent2: #e6b54f;
  --line: rgb(179 20 27 / .2);
  --card: #fffaf0; --card-line: #e6c88a; --card-shadow: 0 10px 24px rgb(120 30 10 / .12); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #c8222a, #8e0f14); --btn-ink: #fff3dc; --btn-border: 1.5px solid #e6b54f; --btn-shadow: 0 8px 18px rgb(142 15 20 / .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.6rem; --name-weight: 600; --name-color: #f6d27a;
  --head-size: 1.6rem; --head-weight: 600; --head-color: #9e1218; --head-ink: #9e1218;
  --photo-radius: 12px; --photo-border: 0; --photo-shadow: none;
  --lacquer: url(../img/o10-clouds.svg) 0 0 / 240px 160px, radial-gradient(120% 60% at 50% 0, #b3141b, #8e0f14 55%, #6b0a0e);
  --gate-bg: var(--lacquer); --gate-ink: #fbe9c8; --guest-bg: rgb(107 10 14 / .7); --guest-line: #e6b54f;
  --cd-title: #9e1218; --cd-num: #fff3dc; --cd-label: #f6dcc0;
  --cd-tile: linear-gradient(180deg, #c8222a, #8e0f14); --cd-tile-border: 1px solid #e6b54f; --cd-tile-radius: 10px; --cd-tile-shadow: 0 4px 8px rgb(120 20 10 / .25);
  --dt-ic: #b3141b; --dt-ic-bg: transparent; --dt-label: #9e1218; --av-bg: #f4e2c0; --av-ink: #9e1218;
  --map-ink: #9e1218; --map-line: #e6c88a;
}
body { background: url(../img/o10-clouds-d.svg) 0 0 / 240px 160px, #fbf0dc; }
.inv { background: transparent; }

/* Hero in lacquer red */
.sec--hero { background: var(--lacquer); color: #fbe9c8; padding-bottom: 52px; }
.phw .photo { box-shadow: 0 0 0 3px #8e0f14, 0 0 0 5px #e6b54f, 0 18px 34px rgb(0 0 0 / .4); }
.phw--cover { --pw: min(76vw, 300px); margin: 8px auto 16px; }
.phw--hero { --pw: min(84vw, 330px); margin: 6px auto 18px; }

/* Title under the cloud ornament, gold serif; the hosts between gold lines */
.ttl__kicker { position: relative; padding-top: 40px; }
.ttl__kicker::before { content: ""; position: absolute; left: 50%; top: 0; width: 110px; margin-left: -55px; aspect-ratio: var(--ar-cloud-orn); background: url(../img/st-cloud-orn.webp) center / contain no-repeat; }
.ttl__kicker b { display: block; font: italic 600 2.1rem/1.1 var(--f-display); background: linear-gradient(180deg, #fde9b4, #ecc067 55%, #c9952f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgb(60 0 0 / .4)); }
.ttl__kicker b:last-child { font: 600 2.45rem/1.06 var(--f-display); }
.ttl__family { margin-top: 12px; }
.ttl .ttl__family span { display: inline-flex; align-items: center; gap: 10px; font: 400 .95rem/1.2 var(--f-body); color: #fbe9c8; }
.ttl .ttl__family span::before, .ttl .ttl__family span::after { content: ""; width: 28px; height: 1px; background: #e6b54f; }
.ttl__name { margin: 2px 0 0; }
.ttl .lead { color: #fbe9c8; font-size: .93rem; max-width: 320px; }
.gate__date, .side__date { color: #f6d27a; font-weight: 600; margin-top: 16px; }
.guest { color: #fbe9c8; }

/* Headings: red serif between gold diamonds */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 44px; height: 12px; flex: none; background: linear-gradient(45deg, transparent 45%, #c9952f 45% 55%, transparent 55%) right center / 12px 12px no-repeat,
  linear-gradient(-45deg, transparent 45%, #c9952f 45% 55%, transparent 55%) right center / 12px 12px no-repeat, linear-gradient(#c9952f, #c9952f) left center / 32px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }

/* Countdown: a cream panel with cloud ends and red tiles */
.sec--countdown { padding-top: 28px; }
.cd-box { position: relative; background: linear-gradient(180deg, #fffaf0, #f7e7c6); border: 2px solid #e6b54f; border-radius: 18px; padding: 14px 16px 16px; box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgb(230 181 79 / .5), var(--card-shadow); }
.cd-box::before, .cd-box::after { content: ""; position: absolute; top: 50%; width: 46px; height: 24px; margin-top: -12px; background: url(../img/o10-cloud.svg) center / contain no-repeat; }
.cd-box::before { left: -30px; transform: scaleX(-1); } .cd-box::after { right: -30px; }
.cd__t { font: 600 1.05rem/1.3 var(--f-body); }
.cd { gap: 14px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -11px; top: 50%; transform: translateY(-60%); font: 700 1.4rem var(--f-num); color: #9e1218; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #9e1218; }

/* Details: cream cards with gold edges and fretwork corners */
.dt { position: relative; border: 1.5px solid #e6c88a; }
.dt::before, .dt::after { content: ""; position: absolute; width: 18px; height: 18px; background: url(../img/o10-fret.svg) center / contain no-repeat; }
.dt::before { left: 4px; top: 4px; } .dt::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
.dt__l { font-weight: 600; }
.link, .link--map, .link--cal { color: #9e1218; }

/* Gallery on a red band */
.sec--gallery { background: var(--lacquer); border-top: 3px solid #e6b54f; border-bottom: 3px solid #e6b54f; }
.sec--gallery .h-sec__t { color: #f6d27a; }
.sec--gallery .hint { color: #f6dcc0; }
.gallery__item { border: 2px solid #e6b54f; }

/* Wishes */
.sec--wishes { padding-bottom: 120px; }
.wish { border-color: #ecd6a6; }
.wish__av { color: #9e1218; }

/* Closing in lacquer red */
.sec--closing { background: var(--lacquer); color: #fbe9c8; padding-bottom: 80px; border-top: 3px solid #e6b54f; }
.closing__t span { color: #f6d27a; font-size: 2.2rem; }
.sec--closing .orn--div svg { color: #e6b54f; }
.closing__p, .closing__sign, .made { color: #fbe9c8; }

/* ---------- Lanterns, plum blossom, the lion head, pagodas and fans from the mockup ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(60 0 0 / .3)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { right: -6px; top: -16px; width: 13vw; max-width: 52px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.gate__in .o2, .side__in .o2 { left: -30px; top: -26px; width: 44vw; max-width: 170px; aspect-ratio: var(--ar-plum-tr); background-image: url(../img/st-plum-tr.webp); transform: scaleX(-1); }
.gate__in .o3, .side__in .o3 { right: -8px; bottom: 4px; width: 18vw; max-width: 72px; aspect-ratio: var(--ar-pagoda); background-image: url(../img/st-pagoda.webp); opacity: .55; filter: none; }
.sec--hero .o1 { right: 0; top: 4px; width: 13vw; max-width: 52px; aspect-ratio: var(--ar-lantern-r); background-image: url(../img/st-lantern-r.webp); }
.sec--hero .o2 { left: -30px; top: -10px; width: 44vw; max-width: 170px; aspect-ratio: var(--ar-plum-tr); background-image: url(../img/st-plum-tr.webp); transform: scaleX(-1); }
.sec--details { padding-bottom: 150px; }
.sec--details .o1 { left: -8px; bottom: 0; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-lion); background-image: url(../img/st-lion.webp); }
.sec--details .o2 { right: -8px; bottom: 0; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-plum-vase); background-image: url(../img/st-plum-vase.webp); }
.sec--details .o3 { left: 4px; top: 0; width: 13vw; max-width: 52px; aspect-ratio: var(--ar-lantern-l); background-image: url(../img/st-lantern-l.webp); }
.sec--wishes .o1 { left: -10px; top: 0; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-plum-l); background-image: url(../img/st-plum-l.webp); }
.sec--wishes .o2 { right: -10px; top: 40px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-pagoda-w); background-image: url(../img/st-pagoda-w.webp); opacity: .8; filter: none; }
.sec--wishes .o3 { left: 0; bottom: 0; width: 20vw; max-width: 80px; aspect-ratio: var(--ar-fan-l); background-image: url(../img/st-fan-l.webp); }
.sec--wishes .o4 { right: 0; bottom: 0; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-fan-r); background-image: url(../img/st-fan-r.webp); }

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

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

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