/* The blog (scripts/blog.py). Loaded after styles.css; a root file so it is public. */
.nav nav a[href="/blog/"] { color:var(--ink); }

.blog-hero { padding-bottom:36px; }
.post-list { max-width:760px; padding-bottom:90px; display:grid; gap:18px; }
.post-card { display:block; text-decoration:none; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px 30px; transition:transform .15s, box-shadow .15s; }
.post-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(28,42,68,.45); }
.post-card h2 { font-size:1.55rem; letter-spacing:-.02em; line-height:1.18; margin:8px 0 8px; }
.post-card p { color:var(--soft); margin:0 0 14px; }
.post-card .kicker { font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.post-card .meta { font-size:.88rem; color:var(--soft); }
.post-card .state { margin-left:10px; padding:2px 8px; border-radius:6px; background:#fff3cd; color:#7a5200; letter-spacing:.04em; }
.post-list .empty { text-align:center; color:var(--soft); padding:40px 0; }

.post { max-width:700px; margin:0 auto; padding:36px 0 80px; }
.post header { margin-bottom:34px; }
.post .eyebrow { text-decoration:none; margin-bottom:18px; }
.post h1 { font-size:clamp(2.1rem, 5vw, 3.2rem); line-height:1.1; }
.post .deck { font-size:1.22rem; color:var(--soft); margin:18px 0 16px; }
.post .byline { font-size:.9rem; color:var(--soft); margin:0; }
.post .byline a { color:var(--ink); }

.short { background:var(--tint); border:1px solid var(--border); border-radius:14px; padding:22px 26px; margin-bottom:38px; }
.short .label { margin-bottom:10px; }
.short ul { margin:0; padding-left:1.15em; }
.short li { margin-bottom:.45em; }
.short li:last-child { margin-bottom:0; }

.post .body { font-size:1.09rem; line-height:1.72; }
.post .body h2 { font-size:1.6rem; letter-spacing:-.02em; line-height:1.2; margin:2.1em 0 .6em; }
.post .body h3 { margin:1.6em 0 .4em; }
.post .body p { margin:0 0 1.15em; }
.post .body a { color:var(--blue); }
.post .body ul, .post .body ol { padding-left:1.25em; margin:0 0 1.15em; }
.post .body li { margin-bottom:.5em; }
.post .body img { display:block; max-width:100%; height:auto; border:1px solid var(--border); border-radius:12px; margin:1.6em 0 .5em; }
.post .body figure { margin:1.8em 0; }
.post .body figcaption { font-size:.88rem; color:var(--soft); }
.post .body blockquote { margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--blue); font-size:1.18rem; font-weight:500; }
.post .body code { font-size:.92em; background:var(--tint); padding:.1em .35em; border-radius:5px; }
.post .body table { border-collapse:collapse; width:100%; margin:0 0 1.3em; font-size:.98rem; }
.post .body th, .post .body td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.post .body th { font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
/* The two closing sections every post has: the takeaway, then what we do about it. */
.post .body h2.takeaway, .post .body h2.ours { font-size:1.3rem; }
.post .body h2.takeaway::before, .post .body h2.ours::before { display:block; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.post .body h2.takeaway { border-top:1px solid var(--border); padding-top:1.6em; margin-top:2.4em; }
.post .body h2.takeaway::before { content:"For your business"; }
.post .body h2.ours::before { content:"For ours"; }

.post-nav { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:48px; padding-top:24px; }
.post-nav a { text-decoration:none; font-weight:600; max-width:46%; }
.post-nav a span { display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:600; margin-bottom:4px; }
.post-nav .all { margin-left:auto; text-align:right; }

.admin-note { background:#fff3cd; color:#7a5200; border-radius:10px; padding:12px 16px; font-size:.92rem; margin-bottom:26px; }

@media (max-width:860px) {
  .post-card { padding:22px; }
  .post-nav a { max-width:100%; }
}