@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
.float{animation:floaty 5s ease-in-out infinite}

.story-key{
  --key-r:-8deg;position:absolute;z-index:4;display:block;
  width:clamp(62px,7vw,108px);aspect-ratio:655/617;pointer-events:none;
  transform:rotate(var(--key-r)) scale(1);transform-origin:50% 76%;
  transition:transform 130ms cubic-bezier(.2,0,0,1),filter 130ms ease-out;
  filter:drop-shadow(5px 7px 4px rgba(35,38,31,.18));
}
.story-key img{display:block;width:100%;height:auto}
.story-key::before,.story-key::after{
  content:'';position:absolute;width:24%;height:3px;border-radius:999px;background:#4a6741;
  opacity:0;transition:opacity 80ms ease-out,transform 130ms ease-out;
}
.story-key::before{left:-24%;top:38%;transform:translateX(8px) rotate(12deg);box-shadow:4px 12px 0 #4a6741}
.story-key::after{right:-23%;top:30%;transform:translateX(-8px) rotate(-14deg);box-shadow:-4px 13px 0 #4a6741}
.story-key.is-pressed{transform:translateY(6px) rotate(var(--key-r)) scale(.88);filter:drop-shadow(2px 2px 2px rgba(35,38,31,.15))}
.story-key.is-pressed::before,.story-key.is-pressed::after{opacity:.72;transform:translateX(0) rotate(0)}
.story-key--home-hero{left:8%;top:31%}
.story-key--home-owners{right:7%;top:20%}
.story-key--home-menu{left:8%;bottom:14%}
.story-key--menu-hero{left:9%;top:44%}
.story-key--menu-bakery{right:7%;top:14%}
.story-key--menu-desserts{left:280px;top:8%}
/* Wide screens have gutter to spare: park the desserts key left of the menu column. */
@media (min-width:1360px){.story-key--menu-desserts{left:auto;right:100%;margin-right:clamp(24px,calc((100vw - 1300px)/3),96px);top:12%}}
@media (max-width:720px), (max-device-width:720px){.story-key{display:none}}
@media (prefers-reduced-motion:reduce){.story-key{transition:none}}

.hero-logo-composite{
  position:relative;
  display:block;
  flex:none;
  width:86%;
  max-width:86%;
  aspect-ratio:1463/1054;
  margin:0;
}
.hero-logo-piece{
  position:absolute;
  display:block;
  object-fit:contain;
  animation-delay:.8s;
  animation-fill-mode:backwards;
}
@keyframes heroFloatTop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes heroFloatBottom{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.hero-logo-ctrl{left:0;top:0;width:45.455%;height:30.55%;animation:heroFloatTop 4.3s ease-in-out .8s infinite backwards}
.hero-logo-plus{left:45.455%;top:0;width:9.911%;height:30.55%;animation:heroFloatTop 3.7s ease-in-out .8s infinite backwards}
.hero-logo-alt{left:55.366%;top:0;width:44.634%;height:30.55%;animation:heroFloatTop 4.9s ease-in-out .8s infinite backwards}
.hero-logo-refresh{left:0;top:30.55%;width:100%;height:69.45%;animation:heroFloatBottom 4.1s ease-in-out .8s infinite backwards}

.hero-screen-content{
  padding:0!important;
  gap:0!important;
  transform:none!important;
}
.hero-seo-copy{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media (prefers-reduced-motion:reduce){
  .hero-logo-piece{animation:none}
}

.hero-desk-object{
  position:absolute;
  bottom:2.5%;
  z-index:1;
  overflow:visible;
  pointer-events:none;
  filter:url(#sketchy);
}
.hero-desk-object :is(path,rect,ellipse,circle){stroke-linecap:round;stroke-linejoin:round}
.hero-desk-mouse{left:-8%;width:min(275px,29%);transform:rotate(-4deg)}
.hero-desk-coffee{right:-30%;bottom:7.5%;width:min(443px,46.5%)}

.find-us-backdrop{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.find-us-backdrop svg{
  width:100%;
  height:100%;
  overflow:visible;
  opacity:.42;
  filter:url(#sketchy);
}
@media (min-width:721px){.find-us-backdrop{display:block}}

.owners-doodle-field{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.owners-doodle-field svg{
  width:100%;
  height:100%;
  opacity:.48;
  filter:url(#sketchy);
}
@media (min-width:721px){.owners-doodle-field{display:block}}

.menu-bakery-field{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.menu-bakery-field svg{
  width:100%;
  height:100%;
  opacity:.34;
  filter:url(#sketchy);
}
@media (min-width:721px){.menu-bakery-field{display:block}}

.social-doodle-field{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
}
.social-doodle-field svg{
  width:100%;
  height:100%;
  opacity:.34;
  filter:url(#sketchy);
}
@media (min-width:721px){.social-doodle-field{display:block}}

.menu-section-doodles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.25;
  filter:url(#sketchy2);
}
#cat-panaderia .menu-section-doodles{opacity:.36}
@media (max-width:720px), (max-device-width:720px){
  .menu-section-doodles{opacity:.14}
  #cat-panaderia .menu-section-doodles{opacity:.18}
}

.owner-heading{opacity:0;transform:translateY(-26px);transition:opacity .8s ease,transform .8s ease}
.owner-heading.in-view{opacity:1;transform:translateY(0)}
.owner-card{opacity:0;transform:translateY(70px) rotate(var(--r,0deg)) scale(.92);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.owner-card.in-view{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}
.owner-photo{opacity:0;transition:opacity .35s ease}
.owner-photo.in-view{opacity:1}

@media (max-width:640px), (max-device-width:640px){
  [data-screen-label="Home"],[data-screen-label="Menu"]{
    width:var(--visual-viewport-width,100svw)!important;
    max-width:var(--visual-viewport-width,100svw)!important;
    box-sizing:border-box;
    overflow-x:hidden;
  }
  .hero-section{min-height:auto!important;padding:118px 20px 70px!important}
  .hero-stage{width:100%!important;max-width:100%!important}
  .hero-scroll-cue{top:98%!important}
  .owners-wrap{margin-top:-16px!important}
  .map-frame-wrap{max-width:calc(100% - 14px)!important;transform:rotate(-0.5deg)!important}
}

.menu-tease-card{transition:transform .2s ease,box-shadow .2s ease}
.menu-tease-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.18)}

@media (hover:hover) and (pointer:fine){
  .food-frame{transition:box-shadow .3s ease}
}

.social-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;width:180px;
  text-decoration:none;color:#23261f;background:#ece7d6;border:3px solid #23261f;border-radius:16px;
  padding:24px 20px;box-shadow:6px 6px 0 #23261f;transform:rotate(var(--r,0deg));
  transition:transform .2s ease,box-shadow .2s ease;
}
.social-card:hover{transform:rotate(var(--r,0deg)) translateY(-4px);box-shadow:8px 10px 0 #23261f}
.social-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;color:#ece7d6;margin-bottom:14px}
.social-name{font-family:'Press Start 2P',monospace;font-size:12px;margin:0}

@media (max-width:640px), (max-device-width:640px){
  .footer-copyright,
  .footer-credit{
    flex-basis:100%;
    margin-left:0!important;
    text-align:right;
  }
}

.hero-coming-soon{
  position:absolute;
  top:-7%;
  right:-20%;
  left:auto;
  z-index:5;
  font-size:clamp(12.935px,4.776cqw,25.87px);
}
@media (max-width:640px), (max-device-width:640px){
  .hero-coming-soon{top:-20%}
}

/* The dc runtime can report a desktop-sized layout viewport on real phones.
   visual-mobile is keyed to Safari's visualViewport instead of media queries. */
:root.visual-mobile [data-screen-label="Home"],
:root.visual-mobile [data-screen-label="Menu"]{
  width:var(--visual-viewport-width)!important;
  min-width:0!important;
  max-width:var(--visual-viewport-width)!important;
  box-sizing:border-box;
  overflow-x:hidden;
}
:root.visual-mobile .story-key{display:none!important}
:root.visual-mobile .hero-section{
  min-height:auto!important;
  padding:76px 24px 34px!important;
}
:root.visual-mobile .hero-stage{
  width:min(330px,calc(var(--visual-viewport-width) - 48px))!important;
  max-width:100%!important;
  flex:none!important;
}
:root.visual-mobile .hero-coming-soon{
  top:-12%!important;
  right:-8%!important;
  font-size:clamp(11px,4.1cqw,15px)!important;
}
:root.visual-mobile .hero-scroll-cue{top:97%!important}
:root.visual-mobile .owners-wrap{margin-top:-8px!important}
:root.visual-mobile .map-frame-wrap{
  max-width:calc(100% - 14px)!important;
  transform:rotate(-.5deg)!important;
}
:root.visual-mobile .menu-section-doodles{opacity:.14}
:root.visual-mobile #cat-panaderia .menu-section-doodles{opacity:.18}
:root.visual-mobile .footer-copyright,
:root.visual-mobile .footer-credit{
  flex-basis:100%;
  margin-left:0!important;
  text-align:right;
}