﻿.page-hero {
    background: radial-gradient(circle at top right, rgba(239,154,43,0.18), transparent 36%), linear-gradient(135deg, #070403 0%, #150605 100%);
    color: var(--brand-light);
    padding: 72px 0;
}

    .page-hero h1 {
        font-size: clamp(36px, 4vw, 58px);
        line-height: 1.08;
        margin: 0 0 16px;
    }

    .page-hero p {
        max-width: 760px;
        font-size: 18px;
        line-height: 1.7;
        color: rgba(249, 237, 213, 0.82);
    }

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

.article-card {
    background: #ffffff;
    border: 1px solid #eee2d1;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.07);
}

    .article-card h2 {
        margin-top: 0;
        font-size: 30px;
    }

    .article-card p {
        font-size: 17px;
        line-height: 1.75;
        color: #333;
    }

.video-embed {
    background: #0b0504;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}

    .video-embed iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border: 0;
        display: block;
    }

.sidebar-card {
    background: #fffaf1;
    border: 1px solid #ead8ba;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 20px;
}

    .sidebar-card h3 {
        margin-top: 0;
    }

.meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .meta-list li {
        padding: 10px 0;
        border-bottom: 1px solid #ead8ba;
        font-size: 15px;
    }

        .meta-list li:last-child {
            border-bottom: 0;
        }

.youtube-comment-btn {
    display: inline-flex;
    margin-top: 16px;
}

.empty-state {
    background: #fffaf1;
    border: 1px dashed #d9bd85;
    padding: 30px;
    border-radius: 18px;
    color: #6d4a12;
}

@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr;
    }
}
