/* Floating backdrop: one large picture fixed in the window, behind the page content. It stays put while the page
   (and its background color) scroll, and never catches a click. Photos and text sit above it.
   First use: the Soulful Playground globe on the Featured Contributor page (its own copy of these rules lives in
   featured-contributor.css, locked by Kim). Second use: the Hometeam logo on Performance Media.
   Markup: put <div class="floating-backdrop" aria-hidden="true"><img src="..." alt=""></div> first in <body>, and add class "has-backdrop" to <body>.
   Options (CSS variables): --fb-opacity (default .5)  --fb-width (default min(94vw,1100px))  --fb-ratio (width/height of the picture) */
.floating-backdrop{
  position:fixed; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--fb-width,min(94vw,1100px)); aspect-ratio:var(--fb-ratio,1/1);
  opacity:var(--fb-opacity,.5);
}
.floating-backdrop img{display:block;width:100%;height:100%;object-fit:contain;}
.has-backdrop .food-shell{position:relative; z-index:1;}

/* Optional: add class "has-backdrop--ring" to <body> to give the page's text the same firm ring + short glow approved on the Featured Contributor page
   (Kim, 10-17), so words stay readable over the picture. The ring takes its color from --fb-ring (set it to the page color; default cream).
   Text on a dark selected item (.is-on) and inside embeds is left alone. */
.has-backdrop--ring .food-shell :is(h1,h2,h3,p,li,dt,dd,figcaption,.pm-name,.pm-quote-text,.pm-by,.pm-num,.pm-credit,.pm-note,.pm-ig,.rn,.rh,.rq):not(.pm-rail button.is-on *,.pm-rail button.is-on,.p1-note *){
  text-shadow:
    2.00px 0.00px 0.6px var(--fb-ring,#FDF9EE),
    1.41px 1.41px 0.6px var(--fb-ring,#FDF9EE),
    0.00px 2.00px 0.6px var(--fb-ring,#FDF9EE),
    -1.41px 1.41px 0.6px var(--fb-ring,#FDF9EE),
    -2.00px 0.00px 0.6px var(--fb-ring,#FDF9EE),
    -1.41px -1.41px 0.6px var(--fb-ring,#FDF9EE),
    -0.00px -2.00px 0.6px var(--fb-ring,#FDF9EE),
    1.41px -1.41px 0.6px var(--fb-ring,#FDF9EE),
    4.00px 0.00px 1.2px var(--fb-ring,#FDF9EE),
    3.46px 2.00px 1.2px var(--fb-ring,#FDF9EE),
    2.00px 3.46px 1.2px var(--fb-ring,#FDF9EE),
    0.00px 4.00px 1.2px var(--fb-ring,#FDF9EE),
    -2.00px 3.46px 1.2px var(--fb-ring,#FDF9EE),
    -3.46px 2.00px 1.2px var(--fb-ring,#FDF9EE),
    -4.00px 0.00px 1.2px var(--fb-ring,#FDF9EE),
    -3.46px -2.00px 1.2px var(--fb-ring,#FDF9EE),
    -2.00px -3.46px 1.2px var(--fb-ring,#FDF9EE),
    -0.00px -4.00px 1.2px var(--fb-ring,#FDF9EE),
    2.00px -3.46px 1.2px var(--fb-ring,#FDF9EE),
    3.46px -2.00px 1.2px var(--fb-ring,#FDF9EE),
    6.00px 0.00px 1.6px var(--fb-ring,#FDF9EE),
    5.54px 2.30px 1.6px var(--fb-ring,#FDF9EE),
    4.24px 4.24px 1.6px var(--fb-ring,#FDF9EE),
    2.30px 5.54px 1.6px var(--fb-ring,#FDF9EE),
    0.00px 6.00px 1.6px var(--fb-ring,#FDF9EE),
    -2.30px 5.54px 1.6px var(--fb-ring,#FDF9EE),
    -4.24px 4.24px 1.6px var(--fb-ring,#FDF9EE),
    -5.54px 2.30px 1.6px var(--fb-ring,#FDF9EE),
    -6.00px 0.00px 1.6px var(--fb-ring,#FDF9EE),
    -5.54px -2.30px 1.6px var(--fb-ring,#FDF9EE),
    -4.24px -4.24px 1.6px var(--fb-ring,#FDF9EE),
    -2.30px -5.54px 1.6px var(--fb-ring,#FDF9EE),
    -0.00px -6.00px 1.6px var(--fb-ring,#FDF9EE),
    2.30px -5.54px 1.6px var(--fb-ring,#FDF9EE),
    4.24px -4.24px 1.6px var(--fb-ring,#FDF9EE),
    5.54px -2.30px 1.6px var(--fb-ring,#FDF9EE),
    0 0 6px var(--fb-ring,#FDF9EE),
    0 0 12px color-mix(in srgb, var(--fb-ring,#FDF9EE) 70%, transparent),
    0 0 20px color-mix(in srgb, var(--fb-ring,#FDF9EE) 40%, transparent);
}