/* Let the portrait dissolve into the page instead of revealing its rectangular frame. */
.hero{background:none}.hero-art{inset:-48px -8% -30px 40%;overflow:visible}.hero-art .drummer-theme{content:normal;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;opacity:.97;filter:saturate(.82);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,#000 57%,#000000d9 68%,#0000007a 81%,#00000024 92%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 40%,#000 57%,#000000d9 68%,#0000007a 81%,#00000024 92%,transparent 100%);mask-composite:add;-webkit-mask-composite:source-over}.hero-art .drum-ring{opacity:.16}.hero-art .helix-front{mask-image:linear-gradient(180deg,#000 0%,#000 12%,transparent 24%,transparent 62%,#000 78%,#000 88%,transparent 98%);opacity:.65}.hero-art .helix-back{opacity:.6}.hero-art .art-note{right:35px}.hero[data-portrait=rhythm] .drummer-theme{object-position:50% 40%}
@media(max-width:850px) and (min-width:601px){.hero-art{left:39%;right:-8%}}
@media(max-width:600px){.hero-art{top:auto;left:-8%;right:-8%;bottom:5px;height:370px}.hero-art .drummer-theme{object-position:50% 35%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,#000 58%,#000000c7 72%,#00000059 86%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,#000 58%,#000000c7 72%,#00000059 86%,transparent 100%)}.hero[data-portrait=rhythm] .drummer-theme{object-position:50% 40%}.hero-art .helix-back,.hero-art .helix-front{left:0;right:0;width:100%}.hero-art .art-note{right:28px;bottom:45px}}