:root{
    --white:#f5f4f0;
    --pure-white:#fff;
    --black:#111;
    --grey:#777;
    --light-grey:#d7d6d1;
    --carmin:#a31932;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--white);
    color:var(--black);
    font-family:"DM Sans",sans-serif;
    font-weight:300;
    overflow-x:hidden;
}

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

a{
    color:inherit;
    text-decoration:none;
}

.site-container{
    padding-left:4vw;
    padding-right:4vw;
}

.section-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#777;
}


/* ===================================
   HEADER
=================================== */

#header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;
}

.main-nav{
    height:95px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    border-bottom:1px solid rgba(0,0,0,.25);
}

.logo{
    font-family:"Oswald",sans-serif;
    font-size:19px;
    font-weight:500;
    letter-spacing:.04em;
}

.logo span{
    color:var(--carmin);
}

.nav-center{
    display:flex;
    justify-content:center;
    gap:30px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.nav-links{
    display:flex;
    justify-content:flex-end;
    gap:35px;
}

.nav-links a{
    position:relative;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.nav-links a:after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    width:0;
    height:1px;
    background:#111;
    transition:.4s;
}

.nav-links a:hover:after{
    width:100%;
}


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

.hero{
    min-height:100vh;
    padding-top:150px;
}

.hero-small{
    display:flex;
    justify-content:space-between;
    padding-bottom:15px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.2em;
}

.hero-heading h1{
    font-family:"Oswald",sans-serif;
    font-size:clamp(120px,20vw,350px);
    font-weight:500;
    line-height:.71;
    letter-spacing:-.06em;
    margin:20px 0 70px;
}

.hero-heading h1 span{
    display:block;
}

.hero-carmin{
    text-align:right;
}

.hero-image{
    position:relative;
    height:67vh;
    min-height:580px;
    overflow:hidden;
}

.hero-image img{
    width:100%;
    height:115%;
    object-fit:cover;
    filter:grayscale(100%);
}

.hero-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    justify-content:space-between;
    padding:18px 20px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.hero-footer{
    display:flex;
    justify-content:space-between;
    padding:35px 0 100px;
}

.hero-footer p{
    font-family:"Oswald",sans-serif;
    font-size:22px;
    line-height:1.2;
    text-transform:uppercase;
}

.hero-footer a{
    align-self:flex-start;
    min-width:220px;
    display:flex;
    justify-content:space-between;
    padding-bottom:12px;
    border-bottom:1px solid #111;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
}


/* ===================================
   MANIFESTO
=================================== */

.manifesto{
    padding:160px 0 200px;
    border-top:1px solid var(--light-grey);
}

.manifesto h2{
    font-family:"Oswald",sans-serif;
    font-size:clamp(65px,8vw,140px);
    font-weight:400;
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-.035em;
}

.manifesto h2 em{
    color:var(--carmin);
    font-style:normal;
}

.manifesto-bottom{
    margin-top:100px;
}

.manifesto-bottom p{
    font-size:15px;
    line-height:1.8;
    color:#555;
}


/* ===================================
   FILMS
=================================== */

.films{
    padding:100px 0 200px;
}

.films-header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:end;
    margin-bottom:80px;
}

.films-header h2{
    font-family:"Oswald",sans-serif;
    font-size:clamp(100px,17vw,290px);
    line-height:.7;
    letter-spacing:-.05em;
    margin:0;
}

.films-count{
    justify-self:end;
    font-size:10px;
    letter-spacing:.15em;
}

.film-main{
    margin-bottom:160px;
}

.film-visual{
    display:block;
    height:80vh;
    min-height:650px;
    position:relative;
    overflow:hidden;
}

.film-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1.4s cubic-bezier(.2,.8,.2,1);
}

.film-visual:hover img{
    transform:scale(1.025);
}

.film-open{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    width:120px;
    height:120px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    transition:.4s;
}

.film-visual:hover .film-open{
    transform:translate(-50%,-50%) scale(1);
}

.film-details{
    display:flex;
    justify-content:space-between;
    padding:25px 0;
    border-bottom:1px solid #aaa;
}

.film-title{
    display:flex;
    align-items:flex-start;
    gap:30px;
}

.film-index{
    color:var(--carmin);
    font-size:11px;
}

.film-title h3{
    font-family:"Oswald",sans-serif;
    font-size:65px;
    line-height:1;
    margin:0;
}

.film-data{
    display:flex;
    gap:45px;
    align-items:end;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.secondary-films{
    margin-top:100px;
}

.film-small-image{
    overflow:hidden;
}

.film-small-image img{
    height:600px;
    object-fit:cover;
    filter:grayscale(100%);
    transition:.8s;
}

.film-small:hover img{
    filter:grayscale(0);
    transform:scale(1.02);
}

.film-small-title{
    display:flex;
    gap:25px;
    padding-top:25px;
}

.film-small-title span{
    color:var(--carmin);
    font-size:10px;
}

.film-small-title h3{
    font-family:"Oswald",sans-serif;
    font-size:45px;
    line-height:.9;
}

.film-small-offset{
    margin-top:220px;
}


/* ===================================
   QUOTE
=================================== */

.quote{
    padding:180px 0;
    background:#111;
    color:white;
}

.quote-mark{
    display:block;
    font-family:Georgia,serif;
    color:var(--carmin);
    font-size:100px;
    height:70px;
}

.quote p{
    font-family:"Oswald",sans-serif;
    font-size:clamp(70px,10vw,180px);
    line-height:.87;
    letter-spacing:-.035em;
}

.quote p span{
    color:#777;
}


/* ===================================
   SHOWREEL
=================================== */

.showreel{
    padding:180px 0;
}

.showreel-header{
    display:flex;
    justify-content:space-between;
    padding-bottom:25px;
}

.showreel-visual{
    height:80vh;
    position:relative;
    overflow:hidden;
}

.showreel-visual video{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.play{
    position:absolute;
    bottom:35px;
    left:35px;
    border:0;
    background:white;
    color:#111;
    padding:20px 30px;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.15em;
}

.play span{
    margin-right:20px;
}


/* ===================================
   ABOUT
=================================== */

.about{
    padding:150px 0 200px;
    border-top:1px solid var(--light-grey);
}

.portrait img{
    filter:grayscale(100%);
}

.portrait > span{
    display:block;
    margin-top:15px;
    font-size:9px;
    line-height:1.6;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.about-content h2{
    font-family:"Oswald",sans-serif;
    font-size:clamp(70px,8vw,135px);
    line-height:.8;
    letter-spacing:-.04em;
    margin-bottom:70px;
}

.about-content h2 span{
    color:var(--carmin);
}

.about-content p{
    max-width:480px;
    color:#555;
    line-height:1.85;
}

.about-content .about-lead{
    color:#111;
    font-size:24px;
    line-height:1.4;
    margin-bottom:45px;
}


/* ===================================
   FESTIVALS
=================================== */

.festivals{
    padding:160px 0 200px;
    border-top:1px solid var(--light-grey);
}

.festival-header{
    display:grid;
    grid-template-columns:25% 75%;
    margin-bottom:100px;
}

.festival-header h2{
    font-family:"Oswald",sans-serif;
    font-size:clamp(70px,9vw,155px);
    line-height:.87;
}

.festival-header h2 span{
    color:#999;
}

.festival-row{
    display:grid;
    grid-template-columns:2fr 3fr 1fr;
    padding:20px 0;
    border-top:1px solid #bbb;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.festival-content{
    padding:35px 0;
    font-size:12px;
}

.festival-row:last-child{
    border-bottom:1px solid #bbb;
}


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

footer{
    background:var(--carmin);
    color:white;
    padding:80px 0 40px;
}

footer .section-label{
    color:rgba(255,255,255,.6);
}

.footer-top{
    display:flex;
    justify-content:space-between;
}

.footer-top p{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.footer-contact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:80px 0;
    border-bottom:1px solid rgba(255,255,255,.5);
    font-family:"Oswald",sans-serif;
    font-size:clamp(80px,15vw,250px);
    line-height:.8;
    letter-spacing:-.04em;
}

.footer-contact span:last-child{
    font-family:"DM Sans",sans-serif;
    font-weight:300;
}

.footer-bottom{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    padding-top:30px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:30px;
}

.footer-bottom > div:last-child{
    text-align:right;
}


/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:991px){

    .site-container{
        padding-left:20px;
        padding-right:20px;
    }

    .main-nav{
        height:75px;
        grid-template-columns:1fr auto;
    }

    .nav-center,
    .nav-links{
        display:none;
    }

    .hero{
        padding-top:110px;
    }

    .hero-heading h1{
        font-size:27vw;
        line-height:.78;
        margin-bottom:45px;
    }

    .hero-image{
        height:55vh;
        min-height:430px;
    }

    .hero-caption{
        display:none;
    }

    .hero-footer{
        padding-bottom:70px;
    }

    .manifesto{
        padding:100px 0;
    }

    .manifesto-bottom{
        margin-top:60px;
    }

    .films{
        padding:70px 0 100px;
    }

    .films-header{
        display:block;
    }

    .films-header h2{
        font-size:32vw;
        margin:50px 0 20px;
    }

    .films-count{
        display:block;
        text-align:right;
    }

    .film-visual{
        height:60vh;
        min-height:450px;
    }

    .film-details{
        display:block;
    }

    .film-title h3{
        font-size:55px;
    }

    .film-data{
        margin-top:25px;
        flex-wrap:wrap;
        gap:15px 30px;
    }

    .film-small-image img{
        height:500px;
    }

    .film-small-offset{
        margin-top:80px;
    }

    .quote{
        padding:100px 0;
    }

    .showreel{
        padding:100px 0;
    }

    .showreel-visual{
        height:60vh;
    }

    .about{
        padding:100px 0;
    }

    .portrait{
        margin:50px 0 70px;
    }

    .festival-header{
        display:block;
    }

    .festival-header h2{
        margin-top:50px;
    }

    .festival-row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .footer-contact{
        font-size:21vw;
    }

    .footer-bottom{
        grid-template-columns:1fr;
        gap:25px;
    }

    .footer-social{
        justify-content:flex-start;
    }

    .footer-bottom > div:last-child{
        text-align:left;
    }
}

.contact-form-wrap{
    margin-top:60px;
    border-top:1px solid rgba(0,0,0,.2);
}

.contact-row{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.contact-field{
    position:relative;
    padding:28px 0;
    border-bottom:1px solid rgba(0,0,0,.2);
}

.contact-row .contact-field:first-child{
    padding-right:40px;
    border-right:1px solid rgba(0,0,0,.2);
}

.contact-row .contact-field:last-child{
    padding-left:40px;
}

.contact-field label{
    display:block;
    margin-bottom:12px;
    font-family:"DM Sans",sans-serif;
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#777;
}

.contact-field input,
.contact-field textarea{
    display:block;
    width:100%;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#111;
    font-family:"DM Sans",sans-serif;
    font-size:clamp(18px,2vw,28px);
    font-weight:300;
    border-radius:0;
}

.contact-field textarea{
    resize:none;
    min-height:150px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:#aaa;
    opacity:1;
}

.contact-submit-wrap{
    padding:30px 0 80px;
}

.contact-submit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:25px 0;
    border:0;
    border-bottom:2px solid #111;
    background:none;
    color:#111;
    font-family:"Oswald",sans-serif;
    font-size:clamp(30px,5vw,70px);
    font-weight:500;
    line-height:1;
    text-align:left;
    cursor:pointer;
    transition:opacity .3s ease;
}

.contact-submit:hover{
    opacity:.5;
}

.contact-submit span:last-child{
    font-size:.7em;
}

.contact-result{
    display:none;
    margin-bottom:50px;
    padding:20px 0;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    font-family:"DM Sans",sans-serif;
    font-size:14px;
}

.contact-result.success{
    display:block;
}

.contact-result.error{
    display:block;
}

.contact-hp{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

@media(max-width:767px){

    .contact-form-wrap{
        margin-top:40px;
    }

    .contact-row{
        display:block;
    }

    .contact-row .contact-field:first-child{
        padding-right:0;
        border-right:0;
    }

    .contact-row .contact-field:last-child{
        padding-left:0;
    }

    .contact-field{
        padding:22px 0;
    }

    .contact-submit-wrap{
        padding:25px 0 60px;
    }

}