/* A PHOTOGRAPHIC band, matching the treatment on My Kitchen: sage mug, speckled
   vase, candle and a soft blanket — a calm ritual still life, taken from HER OWN
   My Rhythm banner rather than anything generic.
   THE SOURCE IS CUT TO THE SLOT'S OWN 2.88:1 so `cover` barely crops. Four
   earlier attempts all showed a close-up of half a mug: a near-square photo in a
   wide slot gets sliced to a thin horizontal band, and widening the slot makes it
   WORSE, not better. Match the source aspect to the slot instead.
   The phone's screen text sits at the far left, under the transparent part of the
   mask.
   HEIGHT IS UNCHANGED: the header still sizes to its text (146px). The image is
   absolutely positioned inside it and clipped, so it adds nothing to the layout —
   `position:relative` + `overflow:hidden` on a block whose height is already set
   by its children. */
/* NO `overflow:hidden` here — it creates a block formatting context, which stops
   the last child's 6px bottom margin collapsing out and made the header grow
   146px → 152px. The band is inset to the header's own box, so it never
   overflows and does not need clipping. */
#mrxSec .mrx-head{ position:relative; }
#mrxSec .mrx-head > *{ position:relative; z-index:1; }
#mrxSec .mrx-band{
  /* `display:block` matters: as an inline span it contributed a line box and the
     header grew 146px → 152px. She asked for the height not to change. */
  display:block;
  position:absolute; top:0; right:0; bottom:0;
  /* the headline's last word reached ~19px past the band's leading edge. That
     edge is fully transparent under the mask, so nothing was actually obscured —
     but pulling the band in gives real clearance rather than relying on the fade. */
  /* MATCHED TO MY KITCHEN — 420px. Counter-intuitively a WIDER slot crops a
     photograph HARDER: `cover` scales to fill the width, so the taller the slot's
     aspect the thinner the horizontal slice it keeps. At 620px this became a
     close-up of half a mug; at 420px the whole still life stays in frame. */
  width:min(38%,420px);
  background-image:url("assets/img/img-ffc3395ae9c4.webp");
  background-size:cover;
  background-position:center center;
  z-index:0;
  pointer-events:none;
  /* fades into the page so the headline never sits on busy pixels */
  /* faded on BOTH edges — a hard right edge mid-page looked like a cropping
     mistake rather than a design choice */
  /* A drawing needs far less masking than a photograph: the heavy fade that
     stopped a photo competing with the headline was rubbing the sunrise out
     almost entirely. Line art on white already sits back — just soften the
     leading edge so it does not begin abruptly. */
  /* a photograph needs the heavier fade a drawing did not — both edges soft, so
     it settles into the page instead of ending in a hard line */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.92) 72%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.92) 72%, transparent 100%);
  opacity:.88;
}
/* below 900px the text needs the full width, so the band steps back rather than
   sitting under the headline */
@media (max-width:1100px){
  #mrxSec .mrx-band{ width:34%; opacity:.42; }
}
@media (max-width:620px){
  #mrxSec .mrx-band{ display:none; }
}
@media (prefers-reduced-motion:reduce){ #mrxSec .mrx-band{ opacity:.75; } }