/* 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. */

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

/* POST CONTEXT: .post-content wraps the whole post section (article.hbs).
   .article-body is the inner div that contains {{content}} (prose: p, blockquote, etc.).
   So .article-body is always inside .post-content on post pages.
   - .post-content .article-body > p  = direct child paragraphs of the prose container only.
   - .post-content blockquote        = any blockquote in the post (main prose + footnotes).
   - .post-content blockquote .p     = Ghost outputs blockquote content in wrappers with class .p. */


.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-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 {
    /* display: flex; removed sun 8.25.25 to make sure the grid rule at lines 183-186 appliescite the flex in the sub elements should still stickcite*/
    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;
    /* z-index: 5; */
}

.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;
}

/* pkj-specific addtions that cut across all viewports */

    /* Override the global margin-bottom rule since we're using CSS Grid gap
    .post-content > * {
        margin-bottom: 0 !important;
    } */

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

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

.article-body 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 */
.article-body ul { list-style-type: disc; padding-left: 1.5em; }
.article-body ul ul { list-style-type: circle; padding-left: 1.5em; }
.article-body ul ul ul { list-style-type: square; padding-left: 1.5em; }

/* Custom bullet glyphs from Epicene Text (global) - markers now match body text size */
.article-body ul li::marker { content: "\00BB "; font-family: var(--etb); font-weight: 700; font-size: 1em; }
.article-body ul ul li::marker { content: "\2192 "; font-family: var(--etb); font-weight: 700; font-size: 1em; }
.article-body ul ul ul li::marker { content: "\2022 "; font-family: var(--etb); font-weight: 700; font-size: 1em; }
    /* Heading spacing inside article body | pkj deactivated 3.8.26 */
    /* .post-content .article-body > h1,
    .post-content .article-body > h2,
    .post-content .article-body > h3,
    .post-content .article-body > h4,
    .post-content .article-body > h5,
    .post-content .article-body > h6 {
        margin-top: calc(2.5vw * var(--scale));
        margin-bottom: calc(1.5vw * var(--scale));
    } */

    /* All images and figures span columns 2 and 3 */
    /* Grid layout for images moved to post-image.css */

    /* Main image grid layout moved to post-image.css */

    /* Tables span columns 1 and 2 like text */
    .post-content table {
        /*font-size: 20px; /* Ensure table text is 20px */
        margin-left: .5rem;
        border-bottom: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .th,
    .post-content th {
        font-size: 0.85em !important; /* 90% of parent font-size */
        border-bottom: 2px solid var(--text-60-opac);
        font-kerning: auto;
        font-weight: 650;
        letter-spacing: -0.05em;
        
    }
    .tr, .post-content tr {
        border-bottom: 1px solid var(--text-60-opac);
    }

    /* Wrap-around image behavior moved to post-image.css */

    /* Clearfix for flow container to contain floats */
    .post-content .article-body::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;
    }

    /* 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 get discretionary ligatures for decorative effect */
    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4,
    .post-content h5,
    .post-content h6 {
        font-feature-settings: var(--font-features-global), 'dlig' 1;
        -moz-font-feature-settings: var(--font-features-global), 'dlig' 1;
        /* Common properties for all headings */
        padding-right: 20% !important;
}

    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));
    }
    .post-content .footnote-indicator:hover,
    .post-content a.footnote-indicator:hover {
        text-decoration: underline !important;
        text-decoration-thickness: 3px !important;
        text-decoration-color: #DECE7D !important;
    }

    /* Footnote popup styling */
    .footnote-popup {
        position: fixed;
        z-index: 10000;
        background-color: var(--background-color);
        border: 2px solid var(--port);
        padding: calc(1vw * var(--scale)) calc(1.5vw * var(--scale));
        max-width: 400px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-family: var(--font3);
        font-size: 14px;
        line-height: 1.4;
        color: var(--revolver);
        display: none;
        pointer-events: auto;
    }

    .footnote-popup.visible {
        display: block !important;
    }

    .footnote-popup p {
        margin: 0 !important;
        padding: 0 !important;
        font-family: var(--font3) !important;
        font-size: 14px !important;
        color: var(--revolver) !important;
        line-height: 1.4 !important;
    }

    .footnote-popup em {
        font-family: var(--font3) !important;
        font-style: italic !important;
    }

    p.code,
    .post-content .code,
    .post-content .article-body code {
        font-family: var(--font3);
        font-weight: 450;
        font-size: 0.8em;  /* 80% of body font-size */
        margin-left: calc(2vw * var(--scale));
        margin-bottom: calc(1vw * 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(3vw * 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);
    }

    .footnotes-list,
    .footnote-item {
        line-height: 125%;
    }
    /* Feature image caption styles moved to post-image.css */
    /* ul, ol, li inside footnotes: same font/size as footnote text, small indents (ISSUES-LIST ### footnotes) */
    .post-content .footnotes-container .footnote-item ul,
    .post-content .footnotes-container .footnote-item ol,
    .post-content .footnotes-container .footnote-item li,
    li.footnote-item ul,
    li.footnote-item ol,
    li.footnote-item li {
        font-family: var(--font3) !important;
        font-size: inherit;
        margin-top: calc(.35em * var(--scale));
        margin-bottom: 0;
        padding-left: 1.25em;
        line-height: 125%;
    }
    .post-content .footnotes-container .footnote-item ul,
    .post-content .footnotes-container .footnote-item ol,
    li.footnote-item ul,
    li.footnote-item ol {
        list-style-position: outside;
        margin-left: 0.5em;
    }

    /* Target blockquotes inside <li class="footnote-item"> */
    li.footnote-item blockquote {
        margin-top: calc(1vw * var(--scale));       /* tighten against parent */
        margin-left: calc(2.2vw * var(--scale));    /* reduce indent */
        padding-left: calc(1vw * var(--scale)); /* reduce indent */
        font-size: 0.9em;     /* optional: shrink text slightly */
        border-left: 2px solid var(--swiss-coffee); /* optional: subtle line */
        font-family: var(--font3);
    }
    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;
    } */
    .article-body .blockquote {
        font-family: var(--etl) !important;
        line-height: 125% !important;
    }
    
    /* article-ending rosart glyph styling */
    .exeunt {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 2rem 0;
    }
    
    .exeunt-glyph {
        font-family: 'RosartOrnaments', serif;
        font-size: calc(120px * var(--scale));
        line-height: 1;
        text-align: center;
    }
/* 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;
    font-size: 1em; /* calc(1em - 2px) equivalent kept as 1em for consistency */
    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;
}
/* 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: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 40px;
        row-gap: 0px;
        max-width: 100%;
        padding-bottom: calc(8vw * var(--scale));
        margin-left: calc(3vw * var(--scale));
        margin-right: calc(3vw * var(--scale));
    }

    .article-body {
        display: block;
        width: 100%;
        position: relative;
        grid-column: 1 / 3;
        overflow: visible;
    }

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

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

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

    .post-content .footnotes-container {
        position: absolute;
        grid-column: 3 / 4;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 25;
        overflow: visible;
        line-height: 125%;
    }

    .post-content .footnotes-container .footnote-backref {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .post-content .images-container {
        position: absolute;
        grid-column: 2 / 4;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        overflow: visible;
    }

    .post-content .footnotes-container .footnotes-list {
        padding-left: 0;
        list-style: none;
        margin: 0;
        position: relative;
    }

    .post-content .footnotes-container .footnote-item,
    .post-content .footnotes-container .footnote {
        font-family: var(--font3);
        font-size: 13px;
        color: var(--revolver);
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        margin-bottom: 0;
    }

    .post-content .footnotes-container .footnote-item em,
    .post-content .footnotes-container .footnote em,
    .post-content .footnotes-container em {
        font-family: var(--font3) !important;
        font-style: italic !important;
    }

    .post-content .footnotes-container .footnote-item p,
    .post-content .footnotes-container .footnote p {
        font-family: var(--font3) !important;
        font-size: 13px !important;
        color: var(--revolver) !important;
        line-height: 125% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .post-content .footnotes-container .footnote-item.indent,
    .post-content .footnotes-container .footnote.indent {
        margin-left: 0.5em;
    }

    .post-content .footnotes-container .footnote-number {
        font-weight: 600;
        margin-right: 0.35em;
        color: var(--revolver);
        text-decoration: none;
    }
    .post-content .footnotes-container .footnote-number:hover {
        text-decoration: underline;
    }

    .post-content .footnotes-container .footnote-backref,
    .post-content .footnote-backref {
        font-family: var(--font3);
        font-weight: 625;
        color: var(--port);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: #DECE7D;
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .post-content .footnotes-container .footnote-backref:hover,
    .post-content .footnote-backref:hover {
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-decoration-color: #DECE7D;
    }

    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-family: 'CommitMono', 'Fira Code', monospace !important;
        font-size: 14px !important;
        font-weight: 625 !important;
        color: var(--port) !important;
        letter-spacing: -0.8px !important;
        font-kerning: normal;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: #DECE7D;
        vertical-align: super !important;
        line-height: 0 !important;
        display: inline !important;
        margin: 0 .25rem 0 0 !important;
        padding: 0 0 0 0.5px !important;
    }

    .post-content .footnote-indicator:hover,
    .post-content a.footnote-indicator:hover,
    .post-content sup.footnote-ref a:hover {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-decoration-color: #DECE7D !important;
    }

    .post-content > p,
    .post-content > blockquote,
    .post-content > li,
    .post-content > ul,
    .post-content > ol {
        grid-column: 1 / 3;
        font-size: 20px;
    }

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

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

    /* 1. DESKTOP (1200px tier) */
@media (min-width: 1200px) {
    .date-small-text {
        font-size: calc(1vw * var(--scale));
    }

    .post-content {
        gap: calc(30px * var(--scale));
        margin-left: calc(40px * var(--scale));
        margin-right: calc(40px * var(--scale));
    }
}

    /* 2a. TABLET + MOBILE (≤1023px) - Single column, no grid */
@media (max-width: 1023px) {
    .post-content {
        display: block; /* Single column layout */
        margin-left: calc(var(--sidebar-peek-width) + .25vw);
        padding-top: 42px;
        padding-bottom: 80px;
    }

    /* All content flows in single column on mobile */
    .post-content .article-body,
    .post-content .excerpt-and-metadata,
    .post-content .post-share-icons,
    .post-content .footnotes-container,
    .post-content .images-container,
    .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 {
        grid-column: unset;
        width: 100%;
    }

    .post-content .images-container {
        position: static;
        min-height: 0;
        z-index: auto;
        display: none;
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
    }

    /* 9.3.25: Normalize sizes for list items and scale code/figcaptions appropriately */
    .post-content ul li,
    .post-content ol li {
        font-size: inherit; /* match paragraph scaling at this breakpoint */
        line-height: inherit;
    }

    .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 SYSTEM ===== */
    .post-content .footnotes-container {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        z-index: auto;
        font-family: var(--font3);
        font-size: 14px;
        color: var(--revolver);
        line-height: 1.4;
    }

    /* Footnotes list styling */
    .post-content .footnotes-container .footnotes-list {
        padding-left: 0;
        list-style: none;
    }

    /* Individual footnote items */
    .post-content .footnotes-container .footnote-item,
    .post-content .footnotes-container .footnote {
        margin-bottom: 2.5em;
        font-family: var(--font3);
        font-size: 12px;
        color: var(--revolver);
    }

    /* Ensure em tags within footnotes maintain font3 */
    .post-content .footnotes-container .footnote-item em,
    .post-content .footnotes-container .footnote em,
    .post-content .footnotes-container em {
        font-family: var(--font3) !important;
        font-style: italic !important;
    }

    /* Ensure paragraphs within footnote items inherit footnote styling */
    .post-content .footnotes-container .footnote-item p,
    .post-content .footnotes-container .footnote p {
        font-family: var(--font3) !important;
        font-size: 12px !important;
        color: var(--revolver) !important;
        line-height: 125% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ul, ol, li inside footnotes: same font/size as footnote text (ISSUES-LIST ### footnotes) */
    .post-content .footnotes-container .footnote-item ul,
    .post-content .footnotes-container .footnote-item ol,
    .post-content .footnotes-container .footnote-item li {
        font-family: var(--font3) !important;
        font-size: 1em;
        margin-top: 0.35em;
        margin-bottom: 0;
        padding-left: 1.25em;
        line-height: 125%;
    }
    .post-content .footnotes-container .footnote-item ul,
    .post-content .footnotes-container .footnote-item ol {
        margin-left: 0.5em;
    }

    /* Indent class for footnote items */
    .post-content .footnotes-container .footnote-item.indent,
    .post-content .footnotes-container .footnote.indent {
        margin-left: 0.5em;
    }

    /* Leading number in footnote items (mobile/tablet list) */
    .post-content .footnotes-container .footnote-number {
        font-weight: 600;
        margin-right: 0.35em;
        color: var(--revolver);
        text-decoration: none;
    }
    .post-content .footnotes-container .footnote-number:hover {
        text-decoration: underline;
    }

    .post-content .footnotes-container .footnote-backref:hover,
    .post-content .footnote-backref:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: #DECE7D;
    }

    /* Footnote indicators in main text */
    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-family: 'CommitMono', 'Fira Code', monospace !important;
        font-size: 11px !important;
        font-weight: 625 !important;
        color: var(--port) !important;
        letter-spacing: -0.32px !important;
        font-kerning: normal;
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-decoration-color: #DECE7D !important;
        vertical-align: super !important;
        line-height: 0 !important;
        display: inline !important;
        margin: 0 0.12rem 0 0 !important;
        padding: 0 !important;
    }

    .post-content .footnote-indicator:hover,
    .post-content a.footnote-indicator:hover,
    .post-content sup.footnote-ref a:hover {
        text-decoration: underline !important;
        text-decoration-thickness: 3px !important;
        text-decoration-color: #DECE7D !important;
    }

    /* Mobile footnote popup styling */
    .footnote-popup {
        position: fixed;
        z-index: 10000;
        max-width: 90vw;
        padding: 12px 16px;
        font-size: 13px;
        max-height: min(45vh, 320px);
        overflow-y: auto;
        pointer-events: auto;
    }

    .footnote-popup p {
        font-size: 13px !important;
    }

    .footnote-popup.visible {
        display: block !important;
    }

    /* 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.35 !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 .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.12rem) !important;
        line-height: 1.55 !important;
    }

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

/* 2a. TABLET + MOBILE (≤1023px) - header, excerpt, layout */
@media (max-width: 1023px) {
    .post-header {
        display: block;
    }
    .post-header .post-main-image {
        max-width: 100%;
        margin-top: 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-content {
        padding-top: 42px;
        padding-bottom: 80px;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-left: 30px;
        margin-right: 30px;
    } */

    .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));
    }
/* 
    .post-content p,
    .post-content blockquote,
    .post-content li,
    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4,
    .post-content h5,
    .post-content h6,
    .post-content table,
    .post-content ul,
    .post-content ol {
        grid-column: 1;
        position: static;
        padding-left: 0;
    } */

    /* .post-content .article-body ul,
    .post-content .article-body ol {
        padding-left: 1.5em !important;
        list-style-position: outside;
    }

    .post-content .article-body li {
        margin-left: 0 !important;
    } */

    .footnote-popup {
        position: fixed;
        z-index: 10000;
        max-width: 350px;
        padding: 14px 18px;
        font-size: 13px;
        pointer-events: auto;
    }

    .footnote-popup p {
        font-size: 13px !important;
    }

    .footnote-popup.visible {
        display: block !important;
    }

    .excerpt-margin-top {
        margin-top: 30px;
    }
}

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

    .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.4 !important;
    }


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

    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 0.42em !important;
        letter-spacing: -0.24px !important;
        padding-left: 0 !important;
        margin-right: 0.1rem !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.35 !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.75em;
        line-height: 0;
    }
}

    /* .post-title {
        font-size: clamp(52px, 12.8vw, 70px) !important;
        line-height: 0.97 !important;
        margin-right: 0 !important;
    }

    .post-subtitle,
    h4.post-subtitle {
        font-size: clamp(26px, 6.2vw, 34px) !important;
        line-height: 1.08 !important;
        margin-right: 0 !important;
    } */

    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(17px, 4.4vw, 19px) !important;
        line-height: 1.52 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(36px, 8.8vw, 48px) !important; }
    .post-content .article-body > h2 { font-size: clamp(32px, 7.8vw, 42px) !important; }
    .post-content .article-body > h3 { font-size: clamp(28px, 6.8vw, 36px) !important; }
    .post-content .article-body > h4 { font-size: clamp(24px, 5.9vw, 31px) !important; }
    .post-content .article-body > h5 { font-size: clamp(21px, 5.1vw, 27px) !important; }
    .post-content .article-body > h6 { font-size: clamp(19px, 4.6vw, 24px) !important; }
    */

    /* .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 0.52em !important;
        letter-spacing: -0.32px !important;
    } */
    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(20px, 1.15vw + 11px, 23px) !important;
        line-height: 1.4;
    }

    .post-content .article-body > h1 { font-size: clamp(68px, 7.4vw, 85px); }
    .post-content .article-body > h2 { font-size: clamp(48px, 5.2vw, 60px); }
    .post-content .article-body > h3 { font-size: clamp(38px, 4.2vw, 48px); }
    .post-content .article-body > h4 { font-size: clamp(34px, 3.1vw, 42px); }
    .post-content .article-body > h5 { font-size: clamp(28px, 3vw, 35px); }
    .post-content .article-body > h6 { font-size: clamp(24px, 2.55vw, 30px); }
    */
    
    /* 
@media (min-width: 768px) and (max-width: 1023px) {
    Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(1.09rem, 0.88rem + 0.9vw, 1.27rem) !important;
        line-height: 1.52 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(3.35rem, 2.87rem + 2.2vw, 4rem); }
    .post-content .article-body > h2 { font-size: clamp(2.35rem, 2.05rem + 1.35vw, 2.8rem); }
    .post-content .article-body > h3 { font-size: clamp(2rem, 1.76rem + 1.1vw, 2.35rem); }
    .post-content .article-body > h4 { font-size: clamp(1.65rem, 1.38rem + 1vw, 2.0rem); }
    .post-content .article-body > h5 { font-size: clamp(1.48rem, 1.33rem + 0.58vw, 1.66rem); }
    .post-content .article-body > h6 { font-size: clamp(1.3rem, 1.2rem + 0.42vw, 1.46rem); }
   

    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 0.95rem;
        padding-left: 1.2rem;
        padding-right: 0.35rem;
        border-left-width: 3px;
        line-height: 1.38 !important;
    }
} */

/* @media (min-width: 768px) and (max-width: 1023px) { */
    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(18px, 1.22vw + 10px, 20px) !important;
        line-height: 1.5 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(44px, 4.8vw, 56px) !important; }
    .post-content .article-body > h2 { font-size: clamp(40px, 4.3vw, 50px) !important; }
    .post-content .article-body > h3 { font-size: clamp(34px, 3.6vw, 42px) !important; }
    .post-content .article-body > h4 { font-size: clamp(30px, 3.1vw, 36px) !important; }
    .post-content .article-body > h5 { font-size: clamp(25px, 2.65vw, 31px) !important; }
    .post-content .article-body > h6 { font-size: clamp(22px, 2.35vw, 27px) !important; }
    */

    /* .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 0.5em !important;
        letter-spacing: -0.28px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) { */
    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(18.3px, 1.45vw + 6.8px, 19.8px) !important;
        line-height: 1.5 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(45px, 4.35vw, 55px) !important; }
    .post-content .article-body > h2 { font-size: clamp(40px, 3.95vw, 49px) !important; }
    .post-content .article-body > h3 { font-size: clamp(34px, 3.35vw, 42px) !important; }
    .post-content .article-body > h4 { font-size: clamp(30px, 2.9vw, 36px) !important; }
    .post-content .article-body > h5 { font-size: clamp(25.5px, 2.4vw, 31px) !important; }
    .post-content .article-body > h6 { font-size: clamp(22px, 2.1vw, 27px) !important; }
    */
/* 
    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 0.47em !important;
        letter-spacing: -0.25px !important;
        margin-right: 0.1rem !important;
    }

    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 1.04rem !important;
        padding-left: 1.32rem !important;
        padding-right: 0.38rem !important;
        border-left-width: 3px !important;
    }
} */

    /* 2b. TABLET (480px–1023px) */
/* @media (min-width: 480px) and (max-width: 1023px) { */
    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(17px, 2.1vw + 8px, 18.5px) !important;
        line-height: 1.53 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(37px, 6.2vw, 47px) !important; }
    .post-content .article-body > h2 { font-size: clamp(33px, 5.35vw, 42px) !important; }
    .post-content .article-body > h3 { font-size: clamp(29px, 4.7vw, 37px) !important; }
    .post-content .article-body > h4 { font-size: clamp(25px, 4vw, 31px) !important; }
    .post-content .article-body > h5 { font-size: clamp(22px, 3.4vw, 27px) !important; }
    .post-content .article-body > h6 { font-size: clamp(19px, 2.8vw, 23px) !important; }
    */
/* 
    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 0.48em !important;
        letter-spacing: -0.24px !important;
        margin-right: 0.09rem !important;
    }

    .post-content blockquote,
    .post-content blockquote .p {
        margin-left: 0.82rem !important;
        padding-left: 1.02rem !important;
        padding-right: 0.42rem !important;
        line-height: 1.4 !important;
    }

    .post-content .article-body p.code,
    .post-content .article-body .code,
    .post-content .article-body p.code.indent {
        font-size: 0.79em !important;
        line-height: 1.31 !important;
    }
} */

    /* 2c. MOBILE (≤479px) */
/* @media (max-width: 479px) {
    .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
        font-size: 10px !important;
        letter-spacing: -0.2px !important;
        margin-right: 0.09rem !important;
    }
} */
/* 
@media (max-width: 479px) { */
    /* .post-title {
        font-size: clamp(36px, 11.5vw, 46px) !important;
    }

    .post-subtitle,
    h4.post-subtitle {
        font-size: clamp(24px, 8vw, 31px) !important;
    } */

    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(16px, 4.9vw, 18px) !important;
    }
    */
/* }

@media (max-width: 479px) { */
    /* Scalar override (commented so global.css --scale rules win)
    .post-content .article-body > p,
    .post-content .article-body > li,
    .post-content .article-body > ul li,
    .post-content .article-body > ol li {
        font-size: clamp(16px, 4.7vw, 17.5px) !important;
        line-height: 1.54 !important;
    }

    .post-content .article-body > h1 { font-size: clamp(35px, 11vw, 42px) !important; }
    .post-content .article-body > h2 { font-size: clamp(31px, 9.8vw, 38px) !important; }
    .post-content .article-body > h3 { font-size: clamp(27px, 8.7vw, 33px) !important; }
    .post-content .article-body > h4 { font-size: clamp(23px, 7.5vw, 28px) !important; }
    .post-content .article-body > h5 { font-size: clamp(20px, 6.4vw, 24px) !important; }
    .post-content .article-body > h6 { font-size: clamp(18px, 5.7vw, 21px) !important; }
    */

    /* .post-content .footnote-indicator,
    .post-content a.footnote-indicator,
    .post-content sup.footnote-ref a {
    .post-content .article-body p.code,
    .post-content .article-body .code,
    .post-content .article-body p.code.indent {
        font-size: 0.8em !important;
        line-height: 1.32 !important;
    }
}

 */