.page-shell {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
.page-body {
  padding-bottom: var(--bar-height);
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.accent-rule {
  position: fixed;
  top: var(--head-height);
  left: 0;
  width: 100%;
  height: 0.28em;
  z-index: 101;
  background: linear-gradient(90deg, #f5576c 0%, var(--marigold) 55%, #764ba2 100%);
}
.page-shell-body {
  display: grid;
  grid-template-columns: 1fr var(--rail-width);
  gap: var(--fluid-gap-md);
  align-items: start;
  padding-top: calc(var(--head-height) + 0.8em);
  max-width: var(--shell-width);
  margin: 0 auto;
}

.page-shell-body:not(:has(.page-shell-rail)) {
  grid-template-columns: 1fr;
}
.page-shell-rail {
  order: 2;
  position: sticky;
  top: calc(var(--head-height) + 1.4em);
  padding: var(--fluid-gap-md) 0;
}
.page-shell-main {
  order: 1;
  min-width: 0;
}
.page-shell-content {
  min-width: 0;
}
.page-inner {
  width: 100%;
  max-width: var(--shell-width);
  margin: 0 auto;
}


.page-shell-content section:nth-child(odd) {
  padding: 3em 1em 5em;
}
.page-shell-content section:nth-child(even) {
  padding: 5em 1em 3em;
}
.content-block {
  margin-top: 1em;
  font-size: 1.1em;
  padding-left: 10%;
  padding-right: 5%;
}


.visual-feast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--fluid-gap-sm);
}
.good-bits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: var(--fluid-gap-md);
}
.promise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: var(--fluid-gap-sm);
}
.sauce-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-gap-md);
}
.order-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--fluid-gap-lg);
  align-items: start;
}
.section-divider {
  display: none;
}

@media (max-width: 1100px) {
  .page-shell-body {
    display: block;
    padding-left: var(--fluid-gap-sm);
    padding-right: var(--fluid-gap-sm);
  }
  .page-shell-body .page-shell-rail {
    display: none;
  }
}
@media (max-width: 900px) {
  .order-layout {
    grid-template-columns: 1fr;
  }
  .sauce-steps {
    grid-template-columns: 1fr;
  }
  .content-block {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 768px) {
  .page-shell-content section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


.page-shell-head {
  width: 100%;
}
.page-shell-foot {
  width: 100%;
}