@layer components {
  .blog-page { overflow-wrap: anywhere; }
  .blog-index { padding-block-end: var(--space-8); }
  .blog-index-banner { block-size: auto; min-block-size: clamp(16rem, 33.333vw, 32rem); padding-block: var(--space-7); }
  .blog-index-banner > img { object-position: right center; opacity: .78; }
  .blog-index-banner .eyebrow { color: var(--accent-orange); margin-block-end: var(--space-5); }
  .blog-index-banner h1 { max-inline-size: 26ch; }
  .blog-posts { padding-block-end: var(--space-8); }
  .blog-card { display:grid; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--white); padding:var(--space-5); gap:var(--space-5); box-shadow:var(--shadow-panel); }
  .blog-card + .blog-card { margin-block-start:var(--space-5); }
  .blog-card-image { align-self:start; background:var(--blue-paper); display:block; border-radius:var(--radius-control); overflow:hidden; }
  .blog-card-image img { display:block; inline-size:100%; block-size:auto; aspect-ratio:2.5; object-fit:cover; border-radius:inherit; }
  .blog-card-copy { display: grid; justify-items: start; align-content: start; gap: var(--space-4); min-inline-size: 0; }
  .blog-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); color: var(--muted); font: 500 var(--type-small)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .blog-byline strong { font-weight: 600; color: var(--ink); }
  .blog-card h2 { font-size: var(--type-title); line-height: 1.2; }
  .blog-card h2 a { display: inline-flex; align-items: start; gap: var(--space-3); text-decoration: none; }
  .blog-card h2 a > span:last-child { color: var(--accent-orange); }
  .blog-card-copy > p:not(.blog-byline) { color: var(--muted); max-inline-size: 54ch; }
  .blog-article-heading { inline-size: 100%; max-inline-size: 50rem; margin-inline: 0; padding-block: var(--space-5) var(--space-4); }
  .blog-article-heading h1 { max-inline-size: 23ch; font-size: clamp(2.35rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
  .blog-article-heading .blog-byline { margin-block-start: var(--space-4); }
  .blog-banner { margin-block: 0 var(--space-8); }
  .blog-banner img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1983 / 793; object-fit: cover; object-position: center; background: var(--blue-paper); }
  .blog-prose { max-inline-size: 62ch; margin-inline: auto; padding-block-end: var(--space-7); font-family: Georgia, Cambria, "Times New Roman", serif; font-size: var(--type-base); line-height: 1.75; }
  .blog-prose > p { margin-block: 0 1.25em; line-height: 1.75; text-wrap: pretty; }
  .blog-prose > .blog-lede { color: var(--ink); font-size: 1.2em; line-height: 1.58; margin-block-end: var(--space-6); }
  .blog-prose blockquote { margin: var(--space-7) 0; padding-inline: var(--space-5); border-inline-start: 3px solid var(--accent-orange); color: var(--ink); font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.45; }
  .blog-inline-image { margin-block: var(--space-7); background: var(--blue-paper); }
  .blog-inline-image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2.5; object-fit: cover; }
  .blog-banner img, .blog-inline-image { border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); }
  .blog-inline-image img { border-radius:inherit; }
  .blog-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-block-start: 1px solid var(--line); padding-block: var(--space-6) var(--space-8); }
}

@layer responsive {
  @media (min-width: 48rem) {
    .blog-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-7); }
    .blog-card h2 { font-size: var(--type-section); }
    .blog-prose { font-size: var(--type-lead); }
  }
  @media (max-width: 40rem) {
    .blog-index-banner > img { object-position: left center; opacity: .58; }
    .blog-card { gap: var(--space-4); }
    .blog-article-heading { padding-block-start: var(--space-4); padding-block-end: var(--space-3); }
    .blog-article-heading h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
    .blog-banner { margin-block-end: var(--space-6); }
    .blog-prose { font-size: 1.0625rem; line-height: 1.72; }
  }
}

@layer preferences {
  @media (prefers-reduced-motion: no-preference) {
    .blog-card-image img { transition:transform 250ms var(--ease-out); }
    .blog-card h2 a > span[aria-hidden="true"] { transition:transform var(--feedback) var(--ease-out); }
  }
  @media (hover: hover) and (pointer: fine) {
    .blog-card h2 a:hover { color: var(--accent); }
    .blog-card:has(a:hover) .blog-card-image img { transform:scale(1.025); }
    .blog-card h2 a:hover > span[aria-hidden="true"] { transform:translate(2px,-2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .blog-card:has(a:hover) .blog-card-image img, .blog-card h2 a:hover > span[aria-hidden="true"] { transform:none; }
  }
}

/* Approved harness article figures. */
@layer components {
.harness-prose > h2 { font:600 var(--type-title)/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.025em; margin-block:var(--space-8) var(--space-5); text-wrap:balance; }
.harness-prose > ul { padding-inline-start:var(--space-5); list-style:square; margin-block:var(--space-6); }
.harness-prose > ul > li { padding-inline-start:var(--space-2); margin-block:var(--space-5); }
.harness-prose > ul > li::marker { color:var(--accent-orange); }
.harness-cover img { aspect-ratio:1983 / 793; }
.harness-figure { font:400 var(--type-base)/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-block:var(--space-8); color:var(--ink); }
.harness-figure figcaption { display:grid; gap:var(--space-3); margin-block-end:var(--space-5); }
.harness-figure figcaption .eyebrow { color:var(--accent-orange); }
.harness-figure figcaption > strong { font-size:var(--type-title); font-weight:600; letter-spacing:-.025em; line-height:1.3; }
.software-stage { padding:var(--space-5); background:var(--blue-paper); border:1px solid var(--line); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); }
.scenario-label,.task-impact,.responsibility-number { display:block; color:var(--accent-orange); font-size:var(--type-small); font-weight:600; }
.scenario-label { margin-block-end:var(--space-5); }
.artifact-icon { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.contract-scene { display:grid; gap:var(--space-4); align-items:stretch; }
.brief-document { background:var(--white); padding:var(--space-5); border-block-start:3px solid var(--accent-orange); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); }
.document-title { display:flex; gap:var(--space-3); align-items:center; font-weight:600; }
.locked-label { display:flex; gap:var(--space-2); align-items:center; color:var(--green); font-size:var(--type-small); margin-block:var(--space-5); }
.brief-checklist { display:grid; gap:var(--space-4); font-size:.875rem; }
.brief-checklist li { position:relative; padding-inline-start:var(--space-5); }
.brief-checklist li::before { content:'✓'; position:absolute; inset-inline-start:0; color:var(--green); }
.document-footer { border-block-start:1px solid var(--line); margin-block-start:var(--space-6); padding-block-start:var(--space-4); color:var(--muted); font-size:var(--type-small); }
.scene-connector { display:flex; gap:var(--space-3); align-items:center; color:var(--accent-orange); }
.scene-connector > span { font-size:2rem; transform:rotate(90deg); }
.scene-connector small { font-size:var(--type-small); line-height:1.4; }
.code-window { background:var(--ink); color:var(--white); border-radius:var(--radius-panel); overflow:hidden; }
.window-bar { display:flex; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4); border-block-end:1px solid var(--blue-rule); font-size:var(--type-small); font-weight:500; }
.window-bar small { font-size:inherit; margin-inline-start:auto; opacity:.85; }
.window-glyph { color:var(--navy-secondary); }
.code-lines { padding:var(--space-5) var(--space-4); font-size:.8125rem; line-height:1.9; }
.code-lines > div { display:flex; gap:var(--space-4); }
.code-lines i { color:var(--navy-secondary); font-style:normal; opacity:.75; }
.code-lines code { white-space:pre-wrap; overflow-wrap:anywhere; }
.example-checks { display:grid; gap:var(--space-2); padding:var(--space-4); border-block-start:1px solid var(--blue-rule); font-size:var(--type-small); }
.terminal-label { display:block; color:var(--navy-secondary); margin-block-end:var(--space-2); }
.example-checks b { color:var(--navy-secondary); margin-inline-end:var(--space-2); }
.figure-takeaway { display:flex; align-items:start; gap:var(--space-3); padding-block-start:var(--space-5); font-size:.875rem; font-weight:500; }
.figure-takeaway .artifact-icon { color:var(--accent-orange); }
.responsibility-flow,.task-examples { display:grid; gap:var(--space-6); }
.responsibility { min-inline-size:0; }
.responsibility-number { margin-block-end:var(--space-4); }
.mini-window { background:var(--white); min-block-size:13rem; border:1px solid var(--blue-rule); border-radius:var(--radius-panel); overflow:hidden; box-shadow:var(--shadow-panel); }
.diff-content { padding:var(--space-5) var(--space-4); display:grid; font:400 .8rem/1.9 ui-monospace,Consolas,monospace; }
.diff-content > span { display:block; padding-inline:var(--space-2); }
.diff-removed { color:var(--muted); text-decoration:line-through; }
.diff-added { color:var(--green); background:var(--green-paper); }
.test-window { background:var(--ink); color:var(--white); }
.terminal-checks { padding:var(--space-5) var(--space-4); display:grid; gap:var(--space-3); font:400 .8rem/1.6 ui-monospace,Consolas,monospace; }
.terminal-checks > span { display:flex; justify-content:space-between; }
.terminal-checks b { color:var(--navy-secondary); font-weight:500; }
.terminal-checks small { color:var(--navy-secondary); font:400 .7rem/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.review-comment { padding:var(--space-4); }
.fresh-context { color:var(--green); font-size:var(--type-small); font-weight:600; }
.review-comment p { font-size:1rem; font-weight:500; line-height:1.4; margin-block:var(--space-3); }
.review-rules { font-size:.75rem; color:var(--muted); }
.responsibility > h3 { margin-block:var(--space-5) var(--space-2); font-size:var(--type-base); line-height:1.4; }
.responsibility > p { color:var(--muted); font-size:.875rem; }
.review-separator { color:var(--accent-orange); font-size:var(--type-lead); }
.review-stage .figure-takeaway { margin-block-start:var(--space-6); border-block-start:1px solid var(--blue-rule); }
.task-example { min-inline-size:0; }
.task-art { block-size:11rem; margin-block-end:var(--space-5); border-radius:var(--radius-panel); }
.typo-art { display:flex; flex-direction:column; align-items:start; justify-content:center; gap:var(--space-1); padding:var(--space-5); background:var(--white); position:relative; }
.file-tab { font-size:var(--type-small); color:var(--muted); margin-block-end:var(--space-2); }
.typo-before { color:var(--muted); text-decoration:line-through; font:400 1.4rem/1.1 ui-monospace,Consolas,monospace; }
.typo-after { color:var(--green); font:500 1.4rem/1.1 ui-monospace,Consolas,monospace; }
.correction-arrow { color:var(--accent-orange); line-height:1; }
.text-caret { display:inline-block; width:2px; height:1em; margin-inline-start:2px; background:var(--green); vertical-align:bottom; }
.utility-art,.system-art { display:grid; place-items:center; background:var(--white); color:var(--accent); padding:var(--space-3); }
.task-art svg { width:100%; max-width:17rem; height:9rem; }
.task-art text { font:500 13px ui-monospace,Consolas,monospace; }
.system-art { color:var(--ink); }
.task-example h3 { font-size:var(--type-base); line-height:1.4; margin-block:var(--space-2) var(--space-4); }
.review-route { display:flex; gap:var(--space-2); padding-block:var(--space-3); }
.review-route > span { height:4px; flex:1; background:var(--blue-rule); }
.route-light > span:first-child,.route-medium > span:not(:last-child),.route-heavy > span { background:var(--accent-orange); }
.task-example > p { color:var(--muted); font-size:.875rem; line-height:1.7; }
.task-example strong { color:var(--ink); font-weight:500; }
.example-disclaimer { color:var(--muted); font-size:var(--type-small); padding-block-start:var(--space-6); }
}
@layer responsive {
@media(min-width:48rem) {
 .harness-figure { inline-size:min(64rem,calc(100vw - 5rem)); margin-inline-start:50%; transform:translateX(-50%); }
 .software-stage { padding:var(--space-6); }
 .contract-scene { grid-template-columns:minmax(0,1fr) 5.5rem minmax(0,1.1fr); gap:var(--space-5); }
 .scene-connector { flex-direction:column; justify-content:center; text-align:center; }
 .scene-connector > span { transform:none; }
 .responsibility-flow,.task-examples { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
 .responsibility { position:relative; }
 .responsibility:not(:last-child)::after { content:'→'; position:absolute; inset-inline-end:-1.25rem; inset-block-start:7rem; color:var(--accent-orange); font-size:var(--type-lead); }
}
}

/* Approved third blog article: agent capabilities and reusable tools. */

@layer components {
  .machinery-deck { max-inline-size:54ch; color:var(--muted); font-size:var(--type-lead); line-height:1.5; margin-block-start:var(--space-5); }
  .machinery-prose > h2 { font:600 clamp(1.5rem,2.7vw,2rem)/1.22 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-block:var(--space-8) var(--space-5); letter-spacing:-.03em; }
  .machinery-prose strong { font-weight:600; }
  .machinery-steps { list-style:decimal; padding-inline-start:var(--space-5); margin-block:var(--space-6); }
  .machinery-steps li { padding-inline-start:var(--space-2); margin-block:var(--space-5); }
  .machinery-steps li::marker { color:var(--accent-orange); font-weight:600; }
  .machinery-prose code { font:400 .82em/1.5 Consolas,'Courier New',monospace; background:var(--blue-paper); padding:.125em .25em; overflow-wrap:anywhere; box-decoration-break:clone; }
  .machinery-figure { margin-block:var(--space-8); font:400 var(--type-base)/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  .machinery-figure figcaption { display:grid; gap:var(--space-3); margin-block-end:var(--space-5); }
  .machinery-figure figcaption .eyebrow { color:var(--accent-orange); }
  .machinery-figure figcaption strong { font-size:var(--type-title); font-weight:600; line-height:1.3; letter-spacing:-.025em; }
  .machinery-stage { background:var(--blue-paper); border:1px solid var(--line); padding:var(--space-5); }
  .division { display:grid; gap:var(--space-5); }
  .division-part { padding:var(--space-5); background:var(--white); border-block-start:3px solid var(--accent-orange); }
  .division-part:last-child { border-block-start-color:var(--ink); }
  .division-part h3 { font-size:var(--type-title); margin-block:var(--space-4) var(--space-3); }
  .division-part p { color:var(--muted); font-size:.9375rem; }
  .division-part ul { list-style:none; padding:0; display:grid; gap:var(--space-3); margin-block-start:var(--space-5); }
  .division-part li { border-block-start:1px solid var(--line); padding-block-start:var(--space-3); font-size:.875rem; }
  .division-icon { inline-size:3rem; block-size:3rem; color:var(--accent-orange); }
  .division-part:last-child .division-icon { color:var(--ink); }
  .division-icon svg { inline-size:100%; block-size:100%; stroke:currentColor; fill:none; stroke-width:1.5; }
  .figure-note { border-block-start:1px solid var(--line); margin-block-start:var(--space-5); padding-block-start:var(--space-4); color:var(--muted); font-size:.875rem; }
  .marker-experiment { display:grid; gap:var(--space-4); }
  .experiment-case { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); padding:var(--space-4); background:var(--white); border-inline-start:3px solid var(--line); }
  .experiment-case:last-child { border-inline-start-color:var(--accent-orange); }
  .experiment-case strong { display:block; font-size:.9375rem; }
  .experiment-case p { font-size:.8125rem; color:var(--muted); margin-block-start:var(--space-2); }
  .experiment-result { font-size:.8125rem; font-weight:600; color:var(--ink); white-space:nowrap; align-self:start; border:1px solid currentColor; padding:.125rem var(--space-2); }
  .experiment-result.pass { color:var(--green); }
  .experiment-case:last-child .experiment-result { color:var(--accent-orange); }
  .journey { display:grid; gap:var(--space-5); counter-reset:journey; }
  .journey-step { position:relative; border-inline-start:1px solid var(--blue-rule); padding-inline-start:var(--space-5); }
  .journey-step::before { counter-increment:journey; content:'0' counter(journey); display:block; color:var(--accent-orange); font-size:var(--type-small); font-weight:600; margin-block-end:var(--space-4); }
  .journey-step h3 { font-size:var(--type-lead); margin-block-end:var(--space-3); }
  .journey-step p { font-size:.875rem; color:var(--muted); }
  .journey-step:last-child { border-color:var(--accent-orange); }
  .journey-track { inline-size:100%; block-size:3rem; margin-block-end:var(--space-5); }
  .machinery-caption { color:var(--muted); font:400 var(--type-small)/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-block-start:var(--space-3); }
  .capability-stack { display:grid; justify-items:center; }
  .capability-node { inline-size:min(100%,28rem); padding:var(--space-4); background:var(--white); border:1px solid var(--blue-rule); text-align:center; }
  .capability-node h3 { font-size:var(--type-base); line-height:1.3; margin-block-end:var(--space-2); }
  .capability-node p { font-size:.8125rem; color:var(--muted); }
  .capability-node.agent-node { background:var(--ink); border-color:var(--ink); color:var(--white); }
  .agent-node p { color:var(--navy-secondary); }
  .capability-node.cli-node { border:2px solid var(--accent-orange); }
  .capability-arrow { inline-size:1px; block-size:var(--space-5); background:var(--diagram-line); position:relative; }
  .capability-arrow::after { content:''; position:absolute; inset-block-end:0; inset-inline-start:-3px; inline-size:7px; block-size:7px; border-inline-end:1px solid var(--diagram-line); border-block-end:1px solid var(--diagram-line); transform:rotate(45deg); }
  .capability-branches { display:block; inline-size:100%; block-size:var(--space-7); color:var(--diagram-line); }
  .capability-operations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); inline-size:100%; }
  .capability-operation { min-inline-size:0; padding:var(--space-3) var(--space-2); background:var(--white); border:1px solid var(--blue-rule); text-align:center; }
  .capability-operation h3 { font-size:.8125rem; line-height:1.4; letter-spacing:0; }
  .capability-return { margin-block-start:var(--space-4); color:var(--muted); font-size:.8125rem; text-align:center; }
}
@layer responsive {
  @media(min-width:48rem) {
    .division { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .journey { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
  }
}
@media print { .site-header,.site-footer,.blog-end,.case-breadcrumb { display:none; } .machinery-figure { break-inside:avoid; inline-size:100%; margin-inline:0; } .blog-prose { max-inline-size:100%; font-size:11pt; } .blog-banner { margin-block-end:2rem; } }

/* Editorial flow: existing Kado tokens, scoped to the approved article illustration. */
@layer components {
  .machinery-figure .machinery-stage {
    padding:var(--space-6);
    background:var(--paper);
    border:0;
    border-block:1px solid var(--blue-rule);
  }
  .machinery-figure .capability-stack { justify-items:stretch; }
  .machinery-figure .capability-node {
    inline-size:100%;
    display:grid;
    grid-template-columns:7rem minmax(0,1fr);
    align-items:center;
    gap:var(--space-4);
    padding:var(--space-5);
    text-align:start;
    border:1px solid var(--diagram-line);
  }
  .machinery-figure .capability-node h3 {
    font-size:var(--type-lead);
    letter-spacing:-.025em;
    margin:0;
  }
  .machinery-figure .capability-node p {
    margin:0;
    padding-inline-start:var(--space-4);
    border-inline-start:1px solid var(--diagram-line);
    font-size:.875rem;
    line-height:1.5;
  }
  .machinery-figure .agent-node { border-color:var(--ink); }
  .machinery-figure .agent-node p { border-color:var(--navy-secondary); }
  .machinery-figure .cli-node {
    border:1px solid var(--diagram-line);
    border-inline-start:4px solid var(--accent-orange);
    background:var(--blue-paper);
  }
  .machinery-figure .capability-arrow {
    justify-self:center;
    block-size:var(--space-6);
  }
  .machinery-figure .capability-branches { block-size:var(--space-7); }
  .machinery-figure .capability-operation {
    padding:var(--space-4) var(--space-2);
    border:0;
    border-block-start:2px solid var(--diagram-line);
    background:transparent;
  }
  .machinery-figure .capability-operation h3 { font-size:.875rem; font-weight:500; }
  .machinery-figure .capability-return {
    max-inline-size:40ch;
    margin:var(--space-5) auto 0;
    font-size:.875rem;
  }
}
@layer responsive {
  @media(max-width:35rem) {
    .machinery-figure .machinery-stage { padding:var(--space-5) 0; }
    .machinery-figure .capability-node {
      grid-template-columns:1fr;
      gap:var(--space-2);
      padding:var(--space-4) var(--space-5);
    }
    .machinery-figure .capability-node p { border:0; padding:0; }
  }
}