/* BusayoDisu.com | the flipbook (js/flipbook.js)
   =====================================================================
   A book open on a table. What makes it read as a book and not as two
   pictures side by side is the middle, so most of this file is the middle:

     THE GUTTER   Each page curves down into the spine. That is a gradient
                  that is darkest at the fold and fades over the first tenth
                  of the page, with a faint lift of light just beyond it
                  where the paper bows up. The leaf that turns carries the
                  same fold on its own faces, so the gutter never changes
                  between rest and motion.
     THE SPINE    A narrow valley down the exact centre, over the two pages.
     THE BLOCK    A page block on each side: the stack of edges on the left
                  is what has been read and on the right what is left, and
                  they grow and shrink as the book is read through.
     THE TURN     One sheet hinged at the spine, rotating in perspective. Its
                  two faces darken as it rises, and it throws a shadow onto
                  the page it is passing over. js/flipbook.js drives the
                  angle, so a finger and a tap turn the page the same way.

   Written on the Hub's own dark desk, with its own literal colours rather
   than the site's tokens (the Hub wears data-theme="dark", which repoints
   them). Everything stops moving under prefers-reduced-motion.
   ===================================================================== */

.bk {
  --fb-ink: #efe6d4;
  --fb-soft: #b9ab92;
  --fb-gold: #d9b368;
  --fb-paper: #f5eddc;
  --fb-bar: 56px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--fb-ink);
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, #3b2d21 0%, #241a12 48%, #120d09 100%);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
.bk button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk button:focus-visible, .bk input:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 2px; border-radius: 8px; }
.bk-fail { padding: 28px; color: #C6D2DC; text-align: center; }

/* ---- bars ---- */
.bk-top, .bk-bottom {
  position: absolute; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 2px; padding: 0 8px;
  height: var(--fb-bar);
}
.bk-top { top: 0; background: linear-gradient(rgba(12, 8, 5, .88), rgba(12, 8, 5, 0)); }
.bk-bottom { bottom: 0; gap: 6px; padding: 0 10px; background: linear-gradient(rgba(12, 8, 5, 0), rgba(12, 8, 5, .88)); }
.bk-key {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  transition: background-color .15s ease, opacity .15s ease;
}
.bk-key svg { width: 22px; height: 22px; }
.bk-key:hover { background: rgba(255, 255, 255, .1); }
.bk-key:disabled { opacity: .3; cursor: default; background: transparent; }
.bk-heading { display: flex; flex-direction: column; min-width: 0; padding-left: 4px; line-height: 1.2; }
.bk-book-title { font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-size: 1.12rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-where { font-size: 12px; color: var(--fb-soft); min-height: 1em; }
.bk-gap { flex: 1 1 auto; }

.bk-scrub {
  flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  --played: 0%;
}
.bk-scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fb-gold) var(--played), rgba(255, 255, 255, .2) var(--played)); }
.bk-scrub::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.bk-scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fb-gold); }
.bk-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--fb-ink); border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.bk-scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--fb-ink); border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* ---- the table ---- */
.bk-stage {
  position: absolute; left: 0; right: 0; top: var(--fb-bar); bottom: var(--fb-bar);
  display: flex; align-items: center; justify-content: center;
}
.bk-shift { flex: none; }
.bk-zone { position: absolute; inset: 0; z-index: 5; touch-action: none; cursor: pointer; }
.bk.dragging .bk-zone { cursor: grabbing; }

/* ---- the book ---- */
.bk-book {
  position: relative;
  /* No perspective here on purpose. The turning leaf carries its own
     (perspective() in its transform, set by js/flipbook.js), so the pages at
     rest are plain flat boxes and not part of a 3D scene, where some
     browsers lose them until something moves. */
  --tl: 0px; --tr: 0px;
}
.bk-book.hop { animation: bk-hop .26s ease; }
@keyframes bk-hop { from { opacity: .35; } to { opacity: 1; } }

.bk-page, .bk-fwrap {
  position: absolute; top: 0;
  width: var(--pw); height: var(--ph);
  background: var(--fb-paper);
}
.bk-page.l { left: 0; border-radius: 3px 0 0 3px; }
.bk-page.r { left: var(--pw); border-radius: 0 3px 3px 0; }
.bk[data-mode="single"] .bk-page.l { display: none; }
.bk[data-mode="single"] .bk-page.r { left: 0; }
.bk-page[data-kind="none"] { display: none; }

/* The book's weight on the table, under each page that is there. */
.bk-page.on { box-shadow: 0 26px 44px -10px rgba(0, 0, 0, .7), 0 5px 12px rgba(0, 0, 0, .5); }

/* One sheet, hinged on the spine edge, two faces back to back. */
.bk-leaf {
  position: absolute; top: 0; left: var(--pw);
  width: var(--pw); height: var(--ph);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  display: none;
  z-index: 6; /* set per leaf by the script while it is in the air */
  pointer-events: none;
}
.bk[data-mode="single"] .bk-leaf { left: 0; }
.bk-fwrap {
  left: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.bk-fwrap.f { border-radius: 0 3px 3px 0; }
.bk-fwrap.b { transform: rotateY(180deg); border-radius: 0 3px 3px 0; }

.bk-face { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#f8f1e2, #f1e8d4); }
.bk-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.bk-face.ready .bk-canvas { opacity: 1; }
/* The leaf and the page it is handed to must match to the pixel, so a
   canvas that has been drawn is never faded in again. */
.bk-fwrap .bk-canvas { transition: none; }
.bk-face::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .08); pointer-events: none; }

/* ---- the gutter ---- */
.bk-g, .bk-sh, .bk-cast { position: absolute; inset: 0; pointer-events: none; }
.role-r .bk-g {
  background:
    linear-gradient(to right,
      rgba(18, 9, 2, .66) 0, rgba(18, 9, 2, .38) .7%, rgba(18, 9, 2, .2) 2%,
      rgba(18, 9, 2, .09) 4%, rgba(18, 9, 2, .03) 7%, rgba(18, 9, 2, 0) 10%),
    linear-gradient(to right, rgba(255, 249, 232, 0) 7%, rgba(255, 249, 232, .12) 12%, rgba(255, 249, 232, 0) 21%);
}
.role-l .bk-g {
  background:
    linear-gradient(to left,
      rgba(18, 9, 2, .66) 0, rgba(18, 9, 2, .38) .7%, rgba(18, 9, 2, .2) 2%,
      rgba(18, 9, 2, .09) 4%, rgba(18, 9, 2, .03) 7%, rgba(18, 9, 2, 0) 10%),
    linear-gradient(to left, rgba(255, 249, 232, 0) 7%, rgba(255, 249, 232, .12) 12%, rgba(255, 249, 232, 0) 21%);
}

/* The valley down the exact middle of an open book. */
.bk-spine {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%;
  width: calc(var(--pw) * .085);
  transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(10, 5, 0, 0) 0, rgba(10, 5, 0, .16) 28%, rgba(10, 5, 0, .52) 46%,
    rgba(6, 3, 0, .74) 50%, rgba(10, 5, 0, .52) 54%, rgba(10, 5, 0, .16) 72%, rgba(10, 5, 0, 0) 100%);
  opacity: 0; pointer-events: none;
}
.bk[data-mode="single"] .bk-spine { display: none; }

/* ---- light and shadow while a page is in the air ---- */
.bk-sh { opacity: 0; }
.role-r .bk-sh { background: linear-gradient(to right, rgba(20, 10, 0, 0) 0, rgba(20, 10, 0, .9) 100%); }
.role-l .bk-sh { background: linear-gradient(to left, rgba(20, 10, 0, 0) 0, rgba(20, 10, 0, .9) 100%); }
.bk-cast { opacity: 0; }
.bk-page.r .bk-cast { background: linear-gradient(to right, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 90%); }
.bk-page.l .bk-cast { background: linear-gradient(to left, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 90%); }

/* ---- the block of pages on each side ---- */
.bk-stack {
  position: absolute; top: 3px; height: calc(100% - 6px);
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
}
.bk-stack.l {
  left: 0; width: var(--tl); transform: translateX(-100%);
  background: repeating-linear-gradient(to left, #f4ecda 0 1px, #cbbd9f 1px 2px);
  border-radius: 3px 0 0 3px;
  box-shadow: inset 1px 0 0 rgba(40, 25, 5, .35);
}
.bk-stack.r {
  right: 0; width: var(--tr); transform: translateX(100%);
  background: repeating-linear-gradient(to right, #f4ecda 0 1px, #cbbd9f 1px 2px);
  border-radius: 0 3px 3px 0;
  box-shadow: inset -1px 0 0 rgba(40, 25, 5, .35);
}
.bk[data-mode="single"] .bk-stack.l { display: none; }
.bk.dragging .bk-stack { transition-duration: .4s; }

/* ---- the ribbon ---- */
.bk-ribbon {
  position: absolute; z-index: 30000; top: 0; left: calc(100% - 44px); width: 20px; height: 30px;
  color: #B85E3C; pointer-events: none;
  transform: translateY(-115%); opacity: 0;
  transition: transform .34s cubic-bezier(.3, 1.5, .5, 1), opacity .2s ease;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.bk-ribbon.on { transform: translateY(-3px); opacity: 1; }
.bk-ribbon svg { width: 100%; height: 100%; display: block; }

/* ---- hint, screen-reader words ---- */
.bk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bk-hint {
  position: absolute; z-index: 9; left: 50%; bottom: 14px; transform: translate(-50%, 10px);
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px;
  background: rgba(20, 14, 9, .92); color: var(--fb-ink); font-size: 13px; text-align: center;
  border: 1px solid rgba(217, 179, 104, .3);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.bk-hint.on { opacity: 1; transform: translate(-50%, 0); }
.bk-hint[hidden], .bk-panel[hidden], .bk-scrim[hidden], .bk-open[hidden], .bk-key[hidden] { display: none; }

/* ---- the Contents and Bookmarks drawer ---- */
.bk-scrim { position: absolute; inset: 0; z-index: 14; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .24s ease; }
.bk-scrim.on { opacity: 1; }
.bk-panel {
  position: absolute; z-index: 15; top: calc(var(--fb-bar) + 4px); right: 8px;
  width: min(380px, calc(100% - 16px)); max-height: calc(100% - var(--fb-bar) * 2 - 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #1c1510; color: var(--fb-ink);
  border: 1px solid rgba(217, 179, 104, .25); border-radius: 14px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.bk-panel.on { opacity: 1; transform: none; }
.bk-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bk-tabs button[role="tab"] { border: 0; background: transparent; padding: 10px 12px; font-size: 14px; color: var(--fb-soft); border-bottom: 2px solid transparent; }
.bk-tabs button[aria-selected="true"] { color: var(--fb-ink); border-bottom-color: var(--fb-gold); }
.bk-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; }
.bk-toc { list-style: none; margin: 0; padding: 6px 0 10px; overflow: auto; }
.bk-toc li { display: flex; align-items: center; }
.bk-toc li > button:first-child {
  flex: 1 1 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  min-height: 44px; padding: 8px 18px; text-align: left; border: 0; background: transparent; font-size: 15px;
}
.bk-toc li > button:first-child:hover { background: rgba(255, 255, 255, .06); }
.bk-toc em { font-style: normal; font-size: 12.5px; color: var(--fb-soft); flex: none; }
.bk-toc .here span { color: var(--fb-gold); }
.bk-del { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; color: var(--fb-soft); }
.bk-empty { margin: 0; padding: 22px 20px; font-size: 14px; color: var(--fb-soft); }

/* ---- opening ---- */
.bk-open {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #3b2d21 0%, #241a12 48%, #120d09 100%);
  padding: 24px; text-align: center; transition: opacity .4s ease;
}
.bk-open.gone { opacity: 0; pointer-events: none; }
.bk-open-word { margin: 0; font-size: 13px; color: var(--fb-soft); max-width: 36ch; }

@media (max-width: 600px) {
  .bk { --fb-bar: 52px; }
  .bk-book-title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-stack, .bk-ribbon, .bk-panel, .bk-scrim, .bk-hint, .bk-open { transition: none; }
  .bk-book.hop { animation: none; }
}

/* ---- the Hub's stage while a book is on its way ---------------------
   The Hub's own screen is navy. A book gets its desk from the first frame,
   so opening one is brown the whole way and never blue-then-brown. */
.hub-stage.bookish,
.hub-stage.reading {
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #3b2d21 0%, #241a12 48%, #120d09 100%);
}
.hub-stage.bookish .hub-bar,
.hub-stage.bookish .hub-feet { display: none; }
.hub-stage.bookish .hub-frame { background: transparent; box-shadow: none; border: 0; }
.hub-stage.bookish .hub-waiting { color: #b9ab92; }

/* ---- the finger that shows how a page turns ------------------------- */
.bk-finger {
  position: absolute; left: 0; top: 0; z-index: 12;
  width: 76px; height: 76px;
  pointer-events: none; opacity: 0;
  color: rgba(255, 255, 255, .72);
  transition: opacity .35s ease, transform .0s;
  will-change: transform;
}
.bk-finger.on { opacity: 1; }
.bk-finger svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
  transform-origin: 36.4px 15.8px;
  transition: transform .2s ease;
}
.bk-finger.press svg { transform: scale(.9); }
/* Where it touches: a soft pool of light that swells as the finger presses. */
.bk-touch {
  position: absolute; left: 8.4px; top: -12.2px; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 179, 104, .55) 0, rgba(217, 179, 104, .22) 45%, rgba(217, 179, 104, 0) 70%);
  transform: scale(.4); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.bk-finger.press .bk-touch { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bk-finger { display: none; } }

/* ---- the loading picture: a small book whose pages turn ------------- */
.bk-loader { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.bk-lbook {
  position: relative; width: 148px; height: 104px;
  perspective: 520px;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
.bk-lpage, .bk-lleaf {
  position: absolute; top: 0; width: 74px; height: 104px; display: block;
  background: linear-gradient(#f8f1e2, #efe5d0);
}
.bk-lpage.l { left: 0; border-radius: 3px 0 0 3px; background: linear-gradient(to left, #cdbf9f 0, #efe5d0 22%, #f8f1e2 100%); }
.bk-lpage.r { left: 74px; border-radius: 0 3px 3px 0; background: linear-gradient(to right, #cdbf9f 0, #efe5d0 22%, #f8f1e2 100%); }
/* A few faint lines of text on each page, so they read as pages. */
.bk-lpage::after {
  content: ""; position: absolute; left: 14px; right: 12px; top: 18px; bottom: 18px; opacity: .5;
  background: repeating-linear-gradient(to bottom, #b8a88a 0 2px, transparent 2px 9px);
}
.bk-lpage.r::after { left: 12px; right: 14px; }
.bk-lleaf {
  left: 74px; border-radius: 0 3px 3px 0;
  transform-origin: 0 50%;
  background: linear-gradient(to right, #d9cbaa 0, #f3ead7 18%, #fbf5e8 100%);
  -webkit-backface-visibility: visible; backface-visibility: visible;
  animation: bk-lturn 3.4s cubic-bezier(.5, 0, .25, 1) var(--d, 0s) infinite;
}
.bk-lspine {
  position: absolute; left: 73px; top: 0; width: 2px; height: 104px;
  background: linear-gradient(rgba(60, 38, 12, .55), rgba(60, 38, 12, .8)); z-index: 5;
}
/* Each leaf lifts, crosses, lies a moment on the left, and slips out of sight
   so the cycle can begin again without a visible jump. */
@keyframes bk-lturn {
  0%   { transform: perspective(520px) rotateY(0deg); opacity: 1; }
  34%  { transform: perspective(520px) rotateY(-180deg); opacity: 1; }
  80%  { transform: perspective(520px) rotateY(-180deg); opacity: 1; }
  88%  { transform: perspective(520px) rotateY(-180deg); opacity: 0; }
  89%  { transform: perspective(520px) rotateY(0deg); opacity: 0; }
  100% { transform: perspective(520px) rotateY(0deg); opacity: 1; }
}
.bk-lbook.still .bk-lleaf { animation: none; }
.bk-ltitle {
  margin: 0; max-width: min(80vw, 28ch); text-align: center;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 600; letter-spacing: .01em; color: #efe6d4;
  animation: bk-lbreathe 2.4s ease-in-out infinite;
}
@keyframes bk-lbreathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.bk-open-word { margin: 18px 0 0; font-size: 13px; color: #b9ab92; max-width: 36ch; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .bk-lleaf, .bk-ltitle { animation: none; }
  .bk-lleaf:nth-of-type(2) { transform: perspective(520px) rotateY(-30deg); }
}