/* ==========================================================================
 * Single Article — Editorial Layout
 * Depends on golden-ratio.css tokens.
 * ========================================================================== */


/* ============================================================
 *  Reading Progress Bar (top)
 * ============================================================ */
.reading-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    z-index: var(--ad-z-fixed);
    background: linear-gradient(
        to inline-end,
        var(--ad-c-primary-500),
        var(--ad-c-accent-500)
    );
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    will-change: transform;
}

/* Modern: Pure CSS scroll-driven animation */
@supports (animation-timeline: scroll()) {
    .reading-progress {
        animation: progress linear forwards;
        animation-timeline: scroll(root);
    }
    @keyframes progress {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}
/* Older browsers: JS sets --progress, CSS reads it */
@supports not (animation-timeline: scroll()) {
    .reading-progress {
        transform: scaleX(var(--progress, 0));
        transition: transform 80ms linear;
    }
}


/* ============================================================
 *  Header / Hero
 * ============================================================ */
.article-header {
    position: relative;
    isolation: isolate;
    margin-block-end: var(--ad-space-xl);
}
.article-header__hero {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ad-color-surface-2);
    overflow: hidden;
}
.article-header__hero--no-image {
    aspect-ratio: 21 / 9;
    background: linear-gradient(135deg, var(--ad-c-primary-700), var(--ad-c-accent-700));
}
.article-header__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.article-header__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.20) 40%,
        transparent 70%
    );
    pointer-events: none;
}
.article-header__inner {
    position: relative;
    margin-block-start: -120px;
    padding-block-start: 0;
    z-index: 1;
}
@media (max-width: 768px) {
    .article-header__inner { margin-block-start: -60px; }
}

.article-header__category {
    display: inline-block;
    padding: var(--ad-space-2xs) var(--ad-space-sm);
    background: var(--ad-c-primary-500);
    color: white;
    text-decoration: none;
    border-radius: var(--ad-radius-sm);
    font-size: var(--ad-fs--1);
    font-weight: var(--ad-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-block-end: var(--ad-space-md);
}
.article-header__title {
    margin: 0 0 var(--ad-space-md);
    color: white;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    max-inline-size: 22ch;
}
.article-header__lead {
    margin: 0 0 var(--ad-space-md);
    color: rgba(255, 255, 255, 0.92);
    max-inline-size: 60ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.article-header__meta {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--ad-fs--1);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.article-header__meta a {
    color: inherit;
    text-decoration: underline;
}

/* No image variant — لا overlay، meta سوداء */
.single-article:has(.article-header__hero--no-image) .article-header__title,
.single-article:has(.article-header__hero--no-image) .article-header__lead,
.single-article:has(.article-header__hero--no-image) .article-header__meta {
    text-shadow: none;
}


/* ============================================================
 *  Layout Grid (TOC | Main | Share rail via byline)
 * ============================================================ */
.single-layout {
    display: grid;
    gap: var(--ad-space-xl);
    margin-block-end: var(--ad-space-2xl);
}
.single-layout--with-toc {
    grid-template-columns: 240px minmax(0, 1fr);
}
.single-layout--no-toc {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 992px) {
    .single-layout--with-toc { grid-template-columns: 1fr; }
}
.single-layout__main {
    max-inline-size: 720px;
    inline-size: 100%;
    margin-inline: auto;
}


/* ============================================================
 *  Byline + Share
 * ============================================================ */
.article-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ad-space-md);
    padding-block: var(--ad-space-md);
    border-block: var(--ad-border-thin) solid var(--ad-color-border);
    margin-block-end: var(--ad-space-xl);
    flex-wrap: wrap;
}
.article-byline__author {
    display: flex;
    align-items: center;
    gap: var(--ad-space-sm);
    text-decoration: none;
    color: inherit;
    transition: color var(--ad-dur-fast) var(--ad-ease-out);
}
.article-byline__author:hover {
    color: var(--ad-c-primary-600);
}
.article-byline__avatar {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ad-color-border);
}
.article-byline__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Share buttons */
.article-share {
    display: block;
}
.article-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ad-space-xs);
    flex-wrap: wrap;
}
.article-share__btn {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    border: var(--ad-border-thin) solid var(--ad-color-border-strong);
    background: var(--ad-color-surface);
    color: var(--ad-color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: transform var(--ad-dur-fast) var(--ad-ease-spring),
                background var(--ad-dur-fast) var(--ad-ease-out),
                color var(--ad-dur-fast) var(--ad-ease-out);
    position: relative;
}
.article-share__btn:hover {
    transform: scale(1.08);
    background: var(--ad-c-primary-500);
    color: white;
    border-color: var(--ad-c-primary-500);
}
.article-share__btn--twitter:hover  { background: #000; border-color: #000; }
.article-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.article-share__btn--whatsapp:hover { background: #25d366; border-color: #25d366; }
.article-share__btn--telegram:hover { background: #0088cc; border-color: #0088cc; }
.article-share__btn--threads:hover  { background: #000; border-color: #000; }
.article-share__btn--copy.is-copied {
    background: var(--ad-c-success);
    border-color: var(--ad-c-success);
    color: white;
}
.article-share__copied {
    position: absolute;
    inset-block-start: -32px;
    inset-inline-end: 0;
    background: var(--ad-color-text);
    color: var(--ad-color-text-on-dark);
    padding: 4px 8px;
    border-radius: var(--ad-radius-sm);
    font-size: var(--ad-fs--1);
    white-space: nowrap;
}
/* Web Share API button — يظهر فقط لو navigator.share متاح (JS يضيف class) */
.article-share__native { display: none; }
.has-web-share .article-share__native { display: block; }

/* Mobile: floating bottom bar */
@media (max-width: 768px) {
    .article-share {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        background: var(--ad-color-bg);
        border-block-start: var(--ad-border-thin) solid var(--ad-color-border);
        padding: var(--ad-space-sm);
        z-index: var(--ad-z-sticky);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }
    .article-share__list { justify-content: space-around; gap: 0; }
    .single-article { padding-block-end: 80px; }
}


/* ============================================================
 *  TOC (sidebar)
 * ============================================================ */
.single-layout__toc-col {
    grid-column: 1;
}
@media (max-width: 992px) {
    .single-layout__toc-col {
        grid-column: 1;
        order: -1;
    }
}
.article-toc {
    position: sticky;
    inset-block-start: calc(var(--ad-space-xl) + 8px);
    max-block-size: calc(100vh - var(--ad-space-2xl));
    overflow-y: auto;
    padding: var(--ad-space-md);
    background: var(--ad-color-surface);
    border-radius: var(--ad-radius-md);
    border: var(--ad-border-thin) solid var(--ad-color-border);
    font-size: var(--ad-fs-0);
}
.article-toc[hidden] { display: none; }

.article-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ad-space-sm);
    margin-block-end: var(--ad-space-sm);
    padding-block-end: var(--ad-space-sm);
    border-block-end: var(--ad-border-thin) solid var(--ad-color-border);
}
.article-toc__title { margin: 0; }
.article-toc__close {
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--ad-radius-sm);
    border: 0;
    background: transparent;
    color: var(--ad-color-text-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.article-toc__close:hover { background: var(--ad-color-surface-2); color: var(--ad-color-text); }

.article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-rank;
}
.article-toc__list li {
    margin-block-end: var(--ad-space-2xs);
}
.article-toc__list a {
    display: block;
    padding: var(--ad-space-2xs) var(--ad-space-xs);
    color: var(--ad-color-text-muted);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
    border-radius: var(--ad-radius-xs);
    line-height: 1.5;
    transition: color var(--ad-dur-fast) var(--ad-ease-out),
                border-color var(--ad-dur-fast) var(--ad-ease-out),
                background var(--ad-dur-fast) var(--ad-ease-out);
}
.article-toc__list a:hover {
    color: var(--ad-color-text);
    background: var(--ad-color-surface-2);
}
.article-toc__list a.is-active {
    color: var(--ad-c-primary-600);
    border-inline-start-color: var(--ad-c-primary-500);
    font-weight: var(--ad-fw-medium);
}
.article-toc__list .article-toc__h3 a {
    padding-inline-start: var(--ad-space-md);
    font-size: var(--ad-fs--1);
}

/* Hidden state */
.article-toc.is-collapsed .article-toc__list { display: none; }
.article-toc.is-collapsed { padding-block-end: var(--ad-space-sm); }


/* ============================================================
 *  Article Body — Typography (مُحسَّن للعربية)
 * ============================================================ */
.article-body {
    font-size: var(--ad-fs-0);
    line-height: var(--ad-lh-relaxed);
    color: var(--ad-color-text);
    max-inline-size: 65ch;
}
@media (min-width: 992px) {
    .article-body {
        font-size: var(--ad-fs-1);
        line-height: 1.85;
    }
}

.article-body p {
    margin-block: 0 var(--ad-space-md);
}
.article-body p:last-child { margin-block-end: 0; }

/* العناوين داخل المقال */
.article-body :where(h2, h3, h4, h5, h6) {
    margin-block: var(--ad-space-xl) var(--ad-space-sm);
    line-height: var(--ad-lh-snug);
    font-weight: var(--ad-fw-bold);
    scroll-margin-block-start: var(--ad-space-2xl);
}
.article-body h2 { font-size: var(--ad-fs-2); border-block-end: var(--ad-border-base) solid var(--ad-c-primary-500); padding-block-end: var(--ad-space-xs); }
.article-body h3 { font-size: calc(var(--ad-fs-1) * 1.05); }
.article-body h4 { font-size: var(--ad-fs-1); }

/* Drop cap — الفقرة الأولى فقط */
.article-body > p:first-of-type::first-letter {
    font-family: var(--ad-font-display);
    font-size: 3.6em;
    font-weight: var(--ad-fw-extra);
    line-height: 0.9;
    float: inline-start;
    margin-inline-end: var(--ad-space-xs);
    margin-block-start: 0.1em;
    color: var(--ad-c-primary-600);
    text-transform: uppercase;
}
/* تعطيل drop cap لو الفقرة قصيرة جداً */
@supports selector(:has(*)) {
    .article-body:not(:has(> p:first-of-type:nth-child(-n+1):not(:empty))) > p:first-of-type::first-letter {
        all: unset;
    }
}

/* Links داخل المقال */
.article-body a {
    color: var(--ad-color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--ad-dur-fast) var(--ad-ease-out);
}
.article-body a:hover {
    color: var(--ad-color-link-hover);
    text-decoration-thickness: 2px;
}

/* Lists */
.article-body :where(ul, ol) {
    margin-block: 0 var(--ad-space-md);
    padding-inline-start: var(--ad-space-lg);
}
.article-body li {
    margin-block-end: var(--ad-space-xs);
}
.article-body ul li::marker { color: var(--ad-c-primary-500); }

/* Blockquote */
.article-body blockquote {
    margin-block: var(--ad-space-lg);
    padding: var(--ad-space-md) var(--ad-space-lg);
    border-inline-start: 4px solid var(--ad-c-primary-500);
    background: var(--ad-color-surface);
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--ad-color-text);
    border-radius: 0 var(--ad-radius-md) var(--ad-radius-md) 0;
}
.article-body blockquote cite {
    display: block;
    margin-block-start: var(--ad-space-sm);
    font-size: var(--ad-fs--1);
    color: var(--ad-color-text-muted);
    font-style: normal;
}

/* Pull quote — Gutenberg block */
.article-body .wp-block-pullquote {
    margin-block: var(--ad-space-xl);
    padding: var(--ad-space-lg) 0;
    border-block: var(--ad-border-base) solid var(--ad-c-accent-500);
    text-align: center;
    font-size: 1.4em;
    line-height: 1.5;
    font-weight: var(--ad-fw-medium);
    color: var(--ad-c-accent-700);
    font-family: var(--ad-font-display);
}
.article-body .wp-block-pullquote p { margin: 0; }

/* Code */
.article-body code {
    background: var(--ad-color-surface-2);
    padding: 2px 6px;
    border-radius: var(--ad-radius-xs);
    font-family: var(--ad-font-mono);
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: bidi-override;
}
.article-body pre {
    background: oklch(0.18 0.012 250);
    color: oklch(0.95 0.003 250);
    padding: var(--ad-space-md);
    border-radius: var(--ad-radius-md);
    overflow-x: auto;
    margin-block: var(--ad-space-lg);
    direction: ltr;
}
.article-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Tables */
.article-body table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: var(--ad-space-lg);
    font-size: var(--ad-fs-0);
}
.article-body th,
.article-body td {
    padding: var(--ad-space-sm) var(--ad-space-md);
    border-block-end: var(--ad-border-thin) solid var(--ad-color-border);
    text-align: start;
}
.article-body th {
    background: var(--ad-color-surface);
    font-weight: var(--ad-fw-semibold);
}

/* Figures */
.article-body figure,
.article-body .wp-block-image {
    margin-block: var(--ad-space-lg);
}
.article-body figcaption,
.article-body .wp-caption-text {
    margin-block-start: var(--ad-space-xs);
    font-size: var(--ad-fs--1);
    color: var(--ad-color-text-muted);
    text-align: center;
    line-height: 1.5;
}
.article-body img,
.article-body .wp-block-image img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--ad-radius-md);
    background: var(--ad-color-surface-2);
}

/* HR */
.article-body hr {
    border: 0;
    block-size: 1px;
    background: linear-gradient(to inline-end, transparent, var(--ad-color-border-strong), transparent);
    margin-block: var(--ad-space-xl);
}

/* Tags footer */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ad-space-xs);
    align-items: center;
    margin-block-start: var(--ad-space-xl);
    padding-block-start: var(--ad-space-md);
    border-block-start: var(--ad-border-thin) solid var(--ad-color-border);
}
.article-tags__label {
    font-weight: var(--ad-fw-semibold);
    color: var(--ad-color-text-muted);
    font-size: var(--ad-fs--1);
    margin-inline-end: var(--ad-space-xs);
}
.article-tags a {
    display: inline-block;
    padding: var(--ad-space-2xs) var(--ad-space-sm);
    background: var(--ad-color-surface);
    border-radius: var(--ad-radius-pill);
    text-decoration: none;
    color: var(--ad-color-text);
    font-size: var(--ad-fs--1);
    border: var(--ad-border-thin) solid var(--ad-color-border);
    transition: all var(--ad-dur-fast) var(--ad-ease-out);
}
.article-tags a:hover {
    background: var(--ad-c-primary-500);
    color: white;
    border-color: var(--ad-c-primary-500);
}

/* Article pagination */
.article-pagination {
    display: flex;
    gap: var(--ad-space-xs);
    align-items: center;
    margin-block: var(--ad-space-lg);
    padding: var(--ad-space-md);
    background: var(--ad-color-surface);
    border-radius: var(--ad-radius-md);
}
.article-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 32px;
    block-size: 32px;
    padding: 0 var(--ad-space-xs);
    border-radius: var(--ad-radius-sm);
    background: var(--ad-color-surface-2);
}


/* ============================================================
 *  Inline CTA (newsletter)
 * ============================================================ */
.article-cta-newsletter {
    margin-block: var(--ad-space-xl);
    padding: var(--ad-space-lg);
    border-radius: var(--ad-radius-lg);
    background: linear-gradient(135deg, var(--ad-c-primary-50), var(--ad-c-accent-50));
    border: var(--ad-border-thin) solid var(--ad-c-primary-200);
    contain: layout;
}
.article-cta-newsletter__inner {
    max-inline-size: 100%;
    text-align: center;
}
.article-cta-newsletter__title {
    margin: 0 0 var(--ad-space-xs);
    color: var(--ad-c-primary-800);
}
.article-cta-newsletter__copy {
    margin: 0 0 var(--ad-space-md);
    color: var(--ad-color-text-muted);
}
.article-cta-newsletter__form {
    display: flex;
    gap: var(--ad-space-sm);
    flex-wrap: wrap;
    max-inline-size: 480px;
    margin-inline: auto;
}
.article-cta-newsletter__input {
    flex: 1 1 220px;
    padding: var(--ad-space-sm) var(--ad-space-md);
    border: var(--ad-border-thin) solid var(--ad-color-border-strong);
    border-radius: var(--ad-radius-sm);
    font: inherit;
    background: white;
    min-block-size: 44px;
}


/* ============================================================
 *  Related
 * ============================================================ */
.single-related-wrap {
    margin-block-start: var(--ad-space-2xl);
}
.article-related__header {
    margin-block-end: var(--ad-space-lg);
    border-block-end: var(--ad-border-base) solid var(--ad-c-accent-500);
    padding-block-end: var(--ad-space-sm);
}
.article-related__header h2 { margin: 0; }
.article-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--ad-space-lg);
}
.article-related__card {
    border-radius: var(--ad-radius-md);
    overflow: hidden;
    background: var(--ad-color-elevated);
    box-shadow: var(--ad-shadow-sm);
    transition: transform var(--ad-dur-base) var(--ad-ease-out),
                box-shadow var(--ad-dur-base) var(--ad-ease-out);
}
.article-related__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ad-shadow-lg);
}
.article-related__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.article-related__media {
    aspect-ratio: 16 / 10;
    background: var(--ad-color-surface-2);
    overflow: hidden;
}
.article-related__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.article-related__body {
    padding: var(--ad-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--ad-space-xs);
}
.article-related__body h3 {
    margin: 0;
    transition: color var(--ad-dur-fast) var(--ad-ease-out);
}
.article-related__link:hover h3 { color: var(--ad-c-primary-600); }


/* ============================================================
 *  Prev / Next
 * ============================================================ */
.article-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ad-space-md);
    margin-block: var(--ad-space-xl);
}
@media (max-width: 768px) {
    .article-prev-next { grid-template-columns: 1fr; }
}
.article-prev-next__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ad-space-md);
    padding: var(--ad-space-md);
    background: var(--ad-color-surface);
    border-radius: var(--ad-radius-md);
    text-decoration: none;
    color: inherit;
    border: var(--ad-border-thin) solid var(--ad-color-border);
    transition: transform var(--ad-dur-fast) var(--ad-ease-out),
                box-shadow var(--ad-dur-fast) var(--ad-ease-out);
}
.article-prev-next__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ad-shadow-md);
    border-color: var(--ad-c-primary-300);
}
.article-prev-next__card--next {
    grid-template-columns: 1fr auto;
    text-align: end;
}
.article-prev-next__media {
    inline-size: 80px;
    block-size: 80px;
    border-radius: var(--ad-radius-sm);
    overflow: hidden;
    background: var(--ad-color-surface-2);
}
.article-prev-next__media img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
}
.article-prev-next__label {
    display: flex;
    align-items: center;
    gap: var(--ad-space-2xs);
    margin-block-end: var(--ad-space-2xs);
}
.article-prev-next__card--next .article-prev-next__label { justify-content: flex-end; }


/* ============================================================
 *  Comments
 * ============================================================ */
.article-comments {
    margin-block-start: var(--ad-space-2xl);
    padding-block-start: var(--ad-space-xl);
    border-block-start: var(--ad-border-thin) solid var(--ad-color-border);
}
.article-comments__header {
    margin-block-end: var(--ad-space-lg);
}
.article-comments .commentlist,
.article-comments ol.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.article-comments .comment {
    padding: var(--ad-space-md);
    margin-block-end: var(--ad-space-md);
    background: var(--ad-color-surface);
    border-radius: var(--ad-radius-md);
}
.article-comments .comment .children {
    list-style: none;
    margin-block-start: var(--ad-space-md);
    padding-inline-start: var(--ad-space-md);
    border-inline-start: var(--ad-border-base) solid var(--ad-color-border);
}
.article-comments .comment-author {
    display: flex;
    align-items: center;
    gap: var(--ad-space-sm);
    margin-block-end: var(--ad-space-sm);
}
.article-comments .comment-author .avatar {
    border-radius: 50%;
}
.article-comments .comment-meta {
    font-size: var(--ad-fs--1);
    color: var(--ad-color-text-muted);
}
.article-comments .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--ad-space-sm);
    max-inline-size: 600px;
}
.article-comments .comment-form input[type="text"],
.article-comments .comment-form input[type="email"],
.article-comments .comment-form input[type="url"],
.article-comments .comment-form textarea {
    inline-size: 100%;
    padding: var(--ad-space-sm) var(--ad-space-md);
    border: var(--ad-border-thin) solid var(--ad-color-border-strong);
    border-radius: var(--ad-radius-sm);
    font: inherit;
    background: var(--ad-color-bg);
    color: var(--ad-color-text);
    min-block-size: 44px;
}
.article-comments .comment-form textarea {
    min-block-size: 120px;
    resize: vertical;
}
.article-comments .comment-form .submit {
    align-self: flex-start;
}


/* ============================================================
 *  Print Stylesheet
 * ============================================================ */
@media print {
    .reading-progress,
    .article-share,
    .article-toc,
    .article-cta-newsletter,
    .article-related,
    .article-prev-next,
    .article-comments,
    .single-layout__toc-col {
        display: none !important;
    }
    .article-header__hero {
        block-size: 200px;
        aspect-ratio: auto;
    }
    .article-header__overlay {
        background: none;
    }
    .article-header__inner {
        margin-block-start: var(--ad-space-md);
        color: black;
    }
    .article-header__title,
    .article-header__lead,
    .article-header__meta {
        color: black;
        text-shadow: none;
    }
    .single-layout {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .single-layout__main {
        max-inline-size: none;
    }
    .article-body {
        font-size: 12pt;
        line-height: 1.6;
        color: black;
        max-inline-size: none;
    }
    .article-body a {
        color: black;
        text-decoration: underline;
    }
    .article-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    .article-body img {
        max-block-size: 400px;
    }
    .article-body pre,
    .article-body blockquote {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}