/* One story (stories/<slug>.html): the problem, the discovery, the solution, the outcome */

.sp { padding: var(--space-16) 0 0; }
.sp__head { display: grid; gap: var(--space-4); justify-items: start; }
.sp__back { margin-bottom: var(--space-4); font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.sp__back:hover { color: var(--ink); }
.sp__back .mb-arrow { display: inline-block; transition: transform .2s ease; }
.sp__back:hover .mb-arrow { transform: translateX(-3px); }
.sp__who { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carmine); }
.sp__head .display-l { margin: 0; max-width: 20ch; }
.sp__head .lead { max-width: 54ch; }
.sp__photo { margin-top: var(--space-12); aspect-ratio: 21 / 9; }

/* The facts under the photo */
.sp__facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.sp__facts dl { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.sp__facts dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp__facts dd { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.sp__tools { display: flex; gap: 6px; }
.sp__tools a { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.sp__tools a:hover { border-color: var(--ink); color: var(--ink); }
.sp__facts .st-draft { margin: 0; }

/* Chapters, with a rail that follows the reader */
.sp__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-8); border-top: 1px solid var(--line); }
.sp__rail { position: sticky; top: 104px; align-self: start; display: grid; gap: 2px; padding-top: var(--space-16); }
.sp__rail a { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.sp__rail small { font: 500 11px/1 var(--font-mono); color: var(--line-strong); transition: color .2s ease; }
.sp__rail a:hover, .sp__rail a.is-on { color: var(--ink); }
.sp__rail a.is-on small { color: var(--carmine); }
.sp__body { max-width: 720px; }
.sp-ch { display: grid; gap: var(--space-6); padding: var(--space-16) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.sp-ch:last-child { border-bottom: 0; }
.sp-ch__n { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-ch .display-m { margin: calc(-1 * var(--space-2)) 0 0; }
.sp-ch > p { font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sp-ch .st__now { margin-top: var(--space-2); }

/* The discovery: where the time went, before */
.sp-map { margin: var(--space-2) 0 0; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.sp-map figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sp-map figcaption span { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-map figcaption b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-map ol { margin: 0; padding: 0; list-style: none; }
.sp-map li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 72px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.sp-map li:last-child { border-bottom: 0; }
.sp-map li i { height: 8px; border-radius: 4px; background: var(--line-strong); width: calc(var(--w) * 100%); transform-origin: left; }
.sp-map li b { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-map li.is-hot span, .sp-map li.is-hot b { color: var(--ink); font-weight: 600; }
.sp-map li.is-hot i { background: var(--carmine); }
.sp-map__key { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.sp-map__key i { width: 14px; height: 8px; border-radius: 4px; background: var(--carmine); }
.sp-map.is-in li i { animation: sp-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.sp-map.is-in li:nth-child(2) i { animation-delay: .08s; } .sp-map.is-in li:nth-child(3) i { animation-delay: .16s; }
.sp-map.is-in li:nth-child(4) i { animation-delay: .24s; } .sp-map.is-in li:nth-child(5) i { animation-delay: .32s; } .sp-map.is-in li:nth-child(6) i { animation-delay: .4s; }
@keyframes sp-grow { from { transform: scaleX(0); } to { transform: none; } }

/* The solution: the changes, in order */
.sp-sol { margin: 0; padding: 0; list-style: none; counter-reset: sp; border-top: 1px solid var(--line); }
.sp-sol li { counter-increment: sp; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.5; color: var(--ink); }
.sp-sol li::before { content: counter(sp, decimal-leading-zero); font: 500 11px/1 var(--font-mono); color: var(--carmine); }
.sp-sol a { height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sp-sol a:hover { border-color: var(--ink); color: var(--ink); }

/* Next story */
.sp-next { border-top: 1px solid var(--line); padding-top: var(--space-16); }
.sp-next__card { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: center; text-decoration: none; color: var(--ink); }
.sp-next__card .mb-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.sp-next__card img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sp-next__card:hover img { transform: scale(1.03); }
.sp-next__card > span { display: grid; gap: 10px; justify-items: start; }
.sp-next__card small { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-next__card b { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.sp-next__card em { font-style: normal; font-weight: 500; font-size: 15px; }
.sp-next__card .mb-arrow { display: inline-block; transition: transform .2s ease; }
.sp-next__card:hover .mb-arrow { transform: translateX(3px); }

@media (max-width: 960px) {
  .sp { padding-top: var(--space-8); }
  .sp__photo { margin-top: var(--space-8); aspect-ratio: 4 / 3; }
  .sp__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp__rail { display: none; }
  .sp-ch { padding: var(--space-12) 0; }
  .sp-next__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 560px) {
  .sp-map { padding: 18px; }
  .sp-map li { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 8px; }
  .sp-map li i { grid-column: 1 / -1; grid-row: 2; }
  .sp-sol li { grid-template-columns: 26px minmax(0, 1fr); }
  .sp-sol a { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sp-map.is-in li i { animation: none; } }