*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,Arial,sans-serif;background:#f8f7f3;color:#111}
img{width:100%;display:block}
.side{position:fixed;left:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:10}
.side a{text-decoration:none;color:#666;text-transform:uppercase;font-size:.8rem;letter-spacing:.12em}
.hero{min-height:100vh;padding:6vw;display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:end}
.hero h1{font-family:Georgia,serif;font-size:clamp(4rem,10vw,9rem);line-height:.9;font-weight:400}
.hero p{margin-top:2rem;font-size:1.2rem;color:#666}
.hero img{height:85vh;object-fit:cover}
.chapter{padding:4vw 8vw 5vw}
.chapter-title{font-size:clamp(2rem,11vw,5rem);font-weight:800;letter-spacing:-.05em;margin-bottom:2.5rem}
.feature{margin-bottom:8rem}
.feature img{width:100%;height:75vh;object-fit:cover}
.feature.portrait{max-width:520px}
.feature.right{margin-left:auto}
.caption{margin-top:1rem}
.caption h2{font-size:2rem}
.caption p{color:#666}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.mosaic div:nth-child(1){grid-column:span 8}
.mosaic div:nth-child(2){grid-column:span 4}
.mosaic div:nth-child(3){grid-column:span 5}
.mosaic div:nth-child(4){grid-column:span 7}
.mosaic div:nth-child(5){grid-column:span 6}
.mosaic div:nth-child(6){grid-column:span 6}
.mosaic img,.contactsheet img{aspect-ratio:4/3;object-fit:cover;filter:grayscale(100%);transition:.4s}
.mosaic div:hover img,.contactsheet div:hover img{filter:grayscale(0)}
.mosaic span,.contactsheet span{display:block;margin-top:.7rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}
.contactsheet{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer{padding:8vw;border-top:1px solid #ddd}
@media(max-width:900px){
.side{display:none}
.hero{grid-template-columns:1fr}
.hero img{height:60vh}
.mosaic,.contactsheet{grid-template-columns:1fr}
.mosaic div{grid-column:auto!important}
}