@import url("./vendor/fonts/fonts.css");

:root {
  --paper: #f4f1ea;
  --ink: #111;
  --spine: #111;
  --spine-text: #fff;
  --hover: #e8c547;
  --line: #111;
  --display: "Big Shoulders Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Newsreader", "Source Serif 4", Palatino, "Songti SC", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
body {
  background-image: repeating-radial-gradient(circle, #111 0 0.55px, transparent 0.55px calc(8 * var(--u)));
  background-color: var(--paper);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.appwork {
  position: fixed;
  left: 0;
  right: 0;
  top: calc((100 * var(--vh) - var(--stage-h)) / 2);
  height: var(--stage-h);
  cursor: grab;
  touch-action: none;
}
.appwork.is-dragging { cursor: grabbing; }

.page.content {
  height: calc(1080 * var(--u));
  padding-left: calc(162 * var(--u));
  display: flex;
  width: max-content;
  background: var(--paper);
  position: relative;
}

.c-0 {
  height: calc(1080 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(64.8 * var(--u)) calc(216 * var(--u)) calc(64.8 * var(--u)) calc(64.8 * var(--u));
  flex: 0 0 auto;
}
.head-w {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: calc(25.92 * var(--u));
}
.head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.head-vol {
  font-family: var(--display);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  letter-spacing: 0.28em;
  background: var(--paper);
  color: #111;
  border: max(1px, calc(3 * var(--u))) solid #000;
  box-shadow: calc(3.78 * var(--u)) calc(3.78 * var(--u)) 0 #000;
  padding: calc(4.86 * var(--u)) calc(12.96 * var(--u));
  margin-bottom: calc(17.28 * var(--u));
  transform: rotate(-2.5deg);
}
.mast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12.96 * var(--u));
}
.mast-my,
.mast-work {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.8;
  letter-spacing: -0.04em;
  display: inline-block;
  transform-origin: left bottom;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.mast-my {
  font-size: calc(129.6 * var(--u));
  background: var(--hover);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow: calc(6.48 * var(--u)) calc(6.48 * var(--u)) 0 #000;
  padding: calc(6.48 * var(--u)) calc(17.28 * var(--u)) calc(2.16 * var(--u));
  transform: rotate(-3deg);
}
.mast-my:hover {
  transform: rotate(-3deg) translateY(calc(-6.48 * var(--u))) scale(1.04);
}
.mast-work {
  font-size: calc(172.8 * var(--u));
  color: #111;
  transform: rotate(1.2deg);
  padding-left: calc(4.32 * var(--u));
  text-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 var(--hover);
}
.mast-work:hover {
  transform: rotate(1.2deg) translateY(calc(-7.56 * var(--u)));
  text-shadow: calc(5.94 * var(--u)) calc(5.94 * var(--u)) 0 var(--hover), calc(9.72 * var(--u)) calc(9.72 * var(--u)) 0 #111;
}
.div-block-34 {
  width: calc(183.6 * var(--u));
  height: calc(183.6 * var(--u));
  flex: 0 0 calc(183.6 * var(--u));
  border: max(1px, calc(4 * var(--u))) solid var(--ink);
  background: var(--paper);
  box-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 #000;
  overflow: hidden;
  transform: rotate(3deg);
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.div-block-34 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.div-block-34:hover { transform: rotate(3deg) translateY(calc(-6.48 * var(--u))); }
.stamp-tag {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: calc(11 * var(--u));
  line-height: 1;
  letter-spacing: 0.14em;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  margin: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0;
  white-space: nowrap;
}

.intro {
  position: relative;
  margin-top: calc(64.8 * var(--u));
  max-width: 40em;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  border: max(1px, calc(4 * var(--u))) solid #111;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000;
  background: var(--paper);
  padding: calc(36.72 * var(--u)) calc(30.24 * var(--u)) calc(28.08 * var(--u));
}
.intro-tag {
  position: absolute;
  top: calc(-14.04 * var(--u));
  left: calc(17.28 * var(--u));
  font-family: var(--display);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  letter-spacing: 0.22em;
  background: var(--hover);
  color: #111;
  border: max(1px, calc(3 * var(--u))) solid #000;
  padding: calc(3.78 * var(--u)) calc(12.96 * var(--u));
}
.intro p {
  font-size: var(--text-body);
  line-height: 1.55;
  font-weight: 400;
  max-width: 32em;
}
.intro p + p { margin-top: 0.55em; }
.em-bold { font-weight: 900; }
.em {
  font-weight: 700;
  background: var(--hover);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0.12em 0 0 var(--hover), -0.12em 0 0 var(--hover);
  padding: 0 0.04em;
}

.c-1 { width: auto; height: calc(1080 * var(--u)); display: flex; }
.brand-wrap { height: calc(1080 * var(--u)); }
.brand-list { display: flex; height: 100%; }
.brand-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.brand-link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: calc(1080 * var(--u));
}
.brand-inner {
  flex: 0 0 calc(194.4 * var(--u));
  width: calc(194.4 * var(--u));
  min-width: calc(194.4 * var(--u));
  height: calc(1080 * var(--u));
  background: var(--spine);
  color: var(--spine-text);
  border-left: max(1px, calc(4 * var(--u))) solid var(--paper);
  border-right: max(1px, calc(4 * var(--u))) solid #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(129.6 * var(--u)) 0 calc(64.8 * var(--u));
  position: relative;
  cursor: pointer;
}
.brand-inner:hover,
.brand-item.is-open .brand-inner {
  background: var(--hover);
  color: #111;
}
.brand-item.is-paper .brand-inner {
  background: var(--paper);
  color: var(--ink);
  border-left-color: #000;
}
.brand-item.is-paper .brand-inner:hover,
.brand-item.is-paper.is-open .brand-inner {
  background: var(--hover);
  color: #111;
}

.brand-title-w {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.brand-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: calc(49.68 * var(--u));
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.05;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  align-self: flex-start;
}
.brand-title--latin {
  text-orientation: mixed;
  letter-spacing: 0.12em;
  line-height: 1.05;
  padding-inline-start: 0;
  /* mixed 拉丁字盒顶高于汉字墨水；只做小幅光学补偿，避免整块抬过头 */
  transform: translateY(-0.12em);
}

.brand-info {
  flex: 0 0 calc(151.2 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(21.6 * var(--u));
}
.spine-mark {
  width: calc(36.72 * var(--u));
  height: calc(108 * var(--u));
  box-sizing: border-box;
  background: var(--paper);
  color: #111;
  border: max(1px, calc(3 * var(--u))) solid #111;
  box-shadow: calc(3.24 * var(--u)) calc(3.24 * var(--u)) 0 #000;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--display);
  font-size: calc(14.58 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  overflow: hidden;
}
.spine-mark.is-vol,
.spine-mark.is-status,
.spine-mark.is-year {
  background: var(--paper);
  color: #111;
  border-color: #111;
  box-shadow: calc(3.24 * var(--u)) calc(3.24 * var(--u)) 0 #000;
}
.spine-mark.is-poc {
  background: var(--hover);
  color: #111;
  border-color: #111;
  box-shadow: calc(3.24 * var(--u)) calc(3.24 * var(--u)) 0 #000;
}
.spine-mark.is-empty { visibility: hidden; }

.book-wrap {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  height: calc(1080 * var(--u));
  overflow: hidden;
  background: var(--paper);
  border-right: 0 solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  transform-origin: 0%;
  transition: flex-basis 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
    max-width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.brand-item.is-open .book-wrap {
  flex: 0 0 calc(810 * var(--u));
  width: calc(810 * var(--u));
  min-width: calc(810 * var(--u));
  max-width: calc(810 * var(--u));
  padding-top: calc(32.4 * var(--u));
  border-right: max(1px, calc(4 * var(--u))) solid #000;
  justify-content: flex-start;
}
.book-copy {
  width: 100%;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
}

.book-title__tags {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: calc(12.96 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: var(--display);
}
.book-title-w {
  width: auto;
  max-width: calc(734.4 * var(--u));
  text-align: center;
  margin-top: calc(10.8 * var(--u));
}
.book-title-w .book-title {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 900;
  white-space: nowrap;
}
.book-quote-w {
  width: calc(604.8 * var(--u));
  max-width: 30em;
  text-align: center;
  margin-top: calc(19.44 * var(--u));
}
.book-desc {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--text-read);
  line-height: 1.45;
  letter-spacing: 0;
}
.book-desc + .book-desc { margin-top: 0.2em; }
.book-open {
  margin-top: calc(19.44 * var(--u));
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: calc(18 * var(--u));
  border-bottom: max(1px, calc(4 * var(--u))) solid currentColor;
  padding-bottom: calc(3.78 * var(--u));
}
.book-img-w {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 0 0 auto;
  margin-top: auto;
  border-top: max(1px, calc(4 * var(--u))) solid #000;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, transparent, transparent calc(8 * var(--u)), #111 calc(8 * var(--u)), #111 calc(10 * var(--u)));
}
.book-img-w.is-empty { height: auto; }
.book-image { width: 100%; height: 100%; object-fit: cover; }
.brand-item[data-book="gusu"] .book-image { object-position: right center; }

.c-2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(64.8 * var(--u)) calc(108 * var(--u)) calc(64.8 * var(--u)) calc(86.4 * var(--u));
  flex: 0 0 auto;
  min-width: calc(842.4 * var(--u));
  border-left: max(1px, calc(4 * var(--u))) solid #000;
  background: var(--ink);
  color: #fff;
}
.talk-burst {
  position: relative;
  display: inline-block;
  background: var(--hover);
  color: #111;
  border: max(1px, calc(6 * var(--u))) solid #000;
  box-shadow: calc(9.18 * var(--u)) calc(9.18 * var(--u)) 0 #000, calc(15.66 * var(--u)) calc(15.66 * var(--u)) 0 var(--hover);
  padding: calc(32.4 * var(--u)) calc(45.36 * var(--u)) calc(28.08 * var(--u));
  transform: rotate(-5deg);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
  cursor: default;
}
.talk-burst::before {
  content: "";
  position: absolute;
  inset: calc(8.64 * var(--u));
  border: 2px dashed #111;
  pointer-events: none;
}
.talk-burst::after { content: none; }
.talk-bang {
  position: absolute;
  right: calc(-12.96 * var(--u));
  top: calc(-19.44 * var(--u));
  font-family: var(--display);
  font-size: calc(58.32 * var(--u));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  transform: rotate(14deg);
  pointer-events: none;
  text-shadow:
    calc(-1.512 * var(--u)) calc(-1.512 * var(--u)) 0 #111,
     calc(1.512 * var(--u)) calc(-1.512 * var(--u)) 0 #111,
    calc(-1.512 * var(--u))  calc(1.512 * var(--u)) 0 #111,
     calc(1.512 * var(--u))  calc(1.512 * var(--u)) 0 #111,
     calc(3.456 * var(--u)) calc(3.456 * var(--u)) 0 #111;
  transition: transform 180ms cubic-bezier(0.2, 1.5, 0.3, 1);
}
.talk-burst:hover .talk-bang {
  transform: rotate(18deg) translate(calc(28.08 * var(--u)), calc(-28.08 * var(--u))) scale(1.18);
}
.talk-burst:hover {
  transform: rotate(-6deg) translateY(calc(-7.56 * var(--u))) scale(1.04);
}
.talk-kicker {
  display: block;
  font-family: var(--display);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  letter-spacing: 0.28em;
  margin-bottom: calc(10.8 * var(--u));
}
.c2-head {
  font-family: var(--display);
  font-size: calc(129.6 * var(--u));
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 900;
  color: #111;
}
.talk-meta {
  margin-top: calc(54 * var(--u));
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  color: #f4f1ea;
}
.talk-soon { opacity: 0.7; }
.talk-meta a:hover,
.talk-meta .talk-xhs:hover { color: var(--hover); }
.talk-meta .talk-xhs {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.talk-meta a:focus-visible,
.talk-meta .talk-xhs:focus-visible {
  outline: calc(3 * var(--u)) solid var(--hover);
  outline-offset: calc(3 * var(--u));
}

.talk-xhs-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(43.2 * var(--u)) calc(76.8 * var(--u)) calc(43.2 * var(--u)) calc(var(--rail, calc(151.2 * var(--u))) + calc(76.8 * var(--u)));
  background: #111;
}
.talk-xhs-layer[hidden] { display: none; }
.talk-xhs-pack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(950.4 * var(--u));
  max-width: min(calc(453.6 * var(--u)), calc(1766.4 * var(--u)));
  overflow: visible;
  background: var(--paper);
  color: #111;
  border: max(1px, calc(4 * var(--u))) solid #000;
  box-shadow: calc(4.86 * var(--u)) calc(4.86 * var(--u)) 0 #000;
}
.talk-xhs-chrome {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: calc(6.48 * var(--u)) calc(15.36 * var(--u)) calc(4.32 * var(--u));
  background: var(--paper);
  border-bottom: max(1px, calc(3 * var(--u))) solid #000;
  z-index: 6;
}
.talk-xhs-close {
  position: relative;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #111;
  background: var(--paper);
  border: max(1px, calc(3 * var(--u))) solid #000;
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #000;
  padding: calc(2.7 * var(--u)) calc(7.56 * var(--u));
  cursor: pointer;
}
.talk-xhs-close:hover { background: var(--hover); }
.talk-xhs-close:focus-visible {
  outline: calc(3 * var(--u)) solid #111;
  outline-offset: 1px;
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #000, 0 0 0 1px var(--paper);
}
.talk-xhs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
}
.talk-xhs-body img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .div-block-34 { transition: none; }
  html:not(.motion-on) .div-block-34:hover { transform: rotate(3deg); }
  html:not(.motion-on) .mast-my, html:not(.motion-on) .mast-work, html:not(.motion-on) .talk-burst, html:not(.motion-on) .talk-bang { transition: none; }
  html:not(.motion-on) .mast-my:hover { transform: rotate(-3deg); }
  html:not(.motion-on) .mast-work:hover { transform: rotate(1.2deg); }
  html:not(.motion-on) .talk-burst:hover { transform: rotate(-5deg); }
  html:not(.motion-on) .talk-burst:hover .talk-bang { transform: rotate(14deg); }
}