/* Reusable editorial figures. Paper, evidence and annotation share the existing
   marketing palette. Content is always present; motion only answers a choice. */
.blog-block {
  --bb-small: var(--blog-small);
  --bb-note: var(--blog-note);
  --bb-body: var(--blog-body);
  --bb-heading: clamp(1.65rem, 3vw, 2.2rem);
  --bb-finding: clamp(2rem, 4vw, 2.75rem);
  --bb-statistic: clamp(4.5rem, 10vw, 7.5rem);
  --bb-ease: cubic-bezier(0.22, 0.68, 0, 1.05);
  --bb-warm-shadow: color-mix(in srgb, var(--ink-900) 5%, transparent);

  position: relative;
  margin-block: var(--blog-space-7);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--bb-note);
  line-height: 1.6;
  overflow-wrap: anywhere;
  isolation: isolate;
  scroll-margin-block: var(--blog-space-9);
}
.blog-block *, .blog-block *::before, .blog-block *::after { box-sizing: border-box; }
.blog-block .bb-heading { margin-bottom: var(--blog-space-5); }
.blog-block .bb-heading h2 { font-family: var(--font-display); font-size: var(--bb-heading); font-weight: 400; line-height: 1.18; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.blog-block .bb-label { font-size: var(--bb-small); color: var(--blog-muted); margin: 0 0 var(--blog-space-3); }
.blog-block .bb-caption { font-size: var(--bb-small); color: var(--blog-muted); margin: var(--blog-space-5) 0 0; line-height: 1.65; }
.blog-block a { color: var(--blog-link); text-underline-offset: 0.2em; }
.blog-block [tabindex="-1"] { scroll-margin-block: var(--blog-space-9); }
.blog-block :focus-visible { outline: 2px solid var(--action-text); outline-offset: var(--blog-space-2); }
.blog-block [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.bb-story { padding: var(--blog-space-6); background: var(--well); border: 1px solid var(--blog-rule); }
.bb-story .bb-heading { max-width: 33rem; }
.bb-story-nav { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: var(--blog-space-4); border-bottom: 1px solid var(--ink-200); margin-bottom: var(--blog-space-6); }
.bb-story-nav a { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--blog-space-1) var(--blog-space-2); min-height: 2.75rem; padding: var(--blog-space-3) 0; font-size: var(--bb-small); font-weight: 600; line-height: 1.4; color: var(--ink-700); text-decoration: none; }
.bb-story-nav a::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--action-text); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--bb-ease); }
.bb-story-nav a:hover, .bb-story-nav a[aria-current] { color: var(--action-text); }
.bb-story-nav a[aria-current]::after { transform: scaleX(1); }
.bb-story-nav a span { color: var(--ink-500); font-weight: 400; font-variant-numeric: tabular-nums; }
.bb-story-desk { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--blog-space-6) var(--blog-space-7); }
.bb-story-desk > section { position: relative; min-width: 0; }
.bb-story-desk h3 { font-family: var(--font-body); font-size: var(--bb-small); font-weight: 600; line-height: 1.6; letter-spacing: 0; margin: 0 0 var(--blog-space-4); }
.bb-source-stack, .bb-answer-stack { display: grid; gap: var(--blog-space-4); }
.bb-source { position: relative; padding: var(--blog-space-4); border: 1px solid var(--ink-200); background: var(--paper); box-shadow: var(--blog-space-1) var(--blog-space-1) 0 var(--ink-100); transform: rotate(-0.6deg); transition: transform 300ms var(--bb-ease), border-color 220ms ease-out, box-shadow 220ms ease-out; }
.bb-source:nth-child(even) { transform: rotate(0.6deg); }
.bb-source-top { display: flex; align-items: center; justify-content: space-between; gap: var(--blog-space-3); margin-bottom: var(--blog-space-3); }
.bb-page-glyph { width: var(--blog-space-5); height: var(--blog-space-6); stroke: var(--ink-500); stroke-width: 1.25; }
.bb-source-index { font-size: var(--bb-small); color: var(--blog-muted); }
.bb-source h4 { font-family: var(--font-body); font-size: var(--bb-note); font-weight: 600; margin: 0 0 var(--blog-space-2); line-height: 1.45; }
.bb-source p { margin: 0; font-size: var(--bb-small); line-height: 1.7; color: var(--ink-700); }
.bb-answer { padding: var(--blog-space-4); background: var(--paper); border: 1px solid var(--ink-200); transition: transform 300ms var(--bb-ease), border-color 220ms ease-out, box-shadow 220ms ease-out; }
.bb-answer--ready { border-color: color-mix(in srgb, var(--action-text) 40%, var(--ink-100)); }
.bb-answer .bb-answer-status { display: flex; align-items: center; gap: var(--blog-space-2); font-size: var(--bb-small); font-weight: 600; color: var(--action-text); margin: 0 0 var(--blog-space-3); }
.bb-status-mark { display: inline-grid; place-items: center; width: var(--blog-space-5); height: var(--blog-space-5); border: 1px solid currentColor; border-radius: 50%; font-size: var(--bb-small); }
.bb-answer--review .bb-answer-status { color: var(--warn-text); }
.bb-answer--neutral .bb-answer-status { color: var(--ink-700); }
.bb-answer h4 { font-family: var(--font-display); font-size: var(--bb-finding); line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; margin: 0 0 var(--blog-space-3); }
.bb-answer .bb-answer-detail { font-size: var(--bb-note); line-height: 1.65; margin: 0; }
.bb-source-links { display: grid; gap: var(--blog-space-1); margin-top: var(--blog-space-4); padding-top: var(--blog-space-3); border-top: 1px solid var(--ink-100); font-size: var(--bb-small); }
.bb-source-links > span { color: var(--blog-muted); }
.bb-source-links a { padding-block: var(--blog-space-1); }
.bb-story-connection { position: absolute; width: var(--blog-space-7); height: 10rem; right: 100%; top: 25%; stroke: var(--ink-300); stroke-width: 1.5; overflow: visible; transition: stroke 240ms ease-out; }
.bb-story-handoff { grid-column: 1 / -1; border-top: 1px dashed var(--ink-300); padding-top: var(--blog-space-5); }
.bb-handoff-title { display: flex; align-items: baseline; gap: var(--blog-space-3); }
.bb-handoff-arrow { color: var(--action-text); font-size: var(--bb-finding); font-family: var(--font-display); line-height: 1; }
.bb-story-handoff ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blog-space-5); padding: 0; margin: var(--blog-space-3) 0 0; list-style: none; }
.bb-story-handoff ol li { padding: 0; margin: 0; }
.bb-handoff-item strong { display: block; font-size: var(--bb-note); font-weight: 600; }
.bb-handoff-item p { margin: var(--blog-space-2) 0; font-size: var(--bb-small); color: var(--ink-700); line-height: 1.7; }
.bb-handoff-links { display: flex; flex-wrap: wrap; gap: var(--blog-space-2) var(--blog-space-3); font-size: var(--bb-small); }
.bb-handoff-links a { padding-block: var(--blog-space-1); }
.bb-story[data-active-stage="sources"] .bb-source:not([data-selected="false"]), .bb-story [data-story-source][data-selected="true"] { transform: rotate(0deg); border-color: var(--action-text); box-shadow: var(--blog-space-1) var(--blog-space-1) 0 var(--action-wash); }
.bb-story[data-active-stage="answers"] .bb-answer:not([data-selected="false"]), .bb-story [data-story-answer][data-selected="true"] { transform: translateY(calc(var(--blog-space-1) * -1)); border-color: var(--action-text); box-shadow: 0 var(--blog-space-2) var(--blog-space-4) var(--bb-warm-shadow); }
.bb-story[data-active-stage="answers"] .bb-story-connection { stroke: var(--action-text); }
.bb-story[data-active-stage="handoff"] .bb-story-handoff { border-top-color: var(--action-text); }
.bb-story[data-active-stage="handoff"] .bb-handoff-arrow { transform: translateX(var(--blog-space-1)); transition: transform 300ms var(--bb-ease); }
.bb-story[data-in-view="false"] *, .bb-story[data-paused="true"] * { transition: none !important; animation-play-state: paused !important; }
.bb-evidence { border-block: 1px solid var(--ink-200); padding-block: var(--blog-space-6); }
.bb-evidence-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--blog-space-5); align-items: center; }
.bb-evidence--grid .bb-evidence-main { grid-template-columns: minmax(0, 1fr) minmax(6rem, 10.5rem); gap: var(--blog-space-6); }
.bb-evidence .bb-evidence-value { font-family: var(--font-display); font-size: var(--bb-statistic); font-weight: 400; line-height: 0.95; letter-spacing: -0.065em; color: var(--action-text); margin: 0 0 var(--blog-space-4); font-variant-numeric: lining-nums tabular-nums; }
.bb-evidence-value span { font-size: 0.52em; letter-spacing: -0.025em; margin-left: var(--blog-space-1); }
.bb-evidence .bb-evidence-statement { font-size: var(--bb-body); line-height: 1.55; margin: 0; max-width: 26rem; text-wrap: pretty; }
.bb-evidence-grid { display: block; width: 100%; height: auto; }
.bb-evidence-grid [data-dot="filled"] { fill: var(--action-text); }
.bb-evidence-grid [data-dot="empty"] { fill: var(--ink-200); }
.bb-evidence .bb-evidence-scope { margin: var(--blog-space-5) 0 0; color: var(--ink-700); font-size: var(--bb-note); line-height: 1.7; }
.bb-evidence-source { margin-top: var(--blog-space-5); font-size: var(--bb-small); line-height: 1.7; }
.bb-evidence-source p { margin: 0; }
.bb-evidence-source p > span { display: block; color: var(--blog-muted); }
.bb-evidence-source .bb-evidence-note { margin-top: var(--blog-space-3); color: var(--blog-muted); }
.bb-comparison { padding-block: var(--blog-space-2); }
.bb-comparison .bb-comparison-scroll { display: none; margin: 0 0 var(--blog-space-3); font-size: var(--bb-small); color: var(--blog-muted); }
.bb-comparison-table { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.bb-comparison table { width: 100%; border-collapse: collapse; font-size: var(--bb-note); line-height: 1.65; }
.bb-comparison caption { text-align: left; color: var(--ink-700); font-size: var(--bb-note); padding: 0 0 var(--blog-space-5); }
.bb-comparison th, .bb-comparison td { padding: var(--blog-space-4); vertical-align: top; text-align: left; border-bottom: 1px solid var(--ink-200); min-width: 0; }
.bb-comparison thead th { background: var(--well); font-size: var(--bb-small); font-weight: 600; border-top: 1px solid var(--ink-200); }
.bb-comparison tbody th { width: 24%; font-family: var(--font-display); font-size: var(--bb-body); font-weight: 500; line-height: 1.35; color: var(--ink-900); background: transparent; }
.bb-comparison td { width: 38%; color: var(--ink-700); }
.bb-comparison td p { margin: 0; }
.bb-comparison td .bb-comparison-source { margin-top: var(--blog-space-3); font-size: var(--bb-small); }

.bb-worked, .bb-budget, .bb-calculator { padding: var(--blog-space-6); background: var(--well); border-block: 1px solid var(--blog-rule); }
.bb-worked-entries { list-style: none; padding: 0; margin: 0; }
.bb-worked-entries > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--blog-space-5); padding: var(--blog-space-5) 0; margin: 0; border-top: 1px solid var(--blog-rule); }
.bb-worked-rail { display: flex; align-items: baseline; gap: var(--blog-space-3); }
.bb-worked-rail > span { color: var(--action-text); font-size: var(--bb-small); font-variant-numeric: tabular-nums; }
.bb-worked-rail h3 { font-size: var(--bb-note); font-family: var(--font-body); font-weight: 600; line-height: 1.5; margin: 0; }
.bb-worked-content { min-width: 0; }
.bb-worked-content > p, .bb-calculator-result > p { margin: 0; font-size: var(--bb-note); line-height: 1.65; }
.bb-worked-content > p + p, .bb-calculator-result > p + p { margin-top: var(--blog-space-3); }
.bb-worked-content .bb-worked-value, .bb-calculator-result .bb-worked-value { font-family: var(--font-display); color: var(--action-text); font-size: var(--bb-finding); line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bb-worked-content .bb-worked-note, .bb-calculator-result .bb-worked-note { color: var(--blog-muted); font-size: var(--bb-small); }
.bb-worked--timeline .bb-worked-rail { position: relative; display: block; padding-left: var(--blog-space-5); border-left: 2px solid var(--ink-200); }
.bb-worked--timeline .bb-worked-rail::before { content: ''; position: absolute; width: var(--blog-space-2); height: var(--blog-space-2); left: calc(var(--blog-space-1) * -1 - 1px); top: var(--blog-space-2); background: var(--action-text); border-radius: 50%; }
.bb-worked--timeline .bb-worked-rail > span { display: none; }
.bb-worked--steps .bb-worked-entries > li { grid-template-columns: minmax(0, 1fr); gap: var(--blog-space-3); }
.blog-block .bb-takeaway { margin: var(--blog-space-5) 0 0; padding-top: var(--blog-space-5); border-top: 2px solid var(--action-text); font-size: var(--bb-note); font-weight: 600; line-height: 1.65; }
.blog-block .bb-worked-sources { margin: var(--blog-space-4) 0 0; font-size: var(--bb-small); line-height: 1.7; }
.blog-block .bb-budget-unit { font-size: var(--bb-small); color: var(--blog-muted); margin: 0 0 var(--blog-space-5); }
.bb-budget-rows { margin: 0; display: grid; gap: var(--blog-space-6); }
.bb-budget-rows dt { font-size: var(--bb-note); font-weight: 600; }
.bb-budget-rows dd { margin: var(--blog-space-2) 0 0; }
.bb-budget-reading strong { display: block; color: var(--action-text); font-family: var(--font-display); font-size: var(--bb-finding); font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bb-budget-reading strong span { font-family: var(--font-body); color: var(--blog-muted); font-size: var(--bb-small); }
.bb-budget-bar { display: block; width: 100%; height: var(--blog-space-3); margin-top: var(--blog-space-3); }
.bb-budget-track { fill: var(--ink-200); }
.bb-budget-fill { fill: var(--action-text); }
.bb-budget-rows dd p { font-size: var(--bb-small); color: var(--blog-muted); margin: var(--blog-space-3) 0 0; }
.bb-calculator > p { font-size: var(--bb-note); line-height: 1.7; }
.bb-calculator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--blog-space-6); margin-block: var(--blog-space-5); }
.bb-calculator-inputs { display: grid; gap: var(--blog-space-4); }
.bb-calculator-inputs label { display: grid; gap: var(--blog-space-2); font-size: var(--bb-small); font-weight: 600; line-height: 1.5; }
.bb-calculator-inputs input { min-width: 0; width: 100%; box-sizing: border-box; padding: var(--blog-space-3); min-height: 2.75rem; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink-900); background: var(--paper); border: 1px solid var(--ink-300); border-radius: 0; }
.bb-calculator-inputs input[aria-invalid="true"] { border-color: var(--warn-text); }
.bb-calculator-result { align-self: start; position: sticky; top: var(--blog-space-6); padding: var(--blog-space-5); background: var(--paper); border-top: 2px solid var(--action-text); }
.bb-calculator-method { border-top: 1px solid var(--blog-rule); font-size: var(--bb-small); line-height: 1.7; }
.bb-calculator-method summary { cursor: pointer; padding-block: var(--blog-space-4); color: var(--blog-link); text-decoration: underline; text-underline-offset: 0.2em; }
.bb-calculator-method p { margin: 0 0 var(--blog-space-3); }

@media (max-width: 600px) {
  .bb-worked, .bb-budget, .bb-calculator { padding: var(--blog-space-5) var(--blog-space-4); }
  .bb-worked-entries > li, .bb-calculator-layout { grid-template-columns: minmax(0, 1fr); gap: var(--blog-space-4); }
  .bb-calculator-result { position: static; }
  .bb-story { padding: var(--blog-space-5) var(--blog-space-4); }
  .bb-story-desk { grid-template-columns: minmax(0, 1fr); gap: var(--blog-space-6); }
  .bb-story-nav { gap: var(--blog-space-3); }
  .bb-story-nav a { display: block; }
  .bb-story-nav a span { display: block; margin-bottom: var(--blog-space-1); }
  .bb-source-stack { gap: var(--blog-space-3); }
  .bb-source-top { float: left; margin: 0 var(--blog-space-3) var(--blog-space-2) 0; }
  .bb-source-index { display: none; }
  .bb-source p { clear: both; }
  .bb-story-connection { display: none; }
  .bb-story-handoff ol { grid-template-columns: minmax(0, 1fr); }
  .bb-evidence--grid .bb-evidence-main { grid-template-columns: minmax(0, 1fr) 6rem; gap: var(--blog-space-4); align-items: start; }
  .bb-evidence-grid { margin-top: var(--blog-space-2); }
  .bb-comparison table { min-width: 34rem; }
  .bb-comparison .bb-comparison-scroll { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-block *, .blog-block *::before, .blog-block *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bb-source, .bb-source:nth-child(even), .bb-story .bb-answer, .bb-story .bb-handoff-arrow { transform: none !important; }
}
@media print {
  .blog-block { break-inside: avoid; }
  .bb-worked { break-inside: auto; }
  .bb-worked-entries > li { break-inside: avoid; }
  .bb-calculator-result { position: static; }
  .bb-story { background: none; }
  .bb-story-nav { display: none; }
  .bb-source, .bb-source:nth-child(even), .bb-story .bb-answer { transform: none !important; box-shadow: none !important; }
  .bb-story-desk { display: block; }
  .bb-story-desk > section + section { margin-top: var(--blog-space-5); }
  .bb-story-connection { display: none; }
  .bb-comparison-table { overflow: visible; }
  .bb-comparison table { min-width: 0; }
}