/* PkOUG Blog — premium light/dark visual refresh without workflow changes */

.blog-progress{
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0%;
  z-index: 120;
  background: linear-gradient(90deg, rgba(20,111,52,.95), rgba(231,27,34,.95));
  box-shadow: 0 0 18px rgba(231,27,34,.22);
}

.blog-premium-page .bg{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(18,77,38,.12), transparent 60%),
    radial-gradient(1200px 680px at 100% 0%, rgba(231,27,34,.10), transparent 60%),
    radial-gradient(800px 460px at 50% 10%, rgba(65,105,225,.10), transparent 60%);
}
html[data-theme="dark"] .blog-premium-page .bg{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(18,77,38,.20), transparent 60%),
    radial-gradient(1200px 680px at 100% 0%, rgba(231,27,34,.18), transparent 60%),
    radial-gradient(800px 460px at 50% 10%, rgba(65,105,225,.18), transparent 60%);
}

.blog-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  filter: saturate(.9);
}
.blog-reveal.is-visible{ opacity: 1; transform: translateY(0); filter: saturate(1); }

.blog-hero{
  position: relative;
  overflow: hidden;
  padding: 34px;
  margin-top: 20px;
  border-radius: 34px;
  border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.42)),
    radial-gradient(1200px 700px at 0% 0%, rgba(65,105,225,.18), transparent 60%),
    radial-gradient(900px 540px at 100% 0%, rgba(231,27,34,.12), transparent 56%),
    radial-gradient(860px 480px at 55% 110%, rgba(18,77,38,.12), transparent 54%);
  box-shadow: 0 24px 80px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  isolation: isolate;
}
html[data-theme="dark"] .blog-hero{
  background:
    linear-gradient(135deg, rgba(8,12,20,.82), rgba(11,18,30,.64)),
    radial-gradient(1200px 700px at 0% 0%, rgba(65,105,225,.24), transparent 60%),
    radial-gradient(900px 540px at 100% 0%, rgba(231,27,34,.20), transparent 56%),
    radial-gradient(860px 480px at 55% 110%, rgba(18,77,38,.20), transparent 54%);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}

.blog-hero::before,
.blog-hero::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:-1;
}
.blog-hero::before{
  width: 340px;
  height: 340px;
  border-radius: 50%;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(231,27,34,.18), transparent 68%);
  filter: blur(6px);
}
.blog-hero::after{
  width: 320px;
  height: 320px;
  border-radius: 50%;
  left: -120px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(18,77,38,.16), transparent 68%);
  filter: blur(10px);
}

.blog-particles-wrap,
.blog-particles,
.blog-gridlines,
.blog-light-beam{
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.blog-particles-wrap{ pointer-events: none; z-index: -1; overflow: hidden; }
.blog-particles{ width:100%; height:100%; display:block; opacity:.88; }
.blog-gridlines{
  background:
    linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.82), transparent 100%);
  opacity: .30;
}
html[data-theme="dark"] .blog-gridlines{ opacity: .24; }
.blog-light-beam{
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.24) 49%, rgba(255,255,255,.05) 57%, transparent 68%);
  transform: translateX(-42%) skewX(-18deg);
  animation: blog-beam 8s linear infinite;
  opacity: .70;
}
html[data-theme="dark"] .blog-light-beam{ opacity: .42; }

@keyframes blog-beam {
  0% { transform: translateX(-42%) skewX(-18deg); }
  100% { transform: translateX(165%) skewX(-18deg); }
}

.blog-hero-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 28px;
  align-items: stretch;
}
.blog-hero-copy,
.blog-hero-visual{ position: relative; z-index: 2; }

.blog-kicker-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-bottom: 12px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary) 70%, var(--text));
}
.kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18,77,38,.98), rgba(231,27,34,.98));
  box-shadow: 0 0 0 7px rgba(231,27,34,.08);
}
.blog-status-pill,
.blog-chip,
.blog-feature-chip,
.blog-visual-pills span,
.blog-tag{
  backdrop-filter: blur(10px);
}
.blog-status-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.58);
  color: var(--text);
}
html[data-theme="dark"] .blog-status-pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.blog-hero h1{
  margin: 0;
  font-size: clamp(36px, 5vw, 62px);
  line-height: .98;
  letter-spacing: -.04em;
  max-width: 12ch;
}
.blog-hero p{
  margin: 16px 0 0;
  color: var(--muted);
  max-width: 68ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
}
.blog-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 22px;
}

.blog-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.blog-toolbar-hero{
  margin-top: 22px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in oklab, var(--border) 68%, transparent);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme="dark"] .blog-toolbar-hero{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.blog-search{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.blog-search input{
  width: min(520px, 72vw);
  padding: 14px 16px;
  border-radius: 16px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.72);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.blog-search input:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--primary) 38%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 12%, transparent);
}
html[data-theme="dark"] .blog-search input{
  background: rgba(10,16,28,.74);
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.blog-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.60);
  font-weight: 900;
  font-size: 12px;
}
.blog-chip-soft{ background: rgba(255,255,255,.48); }
html[data-theme="dark"] .blog-chip,
html[data-theme="dark"] .blog-chip-soft{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.blog-btn{
  position: relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius: 14px;
  font-weight: 950;
  border:1px solid color-mix(in oklab, var(--border) 72%, transparent);
  background: rgba(255,255,255,.76);
  text-decoration:none;
  color:inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-btn::before{
  content:"";
  position:absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.55) 48%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .65s ease;
  pointer-events:none;
}
.blog-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(15,23,42,.10); border-color: color-mix(in oklab, var(--primary) 26%, var(--border)); }
.blog-btn:hover::before{ transform: translateX(120%); }
html[data-theme="dark"] .blog-btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .blog-btn:hover{ box-shadow: 0 18px 56px rgba(0,0,0,.28); }
.blog-btn.primary{
  color:#fff;
  background: linear-gradient(135deg, rgba(18,77,38,.96), rgba(231,27,34,.96));
  border-color: transparent;
}

.blog-feature-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
.blog-feature-chip,
.blog-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.50);
  font-size: 12px;
  font-weight: 900;
}
html[data-theme="dark"] .blog-feature-chip,
html[data-theme="dark"] .blog-tag{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

.blog-orbit-panel{
  position: relative;
  height: 100%;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 56px rgba(15,23,42,.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.blog-orbit-panel::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
  pointer-events:none;
}
html[data-theme="dark"] .blog-orbit-panel{
  background: linear-gradient(180deg, rgba(10,16,28,.70), rgba(10,16,28,.48));
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.34);
}

.blog-visual-pills{
  position: relative;
  z-index: 2;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.blog-visual-pills span{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.46);
  font-size: 12px;
  font-weight: 800;
}
html[data-theme="dark"] .blog-visual-pills span{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }

.blog-core-wrap{
  position: relative;
  min-height: 360px;
  margin-bottom: 14px;
  border-radius: 24px;
  border: 1px solid color-mix(in oklab, var(--border) 66%, transparent);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 56%);
  overflow: hidden;
}
html[data-theme="dark"] .blog-core-wrap{ border-color: rgba(255,255,255,.09); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 34%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 56%); }
.blog-core-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(231,27,34,.08), transparent 38%), radial-gradient(circle at 46% 56%, rgba(18,77,38,.10), transparent 40%);
  pointer-events:none;
}
.blog-orbit{
  position:absolute;
  left:50%; top:50%;
  border-radius: 50%;
  border: 1px dashed rgba(120,148,188,.26);
  transform: translate(-50%, -50%);
  animation: orbit-spin 20s linear infinite;
}
.blog-orbit.orbit-a{ width: 210px; height: 210px; }
.blog-orbit.orbit-b{ width: 290px; height: 290px; animation-duration: 26s; animation-direction: reverse; }
.blog-orbit.orbit-c{ width: 360px; height: 360px; animation-duration: 34s; }
html[data-theme="dark"] .blog-orbit{ border-color: rgba(160,193,238,.16); }
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.blog-core{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 156px;
  height: 156px;
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(18,77,38,.92), rgba(231,27,34,.92));
  box-shadow: 0 18px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff;
  text-align:center;
}
.blog-core b{ font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.blog-core .pk{ color: #b6f5c5; }
.blog-core .oug{ color: #ffe0de; }
.blog-core span:last-child{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; opacity: .9; }
.blog-orbit-node{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 86px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
html[data-theme="dark"] .blog-orbit-node{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); box-shadow: 0 12px 30px rgba(0,0,0,.26); }
.node-db{ top: 22px; left: 50%; transform: translateX(-50%); }
.node-oci{ bottom: 20px; left: 50%; transform: translateX(-50%); }
.node-apex{ right: 20px; top: 50%; transform: translateY(-50%); }
.node-ace{ left: 18px; bottom: 74px; }
.node-sigs{ left: 20px; top: 72px; }

.blog-quick-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.blog-quick-card{
  min-height: 124px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.blog-quick-card h3{ margin:0; font-size: 17px; line-height:1.15; }
.blog-quick-card p{ margin:8px 0 0; font-size: 13px; line-height:1.55; color: var(--muted); }
html[data-theme="dark"] .blog-quick-card{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

.blog-divider{ margin: 20px 0 6px; }
.blog-divider svg{ display:block; width:100%; height: 82px; }
.blog-divider-top{ margin-top: 8px; }
.blog-divider-line{
  fill: none;
  stroke: rgba(231,27,34,.55);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: blog-divider-flow 16s linear infinite;
}
.blog-divider-line.faint{ stroke: rgba(18,77,38,.48); animation-duration: 20s; }
.blog-divider-dot{ fill: rgba(18,77,38,.95); }
html[data-theme="dark"] .blog-divider-line{ stroke: rgba(255,145,129,.48); }
html[data-theme="dark"] .blog-divider-line.faint{ stroke: rgba(133,220,155,.40); }
@keyframes blog-divider-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -280; } }

.blog-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 4px 0 10px;
}
.blog-stat-card{
  position:relative;
  overflow:hidden;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.56));
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
.blog-stat-card::before{
  content:"";
  position:absolute;
  inset: auto -20% -38% auto;
  width: 140px; height: 140px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(231,27,34,.14), transparent 65%);
  pointer-events:none;
}
.blog-stat-card.accent::before{ background: radial-gradient(circle, rgba(18,77,38,.16), transparent 65%); }
html[data-theme="dark"] .blog-stat-card{ background: linear-gradient(180deg, rgba(10,16,28,.84), rgba(10,16,28,.66)); border-color: rgba(255,255,255,.10); box-shadow: 0 22px 58px rgba(0,0,0,.30); }
.blog-stat-label{ display:block; font-size: 12px; letter-spacing:.14em; text-transform: uppercase; font-weight:900; color: var(--muted); }
.blog-stat-value{ display:block; margin-top: 12px; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.04em; color: var(--text); }
.blog-stat-note{ display:block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height:1.5; }

.blog-grid-section{
  position: relative;
  margin-top: 14px;
  padding: 12px 0 0;
}
.blog-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.blog-section-head h2{
  margin: 8px 0 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin: 18px 0 30px;
}
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } .blog-search input{ width: 100%; } }

.blog-card{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--border) 72%, transparent);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68));
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  display:flex;
  flex-direction:column;
  min-height: 100%;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}
.blog-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 35%, transparent 65%, rgba(255,255,255,.12));
  pointer-events:none;
}
html[data-theme="dark"] .blog-card{ background: linear-gradient(180deg, rgba(10,16,28,.86), rgba(10,16,28,.70)); border-color: rgba(255,255,255,.10); box-shadow: 0 24px 70px rgba(0,0,0,.30); }
.blog-card:hover{ transform: translateY(-5px); box-shadow: 0 26px 70px rgba(15,23,42,.12); border-color: color-mix(in oklab, var(--primary) 24%, var(--border)); }
html[data-theme="dark"] .blog-card:hover{ box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.blog-card a{ text-decoration:none; color:inherit; height:100%; display:flex; flex-direction:column; }

.blog-cover{
  position:relative;
  aspect-ratio: 16/9;
  overflow:hidden;
  background:
    radial-gradient(1200px 400px at 20% 10%, rgba(65,105,225,0.38), transparent 60%),
    radial-gradient(900px 380px at 90% 20%, rgba(0,255,255,0.18), transparent 55%),
    radial-gradient(640px 320px at 50% 120%, rgba(18,77,38,0.18), transparent 56%),
    rgba(0,0,0,0.05);
}
.blog-cover::after{
  content:"";
  position:absolute;
  inset: auto auto 0 0;
  width:100%; height: 56%;
  background: linear-gradient(180deg, transparent, rgba(8,12,20,.22));
}
.blog-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-body{ padding: 16px 16px 18px; display:flex; flex-direction:column; gap: 10px; flex: 1; }
.blog-title{ font-weight: 1000; font-size: 20px; line-height: 1.16; margin:0; letter-spacing:-.02em; }
.blog-excerpt{ color: var(--muted); margin:0; font-size: 14px; line-height: 1.62; }
.blog-meta{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color: var(--muted); font-size: 12px; margin-top: auto; padding-top: 4px; }
.blog-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 2px; }
.blog-pagination{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin: 10px 0 40px; }

/* Article / blog-post page styles retained */
.article{ max-width: 86ch; margin: 0 auto; }
.article-hero{ border-radius: 18px; overflow:hidden; border:1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.86); }
html[data-theme="dark"] .article-hero{ border-color: rgba(255,255,255,0.10); background: rgba(12,18,32,0.72); }
.article-hero .img{ aspect-ratio: 16/9; background: radial-gradient(900px 380px at 20% 10%, rgba(65,105,225,0.35), transparent 60%), radial-gradient(800px 360px at 90% 20%, rgba(0,255,255,0.18), transparent 55%), rgba(0,0,0,0.05); }
.article-hero .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-head{ padding: 18px; }
.article-head h1{ margin: 4px 0 8px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.02em; }
.article-head .meta{ display:flex; gap:10px; flex-wrap:wrap; color: var(--muted); font-size: 13px; }
.article-content{ padding: 18px; line-height: 1.75; font-size: 16px; }
.article-content h2{ margin-top: 24px; font-size: 22px; }
.article-content h3{ margin-top: 20px; font-size: 18px; }
.article-content blockquote{ margin: 16px 0; padding: 12px 14px; border-left: 4px solid rgba(65,105,225,0.40); background: rgba(65,105,225,0.08); border-radius: 12px; }
.article-content pre{ padding: 12px 14px; border-radius: 14px; overflow:auto; background: rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08); }
html[data-theme="dark"] .article-content pre{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.article-actions{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding: 0 6px; margin: 16px 0 36px; }

/* v32: Quill font classes */
.post-content .ql-font-inter{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.post-content .ql-font-roboto{ font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
.post-content .ql-font-serif{ font-family: Georgia, 'Times New Roman', serif; }
.post-content .ql-font-monospace{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; }

/* v32: code styling */
.post-content pre,
.post-content pre.ql-syntax{
  background: rgba(12,18,32,0.92);
  color: rgba(255,255,255,0.92);
  padding: 14px;
  border-radius: 16px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.10);
}
.post-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.95em;
}
.post-content :not(pre) > code{
  background: rgba(65,105,225,0.12);
  border: 1px solid rgba(65,105,225,0.22);
  border-radius: 10px;
  padding: 2px 8px;
}
.post-content .hljs{ background: transparent; }

/* Images */
.post-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="light"] .post-content img{ border-color: rgba(0,0,0,0.08); }

/* Light theme code blocks */
html[data-theme="light"] .post-content pre,
html[data-theme="light"] .post-content pre.ql-syntax{
  background: rgba(246,248,250,0.98);
  color: rgba(17,24,39,0.92);
  border: 1px solid rgba(0,0,0,0.10);
}

/* Gutenberg blocks (Editor.js) */
.post-content figure{ margin: 14px 0; }
.post-content figcaption{ color: var(--muted); font-size: 13px; margin-top: 6px; }
.post-content table.pk-table{ width:100%; border-collapse: collapse; margin: 14px 0; overflow:auto; }
.post-content table.pk-table td, .post-content table.pk-table th{ border:1px solid rgba(0,0,0,0.10); padding: 8px 10px; vertical-align: top; }
html[data-theme="dark"] .post-content table.pk-table td, html[data-theme="dark"] .post-content table.pk-table th{ border-color: rgba(255,255,255,0.12); }

@media (max-width: 1180px){
  .blog-hero-shell{ grid-template-columns: 1fr; }
  .blog-hero h1{ max-width: 15ch; }
}

@media (max-width: 980px){
  .blog-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px){
  .blog-hero{ padding: 24px; border-radius: 28px; }
  .blog-hero h1{ font-size: clamp(34px, 10vw, 52px); max-width: 100%; }
  .blog-toolbar-hero{ padding: 12px; }
  .blog-core-wrap{ min-height: 320px; }
  .blog-orbit.orbit-c{ width: 310px; height: 310px; }
  .blog-orbit.orbit-b{ width: 250px; height: 250px; }
  .blog-orbit.orbit-a{ width: 186px; height: 186px; }
  .blog-quick-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .blog-progress{ height: 2px; }
  .blog-hero{ padding: 20px 18px; margin-top: 14px; }
  .blog-kicker-row{ gap: 8px; }
  .blog-toolbar{ align-items: stretch; }
  .blog-search{ width:100%; }
  .blog-search input{ width:100%; }
  .blog-chip{ width:100%; justify-content:center; }
  .blog-stats{ grid-template-columns: 1fr; }
  .blog-section-head h2{ font-size: 28px; }
  .blog-orbit-node{ min-width: 76px; padding: 8px 10px; font-size: 11px; }
  .node-apex{ right: 8px; }
  .node-ace{ left: 8px; bottom: 70px; }
  .node-sigs{ left: 10px; top: 70px; }
  .blog-core{ width: 136px; height: 136px; }
  .blog-core b{ font-size: 34px; }
  .blog-divider svg{ height: 60px; }
}

/* Author box */
.blog-author-box{
  display:grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin: 8px 18px 22px;
  padding: 18px;
  border-radius: 18px;
  border:1px solid rgba(0,0,0,0.08);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(18,77,38,0.12), transparent 60%),
    radial-gradient(500px 180px at 100% 100%, rgba(231,27,34,0.12), transparent 60%),
    rgba(255,255,255,0.66);
}
html[data-theme="dark"] .blog-author-box{
  border-color: rgba(255,255,255,0.10);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(18,77,38,0.18), transparent 60%),
    radial-gradient(500px 180px at 100% 100%, rgba(231,27,34,0.18), transparent 60%),
    rgba(255,255,255,0.03);
}
.blog-author-avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:30px;
  color:#fff;
  background: linear-gradient(135deg, #124d26, #e71b22);
  box-shadow: 0 14px 38px rgba(0,0,0,0.16);
}
.blog-author-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-author-eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color: var(--muted); font-weight:900; }
.blog-author-copy h3{ margin:4px 0 8px; font-size: 22px; }
.blog-author-copy p{ margin:0; color: var(--muted); line-height:1.7; }
@media (max-width: 640px){
  .blog-author-box{ grid-template-columns: 1fr; text-align:center; }
  .blog-author-avatar{ margin: 0 auto; }
}