:root { --ink:#1a1a1a; --paper:#fdfdfb; --line:#e5e3dd; }
* { box-sizing:border-box; }
body {
  margin:0 auto; max-width:760px; padding:clamp(2rem,6vw,5rem) 1.5rem;
  font:16px/1.8 -apple-system,"Helvetica Neue","PingFang TC",sans-serif;
  color:var(--ink); background:var(--paper);
}
h1 { font-size:clamp(2rem,6vw,3rem); margin:0 0 .5rem; letter-spacing:-.02em; }
h2 { font-size:1.1rem; margin:4rem 0 1rem; padding-bottom:.5rem;
     border-bottom:1px solid var(--line); font-weight:600; }
.lead { font-size:1.15rem; color:#555; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
figure { margin:0; }
.ph { aspect-ratio:4/3; background:#eceae4; border-radius:4px; }
figcaption { margin-top:.5rem; font-size:.9rem; color:#666; }
a { color:var(--ink); }
footer { margin-top:5rem; padding-top:1.5rem; border-top:1px solid var(--line);
         font-size:.85rem; color:#888; }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(2,1fr);} }