/* Shared vertical rhythm. Loaded after page styles; horizontal layouts,
   typography, image crops and animation timing remain page-owned. */
:root {
  --space-section: 120px;
  --space-half-section: calc(var(--space-section) / 2);
  /* Panel and footer insets are internal spacing, independent of section gaps. */
  --space-panel-inset: clamp(24px, 3.125vw, 40px);
  --space-intro: clamp(40px, 4.375vw, 56px);
  --space-group: clamp(24px, 2.5vw, 32px);
  --space-copy: clamp(12px, 1.25vw, 16px);
  --space-detail: clamp(8px, .8vw, 10px);
}

@media (max-width: 1100px) {
  :root {
    --space-section: 96px;
  }
}

@media (max-width: 700px) {
  :root {
    --space-section: 80px;
  }
}

/* Flow roots contain child margins so spacing cannot leak into adjacent
   sections. Homepage boundaries use a single leading margin, never two pads. */
main {
  display: flow-root;
}

.home-page main {
  padding-bottom: var(--space-section);
}

.home-page main>section {
  margin-block: 0;
  padding-block: 0;
}

.home-page main>section+section {
  margin-top: var(--space-section);
}

.home-page main>.slider.carousel {
  margin-block: var(--space-section) 0;
}

.home-page main>.pillars {
  margin-top: var(--space-group);
}

.home-page main>.christmas {
  /* The transparent garland extends above its section's layout box. */
  margin-top: calc(var(--space-section) + clamp(24px, 4.375vw, 56px));
}

.home-page .hero-intro {
  padding-block: var(--space-intro) var(--space-group);
}

.home-page .section-heading {
  margin-bottom: var(--space-group);
}

.home-page .section-heading h2 {
  margin-top: var(--space-copy);
}

.home-page .section-heading>p {
  margin-bottom: 0;
}

.home-page .about-copy .eyebrow {
  margin-bottom: var(--space-copy);
}

.home-page .about-copy p+p {
  margin-top: var(--space-copy);
}

.home-page .guest-intro h2 {
  margin-block: var(--space-copy) 0;
}

.home-page .christmas-copy {
  /* margin-top: 0; */
  padding-block: var(--space-intro) var(--space-panel-inset);
}

.home-page .christmas h2 {
  margin-block: var(--space-copy);
}

.home-page .christmas-body {
  margin-top: var(--space-copy);
}

.home-page .christmas-body p+p {
  margin-top: var(--space-copy);
}

/* A full-width background boundary shares one section interval between the
   content on either side, with half the interval inside each section. */
.story-opening {
  padding-block: var(--space-intro) var(--space-half-section);
}

.story-intro {
  margin-bottom: var(--space-section);
}

.story-second {
  padding-block: var(--space-half-section);
}

.story-intro h1,
.contact-intro h1,
.menu-intro h1,
.menu-hero h1 {
  margin-block: var(--space-copy);
}

.story-text .chapter {
  margin-bottom: var(--space-copy);
}

.story-text p {
  margin-block: 0;
}

.story-text p+p {
  margin-top: var(--space-copy);
}

.story-image figcaption {
  padding-top: var(--space-copy);
}

.contact-intro {
  padding-block: var(--space-intro) var(--space-section);
}

.contact-layout {
  padding-bottom: var(--space-section);
}

.visit-details {
  padding-block: 0;
}

.visit-details h2 {
  margin-block: var(--space-copy) var(--space-group);
}

.contact-line {
  padding-block: var(--space-copy);
}

.contact-line>span {
  margin-bottom: var(--space-detail);
}

.contact-actions {
  margin-top: var(--space-group);
}

.contact-actions .outline-button {
  margin-top: 0;
}

.location-section {
  padding-bottom: var(--space-section);
}

.location-section>div {
  margin-bottom: var(--space-group);
  gap: var(--space-copy);
}

/* Menu categories use half an interval on each side of the divider. Status
   and toolbar spacing are separate from category spacing, including filtering. */
.menu-intro,
.menu-hero {
  padding-block: var(--space-intro) var(--space-section);
}

.menu-page {
  margin-block: 0 var(--space-section);
  display: flow-root;
}

.menu-template .menu-tools {
  padding-block: var(--space-copy);
  margin-bottom: var(--space-copy);
}

.menu-status {
  margin-bottom: var(--space-half-section);
}

.category-section {
  padding-block: var(--space-half-section);
}

.category-header,
.category-title {
  margin-bottom: var(--space-group);
}

.category-header h2 {
  margin-top: var(--space-detail);
}

.subheading {
  margin-block: var(--space-group) var(--space-copy);
}

.menu-grid {
  row-gap: var(--space-group);
}

.food-description {
  margin-top: var(--space-detail);
}

.menu-note {
  padding-block: var(--space-group) 0;
}

.menu-category {
  padding-block: var(--space-half-section);
}

.menu-closing {
  padding-block: var(--space-section);
}

/* Repeated components use the same rhythm on every page. */
.tiny-rule {
  margin-block: var(--space-copy);
}

.outline-button,
.story-text .outline-button {
  margin-top: var(--space-group);
}

.hours .outline-button {
  margin-top: var(--space-group);
}

.footer-top {
  padding-block: var(--space-group);
}

.footer-main {
  padding-block: var(--space-panel-inset);
}

.footer-bottom {
  padding-block: var(--space-copy);
}

@media (max-width: 800px) {

  .story-grid,
  .story-second .story-grid,
  .contact-layout {
    row-gap: var(--space-group);
  }
}

@media (max-width: 700px) {

  .home-page .about,
  .home-page .guest-section {
    row-gap: var(--space-group);
  }

  .home-page .section-heading {
    gap: var(--space-copy);
  }

  .home-page .guest-intro h2 {
    margin-block: var(--space-copy) 0;
  }
}