/* ============================================================================
   The free-sample reader — a book, not a web page.
   Cover, contents, pages that turn. Built 17 Oct 2026.

   A paper page is a fixed size. A screen page is not, so the pages here are cut
   at load time to fit whatever screen is reading them — see reader.js.
   ========================================================================= */

.reader-stage{
  --page-w:520px; --page-h:720px;
  min-height:100vh;background:
    radial-gradient(1200px 600px at 50% -10%,rgba(37,99,235,.20),transparent 60%),
    var(--bg);
  padding:18px 0 34px;display:flex;flex-direction:column;align-items:center}

.reader-top{width:100%;max-width:1120px;padding:0 18px 14px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.reader-top .back{color:var(--ink-2);font-size:.9rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.reader-top .back:hover{color:var(--honey)}
.reader-title{font-family:var(--f-head,'Sora',sans-serif);color:#fff;font-size:1rem;
  font-weight:600;margin:0 auto 0 0}

#book{margin:0 auto;touch-action:pan-y}
#book.--loading{opacity:0}

/* Every page is paper. The slight warmth stops it looking like a screen. */
.pg{background:#FBF8F1;color:#1A1A1A;overflow:hidden;
  box-shadow:inset 0 0 36px rgba(120,90,40,.07)}
.pg-inner{height:100%;padding:46px 44px 40px;display:flex;flex-direction:column;
  font-family:'Inter',system-ui,sans-serif;font-size:16.5px;line-height:1.72}
.pg-body{flex:1;overflow:hidden}
.pg-body > :first-child{margin-top:0}
.pg p{margin:0 0 .95em}
.pg h2{font-family:var(--f-head,'Sora',sans-serif);font-size:1.12rem;line-height:1.35;
  margin:1.5em 0 .5em;color:#13203F}
.pg h3{font-family:var(--f-head,'Sora',sans-serif);font-size:1rem;margin:1.3em 0 .4em;
  color:#8A6508}
.pg strong{font-weight:600;color:#000}
.pg ul,.pg ol{margin:0 0 1em;padding-left:1.25em}
.pg li{margin-bottom:.4em}
.pg hr{border:none;border-top:1px solid rgba(0,0,0,.14);margin:1.4em 0}
.pg table{border-collapse:collapse;width:100%;font-size:.88rem}
.pg th,.pg td{border:1px solid rgba(0,0,0,.18);padding:6px 9px;text-align:left}
.pg th{background:rgba(0,0,0,.05);font-weight:600}

.pg-foot{padding-top:12px;margin-top:10px;border-top:1px solid rgba(0,0,0,.10);
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.74rem;color:#8A8578;letter-spacing:.04em}
.pg-foot .bk{text-transform:uppercase;letter-spacing:.1em}

/* The cover: the real book, opened. */
.pg-cover .pg-inner{padding:0;align-items:center;justify-content:center;
  background:#0C1736}
.pg-cover img{width:100%;height:100%;object-fit:contain;display:block}
.pg-cover .plain{text-align:center;padding:40px 34px;color:#EAF0F8}
.pg-cover .plain .eyebrow{display:block;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--honey,#E0A82E);margin-bottom:18px}
.pg-cover .plain h1{font-family:var(--f-head,'Sora',sans-serif);font-size:1.9rem;
  line-height:1.2;margin:0 0 14px}
.pg-cover .plain p{color:#AEB9CC;font-size:.95rem;margin:0}

/* The contents page. Every chapter is listed — the locked ones are the point. */
.pg-contents .pg-inner{padding:40px 36px 30px}
.pg-contents h2{margin:0 0 4px;font-size:1.3rem;color:#13203F}
.pg-contents .sub{font-size:.84rem;color:#6E6A5E;margin:0 0 18px}
.toc{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.45}
.toc li{display:flex;gap:10px;align-items:baseline;padding:5px 0;
  border-bottom:1px dotted rgba(0,0,0,.14)}
.toc .n{color:#8A8578;font-size:.78rem;min-width:22px}
.toc .t{flex:1}
.toc button.t{font:inherit;text-align:left;background:none;border:none;padding:0}
.toc .free{color:#8A6508;font-weight:600;cursor:pointer}
.toc .free:hover{text-decoration:underline}
.toc .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 7px;border-radius:99px;white-space:nowrap}
.toc .tag-free{background:#8A6508;color:#fff}
.toc .tag-locked{background:rgba(0,0,0,.08);color:#8A8578}

/* The email ask, as a page of the book. */
.pg-gate .pg-inner{justify-content:center;text-align:center;padding:40px 34px}
.pg-gate h2{margin:0 0 10px}
.pg-gate p{color:#4A4639;font-size:.95rem}
.pg-gate .ml{margin-top:18px}
.pg-gate input[type=email]{width:100%;max-width:280px;padding:11px 13px;border-radius:9px;
  border:1px solid rgba(0,0,0,.25);background:#fff;font:inherit;font-size:.95rem;color:#1A1A1A}
.pg-gate button{margin-top:10px;width:100%;max-width:280px;padding:11px 16px;border:none;
  border-radius:9px;background:#8A6508;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.pg-gate .fine{font-size:.76rem;color:#8A8578;margin-top:14px}

/* The controls under the book. */
.reader-bar{display:flex;align-items:center;gap:16px;margin-top:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 10px}
.reader-bar button{background:none;border:none;color:var(--ink);cursor:pointer;
  width:38px;height:38px;border-radius:50%;font-size:1.1rem;line-height:1}
.reader-bar button:hover:not(:disabled){background:var(--panel-2)}
.reader-bar button:disabled{opacity:.3;cursor:default}
.reader-where{font-size:.84rem;color:var(--ink-2);min-width:120px;text-align:center}
.reader-progress{height:3px;width:100%;max-width:1120px;background:var(--line);
  border-radius:99px;margin-top:14px;overflow:hidden}
.reader-progress i{display:block;height:100%;width:0;background:var(--honey);
  transition:width .25s ease}

.reader-hint{color:var(--ink-3);font-size:.82rem;margin-top:12px;text-align:center}

@media (max-width:760px){
  .reader-stage{padding:10px 0 24px}
  .pg-inner{padding:30px 24px 24px;font-size:16px;line-height:1.68}
  .pg-contents .pg-inner{padding:28px 22px 20px}
  .reader-bar{gap:8px}
  .reader-where{min-width:92px;font-size:.78rem}
}

/* The one-time line telling a reader a confirmation email is waiting. MailerLite only adds
   someone to the list once they click it, and the chapter opens either way - so without this
   they would read on and never receive a note. Dismissible, and remembered once dismissed. */
.reader-confirm{width:100%;max-width:1120px;margin:0 auto 12px;padding:11px 16px;
  display:flex;align-items:center;gap:12px;
  background:rgba(224,168,46,.14);border:1px solid rgba(224,168,46,.45);border-radius:12px;
  color:var(--ink);font-size:.9rem;line-height:1.5}
.reader-confirm b{color:var(--honey)}
.reader-confirm button{margin-left:auto;background:none;border:none;color:var(--ink-2);
  font-size:1.2rem;line-height:1;cursor:pointer;padding:0 4px}
.reader-confirm button:hover{color:var(--ink)}