/* Editorial hover: keep the grid still and let the artwork carry the motion. */
.project{isolation:isolate}
.project::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.32);opacity:0;transition:opacity .35s ease}
.project img{transition:transform .8s cubic-bezier(.2,.65,.3,1)}
.caption{z-index:2;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.65,.3,1)}
.project:focus-within::after{opacity:1}
.project:focus-within .caption{opacity:1;transform:translateY(0)}
.caption h2{transition:letter-spacing .45s ease}
.caption p{transition:opacity .35s ease}
.brand img,.footer-brand img{transition:opacity .25s ease}
nav a{transition:opacity .25s ease}
nav a::after{transition:width .3s cubic-bezier(.2,.65,.3,1)}
.switch button{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.back-top{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s ease}
.close{transition:opacity .25s ease,transform .3s ease}
@media(hover:hover) and (pointer:fine){
 .project:hover::after{opacity:1}
 .project:hover img{transform:scale(1.035)}
 .project:hover .caption{opacity:1;transform:translateY(0)}
 .project:hover .caption h2{letter-spacing:.025em}
 .project:hover .caption p{opacity:1}
 .brand:hover img{opacity:.65}
 .footer-brand:hover img{opacity:.85}
 nav a:hover::after{width:100%}
 nav:has(a:hover) a:not(:hover){opacity:.5}
 .switch button:not(.selected):hover{background:#ededed;color:#191919}
 .switch button.selected:hover{background:#3b3b3b}
 .back-top:hover{background:#e5e5e5;border-color:#e5e5e5;color:#191919;transform:translateY(-3px)}
 .close:hover{opacity:.65;transform:rotate(90deg)}
}
.switch button:active{box-shadow:inset 0 0 0 1px #aaa}
.back-top:active{transform:translateY(0)}
@media(hover:none),(pointer:coarse){
 .project:hover img{transform:none}
 .project::after{opacity:0}
 .project:active::after{opacity:1}
 .project:active .caption{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 .project:hover img,.project:hover .caption,.back-top:hover,.close:hover{transform:none}
}

/* Portfolio captions: slightly larger at every breakpoint. */
.caption h2{font-size:15px}.caption p{font-size:12px}
@media(min-width:1800px){.caption h2{font-size:19px}.caption p{font-size:15px}}
@media(max-width:600px){.caption h2{font-size:12px}.caption p{font-size:10px}}