/* Blog and 404 styles. The site chrome (base, nav, footer) is copied from the inline styles of about.html,
   so these pages match the rest of the site. The blog itself is translated from design Option A
   (seo/designs/A-Overview.dc.html and A-Article.dc.html in the KevlexSEO notes folder). */

/* ── Site chrome (same as about.html) ───────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0d0f1a;--bg-card:#191b28;--bg-card-hover:#1e2030;--surface:#13151f;--border:#252840;--border-accent:rgba(124,58,237,.25);--text:#e8e8f2;--text-muted:#7878a0;--text-dim:#4a4a6a;--accent:#7c3aed;--accent-glow:#a78bfa;--accent-soft:rgba(124,58,237,.08);--green:#22c55e;--green-soft:rgba(34,197,94,.1);--amber:#f59e0b;--amber-soft:rgba(245,158,11,.1);--red:#ef4444;--blue:#3b82f6;--blue-soft:rgba(59,130,246,.1);--font:'Inter',-apple-system,sans-serif;--mono:'JetBrains Mono',monospace;--max-w:1140px;--radius:12px;--radius-sm:8px}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.35}
a{color:var(--accent-glow);text-decoration:none}a:hover{text-decoration:underline}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(13,15,26,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:60px}.nav-logo{font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--text)}.nav-logo span{color:var(--accent-glow)}.nav-links{display:flex;gap:1.8rem;align-items:center}.nav-links a{font-size:.85rem;color:var(--text-muted);transition:color .2s}.nav-links a:hover{color:var(--text);text-decoration:none}.nav-cta{font-size:.8rem;padding:.45rem 1rem;border-radius:6px;background:var(--accent);color:#fff;font-weight:600}
.footer{border-top:1px solid var(--border);padding:2rem 0}.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.footer-brand{font-weight:700;font-size:.85rem;color:var(--text-muted)}.footer-brand span{color:var(--accent-glow)}.footer-links{display:flex;gap:1.4rem;flex-wrap:wrap}.footer-links a{font-size:.78rem;color:var(--text-dim)}.footer-copy{font-size:.72rem;color:var(--text-dim);width:100%;text-align:center;margin-top:.8rem}
@media(max-width:768px){.nav-links a:not(.nav-cta){display:none}}

/* ── Blog tokens (design Option A) ─────────────────────────────────── */
.blog{
  --b-surface:#13151f; --b-line:#252840; --b-line-dim:#1c1e30; --b-line-bright:#34385a;
  --b-text:#e8e8f2; --b-body:#c9c9dc; --b-muted:#9a9ac0; --b-dim:#7878a0;
  --b-accent:#7c3aed; --b-glow:#a78bfa; --b-light:#c4b5fd;
  --b-wrap:1092px;
  padding-top:60px; /* the fixed nav */
  color:var(--b-text);
}
.blog a{color:inherit}
.blog a:hover{color:var(--b-glow);text-decoration:none}
.wrap{max-width:var(--b-wrap);margin:0 auto;padding:0 24px}
.mono-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--b-muted)}
.eyebrow{display:inline-block;align-self:flex-start;padding:6px 14px;border:1px solid rgba(124,58,237,.35);background:rgba(124,58,237,.10);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-light)}
.accent{color:var(--b-glow)}
.lead{font-size:19px;line-height:1.6;color:var(--b-muted)}
.post-cat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--b-glow)}
.tag{display:inline-block;padding:4px 10px;border:1px dashed var(--b-line-bright);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--b-muted)}

/* Images and placeholders */
.img-ph{width:100%;height:100%;min-height:inherit;position:relative;background:repeating-linear-gradient(135deg,#191b28 0 14px,#1e2030 14px 28px)}
.img-ph .mono-label{position:absolute;left:16px;bottom:16px;padding:6px 10px;background:var(--bg);border-radius:6px;font-size:11px;letter-spacing:.1em}
.post-feature__img img,.post-card__img img,.post-hero__img img{width:100%;height:100%;object-fit:cover;display:block}

/* Avatar */
.avatar{flex:none;border-radius:50%;background:#1e2030;border:1px solid var(--b-line-bright);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--b-light);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--sm{width:48px;height:48px}
.avatar--md{width:72px;height:72px;font-size:22px}
.avatar--lg{width:96px;height:96px;font-size:28px}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--b-muted)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}

/* ── Blog home, category and author pages ──────────────────────────── */
.blog-intro{padding-top:72px;display:flex;flex-direction:column;gap:56px}
.blog-intro__text{display:flex;flex-direction:column;gap:22px;max-width:760px}
.blog-intro h1{font-size:clamp(40px,6vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.blog-intro--compact{padding-top:56px;gap:20px}
.blog-intro--compact h1{font-size:clamp(34px,5vw,52px)}
.blog-intro--compact .lead{max-width:680px}

.post-feature{display:flex;flex-wrap:wrap;background:var(--b-surface);border:1px solid var(--b-line);border-radius:16px;overflow:hidden;transition:border-color .2s}
.post-feature:hover{border-color:var(--border-accent)}
.post-feature__img{flex:1 1 420px;min-height:300px}
.post-feature__body{flex:1 1 420px;padding:44px 44px 40px;display:flex;flex-direction:column;gap:18px}
.post-feature__labels{display:flex;gap:12px;align-items:center}
.pill-label{background:var(--b-accent);color:#fff;padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.post-feature h2{font-size:34px;line-height:1.12;letter-spacing:-.025em;font-weight:800}
.post-feature p{font-size:17px;line-height:1.65;color:var(--b-muted)}
.post-feature__more{margin-top:8px;font-weight:600;font-size:15px;color:var(--b-light)}

.byline__author{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.5}
.byline__author strong{display:block;font-weight:600;color:var(--b-text)}
.byline__author span span{display:block;color:var(--b-muted)}

.blog-list{padding-top:72px;padding-bottom:96px}
.list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--b-line-bright)}
.list-head h2{font-size:30px;letter-spacing:-.02em;font-weight:800}
.list-head__link{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid var(--b-line-bright)}
.blog .chip--active,.blog .chip--active:hover{background:var(--b-text);color:var(--bg);border-color:var(--b-text)}
.chip__count{opacity:.6;font-size:12px;margin-left:6px}

.post-grid{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.post-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.post-card:hover{border-color:var(--border-accent)}
.post-card__img{height:180px}
.post-card__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-card h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:700}
.post-card p{font-size:15px;line-height:1.6;color:var(--b-muted);flex:1}
.post-card__meta{font-size:13px;color:var(--b-dim)}
.post-grid--3 .post-card__img{display:none}

.pager{margin-top:40px;padding-top:24px;border-top:1px solid var(--b-line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.pager__label{font-size:14px;color:var(--b-muted)}
.pager__links{display:flex;flex-wrap:wrap;gap:8px}
.pager__num,.pager__btn{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--b-line-bright)}
.pager__btn{padding:0 18px;font-weight:600}
.pager__num--current{background:var(--b-text);color:var(--bg);border-color:var(--b-text);font-weight:600}

.author-hero{display:flex;flex-wrap:wrap;gap:32px 56px;margin-top:12px}
.author-hero__id{display:flex;gap:20px;align-items:center;flex:1 1 320px}
.author-hero__role{display:block;color:var(--b-muted);margin-top:4px}
.author-hero__bio{flex:1 1 380px;display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.7;color:var(--b-body)}

/* ── CTA band ─────────────────────────────────────────────────────── */
.cta-band{background:var(--b-surface);border-top:1px solid var(--b-line)}
.cta-band__inner{padding-top:88px;padding-bottom:88px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.cta-band h2{font-size:clamp(32px,4.5vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;max-width:620px}
.cta-band p{margin-top:18px;font-size:18px;line-height:1.6;color:var(--b-muted);max-width:620px}
.btn-cta{display:inline-flex;align-items:center;gap:8px;background:var(--b-accent);color:#fff!important;font-weight:600;font-size:16px;padding:16px 26px;border-radius:10px;transition:opacity .2s}
.btn-cta:hover{opacity:.88}

/* ── Article ──────────────────────────────────────────────────────── */
.post-header{padding-top:56px}
.post-header__text{display:flex;flex-direction:column;align-items:flex-start}
.post-header .eyebrow{margin-top:22px;border-radius:6px;padding:6px 12px}
.post-header h1{margin-top:18px;max-width:820px;font-size:clamp(38px,5.5vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.post-header__lead{margin-top:20px;max-width:720px;font-size:20px}
.byline{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font-size:14px;color:var(--b-muted)}
.byline__meta{display:flex;flex-wrap:wrap;gap:6px 28px}
/* Smaller than the Kevlex hero, so the article starts above the fold */
.post-hero{margin-top:40px}
.post-hero__img{height:clamp(200px,28vw,340px);border-radius:16px;border:1px solid var(--b-line);overflow:hidden}
.post-hero figcaption{margin-top:10px;font-size:14px;color:var(--b-dim)}

.post-layout{margin-top:48px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.toc{flex:1 1 240px;max-width:280px}
.toc > .mono-label{display:block;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--b-line-bright)}
.toc__list{list-style:none;font-size:15px;line-height:1.45}
.toc__list a{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--b-line-dim);color:var(--b-body)}
.toc__list .num{font-family:var(--mono);font-size:12px;color:var(--b-dim);padding-top:2px}
.share{margin-top:28px}
.share .mono-label{display:block;margin-bottom:10px}
.share__links{display:flex;flex-wrap:wrap;gap:8px}
.pill-btn{font:600 13px var(--font);color:var(--b-text);background:transparent;padding:9px 14px;border:1px solid var(--b-line-bright);border-radius:999px;cursor:pointer}
/* Sticky on desktop, so "On this page" stays in view while reading */
@media (min-width:900px){.toc{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto}}

.post-main{flex:999 1 560px;min-width:0;max-width:700px}
.short-answer{margin:0 0 36px;padding:24px 26px;background:var(--b-surface);border:1px solid var(--b-line);border-radius:14px}
.short-answer .mono-label{display:block;margin-bottom:12px;color:var(--b-glow)}
.short-answer ul{padding-left:20px;font-size:16px;line-height:1.7;color:var(--b-text)}

.post-body p{margin:0 0 20px;font-size:18px;line-height:1.75;color:var(--b-body)}
.post-body h2,.faq h2{margin:48px 0 16px;font-size:30px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--b-text);max-width:24ch;scroll-margin-top:84px}
.post-body h3{margin:32px 0 12px;font-size:21px;line-height:1.3;font-weight:700}
.post-body a{color:var(--b-light);text-decoration:underline;text-underline-offset:3px}
.post-body ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 24px}
.post-body ul li{position:relative;padding-left:36px;font-size:17px;line-height:1.6;color:var(--b-text)}
.post-body ul li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--b-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.post-body ol{margin:0 0 24px 22px;font-size:17px;line-height:1.7;color:var(--b-body)}
.post-body blockquote{margin:8px 0 28px;padding:24px 28px;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.35);border-radius:14px}
.post-body blockquote p{margin:0;font-size:21px;line-height:1.5;font-weight:600;color:var(--b-text)}
.post-figure{margin:8px 0 28px}
.post-figure table,.post-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;border:1px solid var(--b-line);border-radius:12px}
@media (min-width:640px){.post-figure table,.post-body table{display:table;width:100%}}
/* Plain Markdown tables (outside {% figure %}) get the same look and scroll sideways inside themselves on phones */
.post-body > table{margin:8px 0 28px}
.post-figure th,.post-body th{padding:12px 16px;background:var(--b-surface);text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-muted);font-weight:500}
.post-figure td,.post-body td{padding:14px 16px;border-top:1px solid var(--b-line);color:var(--b-text)}
.post-figure figcaption{margin-top:10px;font-size:14px;color:var(--b-dim)}

.faq__list{border-top:1px solid var(--b-line-bright)}
.faq details{border-bottom:1px solid var(--b-line);padding:18px 0}
.faq summary{display:flex;justify-content:space-between;gap:16px;font-size:17px;font-weight:600;color:var(--b-text);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span::before{content:"+";color:var(--b-muted)}
.faq details[open] summary span::before{content:"−"}
.faq details p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--b-body)}

.post-tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-tags .mono-label{margin-right:4px}
.post-tag{padding:5px 12px;border:1px solid var(--b-line-bright);border-radius:999px;font-size:13px;color:var(--b-body)}

.author-box{margin-top:40px;padding:28px;background:var(--b-surface);border:1px solid var(--b-line);border-radius:16px;display:flex;flex-wrap:wrap;gap:20px}
.author-box__text{flex:1 1 280px}
.author-box__name{display:block;margin-top:6px;font-size:20px;font-weight:700}
.author-box__role{display:block;color:var(--b-muted);font-size:14px}
.author-box p{margin-top:10px;font-size:16px;line-height:1.65;color:var(--b-body)}
.author-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.li-btn{font-size:15px;font-weight:600;padding:11px 18px;border:1px solid var(--blue);color:#93c5fd!important;border-radius:999px}
.author-box__more{font-size:15px;font-weight:600}

.related{margin-top:88px;padding-bottom:88px}

/* ── Glossary (hub cards and term pages) ──────────────────────────── */
.g-intro{gap:22px}
.g-intro .lead{max-width:720px}
.g-jump{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.g-letters{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.g-letters .mono-label{margin-right:8px}
.g-letters a,.g-letters span:not(.mono-label){display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:8px;font-family:var(--mono);font-size:13px}
.g-letters a{border:1px solid var(--b-line-bright);color:var(--b-light)}
.g-letters a:hover{border-color:var(--b-glow)}
.g-letters span:not(.mono-label){color:var(--b-dim);opacity:.5}
.g-section{padding-top:64px;scroll-margin-top:72px}
.g-grid{margin-top:24px;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){.g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.g-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.g-card{background:var(--b-surface);border:1px solid var(--b-line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s}
.g-card:hover{border-color:var(--border-accent)}
.g-card h3{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:700}
.g-abbr{display:inline-block;vertical-align:2px;margin-left:4px;padding:2px 8px;border-radius:6px;background:rgba(124,58,237,.16);border:1px solid rgba(124,58,237,.35);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--b-light)}
.g-card p{font-size:15px;line-height:1.6;color:var(--b-muted);flex:1}
.g-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.g-card__more{font-weight:600;font-size:14px;color:var(--b-glow)}
.g-az{padding-bottom:96px}
.g-az__groups{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:28px 32px}
.g-az__group{scroll-margin-top:72px}
.g-az__group h3{font-family:var(--mono);font-size:15px;color:var(--b-glow);padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--b-line)}
.g-az__group ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.g-az__group a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b-line-bright)}
.g-az__see{color:var(--b-dim)}

.g-article{max-width:808px;padding-top:56px;padding-bottom:88px}
.g-head{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.g-head .eyebrow{border-radius:6px;padding:6px 12px}
.g-head h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.g-aliases{font-size:16px;color:var(--b-muted)}
.g-block{margin-top:28px;padding:24px 26px;background:var(--b-surface);border:1px solid var(--b-line);border-radius:14px}
.g-block .mono-label{display:block;margin-bottom:12px;color:var(--b-glow)}
.g-block p{font-size:17px;line-height:1.7;color:var(--b-body)}
.g-block--def{border-color:rgba(124,58,237,.35)}
.g-block--def p{font-size:19px;line-height:1.6;color:var(--b-text)}
.g-block--example blockquote{padding-left:18px;border-left:3px solid var(--b-accent)}
.g-block--example blockquote p{font-size:18px;font-style:italic;color:var(--b-text)}
.g-block--faq h2{font-size:24px;line-height:1.3;letter-spacing:-.015em;font-weight:800;margin-bottom:12px}
.g-body{margin-top:28px}
.g-body p{margin:0 0 18px;font-size:18px;line-height:1.75;color:var(--b-body)}
.g-note{margin-top:20px;padding:12px 16px;border:1px dashed var(--b-line-bright);border-radius:10px;font-size:14px;color:var(--b-muted)}
.g-links{margin-top:48px}
.g-links h2{font-size:24px;letter-spacing:-.015em;font-weight:800;margin-bottom:16px}
.g-cross{margin-top:20px;font-size:16px;color:var(--b-muted)}
.g-cross a{color:var(--b-light);text-decoration:underline;text-underline-offset:3px}
.g-posts{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:16px;color:var(--b-muted)}
.g-posts a{color:var(--b-light);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .g-article{padding-top:40px}
  .g-block{padding:20px}
}

/* ── 404 ──────────────────────────────────────────────────────────── */
.not-found{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.not-found h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.not-found__links{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:8px}

@media (max-width:640px){
  .post-feature__body{padding:28px 24px}
  .post-feature h2{font-size:28px}
  .blog-intro,.post-header{padding-top:40px}
  .post-layout{gap:40px}
  .toc{max-width:none}
}

/* Preview builds only (ELEVENTY_ENV=preview): marks posts that are drafts or dated in the future */
.draft-banner { background: #c0262d; color: #fff; font: 600 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 10px 16px; position: relative; z-index: 5; }
.nav-links a.nav-cta{color:#fff} /* "Join Waitlist" was grey on purple (audit 2026-11-06) */

/* Featured images (1200x675, title drawn into the image): show them whole at 16:9, never cropped */
.post-hero__img.has-img, .post-feature__img.has-img, .post-card__img.has-img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.post-hero__img.has-img { max-width: 960px; }
.post-feature__img.has-img { align-self: center; }

/* Featured card with an image (/blog/): the 16:9 image fills the card's full height, flush top/bottom/left,
   ~60/40 columns from 960px (the text is clipped below that); the text column is fitted inside that height (contain: size keeps it from making the card
   taller). Stacked below 960px. Fallback crop keeps the bottom-left (title baked into the image). */
@media (min-width: 960px) {
  .post-feature.post-feature--img { display: grid; grid-template-columns: 3fr 2fr; align-items: stretch; flex-wrap: nowrap; }
  .post-feature--img .post-feature__img.has-img { aspect-ratio: 16 / 9; min-height: 0; height: auto; align-self: stretch; flex: none; }
  .post-feature--img .post-feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
  .post-feature--img .post-feature__body { contain: size; overflow: hidden; min-width: 0; padding: 26px 32px; gap: 10px; justify-content: center; flex: none; }
  .post-feature--img h2 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; }
  .post-feature--img p { font-size: 15.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .post-feature--img .post-feature__more { margin-top: 2px; }
  /* Never squeeze the text parts: a squeezed excerpt was clipped mid-word ("agent-") with no ellipsis.
     The line clamp alone shortens it, always ending in an ellipsis; fewer lines where the card is shorter. */
  .post-feature--img .post-feature__body > * { flex-shrink: 0; }
  .post-feature--img p { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  .post-feature--img .post-feature__body { padding: 20px 28px; }
}
@media (min-width: 1180px) {
  .post-feature--img p { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 959px) {
  .post-feature.post-feature--img { display: grid; grid-template-columns: 1fr; flex-wrap: nowrap; }
  .post-feature--img .post-feature__img.has-img { aspect-ratio: 16 / 9; min-height: 0; height: auto; align-self: stretch; flex: none; }
}