:root {
  --magenta: #dc0b61;
  --magenta-deep: #b8004d;
  --cyan: #25c5cc;
  --yellow: #ffc51c;
  --green: #93c83e;
  --pink: #f06d9f;
  --cream: #fffaf1;
  --white: #ffffff;
  --ink: #351226;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: "Nunito Sans", sans-serif; line-height: 1.5; }
body.menu-open { overflow: hidden; }
::selection { background: var(--yellow); color: var(--ink); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { border: 3px solid var(--cream); border-radius: 999px; background: var(--magenta); }
a { color: inherit; text-underline-offset: .3em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: .7rem 1rem; transform: translateY(-150%); background: var(--ink); color: #fff; font-weight: 900; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 50; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 64px); background: #fff; color: var(--magenta); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--magenta); font-family: "Fredoka", sans-serif; font-size: clamp(1.8rem, 2.5vw, 2.45rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; text-decoration: none; }
.brand-scoop { position: relative; width: 34px; height: 28px; border: 3px solid var(--magenta); border-radius: 5px 5px 12px 12px; background: var(--pink); }
.brand-scoop::before { content: ""; position: absolute; left: 7px; bottom: 18px; width: 15px; height: 27px; border: 3px solid var(--magenta); border-radius: 55% 45% 48% 52%; background: linear-gradient(135deg, var(--yellow) 0 33%, var(--cyan) 33% 66%, var(--pink) 66%); transform: rotate(8deg); }
.main-nav { display: flex; align-items: center; gap: clamp(1.35rem, 3vw, 3.2rem); font-weight: 800; }
.main-nav a { text-decoration: none; }
.main-nav a:not(.nav-cta) { position: relative; }
.main-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.42rem; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
.main-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; padding: .65rem 1.6rem; border-radius: 8px; background: var(--magenta); color: #fff; }
.nav-cta:focus-visible { outline-color: var(--ink); }
.menu-toggle { display: none; }

.showcase { --product-anchor-x: 49%; --product-anchor-y: 34%; --product-scale: 1.32; position: relative; min-height: calc(100vh - 68px); height: 710px; overflow: clip; background: var(--magenta); color: #fff; isolation: isolate; }
.showcase::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(125deg, rgba(255,255,255,.05), transparent 36%, rgba(112,0,44,.13)); }
.showcase::after { content: ""; position: absolute; z-index: -2; left: 50%; bottom: -32%; width: min(70vw, 920px); aspect-ratio: 1; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: inset 0 0 90px rgba(88,0,32,.12); }
.product-stage { position: absolute; z-index: 3; left: var(--product-anchor-x); top: var(--product-anchor-y); width: min(56vw, 800px); height: min(76%, 650px); transform: translate(-54%, 21%); display: grid; place-items: center; pointer-events: none; }
.product-stage::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 5%; width: 66%; height: 10%; transform: translateX(-50%); border-radius: 50%; background: rgba(83,0,30,.32); filter: blur(19px); }
#active-product { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: auto; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 22px 24px rgba(76,0,27,.22)); transform: translateZ(0) scale(var(--product-scale)); transform-origin: 50% 50%; transition: clip-path .55s var(--ease), filter .55s var(--ease); clip-path: inset(0 0 0 0 round 0); }
.product-stage.is-changing #active-product { clip-path: inset(0 50% 0 50% round 50%); filter: blur(9px) drop-shadow(0 5px 8px rgba(76,0,27,.08)); }
.topping-rain { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.is-magic .topping-rain { opacity: 1; }
.falling-topping { position: absolute; top: 1%; left: var(--x); width: var(--size); height: var(--size); object-fit: contain; opacity: 0; filter: drop-shadow(0 7px 5px rgba(73,0,28,.24)); }
.is-magic .falling-topping { animation-duration: 9s; animation-delay: var(--delay); animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
.is-magic .topping-chip, .is-magic .topping-chip-alt, .is-magic .topping-chip-3, .is-magic .topping-chip-4, .is-magic .topping-chip-5, .is-magic .topping-chip-6 { animation-name: chocolate-loop; }
.is-magic .topping-granola, .is-magic .topping-granola-2, .is-magic .topping-granola-3, .is-magic .topping-granola-4, .is-magic .topping-raisins, .is-magic .topping-raisins-alt { animation-name: harvest-loop; }
.is-magic .topping-gummy-bears, .is-magic .topping-gummy-bears-2, .is-magic .topping-gummy-bears-3 { animation-name: gummy-loop; }
.is-magic.is-in-view.is-page-visible .falling-topping { animation-play-state: running; }
.topping-chip { --x: 40%; --size: 54.6px; --delay: .1s; --entry-x: 24px; --land-y: 215px; --land-rotate: -14deg; --land-scale: .76; }
.topping-chip-alt { --x: 43%; --size: 49.4px; --delay: .18s; --entry-x: 15px; --land-y: 190px; --land-rotate: 18deg; --land-scale: .72; }
.topping-chip-3 { --x: 47%; --size: 52px; --delay: .26s; --entry-x: 6px; --land-y: 232px; --land-rotate: -8deg; --land-scale: .74; }
.topping-chip-4 { --x: 51%; --size: 46.8px; --delay: .34s; --entry-x: -5px; --land-y: 168px; --land-rotate: 13deg; --land-scale: .7; }
.topping-chip-5 { --x: 55%; --size: 53.3px; --delay: .42s; --entry-x: -15px; --land-y: 205px; --land-rotate: -18deg; --land-scale: .74; }
.topping-chip-6 { --x: 58%; --size: 48.1px; --delay: .5s; --entry-x: -25px; --land-y: 238px; --land-rotate: 10deg; --land-scale: .7; }
.topping-raisins { --x: 40%; --size: 70.2px; --delay: 3.12s; --entry-x: -20px; --land-y: 198px; --land-rotate: 12deg; --land-scale: .68; }
.topping-granola { --x: 52%; --size: 75.4px; --delay: 3.18s; --entry-x: 12px; --land-y: 178px; --land-rotate: -8deg; --land-scale: .72; }
.topping-granola-2 { --x: 45%; --size: 75.4px; --delay: 3.28s; --entry-x: -12px; --land-y: 210px; --land-rotate: 12deg; --land-scale: .68; }
.topping-granola-3 { --x: 57%; --size: 75.4px; --delay: 3.38s; --entry-x: 15px; --land-y: 205px; --land-rotate: -14deg; --land-scale: .68; }
.topping-granola-4 { --x: 38%; --size: 75.4px; --delay: 3.24s; --entry-x: 20px; --land-y: 215px; --land-rotate: -16deg; --land-scale: .66; }
.topping-raisins-alt { --x: 60%; --size: 62.4px; --delay: 3.46s; --entry-x: 22px; --land-y: 228px; --land-rotate: -18deg; --land-scale: .66; }
.topping-gummy-bears { --x: 34%; --size: 88.4px; --delay: 6s; --entry-x: 12px; --land-y: 185px; --land-rotate: -7deg; --land-scale: .72; }
.topping-gummy-bears-2 { --x: 44%; --size: 88.4px; --delay: 6.14s; --entry-x: 0px; --land-y: 165px; --land-rotate: 5deg; --land-scale: .72; }
.topping-gummy-bears-3 { --x: 54%; --size: 88.4px; --delay: 6.28s; --entry-x: -12px; --land-y: 190px; --land-rotate: 10deg; --land-scale: .72; }
.syrup-stream { position: absolute; z-index: 1; top: -18%; left: 50%; width: 234px; height: 79.3%; object-fit: contain; opacity: 0; transform: translateX(-50%) scaleY(.08); transform-origin: 50% 0; filter: drop-shadow(0 7px 5px rgba(73,0,28,.22)); }
.is-magic .syrup-stream { animation: syrup-loop 9s 0s var(--ease) infinite both; animation-play-state: paused; }
.is-magic.is-in-view.is-page-visible .syrup-stream { animation-play-state: running; }
@keyframes chocolate-loop {
  0%, 1.5% { opacity: 0; transform: translate(var(--entry-x), -82px) rotate(-28deg) scale(.58); }
  4% { opacity: 1; }
  11% { opacity: 1; transform: translate(0, var(--land-y)) rotate(calc(var(--land-rotate) + 3deg)) scale(.9); }
  15% { opacity: 1; transform: translate(0, var(--land-y)) rotate(var(--land-rotate)) scale(var(--land-scale)); }
  18%, 100% { opacity: 0; transform: translate(0, calc(var(--land-y) + 5px)) rotate(var(--land-rotate)) scale(.54); }
}
@keyframes harvest-loop {
  0%, 1% { opacity: 0; transform: translate(var(--entry-x), -90px) rotate(-42deg) scale(.58); }
  4% { opacity: 1; }
  11% { opacity: 1; transform: translate(3px, calc(var(--land-y) - 3px)) rotate(calc(var(--land-rotate) + 9deg)) scale(.88); }
  15% { opacity: 1; transform: translate(0, var(--land-y)) rotate(var(--land-rotate)) scale(var(--land-scale)); }
  18%, 100% { opacity: 0; transform: translate(0, calc(var(--land-y) + 5px)) rotate(var(--land-rotate)) scale(.52); }
}
@keyframes gummy-loop {
  0%, 1% { opacity: 0; transform: translate(var(--entry-x), -92px) rotate(-10deg) scale(.5); }
  4% { opacity: 1; }
  11% { opacity: 1; transform: translate(0, var(--land-y)) rotate(calc(var(--land-rotate) + 4deg)) scale(.9, .72); }
  15% { opacity: 1; transform: translate(0, var(--land-y)) rotate(var(--land-rotate)) scale(var(--land-scale)); }
  18%, 100% { opacity: 0; transform: translate(0, calc(var(--land-y) + 4px)) rotate(var(--land-rotate)) scale(.5); }
}
@keyframes syrup-loop {
  0%, 1% { opacity: 0; transform: translateX(-50%) scaleY(.06); }
  4% { opacity: 1; }
  8%, 14% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  18%, 100% { opacity: 0; transform: translateX(-50%) scaleY(1.03); }
}

.caption { position: absolute; z-index: 2; font-family: "Lilita One", sans-serif; font-size: clamp(3.2rem, 5.6vw, 5.4rem); line-height: .84; letter-spacing: -.02em; paint-order: stroke fill; -webkit-text-stroke: 11px #fff; filter: drop-shadow(0 7px 0 rgba(87,0,35,.15)); transition: transform .5s var(--ease), opacity .35s ease; }
.caption-a { top: 11%; left: 13%; color: var(--yellow); transform: rotate(-8deg); }
.caption-b { top: 12%; right: 8%; color: var(--cyan); transform: rotate(7deg); }
.caption-c { right: 10%; bottom: 18%; color: var(--green); transform: rotate(6deg); }
.showcase.is-changing .caption-a { transform: translateY(-22px) rotate(-12deg); opacity: .2; }
.showcase.is-changing .caption-b { transform: translateY(-16px) rotate(11deg); opacity: .2; }
.showcase.is-changing .caption-c { transform: translateY(18px) rotate(10deg); opacity: .2; }
.accent { position: absolute; z-index: 1; width: 52px; height: 11px; border-radius: 999px; background: var(--pink); }
.accent-a { top: 30%; left: 27%; transform: rotate(22deg); }
.accent-b { top: 21%; right: 27%; background: var(--yellow); transform: rotate(-28deg); }
.accent-c { right: 23%; bottom: 36%; background: var(--cyan); transform: rotate(18deg); }

.carousel-arrow { position: absolute; z-index: 8; top: 48%; width: 74px; height: 74px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--magenta); cursor: pointer; box-shadow: 0 15px 28px rgba(72,0,27,.18); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.carousel-arrow:hover { transform: scale(1.07); box-shadow: 0 20px 34px rgba(72,0,27,.26); }
.carousel-arrow svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.carousel-prev { left: clamp(24px, 4vw, 64px); }
.carousel-next { right: clamp(24px, 4vw, 64px); }
.hero-copy { position: absolute; z-index: 7; left: clamp(28px, 4vw, 68px); bottom: 28px; max-width: 430px; }
.hero-copy h1 { margin: 0 0 .65rem; font-family: "Lilita One", sans-serif; font-size: clamp(3.4rem, 4.8vw, 5rem); font-weight: 400; line-height: .86; letter-spacing: -.02em; }
.hero-copy p { max-width: 410px; margin: 0 0 1.1rem; font-size: clamp(1rem, 1.15vw, 1.15rem); font-weight: 700; line-height: 1.4; }
.hero-actions { display: flex; align-items: center; gap: .8rem; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.55rem; border: 0; border-radius: 8px; font-weight: 900; text-decoration: none; }
.button-menu { background: var(--yellow); color: var(--ink); box-shadow: 0 14px 25px rgba(91,0,32,.2); }
.button-menu:hover { background: #ffd64f; }
.button-whatsapp { border: 2px solid rgba(255,255,255,.68); background: rgba(255,255,255,.16); color: #fff; }
.button-whatsapp svg, .button-light svg { width: 23px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-whatsapp:hover { border-color: #fff; background: #fff; color: var(--ink); }
.carousel-status { position: absolute; z-index: 7; right: clamp(28px, 5vw, 78px); bottom: 38px; display: flex; align-items: center; gap: 2rem; }
.carousel-dots { display: flex; gap: .2rem; }
.carousel-dots button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel-dots button::before { content: ""; position: absolute; inset: 12px; border: 3px solid transparent; border-radius: 50%; background: rgba(255,255,255,.55); transition: transform .25s var(--ease), background .25s ease; }
.carousel-dots button:hover::before { transform: scale(1.2); background: #fff; }
.carousel-dots button.is-active::before { background: var(--yellow); border-color: #fff; }
.carousel-status p { display: flex; align-items: baseline; gap: .35rem; margin: 0; font-size: 1.3rem; font-weight: 900; }
.carousel-status strong { font-size: 2rem; font-variant-numeric: tabular-nums; }

.menu-section { padding: clamp(6rem, 9vw, 9rem) max(24px, calc((100vw - 1420px) / 2)); background: var(--cream); }
.menu-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 4rem; margin-bottom: 4.5rem; }
.menu-heading h2 { margin: 0; color: var(--magenta); font-family: "Lilita One", sans-serif; font-size: clamp(4rem, 7vw, 6rem); font-weight: 400; line-height: .82; letter-spacing: -.02em; }
.menu-heading p { max-width: 36rem; margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 700; }
.price-board { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 4.5rem; border-block: 2px solid var(--ink); }
.price-board > div { min-height: 165px; display: grid; align-content: center; gap: .2rem; padding: 1.8rem clamp(1rem, 2.5vw, 2.4rem); border-right: 2px solid var(--ink); }
.price-board > div:last-child { border-right: 0; }
.price-board strong { color: var(--magenta); font-family: "Lilita One", sans-serif; font-size: clamp(1.7rem, 2.5vw, 2.5rem); font-weight: 400; line-height: 1; }
.price-board span { font-size: .9rem; font-weight: 800; }
.price-board b { margin-top: .5rem; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-variant-numeric: tabular-nums; }
.price-board small { font-size: .65rem; letter-spacing: .08em; }
.price-board .price-extra { background: var(--yellow); }
.menu-list { border-top: 2px solid var(--ink); }
.menu-item { min-height: 410px; display: grid; grid-template-columns: minmax(340px, .9fr) 1.1fr; align-items: center; overflow: hidden; border-bottom: 2px solid var(--ink); }
.menu-product { height: 100%; min-height: 410px; display: grid; place-items: center; overflow: hidden; }
.menu-product img { width: min(94%, 570px); height: 380px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(54,18,38,.16)); transition: transform .55s var(--ease); }
.menu-item:hover .menu-product img { transform: translateY(-8px) rotate(1deg); }
.tone-yellow .menu-product { background: var(--yellow); }
.tone-cyan .menu-product { background: var(--cyan); }
.tone-green .menu-product { background: var(--green); }
.tone-pink .menu-product { background: var(--pink); }
.menu-copy { padding: 3rem clamp(2rem, 7vw, 7rem); }
.menu-copy > span { font-size: .78rem; font-weight: 900; letter-spacing: .09em; }
.menu-copy h3 { margin: .8rem 0 2.1rem; color: var(--magenta); font-family: "Lilita One", sans-serif; font-size: clamp(3rem, 5vw, 5.4rem); font-weight: 400; line-height: .86; letter-spacing: -.02em; }
.menu-copy button { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid currentColor; background: transparent; color: var(--ink); font-weight: 900; cursor: pointer; }
.menu-copy button svg { width: 24px; fill: none; stroke: var(--magenta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.menu-copy button:hover svg { transform: translateX(6px); }

.closing { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 24px; background: var(--cyan); text-align: center; }
.closing h2 { max-width: 1080px; margin: 0 0 2.2rem; color: var(--ink); font-family: "Lilita One", sans-serif; font-size: clamp(3.8rem, 7vw, 6rem); font-weight: 400; line-height: .88; letter-spacing: -.02em; }
.button-light { background: #fff; color: var(--magenta); box-shadow: 0 16px 28px rgba(0,93,99,.16); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 2rem; padding: 2rem max(24px, calc((100vw - 1420px) / 2)); background: var(--magenta); color: #fff; }
.site-footer p { margin: 0; }
.footer-brand { color: #fff; }
.site-footer nav { display: flex; gap: 1.4rem; }
.site-footer nav a { font-size: .85rem; font-weight: 900; text-decoration: none; }
.site-footer a:focus-visible { outline-color: #fff; }

@media (max-width: 1050px) {
  .caption { font-size: clamp(2.8rem, 6vw, 4.2rem); -webkit-text-stroke-width: 9px; }
  .caption-a { left: 9%; }.caption-b { right: 6%; }.caption-c { right: 7%; }
  .product-stage { width: 60vw; }
  .hero-copy { max-width: 370px; }
  .carousel-arrow { width: 62px; height: 62px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .site-header { height: 70px; padding-inline: 18px; }
  .brand { font-size: 2rem; }
  .brand-scoop { display: none; }
  .menu-toggle { position: relative; z-index: 61; min-height: 44px; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 2px solid var(--magenta); border-radius: 999px; background: #fff; color: var(--magenta); font-weight: 900; }
  .menu-toggle > span:first-child { width: 17px; height: 10px; border-block: 2px solid currentColor; }
  .main-nav { position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2rem; padding: 22vw 9vw; background: var(--yellow); color: var(--magenta); transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: transform .55s var(--ease), visibility 0s .55s; }
  .main-nav a { font-family: "Lilita One", sans-serif; font-size: clamp(3rem, 12vw, 5.5rem); line-height: .9; }
  .main-nav .nav-cta { margin-top: 1rem; color: #fff; font-family: "Nunito Sans", sans-serif; font-size: 1rem; }
  .menu-open .main-nav { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .55s var(--ease); }
  .showcase { --product-anchor-x: 47.5%; --product-anchor-y: 10%; --product-scale: 1.29; min-height: 700px; height: calc(100svh - 70px); }
  .caption { font-size: clamp(2.1rem, 8vw, 3rem); -webkit-text-stroke-width: 7px; }
  .caption-a { top: 3%; left: 4%; }
  .caption-b { top: 12%; right: 1.5%; }
  .caption-c { top: 38%; right: 2%; bottom: auto; }
  .product-stage { width: min(72vw, 510px); height: 34%; }
  .syrup-stream { width: 166.4px; height: 72.8%; top: -20%; }
  .topping-chip { --size: 32.5px; --land-y: 86px; }
  .topping-chip-alt { --size: 29.9px; --land-y: 68px; }
  .topping-chip-3 { --size: 31.2px; --land-y: 99px; }
  .topping-chip-4 { --size: 28.6px; --land-y: 52px; }
  .topping-chip-5 { --size: 32.5px; --land-y: 80px; }
  .topping-chip-6 { --size: 29.9px; --land-y: 105px; }
  .topping-raisins { --size: 46.8px; --land-y: 78px; }
  .topping-granola { --size: 49.4px; --land-y: 64px; }
  .topping-granola-2 { --size: 49.4px; --land-y: 84px; }
  .topping-granola-3 { --size: 49.4px; --land-y: 91px; }
  .topping-granola-4 { --size: 49.4px; --land-y: 88px; }
  .topping-raisins-alt { --size: 41.6px; --land-y: 98px; }
  .topping-gummy-bears { --x: 32%; --size: 59.8px; --land-y: 62px; }
  .topping-gummy-bears-2 { --x: 44%; --size: 59.8px; --land-y: 44px; }
  .topping-gummy-bears-3 { --x: 56%; --size: 59.8px; --land-y: 65px; }
  .carousel-arrow { top: 23%; width: 54px; height: 54px; }
  .carousel-prev { left: 16px; }.carousel-next { right: 16px; }
  .hero-copy { top: 54%; right: 20px; bottom: auto; left: 20px; max-width: none; }
  .hero-copy h1 { max-width: 8ch; font-size: clamp(3.4rem, 13vw, 4.8rem); line-height: .88; }
  .hero-copy p { max-width: 36rem; font-size: 1rem; line-height: 1.35; }
  .carousel-status { right: 20px; bottom: 25px; }
  .carousel-dots { gap: 0; }
  .price-board { grid-template-columns: repeat(2, 1fr); }
  .price-board > div:nth-child(2) { border-right: 0; }
  .price-board > div:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .menu-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .menu-item { grid-template-columns: 1fr; }
  .menu-item:nth-child(even) .menu-product { order: 0; }
  .menu-product { min-height: 360px; }
  .menu-copy { padding-block: 3rem; }
}

@media (max-width: 560px) {
  .showcase { --product-anchor-x: 47%; --product-anchor-y: 6%; --product-scale: 1.26; min-height: 800px; height: calc(100svh - 70px); }
  .caption { font-size: clamp(2rem, 8.4vw, 2.65rem); -webkit-text-stroke-width: 6px; }
  .caption-a { top: 3%; left: 3%; }
  .caption-b { top: 12%; right: 1%; }
  .caption-c { top: 38%; right: 1%; }
  .product-stage { width: 78vw; height: 33%; }
  .carousel-arrow { top: 19%; }
  .hero-copy { top: 49%; bottom: auto; }
  .hero-copy h1 { font-size: clamp(3.25rem, 14.5vw, 4rem); line-height: .9; }
  .hero-copy p { max-width: 330px; }
  .hero-actions { align-items: stretch; flex-direction: column; width: min(100%, 330px); }
  .button { width: 100%; }
  .carousel-status { bottom: 25px; left: 20px; right: auto; }
  .menu-section { padding-inline: 16px; }
  .menu-heading h2 { font-size: 4.3rem; }
  .price-board { grid-template-columns: 1fr; }
  .price-board > div { min-height: 130px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .price-board > div:last-child { border-bottom: 0; }
  .menu-product { min-height: 300px; }
  .menu-product img { height: 300px; }
  .menu-copy { padding: 2.3rem 1.2rem 3rem; }
  .menu-copy h3 { font-size: 3.8rem; }
  .closing h2 { font-size: 3.9rem; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .is-magic .topping-rain { opacity: 0; }
  .is-magic .falling-topping, .is-magic .syrup-stream { animation: none !important; opacity: 0; }
}