/* Looking Back — the library: cloth books, the shelf and the seals.
   Shared by the landing page, the sample journal and the app. A book is sized
   by its container: set --book-h (height) and --book-w (width) there, and the
   type inside scales with the height. */

/* Defaults live on the root so any container can override them. */
:root { --book-h: 260px; --book-w: 170px; }

.lb-book {
  --ease-book: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: block;
  width: var(--book-w);
  padding: 0 7px 0 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}
button.lb-book, a.lb-book { cursor: pointer; }
.lb-book:focus-visible { outline: none; }
.lb-book:focus-visible .lb-book-object { outline: 2px solid var(--focus, #E6B451); outline-offset: 5px; }

.lb-book-object {
  --cover: #612e3b;
  --foil: #dbc695;
  --title-scale: 1;
  --tilt: -1deg;
  position: relative;
  display: block;
  height: var(--book-h);
  width: 100%;
  color: var(--foil);
  background: var(--cover);
  border-radius: 2px 5px 5px 2px;
  transform: rotateY(-9deg) rotateZ(var(--tilt));
  transform-origin: 20% 90%;
  box-shadow: inset 3px 0 3px rgba(255,255,255,.075), inset 9px 0 8px rgba(0,0,0,.14), 5px 7px 8px rgba(40,22,14,.2), 1px 2px 1px rgba(0,0,0,.2);
  transition: transform .5s var(--ease-book), box-shadow .45s var(--ease-book);
  isolation: isolate;
}
/* the weave of the cloth */
.lb-book-object::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; opacity: .13; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, #fff 0, #fff 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, #000 0, #000 1px, transparent 1px, transparent 3px);
}
/* the page block, just visible past the fore-edge */
.lb-book-object::after {
  content: "";
  position: absolute; top: 4px; bottom: 3px; right: -7px; z-index: -1;
  width: 7px;
  background: repeating-linear-gradient(0deg, #e4dac0 0, #e4dac0 1px, #f3e9d1 1px, #f3e9d1 3px);
  border-radius: 0 3px 3px 0;
  box-shadow: inset 2px 0 2px rgba(118,98,71,.4);
  transform: skewY(-12deg);
}

.lb-book-inset {
  position: absolute;
  inset: calc(var(--book-h) * .054) calc(var(--book-h) * .042) calc(var(--book-h) * .05) calc(var(--book-h) * .065);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--book-h) * .058) 6px calc(var(--book-h) * .05);
  border: 1px solid color-mix(in srgb, var(--foil) 42%, transparent);
}
.lb-book-inset::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--foil) 18%, transparent);
}
.lb-book-volume, .lb-book-date {
  position: relative; z-index: 2;
  font: 500 calc(var(--book-h) * .03)/1.4 "DM Sans", system-ui, sans-serif;
  letter-spacing: .2em;
  opacity: .88;
}
.lb-book-date { margin-top: auto; letter-spacing: .14em; }
.lb-book-title {
  position: relative; z-index: 2;
  display: block; width: 100%;
  margin-top: calc(var(--book-h) * .085);
  font: 400 calc(var(--book-h) * .1 * var(--title-scale))/.98 "Newsreader", Georgia, serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.lb-book.is-current .lb-book-title { font-size: calc(var(--book-h) * .11 * var(--title-scale)); }
.lb-book .book-art {
  position: relative; z-index: 2;
  width: calc(var(--book-h) * .17); height: calc(var(--book-h) * .19);
  margin-top: calc(var(--book-h) * .07);
  opacity: .9;
}
.lb-book-ribbon {
  position: absolute; top: -2px; right: 16%; z-index: 3;
  width: calc(var(--book-h) * .05); height: calc(var(--book-h) * .16);
  background: #cbb777;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.25));
}

/* Books lift off the shelf when a pointer passes over them, whether or not
   they open. Keyboard focus does the same for books that open. */
@media (hover: hover) {
  .lb-book:not(.is-still):hover .lb-book-object {
    transform: translateY(calc(var(--book-h) * -.05)) rotateY(-5deg) rotateZ(0deg);
    box-shadow: inset 3px 0 3px rgba(255,255,255,.075), inset 9px 0 8px rgba(0,0,0,.14), 8px 18px 18px rgba(40,22,14,.26);
  }
}
.lb-book:not(.is-still):focus-visible .lb-book-object {
  transform: translateY(calc(var(--book-h) * -.05)) rotateY(-5deg) rotateZ(0deg);
}

/* A row of books standing on a ledge. */
.lb-shelf { position: relative; }
.lb-shelf-books {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(12px, 2.4vw, 32px);
  padding: 0 clamp(8px, 2vw, 24px);
}
.lb-shelf-books > .lb-book:nth-child(6n+1) .lb-book-object { --tilt: -1deg; }
.lb-shelf-books > .lb-book:nth-child(6n+2) .lb-book-object { --tilt: 1.2deg; height: calc(var(--book-h) * .955); }
.lb-shelf-books > .lb-book:nth-child(6n+3) .lb-book-object { --tilt: 0deg; height: calc(var(--book-h) * 1.03); }
.lb-shelf-books > .lb-book:nth-child(6n+4) .lb-book-object { --tilt: -1.8deg; height: calc(var(--book-h) * .96); }
.lb-shelf-books > .lb-book:nth-child(6n+5) .lb-book-object { --tilt: .8deg; }
.lb-shelf-books > .lb-book:nth-child(6n+6) .lb-book-object { --tilt: 0deg; height: calc(var(--book-h) * .93); }
.lb-shelf-ledge {
  position: relative; z-index: 3;
  height: 13px; margin: 0 -12px;
  border-radius: 1px;
  background: var(--ledge, linear-gradient(#ded2bc, #eee4d3 27%, #ddd0b9 38%, #d7c9af 80%, #b9a990));
  box-shadow: 0 11px 15px rgba(92,67,38,.11), 0 2px 2px rgba(0,0,0,.05);
}
.lb-shelf-captions {
  display: flex; justify-content: center;
  gap: clamp(12px, 2.4vw, 32px);
  padding: 14px clamp(8px, 2vw, 24px) 0;
}
.lb-shelf-captions > * { width: var(--book-w); flex-shrink: 0; text-align: center; }

/* Seals in the Book of Moments */
.seal-svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lb-book-object { transition: none; }
  .lb-book:not(.is-still):hover .lb-book-object,
  .lb-book:not(.is-still):focus-visible .lb-book-object { transform: rotateY(-9deg) rotateZ(var(--tilt)); }
}