/* Blog styles. Uses the tokens from /styles.css. */
body.blog { background: var(--white); }
.post { padding: 120px 16px 72px; }
.post__wrap { max-width: 720px; margin: 0 auto; }
.post__wrap--wide { max-width: 1000px; }
.post__crumbs { font-size: .875rem; color: var(--body); margin-bottom: 20px; }
.post__crumbs a, .post__body a, .post__author a { color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.post__tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); background: var(--green-100); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.post__title { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.6rem); line-height: 1.18; color: var(--ink); margin-bottom: 16px; overflow-wrap: anywhere; }
.post__meta { font-size: .9rem; color: var(--body); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-300); }
.post__body { font-size: 1.0625rem; line-height: 1.75; color: var(--gray-700); overflow-wrap: anywhere; }
.post__body p { margin-bottom: 1.15em; }
.post__body h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--ink); margin: 2em 0 .6em; }
.post__body h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin: 1.6em 0 .5em; }
.post__body ul, .post__body ol { margin: 0 0 1.3em 1.4em; }
.post__body li { margin-bottom: .5em; }
.post__note { background: var(--gray-100); border-left: 4px solid var(--green-600); padding: 14px 16px; border-radius: var(--radius-sm); font-size: .98rem; }
.post__body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.post__table { border-collapse: collapse; font-size: .9rem; line-height: 1.45; margin: 1.2em 0 1.6em; width: 100%; }
.post__table th, .post__table td { border: 1px solid var(--gray-300); padding: 10px 12px; text-align: left; vertical-align: top; }
.post__table th { background: var(--gray-100); color: var(--ink); }
.post__sources { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--gray-300); font-size: .95rem; }
.post__sources h2 { font-size: 1.2rem; margin-top: 0; }
.post__author { margin-top: 2.5em; padding: 18px 20px; background: var(--gray-100); border-radius: var(--radius-md); font-size: .95rem; color: var(--gray-700); }
.post__cta { margin-top: 28px; }
.blog-intro { font-size: 1.1rem; color: var(--body); max-width: 680px; margin-bottom: 36px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); text-decoration: none; color: inherit; background: var(--white); transition: box-shadow var(--transition), transform var(--transition); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card h2 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.blog-card p { font-size: .95rem; color: var(--body); }
.blog-card__meta { font-size: .8rem; color: var(--body); margin-top: auto; }
.blog-empty { padding: 28px; background: var(--gray-100); border-radius: var(--radius-md); color: var(--gray-700); }
@media (max-width: 600px) { .post { padding-top: 96px; } .post__body { font-size: 1rem; } }
.post__table th, .post__table td { overflow-wrap: normal; word-break: normal; }
.post__table th:first-child, .post__table td:first-child { min-width: 96px; }
.post__table th:not(:first-child), .post__table td:not(:first-child) { min-width: 110px; }