*{box-sizing:border-box}body{margin:0;font:17px/1.6 Georgia,serif;color:#222;background:#f7f6f2}
header{display:flex;justify-content:space-between;align-items:center;padding:24px 5vw;border-bottom:1px solid #e3e0d8}
.brand{font-size:22px;color:#111;text-decoration:none;letter-spacing:.04em}nav a{margin-left:22px;color:#555;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
nav a:hover{color:#000}main{max-width:1180px;margin:0 auto;padding:32px 5vw}h1{font-weight:normal;font-size:34px}
.intro p{max-width:620px;color:#555}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
figure{margin:0}figure img,.portrait{width:100%;height:auto;display:block;border-radius:2px}figcaption{font-size:14px;padding-top:8px;color:#333}
figcaption span{color:#888;margin-left:6px}article{max-width:680px;margin-bottom:42px}time{color:#999;font-size:14px;font-family:Helvetica,Arial,sans-serif}
article h2{font-weight:normal;margin:4px 0}.portrait{max-width:520px;margin:10px 0 20px}a{color:#2c5d63}
footer{text-align:center;color:#888;font-size:13px;padding:40px 5vw;border-top:1px solid #e3e0d8;font-family:Helvetica,Arial,sans-serif}
@media(max-width:600px){header{flex-direction:column;gap:10px}nav a{margin:0 10px}}