:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #24312e;
  background: #f5f3ee;
}

* { box-sizing: border-box; }
body { margin: 0; }
.gallery-page { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 64px; }
.back-link { color: #41675d; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.gallery-header { padding: 48px 0 28px; }
.gallery-header h1 { margin: 8px 0; font-size: clamp(2.4rem, 6vw, 4rem); }
.gallery-header p { color: #697570; }
.gallery-header .eyebrow { color: #41675d; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gallery-grid a { overflow: hidden; min-height: 200px; border-radius: 8px; background: #e2e1db; }
.gallery-grid img { display: block; width: 100%; height: 250px; object-fit: cover; transition: transform 180ms ease; }
.gallery-grid a:hover img { transform: scale(1.035); }
.lightbox { position: fixed; max-width: min(92vw, 1200px); max-height: 92vh; padding: 48px 12px 12px; border: 0; border-radius: 8px; background: #17211f; }
.lightbox::backdrop { background: rgb(0 0 0 / 82%); }
.lightbox img { display: block; max-width: 88vw; max-height: 80vh; object-fit: contain; }
.close-button { position: absolute; top: 7px; right: 12px; border: 0; color: white; background: transparent; font-size: 2rem; cursor: pointer; }
@media (max-width: 540px) {
  .gallery-page { width: min(100% - 28px, 1100px); padding-top: 20px; }
  .gallery-header { padding: 34px 0 20px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gallery-grid a { min-height: 150px; }
  .gallery-grid img { height: 170px; }
}