/* Ziarno — bistro. Playful, bouncy, tactile. */
:root{
  --bg:#fbf3e4;--ink:#1f2a22;--red:#e2462c;--green:#1f3b2d;--mus:#f6c453;--paper:#fff8ec;--sand:#f3e3c7;--leaf:#5f9a4e;--mut:#66614f;--line:rgba(31,42,34,.14);
  --gut:clamp(16px,4vw,40px);
  --jelly:linear(0,0.112,0.317,0.564,0.808,1.014,1.163,1.25,1.279,1.26,1.21,1.143,1.074,1.012,0.965,0.936,0.923,0.925,0.937,0.954,0.974,0.992,1.006,1.016,1.021,1.021,1.019,1.014,1.009,1.004,0.999,0.996,0.994,0.994,0.994,0.996,0.997,0.999,1,1.001,1);
  --spring:linear(0,0.05,0.157,0.259,0.406,0.516,0.653,0.774,0.85,0.933,0.981,1.028,1.051,1.07,1.078,1.078,1.073,1.066,1.055,1.046,1.035,1.025,1.018,1.01,1.005,1,0.998,0.995,0.994,0.994,0.994,0.994,0.995,0.996,0.997,0.997,0.998,0.999,0.999,1,1);
  --disp:"Fraunces",Georgia,serif;
}
@supports not (transition-timing-function:linear(0,1)){:root{--jelly:cubic-bezier(.34,1.9,.5,1);--spring:cubic-bezier(.34,1.56,.64,1)}}

body{background:var(--bg) radial-gradient(rgba(31,42,34,.07) 1.1px,transparent 1.4px) 0 0/24px 24px;color:var(--ink);font:400 17px/1.6 "Inter Tight",system-ui,sans-serif}
em{font-family:var(--disp);font-style:italic;font-weight:500;color:var(--red)}
.h2,.hero__h,.logo__w,.intro__w,.stamp,.mail,.day h3,.dish__t b{font-variation-settings:"SOFT" 100,"WONK" 1}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons (stickers) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:16px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;line-height:1;white-space:nowrap;box-shadow:4px 4px 0 var(--ink);transition:transform .35s var(--spring),box-shadow .35s var(--spring),background-color .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);animation:wobble .6s ease-out}
.btn:active{transform:translate(3px,3px) scale(.97);box-shadow:1px 1px 0 var(--ink);animation:none;transition-duration:.08s}
.btn--fill{background:var(--red);color:#fff}
.btn--sm{height:44px;padding:0 18px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.btn--sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:4px 4px 0 var(--paper)}
.btn--ink:hover{box-shadow:6px 6px 0 var(--paper)}
.btn--ink:active{box-shadow:1px 1px 0 var(--paper)}
.btn--light{background:var(--mus)}
@keyframes wobble{0%{transform:translate(0,0)}22%{transform:translate(-2px,-2px) rotate(-4deg) scale(1.05,.95)}42%{transform:translate(-2px,-2px) rotate(3deg) scale(.97,1.04)}62%{transform:translate(-2px,-2px) rotate(-1.6deg)}80%{transform:translate(-2px,-2px) rotate(.8deg)}100%{transform:translate(-2px,-2px)}}

/* ---------- intro ---------- */
.intro{display:none}
.js .intro{display:block;position:fixed;inset:0;z-index:1000;cursor:pointer;-webkit-tap-highlight-color:transparent}
.intro__bg{position:absolute;inset:0;background:var(--bg) radial-gradient(rgba(31,42,34,.08) 1.1px,transparent 1.4px) 0 0/24px 24px}
.intro__stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,18px);padding:16px}
.intro__plate{width:clamp(130px,20vw,210px);height:auto;transform-origin:50% 100%;opacity:0}
.intro__brand{display:flex;align-items:baseline;transform-origin:0 0;font-size:clamp(64px,12vw,150px)}
.intro__w{display:inline-flex;font:800 1em/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.intro__w span{display:inline-block;opacity:0;transform-origin:50% 90%}
.intro__s{margin-left:.267em;font:italic 400 .567em/1 var(--disp);color:var(--red);opacity:0}
.intro__skip{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,40px);text-align:center;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);opacity:0;animation:fade .5s .6s forwards}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;gap:20px;height:74px}
.logo{display:flex;align-items:baseline;font-size:30px;margin-right:auto}
.logo__mark{width:36px;height:36px;margin-right:10px;align-self:center;transition:transform .5s var(--jelly)}
.logo:hover .logo__mark{transform:rotate(-24deg) scale(1.12)}
.logo__w{font:800 1em/1 var(--disp);letter-spacing:-.03em;display:inline-flex}
.logo__w>span{display:inline-block;transform-origin:50% 90%}
.logo__s{margin-left:.267em;font:italic 400 .567em/1 var(--disp);color:var(--red)}
.js.intro-on .logo__mark,.js.intro-on .logo__w,.js.intro-on .logo__s{visibility:hidden}
.menu{display:flex;gap:6px;font-weight:600;font-size:15.5px}
.menu a{position:relative;padding:10px 14px;border-radius:999px;transition:background-color .2s,color .2s}
.menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--spring)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}
.menu a[aria-current="true"]{color:var(--red)}
.js.intro-on .menu a,.js.intro-on .top__cta,.js.intro-on .burger{opacity:0}
.js:not(.intro-on) .menu a,.js:not(.intro-on) .top__cta,.js:not(.intro-on) .burger{animation:dropIn .9s var(--jelly) both}
.js:not(.intro-on) .menu a:nth-child(2){animation-delay:.06s}
.js:not(.intro-on) .menu a:nth-child(3){animation-delay:.12s}
.js:not(.intro-on) .top__cta,.js:not(.intro-on) .burger{animation-delay:.2s}
.top__bar{position:absolute;left:0;bottom:-2px;width:100%;height:4px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}
.top.scrolled{box-shadow:0 6px 0 rgba(31,42,34,.06)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:14px;background:var(--mus);box-shadow:3px 3px 0 var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .3s var(--spring)}
.burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .45s var(--jelly),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.burger:active{transform:scale(.92)}
.mnav{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:var(--bg);border-bottom:2px solid var(--ink);padding:10px var(--gut) 24px;display:flex;flex-direction:column}
.mnav a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font:700 30px/1.1 var(--disp);letter-spacing:-.02em;opacity:0;transform:translateY(-14px) rotate(-3deg);transition:opacity .25s,transform .55s var(--jelly)}
.mnav a i{font:600 13px/1 "Inter Tight",sans-serif;font-style:normal;color:var(--red)}
.mnav.open a{opacity:1;transform:none}
.mnav.open a:nth-child(2){transition-delay:.05s}.mnav.open a:nth-child(3){transition-delay:.1s}.mnav.open a:nth-child(4){transition-delay:.15s}
.mnav a[aria-current="true"]{color:var(--red)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(36px,6vw,80px) 0 clamp(40px,6vw,90px);overflow-x:clip}
.hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,56px);align-items:center}
.pill{display:inline-block;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--mus);font-weight:700;font-size:14px;box-shadow:3px 3px 0 var(--ink);rotate:-2deg}
.hero__h{margin-top:24px;font:700 clamp(46px,6.5vw,98px)/1 var(--disp);letter-spacing:-.035em}
.hero__h .nw{white-space:nowrap}
.hero__h .w{display:inline-block;white-space:nowrap}
.hero__h .ch{display:inline-block;transform-origin:50% 92%}
.lead{margin-top:24px;max-width:540px;color:var(--mut);font-size:18.5px}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:8px 14px 8px 12px;border:2px dashed rgba(31,42,34,.35);border-radius:999px;font-size:14.5px;font-weight:600}
.status i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--leaf);flex:none}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s ease-out infinite}
.status.closed i{background:var(--red)}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
.js .hero:not(.go) [data-pop],.js .hero:not(.go) .hero__h,.js .hero:not(.go) .art{opacity:0}
.hero.go [data-pop]{animation:popUp 1s var(--jelly) both,fade .3s ease-out both}
.hero.go .lead{animation-delay:.45s}
.hero.go .cta{animation-delay:.6s}
.hero.go .status{animation-delay:.75s}
@keyframes popUp{from{transform:translateY(34px) rotate(-3deg) scale(.86)}}
.art{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:520/480}
.art__bowl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 88%}
.hero.go .art__bowl{animation:bowlIn 1.1s .15s both}
@keyframes bowlIn{0%{transform:translateY(-60px) scale(.5,.5);opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}38%{transform:translateY(0) scale(1.1,.88);opacity:1;animation-timing-function:ease-out}56%{transform:translateY(-10px) scale(.95,1.06);animation-timing-function:ease-in-out}74%{transform:translateY(0) scale(1.03,.98)}88%{transform:scale(.99,1.01)}100%{transform:none;opacity:1}}
.steam path{stroke-dasharray:.35 1;stroke-dashoffset:.35;animation:steam 2.8s cubic-bezier(.4,0,.6,1) infinite}
.steam path:nth-child(2){animation-delay:-.9s}.steam path:nth-child(3){animation-delay:-1.8s}
@keyframes steam{to{stroke-dashoffset:-1}}
.swirl{animation:spin 14s linear infinite}
.spoon{transform-box:view-box;transform-origin:318px 250px;animation:stirX 1.5s ease-in-out infinite alternate,stirY 1.5s ease-in-out -.75s infinite alternate}
@keyframes stirX{from{translate:-30px 0;rotate:-6deg}to{translate:30px 0;rotate:6deg}}
@keyframes stirY{from{scale:1 1}to{scale:1 1.03}}
.soup,.bowl-body{transform-box:fill-box;transform-origin:50% 50%}
.badge{position:absolute;z-index:2;left:-1%;top:0;width:25%;height:auto;overflow:visible;animation:bob 4s ease-in-out infinite}
.hero.go .badge{animation:badgeIn 1s var(--jelly) .9s both,bob 4s ease-in-out 2s infinite}
.badge__ring{transform-box:view-box;transform-origin:70px 70px;animation:spin 16s linear infinite}
@keyframes badgeIn{from{transform:scale(0) rotate(-120deg)}}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.ingr{position:absolute;inset:0;pointer-events:none;z-index:1}
.ing{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;visibility:hidden;will-change:transform;-webkit-tap-highlight-color:transparent}
.ing svg{width:100%;height:auto;overflow:visible}
.drop{position:absolute;left:0;top:0;width:2.4%;aspect-ratio:1;border-radius:50%;background:var(--red);border:2px solid var(--ink);visibility:hidden;pointer-events:none}
.drop.m{background:var(--mus)}.drop.c{background:var(--paper)}

/* ---------- marquee tapes ---------- */
.strip{position:relative;overflow:hidden;padding:clamp(48px,6vw,100px) 0}
.band{width:calc(100% + 240px);margin-left:-120px;transform:rotate(-3deg);box-shadow:0 6px 0 var(--ink)}
.tape{position:relative;border-top:2px solid var(--ink);padding:14px 0;overflow:hidden}
.tape--a{background:var(--red);color:var(--paper)}
.tape--b{background:var(--mus);color:var(--ink);border-bottom:2px solid var(--ink)}
.tape__row{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);width:max-content;padding-left:clamp(18px,2.4vw,30px);will-change:transform}
.tape__row span{font:800 clamp(22px,3vw,40px)/1.15 var(--disp);letter-spacing:-.02em;white-space:nowrap}
.tape__row span:nth-of-type(even){font-style:italic;font-weight:500}
.st{display:block;flex:none;width:clamp(24px,2.6vw,34px);aspect-ratio:1;background:center/contain no-repeat;animation:spin 7s linear infinite}
.st--star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5 10 11-2-6 10 6 10-11-2-5 10-5-10-11 2 6-10-6-10 11 2z' fill='%23f6c453' stroke='%231f2a22' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tape--b .st--star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5 10 11-2-6 10 6 10-11-2-5 10-5-10-11 2 6-10-6-10 11 2z' fill='%23e2462c' stroke='%231f2a22' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.st--leaf{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 34C6 16 18 6 35 5c0 18-11 29-29 29z' fill='%235f9a4e' stroke='%231f2a22' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M8 32L28 12' stroke='%231f2a22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");animation-duration:11s;animation-direction:reverse}
.st--dot{border-radius:50%;background:var(--paper);border:2px solid var(--ink);width:clamp(16px,1.8vw,22px);box-shadow:inset -4px -4px 0 rgba(31,42,34,.15);animation:none}
.tape--b .st--dot{background:var(--green)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(72px,9vw,124px) 0}
.h2{font:700 clamp(42px,5.6vw,80px)/1 var(--disp);letter-spacing:-.035em}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.head .lead{margin-top:0}
.head__side{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.head__side .lead b{color:var(--ink);background:var(--mus);padding:1px 8px;border-radius:8px;border:2px solid var(--ink)}

/* scalloped edges */
.sec--green::before,.sec--red::before,.sec--green::after,.sec--red::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(circle at 14px 0,var(--bg) 12.5px,var(--ink) 13px 14.5px,transparent 15px) 0 0/28px 14px repeat-x;pointer-events:none}
.sec--green::before,.sec--red::before{top:0}
.sec--green::after,.sec--red::after{bottom:0;transform:scaleY(-1)}

/* ---------- lunch carousel ---------- */
.rail-nav{display:flex;gap:10px}
.rbtn{display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);box-shadow:3px 3px 0 var(--ink);transition:transform .35s var(--spring),box-shadow .35s var(--spring),opacity .25s}
.rbtn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.rbtn:hover:not(:disabled){transform:translate(-2px,-2px) rotate(-8deg);box-shadow:5px 5px 0 var(--ink);background:var(--mus)}
.rbtn:active:not(:disabled){transform:translate(2px,2px) scale(.92);box-shadow:1px 1px 0 var(--ink)}
.rbtn:disabled{opacity:.35;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chips button{position:relative;height:40px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:14.5px;background:transparent;transition:background-color .25s,transform .45s var(--jelly),box-shadow .25s}
.chips button:hover{transform:translateY(-2px) rotate(-3deg)}
.chips button.on{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--red);transform:translateY(-2px)}
.chips button.is-today::after{content:"";position:absolute;top:-4px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}
.rail{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gut),calc((100% - 1200px)/2 + var(--gut)));scrollbar-width:none;padding:34px 0 42px;cursor:grab;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--red);outline-offset:-6px;border-radius:24px}
.rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.days{display:flex;gap:20px;width:max-content;padding-inline:max(var(--gut),calc((100% - 1200px)/2 + var(--gut)))}
.day{position:relative;flex:0 0 clamp(262px,76vw,322px);scroll-snap-align:start;padding:22px 22px 26px;border:2px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:6px 6px 0 var(--ink);rotate:var(--tilt,0deg);transition:rotate .45s var(--spring),background-color .4s}
.rail.drag .day{transition:rotate .15s linear}
.day__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.day__n{font:italic 500 23px/1 var(--disp);color:var(--red)}
.day__p{padding:4px 10px;border:2px solid var(--ink);border-radius:999px;font-weight:800;font-size:13px;background:var(--bg)}
.day__bowl{width:112px;height:auto;margin:16px 0 4px;overflow:visible;transition:transform .5s var(--jelly)}
.day:hover .day__bowl{transform:rotate(-8deg) scale(1.08)}
.dsteam path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;opacity:0;animation:dsteam 2.4s ease-in-out infinite}
.dsteam path:nth-child(2){animation-delay:1.2s}
@keyframes dsteam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.5}100%{opacity:0;transform:translateY(-8px)}}
.day__k{margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.day h3{margin-top:4px;font:700 25px/1.1 var(--disp);letter-spacing:-.02em}
.day__m{margin-top:4px;color:#4a4638;font-size:15.5px;line-height:1.45}
.day.today{background:var(--mus)}
.day.today .day__n{color:var(--ink)}
.day.today .day__p{background:var(--paper)}
.day.today .day__k,.day.today .day__m{color:#3e3a2c}
.day__today{position:absolute;top:58px;right:-18px;display:grid;place-items:center;min-width:74px;height:74px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--red);color:var(--paper);font:800 italic 21px/1 var(--disp);box-shadow:3px 3px 0 var(--ink);rotate:12deg;z-index:2;pointer-events:none}
.day__today--wide{height:46px;font-size:17px;top:64px;right:-14px;rotate:6deg}
.js .day__today{transform:scale(0)}
.day__today.in{animation:todayIn .9s var(--jelly) forwards,pulse 1.8s ease-in-out .9s infinite}
@keyframes todayIn{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.hint{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;font-weight:600;margin-top:-6px}
.hint svg{width:34px;height:14px;fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}

/* ---------- menu tabs ---------- */
.sec--green{background:var(--green);color:var(--bg)}
.head--karta .lead{color:#c7d2c4;max-width:430px}
.tabs-wrap{display:none;margin-top:44px}
.js .tabs-wrap{display:block}
.tabs{position:relative;display:inline-flex;padding:6px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:5px 5px 0 #0f1f17;max-width:100%}
.tab{position:relative;z-index:1;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap;transition:color .3s}
.tab[aria-selected="true"]{color:#fff}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tabs__pill{position:absolute;left:0;top:6px;height:48px;width:0;border:2px solid var(--ink);border-radius:999px;background:var(--red);z-index:0}
.panels{margin-top:40px}
.panel{display:grid;grid-template-columns:1fr minmax(200px,330px);gap:clamp(28px,5vw,72px);align-items:center}
.panel+.panel{margin-top:64px}
.js .panel+.panel{margin-top:0}
.js .panel:not(.on){display:none}
.panel:focus-visible{outline:2px dashed var(--mus);outline-offset:8px;border-radius:12px}
.panel__h{font:700 32px/1.05 var(--disp);letter-spacing:-.02em}
.js .panel__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel__note{font:italic 400 20px/1.2 var(--disp);color:var(--mus);margin-bottom:8px}
.dishes{max-width:640px}
.dish{display:flex;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px dashed rgba(251,243,228,.22)}
.dish__t{display:block;min-width:0}
.dish__t b{display:block;font:600 22px/1.15 var(--disp);letter-spacing:-.01em}
.dish__t small{display:block;margin-top:3px;font-size:14.5px;color:#b9c4b8}
.dish__dots{flex:1 1 20px;min-width:16px;border-bottom:2px dotted rgba(246,196,83,.45);transform:translateY(-8px)}
.price{flex:none;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--mus);color:var(--ink);font:800 17px/1 var(--disp);white-space:nowrap;box-shadow:3px 3px 0 #0f1f17;rotate:-3deg;transition:rotate .5s var(--jelly),scale .5s var(--jelly)}
.dish:nth-child(even) .price{rotate:2deg}
.dish:hover .price{rotate:6deg;scale:1.1}
.panel__art{width:100%;max-width:330px;height:auto;justify-self:center;overflow:visible}
.yolk{transform-box:fill-box;transform-origin:center;animation:jiggle 2.6s ease-in-out infinite}
@keyframes jiggle{0%,60%,100%{transform:scale(1)}68%{transform:scale(1.1,.9)}76%{transform:scale(.94,1.06)}84%{transform:scale(1.03,.97)}}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 1.4s ease-in-out infinite alternate}
@keyframes flag{from{transform:skewY(-8deg) scaleX(.9)}to{transform:skewY(8deg) scaleX(1.05)}}
.bubbles circle{animation:bubble 2.4s ease-in infinite}
.bubbles circle:nth-child(2){animation-delay:.6s}.bubbles circle:nth-child(3){animation-delay:1.2s}.bubbles circle:nth-child(4){animation-delay:1.8s}
@keyframes bubble{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-84px);opacity:0}}

/* ---------- where ---------- */
.where{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
.map{border:2px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);background:var(--sand)}
.map svg{width:100%;height:auto}
.m-streets path,.m-river{stroke-dasharray:1 1.1;stroke-dashoffset:0}
.js .map:not(.in) .m-streets path,.js .map:not(.in) .m-river{stroke-dashoffset:1.05}
.map.in .m-streets path{animation:draw 1.2s cubic-bezier(.6,0,.2,1) both}
.map.in .m-streets g path:nth-child(2){animation-delay:.15s}.map.in .m-streets g path:nth-child(3){animation-delay:.3s}.map.in .m-streets g path:nth-child(4){animation-delay:.5s}
.map.in .m-river{animation:draw 1.6s cubic-bezier(.5,0,.2,1) .2s both}
@keyframes draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
.m-blocks rect,.m-trees circle,.m-park{transform-box:fill-box;transform-origin:center}
.js .map:not(.in) .m-blocks rect,.js .map:not(.in) .m-trees circle,.js .map:not(.in) .m-park{transform:scale(0)}
.map.in .m-park{animation:popIn .9s var(--jelly) .3s both}
.map.in .m-blocks rect{animation:popIn .8s var(--jelly) both}
.map.in .m-blocks rect:nth-child(1){animation-delay:.45s}.map.in .m-blocks rect:nth-child(2){animation-delay:.55s}.map.in .m-blocks rect:nth-child(3){animation-delay:.62s}.map.in .m-blocks rect:nth-child(4){animation-delay:.7s}.map.in .m-blocks rect:nth-child(5){animation-delay:.78s}.map.in .m-blocks rect:nth-child(6){animation-delay:.86s}
.map.in .m-trees circle{animation:popIn .8s var(--jelly) both}
.map.in .m-trees circle:nth-child(1){animation-delay:.6s}.map.in .m-trees circle:nth-child(2){animation-delay:.68s}.map.in .m-trees circle:nth-child(3){animation-delay:.76s}.map.in .m-trees circle:nth-child(4){animation-delay:.84s}.map.in .m-trees circle:nth-child(5){animation-delay:.92s}
@keyframes popIn{from{transform:scale(0)}}
.js .map:not(.in) .m-label{opacity:0}
.map.in .m-label{animation:fade .6s 1.2s both}
.m-pin,.m-flag,.m-shadow{transform-box:fill-box}
.m-pin{transform-origin:50% 100%}
.js .map:not(.in) .m-pin,.js .map:not(.in) .m-flag,.js .map:not(.in) .m-shadow{opacity:0}
.map.in .m-pin{animation:pinDrop 1.2s 1s both}
@keyframes pinDrop{0%{transform:translateY(-420px) scale(.8,1.25);animation-timing-function:cubic-bezier(.55,0,1,.6)}42%{transform:translateY(0) scale(.85,1.2);animation-timing-function:ease-out}52%{transform:translateY(0) scale(1.35,.66);animation-timing-function:ease-out}66%{transform:translateY(-34px) scale(.92,1.1);animation-timing-function:ease-in}78%{transform:translateY(0) scale(1.14,.88);animation-timing-function:ease-out}88%{transform:translateY(-6px) scale(.98,1.03)}100%{transform:none}}
.m-shadow{transform-origin:center}
.map.in .m-shadow{animation:shadowIn 1.2s 1s both}
@keyframes shadowIn{0%{transform:scale(.15);opacity:0}42%{transform:scale(1);opacity:.32}52%{transform:scale(1.4,1.1)}100%{transform:scale(1);opacity:.3}}
.m-rings ellipse{opacity:0;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
.map.in .m-rings ellipse{animation:ripple 2.6s cubic-bezier(.2,.6,.3,1) 1.55s infinite}
.map.in .m-rings ellipse:nth-child(2){animation-delay:2.4s}.map.in .m-rings ellipse:nth-child(3){animation-delay:3.25s}
@keyframes ripple{0%{transform:scale(.4);opacity:.95}100%{transform:scale(4.2);opacity:0}}
.m-flag{transform-origin:0 100%}
.map.in .m-flag{animation:flagIn .9s var(--jelly) 1.75s both,sway 3s ease-in-out 2.7s infinite}
@keyframes flagIn{from{transform:scale(0) rotate(-30deg);opacity:0}to{opacity:1}}
@keyframes sway{50%{transform:rotate(-4deg)}}
.m-needle{transition:none}
.map.in .m-needle{animation:needle 2.2s var(--jelly) .9s both}
@keyframes needle{from{transform:rotate(220deg)}}
.addr{margin-top:22px;font:600 22px/1.35 var(--disp);letter-spacing:-.01em}
.hours{margin-top:26px;max-width:430px;padding:16px 22px 10px;border:2px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.hours__now{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.hours__now i{width:10px;height:10px;border-radius:50%;background:var(--leaf);flex:none;box-shadow:0 0 0 4px rgba(95,154,78,.22)}
.hours__now.closed i{background:var(--red);box-shadow:0 0 0 4px rgba(226,70,44,.2)}
.hours dl div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.hours dl div:last-child{border-bottom:0}
.hours dt{color:var(--mut)}
.hours dd{font-weight:700}
.hours .is-today dt{color:var(--ink);font-weight:700}
.hours .tag{margin-left:8px;padding:2px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--mus);font:800 italic 13px/1 var(--disp);color:var(--ink);display:inline-block;rotate:-4deg}
.where__note{margin-top:22px;color:var(--mut);max-width:430px}

/* ---------- booking ---------- */
.sec--red{background:var(--red);color:#fff;overflow-x:clip}
.sec--red em{color:var(--mus)}
.sec--red .lead{color:#ffe7df}
.book{text-align:center;display:flex;flex-direction:column;align-items:center}
.stamp-wrap{position:relative;margin-bottom:clamp(40px,5vw,64px)}
.stamp{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding:14px clamp(22px,4vw,40px) 12px;border:5px solid var(--paper);border-radius:22px;color:var(--paper);box-shadow:inset 0 0 0 4px var(--red),inset 0 0 0 7px var(--paper);transform:rotate(-8deg);cursor:pointer;user-select:none;-webkit-user-select:none}
.stamp span{font:900 clamp(50px,8.4vw,104px)/1 var(--disp);letter-spacing:-.02em;text-transform:uppercase}
.stamp small{margin-top:4px;font-size:13px;font-weight:800;letter-spacing:.32em;text-transform:uppercase}
.stamp::after{content:"";position:absolute;inset:-6px;border-radius:24px;background:radial-gradient(var(--red) 1.3px,transparent 1.8px) 0 0/13px 11px,radial-gradient(var(--red) 1px,transparent 1.5px) 5px 7px/17px 19px,radial-gradient(var(--red) 2px,transparent 2.6px) 9px 3px/41px 37px;opacity:.32;pointer-events:none}
.js .stamp:not(.in){opacity:0}
.stamp.in{animation:stamp .8s both}
@keyframes stamp{0%{opacity:0;transform:scale(2.7) rotate(-32deg);animation-timing-function:cubic-bezier(.6,0,1,.5)}48%{opacity:1;transform:scale(.9) rotate(-8deg);animation-timing-function:ease-out}62%{transform:scale(1.05,.96) rotate(-8deg)}78%{transform:scale(.98,1.02) rotate(-8deg)}100%{opacity:1;transform:rotate(-8deg)}}
.splats{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.splats i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--paper)}
.book__h{max-width:900px}
.book__h em{display:inline}
.book .lead{margin-inline:auto;max-width:560px}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.steps li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);font-weight:600;font-size:15px;box-shadow:4px 4px 0 var(--ink);text-align:left}
.steps li:nth-child(1){rotate:-2deg}.steps li:nth-child(3){rotate:2deg}
.steps b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--mus);border:2px solid var(--ink);font:800 15px/1 var(--disp)}
.mail{display:inline-block;margin-top:40px;font:700 clamp(30px,5vw,64px)/1.05 var(--disp);letter-spacing:-.03em;word-break:break-word;color:#fff;text-decoration:underline wavy rgba(255,255,255,.45) 2px;text-underline-offset:10px;transition:text-decoration-color .2s}
.mail:hover{text-decoration-color:var(--mus)}
.book__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:30px}
.copy span{display:inline-block}
.copy.ok{background:var(--paper)}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ink);padding:28px 0 96px;color:var(--mut);font-size:14px}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.foot__logo{font:700 18px/1 var(--disp);color:var(--ink)}
.up{font-weight:700;color:var(--ink);padding:8px 14px;border:2px solid var(--ink);border-radius:999px;transition:transform .45s var(--jelly),background-color .2s}
.up:hover{transform:translateY(-4px) rotate(-4deg);background:var(--mus)}

/* ---------- sticker slap reveals ---------- */
[data-slap="l"]{--sx:-70px;--sy:10px;--r:-7deg}
[data-slap="r"]{--sx:70px;--sy:10px;--r:6deg}
[data-slap="u"]{--sx:0px;--sy:56px;--r:-4deg}
[data-slap="d"]{--sx:0px;--sy:-44px;--r:5deg}
.js [data-slap]:not(.in){opacity:0}
.js [data-slap].in:not(.done){animation:slap 1s var(--jelly) var(--d,0ms) both,fade .32s ease-out var(--d,0ms) both}
@keyframes slap{from{transform:translate(var(--sx),var(--sy)) rotate(var(--r)) scale(1.1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes dropIn{from{opacity:0;transform:translateY(-26px) scale(.8,1.2)}}

/* pause decorative loops when off-screen */
.off .steam path,.off .swirl,.off .spoon,.off .badge,.off .badge__ring,.off .st,.off .dsteam path,.off .day__today,.off .yolk,.off .flag,.off .bubbles circle,.off .m-rings ellipse,.off .m-flag,.off .status i::after,.off .hint svg{animation-play-state:paused}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .menu{display:none}
  .burger{display:flex}
}
@media (min-width:1001px){.mnav{display:none!important}}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .art{max-width:470px}
  .where{grid-template-columns:1fr}
  .map{order:2}
  .panel{grid-template-columns:1fr}
  .panel__art{order:-1;max-width:190px;justify-self:start}
  .head{flex-direction:column;align-items:flex-start;gap:18px}
  .head__side{align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:16px}
  .top__in{height:66px;gap:12px}
  .logo{font-size:27px}
  .logo__mark{width:32px;height:32px;margin-right:8px}
  .top__cta{display:none}
  .hero__h{font-size:clamp(42px,12.4vw,56px);margin-top:20px}
  .lead{font-size:17px}
  .cta{gap:12px}
  .cta .btn{flex:1 1 auto;padding:0 18px}
  .status{font-size:13.5px}
  .tape{padding:10px 0}
  .tabs{display:flex;width:100%}
  .tab{flex:1 1 auto;padding:0 10px;font-size:15px;height:46px}
  .tabs__pill{height:46px}
  .dish{flex-wrap:wrap;gap:6px 12px;padding:16px 0}
  .dish__t{flex:1 1 60%}
  .dish__dots{display:none}
  .dish__t b{font-size:20px}
  .price{margin-left:auto;align-self:center}
  .panel__art{max-width:124px;justify-self:end;margin-bottom:-78px;position:relative;z-index:1}
  .panel__note{padding-right:128px;min-height:46px}
  .rail-nav{display:none}
  .head__side{gap:0}
  .hours{padding:14px 18px 8px}
  .steps{flex-direction:column;align-items:stretch;width:100%}
  .steps li{rotate:0deg!important}
  .book__btns .btn{flex:1 1 auto}
  .day__today{right:-10px}
  .foot__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .tab{font-size:14px;padding:0 6px}
  .chips button{padding:0 12px}
}