.mobile-card-pager { display: none; }
.mobile-card-close { display: none; }

@media (max-width: 900px) {
    :root {
        --notebook-w: min(260px, 66vw, 43dvh);
        --folded-card-w: calc(490 * var(--notebook-unit));
        /* Reading sheet fills the viewport below a compact control header. */
        --mobile-header-h: calc(168px + env(safe-area-inset-top, 0px));
        --mobile-footer-h: 0px;
        --open-offset: 0px;
        --mobile-bottom-bleed: 34px;
        --mobile-card-y: calc((var(--mobile-header-h) + var(--mobile-bottom-bleed)) / 2);
        --mobile-stage-h: max(620px, 100dvh);
        --expanded-card-w: 100vw;
        --expanded-card-h: calc(var(--mobile-stage-h) - var(--mobile-header-h) + var(--mobile-bottom-bleed));
    }
    body { min-height: var(--mobile-stage-h); position: relative; }
    .interactive-area {
        height: var(--mobile-stage-h);
        overflow: clip;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--mobile-header-h) minmax(0, 1fr) var(--mobile-footer-h);
        padding: 0;
        justify-items: center;
    }
    .archive-wrapper {
        --card-radius: 32px;
        grid-area: 2 / 1;
        align-self: center;
        /* Closed book is centered in the whole stage, not just the reading row. */
        top: calc(var(--mobile-header-h) / -2);
        transition: none;
    }
    .archive-wrapper.folder-is-open { top: calc(var(--mobile-header-h) / -2); transform: none; }
    .archive-wrapper.cards-use-expanded-geometry:not(.cards-are-out) .card-scaler {
        transform: scale3d(var(--card-folded-scale), var(--card-folded-scale-y, var(--card-folded-scale)), 1);
    }
    .archive-wrapper.cards-are-facing-2d.cards-are-out:not(.cards-are-spread):not(.cards-use-layout-spread) .card-mover,
    .archive-wrapper.cards-use-layout-spread.cards-are-facing-2d.cards-are-out .card-mover {
        transform: translateY(var(--mobile-card-y));
    }
    .portfolio-intro { top: 64px; left: 24px; right: 24px; }
    .project-summary { top: calc(58px + env(safe-area-inset-top, 0px)); width: calc(100vw - 48px); }
    .project-summary h2 { font-size: 16px; }
    .project-summary p, .portfolio-intro p { font-size: 12px; line-height: 1.6; }
    .site-document-nav { top: max(16px, env(safe-area-inset-top)); }
    .site-document-link { font-size: 12px; }
    .theme-switcher { display: flex; bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
    body:has(.folder-is-open) .theme-switcher,
    body:has(.is-closing) .theme-switcher { display: none; }
    .project-actions {
        position: relative;
        grid-area: 1 / 1;
        align-self: end;
        left: auto;
        top: auto;
        width: calc(100% - 48px);
        justify-content: flex-end;
        margin-bottom: 12px;
        transform: translateY(8px);
    }
    .archive-wrapper.cards-are-spread + .project-actions { transform: none; }
    .project-demo-link { min-height: 36px; min-width: 0; font-size: 11px; padding: 0 12px; }
    /* Keep all four corners rounded through geometry swaps and pull-to-close. */
    .archive-wrapper.cards-use-expanded-geometry .card-back { border-bottom: 0; border-left: 0; border-right: 0; }
    .archive-wrapper .card-mover { touch-action: pan-y; }
    .archive-wrapper.cards-use-layout-spread.cards-are-facing-2d.cards-are-out.cards-are-spread .card-mover {
        left: 50%;
        transform: translateY(var(--mobile-card-y));
    }
    .archive-wrapper.cards-use-layout-spread.cards-are-spread .card-mover {
        /* Fixed reading surface: switch contents in place without lateral motion. */
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        transition: none;
    }
    .archive-wrapper.cards-use-layout-spread.cards-are-spread .mobile-card-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 5;
    }
    .archive-wrapper.cards-use-layout-spread.cards-are-spread.is-card-dragging .card-mover {
        transition: none;
        opacity: 1;
        user-select: none;
    }
    .archive-wrapper.is-opening.cards-use-layout-spread .card-mover { transition: none; }
    .archive-wrapper.cards-use-layout-spread.cards-are-facing-2d.cards-are-out.cards-are-spread .card-mover.mobile-card-preview {
        visibility: visible;
        transform: translate(var(--preview-x), var(--mobile-card-y));
        z-index: 8;
        pointer-events: none;
        transition: none;
    }
    .archive-wrapper.is-opening .card-mover:not(.mobile-card-active),
    .archive-wrapper.is-closing .card-mover:not(.mobile-card-active) { visibility: hidden; }
    .mobile-card-pager {
        position: relative;
        grid-area: 1 / 1;
        align-self: end;
        justify-self: start;
        z-index: 65;
        left: auto;
        top: auto;
        margin: 0 0 10px 20px;
        transform: none;
        display: flex;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        transition: opacity 200ms ease;
    }
    .archive-wrapper.cards-are-settled ~ .mobile-card-pager { visibility: visible; opacity: 1; }
    .mobile-card-pager button {
        display: grid;
        place-items: center;
        width: 28px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: white;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .mobile-card-pager button::before, .mobile-card-pager button::after { content: none; }
    .mobile-card-marker { display: block; width: 18px; height: 6px; border-radius: 999px; background: currentColor; opacity: .4; transform: translateZ(0) scaleX(.333333); transition: transform 240ms ease, opacity 240ms ease; pointer-events: none; }
    .mobile-card-pager button[aria-current="true"] .mobile-card-marker { opacity: 1; transform: translateZ(0) scaleX(1); }
    .mobile-card-pager button:focus-visible { outline: 2px solid white; outline-offset: -4px; border-radius: 8px; }
    .ed-top .close-btn { display: none; }
    .ed-top { padding-right: 40px; }
    .mobile-card-close {
        display: grid;
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 10;
    }
    .editorial { padding: 24px 24px calc(32px + var(--mobile-bottom-bleed) + env(safe-area-inset-bottom, 0px)); --ed-gap: 28px; }
    .ed-title { font-size: 28px; line-height: 1.35; margin: 24px 0; flex-shrink: 0; }
    .ed-body p { font-size: 15px; line-height: 1.75; }
    .ed-body h3 { font-size: 21px; line-height: 1.45; }
    .ed-note, .ed-question .ed-iteration-copy { font-size: 13px; line-height: 1.75; }
    .ed-graphic figcaption { font-size: 12px; line-height: 1.6; }
    .ed-kicker { margin-bottom: 10px; }
    .ed-continuity { padding: 20px; }
    .ed-continuity-stage { font-size: 19px; gap: 14px; }
    .ed-continuity-stage span + span { padding-left: 14px; }
}

/* Short landscape windows scroll the complete stage instead of crushing text. */
@media (max-width: 900px) and (max-height: 620px) {
    .theme-switcher, .site-document-nav, .project-summary { position: absolute; }
}