/* ── Mahl ──────────────────────────────────────────────────────────────
   A reading object, not an interface. Arabic leads; the Latin layer is a
   quiet companion. One accent (madder red) used as a marker, never as text —
   vowel marks cannot be coloured apart from their base letter (see docs).   */

@font-face{font-family:MahlNaskh;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/amiri-400.woff2) format('woff2')}
@font-face{font-family:MahlNaskh;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/amiri-700.woff2) format('woff2')}
@font-face{font-family:Crimson;font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/fonts/crimson.woff2) format('woff2')}
@font-face{font-family:Crimson;font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/fonts/crimson-italic.woff2) format('woff2')}

:root{
  --paper:#EFEAE0;
  --paper-2:#E7E1D4;
  --sheet:#FAF7F1;
  --ink:#16120D;
  --ink-soft:#5B5348;
  --ink-faint:#8E8578;
  --rubric:#A93724;
  --lapis:#1E3A63;
  --gold:#A07C2C;
  --line:#D8D0C1;
  --line-soft:#E5DFD2;

  --ar:MahlNaskh,"Amiri","Noto Naskh Arabic",serif;
  --lat:Crimson,Georgia,"Times New Roman",serif;

  --read:1.32rem;
  --lh:2.15;
  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14120E;--paper-2:#191610;--sheet:#1D1A14;--ink:#EDE7DA;--ink-soft:#A79E8E;
    --ink-faint:#776F62;--rubric:#D9705A;--lapis:#9DB6E8;--gold:#C9A25C;
    --line:#332E25;--line-soft:#26221B;
  }
}
:root[data-theme="dark"]{
  --paper:#14120E;--paper-2:#191610;--sheet:#1D1A14;--ink:#EDE7DA;--ink-soft:#A79E8E;
  --ink-faint:#776F62;--rubric:#D9705A;--lapis:#9DB6E8;--gold:#C9A25C;
  --line:#332E25;--line-soft:#26221B;
}
:root[data-theme="light"]{
  --paper:#EFEAE0;--paper-2:#E7E1D4;--sheet:#FAF7F1;--ink:#16120D;--ink-soft:#5B5348;
  --ink-faint:#8E8578;--rubric:#A93724;--lapis:#1E3A63;--gold:#A07C2C;
  --line:#D8D0C1;--line-soft:#E5DFD2;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ar);direction:rtl;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.en{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lapis);outline-offset:3px;border-radius:1px}
a{color:inherit}
.hk{color:inherit}   /* marks cannot be coloured apart from their base letter */

/* ── nameplate ───────────────────────────────────────────────────────── */
.plate{border-bottom:1px solid var(--line)}
.plate-in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 0 14px;
}
.plate .name{
  font-family:var(--ar);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.3rem);
  line-height:1.5;margin:0;text-decoration:none;display:inline-block;
}
.plate .name:hover{color:var(--lapis)}
.plate .right{
  display:flex;align-items:center;gap:18px;
  font-family:var(--lat);font-size:.86rem;color:var(--ink-faint);
}
.plate .date{font-family:var(--ar);font-size:.95rem;color:var(--ink-soft)}
@media (max-width:640px){ .plate .right .date{display:none} }

/* ── hero: today's sentence, vocalised in front of you ───────────────── */
.hero{
  padding:clamp(44px,8vw,96px) 0 clamp(36px,6vw,72px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom,var(--paper-2),var(--paper) 62%);
}
.hero-label{
  display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(20px,3vw,34px);
  font-size:1rem;color:var(--rubric);
}
.hero-label .en{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:stretch}
@media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1.85fr) minmax(230px,.9fr)} }
.hero-line{
  font-family:var(--ar);font-weight:400;
  font-size:clamp(1.75rem,4.6vw,3.2rem);
  line-height:1.95;margin:0;
  text-wrap:balance;
}
.hero-foot{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px;
  padding-bottom:.35em;
}
@media (min-width:900px){
  .hero-foot{border-inline-end:1px solid var(--line);padding-inline-end:clamp(24px,3vw,40px)}
}
.hero-note{
  font-family:var(--lat);font-size:1rem;line-height:1.55;color:var(--ink-soft);
  margin:0;
}
.hero-note em{font-style:italic;color:var(--ink)}
.hero-more{
  font-family:var(--ar);font-size:1.05rem;color:var(--lapis);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* the toggle, presented as the hero's instrument */
.switch{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--sheet);border:1px solid var(--line);
  padding:10px 16px 10px 12px;border-radius:2px;
  font-family:var(--ar);font-size:1rem;color:var(--ink);
}
.switch:hover{border-color:var(--ink-soft)}
.switch .track{
  width:38px;height:20px;border:1px solid var(--line);background:var(--paper);
  position:relative;flex:none;border-radius:2px;
}
.switch .track::after{
  content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;
  background:var(--rubric);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.switch[aria-pressed="false"] .track::after{transform:translateX(-18px);background:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){ .switch .track::after{transition:none} }

/* ── reading bar ─────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.bar-in{display:flex;align-items:center;gap:clamp(10px,2vw,22px);padding:10px 0;flex-wrap:wrap}
.bar .lbl{
  font-family:var(--lat);font-size:.8rem;color:var(--ink-faint);white-space:nowrap;
}
.seg{display:flex;border:1px solid var(--line);background:var(--sheet);border-radius:2px;overflow:hidden}
.seg button{
  appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-family:var(--ar);padding:7px 14px;font-size:.95rem;
  display:flex;align-items:center;gap:8px;border-inline-start:1px solid var(--line-soft);
}
.seg button:first-child{border-inline-start:0}
.seg button .num{font-size:1.1rem;color:var(--gold)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button[aria-pressed="true"] .num{color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink);background:var(--paper)}

.step{display:flex;border:1px solid var(--line);background:var(--sheet);border-radius:2px;overflow:hidden}
.step button{
  appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-family:var(--ar);padding:3px 13px;line-height:1.6;
  border-inline-start:1px solid var(--line-soft);
}
.step button:first-child{border-inline-start:0}
.step button:hover{color:var(--ink);background:var(--paper)}
.step .s1{font-size:.9rem}.step .s2{font-size:1.2rem}.step .s3{font-size:1.5rem}

.nb-btn{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:1px solid var(--line);padding:7px 14px;color:var(--ink);
  font-family:var(--ar);font-size:.95rem;border-radius:2px;
}
.nb-btn:hover{border-color:var(--ink-soft)}
.nb-btn .count{
  font-family:var(--ar);font-size:1rem;min-width:1.6em;text-align:center;
  color:var(--paper);background:var(--lapis);padding:0 6px;border-radius:2px;
}

/* On a phone the reading bar is one quiet row that scrolls, not three stacked
   rows eating the screen. The labels go: the controls read on their own. */
@media (max-width:720px){
  .bar-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:10px;padding:8px 0}
  .bar-in::-webkit-scrollbar{display:none}
  .bar .lbl{display:none}
  .bar .seg button{padding:6px 11px;font-size:.88rem}
  .bar .seg button .num{font-size:1rem}
  .nb-btn{margin-inline-start:0;flex:none;padding:6px 12px;font-size:.9rem}
  .step{flex:none}
  .step button{padding:2px 11px}
  .hero{padding:clamp(30px,7vw,48px) 0 clamp(28px,5vw,40px)}
  .hero-foot{border-inline-end:0;padding-inline-end:0}
}

/* ── article ─────────────────────────────────────────────────────────── */
main{padding:clamp(34px,6vw,68px) 0 0}
.cols{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px)}
@media (min-width:1000px){ .cols{grid-template-columns:minmax(0,2fr) minmax(0,.85fr)} }

.kicker{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px;font-size:1rem;color:var(--rubric);
}
.kicker .en{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.kicker .tag{
  font-family:var(--lat);color:var(--ink-faint);border:1px solid var(--line);
  padding:3px 9px;font-size:.72rem;letter-spacing:.04em;border-radius:2px;
}
h1.head{
  font-family:var(--ar);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.55;
  margin:0 0 .35em;text-wrap:balance;
}
.dek{
  font-family:var(--ar);font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.95;color:var(--ink-soft);margin:0 0 26px;max-width:32em;
}
.meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--ink-soft);margin-bottom:28px;
}
.meta .dot{width:3px;height:3px;background:var(--ink-faint);border-radius:50%}
.meta b{font-weight:700;color:var(--ink)}
.meta .new b{color:var(--rubric)}
.meta .hint{color:var(--ink-faint)}

.audio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 32px}
.play{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;border-radius:2px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:11px 18px 11px 22px;font-family:var(--ar);font-size:1rem;
}
.play:hover:not(:disabled){background:var(--lapis);border-color:var(--lapis)}
.play:disabled{background:none;color:var(--ink-faint);border-color:var(--line);cursor:not-allowed}
.rate{display:flex;border:1px solid var(--line);background:var(--sheet);border-radius:2px;overflow:hidden}
.rate button{
  appearance:none;background:none;border:0;cursor:pointer;padding:9px 15px;
  font-family:var(--ar);font-size:.92rem;color:var(--ink-soft);
  border-inline-start:1px solid var(--line-soft);
}
.rate button:first-child{border-inline-start:0}
.rate button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.audio .hint{font-family:var(--lat);font-size:.85rem;color:var(--ink-faint)}

.body p{
  font-family:var(--ar);font-size:var(--read);line-height:var(--lh);
  margin:0 0 1.1em;max-width:31em;
}
.body .say{
  color:var(--ink-soft);border-inline-start:2px solid var(--rubric);
  padding-inline-start:18px;margin-inline-start:2px;
}

/* a glossed word: the one place the accent touches running text */
.gw{
  appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;
  border-bottom:1px dotted var(--rubric);
  transition:background .15s ease;
}
.gw:hover,.gw.on{background:color-mix(in srgb,var(--rubric) 12%,transparent)}
.gw.saved{border-bottom-style:solid;border-bottom-color:var(--lapis)}

/* ── more stories ────────────────────────────────────────────────────── */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:clamp(48px,7vw,86px) 0 0;padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.sec-head h2{font-family:var(--ar);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin:0}
.sec-head .en{font-size:.85rem;color:var(--ink-faint)}
.cards{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){ .cards{grid-template-columns:repeat(var(--cards,2),1fr)} }
.card{
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
@media (min-width:760px){
  .card{padding-inline-start:clamp(24px,3vw,40px);border-inline-start:1px solid var(--line)}
  .card:first-child{padding-inline-start:0;border-inline-start:0}
}
.card .cat{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--rubric)}
.card .lvl{display:inline-flex;gap:4px;margin-inline-start:auto}
.card .lvl i{width:7px;height:7px;background:var(--line);display:block}
.card .lvl i.on{background:var(--gold)}
.card h3{margin:0}
.card h3 a{
  font-family:var(--ar);font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.65;
  font-weight:700;text-decoration:none;
}
.card:hover h3 a{color:var(--lapis)}
.card p{font-family:var(--ar);font-size:1.06rem;line-height:1.95;color:var(--ink-soft);margin:0}
.card .foot{margin-top:auto;padding-top:10px;font-family:var(--lat);font-size:.82rem;color:var(--ink-faint)}

/* ── sidebar ─────────────────────────────────────────────────────────── */
aside > section{margin-bottom:40px}
.side-h{
  display:flex;align-items:baseline;gap:12px;margin:0 0 18px;padding-bottom:10px;
  border-bottom:1px solid var(--ink);
}
.side-h .ar{font-family:var(--ar);font-size:1.2rem;font-weight:700}
.side-h .en{font-family:var(--lat);font-size:.8rem;color:var(--ink-faint);margin-inline-start:auto}

.root-box{border:1px solid var(--line);background:var(--sheet);padding:24px 22px;border-radius:2px}
.radicals{display:flex;gap:9px;justify-content:center;margin-bottom:8px}
.radicals span{
  font-family:var(--ar);font-size:2rem;line-height:1;
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:var(--gold);border-radius:2px;
}
.root-box .cap{
  text-align:center;font-family:var(--lat);font-size:.82rem;
  color:var(--ink-faint);margin:0 0 20px;letter-spacing:.06em;
}
.derivs{list-style:none;padding:0;margin:0}
.derivs li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px dotted var(--line)}
.derivs li:first-child{border-top:0}
.derivs .w{font-family:var(--ar);font-size:1.35rem;min-width:5em}
.derivs .g{font-family:var(--lat);font-size:.95rem;color:var(--ink-soft);direction:ltr;text-align:left;flex:1}

.steps{list-style:none;padding:0;margin:0}
.steps li{
  padding:14px 0;border-top:1px solid var(--line-soft);
  display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.85;color:var(--ink-soft);
}
.steps li:first-child{border-top:0}
.steps .k{font-family:var(--ar);color:var(--gold);font-size:1.2rem;flex:none;line-height:1.5}
.steps b{color:var(--ink);font-weight:700}

.arch{list-style:none;padding:0;margin:0}
.arch li{padding:12px 0;border-top:1px dotted var(--line)}
.arch li:first-child{border-top:0}
.arch a{display:flex;gap:12px;align-items:baseline;text-decoration:none}
.arch .d{font-family:var(--ar);color:var(--ink-faint);font-size:1rem;flex:none}
.arch .t{font-family:var(--ar);font-size:1.1rem;line-height:1.7}
.arch a:hover .t{color:var(--lapis)}

/* ── glossary popover ────────────────────────────────────────────────── */
.pop{
  position:absolute;z-index:60;width:min(320px,calc(100vw - 32px));
  background:var(--sheet);border:1px solid var(--ink);border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);padding:18px 19px 16px;display:none;
}
.pop.open{display:block}
.pop .w{font-family:var(--ar);font-size:2rem;line-height:1.6;margin:0}
.pop .pos{font-family:var(--lat);font-size:.85rem;font-style:italic;color:var(--ink-faint);margin:2px 0 14px;direction:ltr}
.pop .rootline{
  display:flex;align-items:center;gap:8px;padding:11px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px;
}
.pop .rootline .lb{font-family:var(--lat);font-size:.78rem;color:var(--ink-faint)}
.pop .rootline i{
  font-style:normal;font-family:var(--ar);font-size:1.3rem;color:var(--gold);
  border:1px solid var(--gold);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:2px;
}
.pop .gl{margin:0 0 6px;font-family:var(--lat);font-size:1rem;direction:ltr;text-align:left}
.pop .gl .fl{font-size:.78rem;color:var(--ink-faint);margin-inline-end:9px}
.pop .save{
  margin-top:15px;width:100%;cursor:pointer;background:none;border:1px solid var(--lapis);
  color:var(--lapis);padding:9px;font-family:var(--ar);font-size:.95rem;border-radius:2px;
}
.pop .save:hover,.pop .save[data-saved="1"]{background:var(--lapis);color:var(--sheet)}

/* ── notebook ────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(12,10,7,.44);z-index:70;display:none}
.scrim.open{display:block}
.drawer{
  --w:min(380px,88vw);
  position:fixed;top:0;bottom:0;left:0;width:var(--w);z-index:80;
  background:var(--sheet);border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;visibility:hidden;
  transform:translateX(calc(-1 * var(--w) - 2px));
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s;
}
.drawer.open{visibility:visible;transform:translateX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s}
@media (prefers-reduced-motion:reduce){ .drawer{transition:visibility 0s} }
.drawer header{padding:22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}
.drawer header h2{font-family:var(--ar);font-size:1.5rem;margin:0}
.drawer header .en{font-family:var(--lat);font-size:.85rem;color:var(--ink-faint);display:block;margin-top:2px}
.x{appearance:none;background:none;border:1px solid var(--line);cursor:pointer;color:var(--ink);width:34px;height:34px;font-size:1rem;border-radius:2px}
.x:hover{border-color:var(--ink)}
.drawer .list{overflow:auto;padding:8px 22px 22px;flex:1}
.drawer .empty{color:var(--ink-faint);font-size:1rem;line-height:1.9;padding-top:20px}
.drawer .row{padding:14px 0;border-bottom:1px dotted var(--line)}
.drawer .row .w{font-family:var(--ar);font-size:1.45rem}
.drawer .row .g{font-family:var(--lat);font-size:.9rem;color:var(--ink-soft);direction:ltr;text-align:left;margin-top:3px}
.drawer .row .rm{float:left;appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-faint);font-size:.95rem;padding:2px 5px}
.drawer .row .rm:hover{color:var(--rubric)}
.drawer footer{padding:18px 22px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-faint)}

/* ── footer ──────────────────────────────────────────────────────────── */
footer.foot{
  margin-top:clamp(56px,8vw,100px);border-top:1px solid var(--ink);
  padding:36px 0 52px;color:var(--ink-soft);font-size:1rem;line-height:1.85;
}
footer.foot .grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:780px){ footer.foot .grid{grid-template-columns:1.5fr 1fr 1fr} }
footer.foot h4{font-family:var(--ar);font-size:1.25rem;margin:0 0 10px;color:var(--ink)}
footer.foot .en{font-size:.95rem;color:var(--ink-soft);line-height:1.65}
footer.foot ul{list-style:none;padding:0;margin:0}
footer.foot li{padding:5px 0}
footer.foot .fine{
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-size:.88rem;color:var(--ink-faint);
}