/* =================================================================
   Canonical Classics — shared stylesheet
   Tokens · Base · Chrome · Pinyin · Home · Contents · Reader · Motion · Responsive
   Fonts are loaded per-page via <link> (Cormorant Garamond, Spectral, Noto Serif TC).
================================================================= */

/* ---------------- Tokens ---------------- */
:root{
  --paper:#f2e7d2; --paper-2:#ecdcc1; --paper-3:#e6d6ba;
  --ink:#272019; --ink-soft:#6c5d4c; --pinyin:#7a674c;
  --cinnabar:#b1392c; --cinnabar-deep:#892a20; --cinnabar-bright:#c0432f;
  --gold:#a37c34; --rule:#d6c3a1;
  --reading-size:1.55rem;
  --maxw:760px;            /* default; overridden per page below */
}
body.home{--maxw:1120px;}
body.book{--maxw:860px;}
body.reader{--maxw:760px;}

/* ---------------- Base ---------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; min-height:100vh; position:relative;
  background-color:var(--paper);
  background-image:radial-gradient(135% 82% at 50% -10%, #f9f1e2 0%, var(--paper) 47%, var(--paper-2) 100%);
  color:var(--ink); font-family:'Spectral',Georgia,serif; -webkit-font-smoothing:antialiased;}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;}
.wrap{position:relative; z-index:1;}
a{color:inherit;}
.han{font-family:'Noto Serif TC',serif; font-weight:600; font-style:normal;}

/* ---------------- Shared chrome ---------------- */
.topbar{max-width:var(--maxw); margin:0 auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand .seal{width:38px; height:38px; border-radius:7px; background:var(--cinnabar); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:'Noto Serif TC',serif; font-weight:700; font-size:1.18rem;
  transform:rotate(-5deg); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);}
.brand .name{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.32rem; letter-spacing:.02em; line-height:1;}
.topnav{display:flex; gap:26px;}
.topnav a{font-family:'Spectral',serif; font-size:.92rem; letter-spacing:.04em; color:var(--ink-soft); text-decoration:none; transition:color .2s;}
.topnav a:hover{color:var(--cinnabar);}
.back{font-family:'Spectral',serif; font-size:.9rem; color:var(--ink-soft); text-decoration:none; transition:color .2s;}
.back:hover{color:var(--cinnabar);}

.crumbs{max-width:var(--maxw); margin:0 auto; padding:6px 28px 0; font-family:'Spectral',serif; font-size:.84rem; color:var(--ink-soft);}
.crumbs a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;}
.crumbs a:hover{border-color:var(--gold);}
.crumbs .sep{margin:0 8px; color:var(--gold);}

.divider{max-width:var(--maxw); margin:24px auto 0; padding:0 28px; display:flex; align-items:center; gap:16px;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--rule);}
.divider span{font-family:'Noto Serif TC',serif; color:var(--gold); font-size:.96rem; letter-spacing:.36em;}

.section-head{text-align:center; margin-bottom:34px;}
.section-head h2{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.3rem; margin:0;}
.section-head .zh{font-family:'Noto Serif TC',serif; color:var(--gold); font-size:1rem; letter-spacing:.3em; margin-top:6px;}

footer{max-width:var(--maxw); margin:48px auto 0; padding:30px 28px 60px; border-top:1px solid var(--rule);}
footer p{font-family:'Spectral',serif; font-size:.84rem; line-height:1.6; color:var(--ink-soft); margin:0 0 8px;}
footer .tip{color:var(--gold); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:.98rem;}
footer a{text-decoration:none; border-bottom:1px solid var(--rule);}
footer.site{display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:flex-start;}
footer.site .f-brand{font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--ink); max-width:24em;}
footer.site .f-brand span{display:block; font-family:'Spectral',serif; font-size:.86rem; color:var(--ink-soft); margin-top:8px; line-height:1.6;}
footer.site .f-note{font-family:'Spectral',serif; font-size:.82rem; color:var(--ink-soft); line-height:1.6; max-width:26em;}

/* ---------------- Ruby / pinyin (reader) ---------------- */
ruby{ruby-align:center; ruby-position:under; -webkit-ruby-position:after;}
rt{font-family:'Spectral',serif; font-weight:400; color:var(--pinyin); font-size:.42em; letter-spacing:.01em; line-height:1; display:none;}
body.show-pinyin rt{display:revert;}

/* Traditional / Simplified toggle — traditional is default */
.text-sc { display: none; }
body.show-simplified .text-tc { display: none; }
body.show-simplified .text-sc { display: revert; }

/* ================= HOMEPAGE ================= */
.hero{max-width:var(--maxw); margin:0 auto; padding:54px 32px 30px; text-align:center; position:relative;}
.hero .watermark{position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-family:'Noto Serif TC',serif; font-weight:900; font-size:15rem; line-height:1; color:var(--ink);
  opacity:.04; pointer-events:none; user-select:none; z-index:0;}
.hero-kicker{position:relative; font-family:'Spectral',serif; font-style:italic; font-size:.86rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 16px;}
.hero h1{position:relative; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:4.4rem; line-height:1.02; letter-spacing:.01em; margin:0;}
.hero h1 .amp{color:var(--cinnabar);}
.hero .lede{position:relative; font-family:'Spectral',serif; font-size:1.28rem; line-height:1.55; color:var(--ink-soft); max-width:30em; margin:22px auto 0;}
.hero .lede strong{color:var(--ink); font-weight:600;}
.hero .cue{position:relative; display:inline-block; margin-top:30px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.1rem; color:var(--cinnabar-deep); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px;}

.library{max-width:var(--maxw); margin:0 auto; padding:40px 32px 10px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:30px;}
.book{display:flex; flex-direction:column; animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.book:nth-child(2){animation-delay:.08s;} .book:nth-child(3){animation-delay:.16s;} .book:nth-child(4){animation-delay:.24s;}
.book-cover{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; border-radius:6px; overflow:hidden; text-decoration:none;
  box-shadow:0 8px 22px -12px rgba(70,40,20,.55), 0 2px 5px rgba(70,40,20,.2); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;}
.book.available .book-cover{background:linear-gradient(150deg, var(--cinnabar-bright), var(--cinnabar-deep));}
.book.soon .book-cover{background:linear-gradient(150deg, #6f6253, #514738);}
.book-cover::before{content:""; position:absolute; inset:11px; border:1px solid rgba(247,239,224,.35); border-radius:3px; pointer-events:none;}
.book-cover::after{content:""; position:absolute; left:0; top:0; bottom:0; width:14px; background:linear-gradient(90deg, rgba(0,0,0,.22), transparent); pointer-events:none;}
.cover-title{font-family:'Noto Serif TC',serif; font-weight:700; color:#f7efe0; writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.12em; font-size:2.15rem; text-shadow:0 1px 2px rgba(0,0,0,.3);}
.book.soon .cover-title{color:#e7ddcd; opacity:.85;}
.cover-seal{position:absolute; bottom:13px; right:13px; width:30px; height:30px; border-radius:4px; background:rgba(247,239,224,.92); color:var(--cinnabar-deep);
  display:flex; align-items:center; justify-content:center; font-family:'Noto Serif TC',serif; font-weight:700; font-size:.92rem;}
.book.soon .cover-seal{background:rgba(247,239,224,.5); color:#514738;}
.book.available .book-cover:hover{transform:translateY(-7px) rotate(-.5deg); box-shadow:0 18px 34px -14px rgba(70,40,20,.6);}
.book-info{padding:18px 4px 4px; display:flex; flex-direction:column; flex:1;}
.book-en{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.42rem; line-height:1.12; margin:0;}
.book-meta{font-family:'Spectral',serif; font-style:italic; font-size:.9rem; color:var(--gold); margin:5px 0 0;}
.book-blurb{font-family:'Spectral',serif; font-size:.96rem; line-height:1.5; color:var(--ink-soft); margin:11px 0 0; flex:1;}
.book-cta{display:inline-block; align-self:flex-start; margin-top:16px; font-family:'Noto Serif TC',serif; font-size:.96rem; color:#fff; background:var(--cinnabar); padding:8px 16px; border-radius:7px; text-decoration:none; transition:background .2s, transform .15s;}
.book-cta:hover{background:var(--cinnabar-deep); transform:translateX(2px);}
.book-status{display:inline-block; align-self:flex-start; margin-top:16px; font-family:'Spectral',serif; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--rule); background:var(--paper-3); padding:6px 13px; border-radius:999px;}

.features{max-width:var(--maxw); margin:0 auto; padding:64px 32px 30px;}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.feat{text-align:center;}
.feat .glyph{width:62px; height:62px; margin:0 auto 16px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.7rem; color:var(--cinnabar-deep); background:var(--paper-3);}
.feat h3{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.4rem; margin:0 0 8px;}
.feat h3 .zh{font-family:'Noto Serif TC',serif; font-size:1rem; color:var(--gold); margin-left:6px;}
.feat p{font-family:'Spectral',serif; font-size:1rem; line-height:1.62; color:var(--ink-soft); margin:0 auto; max-width:24em;}

/* ================= CONTENTS PAGE ================= */
.book-head{max-width:var(--maxw); margin:0 auto; padding:26px 28px 8px; display:grid; grid-template-columns:172px 1fr; gap:32px; align-items:start;}
.cover{position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:linear-gradient(150deg, var(--cinnabar-bright), var(--cinnabar-deep));
  box-shadow:0 10px 24px -12px rgba(70,40,20,.55), 0 2px 5px rgba(70,40,20,.2); display:flex; align-items:center; justify-content:center;}
.cover::before{content:""; position:absolute; inset:11px; border:1px solid rgba(247,239,224,.35); border-radius:3px;}
.cover::after{content:""; position:absolute; left:0; top:0; bottom:0; width:14px; background:linear-gradient(90deg, rgba(0,0,0,.22), transparent);}
.cover .t{font-family:'Noto Serif TC',serif; font-weight:700; color:#f7efe0; writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.12em; font-size:2rem; text-shadow:0 1px 2px rgba(0,0,0,.3);}
.cover .seal{position:absolute; bottom:12px; right:12px; width:28px; height:28px; border-radius:4px; background:rgba(247,239,224,.92); color:var(--cinnabar-deep); display:flex; align-items:center; justify-content:center; font-family:'Noto Serif TC',serif; font-weight:700; font-size:.86rem;}
.book-head h1{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.7rem; line-height:1.05; margin:2px 0 0;}
.book-head .zh-title{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.5rem; color:var(--ink); letter-spacing:.08em; margin:8px 0 0;}
.book-head .meta{font-family:'Spectral',serif; font-style:italic; font-size:1rem; color:var(--gold); margin:10px 0 0;}
.book-head .intro{font-family:'Spectral',serif; font-size:1.04rem; line-height:1.68; color:var(--ink-soft); margin:16px 0 0;}

.callout{max-width:var(--maxw); margin:22px auto 0; padding:0 28px;}
.callout .inner{background:var(--paper-3); border:1px solid var(--rule); border-radius:11px; padding:14px 18px; font-family:'Spectral',serif; font-size:.96rem; line-height:1.6; color:var(--ink);}

.toc{max-width:var(--maxw); margin:0 auto; padding:30px 28px 10px;}
.chapter{border:1px solid var(--rule); border-radius:12px; padding:20px 22px; margin-bottom:18px; background:rgba(246,236,212,.5);}
.chapter.locked{opacity:.62;}
.ch-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.ch-no{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.04rem; color:var(--cinnabar-deep); letter-spacing:.1em; white-space:nowrap;}
.ch-title{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.24rem; color:var(--ink); letter-spacing:.06em;}
.ch-en{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.02rem; color:var(--ink-soft); flex-basis:100%; margin-top:2px;}
.passages{list-style:none; margin:16px 0 0; padding:0; border-top:1px dashed var(--rule);}
.passages li{display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px dashed var(--rule);}
.passages li:last-child{border-bottom:none;}
.p-no{font-family:'Noto Serif TC',serif; font-size:.86rem; color:var(--gold); white-space:nowrap; width:2.4em;}
.p-titles{flex:1; min-width:0;}
.p-zh{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.08rem; color:var(--ink);}
.p-en{font-family:'Spectral',serif; font-size:.92rem; color:var(--ink-soft); display:block; margin-top:1px;}
.p-read{font-family:'Noto Serif TC',serif; font-size:.92rem; color:#fff; background:var(--cinnabar); padding:6px 14px; border-radius:7px; text-decoration:none; white-space:nowrap; transition:background .2s, transform .15s;}
.p-read:hover{background:var(--cinnabar-deep); transform:translateX(2px);}
.p-soon{font-family:'Spectral',serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--rule); padding:5px 11px; border-radius:999px; white-space:nowrap;}
.ch-soon-tag{font-family:'Spectral',serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--rule); padding:5px 11px; border-radius:999px; margin-left:auto;}
.more-note{text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.08rem; color:var(--ink-soft); padding:20px; border:1px dashed var(--rule); border-radius:12px; margin-top:6px;}
.more-note .han{font-style:normal;}

/* ================= READER (passage) ================= */
.rtitle{max-width:var(--maxw); margin:8px auto 0; padding:22px 26px 6px; text-align:center;}
.rtitle .rt-no{font-family:'Noto Serif TC',serif; font-size:.9rem; letter-spacing:.24em; color:var(--gold);}
.rtitle .rt-line{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.7rem; letter-spacing:.1em; margin:7px 0; color:var(--ink);}
.rtitle .rt-en{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.12rem; color:var(--ink-soft); max-width:32em; margin:12px auto 0; line-height:1.4;}

.passage-nav{max-width:var(--maxw); margin:24px auto 0; padding:0 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:9px;}
.pn-item{display:block; background:transparent; border:1px solid var(--rule); border-radius:10px; padding:11px 9px; text-decoration:none; color:var(--ink-soft); transition:border-color .25s, background .25s, transform .15s; position:relative;}
.pn-item:hover{border-color:var(--gold); transform:translateY(-1px);}
.pn-item .pn-no{font-family:'Noto Serif TC',serif; font-size:.72rem; letter-spacing:.12em; color:var(--gold); display:block;}
.pn-item .pn-cn{font-family:'Noto Serif TC',serif; font-size:1rem; font-weight:600; color:var(--ink); display:block; margin-top:3px;}
.pn-item.current{background:var(--ink); border-color:var(--ink);}
.pn-item.current .pn-no{color:#e8b9a2;}
.pn-item.current .pn-cn{color:var(--paper);}
.pn-item.soon{cursor:default;}
.pn-item.soon:hover{border-color:var(--rule); transform:none;}
.pn-item .dot{position:absolute; top:9px; right:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.8;}

.controls{position:sticky; top:0; z-index:5; margin-top:22px; background:rgba(242,231,210,.88); backdrop-filter:blur(8px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.controls-inner{max-width:var(--maxw); margin:0 auto; padding:10px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.ctrl-label{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:var(--ink-soft);}
.ctrl-right{display:flex; align-items:center; gap:20px;}
.toggle{display:flex; align-items:center; gap:10px; user-select:none;}
.toggle .t-text{font-family:'Noto Serif TC',serif; font-size:.95rem; color:var(--ink);}
.toggle .t-state{font-family:'Spectral',serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; width:30px; color:var(--ink-soft); transition:color .2s;}
.toggle .t-state.on{color:var(--cinnabar); font-weight:600;}
.switch{--w:46px; --h:25px; width:var(--w); height:var(--h); border-radius:999px; border:none; cursor:pointer; background:#ccba98; position:relative; transition:background .25s; padding:0; flex:0 0 auto;}
.switch:focus-visible{outline:2px solid var(--cinnabar); outline-offset:3px;}
.switch .knob{position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.28); transition:transform .25s;}
.switch[aria-checked="true"]{background:var(--cinnabar);}
.switch[aria-checked="true"] .knob{transform:translateX(21px);}
.stepper{display:flex; align-items:center; gap:6px;}
.stepper button{width:30px; height:30px; border-radius:8px; border:1px solid var(--rule); background:transparent; cursor:pointer; color:var(--ink); font-family:'Noto Serif TC',serif; line-height:1; transition:border-color .2s, background .2s;}
.stepper button:hover{border-color:var(--gold);}
.stepper .a-sm{font-size:.82rem;} .stepper .a-lg{font-size:1.1rem;}

.reader-main{max-width:var(--maxw); margin:0 auto; padding:14px 26px 40px; position:relative;}
.section-title{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.3rem; color:var(--ink); display:flex; align-items:baseline; gap:11px; margin:30px 0 18px;}
.section-title .en{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:1.04rem; color:var(--gold);}
hr.rule{border:none; border-top:1px solid var(--rule); margin:30px 0;}

.verse{text-align:center; padding:6px 0 4px;}
.verse .vline{font-family:'Noto Serif TC',serif; font-weight:400; font-size:calc(var(--reading-size) + .28rem); line-height:2.15; color:var(--ink); letter-spacing:.04em; transition:line-height .3s;}
body.show-pinyin .verse .vline{line-height:3.05;}
.verse .vline.couplet-gap{margin-bottom:.5em;}

.prose p{font-family:'Noto Serif TC',serif; font-size:var(--reading-size); line-height:2.05; color:var(--ink); margin:0 0 1.1em; text-align:justify; transition:line-height .3s;}
body.show-pinyin .prose p{line-height:2.95;}
.prose .vline.rhap{font-family:'Noto Serif TC',serif; font-size:calc(var(--reading-size) + .03rem); line-height:2.1; color:var(--ink); text-align:center; letter-spacing:.05em; margin:.18em 0; transition:line-height .3s;}
.prose .vline.rhap:first-of-type{margin-top:.5em;}
body.show-pinyin .prose .vline.rhap{line-height:3;}

.gloss-seg{padding:18px 0; border-bottom:1px solid var(--rule);}
.gloss-seg:last-child{border-bottom:none;}
.g-cn{font-family:'Noto Serif TC',serif; font-size:calc(var(--reading-size) + .05rem); line-height:1.95; color:var(--ink); letter-spacing:.03em; transition:line-height .3s;}
body.show-pinyin .g-cn{line-height:2.85;}
.g-en{font-family:'Spectral',serif; font-size:1.08rem; line-height:1.6; color:var(--cinnabar-deep); margin:10px 0 0; font-style:italic;}
.g-note{font-family:'Spectral',serif; font-size:1rem; line-height:1.66; color:var(--ink-soft); margin:9px 0 0;}
.g-note em,.commentary em{font-style:italic;}

.commentary{padding-top:2px;}
.commentary p{font-family:'Spectral',serif; font-size:1.07rem; line-height:1.76; color:var(--ink); margin:0 0 1.05em;}
.commentary p:last-child{margin-bottom:0;}

.chip{display:inline-block; font-family:'Spectral',serif; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--cinnabar-deep); border:1px solid #dfb6a6; background:#f5e3d8; padding:3px 11px; border-radius:999px; margin:0 7px 7px 0;}

.pager{display:flex; justify-content:space-between; gap:12px; margin-top:34px;}
.pager a, .pager .stub{flex:1; background:transparent; border:1px solid var(--rule); border-radius:10px; padding:12px 14px; font-family:inherit; color:var(--ink); transition:border-color .2s; text-decoration:none; display:block;}
.pager a:hover{border-color:var(--cinnabar);}
.pager .stub{opacity:.4;}
.pager .next{text-align:right;}
.pager .p-dir{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.85rem; color:var(--gold); display:block;}
.pager .p-ttl{font-family:'Noto Serif TC',serif; font-size:1rem; margin-top:2px; display:block;}

/* ---------------- Motion ---------------- */
@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.anim{opacity:0; transform:translateY(10px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
@media (prefers-reduced-motion:reduce){.anim,.book{animation:none; opacity:1; transform:none;}}

/* ---------------- Responsive ---------------- */
@media (max-width:780px){
  .hero h1{font-size:3rem;} .hero .watermark{font-size:9rem;}
  .feat-grid{grid-template-columns:1fr; gap:38px;}
  .topnav{display:none;}
}
@media (max-width:620px){
  .book-head{grid-template-columns:120px 1fr; gap:20px;}
  .book-head h1{font-size:2rem;}
  .cover .t{font-size:1.5rem;}
}
@media (max-width:600px){
  .rtitle .rt-line{font-size:1.4rem;}
  .passage-nav{grid-template-columns:repeat(2,1fr);}
  .ctrl-label{display:none;}
  .controls-inner{justify-content:flex-end;}
  .verse .vline{font-size:calc(var(--reading-size) + .15rem);}
}
@media (max-width:460px){
  .topbar,.hero,.library,.features,footer,.crumbs,.book-head,.callout,.toc,.divider,.reader-main,.controls-inner,.rtitle,.passage-nav{padding-left:18px; padding-right:18px;}
  .grid{grid-template-columns:repeat(2,1fr); gap:18px;}
  .cover-title{font-size:1.6rem;}
  .hero h1{font-size:2.5rem;}
  .passages li{flex-wrap:wrap;}
  .p-read,.p-soon{margin-left:3em;}
}
/* ── Chapter backgrounds ── */
body.chapter-01::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch1-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
body.chapter-02::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch2-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}
body.chapter-03::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch3-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-04::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch4-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-05::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch5-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-06::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch6-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-07::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch7-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-08::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch8-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-09::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch9-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-10::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch10-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-11::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch11-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-12::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch12-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-13::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch13-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-14::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch14-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-15::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch15-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-16::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch16-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-17::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch17-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-18::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch18-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-19::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch19-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-20::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch20-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-21::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch21-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-22::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch22-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-23::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch23-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-24::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch24-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-25::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch25-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-26::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch26-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-27::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch27-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-28::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch28-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-29::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch29-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-30::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch30-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-31::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch31-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-32::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch32-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-33::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch33-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-34::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch34-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-35::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch35-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-36::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch36-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-37::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch37-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
body.chapter-38::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/images/ch38-background.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
/* ==========================================================================
   Canonical Classics — UX additions
   PASTE THIS ENTIRE FILE AT THE END OF YOUR styles.css.
   (Loading it as a separate <link> also works, but only if your assets are
   passthrough-copied; pasting into styles.css avoids that and is why your
   controls already look right.)
   Colours fall back to defaults but defer to your tokens where defined.
   ========================================================================== */

/* ---- Read / Study switch (lives inside your .controls bar) --------------- */
/* Wrapped in your existing .toggle, so it sits beside 拼音 / 字體 / size. */
.mode-seg {
  display: inline-flex; border: 1px solid var(--rule, #d9d0c2);
  border-radius: 999px; overflow: hidden;
}
.mode-seg .ms-seg {
  padding: .28rem .72rem; font-size: .82rem; line-height: 1.5;
  text-decoration: none; color: var(--muted, #9c9488); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.mode-seg .ms-seg + .ms-seg { border-left: 1px solid var(--rule, #d9d0c2); }
.mode-seg a.ms-seg:hover { color: var(--ink, #2b2622); }
.mode-seg .ms-seg.is-active { background: var(--accent, #7a3b2e); color: var(--paper, #f6f1e7); }

/* ---- Compact passage jump-menu (passage pages, replaces the strip) ------- */
.pjump-bar { display: flex; justify-content: center; margin: 1rem 0 1.4rem; }
.pjump { position: relative; }
.pjump > summary {
  display: inline-flex; align-items: baseline; gap: .55rem; cursor: pointer;
  list-style: none; padding: .4rem 1rem; border: 1px solid var(--rule, #d9d0c2);
  border-radius: 999px; color: var(--ink, #2b2622); white-space: nowrap;
  background: color-mix(in srgb, var(--paper, #f6f1e7) 60%, transparent);
}
.pjump > summary::-webkit-details-marker { display: none; }
.pjump .pjump-no { font-size: .8rem; letter-spacing: .1em; color: var(--muted, #9c9488); }
.pjump .pjump-cur { font-weight: 600; }
.pjump .pjump-count { font-size: .78rem; color: var(--muted, #9c9488); letter-spacing: .04em; }
.pjump .pjump-caret { font-size: .7rem; color: var(--muted, #9c9488); transition: transform .15s ease; }
.pjump[open] .pjump-caret { transform: rotate(180deg); }
.pjump .pjump-panel {
  position: absolute; z-index: 40; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
  width: min(24rem, 88vw); max-height: 62vh; overflow-y: auto;
  background: var(--paper, #f6f1e7); border: 1px solid var(--rule, #d9d0c2);
  border-radius: .6rem; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: .4rem;
}
.pjump .pjump-panel ol { list-style: none; margin: 0; padding: 0; }
.pjump .pjump-panel a,
.pjump .pjump-panel .pj-soon {
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; column-gap: .5rem;
  padding: .45rem .6rem; border-radius: .4rem; text-decoration: none; color: var(--ink, #2b2622);
}
.pjump .pjump-panel a:hover { background: color-mix(in srgb, var(--accent, #7a3b2e) 8%, transparent); }
.pjump .pjump-panel a.is-cur { background: color-mix(in srgb, var(--accent, #7a3b2e) 12%, transparent); }
.pjump .pj-idx { color: var(--muted, #9c9488); font-size: .82rem; }
.pjump .pj-cn { font-weight: 600; }
.pjump .pj-en { grid-column: 2; font-size: .78rem; color: var(--muted, #9c9488); line-height: 1.3; }
.pjump .pj-soon { color: var(--muted, #9c9488); opacity: .6; }
.pjump .pj-tag { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; align-self: center; }

/* ---- Contents: collapsible chapter blocks (index.njk) -------------------- */
/* Your own .chapter / .ch-head / .passages / .p-* styles still apply; this adds
   the toggle affordance, the caret, and the always-visible Read button. */
details.chapter > summary.ch-toggle {
  display: flex; align-items: center; gap: .75rem; list-style: none; cursor: pointer;
}
details.chapter > summary.ch-toggle::-webkit-details-marker { display: none; }
details.chapter > summary.ch-toggle > .ch-head { flex: 1 1 auto; }

.ch-caret {
  flex: 0 0 auto; color: var(--muted, #9c9488); font-size: .8rem;
  transition: transform .15s ease;
}
.ch-caret::after {
  content: "▾";
}
details.chapter[open] > summary.ch-toggle .ch-caret {
  transform: rotate(180deg);
}

/* Read button — now inside the summary, so it shows even when collapsed */
.ch-read {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px; text-decoration: none;
  white-space: nowrap; font-size: .85rem;
  background: color-mix(in srgb, var(--accent, #7a3b2e) 10%, transparent);
  color: var(--accent, #7a3b2e);
}
.ch-read:hover { background: color-mix(in srgb, var(--accent, #7a3b2e) 18%, transparent); }
.ch-read .en { font-weight: 600; }

/* ---- Continuous reader: column + flow markers (no study-this) ------------ */
.creader { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem 6rem; }
.creader-body { padding-top: 1.5rem; }
.creader-body .prose { line-height: 2.05; }
.creader-body .prose p { margin: 0 0 1.4rem; text-align: justify; }
.creader-body .prose p:last-child { margin-bottom: 0; }
.creader-body .verse, .creader-body .vline { line-height: 2.1; }

.cr-passage { scroll-margin-top: 5rem; }
.cr-marker { display: flex; align-items: center; gap: .85rem; margin: 2.75rem 0 1.6rem; }
.cr-marker .cr-rule { flex: 1 1 auto; height: 1px; background: var(--rule, #d9d0c2); opacity: .6; }
.cr-marker .cr-label {
  flex: 0 0 auto; font-size: .82rem; letter-spacing: .18em; color: var(--muted, #9c9488);
}
.cr-passage:first-child .cr-marker { margin-top: .5rem; }
/* ═══════════════════════════════════════════════════════════════
   CONTENTS RESTRUCTURE — append this whole block to styles.css
   (continue card · search · 卷 groups · chapter rows · chapter page)
   ═══════════════════════════════════════════════════════════════ */

/* ── Continue reading card ── */
.cc-continue{display:flex; align-items:center; gap:14px; margin:0 0 22px;
  padding:14px 18px; text-decoration:none; border:1px solid var(--rule);
  border-left:3px solid var(--cinnabar); border-radius:8px;
  background:rgba(255,255,255,.35); transition:background .2s, transform .15s;}
.cc-continue:hover{background:rgba(255,255,255,.6); transform:translateX(2px);}
.ccc-kicker{flex:0 0 auto; font-size:.78rem; letter-spacing:.08em;
  color:var(--cinnabar); font-weight:600; text-transform:uppercase;}
.ccc-where{flex:1 1 auto; font-size:.98rem; color:var(--ink);}
.ccc-where .ccc-ch{font-family:'Noto Serif TC',serif; font-weight:600;}
.ccc-where .ccc-title{font-family:'Noto Serif TC',serif;}
.ccc-go{flex:0 0 auto; color:var(--cinnabar);}

/* ── Search ── */
.cc-search{position:relative; margin:0 0 30px;}
.cc-search input{width:100%; padding:11px 16px; font-family:'Spectral',serif;
  font-size:.95rem; color:var(--ink); background:rgba(255,255,255,.45);
  border:1px solid var(--rule); border-radius:8px; outline:none;}
.cc-search input:focus{border-color:var(--gold); background:rgba(255,255,255,.7);}
.cc-search ul{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px; list-style:none; background:var(--paper);
  border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 10px 30px rgba(39,32,25,.16); max-height:340px; overflow:auto;}
.cc-search li a{display:flex; align-items:baseline; gap:12px; padding:8px 12px;
  text-decoration:none; border-radius:6px;}
.cc-search li a:hover{background:rgba(177,57,44,.07);}
.ccr-ch{flex:0 0 auto; font-size:.8rem; color:var(--gold); font-family:'Noto Serif TC',serif;}
.ccr-cn{flex:0 0 auto; font-family:'Noto Serif TC',serif; font-weight:600; color:var(--ink);}
.ccr-en{flex:1 1 auto; font-size:.85rem; color:var(--ink-soft); font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ccr-none{padding:10px 12px; color:var(--ink-soft); font-style:italic; font-size:.9rem;}

/* ── 卷 volume rules ── */
.juan-rule{display:flex; align-items:baseline; gap:14px; margin:34px 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--rule);}
.juan-rule:first-of-type{margin-top:8px;}
.juan-label{font-family:'Noto Serif TC',serif; font-weight:700; font-size:1.05rem;
  color:var(--cinnabar); letter-spacing:.25em;}
.juan-range{font-size:.82rem; color:var(--ink-soft); letter-spacing:.05em;}

/* ── Chapter rows ── */
.chrow{display:flex; align-items:center; gap:14px; padding:13px 6px;
  border-bottom:1px dotted var(--rule);}
.chrow-main{display:flex; align-items:center; gap:16px; flex:1 1 auto;
  min-width:0; text-decoration:none;}
a.chrow-main:hover .chrow-zh{color:var(--cinnabar);}
.chrow-no{flex:0 0 auto; font-family:'Noto Serif TC',serif; font-weight:600;
  color:var(--gold); font-size:.95rem; position:relative; white-space:nowrap;}
.chrow-dot{color:var(--cinnabar); font-size:.5rem; vertical-align:middle;
  margin-left:6px; opacity:.8;}
.chrow-titles{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.chrow-zh{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.02rem;
  color:var(--ink); transition:color .15s;}
.chrow-en{font-size:.82rem; color:var(--ink-soft); font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chrow-count{flex:0 0 auto; font-size:.78rem; color:var(--ink-soft);
  letter-spacing:.05em; white-space:nowrap;}
.chrow-read{flex:0 0 auto;}
.chrow-soon{opacity:.55;}
.chrow-soon .chrow-main{cursor:default;}
.toc-note{margin:26px 0 0; text-align:center; font-style:italic;
  color:var(--ink-soft); font-size:.92rem;}

/* ── Chapter page (/chapter-N/) ── */
.cpg-where{margin:0 0 6px; font-size:.82rem; letter-spacing:.12em;
  color:var(--ink-soft); text-transform:uppercase;}
.cpg-cta{margin-top:18px;}
.cpg-list{list-style:none; margin:6px 0 34px; padding:0;}
.cpg-item{display:flex; align-items:center; gap:16px; padding:12px 6px;
  border-bottom:1px dotted var(--rule); text-decoration:none;}
a.cpg-item:hover .cpg-zh{color:var(--cinnabar);}
a.cpg-item:hover .cpg-go{transform:translateX(3px);}
.cpg-no{flex:0 0 auto; font-family:'Noto Serif TC',serif; color:var(--gold);
  font-size:.92rem; min-width:3.4em;}
.cpg-titles{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.cpg-zh{font-family:'Noto Serif TC',serif; font-weight:600; font-size:1.05rem;
  color:var(--ink); transition:color .15s;}
.cpg-en{font-size:.84rem; color:var(--ink-soft); font-style:italic;}
.cpg-go{flex:0 0 auto; color:var(--cinnabar); transition:transform .15s;}
.cpg-soon{opacity:.55;}
.cpg-tag{flex:0 0 auto; font-size:.72rem; letter-spacing:.08em;
  color:var(--ink-soft); text-transform:uppercase;}

/* ── Mobile ── */
@media (max-width: 640px){
  .cc-continue{flex-wrap:wrap; gap:6px 14px;}
  .chrow{flex-wrap:wrap; gap:8px 14px;}
  .chrow-main{flex-wrap:wrap; gap:4px 14px; flex-basis:100%;}
  .chrow-titles{flex-basis:100%;}
  .chrow-en{white-space:normal;}
  .chrow-count{order:3;}
  .chrow-read{margin-left:auto;}
  .juan-rule{margin-top:26px;}
  .cpg-item{gap:10px;}
  .cpg-no{min-width:2.6em;}
  .ccr-en{display:none;}
}