/* /voices, The Book of Tellers (lib/voices-book.js, LOR-1348): the site's parchment page (chronicle.css .ch-sheet and the
   --pg-* tokens, so it follows light and dark) laid out as an open book on one player, with ribbons and the Cast. */
.bw .bw-in.vp-page:has(> .vb) { max-width: 1100px; }   /* the site's own column, as wide as the header over it */
.vb { display: grid; gap: 32px; padding-bottom: 40px; font-size: 1.05rem; }
.vb :where(h1, h2, h3, p) { margin: 0; }
:where(.vb button) { font: inherit; cursor: pointer; }
body.vb-listening { padding-bottom: 72px; }

.vb-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.vb-pitch { font: 1.3rem/1.3 "Alegreya", Georgia, serif; color: var(--h-text); }
.vb-record { margin-top: 4px !important; color: var(--h-text); font-size: 1rem; }
.vb-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.vb-langs button { min-height: 44px; padding: 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--h-text); font-weight: 500; }
.vb-langs button[aria-pressed="true"] { color: var(--h-acc-hi); border-color: var(--h-acc-hi); }

.vb-book { position: relative; background: var(--g-leather); border: 1px solid var(--pg-rim); border-radius: 6px; padding: 26px 12px 12px; }
.vb-tab { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 3px 18px; background: var(--g-leather); border: 1px solid var(--pg-rim);
  border-radius: 3px; color: var(--pg-title); font: 700 0.86rem/1.3 var(--h-display, "Cinzel", Georgia, serif); letter-spacing: 0.05em; white-space: nowrap; }
.vb-spread { display: grid; grid-template-columns: minmax(0, 1fr) 46px; }
.vb-spread.vb-no-ribbons { grid-template-columns: minmax(0, 1fr); }
.vb-leaves { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-width: 0; }
.vb-leaf { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 28px 30px; }
.vb-leaf + .vb-leaf { border-left: 3px solid var(--pg-rim); }

.vb-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vb-seal { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--pg-edge); border-radius: 50%;
  color: var(--pg-note); font: 700 1.2rem/1 var(--h-display, serif); }
.vb-told { color: var(--pg-note); font: 600 0.82rem/1.2 var(--h-display, serif); letter-spacing: 0.08em; }
.bw .bw-in .vb-name { margin: 0; font: 700 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--h-display, serif); color: var(--pg-title); overflow-wrap: anywhere; }
.vb-line { color: var(--pg-ink); font-size: 0.98rem; }
.vb-also, .vb-getbox { border-top: 1px solid var(--pg-line); padding-top: 14px; }
.bw .bw-in .vb-also h3 { margin: 0 0 6px; color: var(--pg-note); font: 600 0.82rem/1.2 var(--h-display, serif); letter-spacing: 0.06em; }
.vb-also ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font: 1.1rem/1.35 "Alegreya", Georgia, serif; }
.vb-also li::before { content: "\25C6"; margin-right: 8px; color: var(--pg-title); font-size: 0.6em; vertical-align: 2px; }
.vb-more { margin-top: 6px !important; color: var(--pg-note); font-size: 1rem; line-height: 1.35; }
.vb-getbox { display: grid; gap: 8px; }
.vb-getrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vb-size { color: var(--pg-ink); font-size: 0.95rem; }
.vb-copy { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--pg-title); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.vb-steps { display: grid; gap: 2px; margin: 0; padding-left: 20px; font-size: 1rem; }
.vb-small { font-size: 1rem; }
.vb-small a { font-weight: 700; }

.bw .bw-in .vb-place { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--h-display, serif); color: var(--pg-title); }
.vb-listen { justify-self: start; gap: 10px; }
.vb-listen, .vb-get { min-height: 48px; padding: 0 22px; font-size: 1.15rem; }
.vb-listen svg, .vb-pl svg, .vb-play svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.vb-listen small { font-size: 0.95rem; font-weight: 400; opacity: 0.85; }
.vb-text { max-height: 400px; overflow-y: auto; padding-right: 8px; font: 1.14rem/1.5 "Alegreya", Georgia, serif; }
.vb-text:not(.vb-plain)::first-letter { float: left; padding: 5px 8px 0 0; color: var(--pg-title); font: 700 3.5em/0.82 var(--h-display, serif); }

.vb-ribbons { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0 3px; }
.vb-ribbons:empty { display: none; }
.vb-ribbons button { writing-mode: vertical-rl; min-height: 88px; padding: 10px 8px; background: var(--pg-chip); border: 1px solid var(--pg-edge); border-left: 0;
  border-radius: 0 4px 4px 0; color: var(--pg-ink); font-weight: 700; font-size: 0.86rem; line-height: 1; white-space: nowrap; }
.vb-ribbons button[aria-selected="true"] { background: var(--pg-btn); border-color: var(--pg-btn); color: var(--pg-btn-ink); }

.vb-cast { display: grid; gap: 14px; padding: 26px 28px; }
.bw .bw-in .vb-cast h2 { margin: 0; font: 700 1.4rem/1.2 var(--h-display, serif); }
.bw .bw-in .vb-cast h3 { margin: 8px 0 0; font: 700 1rem/1.2 var(--h-display, serif); }
.vb-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.vb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; }
.vb-play { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--pg-rim); border-radius: 50%; background: transparent; color: var(--pg-title); }
.vb-bill { grid-column: 2; display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--pg-note); font: 1.08rem/1.3 "Alegreya", Georgia, serif; }
.vb-dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--pg-line); transform: translateY(-4px); }
.vb-bill :is(b, a) { color: var(--pg-ink); font: 700 1.08rem/1.2 var(--h-display, serif); }
.vb-bill a { color: var(--pg-title); text-decoration: underline; text-underline-offset: 3px; }
.vb-tail { text-align: right; }
.vb-note { grid-column: 2; margin-top: -2px !important; padding-bottom: 6px; color: var(--pg-note); font-size: 1rem; }

.vb-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--a-bar); border-top: 1px solid var(--pg-rim); color: var(--a-bar-ink); }
.vb-pl { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--a-bar-gold); color: #120f0b; cursor: pointer; }
.vb-now { font: 600 0.95rem/1.2 var(--h-display, serif); overflow-wrap: anywhere; }
.vb-bar { display: block; height: 3px; margin-top: 8px; background: #ffffff22; overflow: hidden; }
.vb-bar i { display: block; height: 100%; width: 0; background: var(--a-bar-gold); }

@media (max-width: 760px) {
  .vb-book { padding: 24px 8px 8px; }
  .vb-spread, .vb-spread.vb-no-ribbons { grid-template-columns: minmax(0, 1fr); }
  .vb-ribbons { order: -1; flex-direction: row; flex-wrap: wrap; padding: 0 0 8px; }
  .vb-ribbons button { writing-mode: horizontal-tb; min-height: 44px; padding: 0 12px; border: 1px solid var(--pg-edge); border-radius: 4px; }
  .vb-leaves { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px; }
  .vb-leaf { display: contents; }
  .vb-who { order: 1; } .vb-label { order: 2; } .vb-place { order: 3; margin-top: -8px !important; } .vb-listen { order: 4; }
  .vb-text { order: 5; max-height: none; } .vb-also { order: 6; } .vb-getbox { order: 7; }
  .vb-cast { padding: 20px 16px; }
  .vb-bill { flex-wrap: wrap; }
  .vb-tab { font-size: 0.78rem; }
}