/* Both About layouts pause the live map at the reading center. The outline
   follows native scroll progress and never captures map controls or gestures. */
html.work-grid .portfolio-viewer-about .about-story-places-step.is-about-map-pinned {
  position: relative;
  box-sizing: border-box;
  display: block;
  min-height: 0;
  height: var(--about-map-hold-height);
  padding: 24px 0 32px;
}

html.work-grid .portfolio-viewer-about:is(.about-desktop-story, .about-mobile-story) .is-about-map-pinned > .portfolio-about-places {
  position: sticky;
  top: var(--about-map-sticky-top);
}

.about-map-reading-outline {
  position: absolute;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}

/* Keep the entire outside stroke visible in the desktop scroller without
   moving the map, changing its size or shifting any text alignment. */
@media (min-width: 768px) {
  html.work-grid .portfolio-viewer-about.about-desktop-story .about-story-map-reader {
    margin-left: -8px;
    padding-left: 8px;
  }
}

.is-about-map-pinned .about-map-reading-outline:not([data-reading-state="idle"]) { visibility: visible; }
.about-map-reading-outline path { fill: none; stroke-width: 5; }
.about-map-reading-fill {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 * (1 - var(--about-map-reading-progress, 0)));
}
/* A zero-length dash can still paint a fleck in SVG. Hide the whole layer
   before reading starts, and remove dashing at completion to close the seam. */
.about-map-reading-outline[data-reading-state="complete"] .about-map-reading-fill {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .is-about-map-pinned .about-map-reading-outline:not([data-reading-state="idle"]) { visibility: hidden; }
}