/* VSR visual placements v2026-08-31.1. Ratios shared with the crop editor.
   Specificity intentionally exceeds older page-local rules. */
html body main :is(.hero:has(.hero-gallery),.artist-hero,.release-masthead){
  height:auto;min-height:0;aspect-ratio:2/1;display:block;isolation:isolate;overflow:hidden}
html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual){
  position:absolute;inset:0;display:grid;grid-template-columns:3fr 1fr;
  grid-template-rows:1fr 1fr;gap:1px;z-index:1}
html body main :is(.hero-art,.artist-frame,.release-masthead-visual>a){min-width:0;min-height:0;margin:0}
html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual)>:first-child{grid-row:1/3}
html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual) img{
  width:100%;height:100%;transform:none;filter:saturate(.78) contrast(1.06) brightness(.86)}
/* One scrim across the three hero types: the approved landing treatment. */
html body main :is(.hero:has(.hero-gallery),.artist-hero,.release-masthead)::after{
  content:'';position:absolute;inset:0 25% 0 0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,5,3,.98) 0%,rgba(8,5,3,.91) 32%,rgba(8,5,3,.32) 73.333%,transparent 97.333%),
    linear-gradient(0deg,rgba(8,5,3,.72),transparent 38% 72%,rgba(8,5,3,.16))}
html body main .artist-visual::after{display:none}
html body main :is(.hero-copy,.artist-hero-copy,.release-masthead-copy){
  position:absolute;z-index:4;left:0;bottom:0;width:67%;padding:clamp(24px,3.1vw,52px);
  text-shadow:none}
html body main .hero-copy{width:min(620px,57%)}
html body main .artist-hero-copy{width:60%}
html body main :is(.artist-hero h1,.release-masthead h1){font-size:clamp(48px,6.6vw,96px);max-width:12ch}
html body main .hero-feature-card{z-index:5;right:calc(25% + 24px)}
html body main .hero-art-meta{z-index:4}
html body main .identity-journal-grid{height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
html body main .identity-journal-grid figure{aspect-ratio:4/5;grid-column:auto}
html body main .identity-journal-grid.count-1{grid-template-columns:minmax(0,1fr) 1fr 1fr}
html body main .identity-journal-grid img{transform:none}
html body main .release-identity-grid{height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
html body main .release-identity-grid>a{aspect-ratio:4/3;grid-column:auto}
@media(max-width:768px){html body main .release-identity-grid{grid-template-columns:1fr}}
@media(max-width:1000px){
  html body main :is(.hero:has(.hero-gallery),.artist-hero,.release-masthead){
    aspect-ratio:auto;display:flex;flex-direction:column}
  html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual){
    position:relative;inset:auto;order:0;width:100%;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual)>:first-child{
    grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
  html body main :is(.hero-gallery,.artist-visual,.release-masthead-visual)>:not(:first-child){
    display:block;aspect-ratio:1;grid-row:auto}
  html body main :is(.hero:has(.hero-gallery),.artist-hero,.release-masthead)::after{display:none}
  html body main :is(.hero-copy,.artist-hero-copy,.release-masthead-copy){
    position:relative;order:1;width:100%;padding:30px 24px 32px;background:#080503}
  html body main .hero-feature-card{top:16px;right:16px;bottom:auto;width:min(240px,60%)}
  html body main :is(.hero h1,.artist-hero h1,.release-masthead h1){font-size:clamp(44px,8vw,72px)}
  html body main .identity-journal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media(max-width:520px){
  html body main :is(.hero-copy,.artist-hero-copy,.release-masthead-copy){padding:26px 18px 28px}
  html body main .hero h1{font-size:54px}
  html body main .hero-art-meta{left:12px;right:12px;bottom:12px}
  html body main .hero-art-meta strong{font-size:19px}
  html body main .hero-art-meta em{font-size:7px}
  html body main .hero-feature-card{top:12px;right:12px;width:180px}
  html body main .artist-hero .artist-cta>a:only-child{grid-column:1/-1}
  html body main .identity-journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  html body main .identity-journal-grid figure:first-child{grid-column:auto}
}