/* ============================================================
   HTP Motorsport — Blog (editorial layer)
   Loaded only on blog pages, the homepage teaser, service-page
   "Further reading" and /reviews/. Builds on main.css tokens:
   dark surfaces, thin Oxanium headlines, Sarabun body, hairlines,
   corner-bracket frames, square corners. Meta lines (category ·
   date · read time) sit below headlines — never above as labels.
   ============================================================ */

/* ---------- Masthead ---------- */
.blog-masthead {
    background: var(--color-bg);
    padding-top: clamp(var(--space-8), 6vw, var(--space-16));
    border-bottom: 1px solid var(--color-line);
}
.blog-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
    font-size: .82rem; font-weight: 400; color: var(--color-ink-muted);
    margin-bottom: var(--space-8);
}
.blog-crumbs a { color: var(--color-ink-muted); text-decoration: none; }
.blog-crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-navy-light); }
.blog-crumbs [aria-current="page"] { color: var(--color-ink); }
.blog-masthead__grid {
    display: grid; gap: var(--space-8); align-items: end;
    padding-bottom: var(--space-12);
}
@media (min-width: 1024px) {
    .blog-masthead__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); }
}
.blog-masthead__title {
    font-size: clamp(2.6rem, 5vw + 1rem, 5.25rem); font-weight: 300; line-height: 1.02;
    letter-spacing: -.03em; margin: 0; max-width: 15ch;
}
.blog-masthead__page { display: block; margin-top: var(--space-3); font-size: .32em; letter-spacing: 0; color: var(--color-ink-muted); }
.blog-masthead__dek { font-size: 1.08rem; font-weight: 400; line-height: 1.6; color: rgba(242, 241, 238, .8); margin-bottom: var(--space-6); }
.blog-masthead__count { font-family: var(--font-display); font-size: .85rem; color: var(--color-navy-light); margin: 0; }
.blog-masthead--compact .blog-masthead__title { font-size: clamp(2.2rem, 3vw + 1rem, 3.75rem); max-width: 22ch; margin-bottom: var(--space-4); }
.blog-masthead--compact { padding-bottom: var(--space-12); }
.blog-masthead--compact .blog-masthead__dek { margin-bottom: 0; }

/* ---------- Search ---------- */
.blog-search { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-line-dark); max-width: 520px; transition: border-color var(--transition); }
.blog-search:focus-within { border-color: var(--color-navy-light); }
.blog-search input {
    flex: 1; min-width: 0; background: transparent; border: 0; padding: .9rem 0; font-size: 1rem; color: var(--color-ink);
}
.blog-search input:focus { outline: none; }
.blog-search input::-webkit-search-cancel-button { filter: invert(1); }
.blog-search__button {
    background: none; border: 0; cursor: pointer; padding: 0 0 0 var(--space-4);
    font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-navy-light); min-height: 44px;
}
.blog-search__button:hover { color: var(--color-ink); }
.blog-search-results .blog-search { margin-top: 0; }
.blog-masthead--compact .blog-search { margin-top: var(--space-6); }

/* ---------- Topic navigation ---------- */
.blog-topics { border-top: 1px solid var(--color-line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.blog-topics::-webkit-scrollbar { display: none; }
.blog-topics__list { display: flex; gap: var(--space-8); white-space: nowrap; }
.blog-topics__list a {
    display: inline-block; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 500; font-size: .82rem;
    letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent; transition: color var(--transition), box-shadow var(--transition);
}
.blog-topics__list a:hover { color: var(--color-ink); }
.blog-topics__list a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-navy-light); }
@media (min-width: 1024px) {
    /* Desktop: wrap instead of scrolling so every topic is visible. */
    .blog-topics { overflow: visible; }
    .blog-topics__list { flex-wrap: wrap; column-gap: var(--space-6); white-space: normal; }
}

/* ---------- Media (images + branded fallback) ---------- */
.blog-media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-paper); }
.blog-media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.94) saturate(1.02);
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease-out;
}
.blog-media--fallback {
    display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.25rem, 3vw, 2rem);
    background-color: var(--color-surface-dark); border-top: 2px solid var(--color-navy);
}
.blog-fallback__grid {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 48px);
}
.blog-fallback__subject {
    position: relative; font-family: var(--font-display); font-weight: 300; line-height: 1; letter-spacing: -.02em;
    font-size: clamp(2rem, 4.5vw, 3.75rem); color: var(--color-ink);
}
.blog-fallback__mark {
    position: relative; margin-top: var(--space-3); font-family: var(--font-display); font-size: .72rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--color-navy-light);
}

/* ---------- Cards ---------- */
.blog-card { position: relative; display: flex; flex-direction: column; }
.blog-card__media { display: block; position: relative; text-decoration: none; }
.blog-card:hover .blog-media img, .blog-card:focus-within .blog-media img { transform: scale(1.035); filter: brightness(1) saturate(1.05); }
.blog-card__body { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.blog-card__title { font-size: clamp(1.2rem, .5vw + 1rem, 1.45rem); font-weight: 400; line-height: 1.22; margin: 0; letter-spacing: -.005em; }
.blog-card__title a {
    color: var(--color-ink); text-decoration: none;
    background-image: linear-gradient(var(--color-navy-light), var(--color-navy-light));
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
    transition: background-size 350ms ease-out;
}
.blog-card:hover .blog-card__title a, .blog-card__title a:focus-visible { background-size: 100% 1px; }
.blog-card__excerpt {
    font-size: .98rem; font-weight: 400; line-height: 1.6; margin: 0; color: var(--color-ink-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__more {
    align-self: flex-start; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-navy-light); text-decoration: none; padding: var(--space-2) 0; margin-top: var(--space-2);
}
.blog-card__more span { display: inline-block; transition: transform var(--transition); }
.blog-card__more:hover span { transform: translateX(4px); }

.blog-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0; max-width: none;
    font-size: .8rem; font-weight: 400; color: rgba(242, 241, 238, .62);
}
.blog-meta__cat { color: var(--color-navy-light); font-weight: 600; text-decoration: none; position: relative; z-index: 1; }
.blog-meta__cat:hover { text-decoration: underline; }
.blog-meta__sep { opacity: .35; }

/* Feature (page 1 lead story) */
.blog-lead { padding: var(--space-12) 0 var(--space-4); }
.blog-card--feature { display: grid; gap: var(--space-6); }
.blog-card--feature .blog-media { aspect-ratio: 3 / 2; }
.blog-card--feature .blog-card__title { font-size: clamp(1.9rem, 1.8vw + 1rem, 2.9rem); font-weight: 300; line-height: 1.06; letter-spacing: -.02em; }
.blog-card--feature .blog-card__excerpt { font-size: 1.08rem; -webkit-line-clamp: 4; }
@media (min-width: 900px) {
    .blog-card--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
    .blog-card--feature .blog-card__body { padding-top: 0; gap: var(--space-4); }
}

/* Secondary (page 1, two-up) */
.blog-card--secondary .blog-media { aspect-ratio: 16 / 10; }
.blog-card--secondary .blog-card__title { font-size: clamp(1.4rem, 1vw + 1rem, 1.95rem); font-weight: 300; line-height: 1.15; }

/* Compact (search results) */
.blog-list { display: grid; }
.blog-card--compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--color-line); }
.blog-card--compact:last-child { border-bottom: 1px solid var(--color-line); }
.blog-card--compact .blog-media { aspect-ratio: 1 / 1; }
.blog-card--compact .blog-card__body { padding-top: 0; }
.blog-card--compact .blog-fallback__subject { font-size: 1.1rem; }
.blog-card--compact .blog-fallback__mark { display: none; }
@media (min-width: 640px) { .blog-card--compact { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-8); } }

/* ---------- Grids & sections ---------- */
.blog-grid { display: grid; gap: var(--space-12) var(--space-8); }
.blog-grid--two { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-line); }
@media (min-width: 760px) { .blog-grid--two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .blog-grid--three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-section-title { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem); font-weight: 300; margin-bottom: var(--space-8); }
.blog-latest { padding-top: var(--space-12); }

/* Topic index — typographic list, numbered like the services index */
.topic-index { border-top: 1px solid var(--color-line); }
.topic-index__item {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2) var(--space-4);
    padding: var(--space-6) 0; border-bottom: 1px solid var(--color-line);
}
.topic-index__num { font-family: var(--font-display); font-weight: 300; font-size: 1.1rem; color: var(--color-navy-light); padding-top: .2rem; }
.topic-index__name { font-size: clamp(1.3rem, 1vw + 1rem, 1.75rem); font-weight: 300; margin: 0 0 var(--space-2); }
.topic-index__name a { color: var(--color-ink); text-decoration: none; }
.topic-index__name a:hover { color: var(--color-navy-light); }
.topic-index__desc { font-size: .95rem; font-weight: 400; margin: 0; }
.topic-index__count { grid-column: 2; font-family: var(--font-display); font-size: .8rem; color: rgba(242, 241, 238, .55); }
@media (min-width: 860px) {
    .topic-index__item { grid-template-columns: 4rem minmax(0, 1fr) 9rem; align-items: baseline; }
    .topic-index__count { grid-column: 3; text-align: right; }
}

/* Teasers (homepage / service pages) */
.blog-teasers__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.blog-teasers__head h2 { margin: 0; }
.blog-teasers__head p { margin: 0; }
.blog-teasers__all { justify-self: start; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-navy-light); text-decoration: none; padding: var(--space-2) 0; }
@media (min-width: 900px) {
    .blog-teasers__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .blog-teasers__head p { grid-column: 1; }
    .blog-teasers__all { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* Service links on category pages */
.service-link-list { border-top: 1px solid var(--color-line); }
.service-link-list a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-8); align-items: baseline;
    padding: var(--space-6) 0; border-bottom: 1px solid var(--color-line); text-decoration: none;
}
.service-link-list__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); color: var(--color-ink); }
.service-link-list__text { grid-column: 1; font-size: .95rem; font-weight: 400; color: var(--color-ink-muted); max-width: 70ch; }
.service-link-list__arrow { grid-column: 2; grid-row: 1; color: var(--color-navy-light); transition: transform var(--transition); }
.service-link-list a:hover .service-link-list__name { color: var(--color-navy-light); }
.service-link-list a:hover .service-link-list__arrow { transform: translateX(4px); }

/* Pagination */
.blog-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--color-line);
    font-family: var(--font-display); font-size: .85rem;
}
.blog-pagination__step { color: var(--color-ink); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: var(--space-2) 0; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.blog-pagination__step:hover { color: var(--color-navy-light); }
.blog-pagination__step.is-disabled { visibility: hidden; }
.blog-pagination__pages { display: flex; gap: var(--space-2); }
.blog-pagination__pages a, .blog-pagination__pages span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    color: var(--color-ink-muted); text-decoration: none;
}
.blog-pagination__pages a:hover { color: var(--color-ink); }
.blog-pagination__pages [aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-navy-light); }
@media (max-width: 420px) { .blog-pagination__pages { display: none; } }

/* Closing CTA band */
.blog-cta-band__inner { display: grid; gap: var(--space-8); align-items: end; }
.blog-cta-band__title { font-size: clamp(1.8rem, 2vw + 1rem, 2.8rem); font-weight: 300; max-width: 22ch; }
.blog-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 960px) {
    .blog-cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Article ---------- */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 100%; background: var(--color-navy-light); transform: scaleX(0); transform-origin: 0 50%; }

.post-preview-banner {
    background: #3B2F12; color: #F6E7B8; padding: var(--space-3) var(--gutter); font-size: .9rem; text-align: center;
    border-bottom: 1px solid rgba(246, 231, 184, .3);
}

.post-header { padding: clamp(var(--space-8), 5vw, var(--space-12)) 0 var(--space-12); border-bottom: 1px solid var(--color-line); }
.post-header__grid { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) {
    .post-header__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-16); align-items: end; }
}
.post-title { font-size: clamp(2.15rem, 3vw + 1rem, 4.1rem); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 var(--space-6); max-width: 20ch; }
.post-dek { font-size: clamp(1.08rem, .35vw + 1rem, 1.3rem); line-height: 1.55; font-weight: 400; color: rgba(242, 241, 238, .82); max-width: 48ch; margin: 0; }
.post-byline {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 2rem;
    margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-line);
    font-size: .88rem; font-weight: 400; color: var(--color-ink-muted);
}
.post-byline p { margin: 0; max-width: none; color: inherit; }
.post-byline a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-navy-light); text-underline-offset: .2em; }
.post-byline__sep { margin: 0 .35rem; opacity: .4; }
.post-hero { margin: 0; }
.post-hero__frame { position: relative; }
.post-hero__media { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .post-hero__media { aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; } }
.post-hero__caption { margin-top: var(--space-3); font-size: .8rem; line-height: 1.5; color: rgba(242, 241, 238, .62); max-width: 60ch; }
.prose-figure__credit { color: rgba(242, 241, 238, .55); }
.prose-figure__credit a { color: inherit; }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-12); padding-bottom: var(--space-16); }
@media (min-width: 1100px) {
    .post-layout { grid-template-columns: 220px minmax(0, 740px); gap: var(--space-16); justify-content: center; }
}
.post-rail { display: none; }
@media (min-width: 1100px) {
    .post-rail { display: block; }
    .post-rail__inner { position: sticky; top: 104px; display: grid; gap: var(--space-12); }
}
.post-toc__title, .post-share__label, .post-footer__label {
    font-family: var(--font-display); font-weight: 500; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-ink); margin: 0 0 var(--space-3);
}
.post-toc ol { counter-reset: toc; border-top: 1px solid var(--color-line); }
.post-toc li { counter-increment: toc; border-bottom: 1px solid var(--color-line); }
.post-toc a {
    display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); padding: .55rem 0; font-size: .84rem; line-height: 1.4;
    font-weight: 400; color: var(--color-ink-muted); text-decoration: none; transition: color var(--transition);
}
.post-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-size: .72rem; color: rgba(135, 145, 222, .55); padding-top: .1rem; }
.post-toc a:hover, .post-toc a.is-active { color: var(--color-ink); }
.post-toc a.is-active::before { color: var(--color-navy-light); }

.post-toc-mobile { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-8); }
.post-toc-mobile summary {
    cursor: pointer; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 500; font-size: .8rem;
    letter-spacing: .1em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; min-height: 44px;
}
.post-toc-mobile summary::-webkit-details-marker { display: none; }
.post-toc-mobile summary::after { content: '+'; color: var(--color-navy-light); font-size: 1.1rem; transition: transform var(--transition); }
.post-toc-mobile[open] summary::after { transform: rotate(45deg); }
.post-toc-mobile ol { list-style: decimal-leading-zero; padding: 0 0 var(--space-4) 2rem; }
.post-toc-mobile li { padding: .3rem 0; color: var(--color-navy-light); font-size: .9rem; }
.post-toc-mobile a { color: var(--color-ink-muted); text-decoration: none; }
@media (min-width: 1100px) { .post-toc-mobile { display: none; } }

/* ---------- Prose ---------- */
.prose { font-size: 1.125rem; line-height: 1.78; font-weight: 400; color: rgba(242, 241, 238, .88); counter-reset: section; }
.prose > * { max-width: 72ch; }
.prose p { color: inherit; max-width: 72ch; margin: 0 0 1.35em; }
.prose > p:first-child { font-size: 1.24rem; line-height: 1.65; color: var(--color-ink); }
.prose h2 {
    position: relative; counter-increment: section; scroll-margin-top: 110px;
    font-size: clamp(1.55rem, 1vw + 1.15rem, 2.1rem); font-weight: 300; line-height: 1.15; letter-spacing: -.01em;
    margin: 2.4em 0 .75em; color: var(--color-ink);
}
@media (min-width: 1100px) {
    .prose h2::before {
        content: counter(section, decimal-leading-zero); position: absolute; right: calc(100% + 1.4rem); top: .5em;
        font-family: var(--font-display); font-weight: 500; font-size: .75rem; letter-spacing: .1em; color: var(--color-navy-light);
    }
}
.prose h3 { font-size: 1.28rem; font-weight: 400; margin: 1.9em 0 .55em; scroll-margin-top: 110px; color: var(--color-ink); }
.prose h4 { font-size: 1.05rem; font-weight: 500; margin: 1.6em 0 .5em; }
.prose a:not(.btn) {
    color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-navy-light);
    text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--transition);
}
.prose a:not(.btn):hover { color: var(--color-navy-light); }
.prose a.is-external::after, .post-sources a.is-external::after { content: '\2197'; font-size: .7em; margin-left: .2em; vertical-align: .25em; opacity: .55; }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.5em; padding: 0; }
.prose li { position: relative; padding-left: 1.6em; margin-bottom: .55em; }
.prose ul > li::before { content: ''; position: absolute; left: .1em; top: .85em; width: .75em; height: 1px; background: var(--color-navy-light); }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before {
    content: counter(item) '.'; position: absolute; left: 0; top: .1em;
    font-family: var(--font-display); font-size: .9em; color: var(--color-navy-light);
}
.prose li > ul, .prose li > ol { margin: .5em 0 0; }
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: 3em 0; }
.prose code { font-size: .88em; background: var(--color-surface-dark-2); padding: .1em .35em; }

.prose-table { margin: 2em 0 2.25em; overflow-x: auto; border-top: 1px solid var(--color-line-dark); -webkit-overflow-scrolling: touch; }
.prose-table:focus-visible { outline-offset: 4px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; min-width: 520px; }
.prose th {
    text-align: left; vertical-align: bottom; padding: .85rem .9rem .7rem 0;
    font-family: var(--font-display); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-ink); border-bottom: 1px solid var(--color-line-dark);
}
.prose td { padding: .8rem .9rem .8rem 0; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.prose td:first-child { color: var(--color-ink); }

.prose-callout { margin: 2em 0; padding: 1.25rem 1.5rem; background: var(--color-paper); border-left: 2px solid var(--color-navy); }
.prose-callout p { margin-bottom: .75em; }
.prose-callout p:last-child { margin-bottom: 0; }
.prose-callout p:first-child > strong:first-child { font-family: var(--font-display); font-weight: 500; color: var(--color-navy-light); }
.prose-pullquote {
    margin: 2.4em 0; padding: 1.5rem 0; border-top: 1px solid var(--color-line-dark); border-bottom: 1px solid var(--color-line-dark);
    font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, .6vw + 1.1rem, 1.6rem); line-height: 1.4; color: var(--color-ink);
}
.prose-pullquote p { margin: 0; }

.prose-figure { margin: 2.4em 0; max-width: none; }
.prose-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prose-figure figcaption { margin-top: .75rem; font-size: .82rem; line-height: 1.5; color: rgba(242, 241, 238, .66); }

/* Mid-article service CTA */
.post-cta { margin: 2.75em 0; padding: 1.75rem 0; border-top: 1px solid var(--color-navy); border-bottom: 1px solid var(--color-line); }
.post-cta__title { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.2; color: var(--color-ink) !important; margin-bottom: .5rem !important; }
.post-cta__text { font-size: 1rem; line-height: 1.6; color: var(--color-ink-muted) !important; }
.post-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin: var(--space-4) 0 0 !important; }
.prose .post-cta__link { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--color-navy-light); }

/* Article footer */
.post-footer { margin-top: var(--space-16); display: grid; gap: var(--space-12); max-width: 72ch; }
.post-tags ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.post-tags a { font-size: .9rem; color: var(--color-ink-muted); text-decoration: none; border-bottom: 1px solid var(--color-line-dark); padding-bottom: 2px; }
.post-tags a:hover { color: var(--color-ink); border-color: var(--color-navy-light); }
.post-sources ol { list-style: decimal; padding-left: 1.4rem; font-size: .88rem; line-height: 1.55; color: rgba(242, 241, 238, .6); }
.post-sources li { margin-bottom: .45rem; padding-left: .25rem; }
.post-sources li::marker { color: var(--color-navy-light); font-family: var(--font-display); }
.post-sources a { color: var(--color-ink-muted); text-decoration: underline; text-decoration-color: var(--color-line-dark); text-underline-offset: .2em; }
.post-sources a:hover { color: var(--color-ink); text-decoration-color: var(--color-navy-light); }
.post-share__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.post-share--rail .post-share__list { flex-direction: column; gap: 0; border-top: 1px solid var(--color-line); }
.post-share--rail .post-share__list li { border-bottom: 1px solid var(--color-line); }
.post-share a, .post-share__copy {
    display: inline-flex; align-items: center; min-height: 40px; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: .88rem; font-weight: 400; color: var(--color-ink-muted); text-decoration: none;
}
.post-share a:hover, .post-share__copy:hover { color: var(--color-ink); }
.post-share__copy.is-copied { color: var(--color-navy-light); }
.post-share--inline { padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
@media (min-width: 1100px) { .post-share--inline { display: none; } }
.post-author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.post-author img { width: 56px; height: 56px; object-fit: contain; background: var(--color-surface-dark); }
.post-author__name { font-family: var(--font-display); font-weight: 400; color: var(--color-ink); margin-bottom: var(--space-1); }
.post-author__bio { font-size: .92rem; font-weight: 400; margin: 0; }

/* ---------- Reviews page extras ---------- */
.reviews-howto h2 { max-width: 20ch; }
.reviews-howto__steps { display: grid; gap: var(--space-8); margin: var(--space-8) 0; border-top: 1px solid var(--color-line); padding-top: var(--space-8); }
@media (min-width: 900px) { .reviews-howto__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reviews-howto__num { display: block; font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--color-navy-light); opacity: .55; margin-bottom: var(--space-3); }
.reviews-howto__note { font-size: .95rem; }
.reviews-howto__note a { color: var(--color-ink); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .blog-media img, .blog-card__title a, .blog-card__more span { transition: none; }
    .blog-card:hover .blog-media img { transform: none; }
    .reading-progress { display: none; }
}