/* 极简画廊：只有图，没有文案 */
:root{--gap:5px;--bg:#050505}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}

/* ---------- 网格（自然比例，不裁切） ---------- */
.gallery{columns:3;column-gap:var(--gap);padding:var(--gap)}
@media(max-width:1100px){.gallery{columns:2}}

.item{
  display:block;width:100%;margin:0 0 var(--gap);break-inside:avoid;
  padding:0;border:0;background:#0d0d0d;cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.item img,.item video{width:100%;height:auto;transition:filter .25s ease}
.item:hover img,.item:hover video{filter:brightness(.9)}
.item:focus-visible{outline:1px solid #8a8a8a;outline-offset:2px}

/* 视频：点击前显示首帧，悬停自动播放 */
.item--video video{pointer-events:none}
.item--video .play{
  position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);
  display:grid;place-items:center;transition:opacity .2s;
}
.item--video .play::before{
  content:"";width:0;height:0;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
  margin-left:2px;
}
@media(hover:hover){.item--video:hover .play{opacity:0}}

/* ---------- 大图 / 视频查看器 ---------- */
.viewer{
  position:fixed;inset:0;z-index:40;display:none;
  background:#050505;overscroll-behavior:contain;
}
.viewer[hidden]{display:none}
.viewer.is-open{display:flex;align-items:center;justify-content:center}
.viewer img{
  max-width:100vw;max-height:100svh;width:auto;height:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
.viewer--video{background:#000}
.viewer--video video{max-width:100vw;max-height:100svh;width:auto;height:auto}
.x{
  position:fixed;top:12px;right:12px;z-index:42;
  width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(0,0,0,.35);color:#e8e8e8;font-size:13px;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s;
}
.x:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:42;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);
  color:#eee;font-size:16px;display:grid;place-items:center;cursor:pointer;
  transition:background .2s,opacity .2s;
}
.nav:hover{background:rgba(255,255,255,.12)}
.nav--prev{left:10px}
.nav--next{right:10px}
@media(hover:hover){
  .nav{opacity:0}
  .viewer:hover .nav{opacity:1}
}
@media(max-width:560px){
  .gallery{columns:2}
  .nav{width:38px;height:38px}
}