:root{
  --lp-max:1200px;
  --lp-container-pad:clamp(12px,2.2vw,20px);
  --lp-section-gap:clamp(16px,3vw,24px);

  --lp-surface:#202020;
  --lp-stroke:#2a2a2a;
  --lp-accent:#ffbdbd;

  --lp-gallery-gap:clamp(6px,1vw,10px);
  --lp-gallery-radius:12px;
  --lp-gallery-img-bg:#1d1d1d;
  --lp-gallery-hover-shadow:0 10px 24px rgba(0,0,0,.35);
}

body{background:var(--lp-surface)}

.lp-section{
  max-width:var(--lp-max);
  width:100%;
  margin-inline:auto;
  padding-inline:var(--lp-container-pad);
  margin-top:var(--lp-section-gap);
}




.lp-gallery .lp-g-head{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:8px;margin:0 0 clamp(8px,1.2vw,12px);text-align:right;
}
.lp-gallery .lp-g-head h2{margin:0;font-size:clamp(20px,3vw,28px);font-weight:700}
.lp-gallery .lp-g-head small{color:#c6d0de;font-size:13px;opacity:.9}

/* Masonry */
.lp-gallery .lp-g-grid{
  display:block !important;
  column-count:2;
  column-gap:var(--lp-gallery-gap);
}
@media (min-width:1024px){
  .lp-gallery .lp-g-grid{column-count:3}
}

.lp-gallery figure{margin:0}
.lp-gallery .lp-g-item{
  display:block;
  break-inside:avoid;
  margin:0 0 var(--lp-gallery-gap);
  position:relative;border:1px solid var(--lp-stroke);
  border-radius:var(--lp-gallery-radius);overflow:hidden;
  background:var(--lp-surface);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s ease,box-shadow .25s ease;
}
.lp-gallery .lp-g-item:hover{
  transform:translateY(-1px);
  border-color:var(--lp-accent);
  box-shadow:var(--lp-gallery-hover-shadow);
}

/* Natural image ratio */
.lp-gallery .lp-g-thumb{background:var(--lp-gallery-img-bg)}
.lp-gallery .lp-g-thumb img{
  position:static;width:100%;height:auto;display:block;object-fit:cover;object-position:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)
}
.lp-gallery .lp-g-item:hover .lp-g-thumb img{transform:scale(1.03)}

/* Link overlay + zoom icon */
.lp-gallery .lp-g-link{position:absolute;inset:0;display:block;text-decoration:none}
.lp-gallery .lp-g-link::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(255,189,189,.18),rgba(255,189,189,0));
  opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1)
}
.lp-gallery .lp-zoom-ico{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(32,32,32,.8);border:1px solid var(--lp-stroke);color:#fff;
  opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)
}
.lp-gallery .lp-zoom-ico svg{width:20px;height:20px}
.lp-gallery .lp-g-item:hover .lp-g-link::after{opacity:1}
.lp-gallery .lp-g-item:hover .lp-zoom-ico{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  box-shadow:0 0 0 2px rgba(255,189,189,.25)
}

/* Lightbox with natural image sizing */
.lp-lightbox{
  width:min(92vw,var(--lp-max));border:none;padding:0;background:transparent;
  opacity:0;transform:translateY(-6px) scale(.98);
  transition:opacity .25s ease,transform .25s ease
}
.lp-lightbox[open]{opacity:1;transform:translateY(0) scale(1)}
.lp-lightbox::backdrop{background:rgba(0,0,0,.72)}
.lp-lightbox .lb-wrap{
  position:relative;max-width:var(--lp-max);margin-inline:auto;background:var(--lp-surface);
  border:1px solid var(--lp-stroke);border-radius:14px;overflow:hidden
}
.lp-lightbox .lb-media{padding:clamp(8px,2vw,16px);background:#1a1a1a}
.lp-lightbox .lb-media img{
  display:block;margin-inline:auto;
  max-width:min(92vw,var(--lp-max));max-height:85vh;width:auto;height:auto;background:#000;
  opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)
}
.lp-lightbox .lb-media img.is-loaded{opacity:1;transform:scale(1)}

.lp-lightbox .lb-ui{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none
}
.lp-lightbox .lb-btn{
  pointer-events:auto;background:rgba(32,32,32,.85);border:1px solid var(--lp-stroke);
  color:#fff;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease
}
.lp-lightbox .lb-btn:hover{
  transform:translateY(-1px);
  border-color:var(--lp-accent);
  box-shadow:0 0 0 2px rgba(255,189,189,.25)
}
.lb-prev{margin-inline-start:8px}.lb-next{margin-inline-end:8px}
.lb-close{position:absolute;top:8px;inset-inline-end:8px}

.lb-cap{
  padding:8px 10px;color:#eee;font-size:13px;border-top:1px solid var(--lp-stroke);
  background:linear-gradient(180deg,#222,#1b1b1b);display:flex;align-items:center;justify-content:space-between;gap:8px
}
.lb-cap small{color:#cfcfcf}


@media (max-width: 640px) {
  .lp-lightbox .lb-media img {
    max-width: min(85vw, var(--lp-max));
    width: auto;
    height: auto;
  }
}