:root {
  color: #1f2933;
  background: #f7f6f2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 58px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dedbd2;
  background: rgba(247, 246, 242, .92);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
}

.brand { font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 700; }
.icon-button { display: none; width: 38px; height: 38px; border: 0; background: transparent; padding: 9px; }
.icon-button span { display: block; height: 2px; margin: 4px 0; background: #374151; }

.library { max-width: 1120px; padding: 80px 28px; margin: auto; }
.eyebrow { color: #687076; font-size: 14px; margin: 0 0 10px; }
.library h1 { margin: 0 0 42px; font-family: Georgia, "Songti SC", serif; font-size: 42px; line-height: 1.2; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.book-card { min-height: 248px; padding: 20px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 20px; transition: transform .16s ease, box-shadow .16s ease; }
.book-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(42, 47, 52, .09); }
.book-cover-thumb { width: 108px; height: 162px; align-self: center; object-fit: cover; border: 1px solid #dedbd2; box-shadow: 3px 5px 13px rgba(42, 47, 52, .12); }
.book-card-content { min-width: 0; display: flex; flex-direction: column; }
.book-kicker { margin: 0 0 12px; color: #8c4432; font-size: 13px; }
.book-card h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 27px; line-height: 1.35; }
.book-subtitle { color: #667085; margin: 10px 0 auto; }
.book-meta { margin: 18px 0 0; color: #687076; font-size: 14px; }

.book-page { max-width: 1120px; margin: 0 auto; padding: 42px 28px 88px; }
.breadcrumb { display: flex; gap: 9px; margin-bottom: 42px; color: #687076; font-size: 14px; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.book-hero { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: clamp(34px, 7vw, 92px); align-items: center; padding-bottom: 58px; }
.book-cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #fff; border: 1px solid #dedbd2; box-shadow: 12px 18px 34px rgba(42, 47, 52, .14); }
.book-intro { max-width: 620px; }
.book-intro h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 52px; line-height: 1.18; }
.book-detail-subtitle { max-width: 510px; margin: 18px 0 28px; color: #55616a; font-size: 21px; line-height: 1.65; }
.book-author { margin: 0; font-size: 18px; font-weight: 650; }
.book-translator { margin: 4px 0 0; color: #687076; }
.book-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 34px; }
.primary-action { padding: 10px 20px; border-radius: 4px; background: #7c4231; color: #fff; font-weight: 650; line-height: 1.4; }
.primary-action:hover { background: #683728; }
.secondary-action { color: #6a4234; text-decoration: underline; text-underline-offset: 4px; }
.book-section { max-width: 940px; padding: 38px 0; border-top: 1px solid #dedbd2; }
.book-section h2 { margin: 0 0 18px; font-family: Georgia, "Songti SC", serif; font-size: 27px; line-height: 1.3; }
.book-section > p { max-width: 720px; margin: 0; color: #48525a; font-size: 17px; }
.metadata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 42px; margin: 0; }
.metadata-grid div { min-width: 0; }
.metadata-grid dt { color: #687076; font-size: 14px; }
.metadata-grid dd { margin: 4px 0 0; color: #2c3338; }
.book-contents { max-width: none; }
.contents-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 58px; }
.contents-group h3 { margin: 0 0 8px; color: #5b646c; font-size: 16px; }
.contents-group ol { margin: 0; padding-left: 24px; }
.contents-group li { margin: 5px 0; padding-left: 3px; color: #687076; }
.contents-group a { color: #424a50; }
.contents-group a:hover { color: #7c4231; text-decoration: underline; text-underline-offset: 3px; }

.reader { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: calc(100vh - 58px); }
.toc { padding: 34px 26px 60px; border-right: 1px solid #dedbd2; background: #f3f2ed; }
.toc-title { display: block; margin-bottom: 24px; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 700; line-height: 1.35; }
.toc-title small { display: block; margin-top: 4px; color: #687076; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-size: 12px; font-weight: 400; }
.toc details { border-top: 1px solid #dedbd2; padding: 10px 0; }
.toc summary { cursor: pointer; color: #505a64; font-weight: 600; }
.toc ul { list-style: none; margin: 8px 0 0; padding: 0; }
.toc li { margin: 4px 0; }
.toc a { display: block; padding: 7px 8px; border-radius: 4px; color: #505a64; font-size: 14px; line-height: 1.45; }
.toc a:hover, .toc a[aria-current="page"] { color: #713d2d; background: #e9e5dc; }
.reader-main { min-width: 0; padding: 46px clamp(24px, 6vw, 92px) 84px; background: #fff; }
.reader-topline { margin-bottom: 30px; color: #687076; font-size: 14px; }
.reader-topline a { text-decoration: underline; text-underline-offset: 3px; }
.markdown { max-width: 780px; font-family: Georgia, "Songti SC", "STSong", serif; font-size: 18px; color: #2b3034; }
.markdown h1, .markdown h2, .markdown h3 { margin: 2.3em 0 .8em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.38; color: #202428; }
.markdown h1 { margin-top: 0; font-size: 32px; }
.markdown h2 { font-size: 24px; }
.markdown h3 { font-size: 20px; }
.markdown p { margin: 0 0 1.2em; text-align: justify; }
.markdown img { display: block; width: 100%; height: auto; margin: 2.3em auto; border: 1px solid #ebe9e4; }
.markdown blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 3px solid #c5b9a7; color: #59626b; }
.markdown a { color: #884531; text-decoration: underline; text-underline-offset: 3px; }
.loading, .error { max-width: 780px; color: #687076; font-size: 16px; }
.error { color: #9b3425; }

@media (max-width: 760px) {
  .site-header { padding: 0 18px; }
  .icon-button { display: block; }
  .library { padding: 54px 20px; }
  .library h1 { font-size: 34px; }
  .book-card { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .book-cover-thumb { width: 88px; height: 132px; }
  .book-card h2 { font-size: 24px; }
  .book-subtitle { font-size: 14px; }
  .book-page { padding: 30px 20px 60px; }
  .breadcrumb { margin-bottom: 28px; }
  .book-hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 42px; }
  .book-cover { width: min(230px, 68vw); }
  .book-intro h1 { font-size: 40px; }
  .book-detail-subtitle { font-size: 18px; }
  .metadata-grid, .contents-grid { grid-template-columns: 1fr; gap: 18px; }
  .book-section { padding: 30px 0; }
  .reader { display: block; }
  .toc { display: none; position: fixed; inset: 58px 0 0; z-index: 4; overflow: auto; padding: 26px 20px 50px; }
  .toc.is-open { display: block; }
  .reader-main { padding: 32px 20px 56px; }
  .markdown { font-size: 17px; }
  .markdown h1 { font-size: 28px; }
  .markdown h2 { font-size: 22px; }
}