/* Set page: one variation of an artwork — "One by one" and "Orbit" views of the same pieces */
.set{position:relative}
.set-top{position:fixed;top:5.2rem;left:0;right:0;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;z-index:6;pointer-events:none;transition:top .5s var(--ease-out)}
.set-top>*{pointer-events:auto}
html:has(.nav.is-hidden) .set-top{top:1.1rem}
.set-top .crumb{margin:0;font-size:.95rem}
.switch{display:flex;border:1px solid var(--line);border-radius:99px;padding:4px;background:rgba(13,9,6,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.switch button{display:flex;flex-direction:column;align-items:center;padding:.35rem 1.3rem;border-radius:99px;color:var(--cream-dim);transition:background .4s,color .4s;line-height:1.2}
.switch button .bo{font-size:1.2rem}
.switch button .en{font-size:.9rem;color:inherit}
.switch button.on{background:var(--saffron);color:var(--ink)}

/* ── one by one ── */
/* one-by-one = a scroll scene: a track (height = 100svh + 60svh per extra piece) with a sticky stage inside; scrolling picks the symbol */
.v-one{position:relative;height:calc(100svh + (var(--n,8) - 1) * 60svh)}
.v-one.static{height:auto}
.v-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:8.4rem var(--pad) 1.2rem}
.v-one.static .v-pin{position:relative;height:auto;min-height:100svh}
.set-prog{position:absolute;left:calc(var(--pad) - .35rem);top:26%;bottom:22%;width:1px;background:var(--line)}
.set-prog i{position:absolute;left:-5px;top:0;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 0 22px var(--accent);will-change:transform}
.set-stage{flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(1.2rem,5vw,5rem);max-width:1300px;width:100%;margin:0 auto}
.set-fig{display:grid;place-items:center;position:relative}
.set-fig::before{content:'';position:absolute;width:125%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow,#C9A96E) 34%,transparent),transparent 62%);filter:blur(12px);pointer-events:none}
.set-fig .frame{position:relative}
.set-fig .frame{width:min(100%,min(40vh * .75,460px));width:min(100%,clamp(220px,42vh,420px))}
.set-fig .halo img,.o-card-d .halo img{position:absolute;inset:12% 10% 9%;width:80%;height:79%;max-height:none;margin:auto;object-fit:contain}
.set-txt{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.set-name{font-family:var(--f-bo);font-weight:400;font-size:clamp(3.2rem,9vw,8.5rem);line-height:1.35;color:var(--cream);text-shadow:0 4px 0 rgba(13,9,6,.4),0 0 40px rgba(13,9,6,.5)}
.set-en{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.set-en .n{font-family:var(--f-disp);font-size:clamp(1.6rem,3.2vw,2.5rem);color:var(--saffron-hi)}
.set-en .sa{font-family:var(--f-disp);font-style:italic;color:var(--cream-dim)}
.set-line{display:flex;flex-direction:column;gap:.4rem;max-width:34rem;padding:1rem 1.3rem;border-radius:16px;background:rgba(13,9,6,.6);border:1px solid var(--line)}
.set-line .bo{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.8}
.set-line .en{color:var(--cream)}
.set-arrows{display:flex;gap:.8rem;margin-top:.4rem}
.set-arrow{width:58px;height:58px;border-radius:50%;border:2px solid var(--saffron);display:grid;place-items:center;color:var(--saffron-hi);background:rgba(13,9,6,.55);transition:background .4s,color .4s}
.set-arrow:hover{background:var(--saffron);color:var(--ink)}
.set-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.set-thumbs{display:flex;gap:.7rem;justify-content:center;overflow-x:auto;padding:.5rem;max-width:100%;margin:0 auto;scrollbar-width:none}
.set-thumbs::-webkit-scrollbar{display:none}
.set-thumb{flex:none;width:clamp(48px,7vw,70px);aspect-ratio:3/4;border-radius:999px 999px 8px 8px;border:2px solid var(--line);overflow:hidden;opacity:.6;transition:opacity .3s,border-color .3s,transform .5s var(--ease-out)}
.set-thumb .halo{position:absolute;inset:0;display:grid;place-items:center;padding:16% 10% 8%;background:radial-gradient(110% 80% at 50% 34%,color-mix(in srgb,var(--tone) 38%,#1B130D),#0C0805)}
.set-thumb{position:relative}
.set-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.set-thumb:hover{opacity:.9}
.set-thumb.on{opacity:1;border-color:var(--saffron-hi);transform:translateY(-5px)}

/* ── orbit ── */
.v-orbit{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;z-index:5;padding-top:4rem}
.v-orbit[hidden],.v-one[hidden]{display:none}
.o-stage{perspective:1500px;width:100%;height:100%;display:grid;place-items:center;cursor:grab}
.o-stage.drag{cursor:grabbing}
.o-ring{position:relative;width:var(--cw);height:var(--ch);transform-style:preserve-3d;margin-top:-13vh}
.o-card{position:absolute;inset:0;border-radius:999px 999px 16px 16px;padding:6px;background:linear-gradient(165deg,#F6E2B0,#B88F4A 26%,#6E5127 50%,#C9A96E 76%,#F6E2B0);backface-visibility:hidden;transform:rotateY(calc(var(--i)*45deg)) translateZ(var(--R));box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.o-card .halo{position:absolute;inset:6px;border-radius:inherit;display:grid;place-items:center;padding:14% 10% 10%;overflow:hidden;background:radial-gradient(110% 80% at 50% 34%,color-mix(in srgb,var(--tone) 38%,#1B130D),#0C0805)}
.o-card img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(20,10,40,.4))}
.o-front{position:fixed;left:0;right:0;bottom:clamp(3.6rem,10vh,6rem);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.1rem;z-index:6}
.o-front .bo{font-size:clamp(2.2rem,6vw,4.5rem);color:var(--cream);line-height:1.5;text-shadow:0 3px 0 rgba(13,9,6,.45),0 0 30px rgba(13,9,6,.5)}
.o-front .en{font-size:1.3rem;color:var(--saffron-hi)}
.o-hint{position:fixed;left:0;right:0;bottom:.9rem;text-align:center;color:var(--cream-dim);pointer-events:none;z-index:6}
.o-detail{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem;background:rgba(13,9,6,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);visibility:hidden;opacity:0}
.o-card-d{position:relative;width:min(540px,100%);max-height:90svh;overflow:auto;border:2px solid var(--saffron);border-radius:22px;background:var(--ink-2);padding:clamp(1.4rem,4vw,2.2rem);display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.o-card-d .frame{width:min(60%,210px)}
.o-card-d .nm{font-family:var(--f-bo);font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.4;color:var(--cream)}
.o-card-d .set-en{justify-content:center}
.o-card-d .set-line{align-items:center;background:transparent;border:0;padding:0}
.o-x{position:absolute;top:.8rem;right:.8rem;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--saffron-hi);z-index:2}
.o-x:hover{background:var(--saffron);color:var(--ink)}
.o-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

@media (max-width:820px){
  .v-pin{padding-top:9.4rem}
  .set-prog{left:.5rem}
  .set-stage{grid-template-columns:1fr;gap:.8rem;align-content:center}
  .set-fig .frame{width:clamp(160px,30vh,250px)}
  .set-txt{align-items:center;text-align:center}
  .set-en{justify-content:center}
  .set-line{align-items:center}
  .set-name{font-size:clamp(3rem,16vw,5rem)}
  .set-top{justify-content:center}
}