/* ============================================================
   blog.css — Blog index + blog post styles for MapOutcomes
   Mirrors structural patterns from pricing.css and privacy-policy.css
   ============================================================ */

/* ---- Reset section defaults (match pricing/legal pattern) ---- */
section.blog-hero,
section.blog-section,
section.blog-index-hero {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
    animation: none;
}

/* Grid overlay — light lines on dark, dark lines on light */
section.blog-hero::before,
section.blog-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(255,255,255,0.02) 44px, rgba(255,255,255,0.02) 45px),
        repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(255,255,255,0.02) 44px, rgba(255,255,255,0.02) 45px);
    pointer-events: none;
    z-index: 0;
}

/* Light sections — dark grid lines */
section.blog-list-section::before {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(0,0,0,0.02) 44px, rgba(0,0,0,0.02) 45px),
        repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(0,0,0,0.02) 44px, rgba(0,0,0,0.02) 45px);
}

/* Blog post reading page — no grid texture behind the article; it never
   read as more than near-invisible margin decoration here (unlike the
   hero/card sections where it has other visual richness to sit among),
   so it's dropped rather than kept at a barely-perceptible opacity. */
section.blog-post-body::before {
    display: none;
}

/* Section backgrounds */
section.blog-hero          { position: relative; background: linear-gradient(135deg, var(--topographic-teal) 0%, var(--contour-green) 100%); padding: 0; }
section.blog-list-section  { position: relative; background: var(--parchment-cream); padding: clamp(60px, 8vh, 100px) 0 clamp(60px, 8vh, 100px); }
section.blog-post-body     { position: relative; background: var(--white); padding: clamp(48px, 6vh, 80px) 0 clamp(60px, 8vh, 100px); scroll-margin-top: 71px; }

/* ============================================================
   HERO (matches legal-hero / pricing-hero)
   ============================================================ */

.blog-hero {
    position: relative;
    min-height: 34vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 166, 97, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(10, 122, 140, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(45, 95, 63, 0.07) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(5, 15, 20, 0.15) 0%, rgba(5, 15, 20, 0.00) 45%, rgba(5, 15, 20, 0.30) 100%);
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    animation: meshDrift 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes meshDrift {
    0%   { background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%; }
    50%  { background-position: 100% 50%, 0% 100%, 100% 0%, 0% 0%; }
    100% { background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%; }
}

.blog-compass-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.07;
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: clamp(56px, 9vh, 100px) 24px clamp(44px, 6vh, 72px);
    max-width: 820px;
    width: 100%;
}

/* Photo hero variant — post's own cover photo as background instead of the
   gradient+compass treatment. Same 34vh min-height as .blog-hero/
   .blog-index-hero (kept consistent across blog.php and blog-post.php);
   only the content padding is reduced here since the photo, not the
   gradient mesh, carries the visual weight. */
.blog-post-hero--photo .blog-hero-content {
    padding: clamp(32px, 5vh, 64px) 24px clamp(24px, 4vh, 48px);
}

/* Smaller title in the photo variant — the 48px/54px size was sized for the
   taller 50vh gradient hero; at 38vh it reads oversized against the photo. */
.blog-post-hero--photo .blog-post-h1 {
    font-size: clamp(22px, 3.2vw, 36px);
}

.blog-post-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.blog-post-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 15, 20, 0.5);
    pointer-events: none;
}

.blog-h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.8vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    color: var(--white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.blog-post-h1 {
    font-size: clamp(28px, 4.2vw, 48px);
}

/* Scroll hint (reused from pricing/legal) */
.scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: scrollBounce 2.4s ease-in-out infinite;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.scroll-hint:hover { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.scroll-arrow {
    display: block;
    width: 18px;
    height: 18px;
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    transform: rotate(45deg);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; }
    50%      { transform: translateX(-50%) translateY(9px); opacity: 1; }
}

/* ============================================================
   BLOG CONTAINER
   ============================================================ */

.blog-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ============================================================
   BLOG INDEX — POST LIST
   ============================================================ */

.blog-index-header {
    background: none;
    border-bottom: none;
    padding: 0;
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(32px, 5vh, 48px);
}

.blog-index-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: rgba(201, 166, 97, 0.95);
    margin-bottom: 16px;
}

.blog-index-h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 12px;
    color: var(--charcoal);
    text-align: center;
}

.blog-index-sub {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--slate-gray);
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   BLOG INDEX — PHOTO HERO
   ============================================================ */

.blog-index-hero {
    position: relative;
    width: 100%;
    min-height: 34vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
    background: none;
}

.blog-index-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.blog-index-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat, always-dark tint (not a gradient) so the white title/sub stay
       readable regardless of how bright the underlying photo is — the hero
       text must read as white for every vertical, not just ones with a
       naturally dark photo. */
    background: rgba(5, 15, 20, 0.5);
    pointer-events: none;
}

.blog-index-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: clamp(32px, 5vh, 56px) 24px;
    max-width: 640px;
    width: 100%;
}

.blog-index-hero .blog-index-h1,
.blog-index-hero .blog-index-sub {
    color: var(--white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.blog-list-section .blog-container {
    max-width: 1480px;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.blog-card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(44, 53, 57, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(44, 53, 57, 0.14);
}

.blog-card-link-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.blog-card-body {
    padding: clamp(18px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.blog-card-dot {
    color: #8A7333;
    font-weight: 700;
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.2px;
    color: var(--charcoal);
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.blog-card:hover .blog-card-title {
    color: var(--topographic-teal);
}

.blog-card-readtime {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #646E73;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.blog-card-excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--slate-gray);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8A7333;
    background: rgba(138, 115, 51, 0.15);
    padding: 6px 14px;
    border-radius: 999px;
}

.blog-list-note {
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: #646E73;
    margin-top: 40px;
    margin-bottom: 0;
}

.blog-list-note a {
    color: var(--topographic-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 122, 140, 0.25);
    transition: border-color 0.2s ease;
}

.blog-list-note a:hover {
    border-bottom-color: var(--topographic-teal);
}

/* ============================================================
   BLOG POST BODY — long-form content
   ============================================================ */

/* Wraps meta + (optional photo credit) + article body in a single opaque
   white panel, so the grid background (section.blog-post-body::before)
   only ever shows in the margins around the text, never in the gaps
   between individual text blocks. Padding here is added on top of the
   780px text column, so the panel itself runs wider than 780px — the
   readable line inside it still measures 780px. Excludes .blog-post-cta
   (the end-of-article action card) on purpose; that card already has its
   own background. */
.blog-post-text-panel {
    max-width: 860px;
    margin: 0 auto;
    background: var(--white);
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Medium-style tag + dek + byline — sits above the article body, left-aligned
   to the same 780px text column, in place of the old white-on-photo meta
   line and back-link that used to live inside the hero itself. */
.blog-post-meta {
    margin: 0 0 40px;
    text-align: left;
}

.blog-post-tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* .blog-card-tag is the same pill used for category tags on the blog index
   cards — reused here (instead of the old plain-text .blog-eyebrow) so the
   category label reads as a distinct tag rather than competing with the
   plain-text byline below it for the same line. */
.blog-post-tag {
    margin-bottom: 0;
}

/* Same pill sizing as .blog-card-tag, but in the teal used for interactive
   links/actions elsewhere on the page (not the tag's gold) so it reads as a
   navigation action sitting beside a category label, not a second tag. */
.blog-post-back-pill {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--topographic-teal);
    background: rgba(10, 122, 140, 0.08);
    border: 1px solid rgba(10, 122, 140, 0.25);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-post-back-pill:hover {
    background: rgba(10, 122, 140, 0.14);
    border-color: var(--topographic-teal);
    color: var(--topographic-teal);
    text-decoration: none;
}

.blog-post-dek {
    font-family: var(--font-body);
    font-size: clamp(19px, 2.2vw, 22px);
    font-weight: 400;
    color: var(--slate-gray);
    line-height: 1.55;
    margin: 0 0 18px;
}

.blog-post-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #646E73;
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mist);
}

.blog-post-content {
    position: relative;
}

.blog-post-content h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    color: var(--charcoal);
    margin: 48px 0 18px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.blog-post-content h2:first-child {
    margin-top: 0;
}

.blog-post-content h3 {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 700;
    color: var(--charcoal);
    margin: 32px 0 12px;
}

.blog-post-content p {
    font-family: var(--font-body);
    font-size: 17px;
    color: #3D4F58;
    line-height: 1.78;
    margin: 0 0 20px;
    text-align: justify;
}

/* .blog-lede (first-paragraph emphasis) is intentionally unstyled here — it
   renders as a plain .blog-post-content p now. 57 of 58 existing posts'
   body_html still carry the class inline, but giving the first paragraph its
   own bold/20px treatment duplicated the job .blog-post-dek now does right
   above it (see .blog-post-meta): two large emphasized blocks stacked back
   to back with only a thin divider between them, competing for the same
   "this is the important line" attention instead of a clear single hand-off
   from dek to body copy. */

.blog-post-content ul,
.blog-post-content ol {
    font-family: var(--font-body);
    font-size: 17px;
    color: #3D4F58;
    line-height: 1.78;
    margin: 0 0 22px;
    padding-left: 24px;
}

.blog-post-content li {
    margin-bottom: 10px;
}

.blog-post-content strong {
    color: var(--charcoal);
    font-weight: 700;
}

.blog-post-content em {
    color: var(--slate-gray);
}

.blog-post-content a {
    color: var(--topographic-teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 122, 140, 0.25);
    transition: border-color 0.2s ease;
}

.blog-post-content a:hover {
    border-bottom-color: var(--topographic-teal);
}

/* "Text box" callout inserted via the admin body editor's Text Box toolbar button
   (createUpdateBlogPostModalBody.php) — a plain <blockquote>, styled here so it renders as a
   pulled-out box rather than the browser's unstyled default indent. */
.blog-post-content blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    background: rgba(10, 122, 140, 0.06);
    border-left: 3px solid var(--topographic-teal);
    border-radius: 6px;
}

.blog-post-content blockquote p {
    margin: 0;
    font-size: 17px;
    text-align: left;
}

.blog-post-content hr {
    border: none;
    border-top: 1px solid #C3CBD1;
    margin: 44px 0;
}

/* In-body images — inserted by insertBlogPostImages() (blogImageSources.php) in place of
   [[image:N]] tokens in body_html. Full text-column width (no breakout past 780px), but
   capped to a 16/9 aspect ratio (matching .blog-card-image's thumbnail ratio elsewhere on
   this page) instead of the source photo's native ~3:2 — that extra height (e.g. 780x520)
   was what made a full-width photo read as an oversized slab, not the width itself. */
.blog-post-inline-image {
    margin: 36px auto;
}

.blog-post-inline-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    object-fit: cover;
}

.blog-post-inline-image .blog-post-image-credit {
    padding: 0 20px;
}

/* Stylized list of "questions a coordinator can't answer" */
.blog-questions {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 8px 0 24px !important;
    border-left: 3px solid var(--compass-gold);
}

.blog-questions li {
    padding: 6px 0 6px 20px;
    font-style: italic;
    color: var(--charcoal) !important;
    font-size: 17px;
    line-height: 1.65;
}

.blog-post-footnote {
    margin-top: 32px !important;
    padding-top: 24px;
    border-top: 1px solid var(--mist);
    font-size: 14.5px !important;
    color: #646E73 !important;
    line-height: 1.7 !important;
}

/* Hero CTA buttons (matching home.css / pricing.css) */
.btn-hero-primary {
    background: var(--compass-gold);
    color: #1E1E1E;
    padding: 16px 44px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 20px rgba(201, 166, 97, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn-hero-primary:hover {
    background: var(--gold-hover-bg);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(201, 166, 97, 0.55);
    color: #1E1E1E;
    text-decoration: none;
}

.btn-hero-ghost {
    background: transparent;
    color: var(--white);
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.60);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.2px;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
    transform: translateY(-3px);
    color: var(--white);
    text-decoration: none;
}

/* Light-background ghost button variant for the CTA on white */
.btn-hero-ghost--on-light {
    color: var(--topographic-teal);
    border-color: rgba(10, 122, 140, 0.45);
}

.btn-hero-ghost--on-light:hover {
    background: rgba(10, 122, 140, 0.08);
    border-color: var(--topographic-teal);
    color: var(--topographic-teal);
}

/* End-of-article card — was a "See MapOutcomes in Action" sales pitch box;
   now holds the post's exit actions (leave to the blog index, or convert via
   Connect/Demo) instead, in the same card chrome. */
.blog-post-cta {
    max-width: 780px;
    margin: 56px auto 0;
    padding: clamp(28px, 3.4vw, 40px);
    background: linear-gradient(135deg, rgba(10, 122, 140, 0.05) 0%, rgba(45, 95, 63, 0.04) 100%);
    border: 1px solid rgba(10, 122, 140, 0.18);
    border-radius: 18px;
}

/* Reuses .btn-hero-primary / .btn-hero-ghost--on-light — the same gold-fill +
   teal-outline pairing pricing.php and roi-calculator.php use for their CTAs
   — rather than inventing new button styling here. */
.blog-post-end-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .blog-hero-content {
        padding: 44px 20px 36px;
    }

    .blog-post-text-panel {
        padding: 0 20px;
    }

    .blog-post-hero--photo .blog-hero-content {
        padding: 28px 20px 24px;
    }

    .blog-card-body {
        padding: 18px 18px;
    }

    .blog-index-header {
        margin-bottom: 24px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol {
        font-size: 16px;
    }

    .blog-post-end-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-post-end-actions .btn-hero-primary,
    .blog-post-end-actions .btn-hero-ghost {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   LARGE SCREENS — blog post reading column
   The clamp()-based title/heading sizes above all stop growing
   around an ~1980px viewport (their vw component hits its cap), and
   the container/panel widths are flat px values with no scaling at
   all. Below that width everything is still actively scaling, so it
   reads fine; above it, everything freezes while the viewport keeps
   growing, which is what makes the reading column look like a
   shrinking island on a 4K/ultrawide screen. This picks growth back
   up right where the clamps above plateau, scaling the column width,
   hero title, and article type together — rather than just widening
   the text column, which would push line length past a readable
   measure. Threshold raised from 1140px to 1980px 2026-08-06 — 1140px
   was catching ordinary maximized laptop/desktop browser widths
   (1280-1536px range), making body text/headings look oversized on
   completely typical screens, not just genuinely wide monitors.
   ============================================================ */
@media (min-width: 1980px) {
    .blog-container {
        max-width: 1320px;
    }

    .blog-post-text-panel {
        max-width: 1000px;
        padding: 0 60px;
    }

    .blog-hero-content {
        max-width: 960px;
    }

    .blog-post-h1 {
        font-size: 58px;
    }

    .blog-post-hero--photo .blog-post-h1 {
        font-size: 42px;
    }

    .blog-post-dek {
        font-size: 24px;
    }

    .blog-post-content h2 {
        font-size: 36px;
    }

    .blog-post-content h3 {
        font-size: 22px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol,
    .blog-questions li {
        font-size: 19px;
    }

    .blog-post-cta {
        max-width: 880px;
    }
}

/* ============================================================
   VERY LARGE SCREENS — 4K / ultrawide
   Same rationale as the equivalent block in home.css: the 1980px
   tier stops growing around ~2560px. The hero/container and heading
   sizes get another bump here; the reading column
   (.blog-post-text-panel) and body copy only grow slightly — a
   Medium-style reading column shouldn't widen to fill a 4K display,
   that would blow past a comfortable line length.
   ============================================================ */
@media (min-width: 2560px) {
    .blog-container {
        max-width: 1680px;
    }

    .blog-post-text-panel {
        max-width: 1080px;
        padding: 0 70px;
    }

    .blog-hero-content {
        max-width: 1160px;
    }

    .blog-post-h1 {
        font-size: 68px;
    }

    .blog-post-hero--photo .blog-post-h1 {
        font-size: 48px;
    }

    .blog-post-dek {
        font-size: 26px;
    }

    .blog-post-content h2 {
        font-size: 40px;
    }

    .blog-post-content h3 {
        font-size: 24px;
    }

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol,
    .blog-questions li {
        font-size: 20px;
    }

    .blog-post-cta {
        max-width: 960px;
    }
}

/* ============================================================
   ACCESSIBILITY — Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    /* Disable mesh gradient drift animation */
    .blog-hero-overlay {
        animation: none;
    }

    /* Disable scroll-bounce arrow animation */
    .scroll-hint {
        animation: none;
    }
}

/* ============================================================
   DB-backed single post — image attribution (Openverse-sourced
   images only, per the design doc's "attribution only where
   required")
   ============================================================ */

.blog-post-image-credit {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-top: 8px;
}