/* Update 19 (Oct 12, 2026) — loaded after update15.css.
   Slideshow speed: "Slower" and "Faster" beside the pause button change how long each photograph stays
   (2–20 s, shown as "9 s"). On phones the control moves to the top bar, in place of the name.
   The crossfade (--fade) and the slow drift (--kb) follow the chosen speed; app.js sets both on .show. */
.show .layer { transition-duration: var(--fade, 3s); }
.show .layer.on[class*="kb"] img { animation-duration: var(--kb, 12s); }

.show .ctl { align-items: center; }
.show .pace { display: inline-flex; align-items: center; }
.show .pace .secs { min-width: 3.4em; text-align: center; font-size: 13px; letter-spacing: .02em; color: var(--mute); font-variant-numeric: tabular-nums; }
.show .pace .word { min-height: 44px; padding: 0 8px; font-size: 13px; letter-spacing: .02em; color: var(--ink); opacity: .6; transition: opacity .6s; }
.show .pace .word:hover, .show .pace .word:focus-visible { opacity: 1; }
.show .pace .word[disabled] { opacity: .22; cursor: default; }
.show .ctl .sep { width: 1px; height: 18px; margin: 0 10px; background: var(--line); }

@media (max-width: 760px) {
  .show .ui.top .n { display: none; }
  .show .ui.top .pace { margin-left: -8px; } /* line "Slower" up with the page margin */
  .show .ctl .sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .show .layer { transition-duration: .6s; }
}