/* =======================================
   STYLE V8: FULLY RESPONSIVE
   ======================================= */

/* ====================
   GLOBAL & TYPOGRAPHY
   ==================== */
/* ... (This entire section is the same as the last version) ... */
*, *:before, *:after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;
    background-color: #050505;
    color: #f0f0f0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { 
    font-weight: 500; margin-top: 0; letter-spacing: -0.5px;
}
h1 { font-size: 2.8rem; font-weight: 600; }
h2 { font-size: 2rem; border-bottom: 1px solid #282828; padding-bottom: 0.75rem; }
h3 { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
p { 
    line-height: 1.9; font-size: 1rem; max-width: 720px; color: #bbbbbb;
}
a { 
    color: #ffffff; text-decoration: none; transition: all 0.2s ease-in-out; 
}
a:hover { color: #bbbbbb; }

/* ====================
   DESKTOP-FIRST LAYOUT (Default)
   ==================== */
.mobile-header { display: none; } /* Hide mobile header on desktop */
.container { display: flex; }
.main-content { margin-left: 280px; padding: 4rem; width: 100%; }

/* Sidebar Styles */
.sidebar {
    position: fixed; top: 0; left: 0; width: 280px; height: 100vh;
    background-color: #000000; padding: 2.5rem; display: flex; flex-direction: column;
    border-right: 1px solid #282828;
    z-index: 100;
}
/* ... (The rest of the sidebar, navigation-grid, and content styles are identical to the last version) ... */
.sidebar-header .logo { font-size: 2rem; font-weight: 600; color: #ffffff; display: block; margin-bottom: 2.5rem; text-align: center; }
.sidebar-nav-container { padding: 0 4px; }
.navigation-grid { list-style-type: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.navigation-grid li a { display: block; width: 100%; padding: 16px 10px; text-align: center; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.5px; background-color: transparent; border: 1px solid #444; border-radius: 4px; }
.navigation-grid .grid-span-2 { grid-column: span 2; }
.navigation-grid li a:hover { background-color: #111; border-color: #666; color: #ffffff; }
.navigation-grid li a.active { background-color: #f0f0f0; color: #000000; border-color: #f0f0f0; }
.sidebar-feed { margin-top: 3.5rem; }
.sidebar-feed h4 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #777; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #282828; }
.sidebar-feed ul { list-style-type: none; padding: 0; margin: 0; }
.sidebar-feed li { margin-bottom: 1.2rem; }
.sidebar-feed a { font-size: 0.9rem; line-height: 1.5; font-weight: 400; color: #aaa; }
.item-listing { border-bottom: 1px solid #282828; padding-bottom: 2rem; margin-bottom: 2rem; }
.post-meta, .project-meta { font-size: 0.9rem; color: #777; margin-top: -0.25rem; }
.tags { list-style: none; padding: 0; margin: 1rem 0; }
.tags li { display: inline-block; background-color: #1a1a1a; padding: 6px 12px; border: 1px solid #333; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: #aaa; margin-right: 8px; margin-top: 8px; }
.back-button { display: inline-block; margin-top: 2rem; padding: 12px 20px; font-weight: 600; font-size: 0.9rem; text-align: center; border: 1px solid #444; border-radius: 4px; }
.back-button:hover { background-color: #111; border-color: #666; color: #ffffff; }


/* ===================================================================
   MOBILE & RESPONSIVE STYLES (Breakpoint at 800px)
   =================================================================== */
@media (max-width: 800px) {
    /* Hide the desktop sidebar */
    .sidebar {
        display: none;
    }

    /* Show and style the mobile header */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #000000;
        border-bottom: 1px solid #282828;
        padding: 0 1.5rem;
        z-index: 1000;
    }
    .mobile-logo {
        font-size: 1.2rem;
        font-weight: 600;
    }
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        font-weight: 500;
        color: #aaa;
        cursor: pointer;
    }
    .hamburger-icon {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .hamburger-icon span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #aaa;
    }

    /* Style the dropdown menu */
    .mobile-nav-menu {
        position: fixed;
        top: 60px; /* Position right below the header */
        right: 0;
        width: 100%;
        background-color: #0a0a0a;
        border-bottom: 1px solid #282828;
        z-index: 999;
        transform: translateY(-150%); /* Start hidden way off-screen */
        transition: transform 0.3s ease-in-out;
    }
    .mobile-nav-menu.is-open {
        transform: translateY(0); /* Slide into view */
    }
    .mobile-nav-menu a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        border-bottom: 1px solid #282828;
    }
    .mobile-nav-menu a:last-child {
        border-bottom: none;
    }

    /* Adjust main content for mobile */
    .main-content {
        margin-left: 0;
        padding: 1.5rem;
        padding-top: 80px; /* Add padding to push content below the fixed header */
    }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
}