/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
  background-color: #fafafa;
  color: #333;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  background-color: #eee;
  padding: 10px;
  border-radius: 8px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  color: #0077cc;
}


/* Basic reset and typography */
* { box-sizing: border-box; }
html,body{height:100%;}
body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.4; color:#111; background:#fff; padding:1rem;}
header{max-width:1100px;margin:0 auto 1rem;padding:0 1rem}
nav{display:flex;gap:1rem;margin-bottom:.5rem}
nav a{color:inherit;text-decoration:none}
nav a[aria-current="page"]{font-weight:700}

/* Masonry grid using CSS columns (simple and responsive) */
.masonry{column-width: 300px; column-gap: 1rem; max-width:1100px;margin:0 auto;padding:1rem}
.masonry-item{display:inline-block;width:100%;margin:0 0 1rem;break-inside:avoid}
.masonry-item img{width:100%;height:auto;display:block;border-radius:8px}
.masonry-item figcaption{font-size:.9rem;margin-top:.4rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem;background:rgba(0,0,0,0.8);visibility:hidden;opacity:0;transition:opacity .2s}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.lightbox-content{max-width:90vw;max-height:80vh;overflow:hidden;text-align:center}
.lightbox-content img{max-width:100%; max-height:70vh; display:block;margin:0 auto}
.lightbox p{color:#fff;margin-top:.5rem}
.lightbox-close, .lightbox-prev, .lightbox-next{position:relative;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
.lightbox-prev, .lightbox-next{font-size:2.5rem}

/* Controls */
.gallery-controls{max-width:1100px;margin:0 auto;padding:0 1rem 1rem;display:flex;align-items:center;gap:.5rem}

@media (max-width:480px){
.masonry{column-width: 200px}
.lightbox-content img{max-height:60vh}
}