/* A05 · Teddy Bear Newborn: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/fraunces-latin-900-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: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fraunces-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: 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; }
@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-bear-r: 300 / 284; --sx-bear-r: 845.0; --sy-bear-r: 191.0; --sw-bear-r: 277.0; --ar-bear-sweater: 240 / 257; --sx-bear-sweater: 48.0; --sy-bear-sweater: 606.0; --sw-bear-sweater: 174.0; --ar-rainbow: 220 / 127; --sx-rainbow: 848.0; --sy-rainbow: 639.5; --sw-rainbow: 153.75; --ar-blocks: 160 / 81; --sx-blocks: 798.75; --sy-blocks: 734.25; --sw-blocks: 99.0; --ar-bear-bl: 200 / 342; --sx-bear-bl: 0.0; --sy-bear-bl: 1195.5; --sw-bear-bl: 113.5; --ar-bear-sleep: 170 / 122; --sx-bear-sleep: 673.5; --sy-bear-sleep: 815.5; --sw-bear-sleep: 102.0; --ar-bear-head: 140 / 107; --sx-bear-head: 284.25; --sy-bear-head: 55.25; --sw-bear-head: 76.0; }
.phw { --cx0: 515; --cy0: 70; --cw: 330; --ch: 350; }

/* A05 · Teddy Bear Newborn: warm nursery browns and cream, stitched cloud cards, a brown ribbon with wheat, heavy soft serif; the teddy bears, rainbow and blocks come from the mockup. */
:root {
  --bg: #f6ece0; --bg2: #efdfcc; --ink: #4a2e1c; --muted: #6e5240; --accent: #8a5531; --accent2: #e8cdaa;
  --line: rgb(138 85 49 / .22);
  --card: #fdf6ec; --card-line: #ead6bd; --card-shadow: 0 10px 24px rgb(110 70 40 / .12); --radius: 22px;
  --btn-bg: linear-gradient(180deg, #a8714a, #7f4d2c); --btn-ink: #fff8ef; --btn-border: 2px solid #f3e1c9; --btn-shadow: 0 8px 18px rgb(110 65 35 / .3);
  --f-display: "Fraunces", Georgia, serif; --f-body: "Nunito", "Amiri", system-ui, sans-serif; --f-head: "Fraunces", Georgia, serif; --f-num: "Nunito", system-ui, sans-serif;
  --name-size: 3rem; --name-weight: 900; --name-color: #7a4520;
  --head-size: 1.45rem; --head-weight: 700; --head-color: #5a341c; --head-ink: #5a341c;
  --kicker-color: #7a4520; --bism-color: #6e4527;
  --photo-radius: 30px; --photo-border: 5px solid #fdf6ec; --photo-shadow: 0 16px 32px rgb(90 55 30 / .25);
  --gate-bg: linear-gradient(180deg, rgb(246 236 224 / .55), rgb(246 236 224 / .82)), url(../img/bg.webp) center / cover, #ecdcc8;
  --guest-bg: rgb(253 246 236 / .92); --guest-line: #ead6bd;
  --cd-title: #5a341c; --cd-num: #5a2f15; --cd-label: #6e5240;
  --cd-tile: #fdf6ec; --cd-tile-border: 2px solid #fff; --cd-tile-radius: 16px; --cd-tile-shadow: 0 6px 14px rgb(110 70 40 / .14);
  --dt-ic: #8a5531; --dt-ic-bg: transparent; --dt-label: #5a341c; --av-bg: #f1dfc6; --av-ink: #8a5531;
}
body { background: radial-gradient(ellipse at 0 30%, #f1e2cf 0, rgb(241 226 207 / 0) 36%), radial-gradient(ellipse at 100% 70%, #f1e2cf 0, rgb(241 226 207 / 0) 36%), #f6ece0; }
.inv { background: transparent; }

/* Photo first; the title sits on a stitched cream cloud card that overlaps it, with the bear badge on top */
.phw--cover { --pw: min(60vw, 232px); margin: 6px auto 0; }
#gate .ttl { padding: 40px 14px 16px; }
#gate .ttl__name { font-size: 2.5rem; }
#gate .ttl__kicker { font-size: 1.8rem; }
.phw--hero { --pw: min(86vw, 340px); margin: 0 auto; }
.phw .p1 { right: calc(-58 * var(--k)); bottom: calc(-26 * var(--k)); width: calc(150 * var(--k)); aspect-ratio: var(--ar-bear-r); background-image: url(../img/st-bear-r.webp); filter: drop-shadow(0 8px 10px rgb(80 50 25 / .25)); }
.ttl { position: relative; background: #fbf3e8; border-radius: 46px; padding: 46px 18px 22px; margin: -34px 6px 0; z-index: 3;
  outline: 2px dashed rgb(205 170 130 / .75); outline-offset: -11px; box-shadow: 0 14px 30px rgb(90 55 30 / .18); }
.ttl::before { content: ""; position: absolute; left: 50%; top: -30px; width: 74px; height: 58px; margin-left: -37px; background: url(../img/st-bear-head.webp) center / contain no-repeat; filter: drop-shadow(0 4px 6px rgb(90 55 30 / .2)); }
.ttl__bism { font-size: 1.35rem; color: #6e4527; margin-bottom: 0; }
.ttl__kicker { font: 900 2.1rem/1 var(--f-display); color: #7a4520; }
.ttl__pre { margin: 8px 0 4px; }
.ttl__pre span { position: relative; isolation: isolate; font: 700 1rem/1.25 var(--f-body); color: #fff8ef; background: linear-gradient(180deg, #a8714a, #8a5531); padding: 7px 22px 8px; border-radius: 4px; box-shadow: 0 3px 0 #6c4022; max-width: 230px; }
.ttl__pre span::before, .ttl__pre span::after { content: ""; position: absolute; top: 50%; width: 22px; height: 30px; margin-top: -15px; background: url(../img/a05-wheat.svg) center / contain no-repeat; }
.ttl__pre span::before { left: -30px; transform: rotate(-20deg); }
.ttl__pre span::after { right: -30px; transform: rotate(20deg) scaleX(-1); }
.ttl__name { text-shadow: 0 2px 0 #fff4e4, 0 6px 10px rgb(120 70 30 / .2); margin: 4px 0 0; }
.orn--dash svg { width: 200px; margin: 2px auto 6px; color: #b07b4f; }
.ttl .lead { color: #4a2e1c; font-weight: 600; font-size: .95rem; }
.par { margin-top: 14px; gap: 6px; }
.par__l span { font: 800 .95rem/1.2 var(--f-body); color: #fff8ef; background: linear-gradient(180deg, #a8714a, #8a5531); padding: 6px 18px; border-radius: 999px; }
.par__n { font: 800 1rem/1.4 var(--f-body); color: #4a2e1c; background: #fdf6ec; border: 2px solid #efd9bd; border-radius: 999px; padding: 8px 18px; box-shadow: 0 4px 10px rgb(110 70 40 / .1); }
.par__b { display: inline; }
.gate__date, .side__date { display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 999px; background: #fdf6ec; color: #5a341c; font-weight: 800; }
.side__guest { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgb(253 246 236 / .9); }

/* Hero on the soft nursery */
.sec--hero { background: linear-gradient(180deg, rgb(246 236 224 / .3), rgb(246 236 224 / .75) 60%, #f6ece0), url(../img/bg.webp) center top / cover; padding-bottom: 40px; }

/* Headings: heavy soft serif between hearts */
.h-sec__t::before, .h-sec__t::after { content: "\2665"; font-size: .7em; color: #a8714a; }
.h-sec__ic { color: #8a5531; }

/* Details: one stitched card */
.sec--details { padding-top: 20px; }
.dts { gap: 0; background: #fdf6ec; border-radius: 26px; padding: 8px 18px; box-shadow: var(--card-shadow); outline: 2px dashed rgb(205 170 130 / .6); outline-offset: -8px; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 13px 2px; }
.dt + .dt { border-top: 2px dashed rgb(176 123 79 / .35); }
.dt__ic .ic { width: 30px; height: 30px; stroke-width: 1.9; }
.dt__l { font-weight: 800; }
.dt__v strong { font-weight: 800; font-size: 1.05rem; }
.btn--map { --map-ink: #7f4d2c; --map-line: #e2c7a4; --map-bg: #fdf6ec; }
.link, .link--map, .link--cal { color: #7f4d2c; }

/* Countdown */
.cd__t { font: 700 1.3rem/1.2 var(--f-head); gap: 10px; }
.cd__t::before, .cd__t::after { content: "\2665"; font-size: .8em; color: #a8714a; }
.cd__n { font-weight: 800; font-size: 2.1rem; }

/* Tentang Aqiqah + Doa: stitched cards; the photo in a soft blob frame with the bear badge */
.prof { background: #fdf6ec; border: 0; border-radius: 26px; outline: 2px dashed rgb(205 170 130 / .6); outline-offset: -9px; }
.prof__h span { font: 700 1.2rem/1.2 var(--f-head); color: #5a341c; background: #f6e6d0; padding: 7px 18px; border-radius: 14px; outline: 1.5px dashed rgb(176 123 79 / .5); outline-offset: -5px; }
.phw--prof .photo { border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; border: 5px solid #f6e6d0; box-shadow: 0 0 0 2px #e2c7a4, 0 12px 24px rgb(90 55 30 / .2); }
.phw--prof .p1 { left: -6px; bottom: -8px; width: 26%; aspect-ratio: var(--ar-bear-head); background-image: url(../img/st-bear-head.webp); }
.prof__p { color: #4a2e1c; font-weight: 600; }
.prof--pray::before { content: ""; width: 108px; height: 80px; background: url(../img/st-bear-sleep.webp) center / contain no-repeat; }
.prof__q { color: #4a2e1c; }

/* Gallery, wishes */
.gallery__item { border: 4px solid #fdf6ec; border-radius: 18px; box-shadow: 0 10px 20px rgb(90 55 30 / .18); }
.wish__av b { display: none; }
.wish__av .ic { display: block; }
.wcomp { border-color: #ead6bd; }

/* Closing */
.sec--closing { padding-bottom: 150px; }
.closing__t span { position: relative; }
.closing__t span::before, .closing__t span::after { content: ""; position: absolute; top: 50%; width: 22px; height: 30px; margin-top: -15px; background: url(../img/a05-wheat.svg) center / contain no-repeat; }
.closing__t span::before { left: -34px; transform: rotate(-20deg); }
.closing__t span::after { right: -34px; transform: rotate(20deg) scaleX(-1); }
.closing__p { color: #4a2e1c; font-weight: 600; }

/* ---------- Teddy bears, rainbow and blocks from the mockup ---------- */
.o { filter: drop-shadow(0 8px 10px rgb(80 50 25 / .2)); }
.sec--countdown .o1 { left: -22px; bottom: -8px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-bear-sweater); background-image: url(../img/st-bear-sweater.webp); }
.sec--countdown { padding-bottom: 80px; }
.sec--countdown .o2 { right: -12px; bottom: -4px; width: 26vw; max-width: 104px; aspect-ratio: var(--ar-rainbow); background-image: url(../img/st-rainbow.webp); }
.sec--gallery .o1 { right: -10px; top: 6px; width: 18vw; max-width: 72px; aspect-ratio: var(--ar-blocks); background-image: url(../img/st-blocks.webp); }
.sec--closing .o1 { left: -14px; bottom: 0; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-bear-bl); background-image: url(../img/st-bear-bl.webp); }
.sec--closing .o2 { right: -10px; bottom: 0; width: 30vw; max-width: 118px; aspect-ratio: var(--ar-bear-sweater); background-image: url(../img/st-bear-sweater.webp); transform: scaleX(-1); }

@media (min-width: 1024px) { .phw--side { --pw: min(19vw, 230px); } #side .ttl { max-width: 400px; margin-inline: auto; padding: 40px 16px 18px; } .side__in .ttl__name { font-size: 2.6rem; } .side__in .ttl__kicker { font-size: 1.8rem; } }