/* ==================================================
   SWEA KITTEL
   STYLE.CSS
================================================== */


/* ---------- HOME ---------- */

.hero{

    max-width:1280px;
    margin:100px auto 180px;
    padding:0 40px;

    display:flex;
    flex-direction:column;
    gap:140px;

}

.hero img{

    width:100%;
    display:block;

}


/* ---------- WORKS ---------- */

.works-grid{

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

    gap:80px;

    margin-top:60px;

}

.work-preview{

    margin:0;

}

.work-preview h2{

    font-size:18px;
    font-weight:400;

    margin-bottom:28px;

}

.work-preview img{

    width:100%;
    display:block;

    transition:opacity .3s ease;

}

.work-preview img:hover{

    opacity:.9;

}


/* ---------- GALLERY ---------- */

.gallery{

    display:grid;

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

    gap:80px;

    margin-top:40px;

}

.artwork{

    margin:0;

}

.artwork img{

    width:100%;
    display:block;

    cursor:pointer;

    transition:opacity .3s ease;

}

.artwork img:hover{

    opacity:.9;

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

.about{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:100px;

    align-items:start;

}

.about img{

    width:100%;
    display:block;

}

.statement{

    max-width:650px;

}

.statement p{

    margin-bottom:24px;

}

.cv{

    margin-top:120px;

}

.cv-entry{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:30px;

    margin-bottom:34px;

}



/* ==================================================
   EXHIBITIONS
================================================== */

.exhibitions{

    max-width:900px;

}

.exhibition{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:30px;

    margin-bottom:18px;

}

.publications{

    margin-top:140px;
    
}

.publications h2{
    margin-bottom:40px;
}

.collections{

    margin-top:120px;

}
.collections h2{
    margin-bottom:40px;
}

.exhibition-images{

    display:grid;

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

    gap:80px;

    margin-top:120px;

}

.exhibition-images img{

    width:100%;

    display:block;

}



/* ==================================================
   CONTACT
================================================== */

.contact{

    max-width:500px;

}

.contact p{

    margin-bottom:20px;

}



/* ==================================================
   LINKS
================================================== */

a{

    transition:opacity .25s ease;

}

a:hover{

    opacity:.55;

}
/* ==================================================
   LIGHTBOX
================================================== */

.lightbox{

    position:fixed;
    inset:0;

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

    background:rgba(255,255,255,.98);

    z-index:9999;

}

.lightbox.open{

    display:flex;

}

.lightbox-overlay{

    position:absolute;
    inset:0;

}

.lightbox-content{

    position:relative;

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

    max-width:90vw;
    max-height:90vh;

    z-index:2;

}

.lightbox-image{

    max-width:82vw;
    max-height:75vh;

    object-fit:contain;

}

.lightbox-info{

    width:100%;
    max-width:700px;

    margin-top:24px;

    text-align:left;

}

.lightbox-info h2{

    font-size:18px;
    font-weight:400;

    margin-bottom:8px;

}

.lightbox-info p{

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

    margin:0;

}

.lightbox-close{

    position:absolute;

    top:-55px;
    right:0;

    border:none;
    background:none;

    cursor:pointer;

    font-size:36px;
    font-weight:300;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;
    background:none;

    cursor:pointer;

    font-size:44px;

    font-weight:300;

    width:60px;
    height:60px;

}

.lightbox-prev{

    left:-100px;

}

.lightbox-next{

    right:-100px;

}

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:hover{

    opacity:.45;

}


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

@media (max-width:1100px){

    .gallery{

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

        gap:60px;

    }

    .exhibition-images{

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

        gap:60px;

    }

}


@media (max-width:900px){

    .works-grid{

        grid-template-columns:1fr;

        gap:100px;

    }

    .about{

        grid-template-columns:1fr;

        gap:60px;

    }

    .cv-entry{

        grid-template-columns:1fr;

        gap:8px;

    }

    .lightbox-prev{

        left:10px;

    }

    .lightbox-next{

        right:10px;

    }

    .lightbox-image{

        max-width:92vw;
        max-height:68vh;

    }

}


@media (max-width:700px){

    .hero{

        margin-top:70px;

        padding:0 24px;

        gap:80px;

    }

    .gallery{

        grid-template-columns:1fr;

        gap:50px;

    }

    .exhibition-images{

        grid-template-columns:1fr;

        gap:50px;

    }

}
/* ---------- ARTIST STATEMENT ---------- */

.artist-statements{

    margin-top:180px;

}

.artist-statements h2{

    font-size:24px;
    font-weight:400;

    margin-bottom:60px;

}

.statement-columns{

    display:flex;

    justify-content:space-between;

    gap:160px;

}

.statement-language{

    max-width:420px;

}

.statement-language h3{

    font-size:16px;
    font-weight:400;

    margin-bottom:24px;

}

.statement-language p{

    line-height:1.8;

}

@media (max-width:900px){

    .statement-columns{

        flex-direction:column;

        gap:80px;

    }

}
.statement h3{

    font-size:16px;
    font-weight:400;

    margin-top:40px;
    margin-bottom:18px;

}

.statement h3:first-child{

    margin-top:0;

}

.statement p{

    max-width:700px;
    line-height:1.8;

    margin-bottom:40px;

}
.cv h2{

    margin-bottom:30px;

}