/* ============================================================
   TickProof — blog (article + embedded components)
   Layered on site.css (tokens, .nav, .footer, .proofmini, .btn).
   Dark, instrumentation feel; long-form reading tuned.
   ============================================================ */

.blog-body { background: var(--bg-canvas); }

/* faint chart grid behind the masthead only */
.article-top { position: relative; }

/* ---------- layout: share rail · article · TOC ---------- */
.article-grid { max-width: 1240px; margin: 0 auto; padding: 28px 40px 0;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 248px; gap: 40px; align-items: start; }
.article-main { min-width: 0; max-width: 760px; margin: 0 auto; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 22px;
  font: 500 12px var(--font-sans); color: var(--fg-tertiary); }
.crumbs a { color: var(--fg-tertiary); text-decoration: none; }
.crumbs a:hover { color: var(--brand-green); }
.crumbs .sep { color: var(--fg-muted); }
.crumbs [aria-current] { color: var(--fg-secondary); }

/* ---------- article header ---------- */
.article-eyebrow { font: 700 11px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-green); margin: 0 0 14px; }
.article-h1 { font: 700 clamp(30px, 4.4vw, 46px)/1.08 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-primary); margin: 0 0 18px; text-wrap: balance; }
.article-dek { font: 400 clamp(16px,1.6vw,19px)/1.5 var(--font-sans); color: var(--fg-secondary); margin: 0 0 24px; max-width: 60ch; }

.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.byline { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.byline .av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--bg-surface-3), var(--bg-surface)); border: 1px solid var(--border-soft);
  font: 700 13px var(--font-display); color: var(--brand-green); }
.byline .who { display: flex; flex-direction: column; gap: 1px; }
.byline .nm { font: 600 14px var(--font-sans); color: var(--fg-primary); }
.byline .role { font: 500 11.5px var(--font-sans); color: var(--fg-tertiary); }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); }
.meta-item { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-mono); color: var(--fg-tertiary); }
.meta-item svg { width: 15px; height: 15px; }
.meta-item .k { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- featured image / hero data-viz ---------- */
.article-hero { margin: 26px 0 8px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.article-hero img { display: block; width: 100%; height: auto; }
.article-hero .figcap { font: 500 11.5px var(--font-sans); color: var(--fg-muted); padding: 9px 14px; border-top: 1px solid var(--border-hairline); background: var(--bg-surface-2); }

/* ---------- inline share row (mobile) ---------- */
.share-inline { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0; padding: 14px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.share-inline .lab { font: 700 9px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); margin-right: 4px; }

/* ---------- sticky share rail (desktop) ---------- */
.share-rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.share-rail .lab { font: 700 8px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); writing-mode: vertical-rl; margin-bottom: 4px; }
.sbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline); background: var(--bg-surface); color: var(--fg-tertiary); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); text-decoration: none; }
.sbtn:hover { color: var(--brand-green); border-color: var(--brand-green-ring); background: var(--brand-green-soft); }
.sbtn svg { width: 17px; height: 17px; }
.share-inline .sbtn { width: 38px; height: 38px; }

/* ---------- table of contents ---------- */
.toc { position: sticky; top: 88px; border-left: 1px solid var(--border-hairline); padding-left: 18px; }
.toc-h { font: 700 9px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.toc li.sub { padding-left: 14px; }
.toc a { font: 500 12.5px/1.4 var(--font-sans); color: var(--fg-tertiary); text-decoration: none; display: block; transition: color var(--dur-fast) var(--ease-out); }
.toc a:hover { color: var(--fg-secondary); }
.toc a.active { color: var(--brand-green); }
.toc-progress { margin-top: 16px; height: 2px; background: var(--border-hairline); border-radius: 2px; overflow: hidden; }
.toc-progress b { display: block; height: 100%; width: 0; background: var(--brand-green); }

/* mobile collapsible TOC */
.toc-mobile { display: none; margin: 22px 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface); }
.toc-mobile summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  font: 700 10px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-secondary); }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary .chev { transition: transform var(--dur-base); }
.toc-mobile[open] summary .chev { transform: rotate(180deg); }
.toc-mobile ol { margin: 0; padding: 0 16px 16px 34px; display: flex; flex-direction: column; gap: 10px; }
.toc-mobile a { font: 500 13px var(--font-sans); color: var(--fg-secondary); text-decoration: none; }

/* ---------- article body typography ---------- */
.article-body { font: 400 17px/1.72 var(--font-sans); color: var(--fg-secondary); }
.article-body > p { margin: 0 0 22px; max-width: 70ch; text-wrap: pretty; }
.article-body h2 { font: 700 27px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-primary); margin: 44px 0 16px; scroll-margin-top: 88px; }
.article-body h3 { font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-primary); margin: 32px 0 12px; scroll-margin-top: 88px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; max-width: 70ch; }
.article-body li { margin: 0 0 9px; }
.article-body li::marker { color: var(--brand-green); }
.article-body strong { color: var(--fg-primary); font-weight: 600; }
.article-body p a, .article-body li a { color: var(--brand-green); text-decoration: none; border-bottom: 1px solid var(--brand-green-ring); transition: border-color var(--dur-fast); }
.article-body p a:hover, .article-body li a:hover { border-bottom-color: var(--brand-green); }
/* external links get an arrow */
.article-body a.ext::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px;
  background: currentColor; -webkit-mask: url("../assets/icons/arrow-up-right.svg") center/contain no-repeat; mask: url("../assets/icons/arrow-up-right.svg") center/contain no-repeat; }
.article-body .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* ---------- pull quote (+ click-to-tweet) ---------- */
.pullquote { margin: 32px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--brand-green); }
.pullquote p { font: 500 23px/1.4 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-primary); margin: 0; text-wrap: balance; }
.pullquote .tweet { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--bg-surface);
  font: 600 12px var(--font-sans); color: var(--fg-secondary); text-decoration: none; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.pullquote .tweet:hover { color: var(--brand-green); border-color: var(--brand-green-ring); background: var(--brand-green-soft); }
.pullquote .tweet svg { width: 14px; height: 14px; }

/* ---------- callout boxes ---------- */
.callout { margin: 28px 0; padding: 18px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  background: var(--bg-surface); display: flex; gap: 14px; }
.callout .co-ic { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.callout .co-ic svg { width: 22px; height: 22px; }
.callout .ct { font: 400 14.5px/1.6 var(--font-sans); color: var(--fg-secondary); }
.callout .ct .h { display: block; font: 700 10px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.callout.info { border-color: rgba(77,163,255,0.32); background: rgba(77,163,255,0.07); }
.callout.info .co-ic, .callout.info .ct .h { color: var(--status-verified); }
.callout.warn { border-color: rgba(255,194,51,0.34); background: var(--tape-soft); border-radius: var(--radius-none); }
.callout.warn .co-ic, .callout.warn .ct .h { color: var(--status-warn); }
.callout.disclosure { border-color: var(--border-hairline); background: var(--bg-inset); }
.callout.disclosure .co-ic, .callout.disclosure .ct .h { color: var(--fg-tertiary); }
.callout.disclosure .ct { font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); }

/* ---------- data + comparison tables ---------- */
.tbl-wrap { margin: 28px 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow-x: auto; background: var(--bg-surface); }
table.dtbl { width: 100%; border-collapse: collapse; min-width: 520px; }
table.dtbl caption { caption-side: top; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-hairline);
  font: 700 10px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); background: var(--bg-surface-2); }
table.dtbl th, table.dtbl td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border-hairline); }
table.dtbl thead th { font: 700 11px var(--font-sans); color: var(--fg-secondary); white-space: nowrap; }
table.dtbl thead th.sortable { cursor: pointer; user-select: none; }
table.dtbl thead th.sortable:hover { color: var(--brand-green); }
table.dtbl thead th .arr { opacity: 0.4; font-size: 9px; margin-left: 5px; }
table.dtbl thead th[aria-sort="ascending"] .arr, table.dtbl thead th[aria-sort="descending"] .arr { opacity: 1; color: var(--brand-green); }
table.dtbl td { font: 500 13.5px var(--font-sans); color: var(--fg-secondary); }
table.dtbl td.num, table.dtbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
table.dtbl tbody tr:hover td { background: var(--bg-surface-2); }
table.dtbl tbody tr:last-child td { border-bottom: none; }
table.dtbl .rowhead { color: var(--fg-primary); font-weight: 600; }
.pos { color: var(--pnl-positive); } .neg { color: var(--pnl-negative); }

/* comparison (A vs B) table — first col labels, two firm cols */
table.cmp { width: 100%; border-collapse: collapse; min-width: 520px; }
table.cmp thead th { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); text-align: left;
  font: 700 13px var(--font-sans); color: var(--fg-primary); }
table.cmp thead th.cmp-firm { color: var(--brand-green); }
table.cmp thead th.cmp-firm .sub { display: block; font: 500 10px var(--font-mono); color: var(--fg-tertiary); text-transform: none; letter-spacing: 0; margin-top: 2px; }
table.cmp td { padding: 12px 16px; border-bottom: 1px solid var(--border-hairline); font: 500 13.5px var(--font-sans); color: var(--fg-secondary); vertical-align: top; }
table.cmp td.lbl { font: 700 9px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); white-space: nowrap; width: 30%; }
table.cmp tbody tr:hover td { background: var(--bg-surface-2); }
table.cmp tbody tr:last-child td { border-bottom: none; }

/* ---------- embedded verified-share card ---------- */
.vshare-embed { margin: 30px 0; }
.vshare-embed .eb { font: 700 9px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.vshare-embed .eb::before { content: ""; width: 14px; height: 14px; background: var(--brand-green);
  -webkit-mask: url("../assets/logo-tickproof-mark.svg") center/contain no-repeat; mask: url("../assets/logo-tickproof-mark.svg") center/contain no-repeat; }
.vshare-embed .frame { border: 1px solid var(--brand-green-ring); border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--brand-green-ring), 0 24px 60px rgba(0,224,138,0.12); max-width: 420px; }
.vshare-embed .vlink { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font: 600 12px var(--font-sans); color: var(--brand-green); text-decoration: none; }
.vshare-embed .vlink:hover { text-decoration: underline; }
.vshare-embed .vlink svg { width: 14px; height: 14px; }

/* ---------- CTA block ---------- */
.cta-block { margin: 34px 0; padding: 28px; border-radius: var(--radius-md); border: 1px solid var(--brand-green-ring);
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,224,138,0.09), transparent 70%), var(--bg-surface);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cta-block .cta-txt { flex: 1; min-width: 220px; }
.cta-block h4 { font: 400 21px var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-primary); margin: 0 0 7px; }
.cta-block p { font: 400 14px/1.5 var(--font-sans); color: var(--fg-secondary); margin: 0; }
.cta-block .btn { flex: 0 0 auto; }
/* inline waitlist capture (form.capture from site.css) sitting in a CTA/news strip */
.cta-block .capture, .blog-news .capture { flex: 1 1 300px; max-width: 460px; }

/* ---------- FAQ ---------- */
.faq { margin: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.faq details { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font: 600 15px var(--font-sans); color: var(--fg-primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: 0 0 18px; width: 18px; height: 18px; color: var(--fg-tertiary); transition: transform var(--dur-base); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .ans { padding: 0 18px 17px; font: 400 14.5px/1.65 var(--font-sans); color: var(--fg-secondary); max-width: 70ch; }

/* ---------- related articles ---------- */
.related { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--border-hairline); }
.related h2 { font: 700 13px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 18px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rcard { display: flex; flex-direction: column; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.rcard:hover { border-color: var(--border-strong); }
.rcard .thumb { aspect-ratio: 16/9; background: var(--bg-inset); border-bottom: 1px solid var(--border-hairline); position: relative; overflow: hidden; }
.rcard .thumb .cat { position: absolute; top: 8px; left: 8px; font: 700 8px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-green); background: rgba(10,12,14,0.7); padding: 3px 7px; border-radius: var(--radius-sm); }
.rcard .rc-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; }
.rcard h3 { font: 600 14.5px/1.32 var(--font-sans); color: var(--fg-primary); margin: 0; }
.rcard .rmeta { font: 500 11px var(--font-mono); color: var(--fg-muted); }

/* ---------- article foot byline / disclosure ---------- */
.article-end { margin-top: 40px; }

/* ---------- toast ---------- */
.blog-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); z-index: 95;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: var(--radius-sm);
  background: var(--bg-surface-3); border: 1px solid var(--brand-green-ring); box-shadow: var(--shadow-glow-green);
  font: 600 13px var(--font-sans); color: var(--fg-primary); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.blog-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.blog-toast svg { width: 16px; height: 16px; color: var(--brand-green); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0,1fr); padding: 24px 24px 0; }
  .share-rail, .toc { display: none; }
  .toc-mobile { display: block; }
  .share-inline { display: flex; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
  .cta-block { flex-direction: column; align-items: flex-start; }
  .article-body { font-size: 16px; }
}

/* ============================================================
   BLOG INDEX  (/blog) + AUTHOR PAGE
   ============================================================ */
.blog-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ---------- index masthead ---------- */
.blog-masthead { padding: 56px 0 30px; border-bottom: 1px solid var(--border-hairline); }
.blog-masthead .eyebrow { font: 700 11px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-green); margin: 0 0 14px; }
.blog-masthead h1 { font: 700 clamp(32px,4.6vw,50px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-primary); margin: 0 0 16px; text-wrap: balance; }
.blog-masthead .sub { font: 400 clamp(15px,1.6vw,18px)/1.55 var(--font-sans); color: var(--fg-secondary); margin: 0; max-width: 58ch; }

/* ---------- category filter bar ---------- */
.cat-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 22px 0; position: sticky; top: 56px; z-index: 20;
  background: var(--bg-canvas); border-bottom: 1px solid var(--border-hairline); }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer;
  font: 600 12.5px var(--font-sans); white-space: nowrap; transition: all var(--dur-fast) var(--ease-out); }
.cat-chip:hover { border-color: var(--fg-tertiary); color: var(--fg-primary); }
.cat-chip[aria-pressed="true"] { background: var(--brand-green); border-color: var(--brand-green); color: var(--fg-inverse); }
.cat-chip .n { font: 700 10px var(--font-mono); opacity: 0.7; }
.cat-bar .search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-surface); min-width: 200px; }
.cat-bar .search:focus-within { border-color: var(--brand-green-ring); }
.cat-bar .search svg { width: 15px; height: 15px; color: var(--fg-muted); flex: 0 0 15px; }
.cat-bar .search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--fg-primary); font: 500 13px var(--font-sans); }
.cat-bar .search input::placeholder { color: var(--fg-muted); }

/* ---------- featured (lead) post ---------- */
.blog-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; padding: 32px 0; border-bottom: 1px solid var(--border-hairline); }
.blog-feature .ft-media { position: relative; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-inset); min-height: 260px; }
.blog-feature .ft-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.blog-feature .ft-cat { font: 700 10px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-green); }
.blog-feature h2 { font: 700 clamp(24px,2.6vw,32px)/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-primary); margin: 0; text-wrap: balance; }
.blog-feature h2 a { color: inherit; text-decoration: none; }
.blog-feature h2 a:hover { color: var(--brand-green); }
.blog-feature .ft-dek { font: 400 15.5px/1.6 var(--font-sans); color: var(--fg-secondary); margin: 0; max-width: 52ch; }
.blog-feature .ft-meta { display: flex; align-items: center; gap: 12px; font: 500 12px var(--font-mono); color: var(--fg-tertiary); flex-wrap: wrap; }
.blog-feature .ft-badge { position: absolute; top: 12px; left: 12px; font: 700 9px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-green); background: rgba(10,12,14,0.72); border: 1px solid var(--brand-green-ring); padding: 5px 9px; border-radius: var(--radius-sm); }

/* ---------- post grid ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 32px 0 12px; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-surface); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.post-card .pc-media { position: relative; aspect-ratio: 16/9; background: var(--bg-inset); border-bottom: 1px solid var(--border-hairline); overflow: hidden; }
.post-card .pc-media .cat { position: absolute; top: 9px; left: 9px; z-index: 1; font: 700 8px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-green); background: rgba(10,12,14,0.7); padding: 3px 7px; border-radius: var(--radius-sm); }
.post-card .pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .pc-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-card h3 { font: 600 16px/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-primary); margin: 0; }
.post-card .pc-dek { font: 400 13px/1.55 var(--font-sans); color: var(--fg-tertiary); margin: 0; flex: 1; }
.post-card .pc-meta { display: flex; align-items: center; gap: 9px; font: 500 11px var(--font-mono); color: var(--fg-muted); margin-top: 2px; }
.post-card .pc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); }
.post-card.is-hidden { display: none; }

/* generative thumbnail (no stock art): faint chart grid + ticker glyph */
.thumb-gen { position: absolute; inset: 0; background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: 26px 26px; display: grid; place-items: center; }
.thumb-gen .glyph { font: 700 clamp(26px,4vw,40px) var(--font-display); letter-spacing: 0.08em; color: var(--fg-muted); opacity: 0.5; text-transform: uppercase; }
.thumb-gen.spark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 24%; height: 38%;
  background: linear-gradient(180deg, transparent, var(--brand-green-soft)); clip-path: polygon(0 80%, 12% 60%, 25% 72%, 38% 40%, 52% 55%, 66% 22%, 80% 38%, 100% 8%, 100% 100%, 0 100%); opacity: 0.6; }

.no-results { display: none; padding: 48px 0; text-align: center; font: 500 14px var(--font-sans); color: var(--fg-tertiary); }
.no-results.show { display: block; }

/* empty state — shown when no articles are published yet (template mode) */
.blog-empty { display: none; margin: 8px 0 12px; padding: 48px 28px; text-align: center;
  border: 1px dashed var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); }
.blog-empty.show { display: block; }
.blog-empty .be-h { font: 700 11px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 10px; }
.blog-empty p { font: 400 15px/1.6 var(--font-sans); color: var(--fg-secondary); margin: 0 auto; max-width: 46ch; }

/* ---------- pagination / load more ---------- */
.blog-more { display: flex; justify-content: center; padding: 18px 0 56px; }

/* ---------- newsletter strip ---------- */
.blog-news { margin: 8px 0 56px; padding: 30px 32px; border: 1px solid var(--brand-green-ring); border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,224,138,0.08), transparent 70%), var(--bg-surface);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-news .bn-txt h3 { font: 400 22px var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-primary); margin: 0 0 7px; }
.blog-news .bn-txt p { font: 400 14px/1.5 var(--font-sans); color: var(--fg-secondary); margin: 0; }

/* ---------- author page ---------- */
.author-hero { padding: 52px 0 30px; border-bottom: 1px solid var(--border-hairline); display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.author-hero .av-lg { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--bg-surface-3), var(--bg-surface)); border: 1px solid var(--border-soft);
  font: 700 26px var(--font-display); color: var(--brand-green); }
.author-hero .a-id { flex: 1; min-width: 280px; }
.author-hero .a-eyebrow { font: 700 10px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 8px; }
.author-hero h1 { font: 700 clamp(28px,3.6vw,40px)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-primary); margin: 0 0 12px; }
.author-hero .a-bio { font: 400 15.5px/1.65 var(--font-sans); color: var(--fg-secondary); margin: 0 0 16px; max-width: 64ch; }
.author-hero .a-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.author-hero .a-links a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); font: 600 12px var(--font-sans); color: var(--fg-secondary); text-decoration: none; transition: all var(--dur-fast) var(--ease-out); }
.author-hero .a-links a:hover { border-color: var(--brand-green-ring); color: var(--brand-green); }
.author-hero .a-links svg { width: 14px; height: 14px; }
.author-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.author-stats .st .v { font: 700 20px var(--font-mono); color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.author-stats .st .l { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.author-section-h { font: 700 12px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); margin: 38px 0 18px; }

/* ---------- index/author responsive ---------- */
@media (max-width: 1080px) {
  .blog-wrap { padding: 0 24px; }
  .blog-feature { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .cat-bar .search { margin-left: 0; order: -1; width: 100%; }
  .blog-news { flex-direction: column; align-items: flex-start; }
  .author-stats { gap: 20px; }
}