:root{--ink:#0b0b0b;--paper:#f7f7f5;--line:#cececa;--muted:#656565}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid rgba(11,11,11,.16);background:rgba(247,247,245,.9);backdrop-filter:blur(12px)}
a{color:inherit;text-decoration:none}
.wordmark{font:500 20px "EB Garamond",serif;letter-spacing:.02em}
.topbar nav{display:flex;gap:24px;font:400 12px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.topbar nav a:hover{opacity:.5}
main{padding:0 28px}
.intro{min-height:76vh;display:grid;grid-template-columns:minmax(260px,.78fr) 1.6fr;gap:5vw;align-items:end;padding:8vh 0 7vh}
.portrait{aspect-ratio:4/5;background:#eee;overflow:hidden;position:relative}
.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 38%;filter:grayscale(1);transition:filter .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.portrait:hover img{filter:grayscale(0);transform:scale(1.018)}
.eyebrow,.section-head p{font:400 12px Inter,sans-serif;text-transform:uppercase;letter-spacing:.09em}
.intro h1{font-family:"EB Garamond",serif;font-size:clamp(4.2rem,10.5vw,10.5rem);line-height:.78;letter-spacing:-.055em;font-weight:400;margin:22px 0 34px}
.lead{max-width:650px;font-family:"EB Garamond",serif;font-size:clamp(1.4rem,2.35vw,2rem);line-height:1.32;font-weight:400}
.contact-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;font:400 13px Inter,sans-serif}
.contact-row a{border-bottom:1px solid}
.work{padding:90px 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:16px}
.section-head h2{font-family:"EB Garamond",serif;font-size:clamp(2.4rem,4.5vw,4.5rem);font-weight:400;letter-spacing:-.04em;margin:0}
.section-head p{color:var(--muted)}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0}
.filter button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:9px 15px;font:400 12px Inter,sans-serif;letter-spacing:.04em;cursor:pointer}
.filter button:hover,.filter button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{position:relative;aspect-ratio:2/3;overflow:hidden;background:#111;color:white}
.card[hidden]{display:none}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(.94);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.card:hover img,.card:focus-within img{transform:scale(1.045);filter:grayscale(0) contrast(1)}
.fallback{position:absolute;inset:0;padding:20px;background:var(--tone);display:flex;align-items:flex-end}
.fallback span{font-family:"EB Garamond",serif;font-size:clamp(1.65rem,2.65vw,3rem);font-weight:400;letter-spacing:-.035em;line-height:.92}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(transparent 22%,rgba(0,0,0,.88));opacity:0;transform:translateY(10px);transition:.28s ease}
.card:hover .overlay,.card:focus-within .overlay,.card.open .overlay{opacity:1;transform:none}
.overlay h3{font-family:"EB Garamond",serif;font-size:1.45rem;font-weight:500;line-height:1.02;margin:0 0 10px}
.overlay p{font:400 12px/1.45 Inter,sans-serif;margin:0}
.overlay .role{color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.overlay .meta{color:#c8c8c8}
.bio{margin:70px 0 120px;padding:30px 0;border-top:1px solid var(--ink);display:grid;grid-template-columns:2fr 1fr;gap:10vw;align-items:end}
.bio p{font-family:"EB Garamond",serif;font-size:clamp(1.65rem,3.2vw,3.2rem);font-weight:400;letter-spacing:-.025em;line-height:1.2;margin:0}
.bio a{font:400 13px Inter,sans-serif;border-bottom:1px solid;width:max-content}
footer{margin:0 28px;padding:18px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font:400 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:920px){.grid{grid-template-columns:repeat(3,1fr)}
.intro{grid-template-columns:1fr 1.5fr}
.intro h1{font-size:clamp(3.2rem,9vw,6rem)}
}
@media(max-width:660px){.topbar,main{padding-left:16px;padding-right:16px}
.topbar nav{gap:14px}
.intro{display:flex;flex-direction:column;align-items:stretch;padding-top:32px}
.portrait{width:58vw;align-self:flex-end}
.intro-copy{width:100%}
.intro h1{font-size:18vw;margin-top:16px}
.grid{grid-template-columns:repeat(2,1fr);gap:6px}
.section-head{display:block}
.filter{margin:22px 0}
.card .overlay{padding:13px}
.bio{grid-template-columns:1fr;gap:28px}
footer{margin:0 16px}
.section-head p{line-height:1.5}
}
@media(hover:none){.overlay{opacity:1;transform:none;background:linear-gradient(transparent 48%,rgba(0,0,0,.92))}
}