:root {
  --red: #e3211a;
  --red-deep: #b3160f;
  --white: #fff;
  --sky: #1a93ff;
  --on-sky: #fff;
  --sky-pale: #d6ecff;
  --yellow: #ffcc00;
  --ink: #231511;
  --line: rgb(35 21 17 / .14);
  --display: "Dela Gothic One", "Arial Black", sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --radius: 32px;
  --gutter: clamp(16px, 3vw, 48px);
  --board: clamp(26px, 3.2vw, 48px);
  --boards: repeating-linear-gradient(180deg, transparent 0 calc(var(--board) - 2px), rgb(90 10 6 / .16) calc(var(--board) - 2px) var(--board));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; }

h2 { font-size: clamp(34px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.01em; }

a { color: inherit; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.defs { position: absolute; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 40;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--white);
}
.skip:focus { left: 8px; }

/* First-visit intro: the fish fries from pale to golden, then the roof lifts away. */
.loader {
  --fry: 0;
  --notch: 14vw;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: none;
  place-items: center;
  height: calc(100vh + var(--notch));
  height: calc(100dvh + var(--notch));
  height: calc(100lvh + var(--notch));
  padding: 0 var(--gutter) var(--notch);
  overflow: hidden;
  background-color: var(--red);
  background-image: var(--boards);
  color: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
}
.is-frying .loader, .is-served .loader { display: grid; }
/* Phone browsers paint around the intro, so the page behind it goes red and out of sight. */
.is-frying body, .is-served body { background: var(--red); }
.is-frying body > :not(.loader) { visibility: hidden; }
/* Those bars follow the page's background, so it stays red until the roof has gone. Meanwhile the
   sky sits on main, with a shadow reaching up behind the header (a sticky element's color would reach
   the bars), and a red strip covers what's behind the bottom bar. */
.is-served main { background: var(--sky); box-shadow: 0 -100px var(--sky); }
.is-served body::after { content: ""; position: absolute; inset: 100svh 0 auto; z-index: 20; height: 100vh; background: var(--red); }
.is-served .loader { animation: lift .8s cubic-bezier(.7, 0, .2, 1) forwards; }
.is-frying .line, .is-frying .hero-food { animation-play-state: paused; }

.loader-pan { position: relative; display: grid; justify-items: center; }
.loader-food {
  width: min(560px, 80vw, 56vh);
  filter:
    grayscale(calc(1 - var(--fry)))
    brightness(calc(1.6 - .6 * var(--fry)))
    saturate(calc(1 + .15 * var(--fry)))
    drop-shadow(0 16px 22px rgb(70 8 4 / .4));
  animation: sizzle .16s ease-in-out infinite alternate;
}
.loader-count {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(76px, 15vw, 150px);
  letter-spacing: -.02em;
  line-height: 1;
}
.loader-word { margin: 10px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; }

.loader-bubbles { position: absolute; inset: 0; }
.loader-bubbles i {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border: 2px solid rgb(255 243 223 / .55);
  border-radius: 50%;
  animation: bubble var(--time) ease-in infinite;
  animation-delay: var(--wait);
}
.loader-bubbles i:nth-child(1) { --x: 8%; --size: 18px; --time: 1.5s; --wait: -.2s; }
.loader-bubbles i:nth-child(2) { --x: 17%; --size: 34px; --time: 1.9s; --wait: -1.1s; }
.loader-bubbles i:nth-child(3) { --x: 27%; --size: 14px; --time: 1.3s; --wait: -.6s; }
.loader-bubbles i:nth-child(4) { --x: 38%; --size: 26px; --time: 1.7s; --wait: -1.5s; }
.loader-bubbles i:nth-child(5) { --x: 47%; --size: 12px; --time: 1.2s; --wait: -.3s; }
.loader-bubbles i:nth-child(6) { --x: 57%; --size: 30px; --time: 2s; --wait: -.9s; }
.loader-bubbles i:nth-child(7) { --x: 66%; --size: 16px; --time: 1.4s; --wait: -1.2s; }
.loader-bubbles i:nth-child(8) { --x: 76%; --size: 38px; --time: 1.8s; --wait: -.4s; }
.loader-bubbles i:nth-child(9) { --x: 85%; --size: 20px; --time: 1.6s; --wait: -1.4s; }
.loader-bubbles i:nth-child(10) { --x: 93%; --size: 13px; --time: 1.25s; --wait: -.7s; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-doordash, .btn-ubereats, .hero-actions .btn, .callbar .btn { display: inline-flex; align-items: center; justify-content: center; }
.btn-doordash, .btn-ubereats { gap: 7px; }
.btn-doordash { background: #eb1700; color: var(--white); }
.btn-ubereats { background: #06c167; color: #000; }
.btn-logo { flex: none; width: 1.5em; height: 1.5em; fill: currentColor; }
.btn-wordmark { flex: none; width: 5.400em; height: .9em; fill: currentColor; }

/* Header: a floating white sign with the store's name in the middle. */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 12px var(--gutter) 0;
  pointer-events: none;
}
.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  width: min(960px, 100%);
  min-height: 56px;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--white);
  filter: drop-shadow(0 10px 18px rgb(8 30 90 / .28));
  pointer-events: auto;
}
.logo { display: flex; flex-direction: column; align-items: center; color: var(--red); line-height: 1; text-decoration: none; }
.logo-name { font-family: var(--display); font-size: 26px; letter-spacing: -.01em; }
.logo-sub { margin-top: 3px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.top-side { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; }
.top-side-right { justify-content: flex-end; }
.top-side a { padding: 9px 15px; border-radius: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.top-side a:hover, .top-side a.is-here { background: var(--sky-pale); }
.top-delivery { position: relative; }
.top-delivery summary { padding: 9px 15px; border-radius: 12px; cursor: pointer; list-style: none; white-space: nowrap; }
.top-delivery summary::-webkit-details-marker { display: none; }
.top-delivery summary::after { content: " \25BE"; content: " \25BE" / ""; }
.top-delivery summary:hover, .top-delivery[open] summary { background: var(--sky-pale); }
.top-delivery-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 6px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 24px rgb(8 30 90 / .25);
}
.top-delivery-menu a { display: flex; align-items: center; gap: 6px; }
.top-delivery-menu a:first-child { color: #eb1700; }
.top-delivery-menu a:first-child:hover { color: var(--red-deep); }
.top-delivery-menu .btn-wordmark { --eats: #06c167; color: #000; }
.top-side .top-call { background: var(--yellow); }
.top-side .top-call:hover { background: var(--yellow); filter: brightness(1.06); }

/* Hero: the big red roof rising out of the page. Sizes use the hero's own
   width so the whole poster scales as one piece. */
.hero {
  --eave: min(10vw, 172px);
  --peak: min(1vw, 16px);
  --trim: .8vw;
  container-type: inline-size;
  position: relative;
  z-index: 2;
  overflow-x: clip;
  color: var(--white);
}
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.hero::before {
  background: var(--red-deep);
  clip-path: polygon(0 calc(var(--eave) - var(--trim)), 50% calc(var(--peak) - var(--trim)), 100% calc(var(--eave) - var(--trim)), 100% 100%, 0 100%);
}
.hero::after {
  background-color: var(--red);
  background-image: var(--boards);
  clip-path: polygon(0 var(--eave), 50% var(--peak), 100% var(--eave), 100% 100%, 0 100%);
}
.hero-stage {
  display: flex;
  flex-direction: column;
  max-width: 1680px;
  margin-inline: auto;
  padding: min(9cqw, 156px) var(--gutter) clamp(34px, 3.4cqw, 56px);
}
.hero-poster { position: relative; }
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(30px, 3.6cqw, 60px);
}
.hero-lead { flex: 1 1 360px; max-width: 33em; margin: 0; font-size: clamp(18px, 1.6cqw, 26px); font-weight: 500; line-height: 1.3; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-foot .btn-doordash { border-color: var(--white); }

.hero-title {
  --room: calc(min(100cqw, 1680px) - 2 * var(--gutter));
  letter-spacing: -.01em;
  line-height: .96;
  text-transform: uppercase;
}
/* The divisors are each word's width in the display font, so the long lines fill the page exactly. */
.line {
  display: block;
  font-size: calc(var(--room) / 7.9);
  white-space: nowrap;
  animation: rise .7s cubic-bezier(.2, .9, .3, 1.1) both;
}
.line-2 { animation-delay: .08s; }
.line-3 { font-size: calc(var(--room) / 7.28); animation-delay: .16s; }
.hero-and { color: var(--yellow); }

.hero-food {
  position: absolute;
  z-index: 3;
  top: -12%;
  right: .5%;
  width: 30%;
  transform: translateY(var(--drift, 0)) rotate(calc(4deg + var(--tilt, 0deg)));
  filter: saturate(1.15) drop-shadow(0 22px 26px rgb(70 8 4 / .4));
  animation: pop .8s .2s cubic-bezier(.2, .9, .3, 1.15) both;
}

/* Sticker */
.sticker {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  animation: wobble 6s ease-in-out infinite;
}
.sticker-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sticker-text { position: relative; display: block; line-height: 1.1; }
.sticker b { display: block; font-family: var(--display); font-weight: 400; }

.sticker-burst { top: -15%; right: -2%; width: max(11.5%, 104px); font-size: clamp(12px, 1.1cqw, 19px); }
.sticker-burst .sticker-shape { fill: var(--yellow); }
.sticker-burst b { font-size: 2.5em; line-height: 1.05; }


/* Scrolling band */
.band {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: 14px;
  background: var(--yellow);
  color: var(--ink);
}
.band-track { display: flex; width: max-content; animation: slide 60s linear infinite; }
.band-set { display: flex; flex: none; align-items: center; }
.band span { padding-inline: 20px; font-family: var(--display); font-size: clamp(19px, 2.3vw, 28px); white-space: nowrap; }
.band svg { flex: none; width: 34px; height: 23px; fill: var(--red); }
.band:hover .band-track { animation-play-state: paused; }

/* Lunch combo */
.lunch { padding-block: clamp(80px, 10vw, 150px) clamp(64px, 8vw, 110px); }
.lunch h2 { color: var(--on-sky); }
.lunch-head { max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.lunch-head p { max-width: 36em; margin: 20px auto 0; font-size: 19px; }

.carousel { margin-top: 44px; }
.carousel-track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 4px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  list-style: none;
}
/* Desktop: the row stays pinned while the page scroll slides the cards across.
   script.js measures --run and --pin-height. Touch screens swipe instead. */
.carousel.is-pinned { height: calc(var(--pin-height) + var(--run)); }
.carousel.is-pinned .carousel-pin { position: sticky; top: max(84px, calc(50vh + 42px - var(--pin-height) / 2)); }
.carousel.is-pinned .carousel-track { overflow-x: hidden; scroll-snap-type: none; }
.carousel-bar { width: min(220px, 50vw); height: 6px; margin: 22px auto 0; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .35); }
.carousel-bar i { display: block; height: 100%; border-radius: inherit; background: var(--white); transform: scaleX(calc(.16 + .84 * var(--seen, 0))); transform-origin: left; }
.carousel.fits .carousel-bar { display: none; }
.tile {
  flex: 0 0 min(440px, 80vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  aspect-ratio: 1 / 1.08;
  padding: 28px 28px 22px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--white);
  scroll-snap-align: start;
}
.tile:nth-child(even) { background: var(--yellow); color: var(--ink); }
.tile:first-child { margin-left: auto; }
.tile:last-child { margin-right: auto; }
.tile h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.tile img { width: 112%; max-width: none; margin-inline: -6%; filter: saturate(1.15) drop-shadow(0 14px 16px rgb(70 8 4 / .3)); transition: transform .25s ease; }
.tile:hover img { transform: scale(1.04) rotate(-1.5deg); }

/* Menu, laid out like the board inside the store */
.menu { padding-block: clamp(80px, 9vw, 130px); background: var(--red); color: var(--white); }
.menu-wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.menu-head { position: relative; z-index: 11; }
.menu-head h2 { position: relative; width: fit-content; font-family: "Pacifico", var(--display); font-size: clamp(54px, 8.8vw, 124px); letter-spacing: 0; line-height: 1.32; }
.menu-head h2 span { color: var(--yellow); }
/* The yellow streaks that burst around the titles and characters on the store's flyers. */
.rain { position: absolute; width: 22%; aspect-ratio: 1; overflow: visible; }
.rain-title { top: 2%; right: -.62em; width: .6em; }
.rain-shrimp { top: -14px; right: calc(3% + clamp(84px, 13vw, 170px) - 6px); width: clamp(34px, 4.6vw, 62px); transform: scaleX(-1) rotate(-14deg); }
.menu-head p { max-width: 38em; margin: 12px 0 0; }
.menu-head a { font-weight: 700; white-space: nowrap; }
.menu-mascot { position: absolute; top: -12px; right: 3%; width: clamp(84px, 13vw, 170px); }
.price-note { font-size: .88em; }

/* Sticks under the header. The band above it stays solid, so the menu cards
   slide away under both bars instead of showing around the floating sign. */
.menu-jump-bar {
  position: sticky;
  top: 78px;
  z-index: 10;
  margin: 20px calc(-1 * var(--gutter));
  background: var(--red);
}
.menu-jump-bar::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: 90px;
  background: var(--red);
}
.menu-jump {
  display: flex;
  gap: 8px;
  padding: 10px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.menu-jump a:hover { background: var(--yellow); }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.menu-col { display: grid; gap: 20px; }
.menu-card {
  position: relative;
  padding: 26px 32px 22px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  scroll-margin-top: 64px;
}
.menu-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--red-deep); font-size: 25px; line-height: 1.2; }
/* The yellow brush strokes from the store's flyers, behind section names and combo prices. */
.menu-brush, .flat { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 64' preserveAspectRatio='none'%3E%3Cpath fill='%23ffcc00' d='M10 12l24-3 26 2 60-4 70 2 60-3 50 3 12 5-9 3 13 5-10 4 12 5-11 4 10 6-13 4 8 5-16 4-56 2-60-3-70 4-50-3-34 3-14-5 8-5-15-5 12-5-14-6 13-5-10-6 12-4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.menu-brush { margin-left: -.5em; padding: .2em .6em .22em .5em; }
.flat { padding: .14em .42em .16em; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; rotate: -3deg; }
.note { margin: 6px 0 12px; font-size: 15px; line-height: 1.4; }
/* The store's characters stand beside their own combos, like on the flyers. */
.menu-card.menu-card-cast .note, .menu-card.menu-card-cast ol, .menu-card.menu-card-cast ul { margin-right: 38%; }
.menu-cast { position: absolute; right: clamp(14px, 2.2vw, 28px); bottom: 16px; width: 30%; pointer-events: none; }
.menu-cast .rain { top: -14%; right: -4%; }
.menu-cast .rain-flip { right: auto; left: -8%; transform: scaleX(-1); }
#fish-combo .menu-cast .rain { top: -38%; }
.menu-cast img { display: block; width: 100%; height: auto; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.menu-card:hover .menu-cast img { transform: translateY(-6px) rotate(-4deg); }
#chicken-combo .menu-cast { width: 21%; }
.menu-card ol, .menu-card ul { margin: 0; padding: 0; list-style: none; counter-reset: item; }
.menu-card li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  counter-increment: item;
}
.menu-card ol li span::before {
  content: counter(item);
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: .6em;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
}
.menu-card li b { font-weight: 700; }
.menu-card em { font-style: normal; color: var(--red-deep); font-weight: 500; }

/* Family-owned: the owner, then the plates */
.story {
  padding: clamp(72px, 9vw, 120px) var(--gutter) clamp(64px, 8vw, 110px);
  overflow: hidden;
  background: var(--yellow);
}
.story-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
  max-width: 1160px;
  margin-inline: auto;
}
.story-photo img { width: 100%; border-radius: var(--radius); }
.story h2 { color: var(--red); font-size: clamp(30px, 4.6vw, 66px); }
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.facts li { padding: 18px 16px 16px; border-radius: 20px; background: var(--white); }
.facts b { display: block; font-family: var(--display); font-size: clamp(25px, 2.6vw, 34px); font-weight: 400; line-height: 1.15; white-space: nowrap; }
.facts span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.3; }

.plates { margin: clamp(52px, 6vw, 84px) calc(-1 * var(--gutter)) 0; overflow: hidden; }
.plates .band-set { align-items: stretch; gap: 16px; margin: 0; padding: 0 8px; list-style: none; }
.plates:hover .band-track, .plates:focus-within .band-track { animation-play-state: paused; }
.plate { flex: none; width: clamp(240px, 26vw, 340px); }
.plate img { width: 100%; border-radius: 24px; filter: saturate(1.1); }
.plate p { margin: 10px 4px 0; font-size: 17px; font-weight: 700; line-height: 1.25; text-align: center; }

/* How to order */
.order {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(80px, 9vw, 130px) max(var(--gutter), calc((100% - 1340px) / 2));
  background: var(--red);
  color: var(--white);
}
.order-copy { position: sticky; top: 120px; align-self: start; }
.order-copy h2 { font-size: clamp(34px, 4.6vw, 70px); }
.order-copy p { max-width: 22em; margin: 18px 0 26px; font-size: 20px; }
.steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: sticky;
  top: 108px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  min-height: 300px;
  padding: 26px 0 26px 32px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  counter-increment: step;
}
.step:nth-child(2) { top: 128px; background: var(--yellow); }
.step:nth-child(3) { top: 148px; }
.step:has(a:focus-visible) { z-index: 1; }
.step h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.step h3::before { content: counter(step) ". "; color: var(--red-deep); }
.step p { margin: 10px 0 0; font-size: 17px; }
.step p a { font-weight: 700; }
.step-art { display: block; width: 100%; height: auto; overflow: visible; }
.art-name { font-family: var(--display); text-anchor: middle; }
.art-note { font-weight: 700; text-anchor: middle; }
/* Each card plays a small scene on a loop while it's on screen. */
.step.is-in .pick-hand, .step.is-in .pick-row { animation: pick-walk 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.step.is-in .pick-tap { animation: pick-tap 1.5s ease-in-out infinite; }
.call-phone { transform-box: fill-box; transform-origin: center; }
.call-button, .call-ripple { transform-box: fill-box; transform-origin: center; }
.call-waves { opacity: 0; }
.step.is-in .call-hand { animation: call-hand 4.5s ease-in-out infinite; }
.step.is-in .call-button { animation: call-press 4.5s ease-in-out infinite; }
.step.is-in .call-ripple { animation: call-ripple 4.5s ease-out infinite; }
.step.is-in .call-waves { animation: call-waves 4.5s linear infinite; }
.step.is-in .call-phone { animation: call-shake 4.5s linear infinite; }
.grab-rod { transform: translate(300px, -30px); }
.call-hand { transform: translateX(260px); }
.grab-reel { transform-box: fill-box; transform-origin: center; }
.grab-swing { transform-box: fill-box; transform-origin: 50% 0; }
.step.is-in .grab-rod { animation: grab-rod 6s ease-in-out infinite; }
.step.is-in .grab-line { animation: grab-line 6s ease-in-out infinite; }
.step.is-in .grab-reel { animation: grab-reel 6s ease-in-out infinite; }
.step.is-in .grab-box { animation: grab-box 6s ease-in-out infinite; }
.step.is-in .grab-swing { animation: grab-swing 6s ease-in-out infinite; }

/* Catering */
.catering { padding: clamp(72px, 9vw, 120px) var(--gutter); overflow: hidden; background: var(--yellow); }
.catering-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(24px, 5vw, 72px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}
.catering-copy { align-self: end; }
.catering-call { grid-area: 2 / 1; justify-self: start; align-self: start; min-width: 17em; font-variant-numeric: tabular-nums; }
.catering-kicker { margin: 0 0 8px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.catering h2 { color: var(--red); font-size: clamp(40px, 6.6vw, 96px); }
.catering-copy p:not(.catering-kicker) { max-width: 28em; margin: 18px 0 26px; font-size: 20px; }
.catering-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 470px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.catering-sides li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  background: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.catering-sides svg { flex: none; width: 44px; height: 44px; }

/* Slide the party size and food rains into a pile. script.js runs the physics. */
.party { grid-area: 1 / 2 / span 2; position: relative; overflow: hidden; container-type: inline-size; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius); background: var(--sky); }
.party-label { display: block; color: var(--white); font-family: var(--display); font-size: clamp(25px, 2.7vw, 34px); line-height: 1.15; text-align: center; }
.party-stack { position: relative; aspect-ratio: 1 / .78; margin: 12px 0 14px; container-type: inline-size; touch-action: pan-y pinch-zoom; }
.party-food { position: absolute; top: 0; left: 0; width: 19cqw; height: 19cqw; object-fit: contain; margin: -9.5cqw 0 0 -9.5cqw; filter: drop-shadow(0 .8cqw .8cqw rgb(8 30 90 / .28)); will-change: transform; }
.party-stack img { pointer-events: none; }
.party-balloon { position: absolute; bottom: 42%; left: -3%; width: 22%; height: auto; opacity: 0; transform: translateY(40%); transition: opacity .5s ease, transform 1.4s cubic-bezier(.2, .8, .3, 1); }
.party-balloon + .party-balloon { right: -3%; left: auto; }
.party-balloon.is-up { opacity: 1; transform: none; animation: balloon-sway 3.600s ease-in-out infinite alternate; }
.party-balloon + .party-balloon.is-up { animation-delay: -1.8s; }
.party-slider {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.party-slider::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: var(--white); }
.party-slider::-moz-range-track { height: 12px; border-radius: 999px; background: var(--white); }
.party-slider::-webkit-slider-thumb {
  width: 36px;
  height: 36px;
  margin-top: -12px;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--red);
  appearance: none;
  -webkit-appearance: none;
}
.party-slider::-moz-range-thumb { box-sizing: border-box; width: 36px; height: 36px; border: 4px solid var(--white); border-radius: 50%; background: var(--red); }
.party-readout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 6px 0 0; color: var(--ink); font-weight: 700; }
.party-readout b { color: var(--white); font-family: var(--display); font-size: 40px; font-weight: 400; line-height: 1; }
.party-readout span { padding: 6px 12px; border-radius: 999px; background: var(--yellow); }
/* Panels too narrow for the longest row always stack these two, so the panel never changes height. */
@container (max-width: 286px) {
  .party-readout { flex-direction: column; align-items: flex-start; }
}

/* Visit */
.visit-inner { max-width: 1240px; margin-inline: auto; padding: clamp(80px, 9vw, 130px) var(--gutter) clamp(56px, 7vw, 90px); }
.visit h2 { margin-bottom: clamp(26px, 3.4vw, 44px); color: var(--on-sky); font-size: clamp(34px, 4.6vw, 70px); }
.visit-red { display: inline-block; padding: .17em .18em .03em; background: var(--red); color: var(--white); line-height: 1; clip-path: polygon(50% 0, 100% 13%, 100% 100%, 0 100%, 0 13%); }

/* One white panel: the details on the left and the map built into the right. */
.visit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 40px 70px -40px rgb(8 30 90 / .6);
}
.visit-info { padding: clamp(10px, 1.6vw, 18px) clamp(20px, 3vw, 38px) clamp(22px, 2.6vw, 32px); }
.visit-list { font-style: normal; }
.visit-row {
  display: grid;
  grid-template-columns: 22px 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.visit-icon { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.visit-label { color: rgb(35 21 17 / .68); font-size: 16px; }
.visit-value { min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.45; }
a.visit-row .visit-value { overflow-wrap: anywhere; }
a.visit-row:hover .visit-value { color: var(--red-deep); }
.hours-status { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-weight: 400; }
.hours-status[hidden] { display: none; }
.hours-status b { flex: none; }
.hours-status b::after { content: " ·"; }
.hours-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--red-deep); }
.hours-status[data-open="true"]::before { background: #0d8a43; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; font-weight: 400; }
.hours th { padding: 3px 12px 3px 0; font-weight: inherit; text-align: left; }
.hours td { padding-block: 3px; text-align: right; white-space: nowrap; }
.hours tr.today th, .hours tr.today td { font-weight: 700; }
.visit-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.visit-actions .btn:focus-visible, .catering-call:focus-visible { outline-color: var(--ink); }
.visit-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding-inline: 10px; font-size: 16px; }
.visit-access { margin: 16px 0 0; color: rgb(35 21 17 / .74); font-size: 14px; line-height: 1.45; }
.visit-still { margin-block: -12px; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
/* A small map drawn by hand in the colors of the Snazzy Maps style the user chose. script.js drags it. */
.map { position: relative; min-height: 460px; overflow: hidden; background: #f9f5ed; touch-action: pan-x pan-y; user-select: none; }
.map-link { position: absolute; inset: 0; color: var(--ink); }
.map-link:focus-visible { outline-offset: -6px; }
.map.is-dragging .map-link { cursor: grabbing; }
.map svg { position: absolute; top: 50%; left: 50%; width: 1000px; max-width: none; height: 800px; overflow: visible; transform: translate(-50%, -50%); }
.map text { fill: #746d67; font-size: 12px; paint-order: stroke; stroke: #f9f5ed; stroke-linejoin: round; stroke-width: 3px; text-anchor: middle; }
.map .map-main { fill: #5b5550; font-size: 13px; font-weight: 700; }
.map .map-place { fill: #5b5550; font-size: 11px; font-weight: 700; }
.map .map-store { fill: var(--white); font-family: var(--display); font-size: 15px; stroke: none; }

/* Footer */
.foot {
  --fade: clamp(150px, 17vw, 240px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 36px clamp(24px, 4vw, 64px);
  padding: calc(var(--fade) + clamp(24px, 3vw, 44px)) max(var(--gutter), calc((100% - 1240px) / 2)) clamp(20px, 2.2vw, 30px);
  background: linear-gradient(var(--sky), #1484ee 9%, #0b62c8 28%, #0a469e 50%, #08306f 72%, #05214f);
  color: var(--white);
  font-size: 16px;
  line-height: 1.5;
}
/* The page sinks from the sky into the deep sea, with bubbles and a few fish going by. */
.foot > :not(.foot-sea) { position: relative; }
.foot-sea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.foot-sea i { position: absolute; bottom: -30px; left: var(--x); width: var(--size); height: var(--size); border: 2px solid rgb(255 255 255 / .4); border-radius: 50%; opacity: 0; animation: sea-bubble var(--time) ease-in var(--wait) infinite; }
.foot-sea i:nth-child(1) { --x: 7%; --size: 14px; --time: 11s; --wait: 0s; }
.foot-sea i:nth-child(2) { --x: 22%; --size: 9px; --time: 14s; --wait: -5s; }
.foot-sea i:nth-child(3) { --x: 41%; --size: 18px; --time: 12s; --wait: -8s; }
.foot-sea i:nth-child(4) { --x: 58%; --size: 10px; --time: 15s; --wait: -2s; }
.foot-sea i:nth-child(5) { --x: 76%; --size: 15px; --time: 13s; --wait: -10s; }
.foot-sea i:nth-child(6) { --x: 92%; --size: 8px; --time: 10s; --wait: -4s; }
.foot-fish { position: absolute; top: 34%; left: 0; width: 44px; height: 30px; fill: rgb(255 255 255 / .18); animation: sea-left 44s linear -12s infinite; }
.foot-fish + .foot-fish { top: 22%; width: 30px; height: 20px; animation-duration: 58s; animation-delay: -40s; }
.foot-swimmer { position: absolute; top: 8%; left: 0; width: 96px; height: auto; animation: sea-right 40s linear -6s infinite; }
.foot p, .foot address { margin: 0; font-style: normal; }
.foot-line { max-width: 9em; font-family: var(--apple); font-size: clamp(28px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.foot .foot-label { margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase; }
.foot a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.foot a:hover { text-decoration: underline; }
.foot .foot-link { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.foot-out::after { content: " \2197"; content: " \2197" / ""; }
.foot-social { display: inline-block; }
.foot-social svg, .foot-credit svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.foot .foot-credit { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px); color: rgb(255 255 255 / .8); font-size: 14px; text-align: center; }
.foot-credit a { display: inline-flex; align-items: center; gap: 6px; margin-block: -12px; padding-block: 12px; }
.foot-credit svg { width: 20px; height: 20px; }

.callbar { display: none; }

@keyframes sea-bubble { 12% { opacity: 1; } 80% { opacity: .7; } to { opacity: 0; transform: translate(16px, -420px); } }
@keyframes sea-left { from { transform: translateX(105vw); } to { transform: translateX(-90px); } }
@keyframes sea-right { from { transform: translateX(-120px); } to { transform: translateX(105vw); } }
@keyframes rise { from { opacity: 0; transform: translateY(24%); } }
@keyframes pop { from { opacity: 0; scale: .8; } }
@keyframes wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(3deg); } }
@keyframes slide { to { transform: translateX(-25%); } }
@keyframes sizzle { from { transform: translate(-2px, 1px) rotate(-.7deg); } to { transform: translate(2px, -1px) rotate(.7deg); } }
@keyframes bubble { 70% { opacity: 1; } to { opacity: 0; transform: translateY(-70vh); } }
@keyframes lift { to { transform: translateY(-100%); } }
@keyframes pick-walk {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(44px); }
  50%, 70% { transform: translateY(88px); }
  75%, 95% { transform: translateY(132px); }
  100% { transform: translateY(0); }
}
@keyframes pick-tap { 0%, 50%, 100% { transform: none; } 25% { transform: translateX(-10px); } }
@keyframes call-hand {
  0%, 8%, 62%, 100% { transform: translateX(260px); }
  24% { transform: translateX(12px); }
  28% { transform: none; }
  34% { transform: translateX(12px); }
}
@keyframes call-press { 0%, 26%, 34%, 100% { transform: none; } 29% { transform: scale(.86); } }
@keyframes call-ripple { 0%, 28% { opacity: 0; transform: none; } 30% { opacity: .4; transform: none; } 62%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes call-waves {
  0%, 32%, 90%, 100% { opacity: 0; }
  38%, 50%, 62%, 74% { opacity: 1; }
  44%, 56%, 68%, 80% { opacity: .25; }
}
@keyframes call-shake {
  0%, 32%, 80%, 100% { transform: none; }
  36%, 44%, 52%, 60%, 68%, 76% { transform: rotate(-2.500deg); }
  40%, 48%, 56%, 64%, 72% { transform: rotate(2.500deg); }
}
@keyframes grab-rod {
  0% { transform: translate(300px, -30px); }
  12%, 58% { transform: none; }
  74%, 100% { transform: translate(440px, -90px); }
}
@keyframes grab-line {
  0%, 14% { transform: none; }
  30%, 40% { transform: translateY(56px); }
  58%, 100% { transform: translateY(-4px); }
}
@keyframes grab-reel {
  0%, 14% { transform: none; }
  30%, 40% { transform: rotate(300deg); }
  58%, 100% { transform: rotate(-420deg); }
}
@keyframes grab-box {
  0%, 40% { opacity: 1; transform: none; }
  58% { opacity: 1; transform: translateY(-60px); }
  74% { opacity: 1; transform: translate(440px, -150px); animation-timing-function: step-end; }
  75% { opacity: 0; transform: translateY(70px); }
  86% { opacity: 1; transform: none; }
  90% { transform: translateY(-12px); }
  94%, 100% { transform: none; }
}
@keyframes grab-swing {
  0%, 34%, 75%, 100% { transform: none; }
  37% { transform: translateY(2px) rotate(2deg); }
  48% { transform: rotate(-6deg); }
  58% { transform: rotate(5deg); }
  74% { transform: rotate(14deg); }
}
@keyframes balloon-sway { from { rotate: -4deg; translate: 0 2%; } to { rotate: 4deg; translate: 0 -3%; } }

/* Laptops: the headline gives way on short windows, so the order buttons stay on the first screen,
   and the lunch cards hug their food, so one whole card fits while the row is pinned. */
@media (min-width: 901px) {
  .hero-title {
    --foot: 160px;
    --wide: calc(min(100cqw, 1680px) - 2 * var(--gutter));
    --room: min(var(--wide), max((100vh - var(--foot) - min(12.6cqw, 216px)) * 2.667, var(--wide) * .62));
  }
  .lunch-head { max-width: none; }
  .lunch-head h2 { white-space: nowrap; }
  .tile { aspect-ratio: auto; gap: 22px; }
}

/* The order buttons wrap under the text here, so the headline leaves them more room. */
@media (min-width: 901px) and (max-width: 1135px) {
  .hero-title { --foot: 205px; }
}

@media (max-width: 900px) {
  .order, .visit-panel { grid-template-columns: 1fr; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-line { grid-column: 1 / -1; max-width: none; }
  .order-copy { position: static; }
  .menu-grid { grid-template-columns: 1fr; }
  .step, .step:nth-child(2), .step:nth-child(3) { position: static; }
  .top-side-right .top-link-wide, .top-side:first-child .top-link-wide:first-child { display: none; }
  .catering-inner { grid-template-columns: 1fr; text-align: center; }
  .catering-copy p:not(.catering-kicker), .catering-sides { margin-inline: auto; }
  .party { grid-area: auto; width: min(520px, 100%); margin-inline: auto; }
  .catering-call { grid-area: auto; justify-self: center; width: min(520px, 100%); margin-top: 24px; }
  .story-main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .story-photo { width: min(380px, 84%); }
  .facts { width: 100%; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 72px; scroll-padding-bottom: 72px; }
  body { font-size: 17px; }
  .top { padding-top: 8px; }
  .top-bar { min-height: 50px; padding: 4px 8px; border-radius: 16px; }
  .top-link-wide, .top-side .top-call { display: none; }

  .hero { --eave: 52px; --peak: 6px; --trim: 5px; }
  .hero-stage { padding-top: 66px; padding-bottom: 20px; }
  .hero-poster { padding-bottom: 58cqw; }
  .hero-foot .hero-actions { display: none; }
  .hero-lead { font-size: 17px; }
  .hero-title { --room: calc(100cqw - 2 * var(--gutter)); }
  .line-1 { font-size: calc(var(--room) / 5.45); }
  /* No drift here, because the food sits right above the text. */
  .hero-food { top: auto; right: auto; bottom: -3cqw; left: 0; width: 100%; transform: rotate(calc(4deg + var(--tilt, 0deg))); }
  .sticker-burst { top: auto; right: 0; bottom: 0; width: max(28.5%, 104px); font-size: max(13px, 2.9cqw); }

  .band svg { width: 28px; height: 19px; }
  .menu-head h2 { font-size: clamp(44px, 13.9vw, 54px); }
  .rain-shrimp { display: none; }
  .menu-mascot { top: 4px; right: 0; width: min(72px, 19vw); }
  .menu-jump-bar { top: 64px; }
  .menu-card { padding: 22px 20px 16px; }
  .menu-brush { margin-left: -.3em; }
  .menu-card-cast h3 { flex-direction: column; align-items: flex-start; }
  .menu-card.menu-card-cast .note, .menu-card.menu-card-cast ol, .menu-card.menu-card-cast ul { margin-right: 0; }
  .menu-cast, #chicken-combo .menu-cast { position: relative; right: auto; bottom: auto; width: 120px; margin: 10px auto 0; }
  .menu-cast img { width: 120px; }
  .facts { grid-template-columns: 1fr; gap: 10px; }
  .plate { width: 74vw; }
  .step { grid-template-columns: 1fr; min-height: 0; padding: 26px 0 18px 24px; }
  .step > div { padding-right: 24px; }
  .art-grab { margin-top: 26px; }
  .map { min-height: 320px; }
  .visit-row { grid-template-columns: 22px 72px minmax(0, 1fr); gap: 10px; }
  div.visit-value { grid-column: 1 / -1; }
  .visit-actions { grid-template-columns: 1fr 1fr; }
  .visit-actions .btn:first-child { grid-column: 1 / -1; }

  .callbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
    background: var(--ink);
  }
  .callbar .btn { padding: 11px 4px; font-size: 15px; }
  .callbar .btn:focus-visible { outline-color: var(--white); }
  .foot { grid-template-columns: 1fr; padding-bottom: 84px; }
  /* Full-size tap targets. The negative margins keep links inside text from spreading its lines. */
  main p a:not(.btn) { display: inline-block; margin-block: -10px; padding-block: 10px; }
  .foot p a, .foot .foot-link { display: inline-flex; align-items: center; min-height: 44px; }
  .foot .foot-link { margin-top: 0; }
  .foot-out::after { margin-left: .3em; }
  .foot-social { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; }
  .callbar .btn-doordash { gap: 4px; }
  .callbar .btn-logo { width: 1.3em; height: 1.3em; }
}

@media (max-width: 364px) {
  .top-bar { gap: 4px; padding-inline: 4px; }
  .top-side a { padding-inline: 6px; }
  .callbar .btn-logo { display: none; }
}

@media (min-width: 901px) and (max-width: 930px) {
  .top-side a, .top-delivery summary { padding-inline: 12px; }
}

/* Short screens, such as phones held sideways or 400% zoom, keep their room for reading. */
@media (max-height: 480px) {
  html { scroll-padding-top: 12px; }
  .top { position: relative; }
  .menu-jump-bar { position: static; }
  .menu-card { scroll-margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line, .hero-food, .sticker, .band-track, .party-balloon.is-up { animation: none; }
  .foot-sea i, .foot-fish { display: none; }
  .foot-swimmer { left: 8%; animation: none; }
  .party-balloon { transition: none; }
  .btn, .tile img, .menu-cast img { transition: none; }
  .step-art * { animation: none !important; }
  .grab-rod, .call-hand { transform: none; }
  .call-waves { opacity: 1; }
  .plates { overflow-x: auto; }
  .plates .band-set[aria-hidden] { display: none; }
}

/* The Stop animations button in the Find us section. */
.is-still .band-track, .is-still .sticker, .is-still .step-art *, .is-still .party-balloon, .is-still .foot-sea * { animation-play-state: paused !important; }
.is-still .plates { overflow-x: auto; }