@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  --bg: #fffdfb;
  --paper: #fff8ed;
  --ink: #4a2a0c;
  --brand: #6b3f16;
  --link: #9b642f;
  --link-hover: #6b3f16;
  --rule: #15110d;
  --line: #e3d6c2;
  --btn: #d0b292;
  --portrait: #d5c3aa;
  --input: #fffefd;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--rule);
}
.portrait {
  flex: none;
  width: 300px;
  border: 2px solid var(--brand);
  background: var(--paper);
  padding: 12px;
  align-self: flex-start;
}
.portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.masthead-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-top: 24px; }
.logo {
  display: inline-block;
  color: var(--brand);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.1;
}
.logo:hover { text-decoration: none; }
.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 42px;
}
.toplinks { display: flex; flex-wrap: wrap; gap: 16px 28px; max-width: 280px; }
.toplinks a { font-size: 14px; }
.toplinks a { color: var(--link); font-weight: 700; font-size: 13px; }
.search { display: flex; flex-direction: column; gap: 5px; }
.search label { color: var(--link); font-size: 10px; letter-spacing: 0.04em; }
.search-row { display: flex; }
.search input {
  width: 226px;
  max-width: 60vw;
  border: 1px solid var(--link);
  border-right: 0;
  background: var(--input);
  padding: 3px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.search button {
  border: 0;
  background: var(--btn);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 0 16px;
  cursor: pointer;
}
.search button:hover { background: var(--brand); }

/* ---------- body grid ---------- */
.body { display: grid; grid-template-columns: 172px 1fr; gap: 36px; padding: 26px 0 40px; }
.sidebar { font-size: 13px; }
.sidebar nav { display: flex; flex-direction: column; gap: 9px; }
.sidebar a { color: var(--link); }
.sidebar nav > a { font-weight: 700; font-size: 14px; }
.sidebar .nav-top > a { font-weight: 700; font-size: 14px; }
.sidebar .works-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.sidebar .works { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar .works a { font-size: 12px; }
.sidebar .works li::before { content: "– "; color: var(--link); }

main { min-width: 0; }
main > h1 { color: var(--ink); font-size: 24px; font-weight: 700; margin: 0 0 16px; }
main h2 { color: var(--ink); font-size: 18px; font-weight: 700; margin: 26px 0 10px; }
main h3 { color: var(--ink); font-size: 16px; font-weight: 700; margin: 20px 0 8px; }
.muted { color: #8a6a45; }

/* ---------- prose ---------- */
.prose { max-width: 760px; }
.prose p { margin: 0 0 12px; }
.prose img { max-width: 100%; height: auto; }
.prose a { text-decoration: underline; }
.crumbs { color: #8a6a45; font-size: 13px; margin: 0 0 14px; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.list li a { font-weight: 500; }
.list span { color: #8a6a45; font-size: 13px; white-space: nowrap; }

/* ---------- book catalog ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.book-card { display: grid; gap: 7px; color: var(--ink); }
.book-card:hover { text-decoration: none; }
.book-card img { width: 100%; height: auto; border: 1px solid var(--line); }
.book-card span { font-weight: 700; font-size: 14px; color: var(--brand); }
.book-card small { color: #8a6a45; font-size: 11px; }

/* ---------- book detail ---------- */
.book-title { text-align: center; color: var(--brand); font-size: 30px; font-weight: 700; letter-spacing: 0.28em; margin: 4px 0 10px; }
.book-orig { text-align: center; font-style: italic; color: #8a6a45; margin: 0 0 26px; }
.book-top { display: flex; gap: 30px; align-items: flex-start; }
.book-top .cover { width: 200px; flex: none; border: 1px solid var(--line); }
.book-main { flex: 1; min-width: 0; }
.book-stats { display: flex; flex-wrap: wrap; gap: 6px 40px; margin-bottom: 18px; }
.book-stats a { color: var(--link); }
.book-annot { text-align: justify; }
.book-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.read-html { text-align: center; font-weight: 700; margin: 0 0 12px; }
.page-index { font-size: 15px; line-height: 2; text-align: center; }
.page-index span { color: #8a6a45; margin-right: 6px; }
.page-index a { color: var(--link); }
.page-index b { color: var(--ink); }
.book-actions { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.book-actions a { color: var(--link); }
.reviews-title { text-align: center; font-weight: 700; font-size: 18px; margin-bottom: 14px; }

/* ---------- reviews ---------- */
.reviews { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule); }
.reviews > h2 small { color: #8a6a45; font-weight: 400; font-size: 13px; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review header { display: flex; gap: 14px; align-items: baseline; margin-bottom: 5px; }
.review strong { color: var(--brand); }
.review .rate { color: var(--link); font-size: 13px; }
.review time { color: #8a6a45; font-size: 12px; }

/* ---------- reading ---------- */
.reading-head { text-align: center; margin-bottom: 4px; }
.reading-author, .reading-book { color: var(--brand); font-weight: 700; font-size: 26px; letter-spacing: 0.24em; line-height: 1.3; }
.reading-orig { text-align: center; font-style: italic; color: #8a6a45; margin: 10px 0 22px; }
.reading-bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; margin: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 700; }
.reading-body { text-align: justify; }
.reading-body p { text-indent: 1.6em; margin: 0 0 12px; }
.reading-back { margin-top: 18px; }

/* ---------- media ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.video-grid iframe { width: 100%; aspect-ratio: 425 / 344; border: 1px solid var(--line); }

/* ---------- forum ---------- */
.forum-cat { margin: 22px 0; }
.forum-board-list, .forum-topic-list { list-style: none; margin: 0; padding: 0; }
.forum-board-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.forum-board-list li > a { font-weight: 700; font-size: 15px; color: var(--brand); }
.forum-board-list small, .forum-topic-list small { display: block; color: #8a6a45; font-size: 12px; margin-top: 2px; }
.forum-topic-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.forum-topic-list .sticky { color: var(--link); margin-right: 6px; }
.forum-post { padding: 14px 0; border-bottom: 1px solid var(--line); }
.forum-post-meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.forum-post-meta strong { color: var(--brand); }
.forum-post-meta time { color: #8a6a45; font-size: 12px; }
.forum-post-body blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--line); color: #6f5536; }
.forum-post-body cite { display: block; font-size: 12px; font-style: normal; color: var(--brand); }
.forum-post-body pre { white-space: pre-wrap; background: var(--paper); padding: 8px; }
.forum-attachments { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.forum-attachments img { max-width: 320px; height: auto; border: 1px solid var(--line); }

/* ---------- search results ---------- */
.search-results .hit { padding: 9px 0; border-bottom: 1px solid var(--line); }
.search-results .hit .kind { color: #8a6a45; font-size: 12px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 16px 0 30px; }
.site-footer p { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.5; max-width: 760px; }

/* ---------- hero (home) ---------- */
.hero { margin-bottom: 20px; }
.hero h1 { margin: 0 0 14px; }
.hero p { margin: 0 0 12px; max-width: 760px; text-align: justify; }
.news-home { list-style: none; margin: 0; padding: 0; }
.news-home li { padding: 6px 0; }
.news-home .date { color: var(--ink); }
.news-home a { margin-left: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .body { grid-template-columns: 1fr; gap: 22px; }
  .masthead { gap: 18px; }
  .portrait { width: 104px; }
  .sidebar { border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
  .sidebar nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
  .sidebar .works { display: none; }
}
@media (max-width: 520px) {
  .masthead { flex-direction: column; align-items: center; text-align: center; }
  .masthead-main { align-items: center; }
  .masthead-row { justify-content: center; }
  .search input { max-width: 70vw; }
  .sidebar nav { grid-template-columns: 1fr; text-align: center; }
}

.sape-rtb { margin: 14px 0 0; text-align: center; min-height: 0; }
.sape-links { max-width: 1100px; margin: 0 auto; padding: 8px 20px; color: #8a8a8a; font-size: 12px; line-height: 1.7; }
.sape-links:empty { display: none; }
.sape-links a { color: #8a8a8a; }