/* ntvrli design system — space
   The continuous environment. Nothing in the document paints a ground: the
   scene behind it is the ground, and it changes as you move through. This is
   what removes every horizontal edge, so nothing is ever cut in half. */

#space {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100svh; display: block;
}

/* The foreground pass sits ABOVE the content, so the heading is genuinely
   between two depths rather than painted on top of one. It never takes
   pointer events — it is scenery, not interface. */
#space-fg {
  position: fixed; inset: 0; z-index: 2;
  width: 100vw; height: 100svh; display: block;
  pointer-events: none;
  opacity: 0;
}

/* No COMPONENT may paint a ground — that is the whole point. The document
   root is the exception and it must not be transparent: on a page with no
   form (form: false) there is no canvas to paint the ground, and a
   transparent root falls through to the browser's white. The root tracks
   --ground, and the canvas simply covers it when a page has one. */
.band,
.on-bone, .on-oxblood, .on-ink,
body, footer.band { background: transparent; }

html { background: var(--ground, #D8D2C4); }

.band { position: relative; overflow: hidden; }
.band > * { position: relative; z-index: 1; }
main, main > *, footer { position: relative; z-index: 1; }

/* Content recedes while the space changes around it, then returns. A
   light-to-dark ground is mid-luminance at its midpoint and NO text colour
   clears 4.5:1 there, so that moment is made brief and stepped aside from
   rather than read through. */
main > *, footer { opacity: var(--settle, 1); }

@media (prefers-reduced-motion: reduce) {
  main > *, footer { opacity: 1; }
}