/* Mobile layout, hamburger menu. Loaded last so it takes priority over the earlier stylesheets. */
.menu-toggle{display:none}

@media(max-width:820px){
  /* Header: symbol on the left, menu button on the right */
  .site-header{display:flex;align-items:stretch;justify-content:space-between;min-height:60px;height:60px}
  .site-header .wordmark{width:72px;min-height:60px;border-right:1px solid var(--orange)}
  .site-header .wordmark img,.site-header .wordmark::after{width:44px;height:40px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:72px;height:60px;padding:0;border:0;border-left:1px solid var(--orange);background:none;color:var(--burgundy);cursor:pointer}
  .menu-toggle span{display:block;width:26px;height:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Menu panel drops down under the header */
  .header-right{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--orange);box-shadow:0 18px 30px #30110d22;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  .menu-open .header-right{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .2s ease}
  .site-header nav{display:flex!important;flex-direction:column;flex-wrap:nowrap;min-height:0;height:auto;border:0}
  .site-header nav a,.site-header nav a:nth-child(3),.site-header nav a:not(:last-child){display:block!important;flex:none;padding:18px 24px!important;border:0;border-top:1px solid var(--orange);font-family:'Space Grotesk',sans-serif!important;font-size:22px!important;font-weight:500!important;letter-spacing:-.02em!important;text-transform:uppercase;text-align:left;white-space:normal;line-height:1.2}
  .site-header nav a:first-child{border-top:0}
  html{scroll-padding-top:60px}

  /* Hero */
  .hero{padding:28px 20px 0}
  .hero h1{width:100%}
  .hero-tagline{width:100%;margin:22px 0 20px;gap:14px 16px}
  .hero .pizza-stage{width:100%}

  /* General rhythm */
  .content-section{padding:48px 20px}
  .content-section p{font-size:15px;line-height:1.6}
  .display-title{font-size:clamp(2.4rem,11vw,3.4rem);margin-bottom:22px}
  .eyebrow{font-size:13px;margin-bottom:14px}

  /* What we do */
  .catering{padding-block:44px}
  .catering .section-intro .how-intro{font-size:17px;margin-top:18px}
  .package-heading h3,.dessert-package h3,.package-more h3{font-size:clamp(1.45rem,6.4vw,1.9rem);margin-bottom:12px}
  .package-meta{display:block;white-space:normal;font-size:15px!important;line-height:1.6}
  .package-meta strong{display:block;font-size:18px}
  .package-meta span{display:block;border-left:0;padding-left:0!important}
  .pizza-package .showcase-grid{display:flex;gap:14px;margin:20px -20px 0;padding:0 20px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pizza-package .showcase-grid::-webkit-scrollbar{display:none}
  .pizza-card{flex:0 0 74%;scroll-snap-align:start;scroll-margin-left:20px}
  .pizza-card p{width:100%;max-width:100%;margin-top:12px;font-size:12px}
  .dessert-package{gap:18px}
  .dessert-trio{max-width:420px}
  .dessert-trio img{flex-basis:37%;width:37%;max-width:37%}
  .dessert-trio img+img{margin-left:-9.6%}
  .catering>.button-dark{width:100%}

  /* Who we are */
  .about-grid{gap:0}
  .about-grid>div:first-child{padding-bottom:0}
  .about{padding-bottom:0!important}
  .founder-portrait{width:90%;max-width:400px;justify-self:center;margin:4px auto 0;align-self:end}
  .founder-portrait img{margin-bottom:0}

  /* FAQs */
  .faq details{padding:18px 0}
  .faq summary{font-size:16px;line-height:1.4}

  /* Contact */
  .contact{padding:56px 20px}
  .contact>p:first-child{margin-bottom:18px}
  .contact h2{font-size:clamp(2.4rem,11vw,3.4rem)}
  .contact-note{margin:24px auto 22px;font-size:15px}
  .contact-invitation{white-space:normal;font-size:inherit}
  .contact .button{display:flex;width:fit-content;min-width:0;margin:10px auto;padding:14px 20px;gap:22px;font-size:13px}

  /* Footer */
  footer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto;column-gap:16px;row-gap:4px;padding:22px 20px}
  footer img{grid-column:1;grid-row:1 / 4;width:56px;height:70px;align-self:center}
  footer p{display:none}
  footer a,footer .email-link,footer .email-link+a{grid-column:2;justify-self:end;margin:0;text-align:right}
  footer .email-link{grid-row:2}
  footer .email-link+a{grid-row:3}

  /* Pizza night pop-up: a compact card rather than a full-screen takeover */
  .night-popup{left:12px;right:12px;bottom:12px;width:auto;padding:20px 20px 18px}
  .night-popup h2{font-size:22px;margin:8px 0 10px}
  .night-popup p{font-size:13px;margin:0 0 6px}
  .night-popup .eyebrow{font-size:11px;margin:0}
  .night-popup .button{padding:10px 14px;margin-top:8px}

  /* Pizza nights page */
  .pizza-night-body .night-event{padding:32px 20px 40px}
  .pizza-night-body .night-layout{grid-template-columns:1fr!important;gap:36px;margin-top:0}
  .pizza-night-body .night-layout>*{grid-column:1!important;grid-row:auto!important}
  .pizza-night-body .night-layout>div:nth-child(2){order:-1}
  .pizza-night-body .night-facts{width:100%;max-width:none}
  .pizza-night-body .night-rsvp{flex-wrap:wrap}
  .pizza-night-body .display-title{font-size:clamp(2.2rem,10vw,3rem)}
  .pizza-night-body .night-layout p{font-size:15px}
  .pizza-night-body .night-facts p{padding:10px 16px;font-size:14px}
  .pizza-night-body .night-facts strong{font-size:22px}
}

@media(max-width:600px){
  .hero h1{width:78%;margin:0 auto}
  .hero-tagline .tagline-script{width:100%}
  .hero-tagline .tagline-sticker{max-width:124px}
  .hero .pizza-stage{aspect-ratio:1.6 / 1}
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle span,.header-right{transition:none!important}
}