* { box-sizing: border-box; }
html { background: #25262a; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 48px 24px 96px;
  background: #25262a;
  color: #fff;
  font-family: var(--oc-font-body);
}
.viewer-header {
  width: min(100%, 920px);
  margin: 0 auto 32px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
h1 { margin: 0; font: 700 24px/1.1 var(--oc-font-display); }
.viewer-header p { margin: 6px 0 0; color: #b9bac0; font-size: 13px; }
.pages { display: grid; gap: 42px; margin: 0; padding: 0; list-style: none; }
.page { width: min(100%, 920px); margin: 0 auto; }
.page figcaption {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #b9bac0;
  font-size: 12px;
}
.page img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1240 / 1754;
  background: var(--oc-paper);
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
}
@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { background: #fff; }
  body { padding: 0; }
  .viewer-header, figcaption { display: none !important; }
  .pages { display: block; }
  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }
  .page:last-child { break-after: auto; page-break-after: auto; }
  .page img { width: 210mm; height: 297mm; box-shadow: none; }
}