:root {
  color-scheme: dark;
  --gold: #d9b377;
  --ink: #eadbc0;
  --muted: #c0ad91;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "Courier New", monospace;
  --shelf-unit: clamp(1px, .079vw, 1.48px);
  --post: calc(29 * var(--shelf-unit));
  --case-width: min(calc(100% - 118px), 88vw, 1744px);
}
* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; scrollbar-color: #725137 #17130f; }
body {
  margin: 0; min-width: 280px; min-height: 100vh; color: var(--ink);
  background: radial-gradient(ellipse at 50% 120px, #35291e 0, #211a15 37%, #151210 76%) fixed;
  font-family: var(--serif);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 79px, #09080725 79px 81px),
              repeating-linear-gradient(90deg, #f5bf7510 0 1px, transparent 1px 149px);
  mask-image: radial-gradient(ellipse, transparent 45%, #000);
}
body:has(dialog[open]) { overflow: hidden; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #f6cf91; outline-offset: 4px; }
svg, canvas { display: block; }
canvas { image-rendering: pixelated; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pixel-button {
  display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 40px;
  color: #edcea0; background: #2a2018; border: 1px solid #79583a; border-radius: 0;
  box-shadow: inset 0 0 0 2px #1b1511, inset 0 3px #513924, 3px 3px #110e0b;
  padding: 0 13px; font: 700 12px var(--mono); letter-spacing: .035em;
}
.pixel-button:hover { background: #3b2a1c; border-color: #c79759; }
.icon { width: 16px; height: 16px; color: var(--gold); flex: none; }
.toolbar { position: absolute; top: 28px; left: max(24px, calc((100% - 1240px) / 2)); z-index: 2; }
.intro { position: relative; text-align: center; padding: 34px 20px 0; }
.crest { width: 96px; height: 39px; margin: 0 auto 10px; }
h1 { margin: 0; font-size: clamp(38px, 6.2vw, 78px); line-height: 1; letter-spacing: -.055em; font-weight: 400; text-shadow: 0 4px #17110d; }
.search {
  display: flex; align-items: center; width: min(100%, 444px); height: 49px; gap: 12px;
  margin: 25px auto 0; padding: 0 11px 0 15px; background: #1b1511;
  border: 1px solid #a07649; box-shadow: inset 0 0 0 3px #2b2018, 3px 3px #110d09;
}
.search:focus-within { border-color: #efbe79; }
.featured-filter { margin-top: 12px; min-height: 34px; font-size: 11px; }
.featured-filter canvas { width: 16px; height: 16px; }
.featured-filter[aria-pressed="true"] {
  border-color: #f2c761; background: #584022; color: #ffe2a0;
  box-shadow: inset 0 0 0 2px #2d2117, 0 0 12px #dca94d26;
}
.search input { color: var(--ink); background: transparent; border: 0; outline: 0; min-width: 0; flex: 1; font: 14px var(--mono); }
.search input::placeholder { color: #b7a489; }
.clear { min-width: 27px; height: 29px; padding: 0; color: var(--gold); background: transparent; border: 0; font-size: 22px; }
[hidden] { display: none !important; }
.key { color: #c3ab8b; border: 1px solid #69503a; padding: 2px 7px; font: 12px var(--mono); }
.catalog-bar {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 9px 18px;
  margin: 0 auto 11px; padding: 0 11px; width: var(--case-width);
  color: var(--muted); font: clamp(12px, .8vw, 17px) var(--mono);
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 17px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; background: var(--swatch); transform: rotate(45deg); }
#arrange-status { font-size: 11px; }
#catalog { position: relative; padding-top: 29px; }
.case { position: relative; width: var(--case-width); margin: auto; isolation: isolate; }
.cap, .foot, .rail, .wood { width: 100%; }
.cap { position: relative; z-index: 4; height: calc(58 * var(--shelf-unit)); }
.foot { height: calc(28 * var(--shelf-unit)); }
.vine {
  position: absolute; width: calc(176 * var(--shelf-unit)); height: calc(320 * var(--shelf-unit));
  top: calc(17 * var(--shelf-unit)); z-index: 6;
  pointer-events: none; filter: drop-shadow(3px 5px 1px #0d1009a0);
}
.vine-left { left: calc(-73 * var(--shelf-unit)); }
.vine-right { right: calc(-73 * var(--shelf-unit)); transform: scaleX(-1); height: calc(268 * var(--shelf-unit)); }
#shelves { position: relative; }
.shelf {
  position: relative; height: calc(246 * var(--shelf-unit)); display: grid;
  grid-template-columns: var(--post) minmax(0, 1fr) var(--post);
  grid-template-rows: minmax(0, 1fr) calc(29 * var(--shelf-unit));
}
.wood { height: 100%; }
.wood.right { transform: scaleX(-1); }
.niche { position: relative; min-width: 0; }
.niche .wood { position: absolute; inset: 0; }
.niche::after {
  content: ""; position: absolute; pointer-events: none; inset: 0;
  box-shadow: inset 12px 10px 19px #0b0806a8, inset -11px -5px 20px #0c080680;
}
.rail { grid-column: 1 / -1; height: 100%; z-index: 3; }
.books {
  position: absolute; z-index: 2; inset: 6px 0 0;
  display: flex; align-items: flex-end; gap: calc(4 * var(--shelf-unit));
  padding-inline: clamp(10px, 3vw, calc(34 * var(--shelf-unit)));
}
.book {
  touch-action: none; user-select: none; cursor: grab;
  position: relative; isolation: isolate; flex: 0 0 calc(var(--width) * var(--shelf-unit));
  width: calc(var(--width) * var(--shelf-unit)); height: calc(var(--height) * var(--shelf-unit));
  min-width: 0; padding: 0; border: 0; color: var(--letter); background: var(--cover);
  background-image: repeating-linear-gradient(112deg, transparent 0 3px, #00000011 3px 4px),
    linear-gradient(90deg, #100b0966 0 3px, #ffffff29 3px 5px, transparent 5px 60%, #00000055 100%);
  box-shadow: inset 0 3px #ffffff26, inset -2px 0 #0006, 3px -1px #0e0908a8;
  border-radius: 3px 3px 0 0;
  transition: transform 170ms ease, filter 170ms ease;
}
.book::before {
  content: ""; position: absolute; inset: 9px 3px 10px; border: 1px solid currentColor; opacity: .55;
  background: linear-gradient(to bottom, currentColor 2px, transparent 2px calc(100% - 2px), currentColor calc(100% - 2px));
}
.book[data-binding="1"]::before { inset-inline: 0; border-inline: 0; }
.book[data-binding="2"]::before { border-style: double; border-width: 3px; }
.book:hover, .book:focus-visible { transform: translateY(-11px); filter: brightness(1.2); z-index: 4; }
.book.is-dragging { opacity: .25; transform: none; }
body.dragging-books, body.dragging-books * { cursor: grabbing !important; user-select: none; }
.book.drag-preview {
  position: fixed; z-index: 30; pointer-events: none; margin: 0;
  transform: rotate(-4deg); filter: brightness(1.16); transition: none;
  box-shadow: 8px 12px 18px #0009;
}
.drop-marker {
  position: fixed; z-index: 29; pointer-events: none; width: 3px;
  background: #f2cc88; box-shadow: 0 0 9px #e8b65d; transform: translateX(-50%);
}
.drop-marker::after {
  content: ""; position: absolute; bottom: -3px; left: -4px; width: 11px; height: 5px;
  background: #f2cc88;
}
.spine-title {
  position: absolute; left: 50%; top: calc(29 * var(--shelf-unit)); transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; text-align: end; overflow-wrap: anywhere;
  height: calc(100% - 47 * var(--shelf-unit)); max-width: calc(100% - 5px);
  font: 700 calc(var(--type-size) * var(--shelf-unit))/1.05 var(--serif); letter-spacing: .01em;
  text-shadow: 1px 1px #100b0b;
}
.sigil { position: absolute; inset: calc(13 * var(--shelf-unit)) 0 auto; margin: auto; width: calc(12 * var(--shelf-unit)); height: calc(12 * var(--shelf-unit)); opacity: .9; }
.sigil.featured-star {
  width: calc(13 * var(--shelf-unit)); height: calc(13 * var(--shelf-unit));
  opacity: 1; filter: drop-shadow(0 1px 1px #382006);
}
.book[data-bottom-sigil="true"] .sigil { top: auto; bottom: calc(13 * var(--shelf-unit)); }
.book[data-bottom-sigil="true"] .spine-title { top: calc(17 * var(--shelf-unit)); }
#tooltip {
  position: fixed; z-index: 12; pointer-events: none; padding: 8px 12px;
  background: #17110e; color: #f3dbb2; border: 1px solid #997348; box-shadow: 3px 3px #0d0907;
  max-width: calc(100vw - 16px);
}
#tooltip small { display: block; margin-top: 3px; font: 11px var(--mono); color: var(--muted); }
.departure { position: fixed; z-index: 9; pointer-events: none; margin: 0; }
.empty {
  position: absolute; z-index: 5; inset: 0 var(--post) 29px; display: grid;
  place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 12px;
}
.empty p { margin: 0; font-size: clamp(19px, 4vw, 27px); }
.tail { position: relative; display: grid; place-items: center; min-height: 96px; padding: 16px; }
.tail span { color: var(--muted); font: 12px var(--mono); }
#top { position: fixed; z-index: 8; top: 18px; right: 8px; width: 42px; padding: 0; }
dialog {
  --book-scale: min(1.5vw, 2.5dvh);
  border: 0; padding: 24px 20px; background: transparent; color: #352315;
  width: min(95vw, 142dvh, 1800px);
  max-width: none; max-height: calc(100dvh - 16px); overflow: auto;
}
dialog::backdrop { background: #0b0806d6; backdrop-filter: blur(3px); }
.reader { position: relative; perspective: 1800px; }
.volume {
  position: relative; background: var(--cover, #532d3e); border: 3px solid #251713;
  padding: 9px; box-shadow: 0 4px var(--cover), 0 8px #251713, 0 15px 38px #0009;
  animation: volume-open 480ms cubic-bezier(.2,.75,.27,1) both;
}
.spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative;
  height: clamp(310px, 72dvh, 1040px);
  background: #e8d5ad; border: 1px solid #7a5737;
  box-shadow: 0 3px #b08e60, 0 5px #6b5138;
}
.paper {
  position: relative; min-height: 0; min-width: 0; container-type: inline-size;
  background: repeating-linear-gradient(105deg, transparent 0 5px, #87582908 5px 6px),
    linear-gradient(90deg, #efddbb, #ead4ac 88%, #c3a276);
}
.paper-right {
  background: repeating-linear-gradient(105deg, transparent 0 5px, #87582908 5px 6px),
    linear-gradient(90deg, #c4a275, #ebd6af 10%, #f0dfbd);
}
.page-copy {
  height: calc(100% - 33px); overflow: auto; color-scheme: light;
  padding: clamp(20px, 6cqw, 70px) clamp(18px, 8cqw, 86px) 4px;
  scrollbar-color: #a47f57 transparent;
}
.paper h2, .paper h3 { margin: 12px 0 17px; line-height: 1; font-weight: 400; }
.paper h2 { font-size: clamp(28px, 10cqw, 82px); letter-spacing: -.05em; overflow-wrap: anywhere; }
.paper h3 { font-size: clamp(25px, 8cqw, 64px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.paper p { margin: 0 0 15px; font: clamp(16px, var(--book-scale), 25px)/1.55 var(--serif); }
.paper .label { font: 700 clamp(10px, 2.65cqw, 15px) var(--mono); color: #644626; letter-spacing: .1em; text-transform: uppercase; }
.paper .illustration { width: 100%; max-width: 460px; margin: 24px 0 14px; border: 3px double #7a5737; }
.paper .folio { position: absolute; bottom: 13px; inset-inline-end: 5%; font: clamp(12px, 2.5cqw, 17px) var(--mono); color: #735230; }
.paper-left .folio { inset-inline: 5% auto; }
.turning-leaf {
  position: absolute; inset-block: 0; width: 50%; z-index: 2; pointer-events: none;
  transform-style: preserve-3d;
}
.turning-leaf.forward { left: 50%; }
.turning-leaf.backward { right: 50%; }
.leaf-strip { position: absolute; top: 0; bottom: 0; transform-style: preserve-3d; }
.forward .leaf-strip { left: 0; transform-origin: left center; }
.backward .leaf-strip { right: 0; transform-origin: right center; }
.leaf-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.leaf-face.reverse { transform: rotateY(180deg); }
.leaf-face .paper { position: absolute; inset-block: 0; }
.leaf-face::after { content: ""; position: absolute; inset: 0; background: var(--leaf-shading, transparent); }
.page-underlay { position: absolute; inset-block: 0; width: 50%; clip-path: inset(0 100%); }
.page-underlay.paper-left { left: 0; }
.page-underlay.paper-right { right: 0; }
.moving-spread {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr;
  background: #ead4ac; pointer-events: none;
}
#close { position: absolute; z-index: 3; right: -10px; top: -15px; padding: 0; width: 40px; }
.reader-controls { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin: 20px 0 0; color: var(--ink); font: 12px var(--mono); }
.reader-controls button:disabled { opacity: .45; }
@media (min-width: 681px) {
  .spread { perspective: max(2400px, 400dvh); }
  .volume[data-opening] .spread > .paper-left {
    transform-origin: right center;
    animation: leaf-open 470ms cubic-bezier(.26,.68,.25,1) both;
  }
}
@media (min-width: 681px) and (min-height: 480px) {
  dialog { overflow: visible; }
}
@keyframes leaf-open {
  from { transform: rotateY(72deg); filter: brightness(.65); }
  to { transform: rotateY(0); filter: brightness(1); }
}
@keyframes volume-open {
  from { opacity: 0; transform: translateY(32px) rotateY(-48deg) scale(.81); }
  to { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
@media (max-width: 680px) {
  :root { --post: 17px; --case-width: calc(100% - 84px); }
  .case, .catalog-bar { margin-left: 26px; margin-right: 58px; }
  .toolbar { position: relative; top: auto; left: auto; margin: 13px 13px 0; }
  .intro { padding-top: 5px; }
  .crest { width: 78px; height: 32px; }
  .catalog-bar { padding: 0 2px; }
  .legend { gap: 6px 11px; }
  .cap { height: 44px; }
  .vine { width: 90px; height: 192px; left: -27px; }
  .vine-right { left: auto; right: -27px; height: 159px; }
  .shelf { height: 227px; }
  dialog { width: calc(100% - 8px); padding-inline: 13px; }
  .spread { grid-template-columns: 1fr; height: auto; overflow: hidden; }
  .page-copy { height: auto; padding: 24px 21px 34px; }
  .paper-right { border-top: 1px solid #ae895f; }
  .reader-controls .pixel-button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.paper { font: clamp(16px, var(--book-scale), 25px)/1.55 var(--serif); }
.page-copy { white-space: normal; overflow-wrap: anywhere; }
.paper img { max-width: 100%; height: auto; max-height: 40dvh; object-fit: contain; }
.paper .cover-image { display: block; margin-top: 20px; max-height: 35dvh; }
.paper .review-photo {
  display: block; width: fit-content; max-width: 100%; margin: 18px auto;
  line-height: 0; filter: drop-shadow(3px 4px 0 #5a42252e);
}
.paper .photo-print {
  display: block; padding: 8px 8px 18px; background: #fffdf5;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0,
    calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.paper .review-photo img { display: block; margin: 0; max-width: 100%; max-height: none; object-fit: contain; }
.paper .review-tags { margin-top: 18px; font-size: .8em; color: #735230; }
.paper figure { margin: 1em 0; }
.paper figcaption { font-size: .8em; }
.paper h1,.paper h4,.paper h5,.paper h6 { font-size: 1.3em; line-height: 1.2; margin: .8em 0; }
.paper ul,.paper ol { padding-left: 1.4em; }
.paper li { margin: .35em 0; }
.paper a { text-decoration: underline; color: #6b4524; }
.paper table { max-width: 100%; border-collapse: collapse; font-size: .8em; }
.paper td,.paper th { padding: .3em; border: 1px solid #b89a70; overflow-wrap: anywhere; }
.paper pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75em; }
.paper blockquote { margin: 1em 0; border-left: 3px solid #b39160; padding-left: .7em; }
.pagination-probe { position: absolute; visibility: hidden; pointer-events: none; top: 0; left: 0; }
.pagination-probe .page-copy { height: calc(100% - 33px); overflow: hidden; }
.reader-retry { padding: 10px 16px; border: 1px solid #7a5737; color: #352315; background: #e8d5ad; }