/* Chakra Serenity — article system corrections, byline and author archive.

   Two jobs here.

   1. Long-form articles ship their own inline <style> block using the `csx-`
      namespace. That block sits in <body>, so at equal specificity it beats
      the theme sheets in <head>. A handful of theme rules still win because
      they are one point more specific (`.cs-prose p` beats `.csx-sub`), and
      the result is dark text on a dark hero and white text on a light table
      header. The overrides below are scoped with `.cs-prose` so they outrank
      the inline block cleanly.

   2. The byline and author archive — the parts that carry authorship. */

/* ---------------------------------------------- article system corrections */

/* Hero subtitle: `.cs-prose p` was repainting it ink-soft on a dark panel. */
.cs-prose .csx-sub { color: #fff; opacity: .9; }

/* Table headers: `.cs-prose th` set a light background while the inline block
   set white text. Restate both together so they cannot drift apart again. */
.cs-prose .csx-tbl th {
  background: var(--cs-night);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .16);
}

/* The theme injects its own table of contents before the first H2. An article
   that also ships one shows the same list twice. */
.cs-prose .csx-toc { display: none; }

/* The byline carries the review date now, so the in-content line is a repeat. */
.cs-prose .csx-updated { display: none; }

.cs-prose .csx-products-sub { color: var(--cs-ink-muted); }

/* ------------------------------------------------------------- the byline */

.cs-byline {
  display: flex;
  align-items: center;
  gap: var(--cs-s3);
  margin-top: var(--cs-s4);
}

.cs-byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 44px;
  background: var(--cs-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--cs-font-display);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}
.cs-byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-byline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-byline-name {
  font-size: var(--cs-fs-small);
  font-weight: 600;
  color: var(--cs-ink);
}
.cs-byline-name a { color: inherit; text-decoration: none; }
.cs-byline-name a:hover { text-decoration: underline; }

.cs-byline-dates {
  font-size: var(--cs-fs-kicker);
  letter-spacing: var(--cs-ls-kicker);
  color: var(--cs-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-s2);
  align-items: center;
}
.cs-byline-dates .sep { opacity: .5; }
.cs-byline-updated { color: var(--cs-ink-soft); font-weight: 600; }

/* ------------------------------------------------------- author archive */

.cs-author-hero {
  display: flex;
  gap: var(--cs-s5);
  align-items: flex-start;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-s6);
  margin-bottom: var(--cs-s7);
  flex-wrap: wrap;
}

.cs-author-face {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 104px;
  background: var(--cs-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--cs-font-display);
  font-size: 2.4rem;
  line-height: 1;
}
.cs-author-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-author-detail { flex: 1; min-width: 16rem; }
.cs-author-detail h1 { margin: 0 0 var(--cs-s2); }
.cs-author-role {
  font-size: var(--cs-fs-kicker);
  letter-spacing: var(--cs-ls-kicker);
  text-transform: uppercase;
  color: var(--cs-accent-mid);
  font-weight: 700;
  display: block;
  margin-bottom: var(--cs-s3);
}
.cs-author-bio { color: var(--cs-ink-soft); margin: 0 0 var(--cs-s4); }
.cs-author-stats {
  display: flex;
  gap: var(--cs-s5);
  flex-wrap: wrap;
  font-size: var(--cs-fs-kicker);
  letter-spacing: var(--cs-ls-kicker);
  text-transform: uppercase;
  color: var(--cs-ink-muted);
}
.cs-author-stats b { color: var(--cs-ink); font-size: var(--cs-fs-small); }
.cs-author-links { margin-top: var(--cs-s4); display: flex; gap: var(--cs-s4); flex-wrap: wrap; }

@media (max-width: 34rem) {
  .cs-author-hero { padding: var(--cs-s5); gap: var(--cs-s4); }
  .cs-author-face { width: 72px; height: 72px; flex: 0 0 72px; font-size: 1.7rem; }
}
