/* /soul-searching: an essay page. Uses the main tokens from app.css. */
.soul .kicker { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--meta); margin: 28px 0 0; }
.soul h1 { font-size: 36px; margin-top: 4px; }
.soul .lede { font-size: 19px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.soul h2 { margin-top: 36px; }
.soul h3 { font-size: 15px; margin: 0 0 4px; letter-spacing: -0.01em; }
.soul-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.soul-step > b { font: 700 12px/22px var(--mono); color: var(--gold-ink); }
.soul-step p { margin: 0 0 8px; }
.soul-step p:last-child { margin-bottom: 0; }

/* the map diagram */
.soul-map { width: 100%; height: auto; margin: 12px 0 4px; display: block; }
.soul-map .hood ellipse { fill: var(--tint); stroke: var(--line); }
.soul-map .hood.soul ellipse { fill: var(--gold-soft); stroke: transparent; }
.soul-map .hood-t { font: 600 11px var(--sans); fill: var(--meta); letter-spacing: .02em; }
.soul-map .film { fill: var(--ink-2); }
.soul-map .lbl { font: 12px var(--sans); fill: var(--ink-2); }
.soul-map .you { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.soul-map .you-t { fill: var(--ink); font-weight: 600; }
.soul-map .move { fill: none; stroke: var(--gold-edge); stroke-width: 2; stroke-dasharray: 5 5; animation: soulMove 1.6s linear infinite; }
@keyframes soulMove { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .soul-map .move { animation: none; } }
@media (max-width: 640px) {
  .soul h1 { font-size: 28px; }
  .soul .lede { font-size: 17px; }
  .soul-step { grid-template-columns: 22px 1fr; gap: 10px; }
}