/* Portfolio artwork stays quiet until it is explored. */
.project-art::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--accent-rgb),.24),rgba(0,0,0,.55));pointer-events:none;z-index:3;opacity:1;transition:opacity .25s}
.project-card:hover .project-art::after,.project-card:focus-visible .project-art::after,.project-card.is-open .project-art::after{opacity:0}
.project-art.is-preview::after{display:none}
@media(pointer:coarse),(hover:none){#fox-canvas{touch-action:none}}
/* Fit the complete pinned story on phones, including shorter screens. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .build-story{height:205svh;min-height:950px}
 .story-sticky{position:sticky;top:77px;height:calc(100svh - 77px);min-height:0;max-height:none;padding-block:12px;overflow:hidden;justify-content:center}
 .story-topline>.micro{display:none}.story-layout{display:flex;flex-direction:column;gap:0;min-height:0;flex:0 1 auto}
 .story-copy{padding-top:10px;align-self:stretch}.story-copy h2{font-size:clamp(26px,4.5svh,37px)}
 .story-copy>p{margin-top:8px;font-size:10px;line-height:1.6}.story-current{margin-top:8px}.story-current>p{font-size:9px;line-height:1.4}
 .story-visual{width:min(100%,480px);min-height:0;margin-top:4px;flex:0 1 auto}
 #story-canvas{max-height:31svh;width:100%;object-fit:contain}
 .story-stages{margin-top:8px;padding-bottom:9px}.story-stages>span{font-size:7px}.story-stages b{margin-left:3px}
}
@media(max-width:760px) and (max-height:600px) and (prefers-reduced-motion:no-preference){.story-copy>p,.story-current{display:none}.story-copy h2{font-size:25px}.story-visual{max-width:360px}#story-canvas{max-height:39svh}}
@media(prefers-reduced-motion:reduce){.project-art::after{transition:none}}