@media (max-width: 1040px) {
    .article-hero {
        min-height: auto;
        align-items: flex-start;
    }

    .article-hero__banner {
        height: clamp(220px, 38svh, 420px);
    }

    .article-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-sidebar {
        order: 2;
    }

    .article-sidebar__sticky {
        position: static;
    }

    .article-content-wrap {
        order: 1;
    }

    .article-toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 1rem);
    }

    .article-hero__inner {
        gap: 1rem;
    }

    .article-hero__banner {
        height: clamp(190px, 34svh, 340px);
        border-radius: 1.2rem;
    }

    .article-hero h1 {
        font-size: clamp(2.5rem, 12.8vw, 4.1rem);
        line-height: 0.92;
    }

    .article-meta-line {
        gap: 0.45rem;
        font-size: 0.82rem;
    }

    .article-meta-line__author img {
        width: 1.55rem;
        height: 1.55rem;
    }

    .article-shell {
        padding-top: 2.5rem;
    }

    .article-content h2 {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .article-grid-list {
        grid-template-columns: 1fr;
    }

    .article-toc ol {
        grid-template-columns: 1fr;
    }

    .article-author-box {
        grid-template-columns: 1fr;
    }

    .article-author-box>img {
        width: 82px;
        height: 82px;
    }

    .article-floating-actions {
        right: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 520px) {

    .article-container,
    .article-container-wide {
        width: min(100% - 2rem, var(--container-width));
    }

    .article-hero__banner {
        height: clamp(170px, 30svh, 300px);
    }

    .article-meta-line {
        max-width: 20rem;
        margin-inline: auto;
    }

    .article-citation-panel__header {
        align-items: flex-start;
    }

    .article-content pre {
        margin-inline: -0.2rem;
        border-radius: 0.85rem;
    }

    .article-floating-action::after {
        right: 0;
        left: auto;
        top: auto;
        bottom: calc(100% + 0.65rem);

        transform: translateY(0.35rem);
    }

    .article-floating-action:hover::after,
    .article-floating-action:focus-visible::after {
        transform: translateY(0);
    }
}

@media (max-height: 760px) and (min-width: 761px) {
    .article-hero__banner {
        height: clamp(210px, 34svh, 360px);
    }

    .article-hero h1 {
        font-size: clamp(2.85rem, 6.6vw, 5.8rem);
    }

    .article-meta-line {
        margin-top: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .article-progress__bar,
    .article-reading-card__track span,
    .article-icon-button,
    .article-citation-item button,
    .article-final-cta a,
    .article-author-box__links a,
    .article-post-nav__item,
    .article-sidebar-cta a,
    .article-floating-action,
    .article-floating-action::after,
    .article-toast {
        transition-duration: 1ms !important;
    }

    .article-final-cta a:hover,
    .article-author-box__links a:hover,
    .article-post-nav__item:hover,
    .article-sidebar-cta a:hover,
    .article-floating-action:hover {
        transform: none !important;
    }
}

/* =========================================================
   Article hero responsive refinement
   ========================================================= */

@media (max-width: 1040px) {
    .article-hero__inner {
        min-height: auto;

        transform: none;
    }

    .article-hero__banner {
        height: clamp(205px, 34svh, 380px);
    }

    .article-hero h1 {
        font-size: clamp(2.7rem, 10vw, 5.4rem);
    }
}

@media (max-width: 760px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 0.75rem);
    }

    .article-hero__banner {
        height: clamp(180px, 30svh, 310px);
    }

    .article-hero__banner img {
        object-position: center 45%;
    }

    .article-hero h1 {
        font-size: clamp(2.35rem, 11.8vw, 3.9rem);
    }

    .article-floating-action {
        width: 3.05rem;
        height: 3.05rem;
    }

    .article-floating-action__icon {
        width: 1.18rem;
        height: 1.18rem;
    }
}

@media (max-width: 520px) {
    .article-hero__banner {
        height: clamp(165px, 28svh, 280px);
    }

    .article-hero h1 {
        font-size: clamp(2.25rem, 11.4vw, 3.45rem);
    }
}

@media (max-height: 760px) and (min-width: 761px) {
    .article-hero__inner {
        gap: clamp(0.75rem, 1.65svh, 1.1rem);

        transform: translateY(-0.45rem);
    }

    .article-hero__banner {
        height: clamp(190px, 31svh, 340px);
    }

    .article-hero h1 {
        font-size: clamp(2.65rem, 6.25vw, 5.45rem);
    }

    .article-meta-line {
        margin-top: 0.68rem;
    }
}

/* =========================================================
   Article hero responsive vertical balance refinement
   ========================================================= */

@media (max-width: 1040px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 0.65rem);
        padding-bottom: 2.6rem;
    }

    .article-hero__inner {
        transform: none;
    }

    .article-hero__content {
        padding-bottom: 1.3rem;
    }

    .article-meta-line {
        margin-bottom: 1.35rem;
    }
}

@media (max-width: 760px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 0.45rem);
        padding-bottom: 2.4rem;
    }

    .article-hero__banner {
        height: clamp(175px, 29svh, 300px);
    }

    .article-hero__content {
        padding-bottom: 1.25rem;
    }

    .article-meta-line {
        margin-bottom: 1.45rem;
    }
}

@media (max-width: 520px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 0.35rem);
    }

    .article-hero__banner {
        height: clamp(160px, 27svh, 270px);
    }

    .article-meta-line {
        margin-bottom: 1.55rem;
    }
}

@media (max-height: 760px) and (min-width: 761px) {
    .article-hero {
        padding-top: calc(var(--header-height) + 0.3rem);
        padding-bottom: 2.2rem;
    }

    .article-hero__inner {
        transform: translateY(-1.25rem);
    }

    .article-hero__banner {
        height: clamp(185px, 29svh, 320px);
    }

    .article-hero__content {
        padding-bottom: 1.1rem;
    }

    .article-meta-line {
        margin-bottom: 1.2rem;
    }
}