/* ---------- STORYLINE ----------
   A dial of ruler ticks at the bottom edge (drawn on a canvas by
   js/views/storyline.js) and a carousel of the glass cards above it. The
   section is a fixed, full-viewport stage; drag anywhere on it. */
#view-storyline {
  height: 100vh;
  height: 100dvh;
  min-height: 460px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  outline: none;
}
#view-storyline:focus,
#view-storyline:focus-visible { outline: none; box-shadow: none; }
#view-storyline.is-dragging,
#view-storyline.is-dragging .card { cursor: grabbing; }

/* The wheel: hairline ticks only, no text, never in the way of the pointer. */
#view-storyline .storyline__wheel {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
}

.stage[data-view="storyline"] ~ .cards .card { cursor: pointer; }

/* The selected picture's title above it and its month below, centred. */
#view-storyline .storyline__title,
#view-storyline .storyline__month {
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
#view-storyline .storyline__title { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text-strong); }
#view-storyline .storyline__month { font-size: 13px; line-height: 20px; letter-spacing: 0.02em; color: var(--text-muted); }
#view-storyline.is-labelled .storyline__title,
#view-storyline.is-labelled .storyline__month { opacity: 1; }