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


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

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

    .about-opening-bottom a:hover,
    .about-language a:hover,
    .about-film-link:hover,
    .about-contact-link:hover {
        color: inherit;
    }

    .about-film-link:hover span,
    .about-contact-link:hover span {
        transform: none;
    }

    .about-biography-heading:hover
    .about-biography-portrait img {
        transform: rotate(2deg);
        opacity: 1;
    }

}


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

@media (max-width: 600px) {

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


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

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

        display: grid;
        grid-template-columns: 1fr;

        gap: 15px;

        align-items: start;
    }

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

    .about-page .navbar nav {
        width: 100%;

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

        gap: 0;
    }

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

        min-height: 38px;

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


    /* =====================================================
       CINEMATIC OPENING
    ===================================================== */

    .about-opening {
        height: 100svh;
        min-height: 620px;
    }

    .about-opening-meta {
        top:
            calc(
                115px +
                env(safe-area-inset-top)
            );

        left: 6%;
        right: 6%;

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

    .about-opening-center {
        width: 100%;

        left: 0;
        top: 50%;

        transform: translateY(-42%);
    }

    .about-opening-overline {
        margin-bottom: 26px;

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

    .about-opening-title {
        width: 100%;

        font-size: clamp(58px, 17vw, 78px);
        line-height: .80;
        letter-spacing: -.085em;
    }

    .about-title-line {
        max-width: 100%;
    }

    .about-title-second {
        margin-top: .14em;
    }

    .about-opening-rule {
        width: 70vw;

        margin-top: 48px;
    }

    .about-opening-caption {
        margin-top: 16px;

        max-width: 80%;

        font-size: 7px;
        line-height: 1.5;
        letter-spacing: .12em;
    }

    .about-opening-bottom {
        left: 6%;
        right: 6%;

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

        font-size: 7px;
    }

    .about-opening-bottom a {
        min-height: 44px;

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

        margin-left: auto;
    }


    /* =====================================================
       BIOGRAPHY
    ===================================================== */

    .about-biography {
        padding:
            76px
            6%
            100px;
    }

    .about-section-meta {
        padding-bottom: 15px;

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

    .about-section-meta span:last-child {
        text-align: right;
    }

    .about-biography-heading {
        min-height: 320px;

        padding:
            70px
            50px
            55px
            0;
    }

    .about-eyebrow {
        font-size: 8px;
        letter-spacing: .14em;
    }

    .about-biography-heading h2 {
        margin-top: 23px;

        font-size: clamp(52px, 15vw, 68px);
        line-height: .92;
        letter-spacing: -.055em;
    }


    /* portrait drawing */

    .about-biography-portrait {
        width: 205px;

        right: -72px;
        top: 50%;

        opacity: .52;
    }

    .about-biography-portrait img {
        width: 205px;

        transform: rotate(2deg);
    }


    /* bilingual biography */

    .about-biography-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .about-language {
        padding-top: 17px;
    }

    .about-language-label {
        margin-bottom: 30px;

        font-size: 8px;
    }

    .about-language p {
        margin-bottom: 22px;

        font-size: 16px;
        line-height: 1.68;
    }


    /* background drawings */

    .about-biography-art
    img.about-sketch-left {
        width: 205px !important;

        left: -135px !important;
        top: 170px !important;

        opacity: .09 !important;
    }

    .about-biography-art
    img.about-sketch-right {
        width: 200px !important;

        right: -130px !important;
        bottom: 95px !important;

        opacity: .075 !important;
    }


    /* =====================================================
       JOURNEY
    ===================================================== */

    .about-journey {
        padding:
            78px
            6%
            105px;
    }

    .about-journey-heading {
        margin:
            60px
            0
            65px;

        font-size: clamp(58px, 17vw, 78px);
        line-height: .91;
    }

    .about-route {
        grid-template-columns: 1fr;

        gap: 55px;

        padding-left: 28px;
    }

    .about-route-line {
        left: 1px;
    }

    .about-route-stop {
        padding-top: 18px;
    }

    .about-route-dot {
        left: -31px;
        top: 37px;
    }

    .about-route-number {
        font-size: 7px;
    }

    .about-route-stop h3 {
        margin:
            20px
            0
            10px;

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

    .about-route-stop p {
        max-width: 90%;

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


    /* =====================================================
       CLOSING STATEMENT
    ===================================================== */

    .about-statement {
        min-height: 72svh;

        padding:
            100px
            6%
            70px;
    }

    .about-statement .about-eyebrow {
        font-size: 8px;
    }

    .about-quote {
        margin:
            48px
            0
            22px;

        font-size: clamp(43px, 13vw, 59px);
        line-height: 1.04;
    }

    .about-quote-translation {
        margin-top: 18px;

        max-width: 85%;

        font-size: 14px;
        line-height: 1.55;
    }

    .about-statement-footer {
        flex-direction: column;

        gap: 18px;

        margin-top: 60px;
        padding-top: 30px;
    }

    .about-film-link,
    .about-contact-link {
        width: 100%;

        min-height: 48px;

        gap: 25px;

        padding-bottom: 11px;

        border-bottom:
            1px solid
            rgba(245,242,235,.17);

        font-size: 8px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .about-footer {
        padding:
            25px
            6%
            calc(
                25px +
                env(safe-area-inset-bottom)
            );

        align-items: flex-end;

        gap: 20px;

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

    .about-footer span {
        max-width: 50%;
    }

    .about-footer a {
        min-height: 44px;

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

        text-align: right;
    }

}


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

@media (max-width: 390px) {

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

    .about-opening-title {
        font-size: 15.5vw;
    }

    .about-biography-heading {
        padding-right: 40px;
    }

    .about-biography-portrait {
        right: -85px;
    }

    .about-quote {
        font-size: 12.5vw;
    }

}


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

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

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

        grid-template-columns:
            auto
            1fr;

        align-items: center;

        gap: 28px;
    }

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

        gap: 17px;
    }

    .about-opening {
        min-height: 100svh;
    }

    .about-opening-meta {
        top: 72px;
    }

    .about-opening-center {
        top: 55%;
    }

    .about-opening-title {
        font-size: 12vw;
    }

    .about-opening-rule {
        margin-top: 24px;
    }

}