/* Numerical Archive — public engineering article UI v3 */

/* Reading text: exact public renderer selectors from /blog/article.php */
html body .article-shell .article-main .article-body p,
html body .article-shell .article-main .article-body li,
html body .article-shell .article-main .article-body blockquote {
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Keep article hierarchy intentional. */
html body .article-shell .article-main .article-body h2,
html body .article-shell .article-main .article-body h3,
html body .article-shell .article-main .article-body h4 {
    text-align: left !important;
}

html body .article-shell .article-main .article-body figcaption {
    text-align: center !important;
}

html body .article-shell .article-main .article-body math,
html body .article-shell .article-main .article-body .equation,
html body .article-shell .article-main .article-body .article-equation,
html body .article-shell .article-main .article-body [class*="equation"] {
    text-align: center !important;
}

/* Hero: rounded as one visual object, not only the bitmap. */
html body .article-hero .hero-visual {
    border-radius: 22px !important;
    overflow: hidden !important;
    isolation: isolate;
}

html body .article-hero .hero-visual > img,
html body .article-hero .hero-visual img {
    border-radius: 22px !important;
    clip-path: inset(0 round 22px);
}

/* Figures and inline engineering imagery. */
html body .article-shell .article-main .article-body figure {
    overflow: hidden;
    border-radius: 18px !important;
}

html body .article-shell .article-main .article-body figure > img,
html body .article-shell .article-main .article-body figure img,
html body .article-shell .article-main .article-body > img,
html body .article-shell .article-main .article-body p > img,
html body .article-shell .article-main .article-body div > img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px);
}

/* Engineering tables: preserve data readability and horizontal access on mobile. */
html body .article-shell .article-main .article-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    margin: 24px 0 28px;
}

html body .article-shell .article-main .article-body th,
html body .article-shell .article-main .article-body td {
    padding: 13px 15px;
    text-align: left !important;
    vertical-align: top;
    border-bottom: 1px solid #e8eef5;
}

html body .article-shell .article-main .article-body th {
    background: #f4f7fb;
    color: #10233d;
    font-weight: 700;
}

html body .article-shell .article-main .article-body tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 720px) {
    html body .article-hero .hero-visual,
    html body .article-hero .hero-visual > img,
    html body .article-hero .hero-visual img {
        border-radius: 16px !important;
        clip-path: inset(0 round 16px);
    }

    html body .article-shell .article-main .article-body figure,
    html body .article-shell .article-main .article-body figure > img,
    html body .article-shell .article-main .article-body figure img,
    html body .article-shell .article-main .article-body > img,
    html body .article-shell .article-main .article-body p > img,
    html body .article-shell .article-main .article-body div > img {
        border-radius: 14px !important;
        clip-path: inset(0 round 14px);
    }

    html body .article-shell .article-main .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Article figure sizing — keep screenshots readable without dominating the page. */
html body .article-shell .article-main .article-body figure.article-figure {
    width: min(100%, 820px);
    margin: 34px auto 38px !important;
    text-align: center;
}

html body .article-shell .article-main .article-body figure.article-figure > img,
html body .article-shell .article-main .article-body figure.article-figure img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 720px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
}

@media (max-width: 720px) {
    html body .article-shell .article-main .article-body figure.article-figure {
        width: 100%;
        margin: 26px auto 30px !important;
    }

    html body .article-shell .article-main .article-body figure.article-figure > img,
    html body .article-shell .article-main .article-body figure.article-figure img {
        max-height: 560px !important;
    }
}

/* Engineering-team card — brand icon only. */
html body .article-shell .article-main .article-author.article-author-branded {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 40px !important;
    padding: 20px 24px !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-brand {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-brand img {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-copy {
    min-width: 0 !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-copy span,
html body .article-shell .article-main .article-author.article-author-branded > .article-author-copy strong {
    display: inline !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-copy strong {
    margin-left: 4px !important;
}

html body .article-shell .article-main .article-author.article-author-branded > .article-author-copy p {
    margin: 6px 0 0 !important;
}

/* Dark footer must always use the transparent white brand lockup. */
html body .site-footer .footer-brand img {
    display: block !important;
    width: 232px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    object-fit: contain !important;
}

@media (max-width: 720px) {
    html body .article-shell .article-main .article-author.article-author-branded {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 18px !important;
    }

    html body .article-shell .article-main .article-author.article-author-branded > .article-author-brand {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    html body .article-shell .article-main .article-author.article-author-branded > .article-author-brand img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    html body .site-footer .footer-brand img {
        width: 205px !important;
    }
}