/* O01 · Lebaran Green & Gold: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lora-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: "Satisfy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satisfy-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: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-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: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-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: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-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: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-arabic.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-ketupat: 180 / 534; --sx-ketupat: 600.0; --sy-ketupat: 55.5; --sw-ketupat: 80.0; --ar-lantern-a: 110 / 234; --sx-lantern-a: 677.0; --sy-lantern-a: 108.0; --sw-lantern-a: 45.0; --ar-lantern-b: 110 / 181; --sx-lantern-b: 1007.75; --sy-lantern-b: 127.0; --sw-lantern-b: 50.25; --ar-mosque: 200 / 283; --sx-mosque: 1029.25; --sy-mosque: 312.75; --sw-mosque: 92.75; --ar-mosques-s: 280 / 264; --sx-mosques-s: 932.75; --sy-mosques-s: 477.75; --sw-mosques-s: 76.75; --ar-leaves-l: 220 / 88; --sx-leaves-l: 72.75; --sy-leaves-l: 816.25; --sw-leaves-l: 124.75; --ar-leaves-r: 230 / 93; --sx-leaves-r: 926.75; --sy-leaves-r: 815.75; --sw-leaves-r: 124.5; --ar-ketupat-l: 170 / 298; --sx-ketupat-l: 8.0; --sy-ketupat-l: 636.0; --sw-ketupat-l: 87.25; --ar-ketupat-r: 170 / 308; --sx-ketupat-r: 1030.0; --sy-ketupat-r: 637.0; --sw-ketupat-r: 84.0; --ar-jasmine: 300 / 126; }
.phw { --cx0: 40; --cy0: 70; --cw: 530; --ch: 410; }

/* O01 · Lebaran Green & Gold: cream and emerald with gold, the Islamic star lattice, the title on an emerald arch panel with
   "Taqabbalallahu minna wa minkum", a gold "Idul Fitri" and a framed host plaque; ketupat, lanterns, mosques, leaves and jasmine from the mockup. */
:root {
  --bg: #f7f2e4; --bg2: #ece5d0; --ink: #1d3a2c; --muted: #4b5f52; --accent: #b8913e; --accent2: #0f4a35;
  --line: rgb(184 145 62 / .3);
  --card: #fffcf3; --card-line: #e2d2a4; --card-shadow: 0 10px 24px rgb(15 74 53 / .1); --radius: 16px;
  --btn-bg: linear-gradient(180deg, #1b6a4b, #0f4a35); --btn-ink: #fbf5e2; --btn-border: 1.5px solid #d3b36a; --btn-shadow: 0 8px 20px rgb(15 74 53 / .28);
  --f-display: "Lora", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Lora", Georgia, serif; --f-num: "Lora", Georgia, serif; --f-script: "Satisfy", cursive;
  --name-size: 1.12rem; --name-weight: 700; --name-color: #fbf3d9;
  --head-size: 1.4rem; --head-weight: 700; --head-color: #1f4a33; --head-ink: #1f4a33;
  --bism-color: #e3c477;
  --photo-radius: 18px; --photo-border: 0; --photo-shadow: none;
  --gate-bg: url(../img/o01-khatam.svg), linear-gradient(180deg, #f3eedd, #f7f2e4 50%, #efe8d4);
  --guest-bg: #fffcf3; --guest-line: #e2d2a4;
  --cd-title: #1f4a33; --cd-num: #fbf3d9; --cd-label: #e8dfc3;
  --cd-tile: linear-gradient(180deg, #1b6a4b, #0f4a35); --cd-tile-border: 1px solid #c9a24a; --cd-tile-radius: 12px; --cd-tile-shadow: 0 6px 12px rgb(15 74 53 / .2);
  --dt-ic: #0f4a35; --dt-ic-bg: #efe7cf; --dt-label: #6b5a2e; --av-bg: #e9dfc3; --av-ink: #0f4a35;
  --gal-border: 2px solid #d9b65e; --gal-shadow: 0 10px 20px rgb(0 0 0 / .25); --gal-radius: 12px;
}
body { background: url(../img/o01-khatam.svg), #f7f2e4; }
.inv { background: transparent; }

/* The family photo in a gold frame; the emerald arch panel rises over its foot */
.phw .photo { border-radius: 18px; box-shadow: 0 0 0 3px #fffaea, 0 0 0 5px #c9a24a, 0 14px 28px rgb(15 74 53 / .25); }
.phw--cover { --pw: min(70vw, 280px); margin: 6px auto 0; }
.phw--hero { --pw: min(84vw, 350px); margin: 4px auto 0; }

/* The title on an emerald arch panel with a gold edge; the mockup's mosques stand in its lower corners */
.ttl { position: relative; z-index: 3; color: #f4ecd4; border: 2px solid #c9a24a; border-radius: 170px 170px 20px 20px / 64px 64px 20px 20px; padding: 26px 16px 24px; margin: -34px 2px 0;
  background: url(../img/st-mosque.webp) right 4px bottom 4px / 22% auto no-repeat, url(../img/st-mosques-s.webp) left 6px bottom 4px / 34% auto no-repeat,
    url(../img/o01-khatam-w.svg), linear-gradient(180deg, #186447, #0f4a35 60%, #0c3f2d);
  box-shadow: inset 0 0 0 4px #0f4a35, inset 0 0 0 5px rgb(217 182 94 / .45), 0 14px 30px rgb(15 74 53 / .25); }
.ttl__bism { font-size: 1.55rem; line-height: 1.5; color: #e3c477; }
.ttl__pre span { font: 400 .98rem/1.3 var(--f-body); color: #f3ead0; }
.ttl__theme { margin-top: -2px; }
.ttl__theme span { font: 400 2.5rem/1.1 var(--f-script); background: linear-gradient(180deg, #f8e7a8, #d9b65e 55%, #b8913e); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .12em; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25)); }
.ttl__theme b { font-weight: 400; }
.ttl__year span { font: 600 .92rem/1.2 var(--f-body); color: #f3ead0; letter-spacing: .04em; }
.ttl .orn--div svg { width: 150px; margin: 6px auto 2px; color: #d9b65e; }
.ttl__kicker b { display: block; font: 700 1.95rem/1.08 var(--f-display); background: linear-gradient(180deg, #f6e3a6 0, #d9b65e 50%, #b8913e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl__kicker b:last-child { font-size: 2.35rem; }
.ttl .lead { color: #ece3c7; font-size: .95rem; max-width: 300px; }
/* The hosts on a framed plaque with pointed ends */
.ttl__family { position: relative; z-index: 1; margin: 16px 0 -32px; }
.ttl__family span { font: 600 .9rem/1.2 var(--f-body); color: #e3c477; }
.ttl__name { margin: 0; }
.ttl__name span { position: relative; padding: 30px 24px 10px; min-width: min(78vw, 300px); background: linear-gradient(180deg, #0f4a35, #0c3d2c); border: 1.5px solid #c9a24a;
  border-radius: 10px; box-shadow: inset 0 0 0 3px #0f4a35, inset 0 0 0 4px rgb(217 182 94 / .5), 0 8px 18px rgb(0 0 0 / .25); }
.ttl__name span::before, .ttl__name span::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #0f4a35; border: 1.5px solid #c9a24a; transform: rotate(45deg); }
.ttl__name span::before { left: -8px; } .ttl__name span::after { right: -8px; }
.gate__date, .side__date { color: #1f4a33; font-weight: 700; letter-spacing: .02em; margin-top: 16px; }

/* Headings: emerald serif between gold lines and stars */
.h-sec__t { gap: 10px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 34px; height: 12px; flex: none; background: url(../img/o01-star.svg) right center / 12px 12px no-repeat, linear-gradient(#c9a24a, #c9a24a) left center / 24px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__ic { color: #b8913e; }

/* Countdown on a cream card with colons between the emerald tiles */
.sec--countdown { padding-top: 28px; }
.cd-box { background: #fffcf3; border: 1.5px solid #d9c48c; border-radius: 20px; padding: 16px 14px 18px; box-shadow: 0 0 0 5px rgb(255 252 243 / .7), var(--card-shadow); }
.cd__t { font-size: 1.15rem; font-weight: 700; gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 18px; height: 18px; background: url(../img/o01-star.svg) center / contain no-repeat; }
.cd { gap: 16px; }
.cd__c + .cd__c::before { content: ":"; position: absolute; left: -12px; top: 50%; transform: translateY(-60%); font: 700 1.4rem var(--f-num); color: #0f4a35; }
.cd__n { font-weight: 700; }

/* Details: one cream card in a gold frame */
.sec--details { background: url(../img/o01-khatam.svg), #f4eedb; border-top: 2px solid #d9c48c; border-bottom: 2px solid #d9c48c; }
.dts { gap: 0; background: #fffcf3; border: 1.5px solid #d9c48c; border-radius: 18px; 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: 1px solid rgb(184 145 62 / .3); }
.dt__ic { border-radius: 12px; }
.btn--map { --map-ink: #0f4a35; --map-line: #d9c48c; --map-bg: #fffcf3; }
.link, .link--map, .link--cal { color: #0f4a35; }

/* Gallery on an emerald band */
.sec--gallery { background: url(../img/o01-khatam-w.svg), linear-gradient(180deg, #186447, #0f4a35); border-top: 3px solid #c9a24a; border-bottom: 3px solid #c9a24a; }
.sec--gallery .h-sec__t { color: #f6e8bd; }
.sec--gallery .h-sec__ic { color: #e3c477; }
.sec--gallery .hint { color: #d9ccaa; }
.wcomp { border-color: #e2d2a4; }
.wish { border-color: #ece0bd; }
.wish__av { color: #0f4a35; font-family: var(--f-display); }

/* Closing: an emerald band */
.sec--closing { background: url(../img/o01-khatam-w.svg), linear-gradient(180deg, #186447, #0f4a35); color: #f4ecd4; margin-top: 24px; border-radius: 50% 50% 0 0 / 46px 46px 0 0; padding: 64px 22px 170px; border-top: 2px solid #c9a24a; }
.closing__t span { color: #f3dc9b; }
.sec--closing .orn--div svg { color: #d9b65e; }
.closing__p, .closing__sign { color: #ece3c7; }
.made { color: #ece3c7; }

/* ---------- Ketupat, lanterns, leaves, mosques and jasmine from the mockup ---------- */
.o { filter: drop-shadow(0 6px 8px rgb(30 50 20 / .22)); }
.gate__in .o1, .side__in .o1 { left: -6px; top: -30px; width: 17vw; max-width: 70px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); }
.gate__in .o2, .side__in .o2 { left: 54px; top: -24px; width: 9vw; max-width: 38px; aspect-ratio: var(--ar-lantern-a); background-image: url(../img/st-lantern-a.webp); }
.gate__in .o3, .side__in .o3 { right: -8px; top: -24px; width: 10vw; max-width: 42px; aspect-ratio: var(--ar-lantern-b); background-image: url(../img/st-lantern-b.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { left: 2px; top: -6px; width: 17vw; max-width: 70px; aspect-ratio: var(--ar-ketupat); background-image: url(../img/st-ketupat.webp); }
.sec--hero .o2 { right: 6px; top: -4px; width: 10vw; max-width: 42px; aspect-ratio: var(--ar-lantern-b); background-image: url(../img/st-lantern-b.webp); }
.sec--details .o1 { left: 0; top: -2px; width: 17vw; max-width: 68px; aspect-ratio: var(--ar-ketupat-l); background-image: url(../img/st-ketupat-l.webp); }
.sec--details .o2 { right: 0; top: -2px; width: 17vw; max-width: 68px; aspect-ratio: var(--ar-ketupat-r); background-image: url(../img/st-ketupat-r.webp); }
.sec--details .o3 { left: 0; bottom: 0; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-leaves-l); background-image: url(../img/st-leaves-l.webp); }
.sec--details .o4 { right: 0; bottom: 0; width: 30vw; max-width: 120px; aspect-ratio: var(--ar-leaves-r); background-image: url(../img/st-leaves-r.webp); }
.sec--wishes .o1 { left: 0; bottom: 0; width: 48vw; max-width: 190px; aspect-ratio: var(--ar-jasmine); background-image: url(../img/jasmine.webp); filter: none; }
.sec--wishes .o2 { right: 0; bottom: 0; width: 48vw; max-width: 190px; aspect-ratio: var(--ar-jasmine); background-image: url(../img/jasmine.webp); filter: none; transform: scaleX(-1); }
.sec--wishes { padding-bottom: 76px; }
.sec--closing .o1 { left: 12px; top: 18px; width: 11vw; max-width: 44px; aspect-ratio: var(--ar-lantern-a); background-image: url(../img/st-lantern-a.webp); }
.sec--closing .o2 { right: 12px; top: 18px; width: 11vw; max-width: 44px; aspect-ratio: var(--ar-lantern-b); background-image: url(../img/st-lantern-b.webp); }
.sec--closing .o3 { left: 50%; bottom: 0; width: 50vw; max-width: 200px; margin-left: max(-25vw, -100px); aspect-ratio: var(--ar-mosques-s); background-image: url(../img/st-mosques-s.webp); filter: none; }

html:lang(en) .ttl__kicker b:first-child { font-size: 1.7rem; }

@media (min-width: 1024px) { .phw--side { --pw: min(26vw, 330px); } #side .ttl { max-width: 420px; margin-inline: auto; } }