*{box-sizing:border-box}body{margin:0;font:16px/1.6 Georgia,"Times New Roman",serif;color:#2b2622;background:#f6f1ea}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 6vw;border-bottom:1px solid #ddd2c4}
.logo{font-size:20px;color:#2b2622;text-decoration:none;letter-spacing:.02em}.logo span{color:#9a6b43;font-style:italic}
nav a{margin-left:20px;color:#5b5047;text-decoration:none}nav a:hover{color:#9a6b43}
main{max-width:1040px;margin:0 auto;padding:0 6vw}
.hero{padding:56px 0 32px}.hero h1{font-size:38px;font-weight:normal;margin:0 0 14px}.hero p{max-width:640px;color:#5b5047}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;padding:16px 0 40px}
.grid h3{font-weight:normal;margin:12px 0 4px}.grid p{margin:0;color:#7a6e63;font-size:14px}
.ph{height:170px;border-radius:2px}.a{background:linear-gradient(135deg,#d9c7b0,#a78b6c)}.b{background:linear-gradient(135deg,#c9d1c3,#7f8f78)}.c{background:linear-gradient(135deg,#d6cfd8,#8c7f93)}
.text{padding:8px 0 24px}.text h2{font-weight:normal}
footer{padding:28px 6vw;color:#8a7f74;font-size:13px;border-top:1px solid #ddd2c4;margin-top:24px}