:root {
  --bg: #F2EBDA;
  --card: #FBF8EF;
  --ink: #18150f;
  --ink-muted: #6b6455;
  --line: #18150f;
  --whatsapp: #25D366;
  --whatsapp-dark: #128C4A;
  --ifood: #EA1D2C;
  --ifood-dark: #B3121E;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* subtle paper grain, ties into the hand-drawn feel of the logo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}

header, footer, .order-bar {
  position: relative;
  z-index: 2;
}

/* ---------- Falling cookies ---------- */

.cookie-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cookie-rain__item {
  position: absolute;
  top: -10%;
  color: var(--ink);
  animation-name: cookie-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cookie-rain__item svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes cookie-fall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(115vh) translateX(var(--drift, 0px)) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-rain { display: none; }
  .item__photo { animation: none; }
}

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

/* ---------- Hero ---------- */

.hero {
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 40px 24px 26px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  translate: -50% 0;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(24,21,15,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero__logo {
  width: 100%;
  max-width: 280px;
  position: relative;
}

/* ---------- Marquee ---------- */

.marquee {
  width: 100%;
  overflow: hidden;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 2;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 14px 0;
}

.marquee__group span {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0 18px;
}

.marquee__dot {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  padding: 0 !important;
  opacity: 0.5;
}

@keyframes marquee-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Menu ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.menu {
  padding-top: 32px;
}

.menu__title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 4;
  background: var(--bg);
}

.menu__subtitle {
  text-align: center;
  color: var(--ink-muted);
  margin: 6px 0 32px;
  font-size: 0.95rem;
  position: relative;
  z-index: 4;
  background: var(--bg);
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px 14px;
}

/* ---------- Item card: arched "stained glass" shape ---------- */

.item {
  flex: 1 1 calc(50% - 7px);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 50% 50% 14px 14px / 42px 42px 14px 14px;
  padding: 30px 12px 16px;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s ease;
}

.item:active {
  transform: scale(0.98);
}

.item__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.item__photo {
  width: 88%;
  aspect-ratio: 1 / 1;
  position: relative;
  margin: 0 auto;
  animation: cookie-pulse 2.4s ease-in-out infinite;
}

.item:nth-child(2) .item__photo { animation-delay: 0.2s; }
.item:nth-child(3) .item__photo { animation-delay: 0.4s; }
.item:nth-child(4) .item__photo { animation-delay: 0.6s; }

@keyframes cookie-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.item__photo::before {
  /* offset silhouette, gives the sticker/layered look */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent, var(--ink));
  opacity: 0.9;
  transform: translate(5px, 7px);
  clip-path: inherit;
  z-index: 1;
}

.item__photo::after {
  /* thin black rim around the cutout, ties to the logo's bold linework */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: inherit;
  transform: scale(1.045);
  z-index: 2;
}

.item__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 3;
}

.shape-scallop, .shape-scallop::before {
  clip-path: polygon(98.50% 50.00%, 99.90% 52.62%, 100.41% 55.30%, 99.66% 57.87%, 97.89% 60.18%, 95.78% 62.27%, 94.14% 64.34%, 93.40% 66.66%, 93.49% 69.36%, 93.82% 72.33%, 93.65% 75.20%, 92.48% 77.59%, 90.28% 79.27%, 87.51% 80.38%, 84.83% 81.36%, 82.74% 82.74%, 81.36% 84.83%, 80.38% 87.51%, 79.27% 90.28%, 77.59% 92.48%, 75.20% 93.65%, 72.33% 93.82%, 69.36% 93.49%, 66.66% 93.40%, 64.34% 94.14%, 62.27% 95.78%, 60.18% 97.89%, 57.87% 99.66%, 55.30% 100.41%, 52.62% 99.90%, 50.00% 98.50%, 47.54% 96.96%, 45.16% 96.06%, 42.69% 96.14%, 40.01% 96.99%, 37.16% 97.91%, 34.37% 98.12%, 31.90% 97.15%, 29.91% 95.12%, 28.29% 92.61%, 26.70% 90.35%, 24.76% 88.87%, 22.25% 88.19%, 19.33% 87.87%, 16.45% 87.26%, 14.15% 85.85%, 12.74% 83.55%, 12.13% 80.67%, 11.81% 77.75%, 11.13% 75.24%, 9.65% 73.30%, 7.39% 71.71%, 4.88% 70.09%, 2.85% 68.10%, 1.88% 65.63%, 2.09% 62.84%, 3.01% 59.99%, 3.86% 57.31%, 3.94% 54.84%, 3.04% 52.46%, 1.50% 50.00%, 0.10% 47.38%, -0.41% 44.70%, 0.34% 42.13%, 2.11% 39.82%, 4.22% 37.73%, 5.86% 35.66%, 6.60% 33.34%, 6.51% 30.64%, 6.18% 27.67%, 6.35% 24.80%, 7.52% 22.41%, 9.72% 20.73%, 12.49% 19.62%, 15.17% 18.64%, 17.26% 17.26%, 18.64% 15.17%, 19.62% 12.49%, 20.73% 9.72%, 22.41% 7.52%, 24.80% 6.35%, 27.67% 6.18%, 30.64% 6.51%, 33.34% 6.60%, 35.66% 5.86%, 37.73% 4.22%, 39.82% 2.11%, 42.13% 0.34%, 44.70% -0.41%, 47.38% 0.10%, 50.00% 1.50%, 52.46% 3.04%, 54.84% 3.94%, 57.31% 3.86%, 59.99% 3.01%, 62.84% 2.09%, 65.63% 1.88%, 68.10% 2.85%, 70.09% 4.88%, 71.71% 7.39%, 73.30% 9.65%, 75.24% 11.13%, 77.75% 11.81%, 80.67% 12.13%, 83.55% 12.74%, 85.85% 14.15%, 87.26% 16.45%, 87.87% 19.33%, 88.19% 22.25%, 88.87% 24.76%, 90.35% 26.70%, 92.61% 28.29%, 95.12% 29.91%, 97.15% 31.90%, 98.12% 34.37%, 97.91% 37.16%, 96.99% 40.01%, 96.14% 42.69%, 96.06% 45.16%, 96.96% 47.54%);
}

.shape-star, .shape-star::before {
  clip-path: polygon(50.00% 0.00%, 60.05% 9.22%, 73.24% 5.73%, 77.85% 18.56%, 91.15% 21.60%, 89.27% 35.11%, 99.64% 43.97%, 91.69% 55.06%, 96.75% 67.73%, 84.57% 73.86%, 83.16% 87.43%, 69.52% 87.19%, 61.97% 98.55%, 50.00% 92.00%, 38.03% 98.55%, 30.48% 87.19%, 16.84% 87.43%, 15.43% 73.86%, 3.25% 67.73%, 8.31% 55.06%, 0.36% 43.97%, 10.73% 35.11%, 8.85% 21.60%, 22.15% 18.56%, 26.76% 5.73%, 39.95% 9.22%);
}

.shape-blob1, .shape-blob1::before {
  clip-path: polygon(99.51% 50.00%, 99.82% 52.24%, 99.94% 54.49%, 99.88% 56.76%, 99.62% 59.00%, 99.18% 61.22%, 98.57% 63.40%, 97.79% 65.53%, 96.87% 67.59%, 95.83% 69.59%, 94.68% 71.52%, 93.44% 73.38%, 92.13% 75.17%, 90.77% 76.91%, 89.36% 78.60%, 87.92% 80.24%, 86.45% 81.84%, 84.94% 83.41%, 83.41% 84.94%, 81.84% 86.44%, 80.22% 87.90%, 78.56% 89.31%, 76.84% 90.66%, 75.05% 91.93%, 73.20% 93.12%, 71.28% 94.20%, 69.30% 95.15%, 67.25% 95.96%, 65.15% 96.62%, 63.00% 97.11%, 60.82% 97.43%, 58.63% 97.57%, 56.44% 97.54%, 54.26% 97.35%, 52.11% 97.00%, 50.00% 96.51%, 47.94% 95.91%, 45.93% 95.21%, 43.98% 94.43%, 42.09% 93.60%, 40.24% 92.74%, 38.45% 91.86%, 36.68% 90.98%, 34.94% 90.12%, 33.22% 89.26%, 31.50% 88.42%, 29.77% 87.59%, 28.04% 86.76%, 26.29% 85.92%, 24.53% 85.06%, 22.77% 84.15%, 21.00% 83.19%, 19.26% 82.16%, 17.54% 81.04%, 15.86% 79.82%, 14.26% 78.50%, 12.73% 77.08%, 11.30% 75.55%, 9.98% 73.91%, 8.78% 72.18%, 7.71% 70.36%, 6.78% 68.47%, 5.98% 66.52%, 5.30% 64.52%, 4.74% 62.49%, 4.29% 60.43%, 3.93% 58.36%, 3.65% 56.28%, 3.44% 54.19%, 3.28% 52.10%, 3.17% 50.00%, 3.09% 47.89%, 3.05% 45.77%, 3.04% 43.64%, 3.07% 41.48%, 3.15% 39.31%, 3.29% 37.11%, 3.50% 34.89%, 3.81% 32.67%, 4.23% 30.44%, 4.78% 28.22%, 5.47% 26.04%, 6.31% 23.90%, 7.31% 21.82%, 8.48% 19.83%, 9.81% 17.95%, 11.30% 16.19%, 12.93% 14.56%, 14.71% 13.08%, 16.59% 11.76%, 18.58% 10.60%, 20.64% 9.59%, 22.76% 8.73%, 24.91% 8.01%, 27.08% 7.41%, 29.26% 6.92%, 31.42% 6.52%, 33.56% 6.20%, 35.68% 5.93%, 37.77% 5.70%, 39.84% 5.50%, 41.89% 5.32%, 43.93% 5.17%, 45.95% 5.03%, 47.98% 4.92%, 50.00% 4.85%, 52.03% 4.82%, 54.06% 4.86%, 56.10% 4.97%, 58.13% 5.18%, 60.16% 5.49%, 62.17% 5.92%, 64.14% 6.47%, 66.08% 7.16%, 67.96% 7.98%, 69.78% 8.93%, 71.52% 10.01%, 73.19% 11.19%, 74.77% 12.48%, 76.27% 13.84%, 77.69% 15.28%, 79.04% 16.76%, 80.33% 18.28%, 81.57% 19.82%, 82.77% 21.37%, 83.94% 22.93%, 85.11% 24.49%, 86.27% 26.06%, 87.45% 27.63%, 88.63% 29.21%, 89.83% 30.82%, 91.03% 32.46%, 92.23% 34.15%, 93.41% 35.90%, 94.55% 37.70%, 95.65% 39.58%, 96.66% 41.53%, 97.58% 43.56%, 98.37% 45.65%, 99.02% 47.80%);
}

.shape-blob2, .shape-blob2::before {
  clip-path: polygon(99.06% 50.00%, 99.20% 52.21%, 99.12% 54.42%, 98.84% 56.62%, 98.39% 58.78%, 97.83% 60.92%, 97.18% 63.02%, 96.48% 65.10%, 95.76% 67.18%, 95.03% 69.24%, 94.27% 71.32%, 93.48% 73.40%, 92.63% 75.47%, 91.69% 77.52%, 90.63% 79.52%, 89.41% 81.43%, 88.03% 83.22%, 86.45% 84.85%, 84.69% 86.29%, 82.77% 87.50%, 80.69% 88.49%, 78.51% 89.24%, 76.26% 89.78%, 73.98% 90.14%, 71.72% 90.36%, 69.50% 90.48%, 67.34% 90.58%, 65.27% 90.68%, 63.27% 90.85%, 61.34% 91.10%, 59.46% 91.45%, 57.61% 91.91%, 55.75% 92.45%, 53.87% 93.04%, 51.96% 93.64%, 50.00% 94.19%, 47.99% 94.66%, 45.95% 95.00%, 43.88% 95.18%, 41.80% 95.16%, 39.74% 94.96%, 37.70% 94.57%, 35.70% 94.02%, 33.74% 93.33%, 31.81% 92.55%, 29.92% 91.71%, 28.03% 90.83%, 26.13% 89.95%, 24.20% 89.08%, 22.24% 88.21%, 20.23% 87.33%, 18.18% 86.42%, 16.11% 85.45%, 14.05% 84.38%, 12.03% 83.17%, 10.11% 81.81%, 8.34% 80.27%, 6.76% 78.54%, 5.42% 76.63%, 4.35% 74.57%, 3.55% 72.37%, 3.04% 70.07%, 2.79% 67.72%, 2.77% 65.35%, 2.93% 62.99%, 3.23% 60.67%, 3.61% 58.42%, 4.02% 56.23%, 4.41% 54.10%, 4.76% 52.03%, 5.06% 50.00%, 5.30% 47.99%, 5.50% 45.99%, 5.69% 44.00%, 5.90% 42.00%, 6.18% 40.00%, 6.57% 38.01%, 7.09% 36.06%, 7.76% 34.15%, 8.59% 32.30%, 9.58% 30.53%, 10.70% 28.85%, 11.94% 27.26%, 13.24% 25.74%, 14.58% 24.27%, 15.92% 22.82%, 17.24% 21.38%, 18.51% 19.89%, 19.73% 18.34%, 20.92% 16.71%, 22.08% 14.99%, 23.26% 13.19%, 24.47% 11.33%, 25.77% 9.44%, 27.17% 7.58%, 28.71% 5.79%, 30.40% 4.14%, 32.24% 2.68%, 34.22% 1.45%, 36.34% 0.49%, 38.54% -0.19%, 40.82% -0.58%, 43.13% -0.70%, 45.45% -0.58%, 47.74% -0.27%, 50.00% 0.19%, 52.21% 0.76%, 54.38% 1.38%, 56.50% 2.03%, 58.59% 2.67%, 60.66% 3.32%, 62.71% 3.96%, 64.75% 4.62%, 66.77% 5.33%, 68.76% 6.11%, 70.70% 7.02%, 72.57% 8.06%, 74.34% 9.26%, 75.99% 10.63%, 77.49% 12.16%, 78.84% 13.84%, 80.02% 15.63%, 81.07% 17.51%, 81.99% 19.42%, 82.82% 21.33%, 83.61% 23.20%, 84.39% 25.01%, 85.21% 26.76%, 86.12% 28.42%, 87.12% 30.02%, 88.24% 31.58%, 89.47% 33.13%, 90.79% 34.69%, 92.17% 36.30%, 93.55% 37.98%, 94.88% 39.76%, 96.10% 41.63%, 97.17% 43.61%, 98.03% 45.68%, 98.67% 47.81%);
}

.item__price {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: auto;
  align-self: center;
}

.item__desc {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.item__weight {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: -2px 0 6px;
}

@media (min-width: 480px) {
  .item__name { font-size: 1.4rem; }
  .item__price { font-size: 0.9rem; }
}

@media (min-width: 640px) {
  .item { flex: 1 1 calc(25% - 10.5px); }
}

.menu__note {
  text-align: center;
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.75rem;
  margin: 20px 0 0;
  position: relative;
  z-index: 4;
}

/* spacer so content isn't hidden behind the fixed order bar */
.spacer {
  height: 96px;
}

/* ---------- Order bar ---------- */

.order-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, rgba(242,235,218,0));
  backdrop-filter: blur(6px);
  z-index: 10;
}

.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  border: 2px solid var(--line);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn--whatsapp {
  background: var(--whatsapp);
  box-shadow: 0 4px 18px rgba(37,211,102,0.35);
}
.btn--whatsapp:hover {
  background: var(--whatsapp-dark);
}

.btn--ifood {
  background: var(--ifood);
  box-shadow: 0 4px 18px rgba(234,29,44,0.35);
}
.btn--ifood:hover {
  background: var(--ifood-dark);
}

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  padding: 24px 20px 12px;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

/* ---------- Larger screens ---------- */

@media (min-width: 560px) {
  .btn {
    font-size: 1rem;
  }
  .order-bar {
    max-width: 640px;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding-bottom: 16px;
  }
}