/* ===========================
   BLOG ARTICLE
=========================== */

.article-page{
    padding-top:150px;
    padding-bottom:100px;
    min-height:100vh;
    background:
        radial-gradient(circle at top center, rgba(0,255,136,.07), transparent 45%);
}

.article-card{
    max-width:900px;
    margin:0 auto;
    padding:55px;
    background:#080b0a;
    border:1px solid #00ff8833;
    border-radius:16px;
    box-shadow:inset 0 0 35px #00ff8810;
}

.article-kicker{
    color:#00ffff;
    letter-spacing:2px;
    font-size:14px;
    margin-bottom:18px;
}

.article-card h1{
    font-family:'Orbitron',sans-serif;
    color:#00ff88;
    font-size:46px;
    line-height:1.25;
    margin-bottom:25px;
}

.article-intro{
    color:#cffff0;
    font-size:19px;
    line-height:1.8;
    margin-bottom:25px;
}

.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    color:#7cae9b;
    font-size:14px;
    padding-bottom:30px;
    margin-bottom:35px;
    border-bottom:1px solid #00ff8825;
}

.article-meta i{
    color:#00ff88;
    margin-right:7px;
}

.article-card h2{
    font-family:'Orbitron',sans-serif;
    color:#00ff88;
    font-size:25px;
    margin:35px 0 15px;
}

.article-card p{
    color:#cfcfcf;
    font-size:17px;
    line-height:1.9;
}

.article-back{
    margin-top:45px;
}

.article-back a{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding:12px 20px;
    border:1px solid #00ff88;
    border-radius:8px;
    color:#00ff88;
    transition:.3s;
}

.article-back a:hover{
    background:#00ff88;
    color:#050505;
}

@media(max-width:690px){
    .article-page{
        padding-top:120px;
    }

    .article-card{
        padding:28px 22px;
    }

    .article-card h1{
        font-size:32px;
    }

    .article-intro{
        font-size:16px;
    }
}


/* ==================================================
   MODERN ARTICLE SYSTEM
================================================== */

.article-page{
    background:
        radial-gradient(circle at 50% 0%, rgba(0,255,136,.06), transparent 35%),
        #050706;
}

.article-card{
    background:linear-gradient(145deg,#0a100e,#070a09);
    border-color:rgba(0,255,136,.15);
    border-radius:16px;
    box-shadow:0 25px 90px rgba(0,0,0,.4);
}

.article-kicker{
    font-size:11px;
    letter-spacing:2px;
}

.article-card h1{
    font-size:clamp(35px,5vw,58px);
    letter-spacing:1px;
}

.article-intro{
    color:#91a49c;
}

.article-card h2{
    font-size:21px;
}

.article-card p{
    color:#b7c4be;
}

.article-back a{
    border-color:rgba(0,255,136,.35);
}