:root {
    /* Color Palette - The Principia */
    --bg-color: #0e0c0a;
    /* Dark void */
    --text-color: #e8a598;
    /* Salmon/Peach */
    --text-dim: #8b6b61;
    /* Dimmed Salmon */
    --text-header: #ffffff;
    /* White for headers */
    --accent-color: #ffb7b2;
    --glow-color: rgba(20, 20, 40, 0.4);
    /* Subtle blue/purple void glow */
    --nav-color: #6a7c8c;
    /* Muted grey/blue for nav */

    /* Layout */
    --gutter-width: 60px;
    --max-content-width: 900px;
}

@font-face {
    font-family: 'ZenSerif';
    src: local('Garamond'), local('Times New Roman'), serif;
}

@font-face {
    font-family: 'ZenMono';
    src: local('Consolas'), local('Courier New'), monospace;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'ZenMono', monospace;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.8;
}

/* Atmospheric Glow */
body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle at 10% 50%, var(--glow-color) 0%, transparent 40%),
        radial-gradient(circle at 90% 50%, var(--glow-color) 0%, transparent 40%);
    pointer-events: none;
    z-index: 999;
}

h1,
h2,
h3 {
    font-family: 'ZenSerif', serif;
    font-weight: normal;
    color: var(--text-header);
    letter-spacing: 0.05em;
    text-transform: none;
    /* Principia uses sentence/title case, not all caps headers */
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 40px;
}

p {
    margin-bottom: 25px;
    max-width: 800px;
}

a {
    color: var(--nav-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--nav-color);
    transition: all 0.2s ease;
}

a:hover {
    color: var(--text-color);
    border-bottom-style: solid;
}

.container {
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    /* overflow: hidden; Removed to allow body scroll if needed, but we want the inner content to scroll */
}

/* Sidebar / Gutter */
.gutter {
    width: var(--gutter-width);
    padding-top: 40px; /* Aligns with h1 margin-top approximately */
    text-align: right;
    padding-right: 15px;
    color: #333;
    font-family: 'ZenMono', monospace;
    font-size: 0.8em;
    user-select: none;
    border-right: 1px solid #222;
    opacity: 0.5;
    
    /* Fixed positioning relative to container for "static" feel while content scrolls? 
       Actually, standard code editors have line numbers SCROLL with content.
       The user said "keeping it static". 
       If they want it static (always visible 00-30 on screen), it should likely be independent of scroll.
       BUT usually line numbers correspond to lines. 
       "stretched to the end page... number goes up until the end of the page... keeping it static"
       Interpretation: The column bar itself is static (fixed left), but maybe numbers scroll?
       Or, "static" means it doesn't move horizontally?
       Let's stick to standard flex behavior where it scrolls WITH content if main-content scrolls.
       Wait, currently .main-content has overflow-y: auto. So gutter is separate.
       If .main-content scrolls, gutter stays still. That means line numbers DON'T match content lines.
       If that's the desired "static" effect where numbers are just decoration 00..99 fixed on side.
    */
    overflow: hidden; /* Hide if too many numbers generated */
    height: 100vh; /* Full viewport height */
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    padding: 60px 80px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 var(--bg-color);
    height: 100vh; /* Scroll WITHIN this container */
}

.main-content::-webkit-scrollbar {
    width: 8px;
}

.main-content::-webkit-scrollbar-thumb {
    background: #333;
}

/* Navigation */
nav {
    margin-bottom: 80px;
    font-family: 'ZenMono', monospace;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 40px;
    flex-wrap: wrap; /* Allow wrap on smaller screens */
}

nav a {
    border: none;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nav-color);
    opacity: 1;
}

nav a:hover,
nav a.active {
    color: var(--text-color);
    text-shadow: none;
}

/* Introduction Text Styling */
.intro-text header h1 {
    font-size: 3em;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    line-height: 1.2;
}

.intro-text p {
    font-size: 1.05em;
}

/* Quote Block */
.quote-block {
    margin-top: 60px;
    padding-left: 20px;
    border-left: 2px solid var(--text-dim);
    font-style: italic;
    color: var(--text-header);
    font-family: 'ZenSerif', serif;
}

/* Project / Programming Page Styles */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.project-image-container {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: center; /* Center image */
}

.project-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 2px;
    border: 1px solid #222;
    filter: grayscale(20%) contrast(1.1);
    transition: all 0.3s ease;
}

.project-image:hover {
    filter: grayscale(0%) contrast(1.2);
    border-color: var(--text-dim);
}

.project h2 {
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.8em;
}

/* Text alignment for projects: Per user "paragraphs are left justified" */
.project p {
    text-align: left; 
}

.project-links a {
    margin-right: 20px;
    font-size: 0.9em;
    color: var(--text-color);
    border-bottom: 1px dotted var(--text-dim);
}

.project-links a:hover {
    border-bottom-style: solid;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Reduce base font size */
    }

    .container {
        flex-direction: row; /* Keep row generally */
    }

    /* Reduce sidebar or hide it? 
       User said: "separate mobile version flexboxing... includes ... font size reduction" 
       Usually sidebar takes too much space. Let's make it very thin or hide line numbers. 
       "number column being stretched... MAKE SURE IT's APPLIED TO NOT JUST HOME PAGE"
       But "mobile phones makes it worse". 
       Let's keep sidebar but make it smaller padding/width.
    */
    .gutter {
        width: 30px; /* Smaller width */
        padding-right: 5px;
        font-size: 0.7em;
        /* Likely hide numbers that are too wide or just show 2 digits tight */
    }
    
    .main-content {
        padding: 40px 20px; /* Reduce padding significantly */
    }

    /* Navigation Stack or Scroll? */
    nav ul {
        gap: 20px;
        justify-content: flex-start;
    }
    
    nav {
        margin-bottom: 40px;
    }

    /* Headings */
    h1 {
        font-size: 2em !important; /* Override specific selectors */
        margin-top: 20px;
    }

    .intro-text header h1 {
        font-size: 2em;
    }
    
    /* Project Images */
    .project-image-container {
        margin-bottom: 20px;
    }
    
    .project {
        margin-bottom: 60px;
    }

    /* Music / About Images - Responsive Grid */
    .media-container {
        gap: 15px;
    }
    
    .media-item {
        flex: 1 1 100%; /* Full width on mobile */
        max-width: 100%;
    }
}