/* =========================
IMAGE PROTECTION (SAFE)
========================= */

img{
-webkit-user-drag:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

/* allow text selection */
body{
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}

/* =========================
GLOBAL
========================= */

html{overflow-y:scroll;}

body{
background:#d7d1c6;
margin:0;
font-family:"Helvetica Neue","HelveticaNeue-Light","Helvetica Neue Light",Helvetica,Arial,sans-serif;
font-weight:300;
color:#4b4741;
}

.container{
max-width:1100px;
margin:0 auto;
padding:38px 18px 80px;
}

/* =========================
NAME
========================= */

.name{
font-size:48px;
letter-spacing:.29em;
text-decoration:none;
color:#4b4741;
display:block;
margin-bottom:22px;
}

/* =========================
NAV
========================= */

nav ul{
display:grid;
grid-template-columns:repeat(4,1fr);
list-style:none;
padding:0;
margin:0 0 30px;
}

nav li:nth-child(1){text-align:left;}
nav li:nth-child(2){text-align:center;}
nav li:nth-child(3){text-align:center;}
nav li:nth-child(4){text-align:right;}

nav li:nth-child(2) a{transform:translateX(-3px);}
nav li:nth-child(3) a{transform:translateX(3px);}

nav a{
text-decoration:none;
font-size:29px;
font-style:oblique;
letter-spacing:.04em;
color:#4b4741;
opacity:.65;
transition:opacity .35s ease;
}

nav a.active{opacity:1;}
nav a:hover{opacity:.95;}

/* =========================
ABOUT HERO FADE
========================= */

.about-hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:30px;
align-items:center;
opacity:0;
transform:translateY(18px);
animation:heroFadeSoft 1.2s cubic-bezier(.16,.8,.34,1) forwards;
}

.about-image img{width:100%;display:block;}

.about-text{
font-size:19px;
line-height:1.7;
}

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

.hero{
width:100%;
margin:36px 0 12px;
display:flex;
justify-content:center;
}

.hero-stage{
width:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.hero-stage #hero-img{
max-width:100%;
max-height:560px;
object-fit:contain;
display:block;
opacity:0;
animation:heroFadeSoft 1.35s cubic-bezier(.16,.8,.34,1) forwards;
}

.hero-stage:has(#hero-img){
height:560px;
overflow:hidden;
}

.hero.fade-out #hero-img{
opacity:0;
transform:scale(1.01);
transition:opacity .8s ease, transform .8s ease;
}

@keyframes heroFadeSoft{
from{opacity:0;}
to{opacity:1;}
}

/* =========================
CAPTION
========================= */

.hero-caption{
margin:12px 0 32px;
display:flex;
gap:22px;
font-style:oblique;
font-size:19px;
letter-spacing:.04em;
opacity:.74;
transition:opacity .45s ease, transform .45s ease;
}

.hero.fade-out + .hero-caption{
opacity:0;
transform:translateY(8px);
}

/* =========================
ARROWS
========================= */

.hero-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:38px;
color:rgba(70,66,60,.7);
background:none;
padding:8px 12px;
cursor:pointer;
user-select:none;
transition:opacity .25s ease, transform .25s ease;
z-index:5;
}

.hero-nav:hover{
opacity:.95;
transform:translateY(-50%) scale(1.05);
}

.hero-prev{ left:8px; }
.hero-next{ right:8px; }

/* =========================
MASONRY
========================= */

.masonry{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:34px;
}

.thumb{
aspect-ratio:1/1;
overflow:hidden;
cursor:pointer;
position:relative;
opacity:0;
transform:translateY(16px);
animation:gridFade 1s ease forwards;
}

@keyframes gridFade{
to{opacity:1;transform:translateY(0);}
}

.thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.thumb-title{
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(to top, rgba(0,0,0,.28), transparent);
color:white;
font-size:17px;
padding:8px 12px;
opacity:0;
transition:opacity .45s ease, transform .45s ease;
font-style:oblique;
letter-spacing:.035em;
transform:translateY(4px);
}

.thumb:hover .thumb-title{
opacity:.78;
transform:translateY(0);
}

/* =========================
MODAL BASE
========================= */

.modal{
display:none;
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.78);
align-items:center;
justify-content:center;
animation:modalFadeSoft .4s ease;
}

@keyframes modalFadeSoft{
from{opacity:0;}
to{opacity:1;}
}

/* =========================
IMAGE MODAL
========================= */

.modal-image{
background:#d7d1c6;
padding:28px 32px;
max-width:940px;
width:90%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

#aboutModal img{
max-width:100%;
max-height:80vh;
object-fit:contain;
}

#aboutModalImg{
max-width:100%;
max-height:80vh;
object-fit:contain;
opacity:0;
transition:opacity .6s cubic-bezier(.16,.8,.34,1);
}

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

.modal-inner{
background:#d7d1c6;
padding:40px 46px;
width:min(940px,92vw);
max-height:86vh;
overflow:auto;
box-sizing:border-box;
}

.cv-grid{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:70px;
row-gap:10px;
}

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

.contact-wrap{
max-width:640px;
margin:90px auto 0;
display:flex;
flex-direction:column;
gap:28px;
}

.contact-row{
display:flex;
align-items:center;
gap:18px;
font-style:italic;
font-size:22px;
}

.contact-row label{min-width:190px;}

.contact-row input,
.contact-row textarea{
flex:1;
border:1px solid #8c867d;
background:transparent;
padding:10px 12px;
font-size:18px;
font-style:italic;
font-family:inherit;
}

.contact-row textarea{height:120px;resize:none;}

.send-btn{
border:1px solid #8c867d;
background:transparent;
padding:10px 22px;
font-size:18px;
font-style:italic;
cursor:pointer;
opacity:.6;
transition:.25s;
}

.send-btn:hover{
opacity:.95;
border-color:#6f6a61;
}

/* =========================
MOBILE
========================= */

@media (max-width:700px){

.hero-stage:has(#hero-img){
height:auto;
overflow:visible;
}

.container{
padding:22px 18px 60px;
}

nav ul{
grid-template-columns:1fr;
gap:6px;
margin-bottom:14px;
}

nav li{text-align:left !important;}

nav a{
font-size:22px;
display:inline-block;
}

.hero{
margin:14px 0 6px;
}

.hero-stage #hero-img{
max-height:58vh;
}

.hero-caption{
flex-direction:column;
gap:1.25px;
margin:10px 0 18px;
}

.masonry{
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:18px;
}

.about-hero{
grid-template-columns:1fr;
gap:18px;
}

.contact-row{
flex-direction:column;
align-items:flex-start;
}

.contact-row input,
.contact-row textarea{
width:100%;
}

}