.department-shelf, .department-theatre {
  --shelf-serif: "Songti SC","STSong","Source Han Serif SC","SimSun",serif;
  margin-inline: 5.5%;
}
.department-shelf { padding: 21px 0 24px; color: #292820; }
.department-shelf h2 {
  display: flex; align-items: center; gap: 1em;
  margin: 0 0 15px; font: 600 14px/1.5 var(--shelf-serif); letter-spacing: .11em;
}
.department-shelf h2::after { content: ""; flex: 1; border-top: 1px solid #ccc5b6; }
.department-books { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.department-books .department {
  display: flex; align-items: center; gap: clamp(12px,1.55vw,27px);
  min-width: 0; box-sizing: border-box; padding: 5px 12px 6px clamp(14px,2.15vw,36px);
  border: 0; border-inline-start: 1px solid #d1cabd; background: transparent;
  text-align: left; color: inherit; cursor: pointer;
}
.department-books .department:first-child { border-inline-start: 0; padding-inline-start: 3px; }
.department-copy { min-width: 0; }
.department-copy strong { display: block; font: 600 clamp(20px,1.65vw,28px)/1.4 var(--shelf-serif); letter-spacing: .035em; }
.department-copy small { display: block; padding-top: 4px; font: 13px/1.55 var(--shelf-serif); color: #5b594d; }
.shelf-book {
  width: 49px; height: 70px; flex: 0 0 auto; position: relative; display: block;
  isolation: isolate; border-radius: 1px 2px 1px 1px; transform: rotate(-3deg);
  box-shadow: inset 4px 0 0 #0002, inset 5px 0 0 #fff3, 1px 1px 0 #cfc7af, 2px 2px 0 #d4ccba, 3px 3px 0 #baaf96, 3px 5px 5px #38250e35;
  transition: transform .2s ease;
}
.shelf-book i { position: absolute; writing-mode: vertical-rl; font: 10px/1.15 var(--shelf-serif); letter-spacing: .07em; }
.book-mao { background: repeating-linear-gradient(90deg, transparent 0 2px,#ffffff0d 2px 3px), #8e3027; }
.book-mao i { color: #f6d49a; top: 9px; right: 8px; }
.book-mao::after { content: ""; position: absolute; left: 8px; right: 4px; bottom: 8px; border-bottom: 3px double #cc9c64; }
.book-classic { background: #ccbf9e url("assets/fa-ruozhen-winter.webp") 70% 100%/auto 69% no-repeat; transform: rotate(2deg); }
.book-classic i, .book-yi i { top: 5px; right: 6px; padding: 3px 2px; background: #ede3c7; border: 1px solid #837560; color: #433c31; }
.book-yi { background: repeating-linear-gradient(0deg, transparent 0 2px,#ffffff09 2px 3px),#273f46; transform: rotate(-2deg); }
.book-yi b { position: absolute; left: 8px; bottom: 4px; font: 16px/1.1 "Segoe UI Symbol",serif; color: #dcc59b; }
.book-school { background: linear-gradient(90deg, transparent 20%, #af514b88 20% 22%, transparent 22%), repeating-linear-gradient(0deg,transparent 0 7px,#8b9da47a 7px 8px),#e9debb; transform: rotate(3deg); }
.book-school i { writing-mode: horizontal-tb; top: 12px; left: 11px; right: 2px; padding: 3px 0; text-align: center; background: #efe6cb; color: #494538; }
.department:focus-visible .shelf-book, .department:hover .shelf-book { transform: translateY(-4px) rotate(0); }
.department:hover strong { color: #8c392d; }
.department-theatre {
  position: relative; isolation: isolate; overflow: hidden; min-height: 235px;
  display: grid; align-items: center; margin-block: 0 26px; color: #fff6e5; background: #121c27;
}
.department-theatre img { position: absolute; z-index: -2; right: 0; width: 76%; height: 100%; object-fit: cover; object-position: 58% 55%; }
.department-theatre::before { content: ""; z-index: -1; position: absolute; inset: 0; background: linear-gradient(90deg,#111d28 0 20%,rgba(17,29,40,.9) 36%,rgba(17,29,40,.23) 62%,transparent 80%); }
.theatre-caption { max-width: 66%; padding: 29px 4.4%; }
.theatre-caption>span { font: 12px/1.5 var(--shelf-serif); color: #e8cc9e; letter-spacing: .12em; }
.theatre-caption h2 { margin: 9px 0 4px; font: 500 clamp(28px,2.8vw,45px)/1.25 var(--shelf-serif); letter-spacing: .045em; }
.theatre-caption p { margin: 8px 0 19px; font: 16px/1.65 var(--shelf-serif); color: #f2e8d4; }
.theatre-caption button { cursor: pointer; padding: 7px 0; border: 0; border-bottom: 1px solid #c4a37a; background: transparent; color: #ffefd7; font: 14px/1.3 var(--shelf-serif); }
.theatre-caption b { margin-inline-start: 14px; font-weight: 400; }
@media (max-width: 880px) {
  .department-copy small { font-size: 12px; }
  .department-books .department { gap: 10px; padding-inline: 12px 6px; }
  .shelf-book { width: 41px; height: 63px; }
}
@media (max-width: 680px) {
  .department-books { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 0; }
  .department-books .department:nth-child(odd) { border-inline-start: 0; padding-inline-start: 3px; }
  .department-theatre { min-height: 215px; }
  .department-theatre img { width: 100%; object-position: 62% 54%; }
  .department-theatre::before { background: linear-gradient(90deg,#131e29f7 0%,#131e29c7 38%,#131e2929 75%); }
  .theatre-caption { max-width: 80%; padding: 22px 6%; }
  .theatre-caption p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .shelf-book { transition: none; } }