/* ==========================================================================
   The drawn book pages, used on the homepage and in the book builder.
   ========================================================================== */

.page { display: block; width: 100%; height: auto; overflow: hidden; }
.page .paper { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.page .frame { fill: none; stroke: var(--ink); stroke-width: 3; pointer-events: none; }

.page .rg {
  fill: #fff;
  stroke: var(--ink);
  stroke-linejoin: round;
  transition: fill 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.page .rg.on { fill: var(--f); }
.page .rg.hot { fill: color-mix(in srgb, var(--f) 28%, #fff); }

/* "Show it coloured in" washes across the page, shape by shape */
.page.is-coloured .rg { fill: var(--f); transition-delay: calc(var(--o) * 10ms); }
.page.is-thumb .rg { transition: none; }

.page .ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.page .dot { fill: var(--ink); pointer-events: none; }
.page .glint { fill: #fff; pointer-events: none; }
.page .lens { fill: none; stroke: var(--ink); stroke-width: 3; pointer-events: none; }
.page .cheek { fill: #FF7F93; opacity: 0.45; stroke: none; pointer-events: none; }

.page .n {
  font-family: var(--display);
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}
.page.is-coloured .n, .page .n.off, .page.is-thumb .n { display: none; }

.page .caption {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  fill: var(--ink);
  text-anchor: middle;
}
.page .pageno { font-family: var(--body); font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.page.is-thumb .pageno { display: none; }
.page .keychip { stroke: var(--ink); stroke-width: 2.4; }
.page .keynum { font-family: var(--display); font-weight: 800; font-size: 13px; text-anchor: middle; pointer-events: none; }

.page .cover-board { stroke: var(--ink); stroke-width: 3; }
.page .spine { fill: rgba(34, 48, 94, 0.25); stroke: var(--ink); stroke-width: 3; }
.page .cover-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 54px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 6px;
  paint-order: stroke;
  text-anchor: middle;
}
.page .cover-plate { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.page .cover-book {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  fill: var(--ink);
  text-anchor: middle;
}
.page .note { fill: #fff; stroke: var(--ink); stroke-width: 2.6; }
.page .note-text {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  fill: var(--ink);
  text-anchor: middle;
}