.concept-viewer{position:relative;width:100%;margin:24px auto 0;background:transparent;border-radius:16px;overflow:hidden;touch-action:pan-y;outline-offset:5px;cursor:grab;user-select:none}
.concept-viewer.is-dragging{cursor:grabbing}
.concept-stage{position:relative;width:100%;height:clamp(340px,49vw,650px);perspective:1400px}
.concept-card{position:absolute;top:50%;left:50%;width:min(43%,450px);padding:0;border:0;background:transparent;transform:translate(-50%,-50%) translateX(var(--x)) scale(var(--scale)) rotateY(var(--angle));opacity:var(--opacity);z-index:var(--z);transition:transform .45s ease,opacity .45s ease;cursor:pointer;box-shadow:0 14px 34px #0003;visibility:visible}
.concept-card[hidden]{display:none}
.concept-card{background-size:cover;background-position:center;aspect-ratio:1122/1402}
.concept-card img{display:block;width:100%;height:auto;pointer-events:none}
.concept-card:focus-visible{outline:3px solid #78716b;outline-offset:4px}
.concept-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:44px;height:56px;border:0;border-radius:8px;background:#ffffffd9;color:#686460;font:48px/1 Arial,sans-serif;cursor:pointer}
.concept-arrow:hover{background:#fff;color:#222}
.concept-prev{left:16px}.concept-next{right:16px}

.concept-dots{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.concept-dot{border:0;padding:10px;background:transparent;cursor:pointer}
.concept-dot::after{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#d2ceca}
.concept-dot[aria-current="true"]::after{background:#514b46}
.concept-hint{text-align:center;font-size:12px;color:#999;margin:8px 0 0}
@media(max-width:600px){.concept-stage{height:clamp(340px,98vw,540px)}.concept-card{width:65%}.concept-arrow{width:30px;height:46px;font-size:38px}.concept-prev{left:5px}.concept-next{right:5px}.concept-hint{font-size:11px}.concept-viewer{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.concept-card{transition:none}}

/* Keep artwork still while hovering or focusing its card. */
main .concept-card img, main .concept-card:hover img, main .concept-card:focus-visible img{transform:none;transition:none}

/* Fit the complete poster within the stage, leaving space at both edges. */
.concept-stage{container-type:size}
.concept-card{width:min(43cqw,450px,calc((100cqh - 64px)*1122/1402));aspect-ratio:1122/1402;background-size:contain;background-repeat:no-repeat}
.concept-card img{width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:600px){.concept-card{width:min(65cqw,calc((100cqh - 64px)*1122/1402))}}

.concept-card,.concept-card img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}