.joint-photos{columns:3;column-gap:24px}
.joint-photo{break-inside:avoid;margin:0 0 24px;overflow:hidden;background:var(--paper)}
.joint-photo-link{position:relative;display:block;text-decoration:none}
.joint-photo-link img{width:100%;height:auto}
.joint-photo-link:focus-visible{outline-offset:-4px;outline-width:4px}
.joint-photo figcaption{padding:14px 16px;font-size:.95rem;font-weight:700;line-height:1.4}
.joint-photo-zoom{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;min-height:32px;padding:5px 9px;background:rgba(8,28,43,.9);color:#fff;font-size:.875rem;line-height:1.3;opacity:0;transition:opacity .18s}
.joint-photo-link:hover .joint-photo-zoom,.joint-photo-link:focus-visible .joint-photo-zoom{opacity:1}
body.photo-open{overflow:hidden}
.joint-viewer{width:min(1100px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:18px 24px;border:0;background:var(--navy-deep);color:#fff;overflow:auto;box-shadow:0 20px 80px rgba(0,0,0,.35)}
.joint-viewer::backdrop{background:rgba(3,13,21,.88)}
.joint-viewer-top,.joint-viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}
.joint-viewer-count{font-size:.95rem;color:#e3edf3}
.joint-viewer button{min-height:44px;padding:9px 14px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;line-height:1.3;font-size:.95rem}
.joint-viewer button:hover{background:var(--navy-soft)}
.joint-viewer-close{display:flex;align-items:center;gap:16px}
.joint-viewer-close span{font-size:1.7rem;line-height:1}
.joint-viewer-figure{margin:14px 0}
.joint-viewer-image{display:block;width:100%;height:min(70dvh,800px);object-fit:contain}
.joint-viewer-figure figcaption{padding-top:12px;text-align:center;font-size:1rem;line-height:1.4}
.joint-viewer-controls button{display:flex;align-items:center;gap:12px}
@media(max-width:980px){.joint-photos{columns:2}}
@media(hover:none){.joint-photo-zoom{opacity:1}.joint-photo-zoom{padding:5px 7px}.joint-photo-zoom svg{width:14px;height:14px}}
@media(max-width:600px){
  .joint-photos{column-gap:12px}
  .joint-photo{margin-bottom:16px}
  .joint-photo figcaption{padding:11px 10px;font-size:.875rem;line-height:1.4}
  .joint-photo-zoom{right:7px;bottom:7px;font-size:.875rem}
  .joint-viewer{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px}
  .joint-viewer-image{height:calc(100dvh - 190px);min-height:160px}
  .joint-viewer-figure figcaption{font-size:.95rem}
  .joint-viewer button{font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.joint-photo-zoom{transition:none}}