/* The page-turning book reader (books only). */
:root { --desk:#2a2420; --paper:#fbf6ea; --ink:#2a241c; --gold:#e0b25a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.reader { margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; color:#f3ece0;
  font:16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 50% 30%, #4a3b30 0%, var(--desk) 70%) fixed; }
.reader a { color: var(--gold); text-decoration: none; }
.reader button { font: inherit; color: inherit; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px; padding: 6px 16px; cursor: pointer; }
.reader button:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.reader button:disabled { opacity: .3; cursor: default; }
.reader button:focus-visible, .reader a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.rbar { width: 100%; max-width: 1100px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; }
.rbar a { font-weight: 700; }

#book { position: relative; perspective: 2600px; margin: 6px auto 0; flex: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.half { position: absolute; top: 0; }
.page { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.page.l { border-radius: 8px 0 0 8px; background: linear-gradient(to left, rgba(0,0,0,.2), rgba(0,0,0,0) 9%), var(--paper); }
.page.r { border-radius: 0 8px 8px 0; background: linear-gradient(to right, rgba(0,0,0,.2), rgba(0,0,0,0) 9%), var(--paper); }
.page.s { border-radius: 8px; }
.page.void { background: none; box-shadow: none; }
.pno { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: 13px Georgia, serif; opacity: .55; }

.leaf { position: absolute; top: 0; transform-origin: left center; transform-style: preserve-3d; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .back { transform: rotateY(180deg); }
.leaf .face::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0) 40%); }

/* Text is laid out in CSS columns: one column = one page. */
.track { position: absolute; font: 19px/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; column-fill: auto; orphans: 2; widows: 2; }
.track.measure { left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.track p { margin: 0; text-indent: 1.5em; }
.track .chap { break-before: column; }
.track .kicker { text-indent: 0; text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: .7em; opacity: .6; margin: 14% 0 .4em; }
.track h2 { text-align: center; font-size: 1.7em; line-height: 1.2; margin: 0 0 1.2em; font-weight: 600; hyphens: none; }
.track h2 + p { text-indent: 0; }
.track h2 + p::first-letter { float: left; font-size: 3.3em; line-height: .85; padding: .06em .1em 0 0; color: #8a5a1e; }
.track hr { border: 0; text-align: center; margin: 1em 0; }
.track hr::after { content: "❦"; opacity: .5; }
.track em { font-style: italic; }
.track .cover { break-after: column; text-align: center; padding-top: 16%; }
.track .cover .orn { font-size: 2em; color: #8a5a1e; opacity: .8; }
.track .cover h1 { font-size: 2.3em; line-height: 1.15; margin: .4em 0 .2em; hyphens: none; }
.track .cover .by { text-indent: 0; font-style: italic; opacity: .75; margin-bottom: 2em; }
.track .cover .blurb { text-indent: 0; font-size: .85em; opacity: .8; text-align: center; padding: 0 4%; }

.rfoot { width: 100%; max-width: 760px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 16px 20px 8px; }
#where { flex: 1; text-align: center; font-size: 14px; opacity: .85; min-width: 0; }
.prog { width: min(560px, 90vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); margin: 4px 0 28px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s; }
.hint { font-size: 13px; opacity: .55; margin-bottom: 20px; text-align: center; padding: 0 20px; }

#toc { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.tocbox { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 22px 26px; max-width: 460px; width: 100%; max-height: 80vh; overflow: auto; }
.tocbox h2 { margin: 0 0 10px; font-family: Georgia, serif; }
.tocbox ol { list-style: none; margin: 0 0 16px; padding: 0; }
.tocbox li button { width: 100%; text-align: left; border-radius: 8px; border: 0; background: none; color: var(--ink); padding: 10px 8px; font-family: Georgia, serif; font-size: 17px; }
.tocbox li button:hover { background: rgba(0,0,0,.08) !important; }
.tocbox li small { opacity: .55; float: right; }
.tocbox > button { color: var(--ink); border-color: rgba(0,0,0,.3); background: none; }

@media (prefers-reduced-motion: reduce) { .prog i { transition: none; } }