/* ===== 5. Drawer, pager, footer ===== */
.drawer{position:fixed; inset-block:0; inset-inline-end:0; width:min(380px,88vw); z-index:60;
  background:var(--paper); border-inline-start:3px solid var(--line); padding:18px;
  transform:translateX(105%); transition:transform .3s ease; overflow-y:auto}
html[dir="rtl"] .drawer{transform:translateX(-105%)}
.drawer.open{transform:none}
html[dir="rtl"] .drawer.open{transform:none}
.drawerHead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.drawerHead h2{font-size:1.15rem}
#tocList{padding-inline-start:22px; margin:0}
#tocList li{margin:7px 0; font-family:var(--font-ui); font-weight:600}
#tocList li.sect{margin-top:14px; color:var(--coral)}
#tocList a{color:var(--ink); text-decoration:none; border-bottom:2px solid transparent}
#tocList a:hover{border-color:var(--gold)}
.scrim{position:fixed; inset:0; background:rgba(18,48,74,.45); z-index:50; backdrop-filter:blur(2px)}
.pager{position:fixed; inset-block-end:14px; inset-inline:0; z-index:45; display:flex; gap:12px;
  align-items:center; justify-content:center}
.pill{background:#fff; border:2px solid var(--line); border-radius:999px; padding:8px 16px;
  font-family:var(--font-ui); font-weight:700; box-shadow:var(--shadow-2)}
.foot{max-width:var(--maxw); margin:0 auto; padding:24px clamp(12px,4vw,24px) 90px; color:var(--ink-soft); font-size:.86rem}
.foot .muted{opacity:.8; font-size:.8rem}
body.single .book .page{display:none}
body.single .book .page.active{display:block; max-width:760px; margin:0 auto}

@media (min-width:820px){
  .grid2{grid-template-columns:1.05fr .95fr; align-items:start}
  .page{padding:44px}
}
@media (max-width:640px){
  .tools .btn span{display:none}
  .tools .btn{padding:9px 12px}
  .brand span{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}