/* Editorial pages share the OrderCore shell and design tokens. */
.blog-index { padding-top: 64px; padding-bottom: 32px; }
.blog-kicker { color: var(--e-verified); font: 500 .76rem var(--e-font-mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; }
.blog-hero { max-width: 820px; padding-bottom: 48px; }
.blog-hero h1 { font: 700 clamp(2.6rem, 6vw, 4.8rem)/1.06 var(--e-font-display); letter-spacing: -.045em; margin: 0 0 24px; }
.blog-hero h1 span { color: var(--e-ink-2); }
.blog-lead { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--e-ink-2); line-height: 1.7; max-width: 64ch; }
.blog-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; border: 1px solid var(--e-line-2); border-radius: 20px; background: var(--e-surface); padding: clamp(24px, 4vw, 44px); margin-bottom: 64px; align-items: center; }
.blog-feature h2 { font: 650 clamp(1.9rem, 3.8vw, 3.1rem)/1.12 var(--e-font-display); letter-spacing: -.025em; margin: 0 0 18px; }
.blog-feature h2 a { color: var(--e-ink); text-decoration: none; }
.blog-feature p:not(.blog-kicker) { color: var(--e-ink-2); line-height: 1.75; margin-bottom: 24px; }
.blog-proof { padding: 26px; border: 1px solid var(--e-line-2); border-radius: 14px; background: var(--e-bg); min-width: 0; }
.blog-proof__label { display: block; color: var(--e-ink-2); font: .75rem var(--e-font-mono); margin-bottom: 24px; }
.blog-proof > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--e-line-2); padding: 18px 0; }
.blog-proof code { font: .88rem var(--e-font-mono); }
.blog-status { font: .68rem var(--e-font-mono); color: var(--e-verified); border: 1px solid currentColor; padding: 4px 8px; border-radius: 5px; }
.blog-status--muted { color: var(--e-ink-2); }
.blog-proof p { margin: 24px 0 0 !important; }
.blog-section-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 24px; }
.blog-section-head h2 { font-size: 1.5rem; margin: 0; }
.blog-section-head a, .blog-read { color: var(--e-verified); font-size: .86rem; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--e-line-2); border-radius: 14px; padding: 28px; background: var(--e-surface); }
.blog-card .blog-kicker { font-size: .68rem; margin-bottom: 14px; }
.blog-card h3 { font: 600 1.45rem/1.25 var(--e-font-display); margin: 0 0 16px; }
.blog-card h3 a { color: var(--e-ink); text-decoration: none; }
.blog-card p:not(.blog-kicker) { color: var(--e-ink-2); line-height: 1.7; margin: 0 0 28px; }
.blog-card .blog-read { margin-top: auto; }
.blog-card a:hover, .blog-feature h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-cta { border-top: 1px solid var(--e-line-2); margin-top: 64px; padding: 40px 0 24px; }
.blog-cta h2 { font: 600 clamp(1.6rem, 3vw, 2.25rem)/1.2 var(--e-font-display); margin: 0 0 16px; }
.blog-cta p { max-width: 65ch; color: var(--e-ink-2); line-height: 1.75; margin-bottom: 24px; }
.blog-article { max-width: 790px; padding: 40px 24px 32px; margin: auto; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--e-ink-2); font-size: .8rem; margin-bottom: 40px; }
.blog-breadcrumb a, .blog-article p a, .blog-article li a { color: var(--e-verified); text-decoration: underline; text-underline-offset: 3px; }
.blog-article h1 { font: 650 clamp(2rem, 4.5vw, 3.45rem)/1.1 var(--e-font-display); letter-spacing: -.035em; margin: 0 0 24px; }
.blog-article .blog-byline { font-size: .84rem; color: var(--e-ink-2); margin: 24px 0 36px; }
.blog-article h2 { font: 600 clamp(1.45rem, 3vw, 1.9rem)/1.25 var(--e-font-display); margin: 40px 0 16px; }
.blog-article p, .blog-article li { line-height: 1.8; color: var(--e-ink-2); }
.blog-article p { margin: 0 0 20px; }
.blog-article li { margin-bottom: 14px; }
.blog-article code { font-family: var(--e-font-mono); font-size: .84em; overflow-wrap: anywhere; }
.blog-article pre { white-space: pre; overflow-x: auto; font: .79rem/1.85 var(--e-font-mono); padding: 22px; }
.blog-takeaway { padding: 24px; border-left: 3px solid var(--e-verified); background: var(--e-surface); border-radius: 0 10px 10px 0; margin: 32px 0; }
.blog-takeaway p { margin: 10px 0 0; }
.blog-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; list-style-position: inside; counter-reset: step; }
.blog-steps li { display: block; background: var(--e-surface); border: 1px solid var(--e-line-2); padding: 20px; border-radius: 10px; }
.blog-steps strong { display: block; color: var(--e-verified); margin-bottom: 10px; }
.blog-steps strong::before { counter-increment: step; content: counter(step) '. '; }
.blog-steps span { display: block; font-size: .87rem; }
.blog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.blog-related { border-top: 1px solid var(--e-line-2); margin-top: 32px; }
.blog-article .oc-btn { text-decoration: none; }
@media (max-width: 760px) {
  .blog-index { padding-top: 40px; }
  .blog-feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-section-head { display: block; }
  .blog-section-head a { display: inline-block; margin-top: 14px; }
  .blog-steps { grid-template-columns: 1fr; gap: 0; }
  .blog-article { padding: 28px 20px; }
}

.blog-video { margin: 36px 0; }
.blog-video video { display: block; width: min(100%, 360px); height: auto; border: 1px solid var(--e-line-2); border-radius: 14px; background: var(--e-bg); }
.blog-video figcaption { margin-top: 12px; max-width: 58ch; color: var(--e-ink-2); font-size: .82rem; line-height: 1.6; }