*{box-sizing:border-box}
html{background:#111514;color:#f7f8f4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0}a{color:inherit;text-decoration:none}
header,main,footer{max-width:1600px;margin-inline:auto}
header{height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-size:21px;font-weight:620;letter-spacing:-.7px}
.about,footer{font-size:12px;color:#a6b2ad}
main{padding:0 18px;display:grid;gap:14px}
.project{position:relative;display:block;aspect-ratio:3 / 1;overflow:hidden;border-radius:4px;background:#20312c;isolation:isolate}
.project img{height:100%;width:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.3,1),filter .4s ease;filter:saturate(.85) brightness(.9)}
.project:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 38%,#0002 66%,#0009);z-index:1;pointer-events:none;transition:opacity .4s ease}
.caption{position:absolute;bottom:24px;left:28px;right:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;z-index:2;text-shadow:0 2px 18px #0007}
h1,h2{font-size:clamp(23px,3.1vw,44px);line-height:1.06;letter-spacing:-1px;font-weight:580;margin:0}
.caption span{font-size:30px;line-height:1;opacity:.65;transition:transform .35s ease,opacity .35s ease}
@media(hover:hover){.project:hover img{transform:scale(1.045);filter:saturate(1.08) brightness(1.02)}.project:hover:after{opacity:.8}.project:hover .caption span{transform:translate(4px,-4px);opacity:1}}
.project:focus-visible img{transform:scale(1.045);filter:saturate(1.08) brightness(1.02)}
.project:focus-visible .caption span{transform:translate(4px,-4px);opacity:1}
a:focus-visible{outline:3px solid #c4e8ff;outline-offset:4px}
.project:focus-visible{outline-offset:3px}
footer{padding:22px 28px 28px}footer a:hover,.about:hover{color:#fff}
@media(max-width:600px){header{height:58px;padding:0 14px}.wordmark{font-size:18px}.about{font-size:10px}main{padding:0 8px;gap:8px}.project{border-radius:3px}.caption{left:14px;right:14px;bottom:12px}h1,h2{font-size:clamp(18px,5.1vw,29px);letter-spacing:-.5px}.caption span{font-size:20px}footer{padding:18px 14px}}
@media(prefers-reduced-motion:reduce){.project img,.project:after,.caption span{transition:none}.project:hover img,.project:hover .caption span,.project:focus-visible img,.project:focus-visible .caption span{transform:none}}