:root{
--bg:#faf7f1;
--panel:#fffdf9;
--text:#1f1d1a;
--muted:#6b675f;
--accent:#6f8f4e;
--line:#e7dfd3;
}

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

html{
scroll-behavior:smooth;
}

body{
background:linear-gradient(
180deg,
#faf7f1 0%,
#f4efe7 100%
);

color:var(--text);

font-family:Inter,sans-serif;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

.topbar{
padding:32px 6vw;

letter-spacing:.35em;

font-size:.78rem;

font-weight:500;

color:var(--accent);
}

.shell{

max-width:1400px;

margin:auto;

padding:0 6vw 80px;

display:grid;

grid-template-columns:
1.15fr
0.85fr;

gap:72px;
}

.left{
padding-right:40px;
}

.right{

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

padding-left:56px;
}

.name{

font-family:"Cormorant Garamond",serif;

font-size:clamp(
5rem,
11vw,
8.5rem
);

font-weight:500;

line-height:0.98;

letter-spacing:-0.05em;

margin-bottom:36px;
}

.role{

color:var(--accent);

text-transform:uppercase;

letter-spacing:.18em;

font-size:.82rem;

font-weight:500;

margin-bottom:24px;
}

.tagline{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-style:italic;

line-height:1.25;

max-width:550px;

margin-bottom:10px;
}

.portrait-wrap{

margin:48px 0;
}

.portrait-wrap img{

width:min(
430px,
100%
);

aspect-ratio:3/4;

object-fit:cover;

object-position:center 20%;

display:block;

border-radius:50% / 38%;

box-shadow:
0 20px 60px rgba(
0,
0,
0,
0.08
);
}

.bio{

max-width:560px;

font-size:1.1rem;

line-height:1.9;
}

.bio p{
margin-bottom:24px;
}

.section-label{

margin-top:20px;

margin-bottom:22px;

font-size:.8rem;

font-weight:600;

letter-spacing:.3em;

color:var(--accent);
}

.entry{

padding:28px 0;

border-top:1px solid var(--line);
}

.entry h2{

font-family:
"Cormorant Garamond",
serif;

font-size:3rem;

font-weight:500;

margin-bottom:8px;
}

.entry p{

color:var(--muted);

line-height:1.9;

font-size:1.05rem;
}

.areas{

display:grid;

grid-template-columns:
1fr
1fr;

gap:14px 28px;

margin-bottom:50px;
}

.areas span{

padding:10px 0;

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

font-size:.95rem;
}

.contact{

padding-top:8px;
}

.contact p{

font-size:1.2rem;

font-weight:500;

letter-spacing:.01em;
}

footer{

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

padding:24px;

text-align:center;

font-family:
"Cormorant Garamond",
serif;

font-style:italic;

font-size:1.4rem;

background:#fffdf9;
}

@media(max-width:900px){

.shell{

grid-template-columns:
1fr;

gap:48px;
}

.right{

border-left:none;

padding-left:0;
}

.name{

font-size:4.8rem;
}

.areas{

grid-template-columns:
1fr;
}

.portrait-wrap img{

width:100%;
max-width:420px;
}
}