/* Stage 19: book reader (only on reader pages). Edge to edge: the book fills the screen,
   controls float over it and fade while reading. */
body>.note,body>header,body>footer{display:none}
.reader{box-sizing:border-box;height:100dvh;overflow:hidden;background:var(--paper2)}
.rd-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rd{position:relative;height:100%;display:grid;place-items:center}
/* Two pages as tall as the screen allows; one page on upright screens. */
.rd-frame{width:min(100vw - 12px,(100dvh - 12px) / var(--rd-ratio) * 2)}
@media(orientation:portrait){.rd-frame{width:min(100vw,(100dvh - 12px) / var(--rd-ratio))}}
/* "One large page" (wide screens): one page as wide as the screen allows, read by scrolling down. */
.rd.is-one{overflow-y:auto;overscroll-behavior:contain;place-items:start center}
.rd.is-one .rd-frame{width:min(100vw - 12px,1100px);margin:6px 0 80px}
/* StPageFlip sets min-width/height from its settings; the frame decides the size here. */
.rd-book{margin:0 auto;min-width:0!important;min-height:0!important}
.rd-page{background:#fff;overflow:hidden}
.rd-sheet{position:relative;width:100%;height:100%;background:#fff}
.rd-sheet canvas{display:block;width:100%;height:100%;pointer-events:none}
/* Spine shadow on the inner edge of each page, over the drawn page. */
.rd-sheet::after{content:"";position:absolute;inset:0;pointer-events:none}
.--left .rd-sheet::after{background:linear-gradient(to left,rgba(42,33,24,.14),transparent 7%)}
.--right .rd-sheet::after{background:linear-gradient(to right,rgba(42,33,24,.14),transparent 7%)}
/* Front cover (the site's cover photo, whole, on a dark board) and plain inside cover. */
.rd-cover{background:var(--night)}
.rd-cover img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rd-endpaper{background:var(--paper)}
/* Floating controls. */
.rd-ui{transition:opacity .4s ease}
.rd.is-idle .rd-ui{opacity:0;pointer-events:none}
.rd.is-idle{cursor:none}
.rd-btn,.rd-icon{display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--ink) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--ink);line-height:1;cursor:pointer;text-decoration:none;box-shadow:0 2px 10px rgba(42,33,24,.18);transition:opacity .4s ease,background-color .2s,color .2s,border-color .2s}
.rd-btn{position:fixed;top:50%;translate:0 -50%;z-index:5;width:48px;height:48px;font-size:1.7rem}
.rd-prev{inset-inline-start:10px}
.rd-next{inset-inline-end:10px}
.rd-icon{width:40px;height:40px;font-size:1.4rem}
.rd-top{position:fixed;top:10px;inset-inline:10px;z-index:5;display:flex;justify-content:space-between;pointer-events:none}
.rd-top>*{pointer-events:auto}
.rd-tools{display:flex;gap:8px}
.rd-tools>[hidden]{display:none}
/* View toggle icon: the layout the button switches to (one page, or two side by side). */
.rd-view-ico{position:relative;width:16px;height:14px;border:1.5px solid currentColor;border-radius:1px}
.rd.is-one .rd-view-ico{width:22px}
.rd.is-one .rd-view-ico::after{content:"";position:absolute;inset-block:0;left:50%;border-left:1.5px solid currentColor}
.rd.is-idle .rd-top *{pointer-events:none}
.rd-btn:hover:not(:disabled),.rd-icon:hover{background:var(--lapis);border-color:var(--lapis);color:#fff}
.rd-btn:focus-visible,.rd-icon:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rd-btn:disabled{opacity:.25;cursor:default}
.rd-bar{position:fixed;bottom:12px;left:50%;translate:-50% 0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.45rem 1.1rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--paper) 85%,transparent);box-shadow:0 2px 10px rgba(42,33,24,.18)}
.rd-count{font-size:.9rem;color:var(--ink);white-space:nowrap}
.rd-progress{width:160px;height:2px;background:color-mix(in srgb,var(--gold) 25%,transparent)}
.rd-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s ease}
@media(prefers-reduced-motion:reduce){.rd-ui,.rd-progress i{transition:none}}
/* Hardening: no selection, dragging or callouts; printing gives a blank page. */
.reader,.reader *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media print{body{display:none!important}}