:root { --maxw: 1100px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans SC", sans-serif; margin: 0; color: #222; }
header { max-width: var(--maxw); margin: 20px auto 0; padding: 0 16px; }
.grid { 
  max-width: var(--maxw); margin: 10px auto 40px; padding: 0 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.card { margin: 0; border-radius: 12px; overflow: hidden; background: #fafafa; border: 1px solid #eee; }
.card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.card figcaption { padding: 8px 10px; font-size: 14px; color: #555; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 95vw; max-height: 80vh; display: block; }
.lightbox p { color: #ddd; margin-top: 10px; }
#close { position: absolute; top: 14px; right: 14px; font-size: 28px; padding: 6px 12px; border: none; border-radius: 8px; background: #fff; cursor: pointer; }