/* The art as page background (docs/design.md §6.5.1): one softened copy, centred on the viewport and fixed behind the
   page (the content scrolls over it). Text keeps AA contrast at this opacity; `mise run ui-lint` samples it at
   several scroll positions (art-contrast). Loaded by Layouts.app only for pages that use it. */
.nd-art-bg { position:fixed; z-index:-1; top:0; left:0; width:100%; height:100lvh; max-width:none; object-fit:contain; object-position:center;
  opacity:.08; pointer-events:none; user-select:none; }
/* On phones the art fills the screen: its centre, cropped at the sides. The mobile URL bar changes the viewport height while
   the page scrolls, so the box is sized by the width alone (taller than any phone screen, 2.3 times the width) and anchored
   at the top: it never rescales. No vh, no background-attachment, no script. */
@media(max-width:759px) { .nd-art-bg { height:230vw; object-fit:cover; } }
@media(forced-colors:active) { .nd-art-bg { display:none; } }
/* A secondary button is translucent: back it with paper so its label never depends on the art under it. */
.nd-page .nd-button.secondary { background-color:var(--paper); }
.nd-page .nd-button.secondary:not(:disabled):hover { background-color:color-mix(in srgb,var(--secondary) 14%,var(--paper)); }
/* Muted text darkens a little over the art, so it keeps AA where the art is densest (the bottom of a phone screen). */
.nd-page { --muted:#4f4a41; }