/* ------------------------------------------------------------------
   The shelf. Seven books standing in a projection.
   Six carry a three-letter mark on the spine. The seventh carries none,
   and it does not open.
   ------------------------------------------------------------------ */

.hero { padding-block: clamp(2.5rem, 7vw, 5rem) 1rem; text-align: center; }

.hero__kicker { margin-bottom: 1.1rem; }

.hero h1 {
  font-family: var(--font-paper);
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-0);
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }

.hero__lede {
  margin: 1.35rem auto 0;
  max-width: 44rem;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  color: var(--text-1);
  text-wrap: pretty;
}
.hero__lede strong { color: var(--text-0); font-weight: 500; }

.hero__sign {
  margin-top: 1.5rem;
  font-family: var(--font-paper);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-2);
}

/* ---------------------------------------------------------- the plinth */

.shelf {
  --h: clamp(11rem, 23vw, 17.5rem);   /* the books that stand on it */
  position: relative;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5.5rem);
  perspective: 1600px;
  perspective-origin: 50% 34%;
}

.shelf__hint {
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  font-family: var(--font-hud);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* The one instruction on the page. Spaced capitals at this size need more
   contrast than running text rather than less, which is why it was invisible
   in the dim colour -- the same fault the hub's labels had. */
.shelf__hint--lit { color: var(--accent); }

.shelf__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--h, 17.5rem) * .012);
  transform-style: preserve-3d;
  transition: opacity var(--t-pull) var(--ease-out), filter var(--t-pull) var(--ease-out);
}

/* The light the shelf sits in, and the glass it sits on. */
/* Decoration only -- an empty, aria-hidden plate. It overlapped the bottom
   few pixels of every book and took the pointer there, which is half of why
   a book flickered when the cursor sat near its foot. */
.shelf__deck {
  pointer-events: none;
  position: relative;
  margin-top: -2px;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background:
    linear-gradient(180deg, var(--accent-faint), transparent 72%),
    linear-gradient(180deg, rgba(37, 234, 181, 0.22) 0 1px, transparent 1px);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transition: opacity var(--t-pull) var(--ease-out);
}
.shelf__deck::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: min(46rem, 92%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent-glow);
}
/* The projector's cone, falling away beneath the glass. */
.shelf__deck::after {
  content: '';
  position: absolute;
  left: 50%; top: 1px;
  width: min(40rem, 86%);
  height: 100%;
  transform: translateX(-50%) perspective(400px) rotateX(62deg);
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(37, 234, 181, 0.16), transparent 70%);
  filter: blur(2px);
}

.shelf.is-receded .shelf__row { opacity: 0; filter: blur(6px); pointer-events: none; }
.shelf.is-receded .shelf__deck { opacity: .25; }

/* ---------------------------------------------------------- a book */

.tome {
  --hue: 168;
  --h: clamp(11rem, 23vw, 17.5rem);
  --w: calc(var(--h) * var(--book-d));   /* the same thickness it has in the hand */

  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transition:
    transform var(--t-state) var(--ease-snap),
    filter    var(--t-state) var(--ease-out);
}

/* ⚠️ The lift belongs to the spine, NOT to .tome. .tome is the button and
   therefore the thing the pointer is tested against; lifting it moved it
   out from under a cursor resting near the book's foot, which un-hovered
   it, which dropped it back onto the cursor, over and over. Moving only
   what is drawn leaves the target exactly where the hand left it. */
.tome:hover, .tome:focus-visible { z-index: 2; }
.tome:hover .tome__spine,
.tome:focus-visible .tome__spine { transform: translateY(-14px) rotateX(-7deg); }
.tome:hover .tome__spine, .tome:focus-visible .tome__spine {
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 76, 0.22),
    0 18px 40px rgba(0, 0, 0, 0.62),
    0 0 32px var(--accent-glow);
}
.tome:active .tome__spine { transform: translateY(-7px) rotateX(-3deg); }

/* The spine: leather, raised bands, gilt. This is the Dwarkinvolk layer. */
.tome__spine {
  position: relative;
  transform-origin: 50% 100%;
  transition: transform var(--t-state) var(--ease-snap),
              box-shadow var(--t-state) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: calc(var(--h) * .055) calc(var(--w) * .07) calc(var(--h) * .045);
  border-radius: 3px 5px 5px 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0, transparent 14%, transparent 86%, rgba(0,0,0,.4) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(160deg,
      hsl(var(--hue) 16% 13%) 0%,
      hsl(var(--hue) 20% 9%)  48%,
      hsl(var(--hue) 14% 15%) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 76, 0.13),
    0 12px 28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: box-shadow var(--t-state) var(--ease-out);
}

/* The grooves beside the spine, where each board is hinged. */
.tome__spine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.05) 0 3%,
      rgba(0,0,0,.55) 9%,
      rgba(0,0,0,.3) 15%,
      transparent 20%,
      transparent 80%,
      rgba(0,0,0,.3) 85%,
      rgba(0,0,0,.55) 91%,
      rgba(255,255,255,.05) 97% 100%);
}

/* The grain, and the projection shimmering across it. */
.tome__spine::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  opacity: .8;
  pointer-events: none;
}
.tome:hover .tome__spine { filter: brightness(1.12); }

/* The raised bands across a bound spine. Measured in exactly the proportions
   the object uses, so the two can never disagree. */
.tome__bands {
  position: absolute;
  inset: 32% 6% 24%;
  background: repeating-linear-gradient(
    180deg,
    transparent              0                      calc(16.666% - 3px),
    rgba(0,0,0,.52)          calc(16.666% - 3px)    calc(16.666% - 1px),
    rgba(201,168,76,.14)     calc(16.666% - 1px)    calc(16.666% + 1px),
    rgba(0,0,0,.46)          calc(16.666% + 1px)    calc(16.666% + 3px),
    transparent              calc(16.666% + 3px)    33.333%
  );
  pointer-events: none;
}

/* The headbands at the head and the tail. */
.tome__cap {
  position: absolute;
  left: 4%;
  right: 4%;
  height: calc(var(--w) * .13);
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(201,168,76,.5) 0 1px, rgba(27,23,16,.6) 1px 2px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}
.tome__cap--head { top: calc(var(--w) * .1); }
.tome__cap--tail { bottom: calc(var(--w) * .1); }

/* The three-letter mark. Derived from the name, and it does not give it away. */
.tome__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12em;
  margin-top: .25rem;
  font-family: var(--font-paper);
  font-size: calc(var(--w) * var(--spine-code));
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gilt);
  text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 10px rgba(201,168,76,.28);
}

.tome__num {
  font-family: var(--font-paper);
  font-size: calc(var(--w) * var(--spine-foot));
  letter-spacing: .08em;
  color: rgba(201, 168, 76, 0.7);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

.tome__glow {
  position: absolute;
  left: 50%; bottom: -1.5rem;
  width: 170%; height: 1.5rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0, var(--accent-glow), transparent 70%);
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--t-state) var(--ease-out);
}
.tome:hover .tome__glow { opacity: 1; }

/* ------------------------------------------------- the seventh */
/* The same book as the others. Nothing was ever stamped into it. */

/* The same size as the others. Only the lettering is missing. */



/* ---------------------------------------------------------- the flight */
/* A book leaving the shelf: measured from where it stood, flown to where it
   opens. One deliberate movement, the only one allowed to be felt. */

.flyer {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition:
    transform var(--t-pull) var(--ease-out),
    opacity   var(--t-pull) var(--ease-in);
  will-change: transform, opacity;
}
.flyer .tome__spine { border-radius: 4px; }
.flyer.is-done { opacity: 0; }

@media (max-width: 720px) {
  /* ⭐ BIGGER BOOKS, SHORTER SHELF (Seth, 2026-10-27).
     *"Let's get the shelf books larger on the phone so they can be seen and
     selected more easily. We can just have less shelf that's not being used,
     it doesn't have to be so wide."*

     Seven spines at the old size came to about a third of the window, so the
     shelf ran nearly edge to edge with the books huddled in the middle of it,
     and each spine was too narrow to aim a thumb at. A spine's width is fixed
     against its height by --book-d, so the only way to widen one is to make
     the book taller -- and then to cut the shelf down to what the books
     actually stand on.

     Both --h values are set because .shelf's drives the deck and the row's
     gap while .tome's drives the books, and only .tome's was being changed
     here: the gaps between the books were being spaced off the DESKTOP size
     the whole time. */
  .shelf { --h: clamp(12rem, 60vw, 17rem); }
  .tome  { --h: inherit; }
  .shelf__row { flex-wrap: nowrap; }

  /* The shelf is cut from the books rather than from the window: a little
     wider than the row, so the books stand ON it instead of overhanging it
     at both ends or sitting in the middle of a shelf twice their length.

     Measured, not derived. The arithmetic -- seven spines and six gaps at
     --h * (7 * .165 + 6 * .012) -- predicts 1.23, and the row really comes
     out at 1.53 times --h, because each book is turned in the projection and
     its footprint is wider than its spine. A multiplier taken from the sum
     left the books hanging 13px over each end. */
  .shelf__deck::before { width: min(calc(var(--h) * 1.62), 96%); }
  .shelf__deck::after  { width: min(calc(var(--h) * 1.48), 90%); }
}

/* ------------------------------------------------------------------
   A volume's spine

   Vol on one line and the number large beneath it, so it reads at a glance
   from across the shelf. The figure keeps room for two digits, so volume 9
   and volume 10 are lettered at exactly the same size.
   ------------------------------------------------------------------ */

.tome__spine--vol { justify-content: space-between; }
.tome__vol { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.spine-vol {
  font-family: var(--font-hud);
  font-size: calc(var(--w) * .22);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .72);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.spine-no {
  display: block;
  min-width: 2ch;
  margin-top: .1em;
  font-family: var(--font-paper);
  font-size: calc(var(--w) * .62);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--gilt);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 12px rgba(201, 168, 76, .26);
}

/* The same binding, seen on the shelf. A tied book is plainly a book that
   does not open, which is the whole point of showing it here. */
.tome__strap {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--w) * .06);
  right: calc(-1 * var(--w) * .06);
  height: calc(var(--h) * .052);
  z-index: 3;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(37, 234, 181, .06) 0 12%,
      rgba(10, 17, 21, .96)  12% 50%,
      rgba(6, 11, 14, .98)   50% 88%,
      rgba(37, 234, 181, .06) 88% 100%);
  box-shadow:
    inset 0  1px 0 rgba(37, 234, 181, .45),
    inset 0 -1px 0 rgba(37, 234, 181, .32),
    0 0 12px rgba(37, 234, 181, .16);
}
.tome--bound .tome__bands { opacity: .55; }