/* Shared outer-page foundation copied from the completed TOP, not its content reset. */
body.site-shell-enabled {
  --at-air-rgb: 250 246 239;
  position: relative;
  margin: 0;
  color: var(--at-ink);
  background: rgb(var(--at-air-rgb));
  background-image: none;
  font-family: var(--at-reference-sans, var(--at-sans));
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .055em;
  overflow-x: hidden;
  transition: background-color 1.2s linear;
  isolation: isolate;
}

/* One SITE-SHELL atmosphere surface for every normal page canvas. The TOP
   keeps its authored scenes, and the independent STORE shell stays excluded. */
body.site-shell-enabled:not(.home) #main:not(.store-preview-main) {
  background: rgb(var(--at-air-rgb));
  background-image: none;
  transition: background-color .34s linear;
}

/* FAQ atmosphere is already interpolated by ambient.js on each animation
   frame. A second CSS transition made the header, canvas, and palette chase
   different targets at different speeds. */
body.site-shell-enabled.faq-page-body,
body.site-shell-enabled.faq-page-body #main,
body.site-shell-enabled.faq-page-body .site-header,
body.site-shell-enabled.faq-page-body .site-header__inner,
body.site-shell-enabled.faq-page-body .site-context {
  transition: none;
}

body.site-shell-enabled.is-menu-open { overflow: hidden; }

@media (max-width: 720px) {
  body.site-shell-enabled:not(.home) {
    font-size: 15px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-shell-enabled { transition: none; }
}