/* Inner pages only: match the approved homepage's content gutters and
   desktop proportions. spacing.css owns the shared 120 / 96 / 80px rhythm.
   Retain each page's grids, menu item spacing, and mobile typography. */
.inner-shell,
.menu-page {
  width: min(var(--container), calc(100% - 80px));
  max-width: none;
}

.story-grid > *,
.contact-layout > *,
.footer-main > * { min-width: 0; }

/* Inner-page script typography must not override the shared footer. */
@media (max-width: 1100px) {
  .inner-page .footer-contact .script { font-size: 26px; }
}

@media (min-width: 1101px) {
  :root { --container: 992px; }

  /* Exact shared component values from homepage-refinements.css. */
  .header { height: 86px; }
  .header nav { font-size: 10px; gap: 22px; }
  .brand { width: 136px; }
  .footer-brand { width: 163.2px; }
  .small-button { font-size: 10px; padding: 12px 15px; }
  .small-button span { margin-left: 14px; }
  .eyebrow { font-size: 10px !important; letter-spacing: 1.44px; }
  .inner-page h1, .menu-hero h1 {
    font-size: 94px;
    line-height: .94;
    letter-spacing: -3.2px;
    font-weight: 500;
  }
  h2, .story-text h2, .category-header h2 {
    font-size: clamp(42px, 4.6vw, 53px);
    line-height: 1.06;
    letter-spacing: -1.2px;
  }
  .inner-page .script { font-size: 22px; }
  .story-text p { font-size: 13.6px; line-height: 1.8; }
  .menu-hero > p:last-child { font-size: 13.6px; max-width: 448px; }

  .outline-button, .light-button {
    font-size: 10px;
    padding: 13px 18px;
    min-height: 40px;
    gap: 27px;
  }

  .story-image img { height: 448px; }
  .garden-frame img { height: 464px; }
  .story-image figcaption { font-size: 10.5px; }
  .garden-frame figcaption { font-size: 24px !important; }
  .contact-photo { min-height: 544px; }
  .contact-photo span { bottom: 20px; left: 20px; font-size: 9px; }
  .contact-line .contact-phone { font-size: 24px; }
  .location-section iframe { height: 320px; }

  /* Preserve two dishes per row and their existing vertical gaps. Match image
     proportions to the compact container while keeping dish text readable. */
  .food-card { grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; }
  .food-media { width: 124px; }
  .menu-filter { font-size: 10px; padding: 8px 13px; }
  .menu-search { width: 196px; font-size: 13.6px; padding: 10px 12px; }

  .footer-top { font-size: 10px; }
  .footer-main { gap: 24px; }
  .hours .eyebrow { font-size: 9px !important; }
  .hours h3 { font-size: 29px; margin: 14px 0 18px; }
  dl { font-size: 11px; }
  dl div { margin: 12px 0; }
  .special-hours { font-size: 10px; max-width: 208px; }
  .footer-contact { font-size: 11px; padding: 8px 16px; gap: 8px; }
  .footer-contact .script { font-size: 21px; }
  .footer-contact .phone { font-size: 23px; margin: 10px 0; }
  .map-wrap iframe { min-height: 240px; }
  .footer-bottom { font-size: 9px; gap: 16px; }
}
@media (min-width: 1400px) {
    :root { --container: 1240px; 
	} 
	.header nav {
        font-size: 12px;
    }
	    .small-button {
        font-size: 12px;
        padding: 15px 20px;
    }
	    .eyebrow {
        font-size: 12px !important;
    }
	    .about-copy p:not(.eyebrow) {
        max-width: 480px;
        font-size: 17px;
    }
	    .outline-button, .light-button {
        font-size: 14px;
        padding: 16px 23px;
    }
	.section-heading > p {
        font-size: 16px;
    }
	.guest-intro h2 {
        font-size: 53px;
    }
	    .footer-top {
        font-size: 12px;
    }
	.home-cta-copy p {
    font-size: 14px;
}
    dl {
        font-size: 14px;
    }
	    .hours .eyebrow {
        font-size: 12px !important;
    }
	    .footer-contact .script {
        font-size: 26px;
    }
	    .footer-contact {
        font-size: 14px;
    }
	    .footer-bottom {
        font-size: 12px;
    }    .brand {
        width: 170px;
    }
	    .gallery img, .gallery img:nth-child(2), .gallery img:nth-child(4) {
        height: 300px;
    }
	    .garden-frame img {
        height: 600px;
    }

}
/* Match homepage tablet navigation without changing the mobile menu trigger. */
@media (min-width: 701px) and (max-width: 800px) {
  .header nav { gap: 14px; font-size: 10px; }
  .small-button { font-size: 10px; padding: 12px; white-space: nowrap; }
  .small-button span { margin-left: 8px; }
  .brand { width: 136px; flex-shrink: 0; }
}

@media (max-width: 700px) {
  .inner-shell, .menu-page { width: calc(100% - 36px); }
}