/* Blog index, category archives and single posts.
 * Blog Templates Handover rev 1.0, 27 Sep 2026. Markup: home.php,
 * category.php, single-post.php and template-parts/{blog-index,post-card,
 * post-cta,newsletter}.php. Loaded only on those views (inc/enqueue.php).
 *
 * Tokens only. The few px values are the handover's own (240px featured
 * image floor, 44px headshot, 960px image breakout, the 720px and 900px
 * breakpoints, and the 3px underline offset), since custom properties cannot
 * be used in a media query. No !important.
 *
 * Competing rules were measured on the live page (Astra 4.14.0, 27 Sep):
 *   a:hover, a:focus { color }                                    (0,1,1)
 *   a:focus-visible { outline: thin dotted }                      (0,1,1)
 *   .entry-content p { margin-bottom: 1.6em }                     (0,1,1)
 *   .entry-content > .wp-block-group { padding: Astra block pad } (0,2,0)
 *   .wp-block-separator:not(.is-style-wide):not(.is-style-dots)
 *     { width: 100px; margin: 20px auto }  core                   (0,3,0)
 *   .wp-block-table td, .wp-block-table th { border; padding }    (0,1,1)
 * Each rule below that needs to beat one says so.
 */

/* ---- Shared ---------------------------------------------------------- */

/* Astra's page-builder layout already makes .ast-container 100% wide with no
   padding, so each band is full-bleed and this constrains its content. */
.bk-blog__inner {
  box-sizing: border-box;
  max-width: calc(var(--container-max) + 2 * var(--gutter-inline));
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
}

/* Date and reading time are values, so mono; the author is prose, so body. */
.bk-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
}
.bk-post-meta__author {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
}

/* Hand-written <a class="bk-btn">: Astra's a:hover/a:focus (0,1,1) outranks
   the variants' colour at (0,1,0). Re-asserted at (0,2,1) / (0,3,1). The
   primary's white hover label still wins, at (0,3,0) in components.css. */
.bk-blog a.bk-btn--primary:focus { color: var(--accent-contrast); }
.bk-blog a.bk-btn--secondary:focus { color: var(--bk-leaf-800); }
.bk-blog a.bk-btn--ghost:focus { color: var(--bk-graphite-700); }
.bk-blog a.bk-btn--onDark:is(:hover, :focus) { color: var(--bk-graphite-900); }

/* ---- 2.1 Intro band --------------------------------------------------- */

.bk-blog-intro .bk-eyebrow {
  display: flex; /* block-level so it sits on its own line above the h1 */
  margin: 0 0 var(--space-3);
}
.bk-blog-intro__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}
.bk-blog-intro__lead {
  max-width: var(--container-narrow);
  margin: var(--space-3) 0 0;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--text-body);
}

/* ---- 2.2 Post card ---------------------------------------------------- */

.bk-blog a.bk-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
/* Astra's thin dotted a:focus-visible (0,1,1) would replace the design
   system's 2px ring. */
.bk-blog a.bk-post-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.bk-post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-post-card--grid .bk-post-card__media img { aspect-ratio: 3 / 2; }
.bk-post-card--featured .bk-post-card__media img { min-height: 240px; }

.bk-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
}
.bk-post-card--featured .bk-post-card__body { padding: var(--space-7); }

.bk-post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  text-wrap: balance;
}
.bk-post-card--featured .bk-post-card__title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}

.bk-post-card__excerpt {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-body);
}
.bk-post-card--grid .bk-post-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Pushed to the bottom so grid cards in a row align their affordance. */
.bk-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  font-weight: var(--fw-bold);
  color: var(--text-link);
  transition: var(--transition-control);
}
.bk-post-card:hover .bk-post-card__more { color: var(--text-link-hover); }

/* ---- 2.3 List layout -------------------------------------------------- */

.bk-post-grid {
  display: grid;
  gap: var(--space-6);
}
.bk-post-card--featured + .bk-post-grid { margin-top: var(--space-6); }

.bk-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-9);
}
.bk-pagination__dots {
  padding-inline: var(--space-2);
  color: var(--text-muted);
}

.bk-blog-list__empty {
  margin: 0;
  font-size: var(--type-body-size);
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .bk-post-card--featured.bk-post-card--has-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bk-post-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 3 Single post ---------------------------------------------------- */

/* 720px measure; the gutter sits outside it. */
.bk-post__header {
  box-sizing: border-box;
  max-width: calc(var(--container-narrow) + 2 * var(--gutter-inline));
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
}

/* The body is full width, and every top-level block except .alignfull takes
 * the 720px measure. So an alignfull band (Scales Guide handover §2) is
 * full-bleed simply by being unconstrained, with no negative margins and no
 * 100vw scrollbar overflow. Astra's own alignfull breakout is keyed to
 * `.ast-page-builder-template .ast-no-sidebar`, a descendant form that
 * never matches a post, where both classes are on <body>.
 *
 * Top-level floats ignore auto margins, so they get the column's edge
 * explicitly. Floats inside a constrained group (the usual case) are
 * already inside the column.
 *
 * `.is-root-container` is the editor canvas (see bk_editor_styles()). It
 * never exists on the front end, and in the editor this sheet is prefixed
 * with .editor-styles-wrapper, so the same rules serve both. */
:is(.bk-post__body, .is-root-container) > :not(.alignfull) {
  max-width: min(var(--container-narrow), calc(100% - 2 * var(--gutter-inline)));
  margin-inline: auto;
}
:is(.bk-post__body, .is-root-container) > .alignleft {
  margin-inline: max(var(--gutter-inline), calc((100% - var(--container-narrow)) / 2)) var(--space-6);
}
:is(.bk-post__body, .is-root-container) > .alignright {
  margin-inline: var(--space-6) max(var(--gutter-inline), calc((100% - var(--container-narrow)) / 2));
}

/* A band's background is full-bleed, but its content keeps the post's 720px
   measure. Core constrains a band's children to theme.json's 1200px
   contentSize, so the Scales Guide's bands ran 1.7x wider than the text
   around them and the left edge jumped out and back (seen live, 28 Sep).
   Core reads the width from this variable, so redefining it on the band is
   enough. An .alignwide child still takes wideSize. */
:is(.bk-post__body, .is-root-container) > .alignfull {
  --wp--style--global--content-size: var(--container-narrow);
}

/* Editor canvas only (.block-editor-block-list__layout never exists on the
   front end). Astra's editor CSS for page-builder posts sets max-width:none
   on every top-level block at (0,5,0) (class-astra-wp-editor-css.php:940,
   Astra 4.14.0). With the .editor-styles-wrapper prefix this is (0,6,0). */
.is-root-container.block-editor-block-list__layout > .wp-block:not(.alignfull):not(.alignwide) {
  max-width: min(var(--container-narrow), calc(100% - 2 * var(--gutter-inline)));
  margin-inline: auto;
}

/* Section rhythm. The body is a run of constrained groups, one per h2, and
   core's `:root :where(.is-layout-constrained) > :first-child` (0,2,0) zeroes
   the h2's own top margin (0,1,1), so on the live page each h2 sat on the
   paragraph above it (measured in a render, 28 Sep). The space goes on the
   group instead, which that rule can't reach; bands take the same. */
:is(.bk-post__body, .is-root-container) > :is(.wp-block-group, .alignfull) + :is(.wp-block-group, .alignfull) {
  margin-top: var(--space-11);
}

/* A band that ends the post meets the CTA band directly. */
.bk-post__body:has(> .alignfull:last-child) { padding-bottom: 0; }

.bk-post__header {
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
}
.bk-post__title {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  text-wrap: balance;
}
@media (min-width: 720px) {
  .bk-post__title {
    font-size: var(--type-display-2-size);
    line-height: var(--type-display-2-lh);
    letter-spacing: var(--type-display-2-ls);
  }
}
.bk-post__dek {
  margin: 0;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--text-body);
}

.bk-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  line-height: var(--type-h4-lh);
}
.bk-post__author-photo {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.bk-post__author-name {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.bk-post__author-role {
  font-size: var(--type-body-sm-size);
  color: var(--text-muted);
}

/* Featured image breaks out of the 720px column to 960px. */
.bk-post__media {
  box-sizing: border-box;
  max-width: calc(960px + 2 * var(--gutter-inline));
  margin: 0 auto;
  padding-inline: var(--gutter-inline);
}
.bk-post__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.bk-post__body {
  padding-top: var(--space-9);
  padding-bottom: var(--space-11);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-body);
}

/* The post body is a run of constrained groups. Astra pads each one as if it
   were a page section, at (0,2,0); inside a 720px column that is just a
   larger indent. Groups an editor gave a background keep it, and so do
   alignfull bands, whose padding is .bk-section's (astra-overrides 6a).
   (0,5,0). */
.bk-post__body.entry-content > .wp-block-group:not(.has-background):not(.alignfull) {
  padding: 0;
}

:is(.bk-post__body, .is-root-container) h2:where(:not(.alignfull *)) {
  margin: var(--space-11) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
:is(.bk-post__body, .is-root-container) h3:where(:not(.alignfull *)) {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
/* --post-body-size/-lh let a column change the article size by inheritance
   (the case study's 19px, §5 below), without out-ranking this rule. */
:is(.bk-post__body, .is-root-container) p:where(:not(.alignfull *)),
:is(.bk-post__body, .is-root-container) li:where(:not(.alignfull *)) {
  font-size: var(--post-body-size, var(--type-body-size));
  line-height: var(--post-body-lh, var(--type-body-lh));
}
:is(.bk-post__body, .is-root-container) p:where(:not(.alignfull *)) { margin: 0 0 var(--space-5); }
:is(.bk-post__body, .is-root-container) :is(strong, b):where(:not(.alignfull *)) { font-weight: var(--fw-semibold); }

:is(.bk-post__body, .is-root-container) :is(ul, ol):where(:not(.alignfull *)) {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}
:is(.bk-post__body, .is-root-container) li:where(:not(.alignfull *)) { margin: 0 0 var(--space-2); }
:is(.bk-post__body, .is-root-container) li:where(:not(.alignfull *))::marker { color: var(--accent-primary); }
:is(.bk-post__body, .is-root-container) li > :is(ul, ol):where(:not(.alignfull *)) { margin: var(--space-2) 0 0; }

/* Item 12: a separator between every h2 today. A full-width hairline, not
   core's 100px stub; (0,3,1) beats core's (0,3,0). Content can drop the
   separators later and the rhythm holds, because h2 carries its own space.
   It keeps the 720px measure, since the body itself is now full width. */
:is(.bk-post__body, .is-root-container) hr,
:is(.bk-post__body, .is-root-container) hr.wp-block-separator:not(.is-style-dots) {
  width: 100%;
  max-width: min(var(--container-narrow), calc(100% - 2 * var(--gutter-inline)));
  height: 0;
  margin: var(--space-10) auto;
  border: 0;
  border-top: var(--border-width) solid var(--border-hairline);
  background: none;
  opacity: 1;
}

/* No doubled space: the first thing in the body, and the heading straight
   after a separator, take none above. (0,3,0) beats the h2 rule. */
.bk-post__body > :first-child,
.bk-post__body > .wp-block-group:first-child > :first-child,
.bk-post__body .wp-block-separator + *,
.bk-post__body .wp-block-separator + .wp-block-group > :first-child {
  margin-top: 0;
}
.bk-post__body > :last-child,
.bk-post__body > :last-child > :last-child {
  margin-bottom: 0;
}

/* Item 13: body links. (0,2,1) on hover beats Astra's a:hover (0,1,1). */
:is(.bk-post__body, .is-root-container) a:not(.wp-element-button):where(:not(.alignfull *)) {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 3px;
}
:is(.bk-post__body, .is-root-container) a:not(.wp-element-button):where(:not(.alignfull *)):is(:hover, :focus) {
  color: var(--text-link-hover);
}

/* Core table blocks take .bk-table's look. Values are components.css's.
   (0,2,1) beats core's .wp-block-table td/th (0,1,1). Right-align numeric
   columns with the block's column alignment, or with .bk-table__num on a
   cell in HTML mode. */
:is(.bk-post__body, .is-root-container) .wp-block-table { margin: 0 0 var(--space-5); }
:is(.bk-post__body, .is-root-container) .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-sm-size);
}
:is(.bk-post__body, .is-root-container) .wp-block-table :is(thead, tfoot) { border: 0; }
:is(.bk-post__body, .is-root-container) .wp-block-table th {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: var(--border-width-strong) solid var(--border-hairline);
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  white-space: nowrap;
}
:is(.bk-post__body, .is-root-container) .wp-block-table td {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: var(--border-width) solid var(--border-hairline);
  color: var(--text-body);
  vertical-align: middle;
}
:is(.bk-post__body, .is-root-container) .wp-block-table .has-text-align-right,
:is(.bk-post__body, .is-root-container) .wp-block-table .bk-table__num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Jump-link targets (Scales Guide §3.1). The header isn't sticky, so this
 * is just air above the heading: --anchor-offset, astra-overrides.css 16a. */
:is(.bk-post__body, .is-root-container) :is(h2, h3)[id] {
  scroll-margin-top: var(--anchor-offset);
}

/* ---- 3 Images in posts (Scales Guide §4.8) ---------------------------- */

:is(.bk-post__body, .is-root-container) .wp-block-image:where(:not(.alignfull *)) {
  margin-block: var(--space-7);
}
:is(.bk-post__body, .is-root-container) .wp-block-image:where(:not(.alignfull *)) img {
  border-radius: var(--radius-photo);
}
:is(.bk-post__body, .is-root-container) .wp-block-image:where(:not(.alignfull *)) .wp-element-caption {
  margin: var(--space-2) 0 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
  text-align: left;
}

/* Small figures: manufacturer cut-outs beside the paragraph they illustrate.
   Never wider than 240px, the handover's own value; the caption is a spec
   line, so mono. Side margins stay core's (`.is-layout-constrained >
   .alignleft`), or the top-level column-edge rule above. */
:is(.bk-post__body, .is-root-container) .wp-block-image:is(.alignleft, .alignright) {
  max-width: 240px;
  margin-block: var(--space-1) var(--space-4);
}
:is(.bk-post__body, .is-root-container) .wp-block-image:is(.alignleft, .alignright) img {
  width: 100%;
  height: auto;
}
:is(.bk-post__body, .is-root-container) .wp-block-image:is(.alignleft, .alignright) .wp-element-caption {
  font-family: var(--font-mono);
}

/* Below 560px a 240px float would leave a column of three or four words, so
   the figure stops floating and sits in the flow at its 240px width, on the
   column's left edge. A top-level float gets that edge explicitly (0,3,0). */
@media (max-width: 559px) {
  :is(.bk-post__body, .is-root-container) .wp-block-image:is(.alignleft, .alignright) {
    float: none;
    margin-inline: 0;
  }
  :is(.bk-post__body, .is-root-container) > .wp-block-image:is(.alignleft, .alignright) {
    margin-inline: var(--gutter-inline) auto;
  }
}

/* ---- 3 Jump links (Scales Guide §3.3) --------------------------------- */

/* A core List block with class bk-toc, after a .bk-eyebrow--plain
   "IN THIS GUIDE". No bullets, no JS, not sticky. (0,2,1) with the list
   rule's :where() beats that rule's (0,1,1). */
:is(.bk-post__body, .is-root-container) ul.bk-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--type-body-sm-size);
}
:is(.bk-post__body, .is-root-container) .bk-toc li {
  margin: 0;
  font-size: inherit;
}
:is(.bk-post__body, .is-root-container) p.bk-eyebrow:where(:not(.alignfull *)) { margin-bottom: var(--space-3); }

/* ---- 3 CTA band ------------------------------------------------------- */

.bk-post-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
}
.bk-post-cta__title {
  max-width: 18em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
}
.bk-post-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- 4 Newsletter band ------------------------------------------------ */

/* Two dark bands meet on a post; a hairline keeps them two. */
.bk-post-cta + .bk-newsletter {
  border-top: var(--border-width) solid var(--bk-graphite-700);
}

.bk-newsletter__inner {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 900px) {
  .bk-newsletter__inner { grid-template-columns: 1fr 1fr; }
}
.bk-newsletter .bk-eyebrow { margin: 0; }
.bk-newsletter__title {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
}
.bk-newsletter__lead {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--bk-graphite-200);
}

/* Gravity Forms, on a dark ground.
 *
 * Input, label type, submit pill and focus ring already come from the
 * Orbital CSS-API mapping in astra-overrides.css §11, which sets variables on
 * `.gform_wrapper.gform-theme--orbital > form` at (0,2,1). This re-sets only
 * the colours that must change on graphite-900, one class higher, (0,3,1).
 * Violation red is ~3:1 on graphite-900, so error text uses the soft tint;
 * the input border stays violation red. */
.bk-newsletter .gform_wrapper.gform-theme--orbital > form {
  --gf-ctrl-label-color-primary: var(--bk-graphite-200);
  --gf-ctrl-label-color-secondary: var(--bk-graphite-300);
  --gf-ctrl-desc-color: var(--bk-graphite-300);
  --gf-ctrl-desc-color-error: var(--bk-violation-soft);
}

/* Email and Subscribe on one row, bottom-aligned; wraps when narrow. The
   Akismet honeypot inside the form is display:none !important inline (the
   literal Δ of item 09), so it takes no part in the row. */
.bk-newsletter .gform_wrapper form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}
.bk-newsletter .gform_wrapper .gform-body {
  flex: 1 1 200px;
  min-width: 0;
}
.bk-newsletter .gform_wrapper .gform_footer {
  flex: none;
  margin: 0;
  padding: 0;
}
.bk-newsletter .gform_wrapper .gform_validation_errors { flex-basis: 100%; }

/* The only field, so no required marker (the input keeps aria-required). */
.bk-newsletter .gform_wrapper .gfield_required { display: none; }

.bk-newsletter .gform_wrapper .gfield_validation_message {
  font-size: var(--type-caption-size);
  font-weight: var(--fw-semibold);
}

/* Success: .bk-alert--success, in its own tokens. */
.bk-newsletter .gform_confirmation_message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bk-compliant-soft);
  color: var(--bk-compliant);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--fw-semibold);
}

/* ---- 5 Case study template (templates/case-study.php) ----------------- */
/* BaykedFarm case-study handover, 28 Sep 2026, then the harvest cost
   handover (same day), whose hero, byline, CTA, author card and related row
   now serve every case study. The hero, CTA and related row are the
   template's; the stat band, the article and its sidebar are the post's
   content. The one px value is the 960px breakpoint (§2 row 4). Sizes with
   no design-system token are the §14a tokens in astra-overrides.css. */

/* §2 row 2. The photo is the featured image, stacked under .bk-hero-scrim's
   scrim (components.css: photo 0, scrim 1, copy 2), with --scrim-bottom
   added on the same layer so the byline reads on a bright photo. Graphite
   ground if a post has no featured image yet. */
.bk-post-hero {
  display: flex;
  align-items: flex-end;
  min-height: var(--post-hero-min-height);
  overflow: hidden;
  background: var(--surface-dark);
}
.bk-post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-bottom);
  pointer-events: none;
}
.bk-post-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-post-hero__inner {
  width: 100%;
  padding-top: var(--space-13);
  padding-bottom: var(--space-10);
}
/* Breadcrumb, then the eyebrow 24px below it. White at 78%/100% in the
   handover; graphite-200 and white are the tokens for that on the scrim. */
.bk-post-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: var(--fw-semibold);
  color: var(--bk-graphite-200);
}
/* (0,2,1) beats Astra's a:hover, a:focus (0,1,1). */
.bk-post-hero__crumbs a:is(:link, :visited, :hover, :focus) {
  color: var(--bk-graphite-200);
  text-decoration: none;
}
.bk-post-hero__crumbs a:is(:hover, :focus-visible) { text-decoration: underline; }
.bk-post-hero__crumbs .bk-post-hero__crumb-last:is(span, a:link, a:visited, a:hover, a:focus) { color: var(--text-inverse); }

.bk-post-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.bk-post-hero__meta,
.bk-post-hero__date {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  line-height: var(--type-mono-sm-lh);
  color: var(--bk-graphite-200);
}
/* (0,2,0), clear of Astra's heading colour and size. Fluid from 34px to
   display-1, on display-2's line height (harvest cost handover). */
.bk-post-hero .bk-post-hero__title {
  max-width: var(--post-hero-title-max);
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--post-hero-title-min), var(--post-hero-title-fluid), var(--type-display-1-size));
  line-height: var(--type-display-2-lh);
  letter-spacing: var(--type-display-1-ls);
  font-weight: var(--fw-black);
  color: var(--text-inverse);
  text-wrap: balance;
}
/* Titles over 80 characters (post-hero.php) top out at display-2. */
.bk-post-hero .bk-post-hero__title--long {
  font-size: clamp(var(--post-hero-title-min), var(--post-hero-title-fluid), var(--type-display-2-size));
}
.bk-post-hero__lead {
  max-width: var(--post-hero-lead-max);
  margin: var(--space-5) 0 0;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--bk-graphite-100);
  text-wrap: pretty;
}
/* Photo, name over role, a rule, then date and reading time. Wraps on a
   phone, the date line going under. */
.bk-post-hero__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.bk-post-hero__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.bk-post-hero__role {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--bk-graphite-200);
}
.bk-post-hero__rule {
  align-self: stretch;
  width: var(--border-width);
  min-height: var(--space-7);
  background: var(--bk-graphite-500);
}
/* On a phone the date wraps under the name, and the rule would be left
   hanging beside nothing. */
@media (max-width: 479px) {
  .bk-post-hero__rule { display: none; }
  .bk-post-hero .bk-post-hero__date { flex-basis: 100%; }
}
.bk-post-hero .bk-post-hero__date {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--bk-graphite-100);
}
.bk-post-hero__photo-author {
  flex: none;
  box-sizing: border-box;
  width: var(--post-hero-avatar);
  height: var(--post-hero-avatar);
  border: var(--border-width-strong) solid var(--bk-white);
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.bk-post-hero__author {
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
}

/* The stat band sits straight under the hero. §2 row 4 asks for
   --section-y under the article. */
.bk-post__body:has(> .alignfull:first-child) { padding-top: 0; }
.bk-post--case-study .bk-post__body { padding-bottom: var(--section-y); }

/* §2 row 4: the article and its sidebar, in the 1200px container, left
   edge on the hero's. Two columns from 960px, the sidebar after the article
   below that. Not sticky. (0,3,0) beats the 720px measure rule above. */
:is(.bk-post__body, .is-root-container) > .wp-block-group.bk-post-layout {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-10);
  max-width: min(var(--container-max), calc(100% - 2 * var(--gutter-inline)));
  margin-inline: auto;
}
/* Editor: beats Astra's max-width:none on top-level blocks, (0,6,0) with
   the wrapper prefix; see the measure rule above. */
.is-root-container.block-editor-block-list__layout > .wp-block.wp-block-group.bk-post-layout {
  max-width: min(var(--container-max), calc(100% - 2 * var(--gutter-inline)));
}
@media (min-width: 960px) {
  :is(.bk-post__body, .is-root-container) > .wp-block-group.bk-post-layout {
    grid-template-columns: minmax(0, var(--container-narrow)) minmax(var(--post-aside-min), var(--post-aside-max));
    align-items: start;
  }
}
/* Core's flow gap, `:root :where(.is-layout-flow) > *` (0,1,0), would push
   the second column down by 24px. */
.wp-block-group.bk-post-layout > .wp-block-group {
  min-width: 0;
  margin: 0;
}

/* Sidebar first (harvest cost handover): the aside is the group's first
   child, so a phone reads the snapshot and contents before the article, as
   the handover's wrap does. From 960px it is the left column, 220-280px,
   beside a 760px article, and sticky. Below 960px it stays in the flow:
   sticky in a stacked column would ride over the article. (0,4,0) beats
   the two-column rule above. */
@media (min-width: 960px) {
  :is(.bk-post__body, .is-root-container) > .wp-block-group.bk-post-layout.bk-post-layout--aside-start {
    grid-template-columns: minmax(var(--post-aside-start-min), var(--post-aside-start-max)) minmax(0, var(--post-article-max));
  }
  .bk-post-layout--aside-start > .bk-post-layout__aside {
    position: sticky;
    top: var(--space-7);
  }
  /* Logged in, the admin bar is fixed over the top 32px. */
  .admin-bar .bk-post-layout--aside-start > .bk-post-layout__aside {
    top: calc(var(--wp-admin--admin-bar--height) + var(--space-7));
  }
}

/* §3 and §5: the article at 19px/1.65, through the variables the p and li
   rules read. H2s one step up, at --type-h1, 64px above. The harvest cost
   post keeps this size too, so both case studies read alike. */
.bk-post-layout__main {
  --post-body-size: var(--type-article-size);
  --post-body-lh: var(--type-article-lh);
  font-size: var(--type-article-size);
  line-height: var(--type-article-lh);
}
:is(.bk-post__body, .is-root-container) .bk-post-layout__main h2 {
  margin: var(--space-10) 0 var(--space-5);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: var(--fw-black);
}
:is(.bk-post__body, .is-root-container) .bk-post-layout__main > h2:first-child { margin-top: 0; }
:is(.bk-post__body, .is-root-container) .bk-post-layout__main :is(strong, b) { color: var(--text-strong); }
:is(.bk-post__body, .is-root-container) .bk-post-layout__main code {
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  color: inherit;
}
:is(.bk-post__body, .is-root-container) .bk-post-layout__main .wp-block-image .wp-element-caption {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

/* Cards and the table scroll box are block-level HTML, which the p rule's
   bottom margin doesn't reach; they take the step list's space. */
.bk-post-layout__main > :is(.bk-card, .bk-table-scroll) { margin-block: var(--space-7); }

/* Sections (harvest cost handover): the article as a run of groups
   .bk-post-section, each an eyebrow then its h2, with the section's anchor
   on the group so a jump shows the eyebrow too. 96px between sections; the
   h2 sits 16px under its eyebrow. Blocks inside a section that are HTML,
   not paragraphs, take the same 32px as the cards above. (0,3,1) beats the
   article h2 rule. */
.bk-post-layout__main > .bk-post-section + .bk-post-section { margin-top: var(--space-12); }
.bk-post-layout__main > .bk-post-section[id] { scroll-margin-top: var(--space-7); }
/* An eyebrow in the article is eyebrow size, not the 19px p rule's. A
   label inside a section ("That one press") sits 32px under what precedes
   it. (0,3,1) beats the p rule and the p.bk-eyebrow margin above. */
:is(.bk-post__body, .is-root-container) .bk-post-section > p.bk-eyebrow {
  margin: var(--space-7) 0 0;
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
}
:is(.bk-post__body, .is-root-container) .bk-post-section > p.bk-eyebrow:first-child { margin-top: 0; }
:is(.bk-post__body, .is-root-container) .bk-post-section > p.bk-eyebrow + h2 { margin-top: var(--space-4); }
:is(.bk-post__body, .is-root-container) .bk-post-section > h2:first-child { margin-top: 0; }
.bk-post-section > :is(.bk-card, .bk-table-scroll, .bk-case-cards) { margin-block: var(--space-7); }
.bk-post-section > :last-child { margin-bottom: 0; }

/* A section's closing note (How We Measured): a hairline above, small type,
   and the source line in mono. */
.bk-post-layout__main > .bk-post-section--note {
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--border-hairline);
}
:is(.bk-post__body, .is-root-container) .bk-post-section--note h3 { margin: 0 0 var(--space-4); }
:is(.bk-post__body, .is-root-container) .bk-post-section--note p {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-lh);
  margin-bottom: var(--space-3);
}
:is(.bk-post__body, .is-root-container) .bk-post-section--note p.bk-source {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  line-height: var(--type-mono-sm-lh);
  color: var(--text-muted);
}

/* Embedded video (core/embed, YouTube) under its farm paragraph: 16px
   below the text, the photo radius, the caption as an image caption's. */
/* A farm paragraph with a video under it: 16px, not the 24px feature gap. */
:is(.bk-post__body, .is-root-container) p.bk-lead-phrase:has(+ .wp-block-embed) { margin-bottom: var(--space-4); }
:is(.bk-post__body, .is-root-container) .bk-post-layout__main .wp-block-embed {
  margin: var(--space-4) 0 var(--space-8);
}
/* The frame sizes itself by aspect-ratio, so core's ratio box goes:
   `.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before`
   and `.wp-embed-responsive .wp-has-aspect-ratio iframe` (absolute) are
   (0,3,1) and (0,2,1); these are (0,4,1). Works with or without the
   responsive-embeds theme support. */
.bk-post-layout__main .wp-block-embed.wp-block-embed .wp-block-embed__wrapper iframe {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-photo);
  background: var(--surface-dark);
}
.bk-post-layout__main .wp-block-embed.wp-block-embed .wp-block-embed__wrapper::before { content: none; }
:is(.bk-post__body, .is-root-container) .bk-post-layout__main .wp-block-embed .wp-element-caption {
  margin: var(--space-3) 0 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
  text-align: left;
}

/* The hairline spans the column; the body's own rule keeps a gutter. */
:is(.bk-post__body, .is-root-container) .bk-post-layout__main hr.wp-block-separator { max-width: 100%; }

/* Intro (§3 row 1): the opening paragraph at lead size, and the
   Montserrat line after it. */
:is(.bk-post__body, .is-root-container) p.bk-lead {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--text-strong);
}
:is(.bk-post__body, .is-root-container) p.bk-lead--display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

/* Feature paragraphs (§3): the bold lead phrase in Montserrat, 24px apart. */
:is(.bk-post__body, .is-root-container) p.bk-lead-phrase { margin-bottom: var(--space-6); }
:is(.bk-post__body, .is-root-container) p.bk-lead-phrase > strong:first-child {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

/* Callout on a dark card (§3, manifest callout): a group
   .bk-card.bk-card--dark.bk-card--pad-lg, its first paragraph the metric. */
:is(.bk-post__body, .is-root-container) .bk-post-layout__main .bk-card > :last-child { margin-bottom: 0; }
:is(.bk-post__body, .is-root-container) p.bk-card__metric {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: var(--fw-black);
  color: var(--accent-primary); /* leaf-500 on graphite-900 only */
}
/* --type-display-2 from 720px, as the hero h1 (§5 row 3). */
@media (min-width: 720px) {
  :is(.bk-post__body, .is-root-container) p.bk-card__metric {
    font-size: var(--type-display-2-size);
    line-height: var(--type-display-2-lh);
    letter-spacing: var(--type-display-2-ls);
  }
}

/* Closing boilerplate (§3, last row): muted italic, not article size. */
:is(.bk-post__body, .is-root-container) p.bk-coda {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-style: italic;
  color: var(--text-muted);
}
:is(.bk-post__body, .is-root-container) p.bk-coda--sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

/* §4 sidebar: a group, tagName aside. */
.bk-post-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.bk-post-layout--aside-start > .bk-post-layout__aside { gap: var(--space-7); }

/* Snapshot list (harvest cost handover): a <dl class="bk-snapshot"> in
   Custom HTML, after a .bk-eyebrow--strong label. Each pair is a <div>
   with a hairline above; a value that is data takes .bk-snapshot__mono. */
.bk-snapshot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0; /* the label's own 12px bottom margin sets it off */
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-lh);
}
.bk-snapshot > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-hairline);
}
.bk-snapshot dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.bk-snapshot dd {
  margin: 0;
  color: var(--text-body);
}
.bk-snapshot .bk-snapshot__mono {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-body-sm-lh);
}
/* (0,2,0): clear of core's flow gap, see above. */
.wp-block-group.bk-post-layout__aside > * { margin: 0; }
:is(.bk-post__body, .is-root-container) .bk-post-layout__aside p.bk-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  color: var(--text-muted);
}
/* 15a's strong label, over the muted one above; same (0,3,1), later. */
:is(.bk-post__body, .is-root-container) .bk-post-layout__aside p.bk-eyebrow--strong { color: var(--text-strong); }
/* Contents rail: a group holding the eyebrow and a core List with class
   "bk-toc bk-toc--rail". A hairline on
   the left, one link a row, each a 44px tap target, no underline. (0,3,1)
   beats the body link rule. */
:is(.bk-post__body, .is-root-container) ul.bk-toc.bk-toc--rail {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  border-left: var(--border-width) solid var(--border-hairline);
}
:is(.bk-post__body, .is-root-container) .bk-toc--rail a:not(.wp-element-button) {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-left: var(--space-3);
  color: var(--text-body);
  text-decoration: none;
  line-height: var(--type-body-sm-lh);
}
:is(.bk-post__body, .is-root-container) .bk-toc--rail a:not(.wp-element-button):is(:hover, :focus-visible) {
  color: var(--text-strong);
  text-decoration: underline;
}

/* Facts card: Custom HTML <div class="bk-card bk-card--pad-md bk-facts">
   with a label and a two-column <dl>. Numbers in .bk-facts__mono. */
:is(.bk-post__body, .is-root-container) .bk-facts p.bk-facts__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  line-height: var(--type-mono-sm-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-facts__list {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}
.bk-facts__list dt {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.bk-facts__list dd {
  margin: 0;
  color: var(--text-strong);
}
.bk-facts__list .bk-facts__mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

/* Author card (template-parts/author-card.php), closing the article
   column: photo left, 260px tall, text right; stacked on a phone. */
.bk-author-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  margin-top: var(--space-10);
}
.bk-author-card__photo {
  flex: 1 1 var(--author-photo-min);
  max-width: 100%;
  height: var(--author-photo-h);
  object-fit: cover;
  display: block;
}
.bk-author-card__body {
  flex: 1 1 var(--author-body-min);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.bk-author-card__kicker {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.bk-author-card__name {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.bk-author-card__role {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--text-body);
}
/* (0,2,1) beats the body link rule's underline weight and Astra's a:hover. */
.bk-author-card a.bk-author-card__email {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  color: var(--text-link);
}
.bk-author-card a.bk-author-card__email:is(:hover, :focus) { color: var(--text-link-hover); }

/* ---- 5 Keep Reading (template-parts/related-posts.php) ---------------- */

/* A white band between the CTA and the newsletter, so the two dark bands no
   longer meet. Cards take the blog's post card, image at 16:10. */
.bk-related__title { margin: 0; }
.bk-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--related-card-min)), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.bk-post-card--related .bk-post-card__media img { aspect-ratio: 16 / 10; }
.bk-post-card--related:hover { border-color: var(--bk-leaf-300); }
.bk-related__body { gap: var(--space-2); }
.bk-related__kind {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.bk-related__excerpt {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---- 5 Centred CTA band (bk_post_cta() with a lead) ------------------- */

.bk-post-cta--centered .bk-post-cta__inner {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-7);
  max-width: calc(var(--container-narrow) + 2 * var(--gutter-inline));
  text-align: center;
}
.bk-post-cta--centered .bk-post-cta__title {
  max-width: none;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: var(--fw-black);
  text-wrap: balance;
}
/* --type-display-2 from 720px (harvest cost handover), as the callout. */
@media (min-width: 720px) {
  .bk-post-cta--centered .bk-post-cta__title {
    font-size: var(--type-display-2-size);
    line-height: var(--type-display-2-lh);
    letter-spacing: var(--type-display-2-ls);
  }
}
.bk-post-cta__lead {
  margin: var(--space-4) 0 0;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--bk-graphite-300);
  text-wrap: balance;
}
/* Call line under the buttons; the number in mono, white. (0,2,1) beats
   Astra's a:hover, a:focus. */
.bk-post-cta__phone {
  margin: calc(-1 * var(--space-1)) 0 0; /* 28px under the buttons, as the handover's 20px gap + 8px */
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--bk-graphite-300);
}
.bk-post-cta__phone a:is(:link, :visited, :hover, :focus) {
  font-family: var(--font-mono);
  color: var(--text-inverse);
}
.bk-post-cta--centered .bk-post-cta__actions {
  justify-content: center;
  gap: var(--space-3);
}
/* "Calculate Your Compliance Cost" is wider than a phone's column at the lg
   size, and a pill never wraps, so the button ran off the band at 375px
   (seen in a render, 28 Sep). Below 480px the buttons go full width with
   body-sm text, still 54px tall. */
@media (max-width: 479px) {
  .bk-post-cta--centered .bk-post-cta__actions { width: 100%; }
  .bk-post-cta--centered .bk-post-cta__actions .bk-btn {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-4);
    font-size: var(--type-body-sm-size);
  }
}

/* ======================================================================
 * 2026-09-28-blog-most-popular: the Most Popular page's period selector
 * ======================================================================
 * templates/most-popular.php. Three links (All time, Last 90 days, Last
 * 30 days) wearing the pill tabs from components.css (.bk-tabs--pill), in a
 * <nav><ul>. Only what the links need on top of the component:
 *   - list reset: Astra's ul margin (0,0,1) is beaten at (0,1,0);
 *   - 44px targets: the component's 8px padding gives about 36px;
 *   - colours at (0,2,1), which Astra's a:hover, a:focus (0,1,1) can't
 *     reach. Inactive labels use graphite-600: the component's text-muted
 *     (graphite-500) on graphite-100 is 4.0:1, under AA for 15px text;
 *     graphite-600 is 6.4:1;
 *   - a focus ring, since Astra's a:focus-visible dotted outline (0,1,1)
 *     would otherwise be the only one.
 * The active link carries aria-current as well as the component's
 * --active class; the class drives the look.
 */
.bk-period {
  margin-bottom: var(--space-7);
}
.bk-period__list {
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  list-style: none;
}
.bk-period__list > li {
  margin: 0;
}
.bk-period a.bk-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--bk-graphite-600);
  text-decoration: none;
}
.bk-period a.bk-tabs__tab:hover,
.bk-period a.bk-tabs__tab--active {
  color: var(--text-strong);
}
.bk-period a.bk-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Three labels in one pill need about 350px at the component's 16px side
   padding; a 375px phone has 343px inside the gutters. */
@media (max-width: 479px) {
  .bk-period a.bk-tabs__tab {
    padding-inline: var(--space-3);
    font-size: var(--type-caption-size);
  }
}

/* ---- 6 Post pieces, 2 Oct 2026 ----------------------------------------- */
/* OCM readiness and compliant harvest handovers (to-theme tickets
   2026-10-01-triage-ocm-readiness-post and
   2026-10-02-triage-compliant-harvest-metrc-post). Their components are
   astra-overrides.css §24; these are the parts only a post has. */

/* Featured-image caption (single-post.php, bk_media_caption post meta). */
.bk-post__caption {
  margin-top: var(--space-3);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
}

/* A post whose body is a .bk-post-layout (single-post.php adds
   .bk-post--wide): the header and featured image take the layout's 1200px
   container, so the badge, h1, byline, photo and article share one left
   edge. The h1 and dek keep the 720px measure. */
.bk-post--wide .bk-post__header,
.bk-post--wide .bk-post__media {
  max-width: calc(var(--container-max) + 2 * var(--gutter-inline));
}
.bk-post--wide :is(.bk-post__title, .bk-post__dek) { max-width: var(--container-narrow); }

/* Sticky right rail: .bk-post-layout--sticky keeps the default order, the
   aside after the article, so a phone reads the article first and the
   aside follows it (compliant harvest §3.7 and Q3: never above). From 960px
   the aside pins as the left rail of --aside-start does. The grid's
   align-items:start (above) is what lets it stick. */
@media (min-width: 960px) {
  .bk-post-layout--sticky > .bk-post-layout__aside {
    position: sticky;
    top: var(--space-7);
  }
  .admin-bar .bk-post-layout--sticky > .bk-post-layout__aside {
    top: calc(var(--wp-admin--admin-bar--height) + var(--space-7));
  }
}

/* A hand-written a.bk-btn in a post body (the product callout, the aside
   card). The body link rule (§3, (0,2,1), (0,3,1) on hover) would underline
   it and paint it link green. (0,3,1) and (0,4,1) restore the variants. */
:is(.bk-post__body, .is-root-container) a.bk-btn:not(.wp-element-button) { text-decoration: none; }
:is(.bk-post__body, .is-root-container) a.bk-btn--primary:not(.wp-element-button),
:is(.bk-post__body, .is-root-container) a.bk-btn--primary:not(.wp-element-button):is(:hover, :focus) {
  color: var(--accent-contrast);
}
:is(.bk-post__body, .is-root-container) a.bk-btn--secondary:not(.wp-element-button),
:is(.bk-post__body, .is-root-container) a.bk-btn--secondary:not(.wp-element-button):focus {
  color: var(--bk-leaf-800);
}
:is(.bk-post__body, .is-root-container) a.bk-btn--secondary:not(.wp-element-button):hover {
  color: var(--accent-contrast);
}

/* Aside CTA card (compliant harvest §3.7): Custom HTML
   <div class="bk-card bk-card--pad-md bk-aside-cta"> with a title, one
   line and a full-width sm button. The label may wrap: the rail is
   260-320px and "Get a Free Compliance Audit" won't fit at 260 on one
   line. */
.bk-aside-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bk-aside-cta__title {
  font-family: var(--font-display);
  font-size: var(--type-body-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.bk-aside-cta__text {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--text-muted);
}
.bk-aside-cta .bk-btn {
  height: auto;
  min-height: 34px;
  margin-top: var(--space-1);
  padding-block: var(--space-2);
  white-space: normal;
  text-align: center;
}