/* --- 1. FONTS & ROOT VARIABLES --- */
@font-face { font-family: 'HSRfont'; src: url('./fonts/BionicKidSimple.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'HSRfont2'; src: url('./fonts/Capacitor-Regular.woff2') format('woff2'); font-display: swap; }

:root {
    --brand-red: #ff0000;
    --brand-black: #000000;
    --brand-white:#fff;
    --sidebar-fixed: 260px; 
    --main-font: 'HSRfont2', 'Arial', sans-serif;
    --logo-font: 'HSRfont', 'Impact', sans-serif;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --written-text: Arial, Helvetica, sans-serif;
    --HSRtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

body {  
    background: radial-gradient(circle at center, #2a0000 0%, #ffffff 100%);
    background-attachment: fixed;
    margin: 0; 
    padding-bottom: 160px; 
    min-height: 100vh;
    font-family: var(--written-text) !important;
    color: #000000;
    font-size: 16px;
    overflow: visible !important; 
}

.read-more-btn {
    display: none !important;
} 

.page-wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    align-items: flex-start;
    margin-top: 75px !important;
}

/******************** HEADER  LOGO AND NAV  ************************/
.logo { 
    font-family: var(--logo-font) !important; 
    color: var(--brand-red); 
    font-size: 1.5rem; 
    line-height: 0.9; 
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.logo span { 
    font-family: var(--main-font) !important; 
    color: #000000; 
    font-size: 1.1rem; 
    display: block; 
    font-style: italic; 
    letter-spacing: 2px;
    text-shadow: var(--HSRtext-shadow);

    /* THE STABLE SCOOT */
    text-align: center !important; /* Start from the center to match the main logo */
    position: relative !important;
    left: 30px !important;        /* Use this to nudge it left (-) or right (+) */
    margin-top: 5px !important;   /* Pulls it up tight against HOTSHOT */
}

.main-nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 5%; 
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(15px) saturate(150%); 
    -webkit-backdrop-filter: blur(15px) saturate(150%);   
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

.nav-links { 
    display: flex; 
    list-style: none; 
    gap: 30px; 
    margin: 0; 
    padding: 0; 
}

.nav-links a { 
    color: #000000; 
    font-family: var(--main-font) !important; 
    text-decoration: none; 
    font-size: 18px; 
    text-transform: uppercase; 
    font-weight: bold; 
    transition: 0.3s; 
}

.nav-links a:hover { color: var(--brand-red); }

/* THE HSR-BANNER: Replaces the broken centered box */
.hsr-banner {
    clear: both !important;      /* Forces the box below the floated image */
    width: 100% !important;      /* Ensures it spans the full content box */
    background: rgba(0, 0, 0, 0.85); 
    color: var(--brand-white);
    padding: 15px 10px;
    text-align: center !important; /* Centering the text */
    font-weight: bold;
    margin-top: 30px;
    font-family: var(--main-font);
    border-top: 2px solid var(--brand-red); /* The Signature Red Line */
    display: block !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/***** MAIN STAGE AERA   CONTENT BOX AND HER SIDEBAR ***/
.hero-sidebar {
    width: 260px !important;
    flex: none !important;
}

.hero-art { 
    width: 100%; 
    height: auto;
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    margin-top: 20px;
}

.hsr-feature-box {
    float: left;
    width: 220px; /* Reduced from 300px to make it subtler */
    margin: 0 25px 15px 0;
    text-align: center;
}

.content-box {
    flex: 1 !important; 
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 20px;
    min-height: 600px;
    overflow-y: auto;   
    color: #1a1a1a !important; 
    font-family: 'Inter', sans-serif;
    line-height: 1.0 !important;
}

.read-more-btn {
    display: none !important;
}

.article-body {
    max-height: none;
    overflow: visible;
    position: relative;
    transition: max-height 0.5s ease;
}

/****************** MUSIC PLAYER - THE FINAL ALIGNMENT *******************/

.steele-player-dock {
    position: fixed !important;
    bottom: 40px !important;    /* Lifts it exactly above the 40px footer */
    left: 0 !important;
    width: 100% !important;
    height: 85px !important;    
    z-index: 99999 !important;
    background: rgba(168, 121, 121, 0.4); 
    border-top: 2px solid var(--brand-red) !important;
    display: flex !important;
    align-items: center !important;
}

.player-grid { 
    display: grid !important;
    /* LANE 1: Info (250px) | LANE 2: Play (70px) | LANE 3: Wave (1fr) | LANE 4: Stems (130px) */
    grid-template-columns: 250px 70px 1fr 130px !important; 
    grid-template-areas: "info play waveform stems" !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 30px !important;
    align-items: center !important; 
    gap: 15px !important;
}

.player-info { 
    grid-area: info !important; 
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

#player-art-dock {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
}

.main-play-btn { 
    grid-area: play !important; 
    justify-self: center !important;
    background-color: var(--brand-red) !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    border: none !important;
    color: white !important;
}

#waveform-container { 
    grid-area: waveform !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;   /* This ensures it spans the 1fr lane */
    min-width: 200px !important; /* Prevents it from collapsing to 0 */
    height: 50px !important; 
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.05); /* Slight tint to see the box while debugging */
}

#waveform {
    width: 100% !important;
    height: 40px !important;
}

.buy-btn { 
    grid-area: stems !important;
    justify-self: end !important;
    background: var(--brand-red) !important;
    color: #000 !important;
    width: 110px !important;
    font-weight: bold;
    border-radius: 4px;
}

/********************* FOOTER  **************/
.hsr-footer {
    width: 100% !important;
    height: 40px !important; 
    padding: 0 40px !important; 
    
    /* THE FROSTED LOOK */
    background: rgba(20, 20, 20, 0.1) !important; /* Semi-transparent dark */
    backdrop-filter: blur(10px) !important; /* This creates the frost/blur effect */
    -webkit-backdrop-filter: blur(10px) !important; /* Safari support */
    
    /* HEADER MATCHING ACCENTS */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle top highlight */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3) !important; /* Depth shadow */

    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 100000 !important; 
    display: flex !important;
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
}

.hsr-footer-icons {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    gap: 30px !important; 
}

.footer-social-link {
    font-size: 14px !important; /* Adjusted for techno font clarity */
    color: rgba(0, 0, 0, 0.8) !important; 
    text-decoration: none;
    transition: all 0.2s ease-out !important; 
    display: inline-flex !important;
    align-items: center;
    font-family: var(--main-font) !important;
}

.footer-social-link:hover {
    color: var(--brand-red) !important; 
    transform: translateY(-3px) scale(1.05) !important; 
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

/* --- PRESS PAGE BUTTONS --- */
.press-button-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 20px 0 !important;
    justify-content: flex-start !important;
}

.press-page-btn {
    /* Shape & Interaction */
    padding: 10px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    
    /* Branding: Techno Font & Uppercase */
    font-family: var(--main-font) !important; 
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    
    /* Frosted Glass Effect (Matches Header/Footer) */
    background: rgba(20, 20, 20, 0.6) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Animation */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Hover State: Turns Brand Red */
.press-page-btn:hover {
    background: var(--brand-red) !important; 
    border-color: var(--brand-red) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
}

.press-page-btn:active {
    transform: translateY(0px) scale(0.97) !important;
}












/* --- 8. MOBILE RESPONSIVE OVERRIDES --*************************************************************- */


@media screen and (max-width: 768px) {
    /* 1. RESET THE BODY & WRAPPER */
    body, html {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

.page-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* This is the main gear for centering */
        text-align: center !important;
        padding: 0 10px !important;
    }

 #articleBody p {
        text-align: center !important; /* Centers the interview paragraphs */
        padding: 0 15px !important; /* Prevents text from hitting screen edges */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; 
    color: #000000 !important;   /* Solid black for maximum contrast */
    line-height: 1.4 !important;Reduced from default 16px/20px */
    } 

    .main-nav {
        flex-direction: column !important;
        padding: 5px 0 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(20px) !important;
    }

    .nav-links {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 5px !important;
        width: 100% !important;
    }

    .nav-links a {
        font-size: 12px !important;
        padding: 6px !important;
        white-space: nowrap !important;
    }

    .logo { 
        font-size: 1.2rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 3. THE "SLAB" ROW ENGINE (Music/Photos/Press) */
/* 2. THE CONTENT BOX & CONTAINER */
    .content-box, .hsr-article-container {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the image box, header, and text */
        text-align: center !important;
        padding: 0 !important;
    }


/* THE FEATURE BOX: Replaces that messy 300px float div */
.hsr-feature-box {
        float: none !important; /* Kills the left-float from desktop */
        margin: 0 auto 20px auto !important; /* Horizontal auto-centering */
        width: 90% !important; /* Gives it a slim, cinematic look */
        max-width: 400px;
    }

/* THE INTERVIEW BANNER: Replaces the clear:both background block */
.hsr-banner {
    clear: both;
    width: 100%;
    background: var(--brand-red);
    color: var(--brand-white);
    padding: 5px;
    text-align: center;
    font-weight: bold;
    margin-top: 30px;
    font-family: var(--written-text);
    border-top: 1px solid var(--brand-red); /* Adds that HSR signature touch */
}

/* THE EXCLUSIVE HEADER: Replaces the inline h1 styles */
.exclusive-header {
    /* 1. FIX: Correct color syntax (removed extra colon) */
    color: var(--brand-white) !important; 
    
    /* 2. FIX: Center alignment for 90% width */
    width: 90% !important;

    text-align: center !important;
    display: block !important;
margin-top: 0 !important; 
    margin-bottom: 5px !important;
    
    /* 2. Reset the line-height to prevent vertical 'ghost' space */
    line-height: 1.1 !important;
    
    /* 3. Ensure it's not inheriting padding from a parent */
    padding-top: 0 !important;
    /* 3. BRANDING: Lock in the BionicKid look */
    font-family: var(--written-text) !important;
    font-size: 28px !important;
    letter-spacing: 3px;
    text-transform: uppercase;
}



/* --- THE UNIVERSAL HOTSHOT BUTTON --- */
.hsr-btn {
    width: 100%;
    margin-top: 5px;
    padding: 5px 20px;
    display: inline-block;
    cursor: pointer;
    
    /* Typography - Inherited from Theme */
    font-family: var(--main-font); 
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    
    /* Skin & Branding - Inherited from Theme */
    background: var(--brand-red);
    color: var(--brand-white);
  
    
    /* Animation for the "Hotshot" feel */
    transition: all 0.3s ease-in-out;
}

/* Hover State */
.hsr-btn:hover {
    background: var(--brand-red);
    color: var(--brand-black);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

    .music-card, .album-box, .photo-card, .track-item {
        display: flex !important;
        flex-direction: row !important; /* Forces Side-by-Side */
        align-items: center !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-left: 5px solid var(--brand-red) !important;
        margin-bottom: 2px !important;
        padding: 10px !important;
    }

    .music-card img, .catalog-thumb {
        width: 70px !important; 
        height: 70px !important;
        object-fit: cover !important;
        margin-right: 15px !important;
    }

    /* SURGICAL FIX: Only targets the button under the XLA photo */
.hsr-feature-box .hsr-btn {
    font-family: var(--written-text) !important; /* Forces BionicKid/HSRfont */
    font-size: 16px !important; 
    letter-spacing: 2px !important;
    text-transform: uppercase;
    margin: 6px auto 0 auto !important;
    display: block !important;
    width: 90% !important; /* Pulls it in slightly from the image edges */
    padding: 10px 0 !important;
    background: var(--brand-red) !important;
}

    .track-meta h3 { 
                 color: #fff !important; 
                 font-size: 14px !important; 
                 margin: 0 !important; 
    }

    .track-meta p { 
        color: var(--brand-red) !important; 
        font-size: 11px !important; }

    /* 4. THE PLAYER DOCK & SQUARE BUTTON FIX */
    .hero-sidebar, .hsr-footer, #waveform-container { 
        display: none !important; 
    }

    .steele-player-dock {
        position: fixed !important;
        bottom: 0 !important;
        height: 90px !important;
        width: 100% !important;
    }

    .player-grid { 
        grid-template-columns: 1fr 50px 50px !important; /* TWO 50px BUTTON LANES */
        grid-template-areas: "info play stems" !important;
        gap: 10px !important;
        padding: 0 15px !important;
    }

    /* THE SQUARE STEMS BUTTON */
    .steele-player-dock .buy-btn { 
        grid-area: stems !important;
        width: 45px !important; 
        height: 45px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
        padding: 0 !important;
    }


.article-body.folded {
        max-height: 150px; /* Adjust this to where you want the "fold" */
        overflow: hidden;
        /* Adds a fade-out effect at the bottom of the fold */
        mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    }

    /* Show the button only on mobile */
.read-more-btn {
    display: inline !important;    /* Let's it sit right at the end of the text */
    background: none !important;
    border: none !important;
    color: var(--brand-red) !important;
    font-family: var(--main-font) !important; /* Capacitor */
    font-size: 13px !important;
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px !important; /* Spacing from the last word of the bio */
}


/* Hide the button by default on desktop */
.read-more-btn {
    display: none;}