/* Opt-in literary article typography. Sites enable it with params.literaryArticles. */
@font-face { font-family: "Literata Variable"; src: url("/fonts/literata-variable-normal.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata Variable"; src: url("/fonts/literata-variable-italic.woff2") format("woff2"); font-style: italic; font-weight: 200 900; font-display: swap; }

.article-container { max-width: 620px; }

.article-container h1.article-title {
    font-weight: 400;
    font-size: var(--literary-title-size);
    line-height: 1.1;
    margin-bottom: 2.25rem;
    color: #000;
}

.article-container .article-subtitle {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.45;
    color: #555555;
}

.article-container .article-content p,
.article-container .article-content li,
.article-container .author-signature {
    font-family: "Literata Variable", Georgia, serif;
    font-weight: var(--literary-body-weight);
    font-size: var(--literary-body-size);
    line-height: 1.65;
    color: #211E1B;
}

.article-container .article-content p { margin-bottom: 0.95em; }

.back-link { display: inline-flex; align-items: center; gap: 0.4em; }

a, .ghost-back, .ghost-back * { -webkit-tap-highlight-color: transparent; transition: none !important; }

.back-link:hover, .back-link:focus, .back-link:active,
.ghost-back:hover, .ghost-back:focus, .ghost-back:active,
.ghost-back:hover *, .ghost-back:focus *, .ghost-back:active * { color: var(--color-primary); }

@media (max-width: 600px) {
    .article-container { padding-top: 72px; }
    .article-container h1.article-title {
        font-size: var(--literary-title-size-phone);
        line-height: 1.15;
        margin-bottom: 1.75rem;
    }
    .article-container .article-subtitle { font-size: 1.125rem; }
    .article-container h1.article-title.article-title--long {
        font-size: var(--literary-title-size-phone-long);
    }
    .article-container .article-content p,
    .article-container .article-content li,
    .article-container .author-signature {
        font-weight: var(--literary-body-weight-phone);
        font-size: var(--literary-body-size-phone);
    }
}