/* Work strip with the character */
#work.hasStrip .projectGrid{display:none}
.strip{position:relative;height:560px;margin:0 -28px -28px}
.strip canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.strip.isDragging canvas{cursor:grabbing}
.stripCaption{position:absolute;left:20px;bottom:14px;font:400 28px "VT323";letter-spacing:.04em;color:#ececec;pointer-events:none;transition:opacity .16s ease}
.stripCaption.swap{opacity:0}
.stripHint{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:1;pointer-events:none;white-space:nowrap;transition:opacity .6s ease}
.stripHint span{display:block;padding:5px 12px;font:400 22px "VT323";letter-spacing:.12em;color:#ececec;background:rgba(22,22,22,.55);animation:hintPulse 1.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.25}50%{opacity:.95}}
.strip.isMoving .stripHint,.strip.hasDragged .stripHint{opacity:0}
@media (prefers-reduced-motion:reduce){.stripHint span{animation:none;opacity:.7}}
@media (max-width:700px){.strip{height:430px;margin:0 -14px -16px}.stripCaption{left:14px;bottom:12px;font-size:22px}.stripHint{top:12px}.stripHint span{font-size:20px}}
/* keyboard / screen-reader list of the artworks: invisible, but focusing it drives the band */
.stripList{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;list-style:none}
.strip.kbFocus{outline:2px solid #ff6b2c;outline-offset:-2px}
/* page-wide layer for the guide character (character.js) */
.guide{position:absolute;left:0;top:0;will-change:transform;z-index:8;pointer-events:none;image-rendering:pixelated}
/* phones: room under the hero text for the character */
@media (max-width:700px){.site .hero{padding-bottom:260px!important}}