:root{
--base-bg:#e0dfda;
}

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

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

html{
font-size:16px;
}

body{
background:var(--base-bg);
font-family:'Work Sans',sans-serif;
color:#111;
font-size:1rem;
line-height:1.6;
transition:opacity 0.4s ease;
}

img{
max-width:100%;
height:auto;
display:block;
}


/* =========================
PAGE TRANSITIONS
========================= */

body.page-loading{
opacity:0;
}

body.page-loaded{
opacity:1;
}


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

.header{
position:fixed;
top:0;
left:0;
width:100%;
padding:2.2vh 5vw;
display:flex;
justify-content:space-between;
align-items:center;
background:transparent;
transition:
background 0.4s ease,
padding 0.4s ease;
z-index:1000;
}

.header.scrolled{
background:var(--base-bg);
}

.header.shrink-header{
padding:1.4vh 5vw;
}

.logo{
font-family:'Cinzel',serif;
font-size:1.5rem;
letter-spacing:0.3rem;
}

.logo a{
text-decoration:none;
color:#111;
}

nav a{
margin-left:2rem;
text-decoration:none;
color:#111;
font-size:0.9rem;
}


/* =========================
INTRO
========================= */

.intro{
height:100vh;
background:linear-gradient(to bottom,#c7c7c7,#e0dfda);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:5vw;
}

.intro-content{
max-width:55rem;
transition:0.4s ease;
}

.main-title{
font-family:'Cinzel',serif;
font-size:clamp(2.5rem,5vw,5rem);
letter-spacing:0.4rem;
}

.designation{
font-size:clamp(0.8rem,1.2vw,1rem);
letter-spacing:0.2rem;
margin-top:1rem;
}

.line{
width:50%;
margin:2rem auto;
border-top:1px solid #333;
}

.philosophy{
font-family:'Fraunces',serif;
font-style:italic;
font-size:clamp(0.9rem,1vw,1rem);
margin-top:2rem;
}


/* INTRO SCROLL EFFECT */

.intro.shrink{
align-items:flex-start;
padding-top:20vh;
}

.intro.shrink .main-title{
font-size:1.5rem;
letter-spacing:0.2rem;
}

.intro.shrink .designation,
.intro.shrink .line,
.intro.shrink .philosophy{
opacity:0;
transform:translateY(-1rem);
}


/* =========================
FEATURED
========================= */

.featured{
padding:10vh 8vw;
}

.featured-image{
height:60vh;
background:#ccc;
margin-top:2rem;
}


/* =========================
RESEARCH
========================= */

.research-preview{
padding:10vh 8vw;
}

.research-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
gap:2rem;
margin-top:2rem;
}


/* =========================
MISSION
========================= */

.mission{
padding:10vh 8vw;
max-width:50rem;
}


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

.footer-contact{
background:#111;
color:#e0dfda;
padding:8vh 6vw;
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.footer-nav{
display:flex;
gap:2rem;
}

.footer-nav a{
color:#e0dfda;
text-decoration:none;
font-size:0.9rem;
}

.contact-right{
max-width:30rem;
text-align:right;
}

.connect-title{
font-weight:300;
font-size:1.6rem;
margin-bottom:1.5rem;
}

form{
display:flex;
flex-direction:column;
align-items:flex-end;
}

textarea{
background:transparent;
border:1px solid #e0dfda;
color:#e0dfda;
padding:1rem;
min-height:8rem;
width:100%;
resize:none;
font-family:'Work Sans',sans-serif;
margin-bottom:1rem;
}

button{
background:#e0dfda;
color:#111;
border:none;
padding:0.8rem 1.5rem;
cursor:pointer;
font-weight:500;
}

.email-link{
display:block;
margin-top:2rem;
color:#e0dfda;
text-decoration:none;
opacity:0.8;
}

.email-link:hover{
opacity:1;
}

.footer-bottom{
margin-top:5rem;
text-align:center;
font-size:0.8rem;
}


/* =========================
PHONE (portrait)
Only applies on small screens, desktop stays the same
========================= */

@media (max-width:768px){

.header{
padding:1.6vh 5vw;
}

.logo{
font-size:1.2rem;
letter-spacing:0.2rem;
}

nav a{
margin-left:0.9rem;
font-size:0.8rem;
}

.footer-top{
flex-direction:column;
gap:3rem;
}

.contact-right{
max-width:100%;
width:100%;
text-align:left;
}

form{
align-items:flex-start;
}

}