.series-page {
  --family-core: var(--accent);
  --family-self: #3b7657;
  --family-mind: #7a5893;
  --family-capital: #a5603d;
}
[data-theme="dark"] .series-page { --family-self: #8fc6a6; --family-mind: #c2a6d8; --family-capital: #dca07c; }
.family-core { --family: var(--family-core); }
.family-self { --family: var(--family-self); }
.family-mind { --family: var(--family-mind); }
.family-capital { --family: var(--family-capital); }

.series-shell { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.series-page article { padding: 88px 0 140px; }
.series-header { max-width: 720px; margin-bottom: 0; }
.series-page .lede { margin: 26px 0 0; font-size: 21px; line-height: 1.5; }

.series-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 24px 0 0; padding: 0; color: var(--ink-faint); font: 12px/1.4 Avenir, "Avenir Next", var(--ui-font); list-style: none; }
.series-legend li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.legend-swatch { width: 18px; height: 3px; border-radius: 2px; background: var(--family); }

.series-map {
  --graph-width: 104px;
  --lane-inset: 26px;
  --lane-width: 24px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) var(--graph-width) minmax(0, 1fr);
  align-items: start;
  margin-top: 72px;
}
.map-row { display: contents; }
.map-row > .map-node--core { grid-column: 1; }
.map-branches { grid-column: 3; grid-row: span 2; padding-top: 58px; }
.map-bridge { grid-column: 1; margin: 0 0 34px; color: var(--ink-faint); font-size: 19px; font-style: italic; line-height: 1.45; }
.map-bridge__question { margin: 0; }

.series-map__graph { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.graph-line { fill: none; stroke: var(--family); stroke-width: 2; stroke-linecap: round; transition: opacity 0.2s ease; }
.graph-trunk .family-core { stroke-width: 3; }
.graph-halo { fill: none; stroke: var(--paper); stroke-width: 8; }
.graph-dot { fill: var(--paper); stroke: var(--family); stroke-width: 2; transition: opacity 0.2s ease; }
.graph-dot--published { fill: var(--family); }
.graph-ring { fill: none; stroke: var(--family); stroke-width: 1.2; opacity: 0.35; }

.map-node { transition: opacity 0.2s ease; }
.map-node--core { margin-bottom: 40px; }
.map-branches .map-node { margin-bottom: 30px; }
.map-node__kicker { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 3px; color: var(--family); font: 600 12.5px/1.5 Avenir, "Avenir Next", var(--ui-font); letter-spacing: 0.01em; }
.map-status { color: var(--ink-faint); font-weight: 400; }
.map-status::before { margin-right: 10px; content: "\00B7"; }
.map-node__title { margin: 0; padding: 0; font-size: 21px; font-weight: normal; line-height: 1.2; }
.map-node--core .map-node__title { font-size: 34px; }
.map-node__title a { color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--family) 45%, transparent); }
.map-node__title a:hover { color: var(--family); border-bottom-color: var(--family); }
.map-node__lede { margin: 6px 0 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.5; }
.map-node--core .map-node__lede { margin-top: 10px; color: var(--ink); font-size: 19.5px; line-height: 1.55; }
.map-node__read { margin: 10px 0 0; color: var(--ink-faint); font: 13px/1.5 Avenir, "Avenir Next", var(--ui-font); }
.map-node__read a { color: var(--family); font-weight: 600; }
.series-map a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.graph-curves .graph-line:not(.is-lit),
.graph-lanes .graph-line:not(.is-lit),
.graph-dot--branch:not(.is-lit) { opacity: 0.38; }

@media (hover: hover) {
  .map-branches .map-node:not(.is-lit) { opacity: 0.38; }
}
/* Touch has no hover: tapping a branch lights it. */
@media (hover: none) {
  .map-branches .map-node:not(.is-lit) { opacity: 0.5; }
}

@media (max-width: 900px) {
  .series-shell { padding: 0 18px; }
  .series-page article { padding-top: 60px; }
  .series-page .lede { font-size: 19px; }
  .series-map { --trunk-x: 9px; --lane-width: 20px; display: block; margin-top: 48px; }
  .map-node--core { margin: 0 0 20px 38px; }
  .map-node--core .map-node__title { font-size: 28px; }
  .map-branches { margin: 0; padding: 0; }
  .map-branches .map-node { margin: 0 0 22px 52px; }
  .map-bridge { margin: 0 0 32px 38px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-node, .graph-line, .graph-dot { transition: none; }
}