@import url('/assets/sidebar-taste.css');
/* Blog article restyle (body.blog-post only). Reading page: one column, 18px text,
   flat fields, tone instead of lines. Monospace stays for real code only. */
body.blog-post {
  --font-mono: var(--font-body);
  --text-3: #5b6b82;
  --brand: #0a7d63;
  --ground-2: #eef3f2;
  --field-line: rgba(15, 30, 25, 0.18);
  --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --line: transparent; --line-mid: transparent; --panel-border: transparent;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
body.blog-post.dark-mode { --text-3: #94a3b8; --brand: #10b981; --ground-2: #0f1724; --field-line: rgba(255, 255, 255, 0.2); }

body.blog-post .sidebar, body.blog-post .sidebar-header, body.blog-post .sidebar-footer,
body.blog-post .app-header, body.blog-post .mobile-top-bar { border-color: transparent; box-shadow: none; }
body.blog-post .sidebar { background: var(--ground-2); }
body.blog-post .vip-promo-box { background: var(--brand-wash); border-color: transparent; }
body.blog-post .nav-section-title, body.blog-post .nav-badge, body.blog-post .vip-promo-title,
body.blog-post .vip-promo-desc, body.blog-post .search-kbd, body.blog-post .lang-btn { font-size: 13px; }
body.blog-post .nav-section-title { text-transform: none; letter-spacing: 0; font-weight: 600; }
body.blog-post .btn { border-radius: 999px; box-shadow: none; font-size: 16px; }
body.blog-post .btn-sm { font-size: 14px; }
body.blog-post .btn-primary, body.blog-post .app-header .btn-primary, body.blog-post .mobile-top-bar .btn-primary { background: #c2410c !important; color: #fff; box-shadow: none; }
body.blog-post .btn-brand { background: var(--brand-dark); color: #fff; box-shadow: none; }

body.blog-post main.blog-post-container { padding: clamp(32px, 5vw, 72px) var(--wrap-pad) clamp(56px, 7vw, 112px); }
body.blog-post article.blog-article { max-width: 920px; }

body.blog-post .post-header { margin-bottom: clamp(24px, 3vw, 40px); }
body.blog-post h1.post-title { font-size: clamp(32px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 18px; }
body.blog-post .post-meta { font-size: 15px; color: var(--text-2); flex-wrap: wrap; }
body.blog-post .post-category { color: var(--brand); font-weight: 600; }
body.blog-post .post-hero-image { margin-bottom: clamp(32px, 4vw, 56px); background: #fff; }
body.blog-post .post-hero-image img { border-radius: 0; width: 100%; height: auto; display: block; }

body.blog-post .post-content { font-size: 18px; line-height: 1.7; max-width: 70ch; }
body.blog-post .post-content h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin: 56px 0 16px; }
body.blog-post .post-content h3 { font-size: 22px; line-height: 1.25; margin: 36px 0 12px; }
body.blog-post .post-content h4 { font-size: 18px; }
body.blog-post .post-content a { text-decoration: underline; text-underline-offset: 3px; }
body.blog-post .post-content hr { border: 0; height: 40px; margin: 0; background: none; }
body.blog-post .post-content img { border-radius: 0; }
body.blog-post .post-content blockquote { background: var(--ground-2); border: 0; border-radius: 0; padding: 20px 24px; }
/* real code and tables are allowed their own lines and mono face */
body.blog-post .post-content code, body.blog-post .post-content pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.blog-post .post-content code { background: var(--ground-2); }
body.blog-post .post-content pre { background: var(--ground-2); border: 0; }
body.blog-post .post-content table, body.blog-post .post-content th, body.blog-post .post-content td { border-color: var(--field-line); font-size: 15px; }

body.blog-post .post-tags-container { margin-top: 40px; }
body.blog-post .tag-chip { font-size: 14px; background: var(--ground-2); border: 0; color: var(--text); border-radius: 999px; }
body.blog-post .tags-label { font-size: 14px; }
body.blog-post .post-back { margin: 40px 0 0; font-size: 17px; }
body.blog-post .post-back a { color: var(--brand); text-decoration: none; font-weight: 600; }

body.blog-post .post-cta-banner { background: var(--brand-dark); color: #fff; border: 0; border-radius: 0; box-shadow: none; padding: clamp(32px, 5vw, 64px); margin-top: 24px; }
body.blog-post .post-cta-banner h3 { color: #fff; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; max-width: 18em; }
body.blog-post .post-cta-banner p { color: #fff; font-size: 18px; max-width: 36em; margin: 14px 0 28px; }
body.blog-post .post-cta-banner .btn-brand { background: #fff; color: var(--brand-dark); }

body.blog-post .footer-disclaimer, body.blog-post .footer-bottom-top { font-size: 13px; }
body.blog-post .pnf-symbol-search input, body.blog-post .header-search input { padding-right: 64px; }

@media (prefers-reduced-motion: no-preference) {
  body.blog-post .js-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  body.blog-post .js-reveal.is-in { opacity: 1; transform: none; }
  body.blog-post .btn:active { transform: scale(0.97); }
}

body.blog-post article.blog-article { margin-inline: auto; }
body.blog-post .nav-badge { background: var(--brand-dark) !important; color: #fff !important; }

body.blog-post .post-content :is(h2, h3, h4) code { font-family: inherit; font-size: inherit; background: none; padding: 0; }
@media (max-width: 600px) {
  body.blog-post .post-content h2 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
  body.blog-post .post-content h3 { font-size: 19px; }
}
@media (max-width: 600px) { body.blog-post h1.post-title { font-size: 26px; line-height: 1.1; } }
@media (max-width: 900px) { body.blog-post .app-header .brand { display: none !important; } }