:root {
  --reader-background: var(--color-bg);
  --reader-ink: var(--color-text-body);
  --reader-muted: var(--color-text-muted);
  --reader-edge: var(--color-border);
  --reader-link: var(--color-link);
  --reader-space: var(--space-lg);
  --reader-touch: 44px;
}
body { min-width: 320px; }
.paper-project { line-height: normal; --magazine-shadow: var(--magazine-shadow-dark); }
html.light .paper-project { --magazine-shadow: var(--magazine-shadow-light); }
.paper-project { overflow-x: clip; }
.paper-project .logo { display: inline-flex; align-items: center; min-width: var(--reader-touch); min-height: var(--reader-touch); }
.mobile-magazine #site-nav { display: none; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, .book:focus-visible { outline: 2px solid var(--reader-link); outline-offset: 5px; }
button:disabled { opacity: .25; cursor: default; }
.reader { height: 100dvh; min-height: 650px; display: flex; flex-direction: column; padding-bottom: var(--space-lg); }
.reader-header { width: 100%; flex: none; }
.paper-component { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0;
  margin-top: var(--space-lg); gap: var(--space-xl); }
.book-stage { margin: 0 auto; height: auto; flex: none; min-height: 0; display: flex; align-items: center; justify-content: center; }
.book { flex: none; width: 0; height: 0; touch-action: pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.book.dragging { cursor: grabbing; }
.book { isolation: isolate; }
.book::after { content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; box-shadow: var(--magazine-shadow); }
.book[data-cover="front"]::after { left: 50%; }
.book[data-cover="back"]::after { right: 50%; }
.book.paper-rendered .rest-pages { opacity: 0; pointer-events: none; }
.book.paper-rendered::before { display: none; }
.book[data-cover="front"]::before { left: 50%; }
.book[data-cover="back"]::before { right: 50%; }
.book.dragging, .book[data-turning="true"] { touch-action: none; }
.rest-pages, .turn-surface { position: absolute; inset: 0; }
.paper-project:not(.mobile-magazine) .turn-surface {
  inset: calc(-100% * (var(--magazine-desktop-canvas-scale-ratio) - 1) / 2);
  width: calc(100% * var(--magazine-desktop-canvas-scale-ratio));
  height: calc(100% * var(--magazine-desktop-canvas-scale-ratio)); }
.paper-project:not(.mobile-magazine) .book-stage {
  overflow-x: clip; overflow-y: visible; overflow-clip-margin: var(--reader-space); }
.rest-pages .leaf { position: absolute; top: 0; transform-origin: top left; flex: none; }
.turn-surface { z-index: 10; pointer-events: none; }
.turn-surface canvas { width: 100%; height: 100%; display: block; }
.reader-toolbar { width: 100%; flex: none; min-height: var(--reader-touch); }
.round { min-width: var(--reader-touch); min-height: var(--reader-touch); padding: 0; }
.round:not(:disabled):hover { background: var(--color-border); color: var(--color-text); }
.page-counter { display: flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.page-counter label { font-size: var(--text-sm); color: var(--color-text-muted); }
.page-counter input { width: calc(3ch + 2 * var(--space-sm)); min-width: var(--reader-touch);
  min-height: var(--reader-touch); padding: var(--space-sm);
  border: var(--border-thin) solid var(--color-text-muted); border-radius: var(--radius-sm);
  background: var(--color-bg-elevated); color: inherit; font: inherit;
  text-align: center; appearance: textfield; -moz-appearance: textfield; }
.page-counter input::-webkit-inner-spin-button, .page-counter input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0; }
.page-counter input:focus-visible { outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset); }
.reader-toolbar .pagination { gap: var(--space-md); }
@media (max-width: 1100px) {
  .site-nav { width: 170px; padding-left: 24px; }
  .reader { margin-left: 175px; padding-left: 12px; padding-right: 24px; }
  .reader-header h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto!important; } }

/* Appearance uses the same semantic tokens as the portfolio. Printed artwork is invariant. */
.site-nav .selected, .pagination { color: var(--color-text); }
.download { color: var(--color-link); display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: var(--reader-touch); min-height: var(--reader-touch); }
.reader-header h1 { font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); }
.reader-toolbar { color: var(--color-text-subtle); }
.round { background: var(--color-bg-elevated); border-color: var(--color-border); color: var(--color-text); }
.reader-toolbar { justify-content: center; }
.reader-header { align-items: baseline; gap: var(--reader-space); }
.reader-header h1 { margin: 0; min-height: 2.4em; line-height: 1.2; }
.chapter-link { color: var(--magazine-accent); cursor: pointer; }
.chapter-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.page-links { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.page-link { position: absolute; pointer-events: auto; color: transparent; }
.page-link:hover, .page-link:focus-visible { background: color-mix(in srgb, var(--magazine-accent) 8%, transparent); outline: 2px solid var(--magazine-accent); outline-offset: 2px; }
.book[data-turning="true"] .page-links { visibility: hidden; }


.reader-header { perspective: var(--magazine-chapter-flip-perspective); }
.reader-header h1 { transform-origin: center bottom; backface-visibility: hidden; }