/* Blog listing, cards, article typography and Ghost (Koenig) editor cards.
   Same tokens as site.css: Poppins, 48/400 headings, 20px radius, soft greys. */

/* ---------- listing hero ---------- */
.bloghero{background:var(--hero);padding:calc(var(--hdr) + 56px) 0 56px}
.bloghero .eyebrow a{color:inherit;text-decoration:none}
.bloghero .eyebrow a:hover{color:var(--ink)}
.bloghero h1{margin-top:16px;font-size:clamp(32px,3.6vw,48px);font-weight:400;line-height:1.1;letter-spacing:-.035em}
.bloghero__sub{margin-top:16px;max-width:640px;font-size:18px;line-height:1.55;color:var(--ink-3);letter-spacing:-.02em}
.bloghero--error{padding-bottom:110px}
.error__btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip-link{display:inline-flex;align-items:center;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-3);background:rgba(255,255,255,.7);border-radius:100px;padding:8px 16px;transition:background .15s,color .15s}
.chip-link:hover{background:#fff;color:var(--ink)}
.chip-link.is-on{background:var(--ink);color:#fff}

/* ---------- listing ---------- */
.bloglist{padding:56px 0 0}
.feat{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:64px}
.feat__img{display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.feat__img img,.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.feat:hover .feat__img img,.card:hover .card__img img{transform:scale(1.03)}
.feat__k{font-size:14px;font-weight:500;color:var(--faint);letter-spacing:-.02em}
.feat__k a{color:var(--blue);text-decoration:none}
.feat__title{margin-top:14px;font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.2;letter-spacing:-.04em}
.feat__title a,.card__title a{text-decoration:none;color:inherit}
.feat__title a:hover,.card__title a:hover{color:var(--blue)}
.feat__excerpt{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--ink-3)}
.feat .card__meta{margin-top:16px}
.feat__cta{margin-top:24px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.card{display:flex;flex-direction:column}
.card__img{display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.card__noimg{display:block;width:100%;height:100%;background:radial-gradient(120% 90% at 80% 20%,rgba(255,255,255,.6),transparent 60%),linear-gradient(135deg,#E9ECF3,#D3D9E8)}
.card__body{padding-top:18px}
.card__tag{font-size:13px;font-weight:500;color:var(--faint);text-decoration:none;letter-spacing:-.02em}
.card__tag:hover{color:var(--blue)}
.card__title{margin-top:8px;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.035em}
.card__excerpt{margin-top:10px;font-size:15px;line-height:1.6;color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{display:flex;gap:8px;margin-top:12px;font-size:13px;color:var(--faint)}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:64px}
.pager>:last-child{justify-self:end}
.pager__n{font-size:14px;color:var(--muted)}
.empty{text-align:center;padding:72px 24px;border-radius:var(--r-lg);background:var(--soft)}
.empty h2{font-size:28px;font-weight:500;letter-spacing:-.035em}
.empty p{margin:12px auto 24px;max-width:460px;color:var(--body)}

/* ---------- article ---------- */
.article{padding-top:calc(var(--hdr) + 48px)}
.article__head{max-width:900px;text-align:center}
.crumbs{display:flex;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:var(--faint)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.article__title{margin-top:18px;font-size:clamp(32px,4vw,52px);font-weight:500;line-height:1.12;letter-spacing:-.045em;text-wrap:balance}
.article__sub{margin:18px auto 0;max-width:720px;font-size:20px;line-height:1.5;color:var(--ink-3);letter-spacing:-.02em}
.article__meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px;font-size:14px;color:var(--muted)}
.article__meta a{color:var(--ink);font-weight:500;text-decoration:none}
.article__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.article__img{margin:44px auto 0}
.article__img img{width:100%;border-radius:var(--r-lg);aspect-ratio:2.1/1;object-fit:cover}
.article__img figcaption{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}

/* content grid: main column 720px, wide 1040px, full bleed */
.gh-content{display:grid;grid-template-columns:[full-start] minmax(var(--gut),1fr) [wide-start] minmax(0,160px) [main-start] min(720px,calc(100% - var(--gut) * 2)) [main-end] minmax(0,160px) [wide-end] minmax(var(--gut),1fr) [full-end];margin-top:52px;font-size:18px;line-height:1.75;color:var(--ink-2);letter-spacing:-.01em}
.gh-content>*{grid-column:main-start/main-end;margin:0}
.gh-content>*+*{margin-top:1.4em}
.gh-content>.kg-width-wide{grid-column:wide-start/wide-end}
.gh-content>.kg-width-full{grid-column:full-start/full-end}
.gh-content>.kg-width-full img{border-radius:0}
.gh-content h2{margin-top:2em;font-size:30px;font-weight:500;line-height:1.25;letter-spacing:-.035em;color:var(--ink)}
.gh-content h3{margin-top:1.8em;font-size:23px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:var(--ink)}
.gh-content h4{margin-top:1.6em;font-size:19px;font-weight:600;color:var(--ink)}
.gh-content h2+*,.gh-content h3+*,.gh-content h4+*{margin-top:.7em}
.gh-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.gh-content strong{font-weight:600;color:var(--ink)}
.gh-content ul,.gh-content ol{padding-left:1.4em}
.gh-content li+li{margin-top:.5em}
.gh-content blockquote:not([class]){border-left:3px solid var(--brown);padding:2px 0 2px 22px;font-size:20px;color:var(--ink);font-style:normal}
.gh-content blockquote.kg-blockquote-alt{text-align:center;font-size:26px;line-height:1.45;padding:0 2em;color:var(--ink);font-style:normal}
.gh-content hr{border:0;height:1px;background:var(--line);margin-top:2.5em}
.gh-content hr+*{margin-top:2.5em}
.gh-content code{font-size:.88em;background:var(--soft);border-radius:5px;padding:2px 6px}
.gh-content pre{background:#1E2025;color:#E8E9EC;border-radius:12px;padding:20px 22px;overflow-x:auto;font-size:14.5px;line-height:1.6}
.gh-content pre code{background:none;padding:0}
.gh-content table{width:100%;border-collapse:collapse;font-size:15.5px}
.gh-content th,.gh-content td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.gh-content img{max-width:100%;height:auto;border-radius:14px}
.gh-content figcaption{margin-top:10px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.5}
.gh-content .kg-image-card,.gh-content .kg-gallery-card,.gh-content .kg-embed-card,.gh-content .kg-video-card{margin-top:2em}
.gh-content .kg-image-card+*,.gh-content .kg-gallery-card+*{margin-top:2em}
.gh-content .kg-embed-card{display:flex;flex-direction:column;align-items:center}
.gh-content .kg-callout-card{border-radius:14px}
.gh-content .kg-bookmark-card a.kg-bookmark-container{border-radius:14px;color:var(--ink);text-decoration:none}
.gh-content .kg-button-card a.kg-btn{border-radius:100px}
.gh-content .kg-toggle-card{border-radius:14px}

.article__foot{max-width:720px;margin:56px auto 0;padding:24px var(--gut) 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.share{display:flex;align-items:center;gap:8px}
.share__k{font-size:14px;font-weight:500;color:var(--muted);margin-right:4px}
.share__b{width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.share__b:hover{background:var(--hero)}
.share__b svg{width:17px;height:17px}
.share__done{font-size:13px;color:var(--green-ink)}
.article__tags{display:flex;gap:8px;flex-wrap:wrap}
.article__tags .chip-link{background:var(--soft)}

.more{padding:110px 0 0}
.more__top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.more__top h2{font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.03em}

@media (max-width:1024px){
  .feat{grid-template-columns:1fr;gap:24px}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .quote{width:auto}
  .bloghero{padding:calc(var(--hdr) + 32px) 0 40px}
  .article{padding-top:calc(var(--hdr) + 28px)}
  .article__img{margin-top:28px}
  .article__img img{aspect-ratio:16/10}
  .gh-content{font-size:17px;margin-top:36px}
  .more{padding-top:80px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:40px}
  .pager{grid-template-columns:1fr 1fr}
  .pager__n{display:none}
  .more__top .btn{display:none}
  .article__sub{font-size:18px}
}

/* ---------- content blocks from the article generator (imported posts) ----------
   Imported posts arrive as one HTML card wrapped in <article>, so the
   direct-child spacing above doesn't reach their paragraphs. */
.gh-content article>*,.gh-content section>*,.gh-content aside>*{margin:0}
.gh-content article>*+*,.gh-content section>*+*,.gh-content aside>*+*{margin-top:1.4em}
.gh-content article>h2,.gh-content section>h2{margin-top:2em}
.gh-content article>h3{margin-top:1.8em}
.gh-content article>h2+*,.gh-content article>h3+*,.gh-content section>h2+*{margin-top:.7em}
.gh-content article>*:first-child{margin-top:0}

.gh-content .table-of-contents{background:var(--soft);border-radius:16px;padding:22px 26px;font-size:16px;line-height:1.55}
.gh-content .table-of-contents>strong{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.gh-content .table-of-contents ul{margin:0;padding-left:1.1em}
.gh-content .table-of-contents li+li{margin-top:.45em}
.gh-content .table-of-contents a{text-decoration:none;color:var(--ink-2)}
.gh-content .table-of-contents a:hover{color:var(--blue);text-decoration:underline}

.gh-content .key-takeaway{display:flex;gap:16px;align-items:flex-start;background:#FFF8E6;border:1px solid #F5E2B0;border-radius:16px;padding:20px 22px}
.gh-content .key-takeaway-icon{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:20px;line-height:1}
.gh-content .key-takeaway-label{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#8A5A00}
.gh-content .key-takeaway-text{margin-top:4px!important;font-size:17px;line-height:1.6;color:var(--ink)}

.gh-content .explanatory-visual{border:1px solid var(--line);border-radius:16px;padding:22px 26px;background:#fff;box-shadow:var(--shadow-soft)}
.gh-content .explanatory-visual h3{margin-top:0!important;font-size:18px;line-height:1.4}
.gh-content .explanatory-visual h3::before{content:"Decision guide";display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.gh-content .explanatory-visual ol{margin:0;padding-left:1.3em;font-size:16px}
.gh-content .explanatory-visual li+li{margin-top:.7em}

.gh-content .article-summary{background:var(--hero);border-radius:20px;padding:26px 30px}
.gh-content .article-summary>h2{margin-top:0!important;font-size:24px}
.gh-content .article-summary li+li{margin-top:.5em}

.gh-content .author-box{border-radius:16px;border-color:var(--line)!important;background:var(--soft)}
.gh-content .author-box img{border-radius:50%}
.gh-content .author-box a{text-decoration:none}