/* The existing dark-hero rule requires div > img. Preserve that exact
 * context for the four reviewed picture wrappers, without CTA-band classes.
 * Keep these declarations aligned with design-system.css's dark bands.
 */
section:has(> div > picture[data-responsive-photo="clay-court-serve"] > img.object-cover) {
  --background: 215 52% 10%;
  --foreground: 45 33% 95%;
  --card: 215 38% 15%;
  --card-foreground: 45 33% 95%;
  --popover: 215 38% 15%;
  --popover-foreground: 45 33% 95%;
  --secondary: 215 30% 18%;
  --secondary-foreground: 45 33% 95%;
  --muted: 215 30% 18%;
  --muted-foreground: 44 18% 77%;
  --primary: 36 58% 57%;
  --primary-foreground: 215 52% 10%;
  --accent: 36 58% 57%;
  --border: 215 22% 24%;
  --gold: 38 72% 60%;
  --gold-soft: 40 52% 74%;
  --info: 200 70% 72%;
  color: hsl(var(--foreground));
  background-color: hsl(215 52% 10%);
}