/* The reader. Shares the design system in site.css. */
body.reader { --fs: 1; background: radial-gradient(1200px 600px at 50% -10%, rgba(5, 61, 58, .35), transparent 70%), var(--bg); min-height: 100svh; }
body.reader .glow { display: none; }

.rbar { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 clamp(12px, 2.4vw, 26px); background: rgba(6, 8, 7, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.rbar-l, .rbar-r { display: flex; align-items: center; gap: 10px; }
.rbar-r { justify-content: flex-end; }
.rbar-c { font: 12px/1 var(--mono); letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; text-align: center; }
.rbar-c [data-crumb-book] { color: var(--sand); }
.rbar-c .sep { margin: 0 10px; color: var(--faint); }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; color: var(--text); transition: border-color .3s, background .3s; }
.chip:hover { border-color: rgba(255, 226, 184, .35); background: rgba(255, 255, 255, .03); }
.burger { position: relative; width: 14px; height: 10px; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger i:first-child { top: 1px; } .burger i:last-child { top: 7px; }
.toc-open .burger i:first-child { top: 4px; transform: rotate(45deg); } .toc-open .burger i:last-child { top: 4px; transform: rotate(-45deg); }
.size { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.size button { padding: 8px 12px; font: 12.5px var(--mono); color: var(--muted); transition: color .3s, background .3s; }
.size button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.size button + button { border-left: 1px solid var(--line); }
.access-badge { font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px; color: #0d1a14; background: var(--mint); }

/* contents */
.toc { position: fixed; z-index: 45; top: 64px; bottom: 0; left: 0; width: min(360px, 88vw); display: grid; grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #0b1311, #070a09); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .55s var(--ease); }
.toc-open .toc { transform: none; }
.toc-scrim { position: fixed; z-index: 44; inset: 64px 0 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .45s; }
.toc-open .toc-scrim { opacity: 1; pointer-events: auto; }
.toc-head { padding: 16px; border-bottom: 1px solid var(--line); }
.toc-head input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; font-size: 14px; }
.toc-head input:focus { outline: none; border-color: rgba(183, 247, 212, .45); }
.toc-body { overflow-y: auto; padding: 8px 0 30px; overscroll-behavior: contain; }
.toc-group { font: 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding: 22px 20px 10px; }
.toc-book > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; text-align: left; font-size: 15px; color: #d4cec4; transition: color .25s, background .25s; }
.toc-book > button:hover { background: rgba(255, 255, 255, .03); color: var(--text); }
.toc-book > button::after { content: ""; width: 7px; height: 7px; border-right: 1.3px solid var(--faint); border-bottom: 1.3px solid var(--faint); rotate: -45deg; transition: rotate .35s var(--ease); }
.toc-book.open > button::after { rotate: 45deg; }
.toc-book.current > button { color: var(--sand); }
.toc-secs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.toc-book.open .toc-secs { grid-template-rows: 1fr; }
.toc-secs > ol { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 20px; }
.toc-secs a { display: flex; gap: 10px; align-items: baseline; padding: 7px 18px 7px 14px; border-left: 1px solid var(--line); font-size: 13.5px; color: var(--muted); transition: color .25s, border-color .25s; }
.toc-secs a:hover { color: var(--text); }
.toc-secs a.here { color: var(--mint); border-left-color: var(--mint); }
.toc-secs a .lk { margin-left: auto; flex: none; width: 9px; height: 10px; border-radius: 2px; background: var(--faint); position: relative; top: 1px; opacity: .7; }
.toc-secs a .lk::before { content: ""; position: absolute; left: 1.5px; top: -4px; width: 6px; height: 5px; border: 1.3px solid var(--faint); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.toc-foot { display: flex; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--line); }

/* page */
.rmain { padding: 112px clamp(16px, 5vw, 40px) 120px; }
.rpage { max-width: 720px; margin: 0 auto; font-size: calc(16px * var(--fs)); }
.rpage .prose-s p, .rpage .prose-s .lines, .rpage .prose-s .stanza { font-size: calc(17.5px * var(--fs)); }
.rpage .prose-c p, .rpage .prose-c li, .rpage .prose-plain p, .rpage .prose-plain li { font-size: calc(16.5px * var(--fs)); }
.rpage.enter > * { animation: pageIn .8s var(--ease) both; }
.rpage.enter > *:nth-child(2) { animation-delay: .05s; } .rpage.enter > *:nth-child(3) { animation-delay: .1s; } .rpage.enter > *:nth-child(n+4) { animation-delay: .15s; }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
.r-kicker { display: flex; align-items: center; gap: 12px; font: 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.r-kicker b { font-weight: 500; color: var(--sand); }
.r-kicker .free { padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mint); letter-spacing: .1em; }
.r-title { font-family: var(--display); font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 34px; }
.r-rule { height: 1px; background: linear-gradient(90deg, var(--sand), var(--mint) 40%, transparent); margin: 0 0 10px; transform-origin: 0 50%; animation: draw 1.2s var(--ease) both .15s; }
@keyframes draw { from { transform: scaleX(0); } }
.prose-plain p, .prose-plain li { font-size: 16.5px; line-height: 1.8; color: #ddd7cd; margin: 0 0 16px; }
.prose-plain h2, .prose-plain h3, .prose-plain h4 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 36px 0 14px; color: var(--sand); }
.prose-plain h3, .prose-plain h4 { font-size: 23px; margin: 28px 0 10px; color: #e8e2d8; }
.prose-plain hr + h2 { margin-top: 0; }
.prose-plain blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 1px solid var(--line); color: #cfc8bd; font-style: italic; }
.prose-plain hr, .rpage hr { border: 0; height: 1px; background: var(--line); margin: 34px 0; }
.rpage ul, .rpage ol { padding-left: 20px; }
.rpage .table { overflow-x: auto; margin: 0 0 18px; }
.rpage table { border-collapse: collapse; font-size: 13.5px; }
.rpage th, .rpage td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rpage .prose-c h2, .rpage .prose-c h3 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 26px 0 10px; color: var(--ghost); }

/* locked: the scripture shows whole, then this panel stands where the commentary would begin */
.unlock { position: relative; margin-top: -60px; text-align: center; padding: 42px 30px; border-radius: 26px; border: 1px solid var(--line); background: rgba(10, 16, 15, .75); backdrop-filter: blur(12px); overflow: hidden; isolation: isolate; }
.unlock::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--angle, 0deg), transparent 0 70%, var(--mint) 80%, var(--sand) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.unlock h3 { font-family: var(--display); font-size: clamp(30px, 4vw, 42px); line-height: 1.05; margin: 18px 0 12px; }
.unlock p { color: #b9b3a9; max-width: 460px; margin: 0 auto 24px; }
.unlock .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.unlock.compact { margin-top: 56px; padding: 32px 26px 26px; }
.unlock.compact h3 { font-size: clamp(24px, 3vw, 30px); margin: 10px 0 10px; }
.unlock.compact p { margin-bottom: 20px; }
.unlock.compact .row + .row, .unlock.compact form + .row { margin-top: 4px; }
.unlock-fine { font-size: 12.5px !important; color: var(--faint, #8a857d) !important; margin: 14px auto 0 !important; }
.unlock-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.unlock-kicker { font: 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 16px auto 0 !important; }

/* prev / next */
.rnav { max-width: 720px; margin: 70px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rnav-a { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); transition: border-color .3s, transform .45s var(--ease), background .3s; cursor: pointer; }
.rnav-a:hover { border-color: rgba(255, 226, 184, .35); background: rgba(255, 255, 255, .02); }
.rnav-a.prev:hover { transform: translateX(-3px); } .rnav-a.next:hover { transform: translateX(3px); }
.rnav-a small { font: 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rnav-a span { font-family: var(--display); font-size: 20px; line-height: 1.15; }
.rnav-a.next { text-align: right; grid-column: 2; }

.rskel { display: grid; gap: 14px; padding-top: 20px; }
.rskel i { height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .08), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.rskel i:first-child { height: 48px; width: 70%; margin-bottom: 18px; } .rskel i:nth-child(3) { width: 92%; } .rskel i:nth-child(5) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* a faint watermark carries the reader's email on paid pages */
.watermark { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .028; background-repeat: repeat; }

/* the edition is not printed from the browser */
.print-block { display: none; }
@media print {
  body.reader > *:not(.print-block) { display: none !important; }
  .print-block { display: block; padding: 40px; font: 16px sans-serif; color: #000; }
}

@media (max-width: 720px) {
  .rbar { grid-template-columns: auto 1fr auto; }
  .rbar-c { max-width: 38vw; font-size: 11px; }
  .rbar-c .sep, .rbar-c [data-crumb-sec] { display: none; }
  .size { display: none; }
  .chip { padding: 9px 11px; font-size: 13px; }
  .rnav { grid-template-columns: 1fr; }
  .rnav-a.next { grid-column: auto; }
}