.hi-art{display:block;width:100%;height:auto}
.hi-particle-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}
.artwork{transform:translate3d(var(--art-x,0px),var(--art-y,0px),0) scale(var(--art-zoom,1))}
/* In the split gallery, enlarge both forms and bring their fields into the middle.
   The central overlap is approximately 1/phi of the viewport. */
@media(min-width:1101px){
 .essay-card .artwork{--art-zoom:1.4}
 .essay-card:nth-child(odd) .artwork{--art-x:17vw}
 .essay-card:nth-child(even) .artwork{--art-x:-17vw}
}
.title-art>.artwork{mask-image:radial-gradient(ellipse 50% 50% at center,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 40%,transparent 100%)}
.field-ready .hi-particle-field{opacity:1}
.field-ready .artwork{visibility:hidden}
/* An explicit outgoing zoom works even without cross-document transition APIs. */
.art-navigating main,.art-navigating .site-footer{opacity:0;transition:opacity 420ms ease;pointer-events:none}
.art-arriving .article-header h1{animation:hi-title-arrive 800ms cubic-bezier(.22,1,.36,1) both}
.art-returning main,.art-returning .site-footer{opacity:var(--return-opacity,0);transition:none;pointer-events:none}
@keyframes hi-title-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.art-arriving .article-header h1{animation:none}}
@media print{.hi-particle-field,.art-wash{display:none!important}.artwork{visibility:hidden!important}}