/* ── BLOG ACCENT SYSTEM ──────────────────────────────────────────────── */
body[data-accent="plum"]    { --accent: #713357; }
body[data-accent="coral"]   { --accent: #fb7b44; }
body[data-accent="magenta"] { --accent: #d20d89; }
body[data-accent="sage"]    { --accent: #7a9461; }

/* ── ARTICLE HERO ────────────────────────────────────────────────────── */
.article-hero {
    background-color: var(--warm-peach);
    padding: 64px 40px 56px;
}
.article-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}
.article-hero .section-label {
    display: inline-block;
    color: var(--accent, var(--plum));
    margin-bottom: 18px;
}
.article-hero h1 {
    font-size: 38px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.22;
    margin-bottom: 20px;
}
.article-hero h1 .coral { color: var(--coral); }
.article-meta {
    font-size: 14px;
    color: var(--dark-gray);
    opacity: 0.65;
    font-weight: 600;
}

/* ── HERO PHOTO ──────────────────────────────────────────────────────── */
.hero-photo-section {
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 400px;
}
.hero-photo-section picture {
    display: block;
    width: 100%;
    height: 400px;
}
.hero-photo-section img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* ── ARTICLE BODY ────────────────────────────────────────────────────── */
.article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 40px 80px;
}
.article-body p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--dark-gray);
    margin-bottom: 26px;
}

/* A list written as markdown, or as a bare <ol>/<ul>, had no rule at all, so it
   fell through to the 16px/1.6 inherited from body while the paragraphs around
   it were 17px/1.8. Two sizes of body copy on the same page, which is what made
   the five steps in the longevity post read as a different, smaller voice.

   The reset at the top of main.css zeroes padding on everything, so the markers
   were also hanging outside the measure: "1." sat to the left of the column the
   paragraphs start at. padding-left puts the text back on the measure and lets
   the markers hang into the indent, which is where they belong.

   :not([class]) is the same guard the markdown tables use. Every deliberately
   styled list on the site carries a class or sits inside one (.callout,
   .appendix, .hsc-cites, .hso-tile), and the child combinator keeps this to
   lists in the body flow. */
.article-body > ol:not([class]),
.article-body > ul:not([class]) {
    font-size: 17px;
    line-height: 1.8;
    color: var(--dark-gray);
    margin: 0 0 26px;
    padding-left: 24px;
}
.article-body > ol:not([class]) > li,
.article-body > ul:not([class]) > li {
    margin-bottom: 8px;
}
.article-body > ol:not([class]) > li:last-child,
.article-body > ul:not([class]) > li:last-child {
    margin-bottom: 0;
}
/* An <img> dropped straight into body copy had no rule anywhere, so it rendered at
   its intrinsic width. The two-panel chart in "Build, Preserve, Convert. And
   Activate." is 2400px wide inside a 780px measure: its heading was cut off
   mid-word, its rule ran past the viewport, and the whole page scrolled sideways.

   max-width is deliberately unguarded, unlike the list and table rules nearby. An
   image overflowing its column is never wanted, whatever classes it carries, so
   this is a safety net rather than a style. It is safe at this weight because the
   only other img rules that could land inside an article body are
   .article-body .hsc-fork-thumb img in calculator.css, which outranks it and loads
   later. The hero frames are outside .article-body entirely.

   The rest is scoped to a direct-child <figure>, which is how a chart with a
   source note is marked up, so an inline image is left alone. */
.article-body img { max-width: 100%; height: auto; }
.article-body > figure { margin: 0 0 26px; }
.article-body > figure img { display: block; margin: 0 auto; }
.article-body figcaption {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b6b;
    margin-top: 10px;
}

.article-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--plum);
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.3;
}
.article-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--plum);
    margin-top: 36px;
    margin-bottom: 12px;
}

/* ── LEAD PARAGRAPH (vertical bar, inset caps) ───────────────────────── */
.article-body .lead {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 36px;
    padding-left: 24px;
    position: relative;
}
.article-body .lead::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 9999px;
    background-color: var(--accent, var(--plum));
}

/* ── CALLOUT BLOCK (vertical bar, flush, overflow hidden) ────────────── */
.article-body .callout {
    background-color: var(--warm-peach);
    padding: 24px 28px;
    border-radius: 8px;
    margin: 36px 0;
    position: relative;
    overflow: hidden;
}
.article-body .callout::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 9999px;
    background-color: var(--accent, var(--plum));
}
/* A callout can hold a whole section, not just a pull-quote, which is how the two
   home sharing sections are marked out. The heading keeps its size but loses the
   48px of air it would carry in the body flow, because the callout's own padding
   is already providing it. */
.article-body .callout > h2:first-child,
.article-body .callout > h3:first-child { margin-top: 0; }
.article-body .callout h2 { font-size: 22px; }
.article-body .callout p {
    font-size: 17px;
    font-weight: 600;
    color: var(--plum);
    margin-bottom: 0;
    line-height: 1.65;
}

/* Callouts that carry a question script rather than a single pull quote: a lead-in
   line, then a numbered list. September 2026. Additive only. The box itself, its
   warm-peach ground and its pill accent bar are set above and are unchanged, so
   the 17 posts using the single-paragraph form render exactly as before. */
/* A callout holding a whole section, not a pull-quote. Keeps the peach and the
   accent bar, but hands the type back to body weight and colour and puts air
   between paragraphs: the base .callout sets 600 weight in plum with no bottom
   margin, which reads well for one sentence and badly for six. The 19 existing
   short callouts are untouched. */
.article-body .callout--section p { font-weight: 400; color: var(--dark-gray); }
.article-body .callout--section p + p { margin-top: 16px; }

.article-body .callout ol,
.article-body .callout ul {
    margin: 14px 0 0;
    padding-left: 22px;
}
.article-body .callout li {
    font-size: 16px;
    font-weight: 400;
    color: var(--dark-gray);
    line-height: 1.65;
    margin-bottom: 12px;
}
.article-body .callout li:last-child {
    margin-bottom: 0;
}
/* The lead-in of each item is the question itself. Keep it in the audience accent
   so the questions can be picked out when someone is scanning. */
.article-body .callout li > strong:first-child {
    color: var(--accent, var(--plum));
    font-weight: 700;
}
/* Text after the list is body copy, not another lead-in. The sibling selector only
   matches callouts that contain a list, so the single-paragraph callouts on the
   other 17 posts keep the plum pull-quote styling set above. */
.article-body .callout ol ~ p,
.article-body .callout ul ~ p {
    font-size: 16px;
    font-weight: 400;
    color: var(--dark-gray);
    line-height: 1.65;
    margin: 14px 0 0;
}

/* Partners print these and hand them across a desk. Draw the box as an outline,
   since backgrounds are commonly dropped by print settings, and never let it
   break across a page. */
@media print {
    .article-body .callout {
        background-color: transparent;
        border: 1.5pt solid var(--plum);
        border-left-width: 4pt;
        padding: 10pt 12pt;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .article-body .callout::before {
        display: none;
    }
}

/* ── ARTICLE CTA BLOCK ───────────────────────────────────────────────── */
.article-cta {
    background-color: var(--plum);
    border-radius: 10px;
    padding: 40px 44px;
    margin-top: 56px;
    color: var(--white);
}
.article-cta .cta-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--coral);
    margin-bottom: 12px;
}
.article-cta h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 14px;
    line-height: 1.3;
}
.article-cta p {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 24px;
    line-height: 1.65;
}
.article-cta a.btn {
    display: inline-block;
    background-color: var(--coral);
    color: var(--white);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 32px;
    border-radius: 6px;
    transition: filter 0.2s;
    width: auto;
}
.article-cta a.btn:hover { filter: brightness(1.1); }

/* ── STAT BLOCKS (donors posts) ──────────────────────────────────────── */
.stat-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}
.stat-card {
    background-color: var(--warm-peach);
    border-top: 4px solid var(--accent, var(--coral));
    padding: 24px 22px;
    border-radius: 8px;
}
.stat-card .stat-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--plum);
    line-height: 1;
    margin-bottom: 8px;
}
.stat-card .stat-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-gray);
    line-height: 1.45;
}
.stat-card .stat-source {
    font-size: 12px;
    color: var(--dark-gray);
    opacity: 0.6;
    margin-top: 8px;
}

/* ── COMPARISON BLOCK (donors-02) ────────────────────────────────────── */
.comparison-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}
.comparison-card {
    padding: 28px 24px;
    border-radius: 8px;
}
.comparison-card.program {
    background-color: #f5f5f5;
    border-top: 4px solid #bbbbbb;
}
.comparison-card.infrastructure {
    background-color: var(--warm-peach);
    border-top: 4px solid var(--coral);
}
.comparison-card h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.comparison-card.program h4 { color: #888888; }
.comparison-card.infrastructure h4 { color: var(--plum); }
.comparison-card p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ── HERO STAT BLOCK (sponsors-01) ───────────────────────────────────── */
.hero-stat {
    text-align: center;
    background-color: var(--plum);
    color: var(--white);
    border-radius: 10px;
    padding: 48px 40px;
    margin: 40px 0;
}
.hero-stat .big-number {
    font-size: 72px;
    font-weight: 800;
    color: var(--coral);
    line-height: 1;
    display: block;
    margin-bottom: 12px;
}
.hero-stat .stat-desc {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: 0;
}
.hero-stat .stat-source {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-top: 12px;
    margin-bottom: 0;
}

/* ── BENEFIT ROW (sponsors-01) ───────────────────────────────────────── */
.benefit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 36px 0;
}
.benefit-card {
    background-color: var(--warm-peach);
    border-top: 4px solid var(--accent, var(--magenta));
    padding: 22px 20px;
    border-radius: 8px;
}
.benefit-card .benefit-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 14px;
    display: block;
    color: var(--accent, var(--magenta));
}
.benefit-card h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--plum);
    margin-bottom: 10px;
}
.benefit-card p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ── PERSONA BLOCK (sponsors-02) ─────────────────────────────────────── */
.persona-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin: 40px 0;
}
.persona-tile {
    background-color: var(--warm-peach);
    border-top: 4px solid var(--accent, var(--magenta));
    padding: 24px 20px;
    border-radius: 8px;
}
.persona-tile .persona-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 14px;
    display: block;
    color: var(--accent, var(--magenta));
}
.persona-tile h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--plum);
    margin-bottom: 10px;
}
.persona-tile p {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ── QUOTE BLOCK (sponsors-02) ───────────────────────────────────────── */
.quote-block {
    background-color: var(--plum);
    color: var(--white);
    border-radius: 10px;
    padding: 36px 40px;
    margin: 40px 0;
}
.quote-block blockquote {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--white);
    margin-bottom: 16px;
    font-style: normal;
}
.quote-block .quote-source {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
}

/* ── THREE COLUMN (partners-02) ──────────────────────────────────────── */
.three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 36px 0;
}
.three-column .col {
    background: var(--warm-peach);
    border-radius: 8px;
    padding: 24px 20px;
    border-top: 4px solid var(--accent, var(--plum));
}
.three-column .col-icon {
    width: 28px;
    height: 28px;
    color: var(--accent, var(--plum));
    display: block;
    margin-bottom: 12px;
}
.three-column .col h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--plum);
    margin-bottom: 8px;
}
.three-column .col p {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ── BLOG INDEX PAGE ─────────────────────────────────────────────────── */
.blog-index-hero {
    background-color: var(--warm-peach);
    padding: 80px 40px;
}
.blog-index-hero .hero-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.blog-index-hero .section-label { color: var(--coral); margin-bottom: 16px; }
.blog-index-hero h1 {
    font-size: 46px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.2;
    margin-bottom: 24px;
}
.blog-index-hero h1 span {
    color: var(--coral);
    display: block;
}
.blog-index-hero p {
    font-size: 18px;
    font-weight: 400;
    color: var(--dark-gray);
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 48px;
}

/* Filter bar */
.filter-bar {
    max-width: 1100px;
    margin: -40px auto 60px;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 10px 24px;
    border: 2px solid var(--coral);
    background-color: transparent;
    color: var(--coral);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Nunito', sans-serif;
}
.filter-btn:hover { background-color: rgba(251, 123, 68, 0.1); }
.filter-btn.active {
    background-color: var(--coral);
    color: var(--white);
}

/* Blog card grid */
.blog-section {
    background-color: var(--warm-peach);
    padding: 0 40px 100px;
}
.blog-container { max-width: 1100px; margin: 0 auto; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}
.blog-card {
    background-color: var(--white);
    border-top: 4px solid;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.blog-card-partners { border-top-color: var(--plum); }
.blog-card-donors   { border-top-color: var(--coral); }
.blog-card-sponsors { border-top-color: var(--magenta); }
.blog-image {
    height: 200px;
    overflow: hidden;
}
.blog-image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.blog-category {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.blog-category-partners { color: var(--plum); }
.blog-category-donors   { color: var(--coral); }
.blog-category-sponsors { color: var(--magenta); }
.blog-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--plum);
    margin-bottom: 12px;
    line-height: 1.4;
    text-decoration: none;
    display: block;
}
.blog-card a.blog-title { color: var(--plum); text-decoration: none; }
.blog-card a.blog-title:hover { color: var(--coral); }
.blog-excerpt {
    font-size: 15px;
    color: var(--dark-gray);
    line-height: 1.65;
    margin-bottom: 16px;
    flex-grow: 1;
}
.blog-read-more {
    color: var(--plum);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    margin-top: auto;
}
.blog-read-more::after { content: ''; position: absolute; inset: 0; }
.blog-read-more:hover { text-decoration: underline; }

/* Blog newsletter (plum bg) */
.blog-newsletter {
    background-color: var(--white);
    padding: 64px 40px 96px;
    text-align: center;
    border-top: 1px solid rgba(113, 51, 87, 0.12);
    max-width: 1100px;
    margin: 0 auto;
}
.newsletter-container { max-width: 600px; margin: 0 auto; }
.blog-newsletter h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--plum);
    margin-bottom: 12px;
}
.blog-newsletter p {
    font-size: 16px;
    color: var(--dark-gray);
    margin-bottom: 32px;
    line-height: 1.6;
}
/* Stay Connected uses the standard plum submit for consistency across the site. */
.blog-newsletter .hs-newsletter { text-align: center; }
.blog-newsletter .hs-newsletter .hs-form-field { text-align: left; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .article-hero { padding: 48px 20px 40px; }
    .article-hero h1 { font-size: 28px; }
    .article-body { padding: 40px 20px 60px; }
    .article-cta { padding: 28px 24px; }
    .stat-block { grid-template-columns: 1fr; }
    .comparison-block { grid-template-columns: 1fr; }
    .benefit-row { grid-template-columns: 1fr; }
    .persona-block { grid-template-columns: 1fr; }
    .three-column { grid-template-columns: 1fr; }
    .hero-stat .big-number { font-size: 52px; }
    .blog-index-hero { padding: 60px 20px; }
    .blog-index-hero h1 { font-size: 32px; }
    .filter-bar { padding: 0 20px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .blog-section { padding: 0 20px 80px; }
    .blog-newsletter { padding: 60px 20px; }
}
@media (max-width: 480px) {
    .blog-index-hero h1 { font-size: 26px; }
    .blog-grid { grid-template-columns: 1fr; }
    .filter-bar { padding: 0 16px; }
    .blog-section { padding: 0 16px 60px; }
    .blog-newsletter { padding: 48px 16px; }
    .blog-newsletter h3 { font-size: 22px; }
}

/* ── PROSE LINKS ─────────────────────────────────────────────────────── */
/* Blog posts load main.css and blog.css only. The rule that gives an article
   link its plum, .article-body a, lives in calculator.css, which the research
   and calculator pages load and the blog does not. So every in-text link here
   fell through to the browser default: blue unvisited and purple once visited,
   which is the purple hyperlink Candice reported.

   :not([class]) keeps this off buttons and any classed link in a post body,
   the same guard the markdown tables above use. :visited is stated explicitly
   rather than left to inherit, because a visited link is exactly the case that
   went wrong. */
.article-body a:not([class]),
.article-body a:not([class]):visited { color: var(--plum); font-weight: 700; }
.article-body a:not([class]):hover { color: var(--coral); }