/* Stacking message panels. Natural-height copy stays fully readable. */
.story .stage {
 position:sticky!important;
 top:var(--message-stack-top,170px)!important;
 height:auto!important;
 min-height:0!important;
 margin-bottom:0!important;
 scroll-margin-top:170px;
}
/* The gap sits above each panel, not below it. A pinned panel is released when its own box (including its
   bottom margin) meets the end of the list, so a bottom margin let panel 3 start moving while panel 4 was
   still that far away. With the gap on top, the last panel covers the one before it first. */
.story .stage+.stage {margin-top:45svh!important}
.story .card {height:auto!important;min-height:var(--message-stack-height,0px)!important;overflow:hidden}
.story .story-rail>div {top:190px}
@media(max-width:640px) {
 .story .stage {scroll-margin-top:125px}
 .story .stage+.stage {margin-top:36svh!important}
}