/* Scroll-over background image: the picture stays put while the page scrolls over it.
   A full-width section clips a viewport-sized fixed image, so the image only shows inside the section and holds still behind the text above and below.
   Built from the site's own --cno-* properties. No JavaScript. */
.cno-scrollbg{position:relative;box-sizing:border-box;width:100vw;max-width:none;min-height:max(100vh,35rem);margin:3.75rem calc(50% - 50vw);padding:0;background:var(--cno-gray-100)}
.cno-scrollbg__window{position:absolute;inset:0;clip:rect(0,auto,auto,0);overflow:hidden}
.cno-scrollbg .cno-scrollbg__img{position:fixed;top:0;left:0;width:100%;max-width:none;height:100vh;object-fit:cover;object-position:center}
.cno-scrollbg__window::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(0,0,0,.35));pointer-events:none}

/* caption box (option 1): the photo caption sits on the image */
figure.cno-scrollbg .cno-scrollbg__caption{position:absolute;top:50%;left:2.5rem;z-index:1;box-sizing:border-box;max-width:22.5rem;margin:0;padding:1.25rem;transform:translateY(-50%);background:rgb(34 34 34 / .82);color:var(--cno-white);font:400 1rem/1.5rem var(--cno-base-font-family)}

/* pull quote (option 2): a quote from the story over the image, the caption as a credit line */
.cno-scrollbg--quote .cno-scrollbg__window::after{background:rgba(0,0,0,.42)}
figure.cno-scrollbg .cno-scrollbg__quote{position:absolute;border:0;padding:0;quotes:none;top:50%;left:50%;z-index:1;box-sizing:border-box;width:calc(100% - 2.5rem);max-width:43.75rem;margin:0;transform:translate(-50%,-50%);color:var(--cno-white);text-align:center}
figure.cno-scrollbg .cno-scrollbg__quote p{margin:0;color:inherit;font:600 1.875rem/2.375rem var(--cno-serif-font-family)}
figure.cno-scrollbg .cno-scrollbg__quote footer{color:inherit;margin-top:1.5rem;font:700 1rem/1.25rem var(--cno-base-font-family);text-transform:uppercase;letter-spacing:.06em}
figure.cno-scrollbg .cno-scrollbg__quote footer::before{content:"";display:block;width:3.125rem;height:1px;margin:0 auto 1rem;background:var(--cno-gray-900);opacity:.6}
figure.cno-scrollbg .cno-scrollbg__credit{position:absolute;bottom:1.25rem;left:1.25rem;right:1.25rem;z-index:1;max-width:40rem;margin:0;color:var(--cno-white);font:400 .8125rem/1.1rem var(--cno-base-font-family);text-shadow:0 1px 3px rgba(0,0,0,.7)}

@media (max-width:781px){
  .cno-scrollbg{margin-top:2.5rem;margin-bottom:2.5rem}
  figure.cno-scrollbg .cno-scrollbg__caption{top:auto;right:1rem;bottom:1rem;left:1rem;max-width:none;transform:none}
  figure.cno-scrollbg .cno-scrollbg__quote p{font-size:1.5rem;line-height:1.875rem}
}
/* people who ask for less motion get a normal, scrolling image */
@media (prefers-reduced-motion:reduce){
  .cno-scrollbg .cno-scrollbg__img{position:absolute;height:100%}
}