/* gallery (js/gallery.js): a justified row, every piece the same height and never cropped */
#gallery-row { display: flex; gap: 16px; align-items: stretch; }
.g-item { position: relative; flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); padding: 0; cursor: zoom-in; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255,43,63,.35); background: #0b0b10;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); transition: transform .35s cubic-bezier(.2, 1.2, .4, 1), box-shadow .3s, border-color .3s; }
.g-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .9, .3, 1), filter .3s; }
.g-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; transition: opacity .3s;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), linear-gradient(transparent 60%, rgba(5,5,7,.55)); }
.g-corners { position: absolute; inset: 10px; pointer-events: none; opacity: .7; transition: inset .3s, opacity .3s;
  background: linear-gradient(#ff2b3f, #ff2b3f) top left / 18px 2px, linear-gradient(#ff2b3f, #ff2b3f) top left / 2px 18px,
    linear-gradient(#ff2b3f, #ff2b3f) top right / 18px 2px, linear-gradient(#ff2b3f, #ff2b3f) top right / 2px 18px,
    linear-gradient(#ff2b3f, #ff2b3f) bottom left / 18px 2px, linear-gradient(#ff2b3f, #ff2b3f) bottom left / 2px 18px,
    linear-gradient(#ff2b3f, #ff2b3f) bottom right / 18px 2px, linear-gradient(#ff2b3f, #ff2b3f) bottom right / 2px 18px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px #ff2b3f); }
.g-tag { position: absolute; left: 14px; bottom: 12px; z-index: 1; font: 700 12px var(--font-mono); letter-spacing: .14em; color: #fff; text-shadow: 0 0 8px #ff2b3f; }
.g-item:hover, .g-item:focus-visible { transform: translateY(-6px); border-color: #ff2b3f; outline: none; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 26px rgba(255,43,63,.45); }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.04); }
.g-item:hover::after { opacity: .2; }
.g-item:hover .g-corners, .g-item:focus-visible .g-corners { inset: 6px; opacity: 1; }
@media (max-width: 700px) { #gallery-row { flex-direction: column; } .g-item { flex: none; width: 100%; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(5,5,7,.92); backdrop-filter: blur(6px); animation: lb-in .25s ease; }
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 10px; border: 1px solid rgba(255,43,63,.5);
  box-shadow: 0 0 40px rgba(255,43,63,.25); animation: lb-img .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes lb-img { from { opacity: 0; transform: scale(.96); } }
.lightbox figcaption { font: 600 12px var(--font-mono); letter-spacing: .2em; color: var(--cyber-chrome-300); }
.lb-arrow, .lb-close { display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff; border: 1.5px solid rgba(255,43,63,.5); background: rgba(13,14,20,.8);
  text-shadow: 0 0 10px #ff2b3f; transition: border-color .2s, box-shadow .2s, background .2s; }
.lb-arrow { width: 46px; height: 64px; border-radius: 12px; font: 700 34px/1 var(--font-display); }
.lb-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 10px; font: 700 15px var(--font-mono); z-index: 1; }
.lb-arrow:hover, .lb-arrow:focus-visible, .lb-close:hover, .lb-close:focus-visible { border-color: #ff2b3f; background: rgba(255,43,63,.2); box-shadow: 0 0 16px rgba(255,43,63,.5); outline: none; }
body.lb-open { overflow: hidden; }
/* zoom (js/zoombox.js): + and − in the bottom right corner; drag the picture around while zoomed */
.lightbox { overflow: hidden; }
.lightbox img { transition: transform .2s ease; }
.lightbox img.zoomed { cursor: grab; touch-action: none; position: relative; z-index: 1; }
.lightbox img.panning { cursor: grabbing; transition: none; }
.lb-arrow { position: relative; z-index: 2; } .lb-close { z-index: 3; }
.lb-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.lb-zbtn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  font: 700 22px/1 var(--font-mono); border: 1.5px solid rgba(255,43,63,.5); background: rgba(13,14,20,.8); text-shadow: 0 0 10px #ff2b3f; }
.lb-zbtn:hover, .lb-zbtn:focus-visible { border-color: #ff2b3f; background: rgba(255,43,63,.2); box-shadow: 0 0 16px rgba(255,43,63,.5); outline: none; }
.lb-zbtn[disabled] { opacity: .35; cursor: default; box-shadow: none; }
/* phones: the piece gets the whole width, the arrows sit side by side underneath */
@media (max-width: 600px) {
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 14px 20px; padding-top: 64px; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lb-prev { grid-row: 2; justify-self: end; } .lb-next { grid-row: 2; justify-self: start; }
  .lb-arrow { width: 64px; height: 48px; font-size: 30px; }
  .lightbox img { max-height: calc(100vh - 200px); }
  .lb-zoom { top: 16px; left: 16px; right: auto; bottom: auto; }   /* the arrows sit at the bottom on phones */
}
@media (prefers-reduced-motion: reduce) { .g-item, .g-item img, .lightbox, .lightbox img { transition: none; animation: none; } }