/* B05 · Space Explorer: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/exo-2-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: "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: "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: 600; font-display: swap; src: url("../fonts/exo-2-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 proportions (img/st-*.webp) */
:root { --ar-rocket: 260 / 383; --ar-saturn: 220 / 155; --ar-robot: 320 / 290; --ar-rover: 320 / 204; --ar-planet: 260 / 243; --ar-base: 380 / 246; --ar-moon: 120 / 119; }

/* B05 · Space Explorer: deep space navy and violet, starfield, chrome titles and glowing neon panels; rocket, planets and rover from the mockup. */
:root {
  --bg: #0b1238; --bg2: #18205a; --ink: #eef1ff; --muted: #b9c1ea; --accent: #8f63ff; --accent2: #5ac8ff;
  --line: rgb(140 160 255 / .25);
  --card: linear-gradient(180deg, rgb(30 40 110 / .72), rgb(18 24 70 / .78)); --card-line: rgb(110 170 255 / .55);
  --card-shadow: 0 0 0 1px rgb(140 90 255 / .25), 0 0 18px rgb(80 150 255 / .25), inset 0 0 22px rgb(90 120 255 / .14); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #a57bff, #7546ec); --btn-ink: #fff; --btn-shadow: 0 0 0 1px rgb(200 170 255 / .5), 0 0 18px rgb(140 90 255 / .55); --btn-font: "Exo 2", system-ui, sans-serif;
  --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;
  --name-font: var(--f-display); --name-size: 3.8rem; --name-weight: 800; --name-style: italic; --name-color: #fff;
  --head-size: 1.55rem; --head-weight: 700; --head-color: #fff; --head-ink: #fff;
  --kicker-color: #fff; --kicker-font: var(--f-display);
  --photo-radius: 22px; --photo-border: 2px solid #8fd0ff; --photo-shadow: 0 0 0 4px rgb(20 30 90 / .8), 0 0 0 5px rgb(150 110 255 / .7), 0 0 30px rgb(90 160 255 / .55); --cover-ar: 1 / 1;
  --gate-bg: radial-gradient(ellipse at 75% 18%, rgb(130 70 230 / .55), transparent 52%), radial-gradient(ellipse at 15% 75%, rgb(40 90 220 / .45), transparent 55%),
    url(../img/b05-stars.svg), linear-gradient(180deg, #0a0f30, #121a4e 60%, #0b1238); --gate-ink: #eef1ff;
  --guest-bg: rgb(20 28 80 / .7); --guest-line: rgb(110 170 255 / .55);
  --cd-title: #fff; --cd-num: #fff; --cd-label: #c9d2ff;
  --cd-tile: linear-gradient(180deg, #19246a, #0f1648); --cd-tile-border: 1.5px solid #6fb7ff; --cd-tile-radius: 12px; --cd-tile-shadow: 0 0 14px rgb(90 160 255 / .45), inset 0 0 12px rgb(90 120 255 / .3);
  --dt-ic: #fff; --dt-ic-bg: rgb(110 90 255 / .25); --dt-label: #9fd8ff; --av-bg: linear-gradient(135deg, #7c5cff, #3cb0ff); --av-ink: #fff;
  --field-bg: rgb(10 16 56 / .7); --field-ink: #fff; --field-line: rgb(110 170 255 / .5);
  color-scheme: dark;
}
body { background: radial-gradient(ellipse at 80% 10%, rgb(120 60 220 / .35), transparent 40%), radial-gradient(ellipse at 10% 45%, rgb(40 80 210 / .3), transparent 40%),
  radial-gradient(ellipse at 85% 80%, rgb(110 60 210 / .3), transparent 40%), url(../img/b05-stars.svg), #0b1238; }
.inv { background: transparent; }
.card, .dt, .wcomp, .wish, .note { border-width: 1.5px; }

/* Chrome titles and neon badges */
.ttl__kicker { font: italic 700 1.35rem/1.1 var(--f-display); letter-spacing: .02em; text-transform: none; text-shadow: 0 0 12px rgb(140 160 255 / .7); }
.ttl__theme, .ttl__name span { background: linear-gradient(180deg, #ffffff 0, #e6ecfb 42%, #93a2c8 52%, #f5f8ff 70%, #c3cde6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a2f7a) drop-shadow(0 0 14px rgb(130 150 255 / .55)); }
.ttl__theme { font: italic 800 3.1rem/1 var(--f-display); padding: 0 .1em; }
.ttl__sub span { font: italic 700 1.05rem/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #1b2672, #0f1650);
  padding: 7px 22px; border: 1.5px solid #6fb7ff; border-radius: 8px; transform: skewX(-12deg); box-shadow: 0 0 16px rgb(90 160 255 / .5); }
.ttl__pre { font-weight: 600; font-size: 1.05rem; color: #e6eaff; margin-top: 10px; max-width: 15em; }
.ttl__name { padding: 4px 30px 8px; margin: 10px 0 6px; border: 1.5px solid #8fd0ff; border-radius: 16px; background: linear-gradient(180deg, rgb(30 40 120 / .78), rgb(14 20 70 / .88));
  box-shadow: 0 0 20px rgb(90 160 255 / .55); max-width: 100%; }
.ttl__name span { display: inline-block; padding: 0 .08em; }
.ttl__age span { font: italic 700 1rem/1.2 var(--f-display); background: linear-gradient(180deg, #a57bff, #7546ec); box-shadow: 0 0 14px rgb(140 90 255 / .6); }
.ttl .lead { color: #e2e7ff; font-size: .98rem; }
.gate__date, .side__date { display: inline-block; margin-top: 14px; padding: 6px 18px; border-radius: 999px; border: 1.5px solid #6fb7ff; background: rgb(20 28 80 / .6); }

/* Headings: icon, neon lines either side */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, #8fd0ff); flex: none; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__t { text-shadow: 0 0 14px rgb(140 160 255 / .6); font-style: italic; }
.h-sec__ic { color: #fff; }
.h-sec__sub, .lead, .hint { color: #c9d2ff; }

/* Countdown in a neon panel with a tab */
.cd-box { position: relative; border: 1.5px solid #6fb7ff; border-radius: 18px; padding: 30px 12px 18px; margin-top: 18px; background: linear-gradient(180deg, rgb(24 34 100 / .8), rgb(12 18 62 / .85));
  box-shadow: 0 0 0 1px rgb(150 100 255 / .35), 0 0 26px rgb(80 150 255 / .35); }
.cd__t { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 700 1rem/1 var(--f-display); padding: 10px 18px;
  background: linear-gradient(180deg, #1d2a78, #121b58); border: 1.5px solid #6fb7ff; border-radius: 10px; box-shadow: 0 0 14px rgb(90 160 255 / .5); }
.cd__ic { color: #fff; }
.cd__n { font-weight: 700; }

/* Details, note pill, buttons */
.dt { background: var(--card); }
.dt__ic { border-radius: 12px; }
.note { background: rgb(20 28 80 / .65); border: 1.5px solid #6fb7ff; border-radius: 999px; color: #eef1ff; padding: 12px 20px; }
.btn--map { --map-bg: rgb(20 28 80 / .6); --map-ink: #9fd8ff; --map-line: #6fb7ff; }
.link, .link--map, .link--cal { color: #9fd8ff; }
.gallery__item { border: 1.5px solid #8fd0ff; border-radius: 14px; box-shadow: 0 0 16px rgb(90 160 255 / .45); }
.wcomp__ic { display: grid; place-items: center; width: 34px; height: 46px; color: #c9d2ff; }
.field input::placeholder, .wcomp textarea::placeholder, .wcomp input::placeholder { color: #8f9ad0; }
.tag--no { background: rgb(255 255 255 / .1); color: #c9d2ff; }
.rsvp-done__ic { box-shadow: 0 0 18px rgb(140 90 255 / .6); }
.sec--rsvp .h-sec__t { font: italic 800 2rem/1 var(--f-display); letter-spacing: .02em; }
.closing__t { font: italic 800 1.8rem/1.15 var(--f-display); background: linear-gradient(180deg, #fff, #c3cde6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closing__name { font-size: 2.6rem; background: linear-gradient(180deg, #fff 0, #e6ecfb 42%, #93a2c8 52%, #f5f8ff 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a2f7a); text-shadow: none; }
/* Moon ground under the closing words */
.sec--closing { padding-bottom: 150px; }
.sec--closing::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -70px; height: 170px; border-radius: 50% 50% 0 0; z-index: 1;
  background: radial-gradient(circle at 24% 30%, #3b4472 0 12px, transparent 13px), radial-gradient(circle at 58% 22%, #3b4472 0 18px, transparent 19px), radial-gradient(circle at 80% 46%, #3b4472 0 9px, transparent 10px),
  radial-gradient(circle at 40% 55%, #485285 0 7px, transparent 8px), linear-gradient(180deg, #8790b8, #4f5888 60%, #2f3766); box-shadow: 0 -6px 30px rgb(120 140 255 / .25); }

/* ---------- Rocket, planets, robot and rover from the mockup ---------- */
.o { filter: drop-shadow(0 0 14px rgb(120 140 255 / .35)); }
.gate__in .o1, .side__in .o1 { right: -14px; top: 150px; width: 82px; aspect-ratio: var(--ar-rocket); background-image: url(../img/st-rocket.webp); }
.gate__in .o2, .side__in .o2 { left: -16px; top: 6px; width: 96px; aspect-ratio: var(--ar-saturn); background-image: url(../img/st-saturn.webp); }
.gate__in .o3, .side__in .o3 { left: -14px; top: 210px; width: 100px; aspect-ratio: var(--ar-robot); background-image: url(../img/st-robot.webp); }
.gate__in .o4, .side__in .o4 { right: 10px; top: -4px; width: 40px; aspect-ratio: var(--ar-moon); background-image: url(../img/st-moon.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: -10px; top: 160px; width: 22vw; max-width: 90px; aspect-ratio: var(--ar-rocket); background-image: url(../img/st-rocket.webp); }
.sec--hero .o2 { left: -18px; top: 8px; width: 28vw; max-width: 110px; aspect-ratio: var(--ar-saturn); background-image: url(../img/st-saturn.webp); }
.sec--hero .o3 { left: -10px; top: 240px; width: 26vw; max-width: 100px; aspect-ratio: var(--ar-robot); background-image: url(../img/st-robot.webp); }
.photo--hero { width: min(70vw, 290px); }
.sec--countdown .o1 { right: -24px; top: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-planet); background-image: url(../img/st-planet.webp); }
.sec--details .o1 { left: -20px; top: 10px; width: 16vw; max-width: 64px; aspect-ratio: var(--ar-moon); background-image: url(../img/st-moon.webp); }
.sec--gallery .o1 { right: -16px; top: -4px; width: 22vw; max-width: 88px; aspect-ratio: var(--ar-saturn); background-image: url(../img/st-saturn.webp); }
.sec--wishes .o1 { left: -20px; top: 0; width: 24vw; max-width: 96px; aspect-ratio: var(--ar-planet); background-image: url(../img/st-planet.webp); }
.sec--closing .deco { z-index: 3; }
.sec--closing .o1 { right: -6px; bottom: 34px; width: 40vw; max-width: 160px; aspect-ratio: var(--ar-rover); background-image: url(../img/st-rover.webp); }
.sec--closing .o2 { left: -30px; bottom: 30px; width: 48vw; max-width: 190px; aspect-ratio: var(--ar-base); background-image: url(../img/st-base.webp); }

@media (min-width: 1024px) {
  #side { background-attachment: local; }
  .side__in .o1 { right: 40px; } .side__in .o2 { left: 30px; } .side__in .o3 { left: 30px; }
}