:root{--navy:#080E22;--navy2:#0d1530;--gold:#C7A248;--gold-d:#8a6d1f;--cream:#F0E8D4;--ink:#1c1c22;}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--navy);color:var(--cream);font-family:'EB Garamond',Georgia,serif;min-height:100vh}
.hdr{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 18px;background:linear-gradient(180deg,var(--navy),var(--navy2));border-bottom:1px solid rgba(199,162,72,.4)}
.menu-btn{background:none;border:1px solid var(--gold);color:var(--gold);font-size:20px;border-radius:8px;padding:4px 10px;cursor:pointer}
.brand{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.5rem;letter-spacing:.06em;color:var(--cream)}
.brand span{color:var(--gold)}
.brand-sub{font-size:.72rem;color:rgba(240,232,212,.65);letter-spacing:.05em}
.hdr-tools{margin-left:auto}
#search{background:rgba(255,255,255,.07);border:1px solid rgba(199,162,72,.5);color:var(--cream);border-radius:20px;padding:7px 14px;font-family:inherit;width:210px;font-size:.9rem}
#search::placeholder{color:rgba(240,232,212,.5)}
.layout{display:flex;min-height:calc(100vh - 62px)}
.sidebar{width:290px;flex-shrink:0;background:var(--navy2);border-right:1px solid rgba(199,162,72,.25);overflow-y:auto;height:calc(100vh - 62px);position:sticky;top:62px;padding:14px 10px 40px}
.book-h{font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--gold);font-size:1.08rem;margin:14px 8px 6px;letter-spacing:.04em}
.ch-link{display:block;padding:6px 10px;border-radius:8px;color:rgba(240,232,212,.85);text-decoration:none;font-size:.92rem;cursor:pointer;line-height:1.3}
.ch-link:hover{background:rgba(199,162,72,.14)}
.ch-link.active{background:rgba(199,162,72,.22);color:var(--gold);border-left:3px solid var(--gold)}
.main{flex:1;display:flex;flex-direction:column;align-items:center;padding:26px 16px 40px}
.reader{background:#fbf8f0;color:var(--ink);max-width:760px;width:100%;border-radius:14px;padding:38px 44px;box-shadow:0 14px 40px rgba(0,0,0,.45);border:1px solid rgba(199,162,72,.55)}
.reader h1{font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--navy);text-align:center;font-size:1.9rem;margin-bottom:2px}
.reader h2.subt{font-style:italic;font-weight:400;text-align:center;color:var(--gold-d);font-size:1.08rem;font-family:'EB Garamond',serif;margin-bottom:8px}
.orn{text-align:center;color:var(--gold);letter-spacing:.45em;margin:10px 0 14px;font-size:.85rem}
.chintro{font-style:italic;text-align:center;color:#4a4a4a;margin:0 22px 22px;font-size:.98rem}
.sec h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--navy);font-size:1.24rem;margin:26px 0 4px}
.sec h3 .ref{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;font-size:.82rem;color:var(--gold-d)}
.scripture{font-style:italic;color:#26262b;background:rgba(199,162,72,.08);border-left:3px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;margin:6px 0 12px;line-height:1.65;font-size:.98rem}
.vn{font-size:.66em;color:var(--gold-d);vertical-align:super;font-style:normal;font-weight:600;margin-right:2px}
.comm{line-height:1.68;font-size:1.02rem;text-align:justify}
.walk{color:var(--gold-d);font-weight:600;letter-spacing:.14em;font-size:.8rem;margin:12px 0 4px}
ul.q{margin:0 0 4px 22px}
ul.q li{margin-bottom:5px;font-size:.98rem;line-height:1.5}
ul.q li::marker{color:var(--gold)}
.bookintro{line-height:1.7;font-size:1.03rem;text-align:justify}
.pager{display:flex;gap:14px;margin-top:22px}
.pager button{background:var(--navy2);border:1px solid var(--gold);color:var(--gold);font-family:inherit;font-size:.95rem;padding:9px 20px;border-radius:24px;cursor:pointer}
.pager button:hover{background:rgba(199,162,72,.2)}
.ftr{margin-top:30px;text-align:center;font-size:.78rem;color:rgba(240,232,212,.55);line-height:1.6}
.home-hero{text-align:center}
.home-hero .cross{color:var(--gold);font-size:2.6rem;margin:8px 0}
.home-desc p{line-height:1.7;text-align:justify;margin-bottom:12px;font-size:1.02rem}
.result{display:block;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;border-radius:8px}
.result:hover{background:rgba(199,162,72,.1)}
.result .r-ref{color:var(--gold-d);font-weight:600;font-size:.85rem}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
@media(max-width:900px){
 .sidebar{position:fixed;left:-300px;top:62px;transition:left .25s;z-index:28;height:calc(100vh - 62px)}
 .sidebar.open{left:0}
 .overlay.show{display:block}
 .reader{padding:26px 20px}
 #search{width:140px}
 .brand-sub{display:none}
}