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

body{
background:#050505;
color:#ffffff;
}

/* ==========================================
HEADER OFFSET
========================================== */

main{
padding-top:90px;
}

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

.article-hero{


max-width:1200px;

margin:0 auto;

padding:70px 60px 40px;


}

.article-breadcrumb{


display:flex;

flex-wrap:wrap;

gap:8px;

color:#5d5d5d;

font-size:.72rem;

letter-spacing:2px;

text-transform:uppercase;

font-family:'Space Grotesk',sans-serif;

margin-bottom:24px;


}

.article-breadcrumb a{


color:#7f7f7f;

text-decoration:none;

transition:.25s ease;


}

.article-breadcrumb a:hover

.article-meta{


color:#C5A059;

text-transform:uppercase;

letter-spacing:4px;

font-size:.72rem;

font-weight:500;

font-family:'Space Grotesk',sans-serif;

margin-bottom:18px;


}

.article-title{


max-width:1100px;

font-family:'Playfair Display',serif;

font-weight:400;

font-size:clamp(3.8rem,5vw,5.8rem);

line-height:.95;

letter-spacing:-2px;

color:#F5F1EC;

margin-bottom:20px;


}

.article-reading-time{


max-width:900px;

color:#8A8A8A;

font-size:1.05rem;

line-height:1.7;

font-family:'Space Grotesk',sans-serif;


}

.article-divider{


width:100%;

height:1px;

margin-top:35px;

background:linear-gradient(
    90deg,
    rgba(197,160,89,0),
    rgba(197,160,89,.25),
    rgba(197,160,89,0)
);


}

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

.article-content{


max-width:920px;

margin:0 auto;

padding:35px 60px 120px;


}

/* ==========================================
PARAGRAPHS
========================================== */

.article-content p{


color:#C7C7C7;

font-size:1.12rem;

line-height:1.75;

margin-bottom:26px;

font-weight:300;


}

/* ==========================================
H2
========================================== */

.article-content h2{


font-family:'Playfair Display',serif;

font-weight:400;

font-size:2.4rem;

line-height:1.15;

color:#F5F1EC;

margin-top:70px;

margin-bottom:22px;


}

/* ==========================================
H3
========================================== */

.article-content h3{


font-family:'Playfair Display',serif;

font-weight:400;

font-size:1.7rem;

color:#F5F1EC;

margin-top:45px;

margin-bottom:14px;


}

/* ==========================================
LINKS
========================================== */

.article-content a{


color:#C5A059;

text-decoration:none;


}

.article-content a:hover{


color:#ffffff;


}

/* ==========================================
STRONG
========================================== */

.article-content strong{


color:#ffffff;

font-weight:600;


}

/* ==========================================
LISTS
========================================== */

.article-content ul{


margin:20px 0 28px 20px;


}

.article-content li{


color:#C7C7C7;

line-height:1.8;

margin-bottom:8px;


}

/* ==========================================
VIP BLOCKQUOTE
========================================== */

.article-content blockquote{

    position:relative;

    margin:50px 0;

    padding:0 0 0 28px;

    background:none;

    border:none;

    color:#ECECEC;

    font-size:1.08rem;

    line-height:1.9;

    font-style:italic;
}

.article-content blockquote::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:1px;
    height:100%;

    background:#C5A059;
}

/* ==========================================
DIVIDER
========================================== */

.article-content hr{


border:none;

height:1px;

margin:60px 0;

background:linear-gradient(
    90deg,
    transparent,
    rgba(197,160,89,.18),
    transparent
);


}

/* ==========================================
FOOTER
========================================== */

.article-footer{


max-width:920px;

margin:0 auto 120px;

padding:30px 60px 0;


}

.article-back{


display:inline-flex;

align-items:center;

gap:10px;

color:#C5A059;

text-decoration:none;

text-transform:uppercase;

letter-spacing:2px;

font-size:.78rem;

transition:.3s ease;


}

.article-back:hover{


transform:translateX(-4px);

color:#ffffff;


}

/* ==========================================
MOBILE
========================================== */

@media(max-width:900px){


main{
    padding-top:72px;
}

.article-hero{
    padding:45px 24px 30px;
}

.article-content{
    padding:25px 24px 90px;
}

.article-title{
    font-size:3rem;
    max-width:100%;
}

.article-content h2{
    font-size:2rem;
    margin-top:55px;
}

.article-content h3{
    font-size:1.5rem;
}

.article-content p{
    font-size:1rem;
    line-height:1.75;
}

.article-footer{
    padding:30px 24px 0;
}


}



/* ==========================================
   TEXT HIGHLIGHTS
========================================== */

.gold{
    color:#C5A059;
    font-weight:500;
}

.crimson{
    color:#8B1E3F;
    font-weight:500;
}

.purple{
    color:#6B2DA8;
    font-weight:500;
}

.soft-gold{
    color:#D8B46B;
}

.soft-crimson{
    color:#A93A57;
}

.soft-purple{
    color:#8A46D6;
}

.article-content strong{

    color:#C5A059;

    font-weight:600;
}

.article-content em{

    color:#8B1E3F;

    font-style:normal;

    font-weight:500;
}


/* ==========================================
   RELATED ARTICLES
========================================== */

.related-articles{

    max-width:760px;

    margin:0 auto 100px;

    padding:0 40px;
}

.related-label{

    color:#C5A059;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.72rem;

    font-family:'Space Grotesk',sans-serif;

    margin-bottom:16px;
}

.related-title{

    font-family:'Playfair Display',serif;

    font-weight:400;

    font-size:2rem;

    color:#F5F1EC;

    margin-bottom:30px;
}

.related-grid{

    display:grid;

    gap:20px;
}

.related-card{

    display:block;

    padding:30px;

    text-decoration:none;

    background:#080808;

    border:1px solid rgba(197,160,89,.12);

    transition:.3s ease;
}

.related-card:hover{

    border-color:rgba(197,160,89,.35);

    transform:translateY(-2px);
}

.related-category{

    display:block;

    color:#C5A059;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.7rem;

    margin-bottom:16px;

    font-family:'Space Grotesk',sans-serif;
}

.related-card h3{

    color:#F5F1EC;

    font-family:'Playfair Display',serif;

    font-weight:400;

    font-size:1.7rem;

    line-height:1.2;

    margin-bottom:16px;
}

.related-card p{

    color:#A5A5A5;

    line-height:1.8;

    margin-bottom:20px;
}

.related-link{

    color:#C5A059;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.75rem;
}

.related-card:hover h3{

    color:#C5A059;
}

@media(max-width:900px){

    .related-articles{

        padding:0 24px;
    }

    .related-card{

        padding:24px;
    }

    .related-card h3{

        font-size:1.45rem;
    }
}



.article-summary{

    margin-top:40px;

    max-width:620px;
}

.summary-label{

    display:block;

    margin-bottom:18px;

    color:#C5A059;

    font-family:'Space Grotesk',sans-serif;

    font-size:.72rem;

    letter-spacing:4px;

    text-transform:uppercase;
}

.article-summary ul{

    margin:0;

    padding:0;

    list-style:none;
}

.article-summary li{

    position:relative;

    padding-left:18px;

    margin-bottom:10px;

    color:#A8A8A8;

    font-size:.95rem;

    line-height:1.7;
}

.article-summary li::before{

    content:"•";

    position:absolute;

    left:0;

    color:#C5A059;
}
/* ==========================================
SMALL MOBILE
========================================== */

@media(max-width:480px){


.article-title{
    font-size:2.5rem;
    line-height:.98;
}

.article-content h2{
    font-size:1.75rem;
}

.article-content h3{
    font-size:1.35rem;
}

.article-meta{
    font-size:.65rem;
}

.article-breadcrumb{
    font-size:.62rem;
}


}