/* Plink Exchange blog — assembled from the sitewide design system so blog
   pages are indistinguishable from native directory pages. Wrapper, hero,
   type scale, and cards mirror the .af-wrap/.af-head/.af-card metrics in
   airfill.css; eyebrows/chips/buttons are the shared dev-base classes.
   Only genuinely blog-specific pieces (prose, TOC, FAQ accordion, video
   embeds, the GX model/table treatments) live here. */

/* ---------- page wrapper: identical to .af-wrap ---------- */
.blog-page { max-width: var(--content-max, 1180px); margin: 0 auto; padding: var(--section-y-tight, 48px) var(--gutter, 22px) 80px; position: relative; z-index: 2; }

/* ---------- index hero: identical to .af-head (left-aligned) ---------- */
.blog-head { margin-bottom: 22px; }
.blog-head .eye { display: block; margin-bottom: 8px; }
.blog-head h1 { font: 900 clamp(28px, 4.4vw, 44px)/1.04 var(--display); letter-spacing: -.025em; color: var(--charcoal); margin: 0 0 10px; }
.blog-head p { font: 400 16px/1.6 var(--body); color: var(--charcoal-3); max-width: 68ch; margin: 0; }

/* ---------- featured post: split hero card ---------- */
.blog-feature { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: stretch; margin: 22px 0;
  border: 1.5px solid var(--rule); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, border-color .15s, transform .16s ease; }
.blog-feature:hover { box-shadow: var(--shadow-md); border-color: var(--orange-soft); transform: translateY(-2px); }
.blog-feature-media { background: linear-gradient(150deg, var(--paper-warm), var(--paper)); display: flex; align-items: center; }
.blog-feature-media img { display: block; width: 100%; height: auto; }
.blog-feature-body { padding: 24px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; justify-content: center; }
.blog-feature-title { font: 800 clamp(20px, 2.3vw, 26px)/1.14 var(--display); letter-spacing: -.02em; color: var(--charcoal); }
.blog-feature-dek { font: 400 14.5px/1.55 var(--body); color: var(--charcoal-3); max-width: 52ch; }
.blog-feature-btn { margin-top: 6px; pointer-events: none; }
@media (max-width: 720px) { .blog-feature { grid-template-columns: 1fr; } }

/* ---------- category filter chips (shared .chip does the styling) ---------- */
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px; }
.blog-cats .chip { cursor: pointer; }

/* ---------- grid cards: .af-card metrics ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.blog-card { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden; text-decoration: none;
  transition: transform .14s ease, box-shadow .18s ease, border-color .15s; display: block; color: inherit; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--orange-soft); color: inherit; }
.blog-card-media { aspect-ratio: 1200 / 630; background: linear-gradient(150deg, var(--paper-warm), var(--paper)); position: relative; display: flex; align-items: center; justify-content: center; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-glyph { font: 900 26px var(--display); color: rgba(45,54,61,.18); }
.blog-card-tag { position: absolute; top: 9px; left: 9px; font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.94); border: 1px solid var(--rule); color: var(--charcoal-3); border-radius: 7px; padding: 3px 8px; }
.blog-card-body { padding: 12px 14px 13px; }
.blog-card-cat { font: 600 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--orange-deep); }
.blog-card-name { font: 800 16px/1.2 var(--display); color: var(--charcoal); margin: 3px 0 8px; letter-spacing: -.01em; }
.blog-card-dek { font: 400 13px/1.5 var(--body); color: var(--charcoal-3); margin: 0 0 8px; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.blog-chip { font: 600 11px var(--body); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 2.5px 9px; color: var(--charcoal-3); }
.blog-empty { color: var(--muted); padding: 30px 0; font: 400 15px var(--body); }

/* ---------- article: full-width, main column + configurable sidebar ---------- */
.blog-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 52px; align-items: start; }
.blog-layout--solo { max-width: 780px; grid-template-columns: 1fr; }
.blog-article { min-width: 0; }
.blog-body { max-width: 760px; }          /* keep prose at a readable measure; hero + media use the full column */
@media (max-width: 980px) {
  .blog-layout { grid-template-columns: 1fr; gap: 40px; max-width: 780px; }
  .blog-sidebar { position: static !important; }
}

/* ---------- sidebar widgets ---------- */
.blog-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.blog-widget { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; padding: 18px 18px 16px; }
.blog-widget--sub { background: var(--charcoal); border-color: var(--charcoal); }
.blog-widget-h { font: 800 16px var(--display); letter-spacing: -.01em; color: var(--charcoal); margin: 0 0 12px; }
.blog-widget--sub .blog-widget-h { color: var(--paper); }
.blog-widget-blurb { font: 400 13.5px/1.55 var(--body); color: #f4f1eabf; margin: -6px 0 12px; }
/* subscribe form */
.blog-sub-form { display: block; }
.blog-sub-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.blog-sub-row { display: flex; flex-direction: column; gap: 8px; }
.blog-sub-input { width: 100%; font: 400 14.5px var(--body); color: var(--charcoal); background: #fff; border: 1.5px solid var(--rule); border-radius: 10px; padding: 11px 13px; }
.blog-sub-input:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.blog-sub-btn { justify-content: center; width: 100%; pointer-events: auto; }
.blog-sub-msg { font: 500 13px/1.5 var(--body); color: var(--paper); margin: 10px 0 0; }
/* related posts */
.blog-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.blog-related li + li { border-top: 1px solid var(--rule); }
.blog-related a { display: block; padding: 10px 0; text-decoration: none; }
.blog-related li:first-child a { padding-top: 0; }
.blog-related li:last-child a { padding-bottom: 0; }
.blog-related-cat { display: block; font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 2px; }
.blog-related-title { display: block; font: 600 13.5px/1.35 var(--body); color: var(--charcoal); }
.blog-related a:hover .blog-related-title { color: var(--orange-deep); }
/* category list */
.blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; font: 600 13.5px var(--body); color: var(--charcoal); text-decoration: none; border-top: 1px solid var(--rule); }
.blog-cat-list li:first-child a { border-top: none; }
.blog-cat-list a:hover { color: var(--orange-deep); }
.blog-cat-count { font: 600 11px var(--mono); color: var(--muted); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; }
/* custom link list */
.blog-link-list { list-style: none; margin: 0; padding: 0; }
.blog-link-list a { display: block; padding: 9px 0; font: 600 13.5px var(--body); color: var(--charcoal); text-decoration: none; border-top: 1px solid var(--rule); }
.blog-link-list li:first-child a { border-top: none; }
.blog-link-list a::after { content: " \2192"; color: var(--orange); }
.blog-link-list a:hover { color: var(--orange-deep); }
.blog-back { display: inline-flex; gap: 6px; font: 600 13px var(--body); color: var(--muted); text-decoration: none; margin-bottom: 14px; }
.blog-back:hover { color: var(--orange-deep); }
.blog-hero .eye { display: block; margin-bottom: 8px; }
.blog-title { font: 900 clamp(28px, 4.4vw, 44px)/1.04 var(--display); letter-spacing: -.025em; color: var(--charcoal); margin: 0 0 10px; }
.blog-sub { font: 400 16px/1.6 var(--body); color: var(--charcoal-3); max-width: 68ch; margin: 0 0 18px; }
.blog-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.blog-byline-av { width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; background: var(--paper-warm); border: 1px solid var(--rule); }
.blog-byline-name { display: block; font: 700 13.5px var(--body); color: var(--charcoal); }
.blog-byline-title { display: block; font: 400 12px var(--body); color: var(--muted); }
.blog-byline-date { margin-left: auto; font: 600 11px var(--mono); letter-spacing: .06em; color: var(--muted); }

/* hero media: cover image, or the featured YouTube video full-width under
   the title/subtitle */
.blog-cover { margin: 18px 0 0; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--rule); box-shadow: var(--shadow-sm); background: var(--paper-warm); }
.blog-cover img { display: block; width: 100%; height: auto; }
.blog-video { margin: 0 0 18px; aspect-ratio: 16 / 9; background: #000; border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden; }
.blog-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- table of contents (guide) ---------- */
.blog-toc { margin: 28px 0 14px; padding: 18px 20px; border: 1.5px solid var(--rule); border-radius: 14px; background: #fff; }
.blog-toc-h { display: block; font: 600 var(--t-eye, 11px) var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.blog-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 36px; }
.blog-toc li { counter-increment: toc; margin: 4px 0; break-inside: avoid; }
.blog-toc a { font: 500 14px var(--body); color: var(--charcoal-2); text-decoration: none; }
.blog-toc a::before { content: counter(toc, decimal-leading-zero); font: 600 11px var(--mono); color: var(--orange-deep); margin-right: 8px; }
.blog-toc a:hover { color: var(--orange-deep); }
@media (max-width: 560px) { .blog-toc ol { columns: 1; } }

/* ---------- body prose: sitewide 16px scale, h2 = --t-3xl like every page ---------- */
.blog-body { font: 400 var(--t-md, 16px)/1.7 var(--body); color: var(--charcoal-2); margin-top: 26px; }
.blog-body > h2 { font: 800 var(--t-3xl, 28px)/1.12 var(--display); letter-spacing: -.022em; color: var(--charcoal); margin: 52px 0 14px; scroll-margin-top: 24px; }
.blog-body > h2:first-child { margin-top: 8px; }
.blog-body h3 { font: 800 var(--t-xl, 20px)/1.2 var(--display); letter-spacing: -.01em; color: var(--charcoal); margin: 28px 0 10px; }
.blog-body p { margin: 0 0 16px; }
.blog-body a { color: var(--orange-deep); text-underline-offset: 2px; }
.blog-body strong { color: var(--charcoal); font-weight: 700; }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 1.4em; }
.blog-body li { margin: 4px 0; }
.blog-body blockquote { margin: 22px 0; padding: 6px 0 6px 18px; border-left: 3px solid var(--orange); color: var(--charcoal-3); font-style: italic; }
.blog-callout { margin: 22px 0; padding: 14px 18px; border: 1.5px solid var(--rule); border-left: 4px solid var(--orange); border-radius: 14px; background: var(--paper-warm); font-size: 15px; }
.blog-fig { margin: 24px 0; }
.blog-fig img { display: block; width: 100%; border: 1.5px solid var(--rule); border-radius: 14px; background: #fff; }
.blog-fig figcaption { margin-top: 8px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.blog-embed { margin: 24px 0; aspect-ratio: 16 / 9; background: #000; border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden; }
.blog-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- model deep-dive: image(s) sit inline with the text ---------- */
.gx-model { margin: 40px 0; padding: 0; }
.gx-model h3 { font: 800 var(--t-2xl, 24px) var(--display); color: var(--charcoal); margin: 0 0 12px; letter-spacing: -.01em; scroll-margin-top: 24px; }
.gx-model-media { float: right; margin: 4px 0 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.gx-model-media figure { margin: 0; width: 268px; }
.gx-model-media--2 { flex-direction: row; }
.gx-model-media--2 figure { width: 190px; }
.gx-model-media img { display: block; width: 100%; height: 210px; object-fit: contain; padding: 14px; background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-sm); }
.gx-model-media--2 img { height: 176px; padding: 11px; }
.gx-model-media figcaption { text-align: center; margin-top: 6px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gx-model::after { content: ""; display: block; clear: both; }
@media (max-width: 620px) {
  .gx-model-media, .gx-model-media--2 { float: none; flex-direction: row; margin: 0 0 16px; }
  .gx-model-media figure, .gx-model-media--2 figure { flex: 1; width: auto; }
}

/* ---------- comparison table: the sitewide .af-table idiom ---------- */
.gx-table { margin: 28px 0; }
.gx-table-scroll { overflow-x: auto; border: 1.5px solid var(--rule); border-radius: 14px; -webkit-overflow-scrolling: touch; background: #fff; }
.gx-table table { border-collapse: collapse; width: 100%; min-width: 880px; font: 400 13px/1.45 var(--body); }
.gx-table th, .gx-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); }
.gx-table thead th { position: sticky; top: 0; background: #fff; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1.5px solid var(--rule); white-space: nowrap; }
.gx-table tbody th[scope=row] { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal-3);
  background: #fff; white-space: nowrap; position: sticky; left: 0; border-right: 1px solid var(--rule); }
.gx-table tbody tr:last-child td, .gx-table tbody tr:last-child th { border-bottom: none; }
.gx-table td { color: var(--charcoal); }
.gx-table figcaption { margin: 10px 2px 0; font: 400 12px/1.5 var(--body); color: var(--muted); }

/* editor-inserted generic tables reuse the same idiom */
.blog-table-scroll { overflow-x: auto; border: 1.5px solid var(--rule); border-radius: 14px; background: #fff; margin: 22px 0; }
.blog-spec-table { border-collapse: collapse; width: 100%; font: 400 13px/1.45 var(--body); }
.blog-spec-table th, .blog-spec-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule-2); }
.blog-spec-table thead th { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--rule); }
.blog-spec-table tbody th[scope=row] { font-weight: 700; color: var(--charcoal); }
.blog-spec-table tr:last-child td, .blog-spec-table tr:last-child th { border-bottom: none; }

/* ---------- FAQ ---------- */
.blog-faq { margin: 48px 0 0; padding: 28px 0 0; border-top: 1.5px solid var(--rule); }
.blog-faq > h2 { font: 800 var(--t-3xl, 28px)/1.1 var(--display); color: var(--charcoal); margin: 0 0 8px; letter-spacing: -.022em; }
.blog-faq-intro { font: 400 15px/1.5 var(--body); color: var(--charcoal-3); margin: 0 0 18px; }
.blog-faq-item { border: 1.5px solid var(--rule); border-radius: 14px; margin: 8px 0; background: #fff; transition: border-color .13s; }
.blog-faq-item[open] { border-color: var(--orange-soft); }
.blog-faq-item summary { cursor: pointer; padding: 13px 44px 13px 16px; font: 700 15px var(--body); color: var(--charcoal); list-style: none; position: relative; }
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: '+'; position: absolute; right: 16px; top: 10px; font: 400 21px var(--display); color: var(--orange); }
.blog-faq-item[open] summary::after { content: '\2212'; }
.blog-faq-a { padding: 0 16px 14px; font: 400 14px/1.65 var(--body); color: var(--charcoal-2); }
.blog-faq-a p { margin: 0 0 .7em; }

/* ---------- article footer ---------- */
.blog-foot { margin: 36px 0 0; padding-top: 22px; border-top: 1.5px solid var(--rule); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }