/* ── THE BOOK ───────────────────────────────────────────────────────────────
   Neal asked for the Minecraft book, twice, and what I built the first time was
   a reading page with a frame drawn around it. That is not the same thing.
   Minecraft gives you an OBJECT: a shut book you click, which opens into a
   contained panel — wooden edge, flat cream leaf, two clear pages, a small
   arrow each side and a page number. It is not a document viewer wearing a
   costume; it is a book sitting on the screen.

   So this is written from nothing rather than patched onto the old reader, and
   it owns its own pagination. Everything here is either the shut book, the open
   book, or the type inside it. */

.bk-stage {
  /* The perspective lives here, on the parent, so .bk-closed can hinge about
     its spine. With perspective() inside the child's own transform the vanishing
     point travels with the element and a rotation about its left edge reads as a
     flat squash instead of a door opening. */
  perspective: 1900px;
  perspective-origin: 50% 50%;
  /* the cover is laid over the spread while it swings */
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.4vw, 20px);
  box-sizing: border-box;
}

/* ── shut ─────────────────────────────────────────────────────────────────
   Standing, slightly turned, and it invites a click. The colour is the
   record's own .cover-* class, so the book you clicked on the shelf is the
   book that opens. */
.bk-closed {
  position: relative;
  width: min(300px, 62vw);
  aspect-ratio: 5 / 7;
  border-radius: 3px 8px 8px 3px;
  cursor: pointer;
  border: none;
  padding: 0;
  color: #f3e3bd;
  font-family: Georgia, 'Times New Roman', serif;
  box-shadow:
    inset -10px 0 18px rgba(0, 0, 0, 0.42),
    inset 2px 0 0 rgba(255, 246, 214, 0.14),
    10px 14px 30px rgba(0, 0, 0, 0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
  transform: rotateY(-11deg);
  transform-style: preserve-3d;
}
.bk-closed:hover, .bk-closed:focus-visible {
  transform: rotateY(-5deg) translateY(-4px);
  box-shadow:
    inset -10px 0 18px rgba(0, 0, 0, 0.42),
    inset 2px 0 0 rgba(255, 246, 214, 0.18),
    14px 20px 40px rgba(0, 0, 0, 0.5);
  outline: none;
}
/* the sewn spine down the hinge edge */
.bk-closed::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 26px;
  background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0) 85%);
  border-right: 1px solid rgba(255, 246, 214, 0.12);
}
.bk-closed__plate {
  position: absolute;
  inset: 12% 10% 12% 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  border-top: 1px solid rgba(214, 176, 92, 0.55);
  border-bottom: 1px solid rgba(214, 176, 92, 0.55);
  padding: 1.1rem 0;
}
.bk-closed__title {
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  font-weight: 700;
  line-height: 1.22;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.bk-closed__author { font-size: 0.8rem; opacity: 0.82; }
.bk-closed__open {
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* ── open ─────────────────────────────────────────────────────────────────
   The panel. A wooden edge, and inside it one flat cream leaf folded down the
   middle — not two floating cards, because a real spread is one sheet. */
.bk-open {
  /* The reading page is the whole window and the book should use it. The cap is
     a reading measure, not a layout limit: past about 1600px the lines on each
     page get too long to track, so the book stops growing sideways and takes the
     height instead. On the record page .bk-stage--inline overrides both. */
  width: min(1600px, 97vw);
  aspect-ratio: 16 / 10;
  max-height: 94dvh;
  border-radius: 7px;
  padding: clamp(10px, 1.5vw, 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.9vw, 12px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 214, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.45);
  /* Hinged on the left, like the cover that just came off it, so the spread
     reads as the next thing to swing rather than a panel fading up. */
  transform-origin: left center;
  animation: bk-open 240ms cubic-bezier(0.25, 0.7, 0.35, 1) both;
}
/* No fade. The pages are already there under the cover — they should be as solid
   as everything else while the board lifts off them. */
@keyframes bk-open {
  from { transform: rotateY(-34deg); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bk-open { animation: none; } }

/* the spread: arrow, leaf, arrow */
.bk-open__row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.bk-leaf {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  background: #f6efdb;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(122, 92, 44, 0.3);
  overflow: hidden;
}
/* the fold */
.bk-leaf::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 34px; margin-left: -17px;
  background: linear-gradient(90deg,
    rgba(122,92,44,0) 0%, rgba(122,92,44,0.10) 34%,
    rgba(98,70,26,0.26) 50%, rgba(122,92,44,0.10) 66%, rgba(122,92,44,0) 100%);
  pointer-events: none;
  z-index: 2;
}

.bk-page {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  padding: clamp(18px, 2.6vw, 40px) clamp(16px, 2.4vw, 38px) clamp(34px, 4vw, 52px);
  box-sizing: border-box;
  overflow: hidden;
  /* A column so the text body fills the page's content box exactly. That box is
     what the paginator measures against; if the body is auto-height it measures
     zero and every block lands on a page of its own. */
  display: flex;
  flex-direction: column;
  font-family: Georgia, 'Times New Roman', serif;
  color: #2a2013;
  /* --bk-scale is what A+/A- moves; it defaults to 1 so the page is unaffected
     until someone asks for bigger type. */
  font-size: calc(clamp(0.92rem, 1.08vw, 1.06rem) * var(--bk-scale, 1));
  line-height: 1.66;
}
/* the corner marks Minecraft draws on its leaf */
.bk-page::before, .bk-page::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(150, 118, 62, 0.36);
  pointer-events: none;
}
.bk-page::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.bk-page::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.bk-page__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bk-page__body > *:first-child { margin-top: 0; }
.bk-page__body p { margin: 0 0 0.85em; }
.bk-page__body h2, .bk-page__body h3, .bk-page__body h4 {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 1.1em 0 0.5em;
}
.bk-page__no {
  position: absolute;
  bottom: clamp(12px, 1.6vw, 20px);
  left: 0; right: 0;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.68rem;
  color: #8a7448;
}

/* ── turning ──────────────────────────────────────────────────────────── */
.bk-turn {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(44px, 5vw, 64px);
  margin: 0 clamp(2px, 0.6vw, 8px);
  border: 0;
  border-radius: 3px;
  background: rgba(255, 246, 214, 0.10);
  color: #f3e3bd;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.bk-turn:hover:not(:disabled) { background: rgba(255, 246, 214, 0.2); }
.bk-turn:active:not(:disabled) { transform: translateY(1px); }
.bk-turn:disabled { opacity: 0.22; cursor: default; }

/* ── the strip under the book ─────────────────────────────────────────── */
.bk-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bk-bar a, .bk-bar button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #e8d9ae;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(214, 176, 92, 0.3);
  border-radius: 2px;
  padding: 0.34rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
}
.bk-bar a:hover, .bk-bar button:hover { background: rgba(0, 0, 0, 0.5); }
.bk-bar button.is-on { background: #6f2b1c; border-color: #8a4433; color: #f7ead0; }

/* ── paper choices. Only the leaf changes; the boards never do. ────────── */
.bk-open.paper-light .bk-leaf { background: #fdfcf8; }
/* Black on the white paper, for the same reason the dark paper takes white:
   the warm ink belongs to the Library parchment, and carried onto plain white
   it just looks like faded brown. */
.bk-open.paper-light .bk-page { color: #14120f; }
.bk-open.paper-light .bk-page::before, .bk-open.paper-light .bk-page::after { border-color: rgba(20, 18, 15, 0.26); }
.bk-open.paper-light .bk-page__no { color: rgba(20, 18, 15, 0.55); }
.bk-open.paper-dark .bk-leaf { background: #17140f; box-shadow: inset 0 0 0 1px rgba(214,176,92,0.18); }
/* White, not the warm cream the light papers use. On a near-black leaf that
   cream read as brown — it is the right ink for parchment and the wrong ink
   for a dark page. */
.bk-open.paper-dark .bk-page { color: #f4f4f4; }
.bk-open.paper-dark .bk-page::before, .bk-open.paper-dark .bk-page::after { border-color: rgba(244,244,244,0.24); }
.bk-open.paper-dark .bk-leaf::after {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.34) 34%,
    rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.34) 66%, rgba(0,0,0,0) 100%);
}
.bk-open.paper-dark .bk-page__no { color: rgba(244, 244, 244, 0.6); }

/* ── one page at a time when there is no room for two ─────────────────── */
@media (max-width: 720px) {
  .bk-open { aspect-ratio: 3 / 4; max-height: 82dvh; }
  .bk-page + .bk-page { display: none; }
  .bk-leaf::after { display: none; }
}

/* ── the book, sitting in a page rather than filling the window ─────────────
   The record page's transcript area is a section among other sections, so the
   stage cannot claim the viewport the way the reading page's does. Everything
   else about the book is the same object — same boards, same leaf, same turn
   arrows — because a book that changed shape depending on which page you found
   it on would not read as the same book. */
.bk-stage--inline {
  min-height: 0;
  padding: clamp(10px, 2vw, 22px) 0 0;
}
.bk-stage--inline .bk-open { max-height: min(78dvh, 720px); }
.bk-stage--inline .bk-closed { width: min(250px, 60vw); }
/* The book must fit the column it is set into, whatever its aspect ratio would
   otherwise make it: a book running past the edge of the record page was the
   first thing wrong with it there. */
.bk-stage--inline .bk-open { max-width: 100%; }

/* ── the scrubber ───────────────────────────────────────────────────────────
   Inside the boards, under the leaf: a long book is a physical object with a
   thickness, and the arrows alone give no sense of where in it you are. This is
   the edge of the block of pages — drag it and you flick through. */
.bk-scrub {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(4px, 0.8vw, 10px);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(243, 227, 189, 0.66);
}
.bk-scrub__range {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: none;
  cursor: pointer;
}
.bk-scrub__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 246, 214, 0.16);
}
.bk-scrub__range::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 214, 0.16);
}
/* the thumb is a stack of pages, not a dot */
.bk-scrub__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 16px;
  margin-top: -5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f6efdb 0 40%, #d9cba6 40% 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(98,70,26,0.4);
}
.bk-scrub__range::-moz-range-thumb {
  width: 13px; height: 16px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(90deg, #f6efdb 0 40%, #d9cba6 40% 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(98,70,26,0.4);
}
.bk-scrub__range:focus-visible { outline: 2px solid rgba(214, 176, 92, 0.7); outline-offset: 3px; }

/* ── the back cover ─────────────────────────────────────────────────────────
   Turning forward off the last page puts you at the back of the book, the same
   way turning back off page one puts you at the front. The board is mirrored:
   the spine is on the right now, because you are looking at the other side. */
.bk-closed--back { transform: rotateY(11deg); }
.bk-closed--back:hover, .bk-closed--back:focus-visible {
  transform: rotateY(5deg) translateY(-4px);
}
.bk-closed--back::before {
  left: auto; right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.42), rgba(0,0,0,0) 85%);
  border-right: 0;
  border-left: 1px solid rgba(255, 246, 214, 0.12);
}
.bk-closed__mark {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: rgba(243, 227, 189, 0.4);
}

/* ── the boards take the record's own colour ────────────────────────────────
   The book is bound in the same .cover-* class the shelf card uses, so the red
   book on the shelf opens as a red book and a reader who remembers the colour
   finds the record again. That part was already true — but the shelf palette is
   mixed for a 92x138 card, where #3A1818 reads as red because it sits beside
   five other cards. Blown up to a 1180px book it reads as black, and the colour
   stopped carrying any information at all.

   So the book gets a brighter tone OF THE SAME HUE. Not a different palette:
   the same seven bindings, lifted to where red is legibly red, green green and
   blue blue at the size this thing is actually drawn. The shelf is untouched. */
/* The three bindings, matched to the card's own red, green and blue. */
.bk-closed.rgb-red,   .bk-open.rgb-red   { background: linear-gradient(170deg, #C43A28, #6B1109); }
.bk-closed.rgb-green, .bk-open.rgb-green { background: linear-gradient(170deg, #2A8A49, #0E3419); }
.bk-closed.rgb-blue,  .bk-open.rgb-blue  { background: linear-gradient(170deg, #2566AE, #0C2338); }

/* The aged sheen and the deep inner shadow belong to a 92x138 shelf card, where
   they read as wear. Across a whole book they just drain the colour. */
.bk-closed.cover-aged::after, .bk-open.cover-aged::after { content: none; }

/* The inner shadow was set deep enough to swallow the colour it sits on. It is
   there to make the boards look like boards, not to tint them. */
.bk-open {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 26px rgba(0, 0, 0, 0.14),
    0 20px 50px rgba(0, 0, 0, 0.4);
}
.bk-closed {
  box-shadow:
    inset -10px 0 14px rgba(0, 0, 0, 0.18),
    inset 2px 0 0 rgba(255, 255, 255, 0.22),
    10px 14px 30px rgba(0, 0, 0, 0.42);
}
.bk-closed:hover, .bk-closed:focus-visible {
  box-shadow:
    inset -10px 0 16px rgba(0, 0, 0, 0.26),
    inset 2px 0 0 rgba(255, 246, 214, 0.2),
    14px 20px 40px rgba(0, 0, 0, 0.5);
}

/* ── the ink actually reaches the type ──────────────────────────────────────
   Setting `color` on .bk-page did nothing to the text, because the site has a
   global `p, li, … { color: var(--fkl-ink-soft) }` and a rule beats inheritance
   however close the ancestor is. So the paper toggle changed the sheet and left
   the words the same warm brown on all three — which is why dark mode read as
   brown on black. Everything in the leaf takes the page's ink. */
.bk-page__body,
.bk-page__body p,
.bk-page__body li,
.bk-page__body h1, .bk-page__body h2, .bk-page__body h3,
.bk-page__body h4, .bk-page__body h5, .bk-page__body h6,
.bk-page__body blockquote,
.bk-page__body em, .bk-page__body strong,
.bk-page__body span, .bk-page__body div {
  /* !important because the global rule is !important. Specificity does not
     enter into it: an important declaration beats a normal one at any weight,
     so the only way a page's ink reaches its own paragraphs is to match it. */
  color: inherit !important;
}

/* ── opening and closing are one gesture, run in both directions ────────────
   The book opened with a swing and then snapped shut instantly, which made
   closing feel like an error rather than a thing you did. Every transition here
   is the reverse of its opposite: the cover swings out of the way as the spread
   swings in, and closing plays that backwards.

   None of it uses `fill: both`. A filled animation keeps its last frame as an
   override, which would freeze the cover's resting tilt and kill its hover; the
   classes are removed on animationend instead, so the CSS takes the object back
   the moment the motion is over. */
/* THE COVER OPENS ON ITS SPINE.
   The first version rotated the whole shut book about its centre and faded it
   out, which looks like a card being dismissed, not a book being opened. A cover
   is hinged down one edge: it swings away from the block of pages and you watch
   the inside face of the board come round. So the origin is the spine — left for
   the front board, right for the back — and the board travels past ninety
   degrees, where it is edge-on, before it gets out of the way. */
/* Solid until the last breath. The board used to fade from the start, so the
   cover went translucent the moment you clicked and you watched a ghost turn
   instead of a board. It now holds full opacity through the whole arc and only
   disappears once it is past edge-on, where a real cover is out of sight anyway. */
@keyframes bk-cover-out {
  0%   { transform: rotateY(-11deg); opacity: 1; }
  70%  { transform: rotateY(-104deg); opacity: 1; }
  100% { transform: rotateY(-158deg); opacity: 0; }
}
@keyframes bk-cover-out-back {
  0%   { transform: rotateY(11deg); opacity: 1; }
  70%  { transform: rotateY(104deg); opacity: 1; }
  100% { transform: rotateY(158deg); opacity: 0; }
}
.bk-closed.is-opening {
  transform-origin: left center;
  animation: bk-cover-out 300ms cubic-bezier(0.45, 0.05, 0.35, 1) both;
}
.bk-closed--back.is-opening {
  transform-origin: right center;
  animation: bk-cover-out-back 300ms cubic-bezier(0.45, 0.05, 0.35, 1) both;
}
/* The face of the board goes with it. Without this the title reads backwards
   through the board for the second half of the swing. */
.bk-closed.is-opening .bk-closed__plate,
.bk-closed.is-opening .bk-closed__open,
.bk-closed.is-opening .bk-closed__mark { animation: bk-face-away 300ms linear both; }
@keyframes bk-face-away { 0%, 62% { opacity: 1; } 78%, 100% { opacity: 0; } }

/* the cover swinging back shut, the same hinge run the other way */
@keyframes bk-cover-in {
  0%   { transform: rotateY(-158deg); opacity: 0; }
  26%  { transform: rotateY(-118deg); opacity: 1; }
  100% { transform: rotateY(-11deg); opacity: 1; }
}
@keyframes bk-cover-in-back {
  0%   { transform: rotateY(158deg); opacity: 0; }
  26%  { transform: rotateY(118deg); opacity: 1; }
  100% { transform: rotateY(11deg); opacity: 1; }
}
.bk-closed.is-arriving {
  transform-origin: left center;
  animation: bk-cover-in 340ms cubic-bezier(0.3, 0.6, 0.3, 1);
}
.bk-closed--back.is-arriving {
  transform-origin: right center;
  animation: bk-cover-in-back 340ms cubic-bezier(0.3, 0.6, 0.3, 1);
}

/* the spread leaving — the open keyframe, played backwards */
@keyframes bk-shut {
  from { transform: none; opacity: 1; }
  to   { transform: rotateY(-50deg); opacity: 1; }
}
.bk-open.is-closing {
  transform-origin: left center;
  animation: bk-shut 200ms cubic-bezier(0.5, 0, 0.75, 0.5) forwards;
}

/* A turned page should settle, not blink. Short enough to stay out of the way
   of someone holding the arrow down. */
@keyframes bk-turned {
  from { opacity: 0.35; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
.bk-page__body.is-turned { animation: bk-turned 180ms ease-out; }

/* the paper toggle fades rather than flicks */
.bk-leaf { transition: background-color 240ms ease, box-shadow 240ms ease; }
.bk-page { transition: color 240ms ease; }
.bk-turn, .bk-bar button, .bk-bar a {
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease, opacity 160ms ease;
}
.bk-turn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .bk-closed.is-opening, .bk-closed.is-arriving, .bk-closed--back.is-opening,
  .bk-closed--back.is-arriving, .bk-open.is-closing, .bk-page__body.is-turned {
    animation: none;
  }
  .bk-leaf, .bk-page, .bk-turn, .bk-bar button, .bk-bar a { transition: none; }
}

/* A contents entry that goes somewhere should look like it does, without
   turning the page into a web page: the rule under it is the dotted leader a
   printed contents uses, not a hyperlink underline. */
.bk-toc-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}
.bk-toc-link:hover, .bk-toc-link:focus-visible {
  border-bottom-style: solid;
  outline: none;
}