* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55; color: #1f2933; background: #f7f5f0; }
main, header, footer { max-width: 1000px; margin: 0 auto; padding: 1.2rem; }
header { padding-top: 2.5rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .6rem; }
h2 { margin-top: 2.2rem; border-bottom: 2px solid #d9d2c3; padding-bottom: .3rem; }
.lead { font-size: 1.15rem; max-width: 42rem; }
.cover { width: 100%; max-width: 640px; height: auto; display: block; margin: 1rem 0;
  border: 1px solid #ddd6c5; border-radius: 6px; }
.btn { display: inline-block; background: #1b5e4b; color: #fff; text-decoration: none;
  padding: .8rem 1.4rem; border-radius: 6px; font-weight: 700; margin: .5rem 0; }
.btn:hover, .btn:focus { background: #144536; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid figure { margin: 0; background: #fff; border: 1px solid #ddd6c5; border-radius: 6px;
  padding: .5rem; }
.grid img { width: 100%; height: auto; display: block; }
.grid figcaption { font-size: .85rem; margin-top: .4rem; text-align: center; }
.note { font-size: .9rem; color: #52606d; }
a { color: #1b5e4b; }
@media (max-width: 480px) { h1 { font-size: 1.6rem; } .btn { display: block; text-align: center; } }