/* BalanceProof — the backdrop.
   ---------------------------------------------------------------------------
   Three layers stacked in one fixed box behind everything. Each is a complete
   answer by itself, so a layer that never arrives costs atmosphere and nothing
   else:

     base      painted by this file, 0 bytes, always
     placeholder  a 24px blurred WebP inlined here as a data URI
     still     79 KB WebP at 2400px / 27 KB at 1200px, loaded by <picture>

   The placeholder is not a grey box. It is the picture's own twilight palette
   -- deep blue overhead, pink and warm orange at the horizon -- so somebody
   who only ever sees this layer gets the intended mood rather than an empty
   screen waiting to be filled.
*/

:root {
  --bd-base: #0a0a0a;
  --bd-surface: #1a1a1a;
  --bd-gold: #f0a500;
}

/* Fixed and behind everything. `pointer-events:none` because this is scenery:
   it must never eat a click meant for the page. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bd-base);
}

/* Layer 1 + 2 in one element: the gradient paints instantly and the still is
   composited over it as soon as it decodes, so there is no flash of a
   different colour between them. */
.backdrop-still {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;

  /* THE LCP ELEMENT lives inside this box -- see .backdrop-img below.
     ------------------------------------------------------------------
     This element is a <picture> now, not a div with a background. The previous
     version stacked both WebP variants into one
     `background-image: image-set(... 2400w, ... 1200w)` declaration. The `w`
     descriptor is a `srcset` feature and is invalid in `image-set()`, which
     takes resolutions (`1x`, `2x`) -- so the declaration was dropped whole,
     the backdrop rendered as flat `--bd-base` black, and the `@supports not
     (image-set(...))` fallback meant to catch exactly this never fired,
     because the feature it tested for *is* supported. The markup carries the
     variants now: `srcset` is where `w` belongs.

     What stays here is the placeholder: a 24px blurred WebP as a data URI, so
     it paints in the same frame as this stylesheet -- no request, no round
     trip. It sits UNDER the <img>, which covers it once decoded. Nothing to
     fade, nothing to sequence, and nothing left stranded on screen if the full
     image never arrives.

     No `aspect-ratio` here. It used to be declared on this box, and because
     the box is absolutely positioned with all four insets at 0, the ratio won
     the height argument: on an 825px viewport the layer measured 849px and
     hung past the fold. `object-fit` on the image does that job properly. */
  background-color: var(--bd-base);
  background-image:
    url("data:image/webp;base64,UklGRmgAAABXRUJQVlA4IFwAAADwAwCdASoYAA0APrVIn0mnJCKhMAgA4BaJZgCdACHYeiQDSHlNu3EAAPqT6DSLmw4J/XIAIRNFA9xuyrJZ3UbboLszL3SlpL7ajhkCy76YVsDJUxRZCDFmrWHAAA==");
  background-size: cover;
  background-position: 70% 62%;
  background-repeat: no-repeat;
}

/* The image itself. Fills the fixed layer and is cropped, never letterboxed.
   `object-position` is the crop the old `background-position` set: the figure
   sits low and right in this picture and the page's copy sits left, so the
   frame is held down and across rather than centred. What the reader gets
   behind the text is sky, and she stays clear of it. */
.backdrop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 62%;
}

/* The veil is what makes text readable over the picture, and it does two jobs
   at once: a dark wash for contrast under the copy, and a vignette so the
   corners fall away from the content.

   Explicitly ABOVE the image via `z-index`, and that is not a detail: the
   image now sits in a <picture> that precedes this element in the DOM, and
   two positioned siblings without z-indexes paint in document order. Stating
   it means the veil cannot end up underneath the thing it exists to soften.

   NOTE: on pages that load glass.css or terminal.css this rule is overridden
   -- those set a 100deg gradient keyed to `body[data-film]`, dark on the left
   under the copy and nearly clear on the right where the figure sits. This is
   the floor, not the final word. */
.backdrop-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 38%,
      rgba(10, 10, 10, 0.30) 0%,
      rgba(10, 10, 10, 0.66) 55%,
      rgba(10, 10, 10, 0.88) 100%),
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.42) 42%,
      rgba(26, 18, 8, 0.55) 72%,
      rgba(10, 10, 10, 0.90) 100%);
}

/* The video layer is gone, and the rules that managed it went with it: the
   phone cutoff, and the `prefers-reduced-motion` gate a still image has no
   motion to need. A narrow screen now gets the 1200px variant from `srcset`
   rather than a hidden download it was never going to play. */

/* On a phone the frame is tall and narrow, so `cover` scales to HEIGHT and
   throws away about three quarters of the width -- at 390x844 the image is
   drawn 1512px wide into a 390px window. Which quarter survives is entirely
   down to the X here, and it is the one number on this page that cannot be
   eyeballed from a desktop browser.

   It used to say 88%, which showed image-x 0.65..0.91. The figure sits at
   0.45..0.61, so every phone got clouds and no subject -- while the comment
   above it claimed she was "still in shot". 54% shows 0.40..0.66: she is in
   frame, low and central, with the copy over open sky above her.

   The Y is inert at this aspect (the image covers the height exactly, so
   there is no vertical overflow to position) and is kept for phones in
   landscape, where there is. */
@media (max-width: 620px) {
  .backdrop-still { background-position: 54% 74%; }
  .backdrop-img   { object-position: 54% 74%; }
}