/* latest releases */
.releases{background:var(--bg);border-top:1px solid var(--line)}
.rl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.rl{position:relative;display:grid;align-items:stretch !important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.2vw,30px);align-items:center;padding:clamp(14px,1.8vw,26px);background:#14150f;border:1px solid var(--line);overflow:hidden}
.rl-cover{position:relative;display:block;aspect-ratio:1;margin:0}
.rl-disc{position:absolute;top:4%;left:22%;width:92%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0a0a0a 0 2px,#1d1d1d 2px 3px);box-shadow:0 0 0 2px #000;animation:rlSpin 7s linear infinite;transition:left .6s cubic-bezier(.2,.8,.2,1)}
.rl-disc:after{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#101010 0 9%,var(--accent) 10%)}
.rl-cover img{position:relative;z-index:1;display:block;width:88%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 18px 44px rgba(0,0,0,.65);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rl:hover .rl-cover img{transform:rotate(-3deg) scale(1.03)}
.rl:hover .rl-disc{left:30%}
@keyframes rlSpin{to{transform:rotate(360deg)}}
.rl-body{display:flex;flex-direction:column;gap:clamp(8px,1.2vw,14px);min-width:0}
.rl-tag{align-self:flex-start;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;background:var(--accent);color:#101010}
.rl h3{margin:0;font-size:clamp(22px,2.4vw,34px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.rl h3 small{display:block;margin-bottom:6px;font:500 13px/1.2 var(--mono);letter-spacing:.1em;color:var(--accent)}
.rl-story{margin:0;font-size:clamp(13px,1.1vw,15px);line-height:1.5;color:var(--muted)}
.rl-cr{margin:0;display:grid;gap:5px;font-size:clamp(12px,1vw,14px);line-height:1.35}
.rl-cr div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding-top:5px;border-top:1px solid var(--line)}
.rl-cr dt{font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.rl-cr dd{margin:0;color:var(--text)}
.rl-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.rl-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#000;border:1px solid #3a3a3a;color:#fff;text-decoration:none;font-weight:600;font-size:13px;border-radius:99px;transition:.2s}
.rl-links a img{width:18px;height:18px;object-fit:contain}
.rl-links a.main{border-color:var(--accent)}
.rl-links a:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(max-width:1000px){.rl-grid{grid-template-columns:1fr}}
@media(max-width:700px){
.rl{grid-template-columns:1fr;text-align:center;gap:10px;padding:12px}
.rl-cover{width:min(44vw,170px);margin-inline:auto}
.rl-body{align-items:center;gap:8px}
.rl-tag{align-self:center;font-size:10px;padding:5px 8px}
.rl h3{font-size:21px}
.rl h3 small{margin-bottom:3px;font-size:12px}
.rl-story{font-size:12.5px;line-height:1.45}
.rl-cr{width:100%;text-align:left;gap:3px;font-size:12px}
.rl-cr div{grid-template-columns:104px minmax(0,1fr);gap:8px;padding-top:3px}
.rl-cr dt{font-size:10px}
.rl-links{justify-content:center;gap:6px}
.rl-links a{padding:8px 11px;font-size:12px}
.rl-grid{gap:12px}
}
@media(prefers-reduced-motion:reduce){.rl-disc{animation:none}}

/* v3 */
.rl-body{position:relative;z-index:3}
.rl-cover{z-index:1;align-self:center}
.rl-disc{z-index:0}
.rl-cr{margin-top:auto !important}
.rl-cr div{grid-template-columns:158px minmax(0,1fr)}
.rl-cr dt{white-space:nowrap}
.rl-story{min-height:0}
.rl{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rl.in{opacity:1;transform:none}
.rl-grid .rl:nth-child(2){transition-delay:.15s}
.rl-tag{display:inline-flex;align-items:center;gap:8px}
.rl-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.rl-eq i{width:2px;background:#101010;height:100%;transform-origin:bottom;animation:rlEq 1s ease-in-out infinite}
.rl-eq i:nth-child(2){animation-delay:.2s}.rl-eq i:nth-child(3){animation-delay:.4s}.rl-eq i:nth-child(4){animation-delay:.1s}
@keyframes rlEq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.rl-cover img{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s}
.rl:hover .rl-cover img{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04)}
.rl:hover .rl-disc{animation-duration:2s}
.rl:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,223,86,.10),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.rl:hover:before{opacity:1}
.rl-links a{position:relative;overflow:hidden}
.rl-links a:after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .6s}
.rl-links a:hover:after{left:130%}
.rl-cr div{transition:background .2s,padding-left .2s}
.rl-cr div:hover{background:rgba(255,223,86,.07);padding-left:6px}
@media(max-width:700px){.rl-cr div{grid-template-columns:132px minmax(0,1fr)}.rl-cr dt{white-space:normal}}
@media(prefers-reduced-motion:reduce){.rl{opacity:1;transform:none}.rl-eq i{animation:none}}

/* v4: titles on same level */
@media(min-width:701px){.rl h3{min-height:calc(2em * 1);display:flex;flex-direction:column;justify-content:flex-start}.rl h3{min-height:calc(13px + 6px + 2 * clamp(22px,2.4vw,34px))}.rl-body{justify-content:flex-start}}