/* brand-light.css — the light of the place. The canvas is created and styled by brand-light.js (fixed, z-index -1,
   pointer-events none). What the page needs, so the light shows between the ground and the text:
     - the ground lives on <html> (background: var(--ground)) and, if the client has a material, on a fixed layer below
       z-index -1 (see .bl-ground below); <body> and the sections that should be lit have no opaque background;
   Reads --ground --material --material-size --material-pos --veil with fallbacks. */

html.bl-on { background: var(--ground, #1b1410); }
html.bl-on body { background: transparent; }

/* The client's material as a fixed ground behind everything (rule 4 of the studio: it stays still while the page scrolls),
   with the flat veil for reading. Put <div class="bl-ground"></div> first in <body> and give it the image in the PAGE (a url() inside a
   custom property resolves against the stylesheet that uses it, so the page sets: .bl-ground { background: var(--material) var(--material-pos) / var(--material-size) no-repeat }). */
.bl-ground { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bl-ground::after { content: ""; position: absolute; inset: 0; background: var(--ground, #1b1410); opacity: var(--veil, .78); }

@media (prefers-reduced-motion: reduce) { .bl-canvas { transition: none; } }