/**
 * Pixron editorial system (blog + news) — v2.32
 * Magazine layout: asymmetric lead, quiet cards, serif long-form reading.
 * Brand accent is reserved for links/CTAs; surfaces stay flat.
 */

/* The editorial masthead replaces the generic site hero on these pages */
body.pixron-theme:has(.pxb) .px-page-hero,
body.pixron-theme:has(.pxb) .px-crumb-bar { display: none !important; }
body.pixron-theme:has(.pxb) { background: #fff !important; }
body.pixron-theme:has(.pxb) #wrapper,
body.pixron-theme:has(.pxb) .sayfacontent { background: transparent !important; box-shadow: none !important; }

.pxb {
  --pxb-ink: var(--px-dark);
  --pxb-body: #334155;
  --pxb-muted: #64748b;
  --pxb-line: #e2e8f0;
  --pxb-soft: #f8fafc;
  --pxb-max: 1280px;
  --pxb-gap: clamp(20px, 2.4vw, 32px);
  color: var(--pxb-body);
  font-size: 16px;
}
.pxb *,
.pxb *::before,
.pxb *::after { box-sizing: border-box; }
.pxb-wrap {
  width: 100%;
  max-width: var(--pxb-max);
  margin: 0 auto;
  padding: 0 var(--px-container-pad);
}
.pxb-wrap--narrow { max-width: 860px; }
.pxb a { text-decoration: none; }

/* ---------- Shared bits ---------- */
.pxb-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.pxb-crumbs li { display: inline-flex; align-items: center; color: var(--pxb-muted); }
.pxb-crumbs li + li::before { content: "/"; margin: 0 10px; color: #cbd5e1; }
.pxb-crumbs a { color: var(--pxb-muted) !important; }
.pxb-crumbs a:hover { color: var(--pxb-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.pxb-crumbs span { color: var(--pxb-ink); }

.pxb-kicker {
  margin: 0 0 14px;
  color: var(--px-accent-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.pxb-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pxb-ink) !important;
  font-weight: 700;
  font-size: 15px;
}
.pxb-textlink svg { transition: transform 0.18s ease; }
.pxb-textlink:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.pxb-textlink:hover svg { transform: translateX(3px); }

.pxb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 2px solid var(--pxb-ink);
}
.pxb-section-head h2 {
  margin: 0;
  color: var(--pxb-ink);
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
}

/* ---------- Masthead (list pages) ---------- */
.pxb-masthead {
  padding: clamp(36px, 5vw, 64px) 0 0;
  border-bottom: 1px solid var(--pxb-line);
  background: #fff;
}
.pxb-masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.pxb-masthead-title {
  margin: 0;
  color: var(--pxb-ink);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 16ch;
}
.pxb-masthead-lead {
  margin: 0;
  max-width: 46ch;
  color: #475569;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
}
.pxb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-bottom: -1px;
}
.pxb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  color: var(--pxb-muted) !important;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pxb-tab:hover { color: var(--pxb-ink) !important; }
.pxb-tab.is-active { color: var(--pxb-ink) !important; border-bottom-color: var(--pxb-ink); }
.pxb-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--pxb-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Cards ---------- */
.pxb-card { margin: 0; min-width: 0; }
.pxb-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
}
.pxb-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #f1f5f9;
  aspect-ratio: 16 / 10;
}
.pxb-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.pxb-card-media.is-empty { display: flex; align-items: center; justify-content: center; }
.pxb-card-media.is-empty .px-editorial-placeholder { width: 30%; max-width: 120px; opacity: 0.25; }
.pxb-card-link:hover .pxb-card-media img { opacity: 0.92; }
.pxb-card-body { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; flex: 1 1 auto; }
.pxb-card-cat { color: var(--px-accent-strong); font-size: 13.5px; font-weight: 700; }
.pxb-card-title {
  margin: 0;
  color: var(--pxb-ink);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pxb-card-link:hover .pxb-card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pxb-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--pxb-muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.pxb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: auto;
  padding-top: 6px;
  color: var(--pxb-muted);
  font-size: 13.5px;
}
.pxb-card-meta > * + *::before { content: "·"; margin: 0 8px; color: #cbd5e1; }

/* Feature */
.pxb-card--feature .pxb-card-media { aspect-ratio: 16 / 9; border-radius: 18px; }
.pxb-card--feature .pxb-card-body { padding-top: 24px; gap: 12px; }
.pxb-card--feature .pxb-card-title { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -0.025em; }
.pxb-card--feature .pxb-card-excerpt { font-size: 17px; -webkit-line-clamp: 3; max-width: 62ch; }

/* Compact (lead side list) */
.pxb-card--compact .pxb-card-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-areas: "body media";
  gap: 18px;
  align-items: start;
}
.pxb-card--compact .pxb-card-media { grid-area: media; aspect-ratio: 1 / 1; border-radius: 10px; }
.pxb-card--compact .pxb-card-body { grid-area: body; padding-top: 0; gap: 6px; }
.pxb-card--compact .pxb-card-title { font-size: 18px; line-height: 1.3; }

/* ---------- List layout ---------- */
.pxb-list-body { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.pxb-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pxb-gap) clamp(32px, 4vw, 56px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.pxb-lead.has-side { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.pxb-lead-side { display: flex; flex-direction: column; }
.pxb-lead-side .pxb-card { padding: 22px 0; border-top: 1px solid var(--pxb-line); }
.pxb-lead-side .pxb-card:first-child { padding-top: 0; border-top: 0; }
.pxb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) var(--pxb-gap);
}
.pxb-pagination { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: center; }
.pxb-pagination a,
.pxb-pagination span,
.pxb-pagination li > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--pxb-ink) !important;
  font-weight: 600;
}
.pxb-pagination .active a,
.pxb-pagination .active span,
.pxb-pagination a.active,
.pxb-pagination span.current { background: var(--pxb-ink); color: #fff !important; }
.pxb-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.pxb-cat-about { max-width: 760px; margin-top: clamp(48px, 6vw, 80px); }
.pxb-cat-about h2 { color: var(--pxb-ink); font-size: 22px; }

.pxb-footer-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px clamp(32px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--pxb-line);
}
.pxb-fb-col h2 { margin: 0 0 16px; color: var(--pxb-ink); font-size: 18px; }
.pxb-popular { margin: 0; padding: 0; list-style: none; counter-reset: pxpop; }
.pxb-popular li { counter-increment: pxpop; display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--pxb-line); }
.pxb-popular li:first-child { border-top: 0; padding-top: 0; }
.pxb-popular li::before {
  content: counter(pxpop, decimal-leading-zero);
  color: #94a3b8;
  font-family: var(--px-font-mono);
  font-size: 14px;
  padding-top: 2px;
}
.pxb-popular a { color: var(--pxb-ink) !important; font-weight: 600; line-height: 1.4; }
.pxb-popular a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pxb-topics { margin: 0; padding: 0; list-style: none; }
.pxb-topics a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--pxb-line);
  color: var(--pxb-ink) !important;
  font-weight: 600;
}
.pxb-topics li:first-child a { border-top: 0; padding-top: 0; }
.pxb-topics em { color: var(--pxb-muted); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.pxb-topics a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pxb-fb-help { padding: 24px; border-radius: 16px; background: var(--pxb-soft); }
.pxb-fb-help p { margin: 0 0 14px; color: var(--pxb-muted); line-height: 1.6; }
.pxb-fb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--pxb-line);
  color: var(--pxb-ink);
}

/* ---------- Article ---------- */
.pxb-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: 3px;
  pointer-events: none;
}
.pxb-progress span {
  display: block;
  height: 100%;
  background: var(--px-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.pxb-article-head { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3.5vw, 40px); background: #fff; }
.pxb-article-title {
  margin: 0;
  color: var(--pxb-ink);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.pxb-dek {
  margin: 20px 0 0;
  color: #475569;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 60ch;
}
.pxb-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--pxb-line);
}
.pxb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pxb-ink);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}
.pxb-avatar--lg { width: 56px; height: 56px; font-size: 21px; }
.pxb-byline-text { display: flex; flex-direction: column; gap: 2px; }
.pxb-byline-text strong { color: var(--pxb-ink); font-size: 15.5px; }
.pxb-byline-meta { display: flex; flex-wrap: wrap; color: var(--pxb-muted); font-size: 14px; }
.pxb-byline-meta > * + *::before { content: "·"; margin: 0 8px; color: #cbd5e1; }

.pxb-cover { margin: 0 auto clamp(40px, 5vw, 64px); max-width: calc(var(--pxb-max) - 120px); }
.pxb-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 20px;
  background: #f1f5f9;
}

.pxb-article-grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 720px) 260px;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
}
.pxb-share {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pxb-share-label { color: var(--pxb-muted); font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.pxb-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pxb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--pxb-ink) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pxb-share-btn:hover { border-color: var(--pxb-ink); background: var(--pxb-soft); }
.pxb-share-btn.is-copied { border-color: #059669; color: #047857 !important; background: #ecfdf5; }

.pxb-rail { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; }
.pxb-rail-title { margin: 0 0 12px; color: var(--pxb-ink); font-size: 14px; font-weight: 700; }
.pxb-toc[hidden], .pxb-toc-mobile[hidden] { display: none; }
.pxb-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--pxb-line); }
.pxb-toc a {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  color: var(--pxb-muted) !important;
  font-size: 14.5px;
  line-height: 1.4;
}
.pxb-toc a:hover { color: var(--pxb-ink) !important; }
.pxb-toc a.is-active { color: var(--pxb-ink) !important; font-weight: 700; border-left-color: var(--pxb-ink); }
.pxb-help { padding: 22px; border-radius: 16px; background: var(--pxb-soft); }
.pxb-help-title { margin: 0 0 6px !important; color: var(--pxb-ink); font-weight: 700; font-size: 15.5px; }
.pxb-help p { margin: 0 0 14px; color: var(--pxb-muted); font-size: 14.5px; line-height: 1.55; }

.pxb-toc-mobile {
  display: none;
  margin: 0 0 32px;
  border: 1px solid var(--pxb-line);
  border-radius: 12px;
}
.pxb-toc-mobile summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--pxb-ink);
  font-weight: 700;
  cursor: pointer;
}
.pxb-toc-mobile ol { margin: 0; padding: 0 18px 14px 36px; }
.pxb-toc-mobile li { padding: 5px 0; }
.pxb-toc-mobile a { color: var(--pxb-body) !important; }

/* Long-form prose */
.pxb-prose { color: #1e293b; font-size: 17px; line-height: 1.75; overflow-wrap: break-word; }
.pxb-prose--serif { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 19.5px; line-height: 1.72; }
.pxb-prose > :first-child { margin-top: 0; }
.pxb-prose p { margin: 0 0 1.25em; }
.pxb-prose--serif > p:first-of-type { font-size: 1.12em; line-height: 1.6; color: var(--pxb-ink); }
.pxb-prose h2,
.pxb-prose h3,
.pxb-prose h4 {
  font-family: var(--px-font-sans);
  color: var(--pxb-ink);
  letter-spacing: -0.02em;
  scroll-margin-top: 110px;
}
.pxb-prose h2 { margin: 2em 0 0.6em; font-size: 28px; line-height: 1.2; }
.pxb-prose h3 { margin: 1.6em 0 0.5em; font-size: 22px; line-height: 1.3; }
.pxb-prose h4 { margin: 1.4em 0 0.4em; font-size: 18px; }
.pxb-prose a {
  color: var(--pxb-ink);
  text-decoration: underline;
  text-decoration-color: var(--px-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pxb-prose a:hover { text-decoration-color: var(--pxb-ink); }
.pxb-prose ul,
.pxb-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.pxb-prose li { margin: 0.45em 0; padding-left: 0.2em; }
.pxb-prose li::marker { color: var(--pxb-muted); }
.pxb-prose strong { color: var(--pxb-ink); }
.pxb-prose img,
.pxb-prose figure img { max-width: 100%; height: auto; border-radius: 14px; }
.pxb-prose figure { margin: 2em 0; }
.pxb-prose figcaption { margin-top: 10px; color: var(--pxb-muted); font-family: var(--px-font-sans); font-size: 14px; text-align: center; }
.pxb-prose blockquote {
  margin: 1.8em 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--px-accent);
  color: var(--pxb-ink);
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
}
.pxb-prose blockquote p:last-child { margin-bottom: 0; }
.pxb-prose hr { border: 0; border-top: 1px solid var(--pxb-line); margin: 2.5em 0; }
.pxb-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--pxb-ink);
  font-family: var(--px-font-mono);
  font-size: 0.8em;
}
.pxb-prose pre {
  margin: 1.8em 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--px-dark);
  color: #e2e8f0;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.6;
}
.pxb-prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.pxb-prose table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-family: var(--px-font-sans);
  font-size: 15px;
}
.pxb-prose th,
.pxb-prose td { padding: 12px 14px; border-bottom: 1px solid var(--pxb-line); text-align: left; vertical-align: top; }
.pxb-prose th { color: var(--pxb-ink); font-size: 13.5px; border-bottom: 2px solid var(--pxb-ink); }

.pxb-article-foot { margin-top: 56px; }
.pxb-author {
  display: flex;
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--pxb-line);
  border-bottom: 1px solid var(--pxb-line);
}
.pxb-author strong { display: block; color: var(--pxb-ink); font-size: 17px; margin-bottom: 6px; }
.pxb-author p { margin: 0 0 12px; color: var(--pxb-muted); line-height: 1.6; }
.pxb-comments { margin-top: 40px; }

.pxb-related { padding: clamp(48px, 6vw, 80px) 0; background: var(--pxb-soft); border-top: 1px solid var(--pxb-line); }
.pxb-related .pxb-section-head { border-top: 0; padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .pxb-article-grid { grid-template-columns: minmax(0, 720px); }
  .pxb-rail { display: none; }
  .pxb-toc-mobile:not([hidden]) { display: block; }
  .pxb-share {
    position: static;
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 8px;
  }
  .pxb-share-label { margin: 0 6px 0 0; }
}
@media (max-width: 1024px) {
  .pxb-masthead-grid,
  .pxb-lead.has-side { grid-template-columns: 1fr; }
  .pxb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pxb-grid { grid-template-columns: 1fr; }
  .pxb-tabs { gap: 0 20px; }
  .pxb-card--compact .pxb-card-link { grid-template-columns: minmax(0, 1fr) 88px; }
  .pxb-prose--serif { font-size: 18px; }
  .pxb-cover img { aspect-ratio: 16 / 10; border-radius: 14px; }
  .pxb-author { flex-direction: column; }
}
@media print {
  .pxb-progress, .pxb-share, .pxb-rail, .pxb-related, .pxb-toc-mobile { display: none !important; }
  .pxb-article-grid { display: block; }
}

/* Fixes after first render */
.pxb-cover img { height: auto !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; max-height: none !important; }
.pxb-card-media img { height: 100% !important; object-fit: cover !important; }
.pxb-masthead-title { max-width: 20ch; hyphens: manual; }
@media (min-width: 1200px) {
  /* 4-up keeps rows full for the usual 8 / 12 posts per page */
  .pxb--list .pxb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pxb--list .pxb-grid .pxb-card-title { font-size: 18px; }
}
@media (max-width: 640px) {
  .pxb-cover img { aspect-ratio: 16 / 10 !important; }
}