/* suzannedolanart.com : walk.css
   The walk-around viewer built by walk.js: an inline panel (never a modal) in place of the cover photograph.
   One unit that fits the viewport (fix round 2, section A): the canvas, no taller than 70vh (62vh on a phone),
   then one control row (the readout on the left, Captions and Close on the right, on one baseline), then the
   caption box directly under the row, inside the unit, its height reserved so switching captions on moves
   nothing. The stills strip stays under the unit. With reduced motion the panel is a plain horizontal strip
   of stills. */

/* without JS there is nothing to open: the bootstrap in <head> (or walk.js itself) sets html.js or html.no-motion */
html:not(.js):not(.no-motion) .walk-trigger { display: none; }
/* .btn sets display, which would beat the hidden attribute while the panel is open */
.walk-trigger[hidden] { display: none; }

.walk {
  /* the canvas height cap: 70vh on desktop, 62vh on a phone. The cover's own cap (--walk-max) is not used here. */
  --walk-h: 70vh;
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  width: 100%;
  min-width: 0;
}
@supports (height: 1dvh) {
  .walk { --walk-h: 70dvh; }
}
@media (max-width: 759.98px) {
  .walk { --walk-h: 62vh; }
  @supports (height: 1svh) {
    .walk { --walk-h: 62svh; }
  }
}
.walk[hidden] { display: none; }
/* walk.js sets --walk-w to the canvas width, so the line, the row and the caption share its edges */
.walk__line, .walk__bar, .walk__caption, .walk__fail { width: var(--walk-w, 100%); max-width: 100%; }

.walk__stage { display: grid; justify-items: center; width: 100%; }
.walk__canvas {
  display: block;
  aspect-ratio: var(--fw, 4) / var(--fh, 5);
  width: min(100%, calc(var(--walk-h) * var(--fw, 4) / var(--fh, 5)));
  max-width: 100%;
  background: var(--paper);
  /* vertical page scroll stays with the browser; horizontal drags turn the work */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.walk__canvas.is-dragging { cursor: grabbing; }
.walk__canvas:focus-visible { outline-offset: 4px; }
/* the loading line hugs the bottom edge of the canvas (it sits inside the stage) and goes once every frame is in */
.walk__line { display: block; height: 1px; background: var(--rule); }
.walk__line > i { display: block; height: 1px; width: 0; background: var(--ink); }
.walk__line[hidden] { display: none; }

/* the one control row: readout left, the buttons right, everything on the same baseline */
.walk__bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.walk__readout,
.walk__progress,
.walk__fail {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.walk__readout { flex: none; color: var(--ink); min-width: 15ch; font-variant-numeric: tabular-nums; }
/* "Loading n of N" while the frames come in: it takes the space between the readout and the buttons and is clipped
   where there is none (the line under the canvas shows the same progress; the text is still announced) */
.walk__progress {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.walk__progress[hidden] { display: none; }
.walk__actions { display: flex; align-items: baseline; gap: 8px; margin-left: auto; flex: none; }
@media (max-width: 479.98px) {
  /* a 360px phone: the readout and both buttons still fit one row at the canvas width, also while "Loading n of N"
     is still in the row (measured 2026-09-02: 317px canvas at 360 x 640, the row needs 315px with 8px gaps) */
  .walk__bar { gap: var(--s-1); }
  .walk__actions .btn { padding-inline: 10px; }
}

/* captions: the box keeps two lines of height whether captions are on or off, so the unit never changes height;
   two layers crossfade between stops. The layers share one grid cell (not absolute), so a caption longer than two
   lines on a narrow phone grows the box instead of running over the stills strip. */
.walk__caption {
  display: grid;
  min-height: 2.9em;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.walk__caption[hidden] { display: none; }
.walk__cap {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.walk__cap.is-on { opacity: 1; }

.walk__fail { color: var(--ink-soft); }

/* reduced motion: every 4th frame as a still, scrolled sideways */
.walk__strip {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-1);
  -webkit-overflow-scrolling: touch;
}
.walk__still {
  flex: none;
  width: min(100%, 300px);
  margin: 0;
  scroll-snap-align: start;
}
.walk__still img { display: block; width: 100%; height: auto; background: var(--paper); }
.walk__still figcaption { margin-top: var(--s-1); }

@media (prefers-reduced-motion: reduce) {
  .walk__cap { transition: none; }
}
@media print {
  .walk { display: none !important; }
}