/* Shared structure for editor-owned pages. */
.cr-page-shell.cr-page-shell {
  --cr-page-frame: 1188px;
  --cr-page-gutter: 26px;
  --cr-page-ink: #1c1a16;
  --cr-page-copy: #46423a;
  --cr-page-muted: #7d7669;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  gap: 0;
  overflow: clip;
  color: var(--cr-page-ink);
  background: transparent !important;
  font-family: Sora, system-ui, -apple-system, sans-serif;
}

.cr-page-shell.cr-page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 8% 8%, #fbf4dd, transparent 70%),
    radial-gradient(40% 38% at 30% 4%, #eef0c4, transparent 72%),
    radial-gradient(55% 45% at 78% 18%, #fadfc6, transparent 72%),
    radial-gradient(50% 50% at 92% 60%, #f6d2e2, transparent 72%),
    radial-gradient(60% 55% at 60% 100%, #e4ddf3, transparent 74%),
    radial-gradient(55% 50% at 10% 90%, #dbe6f4, transparent 74%),
    linear-gradient(180deg, #fcf6e8, #f3eef6);
  background-attachment: fixed;
  animation: caro-page-mesh 22s ease-in-out infinite alternate;
}

/* Every normalized page starts below the same transparent overlay header. */
.caro-page-system.caro-header-caro-active #header:not(.is-stuck) {
  position: absolute !important;
  inset: 0 0 auto;
  width: 100%;
  z-index: 10;
}

/* Hub reserves 100px for its native style-3 post cover; the Elementor single
 * template owns that spacing through the same shared hero as every page. */
.single-post.caro-page-system #lqd-contents-wrap {
  padding-top: 0 !important;
}

.cr-page-shell,
.cr-page-shell * {
  box-sizing: border-box;
}

.cr-page-shell :where(.e-con, .elementor-widget) {
  min-width: 0;
}

.cr-page-shell .cr-page-section {
  width: 100%;
  max-width: none;
}

.cr-page-shell .cr-page-frame {
  width: min(100%, var(--cr-page-frame)) !important;
  max-width: var(--cr-page-frame) !important;
  margin-inline: auto !important;
}

.cr-page-shell.cr-page-shell .cr-page-hero {
  width: 100%;
  max-width: none;
  padding: 190px var(--cr-page-gutter) 30px !important;
  background: transparent !important;
}

.cr-page-shell.cr-page-shell .cr-page-hero__inner {
  width: min(100%, var(--cr-page-frame)) !important;
  max-width: var(--cr-page-frame) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0;
}

.cr-page-shell .elementor-widget-caro_page_hero {
  width: 100%;
  max-width: 880px;
  margin: 0;
}

/* Home keeps its accepted section composition while the shared shell owns the
 * continuous mesh. Every direct section is transparent and separated by the
 * reference's subtle solid line token. */
.caro-page-system .cr-page-shell.cr-page-shell--home > .cr-page-section.cr-page-section {
  background: transparent !important;
}

.cr-page-shell--home > .cr-page-section + .cr-page-section {
  border-top: 1px solid rgba(28, 26, 22, .06) !important;
}

/* The resting Header Caro overlays page content: retain the accepted 38px
 * Hero inset after reserving the active desktop/mobile header height. */
.caro-page-system .cr-page-shell--home > .cr-home-hero-section {
  padding-top: 158px !important;
}

/* The media frame is already a strong visual boundary, so it should not be
 * enclosed by the generic section separators. */
.caro-page-system .cr-page-shell--home > .cr-home-video-section,
.caro-page-system .cr-page-shell--home > .cr-home-video-section + .cr-page-section {
  border-top: 0 !important;
}

/* Project previously painted two full-width white bands over the page mesh. */
.cr-page-shell--project :is(.cr-project-zigzag, .cr-project-cta-section) {
  background: transparent !important;
}

.cr-page-shell + footer,
.caro-page-system footer {
  margin-top: 0 !important;
}

@keyframes caro-page-mesh {
  to { filter: hue-rotate(-8deg) saturate(1.08); }
}

@media (max-width: 1199px) {
  .cr-page-shell.cr-page-shell .cr-page-hero {
    padding-top: 130px !important;
  }

  .caro-page-system .cr-page-shell--home > .cr-home-hero-section {
    padding-top: 118px !important;
  }
}

@media (max-width: 767px) {
  .cr-page-shell.cr-page-shell {
    --cr-page-gutter: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-page-shell.cr-page-shell::before { animation: none; }
}