/* K10 · Racing Champion: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/montserrat-latin-900-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: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-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: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-trophy: 200 / 309; --sx-trophy: 72.25; --sy-trophy: 136.25; --sw-trophy: 139.75; --ar-helmet: 220 / 171; --sx-helmet: 23.5; --sy-helmet: 343.0; --sw-helmet: 198.5; --ar-car: 320 / 233; --sx-car: 895.0; --sy-car: 282.5; --sw-car: 227.0; --ar-cone: 140 / 240; --sx-cone: 70.0; --sy-cone: 1184.25; --sw-cone: 78.0; }
.phw { --cx0: 0; --cy0: 48; --cw: 505; --ch: 482; }

/* K10 · Racing Champion: a blurred stadium, angular navy and red plates in heavy italic, checkered flags and gold laurels, a red countdown panel,
   slanted section labels and a navy gallery band. The trophy, helmet, race car, tyres and cone come from the mockup. */
:root {
  --bg: #f3f5fa; --bg2: #e4e9f4; --ink: #14214a; --muted: #46527a; --accent: #e3262e; --accent2: #0b2a6f;
  --line: rgb(20 33 74 / .14);
  --card: #fff; --card-line: #d5dcec; --card-shadow: 0 8px 20px rgb(20 33 74 / .1); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #ec343c, #b5121b); --btn-ink: #fff; --btn-line: #b5121b; --btn-radius: 10px; --btn-shadow: 0 6px 14px rgb(181 18 27 / .35);
  --f-display: "Montserrat", system-ui, sans-serif; --f-body: "Montserrat", system-ui, sans-serif; --f-head: "Montserrat", system-ui, sans-serif; --f-num: "Montserrat", system-ui, sans-serif;
  --name-size: 1.6rem; --name-weight: 900; --name-style: italic; --name-color: #fff;
  --head-size: 1.15rem; --head-weight: 900; --head-style: italic; --head-color: #14214a;
  --photo-radius: 18px; --photo-border: 4px solid #fff; --photo-shadow: 0 0 0 2px #c7d3ee, 0 16px 30px rgb(11 31 79 / .3);
  --stripes: repeating-linear-gradient(-55deg, rgb(11 42 111 / .035) 0 14px, transparent 14px 34px);
  --checker: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 12px 12px;
  --stadium: linear-gradient(180deg, rgb(243 245 250 / .55), rgb(243 245 250 / .9) 62%, #f3f5fa), url(../img/stadium.webp) center top / cover, #dfe5f1;
  --gate-bg: var(--stadium); --gate-ink: #14214a; --guest-bg: #fff; --guest-line: #c7d3ee;
  --cd-title: #fff; --cd-num: #fff; --cd-label: #d7dbe6; --cd-tile: linear-gradient(180deg, #23273a, #0b0d14); --cd-tile-border: 1.5px solid #5b6070; --cd-tile-radius: 8px; --cd-tile-shadow: none;
  --dt-ic: #e3262e; --dt-ic-bg: #fde8e9; --dt-label: #46527a; --av-bg: #ffe7b0; --av-ink: #b5121b;
  --field-line: #c7d3ee;
  --map-bg: #fff; --map-ink: #0b2a6f; --map-line: #c7d3ee;
  --gal-border: 3px solid #fff; --gal-radius: 12px; --gal-shadow: 0 8px 16px rgb(0 0 0 / .3);
}
body { background: #e9edf6; }
.inv { background: var(--stripes), #f3f5fa; }

/* Hero on the stadium */
.sec--hero { background: var(--stadium); padding-bottom: 44px; }
.phw--cover { --pw: min(60vw, 240px); margin: 12px auto 16px; }
.phw--hero { --pw: min(68vw, 270px); margin: 10px auto 16px; }

/* Title: "UNDANGAN" on a navy plate between laurels, "KHITANAN" on a red plate, the tag pill, the two-tone name plate */
.ttl__kicker { position: relative; margin-top: 2px; }
.ttl__kicker b { position: relative; z-index: 0; display: block; width: max-content; margin: 0 auto; font: italic 900 1.15rem/1.2 var(--f-display); color: #fff; text-transform: uppercase; letter-spacing: .08em; padding: 5px 24px 4px; }
.ttl__kicker b::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); background: linear-gradient(180deg, #17357e, #0b1f4f); border: 2px solid #c7d3ee; border-radius: 3px; }
.ttl__kicker b:last-child { font-size: 2.55rem; letter-spacing: .01em; padding: 6px 22px 4px; margin-top: -2px;
  text-shadow: 2px 2px 0 #7a0a10, 0 4px 0 #3c0508; }
.ttl__kicker b:last-child::before { background: linear-gradient(180deg, #f0363e, #b5121b 70%, #8f0c13); border: 2.5px solid #fff; box-shadow: 0 0 0 2.5px #14214a, 0 10px 18px rgb(0 0 0 / .3); }
.ttl__kicker::before, .ttl__kicker::after { content: ""; position: absolute; top: -14px; width: 58px; aspect-ratio: 70 / 40; background: url(../img/k10-laurel.svg) center / contain no-repeat; }
.ttl__kicker::before { left: 50%; margin-left: -132px; transform: scaleX(-1) rotate(10deg); }
.ttl__kicker::after { right: 50%; margin-right: -132px; transform: rotate(10deg); }
.ttl__tag { margin-top: 8px; }
.ttl .ttl__tag span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 6px; background: linear-gradient(180deg, #ec343c, #b5121b); color: #fff;
  font: italic 900 .78rem/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .08em; border: 2px solid #fff; box-shadow: 0 0 0 2px #b5121b; }
.ttl__tag span::before, .ttl__tag span::after { content: ""; width: 18px; height: 12px; background: var(--checker); background-size: 6px 6px; border: 1px solid #fff; }
.ttl .lead { color: #2b3760; font-weight: 600; font-size: .92rem; text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.ttl__name { position: relative; margin: 14px 0 4px; }
.ttl__name span { position: relative; z-index: 0; padding: 8px 30px 9px; line-height: 1.04; }
.ttl__name span::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); background: linear-gradient(180deg, #17357e, #0b1f4f); border: 2px solid #c7d3ee; border-radius: 4px;
  box-shadow: 5px 5px 0 #e3262e, 0 14px 24px rgb(11 31 79 / .35); }
.n1, .n2 { display: block; }
.n1 { font-size: .82em; letter-spacing: .01em; }
.n2 { font-size: 1.05em; background: linear-gradient(180deg, #fff3a8, #ffd23f 45%, #f2a516); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em; }
.ttl__name::before, .ttl__name::after { content: ""; position: absolute; top: 50%; width: 34px; aspect-ratio: 64 / 52; background: url(../img/k10-flag.svg) center / contain no-repeat; }
.ttl__name::before { left: -24px; transform: translateY(-20%) scaleX(-1) rotate(-12deg); }
.ttl__name::after { right: -24px; transform: translateY(-20%) rotate(-12deg); }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 6px 16px; border-radius: 8px; background: #0b1f4f; color: #fff; font-weight: 600; }
.guest { box-shadow: var(--card-shadow); }

/* Slanted section labels: red, or navy for RSVP and wishes; a checkered block leads in */
.h-sec__t { position: relative; z-index: 0; padding: 7px 22px 6px; color: #fff; }
.h-sec__t::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: 3px; background: linear-gradient(180deg, #ec343c, #b5121b); box-shadow: 0 6px 12px rgb(181 18 27 / .25); }
.h-sec__t::after { content: ""; position: absolute; right: 100%; top: 50%; width: 30px; height: 18px; margin: -9px 10px 0 0; background: var(--checker); background-size: 6px 6px; transform: skewX(-14deg); }
.sec--rsvp .h-sec__t::before, .sec--wishes .h-sec__t::before { background: linear-gradient(180deg, #17357e, #0b1f4f); box-shadow: 0 6px 12px rgb(11 31 79 / .25); }
.h-sec__t { margin-left: 30px; }

/* Countdown: a red panel with dark tiles between checkered flags */
.sec--countdown { padding-top: 26px; }
.cd-box { position: relative; padding: 0 12px 16px; background: linear-gradient(180deg, #ec343c, #b5121b); border: 2px solid #fff; border-radius: 14px; box-shadow: 0 0 0 2px #b5121b, 0 12px 24px rgb(0 0 0 / .22); }
.cd-box::before, .cd-box::after { content: ""; position: absolute; bottom: -14px; width: 50px; aspect-ratio: 64 / 52; background: url(../img/k10-flag.svg) center / contain no-repeat; }
.cd-box::before { left: -18px; transform: scaleX(-1) rotate(-8deg); } .cd-box::after { right: -18px; transform: rotate(-8deg); }
.cd__head { margin: 0 auto 12px; }
.cd__t { display: inline-flex; margin-top: -2px; padding: 4px 18px 5px; background: #0b1f4f; border-radius: 0 0 10px 10px; font: italic 900 .95rem/1.3 var(--f-head); color: #fff; }
.cd__n { font: italic 900 1.9rem/1.05 var(--f-num); }
.cd__l { font-weight: 600; font-size: .72rem; }
.sec--countdown .link--cal { color: #0b2a6f; }

/* Greeting with the name banner */
.sec--greeting .ttl__salam, .lead.salam { font: italic 800 1rem/1.5 var(--f-body); color: #14214a; }
.greet__name span { position: relative; z-index: 0; padding: 6px 24px; font: italic 900 1.1rem/1.2 var(--f-display); }
.greet__name span::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); background: linear-gradient(180deg, #17357e, #0b1f4f); border-radius: 3px; }
.greet__name .n1, .greet__name .n2 { display: inline; font-size: 1em; }
.greet__name .n1 { color: #fff; }
.greet__name::before, .greet__name::after { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 14px; background: var(--checker); background-size: 7px 7px; transform: skewX(-14deg); }
.greet__name::before { margin-right: 10px; } .greet__name::after { margin-left: 10px; }

/* Details: white cards with red icon tiles */
.dt__ic { border-radius: 12px; }
.dt__l { font-weight: 600; }
.dt__v strong { font-weight: 800; }

/* Gallery: a navy band */
.sec--gallery { background: repeating-linear-gradient(-55deg, rgb(255 255 255 / .05) 0 14px, transparent 14px 34px), linear-gradient(160deg, #17357e, #0b1f4f 70%); color: #fff;
  border-top: 4px solid #e3262e; border-bottom: 4px solid #e3262e; }
.sec--gallery .h-sec__sub, .sec--gallery .hint { color: #c7d3ee; font-style: italic; }
.sec--gallery .h-sec__t::after { background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 6px 6px; }

/* Wishes */
.wcomp { border-radius: 14px; }
.wish { box-shadow: 0 4px 12px rgb(20 33 74 / .06); }

/* Closing: a red band with checkered strips, the trophy above a laurelled "Terima Kasih" */
.sec--closing { background: linear-gradient(180deg, #ec343c, #b5121b 70%, #8f0c13); color: #fff; padding-top: 120px; padding-bottom: 70px; }
.sec--closing::before, .sec--closing::after { content: ""; position: absolute; left: 0; right: 0; height: 24px; background: var(--checker); }
.sec--closing::before { top: 0; } .sec--closing::after { bottom: 0; }
.closing__t span { display: inline-flex; align-items: center; gap: 10px; font: italic 900 2.1rem/1.1 var(--f-display); color: #fff; text-transform: uppercase; text-shadow: 2px 3px 0 #6e070c; }
.closing__t span::before, .closing__t span::after { content: ""; width: 44px; aspect-ratio: 70 / 40; background: url(../img/k10-laurel.svg) center / contain no-repeat; }
.closing__t span::before { transform: scaleX(-1); }
.closing__p, .closing__sign { color: #fff; }
.made { color: #fff; }

/* ---------- Car, cone, helmet and trophy (the photo already holds a trophy and a helmet) ---------- */
.o { filter: drop-shadow(0 8px 12px rgb(11 31 79 / .3)); }
.gate__in .o1, .side__in .o1 { right: -44px; top: 168px; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-car); background-image: url(../img/st-car.webp); }
.gate__in .o2, .side__in .o2 { left: 2px; bottom: 4px; width: 11vw; max-width: 44px; aspect-ratio: var(--ar-cone); background-image: url(../img/st-cone.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -46px; top: 196px; width: 42vw; max-width: 168px; aspect-ratio: var(--ar-car); background-image: url(../img/st-car.webp); }
.sec--details .o1 { right: -14px; top: 6px; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-helmet); background-image: url(../img/st-helmet.webp); transform: scaleX(-1); }
.sec--wishes .o1 { right: 4px; top: 26px; width: 12vw; max-width: 48px; aspect-ratio: var(--ar-cone); background-image: url(../img/st-cone.webp); }
.sec--closing .deco { z-index: 1; }
.sec--closing .o1 { left: 50%; top: 30px; width: 20vw; max-width: 80px; margin-left: max(-10vw, -40px); aspect-ratio: var(--ar-trophy); background-image: url(../img/st-trophy.webp); }

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

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