/* One fixed diameter for the gallery circle at every screen width.
   Size and position controls are shared by desktop and mobile. */
.home-page {
  --story-circle-diameter:600px;
  --story-circle-top:40px;
  --story-circle-left:-290px;
}
.home-page .story-visual-shell::before,
.home-page .story-pin:has([data-story-step="2"].is-active) .story-visual-shell::before,
.home-page .mobile-story-image::before {
  width:var(--story-circle-diameter);
  height:var(--story-circle-diameter);
  box-sizing:border-box;
  aspect-ratio:1;
  border-radius:50%;
  left:var(--story-circle-left);
  right:auto;
  top:var(--story-circle-top);
  bottom:auto;
  transform:none;
  opacity:1;
  background:radial-gradient(circle at 30% 22%,#fbe6f1,#edbad4 78%);
  border:0;
  pointer-events:none;
}

/* Paint order: card surface, circle, image and copy. */
@media (max-width:800px) {
  .home-page .mobile-story-image {
    isolation:auto;
    z-index:auto;
  }

  .home-page .mobile-story-image::before {
    z-index:1;
    pointer-events:none;
  }

  .home-page .mobile-story-image img {
    position:relative;
    z-index:2;
  }

  .home-page .mobile-story-pair .story-step {
    z-index:auto;
  }

  .home-page .mobile-story-pair .story-step > * {
    position:relative;
    z-index:2;
  }
}

/* One shared mobile circle belongs to the whole gallery, not each photo. */
@media(max-width:800px) {
  .home-page .mobile-story-image::before {content:none}
  .home-page .mobile-story-stage {
    position:relative;isolation:isolate;overflow:clip;margin-top:18px;
  }
  .home-page .mobile-story-circle {
    position:absolute;display:block;z-index:1;pointer-events:none;
    width:var(--story-circle-diameter);height:var(--story-circle-diameter);
    left:calc(3% + var(--story-circle-left));top:calc(12px + var(--story-circle-top));
    border-radius:50%;
    background:radial-gradient(circle at 30% 22%,#fbe6f1,#edbad4 78%);
  }
  .home-page .mobile-story-stage .mobile-story-pair {
    position:relative;z-index:auto!important;background:transparent;
    margin-top:0;overflow:clip;
  }
  .home-page .story-mobile-stack .mobile-story-flow {
    padding-bottom:14px;
    height:calc(var(--story-nav-height) + 18px + var(--story-stage-height) + var(--story-stage-travel) + 14px);
  }
  .home-page .story-mobile-stack .mobile-story-stage {
    position:sticky;top:var(--mobile-story-top);height:var(--story-stage-height);
    overflow:clip;
  }
  .home-page .story-mobile-stack .mobile-story-pair {
    position:absolute;inset:auto 0 auto;width:100%;
  }
}

/* Full-width mobile gallery; keep text padding inside the card. */
@media(max-width:800px) {
  .home-page .scroll-story.story-mobile-flow .mobile-story-flow {padding-inline:0}
  .home-page .mobile-story-stage,
  .home-page .mobile-story-stage .mobile-story-pair {width:100%;margin-inline:0}
  .home-page .mobile-story-stage .mobile-story-image {width:100%;margin-inline:0}
  .home-page .mobile-story-circle {left:var(--story-circle-left)}
  .home-page .mobile-story-nav {padding-inline:16px}
}

/* Pink gallery palette: a pale section and a visibly pink card surface. */
.home-page .scroll-story {
  background:#fcebf4;
  border-color:#edc4d9;
}
.home-page .scroll-story .story-step {
  background:#f9dfed;
  border-color:#edc4d9;
}
@media(max-width:800px) {
  .home-page .scroll-story .mobile-story-nav {
    background:#fcebf4;
    border-color:#edc4d9;
  }
}

/* Let incoming cards fill the gallery runway instead of clipping their copy. */
@media(max-width:800px) {
  .home-page .story-mobile-stack .mobile-story-stage { overflow:visible; }
  .home-page .story-mobile-stack .mobile-story-pair {
    grid-template-rows:max-content max-content;
  }
}