/* ARTICLE BODY — long-form post content typography.
   Sits inside .article-body with a centered max-width column.
   Used on single-post templates. */

.article {
    background: var(--clr-white);
    padding: 0 0 clamp(64px, 8vw, 110px);
}

.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
    color: var(--clr-navy);
}

.article-body > * + * { margin-top: 1.1em; }

.article-body p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--clr-navy);
    letter-spacing: 0;
}
.article-body p strong { font-weight: 500; }
.article-body p em { font-style: italic; }

.article-body h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 1.8em 0 0.6em;
}
.article-body h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    line-height: 1.3;
    margin: 1.5em 0 0.4em;
}

.article-body ul,
.article-body ol {
    padding-left: 1.4em;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.7;
}
.article-body li + li { margin-top: 0.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body blockquote {
    border-left: 3px solid var(--clr-red);
    padding: 0.2em 0 0.2em 1.2em;
    margin: 1.5em 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.4;
    color: var(--clr-navy);
    letter-spacing: -0.005em;
}
.article-body blockquote p { font: inherit; }

.article-body a {
    color: var(--clr-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-body a:hover { color: var(--clr-navy); }

/* Inline image inside the article */
.article-body figure {
    margin: 1.6em 0;
}
.article-body figure img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}
.article-body figcaption {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--clr-navy);
    opacity: 0.7;
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 768px) {
    .article-body { padding: 0 20px; }
    .article-body p { font-size: 0.98rem; }
}