/* ===========================================================================
   Series card (home grid) and series page
   --------------------------------------------------------------------------
   The series card uses a regular card's footprint (base.css grid: 3-col default,
   2-col @900px, 1-col @600px) — no span, no stack overlay. A purple "series" badge
   and a Latest link to the newest member are what set it apart.
   =========================================================================== */

/* Series cards share a regular card's footprint: one grid column, no stack
   pseudo-elements / overlay. The purple "series" badge + Latest link carry the cue. */
/* Always a column (even under v2's horizontal `.card { flex-direction: row }`) so the
   cover/body sit on top and the Latest link drops to the bottom of the card. */
.card--series { position: relative; flex-direction: column; }

/* "Latest" sub-link sits at the bottom of the card (margin-top:auto pins it there
   when the card stretches to a taller neighbour), sibling not nested. */
.series-card-latest {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--pal-border);
  font-size: 12.5px;
  color: var(--pal-fg-faint);
  text-decoration: none;
}
.series-card-latest:hover { background: rgba(0,0,0,0.03); }
.series-card-latest-label {
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pal-fg);
}
.series-card-latest-title { flex: 1; color: var(--pal-fg-muted); }
.series-card-latest-date  { font-family: ui-monospace, Menlo, monospace; }

/* Series badge — reuse depth-badge sizing; pick a purple hue. */
.depth-badge.depth-series {
  background: hsl(280 60% 92%);
  color: hsl(280 60% 30%);
  border: 1px solid hsl(280 60% 80%);
}

/* s6 (terminal listing) series row */
.s6-cell.series-cell a { color: inherit; }
.s6-cell.series-cell .series-arrow { opacity: 0.6; margin-right: 4px; }

/* ===========================================================================
   Series page (/series/<slug>/)
   =========================================================================== */

.series-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

.series-cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pal-border);
  background: var(--pal-surface);
  margin-bottom: 28px;
  padding: 28px;
}
.series-cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.18; z-index: 0;
}
.series-cover-text { position: relative; z-index: 1; }
.series-cover .research-kicker { gap: 12px; display: flex; align-items: center; font-size: 12.5px; }
.series-cover h1 { margin: 8px 0 6px; font-family: Fraunces, serif; font-weight: 600; }
.series-cover p  { margin: 0; color: var(--pal-fg-faint); max-width: 70ch; }

.series-group { margin: 28px 0; }
.series-group-label {
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pal-fg-faint); margin: 0 0 12px;
}

.series-empty { color: var(--pal-fg-faint); padding: 24px 0; }

.series-back { display: inline-block; margin: 24px 0; color: var(--pal-fg-faint); text-decoration: none; }
.series-back:hover { color: var(--pal-fg); }

/* ── Series mode inside a skeleton's chrome ───────────────────────────────
   The hero skeletons (s1/s4/s5) render the series kicker + back-link inside
   their own header; topbar skeletons (s2/s3) render .series-cover in content.
   These rules add breathing room without overriding skeleton typography. */
.s5-fold .research-kicker,
.s1-hero .research-kicker,
.s4-hero .research-kicker {
  display: flex; gap: 12px; align-items: center;
  font-size: 12.5px; margin: 6px 0 10px;
}
.s1-hero .research-kicker { justify-content: center; }

/* Topbar skeletons: the .series-cover strip sits at the top of content. */
.s2-content > .series-cover,
.s3-content > .series-cover { margin-bottom: 8px; }

/* s3: with the sidebar suppressed, let content use the full width. */
.s3-main--series { display: block; }