/* Paper sleeves and compact discs, with the original artwork left intact. */
.cd-collection{--cd-paper:#eeede7;--cd-ink:#242724;--cd-muted:#6b6d66;--cd-line:#c9cbc0;--cd-sleeve-size:clamp(250px,26vw,334px);--cd-step:clamp(170px,20vw,250px);padding:0 0 25px;min-width:0}
.cd-collection-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0 22px;font-size:9px;line-height:1.5;letter-spacing:.07em;color:var(--cd-muted)}
.cd-collection-topline p{font-size:10px;letter-spacing:0}
.cd-stage{position:relative;isolation:isolate;height:clamp(420px,39vw,530px);overflow:hidden;background:#e2e5da;border:1px solid #d7dccd;perspective:1600px;perspective-origin:50% 43%;touch-action:pan-y;user-select:none;--cd-drag:0px}
.cd-stage::before{content:none}
.cd-stage-floor{position:absolute;left:10%;right:10%;height:1px;top:84%;background:#c0c8b5;z-index:-1}
.cd-stage-floor::after{content:'';position:absolute;width:42%;height:26px;left:29%;top:-12px;background:#6d756522;filter:blur(16px);border-radius:50%}
.cd-card{position:absolute;left:50%;top:49%;width:var(--cd-sleeve-size);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transform:translate(-50%,-50%) translate3d(calc(var(--cd-offset) * var(--cd-step) + var(--cd-drag)),0,var(--cd-depth)) rotateY(var(--cd-turn)) rotateZ(var(--cd-tilt)) scale(var(--cd-scale));transition:transform .72s cubic-bezier(.22,.68,.24,1),opacity .5s,filter .5s;opacity:.8;filter:saturate(.82);-webkit-tap-highlight-color:transparent}
.cd-card.is-active{opacity:1;filter:none;cursor:pointer}
.cd-card.is-distant{opacity:.42;filter:saturate(.5)}
.cd-card.is-outside{opacity:0;pointer-events:none;visibility:hidden}
.cd-card:disabled{cursor:default}
.cd-card:focus-visible{outline:none}
.cd-sleeve{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s}
.cd-sleeve-back{position:absolute;inset:0;background:#d9ddce;border:1px solid #b7c0ab;transform:translateZ(-3px);box-shadow:0 18px 23px -13px #26302066,2px 3px 4px #26302044}
.cd-sleeve-front{display:block;position:absolute;inset:0;z-index:4;background:#e9ebdf;border:8px solid #e9ebdf;box-shadow:inset 0 0 0 1px #24272412,1px 2px 3px #26302029;transform:translateZ(2px);transition:transform .55s cubic-bezier(.22,.68,.24,1),box-shadow .25s}
.cd-sleeve-front>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cd-card.is-active:focus-visible .cd-sleeve-front{box-shadow:0 0 0 3px var(--accent,#9d412b),0 0 0 7px #eeede7b3}
.cd-cover-crop{display:block;position:relative;overflow:hidden;width:100%;height:100%;background:#e9ebdf}
.cd-cover-crop>img{display:block;position:absolute;max-width:none!important;max-height:none!important;height:auto!important;pointer-events:none}
.cd-spine{position:absolute;z-index:5;left:0;top:0;bottom:0;width:4px;background:#aab39d;transform:translateZ(3px);box-shadow:1px 0 2px #28302020}
.cd-envelope-flap{position:absolute;z-index:3;top:1px;left:1px;right:1px;height:35%;clip-path:polygon(0 0,100% 0,50% 100%);background:#d4dac7;transform-origin:50% 0;transform:translateZ(-1px) rotateX(0deg);transition:transform .5s cubic-bezier(.3,.6,.3,1);box-shadow:0 2px 3px #26302040}
.cd-disc{display:block;position:absolute;width:89%;height:89%;top:5.5%;left:21%;border-radius:50%;z-index:1;background:conic-gradient(from -25deg,#bac2c0 0deg,#f4f6f3 32deg,#a0ada9 60deg,#d4ddd6 89deg,#eee8e9 123deg,#bac2c0 150deg,#f8f8f4 181deg,#b4c2c4 213deg,#d7ded3 250deg,#eee8e9 282deg,#9daaa6 319deg,#f3f5f0 346deg,#bac2c0 360deg);box-shadow:inset 0 0 0 1px #7f8983,inset 0 0 0 5px #eef0ea70,1px 2px 3px #22302044;mask-image:radial-gradient(circle at center,transparent 0 6.2%,#000 6.6% 100%);-webkit-mask-image:radial-gradient(circle at center,transparent 0 6.2%,#000 6.6% 100%);transform:translateZ(-2px) rotate(-12deg);transition:transform .65s cubic-bezier(.22,.68,.24,1)}
.cd-disc::before{content:'';position:absolute;inset:35%;border-radius:50%;border:1px solid #919c91;background:#d7ddd075;box-shadow:inset 0 0 0 8px #eff1e933}
.cd-disc::after{content:'';position:absolute;inset:2.5%;border-radius:50%;border:1px solid #f7f9f470}
.cd-disc-label{position:absolute;left:20%;right:20%;top:72%;text-align:center;color:#485044;font-size:8px;letter-spacing:.1em;line-height:1.6;transform:rotate(12deg)}
.cd-disc-label>span{font-size:6px;letter-spacing:.08em}
.cd-card-hint{position:absolute;z-index:6;bottom:-37px;left:0;right:0;display:flex;justify-content:center;gap:22px;align-items:center;color:var(--cd-ink);font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;white-space:nowrap}
.cd-card-hint>span{font-size:17px;line-height:1}
.cd-card.is-active .cd-card-hint{opacity:1;transform:none}
.cd-card.is-active:hover .cd-disc,.cd-card.is-active:focus-visible .cd-disc{transform:translate3d(13%,0,-2px) rotate(12deg)}
.cd-card.is-active:hover .cd-sleeve{transform:translateY(-3px)}
.cd-card.is-opening .cd-envelope-flap{z-index:6;transform:translateZ(2px) rotateX(165deg)}
.cd-card.is-opening .cd-disc{transform:translate3d(42%,-4%,-2px) rotate(90deg)}
.cd-card.is-opening .cd-sleeve-front{transform:translate3d(0,7px,4px) rotateZ(-2deg)}
.cd-card.is-opening .cd-card-hint{opacity:0}
.cd-stage.is-dragging .cd-card{transition:opacity .2s,filter .2s;cursor:grabbing}
.cd-collection-footer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:35px;padding:25px 0 5px}
.cd-current-meta{display:flex;align-items:center;gap:25px;color:var(--cd-muted);font-size:10px;line-height:1.5;margin-bottom:9px}
.cd-current-title{font-family:var(--serif,Georgia,serif);font-size:clamp(26px,2.7vw,40px);line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.cd-navigation{display:flex;gap:8px}
.cd-navigation>button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #aeb8a1;border-radius:50%;background:transparent;color:var(--cd-ink);font-size:22px;line-height:1;transition:background .2s,color .2s;cursor:pointer}
.cd-navigation>button:hover{background:var(--cd-ink);color:var(--cd-paper)}
.cd-navigation>button:disabled{opacity:.35;cursor:default}
.cd-open{align-self:end;display:flex;align-items:center;justify-content:space-between;gap:36px;min-width:145px;padding:0 0 9px;border:0;border-bottom:1px solid var(--cd-ink);background:none;color:var(--cd-ink);font-size:12px;line-height:1.5;cursor:pointer}
.cd-open>span{font-size:24px;line-height:1}
.cd-open:hover{color:var(--accent,#9d412b)}
.cd-open:disabled{opacity:.45;cursor:default}
.cd-empty{padding:20px 0;color:var(--cd-muted);font-size:13px}
@media(max-width:760px){
  .cd-collection{--cd-sleeve-size:clamp(200px,58vw,274px);--cd-step:clamp(125px,36vw,170px);padding-bottom:18px}
  .cd-collection-topline{padding:17px 0 18px;gap:14px;font-size:8px;align-items:start}
  .cd-collection-topline p{font-size:9px;max-width:140px;text-align:right}
  .cd-stage{height:clamp(325px,88vw,410px);perspective:1200px}
  .cd-stage::before{inset:13px}
  .cd-card{top:47%}
  .cd-sleeve-front{border-width:6px}
  .cd-spine{width:3px}
  .cd-card-hint{bottom:-31px;font-size:9px;gap:17px}
  .cd-disc-label{font-size:5px}
  .cd-disc-label>span{font-size:4px}
  .cd-collection-footer{grid-template-columns:minmax(0,1fr) auto;gap:20px 15px;padding-top:20px}
  .cd-current-meta{font-size:9px;gap:20px;margin-bottom:8px}
  .cd-current-title{font-size:28px}
  .cd-navigation{align-self:start;margin-top:4px;gap:7px}
  .cd-navigation>button{width:35px;height:35px;font-size:20px}
  .cd-open{grid-column:1/-1;width:100%;font-size:12px;padding-bottom:10px;margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
  .cd-card,.cd-disc,.cd-envelope-flap,.cd-sleeve-front,.cd-sleeve,.cd-card-hint{transition:none!important}
  .cd-card.is-active:hover .cd-sleeve{transform:none}
}