:root {
  --paper: #f2e5cf;
  --ink: #22291f;
  --red: #a34534;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #eadbc0; font-family: var(--serif); }
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background: #eadbc0 url("assets/world-print.png") center 48% / cover no-repeat;
  filter: saturate(.82) contrast(.94);
  transform: scale(1.015);
}
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: rgb(248 240 222 / 56%);
}

button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
.atlas-shell { min-height: 100dvh; padding: 0 clamp(24px, 4vw, 70px) 18px; }
.atlas-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(38 44 36 / 22%); padding-bottom: 15px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { display: grid; width: 40px; aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 700 11px/1 var(--sans); letter-spacing: .08em; }
.brand b, .brand small, .edition span { display: block; }
.brand b { font: 700 12px/1.2 var(--sans); letter-spacing: .19em; }
.brand small { margin-top: 4px; font: 500 9px/1 var(--sans); letter-spacing: .12em; }
.edition { margin: 0; font: 700 11px/1.4 var(--sans); letter-spacing: .14em; text-align: right; }
.edition span { margin-top: 2px; color: #6b675d; font-size: 8px; }

.library-hero { position: relative; display: grid; min-height: calc(100dvh - 18px); grid-template-rows: auto 1fr; justify-items: center; }
.hero-copy { position: relative; z-index: 3; margin-top: clamp(104px, 14vh, 162px); text-align: center; }
.eyebrow { margin: 0 0 20px; color: var(--red); font: 700 11px/1 var(--sans); letter-spacing: .25em; }
.hero-copy h1 { display: flex; align-items: baseline; justify-content: center; gap: .16em; margin: 0; white-space: nowrap; font: 400 clamp(39px, 5.15vw, 74px)/1.05 var(--serif); letter-spacing: -.055em; }
.hero-copy h1 span { display: inline-block; }
.hero-copy h1 em { color: var(--red); font-style: normal; }

.shelf-zone { position: relative; align-self: end; width: min(980px, 96vw); min-height: 470px; padding-bottom: 150px; }
.shelf { position: absolute; z-index: 2; left: 50%; bottom: 150px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(3px, .35vw, 5px); width: max-content; min-width: 520px; padding: 0 18px; transform: translateX(-50%); perspective: 1100px; }
.book-item { position: relative; flex: 0 0 var(--width); width: var(--width); height: var(--height); }
.book-spine { position: relative; width: 100%; height: 100%; overflow: hidden; border: 0; padding: 0; color: var(--spine-text); background: var(--spine); box-shadow: inset 5px 0 rgb(255 255 255 / 13%), inset -5px 0 rgb(0 0 0 / 9%), 0 11px 18px rgb(47 35 19 / 14%); transform-origin: 50% 100%; transition: transform .28s ease, filter .28s ease, box-shadow .28s ease; }
.book-spine::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 14%; height: 24%; background: var(--stripe); opacity: .92; }
.book-spine::after { content: ""; position: absolute; z-index: 3; left: 14%; right: 14%; bottom: 17px; height: 1px; background: currentColor; opacity: .56; }
.book-item-1 .book-spine::before { top: 13%; height: 11%; clip-path: polygon(0 0, 100% 0, 100% 58%, 66% 58%, 66% 100%, 33% 100%, 33% 58%, 0 58%); }
.book-item-2 .book-spine::before { left: 16%; right: 16%; top: 9%; height: 29%; border: 1px solid currentColor; border-radius: 50%; background: transparent; opacity: .38; }
.book-item-3 .book-spine::before { top: 12%; height: 15%; background: repeating-linear-gradient(165deg, transparent 0 8px, var(--stripe) 8px 10px); }
.book-item-4 .book-spine::before { top: 12%; height: 19%; background: linear-gradient(135deg, var(--stripe) 0 30%, transparent 30% 44%, var(--stripe) 44% 67%, transparent 67%); }
.book-item-5 .book-spine::before { top: 11%; height: 9%; background: linear-gradient(90deg, transparent 0 22%, var(--stripe) 22% 78%, transparent 78%); }
.book-item-6 .book-spine::before { top: 12%; height: 18%; clip-path: polygon(0 0, 42% 0, 42% 33%, 70% 33%, 70% 66%, 100% 66%, 100% 100%, 0 100%); }
.book-item-7 .book-spine::before { top: 9%; height: 25%; background: repeating-linear-gradient(155deg, transparent 0 10px, var(--stripe) 10px 13px); }
.book-item-8 .book-spine::before { top: 13%; height: 13%; background: radial-gradient(circle at 50% 50%, var(--stripe) 0 13%, transparent 14%), linear-gradient(90deg, transparent 0 45%, var(--stripe) 45% 55%, transparent 55%); }
.book-item-9 .book-spine::before { top: 11%; height: 19%; border-radius: 50% 50% 0 0; background: var(--stripe); opacity: .45; }
.book-item-10 .book-spine::before { top: 12%; height: 12%; background: linear-gradient(135deg, var(--stripe) 0 42%, transparent 42% 58%, var(--stripe) 58%); }
.spine-ornament { position: absolute; z-index: 4; top: 18px; left: 50%; width: 11px; height: 2px; background: currentColor; transform: translateX(-50%); opacity: .62; }
.spine-title { position: absolute; z-index: 4; inset: 29% 0 7%; display: flex; align-items: center; justify-content: center; gap: 10px; writing-mode: vertical-rl; }
.spine-title b { font: 500 clamp(15px, 1.25vw, 19px)/1 var(--serif); letter-spacing: .1em; }
.spine-title em { font: 700 8.5px/1 var(--sans); font-style: normal; letter-spacing: .12em; opacity: .82; }
.type-kai .spine-title b { font-family: KaiTi, STKaiti, var(--serif); font-size: 20px; font-weight: 400; }
.type-sans .spine-title b { font-family: "Microsoft YaHei", var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.type-fang .spine-title b { font-family: FangSong, STFangsong, var(--serif); font-size: 19px; letter-spacing: .14em; }
.type-hei .spine-title b { font-family: SimHei, "Microsoft YaHei", var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.type-bold .spine-title b { font-family: "Microsoft YaHei", var(--sans); font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.type-song .spine-title em, .type-fang .spine-title em { font-family: Georgia, serif; font-weight: 700; letter-spacing: .1em; }
.type-kai .spine-title em { font-family: "Arial Narrow", var(--sans); font-size: 9px; font-weight: 500; }
.type-sans .spine-title em, .type-bold .spine-title em { font-family: Impact, "Arial Narrow", var(--sans); font-size: 9px; font-weight: 400; }
.book-spine:hover, .book-spine:focus-visible { z-index: 5; filter: brightness(1.045); outline: none; transform: translateY(-12px); box-shadow: inset 5px 0 rgb(255 255 255 / 14%), inset -5px 0 rgb(0 0 0 / 9%), 0 20px 25px rgb(47 35 19 / 20%); }

.shelf-base { position: absolute; z-index: 1; left: 50%; bottom: 140px; width: min(720px, 90vw); height: 12px; border-top: 2px solid rgb(65 55 42 / 74%); border-bottom: 1px solid rgb(65 55 42 / 27%); background: rgb(120 101 72 / 12%); box-shadow: 0 10px 20px rgb(48 37 21 / 14%); transform: translateX(-50%); }

.hover-preview { position: absolute; z-index: 12; top: calc(100% + 18px); left: 50%; width: 120px; margin: 0; overflow: hidden; border: 5px solid #f4ead7; background: #f4ead7; box-shadow: 0 16px 32px rgb(44 34 22 / 26%); opacity: 0; pointer-events: none; transform: translate(-50%, 10px) scale(.94); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.hover-preview img { display: block; width: 100%; height: 76px; object-fit: cover; filter: saturate(.86) contrast(1.04); }
.hover-preview figcaption { padding: 7px 6px 6px; color: #f7eddd; background: color-mix(in srgb, var(--spine) 88%, #273029); }
.hover-preview b, .hover-preview span, .hover-preview i { display: block; }
.hover-preview b { font: 400 16px/1 var(--serif); }
.hover-preview span { margin-top: 5px; font: 700 6px/1.25 var(--sans); letter-spacing: .08em; }
.hover-preview i { margin-top: 7px; color: color-mix(in srgb, var(--spine-text) 72%, #fff); font: 700 5px/1 var(--sans); font-style: normal; letter-spacing: .16em; }
.book-item:hover .hover-preview, .book-item:focus-within .hover-preview { opacity: 1; transform: translate(-50%, 0) scale(1); }

.reader-layer { position: fixed; z-index: 20; inset: 0; display: grid; grid-template-rows: 54px 1fr; visibility: hidden; opacity: 0; background: rgb(239 226 200 / 96%); transform: translateY(16px); transition: opacity .32s ease, transform .32s ease, visibility .32s; }
.reader-layer.open { visibility: visible; opacity: 1; transform: none; }
.reader-layer > header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid rgb(43 48 41 / 22%); background: rgb(247 238 218 / 90%); backdrop-filter: blur(14px); }
.reader-layer header button { width: max-content; border: 0; background: none; font: 600 10px/1 var(--sans); letter-spacing: .08em; }
.reader-layer header p { margin: 0; text-align: center; }
.reader-layer header p span, .reader-layer header p small { display: block; }
.reader-layer header p span { font: 400 15px/1.1 var(--serif); }
.reader-layer header p small { margin-top: 3px; color: var(--red); font: 700 7px/1 var(--sans); letter-spacing: .18em; }
.header-balance { min-width: 110px; }
#bookFrame { width: 100%; height: 100%; border: 0; background: transparent; }

@media (max-height: 790px) {
  .hero-copy { margin-top: 92px; }
  .hero-copy h1 { font-size: clamp(36px, 4.45vw, 58px); }
  .shelf-zone { min-height: 405px; padding-bottom: 132px; }
  .shelf { bottom: 150px; transform: translateX(-50%) scale(.84); transform-origin: 50% 100%; }
  .shelf-base { bottom: 141px; }
}

@media (max-width: 720px) {
  body { overflow-x: hidden; overflow-y: auto; }
  body::after { background: rgb(248 240 222 / 66%); }
  .atlas-shell { min-height: 920px; padding: 0 16px 16px; }
  .edition { display: none; }
  .library-hero { grid-template-rows: auto 1fr; }
  .hero-copy { margin-top: 96px; }
  .hero-copy h1 { display: flex; gap: .1em; white-space: nowrap; font-size: clamp(30px, 9.2vw, 40px); }
  .hero-copy h1 span, .hero-copy h1 em { display: inline-block; }
  .shelf-zone { min-height: 560px; width: 100%; padding-bottom: 174px; }
  .shelf { bottom: 174px; min-width: 520px; transform: translateX(-50%) scale(.64); transform-origin: 50% 100%; }
  .shelf-base { bottom: 164px; width: 92vw; }
  .hover-preview { top: calc(100% + 18px); }
  .reader-layer > header { grid-template-columns: 1fr auto 1fr; padding: 0 12px; }
  .header-balance { min-width: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}