/* Chapter reader — each chapter reads like a small printed book.
   Ink stage, warm paper pages (A5 ratio on tablet/desktop, full-height page on phones),
   two-page spread on wide screens. Heebo for the interface, Frank Ruhl Libre for the book text. */
:root{
  --ink:#0E100D;--ink-2:#171B16;--forest:#1B3B2D;
  --gold:#C9A45A;--gold-deep:#7A5F22;
  --paper:#FBF8F1;--paper-edge:#E9E3D6;--text:#1A1C18;--muted:#5B5F57;
  --on-dark:#F3F1EB;--on-dark-muted:#BCC0B5;
  --ui:"Heebo","Rubik","Arial Hebrew","Segoe UI",Arial,sans-serif;
  --book:"Frank Ruhl Libre","David","Times New Roman",serif;
  --fs:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--on-dark);font-family:var(--ui);font-size:16px;overflow:hidden;-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.app{direction:rtl;height:100%;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bars */
.bar{display:flex;align-items:center;gap:8px;padding-inline:12px;flex:none}
.bar-top{min-height:56px;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid rgba(243,241,235,.08)}
.bar-bottom{min-height:68px;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid rgba(243,241,235,.08);position:relative}
.bar .title{flex:1;min-width:0;text-align:center;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .title span{color:var(--gold)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--on-dark);font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,transform .15s}
.icon-btn:hover{background:rgba(243,241,235,.08)}
.icon-btn:active{transform:scale(.95);background:rgba(243,241,235,.14)}
.icon-btn[disabled]{opacity:.35;pointer-events:none}
.size-btn{border:1.5px solid rgba(243,241,235,.25);gap:8px}
.size-btn .aa{font-family:var(--book);font-weight:700;font-size:18px;letter-spacing:-.02em}
.size-btn .aa small{font-size:.72em}
.turn{min-width:112px;border:1.5px solid rgba(243,241,235,.25)}
.turn.next{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.turn.next:hover{background:#D8B66E}
.turn.next:active{background:#B8924A}
.where{flex:1;text-align:center;font-size:16px;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.meter{position:absolute;inset-inline:0;top:-1px;height:2px}
.meter span{display:block;height:100%;background:var(--gold);transform-origin:right center;transform:scaleX(0);transition:transform .45s ease}
@media (max-width:420px){.turn{min-width:64px}.turn .lbl{display:none}.bar .title .t{display:none}}

/* stage + paper */
.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book{position:relative}
.paper{position:absolute;top:0;background:var(--paper);border-radius:4px;box-shadow:0 1px 0 var(--paper-edge),0 18px 40px rgba(0,0,0,.45)}
.paper::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.book.spread .p0::after{background:linear-gradient(to right,rgba(0,0,0,.08),rgba(0,0,0,0) 7%)}
.book.spread .p1::after{background:linear-gradient(to left,rgba(0,0,0,.1),rgba(0,0,0,0) 7%)}
.run{position:absolute;inset-inline:0;text-align:center;font-family:var(--ui);font-size:16px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run.head{top:0}
.run.foot{bottom:0;font-variant-numeric:tabular-nums;font-size:16px}
.clip{position:absolute;overflow:hidden}
.flow{height:100%;column-fill:auto;font-family:var(--book);font-size:var(--fs);line-height:1.75;color:var(--text);will-change:transform}
.flow.anim{transition:transform .5s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.flow.anim{transition:none}.meter span{transition:none}}

/* book typography */
.flow p{margin:0 0 .55em;orphans:2;widows:2}
.flow p.lead{font-size:1.18em;font-weight:700;line-height:1.55}
.flow h2{font-family:var(--ui);font-weight:900;font-size:1.2em;line-height:1.3;margin:1.3em 0 .7em;break-after:avoid;break-inside:avoid;display:flex;flex-direction:column;gap:.5em}
.flow h2::before{content:"";width:28px;height:2px;background:var(--gold)}
.flow .pull{font-weight:700;font-size:1.08em;border-inline-start:2px solid var(--gold);padding-inline-start:.8em;margin:.9em 0;break-inside:avoid}
.title-page{break-after:column;height:var(--ih);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;font-family:var(--ui)}
.title-page .num{font-size:16px;font-weight:700;letter-spacing:.2em;color:var(--gold-deep)}
.title-page .rule{width:48px;height:2px;background:var(--gold)}
.title-page h1{margin:0;font-weight:900;font-size:clamp(1.9rem,1.5em + 3vw,2.8rem);line-height:1.1;color:var(--text);text-wrap:balance}
.title-page .sub{font-family:var(--book);font-size:1.1em;color:var(--muted);text-wrap:balance}
.title-page .by{margin-top:18px;font-size:16px;color:var(--muted)}
.end-page{break-before:column;height:var(--ih);display:flex;flex-direction:column;justify-content:center;gap:16px;font-family:var(--ui)}
.end-page .num{font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--gold-deep)}
.end-page h2{font-size:1.7em;margin:0}
.end-page h2::before{display:none}
.end-page p{font-family:var(--book);color:var(--muted)}
.end-page .cta{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.btn{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35;min-height:50px;padding:10px 18px;border-radius:10px;font-family:var(--ui);font-size:16px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:background-color .2s,transform .15s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#D8B66E}
.btn-line{border-color:var(--text);color:var(--text)}
.btn-line:hover{background:rgba(14,16,13,.05)}
.end-marker{display:block;height:0}

.title-page .how{margin-top:auto;font-size:16px;color:var(--muted);display:flex;align-items:center;gap:8px}
.title-page{padding-block:0}
.title-page .num{margin-top:auto}

/* page turn */
.book{perspective:2200px}
.leaf{position:absolute;top:0;overflow:hidden;border-radius:4px;z-index:20;backface-visibility:hidden;will-change:transform}
.leaf .shade{position:absolute;inset:0;pointer-events:none;opacity:0}
.leaf.fwd .shade{background:linear-gradient(to left,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}
.leaf.back .shade{background:linear-gradient(to right,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}
.leaf.fwd.go{animation:turn-fwd .7s cubic-bezier(.45,.05,.3,1) forwards}
.leaf.back.go{animation:turn-back .7s cubic-bezier(.45,.05,.3,1) forwards}
.leaf.go .shade{animation:shade .7s ease forwards}
@keyframes turn-fwd{0%{transform:rotateY(0)}100%{transform:rotateY(-178deg)}}
@keyframes turn-back{0%{transform:rotateY(0)}100%{transform:rotateY(178deg)}}
@keyframes shade{0%{opacity:0}50%{opacity:1}100%{opacity:.6}}