:root {
  --paper: #f7f0e7;
  --paper-shade: #efe5d8;
  --ink: #2b1c1f;
  --blush: #c46a86;
  --serif: "Italiana", "Times New Roman", serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --display: "Nothing You Could Do", cursive;
  /* Nothing You Could Do carries no Cyrillic — Russian set in it silently comes
     out as a plain serif — so the hand that has to write these pages is Caveat */
  --hand: "Caveat", "Nothing You Could Do", cursive;
  /* Paper is not a flat fill. Close up a sheet is all tooth: pulp fibre that
     catches the light in some places and shades it in others, and that tooth
     is what the eye reads as paper rather than as a coloured rectangle. So the
     same turbulence is laid down twice, once in a warm dark and once in a warm
     white, which lets the sheet keep its own colour — a single dark noise can
     only take light away, and enough of it to be seen is enough to turn the
     paper grey. Stitched, or the seams of the tile draw a grid across the
     page; and finer across the sheet than down it, the way the grain of a
     bound page runs with the spine. */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.65' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.15 0 0 0 0 0.08 0.42 0.294 0.168 0 -0.44'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.65' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.99 0 0 0 0 0.95 0.42 0.294 0.168 0 -0.44'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23d)'/%3E%3Crect width='170' height='170' filter='url(%23l)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html,
body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

.top {
  display: flex;
  z-index: 20;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.4rem) 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}

.top a {
  color: inherit;
  text-decoration: none;
}

.top .word {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.top nav {
  display: flex;
  gap: 1.4rem;
  opacity: 0.7;
}

/* ---------- the scene: books you can pick ---------- */

.scene {
  display: flex;
  position: relative;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1rem;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

body[data-reading="true"] .scene {
  opacity: 0.25;
  filter: blur(3px);
  pointer-events: none;
}

.scene-hint {
  position: absolute;
  bottom: clamp(0.8rem, 4vh, 2.2rem);
  color: rgba(255, 248, 240, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

.pick {
  --cover-w: clamp(150px, 17vw, 230px);
  --cover-h: clamp(214px, 24vw, 320px);
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform-style: preserve-3d;
}

.table-top .pick {
  width: var(--cover-w);
  height: var(--cover-h);
}

.table-top .palette-channel { --thick: 30px; }
.table-top .palette-shop { --thick: 22px; }

/* a book as a little solid: covers, spine and a block of paper */
.tome {
  display: block;
  position: relative;
  width: var(--cover-w);
  height: var(--cover-h);
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.28, 1);
}

.tome > * { position: absolute; }

.tome-face {
  inset: 0;
  overflow: hidden;
  border-radius: 2px 5px 5px 2px;
  background: var(--book-cover);
  box-shadow: inset 5px 0 14px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tome-front {
  transform: translateZ(calc(var(--thick) / 2));
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tome-back { transform: translateZ(calc(var(--thick) / -2)); }

.tome-inside {
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(to right, #e4d8c8, #f3ebdf);
  transform: translateZ(calc(var(--thick) / 2 - 1px)) rotateY(180deg);
  backface-visibility: hidden;
}

/* the paper block, a hair inside the covers */
.tome-block {
  top: 2%;
  right: 1.5%;
  bottom: 2%;
  left: 2%;
  border-radius: 1px 3px 3px 1px;
  background:
    repeating-linear-gradient(to bottom, rgba(120, 96, 70, 0.16) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
    linear-gradient(to right, #d9cbb6, #fdf8ef 12%, #f6eee1);
  transform: translateZ(calc(var(--thick) / 2 - 3px));
}

/* the paper edges that close the solid: fore-edge and tail */
.tome-fore,
.tome-tail {
  background:
    repeating-linear-gradient(to right, rgba(120, 96, 70, 0.2) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(to bottom, #f7f0e4, #ddcfb9);
}

.tome-fore {
  top: 0;
  right: 0;
  width: var(--thick);
  height: 100%;
  transform: rotateY(90deg);
  transform-origin: right center;
}

.tome-tail {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--thick);
  transform: rotateX(-90deg);
  transform-origin: bottom center;
}

.tome-spine {
  top: 0;
  left: 0;
  width: var(--thick);
  height: 100%;
  border-radius: 3px 0 0 3px;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.08) 45%, rgba(0, 0, 0, 0.26)),
    var(--book-cover);
  transform: rotateY(-90deg) translateZ(calc(var(--thick) / -2));
  transform-origin: left center;
}

/* spine type reads bottom to top, the way it does on a shelf */
.tome-spine span {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--book-ink);
  font-family: var(--book-font);
  font-size: calc(var(--thick) * 0.38);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: lowercase;
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.tome-title {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  padding: 10%;
  color: var(--book-ink);
  text-align: center;
  transform: translateZ(calc(var(--thick) / 2 + 0.4px));
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tome-title b {
  font-family: var(--book-font);
  font-size: calc(var(--cover-w) * 0.19);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
}

.tome-title small {
  font-family: var(--serif);
  font-size: calc(var(--cover-w) * 0.062);
  letter-spacing: 0.2em;
  opacity: 0.72;
  text-transform: lowercase;
}

.tome-title em {
  width: 34%;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* the two books, told apart by colour, cloth, type and thickness */
.palette-channel {
  --book-cover: linear-gradient(150deg, #d98ca6 0%, #c46a86 46%, #a94f6c 100%);
  --book-ink: #fff2f3;
  --book-font: var(--display);
  --thick: clamp(46px, 5.2vw, 68px);
}

.palette-shop {
  --book-cover: linear-gradient(150deg, #2f4638 0%, #1f3128 52%, #16241d 100%);
  --book-ink: #ecd9a8;
  --book-font: var(--serif);
  --thick: clamp(34px, 3.9vw, 52px);
}

/* the book you picked is in your hands now, not on the shelf */
.pick[data-state="taken"] { visibility: hidden; }

/* ---------- scene a: the shelf ---------- */

.scene-shelf {
  background: radial-gradient(120% 92% at 50% 0%, #46292c 0%, #2a171b 60%, #190f11 100%);
}

.shelf {
  position: relative;
  max-width: 100%;
  padding: 0 clamp(12px, 2.6vw, 28px);
}

/* the recess the books stand in */
.shelf::before {
  position: absolute;
  z-index: 0;
  top: clamp(-46px, -5vh, -22px);
  right: -14px;
  bottom: 0;
  left: -14px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #22140f 0%, #2c1a14 40%, #1a0f0c 100%);
  content: "";
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.6),
    inset 26px 0 34px rgba(0, 0, 0, 0.42),
    inset -26px 0 34px rgba(0, 0, 0, 0.42);
}

.shelf-row {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: flex-end;
  gap: 3px;
  height: min(58vh, 430px);
}

/* on the shelf you see a book the way you really do: spine out */
.shelf .pick {
  flex: 0 1 var(--thick);
  width: var(--thick);
  min-width: 26px;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.28, 1);
}

.shelf .tome,
.shelf .tome-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transform-origin: 50% 100%;
}

.shelf .tome-face,
.shelf .tome-block,
.shelf .tome-title,
.shelf .tome-inside,
.shelf .tome-fore,
.shelf .tome-tail { display: none; }

.shelf .tome-spine {
  border-radius: 4px 3px 1px 1px;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.1) 9%, rgba(255, 255, 255, 0.035) 38%, rgba(255, 255, 255, 0.02) 70%, rgba(0, 0, 0, 0.12) 91%, rgba(0, 0, 0, 0.34) 100%),
    var(--book-cover);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.5);
}

/* the bands a bound spine carries at head and tail */
.shelf .tome-spine::after {
  position: absolute;
  inset: 7% 12%;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  content: "";
  opacity: 0.7;
  pointer-events: none;
}

.shelf .pick:hover,
.shelf .pick:focus-visible {
  transform: translateY(-18px) rotate(-1.2deg);
}

.shelf .pick[data-state="pulling"] {
  transform: translateY(-30px) scale(1.03);
  transition: transform 0.24s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.table-top .pick[data-state="pulling"] .tome {
  transform: translateZ(40px) rotateZ(-1.5deg);
  transition: transform 0.24s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.filler {
  flex: 0 1 var(--w, 22px);
  width: var(--w, 22px);
  min-width: 7px;
  height: var(--h, 84%);
  border-radius: 3px 2px 1px 1px;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.08) 12%, rgba(255, 255, 255, 0.03) 55%, rgba(0, 0, 0, 0.1) 88%, rgba(0, 0, 0, 0.38) 100%),
    var(--c, #5a4038);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.45);
}

.shelf-board {
  position: relative;
  z-index: 1;
  height: 24px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, #8a6248 0%, #5c3d2c 46%, #3c2519 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 228, 194, 0.3);
}

.shelf-shadow {
  height: 70px;
  margin-top: -6px;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* ---------- scene b: two books on a surface ---------- */

.scene-table {
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(255, 226, 200, 0.2), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #4a3327 0%, #33231b 44%, #1d1310 100%);
}

.table-top {
  display: flex;
  position: relative;
  gap: clamp(18px, 6vw, 72px);
  transform: rotateX(38deg) rotateZ(-1deg);
  transform-style: preserve-3d;
}

/* the surface they are lying on */
.table-top::before {
  position: absolute;
  z-index: -2;
  inset: -60% -40%;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.025) 0 4px, rgba(255, 255, 255, 0.012) 4px 9px),
    linear-gradient(180deg, #6b4a34 0%, #52362a 55%, #3a251c 100%);
  content: "";
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 100%);
  transform: translateZ(-10px);
}

/* lying face up, seen at a slant, each with its own shadow on the surface */
.table-top .pick .tome { transform: none; }

.table-top .pick:hover .tome,
.table-top .pick:focus-visible .tome {
  transform: translateZ(26px) rotateZ(-1.5deg);
}

.table-top .pick:nth-child(2) .tome { transform: rotateZ(2deg); }

.table-top .pick:nth-child(2):hover .tome,
.table-top .pick:nth-child(2):focus-visible .tome {
  transform: translateZ(26px) rotateZ(1deg);
}

.table-top .pick::after {
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -4%;
  left: -6%;
  height: 22%;
  background: radial-gradient(60% 100% at 50% 20%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  content: "";
  filter: blur(6px);
}

/* ---------- scene c: no scene at all, the book is already open ---------- */

.scene-plain {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 226, 200, 0.14), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 92% at 50% 0%, #46292c 0%, #2a171b 60%, #190f11 100%);
}

/* it sits in the page instead of over it, so the header stays reachable */
.reader-plain {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

/* ---------- the reader ---------- */

.reader {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2.4vh, 1.4rem);
  padding: clamp(0.6rem, 3vh, 1.6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.reader[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.reader-stage {
  --page-w: min(45vw, 47vh);
  --page-h: calc(var(--page-w) * 1.42);
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  perspective: 2200px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* closed, only the right half of the stage holds a book, so centre that half */
.reader[data-phase="fly"] .reader-stage { transform: translateX(-25%); }

/* the open covers the pages sit in, which only exist once the book is open */
.reader-stage::before {
  position: absolute;
  z-index: 0;
  inset: -2.4% -1.8%;
  border-radius: 8px;
  background: var(--book-cover, linear-gradient(150deg, #d98ca6, #a94f6c));
  content: "";
  opacity: 0;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s ease;
}

.reader[data-phase="opening"] .reader-stage::before,
.reader[data-phase="reading"] .reader-stage::before,
.reader[data-phase="shutting"] .reader-stage::before { opacity: 1; }

/* The rest of the book, under the spread. An open book is a block of paper
   with two pages lying on top of it, and the sliver of that block showing past
   them is most of what says so — without it a spread is two rectangles resting
   on a cover. It waits for the reading phase because the cover passes over
   this same ground on its way open and shut. */
.reader-stage::after {
  position: absolute;
  z-index: 1;
  inset: -0.9% -1.05%;
  border-radius: 2px 3px 3px 2px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(120, 96, 70, 0.13) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
    linear-gradient(to right,
      #c7b79c 0%, #f2ebdb 2.2%, #f7f1e5 50%, #f2ebdb 97.8%, #c7b79c 100%);
  content: "";
  opacity: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  transition: opacity 0.45s ease;
}

.reader[data-phase="reading"] .reader-stage::after { opacity: 1; }

/* The book while it is shut: paper block, spine and front cover travel as one
   solid, so it can fly to the shelf and turn spine-out without coming apart. */
.closed {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.66s cubic-bezier(0.3, 0.9, 0.25, 1);
}

.reader[data-phase="reading"] .closed { z-index: 0; }

/* the closed book's block of paper gives way to the pages themselves */
.reader[data-phase="opening"] .reader-block,
.reader[data-phase="reading"] .reader-block,
.reader[data-phase="shutting"] .reader-block { opacity: 0; }

.reader-block {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
  border-radius: 1px 4px 4px 1px;
  background:
    repeating-linear-gradient(to bottom, rgba(120, 96, 70, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 5px),
    linear-gradient(to right, #e6dbc9, #fdf8ef 14%, #f4ecdf);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

.closed-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(20px, 3.4%, 40px);
  height: 100%;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.34), rgba(255, 255, 255, 0.06) 44%, rgba(0, 0, 0, 0.28)),
    var(--book-cover);
  transform: rotateY(-90deg);
  transform-origin: left center;
}

.spread {
  position: absolute;
  z-index: 2;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.slot > .leaf {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.reader[data-phase="opening"] .slot-right > .leaf,
.reader[data-phase="reading"] .slot-right > .leaf,
.reader[data-phase="reading"] .slot-left > .leaf,
/* closing: the cover swings shut over the right page, which stays printed
   under it. The left page goes the other way — the pages you have read lie on
   the open cover, so they leave with it, and the cover is over them from the
   first frame of the swing. Printing it here instead leaves it lying on the
   board after the cover has passed, with the book shut around it. */
.reader[data-phase="shutting"] .slot-right > .leaf { opacity: 1; }

.reader:not([data-phase="reading"]) .fold,
.reader:not([data-phase="reading"]) .gutter,
.reader:not([data-phase="reading"]) .corner-hint { opacity: 0; }

/* the front cover: shut over the right-hand page, then swung onto the left */
.reader-cover {
  position: absolute;
  z-index: 10;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  /* on the base rule, or the cover would have no transition to swing back on
     and would snap shut when the book closes */
  transition: transform 0.85s cubic-bezier(0.42, 0, 0.2, 1);
}

.reader[data-phase="opening"] .reader-cover,
.reader[data-phase="reading"] .reader-cover {
  transform: rotateY(-179.4deg);
}

.reader[data-phase="reading"] .reader-cover { z-index: 0; }

.cover-face {
  position: absolute;
  inset: 0;
  border-radius: 1px 5px 5px 1px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cover-outside {
  background: var(--book-cover);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.28), 0 30px 60px rgba(0, 0, 0, 0.5);
}

.cover-inside {
  border-radius: 5px 1px 1px 5px;
  background: linear-gradient(to right, #e8dccb, #f5eee2);
  transform: rotateY(180deg);
}

.cover-face .tome-title {
  position: absolute;
  inset: 0;
  transform: none;
}

.cover-face .tome-title b { font-size: calc(var(--page-w) * 0.2); }
.cover-face .tome-title small { font-size: calc(var(--page-w) * 0.062); }

.slot {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.slot-left { left: 0; }
.slot-right { left: 50%; }

.pane,
.slot .leaf {
  position: absolute;
  inset: 0;
}

/* ---------- the folding sheet ---------- */

.fold {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: visible;
}

.fold[data-on="false"] { display: none; }

/* a backward turn mirrors the left page into the same frame the maths uses */
.spread[data-side="left"] .fold {
  left: 0;
  transform: scaleX(-1);
}

.spread[data-side="left"] .fold .leaf { transform: scaleX(-1); }

.pane-under { z-index: 1; }
.pane-flat { z-index: 2; }
.pane-cast { z-index: 3; }
.pane-flap { z-index: 4; }

.pane-flat,
.pane-flap {
  transform-origin: 0 0;
  will-change: clip-path, transform;
}

.pane-cast {
  transform-origin: 0 0;
  background: rgba(44, 24, 14, 0.7);
  will-change: clip-path, transform;
}

.creaseband,
.shade {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

/* the gutter the two pages fall into */
.gutter {
  position: absolute;
  z-index: 6;
  inset: 0;
  background:
    /* the crease, kept close to the binding. Spread wide it shades the third of
       each page the words and photographs actually sit in, which is a long way
       from where a book is dark. */
    linear-gradient(to right,
      rgba(58, 32, 22, 0) 43%,
      rgba(58, 32, 22, 0.06) 46.4%,
      rgba(58, 32, 22, 0.22) 48.7%,
      rgba(58, 32, 22, 0.42) 50%,
      rgba(58, 32, 22, 0.22) 51.3%,
      rgba(58, 32, 22, 0.06) 53.6%,
      rgba(58, 32, 22, 0) 57%),
    /* the sheen of paper lifting back out of the binding. On bare paper it is
       nearly free — the page is already close to white — so half-opacity white
       cost nothing there and went unnoticed, while over a photograph the same
       band read as a stripe of fog. Faint enough now to be paper either way. */
    linear-gradient(to right, rgba(255, 250, 242, 0) 40%, rgba(255, 250, 242, 0.13) 46%, rgba(255, 250, 242, 0) 49%),
    linear-gradient(to right, rgba(255, 250, 242, 0) 51%, rgba(255, 250, 242, 0.13) 54%, rgba(255, 250, 242, 0) 60%);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* hide the gutter while a page is turning, so it never sits on top of the fold */
.spread.is-folding .gutter { opacity: 0; }

/* ---------- pages ---------- */

.leaf {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* the light comes from above the book, so the sheet is brightest where it
     faces up and falls away towards the edges that tip out of it. It sits
     under the copy rather than over it, which is why it is a background and
     not another layer on top. */
  background-color: var(--paper);
  background-image: radial-gradient(116% 94% at 50% 18%,
    rgba(255, 253, 248, 0.55) 0%,
    rgba(255, 253, 248, 0) 44%,
    rgba(74, 48, 32, 0.045) 100%);
  container-type: size;
}

.slot-left > .leaf { border-radius: 4px 1px 1px 4px; }
.slot-right > .leaf { border-radius: 1px 4px 4px 1px; }

/* The tooth lies over everything, ink and photographs included: ink sinks into
   paper rather than resting on it, and a printed picture is printed on the
   same sheet as the words beside it. */
.leaf::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: var(--fibre);
  background-size: 170px 170px;
  content: "";
  pointer-events: none;
}

.leaf[data-blank="true"] { background-color: var(--paper-shade); }

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2cqh;
  height: 100%;
  padding: 9cqw;
  color: var(--ink);
  text-align: center;
}

.page img {
  display: block;
  width: 100%;
  max-height: 42cqh;
  border-radius: 1px;
  object-fit: cover;
  box-shadow: 0 1.6cqh 3.4cqh rgba(70, 40, 30, 0.2);
  -webkit-user-drag: none;
}

.page h1,
.page h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.14;
}

.page h1 { font-size: 13cqw; }
.page h2 { font-size: 8.4cqw; }

.page p {
  margin: 0;
  max-width: 26ch;
  color: rgba(43, 28, 31, 0.74);
  font-size: 4.3cqw;
  line-height: 1.5;
}

.page .script {
  color: var(--blush);
  font-family: var(--display);
  font-size: 7.6cqw;
  line-height: 1.25;
}

.page a {
  border-bottom: 1px solid rgba(196, 106, 134, 0.5);
  color: var(--blush);
  font-size: 3.7cqw;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: lowercase;
}

.page .price {
  font-family: var(--serif);
  font-size: 6cqw;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.page ul {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 6.8cqw;
  letter-spacing: 0.04em;
  line-height: 1.95;
  list-style: none;
}

.page .stamp {
  padding: 1.2cqh 3cqw;
  border: 1px solid rgba(196, 106, 134, 0.45);
  border-radius: 999px;
  color: var(--blush);
  font-size: 3cqw;
  letter-spacing: 0.24em;
  text-transform: lowercase;
}

.page-open h1 { font-size: 11cqw; }
.page-end .ends { display: flex; gap: 7cqw; }

/* a page that carries a post from the channel rather than printed copy */
.page-post { gap: 2.6cqh; }
.page-post img { max-height: 34cqh; }

.page-post .post-text {
  display: -webkit-box;
  overflow: hidden;
  max-width: 30ch;
  margin: 0;
  color: rgba(43, 28, 31, 0.78);
  font-size: 3.9cqw;
  line-height: 1.55;
  text-align: left;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

/* with no photo to share the page, the words get the room instead */
.page-post[data-has-image="false"] .post-text {
  font-size: 4.4cqw;
  -webkit-line-clamp: 15;
}

/* and a post that is only a photo gets to be a full plate */
.page-post[data-has-text="false"] img { max-height: 56cqh; }

.page .hint {
  color: rgba(43, 28, 31, 0.42);
  font-size: 3.1cqw;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

/* ---------- reader controls ---------- */

.bar {
  display: flex;
  z-index: 31;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 1.6rem);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.reader[data-phase="reading"] .bar { opacity: 1; }

.bar button {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(246, 239, 230, 0.32);
  border-radius: 999px;
  background: none;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.bar button:hover:enabled { border-color: rgba(246, 239, 230, 0.75); }
.bar button:disabled { opacity: 0.25; cursor: default; }

.bar span {
  min-width: 5ch;
  color: rgba(246, 239, 230, 0.55);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-align: center;
}

.bar .close { border-color: rgba(196, 106, 134, 0.6); }

/* ---------- booka design subvariants ---------- */

.variant-refined {
  --paper: #faf6f0;
  --paper-shade: #f0e7db;
  --ink: #2b1c1f;
  --blush: #c46a86;
}

.variant-refined.scene-shelf {
  background: radial-gradient(120% 100% at 50% 0%, #5a3a3e 0%, #3c2528 50%, #241618 100%);
}

.variant-refined .shelf::before {
  background: linear-gradient(180deg, #2c1a16 0%, #38221d 45%, #211411 100%);
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.55),
    inset 26px 0 34px rgba(0, 0, 0, 0.38),
    inset -26px 0 34px rgba(0, 0, 0, 0.38);
}

.variant-refined .shelf-board {
  background: linear-gradient(to bottom, #9c7054 0%, #6b4a36 48%, #4a2f20 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 228, 194, 0.35);
}

.variant-refined .palette-channel {
  --book-cover: linear-gradient(150deg, #e39ab0 0%, #cc7a95 46%, #a95673 100%);
  --book-ink: #fff7f8;
  --book-font: var(--display);
}

.variant-refined .palette-shop {
  --book-cover: linear-gradient(150deg, #3a5a48 0%, #263f30 52%, #1a2d22 100%);
  --book-ink: #f5e8c8;
  --book-font: var(--serif);
}

.variant-refined .reader-stage::before {
  background: var(--book-cover, linear-gradient(150deg, #e39ab0, #a95673));
}

.variant-warm {
  --paper: #fdf7ed;
  --paper-shade: #f5e9d6;
  --ink: #3a2520;
  --blush: #c46a86;
}

.variant-warm.scene-shelf {
  background: radial-gradient(120% 100% at 50% 0%, #6d4c36 0%, #4a3224 50%, #2b1d16 100%);
}

.variant-warm .shelf::before {
  background: linear-gradient(180deg, #3d2a1f 0%, #4b3426 45%, #2c1e16 100%);
}

.variant-warm .shelf-board {
  background: linear-gradient(to bottom, #b8885e 0%, #8a6342 48%, #5f3f2a 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 228, 194, 0.45);
}

.variant-warm .palette-channel {
  --book-cover: linear-gradient(150deg, #e8a5b6 0%, #d4849b 46%, #b0607b 100%);
  --book-ink: #fff7f8;
}

.variant-warm .palette-shop {
  --book-cover: linear-gradient(150deg, #4a6b52 0%, #314f39 52%, #213529 100%);
  --book-ink: #f9ebc5;
}

.variant-warm .reader-stage::before {
  background: var(--book-cover, linear-gradient(150deg, #e8a5b6, #b0607b));
}

.variant-warm .page .script { color: #b76b7f; }
.variant-warm .page a { color: #b76b7f; border-color: rgba(183, 107, 127, 0.5); }

.variant-modern {
  --paper: #f9f7f4;
  --paper-shade: #ece6dd;
  --ink: #1a1a1a;
  --blush: #d65c7c;
}

.variant-modern.scene-shelf {
  background: radial-gradient(120% 100% at 50% 0%, #2d2d2d 0%, #1a1a1a 50%, #0d0d0d 100%);
}

.variant-modern .shelf::before {
  background: linear-gradient(180deg, #1f1f1f 0%, #2a2a2a 45%, #161616 100%);
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.7),
    inset 26px 0 34px rgba(0, 0, 0, 0.45),
    inset -26px 0 34px rgba(0, 0, 0, 0.45);
}

.variant-modern .shelf-board {
  background: linear-gradient(to bottom, #4a4a4a 0%, #333333 48%, #1f1f1f 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.variant-modern .filler {
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.55);
}

.variant-modern .palette-channel {
  --book-cover: linear-gradient(150deg, #e89db2 0%, #d66e8b 46%, #b84b6b 100%);
  --book-ink: #ffffff;
  --book-font: var(--sans);
}

.variant-modern .palette-shop {
  --book-cover: linear-gradient(150deg, #2f4f3a 0%, #1f3a2a 52%, #13261a 100%);
  --book-ink: #f2e6c4;
  --book-font: var(--sans);
}

.variant-modern .tome-title b {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.variant-modern .reader-stage::before {
  background: var(--book-cover, linear-gradient(150deg, #e89db2, #b84b6b));
}

.variant-modern .page .script { color: #d65c7c; }
.variant-modern .page a { color: #d65c7c; border-color: rgba(214, 92, 124, 0.5); }

.variant-vintage {
  --paper: #f4f0e6;
  --paper-shade: #e8e0d0;
  --ink: #2d241e;
  --blush: #a85a6e;
}

.variant-vintage.scene-shelf {
  background: radial-gradient(120% 100% at 50% 0%, #3a4a3a 0%, #232f25 50%, #121a14 100%);
}

.variant-vintage .shelf::before {
  background: linear-gradient(180deg, #1e2a20 0%, #2a3a2c 45%, #171f19 100%);
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.65),
    inset 26px 0 34px rgba(0, 0, 0, 0.42),
    inset -26px 0 34px rgba(0, 0, 0, 0.42);
}

.variant-vintage .shelf-board {
  background: linear-gradient(to bottom, #7a6048 0%, #544332 48%, #382c21 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 228, 194, 0.3);
}

.variant-vintage .palette-channel {
  --book-cover: linear-gradient(150deg, #d495a8 0%, #b87189 46%, #9b4f69 100%);
  --book-ink: #fff8f0;
  --book-font: var(--serif);
}

.variant-vintage .palette-shop {
  --book-cover: linear-gradient(150deg, #3d5a48 0%, #2b4032 52%, #1f2e24 100%);
  --book-ink: #f4e6c4;
  --book-font: var(--serif);
}

.variant-vintage .reader-stage::before {
  background: var(--book-cover, linear-gradient(150deg, #d495a8, #9b4f69));
}

.variant-vintage .page .script { color: #a85a6e; }
.variant-vintage .page a { color: #a85a6e; border-color: rgba(168, 90, 110, 0.5); }

/* 5 — written by hand. The headings, the lists, the cover and the way out to
   Telegram are in someone's handwriting; the body copy and the prices stay
   printed. Set the whole page in a hand and it stops reading as handwriting
   and starts reading as a typeface — the mix is what makes either mean
   anything. */
.variant-hand {
  --paper: #fbf7ee;
  --paper-shade: #f2ebdc;
  --ink: #2a2430;
  --blush: #b4657f;
  --display: var(--hand);
}

.variant-hand.scene-shelf {
  background: radial-gradient(120% 100% at 50% 0%, #46485f 0%, #2f3142 50%, #1b1c27 100%);
}

.variant-hand .shelf::before {
  background: linear-gradient(180deg, #23242f 0%, #2e303e 45%, #191a22 100%);
  box-shadow:
    inset 0 22px 34px rgba(0, 0, 0, 0.6),
    inset 26px 0 34px rgba(0, 0, 0, 0.4),
    inset -26px 0 34px rgba(0, 0, 0, 0.4);
}

.variant-hand .shelf-board {
  background: linear-gradient(to bottom, #c3a684 0%, #9b7f5f 48%, #6b543c 100%);
  box-shadow: 0 30px 46px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 236, 208, 0.4);
}

.variant-hand .palette-channel {
  --book-cover: linear-gradient(150deg, #dd93a9 0%, #c4738d 46%, #9d4f6a 100%);
  --book-ink: #fff6f6;
  --book-font: var(--hand);
}

.variant-hand .palette-shop {
  --book-cover: linear-gradient(150deg, #46617c 0%, #31465c 52%, #21303f 100%);
  --book-ink: #f4ead2;
  --book-font: var(--hand);
}

.variant-hand .reader-stage::before {
  background: var(--book-cover, linear-gradient(150deg, #dd93a9, #9d4f6a));
}

/* a hand sits smaller on the line than the cut faces do, so everything set in
   one is given more room to come back up to the same weight on the page */
.variant-hand .tome-title b { font-size: calc(var(--cover-w) * 0.24); }
.variant-hand .cover-face .tome-title b { font-size: calc(var(--page-w) * 0.25); }
.variant-hand .tome-spine span { font-size: calc(var(--thick) * 0.44); }

.variant-hand .page h1,
.variant-hand .page h2,
.variant-hand .page ul {
  font-family: var(--hand);
  font-weight: 600;
  letter-spacing: 0;
}

.variant-hand .page h1 { font-size: 16cqw; line-height: 0.98; }
.variant-hand .page-open h1 { font-size: 13.5cqw; }
.variant-hand .page h2 { font-size: 10.5cqw; line-height: 1.02; }
.variant-hand .page .script { font-size: 9.6cqw; line-height: 1.12; }

.variant-hand .page ul {
  font-size: 8.4cqw;
  font-weight: 400;
  line-height: 1.62;
}

.variant-hand .page .script { color: #b4657f; }

/* the link is the one line on the page addressed to whoever is holding it, so
   it is written rather than set; tracking that suits small caps pulls a hand
   apart, and a hand needs the room back to hold its weight beside the printed
   copy above it */
.variant-hand .page a {
  border-color: rgba(180, 101, 127, 0.5);
  color: #b4657f;
  font-family: var(--hand);
  font-size: 5.6cqw;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  /* on phones the book shows one page at a time, like a paperback held upright */
  .reader-stage {
    --page-w: min(88vw, 56vh);
    --page-h: calc(var(--page-w) * 1.42);
    width: var(--page-w);
  }

  .reader[data-phase="fly"] .reader-stage { transform: translateX(0); }

  /* the variants list every other variant, which is more than will sit beside
     the wordmark on a phone: side by side it pushes the wordmark off the edge
     and the first link with it, so the links take a line of their own */
  .top {
    flex-wrap: wrap;
    padding-bottom: 0;
    row-gap: 0.35rem;
  }

  .top .word { font-size: 1.05rem; }

  .top nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    font-size: 0.62rem;
  }

  .scene { perspective: 900px; }
  .shelf-row { height: min(46vh, 340px); }
  .pick {
    --cover-w: clamp(120px, 38vw, 168px);
    --cover-h: clamp(170px, 52vw, 240px);
  }
  .palette-channel { --thick: 40px; }
  .palette-shop { --thick: 30px; }
  /* a narrow shelf holds fewer books */
  .filler:nth-of-type(n + 9) { display: none; }

  /* single-page layout: only the active page is visible */
  .slot { width: 100%; }
  .slot-left {
    opacity: 0;
    pointer-events: none;
  }
  .slot-right { left: 0; }

  .fold {
    left: 0;
    width: 100%;
  }

  .spread[data-side="left"] .fold {
    left: 0;
    transform: scaleX(-1);
  }

  /* the reverse of a turning page carries no print here, so it stays white —
     white paper, though, with the same tooth as the sheet it is part of */
  .pane-flap .leaf[data-blank="true"] { background-color: #fff; }

  .closed {
    left: 0;
    width: 100%;
  }

  .closed-spine { width: clamp(14px, 5%, 28px); }

  .cover-face { border-radius: 4px 5px 5px 4px; }

  .gutter { display: none; }

  .corner-hint {
    width: 20%;
    height: 14%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tome,
  .tome-front,
  .tome-title,
  .reader,
  .reader-stage,
  .scene { transition-duration: 0.01s; }
}

/* the corner you are meant to grab */
.corner-hint {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 13%;
  height: 9%;
  background: linear-gradient(315deg, rgba(70, 42, 28, 0.22), rgba(70, 42, 28, 0.05) 46%, rgba(70, 42, 28, 0) 62%);
  border-bottom-right-radius: 4px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.spread[data-side] .corner-hint { opacity: 0; }