}/* ==========================================
   MELBI PICTURES
   ========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #080808;
    color: #d8d8d5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}


/* ==========================================
   HERO
   ========================================== */

.hero {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 520px;

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

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.16)
        ),
        url("assets/hero.jpeg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-title {
    width: 100%;
    padding: 0 25px;
    text-align: center;
}

.hero-title h1 {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.17em;
}

.hero-title p {
    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 9px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.38em;
}


/* LANGUAGE */

.language {
    position: absolute;
    top: 28px;
    right: 32px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.language button {
    padding: 3px 0;

    border: 0;
    border-bottom: 1px solid transparent;

    background: transparent;

    color: rgba(255, 255, 255, 0.50);

    font-size: 9px;
    letter-spacing: 0.15em;

    cursor: pointer;
}

.language button.active {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.language span {
    color: rgba(255, 255, 255, 0.25);
    font-size: 9px;
}


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

main {
    width: 100%;
}


/* ==========================================
   SECTIONS
   ========================================== */

.section {
    width: 760px;
    max-width: calc(100% - 60px);

    margin: 0 auto;
    padding-top: 120px;
}

.section-title {
    margin-bottom: 42px;

    text-align: center;

    color: rgba(255, 255, 255, 0.62);

    font-size: 9px;
    font-weight: 400;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.section-title i {
    display: block;

    width: 24px;
    height: 1px;

    margin: 14px auto 0;

    background: rgba(255, 255, 255, 0.28);
}

.section-content {
    width: 100%;
}

.section-content > p,
.about p {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(238, 238, 235, 0.72);

    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
}

.about p {
    margin-top: 0;
    margin-bottom: 0;
}

.about p + p {
    margin-top: 22px;
}


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

.development {
    padding-top: 145px;
}


/* PROJECT */

.project {
    width: 100%;
    text-align: center;
}


/*
   POSTER MOSTRO
   Deliberately small.
*/

.poster {
    width: 300px;
    height: auto;

    margin: 0 auto;
}


/* PROJECT INFORMATION */

.project-info {
    width: 430px;
    max-width: 100%;

    margin: 24px auto 0;

    text-align: left;
}

.metadata {
    color: rgba(255, 255, 255, 0.58);

    font-size: 8px;
    font-weight: 500;
    line-height: 1.6;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    text-align: center;
}

.project-info p {
    margin: 14px 0 0;

    color: rgba(238, 238, 235, 0.72);

    font-size: 13px;
    font-weight: 300;
    line-height: 1.72;

    text-align: center;
}


/* ==========================================
   PROJECT SEPARATOR
   ========================================== */

.separator {
    height: 170px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.separator span {
    display: block;

    width: 28px;
    height: 1px;

    background: rgba(255, 255, 255, 0.28);
}


/* ==========================================
   LIBERA
   ========================================== */

/*
   Original LIBERA image is landscape.

   The frame deliberately crops the lower
   portion containing the old metadata.
*/

.libera-poster {
    width: 300px;
    height: 390px;

    margin: 0 auto;

    overflow: hidden;

    background: #08111a;
}

.libera-poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.18);
}


/* ==========================================
   ADVISORY
   ========================================== */

.advisory {
    padding-top: 150px;
}


/* ==========================================
   CONTACT
   ========================================== */

.contact {
    padding-top: 125px;
    text-align: center;
}

.contact .section-content > p {
    margin-top: 0;
    margin-bottom: 0;
}

.contact-link {
    display: inline-block;

    margin-top: 24px;
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.35);

    color: rgba(255, 255, 255, 0.82);

    font-size: 9px;
    font-weight: 400;

    letter-spacing: 0.22em;

    text-decoration: none;
}

.contact-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}


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

footer {
    padding: 110px 20px 38px;

    color: rgba(255, 255, 255, 0.25);

    text-align: center;

    font-size: 7px;
    font-weight: 400;

    letter-spacing: 0.20em;
}


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

@media screen and (max-width: 650px) {

    /* HERO */

    .hero {
        height: 58vh;
        min-height: 420px;

        background-size: cover;
        background-position: center;
    }

    .hero-title {
        padding: 0 18px;
    }

    .hero-title h1 {
        font-size: 27px;
        letter-spacing: 0.10em;
        white-space: nowrap;
    }

    .hero-title p {
        margin-top: 17px;

        font-size: 7px;
        letter-spacing: 0.28em;
    }


    /* LANGUAGE */

    .language {
        top: 20px;
        right: 20px;
    }

    .language button,
    .language span {
        font-size: 8px;
    }


    /* SECTIONS */

    .section {
        width: auto;
        max-width: none;

        margin-left: 24px;
        margin-right: 24px;

        padding-top: 90px;
    }

    .section-title {
        margin-bottom: 34px;
        font-size: 8px;
    }

    .section-content > p,
    .about p {
        font-size: 13px;
        line-height: 1.72;
    }


    /* DEVELOPMENT */

    .development {
        padding-top: 110px;
    }


    /*
       IMPORTANT:
       Poster stays deliberately small.
    */

    .poster {
        width: 62%;
        max-width: 235px;
    }

    .project-info {
        width: 82%;
        max-width: 310px;

        margin-top: 20px;
    }

    .metadata {
        font-size: 7px;
        line-height: 1.55;
        letter-spacing: 0.11em;
    }

    .project-info p {
        margin-top: 12px;

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


    /* SEPARATOR */

    .separator {
        height: 145px;
    }

    .separator span {
        width: 25px;
    }


    /* LIBERA */

    .libera-poster {
        width: 62%;
        max-width: 235px;

        height: auto;
        aspect-ratio: 3 / 4;
    }


    /* ADVISORY */

    .advisory {
        padding-top: 115px;
    }


    /* CONTACT */

    .contact {
        padding-top: 105px;
    }


    /* FOOTER */

    footer {
        padding-top: 90px;
        padding-bottom: 30px;

        font-size: 6px;
    }
}


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

@media screen and (max-width: 370px) {

    .hero-title h1 {
        font-size: 23px;
        letter-spacing: 0.08em;
    }

    .section {
        margin-left: 20px;
        margin-right: 20px;
    }

    .poster,
    .libera-poster {
        width: 64%;
    }
}
/* TEXT SIZE REFINEMENT */

.section-content > p,
.about p {
    font-size: 16px;
}

.project-info p {
    font-size: 15px;
}

.metadata {
    font-size: 10px;
}

.section-title {
    font-size: 11px;
    font-weight: 600;
}

@media screen and (max-width: 650px) {

    .section-content > p,
    .about p {
        font-size: 15px;
    }

    .project-info p {
        font-size: 14px;
    }

    .metadata {
        font-size: 9px;
    }

    .section-title {
        font-size: 10px;
        font-weight: 600;
    }
}