/* ═══════════════════════════════════════════════════════════
   A series hub — /<series>/
   Extends base.css; restates no palette value.
   Its one job: say what this series is, and send the reader to book one.

   Built to be reused. A new series is a copy of this page with different
   words and a different band image; the shell does not change.
   ═══════════════════════════════════════════════════════════ */

.band {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  height: clamp(13rem, 38vh, 24rem);
  overflow: clip;
  background: var(--slate);
}

.band img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Just a seam into the page — nothing is written over the photograph. */
.band::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--slate));
}

.series-head {
  padding-block: var(--space-lg) var(--space-xl);
}

.series-head h1 {
  margin-top: var(--space-sm);
  max-width: 16ch;
}

.series-head__line {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 40ch;
  color: var(--text-lead);
}

/* A book on the shelf that you can actually open */
.shelf li a {
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration-color: var(--rule-strong);
}

.shelf__note {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 56ch;
}