/* The three walking states share rows, so their text and divider never jump. */
@media(prefers-reduced-motion:no-preference){
 body[data-project=glancemap] .walk-narration{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto auto minmax(16px,1fr) auto;
  padding-top:33px;
  padding-bottom:6px;
 }
 body[data-project=glancemap] .walk-scene{
  position:static;
  inset:auto;
  grid-column:1;
  grid-row:1/6;
  display:grid;
  grid-template-rows:subgrid;
  align-content:start;
  justify-content:normal;
  padding:0;
  margin:0;
  transform:none;
  transition:opacity .3s;
 }
 body[data-project=glancemap] .walk-scene>*{min-width:0;align-self:start}
 body[data-project=glancemap] .walk-navigation{
  position:static;
  grid-column:1;
  grid-row:8;
  align-self:end;
  min-height:37px;
 }
 body[data-project=glancemap] .walk-scene aside{margin-bottom:0}
 body[data-project=glancemap] .walk-traveller .walk-listening{transition:opacity .12s linear}
 body[data-project=glancemap] .podcast-wave i{animation-name:glance-walk-wave-pulse;opacity:1}
 @media(max-width:800px){body[data-project=glancemap] .walk-narration{padding-top:17px}}
 @media(max-width:540px){
  body[data-project=glancemap] .walk-sticky{grid-template-rows:auto 26% minmax(0,1fr)}
  body[data-project=glancemap] .walk-narration{padding-top:0;padding-bottom:0;grid-template-rows:auto auto auto auto auto auto minmax(10px,1fr) auto}
  body[data-project=glancemap] .walk-navigation{min-height:29px}
 }
 /* The existing landscape fallback remains a readable three-part article. */
 @media(min-width:701px) and (max-height:650px){
  body[data-project=glancemap] .walk-narration{display:block;padding:0}
  body[data-project=glancemap] .walk-scene{display:flex;margin-bottom:45px;padding-top:16px}
  body[data-project=glancemap] .walk-navigation{display:none}
 }
}
@keyframes glance-walk-wave-pulse{to{transform:scaleY(.3)}}

/* An always-readable cue makes the pinned walk's scroll interaction explicit. */
body[data-project=glancemap] .walk-navigation{align-items:center;gap:10px}
body[data-project=glancemap] .walk-scroll-cue{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--accent);pointer-events:none;white-space:nowrap}
body[data-project=glancemap] .walk-scroll-cue>span:first-child{display:inline;font:600 16px/1.3 var(--font-body);color:var(--accent)}
body[data-project=glancemap] .walk-scroll-particles{display:block;position:relative;width:35px;height:44px;flex:0 0 35px}
.walk-scroll-particles i{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;translate:var(--particle-x) var(--particle-y);opacity:.45;animation:walk-cue-fall 1.65s ease-in-out var(--particle-delay) infinite;animation-play-state:paused}
.walk-is-visible .walk-scroll-particles i{animation-play-state:running}
@keyframes walk-cue-fall{0%,100%{transform:translateY(-3px);opacity:.28}45%{opacity:1}70%{transform:translateY(5px);opacity:.8}}
@media(max-width:700px){body[data-project=glancemap] .walk-navigation{gap:7px}body[data-project=glancemap] .walk-scroll-cue{gap:5px}body[data-project=glancemap] .walk-scroll-cue>span:first-child{font-size:14px}.walk-scroll-particles i{width:3px;height:3px}}
@media(prefers-reduced-motion:reduce){.walk-scroll-particles i{animation:none}}

/* The cue follows the reading note, while the 01–03 controls keep their place. */
body[data-project=glancemap] .walk-narration>.walk-scroll-cue{grid-column:1;grid-row:6;justify-self:start;align-self:start;margin:8px 0 0;gap:10px}
body[data-project=glancemap] .walk-narration>.walk-scroll-cue .walk-scroll-particles{height:36px}
@media(max-width:540px){body[data-project=glancemap] .walk-narration>.walk-scroll-cue{margin-top:5px}}
@media(prefers-reduced-motion:reduce){body[data-project=glancemap] .walk-narration>.walk-scroll-cue{display:none}}
@media(min-width:701px) and (max-height:650px){body[data-project=glancemap] .walk-narration>.walk-scroll-cue{display:none}}
body[data-project=glancemap] .walk-scene p{text-wrap:pretty}
/* Leave room for the shared type scale and the fixed 01–03 controls on phones. */
@media(max-width:540px) and (prefers-reduced-motion:no-preference){
 body[data-project=glancemap] .walk-sticky{grid-template-rows:auto 24% minmax(0,1fr)}
 body[data-project=glancemap] .walk-scene aside h4{margin-top:0}
}

/* Give the pinned story a little breathing room below the page navigation,
   including when readers first arrive at the chapter. */
@media(min-width:801px) and (min-height:651px) and (prefers-reduced-motion:no-preference){
 body[data-project=glancemap] #problem{padding-top:24px}
 body[data-project=glancemap] .walk-sticky{height:calc(100svh - 128px);max-height:800px}
 body[data-project=glancemap] .walk-narration{padding-top:18px}
 body[data-project=glancemap] .walk-scene blockquote{margin-block:12px 18px}
 body[data-project=glancemap] .walk-scene aside{margin-top:20px}
}

/* Reduced motion is an ordinary two-column article, never a float that lets
   later text slip beneath the route drawing. */
@media(prefers-reduced-motion:reduce),(min-width:701px) and (max-height:650px){
 body[data-project=glancemap] .walk-sticky{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;gap:22px 5%;align-items:start;height:auto;max-height:none}
 body[data-project=glancemap] .walk-viewport{float:none;width:100%;height:400px;max-width:480px;margin:0;padding-top:20px;grid-column:1;grid-row:2}
 body[data-project=glancemap] .walk-narration{grid-column:2;grid-row:2;display:block;width:100%;height:auto;max-height:none;padding:0}
 body[data-project=glancemap] .walk-scene{position:static;display:block;width:100%;margin:0 0 40px;padding:0;opacity:1;transform:none}
 body[data-project=glancemap] .walk-scene p{max-width:none}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 body[data-project=glancemap] .walk-sticky{display:block}
 body[data-project=glancemap] .walk-viewport{height:280px;margin-bottom:22px}
 body[data-project=glancemap] .walk-map{height:100%}
 body[data-project=glancemap] .walk-narration{clear:both}
}
@media(max-width:540px) and (prefers-reduced-motion:no-preference){
 body[data-project=glancemap] #problem{padding-top:12px}
 body[data-project=glancemap] .walk-sticky{height:calc(100svh - 100px);grid-template-rows:auto 20% minmax(0,1fr)}
}
/* Hide the outgoing sentence immediately; the next one can fade in without
   two quotations being legible on top of one another. */
body[data-project=glancemap] .walk-scene{visibility:hidden}
body[data-project=glancemap] .walk-scene.is-active{visibility:visible}