:root{--reader-scale:1;--ease:cubic-bezier(.19,1,.22,1);--mono:'IBM Plex Mono',ui-monospace,monospace;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* text-size-adjust: without it iOS Safari inflates body copy on rotation, so
   the reader silently changes size when the phone turns. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:120px;overflow-x:clip;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* iOS keeps :hover applied to the last-tapped element until you tap elsewhere,
   so every lift/underline below would stick after a tap. Gate them on a real
   pointer and give touch its own :active feedback instead. */
@media (hover:none){
  a:hover,button:hover{background-color:inherit;}
}
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;}
body{background:var(--bg);color:var(--ink);font-family:'Literata',Georgia,serif;
  line-height:1.78;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .3s ease,color .3s ease;}
/* Token contract. Three tokens exist because one value cannot serve two jobs:
     --muted       secondary PROSE, so it must clear AA 4.5:1 on --bg (it was
                   3.57/3.58/3.34/2.96 — failing on all four themes, and on
                   black failing even the 3:1 large-text floor).
     --vn          verse/section numbers. These sit inline in the body at .8em,
                   so they are body text, not decoration; --gold was 2.15:1 on
                   light and 3.00:1 on sepia, i.e. the least legible thing on a
                   page whose flagship texts are numbered. --gold now only ever
                   paints 1px rules and ornaments, never glyphs you must read.
     --rule-strong borders that BOUND A CONTROL (WCAG 1.4.11 wants 3:1). Plain
                   --rule is ~1.2:1 and stays the divider colour.
   --brand-ink is the ink used ON a brand-filled button: white clears 6.17:1 on
   the light-theme green but only 4.36:1 on the dark-theme green, so the dark
   themes take a brighter green with dark ink instead. */
[data-theme="light"]{--bg:#F9F8F5;--ink:#333333;--head:#2C2620;--muted:#6E675C;--accent:#7A6118;--gold:#C9A84C;--vn:#8A6D1E;--note-bg:#FBF7EA;--note-ink:#4A4438;--rule:#E7E3D8;--rule-strong:#8F8878;--chrome:#FDFCF9;--brand:#0E6E5C;--brand-2:#0A5546;--brand-ink:#FFFFFF;}
[data-theme="sepia"]{--bg:#F4ECD8;--ink:#5B4636;--head:#43331F;--muted:#6B5C43;--accent:#8A6914;--gold:#A6841E;--vn:#6F5610;--note-bg:#EFE3C6;--note-ink:#5B4636;--rule:#DCCFAF;--rule-strong:#8C7D5E;--chrome:#F7F0DE;--brand:#0E6E5C;--brand-2:#0A5546;--brand-ink:#FFFFFF;}
[data-theme="dark"]{--bg:#0A0E1A;--ink:#DCD3BA;--head:#F2EBD6;--muted:#958C74;--accent:#C9A84C;--gold:#D4BA6A;--vn:#8A7F66;--note-bg:#11172A;--note-ink:#C4BAA0;--rule:#1E2540;--rule-strong:#6E6752;--chrome:#0C111F;--brand:#2A8F78;--brand-2:#35A88D;--brand-ink:#04140F;}
[data-theme="black"]{--bg:#0F0F0F;--ink:#CFCFCF;--head:#E8E8E8;--muted:#8A8A8A;--accent:#A99A66;--gold:#B9A972;--vn:#7A7A7A;--note-bg:#161616;--note-ink:#B4B4B4;--rule:#242424;--rule-strong:#666666;--chrome:#0B0B0B;--brand:#2A8F78;--brand-2:#35A88D;--brand-ink:#04140F;}

/* Solid gold behind --chrome computed to 2.2:1 — selecting a passage to quote
   it, the most common gesture here, made it unreadable. A gold tint of the
   paper stays visibly a highlight while the ink keeps full body contrast.
   (--note-bg alone is too near --bg to read as a selection at all.) */
::selection{background:rgba(201,168,76,.34);color:var(--ink);}
::selection{background:color-mix(in srgb,var(--gold) 34%,var(--bg));color:var(--ink);}
/* On the dark themes --ink against that tint is 2.8:1; --head clears AA. */
[data-theme="dark"] ::selection,[data-theme="black"] ::selection{color:var(--head);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
a{color:var(--accent);text-decoration:none;}
.wrap{max-width:680px;margin:0 auto;padding:0 24px;}

/* Reading progress */
#rprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--gold);
  transform-origin:0 50%;transform:scaleX(0);}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:var(--chrome);
  border-bottom:1px solid var(--rule);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;}
.wordmark{font-family:'Fraunces',serif;font-weight:600;font-size:19px;
  letter-spacing:-.01em;color:var(--head);display:flex;align-items:center;gap:8px;}
.wordmark i{font-style:normal;color:var(--brand);font-size:11px;transform:translateY(-1px);}
.hdr-nav{display:flex;align-items:center;gap:6px;}
.hdr-lib,.hdr-toc{font:600 13px/1 'Inter',sans-serif;color:var(--ink);
  padding:14px 10px;border-radius:8px;white-space:nowrap;}
.hdr-toc{color:var(--muted);}
/* Contents duplicates the crumb in the controls bar directly below, so on a
   phone it yields and the Library link — the only route out of 22k SEO landing
   pages — stays. */
@media (max-width:430px){.hdr-toc{display:none;}}
@media (hover:hover){.hdr-lib:hover{color:var(--accent);}}
/* --brand-ink, not #fff: white clears 6.17:1 on the light green but only
   4.36:1 on the dark-theme green. Padding raised 11->14px for a 44px target. */
.get-app{font:600 13px/1 'Inter',sans-serif;
  color:var(--brand-ink);background:var(--brand);border-radius:10px;padding:14px 16px;
  transition:background .25s;}
@media (hover:hover){.get-app:hover{background:var(--brand-2);}}
.get-app:active{background:var(--brand-2);}

/* Hero / book landing */
.hero{max-width:780px;margin:0 auto;padding:54px 24px 10px;display:flex;gap:42px;align-items:flex-start;}
.hero-cover img{width:172px;height:auto;border:1px solid var(--rule);border-radius:3px;display:block;}
.hero-meta{flex:1;min-width:0;}
.free-line{font:600 11px/1.5 'Inter',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin:0 0 14px;}
.book-title{font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:440;
  font-size:clamp(38px,6vw,54px);line-height:1.0;margin:0 0 14px;color:var(--head);letter-spacing:-.02em;}
.byline .seg,.readmeta .seg,.free-line .seg{white-space:nowrap;}
.byline{font:400 10.5px/1.6 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;}
.description{font-size:16.5px;line-height:1.75;color:var(--ink);margin:0 0 20px;}
.readmeta{font:400 10.5px/1.6 var(--mono);color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 26px;}
.begin-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.btn-begin{display:inline-block;font:600 14.5px/1 'Inter',sans-serif;
  color:var(--brand-ink);background:var(--brand);border-radius:10px;padding:16px 26px;
  transition:background .25s;}
.btn-begin:hover{background:var(--brand-2);}
.restart{font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;border-bottom:1px solid var(--rule);
  display:inline-block;padding:8px 0 6px;}
/* The class sets display, which outranks the UA rule for [hidden] — so the
   markup's `hidden` did nothing and "Start from the beginning" showed on every
   book page, including to a reader who has never opened the book. */
.restart[hidden]{display:none;}
.restart:hover{color:var(--accent);}
/* Same quiet register as .restart, but a real button (no href to open in a new
   tab, no crawlable dead-end). inline-flex + min-height carries a 44px tap
   target under a rule that still sits on the text baseline. */
.share-link{font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--rule);
  display:inline-flex;align-items:flex-end;min-height:44px;padding:8px 0 6px;cursor:pointer;
  transition:color .25s,border-color .25s;}
.share-link:hover{color:var(--accent);}
/* The receipt lives inside the button, and mono makes ch exact — six characters
   of "Copied" are reserved without measuring anything, so the label can change
   without the controls bar gaining a row and stepping the article down. Inert on
   the longer labels, which are already past 6ch. */
.js-share .lbl{display:inline-block;min-width:6ch;text-align:center;}
/* Both share buttons outside the controls bar sit alone on their own line, in
   the same register as the contents rules around them. */
.toc-foot,.ch-send{max-width:680px;margin:0 auto;padding:2px 24px 0;}
.ch-send{margin-top:26px;}
.free-note{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--muted);margin:16px 0 0;}

/* Contents — register table */
.toc{max-width:680px;margin:40px auto 8px;padding:0 24px;}
.toc-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--gold);padding-bottom:9px;margin-bottom:2px;}
.toc-cap{font:600 9.5px/1 var(--mono);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);}
.toc-meta{font:400 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.trow{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);
  padding:11px 2px;transition:background .2s;}
.trow:hover{background:var(--note-bg);}
.tno{font:500 10px/1 var(--mono);color:var(--accent);letter-spacing:.06em;min-width:26px;}
.tt{flex:1;overflow-wrap:anywhere;font-family:'Fraunces',serif;font-weight:420;font-size:15.5px;
  color:var(--head);line-height:1.4;}
.trow:hover .tt{color:var(--accent);}
.tmin{font:400 9px/1 var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.trow.locked .tt{color:var(--muted);}
/* Grouped contents (books over 60 chapters). content-visibility keeps the
   1,189 collapsed rows out of first layout instead of merely out of sight. */
.tgroup{border-bottom:1px solid var(--rule);}
.tgroup .trow{border-bottom:none;padding-left:14px;}
.tgroup[open]{padding-bottom:8px;}
.tgroup:not([open]) .trow{content-visibility:hidden;}
.tsum{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 2px;cursor:pointer;list-style:none;min-height:44px;}
.tsum::-webkit-details-marker{display:none;}
.tsum-t{flex:1;min-width:0;font-family:'Fraunces',serif;font-weight:450;font-size:16px;
  color:var(--head);}
.tgroup[open] .tsum-t{color:var(--accent);}
.tsum-n{margin-left:auto;text-align:right;font:400 9.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.tsum::after{content:"›";margin-left:2px;color:var(--accent);font-size:16px;
  transition:transform .2s var(--ease);}
.tgroup[open] .tsum::after{transform:rotate(90deg);}
.trow.locked .tmin{color:var(--accent);}

/* Controls bar (chapter pages) */
.controls{position:sticky;top:60px;z-index:20;background:var(--chrome);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.controls .wrap{display:flex;align-items:center;gap:16px;min-height:50px;flex-wrap:wrap;
  padding-top:6px;padding-bottom:6px;}
.ctl-crumb{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;
  display:inline-block;padding:14px 0;}
.ctl-crumb:hover{color:var(--accent);}
.ctl-group{display:flex;align-items:center;gap:8px;}
.ctl-group.swatches{gap:0;}
.ctl-group.swatches .ctl-label{margin-right:8px;}
.ctl-label{font:600 9px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);}
/* The swatch was a 19px button — below the WCAG 2.5.8 24px floor and far below
   Apple's 44px. Keep the 19px disc as the visual (four big circles would look
   like buttons, not paper samples) and carry it on a 44px transparent target
   drawn with ::before, so the ring stays small and the tap area is legal. */
.swatch{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;position:relative;}
.swatch::before{content:"";width:19px;height:19px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--sw);}
.swatch::before{width:26px;height:26px;}
.swatch[aria-pressed="true"]::before{outline:2px solid var(--accent);outline-offset:2.5px;}
.swatch:active::before{transform:scale(.9);}
.sw-light{--sw:#F9F8F5;}.sw-sepia{--sw:#F4ECD8;}.sw-dark{--sw:#0A0E1A;}.sw-black{--sw:#0F0F0F;}
.ctl-btn{font:500 11px/1 var(--mono);color:var(--ink);background:none;
  border:1px solid var(--rule-strong);border-radius:2px;padding:7px 10px;cursor:pointer;
  min-height:44px;min-width:44px;transition:border-color .25s,color .25s;}
@media (hover:hover){.ctl-btn:hover{border-color:var(--gold);}}
.ctl-btn:active{border-color:var(--gold);color:var(--accent);}
.ctl-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--gold);}
.ctl-pos{margin-left:auto;font:400 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted);}

/* Reader */
.reader{max-width:680px;margin:0 auto;padding:46px 24px 8px;
  font-size:calc(19px * var(--reader-scale));}
.chapter{scroll-margin-top:130px;}
.ch-kick{font:500 9px/1.6 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 10px;}
.chapter-title{overflow-wrap:anywhere;font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:450;
  font-size:calc(31px * var(--reader-scale));color:var(--head);text-align:center;
  margin:0 0 30px;letter-spacing:-.012em;line-height:1.15;}
.ch-orn{display:block;width:40px;height:1px;background:var(--gold);opacity:.55;margin:0 auto 22px;}
/* text-wrap:pretty keeps single-word widows off the last line of a paragraph;
   hyphenation matters at this measure, where one long word otherwise opens a
   river down a 34-character column. */
/* overflow-wrap:anywhere, not break-word: only `anywhere` affects min-content
   sizing, and that is what stops a 95-character Sanskrit compound (or a 48-digit
   number, or an ASCII table rule) from making the whole document 2.6x the
   viewport and scrolling the page sideways. 116 books contain such a token. */
.para{margin:0 0 1.3em;hyphens:auto;-webkit-hyphens:auto;
  overflow-wrap:anywhere;hanging-punctuation:first;
  /* 10 4 4. The word-length floor is 10, not 8, because the engine counts
     ADJACENT PUNCTUATION as part of the token: “Whoever is 8 characters with
     “Who as the 4 before, so an 8-floor happily broke it as “Who-/ever on the
     opening line of Thomas. At a 38-character measure only genuinely long words
     earn a hyphen anyway. text-wrap:pretty is deliberately NOT set here —
     Chrome's pretty pass re-breaks the paragraph and overrides these limits. */
  hyphenate-limit-chars:10 4 4;-webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:2;}
/* Verse numbers hang: the number sits in the margin and turned lines return to
   a single common left edge, instead of the number shunting the first line and
   breaking the column edge on every verse. */
/* Hanging verse numbers, done with absolute positioning rather than the usual
   text-indent/negative-indent trick. The indent version depends on how an
   inline-block first child interacts with a negative text-indent, and that
   differs between engines — it rendered correctly in one browser and painted
   the number off the left edge in another. Positioning the number out of flow
   is deterministic: the paragraph reserves the gutter, the number sits in it,
   and the first line and the turned lines share one left edge by construction. */
.chapter.versed .para{padding-left:2.2em;}
.chapter.versed .cbar{margin-left:2.2em;}
.para:has(> .vn:first-child){position:relative;padding-left:2.2em;}
.vn{position:absolute;left:0;top:0;min-width:2em;padding-right:.4em;color:var(--vn);font-weight:500;
  font-size:.8em;line-height:inherit;font-variant-numeric:tabular-nums;}

/* Commentary — collapsed bars (tap header to expand, like the app).
   No colored left border (app-wide rule: no colored accent bars). */
.cbar{background:var(--note-bg);margin:1.3em 0 1.6em;}
.cbar-header{display:flex;align-items:center;gap:10px;padding:12px 17px;min-height:44px;cursor:pointer;
  user-select:none;-webkit-user-select:none;}
.cbar-glyph{color:var(--gold);font-size:13px;line-height:1;flex:none;}
.cbar-label{flex:1;font:600 10px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.cbar-chevron{color:var(--accent);font-size:17px;line-height:1;transition:transform .25s var(--ease);}
.cbar.expanded .cbar-chevron{transform:rotate(90deg);}
.cbar-body{display:none;padding:0 19px 17px 17px;}
.cbar.expanded .cbar-body{display:block;}
.cm-note{overflow-wrap:anywhere;font-family:'Inter',sans-serif;font-size:calc(14.5px * var(--reader-scale));
  line-height:1.72;color:var(--note-ink);}
.cm-note + .cm-note{margin-top:1em;padding-top:1em;border-top:1px solid var(--rule);}
.cbar-source{display:block;margin-top:9px;font-size:.85em;font-style:italic;color:var(--muted);}
.notes-off .cbar{display:none;}

.cap-banner{max-width:680px;margin:26px auto 0;font:400 11px/1.7 var(--mono);
  color:var(--muted);background:var(--note-bg);border:1px solid var(--rule);
  border-radius:2px;padding:14px 20px;text-align:center;letter-spacing:.04em;}

/* Chapter prev/next — register cells */
.chnav{max-width:680px;margin:34px auto 0;padding:0 24px;display:grid;
  grid-template-columns:1fr 1fr;}
.chnav-cell{display:flex;flex-direction:column;gap:7px;padding:20px 4px 22px;
  border-top:1px solid var(--rule);min-width:0;}
.chnav-cell.next{text-align:right;border-left:1px solid var(--rule);padding-left:18px;}
.chnav-cell.prev{padding-right:18px;}
.chnav .lbl{font:600 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);}
.chnav .ct{font-family:'Fraunces',serif;font-weight:430;font-size:16px;color:var(--head);
  line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
a.chnav-cell:hover .ct{color:var(--accent);}
.chnav-cell.end .ct{color:var(--muted);}

/* App bar (chapter pages, first fold) */
.appbar{background:var(--chrome);border-bottom:1px solid var(--rule);}
.appbar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px;}
.ab-text{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:var(--muted);
  margin:0;flex:1;min-width:0;}
.ab-text b{color:var(--ink);font-weight:600;}
.ab-btn{font:600 12px/1 'Inter',sans-serif;color:var(--brand-ink);background:var(--brand);
  border-radius:8px;padding:11px 14px;white-space:nowrap;transition:background .25s;}
.ab-btn:hover{background:var(--brand-2);}
.ab-x{background:none;border:0;color:var(--muted);font:400 22px/1 'Inter',sans-serif;
  padding:0;cursor:pointer;min-width:36px;min-height:36px;}
.ab-x:hover{color:var(--ink);}
.appbar-off .appbar{display:none;}

/* Here / in the app register (book landing page) */
.register{max-width:680px;margin:0 auto;padding:30px 24px 0;}
.rg-kick{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;border-top:1px solid var(--rule);padding-top:16px;}
.rg-table{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:13px;
  line-height:1.5;color:var(--ink);}
.rg-table th,.rg-table td{text-align:left;vertical-align:top;padding:9px 10px 9px 0;
  border-bottom:1px solid var(--rule);}
.rg-table thead th{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding-bottom:8px;}
.rg-table tbody th{font-weight:500;color:var(--ink);width:44%;}
.rg-table td{color:var(--muted);width:28%;}
.rg-table td:last-child{color:var(--ink);padding-right:0;}
.rg-table .sr{position:absolute;left:-200vw;}
.rg-gift{font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.8;color:var(--muted);
  margin:18px 0 18px;max-width:560px;}
.rg-gift b{color:var(--ink);font-weight:600;}
.rg-row{display:flex;align-items:center;gap:26px;}

/* Conversion blocks */
.convert{max-width:680px;margin:0 auto;padding:26px 24px 54px;}
.cv-kick{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin:0 0 10px;border-top:1px solid var(--rule);padding-top:16px;
  display:inline-block;}
.cv-line{font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.8;color:var(--muted);
  margin:0 0 18px;max-width:520px;}
.cv-row{display:flex;align-items:center;gap:26px;}
.btn-store{display:inline-block;font:600 14.5px/1 'Inter',sans-serif;
  color:var(--brand-ink);background:var(--brand);border-radius:10px;padding:16px 28px;transition:background .25s;}
.btn-store:hover{background:var(--brand-2);}
.btn-store.sm{padding:13px 20px;font-size:13px;}

.qr{display:none;}
@media(hover:hover) and (min-width:900px){
  .qr{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .qr img{display:block;background:#fff;padding:7px;border-radius:2px;border:1px solid var(--rule);}
  .qr-cap{font:400 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
}

/* Final CTA */
.cta{max-width:680px;margin:28px auto 0;padding:0 24px 70px;text-align:center;}
.cta-rule{height:1px;background:var(--rule);margin-bottom:28px;}
.cta-kick{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin:0 0 18px;}
.cta h3{font-family:'Fraunces',serif;font-weight:440;font-size:clamp(26px,4.5vw,34px);
  color:var(--head);margin:0 0 16px;letter-spacing:-.015em;line-height:1.15;}
.cta-body{font-family:'Inter',sans-serif;font-size:15px;line-height:1.75;color:var(--muted);
  max-width:520px;margin:0 auto 28px;}
.cta-row{display:flex;align-items:center;justify-content:center;gap:26px;}
.cta-fine{font:400 9.5px/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 0;}
.cta-fine a{color:var(--muted);border-bottom:1px solid var(--rule);}
.cta-fine a:hover{color:var(--accent);}

/* Locked commentary — a held-back note keeps its bar at its own paragraph, so
   the reader sees THAT THIS LINE has a note. Same bar at lower contrast: a
   different treatment would read as a different feature rather than a locked
   one, and a column of bright upsells down an annotated chapter is the nag
   this design exists to avoid. Closed by default; the ask lives in the body. */
.cbar.locked{opacity:.6;}
.cbar.locked:hover,.cbar.locked.open{opacity:.85;}
.cm-locked p{margin:0 0 15px;}
.notes-off .cbar.locked{display:none;}

/* Listen — chapter narration preview */
.listen{max-width:680px;margin:26px auto 0;padding:18px 20px;
  border:1px solid var(--rule);background:var(--chrome);}
.listen-row{display:flex;align-items:center;gap:14px;}
.listen-btn{flex:none;width:42px;height:42px;border:1px solid var(--rule);
  background:var(--bg);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .25s;}
.listen-btn:hover{border-color:var(--gold);}
.lp-icon{width:0;height:0;border-left:11px solid var(--accent);
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;}
.listen.playing .lp-icon{width:11px;height:13px;border:none;margin-left:0;
  background:linear-gradient(to right,var(--accent) 0 3.5px,transparent 3.5px 7.5px,var(--accent) 7.5px 11px);}
.listen-meta{flex:1;min-width:0;}
.listen-kick{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px;}
.listen-title{font-family:'Fraunces',serif;font-size:15px;color:var(--head);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.listen-time{font:400 10px/1 var(--mono);color:var(--muted);flex:none;}
.listen-track{height:2px;background:var(--rule);margin:14px 0 0;}
.listen-fill{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear;}
.listen-note{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--muted);margin:13px 0 0;}
.listen-note a{color:var(--accent);border-bottom:1px solid var(--rule);}
.listen-note a:hover{border-color:var(--accent);}

/* Echoes — cross-tradition passages; every target is a free page */
.echoes{max-width:680px;margin:0 auto;padding:8px 24px 0;}
.echoes-kick{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule);}
.echo{display:block;padding:14px 0;border-bottom:1px solid var(--rule);}
.echo-src{display:block;font:600 10px/1.5 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.echo-src i{font-style:normal;color:var(--muted);}
.echo-snip{display:block;font-family:'Inter',sans-serif;font-size:13px;line-height:1.65;
  color:var(--muted);}
.echo:hover .echo-snip{color:var(--ink);}

/* Daily-passage signup */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.subs{max-width:520px;margin:34px auto 0;padding:22px 0 0;border-top:1px solid var(--rule);
  text-align:left;}
.subs-kick{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;}
.subs-line{font-family:'Inter',sans-serif;font-size:14px;line-height:1.6;
  color:var(--ink);margin:0 0 14px;}
.subs-row{display:flex;gap:8px;flex-wrap:wrap;}
.subs input[type=email]{flex:1 1 15rem;min-width:0;font:400 15px/1.2 'Inter',sans-serif;
  color:var(--ink);background:var(--chrome);border:1px solid var(--rule);border-radius:8px;
  padding:12px 14px;}
.subs input[type=email]:focus{outline:2px solid var(--brand);outline-offset:1px;}
.subs button{font:600 14px/1 'Inter',sans-serif;color:var(--brand-ink);background:var(--brand);
  border:0;border-radius:8px;padding:13px 20px;cursor:pointer;}
.subs button:hover{background:var(--brand-2);}
.subs button:disabled{opacity:.55;cursor:default;}
/* Honeypot: off-screen rather than display:none — some bots skip hidden inputs. */
.subs-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.subs-note{font:400 11.5px/1.6 var(--mono);color:var(--muted);margin:12px 0 0;}
.subs-note[data-state=err]{color:#9b2c2c;}
.subs[data-done] .subs-row{display:none;}
.subs[data-done] .subs-note{color:var(--brand);}

/* Guide — one real exchange about this chapter, shown in full.
   Marked by indent + a hairline frame, never a coloured edge bar. */
.sophia{max-width:680px;margin:34px auto 0;padding:22px 24px 4px;
  border:1px solid var(--rule);border-radius:10px;}
.so-kick{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;}
.so-q{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.4;
  color:var(--ink);margin:0 0 14px;}
.so-a p{font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.75;
  color:var(--ink);margin:0 0 12px;}
.so-note{font:400 12px/1.65 var(--mono);color:var(--muted);
  margin:16px 0 18px;padding-top:14px;border-top:1px solid var(--rule);}
.so-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* Read next — served to a finisher BEFORE the ask */
.recs{max-width:680px;margin:0 auto;padding:34px 24px 0;}
.recs-kick{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule);}
/* The hairlines used to be a 1px grid gap over a --rule background, so any
   trailing empty cell painted as a solid grey block — and there are always 5
   recs, i.e. an empty cell at every mobile and desktop width. Draw the rules on
   the cells instead, so absent cells are simply absent. */
/* Rules on the cells, not a 1px grid gap over a coloured container: the gap
   trick painted any trailing empty cell as a solid block. The container drops
   its top/left so the first row and column aren't doubled. */
.rec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--rule);border-top:none;border-left:none;}
.rec{background:var(--bg);padding:15px 14px;transition:background .25s;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);}

.rec:hover{background:var(--chrome);}
.rec-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:'Fraunces',serif;font-size:14.5px;color:var(--head);line-height:1.3;}
.rec-a{display:block;font:400 10px/1.5 var(--mono);color:var(--muted);margin-top:5px;}

/* Keep-my-place — behaviour-triggered, only after 3+ chapters, once per book */
.keepcard{max-width:680px;margin:26px auto 0;padding:16px 20px;
  border:1px solid var(--rule);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.keepcard p{flex:1;min-width:200px;font-family:'Inter',sans-serif;font-size:13px;
  line-height:1.6;color:var(--muted);margin:0;}
.keepcard .kc-x{font:400 18px/1 var(--mono);color:var(--muted);background:none;
  border:none;cursor:pointer;padding:6px 10px;}
.keepcard .kc-x:hover{color:var(--ink);}

/* Footer */
.site-footer{border-top:1px solid var(--rule);background:var(--chrome);
  padding:30px 0;margin-top:0;}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-mark{font-family:'Fraunces',serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-size:13px;font-weight:460;}
/* The footer was one wrapping row of 10px links with a left margin, so
   "Open reads" split across the line break and read as two separate links. */
.footer-links{display:flex;flex-wrap:wrap;gap:0 18px;}
.footer-links a{font:400 11px/2 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;transition:color .25s;position:relative;
  display:inline-block;}
/* Real padding, not a negative-inset ::after: at a 26px row pitch the
   overlapping pseudo-boxes let TERMS steal the bottom of HOME. */
.footer-links a{padding:12px 0;}
@media (hover:hover){.footer-links a:hover{color:var(--accent);}}

@media (max-width:640px){
  .footer-links{display:grid;grid-template-columns:repeat(3,auto);
    justify-content:start;column-gap:18px;}
  /* Left-aligned, not centred: this hero carries a 3–5 line description, and
     centred multi-line prose has no left edge to return to. Only the cover and
     the title stay centred. */
  .hero{flex-direction:column;align-items:stretch;text-align:left;padding-top:36px;gap:24px;}
  .hero-cover{align-self:center;}
  .hero-cover img{width:144px;}
  .free-line,.book-title{text-align:center;}
  .begin-row{justify-content:center;}

  /* The controls bar wrapped to three rows on a phone and, stacked under the
     60px header, held 172px — a fifth of the viewport — permanently occupied
     while reading. Theme/size/commentary are once-a-session settings, so on a
     phone they scroll away with the page and only the header stays pinned. */
  .controls{position:static;}
  .controls .wrap{min-height:0;padding-top:9px;padding-bottom:9px;gap:12px;}
  .ctl-crumb{max-width:100%;order:-1;flex-basis:100%;}
  .ctl-pos{margin-left:auto;}
  html{scroll-padding-top:76px;}
  .chapter{scroll-margin-top:76px;}

  /* Next is the most-used control in the product; stacked it was the weaker of
     two identical cells, and below Previous. */
  .chnav{grid-template-columns:1fr;display:flex;flex-direction:column-reverse;}
  .chnav-cell.next{text-align:left;border-left:none;padding-left:4px;}
  .chnav-cell.prev{padding-right:4px;}
  .cta-row{flex-direction:column;gap:16px;}

  /* These four are max-width:680px with no gutter, so below 680px their borders
     land exactly on the bezel while every paragraph beside them is inset 24px.
     .listen alone appears on ~97% of chapter pages. */
  .listen,.cap-banner,.sophia,.keepcard{margin-left:24px;margin-right:24px;}
  /* App bar: the line and the close on one row, the button full width below,
     so neither the copy nor the 44px target gets squeezed at 320. */
  .appbar .wrap{flex-wrap:wrap;gap:8px 10px;}
  .ab-text{flex-basis:calc(100% - 46px);}
  .ab-x{order:2;}
  .ab-btn{order:3;flex:1;text-align:center;padding:13px 14px;}
  .rg-table{font-size:12.5px;}
  .rg-table tbody th{width:40%;}

  /* The reading column itself had no mobile treatment: desktop's 19px/1.78 in a
     342px measure is ~34 characters per line with leading tuned for ~70. */
  .reader{padding:34px 24px 8px;font-size:calc(17.5px * var(--reader-scale));}
  .reader .para{line-height:1.62;}
  /* Body drops to 17.5 on mobile; without this the title stays at 31 and the
     title:body ratio GROWS on the smaller screen. */
  .chapter-title{font-size:calc(26px * var(--reader-scale));}
  /* The listen card cropped the chapter title to make room for a 0:00 / 1:00
     timer; at 320 it read "Introductio…". */
  .listen-row{flex-wrap:wrap;}
  .listen-time{order:3;width:100%;margin-top:8px;text-align:right;}
  .listen-title{white-space:normal;overflow:visible;}
  /* The button was the only centred thing among left-aligned neighbours. */
  .begin-row{justify-content:stretch;}
  .btn-begin{flex:1;text-align:center;}
  .ctl-crumb{order:-2;}
  .ctl-pos{order:-1;margin-left:auto;}
}

@media (max-width:360px){
  .reader{font-size:calc(16.5px * var(--reader-scale));}
  .chapter.versed .para,.para:has(> .vn:first-child){padding-left:1.8em;}
  .chapter.versed .cbar{margin-left:1.8em;}
  .vn{width:1.6em;}
}

/* Respect the notch and the home indicator rather than tucking the last line
   of the footer underneath them. */
.site-footer{padding-bottom:calc(30px + env(safe-area-inset-bottom));}
.wrap{padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));}