/* =========================================================================
   Branch and Root Consulting — Guides styles (hub + posts)
   Loads AFTER tokens.css and site.css. Reuses site primitives
   (.container, .section, .eyebrow, .btn, .page-hero, .cta-banner);
   defines only blog-specific components below.

   Colors come exclusively from tokens.css custom properties. The only
   literal values are the rgba(247,245,240,…) cream tints used inside the
   always-forest .post-cta block — the same convention site.css uses for
   .cta-banner / .section-forest (fixed-brand surfaces that do not flip
   in dark mode). Everything else cascades through the token flip in
   tokens.css, with a small prefers-color-scheme block at the end for
   accent adjustments (moss → moss-light), mirroring site.css.
   ========================================================================= */

/* ========================================================================
   HUB — category sections
   ======================================================================== */

.category-header { margin-bottom: var(--s-5); }
.category-header h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.65em;
}

/* Count badge — small-caps pill next to each category heading */
.count-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32em 0.9em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-anno);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--moss);
  white-space: nowrap;
}

/* ----- Post card grid: 1 col mobile / 2 col tablet / 3 col desktop ---- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
}
@media (min-width: 1080px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Post card ------------------------------------------------------ */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface-grad);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Moss hairline that draws across the top on hover — editorial accent */
.post-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--s-4);
  right: var(--s-4);
  height: 2px;
  background: var(--moss);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transform-origin: left;
  /* Fast retract: as the cursor moves across the grid, each card the cursor
     leaves snaps its line away quickly, so no trail of half-drawn lines
     lingers — only the card actually under the cursor ever shows the line. */
  transition: transform 140ms var(--ease);
}
.post-card:hover,
.post-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
  border-color: var(--line-hair);
}
/* Slow, elegant draw-in — applied only on the hovered/focused card. */
.post-card:hover::after,
.post-card:focus-within::after {
  transform: scaleX(1);
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-card-title {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: var(--track-tight);
}
.post-card-title a {
  color: var(--heading);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
/* Stretched link — the whole card is one click target / one tab stop */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.post-card:hover .post-card-title a,
.post-card:focus-within .post-card-title a { color: var(--moss); }

.post-card-excerpt {
  flex-grow: 1;
  max-width: none;
  color: var(--slate);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* "Read more →" affordance — sits under the stretched link, so it is
   clickable; aria-hidden in markup keeps card = one accessible link. */
.post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--s-1);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}
.post-card-more .arrow {
  font-weight: 400;
  transition: transform var(--dur) var(--ease);
}
.post-card:hover .post-card-more .arrow,
.post-card:focus-within .post-card-more .arrow { transform: translateX(4px); }

@media (max-width: 480px) {
  .post-card { padding: var(--s-3); }
  .post-card::after { left: var(--s-3); right: var(--s-3); }
}

/* ========================================================================
   POSTS — breadcrumb
   ======================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.7;
}
.breadcrumb a {
  color: var(--slate);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.breadcrumb a:hover {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.breadcrumb span[aria-hidden] { color: var(--line-hair); }
.breadcrumb [aria-current="page"] {
  color: var(--moss);
  letter-spacing: 0.06em;
}

/* ========================================================================
   POSTS — article reading column (≈70ch measure)
   ======================================================================== */
.post {
  width: 100%;
  max-width: calc(70ch + 2 * var(--s-3));
  margin-inline: auto;
  padding-inline: var(--s-3);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}

.post-title {
  font-size: clamp(1.9rem, 1.45rem + 1.7vw, 3rem);
  line-height: 1.04;
  margin-bottom: var(--s-3);
}

.post-meta {
  display: block;
  max-width: none;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-hair);
  margin-bottom: var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-anno);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
}

/* Opening lede — sans-serif, readable; also the Speakable target */
.post .post-lede {
  max-width: none;
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--body-fg);
}

/* ----- In-article typography ----------------------------------------- */
.post h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}
.post h2 em { font-style: italic; color: var(--moss); font-weight: 500; }
.post h3 {
  font-size: 1.18rem;
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}
.post p {
  max-width: none;
  line-height: 1.75;
}
.post p + p { margin-top: var(--s-3); }

.post ul,
.post ol {
  margin: var(--s-3) 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.6rem;
}
.post li {
  line-height: 1.65;
  padding-left: 0.35rem;
}
.post li::marker {
  color: var(--moss);
  font-weight: 600;
}

/* Em note block — editorial aside, e.g. <p class="post-note"><em>…</em></p> */
.post .post-note,
.post blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  max-width: none;
  background: var(--surface-2);
  border-left: 2px solid var(--moss);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
}
.post .post-note em,
.post blockquote em { color: var(--heading); }

/* ========================================================================
   POSTS — related articles aside
   ======================================================================== */
.related-posts {
  margin-top: var(--s-6);
  padding: var(--s-4);
  background: var(--surface-grad-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.related-posts h3 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--moss);
}
.related-posts h3::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.related-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-posts li { border-top: 1px solid var(--line-soft); }
.related-posts li:first-child { border-top: 0; }
.related-posts a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.8rem 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: var(--track-tight);
  color: var(--heading);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.related-posts a::after {
  content: "→";
  font-weight: 400;
  color: var(--moss);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.related-posts a:hover { color: var(--moss); }
.related-posts a:hover::after { transform: translateX(4px); }

/* ========================================================================
   POSTS — CTA block (always-forest, mirrors .cta-banner aesthetic)
   ======================================================================== */
.post-cta {
  position: relative;
  overflow: hidden;
  margin-top: var(--s-5);
  padding: clamp(2.5rem, 5vw, 4rem) var(--s-4);
  background: var(--forest-fixed);
  color: var(--cream-fixed);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--elev-2);
}
.post-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 520px 300px at 50% 100%, rgba(82, 148, 111, 0.24), transparent 60%);
  pointer-events: none;
}
.post-cta > * { position: relative; }
.post-cta h3 {
  margin: 0 auto;
  max-width: 20ch;
  color: var(--cream-fixed);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
}
.post-cta p {
  margin: var(--s-3) auto 0;
  max-width: 48ch;
  color: rgba(247, 245, 240, 0.88);
}
.post-cta .btn { margin-top: var(--s-4); }

/* ========================================================================
   FEATURED CARDS — category tag + read-time meta row
   ======================================================================== */

/* Meta row sits above the title; flexbox separates tag left / time right */
.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: nowrap;
}

/* Category tag — small-caps pill, extends count-badge visual language */
.post-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.8em;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-anno);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--moss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Sits behind the stretched link overlay but is still visible */
  position: relative;
  z-index: 1;
}

/* Read-time line — muted annotation weight */
.post-card-readtime {
  font-family: var(--font-body);
  font-size: var(--fs-anno);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ========================================================================
   COMPACT INDEX — Full Library section
   ======================================================================== */

/* Two-column layout on desktop via CSS columns; single on mobile */
.post-index {
  columns: 1;
  column-gap: var(--s-6);
}
@media (min-width: 780px) {
  .post-index { columns: 2; }
}

/* Category jump-nav pills (all-guides) + anchor offset under sticky nav */
.category-jumpnav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.category-jumpnav a {
  display: inline-block;
  padding: 0.4em 0.9em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--moss);
  background: var(--bone);
  border: 1px solid var(--line-hair);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.category-jumpnav a:hover,
.category-jumpnav a:focus-visible { background: var(--moss); color: var(--cream-fixed); }
.post-index-category { scroll-margin-top: var(--nav-h); }
.post-cta--mid { margin-bottom: var(--s-6); }

/* Hub mid-page conversion band */
.guides-mid-cta { text-align: center; padding-block: var(--s-7); }
.guides-mid-cta p { margin: 0 auto var(--s-4); max-width: 48ch; }

/* Each category group — avoid breaking across columns */
.post-index-group {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--s-5);
}
.post-index-group:last-child { margin-bottom: 0; }

/* Category heading — h3, small-caps, hairline rule underneath */
.post-index-category {
  margin: 0 0 var(--s-2);
  padding-bottom: 0.65em;
  border-bottom: 1px solid var(--line-hair);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--moss);
}

/* List — unstyled, comfortable vertical rhythm */
.post-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.post-index-list li {
  border-bottom: 1px solid var(--line-soft);
}
.post-index-list li:first-child {
  border-top: 1px solid var(--line-soft);
}

/* Links — plain, hover underline per site conventions */
.post-index-list a {
  display: block;
  padding: 0.7em 0.1em;
  font-family: var(--font-display);
  font-size: 1.01rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  color: var(--heading);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.post-index-list a:hover {
  color: var(--moss);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.post-index-list a:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ========================================================================
   POSTS — Field Note aside (process-proof callout from Branch & Root)
   Markup: <aside class="field-note">
             <span class="field-note-label">From the Field · Branch &amp; Root</span>
             <p>…</p>
           </aside>
   ======================================================================== */
.field-note {
  border-left: 3px solid var(--moss);
  background: var(--surface-grad);
  padding: var(--s-3) var(--s-4);
  margin-block: var(--s-4);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.field-note-label {
  display: block;
  margin-bottom: 0.5em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
}

.field-note p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--body-fg);
}

/* ========================================================================
   Dark mode — accent adjustments only (tokens flip the rest).
   Same mechanism as site.css: moss → moss-light, soft borders → line.
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  .count-badge { color: var(--moss-light); border-color: var(--line); }

  /* Featured card meta */
  .post-card-tag { color: var(--moss-light); border-color: var(--line); }
  .post-card-readtime { color: var(--slate); }

  /* Compact index */
  .post-index-category { color: var(--moss-light); border-bottom-color: var(--line); }
  .category-jumpnav a { color: var(--moss-light); border-color: var(--line); background: transparent; }
  .post-index-list li { border-bottom-color: var(--line); }
  .post-index-list li:first-child { border-top-color: var(--line); }
  .post-index-list a:hover { color: var(--moss-light); }
  .post-index-list a:focus-visible { outline-color: var(--moss-light); }

  .post-card { border-color: var(--line); }
  .post-card:hover,
  .post-card:focus-within { border-color: var(--line-hair); }
  .post-card::after { background: var(--moss-light); }
  .post-card:hover .post-card-title a,
  .post-card:focus-within .post-card-title a { color: var(--moss-light); }
  .post-card-more { color: var(--moss-light); }

  .breadcrumb a:hover { color: var(--moss-light); }
  .breadcrumb [aria-current="page"] { color: var(--moss-light); }

  .post h2 em { color: var(--moss-light); }
  .post li::marker { color: var(--moss-light); }
  .post .post-note,
  .post blockquote { border-left-color: var(--moss-light); }

  .related-posts { border-color: var(--line); }
  .related-posts li { border-top-color: var(--line); }
  .related-posts h3 { color: var(--moss-light); }
  .related-posts a:hover { color: var(--moss-light); }
  .related-posts a::after { color: var(--moss-light); }

  /* Field note */
  .field-note { border-left-color: var(--moss-light); }
  .field-note-label { color: var(--moss-light); }
}

/* ========================================================================
   Reduced motion — site.css already zeroes transition durations globally;
   also remove the card lift/slide transforms themselves.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .post-card:hover,
  .post-card:focus-within { transform: none; }
  .post-card::after { transition: none; }
  .post-card:hover .post-card-more .arrow,
  .post-card:focus-within .post-card-more .arrow { transform: none; }
  .related-posts a:hover::after { transform: none; }
  .post-index-list a { transition: none; }
}

/* ========================================================================
   HUB — Magazine-style editorial sections
   Added to rebrand the guides hub from FAQ-style to editorial magazine.
   All values from tokens.css — zero hardcoded hex.
   ======================================================================== */

/* ---- Hero mission annotation line ------------------------------------ */
.blog-mission {
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);
  line-height: 1.55;
  max-width: 52ch;
}
.blog-mission a {
  color: rgba(247, 245, 240, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(247, 245, 240, 0.35);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.blog-mission a:hover {
  color: var(--cream-fixed);
  text-decoration-color: rgba(247, 245, 240, 0.65);
}

/* ---- Seamless hero boundary -----------------------------------------------
   site.css masks the page-hero glow to fade over its bottom 28px. On most
   pages the next section is a contrasting colour, so that fade is invisible.
   Here the hero is followed by another forest band, so the mask edge showed
   as a faint partial-width seam. Drop the mask on this hero so the ONLY line
   at the boundary is the signature horizon divider placed just below it. */
.page-hero--seamless::before {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---- Lead Feature: forest band — single editorial column -------------- */
.blog-lead-feature {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
}
/* Radial glow — warm moss ambient from upper-left and lower-left */
.blog-lead-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 5% -15%, rgba(82, 148, 111, 0.13), transparent 60%),
    radial-gradient(ellipse 700px 400px at -5% 90%, rgba(82, 148, 111, 0.14), transparent 60%);
  pointer-events: none;
}
.blog-lead-feature .container {
  position: relative;
  /* Single editorial column: max-content at 1920 stays in the container, no
     sprawl. Content is capped so nothing reads across the full 1240px. */
}

/* Eyebrow sits above the headline. display:flex (not block) keeps the
   eyebrow on its own line AND preserves the base .eyebrow align-items:center
   that vertically centers the leading dash with the text. */
.blog-lead-feature > .container > .eyebrow {
  display: flex;
  margin-bottom: var(--s-3);
  position: relative;
}

/* Headline: Fraunces display, capped ~18ch so it wraps as 2-3 strong lines */
.blog-lead-feature-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--track-tighter);
  color: var(--cream-fixed);
  max-width: 18ch;
  margin: 0 0 var(--s-4);
}
.blog-lead-feature-headline em {
  font-style: italic;
  color: var(--moss-light);
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Standfirst: italic serif, comfortable measure */
.blog-lead-feature-standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.55;
  color: rgba(247, 245, 240, 0.86);
  max-width: 62ch;
  margin: 0 0 var(--s-4);
}

/* Meta row: inline tag + read-time, justified left, below standfirst */
.blog-lead-feature-meta {
  justify-content: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

/* Tag and read-time on dark band */
.blog-tag-dark {
  background: rgba(247, 245, 240, 0.10);
  border-color: rgba(247, 245, 240, 0.40);
  color: var(--moss-light);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.blog-readtime-dark {
  color: var(--cream-fixed);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CTA button — color fix: override the .section-forest a rule (cream text)
   that had higher specificity (0,2,0) than .btn-cream (0,1,0).
   Using :not(.btn) on band link rules is the hygenic fix; we also raise
   the button specificity here as a belt-and-suspenders guard. */
.section-forest a:not(.btn) {
  color: var(--cream-fixed);
  text-decoration-color: rgba(247, 245, 240, 0.45);
}
.section-forest a:not(.btn):hover {
  color: var(--bone);
}

/* Explicit forest-on-cream for btn-cream wherever it appears on a forest band */
.section-forest .btn-cream,
.section-forest .btn-cream:hover {
  color: var(--forest-fixed);
}

.blog-lead-feature-cta {
  /* margin-top is provided by .blog-lead-feature-meta margin-bottom above */
  position: relative;
  z-index: 1;
}

/* ---- Secondary Features: bone band, open editorial spread ------------ */
/* Cap inner content width to keep columns at a comfortable measure at 1920.
   At max container (1240px) minus padding the two columns are ~560px each —
   fine. But .container itself can grow; the wrapper cap keeps text measure
   inside comfortable reading territory on any display. */
.blog-secondary-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 72rem;   /* ~1152px — two comfortable ~540px reading columns */
}
@media (min-width: 900px) {
  .blog-secondary-spread {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}

.blog-secondary-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Right column: border-left hairline on desktop; top border on mobile */
.blog-secondary-col--right {
  border-top: 1px solid var(--line-hair);
  padding-top: var(--s-5);
}
@media (min-width: 900px) {
  .blog-secondary-col--right {
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--line-hair);
    padding-left: var(--s-6);
  }
}

.blog-secondary-feature-headline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  margin: 0;
}
.blog-secondary-feature-headline a {
  color: var(--heading);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.blog-secondary-feature-headline a:hover { color: var(--moss); }

.blog-secondary-feature-standfirst {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
}

/* ---- Library Link Band: wayfinding block to /guides/all-guides -------- */
/* Bone background, quieter than the CTA banner (no dark band).
   Editorial composition: eyebrow + heading + copy + single primary button.
   On desktop the content + action sit side-by-side; on mobile they stack. */
.blog-library-band { padding-block: clamp(3.5rem, 7vw, 6rem); }

.blog-library-band-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  /* Hairline top + bottom to delimit the wayfinding block without drama */
  border-top: 1px solid var(--line-hair);
  border-bottom: 1px solid var(--line-hair);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .blog-library-band-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
  }
}

.blog-library-band-content {
  flex: 1 1 auto;
  min-width: 0;
}
/* Override eyebrow margin-bottom inside band to tighten the stack */
.blog-library-band-content .eyebrow {
  margin-bottom: var(--s-2);
}

.blog-library-band-heading {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  color: var(--heading);
  max-width: 30ch;
  margin: 0 0 var(--s-2);
}

.blog-library-band-copy {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--slate);
  max-width: 55ch;
  margin: 0;
}

.blog-library-band-action {
  flex-shrink: 0;
}

/* ---- Grid overflow fix: force grid track to shrink below max-content -- */
/* post-card-tag is nowrap; without min-width:0 the 1fr track inherits the
   tag's max-content width and overflows at mobile. This matches the
   existing site.css convention (min-width:0 on flex/grid children). */
.post-grid > .post-card {
  min-width: 0;
}

/* ========================================================================
   HUB — Dark mode overrides for new editorial sections
   Forest band is brand-locked (no flip needed).
   Bone/cream sections and secondary spread use token cascade; only
   adjust accents that don't auto-flip.
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  /* Mission line in page-hero (forest — fixed, no flip) — already ok
     because it uses rgba(247,245,240,…) literal which is brand-locked */

  /* Secondary spread hairline */
  .blog-secondary-col--right {
    border-top-color: var(--line);
  }
  @media (min-width: 900px) {
    .blog-secondary-col--right {
      border-left-color: var(--line);
    }
  }

  /* Secondary feature headlines and standfirst cascade through tokens */
  .blog-secondary-feature-headline a:hover { color: var(--moss-light); }

  /* Library link band — hairlines and copy on dark page-bg */
  .blog-library-band-inner {
    border-top-color: var(--line);
    border-bottom-color: var(--line);
  }
  .blog-library-band-heading { color: var(--heading); }
  .blog-library-band-copy { color: var(--slate); }
}

/* ---- Reduced motion additions ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blog-secondary-feature-headline a { transition: none; }
  .blog-mission a { transition: none; }
  .blog-lead-feature-cta { transition: none; }
}