/* --- PAGE STYLING --- */
body {
    background-color: #121212;  /* Dark, deep background */
    color: #e0e0e0;             /* Light gray text */
    font-family: sans-serif;    
    padding: 60px 20px;
    margin: 0;
}

/* --- MAIN HUB HEADER --- */
header {
    text-align: left;           /* Left-aligning makes it feel less rigid than centering */
    max-width: 700px;
    margin: 0 auto 80px auto;   /* Generous 80px space below the header */
}

h1 {
    color: #ffffff;             
    font-size: 42px;
    margin-bottom: 10px;
}

header p {
    color: #888888;             
    font-size: 18px;
    line-height: 1.6;
}

/* --- THE ALBUM DISPLAY (Asymmetrical & Floating) --- */
.album-container {
    max-width: 750px;           
    margin: 0 auto 100px auto;  /* Big gap before the tools start */
    overflow: auto;             /* Keeps the floating columns clean */
}

.album-column {
    width: 45%;                 
    float: left;                
    box-sizing: border-box;     
}

/* Give the image column a slight organic tilt or offset */
.album-artwork {
    width: 100%;               
    max-width: 280px;
    border-radius: 4px;         /* Sharper, more classic vinyl sleeve look */
    display: block;
}

/* Align the track list on the right side */
.tracklist-text {
    text-align: left;
    padding-left: 40px;         /* Push it away from the image naturally */
}

.tracklist-header {
    color: #bb86fc;             
    font-size: 18px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tracks {
    color: #b0b0b0;
    line-height: 2.2;           
    font-size: 15px;
    padding-left: 20px;         
}


/* --- THE TOOLS SECTION (Completely Unboxed) --- */

/* Tool 1: Pushed slightly to the left */
.tool-section-left {
    max-width: 450px;
    margin: 0 auto 80px 15%;    /* Indented from the left side of the screen */
    text-align: left;
}

/* Tool 2: Pushed slightly to the right to create an asymmetrical flow */
.tool-section-right {
    max-width: 450px;
    margin: 0 15% 80px auto;    /* Indented from the right side of the screen */
    text-align: left;
}

/* Simple typography for the tools instead of cards */
.tool-title {
    color: #ff7597;             
    font-size: 24px;
    margin-bottom: 10px;
}

.tool-description {
    color: #a0a0a0;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* --- TEXT BUTTONS --- */
/* Instead of fat colored buttons, let's use elegant underlined text links */
.text-link {
    color: #03dac6;             
    text-decoration: underline; 
    font-weight: bold;
    font-size: 15px;
    transition: color 0.2s;
}

.text-link:hover {
    color: #018786;             
}