/* Project stories: the one-line before/now header with its progress meter, and the steps with their figures.
   Loaded only on project pages with a story; tokens.css and site.css come first. */

/* The header sticks under the site navigation (64px) while the reader is in the steps. */
.story__bar { position: sticky; top: 64px; z-index: 2; display: flex; align-items: center; gap: var(--s-3); min-height: var(--ctl-h-touch); padding-block: var(--s-2); background: var(--c-bg); border-bottom: 1px solid var(--c-border); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg-2); }
.story__end { flex: 0 1 auto; }
.story__end:last-child { text-align: right; color: var(--c-fg); font-weight: var(--fw-semibold); }
.story__tag { color: var(--c-muted); font-weight: var(--fw-semibold); }
/* Without the island the meter is full: the whole story is on the page. The island sets --p inline. */
.story__meter { --p: 1; flex: 1 1 3rem; min-width: 3rem; height: 4px; border-radius: var(--r-control); background: var(--c-border); overflow: hidden; }
.story__meter > span { display: block; height: 100%; background: var(--c-chart); transform-origin: left; transform: scaleX(var(--p)); }

.story__steps { list-style: none; margin: var(--s-2) 0 0; padding: 0; counter-reset: step; }
.story__step { counter-increment: step; display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-4); border-radius: var(--r-surface); transition: background-color var(--d-base) var(--d-ease); }
.story__step + .story__step { margin-top: var(--s-1); }
.story__step--current { background: var(--c-selected); }
.story__step h3 { font-size: var(--t-lg); line-height: var(--lh-lg); }
/* The list already numbers the steps for assistive technology, so the visible number has empty alt text.
   Secondary ink, not muted: muted falls under 4.5:1 on the selected wash. */
.story__step h3::before { content: counter(step) ". " / ""; color: var(--c-fg-2); }
.story__step p { margin-top: var(--s-1); color: var(--c-fg-2); max-width: var(--w-prose); }
/* Anchors the figure's visually hidden copy inside the step. */
.story__figure { position: relative; display: grid; align-content: start; font-size: var(--t-sm); line-height: var(--lh-sm); }
.story__step .story__figure { margin-top: 0; }
.story__figure strong { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); color: var(--c-fg); font-variant-numeric: tabular-nums; }

.story__links { margin-top: var(--s-4); }

/* On a phone the meter runs along the header's bottom edge, the full width of the column. */
@media (max-width: 767.98px) {
  .story__bar { justify-content: space-between; }
  .story__meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; min-width: 0; border-radius: var(--r-none); }
}

/* From 768px the figure takes a fixed column, so its count-up never reflows the step text. */
@media (min-width: 768px) {
  .story__step:has(.story__figure) { grid-template-columns: minmax(0, 1fr) 11rem; column-gap: var(--s-6); }
}