:root { color-scheme:light; --ink:#252b3b; --muted:#697287; --paper:#fffefa; --canvas:#f0eee8; --line:#e5e0d4; --accent:#8b6336; --accent-soft:#f4ead9; --blue:#435978; --quote:#f6f4ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Noto Serif TC","Source Han Serif TC","PMingLiU",serif; line-height:1.9; font-size:17px; }
a { color:var(--blue); }
.page { width:min(1220px,calc(100% - 32px)); margin:34px auto 64px; }
.hero { background:linear-gradient(125deg,#27364b,#526179); color:#fffefa; border-radius:18px 18px 0 0; padding:48px clamp(24px,7vw,84px) 38px; }
.kicker { color:#e5c79d; letter-spacing:.16em; font:600 12px/1.4 system-ui,sans-serif; }
h1 { font-size:clamp(30px,4vw,46px); line-height:1.35; margin:14px 0 8px; }
.subtitle { color:#eee7da; font-size:18px; margin:0; }
.hero-meta { display:flex; align-items:center; gap:18px; margin-top:20px; flex-wrap:wrap; font:13px/1.5 system-ui,sans-serif; color:#e3e6eb; }
.actions { margin-left:auto; }
button { border:1px solid #ffffff66; color:#fffefa; background:#ffffff12; border-radius:999px; padding:8px 14px; font:600 12px system-ui,sans-serif; cursor:pointer; }
button:hover { background:#ffffff26; }
.shell { display:grid; grid-template-columns:270px minmax(0,1fr); background:var(--paper); border-radius:0 0 18px 18px; box-shadow:0 18px 55px #2d303b14; }
nav { align-self:start; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; padding:28px 16px 28px 24px; border-right:1px solid var(--line); }
.nav-title { font:700 12px system-ui,sans-serif; color:var(--muted); letter-spacing:.1em; margin:0 0 12px; }
nav a { display:flex; gap:8px; padding:5px; color:#465065; text-decoration:none; font-size:12px; line-height:1.5; border-radius:6px; }
nav a:hover { background:var(--accent-soft); color:var(--ink); }
nav a span { color:var(--accent); font:700 9px/2 system-ui,sans-serif; min-width:18px; }
nav a.depth-0 { margin-top:9px; color:#27364b; font-weight:700; font-size:13px; }
nav a.depth-1 { padding-left:12px; }
nav a.depth-2 { padding-left:24px; color:#697287; }
article { max-width:920px; padding:36px clamp(22px,5vw,68px) 72px; }
.editor-note { margin:0 0 30px; padding:16px 19px; border:1px solid #d7e1e9; background:#f0f5f8; border-radius:10px; color:#405467; font:14px/1.75 system-ui,sans-serif; }
.lesson-heading { font-size:29px; line-height:1.5; margin:1.9em 0 .55em; padding-bottom:.35em; border-bottom:2px solid #d7c3a5; color:#27364b; scroll-margin-top:20px; }
.lesson-heading:first-of-type { margin-top:0; }
.lesson-intro { margin:0 0 26px; color:#596277; font-size:16px; }
.topic-heading { font-size:22px; margin:2.15em 0 .65em; color:#324259; scroll-margin-top:20px; }
.lesson-part { margin:2.15em 0 .65em; padding:10px 14px; background:#f4f2eb; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; font-size:19px; color:#324259; scroll-margin-top:20px; }
.lesson-summary { font-size:21px; margin:2.2em 0 .65em; padding-bottom:.35em; border-bottom:1px solid var(--line); color:#324259; }
.clause-heading { font-size:19px; line-height:1.55; margin:1.65em 0 .45em; color:#354761; scroll-margin-top:20px; }
.detail-heading { font-size:16px; line-height:1.6; margin:1.45em 0 .35em; color:#53647e; }
.label { display:flex; align-items:center; gap:10px; margin:1.3em 0 .4em; color:var(--accent); font:700 13px system-ui,sans-serif; letter-spacing:.05em; }
.label::after { content:""; height:1px; background:var(--line); flex:1; }
.diagram-label { font-size:14px; margin:0; color:#354761; }
p { margin:.62em 0; }
blockquote { margin:1em 0; padding:12px 18px; background:var(--quote); border-left:3px solid var(--accent); color:#455064; }
blockquote p { margin:0; }
ul,ol { padding-left:1.5em; }
li { padding-left:.18em; margin:.18em 0; }
li::marker { color:var(--accent); }
.choices { padding:12px 18px 12px 44px; background:#f7f6f1; border-radius:10px; }
.choices li { padding-left:5px; }
.table-wrap { overflow:auto; margin:16px 0 22px; }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.7; }
th,td { border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; }
th { color:#354761; background:#f4f2eb; font-size:13px; }
.summary-card { display:grid; grid-template-columns:minmax(145px, .34fr) 1fr; gap:14px; padding:12px 14px; margin:8px 0; background:#f8f7f2; border:1px solid var(--line); border-radius:8px; }
.summary-card strong { color:#435978; }
.summary-card span { color:#4f5668; }
.chart-example { margin:16px 0 24px; padding:17px 19px; background:#f7f6f1; border:1px solid var(--line); border-radius:12px; }
.chart-title { font-weight:700; color:#27364b; }
.chart-caption { color:var(--muted); font:12px system-ui,sans-serif; margin:2px 0 12px; }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chart-grid div { background:white; border:1px solid var(--line); padding:10px 12px; border-radius:8px; }
.chart-grid strong,.chart-grid span { display:block; }
.chart-grid strong { color:var(--accent); }
.chart-result { margin-top:12px; color:#435978; font-weight:700; }
.editorial-end { margin-top:38px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
@media(max-width:900px) {
 .page { width:100%; margin:0 auto 28px; } .hero { border-radius:0; }
 .shell { display:block; border-radius:0; } nav { position:relative; top:auto; max-height:340px; border-right:0; border-bottom:1px solid var(--line); padding:16px 20px; }
 nav a { display:inline-flex; width:calc(50% - 5px); vertical-align:top; } article { padding:24px 22px 48px; }
 .actions { margin-left:0; }
}
@media(max-width:480px) { body { font-size:16px; } nav a { width:100%; } .chart-grid { grid-template-columns:1fr; } .summary-card { grid-template-columns:1fr; gap:4px; } }
@media print {
 body { background:#fff; font-size:11pt; } .page { width:100%; margin:0; }
 .hero { color:#111; background:#fff; border-bottom:2px solid #333; border-radius:0; padding:20px 0; }
 .kicker,.subtitle,.hero-meta { color:#333; } .actions,nav { display:none; } .shell { display:block; box-shadow:none; }
 article { max-width:none; padding:14px 0; } h2,h3,h4,h5 { break-after:avoid; }
 blockquote,table,.editor-note,.chart-example,.summary-card { break-inside:avoid; } a { color:inherit; text-decoration:none; }
}

.lesson-source { margin:-.25em 0 1.25em; color:var(--muted); font:13px/1.6 system-ui,sans-serif; }
.opening-verses { margin:1em 0 1.4em; padding:13px 22px 13px 44px; background:#f8f7f2; border:1px solid var(--line); border-radius:10px; }
.takeaway { margin:1em 0; padding:10px 14px; border-left:3px solid var(--accent); background:var(--accent-soft); color:#465065; border-radius:0 7px 7px 0; }

.exercise-answer { margin:16px 0 24px; padding:12px 16px; border:1px solid var(--line); border-radius:9px; background:#f8f7f2; }
.exercise-answer summary { cursor:pointer; color:var(--blue); font-weight:700; }

nav a[aria-current="location"] { background:var(--accent-soft); font-weight:700; }
@media print { details.exercise-answer:not([open]) > :not(summary) { display:block; } }

/* Split-edition reader and catalogue */
.catalog-shell { display:block; }
.page { width:min(1260px, calc(100% - 28px)); }
.hero .site-return { display:inline-block; color:#f5dfb9; font:600 13px/1.4 system-ui,sans-serif; text-decoration:none; }
.hero .site-return:hover { text-decoration:underline; }
.hero-meta a { color:#f8e9cc; }
.lesson-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; font:600 13px/1.5 system-ui,sans-serif; }
.lesson-actions a { display:inline-block; text-decoration:none; border:1px solid #ffffff77; color:white; padding:7px 14px; border-radius:999px; }
.lesson-actions a:hover { background:#ffffff25; }
.lesson-nav { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; padding-top:30px; margin-top:40px; border-top:1px solid var(--line); font:600 14px/1.7 system-ui,sans-serif; }
.lesson-nav a { text-decoration:none; }
.catalog { padding:34px clamp(20px,5vw,60px) 62px; }
.catalog-intro { color:var(--muted); max-width:68ch; }
.search-area { display:flex; gap:12px; margin:20px 0 10px; align-items:center; }
.search-area input { width:100%; min-width:0; padding:13px 16px; border:1px solid #c8c9c6; border-radius:9px; font:17px/1.5 system-ui,sans-serif; background:white; color:#252b3b; }
.search-area input:focus { outline:2px solid #9b7c4a; outline-offset:1px; }
.search-help { font:13px/1.6 system-ui,sans-serif; color:var(--muted); }
.search-results { padding:0; list-style:none; }
.result-item { padding:17px 2px; border-bottom:1px solid var(--line); }
.result-item a { font-size:18px; font-weight:700; text-decoration:none; }
.result-item a:hover { text-decoration:underline; }
.result-item small { display:block; margin:4px 0; color:var(--muted); font:12px/1.6 system-ui,sans-serif; }
.result-item p { font-size:14px; color:#4f5a6c; margin:7px 0 0; }
.catalog-group { border-top:1px solid var(--line); padding-top:14px; margin-top:23px; }
.catalog-group h2 { color:#324259; font-size:20px; margin:8px 0; }
.catalog-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.catalog-list li { margin:0; padding:0; }
.catalog-list a { display:block; color:#334965; background:#f8f7f2; padding:13px 15px; border:1px solid var(--line); border-radius:9px; text-decoration:none; line-height:1.5; }
.catalog-list a:hover { background:#f4ead9; }
.catalog-list strong { color:var(--accent); margin-right:9px; font:700 14px system-ui,sans-serif; }
.catalog-list span { display:block; color:#465065; font-size:14px; }
.is-hidden { display:none !important; }
@media(max-width:650px) { .catalog-list { grid-template-columns:1fr; } .search-area { display:block; } .catalog { padding:22px 18px 45px; } }
@media print { .lesson-nav,.search-area { display:none; } }