/**
 * Desktop presentation for a mobile-only design.
 *
 * These pages were built for a 750px-wide phone canvas and scale with a rem
 * base derived from the viewport, so on a desktop monitor they render several
 * times oversized and full-bleed. This constrains the page to a centred phone
 * frame, the way the sibling site does (its template sets max-width:600px,
 * min-height:100vh, margin-inline:auto on body).
 *
 * Everything is inside a min-width query so phones are untouched.
 */
@media (min-width: 601px) {
    html {
        background: #0b0b0b;
    }

    body {
        max-width: 600px !important;
        min-height: 100vh;
        margin-inline: auto !important;
        /* Lift the frame off the backdrop the way a device mock would. */
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.07),
            0 28px 70px rgba(0, 0, 0, 0.65);
        position: relative;
        /* Horizontal carousels lay their off-screen slides out past the frame
           edge; clip them to it rather than letting them bleed onto the page. */
        overflow-x: hidden;
    }

    /*
     * position:fixed resolves against the viewport, not the frame, so these
     * would still span the full screen. Centre them with `left` rather than a
     * transform (which would clobber animations these elements already carry)
     * and rather than a negative margin — some of these selectors also match a
     * statically positioned element on other pages, which ignores `left` but
     * would be dragged out of the frame by a margin.
     */
    body header,
    body footer,
    body .header,
    body .footer,
    body .main,
    body .van-overlay,
    body .mint-indicator-wrapper,
    body .mint-indicator-mask,
    body .layui-m-layer,
    body .layui-m-layershade {
        left: calc(50% - 300px) !important;
        right: auto !important;
        max-width: 600px !important;
    }

    /* Media inside the frame must not overflow it. */
    body img,
    body video {
        max-width: 100%;
    }
}