/* Illustrator artboard: 1920 × 980 pt (2560 × 1306.67 CSS px).
   The exported vectors preserve the original typography and tracking. */
.menu-page{--menu-photo-drop-duration:1050ms}
.menu-page .menu-hero{display:block;height:300svh;overflow:visible;position:relative}
.menu-page .menu-hero-stage{
  --menu-artboard-width:min(100%, 195.918svh);
  --menu-center-drop-delay:1350ms;
  --menu-center-landing:calc(var(--menu-center-drop-delay) + var(--menu-photo-drop-duration));
  position:sticky;top:0;height:100svh;aspect-ratio:auto;width:100%;max-width:none;overflow:hidden
}
.menu-page .menu-hero-art{left:33.854167%;top:calc(50% - 16.145833vw);width:33.854167%;max-width:none;transition:none;animation:none;will-change:transform,opacity}
.menu-page .menu-hero-leaf{animation:none;transform:none}
.menu-page .menu-hero-art--center,
.menu-page .menu-hero-ribbon,
.menu-page .menu-hero-peeking-dog,
.menu-page .menu-hero-intro{
  inset:auto;left:50%;top:50%;width:var(--menu-artboard-width);
  transform:translate(-50%,-50%)
}
.menu-page .menu-hero-art--center{z-index:2;opacity:1}
.menu-page .menu-hero-art--center svg{display:block;width:100%;height:auto;overflow:visible}
.menu-page .menu-hero-shell{--menu-shell-offset:23px -13px;translate:var(--menu-shell-offset)}
.menu-page .menu-hero-art--left{z-index:1;opacity:var(--split,0);transform:translateX(calc(-1 * var(--spread,0px)))}
.menu-page .menu-hero-art--right{z-index:1;opacity:var(--split,0);transform:translateX(var(--spread,0px))}
.menu-page .menu-hero-intro{
  left:0;width:100%;transform:translateY(-50%);
  transition:none;opacity:1
}
.menu-page .menu-hero-lettering{display:block;width:var(--menu-artboard-width);max-width:none;height:auto;margin-inline:auto}
.menu-page .menu-hero-ribbon{position:absolute;z-index:0;height:auto;overflow:visible;pointer-events:none}
.menu-page .menu-hero-peeking-dog{position:absolute;z-index:4;height:auto;pointer-events:none}
.menu-page .menu-hero-dog{--menu-dog-x:44px;transform:translateX(var(--menu-dog-x))}
.menu-page .menu-hero-pistachios{transform:translateX(48px)}
.menu-page .menu-hero-checkers{opacity:.5;transform-box:view-box;transform:translateX(var(--checker-offset)) scale(.9)}
/* Anchor each strip to its title edge and retain the shared vertical scaling origin. */
.menu-page .menu-hero-checkers--left{--checker-offset:-1.42px;transform-origin:189.466px 503.428px}
.menu-page .menu-hero-checkers--right{--checker-offset:-2.04px;transform-origin:1735.748px 503.428px}
/* The stage crops the ribbon's left bleed. On ultrawide screens, span the stage to keep that bleed offscreen. */
@media(min-aspect-ratio:9/4) and (min-width:761px){
  .menu-page .menu-hero-ribbon{width:100%;height:100%}
}
.menu-page :is(.menu-hero-details,.menu-hero-ribbon,.menu-hero-peeking-dog){opacity:calc(1 - var(--copy-fade,0))}
.menu-page .menu-hero-wordmark{opacity:var(--copy-fade,0)}

@media(prefers-reduced-motion:no-preference){
  .menu-page .menu-hero-wordmark{
    transform-box:fill-box;transform-origin:center;
    transform:scaleX(var(--wordmark-stretch,1))
  }
  .menu-page .menu-hero-stage.is-loading-opening :is(.menu-hero-art--center,.menu-hero-intro,.menu-hero-ribbon,.menu-hero-peeking-dog){visibility:hidden}
  .menu-page .menu-hero-stage.is-opening #menu-leaf-clip-center path{
    transform-origin:center;
    animation:menu-pistachio-shrink 1.8s cubic-bezier(.35,0,.16,1) .25s both
  }
  .menu-page .menu-hero-stage.is-opening .menu-hero-wide-photo{
    transform-origin:0 0;
    animation:menu-opening-reframe 2.05s ease-in-out both
  }
  .menu-page .menu-hero-stage.is-opening .menu-hero-art--center svg>g[clip-path]{
    transform-box:fill-box;transform-origin:50% 90%;
    animation:menu-hero-center-land var(--menu-photo-drop-duration) var(--menu-center-drop-delay) both
  }
  .menu-page .menu-hero-stage.has-center-entrance .menu-hero-art--center .menu-hero-shell{
    animation:menu-hero-shell-unfold 850ms cubic-bezier(.22,1,.36,1) var(--menu-center-landing) both
  }
  .menu-page .menu-hero-stage.is-splitting :is(.menu-hero-art--left,.menu-hero-art--right){
    transform-origin:50% 90%;
    animation:menu-side-hop var(--menu-photo-drop-duration) linear both
  }
  .menu-page .menu-hero-stage.is-opening .menu-hero-lettering{
    animation:menu-opening-copy .45s ease-out 1.55s both
  }
  .menu-page .menu-hero-ribbon{visibility:hidden}
  .menu-page .menu-hero-stage.is-opening .menu-hero-ribbon{
    visibility:visible;
    stroke-dasharray:1 1;
    animation:menu-ribbon-draw 2.9s ease-in-out var(--menu-center-landing) both
  }
  .menu-page .menu-hero-stage.is-opening .menu-hero-dog{
    transform-box:fill-box;transform-origin:50% 100%;
    animation:menu-hero-dog-bounce .55s ease-in-out 2.05s both
  }
  .menu-page .menu-hero-stage.is-opening :is(.menu-hero-bracket-left,.menu-hero-bracket-right){
    animation:menu-bracket-spread .65s cubic-bezier(.22,1,.36,1) 1.65s both
  }
  .menu-page .menu-hero-bracket-left{--menu-bracket-offset:8.4%}
  .menu-page .menu-hero-bracket-right{--menu-bracket-offset:-8.4%}
  .menu-page .menu-hero-stage.is-opening .menu-hero-bracket-words{
    animation:menu-bracket-reveal .65s cubic-bezier(.22,1,.36,1) 1.65s both
  }
}
.menu-page .menu-hero-art--left{--menu-hop-origin:var(--spread,0px)}
.menu-page .menu-hero-art--right{--menu-hop-origin:calc(-1 * var(--spread,0px))}
@keyframes menu-side-hop{
  0%{translate:var(--menu-hop-origin) 0;scale:1}
  15%{translate:calc(var(--menu-hop-origin) * .73) -34px}
  30%{translate:calc(var(--menu-hop-origin) * .48) -53px}
  45%{translate:calc(var(--menu-hop-origin) * .26) -52px}
  60%{translate:calc(var(--menu-hop-origin) * .09) -33px}
  75%{translate:0 0;scale:1}
  82%{translate:0 0;scale:1.025 .975}
  91%{translate:0 0;scale:.994 1.006}
  100%{translate:0 0;scale:1}
}
@keyframes menu-pistachio-shrink{
  from{transform:scale(var(--menu-opening-scale))}
  to{transform:scale(1)}
}
@keyframes menu-opening-reframe{
  0%,62%{transform:var(--menu-opening-crop)}
  88%,100%{transform:none}
}
@keyframes menu-opening-copy{from{opacity:0}to{opacity:1}}
@keyframes menu-hero-center-land{
  0%{transform:translateY(0);animation-timing-function:ease-out}
  28%{transform:translateY(-52px);animation-timing-function:ease-in}
  58%{transform:translateY(8px) scale(1.015,.975);animation-timing-function:ease-out}
  77%{transform:translateY(-19px);animation-timing-function:ease-in}
  100%{transform:none}
}
@keyframes menu-hero-shell-unfold{
  from{translate:0 0}
  to{translate:var(--menu-shell-offset)}
}
@keyframes menu-ribbon-draw{
  from{stroke-dashoffset:1}
  46.55%,58%{stroke-dashoffset:0}
  to{stroke-dashoffset:-1}
}
@keyframes menu-hero-dog-bounce{
  from{visibility:hidden;transform:translateX(var(--menu-dog-x)) scale(.93)}
  34%{visibility:visible;transform:translate(var(--menu-dog-x),-24px) scale(1.02)}
  76%{transform:translateX(var(--menu-dog-x)) scale(1.025,.97)}
  to{transform:translateX(var(--menu-dog-x))}
}
@keyframes menu-bracket-spread{from{transform:translateX(var(--menu-bracket-offset))}to{transform:translateX(0)}}
@keyframes menu-bracket-reveal{from{clip-path:inset(0 50%) fill-box}to{clip-path:inset(0) fill-box}}

/* Mobile intentionally crops the sides of the Illustrator artboard and
   scales the photo down during the three-frame scroll transition. */
@media(max-width:760px){
  .menu-page .menu-hero-stage{--menu-artboard-width:168%}
  .menu-page .menu-hero-lettering{margin-inline:0;position:relative;left:50%;transform:translateX(-50%)}
  .menu-page .menu-hero-stacked-title{transform:translate(420px,-135px)}
  .menu-page .menu-hero-caption{transform:translate(-610px,420px)}
  .menu-page .menu-hero-checkers{display:none}
  .menu-page .menu-hero-art:is(.menu-hero-art--left,.menu-hero-art--right){left:14%;top:39%;width:72%;transform-origin:50% 50%}
  .menu-page :is(.menu-hero-art--center,.menu-hero-peeking-dog){transform:translate(-50%,-50%) scale(var(--frame-scale,1))}
  .menu-page .menu-hero-art--left{transform:translateX(calc(-1 * var(--spread,0px))) scale(var(--frame-scale,1))}
  .menu-page .menu-hero-art--right{transform:translateX(var(--spread,0px)) scale(var(--frame-scale,1))}
}
@media(prefers-reduced-motion:reduce){.menu-page .menu-hero-art{will-change:auto}}
/* Keep the expanded hero still while the complete next panel slides over it. */
.menu-page .menu-hero + .menu-category{margin-top:-100svh;z-index:1;background:var(--olive,#78853c)}
.menu-page .menu-category--waffles{
  min-height:calc(100svh + var(--menu-bottom-extra,0px));
  padding-bottom:var(--menu-bottom-extra,0px)
}
@media(max-width:1100px){
  .menu-page .menu-category--waffles{min-height:0;padding-bottom:calc(50px + var(--menu-bottom-extra,0px))}
}
.menu-page .menu-category .menu-bracket-words{grid-template-columns:1fr}
.menu-page .menu-category.is-pending:not(.is-visible) .menu-bracket-words{grid-template-columns:0fr}
.menu-page .menu-category .menu-bracket-words>span{min-width:0;overflow:hidden;white-space:nowrap}
.menu-page .menu-category .menu-category-en{opacity:1;transform:none;transition:none}
.menu-page .menu-category-stickers{
  position:absolute;z-index:2;right:8%;bottom:7%;pointer-events:none;
  font:700 clamp(12px,1.25vw,24px)/1.1 "Lato",Arial,sans-serif;
  letter-spacing:.02em;color:#fff
}
.menu-page .menu-category-stickers span{
  display:block;width:max-content;padding:.36em .8em;border:1.5px solid #fff;
  border-radius:.55em;background:#aa9989;transform:rotate(-9deg)
}
.menu-page .menu-category-stickers span+span{
  margin:-.08em 0 0 1.7em;background:#78853c;transform:rotate(3deg)
}
.menu-page :is(#pistachio-milk-foam,#tea-latte,#fruit-tea,#waffle-burgers) .menu-category-stickers{
  left:18%;right:auto;bottom:13%
}
.menu-page :is(#pistachio-milk-foam,#tea-latte,#fruit-tea,#waffle-burgers) .menu-category-stickers span+span{
  margin-left:3.2em
}
.menu-page :is(.menu-category--original,.menu-category--caffeine-free,.menu-category--toppings) .menu-category-stickers{
  left:min(57%,calc(100% - 135px));right:auto;bottom:13%
}
.menu-page :is(.menu-category--original,.menu-category--caffeine-free,.menu-category--toppings) .menu-category-stickers span+span{
  margin-left:2.8em
}
@media(prefers-reduced-motion:no-preference){
  .menu-page .menu-category.is-pending:not(.is-visible) .menu-category-stickers{opacity:0}
  .menu-page .menu-category.is-pending.is-visible .menu-category-stickers{
    animation:menu-opening-copy .3s ease-out var(--menu-photo-drop-duration) both
  }
}
/* One entrance: pistachio-shaped photo falls, bounces once, then rests.
   The large background panel unfolds just after the landing. */
.menu-page .menu-category .menu-category-leaf{animation:none;transform-origin:50% 90%}
.menu-page .menu-category::before{transform-origin:100% 50%}
.menu-page :is(.menu-category--original,.menu-category--caffeine-free,.menu-category--toppings)::before{transform-origin:0 50%}
.menu-page .menu-category.is-pending:not(.is-visible) .menu-category-leaf{opacity:0;transform:translateY(-180px) rotate(-8deg)}
.menu-page .menu-category.is-pending:not(.is-visible)::before{opacity:0;transform:scaleX(.02)}
.menu-page .menu-category.is-pending.is-visible .menu-category-leaf{animation:menu-pistachio-drop var(--menu-photo-drop-duration) both}
.menu-page .menu-category.is-pending.is-visible::before{
  animation:menu-panel-unfold var(--menu-panel-duration) cubic-bezier(.22,1,.36,1) var(--menu-panel-delay) both
}
.menu-page .menu-category{
  --menu-panel-duration:850ms;
  --menu-panel-delay:var(--menu-photo-drop-duration);
  --menu-copy-delay:calc(var(--menu-panel-delay) + var(--menu-panel-duration));
}
@media(prefers-reduced-motion:no-preference){
  .menu-page .menu-category.is-pending:not(.is-visible) .menu-category-copy{opacity:0}
  .menu-page .menu-category.is-pending.is-visible .menu-category-copy{
    animation:menu-opening-copy .2s ease-out var(--menu-copy-delay) both
  }
  .menu-page .menu-category .menu-bracket-words{
    transition:grid-template-columns 1s cubic-bezier(.22,1,.36,1) var(--menu-copy-delay)
  }
}
@keyframes menu-pistachio-drop{
  0%{opacity:0;transform:translateY(-180px) rotate(-8deg);animation-timing-function:cubic-bezier(.5,0,.85,.55)}
  12%{opacity:1}
  54%{opacity:1;transform:translateY(12px) rotate(1deg) scale(1.025,.96);animation-timing-function:cubic-bezier(.15,.65,.3,1)}
  74%{transform:translateY(-27px) rotate(-1deg) scale(.99,1.015);animation-timing-function:cubic-bezier(.5,0,.8,.55)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes menu-panel-unfold{from{opacity:0;transform:scaleX(.02)}to{opacity:1;transform:scaleX(1)}}
/* Start the backing inside the photo silhouette so it appears from behind. */
.menu-page .menu-category.is-pending.is-visible .menu-category-leaf>path{animation:menu-cream-grow 1000ms cubic-bezier(.22,1,.36,1) var(--menu-photo-drop-duration) both}
@keyframes menu-cream-grow{
  from{d:var(--backing-photo-shape)}
  to{d:var(--backing-open-shape)}
}
@media(prefers-reduced-motion:reduce){
  .menu-page .menu-category.is-pending .menu-category-leaf>path{animation:none}
}
.menu-page .menu-category-progress{--dot-step:56px;display:grid;gap:calc(var(--dot-step) - 8px);position:fixed;right:clamp(24px,6.4vw,124px);top:50%;transform:translateY(-50%);z-index:30;margin:0;padding:0;transition:opacity .2s}
.menu-page .menu-category-progress[hidden]{display:none}
.menu-page .menu-category-progress a,.menu-page .menu-category-progress a[aria-current]{background:transparent;width:8px;height:8px}
.menu-page .menu-category-progress .menu-progress-marker{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#fff;transform:translateY(calc(var(--active-index,0) * var(--dot-step)));transition:transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none}
.menu-page .menu-category-progress a:focus-visible{outline:2px solid white;outline-offset:6px}
.menu-page .menu-category-progress{--pager-color:#fff}
.menu-page .menu-category-progress.is-on-light{--pager-color:#77736e}
.menu-page .menu-category-progress::before{border-color:var(--pager-color)}
.menu-page .menu-category-progress a{border-color:var(--pager-color)}
.menu-page .menu-category-progress .menu-progress-marker{background:var(--pager-color)}
.menu-page .menu-category-progress a:focus-visible{outline-color:var(--pager-color)}
@media(max-width:1100px){.menu-page .menu-category-progress{right:16px;--dot-step:38px}}
@media(max-height:600px){.menu-page .menu-category-progress{--dot-step:30px}}
@media(prefers-reduced-motion:reduce){.menu-page .menu-category-progress .menu-progress-marker{transition:none}}
@media(prefers-reduced-motion:reduce){
  .menu-page .menu-category.is-pending .menu-category-leaf,.menu-page .menu-category.is-pending::before{animation:none;opacity:1;transform:none}
  .menu-page .menu-category .menu-bracket-words{grid-template-columns:1fr;transition:none}
}