/* Unfiltered Café & Bakery: shared look for every page.
   Page-only styles live in each page's own @push('styles') block. */
:root{--bg:#22140D;--glow:#2F1D13;--brown:#3B200D;--y:#FCF389;--blue:#9BE7F9;--cream:#F4ECDC;--muted:#B9A890;--line:rgba(252,243,137,.16);
--serif:'Instrument Serif',Georgia,serif;--sans:'Archivo',system-ui,sans-serif;--ar:'Noto Kufi Arabic',sans-serif;
/* the U shape is written into the stylesheet itself (images/brand/u-mask.svg), so no picture is ever drawn before the U has arrived */
--umask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIzIiBoZWlnaHQ9IjQ1MiIgdmlld0JveD0iMCAwIDYyMyA0NTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81OTdfMTc2MikiPgo8cGF0aCBkPSJNNjIzIDE0MC4zODRDNjIzIDM1NS4xMjggNDA1Ljg2OSA1MTkuMTY5IDE3OS4yNTggNDI0LjY5NUMxMTAuNjQ5IDM5Ni4wODYgNTYuMDUzNyAzNDEuMzcxIDI3LjQwMTcgMjcyLjc5NUMtMTAuMTA2NSAxODMuMDA5IC02LjkyODcgOTQuNzg3NiAyMy43NTUxIDIwLjg0MzlDMjkuMDE2NiA4LjE4MTIzIDQxLjMxMSAwIDU0Ljk1OTggMEgxODcuMjI4QzIwNy44MDUgMCAyMjMuNTkgMTguMjM4NCAyMjAuNjIxIDM4LjY2NTRDMjE2LjE0MSA2OS40MTAyIDIxMy42NCAxMDIuOTY5IDIxMy42NCAxMzguMDkxQzIxMy42NCAyODUuODc0IDI1Ny40NTIgNDA1LjY3NCAzMTEuNDc0IDQwNS42NzRDMzY1LjQ5NiA0MDUuNjc0IDQwOS4zNiAyODUuODc0IDQwOS4zNiAxMzguMDkxQzQwOS4zNiAxMDIuOTY5IDQwNi45MTEgNjkuMzU4MSA0MDIuMzc5IDM4LjY2NTRDMzk5LjQxIDE4LjIzODQgNDE1LjE5NCAwIDQzNS43NzIgMEg1NjguMDRDNTgxLjU4NSAwIDU5My44NzkgOC4wNzcwMSA1OTkuMTQxIDIwLjU4MzRDNjA1LjM0IDM1LjUzODkgNjEwLjQ0NSA1MS4wNjc2IDYxNC4zNTIgNjcuMTE3NEM2MTkuOTc4IDkwLjYxODkgNjIzLjA1MiAxMTUuMjE1IDYyMy4wNTIgMTQwLjM4NEg2MjNaIiBmaWxsPSIjRkNGMzg5Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTk3XzE3NjIiPgo8cmVjdCB3aWR0aD0iNjIzIiBoZWlnaHQ9IjQ1MiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K")}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:thin;scrollbar-color:#3B200D #22140D}
body{background:var(--bg);color:var(--cream);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.u{-webkit-mask:var(--umask) center/contain no-repeat;mask:var(--umask) center/contain no-repeat}
.cover{background-size:cover;background-position:center}
.ar{font-family:var(--ar);direction:rtl}

/* buttons and type */
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--y);color:var(--brown);font:650 15px/1 var(--sans);padding:17px 28px;border-radius:999px;letter-spacing:.01em;transition:transform .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(252,243,137,.5)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(244,236,220,.4)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--y);color:var(--y)}
.eyebrow{font:650 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--y)}
.h-xl{font:400 clamp(58px,9.2vw,150px)/.9 var(--serif);letter-spacing:-.015em}
.h-l{font:400 clamp(42px,5.4vw,84px)/.96 var(--serif);letter-spacing:-.01em}
.h-m{font:400 clamp(30px,3.2vw,46px)/1.05 var(--serif)}
.lede{font-size:clamp(16px,1.3vw,19px);color:var(--muted);max-width:34em}
/* no lonely last words on short intro lines; long paragraphs keep their natural wrap */
.lede,.hx-lede,.lead{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* header */
.site-h{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:30px;padding:20px clamp(20px,4vw,56px);transition:background .35s,padding .35s,opacity .7s,transform .7s,box-shadow .35s}
.site-h.solid{background:rgba(34,20,13,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand .badge{width:46px;height:46px;transition:width .35s,height .35s}
.site-h.solid .brand .badge{width:40px;height:40px}
.brand .wm{height:16px;width:auto}
.nav{display:flex;gap:32px;margin-left:auto;font:500 14.5px/1 var(--sans)}
.nav a{white-space:nowrap;opacity:.82;transition:opacity .2s,color .2s}.nav a:hover{opacity:1;color:var(--y)}
.nav a[aria-current="page"]{opacity:1;color:var(--y)}
.open-pill{display:flex;align-items:center;gap:9px;font:500 13px/1 var(--sans);padding:11px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,236,220,.22);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(155,231,249,.18)}
.dot.closed{background:var(--muted);box-shadow:0 0 0 4px rgba(185,168,144,.16)}
.h-cta{padding:13px 20px;font-size:14px}
.burger{display:none;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(244,236,220,.25);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:var(--cream)}

/* phone menu sheet */
.sheet{position:fixed;inset:0;z-index:70;background:var(--bg);padding:24px;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.sheet.on{transform:none}.sheet .x{align-self:flex-end;font-size:30px;width:46px;height:46px}
.sheet nav{display:flex;flex-direction:column;gap:6px;margin-top:30px}.sheet nav a{font:400 46px/1.15 var(--serif)}
.sheet nav a[aria-current="page"]{color:var(--y)}
.sheet .open-pill{margin-top:auto;align-self:flex-start}
.nav{gap:clamp(16px,2.2vw,32px)}
@media (max-width:960px){.nav,.site-h>.open-pill,.h-cta{display:none}.burger{display:flex;margin-left:auto}.brand .wm{height:13px}.brand .badge{width:40px;height:40px}}
body.intro .site-h{opacity:0;transform:translateY(-14px);pointer-events:none}

/* footer */
footer.f{border-top:1px solid var(--line);padding:70px 0 40px;background:radial-gradient(ellipse at 50% 0,var(--glow),var(--bg) 70%)}
.f .big{width:100%;height:auto;opacity:.95;margin-bottom:56px}
.f .cols{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:40px;font-size:15px;color:var(--muted)}.f .cols b{display:block;color:var(--cream);font:650 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.f .cols a{display:block;margin-bottom:6px}.f .cols a:hover{color:var(--y)}
.f .f-badge{width:84px;height:84px}
.f .base{display:flex;justify-content:space-between;margin-top:56px;font-size:13px;color:#7d6d58;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.f .cols{grid-template-columns:1fr 1fr}}

/* fade in on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}

/* footer credit: the small SM badge */
.f .base{align-items:center}
.f .base .credit{display:inline-flex;opacity:.7}
.f .base .credit img{width:44px;height:44px}

/* WhatsApp logo next to its links */
.wa-ic{width:1.05em;height:1.05em;margin-right:.55em;vertical-align:-.14em;flex:none}
.f .cols .wa-ic{width:15px;height:15px;margin-right:8px}
.btn .wa-ic{width:18px;height:18px;margin-right:0;vertical-align:middle}
