:root{--hh:74px;--mx-bg:var(--bg);--mx-ink:var(--cream);--mx-mute:var(--muted);--mx-acc:var(--y);--mx-acc-ink:var(--brown);--mx-line:var(--line);
 --mx-card:#2F1D13;--mx-panel:#2A1910;--mx-panel-ink:var(--cream);--mx-chip:rgba(244,236,220,.06);--mx-bar:rgba(38,23,15,.92)}
html[lang=ar]{--serif:'Noto Kufi Arabic',sans-serif;--sans:'Noto Kufi Arabic','Archivo',sans-serif}
html[lang=ar] body{letter-spacing:0}
html[lang=ar] .eyebrow,html[lang=ar] .mx-eb{letter-spacing:0}
body{background:var(--mx-bg);color:var(--mx-ink)}
.site-h .lang-b{font:600 14px/1 var(--ar);padding:12px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,236,220,.22);min-height:44px}
html[lang=ar] .site-h .lang-b{font-family:'Archivo',sans-serif}
.site-h .lang-b:hover{box-shadow:inset 0 0 0 1px var(--y);color:var(--y)}
.nav a[aria-current]{opacity:1;color:var(--y)}
@media (max-width:960px){.site-h .lang-b{margin-left:auto}html[dir=rtl] .site-h .lang-b{margin-left:0;margin-right:auto}.burger{margin-left:10px}html[dir=rtl] .burger{margin-left:0;margin-right:10px}}
html[dir=rtl] .nav{margin-left:0;margin-right:auto}
#mx{display:block;min-height:100vh}
/* photo or the U placeholder */
.mx-ph{display:block;position:relative;overflow:hidden;background:#24150b}
.mx-ph img{width:100%;height:100%;object-fit:cover}
.mx-none{background:radial-gradient(circle at 50% 40%,#3B200D,#24150b 75%);display:grid;place-items:center}
.mx-none .u{display:block;width:44%;aspect-ratio:623/452;background:var(--y);opacity:.85}
.mx-tag{display:inline-flex;align-items:center;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);background:var(--y);padding:5px 8px;border-radius:999px;vertical-align:middle;white-space:nowrap}
html[lang=ar] .mx-tag{letter-spacing:0;font-size:11.5px}
/* sticky section chips */
.mx-chips{position:sticky;top:var(--hh);z-index:40;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px clamp(16px,4vw,56px);background:var(--mx-chips-bg,rgba(34,20,13,.92));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--mx-line)}
.mx-chips::-webkit-scrollbar{display:none}
.mx-chips button{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--mx-ink);box-shadow:inset 0 0 0 1px var(--mx-line);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.mx-chips button small{font-size:12px;opacity:.6;margin-inline-start:6px}
.mx-chips button[aria-current=true]{background:var(--mx-acc);color:var(--mx-acc-ink);box-shadow:none}
.mx-chips button:focus-visible,.mx-bar button:focus-visible,.mx-pill:focus-visible,.mx-x:focus-visible,[data-dish]:focus-visible{outline:2px solid var(--mx-acc);outline-offset:2px}
/* bottom bar */
.mx-bar{position:fixed;z-index:58;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--mx-bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--mx-line),0 20px 40px -14px rgba(0,0,0,.7)}
.mx-bar button{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;border-radius:999px;font:600 14.5px/1 var(--sans);color:var(--mx-bar-ink,var(--cream));transition:background .2s,color .2s}
.mx-bar button:hover{background:rgba(252,243,137,.12);color:var(--y)}
.mx-bar svg{width:20px;height:20px;flex:0 0 auto}
.mx-top{position:fixed;z-index:57;right:22px;bottom:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mx-bar);box-shadow:0 0 0 1px var(--mx-line);color:var(--mx-bar-ink,var(--cream));opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s}
html[dir=rtl] .mx-top{right:auto;left:22px}
.mx-top.on{opacity:1;transform:none;pointer-events:auto}
.mx-top svg{width:20px;height:20px}
@media (max-width:760px){
 .mx-bar{left:0;right:0;bottom:0;transform:none;border-radius:20px 20px 0 0;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
 .mx-bar button{flex-direction:column;gap:5px;font-size:12px;padding:8px 6px;min-height:56px;flex:1;border-radius:14px}
 .mx-top{bottom:86px;right:16px}html[dir=rtl] .mx-top{left:16px}
 body{padding-bottom:76px}
}
/* overlays */
.mx-scrim{position:fixed;inset:0;z-index:80;background:rgba(8,4,2,.62);opacity:0;pointer-events:none;transition:opacity .4s}
.mx-scrim.on{opacity:1;pointer-events:auto}
body.mx-lock{overflow:hidden}
[hidden]{display:none!important}
.mx-sheet{position:fixed;z-index:90;left:50%;bottom:0;width:min(720px,100%);max-height:86vh;transform:translate(-50%,104%);background:var(--mx-panel);color:var(--mx-panel-ink);border-radius:26px 26px 0 0;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 -30px 60px -20px rgba(0,0,0,.6)}
.mx-sheet.on{transform:translate(-50%,0)}
.mx-sheet header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px}
.mx-sheet header h2{font:400 34px/1 var(--serif)}
.mx-sheet .mx-body{overflow-y:auto;padding:0 22px 28px;overscroll-behavior:contain}
.mx-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(244,236,220,.25);font-size:22px;line-height:1;flex:0 0 auto}
.mx-grp{font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mx-acc);margin:20px 0 8px}
html[lang=ar] .mx-grp{letter-spacing:0;font-size:13px}
.mx-srow{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:8px 6px;border-radius:14px;text-align:start;transition:background .2s}
.mx-srow:hover,.mx-srow[aria-current=true]{background:rgba(252,243,137,.08)}
.mx-srow .mx-ph{width:46px;height:46px;border-radius:12px;flex:0 0 auto}
.mx-srow b{font:500 17px/1.2 var(--sans);flex:1}
.mx-srow small{font-size:14px;color:var(--mx-mute)}
.mx-loved{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mx-lc{text-align:start;display:flex;flex-direction:column;gap:8px}
.mx-lc .mx-ph{aspect-ratio:4/5;border-radius:16px;width:100%}
.mx-lc b{font:400 22px/1.1 var(--serif)}.mx-lc span{font-size:14px;color:var(--mx-mute)}.mx-lc em{font-style:normal;font-weight:600;color:var(--mx-acc);font-size:15px}
@media (max-width:760px){.mx-loved{grid-template-columns:1fr 1fr}}
/* search */
.mx-search{position:fixed;z-index:90;inset:0;background:var(--mx-panel);color:var(--mx-panel-ink);display:flex;flex-direction:column;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.mx-search.on{opacity:1;transform:none;pointer-events:auto}
.mx-sbar{display:flex;align-items:center;gap:12px;padding:16px clamp(16px,4vw,56px);border-bottom:1px solid var(--mx-line)}
.mx-sbox{flex:1;display:flex;align-items:center;gap:12px;border-radius:999px;padding:0 18px;min-height:54px;box-shadow:inset 0 0 0 1.5px var(--mx-acc);background:rgba(244,236,220,.04)}
.mx-sbox svg{width:20px;height:20px;flex:0 0 auto;color:var(--mx-acc)}
.mx-sbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:400 18px/1 var(--sans)}
.mx-sbox input::placeholder{color:var(--mx-mute)}
.mx-sres{flex:1;overflow-y:auto;padding:10px clamp(16px,4vw,56px) 40px;overscroll-behavior:contain}
.mx-sres .inner{max-width:760px;margin:0 auto}
.mx-hint{color:var(--mx-mute);font-size:15px;margin:18px 0 10px}
.mx-sugg{display:flex;flex-wrap:wrap;gap:8px}
.mx-sugg button{min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--mx-line);font-size:15px}
.mx-sugg button:hover{box-shadow:inset 0 0 0 1px var(--mx-acc);color:var(--mx-acc)}
.mx-r{display:flex;align-items:center;gap:14px;width:100%;padding:10px 8px;border-radius:14px;text-align:start;min-height:64px;animation:mxIn .3s both}
.mx-r:hover{background:rgba(252,243,137,.07)}
.mx-r .mx-ph{width:56px;height:56px;border-radius:14px;flex:0 0 auto}
.mx-r .t{flex:1;min-width:0}.mx-r .t b{display:block;font:500 17px/1.25 var(--sans)}.mx-r .t small{display:block;font-size:13.5px;color:var(--mx-mute);margin-top:2px}
.mx-r mark{background:rgba(252,243,137,.28);color:inherit;border-radius:3px;padding:0 1px}
.mx-r .p{font-weight:600;color:var(--mx-acc);white-space:nowrap}
@keyframes mxIn{from{opacity:0;transform:translateY(6px)}}
/* dish panel */
.mx-dish{position:fixed;z-index:95;top:0;bottom:0;right:0;width:min(500px,100%);background:var(--mx-panel);color:var(--mx-panel-ink);display:flex;flex-direction:column;transform:translateX(104%);transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 60px -20px rgba(0,0,0,.6)}
html[dir=rtl] .mx-dish{right:auto;left:0;transform:translateX(-104%)}
.mx-dish.on,html[dir=rtl] .mx-dish.on{transform:none}
.mx-dish .mx-x{position:absolute;top:16px;right:16px;z-index:3;background:rgba(34,20,13,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#F4ECDC;box-shadow:none}
html[dir=rtl] .mx-dish .mx-x{right:auto;left:16px}
.mx-dsc{flex:1;overflow-y:auto;overscroll-behavior:contain}
.mx-dph{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:#24150b}
.mx-dph>img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mx-dish.on .mx-dph>img{transform:none}
.mx-dph.lo{display:grid;place-items:center}
.mx-dph.lo .bl{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(24px) brightness(.55) saturate(1.1)}
.mx-dph.lo .fr{position:relative;width:46%;aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -14px rgba(0,0,0,.8)}
.mx-dph.lo .fr img{width:100%;height:100%;object-fit:cover}
.mx-dph.none{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#3B200D,#1d1108 70%)}
.mx-dph.none .u{width:30%;aspect-ratio:623/452;background:var(--y)}
.mx-dph .cap{position:absolute;left:16px;bottom:14px;font:600 12px/1 var(--sans);letter-spacing:.06em;color:rgba(244,236,220,.8);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.mx-db{padding:24px 26px 30px}
.mx-eb{font:700 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mx-acc)}
.mx-dt{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:12px 0 10px}
.mx-dt h2{font:400 clamp(34px,4vw,42px)/1 var(--serif)}
.mx-dt .p{font:650 19px/1.2 var(--sans);white-space:nowrap;padding-top:8px}
.mx-dl{font:italic 400 21px/1.3 var(--serif);color:var(--mx-acc);margin-bottom:8px}
html[lang=ar] .mx-dl{font-style:normal;font-size:17px}
.mx-dd{color:var(--mx-mute);font-size:16.5px}
.mx-add{display:flex;align-items:baseline;gap:10px;margin:26px 0 4px;padding-top:20px;border-top:1px solid var(--mx-line)}
.mx-add b{font:400 28px/1 var(--serif)}
.mx-add span{font-size:14px;color:var(--mx-mute)}
.mx-g{margin-top:18px}
.mx-gh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.mx-gh b{font:600 16px/1 var(--sans)}.mx-gh span{font-size:13.5px;color:var(--mx-mute)}
.mx-gh em{font-style:normal}
.mx-gh .req{margin-inline-start:auto;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--mx-acc);color:var(--mx-acc-ink)}
.mx-gh .opt{margin-inline-start:auto;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--mx-line);color:var(--mx-mute)}
html[lang=ar] .mx-gh .req,html[lang=ar] .mx-gh .opt{letter-spacing:0;font-size:12px}
.mx-pills{display:flex;flex-wrap:wrap;gap:8px}
.mx-pill{min-height:46px;padding:0 18px;border-radius:999px;font:500 16px/1 var(--sans);box-shadow:inset 0 0 0 1.5px rgba(244,236,220,.22);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.mx-pill i{font-style:normal;font-weight:700;font-size:14.5px;opacity:.85}
.mx-pill:hover{box-shadow:inset 0 0 0 1.5px var(--mx-acc)}
.mx-pill[aria-pressed=true]{background:var(--mx-acc);color:var(--mx-acc-ink);box-shadow:none}
.mx-pill:active{transform:scale(.96)}
.mx-pill.dim{opacity:.4}
.mx-pill.no{animation:mxNo .35s}
@keyframes mxNo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mx-al{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--mx-line);font-size:14.5px;color:var(--mx-mute)}
.mx-al .veg{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#2f4a32;color:#cfeccf}
.mx-df{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px calc(16px + env(safe-area-inset-bottom));background:var(--mx-acc);color:var(--mx-acc-ink)}
.mx-df span{font-size:14.5px;font-weight:500}
.mx-df b{font:800 24px/1 var(--sans);font-variant-numeric:tabular-nums;display:inline-block}
.mx-df b.bump{animation:mxBump .35s}
@keyframes mxBump{40%{transform:scale(1.12)}}
@media (max-width:760px){
 .mx-dish{top:auto;left:0;right:0;width:100%;height:92vh;border-radius:26px 26px 0 0;transform:translateY(104%)}
 html[dir=rtl] .mx-dish{transform:translateY(104%)}
 .mx-dish.on,html[dir=rtl] .mx-dish.on{transform:none}
 .mx-dph{aspect-ratio:4/3}
 .mx-db{padding:20px 20px 26px}.mx-df{padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
 .mx-sheet{max-height:88vh}
}
@media (prefers-reduced-motion:reduce){.mx-dph>img{transform:none}}
/* add-ons: a priced list under the last section */
.mx-xtra{max-width:880px;margin:clamp(56px,8vw,96px) auto 0;padding:clamp(26px,3vw,38px) clamp(20px,3vw,40px);border-radius:22px;background:var(--mx-chip);box-shadow:inset 0 0 0 1px var(--mx-line);color:var(--mx-ink)}
.mx-xtra.in{margin-left:0;margin-right:0;max-width:none}
.mx-xh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mx-xh h2{font:400 clamp(30px,3.4vw,44px)/1 var(--serif);margin:0;color:var(--mx-ink)}
.mx-xh span{font-size:14px;color:var(--mx-mute)}
.mx-xs{margin:10px 0 18px;color:var(--mx-mute);font-size:16px}
.mx-xl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px)}
.mx-xl li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-top:1px solid var(--mx-line);font-size:16px;min-height:44px}
.mx-xl b{font-weight:500}
.mx-xl i{flex:1;border-bottom:1px dotted var(--mx-line);transform:translateY(-4px);min-width:16px}
.mx-xl em{font-style:normal;font-weight:600;color:var(--mx-acc);white-space:nowrap}
@media (max-width:640px){.mx-xl{grid-template-columns:1fr}.mx-xl li:nth-child(n+2){border-top:1px solid var(--mx-line)}}
.mx-r.x{cursor:default}
.mx-xp{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font:300 26px/1 var(--sans);color:var(--mx-acc);box-shadow:inset 0 0 0 1px var(--mx-line)}

/* cold drinks wear blue, hot stays brown and yellow; no blue inside the matcha section (teal curtains) */
.mx-chips button[data-go="cold-coffee"],.mx-chips button[data-go="non-coffee-drinks"],.mx-chips button[data-go="iced-tea"],.mx-chips button[data-go="water"],.mx-chips button[data-go="juice"],.mx-chips button[data-go="soft-drinks"],.mx-chips button[data-go="ice-cream"]{color:var(--blue);box-shadow:inset 0 0 0 1px rgba(155,231,249,.45)}
.mx-chips button[data-go="cold-coffee"][aria-current=true],.mx-chips button[data-go="non-coffee-drinks"][aria-current=true],.mx-chips button[data-go="iced-tea"][aria-current=true],.mx-chips button[data-go="water"][aria-current=true],.mx-chips button[data-go="juice"][aria-current=true],.mx-chips button[data-go="soft-drinks"][aria-current=true],.mx-chips button[data-go="ice-cream"][aria-current=true]{background:var(--blue);color:var(--brown);box-shadow:none}
[data-sec="cold-coffee"],[data-sec="iced-tea"],[data-sec="water"],[data-sec="juice"],[data-sec="soft-drinks"],[data-sec="ice-cream"]{--mx-acc:var(--blue)}
[data-sec="cold-coffee"] h2,[data-sec="cold-coffee"] .no,[data-sec="iced-tea"] h2,[data-sec="iced-tea"] .no,[data-sec="water"] h2,[data-sec="water"] .no,[data-sec="juice"] h2,[data-sec="juice"] .no,[data-sec="soft-drinks"] h2,[data-sec="soft-drinks"] .no,[data-sec="ice-cream"] h2,[data-sec="ice-cream"] .no{color:var(--blue)!important}
[data-sec="cold-coffee"] .mx-ph,[data-sec="iced-tea"] .mx-ph,[data-sec="water"] .mx-ph,[data-sec="juice"] .mx-ph,[data-sec="soft-drinks"] .mx-ph,[data-sec="ice-cream"] .mx-ph{box-shadow:0 0 0 1.5px var(--blue)}
.demo-C{--mx-panel:#22140D}
.c-film{position:fixed;top:0;bottom:0;width:26px;z-index:1;pointer-events:none;opacity:.5;background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(252,243,137,.13) 10px 24px,transparent 24px 34px);-webkit-mask:linear-gradient(90deg,transparent 7px,#000 7px 19px,transparent 19px);mask:linear-gradient(90deg,transparent 7px,#000 7px 19px,transparent 19px)}
.c-film.l{left:6px}.c-film.r{right:6px}
.c-grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:cgr .6s steps(3) infinite}
@keyframes cgr{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.c-open{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--hh) + 40px) 24px 40px;position:relative;background:radial-gradient(ellipse 60% 50% at 50% 50%,#24150b,var(--bg) 70%);overflow:hidden}
.c-open>*:not(.c-mq){opacity:0;transform:translateY(10px);animation:cup 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.c-pres{font:600 13px/1 var(--sans);font-stretch:80%;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);animation-delay:.2s!important}
.c-open h1{font:400 clamp(80px,13vw,200px)/.85 var(--serif);letter-spacing:-.02em;margin:22px 0 18px;animation-delay:.6s!important}
.c-open h1 em{font-style:italic;color:var(--y)}
.c-tag{font:italic 400 clamp(20px,2vw,26px)/1.3 var(--serif);color:#e2d3b8;animation-delay:1s!important}
html[lang=ar] .c-tag{font-style:normal;font-size:18px}
.c-cue{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation-delay:1.3s!important}
@keyframes cup{to{opacity:1;transform:none}}
.c-open:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 58% 48% at 50% 50%,rgba(34,20,13,.94),rgba(34,20,13,.6) 72%,rgba(34,20,13,.82))}
.c-open>*:not(.c-mq){position:relative;z-index:2}
.c-open>.c-mq{position:absolute;inset:0;z-index:0;overflow:hidden;direction:ltr;display:flex;flex-direction:column;justify-content:center;gap:18px;opacity:1;transform:none;animation:none}
.c-mq .rw{display:flex;gap:18px;width:max-content;opacity:.55;animation:cmq 70s linear infinite}
.c-mq .rw.b{animation-direction:reverse;margin-left:-140px}
.c-mq img{width:230px;height:290px;object-fit:cover;border-radius:20px;flex:none}
@keyframes cmq{to{transform:translateX(-50%)}}
@media (max-width:760px){.c-mq img{width:150px;height:190px;border-radius:14px}.c-mq .rw{gap:12px}.c-open>.c-mq{gap:12px}}
@media (prefers-reduced-motion:reduce){.c-mq .rw{animation:none}}

.c-now{max-width:980px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.c-now h2,.c-reel h2.lab{font:600 13px/1 var(--sans);font-stretch:70%;letter-spacing:.5em;text-transform:uppercase;color:var(--y);text-align:center}
html[lang=ar] .c-now h2,html[lang=ar] .c-reel h2.lab{letter-spacing:0;font-size:15px}
.c-nowg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.c-nc{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;text-align:start}
.c-nc .mx-ph{position:absolute;inset:0}
.c-nc .mx-none .u{width:28%}
.c-nc:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(34,20,13,.92))}
.c-nc .t{position:absolute;z-index:2;left:20px;right:20px;bottom:18px}
.c-nc .t small{display:block;font:650 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--y);margin-bottom:8px}
.c-nc .t b{font:400 clamp(28px,3vw,40px)/1 var(--serif)}
.c-nc .t i{display:block;font:italic 400 18px/1.3 var(--serif);color:#e2d3b8;margin-top:6px}
.c-reel{max-width:980px;margin:0 auto;padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px) 0}
.c-reel .no{display:block;text-align:center;font:400 clamp(44px,5.6vw,80px)/1 var(--serif);margin-top:16px}
.c-reel .st{display:block;text-align:center;font:500 13px/1 var(--sans);font-stretch:70%;letter-spacing:.6em;text-transform:uppercase;color:var(--muted);margin:26px 0 30px}
html[lang=ar] .c-reel .st{letter-spacing:0;font-size:15px}
.c-reel .rl{display:block;text-align:center;font:italic 400 20px/1.3 var(--serif);color:#e2d3b8;margin-top:12px}
html[lang=ar] .c-reel .rl{font-style:normal;font-size:16px}
.c-cr{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;width:100%;text-align:start;padding:16px 8px;border-radius:16px;transition:background .25s}
.c-cr:hover{background:rgba(252,243,137,.05)}
.c-cr .mx-ph{width:101px;height:126px;border-radius:14px}
.c-cr .mx-none .u{width:50%}
.c-ln{display:flex;align-items:baseline;gap:14px}
.c-ln b{font:400 clamp(28px,3.3vw,44px)/1.05 var(--serif);letter-spacing:-.005em}
.c-ln .dots{flex:1;min-width:30px;border-bottom:2px dotted rgba(252,243,137,.35);transform:translateY(-8px)}
.c-ln em{font:600 clamp(18px,1.8vw,22px)/1 var(--sans);font-style:normal;color:var(--y);white-space:nowrap}
.c-role{display:block;font:italic 400 clamp(18px,1.7vw,22px)/1.3 var(--serif);color:#e2d3b8;margin-top:4px}
html[lang=ar] .c-role{font-style:normal;font-size:15px}
.c-role.d{font:400 15px/1.4 var(--sans);color:var(--muted)}
.c-cr .mx-tag{margin-inline-start:10px;position:relative;top:-6px}
.c-cut{display:flex;justify-content:center;gap:10px;margin-top:40px;font:600 11px/1 var(--sans);letter-spacing:.3em;color:#6f5d48}
.c-end{text-align:center;padding:clamp(100px,14vw,180px) 24px clamp(80px,10vw,140px)}
.c-end h2{font:400 clamp(70px,10vw,150px)/.9 var(--serif)}
.c-end p{color:var(--muted);margin:18px 0 30px;font-size:18px}
.demo-C .mx-chips{--mx-chips-bg:rgba(34,20,13,.94)}
.demo-C .mx-chips button{font-stretch:85%}
@media (max-width:760px){
 .c-film{display:none}
 .c-nowg{grid-template-columns:1fr}
 .c-cr{gap:14px;padding:14px 0}
 .c-cr .mx-ph{width:81px;height:101px}
 .c-ln{gap:8px}.c-ln b{font-size:26px}
 .c-ln .dots{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){.c-open>*{opacity:1;transform:none}.c-grain{display:none}}
/* dish rows: only the photos change size; the text stays as designed.
   Every photo keeps the 4:5 shape. Phone 88x110 (a thumb-sized tap target),
   half a laptop screen 128x160, full laptop 162x202 (60% bigger than the
   original 101x126), with two dishes per row on a full laptop. */
.c-list{display:grid;grid-template-columns:1fr}
@media (max-width:760px){.c-cr .mx-ph{width:110px;height:138px}}
@media (min-width:761px) and (max-width:1099px){
 .c-reel{max-width:860px}
 .c-cr .mx-ph{width:128px;height:160px;border-radius:16px}
}
@media (min-width:1100px){
 .c-reel{max-width:1480px;padding-left:clamp(56px,5vw,96px);padding-right:clamp(56px,5vw,96px)}
 .c-list{grid-template-columns:1fr 1fr;column-gap:56px;row-gap:6px}
 .c-cr .mx-ph{width:162px;height:202px;border-radius:18px}
 /* two dishes share the row, so the names come down a step to sit well beside the photo */
 .c-ln b{font-size:clamp(30px,2.3vw,36px)}
 .c-ln em{font-size:20px}
}

/* dietary labels: small chips under the dish name and on the dish sheet */
.mx-dl-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mx-dl{display:inline-flex;align-items:center;gap:6px;font:650 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);padding:5px 9px 5px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,236,220,.22);font-style:normal;white-space:nowrap}
.mx-dl:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.mx-dl-vegetarian:before,.mx-dl-vegan:before{background:#8fd08f}.mx-dl-vegan{box-shadow:inset 0 0 0 1px rgba(143,208,143,.45)}
.mx-dl-nut_free:before{background:#e3b56f}.mx-dl-gluten_free:before{background:#f1d98a}.mx-dl-dairy_free:before{background:var(--blue)}.mx-dl-spicy:before{background:#f07b5a}
html[lang=ar] .mx-dl{letter-spacing:0;font-size:12px}
.c-cr .mx-dl-row{margin-top:8px}.mx-al .mx-dl-row{margin:0 6px 0 0}

/* diet filter: the picker sheet, the dock button when a filter is on, and emptied sections */
.mx-diet{padding:4px 22px 0}
.mx-diet .mx-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.mx-diet .mx-pill[data-diet=vegetarian]:before,.mx-diet .mx-pill[data-diet=vegan]:before{background:#8fd08f}
.mx-diet .mx-pill[data-diet=nut_free]:before{background:#e3b56f}.mx-diet .mx-pill[data-diet=gluten_free]:before{background:#f1d98a}
.mx-diet .mx-pill[data-diet=dairy_free]:before{background:var(--blue)}.mx-diet .mx-pill[data-diet=spicy]:before{background:#f07b5a}
.mx-diet .mx-pill[aria-pressed=true]:before{background:var(--mx-acc-ink)}
.mx-dnote{padding:14px 22px 0}
.mx-dfoot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:20px 22px 26px}
.mx-bar button.on{background:var(--y);color:var(--brown)}
.c-cr[hidden]{display:none}
.c-none{display:none;color:var(--muted);font-size:15px;padding:14px 8px 0;text-align:center}
.c-reel.c-empty .c-none{display:block}
.mx-bar button span{white-space:nowrap}