:root{
  --paper:#faf7f1; --raised:#ffffff; --ink:#1e1c19; --soft:#5f584f; --faint:#8d857a;
  --rule:#e7e0d4; --rule-soft:#f0eae0; --accent:#2f5d4f; --accent-ink:#24493e; --wash:#eef2ee;
  --shadow:0 1px 2px rgba(38,32,22,.04), 0 8px 24px -14px rgba(38,32,22,.18);
  --sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  --serif-ar:'Amiri','Traditional Arabic','Simplified Arabic',Georgia,serif;
  --serif-la:Georgia,'Iowan Old Style','Times New Roman',serif;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#16150f; --raised:#1e1d17; --ink:#eeeae1; --soft:#b3aa9c; --faint:#8b8377;
        --rule:#2e2c24; --rule-soft:#26241d; --accent:#8fc2ae; --accent-ink:#a8d3c1; --wash:#20261f;
        --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-size:18px; line-height:1.85;
     -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
html[lang=ar] body{font-family:var(--serif-ar); line-height:1.95}
html[lang=en] body, html[lang=fr] body{font-family:var(--serif-la)}
[lang=ar]{font-family:var(--serif-ar)}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.wrap{max-width:900px; margin:0 auto; padding:0 24px}
.wide{max-width:1080px}
.skip{position:absolute; inset-inline-start:-999px; top:8px; background:var(--accent); color:#fff;
      padding:8px 14px; border-radius:8px; z-index:100; font-family:var(--sans)}
.skip:focus{inset-inline-start:8px}
.sans{font-family:var(--sans)}
.muted{color:var(--faint)}
.small{font-size:14px}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--rule-soft);
     background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(180%) blur(12px)}
.top .bar{display:flex; align-items:center; gap:18px; min-height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
       font-weight:700; font-size:19px; white-space:nowrap}
.brand .mono{width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff;
             display:grid; place-items:center; font:700 13px/1 Georgia,serif; letter-spacing:-.5px}
nav.menu{margin-inline-start:auto; display:flex; align-items:center; gap:4px; font-family:var(--sans); font-size:15px}
nav.menu a, nav.menu summary{display:block; padding:8px 12px; border-radius:9px; color:var(--soft);
       text-decoration:none; cursor:pointer; list-style:none; white-space:nowrap}
nav.menu summary::-webkit-details-marker{display:none}
nav.menu summary::after{content:' ▾'; font-size:11px; color:var(--faint)}
nav.menu a:hover, nav.menu summary:hover, nav.menu a[aria-current=page]{background:var(--wash); color:var(--accent-ink)}
nav.menu details{position:relative}
nav.menu details > div{position:absolute; inset-inline-start:0; top:100%; min-width:200px; padding:6px;
       background:var(--raised); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); z-index:60}
nav.menu details > div a{padding:8px 12px}
.langs{display:inline-flex; border:1px solid var(--rule); border-radius:9px; padding:2px; margin-inline-start:8px;
       font-family:var(--sans); font-size:13px}
.langs a{padding:4px 10px; border-radius:7px; text-decoration:none; color:var(--soft)}
.langs a[aria-current=true]{background:var(--accent); color:#fff; font-weight:600}
.burger{display:none; margin-inline-start:auto; border:1px solid var(--rule); background:var(--raised);
        border-radius:9px; padding:7px 12px; font-family:var(--sans); font-size:14px; cursor:pointer; color:var(--ink)}
@media (max-width:860px){
  .burger{display:inline-block}
  nav.menu{display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column; align-items:stretch;
           gap:2px; padding:10px 16px 16px; background:var(--raised); border-bottom:1px solid var(--rule); box-shadow:var(--shadow)}
  nav.menu.open{display:flex}
  nav.menu details > div{position:static; border:0; box-shadow:none; padding:0 0 0 14px; background:transparent}
  .langs{margin:8px 0 0; align-self:flex-start}
}

/* ---------- masthead / headings ---------- */
.hero{padding:56px 0 34px; text-align:center}
.portrait{width:132px; height:132px; border-radius:50%; margin:0 auto 20px; background:var(--accent); color:#fff;
          display:grid; place-items:center; font:700 44px/1 Georgia,serif; letter-spacing:-2px; box-shadow:var(--shadow)}
.portrait img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.hero h1{margin:.2em 0 .15em; font-size:clamp(34px,6vw,50px); line-height:1.2; letter-spacing:-.01em}
.hero .bio{color:var(--soft); font-size:16.5px; max-width:600px; margin:0 auto; line-height:1.7; font-family:var(--sans)}
.hero .intro{max-width:640px; margin:22px auto 0; font-size:18.5px; text-align:start}
.hero .stats{display:flex; flex-wrap:wrap; justify-content:center; gap:0 34px; margin-top:26px; font-family:var(--sans)}
.hero .stats b{display:block; font-size:24px; font-variant-numeric:tabular-nums; color:var(--ink)}
.hero .stats span{font-size:12.5px; color:var(--faint); letter-spacing:.04em}
h1.page{font-size:clamp(28px,4.6vw,40px); line-height:1.25; margin:38px 0 6px; letter-spacing:-.01em}
.lede{color:var(--soft); font-size:17px; margin:0 0 26px; font-family:var(--sans); line-height:1.7}
h2.sec{font-size:24px; margin:44px 0 4px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
h2.sec .n{font-family:var(--sans); font-size:12.5px; color:var(--faint); font-weight:400}
h2.sec + .sub{margin:0 0 16px; color:var(--faint); font-size:14.5px; font-family:var(--sans)}
.bar{height:2px; width:44px; background:var(--accent); opacity:.35; margin:10px 0 18px}
.more{font-family:var(--sans); font-size:14px; margin-top:8px}

/* ---------- article lists ---------- */
.list{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none}
.item{background:var(--raised); border:1px solid var(--rule-soft); border-radius:14px; padding:20px 24px;
      transition:border-color .2s ease, box-shadow .2s ease}
.item:hover{border-color:var(--rule); box-shadow:var(--shadow)}
.item h3{margin:0; font-size:20px; line-height:1.55; font-weight:700}
.item h3 a{color:var(--ink); text-decoration:none}
.item h3 a:hover{color:var(--accent-ink)}
.item .alt{color:var(--faint); font-size:13.5px; margin-top:4px; font-family:var(--sans)}
html[dir=ltr] .item .alt{text-align:left} html[dir=rtl] .item .alt{text-align:right; font-style:italic}
.meta{margin-top:10px; font-size:13px; color:var(--soft); font-family:var(--sans); display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.meta .outlet{color:var(--accent-ink); font-weight:600}
.meta .sep{color:var(--rule); user-select:none}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip{background:var(--wash); color:var(--accent-ink); border-radius:7px; padding:3px 10px;
      font-family:var(--sans); font-size:12.5px; text-decoration:none}
.chip:hover{filter:brightness(.95)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; list-style:none; padding:0; margin:0}
.card{display:block; background:var(--raised); border:1px solid var(--rule-soft); border-radius:14px; padding:18px 20px;
      text-decoration:none; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease}
.card:hover{border-color:var(--rule); box-shadow:var(--shadow)}
.card .k{font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.card .t{display:block; font-size:18.5px; font-weight:700; line-height:1.45; margin:4px 0 6px}
.card .d{font-size:14.5px; color:var(--soft); line-height:1.6}
.card .n{font-family:var(--sans); font-size:12.5px; color:var(--faint); margin-top:8px; display:block}
.years{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; font-family:var(--sans)}
.years a{display:block; padding:8px 13px; border:1px solid var(--rule); border-radius:10px; text-decoration:none;
         background:var(--raised); color:var(--ink); font-variant-numeric:tabular-nums; font-size:14.5px}
.years a b{color:var(--faint); font-weight:400; font-size:12px; margin-inline-start:6px}
.years a:hover{border-color:var(--accent)}

/* ---------- article page ---------- */
article.col{max-width:700px; margin:0 auto}
article.col h1{font-size:clamp(28px,4.8vw,40px); line-height:1.3; margin:40px 0 8px; letter-spacing:-.01em}
article.col .alt{color:var(--faint); font-size:15px; margin:0 0 14px; font-family:var(--sans)}
.note{background:var(--wash); border-radius:10px; padding:10px 14px; font-family:var(--sans); font-size:14px;
      color:var(--accent-ink); margin:18px 0}
.body{margin-top:26px; font-family:var(--serif-ar); font-size:19px; line-height:2.1; text-align:justify}
.body p{margin:0 0 1.15em}
.actions{margin-top:26px; padding-top:16px; border-top:1px solid var(--rule-soft); display:flex; flex-wrap:wrap; gap:18px;
         font-family:var(--sans); font-size:14px}
.pn{display:flex; justify-content:space-between; gap:16px; margin:40px 0 0; padding-top:20px; border-top:1px solid var(--rule-soft);
    font-family:var(--sans); font-size:14px}
.pn a{max-width:48%; text-decoration:none}
.pn span{display:block; color:var(--faint); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}

/* ---------- about / prose ---------- */
.prose{max-width:700px; font-size:18.5px}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:23px; margin:36px 0 8px}
.timeline{list-style:none; padding:0; margin:20px 0 0; border-inline-start:2px solid var(--rule)}
.timeline li{position:relative; padding:0 0 18px 24px; margin:0}
html[dir=rtl] .timeline li{padding:0 24px 18px 0}
.timeline li::before{content:''; position:absolute; inset-inline-start:-7px; top:11px; width:12px; height:12px;
                     border-radius:50%; background:var(--accent); border:2px solid var(--paper)}
.timeline b{display:block; font-family:var(--sans); font-size:13px; color:var(--faint); letter-spacing:.04em}
.idea{background:var(--raised); border:1px solid var(--rule-soft); border-radius:14px; padding:22px 26px; margin:0 0 14px}
.idea h2{margin:0 0 10px; font-size:22px}
.idea blockquote{margin:0 0 12px; padding:0; font-family:var(--serif-ar); font-size:19px; line-height:2; color:var(--ink)}
.idea blockquote[lang=ar]{direction:rtl; text-align:right}
.idea .tr{font-style:italic; color:var(--soft); margin:0 0 12px; font-size:16.5px}
.idea .src{font-family:var(--sans); font-size:13px}
.doc{font-family:var(--serif-ar); direction:rtl; text-align:justify; font-size:19px; line-height:2.1;
     background:var(--raised); border:1px solid var(--rule-soft); border-radius:14px; padding:26px 30px}
.doc p{margin:0 0 1.15em}
.key{border-inline-start:3px solid var(--accent); padding:4px 18px; margin:22px 0; font-size:19px; line-height:1.7; color:var(--ink)}

/* ---------- search ---------- */
.searchbox{display:flex; gap:10px; margin:18px 0 8px}
.searchbox input{flex:1; font-family:var(--sans); font-size:17px; padding:12px 16px; border:1px solid var(--rule);
                 border-radius:12px; background:var(--raised); color:var(--ink)}
.searchbox input:hover{border-color:var(--faint)}
#hits{margin-top:18px}
.count{font-family:var(--sans); font-size:13.5px; color:var(--faint)}
mark{background:color-mix(in srgb, var(--accent) 22%, transparent); color:inherit; border-radius:3px; padding:0 2px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule-soft); margin-top:70px; padding:30px 0 60px; text-align:center;
            color:var(--faint); font-size:13.5px; line-height:1.9; font-family:var(--sans)}
footer.site .credit{display:block; margin-top:8px}
footer.site a{color:var(--soft)}
@media (max-width:640px){
  body{font-size:17px}
  .hero{padding:40px 0 26px}
  .item{padding:16px 18px; border-radius:12px}
  .body{font-size:18px}
  .doc{padding:20px}
}
@media print{
  :root{--paper:#fff; --raised:#fff; --ink:#000; --soft:#333; --faint:#555; --rule:#ccc; --rule-soft:#ddd; --shadow:none}
  .top, .actions, .pn, footer.site, .chips, .searchbox, .skip{display:none}
  body{font-size:11pt}
  .body{font-size:12pt}
  article.col h1{margin-top:0}
}