/* Editorial artwork stays visible without JavaScript. All frames use rounded
   rectangles; crop the original empty margins so the story has room to lead. */
.cause-tile, .secondary-causes .cause-tile {
  grid-template-columns: 48% minmax(0, 1fr);
  min-height: 330px;
}
.tile-art { min-width: 0; overflow: hidden; background: #e7d5ba; }
.tile-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center 57%;
}
.tile-art .artwork-scene { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.tile-art .artwork-scene--landscape img { object-position: 48% center; }

.artwork-scene {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: #e7d5ba;
}
.artwork-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.artwork-scene--landscape img { object-position: center; }
.artwork-scene img[src*="/04-water-"] { object-position: 50% 90%; }
.cause-art {
  width: 100%;
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  background: #e7d5ba;
}
.cause-art .artwork-scene { aspect-ratio: 1 / 1.04; border-radius: 0; }
.cause-art figcaption {
  position: relative;
  margin: 0;
  padding: 16px 24px;
  background: #fff8ee;
  color: var(--muted);
  font: italic 13px/1.5 Georgia, serif;
  text-align: center;
}
.water-story {
  grid-template-columns: minmax(0,1fr);
  gap: 30px;
  padding: 24px;
}
.water-story figure {
  height: auto;
  aspect-ratio: 40 / 21;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #e7d5ba;
}
.water-story img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.water-story>div { max-width: 720px; padding: 0 16px 16px; }
.about .artwork-scene { aspect-ratio: 4 / 3; }

@media (max-width: 1000px) {
  .water-story { gap: 26px; }
}
@media (max-width: 900px) {
  .cause-hero .cause-art { max-width: 640px; }
  .cause-art .artwork-scene { aspect-ratio: 5 / 4; }
}
@media (max-width: 700px) {
  .cause-tile, .secondary-causes .cause-tile { grid-template-columns: 46% minmax(0, 1fr); min-height: 310px; }
  .tile-art img { min-height: 310px; }
  .cause-art { max-width: none; }
  .cause-art figcaption { padding: 14px 18px; font-size: 12px; }
  .water-story { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 24px; }
  .water-story figure { width: 100%; height: auto; border-radius: 16px; }
  .water-story>div { padding: 0 4px 6px; }
}
@media (max-width: 380px) {
  .cause-tile, .secondary-causes .cause-tile { grid-template-columns: minmax(0, 1fr); }
  .tile-art img { height: 290px; min-height: 0; }
  .tile-art .artwork-scene { height: 290px; }
}