* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #fff; }
body { width: 100%; color: #151515; font-family: Seravek, "Avenir Next", Arial, sans-serif; }
.viewer { width: 100%; max-width: 886px; margin: 0 auto; padding: 74px 18px 82px; }
.page {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 850px;
  aspect-ratio: 612 / 792;
  margin: 0 auto;
  background: white;
  overflow: visible;
}
.page-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.navigation { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.page-arrows { position: absolute; top: -34px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; }
.page-arrows > :first-child { position: absolute; left: 17.5%; }
.page-arrows > :last-child { position: absolute; left: 82.5%; white-space: nowrap; }
.navigation a, .navigation span {
  color: #777;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}
.navigation a { pointer-events: auto; }
.navigation a:hover { text-decoration: underline; }
.nav-arrow { display: inline-block; font-size: .78em; line-height: 1; transform: scaleX(.62); }
.page-number { position: absolute; right: 0; bottom: -42px; left: 0; display: flex; justify-content: center; font-variant-numeric: tabular-nums; }
.disabled { color: #aaa; }
.text-line {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
  overflow: visible;
  text-rendering: geometricPrecision;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  user-select: text;
}
.text-line::selection {
  background: rgba(45, 104, 196, .28);
}
.text-line.bold { font-weight: 700; }
@media (max-width: 620px) {
  .viewer { padding: 60px 0 54px; }
  .page-arrows { top: -30px; }
}