/* کافه مه — fog blue paper, slate ink, saffron. Lalezar headlines, Vazirmatn text. */
:root{
  --bg:#DDE4E8;--bg2:#CFD8DE;--paper:#EEF2F4;--ink:#1D2A33;--ink2:#46576A;--line:#B9C5CD;
  --teal:#2F4858;--accent:#E2A33B;--berry:#B5473A;
  --cup:#F7F4EE;--milk:#F3E7D3;--brew:#6B4226;--sauce:#BAC6CE;--glass:#C9DCE6;--crumb:#D79A52;
  --map:#D2DBE0;--road:#EEF2F4;--park:#B8CDB6;
  --r:22px;color-scheme:light
}
[data-theme="dark"]{
  --bg:#131B21;--bg2:#1A252D;--paper:#1E2A33;--ink:#E7EDF1;--ink2:#A8B6C1;--line:#2C3B46;
  --teal:#8DB3C7;--cup:#E9E4DA;--sauce:#24323C;--glass:#3A5463;--map:#1A252D;--road:#2A3944;--park:#24382C;color-scheme:dark
}
body{background:var(--bg);color:var(--ink);font:400 16px/1.9 "Vazirmatn",system-ui,sans-serif;transition:background .3s,color .3s}
a{color:inherit}
.sec-t{font:400 clamp(2.2rem,1.6rem + 2.4vw,3.4rem)/1.15 "Lalezar","Vazirmatn",sans-serif;color:var(--teal)}
.sec-p{color:var(--ink2);margin:.4rem 0 0;max-width:34rem}

.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:800;text-decoration:none;font-size:.95rem;transition:transform .15s}
.mbtn:active{transform:scale(.97)}
.mbtn--ghost{background:transparent;color:var(--ink)}
.mbtn--lg{padding:.8rem 1.5rem;font-size:1.02rem}
.mbtn--block{width:100%}

/* header */
.mh{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--line)}
.mh__in{max-width:1180px;margin:auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1.2rem}
.mh__logo{font:400 1.7rem/1 "Lalezar",sans-serif;text-decoration:none;color:var(--ink)}
.mh__logo span{color:var(--accent)}
.mh__nav{display:flex;gap:.2rem;margin-inline-start:1rem}
.mh__nav a{padding:.35rem .8rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink2)}
.mh__nav a:hover{background:var(--bg2);color:var(--ink)}
.mh__act{margin-inline-start:auto;display:flex;gap:.5rem}
.mh__act .mbtn--ghost{width:42px;height:42px;padding:0}
@media (max-width:720px){.mh__nav{display:none}}

/* hero */
main{max-width:1180px;margin:auto;padding:0 1.2rem}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;min-height:min(78vh,720px);padding-block:3rem 2rem}
.hero__open{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:999px;background:var(--paper);font-weight:700;font-size:.9rem;margin:0}
.hero__open i{width:9px;height:9px;border-radius:50%;background:#9AA7B0}
.hero__open.is-open i{background:#2E9B5E;box-shadow:0 0 0 4px color-mix(in srgb,#2E9B5E 25%,transparent)}
.hero__open.is-closed i{background:var(--berry)}
.hero__t{font:400 clamp(4.5rem,2.6rem + 8vw,10rem)/.95 "Lalezar",sans-serif;margin:1.2rem 0 1rem;color:var(--ink)}
.hero__p{font-size:1.12rem;color:var(--ink2);max-width:30rem;margin:0}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.hero__art{position:relative;aspect-ratio:1;border-radius:50% 50% var(--r) var(--r);background:radial-gradient(circle at 50% 70%,var(--paper),var(--bg2));display:grid;place-items:end center;overflow:hidden}
.hero__cup{width:72%;margin-bottom:6%;filter:drop-shadow(0 24px 30px rgb(0 0 0/.18))}
.steam{position:absolute;width:44%;top:10%;left:28%;fill:none;stroke:var(--ink2);stroke-width:5;stroke-linecap:round;opacity:.35}
.steam path{stroke-dasharray:60 200;animation:steam 4s linear infinite}
.steam path:nth-child(2){animation-delay:-1.3s}.steam path:nth-child(3){animation-delay:-2.6s}
@keyframes steam{from{stroke-dashoffset:260;opacity:0}30%{opacity:1}to{stroke-dashoffset:0;opacity:0}}
.hero__stamp{position:absolute;top:12%;inset-inline-end:8%;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--accent);color:#2A1A08;font:400 1rem/1.2 "Lalezar",sans-serif;transform:rotate(-12deg)}
@media (max-width:820px){.hero{grid-template-columns:1fr;min-height:0;padding-top:2rem}.hero__art{max-width:420px;width:100%;justify-self:center}}

/* bento */
.sig{padding-block:3rem}
.bento{margin-top:1.4rem;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:.8rem}
.tile{position:relative;border:0;border-radius:var(--r);background:var(--paper);color:var(--ink);text-align:start;padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
button.tile:hover{transform:translateY(-4px) rotate(-.5deg)}
.tile__g{position:absolute;width:60%;top:6%;inset-inline-end:4%;transition:transform .4s}
button.tile:hover .tile__g{transform:scale(1.07) rotate(-4deg)}
.tile__n{position:relative;font:400 1.5rem/1.2 "Lalezar",sans-serif}
.tile__p{position:relative;font-weight:800;color:var(--ink2)}
.tile--0{grid-column:span 2;grid-row:span 2;background:var(--teal);color:#EEF2F4}
.tile--0 .tile__p{color:#C9D8E1}.tile--0 .tile__n{font-size:2.4rem}
.tile--0 .tile__g{width:55%}
.tile--2 .tile__g,.tile--3 .tile__g{width:40%;top:10%}
.tile--1{grid-row:span 2;background:var(--accent);color:#2A1A08}.tile--1 .tile__p{color:#5B3A10}
.tile--note{grid-column:span 2;background:transparent;border:2px dashed var(--line);justify-content:center}
.tile--note b{font:400 2rem/1.1 "Lalezar",sans-serif;color:var(--teal)}
.tile--note span{color:var(--ink2)}
.tile--note2{background:var(--bg2);border:0}
@media (max-width:820px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.tile--0{grid-column:span 2}.tile--1{grid-row:span 1}}

/* menu */
.menu{padding-block:3rem}
.menu__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.msearch{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);min-width:min(320px,100%)}
.msearch input{border:0;background:none;outline:0;width:100%}
.mtabs{display:flex;gap:.4rem;margin:1.4rem 0 1rem;overflow-x:auto;padding-bottom:.3rem;align-items:center;scrollbar-width:none}
.mtabs button{flex-shrink:0;border:0;padding:.5rem 1rem;border-radius:999px;background:transparent;font-weight:800;color:var(--ink2)}
.mtabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.mveg{flex-shrink:0;margin-inline-start:auto;display:flex;gap:.4rem;align-items:center;font-weight:700;color:var(--ink2);font-size:.9rem}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 2rem}
.mitem button{width:100%;display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:.9rem;padding:.8rem 0;border:0;border-bottom:1px dashed var(--line);background:none;text-align:start;color:inherit}
.mitem svg{width:52px;height:52px;background:var(--paper);border-radius:14px}
.mitem__t b{display:block;font-weight:800}
.mitem__t small{display:block;color:var(--ink2);font-size:.85rem;line-height:1.7}
.mitem__p{font:400 1.35rem/1 "Lalezar",sans-serif;color:var(--teal)}
.mitem__tags{display:flex;gap:.25rem}
.tag{font-style:normal;font-size:.72rem;font-weight:800;padding:.1rem .5rem;border-radius:999px;background:var(--bg2);color:var(--ink2);white-space:nowrap}
.tag--s{background:var(--accent);color:#2A1A08}
.mitem[hidden]{display:none}
.mempty{color:var(--ink2);text-align:center;padding:2rem}
@supports (animation-timeline:view()){
  .mitem{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
}
@media (max-width:820px){.mlist{grid-template-columns:1fr}.mitem__tags{display:none}}

/* reservation */
.res{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;padding:3rem 0}
.res__form{background:var(--paper);border-radius:var(--r);padding:1.4rem;display:grid;gap:1rem}
.res fieldset{border:0;margin:0;padding:0}
.res legend{font-weight:800;margin-bottom:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:grid;place-items:center;min-width:3.4rem;padding:.4rem .8rem;border-radius:14px;border:1.5px solid var(--line);font-weight:700;font-size:.92rem;line-height:1.4;text-align:center}
.chip span small{font-size:.72rem;font-weight:600;color:var(--ink2)}
.chip input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input:checked+span small{color:inherit}
.chip input:disabled+span{opacity:.35;text-decoration:line-through}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.res__row{display:grid;grid-template-columns:auto 1fr 1fr;gap:.7rem;align-items:end}
.stepper{display:flex;align-items:center;gap:.3rem;padding:.3rem;border-radius:14px;border:1.5px solid var(--line)}
.stepper span{font-size:.8rem;color:var(--ink2);padding-inline:.4rem}
.stepper button{width:34px;height:34px;border-radius:10px;border:0;background:var(--bg2);font-weight:800}
.stepper output{min-width:1.6rem;text-align:center;font-weight:800}
.fld{display:grid;gap:.2rem;font-size:.82rem;color:var(--ink2)}
.fld input{padding:.6rem .8rem;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-size:1rem}
.res__ok{margin:0;padding:.8rem 1rem;border-radius:14px;background:#2E9B5E;color:#fff;font-weight:700}
@media (max-width:820px){.res{grid-template-columns:1fr}.res__row{grid-template-columns:1fr 1fr}.stepper{grid-column:span 2;justify-self:start}}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:center;padding:3rem 0 6rem}
.hours{margin:1rem 0;display:grid;gap:.3rem}
.hours div{display:flex;justify-content:space-between;padding:.5rem .8rem;border-radius:12px}
.hours div.is-today{background:var(--paper);font-weight:800}
.hours dd{margin:0}
.addr small{color:var(--ink2)}
.map{width:100%;border-radius:var(--r)}
@media (max-width:820px){.visit{grid-template-columns:1fr}}
.mf{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;max-width:1180px;margin:auto;padding:1.4rem 1.2rem 6rem;border-top:1px solid var(--line);color:var(--ink2);font-size:.9rem}

/* dish sheet */
.sheet{border:0;padding:0;background:transparent;max-width:min(460px,94vw);width:100%}
.sheet::backdrop{background:rgb(15 22 28/.55);backdrop-filter:blur(4px)}
.sheet__in{background:var(--paper);color:var(--ink);border-radius:28px;padding:1.5rem;display:grid;gap:.6rem}
.sheet__g{width:150px;justify-self:center;background:var(--bg2);border-radius:50%;padding:10px}
.sheet h3{font:400 2rem/1.2 "Lalezar",sans-serif;margin:0;color:var(--teal)}
.sheet p{margin:0;color:var(--ink2)}
.sheet__row{display:flex;align-items:baseline;gap:.4rem}
.sheet__row b{font:400 2.4rem/1 "Lalezar",sans-serif}
.sheet__opts{display:flex;flex-wrap:wrap;gap:.4rem}
.sheet__act{display:grid;gap:.5rem;margin-top:.4rem}
::view-transition-old(sheet),::view-transition-new(sheet){animation-duration:.35s}

/* table (QR) menu */
.qr{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:1rem 1rem 7rem}
.qr__bar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg);padding:.5rem 0;font-size:1.2rem}
.qr__p{color:var(--ink2);font-size:.92rem}
.qr__bar,.qr__p,.qr__list{max-width:720px;margin-inline:auto}
.qr__foot{max-width:720px;margin-inline:auto}
.qr__list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.qr__list li{display:flex;align-items:center;gap:.8rem;padding:.8rem;border-radius:18px;background:var(--paper);font-size:1.15rem}
.qr__list svg{width:60px;height:60px}
.qr__list b{flex:1}
.qr__list button{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:1.4rem;font-weight:800}
.qr__foot{position:fixed;inset-inline:1rem;bottom:76px;display:flex;justify-content:space-between;align-items:center;padding:.7rem .7rem .7rem 1rem;border-radius:999px;background:var(--teal);color:#fff;font-weight:800}
.qr__foot .mbtn{background:var(--accent);border-color:var(--accent);color:#2A1A08}

.toast{position:fixed;top:1rem;left:50%;transform:translate(-50%,calc(-100% - 2rem));z-index:60;padding:.7rem 1.2rem;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.toast.is-on{transform:translate(-50%,0)}