/* A single motion study: leave the rest of the website's composition alone. */
[data-j-scroll-sample]{scroll-margin-top:calc(var(--jh-toolbar,0px) + 140px)}
[data-j-scroll-sample] .jh-heading{display:grid;grid-template-columns:max-content auto minmax(0,1fr);gap:10px;align-items:center;margin-bottom:20px}
[data-j-scroll-sample] .jh-heading h2{position:relative;isolation:isolate}
.j-scroll-ink{position:absolute;inset:auto -4px -.02em;height:.24em;z-index:-1;pointer-events:none;background:var(--jh-yellow);opacity:.42;mask:url('home/paint-red-web.png') center/100% 180% no-repeat;transform-origin:0 50%}
.j-scroll-score{display:block;justify-self:end;width:100%;max-width:310px;height:auto;color:var(--jh-blue);opacity:.78;pointer-events:none;overflow:visible}
[data-j-scroll-sample] .jh-gallery{padding-block:22px 24px}
[data-j-scroll-sample].is-scroll-ready .jh-gallery>figure{transition:none}
[data-j-scroll-sample].is-scroll-active .jh-gallery>figure{will-change:transform}
[data-j-scroll-sample][data-scroll-mode=static] .jh-rays path{opacity:1!important;transform:none!important;animation:none!important}
@media(max-width:1100px){.j-scroll-score{max-width:240px}[data-j-scroll-sample] .jh-gallery{padding-block:18px 20px}}
@media(max-width:767px){
 [data-j-scroll-sample]{scroll-margin-top:calc(var(--jh-toolbar,0px) + 106px)}
 [data-j-scroll-sample] .jh-heading{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;margin-bottom:8px}
 .j-scroll-score{grid-column:1/-1;width:180px;max-width:60%;opacity:.7}
 [data-j-scroll-sample] .jh-gallery{padding-block:12px 14px}
}
@media(prefers-reduced-motion:reduce){
 [data-j-scroll-sample] .j-scroll-ink,[data-j-scroll-sample] .j-scroll-score,[data-j-scroll-sample] .j-score-note,[data-j-scroll-sample] .j-score-reveal{animation:none!important;transition:none!important}
}