/* book.css -- the cover image, and nothing else.

   Added 2026-08-04 when content.Book gained a BookCover path column. Two
   surfaces draw a cover and only two: the shelf (Books.aspx) and a book's
   contents page (Book.aspx). A chapter page never does, because a reader who
   is inside the book does not need to be shown its jacket again.

   Both rules below are the .bioglyph pattern from music.css, for the same
   reasons it gives: a fixed width in px rather than a percentage so the art
   reads at a size rather than stretching, and a float that becomes its own
   row on a narrow screen because a float this size leaves a gutter too narrow
   to read on a phone.

   NO fixed height anywhere and no px font size: the cover has to scale with
   the reader's text size like everything else, so the widths are in rem. A
   cover is 2:3, and height:auto keeps it so at any width.

   The image itself carries EMPTY ALT on both surfaces, deliberately. On the
   shelf the book's title is the link immediately beside it, and on the
   contents page the title is the h1 directly above it, so a described cover
   would make a screen reader say the title twice. It is decoration in the
   accessibility sense even though it is the most worked-on picture on the
   site. */

/* The contents page. Floated right of the subtitle and byline, which is where
   a jacket sits on a title page. */
.bookcover{float:right;width:11rem;margin:0 0 16px 24px;box-sizing:border-box;
  border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.bookcover img{width:100%;height:auto;display:block}

/* The shelf. Small enough that a list of books still reads as a list rather
   than a gallery, and floated left so the title and subtitle keep their own
   line. */
.shelfcover{float:left;width:3.5rem;margin:2px 14px 6px 0;box-sizing:border-box;
  border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.shelfcover img{width:100%;height:auto;display:block}

/* A list item carrying a float has to contain it, or the next book's text
   wraps around the previous book's cover. */
.idx li{overflow:hidden}

@media(max-width:560px){
  /* Same reasoning as .bioglyph: on a phone the float leaves a gutter too
     narrow for the subtitle, so the cover takes its own row above the text. */
  .bookcover{float:none;width:8rem;margin:0 0 16px}
}

/* ------------------------------------------------------------------------
   THE FLIPBOOK, ruling 534, w1951-pdfbuild1. js/book-flip.js is what builds
   and sizes the page-turn view itself (StPageFlip's own "stretch" size mode
   sets its container's dimensions from script); everything here is layout
   around that, plus the always-visible controls and fallback link that work
   with no script at all.
   ------------------------------------------------------------------------ */

/* The 26px standard section rhythm, same as every other stacked block on
   this page. overflow-x:auto is the site's own wide-content rule: StPageFlip
   can render wider than a narrow viewport before its own responsive sizing
   settles, and a scrollbar here is the honest alternative to page.css's
   inherited overflow-x:hidden silently clipping it. */
.bookflip{margin:26px 0;overflow-x:auto}

/* Before js/book-flip.js has anything to show (still fetching the PDF, or
   the script never ran at all), an empty host collapses to nothing without
   this: a placeholder height so the page does not visibly jump once the
   flip view actually appears. StPageFlip's own vendored rules below take
   over sizing and positioning the moment it initializes. */
.bookflip-canvas:empty{min-height:12em}

/* ---- StPageFlip's own base CSS, vendored verbatim -----------------------
   Source: page-flip@2.0.7, src/Style/stPageFlip.css, from
   https://registry.npmjs.org/page-flip/-/page-flip-2.0.7.tgz
   License: MIT (js/vendor/pageflip/pageflip-LICENSE.txt). REQUIRED for the
   library's own positioning and page-turn transforms to render at all; the
   classnames (stf__*) are the library's own and are not renamed here on
   purpose, so an upgrade of the vendored script never has to be paired with
   a rename here too. Reduced-motion is handled at the SCRIPT level
   (js/book-flip.js sets flippingTime to 0 and calls the instant turnToPage
   API instead of the animated flip API), because flippingTime is what the
   library itself reads to decide how long the transform transition runs;
   a CSS transition:none override here would fight that number rather than
   agree with it. */
.stf__parent{position:relative;display:block;box-sizing:border-box;
  transform:translateZ(0);touch-action:pan-y}
.sft__wrapper{position:relative;width:100%;box-sizing:border-box}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;
  perspective:2000px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow{position:absolute;left:0;top:0}
.stf__innerShadow{position:absolute;left:0;top:0}
.stf__hardShadow{position:absolute;left:0;top:0}
.stf__hardInnerShadow{position:absolute;left:0;top:0}

.bookflip-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-top:14px}
.bookflip-controls input[type="number"]{width:4em;padding:.3em .5em;
  border:1px solid var(--edge2);border-radius:6px;background:var(--panel);
  color:var(--ink);font:inherit}
.bookflip-controls input[type="number"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.bookflip-status{color:var(--muted);font-size:.9em}

.bookflip-fallback{margin-top:10px}

/* The real linear text, the accessible copy the aria-hidden canvas stack
   above it stands in front of. Same 26px rhythm as everywhere else, and a
   thin top rule per page so a sighted reader scrolling past the flip view
   can still see where one PDF page's text ends and the next begins. */
.bookflip-text{margin-top:26px}
.bookflip-page{margin-bottom:26px;padding-top:14px;border-top:1px solid var(--edge)}
.bookflip-page:first-child{border-top:none;padding-top:0}