/* finesse · component: melune-circle-gallery · register=brand
 * Existing paper and winter colors; moving circular works, not record mockups. */
.melune-vinyl{container-type:inline-size;margin-top:60px;padding-top:30px;border-top:1px solid #36201730;--circle-ink:var(--chocolate);--circle-paper:#edf0e9;--circle-blue:#95b5cb;--circle-gold:#cc9e4c;--circle-size:clamp(220px,48cqw,440px);--circle-ease:cubic-bezier(.22,1,.36,1)}
.circle-archive-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:23px}.circle-archive-head small{font:9px/1.6 PortfolioHei,Mono,monospace;letter-spacing:.06em}.circle-archive-head h3{font:33px/1.05 PortfolioHei,Georgia,serif;font-weight:normal;margin:13px 0 0}.circle-archive-head h3>span{display:block;font:italic 19px/1.5 PortfolioHei,Georgia,serif;margin-top:7px}
.circle-track-index{display:flex;flex-direction:column;gap:5px;align-items:start}.circle-track-index button{display:flex;gap:11px;align-items:center;min-height:35px;padding:5px 0;border:0;background:none;color:#584b48;font:13px/1.4 PortfolioHei,Georgia,serif;white-space:nowrap}.circle-track-index small{font-size:8px;opacity:.65}.circle-track-index button[aria-pressed=true]{color:var(--circle-ink);text-decoration:underline;text-underline-offset:5px}
.circle-stage{position:relative;isolation:isolate;height:clamp(440px,64cqw,580px);overflow:hidden;background:var(--circle-paper);color:var(--circle-ink);border:1px solid #66728a29;touch-action:pan-y pinch-zoom}
.circle-stage:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(5deg,#66728a05 0 1px,transparent 1px 5px);pointer-events:none}.circle-stage-edition{position:absolute;top:22px;left:27px;font:8px PortfolioHei,Mono,monospace;letter-spacing:.06em;z-index:4;transition:opacity 250ms}.circle-spine{position:absolute;left:19px;top:30%;height:34%;width:24px;background:var(--circle-blue);z-index:3;display:flex;justify-content:center;align-items:center;gap:2px;transition:opacity 350ms}.circle-spine i{display:block;width:2px;height:12px;background:#34424b}
.circle-deck{position:absolute;inset:0;transition:opacity 500ms ease;z-index:1}.circle-item{position:absolute;top:49%;left:50%;width:var(--circle-size);aspect-ratio:1;transform:translate(-50%,-50%);isolation:isolate;will-change:transform}.circle-item[data-slot=previous]{transform:translate(calc(-50% - 52cqw),-42%) scale(.76);z-index:1}.circle-item[data-slot=next]{transform:translate(calc(-50% + 52cqw),-42%) scale(.76);z-index:1}.circle-item[data-slot=current]{z-index:2}
.circle-photo{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#66728a}.circle-photo img{display:block;width:100%;height:100%;object-fit:cover}.circle-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,#141e2320,#141e2366 32%,#141e23a6 77%,#141e2370);transition:opacity 400ms}.circle-item:not([data-slot=current]) .circle-image-shade{opacity:.15}
.circle-open{position:absolute;inset:0;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;z-index:2}.circle-caption{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px;color:#f5f2e9;pointer-events:none;transition:opacity 250ms ease;text-shadow:0 2px 10px #141e2377}.circle-caption>small{font:8px/1.5 PortfolioHei,Mono,monospace;letter-spacing:.09em;margin-top:5px}.circle-caption h4{font:39px/1.03 PortfolioHei,Georgia,serif;font-weight:normal;margin:18px 0 12px;max-width:100%;overflow-wrap:anywhere}.circle-caption>p{font:7px/1.6 PortfolioHei,Mono,monospace;letter-spacing:.02em;max-width:85%;margin:0}.circle-primary-actions{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:25px;pointer-events:auto}.circle-disc-play{display:flex;justify-content:center;align-items:center;width:39px;height:39px;background:#f5f2e9;color:#34424b;border:0;border-radius:50%;font:12px PortfolioHei,Mono,monospace;cursor:pointer;text-shadow:none}.circle-details-link{min-height:30px;padding:4px 0;color:#f5f2e9;border:0;border-bottom:1px solid #f5f2e977;background:none;font:8px/1.5 PortfolioHei,Mono,monospace;cursor:pointer}.circle-item:not([data-slot=current]) .circle-caption{opacity:0;pointer-events:none}.circle-item:not([data-slot=current]) .circle-primary-actions{pointer-events:none}.is-switching .circle-caption{opacity:0;pointer-events:none}
.circle-rings{position:absolute;inset:-15px;pointer-events:none;opacity:.85;transition:opacity 350ms}.circle-rings svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--circle-gold);stroke-width:.65}.circle-rings .circle-wave-secondary{stroke:#95b5cb;stroke-width:.8;stroke-dasharray:2 3}.circle-item:not([data-slot=current]) .circle-rings{opacity:0}.is-switching .circle-rings{opacity:0}
.circle-big-number{position:absolute;left:22px;bottom:13px;z-index:3;font:62px/1 PortfolioHei,Georgia,serif;color:#66728a66;pointer-events:none;transition:opacity 300ms}.circle-stage-nav{position:absolute;bottom:20px;left:25%;right:25%;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:15px}.circle-stage-nav>span{font:6px/1.5 PortfolioHei,Mono,monospace;letter-spacing:.04em;text-align:center;color:#66728a;white-space:nowrap}.circle-stage-nav button{min-height:37px;padding:5px 0;display:flex;gap:12px;align-items:center;border:0;background:none;color:var(--circle-ink);font:8px PortfolioHei,Mono,monospace;cursor:pointer}.circle-stage-nav button>span{font:19px PortfolioHei,Georgia,serif;color:#9b733a}
.circle-expanded{position:absolute;inset:0;z-index:5;overflow:hidden;clip-path:circle(calc(var(--circle-size)*.5) at 50% 49%);opacity:0;pointer-events:none;transition:clip-path 900ms var(--circle-ease),opacity 450ms ease;background:#34424b;color:#f5f2e9}.circle-expanded-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1100ms var(--circle-ease)}.circle-expanded-shade{position:absolute;inset:0;background:linear-gradient(90deg,#141e23b8,#141e239e 55%,#141e23a6)}.is-expanded .circle-expanded{clip-path:circle(110% at 50% 49%);opacity:1;pointer-events:auto}.is-expanded .circle-expanded-image{transform:scale(1)}.is-expanded .circle-stage-edition,.is-expanded .circle-spine,.is-expanded .circle-big-number,.is-expanded .circle-stage-nav{opacity:0;pointer-events:none}.is-expanded .circle-deck{opacity:0}.circle-detail-close{position:absolute;top:18px;right:24px;z-index:3;min-height:37px;border:0;border-bottom:1px solid #f5f2e955;padding:4px 0;background:none;color:inherit;font:9px PortfolioHei,Mono,monospace;cursor:pointer}
.circle-expanded-content{position:absolute;inset:85px 8% 65px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px;align-items:center;opacity:0;transform:translateY(15px);transition:opacity 450ms ease,transform 700ms var(--circle-ease)}.is-expanded .circle-expanded-content{opacity:1;transform:none;transition-delay:260ms}.circle-expanded-content small{font:8px/1.7 PortfolioHei,Mono,monospace;letter-spacing:.06em}.circle-expanded-content h4{font:43px/1.06 PortfolioHei,Georgia,serif;font-weight:normal;margin:22px 0;overflow-wrap:anywhere}.circle-expanded-content [data-expanded-subtitle]{font:8px/1.8 PortfolioHei,Mono,monospace}.circle-expanded-play{margin-top:17px;min-height:40px;padding:8px 16px;border:1px solid #f5f2e988;border-radius:22px;background:#f5f2e9;color:#34424b;font:9px/1.5 PortfolioHei,Mono,monospace;cursor:pointer}.circle-lyrics blockquote{font:15px/1.9 PortfolioHei,Georgia,'Hiragino Mincho ProN','Yu Mincho','Songti SC',serif;margin:20px 0}.circle-lyrics blockquote>span{display:block}.circle-mv{display:block;width:100%;min-height:40px;padding:10px 0;text-align:left;border:0;border-bottom:1px solid #f5f2e966;background:none;color:inherit;font:9px/1.8 PortfolioHei,Mono,monospace;cursor:pointer}
.circle-player{padding:17px 0 0;color:var(--circle-ink)}.circle-player-line{display:flex;align-items:center;gap:15px}.circle-player-line button{border:0;background:none;min-height:35px;padding:5px 0;font:9px PortfolioHei,Mono,monospace;color:inherit;cursor:pointer;white-space:nowrap}.circle-player-title{font:13px PortfolioHei,Georgia,serif;flex:1}.circle-player-time{font:9px PortfolioHei,Mono,monospace;white-space:nowrap}.circle-seek-label{display:block;padding-top:5px}.circle-seek{display:block;width:100%;height:23px;box-sizing:border-box;margin:0;accent-color:#66728a;cursor:pointer}.circle-audio-status{font:9px/1.6 PortfolioHei,Mono,monospace;min-height:15px;margin:1px 0 0}.circle-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.melune-vinyl button:focus-visible,.melune-vinyl input:focus-visible{outline:3px solid #cc9e4c;outline-offset:5px}.circle-open:focus-visible{outline-offset:8px}.melune-vinyl button:active{opacity:.75}

@media(hover:hover) and (pointer:fine){.circle-open:hover~.circle-caption .circle-details-link{text-decoration:underline;text-underline-offset:4px}.circle-item:not([data-slot=current]):hover .circle-image-shade{opacity:0}.circle-stage-nav button:hover,.circle-track-index button:hover{text-decoration:underline;text-underline-offset:4px}.circle-disc-play:hover,.circle-expanded-play:hover{background:#e0d0b6}.circle-details-link:hover,.circle-mv:hover,.circle-detail-close:hover{text-decoration:underline;text-underline-offset:4px}}
@container(max-width:660px){.melune-vinyl{--circle-size:76cqw}.circle-stage{height:490px;--circle-size:76cqw}.circle-archive-head{display:block}.circle-track-index{margin-top:17px;flex-direction:row;flex-wrap:wrap;gap:8px 16px}.circle-track-index button{min-height:44px;font-size:12px}.circle-archive-head h3{font-size:28px}.circle-item{top:46%}.circle-caption{padding:24px}.circle-caption h4{font-size:clamp(20px,6cqw,33px);margin:13px 0 10px}.circle-caption>small{font-size:6px}.circle-caption>p{font-size:5px}.circle-primary-actions{gap:5px;margin-top:12px}.circle-disc-play{width:34px;height:34px;font-size:11px}.circle-details-link{font-size:7px;min-height:30px}.circle-stage-nav{left:12%;right:12%;bottom:20px}.circle-stage-nav>span{display:none}.circle-stage-nav button{min-height:44px;font-size:8px}.circle-stage-edition{font-size:6px;top:20px;left:18px}.circle-big-number{font-size:40px;bottom:25px;left:15px}.circle-spine{left:10px;width:15px;top:28%;height:27%}.circle-spine i{width:1px;height:10px}.circle-rings{inset:-10px}.circle-expanded-content{inset:70px 9% 35px;grid-template-columns:minmax(0,1fr);gap:20px;align-content:center}.circle-expanded-content h4{font-size:30px;margin:14px 0}.circle-expanded-content small{font-size:7px}.circle-expanded-content [data-expanded-subtitle]{font-size:7px}.circle-expanded-play{margin-top:7px;min-height:44px}.circle-lyrics blockquote{font-size:13px;line-height:1.8;margin:14px 0}.circle-mv{font-size:8px;min-height:44px}.circle-detail-close{font-size:8px;min-height:44px;right:18px}.circle-player-line{gap:9px;flex-wrap:wrap}.circle-player-title{font-size:12px}.circle-player-time{font-size:8px}.circle-player-line button{font-size:8px;min-height:44px}.circle-volume{margin-left:auto}}
@container(max-width:350px){.circle-stage{height:505px;--circle-size:82cqw}.circle-item{top:44%}.circle-caption{padding:16px}.circle-caption h4{font-size:22px;line-height:1.02;margin:10px 0 8px}.circle-caption>small{font-size:5px;letter-spacing:0}.circle-caption>p{font-size:5px;max-width:100%}.circle-primary-actions{flex-direction:row;gap:9px;margin-top:12px}.circle-disc-play{width:31px;height:31px;font-size:10px}.circle-details-link{font-size:6px}.circle-spine{left:7px;width:11px}.circle-big-number{font-size:32px;bottom:25px;left:12px}.circle-stage-nav{left:32%;right:7%;gap:8px}.circle-stage-nav button{font-size:7px;gap:5px}.circle-stage-nav button>span{font-size:15px}.circle-stage-edition{font-size:5px;left:13px}.circle-expanded-content{inset:64px 9% 23px;gap:16px}.circle-expanded-content h4{font-size:26px}.circle-lyrics blockquote{font-size:12px;line-height:1.8}.circle-player-title{flex-basis:65%;font-size:12px}.circle-player-time{order:3}.circle-player-line{gap:3px 12px}.circle-volume{order:4}.circle-audio-status{font-size:8px}}
@container(max-width:230px){.circle-stage{height:530px;--circle-size:86cqw}.circle-caption h4{font-size:19px}.circle-caption>p{display:none}.circle-primary-actions{gap:6px;margin-top:9px}.circle-caption{padding:13px}.circle-details-link{font-size:5px}.circle-disc-play{width:28px;height:28px}.circle-expanded-content h4{font-size:25px}.circle-expanded-content [data-expanded-subtitle]{font-size:6px}.circle-lyrics blockquote{font-size:11px}.circle-mv{font-size:7px}.circle-player-title{flex-basis:70%}.circle-stage-nav{left:34%;right:5%;gap:5px}.circle-stage-nav button{font-size:6px;gap:3px}}
@media(prefers-reduced-motion:reduce){.melune-vinyl *,.melune-vinyl *:before,.melune-vinyl *:after{animation:none!important;transition:none!important}.circle-item{will-change:auto}.circle-expanded{clip-path:none}.circle-expanded-content{transform:none}}

@container(max-width:660px){.circle-disc-play{width:44px;height:44px;flex:none}.circle-details-link{min-height:44px;min-width:44px}.circle-track-index button{min-height:44px}}

/* The stage reference includes a studio border; crop it only inside the circular aperture. */
.circle-photo img[src$="stage.webp"]{transform:scale(1.18)}

/* Continuous editorial rail: one large image, a cropped neighbouring chapter. */
.melune-vinyl{--circle-size:min(64cqw,480px);--circle-ease:cubic-bezier(.65,0,.35,1)}
.circle-stage{--circle-gap:.64;--circle-side-scale:.82;height:clamp(480px,80cqw,600px);border:0}
.circle-item{left:42%;top:48%;transform:translate(-50%,-50%)}
.circle-item[data-slot=previous]{transform:translate(calc(-50% - 64cqw),-50%) scale(.82)}
.circle-item[data-slot=next]{transform:translate(calc(-50% + 64cqw),-50%) scale(.82)}
.circle-caption{padding:9%;transition:none}
.circle-caption h4{font-size:clamp(30px,5.4cqw,53px);margin:18px 0 14px}
.circle-caption>small{font-size:9px}.circle-caption>p{font-size:8px;line-height:1.8}
.circle-disc-play{width:44px;height:44px}.circle-details-link{min-height:44px;font-size:9px}
.circle-primary-actions{gap:7px;margin-top:23px}
.circle-rings{inset:-16px;opacity:.8;transition:none}
.circle-rings svg{stroke-width:.55}
.circle-rings .circle-wave-secondary{stroke-width:.6;opacity:.55;stroke-dasharray:none}
.circle-item:not([data-slot=current]) .circle-rings{opacity:.55}
.is-switching .circle-rings{opacity:.8}
.is-switching .circle-caption{opacity:0}
.circle-item:not([data-slot=current]) .circle-caption{opacity:0}
.circle-item:not([data-slot=current]) .circle-photo{opacity:.83}
.circle-spine{display:none}
.circle-stage-nav{left:25%;right:25%;bottom:17px}
.circle-stage-nav>span{font-size:7px}
.circle-stage-nav button{min-height:44px;font-size:9px}
.circle-expanded{clip-path:circle(calc(var(--circle-size)*.5) at 42% 48%)}
.circle-player{padding-top:10px}
@container(max-width:660px){
 .circle-stage{--circle-size:82cqw;--circle-gap:.79;--circle-side-scale:.84;height:clamp(330px,112cqw,510px)}
 .circle-item{left:42%;top:48%}
 .circle-item[data-slot=previous]{transform:translate(calc(-50% - 79cqw),-50%) scale(.84)}
 .circle-item[data-slot=next]{transform:translate(calc(-50% + 79cqw),-50%) scale(.84)}
 .circle-caption{padding:10%}.circle-caption h4{font-size:clamp(23px,7cqw,39px);margin:11px 0}
 .circle-caption>small{font-size:6px}.circle-caption>p{font-size:6px}
 .circle-primary-actions{flex-direction:row;gap:12px;margin-top:14px}
 .circle-details-link{font-size:7px}.circle-disc-play{width:44px;height:44px}
 .circle-stage-nav{left:25%;right:9%;bottom:10px}.circle-stage-nav>span{display:none}
 .circle-big-number{font-size:36px;bottom:14px}.circle-stage-edition{font-size:6px;top:15px}
 .circle-rings{inset:-10px}.circle-expanded-content{inset:55px 8% 20px;gap:12px}
 .circle-expanded-content h4{font-size:26px;margin:10px 0}.circle-expanded-play{margin-top:0}
 .circle-lyrics blockquote{font-size:12px;margin:8px 0;line-height:1.7}
}
@container(max-width:280px){.circle-caption h4{font-size:21px}.circle-caption>p{display:none}.circle-caption>small{font-size:5px}.circle-primary-actions{gap:6px;margin-top:6px}.circle-details-link{font-size:6px}.circle-expanded-content h4{font-size:23px}.circle-lyrics blockquote{font-size:11px}}
.circle-caption>.circle-quote{font:italic 12px/1.6 PortfolioHei,Georgia,serif;max-width:78%;margin-top:13px;letter-spacing:0}
.melune-vinyl [data-circle-step]:disabled,.melune-vinyl [data-circle-track]:disabled{opacity:.5;cursor:wait;text-decoration:none}
@container(max-width:660px){.circle-caption>.circle-quote{font-size:10px;margin-top:9px}.circle-caption .circle-primary-actions{margin-top:10px}}
@container(max-width:280px){.circle-caption>.circle-quote{display:block;font-size:8px;margin-top:6px}}
.circle-item[data-slot=previous]{opacity:0}
@container(max-width:660px){.circle-stage{--circle-size:94cqw}.circle-item{left:49%}.circle-expanded{clip-path:circle(calc(var(--circle-size)*.5) at 49% 48%)}.is-expanded .circle-expanded{clip-path:circle(110% at 49% 48%)}}

.circle-volume{display:inline-flex;align-items:center;justify-content:center;min-width:44px}.circle-volume svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Balanced three-work rail: the active record is centred, neighbours mirror each other. */
.circle-item{left:50%}.circle-item[data-slot=previous]{opacity:1}
.circle-expanded{clip-path:circle(calc(var(--circle-size)*.5) at 50% 48%)}
.is-expanded .circle-expanded{clip-path:circle(110% at 50% 48%)}
@container(max-width:660px){.circle-stage{--circle-size:82cqw;--circle-gap:.68}.circle-item{left:50%}.circle-item[data-slot=previous]{transform:translate(calc(-50% - 68cqw),-50%) scale(.84)}.circle-item[data-slot=next]{transform:translate(calc(-50% + 68cqw),-50%) scale(.84)}.circle-expanded{clip-path:circle(calc(var(--circle-size)*.5) at 50% 48%)}.is-expanded .circle-expanded{clip-path:circle(110% at 50% 48%)}}
.circle-mv[hidden]{display:none}
.circle-photo img[src$="bad-summer-cover.webp"]{object-fit:cover;object-position:center}

/* A quieter overall scale for the music chapter, retaining the symmetric rail. */
.melune-vinyl{max-width:90%;margin-left:auto;margin-right:auto;--circle-size:min(58cqw,410px)}
.circle-stage{height:clamp(410px,68cqw,510px);--circle-gap:.60}
.circle-item[data-slot=previous]{transform:translate(calc(-50% - 60cqw),-50%) scale(.82)}
.circle-item[data-slot=next]{transform:translate(calc(-50% + 60cqw),-50%) scale(.82)}
.circle-archive-head h3{font-size:29px}.circle-archive-head h3>span{font-size:17px}
@container(max-width:660px){.melune-vinyl{max-width:100%}.circle-stage{height:330px;--circle-size:74cqw;--circle-gap:.64}.circle-item[data-slot=previous]{transform:translate(calc(-50% - 64cqw),-50%) scale(.84)}.circle-item[data-slot=next]{transform:translate(calc(-50% + 64cqw),-50%) scale(.84)}.circle-caption h4{font-size:clamp(21px,6.2cqw,34px)}}