/* =========================================================
   MARE NEVE — FINAL MOBILE PASS
   Gianmarco Spina
========================================================= */


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

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

    .mn-notebook-card:hover,
    .gs-bs-hero-photo:hover img,
    .gs-bs-photo:hover,
    .gs-bs-photo:hover img,
    .mn-ending-title:hover span,
    .mn-back-link:hover,
    .gs-bs-cinema-button:hover {
        transform: none;
    }

    .gs-bs-memory-layer,
    .gs-bs-cursor-label {
        display: none !important;
    }

}


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

@media (max-width: 600px) {

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


    /* =====================================================
       NAVBAR
    ===================================================== */

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

        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        align-items: start;
    }

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

    .film-page .navbar nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

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

        min-height: 38px;

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


    /* =====================================================
       FILM OPENING
    ===================================================== */

    .film-intro {
        min-height: 58svh;

        justify-content: flex-end;

        padding:
            150px
            6%
            50px;
    }

    .film-intro .film-label,
    .mn-opening-credit {
        font-size: 8px;
        letter-spacing: .16em;
    }

    .film-intro h1 {
        margin-top: 24px;

        font-size: clamp(57px, 17vw, 82px);
        line-height: .9;
        letter-spacing: -.065em;
    }

    .film-intro p {
        margin-top: 20px;

        font-size: 9px;
        line-height: 1.5;
        letter-spacing: .14em;
    }


    /* =====================================================
       SYNOPSIS
    ===================================================== */

    .film-overview {
        grid-template-columns: 1fr;

        gap: 55px;

        padding:
            25px
            6%
            90px;
    }

    .film-poster {
        width: 100%;
    }

    .film-poster img {
        width: min(78vw, 330px);
        max-width: none;

        margin: 0 auto;
    }

    .film-synopsis {
        max-width: none;
    }

    .film-synopsis h2 {
        margin:
            18px
            0
            32px;

        font-size: clamp(46px, 14vw, 64px);
        line-height: .95;
    }

    .synopsis-language {
        margin-bottom: 28px;
    }

    .synopsis-language + .synopsis-language {
        padding-top: 26px;
    }

    .synopsis-language p {
        font-size: 14px;
        line-height: 1.7;
    }

    .language-label {
        font-size: 8px;
    }


    /* =====================================================
       BEHIND THE FRAME
    ===================================================== */

    .film-frames {
        padding:
            72px
            6%
            90px;
    }

    .film-frames > .film-label {
        font-size: 8px;
    }

    .film-frames > h2 {
        margin-top: 20px;

        font-size: clamp(48px, 14vw, 66px);
        line-height: .95;
    }

    .frame-entry {
        margin-top: 50px;
        margin-bottom: 95px;
    }

    .frame-entry + .frame-entry {
        padding-top: 58px;
    }

    .frame-image {
        width: calc(100% + 12%);
        margin-left: -6%;
    }

    .frame-image img {
        width: 100%;
    }

    .frame-description {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 30px;
    }

    .frame-heading span {
        font-size: 8px;
    }

    .frame-heading h3 {
        margin-top: 19px;

        font-size: clamp(39px, 12vw, 55px);
        line-height: .98;
    }

    .frame-heading .frame-subtitle {
        margin-top: 15px;

        font-size: 8px;
        line-height: 1.5;
    }

    .frame-text {
        max-width: none;
    }

    .language-block {
        margin-bottom: 28px;
    }

    .language-block + .language-block {
        padding-top: 26px;
    }

    .language-block p {
        font-size: 14px;
        line-height: 1.72;
    }


    /* Narrative timeline */

    .mn-timeline {
        left: 8px;
        opacity: .65;
    }


    /* =====================================================
       EXPERIMENTAL CINEMA SEQUENCE
    ===================================================== */

    .mnx-cinema-sequence {
        height: 205svh;

        margin:
            30px
            0
            55px;
    }

    .mnx-cinema-sticky {
        height: 100svh;
        min-height: 520px;
    }

    .mnx-cinema-graticule {
        inset: 5%;
    }

    .mnx-cinema-top,
    .mnx-cinema-bottom {
        left: 7%;
        right: 7%;

        gap: 12px;
    }

    .mnx-cinema-top {
        top: 9%;
    }

    .mnx-cinema-bottom {
        bottom:
            calc(
                8% +
                env(safe-area-inset-bottom)
            );
    }

    .mnx-cinema-top span:last-child,
    .mnx-cinema-bottom span:last-child {
        font-size: 7px;
        letter-spacing: .11em;
    }

    .mnx-label {
        font-size: 7px;
    }

    .mnx-giant-word {
        font-size: 31vw;
        line-height: .77;

        -webkit-text-stroke-width: .6px;
    }


    /* =====================================================
       SPLIT REALITY
    ===================================================== */

    .mnx-split-section {
        padding:
            75px
            6%;
    }

    .mnx-split-heading {
        margin-bottom: 22px;

        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

    .mnx-split-heading p {
        font-size: 8px;
    }

    .mnx-split {
        width: 100%;

        height: 52svh;
        min-height: 360px;
        max-height: 570px;
    }

    .mnx-split-handle {
        width: 44px;
        height: 44px;
    }

    .mnx-split-tag {
        bottom: 17px;

        font-size: 8px;
    }

    .mnx-split-tag.left {
        left: 15px;
    }

    .mnx-split-tag.right {
        right: 15px;
    }


    /* =====================================================
       LIVING TIMECODE
    ===================================================== */

    .mnx-timecode {
        left: 6%;

        bottom:
            calc(
                12px +
                env(safe-area-inset-bottom)
            );

        gap: 8px;

        font-size: 7px;
        letter-spacing: .09em;

        opacity: .65;
    }


    /* =====================================================
       DIRECTOR'S NOTEBOOK
    ===================================================== */

    .mn-notebook {
        padding:
            78px
            6%
            70px;
    }

    .mn-notebook-meta,
    .mn-notebook-tail {
        font-size: 8px;
    }

    .mn-notebook-intro {
        margin:
            58px
            auto
            42px;

        gap: 30px;
    }

    .mn-notebook-kicker {
        font-size: 8px;
    }

    .mn-notebook-intro h2 {
        margin-top: 18px;

        font-size: clamp(52px, 15vw, 72px);
        line-height: .89;
    }

    .mn-notebook-intro p {
        max-width: none;

        font-size: 15px;
        line-height: 1.6;
    }

    .mn-notebook-intro p span {
        font-size: 13px;
    }


    /* Cards: keep editorial 2-column structure */

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

        gap: 9px;
    }

    .mn-notebook-card {
        padding: 9px;
    }

    .mn-card-top {
        padding-bottom: 10px;

        font-size: 7px;
    }

    .mn-card-arrow {
        font-size: 16px;
    }

    .mn-card-photo {
        aspect-ratio: 3 / 4;
    }

    .mn-card-bottom {
        min-height: 90px;

        padding:
            13px
            0
            0;

        gap: 10px;
    }

    .mn-card-bottom strong {
        font-size: clamp(19px, 6vw, 25px);
        line-height: .95;
    }

    .mn-card-bottom small {
        font-size: 7px;
        line-height: 1.35;
    }


    /* Open reader */

    .mn-reader-inner {
        padding:
            38px
            0
            25px;
    }

    .mn-reader-bar {
        padding-top: 14px;

        font-size: 8px;
    }

    .mn-reader-close,
    .mn-reader-next {
        min-height: 44px;

        padding: 10px 4px;

        font-size: 8px;
    }

    .mn-reader-head {
        margin:
            30px
            0
            35px;

        gap: 10px;
    }

    .mn-reader-tag {
        font-size: 8px;
    }

    .mn-reader-head h3 {
        margin:
            12px
            0
            9px;

        font-size: clamp(41px, 12vw, 57px);
        line-height: .94;
    }

    .mn-reader-head p {
        font-size: 14px;
    }

    .mn-reader-ghost {
        font-size: 68px;
    }

    .mn-reader-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .mn-reader-image-wrap > img {
        width: calc(100% + 12%);
        max-width: none;

        margin-left: -6%;

        max-height: none;
    }

    .mn-reader-hotspots {
        inset:
            0
            -6%
            30px;
    }

    .mn-hotspot {
        width: 32px;
        height: 32px;
    }

    .mn-hotspot-tooltip {
        width: min(220px, 72vw);

        font-size: 12px;
    }

    .mn-reader-copy {
        gap: 27px;
    }

    .mn-reader-lang p {
        font-size: 16px;
        line-height: 1.65;
    }

    .mn-reader-marginalia p {
        font-size: 15px;
    }

    .mn-reader-bottom {
        margin-top: 40px;

        align-items: flex-end;
        gap: 15px;
    }

    .mn-reader-bottom > span {
        max-width: 58%;

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


    /* =====================================================
       BACKSTAGE
    ===================================================== */

    .gs-backstage {
        padding:
            70px
            6%
            0;
    }

    .gs-bs-topline,
    .gs-bs-section-header {
        font-size: 8px;
    }

    .gs-bs-hero {
        margin-top: 48px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .gs-bs-eyebrow {
        font-size: 8px;
    }

    .gs-bs-title {
        margin:
            23px
            0
            30px;

        font-size: clamp(64px, 19vw, 88px);
        line-height: .82;
    }

    .gs-bs-introduction {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .gs-bs-introduction p {
        font-size: 15px;
        line-height: 1.65;
    }

    .gs-bs-hero-photo {
        width: 88%;
        max-width: 340px;

        justify-self: end;
    }

    .gs-bs-hero-photo-label {
        left: 10px;
        right: 10px;
        bottom: 10px;

        font-size: 8px;
    }

    .gs-bs-scroll-prompt {
        margin-top: 45px;

        font-size: 8px;
    }


    /* Photo archive */

    .gs-bs-photo-section,
    .gs-bs-video-section {
        padding-top: 72px;
    }

    .gs-bs-section-intro {
        margin:
            34px
            0;
    }

    .gs-bs-section-intro h3 {
        font-size: clamp(47px, 14vw, 65px);
        line-height: .95;
    }

    .gs-bs-section-intro p {
        margin-top: 17px;

        font-size: 8px;
    }

    .gs-bs-photo-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            22px
            10px;
    }

    .gs-bs-photo-a,
    .gs-bs-photo-b,
    .gs-bs-photo-c,
    .gs-bs-photo-d {
        grid-column: auto;

        margin-top: 0;

        aspect-ratio: .8;

        transform: none !important;
    }

    .gs-bs-photo:nth-child(even) {
        margin-top: 24px;
    }

    .gs-bs-photo-label {
        left: 7px;
        right: 7px;
        bottom: 8px;

        gap: 4px;

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


    /* Video monitor */

    .gs-bs-featured {
        padding: 6px;
    }

    .gs-bs-screen {
        aspect-ratio: 16 / 9;
    }

    .gs-bs-featured-video {
        max-height: none;
    }

    .gs-bs-featured-bottom {
        padding:
            18px
            6px
            8px;

        gap: 15px;
    }

    .gs-bs-featured-bottom h4 {
        font-size: clamp(23px, 7vw, 30px);
    }

    .gs-bs-cinema-button {
        min-height: 44px;

        font-size: 9px;
    }

    .gs-bs-video-index {
        grid-template-columns:
            1fr 1fr;

        margin-top: 28px;
    }

    .gs-bs-video-item {
        min-height: 68px;

        padding:
            11px
            7px;

        gap: 7px;
    }

    .gs-bs-video-index-number {
        font-size: 9px;
    }

    .gs-bs-video-index-name {
        font-size: 14px;
    }

    .gs-bs-video-index-arrow {
        font-size: 15px;
    }


    /* Backstage ending */

    .gs-bs-ending {
        margin-top: 75px;

        padding:
            22px
            0
            55px;

        font-size: 8px;
    }

    .gs-bs-ending p {
        margin:
            25px
            0;

        font-size: clamp(42px, 13vw, 61px);
        line-height: .97;
    }

    .gs-bs-ending a {
        min-height: 44px;

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

        font-size: 8px;
    }


    /* =====================================================
       BACKSTAGE LIGHTBOX
    ===================================================== */

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

    .gs-bs-lightbox-top,
    .gs-bs-lightbox-bottom {
        font-size: 8px;
    }

    .gs-bs-lightbox-close {
        min-height: 44px;

        font-size: 8px;
    }

    .gs-bs-lightbox-stage {
        grid-template-columns:
            35px
            minmax(0,1fr)
            35px;

        gap: 3px;
    }

    .gs-bs-lightbox-prev,
    .gs-bs-lightbox-next {
        width: 34px;
        height: 34px;

        font-size: 18px;
    }

    .gs-bs-lightbox-media img,
    .gs-bs-lightbox-media video {
        max-height: 70svh;
    }


    /* =====================================================
       SELECTED STILLS
    ===================================================== */

    .selected-stills {
        padding:
            70px
            6%
            90px;
    }

    .selected-stills .film-label {
        font-size: 8px;
    }

    .selected-stills h2 {
        margin-top: 20px;

        font-size: clamp(46px, 14vw, 64px);
        line-height: .95;
    }

    .stills-intro {
        margin-top: 18px;

        font-size: 8px;
    }

    .stills-gallery {
        margin-top: 36px;

        gap: 12px;
    }

    .still-row {
        gap: 12px;
    }

    .still-row-two {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       CINEMA MODE
    ===================================================== */

    .mn-cinema {
        padding:
            calc(
                14px +
                env(safe-area-inset-top)
            )
            9px
            calc(
                14px +
                env(safe-area-inset-bottom)
            );

        gap: 8px;
    }

    .mn-cinema-header,
    .mn-cinema-footer {
        font-size: 8px;

        gap: 8px;
    }

    .mn-cinema-stage {
        gap: 2px;
    }

    .mn-cinema-photo {
        max-width: calc(100vw - 90px);
        max-height: 72svh;
    }

    .mn-cinema-arrow {
        min-width: 34px;
        min-height: 44px;

        padding: 4px !important;
    }


    /* =====================================================
       FINAL ENDING
    ===================================================== */

    .mn-ending {
        min-height: 58svh;

        padding:
            100px
            6%
            90px;
    }

    .mn-ending-kicker {
        font-size: 8px;
    }

    .mn-ending-title {
        font-size: clamp(95px, 31vw, 150px);
    }

    .mn-ending-rule {
        width: 58vw;

        margin:
            28px
            auto
            18px;
    }

    .mn-back-link {
        min-height: 44px;

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

        font-size: 8px;
    }

}


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

@media (max-width: 390px) {

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

    .mn-notebook-grid {
        gap: 7px;
    }

    .mn-notebook-card {
        padding: 7px;
    }

    .mn-card-bottom strong {
        font-size: 19px;
    }

    .gs-bs-video-index {
        grid-template-columns: 1fr;
    }

    .gs-bs-video-item {
        min-height: 62px;
    }

}


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

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

    .film-page .navbar {
        padding-top: 14px;

        grid-template-columns:
            auto
            1fr;

        align-items: center;

        gap: 28px;
    }

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

        gap: 17px;
    }

    .film-intro {
        min-height: 100svh;

        padding-top: 90px;
    }

    .film-intro h1 {
        font-size: 12vw;
    }

    .mnx-cinema-sticky {
        min-height: 100svh;
    }

    .mnx-giant-word {
        font-size: 22vw;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mnx-timecode {
        display: none !important;
    }

}