:root{--fg:#222;--soft:#6b6b6b;--rule:#ddd;--paper:#f6f3ee;--accent:#8a5a2b}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--fg);font:17px/1.65 Georgia,"Times New Roman",serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:34px 0 22px;border-bottom:1px solid var(--rule)}
.brand{font:600 15px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.menu a{font:14px "Helvetica Neue",Arial,sans-serif;letter-spacing:.06em;color:var(--soft);text-decoration:none;margin-left:26px}
.menu a:hover{color:var(--accent)}
.lead{padding:86px 0 56px;max-width:760px}.lead h1{font-weight:400;font-size:46px;line-height:1.15;margin:0 0 22px}
.lead p{color:var(--soft);font-size:20px}
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px;padding-bottom:80px}
.work .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#d9d2c5,#b9ae9c);margin-bottom:14px}
.work:nth-child(2) .ph{background:linear-gradient(135deg,#c9cfd2,#9fa9ad)}.work:nth-child(3) .ph{background:linear-gradient(135deg,#d6cbbb,#a99273)}
.work h3{font-weight:400;font-size:22px;margin:0 0 4px}.work small{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--soft);letter-spacing:.05em}
.text{max-width:700px;padding:56px 0 90px}.text h2{font-weight:400;font-size:34px;margin-top:0}
.foot{border-top:1px solid var(--rule);padding:26px 0 44px;font:13px "Helvetica Neue",Arial,sans-serif;color:var(--soft)}
.foot a{color:var(--soft)}
@media(max-width:640px){.lead h1{font-size:32px}.top{flex-direction:column;gap:14px}.menu a{margin:0 18px 0 0}}