:root { --gap: 28px; --maxw: 1180px; --fg: #111; --bg: #fff; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }
a { color: inherit; text-decoration: none; }

.header { max-width: var(--maxw); margin: 48px auto 24px; padding: 0 20px; display:flex; align-items:center; justify-content: space-between; }
.brand { font-size: 28px; letter-spacing: 0.5px; font-weight: 700; }
.brand::after { content: '.'; }

.nav a { margin-left: 20px; opacity: 0.7; }
.nav a:hover { opacity:1; }

.grid { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card { position: relative; background:#eee; overflow: hidden; border-radius: 12px; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; transition: transform .4s ease; }
.card:hover img { transform: scale(1.02); }
.card .overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start; padding: 14px; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45)); color:#fff; opacity:0; transition: opacity .3s ease; font-size:14px; }
.card:hover .overlay { opacity:1; }

.footer { max-width: var(--maxw); margin: 0 auto 60px; padding: 0 20px; display:flex; justify-content:flex-end; gap: 24px; opacity:.75; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.96); display: none; align-items: center; justify-content: center; z-index: 50; }
.lightbox.open { display:flex; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 86vh; border-radius: 10px; }
.lightbox .close, .lightbox .prev, .lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(255,255,255,.08); color:#fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.lightbox .close { top: 40px; right: 40px; transform: none; }
.lightbox .prev { left: 40px; }
.lightbox .next { right: 40px; }
.lightbox .meta { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color:#ddd; font-size: 14px; text-align:center; padding: 8px 12px; background: rgba(0,0,0,.35); border-radius: 8px; }

/* Responsive */
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .header { margin: 28px auto 16px; }
  .brand { font-size: 24px; }
  .grid { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
  .footer { justify-content:center; }
}