/* G01 · Classic Black & Gold: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel-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; }
@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-caps: 300 / 267; --sx-caps: 921.75; --sy-caps: 370.0; --sw-caps: 200.25; --ar-filigree-l: 160 / 376; --sx-filigree-l: 0.0; --sy-filigree-l: 593.25; --sw-filigree-l: 100.0; --ar-filigree-r: 150 / 383; --sx-filigree-r: 1028.0; --sy-filigree-r: 590.0; --sw-filigree-r: 93.0; --ar-swoosh-l: 360 / 219; --ar-swoosh-r: 360 / 221; }
.phw { --cx0: 0; --cy0: 55; --cw: 520; --ch: 490; }

/* G01 · Classic Black & Gold: near-black with gold, the graduate's photo fading into the dark, a gold laurel and mortarboard,
   "UNDANGAN WISUDA" in gold capitals over a gold ribbon, gold-edged cards; the caps and books, the baroque filigree and gold light from the mockup. */
:root {
  --bg: #0b0b0b; --bg2: #16130d; --ink: #f1e6cc; --muted: #cbbd9a; --accent: #d9b45f; --accent2: #b8913e;
  --line: rgb(217 180 95 / .35);
  --card: linear-gradient(180deg, #17140e, #0e0c08); --card-line: rgb(217 180 95 / .55); --card-shadow: 0 10px 26px rgb(0 0 0 / .5); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #f6dc8e, #d9b45f 55%, #b18a3a); --btn-ink: #1a1408; --btn-line: #f2dfa4; --btn-shadow: 0 8px 22px rgb(217 180 95 / .25);
  --f-display: "Cinzel", Georgia, serif; --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.45rem, 6.6vw, 1.9rem); --name-weight: 600; --name-color: #e9c977;
  --head-size: 1.7rem; --head-weight: 600; --head-color: #e9c977; --head-ink: #e9c977;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(90% 50% at 50% 0, #2a2112, #0b0b0b 70%); --gate-ink: #f1e6cc; --guest-bg: rgb(23 20 14 / .9); --guest-line: rgb(217 180 95 / .6);
  --cd-title: #e9c977; --cd-num: #f6e3a6; --cd-label: #cbbd9a;
  --cd-tile: linear-gradient(180deg, #17140e, #0b0a07); --cd-tile-border: 1px solid rgb(217 180 95 / .75); --cd-tile-radius: 10px; --cd-tile-shadow: inset 0 0 12px rgb(217 180 95 / .08);
  --dt-ic: #e3c06a; --dt-ic-bg: transparent; --dt-label: #e9c977; --av-bg: #2a2214; --av-ink: #e3c06a;
  --field-bg: #14110b; --field-line: rgb(217 180 95 / .5); --field-ink: #f1e6cc;
  --map-bg: transparent; --map-ink: #e9c977; --map-line: rgb(217 180 95 / .6);
  --gal-border: 1px solid rgb(217 180 95 / .7); --gal-radius: 12px; --gal-shadow: 0 10px 22px rgb(0 0 0 / .5);
  color-scheme: dark;
}
body { background: #0b0b0b; color: var(--ink); }
.inv { background: radial-gradient(120% 40% at 50% 0, #1d170d, #0b0b0b 60%); }
::placeholder { color: #8f8466; }
.gold { background: linear-gradient(180deg, #fbe9b0, #e3c06a 50%, #b8913e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The graduate's photo melts into the dark */
.phw .photo { -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.phw--cover { --pw: auto; width: auto; margin: -28px -22px -54px; }
.phw--hero { --pw: auto; width: auto; margin: -34px -22px -58px; }
.phw .photo img { object-position: 62% 30%; }
.ttl { position: relative; z-index: 2; }

/* Title: the gold laurel and cap, "UNDANGAN WISUDA", the ribbon, the gold name and the programme */
.ttl .orn--cap svg { width: 96px; margin: 0 auto 6px; color: #e3c06a; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .6)); }
.ttl__kicker b { display: block; font: 700 1rem/1.2 var(--f-display); letter-spacing: .32em; text-indent: .32em; color: #f1e6cc; }
.ttl__kicker b:last-child { font-size: 3rem; letter-spacing: .04em; text-indent: 0; line-height: 1.02; margin-top: 2px;
  background: linear-gradient(180deg, #fbe9b0, #e3c06a 48%, #a8802f 60%, #f0d488); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / .7)); }
.ttl__tag { margin-top: 6px; }
.ttl__tag span { padding: 6px 42px 9px; background: url(../img/g01-ribbon.svg) center / 100% 100% no-repeat; font: italic 600 1rem/1.2 var(--f-head); color: #1d1608; }
.ttl .lead { color: #e9dec2; font-size: .93rem; max-width: 310px; margin-top: 12px; }
.ttl__name { margin: 12px 0 2px; }
.ttl__name span { background: linear-gradient(180deg, #fbe9b0, #e3c06a 50%, #b8913e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .7)); padding: 0 .1em; }
.ttl__facts { color: #e9dec2; font-size: .92rem; }
.gate__date, .side__date { color: #e9c977; font-weight: 600; margin-top: 14px; letter-spacing: .02em; }
.guest { color: #f1e6cc; }

/* Headings: gold serif between gold lines */
.h-sec__t { gap: 14px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, #d9b45f); }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__sub, .lead { color: #d8ccab; }

/* Countdown: a gold-edged card with colons */
.sec--countdown { padding-top: 22px; }
.cd-box { border: 1px solid rgb(217 180 95 / .6); border-radius: 16px; padding: 14px 14px 16px; background: rgb(20 17 11 / .85); box-shadow: 0 0 0 4px rgb(11 11 11 / .9), 0 0 0 5px rgb(217 180 95 / .25); }
.cd__t { font: 400 .98rem/1.3 var(--f-body); gap: 10px; color: #f1e6cc; }
.cd__t::before, .cd__t::after { content: ""; width: 22px; height: 1px; background: #d9b45f; }
.cd { gap: 14px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -11px; top: 50%; transform: translateY(-60%); font: 600 1.4rem var(--f-num); color: #d9b45f; }
.cd__n { font-weight: 600; }
.sec--countdown .link--cal { color: #e9c977; }

/* Details: dark cards with gold edges and gold icons */
.dts { gap: 12px; }
.dt { border-color: rgb(217 180 95 / .55); }
.dt__ic { border: 1px solid rgb(217 180 95 / .5); border-radius: 12px; }
.dt__v { color: #f1e6cc; }
.dt__v small { color: #cbbd9a; }
.link { color: #e9c977; }
.btn--cta { font-weight: 700; }

/* RSVP and wishes */
.card.form, .rsvp-done, .wcomp { color: #f1e6cc; }
.field em, .field small { color: #a99c7c; }
.wish { color: #f1e6cc; }
.wish__ago { color: #a99c7c; }
.wish__av { border: 1px solid rgb(217 180 95 / .6); }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.wishes__n { color: #cbbd9a; }
.tag--no { background: #2a2214; color: #e3c06a; }

/* Gallery */
.sec--gallery { border-top: 1px solid rgb(217 180 95 / .25); border-bottom: 1px solid rgb(217 180 95 / .25); }
.hint { color: #a99c7c; }

/* Closing: the cap, an italic gold "Terima Kasih" and gold light in the corners */
.sec--closing { padding: 40px 22px 120px; }
.sec--closing::before { content: ""; display: block; width: 56px; height: 34px; margin: 0 auto 6px; background: url(../img/g01-cap.svg) center / contain no-repeat; }
.closing__t span { font: italic 600 2.3rem/1.15 var(--f-head); background: linear-gradient(180deg, #fbe9b0, #e3c06a 50%, #b8913e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closing__p, .closing__sign { color: #e9dec2; }
.made { color: #cbbd9a; }

/* ---------- The caps and books, the filigree and the gold light from the mockup ---------- */
.o { filter: drop-shadow(0 8px 14px rgb(0 0 0 / .6)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.sec--countdown .deco { z-index: 3; }
.sec--countdown { padding-bottom: 96px; }
.sec--countdown .o1 { right: -16px; bottom: 0; width: 38vw; max-width: 150px; aspect-ratio: var(--ar-caps); background-image: url(../img/st-caps.webp); }
.sec--details .o1 { left: -6px; top: 40px; width: 16vw; max-width: 64px; aspect-ratio: var(--ar-filigree-l); background-image: url(../img/st-filigree-l.webp); opacity: .8; }
.sec--details .o2 { right: -6px; top: 40px; width: 16vw; max-width: 62px; aspect-ratio: var(--ar-filigree-r); background-image: url(../img/st-filigree-r.webp); opacity: .8; }
.sec--closing .o1 { left: 0; bottom: 0; width: 56vw; max-width: 220px; aspect-ratio: var(--ar-swoosh-l); background-image: url(../img/swoosh-l.webp); filter: none; }
.sec--closing .o2 { right: 0; bottom: 0; width: 56vw; max-width: 220px; aspect-ratio: var(--ar-swoosh-r); background-image: url(../img/swoosh-r.webp); filter: none; }

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

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