/* Phones, 600px and under (the phone layer, 3 October 2026): moved out of world-story.css unchanged. The homepage links
   this file with media="(max-width:600px)" immediately after world-story.css. The rules after their old place there
   (the no-JS layout) are html:not(.world-js) rules, which outrank or do not meet these in either order. */

/* Portrait phones (3 October 2026, the launch pass; desktop is untouched). An open story reads top to bottom: Back, the
   caption (left-aligned, under Back, the full width), then the window onto the strip, which each story sizes to hug its
   pictures (the label row above the picture, both inside it), the two centred together in the room between Back and the
   player at the bottom (the caption's parts are stacked, so the group never moves between beats). Each story aims its
   window at its beat's region (story-visitors.js, story-business.js). */
@media (max-width: 600px) {
    /* The choice screen starts just after the hero (the homepage pass, 3 October 2026): 32px of room above the question
       instead of the desktop's 126px, which left a dark band of about 180px between the hero and the question. */
    .world-story-choice {
        padding-top: 32px;
    }

    .world-story.is-mounted .world-story-reel {
        justify-content: center;
        padding: calc(var(--story-row-top) + 36px + 14px) 0 calc(var(--story-player-bottom) + 36px + 22px);
    }

    .world-story.is-mounted .world-story-reel .world-story-caption {
        align-self: stretch;
        justify-items: start;
        max-width: none;
        min-height: 0;
        margin: 0 0 18px;
        padding: 0 16px;
        font-size: 19px;
        line-height: 1.28;
        text-align: left;
        text-wrap: pretty;
    }

    .world-story.is-mounted .world-story-reel[data-story] .world-story-viewport {
        flex: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    }

    .world-story-player {
        width: calc(100% - 32px);
    }
}