/* Blog styles. Uses the same tokens and glass look as styles.css */

.blog-link:hover,.blog-link.active{color:var(--text);border-color:var(--accent-2)}
.main-nav a.active{color:var(--text)}
.site-header .main-nav{margin-left:auto}
.blog-main{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:28px 5vw 60px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:15px;margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{color:var(--text);font-weight:600;max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blog-hero{padding:36px 0 30px}
.blog-hero h1{font-size:clamp(34px,5.5vw,52px);line-height:1.1;font-weight:850;letter-spacing:-.02em;margin-bottom:18px}
.blog-hero .lede{margin:0;max-width:680px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-main:has(.blog-hero){max-width:1060px}
.post-card{display:flex;flex-direction:column;gap:8px;padding:26px;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-3px);border-color:var(--accent-2)}
.post-card .eyebrow{font-size:12px;margin:0}
.post-card h3{font-size:20px;line-height:1.25;font-weight:800}
.post-card p{color:var(--muted);font-size:16px;line-height:1.5}
.post-card .meta{margin-top:auto;padding-top:8px;font-size:14px;color:var(--muted)}
.post{padding:48px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.post-head .eyebrow{margin-bottom:12px}
.post h1{font-size:clamp(30px,4.6vw,42px);line-height:1.15;font-weight:850;letter-spacing:-.02em;margin-bottom:14px}
.post-meta{color:var(--muted);font-size:15px;margin-bottom:26px}
.tldr{background:var(--bg-2);border:1px solid var(--card-border);border-left:4px solid var(--accent);border-radius:14px;padding:18px 22px;margin-bottom:20px}
.tldr strong{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.tldr p{font-size:18px;line-height:1.55}
.llm-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.llm-bar .btn-mini{text-decoration:none;font-weight:700;cursor:pointer}
.llm-bar .btn-mini:hover{border-color:var(--accent-2)}
.llm-copy{background:linear-gradient(135deg,var(--accent-2),var(--accent))!important;color:#fff!important;border-color:transparent!important}
.llm-copy.ok{background:#1f9d55!important}
.toc{background:var(--bg-2);border:1px solid var(--card-border);border-radius:14px;padding:16px 22px;margin-bottom:30px;font-size:16px}
.toc strong{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:8px 0 0 20px}.toc li{margin:3px 0}
.toc a{color:var(--text);text-decoration:none}.toc a:hover{color:var(--accent-2);text-decoration:underline}
.prose{font-size:18px;line-height:1.75}
.prose h2{font-size:27px;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:40px 0 12px;scroll-margin-top:92px}
.prose h3{font-size:20px;font-weight:800;margin:26px 0 8px;scroll-margin-top:92px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px 24px}.prose li{margin:6px 0}
.prose a,.sources a,.cta a:not(.btn){color:var(--accent-2);font-weight:600}
.prose strong{font-weight:750}
.prose code{background:var(--bg-2);border:1px solid var(--card-border);border-radius:6px;padding:1px 7px;font-size:.88em;word-break:break-word}
.prose blockquote{border-left:4px solid var(--accent-2);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--card-border);border-radius:14px}
.prose table{border-collapse:collapse;width:100%;font-size:16px;min-width:420px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--card-border);vertical-align:top}
.prose th{background:var(--bg-2);font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.prose tr:last-child td{border-bottom:none}
.cta{margin:42px 0 8px;padding:28px;border-radius:18px;background:var(--bg-2);border:1px solid var(--card-border);text-align:center}
.cta h2{font-size:24px;font-weight:800;margin-bottom:8px}
.cta p{color:var(--muted);margin:0 auto 18px;max-width:560px;font-size:17px}
.sources{margin-top:34px;border-top:1px solid var(--card-border);padding-top:20px}
.sources h2{font-size:18px;margin-bottom:8px}
.sources ul{margin-left:20px;font-size:15px;word-break:break-word}
.related{margin-top:44px}.related h2{font-size:24px;margin-bottom:16px}
.foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:6px}


@media (max-width:720px){
  .post{padding:26px 20px}
  .prose{font-size:17px;line-height:1.7}
  .prose h2{font-size:24px}
  .crumbs span[aria-current]{max-width:28ch}
  .post-grid{grid-template-columns:1fr}
}
.prose pre{background:var(--bg-2);border:1px solid var(--card-border);border-radius:14px;padding:16px 20px;margin:0 0 18px;overflow-x:auto;font-size:16px;line-height:1.6}
.prose pre code{background:none;border:none;padding:0;font-size:inherit}