/* The page's canvas.
 *
 * Fixed to the viewport rather than laid out in the page: it is drawn once for
 * the whole document and each block is given a rectangle of it, so it must not
 * scroll with the content or a block's viewport would be somewhere else by the
 * time it was drawn.
 *
 * Behind the content and deaf to the pointer. A reader clicks the words, not
 * the picture behind them - and the words have to stay clickable, selectable
 * and readable by a screen reader, which is the whole reason they were left in
 * the document instead of being drawn here.
 *
 * A block wanting to appear over the content raises itself above --ds-stage-z
 * rather than the canvas being raised, so there is still one canvas and one
 * context.
 */
:root{ --ds-stage-z: 0 }

.ds-stage{
  position: fixed;
  inset: 0;
  z-index: var(--ds-stage-z, 0);
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Nothing here paints a background. What the stage does not draw has to show
     the page through it. */
  background: transparent;
}

/* The document sits over it.
 *
 * A positioned element paints above in flow content whatever the source order
 * says, so appending the canvas last put it over the entire site - and the
 * first attempt at this rule keyed off the siblings after the canvas, of which
 * there are none. The three landmarks are named instead.
 *
 * The header already carries z-index 50 and the footer is already positioned;
 * only the main column needed raising, and it is named here with the other two
 * so the reason is written down in one place rather than being a lone
 * unexplained property on a wrapper.
 *
 * Negative z-index on the canvas would have been the smaller change and does
 * not work here: it paints behind the body background, and this theme sets a
 * background on html as well as body, so body's does not propagate to the
 * viewport and would cover the canvas completely. */
body > .ds-header,
body > .ds-main,
body > .ds-footer{ position: relative; z-index: 1 }

/* Where a block has asked to be seen through the page rather than behind it.
   Still one canvas and one context - only its place in the order changes. */
.ds-stage-over{ --ds-stage-z: 2 }
.ds-stage-over.ds-stage{ z-index: 2 }