/* =========================================================
   PROCESS — FINAL MOBILE PASS
   Gianmarco Spina
========================================================= */


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none), (pointer: coarse) {

    .process-object:hover {
        scale: 1;
        filter: none;
    }

    .process-object:hover .object-arrow {
        transform: none;
    }

    .archive-document:hover .media-image img,
    .archive-sketch:hover .media-image img,
    .reference-image:hover .media-image img,
    .notebook-page:hover .media-image img,
    .screenplay-page:hover .media-image img {
        transform: none;
    }

    .rehearsal-video-card:hover,
    .rehearsal-video-card:focus-within {
        filter: none;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    html,
    body.process-page-body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .process-page-body .navbar {
        padding:
            calc(20px + env(safe-area-inset-top))
            6%
            18px;

        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;

        align-items: start;
    }

    .process-page-body .navbar .logo {
        font-size: 11px;
        line-height: 1;
        letter-spacing: .085em;
    }

    .process-page-body .navbar nav {
        width: 100%;

        display: flex;
        justify-content: space-between;
        align-items: center;

        gap: 0;
    }

    .process-page-body .navbar nav a {
        display: inline-flex;
        align-items: center;

        min-height: 38px;

        font-size: 8px;
        letter-spacing: .11em;
    }


    /* =====================================================
       PAGE META
    ===================================================== */

    .process-meta {
        top:
            calc(
                112px +
                env(safe-area-inset-top)
            );

        left: 6%;
        right: 6%;

        font-size: 7px;
        letter-spacing: .13em;
    }

    .process-meta span:last-child {
        display: none;
    }


    /* =====================================================
       MAIN STAGE
    ===================================================== */

    .process-main {
        min-height: auto;
        overflow: visible;
    }

    .process-stage {
        height: auto;
        min-height: 2220px;

        overflow: hidden;
    }


    /* =====================================================
       SUITCASE
    ===================================================== */

    .process-suitcase {
        top: 350px;

        width: min(82vw, 360px);
    }

    .suitcase-handle {
        top: -39px;
        height: 45px;
    }

    .case-paper-label {
        padding: 11px 10px;
    }

    .case-paper-label span {
        font-size: clamp(15px, 5vw, 21px);
    }

    .case-stamp {
        font-size: 6px;
    }

    .case-stamp-gs {
        width: 46px;
        height: 46px;
    }

    .case-small-label,
    .case-bottom-copy {
        font-size: 5px;
    }


    /* =====================================================
       SIX OBJECTS
    ===================================================== */

    .process-object {
        left: 50%;

        max-width: 78vw;

        cursor: pointer;
    }

    .process-story {
        top: 690px;
        width: min(68vw, 250px);
    }

    .process-sketches {
        top: 955px;
        width: min(67vw, 245px);
    }

    .process-references {
        top: 1215px;
        width: min(68vw, 250px);
    }

    .process-notebook {
        top: 1475px;
        width: min(56vw, 205px);
    }

    .process-screenplay {
        top: 1740px;
        width: min(62vw, 225px);
    }

    .process-rehearsals {
        top: 1990px;
        width: min(68vw, 245px);
    }

    .object-index {
        font-size: 6px;
    }

    .object-footer {
        gap: 12px;

        margin-top: 7px;
        padding-top: 7px;

        font-size: 7px;
        line-height: 1.35;
    }

    .story-paper-front strong {
        font-size: clamp(25px, 8vw, 34px);
    }

    .sketch-folder-title {
        font-size: clamp(19px, 6vw, 25px);
    }

    .reference-stack-label strong {
        font-size: 15px;
    }

    .notebook-cover-copy strong {
        font-size: 22px;
    }

    .screenplay-sheet-front strong {
        font-size: 25px;
    }

    .rehearsal-copy strong {
        font-size: 20px;
    }


    /* =====================================================
       PAGE BOTTOM
    ===================================================== */

    .process-bottom {
        left: 6%;
        right: 6%;
        bottom: 22px;

        gap: 15px;

        font-size: 6px;
        line-height: 1.45;
    }

    .process-bottom span:last-child {
        text-align: right;
    }


    /* =====================================================
       ARCHIVE OVERLAY
    ===================================================== */

    .process-archive {
        padding:
            calc(
                28px +
                env(safe-area-inset-top)
            )
            6%
            calc(
                40px +
                env(safe-area-inset-bottom)
            );
    }

    .archive-topbar {
        position: sticky;
        top: 0;

        z-index: 20;

        padding:
            8px
            0
            14px;

        background:
            linear-gradient(
                var(--process-bg-deep) 78%,
                transparent
            );

        align-items: center;
    }

    .archive-number,
    .archive-section-mini {
        font-size: 6px;
    }

    .archive-close {
        min-height: 44px;

        display: inline-flex;
        align-items: center;

        padding: 8px 0;

        font-size: 8px;
    }


    /* =====================================================
       PROJECT ID
    ===================================================== */

    .archive-project {
        grid-template-columns: 62px minmax(0,1fr);

        gap: 15px;

        width: 100%;

        margin:
            28px
            0
            55px;
    }

    .archive-project-poster {
        width: 62px;
    }

    .archive-project-label {
        font-size: 5px;
    }

    .archive-project-info h2 {
        margin:
            6px
            0
            8px;

        font-size: 24px;
    }

    .archive-project-meta {
        gap: 13px;

        font-size: 5px;
    }

    .archive-project-link {
        padding-top: 10px;

        font-size: 6px;
    }


    /* =====================================================
       ARCHIVE INTRO
    ===================================================== */

    .archive-intro {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-bottom: 25px;
    }

    .archive-intro-number {
        margin-bottom: 14px;

        font-size: 7px;
    }

    .archive-intro h1 {
        font-size: clamp(44px, 13.5vw, 62px);

        line-height: .83;
        letter-spacing: -.055em;
    }

    .archive-intro-copy {
        justify-self: start;

        max-width: none;
    }

    .archive-intro-copy > span {
        margin-bottom: 12px;

        font-size: 6px;
    }

    .archive-intro-copy p {
        font-size: 14px;
        line-height: 1.6;
    }

    .archive-content {
        margin-top: 48px;
    }


    /* =====================================================
       STORY DEVELOPMENT
    ===================================================== */

    .archive-document-desk {
        display: flex;
        flex-direction: column;

        gap: 50px;

        min-height: 0;
    }

    .archive-document,
    .archive-document-1,
    .archive-document-2,
    .archive-document-3,
    .archive-document-4,
    .archive-document-5,
    .archive-document-6,
    .archive-document-7,
    .archive-document-8 {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 88%;

        margin: 0;

        transform: none;
    }

    .archive-document:nth-child(odd) {
        align-self: flex-start;
    }

    .archive-document:nth-child(even) {
        align-self: flex-end;
    }


    /* =====================================================
       SKETCHES
    ===================================================== */

    .archive-sketch-wall {
        display: flex;
        flex-direction: column;

        gap: 48px;

        min-height: 0;
    }

    .archive-sketch,
    .archive-sketch-1,
    .archive-sketch-2,
    .archive-sketch-3,
    .archive-sketch-4,
    .archive-sketch-5 {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 88%;

        margin: 0;
    }

    .archive-sketch:nth-child(odd) {
        align-self: flex-start;
        transform: rotate(-.8deg);
    }

    .archive-sketch:nth-child(even) {
        align-self: flex-end;
        transform: rotate(.8deg);
    }


    /* =====================================================
       REFERENCES
    ===================================================== */

    .reference-group {
        margin-bottom: 75px;
    }

    .reference-group-head {
        margin-bottom: 28px;
    }

    .reference-group-head span {
        font-size: 7px;
    }

    .reference-group-head h3 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .reference-group-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .reference-image,
    .reference-image-1,
    .reference-image-2,
    .reference-image-3 {
        grid-column: auto;

        width: 88%;

        margin-top: 0;
    }

    .reference-image:nth-child(odd) {
        justify-self: start;
    }

    .reference-image:nth-child(even) {
        justify-self: end;
    }


    /* =====================================================
       NOTEBOOK ARCHIVE
    ===================================================== */

    .notebook-archive {
        display: block;
    }

    .notebook-page {
        width: min(100%, 460px);

        margin: 0 auto;
    }


    /* =====================================================
       SCREENPLAY
    ===================================================== */

    .screenplay-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            38px
            12px;
    }

    .screenplay-page {
        width: 100%;
    }

    .screenplay-page .media-meta strong {
        font-size: 8px;
    }

    .screenplay-page .media-meta small {
        font-size: 6px;
    }


    /* =====================================================
       ACTOR REHEARSALS
    ===================================================== */

    .process-archive[data-archive-type="rehearsals"]
    .archive-content {
        overflow: visible;
    }

    .rehearsal-video-wall {
        display: flex;

        flex-direction: column;

        gap: 45px;

        width: 100%;

        min-height: 0;

        margin:
            10px
            auto
            70px;
    }

    .rehearsal-video-card,
    .rehearsal-video-card-1,
    .rehearsal-video-card-2,
    .rehearsal-video-card-3,
    .rehearsal-video-card-4,
    .rehearsal-video-card-5,
    .rehearsal-video-card-6,
    .rehearsal-video-card-7,
    .rehearsal-video-card-8 {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 90%;

        margin: 0;
    }

    .rehearsal-video-card:nth-child(odd) {
        align-self: flex-start;

        transform: rotate(-.7deg);
    }

    .rehearsal-video-card:nth-child(even) {
        align-self: flex-end;

        transform: rotate(.7deg);
    }

    .rehearsal-video-card-1 {
        width: 100%;

        align-self: center;

        transform: none;
    }

    .rehearsal-video-card:hover,
    .rehearsal-video-card:focus-within {
        transform: none;

        filter: none;
    }

    .rehearsal-video {
        width: 100%;

        aspect-ratio: 16 / 9;

        object-fit: cover;
    }

    .rehearsal-video-index {
        top: 8px;
        left: 8px;

        padding: 4px 6px;

        font-size: 7px;
    }

    .rehearsal-video-meta {
        gap: 10px;

        margin-top: 7px;
        padding-top: 8px;
    }

    .rehearsal-video-meta strong {
        max-width: 62%;

        font-size: 9px;
    }

    .rehearsal-video-meta small {
        max-width: 38%;

        font-size: 6px;
    }

    .rehearsal-video-card-1
    .rehearsal-video-meta strong {
        font-size: clamp(20px, 6vw, 27px);
    }


    /* =====================================================
       MEDIA META
    ===================================================== */

    .media-number {
        top: -15px;

        font-size: 5px;
    }

    .media-meta {
        gap: 8px;

        margin-top: 9px;
    }

    .media-meta strong {
        font-size: 9px;
        line-height: 1.3;
    }

    .media-meta small {
        font-size: 6px;
    }


    /* =====================================================
       IMAGE VIEWER
    ===================================================== */

    .process-viewer {
        padding:
            calc(
                14px +
                env(safe-area-inset-top)
            )
            10px
            calc(
                14px +
                env(safe-area-inset-bottom)
            );
    }

    .viewer-topbar,
    .viewer-bottombar {
        font-size: 7px;
    }

    .viewer-close {
        min-height: 44px;

        font-size: 8px;
    }

    .viewer-stage {
        grid-template-columns:
            34px
            minmax(0,1fr)
            34px;

        gap: 3px;
    }

    .viewer-prev,
    .viewer-next {
        width: 34px;
        height: 44px;

        padding: 0;

        font-size: 18px;
    }

    .viewer-image-wrap img {
        max-width: 100%;
        max-height: 72svh;

        object-fit: contain;
    }


    /* =====================================================
       ARCHIVE FOOTER / COUNTER
    ===================================================== */

    .archive-footer {
        gap: 12px;

        padding-top: 17px;

        font-size: 6px;
        line-height: 1.4;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .process-page-body .navbar nav a {
        font-size: 7px;
        letter-spacing: .085em;
    }

    .process-stage {
        min-height: 2180px;
    }

    .process-object {
        max-width: 80vw;
    }

    .screenplay-grid {
        gap:
            34px
            8px;
    }

    .archive-intro h1 {
        font-size: 43px;
    }

    .rehearsal-video-card {
        width: 94%;
    }

    .rehearsal-video-card-1 {
        width: 100%;
    }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media
(max-height: 520px)
and
(orientation: landscape) {

    .process-page-body .navbar {
        padding-top: 14px;

        grid-template-columns:
            auto
            1fr;

        align-items: center;

        gap: 28px;
    }

    .process-page-body .navbar nav {
        justify-content: flex-end;

        gap: 17px;
    }

}