*{box-sizing:border-box}
body{margin:0;font-family:Georgia,"Times New Roman",serif;color:#2d2a26;background:#f6f2ec;line-height:1.6}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid #e2d9cc}
.logo{font-size:22px;letter-spacing:.08em;text-decoration:none;color:#2d2a26}
nav a{margin-left:24px;color:#5c554c;text-decoration:none}
nav a:hover{color:#a86b4f}
main{max-width:1040px;margin:0 auto;padding:40px 24px}
.hero h1{font-size:38px;font-weight:normal;margin:0 0 8px}
.hero p{max-width:560px;color:#5c554c}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px;margin-top:40px}
.ph{aspect-ratio:1/1;border-radius:4px;margin-bottom:12px}
article h2{font-size:18px;font-weight:normal;margin:0}
article p{margin:4px 0;color:#6e665c;font-size:15px}
article span{color:#a86b4f}
.note{margin-top:48px;color:#6e665c;font-style:italic}
.text{max-width:680px}
.text h1{font-weight:normal}
.text h2{font-weight:normal;font-size:20px;margin-top:28px}
footer{text-align:center;padding:32px;color:#8a8175;font-size:14px;border-top:1px solid #e2d9cc}
footer a{color:#8a8175}
@media (max-width:600px){header{flex-direction:column;gap:8px}nav a{margin:0 10px}.hero h1{font-size:30px}}