/* ==========================================
   LEVY MARTIN
   MINIMAL ABOUT PAGE
========================================== */


/* ==========================================
   IMAGE-ONLY HERO
========================================== */

.about-image-hero{
    position:relative;

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

    padding:0;
    overflow:hidden;

    background:#1f0e0a;
}

.about-image-hero img{
    width:100%;
    height:100%;

    display:block;

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


/* ==========================================
   SHARED LABEL
========================================== */

.about-label{
    margin-bottom:22px;

    color:var(--color-primary);

    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:600;
    line-height:1;

    letter-spacing:4px;
    text-transform:uppercase;
}


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

.about-intro{
    padding:160px 0;

    background:#fff;
}

.about-intro-grid{
    width:min(90%,1250px);
    margin:auto;

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

    gap:120px;
    align-items:start;
}

.about-intro-heading h1{
    max-width:650px;

    margin:0;

    color:var(--color-primary);

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

    letter-spacing:-3px;
}

.about-intro-copy{
    padding-top:42px;
}

.about-intro-copy p{
    max-width:510px;

    font-size:1rem;
    line-height:1.9;
}

.about-intro-copy .about-lead{
    margin-bottom:28px;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:clamp(1.7rem,2.7vw,2.6rem);
    line-height:1.25;
}


/* ==========================================
   BRAND STORY
========================================== */

.minimal-story{
    width:100%;

    display:grid;
    grid-template-columns:1.15fr .85fr;

    padding:0;

    background:#f4f1ed;
}

.minimal-story-image{
    min-height:820px;

    overflow:hidden;
}

.minimal-story-image img{
    width:100%;
    height:100%;

    display:block;

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

    transition:transform 1.2s ease;
}

.minimal-story:hover .minimal-story-image img{
    transform:scale(1.025);
}

.minimal-story-content{
    padding:100px 8vw;

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

.minimal-story-content h2{
    max-width:600px;

    margin:0 0 35px;

    font-size:clamp(3rem,5vw,5.2rem);
    font-weight:400;
    line-height:.98;

    letter-spacing:-2px;
}

.minimal-story-content > p:last-child{
    max-width:500px;

    line-height:1.9;
}


/* ==========================================
   MONOGRAM
========================================== */

.minimal-monogram{
    width:min(90%,1200px);
    margin:auto;

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

    gap:120px;
    align-items:center;

    padding:160px 0;
}

.monogram-mark{
    min-height:440px;

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

    background:#f6f4f1;
}

.monogram-mark img{
    width:min(55%,280px);
    height:auto;

    object-fit:contain;
}

.monogram-content h2{
    margin:0 0 25px;

    font-size:clamp(3rem,5vw,5rem);
    font-weight:400;
}

.monogram-content > p:last-child{
    max-width:420px;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:clamp(1.5rem,2.3vw,2.2rem);
    line-height:1.35;
}


/* ==========================================
   MISSION AND VISION
========================================== */

.minimal-purpose{
    padding:160px 0;

    background:#111;
}

.purpose-heading{
    width:min(90%,1200px);
    margin:0 auto 90px;
}

.purpose-heading .about-label{
    color:rgba(255,255,255,.58);
}

.purpose-heading h2{
    max-width:780px;

    color:#fff;

    font-size:clamp(3rem,5vw,5.2rem);
    font-weight:400;
    line-height:1;

    letter-spacing:-2px;
}

.purpose-grid{
    width:min(90%,1200px);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    border-top:1px solid rgba(255,255,255,.22);
}

.purpose-item{
    min-height:350px;

    padding:55px 70px 20px 0;

    border-bottom:1px solid rgba(255,255,255,.22);
}

.purpose-item + .purpose-item{
    padding-left:70px;

    border-left:1px solid rgba(255,255,255,.22);
}

.purpose-item span{
    display:block;

    margin-bottom:60px;

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

    font-size:.7rem;
    letter-spacing:3px;
}

.purpose-item h3{
    margin-bottom:25px;

    color:#fff;

    font-size:clamp(2rem,3vw,3rem);
    font-weight:400;
}

.purpose-item p{
    max-width:470px;

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

    line-height:1.9;
}


/* ==========================================
   EDITORIAL IMAGE
========================================== */

.about-editorial-image{
    width:100%;

    padding:0;

    overflow:hidden;
}

.about-editorial-image img{
    width:100%;
    height:90vh;
    min-height:650px;

    display:block;

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

    transition:transform 1.3s ease;
}

.about-editorial-image:hover img{
    transform:scale(1.02);
}


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

.about-closing{
    padding:190px 24px;

    background:#fff;
}

.about-closing-inner{
    max-width:1100px;
    margin:auto;

    text-align:center;
}

.about-closing h2{
    margin:0 0 25px;

    font-size:clamp(3.6rem,7vw,7rem);
    font-weight:400;
    line-height:.9;

    letter-spacing:-3px;
}

.closing-line{
    margin-bottom:55px;

    color:var(--color-text-light);

    font-family:var(--font-heading);
    font-size:clamp(1.7rem,3vw,2.8rem);
}

.about-text-link{
    display:inline-flex;
    align-items:center;

    gap:18px;
    padding-bottom:8px;

    border-bottom:1px solid var(--color-primary);

    color:var(--color-primary);

    font-size:.72rem;
    font-weight:600;

    letter-spacing:1.8px;
    text-transform:uppercase;
}

.about-text-link span{
    font-size:1rem;

    transition:transform .3s ease;
}

.about-text-link:hover span{
    transform:translateX(5px);
}


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

@media(max-width:992px){

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

        gap:55px;
    }

    .about-intro-copy{
        padding-top:0;
    }

    .minimal-story{
        grid-template-columns:1fr;
    }

    .minimal-story-image{
        min-height:650px;
    }

    .minimal-story-content{
        padding:90px 7vw;
    }

    .minimal-monogram{
        grid-template-columns:1fr;

        gap:65px;
    }

    .purpose-grid{
        grid-template-columns:1fr;
    }

    .purpose-item{
        padding:50px 0;
    }

    .purpose-item + .purpose-item{
        padding-left:0;

        border-left:none;
    }

}


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

@media(max-width:768px){

    .about-image-hero{
        height:auto;
        min-height:0;

        padding-top:75px;

        background:#fff;
    }

    .about-image-hero img{
        width:100%;
        height:auto;

        object-fit:contain;
        object-position:center center;
    }

    .about-intro{
        padding:90px 0;
    }

    .about-intro-grid{
        width:calc(100% - 44px);

        gap:40px;
    }

    .about-intro-heading h1{
        font-size:3.7rem;
        line-height:.9;

        letter-spacing:-2px;
    }

    .about-intro-copy .about-lead{
        font-size:1.8rem;
    }

    .minimal-story-image{
        min-height:0;
    }

    .minimal-story-image img{
        width:100%;
        height:auto;

        object-fit:contain;
    }

    .minimal-story-content{
        padding:75px 22px;
    }

    .minimal-story-content h2{
        font-size:3rem;
    }

    .minimal-monogram{
        width:calc(100% - 44px);

        padding:95px 0;

        gap:50px;
    }

    .monogram-mark{
        min-height:340px;
    }

    .monogram-content h2{
        font-size:3rem;
    }

    .minimal-purpose{
        padding:100px 0;
    }

    .purpose-heading{
        width:calc(100% - 44px);

        margin-bottom:60px;
    }

    .purpose-heading h2{
        font-size:3rem;
    }

    .purpose-grid{
        width:calc(100% - 44px);
    }

    .purpose-item{
        min-height:0;

        padding:42px 0;
    }

    .purpose-item span{
        margin-bottom:35px;
    }

    .purpose-item h3{
        font-size:2.3rem;
    }

    .about-editorial-image img{
        width:100%;
        height:auto;
        min-height:0;

        object-fit:contain;
    }

    .about-closing{
        padding:110px 22px;
    }

    .about-closing h2{
        font-size:3.6rem;
        line-height:.92;
    }

    .closing-line{
        margin-bottom:40px;

        font-size:1.7rem;
    }

}


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

@media(max-width:480px){

    .about-intro-heading h1{
        font-size:3.2rem;
    }

    .about-intro-copy .about-lead{
        font-size:1.6rem;
    }

    .minimal-story-content h2{
        font-size:2.65rem;
    }

    .monogram-content h2{
        font-size:2.65rem;
    }

    .purpose-heading h2{
        font-size:2.65rem;
    }

    .about-closing h2{
        font-size:3.05rem;
    }

}