:root {
  --ink:#41231f;
  --red:#d51d2d;
  --cream:#fffaf4;
  --line:#efc8bd;
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-width:320px;
  color:var(--ink);
  background:radial-gradient(circle at top right,#fff1e8,transparent 34rem),var(--cream);
  font-family:"DM Sans",sans-serif;
}

.menu-shell {
  width:min(680px,calc(100% - 32px));
  margin:0 auto;
  padding:26px 0 32px;
}

.hero {
  text-align:center;
  padding:0 20px 18px;
}

.logo {
  display:block;
  width:min(195px,50vw);
  margin:0 auto;
  mix-blend-mode:multiply;
  animation:logo-in .8s cubic-bezier(.22,1,.36,1) both;
}

.eyebrow {
  margin:0 0 10px;
  color:var(--red);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section-intro {
  max-width:500px;
  margin:10px 0 0;
  color:#6d534d;
  font-size:1.02rem;
  line-height:1.55;
}

.section-image {
  display:block;
  width:100%;
  height:310px;
  border:1px solid #f0d8cf;
  border-radius:12px;
  background:#f3e8df;
  object-fit:contain;
  object-position:center;
  margin-bottom:29px;
  box-shadow:0 18px 42px rgba(65,35,31,.08);
  animation:photo-in .9s .12s ease-out both;
}

.section-heading {
  border-bottom:2px solid var(--ink);
  margin-bottom:4px;
  padding-bottom:15px;
}

h1 {
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(2.35rem,8vw,3.25rem);
  animation:title-in .7s .2s ease-out both;
}

.menu-items { border-top:1px solid var(--line); }

.menu-item {
  position:relative;
  border-bottom:1px solid var(--line);
  padding:26px 4px;
  animation:item-in .65s both;
  transition:padding-left .25s ease, background-color .25s ease;
}

.menu-item::after {
  position:absolute;
  right:4px;
  bottom:-1px;
  width:0;
  height:2px;
  background:var(--red);
  content:"";
  transition:width .35s ease;
}

.menu-item:hover {
  padding-left:10px;
  background:rgba(255,240,240,.35);
}

.menu-item:hover::after { width:54px; }
.menu-item:nth-child(2) { animation-delay:.08s; }
.menu-item:nth-child(3) { animation-delay:.16s; }
.menu-item:nth-child(4) { animation-delay:.24s; }
.menu-item:nth-child(5) { animation-delay:.32s; }
.menu-item:nth-child(6) { animation-delay:.4s; }

.item-name {
  margin:0 0 8px;
  font-size:1.15rem;
  font-weight:700;
  transition:color .25s ease;
}

.menu-item:hover .item-name { color:var(--red); }

.item-description {
  margin:0;
  color:#715f58;
  line-height:1.55;
  white-space:pre-line;
}

.item-price {
  margin:14px 0 0;
  color:#8e5f58;
  font-family:"DM Sans",sans-serif;
  font-size:.8rem;
  font-weight:400;
  line-height:1.6;
  white-space:pre-line;
  transition:transform .25s ease;
}

.menu-item:hover .item-price { transform:translateX(4px); }

.instagram {
  display:block;
  color:var(--red);
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.instagram:hover {
  color:var(--ink);
  transform:translateY(-2px);
}

footer {
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:22px;
  color:#80554f;
  font-size:.87rem;
  text-align:center;
}

@keyframes logo-in {
  from { opacity:0; transform:translateY(-10px) scale(.97); }
  to { opacity:1; transform:none; }
}

@keyframes photo-in {
  from { opacity:0; transform:scale(1.025); }
  to { opacity:1; transform:scale(1); }
}

@keyframes title-in {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}

@keyframes item-in {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (max-width:420px) {
  .menu-shell { padding-top:18px; }
  .section-image { height:240px; }
  .menu-item { padding:22px 0; }
}