/* G09 · Kids Graduation Fun: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-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: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-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: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-boy: 220 / 258; --sx-boy: 33.75; --sy-boy: 544.25; --sw-boy: 188.25; --ar-girl: 220 / 252; --sx-girl: 895.5; --sy-girl: 546.0; --sw-girl: 190.75; --ar-school: 340 / 303; --sx-school: 798.0; --sy-school: 116.25; --sw-school: 249.75; --ar-books-cap: 230 / 157; --sx-books-cap: 898.75; --sy-books-cap: 355.0; --sw-books-cap: 195.75; --ar-star: 110 / 109; --sx-star: 741.25; --sy-star: 69.0; --sw-star: 70.0; --ar-bunting-r: 200 / 109; --sx-bunting-r: 955.25; --sy-bunting-r: 46.0; --sw-bunting-r: 166.75; --ar-books-l: 150 / 114; --sx-books-l: 13.5; --sy-books-l: 985.0; --sw-books-l: 116.5; --ar-bush-l: 220 / 134; --sx-bush-l: 0.0; --sy-bush-l: 1310.0; --sw-bush-l: 151.25; --ar-bush-r: 170 / 98; --sx-bush-r: 980.0; --sy-bush-r: 1320.0; --sw-bush-r: 142.0; }
.phw { --cx0: 20; --cy0: 50; --cw: 405; --ch: 378; }

/* G09 · Kids Graduation Fun: sky blue with clouds, sunny yellow and orange; the little graduate in a rounded frame with a name tag,
   a bubbly "Undangan Wisuda", the school on a blue ribbon, yellow countdown tiles; the school, cartoon graduates, books, stars and bunting from the mockup. */
:root {
  --bg: #fff8e8; --bg2: #ffeec2; --ink: #16306b; --muted: #3f5486; --accent: #f26b0f; --accent2: #2f6fd6;
  --line: rgb(47 111 214 / .2);
  --card: #ffffff; --card-line: #e3ecfa; --card-shadow: 0 10px 22px rgb(47 111 214 / .12); --radius: 18px;
  --btn-bg: linear-gradient(180deg, #ff9a2e, #f26b0f); --btn-ink: #fff; --btn-line: transparent; --btn-radius: 999px; --btn-shadow: 0 5px 0 #c94f05, 0 10px 18px rgb(242 107 15 / .3);
  --f-display: "Fredoka", "Nunito", system-ui, sans-serif; --f-body: "Nunito", system-ui, sans-serif; --f-head: "Fredoka", system-ui, sans-serif; --f-num: "Fredoka", system-ui, sans-serif;
  --name-font: "Fredoka", system-ui, sans-serif; --name-size: 1.15rem; --name-weight: 700; --name-color: #16306b;
  --head-size: 1.45rem; --head-weight: 700; --head-color: #fff; --head-ink: #fff;
  --photo-radius: 26px; --photo-border: 5px solid #fff; --photo-shadow: 0 0 0 3px #7fb2ff, 0 14px 26px rgb(47 111 214 / .25);
  --sky: url(../img/g09-cloud.svg) 6% 96px / 110px auto no-repeat, url(../img/g09-cloud.svg) 98% 40px / 90px auto no-repeat, linear-gradient(180deg, #a9d4ff, #d6ecff 55%, #fff8e8);
  --gate-bg: var(--sky); --guest-bg: #fff; --guest-line: #d5e6ff;
  --cd-title: #16306b; --cd-num: #f26b0f; --cd-label: #7a5a10;
  --cd-tile: linear-gradient(180deg, #ffe680, #ffd23f); --cd-tile-border: 2px solid #fff; --cd-tile-radius: 14px; --cd-tile-shadow: 0 4px 0 #f0b400;
  --dt-ic: #f26b0f; --dt-ic-bg: transparent; --dt-label: #16306b; --av-bg: #ffe2c2; --av-ink: #f26b0f;
  --field-line: #d5e6ff; --map-ink: #2f6fd6; --map-line: #cfe0ff;
  --gal-border: 4px solid #fff; --gal-radius: 16px; --gal-shadow: 0 8px 16px rgb(47 111 214 / .2);
}
body { background: #fff3d6; }
.inv { background: linear-gradient(180deg, #d6ecff, #eaf5ff 18%, #fff8e8 40%, #fff3d6); }

/* Hero on the sky with clouds */
.sec--hero { background: var(--sky); padding-bottom: 30px; }
.phw--cover { --pw: min(62vw, 240px); margin: 6px auto 0; }
.phw--hero { --pw: min(66vw, 260px); margin: 6px auto 0; }
.ttl { position: relative; z-index: 2; gap: 4px; }

/* The name tag over the photo's foot */
.ttl__name { position: relative; z-index: 3; margin: -26px 0 0; }
.ttl__name span { padding: 7px 24px 4px; background: #fff; border: 3px solid #ffd23f; border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 0 #fff; }
.ttl__sub { margin-top: -4px; }
.ttl__sub span { font: 700 .8rem/1.2 var(--f-body); color: #3f5486; background: #fff; padding: 2px 22px 8px; border: 3px solid #ffd23f; border-top: 0; border-radius: 0 0 16px 16px; }

/* "Undangan Wisuda": bubbly, outlined, with a 3D shadow */
.ttl__kicker { margin-top: 10px; }
.ttl__kicker b { display: block; font: 700 2.6rem/1 var(--f-display); color: #1f4fa8;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 6px 0 #a9c8f5; }
.ttl__kicker b:last-child { font-size: 3.6rem; color: #f26b0f;
  text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 7px 0 #c94f05; }
.ttl__facts { gap: 8px; margin-top: 6px; }
.ttl__facts span:first-child { padding: 6px 40px 10px; background: url(../img/g09-banner.svg) center / 100% 100% no-repeat; font: 700 1.05rem/1.2 var(--f-display); color: #fff; }
.ttl__facts span + span { font: 700 .82rem/1.2 var(--f-body); color: #16306b; background: #ffe680; padding: 5px 16px; border-radius: 999px; border: 2px solid #fff; }
.ttl .lead { color: #16306b; font-weight: 700; font-size: .92rem; max-width: 300px; }
.gate__date, .side__date { display: inline-block; margin-top: 14px; padding: 4px 16px; border-radius: 999px; background: #2f6fd6; color: #fff; font-weight: 800; }
.guest { box-shadow: var(--card-shadow); border-width: 2px; }

/* Countdown */
.sec--countdown { padding-top: 18px; }
.cd__t { font: 700 1.15rem/1.3 var(--f-head); color: #16306b; }
.cd__ic { color: #f26b0f; }
.cd__n { font-weight: 700; font-size: 2.1rem; }
.cd__l { font-weight: 800; }
.sec--countdown .link--cal { color: #2f6fd6; }

/* Headings on a blue ribbon or a yellow pill */
.h-sec__t { padding: 7px 40px 10px; background: url(../img/g09-banner.svg) center / 100% 100% no-repeat; }
.sec--gallery .h-sec__t, .sec--wishes .h-sec__t { color: #16306b; background: #ffe680; border: 3px solid #fff; border-radius: 999px; padding: 4px 22px; box-shadow: 0 4px 0 #f0b400; }
.h-sec__ic { color: #f26b0f; }
.sec--gallery .h-sec__t::before, .sec--gallery .h-sec__t::after, .sec--wishes .h-sec__t::before, .sec--wishes .h-sec__t::after {
  content: ""; position: absolute; top: -6px; width: 24px; height: 24px; background: url(../img/g09-rays.svg) center / contain no-repeat; }
.sec--gallery .h-sec__t, .sec--wishes .h-sec__t { position: relative; }
.sec--gallery .h-sec__t::before, .sec--wishes .h-sec__t::before { left: -26px; transform: rotate(-30deg); }
.sec--gallery .h-sec__t::after, .sec--wishes .h-sec__t::after { right: -26px; transform: rotate(30deg); }

/* Details: a white card */
.sec--details { padding-top: 40px; }
.dts { gap: 0; background: #fff; border: 2px solid #e3ecfa; border-radius: 22px; padding: 6px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 2px dotted #e3ecfa; }
.dt__l { font-weight: 800; }
.dt__v strong { font-weight: 800; }
.btn--cta, .btn--primary { font-weight: 800; }
.link, .link--map, .link--cal { color: #2f6fd6; }

/* Wishes */
.wish { border: 2px solid #e8f0fd; }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.wish:nth-child(3n + 2) .wish__av { background: #d9ecff; color: #2f6fd6; }
.wish:nth-child(3n) .wish__av { background: #ffe4ec; color: #e0457b; }
.wcomp { border: 2px solid #e8f0fd; }

/* Closing on grass with bushes */
.sec--closing { background: linear-gradient(180deg, #fff3d6, #e9f6d6 60%, #cfeab0); padding: 46px 22px 96px; }
.sec--closing::before { content: ""; display: block; width: 60px; height: 60px; margin: 0 auto 4px; background: url(../img/g09-star.svg) center / contain no-repeat; }
.closing__t span { font: 700 2.2rem/1.1 var(--f-display); color: #f26b0f; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 0 5px 0 #c94f05; }
.closing__p { color: #16306b; font-weight: 700; }
.closing__sign { color: #2f6fd6; font-weight: 800; }

/* ---------- The school, cartoon graduates, books, stars and bunting from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(30 60 120 / .18)); }
.gate__in > .deco, .side__in > .deco { z-index: 1; }
.gate__in .o1, .side__in .o1 { right: -10px; top: -26px; width: 44vw; max-width: 176px; aspect-ratio: var(--ar-bunting-r); background-image: url(../img/st-bunting-r.webp); }
.gate__in .o2, .side__in .o2 { left: -6px; top: 120px; width: 15vw; max-width: 60px; aspect-ratio: var(--ar-star); background-image: url(../img/st-star.webp); }
.gate__in .o3, .side__in .o3 { right: -14px; top: 210px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-books-cap); background-image: url(../img/st-books-cap.webp); }
.sec--hero .o1 { right: -10px; top: -6px; width: 44vw; max-width: 176px; aspect-ratio: var(--ar-bunting-r); background-image: url(../img/st-bunting-r.webp); }
.sec--hero .o2 { left: -4px; top: 150px; width: 15vw; max-width: 60px; aspect-ratio: var(--ar-star); background-image: url(../img/st-star.webp); }
.sec--hero .o3 { right: -14px; top: 240px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-books-cap); background-image: url(../img/st-books-cap.webp); }
.sec--countdown .o1 { left: 50%; bottom: 8px; width: 64vw; max-width: 250px; margin-left: max(-32vw, -125px); aspect-ratio: var(--ar-school); background-image: url(../img/st-school.webp); }
.sec--countdown { padding-bottom: 210px; }
.sec--details .deco { z-index: 3; }
.sec--details .o1 { left: -10px; top: -8px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-boy); background-image: url(../img/st-boy.webp); }
.sec--details .o2 { right: -10px; top: -8px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-girl); background-image: url(../img/st-girl.webp); }
.sec--details .h-sec { margin-top: 86px; }
.sec--wishes .o1 { left: -6px; top: 4px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-books-l); background-image: url(../img/st-books-l.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-bush-l); background-image: url(../img/st-bush-l.webp); }
.sec--closing .o2 { right: 0; bottom: 0; width: 34vw; max-width: 136px; aspect-ratio: var(--ar-bush-r); background-image: url(../img/st-bush-r.webp); }

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

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