:root{
  --bg:#fbf9f4; --fg:#1c1a17; --mut:#6b665e; --line:#e6e0d4; --card:#fff;
  --acc:#0f6b52; --acc2:#c2831a; --ar:#12312a; --chip:#f1ede2;
  --i1:#e0a42e; --i2:#3f7d8c; --i3:#5b6bbf; --i4:#4d8a63; --i5:#b8862b; --i6:#7a5c8f;
  --rad:14px; --maxw:56rem;
  --hdr:56px;   /* fixed header height */
  --tab:0px;    /* bottom tab bar height — 0 on desktop, set at the breakpoint */
}
:root[data-theme=dark]{
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --ar:#dff3ec; --chip:#231f1b;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --ar:#dff3ec; --chip:#231f1b;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Noto Serif Bengali',system-ui,'Nirmala UI','Kalpurush',sans-serif;
  font-size:17.5px;line-height:1.85;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:color-mix(in srgb,var(--acc) 20%,transparent);
  /* clear the fixed header and (on phones) the fixed tab bar */
  padding-top:calc(var(--hdr) + env(safe-area-inset-top));
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
main{max-width:var(--maxw);margin:0 auto;
  padding:1rem max(1.1rem,env(safe-area-inset-left)) 4rem max(1.1rem,env(safe-area-inset-right))}
/* any in-page anchor must clear the fixed header when jumped to */
[id]{scroll-margin-top:calc(var(--hdr) + env(safe-area-inset-top) + .7rem)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--acc);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:99}
a{color:var(--acc);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}
h1,h2,h3,h4,h5{line-height:1.4;font-weight:700}
h1{font-size:1.85rem;margin:.2em 0 .5em}
h2{font-size:1.3rem;margin:2.2em 0 .6em;padding-bottom:.3em;border-bottom:2px solid var(--line)}
h3{font-size:1.1rem;margin:1.6em 0 .4em}
h4{font-size:1.02rem;margin:1.8em 0 .5em}
h5{font-size:.97rem;margin:1.4em 0 .4em;color:var(--mut)}
p{margin:.75em 0}
.muted{color:var(--mut);font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* ---- Arabic ---- */
.ar{font-family:'Amiri Quran','Scheherazade New','Traditional Arabic',serif;
  direction:rtl;unicode-bidi:isolate;color:var(--ar);font-size:1.28em;line-height:2.1}
.ar.lk{text-decoration:none;border-bottom:1px dotted var(--acc);padding-bottom:1px}
.ar.lk:hover{background:var(--chip);border-radius:4px}
.ar.big{font-size:1.7em;display:block;text-align:right;margin:.3em 0}
.ar.huge{font-size:3rem;text-align:center;line-height:1.8}
.ar.quran{font-size:2rem;text-align:center;line-height:2.35;margin:.6em 0;
  padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.ar-mix{direction:ltr}

/* ---- chrome: fixed header, and a bottom tab bar on phones ----------------
   --hdr / --tab are the single source of truth for how much space the fixed
   chrome occupies. Body padding, anchor scroll-margin and the sticky filter
   are all derived from them, so changing a height here fixes every page. */
.top{position:fixed;inset-inline:0;top:0;z-index:30;
  display:flex;gap:.6rem;align-items:center;
  height:calc(var(--hdr) + env(safe-area-inset-top));
  padding:0 max(.9rem,env(safe-area-inset-left)) 0 max(.9rem,env(safe-area-inset-right));
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.4rem;min-width:0;height:100%;font-weight:700;
  text-decoration:none;color:var(--fg);white-space:nowrap}
.brand .bt{overflow:hidden;text-overflow:ellipsis}
.brand .mark{filter:saturate(1.2);flex:none}
.nav-top{display:flex;gap:.15rem;flex:1;justify-content:flex-end;font-size:.87rem;min-width:0}
.nav-top a{display:inline-flex;align-items:center;gap:.32rem;padding:.45rem .6rem;border-radius:9px;
  text-decoration:none;color:var(--mut);white-space:nowrap}
.nav-top a:hover,.nav-top a.on{background:var(--chip);color:var(--fg)}
.theme{flex:none;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  font-size:1rem;min-width:40px;height:36px;color:var(--fg)}

/* bottom tab bar — hidden on desktop, shown at the mobile breakpoint */
/* Height is exactly --tab (border included, box-sizing:border-box) so that
   body's matching padding-bottom clears it to the pixel — no overlap. */
.tabbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:30;
  height:calc(var(--tab) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;
  height:100%;text-decoration:none;color:var(--mut);font-size:.68rem;line-height:1.25}
.tabbar a .ic{font-size:1.2rem;line-height:1}
.tabbar a.on{color:var(--acc);font-weight:600}
.tabbar a:active{background:var(--chip)}

.foot{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem 3rem;border-top:1px solid var(--line);color:var(--mut);font-size:.87rem}
.foot a{display:inline-block;padding:.4rem .1rem}
.crumb{font-size:.83rem;color:var(--mut);margin:.6rem 0 1.2rem}
.crumb a{color:var(--mut);display:inline-block;padding:.35rem .1rem}

/* ---- home ---- */
.hero{text-align:center;padding:1.5rem 0 1rem}
.hero h1{font-size:2.3rem;margin-bottom:.1em}
.lead{font-size:1.08rem;color:var(--mut)}
.intro{max-width:40rem;margin:1.2rem auto;text-align:right;text-align:start}
.stat-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.stat-row div{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.6rem 1rem;min-width:5rem}
.stat-row b{display:block;font-size:1.4rem;color:var(--acc)}
.stat-row span{font-size:.8rem;color:var(--mut)}
.cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:.6rem 1.3rem;border-radius:999px;
  text-decoration:none;font-weight:600}
.btn.ghost{background:var(--chip);color:var(--fg)}
.map{margin-top:2rem}
.island{margin:2rem 0;padding:1.1rem;border:1px solid var(--line);border-radius:var(--rad);background:var(--card)}
.island h2{margin-top:0;border:0;padding:0}
.island .shield{font-size:.85rem;color:var(--acc2);margin:.2rem 0 0}
.week{margin:1rem 0}
.wk-n{font-size:.8rem;color:var(--mut);margin-bottom:.3rem}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.4rem}
/* min-width:0 on both the grid item and the flex child — without it the
   nowrap title sets the track's min size and blows the grid past the
   viewport on narrow phones (grid/flex children default to min-width:auto). */
.node{display:flex;gap:.5rem;align-items:center;min-width:0;padding:.45rem .6rem;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--fg);font-size:.82rem;line-height:1.35}
.node:hover{border-color:var(--acc);background:var(--chip)}
.node .n{flex:none;font-weight:700;color:var(--acc);min-width:1.6em;text-align:center}
.node .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node.revision{border-style:dashed}
.i1 .node .n{color:var(--i1)} .i2 .node .n{color:var(--i2)} .i3 .node .n{color:var(--i3)}
.i4 .node .n{color:var(--i4)} .i5 .node .n{color:var(--i5)} .i6 .node .n{color:var(--i6)}

/* ---- class ---- */
.class-head{margin-bottom:1.5rem}
.eyebrow{font-size:.82rem;color:var(--mut);margin:0}
.class-head h1{margin:.1em 0}
.cnum{display:block;font-size:.8rem;color:var(--acc);font-weight:600;letter-spacing:.04em}
.story p{margin:.9em 0}
.dream{position:relative;border-top:1px dashed var(--line);margin:2.2em 0}
.dream::after{content:"⋆ ⋆ ⋆";position:absolute;top:-.85em;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 .8rem;color:var(--mut);font-size:.8rem;letter-spacing:.3em}
blockquote{margin:1.2em 0;padding:.6em 1em;border-inline-start:3px solid var(--acc2);
  background:var(--chip);border-radius:0 var(--rad) var(--rad) 0}
.big-note{text-align:center;color:var(--acc2)}
ul.check{list-style:none;padding-inline-start:0}
ul.check li::before{content:"☐ ";color:var(--mut)}
.formula{margin:1em 0;padding:.8em 1em;background:var(--chip);border-radius:var(--rad);border:1px dashed var(--line)}
.formula .lbl{display:block;font-size:.78rem;color:var(--mut);margin-bottom:.2em}
.tryit,.punch,.why{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.8em 1em}
.src{font-size:.8rem;color:var(--mut)}
.badge{margin-top:1rem;padding:.9em 1.1em;background:linear-gradient(180deg,var(--chip),transparent);
  border:1px solid var(--acc2);border-radius:var(--rad);font-weight:600;white-space:pre-line}
.ayah{margin:2rem 0;padding-top:.5rem}
.akey{float:inline-end;font-size:.72rem;color:var(--mut);font-weight:400}
.ayah-meta{background:var(--chip);border-radius:var(--rad);padding:.7em 1em;margin:.6em 0}
.ayah-meta p{margin:.3em 0;font-size:.95em}

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  margin:.8em 0;border:1px solid var(--line);border-radius:var(--rad)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card)}
th,td{padding:.55em .7em;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--chip);font-size:.8rem;color:var(--mut);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}
.c-ar{text-align:center;min-width:5.5rem}
.c-pr{white-space:nowrap}
.c-en{color:var(--mut);font-size:.87em}
.c-hk{font-size:.87em;min-width:13rem}
.c-num{text-align:center;white-space:nowrap}

/* ---- ladder ---- */
.ladder{margin:1.2rem 0;padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.ladder h5{margin-top:0}
.note{font-size:.88rem;color:var(--mut)}
.drill{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.drill button{font:inherit;font-size:.83rem;padding:.3rem .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.drill button:hover{border-color:var(--acc)}
.drill button[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
.steps{list-style:none;padding:0;margin:.8rem 0 0;counter-reset:s}
.step{padding:.7rem 0;border-top:1px dashed var(--line)}
.step-n{font-size:.78rem;color:var(--acc);font-weight:700}
.pron{font-size:.92rem}
.mean{font-size:.92rem;color:var(--mut)}
.tick{display:block;font-size:.82rem;color:var(--mut);margin-top:.3rem;cursor:pointer}
.hidden-txt{filter:blur(6px);opacity:.45;transition:.15s;cursor:pointer}
.hidden-txt:hover{filter:none;opacity:1}
.two-way{margin-top:1rem;font-size:.88rem;color:var(--mut)}
.two-way ol{margin:.4em 0}

/* ---- links panel / chips ---- */
.links{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1rem;margin-top:2.5rem}
.links h2{margin-top:0;border:0;padding:0;font-size:1.05rem}
.links h3{font-size:.85rem;color:var(--mut);text-transform:none;margin:1rem 0 .4rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{display:inline-flex;gap:.4rem;align-items:center;padding:.28rem .7rem;border-radius:999px;
  background:var(--chip);border:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:.84rem}
.chip:hover{border-color:var(--acc)}
.chip .ar{font-size:1.1em}
.chip .gl{color:var(--mut);font-size:.9em}
a.xref{white-space:nowrap}

/* ---- pager ---- */
.pager{display:flex;justify-content:space-between;gap:.6rem;margin:2.5rem 0 0}
.pager a{flex:1;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--rad);
  text-decoration:none;background:var(--card);font-weight:600;font-size:.9rem}
.pager a:hover{border-color:var(--acc)}
.pager .next{text-align:end}
.pager a span{display:block;font-weight:400;font-size:.8rem;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- word page ---- */
.word-head{text-align:center;padding:1rem 0 .5rem}
.gloss{font-size:1.1rem;margin:.2em 0}
.forms{font-size:.9rem;color:var(--mut)}
.hook{background:var(--chip);border-radius:var(--rad);padding:.8em 1em}
.hook h2{margin:0 0 .3em;border:0;padding:0;font-size:.95rem}
.stats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.stats div{flex:1;min-width:8rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:.6rem .8rem}
.stats .k{display:block;font-size:.76rem;color:var(--mut)}
.stats .v{font-weight:700}
.en-line{margin:.35em 0;font-size:1rem}
.en-line .lbl{display:inline-block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem;margin-inline-end:.45rem}
.en-line .en{color:var(--fg)}
.en-line .sep{color:var(--mut);margin:0 .4rem}
.sm{font-size:.85em}
.memo{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.9rem 1.1rem;margin:1.2rem 0}
.memo h2{margin:0 0 .4rem;border:0;padding:0;font-size:1rem}
.memo ul{margin:0;padding-inline-start:1.1rem}
.memo li{margin:.4em 0}
.warn{background:color-mix(in srgb,var(--acc2) 10%,var(--card));border:1px solid var(--acc2);
  border-radius:var(--rad);padding:.9rem 1.1rem;margin:1.2rem 0}
.warn h2{margin:0 0 .2rem;border:0;padding:0;font-size:1rem}
.chunk-list{list-style:none;padding:0;margin:.6rem 0}
.chunk-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.chunk-list .ar{font-size:1.35em}
.chunk-list .gl{color:var(--mut);font-size:.88rem}
.vrefs{display:flex;flex-wrap:wrap;gap:.25rem;min-width:0}
.vref{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;
  padding:0 .35rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  text-decoration:none;font-size:.82rem}
.vref:hover{border-color:var(--acc);background:var(--chip)}
table.refs td{vertical-align:top}
tr.incomplete td:first-child{color:var(--acc2)}
.ayah-list,.prose-list{list-style:none;padding:0}
.ayah-list li{border-bottom:1px solid var(--line);padding:.6rem 0}
.ayah-list a{text-decoration:none;display:block}
.ayah-list .src{display:block;font-size:.8rem;color:var(--mut)}
.prose-list li{border-bottom:1px solid var(--line);padding:.55rem 0;font-size:.9rem}
.tag{display:inline-block;font-size:.72rem;background:var(--chip);border-radius:6px;padding:.05rem .45rem;margin:0 .35rem;color:var(--mut)}
.snip{color:var(--mut)}

/* ---- index / search ---- */
.page-head{margin-bottom:1rem}
/* 16px minimum, or iOS Safari zooms the whole page on focus.
   Sticky so the box stays reachable while scrolling 1315 word rows; the
   box-shadow paints a solid slab of --bg over the gap under the header. */
.filter{width:100%;font:inherit;font-size:max(1rem,16px);padding:.7rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--fg);margin:.6rem 0;
  position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top) + .6rem);z-index:12;
  box-shadow:0 0 0 .6rem var(--bg)}
.filter.big{font-size:max(1.15rem,16px);padding:.85rem 1.2rem}
.filter:focus{outline:2px solid var(--acc);outline-offset:1px}
table.index td{padding:.4em .6em}
.results{margin-top:1rem}
.hit{display:block;padding:.7rem .9rem;margin-bottom:.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);text-decoration:none;color:var(--fg)}
.hit:hover{border-color:var(--acc)}
.hit .h1{font-weight:700}
.hit .h2{font-size:.8rem;color:var(--mut)}
.hit .h3{font-size:.87rem;color:var(--mut);margin-top:.2rem}
.hit mark{background:color-mix(in srgb,var(--acc2) 35%,transparent);color:inherit;border-radius:3px}
.kind{display:inline-block;font-size:.7rem;padding:.05rem .45rem;border-radius:6px;
  background:var(--chip);color:var(--mut);margin-inline-end:.4rem}

/* ---- threads ---- */
.thread{margin:2rem 0;padding:1.1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.thread h2{margin-top:0;border:0;padding:0;font-size:1.15rem}
.timeline{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.timeline a{display:flex;flex-direction:column;padding:.5rem .8rem;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--fg);font-size:.82rem;background:var(--bg);min-width:8rem}
.timeline a:hover{border-color:var(--acc)}
.timeline span:last-child{color:var(--mut);font-size:.78rem}
.prose ol,.prose ul{padding-inline-start:1.3rem}

/* ---- tablet ---- */
@media(max-width:900px){
  .nav-top a .lb{display:none}          /* icons only — keeps one row, never wraps */
  .nav-top a{padding:.45rem .5rem;font-size:1.05rem}
}

/* ---- phone: header shrinks, nav moves to a fixed bottom bar ---- */
@media(max-width:760px){
  :root{--hdr:52px; --tab:58px}
  .nav-top{display:none}
  .tabbar{display:flex}
  body{font-size:16.5px;line-height:1.8}
  main{padding:.75rem max(.85rem,env(safe-area-inset-left)) 2.5rem max(.85rem,env(safe-area-inset-right))}
  h1{font-size:1.5rem}
  h2{font-size:1.16rem;margin:1.8em 0 .5em}
  h3{font-size:1.04rem}
  .hero{padding:1rem 0 .5rem}
  .hero h1{font-size:1.85rem}
  .lead{font-size:1rem}

  /* Arabic has to stay large enough to read the harakat, but must not overflow */
  .ar.quran{font-size:1.5rem;line-height:2.15;padding:.75rem .6rem}
  .ar.huge{font-size:2.3rem}
  .ar.big{font-size:1.45em}

  /* roomier tap targets — a 9-year-old's thumb, not a mouse pointer */
  .node{min-height:46px;font-size:.85rem}
  .chip{min-height:38px}
  .drill button{min-height:40px;padding:.45rem .95rem}
  .btn{padding:.7rem 1.4rem}
  .tick{display:inline-block;padding:.3rem 0;min-height:34px}

  .nodes{grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr))}
  .island,.links,.thread,.ladder{padding:.85rem .7rem}
  .stat-row div{flex:1 1 27%;min-width:4.2rem;padding:.5rem .6rem}
  .stat-row b{font-size:1.2rem}
  .stats div{min-width:6.5rem}
  .timeline a{min-width:0;flex:1 1 46%}
  .pager{flex-direction:column}
  .pager .next{text-align:start}

  /* Tables become stacked cards -- a 5-column word table cannot be read by
     side-scrolling on a phone. Each row turns into a labelled card, so the
     English gloss can finally be shown instead of hidden. */
  .tbl-wrap.has-stack{overflow:visible;border:0;border-radius:0;background:none}
  /* the <table> box itself must stop being a table, or it keeps sizing to
     content and overflows however block-y the rows are */
  table.stack,table.stack tbody{display:block;width:100%;max-width:100%}
  table.stack{background:none;font-size:1rem}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.stack tr{display:block;margin:0 0 .55rem;padding:.6rem .8rem;background:var(--card);
    border:1px solid var(--line);border-radius:var(--rad)}
  table.stack td{display:flex;gap:.6rem;align-items:baseline;padding:.18rem 0;border:0;text-align:start}
  table.stack td::before{content:attr(data-label);flex:none;width:5.2rem;color:var(--mut);
    font-size:.74rem;line-height:1.7}
  table.stack td:empty{display:none}
  /* flex children default to min-width:auto -- without this the 30 verse
     chips of Surah al-Mulk refuse to wrap and push the page wide */
  table.stack td>*{min-width:0;max-width:100%}
  table.stack td.c-ar{display:block;text-align:center;margin-bottom:.2rem}
  table.stack td.c-ar::before{display:none}
  table.stack td.c-ar .ar{font-size:1.7em}
  table.stack td.c-num,table.stack td.c-hk{font-size:.9rem}
  table.stack .vrefs{flex:1}
  .c-hk{min-width:9rem}
  blockquote{padding:.5em .8em}
  .foot{padding:1.5rem .85rem 2rem;text-align:center}
}

/* ---- very narrow (360px and below) ---- */
@media(max-width:380px){
  .brand{font-size:.95rem}              /* title stays — the header only holds brand + theme here */
  .ar.quran{font-size:1.35rem}
  .nodes{grid-template-columns:1fr 1fr}
  .tabbar a{font-size:.63rem}
}

/* ---- landscape phone: reclaim vertical space ---- */
@media(max-height:480px) and (orientation:landscape){
  :root{--hdr:46px; --tab:46px}
  .tabbar a .lb{display:none}
  .tabbar a .ic{font-size:1.3rem}
}

@media print{
  .top,.foot,.pager,.drill,.nav-top,.tabbar,.theme,.links{display:none}
  body{background:#fff;font-size:11pt;padding:0}
  .filter{position:static;box-shadow:none}
  .ar.quran{border:0;background:none}
  a{color:#000;text-decoration:none}
}