/* Chronicle: one engraving, the size of the screen, and nothing around it. */

.chronicle {
  height: calc(100svh - var(--above, 100px));
  overflow: hidden;
  background: var(--paper);
}
.chronicle__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* a tall, narrow screen keeps the full height and swipes sideways instead of cropping */
@media (orientation: portrait) {
  .chronicle { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .chronicle::-webkit-scrollbar { display: none; }
  .chronicle__image { width: auto; max-width: none; object-fit: fill; }
}