.portfolio-fade{position:relative;width:100%;max-width:1200px;margin-inline:auto;scroll-margin-top:100px}
.portfolio-fade + .project-caption{max-width:1200px;margin-inline:auto}
.works .project-image.portfolio-fade-stage{position:relative;aspect-ratio:1672 / 941;background:#f3f1f1;isolation:isolate}
.works .portfolio-fade-stage .portfolio-fade-slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;z-index:0;transform:none;transition:none}
.works .portfolio-fade-stage:hover .portfolio-fade-slide{transform:none}
.works .portfolio-fade-stage .portfolio-fade-slide.is-active{opacity:1;z-index:1}
.works .portfolio-fade-stage .portfolio-fade-slide.is-entering{opacity:0;z-index:2;transition:opacity 1200ms ease-in-out}
.works .portfolio-fade-stage .portfolio-fade-slide.is-entering.is-visible{opacity:1}
.portfolio-fade-controls{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px;height:44px;color:#c4b7a9}
.portfolio-fade-controls[hidden]{display:none}
.portfolio-fade-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:color .2s,background .2s}
.portfolio-fade-controls button:hover{color:#ff7900;background:rgba(255,255,255,.045)}
.portfolio-fade-controls button:focus-visible,.portfolio-fade-stage:focus-visible{outline:2px solid #ff7900;outline-offset:4px}
.portfolio-fade-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.portfolio-fade-controls [hidden]{display:none!important}
.portfolio-fade-dots{display:flex;align-items:center;margin:0 8px}
.portfolio-fade-dots button{width:34px}
.portfolio-fade-dots span{width:5px;height:5px;border-radius:8px;background:#645e57;transition:width .3s,background .3s}
.portfolio-fade-dots button[aria-current=true] span{width:23px;background:#ff7900}
.portfolio-fade-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.portfolio-fade{scroll-margin-top:84px}.portfolio-fade-controls{margin-top:6px;gap:0}.portfolio-fade-dots{margin:0 4px}.portfolio-fade-dots button{width:30px}}
@media(prefers-reduced-motion:reduce){.works .portfolio-fade-stage .portfolio-fade-slide.is-entering,.portfolio-fade-dots span{transition:none}}