html, body, div, figure{
margin:0;
padding:0;
font-weight: 300; 
}

body{
background: url("../images/bg-gradient.png") repeat-x bottom;
background-size: 6px;
}

a{
text-decoration:none;
color:black;
}

a:hover{
color:#EBACFF;
}

a.visible{
font-weight:700;
text-decoration:underline;
}

a.visible:hover{
font-weight:700;
text-decoration:underline;
color: #EFBEFF;
}

.container{
	display:flex;
	flex-direction:row;
	max-width: 1300px;
	margin:0 auto;
	margin-top:2rem;
	font-family:'Sora';
	padding:1rem;
	gap:2rem;
}

#header{
	display: flex;
	flex-direction:column;
	justify-content:end;
	position:relative;
	top:0px;
	order:1;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-transform:uppercase;
	font-family: 'Sora';
	font-size:0.75rem;
	gap:1rem;
	padding-top:20px;
}

#header #subtitle{
	display:flex;
	gap: 2rem;
}

#main{
}

#project-list{
	display:flex;
	flex-direction:column;
	gap:2.2rem;
}

.project-list-item{
	position:relative;
}

.project-list-item a{
	position:relative;
	font-size:5rem;
	color:black;
	text-decoration:none;
	line-height:5.5rem;
	font-family:'Chap';
	letter-spacing: -2px;
}

.project-list-item .category{
	text-transform:uppercase;
	font-size:0.75rem;
}


.project-list-item > .hero-preview{
	position:absolute;
	right:0px;
	top:-150%;
	display:none;
	width:600px;
}

.project-list-item:hover > a{
	color:#EBACFF;
}

.project-list-item:hover > .hero-preview{
	display:block;
	z-index:-1;
}

.section-head{
	border-bottom:1px solid black;
	font-size:0.75rem;
	font-family: 'Sora';
	font-weight:700;
	padding-bottom:0.25rem;
	margin-bottom:0.5rem;
}

.row, .row-mobile{
	display:flex;
	flex-direction:row;
}

.col, .col-mobile{
	display:flex;
	flex-direction:column;
}

.w10{
	width:10%;
	
}

.w20{
	width:20%;
}

.w25{
	width:25%;
}

.w30{
	width:30%;
}


.w33{
	width:33%;
}

.w40{
	width:40%;
}

.w50{
	width:50%;
}

.w60{
	width:60%;
}

.w60{
	width:60%;
}

.w66{
	width:66%;
}

.w70{
	width:70%;
}

.w75{
	width:75%;
}

.w80{
	width:80%;
}

.w90{
	width:90%;
}

.w100{
	width:100%;
}

.padd-b0{
padding-bottom: 0;
}

.padd-b-xxs{
padding-bottom:1rem;
}

.padd-b-xs{
padding-bottom:2rem;
}

.padd-b-sm{
padding-bottom:4rem;
}

.padd-b-m{
padding-bottom:6rem;
}

.padd-b-lg{
padding-bottom:10rem;
}

.gap1{
gap: 1rem;
}

.gap2{
gap: 2rem;
}

.gap3{
gap: 3rem;
}

.txt-align-right{
text-align:right;
}

.hide{
display:none;
}

strong{
font-weight:700;
}

#footer{
font-family: 'Sora';
font-size:0.75rem;
text-transform:uppercase;
max-width:1440px;
width:100%;
}

#hero{
position: relative;
width:100%;
}

.gradient {
 background-image: linear-gradient(to bottom, transparent, #EFBEFF);
 width:100%;
 height:8rem;
 position:absolute;
 bottom:0px;
}

.hero-img{
width:100%;
height:100%;
max-height:33rem;
display:block;
object-fit: cover;
}

.headline-overlap{
margin-top: -4rem;
z-index:1000;
}


h1{
font-size:7.5rem;
font-weight:300;
line-height:6.875rem;
font-family:'Chap';
}

h2{
font-family:"jaf-lapture-display", serif;
font-style:italic;
font-size:2.2rem;
line-height:3.125rem;
font-weight:400;
text-transform:uppercase;
letter-spacing: 0px;
margin-bottom: 20px;
}

h3{
font-family:"jaf-lapture-display", serif;
font-style:italic;
font-size:1.25rem;
line-height:1.4375rem;
font-weight:400;
text-transform:uppercase;
margin-bottom: 10px;
}

.content p{
font-size:0.85rem;
line-height:1.625rem;
font-family:'Sora';
font-weight:200;
margin-bottom: 5px;
}

figcaption{
font-size:0.75rem;
font-weight: 200;
}

.border-top1{
border-top: 1px solid black;
}

.desktop-hide{
display:none;
}

.mobile-hide{
display:flex;
}

#menu-mobile{
background:#000;
z-index:10000;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
padding:1rem;
box-sizing: border-box;
padding-top:3rem;
display:none;
}

#menu-mobile a{
color: #EFBEFF
}

#menu-mobile.nav-showing{
display:flex;
}


@media screen and (max-width: 768px){

.pink-bg-mobile{
background: #EFBEFF;
}

#header{
display:none;
}

.row{
flex-direction:column;
}

.row-mobile{
display:flex;
flex-direction:row;
}

.txt-align-right{
text-align:left;
}

.w10, .w20, .w25, .w30, .w33, .w40, .w50, .w60, .w66, .w70, .w75, .w80, .w90, .w100{
width:100%;
}

.row-mobile .w10{
width:10%;
}

.row-mobile .w90{
width:90%;
}

.mobile-hide{
display:none;
}

.desktop-hide{
display:flex;
}

.project-list-item:hover > img{
	display:none;
	z-index:0;
}

.project-list-item a{
	font-size:2.8rem;
	line-height:3rem;
}

a:hover{
color:#EFBEFF;
}

.project-list-item:hover > a{
color:#FFF;
}

.headline-overlap{
margin-top: -1.5rem;
z-index:1000;
}

h1{
font-size: 3.3rem;
line-height: 3.3rem;
margin-bottom: 10px;}

h2{
font-size: 2rem;
line-height: 2.2rem;
}

}