/* =============================================================================
   ROCKERS.IM — Main Stylesheet
   Self-contained. genes.css (with REM viewport system + .container) loaded before.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   GOOGLE FONTS
----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');


/* =============================================================================
   ROCKERS THEME — CSS Custom Properties
   ============================================================================= */
:root {
    /* Backgrounds */
    --ri-bg: #0d0d0d;
    --ri-surface: #161616;
    --ri-surface-2: #1e1e1e;
    --ri-surface-3: #252525;

    /* Borders */
    --ri-border: #2a2a2a;
    --ri-border-light: #333333;

    /* Accent */
    --ri-accent: #e53e3e;
    --ri-accent-dim: #b91c1c;
    --ri-accent-glow: rgba(229, 62, 62, 0.14);

    /* Text */
    --ri-text: #e8e8e8;
    --ri-text-muted: #888888;
    --ri-text-faint: #555555;
    --ri-link: #fc8181;

    /* Typography */
    --ri-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --ri-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ri-font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

    /* Radii */
    --ri-radius: 0.6rem;
    --ri-radius-lg: 1.2rem;
    --ri-radius-xl: 1.6rem;
    --ri-radius-pill: 10rem;

    /* Shadows */
    --ri-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
    --ri-shadow-lg: 0 0.4rem 2rem rgba(0, 0, 0, 0.6);

    /* Legacy aliases (for admin.css / older partials) */
    --ri-radius-lg: 1.2rem;
    --ri-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
    --ri-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* =============================================================================
   BASE RESET
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* genes.css sets html font-size — do NOT re-declare it here */

body.ri-page,
body.rockers-body {
    background: var(--ri-bg);
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.3rem;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--ri-link);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--ri-text);
}

img {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}


/* =============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================= */
.ri-accent-text {
    color: var(--ri-accent);
}

.ri-muted-text {
    color: var(--ri-text-muted);
}

.ri-mono {
    font-family: var(--ri-font-mono);
}

.ri-display {
    font-family: var(--ri-font-display);
}


/* =============================================================================
   BUTTONS
   ============================================================================= */
.ri-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    background: var(--ri-accent);
    color: #fff;
    font-family: var(--ri-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    border: none;
    border-radius: var(--ri-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ri-btn-primary:hover {
    background: var(--ri-accent-dim);
    color: #fff;
    transform: translateY(-0.1rem);
}

.ri-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    background: transparent;
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid var(--ri-border-light);
    border-radius: var(--ri-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ri-btn-outline:hover {
    background: var(--ri-surface-2);
    border-color: var(--ri-text-muted);
    color: var(--ri-text);
    transform: translateY(-0.1rem);
}


/* =============================================================================
   3-COLUMN SITE LAYOUT
   Desktop: left-nav (18rem) | center-col (1fr) | right-col (25rem)
   Tablet: left-nav collapsed (6rem icon-only) | center | right hidden
   Mobile: all stacked, left-nav becomes bottom sheet
   rem math: 1rem ≈ 10px at 1280px viewport (genes.css vw system)
   ============================================================================= */

/* RI Site Shell — wraps entire page in 3 columns */
.ri-site {
    display: grid;
    grid-template-columns: 18rem 1fr 25rem;
    grid-template-rows: auto;
    grid-template-areas: "leftnav center rightnav";
    min-height: 100vh;
    background: var(--ri-bg);
}

/* Left nav column */
.ri-leftnav {
    grid-area: leftnav;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid var(--ri-border);
    background: var(--ri-surface);
    display: flex;
    flex-direction: column;
    padding: 0;
    scrollbar-width: none;
}

.ri-leftnav::-webkit-scrollbar {
    display: none;
}

/* Brand / logo area */
.ri-leftnav-brand {
    flex: 0 0 auto;
    padding: 1.6rem 1.4rem 1.4rem;
    border-bottom: 1px solid var(--ri-border);
    background: var(--ri-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.ri-leftnav-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 0 0;
    scrollbar-width: none;
}

.ri-leftnav-body::-webkit-scrollbar {
    display: none;
}

.ri-leftnav-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ri-text);
}

.ri-leftnav-logo-main {
    font-family: var(--ri-font-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ri-text);
}

.ri-leftnav-logo-main span {
    color: var(--ri-accent);
}

.ri-leftnav-logo-sub {
    font-size: 1rem;
    color: var(--ri-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.3rem;
}

/* Nav sections */
.ri-leftnav-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.8rem;
}

.ri-leftnav-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1rem;
    border-radius: var(--ri-radius);
    color: var(--ri-text-muted);
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.ri-leftnav-item:hover {
    background: var(--ri-surface-2);
    color: var(--ri-text);
}

.ri-leftnav-item.is-active {
    background: var(--ri-accent-glow);
    color: var(--ri-accent);
}

.ri-leftnav-item-icon {
    font-size: 1.4rem;
    width: 1.8rem;
    flex-shrink: 0;
    text-align: center;
}

.ri-leftnav-divider {
    height: 1px;
    background: var(--ri-border);
    margin: 0.5rem 1rem;
}

/* Artist photo + tagline at bottom of leftnav */
.ri-leftnav-artist {
    margin-top: 0.8rem;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--ri-border);
}

.ri-leftnav-artist-img {
    width: 100%;
    aspect-ratio: 1 / 1.4;
    object-fit: contain;
    object-position: top center;
    display: block;
    opacity: 0.5;
    margin-bottom: 2rem;
}

.ri-leftnav-artist-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem;
    background: linear-gradient(transparent, rgba(13, 13, 13, 0.96));
}

.ri-leftnav-artist-tagline {
    font-family: var(--ri-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ri-text);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.ri-leftnav-artist-tagline span {
    color: var(--ri-accent);
}

.ri-leftnav-artist-desc {
    font-size: 1rem;
    color: var(--ri-text-muted);
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.ri-leftnav-manifesto {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    background: transparent;
    border: 1px solid var(--ri-border-light);
    border-radius: var(--ri-radius);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ri-text-muted);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.ri-leftnav-manifesto:hover {
    border-color: var(--ri-text-muted);
    color: var(--ri-text);
}

/* Social icons row at very bottom */
.ri-leftnav-social {
    flex: 0 0 auto;
    display: flex;
    gap: 1rem;
    padding: 0.8rem 1.4rem;
    border-top: 1px solid var(--ri-border);
    background: var(--ri-surface);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.ri-leftnav-social a {
    color: var(--ri-text-faint);
    font-size: 1.2rem;
    transition: color 0.12s, transform 0.12s;
}

.ri-leftnav-social a:hover {
    color: var(--ri-text);
    transform: translateY(-1px);
}

.ri-leftnav-social a.dv-network-trigger {
    font-size: 1rem;
    top: 0.2rem;
    position: relative;
    float: right;
}

.ri-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
}

.ri-social-link svg {
    width: 100%;
    height: 100%;
    display: block;
}

i.gi {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    font-size: inherit;
    vertical-align: middle;
}

i.gi.twitterx {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/></svg>');
}

i.gi.twitterx.darker {
    background-color: #111;
    background-size: 60%;
    border-radius: 0.2em;
}

i.gi.instagram {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1536 1536" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(228,64,95 ,1)" d="M1024 768q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm138 0q0 164-115 279t-279 115-279-115-115-279 115-279 279-115 279 115 115 279zm108-410q0 38-27 65t-65 27-65-27-27-65 27-65 65-27 65 27 27 65zM768 138q-7 0-76.5-.5t-105.5 0-96.5 3-103 10T315 169q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103-3 96.5 0 105.5.5 76.5-.5 76.5 0 105.5 3 96.5 10 103T169 1221q20 50 58 88t88 58q29 11 71.5 18.5t103 10 96.5 3 105.5 0 76.5-.5 76.5.5 105.5 0 96.5-3 103-10 71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103 3-96.5 0-105.5-.5-76.5.5-76.5 0-105.5-3-96.5-10-103T1367 315q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10-96.5-3-105.5 0-76.5.5zm768 630q0 229-5 317-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124T5 1085q-5-88-5-317t5-317q10-208 124-322T451 5q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317z"/></svg>');
}

i.gi.facebook {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1536 1536" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(59,89,153 ,1)" d="M1248 0q119 0 203.5 84.5T1536 288v960q0 119-84.5 203.5T1248 1536h-188V941h199l30-232h-229V561q0-56 23.5-84t91.5-28l122-1V241q-63-9-178-9-136 0-217.5 80T820 538v171H620v232h200v595H288q-119 0-203.5-84.5T0 1248V288Q0 169 84.5 84.5T288 0h960z"/></svg>');
}

i.gi.youtube {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="256" height="180" viewBox="0 0 256 180"%3E%3Cpath fill="red" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"/%3E%3Cpath fill="%23FFF" d="m102.421 128.06l66.328-38.418l-66.328-38.418z"/%3E%3C/svg%3E');
}

i.gi.spotify {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"><path fill="%231DB954" d="M84 0a84 84 0 1 0 0 168A84 84 0 0 0 84 0Zm38.52 121.12a5.24 5.24 0 0 1-7.21 1.72c-19.75-12.07-44.62-14.8-73.94-8.1a5.24 5.24 0 0 1-2.33-10.22c32.08-7.34 59.6-4.2 81.73 9.31a5.24 5.24 0 0 1 1.75 7.29Zm10.29-22.88a6.54 6.54 0 0 1-9 2.14c-22.61-13.89-57.07-17.92-83.82-9.8a6.54 6.54 0 1 1-3.8-12.52c30.56-9.28 68.56-4.8 94.47 11.08a6.54 6.54 0 0 1 2.15 9.1Zm.88-23.83c-27.12-16.11-71.87-17.6-97.76-9.05a7.84 7.84 0 1 1-4.92-14.89c29.72-9.83 79.1-7.93 110.69 10.82a7.84 7.84 0 1 1-8.01 13.12Z"/></svg>');
}

/* Center column */
.ri-center {
    grid-area: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Top bar inside center column (search + actions) */
.ri-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    border-bottom: 1px solid var(--ri-border);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1.6rem;
    height: 4rem;
}

.ri-topbar-search {
    flex: 1;
    max-width: 36rem;
}

.ri-topbar-search-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 0 0.6rem;
    transition: border-color 0.15s;
}

.ri-topbar-search-form:focus-within {
    border-color: var(--ri-accent);
}

input.ri-topbar-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.2rem;
    padding: 0.3rem 0;
}

input.ri-topbar-search-input::placeholder {
    color: var(--ri-text-faint);
}

.ri-topbar-search-kbd {
    font-family: var(--ri-font-mono);
    font-size: 1rem;
    color: var(--ri-text-faint);
    background: var(--ri-surface-3);
    border: 1px solid var(--ri-border-light);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
}

.ri-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Right column */
.ri-rightnav {
    grid-area: rightnav;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-left: 1px solid var(--ri-border);
    background: var(--ri-bg);
    scrollbar-width: none;
    padding: 0 0 1.6rem;
}

.ri-rightnav::-webkit-scrollbar {
    display: none;
}

/* Right nav section header (like "POPULAR BANDS", "FROM THE MAGAZINE") */
.ri-rightnav-section {
    padding: 1.4rem 1.4rem 0;
}

.ri-rightnav-section+.ri-rightnav-section {
    margin-top: 0.4rem;
    border-top: 1px solid var(--ri-border);
    padding-top: 1.4rem;
}

.ri-rightnav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.ri-rightnav-section-title {
    font-family: var(--ri-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ri-text);
}

.ri-rightnav-view-all {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.ri-rightnav-view-all:hover {
    color: var(--ri-text);
}

/* Content area inside center column */
.ri-center-body {
    flex: 1;
    padding: 0;
}

/* 3-col responsive: tablet — collapse leftnav, hide rightnav */
@media (max-width: 1279px) {
    .ri-site {
        grid-template-columns: 6rem 1fr;
        grid-template-areas: "leftnav center";
    }

    .ri-rightnav {
        display: none;
    }

    .ri-leftnav-logo-sub,
    .ri-leftnav-item-icon+span,
    .ri-leftnav-artist,
    .ri-leftnav-social,
    .ri-leftnav-brand .ri-leftnav-logo-sub {
        display: none;
    }

    .ri-leftnav-brand {
        padding: 1.4rem;
        border-bottom: 1px solid var(--ri-border);
    }

    .ri-leftnav-logo-main {
        font-size: 1.8rem;
    }

    .ri-leftnav-item {
        padding: 1rem;
        justify-content: center;
        gap: 0;
    }

    .ri-leftnav-item span:not(.ri-leftnav-item-icon) {
        display: none;
    }
}

/* 3-col responsive: mobile — stack everything */
@media (max-width: 639px) {
    .ri-site {
        grid-template-columns: 1fr;
        grid-template-areas: "center";
    }

    .ri-leftnav {
        display: none;
    }

    .ri-rightnav {
        display: none;
    }
}


/* =============================================================================
   HEADER (legacy top-bar mode — kept for non-site pages)
   ============================================================================= */
.ri-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    border-bottom: 1px solid var(--ri-border);
}

/* .ri-header-inner carries the .container class from genes for max-width/padding */
.ri-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5.6rem;
    gap: 1.6rem;
}

/* Logo */
.ri-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.ri-logo:hover {
    color: var(--ri-text);
}

.ri-logo-mark {
    font-size: 1.8rem;
    line-height: 1;
}

.ri-logo-text {
    letter-spacing: -0.01em;
}

.ri-logo-dot {
    color: var(--ri-accent);
}

/* Header Search */
.ri-header-search {
    flex: 1;
    max-width: 48rem;
}

.ri-header-search-form {
    display: flex;
    align-items: center;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 0 1.2rem;
    gap: 0.8rem;
    transition: border-color 0.15s;
}

.ri-header-search-form:focus-within {
    border-color: var(--ri-accent);
}

.ri-header-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.4rem;
    padding: 0.8rem 0;
}

.ri-header-search-input::placeholder {
    color: var(--ri-text-faint);
}

.ri-header-search-kbd {
    font-family: var(--ri-font-mono);
    font-size: 1rem;
    color: var(--ri-text-faint);
    background: var(--ri-surface-3);
    border: 1px solid var(--ri-border-light);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

/* Header Actions (right side) */
.ri-header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

/* Header Nav (legacy + new) */
.ri-header-nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.ri-nav-link {
    color: var(--ri-text-muted);
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.5rem 0.7rem;
    border-radius: var(--ri-radius);
    transition: color 0.15s, background 0.15s;
}

.ri-nav-link:hover {
    color: var(--ri-text);
    background: var(--ri-surface-2);
}

.ri-nav-expo {
    background: var(--ri-accent);
    color: #fff !important;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: var(--ri-radius);
}

.ri-nav-expo:hover {
    background: var(--ri-accent-dim);
    color: #fff;
}

/* Dark mode toggle */
.ri-darkmode-toggle {
    width: 3rem;
    height: 3rem;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--ri-text-muted);
    transition: background 0.15s;
}

.ri-darkmode-toggle:hover {
    background: var(--ri-surface-3);
    color: var(--ri-text);
}

/* Login / Sign Up */
.ri-login-link {
    color: var(--ri-text-muted);
    font-size: 1.4rem;
    font-weight: 500;
}

.ri-signup-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    background: var(--ri-accent);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: var(--ri-radius);
    transition: background 0.15s;
}

.ri-signup-btn:hover {
    background: var(--ri-accent-dim);
    color: #fff;
}

/* Mobile search icon toggle (hidden by default, shown on mobile) */
.ri-header-search-toggle {
    display: none;
    width: 3.6rem;
    height: 3.6rem;
    align-items: center;
    justify-content: center;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    color: var(--ri-text-muted);
    font-size: 1.6rem;
    cursor: pointer;
}


/* =============================================================================
   HERO — INDEX PAGE
   ============================================================================= */
.ri-hero {
    position: relative;
    min-height: 24rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ri-surface);
    /* background-image applied via inline style in HTML */
    background-size: cover;
    background-position: center;
}

/* Dark overlay on top of background photo */
.ri-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(13, 13, 13, 0.94) 0%,
            rgba(13, 13, 13, 0.72) 55%,
            rgba(13, 13, 13, 0.88) 100%);
    z-index: 1;
}

/* .ri-hero-inner: padding for hero content inside center column */
.ri-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2.8rem 2rem 2.4rem;
}

/* Headline block */
.ri-hero-headline {
    font-family: var(--ri-font-display);
    line-height: 1;
    margin-bottom: 1.8rem;
}

.ri-hero-headline h1 {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--ri-text);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.ri-hero-sub1 {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ri-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.ri-hero-sub2 {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ri-accent);
}

/* CTAs */
.ri-hero-ctas {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Legacy hero elements (backward compat with existing index.html template) */
.ri-hero-title {
    font-family: var(--ri-font-display);
    font-size: 4.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ri-text);
    text-transform: uppercase;
}

.ri-hero-sub {
    font-size: 1.6rem;
    color: var(--ri-text-muted);
    margin-top: 0.8rem;
}

.ri-hero-stats {
    display: flex;
    gap: 2.4rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.ri-stat {
    font-family: var(--ri-font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ri-text);
    line-height: 1.2;
}

.ri-stat em {
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ri-text-muted);
    display: block;
    margin-top: 0.2rem;
}


/* =============================================================================
   STATS BAR
   ============================================================================= */
.ri-stats-bar {
    background: var(--ri-surface);
    border-top: 1px solid var(--ri-border);
    border-bottom: 1px solid var(--ri-border);
    padding: 0.8rem 0;
}

/* .ri-stats-inner: full-width inside center column */
.ri-stats-inner {
    display: flex;
    gap: 0;
    width: 100%;
}

.ri-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 1rem;
    border-right: 1px solid var(--ri-border);
    text-align: center;
}

.ri-stat-item:last-child {
    border-right: none;
}

.ri-stat-item-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.ri-stat-item-number {
    font-family: var(--ri-font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ri-text);
    letter-spacing: -0.02em;
}

.ri-stat-item-label {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}


/* =============================================================================
   PAGE BODY LAYOUT
   ============================================================================= */

/* Legacy .ri-main: compat for current templates */
.ri-main {
    max-width: 120rem;
    margin: 0 auto;
    padding: 4rem 2rem 8rem;
}

/* New .ri-page-body: carries .container from genes, flex layout */
.ri-page-body {
    display: flex;
    gap: 3.2rem;
    align-items: flex-start;
    padding-top: 4rem;
    padding-bottom: 8rem;
}

.ri-main-col {
    flex: 1;
    min-width: 0;
}

.ri-sidebar {
    width: 32rem;
    flex-shrink: 0;
}


/* =============================================================================
   SECTIONS
   ============================================================================= */

/* Legacy section wrapper (existing templates) */
.ri-section-inner {
    margin-bottom: 2.8rem;
}

/* New section wrapper */
.ri-section {
    margin-bottom: 2.8rem;
}

.ri-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-section-title {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ri-text);
}

.ri-section-view-all {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ri-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s;
    flex-shrink: 0;
}

.ri-section-view-all:hover {
    color: var(--ri-accent);
}


/* =============================================================================
   ALBUM CARDS — HORIZONTAL SCROLL
   ============================================================================= */
.ri-albums-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ri-border) transparent;
    display: flex;
    gap: 1.6rem;
    padding-bottom: 1.2rem;
}

.ri-albums-scroll::-webkit-scrollbar {
    height: 0.4rem;
}

.ri-albums-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ri-albums-scroll::-webkit-scrollbar-thumb {
    background: var(--ri-border);
    border-radius: 0.2rem;
}

/* Fixed-width cards inside horizontal scroll */
.ri-albums-scroll .ri-album-card {
    flex-shrink: 0;
    width: 16rem;
}

.ri-albums-scroll .ri-album-cover {
    width: 16rem;
    height: 16rem;
}


/* =============================================================================
   ALBUM CARD (grid + scroll shared)
   ============================================================================= */
.ri-album-card {
    display: block;
    color: var(--ri-text);
    transition: transform 0.15s;
}

.ri-album-card:hover {
    transform: translateY(-0.3rem);
    color: var(--ri-text);
}

.ri-album-cover {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--ri-surface-2);
    border-radius: var(--ri-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--ri-border);
    position: relative;
}

.ri-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ri-album-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: var(--ri-text-faint);
}

.ri-album-cover-placeholder--lg {
    font-size: 5rem;
}

.ri-album-info {
    padding: 0 0.2rem;
}

.ri-album-title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ri-text);
}

.ri-album-artist {
    font-size: 1.2rem;
    color: var(--ri-text-muted);
}

.ri-album-year {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    margin-top: 0.2rem;
}


/* =============================================================================
   ALBUM GRID
   ============================================================================= */
.ri-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 2rem;
}

.ri-album-grid--sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.4rem;
}


/* =============================================================================
   GENRE TILES
   ============================================================================= */
.ri-genre-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.ri-genre-tile {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--ri-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--ri-surface-2);
    /* background-image applied via inline style in HTML */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.2s;
    text-decoration: none;
}

.ri-genre-tile:hover {
    transform: scale(1.02);
    color: var(--ri-text);
}

.ri-genre-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.28) 55%,
            rgba(0, 0, 0, 0.05) 100%);
    z-index: 1;
}

.ri-genre-tile-body {
    position: relative;
    z-index: 2;
    padding: 0.8rem 1rem;
    width: 100%;
}

.ri-genre-tile-name {
    font-family: var(--ri-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.ri-genre-tile-count {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
}


/* =============================================================================
   CITY TILES
   ============================================================================= */
.ri-city-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.ri-city-tile {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--ri-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--ri-surface-2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.2s;
    text-decoration: none;
}

.ri-city-tile:hover {
    transform: scale(1.02);
    color: var(--ri-text);
}

.ri-city-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.2) 60%,
            transparent 100%);
    z-index: 1;
}

.ri-city-tile-body {
    position: relative;
    z-index: 2;
    padding: 0.7rem 1rem;
    width: 100%;
}

.ri-city-tile-name {
    font-family: var(--ri-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.ri-city-tile-count {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
}


/* =============================================================================
   NEWEST BAND TILES
   ============================================================================= */
.ri-newest-band-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.ri-newest-band-tiles--bands {
    grid-template-columns: repeat(6, 1fr);
}

.ri-newest-band-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--ri-radius-lg);
    overflow: hidden;
    background: var(--ri-surface-2);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.2s;
}

.ri-newest-band-tile:hover {
    transform: scale(1.02);
    color: var(--ri-text);
}

.ri-newest-band-tile-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ri-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ri-newest-band-tile-initial {
    font-family: var(--ri-font-display);
    font-size: 3.6rem;
    font-weight: 800;
    color: var(--ri-accent);
    opacity: 0.5;
}

.ri-newest-band-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.3) 45%,
        transparent 100%);
    z-index: 1;
}

.ri-newest-band-tile-info {
    position: relative;
    z-index: 2;
    padding: 0.8rem 1rem;
    width: 100%;
}

.ri-newest-band-tile-name {
    font-family: var(--ri-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.ri-newest-band-tile-meta {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
}

.ri-newest-band-tile-genre {
    font-size: 0.9rem;
    color: var(--ri-accent);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}


/* =============================================================================
   BAND REACTION BUTTON
   ============================================================================= */
.ri-artist-react {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
}

.ri-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-pill);
    color: var(--ri-text);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-family: var(--ri-font-body);
    line-height: 1;
}

.ri-react-btn:hover {
    background: var(--ri-surface-3);
    border-color: var(--ri-accent);
}

.ri-react-btn:active {
    transform: scale(0.97);
}

.ri-react-btn.is-reacted {
    background: var(--ri-accent-glow);
    border-color: var(--ri-accent);
    color: var(--ri-accent);
}

.ri-react-label {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
}


/* =============================================================================
   GENRE TAGS (pill badges — browse / filter)
   ============================================================================= */
.ri-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.ri-genre-tag {
    display: inline-flex;
    align-items: center;
    background: var(--ri-surface-2);
    color: var(--ri-text-muted);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-pill);
    padding: 0.5rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ri-genre-tag:hover {
    background: var(--ri-accent-glow);
    border-color: var(--ri-accent);
    color: var(--ri-accent);
}

.ri-genre-tag--active {
    background: var(--ri-accent);
    border-color: var(--ri-accent);
    color: #fff;
}


/* =============================================================================
   SIDEBAR
   ============================================================================= */
.ri-sidebar-section {
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.ri-sidebar-title {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.4rem 1.6rem 1.2rem;
    border-bottom: 1px solid var(--ri-border);
    color: var(--ri-text);
}

/* <details> + <summary> sidebar toggle for mobile */
.ri-sidebar-section details>summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.ri-sidebar-section details>summary::-webkit-details-marker {
    display: none;
}

.ri-sidebar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ri-text);
    border-bottom: 1px solid var(--ri-border);
    transition: background 0.12s;
}

.ri-sidebar-summary:hover {
    background: var(--ri-surface-2);
}

.ri-sidebar-summary::after {
    content: 'â–¸';
    font-size: 1.2rem;
    color: var(--ri-text-muted);
    transition: transform 0.2s;
}

details[open] .ri-sidebar-summary::after {
    transform: rotate(90deg);
}


/* =============================================================================
   POPULAR BAND LIST ITEM (inside sidebar)
   ============================================================================= */
.ri-popular-band {
    display: grid;
    grid-template-columns: 1.8rem 2.8rem minmax(0, 1fr) auto 1.2rem;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--ri-border);
    transition: background 0.12s;
    text-decoration: none;
    color: var(--ri-text);
    min-width: 0;
}

.ri-popular-band:last-child {
    border-bottom: none;
}

.ri-popular-band:hover {
    background: var(--ri-surface-2);
    color: var(--ri-text);
}

.ri-popular-band-rank {
    font-family: var(--ri-font-mono);
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    width: auto;
    flex-shrink: 0;
    text-align: right;
}

.ri-popular-band-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--ri-surface-3);
    border: 1px solid var(--ri-border);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ri-popular-band-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ri-popular-band-info {
    min-width: 0;
}

.ri-popular-band-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ri-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ri-popular-band-meta {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ri-popular-band-listeners {
    font-family: var(--ri-font-mono);
    font-size: 1rem;
    color: var(--ri-text-muted);
    flex-shrink: 0;
    text-align: right;
    min-width: 2.2rem;
}

.ri-popular-band-flame {
    font-size: 1.2rem;
    flex-shrink: 0;
}


/* =============================================================================
   STREAMING / SOCIAL LINK BUTTONS
   ============================================================================= */
.ri-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: var(--ri-radius);
    font-size: 1.3rem;
    font-weight: 600;
    border: 1px solid var(--ri-border);
    background: var(--ri-surface-2);
    color: var(--ri-text-muted);
    transition: background 0.15s, color 0.15s;
}

.ri-link-btn:hover {
    background: var(--ri-surface-3);
    color: var(--ri-text);
}

.ri-link-btn--spotify {
    background: #1db954;
    border-color: #1db954;
    color: #000;
}

.ri-link-btn--spotify:hover {
    background: #17a348;
    color: #000;
}

.ri-link-btn--bandcamp {
    background: #1da0c3;
    border-color: #1da0c3;
    color: #fff;
}

.ri-link-btn--bandcamp:hover {
    background: #178fad;
    color: #fff;
}

.ri-link-btn--youtube {
    background: #ff0000;
    border-color: #ff0000;
    color: #fff;
}

.ri-link-btn--youtube:hover {
    background: #cc0000;
    color: #fff;
}

.ri-link-btn--expo {
    background: var(--ri-accent);
    border-color: var(--ri-accent);
    color: #fff;
}

.ri-link-btn--expo:hover {
    background: var(--ri-accent-dim);
    color: #fff;
}


/* =============================================================================
   BREADCRUMB
   ============================================================================= */
.ri-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    color: var(--ri-text-faint);
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
}

.ri-breadcrumb a {
    color: var(--ri-text-muted);
}

.ri-breadcrumb a:hover {
    color: var(--ri-text);
}

.ri-breadcrumb-sep {
    color: var(--ri-text-faint);
}


/* =============================================================================
   ALBUM DETAIL PAGE
   ============================================================================= */
.ri-album-main {
    padding-top: 2rem;
}

.ri-album-hero {
    display: grid;
    grid-template-columns: 28rem 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4.8rem;
    padding: 3.2rem;
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-xl);
}

.ri-album-hero-cover {
    width: 28rem;
    height: 28rem;
    background: var(--ri-surface-2);
    border-radius: var(--ri-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ri-border);
    flex-shrink: 0;
}

.ri-album-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ri-album-hero-info {
    min-width: 0;
}

.ri-album-hero-title {
    font-family: var(--ri-font-display);
    font-size: 4.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    color: var(--ri-text);
}

.ri-album-hero-artist {
    font-size: 1.8rem;
    color: var(--ri-link);
    font-weight: 600;
    display: block;
    margin-bottom: 1rem;
}

.ri-album-hero-artist:hover {
    color: var(--ri-accent);
}

.ri-album-hero-meta {
    color: var(--ri-text-muted);
    font-size: 1.4rem;
    margin-bottom: 1.4rem;
}

.ri-album-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: var(--ri-accent);
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.ri-album-hero-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.ri-album-meta-row {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ri-rating-score {
    font-family: var(--ri-font-mono);
    font-size: 4rem;
    font-weight: 700;
    color: var(--ri-text);
    line-height: 1;
}

.ri-rating-max {
    font-family: var(--ri-font-mono);
    font-size: 1.6rem;
    color: var(--ri-text-faint);
}

.ri-album-rank {
    font-size: 1.3rem;
    color: var(--ri-text-muted);
}

.ri-album-rank strong {
    font-family: var(--ri-font-mono);
    font-size: 1.6rem;
    color: var(--ri-text);
}

.ri-album-listeners {
    font-size: 1.3rem;
    color: var(--ri-text-muted);
}

.ri-album-listeners strong {
    font-family: var(--ri-font-mono);
    font-size: 1.6rem;
    color: var(--ri-text);
}

.ri-album-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ri-album-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.ri-album-editorial {
    font-size: 1.5rem;
    line-height: 1.75;
    color: var(--ri-text-muted);
    max-width: 72rem;
}


/* =============================================================================
   ALBUM TABS / ARTIST TABS
   ============================================================================= */
.ri-album-tabs,
.ri-artist-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ri-border);
    margin-bottom: 3.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ri-album-tabs::-webkit-scrollbar,
.ri-artist-tabs::-webkit-scrollbar {
    display: none;
}

.ri-tab-btn {
    flex-shrink: 0;
    padding: 1.2rem 2rem;
    background: transparent;
    border: none;
    border-bottom: 0.3rem solid transparent;
    color: var(--ri-text-muted);
    font-family: var(--ri-font-body);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}

.ri-tab-btn:hover {
    color: var(--ri-text);
}

.ri-tab-btn.is-active,
.ri-tab-btn[aria-selected="true"] {
    color: var(--ri-text);
    border-bottom-color: var(--ri-accent);
}

.ri-tab-content {
    display: none;
}

.ri-tab-content.is-active {
    display: block;
}


/* =============================================================================
   TRACKLIST TABLE
   ============================================================================= */
.ri-tracklist-table {
    width: 100%;
    border-collapse: collapse;
}

.ri-tracklist-table thead tr {
    border-bottom: 1px solid var(--ri-border);
}

.ri-tracklist-table th {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ri-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.8rem 1.2rem;
    text-align: left;
}

.ri-tracklist-table th:first-child {
    width: 4rem;
    text-align: center;
}

.ri-track-row {
    border-bottom: 1px solid var(--ri-border);
    transition: background 0.12s;
}

.ri-track-row:hover {
    background: var(--ri-surface-2);
}

.ri-tracklist-table td {
    padding: 0.9rem 1.2rem;
    font-size: 1.4rem;
    color: var(--ri-text);
}

.ri-track-pos-cell {
    font-family: var(--ri-font-mono);
    font-size: 1.2rem;
    color: var(--ri-text-faint);
    text-align: center;
    width: 4rem;
}

.ri-track-duration-cell,
.ri-track-plays-cell {
    font-family: var(--ri-font-mono);
    font-size: 1.2rem;
    color: var(--ri-text-muted);
    white-space: nowrap;
}

/* Legacy tracklist (existing album.html template) */
.ri-tracklist {
    list-style: none;
}

.ri-track {
    display: flex;
    gap: 1.4rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ri-border);
    font-size: 1.4rem;
}

.ri-track-pos {
    font-family: var(--ri-font-mono);
    font-size: 1.2rem;
    color: var(--ri-text-faint);
    width: 2.4rem;
    flex-shrink: 0;
}

.ri-track-title {
    color: var(--ri-text);
}


/* =============================================================================
   ALBUM DETAILS PANEL
   ============================================================================= */
.ri-album-details-panel {
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-lg);
    padding: 2rem;
}

.ri-detail-row {
    display: flex;
    gap: 1.6rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ri-border);
    font-size: 1.3rem;
}

.ri-detail-row:last-child {
    border-bottom: none;
}

.ri-detail-label {
    width: 12rem;
    flex-shrink: 0;
    color: var(--ri-text-faint);
    font-weight: 500;
}

.ri-detail-value {
    color: var(--ri-text-muted);
}


/* =============================================================================
   REVIEWS — HISTOGRAM + USER CARDS
   ============================================================================= */
.ri-reviews-histogram {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2.4rem;
}

.ri-histogram-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
}

.ri-histogram-label {
    font-family: var(--ri-font-mono);
    color: var(--ri-text-muted);
    width: 3rem;
    flex-shrink: 0;
    text-align: right;
}

.ri-histogram-bar-track {
    flex: 1;
    height: 0.6rem;
    background: var(--ri-surface-3);
    border-radius: var(--ri-radius-pill);
    overflow: hidden;
}

.ri-histogram-bar-fill {
    height: 100%;
    background: var(--ri-accent);
    border-radius: var(--ri-radius-pill);
}

.ri-histogram-count {
    font-family: var(--ri-font-mono);
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    width: 3rem;
    flex-shrink: 0;
}

.ri-user-review {
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-lg);
    padding: 2rem;
    margin-bottom: 1.6rem;
}

.ri-user-review-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.ri-user-review-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ri-surface-3);
    flex-shrink: 0;
    overflow: hidden;
}

.ri-user-review-meta {
    flex: 1;
    min-width: 0;
}

.ri-user-review-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ri-text);
}

.ri-user-review-date {
    font-size: 1.2rem;
    color: var(--ri-text-faint);
}

.ri-user-review-rating {
    font-family: var(--ri-font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ri-accent);
}

.ri-user-review-text {
    font-size: 1.4rem;
    color: var(--ri-text-muted);
    line-height: 1.7;
}


/* =============================================================================
   ARTIST DETAIL PAGE
   ============================================================================= */
.ri-artist-hero {
    padding: 4rem 0 3.2rem;
    margin-bottom: 3.2rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-artist-name {
    font-family: var(--ri-font-display);
    font-size: 7.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--ri-text);
    margin-bottom: 1.6rem;
}

.ri-artist-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.ri-artist-stats {
    display: flex;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin-bottom: 2.4rem;
}

.ri-artist-stat {
    display: flex;
    flex-direction: column;
}

.ri-artist-stat-num {
    font-family: var(--ri-font-mono);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ri-text);
    line-height: 1;
}

.ri-artist-stat-label {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}

.ri-artist-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ri-follow-btn,
.ri-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border-radius: var(--ri-radius);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ri-border);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.ri-follow-btn {
    background: var(--ri-accent);
    border-color: var(--ri-accent);
    color: #fff;
}

.ri-follow-btn:hover {
    background: var(--ri-accent-dim);
    border-color: var(--ri-accent-dim);
    color: #fff;
}

.ri-share-btn {
    background: var(--ri-surface-2);
    color: var(--ri-text-muted);
}

.ri-share-btn:hover {
    background: var(--ri-surface-3);
    color: var(--ri-text);
}

/* Legacy compat */
.ri-artist-count {
    color: var(--ri-text-muted);
    font-size: 1.4rem;
    margin-top: 0.4rem;
}

/* Top Songs table */
.ri-top-songs {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4rem;
}

.ri-top-songs thead tr {
    border-bottom: 1px solid var(--ri-border);
}

.ri-top-songs th {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ri-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.8rem 1.2rem;
    text-align: left;
}

.ri-top-songs td {
    padding: 0.9rem 1.2rem;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--ri-border);
    color: var(--ri-text);
}

.ri-top-songs tr:hover td {
    background: var(--ri-surface-2);
}

.ri-top-songs .ri-song-rank {
    font-family: var(--ri-font-mono);
    font-size: 1.2rem;
    color: var(--ri-text-faint);
    width: 3.2rem;
    text-align: center;
}

.ri-top-songs .ri-song-album {
    font-size: 1.2rem;
    color: var(--ri-text-muted);
}

.ri-top-songs .ri-song-duration,
.ri-top-songs .ri-song-plays {
    font-family: var(--ri-font-mono);
    font-size: 1.2rem;
    color: var(--ri-text-muted);
}

/* Tour dates */
.ri-tour-dates {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 4rem;
}

.ri-tour-date {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    padding: 1.4rem 1.6rem;
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    transition: background 0.12s;
}

.ri-tour-date:hover {
    background: var(--ri-surface-2);
}

.ri-tour-date-date {
    font-family: var(--ri-font-mono);
    font-size: 1.3rem;
    color: var(--ri-accent);
    flex-shrink: 0;
    width: 8rem;
}

.ri-tour-date-venue {
    flex: 1;
}

.ri-tour-date-city {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ri-text);
}

.ri-tour-date-venue-name {
    font-size: 1.2rem;
    color: var(--ri-text-muted);
}

.ri-tour-date-tickets {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ri-accent);
}

.ri-artist-discography {
    margin-bottom: 4rem;
}


/* =============================================================================
   GENRE PAGE
   ============================================================================= */
.ri-genre-hero {
    padding: 4rem 0 3.2rem;
    margin-bottom: 3.2rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-genre-hero-name {
    font-family: var(--ri-font-display);
    font-size: 6.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ri-text);
    margin-bottom: 0.8rem;
}

.ri-genre-hero-count {
    font-size: 1.6rem;
    color: var(--ri-text-muted);
}

/* Filter / sort bar */
.ri-filter-bar {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    margin-bottom: 3.2rem;
    flex-wrap: wrap;
}

.ri-filter-label {
    font-size: 1.3rem;
    color: var(--ri-text-muted);
    font-weight: 500;
}

.ri-filter-select {
    appearance: none;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    color: var(--ri-text);
    font-family: var(--ri-font-body);
    font-size: 1.3rem;
    padding: 0.7rem 3rem 0.7rem 1.2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.ri-filter-select:focus {
    outline: 2px solid var(--ri-accent);
    outline-offset: 2px;
}

.ri-filter-pills {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ri-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    border-radius: var(--ri-radius-pill);
    font-size: 1.2rem;
    font-weight: 500;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    color: var(--ri-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ri-filter-pill:hover,
.ri-filter-pill.is-active {
    background: var(--ri-accent-glow);
    border-color: var(--ri-accent);
    color: var(--ri-accent);
}


/* =============================================================================
   FOOTER
   ============================================================================= */
.ri-footer {
    border-top: 1px solid var(--ri-border);
    margin-top: 8rem;
    background: var(--ri-surface);
}

/* .ri-footer-inner carries .container from genes for max-width/padding */
.ri-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
    /* max-width + side padding from .container */
    color: var(--ri-text-faint);
    font-size: 1.3rem;
}

.ri-footer-brand {
    font-size: 1.3rem;
    color: var(--ri-text-faint);
}

.ri-footer-brand a {
    color: var(--ri-text-muted);
}

.ri-footer-brand a:hover {
    color: var(--ri-text);
}

.ri-footer-inner a {
    color: var(--ri-text-muted);
}

.ri-footer-inner a:hover {
    color: var(--ri-text);
}

.ri-footer-links {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.ri-footer-link {
    font-size: 1.2rem;
    color: var(--ri-text-faint);
}

.ri-footer-link:hover {
    color: var(--ri-text-muted);
}


/* =============================================================================
   UTILITY / COMPAT
   ============================================================================= */
.ri-browse-genres {
    margin-bottom: 4rem;
}

.ri-new-noteworthy {
    margin-bottom: 4rem;
}

.ri-album-detail {}


/* =============================================================================
   RESPONSIVE — TABLET  640px – 1279px
   ============================================================================= */
@media (min-width: 640px) and (max-width: 1279px) {

    .ri-page-body {
        flex-direction: column;
    }

    .ri-sidebar {
        width: 100%;
    }

    .ri-hero {
        min-height: 28rem;
    }

    .ri-hero-headline h1 {
        font-size: 4rem;
    }

    .ri-hero-sub1,
    .ri-hero-sub2 {
        font-size: 1.8rem;
    }

    .ri-stats-inner {
        flex-wrap: wrap;
    }

    .ri-stat-item {
        flex: 0 0 50%;
        border-right: none;
        border-bottom: 1px solid var(--ri-border);
    }

    .ri-stat-item:nth-child(odd) {
        border-right: 1px solid var(--ri-border);
    }

    .ri-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .ri-genre-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .ri-newest-band-tiles {
        grid-template-columns: repeat(3, 1fr);
    }

    .ri-city-tiles {
        grid-template-columns: repeat(3, 1fr);
    }

    .ri-album-hero {
        grid-template-columns: 22rem 1fr;
        gap: 3rem;
        padding: 2.4rem;
    }

    .ri-album-hero-cover {
        width: 22rem;
        height: 22rem;
    }

    .ri-album-hero-title {
        font-size: 3.6rem;
    }

    .ri-artist-name {
        font-size: 5.6rem;
    }

    .ri-genre-hero-name {
        font-size: 4.8rem;
    }
}


/* =============================================================================
   RESPONSIVE — MOBILE  max 639px
   ============================================================================= */
@media (max-width: 639px) {

    /* Header */
    .ri-header-inner {
        height: 5rem;
        padding: 0 1.6rem;
    }

    .ri-header-search {
        display: none;
    }

    .ri-header-search-toggle {
        display: flex;
    }

    .ri-login-link {
        display: none;
    }

    /* Hero */
    .ri-hero {
        min-height: 24rem;
    }

    .ri-hero-headline h1 {
        font-size: 3.6rem;
    }

    .ri-hero-sub1,
    .ri-hero-sub2 {
        font-size: 1.6rem;
    }

    .ri-hero-ctas {
        flex-direction: column;
        gap: 0.8rem;
        align-items: stretch;
    }

    .ri-hero-title {
        font-size: 3.6rem;
    }

    /* Stats bar */
    .ri-stats-bar {
        padding: 1.2rem 0;
    }

    .ri-stats-inner {
        flex-wrap: wrap;
    }

    .ri-stat-item {
        flex: 0 0 50%;
        padding: 0.8rem;
        border-right: none;
        border-bottom: 1px solid var(--ri-border);
    }

    .ri-stat-item:nth-child(odd) {
        border-right: 1px solid var(--ri-border);
    }

    .ri-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .ri-stat-item-number {
        font-size: 2rem;
    }

    /* Layout */
    .ri-main {
        padding: 2.4rem 1.6rem 6rem;
    }

    .ri-page-body {
        flex-direction: column;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .ri-sidebar {
        width: 100%;
    }

    /* Tiles */
    .ri-genre-tiles {
        grid-template-columns: 1fr;
    }

    .ri-newest-band-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .ri-city-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Album grid */
    .ri-album-grid {
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: 1.2rem;
    }

    /* Section titles */
    .ri-section-title {
        font-size: 2rem;
    }

    /* Album detail hero */
    .ri-album-hero {
        grid-template-columns: 1fr;
        padding: 1.6rem;
        gap: 2rem;
    }

    .ri-album-hero-cover {
        width: 100%;
        max-width: 24rem;
        height: auto;
        aspect-ratio: 1;
    }

    .ri-album-hero-title {
        font-size: 3.2rem;
    }

    .ri-album-meta-row {
        gap: 1.6rem;
    }

    .ri-rating-score {
        font-size: 3.2rem;
    }

    /* Tabs */
    .ri-tab-btn {
        padding: 1rem 1.4rem;
        font-size: 1.3rem;
    }

    /* Track table — hide optional cols */
    .ri-track-plays-cell {
        display: none;
    }

    /* Artist */
    .ri-artist-name {
        font-size: 4.8rem;
    }

    .ri-artist-stats {
        gap: 1.6rem;
    }

    .ri-artist-stat-num {
        font-size: 2rem;
    }

    /* Top songs — hide less critical cols */
    .ri-top-songs .ri-song-album,
    .ri-top-songs .ri-song-plays {
        display: none;
    }

    /* Tour dates */
    .ri-tour-date {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .ri-tour-date-date {
        width: auto;
    }

    /* Genre page */
    .ri-genre-hero-name {
        font-size: 4rem;
    }

    /* Footer */
    .ri-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
    }
}


/* =============================================================================
   RESPONSIVE — DESKTOP-ONLY  ≥ 1280px
   ============================================================================= */
@media (min-width: 1280px) {

    .ri-hero-headline h1 {
        font-size: 5.6rem;
    }

    .ri-page-body {
        display: flex;
    }

    .ri-album-hero-title {
        font-size: 5.6rem;
    }

    .ri-artist-name {
        font-size: 8rem;
    }

    .ri-genre-hero-name {
        font-size: 7.2rem;
    }
}
/* =============================================================================
   TEMPLATE COMPONENTS — all page-specific layout classes for rockers.im templates
   Eliminates all inline CSS from HTML files.
   ============================================================================= */

/* --- Infrastructure: shell elements shared by every page --- */

/* Logo image inside .ri-leftnav-brand */
.ri-leftnav-logo-icon {
    width: 3.6rem;
    height: 3.6rem;
    object-fit: contain;
    display: block;
    margin-bottom: 0.5rem;
}

/* Search SVG icon inside .ri-topbar-search-form */
.ri-topbar-search-icon {
    flex-shrink: 0;
    color: var(--ri-text-faint);
}

/* Auth row at the very top of the right sidebar */
.ri-rightnav-auth {
    height: 4rem;
    border-bottom: 1px solid var(--ri-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.4rem;
    gap: 0.6rem;
}

.ri-rightnav-auth--logged {
    justify-content: space-between;
}

.ri-rightnav-auth-copy {
    min-width: 0;
}

.ri-rightnav-auth-label {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ri-text-faint);
}

.ri-rightnav-auth-user {
    font-size: 1.05rem;
    color: var(--ri-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

/* Button size modifiers */
.ri-btn-sm {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

/* --- Breadcrumb bar (album and simple pages — non-hero) --- */
.ri-breadcrumb-bar {
    padding: 1.2rem 2rem;
    border-bottom: 1px solid var(--ri-border);
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

.ri-breadcrumb-bar a {
    color: var(--ri-text-muted);
    text-decoration: none;
}

.ri-breadcrumb-sep {
    margin: 0 0.4rem;
}

/* --- Sidebar shared widgets (appear in every page's rightnav) --- */

/* Featured article block */
.ri-sidebar-feature {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ri-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--ri-surface-2);
    padding: 1.2rem;
}

.ri-sidebar-feature-cat {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.ri-sidebar-feature-title {
    font-family: var(--ri-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ri-text);
    text-transform: uppercase;
    line-height: 1.2;
}

.ri-sidebar-feature-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
    margin-top: 0.4rem;
}

/* Side article list items */
.ri-sidebar-article {
    display: flex;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    padding: 0.8rem 0;
    border-top: 1px solid var(--ri-border);
}

.ri-sidebar-article-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ri-text);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.ri-sidebar-article-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
}

/* Magazine sidebar: full article list */
.ri-sidebar-list-article {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ri-border);
}

.ri-sidebar-list-article-cat {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.ri-sidebar-list-article-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ri-text);
    line-height: 1.3;
}

.ri-sidebar-list-article-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
    margin-top: 0.2rem;
}

/* Article-detail sidebar: recent articles */
.ri-sidebar-recent-article {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ri-border);
}

.ri-sidebar-recent-article-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ri-text);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.ri-sidebar-recent-article-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
}

/* --- Page header (browse / bands / playlists) --- */
.ri-page-header {
    padding: 2rem 2rem 1.6rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-page-header-title {
    font-family: var(--ri-font-display);
    font-size: 2.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ri-text);
    margin: 0 0 0.4rem;
}

.ri-page-header-sub {
    color: var(--ri-text-faint);
    font-size: 1.2rem;
    margin: 0 0 1.2rem;
}

.ri-page-header-sub:last-child {
    margin-bottom: 0;
}

/* --- Genre filter row (browse page) --- */
.ri-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ri-filter-tag {
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--ri-border);
    border-radius: 2px;
    color: var(--ri-text-muted);
    text-decoration: none;
    background: var(--ri-surface-2);
    transition: border-color 0.15s, color 0.15s;
}

.ri-filter-tag:hover {
    border-color: var(--ri-accent);
    color: var(--ri-accent);
}

/* --- Section padding wrappers (center column) --- */
.ri-content-pad { padding: 2rem; }
.ri-content-pad-x { padding: 0 2rem 2rem; }
.ri-content-pad-xb { padding: 0 2rem 4rem; }

.ri-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.ri-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ri-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Section header count badge --- */
.ri-section-count {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

/* --- Album card (mini grid cards — reuse of existing .ri-album-card system) --- */
/* text-decoration fix for link children of album cards */
a.ri-album-title,
a.ri-album-artist {
    text-decoration: none;
}

a.ri-album-artist {
    display: block;
}

/* combined year+artist meta text */
.ri-album-meta {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

/* --- Pagination --- */
.ri-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2.4rem;
}

.ri-pagination-info {
    padding: 0 1rem;
    font-size: 1.2rem;
    color: var(--ri-text-faint);
}

/* ===================================================================
   DETAIL HERO — shared gradient banner (artist / genre / city pages)
   =================================================================== */
.ri-detail-hero {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    min-height: 22rem;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

.ri-detail-hero-bg {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.ri-detail-hero-bg img {
    width: min(56vw, 980px);
    height: 100%;
    object-fit: cover;
    object-position: center right;
    filter: saturate(0.95) contrast(1.02);
    opacity: 0.88;
    mask-image: linear-gradient(to left, #000 58%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%);
}

.ri-detail-hero--md {
    min-height: 18rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-detail-hero--sm {
    min-height: 16rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 13, 13, 0.98) 0%, rgba(13, 13, 13, 0.92) 36%, rgba(13, 13, 13, 0.58) 74%, rgba(13, 13, 13, 0.82) 100%),
        linear-gradient(transparent 34%, rgba(13, 13, 13, 0.96));
    z-index: 1;
}

.ri-detail-hero-inner {
    position: relative;
    z-index: 2;
    padding: 2.4rem 2rem;
    width: 100%;
}

.ri-detail-hero-crumb {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

.ri-detail-hero-crumb a {
    color: var(--ri-text-muted);
    text-decoration: none;
}

.ri-detail-hero-crumb-sep {
    margin: 0 0.4rem;
}

/* ===================================================================
   ARTIST PAGE
   =================================================================== */
.ri-artist-header {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.ri-artist-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: var(--ri-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ri-font-display);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ri-accent);
    flex-shrink: 0;
    border: 2px solid var(--ri-border);
}

.ri-artist-name {
    font-family: var(--ri-font-display);
    font-size: 3.6rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
}

.ri-artist-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.ri-artist-meta-item {
    color: var(--ri-text-muted);
    font-size: 1.2rem;
}

.ri-artist-meta-sep {
    color: var(--ri-text-faint);
}

.ri-artist-bio-section {
    padding: 2rem 2rem 0;
}

.ri-artist-bio-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: start;
}

.ri-artist-bio {
    color: var(--ri-text-muted);
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}

.ri-artist-stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.ri-artist-stat {
    text-align: center;
}

.ri-artist-stat-val {
    font-family: var(--ri-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--ri-text);
}

.ri-artist-stat-label {
    font-size: 1rem;
    color: var(--ri-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ri-artist-links {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* Members block */
.ri-members-section {
    padding: 0 2rem 3rem;
}

.ri-members-title {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.2rem;
    color: var(--ri-text);
}

.ri-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.ri-member-card {
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 0.6rem 1rem;
}

.ri-member-name {
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ri-text);
}

.ri-member-role {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
}

/* ===================================================================
   BAND CHIP — compact pill used in genre/city top-bands list
   =================================================================== */
.ri-band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.ri-band-chip {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--ri-surface-2);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}

.ri-band-chip:hover {
    border-color: var(--ri-accent);
    color: inherit;
}

.ri-band-chip-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ri-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ri-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ri-accent);
    flex-shrink: 0;
}

.ri-band-chip-name {
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ri-text);
}

.ri-band-chip-sub {
    font-size: 1rem;
    color: var(--ri-text-faint);
}

/* ===================================================================
   BANDS PAGE — full band row cards
   =================================================================== */
.ri-bands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.2rem;
}

.ri-band-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}

.ri-band-row:hover {
    border-color: var(--ri-accent);
    color: inherit;
}

.ri-band-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--ri-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ri-font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ri-accent);
    flex-shrink: 0;
}

.ri-band-body {
    flex: 1;
    min-width: 0;
}

.ri-band-name {
    font-family: var(--ri-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ri-text);
    line-height: 1.2;
}

.ri-band-city {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
    margin-top: 0.2rem;
}

.ri-band-genre-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
}

.ri-band-genre-tag {
    font-size: 0.95rem;
    color: var(--ri-text-faint);
    background: var(--ri-surface-2);
    border-radius: 2px;
    padding: 0.1rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8.5rem;
    flex: 0 1 auto;
}

.ri-band-genre-more {
    font-size: 0.95rem;
    color: var(--ri-accent);
    background: rgba(229, 62, 62, 0.08);
    border-radius: 2px;
    padding: 0.1rem 0.45rem;
    flex-shrink: 0;
}

.ri-band-stats {
    text-align: right;
    flex-shrink: 0;
}

.ri-band-count {
    font-family: var(--ri-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ri-text);
}

.ri-band-count-label {
    font-size: 0.95rem;
    color: var(--ri-text-faint);
}

/* ===================================================================
   ALBUM DETAIL PAGE
   =================================================================== */
.ri-album-detail-hero {
    padding: 2rem;
    display: flex;
    gap: 2.4rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--ri-border);
}

.ri-album-detail-cover {
    width: 16rem;
    flex-shrink: 0;
}

.ri-album-detail-cover img {
    width: 100%;
    border-radius: var(--ri-radius);
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.ri-album-detail-body {
    flex: 1;
    min-width: 0;
}

.ri-album-detail-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
}

.ri-album-detail-title {
    font-family: var(--ri-font-display);
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
}

.ri-album-detail-artist {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ri-text-muted);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.ri-album-detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: var(--ri-text-faint);
    font-size: 1.2rem;
}

.ri-album-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.ri-album-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.ri-btn-horns {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    background: transparent;
    color: var(--ri-text-muted);
    font-family: var(--ri-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid var(--ri-border-light);
    border-radius: var(--ri-radius);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ri-btn-horns:hover {
    color: var(--ri-text);
    border-color: var(--ri-text-muted);
    transform: translateY(-0.1rem);
}

.ri-horns-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.15s;
}

.ri-btn-horns:hover .ri-horns-icon {
    transform: scale(1.2);
}

.ri-btn-horns.is-liked {
    color: var(--ri-accent);
    border-color: var(--ri-accent);
}

.ri-btn-horns.is-liked .ri-horns-icon {
    transform: scale(1.15);
}

.ri-horns-count {
    font-size: 1.1rem;
    opacity: 0.7;
}

.ri-album-detail-desc {
    color: var(--ri-text-muted);
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 1.4rem;
    max-width: 50ch;
}

/* Embed section */
.ri-album-embed-section {
    padding: 2rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-album-embed-title {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--ri-text);
}

.ri-album-embed-frame {
    border-radius: var(--ri-radius);
    display: block;
}

/* Tracklist section */
.ri-tracklist-section {
    padding: 2rem;
    border-bottom: 1px solid var(--ri-border);
}

.ri-tracklist-section-title {
    font-family: var(--ri-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--ri-text);
}

.ri-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ri-track-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ri-border);
}

.ri-track-num {
    font-family: var(--ri-font-mono);
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    width: 2rem;
    flex-shrink: 0;
    text-align: right;
}

.ri-track-title-cell {
    flex: 1;
    font-size: 1.3rem;
    color: var(--ri-text);
}

.ri-track-dur {
    font-family: var(--ri-font-mono);
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

/* Related albums section */
.ri-related-section {
    padding: 2rem 2rem 4rem;
}

/* ===================================================================
   PLAYLISTS PAGE
   =================================================================== */
.ri-playlist-section {
    padding: 2rem;
}

.ri-playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--ri-accent);
}

.ri-playlist-genre {
    font-family: var(--ri-font-display);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ri-text);
    margin: 0;
}

.ri-playlist-genre-link {
    font-size: 1.1rem;
    color: var(--ri-text-muted);
    text-decoration: none;
}

.ri-playlist-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ri-playlist-row {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--ri-surface);
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
}

.ri-playlist-row-cover {
    flex-shrink: 0;
    display: block;
}

.ri-playlist-row-cover img {
    width: 5.6rem;
    height: 5.6rem;
    object-fit: cover;
    border-radius: calc(var(--ri-radius) - 2px);
    display: block;
}

.ri-playlist-row-body {
    flex: 1;
    min-width: 0;
}

.ri-playlist-row-title {
    font-family: var(--ri-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ri-text);
    text-decoration: none;
    line-height: 1.2;
    display: block;
    margin-bottom: 0.2rem;
}

.ri-playlist-row-artist {
    font-size: 1.2rem;
    color: var(--ri-text-muted);
    text-decoration: none;
}

.ri-playlist-row-year {
    font-size: 1rem;
    color: var(--ri-text-faint);
    margin-top: 0.1rem;
}

.ri-playlist-embed {
    margin-top: 0.8rem;
}

.ri-playlist-embed iframe {
    border-radius: var(--ri-radius);
    display: block;
}

.ri-playlist-no-spotify {
    margin-top: 0.8rem;
}

.ri-playlist-no-spotify a {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
    text-decoration: none;
}

.ri-playlist-empty {
    padding: 2rem 2rem 4rem;
    text-align: center;
    color: var(--ri-text-faint);
    font-size: 1.2rem;
}

.ri-playlist-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    gap: 1.6rem;
    padding: 2rem;
}

.ri-playlist-spotlight-copy,
.ri-playlist-spotlight-embed {
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    background:
        radial-gradient(circle at top right, rgba(29, 185, 84, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.ri-playlist-spotlight-copy {
    padding: 1.6rem;
}

.ri-playlist-kicker {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ri-accent);
    margin-bottom: 0.8rem;
}

.ri-playlist-spotlight-title {
    font-family: var(--ri-font-display);
    font-size: 2.8rem;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}

.ri-playlist-spotlight-sub {
    font-size: 1.3rem;
    color: var(--ri-text);
    margin: 0 0 0.8rem;
}

.ri-playlist-spotlight-desc {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--ri-text-muted);
    margin: 0 0 1.2rem;
    max-width: 58ch;
}

.ri-playlist-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
}

.ri-playlist-tag {
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--ri-border);
    border-radius: 999px;
    font-size: 1rem;
    color: var(--ri-text-muted);
    background: rgba(255, 255, 255, 0.02);
}

.ri-playlist-actions {
    margin-bottom: 1.2rem;
}

.ri-playlist-spotlight-embed {
    padding: 1rem;
}

.ri-playlist-spotlight-embed iframe {
    border-radius: var(--ri-radius);
    display: block;
}

.ri-playlist-note-list {
    display: grid;
    gap: 0.75rem;
}

.ri-playlist-note {
    font-size: 1.08rem;
    color: var(--ri-text-muted);
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
}

/* ===================================================================
   MAGAZINE INDEX PAGE
   =================================================================== */
.ri-mag-cover {
    display: block;
    position: relative;
    min-height: 26rem;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-bottom: 3px solid var(--ri-accent);
    background:
        radial-gradient(circle at top right, rgba(229, 62, 62, 0.22), transparent 30%),
        linear-gradient(160deg, #161616 0%, #111111 48%, #0d0d0d 100%);
}

.ri-mag-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.75) 50%, rgba(13, 13, 13, 0.97) 100%);
    z-index: 1;
}

.ri-mag-cover-body {
    position: relative;
    z-index: 2;
    padding: 2.6rem 2rem 2.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ri-mag-cover-cat {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.8rem;
    border-left: 3px solid var(--ri-accent);
    padding-left: 0.7rem;
}

.ri-mag-cover-title {
    font-family: var(--ri-font-display);
    font-size: 3.4rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    max-width: 22ch;
}

.ri-mag-cover-excerpt {
    color: var(--ri-text-muted);
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 50ch;
    margin: 0 0 1.2rem;
}

.ri-mag-cover-date {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

.ri-mag-cover-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    z-index: 0;
}

.ri-mag-cover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Article cards grid */
.ri-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1.6rem;
}

.ri-article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    overflow: hidden;
    background: var(--ri-surface);
}

.ri-article-card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ri-surface-2);
}

.ri-article-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ri-article-card-body {
    padding: 1.2rem;
}

.ri-article-card-sections {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 1rem 0 1.1rem;
}

.ri-article-card-section {
    font-size: 0.95rem;
    color: var(--ri-text-faint);
    padding-left: 0.8rem;
    border-left: 2px solid rgba(229, 62, 62, 0.24);
    line-height: 1.4;
}

.ri-article-card-cat {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.ri-article-card-title {
    font-family: var(--ri-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ri-text);
    margin-bottom: 0.5rem;
}

.ri-article-card-excerpt {
    font-size: 1.2rem;
    color: var(--ri-text-muted);
    line-height: 1.5;
    margin: 0 0 0.8rem;
}

.ri-article-card-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
}

/* ===================================================================
   ARTICLE DETAIL PAGE
   =================================================================== */
.ri-article-hero {
    position: relative;
    overflow: hidden;
    min-height: 28rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid var(--ri-border);
}

.ri-article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 20%, rgba(13, 13, 13, 0.96));
    z-index: 1;
}

.ri-article-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ri-article-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ri-article-hero-body {
    position: relative;
    z-index: 2;
    padding: 2.4rem 2rem;
}

.ri-article-hero-cat {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.6rem;
}

.ri-article-hero-title {
    font-family: var(--ri-font-display);
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    max-width: 24ch;
}

.ri-article-hero-excerpt {
    font-size: 1.4rem;
    color: var(--ri-text-muted);
    line-height: 1.5;
    max-width: 55ch;
    margin: 0 0 0.8rem;
}

.ri-article-hero-date {
    font-size: 1.1rem;
    color: var(--ri-text-faint);
}

.ri-article-body {
    padding: 2.4rem 2rem 4rem;
    max-width: 72ch;
}

.ri-article-body-lead {
    font-size: 1.4rem;
    line-height: 1.75;
    color: var(--ri-text);
    margin-bottom: 1.6rem;
}

.ri-article-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ri-text-faint);
}

.ri-article-keypoints {
    border: 1px solid var(--ri-border);
    background: var(--ri-surface);
    border-radius: var(--ri-radius);
    padding: 1.2rem;
    margin-bottom: 2rem;
}

.ri-article-keypoints-title {
    font-family: var(--ri-font-display);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.ri-article-keypoint {
    color: var(--ri-text-muted);
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 2px solid var(--ri-accent);
}

.ri-article-keypoint + .ri-article-keypoint {
    margin-top: 0.8rem;
}

.ri-article-sections {
    display: grid;
    gap: 2rem;
}

.ri-article-section-title {
    font-family: var(--ri-font-display);
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.ri-article-section-copy {
    color: var(--ri-text-muted);
    line-height: 1.9;
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.ri-article-body-text {
    margin-top: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--ri-text-muted);
}

.ri-about-hero,
.ri-manifesto-hero {
    padding: 2.5rem 2rem 1.5rem;
    border-bottom: 1px solid var(--ri-border);
    background:
        radial-gradient(circle at top right, rgba(196, 38, 39, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    background-size: cover;
    background-position: center;
}

.ri-about-kicker,
.ri-manifesto-kicker,
.ri-about-card-eyebrow {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ri-accent);
}

.ri-about-title,
.ri-manifesto-title {
    font-family: var(--ri-font-display);
    font-size: 3.2rem;
    line-height: 1.02;
    text-transform: uppercase;
    margin: 0.8rem 0 1rem;
    max-width: 20ch;
}

.ri-about-intro,
.ri-manifesto-intro {
    color: var(--ri-text-muted);
    font-size: 1.28rem;
    line-height: 1.7;
    max-width: 58ch;
    margin: 0;
}

.ri-about-stack,
.ri-manifesto-stack {
    display: grid;
    gap: 1rem;
    padding: 2rem;
}

.ri-about-row,
.ri-manifesto-row {
    display: grid;
    grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr);
    gap: 1.6rem;
    padding: 1.35rem;
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        var(--ri-surface);
}

.ri-about-row-head,
.ri-manifesto-row-head {
    padding-right: 1rem;
}

.ri-about-row-body,
.ri-manifesto-row-body {
    min-width: 0;
}

.ri-about-card-title,
.ri-manifesto-card-title {
    font-family: var(--ri-font-display);
    font-size: 1.7rem;
    text-transform: uppercase;
    line-height: 1.08;
    margin: 0.65rem 0 0.8rem;
}

.ri-about-card-body,
.ri-manifesto-card-body {
    color: var(--ri-text-muted);
    line-height: 1.75;
    font-size: 1.12rem;
    margin: 0 0 1rem;
}

.ri-about-point {
    color: var(--ri-text);
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
}

.ri-about-point + .ri-about-point {
    margin-top: 0.75rem;
}

.ri-manifesto-main {
    min-width: 0;
}

.ri-article-more {
    padding: 0 2rem 4rem;
    border-top: 1px solid var(--ri-border);
}

.ri-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.2rem;
}

.ri-recent-card {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius);
    padding: 1rem;
    background: var(--ri-surface);
}

.ri-recent-card-body {
    flex: 1;
    min-width: 0;
}

.ri-recent-card-cat {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ri-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.ri-recent-card-title {
    font-family: var(--ri-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ri-text);
    margin-bottom: 0.3rem;
}

.ri-recent-card-date {
    font-size: 1rem;
    color: var(--ri-text-faint);
}

/* ===================================================================
   CITY HERO ELEMENTS
   =================================================================== */
.ri-city-hero-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.ri-city-hero-name {
    font-family: var(--ri-font-display);
    font-size: 3.6rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0;
}

.ri-city-country {
    font-size: 1.3rem;
    color: var(--ri-text-muted);
}

/* ===================================================================
   DETAIL HERO INNER — generic h1/p (genre page)
   =================================================================== */
.ri-detail-hero-inner > h1 {
    font-family: var(--ri-font-display);
    font-size: 3.6rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ri-text);
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.ri-detail-hero-inner > p {
    color: var(--ri-text-muted);
    font-size: 1.3rem;
    max-width: 55ch;
    line-height: 1.5;
    margin: 0;
}

/* ===================================================================
   GENRE CLOUD — flex tag list
   =================================================================== */
.ri-genre-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 960px) {
    .ri-playlist-spotlight {
        grid-template-columns: 1fr;
    }

    .ri-about-title,
    .ri-manifesto-title,
    .ri-playlist-spotlight-title {
        font-size: 2.4rem;
    }

    .ri-about-row,
    .ri-manifesto-row {
        grid-template-columns: 1fr;
    }
}