/* Faint contour lines in the margins, coloured for each paper. Painted by a
   pseudo-element above the sheet's paper and below its content. It starts
   below the feed band, which shows the previous sheet. The reading column is
   masked clear on wide screens; phones get a fainter wash all over. */
[data-terrain]::before {
  content: "";
  position: absolute; left: 0; right: 0; top: var(--feed); bottom: 0; pointer-events: none;
  background-size: 900px 900px;
  /* The reading column's edges (see .sheet in sheets.css). */
  --col-l: max(var(--rail), calc(50% - var(--col) / 2));
  --col-r: min(calc(100% - var(--rail)), calc(50% + var(--col) / 2));
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--col-l) - 5rem), transparent var(--col-l), transparent var(--col-r), #000 calc(var(--col-r) + 5rem), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--col-l) - 5rem), transparent var(--col-l), transparent var(--col-r), #000 calc(var(--col-r) + 5rem), #000 100%);
}
.sheet:first-of-type[data-terrain]::before { top: 0; }
[data-paper="cream"][data-terrain="1"]::before { background-image: url("/img/contours-1-cream-v3.svg"); }
[data-paper="cream"][data-terrain="2"]::before { background-image: url("/img/contours-2-cream-v3.svg"); }
[data-paper="cream"][data-terrain="3"]::before { background-image: url("/img/contours-3-cream-v3.svg"); }
[data-paper="black"][data-terrain="1"]::before { background-image: url("/img/contours-1-black-v3.svg"); }
[data-paper="black"][data-terrain="2"]::before { background-image: url("/img/contours-2-black-v3.svg"); }
[data-paper="black"][data-terrain="3"]::before { background-image: url("/img/contours-3-black-v3.svg"); }
@media (max-width: 64rem) {
  [data-terrain]::before { -webkit-mask-image: none; mask-image: none; opacity: 0.45; }
}