.main{ max-width:1280px; margin:0 auto; padding: 88px 64px 140px; }
.back-link{ font-size:0.85rem; color:var(--ink-soft); text-decoration:none; display:inline-block; margin-bottom:24px; }
.back-link:hover{ color:var(--wood-dark); }
.page-head{ margin-bottom:36px; }
.page-head h1{ font-size:2.1rem; margin:0 0 10px; }
.page-head p{ color:var(--ink-soft); max-width:66ch; margin:0; }

.mosaic-wall{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px;
}
.mosaic-wall img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius:2px; cursor:zoom-in;
  box-shadow: 0 4px 14px rgba(74,50,32,0.14); transition: transform .15s ease;
  background: var(--card-bg);
}
.mosaic-wall img:hover{ transform: scale(1.03); }

.load-more-row{ display:flex; align-items:center; gap:18px; margin-top:32px; }
.load-more-btn{
  background: var(--card-bg); border:1px solid var(--hairline); border-radius:6px;
  padding:12px 24px; font-size:0.9rem; color:var(--wood-dark); cursor:pointer;
}
.load-more-btn:hover{ background:#E9E0CB; }
.load-more-btn:disabled{ opacity:0.5; cursor:default; }
#progress-label{ font-size:0.82rem; color:var(--ink-soft); }

@media (max-width: 860px){
  .main{ padding:48px 24px 100px; }
  .mosaic-wall{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
}

/* ---------- lightbox with navigation ---------- */
.mosaic-lightbox{
  position:fixed; inset:0; background: rgba(10,8,6,0.94); z-index:250;
  display:none; align-items:center; justify-content:center;
}
.mosaic-lightbox.open{ display:flex; }
.mosaic-lightbox img{ max-width:88vw; max-height:88vh; object-fit:contain; }
.lightbox-close{
  position:absolute; top:24px; right:28px; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color:#F2ECDE;
  font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color:#F2ECDE;
  font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow.left{ left:20px; } .lightbox-arrow.right{ right:20px; }
.lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#D9CDB5; font-size:0.82rem; letter-spacing:.04em;
}
@media (max-width: 700px){
  .lightbox-arrow{ width:40px; height:40px; font-size:1.1rem; }
}