/* ===========================================================
   MARHARYTA ZHURUNOVA
   PART 1
   RESET / VARIABLES / TYPOGRAPHY / HEADER / INTRO
=========================================================== */

:root{

    --bg:#F7F2EC;
    --surface:#F1EAE3;

    --text:#7B5542;
    --text-light:#9A7561;

    --line:rgba(123,85,66,.12);

    --container:860px;
    --text-width:560px;

    --transition:.25s ease;

}

/* ================= RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--text);

    font-family:"Manrope",sans-serif;
    font-size:13px;
    line-height:1.9;
    font-weight:400;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}

img{

    display:block;
    width:100%;

}

a{

    color:inherit;
    text-decoration:none;
    transition:var(--transition);

}

a:hover{

    opacity:.75;

}

::selection{

    background:#c6ab98;
    color:#fff;

}

/* ================= LAYOUT ================= */

.container{

    width:min(92%,860px);
    margin:0 auto;

}

.narrow{

    max-width:560px;

}

/* ================= TYPOGRAPHY ================= */

h1,
h2,
h3{

    color:var(--text);
    font-weight:500;

}

h1{

    font-size:28px;
    line-height:1.25;
    margin-bottom:12px;

}

h2{

    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:26px;

}

h3{

    font-size:14px;
    margin-bottom:8px;

}

p{

    color:var(--text-light);
    margin-bottom:20px;

}

/* ================= HEADER ================= */

.site-header{

    position:sticky;
    top:0;
    z-index:100;

    background:rgba(247,242,236,.96);
    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--line);

}

.header-container{

    height:78px;

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

}

.logo{

    display:flex;
    align-items:center;

}

.logo-name{

    font-size:13px;
    line-height:1.15;
    letter-spacing:.18em;
    text-transform:uppercase;

}

.navigation{

    display:flex;
    gap:32px;

}

.navigation a{

    position:relative;
    font-size:13px;

}

.navigation a.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:100%;
    height:1px;

    background:var(--text);

}

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

.hero{

    padding:90px 0 80px;

}

.hero-content{

    max-width:560px;

}

.hero-content h1{

    margin-bottom:32px;

}

/* ================= SECTION TITLE ================= */

.section-title{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    padding-bottom:18px;
    margin-bottom:32px;

    border-bottom:1px solid var(--line);

}

.section-title h2{

    margin:0;

}

.section-title a{

    font-size:12px;
    color:var(--text-light);

}

.section-title a:hover{

    color:var(--text);

}

section{

    margin-bottom:90px;

}
/* ===========================================================
   PART 2
   HOME WORKS / PORTFOLIO / PROJECT PAGE / GALLERY
=========================================================== */


/* =========================
   SELECTED WORKS
========================= */

.selected-works{

    padding-top:10px;

}

.works-grid{

    display:grid;

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

    gap:24px;

}

.work-card{

    position:relative;
    overflow:hidden;

    background:var(--surface);

}

.work-card img{

    display:block;

    width:100%;

    aspect-ratio:1.3/1;

    object-fit:cover;

    transition:.35s ease;

}

.work-card:hover img{

    transform:scale(1.03);

}

.overlay{

    position:absolute;
    inset:0;

    background:rgba(247,242,236,.88);

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

    padding:18px;

    opacity:0;

    transition:.25s ease;

}

.work-card:hover .overlay{

    opacity:1;

}

.overlay h3{

    font-size:15px;
    font-weight:500;

    margin-bottom:4px;

}

.overlay span{

    font-size:12px;
    color:var(--text-light);

}

.project-type{

    margin-bottom:6px;

    font-size:12px;
    color:var(--text-light);

}


/* =========================
   PORTFOLIO
========================= */

.portfolio{

    padding:70px 0 90px;

}

.portfolio h1{

    margin-bottom:42px;

}

.portfolio-grid{

    display:grid;

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

    gap:24px;

}


/* =========================
   PROJECT PAGE
========================= */

.project-page{

    padding:70px 0 90px;

}

.project-cover{

    margin-bottom:56px;

}

.project-cover img{

    display:block;

    width:100%;

    height:auto;

}

.project-header{

    max-width:560px;

    margin:0 auto 34px;

}

.project-header h1{

    margin-bottom:8px;

}

.project-year{

    font-size:14px;
    color:var(--text-light);

}

.project-text{

    max-width:560px;

    margin:0 auto 56px;

}

.project-text p{

    margin-bottom:24px;

}


/* =========================
   DEFAULT PROJECT GALLERY
========================= */

.project-gallery{

    display:grid;

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

    gap:22px;

}

.gallery-item{

    display:block;

}

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:2.6/1;

    object-fit:cover;

    transition:.25s ease;

}

.gallery-item:hover img{

    opacity:.9;

}


/* =========================
   VERTICAL GALLERY
   (тільки якщо додати
   class="project-gallery project-gallery-vertical")
========================= */

.project-gallery-vertical{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.project-gallery-vertical .gallery-item img{

    width:100%;

    height:auto;

    aspect-ratio:auto;

    object-fit:contain;

}


/* =========================
   GLIGHTBOX
========================= */

.gslide-image img{

    object-fit:contain !important;

}
/* ===========================================================
   PART 3
   CONTACT / CV / FOOTER / RESPONSIVE
=========================================================== */


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

.contact{

    border-top:1px solid var(--line);

    padding:50px 0 40px;

}

.contact .container{

    max-width:860px;

}

.contact h2{

    margin-bottom:30px;

}

.contact-grid{

    display:grid;

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

    gap:20px;

}

.contact-grid>div{

    text-align:center;

}

.contact h3{

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:10px;

}

.contact a{

    color:var(--text-light);

    line-height:1.7;

}

.contact a:hover{

    color:var(--text);

}

.contact-note{

    margin-top:8px;

    font-size:12px;

    line-height:1.6;

    color:var(--text-light);

}


/* =========================
   CV
========================= */

.cv{

    padding:70px 0 90px;

}

.cv h1{

    margin-bottom:50px;

}

.cv-section{

    margin-bottom:56px;

}

.cv-section h2{

    font-size:16px;

    margin-bottom:18px;

}

.cv-section ul{

    list-style:none;

}

.cv-section li{

    margin-bottom:10px;

    color:var(--text-light);

    line-height:1.8;

}


/* =========================
   FOOTER
========================= */

footer{

    border-top:1px solid var(--line);

    padding:18px 0;

}

.footer-container{

    display:flex;

    justify-content:flex-start;

}

footer p{

    margin:0;

    font-size:12px;

    color:var(--text-light);

}


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

@media (max-width:900px){

    .works-grid,
    .portfolio-grid{

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

    }

    .project-gallery{

        grid-template-columns:1fr;

    }

    .contact-grid{

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

        row-gap:30px;

    }

}

@media (max-width:640px){

    body{

        font-size:14px;

    }

    .header-container{

        height:auto;

        padding:20px 0;

        flex-direction:column;

        gap:18px;

        align-items:flex-start;

    }

    .navigation{

        gap:18px;

        flex-wrap:wrap;

    }

    .hero{

        padding:55px 0;

    }

    h1{

        font-size:24px;

    }

    .works-grid,
    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .project-header,
    .project-text{

        max-width:100%;

    }

}
/* ===========================================================
   PART 4
   OPTIONAL COMPONENTS
   (тільки якщо потрібні окремим сторінкам)
=========================================================== */


/* =========================
   PROJECT GALLERY
   вертикальні фотографії
========================= */

.project-gallery-vertical{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.project-gallery-vertical .gallery-item{

    display:block;

}

.project-gallery-vertical .gallery-item img{

    width:100%;

    height:auto;

    display:block;

}


/* =========================
   PROJECT GALLERY
   вузькі панорами
========================= */

.project-gallery-panorama{

    display:grid;

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

    gap:22px;

}

.project-gallery-panorama .gallery-item img{

    width:100%;

    aspect-ratio:2.8/1;

    object-fit:cover;

}


/* =========================
   PROJECT GALLERY
   квадратні роботи
========================= */

.project-gallery-square{

    display:grid;

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

    gap:22px;

}

.project-gallery-square .gallery-item img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

}


/* =========================
   VIDEO
========================= */

.video-wrapper{

    max-width:860px;

    margin:50px auto;

}

.video-wrapper iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

}


/* =========================
   PDF BUTTON
========================= */

.download-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border:1px solid var(--line);

    color:var(--text);

    transition:.25s ease;

}

.download-button:hover{

    background:var(--surface);

}


/* =========================
   EXHIBITION LIST
========================= */

.exhibition-list{

    margin-top:36px;

}

.exhibition-list h3{

    margin-bottom:14px;

    font-size:14px;

}

.exhibition-list ul{

    list-style:none;

}

.exhibition-list li{

    margin-bottom:10px;

    color:var(--text-light);

}


/* =========================
   QUOTES
========================= */

blockquote{

    max-width:560px;

    margin:40px auto;

    padding-left:22px;

    border-left:2px solid var(--line);

    color:var(--text);

    font-size:16px;

    line-height:1.8;

}


/* =========================
   CAPTIONS
========================= */

.caption{

    margin-top:10px;

    font-size:12px;

    color:var(--text-light);

    text-align:center;

}


/* =========================
   SPACERS
========================= */

.space-40{

    height:40px;

}

.space-60{

    height:60px;

}

.space-80{

    height:80px;

}


/* =========================
   GLIGHTBOX
========================= */

.gslide-image img{

    object-fit:contain !important;

    max-height:92vh !important;

}

.goverlay{

    background:rgba(15,15,15,.95) !important;

}

/* =========================
   PROJECT COVER
========================= */

.project-cover{

    max-width:620px;
    margin:0 auto 60px;

}

.project-cover img{

    display:block;
    width:100%;
    height:auto;

}


/* =========================
   UNIVERSAL PROJECT GALLERY
========================= */

.project-gallery{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;

}

.gallery-item{

    width:180px;
    height:180px;

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

    background:var(--surface);

}

.gallery-item img{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    transition:.25s ease;

}

.gallery-item:hover img{

    opacity:.9;

}