/* Fine cross, transparent surface and 44px target in every content dialog. */
.content-dialog .dialog-close { border-radius: 4px; background: transparent; }
.content-dialog .dialog-close:hover { background: transparent; color: #32794f; }
.content-dialog .dialog-close:focus-visible { outline-offset: 0; }
.content-dialog .dialog-close svg { width: 20px; height: 20px; stroke-width: 1.5; }
.coming-soon-dialog h2:focus { outline: none; }

/* Fade the artwork itself into the page, with a transparent starting strip.
   The former white overlay could expose a subpixel seam at the scaled edge. */
.homepage--calm .river-canvas::before { display: none; }
@media (min-width: 960px) {
  .homepage--calm .river-canvas {
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 2px, #000 max(3px, var(--edge-feather)));
    mask-image: linear-gradient(to right, transparent 0, transparent 2px, #000 max(3px, var(--edge-feather)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}