.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.photo { margin: 0; }
.photo-thumb { border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; }
.photo-thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.photo figcaption { display: flex; flex-direction: column; gap: .25rem; font-size: var(--text-sm); margin-top: .4rem; }
.lightbox { max-width: 90vw; max-height: 90vh; border: 0; border-radius: var(--radius-md); padding: .5rem; }
.lightbox img { max-width: 85vw; max-height: 78vh; display: block; }
.lightbox::backdrop { background: rgb(0 0 0 / .7); }

.map { height: 420px; border-radius: var(--radius-md); margin: 1rem 0; z-index: 0; }
.map-small { height: 280px; }
.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.place-list { padding-left: 1rem; }

/* Leaflet markers follow the theme (CSS beats SVG presentation attributes). */
.map-marker {
  stroke: var(--accent);
  fill: var(--accent);
  fill-opacity: 0.35;
}