/* The book, in the folio (group 11, boards 1–4: Shelf, BookReader, BookPages, BookSpread · 2026-10-06).
   The Shelf is a menu room (.mr-page, css/83); the reader and All pages are folio pages on the stack (.bk-reader,
   .bk-pages). The reader's dress went with css/17ze-book.css on 2026-10-01 and the room stood bare until this.
   The pages themselves are the printed book's images: nothing here dresses them. */

/* ---- The Shelf ---- */
.sh-page .sh-view { justify-self: end; }
/* The eyebrows here sit inside rows and cards: not the room eyebrow's own gutter. */
.sh-page .sh-head .mr-eyebrow, .sh-page .sh-card .mr-eyebrow { margin: 0; }
.sh-page .sh-head { display: flex; justify-content: space-between; gap: 12px; margin: 18px var(--fo-gutter) 0; }
.sh-page .sh-shelf { margin: 14px var(--fo-gutter) 0; }
/* Air above the first shelf, as the board leaves it under the count (and room for a spine taken down to rise). */
.sh-page .sh-head + .sh-shelf { margin-top: 30px; }
/* The board: spines stand on a rule, with a little shelf's depth under it. */
.sh-page .sh-row { display: flex; align-items: flex-end; gap: 2px; min-height: 40px; padding: 0 4px; border-bottom: 1.5px solid var(--fo-ink); }
.sh-page .sh-shelf::after { content: ''; display: block; height: 14px; background: linear-gradient(var(--fo-bone), rgba(230,228,222,0)); }
.sh-page .sh-spine { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 18px 0 8px; border: 1px solid rgba(26,22,20,0.12); border-bottom: none; cursor: pointer; transition: transform .2s ease; }
.sh-page .sh-spine.is-paper { background: #F2EFE9; color: var(--fo-ink); }
.sh-page .sh-spine.is-ink { background: var(--fo-ink); color: var(--fo-card); }
.sh-page .sh-spine.is-bone { background: #D6D0C4; color: var(--fo-ink); }
.sh-page .sh-spine.is-graphite { background: var(--fo-graphite); color: var(--fo-card); }
.sh-page .sh-spine__band { position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: currentColor; opacity: .35; }
.sh-page .sh-spine.is-stale .sh-spine__band { background: var(--fo-red); opacity: 1; }
.sh-page .sh-spine__name { writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100% - 22px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fo-serif); font-size: 14px; line-height: 1; }
.sh-page .sh-spine__year { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.06em; opacity: .7; }
/* The one taken down rises off the shelf, as the board has it, and its card opens down out of the shelf. */
.sh-page .sh-spine.is-picked { transform: translateY(-16px); }
.sh-page .sh-spine { transition: transform .35s cubic-bezier(.22,1,.36,1); }
@keyframes sh-open { from { opacity: 0; transform: translateY(-18px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes sh-down { from { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(.8); } to { opacity: 1; transform: none; } }
.sh-page .sh-card { transform-origin: top; animation: sh-open .45s cubic-bezier(.22,1,.36,1) both; }
.sh-page .sh-card__cover { animation: sh-down .6s .08s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .sh-page .sh-card, .sh-page .sh-card__cover { animation: none; } }
.sh-page .sh-spine:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.sh-page .sh-spine.is-ink:focus-visible, .sh-page .sh-spine.is-graphite:focus-visible { outline-color: var(--fo-red); }
@media (prefers-reduced-motion: reduce) { .sh-page .sh-spine { transition: none; } }
/* A journey with no book yet: a dashed spine, its name in italic, a + at its foot. */
.sh-page .sh-spine.is-empty { width: 42px; height: 176px; border: 1px dashed var(--fo-hair-open); border-bottom: none; background: transparent; color: var(--fo-pale); padding: 10px 0 10px; }
.sh-page .sh-spine.is-empty .sh-spine__name { font-style: italic; }
.sh-page .sh-spine.is-empty[aria-pressed="true"] { border-color: var(--fo-ink); color: var(--fo-graphite); }
.sh-page .sh-spine__plus { font-size: 16px; line-height: 1; color: var(--fo-ink); }
.sh-page .sh-make { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 12px 12px; }
.sh-page .sh-make__said { font-family: var(--fo-serif); font-style: italic; font-size: 14px; color: var(--fo-graphite); }
.sh-page .sh-make .mr-link { font-size: 12px; }
/* The book taken down. */
.sh-page .sh-card { display: flex; gap: 14px; margin: 14px var(--fo-gutter) 0; padding: 12px; }
/* align-self: a flex row stretches its children to the card's height, which overrode the A5 shape and cut the cover's
   sides off (owner's phone, 2026-10-06). */
.sh-page .sh-card__cover { flex: none; align-self: flex-start; width: 72px; aspect-ratio: 148 / 210; overflow: hidden; border: 1px solid var(--fo-rule); background: var(--fo-bone); }
.sh-page .sh-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-page .sh-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sh-page .sh-card__name { font-family: var(--fo-serif); font-size: 16px; line-height: 1.25; }
.sh-page .sh-card__stale { font-size: 12px; line-height: 1.4; color: var(--fo-red); }
.sh-page .sh-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 8px; }
.sh-page .sh-card__who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sh-page .sh-card__who .mr-eyebrow { color: var(--fo-pale); }
.sh-page .sh-empty { margin: 14px var(--fo-gutter) 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.35; }
.sh-page .sh-spine.is-blank { justify-content: flex-end; }
.sh-page .sh-add { margin: 12px var(--fo-gutter) 0; font-size: 14px; }
/* List: the board's faces. */
.sh-page .sh-search { display: flex; align-items: center; gap: 10px; height: 44px; margin: 16px var(--fo-gutter) 0; padding: 0 12px; border: 1px solid var(--fo-rule); background: var(--fo-card); }
.sh-page .sh-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); outline: none; }
.sh-page .sh-search input::placeholder { color: var(--fo-pale); }
.sh-page .sh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sh-page .sh-search:focus-within { border-color: var(--fo-ink); }
.sh-page .sh-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 18px var(--fo-gutter) 0; }
.sh-page .sh-face { display: flex; flex-direction: column; gap: 8px; padding: 0; border: none; background: none; font: inherit; color: var(--fo-ink); text-align: left; cursor: pointer; }
.sh-page .sh-face__cover { display: block; aspect-ratio: 148 / 210; overflow: hidden; box-shadow: 0 0 0 1px rgba(26,22,20,0.14); background: var(--fo-bone); }
.sh-page .sh-face__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-page .sh-face__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.sh-page .sh-face__changed { color: var(--fo-red); }
.sh-page .sh-face.is-make { justify-content: flex-end; gap: 6px; aspect-ratio: 148 / 210; box-sizing: border-box; padding: 14px; border: 1px dashed var(--fo-hair-open); color: var(--fo-graphite); }
.sh-page .sh-face__said { font-family: var(--fo-serif); font-style: italic; font-size: 14px; line-height: 1.2; }
.sh-page .sh-face__go { font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; }
.sh-page .sh-face:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 3px; }
.sh-page .sh-none { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--fo-graphite); }
/* List: the covers, as the profile's shelf has them (css/79). */
.sh-page .shelf-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin: 18px var(--fo-gutter) 0; }
.sh-page .shelf-book { display: flex; flex-direction: column; gap: 6px; }
.sh-page .shelf-open { padding: 0; border: 1px solid var(--fo-rule); background: var(--fo-bone-light); cursor: pointer; }
.sh-page .shelf-cover { display: block; width: 100%; aspect-ratio: 148 / 210; object-fit: cover; }
.sh-page .shelf-meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.sh-page .shelf-meta .shelf-vis { color: var(--fo-ink); }
.sh-page .shelf-stale { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-red); }

/* ---- The reader ---- */
.pgstack-page.bk-reader, .pgstack-page.bk-reader .pgstack-body { background: var(--fo-paper); }
.pgstack-page.bk-reader .pgstack-body { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.bk-reader .bk-stale { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px var(--fo-gutter) 0; padding: 12px 14px; background: var(--fo-band); }
.bk-reader .bk-stale p { margin: 0; font-size: 12px; line-height: 1.5; }
.bk-reader .bk-desk { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 20px var(--fo-gutter) 12px; -webkit-touch-callout: none; user-select: none; }
/* The book is laid out to its width; its height follows (an A5 page is 1.414 high), so its width is held to what the
   height left for it allows, one page upright and a spread sideways. */
.bk-reader .bk-book { width: 100%; max-width: min(1000px, calc((100dvh - 240px) / 1.414)) !important;   /* !important: page-flip writes its own max-width on the element */ transition: transform .45s ease; filter: drop-shadow(0 10px 18px rgba(26,22,20,0.16)); }
.bk-reader .bk-pg { background: #FDFCFA; overflow: hidden; }
.bk-reader .bk-pg img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Turned back in portrait, the page comes out of the spine, not in from beside the book (2026-09-18). */
.bk-reader .stf__wrapper.--portrait .stf__block { overflow: hidden; }
.bk-reader .bk-book.closed-front { transform: translateX(-25%); clip-path: inset(0 0 0 50%); }
.bk-reader .bk-book.closed-back { transform: translateX(25%); clip-path: inset(0 50% 0 0); }
@media (prefers-reduced-motion: reduce) { .bk-reader .bk-book { transition: none; } }
.bk-reader .bk-loupe { position: absolute; z-index: 5; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid var(--fo-ink); background-color: #FDFCFA; background-repeat: no-repeat; pointer-events: none; }
.bk-reader .bk-loupe[hidden] { display: none; }
/* The board's toolbar: a row between two dashed rules, all pages · ‹ n / N › · whole screen. */
.bk-reader .bk-bar { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 0 var(--fo-gutter); border-top: 1px dashed var(--fo-hair); border-bottom: 1px dashed var(--fo-hair); color: var(--fo-ink); }
.bk-reader .bk-bar__mid { display: flex; align-items: center; gap: 4px; }
.bk-reader .bk-tool { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-reader .bk-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-reader .bk-tool:disabled { opacity: .3; cursor: default; }
.bk-reader .bk-tool:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: -4px; }
.bk-reader .bk-count { min-width: 64px; text-align: center; font-family: var(--fo-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-reader .bk-foot { flex: none; display: flex; justify-content: space-between; gap: 12px; margin: 8px var(--fo-gutter) calc(14px + env(safe-area-inset-bottom, 0px)); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.bk-reader .bk-turn { display: none; }
/* More: a card hanging from the bar's right, the page dimmed behind it. */
.bk-reader .bk-menu { position: absolute; z-index: 6; top: 4px; right: var(--fo-gutter); width: min(260px, calc(100% - 2 * var(--fo-gutter))); box-sizing: border-box; padding: 2px 12px; border: 1px dashed var(--fo-hair-firm); background: var(--fo-card); box-shadow: 0 0 0 100vmax rgba(26,22,20,0.16); }
.bk-reader .bk-menu[hidden] { display: none; }
.bk-reader .bk-menu-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px 0; box-sizing: border-box; border: none; border-top: 1px dashed var(--fo-hair); background: none; font: inherit; font-size: 14px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.bk-reader .bk-menu > .bk-menu-row:first-child { border-top: none; }
.bk-reader .bk-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-reader .bk-menu-hint { font-size: 12px; color: var(--fo-graphite); }
.bk-reader .bk-menu-value { display: inline-flex; align-items: center; gap: 6px; }
.bk-reader .bk-menu-head { cursor: default; }
.bk-reader .bk-menu-kinds { padding-left: 12px; }
.bk-reader .bk-menu-kind { justify-content: space-between; }
.bk-reader .bk-menu-row.is-soon { cursor: default; color: var(--fo-pale); }
.bk-reader .bk-menu-row.is-soon .bk-menu-hint { color: var(--fo-pale); }
.bk-reader .bk-menu-row:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: -2px; }

/* The whole screen (BookReader · whole screen, BookSpread): the book on the ink, the bar a pill under it; sideways, the
   pill stands at the right. The page's own head is not shown. */
.pgstack-page.bk-reader:fullscreen, .pgstack-page.bk-reader:fullscreen .pgstack-body { background: var(--fo-ink); }
.pgstack-page.bk-reader:fullscreen .pgstack-header, .pgstack-page.bk-reader:fullscreen .bk-stale, .pgstack-page.bk-reader:fullscreen .bk-foot, .pgstack-page.bk-reader:fullscreen .bk-menu { display: none; }
.pgstack-page.bk-reader:fullscreen .bk-book { max-width: calc((100dvh - 150px) / 1.414) !important; filter: drop-shadow(0 14px 28px rgba(0,0,0,0.5)); }
.pgstack-page.bk-reader:fullscreen .bk-bar { align-self: center; margin: 0 0 calc(22px + env(safe-area-inset-bottom, 0px)); padding: 0 10px; border: 1px solid rgba(253,252,250,0.25); border-radius: 999px; color: var(--fo-card); }
.pgstack-page.bk-reader:fullscreen .bk-tool:focus-visible { outline-color: var(--fo-card); }
/* The board's rule before the way out of the whole screen. */
.pgstack-page.bk-reader:fullscreen .bk-tool[data-tool="full"] { position: relative; margin-left: 8px; }
.pgstack-page.bk-reader:fullscreen .bk-tool[data-tool="full"]::before { content: ''; position: absolute; left: -4px; top: 12px; bottom: 12px; border-left: 1px solid rgba(253,252,250,0.25); }
@media (orientation: landscape) { .pgstack-page.bk-reader:fullscreen .bk-tool[data-tool="full"] { margin: 8px 0 0; } .pgstack-page.bk-reader:fullscreen .bk-tool[data-tool="full"]::before { left: 12px; right: 12px; top: -4px; bottom: auto; border-left: none; border-top: 1px solid rgba(253,252,250,0.25); } }
.pgstack-page.bk-reader:fullscreen .bk-turn { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(253,252,250,0.25); border-radius: 50%; background: none; color: var(--fo-card); cursor: pointer; }
.pgstack-page.bk-reader:fullscreen .bk-turn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (orientation: landscape) {
    .bk-reader .bk-book { max-width: min(1000px, calc((100dvh - 200px) / 1.414 * 2)) !important; }
    .pgstack-page.bk-reader:fullscreen .bk-book { max-width: calc((100dvh - 48px) / 1.414 * 2) !important; }
    .pgstack-page.bk-reader:fullscreen .pgstack-body { flex-direction: row; }
    .pgstack-page.bk-reader:fullscreen .bk-desk { padding: 20px 96px 20px 24px; }
    .pgstack-page.bk-reader:fullscreen .bk-bar { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); flex-direction: column; margin: 0; padding: 10px 0; }
    .pgstack-page.bk-reader:fullscreen .bk-bar__mid { flex-direction: column; }
    .pgstack-page.bk-reader:fullscreen .bk-count { min-width: 0; }
    .pgstack-page.bk-reader:fullscreen .bk-turn { top: auto; bottom: 18px; right: 18px; }
}

/* ---- All pages ---- */
.pgstack-page.bk-pages, .pgstack-page.bk-pages .pgstack-body { background: var(--fo-paper); }
.pgstack-page.bk-pages .pgstack-body { padding: 0 var(--fo-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
.bk-pages .bk-pages__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 0 16px; }
.bk-pages .bk-pages__head h2 { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.bk-pages figure { margin: 0 0 18px; }
.bk-pages .bk-alone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bk-pages .bk-alone .bk-thumb { width: 50%; }
.bk-pages .bk-spread__pages { display: flex; padding: 3px; border: 1px solid var(--fo-rule); background: var(--fo-bone-light); }
.bk-pages .bk-spread.is-one .bk-spread__pages { width: 50%; }
.bk-pages .bk-spread__pages .bk-thumb { flex: 1 1 0; min-width: 0; }
/* The fold between the two pages of a spread. */
.bk-pages .bk-spread__pages .bk-thumb + .bk-thumb { box-shadow: inset 8px 0 8px -8px rgba(26,22,20,0.28); }
.bk-pages .bk-spread__pages .bk-thumb + .bk-thumb img { mix-blend-mode: multiply; }
.bk-pages .bk-spread__caps { display: flex; margin-top: 6px; }
.bk-pages .bk-spread__caps .bk-cap { flex: 1 1 0; text-align: center; }
.bk-pages .bk-thumb { display: block; padding: 0; border: 2px solid transparent; background: var(--fo-card); cursor: pointer; }
.bk-pages .bk-thumb img { display: block; width: 100%; aspect-ratio: 148 / 210; object-fit: cover; }
.bk-pages .bk-thumb.is-here { border-color: var(--fo-ink); }
.bk-pages .bk-thumb:focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.bk-pages .bk-cap { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.bk-pages .bk-cap.is-here { color: var(--fo-red); }
.bk-pages .mr-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.sh-page .sh-card + .sh-shelf, .sh-page .sh-shelf + .sh-shelf.is-make { margin-top: 30px; }   /* the board leaves air before the next shelf */