/* The wave field behind every page.
 *
 * It is a picture, not a drawing: two static SVGs (scripts/backdrop-svg.mjs writes them), each used as a mask over a layer that is
 * coloured from the page's own tokens. So the field re-tunes with the theme (--wave-line and --wave-alpha, which day, dusk and night
 * each set) and with the pillar (--wave-accent: Models blue, Context green, Governance amber), and nothing is drawn after the page
 * loads. It used to be a canvas redrawn every frame in each hero and another canvas per section, all scrolling with the page.
 *
 * It is FIXED to the window: the content scrolls over it and it does not move. It covers the window whatever its shape (the files are
 * 'slice': they fill the window and crop what does not fit) and resizes with it, because it is vector art.
 *
 * It sits on <html>, at z-index -1, so it is behind every page's content without a wrapper in any page and without a byte of script.
 * Cards and tables that have a ground of their own hide it where they sit, which is what a ground is for; text on the bare page has
 * the field behind it, at an opacity chosen so the text still reads (and lower on a narrow window, where a column of prose sits
 * directly over it).
 *
 * Loaded by every page, and stamped there by scripts/site-chrome.mjs beside nav.css, so a page cannot ship without it or with a
 * stale copy.
 */
html::before,
html::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--wave-alpha,1);
  -webkit-mask:var(--wave-art) center/cover no-repeat;
          mask:var(--wave-art) center/cover no-repeat;
}
html::before{background:rgb(var(--wave-line,25,25,23));--wave-art:url(/backdrop/ink.svg?v=1)}
html::after{background:rgb(var(--wave-accent,15,127,102));--wave-art:url(/backdrop/accent.svg?v=1)}

@media(max-width:820px){
  html::before,html::after{opacity:calc(var(--wave-alpha,1) * .6)}
}
/* Nothing to paint on a printed page, and in forced-colours mode a mask has no colour to draw with. */
@media print,(forced-colors:active){
  html::before,html::after{display:none}
}