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

.article{

    max-width:var(--content-width);

    margin-inline:auto;

    padding:var(--space-xl) var(--space-md);

}

.article-header{

    margin-bottom:var(--space-lg);

    text-align:center;

}

.article-category{

    display:inline-block;

    margin-bottom:1rem;

    padding:.35rem .85rem;

    border-radius:999px;

    background:#f1ece6;

    color:var(--color-accent);

    font-size:.85rem;

    font-family:var(--font-body);

    letter-spacing:.08em;

    text-transform:uppercase;

}

.article-title{

    margin:0;

    margin-bottom:1rem;

}

.article-meta{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

    color:#777;

    font-size:.95rem;

    font-family:var(--font-body);

}

.article-meta .separator{

    opacity:.45;

}

.article-image{

    margin:0 0 var(--space-xl);

}

.article-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.article-image figcaption{

    margin-top:.75rem;

    text-align:center;

    color:#777;

    font-size:.9rem;

}

.article-content{

    font-size:1.15rem;

    line-height:1.95;

}

.article-content h2{

    margin-top:var(--space-xl);

    margin-bottom:1.5rem;

}

.article-content h3{

    margin-top:var(--space-lg);

}

.article-content img{

    border-radius:var(--radius-md);

    margin:3rem auto;

}

.article-content ul,

.article-content ol{

    margin:2rem 0;

    padding-left:1.5rem;

}

.article-content li{

    margin-bottom:.75rem;

}

.article-content hr{

    margin:4rem 0;

    border:none;

    border-top:1px solid var(--color-border);

}

.article-footer{

    margin-top:var(--space-xl);

    padding-top:var(--space-lg);

    border-top:1px solid var(--color-border);

}

.article-content p:first-of-type{

    font-size:1.35rem;

    line-height:1.8;

}

blockquote{

    margin:4rem 0;

    padding:2rem;

    border-left:0px solid var(--color-accent);

    background:#f8f4ef;

    border-radius:var(--radius-md);

    font-family:var(--font-heading);

    font-size:1.6rem;

    line-height:1.5;

}

.card__image {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.card__img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}