:root{
  --ink:#0d0b09;
  --ink-2:#161210;
  --ink-3:#1f1a16;
  --paper:#efe8dc;
  --paper-2:#e6dccb;
  --cream:#f4efe6;
  --muted:#6f665b;
  --gold:#f2c230;
  --display:'Oswald', 'Arial Narrow', sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --hand:'Amatic SC', cursive;
  --brush:'Caveat', cursive;
  --marker:'Permanent Marker', cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px, 5vw, 72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-size:15px;line-height:1.5;overflow-x:hidden}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.hand{font-family:var(--hand);font-weight:700;letter-spacing:.02em;line-height:.95;text-transform:uppercase}

/* ---------- Grain + cursor ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  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 type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:200;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cursor.hover{width:70px;height:70px;margin:-35px 0 0 -35px;background:#fff}
@media (hover:hover) and (pointer:fine){ .cursor,.cursor-dot{opacity:1} }

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:300;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:clip-path 1.1s var(--ease);clip-path:inset(0 0 0 0)}
.preloader.done{clip-path:inset(0 0 100% 0)}
.pre-svg{width:150px;overflow:visible}
.pre-body{fill:#1d1814;stroke:#2b241e;stroke-width:2;transform-origin:100px 150px;animation:breathe 1.6s ease-in-out infinite}
.pre-eyes{transform-origin:100px 88px;animation:blink 2.4s infinite}
.pre-pupil{animation:look 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03,.97)}}
@keyframes blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes look{0%,30%{transform:translate(0,0)}40%,70%{transform:translate(-10px,-4px)}80%,100%{transform:translate(0,0)}}
.pre-logo{font-family:var(--marker);font-size:28px;line-height:.9;text-align:center}
.pre-bar{width:160px;height:2px;background:#2a231d;overflow:hidden;border-radius:2px}
.pre-bar span{display:block;height:100%;width:0;background:var(--cream);transition:width .2s}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:40px;padding:22px var(--gutter);transition:padding .4s var(--ease),background .4s,backdrop-filter .4s,transform .5s var(--ease)}
.header.scrolled{padding-top:12px;padding-bottom:12px;background:rgba(13,11,9,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.header.hide{transform:translateY(-110%)}
.logo{font-family:var(--marker);font-size:25px;line-height:.86;letter-spacing:.01em;display:inline-block;transform:rotate(-2deg);transition:transform .4s var(--ease)}
.logo:hover{transform:rotate(2deg) scale(1.05)}
.nav{display:flex;gap:30px;margin-left:46px}
.nav a{font-size:13px;font-weight:600;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.header-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.city{position:relative}
.city-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.city-btn svg{transition:transform .3s}
.city.open .city-btn svg{transform:rotate(180deg)}
.city-drop{position:absolute;top:calc(100% + 12px);right:0;background:var(--cream);color:var(--ink);border-radius:14px;padding:8px;min-width:170px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.city.open .city-drop{opacity:1;visibility:visible;transform:none}
.city-drop button{display:flex;justify-content:space-between;width:100%;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;text-align:left}
.city-drop button:hover{background:#e5dccd}
.city-drop small{color:var(--muted);font-weight:500}
.btn-order{position:relative;display:flex;align-items:center;gap:10px;background:var(--cream);color:var(--ink);border-radius:40px;padding:13px 26px;font-size:13px;font-weight:700;transition:background .3s,transform .3s}
.btn-order:hover{background:#fff}
.cart-count{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--gold);color:var(--ink);font-size:11px;display:grid;place-items:center;padding:0 5px;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.8,.64,1)}
.cart-count.show{transform:scale(1)}
.cart-count.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.5)}}
.burger{width:30px;height:22px;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:120}
.burger span{height:2px;background:var(--cream);border-radius:2px;transition:.4s var(--ease)}
.burger span:nth-child(2){width:70%;align-self:flex-end}
.burger:hover span:nth-child(2){width:100%}
body.menu-open .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.overlay-menu{position:fixed;inset:0;z-index:95;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:120px var(--gutter) 60px;clip-path:circle(0% at calc(100% - 60px) 44px);transition:clip-path .9s var(--ease)}
body.menu-open .overlay-menu{clip-path:circle(150% at calc(100% - 60px) 44px)}
.overlay-menu nav{display:flex;flex-direction:column}
.overlay-menu nav a{font-family:var(--display);font-size:clamp(40px,8vw,96px);font-weight:700;line-height:1.05;text-transform:uppercase;opacity:0;transform:translateY(40px);transition:.6s var(--ease),color .3s}
.overlay-menu nav a:hover{color:var(--gold)}
body.menu-open .overlay-menu nav a{opacity:1;transform:none}
body.menu-open .overlay-menu nav a:nth-child(1){transition-delay:.25s}
body.menu-open .overlay-menu nav a:nth-child(2){transition-delay:.3s}
body.menu-open .overlay-menu nav a:nth-child(3){transition-delay:.35s}
body.menu-open .overlay-menu nav a:nth-child(4){transition-delay:.4s}
body.menu-open .overlay-menu nav a:nth-child(5){transition-delay:.45s}
body.menu-open .overlay-menu nav a:nth-child(6){transition-delay:.5s}
.overlay-note{font-size:48px;transform:rotate(-8deg);color:var(--cream);opacity:.8}

/* ---------- Buttons ---------- */
.btn-pill{display:inline-flex;align-items:center;gap:18px;background:var(--cream);color:var(--ink);border-radius:50px;padding:6px 6px 6px 30px;font-weight:700;font-size:14px;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s}
.btn-pill::before{content:"";position:absolute;inset:0;background:var(--gold);z-index:-1;transform:translateY(101%);border-radius:50px;transition:transform .5s var(--ease)}
.btn-pill:hover::before{transform:none}
.arrow-circle{width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;transition:transform .5s var(--ease)}
.arrow-circle svg{width:20px}
.btn-pill:hover .arrow-circle{transform:rotate(-45deg)}
.btn-pill.sm{padding:13px 22px 13px 22px;font-size:12.5px;gap:26px}
.plain-arrow{width:18px;transition:transform .4s var(--ease)}
.btn-pill:hover .plain-arrow{transform:translateX(5px)}
.btn-pill.outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-pill.outline::before{background:var(--ink)}
.btn-pill.outline:hover{color:var(--cream)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:640px;max-height:860px;overflow:hidden;background:#090706}
.hero-media{position:absolute;top:0;right:0;bottom:0;left:34%;transform-origin:60% 40%;will-change:transform}
.hero-media img,.hero-eyes{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-media img{animation:heroZoom 2.6s var(--ease) both;animation-play-state:paused}
.hero-eyes{animation:fadeIn 1s 1.4s both;animation-play-state:paused}
body.loaded .hero-media img,body.loaded .hero-eyes{animation-play-state:running}
@keyframes heroZoom{from{transform:scale(1.25);filter:brightness(.2) blur(6px)}to{transform:scale(1);filter:none}}
@keyframes fadeIn{from{opacity:0}}
.pupil{transition:transform .25s ease-out}
.lid{transition:transform .09s ease-in}
.eye.blink .lid{transform:scale(1,1)}
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#090706 0%,#090706 33%,rgba(9,7,6,.7) 40%,rgba(9,7,6,.15) 50%,rgba(9,7,6,0) 60%),
             linear-gradient(0deg,rgba(9,7,6,.65) 0%,rgba(9,7,6,0) 22%),
             linear-gradient(180deg,rgba(9,7,6,.55) 0%,rgba(9,7,6,0) 18%)}
.bokeh{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,190,110,.55),rgba(255,190,110,0) 70%);animation:floatUp linear infinite}
@keyframes floatUp{from{transform:translateY(20px);opacity:0}15%{opacity:1}85%{opacity:.8}to{transform:translateY(-140px);opacity:0}}
.steam{position:absolute;width:120px;height:150px;pointer-events:none;transform:translate(-50%,-100%)}
.steam i{position:absolute;bottom:0;width:22px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);filter:blur(6px);animation:steam 4s ease-in infinite}
@keyframes steam{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:.8}100%{transform:translate(var(--dx,10px),-120px) scale(1.8);opacity:0}}

.hero-content{position:absolute;left:var(--gutter);top:50%;transform:translateY(-44%);z-index:5;max-width:620px}
.hero-title{font-family:var(--display);font-weight:700;font-size:clamp(64px,8.6vw,138px);line-height:.88;letter-spacing:-.005em;color:var(--cream);margin-bottom:34px}
.hero-title .line{display:block;white-space:nowrap}
.hero-title .word{display:inline-block;clip-path:inset(0 0 100% 0);transform:translateY(60%);transition:transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
.hero-title .line:nth-child(2) .word{transition-delay:.15s}
body.loaded .hero-title .word{clip-path:inset(-10% -5% -10% -5%);transform:none}
.kofe{position:relative;display:inline-block;margin-left:.12em;vertical-align:baseline}
.kofe-text{font-family:var(--brush);font-weight:700;font-size:1.05em;text-transform:uppercase;display:inline-block;transform:rotate(-8deg) skewX(-10deg) translateY(.06em);letter-spacing:.01em;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s .7s cubic-bezier(.65,0,.35,1)}
body.loaded .kofe-text{clip-path:inset(-20% -10% -20% -10%)}
.kofe-underline{position:absolute;left:-4%;bottom:-.12em;width:108%;height:.38em;overflow:visible}
.kofe-underline path{fill:none;stroke:var(--cream);stroke-width:5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset .8s var(--ease)}
.kofe-underline path:nth-child(1){transition-delay:1.7s}
.kofe-underline path:nth-child(2){transition-delay:1.95s;stroke-width:3.5}
body.loaded .kofe-underline path{stroke-dashoffset:0}
.crown-hero{position:absolute;width:.42em;left:44%;top:-.38em;transform:translateY(-120%) rotate(-30deg);opacity:0;transition:transform .9s 2.1s cubic-bezier(.34,1.7,.64,1),opacity .3s 2.1s}
body.loaded .crown-hero{transform:rotate(8deg);opacity:1}
body.loaded .crown-hero path{animation:crownGlow 3s 3s ease-in-out infinite}
@keyframes crownGlow{50%{filter:drop-shadow(0 0 6px rgba(242,194,48,.8))}}
.crown-hero:hover{animation:wiggle .6s}
@keyframes wiggle{25%{transform:rotate(-6deg)}50%{transform:rotate(14deg)}75%{transform:rotate(2deg)}}
.hero-sub{font-size:16px;line-height:1.45;margin-bottom:34px;color:#e8e1d5}

.reveal-up{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-up.in{opacity:1;transform:none}
.hero .reveal-up{transition-delay:1.2s}
.hero .btn-pill.reveal-up{transition-delay:1.35s}
body.loaded .hero .reveal-up{opacity:1;transform:none}

.hero-note{position:absolute;right:calc(var(--gutter) - 10px);top:28%;z-index:5;font-size:clamp(28px,2.6vw,40px);color:var(--cream);transform:rotate(-14deg);text-align:center;opacity:0;transition:opacity 1s 2.2s,transform 1s 2.2s var(--ease)}
body.loaded .hero-note{opacity:1;transform:rotate(-12deg)}
.heart-doodle{display:block;width:42px;margin:6px auto 0}
.heart-doodle path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:beat 1.4s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.15)}40%{transform:scale(.95)}}
.scroll-ind{position:absolute;right:28px;bottom:30px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;letter-spacing:.2em}
.scroll-ind span{writing-mode:vertical-rl;transform:rotate(180deg)}
.scroll-ind i{display:block;width:1px;height:90px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-ind i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--cream);animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.hero-brand{position:absolute;right:90px;bottom:30px;font-family:var(--display);font-size:12px;letter-spacing:.12em;z-index:5;opacity:.85}

/* ---------- Paper texture ---------- */
.paper{background-color:var(--paper);color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}

.h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.005em;text-transform:uppercase}
.h2.light{color:var(--cream)}
.split .ch{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.split.in .ch{transform:none;opacity:1}
.split .wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}

/* ---------- ABOUT ---------- */
.about{position:relative;display:grid;grid-template-columns:30% 1fr 27%;min-height:420px;overflow:hidden}
.about-left{position:relative;padding:40px 0 40px var(--gutter)}
.doodle-crown{position:absolute;left:calc(var(--gutter) - 8px);top:56px;width:58px}
.draw path,.draw ellipse,.draw circle{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.draw.anim path,.draw.anim ellipse,.draw.anim circle{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s var(--ease)}
.in .draw.anim path,.in .draw.anim ellipse,.in .draw.anim circle,.draw.anim.in path,.draw.anim.in ellipse,.draw.anim.in circle{stroke-dashoffset:0}
.about-hand{position:absolute;left:calc(var(--gutter) - 26px);top:140px;font-size:34px;transform:rotate(-14deg)}
.about-hand.in{transform:rotate(-14deg)}
.polaroid{position:absolute;left:calc(var(--gutter) + 60px);top:36px;width:min(260px,62%);background:#fbf8f2;padding:12px 12px 0;box-shadow:0 18px 40px rgba(60,40,20,.25),0 2px 4px rgba(0,0,0,.12);transform:rotate(4deg) translateY(60px);opacity:0;transition:transform 1.2s var(--ease),opacity 1s,box-shadow .4s;transform-style:preserve-3d}
.polaroid.in{opacity:1;transform:rotate(4deg)}
.polaroid-img{overflow:hidden;aspect-ratio:170/181}
.polaroid-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.2s var(--ease),filter .8s}
.polaroid:hover .polaroid-img img{transform:scale(1.08);filter:grayscale(.2) contrast(1.05)}
.polaroid figcaption{font-size:20px;padding:12px 6px 16px;transform:rotate(-3deg);text-transform:none;font-family:var(--hand)}
.tape{position:absolute;width:110px;height:34px;background:rgba(222,210,188,.75);box-shadow:0 1px 3px rgba(0,0,0,.08);mix-blend-mode:multiply;z-index:2}
.tape-a{top:-14px;left:-38px;transform:rotate(-32deg)}
.tape-b{bottom:-12px;right:-40px;transform:rotate(-30deg)}
.about-text{padding:56px 30px 50px 40px}
.about-text .h2{margin-bottom:22px}
.about-text p{font-size:15px;line-height:1.6;color:#2b2520;margin-bottom:34px}
.features{display:flex;gap:40px;flex-wrap:wrap}
.features li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:12.5px;color:#3a332c;min-width:90px}
.features li:nth-child(2){transition-delay:.1s}.features li:nth-child(3){transition-delay:.2s}.features li:nth-child(4){transition-delay:.3s}
.features svg{width:34px;height:34px;transition:transform .5s cubic-bezier(.34,1.7,.64,1)}
.features li:hover svg{transform:translateY(-6px) rotate(-8deg) scale(1.15)}
.about-wall{position:relative;overflow:hidden;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%,3% 92%,1% 80%,5% 66%,2% 52%,6% 40%,3% 26%,7% 12%)}
.about-wall img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}

/* ---------- MENU ---------- */
.menu{position:relative;padding:44px 0 36px var(--gutter);background:
  radial-gradient(ellipse at 90% 60%,rgba(80,60,40,.25),transparent 50%),
  linear-gradient(180deg,#0f0c0a,#0b0908)}
.menu-head{display:flex;align-items:center;gap:16px;padding-right:var(--gutter);margin-bottom:18px;flex-wrap:wrap}
.menu-tag{font-size:19px;transform:rotate(-12deg);color:#cfc7ba;margin-right:auto}
.chips{position:relative;display:flex;gap:10px;flex-wrap:wrap}
.chip{position:relative;z-index:1;padding:8px 24px;border:1px solid rgba(244,239,230,.45);border-radius:40px;font-size:12.5px;font-weight:600;transition:color .4s,border-color .4s}
.chip:hover{border-color:var(--cream)}
.chip.active{color:var(--ink);border-color:transparent}
.chip-pill{position:absolute;z-index:0;top:0;left:0;height:100%;border-radius:40px;background:var(--cream);transition:transform .5s var(--ease),width .5s var(--ease)}
.menu-body{display:flex;align-items:center;gap:24px}
.cards{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:0 1 auto;max-width:calc(100% - 300px);padding:6px 4px 14px;scroll-behavior:smooth}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 200px;scroll-snap-align:start;background:var(--ink-2);border-radius:8px;overflow:hidden;position:relative;transition:transform .5s var(--ease),box-shadow .5s,opacity .5s;transform-style:preserve-3d;opacity:0;transform:translateY(40px)}
.card.in{opacity:1;transform:none}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 40px rgba(0,0,0,.6),0 0 0 1px rgba(242,194,48,.25)}
.card-img{aspect-ratio:146/114;overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card-new{position:absolute;left:8px;top:8px;z-index:1;background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.card:hover .card-img img{transform:scale(1.1) rotate(-1deg)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);transition:transform .9s var(--ease)}
.card:hover .card-img::after{transform:translateX(100%)}
.card-body{padding:12px 14px 14px;min-height:96px;display:flex;flex-direction:column}
.card-name{font-size:13.5px;font-weight:700;line-height:1.3}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.card-price{font-size:14px;font-weight:700}
.add{width:30px;height:30px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-size:20px;line-height:1;font-weight:500;transition:transform .4s cubic-bezier(.34,1.7,.64,1),background .3s}
.add:hover{transform:rotate(90deg) scale(1.15);background:var(--gold)}
.add.added{background:var(--gold);animation:pop .5s}
@keyframes pop{50%{transform:scale(1.4)}}
.card.hide{display:none}
.card-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:250px;border:1px dashed rgba(244,239,230,.25);background:transparent}
.card-soon .hand{font-size:28px}
.card-soon svg{width:80px}
.menu-next{flex:0 0 auto;width:62px;height:62px;border-radius:50%;border:1.5px solid var(--cream);display:grid;place-items:center;transition:background .4s,color .4s}
.menu-next svg{width:22px;transition:transform .4s var(--ease)}
.menu-next:hover{background:var(--cream);color:var(--ink)}
.menu-next:hover svg{transform:translateX(4px)}
.menu-note{font-size:30px;transform:rotate(-14deg);text-align:center;color:var(--cream);margin-left:8px}
.fly{position:fixed;z-index:250;width:44px;height:44px;border-radius:50%;object-fit:cover;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform .9s cubic-bezier(.5,-0.4,.7,1),opacity .9s}

/* ---------- MID ---------- */
.mid{position:relative;display:grid;grid-template-columns:38% 22% 40%;min-height:440px;overflow:hidden;background:var(--ink)}
.mid-neon{position:relative;overflow:hidden}
.mid-neon img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;animation:neonFlicker 6s infinite}
@keyframes neonFlicker{0%,18%,22%,62%,64%,100%{filter:brightness(1)}20%,63%{filter:brightness(.82)}}
.neon-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 30%,rgba(255,190,100,.18),transparent 55%);mix-blend-mode:screen;animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{opacity:.4}}
.play{position:absolute;left:30px;bottom:28px;display:flex;align-items:center;gap:14px;font-size:12px;color:#d9d1c4;text-align:left;line-height:1.5}
.play i{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--cream);display:grid;place-items:center;position:relative;transition:background .3s,color .3s}
.play i::before,.play i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--cream);animation:ripple 2.4s ease-out infinite}
.play i::after{animation-delay:1.2s}
@keyframes ripple{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.play svg{width:18px;margin-left:3px}
.play:hover i{background:var(--cream);color:var(--ink)}
.mid-paper{position:relative;margin:0 -30px;z-index:2;clip-path:polygon(12% 0,100% 0,92% 6%,95% 18%,90% 31%,94% 46%,89% 60%,93% 74%,88% 88%,92% 100%,0 100%,4% 86%,2% 72%,6% 58%,3% 42%,8% 28%,5% 14%);display:flex;flex-direction:column;align-items:center;padding-top:30px}
.rituals{font-size:clamp(26px,2.5vw,36px);transform:rotate(-8deg);text-align:center;margin-left:10px}
.peek{position:absolute;left:50%;bottom:-8px;width:min(270px,90%);transform:translate(-50%,70%);transition:transform 1.2s cubic-bezier(.34,1.4,.64,1)}
.peek.in{transform:translate(-50%,0)}
.peek-svg{width:100%;overflow:visible}
.peek-crown{transform-origin:150px 30px;animation:crownBob 2.4s ease-in-out infinite}
@keyframes crownBob{50%{transform:translateY(-6px) rotate(-6deg)}}
.pp{transition:transform .2s ease-out}
.peek-eye{transform-origin:center;transform-box:fill-box}
.peek-eye.blink{animation:blink2 .25s}
@keyframes blink2{50%{transform:scaleY(.1)}}
.mid-events{position:relative;padding:44px var(--gutter) 30px 40px;z-index:1}
.mid-events p{font-size:13px;color:#cfc7ba;margin:12px 0 22px;line-height:1.5}
.mid-events .btn-pill{margin-bottom:32px}
.event-card{display:flex;align-items:stretch;background:var(--cream);color:var(--ink);border-radius:8px;width:min(330px,58%);overflow:hidden;position:relative;z-index:3}
.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px;border-right:1px solid #d5cbbb;min-width:62px}
.ev-date b{font-family:var(--display);font-size:30px;line-height:1}
.ev-date small{font-size:10px;text-transform:lowercase;color:var(--muted)}
.ev-title{padding:14px 16px;font-weight:700;font-size:14px;line-height:1.25;flex:1;display:flex;align-items:center}
.ev-next{padding:0 18px;border-left:1px solid #d5cbbb;transition:background .3s}
.ev-next svg{width:18px;transition:transform .4s var(--ease)}
.ev-next:hover{background:#e4dacb}.ev-next:hover svg{transform:translateX(4px)}
.event-card.swap .ev-date,.event-card.swap .ev-title{animation:swap .6s var(--ease)}
@keyframes swap{0%{opacity:1;transform:none}40%{opacity:0;transform:translateY(-14px)}41%{transform:translateY(14px)}100%{opacity:1;transform:none}}
.ev-photos{position:absolute;right:var(--gutter);top:16px;bottom:0;width:42%;pointer-events:none}
.ev-pol{position:absolute;background:#f6f2ea;padding:7px 7px 26px;box-shadow:0 18px 40px rgba(0,0,0,.6);pointer-events:auto;transition:transform .8s var(--ease)}
.ev-pol img{width:100%;aspect-ratio:115/104;object-fit:cover}
.ev-pol-1{width:66%;left:0;top:4%;transform:rotate(-6deg);transform-origin:50% 0;animation:swing 6s ease-in-out infinite}
.ev-pol-2{width:72%;right:0;bottom:4%;transform:rotate(8deg)}
.ev-pol-2 img{aspect-ratio:144/92}
.ev-pol:hover{transform:rotate(0) scale(1.06);z-index:4;animation-play-state:paused}
@keyframes swing{50%{transform:rotate(-2deg)}}
.ev-pol .tape{width:60px;height:22px;top:-10px;left:40%;transform:rotate(-6deg);background:rgba(60,55,50,.7);mix-blend-mode:normal}
.ev-sticker{position:absolute;right:-4%;top:28%;background:#f6f2ea;color:var(--ink);font-size:20px;padding:12px 12px 16px;transform:rotate(7deg);box-shadow:0 10px 24px rgba(0,0,0,.5);z-index:2;text-align:center;text-transform:none}

/* ---------- LOCATION ---------- */
.location{position:relative;display:grid;grid-template-columns:25% 35% 40%;min-height:440px;overflow:hidden}
.loc-info{padding:46px 20px 40px var(--gutter);position:relative;z-index:2}
.loc-info .h2{font-size:clamp(26px,2.3vw,36px);margin-bottom:26px;white-space:nowrap}
.loc-list li{display:flex;gap:16px;align-items:flex-start;font-size:12.5px;line-height:1.5;margin-bottom:20px}
.loc-list svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px}
.loc-list li:nth-child(2){transition-delay:.1s}.loc-list li:nth-child(3){transition-delay:.2s}
.muted{color:var(--muted)}
.open-now{display:inline-flex;align-items:center;gap:8px}
.open-now::after{content:attr(data-state);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--ink);color:var(--cream)}
.open-now[data-state=""]::after{display:none}
.loc-info .btn-pill{margin-top:12px}
.map{position:relative;overflow:hidden;margin-left:-23%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-svg .road{fill:none;stroke:#fbf7ef;stroke-linecap:round}
.map-svg .road-edge{fill:none;stroke:#d7ccb8;stroke-linecap:round}
.map-svg .block{fill:#e3d9c7;stroke:#d8cdb9;stroke-width:.6}
.map-svg .anim-road{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.2s var(--ease)}
.map.in .anim-road{stroke-dashoffset:0}
.map-svg .block{opacity:0;transition:opacity 1s}
.map.in .block{opacity:1}
.pin{position:absolute;left:62%;top:30%;width:44px;transform:translate(-50%,-100%) translateY(-200px);opacity:0;transition:transform 1s 1s cubic-bezier(.34,1.6,.64,1),opacity .3s 1s;z-index:2}
.map.in .pin{transform:translate(-50%,-100%);opacity:1}
.pin svg{width:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));animation:pinBob 2.4s 2s ease-in-out infinite}
@keyframes pinBob{50%{transform:translateY(-6px)}}
.pin-pulse{position:absolute;left:50%;bottom:-4px;width:16px;height:6px;margin-left:-8px;border-radius:50%;background:rgba(0,0,0,.35)}
.pin-pulse::before{content:"";position:absolute;inset:-10px -20px;border-radius:50%;border:2px solid rgba(13,11,9,.5);animation:ripple 2s ease-out infinite}
.you-here{position:absolute;left:73%;top:8%;font-size:28px;transform:rotate(-14deg);text-align:center;z-index:2}
.storefront{position:relative;overflow:hidden;clip-path:polygon(3% 0,100% 0,100% 100%,0 100%,2% 88%,0 74%,3% 60%,1% 46%,4% 32%,1% 18%)}
.storefront img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:20% center}
.storefront::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 45% 55%,rgba(255,180,90,.18),transparent 50%);animation:glow 5s ease-in-out infinite;pointer-events:none}

/* ---------- Reviews marquee ---------- */
.reviews{background:var(--gold);color:var(--ink);overflow:hidden;padding:16px 0;transform:rotate(-1.2deg);margin:-8px -10px 0;position:relative;z-index:3}
.marquee-track{display:flex;gap:40px;white-space:nowrap;animation:marquee 40s linear infinite;width:max-content}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--display);font-weight:600;font-size:20px;text-transform:uppercase;display:flex;align-items:center;gap:40px}
.marquee-track span::after{content:"✦";font-size:16px}
.marquee-track em{font-family:var(--hand);font-style:normal;font-size:26px;text-transform:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.footer{display:flex;align-items:center;gap:40px;padding:36px var(--gutter);background:var(--ink);flex-wrap:wrap}
.foot-addr{font-size:11.5px;color:#b9b1a5;line-height:1.6}
.foot-nav{display:flex;gap:26px;margin-left:auto;font-size:12px}
.foot-nav a:hover{color:var(--gold)}
.socials{display:flex;gap:18px;margin-left:auto}
.socials a{width:24px;height:24px;display:block;transition:transform .4s cubic-bezier(.34,1.7,.64,1),color .3s}
.socials a:hover{transform:translateY(-4px) rotate(-8deg);color:var(--gold)}
.phone{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600}
.phone svg{width:14px}
.foot-heart{width:36px;margin:0;color:var(--cream)}
.foot-admin{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#8f877b;border:1px solid rgba(244,239,230,.15);border-radius:20px;padding:6px 12px;transition:color .3s,border-color .3s}
.foot-admin svg{width:13px}
.foot-admin:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- Modal + toast ---------- */
.modal{position:fixed;inset:0;z-index:260;background:rgba(5,4,3,.85);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.5s var(--ease)}
.modal.open{opacity:1;visibility:visible}
.modal-inner{position:relative;width:min(900px,92vw);aspect-ratio:16/9;transform:scale(.9);transition:transform .6s var(--ease)}
.modal.open .modal-inner{transform:none}
.modal-film{position:absolute;inset:0;overflow:hidden;border-radius:12px;background:#000}
.modal-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:film 16s infinite}
.modal-film img:nth-child(2){animation-delay:4s}.modal-film img:nth-child(3){animation-delay:8s}.modal-film img:nth-child(4){animation-delay:12s}
@keyframes film{0%{opacity:0;transform:scale(1.15)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0}}
.film-caption{position:absolute;left:30px;bottom:24px;font-size:48px;color:var(--cream);text-shadow:0 4px 20px rgba(0,0,0,.6);transform:rotate(-4deg)}
.modal-close{position:absolute;top:-48px;right:0;font-size:36px;line-height:1;color:var(--cream);transition:transform .3s}
.modal-close:hover{transform:rotate(90deg)}
.toast{position:fixed;left:50%;bottom:28px;z-index:270;transform:translate(-50%,200px);background:var(--cream);color:var(--ink);padding:14px 22px;border-radius:40px;font-weight:700;font-size:13px;box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .6s var(--ease);display:flex;gap:10px;align-items:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .cards{max-width:calc(100% - 100px)}
  .menu-note{display:none}
}
@media (max-width:900px){
  .header{gap:16px;padding:16px}
  .header.scrolled{padding:10px 16px}
  .city{display:none}
  .btn-order{padding:10px 16px}
  .hero{height:auto;min-height:100svh;max-height:none}
  .hero-media{left:-50px;right:0;bottom:auto;height:64%;top:60px}
  .hero-shade{background:linear-gradient(0deg,#090706 34%,rgba(9,7,6,.5) 50%,rgba(9,7,6,0) 66%,rgba(9,7,6,.5) 100%)}
  .hero-note{top:auto;bottom:360px;font-size:22px}
  .hero-content{top:auto;bottom:70px;transform:none;left:16px;right:16px}
  .hero-title{font-size:clamp(52px,15vw,96px)}
  .hero-note{right:18px}
  .hero-brand,.scroll-ind{display:none}
  .about{grid-template-columns:1fr;}
  .about-left{height:400px;padding:0 16px}
  .doodle-crown{left:16px}.about-hand{left:10px}
  .polaroid{left:auto;right:16px}
  .about-text{padding:10px 16px 40px}
  .about-text p br{display:none}
  .features{gap:18px 10px;display:grid;grid-template-columns:repeat(2,1fr)}
  .about-wall{height:280px;clip-path:polygon(0 4%,12% 0,30% 5%,50% 1%,70% 6%,88% 0,100% 4%,100% 100%,0 100%)}
  .menu{padding-left:16px}
  .menu-head{padding-right:16px}
  .chips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .chip{flex:0 0 auto}
  .cards{max-width:100%}
  .card{flex-basis:170px}
  .menu-next{display:none}
  .mid{grid-template-columns:1fr}
  .mid-neon{height:300px}
  .mid-paper{margin:-20px 0;height:330px;clip-path:polygon(0 5%,15% 0,35% 4%,55% 0,75% 5%,100% 1%,100% 96%,80% 100%,60% 95%,40% 100%,20% 96%,0 100%)}
  .mid-events{padding:50px 16px 330px}
  .event-card{width:100%}
  .ev-photos{left:16px;right:16px;width:auto;top:auto;bottom:20px;height:290px}
  .location{grid-template-columns:1fr}
  .loc-info{padding:40px 16px 10px}
  .map{margin-left:0;height:300px;-webkit-mask-image:none;mask-image:none}
  .storefront{height:300px;clip-path:polygon(0 4%,20% 0,45% 5%,70% 0,100% 4%,100% 100%,0 100%)}
  .footer{gap:20px}
  .foot-nav,.socials{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}