/* My Chart only: continuous photo fade, no local white bands. */
.my-chart-page #my-chart-app::after {
  z-index: 0;
  -webkit-mask-image: linear-gradient(225deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.7) 15%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.04) 55%, transparent 70%), radial-gradient(ellipse 65% 45% at 0% 0%, transparent 0%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.85) 88%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(225deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.7) 15%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.04) 55%, transparent 70%), radial-gradient(ellipse 65% 45% at 0% 0%, transparent 0%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.85) 88%, #000 100%);
  mask-composite: intersect;
}
.my-chart-page #my-chart-app :is(.route-intro, .breadcrumbs, .topic-switcher, .chart-meta, .chart-status, .chart-board-scroll, .decade-selector, .chart-disclaimer, .chart-support-links)::before,
.my-chart-page #my-chart-app > .page-hero > :is(h1, p)::before { content: none; display: none; }
.my-chart-page #my-chart-app > .page-hero > *,
.my-chart-page #my-chart-app > .page-content { position: relative; z-index: 2; opacity: 1; }
.my-chart-page #my-chart-app :is(.chart-intro, .breadcrumbs, .chart-status, .chart-meta) { opacity: 1; }