/* HiFi Liner Notes, blog-only rules r4, deferred half (2026-08-21, mock parity).
   Split out of hifi-liner-blog-r1.css, which stays inline for the above-fold
   subset. Linked non-blocking (media=print, swapped to all on load) by
   hifi-blog-archive.php and hifi-blog-single.php right after that style block,
   so these rules land before anything here scrolls into view.
   Same scoping contract as r1: every selector sits under .hifi-ln.

   r3 supersedes r2. The linked sheet is immutable on the CDN once fetched, so
   a content change ships under a new filename rather than a new ?ver. r2 is
   left on disk for anything still holding a cached copy of the old URL.
   Difference from r2: the space-reserving geometry (pager box, post-body image
   and embed sizing, author avatar) moved into the inline r1 block, because
   deferring those let the elements paint at the wrong size first. */

.hifi-ln .ba-pager .hifi-fine {margin: 0;}
.hifi-ln .ba-actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px;}
.hifi-ln .ba-center {text-align: center;}
.hifi-ln .ba-center .hifi-soft-text {max-width: 560px; margin: 0 auto;}
.hifi-ln .post-body figure {margin: 24px 0;}
.hifi-ln .post-body figure img {margin: 0;}
.hifi-ln .post-body figcaption {font-size: 13px; color: var(--hifi-muted); margin-top: 8px;}
.hifi-ln .post-body blockquote, .hifi-ln .post-pull {margin: 32px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--hifi-wine);}
.hifi-ln .post-body blockquote p, .hifi-ln .post-pull p {margin: 0; font-family: var(--hifi-f-head); font-size: 22px; line-height: 1.35; font-weight: 650; color: var(--hifi-wine);}
.hifi-ln .post-body hr {border: 0; border-top: 1px solid var(--hifi-line-strong); margin: 40px 0;}
.hifi-ln .post-body pre {background: var(--hifi-surface); border: 1px solid var(--hifi-line-strong); border-radius: var(--hifi-radius); padding: 18px; overflow-x: auto; font-family: var(--hifi-f-mono); font-size: 14px; margin: 24px 0;}
.hifi-ln .post-body code {font-family: var(--hifi-f-mono); font-size: .92em; background: var(--hifi-surface); padding: 2px 6px; border-radius: 4px;}
.hifi-ln .post-body pre code {background: none; padding: 0;}
.hifi-ln .post-body table {width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; display: block; overflow-x: auto;}
.hifi-ln .post-body th, .hifi-ln .post-body td {border: 1px solid var(--hifi-line-strong); padding: 10px 12px; text-align: left; vertical-align: top;}
.hifi-ln .post-body th {background: var(--hifi-surface); font-weight: 600;}
.hifi-ln .post-foot-section {margin-top: 48px; scroll-margin-top: 24px; position: relative;}
.hifi-ln .post-share {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hifi-line-strong);}
.hifi-ln .post-share .hifi-eyebrow {margin: 0;}
.hifi-ln .post-share__msg {font-family: var(--hifi-f-accent); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--hifi-gold-ink); opacity: 0; transition: opacity .2s ease;}
.hifi-ln .post-share__msg.is-visible {opacity: 1;}
.hifi-ln .post-author {display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 20px; margin-top: 32px;}
.hifi-ln .post-author__body .hifi-eyebrow {margin-bottom: 4px;}
.hifi-ln .post-author__body h3 {margin: 0 0 6px; font-size: 19px;}
.hifi-ln .post-author__body p {margin: 0; font-size: 15px; color: var(--hifi-text-soft);}
.hifi-ln .post-related .hifi-card__body .hifi-fine {margin: 0;}
.hifi-ln .post-cta {text-align: center; margin-top: 48px; padding: 32px 20px; border-radius: var(--hifi-radius); background: var(--hifi-bg-2);}
.hifi-ln .post-cta .hifi-soft-text {max-width: 560px; margin: 0 auto;}

/* Inline product card inside a post body (2026-08-21, mock parity). Ported from the
   design-preview blog-single.html page-local block, the one rule set in that mockup
   that had no live equivalent. New filename rather than an edit to r3: the linked
   sheet is immutable on the CDN once fetched. */
.hifi-ln .post-inline-card {display: grid; grid-template-columns: 124px 1fr; gap: 4px 16px; margin: 32px 0;}
.hifi-ln .post-inline-card > .hifi-plate {margin: 8px; align-self: start;}
.hifi-ln .post-inline-card__body {padding: 14px 16px 16px 0; display: grid; gap: 8px; justify-items: start;}
.hifi-ln .post-inline-card__body h3 {margin: 0; font-size: 19px;}
.hifi-ln .post-inline-card__meta {margin: 0; font-variant-numeric: tabular-nums lining-nums; font-size: 15px; font-weight: 600;}
@media (min-width: 680px) {
  .hifi-ln .post-inline-card {grid-template-columns: 168px 1fr;}
  .hifi-ln .post-inline-card__body h3 {font-size: 21px;}
}

/* The closing CTA band is a .hifi-dusk slab inside the reading column, so it keeps
   the card geometry while the dusk class swaps the palette. */
.hifi-ln .post-cta.hifi-dusk {background: var(--hifi-bg-2); color: var(--hifi-text);}