body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pageShell {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}

.contentSection {
  flex: 1 1 auto;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.pageContainer {
  width: clamp(320px, 92%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

.narrowContainer {
  width: clamp(300px, 92%, 760px);
  margin-left: auto;
  margin-right: auto;
}

.sectionIntro {
  margin-top: 1rem;
  font-size: 1.1rem;
  max-width: 54ch;
}



.siteHeader {
  background: #FBF1E7;
}

.headerBar {
  width: clamp(320px, 94%, 1140px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding: clamp(0.75rem, 2vw, 1.1rem) 0;
}

.brandLink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brandMark {
  height: 2.25rem;
  width: auto;
}

.tabNavToggle {
  margin-left: auto;
}



.heroGrid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 3rem);
}

.heroCopy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.heroShot {
  order: -1;
}

.badgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding-left: 0;
}



.storyGrid,
.propGrid,
.stepRow,
.orderGrid,
.specRow {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.featureRail {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0.25rem;
}

.sectionDivider {
  line-height: 0;
}

.sectionDivider svg {
  display: block;
  width: 100%;
  height: 100px;
  fill: #F3E2D3;
}



.siteFooter {
  background: #3A1B0C;
  color: #EFDCC9;
  padding: 0 0 1.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
}

.footerTop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.contactPanel {
  min-height: 220px;
  background: #4A2411;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.footerColumn {
  padding: 1.75rem;
}

.footerBottom {
  width: clamp(320px, 92%, 1080px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}



.orderFab {
  position: fixed;
  right: clamp(0.75rem, 3vw, 2rem);
  bottom: clamp(0.75rem, 3vw, 2rem);
  z-index: 1300;
}

.orderWidget {
  position: fixed;
  right: clamp(0.5rem, 3vw, 2rem);
  bottom: clamp(4.5rem, 12vw, 6.5rem);
  width: clamp(280px, 92vw, 380px);
  max-height: 78vh;
  overflow-y: auto;
  z-index: 1310;
}



@media (min-width: 768px) {
  .heroGrid {
    flex-direction: row;
    align-items: center;
  }

  .heroCopy {
    flex: 1 1 52%;
  }

  .heroShot {
    order: 0;
    flex: 1 1 40%;
  }

  .featureRail {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .featureRail > * {
    flex: 1 1 clamp(240px, 30%, 320px);
  }

  .propGrid,
  .stepRow {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .propGrid > *,
  .stepRow > * {
    flex: 1 1 clamp(220px, 28%, 320px);
  }

  .orderGrid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .orderGrid > .orderCard {
    flex: 1 1 46%;
    order: 1;
  }

  .orderGrid > .orderAside {
    flex: 1 1 46%;
    order: 2;
  }

  .orderGrid > .sellerBlock {
    flex: 1 1 100%;
    order: 3;
  }

  .footerTop {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .footerBottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}



@media (min-width: 1024px) {
  .storyGrid {
    flex-direction: row;
    align-items: flex-start;
  }

  .storyGrid > * {
    flex: 1 1 46%;
  }

  .specRow {
    flex-direction: row;
    align-items: stretch;
  }

  .specRow > * {
    flex: 1 1 48%;
  }
}