/* ==========================================================================
   leapbuzz blog-post base styles
   Shared by all blog posts. Loaded after tokens.css and platforms.css.
   Individual posts may add page-specific overrides via inline <style>.
   ========================================================================== */

/* Blog post layout --------------------------------------------------------- */
/* Template A: post-hero = section background. Template B: figure.post-hero = hero image.
   Use :not(figure) so section styles don't bleed onto Template B's image figure. */
.post-hero:not(figure),
.post-header { padding: clamp(48px, 6vw, 100px) clamp(20px, 4vw, 80px) clamp(24px, 3vw, 40px); background: var(--paper); }
.post-hero-inner,
.post-header-inner { max-width: 920px; margin: 0 auto; }
.post-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; }
.post-title { font-family: var(--display); font-weight: 700; font-size: clamp(38px,5.5vw,76px); line-height: 1.12; color: var(--ink); margin-bottom: 24px; }
.post-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); margin: clamp(20px, 2.4vw, 32px) 0 0; display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); align-items: center; }
.post-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post-meta a:hover { color: var(--brand); }
/* Template A hero image wrapper */
.post-hero-figure { max-width: 1200px; margin: clamp(24px, 3vw, 48px) auto clamp(40px, 5vw, 80px); padding: 0 clamp(20px, 4vw, 80px); }
.post-hero-figure img { width: 100%; height: auto; display: block; border-radius: 6px; }
/* Template B hero image: figure.post-hero — reset section padding, style as image */
figure.post-hero { padding: 0; background: none; max-width: 1200px; margin: clamp(24px, 3vw, 48px) auto clamp(40px, 5vw, 80px); display: block; }
figure.post-hero img { width: 100%; height: auto; display: block; border-radius: 6px; }
.post-bluf { background: var(--paper-warm); padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 80px); }
.post-bluf-inner { max-width: 920px; margin: 0 auto; }
.post-bluf-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0 0 clamp(12px, 1.4vw, 18px); }
.post-bluf-text { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); margin: 0; }
/* Subtitle / deck text (both templates) */
.post-sub { font-family: var(--body); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--ink-fade); margin: 0 0 clamp(16px, 2vw, 24px); }
/* Template B meta spans */
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-fade); }
.meta-sep { color: var(--ink-fade); margin: 0 4px; opacity: 0.5; }

/* Template A body */
.post-body { background: var(--paper); padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 80px) clamp(60px, 8vw, 120px); }
.post-body-inner { max-width: 920px; margin: 0 auto; }
/* Template B body */
.post-body-wrap { background: var(--paper); padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 80px) clamp(60px, 8vw, 120px); }
.post-content { max-width: 920px; margin: 0 auto; }
.post-lede { font-family: var(--body); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--ink); margin: 0 0 clamp(28px, 3.5vw, 48px); }
/* Article wrapper (Template B) */
.post-wrap { display: block; }
.post-section { margin: 0 0 clamp(40px, 5vw, 72px); scroll-margin-top: 80px; }
.post-section h2 { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--ink); margin: 0 0 20px; }
.post-body p { font-family: var(--body); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; color: var(--ink); margin: 0 0 clamp(14px, 1.6vw, 20px); }
.post-body p code { font-family: var(--mono); font-size: 0.92em; background: var(--paper-warm); padding: 2px 6px; border-radius: 3px; }
.post-howto { font-family: var(--body); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--ink); margin: 0 0 clamp(18px, 2vw, 24px); padding-left: clamp(20px, 2.4vw, 32px); }
.post-howto li { margin-bottom: clamp(10px, 1.2vw, 14px); }
.post-table-wrap { margin: 24px 0 32px; overflow-x: auto; }
.post-table { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: 14.5px; line-height: 1.4; }
.post-table caption { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); padding-bottom: 12px; text-align: left; caption-side: top; }
.post-table th, .post-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(10,10,9,0.08); vertical-align: top; }
.post-table th { background: var(--paper-warm); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink); }
.post-faq { background: var(--paper-warm); padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 80px); }
.post-faq-inner { max-width: 920px; margin: 0 auto; }
.post-faq h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; color: var(--ink); margin: 0 0 clamp(24px, 3vw, 40px); }
.faq-grid { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); }
.faq-item { background: var(--paper); border: 1px solid rgba(10,10,9,0.08); border-radius: 8px; padding: 0; }
.faq-item summary { font-family: var(--body); font-weight: 700; font-size: clamp(15px, 1.1vw, 17px); color: var(--ink); padding: clamp(14px, 1.6vw, 18px) clamp(18px, 2vw, 24px); cursor: pointer; list-style: none; position: relative; padding-right: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 22px; line-height: 1; color: var(--brand); transition: opacity 180ms; }
.faq-item[open] summary::after { content: "\2013"; transform: translateY(-55%); }
.faq-content { padding: 0 clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 18px); }
.faq-content p { font-family: var(--body); font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: var(--ink); margin: 0; }
.post-related { background: var(--paper); padding: clamp(32px, 4vw, 60px) clamp(20px, 4vw, 80px); }
.post-related-inner { max-width: 920px; margin: 0 auto; }
.post-related h3 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0 0 18px; }
.post-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.post-related a { font-family: var(--body); font-size: 16px; color: var(--ink); border-bottom: 1px solid rgba(10,10,9,0.18); padding-bottom: 1px; }
.post-related a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.post-related-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }

/* Table of contents (both templates) */
.post-toc, .post-toc-inner { background: var(--paper-warm); border-radius: 8px; padding: clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 28px); margin: 0 0 clamp(32px, 4vw, 56px); max-width: 920px; }
.post-toc-title { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px; }
.post-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.post-toc-list li { font-family: var(--body); font-size: 14.5px; line-height: 1.4; }
.post-toc-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(10,10,9,0.12); padding-bottom: 1px; }
.post-toc-list a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Author card (both templates) */
.post-author-block, .post-author-card { display: flex; align-items: flex-start; gap: 16px; padding: clamp(20px, 2.4vw, 28px); background: var(--paper-warm); border-radius: 8px; margin: 0 0 clamp(32px, 4vw, 48px); max-width: 920px; }
.post-author-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.post-author-text, .post-author-info { flex: 1; }
.post-author-name { font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.post-author-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
.post-author-bio { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--ink-fade); margin: 0; }

/* ==========================================================================
   Reading-rhythm spacing layer (founder directive 2026-07-15, P-021).
   Scoped under main#main so it outranks per-post carried styles regardless
   of document order. Governs line spacing, paragraph gaps, section gaps,
   and sub-heading breathing room across ALL blog posts, both cohorts.
   ========================================================================== */

/* Paragraphs: comfortable long-form measure */
main#main .post-body p,
main#main .post-body-wrap p,
main#main .post-section p {
  line-height: 1.75;
  margin: 0 0 clamp(18px, 2vw, 26px);
}

/* Sections: clear separation between major content blocks */
main#main .post-section {
  margin: 0 0 clamp(36px, 4.5vw, 60px);
}

/* Section headings (h2): generous air above, tighter below */
main#main .post-body h2,
main#main .post-body-wrap h2,
main#main .post-section h2 {
  margin: clamp(32px, 4vw, 52px) 0 clamp(14px, 1.6vw, 20px);
  line-height: 1.22;
}
/* First heading in a section keeps the section gap, not a doubled one */
main#main .post-section > h2:first-child,
main#main .post-body-inner > h2:first-child {
  margin-top: 0;
}

/* Sub-headings (h3/h4): breathing room so runs of copy don't feel condensed */
main#main .post-body h3,
main#main .post-body-wrap h3,
main#main .post-section h3 {
  margin: clamp(26px, 3.2vw, 42px) 0 clamp(10px, 1.2vw, 14px);
  line-height: 1.3;
}
main#main .post-body h4,
main#main .post-body-wrap h4,
main#main .post-section h4 {
  margin: clamp(28px, 3.2vw, 40px) 0 clamp(10px, 1.2vw, 14px);
  line-height: 1.35;
}

/* Lists: same rhythm as paragraphs, readable item gaps */
main#main .post-body ul,
main#main .post-body ol,
main#main .post-body-wrap ul,
main#main .post-body-wrap ol {
  line-height: 1.75;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-left: clamp(22px, 2.6vw, 34px);
}
main#main .post-body li,
main#main .post-body-wrap li {
  margin-bottom: clamp(8px, 1vw, 12px);
}
main#main .post-toc-list li,
main#main .post-related li {
  margin-bottom: 0;
}

/* Tables and callouts: clear vertical separation from copy */
main#main .post-table-wrap,
main#main .post-body table,
main#main .post-body-wrap table {
  margin-top: clamp(28px, 3.2vw, 40px);
  margin-bottom: clamp(32px, 3.8vw, 48px);
}
main#main .post-callout,
main#main aside[class*="callout"] {
  margin: clamp(32px, 3.8vw, 48px) 0;
}
main#main blockquote {
  margin: clamp(32px, 3.8vw, 48px) 0;
  line-height: 1.7;
}

/* FAQ answers: match body rhythm */
main#main .faq-a p,
main#main .faq-content p {
  line-height: 1.7;
  margin: 0 0 clamp(12px, 1.4vw, 16px);
}
main#main .faq-a p:last-child,
main#main .faq-content p:last-child {
  margin-bottom: 0;
}

/* Section-block vertical padding: moderate (founder feedback 2026-07-15) */
main#main .post-faq {
  padding-top: clamp(36px, 4.5vw, 64px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
}
/* FAQ headline sits close to its items */
main#main .post-faq h2 {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
main#main .post-faq-inner > p {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}

/* ==========================================================================
   FAQ template (LOCKED 2026-07-15, founder directive): condensed, clean,
   modern. Divider-list accordion, no padded cards, tight question rhythm.
   This is THE FAQ template for all blog posts (Faq.astro renders it).
   ========================================================================== */
main#main .faq-list,
main#main .faq-grid {
  display: block;
}
main#main .post-faq .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 9, 0.12);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
main#main .post-faq .faq-item:first-child {
  border-top: 1px solid rgba(10, 10, 9, 0.12);
}
main#main .faq-item summary {
  padding: 12px 36px 12px 0;
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 600;
  line-height: 1.4;
}
main#main .faq-item summary::after {
  right: 4px;
  font-size: 18px;
}
main#main .faq-a,
main#main .faq-content {
  padding: 0 36px 14px 0;
}
main#main .faq-a p,
main#main .faq-content p {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  margin: 0 0 8px;
}
main#main .faq-a p:last-child,
main#main .faq-content p:last-child {
  margin-bottom: 0;
}
main#main .faq-a ul, main#main .faq-content ul,
main#main .faq-a ol, main#main .faq-content ol {
  margin: 0 0 8px;
  padding-left: 20px;
  line-height: 1.55;
  font-size: clamp(14px, 1vw, 15.5px);
}
main#main .faq-a li, main#main .faq-content li {
  margin-bottom: 3px;
}

/* End-matter (author block after related): centered content column */
main#main .post-endmatter {
  padding: 0 clamp(20px, 4vw, 80px) clamp(40px, 5vw, 72px);
}
main#main .post-endmatter .post-author-block {
  max-width: 920px;
  margin: 0 auto;
}

/* Repeated template blocks that sit at article top level: always centered on
   the 920px content column with safe gutters (founder QA 2026-07-15; the old
   per-post CSS provided this per cohort, the unified template provides it once) */
main#main .post-wrap > .post-toc,
main#main .post-wrap > nav.post-toc,
main#main .post-toc {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2 * clamp(20px, 4vw, 80px));
}
@media (min-width: 1100px) {
  main#main .post-toc { width: 100%; }
}

/* ==========================================================================
   Intro band: TLDR (BLUF) + Table of contents, side by side on desktop,
   stacked TLDR-first on mobile (founder concept 2026-07-15, design call:
   BLUF left as primary content ~62%, TOC as right rail ~38%).
   ========================================================================== */
main#main .post-intro {
  padding: 0 clamp(20px, 4vw, 80px);
  margin: 0 0 clamp(32px, 4vw, 56px);
}
main#main .post-intro-grid {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
main#main .post-intro .post-bluf {
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 8px;
}
main#main .post-intro .post-bluf-inner {
  max-width: none;
}
main#main .post-intro .post-toc,
main#main .post-intro nav.post-toc,
main#main .post-intro section.post-toc {
  width: 100%;
  max-width: none;
  margin: 0;
}
main#main .post-intro .post-toc-inner {
  margin: 0;
  max-width: none;
}
/* TOC alone (no BLUF): full content-column width */
main#main .post-intro-toc:only-child {
  grid-column: 1 / -1;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 880px) {
  main#main .post-intro-grid {
    grid-template-columns: 1fr;
  }
}

/* Related column: the unified 920px column always wins over carried
   per-post CSS (53 posts carried a 1100px variant) */
main#main .post-related-inner {
  max-width: 920px;
}

/* Citation links: subtle inline reference styling (was an unstyled class) */
main#main a.citation-link {
  font-size: 0.92em;
  color: var(--ink-fade);
  text-decoration: underline;
  text-underline-offset: 2px;
}
main#main a.citation-link:hover {
  color: var(--brand);
}

/* Intro band vs the floating lead-form panel: the wave-3 carried CSS reserves
   380px right for the panel with !important on *-inner elements, which crushes
   the band's grid cells. Neutralize inside the band and give the BAND the same
   reservation so it never underlaps the panel. */
@media (min-width: 981px) {
  main#main .post-intro .post-bluf-inner,
  main#main .post-intro .post-toc-inner {
    max-width: none !important;
    margin-right: 0 !important;
  }
  main#main .post-intro-grid {
    margin-right: max(0px, min(380px, calc(100vw - 1000px)));
  }
}

/* Intro band v2 (founder 2026-07-15): ONE shared block. The bottomline (65%)
   and Table of contents (35%) live in a single card, separated by a vertical
   divider; reduced padding. Mobile: stacked, divider turns horizontal. */
main#main .post-intro-grid {
  grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: 0;
  background: var(--paper-warm);
  border-radius: 8px;
  overflow: hidden;
}
main#main .post-intro .post-bluf {
  background: transparent;
  border-radius: 0;
  padding: clamp(16px, 1.8vw, 26px);
  height: 100%;
}
main#main .post-intro-toc {
  border-left: 1px solid rgba(10, 10, 9, 0.12);
  min-width: 0;
}
main#main .post-intro .post-toc,
main#main .post-intro nav.post-toc,
main#main .post-intro section.post-toc,
main#main .post-intro .post-toc-inner {
  background: transparent;
  border-radius: 0;
  padding: clamp(16px, 1.8vw, 26px);
  margin: 0;
  height: 100%;
}
main#main .post-intro .post-toc .post-toc-inner {
  padding: 0; /* avoid double padding when both wrapper and inner exist */
}
/* TOC alone (no bottomline): plain single card, no divider */
main#main .post-intro-toc:only-child {
  border-left: 0;
}
@media (max-width: 880px) {
  main#main .post-intro-toc {
    border-left: 0;
    border-top: 1px solid rgba(10, 10, 9, 0.12);
  }
}

/* Intro band v3 (founder 2026-07-15): Table of contents LEFT (35%),
   bottomline RIGHT (65%). DOM keeps bottomline first (mobile stacks it first;
   AI extraction reads it first); grid placement swaps them on desktop. */
main#main .post-intro-grid {
  grid-template-columns: minmax(240px, 35fr) minmax(0, 65fr);
}
main#main .post-intro-bluf {
  grid-column: 2;
  grid-row: 1;
}
main#main .post-intro-toc {
  grid-column: 1;
  grid-row: 1;
  border-left: 0;
  border-right: 1px solid rgba(10, 10, 9, 0.12);
}
main#main .post-intro-toc:only-child {
  grid-column: 1 / -1;
  border-right: 0;
}
@media (max-width: 880px) {
  main#main .post-intro-bluf,
  main#main .post-intro-toc {
    grid-column: 1;
    grid-row: auto;
  }
  main#main .post-intro-toc {
    border-right: 0;
    border-top: 1px solid rgba(10, 10, 9, 0.12);
  }
}

/* In-body accordions (details.faq-item used inside posts, e.g. self-check
   checklists): same divider-list treatment as the FAQ template. No box
   outline; a line separator is enough (founder 2026-07-15). */
main#main .faq-grid {
  display: block;
}
main#main .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 9, 0.12);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
main#main .faq-item:first-child {
  border-top: 1px solid rgba(10, 10, 9, 0.12);
}
main#main .faq-item summary {
  padding: 12px 36px 12px 0;
}
main#main .faq-item summary::after {
  right: 4px;
}

/* Type scale trim (founder 2026-07-15): headline, TOC, and bottomline were
   oversized. Editorial but restrained. */
main#main .post-title {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.14;
}
main#main .post-intro .post-bluf-text {
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.55;
}
main#main .post-intro .post-bluf-eyebrow {
  font-size: 10.5px;
}
main#main .post-intro .post-toc-list li,
main#main .post-intro .post-toc li,
main#main .post-intro .post-toc a {
  font-size: 13px;
  line-height: 1.45;
}
main#main .post-intro .post-toc h2,
main#main .post-intro .post-toc .post-toc-title {
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
  font-style: normal;
}

/* TOC hanging indent (founder 2026-07-15): wrapped entry text must align
   under the TEXT, never under the number. Numbers pin left; the entry text
   block starts at a fixed indent, so second lines start at the same x. */
main#main .post-toc li {
  position: relative;
  padding-left: 30px;
  display: block;
}
main#main .post-toc li::before {
  position: absolute;
  left: 0;
  top: 0;
  margin-right: 0;
}

/* FAQ belongs to the post (founder 2026-07-15): trim the dead space between
   the last body section and the FAQ block. */
main#main .post-body,
main#main .post-body-wrap {
  padding-bottom: clamp(20px, 2.4vw, 36px);
}
main#main .post-body .post-section:last-child,
main#main .post-body-wrap .post-section:last-child,
main#main .post-body-inner > .post-section:last-child {
  margin-bottom: 0;
}
main#main .post-faq {
  padding-top: clamp(24px, 2.8vw, 40px);
  padding-bottom: clamp(28px, 3.2vw, 48px);
}

/* Editorial heading scale (founder 2026-07-15): in-article headings sit close
   to the text they head. h1 52 max > h2 ~26 > h3 ~20 > body 17. The previous
   32-38px in-body headings were landing-page scale, not editorial. */
main#main .post-body h2,
main#main .post-body-wrap h2,
main#main .post-section h2,
main#main .post-h2,
main#main .post-faq h2 {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.25;
}
main#main .post-body h3,
main#main .post-body-wrap h3,
main#main .post-section h3 {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.3;
}
main#main .post-body h4,
main#main .post-body-wrap h4,
main#main .post-section h4 {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.35;
}
main#main .post-cta-headline {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.22;
}

/* ==========================================================================
   Post hero band (founder 2026-07-15): feature image LEFT, title +
   description RIGHT, modeled on the blog index lead story. DOM keeps text
   first so mobile stacks title/description before the image.
   ========================================================================== */
main#main .post-hero-band {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas: "img text";
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
main#main .post-hero-band .post-header-inner {
  grid-area: text;
  max-width: none;
  margin: 0;
}
main#main .post-hero-band figure.post-hero {
  grid-area: img;
  margin: 0;
  padding: 0;
  max-width: none;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-warm);
  aspect-ratio: 16 / 10;
}
main#main .post-hero-band figure.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
main#main .post-hero-band .post-title {
  font-size: clamp(27px, 2.9vw, 42px);
  line-height: 1.14;
  margin-bottom: 16px;
}
main#main .post-header {
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
@media (max-width: 880px) {
  main#main .post-hero-band {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "img";
  }
}

/* Hero band clears the floating lead panel, same reservation as the intro band */
@media (min-width: 981px) {
  main#main .post-hero-band {
    margin-right: max(0px, min(380px, calc(100vw - 1000px)));
    margin-left: auto;
  }
}

/* Byline: single line on desktop (founder 2026-07-15). Smaller, tighter mono
   with heavier weight; author name in link blue to signal the hyperlink. */
main#main .post-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  gap: 7px;
  color: var(--ink-fade);
}
main#main .post-meta a {
  color: #0A66C2;
  font-weight: 700;
}
main#main .post-meta a:hover {
  color: var(--brand);
}
@media (min-width: 1100px) {
  main#main .post-hero-band .post-meta {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Canonical end-of-post CTA (founder 2026-07-15): one conversion moment,
   after FAQ + related, seamless with the post. Styles the default CTA and
   any bespoke extracted CTA uniformly. */
main#main .post-cta-block,
main#main .post-cta {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 80px);
  margin: 0;
}
main#main .post-cta-block-inner,
main#main .post-cta-inner,
main#main .post-cta > div {
  max-width: 920px;
  margin: 0 auto;
}
main#main .post-cta-block .post-cta-eyebrow,
main#main .post-cta .post-cta-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}
main#main .post-cta-block .post-cta-headline,
main#main .post-cta h2,
main#main .post-cta-block h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.22;
  color: var(--paper);
  margin: 0 0 10px;
}
main#main .post-cta-block .post-cta-sub,
main#main .post-cta p {
  font-family: var(--body);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(252, 252, 250, 0.85);
  margin: 0 0 18px;
  max-width: 62ch;
}
main#main .post-cta-block .post-cta-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brand);
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
}
main#main .post-cta-block .post-cta-link:hover {
  background: var(--paper);
  color: var(--ink);
}
/* bespoke .post-cta links keep their carried button styling (orange bg +
   white label); forcing brand-colored text made orange-on-orange */

/* CTA alignment: fully CENTERED closing band, one rule for every post
   (founder 2026-07-15: no mixed alignment; description centers too) */
main#main .post-cta-block-inner,
main#main .post-cta-inner,
main#main .post-cta > div,
main#main .post-cta,
main#main .post-cta-block {
  text-align: center;
}
main#main .post-cta-block .post-cta-headline,
main#main .post-cta h2,
main#main .post-cta-block h2 {
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}
main#main .post-cta-block .post-cta-sub,
main#main .post-cta p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
main#main .post-cta-block .post-cta-eyebrow,
main#main .post-cta .post-cta-eyebrow {
  text-align: center;
}

/* CTA measure fix (founder 2026-07-15): description was capped at 62ch and
   filled only ~60% of the line. One shared inner measure; text fills it,
   wrapping balanced so multi-line text centers evenly. */
main#main .post-cta-inner,
main#main .post-cta-block-inner,
main#main .post-cta > div {
  max-width: 860px;
}
main#main .post-cta-block .post-cta-headline,
main#main .post-cta h2,
main#main .post-cta-block h2 {
  max-width: none;
  text-wrap: balance;
}
main#main .post-cta-block .post-cta-sub,
main#main .post-cta p {
  max-width: none;
  text-wrap: pretty;
}