/* Label catalogue: three views of the same posters (curved ribbon, spotlight, grid). */
#catalogue{overflow:visible;padding-left:0;padding-right:0;padding-bottom:0;background:#101011;color:var(--fg)}
#catalogue .catalogue-head,#catalogue>.empty,#catalogue>.names{margin-left:7vw;margin-right:7vw}
.ribbon{position:relative;display:flex;flex-direction:column;isolation:isolate;margin-top:34px}

/* Toolbar: layout switch on the left, autoplay on the right. */
.ribbon-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 7vw 30px;padding-top:18px;border-top:1px solid var(--line)}
.view-toggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.view-toggle .k{margin:0 10px 0 0}
.view-toggle button,.auto-toggle{font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px;min-height:36px;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.view-toggle button:hover,.auto-toggle:hover{color:var(--fg);border-color:#ffffff66}
.view-toggle button[aria-pressed="true"]{color:#101011;background:var(--fg);border-color:var(--fg)}
.auto-toggle{display:inline-flex;align-items:center;gap:9px}
.auto-toggle[hidden]{display:none}
.auto-icon{width:9px;height:10px;box-sizing:border-box;border-style:solid;border-color:transparent transparent transparent currentColor;border-width:5px 0 5px 9px}
.auto-toggle.playing .auto-icon{border-color:currentColor;border-width:0 3px;border-top:0;border-bottom:0}

/* Stage: its height is set from the poster size in label-ribbon.js. */
.ribbon-stage{position:relative;z-index:4;height:480px;overflow:hidden;perspective:1400px;perspective-origin:50% 45%;touch-action:pan-y;cursor:grab;user-select:none;outline-offset:-5px}
.ribbon-stage.dragging{cursor:grabbing}
.ribbon-layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.ribbon-card{position:absolute;left:0;top:0;margin:0;width:260px;background:none;border:0;padding:0;overflow:visible;color:var(--fg);text-align:left;cursor:inherit;transform-origin:center center;transform-style:preserve-3d;will-change:transform,left,top;backface-visibility:hidden;pointer-events:auto}
.ribbon-card .ribbon-artist{position:absolute;left:5px;top:-19px;width:calc(100% - 10px);margin:0;font-size:11px;line-height:16px;letter-spacing:.004em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c8c4bc;opacity:var(--label,1)}
.ribbon-media{position:absolute;inset:0;overflow:hidden;border-radius:11px;background:#101018;isolation:isolate;box-shadow:0 0 0 .3px #ffffff30}
.ribbon-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;transition:filter .5s ease}
.ribbon-card:hover img{filter:saturate(1.08)}
.ribbon-card:hover .ribbon-media{box-shadow:0 10px 25px #00000040}
.ribbon-card:focus-visible{outline:none}
.ribbon-card:focus-visible .ribbon-media{outline:2px solid var(--fg);outline-offset:3px}

/* Spotlight keeps every poster whole, so the neighbours can sit behind the front one. */
.ribbon[data-view="spot"] .ribbon-stage{perspective:1100px;perspective-origin:50% 50%}
.ribbon[data-view="spot"] .ribbon-media{box-shadow:0 18px 44px #00000073,0 0 0 .3px #ffffff30}

/* Grid: no sliding, every poster on the page. */
.ribbon[data-view="grid"] .ribbon-stage{height:auto;overflow:visible;perspective:none;cursor:default;touch-action:auto}
.ribbon[data-view="grid"] .ribbon-layer{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:44px 20px;padding:20px 7vw 8px;pointer-events:auto}
.ribbon[data-view="grid"] .ribbon-card{position:relative;width:auto;aspect-ratio:305/453;cursor:pointer;will-change:auto;transition:translate .35s cubic-bezier(.23,1,.32,1)}
.ribbon[data-view="grid"] .ribbon-card:hover{translate:0 -6px}
.ribbon[data-view="grid"] .scrub-track{display:none}

/* Below the stage, in normal flow: the cube and the scrubber can never sit on a poster. */
.ribbon-foot{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 7vw 56px}
.cube-mark{width:128px;height:128px;display:grid;place-items:center;perspective:640px;text-decoration:none}
.cube-spin{width:84px;height:84px;position:relative;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-34deg);will-change:transform}
.cube-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#0c0d10;border:1px solid #2a2c32;border-radius:6px;backface-visibility:hidden}
.cube-face i{border-radius:2px;background:var(--tile);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 3px #00000055}
.cube-front{transform:translateZ(42px);--tile:#ee383e}
.cube-back{transform:rotateY(180deg) translateZ(42px);--tile:#16af69}
.cube-right{transform:rotateY(90deg) translateZ(42px);--tile:#3c8ad8}
.cube-left{transform:rotateY(-90deg) translateZ(42px);--tile:#ff7a18}
.cube-top{transform:rotateX(90deg) translateZ(42px);--tile:#f4f1ea}
.cube-bottom{transform:rotateX(-90deg) translateZ(42px);--tile:#f3e927}
.scrub-track{position:relative;width:min(220px,56vw);height:24px;cursor:ew-resize;touch-action:none}
.scrub-track:after{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:#ffffffbf}
.scrub-tick{position:absolute;left:0;top:6px;width:1px;height:11px;background:var(--fg);z-index:1}
.scrub-track:focus-visible{outline:1px solid var(--fg);outline-offset:6px}

/* Release detail. */
.ribbon-dialog{position:relative;background:#161617;border:1px solid var(--line);color:var(--fg);padding:0;width:min(970px,calc(100vw - 32px));max-height:88svh;overflow:auto}
.ribbon-dialog::backdrop{background:#000a;backdrop-filter:blur(12px)}
.ribbon-detail{display:grid;grid-template-columns:45% 55%;align-items:stretch;gap:0;padding:0}
.ribbon-detail-media{min-height:430px;background:#101018;overflow:hidden}
.ribbon-detail-media img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.ribbon-detail-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,64px)}
.ribbon-detail h2{font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-.04em;margin:18px 0}
.ribbon-detail p{color:var(--muted);font-size:13px;line-height:1.7}
.ribbon-note{opacity:.65}
.ribbon-close{position:absolute;right:18px;top:14px;z-index:2;display:block;margin:0;border:0;background:#ffffff14;color:var(--fg);font:inherit;font-size:11px;cursor:pointer;padding:8px}

.top .brand[data-mouse-logo]{perspective:500px;mix-blend-mode:screen}
.top .brand[data-mouse-logo] img{width:118px;height:auto;display:block;mix-blend-mode:screen;transform:rotateX(var(--logo-rx,0deg)) rotateY(var(--logo-ry,0deg));transition:transform .25s ease-out}

@media(max-width:680px){
  .ribbon{margin-top:26px}
  .ribbon-bar{margin:0 20px 26px;padding-top:16px}
  .view-toggle .k{display:none}
  .view-toggle button,.auto-toggle{padding:9px 13px;letter-spacing:.1em}
  .ribbon-bar{flex-wrap:nowrap;gap:8px}
  .view-toggle{flex-wrap:nowrap}
  .view-toggle button{padding:9px 11px}
  .auto-label{display:none}
  .auto-toggle{padding:9px 13px;flex:none}
  .ribbon-card .ribbon-artist{font-size:9px;top:-17px}
  .ribbon[data-view="grid"] .ribbon-layer{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px;padding:18px 20px 4px}
  .ribbon-foot{padding:18px 20px 44px;gap:10px}
  .cube-mark{width:104px;height:104px}
  .cube-spin{scale:.82}
  .ribbon-detail{grid-template-columns:1fr}
  .ribbon-detail-media{min-height:180px;max-height:34svh}
  .ribbon-detail-copy{padding:26px}
  .ribbon-detail h2{font-size:40px}
}
@media(prefers-reduced-motion:reduce){.ribbon-card,.top .brand[data-mouse-logo] img{transition:none;will-change:auto}.top .brand[data-mouse-logo] img{transform:none}}

/* Compact label intro, with the copy balancing the headline. */
.hero{min-height:0;padding:clamp(40px,6vw,88px) 7vw 64px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);column-gap:8vw;align-items:end;justify-content:normal}
.hero>.k{grid-column:1/-1;margin-bottom:24px}
.hero h1{grid-column:1;grid-row:2/4;margin:0;max-width:18ch;font-size:clamp(40px,4.7vw,72px);line-height:1.12}
.hero .lede{grid-column:2;grid-row:2;margin:0;max-width:38ch;font-size:15px}
.hero .hero-actions{grid-column:2;grid-row:3;margin-top:28px;gap:18px 24px}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding:40px 7vw 48px}.hero h1,.hero .lede,.hero .hero-actions{grid-column:1;grid-row:auto}.hero h1{max-width:20ch}.hero .lede{margin-top:24px}.hero>.k{margin-bottom:20px}}