/* ==================================================================
   Blog and article cleanup.

   Removes the patterns commonly read as template or AI-generated design:
   the uppercase eyebrow above the title, pill badges, read-time meta,
   colored accent bars on headings and cards, the decorative drop cap,
   the italic accent word in the index headline, pill filter buttons and
   hover lift. Loaded after every article and blog stylesheet, so it wins
   on order at equal specificity; the #pz-blog prefix outranks the
   per-post animation themes.
   ================================================================== */

/* ---------- article header ---------- */
#pz-root .pz-bp-h1 {
  margin: 0 0 14px;
}
#pz-root .pz-bp-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-family: var(--font-ui), "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
#pz-root .pz-bp-byline span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .95em;
  margin: 0 12px;
  vertical-align: -2px;
  background: currentColor;
  opacity: .4;
}

/* ---------- article body ---------- */
#pz-root #pz-blog .pz-bp-art h2 {
  border-left: 0;
  padding-left: 0;
  padding-bottom: 0;
}
#pz-root #pz-blog .pz-bp-art h2::after {
  content: none;
  display: none;
}
#pz-root #pz-blog .pz-bp-art > p:first-of-type::first-letter {
  float: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
#pz-root #pz-blog .pz-bp-art blockquote,
#pz-root #pz-blog .pz-bp-art .wp-block-quote {
  border-left: 0;
  padding: 0 0 0 24px;
}
#pz-root #pz-blog .pz-bp-art blockquote p {
  font-style: italic;
}
#pz-root #pz-blog .pz-bp-art blockquote cite,
#pz-root #pz-blog .pz-bp-art .wp-block-quote cite {
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

/* ---------- blog index: headline ---------- */
#pz-root .pz-bl-h1 em {
  font-style: normal;
  color: inherit;
}

/* ---------- blog index: filters as plain tabs ---------- */
#pz-root .pz-bl-filters {
  gap: 4px 22px;
  padding-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
#pz-root .pz-bl-fbtn {
  font: 500 14.5px/1.4 var(--font-ui), "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: 0;
  padding: 8px 0 10px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  transform: none;
  transition: color .15s ease, border-color .15s ease;
}
#pz-root .pz-bl-fbtn:hover {
  color: var(--ink);
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
  transform: none;
}
#pz-root .pz-bl-fbtn.on {
  background: none;
  color: var(--ink);
  border-color: transparent;
  border-bottom-color: var(--ink);
}
#pz-root .pz-bl-fbtn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- blog index: category as plain text, below the excerpt ---------- */
#pz-root .pz-bl-chip,
#pz-root .pz-bl-feat .pz-bl-chip {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-ui), "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
#pz-root .pz-bl-feat .pz-bl-chip {
  color: #c9c6b3;
}
#pz-root .pz-bl-card h3,
#pz-root .pz-bl-feat h2 { order: 1; }
#pz-root .pz-bl-card p,
#pz-root .pz-bl-feat p { order: 2; }
#pz-root .pz-bl-card .pz-bl-chip {
  order: 3;
  margin-top: auto;
  padding-top: 6px;
}
#pz-root .pz-bl-feat .pz-bl-chip { order: 3; }
#pz-root .pz-bl-feat .pz-bp-cta { order: 4; }

/* read time and the redundant "Read the article" line inside linked cards */
#pz-root .pz-bl-card .pz-bl-meta,
#pz-root .pz-bl-feat .pz-bl-meta,
#pz-root .pz-bl-card .pz-bl-read {
  display: none;
}

/* ---------- blog index: cards ---------- */
#pz-root .pz-bl-card {
  border-radius: 6px;
}
#pz-root .pz-bl-card::before {
  content: none;
  display: none;
}
#pz-root .pz-bl-card:hover,
#pz-root .pz-bl-grid.armed .pz-bl-card.in:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--ink) 38%, transparent);
}
#pz-root .pz-bl-card:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#pz-root .pz-bl-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
#pz-root .pz-bl-feat {
  border-radius: 6px;
}

/* ---------- blog index: teaser cards that are not links yet ----------
   They are <div>s, not <a>s. Keep their "arriving soon" note visible and
   drop every hover cue, so they never pass for a dead article link. */
#pz-root .pz-bl-card.is-soon .pz-bl-read {
  display: block;
  order: 4;
  margin: 0;
  font-family: var(--font-ui), "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
#pz-root .pz-bl-card.is-soon .pz-bl-chip {
  margin-top: auto;
}
#pz-root .pz-bl-card.is-soon {
  cursor: default;
  background: transparent;
  border-style: dashed;
}
#pz-root .pz-bl-card.is-soon:hover,
#pz-root .pz-bl-grid.armed .pz-bl-card.is-soon.in:hover {
  border-color: #e3d3b6;
  transform: none;
}
#pz-root .pz-bl-card.is-soon:hover h3 {
  text-decoration: none;
}
