/* ==========================================================================
   Photo & image styles — loaded only on pages that use real photos.
   Pairs with styles.css. Add <link rel="stylesheet" href="assets/css/photos.css">
   after the main stylesheet on any page that uses .media images.
   ========================================================================== */
.hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); line-height: 0; background: var(--surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 16 / 7; }
.media--photo { aspect-ratio: 4 / 3; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1 / 1; }
@media (max-width: 820px) { .media--wide { aspect-ratio: 16 / 9; } }

/* image inside the dark closing band */
.band .media { box-shadow: 0 10px 30px rgba(0,0,0,.25); }