/* Bookshelf (v17) landing: a library at night. */

:root {
  --night: #0a0705;
  --gilt: #d8b46a;
  --gilt-hi: #f3dda0;
  --gilt-lo: #8e6c31;
  --cream: #efe5cf;
  --ink: #23170d;
  --lamp: 255, 204, 138;
  --bay: min(calc(100% - 20px), 960px);
  --inner: calc(var(--bay) - 64px);
  --post: 16px;
  --plank: 24px;
  --cell: 350px;
  --be: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--cream);
  font-family: "Castoro", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the room ---------- */

.room {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  padding-bottom: 80px;
  background:
    radial-gradient(ellipse 60% 520px at 50% 0, rgba(var(--lamp), .07), rgba(var(--lamp), 0) 70%),
    linear-gradient(180deg, #0e0906, var(--night) 640px);
}

/* ---------- cornice with the name ---------- */

.cornice {
  position: relative;
  width: var(--bay);
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}

.cap {
  position: relative;
  height: 13px;
  margin: 0 -14px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #8a5d39, #563620 55%, #2c1a0d);
  box-shadow: 0 3px 0 #160d07, 0 12px 20px rgba(0, 0, 0, .55);
}

.cap::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -8px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #3e2716 0 7px, #1d1209 7px 11px);
}

.frieze {
  position: relative;
  margin-top: 8px;
  padding: 18px 18px 17px;
  background:
    radial-gradient(ellipse 70% 120% at 50% 100%, rgba(var(--lamp), .10), rgba(var(--lamp), 0) 70%),
    linear-gradient(180deg, #2b190d, #1f1309);
  border-left: var(--post) solid #3a2414;
  border-right: var(--post) solid #3a2414;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 170, .06);
}

.frieze::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: 0 1px 0 rgba(255, 220, 170, .05), inset 0 1px 0 rgba(255, 220, 170, .04);
  pointer-events: none;
}

.name {
  position: relative;
  margin: 0;
  font-family: "Castoro Titling", "Castoro", Georgia, serif;
  font-weight: 400;
  font-size: clamp(25px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: .16em;
  text-indent: .16em;
  background: linear-gradient(180deg, #f8e7b4 0%, #dcb96b 42%, #9d7735 56%, #e7c983 78%, #c9a35a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75));
}

.line {
  position: relative;
  margin: 10px 0 0;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(239, 229, 207, .76);
}

/* ---------- the stacks ---------- */

.stacks { position: relative; }

.stacks::before,
.stacks::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: var(--post);
  left: calc(50% - var(--bay) / 2);
  background: linear-gradient(90deg, #22140a, #5a3820 40%, #3a2414 75%, #1d1109);
  box-shadow: 0 0 24px rgba(0, 0, 0, .65);
  pointer-events: none;
}

.stacks::after {
  left: auto;
  right: calc(50% - var(--bay) / 2);
  background: linear-gradient(270deg, #22140a, #5a3820 40%, #3a2414 75%, #1d1109);
}

.shelf {
  position: relative;
  height: calc(var(--cell) + var(--plank));
}

.wall {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--plank);
  background:
    linear-gradient(90deg, #060403 0, #060403 var(--post), rgba(0, 0, 0, 0) var(--post)) 50% 0 / var(--bay) 100% repeat-x,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .24) 0 1px, rgba(255, 220, 170, .025) 1px 2px, rgba(0, 0, 0, 0) 2px 92px),
    linear-gradient(180deg, #110a06, #1c130b 34%, #150d08);
}

.glow {
  position: absolute;
  top: 0;
  bottom: var(--plank);
  left: calc(50% - var(--bay) / 2);
  width: var(--bay);
  pointer-events: none;
  background: radial-gradient(calc(var(--bay) * .56) 100% at 50% 0, rgba(var(--lamp), .30), rgba(var(--lamp), .10) 45%, rgba(var(--lamp), 0) 80%);
  animation: lamp-on 1.1s calc(var(--i, 0) * 140ms + 120ms) both;
}

.lamp {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  width: clamp(92px, 24%, 230px);
  height: 13px;
  translate: -50% 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #3d2c14, #b8924c 38%, #ecd08f 52%, #8a6a32 78%, #4a3618);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.lamp::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: #fff4da;
  box-shadow: 0 0 10px 3px rgba(var(--lamp), .8), 0 8px 42px 14px rgba(var(--lamp), .22);
  animation: lamp-on 1.1s calc(var(--i, 0) * 140ms + 120ms) both;
}

@keyframes lamp-on {
  0% { opacity: 0; }
  10% { opacity: .75; }
  16% { opacity: .12; }
  25% { opacity: .9; }
  31% { opacity: .45; }
  100% { opacity: 1; }
}

.motes {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: min(calc(var(--bay) * .56), 540px);
  height: calc(var(--cell) - 30px);
  translate: -50% 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 52% 92% at 50% 0, #000 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 52% 92% at 50% 0, #000 35%, rgba(0, 0, 0, 0) 100%);
}

.mote {
  position: absolute;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: rgba(255, 238, 205, .95);
  box-shadow: 0 0 6px rgba(var(--lamp), .85);
  opacity: 0;
  animation: drift var(--d) linear var(--dl) infinite;
}

.shelf:not(.awake) .mote { animation-play-state: paused; }

@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .6; }
  50% { transform: translate(var(--x1), var(--y1)); opacity: .32; }
  80% { opacity: .62; }
  100% { transform: translate(var(--x2), var(--y2)); opacity: 0; }
}

.row {
  position: absolute;
  bottom: var(--plank);
  left: calc(50% - var(--inner) / 2);
  width: var(--inner);
  height: var(--cell);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-end;
}

.shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--plank);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 4, 3, .8) 0, rgba(6, 4, 3, .8) calc(50% - var(--bay) / 2),
      rgba(6, 4, 3, .3) calc(50% - var(--bay) / 2 + 1px), rgba(6, 4, 3, 0) calc(50% - var(--bay) / 2 + 80px),
      rgba(6, 4, 3, 0) calc(50% + var(--bay) / 2 - 80px), rgba(6, 4, 3, .3) calc(50% + var(--bay) / 2 - 1px),
      rgba(6, 4, 3, .8) calc(50% + var(--bay) / 2), rgba(6, 4, 3, .8) 100%),
    radial-gradient(calc(var(--bay) * .7) 140% at 50% 0, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .26) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .2));
}

.plank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--plank);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 4, 3, .8) 0, rgba(6, 4, 3, .8) calc(50% - var(--bay) / 2),
      rgba(6, 4, 3, .2) calc(50% - var(--bay) / 2 + 1px), rgba(6, 4, 3, 0) calc(50% - var(--bay) / 2 + 140px),
      rgba(6, 4, 3, 0) calc(50% + var(--bay) / 2 - 140px), rgba(6, 4, 3, .2) calc(50% + var(--bay) / 2 - 1px),
      rgba(6, 4, 3, .8) calc(50% + var(--bay) / 2), rgba(6, 4, 3, .8) 100%),
    radial-gradient(calc(var(--bay) * .5) 100% at 50% 0, rgba(var(--lamp), .22), rgba(var(--lamp), 0)),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .08) 0 2px, rgba(0, 0, 0, 0) 2px 11px, rgba(255, 220, 170, .035) 11px 12px, rgba(0, 0, 0, 0) 12px 23px),
    linear-gradient(180deg, #8a5d39 0, #6e4829 2px, #5c3b21 26%, #8a5d39 28%, #4d301b 34%, #3a2414 72%, #241509 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .6);
}

.shelfmark {
  position: absolute;
  z-index: 4;
  left: calc(50% - var(--bay) / 2 + var(--post) + 14px);
  bottom: calc((var(--plank) - 15px) / 2 - 1px);
  margin: 0;
  padding: 2px 7px 1px;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: .08em;
  color: #2a1d10;
  background: #e9dfc6;
  border-radius: 1px;
  box-shadow: 0 0 0 2px #39332d, 0 0 0 3px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .6);
}

.plinth {
  position: relative;
  width: min(calc(var(--bay) + 28px), 100%);
  height: 46px;
  margin: 0 auto;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #4f321c, #2c1a0d 42%, #170d06);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .7);
}

.plinth::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: rgba(255, 220, 170, .08);
}

/* ---------- a place on the shelf ---------- */

.slot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--w);
  height: var(--h);
}

.slot.live:not(.always) { z-index: 26; }
.slot.pulled,
.slot.live.pulled { z-index: 30; }

/* A soft contact shadow on the plank, and the shadow cast on the back of the case. */
.slot::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -4px;
  height: 9px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
  transition: opacity .4s;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 6px 0 0 0;
  z-index: -1;
  border-radius: 3px;
  box-shadow: 9px 6px 16px rgba(0, 0, 0, .55);
  transition: opacity .4s;
}

.slot.pulled::before,
.slot.pulled::after { opacity: 0; }

.item {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.slot.live .item {
  perspective: 1700px;
  perspective-origin: 50% 20%;
}

.mover {
  position: absolute;
  bottom: 0;
  left: calc(var(--ax) - var(--T) / 2);
  width: var(--T);
  height: var(--H);
  transform-origin: 50% 100%;
  transform: translate(0, 0) scale(var(--k));
}

.slot.live .mover {
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px) scale3d(var(--k), var(--k), var(--k));
  transition: transform .62s cubic-bezier(.3, .7, .25, 1) .17s;
}

.slot.pulled .mover {
  transform: translate3d(var(--pdx), var(--pdy), 0px) scale3d(var(--p), var(--p), var(--p));
  transition: transform .56s cubic-bezier(.2, .8, .2, 1) 0s;
}

.lean {
  position: absolute;
  inset: 0;
  transform-origin: var(--lo, 50%) 100%;
  transform: rotate(var(--lean, 0deg));
  transition: transform .45s ease;
}

.slot.live .lean { transform-style: preserve-3d; }
.slot.pulled .lean { transform: rotate(0deg); }

.obj {
  position: absolute;
  inset: 0;
}

.slot.live .obj {
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  transform: translateZ(calc(var(--W) / -2)) rotateY(var(--turn0)) translateZ(calc(var(--W) / 2));
  transition: transform .42s cubic-bezier(.4, 0, .2, 1) 0s;
}

.slot.pulled .obj {
  transform: translateZ(calc(var(--T) / -2)) rotateY(var(--turn1)) translateZ(calc(var(--W) / 2));
  transition: transform .66s cubic-bezier(.25, .85, .3, 1) .1s;
}

.face {
  position: absolute;
  top: 0;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

.cover,
.back {
  display: none;
  width: var(--W);
}

.cover {
  left: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}

.back {
  right: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

.slot.live .cover,
.slot.live .back { display: block; }

/* ---------- the call label every object carries ---------- */

.callno {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 1;
  translate: -50% 0;
  min-width: 36px;
  max-width: calc(100% - 10px);
  padding: 4px 3px 3px;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: 21px;
  line-height: 1;
  text-align: center;
  color: #2a1d10;
  background: #efe7d2;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---------- books ---------- */

.f-book .spine,
.f-book .back {
  background: var(--cloth);
  overflow: hidden;
}

.f-book .spine { border-radius: 5px 5px 2px 2px; }

.f-book .spine::before,
.f-book .back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .1) 9%, rgba(255, 236, 206, .15) 26%, rgba(255, 236, 206, .05) 46%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .52) 100%),
    linear-gradient(180deg, rgba(255, 222, 176, .16), rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .16) 80%, rgba(0, 0, 0, .34)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.ttl {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 84px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttl-in {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.12;
  text-align: center;
  color: var(--ti);
}

.ttl-in.wrap {
  white-space: normal;
  height: 100%;
}

.st-gilt .ttl-in {
  font-family: "Castoro Titling", Georgia, serif;
  letter-spacing: .07em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 240, 200, .18);
}

.st-gilt .band {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  border-top: 2px solid var(--ti);
  border-bottom: 2px solid var(--ti);
  opacity: .85;
}

.st-gilt .band.head { top: 24px; }
.st-gilt .band.tail { bottom: 64px; }

.st-label .rib {
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(255, 235, 200, .18) 45%, rgba(0, 0, 0, .42));
}

.st-label .rib.r1 { top: 18px; }
.st-label .rib.r2 { top: 42px; }
.st-label .rib.r3 { bottom: 92px; }
.st-label .rib.r4 { bottom: 66px; }

.st-label .ttl {
  top: 60px;
  bottom: 108px;
  left: 6px;
  right: 6px;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--label);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .6), inset 0 0 0 3px var(--label), inset 0 0 0 4px rgba(216, 180, 106, .32), 0 1px 2px rgba(0, 0, 0, .5);
}

.st-label .ttl-in {
  font-family: "Goudy Bookletter 1911", Georgia, serif;
  color: var(--gilt-hi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

.st-modern .mark {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid var(--ti);
  border-radius: 50%;
  opacity: .8;
}

.st-modern .ttl { top: 52px; }

.st-modern .ttl-in {
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
}

.st-italic .frame {
  position: absolute;
  inset: 12px 6px 62px;
  border: 1px solid var(--ti);
  border-radius: 2px;
  opacity: .5;
}

.st-italic .ttl { top: 30px; bottom: 76px; }

.st-italic .ttl-in {
  font-family: "Castoro", Georgia, serif;
  font-style: italic;
}

/* Book covers */

.f-book .cover {
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  background: var(--cloth);
  color: var(--tx);
}

.f-book .cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 6%, rgba(255, 255, 255, .07) 8%, rgba(0, 0, 0, 0) 11%),
    linear-gradient(160deg, rgba(255, 226, 182, .2), rgba(255, 226, 182, 0) 42%, rgba(0, 0, 0, .24)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.f-book .cover::after {
  content: "";
  position: absolute;
  inset: 12px 12px 12px 24px;
  border: 1px solid rgba(0, 0, 0, .34);
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(255, 236, 206, .08), inset 1px 1px 0 rgba(255, 236, 206, .06);
  pointer-events: none;
}

.cv {
  position: absolute;
  inset: 28px 24px 26px 36px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--fs, 1));
  overflow: hidden;
  text-align: center;
}

.cv-top {
  flex: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: calc(13px * var(--fs, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.cv-plate {
  position: relative;
  flex: none;
  width: 84%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 4px rgba(239, 229, 207, .1), 0 2px 6px rgba(0, 0, 0, .4);
}

.cv-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s;
}

.cv-plate img.on { opacity: 1; }
.cv.noplate .cv-plate { display: none; }

.cv-title {
  flex: none;
  font-size: calc(28px * var(--fs, 1));
  line-height: 1.12;
  color: var(--ti);
  text-wrap: balance;
}

.cv-tag {
  flex: none;
  font-style: italic;
  font-size: calc(15.5px * var(--fs, 1));
  line-height: 1.42;
  text-wrap: pretty;
}

.cv-open {
  flex: none;
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: calc(13px * var(--fs, 1));
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cv-open::after {
  content: "";
  width: 18px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 38%, 66% 38%, 66% 0, 100% 50%, 66% 100%, 66% 62%, 0 62%);
}

.st-gilt .cv-title { font-family: "Castoro Titling", Georgia, serif; letter-spacing: .05em; }
.st-label .cv-title { font-family: "Goudy Bookletter 1911", Georgia, serif; font-size: calc(31px * var(--fs, 1)); }
.st-modern .cv-title {
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: calc(40px * var(--fs, 1));
  line-height: .98;
  text-transform: uppercase;
}
.st-italic .cv-title { font-style: italic; font-size: calc(31px * var(--fs, 1)); }

/* ---------- pamphlets ---------- */

.f-post .spine,
.f-post .back,
.f-post .cover {
  background: var(--paper);
  color: #1f1912;
  overflow: hidden;
}

.f-post .spine { border-radius: 2px; }

.f-post .spine::before,
.f-post .back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .22) 34%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .24)),
    linear-gradient(180deg, rgba(255, 230, 190, .14), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .2));
}

.staple {
  position: absolute;
  left: 50%;
  z-index: 3;
  width: 3px;
  height: 26px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6f6f6c, #ececea 50%, #7a7a76);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

.staple.s1 { top: 14px; }
.staple.s2 { bottom: 50px; }

.f-post .ttl { top: 48px; bottom: 82px; padding: 0 3px; }

.f-post .ttl-in {
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  color: #1f1912;
}

.f-post .callno {
  bottom: 14px;
  min-width: 0;
  padding: 3px 1px 2px;
  font-size: 15px;
  background: #fbf8f0;
}

.f-post .cover { border-radius: 1px 3px 3px 1px; }

.f-post .cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0) 5%),
    linear-gradient(165deg, rgba(255, 245, 225, .3), rgba(255, 245, 225, 0) 45%, rgba(0, 0, 0, .12));
}

.f-post .cv {
  inset: 24px 22px 22px 28px;
  align-items: flex-start;
  text-align: left;
}

.f-post .cv-top {
  padding-bottom: 7px;
  border-bottom: 2px solid currentColor;
}

.f-post .cv-title {
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: calc(44px * var(--fs, 1));
  line-height: .94;
  text-transform: uppercase;
  color: #1f1912;
}

.f-post .cv-tag { font-style: normal; }

.f-post .cv-plate {
  width: 100%;
  background: rgba(0, 0, 0, .1);
  box-shadow: none;
}

.f-post .cv-plate img { filter: grayscale(1) contrast(1.3) brightness(1.05); mix-blend-mode: multiply; }

/* ---------- clear blocks ---------- */

.slot.f-object.live .item {
  perspective: 900px;
  perspective-origin: 50% -140%;
}

.f-object::before { display: none; }

.f-object::after {
  left: 6%;
  right: 6%;
  bottom: -5px;
  height: 14px;
  background: radial-gradient(closest-side, rgba(var(--lamp), .42), rgba(var(--lamp), 0));
}

.f-object .face {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  border-radius: 9px;
  background: linear-gradient(140deg, rgba(var(--tint), .17), rgba(var(--tint), .04) 38%, rgba(var(--tint), .02) 62%, rgba(var(--tint), .12));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3), inset 0 0 22px rgba(255, 255, 255, .07);
}

.f-object .cover,
.f-object .back { display: block; }

.f-object .front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .2) 24%, rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .09) 66%, rgba(255, 255, 255, 0) 72%);
}

.f-object .top {
  left: 0;
  width: 100%;
  top: calc(var(--W) * -1);
  height: var(--W);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
  background: linear-gradient(180deg, rgba(255, 244, 220, .08), rgba(255, 240, 210, .26));
}

.f-object .rear {
  left: 0;
  width: 100%;
  transform: translateZ(calc(var(--W) * -1)) rotateY(180deg);
}

.core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
  font-family: "Castoro Titling", Georgia, serif;
  font-size: 78px;
  line-height: 1;
  color: rgba(255, 238, 205, .9);
  text-shadow: 0 0 18px rgba(var(--lamp), .6), 0 2px 0 rgba(0, 0, 0, .35);
  transform: translateZ(calc(var(--W) / -2));
  pointer-events: none;
  transition: opacity .3s;
}

.engr {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  transition: opacity .3s;
}

.engr-in {
  display: block;
  max-width: 100%;
  font-family: "Castoro Titling", Georgia, serif;
  line-height: 1.1;
  letter-spacing: .1em;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.f-object .cover {
  color: #fbf7ee;
  transition: background .35s;
}

.f-object.pulled .cover {
  background: linear-gradient(160deg, rgba(64, 70, 74, .86), rgba(26, 30, 33, .9));
}

.f-object .cv {
  inset: 20px 18px 18px;
  opacity: 0;
  transition: opacity .2s;
}

.f-object.pulled .cv { opacity: 1; transition: opacity .35s .38s; }
.f-object.pulled .core,
.f-object.pulled .engr { opacity: 0; }

.f-object .cv-top,
.f-object .cv-open { font-size: calc(11px * var(--fs, 1)); }
.f-object .cv-title { font-family: "Castoro Titling", Georgia, serif; font-size: calc(19px * var(--fs, 1)); letter-spacing: .06em; color: #fff6e2; }
.f-object .cv-tag { font-size: calc(13.5px * var(--fs, 1)); }
.f-object .cv-plate { width: 70%; }

/* ---------- rolled prints ---------- */

.f-prints::before { inset: 10% 2% 0; border-radius: 40px 40px 6px 6px; }

.bundle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--T);
  height: var(--H);
  transform-origin: 0 100%;
  transform: scale(var(--k));
}

.tube {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #120c08 0 18%, rgba(0, 0, 0, .55) 21%, rgba(0, 0, 0, 0) 27%),
    repeating-radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 0 3px, rgba(70, 45, 20, .22) 3px 4px),
    radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 0 66%, var(--ink) 67% 70%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(circle closest-side at 40% 36%, #fffaf0, var(--paper) 58%, #b4a382 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .14), inset -5px -7px 12px rgba(0, 0, 0, .2);
  transition: opacity .35s, transform .45s;
}

.f-prints.pulled .tube.lifted { opacity: 0; transform: translateY(-14px) scale(1.08); }

.band {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: calc(var(--H) * .36);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 9px;
  color: #2a1d10;
  background: linear-gradient(180deg, #f1e6cb, #e0d1ac);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.band-no {
  flex: none;
  padding: 3px 6px 2px;
  font-family: "Cutive Mono", "Courier New", monospace;
  font-size: 21px;
  line-height: 1;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.band-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.band-in {
  display: inline-block;
  white-space: nowrap;
  font-family: "Castoro Titling", Georgia, serif;
  letter-spacing: .06em;
}

.sheet-mover {
  display: none;
  left: calc(var(--ax) - var(--cw) / 2);
  width: var(--cw);
  height: var(--ch);
  opacity: 0;
}

.slot.live .sheet-mover {
  display: block;
  transition: transform .6s cubic-bezier(.3, .7, .25, 1) .3s, opacity .25s .7s;
}

.slot.pulled .sheet-mover {
  opacity: 1;
  transition: transform .56s cubic-bezier(.2, .8, .2, 1) 0s, opacity .15s 0s;
}

.sheet {
  position: absolute;
  inset: 0;
}

.rod {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  z-index: 2;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #8a5d39, #3d2614);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.paper {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  bottom: 0;
  color: #22170d;
  background:
    linear-gradient(170deg, rgba(255, 252, 244, .5), rgba(255, 252, 244, 0) 40%, rgba(0, 0, 0, .06)),
    #f1e9d6;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .45s cubic-bezier(.4, 0, .2, 1);
}

.slot.pulled .paper {
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s cubic-bezier(.25, .8, .3, 1) .22s;
}

.roll {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 4px;
  z-index: 3;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, #fbf6ea, #e8dcc2 45%, #b5a27e);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.slot.pulled .roll {
  transform: translateY(calc(var(--ch) - 26px));
  transition: transform .7s cubic-bezier(.25, .8, .3, 1) .22s;
}

.f-prints .cv { inset: 30px 26px 36px; }
.f-prints .cv-title { font-family: "Castoro Titling", Georgia, serif; font-size: calc(30px * var(--fs, 1)); letter-spacing: .05em; color: #1b130b; }
.f-prints .cv-plate { width: 100%; }

/* ---------- shelf dummy and bookend ---------- */

.f-dummy .spine {
  border-radius: 2px;
  background: linear-gradient(90deg, #77736b, #c4beb1 32%, #a7a195 70%, #6e6a63);
  opacity: .85;
}

.f-dummy .callno {
  top: 28px;
  bottom: auto;
  min-width: 0;
  padding: 3px 1px 2px;
  font-size: 15px;
}

.bookend {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--be);
  height: calc(var(--cell) * .4);
}

.bookend::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36%;
  height: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #1b1917, #57504a 40%, #24211f);
  box-shadow: 4px 5px 12px rgba(0, 0, 0, .6);
}

.bookend::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #4d4640, #1a1816);
}

/* ---------- light on the room ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(6, 4, 2, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.has-pulled .scrim { opacity: 1; }

.torch {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 240px at var(--tx, -400px) var(--ty, -400px), rgba(var(--lamp), .11), rgba(var(--lamp), 0) 70%);
  mix-blend-mode: screen;
  transition: opacity .6s;
}

.torch.on { opacity: 1; }

/* ---------- focus ---------- */

.item:focus-visible .cover,
.item:focus-visible .sheet {
  outline: 3px solid var(--gilt-hi);
  outline-offset: 4px;
}

.item:focus-visible .spine { box-shadow: 0 0 0 3px var(--gilt-hi); }

/* ---------- phone ---------- */

@media (max-width: 699px) {
  .cornice { padding-top: 16px; }
  .cap { height: 10px; margin: 0 -6px; }
  .cap::after { bottom: -7px; height: 4px; }
  .frieze { padding: 17px 10px 15px; }
  .frieze::before { inset: 6px; }
  .name { letter-spacing: .12em; text-indent: .12em; }
  .line { margin-top: 8px; }
  .shelfmark { left: calc(50% - var(--bay) / 2 + var(--post) + 8px); }
}

@media (hover: none) {
  .has-pulled .scrim {
    pointer-events: auto;
    background: rgba(6, 4, 2, .66);
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .glow,
  .lamp::after { animation: none; }
  .motes { display: none; }
  .slot .mover,
  .slot .lean,
  .slot .obj,
  .paper,
  .roll,
  .tube,
  .scrim,
  .f-object .cv { transition: none !important; }
  .slot.pulled .mover { animation: settle .2s ease both; }
}

@keyframes settle {
  from { opacity: 0; }
  to { opacity: 1; }
}