html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>:is(#hero-img,img[data-kithero]),>figure.hero-photo[data-photo-hero]),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){--khs-w:min(54vw,calc(100% - 440px),680px);position:relative}
@media (min-width:900px){
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>:is(#hero-img,img[data-kithero]),>figure.hero-photo[data-photo-hero]),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){grid-template-columns:minmax(0,1fr);grid-template-areas:none;align-content:center;min-height:calc(100svh - var(--khs-top,72px));padding-right:calc(var(--khs-w) + clamp(32px,4vw,56px));box-sizing:border-box}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>:is(#hero-img,img[data-kithero]),>figure.hero-photo[data-photo-hero]),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo]))>:not(figure.hero-photo):not([data-hero-media]),
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>:is(#hero-img,img[data-kithero]),>figure.hero-photo[data-photo-hero]),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo]))>:is([data-hero-text],.hero-text,.hero-in,[data-sec-head]):not([data-hero-media])>:not([data-hero-media]){grid-area:auto/1;max-width:100%}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){display:block;overflow:hidden;position:absolute;top:0;bottom:0;right:0;left:auto;width:var(--khs-w);height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:0;grid-area:auto;order:0;z-index:1;align-self:stretch;justify-self:stretch;transform:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])) :is(#hero-img,img[data-kithero],img.kp-cover,[data-hero-media]>img,[data-hero-media] .hsw-media>img){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo]))>.visual{left:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);inset-inline-end:auto;top:auto}
}
@media (max-width:899px){
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>:is(#hero-img,img[data-kithero]),>figure.hero-photo[data-photo-hero]),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){padding-top:0}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){display:block;overflow:hidden;order:-1;grid-column:1/-1;grid-row:auto;width:100%;max-width:none;margin:0;height:clamp(260px,48svh,520px);min-height:0;max-height:none;aspect-ratio:auto;transform:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])) :is(#hero-img,img[data-kithero],img.kp-cover,[data-hero-media]>img,[data-hero-media] .hsw-media>img){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo]))>.visual{display:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]):is(:has(#hero-img,img[data-kithero]),[data-khs-slot]:has(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero]),:has([data-hero-media][data-kp-solo]),:has([data-hero-media] img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:is(:has(>:is(#hero-img,img[data-kithero])),[data-photo-hero]),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){position:relative}
}
/* a drawn hero box a photo replaces (kitphoto data-kp-solo): the photo spans the whole box, never one cell of the kit's tile grid */
[data-kp-solo].kp-has>img.kp-cover{grid-column:1/-1;grid-row:1/-1}
/* fitness_club (#hero with its .stats): the 6-track grid becomes text 40% | photo 60% to the right edge (>= 900 px); on a phone the photo runs edge to edge right under the headline */
@media (min-width:900px){
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]){grid-template-columns:minmax(var(--g),1fr) minmax(0,calc(min(1160px,100vw - 2*var(--g)) * .42)) clamp(32px,4vw,56px) minmax(0,calc(min(1160px,100vw - 2*var(--g)) * .58 - clamp(32px,4vw,56px))) minmax(var(--g),1fr);padding-block:0;align-items:stretch;min-height:calc(100svh - var(--hdr,70px))}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]{grid-area:1/2/2/3;align-self:center;padding-block:clamp(24px,4vw,56px)}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]{grid-area:1/4/2/5;aspect-ratio:auto;max-height:none;height:100%;min-height:calc(100svh - var(--hdr,70px));}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]>img.kp-cover{height:100%;object-fit:cover}
}
@media (max-width:899px){
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]{display:contents}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>*{grid-column:2/4;grid-row:auto}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>:is(.kick,.kicker){grid-row:1}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>h1{grid-row:2}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]{grid-area:3/2/4/4;aspect-ratio:4/5;max-height:62svh;width:100%}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]>img.kp-cover{height:100%;object-fit:cover}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo])>.stats{grid-row:auto}
}
/* a kitphoto solo hero box always gets its photo: kitslots' brief empty-slot hide (ks-hide, before kitphoto fills it) would collapse and re-open the big box */
html:not(#khs):not(#khs2) [data-hero-media][data-kp-solo].ks-hide{display:block!important}
/* kithero fills the house slot after the page's scripts: the slot is shown and sized from the first render (no jump when the photo lands); kithero marks
   html[data-kithero=none] when the build has no usable photo, which releases the space. Only on pages that load kithero (<html data-khs-slot>, set by the post-step). */
html[data-khs-slot]:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):not([data-kithero=none]) :is(.hero,.head.hero,header.has-hero)>figure.hero-photo[data-photo-hero][hidden]{display:block!important;background:var(--sunk,rgba(0,0,0,.06))}
/* the crossfade hero (kithero crossfade: span.hsw-media inside the box) fills the box like any other photo */
html:not(#khs):not(#khs2):not([data-l-fs=overlay]):not([data-l-fs=form]):not([data-l-fs=rail]):not([data-l-fs=search]):not([data-l-fs=story]):not([data-l-fs=split]):not([data-l-fs=sticky]):not([data-kv-kit=events]):has([data-hero-media] img[src]:not([src=""])) [data-hero-media][data-hsw-host] .hsw-media{position:absolute;inset:0;width:100%;height:100%}

@media (min-width:900px){
html:not(#_) [data-sec=hero] :has(>[data-hero-text]){container-type:inline-size}
@container (max-width:640px){
html:not(#_) .has-aside [data-hero-text]{grid-template-columns:minmax(0,1fr)}
html:not(#_) .has-aside [data-hero-text]>aside{grid-column:1;grid-row:auto;justify-self:start;width:min(100%,320px);margin-top:var(--s-4,16px)}
html:not(#_) [data-sec=hero] [data-hero-text] h1{font-size:clamp(2rem,9.5cqw,4.4rem)}
}
html:not(#_) .hero .kv-art:has(>figure.hero-photo),html:not(#_) .has-hero .kv-art:has(>figure.hero-photo){max-height:min(100%,780px)}
}
html:not(#_) .kv-art>figure.hero-photo img{object-position:50% 28%}