.project-open{position:relative;display:block;width:100%;max-width:1024px;aspect-ratio:16/9;margin-inline:auto;padding:0;border:0;background:#111;color:#fff;cursor:zoom-in;text-align:left;overflow:hidden}
#project-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.project-open-label{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:13px;padding:12px 16px;background:#161618e8;border:1px solid #ffffff6b;font-size:13px;font-weight:700;line-height:1.4}
.project-open-label .photo-total{color:#c6c6cd;font-size:12px;font-variant-numeric:tabular-nums}
.project-open-label .arrow-icon{width:20px;height:20px}
.project-open:hover .project-open-label{background:var(--red);border-color:var(--red)}
.project-open:hover .photo-total{color:#fff}
.project-info h3 button{display:inline-block;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left}
.project-info h3 button:hover{text-decoration:underline;text-underline-offset:5px}
.gallery-open{overflow:hidden}
.project-gallery{position:fixed;inset:0;width:min(1180px,94vw);height:min(900px,94vh);height:min(900px,94dvh);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #45454d;background:#161618;color:#fff;overscroll-behavior:contain}
.project-gallery::backdrop{background:#000d}
.gallery-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;height:100%;padding:24px;overflow:hidden}
.gallery-header{display:flex;align-items:start;justify-content:space-between;gap:20px}
.gallery-header .eyebrow{font-size:10px;letter-spacing:1.5px;color:#bdbdc5}
.gallery-header h2{font-size:30px;letter-spacing:-.035em;margin-top:6px}
.gallery-header p{font-size:13px;color:#c6c6cc;margin-top:7px}
.gallery-close,.gallery-previous,.gallery-next{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:1px solid #7c7c85;background:#161618df;color:#fff}
.gallery-close:hover,.gallery-previous:hover,.gallery-next:hover{background:var(--red);border-color:var(--red)}
.gallery-stage{position:relative;display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;background:#0c0c0e;touch-action:pan-y pinch-zoom}
/* A shared canvas keeps every photo in the same space, regardless of source dimensions. */
.gallery-viewport{position:relative;width:100%;height:auto;aspect-ratio:4/3;max-width:768px;max-height:100%;min-height:0;overflow:hidden}
.gallery-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;user-select:none;-webkit-user-select:none}
.gallery-stage [hidden]{display:none}
.gallery-previous,.gallery-next{position:absolute;top:50%;transform:translateY(-50%)}
.gallery-previous{left:14px}.gallery-next{right:14px}
.gallery-error{position:absolute;inset:0;display:grid;align-content:center;padding:25px 70px;text-align:center;font-size:14px}
.gallery-retry{display:block;min-height:44px;margin:16px auto 0;padding:8px 18px;border:1px solid #7c7c85;background:transparent;color:#fff}
.gallery-retry:hover{background:var(--red);border-color:var(--red)}
.gallery-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;height:42px;min-height:42px;font-size:14px;line-height:1.5}
#gallery-caption{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#gallery-counter{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px;color:#c6c6cc}
.gallery-thumbnails{display:flex;align-items:flex-start;gap:8px;min-width:0;height:96px;min-height:96px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#77777f #29292d;padding:3px 3px 9px;scroll-snap-type:x proximity;box-sizing:border-box}
.gallery-thumbnails button{flex:0 0 88px;height:66px;padding:0;border:2px solid transparent;background:#0c0c0e;scroll-snap-align:start}
.gallery-thumbnails button[aria-pressed=true]{border-color:#f23859}
.gallery-thumbnails img{width:100%;height:100%;object-fit:contain}
@media(max-width:640px){
  .project-open{aspect-ratio:4/3}
  .project-open-label{right:12px;bottom:12px;padding:10px 13px;font-size:12px}
  .project-gallery{width:100%;height:100vh;height:100dvh;margin:0;border:0}
  .gallery-shell{gap:12px;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .gallery-header h2{font-size:25px}
  .gallery-close,.gallery-previous,.gallery-next{width:44px;height:44px}
  .gallery-previous{left:8px}.gallery-next{right:8px}
  .gallery-meta{font-size:13px}
  .gallery-thumbnails{height:84px;min-height:84px}
  .gallery-thumbnails button{flex-basis:76px;height:57px}
}
@media(max-height:540px){
  .gallery-shell{gap:8px;padding:12px}
  .gallery-header .eyebrow{display:none}
  .gallery-header h2{font-size:21px;margin:0}
  .gallery-header p{margin-top:3px;font-size:12px}
  .gallery-meta{height:36px;min-height:36px;font-size:12px}
  .gallery-thumbnails button{flex-basis:64px;height:48px}
  .gallery-thumbnails{height:72px;min-height:72px;padding-bottom:4px}
}