:root {
            --primary: #007ee5;
            --dark: #131313;
            --light: #ffffff;
            --text: #111;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: 'Lato', Arial, sans-serif;
            color: var(--text);
            line-height: 1.6;
            background: #fdfdfd;
        }
        #header {
            padding: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--light);
            border-bottom: 1px solid #eee;
        }
        .logo-container img { height: 40px; display: block; }
        nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
        nav a { text-decoration: none; color: var(--text); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; }
        #innerWrapper { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; }
        .hero-banner {
            width: 100%;
            height: 400px;
            background: #ccc;
            background-image: url('/assets/Jrock_Header.jpg');
            background-size: cover;
            background-position: center;
            margin-bottom: 3rem;
            display: flex;
            align-items: flex-end;
            padding: 2rem;
        }
        h1.site-title { font-size: 2.5rem; margin: 0; }
        .site-tagline { color: var(--primary); font-weight: 300; letter-spacing: 2px; }
        footer { padding: 4rem 2rem; text-align: center; border-top: 1px solid #eee; font-size: 0.9rem; }
        
        @media (max-width: 768px) {
            #header { flex-direction: column; gap: 1rem; }
            nav ul { flex-wrap: wrap; justify-content: center; }
        }