/* ===========================
style.css
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Myanmar Text', serif;
    background:#ffffff;
    color:#111;
}


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

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

    padding:28px 40px;

    border:none;

}

header h1{

    font-size:2rem;
    font-weight:400;
    letter-spacing:.04em;

    color:white;

    text-shadow: 1px 1px 3px rgba(0,0,0,.8);

}

header span{

    font-size:20px;

    font-weight:300;

    margin-left:18px;

    color:white;

}



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

.hero{

    position:sticky;

    top:0;

    height:100vh;

    overflow:hidden;

    z-index:1;

}

.hero video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



/* ===========================
MAIN
=========================== */

main{

    position:relative;

    z-index:5;

    background:white;

}



/* ===========================
SEKCJE
=========================== */

.bio,
.work,
.review{

    padding:45px 40px;

    background:white;

}

.section-title{

    font-size:1.15rem;

    margin-bottom:18px;

    letter-spacing:.04em;

}



/* ===========================
BIO
=========================== */

.bio a{
    color:inherit;
    text-decoration:none;
}

.bio-box{
    width:100%;
    height:220px;
    border:1px solid black;
    overflow:hidden;
}

.bio-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease, filter .35s ease;
}

.bio a:hover .bio-box img{
    transform:scale(1.15);
    filter:brightness(1.20);
}


/* ===========================
GRID
=========================== */

.grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

.card{

    display:block;
    aspect-ratio:1;
    border:1px solid black;
    overflow:hidden;
    text-decoration:none;

}

.card img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease, filter .35s ease;

}

/* WORK */

.work .card:hover img{

    transform:scale(1.03);
    filter:brightness(1.12);

}

/* ===========================
WORK SUBTITLE
=========================== */

.work-subtitle{

    font-size:1.15rem;
    margin-top:40px;
    margin-bottom:18px;
    letter-spacing:.04em;

}

/* REVIEW */

.review-card{

    aspect-ratio:2/1;
    cursor:pointer;

}

.review-card{

    cursor:pointer;

}

.review-card:hover img{

    transform:scale(1.08);
    filter:brightness(1.12);

}


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

@media (max-width:1000px){

.grid{

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

}

header{

padding:22px;

}

.bio,
.work,
.review{

padding:35px 22px;

}

header h1{

font-size:1.4rem;

}

header span{

display:block;

margin-left:0;

margin-top:8px;

}

.hero{

top:84px;

}

}


@media (max-width:640px){

.grid{

grid-template-columns:1fr;

}

.bio-box{

height:170px;

}

}

/* ===========================
PODSTRONY
=========================== */

.home{

color:#111;

text-decoration:none;

transition:.25s;

}

.home:hover{

opacity:.5;

}

.page{

padding:60px 40px;

min-height:100vh;

background:white;

}

.page h2{

font-weight:400;

margin-bottom:40px;

font-size:2rem;

}

.page p{

font-size:1rem;

line-height:1.8;

max-width:900px;

margin-bottom:24px;

}

/* ===========================
BIO PAGE
=========================== */

.bio-page{

    padding:120px 40px 60px;

}

.bio-page h2{

    font-size:1.2rem;
    font-weight:400;
    margin-bottom:30px;

}

.bio-layout{

    display:grid;

    grid-template-columns:340px 1fr 1fr;

    gap:60px;

    align-items:start;

}

.bio-photo{

    border:1px solid black;

}

.bio-photo img{

    width:100%;
    display:block;

}

.bio-column{

    font-size:1rem;

    line-height:1.8;

}

.bio-column p{

    margin-bottom:30px;

}

.home{

    color:inherit;

    text-decoration:none;

}

.home:hover{

    opacity:.6;

}

.review-page{

    padding-top:120px;

}

.review-page img{

    width:60%;
    display:block;
    margin:0 auto;


}

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

.project-page{

    padding:120px 40px 80px;

}

.project-top{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:70px;

    align-items:start;

    margin-bottom:90px;

}

.project-poster{

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

}

.project-poster img{

    width:100%;

    display:block;

}

.project-text h2{

    font-size:1.4rem;

    font-weight:400;

    margin-bottom:30px;

}

.project-text{

    line-height:1.9;

    max-width:700px;

}

.project-gallery{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.project-gallery img{

    width:100%;

    max-width:1000px;

    margin:0 auto;

    display:block;

}

.project-notes{

    max-width:900px;

    margin:80px auto 0;

    line-height:1.9;

}

.project-notes h3{

    font-size:1.15rem;

    font-weight:400;

    margin-bottom:25px;

}

.project-notes p{

    margin-bottom:25px;

}

.social-links{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.social-links a{

    width:55px;

    height:55px;

    border:1px solid black;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.social-links a:hover{

    background:black;

}

.social-links img{

    width:40px;

    height:40px;

    object-fit:contain;

    transition:.25s;

}

.social-links a:hover img{

    filter:invert(1);

}

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

.footer{

    width:100%;

    padding:60px 40px;

    background:#111;

    color:white;

    text-align:center;

    font-size:18px;

}

.footer a{

    color:white;

    text-decoration:none;

}

.footer a:hover{

    text-decoration:underline;

}

.site-credit{
    text-align:center;
    font-size:12px;
    color:#777;
    padding:30px 20px;
}

.site-credit a{
    color:inherit;
    text-decoration:none;
}

.site-credit a:hover{
    text-decoration:underline;
}