/* Mobile layouts share one breakpoint with the navigation controller. */
:root { --mobile-bar-height: 76px; }
.story > *, .visit > *, .menu-grid > * { min-width: 0; }
.contact-row dd { min-width: 0; overflow-wrap: anywhere; }
.visit-actions { flex-wrap: wrap; }

@media (max-width: 820px) {
  html { scroll-padding-top: 24px; scroll-padding-bottom: calc(var(--mobile-bar-height) + 20px); }
  body { padding-bottom: var(--mobile-bar-height); }
  .header { height: 88px; padding-inline: max(5%, env(safe-area-inset-left)); gap: 10px; }
  .wordmark, .header-call, .menu-toggle { flex-shrink: 0; }
  .wordmark small { font-size: .625rem; letter-spacing: 1px; }
  .header-call { min-height: 44px; font-size: .875rem; margin-right: 0; padding: 9px 13px; }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-open .header { position: fixed; background: var(--wine); z-index: 40; }
  .mobile-nav {
    inset: 88px 0 0;
    padding: 24px max(6%, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    gap: 8px;
  }
  .mobile-nav a { display: flex; align-items: center; justify-content: center; min-height: 56px; width: 100%; padding: 8px 12px; font-size: 2rem; line-height: 1.35; }
  .menu-open .mobile-actions { visibility: hidden; pointer-events: none; }
  .hero { min-height: calc(100svh - var(--mobile-bar-height)); max-height: none; }
  .hero-content { padding: clamp(145px, 27svh, 230px) 6% 112px; }
  .hero h1 { font-size: clamp(3rem, 12.4vw, 5rem); line-height: 1.04; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: 1.1px; flex-wrap: wrap; }
  .hero-description { font-size: 1rem; line-height: 1.75; max-width: 32rem; }
  .hero-actions { gap: 14px 20px; margin-top: 24px; }
  .button { font-size: .875rem; min-height: 48px; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
  .hero-bottom { bottom: 20px; font-size: .75rem; letter-spacing: .6px; }
  .hero-bottom a { min-height: 44px; }
  .image-note { bottom: 70px; max-width: 220px; font-size: .75rem; line-height: 1.4; }
  .flavor-ribbon { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .flavor-ribbon span { font-size: 1.35rem; white-space: normal; }
  .section-heading { font-size: clamp(2.5rem, 10vw, 3.5rem); line-height: 1.12; }
  .story p:not(.eyebrow), .section-intro, .dish p, .invitation p:not(.eyebrow), .visit-intro, .contact-row dd { font-size: 1rem; line-height: 1.75; }
  .kicker, .invitation .eyebrow { font-size: .75rem; letter-spacing: 1.6px; }
  .photo-caption { flex-wrap: wrap; gap: 4px 16px; font-size: .75rem; }
  .story-badge { right: 0; }
  .story-badge small { font-size: .625rem; }
  .menu-tabs { gap: 0; overflow: visible; }
  .menu-tab { flex: 1 1 0; min-width: 0; min-height: 52px; font-size: .875rem; padding: 12px 5px; white-space: normal; }
  .dish-number, .dish-tag, .contact-row dt { font-size: .75rem; }
  .dish h3 { font-size: 2.25rem; line-height: 1.2; }
  .menu-foot p, .menu-foot a, .social-line a { font-size: .875rem; }
  .menu-foot a { min-height: 44px; display: inline-flex; align-items: center; white-space: normal; }
  .invitation h2 { font-size: clamp(2.5rem, 10vw, 3.5rem); line-height: 1.12; }
  .contact-row { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  .contact-phone { font-size: 1.875rem !important; line-height: 1.4 !important; }
  .contact-row a { display: inline-block; padding-block: 4px; }
  .social-line a { min-height: 44px; overflow-wrap: anywhere; }
  .footer { padding-bottom: 30px; }
  .footer-main { flex-wrap: wrap; }
  .footer-bottom { font-size: .75rem; }
  .footer-bottom a { display: inline-flex; min-height: 44px; align-items: center; align-self: flex-start; }
  .mobile-actions { padding: 10px max(5%, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)); }
  .mobile-actions a { min-height: 48px; font-size: .875rem; flex: 1 1 0; width: auto; line-height: 1.4; }
}

@media (max-width: 360px) {
  .header { gap: 6px; }
  .header-call { padding-inline: 10px; }
  .header-call svg { display: none; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .hero-actions .text-link { align-self: flex-start; }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .visit-actions .button { flex: 1 1 100%; }
}

@media (max-width: 820px) and (max-height: 500px) {
  .hero-content { padding-top: 125px; }
  .mobile-nav { gap: 2px; padding-top: 12px; }
  .mobile-nav a { font-size: 1.75rem; min-height: 48px; }
}