@import url("fonts/vazirmatn.css");
@font-face { font-family: IranNastaliq; src: url("fonts/IranNastaliq.ttf") format("truetype"); font-display: swap; }
:root { --ink:#2a1c12; --gold:#c4a15a; --cream:#f3e6c8; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:#0b0705; color:var(--cream); font-family:"Vazirmatn", Vazirmatn, sans-serif; }
.nastaliq { font-family: "IranNastaliq", IranNastaliq, serif; }
.open-stage {
  min-height:100dvh; display:grid; place-items:center; padding:48px 12px 92px;
  background: radial-gradient(ellipse at 50% 40%, rgba(80,50,20,.25), transparent 50%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.72)),
              url("textures/wood.jpg") center/cover no-repeat;
}
.sheet-wrap {
  width:min(92vw, 520px);
  min-height:min(72dvh, 760px);
  position:relative;
}
.leaf {
  min-height:min(72dvh, 760px);
  overflow:auto;
  padding:7% 8% 6%;
  display:flex; flex-direction:column; text-align:center; color:var(--ink);
  background-image: linear-gradient(90deg, rgba(70,45,18,.1), transparent 22px), url("textures/paper.jpg");
  background-size:cover; border-radius:4px 10px 10px 3px; border:1px solid rgba(90,60,30,.16);
  box-shadow: 10px 22px 40px rgba(0,0,0,.42);
}
.leaf-head { flex:0 0 auto; }
.leaf-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.leaf-foot { flex:0 0 auto; padding-top:.35rem; }
.chapter { opacity:.62; font-size:.8rem; margin-bottom:.15rem; }
.poem-title { font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.8; margin:0 0 .35rem; font-weight:400; }
.date { font-size:.8rem; color:#7a5a36; margin:0 0 1rem; }
.verse { margin:0 auto .9em; max-width:22em; }
.mesra { display:block; line-height:2.05; font-size:clamp(.95rem,1.6vw,1.12rem); }
.mesra + .mesra { margin-top:.12em; }
.page-no { font-size:.74rem; color:#7a5a36; margin-top:.2rem; }
.toc { text-align:right; }
.toc-row { display:grid; grid-template-columns:auto 1fr auto; gap:.4rem; width:100%; background:none; border:0; font:inherit; color:#3a2718; text-decoration:none; margin:.32rem 0; align-items:start; font-size:.95rem; }
.toc-meta { display:block; font-size:.72rem; color:#7a5a36; margin-top:.08rem; }
.dots { border-bottom:1px dotted #8a6a40; transform:translateY(-.28em); }
.controls { position:fixed; bottom:max(12px, env(safe-area-inset-bottom)); left:0; right:0; display:flex; gap:.55rem; z-index:50; flex-wrap:wrap; justify-content:center; }
.btn { appearance:none; border:1px solid rgba(196,161,90,.35); background:rgba(20,12,8,.72); color:#ead7b0; border-radius:999px; padding:.55rem .95rem; cursor:pointer; font:inherit; text-decoration:none; backdrop-filter:blur(8px); }
@media (min-width:900px) {
  .sheet-wrap { width:min(88vw, 640px); }
}