/* menu.css — the cream page. Overrides the dark shell in site.css. */

html{background:#F3EBDD}
body{background:#F3EBDD;color:#2a2118}
a{color:#a06a1e}a:hover{color:#B0308A}
/* Multiply over cream, not overlay over black — the dark grain is invisible here. */
.grain{opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.wrap{max-width:1080px;position:relative;z-index:2}

.mhead{position:relative;text-align:center;padding:70px 30px 40px;overflow:hidden}
.hlogo{height:96px;width:auto;display:block;margin:0 auto 22px}
.meye{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:5px;color:#a06a1e;text-transform:uppercase}
.big{font-family:'Playfair Display',serif;font-weight:800;font-style:italic;font-size:clamp(72px,16.9vw,189px);line-height:.86;letter-spacing:-2px;margin:6px 0 0;color:transparent;-webkit-text-stroke:2.5px #C6902A;text-stroke:2.5px #C6902A;transform:skewX(-6deg)}
.msub{font-family:'Playfair Display',serif;font-style:italic;font-size:21.5px;color:#6a5c47;margin:22px auto 0;max-width:40ch;line-height:1.6}
.rule{height:2px;background:repeating-linear-gradient(90deg,#c6902a 0 14px,transparent 14px 24px);opacity:.5;margin:0 auto;max-width:1020px}
.sec{position:relative;z-index:2;padding:60px 0}
.shead{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.slab{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,4.5vw,52px);letter-spacing:1px;line-height:1;color:#241a10}
.snote{font-size:16px;color:#6a5c47;font-style:italic;margin:0 0 26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 56px}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid rgba(90,70,40,.16)}
.iname{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:23.5px;color:#241a10;flex:none}
.idesc{font-size:15px;line-height:1.5;color:#6a5c47;text-align:right;max-width:26ch}
.iprice{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1px;color:#a06a1e;white-space:nowrap}
.priceband{position:relative;z-index:2;background:#E0912F;color:#231a06;text-align:center;padding:13px 26px;border-radius:12px;margin:8px auto 0;max-width:620px}
.priceband .pb1{font-family:'Bebas Neue',sans-serif;font-size:clamp(19px,2.5vw,27px);letter-spacing:1.5px}
.priceband .pb2{font-size:13.5px;letter-spacing:.5px;margin-top:3px;color:#5a4a10}
.slush{position:relative;z-index:2;background:linear-gradient(120deg,#E0912F,#dba85a);color:#2a1405;border-radius:16px;padding:44px 40px;overflow:hidden}
.slush .slab{color:#fff}
.slush .item{border-color:rgba(255,255,255,.28)}
.slush .iname{color:#fff}
.slush .idesc{color:rgba(255,255,255,.85)}
.slush .iprice{color:#fff}
.foodwrap{background:#eaddc6;border:1px solid rgba(160,106,30,.25);border-radius:16px;padding:40px}
/* Centered in the band between the snacks panel and the footer:
   the last .sec adds 60px below the panel, so 20px top here + that 60px
   = 80px above the link, matched by 80px below. */
.mfoot{position:relative;z-index:2;text-align:center;padding:20px 30px 80px}
.mpun{font-family:'Playfair Display',serif;font-style:italic;font-size:22.5px;color:#a06a1e}
.backlink{display:inline-flex;align-items:center;gap:9px;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1.5px;color:#a06a1e;text-decoration:none}

/* Snacks | Slushies — moved off an inline style so it can collapse. Two panels
   on desktop/tablet, stacked on phones (was clipping the Slushies off-screen). */
.foodgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}

@media(max-width:760px){
  .grid2{grid-template-columns:1fr;gap:0}
  .foodgrid{grid-template-columns:1fr;gap:26px}
}

/* Phone tuning (≤600) — keep the name-left / desc-right leader layout, just ease
   the cramping: smaller name/desc, tighter rows, less header + panel padding. */
@media(max-width:600px){
  .mhead{padding:44px 24px 12px}
  .hlogo{height:74px;margin-bottom:14px}
  .sec{padding:44px 0}
  /* A small, tidy gap between the header logo and the first section. */
  .mhead+.sec{padding-top:18px}
  .item{gap:14px;padding:13px 0}
  .iname{font-size:20px}
  .idesc{font-size:14px;max-width:22ch}
  .foodwrap{padding:28px 24px}
  .slush{padding:30px 26px}
  /* An even, roomier space around the "reserve a table" backlink (last section's
     bottom padding above it + .mfoot's own padding above and below). */
  .sec:last-of-type{padding-bottom:28px}
  .mfoot{padding:26px 24px 56px}
}