.hero{

min-height:
calc(100vh - 90px);

display:flex;

flex-direction:column;

justify-content:flex-start;

padding-top:
clamp(50px,7vh,90px);

}




.hero h1{

font-size:
clamp(50px,7vw,110px);

letter-spacing:-4px;

}





.intro{

margin-top:25px;


font-size:
clamp(20px,2vw,32px);


max-width:900px;

}





.roles{

margin-top:35px;


font-size:
clamp(13px,1.2vw,18px);


line-height:2;


letter-spacing:1px;


color:var(--muted);

}







/* Experience */


.experience-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(280px,1fr)
);



gap:

clamp(30px,5vw,80px);


}




.experience-grid h3{


font-size:
clamp(18px,1.5vw,24px);


margin-bottom:20px;


font-weight:500;


}







/* Selected Work */


.work-item{


border-top:

1px solid var(--border);


padding:
clamp(20px,2vw,35px) 0;


cursor:pointer;


}



.work-item:last-child{

border-bottom:

1px solid var(--border);

}




.work-item h3{


font-size:

clamp(24px,2.2vw,38px);


font-weight:400;


}





.work-info{


max-height:0;


overflow:hidden;


opacity:0;


transition:


max-height .5s ease,

opacity .4s ease,

padding .4s ease;


}




.work-item:hover .work-info{


max-height:250px;


opacity:1;


padding-top:25px;


}







/* Photography */


/* Photography Masonry */

.album{

width:100%;

column-width:300px;

column-gap:
clamp(25px,3vw,50px);

}



figure{

display:inline-block;

width:100%;

margin:0 0 clamp(25px,3vw,45px);

break-inside:avoid;

background:var(--bg);

padding:14px;

box-shadow:
0 15px 40px rgba(0,0,0,.15);

}



figure img{

width:100%;

height:auto;

display:block;

object-fit:initial;

}



figcaption{

padding:15px 5px 5px;

font-family:
"Playfair Display",
serif;

font-size:clamp(14px,1vw,18px);

}



.dark figure{

background:#161616;

}



gap:

clamp(25px,4vw,60px);



margin-top:50px;


}





figure{


background:white;


padding:

clamp(10px,1vw,18px);


box-shadow:

0 20px 45px rgba(0,0,0,.15);


transition:.35s;


}





.dark figure{


background:#161616;


}




figure:hover{


transform:

translateY(-10px);


}




figure img{


width:100%;


height:auto;


display:block;


}





figcaption{


padding:15px 5px 5px;


font-family:

"Playfair Display",

serif;


font-size:

clamp(14px,1vw,18px);


}







/* Contact */


.contact-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(220px,1fr)
);



gap:

clamp(25px,5vw,70px);



margin-top:40px;


}




.contact-grid a{


font-size:

clamp(16px,1.3vw,22px);


}






@media(max-width:600px){


.hero h1{

letter-spacing:-2px;

}




}

.roles{

position:relative;

}


.destroyer{

color:#a855f7;

font-style:italic;

cursor:pointer;

position:relative;

transition:.3s;

}



.destroyer:hover{

color:#c084fc;

text-shadow:
0 0 15px rgba(168,85,247,.5);

}



#joke-box{

position:absolute;

bottom:calc(100% + 12px);

left:50%;


transform:
translateX(-50%)
translateY(8px);


background:var(--bg);

color:var(--text);


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


padding:10px 18px;


border-radius:12px;


font-size:14px;


font-style:italic;


white-space:nowrap;


opacity:0;


pointer-events:none;


transition:.25s;


box-shadow:
0 15px 40px rgba(0,0,0,.25);

}



#joke-box.show{

opacity:1;


transform:
translateX(-50%)
translateY(0);

}