/* B03 · Safari Animal Party: 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 proportions (img/st-*.webp) */
:root { --ar-lion: 320 / 297; --ar-giraffe: 300 / 360; --ar-monkey: 280 / 288; --ar-elephant: 340 / 344; --ar-lion-hat: 340 / 410; --ar-giraffe-r: 300 / 345; --ar-jeep: 340 / 262; --ar-sign: 220 / 252; --ar-tree: 320 / 226; }

/* B03 · Safari Animal Party: savanna cream, olive green, warm brown wood and orange; the animals come from the mockup. */
:root {
  --bg: #f4ecd9; --bg2: #e9dcc0; --ink: #4f3216; --muted: #7a5d3e; --accent: #5d6c27; --accent2: #f1b94c;
  --line: rgb(79 50 22 / .16);
  --card: #fffaf0; --card-line: rgb(120 90 50 / .18); --card-shadow: 0 8px 22px rgb(79 50 22 / .1); --radius: 20px;
  --btn-bg: linear-gradient(180deg, #74832f, #56651f); --btn-ink: #fff; --btn-shadow: 0 4px 0 #3f4b15, 0 10px 20px rgb(70 80 20 / .28); --btn-font: "Fredoka", system-ui, sans-serif;
  --f-display: "Fredoka", 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-size: 4.4rem; --name-color: #5a3416;
  --name-shadow: 3px 0 0 #fff4dc, -3px 0 0 #fff4dc, 0 3px 0 #fff4dc, 0 -3px 0 #fff4dc, 2px 2px 0 #fff4dc, -2px 2px 0 #fff4dc, 2px -2px 0 #fff4dc, -2px -2px 0 #fff4dc, 0 6px 0 rgb(70 40 15 / .35);
  --head-size: 1.6rem; --head-color: #5a3416; --head-ink: #fff8ea;
  --photo-radius: 28px; --photo-border: 6px solid #fff; --photo-shadow: 0 16px 32px rgb(60 50 20 / .3); --cover-ar: 5 / 6;
  --gate-bg: linear-gradient(180deg, rgb(244 236 217 / .25), rgb(244 236 217 / .55)), url(../img/bg.webp) center / cover, #c8b98f; --gate-ink: #4f3216;
  --guest-bg: rgb(255 250 240 / .92); --guest-line: rgb(120 90 50 / .25);
  --cd-title: #5a3416; --cd-num: #fff; --cd-label: #f3ead2;
  --cd-tile: linear-gradient(180deg, #6c7a2c, #535f1d); --cd-tile-border: 0; --cd-tile-radius: 14px; --cd-tile-shadow: 0 4px 0 #3c4612, 0 10px 18px rgb(60 70 20 / .25);
  --dt-ic: #8a5a2b; --dt-ic-bg: #f6e7cc; --dt-label: #5a3416; --av-bg: #e8a548; --av-ink: #fff;
}
body { background: radial-gradient(ellipse at 50% 100%, #ead9b3 0, transparent 60%), #f4ecd9; }
.inv { background: transparent; }

/* Title on a wooden sign; small brown plaque for the kicker; green ribbon for the theme */
.ttl { position: relative; padding: 30px 16px 22px; margin: 26px 2px 0; border-radius: 22px;
  background: url(../img/b03-wood.svg) center / 100% 100%, linear-gradient(180deg, #d9a66b 0, #c48a4f 55%, #b47a40 100%);
  border: 3px solid #8f5a2a; box-shadow: inset 0 2px 0 rgb(255 230 190 / .45), inset 0 -5px 0 rgb(90 50 20 / .2), 0 6px 0 #7a4a20, 0 18px 30px rgb(60 35 10 / .25); }
.ttl::before, .ttl::after { content: ""; position: absolute; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #6b4119; box-shadow: inset 0 1px 1px rgb(0 0 0 / .4); }
.ttl::before { left: 14px; } .ttl::after { right: 14px; }
.ttl__kicker { position: absolute; top: -22px; left: 0; right: 0; }
.ttl__kicker span { font: 600 .98rem/1.15 var(--f-display); letter-spacing: 0; text-transform: none; color: #fff7e6; background: #6e4220; padding: 8px 18px;
  border-radius: 999px; border: 2px solid #f1dcb4; box-shadow: 0 4px 0 #4a2a10; }
.ttl__name { margin-top: 6px; }
.ttl__age span { font: 700 1.5rem/1 var(--f-display); color: #5a3416; background: none; padding: 0; text-shadow: 0 2px 0 #fff4dc; }
.ttl__age b { font-size: 1.9em; color: #ee8a22; text-shadow: 2px 0 0 #fff4dc, -2px 0 0 #fff4dc, 0 2px 0 #fff4dc, 0 -2px 0 #fff4dc, 0 5px 0 rgb(120 60 10 / .35); vertical-align: -.12em; }
.ttl__theme { margin-top: 10px; }
.ttl__theme span { position: relative; isolation: isolate; font: 600 1.15rem/1.2 var(--f-display); color: #fff; background: linear-gradient(180deg, #6f8a2c, #4f6a1c); padding: 8px 20px 8px 44px;
  border-radius: 6px; box-shadow: 0 3px 0 #37500f; }
.ttl__theme span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; margin-top: -10px; background: url(../img/b03-paw-w.svg) center / contain no-repeat; }
.ttl .lead { color: #3f2510; font-weight: 700; font-size: .96rem; margin-top: 12px; background: rgb(255 248 232 / .82); border-radius: 14px; padding: 10px 12px; max-width: none; }
.gate__date, .side__date { display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 999px; background: #5d6c27; color: #fff; box-shadow: 0 4px 0 #3c4612; }
.side__guest { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgb(255 250 240 / .9); }

/* Section headings on a wooden plank with leaves */
.h-sec__t { position: relative; padding: 9px 24px 10px; border-radius: 12px; font-size: 1.45rem; text-shadow: 0 2px 0 rgb(70 40 15 / .45);
  background: url(../img/b03-wood.svg) center / 100% 100%, linear-gradient(180deg, #a8703d, #85542a); border: 2px solid #6b4119; box-shadow: inset 0 2px 0 rgb(255 220 170 / .3), 0 4px 0 #5a3414; }
.h-sec__ic { color: #fff8ea; }
.h-sec .orn--head-top { display: none; }
.h-sec__sub { color: #4f3216; font-weight: 700; }
.lead { color: #5b4128; }

/* Hero over a soft savanna scene */
.sec--hero { background: linear-gradient(180deg, rgb(244 236 217 / .2), rgb(244 236 217 / .6)), url(../img/bg.webp) center / cover; padding-bottom: 70px; }
.sec--hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: 1; background: linear-gradient(rgb(244 236 217 / 0), #f4ecd9); }
.photo--hero { width: min(66vw, 270px); }

/* Countdown: compass, olive tiles with colons */
.cd-box { background: rgb(255 250 238 / .85); border: 2px dashed rgb(120 90 50 / .3); border-radius: 26px; padding: 16px 12px 18px; }
.cd__t { font-size: 1.35rem; }
.cd__ic { color: #b07a35; }
.cd { gap: 14px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -11px; top: 50%; transform: translateY(-58%); font: 700 1.4rem var(--f-display); color: #5a3416; }

/* Details card, olive buttons */
.dts { gap: 0; background: var(--card); border: 2px solid rgb(120 90 50 / .15); border-radius: 22px; padding: 4px 16px; box-shadow: var(--card-shadow); }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 2px; }
.dt + .dt { border-top: 1px solid rgb(120 90 50 / .18); }
.dt__ic { border-radius: 50%; }
.btn--map { --map-ink: #5d6c27; --map-line: #b9c48d; --map-bg: #f5f7e8; }
.link, .link--map, .link--cal { color: #5d6c27; }
.gallery__item { border: 5px solid #fff; border-radius: 18px; box-shadow: 0 10px 20px rgb(60 45 20 / .16); }
.wcomp { border: 2px solid rgb(120 90 50 / .14); }
.wcomp__ic { display: grid; place-items: center; width: 34px; height: 46px; color: #8a5a2b; }
.wish__av b { display: none; }
.wish__av { background: transparent; }
.wish__av::before { content: ""; width: 26px; height: 26px; background: url(../img/b03-paw.svg) center / contain no-repeat; }
.closing__t { color: #5a3416; font-size: 1.85rem; }
.closing__name { font-size: 3.1rem; }
.sec--closing { padding-bottom: 120px; }

/* ---------- Animals from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(60 40 10 / .22)); }
.gate__in .o1, .side__in .o1 { right: -10px; top: -4px; width: 108px; aspect-ratio: var(--ar-monkey); background-image: url(../img/st-monkey.webp); }
.gate__in .o2, .side__in .o2 { left: -22px; top: 168px; width: 104px; aspect-ratio: var(--ar-giraffe); background-image: url(../img/st-giraffe.webp); }
.gate__in .o3, .side__in .o3 { right: -18px; top: 240px; width: 118px; aspect-ratio: var(--ar-elephant); background-image: url(../img/st-elephant.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: -14px; top: 210px; width: 34vw; max-width: 138px; aspect-ratio: var(--ar-lion-hat); background-image: url(../img/st-lion-hat.webp); }
.sec--hero .o2 { right: -12px; top: 0; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-monkey); background-image: url(../img/st-monkey.webp); }
.sec--hero .o3 { right: -16px; top: 236px; width: 32vw; max-width: 126px; aspect-ratio: var(--ar-giraffe-r); background-image: url(../img/st-giraffe-r.webp); }
.sec--countdown .o1 { right: -8px; bottom: -4px; width: 36vw; max-width: 150px; aspect-ratio: var(--ar-jeep); background-image: url(../img/st-jeep.webp); }
.sec--countdown { padding-bottom: 96px; }
.sec--details .o1 { left: -26px; top: 0; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-lion); background-image: url(../img/st-lion.webp); opacity: .95; }
.sec--gallery .o1 { right: -18px; top: -6px; width: 28vw; max-width: 112px; aspect-ratio: var(--ar-giraffe-r); background-image: url(../img/st-giraffe-r.webp); }
.sec--wishes .o1 { right: -6px; bottom: 6px; width: 20vw; max-width: 84px; aspect-ratio: var(--ar-sign); background-image: url(../img/st-sign.webp); opacity: .9; }
.sec--closing .o1 { left: -10px; bottom: 0; width: 44vw; max-width: 180px; aspect-ratio: var(--ar-tree); background-image: url(../img/st-tree.webp); opacity: .75; }
.sec--closing .o2 { right: -10px; bottom: 0; width: 34vw; max-width: 140px; aspect-ratio: var(--ar-elephant); background-image: url(../img/st-elephant.webp); }
.sec--closing .o3 { left: 30%; bottom: 0; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-lion-hat); background-image: url(../img/st-lion-hat.webp); }

@media (min-width: 1024px) {
  #side .ttl { max-width: 420px; margin-inline: auto; }
  .side__in .o1 { right: 30px; } .side__in .o2 { left: 20px; } .side__in .o3 { right: 20px; }
}