/*
Theme Name: Alyph Academy
Theme URI: https://alyphacademy.org/
Author: Alyph Academy
Description: Custom theme for Alyph Academy — free classical Islamic studies. Lesson post type with Arabic text, transliteration, translation, reading notes and a verification block that states honestly whether a lesson has been reviewed.
Version: 1.18.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alyph
*/

/* ============================================================
   TOKENS — brand taken from the supplied artwork, not guessed.
   The logo's red is #FE3A3B and its ink is #383946, sampled from
   the transparent PNGs. --red is the graphic red and matches the
   mark exactly; --red-dk is the *text* red, because #FE3A3B on
   white is 3.6:1 and fails WCAG AA for body copy.
   ============================================================ */
:root{
  --red:#FE3A3B; --red-dk:#C62828; --red-wash:#FEECEC;
  --logo-ink:#383946;
  --ink:#09090B; --ink-2:#3F3F46; --ink-3:#71717A;
  --paper:#FFFFFF; --raise:#F5F5F5; --line:#E4E4E7; --line-2:#D4D4D8;
  --bar:#111113; --bar-ink:#FAFAFA; --bar-ink-2:#A1A1AA; --bar-line:#27272A;
  --gold:#A16207; --gold-wash:#FEF9EC; --gold-line:#D4AF37;
  --ok:#15803D;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --arabic:"Amiri","Traditional Arabic",serif;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4F4F5; --ink-2:#C4C4CA; --ink-3:#8E8E97;
    --paper:#0B0B0D; --raise:#17171A; --line:#26262A; --line-2:#3A3A40;
    --bar:#000000; --bar-ink:#FAFAFA; --bar-ink-2:#A1A1AA; --bar-line:#1F1F23;
    --red:#FF5B55; --red-dk:#FF7A75; --red-wash:#2A1210;
    --gold:#D4AF37; --gold-wash:#241D0C; --gold-line:#6B5518;
    --ok:#4ADE80;
  }
}
:root[data-theme="dark"]{
  --ink:#F4F4F5; --ink-2:#C4C4CA; --ink-3:#8E8E97;
  --paper:#0B0B0D; --raise:#17171A; --line:#26262A; --line-2:#3A3A40;
  --bar:#000000; --bar-ink:#FAFAFA; --bar-ink-2:#A1A1AA; --bar-line:#1F1F23;
  --red:#FF5B55; --red-dk:#FF7A75; --red-wash:#2A1210;
  --gold:#D4AF37; --gold-wash:#241D0C; --gold-line:#6B5518;
  --ok:#4ADE80;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--paper);padding:.6rem 1rem;
  border:1px solid var(--red);border-radius:4px}

/* ---------- header: dark, because the wordmark is white ----------
   Khan Academy's arrangement — one Explore control on the left, the
   wordmark centred, search on the right. The bar does not grow as the
   site does; Explore absorbs everything.                             */
.site-head{background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--bar-line);
  position:sticky;top:0;z-index:30}
/* When logged in, WordPress's own fixed admin bar sits over the sticky header
   and clips the wordmark. Offset by its real height at each of WP's own
   breakpoints; below 600px the admin bar stops being fixed, so the offset goes. */
body.admin-bar .site-head{top:32px}
@media screen and (max-width:782px){ body.admin-bar .site-head{top:46px} }
@media screen and (max-width:600px){ body.admin-bar .site-head{top:0} }
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-height:76px}
@media (max-width:900px){ .bar{min-height:60px} }
.bar-l{justify-self:start}
.bar-r{justify-self:end}

.explore-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;
  border:1px solid transparent;border-radius:5px;color:var(--bar-ink);font-size:.94rem;
  font-weight:500;padding:.45rem .75rem;line-height:1}
.explore-btn:hover{background:rgba(255,255,255,.07)}
.explore-btn .chev{font-size:.75rem;color:var(--bar-ink-2);transition:transform .16s}
.explore-btn[aria-expanded="true"]{background:rgba(255,255,255,.09)}
.explore-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---------- the stacked lockup ----------
   ACADEMY sits UNDER the ALYPH wordmark and is measured to its width.

   Two constants, both measured off the artwork rather than guessed:
     • the ALYPH lettering ends at 64.4% of the image width — the rest of
       the box is the red mark. 0.644 x 2.811 (the image's aspect) = 1.81,
       so the wordmark is 1.81 x the image height wide.
     • the lettering is 23.4% of the image height. A cap height that
       matches it needs a font-size of about 0.325 x the image height,
       since cap height runs near 0.72em.

   Both fall out of one variable, so changing --logo-h rescales the whole
   lockup correctly at every breakpoint.

   The ALYPH wordmark is drawn artwork and its typeface is not something
   we hold. Chakra Petch is the closest free face — squared counters,
   clipped corners, same broad temperament. Swap --lockup-face if the
   original font ever turns up.                                        */
:root{ --lockup-face:"Chakra Petch","Roboto",system-ui,sans-serif; }

.brand{display:grid;justify-items:center;gap:.16rem;color:var(--bar-ink);justify-self:center;
  padding:.34rem 0}
.brand-lock{--logo-h:40px;display:block;position:relative}
.brand-logo{height:var(--logo-h);width:auto;display:block}
.brand-sub{display:block;width:calc(var(--logo-h) * 1.81);
  font-family:var(--lockup-face);font-weight:700;
  font-size:calc(var(--logo-h) * 0.325);letter-spacing:.145em;
  text-transform:uppercase;line-height:1;color:var(--bar-ink);
  margin-top:calc(var(--logo-h) * 0.06);text-indent:.02em;
  white-space:nowrap}

.brand-tag{display:flex;align-items:baseline;gap:.55rem;color:var(--bar-ink-2);line-height:1.2}
/* The letterhead sets the tagline in a serif. Amiri is already loaded for the
   Arabic and carries a Roman, so both halves share one voice. */
.brand-tag .tag-en{font-family:var(--arabic);font-size:.8rem;letter-spacing:.02em}
.brand-tag .tag-ar{font-family:var(--arabic);font-size:.86rem}

@media (max-width:900px){
  .brand-tag{display:none}
  .brand-lock{--logo-h:34px}
}
@media (max-width:620px){
  .brand-lock{--logo-h:27px}
  .brand-sub{letter-spacing:.11em}
  .site-head form.s input{width:6.2rem;max-width:23vw;padding:.3rem .45rem}
  .explore-btn{padding:.4rem .5rem;font-size:.88rem}
  .explore-btn .burger{display:none}
}
@media (max-width:390px){
  .site-head form.s input{display:none}
}

/* the Explore burger */
.explore-btn .burger{display:inline-flex;flex-direction:column;gap:3px;width:15px}
.explore-btn .burger i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s,opacity .18s}
.explore-btn .burger i:nth-child(2){width:70%}
.explore-btn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.explore-btn[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.explore-btn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- the Explore panel ---------- */
.explore{background:var(--bar);border-top:1px solid var(--bar-line);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.55)}
.explore-grid{display:grid;gap:2rem;grid-template-columns:1fr;
  padding-top:1.9rem;padding-bottom:2.1rem}
@media(min-width:860px){.explore-grid{grid-template-columns:1.35fr 1fr 1fr;gap:2.6rem}}
.ex-col{min-width:0}
.ex-h{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bar-ink-2);
  font-weight:600;margin:0 0 .9rem;max-width:none}
.ex-lead{display:block;padding:.55rem .7rem;margin:0 -.7rem .35rem;border-radius:6px}
.ex-lead:hover{background:rgba(255,255,255,.06)}
.ex-title{display:block;color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.ex-sub{display:block;color:var(--bar-ink-2);font-size:.84rem;margin-top:.12rem;line-height:1.4}
.ex-list{list-style:none;margin:.7rem 0 0;padding:0;border-top:1px solid var(--bar-line)}
.ex-list li{border-bottom:1px solid var(--bar-line)}
.ex-list a{display:flex;gap:.7rem;align-items:baseline;padding:.5rem .7rem;margin:0 -.7rem;
  color:var(--bar-ink-2);font-size:.9rem}
.ex-list a:hover{color:#fff;background:rgba(255,255,255,.06)}
.ex-num{font-size:.72rem;color:var(--bar-ink-2);font-variant-numeric:tabular-nums;flex:none}
.ex-note{color:var(--bar-ink-2);font-size:.8rem;margin:1rem 0 0;max-width:34ch;line-height:1.5}

/* ---------- notice strip ---------- */
.strip{background:var(--red-wash);border-bottom:1px solid var(--line);color:var(--ink-2);
  padding:.65rem 0;font-size:.84rem;text-align:center}
.strip b{color:var(--red-dk)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.8rem,7vw,5rem) 0 clamp(2.2rem,5vw,3.2rem);border-bottom:1px solid var(--line)}
.hero h1{font-weight:800;font-size:clamp(2.1rem,5.6vw,3.7rem);line-height:1.05;
  letter-spacing:-.025em;margin:0;max-width:16ch;text-wrap:balance}
.hero h1 .accent{color:var(--red)}
.hero .lede{font-size:clamp(1.02rem,2vw,1.2rem);line-height:1.55;color:var(--ink-2);
  max-width:56ch;margin:1.35rem 0 0}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.pill{font-size:.78rem;padding:.32rem .75rem;border-radius:999px;background:var(--raise);
  color:var(--ink-2);font-weight:500;border:1px solid var(--line-2)}
.cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}
.btn{display:inline-block;padding:.68rem 1.35rem;border-radius:5px;font-size:.93rem;
  font-weight:600;border:1px solid var(--red);background:var(--red);color:#fff;
  transition:filter .15s;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--red)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- bands ---------- */
.band{padding:clamp(2.4rem,5.5vw,3.6rem) 0;border-bottom:1px solid var(--line)}
.kicker{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .85rem}
h2{font-weight:800;font-size:clamp(1.5rem,3.2vw,2.05rem);line-height:1.18;letter-spacing:-.02em;
  margin:0 0 1rem;text-wrap:balance;max-width:26ch}
h3{font-weight:700;font-size:1.16rem;margin:0 0 .5rem;letter-spacing:-.01em}
p{margin:0 0 1rem;max-width:66ch}
.grid3{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.grid3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:1.3rem}
.card p{font-size:.92rem;color:var(--ink-2);margin:0}
.card .mark{font-family:var(--arabic);font-size:1.5rem;color:var(--red);line-height:1;margin-bottom:.55rem}

/* ---------- lesson index ---------- */
.idx{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
.row{display:grid;grid-template-columns:2.9rem 1fr;gap:.35rem 1rem;align-items:baseline;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line);width:100%;text-align:left}
.idx > :last-child{border-bottom:0}
.row .num{font-size:.77rem;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.row .ttl{font-weight:700;font-size:1.02rem;line-height:1.3}
.row .sub{grid-column:2;font-size:.79rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.25rem .9rem}
a.row:hover{background:var(--raise)}
a.row .ttl{color:var(--red)}
.row.soon .ttl{color:var(--ink-3);font-weight:500}
.tag{font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;padding:.1rem .45rem;
  border-radius:3px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.tag.live{color:var(--ok);border-color:currentColor}

/* ---------- lesson ---------- */
.crumb{font-size:.83rem;color:var(--ink-3);margin-bottom:1rem}
.crumb a{color:var(--red)}
.lesson-title{font-weight:800;font-size:clamp(1.6rem,3.8vw,2.3rem);line-height:1.15;
  margin:0 0 .4rem;letter-spacing:-.022em}
.meta-row{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.82rem;color:var(--ink-3);
  margin-bottom:1.8rem}
.arabic{font-family:var(--arabic);font-size:1.55rem;line-height:2.2;direction:rtl;text-align:right;
  background:var(--raise);border:1px solid var(--line);border-right:4px solid var(--red);
  border-radius:8px;padding:1.5rem 1.7rem;margin:0}
.translit{font-style:italic;font-size:1rem;line-height:1.72;color:var(--ink-3);max-width:66ch;
  margin:.9rem 0 0;padding-left:1rem;border-left:2px solid var(--line-2)}
.trans{font-size:1.1rem;line-height:1.7;color:var(--ink);max-width:64ch;margin:1.3rem 0 .5rem}
.trans-note{font-size:.8rem;color:var(--ink-3);max-width:64ch;margin:0 0 1.7rem}
.video{aspect-ratio:16/9;background:var(--raise);border:1px dashed var(--line-2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;
  color:var(--ink-3);font-size:.88rem;margin:0 0 1.7rem;text-align:center;padding:1rem}
.video .play{width:50px;height:50px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  color:var(--ink-3)}
.points{list-style:none;padding:0;margin:0 0 1.7rem;max-width:66ch}
.points li{padding:.88rem 0 .88rem 1.9rem;border-bottom:1px solid var(--line);position:relative;
  font-size:.96rem;color:var(--ink-2)}
.points li:last-child{border-bottom:0}
.points li::before{content:"";position:absolute;left:.3rem;top:1.48rem;width:6px;height:6px;
  border-radius:50%;background:var(--red)}
.points li strong{color:var(--ink)}
.ar-inline{font-family:var(--arabic);font-size:1.12em}
/* A line of Arabic set on its own inside a reading note — used by the grammar
   lessons, where the sentence under analysis has to stand clear of the prose. */
.ar-block{display:block;font-family:var(--arabic);font-size:1.7rem;line-height:2;
  text-align:center;margin:1.1rem 0;padding:.9rem 1rem;border-radius:10px;
  background:var(--red-wash);color:var(--ink)}
@media (max-width:520px){.ar-block{font-size:1.35rem;padding:.7rem}}
.verify{background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:8px;
  padding:1.1rem 1.25rem;font-size:.87rem;color:var(--ink-2);max-width:66ch;margin:0 0 1.7rem}
.verify .lbl{color:var(--gold);display:block;font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:.7rem;font-weight:700}
.verify dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin:0}
.verify dt{color:var(--ink-3);font-size:.79rem;white-space:nowrap}
.verify dd{margin:0}
.verify .foot{margin:.9rem 0 0;font-size:.81rem;color:var(--ink-3);max-width:none}
.verify a{color:var(--gold);text-decoration:underline}
.variant{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  overflow-x:auto;margin:0 0 1.7rem}
.variant table{border-collapse:collapse;width:100%;font-size:.89rem;min-width:34rem}
.variant th,.variant td{text-align:left;padding:.66rem .95rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.variant tr:last-child td{border-bottom:0}
.variant th{font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;background:var(--raise)}
.variant td.ar{font-family:var(--arabic);font-size:1.14rem;direction:rtl;text-align:right;white-space:nowrap}
.caption{font-size:.81rem;color:var(--ink-3);max-width:66ch;margin:-1.1rem 0 1.7rem}
.navrow{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;padding-top:.5rem}
.navrow .spacer{margin-left:auto}
.panel{background:var(--raise);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:8px;padding:1.4rem 1.5rem;max-width:66ch;margin:1.3rem 0}
.panel p:last-child{margin-bottom:0}
.empty{border:1px dashed var(--line-2);border-radius:8px;padding:1.5rem;color:var(--ink-3);
  font-size:.93rem;max-width:66ch;background:var(--raise)}
.pad{padding-top:2.2rem;padding-bottom:3.4rem}
.entry a{color:var(--red);text-decoration:underline}

/* ---------- footer ---------- */
.foot-brand{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1.5rem;
  padding:0 0 1.4rem;border-bottom:1px solid var(--bar-line)}
.foot-logo{height:46px;width:auto;display:block}
.foot-tag{display:flex;align-items:baseline;gap:.55rem;color:var(--bar-ink-2);
  font-family:var(--arabic);font-size:.88rem;transform:translateY(4px)}
.foot-tag span{font-size:1.02rem}

.site-foot{background:var(--bar);color:var(--bar-ink-2);padding:2.4rem 0 3rem;font-size:.85rem}
.site-foot a{color:#fff}
.site-foot p{max-width:64ch;margin:0 0 .7rem}
.site-foot .legal{font-size:.8rem;color:var(--bar-ink-2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   RESOURCES — a shelf of bibliographic records, not book covers.
   Deliberately imageless: an edition is text, and a cover
   thumbnail would say less than the imprint line does.
   ============================================================ */
.legend{display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;align-items:baseline;
  margin:1.3rem 0 1.9rem;font-size:.82rem;color:var(--ink-3);max-width:46ch;
  padding:.9rem 1.05rem;border:1px solid var(--line);border-radius:6px;background:var(--raise)}
.legend .chip{justify-self:start}
.chip{font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;padding:.13rem .5rem;
  border-radius:3px;border:1px solid currentColor;white-space:nowrap;font-weight:500}
.chip.hosted{color:var(--ok)}
.chip.linked{color:var(--gold)}
.chip.cited{color:var(--ink-3)}

.shelf{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rec{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.rec-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.rec-head h3{margin:0;font-size:1.18rem;letter-spacing:-.012em}
.rec-ar{font-family:var(--arabic);font-size:1.3rem;line-height:1.9;direction:rtl;text-align:right;
  color:var(--ink-2);margin:.3rem 0 0;max-width:none}
.rec-author{margin:.35rem 0 0;color:var(--ink-2);font-size:.95rem;max-width:60ch}
.rec-imprint{margin:.2rem 0 0;color:var(--ink-3);font-size:.88rem;font-style:italic;max-width:60ch}
.rec-meta{display:grid;grid-template-columns:auto 1fr;gap:.22rem .8rem;margin:.85rem 0 0;
  font-size:.85rem;max-width:60ch}
.rec-meta dt{color:var(--ink-3);white-space:nowrap}
.rec-meta dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rec-note{margin:.85rem 0 0;font-size:.93rem;color:var(--ink-2);max-width:64ch}
.rec-note p{margin:0 0 .6rem}
.rec-note p:last-child{margin:0}
.rec-rights{margin:.85rem 0 0;font-size:.86rem;color:var(--ink-2);max-width:64ch;
  padding-left:.9rem;border-left:2px solid var(--line-2)}
.rec-rights span{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:.15rem}
.rec-get{margin:1rem 0 0}

/* ---- search ---- */
.site-head form.s{display:flex;align-items:center}
.site-head form.s input{background:transparent;border:1px solid var(--bar-line);border-radius:4px;
  color:var(--bar-ink);font:inherit;font-size:.85rem;padding:.34rem .6rem;width:10rem;max-width:34vw}
.site-head form.s input::placeholder{color:var(--bar-ink-2)}
.site-head form.s input:focus{border-color:var(--red);outline:none}
.results{border-top:1px solid var(--line);margin-top:1.4rem}
.result{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.result h3{margin:0 0 .2rem}
.result h3 a{color:var(--red)}
.result .where{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.result p{margin:.35rem 0 0;font-size:.93rem;color:var(--ink-2)}

/* ============================================================
   PEOPLE — author and reviewer, kept visibly separate.
   ============================================================ */
.byline{margin:-.9rem 0 1.9rem;padding:.85rem 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.byline p{margin:0;max-width:none}
.byline .by{font-size:.92rem;color:var(--ink-2)}
.byline .by a{color:var(--red);font-weight:500}
.byline .sep{color:var(--line-2);margin:0 .35rem}
.byline .reviewed{color:var(--ok);font-weight:500}
.byline .reviewed a{color:var(--ok)}
.byline .unreviewed{color:var(--ink-3);font-style:italic}
.byline .dates{font-size:.79rem;color:var(--ink-3);margin-top:.3rem}
.byline .hijri{font-family:var(--arabic);font-size:.92rem}
.byline .updated{display:inline-block;margin-left:.5rem;padding:.05rem .4rem;border-radius:3px;
  background:var(--gold-wash);color:var(--gold);font-weight:500}

.creds{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0;font-size:.9rem;max-width:64ch}
.creds.compact{font-size:.85rem}
.creds dt{color:var(--ink-3);white-space:nowrap;font-size:.78rem;padding-top:.1rem}
.creds dd{margin:0;color:var(--ink-2)}
.cred-none{color:var(--ink-3);font-style:italic;font-size:.9rem}

.p-role{color:var(--red);font-weight:500;font-size:.95rem;margin:.2rem 0 0}
.p-ar{font-family:var(--arabic);font-size:1.5rem;direction:rtl;text-align:right;color:var(--ink-2);
  margin:.3rem 0 0;max-width:none}

.people{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:1.5rem}
.person{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.person h3{margin:0}
.person h3 a{color:var(--red)}
.person .creds{margin-top:.8rem}

.reviewer-card{background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:8px;padding:1.15rem 1.3rem;max-width:66ch;margin:0 0 1.5rem}
.reviewer-card .rc-h{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ok);
  font-weight:600;margin:0 0 .5rem}
.reviewer-card h3{margin:0;font-size:1.08rem}
.reviewer-card h3 a{color:var(--ink)}
.reviewer-card .creds{margin-top:.7rem}

.disclaimer{font-size:.82rem;color:var(--ink-3);max-width:66ch;margin:0 0 1.6rem;
  padding-left:.9rem;border-left:2px solid var(--line-2);line-height:1.6}

ul.plain{list-style:none;padding:0;margin:.6rem 0 0;max-width:60ch}
ul.plain li{padding:.45rem 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain a{color:var(--red)}

/* ---- contribute page ---- */
.ask{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.5rem 0}
@media(min-width:780px){.ask{grid-template-columns:1fr 1fr}}
.ask .box{border:1px solid var(--line);border-radius:8px;padding:1.2rem 1.3rem;background:var(--card)}
.ask .box h3{margin-bottom:.4rem}
.ask .box p{font-size:.93rem;color:var(--ink-2);margin:0}
.steps{list-style:none;counter-reset:s;padding:0;margin:1.3rem 0 0;max-width:68ch}
.steps li{counter-increment:s;position:relative;padding:.9rem 0 .9rem 2.5rem;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.9rem;font-size:.78rem;font-weight:600;
  color:var(--red);border:1px solid var(--line-2);width:1.6rem;height:1.6rem;display:flex;
  align-items:center;justify-content:center;border-radius:3px}
.steps strong{display:block;margin-bottom:.15rem}
.steps p{font-size:.92rem;color:var(--ink-2);margin:0}

/* ============================================================
   v1.5.0 — the built-out site
   Courses, subjects, the library, support, the board.
   The visual register stays scholarly: the energy comes from
   structure, numbering, colour used sparingly, and motion on
   hover — not from decoration competing with the Arabic.
   ============================================================ */

/* ---------- search field, now with a button ---------- */
.site-head form.s{display:flex;align-items:center;gap:.3rem;
  border:1px solid var(--bar-line);border-radius:999px;padding:.16rem .16rem .16rem .7rem;
  transition:border-color .16s,background .16s}
.site-head form.s:focus-within{border-color:var(--red);background:rgba(255,255,255,.04)}
.site-head form.s input{background:transparent;border:0;color:var(--bar-ink);font:inherit;
  font-size:.85rem;padding:.3rem 0;width:12.5rem;max-width:30vw}
.site-head form.s input:focus{outline:none}
.site-head form.s input::placeholder{color:var(--bar-ink-2)}
.site-head form.s button{display:grid;place-items:center;width:27px;height:27px;flex:none;
  border:0;border-radius:999px;background:var(--red);color:#fff;cursor:pointer}
.site-head form.s button:hover{filter:brightness(1.08)}

/* ---------- Explore: subject list ---------- */
.explore-grid{grid-template-columns:1fr}
@media(min-width:960px){.explore-grid{grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem}}
.ex-subj{list-style:none;margin:.8rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--bar-line);
  border:1px solid var(--bar-line);border-radius:8px;overflow:hidden}
@media(min-width:560px){.ex-subj{grid-template-columns:1fr 1fr}}
.ex-subj li{background:var(--bar)}
.ex-subj a{display:flex;align-items:baseline;gap:.5rem;padding:.6rem .75rem;
  transition:background .14s}
.ex-subj a:hover{background:rgba(255,255,255,.07)}
.ex-sname{color:#fff;font-weight:500;font-size:.92rem}
.ex-sar{font-family:var(--arabic);color:var(--bar-ink-2);font-size:.92rem}
.ex-scount{margin-left:auto;color:var(--bar-ink-2);font-size:.72rem;white-space:nowrap}
.ex-subj a.is-dim .ex-sname{color:var(--bar-ink-2);font-weight:400}

/* ---------- page furniture ---------- */
.phead{padding:3.2rem 0 1.6rem;max-width:56rem}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-dk);
  font-weight:600;margin:0 0 .7rem}
.eyebrow a{border-bottom:1px solid transparent}
.eyebrow a:hover{border-bottom-color:currentColor}
.phead h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1;margin:0 0 .8rem;letter-spacing:-.018em}
.h-ar{font-family:var(--arabic);font-weight:400;color:var(--ink-3);font-size:.72em;margin-left:.5rem}
.lede{font-size:1.06rem;color:var(--ink-2);max-width:62ch;margin:0}

.sect{padding:2.4rem 0;border-top:1px solid var(--line)}
.sect-h{font-size:1.35rem;margin:0 0 .3rem;letter-spacing:-.01em}
.sect-sub{color:var(--ink-3);margin:0 0 1.4rem;max-width:60ch}

.note-block{margin:2.6rem 0 4rem;padding:1.7rem 1.8rem;background:var(--raise);
  border:1px solid var(--line);border-left:3px solid var(--gold-line);border-radius:10px}
.note-block h2{font-size:1.06rem;margin:0 0 .6rem}
.note-block p{margin:0 0 .7rem;color:var(--ink-2);max-width:66ch}
.note-block p:last-child{margin-bottom:0}
.small{font-size:.86rem;color:var(--ink-3)}

.btn{display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:.92rem;
  padding:.62rem 1.15rem;border-radius:7px;margin:.35rem .4rem .35rem 0;
  transition:transform .14s,filter .14s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--red-dk);border:1px solid var(--line-2)}
.btn-o:hover{border-color:var(--red);filter:none}
.btn-s{font-size:.84rem;padding:.45rem .85rem}

ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:.5rem 0 .5rem 1.15rem;position:relative;color:var(--ink-2)}
ul.plain li::before{content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;
  border-radius:50%;background:var(--red)}
ul.plain.big li{padding:.75rem 0 .75rem 1.3rem;border-bottom:1px solid var(--line)}
ul.plain.big li:last-child{border-bottom:0}

/* ---------- the nine subjects ---------- */
.subj-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:.6rem 0 0}
@media(min-width:680px){.subj-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.subj-grid{grid-template-columns:1fr 1fr 1fr}}
.subj{position:relative;display:block;background:var(--paper);padding:1.5rem 1.4rem 3.1rem;
  min-height:13.5rem;transition:background .16s}
.subj-n{position:absolute;top:1.3rem;right:1.4rem;font-size:.72rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}
.subj-ar{display:block;font-family:var(--arabic);font-size:1.5rem;color:var(--red);
  line-height:1;margin:0 0 .55rem;opacity:.9}
.subj-t{font-size:1.16rem;margin:0 0 .45rem;letter-spacing:-.008em}
.subj-b{margin:0;color:var(--ink-3);font-size:.9rem;line-height:1.55;max-width:34ch}
.subj-starts{margin:.7rem 0 0;font-size:.82rem;color:var(--ink-2);max-width:34ch}
.subj-starts span{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.15rem}
.subj-status{position:absolute;left:1.4rem;bottom:1.35rem;font-size:.75rem;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:999px;padding:.2rem .6rem}
.subj-status.ok{color:var(--ok);border-color:currentColor}
a.subj.is-live:hover{background:var(--red-wash)}
a.subj.is-live::after{content:"→";position:absolute;right:1.4rem;bottom:1.3rem;color:var(--red);
  opacity:0;transform:translateX(-5px);transition:opacity .16s,transform .16s;font-size:1.05rem}
a.subj.is-live:hover::after{opacity:1;transform:translateX(0)}
.subj.is-empty{background:var(--raise)}
.subj.is-empty .subj-ar{color:var(--ink-3);opacity:.45}
.subj.is-empty .subj-t{color:var(--ink-2)}

/* ---------- lesson rows ---------- */
.lesson-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lesson-rows li{border-bottom:1px solid var(--line)}
.lesson-rows a{display:flex;align-items:center;gap:.9rem;padding:.85rem .4rem;
  transition:background .14s,padding-left .14s}
.lesson-rows a:hover{background:var(--raise);padding-left:.75rem}
.lr-n{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none;width:1.7rem}
.lr-t{font-weight:600;color:var(--red-dk)}
.lr-m{color:var(--ink-3);font-size:.84rem}
.chip{margin-left:auto;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:.16rem .55rem;color:var(--ink-3);
  white-space:nowrap;flex:none}
.chip-ok{color:var(--ok);border-color:currentColor}

/* ---------- the library ---------- */
.lib-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 1.8rem}
.lib-tab{background:transparent;border:1px solid var(--line-2);border-radius:999px;
  color:var(--ink-2);font:inherit;font-size:.86rem;font-weight:500;padding:.4rem .95rem;
  cursor:pointer;transition:all .15s}
.lib-tab span{color:var(--ink-3);font-size:.76rem;margin-left:.25rem;font-variant-numeric:tabular-nums}
.lib-tab:hover{border-color:var(--ink-3)}
.lib-tab.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lib-tab.is-on span{color:rgba(255,255,255,.6)}

.lib-list{display:grid;gap:1.1rem}
@media(min-width:820px){.lib-list{grid-template-columns:1fr 1fr}}
.libcard{border:1px solid var(--line);border-radius:12px;padding:1.35rem 1.4rem;
  background:var(--paper);transition:border-color .16s,transform .16s}
.libcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.libcard-top{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .7rem}
.lib-kind{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  padding:.2rem .55rem;border-radius:4px;background:var(--ink);color:var(--paper)}
.lib-kind.k-video{background:var(--red)}
.lib-kind.k-reference{background:var(--gold)}
.lib-kind.k-article{background:var(--ink-2)}
.lib-status{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:999px;padding:.16rem .55rem}
.lib-status.s-hosted{color:var(--ok);border-color:currentColor}
.lib-subj{margin-left:auto;font-size:.75rem;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.lib-subj:hover{color:var(--red-dk);border-bottom-color:currentColor}
.libcard-t{font-size:1.1rem;margin:0 0 .25rem;line-height:1.3}
.libcard-t a:hover{color:var(--red-dk)}
.libcard-ar{font-family:var(--arabic);font-size:1.18rem;margin:0 0 .3rem;color:var(--ink-2)}
.libcard-a{margin:0 0 .2rem;font-size:.88rem;color:var(--ink-2)}
.libcard-i{margin:0 0 .6rem;font-size:.8rem;color:var(--ink-3)}
.libcard-b{font-size:.92rem;color:var(--ink-2)}
.libcard-b p{margin:0 0 .6rem}
.libcard-r{margin:.5rem 0 .8rem;font-size:.85rem}
.libcard-r summary{cursor:pointer;color:var(--ink-3);font-size:.78rem;letter-spacing:.03em;
  padding:.25rem 0;list-style:none}
.libcard-r summary::-webkit-details-marker{display:none}
.libcard-r summary::before{content:"▸ ";color:var(--red)}
.libcard-r[open] summary::before{content:"▾ "}
.libcard-r > div{border-left:2px solid var(--gold-line);padding:.4rem 0 .1rem .8rem;
  color:var(--ink-3);font-size:.85rem}
.libcard-r p{margin:0 0 .5rem}
.libcard-go{margin:.4rem 0 0}

.lib-grid{display:grid;gap:1rem}
@media(min-width:700px){.lib-grid{grid-template-columns:1fr 1fr}}
.lib{border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem}
.lib h3{font-size:1rem;margin:.35rem 0 .3rem}
.lib-imp{margin:0 0 .6rem;font-size:.8rem;color:var(--ink-3)}
.lib-links{margin:0;display:flex;gap:1rem;font-size:.85rem}
.lib-links a{color:var(--red-dk);border-bottom:1px solid transparent}
.lib-links a:hover{border-bottom-color:currentColor}

/* ---------- support ---------- */
.hold{display:flex;gap:1rem;align-items:flex-start;margin:1.2rem 0 0;
  padding:1.4rem 1.6rem;border:1px solid var(--gold-line);background:var(--gold-wash);
  border-radius:10px}
.hold-dot{width:9px;height:9px;border-radius:50%;background:var(--gold-line);flex:none;
  margin-top:.55rem;box-shadow:0 0 0 4px rgba(212,175,55,.18)}
.hold h2{font-size:1rem;margin:0 0 .35rem}
.hold p{margin:0;color:var(--ink-2);max-width:64ch}

.fund-grid{display:grid;gap:1rem}
@media(min-width:760px){.fund-grid{grid-template-columns:repeat(3,1fr)}}
.fund{border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;
  padding:1.3rem 1.3rem 1.4rem}
.fund h3{font-size:1.02rem;margin:0 0 .6rem;display:flex;align-items:baseline;gap:.5rem}
.fund h3 span{font-family:var(--arabic);color:var(--ink-3);font-weight:400;font-size:1.05rem}
.fund p{margin:0 0 .7rem;font-size:.92rem;color:var(--ink-2)}
.fund-rule{border-top:1px solid var(--line);padding-top:.7rem;font-size:.84rem!important;
  color:var(--ink-3)!important;margin-bottom:0!important}

/* ---------- fatwa + board ---------- */
.two-col{display:grid;gap:1rem;margin:0 0 1.2rem}
@media(min-width:720px){.two-col{grid-template-columns:1fr 1fr}}
.col-card{border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.3rem;background:var(--raise)}
.col-card h3{font-size:1rem;margin:0 0 .5rem}
.col-card p{margin:0;color:var(--ink-2);font-size:.93rem}

.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.4rem 3.1rem;
  border-left:1px solid var(--line);margin-left:1rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-1rem;top:-.15rem;
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-2);color:var(--red-dk);
  font-size:.82rem;font-weight:700}
.steps h3{font-size:1.02rem;margin:.15rem 0 .35rem}
.steps p{margin:0;color:var(--ink-2);font-size:.93rem;max-width:60ch}

.board-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
@media(min-width:640px){.board-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.board-grid{grid-template-columns:repeat(3,1fr)}}
.board-cat{background:var(--paper);padding:1.2rem 1.3rem}
.board-cat h3{font-size:.98rem;margin:0 0 .35rem}
.board-cat p{margin:0;font-size:.88rem;color:var(--ink-3)}

/* ---------- home ---------- */
.hero{padding:4.2rem 0 3.4rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--red),transparent 55%)}
.hero-ar{font-family:var(--arabic);font-size:clamp(2.4rem,7vw,4.4rem);color:var(--red);
  opacity:.13;position:absolute;top:1.5rem;right:0;line-height:1;pointer-events:none;
  user-select:none}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.04;letter-spacing:-.028em;
  margin:0 0 1.1rem;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{font-size:1.1rem;color:var(--ink-2);max-width:52ch;margin:0 0 1.5rem}
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.8rem}
.pill{font-size:.78rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;
  padding:.32rem .8rem}
.pill.red{color:var(--red-dk);border-color:var(--red)}

.stat-row{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
@media(min-width:620px){.stat-row{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}}
.stat{background:var(--paper);padding:1.3rem 1.2rem}
.stat b{display:block;font-size:1.7rem;line-height:1;letter-spacing:-.02em;margin:0 0 .3rem;
  font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--ink-3)}
.stat.accent b{color:var(--red)}

/* ---------- v1.5.1 corrections, from looking at the live pages ---------- */

/* The Arabic subject name was right-aligning under dir="rtl" and colliding
   with the card's number in the same corner. Glyph order stays RTL; only the
   block alignment moves. */
.subj-ar{text-align:left}

/* The hero watermark sat flush to the viewport edge and got clipped. */
.hero-ar{right:clamp(.5rem,4vw,3rem);top:2.2rem}
@media (max-width:760px){ .hero-ar{opacity:.07} }

/* h2 carries a 26ch cap for lesson prose. Section headings are labels, not
   prose, and were wrapping mid-phrase because of it. */
.sect-h,.note-block h2,.hold h2,.phead h1{max-width:none}
.sect-h{font-weight:800}

/* Long section headings still read better balanced than ragged. */
.sect-h,.phead h1,.hero h1{text-wrap:balance}

/* ============================================================
   v1.9.0 — Top tabs, the two routes, levels and books.

   The site had one way in (subject) and no way to answer "where
   do I start". These are the components for the second route.
   ============================================================ */

/* --- Persistent tab bar ------------------------------------ */
.tabs{background:var(--bar);border-top:1px solid var(--bar-line)}
.tabs-in{display:flex;gap:.15rem;align-items:stretch;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.tabs-in::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;white-space:nowrap;
  padding:.72rem .9rem;font-size:.86rem;font-weight:600;letter-spacing:.005em;
  color:var(--bar-ink-2);border-bottom:2px solid transparent;transition:color .12s}
.tab:hover{color:var(--bar-ink)}
.tab.is-here{color:var(--bar-ink);border-bottom-color:var(--red)}
.tab-lead{color:var(--bar-ink)}
.tab-lead::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--red);margin-right:.45rem;flex:0 0 auto}
@media (max-width:620px){
  .tab{padding:.62rem .7rem;font-size:.8rem}
}

/* --- Start here -------------------------------------------- */
.start-head{max-width:64ch;margin:0 0 2.4rem}
.start-head h1{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;margin:0 0 .7rem}
.start-head p{color:var(--ink-2);margin:0;font-size:1.02rem}

.need-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.need-list li{border-bottom:1px solid var(--line)}
.need-list a{display:flex;align-items:center;gap:1rem;padding:1.15rem .4rem;
  transition:background .12s}
.need-list a:hover{background:var(--red-wash)}
.need-n{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;width:2rem}
.need-body{flex:1 1 auto;min-width:0}
.need-say{display:block;font-size:1.06rem;font-weight:600;line-height:1.4}
.need-meta{display:block;font-size:.8rem;color:var(--ink-3);margin-top:.2rem}
.need-meta .dot{opacity:.5;margin:0 .25rem}
.need-go{flex:0 0 auto;color:var(--red-dk);font-weight:700;opacity:.55}
.need-list a:hover .need-go{opacity:1}

.pick-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr))}
.pick{display:block;padding:1rem .95rem;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);transition:border-color .12s,transform .12s}
a.pick:hover{border-color:var(--red);transform:translateY(-2px)}
.pick.is-empty{opacity:.5}
.pick-ar{display:block;font-family:var(--arabic);font-size:1.15rem;color:var(--red-dk);
  line-height:1;margin-bottom:.45rem}
.pick-t{display:block;font-weight:700;font-size:1rem}
.pick-s{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.2rem}

.unsure{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;
  padding:1.5rem 1.4rem;background:var(--raise)}
.unsure h2{margin:0 0 .5rem;font-size:1.2rem;font-weight:800}
.unsure p{margin:0 0 1rem;color:var(--ink-2);max-width:60ch}

/* --- The ladder -------------------------------------------- */
.ladder{list-style:none;margin:0;padding:0}
.rung{display:flex;gap:1.3rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.rung:last-child{border-bottom:1px solid var(--line)}
.rung-side{flex:0 0 3.4rem;text-align:center}
.rung-n{display:block;font-size:1.5rem;font-weight:800;color:var(--line-2);
  line-height:1;font-variant-numeric:tabular-nums}
.rung.is-open .rung-n{color:var(--red)}
.rung-ar{display:block;font-family:var(--arabic);font-size:.95rem;color:var(--ink-3);
  margin-top:.4rem;line-height:1.3}
.rung-body{flex:1 1 auto;min-width:0}
.rung-t{margin:0 0 .35rem;font-size:1.35rem;font-weight:800;letter-spacing:-.015em}
.rung-t a:hover{color:var(--red-dk)}
.rung-say{margin:0 0 .6rem;font-size:1rem;font-style:italic;color:var(--red-dk)}
.rung-b{margin:0 0 .6rem;color:var(--ink-2);max-width:66ch}
.rung-gets{margin:0 0 .9rem;color:var(--ink-2);font-size:.92rem;max-width:66ch}
.rung-books{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem;padding:0}
.bchip{display:inline-flex;flex-direction:column;gap:.1rem;padding:.4rem .7rem;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  font-size:.84rem;transition:border-color .12s}
.bchip:hover{border-color:var(--red)}
.bchip.is-open{border-color:var(--red);background:var(--red-wash)}
.bchip-t{font-weight:600}
.bchip-s{font-size:.72rem;color:var(--ink-3)}
.rung-foot{margin:0;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.lvl-status{font-size:.78rem;font-weight:700;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:.15rem .6rem}
.lvl-status.ok{color:var(--ok);border-color:var(--ok)}
.rung-more{font-size:.86rem;font-weight:700;color:var(--red-dk)}
@media (max-width:620px){
  .rung{gap:.9rem}
  .rung-side{flex:0 0 2.4rem}
  .rung-n{font-size:1.2rem}
  .rung-ar{font-size:.8rem}
}

/* --- One level --------------------------------------------- */
.lvl-head{max-width:66ch;margin:0 0 2.2rem}
.lvl-ar{display:block;font-family:var(--arabic);font-size:1.5rem;color:var(--red-dk);
  line-height:1;margin-bottom:.4rem}
.lvl-head h1{font-size:clamp(1.8rem,4.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;
  margin:0 0 .5rem;line-height:1.12}
.lvl-say{margin:0 0 .7rem;font-size:1.05rem;font-style:italic;color:var(--red-dk)}
.lvl-b{margin:0 0 .6rem;color:var(--ink-2)}
.lvl-gets{margin:0;color:var(--ink-2);font-size:.94rem}
.lvl-nav{display:flex;flex-wrap:wrap;gap:.4rem}
.lvl-pill{padding:.4rem .85rem;border:1px solid var(--line);border-radius:99px;
  font-size:.85rem;font-weight:600}
.lvl-pill:hover{border-color:var(--red)}
.lvl-pill.is-here{background:var(--red);border-color:var(--red);color:#fff}

/* --- Book cards and the book page -------------------------- */
.book-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.bookcard{display:block;padding:1.15rem 1.1rem;border:1px solid var(--line);
  border-radius:13px;background:var(--paper);transition:border-color .12s,transform .12s}
.bookcard:hover{border-color:var(--red);transform:translateY(-2px)}
.bookcard.is-open{border-left:3px solid var(--red)}
.bookcard.is-planned{opacity:.72}
.bookcard-ar{display:block;font-family:var(--arabic);font-size:1.25rem;color:var(--red-dk);
  line-height:1;margin-bottom:.5rem;text-align:left}
.bookcard-t{margin:0 0 .2rem;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.bookcard-a{margin:0 0 .5rem;font-size:.8rem;color:var(--ink-3)}
.bookcard-b{margin:0 0 .8rem;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.bookcard-s{font-size:.75rem;font-weight:700;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:.12rem .55rem}
.bookcard-s.ok{color:var(--ok);border-color:var(--ok)}

.book-head{max-width:70ch;margin:0 0 2rem}
.book-ar{margin:0 0 .3rem;font-family:var(--arabic);font-size:1.9rem;color:var(--red-dk);line-height:1.4}
.book-title{font-size:clamp(1.8rem,4.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;
  margin:0 0 .5rem;line-height:1.12}
.book-b{color:var(--ink-2);margin:.9rem 0 1.3rem}
.book-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.book-pdfnote{margin:0;font-size:.85rem;color:var(--ink-3);max-width:62ch}

.booktable{width:100%;border-collapse:collapse;font-size:.92rem}
.booktable th,.booktable td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.booktable thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.booktable tbody th{font-weight:700}
.booktable tbody tr:hover{background:var(--raise)}
.booktable tr.is-open tbody th a{color:var(--red-dk)}
.bt-ar{display:block;font-family:var(--arabic);font-size:.95rem;color:var(--ink-3);
  font-weight:400;margin-top:.15rem}
.bt-s{font-size:.76rem;font-weight:700;color:var(--ink-3)}
.bt-s.ok{color:var(--ok)}
@media (max-width:620px){
  .booktable{display:block;overflow-x:auto;white-space:nowrap}
}

/* --- Lesson video and PDF ----------------------------------
   The player is a facade until it is pressed: .vid draws the card from
   our own tokens, and video.js replaces its contents with the iframe on
   click. No request leaves the page before then, which is what lets every
   page keep saying "no tracking" truthfully. */
.lesson-video{margin:1.4rem 0}
.vid{position:relative;border-radius:13px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink);aspect-ratio:16/9}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-face{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  padding:1.4rem;text-align:center;cursor:pointer;border:0;
  background:radial-gradient(120% 120% at 50% 0%,#2c2d38 0%,#15161d 70%);
  color:#fff;font:inherit;transition:background .15s}
.vid-face:hover{background:radial-gradient(120% 120% at 50% 0%,#35364a 0%,#181923 70%)}
.vid-face:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.vid-play{color:var(--red);line-height:0;transition:transform .12s}
.vid-face:hover .vid-play{transform:scale(1.07)}
.vid-t{display:block;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.vid-s{display:block;margin-top:.25rem;font-size:.78rem;color:rgba(255,255,255,.62)}
.vid-out{margin:.55rem 0 0;font-size:.85rem;color:var(--ink-3)}
.vid-out a{color:var(--red-dk);font-weight:600;text-decoration:none}
.vid-out a:hover{text-decoration:underline}
.vid-out .sep{margin:0 .5rem;opacity:.45}
.lesson-pdf{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1.2rem 0}
.lesson-pdf-note{font-size:.8rem;color:var(--ink-3)}
.tag-vid{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--red-dk);border:1px solid var(--red);
  border-radius:99px;padding:.05rem .45rem}

/* --- Home: the two routes ---------------------------------- */
.routes{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  margin:.4rem 0 0}
.route{display:block;padding:1.4rem 1.3rem;border:1px solid var(--line);border-radius:14px;
  background:var(--paper);transition:border-color .12s,transform .12s}
.route:hover{border-color:var(--red);transform:translateY(-2px)}
.route-k{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-dk);margin-bottom:.45rem}
.route-t{margin:0 0 .4rem;font-size:1.2rem;font-weight:800;letter-spacing:-.015em}
.route-b{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}
.lvl-sub{margin:1.6rem 0 .8rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.lvl-sub a:hover{color:var(--red-dk)}
.lvl-sub:first-of-type{margin-top:.4rem}

/* v1.9.1 — book-card head row, and Arabic that stays on the left.
   A block with dir="rtl" right-aligns itself, which threw the Arabic
   title to the far edge of the page on the book header. */
.book-ar{text-align:left}
.bookcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-bottom:.45rem}
.bookcard-top .bookcard-ar{margin:0}
.bookcard-k{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}

/* --- v1.10.0 Materials: the handout, then the whole book -------- */
.mats{margin:1.6rem 0 2rem;border:1px solid var(--line);border-radius:14px;
  padding:1.15rem 1.15rem .9rem;background:var(--raise)}
.mats-h{margin:0 0 .8rem;font-size:.72rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.mats-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.mat{display:flex;align-items:center;gap:.8rem;padding:.75rem .85rem;
  border:1px solid var(--line);border-radius:11px;background:var(--paper);
  transition:border-color .12s,transform .12s}
.mat:hover{border-color:var(--red);transform:translateY(-1px)}
.mat.is-lead{border-color:var(--red);background:var(--red-wash)}
.mat-ico{flex:0 0 auto;color:var(--red-dk);display:flex}
.mat-body{flex:1 1 auto;min-width:0}
.mat-t{display:block;font-weight:700;font-size:.95rem;line-height:1.3}
.mat-s{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.1rem}
.mat-kind{flex:0 0 auto;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:99px;padding:.1rem .45rem}
.mats-foot{margin:.8rem 0 0;font-size:.78rem;color:var(--ink-3)}

.edition{margin:.2rem 0 0;font-size:.85rem;color:var(--ink-3);max-width:62ch}
.edition dt{font-weight:800;color:var(--ink-2);margin-top:.5rem}
.edition dd{margin:.1rem 0 0}

.tag-pdf{color:var(--ink-3);border-color:var(--line-2)}

/* v1.11.3 — the tab bar scrolls on a phone, so say so.
   Three tabs sit off-screen at 400px (scrollWidth 597 vs clientWidth 385) with
   no cue that more exists. The first attempt laid a gradient ending in
   var(--bar) over the bar — invisible, because that is the bar's own colour.
   Masking the strip fades the *text* out instead, which is the cue. Applied
   only below the width at which the bar actually overflows. */
@media (max-width:820px){
  .tabs-in{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),transparent);
  }
}

/* --- A book's text: where to read it, and on what basis ----
   Every one of the forty-eight books renders this block, including the
   ones whose honest answer is "we have not found a copy we would vouch
   for". The tier colours the left edge so the position is readable
   before the sentence is. */
.btext{margin:1.6rem 0 0;padding:1.1rem 1.2rem;border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:12px;background:var(--raise)}
.btext-h{margin:0 0 .35rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.btext-tier{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:var(--ink)}
.btext-go{margin:0 0 .5rem;font-size:.92rem}
.btext-go a{color:var(--red-dk);font-weight:600;text-decoration:none}
.btext-go a:hover{text-decoration:underline}
.btext-n{margin:0 0 .5rem;font-size:.88rem;line-height:1.55;color:var(--ink-2);max-width:62ch}
.btext-buy{margin:0 0 .5rem;font-size:.85rem}
.btext-buy a{color:var(--ink-2)}
.btext-policy{margin:.7rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.5;color:var(--ink-3);max-width:62ch}
.btext-library{border-left-color:var(--red)}
.btext-pd_print{border-left-color:#2E7D32}
.btext-ours{border-left-color:#2E7D32}
.btext-gap{border-left-color:#B8860B}
.btext-copyright{border-left-color:var(--ink-3)}

/* The same position, one word wide, in the books table */
.tt{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-radius:99px;padding:.1rem .5rem;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-3)}
.tt-library,.tt-pd_print,.tt-ours{border-color:var(--red);color:var(--red-dk)}
.tt-gap{border-color:#B8860B;color:#8a6508}
.tt-copyright{border-color:var(--line-2);color:var(--ink-3)}
.btext-en{margin:.85rem 0 0;padding-top:.75rem;border-top:1px dashed var(--line)}
.btext-enh{margin:0 0 .3rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.btext-en .btext-go{margin-bottom:.35rem}

/* ============================================================
   FOOTER SOCIAL ROW

   One icon per account that actually exists. inc/social.php prints
   nothing for an empty slot, so there is never a greyed-out icon or
   a link to an account nobody has opened. The SVGs are inline —
   an icon font or a CDN sprite would call somebody else's server
   on every page load, and every page here promises no tracking.
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.social{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.social-a{display:flex;align-items:center;justify-content:center;
  width:2.15rem;height:2.15rem;border-radius:7px;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .15s ease,transform .15s ease}
.social-a svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}
.social-a:hover,.social-a:focus-visible{background:var(--red);transform:translateY(-1px)}
.social-a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* The row sits at the right of the last footer line on a wide screen and
   drops under it on a phone, where a right-aligned row of seven would
   collide with the address. */
.foot-end{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14)}
.foot-end .legal{margin:0;flex:1 1 34ch}
@media (max-width:640px){
  .foot-end{flex-direction:column;align-items:flex-start}
}