/* Page background photo, light and dark. One file for every page so the two
   photos are not repeated in each page's own inline CSS. The photo sits on a
   fixed layer behind everything (a fixed pseudo-element rather than
   background-attachment:fixed, which iOS ignores); the page's own --bg is laid
   over it as a veil, and cards/panels keep their opaque --panel colour, so text
   stays readable. --veil is how much of the page colour covers the photo:
   higher = quieter photo. A page can set its own, e.g. html{--veil:55%}. */
:root{--bg-img:url(/images/bg-light.webp)}
html{--veil:88%}   /* element selector on purpose: a page's own html{--veil:..} after this link wins */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg-img:url(/images/bg-dark.webp)}
}
:root[data-theme="dark"]{--bg-img:url(/images/bg-dark.webp)}
html{background:var(--bg)}
/* The veil is part of the fixed layer (not the body's background): a page
   shorter than the window would otherwise leave an unveiled strip of photo
   below its body. */
html::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  --veil-color:color-mix(in srgb, var(--bg) var(--veil), transparent);
  background:
    linear-gradient(var(--veil-color), var(--veil-color)),
    var(--bg-img) center / cover no-repeat;
}
body{background:transparent !important}