/* shared/hero.css: the page heroes on /agents/, /performance/, /trades/, /journals/ and /about/ (zp-* names), loaded
   after shared/pages.css by those five pages only. Not in pages.css: Zoo Town loads pages.css and its first screen
   is at its 200K budget. The head band sits in Dr. Yang's .hero band (styles.css + round2.css draw the gradient, the
   woodland sprigs, the two-column grid, the picture bleed and the wave); these rules only size it for the data pages.
   At 800 px and below his grid stacks and the .zp-head sizes in pages.css apply. Art: assets/hero/<page>{,-768,-sq}.webp.
   --zp-trim hides the transparent band above and below the square phone art (percent of its width): the smaller of the
   A and B bands per page, so swapping the art stays a file copy, except about (see below). Measured bands (% of 720):
   performance A 12.2 / B 14.4, trades A 11.7 / B 9.4, journals A 9.3 / B 16.1, about A 11.5 / B 1.1, agents A 0.8 / B 6.2.
   The .zp-main right after the hero gets 28 px of air so the first block does not sit on the wave (home reads ~40 px). */
.zp-hero-picture picture,.zp-hero-picture img{display:block;width:100%;height:auto}
.zp-hero .zp-head h1{text-wrap:balance}
.zp-hero+.zp-main{padding-top:28px}
@media(min-width:801px){
 .zp-hero .hero-grid{min-height:420px}
 .zp-hero .zp-head{text-align:left;padding:36px 0 40px}
 .zp-hero .zp-head h1{font-size:clamp(36px,3.4vw,48px);letter-spacing:-1.6px;line-height:1.1}
 .zp-hero .zp-head .zp-lede{max-width:520px;margin:0 0 16px}
}
@media(max-width:1150px) and (min-width:801px){.zp-hero .hero-grid{min-height:380px}}
@media(max-width:800px){
 .zp-hero .hero-grid{min-height:0}
 .zp-hero-picture{width:min(560px,100%);--zp-trim:0%}
 .zp-hero-picture img{margin:calc(var(--zp-trim) * -1) 0}
 html[data-page=performance] .zp-hero-picture{--zp-trim:12%}
 html[data-page=trades] .zp-hero-picture,html[data-page=journals] .zp-hero-picture{--zp-trim:9%}
 /* about ships the A export (11.5% band); a swap to B (1.1% band) needs this back at ~1% */
 html[data-page=about] .zp-hero-picture{--zp-trim:11%}
}