/* Faint contour lines in the margins. The reading column is masked clear on
   wide screens; on phones the whole section gets a fainter wash. */
[data-terrain]::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: 900px 900px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 24rem), transparent calc(50% - 20rem), transparent calc(50% + 20rem), #000 calc(50% + 24rem), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 24rem), transparent calc(50% - 20rem), transparent calc(50% + 20rem), #000 calc(50% + 24rem), #000 100%);
}
[data-terrain="1"]::before { background-image: url("/img/contours-1-light-v2.svg"); }
[data-terrain="2"]::before { background-image: url("/img/contours-2-light-v2.svg"); }
[data-terrain="3"]::before { background-image: url("/img/contours-3-light-v2.svg"); }
@media (prefers-color-scheme: dark) {
  [data-terrain="1"]::before { background-image: url("/img/contours-1-dark-v2.svg"); }
  [data-terrain="2"]::before { background-image: url("/img/contours-2-dark-v2.svg"); }
  [data-terrain="3"]::before { background-image: url("/img/contours-3-dark-v2.svg"); }
}
@media (max-width: 52rem) {
  [data-terrain]::before { -webkit-mask-image: none; mask-image: none; opacity: 0.25; }
}
.trail { z-index: 0; }