.reader-shell { width: min(100% - 32px, 1100px); margin: 32px auto 70px; }
.reader-shell > .eyebrow { margin-top: 32px; }
.reader-shell h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 18px; }
.reader-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 24px 0 16px; }
.reader-controls button, .zoom-tools button { background: var(--walnut); border: 1px solid var(--gold); padding: 10px 18px; min-height: 44px; border-radius: 4px; }
.reader-controls button:disabled { opacity: .4; cursor: default; }
.page-button { display: block; width: 100%; padding: 0; border: 1px solid var(--gold); background: transparent; touch-action: pan-y pinch-zoom; cursor: zoom-in; }
.page-button img { width: 100%; height: auto; object-fit: contain; }
.reader-hint { font-size: .85rem; color: var(--muted); margin-top: 12px; }
.reader-transcript { border-block: 1px solid var(--line); padding: 16px 0; }
#page-text { white-space: pre-line; margin: 18px 0; font-size: 1.1rem; }
#preview-end { margin-top: 24px; }
#reader-error:empty { display: none; }
#zoom-dialog { width: 96vw; max-width: 1500px; max-height: 94dvh; padding: 0; border: 1px solid var(--gold); background: var(--walnut); color: var(--cream); }
#zoom-dialog::backdrop { background: rgba(0,0,0,.85); }
.zoom-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px; }
.zoom-tools a { text-decoration: underline; font-size: .85rem; }
.zoom-scroll { overflow: auto; max-height: 72dvh; }
.zoom-scroll img { width: 1402px; max-width: none; height: auto; }

#zoom-dialog { background: #38291c; }
#zoom-dialog::backdrop { background: rgba(38,28,19,.94); }
.reader-controls button, .zoom-tools button { background: #483421; }
.reader-transcript { background: rgba(56,41,28,.85); padding: 16px; }

@media screen {
  .reader-page { background: linear-gradient(rgba(45,31,20,.86), rgba(45,31,20,.86)), url("assets/hearth-library.webp") center top / auto 1000px repeat-y; }
  .reader-shell > p, .reader-hint { color: #ecdfc8; }
}
body:has(#zoom-dialog[open]) { overflow: hidden; }

@media screen {
  body.embedded-reader { background: transparent; }
  .embedded-reader .reader-shell { width: calc(100% - 24px); margin: 12px auto 24px; }
  .embedded-reader .reader-shell > .text-link,
  .embedded-reader .reader-shell > .eyebrow,
  .embedded-reader .reader-shell > h1,
  .embedded-reader .reader-shell > p { display: none; }
  .embedded-reader .reader-controls { margin-top: 0; }
}