:root {
  --bg: #f6f1e7;
  --paper: #fdfbf5;
  --ink: #2c2a24;
  --ink-soft: #6b6557;
  --accent: #9a6b3f;
  --accent-soft: #e8dcc8;
  --line: #e3d9c6;
  --sidebar-bg: #efe8d8;
  --seen: #d9a441;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --annotation-hi: #b46a2e;
  --annotation-bg-overlay: rgba(180,106,46,0.14);
  --fs: 1;
}
html[data-theme="dark"] {
  --bg: #171410;
  --paper: #1e1a14;
  --ink: #ddd4c2;
  --ink-soft: #9b9180;
  --accent: #d3a35f;
  --accent-soft: #3a2f20;
  --line: #352d21;
  --sidebar-bg: #1a1611;
  --annotation-hi: #e0b06f;
  --annotation-bg-overlay: rgba(224,176,111,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
  transition: background .4s, color .4s;
}

/* progress */
#progress { position: fixed; top:0; left:0; right:0; height:3px; background: transparent; z-index: 60; }
#progress-bar { height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--seen)); transition: width .1s linear; }

/* topbar */
.topbar { position: fixed; top:3px; left:0; right:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; }
.icon-btn { background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; padding:4px 6px; line-height:1; border-radius:8px; }
.icon-btn:hover { background: var(--accent-soft); }
.brand { flex:1; display:flex; flex-direction:column; line-height:1.15; }
.brand-title { font-weight:600; font-size:17px; letter-spacing:.2px; }
/* On a generated chapter page the wordmark is a real link back to the cover;
   it should read as the wordmark, not as a body-copy link. */
a.brand-title { color:inherit; text-decoration:none; }
a.brand-title:hover { text-decoration:underline; }
.brand-sub { font-size:12px; color:var(--ink-soft); font-family:var(--sans); }
.controls { display:flex; align-items:center; gap:10px; }
.size-ctrl { display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-family:var(--sans); font-size:12px; }
.size-ctrl input { width:90px; accent-color: var(--accent); }

.searchbox { max-width:1200px; margin:0 auto; padding:0 16px 12px; }
.searchbox input { width:100%; padding:10px 14px; font-family:var(--sans); font-size:15px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); }
.search-results { margin-top:8px; max-height:260px; overflow:auto; }
.search-results .sr { padding:8px 10px; border-radius:8px; cursor:pointer; font-family:var(--sans); font-size:13px; }
.search-results .sr:hover { background:var(--accent-soft); }
.search-results .sr b { color:var(--accent); }
.search-results .count { font-family:var(--sans); font-size:12px; color:var(--ink-soft); padding:2px 4px; }
.hidden { display:none !important; }

/* layout — single centered reading column; TOC & notes are overlay drawers
   so opening/closing them never shifts the reading text. */
.layout { max-width:1200px; margin:0 auto; padding:60px 16px 40px; }
.main { max-width:56rem; margin:0 auto; padding:20px 8px 60px; min-width:0; }

.toc { position:fixed; top:0; left:0; bottom:0; width:290px; z-index:80;
  background:var(--sidebar-bg); padding:70px 14px 26px; overflow:auto;
  border-right:1px solid var(--line); box-shadow:2px 0 24px rgba(0,0,0,.22);
  transform:translateX(-100%); transition:transform .25s ease; }
.toc.open { transform:translateX(0); }

.marginalia { position:fixed; top:0; right:0; bottom:0; width:340px; z-index:80;
  background:var(--sidebar-bg); padding:70px 18px 26px; overflow:auto;
  border-left:1px solid var(--line); box-shadow:-2px 0 24px rgba(0,0,0,.22);
  transform:translateX(100%); transition:transform .25s ease; }
.marginalia.open { transform:translateX(0); }

/* cover */
.cover { text-align:center; padding:30px 10px 10px; }
.cover .cover-title { font-size:56px; font-weight:600; line-height:1.05; margin:0 0 6px; }
.cover .cover-author { font-size:26px; font-style:italic; color:var(--ink-soft); margin:0 0 22px; }
.cover .cover-sub { font-family:var(--sans); font-size:14px; color:var(--ink-soft); letter-spacing:.5px; text-transform:uppercase; }
.cover .dec { width:70px; height:1px; background:var(--accent); margin:22px auto; }
/* The narration is the one thing on this page a reader can't guess at, so the
   cover says where the player is and that Option-click exists. Sentence case
   and soft ink on purpose: an invitation, not a banner. */
.cover .cover-audio { font-family:var(--sans); font-size:14px; line-height:1.6;
  color:var(--ink-soft); max-width:34em; margin:16px auto 0; }
.cover .start { margin-top:26px; padding:12px 28px; font-family:var(--sans); font-size:15px;
  background:var(--accent); color:var(--paper); border:none; border-radius:30px; cursor:pointer; }
.cover .start:hover { filter:brightness(1.06); }
/* Rights, stated plainly on the face of the book rather than buried in a
   README nobody reads. Small and quiet, but present on the first screen. */
.cover .cover-rights { font-family:var(--sans); font-size:12.5px; line-height:1.65;
  color:var(--ink-soft); opacity:.85; max-width:38em; margin:44px auto 0;
  padding-top:18px; border-top:1px solid var(--line); }
.cover .cover-rights a { color:var(--accent); }

/* chapter */
.ch-head { text-align:center; margin:20px 0 34px; }
.ch-title { font-size:calc(34px * var(--fs)); font-weight:600; line-height:1.2; margin:0; }
.ch-chapter { font-family:var(--sans); font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
.ch-divider { width:60px; height:2px; background:var(--accent); margin:18px auto 0; border:none; }
/* Inserted by audio.js, only on chapters that actually have narration. Sized
   in px, not calc(... * var(--fs)): it is an instruction, not part of the
   book, so it should not grow when the reader enlarges the text. */
.ch-audio-hint { font-family:var(--sans); font-size:12.5px; line-height:1.6;
  color:var(--ink-soft); opacity:.85; max-width:32em; margin:16px auto 0; }

/* paragraphs */
.ch-body p { font-size:calc(19px * var(--fs)); line-height:1.65; margin:0 0 1.25em; text-align:left; }
.ch-body p:first-of-type::first-letter {
  font-size:3.2em; line-height:.8; padding-right:6px; float:left; color:var(--accent); font-weight:600; }

/* annotations — styled as conspicuous links under the words */
.ann {
  color: var(--annotation-hi);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--annotation-hi);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 4px;
}
.ann:hover, .ann.active {
  background: var(--annotation-bg-overlay);
  text-decoration-thickness: 2.5px;
  color: var(--accent);
}
.ann:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ann::after { content: "↗"; font-size: .62em; vertical-align: super; margin-left: 1px; opacity: .65; }

/* footnotes */
sup.fn { display:inline-block; min-width:1.15em; text-align:center; padding:0 .2em; box-sizing:border-box;
  font-size:.74em; line-height:1.25; font-family:var(--sans); font-weight:700;
  color:var(--paper); background:var(--accent); border-radius:.3em; cursor:pointer;
  vertical-align:super; box-shadow:0 1px 3px rgba(0,0,0,.25); }
sup.fn:hover { background:var(--seen); color:var(--ink); }
mark { background: #ffe082; color:#333; border-radius:3px; padding:0 2px; }

/* toc */
.toc ul { list-style:none; margin:0; padding:0; }
.toc .toc-group { font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-soft); margin:14px 4px 6px; }
.toc li.toc-item a { display:block; padding:4px 8px; font-size:13.5px; color:var(--ink-soft); text-decoration:none; border-radius:6px; line-height:1.3; }
.toc li.toc-item a:hover { color:var(--ink); background:var(--accent-soft); }
.toc li.toc-item a.current { color:var(--accent); font-weight:600; background:var(--accent-soft); }

/* note panel */
.note-panel { min-height:120px; }
.note-card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.note-card .close { position:absolute; top:8px; right:10px; background:none;border:none;color:var(--ink-soft);font-size:16px;cursor:pointer; }
.note-card h3 { margin:0 0 6px; font-size:20px; font-weight:600; }
.note-card img { width:100%; max-height:360px; object-fit:cover; object-position:center 15%; border-radius:10px; margin:10px 0; display:block; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.note-card p { font-size:15px; line-height:1.55; margin:0 0 12px; color:var(--ink); }
.note-card .src { font-family:var(--sans); font-size:10.5px; color:var(--ink-soft); margin:-6px 0 6px; }
.note-card .links { display:flex; flex-direction:column; gap:6px; }
.note-card .links a { font-family:var(--sans); font-size:13px; color:var(--accent); text-decoration:none; }
.note-card .links a:hover { text-decoration:underline; }
.note-card.fn-card h3 { font-size:16px; }

/* footer nav */
.reader-footer { max-width:1200px; margin:0 auto; padding:0 16px 40px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nav-btn { padding:10px 18px; font-family:var(--sans); font-size:14px; font-weight:600;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:30px; cursor:pointer; }
.nav-btn:hover { background:var(--accent-soft); }
.ch-position { font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }

.sh-indicator { position:fixed; bottom:18px; right:18px; padding:8px 14px; background:var(--ink); color:var(--paper); border-radius:20px; font-family:var(--sans); font-size:13px; z-index:70; }

/* responsive */
@media (max-width: 980px) {
  .marginalia { width: 320px; }
}
@media (max-width: 680px) {
  .layout { padding-top:52px; }
  .main { padding:16px 14px 40px; }
  .cover .cover-title { font-size:40px; }
  .ch-title { font-size:26px; }
  .size-ctrl { display:none; }
  .topbar-inner { flex-wrap:wrap; }
  .toc { width:82%; max-width:300px; }
  .marginalia { width:86%; max-width:330px; }
}
@media (max-width: 480px) {
  .main { padding:12px 10px 40px; }
  .ch-body p { font-size:calc(17.5px * var(--fs)); }
  .cover .cover-title { font-size:34px; }
  .cover-photo { width:180px; height:180px; }
  .brand-sub { display:none; }
  #ring-pct { display:none; }
  .ring svg { width:26px; height:26px; }
}

/* ---------- enhancements: centered column, cover, ring, drawer backdrop ---------- */
/* center the reading column (annotations are inline links, so they follow suit) */
.ch-body, .cover { max-width: 46rem; margin-left: auto; margin-right: auto; }
.cover { max-width: 52rem; }

/* cover portrait: Yogananda front and center */
.cover-photo { width: 250px; height: 250px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--accent-soft); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }

.cover-actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cover .start { margin-top: 0; }
.cover .resume { background: var(--paper); color: var(--accent); border: 1px solid var(--accent); }
.cover .reset { background: none; border: none; color: var(--ink-soft); font-family: var(--sans);
  font-size: 13px; cursor: pointer; text-decoration: underline; }

/* reading-progress ring */
.ring { display: flex; align-items: center; gap: 4px; cursor: default; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-bg { fill: none; stroke: var(--line); stroke-width: 3; }
.ring .ring-fg { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ring-pct { font-family: var(--sans); font-size: 10.5px; color: var(--ink-soft); min-width: 30px; text-align: center; }

/* TOC drawer backdrop */
.toc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 75; }

/* give the note panel breathing room on smaller tablets */
@media (max-width: 980px) {
  .note-panel { margin-top: 18px; }
}
/* ---------- beauty pass ---------- */
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body {
  background-image:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(circle at 95% 105%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%);
  background-attachment: fixed;
}
.cover-photo { box-shadow: 0 16px 40px rgba(0,0,0,.22), 0 0 0 10px color-mix(in srgb, var(--accent-soft) 45%, transparent), 0 0 70px color-mix(in srgb, var(--seen) 35%, transparent); }
.cover-title { letter-spacing: .01em; }
.cover-actions .start { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .18s ease, box-shadow .18s ease; }
.cover-actions .start:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 55%, transparent); }
.ch-divider { position: relative; width: 90px; height: 1px; background: var(--line); border: none; margin: 22px auto 0; }
.ch-divider::after { content: "❦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper); color: var(--accent); padding: 0 8px; font-size: 15px; line-height: 1; }
.note-card { border-top: 3px solid var(--accent); box-shadow: 0 14px 38px rgba(0,0,0,.10); }
.note-card img { transition: transform .25s ease, box-shadow .25s ease; }
.note-card img:hover { transform: scale(1.015); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.note-card .close { transition: transform .15s ease; }
.note-card .close:hover { transform: rotate(90deg); }
.toc li.toc-item a.current { box-shadow: inset 3px 0 0 var(--accent); }
.nav-btn, .g-back { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.nav-btn:hover, .g-back:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.fc, .g-card { transition: background .4s ease, color .4s ease, border-color .4s ease; }
.ch-body { animation: chfade .5s ease; }
@keyframes chfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- narration ----------------------------------------------------------
   The player floats above the footer so it stays reachable while reading.
   .para-speaking must only ever change colour/background: the paragraph's
   contents are annotation spans and footnote markers owned by other code. */
.player { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:80;
  display:flex; align-items:center; gap:10px; max-width:min(680px, calc(100vw - 32px));
  padding:8px 14px; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:34px;
  box-shadow:0 6px 24px rgba(0,0,0,0.16); font-family:var(--sans); }
.player.hidden { display:none; }
/* The bar is fixed, so without this the last lines of a chapter sit underneath
   it -- worst on a phone, where the bar is proportionally much taller. Reserve
   the space only while the bar is actually up. */
body.with-player .main { padding-bottom:78px; }
.pl-btn { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  font-size:14px; background:var(--accent); color:var(--paper);
  border:none; border-radius:50%; cursor:pointer; }
.pl-btn:hover { filter:brightness(1.08); }
.pl-small { width:28px; height:28px; font-size:13px;
  background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
.pl-small.on { color:var(--accent); border-color:var(--accent); }
.pl-time { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  min-width:38px; text-align:center; }
.pl-seek { flex:1 1 120px; min-width:80px; accent-color:var(--accent); }
.pl-rate { font-family:var(--sans); font-size:12px; padding:3px 4px; cursor:pointer;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.para-speaking { background:var(--annotation-bg-overlay);
  box-shadow:-10px 0 0 var(--annotation-bg-overlay), 10px 0 0 var(--annotation-bg-overlay);
  border-radius:2px; transition:background 220ms ease; }
@media (max-width: 680px) {
  .player { gap:7px; padding:7px 10px; bottom:10px; }
  .pl-rate, .pl-time { display:none; }
}