/* =============================================================================
   hyyryn-ground.css — 18 Aug 2026
   The photographic page ground, shared. Lifted out of hyyryn-jobshell.css the
   moment a second page wanted it, so the wash is ONE number in ONE place
   rather than a value copied into every page that uses it.

   The picture is chat-bg-home.jpg, the same file the chat uses, and it is
   PRE-PROCESSED: sky cropped, contrast pulled in, desaturated, blended against
   the page cream. It gets no filter here. The wash on top is a flat colour
   laid on as a SECOND BACKGROUND LAYER rather than a pseudo element, so the
   whole ground is one paint with nothing to composite. That is the lesson from
   the chat, where a filtered semi-transparent layer behind blurred siblings
   cost four wrong diagnoses before the real cause turned up.

   To tune: raise --hy-wash to push the photograph back, lower it to bring the
   photograph forward. Nothing else needs touching.
============================================================================= */
.hy-ground {
  --hy-wash: .55;
  background-color: var(--cream, #FAF8F3);
  background-image:
    linear-gradient(rgba(250,248,243,var(--hy-wash)), rgba(250,248,243,var(--hy-wash))),
    url('../chat-bg-home.jpg');
  background-size: cover, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* The off-canvas drawers on these pages are position:fixed and parked off to
   the right, and Chrome counts them in the document scroll width. Overflow on
   the body cannot clip a fixed descendant, its containing block is the
   viewport, so the rule has to sit on the root. clip and not hidden: hidden
   would make the root a scroll container and kill every sticky on the page. */
html:has(> body.hy-ground) {
  overflow-x: clip;
  /* my-jobs sets a cream background on html as well as body. A painted root
     stops the body background propagating to the canvas, which leaves the
     photograph confined to the body box instead of the viewport. Clearing the
     root here means every page on this class behaves the same way. */
  background-color: transparent;
}

@media (max-width: 720px) {
  /* fixed attachment repaints badly on mobile Safari */
  .hy-ground { background-attachment: scroll, scroll; }
}