/* =====================================================================
   MOON BAR — guest-menu page layout for the MenuCard component (Milestone 7C).
   Loaded after styles.css; keeps the hero artwork, plaque, category bar and wooden signs,
   only tightens spacing so the first cocktail appears sooner on phones and the
   page uses the width better on desktop. No new graphics.
   ===================================================================== */
.menu{max-width:1320px;padding:4px 14px 30px}
.mc-section{margin-top:28px;scroll-margin-top:66px}
.mc-section:first-child{margin-top:14px}
.mc-section .sign{transform:none;margin-bottom:18px}
.mc-section .soon{margin-top:0}
.mc-section--list .mc-list{margin-top:0}

/* category banner (approved C-series artwork) used as the heading for some list sections */
.mc-banner{position:relative;max-width:760px;margin:0 auto;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(233,190,110,.28),0 12px 26px rgba(0,0,0,.45)}
.mc-banner img{display:block;width:100%;height:auto;aspect-ratio:3/1}
.mc-sub{margin:10px auto 14px;text-align:center;font:400 13px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}

/* ---- phones: less vertical padding before the first product ---- */
@media (max-width:699px){
  .howto{margin-top:-10px;padding-bottom:0}
  .plaque{padding:9px 14px 10px}
  .plaque p{font-size:15px;line-height:1.3}
  .plaque .hl{font-size:17px}
  .plaque .small{margin-top:3px;font-size:12px}
  .catnav{margin-top:10px}
  .catnav-track{padding:7px 10px}
  .chip{padding:9px 13px;min-height:36px}
  .menu{padding:2px 12px 24px}
  .mc-section{margin-top:22px}
  .mc-section:first-child{margin-top:12px}
  .mc-section .sign{padding:8px 16px 7px;margin-bottom:12px}
  .mc-section .sign h2{font-size:clamp(25px,7.4vw,34px)}
  .mc-section .sign p{margin-top:4px;font-size:12px}
}