* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-body);
    line-height: var(--lh-normal);
  }
  /* SPEC-02 completion (1.2) — responsive container ladder */
  .container { max-width: var(--container-base); margin: 0 auto; padding: 0 var(--container-px); }
  .container-wide { max-width: calc(var(--container-base) + 120px); margin: 0 auto; padding: 0 var(--container-px); }
  @media (min-width: 1281px) { .container { max-width: var(--container-md); } .container-wide { max-width: calc(var(--container-md) + 120px); } }
  @media (min-width: 1601px) { .container { max-width: var(--container-lg); } .container-wide { max-width: calc(var(--container-lg) + 120px); } }
  @media (min-width: 1921px) { .container { max-width: var(--container-xl); } .container-wide { max-width: calc(var(--container-xl) + 120px); } }

  /* Reading progress */
  .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--reading-progress-height); background: var(--reading-progress-bg); z-index: var(--z-sticky); }
  .reading-progress-fill { height: 100%; width: 0%; background: var(--reading-progress-color); transition: width var(--transition-fast); }

  /* ===== SEC-46 · blog-post-header (SPEC-08 compressed meta) ========== */
  .sec-46 { padding: var(--space-16) 0 var(--space-10); background: var(--bg-page); }
  .bp-header { text-align: center; max-width: 780px; margin: 0 auto; }
  .bp-topic-chip { display: inline-block; padding: var(--topic-chip-padding); background: var(--topic-chip-bg); color: var(--topic-chip-text); font-size: var(--topic-chip-size); font-weight: var(--topic-chip-weight); letter-spacing: var(--topic-chip-tracking); text-transform: uppercase; border-radius: var(--topic-chip-radius); text-decoration: none; margin-bottom: var(--space-6); }
  .bp-h1 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 0 0 var(--space-5) 0; }
  .bp-dek { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-8) 0; }
  .bp-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
  .bp-meta-author { color: var(--text-heading); font-weight: var(--fw-semibold); }
  .bp-meta-sep { color: var(--text-subtle); }

  /* ===== SPEC-08 · .article-sheet — white prose surface on sage ======== */
  .article-sheet-wrap { padding: var(--space-10) 0 var(--space-20); background: var(--bg-page); }
  .article-sheet {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-12);
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
  }
  @media (max-width: 767px) {
    .article-sheet { margin: 0; padding: var(--space-10) var(--space-5); border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; }
    .article-sheet-wrap { padding: 0 0 var(--space-16); }
  }

  /* ===== SEC-48 · blog-post-prose ===================================== */
  .bp-prose { max-width: var(--prose-measure); margin: 0 auto; font-family: var(--font-body); font-size: var(--prose-body-size); line-height: var(--prose-body-leading); color: var(--text-body); }
  .bp-prose p { margin: 0 0 var(--prose-paragraph-gap) 0; }
  .bp-prose p strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
  .bp-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .bp-prose a:hover { color: var(--link-hover); }
  .bp-prose h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: var(--prose-h2-top) 0 var(--prose-h2-bottom) 0; scroll-margin-top: 100px; }
  .bp-prose h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text-heading); margin: var(--prose-h3-top) 0 var(--prose-h3-bottom) 0; scroll-margin-top: 100px; }
  .bp-prose h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-lg); color: var(--text-heading); margin: var(--space-8) 0 var(--space-2) 0; }
  .bp-prose ul, .bp-prose ol { margin: 0 0 var(--prose-paragraph-gap) 0; padding-left: var(--space-6); }
  .bp-prose ul li, .bp-prose ol li { margin-bottom: var(--prose-list-gap); }
  .bp-prose table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--text-md); }
  .bp-prose thead th { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--border-strong); font-family: var(--font-body); font-weight: var(--fw-semibold); color: var(--text-heading); background: var(--bg-muted); }
  .bp-prose tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
  .bp-prose tbody tr:last-child td { border-bottom: 0; }
  .bp-prose tbody td strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

  /* ===== SEC-49 · blog-pullquote (answer capsule) ===================== */
  .bp-pullquote {
    padding: var(--pullquote-padding);
    border-left: var(--pullquote-border);
    padding-left: var(--space-6);
    font-family: var(--pullquote-font);
    font-size: var(--pullquote-size);
    font-weight: var(--pullquote-weight);
    color: var(--pullquote-color);
    line-height: var(--lh-snug);
    margin: var(--space-10) 0;
  }
  .bp-pullquote strong { color: var(--accent-hover); }

  /* ===== SEC-51 · blog-code-block ===================================== */
  .bp-code { background: var(--code-bg); color: var(--code-text); padding: var(--code-padding); border-radius: var(--code-radius); font-family: var(--code-font); font-size: var(--code-size); line-height: var(--code-leading); overflow-x: auto; margin: var(--space-8) 0; white-space: pre; }

  /* ===== SEC-52 · blog-inline-plugin-cta ============================== */
  .bp-plugin-cta { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); margin: var(--space-12) 0; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: all var(--transition); }
  .bp-plugin-cta:hover { border-color: var(--border-strong); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
  .bp-plugin-cta-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent-hover); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: var(--text-lg); }
  .bp-plugin-cta-body { flex: 1; }
  .bp-plugin-cta-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px 0; }
  .bp-plugin-cta-title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-lg); color: var(--text-heading); margin: 0 0 4px 0; }
  .bp-plugin-cta-sub { font-size: var(--text-sm); color: var(--text-body); margin: 0; }
  .bp-plugin-cta-arrow { flex-shrink: 0; color: var(--text-heading); font-weight: var(--fw-semibold); }

  /* ===== SEC-53 · blog-post-footer (author + share) =================== */
  .bp-post-footer { max-width: var(--prose-measure); margin: var(--space-12) auto 0; }
  .bp-author { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
  .bp-author-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, #E0F2FE 0%, #F0FDFA 100%); display: flex; align-items: center; justify-content: center; color: var(--accent-hover); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: var(--text-xl); }
  .bp-author-body { flex: 1; }
  .bp-author-name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-lg); color: var(--text-heading); margin: 0 0 2px 0; }
  .bp-author-role { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .bp-author-bio { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }

  /* ===== SEC-54 · blog-related-posts =================================== */
  .sec-54 { padding: var(--section-py) 0; background: var(--bg-page); border-top: 1px solid var(--divider); }
  .sec-54-header { text-align: center; max-width: 680px; margin: 0 auto var(--space-10); }
  .sec-54-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3); }
  .sec-54-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-4xl); color: var(--text-heading); margin: 0; }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1100px; margin: 0 auto; }
  .related-card { display: block; padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
  .related-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .related-chip { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
  .related-title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text-heading); margin: 0; }
  @media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

  @media (max-width: 900px) {
    .bp-h1 { font-size: var(--text-5xl); }
  }
  @media (max-width: 640px) {
    .bp-h1 { font-size: var(--text-4xl); }
    .bp-meta { gap: var(--space-1) var(--space-2); font-size: var(--text-xs); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* SEC-08 — Patel #5 freshness marker */
  .last-updated { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: var(--space-4) 0 0 0; padding: 0; opacity: 0.7; }
  .last-updated time { font-variant-numeric: tabular-nums; }