/* Flipbooks (12 Oct): a few real screens of one thing happening -- a card
   slid, a plan changed, a phone turned -- flipped through like a flipbook
   rather than a video. "I'm a seeing-is-believing person and often skip text
   to see images." Without the script, or with reduced motion asked for, the
   frames sit side by side as numbered steps, so nothing is lost. Colours only
   from tokens.css. */
.flipbook { margin: 1.2rem 0 1.6rem; }
.flipbook ol { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); counter-reset: fb; }
.flipbook li { counter-increment: fb; margin: 0; max-width: none;
  /* site.css turns every li into a card; a frame is not one. */
  background: none; backdrop-filter: none; border: 0; border-radius: 0; padding: 0; }
.flipbook img { display: block; width: auto; height: auto; max-width: 100%; max-height: 30rem; margin: 0 auto;
  border-radius: .8rem; border: 1px solid var(--line); background: var(--card); }
.flipbook .cap { display: block; text-align: center; font-size: .92rem; color: var(--muted); margin-top: .35rem; }
.flipbook .cap::before { content: counter(fb) ". "; font-weight: 700; color: var(--ink); }
.flipbook.wide ol { grid-template-columns: 1fr; }

/* Playing: one frame at a time, the frames stacked in one cell so the
   flipbook keeps the height of its tallest frame and nothing below jumps. */
.flipbook.playing ol { display: grid; grid-template-columns: 1fr; max-width: 22rem; }
.flipbook.wide.playing ol { max-width: 40rem; }
.flipbook.playing li { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; }
.flipbook.playing li.on { opacity: 1; }
.flipbook.playing img { cursor: pointer; }
.flipbook.playing .cap::before { content: counter(fb) " of " attr(data-n) ". "; }
.flipbook .bar { display: none; align-items: center; gap: .6rem; margin-top: .5rem; max-width: 22rem; }
.flipbook.wide .bar { max-width: 40rem; }
.flipbook.playing .bar { display: flex; }
.flipbook .bar button { font: inherit; font-size: .92rem; font-weight: 600; color: var(--accent);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  min-height: 2.75rem; min-width: 2.75rem; padding: .2rem .9rem; cursor: pointer; }
.flipbook .bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.flipbook .dots { display: flex; gap: .35rem; margin-left: auto; }
.flipbook .dots span { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--muted); }
.flipbook .dots span.on { background: var(--accent); border-color: var(--accent); }

/* .one: on the front page and See, where a row of five frames would swamp the
   page, a flipbook that is not playing shows its first frame only. */
.flipbook.one:not(.playing) li + li { display: none; }
.flipbook.one:not(.playing) ol { grid-template-columns: 1fr; }
.feat .flipbook { margin: 0; justify-self: center; width: min(250px, 66vw); }
.feat .flipbook ol, .feat .flipbook .bar { max-width: none; }
.shot.flipbook ol, .shot.flipbook .bar { max-width: none; }
.shot.flipbook img { border-radius: 1.1rem; }