/* Written on the site, not generated: the half-height painting behind the hero of each industry page and page post.
   scripts/port-brand-pages.py marks the hero's sky as .hero-art and names its painting in --art
   (public/painted/heroes/<slug>.webp). demo.js sizes the sky to reach the foot of the hero. */
.ind-sky.hero-art {
  background: var(--art) right 42% / cover no-repeat;
  /* paper shows through on the left, where the headline sits, and the painting eases into the page at its foot */
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%), linear-gradient(to right, rgba(0,0,0,.28) 0%, rgba(0,0,0,.5) 30%, #000 62%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%), linear-gradient(to right, rgba(0,0,0,.28) 0%, rgba(0,0,0,.5) 30%, #000 62%);
  mask-composite: intersect;
}
/* a post's words sit in a centred column, so the paper shows through further across */
.ind-sky.hero-art:has(+ .rs-hero) {
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%), linear-gradient(to right, rgba(0,0,0,.22) 0%, rgba(0,0,0,.3) 52%, #000 74%);
  mask: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%), linear-gradient(to right, rgba(0,0,0,.22) 0%, rgba(0,0,0,.3) 52%, #000 74%);
  -webkit-mask-composite: source-in; mask-composite: intersect;   /* the mask shorthand resets the composite */
}
/* the hero fills half the screen under the menu bar, its words at the foot */
.hero-art + .ind-hero { min-height: calc(50svh - 56px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 40px; box-sizing: border-box; }
.hero-art + .ind-hero .wrap { width: 100%; }
.hero-art + .ind-hero .sub { padding-bottom: 36px; }
.hero-art + .rs-hero { padding-bottom: 36px; }
.hero-art + .ind-hero h1, .hero-art + .ind-hero .ind-lede, .hero-art + .rs-hero .rs-by p, .hero-art + .rs-hero .rs-eyebrow { text-shadow: 0 0 18px var(--paper), 0 0 2px var(--paper); }
.hero-art + .ind-hero .sector { color: var(--ink); background: var(--paper); padding: 4px 8px; }

/* phones: a shorter band, with more of the paper showing behind the words */
@media (max-width: 900px) {
  .ind-sky.hero-art {
    background-position: 70% 40%;
    -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
    mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  }
  .hero-art + .ind-hero { min-height: 40svh; }
  .hero-art + .rs-hero .rs-by p { color: var(--ink); }
}