.media-dialog.journal-dialog {
  width: min(calc(100% - 40px), 1560px);
  height: min(94svh, 1140px);
  max-width: none;
  max-height: none;
  color: var(--ink);
  background: #f6f3ee;
  overflow: hidden;
}
.journal-dialog[open] { display: flex; flex-direction: column; }
.journal-dialog .dialog-bar {
  flex: none;
  padding: 8px clamp(16px, 2.4vw, 36px);
  border-color: #29262024;
}
.journal-dialog .dialog-bar h2 { font: 300 clamp(19px, 2vw, 27px)/1.2 Otto, Georgia, serif; text-transform: none; letter-spacing: -.02em; }
.journal-dialog .dialog-close { min-height: 44px; gap: 10px; }
.journal-dialog .dialog-content { flex: 1; min-height: 0; max-height: none; overflow: hidden; }
.journal-reader { height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.reader-stage {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  background: #e4ded4;
  outline-offset: -3px;
}
.reader-mat {
  width: max(100%, calc(var(--visible-width) + 2 * var(--reader-gap)));
  min-height: max(100%, calc(var(--leaf-height) + 2 * var(--reader-gap)));
  display: grid;
  place-items: center;
  overflow: clip;
}
.reader-frame { width: var(--visible-width); height: var(--leaf-height); position: relative; }
.reader-book {
  position: absolute;
  height: 100%;
  width: var(--book-width);
  left: 50%;
  transform: translateX(var(--book-offset));
  perspective: 2000px;
  perspective-origin: center;
}
.reader-page, .reader-leaf, .reader-face {
  width: var(--leaf-width);
  height: 100%;
  position: absolute;
  top: 0;
}
.reader-page, .reader-face { background-color: #faf8f2; overflow: hidden; }
.reader-page { box-shadow: 0 3px 12px #29241b26; }
.reader-page img, .reader-face img { width: 100%; height: 100%; }
.reader-left { left: 0; }
.reader-right { right: 0; }
.reader-book.is-spread .reader-left::after, .reader-book.is-spread .reader-right::after {
  position: absolute;
  content: "";
  top: 0; bottom: 0; width: 2%;
  pointer-events: none;
}
.reader-book.is-spread .reader-left::after { right: 0; background: linear-gradient(90deg, transparent, #29241b15); }
.reader-book.is-spread .reader-right::after { left: 0; background: linear-gradient(90deg, #29241b10, transparent); }
.reader-leaf { z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.reader-leaf.reader-right { transform-origin: left center; }
.reader-leaf.reader-left { transform-origin: right center; }
.reader-face { inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.reader-face.back { transform: rotateY(180deg); }
.reader-controls {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px clamp(16px, 3vw, 48px); padding: 10px 16px;
  border-top: 1px solid #29262024; font: 400 14px/1.2 Saans, Arial, sans-serif;
}
.reader-navigation, .reader-zoom { display: flex; align-items: center; }
.reader-controls button {
  width: 44px; height: 44px; border-radius: 50%; font-size: 21px;
  display: grid; place-items: center;
}
.reader-controls button:disabled { opacity: .28; cursor: default; }
.reader-controls button:hover:enabled { background: #e7e1d7; }
.reader-controls :focus-visible, .journal-dialog .dialog-close:focus-visible { outline-offset: 1px; }
.reader-folio, .reader-zoom output { font-variant-numeric: tabular-nums; text-align: center; }
.reader-folio { min-width: 7.6em; }
.reader-zoom output { min-width: 3.3em; }
.reader-download { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 30px; }
.reader-download:hover { color: #fff; background: var(--ink); }
@media(max-width: 640px) {
  .media-dialog.journal-dialog { width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
  .journal-dialog .dialog-bar { padding: 4px 14px; }
  .reader-controls { gap: 2px 8px; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); }
  .reader-folio { min-width: 6.3em; }
}
@media(max-width: 510px) {
  .reader-navigation { width: 100%; justify-content: center; }
}