/* O03 · Minimalist Halal Bihalal: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-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: 600; font-display: swap; src: url("../fonts/fraunces-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: 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: 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: "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: "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-lantern: 150 / 508; --sx-lantern: 972.0; --sy-lantern: 53.5; --sw-lantern: 69.25; }
.phw { --cx0: 60; --cy0: 60; --cw: 350; --ch: 380; }

/* O03 · Minimalist Halal Bihalal: warm white, sage and olive, fine geometric line ornaments, the doorway photo in an arch,
   a calm serif title with a sage pill and a quote, a sage footer; the hanging lantern from the mockup. */
:root {
  --bg: #f6f3ea; --bg2: #ecebdd; --ink: #2f3527; --muted: #66705a; --accent: #5d6b42; --accent2: #b7a06a;
  --line: rgb(93 107 66 / .2);
  --card: #fffdf7; --card-line: #e5e1d0; --card-shadow: 0 8px 22px rgb(70 80 50 / .07); --radius: 14px;
  --btn-bg: linear-gradient(180deg, #66754a, #4e5a38); --btn-ink: #f8f6ec; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(78 90 56 / .28);
  --f-display: "Fraunces", Georgia, serif; --f-body: "Lora", Georgia, serif; --f-head: "Fraunces", Georgia, serif; --f-num: "Fraunces", Georgia, serif;
  --name-font: "Lora", Georgia, serif; --name-size: 1.15rem; --name-weight: 600; --name-color: #3f4a2c;
  --head-size: 1.42rem; --head-weight: 500; --head-color: #3f4a2c; --head-ink: #3f4a2c;
  --bism-color: #6d7a4c;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: radial-gradient(120% 60% at 50% 0, #fbf9f2, #f6f3ea 70%);
  --guest-bg: #fffdf7; --guest-line: #e2dcc8;
  --cd-title: #4e5a38; --cd-num: #3f4a2c; --cd-label: #66705a;
  --cd-tile: #fffdf7; --cd-tile-border: 1px solid #e2dcc8; --cd-tile-radius: 10px; --cd-tile-shadow: 0 4px 10px rgb(70 80 50 / .06);
  --dt-ic: #5d6b42; --dt-ic-bg: #ecebdd; --dt-label: #4e5a38; --av-bg: #e2e4d2; --av-ink: #5d6b42;
  --gal-radius: 12px; --gal-shadow: 0 8px 18px rgb(70 80 50 / .1);
}
body { background: #f6f3ea; }
.inv { background: transparent; }
/* faint geometric line ornaments in the corners */
#gate::before, .sec--hero::before, .sec--gallery::before, .sec--wishes::before { content: ""; position: absolute; width: 190px; height: 190px; pointer-events: none;
  background: url(../img/o03-khatam.svg) 0 0 / 72px 72px; -webkit-mask: radial-gradient(circle at 100% 100%, #000 25%, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000 25%, transparent 70%); }
#gate::before { position: fixed; right: 0; bottom: 0; }
.sec--hero::before { right: 0; bottom: 0; }
.sec--gallery::before { left: 0; top: 0; transform: scale(-1); }
.sec--wishes::before { right: 0; top: 0; transform: scaleY(-1); }

/* The doorway photo in an arch */
.phw .photo { background: none; -webkit-mask: url(../img/o03-arch.svg) center / 100% 100% no-repeat; mask: url(../img/o03-arch.svg) center / 100% 100% no-repeat; }
.phw .photo img { object-position: 50% 30%; }
.phw::before { content: ""; inset: 10px -10px -6px; z-index: -1; background: #ecebdd; -webkit-mask: url(../img/o03-arch.svg) center / 100% 100% no-repeat; mask: url(../img/o03-arch.svg) center / 100% 100% no-repeat; }
.phw--cover { --pw: min(54vw, 210px); margin: 4px auto 14px; }
.phw--hero { --pw: min(62vw, 240px); margin: 4px auto 16px; }

/* Title: Arabic line, the small invitation in capitals, the serif title, a sage pill, the quote, the hosts */
.ttl { gap: 2px; }
.ttl__bism { font-size: 1.5rem; line-height: 1.6; }
.ttl .lead { font: 600 .68rem/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #4e5a38; max-width: 300px; margin-top: 2px; }
.ttl__kicker { margin-top: 4px; }
.ttl__kicker b { display: block; font: 500 2.3rem/1.02 var(--f-display); color: #4e5a35; letter-spacing: -.01em; }
.ttl__kicker b:last-child { font: 600 2.75rem/1.05 var(--f-display); }
.ttl__tag { margin-top: 10px; }
.ttl__tag span { display: inline-flex; align-items: center; gap: 10px; font: 400 .9rem/1.3 var(--f-body); color: #3f4a2c; background: #e9e8d6; padding: 6px 16px; border-radius: 999px; }
.ttl .ttl__tag span::before, .ttl .ttl__tag span::after { content: ""; width: 12px; height: 12px; background: url(../img/o03-spark.svg) center / contain no-repeat; }
.ttl__prayer { font: italic 400 .88rem/1.6 var(--f-body); color: #5a6050; max-width: 320px; }
.ttl .orn--div svg { width: 120px; margin: 6px auto 4px; color: #b7a06a; }
.ttl__family { margin-top: 8px; }
.ttl__family span { font: 400 .92rem/1.3 var(--f-body); color: #4e5a38; }
.ttl__name { margin: 2px 0 0; }
.ttl__sub span { font: 400 .85rem/1.3 var(--f-body); color: #66705a; background: none; padding: 0; }
.gate__date, .side__date { color: #4e5a38; font-weight: 600; margin-top: 14px; }

/* Headings between thin lines and sparkles */
.h-sec__t { gap: 12px; }
.h-sec__t::before, .h-sec__t::after { content: ""; width: 30px; height: 12px; flex: none; background: url(../img/o03-spark.svg) right center / 12px 12px no-repeat, linear-gradient(#b7a06a, #b7a06a) left center / 16px 1px no-repeat; }
.h-sec__t::after { transform: scaleX(-1); }
.h-sec__ic { color: #5d6b42; }

/* Countdown on a sage card */
.sec--countdown { padding-top: 22px; }
.cd-box { background: #e9e8d6; border: 1px solid #dcd8c1; border-radius: 18px; padding: 14px 14px 16px; box-shadow: 0 10px 22px rgb(70 80 50 / .08); }
.cd__t { font: 400 1rem/1.3 var(--f-body); gap: 10px; }
.cd__t::before, .cd__t::after { content: ""; width: 30px; height: 1px; background: #a5a07a; }
.cd__n { font-weight: 500; font-size: 2rem; }
.sec--countdown .link--cal { color: #4e5a38; }

/* Details: white cards with sage icon circles */
.dt { border-color: #e9e4d2; }
.dt__ic { border-radius: 50%; }
.btn--map { --map-ink: #4e5a38; --map-line: #d6d2bc; --map-bg: #fffdf7; }
.link, .link--map, .link--cal { color: #4e5a38; }

/* Wishes: a sage composer */
.wcomp { background: #ecebdd; border-color: #dcd8c1; }
.wish { border-color: #ebe6d4; }

/* Closing: the sage footer */
.sec--closing { background: #5d6b47; color: #f3efe2; padding: 56px 22px 70px; margin-top: 20px; border-radius: 60% 60% 0 0 / 30px 30px 0 0; }
.sec--closing::before { content: ""; display: block; width: 46px; height: 40px; margin: 0 auto 10px; background: url(../img/o03-house.svg) center / contain no-repeat; }
.closing__t span { font-family: var(--f-display); font-weight: 500; color: #f8f4e6; }
.sec--closing .orn--div svg { color: #d9cba2; }
.closing__p { color: #ece6d2; }
.closing__p + .closing__p { font-size: .85rem; letter-spacing: .04em; color: #dcd5bd; }
.closing__sign, .made { color: #ece6d2; }

/* ---------- The hanging lantern from the mockup ---------- */
.o { filter: drop-shadow(0 8px 10px rgb(80 70 40 / .2)); }
.gate__in .o1, .side__in .o1 { right: 2px; top: -30px; width: 14vw; max-width: 56px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.gate__in .o2, .side__in .o2 { left: 2px; top: -50px; width: 11vw; max-width: 44px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.sec--hero .deco { z-index: 3; }
.sec--hero .o1 { right: 4px; top: -10px; width: 15vw; max-width: 60px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }
.sec--wishes .o1 { left: 6px; top: -14px; width: 10vw; max-width: 40px; aspect-ratio: var(--ar-lantern); background-image: url(../img/st-lantern.webp); }

html:lang(en) .ttl .lead { letter-spacing: .16em; }

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