/* A08 · Little Safari Baby: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Chewy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/chewy-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: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/kalam-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: "Itim"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/itim-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: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-bismillah.woff2") format("woff2"); unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; }

/* sticker geometry (mockup pixels) and proportions, made by build.py */
:root { --ar-giraffe: 220 / 363; --sx-giraffe: 460.0; --sy-giraffe: 73.5; --sw-giraffe: 148.0; --ar-lion: 220 / 270; --sx-lion: 453.5; --sy-lion: 282.0; --sw-lion: 154.5; --ar-elephant: 300 / 252; --sx-elephant: 32.25; --sy-elephant: 292.75; --sw-elephant: 222.75; --ar-giraffe-b: 320 / 341; --sx-giraffe-b: 29.25; --sy-giraffe-b: 1121.25; --sw-giraffe-b: 238.75; --ar-lion-b: 260 / 268; --sx-lion-b: 920.5; --sy-lion-b: 1198.75; --sw-lion-b: 165.0; --ar-vines: 240 / 328; --sx-vines: 0.0; --sy-vines: 0.0; --sw-vines: 172.0; --ar-leaves-tr: 240 / 215; --sx-leaves-tr: 960.5; --sy-leaves-tr: 0.0; --sw-leaves-tr: 161.5; --ar-leaves-r: 240 / 216; --sx-leaves-r: 949.5; --sy-leaves-r: 352.5; --sw-leaves-r: 172.5; --ar-leaves-l: 300 / 244; --sx-leaves-l: 0.0; --sy-leaves-l: 802.5; --sw-leaves-l: 255.0; }
.phw { --cx0: 160; --cy0: 90; --cw: 330; --ch: 298; }
.phw--cover .p1, .phw--hero .p1, .phw--side .p1 { background-image: url(../img/st-giraffe.webp); left: calc((var(--sx-giraffe) - var(--cx0)) * var(--k)); top: calc((var(--sy-giraffe) - var(--cy0)) * var(--k)); width: calc(var(--sw-giraffe) * var(--k)); aspect-ratio: var(--ar-giraffe); }
.phw--cover .p2, .phw--hero .p2, .phw--side .p2 { background-image: url(../img/st-lion.webp); left: calc((var(--sx-lion) - var(--cx0)) * var(--k)); top: calc((var(--sy-lion) - var(--cy0)) * var(--k)); width: calc(var(--sw-lion) * var(--k)); aspect-ratio: var(--ar-lion); }
.phw--cover .p3, .phw--hero .p3, .phw--side .p3 { background-image: url(../img/st-elephant.webp); left: calc((var(--sx-elephant) - var(--cx0)) * var(--k)); top: calc((var(--sy-elephant) - var(--cy0)) * var(--k)); width: calc(var(--sw-elephant) * var(--k)); aspect-ratio: var(--ar-elephant); }

/* A08 · Little Safari Baby: watercolour cream and sage, jungle leaves, a round wooden frame, chunky brown letters and olive ribbons; giraffe, lion, elephant and leaves from the mockup. */
:root {
  --bg: #f4efe2; --bg2: #ebe4d0; --ink: #3b3a2c; --muted: #5d5b48; --accent: #6f8a4a; --accent2: #e7d6b2;
  --line: rgb(111 138 74 / .25);
  --card: #fbf8ef; --card-line: #e5dcc4; --card-shadow: 0 10px 24px rgb(80 80 40 / .1); --radius: 20px;
  --btn-bg: linear-gradient(180deg, #86a35b, #64813f); --btn-ink: #fff; --btn-border: 2px solid rgb(255 255 255 / .6); --btn-shadow: 0 8px 18px rgb(80 100 40 / .3);
  --f-display: "Chewy", "Itim", system-ui, sans-serif; --f-body: "Itim", "Amiri", system-ui, sans-serif; --f-head: "Kalam", "Itim", system-ui, sans-serif; --f-num: "Itim", system-ui, sans-serif;
  --name-size: 3.3rem; --name-weight: 400; --name-color: #7a5530;
  --head-size: 1.5rem; --head-weight: 700; --head-color: #5a4a2a; --head-ink: #5a4a2a;
  --kicker-color: #5a4a2a; --bism-color: #5a4a2a;
  --photo-radius: 999px 999px 24px 24px; --photo-shadow: none;
  --gate-bg: radial-gradient(ellipse at 50% 30%, #fbf8ef, rgb(251 248 239 / 0) 60%), linear-gradient(180deg, #ece6d2, #f4efe2);
  --guest-bg: rgb(251 248 239 / .92); --guest-line: #e5dcc4;
  --cd-title: #5a4a2a; --cd-num: #fff; --cd-label: #f3f5e8;
  --cd-tile: linear-gradient(180deg, #86a35b, #64813f); --cd-tile-border: 0; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 12px rgb(80 100 40 / .25);
  --dt-ic: #6f8a4a; --dt-ic-bg: transparent; --dt-label: #3b3a2c; --av-bg: #e6ebd8; --av-ink: #6f8a4a;
}
body { background: radial-gradient(ellipse at 0 40%, #e9ecd8 0, rgb(233 236 216 / 0) 30%), radial-gradient(ellipse at 100% 70%, #e9ecd8 0, rgb(233 236 216 / 0) 30%), #f4efe2; }
.inv { background: transparent; }

/* The baby in a round wooden frame; giraffe, lion and elephant around it (as on the mockup) */
.phw .photo { background: #f4efe2; box-shadow: none; }
.phw::before { content: ""; position: absolute; inset: -6px; border-radius: 999px 999px 28px 28px; z-index: -1; background: linear-gradient(180deg, #d9b47c, #b48650); box-shadow: 0 10px 22px rgb(80 60 30 / .22); }
.phw--cover { --pw: min(54vw, 214px); margin: 22px auto calc(92 * var(--k)); }
.phw--hero { --pw: min(54vw, 214px); margin: 26px auto calc(96 * var(--k)); }
.phw--side { margin-bottom: calc(96 * var(--k)); }

/* Title */
.ttl__bism { font-size: 1.45rem; }
.ttl__kicker span { position: relative; font: 700 1.35rem/1.2 "Kalam", var(--f-body); color: #5a4a2a; background: linear-gradient(90deg, rgb(231 214 178 / 0), #e7d6b2 12%, #ead9b6 88%, rgb(231 214 178 / 0)); padding: 4px 34px 6px; }
.ttl__kicker span::before, .ttl__kicker span::after { content: ""; position: absolute; top: 50%; width: 34px; height: 14px; margin-top: -7px; background: url(../img/a08-leaf.svg) center / contain no-repeat; }
.ttl__kicker span::before { left: -30px; transform: scaleX(-1); } .ttl__kicker span::after { right: -30px; }
.ttl .lead { color: #3b3a2c; font-size: 1rem; }
.ttl__name { line-height: 1; margin: 8px 0 4px; }
.ttl__name span { background: linear-gradient(180deg, #8a6236, #6b4824); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #efe2c8); padding: 0 .06em; }
.ttl__full span { position: relative; font: 700 1rem/1.2 "Kalam", var(--f-body); color: #fff; background: linear-gradient(180deg, #86a35b, #64813f); padding: 6px 22px; border-radius: 4px; }
.ttl__full span::before, .ttl__full span::after { content: ""; position: absolute; top: 50%; width: 30px; height: 13px; margin-top: -6px; background: url(../img/a08-leaf.svg) center / contain no-repeat; }
.ttl__full span::before { left: -32px; transform: scaleX(-1); } .ttl__full span::after { right: -32px; }
.par { margin-top: 14px; }
.par__l { font-size: 1.05rem; color: #3b3a2c; }
.par__ic { width: 30px; height: 30px; color: #6f8a4a; }
.par__n { font: 400 1.1rem/1.4 var(--f-body); color: #3b3a2c; }
.gate__date, .side__date { display: inline-block; margin-top: 16px; padding: 6px 16px; border-radius: 999px; background: #fbf8ef; color: #5a4a2a; }

/* Headings in Kalam with leaf sprigs */
.h-sec__t::before, .h-sec__t::after { content: ""; width: 30px; height: 13px; flex: none; background: url(../img/a08-leaf.svg) center / contain no-repeat; }
.h-sec__t::before { transform: scaleX(-1); }
.h-sec__ic { color: #6f8a4a; }
.h-sec__sub, .lead { color: #4a4936; }

/* Countdown on a soft cream cloud */
.cd-box { background: #fbf8ef; border-radius: 40px; padding: 16px 12px 20px; box-shadow: 0 10px 24px rgb(80 80 40 / .1); }
.cd__t { color: #5a4a2a; font: 700 1.25rem/1.2 "Kalam", var(--f-body); }
.cd__ic { color: #6f8a4a; }
.cd__n { font: 400 2rem/1.05 var(--f-num); }

/* Details */
.dts { gap: 0; background: #fbf8ef; 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 dashed rgb(111 138 74 / .3); }
.dt__ic .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.dt__l { font: 700 1rem/1.2 "Kalam", var(--f-body); }
.dt__v strong { font-weight: 400; }
.btn--map { --map-ink: #5a7239; --map-line: #c9d6ad; --map-bg: #fbf8ef; }
.link, .link--map, .link--cal { color: #5a7239; }
.gallery__item { border: 4px solid #fff; border-radius: 16px; box-shadow: 0 10px 20px rgb(80 70 40 / .16); }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.btn--send { padding: 12px 14px; }
.sec--closing { padding-bottom: 200px; }
.closing__t span { font: 700 1.9rem/1.2 "Kalam", var(--f-body); color: #5a4a2a; }
.closing__p { color: #3b3a2c; }

/* ---------- Jungle and animals from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(70 60 30 / .14)); }
.gate__in .o1, .side__in .o1 { left: -24px; top: -16px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-vines); background-image: url(../img/st-vines.webp); filter: none; }
.gate__in .o2, .side__in .o2 { right: -24px; top: -16px; width: 32vw; max-width: 126px; aspect-ratio: var(--ar-leaves-tr); background-image: url(../img/st-leaves-tr.webp); filter: none; }
.sec--hero .o1 { left: -24px; top: -10px; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-vines); background-image: url(../img/st-vines.webp); filter: none; }
.sec--hero .o2 { right: -24px; top: -10px; width: 32vw; max-width: 126px; aspect-ratio: var(--ar-leaves-tr); background-image: url(../img/st-leaves-tr.webp); filter: none; }
.sec--details .o1 { right: -40px; top: 10px; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-leaves-r); background-image: url(../img/st-leaves-r.webp); filter: none; opacity: .9; }
.sec--gallery .o1 { left: -40px; top: 0; width: 36vw; max-width: 140px; aspect-ratio: var(--ar-leaves-l); background-image: url(../img/st-leaves-l.webp); filter: none; opacity: .9; }
.sec--closing .o1 { left: -12px; bottom: 0; width: 42vw; max-width: 170px; aspect-ratio: var(--ar-giraffe-b); background-image: url(../img/st-giraffe-b.webp); }
.sec--closing .o2 { right: -8px; bottom: 0; width: 36vw; max-width: 146px; aspect-ratio: var(--ar-lion-b); background-image: url(../img/st-lion-b.webp); }

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