/* v57: viewport-wide sections with responsive content and readable text. */
:root { --site-width: 100vw; --content-width: 100vw; }
body > main, body > .site-header, body > .site-footer,
.site-header, .hero-content, .subpage-header, .error-shell { max-width: none; }
.hero h1 em { color: #e32926; }
/* Preserve the official spelling even within uppercase labels. */
.place-name { text-transform: none; }
.story-section > *, .menu-preview-section > *, .footer-grid > *,
.menu-items-grid > *, .menu-items-grid-three > *, .gallery-grid > *,
.location-grid > *, .footer-cta > * { min-width: 0; }
.hero h1, .story-copy h2, .menu-preview-copy h2, .location-card h3,
.footer-cta h2, .section-heading h1 { overflow-wrap: anywhere; white-space: normal; }
.order-dialog.order-dialog-compact { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (min-width: 761px) {
  :root { --page-gutter: clamp(32px, 3vw, 120px); }
  .site-header, .subpage-header, .hero-content,
  .story-section, .gallery-section, .reviews-section, .locations-section,
  .menu-section, .menu-page .menu-section, .site-footer, .legal-page, .error-shell {
    padding-inline: var(--page-gutter);
  }
  .hero, .hero-content { min-height: 100svh; }
  .hero-content { height: auto; }
  .hero-facts { left: var(--page-gutter); max-width: calc(100% - 2 * var(--page-gutter)); flex-wrap: wrap; }
  .founder-caricature { left: var(--page-gutter); }
  .menu-preview-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .menu-preview-copy { padding-inline: clamp(32px, 4vw, 140px); }
  .story-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-bottom { flex-wrap: wrap; gap: 16px 28px; }
}
@media (min-width: 1600px) {
  .hero h1 { font-size: clamp(76px, 5vw, 144px); max-width: 15em; }
  .hero-copy { max-width: 42em; }
  .hero-copy strong, .hero-copy span { font-size: clamp(17px, 1.1vw, 24px); }
  .story-text { max-width: 60ch; font-size: clamp(21px, 1.15vw, 26px); }
  .story-founder { max-width: none; }
  .story-copy h2, .menu-preview-copy h2 { font-size: clamp(64px, 4vw, 104px); }
  .story-image-team { min-height: clamp(540px, 32vw, 980px); }
  .menu-preview-image { min-height: clamp(620px, 36vw, 1100px); }
  .menu-page .menu-items-grid, .menu-page .menu-items-grid-three {
    /* Keep empty tracks so categories with fewer items use identical card widths. */
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: clamp(18px, 1.5vw, 40px);
  }
  .gallery-grid-kitchen { grid-auto-rows: clamp(240px, 16vw, 500px); }
  .review-placeholder { flex-basis: clamp(320px, 25%, 480px); }
}
@media (max-width: 760px) {
  h1, h2, h3, h4,
  .hero h1, .story-copy h2, .menu-preview-copy h2,
  .gallery-heading h2, .reviews-section h2, .locations-section > h2,
  .section-heading h1, .section-heading h2, .menu-category-heading h2,
  .menu-combo-banner h2, .kids-menu-section h2, .footer-cta h2,
  .order-dialog h2 {
    font-family: "Anton", "Arial Black", Arial, Helvetica, sans-serif;
    font-stretch: normal;
    letter-spacing: -0.055em;
    line-height: 1.08;
  }
  .hero h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .hero h1, .story-copy h2, .menu-preview-copy h2 { max-width: 100%; }
  .location-card h3 { font-size: clamp(25px, 7.5vw, 42px); }
  .footer-bottom > div, .error-footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
}


/* Brandkit typography contract: responsive size without glyph distortion. */
:root {
  --display-h1-tracking: -0.045em;
  --display-h2-tracking: -0.04em;
  --display-h3-tracking: -0.03em;
  --ui-tracking: 0.08em;
  --font-ui: "Roboto", Arial, Helvetica, sans-serif;
}

/* Page sections should begin at the viewport edge when reached via navigation. */
html {
  scroll-padding-top: 0;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-stretch: normal;
  font-synthesis: none;
  font-weight: 400;
}

.hero h1,
.section-heading h1,
.menu-page .section-heading h1,
.error-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: normal;
  font-synthesis: none;
  letter-spacing: var(--display-h1-tracking);
  line-height: 1.04;
}

.story-copy h2,
.menu-preview-copy h2,
.gallery-heading h2,
.reviews-section h2,
.locations-section > h2,
.section-heading h2,
.menu-category-heading h2,
.menu-combo-banner h2,
.kids-menu-section h2,
.footer-cta h2,
.order-dialog h2,
.visit-faq h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: normal;
  font-synthesis: none;
  letter-spacing: var(--display-h2-tracking);
  line-height: 1.08;
}

.menu-item-copy h3,
.compact-menu-grid h3,
.location-card h3,
.allergen-panel-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: normal;
  font-synthesis: none;
  letter-spacing: var(--display-h3-tracking);
  line-height: 1.15;
}

.button,
.nav-links > a,
.menu-category-nav a,
.footer-order-actions a,
.order-dialog-actions a {
  letter-spacing: var(--ui-tracking);
  line-height: 1.2;
}

.hero-location,
.section-kicker,
.mobile-nav-kicker,
.kids-menu-badge {
  letter-spacing: 0.12em;
  line-height: 1.3;
}

/* Hero accents and menu image geometry restored from the approved direction. */
.hero::before {
  display: block;
}

.hero-copy {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
}

.nav-links > a:not(.mobile-nav-order)::before {
  content: none !important;
  display: none !important;
}

.nav-links > a:not(.mobile-nav-order) {
  padding-left: 0;
}

.hero-facts span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.hero-facts span::before {
  background: var(--accent);
  border-radius: 50%;
  content: "" !important;
  display: block !important;
  flex: 0 0 5px;
  height: 5px;
  width: 5px;
}

.hero-facts span::after {
  content: none !important;
  display: none !important;
}

.menu-preview-image,
.menu-preview-image img,
.menu-preview-image::after {
  border-radius: 0;
}

.menu-category-nav a {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-align: center;
}

.side-size-options small {
  text-transform: none;
}

/* Keep the postal address in the conventional street / postcode-city block. */
.location-card .location-address {
  display: block;
}

.hero .site-header {
  background: rgba(5, 5, 5, 0.2);
}

body.is-scrolled .hero .site-header {
  background: rgba(5, 5, 5, 0.8);
}

.scroll-cue {
  align-items: center;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  height: 34px;
  justify-content: center;
  right: var(--page-gutter, 48px);
  width: 34px;
}

.scroll-cue svg {
  animation: burger-one-arrow-pulse 1.7s ease-in-out infinite !important;
  height: 18px;
  width: 18px;
}

@keyframes burger-one-arrow-pulse {
  0%, 100% { opacity: 0.42; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(4px); }
}

.legal-page h1 {
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: var(--display-h1-tracking);
  line-height: 1.04;
}

@media (max-width: 1050px) {
  .nav-links {
    bottom: 0;
    height: 100dvh;
    inset: 0;
    margin: 0;
    max-height: none;
    position: fixed;
    width: 100vw;
  }
}

@media (max-width: 760px) {
  .scroll-cue {
    display: none;
  }

  .hero-content {
    justify-content: flex-end;
    padding-bottom: clamp(48px, 8svh, 72px);
    padding-top: clamp(150px, 24svh, 220px);
  }

  .hero h1,
  .gallery-heading h2 {
    max-width: none;
    white-space: normal;
  }

  .hero-copy {
    padding-left: 14px;
  }

  .postal-line {
    display: inline-block;
    white-space: nowrap;
  }

  .footer-grid,
  .legal-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid > .footer-column:first-child {
    display: flex;
    gap: 12px;
    grid-column: auto;
  }

  .footer-grid > .footer-column:first-child a {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  .footer-bottom {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .footer-bottom .footer-credit {
    grid-column: auto;
  }

  .legal-page h1 {
    font-size: clamp(36px, 10.6vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .hero-content {
    padding-bottom: 42px;
    padding-top: 138px;
  }
}