/* Shared by the blog pages; mirrors the landing page's palette and type. */
body { margin: 0; background: #f7f6f4; }
a { color: #3049c9; text-decoration: none; }
a:hover { color: #22349a; }
::selection { background: #dfe3f8; color: #22349a; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: #f7f6f4; color: #26272c; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.7; }
.page > main { flex: 1; }

.site-header { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 32px; border-bottom: 1px solid #dcdad4; background: #efeeea; position: sticky; top: 0; z-index: 10; }
.site-header-left { display: flex; align-items: center; gap: 40px; }
.site-header nav { display: flex; gap: 28px; font-size: 13px; }
.site-header-right { display: flex; align-items: center; gap: 12px; }
.nav-link { color: #4a4b52; }
.nav-link:hover, .nav-link.active { color: #17181b; }
.btn-primary { display: inline-block; border: 1px solid #3049c9; border-radius: 2px; background: #dfe3f8; color: #22349a; padding: 7px 16px; font-size: 13px; }
.btn-primary:hover { background: #ccd3f4; color: #22349a; }
.btn-ghost { display: inline-block; border: 1px solid #dcdad4; border-radius: 2px; color: #26272c; padding: 7px 16px; font-size: 13px; }
.btn-ghost:hover { border-color: #a8aab1; color: #17181b; }

.site-footer { border-top: 1px solid #dcdad4; padding: 28px 32px; font-size: 12px; color: #a8aab1; }

.eyebrow { color: #82848c; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.back { font-size: 13px; color: #82848c; }
.back:hover { color: #17181b; }

/* Blog index */
.blog-index { max-width: 760px; margin: 0 auto; padding: 88px 32px 96px; }
.blog-index h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 48px; line-height: 1.1; color: #17181b; margin: 0 0 48px; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dcdad4; }
.post-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid #dcdad4; color: #26272c; }
.post-list .num { color: #a8aab1; font-size: 13px; }
.post-list .title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: #17181b; letter-spacing: -0.01em; }
.post-list .date { color: #82848c; font-size: 12px; white-space: nowrap; }
.post-list .arrow { color: #a8aab1; transition: transform 0.15s ease, color 0.15s ease; }
.post-list a:hover .title { color: #22349a; }
.post-list a:hover .arrow { color: #3049c9; transform: translateX(3px); }

/* Post */
.post { max-width: 720px; margin: 0 auto; padding: 72px 32px 96px; }
.post header { margin: 28px 0 48px; }
.post h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 44px; line-height: 1.12; color: #17181b; margin: 0 0 20px; text-wrap: balance; }
.post .meta { color: #82848c; font-size: 13px; }
.post .meta a { color: #4a4b52; }
.post .meta a:hover { color: #17181b; }
.prose p { margin: 0 0 22px; text-wrap: pretty; }
.prose strong { color: #17181b; }
.prose .parallels { list-style: none; margin: 0 0 26px; padding: 4px 0 4px 20px; border-left: 2px solid #dcdad4; }
.prose .parallels li { margin: 0 0 6px; }
.prose blockquote { margin: 36px 0; padding: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; color: #17181b; text-wrap: balance; }
.post-end { margin-top: 56px; padding-top: 24px; border-top: 1px solid #dcdad4; }

/* Benchmark figures, same panels as the landing page */
.figure { margin: 36px 0 40px; width: min(960px, calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); }
.figure-card { background: #f7f6f4; border: 1px solid #dcdad4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figure-card > div { min-width: 0; padding: 22px 24px 18px; }
.figure-card > div + div { border-left: 1px solid #e6e4de; }
.figure-card .bench-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: #17181b; line-height: 1.5; }
.figure-card .bench-sub { font-size: 11px; color: #82848c; margin-bottom: 10px; }
.figure-card .row { padding: 6px 0; }
.figure-card .row-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #82848c; }
.figure-card .row-head span:first-child { white-space: nowrap; }
.figure-card .row.lead .row-head span:first-child { color: #17181b; }
.figure-card .row.lead .row-head span:last-child { color: #3049c9; }
.figure-card .bar { height: 6px; margin-top: 4px; background: #eae8e3; position: relative; }
.figure-card .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #c4c2bb; }
.figure-card .row.lead .bar > i { background: #3049c9; }
.figure-card .bar > b { position: absolute; top: 0; bottom: 0; left: 86%; width: 3px; background: #f7f6f4; transform: skewX(-20deg); }
.figure figcaption { margin-top: 12px; font-size: 12px; color: #a8aab1; line-height: 1.6; }

@media (max-width: 720px) {
  .site-header { padding: 0 16px; }
  .site-header-left { gap: 20px; }
  .site-header nav { gap: 16px; }
  .hide-mobile { display: none !important; }
  .blog-index { padding: 48px 20px 64px; }
  .blog-index h1 { font-size: 34px; }
  .post-list a { grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 10px; }
  .post-list .date { grid-column: 2; grid-row: 2; }
  .post-list .arrow { grid-column: 3; grid-row: 1; }
  .post-list .title { font-size: 18px; }
  .post { padding: 40px 20px 64px; font-size: 14px; }
  .post h1 { font-size: 32px; }
  .prose blockquote { font-size: 20px; }
  .figure { width: calc(100vw - 40px); }
  .figure-card { grid-template-columns: minmax(0, 1fr); }
  .figure-card > div { padding: 18px 16px 14px; }
  .figure-card > div + div { border-left: none; border-top: 1px solid #e6e4de; }
  .site-footer { padding: 24px 20px; }
}