/* === banner === */
#banner {margin-top: 80px;width: 100%;height: 100%;object-fit: cover;object-position: center top;}
#banner_wrap {width: 100%;aspect-ratio: 1200 / 600;max-height: 600px;}

/* mod 2: 5 albums grid no scroll */
.featured{padding:100px 0;background:var(--bg)}
.album-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.album-card{cursor:pointer;transition:transform .3s;position:relative;overflow:hidden;border-radius:12px}
.album-card:hover{transform:translateY(-6px)}
a.album-card{display:block;text-decoration:none;color:inherit}
.album-cover{width:100%;aspect-ratio:1;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.album-cover img{width: 100%}
.album-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;border-radius:12px}
.album-card:hover .album-overlay{opacity:1}
.album-overlay .album-name{font-weight:600;font-size:.9rem;color:#fff;margin-bottom:2px}
.album-overlay .album-artist{font-size:.8rem;color:rgba(255,255,255,.8)}

/* mod 3: artist hover name inside */
.artist-row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:48px}
.artist-circle{text-align:center;cursor:pointer}
.artist-circle .avatar{width:100%;aspect-ratio:1;border-radius:12px;margin:0 auto 8px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.artist-circle:hover .avatar{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.artist-circle .avatar .overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;border-radius:12px}
.artist-circle:hover .avatar .overlay{opacity:1}
.avatar .overlay span{color:#fff;font-size:.72rem;font-weight:600;text-align:center;line-height:1.2;padding:4px}

/* mod 4: chart image in Original section */
/*.original{padding:100px 0}*/
.original-layout{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:stretch}
.content-cards{display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.content-card{border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s;cursor:pointer;display:flex;flex-direction:row;flex:1}
.content-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.content-card-img{width:200px;height:200px;min-height:120px;flex-shrink:0;position:relative;overflow:hidden}
.content-card-img img{height: 100%; width: 100%;object-fit: contain;}
.content-card-img .tag{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.65);color:#fff;font-family:'Barlow';font-weight:600;font-size:.7rem;letter-spacing:1px;padding:4px 10px;border-radius:4px}
.content-card-body{padding:14px;display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}
.content-card-body h4{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.content-card-body .date{font-size:.78rem;color:var(--text-light)}
.chart-img-wrap{background:var(--white);border-radius:14px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.04);position:sticky;top:88px}
.chart-img-wrap img{width:100%;border-radius:8px;aspect-ratio:4/5;object-fit:cover}

.chart-img-wrap .chart-link{display:block;text-align:center;margin-top:16px;padding:12px;border:1.5px solid var(--main);border-radius:8px;font-family:'Barlow';font-weight:700;font-size:.85rem;letter-spacing:1px;color:var(--main);transition:all .3s}
.chart-img-wrap .chart-link:hover{background:var(--main);color:#fff}

@media(max-width:960px){.original-layout{grid-template-columns:1fr}.chart-img-wrap{position:static}.content-card{flex-direction:column}.content-card-img{width:100%;min-height:200px}.album-row{grid-template-columns:repeat(3,1fr)} .album-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.content-cards{grid-template-columns:1fr}.album-row{grid-template-columns:repeat(2,1fr)}.hero-catchphrase{font-size:2.2rem}.disco-ball{width:120px;height:120px;opacity:.06} .artist-row {grid-template-columns: repeat(2, 1fr);}}