@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/amiri-400.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/amiri-700.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/vazirmatn-400.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/vazirmatn-700.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F;src:url(fonts/vazirmatn-latin-400.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/oswald-600.woff2) format('woff2')}

:root{
  --green:#16301E; --green-2:#24452F; --green-3:#0C1C12;
  --band:#EFEFDA; --paper:#FBFAF3; --surface:#FFFFFF;
  --ink:#16301E; --ink-2:#4E6153; --ink-3:#7C8C80;
  --gold:#C8A44A; --gold-2:#A5822F; --rubric:#9C3B2C;
  --line:#DBDCC2; --hair:#E7E7D2; --mark:#F0DE91;
  --on-green:#E9E9D7; --on-green-2:#A3B4A7;
  --leaf:#FFFFFF; --tint:#E6EBE1;
  --leaf-w:44rem; --page-w:66rem; --body-size:1.24rem; --lead:2.15; --radius:12px;
  --ui:'Vazirmatn',system-ui,sans-serif;
  --ar:'Amiri','Traditional Arabic',serif;
  --display:'Amiri','Traditional Arabic',serif;
  --latin-display:'Oswald',system-ui,sans-serif;
  --shadow:0 18px 40px -34px rgba(12,28,18,.65);
}
/* Persian and Urdu read poorly in a naskh display face; Vazirmatn is clearer */
html[data-lang="fa"],html[data-lang="ur"]{--display:'Vazirmatn',sans-serif}
html[data-theme="night"]{
  --green:#0B1510; --green-2:#152318; --green-3:#060D09; --band:#152318; --paper:#0B1510;
  --surface:#152318; --ink:#E4E6D6; --ink-2:#A8B7AB; --ink-3:#7A8A7E;
  --line:#25352A; --hair:#1E2C23; --leaf:#152318; --tint:#1D2C22;
  --on-green:#E4E6D6; --mark:#4A4520; --rubric:#D98878; --gold-2:#C8A44A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);
     font-family:var(--ui);-webkit-text-size-adjust:100%;line-height:1.6}
a{color:var(--green-2);text-decoration:none}
html[data-theme="night"] a{color:var(--gold)}
button,select,input{font-family:inherit;font-size:.85rem;color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-weight:400;margin:0}
img,svg{display:block}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:.6rem;top:.6rem;z-index:60;background:var(--surface);
            padding:.5rem .8rem;border:1px solid var(--green)}
.ic{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ================= top bar ================= */
.bar{position:sticky;top:0;z-index:30;background:var(--green);color:var(--on-green);
     box-shadow:0 1px 0 rgba(200,164,74,.22)}
.bar a{color:inherit}
.bar-in{max-width:82rem;margin:0 auto;padding:.55rem 1rem;display:flex;gap:.5rem;
        align-items:center}
.brand{display:flex;flex-direction:column;gap:.1rem;line-height:1.2;
       padding-inline-end:.9rem;margin-inline-end:.2rem;min-width:0}
.brand b{font-weight:700;font-family:var(--display);font-size:1.16rem;font-weight:400;white-space:nowrap}
html[data-lang="en"] .brand b{font-weight:700;font-family:var(--latin-display);text-transform:uppercase;
                              letter-spacing:.03em;font-size:1.06rem}
.brand small{font-size:.58rem;letter-spacing:.2em;color:var(--gold);
             font-family:var(--latin-display);text-transform:uppercase;white-space:nowrap}
html[data-lang="en"] .brand small{display:none}
.spacer{flex:1}
.tbtn{background:transparent;border:1px solid rgba(233,233,215,.2);color:var(--on-green);
      border-radius:999px;padding:.34rem .78rem;cursor:pointer;white-space:nowrap;
      display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem}
.tbtn:hover{border-color:var(--gold);color:var(--gold)}
.tbtn.icon-only{padding:.34rem .5rem}
.langs{display:flex;gap:.1rem;background:rgba(0,0,0,.24);border-radius:999px;padding:.14rem}
.langs button{background:transparent;border:0;color:var(--on-green-2);border-radius:999px;
              padding:.24rem .52rem;cursor:pointer;font-size:.72rem}
.langs button[aria-pressed="true"]{background:var(--gold);color:var(--green);font-weight:700}

/* ================= buttons ================= */
.btn{background:var(--surface);border:1px solid var(--line);border-radius:999px;
     padding:.42rem .95rem;cursor:pointer;white-space:nowrap;color:var(--ink);
     display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem}
.btn:hover{border-color:var(--gold);color:var(--gold-2)}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.btn.solid{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn.solid:hover{background:var(--gold);color:var(--green)}

/* ================= nav drawer ================= */
.nav{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(19rem,84vw);z-index:45;
     background:var(--surface);border-inline-end:1px solid var(--line);
     transform:translateX(-100%);visibility:hidden;display:flex;flex-direction:column;
     transition:transform .22s ease,visibility .22s;box-shadow:14px 0 40px -30px rgba(0,0,0,.6)}
html[dir="rtl"] .nav{transform:translateX(0);inset-inline-start:0}
html[dir="rtl"] .nav:not([data-open="1"]){transform:translateX(-100%)}
html[dir="ltr"] .nav:not([data-open="1"]){transform:translateX(-100%)}
.nav[data-open="1"]{transform:translateX(0)!important;visibility:visible}
.nav-head{background:var(--green);color:var(--on-green);padding:1rem;display:flex;
          align-items:center;gap:.6rem}
.nav-head b{font-weight:700;font-family:var(--display);font-size:1.1rem;font-weight:400}
.nav-head button{margin-inline-start:auto;background:transparent;border:0;
                 color:var(--on-green);cursor:pointer;font-size:1rem}
.nav ul{list-style:none;margin:0;padding:.6rem 0;flex:1;overflow-y:auto}
.nav li a{display:flex;align-items:center;gap:.7rem;padding:.72rem 1.1rem;color:var(--ink);
          font-size:.92rem}
.nav li a:hover{background:var(--tint);color:var(--gold-2)}
.nav li a .ic{color:var(--gold-2);width:1.15rem;height:1.15rem}
.nav hr{border:0;border-top:1px solid var(--hair);margin:.5rem 1.1rem}
.nav-foot{padding:.9rem 1.1rem;font-size:.7rem;color:var(--ink-3);border-top:1px solid var(--hair)}

/* ================= hero ================= */
.hero{position:relative;background:var(--band);border-bottom:1px solid var(--line);
      padding:2.4rem 1rem 2.1rem;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C8A44A' stroke-width='.7' stroke-opacity='.35'%3E%3Cpath d='M32 4 L44 16 L32 28 L20 16 Z'/%3E%3Cpath d='M32 36 L44 48 L32 60 L20 48 Z'/%3E%3Cpath d='M0 32 L12 20 L24 32 L12 44 Z'/%3E%3Cpath d='M40 32 L52 20 L64 32 L52 44 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px}
html[data-theme="night"] .hero::before{opacity:.16}
.hero-in{position:relative;max-width:46rem;margin:0 auto;text-align:center}
.quote{font-family:var(--ar);font-size:1.02rem;color:var(--gold-2);margin:0 0 .9rem;
       letter-spacing:.01em}
html[data-lang="en"] .quote{font-family:var(--ui);font-style:italic;font-size:.95rem}
.hero h1{font-weight:700;font-family:var(--display);font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.45;
         margin:0 0 .35rem}
html[data-lang="en"] .hero h1{font-weight:700;font-family:var(--latin-display);text-transform:uppercase;
                              letter-spacing:.02em}
.hero .sub{color:var(--ink-2);margin:0 0 1.3rem;font-size:.92rem}
.orn{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0 0 1.3rem;
     color:var(--gold)}
.orn i{display:block;height:1px;width:4.5rem;background:linear-gradient(
       to var(--to,right),transparent,var(--gold))}
.orn svg{width:1.1rem;height:1.1rem;stroke:var(--gold);fill:none;stroke-width:1.4}

.searchbox{display:flex;background:var(--surface);border:1px solid var(--line);
           border-radius:999px;overflow:hidden;box-shadow:var(--shadow)}
.searchbox input{flex:1;border:0;background:transparent;padding:.85rem 1.2rem;
                 font-size:.95rem;min-width:0}
.searchbox input:focus{outline:none}
.searchbox select{border:0;border-inline-start:1px solid var(--line);background:var(--band);
                  padding:0 .8rem;cursor:pointer;font-size:.78rem}
.searchbox button{border:0;background:var(--green);color:var(--on-green);padding:0 1.2rem;
                  cursor:pointer;display:flex;align-items:center}
.searchbox button:hover{background:var(--gold);color:var(--green)}
.adv-toggle{margin-top:.75rem}
.adv{max-width:46rem;margin:.9rem auto 0;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--radius);padding:1rem;display:none;text-align:start;position:relative}
.adv[data-open="1"]{display:block}
.adv-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.field{display:flex;flex-direction:column;gap:.28rem}
.field label{font-size:.66rem;letter-spacing:.06em;color:var(--ink-3)}
.field input,.field select{border:1px solid var(--line);border-radius:8px;padding:.48rem .6rem;
                           background:var(--paper)}
.adv-actions{margin-top:.85rem;display:flex;gap:.5rem;justify-content:flex-end}

/* stats */
.stats{position:relative;display:flex;justify-content:center;gap:2.4rem;margin-top:1.5rem;
       flex-wrap:wrap}
.stat{text-align:center}
.stat b{font-weight:700;display:block;font-family:var(--display);font-size:1.55rem;color:var(--gold-2);
        font-weight:400;line-height:1.2}
html[data-lang="en"] .stat b{font-weight:700;font-family:var(--latin-display)}
.stat span{font-size:.66rem;letter-spacing:.14em;color:var(--ink-3)}

/* ================= main ================= */
.wrapmain{max-width:var(--page-w);margin:0 auto;padding:2.2rem 1rem 4rem}
.sec{margin-bottom:2.4rem}
.sec-h{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;
       padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.sec-h .ic{color:var(--gold-2);width:1.1rem;height:1.1rem}
.sec-h h2{font-size:1rem;font-weight:700}
.sec-h span{font-size:.72rem;color:var(--ink-3);margin-inline-start:auto}

.rail{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem}
.rcard{flex:0 0 16.5rem;background:var(--surface);border:1px solid var(--line);
       border-radius:var(--radius);padding:.9rem 1rem;color:inherit}
.rcard:hover{border-color:var(--gold)}
.rcard b{font-weight:700;display:block;font-family:var(--ar);font-size:1.05rem;font-weight:400;
         line-height:1.6;margin-bottom:.3rem}
html[data-lang="en"] .rcard b{font-weight:700;font-family:var(--ui);font-weight:700;font-size:.95rem}
.rcard span{display:block;font-size:.72rem;color:var(--ink-3)}
.rcard .prog{height:3px;background:var(--hair);border-radius:2px;margin-top:.7rem}
.rcard .prog i{display:block;height:100%;background:var(--gold);border-radius:2px}
.empty-note{font-size:.8rem;color:var(--ink-3);line-height:1.9;background:var(--surface);
            border:1px dashed var(--line);border-radius:var(--radius);padding:1.1rem;
            text-align:center}

.tabs{display:flex;gap:.25rem;overflow-x:auto;margin-bottom:1rem;padding-bottom:.15rem}
.tab{background:var(--surface);border:1px solid var(--line);border-radius:999px;
     padding:.45rem .95rem;cursor:pointer;white-space:nowrap;color:var(--ink-2);font-size:.82rem}
.tab[aria-selected="true"]{background:var(--green);border-color:var(--green);
                           color:var(--on-green);font-weight:700}
.tab small{opacity:.65;font-weight:400}
.cat-desc{font-size:.84rem;color:var(--ink-2);margin:0 0 1.1rem;line-height:1.85}

.books{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}
.bcard{display:flex;gap:1rem;align-items:stretch;background:var(--surface);
       border:1px solid var(--line);border-radius:var(--radius);padding:.95rem;color:inherit;
       transition:border-color .15s,transform .15s}
.bcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.spine{flex:0 0 4.6rem;border-radius:5px;display:flex;align-items:center;justify-content:center;
       padding:.5rem .3rem;position:relative;min-height:6.4rem;
       background:linear-gradient(150deg,#2C5238 0%,#16301E 55%,#0A170F 100%);
       box-shadow:inset 0 0 0 1px rgba(200,164,74,.45),
                  inset 0 0 0 4px rgba(200,164,74,.14), var(--shadow)}
.spine span{font-weight:700;font-family:var(--display);font-size:.62rem;color:var(--gold);text-align:center;
            line-height:1.6;writing-mode:vertical-rl;max-height:5.4rem;overflow:hidden}
.bmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.bmeta b{font-weight:700;font-family:var(--ar);font-size:1.2rem;font-weight:400;line-height:1.5}
html[data-lang="en"] .bmeta b{font-weight:700;font-family:var(--ui);font-weight:700;font-size:1.02rem}
.bmeta i{font-size:.8rem;color:var(--ink-2);margin-top:.2rem}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;letter-spacing:.06em;
       color:var(--gold-2);border:1px solid var(--line);border-radius:999px;
       padding:.16rem .55rem;margin-top:.55rem;align-self:flex-start}
.bmeta .who{font-size:.78rem;color:var(--ink-2);margin-top:auto;padding-top:.65rem;
            border-top:1px solid var(--hair);display:flex;align-items:center;gap:.4rem}

/* ================= results ================= */
.res{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     padding:.95rem 1.05rem;margin-bottom:.6rem;display:block;color:inherit}
.res:hover{border-color:var(--gold)}
.res-h{font-size:.7rem;letter-spacing:.06em;color:var(--rubric);margin-bottom:.4rem}
.res-t{font-family:var(--ar);font-size:1rem;line-height:1.95;color:var(--ink-2)}
mark{background:var(--mark);color:inherit;padding:0 .12em;border-radius:3px}

/* ================= reading page ================= */
.edgewrap{background:var(--green)}
.edge{max-width:82rem;margin:0 auto;padding:.3rem 1rem .4rem;display:flex;gap:1px;
      align-items:flex-end;height:1.5rem}
.edge a{flex:1 1 auto;min-width:2px;height:.4rem;background:rgba(233,233,215,.2);
        transition:height .12s,background .12s}
.edge a[data-numbered="1"]{background:rgba(233,233,215,.45)}
.edge a:hover{height:1rem;background:var(--gold)}
.edge a[aria-current="page"]{height:1.35rem;background:var(--gold)}
.wrap{max-width:var(--page-w);margin:0 auto;padding:1.5rem 1rem 4.5rem;display:flex;
      justify-content:center}
.leaf{position:relative;width:100%;max-width:var(--leaf-w);background:var(--leaf);
      border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
      padding:2.6rem 2.4rem 2rem}


.part-label{font-size:.66rem;letter-spacing:.12em;color:var(--ink-3);margin:0 0 1.4rem;
            padding-bottom:.75rem;border-bottom:1px solid var(--hair);display:flex;
            justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.part-label .folio{color:var(--rubric);font-weight:700;font-size:.8rem;letter-spacing:.04em;
                   white-space:nowrap}
.body p,.body h3{font-weight:700;margin:0 0 1.05rem}
.body p{font-family:var(--ar);font-size:var(--body-size);line-height:var(--lead);
        text-align:justify;hyphens:none}
.body p[lang="fa"]{font-family:var(--ui);font-size:calc(var(--body-size) - .2rem);
                   line-height:calc(var(--lead) - .2)}
.body h3{font-weight:700;font-family:var(--display);font-size:1.2rem;margin-top:1.9rem;line-height:1.7;
         text-align:start}
.body h3::before{content:"";display:block;width:2.6rem;height:1px;background:var(--gold);
                 margin-bottom:.7rem}
.body h3[lang="fa"]{font-family:var(--ui);font-weight:700;font-size:1.02rem}
.fnref{font-size:.62em;font-weight:700;color:var(--rubric);vertical-align:.55em;padding:0 .12em}
.notes{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--line);position:relative}
.notes::before{content:"";position:absolute;top:3px;inset-inline-start:0;width:34%;height:1px;
               background:var(--gold)}
.note{display:flex;gap:.55rem;font-family:var(--ar);font-size:.95rem;line-height:1.95;
      color:var(--ink-2);margin-bottom:.5rem}
.note[lang="fa"]{font-family:var(--ui);font-size:.85rem}
.note-n{flex:0 0 auto;font-size:.66rem;font-weight:700;color:var(--rubric);padding-top:.42rem;
        direction:ltr;unicode-bidi:embed}
.note:target{background:var(--tint);border-radius:5px}
.pager{max-width:var(--leaf-w);margin:1.4rem auto 0;display:flex;align-items:center;gap:.4rem;
       justify-content:center;flex-wrap:wrap}
.pager input{width:4.4rem;text-align:center;padding:.42rem;border:1px solid var(--line);
             border-radius:999px;background:var(--surface)}
.cite{max-width:var(--leaf-w);margin:1.1rem auto 0;font-size:.72rem;color:var(--ink-3);
      text-align:center;line-height:1.95}
.cite code{color:var(--ink-2);direction:ltr;unicode-bidi:embed}
html[data-lang="en"] .cite,html[data-lang="ur"] .cite,html[data-lang="fa"] .cite{display:none}

/* ================= side drawer (toc/search) ================= */
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(23rem,86vw);z-index:45;
        background:var(--surface);border-inline-start:1px solid var(--line);
        transform:translateX(100%);visibility:hidden;display:flex;flex-direction:column;
        transition:transform .22s ease,visibility .22s;box-shadow:-14px 0 40px -30px rgba(0,0,0,.6)}
html[dir="ltr"] .drawer{transform:translateX(100%)}
.drawer[data-open="1"]{transform:translateX(0)!important;visibility:visible}
.drawer-head{padding:.8rem 1rem;border-bottom:1px solid var(--line);display:flex;
             align-items:center;gap:.5rem}
.drawer-head h2{font-size:.95rem;font-weight:700}
.drawer-head button{margin-inline-start:auto;background:transparent;border:0;cursor:pointer}
.drawer-body{overflow-y:auto;padding:.7rem 1rem 2rem;flex:1;min-height:0}
.search-row{display:flex;gap:.4rem;margin-bottom:.8rem}
.search-row input{flex:1;padding:.5rem .7rem;border:1px solid var(--line);border-radius:999px;
                  background:var(--paper)}
.hit{display:block;border-bottom:1px solid var(--hair);padding:.65rem .2rem;color:inherit}
.hit:hover{background:var(--tint)}
.hit-p{font-size:.62rem;letter-spacing:.08em;color:var(--rubric);display:block;
       margin-bottom:.28rem}
.hit-t{font-family:var(--ar);font-size:.92rem;line-height:1.85;color:var(--ink-2)}
.toc-i{display:flex;gap:.75rem;padding:.72rem .2rem;font-family:var(--ar);font-size:1.1rem;
       line-height:1.85;border-bottom:1px solid var(--hair);color:var(--ink)}
.toc-i:hover{color:var(--gold-2)}
.toc-i span{flex:0 0 2.4rem;font-family:var(--ui);font-size:.8rem;color:var(--rubric);
            padding-top:.22rem}
.note-msg{font-size:.76rem;color:var(--ink-3);line-height:1.85;padding:.5rem .2rem}
.scrim{position:fixed;inset:0;background:rgba(8,16,10,.45);z-index:40;opacity:0;
       pointer-events:none;transition:opacity .2s}
.scrim[data-open="1"]{opacity:1;pointer-events:auto}

/* ================= book cover / info pages ================= */
.cover{max-width:48rem;margin:0 auto;padding:2.4rem 1rem 5rem}
.cover h1{font-weight:700;font-family:var(--display);font-size:clamp(1.6rem,4.6vw,2.3rem);line-height:1.5;
          margin:0 0 .5rem}
.cover .by{font-family:var(--ar);font-size:1.05rem;color:var(--ink-2);margin:0 0 1.4rem}
.cover .rule{height:2px;background:var(--gold);width:4rem;margin:0 0 1.8rem}
.cover dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:0 0 2rem;
          font-size:.86rem}
.cover dt{color:var(--ink-3);font-size:.7rem;letter-spacing:.07em;padding-top:.2rem}
.cover dd{margin:0;font-size:.98rem}
.cover h2{font-size:.72rem;letter-spacing:.13em;color:var(--ink-3);margin:0 0 .7rem}
.cover .start{margin-bottom:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.prose{font-size:.95rem;line-height:2;color:var(--ink-2);max-width:40rem}
.prose p{margin:0 0 1rem}

/* ================= footer ================= */
.foot{background:var(--green);color:var(--on-green-2);margin-top:2rem;
      padding:2.2rem 1rem 1.6rem}
.foot-in{max-width:var(--page-w);margin:0 auto;display:grid;gap:1.6rem;
         grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot h3{font-weight:700;font-family:var(--display);color:var(--on-green);font-size:1.05rem;margin-bottom:.5rem}
html[data-lang="en"] .foot h3{font-weight:700;font-family:var(--latin-display);text-transform:uppercase}
.foot p{font-size:.78rem;line-height:1.95;margin:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{color:var(--on-green-2);font-size:.8rem;line-height:2.1}
.foot li a:hover{color:var(--gold)}
.foot-b{max-width:var(--page-w);margin:1.6rem auto 0;padding-top:1rem;
        border-top:1px solid rgba(233,233,215,.14);font-size:.7rem;line-height:1.9}
.foot code{color:var(--gold);direction:ltr;unicode-bidi:embed}

@media (max-width:900px){
  .bar-in{flex-wrap:wrap;gap:.4rem}
  .brand{padding-inline-end:.4rem}
}
@media (max-width:820px){
  
}
@media (max-width:640px){
  .leaf{padding:1.9rem 1.15rem 1.4rem}
  :root{--body-size:1.15rem;--lead:2}
  .brand small{display:none}
  .searchbox select{display:none}
  .books{grid-template-columns:1fr}
  .stats{gap:1.4rem}
  .stat b{font-weight:700;font-size:1.25rem}
  .hero{padding:1.9rem .9rem 1.7rem}
  .tbtn span.lbl{display:none}
  .tbtn{padding:.34rem .55rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
@media print{
  .bar,.edgewrap,.pager,.drawer,.nav,.scrim,.cite,.skip,.foot{display:none}
  body{background:#fff}
  .leaf{border:0;box-shadow:none;max-width:none;padding:0}
}

/* ---------- translation layer ---------- */
.tr-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 1.3rem;
        padding:.55rem .75rem;background:var(--tint);border:1px solid var(--line);
        border-radius:8px}
.tr-modes{display:flex;gap:.2rem}
.tr-modes button{background:transparent;border:1px solid transparent;border-radius:999px;
                 padding:.24rem .7rem;cursor:pointer;font-size:.74rem;color:var(--ink-2)}
.tr-modes button[aria-pressed="true"]{background:var(--green);border-color:var(--green);
                                      color:var(--on-green)}
.tr-note{font-size:.72rem;color:var(--ink-3);line-height:1.7}
.tr-note.draft{color:var(--rubric)}
.tr-line{font-family:var(--ui);font-size:calc(var(--body-size) - .18rem);
         line-height:1.95;color:var(--ink);margin:0 0 1.15rem;text-align:start}
.body > [data-i] + .tr-line{border-inline-start:2px solid var(--gold);
         padding-inline-start:.85rem;margin-top:-.4rem}
h3.tr-line{font-weight:700;font-family:var(--display);font-size:1.05rem;border:0;padding:0;
           color:var(--ink-2)}
.h-num{display:inline-block;min-width:1.6rem;font-size:.7rem;font-weight:700;
       color:var(--rubric);vertical-align:.2em}
.tr-note.machine{display:flex;align-items:center;gap:.45rem;color:var(--rubric);
                 font-size:.73rem;flex:1 1 16rem}
.tr-note.machine .ic{width:1rem;height:1rem;flex:0 0 auto}
.tr-bar{border-inline-start:3px solid var(--gold)}
.body.tr p,.body.tr h3{font-family:var(--ui);text-align:start}
.body.tr p{font-size:calc(var(--body-size) - .16rem);line-height:2.05}
.body.tr h3{font-family:var(--display);font-size:1.15rem}
html[dir="ltr"] .body.tr h3{font-family:var(--latin-display);text-transform:uppercase;
                            font-size:1.05rem}
.tr-bar.static{margin-bottom:1.5rem}

html[data-lang="en"] .toc-i,html[data-lang="fa"] .toc-i,html[data-lang="ur"] .toc-i{
  font-family:var(--ui);font-size:1rem}
.note .tr-note-line{display:block;font-family:var(--ui);font-size:.88rem;line-height:1.9;
  color:var(--ink);border-inline-start:2px solid var(--gold);padding-inline-start:.7rem;
  margin-top:.35rem}

/* ---------- volumes ---------- */
.crumb{font-size:.8rem;color:var(--ink-3);margin:0 0 .5rem}
.vols{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr));gap:.45rem;
      margin-bottom:1rem}
.vol{display:flex;align-items:center;justify-content:center;height:3rem;border-radius:8px;
     border:1px solid var(--line);background:var(--surface);color:var(--ink);
     font-size:.95rem;font-weight:700}
a.vol:hover{border-color:var(--gold);background:var(--tint);color:var(--gold-2)}
.vol.off{opacity:.38;background:transparent;border-style:dashed;font-weight:400}
.bcard.soon{opacity:.72;cursor:default}
.bcard.soon .spine{filter:grayscale(.5)}
.soon-tag{margin-inline-start:auto;font-style:normal;font-size:.66rem;letter-spacing:.06em;
          color:var(--gold-2);border:1px solid var(--line);border-radius:999px;
          padding:.1rem .5rem}
.bmeta .who{justify-content:space-between}
@media (max-width:640px){.vols{grid-template-columns:repeat(auto-fill,minmax(3rem,1fr))}}
/* pager reads by word, not by arrow glyphs (those mirror under bidi) */
.pager .btn{font-size:.8rem}
@media (max-width:560px){
  .pager .btn:first-child,.pager .btn:last-child,
  .pager span.btn:first-child,.pager span.btn:last-child{display:none}
}