/* =========================
ARTICLE HERO
========================= */

.article-hero{
    position:relative;
    padding:180px 0 100px;
    text-align:center;
    z-index:2;
}

.article-tag{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    border:1px solid rgba(199,155,106,.25);

    background:rgba(255,255,255,.04);

    color:#c79b6a;

    font-size:13px;
    font-weight:700;
    letter-spacing:2px;

    margin-bottom:30px;
}

.article-hero h1{

    max-width:900px;
    margin:auto;

    font-size:64px;
    line-height:1.1;

    font-weight:800;

    margin-bottom:30px;
}

.article-hero p{

    max-width:760px;
    margin:auto;

    font-size:20px;
    line-height:1.9;

    opacity:.75;
}


/* =========================
LAYOUT
========================= */

.article-page{

    padding:0 0 120px;

    position:relative;
    z-index:2;
}

.article-layout{

    display:grid;
    grid-template-columns:280px 1fr;

    gap:70px;
}


/* =========================
SIDEBAR
========================= */

.article-sidebar{

    position:sticky;
    top:130px;

    height:max-content;

    padding:30px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);
}

.article-sidebar h4{

    font-size:20px;

    margin-bottom:25px;
}

.article-sidebar ul{

    list-style:none;
}

.article-sidebar li{

    margin-bottom:16px;
}

.article-sidebar a{

    color:#fff;

    opacity:.75;

    text-decoration:none;

    transition:.3s;
}

.article-sidebar a:hover{

    color:#c79b6a;

    opacity:1;
}


/* =========================
CONTENT
========================= */

.article-content{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);
}

.article-content img{

    width:100%;

    border-radius:22px;

    margin-bottom:45px;
}

.article-content p{

    font-size:18px;

    line-height:1.9;

    opacity:.82;

    margin-bottom:28px;
}

.article-content h2{

    margin-top:70px;
    margin-bottom:25px;

    font-size:40px;

    color:#fff;
}

.article-content strong{

    color:#c79b6a;
}


/* =========================
QUOTE
========================= */

.article-content blockquote{

    margin:40px 0;

    padding:30px;

    border-left:4px solid #c79b6a;

    border-radius:16px;

    background:rgba(199,155,106,.08);

    font-size:18px;

    line-height:1.8;
}


/* =========================
CHECK LIST
========================= */

.check-list{

    margin-top:30px;

    list-style:none;
}

.check-list li{

    padding:16px 22px;

    margin-bottom:14px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    font-size:17px;
}


/* =========================
CTA
========================= */

.article-cta{

    margin-top:80px;

    padding:60px;

    border-radius:28px;

    text-align:center;

    background:linear-gradient(
        135deg,
        rgba(199,155,106,.14),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(199,155,106,.18);
}

.article-cta h3{

    font-size:42px;

    margin-bottom:20px;
}

.article-cta p{

    max-width:700px;

    margin:0 auto 35px;
}

.article-cta .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:14px;

    background:#c79b6a;

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;
}

.article-cta .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(199,155,106,.35);
}


/* =========================
RESPONSIVE
========================= */

@media(max-width:1000px){

.article-layout{

grid-template-columns:1fr;

}

.article-sidebar{

position:relative;

top:auto;

}

}

@media(max-width:768px){

.article-hero{

padding:140px 0 70px;

}

.article-hero h1{

font-size:40px;

}

.article-hero p{

font-size:17px;

}

.article-content{

padding:30px;

}

.article-content h2{

font-size:30px;

margin-top:45px;

}

.article-content p{

font-size:16px;

}

.article-cta{

padding:40px 25px;

}

.article-cta h3{

font-size:30px;

}

}