/* K08 · Astronaut Adventure: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/exo-2-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: "Exo 2"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/exo-2-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: "Exo 2"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/exo-2-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: "Exo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/exo-2-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: "Sacramento"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sacramento-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; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-shuttle: 160 / 309; --sx-shuttle: 19.25; --sy-shuttle: 93.5; --sw-shuttle: 75.5; --ar-robot: 220 / 304; --sx-robot: 890.75; --sy-robot: 186.25; --sw-robot: 111.25; --ar-saturn: 220 / 138; --sx-saturn: 982.0; --sy-saturn: 79.25; --sw-saturn: 129.0; --ar-rocket: 150 / 176; --sx-rocket: 838.0; --sy-rocket: 88.75; --sw-rocket: 77.0; --ar-rover: 260 / 143; --sx-rover: 954.5; --sy-rover: 598.75; --sw-rover: 150.0; --ar-flag: 160 / 182; --sx-flag: 21.75; --sy-flag: 567.75; --sw-flag: 79.5; --ar-astro-sit: 220 / 225; --sx-astro-sit: 823.5; --sy-astro-sit: 1243.75; --sw-astro-sit: 98.5; --ar-earth: 400 / 269; }
.phw { --cx0: 0; --cy0: 50; --cw: 410; --ch: 426; }

/* K08 · Astronaut Adventure: deep-space navy with a starfield and nebula glow, a chrome title in an orbit ring, glowing glass panels with angled tabs.
   The shuttle, robot, Saturn, rocket, rover, flag, sitting astronaut and the Earth come from the mockup. */
:root {
  --bg: #070d2e; --bg2: #0d1a4d; --ink: #eef4ff; --muted: #b9caef; --accent: #5aa2ff; --accent2: #9fd0ff;
  --line: rgb(140 190 255 / .3);
  --card: rgb(13 30 90 / .62); --card-line: rgb(120 175 255 / .45); --card-shadow: 0 0 14px rgb(70 140 255 / .22); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #4b94ff, #1f5fe0); --btn-ink: #fff; --btn-line: #9fcbff; --btn-radius: 12px;
  --btn-shadow: 0 0 16px rgb(70 150 255 / .55), inset 0 1px 0 rgb(255 255 255 / .35);
  --f-display: "Exo 2", system-ui, sans-serif; --f-body: "Exo 2", system-ui, sans-serif; --f-head: "Exo 2", system-ui, sans-serif; --f-num: "Exo 2", system-ui, sans-serif;
  --f-script: "Sacramento", cursive;
  --name-size: clamp(1.15rem, 5.4vw, 1.5rem); --name-weight: 700; --name-color: #fff;
  --head-size: 1.1rem; --head-weight: 700; --head-color: #fff;
  --photo-radius: 22px; --photo-border: 2px solid #8cc4ff; --photo-shadow: 0 0 0 5px rgb(60 120 255 / .16), 0 0 28px rgb(80 150 255 / .6);
  --space: url(../img/k08-stars.svg) 0 0 / 260px auto, radial-gradient(70% 34% at 86% 12%, rgb(110 80 220 / .42), transparent 70%),
    radial-gradient(80% 40% at 6% 62%, rgb(30 100 230 / .34), transparent 70%), linear-gradient(180deg, #050a26, #0b1747 58%, #070d2e);
  --gate-bg: var(--space); --gate-ink: #fff; --guest-bg: rgb(13 30 90 / .66); --guest-line: rgb(120 175 255 / .55);
  --cd-title: #fff; --cd-num: #fff; --cd-label: #b9caef; --cd-tile: transparent; --cd-tile-border: 0; --cd-tile-shadow: none;
  --dt-ic: #8cc4ff; --dt-ic-bg: transparent; --dt-label: #b9caef; --av-bg: #c9d8f5; --av-ink: #22377a;
  --field-bg: rgb(6 16 56 / .72); --field-line: rgb(120 175 255 / .5); --field-ink: #fff;
  --map-bg: rgb(20 50 140 / .55); --map-ink: #fff; --map-line: rgb(140 190 255 / .7);
  --gal-border: 1.5px solid #79b8ff; --gal-shadow: 0 0 12px rgb(80 150 255 / .45); --gal-radius: 12px;
  color-scheme: dark;
}
body { background: #050a26; }
.inv { background: url(../img/k08-stars.svg) 0 0 / 260px auto, linear-gradient(180deg, #071036, #0a1646 30%, #081238 65%, #050a26); }
::placeholder { color: rgb(200 220 255 / .55); }

/* Hero */
.sec--hero { background: radial-gradient(80% 30% at 90% 8%, rgb(110 80 220 / .4), transparent 70%), radial-gradient(70% 30% at 4% 40%, rgb(30 100 230 / .3), transparent 70%); padding-bottom: 40px; }
.phw--cover { --pw: min(62vw, 250px); margin: 8px auto 18px; }
.phw--hero { --pw: min(70vw, 280px); margin: 6px auto 18px; }
.ttl .lead { position: relative; color: #e3ecff; }
/* a soft dark pool behind the small text so the starfield never reads as accents on the letters */
.ttl .lead::before { content: ""; position: absolute; inset: -8px -16px; z-index: -1; background: radial-gradient(closest-side, rgb(6 12 42 / .95), rgb(6 12 42 / .7) 65%, transparent); }
.lead--invite { font-size: .9rem; line-height: 1.45; max-width: 290px; margin: 0 auto 4px; }

/* Title: a chrome "Undangan Khitanan" in an orbit ring, the "Putra Kami" tab, the name in a glowing capsule */
.ttl__kicker { position: relative; margin: 4px 0 2px; padding: 4px 14px; }
.ttl__kicker span { position: relative; z-index: 1; }
.ttl__kicker b { display: block; font: italic 900 3rem/1 var(--f-display); letter-spacing: -.01em; padding: 0 .08em;
  background: linear-gradient(180deg, #fff 0%, #e6efff 36%, #8fa7da 50%, #f2f7ff 66%, #b8c9ec 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1a2c6e) drop-shadow(0 0 10px rgb(90 160 255 / .55)); }
.ttl__kicker::before { content: ""; position: absolute; left: -6%; right: -6%; top: 34%; height: 44%; border: 2px solid rgb(150 200 255 / .8); border-radius: 50%;
  transform: rotate(-9deg); box-shadow: 0 0 10px rgb(100 170 255 / .55), inset 0 0 8px rgb(100 170 255 / .35); }
.ttl__kicker::after { content: ""; position: absolute; right: -10px; top: -14px; width: 46px; aspect-ratio: var(--ar-rocket); background: url(../img/st-rocket.webp) center / contain no-repeat; transform: rotate(18deg); }
.ttl__tag { position: relative; z-index: 3; margin: 12px 0 -14px; }
.ttl__tag span { padding: 3px 16px; border-radius: 999px; background: #0b1a52; border: 1px solid #79b8ff; color: #fff; font: 600 .8rem/1.4 var(--f-body); box-shadow: 0 0 10px rgb(80 150 255 / .5); }
.ttl__name { margin: 0; filter: drop-shadow(0 0 1.2px #a8d4ff) drop-shadow(0 0 1.2px #a8d4ff) drop-shadow(0 0 9px rgb(80 150 255 / .8)); }
.ttl__name span { padding: 13px 30px 10px; background: linear-gradient(180deg, #1f47b0, #0b1d5e);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.gate__date, .side__date { display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 10px; background: rgb(13 30 90 / .6); border: 1px solid rgb(120 175 255 / .55); color: #e3ecff; }
.guest { box-shadow: 0 0 14px rgb(70 140 255 / .3); }

/* Glass panels with chamfered corners; the glow follows the cut corners (drop-shadow on the clipped layers) */
.cd-box, .sec--details .sec__in, .sec--rsvp .sec__in, .sec--gallery .sec__in, .sec--prayer .sec__in, .sec--wishes .sec__in {
  position: relative; isolation: isolate; filter: drop-shadow(0 0 7px rgb(70 150 255 / .5)); }
.sec--details .sec__in, .sec--rsvp .sec__in, .sec--gallery .sec__in, .sec--wishes .sec__in { padding: 34px 16px 22px; }
.sec--prayer .sec__in { padding: 24px 20px; }
.cd-box { padding: 34px 10px 18px; }
.cd-box::before, .cd-box::after, .sec--details .sec__in::before, .sec--details .sec__in::after, .sec--rsvp .sec__in::before, .sec--rsvp .sec__in::after,
.sec--gallery .sec__in::before, .sec--gallery .sec__in::after, .sec--prayer .sec__in::before, .sec--prayer .sec__in::after, .sec--wishes .sec__in::before, .sec--wishes .sec__in::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px); }
.cd-box::before, .sec--details .sec__in::before, .sec--rsvp .sec__in::before, .sec--gallery .sec__in::before, .sec--prayer .sec__in::before, .sec--wishes .sec__in::before {
  inset: 0; background: linear-gradient(135deg, #9fd0ff, #3f74e0 30%, #2a56c4 60%, #a8d6ff); }
.cd-box::after, .sec--details .sec__in::after, .sec--rsvp .sec__in::after, .sec--gallery .sec__in::after, .sec--prayer .sec__in::after, .sec--wishes .sec__in::after {
  inset: 1.5px; background: linear-gradient(180deg, rgb(24 48 124 / .96), rgb(9 20 66 / .96)); }
.sec--details, .sec--rsvp, .sec--gallery, .sec--prayer, .sec--wishes { padding: 44px 18px 18px; }
.sec--countdown { padding: 36px 18px 18px; }

/* Angled tabs that sit on the panel's top edge */
.h-sec { margin: -54px auto 18px; filter: drop-shadow(0 0 1px #a8d4ff) drop-shadow(0 0 1px #a8d4ff) drop-shadow(0 0 7px rgb(80 150 255 / .75)); }
.h-sec__t, .cd__t { padding: 9px 26px 8px; background: linear-gradient(180deg, #1f47b0, #0c2068); color: #fff;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.h-sec__t { font-size: var(--head-size); }
.h-sec__sub { color: #d5e2ff; }
.cd__head { display: flex; flex-direction: column; align-items: center; margin: -54px auto 16px;
  filter: drop-shadow(0 0 1px #a8d4ff) drop-shadow(0 0 1px #a8d4ff) drop-shadow(0 0 7px rgb(80 150 255 / .75)); }
.cd__t { display: inline-flex; font: 700 1rem/1.2 var(--f-head); }
.cd__ic { color: #9fd0ff; }

/* Countdown: big numbers split by thin lines */
.cd { gap: 0; }
.cd__c { padding: 2px 0 0; }
.cd__c + .cd__c { border-left: 1px solid rgb(140 190 255 / .45); }
.cd__n { font: 700 2.3rem/1.05 var(--f-num); text-shadow: 0 0 12px rgb(110 170 255 / .6); }
.cd__l { font-weight: 400; font-size: .8rem; }
.sec--countdown .link--cal { color: #9fd0ff; }

/* Details */
.dts { gap: 0; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(140 190 255 / .25); }
.dt__ic { width: 42px; height: 42px; border: 1px solid rgb(140 190 255 / .45); border-radius: 12px; }
.dt__v small { color: #c3d3f5; }
.link { color: #9fd0ff; }

/* RSVP */
.sec--rsvp .card.form, .sec--rsvp .rsvp-done { background: none; border: 0; box-shadow: none; padding: 4px 0 0; }
.lead { color: #d5e2ff; }
.field > span { color: #e3ecff; }
.field em, .field small { color: #a9bce6; }

/* Gallery */
.hint { color: #a9bce6; }

/* Prayer */
.prayer { font: italic 400 1.02rem/1.65 var(--f-body); color: #eef4ff; quotes: none; }
.prayer::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23bfe0ff'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Wishes: glass composer, light message cards */
.wcomp { background: rgb(6 16 56 / .5); border-color: rgb(120 175 255 / .45); box-shadow: none; }
.wish { background: linear-gradient(180deg, #f4f7ff, #dfe7fb); color: #14204a; border: 1px solid #9fc4ff; }
.wish__ago { color: #4a5a86; }
.wishes__n { color: #c3d3f5; }
.tag--no { background: #c9d8f5; color: #2a3f7a; }

/* Closing: script "Terima Kasih" between lines; the Earth and the sitting astronaut */
.sec--closing { padding-bottom: 190px; }
.closing__t span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 400 2.9rem/1.1 var(--f-script); color: #fff; text-shadow: 0 0 14px rgb(110 170 255 / .7); }
.closing__t span::before, .closing__t span::after { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, #bfe0ff); }
.closing__t span::after { transform: scaleX(-1); }
.closing__p { color: #e3ecff; }
.closing__sign { display: inline-block; padding: 10px 20px; border-radius: 12px; background: rgb(13 30 90 / .6); border: 1px solid rgb(120 175 255 / .55); box-shadow: 0 0 14px rgb(70 140 255 / .3); }
.made { position: relative; z-index: 3; }

/* ---------- Stickers ---------- */
.o { filter: drop-shadow(0 4px 10px rgb(0 0 20 / .5)); }
.gate__in .o1, .side__in .o1 { left: -14px; top: 6px; width: 15vw; max-width: 60px; aspect-ratio: var(--ar-shuttle); background-image: url(../img/st-shuttle.webp); }
.gate__in .o2, .side__in .o2 { right: -16px; top: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-saturn); background-image: url(../img/st-saturn.webp); }
.gate__in .o3, .side__in .o3 { right: -10px; top: 200px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-robot); background-image: url(../img/st-robot.webp); }
.gate__in .o4, .side__in .o4 { left: -6px; top: 196px; width: 15vw; max-width: 58px; aspect-ratio: var(--ar-flag); background-image: url(../img/st-flag.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -10px; top: 18px; width: 15vw; max-width: 62px; aspect-ratio: var(--ar-shuttle); background-image: url(../img/st-shuttle.webp); }
.sec--hero .o2 { right: -16px; top: 4px; width: 27vw; max-width: 108px; aspect-ratio: var(--ar-saturn); background-image: url(../img/st-saturn.webp); }
.sec--hero .o3 { right: -8px; top: 236px; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-robot); background-image: url(../img/st-robot.webp); }
.sec--details .deco { z-index: 3; }
.sec--details { padding-bottom: 84px; }
.sec--details .o1 { right: 6px; bottom: 6px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-rover); background-image: url(../img/st-rover.webp); }
.sec--gallery .o1 { left: 0; top: 0; width: 13vw; max-width: 52px; aspect-ratio: var(--ar-flag); background-image: url(../img/st-flag.webp); }
.sec--closing .o1 { left: 0; bottom: 0; width: 64vw; max-width: 300px; aspect-ratio: var(--ar-earth); background-image: url(../img/earth.webp); filter: none; }
.sec--closing .o2 { right: 4px; bottom: 26px; width: 26vw; max-width: 108px; aspect-ratio: var(--ar-astro-sit); background-image: url(../img/st-astro-sit.webp); }

html:lang(en) .ttl__kicker b { font-size: 2.1rem; line-height: 1.1; }

@media (min-width: 1024px) { .phw--side { --pw: min(19vw, 240px); } .side__in .ttl__kicker b { font-size: 3.3rem; } html:lang(en) .side__in .ttl__kicker b { font-size: 2.3rem; } }