/* =========================================================================
   article.css
   Shared styles for single-article templates (single press now,
   single post in the future). Press-specific overrides live in press.css.

   Padding/side-margin notes:
   - var(--content-padding) is auto-applied to .container inside sections,
     so this file does NOT set horizontal padding on the article wrapper.
   - var(--menu_margin) is auto-applied to section side margins,
     so this file does NOT set side margins on the article wrapper.
   - Vertical spacing comes from the section wrap, not from this file.
   ========================================================================= */

:root {
    --article-toc-width: 265px;
    --article-body-max: 680px;
    --article-gap: 60px;
    --article-h1-size: clamp(28px, 4vw, 44px);
    --article-h2-size: clamp(22px, 2.6vw, 30px);
    --article-h3-size: clamp(18px, 2vw, 22px);
    --article-body-size: 18px;
    --article-body-line: 1.65;
    --article-muted: var(--gray);
    --article-border: var(--gray-border);
}

/* Shrink the TOC sidebar as the viewport narrows so it stays visually
   balanced with the right sidebar (which is %-based and shrinks too). */

@media screen and (max-width: 1350px) {
    .single-article {
        --article-toc-width: 230px;
    }
}

@media screen and (max-width: 1250px) {
    /* Right sidebar is hidden at this breakpoint (see press.css) — restore
       the TOC to its original width since it has the room. */
    .single-article {
        --article-toc-width: 265px;
    }
}

/* ---------- container ---------- */

.single-article {
    max-width: var(--fs-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- breadcrumbs ---------- */

.single-article .breadcrumb-section {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--blue);
}

.single-article .breadcrumb-section ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.single-article .breadcrumb-section li {
    display: inline-flex;
    align-items: center;
}

.single-article .breadcrumb-section li + li::before {
    content: "";
    display: inline-block;
    /* width / height in em so the icon stays proportional to the
       breadcrumb text size across breakpoints (6px wide × 9px tall at
       16px text → 0.375em × 0.5625em). */
    width: 0.375em;
    height: 0.5625em;
    margin-right: 12px;
    background: url('/wp-content/uploads/breadcrumbs_arrow3.svg') no-repeat center / contain;
    flex-shrink: 0;
}

.single-article .breadcrumb-section a,
.single-article .breadcrumb-section [aria-current="page"] {
    color: var(--blue);
    text-decoration: none;
}

.single-article .breadcrumb-section a:hover,
.single-article .breadcrumb-section a:focus {
    color: var(--blue);
    text-decoration: none;
}

/* Breadcrumb text shrinks on tablet and mobile. The arrow icon scales
   automatically because its width/height are set in em units above. */
@media screen and (max-width: 1024px) {
    .single-article .breadcrumb-section,
    .single-article .table-of-contents a {
        font-size: 15px;
    }
}

@media screen and (max-width: 950px) {
    .single-article .breadcrumb-section {
        margin-bottom: 6px;
    }

    .single-article .breadcrumb-section ol {
        gap: 8px;
    }
}

@media screen and (max-width: 768px) {
    .single-article .breadcrumb-section,
    .single-article .toc-sidebar .table-of-contents a {
        font-size: 14px;
    }

    .single-article .toc-sidebar .table-of-contents a {
        font-weight: 500;
    }
}

/* ---------- page header ---------- */

.single-article .page-header {
    margin-bottom: 32px;
}

.single-article .article-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 18px;
    color: var(--black);
}

/* Title scales down on tablet/mobile, following the theme's h1 cadence
   (50→40→30→27→24px). Starting from 36px desktop, the press title
   uses 30px on tablet and 24px on mobile. */

/* Title cadence mirrors the platform-header title pattern (50→40→30→30
   with line-height 1.1em from 1250 down). Desktop stays at the user's
   custom 36/600/1.2 spec. */

@media screen and (max-width: 1250px) {
    .single-article .article-title {
        font-size: 32px;
        line-height: 1.1em;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 1024px) {
    .single-article .article-title {
        font-size: 30px;
        line-height: 1.1em;
    }
}

@media screen and (max-width: 768px) {
    .single-article .article-title {
        font-size: 30px;
        line-height: 1.1em;
        letter-spacing: 0;
    }
}

.single-article .article-excerpt {
    margin: 16px 0 21px;
    color: rgb(93, 96, 97);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

/* the_excerpt() wraps the text in <p> via wpautop — strip its default
   margin so the wrapper's margin is the only one in play. */
.single-article .article-excerpt p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Excerpt cadence: 20 → 19 → 18 → 16. Desktop stays at the user's
   custom 20/400/1.5 spec. */

@media screen and (max-width: 1250px) {
    .single-article .article-excerpt {
        font-size: 19px;
        line-height: 1.45;
    }
}

@media screen and (max-width: 1024px) {
    .single-article .article-excerpt {
        margin: -2px 0 19px;
        font-size: 18px;
        line-height: 1.4em;
    }

    .single-article .publish-date {
        margin-top: 0;
    }

    /* Journal name + author name + date drop to 13px on tablet.
       Logos and avatar stay at 23px across all breakpoints. */
    .single-article .byline,
    .single-article .byline a,
    .single-article .publish-date,
    .single-article .author-meta-strip .source-inline {
        font-size: 13px;
    }
}

@media screen and (max-width: 768px) {
    .single-article .article-excerpt {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4em;
        letter-spacing: 0;
    }
}

/* Below 600px the journal info gets its own row 1, and the author
   block + publish-date share row 2.
   Row 1: [logo][journal name]                  ← bumped to excerpt size
   Row 2: [avatar][author] | [date]             ← separator 19px tall
   The journal/author meta-separator is hidden (they're no longer
   adjacent). 5px row-gap spaces row 2 from row 1. */
@media screen and (max-width: 600px) {
    .single-article .author-meta-strip {
        row-gap: 5px;
    }

    .single-article .author-meta-strip .source-inline {
        flex-basis: 100%;
        font-size: 16px;
        margin-bottom: 3px;
    }

    .single-article .author-meta-strip .source-inline .source-name {
        font-size: 16px;
        font-weight: 500;
    }

    .single-article .author-meta-strip .source-inline .source-logo {
        height: 30px !important;
    }

    .single-article .author-meta-strip .meta-separator {
        display: none !important;
    }

    .single-article .publish-date {
        flex-basis: auto;
        margin-top: 0;
    }

    .single-article .author-meta-strip .publish-date::before {
        display: inline-block;
        height: 19px;
    }
}

.single-article .author-meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 6px;
    margin-bottom: 28px;
}

.single-article .author-avatar {
    width: 23px;
    height: 23px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
}

/* Lift the spans out of .meta-info so .byline and .publish-date become
   direct flex children of .author-meta-strip. The avatar + byline sit on
   row 1; .publish-date wraps onto row 2 below the avatar (full width,
   left-aligned via flex-basis: 100%). */
.single-article .meta-info {
    display: contents;
}

.single-article .byline {
    padding-left: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--black);
}

.single-article .byline a {
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.single-article .byline a:hover,
.single-article .byline a:focus {
    color: var(--black);
    text-decoration: none;
}

.single-article .publish-date {
    display: inline-block;
    margin-top: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: rgb(93, 96, 97);
}

/* Vertical separator before the publish-date, identical to .meta-separator. */
.single-article .author-meta-strip .publish-date::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: rgb(198, 198, 198);
    margin: 0 14px;
    vertical-align: middle;
    flex-shrink: 0;
}

.single-article .publish-date time {
    color: var(--article-muted);
    font-weight: 400;
}

/* Inline source attribution at the start of the meta strip:
   [logo] Journal Name | [avatar] Summary by Author. Both the logo and
   the journal name link to the original article (opens in new tab). */

.single-article .author-meta-strip .source-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.single-article .author-meta-strip .source-inline:hover,
.single-article .author-meta-strip .source-inline:focus {
    color: var(--black);
    text-decoration: none;
}

.single-article .author-meta-strip .source-inline .source-logo {
    height: 23px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.single-article .author-meta-strip .source-inline .source-name {
    font-weight: 700;
}

/* External-link icon next to the journal name. Signals "opens in new tab". */
.single-article .author-meta-strip .source-inline .source-external-icon {
    width: 16px;
    height: 16px;
    margin-top: -1px;
    margin-left: -2px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Vertical hairline separator between the source link and the author block. */
.single-article .author-meta-strip .meta-separator {
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: rgb(198, 198, 198);
    margin: 0 14px;
    flex-shrink: 0;
}

/* ---------- hero image ---------- */

.single-article .hero-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 37px 0 5px;
    border: 1px solid rgb(198, 198, 198);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--warm-gray);
}

.single-article .hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.single-article .hero-image img,
.single-article .hero-image .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- AI summary slot ---------- */

.single-article .ai-summary-section {
    margin: 0 0 36px;
}

.single-article .ai-summary-section.is-empty {
    display: none;
}

/* ---------- two-column wrapper (TOC + everything else) ----------
   The TOC sidebar is the left column from the very top of the article
   (alongside breadcrumbs, title, hero, body) and stays sticky as the
   user scrolls. Everything else stacks in .article-main on the right. */

.single-article .article-layout {
    display: grid;
    grid-template-columns: var(--article-toc-width) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.single-article .article-main {
    min-width: 0;
}

.single-article .article-main > * {
    /* keep child margins consistent vertically */
    max-width: 100%;
}

/* ---------- TOC sidebar ---------- */

.single-article .toc-sidebar {
    position: sticky;
    top: calc(var(--menu-height) + 20px);
    margin-top: 86px;
    align-self: start;
    max-height: calc(100vh - var(--menu-height) - 40px);
    padding-right: 8px;
}

.single-article .toc-sidebar .toc-title {
    font-family: Figtree, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
    margin: 0 0 14px;
}

@media screen and (max-width: 1024px) {
    .single-article .toc-sidebar .toc-title {
        font-size: 23px;
    }
}

@media screen and (max-width: 768px) {
    .single-article .toc-sidebar .toc-title {
        font-size: 20px;
    }
}

.single-article .table-of-contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-article .table-of-contents li {
    margin: 0;
    padding: 0;
    margin-bottom: -3px;
}

/* h3 entries indent under their parent h2; desktop 15px, tablet 10px, mobile 11px */
.single-article .table-of-contents li.toc-level-3 > a {
    padding-left: 15px;
}

@media screen and (max-width: 1024px) {
    .single-article .table-of-contents li.toc-level-3 > a {
        padding-left: 10px;
    }
}

@media screen and (max-width: 768px) {
    .single-article .table-of-contents li.toc-level-3 > a {
        padding-left: 11px;
    }
}

.single-article .table-of-contents a {
    display: block;
    padding: 8px 0;
    border: 0;
    color: rgb(93, 96, 97);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-transform: none;
    transition: color 0.15s ease;
}

.single-article .table-of-contents a:hover {
    color: var(--black);
}

.single-article .table-of-contents a.is-active {
    color: var(--blue);
    font-weight: 400;
}

/* ---------- main article body ---------- */

.single-article .main-article-content {
    max-width: var(--article-body-max);
    color: var(--black);
    font-size: var(--article-body-size);
    line-height: 1.4em;
    font-weight: 400;
}

.single-article .main-article-content > * {
    margin-top: 0;
}

.section-wrap .single-article .main-article-content h2,
.section-wrap .single-article .main-article-content h3,
.section-wrap .single-article .main-article-content h4,
.section-wrap .single-article .main-article-content h5 {
    text-align: left;
    color: var(--black);
}

.section-wrap .single-article .main-article-content h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 48px 0 16px;
    scroll-margin-top: calc(var(--menu-height) + 20px);
}

.section-wrap .single-article .main-article-content h2:first-child {
    margin-top: 0;
}

.section-wrap .single-article .main-article-content h3 {
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
    margin: 32px 0 12px;
    scroll-margin-top: calc(var(--menu-height) + 20px);
}

.section-wrap .single-article .main-article-content h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin: 28px 0 10px;
    scroll-margin-top: calc(var(--menu-height) + 20px);
}

.section-wrap .single-article .main-article-content h5 {
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    margin: 24px 0 8px;
    scroll-margin-top: calc(var(--menu-height) + 20px);
}

/* H2 cadence follows the theme defaults (30→27→24→22.5), capped at the
   user's 26px desktop. H3 gets an intermediate tablet size (23) so the
   step from desktop 26 to mobile 20 isn't abrupt. */
@media screen and (max-width: 1250px) {
    .section-wrap .single-article .main-article-content h2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 1024px) {
    .section-wrap .single-article .main-article-content h2 {
        font-size: 22px;
    }

    .section-wrap .single-article .main-article-content h3 {
        font-size: 23px;
        line-height: 30px;
    }
}

@media screen and (max-width: 768px) {
    .section-wrap .single-article .main-article-content h2 {
        font-size: 21px;
        line-height: 1.2em;
    }

    .section-wrap .single-article .main-article-content h3 {
        font-size: 20px;
        line-height: 1.3em;
        margin: 29px 0 7px;
    }

    /* Body images expand to the full content width on mobile.
       !important wins over inline width="auto" attributes. */
    .single-article .main-article-content figure img,
    .single-article .main-article-content > img,
    .single-article .main-article-content p > img {
        width: 100% !important;
    }
}

.single-article .main-article-content p {
    margin: 0 0 18px;
    line-height: 1.62em;
}

.single-article .main-article-content li {
    line-height: 1.4em;
}

.single-article .main-article-content ul,
.single-article .main-article-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.single-article .main-article-content li {
    margin-bottom: 8px;
}

.single-article .main-article-content figure {
    margin: 36px 0 59px;
}

.single-article .main-article-content figure img,
.single-article .main-article-content > img,
.single-article .main-article-content p > img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin-top: 36px;
    margin-bottom: 59px;
}

.single-article .main-article-content figure figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--article-muted);
    text-align: center;
}

.single-article .main-article-content blockquote {
    margin: 28px 0;
    padding: 4px 24px;
    border-left: 4px solid var(--blue);
    color: var(--black);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
}

.single-article .main-article-content a {
    color: var(--blue);
    text-decoration: none;
}

.single-article .main-article-content a:hover,
.single-article .main-article-content a:focus {
    color: var(--blue-hover);
    text-decoration: none;
}

.single-article .main-article-content code {
    background: var(--lighter-gray-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.single-article .main-article-content pre {
    background: var(--lighter-gray-bg);
    padding: 16px 18px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 14px;
    margin: 24px 0;
}

/* ---------- source attribution (richer styles in press.css) ---------- */

.single-article .source-attribution {
    margin-top: 48px;
    padding: 28px 24px;
    background: var(--lighter-gray-bg);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
}

.single-article .source-attribution .source-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--black);
    font-size: 16px;
}

.single-article .source-attribution .source-prefix {
    color: var(--article-muted);
}

.single-article .source-attribution .source-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--black);
}

.single-article .source-attribution .source-link:hover {
    color: var(--blue);
}

.single-article .source-attribution .source-logo {
    max-height: 28px;
    width: auto;
    object-fit: contain;
}

.single-article .source-attribution .source-name {
    font-weight: 600;
}

.single-article .source-attribution .read-original {
    flex-shrink: 0;
}

/* ---------- sidebar CTA (copied from posts.css so single-article pages
              share the markup without depending on posts.css) ---------- */

.sidebar-cta {
    background-color: #EFEDFF;
    border-radius: var(--radius);
    padding: 62px 39px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-cta h2 {
    color: var(--black);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 29px;
    text-align: left;
    width: 100%;
}

.sidebar-cta p {
    margin-bottom: 1.5em;
}

.sidebar-cta > .content {
    margin-top: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: 0;
    text-align: left;
    padding: 0 !important;
}

.sidebar-cta .bullets-list {
    margin: -2px 0 5px 10px;
    list-style: none;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
}

.sidebar-cta .bullets-list li {
    margin-bottom: 12px !important;
    position: relative;
    padding-left: 17px;
    line-height: 9px;
    text-align: left;
}

.sidebar-cta .bullets-list li::before {
    width: 23px;
    height: 23px;
    content: "•";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
}

.sidebar-cta .before-cta {
    margin-top: 18px;
    font-weight: bold;
    color: var(--black);
    font-size: 18px;
    line-height: 1.2em;
    letter-spacing: 0;
}

.sidebar-cta .before-cta strong {
    color: var(--red);
}

.sidebar-cta .btn-solid,
.sidebar-cta .btn-solid:hover,
.sidebar-cta .btn-solid:focus,
.sidebar-cta .btn-solid:active {
    text-decoration: none;
}

.sidebar-cta .btn-solid {
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
}

.sidebar-cta .btn-solid:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

/* On the single-press page, only the "What is Fast Simon?" CTA widget
   should appear in the right sidebar — hide all other widgets. */

body.single-press .widget-area .widget,
body.single-press .inside-right-sidebar > [class*="block-"] {
    display: none;
}

body.single-press .widget-area .widget:has(.sidebar-cta),
body.single-press .inside-right-sidebar > [class*="block-"]:has(.sidebar-cta) {
    display: block;
}

/* ---------- responsive ---------- */

@media screen and (max-width: 1470px) {
    .sidebar-cta > .content {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .sidebar-cta > .content {
        font-size: 14px;
    }
}

@media screen and (max-width: 1100px), screen and (max-height: 750px) {
    .sidebar-cta {
        padding: 50px 30px 61px;
    }

    .sidebar-cta .bullets-list {
        margin: 19px 0 5px 11px;
    }

    .sidebar-cta .before-cta {
        font-size: 16px;
        line-height: 1.3em;
    }

    .sidebar-cta .btn-solid {
        margin-top: 19px;
    }
}

@media screen and (max-width: 768px) {
    .sidebar-cta {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media screen and (max-width: 450px) {
    .sidebar-cta {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Below 950px, collapse the layout to one column and slot the TOC in
   between the hero image and the body content. Achieved by setting
   .article-main { display: contents } so its children become direct
   grid items of .article-layout, then assigning explicit grid-row
   numbers to define the visual order. The TOC also reverts to its
   original styling (left border on the ol, left padding + transparent
   left border on each link, blue active border). */

@media screen and (max-width: 950px) {
    .single-article .article-layout {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .single-article .article-main {
        display: contents;
    }

    .single-article .article-main .breadcrumb-section { grid-row: 1; }
    .single-article .article-main .page-header        { grid-row: 2; }
    .single-article .toc-sidebar                      { grid-row: 3; }
    .single-article .article-main .ai-summary-section { grid-row: 4; }
    .single-article .article-main .main-article-content { grid-row: 5; }
    .single-article .article-main .single-press-related-archive { grid-row: 6; }

    .single-article .toc-sidebar {
        position: static;
        margin: 0 0 28px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    /* Restore the original TOC chrome: border-left on ol, left padding
       and transparent left border on each link, blue active border. */
    .single-article .table-of-contents ol {
        border-left: 2px solid var(--article-border);
    }

    .single-article .table-of-contents a {
        padding: 8px 14px;
        margin-left: -2px;
        border-left: 2px solid transparent;
    }

    .single-article .table-of-contents a.is-active {
        border-left-color: var(--blue);
    }

    .single-article .main-article-content {
        max-width: 100%;
    }
}

@media screen and (max-width: 975px) {
    .sidebar-cta .bullets-list li {
        margin-bottom: 8px !important;
    }

    .sidebar-cta .bullets-list li::before {
        left: 3px;
    }
}

@media screen and (max-width: 1024px) {
    .single-article .main-article-content {
        font-size: 17px;
    }

    .single-article .main-article-content p {
        line-height: 1.55em;
    }

    .single-article .hero-image {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 768px) {
    .single-article .author-meta-strip {
        gap: 0;
        margin-bottom: 22px;
    }

    .single-article .publish-date {
        margin-top: -2px;
    }

    .single-article .meta-info {
        font-size: 12px;
    }

    /* Journal name + author name + date drop to 12px on mobile.
       Logos and avatar stay at 23px across all breakpoints. */
    .single-article .byline,
    .single-article .byline a,
    .single-article .publish-date,
    .single-article .author-meta-strip .source-inline {
        font-size: 12px;
    }

    .single-article .hero-image {
        border-radius: 12px;
        margin-top: 22px;
        margin-bottom: 15px;
    }

    .single-article .main-article-content {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4em;
        letter-spacing: 0;
    }

    .single-article .main-article-content p,
    .single-article .main-article-content li {
        line-height: 1.4em;
        letter-spacing: 0;
    }

    .single-article .source-attribution {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
    }
}

@media screen and (max-width: 450px) {
    .single-article .breadcrumb-section {
        font-size: 13px;
    }

    .single-article .hero-image {
        margin-top: 16px;
    }

    .single-article .main-article-content h2 {
        margin-top: 36px;
    }

    .single-article .main-article-content blockquote {
        font-size: 18px;
        padding: 4px 16px;
    }
}