/* Blog / portfolio / plugin singles */
.article-hero{padding-bottom:1.25rem}
.article-hero h1{
  max-width:min(40rem,100%);
  font-size:clamp(1.75rem,4.2vw,2.75rem);
  line-height:1.15;
}
.article-meta{display:flex;flex-wrap:wrap;gap:.75rem;color:var(--muted);font-size:.9rem;margin-bottom:0}

.prose{max-width:68ch}
.prose h2{font-size:1.35rem;letter-spacing:-.03em;margin:1.75rem 0 .75rem}
.prose h3{font-size:1.15rem;letter-spacing:-.02em;margin:1.4rem 0 .55rem}
.prose p{margin-bottom:1rem;color:var(--muted)}
.prose ul,.prose ol{margin:0 0 1rem 1.2rem;color:var(--muted)}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--color-primary-dark);text-decoration:underline;text-underline-offset:2px}
.prose img{border-radius:12px;margin:1rem 0}
.prose .wp-block-image{margin:1.25rem 0}
.prose figure{margin:1.25rem 0}
.prose figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.prose pre,.prose code{font-family:var(--mono);font-size:.88em}
.prose pre{
  background:var(--color-white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1rem 1.15rem;
  overflow-x:auto;
  margin:1.25rem 0;
  color:var(--color-text);
  line-height:1.5;
}
.prose :not(pre)>code{
  background:color-mix(in srgb,var(--color-secondary) 28%,var(--color-white));
  border-radius:6px;
  padding:.12em .4em;
}

/* Tables — markdown / Gutenberg (e.g. PageSpeed comparison posts) */
.prose .wp-block-table,
.prose .table-scroll{
  margin:1.5rem 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--color-white);
  max-width:100%;
}
.prose table{
  width:100%;
  min-width:32rem;
  border-collapse:separate;
  border-spacing:0;
  font-size:.92rem;
  line-height:1.45;
  background:var(--color-white);
}
.prose .wp-block-table table,
.prose .table-scroll table{
  margin:0;
  border:0;
  border-radius:0;
  min-width:32rem;
}
.prose > table{
  margin:1.5rem 0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  max-width:100%;
}
.prose thead th{
  background:color-mix(in srgb,var(--color-secondary) 55%,var(--color-white));
  color:var(--color-text);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-align:left;
  white-space:nowrap;
}
.prose th,
.prose td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.prose thead th:first-child{border-top-left-radius:13px}
.prose thead th:last-child{border-top-right-radius:13px}
.prose tbody th{
  font-weight:700;
  color:var(--color-text);
  background:color-mix(in srgb,var(--color-background) 65%,var(--color-white));
  white-space:nowrap;
}
.prose tbody td{color:var(--muted)}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--color-background) 55%,transparent);
}
.prose tbody tr:hover td,
.prose tbody tr:hover th{
  background:color-mix(in srgb,var(--color-secondary-light) 42%,var(--color-white));
}
.prose .wp-block-table figcaption{
  padding:.65rem 1rem .85rem;
  margin:0;
  border-top:1px solid var(--line);
  background:var(--color-background);
  border-radius:0 0 13px 13px;
}
@media(max-width:640px){
  .prose table{font-size:.86rem}
  .prose th,.prose td{padding:.65rem .8rem}
}

.article-layout{padding-bottom:3rem}
.article-layout .prose{max-width:none;min-width:0}
.article-cover{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:1.5rem;
  aspect-ratio:16/9;
  background:var(--color-secondary-light);
}
.article-cover img{width:100%;height:100%;object-fit:cover}

.related{display:grid;gap:.75rem}
.related a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-weight:600;line-height:1.35}
.related a:hover{color:var(--color-primary)}
.related-posts .related-card h3{font-weight:700}