/* G10 · Family Thanksgiving Graduation: 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: "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: 700; font-display: swap; src: url("../fonts/playfair-display-latin-700-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-flowers-l: 200 / 188; --sx-flowers-l: 11.0; --sy-flowers-l: 464.0; --sw-flowers-l: 59.5; --ar-cap-books: 240 / 131; --sx-cap-books: 971.5; --sy-cap-books: 390.5; --sw-cap-books: 150.5; --ar-flowers-cl: 200 / 187; --sx-flowers-cl: 0.0; --sy-flowers-cl: 1274.5; --sw-flowers-cl: 136.5; }
.phw { --cx0: 0; --cy0: 50; --cw: 705; --ch: 405; }

/* G10 · Family Thanksgiving Graduation: warm cream with deep green and gold; the whole family in the photo, a gold laurel and cap,
   "Undangan" in gold script over a green italic "Syukuran Wisuda", a green countdown bar, a green footer with a gold wave;
   white flowers, a mortarboard and books from the mockup. */
:root {
  --bg: #f8f1e2; --bg2: #efe4cd; --ink: #233b2f; --muted: #55675b; --accent: #c49b4a; --accent2: #123d2c;
  --line: rgb(196 155 74 / .3);
  --card: #fffaf0; --card-line: #e8dabb; --card-shadow: 0 10px 24px rgb(18 61 44 / .08); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #1d5a42, #123d2c); --btn-ink: #fbf3e0; --btn-border: 1.5px solid #c9a24a; --btn-shadow: 0 8px 18px rgb(18 61 44 / .3);
  --f-display: "Great Vibes", cursive; --f-body: "Lora", Georgia, serif; --f-head: "Playfair Display", Georgia, serif; --f-num: "Playfair Display", Georgia, serif;
  --name-font: "Playfair Display", Georgia, serif; --name-size: clamp(1.4rem, 6.2vw, 1.8rem); --name-weight: 700; --name-style: italic; --name-color: #b8862e;
  --head-size: 1.55rem; --head-weight: 600; --head-style: italic; --head-color: #123d2c; --head-ink: #123d2c;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(110% 60% at 50% 0, #fdf8ee, #f8f1e2 60%, #f1e6cf);
  --guest-bg: #fffaf0; --guest-line: #e8dabb;
  --cd-title: #fbf3e0; --cd-num: #123d2c; --cd-label: #55675b;
  --cd-tile: #fbf5e8; --cd-tile-border: 1px solid #e3cf9a; --cd-tile-radius: 10px; --cd-tile-shadow: none;
  --dt-ic: #b8862e; --dt-ic-bg: transparent; --dt-label: #123d2c; --av-bg: #ece2c9; --av-ink: #123d2c;
  --map-bg: #fffaf0; --map-ink: #123d2c; --map-line: #e3cf9a;
  --gal-radius: 12px; --gal-shadow: 0 8px 18px rgb(18 61 44 / .14);
}
body { background: #f3e9d4; }
.inv { background: linear-gradient(180deg, #fbf6ec, #f6eedd); }

/* The family photo, full width, melting into cream */
.phw .photo { -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); }
.phw--cover { --pw: auto; width: auto; margin: -28px -22px -10px; }
.phw--hero { --pw: auto; width: auto; margin: -34px -22px -12px; }
.ttl { position: relative; z-index: 2; gap: 2px; }

/* Title */
.ttl .orn--cap svg { width: 70px; margin: 0 auto; color: #c49b4a; }
.ttl__pre span { font: 400 2.4rem/1 var(--f-display); color: #b8862e; }
.ttl__kicker span { font: italic 600 2.3rem/1.1 var(--f-head); color: #123d2c; }
.ttl__kicker::after { content: ""; display: block; width: 150px; height: 1px; margin: 8px auto 4px; background: linear-gradient(90deg, transparent, #c49b4a, transparent); }
.ttl__tag span { font: italic 600 1.15rem/1.3 var(--f-head); color: #123d2c; }
.ttl__name { margin: 2px 0 2px; }
.ttl__name span { background: linear-gradient(180deg, #e3b85a, #b8862e 60%, #8f6420); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em; }
.ttl .lead { color: #3c4d42; font-size: .93rem; max-width: 310px; margin-top: 8px; }
.gate__date, .side__date { color: #123d2c; font-weight: 600; margin-top: 14px; }

/* Countdown: a deep green bar with a gold edge */
.sec--countdown { padding-top: 16px; }
.cd-box { position: relative; background: linear-gradient(180deg, #1d5a42, #123d2c); border: 1.5px solid #c9a24a; border-radius: 18px; padding: 12px 12px 16px;
  box-shadow: inset 0 0 0 4px #123d2c, inset 0 0 0 5px rgb(201 162 74 / .4), 0 12px 24px rgb(18 61 44 / .25); }
.cd-box::before, .cd-box::after { content: ""; position: absolute; bottom: 10px; width: 16px; height: 28px; background: url(../img/g10-laurel.svg) center / contain no-repeat; }
.cd-box::before { left: 8px; } .cd-box::after { right: 8px; transform: scaleX(-1); }
.cd__t { font: italic 600 1.08rem/1.3 var(--f-head); }
.cd__ic { color: #e3c06a; }
.cd__n { font-weight: 700; }
.cd__l { color: #55675b; }
.sec--countdown .link--cal { color: #123d2c; }

/* Headings: italic serif between laurel sprigs */
.h-sec__t { gap: 10px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 16px; height: 28px; flex: none; background: url(../img/g10-laurel.svg) center / contain no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }

/* Details */
.dts { gap: 0; background: #fffaf0; border: 1px solid #e8dabb; border-radius: 16px; padding: 4px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid #efe4cc; }
.note { background: none; border: 0; color: #3c4d42; font-style: italic; }
.btn--map { --map-bg: #fffaf0; }
.link, .link--map, .link--cal { color: #123d2c; }

/* Wishes */
.wish { border-color: #efe4cc; }
.wish__av { font-family: var(--f-head); }
.sec--wishes { padding-bottom: 70px; }

/* Closing: a deep green footer under a gold-edged wave */
.sec--closing { background: linear-gradient(180deg, #1d5a42, #123d2c); color: #fbf3e0; padding: 64px 22px 100px; border-radius: 55% 55% 0 0 / 34px 34px 0 0; box-shadow: 0 -3px 0 #c9a24a; }
.sec--closing::before { content: ""; display: block; width: 64px; height: 28px; margin: 0 auto 2px; background: url(../img/g10-cap.svg) center / contain no-repeat; }
.closing__t span { font: 400 2.8rem/1.1 var(--f-display); color: #e3c06a; font-style: normal; }
.sec--closing .orn--div svg { color: #c9a24a; }
.closing__p, .closing__sign, .made { color: #ece4cf; }

/* ---------- White flowers, the mortarboard and books from the mockup ---------- */
.o { filter: drop-shadow(0 6px 10px rgb(18 61 44 / .18)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { left: -20px; top: 200px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-l); background-image: url(../img/st-flowers-l.webp); }
.gate__in .o2, .side__in .o2 { right: -16px; top: 206px; width: 32vw; max-width: 128px; aspect-ratio: var(--ar-cap-books); background-image: url(../img/st-cap-books.webp); }
.sec--hero .deco { z-index: 1; }
.sec--hero .o1 { left: -20px; top: 214px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-flowers-l); background-image: url(../img/st-flowers-l.webp); }
.sec--hero .o2 { right: -16px; top: 220px; width: 32vw; max-width: 128px; aspect-ratio: var(--ar-cap-books); background-image: url(../img/st-cap-books.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-flowers-cl); background-image: url(../img/st-flowers-cl.webp); }

html:lang(en) .ttl__kicker span { font-size: 1.75rem; }

@media (min-width: 1024px) { .phw--side { --pw: auto; width: auto; margin: -36px -32px -12px; } }