/* ARTICLE PAGE */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #161616;
    background: #fff;
}

.article-container,
.article-container * {
    box-sizing: border-box;
}

.article-container {
    width: min(100% - 40px, 1000px);
    margin: 45px auto 70px;
}

.article {
    width: 100%;
}

/* TITLE AND AUTHOR */

.article-header {
    max-width: 850px;
    margin: 0 auto 28px;
    padding-top: 22px;
    border-top: 4px solid #b40000;
}

.article-header h1 {
    margin: 0 0 22px;
    color: #161616;
    font-size: clamp(30px, 4.5vw, 50px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.article-meta time {
    color: #666;
}

.site-header {
    border-bottom: 1px solid #ddd;
}

.logo-container {
    max-width: 1200px;
    margin: auto;
    padding: 25px 20px 18px;
    text-align: center;
}

.logo {
    width: 260px;
    max-width: 80%;
    height: auto;
}

/* FEATURED IMAGE */

.article-image {
    margin: 0 0 35px;
}

.article-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ARTICLE TEXT */

.article-content {
    max-width: 780px;
    margin: 0 auto;
    color: #292929;
    font-size: 18px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.article-content p {
    margin: 0 0 24px;
}

.article-content a {
    color: #b40000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-content a:hover {
    color: #800000;
}

.article-content strong {
    font-weight: 700;
}

/* MOBILE */

@media (max-width: 600px) {
    .article-container {
        width: calc(100% - 30px);
        margin: 25px auto 45px;
    }

    .article-header {
        padding-top: 16px;
        margin-bottom: 22px;
    }

    .article-header h1 {
        margin-bottom: 18px;
        letter-spacing: -0.5px;
    }

    .article-meta {
        font-size: 13px;
        padding-bottom: 16px;
    }

    .article-image {
        margin-bottom: 25px;
    }

    .article-content {
        font-size: 17px;
        line-height: 1.75;
    }
}