:root{
  --bg:#f5f1e8;
  --paper:#fffdf8;
  --ink:#27231d;
  --muted:#766f65;
  --gold:#ad864b;
  --line:#ded5c7;
  --nav:#1e2826;
  --nav2:#263330;
  --accent:#bf9556;
  --shadow:0 18px 60px rgba(45,37,27,.12);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  font-family:Georgia,'Times New Roman',serif;
  background:var(--bg);
  color:var(--ink);
}

button,
input,
textarea,
select{
  font:inherit;
}

.boot{
  padding:10vh;
  text-align:center;
  color:var(--muted);
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:320px 1fr;
}

/* =========================================================
   LEFT NAVIGATION
   ========================================================= */

.side{
  background:linear-gradient(
    180deg,
    var(--nav),
    var(--nav2)
  );

  color:#f4ead9;

  position:sticky;
  top:0;

  height:100vh;

  overflow:auto;

  padding:26px 22px;
}

/* =========================================================
   BRAND
   ========================================================= */

.brand{
  display:flex;
  gap:12px;
  align-items:center;

  margin-bottom:22px;
}

.brand img{
  width:36px;
  height:36px;

  flex-shrink:0;
}

.brand-copy{
  min-width:0;
  flex:1;
}

.brand b{
  font-size:calc(
    14px * var(--nav-scale,1)
  );

  letter-spacing:.08em;
}

.brand small{
  display:block;

  font-size:calc(
    12px * var(--nav-scale,1)
  );

  opacity:.65;

  margin-top:3px;
}

.side-close{
  display:none;

  width:34px;
  height:34px;

  flex-shrink:0;

  padding:0;

  border:1px solid rgba(191,149,86,.42);

  border-radius:999px;

  background:transparent;

  color:#f4ead9;

  font-family:Arial,sans-serif;

  font-size:23px;

  line-height:30px;

  cursor:pointer;
}

.side-close:hover{
  background:rgba(255,255,255,.08);
}

/* =========================================================
   RECORRIDO + LEFT SCALE
   ========================================================= */

.side-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin:24px 0 10px;
}

.side-heading-row h3{
  margin:0;

  font-size:calc(
    11px * var(--nav-scale,1)
  );

  letter-spacing:.14em;

  text-transform:uppercase;

  color:var(--gold);
}

.side-scale-controls{
  display:flex;
  align-items:center;

  gap:2px;

  flex-shrink:0;
}

.side-scale-btn{
  width:27px;
  height:25px;

  padding:0;

  border:1px solid rgba(191,149,86,.38);

  border-radius:999px;

  background:transparent;

  color:var(--gold);

  cursor:pointer;

  font-family:Arial,sans-serif;

  font-size:11px;

  line-height:23px;

  text-align:center;
}

.side-scale-btn:hover{
  background:rgba(255,255,255,.08);

  color:#fff;
}

.side-scale-btn.reset{
  color:#f4ead9;
}

/* =========================================================
   CHAPTERS
   ========================================================= */

.chapter-item{
  margin:0 0 2px;
}

.chapter-link{
  display:block;

  width:100%;

  text-align:left;

  border:0;

  background:transparent;

  color:var(--gold);

  padding:9px 10px;

  border-radius:8px;

  cursor:pointer;

  line-height:1.25;

  font-size:calc(
    16px * var(--nav-scale,1)
  );
}

.chapter-link:hover,
.chapter-link.active{
  background:rgba(255,255,255,.08);

  color:#fff;
}

.chapter-link.locked:after{
  content:'  ·  🔒';

  font-size:10px;

  opacity:.7;
}

/* =========================================================
   CHAPTER SECTIONS
   ========================================================= */

.chapter-sections{
  margin:4px 0 12px 12px;

  padding:3px 0 4px 12px;

  border-left:1px solid rgba(203,185,151,.32);
}

.section-link{
  display:block;

  width:100%;

  margin:0;

  padding:6px 8px;

  border:0;

  border-radius:6px;

  background:transparent;

  color:var(--gold);

  text-align:left;

  font-size:calc(
    13px * var(--nav-scale,1)
  );

  line-height:1.3;

  cursor:pointer;
}

.section-link:hover{
  background:rgba(255,255,255,.06);

  color:#fff;
}

.section-link.active{
  background:rgba(255,255,255,.08);

  color:#fff;
}

.section-link.level-2{
  padding-left:20px;

  font-size:calc(
    12px * var(--nav-scale,1)
  );

  color:var(--gold);
}

.section-link.level-2::before{
  content:"↳ ";

  opacity:.55;
}

.section-link.level-2:hover,
.section-link.level-2.active{
  color:#fff;
}

/* =========================================================
   LEFT ACTIONS
   ========================================================= */

.side-actions{
  display:grid;

  gap:8px;

  margin-top:22px;
}

.btn{
  border:1px solid var(--line);

  border-radius:999px;

  background:transparent;

  padding:10px 16px;

  cursor:pointer;

  color:inherit;
}

.side .btn{
  font-size:calc(
    16px * var(--nav-scale,1)
  );
}

.btn.primary{
  background:var(--accent);

  border-color:var(--accent);

  color:#1e1812;

  font-weight:700;
}

.btn.dark{
  border-color:#8d7a5f;

  color:#f6ead5;
}

/* =========================================================
   MOBILE BACKDROP
   ========================================================= */

.menu-backdrop{
  display:none;

  position:fixed;

  inset:0;

  z-index:18;

  border:0;

  padding:0;

  background:rgba(10,12,11,.48);

  cursor:pointer;
}

.menu-backdrop.open{
  display:block;
}

/* =========================================================
   MAIN
   ========================================================= */

.main{
  min-width:0;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  position:sticky;

  top:0;

  z-index:5;

  background:rgba(245,241,232,.92);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--line);

  display:flex;

  justify-content:space-between;

  gap:12px;

  align-items:center;

  padding:12px 26px;
}

.topbar .status{
  font-size:13px;

  color:var(--muted);

  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.mobile-menu{
  display:none;
}

.searchbox{
  width:min(320px,45vw);

  border:1px solid var(--line);

  border-radius:999px;

  padding:9px 14px;

  background:#fff;
}

/* =========================================================
   READER
   ========================================================= */

.reader{
  max-width:900px;

  margin:0 auto;

  padding:58px 72px 100px;
}

.reader-tools{
  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:4px;

  margin:-30px 0 24px;
}

.reader-tools-label{
  margin-right:4px;

  color:var(--muted);

  font-family:Arial,sans-serif;

  font-size:10px;

  letter-spacing:.06em;

  text-transform:uppercase;
}

.reader-scale-btn{
  min-width:31px;

  height:29px;

  padding:0 7px;

  border:1px solid var(--line);

  border-radius:999px;

  background:#fffaf2;

  color:var(--ink);

  cursor:pointer;

  font-family:Arial,sans-serif;

  font-size:12px;
}

.reader-scale-btn:hover{
  background:#eee5d7;
}

.reader-scale-btn.reset{
  color:var(--gold);

  font-weight:700;
}

/* =========================================================
   READER TYPOGRAPHY
   ========================================================= */

.eyebrow{
  text-transform:uppercase;

  letter-spacing:.16em;

  color:var(--gold);

  font-size:calc(
    12px * var(--reader-scale,1)
  );

  font-weight:700;
}

.reader h1{
  font-size:calc(
    44px * var(--reader-scale,1)
  );

  line-height:1.08;

  margin:12px 0 30px;

  font-weight:500;
}

.block{
  font-size:calc(
    19px * var(--reader-scale,1)
  );

  line-height:1.72;

  margin:0 0 18px;

  scroll-margin-top:86px;
}

.block.heading{
  font-size:calc(
    30px * var(--reader-scale,1)
  );

  line-height:1.2;

  margin:46px 0 20px;
}

.block.subheading{
  font-size:calc(
    22px * var(--reader-scale,1)
  );

  line-height:1.3;

  margin:36px 0 16px;
}

.block.title{
  font-size:calc(
    24px * var(--reader-scale,1)
  );

  font-weight:700;
}

.block.discovery{
  border-left:3px solid var(--gold);

  padding:18px 24px;

  background:#fbf6eb;
}

/* =========================================================
   PAYWALL
   ========================================================= */

.paywall{
  margin:44px 0;

  border:1px solid #d5c3a7;

  background:#fffaf0;

  border-radius:16px;

  padding:30px;

  text-align:center;

  box-shadow:var(--shadow);
}

.paywall h2{
  font-size:28px;

  margin:0 0 12px;
}

.paywall p{
  color:var(--muted);

  line-height:1.55;
}

.purchase-note{
  font-family:Arial,sans-serif;

  font-size:12px;

  color:var(--muted);
}

/* =========================================================
   COVER
   ========================================================= */

.cover{
  max-width:270px;

  width:100%;

  box-shadow:var(--shadow);

  border-radius:4px;

  margin:0 auto 24px;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-back{
  position:fixed;

  inset:0;

  background:rgba(10,12,11,.68);

  z-index:30;

  display:grid;

  place-items:center;

  padding:20px;
}

.modal{
  width:min(520px,100%);

  max-height:90vh;

  overflow:auto;

  background:var(--paper);

  border-radius:18px;

  padding:28px;

  box-shadow:0 25px 100px rgba(0,0,0,.4);
}

.modal h2{
  margin-top:0;
}

.modal label{
  display:block;

  font-size:13px;

  color:var(--muted);

  margin:14px 0 6px;
}

.modal input,
.modal textarea,
.modal select{
  width:100%;

  border:1px solid var(--line);

  border-radius:10px;

  padding:12px;

  background:white;

  color:#222;
}

.modal textarea{
  min-height:140px;

  resize:vertical;
}

.modal-actions{
  display:flex;

  gap:10px;

  justify-content:flex-end;

  margin-top:20px;

  flex-wrap:wrap;
}

.notice{
  font-size:13px;

  color:var(--muted);

  line-height:1.45;

  margin-top:12px;
}

.error{
  color:#a3342e;
}

.success{
  color:#316a49;
}

/* =========================================================
   SEARCH
   ========================================================= */

.search-results{
  border-top:1px solid var(--line);

  margin-top:28px;

  padding-top:18px;
}

.search-hit{
  padding:14px 0;

  border-bottom:1px solid var(--line);

  cursor:pointer;
}

.search-hit b{
  display:block;

  margin-bottom:4px;
}

.search-hit span{
  color:var(--muted);

  font-size:14px;
}

/* =========================================================
   COMPACT / TABLET / MOBILE
   ========================================================= */

@media(max-width:1100px){

  .shell{
    grid-template-columns:1fr;
  }

  .side{
    display:none;

    position:fixed;

    z-index:20;

    left:0;

    top:0;

    width:min(360px,90vw);

    height:100vh;

    box-shadow:18px 0 50px rgba(0,0,0,.30);
  }

  .side.open{
    display:block;
  }

  .side-close{
    display:inline-block;
  }

  .mobile-menu{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
  }

  .topbar{
    padding:10px 14px;
  }

  .searchbox{
    width:min(360px,50vw);
  }

  .reader{
    max-width:900px;

    padding:42px 40px 90px;
  }

  .reader-tools{
    margin:-14px 0 22px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .topbar{
    gap:8px;
  }

  .searchbox{
    display:none;
  }

  .reader{
    padding:34px 24px 80px;
  }

  .reader h1{
    font-size:calc(
      34px * var(--reader-scale,1)
    );
  }

  .reader-tools{
    justify-content:flex-start;

    margin:-8px 0 20px;
  }

  .topbar .status{
    font-size:11px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .side{
    width:92vw;

    padding:22px 18px;
  }

  .reader{
    padding-left:18px;

    padding-right:18px;
  }

  .side-heading-row{
    align-items:flex-start;
  }

  .side-scale-controls{
    margin-top:-2px;
  }

  .reader-tools{
    flex-wrap:wrap;
  }
}.purchase-dock{
  position:fixed;
  left:320px;
  right:0;
  bottom:0;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 22px;
  background:rgba(30,40,38,.97);
  border-top:1px solid rgba(191,149,86,.5);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
  color:#f4ead9;
}

.purchase-dock-note{
  font-size:13px;
  color:#d7c7aa;
  white-space:nowrap;
}

.purchase-dock-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.purchase-dock .btn{
  white-space:nowrap;
}

body:not(.full-access) .reader{
  padding-bottom:150px;
}

@media(max-width:850px){
  .purchase-dock{
    left:0;
    padding:10px 12px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .purchase-dock-note{
    text-align:center;
  }

  .purchase-dock-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }

  .purchase-dock .btn{
    width:100%;
  }

  body:not(.full-access) .reader{
    padding-bottom:260px;
  }
}