/* =========================================================
   ABOUT / O NAS
========================================================= */

.about-page{
    --about-black:#0b0b0b;
    --about-paper:#f2eee7;
    --about-line:rgba(0,0,0,.16);
    --about-white:#f5f2ec;

    background:var(--about-paper);
    color:#111;
}


/* GENERIC */

.about-kicker{
    margin:0 0 18px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:500;
}

.about-kicker--dark{
    color:#111;
}

.about-rule{
    display:block;
    width:34px;
    height:1px;
    margin:25px 0;
    background:rgba(255,255,255,.72);
}

.about-rule--dark{
    background:#111;
}

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

    margin-top:26px;

    font-size:10px;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#fff;
}

.about-text-link span{
    font-size:17px;
}

.about-text-link--dark{
    color:#111;
}



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

.about-hero{
    min-height:720px;
    display:grid;
    grid-template-columns:42% 58%;

    background:var(--about-black);
    color:#fff;

    overflow:hidden;
}

.about-hero__copy{
    padding:
        175px
        30px
        80px
        var(--pad);

    display:flex;
    flex-direction:column;
    justify-content:center;

    position:relative;
    z-index:2;
}

.about-hero h1{
    margin:0;

    max-width:580px;

    font-family:var(--serif);
    font-size:clamp(55px,5vw,92px);
    line-height:.91;
    letter-spacing:-.04em;
    font-weight:400;
}

.about-hero__lead{
    max-width:470px;

    margin:0;

    font-size:15px;
    line-height:1.6;

    color:rgba(255,255,255,.82);
}

.about-hero__image{
    min-height:720px;

    background-color:#222;
    background-size:cover;
    background-position:center;

    position:relative;
}

.about-hero__image:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            var(--about-black) 0%,
            rgba(11,11,11,.42) 14%,
            transparent 42%
        );
}

.about-hero__side{
    position:absolute;
    right:8%;
    top:28%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    font-size:10px;
    line-height:1.65;
    letter-spacing:.2em;
    text-transform:uppercase;

    color:rgba(255,255,255,.85);
}

.about-hero__side i{
    display:block;
    width:1px;
    height:145px;

    margin:24px 0;

    background:rgba(255,255,255,.55);
}

.about-hero__side small{
    font-size:9px;
    line-height:1.75;
    letter-spacing:.18em;
}



/* =========================================================
   WORLDS
========================================================= */

.about-worlds{
    min-height:630px;

    display:grid;
    grid-template-columns:31% 34% 35%;

    overflow:hidden;
}

.about-worlds__photo,
.about-worlds__gallery-top,
.about-worlds__gallery-bottom > div{
    background-size:cover;
    background-position:center;
    background-color:#292929;
}

.about-worlds__photo{
    position:relative;
    min-height:630px;

    background-image:
        linear-gradient(135deg,#222,#444);
}

.about-photo-caption{
    position:absolute;
    top:46px;
    left:42px;

    color:#fff;

    font-size:11px;
    line-height:1.5;
    letter-spacing:.24em;
}

.about-worlds__statement{
    padding:58px 55px 45px;

    background:var(--about-paper);

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-worlds__statement h2{
    margin:0;

    font-family:var(--serif);
    font-size:clamp(52px,4.7vw,84px);
    line-height:.91;
    letter-spacing:-.045em;
    font-weight:400;
    font-style:italic;
}

.about-worlds__statement > p:not(.about-kicker){
    max-width:410px;

    font-size:14px;
    line-height:1.65;
}

.about-worlds__gallery{
    display:grid;
    grid-template-rows:45% 55%;
}

.about-worlds__gallery-top{
    background-image:
        linear-gradient(135deg,#777,#b0aaa0);
}

.about-worlds__gallery-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.about-worlds__gallery-bottom > div{
    position:relative;
}

.about-worlds__gallery-bottom > div:first-child{
    background-image:
        linear-gradient(135deg,#28241f,#73675a);
}

.about-worlds__gallery-bottom > div:last-child{
    background-image:
        linear-gradient(135deg,#090909,#444);
}

.about-event-caption{
    position:absolute;
    right:22px;
    bottom:22px;

    color:#fff;

    font-size:9px;
    line-height:1.55;
    letter-spacing:.18em;
}



/* =========================================================
   PRINCIPLES
========================================================= */

.about-principles{
    display:grid;

    grid-template-columns:
        1.15fr
        repeat(4,1fr);

    background:var(--about-black);
    color:#fff;

    padding:50px var(--pad);

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

.about-principles > *{
    padding:0 35px;

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

.about-principles > *:first-child{
    padding-left:0;
    border-left:0;
}

.about-principles__title .about-rule{
    margin-bottom:0;
}

.about-principles article h3{
    margin:0 0 16px;

    font-family:var(--serif);
    font-size:clamp(31px,2.6vw,48px);
    line-height:1;
    font-weight:400;
}

.about-principles article p{
    margin:0;

    font-size:10px;
    line-height:1.45;
    letter-spacing:.17em;
    text-transform:uppercase;

    color:rgba(255,255,255,.63);
}



/* =========================================================
   AUTHOR
========================================================= */

.about-author{
    min-height:580px;

    display:grid;
    grid-template-columns:34% 33% 33%;

    background:var(--about-paper);
}

.about-author__portrait,
.about-author__detail{
    background-size:cover;
    background-position:center;
    background-color:#252525;

    position:relative;
}

.about-author__portrait{
    background-image:
        linear-gradient(135deg,#222,#69635d);
}

.about-author__sidecopy{
    position:absolute;
    left:40px;
    top:42px;

    color:#fff;

    font-size:10px;
    line-height:1.5;
    letter-spacing:.24em;
}

.about-author__copy{
    padding:55px 55px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-author__copy h2{
    margin:0;

    font-family:var(--serif);
    font-size:clamp(55px,5vw,86px);
    font-weight:400;
    font-style:italic;

    line-height:.86;
    letter-spacing:-.045em;
}

.about-author__role{
    margin:28px 0 0;

    font-size:9px;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.about-author blockquote{
    max-width:440px;

    margin:8px 0 25px;

    font-family:var(--serif);
    font-size:24px;
    line-height:1.18;
    font-style:italic;
}

.about-author__text{
    max-width:470px;

    margin:0;

    font-size:13px;
    line-height:1.65;
}

.about-author__detail{
    background-image:
        linear-gradient(135deg,#161616,#777);
}

.about-author__detail:after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            145deg,
            transparent 0 45%,
            rgba(255,255,255,.12) 46% 49%,
            transparent 50%
        );
}

.about-author__detail p{
    position:absolute;
    right:42px;
    top:62px;

    z-index:2;

    font-family:var(--serif);
    font-size:27px;
    line-height:1.1;
    font-style:italic;

    color:#fff;

    transform:rotate(-8deg);
}

.about-author__detail span{
    position:absolute;
    right:42px;
    bottom:48px;

    z-index:2;

    color:#fff;

    font-size:10px;
    line-height:1.6;
    letter-spacing:.15em;
}



/* =========================================================
   CTA
========================================================= */

.about-cta{
    min-height:360px;

    padding:55px var(--pad);

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    color:#fff;

    background-color:#252525;
    background-size:cover;
    background-position:center;
}

.about-cta h2{
    margin:0;

    font-family:var(--serif);
    font-size:clamp(52px,5vw,88px);
    line-height:.91;
    letter-spacing:-.035em;
    font-weight:400;
}

.about-cta__button{
    min-width:255px;

    padding:18px 22px;

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

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    color:#fff;

    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;

    transition:
        background .2s ease,
        color .2s ease;
}

.about-cta__button:hover{
    background:#fff;
    color:#111;
}



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

@media(max-width:1080px){

    .about-hero{
        grid-template-columns:48% 52%;
    }

    .about-worlds{
        grid-template-columns:1fr 1fr;
    }

    .about-worlds__gallery{
        grid-column:1 / -1;
        min-height:550px;
    }

    .about-principles{
        grid-template-columns:1fr 1fr;
        gap:0;
    }

    .about-principles__title{
        grid-column:1 / -1;
        padding-bottom:35px;
    }

    .about-principles article{
        padding:35px;
        border-top:1px solid rgba(255,255,255,.16);
    }

    .about-author{
        grid-template-columns:1fr 1fr;
    }

    .about-author__detail{
        grid-column:1 / -1;
        min-height:420px;
    }

}


@media(max-width:720px){

    .about-hero{
        grid-template-columns:1fr;
    }

    .about-hero__copy{
        padding:
            145px
            22px
            55px;

        min-height:620px;
    }

    .about-hero h1{
        font-size:14vw;
    }

    .about-hero__image{
        min-height:75vw;
    }

    .about-hero__image:before{
        display:none;
    }

    .about-hero__side{
        right:22px;
        top:30px;
    }


    .about-worlds{
        display:block;
    }

    .about-worlds__photo{
        min-height:110vw;
    }

    .about-worlds__statement{
        padding:55px 22px;
    }

  .about-worlds__statement h2{
    font-size:clamp(44px,3.8vw,68px);
}

    .about-worlds__gallery{
        min-height:110vw;
    }


    .about-principles{
        display:block;
        padding:45px 22px;
    }

    .about-principles > *{
        padding:30px 0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.16);
    }

    .about-principles > *:first-child{
        border-top:0;
    }


    .about-author{
        display:block;
    }

    .about-author__portrait{
        min-height:115vw;
    }

    .about-author__copy{
        padding:55px 22px;
    }

 .about-author__copy h2{
    font-size:clamp(46px,4vw,72px);
}

    .about-author__detail{
        min-height:85vw;
    }


    .about-cta{
        min-height:520px;

        padding:50px 22px;

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

    .about-cta h2{
        font-size:14vw;
    }

}