:root {
  --preview-width: 1200px;
  --preview-edge: max(0px, calc((100vw - var(--preview-width)) / 2));
  background: var(--cte-canvas);
  overflow-x: clip;
}

body {
  max-width: var(--preview-width);
  margin-inline: auto;
}

.hero-menu-toggle { left: calc(var(--preview-edge) + max(var(--page-gutter), env(safe-area-inset-left))); }
.header-cta { right: calc(var(--preview-edge) + max(var(--page-gutter), env(safe-area-inset-right))); }
.hero-menu { max-width: var(--preview-width); margin-inline: auto; }

.experience-carousel,
.guest-reviews,
.retreat-invite {
  width: 100vw;
  margin-inline-start: calc((100% - 100vw) / 2);
}

.guest-reviews > .wrap { max-width: calc(var(--preview-width) - 2 * var(--page-gutter)); }

@media (min-width: 1024px) {
  .hero-media { aspect-ratio: 2 / 1; }
  .retreat-intro .wrap { width: calc(100% - 2 * var(--page-gutter)); }
  .experience-rail {
    --rail-inset: min(360px, calc(var(--preview-edge) + var(--page-gutter)));
    display: flex;
    gap: var(--space-m);
    width: 100%;
    padding-inline: var(--rail-inset);
    scroll-padding-inline: var(--rail-inset);
    overflow-x: auto;
  }

  .experience-card { width: auto; height: 560px; flex-basis: 360px; }
  .experience-card[data-clone] { display: flex; }
  .experience-navigation { display: block; }
  .experience-card figcaption { padding: var(--space-l) var(--space-l) calc(var(--space-xl) * 2); }

  .retreat-layout #host { align-self: stretch; }
  .retreat-layout #host > .wrap { height: 100%; }
  .retreat-layout .coach-card { height: 100%; max-height: 48rem; max-width: none; aspect-ratio: auto; }
}

@media (min-width: 1200px) {
  :root, :root[data-mode] {
    --size-xl: 60px;
    --size-coach: 36px;
  }

  .retreat-layout { gap: calc(var(--space-xxl) + var(--space-xs)); }
  .retreat-photo { width: 240px; }
}