:root{
  --bg:#303030;
  --chrome:#1c1c1c;
  --text:#f1eee8;
  --muted:#b8bcc3;
  --accent:#dec17e;
  --line:#595959;
  --page:#10151f;
  --page2:#171d29;
  --drawer:rgba(15,18,25,.985);
  --shadow:0 18px 54px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:Georgia,"Times New Roman",serif}
a{color:inherit}
button{font:inherit}

/* ---------- shared site/menu chrome ---------- */
.site-topbar{
  position:sticky;top:0;z-index:50;
  min-height:42px;
  display:flex;align-items:center;gap:.6rem;
  padding:.35rem .55rem;
  background:var(--chrome);
  border-bottom:1px solid #444;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.menu-wrap{position:relative}
.hamburger{
  border:1px solid #666;background:#171717;color:#eee;
  border-radius:5px;padding:.34rem .58rem;cursor:pointer;font-size:1rem;
}
.hamburger:hover,.dropdown a:hover,.dropdown button:hover,
.reader-nav a:hover,.reader-nav button:hover{
  background:#2b2b2b;border-color:#888;
}
.dropdown{
  display:none;position:absolute;left:0;top:calc(100% + .35rem);
  width:180px;padding:.3rem;
  background:#171717;border:1px solid #555;border-radius:7px;
  box-shadow:var(--shadow);z-index:80;
}
.dropdown.open{display:block}
.dropdown a,.dropdown button{
  width:100%;display:block;text-align:left;
  padding:.58rem .65rem;border:0;border-radius:4px;
  background:transparent;color:#eee;text-decoration:none;cursor:pointer;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.book-label{
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:.84rem;color:#d0d0d0;letter-spacing:.05em;
}

/* ---------- cover ---------- */
.cover-page{
  min-height:100vh;background:#090b10;
}
.cover-controls{
  position:relative;
  min-height:38px;
  display:flex;justify-content:center;align-items:center;
  padding:.35rem 3.2rem;
}
.cover-controls .menu-wrap{
  position:absolute;left:.55rem;top:.35rem;
}
.open-book{
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:.9rem;color:#ddd;text-decoration:none;
  border-bottom:1px solid #777;padding-bottom:.08rem;
}
.open-book:hover{color:white}
.cover-image-wrap{
  height:calc(100vh - 38px);
  display:flex;align-items:center;justify-content:center;
  padding:.25rem .6rem .6rem;
}
.cover-image-wrap a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.cover-image-wrap img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  box-shadow:var(--shadow);
}

/* ---------- reader navigation ---------- */
.reader-nav-wrap{
  position:sticky;top:42px;z-index:40;
  display:flex;justify-content:center;
  padding:.38rem .6rem;
  background:#1a1a1a;border-bottom:1px solid #444;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.reader-nav{
  display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;
}
.reader-nav a,.reader-nav button,.reader-nav .status{
  min-height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.30rem .58rem;
  border:1px solid #666;border-radius:4px;
  background:#181818;color:#eee;text-decoration:none;
  font-size:.88rem;
}
.reader-nav .status{
  min-width:72px;background:#222;color:#ddd;
}
.reader-nav .disabled{
  opacity:.35;pointer-events:none;
}

/* ---------- book page ---------- */
.book-stage{
  min-height:calc(100vh - 80px);
  padding:1rem 1rem 2rem;
  background:#343434;
}
.book-page{
  width:min(1080px,94vw);
  margin:0 auto;
  background:linear-gradient(180deg,var(--page),var(--page2));
  border:1px solid #4a4a4a;
  box-shadow:var(--shadow);
}
.story-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:68vh;
  object-fit:contain;
  margin:0 auto;
}
.story-text{
  max-width:840px;
  margin:0 auto;
  padding:clamp(1rem,2vw,2rem) clamp(1rem,2.2vw,2rem) clamp(1.5rem,2.5vw,2.25rem);
  line-height:1.7;
  font-size:clamp(.95rem,.7vw + .7rem,1.08rem);
}
.story-kicker{
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--accent);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;margin-bottom:.5rem;
}
.story-text h1{
  margin:.05rem 0 .55rem;
  font-weight:500;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.04;
}
.story-subtitle{margin:0 0 1.2rem;color:#ddd6ca;font-size:1.08rem}
.story-text p:first-of-type::first-letter{
  float:left;font-size:4.1rem;line-height:.78;padding:.18rem .52rem 0 0;color:var(--accent);
}
.quote{
  margin-top:1.4rem;padding:.9rem 1rem;
  border-left:3px solid var(--accent);
  background:rgba(255,255,255,.035);
  color:#e7dfd1;font-style:italic;
}

/* ---------- TOC drawer: chapter level only ---------- */
.toc-drawer{
  position:fixed;z-index:70;
  top:42px;left:0;bottom:0;
  width:min(355px,90vw);
  padding:1rem;
  background:var(--drawer);
  border-right:1px solid #555;
  box-shadow:var(--shadow);
  transform:translateX(-105%);
  transition:transform .22s ease;
  overflow:auto;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
.toc-drawer.open{transform:translateX(0)}
.toc-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-bottom:.7rem;margin-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.toc-head h2{
  margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;
}
.toc-close{
  border:1px solid #666;border-radius:4px;background:#171717;color:#eee;
  padding:.3rem .5rem;cursor:pointer;
}
.toc-list{display:grid;gap:.35rem}
.toc-list a{
  display:block;text-decoration:none;color:#e5e5e5;
  padding:.65rem .7rem;border-radius:5px;border:1px solid transparent;
}
.toc-list a:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.toc-list a.current{border-color:rgba(222,193,126,.35);background:rgba(222,193,126,.08)}

/* ---------- small screens ---------- */
@media(max-width:700px){
  .book-label{display:none}
  .reader-nav{gap:.25rem}
  .reader-nav a,.reader-nav button,.reader-nav .status{
    padding:.28rem .45rem;font-size:.82rem;
  }
  .story-image{max-height:52vh}
  .story-text{padding:1.15rem 1rem 1.55rem}
  .book-stage{padding:.55rem .35rem 1.3rem}
  .book-page{width:100%}
}

@media(max-height:700px){
  .story-image{max-height:52vh}
  .book-stage{padding-top:.55rem}
}