/* Static staging collection: retain the alternating image layout. */
.portfolio-image { margin: 0; cursor: default; }
.portfolio-image:hover > img { transform: none; filter: none; }
.portfolio-image:hover .portfolio-card-caption { transform: none; }
.portfolio-image .portfolio-card-shade,
.portfolio-image:hover .portfolio-card-shade {
  background: linear-gradient(to top, rgba(12,11,10,.78), rgba(12,11,10,.24) 30%, transparent 62%);
}
/* Give landscape photographs more room on small screens. */
@media (max-width: 640px) {
  .portfolio-triptych .portfolio-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .portfolio-image .portfolio-card-caption { left: 22px; right: 22px; bottom: 22px; }
}


/* A balanced final pair continues the same spacing and portrait proportions. */
.portfolio-pair { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.portfolio-pair .portfolio-image { min-height: 0; aspect-ratio: 3 / 4; }
@media (max-width: 640px) {
  .portfolio-pair { grid-template-columns: 1fr; }
  .portfolio-pair .portfolio-image { aspect-ratio: 4 / 3; }
}

.portfolio-image .portfolio-card-meta {
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 9px;
}
.portfolio-image .portfolio-card-meta span + span { color: rgba(255,255,255,.86); }
@media (max-width: 640px) {
  .portfolio-image .portfolio-card-caption strong { font-size: 23px; line-height: 1.15; }
  .portfolio-image .portfolio-card-meta { font-size: 8px; gap: 8px 10px; }
}

.portfolio-enlarge { position:absolute; z-index:3; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:zoom-in; color:#fff; }
.portfolio-enlarge span { position:absolute; top:20px; right:20px; padding:8px 12px; border:1px solid rgba(255,255,255,.5); border-radius:3px; background:rgba(20,19,17,.5); font:500 10px var(--sans); letter-spacing:.07em; text-transform:uppercase; }
.portfolio-enlarge:focus-visible { outline:3px solid white; outline-offset:-6px; }
.photo-viewer { box-sizing:border-box; width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; margin:0; padding:60px 24px 24px; border:0; background:#191817; color:#fff; }
.photo-viewer[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:16px; }
.photo-viewer::backdrop { background:rgba(0,0,0,.9); }
.photo-stage { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:16px; align-items:center; min-height:0; }
.photo-full { width:100%; height:100%; min-height:0; object-fit:contain; }
.photo-viewer button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #777; border-radius:50%; background:#292725; color:#fff; cursor:pointer; font:24px Arial,sans-serif; }
.photo-viewer button:hover { background:#48443f; }
.photo-viewer button:focus-visible { outline:2px solid white; outline-offset:3px; }
.photo-close { position:absolute; top:10px; right:24px; }
.photo-details { text-align:center; }
.photo-meta { margin:0 0 6px; font:500 10px var(--sans); text-transform:uppercase; letter-spacing:.12em; color:#ccc; }
.photo-title { margin:0; color:#fff; font-family:var(--serif); font-size:clamp(21px,2.4vw,32px); line-height:1.2; }
.photo-count { margin:8px 0 0; font:12px var(--sans); color:#ccc; }
body.photo-viewer-open { overflow:hidden; }
@media(max-width:640px) {
 .photo-viewer { padding:60px 12px 20px; }
 .photo-stage { position:relative; grid-template-columns:minmax(0,1fr); gap:0; }
 .photo-prev,.photo-next { position:absolute; top:50%; transform:translateY(-50%); z-index:1; opacity:.9; }
 .photo-prev { left:0; } .photo-next { right:0; }
 .photo-close { right:12px; }
 .portfolio-enlarge span { top:12px; right:12px; font-size:9px; }
}
.photo-viewer { width:min(94vw,1400px); height:90vh; height:90dvh; max-height:90dvh; margin:auto; border-radius:6px; box-shadow:0 24px 90px rgba(0,0,0,.5); }
@media(max-width:640px) {
 .photo-viewer { width:96vw; height:94vh; height:94dvh; max-height:94dvh; }
}

/* Viewer caption hierarchy: service/location leads, description stays secondary. */
.photo-meta { font-size:14px; line-height:1.5; letter-spacing:.08em; }
.photo-title { font-size:13px; line-height:1.5; }