@layer reset, base, components, utilities;

@layer reset {
    * { margin: 0; padding: 0; box-sizing: border-box; }
    ul { list-style: none; }
    img { max-width: 100% !important; height: auto !important; display: block; border-radius: var(--radius); }
    pre, code, table, div { max-width: 100% !important; overflow-x: auto; }
}

@layer base {
    :root {
        --primary: #DE2626;
        --bg: #050505;
        --text: #FFFFFF;
        --border: #1A1A1A;
        --panel: #0F0F0F;
        --muted: #71767B;
        --radius: 8px;
        --container: 1200px;
        --font-main: 'Inter', sans-serif;
    }
    body { font-family: var(--font-main); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; transition: 0.2s; }
    a:hover { color: var(--primary); }
}

@layer components {
    .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 30px; }

    .site-header { background: rgba(10,10,10,0.95); backdrop-filter: blur(12px); height: 80px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); }
    .nav-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .logo { font-weight: 900; font-size: 1.5rem; letter-spacing: -1.5px; text-transform: uppercase; }
    .logo span { color: var(--primary); }
    .nav-menu { display: flex; gap: 20px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }

    /* AUTHOR CARD (BEM) */
    .author-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
    .author-card__banner { height: 120px; background: linear-gradient(45deg, var(--primary), #600); }
    .author-card__content { padding: 0 25px 30px; position: relative; }
    .author-card__avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--bg); background: #222; margin-top: -50px; overflow: hidden; margin-bottom: 15px; }
    .author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
    .author-card__name { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; }
    .author-card__handle { color: var(--primary); font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; display: block; }
    .author-card__bio { font-size: 1.05rem; color: #E7E9EA; margin-bottom: 20px; max-width: 700px; }
    
    /* MAIN LAYOUT */
    .main-layout { display: flex; gap: 60px; margin: 50px auto; width: 100%; }
    .main-content { flex: 1; min-width: 0; }
    .sidebar { width: 320px; flex-shrink: 0; }

    .article-header { margin-bottom: 40px; }
    .article-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; line-height: 0.95; letter-spacing: -2px; }
    .article-meta { color: var(--primary); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; display: block; }
    .article-body { font-size: 1.2rem; color: rgba(255,255,255,0.9); overflow-wrap: break-word; }
    .article-body h2 { margin: 60px 0 25px; font-size: 2.2rem; font-weight: 900; border-left: 6px solid var(--primary); padding-left: 20px; }
    .article-body p { margin-bottom: 30px; }

    .sidebar-collapsible { margin-bottom: 25px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow: hidden; }
    .collapse-trigger { width: 100%; padding: 15px 20px; background: none; border: none; color: var(--primary); font-weight: 900; font-size: 0.75rem; text-transform: uppercase; display: flex; justify-content: space-between; cursor: pointer; }
    .collapse-content { background: #000; }
    .category-list li a { display: block; padding: 12px 20px; font-size: 0.85rem; border-bottom: 1px solid var(--border); }

    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
}

@layer utilities {
    .text-muted { color: var(--muted); }
    .flex-center { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 1024px) {
    .main-layout { flex-direction: column; }
    .sidebar { width: 100%; }
    .mobile-menu-toggle { display: block; }
    .nav-menu { display: none; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: var(--panel); padding: 30px; border-bottom: 1px solid var(--border); }
    .nav-menu.active { display: flex; }
}