/* blog.css — long-form article + blog-index styling.
   Extends the Family design system (see styles.css :root tokens): cream canvas,
   ink-black Bricolage headings, brown Inter body, stone borders, ember/blue accents.
   Loaded after styles.css on /blog/ pages only. */

/* ---------------- BLOG INDEX ---------------- */
.blog-hero{padding:60px 0 20px;text-align:center}
.blog-hero .kicker{font-size:14px;font-weight:600;color:var(--color-ember-orange);margin-bottom:14px}
.blog-hero h1{font-size:clamp(38px,5.6vw,58px);letter-spacing:-0.035em;color:var(--color-ink-black);line-height:1.02}
.blog-hero p{max-width:560px;margin:20px auto 0;font-size:19px;color:var(--color-body-brown)}

.blog-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:30px 0 4px}
.blog-tab{font-size:13.5px;font-weight:600;color:var(--color-heading-charcoal);background:var(--color-sand);box-shadow:var(--inset);border-radius:9999px;padding:8px 16px;cursor:pointer}
.blog-tab:hover{background:#efece5}
.blog-tab.active{background:var(--color-ink-black);color:#fff}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1120px;margin:0 auto}
.post-card{position:relative;background:#fff;border-radius:14px;box-shadow:var(--inset);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .22s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--hover-shadow)}
.post-card .card-stretch{position:absolute;inset:0;z-index:2}
.post-cover{height:172px;display:grid;place-items:center;padding:18px;position:relative;overflow:hidden}
.post-cover svg{width:100%;height:auto;max-width:210px;transition:transform .3s ease}
.post-card:hover .post-cover svg{transform:scale(1.05) rotate(-1deg)}
.post-body-c{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-radius:9999px;padding:4px 11px;margin-bottom:13px}
.post-card h3{font-size:20px;letter-spacing:-0.02em;color:var(--color-ink-black);line-height:1.16;margin-bottom:9px}
.post-card p{font-size:14.5px;line-height:1.5;color:var(--color-body-brown);flex:1}
.post-meta-c{margin-top:16px;font-size:12.5px;font-weight:600;color:var(--color-muted-gray);display:flex;gap:10px;align-items:center}
.post-meta-c .dotsep{width:3px;height:3px;border-radius:50%;background:var(--color-stone-border)}

/* Featured (first) post spans full width */
.post-feature{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border-radius:16px;box-shadow:var(--inset);overflow:hidden;position:relative;transition:transform .18s ease, box-shadow .22s ease}
.post-feature:hover{transform:translateY(-4px);box-shadow:var(--hover-shadow)}
.post-feature .post-cover{height:100%;min-height:260px}
.post-feature .post-cover svg{max-width:300px}
.post-feature .post-body-c{padding:38px 40px}
.post-feature h3{font-size:clamp(24px,3vw,32px);line-height:1.08}
.post-feature p{font-size:16px}
@media(max-width:820px){.post-grid{grid-template-columns:1fr}.post-feature{grid-template-columns:1fr}.post-feature .post-cover{min-height:190px}}

/* ---------------- ARTICLE ---------------- */
.post-shell{padding:44px 0 20px}
.post-head{max-width:760px;margin:0 auto;padding:0 24px;text-align:center}
.post-head .crumb{font-size:13px;color:var(--color-muted-gray);margin-bottom:20px}
.post-head .crumb a{color:var(--color-link-blue)}
.post-head .crumb a:hover{text-decoration:underline}
.post-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-ember-orange);margin-bottom:16px}
.post-head h1{font-size:clamp(33px,5vw,52px);letter-spacing:-0.032em;line-height:1.04;color:var(--color-ink-black)}
.post-dek{font-size:20px;line-height:1.5;color:var(--color-body-brown);max-width:640px;margin:20px auto 0}
.post-byline{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:var(--color-muted-gray)}
.post-byline .who{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--color-heading-charcoal)}
.post-byline .av{width:30px;height:30px;border-radius:50%;background:var(--color-ink-black);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:13px;font-weight:700}
.post-byline .dotsep{width:3px;height:3px;border-radius:50%;background:var(--color-stone-border)}

.post-cover-lead{max-width:1000px;margin:36px auto 0;padding:0 24px}
.post-cover-lead .band-art{background:var(--color-stone-surface);border-radius:18px;box-shadow:var(--inset);height:300px;display:grid;place-items:center;overflow:hidden}
.post-cover-lead svg{width:100%;height:auto;max-width:440px}
@media(max-width:640px){.post-cover-lead .band-art{height:210px}}

/* Reading column */
.post-wrap{max-width:720px;margin:0 auto;padding:8px 24px 0}
.post-body{font-size:18px;line-height:1.72;color:var(--color-body-brown);letter-spacing:-0.011em}
.post-body > p{margin:22px 0}
.post-body h2{font-family:var(--font-display);font-size:clamp(25px,3.4vw,32px);letter-spacing:-0.024em;color:var(--color-ink-black);line-height:1.12;margin:52px 0 6px;padding-top:20px;border-top:1px solid var(--color-stone-surface)}
.post-body h3{font-family:var(--font-display);font-size:22px;letter-spacing:-0.02em;color:var(--color-heading-charcoal);margin:34px 0 4px;line-height:1.18}
.post-body h2 + p, .post-body h3 + p{margin-top:12px}
.post-body a{color:var(--color-link-blue);text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1.5px;text-decoration-color:rgba(0,134,252,.35)}
.post-body a:hover{text-decoration-color:var(--color-link-blue)}
.post-body strong{color:var(--color-heading-charcoal);font-weight:700}
.post-body em{font-style:italic}
.post-body ul,.post-body ol{margin:20px 0 20px 2px;padding-left:22px}
.post-body li{margin:9px 0;padding-left:6px}
.post-body ul li::marker{color:var(--color-ember-orange)}
.post-body ol li::marker{color:var(--color-link-blue);font-weight:700;font-family:var(--font-display)}
.post-body blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:3px solid var(--color-ember-orange);font-family:var(--font-display);font-size:23px;line-height:1.34;letter-spacing:-0.02em;color:var(--color-ink-black);font-weight:500}
.post-body blockquote cite{display:block;margin-top:12px;font-family:var(--font-inter);font-size:14px;font-weight:600;font-style:normal;color:var(--color-muted-gray)}
.post-body hr{border:0;height:1px;background:var(--color-stone-surface);margin:44px 0}

/* Answer-first / TL;DR box */
.tldr{background:var(--color-sand);box-shadow:var(--inset);border-radius:14px;padding:24px 26px;margin:8px 0 8px}
.tldr .tldr-h{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ember-orange);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tldr p{font-size:17px;line-height:1.6;color:var(--color-heading-charcoal);margin:0}
.tldr p + p{margin-top:10px}

/* Callouts */
.callout{border-radius:14px;padding:22px 24px;margin:30px 0;font-size:16.5px;line-height:1.6}
.callout .co-h{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--color-ink-black);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.callout.blue{background:#eaf6ff;box-shadow:inset 0 0 0 1px #d3ebff}
.callout.green{background:#e6faf0;box-shadow:inset 0 0 0 1px #c8f0dc}
.callout.amber{background:#fff5e2;box-shadow:inset 0 0 0 1px #f6e3bd}
.callout.violet{background:#f4ecff;box-shadow:inset 0 0 0 1px #e6d6ff}
.callout p{margin:0 0 0}
.callout p + p{margin-top:8px}

/* Key-takeaways list */
.keybox{background:#fff;box-shadow:var(--inset);border-radius:14px;padding:24px 26px;margin:30px 0}
.keybox h4{font-family:var(--font-display);font-size:18px;color:var(--color-ink-black);margin-bottom:14px}
.keybox ul{margin:0;padding:0;list-style:none}
.keybox li{position:relative;padding:8px 0 8px 30px;font-size:16px;line-height:1.5;color:var(--color-body-brown);border-top:1px solid var(--color-stone-surface)}
.keybox li:first-child{border-top:0}
.keybox li::before{content:'';position:absolute;left:2px;top:14px;width:14px;height:9px;border-left:2.6px solid var(--color-grass-green);border-bottom:2.6px solid var(--color-grass-green);transform:rotate(-45deg)}

/* Data table */
.post-tablewrap{overflow-x:auto;margin:28px 0;border-radius:12px;box-shadow:var(--inset)}
.post-table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;min-width:440px}
.post-table th,.post-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--color-stone-surface)}
.post-table thead th{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-heading-charcoal);background:var(--color-sand)}
.post-table tbody tr:last-child td{border-bottom:0}
.post-table td:first-child{font-weight:600;color:var(--color-heading-charcoal)}
.post-table .em{color:var(--color-ember-orange);font-weight:700}

/* Stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}
.stat-cell{background:#fff;box-shadow:var(--inset);border-radius:12px;padding:22px 20px;text-align:center}
.stat-cell .n{font-family:var(--font-display);font-size:33px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--color-ink-black)}
.stat-cell .n.blue{color:var(--color-link-blue)}.stat-cell .n.ember{color:var(--color-ember-orange)}.stat-cell .n.green{color:var(--color-grass-green)}.stat-cell .n.violet{color:var(--color-plum-violet)}
.stat-cell .l{margin-top:8px;font-size:13px;line-height:1.4;color:var(--color-muted-gray)}
@media(max-width:640px){.stat-strip{grid-template-columns:1fr}.post-body{font-size:17px}}

/* Inline mid-article CTA */
.post-cta{background:var(--color-ink-black);border-radius:16px;padding:32px 34px;margin:40px 0;text-align:center;color:#fff;position:relative;overflow:hidden}
.post-cta h4{font-family:var(--font-display);font-size:24px;color:#fff;letter-spacing:-0.02em;margin-bottom:8px}
.post-cta p{color:rgba(255,255,255,.72);font-size:15.5px;max-width:440px;margin:0 auto 18px}
.post-cta .pcta-btn{display:inline-block;background:#fff;color:var(--color-ink-black);border-radius:9999px;padding:12px 24px;font-size:15px;font-weight:700}
.post-cta .pcta-btn:hover{transform:translateY(-2px);background:var(--color-sun-yellow)}

/* Sources / references */
.source-list{background:var(--color-stone-surface);border-radius:14px;padding:26px 28px;margin:34px 0 6px}
.source-list h4{font-family:var(--font-display);font-size:16px;color:var(--color-ink-black);margin-bottom:14px}
.source-list ol{margin:0;padding-left:20px;counter-reset:src}
.source-list li{font-size:14px;line-height:1.55;color:var(--color-body-brown);margin:10px 0;padding-left:4px}
.source-list li a{color:var(--color-link-blue);text-decoration:underline;text-underline-offset:2px;word-break:break-word}

/* Author bio */
.author-card{display:flex;gap:16px;align-items:flex-start;background:#fff;box-shadow:var(--inset);border-radius:14px;padding:22px 24px;margin:34px 0}
.author-card .av-lg{width:52px;height:52px;border-radius:50%;background:var(--color-ink-black);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:20px;font-weight:700;flex-shrink:0}
.author-card .who{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--color-ink-black)}
.author-card .role{font-size:13px;color:var(--color-muted-gray);margin:2px 0 8px}
.author-card p{font-size:14.5px;line-height:1.55;color:var(--color-body-brown);margin:0}

/* Table of contents */
.post-toc{background:var(--color-sand);box-shadow:var(--inset);border-radius:14px;padding:22px 26px;margin:6px 0 8px}
.post-toc h4{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-gray);margin-bottom:12px}
.post-toc ol{margin:0;padding-left:20px}
.post-toc li{margin:7px 0;font-size:15.5px}
.post-toc a{color:var(--color-heading-charcoal)}
.post-toc a:hover{color:var(--color-link-blue);text-decoration:underline}

/* Related posts footer */
.related{max-width:1120px;margin:0 auto;padding:0 24px}
.related h3{text-align:center;font-family:var(--font-display);font-size:26px;color:var(--color-ink-black);margin-bottom:24px}

/* update-stamp under title */
.freshness{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-muted-gray)}
.freshness .fdot{width:7px;height:7px;border-radius:50%;background:var(--color-grass-green)}