.portfolio-spiral{position:relative;height:auto;background:#000;color:var(--ivory);overflow:clip}
.portfolio-spiral__sticky{position:relative;min-height:72svh;overflow:hidden}
.portfolio-spiral__scene{position:absolute;inset:0;background:transparent}
.portfolio-spiral__scene canvas{display:block;width:100%;height:100%}
.portfolio-spiral__heading{position:absolute;z-index:2;left:12vw;right:8vw;top:21vh;pointer-events:none;transition:opacity .25s}
.portfolio-spiral__heading .eyebrow{font-size:10px;letter-spacing:.2em}
.portfolio-spiral__heading h2{max-width:980px;font:400 clamp(68px,8.8vw,160px)/.8 var(--serif);letter-spacing:-.075em;text-transform:uppercase;margin:28px 0}
.portfolio-spiral__heading h2 em{color:var(--sky);text-transform:none}
.portfolio-spiral__heading p{font-size:13px;letter-spacing:.04em}
.portfolio-spiral__info{position:absolute;z-index:2;left:6vw;bottom:6vh;max-width:48vw;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;pointer-events:none}
.portfolio-spiral__info small,.portfolio-spiral__info>span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.portfolio-spiral__info h3{font:400 clamp(45px,5.3vw,100px)/.8 var(--serif);letter-spacing:-.055em;text-transform:uppercase;margin:13px 0 8px}
.portfolio-spiral__links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.portfolio-spiral__info a{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:6px;font-size:9px;font-weight:700;letter-spacing:.16em;pointer-events:auto}
.portfolio-spiral__info a[hidden]{display:none}
.portfolio-spiral__controls{position:absolute;z-index:3;right:5vw;bottom:6vh;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .3s}
.portfolio-spiral__controls button{border:1px solid var(--sky);border-radius:50%;width:42px;height:42px;background:#101311cc;color:var(--ivory);font-size:20px;cursor:pointer}
.portfolio-spiral__controls button:disabled{opacity:.36;cursor:default}
.portfolio-spiral__controls select{max-width:220px;border:0;border-bottom:1px solid var(--sky);background:var(--wine);color:var(--ivory);padding:11px;font:700 9px/1.2 sans-serif;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.portfolio-spiral__hint{position:absolute;z-index:2;right:5vw;top:5vh;font-size:9px;font-weight:700;letter-spacing:.2em;opacity:.75}
.portfolio-spiral__fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1400px;margin:0 auto;padding:4vw 6vw 10vw;list-style:none}
.portfolio-spiral__fallback li{min-width:0}
.portfolio-spiral__fallback a{display:grid;gap:10px;color:inherit}
.portfolio-spiral__fallback img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.portfolio-spiral__fallback span{font-size:9px;letter-spacing:.15em}
.portfolio-spiral__fallback strong{font:400 clamp(32px,4vw,65px)/.9 var(--serif)}
.portfolio-spiral.is-3d{height:1100svh}
.portfolio-spiral.is-3d .portfolio-spiral__sticky{position:sticky;top:0;height:100svh;min-height:0}
.portfolio-spiral.is-3d .portfolio-spiral__fallback{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portfolio-spiral.is-3d.is-touring .portfolio-spiral__info{opacity:1;transform:none}
.portfolio-spiral.is-3d.is-touring .portfolio-spiral__controls{opacity:1}
@media(max-width:700px){.portfolio-spiral__heading{left:7vw;right:7vw;top:17vh}.portfolio-spiral__heading h2{font-size:clamp(55px,13vw,100px)}.portfolio-spiral__heading p{font-size:11px;max-width:270px}.portfolio-spiral__info{left:5vw;bottom:12vh;max-width:90vw}.portfolio-spiral__info h3{font-size:clamp(43px,11vw,76px)}.portfolio-spiral__controls{right:5vw;bottom:4vh}.portfolio-spiral__controls select{max-width:130px}.portfolio-spiral__hint{top:3vh;right:5vw;font-size:7px}.portfolio-spiral__fallback{grid-template-columns:1fr;padding:5vw 5vw 15vw}}
@media(prefers-reduced-motion:reduce){.portfolio-spiral{height:auto!important}.portfolio-spiral__sticky{position:relative!important;height:auto!important;min-height:65svh!important}.portfolio-spiral__heading{opacity:1!important}.portfolio-spiral__scene{display:none}.portfolio-spiral__fallback{position:relative!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;padding:5vw 6vw 10vw!important}.portfolio-spiral__info,.portfolio-spiral__controls,.portfolio-spiral__hint{display:none}}
