/* ==========================================================================
   PLACEHOLDER CASE STUDY
   ========================================================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    background:#000;
    color:#fff;

    font-family:"Archivo", sans-serif;
}


/* ==========================================================================
   PLACEHOLDER
   ========================================================================== */

.placeholder{

    position:relative;

    width:100%;
    min-height:100vh;

    overflow:hidden;

    background:#000;

}


.placeholder__image{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

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

}


/* Dark photographic treatment */

.placeholder::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.58) 45%,
            rgba(0,0,0,.18) 80%
        );

    z-index:1;

}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.placeholder__overlay{

    position:relative;

    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    width:min(42rem,90%);

    min-height:100vh;

    margin-left:7vw;

    padding:5rem 0;

}


.placeholder__label{

    display:inline-block;

    margin:0 0 1.5rem;

    padding:.45rem .5rem;

    background:#fff;

    color:#000;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 750;

    font-size:.62rem;
    line-height:.95;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.placeholder h1{

    margin:0 0 1.75rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 600;

    font-size:clamp(4rem,9vw,9rem);
    line-height:.88;

    letter-spacing:-.03em;

}


.placeholder__copy{

    max-width:32rem;

    margin:0 0 2.25rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 85, "wght" 350;

    font-size:1.2rem;
    line-height:1.6;

    color:rgba(255,255,255,.86);

}


/* ==========================================================================
   RETURN HOME
   ========================================================================== */

.placeholder__button{

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

    padding:.75rem 1rem;

    border:1px solid rgba(255,255,255,.45);

    color:#fff;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 85, "wght" 600;

    font-size:.9rem;
    line-height:1;

    text-decoration:none;

    background:rgba(0,0,0,.18);

    transition:
        background .25s ease,
        border-color .25s ease;

}


.placeholder__button:hover{

    background:rgba(255,255,255,.12);
    border-color:#fff;

}


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

@media (max-width:1100px){

    .placeholder::after{

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.2) 15%,
                rgba(0,0,0,.82) 75%,
                rgba(0,0,0,.94) 100%
            );

    }


    .placeholder__image{

        object-position:center;

    }


    .placeholder__overlay{

        justify-content:flex-end;

        width:auto;

        margin:0;

        padding:4rem 5vw;

    }


    .placeholder h1{

        font-size:clamp(3.8rem,16vw,6.5rem);

    }


    .placeholder__copy{

        max-width:30rem;

        font-size:1.05rem;
        line-height:1.6;

    }

}