:root{
  --bg:#f7f3ea; --paper:#fbf8f1; --ink:#2a2622; --muted:#7a7166; --line:#e3dccd;
  --accent:#8a3b2a; --accent-soft:#f0e3d8;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#191715; --paper:#1f1c1a; --ink:#e6dfd3; --muted:#9a9084; --line:#34302b;
         --accent:#d98b6e; --accent-soft:#2e2420; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif);
  font-size:18px; line-height:2; font-feature-settings:"palt" 0;}
a{color:var(--accent); text-underline-offset:3px}
header.site{max-width:40rem; margin:0 auto; padding:18px 20px; font-family:var(--sans)}
.logo{color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:15px}
footer.site{max-width:40rem; margin:80px auto 0; padding:32px 20px 48px; border-top:1px solid var(--line);
  color:var(--muted); font-family:var(--sans); font-size:13px; line-height:1.8}

/* home */
.home{max-width:40rem; margin:0 auto; padding:0 20px}
.hero{padding:72px 0 48px}
.hero h1{font-size:40px; letter-spacing:.12em; margin:0 0 16px; line-height:1.4}
.lead{color:var(--muted); margin:0}
.shelf h2,.about h2{font-family:var(--sans); font-size:13px; letter-spacing:.2em; color:var(--muted); font-weight:600; margin:48px 0 16px}
.book-card{display:grid; gap:4px; padding:24px; background:var(--paper); border:1px solid var(--line);
  border-radius:4px; text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s}
.book-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.book-card .author{font-size:14px; color:var(--muted)}
.book-card .title{font-size:26px; font-weight:700; letter-spacing:.08em}
.book-card .desc{font-size:15px; line-height:1.9; margin-top:6px}
.book-card .meta{font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:8px}
.about p{font-size:15px}

/* reader */
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:10}
.book{max-width:36rem; margin:0 auto; padding:0 20px}
.titlepage{text-align:center; padding:64px 0 40px; border-bottom:1px solid var(--line)}
.titlepage .author{color:var(--muted); letter-spacing:.2em; margin:0}
.titlepage h1{font-size:44px; letter-spacing:.2em; margin:8px 0 4px; line-height:1.4}
.subtitle{margin:0 0 24px}
.meta{font-family:var(--sans); font-size:13px; color:var(--muted)}
.notice{font-size:13px; color:var(--muted); background:var(--accent-soft); padding:12px 16px; border-radius:4px; text-align:left; line-height:1.8; font-family:var(--sans)}
#resume a{display:inline-block; font-family:var(--sans); font-size:14px; padding:8px 18px; border:1px solid var(--accent); border-radius:999px; text-decoration:none}
.toc{padding:32px 0; border-bottom:1px solid var(--line)}
.toc h2{font-family:var(--sans); font-size:13px; letter-spacing:.2em; color:var(--muted); font-weight:600}
.toc ol{padding-left:1.6em; margin:0}
.toc li{margin:2px 0}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{color:var(--accent)}
.chapter{padding-top:72px}
.chapter h2{font-size:26px; line-height:1.6; letter-spacing:.06em; margin:0 0 32px}
.chapter h2 .no{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.2em; color:var(--accent); font-weight:600}
.chapter p{margin:0 0 1.1em}
.chapter p.li{padding-left:1em; text-indent:-1em}
.chapter p.li::before{content:"・"}
.sec{font-family:var(--sans); font-size:14px; margin:2.4em 0 .6em; font-weight:600}
.sec a{color:var(--muted); text-decoration:none}
.sec a::before{content:"§ "}
.epigraph{color:var(--muted); font-size:15px; text-align:right}
.chapter-end{text-align:center; color:var(--line); margin:48px 0 0; font-size:14px}
.fin{text-align:center; margin:64px 0 0; color:var(--muted)}
.prose{max-width:36rem; margin:0 auto; padding:40px 20px}
.prose h1{font-size:28px}
.prose h2{font-size:18px; margin-top:2em}
@media (max-width:600px){
  body{font-size:17px; line-height:1.95}
  .hero h1{font-size:32px}
  .titlepage h1{font-size:36px}
}