/* 
 ---------------------------------
 |   LAST UPDATED: 2026-04-14    |
 ---------------------------------
 */

/* VIEWPORT HEADNOTE: Standard boundaries 1024, 768–1023, ≤767. min-width 1200px is a desktop tier, not a standard boundary. min-width 480px is not a standard boundary (we use 768 for tablet). max-width 479px is not tied to our device viewport sizes; used for small-mobile refinement only. */

/* OWNER: post shell and article typography. Keep parse-safe and scoped to post pages only. */

/* ========================================================================
   VIEWPORT-AGNOSTIC (base styles)
   ======================================================================== */
/* viewport-agnostic elements for all posts */

/* POST CONTEXT: .post-header-region wraps the title/feature header (control surface).
   .post-content is the <section> for excerpt/metadata, TOC, {{content}}, .post-footnotes (Ghost
   footnote blocks are moved here on load), exeunt, and share. Direct children of .post-content
   include Ghost HTML from {{content}} (p, blockquote, cards, etc.).
   - .post-content > p = top-level body paragraphs (and similar) when Ghost emits them as siblings.
   - .post-content blockquote = any blockquote in the post (main prose + footnotes).
   - .post-content blockquote .p = Ghost blockquote wrappers with class .p. */

/* Post body: one fluid size for paragraphs, lists, blockquotes (ISSUES-LIST sitewide). */
.post-content {
    --post-body-font-size: var(--fontSizeBlog);
    --post-body-line-height: 1.4;
}

.post-content :is(p, li, blockquote, blockquote .p, dd) {
    font-size: var(--post-body-font-size);
    line-height: var(--post-body-line-height);
}

.post-content :is(.kg-callout-text, .kg-bookmark-description) {
    font-size: var(--post-body-font-size);
    line-height: var(--post-body-line-height);
}

article {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.post-header-text {
    padding: calc(7vw * var(--scale)) calc(2.5vw * var(--scale)) calc(3vw * var(--scale)) calc(2.5vw * var(--scale));
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.75vw * var(--scale));
    margin-bottom: calc(1vw * var(--scale));
}

.post-tag {
    font-family: var(--cm);
    font-weight: 500;
    background-color: var(--port);
    color: var(--background-color);
    border: calc(2px * var(--scale)) solid var(--port);
    padding: 0.3rem .3rem;
    border-radius: calc(4px * var(--scale));
    display: inline-block;
    transition: all 0.2s ease;
    text-transform: uppercase;
    text-decoration: none;
    font-size: calc(16px * var(--scale));
    line-height: 1;
}

.post-tag:hover {
    text-decoration: underline !important;
    text-decoration-style: wavy !important;
    text-decoration-color: var(--swiss-coffee) !important;
}

.post-author-name {
    white-space: nowrap;
}

.post-author-name:hover {
    text-decoration: underline;
}

.post-title {
    line-height: 100%;
    font-size: calc(75px * var(--scale)); /* +25% */
    margin-top: calc(1.5vw * var(--scale));
    margin-bottom: calc(1vw * var(--scale));
    margin-right: calc(5vw * var(--scale));
    padding-top: 0px !important;
}

.post-subtitle,
h4.post-subtitle {
    font-size: calc(44px * var(--scale)); /* ~50% of post-title */
    line-height: 110%;
    color: var(--text-color);
    margin-top: calc(-.5vw * var(--scale)) !important;
    margin-bottom: calc(.75vw * var(--scale)) !important;
    margin-right: calc(8vw * var(--scale)) !important;
    font-family: var(--ed) !important;
    font-style: italic !important;
}

.post-excerpt {
    max-width: calc(46vw * var(--scale));
}

/* Post-only takeaway: shell padding is 4vw in takeaway-card.css; grid boxes carry keystones. */
.post-article .takeaway-card,
.post-article .takeaway[data-publish-gate="custom-excerpt"] {
    position: relative;
}

.post-author-image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: calc(3.9vw * var(--scale));
    width: calc(3.9vw * var(--scale));
    height: calc(3.9vw * var(--scale));
    border-radius: 100%;
    border: 1px solid var(--text-color);
    overflow: hidden;
    background-color: var(--background-color);
    transition: transform var(--ease-transition);
}

.post-author-image:hover {
    transform: translateY(-6%);
}

.excerpt-and-metadata {
    /* Grid owns the spacing here; keep flex behavior in the children. */
    justify-content: space-between;
    align-items: center;
    max-height: calc(100px * var(--scale));
}

.post-authors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.post-authors-inner {
    font-family: var(--et);
    font-weight: 500;
    font-style: italic;
    font-optical-sizing: auto;
}

.post-avatar {
    transform: translateY(17%);
}

.post-author-images {
    display: flex;
}

.post-author-image {
    margin-left: calc(-1vw * var(--scale));
}

.post-author-image:first-of-type {
    margin-left: 0px;
}

.post-author-image:last-of-type {
    margin-right: calc(1.6vw * var(--scale));
}

.date-small-text {
    margin-top: calc(0.3vw * var(--scale));
    font-family: var(--font3);
    font-weight: 600;
    line-height: 130%;
    color: var(--revolver);
    font-size: calc(14px * var(--scale));
}

.author-and:last-of-type {
    display: none;
}
/* underline styling */
p u,
.post-content u {
    text-decoration: underline;
    text-decoration-color: var(--text-60-opac);
    text-decoration-thickness: 1px;
}

/* Paragraph rhythm inside article body */
.post-content > p,
.post-content > code.indent,
.post-content > ul li,
.post-content > ol li {
    margin-bottom: calc(1em * 1); /* font-size × line-height = one line of spacing */
}

/* ===== List styling (structure + markers) ===== */

/* Ordered lists: structure + marker font */
.post-content ol { list-style-type: decimal; padding-left: 1.75em; }
.post-content ol ol { list-style-type: lower-alpha; padding-left: 1.75em; }
.post-content ol ol ol { list-style-type: lower-roman; padding-left: 1.75em; }

.post-content ol li::marker {
  font-family: var(--etb);
  font-weight: 700;
  font-size: 1em;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'onum' 0, 'lnum' 1, 'kern' 1, 'liga' 1, 'calt' 1;
}

/* Unordered lists: keep list-style so marker box exists; override glyph via ::marker */
.post-content ul { list-style-type: disc; padding-left: 1.5em; }
.post-content ul ul { list-style-type: circle; padding-left: 1.5em; }
.post-content ul ul ul { list-style-type: square; padding-left: 1.5em; }

/* Custom bullet glyphs from Epicene Text (global) - markers now match body text size */
.post-content ul li::marker { content: "\00BB "; font-family: var(--etb); font-weight: 700; font-size: 1em; }
.post-content ul ul li::marker { content: "\2192 "; font-family: var(--etb); font-weight: 700; font-size: 1em; }
.post-content ul ul ul li::marker { content: "\2022 "; font-family: var(--etb); font-weight: 700; font-size: 1em; }

/* Footnote blocks: prose list markers must not use ETB chevrons (footnotes.css owns glyphs). */
.post-content section.footnotes ul li::marker,
.post-content section.footnotes ul ul li::marker,
.post-content section.footnotes ul ul ul li::marker,
.post-content .footnotes-container ul li::marker,
.post-content .footnotes-container ul ul li::marker,
.post-content .footnotes-container ul ul ul li::marker {
    content: '\2022\00a0' !important;
    font-family: var(--font3) !important;
    font-weight: 400 !important;
    font-size: inherit !important;
}

.post-content section.footnotes ol li::marker,
.post-content .footnotes-container ol li::marker {
    font-family: var(--font3) !important;
    font-weight: 600 !important;
    font-size: inherit !important;
    font-variant-numeric: lining-nums;
    font-feature-settings: 'onum' 0, 'lnum' 1, 'kern' 1, 'liga' 1, 'calt' 1;
}
/*
 * SUPERCEDED 2026-04-13 (contrary to current table contract — keep for archaeology):
 * Tables: em-sized from --post-body-font-size so tablet/mobile fluid type applies; beats global td 20px (ISSUES-LIST-CURRENT2).
 * .post-content table { margin-left:.5rem; borders none; font-size:calc(var(--post-body-font-size)*0.76)!important; line-height:var(--post-body-line-height); }
 * .post-content td, .post-content th { font-size:1em!important; line-height:inherit; }
 * .post-content th { font-size:0.92em!important; border-bottom:2px solid var(--text-60-opac); font-weight:650; … }
 * .post-content tr { border-bottom:1px solid var(--text-60-opac); }
 */

/* Post tables: td = same size token as .post-content :is(p, li, …) (L24–26), rounded down to whole px; th = Commit Mono at 0.8× table em. */
.post-content table {
    margin-left: .5rem;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    line-height: var(--post-body-line-height);
    font-family: var(--font2);
    font-size: var(--post-body-font-size) !important;
    font-size: round(down, var(--post-body-font-size), 1px) !important;
}

.post-content td {
    font-size: 1em !important;
    line-height: inherit;
}

.post-content th {
    font-family: var(--font3) !important;
    font-size: 0.8em !important;
    line-height: inherit;
    border-bottom: 2px solid var(--text-60-opac);
    font-kerning: auto;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-align: left;
}

.post-content tr {
    border-bottom: 1px solid var(--text-60-opac);
}

    /* Clearfix for flow container to contain floats */
    .post-content::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Add margin-bottom to <br> elements in post content */
    .post-content br, .br {
        display: block !important;
        margin-bottom: 0.5em !important;
    }

    /* blockquotes: <br> should behave like a paragraph boundary */
    .post-content blockquote br {
        display: block !important;
        margin-bottom: 0.5em !important;
        line-height: 0 !important;
    }

    /* Ensure smart quotes and apostrophes display properly */
    .post-content p,
    .post-content blockquote,
    .post-content li {
        font-feature-settings: var(--font-features-global);
        -moz-font-feature-settings: var(--font-features-global);
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Headings: explicit weights so UA `bold` does not distort Epicene Display (ISSUES-LIST-CURRENT2). */
    .post-content h1,
    .post-content h1 > * {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        padding-right: 10% !important;
        font-weight: 700;
    }
    .post-content h2,
    .post-content h2 > * {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        padding-right: 10% !important;
        font-weight: 300;
    }
    .post-content h3,
    .post-content h3 > * {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        padding-right: 10% !important;
        font-weight: 400;
    }
    .post-content h4,
    .post-content h4 > * {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        padding-right: 10% !important;
        font-weight: 300;
    }
    .post-content h5,
    .post-content h5 > *,
    .post-content h6,
    .post-content h6 > * {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        padding-right: 10% !important;
        font-weight: 400;
    }

    cite, .post-content cite {
        font-family: var(--etm);
        font-style: italic;
        text-align: right;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .post-share-icons {
        display: flex;
        column-gap: calc(2.2vw * var(--scale));
        row-gap: calc(2.2vw * var(--scale));
        margin-top: calc(3vw * var(--scale));
        position: relative;
    }

    /* Social icons scale with viewport */
    .post-share-icons .social {
        min-width: calc(32px * var(--scale)) !important;
        width: calc(32px * var(--scale)) !important;
        height: calc(32px * var(--scale)) !important;
        max-width: calc(32px * var(--scale)) !important;
        max-height: calc(32px * var(--scale)) !important;
    }

    .post-share-icons .social-inner {
        width: calc(32px * var(--scale)) !important;
        height: calc(32px * var(--scale)) !important;
        max-width: calc(32px * var(--scale)) !important;
        max-height: calc(32px * var(--scale)) !important;
    }

    .no-padding-top {
        padding-top: 0px !important;
    }

    .post-upgrade-cta {
        border: 1px solid var(--text-color);
        text-align: center;
        background-color: var(--background-color);
        padding: calc(7.5vw * var(--scale)) calc(10vw * var(--scale));
        margin-top: calc(4.2vw * var(--scale));
        margin-bottom: calc(4.2vw * var(--scale));
    }

    .post-upgrade-cta-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .post-upgrade-cta h2 {
        line-height: 110%;
    }

    .post-upgrade-cta-paragraph {
        margin-top: calc(1.5vw * var(--scale));
        margin-bottom: calc(3.5vw * var(--scale));
    }

    .excerpt-margin-top {
        margin-top: calc(3vw * var(--scale));
    }
    /* Footnote indicator, popup, container, backref — all moved to footnotes.css */

    p.code,
    .post-content .code,
    .post-content code {
        font-family: var(--font3);
        font-weight: 450;
        font-size: round(nearest,calc(0.8 * var(--post-body-font-size)),1);  /* 80% of body font-size */
        margin-left: calc(2vw * var(--scale));
        margin-bottom: calc(1.5vw * var(--scale));
        padding-right: calc(2vw * var(--scale));
        text-justify: auto;
        color: var(--revolver);
        line-height: 125%;
        padding: 0;
    }
    p.code.indent,
    .post-content p.code.indent {
        font-family: var(--font3);
        font-weight: 450;
            font-size: 0.8em;  /* 80% of body font-size */
        color: var(--revolver);
        line-height: 125%;
        margin-left: calc(4vw * var(--scale));
        margin-bottom: calc(1vw * var(--scale));    }

    .code em, code indent em {
        font-style: italic;
        /* font-size: calc(1em - 1px); */
        font-weight: 350;
        letter-spacing: -0.4px;
        color: var(--port);
    }
    .code strong, .code-indent strong {
        font-weight: 700;
        color: var(--revolver);
    }

    /* Info (citation) class styling */
    p.info, 
    .info {
        font-family: var(--etm);
        font-weight: 500;
        font-size: calc(1em * .9);
        color: var(--revolver);
        text-align: right;
        padding-left: 72px;
        padding-right: 36px;
        margin-top: calc(.25em * var(--scale));
        margin-bottom: 0 !important;
    }

    /* Info paragraphs get margin-bottom only when not inside blockquote */
    p.info:not(blockquote p.info),
    .info:not(blockquote .info) {
        margin-bottom: calc(2vw * var(--scale)) !important;
        margin-top: calc(-2vw * var(--scale)) !important;
    }
    /* Image styles moved to post-image.css for better organization */
    /* @import url('post-image.css'); - Now loaded explicitly in post.hbs */

    .post-image-full-borders {
        border: 1px solid var(--text-color);
    }

    /* Feature image caption styles moved to post-image.css */
    blockquote > .br {
        display: block;
        margin-bottom: .5em;
        line-height: 0;
    }
    /* AGENT: does not work - results in extra space only after the last paragraph br in the entire blockquote skipping the intersitital separators entirely.... 
    
    br equivalent to p boundary (ISSUES-LIST ### blockquotes) */
    /* blockquote br {
        display: block;
        margin-bottom: 0.75em;
        line-height: 0;
    }
    blockquote br:last-child {
        margin-bottom: 0;
    } */
    .post-content .blockquote {
        font-family: var(--etl) !important;
        line-height: 1.3 !important;
    }
    
    /* article-ending rosart glyph styling */
    .exeunt {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 2rem 0;
    }
    
    .exeunt-glyph {
        display: block;
        width: calc(120px * 1022 / 1000 * var(--scale));
        height: calc(120px * var(--scale));
        margin-inline: auto;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-image: url('../img/rosart-glyphs/orn835-exeunt-57705.svg');
        mask-image: url('../img/rosart-glyphs/orn835-exeunt-57705.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
/* 9.3.25: Blockquote styles migrated from global.css so spacing is controlled locally */
blockquote,
blockquote .p {
    margin-left: 1.25rem;
    padding-left: 1.25rem;
    padding-top: calc(.25vw * var(--scale));
    padding-bottom: calc(.25vw * var(--scale));
    margin-top: calc(.75vw * var(--scale));
    margin-bottom: calc(2.2vw * var(--scale));
    font-family: var(--etl) !important; /* Epicene Text Light */
    line-height: 125% !important;
    border-left: 4px solid var(--swiss-coffee);
    font-weight: 300;
    font-optical-sizing: auto;
    font-feature-settings: var(--font-features-global);
    box-sizing: border-box;
}
blockquote > p {
    font-family: var(--etl) !important;
}

/* ISSUES-LIST complete: EXCEPTION — blockquote line-height 1.3 in post body (overrides global 125%). */
.post-content blockquote,
.post-content blockquote .p {
    line-height: 1.3 !important;
}

/* Nested blockquote support for indented content */
blockquote.indent1 {
    margin-left: calc(4.4vw * var(--scale)); /* Double the base margin */
    padding-left: calc(1.1vw * var(--scale)); /* Half the base padding */
    border-left: none; /* Remove border for indented content - only outer blockquote should have border */
}
blockquote.indent2 {
    margin-left: calc(6.6vw * var(--scale)); /* Triple the base margin */
    padding-left: calc(1.1vw * var(--scale)); /* Half the base padding */
    border-left: none; /* Remove border for indented content - only outer blockquote should have border */
}
blockquote.indent3 {
    margin-left: calc(8.8vw * var(--scale)); /* Quadruple the base margin */
    padding-left: calc(1.1vw * var(--scale)); /* Half the base padding */
    border-left: none; /* Remove border for indented content - only outer blockquote should have border */
}
/* Nested blockquotes: no additional border — single left border for uninterrupted series (ISSUES-LIST ### blockquotes) */
.post-content blockquote blockquote {
    border-left: none !important;
    padding-left: 0;
    margin-left: 0.75em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
/* Citation-specific styles */
blockquote.citation footer {
    margin-top: .5em;
    padding: 0 0 0 4px;
    font-family: var(--font3);
    font-weight: 350;
    font-size: 18pt;
    text-align: left;
    font-style: italic;
}
blockquote.citation footer:before {
    content: '— ';
}





/* ========================================================================
   VIEWPORT-SPECIFIC (1. Desktop → 2a. Tablet+Mobile → 2b. Tablet → 2c. Mobile)
   ======================================================================== */

    /* 1. DESKTOP (1024px+) */
@media (min-width: 1024px) {
    .post-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: calc(2.5vw * var(--scale));
        justify-content: space-between;
    }
    .post-header .post-header-text {
        flex: 1 1 45%;
        min-width: 280px;
    }
    .post-header .post-main-image {
        flex: 0 0 auto;
    }

    .post-content {
        position: relative;
        display: block;
        max-width: 100%;
        padding-bottom: calc(8vw * var(--scale));
        margin-left: calc(3vw * var(--scale));
        margin-right: calc(3vw * var(--scale));
    }

    .post-content .excerpt-and-metadata {
        margin-bottom: calc(1em * 2);
    }

    .post-content .post-share-icons {
        margin-bottom: calc(1em * 2);
    }

    .post-content {
        --post-body-font-size: 20px;
        --post-body-line-height: 1.4;
    }

    .post-content > p {
        padding-right: calc(1vw * var(--scale));
    }

    .post-content > h1,
    .post-content > h2 {
        margin-top: calc(8vw * var(--scale));
    }

    .post-content > h3,
    .post-content > h4,
    .post-content > h5,
    .post-content > h6 {
        margin-top: calc(4vw * var(--scale));
    }
}

    /* 1b. WIDE DESKTOP (1200px+) — constrain text width, images can grow */
@media (min-width: 1200px) {
    .post-content {
        margin-left: calc(40px * var(--scale));
        margin-right: calc(40px * var(--scale));
    }

    .post-content > p,
    .post-content > blockquote,
    .post-content > ul,
    .post-content > ol,
    .post-content > h1,
    .post-content > h2,
    .post-content > h3,
    .post-content > h4,
    .post-content > h5,
    .post-content > h6,
    .post-content > .code,
    .post-content > p.code,
    .post-content > p.info,
    .post-content > table {
        max-width: 48rem;
    }
}

    /* 2a. TABLET + MOBILE (≤1023px) - Single column, no grid */
@media (max-width: 1023px) {
    .post-content {
        display: block; /* Single column layout */
        margin-left: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 42px;
        padding-bottom: 80px;
    }

    .post-content {
        /* Fluid body type (was commented scalar block); matches top-level <p> rhythm */
        --post-body-font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.12rem);
        --post-body-line-height: 1.55;
    }

    /* All content flows in single column on mobile */
    .post-content .excerpt-and-metadata,
    .post-content .post-share-icons,
    .post-content > p,
    .post-content > blockquote,
    .post-content > li,
    .post-content > ul,
    .post-content > ol,
    .post-content > h1,
    .post-content > h2,
    .post-content > h3,
    .post-content > h4,
    .post-content > h5,
    .post-content > h6 {
        width: 100%;
    }

    .post-content code,
    .post-content p.code {
        font-size: 0.8em !important; /* 80% of body font-size */
        line-height: inherit;
    }

    .post-content figcaption {
        font-size: 0.9em !important;
        line-height: inherit;
    }

    /* Retain blockquote indentation logic for mobile (moved from global.css) */
    blockquote.indent1 { margin-left: 2rem; padding-left: 0.5rem; border-left: none; }
    blockquote.indent2 { margin-left: 3rem; padding-left: 0.5rem; border-left: none; }
    blockquote.indent3 { margin-left: 4rem; padding-left: 0.5rem; border-left: none; }

    /* Mobile footnotes, indicators, backrefs — moved to footnotes.css */

    /* Mobile-first readability: reduce blockquote border/text collisions. */
    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 0.7rem;
        margin-right: 0;
        padding-left: 0.95rem;
        padding-right: 0.35rem;
        border-left-width: 3px;
        margin-top: 0.9rem;
        margin-bottom: 1.2rem;
        line-height: 1.3 !important;
    }

    .post-content blockquote > p,
    .post-content blockquote > ul,
    .post-content blockquote > ol {
        margin: 0.35rem 0 0.6rem 0 !important;
        padding-left: 0 !important;
    }

    /* Scalar override (commented so global.css --scale rules win)
    .post-content > p,
    .post-content > li,
    .post-content > ul li,
    .post-content > ol li {
        font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.12rem) !important;
        line-height: 1.55 !important;
    }

    .post-content > h1 { font-size: clamp(2.05rem, 1.7rem + 2.2vw, 2.6rem); }
    .post-content > h2 { font-size: clamp(1.85rem, 1.55rem + 1.75vw, 2.3rem); }
    .post-content > h3 { font-size: clamp(1.6rem, 1.38rem + 1.3vw, 2rem); }
    .post-content > h4 { font-size: clamp(1.42rem, 1.28rem + 0.95vw, 1.72rem); }
    .post-content > h5 { font-size: clamp(1.26rem, 1.16rem + 0.7vw, 1.5rem); }
    .post-content > h6 { font-size: clamp(1.16rem, 1.08rem + 0.45vw, 1.3rem); }
    */
}

/* 2a. TABLET + MOBILE (≤1023px) - header, excerpt, layout */
@media (max-width: 1023px) {

    .post-content {
        --post-body-line-height: 1.25;
    }
    .post-header {
        display: flex;
        flex-direction: column-reverse;
    }
    .post-header .post-main-image {
        max-width: 100%;
        margin-bottom: calc(1em * var(--scale));
    }
    .post-header-text {
        padding: calc(30px * var(--scale)) calc(30px * var(--scale)) calc(24px * var(--scale)) calc(30px * var(--scale));
    }

    .post-author-name:hover {
        text-decoration: none;
    }
/* 
    .post-title {
        font-size: calc(60px * .75 * var(--scale));
        margin-top: calc(16px * var(--scale));
        margin-bottom: calc(22px * var(--scale));
    }

    .post-subtitle {
        font-size: calc(36px * var(--scale));
        margin-top: calc(-8px * var(--scale));
        margin-bottom: calc(22px * var(--scale));
    } */

    .post-excerpt {
        max-width: 100%;
    }

    .post-author-image {
        min-width: 54px;
        width: 54px;
        height: 54px;
        margin-left: -10px;
    }

    .post-author-image:first-of-type {
        margin-left: 0px;
    }

    .post-author-image:last-of-type {
        margin-right: 16px;
    }

    .post-author-image:hover {
        transform: translateY(0%);
    }

    .post-avatar {
        transform: translateY(17%);
    }

    .date-small-text {
        margin-top: calc(6px * var(--scale));
        font-size: calc(13px * var(--scale));
    }

    .post-share-icons {
        column-gap: 26px;
        row-gap: 26px;
        margin-top: 30px;
    }

    .excerpt-and-metadata {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-authors {
        margin-top: 18px;
        row-gap: 12px;
    }

    .post-upgrade-cta {
        padding: 75px 30px;
        margin-top: 42px;
        margin-bottom: 42px;
    }

    .post-upgrade-cta-paragraph {
        margin-top: 15px;
        margin-bottom: 35px;
    }

    .post-tags {
        gap: 8px;
        margin-bottom: calc(1vw * var(--scale));
    }

    .post-tag {
        font-size: calc(13px * var(--scale));
        padding: calc(0.25rem * var(--scale));
    }
    .excerpt-margin-top {
        margin-top: 30px;
    }
}

    /* 2a. TABLET + MOBILE (≤1023px) - typography normalization */
@media (max-width: 1023px) {

    .post-content {
        margin-left: 2rem !important;
    }
    .post-excerpt {
        max-width: 100% !important;
    }
/* 
    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 0.8rem !important;
        padding-left: 1rem !important;
        padding-right: 0.45rem !important;
        line-height: 1.3 !important;
    }


    .post-content p.code,
    .post-content .code,
    .post-content p.code.indent {
        font-size: 0.78em !important;
        line-height: 1.28 !important;
    } */

    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 1.15rem;
        padding-left: 1.5rem;
        padding-right: 0.4rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        border-left-width: 3px;
        line-height: 1.3 !important;
    }

    .post-content blockquote > p,
    .post-content blockquote > ul,
    .post-content blockquote > ol {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .post-content blockquote > p,
    .post-content blockquote li {
        overflow-wrap: anywhere;
    }

    .post-content blockquote br {
        display: block;
        margin-bottom: 0.5em;
        line-height: 0;
    }
}