.story-ranks { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 10px; }
.story-ranks[hidden] { display:none!important; }
.story-rank-badge { display:inline-block; border:1px solid #745e32; border-radius:5px; padding:3px 6px; background:#332c1e; color:#f0cf79!important; font:600 11px/1.4 system-ui,sans-serif; white-space:nowrap; text-decoration:none; }
.story-rank-week { background:#183c38; border-color:#326b5d; color:#93e2bf!important; }
.story-rank-month { background:#2e2b49; border-color:#5c5687; color:#c7baff!important; }
.story-rank-badge:hover { filter:brightness(1.2); text-decoration:none; }
.story-rank-badge:focus-visible { outline:2px solid #f0cf79; outline-offset:3px; }
.ranking-periods { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 12px; }
.ranking-periods a { border:1px solid #36526e; padding:8px 14px; border-radius:8px; color:#b6cadf; }
.ranking-periods a[aria-current=page] { border-color:#ddb54e; color:#f0cf79; background:#332c1e; }
.ranking-note,.listening-progress { font-size:12px; color:#a4bbcf; line-height:1.5; }
.home-card-progress { margin:10px 0 0; color:#a7bed3; font-size:12px; line-height:1.5; }
.ranking-views { color:#b6cadf; margin:4px 0; font-size:12px; }
.story-hero-text .story-ranks { justify-content:center; }
.catalog-card[id] { scroll-margin-top:24px; }
@media(min-width:768px) { .story-hero-text .story-ranks { justify-content:flex-start; } }