/* Spines on the shelf: one shelf of a small made-up bookshop, Sorrel Books, on warm paper. Thin outlined spines with
   their titles in Anybody (a variable sans, width 50 to 150 and weight 100 to 900), one orange for the book in hand.
   The script places the books and tips them in 3D. */
:root {
  --paper: #f3efe6;               /* the page and the spines */
  --ink: #141414;                 /* the outlines and the titles */
  --grey: #a39d92;                /* the small texts */
  --pages: #e6e0d3;               /* the edges of the pages, seen when a book tips */
  --accent: #ff5a1f;              /* the title of the book in hand */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Anybody Variable', 'Anybody', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 6vw, 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: clamp(18px, 3.4vw, 40px) var(--pad) clamp(18px, 3vw, 36px);
  user-select: none;
  -webkit-user-select: none;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}

.top__name {
  font-variation-settings: 'wght' 640, 'wdth' 110;
}

.top__note {
  color: var(--grey);
  text-align: right;
  font-variation-settings: 'wght' 420, 'wdth' 100;
}

.hint {
  margin: 0;
  font-size: 13px;
  color: var(--grey);
  text-align: center;
  font-variation-settings: 'wght' 420, 'wdth' 100;
}

/* ---------------------------------------------------------------- the shelf */
.case {
  align-self: center;
  justify-self: center;
  width: min(100%, 980px);
}

.shelf {
  position: relative;
  height: var(--tall, 300px);
  perspective: 1600px;
  perspective-origin: 50% 55%;
  touch-action: none;
}

.board {
  height: 9px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid rgba(20, 20, 20, 0.16);
}

.book {
  position: absolute;
  bottom: 0;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the spine: an outline on the paper, the title running down it */
.book__spine {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.book__title {
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1;
  font-variation-settings: 'wght' 440, 'wdth' 70;
}

/* two thin bands near the head and the foot, on some of the spines */
.book__band {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.book__band--head {
  top: 12%;
}

.book__band--foot {
  bottom: 12%;
}

/* the top of the book, lying back into the shelf: the edges of the pages between the two boards */
.book__top {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--pages) 0 2px, var(--paper) 2px 3px);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}

.shelf:focus-visible {
  outline: none;
}

.shelf:focus-visible .book.is-on .book__spine {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

/* ---------------------------------------------------------------- the card under the shelf */
.card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  margin-top: clamp(16px, 3vh, 26px);
}

.card__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.card__mask--price {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.card__title,
.card__meta,
.card__price {
  display: block;
}

.card__title {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  font-variation-settings: 'wght' 560, 'wdth' 88;
}

.card__meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--grey);
  font-variation-settings: 'wght' 420, 'wdth' 100;
}

.card__price {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 520, 'wdth' 100;
}

@media (max-width: 640px) {
  .top {
    font-size: 13px;
  }

  .card__meta {
    font-size: 13px;
  }
}