@font-face{font-family:Inter;src:url('/assets/inter.woff2') format('woff2');font-display:swap}
:root{--paper:#f7f5ed;--green:#273b30;--muted:#4c584e;--line:#c8cbbf}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--green);font:1rem/1.58 Inter,Arial,sans-serif;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
a:focus-visible{outline:3px solid #ad612f;outline-offset:4px}
.wrap{width:min(88%,1350px);margin-inline:auto}
.bar,.brand,nav{display:flex;align-items:center}
.bar{justify-content:space-between}
header .bar{min-height:86px;border-bottom:1px solid var(--line)}
.brand{font:1.5rem Georgia,serif;text-decoration:none;gap:10px}
.brand small{font:0.61rem Inter,sans-serif;letter-spacing:.1em;align-self:center;margin-left:-5px}
nav{gap:clamp(16px,3vw,42px)}
nav a{font-size:.91rem;text-decoration:none;padding-block:.6rem}
nav a:hover,nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.skip{position:fixed;top:-6rem;z-index:2;background:white;padding:.6rem 1rem}
.skip:focus{top:.5rem;left:.5rem}
main{flex:1}
.hero{display:grid;grid-template-columns:1.14fr 1fr;gap:7%;align-items:center;padding-block:clamp(42px,6vw,84px)}
h1,h2,.project-name,.closing,.email{font-family:Georgia,'Times New Roman',serif;font-weight:normal}
h1{font-size:clamp(3rem,5.15vw,5.5rem);letter-spacing:-.055em;line-height:1.03;margin:0}
h1 em{color:#506652}
.hero-copy p{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.68;margin:1.6rem 0 0}
.portrait{height:clamp(315px,31vw,475px);background:var(--green);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:42% center;display:block}
.projects{border-top:1px solid var(--green);display:grid;grid-template-columns:1fr 2.45fr;gap:4%;padding:2.4rem 0 3.7rem}
h2{font-size:clamp(1.8rem,2.6vw,2.8rem);letter-spacing:-.045em;margin:0;line-height:1.2}
ul{padding:0;margin:0;list-style:none}
li a{display:grid;grid-template-columns:1fr 1.35fr auto;align-items:center;gap:20px;padding:1.25rem 0;border-bottom:1px solid var(--line);text-decoration:none}
li:first-child a{padding-top:0}
.project-name{font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.04em;line-height:1.12}
.description{font-size:.91rem;color:var(--muted)}
.arrow{font-size:1.25rem}
li a:hover .project-name,.email:hover{text-decoration:underline;text-underline-offset:4px}
.closing{font-size:1.14rem;font-style:italic;margin:1.6rem 0 0;color:var(--muted)}
footer{background:var(--green);color:var(--paper)}
footer .bar{padding-block:1.4rem;font-size:.8rem}
.contact{min-height:min(70vh,720px)}
.email{display:inline-block;font-size:clamp(1.3rem,2.2vw,2.1rem);letter-spacing:-.035em;margin-top:2rem;text-underline-offset:6px}
@media(max-width:760px){
.wrap{width:90%}.hero{grid-template-columns:1fr;gap:2rem}.portrait{height:clamp(200px,46vw,300px)}
.projects{grid-template-columns:1fr;gap:1.5rem}.project-name{font-size:1.5rem}
}
@media(max-width:510px){
header .bar{min-height:68px}.brand{font-size:1.1rem;gap:6px}.brand img{width:28px;height:28px}.brand small{font-size:.49rem;margin-left:-3px}
nav{gap:12px}nav a{font-size:.82rem}.hero{padding-block:2.4rem}h1{font-size:clamp(2.8rem,10.8vw,3.5rem)}
li a{grid-template-columns:1fr auto;gap:6px}.description{grid-column:1;grid-row:2}.arrow{grid-column:2;grid-row:1/3}.projects{padding-bottom:2.4rem}
}