/* The site keeps its graphite palette. In device night mode, lift text contrast
   slightly and soften secondary copy instead of switching to a bright theme. */
:root { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  body { color: #e4e6eb; }
  .site-header { color: #e4e6eb; }
  .main-nav { color: #d8dbe1; }
  .hero .eyebrow,
  .hero-bottom,
  .hero-index,
  .music .section-top .eyebrow,
  .music-heading > p,
  .music .section-note,
  .photos .section-top .eyebrow,
  .photos .section-note,
  .photos .media-heading > p,
  .videos .section-top .eyebrow,
  .videos .section-note,
  .videos .media-heading > p,
  .video-caption > span,
  .about .section-top .eyebrow,
  .about .section-note,
  .live .section-top .eyebrow,
  .live .section-note,
  .date-detail,
  .live-foot,
  .site-footer p,
  .back-top,
  .copyright {
    color: #b8bec8;
  }

  .hero-intro,
  .release-copy,
  .about-copy,
  .video-caption p,
  .connect-content > p:not(.eyebrow) {
    color: #d0d3da;
  }

  .statement span,
  .connect .eyebrow,
  .social-bar > span { color: #c4c9d1; }
  .section-top,
  .date-row,
  .video-caption { border-color: rgba(226, 230, 237, .24); }
}