/* ---------------------------------------------------------------------------
   HERO PAINTING, v2. 2026-09-11.

   One file, loaded by every page family that carries a painting: the 48
   articles, the neighbourhood pages, and the market, zip-code and community
   reports the Functions render. It used to live inside article.css and
   article-5.css, which meant two copies and a four-hour wait on the edge cache
   before a change showed up. A separate small file with a version in its name
   publishes instantly, the way /js/consent.js and /articles/article-N.css
   already work here.

   LOAD IT AFTER the page's main stylesheet. While the old article.css and
   article-5.css are still sitting in the edge cache they carry the v1 hero
   rules; same specificity, so whichever comes last wins, and that has to be
   this file.

   What changed from v1. Owner: "a little bit taller and then more blended."
   v1 ran the art at its natural 2.2:1 and held solid ink through the first
   third. The picture now fills a set band, about 18% taller on a wide screen,
   and the dissolve starts a fifth of the way down, so most of the frame is
   already on its way into the paper by the time the headline arrives.
   -------------------------------------------------------------------------- */

.hero-art{
  max-width:1080px;margin:0 auto;line-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 20%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.26) 66%,rgba(0,0,0,.08) 82%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 0,#000 20%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.26) 66%,rgba(0,0,0,.08) 82%,transparent 97%)}

/* The sources are 2000x909. Covering a 1080x580 box crops about 8% off each
   side and keeps the full height of the composition, which is the half that
   carries the sky and the roofline. Below 1318px the band shrinks with the
   viewport and the crop closes back to nothing. */
.hero-art img{display:block;width:100%;height:clamp(360px,44vw,580px);
  object-fit:cover;object-position:50% 30%}

/* The headline rises into the last of the fade. Three page families, three
   different wrappers, one lift. */
.hero-art + .wrap > article,
.hero-art + .zwrap,
.hero-art + .cwrap{padding-top:0;margin-top:-118px;position:relative}
.hero-art + .zwrap.zhero,
.hero-art + .cwrap.chero{padding-top:0}

@media(max-width:640px){
  /* A phone gets a fixed band for the same reason it always did: at natural
     ratio the art would stand 177px tall, too short for a fade this long to
     resolve, and it ended on a hard line right above the eyebrow. */
  .hero-art{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 16%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.2) 64%,transparent 92%);
            mask-image:linear-gradient(to bottom,#000 0,#000 16%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.2) 64%,transparent 92%)}
  .hero-art img{height:356px;object-position:50% 34%}
  .hero-art + .wrap > article,
  .hero-art + .zwrap,
  .hero-art + .cwrap{margin-top:-92px}
}