/* ==========================================================================
   Avira Dental — Long-form article layer
   --------------------------------------------------------------------------
   Loaded only when a post is rendered on the alternative template
   (page-templates/template-blog-post.php). The default single view never sees
   this file.

   Depends on blog.css, which is enqueued alongside it: the wrapper carries
   `cv-blog cv-post`, so the tokens, the buttons, the card and the closing CTA
   all come from there and are not repeated here.

   ISOLATION CONTRACT
   Every selector starts with `.cv-post`. That class exists nowhere else in the
   project — `.cv-post-card` in blog.css is a different class token and cannot
   be matched by `.cv-post`. Nothing here can reach Elementor, hello-elementor
   or another family, and nothing outside can reach in.

   The prose rules deliberately re-establish margins on p / h2 / h3 / ul, which
   the Elementor global kit zeroes. Inside prose the element order belongs to the
   author, not to the template, so a flex container's `gap` cannot know which
   pair of siblings needs which space — margin is the correct tool here and only
   here. `.cv-post .cv-prose :where(x)` is (0,2,0) and beats the kit's
   `.elementor-kit-35 p` (0,1,1) without `!important`.
   ========================================================================== */

/* ==========================================================================
   1. Page shell
   ========================================================================== */
.cv-post {
    background: var(--brand-white);

    /* The site header, which Elementor pins to the top on every breakpoint
       ("sticky":"top", offset 0). Measured at 1440px: 90px tall. Change this
       one value if the header's height changes — every anchor is derived from
       it, so a heading can never land behind the header.                     */
    --cv-post-header: 90px;
    --cv-post-anchor-top: calc(var(--cv-post-header) + 1.5rem);

    /* The reading column. .cv-blog__container adds the page gutter on top, so
       the content box lands on exactly this number.                          */
    --cv-post-measure: 980px;
}

/* Breadcrumb and article share one centred column, so the trail sits over the
   text it belongs to rather than over the full 1440 container.               */
.cv-post .cv-post__crumbs,
.cv-post .cv-post__layout {
    max-width: calc(var(--cv-post-measure) + var(--gutter) * 2);
    margin-inline: auto;
}

.cv-post .cv-post__crumbs {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.cv-post .cv-post__layout {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.cv-post .cv-post__article {
    min-width: 0;
}

/* ==========================================================================
   2. Contents
   --------------------------------------------------------------------------
   A native <details> accordion above the body. No JavaScript, no ARIA to keep
   in sync, and it works before any script loads — the first rule of ARIA is to
   use the element that already does the job.

   Open by default: a reader who arrived from a search result is usually after
   one section, not the top of the article.
   ========================================================================== */
.cv-post .cv-post__toc {
    background: var(--brand-white);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0 0 var(--space-7);
}

.cv-post .cv-post__toc-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
}

.cv-post .cv-post__toc-head::-webkit-details-marker {
    display: none;
}

.cv-post .cv-post__toc-head:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -3px;
}

.cv-post .cv-post__toc-icon {
    display: flex;
    color: var(--brand-primary);
    flex: 0 0 auto;
}

.cv-post .cv-post__toc-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}

.cv-post .cv-post__toc-label {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-dark);
}

.cv-post .cv-post__toc-meta {
    font-family: var(--ff-ui);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--brand-meta);
}

/* The chevron glyph points right; rotate it down when closed, up when open. */
.cv-post .cv-post__toc-chevron {
    display: flex;
    color: var(--brand-primary);
    flex: 0 0 auto;
    transform: rotate(90deg);
    transition: transform var(--dur-fast) ease;
}

.cv-post .cv-post__toc[open] .cv-post__toc-chevron {
    transform: rotate(-90deg);
}

.cv-post .cv-post__toc-body {
    border-top: 1px solid var(--brand-border);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* Two columns, filled row by row: entry 1 sits beside entry 2, not above
   entry 10. Multi-column layout would fill down the first column instead.    */
.cv-post .cv-post__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .125rem var(--space-6);
}

@media (max-width: 768px) {
    .cv-post .cv-post__toc-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cv-post .cv-post__toc-list a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-height: 32px;
    padding-block: 6px;
    font-family: var(--ff-ui);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--brand-primary);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    transition: color var(--dur-fast) ease;
}

.cv-post .cv-post__toc-list a:hover {
    color: var(--brand-dark);
}

.cv-post .cv-post__toc-list a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.cv-post .cv-post__toc-list a[aria-current="location"] {
    color: var(--brand-dark);
    font-weight: 600;
}

.cv-post .cv-post__toc-num {
    flex: 0 0 auto;
    min-width: 1.75em;
    text-align: right;
    color: var(--brand-meta);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
/* ==========================================================================
   3. Article header
   ========================================================================== */
.cv-post .cv-post__eyebrow {
    font-family: var(--ff-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--brand-secondary-text);
    margin: 0 0 var(--space-3);
}

.cv-post .cv-post__title {
    font-family: var(--ff-heading);
    font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-dark);
    margin: 0 0 var(--space-5);
    text-wrap: balance;
    /* One published title reads "Dental Implantsin Australia" — a missing space
       plus two non-breaking spaces make a 416px token that no 350px column can
       wrap. That is a content bug, but a title must never push the page.      */
    overflow-wrap: break-word;
}

.cv-post .cv-post__standfirst {
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    line-height: 1.55;
    color: #575654;
    margin: 0 0 var(--space-6);
    text-wrap: pretty;
}

/* ---- byline: the authority signal, above the reading, not below it ------- */
.cv-post .cv-post__byline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-top: 1px solid var(--brand-hairline);
    border-bottom: 1px solid var(--brand-hairline);
    margin: 0 0 var(--space-7);
}

.cv-post .cv-post__byline-avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: var(--brand-bg-olive);
    border: 1px solid var(--brand-hairline);
}

.cv-post .cv-post__byline-name {
    font-family: var(--ff-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-dark);
    margin: 0 0 .125rem;
}

.cv-post .cv-post__byline-name a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cv-post .cv-post__byline-name a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

.cv-post .cv-post__byline-date {
    font-family: var(--ff-ui);
    font-size: 13px;
    color: var(--brand-meta);
    margin: 0;
}

/* ==========================================================================
   4. Prose
   --------------------------------------------------------------------------
   :where() keeps every default at specificity 0 inside the (0,2,0) wrapper, so
   a component further in can override any of it without a fight.
   ========================================================================== */
.cv-post .cv-prose {
    font-size: 18px;
    line-height: 1.65;
    color: var(--brand-body);
    overflow-wrap: break-word;
    hyphens: auto;
}

.cv-post .cv-prose :where(h2, h3, h4, h5, h6) {
    font-family: var(--ff-heading);
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.2;
    text-wrap: balance;
    /* the anchor must not park the heading behind the sticky site header */
    scroll-margin-top: var(--cv-post-anchor-top);
}

.cv-post .cv-prose :where(h2) {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    margin: var(--space-7) 0 var(--space-4);
}

.cv-post .cv-prose :where(h3) {
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    margin: var(--space-6) 0 var(--space-2);
}

.cv-post .cv-prose :where(h4, h5, h6) {
    font-size: 1.125rem;
    margin: var(--space-5) 0 var(--space-2);
}

.cv-post .cv-prose :where(p) {
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
}

.cv-post .cv-prose :where(strong) {
    font-weight: 600;
    color: var(--brand-dark);
}

.cv-post .cv-prose :where(em) {
    font-style: italic;
}

.cv-post .cv-prose :where(small) {
    font-size: .875em;
    color: var(--brand-meta);
}

.cv-post .cv-prose :where(mark) {
    background: var(--brand-bg-olive);
    color: var(--brand-dark);
    padding: .05em .25em;
    border-radius: 4px;
}

.cv-post .cv-prose :where(ul, ol) {
    margin: 0 0 var(--space-4);
    padding-inline-start: 1.5rem;
}

.cv-post .cv-prose :where(li) {
    margin-bottom: .5rem;
}

.cv-post .cv-prose :where(li)::marker {
    color: var(--brand-secondary);
}

.cv-post .cv-prose :where(li > ul, li > ol) {
    margin-block: .5rem 0;
}

.cv-post .cv-prose :where(dl) {
    margin: 0 0 var(--space-4);
}

.cv-post .cv-prose :where(dt) {
    font-weight: 600;
    color: var(--brand-dark);
    margin-top: var(--space-3);
}

.cv-post .cv-prose :where(dd) {
    margin: .25rem 0 0 1.5rem;
}

.cv-post .cv-prose :where(hr) {
    border: 0;
    border-top: 1px solid var(--brand-hairline);
    margin-block: var(--space-7);
}

.cv-post .cv-prose :where(a) {
    color: var(--brand-secondary-text);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
}

.cv-post .cv-prose :where(a:hover) {
    color: var(--brand-primary);
}

.cv-post .cv-prose :where(a:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.cv-post .cv-prose :where(a:visited) {
    color: #6E4E2E;
}

.cv-post .cv-prose :where(abbr[title]) {
    text-decoration: underline dotted;
    cursor: help;
}

.cv-post .cv-prose :where(sub, sup) {
    font-size: .75em;
    line-height: 0;
}

/* ---- media -------------------------------------------------------------- */
.cv-post .cv-prose :where(figure) {
    margin: 0 0 var(--space-5);
}

.cv-post .cv-prose :where(img, video, iframe) {
    max-width: 100%;
    border-radius: var(--radius-md);
}

.cv-post .cv-prose :where(img, video) {
    height: auto;
    display: block;
}

.cv-post .cv-prose :where(iframe) {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
}

.cv-post .cv-prose :where(figcaption) {
    font-size: 15px;
    color: var(--brand-meta);
    margin-top: .6rem;
}

.cv-post .cv-prose :where(blockquote) {
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--brand-bg-cream);
    border-left: 3px solid var(--brand-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--brand-dark);
}

/* ---- code --------------------------------------------------------------- */
.cv-post .cv-prose :where(:not(pre) > code),
.cv-post .cv-prose :where(kbd),
.cv-post .cv-prose :where(samp) {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: var(--brand-bg-olive);
    padding: .1em .35em;
    border-radius: 4px;
}

.cv-post .cv-prose :where(pre) {
    background: var(--brand-bg-cream);
    border: 1px solid var(--brand-border);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}

.cv-post .cv-prose :where(pre) code {
    background: none;
    padding: 0;
}

/* ---- tables: the heavy element in these articles ------------------------ */
.cv-post .cv-prose :where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin: 0 0 var(--space-4);
}

/* A wide cost table must scroll inside itself, never push the page sideways.
   overscroll-behavior stops the swipe from chaining to the document once the
   table reaches its end.                                                     */
.cv-post .cv-prose :where(.cost-table-wrap, .table-wrap, figure.wp-block-table) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 0 0 var(--space-4);
}

.cv-post .cv-prose :where(th) {
    text-align: start;
    font-family: var(--ff-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-primary);
    border-bottom: 1px solid var(--brand-border);
    padding: .7rem .8rem;
    vertical-align: bottom;
}

.cv-post .cv-prose :where(td) {
    border-bottom: 1px solid var(--brand-border);
    padding: .85rem .8rem;
    vertical-align: top;
}

.cv-post .cv-prose :where(tbody th) {
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
    color: var(--brand-dark);
    vertical-align: top;
}

.cv-post .cv-prose :where(caption) {
    caption-side: bottom;
    text-align: start;
    font-size: 15px;
    color: var(--brand-meta);
    padding-top: .7rem;
}

/* Prices line up only with tabular figures. */
.cv-post .cv-prose :where(.range, .price) {
    font-family: var(--ff-ui);
    font-weight: 600;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cv-post .cv-prose :where(td .note, th .note) {
    display: block;
    font-size: 14px;
    color: var(--brand-meta);
    margin-top: .2rem;
}

/* ==========================================================================
   5. Editorial blocks
   --------------------------------------------------------------------------
   The published posts each invented their own class names for these — one says
   .tldr-block, another .tldr-box. Both are mapped here so no article has to be
   rewritten to pick up the treatment.
   ========================================================================== */
.cv-post .cv-prose :where(.tldr-box, .tldr-block, .key-takeaways) {
    background: var(--brand-bg-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-6);
    margin: 0 0 var(--space-6);
}

.cv-post .cv-prose :where(.tldr-label) {
    font-family: var(--ff-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-secondary-text);
    margin: 0 0 .875rem;
}

.cv-post .cv-prose :where(.tldr-box ul, .tldr-block ul) {
    margin: 0;
}

/* Callouts. Severity is never colour alone: each keeps its label. */
.cv-post .cv-prose :where(.callout, .avira-callout) {
    background: #EEF1EC;
    border: 1px solid #CBD5C7;
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-5);
}

.cv-post .cv-prose :where(.callout.gold, .callout--warn, .callout.warning) {
    background: #FBF1E8;
    border-color: #E2C4A2;
}

.cv-post .cv-prose :where(.callout-title) {
    font-family: var(--ff-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3B4A39;
    margin: 0 0 .375rem;
}

.cv-post .cv-prose :where(.callout.gold .callout-title, .callout--warn .callout-title) {
    color: #7A5218;
}

.cv-post .cv-prose :where(.callout p:last-child, .avira-callout p:last-child) {
    margin-bottom: 0;
}

/* Number band. */
.cv-post .cv-prose :where(.stat-band) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    background: var(--brand-bg-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: 0 0 var(--space-5);
    text-align: center;
}

.cv-post .cv-prose :where(.stat-num) {
    font-family: var(--ff-heading);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

.cv-post .cv-prose :where(.stat-label) {
    font-family: var(--ff-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand-meta);
    margin-top: .5rem;
}

@media (max-width: 560px) {
    .cv-post .cv-prose :where(.stat-band) {
        grid-template-columns: minmax(0, 1fr);
        text-align: start;
    }

    .cv-post .cv-prose :where(.stat-num) {
        font-size: 2rem;
    }
}

/* FAQ — native <details>, no JavaScript. */
.cv-post .cv-prose :where(details) {
    background: var(--brand-bg-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0 0 .75rem;
}

.cv-post .cv-prose :where(summary) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-family: var(--ff-ui);
    font-size: 17px;
    font-weight: 600;
    color: var(--brand-dark);
    list-style: none;
}

.cv-post .cv-prose summary::-webkit-details-marker {
    display: none;
}

.cv-post .cv-prose :where(summary):focus-visible {
    outline: var(--focus-ring);
    outline-offset: -3px;
}

/* The marker is drawn in CSS, so no icon font is needed for it. */
.cv-post .cv-prose :where(summary)::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(var(--brand-primary), var(--brand-primary)) center/14px 2px no-repeat,
        linear-gradient(var(--brand-primary), var(--brand-primary)) center/2px 14px no-repeat;
    transition: transform var(--dur-fast) ease;
}

.cv-post .cv-prose details[open] :where(summary)::after {
    transform: rotate(45deg);
}

.cv-post .cv-prose :where(details > div, details > p) {
    padding: 0 var(--space-5) var(--space-4);
    margin: 0;
}

/* ==========================================================================
   6. Article footer
   ========================================================================== */
.cv-post .cv-post__disclaimer {
    border-top: 1px solid var(--brand-hairline);
    padding-top: var(--space-5);
    margin: var(--space-6) 0 var(--space-6);
    font-size: 13px;
    line-height: 1.65;
    color: var(--brand-meta);
}

/* ---- author box ---------------------------------------------------------
   On a 980px column a row of four full-width paragraphs has no hierarchy —
   label, name, bio and link all read at the same weight and the same measure.
   The grid below gives the portrait its own column, stacks the identity block
   tight, and caps the bio at a readable measure instead of stretching it into
   a thin ribbon.
   ------------------------------------------------------------------------- */
.cv-post .cv-post__author {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    background: var(--brand-bg-cream);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.cv-post .cv-post__author-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: var(--brand-bg-olive);
}

.cv-post .cv-post__author-body {
    min-width: 0;
}

.cv-post .cv-post__author-label {
    font-family: var(--ff-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-secondary-text);
    margin: 0 0 .5rem;
}

.cv-post .cv-post__author-name {
    font-family: var(--ff-heading);
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-dark);
    margin: 0;
}

.cv-post .cv-post__author-role {
    font-family: var(--ff-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-primary);
    margin: .25rem 0 0;
}

.cv-post .cv-post__author-sep {
    color: var(--brand-secondary);
    padding-inline: .25rem;
}

/* The registration line. Demoted by size, never by contrast: --brand-meta is
   5.08:1 on cream, which clears 1.4.3 at this size.                         */
.cv-post .cv-post__author-reg {
    font-family: var(--ff-ui);
    font-size: 13px;
    line-height: 1.5;
    color: var(--brand-meta);
    margin: .5rem 0 0;
    padding-top: .625rem;
    border-top: 1px solid var(--brand-hairline);
}

.cv-post .cv-post__author-regno {
    color: var(--brand-meta);
    font-variant-numeric: tabular-nums;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    white-space: nowrap;
}

.cv-post .cv-post__author-regno:hover {
    color: var(--brand-primary);
}

.cv-post .cv-post__author-regno:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.cv-post .cv-post__author-bio {
    font-size: 16px;
    line-height: 1.6;
    max-width: 62ch;
    margin: .875rem 0 0;
}

.cv-post .cv-post__author-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-top: .375rem;
    font-family: var(--ff-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cv-post .cv-post__author-link .cv-blog__icon {
    transition: transform var(--dur-fast) ease;
}

.cv-post .cv-post__author-link:hover .cv-blog__icon {
    transform: translateX(3px);
}

.cv-post .cv-post__author-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .cv-post .cv-post__author {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .cv-post .cv-post__author-avatar {
        width: 72px;
        height: 72px;
    }
}

/* ==========================================================================
   7. Keep reading + closing CTA
   ========================================================================== */
.cv-post .cv-post__related {
    background: var(--brand-bg-cream);
    border-top: 1px solid var(--brand-hairline);
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}

.cv-post .cv-post__related-title {
    font-family: var(--ff-heading);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-dark);
    margin: 0 0 var(--space-6);
}

/* The related cards sit on cream, where a shadow reads as dirt. */
.cv-post .cv-post__related .cv-post-card {
    border: 1px solid var(--brand-border);
    box-shadow: none;
}

.cv-post .cv-post__related .cv-post-card:hover {
    box-shadow: var(--elev-2);
}

/* The closing CTA continues the cream band that "Keep reading" opens, so the
   two read as one closing section rather than two slabs on white. Full-bleed,
   which is why it wraps the container instead of being one.                  */
.cv-post .cv-post__cta-band {
    background: var(--brand-bg-cream);
    border-top: 1px solid var(--brand-hairline);
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

/* The band opens the cream itself when "Keep reading" is not there — a post
   with no siblings still gets a closing section rather than a bare box.      */
.cv-post .cv-post__related + .cv-post__cta-band {
    border-top: 0;
}

/* The gap above the CTA is the band's padding, never the box's margin: with a
   zero padding-top that margin collapses out of the band and reopens a strip
   of white between the two cream sections.                                   */
.cv-post .cv-post__cta-band .cv-blog__cta {
    margin-top: 0;
}

/* ==========================================================================
   8. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    .cv-post .cv-post__toc-list a,
    .cv-post .cv-prose :where(summary)::after {
        transition: none;
    }
}