:root{--black:#000;--white:#fff;--width:100%;--height:100%;color:var(--black);background-color:var(--white);font-family:Playfair Display,serif;font-weight:400;line-height:1.5}div,*{box-sizing:border-box}html{margin:0;padding:0}body{text-align:justify;margin:0;padding:0;font-size:18px;line-height:1.65;overflow-x:hidden;@media screen and (width<=640px){font-size:16px}}p{margin:0}a{color:inherit}[data-target]{cursor:pointer;&:hover{opacity:.5}}.nav{z-index:100;background:#d9ecec;padding:80px 0 0;line-height:1;position:fixed;&:after{content:" ";background:linear-gradient(#d9ecec,#0000);width:100%;height:40px;position:absolute;top:100%;left:0}& .nav__inner{justify-content:space-between;display:flex;& .nav__title{& h1{margin:0;font-size:50px;font-weight:400}}& .nav__links{text-transform:uppercase;align-items:center;display:flex;& .nav__link{margin-left:10px;&:not(:last-child){&:after{content:"-";padding-left:10px}}}}}@media screen and (width<=1024px){padding:60px 0 0}@media screen and (width<=640px){padding:20px 0 0;& .nav__inner{flex-direction:column;& .nav__title{& h1{font-size:40px}}& .nav__links{& .nav__link{padding:8px 0;&:first-child{margin-left:0}}}}}}.wrapper{z-index:2;width:100%;& .container{width:100%;margin:0 auto;padding:0 80px;@media screen and (width<=1024px){padding:0 70px}@media screen and (width<=640px){padding:0 30px}}}.section{width:100%;min-height:100vh;padding:190px 0 60px;position:relative;&#section-intro{& p{width:42.5%;& [data-target]{text-decoration:underline}}}& .section__title{text-transform:uppercase;font-size:20px;font-style:italic}& .section__next{line-height:1;font-size:px;text-decoration:underline;position:absolute;bottom:60px;left:0}& .section__links{flex-direction:column;padding:20px 0;display:flex}@media screen and (width<=1024px){padding:150px 0 60px;&#section-intro{& p{text-align:left;width:65%}}}@media screen and (width<=640px){padding:115px 0 30px;&#section-intro{& p{text-align:left;width:100%}}}}.project{min-height:50vh;margin:20px 0 0;display:flex;&:not(:last-child){margin-bottom:200px}& .project__details{width:50%;& .project__date{font-size:16px}& .project__title{font-size:26px;line-height:1}& .project__role{font-style:italic}& .project__description{margin:20px 0;padding-right:120px}}& .project__images{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;width:50%;height:auto;padding:0 0 0 20px;display:flex;& .project__gallery{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;display:flex;& .project__image-wrapper{width:calc(30% - 20px);height:auto;margin:0 20px 20px 0;display:flex;& .project__image,& .project__video{object-fit:cover;cursor:pointer;user-select:none;width:100%;height:100%;&:hover{opacity:.5}}&[data-size=small]{width:calc(20% - 20px)}&[data-size=large]{width:calc(60% - 20px)}&:has(.project__image:hover),&:has(.project__video:hover){background-color:#000}}}}@media screen and (width<=1024px){flex-direction:column;&:not(:last-child){margin-bottom:100px}& .project__details{width:100%;margin-bottom:20px;& .project__description{padding-right:0}}& .project__images{width:100%;padding:0}}@media screen and (width<=640px){&:not(:last-child){margin-bottom:80px}& .project__details{& .project__description{text-align:left}}}}.background{z-index:-1;pointer-events:none;background:linear-gradient(#d9ecec,#a3afaf);width:100%;height:100%;position:fixed;top:0;left:0;& .background__canvas{&:after{content:" ";z-index:1;background:linear-gradient(#d9ecec,#0000 75%);width:100%;height:100%;position:absolute;top:0;left:0}}}.gallery{z-index:100;user-select:none;background-color:#d9ecec;width:100%;height:100%;position:fixed;top:0;left:0;& .gallery__inner{justify-content:center;align-items:center;width:100%;height:100%;padding:150px 200px;display:flex;& .gallery__projects{width:100%;height:100%;position:relative;& .gallery__project{width:100%;height:100%;position:absolute;top:0;left:0;& .gallery__project-item{width:100%;height:100%;transition:opacity .25s,transform .5s;position:absolute;top:0;left:0;& img,& video{object-fit:contain;width:100%;height:100%}&:not([data-active="1"]){pointer-events:none;user-select:none;&:not([data-next="1"]):not([data-previous="1"]){display:none}&[data-next="1"]{opacity:0;transform:translate(100%)}&[data-previous="1"]{opacity:0;transform:translate(-100%)}}}}}}& .gallery__close,& .gallery__next,& .gallery__previous{cursor:pointer;z-index:1;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;&:hover{opacity:.5}&.gallery__close{text-transform:uppercase;padding:60px 80px;top:0;right:0}&.gallery__next{width:150px;height:100px;font-size:30px;top:50%;right:200px;transform:translate(100%,-50%)}&.gallery__previous{width:150px;height:100px;font-size:30px;top:50%;left:200px;transform:translate(-100%,-50%)}}&:has(.gallery__project[data-active="1"][data-length="1"]){& .gallery__next,& .gallery__previous{display:none}}&:not([data-active="1"]){pointer-events:none;display:none}@media screen and (width<=1024px){& .gallery__inner{padding:120px}& .gallery__close,& .gallery__next,& .gallery__previous{&.gallery__close{text-transform:uppercase;padding:60px 80px;top:0;right:0}&.gallery__next{width:120px;height:100px;font-size:30px;top:50%;right:120px;transform:translate(100%,-50%)}&.gallery__previous{width:120px;height:100px;font-size:30px;top:50%;left:120px;transform:translate(-100%,-50%)}}}@media screen and (width<=667px){& .gallery__inner{padding:30px 40px}& .gallery__close,& .gallery__next,& .gallery__previous{&.gallery__close{background-color:#d9ecec;padding:30px 40px 10px 15px}&.gallery__next{width:40px;height:100px;font-size:30px;top:50%;right:40px;transform:translate(100%,-50%)}&.gallery__previous{width:40px;height:100px;font-size:30px;top:50%;left:40px;transform:translate(-100%,-50%)}}}}[data-visible]{transition:opacity .2s;&[data-visible="0"]{opacity:0}}@keyframes sp1{0%{opacity:0}5%{opacity:1}60%{opacity:0}}@keyframes sp2{0%{opacity:0}10%{opacity:1}65%{opacity:0}}@keyframes sp3{0%{opacity:0}15%{opacity:1}70%{opacity:0}}@keyframes sp4{0%{opacity:0}20%{opacity:1}75%{opacity:0}}@keyframes sp5{0%{opacity:0}25%{opacity:1}80%{opacity:0}}@keyframes sp6{0%{opacity:0}30%{opacity:1}85%{opacity:0}}@keyframes sp7{0%{opacity:0}35%{opacity:1}90%{opacity:0}}@keyframes sp8{0%{opacity:0}40%{opacity:1}95%{opacity:0}}.loading-screen{z-index:999;background:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;& .loading-screen__inner{display:flex;&>div{animation-duration:1.75s;animation-timing-function:step-end;animation-iteration-count:infinite;&:first-child{animation-name:sp1}&:nth-child(2){animation-name:sp2}&:nth-child(3){animation-name:sp3}&:nth-child(4){animation-name:sp4}&:nth-child(5){animation-name:sp5}&:nth-child(6){animation-name:sp6}&:nth-child(7){animation-name:sp7}&:nth-child(8){animation-name:sp8}}}}