/* ==========================================================
   EMOTIVE — OUR ETHOS PAGE
   ========================================================== */

body.page-slug-our-ethos,
body.page-id-0{
    background:#f4eee5;
}


/* Main page */

body.page .emotive-ethos-page{
    width:min(100% - 104px, 1450px);
    margin:0 auto;
    padding:58px 0 90px;

    color:#5A4032;
}


/* ==========================================================
   INTRO
   ========================================================== */

.emotive-ethos-hero{
    max-width:1000px;
    margin:0 0 92px;
}

.emotive-ethos-kicker{
    margin:0 0 20px;

    font-family:Inter,Arial,sans-serif;
    font-size:13px;
    font-weight:500;

    letter-spacing:.08em;
    text-transform:uppercase;

    color:#9a7d69;
}

.emotive-ethos-hero h1{
    margin:0;

    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(58px,5vw,82px);
    font-weight:500;
    line-height:.98;

    letter-spacing:-.03em;

    color:#5A4032;
}

.emotive-ethos-intro{
    margin:26px 0 0;

    font-family:Inter,Arial,sans-serif;
    font-size:19px;
    font-weight:400;
    line-height:1.55;

    color:#604a3d;
}


/* ==========================================================
   ALTERNATING ROWS
   ========================================================== */

.emotive-ethos-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    gap:110px;

    align-items:center;

    margin:0 0 150px;
}

.emotive-ethos-image{
    margin:0;
    width:100%;
}

.emotive-ethos-image img{
    display:block;

    width:100%;
    height:auto;

    aspect-ratio:1.48 / 1;

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

    filter:grayscale(100%);
}


/* Text column */

.emotive-ethos-copy{
    max-width:590px;
}

.emotive-ethos-copy h2{
    margin:0 0 26px;

    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:42px;
    font-weight:500;
    line-height:1.08;

    letter-spacing:-.02em;

    color:#5A4032;
}

.emotive-ethos-copy p{
    margin:0 0 16px;

    font-family:Inter,Arial,sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:1.6;

    color:#5f493c;
}

.emotive-ethos-copy p:last-child{
    margin-bottom:0;
}


/* alternate positioning */

.emotive-ethos-row-image-left .emotive-ethos-copy{
    justify-self:start;
}

.emotive-ethos-row-image-right .emotive-ethos-copy{
    justify-self:start;
}


/* ==========================================================
   FINAL LINE
   ========================================================== */

.emotive-ethos-closing{
    margin-top:-30px;

    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:42px;
    font-weight:500;
    line-height:1;

    color:#5A4032;
}


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

@media (min-width:768px) and (max-width:1100px){

    body.page .emotive-ethos-page{
        width:calc(100% - 56px);
    }

    .emotive-ethos-row{
        gap:55px;
        margin-bottom:100px;
    }

    .emotive-ethos-copy h2{
        font-size:36px;
    }

    .emotive-ethos-copy p{
        font-size:15px;
    }
}


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

@media (max-width:767px){

    body.page .emotive-ethos-page{
        width:calc(100% - 36px);
        padding:40px 0 64px;
    }

    .emotive-ethos-hero{
        margin-bottom:60px;
    }

    .emotive-ethos-hero h1{
        font-size:52px;
    }

    .emotive-ethos-intro{
        font-size:16px;
    }

    .emotive-ethos-row{
        display:flex;
        flex-direction:column;

        gap:30px;

        margin-bottom:76px;
    }

    .emotive-ethos-row-image-right .emotive-ethos-copy{
        order:2;
    }

    .emotive-ethos-row-image-right .emotive-ethos-image{
        order:1;
    }

    .emotive-ethos-copy{
        max-width:none;
    }

    .emotive-ethos-copy h2{
        font-size:36px;
    }

    .emotive-ethos-copy p{
        font-size:15px;
    }

    .emotive-ethos-closing{
        margin-top:0;
        font-size:36px;
    }
}