:root {
    --bg-body: #000000;
    --bg-header: #030303;
    --bg-widget-title: #050505;
    --bg-widget-content: #000000;
    --text-primary: #d4d4d4;
    --text-secondary: #525252;
    --accent-color: #52616b;
    /* Much more muted, steel-blue/grey */
    --accent-hover: #9ca3af;
    --border-color: #121212;
    --radius: 8px;
    /* Keeping the modern rounded corners */
    --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.8);
    /* Darker, deeper shadow */
}

/* Ensure no gap at the very top */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-body);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    /* Sticky Footer Setup */
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Header */
.main-header {
    background-color: #000000;

    /* Layer 1: The SVG (Hearts + Central Bar) */
    /* Layer 2: Infinite Gray Bar (#272727) behind it */
    background-image:
        url('images/header_real.svg'),
        linear-gradient(to bottom, #272727 100%, #272727 100%);

    /* SIZING: */
    /* SVG: 100% width mobile */
    /* Gradient: 4.41vw matches the aspect ratio of the 45px bar in the 1021px width SVG */
    background-size:
        100% auto,
        100% 2.4vw;

    background-position:
        top center,
        top center;

    background-repeat:
        no-repeat,
        no-repeat;

    /* COMPACTING: Fixed padding for Desktop (Original Look) */
    padding: 10px 0 5px 0;

    text-align: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    position: relative;
    top: 0;
}

.header-logo {
    max-height: 210px;
    width: auto;
    display: inline-block;
    margin-bottom: 10px;
    filter: brightness(0.15);
    clip-path: circle(36%);
    transform: scale(1.1);
}

/* Fluid Scaling for Mobile/Tablet (< 1021px) */
@media (max-width: 1020px) {
    .main-header {
        /* Fluid padding but with a decent minimum so it doesn't look cramped */
        padding: 15px 0 10px 0;

        /* Crop the top of the SVG by shifting it up */
        /* Layer 1 (SVG): center -50px (shifts up) */
        /* Layer 2 (Gradient): top center (stays put) -> Wait, gradient needs to align with text? 
           Actually, gradient is position 'top center' in base. 
           If the gradient is the bar behind '2RAD', it should probably stay relative to the container or be shifted too? 
           The user wants to cut off the TOP part (swirls). The 2RAD text is in the middle-ish.
           Let's shift the SVG up by ~60px (or 8vw) to crop the top swirls.
           Gradient is likely the horizontal bar. Let's keep it 'top center' relative to the box content? 
           Original was 'top center' for both.
           Let's try shifting SVG up. */
        /* Crop the sides (Zoom effect) instead of the top */
        /* We use an intermediate size (600px) to show petals but crop outer edges */
        background-size:
            600px auto,
            100% 14.5px;
        /* Lock gradient height to match the bar in the SVG */

        background-position:
            top center,
            /* Restore top alignment */
            top center;
    }

    .header-logo {
        max-height: 160px;
    }

    .header-content h1 {
        /* Ensure logo is at least 32px or 6vw */
        font-size: max(6vw, 32px) !important;
    }

    .header-content p {
        /* Ensure subtitle is readable (>11px) */
        font-size: max(2.5vw, 11px) !important;
        letter-spacing: 0.3vw;
    }
}

/* Lock the SVG size on larger screens */
@media (min-width: 1021px) {
    .main-header {
        background-size:
            1021px auto,
            100% 24.5px;
    }
}

/* Add a dark overlay so text remains readable if image is too bright, though it's dark already */
.main-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Subtle tint */
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 2;
    /* Ensure text is above overlay */
}

.header-content h1 {
    font-size: 3.5em;
    /* Base (Desktop) Size - Locked */
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.header-content p {
    color: #222;
    font-size: 0.9em;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Layout */
.container {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 30px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Widgets */
.widget {
    margin-bottom: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--bg-widget-content);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.widget-title {
    background-color: var(--bg-widget-title);
    padding: 14px 16px;
    color: #666;
    /* Darker title text */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push icon to right */
    cursor: pointer;
    /* Indicate clickable */
    user-select: none;
    /* Prevent text selection on quick clicks */
}

/* Collapsible Icon (Chevron) */
.widget-title::after {
    content: '▼';
    /* Down arrow */
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

/* Rotate icon when collapsed (pointing left or right to indicate closed) */
.widget.collapsed .widget-title::after {
    transform: rotate(-90deg);
}

/* Hide content when collapsed */
.widget.collapsed .widget-content {
    display: none;
}

/* Muted accent blip */
.widget-title::before {
    content: '';
    display: block;
    width: 3px;
    height: 12px;
    background-color: #333;
    margin-right: 12px;
}

.widget-content {
    padding: 20px;
}

/* Lists */
.arrow-list {
    list-style: none;
}

.arrow-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
}

.arrow-list li:last-child {
    margin-bottom: 0;
}

.arrow-list li a {
    color: #888;
    /* Default link color in list */
    font-weight: 500;
}

.arrow-list li a:hover {
    color: #ccc;
}

.arrow-list li::before {
    content: "•";
    /* Minimal dot instead of arrow */
    margin-right: 10px;
    color: #333;
    font-size: 1.2em;
}

/* Main Content Specifics */
.post-content p {
    margin-bottom: 16px;
    font-size: 1.05em;
    color: #999;
}

.post-content strong {
    color: #fff;
    /* High contrast for importance */
}

.post-content .meta {
    font-size: 0.85em;
    color: #333;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: 30px;
}

.post-content .meta a {
    color: #555;
    font-weight: 600;
}

.post-content .meta a:hover {
    color: #888;
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 60px 0;
    color: #222;
    font-size: 0.85em;
    margin-top: auto;
    /* Pushes footer to bottom of flex container */
    background-color: #000;
    border-top: 1px solid #0a0a0a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 900px) {
    .container {
        grid-template-columns: 240px 1fr;
    }

    .sidebar-right {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .container {
        grid-template-columns: 1fr;
    }

    /* Reorder: Main content first, then sidebars */
    .main-content {
        order: -1;
    }

    .sidebar-right {
        grid-column: span 1;
        display: block;
    }
}