.photo-grid { display:grid; gap:20px; }
.photo-card { min-width:0; margin:0; }
.photo-open { position:relative; width:100%; display:block; border:1px solid var(--line); border-radius:14px; background:var(--brand-background-light); color:var(--ink); padding:0; overflow:hidden; aspect-ratio:4/3; }
.photo-open img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-tag { position:absolute; left:15px; bottom:15px; border:1px solid var(--line); border-radius:20px; background:#031525ed; color:var(--muted); padding:5px 10px; font-size:10px; letter-spacing:.05em; }
.photo-expand { position:absolute; top:15px; right:15px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#031525d9; color:var(--ink); }
.photo-card figcaption { padding:13px 3px 0; font-size:12px; color:var(--muted); line-height:1.7; }
.photo-viewer { width:min(960px,94vw); max-height:94svh; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--brand-background); color:var(--ink); overflow:auto; }
.photo-viewer::backdrop { background:#010b15e8; }
.photo-viewer figure { margin:0; }
.photo-viewer figure img { display:block; width:100%; height:auto; max-height:min(55svh,520px); object-fit:contain; margin:auto; }
.photo-viewer figcaption { font-size:13px; color:var(--muted); line-height:1.7; padding-top:15px; }
.viewer-toolbar, .viewer-navigation { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.viewer-toolbar { margin-bottom:15px; }
.viewer-navigation { margin-top:18px; }
.photo-viewer button { padding:10px 14px; background:var(--brand-background-light); border:1px solid var(--line); color:var(--ink); border-radius:7px; font-size:12px; }
body:has(.photo-viewer[open]) { overflow:hidden; }

.quiet-note { color:var(--muted); font-size:12px; line-height:1.7; }
.quiet-note:empty { display:none; }
.viewer-toolbar h2 { margin:0; min-width:0; overflow-wrap:anywhere; hyphens:auto; font-size:clamp(20px,3vw,28px); font-weight:550; letter-spacing:-.03em; }
.viewer-toolbar > button { flex:none; }
#viewer-back { margin-bottom:12px; }
.photo-viewer .photo-grid { margin:20px 0 5px; }
.photo-viewer .photo-card figcaption { font-size:11px; }
.photo-viewer .photo-open img { position:absolute; inset:0; height:100%; max-height:none; object-fit:contain; }
.photo-viewer .photo-open:hover img { transform:none; }
.photo-viewer:not(.collection-side) .viewer-toolbar { position:sticky; top:-18px; z-index:1; padding-block:12px; background:var(--brand-background); }
.place-photo-panel { margin:35px 0; padding:25px; background:var(--brand-background-light); border:1px solid var(--line); border-radius:12px; }
.place-photo-panel h2 { margin:0 0 10px; font-size:24px; font-weight:550; letter-spacing:-.04em; }
@media(min-width:621px) { .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media(hover:hover) { .photo-open:hover { border-color:var(--brand-cyan); }.photo-open:hover img { transform:scale(1.025); }.photo-viewer button:hover { border-color:var(--brand-cyan); } }
@media(prefers-reduced-motion:no-preference) { .photo-open { transition:border-color .2s; }.photo-open img { transition:transform .35s; } }

/* Location overview uses the same accessible dialog as the large image view. */
.photo-viewer.collection-side { box-sizing:border-box; position:fixed; inset:0 0 0 auto; margin:0; width:min(460px,100vw); max-width:100vw; height:100svh; max-height:100svh; border-radius:18px 0 0 18px; padding:24px; }
.collection-side .photo-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
.collection-side .viewer-toolbar { position:sticky; top:-24px; z-index:1; padding:14px 0; background:var(--brand-background); }
.collection-side .viewer-toolbar h2 { font-size:22px; }
.collection-side .viewer-toolbar > button { padding:10px; }
@media(max-width:620px) {
  .photo-viewer.collection-side { inset:auto 0 0; width:100%; height:86svh; max-height:86svh; border-radius:18px 18px 0 0; padding:18px; }
  .collection-side .viewer-toolbar { top:-18px; }
  .collection-side .viewer-toolbar h2 { font-size:20px; }
}

/* Keep the photo entry points visible next to the map, including pin popups. */
.map-page .place-photo-panel { margin:0 0 22px; padding:18px 20px; }
.map-page .place-photo-panel h2 { font-size:22px; }
.popup-photo-button { display:block; margin-top:14px; padding:10px 12px; border:1px solid var(--brand-cyan); border-radius:7px; background:var(--brand-background-light); color:var(--ink); font:inherit; font-size:12px; line-height:1.5; text-align:left; }
.popup-photo-button:hover { color:var(--brand-turquoise); }

.place-photo-controls { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.place-photo-controls select, .place-photo-controls button { border:1px solid var(--line); border-radius:8px; padding:12px; background:var(--brand-background); color:var(--ink); font:inherit; font-size:13px; }
.place-photo-controls select { flex:1 1 220px; min-width:0; max-width:100%; }
.place-photo-controls button:disabled { opacity:.5; cursor:default; }
.place-photo-controls button:not(:disabled):hover { border-color:var(--brand-cyan); }

/* Compact thematic overviews; complete motifs remain visible in each tile. */
@media(min-width:621px) {
  .photo-viewer:not(.collection-side) #viewer-collection { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}