.blog-main {
    min-height: 100vh;
    padding: 150px 50px 90px;
}

.blog-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.blog-heading {
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 3px;
}

.blog-heading::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00ffff, #ff00ff 62%, rgba(0, 255, 255, .18));
    box-shadow: 0 0 10px rgba(0, 255, 255, .35);
}

.blog-heading-tab {
    display: inline-flex;
    align-items: center;
    min-height: 62px;
    padding: 0 25px;
    border: 1px solid rgba(0, 255, 255, .28);
    border-bottom: 0;
    border-radius: 8px 8px 2px 2px;
    background: rgba(8, 18, 19, .78);
    box-shadow: 0 -7px 24px rgba(0, 255, 255, .11);
}

.blog-heading h1 {
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.15rem, 3.2vw, 2.4rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0, 255, 255, .75);
}

.blog-intro {
    max-width: 760px;
    margin: -24px 0 42px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.blog-card {
    display: flex;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 255, .22);
    border-radius: 8px;
    background: rgba(13, 18, 19, .78);
    box-shadow: inset 0 0 28px rgba(0, 255, 255, .025);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, .68);
    box-shadow: 0 0 24px rgba(0, 255, 255, .12);
}

.blog-card-link {
    display: flex;
    width: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.blog-cover {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-bottom: 2px solid rgba(0, 255, 255, .45);
    background: linear-gradient(135deg, rgba(0, 255, 255, .14), rgba(255, 0, 255, .1));
}

.blog-cover-placeholder {
    display: grid;
    place-items: center;
}

.blog-cover-placeholder svg {
    width: 48px;
    color: rgba(0, 255, 255, .58);
}

.blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--text-secondary);
    font-size: .75rem;
}

.blog-card h2 {
    margin: 14px 0 11px;
    color: #fff;
    font-family: 'Audiowide', sans-serif;
    font-size: 1rem;
    line-height: 1.45;
}

.blog-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
}

.blog-read-more {
    margin-top: auto;
    padding-top: 20px;
    color: var(--primary);
    font-family: 'Audiowide', sans-serif;
    font-size: .72rem;
    text-transform: uppercase;
}

.blog-empty {
    padding: 48px 28px;
    border: 1px solid rgba(0, 255, 255, .22);
    border-radius: 8px;
    background: rgba(13, 18, 19, .7);
    text-align: center;
}

.blog-empty h2 { color: var(--primary); font-family: 'Audiowide', sans-serif; font-size: 1rem; }
.blog-empty p { color: var(--text-secondary); }

.blog-article {
    width: min(920px, 100%);
    margin: 0 auto;
}

.blog-back {
    display: inline-flex;
    margin-bottom: 28px;
    color: var(--primary);
    font-family: 'Audiowide', sans-serif;
    font-size: .72rem;
    text-decoration: none;
    text-transform: uppercase;
}

.blog-article-header h1 {
    margin: 15px 0 18px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.75rem, 5vw, 3.6rem);
    line-height: 1.13;
    text-shadow: 0 0 22px rgba(0, 255, 255, .4);
}

.blog-article-lead {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.75;
}

.blog-article-cover {
    width: 100%;
    max-height: 520px;
    margin: 34px 0;
    border: 1px solid rgba(0, 255, 255, .3);
    border-radius: 8px;
    object-fit: cover;
}

.blog-prose {
    padding: 34px;
    border: 1px solid rgba(0, 255, 255, .18);
    border-radius: 8px;
    background: rgba(12, 17, 18, .72);
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.85;
}

.blog-prose h2, .blog-prose h3, .blog-prose h4 { color: var(--primary); font-family: 'Audiowide', sans-serif; line-height: 1.45; }
.blog-prose h2 { margin: 38px 0 16px; font-size: 1.25rem; }
.blog-prose h3 { margin: 30px 0 14px; font-size: 1rem; }
.blog-prose a { color: var(--primary); }
.blog-prose blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--secondary); background: rgba(255, 0, 255, .045); }
.blog-prose pre, .blog-prose code { font-family: Consolas, monospace; }
.blog-prose pre { overflow-x: auto; padding: 18px; background: #050909; border: 1px solid rgba(0, 255, 255, .14); border-radius: 6px; }

@media (max-width: 900px) {
    .blog-main { padding: 125px 20px 70px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-heading-tab { min-height: 52px; padding: 0 18px; }
    .blog-prose { padding: 22px 18px; }
}