/* K07 · Little Superhero: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lilita-one-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: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-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: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-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: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/nunito-latin-900-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-hero-sil: 300 / 290; --sx-hero-sil: 945.0; --sy-hero-sil: 275.5; --sw-hero-sil: 165.0; --ar-emblem: 260 / 252; --sx-emblem: 946.75; --sy-emblem: 1172.5; --sw-emblem: 141.25; }
.phw { --cx0: 0; --cy0: 60; --cw: 440; --ch: 540; }

/* K07 · Little Superhero: comic sky blue, red and yellow, sunburst rays, city skyline, lightning, POW! and BAM!; the hero silhouette and the emblem come from the mockup. */
:root {
  --bg: #eaf4ff; --bg2: #d7e9ff; --ink: #0e2a6e; --muted: #33508f; --accent: #e3262e; --accent2: #ffd23f;
  --line: rgb(14 42 110 / .2);
  --card: #fff; --card-line: #0e2a6e; --card-shadow: 5px 5px 0 #0e2a6e; --radius: 16px;
  --btn-bg: linear-gradient(180deg, #f2393f, #cf1c24); --btn-ink: #fff; --btn-border: 3px solid #fff; --btn-shadow: 0 0 0 3px #0e2a6e, 5px 6px 0 3px #0e2a6e;
  --f-display: "Lilita One", "Impact", system-ui, sans-serif; --f-body: "Nunito", system-ui, sans-serif; --f-head: "Lilita One", "Impact", system-ui, sans-serif; --f-num: "Lilita One", "Impact", system-ui, sans-serif;
  --name-size: 1.7rem; --name-weight: 400; --name-color: #0e2a6e;
  --head-size: 1.6rem; --head-weight: 400; --head-color: #0e2a6e; --head-ink: #0e2a6e;
  --photo-radius: 20px; --photo-border: 4px solid #fff; --photo-shadow: 0 0 0 3px #0e2a6e, 8px 8px 0 3px #e3262e;
  --gate-bg: url(../img/k07-city.svg) bottom / 100% 90px no-repeat, url(../img/k07-rays.svg) center / cover, #2f86e8;
  --gate-ink: #fff; --guest-bg: #fff; --guest-line: #0e2a6e;
  --cd-title: #fff; --cd-num: #fff; --cd-label: #d7e4ff;
  --cd-tile: linear-gradient(180deg, #17398f, #0e2a6e); --cd-tile-border: 2px solid #8fb8ff; --cd-tile-radius: 12px; --cd-tile-shadow: 3px 3px 0 #091d4d;
  --dt-ic: #e3262e; --dt-ic-bg: transparent; --dt-label: #0e2a6e; --av-bg: #ffd23f; --av-ink: #0e2a6e;
  --field-line: #0e2a6e;
}
body { background: url(../img/k07-dots-b.svg), #eaf4ff; }
.inv { background: transparent; }
.card, .dt, .wish, .wcomp, .note { border: 3px solid #0e2a6e; }
.guest { color: #0e2a6e; border-width: 3px; box-shadow: 5px 5px 0 #0e2a6e; }
.btn { font-weight: 900; }

/* Hero on the comic sky */
.sec--hero { background: url(../img/k07-city.svg) bottom / 100% 80px no-repeat, url(../img/k07-rays.svg) center / cover, #2f86e8; color: #fff; padding-bottom: 96px; }
.phw--cover { --pw: min(66vw, 260px); margin: 6px auto 18px; }
.phw--hero { --pw: min(74vw, 290px); margin: 4px auto 20px; }

/* Title: white "Undangan", yellow "Khitanan" on a red starburst, the name on a yellow slanted banner */
.ttl__kicker { position: relative; padding: 4px 0 8px; }
.ttl__kicker b { display: block; transform: skewX(-8deg) rotate(-3deg); }
.ttl__kicker b:first-child { font: 400 2.6rem/1 var(--f-display); color: #fff;
  text-shadow: 3px 0 0 #0e2a6e, -3px 0 0 #0e2a6e, 0 3px 0 #0e2a6e, 0 -3px 0 #0e2a6e, 2px 2px 0 #0e2a6e, -2px 2px 0 #0e2a6e, 2px -2px 0 #0e2a6e, -2px -2px 0 #0e2a6e, 4px 5px 0 #0e2a6e; }
.ttl__kicker b:last-child { position: relative; z-index: 1; font: 400 3.4rem/1.05 var(--f-display); padding: 14px 26px 18px; margin-top: -4px; }
.ttl__kicker b:last-child::before { content: ""; position: absolute; inset: -8px 2px; z-index: -1; background: url(../img/k07-burst.svg) center / 100% 100% no-repeat; }
.ttl__kicker b:last-child { color: #ffd23f; background: none; text-shadow: 3px 0 0 #0e2a6e, -3px 0 0 #0e2a6e, 0 3px 0 #0e2a6e, 0 -3px 0 #0e2a6e, 2px 2px 0 #0e2a6e, -2px 2px 0 #0e2a6e, 2px -2px 0 #0e2a6e, -2px -2px 0 #0e2a6e, 4px 5px 0 #0e2a6e; }
.ttl .lead { color: #fff; font-weight: 800; font-size: .95rem; text-shadow: 0 2px 0 rgb(14 42 110 / .55); max-width: 320px; }
.ttl__name { position: relative; margin: 14px 0 4px; }
.ttl__name span { position: relative; padding: 8px 22px 6px; background: #ffd23f; border: 3px solid #0e2a6e; transform: skewX(-10deg); box-shadow: 5px 5px 0 #e3262e, 8px 8px 0 #0e2a6e; font-size: clamp(1.25rem, 6.4vw, 1.75rem); }
.ttl__name::before, .ttl__name::after { content: ""; position: absolute; z-index: 2; width: 22px; height: 22px; background: url(../img/k07-star.svg) center / contain no-repeat; }
.ttl__name::before { left: -14px; top: -8px; } .ttl__name::after { right: -16px; top: auto; bottom: -6px; width: 17px; height: 17px; }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 6px 16px; background: #fff; border: 3px solid #0e2a6e; border-radius: 12px; box-shadow: 4px 4px 0 #0e2a6e; color: #0e2a6e; font-weight: 900; }

/* Details: a white card with a yellow edge */
.sec--details { padding-top: 34px; }
.dts { gap: 0; background: #fff; border: 4px solid #ffd23f; border-radius: 20px; padding: 6px 16px; box-shadow: 0 0 0 3px #0e2a6e, 6px 7px 0 3px #0e2a6e; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 2px dashed rgb(14 42 110 / .25); }
.dt__ic .ic { width: 30px; height: 30px; stroke-width: 2; }
.dt__l { font-weight: 900; }
.dt__v strong { font-weight: 800; }
.btn--map { --map-bg: #fff; --map-ink: #0e2a6e; --map-line: #0e2a6e; border-width: 3px; }
.link, .link--map, .link--cal { color: #1f5fcf; }

/* Countdown and the invitation line on a red halftone band with POW! and BAM! */
.sec--countdown, .sec--prayer { background: url(../img/k07-dots.svg), linear-gradient(180deg, #ea2e35, #c8102e); color: #fff; }
.sec--countdown { clip-path: polygon(0 16px, 100% 0, 100% 100%, 0 100%); padding-top: 46px; }
.cd__head { margin-bottom: 18px; }
.cd__t { display: inline-flex; font: 400 1.5rem/1 var(--f-display); background: #e3262e; padding: 8px 22px 6px; border: 3px solid #fff; transform: skewX(-10deg); box-shadow: 4px 4px 0 #0e2a6e; }
.cd { gap: 14px; }
.cd__n { font-size: 2.3rem; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -12px; top: 50%; transform: translateY(-58%); font: 400 1.8rem var(--f-display); color: #fff; }
.sec--countdown .link--cal { color: #fff; }
.sec--prayer { padding: 10px 22px 70px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 100%); }
.prayer { font: 800 1rem/1.6 var(--f-body); color: #fff; quotes: none; text-shadow: 0 2px 0 rgb(14 42 110 / .5); }
.sec--prayer .orn--div { display: none; }

/* Section headings on yellow (or red) slanted banners */
.h-sec__t { background: #ffd23f; padding: 6px 20px 4px; border: 3px solid #0e2a6e; transform: skewX(-10deg); box-shadow: 4px 4px 0 #0e2a6e; }
.h-sec__ic { color: #0e2a6e; }
.sec--gallery { background: url(../img/k07-dots-b.svg), #fff; }
.gallery__item { border: 3px solid #fff; border-radius: 16px; box-shadow: 0 0 0 3px #0e2a6e, 5px 6px 0 3px #0e2a6e; }
.sec--wishes { background: url(../img/k07-dots.svg), linear-gradient(160deg, #17398f, #0e2a6e 60%, #c8102e 140%); color: #fff; }
.sec--wishes .h-sec__sub, .sec--wishes .wishes__n { color: #fff; font-weight: 800; }
.sec--wishes .wish, .sec--wishes .wcomp { color: #0e2a6e; }
.wish__ago { color: #33508f; }
.btn--send { padding: 12px 16px; }
.wish__av { border: 2px solid #0e2a6e; font-family: var(--f-display); }
.sec--rsvp { background: url(../img/k07-dots-b.svg), #eaf4ff; }

/* Closing on the sky with the city */
.sec--closing { background: url(../img/k07-city.svg) bottom / 100% 90px no-repeat, url(../img/k07-rays.svg) center / cover, #2f86e8; color: #fff; padding-bottom: 170px; }
.closing__t span { font: 400 2.4rem/1.1 var(--f-display); color: #ffd23f; transform: skewX(-8deg);
  text-shadow: 3px 0 0 #0e2a6e, -3px 0 0 #0e2a6e, 0 3px 0 #0e2a6e, 0 -3px 0 #0e2a6e, 2px 2px 0 #0e2a6e, -2px 2px 0 #0e2a6e, 2px -2px 0 #0e2a6e, -2px -2px 0 #0e2a6e, 4px 5px 0 #0e2a6e; }
.closing__p, .closing__sign, .made { color: #fff; font-weight: 800; text-shadow: 0 2px 0 rgb(14 42 110 / .5); }

/* ---------- POW!, BAM!, bolts; the hero silhouette and the emblem from the mockup ---------- */
.o::after { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.25rem/1 var(--f-display); transform: rotate(-10deg); }
.gate__in .o1, .side__in .o1 { left: -8px; top: 10px; width: 13vw; max-width: 50px; aspect-ratio: 26 / 40; background-image: url(../img/k07-bolt.svg); transform: rotate(-16deg); }
.gate__in .o2, .side__in .o2 { right: -6px; top: 40px; width: 11vw; max-width: 42px; aspect-ratio: 26 / 40; background-image: url(../img/k07-bolt.svg); transform: rotate(14deg); }
.gate__in .o3, .side__in .o3 { right: -18px; top: 236px; width: 28vw; max-width: 110px; aspect-ratio: var(--ar-hero-sil); background-image: url(../img/st-hero-sil.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: 4px; top: 16px; width: 12vw; max-width: 46px; aspect-ratio: 26 / 40; background-image: url(../img/k07-bolt.svg); transform: rotate(-16deg); }
.sec--hero .o2 { right: -14px; top: 290px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-hero-sil); background-image: url(../img/st-hero-sil.webp); }
.sec--prayer .o1 { left: -6px; bottom: 6px; width: 26vw; max-width: 104px; aspect-ratio: 200 / 140; background-image: url(../img/k07-pow.svg); }
.sec--prayer .o1::after { content: "POW!"; color: #e3262e; text-shadow: 2px 2px 0 #0e2a6e; }
.sec--prayer .o2 { right: -6px; bottom: 2px; width: 26vw; max-width: 104px; aspect-ratio: 200 / 140; background-image: url(../img/k07-bam.svg); }
.sec--prayer .o2::after { content: "BAM!"; color: #1f5fcf; transform: rotate(8deg); text-shadow: 2px 2px 0 #fff; }
.sec--gallery .o1 { right: 4px; top: 10px; width: 10vw; max-width: 40px; aspect-ratio: 26 / 40; background-image: url(../img/k07-bolt.svg); transform: rotate(14deg); }
.sec--closing .o1 { left: 50%; bottom: 66px; width: 28vw; max-width: 110px; margin-left: min(-14vw, -55px); aspect-ratio: var(--ar-emblem); background-image: url(../img/st-emblem.webp); filter: drop-shadow(0 6px 0 rgb(14 42 110 / .4)); }

@media (min-width: 1024px) { .phw--side { --pw: min(20vw, 250px); } .side__in .o3 { right: 6%; } }