/* Minimal stylesheet to approximate general layout and style for local mirror */
:root{--wrap-width:1060px;--accent:#111}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter, 'Helvetica Neue', Arial, sans-serif;margin:0;color:#111;background:#fff;line-height:1.6}

/* Typography */
h1,h2,h3,h4,h5,h6{margin:0.5em 0;line-height:1.2}
h2{font-size:clamp(1.5rem,5vw,2.5rem)}
p{margin:0.5em 0 1em}

/* Layout */
.wrap{max-width:var(--wrap-width);margin:0 auto;padding:clamp(12px,4vw,20px)}
section{padding:clamp(16px,6vw,40px) 0}

/* Header */
.site-header{border-bottom:1px solid #eee;padding:clamp(12px,3vw,18px) 0;position:sticky;top:0;background:#fff;z-index:100}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.site-title{margin:0;font-size:clamp(16px,4vw,18px);letter-spacing:2px;flex-grow:1}
.site-title a{color:var(--accent);text-decoration:none}
.site-nav{display:flex;gap:clamp(12px,2vw,18px);flex-wrap:wrap}
.site-nav a{color:#333;text-decoration:none;font-size:clamp(12px,2vw,14px);white-space:nowrap}
.site-nav a:hover{text-decoration:underline}

/* Main content */
.main-content{padding:clamp(24px,6vw,40px) 0}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(150px,40vw,240px),1fr));gap:clamp(12px,3vw,16px)}
.gallery img{width:100%;height:auto;display:block;border-radius:4px;cursor:pointer}
.gallery figure{margin:0}
.gallery figcaption.caption{margin-top:clamp(6px,2vw,8px);font-size:clamp(12px,2vw,14px);color:#333;text-align:center}

/* Lightbox styles */
#lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:9999;padding:clamp(12px,4vw,20px)}
#lightbox.open{display:flex}
#lightbox .lb-inner{position:relative;max-width:100%;max-height:100%;padding:clamp(8px,3vw,12px);display:flex;flex-direction:column;align-items:center}
#lightbox .lb-img{max-width:100%;max-height:clamp(300px,80vh,90vh);border-radius:6px;display:block;object-fit:contain}
#lightbox .lb-caption{color:#fff;margin-top:clamp(8px,2vw,10px);text-align:center;font-size:clamp(12px,2vw,14px);word-wrap:break-word}
#lightbox .lb-close{position:absolute;right:clamp(8px,2vw,12px);top:clamp(8px,2vw,12px);background:transparent;color:#fff;border:0;font-size:clamp(24px,5vw,28px);cursor:pointer;z-index:10000}

/* Lightbox prev/next buttons */
.lb-prev, .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);color:#fff;border:0;padding:clamp(8px,2vw,14px) clamp(10px,2vw,14px);font-size:clamp(20px,4vw,28px);cursor:pointer;border-radius:4px;display:none}
.lb-prev{left:clamp(8px,2vw,12px)}
.lb-next{right:clamp(8px,2vw,12px)}
.lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,0.6)}
@media (min-width:768px){.lb-prev, .lb-next{display:block}}

/* Image transitions */
img{transition:opacity .35s ease;opacity:1}
img.loaded{opacity:1}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:clamp(18px,4vw,30px) 0;margin-top:clamp(24px,6vw,40px);text-align:center}
.site-footer p{font-size:clamp(12px,2vw,14px);margin:0.5em 0}

/* Utility */
.small{font-size:clamp(11px,2vw,12px);color:#666}

/* Responsive breakpoints */
@media (max-width:480px){
  .site-header .wrap{flex-direction:column;gap:clamp(8px,2vw,12px)}
  .site-nav{width:100%;justify-content:center}
  .site-nav a{margin:0 clamp(4px,1vw,8px)}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(clamp(120px,35vw,180px),1fr))}
}

@media (max-width:768px){
  .wrap{padding:clamp(12px,3vw,16px)}
  section{padding:clamp(12px,4vw,24px) 0}
  .main-content{padding:clamp(16px,4vw,24px) 0}
  #lightbox .lb-inner{max-width:95vw}
}

@media (min-width:1400px){
  :root{--wrap-width:1200px}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}