@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyah-sans-Black.woff2") format("woff2");font-weight:900;font-display:swap}
:root{
  --bg:#EFF7FC;--ink:#06283D;--muted:#3F5967;--line:#D2E3EE;--accent:#2272B8;--field1:#A9DCF5;--field3:#BCE6F7;--surface:rgba(255,255,255,.66);
  --deep:#0F4F8C;--deep2:#0B6A8F;--on-deep:#F2FAFF;--on-deep-muted:#CFE6F5;--amber:#A85F00;
  --display:"Thmanyah Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#061722;--ink:#E4F2FA;--muted:#A6C2D2;--line:#1B3646;--accent:#6CC5F5;--field1:#1B5E8C;--field3:#156A8E;--surface:rgba(255,255,255,.05);
  --deep:#123F73;--deep2:#0F5574;--on-deep:#E9F6FF;--on-deep-muted:#C2DDEE;--amber:#F2B45A;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:28px;scrollbar-color:var(--accent) var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.85 var(--body)}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
a{color:var(--accent);text-underline-offset:3px}

/* Reading progress runs down the page edge, the same seam as the landing page */
.progress{position:fixed;top:0;inset-inline-end:0;z-index:20;width:3px;height:100vh;background:var(--amber);transform:scaleY(var(--read,0));transform-origin:top}

/* Top band: two grounds and a seam */
.band{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:clamp(300px,46vh,430px)}
.band>header{position:absolute;inset-inline:0;top:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;padding:18px clamp(16px,3vw,40px)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:900 22px/1 var(--display);color:var(--on-deep);text-decoration:none;justify-self:start}
.brand svg{width:30px;height:auto}
.lang{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;color:var(--ink);font-size:16px}
.title{background:linear-gradient(150deg,var(--deep),var(--deep2));color:var(--on-deep);display:flex;flex-direction:column;justify-content:flex-end;padding:96px clamp(20px,5vw,72px) clamp(28px,5vh,48px);min-width:0}
.title h1{margin:0;font:900 clamp(2.1rem,4.6vw,4rem)/1.15 var(--display);text-wrap:balance;animation:rise .9s var(--ease) both}
.title .date{margin:10px 0 0;color:var(--on-deep-muted);font-size:15px;animation:rise .9s .08s var(--ease) both}
.pair{position:relative;display:grid;place-items:center;overflow:hidden;background:
  radial-gradient(70% 70% at 20% 20%,var(--field1),transparent 70%),
  radial-gradient(60% 60% at 80% 85%,var(--field3),transparent 70%),var(--bg)}
.pair svg{width:clamp(120px,15vw,200px);height:auto;animation:rise 1.1s .12s var(--ease) both}
.pair .b{fill:var(--accent)}
.pair .e{fill:none;stroke:var(--bg);stroke-width:6.5;stroke-linecap:round}
.band::after{content:"";position:absolute;inset-block:0;left:50%;width:2px;margin-left:-1px;background:color-mix(in srgb,#fff 55%,transparent)}

/* Body: contents beside the text */
.page{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(32px,6vw,88px);max-width:1160px;margin-inline:auto;padding:clamp(36px,7vh,72px) clamp(20px,5vw,48px)}
.page.solo{grid-template-columns:minmax(0,720px);justify-content:center}
main{min-width:0;max-width:72ch}
.toc{position:sticky;top:28px;align-self:start;max-height:calc(100vh - 56px);overflow:auto;font-size:15px;line-height:1.45;scrollbar-width:thin}
.toc summary{font:700 15px/1.4 var(--display);color:var(--muted);margin-bottom:12px;list-style:none;min-height:24px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;border-inline-start:1px solid var(--line)}
.toc a{display:block;padding:7px 14px;margin-inline-start:-1px;border-inline-start:2px solid transparent;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:600;border-inline-start-color:var(--accent)}

h2{font:900 clamp(1.3rem,2.1vw,1.6rem)/1.3 var(--display);margin:52px 0 12px;text-wrap:balance}
main>h2:first-child{margin-top:0}
p{margin:0 0 14px}
ul{margin:0 0 16px;padding:0;list-style:none}
main li{position:relative;padding-inline-start:20px;margin-bottom:9px}
main li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
strong{font-weight:700}

.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.links li{padding:0;margin:0}
.links li::before{content:none}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-weight:600;transition:transform .25s var(--ease)}
.links a:hover{transform:translateY(-2px)}
a[href^="mailto:"]{font-weight:600}

/* The data table */
.scroll{margin:18px 0 24px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;background:var(--surface)}
.scroll table{min-width:760px}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6}
th,td{text-align:start;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font:700 15px/1.4 var(--display);background:color-mix(in srgb,var(--accent) 10%,transparent);white-space:nowrap}
td:first-child{font-weight:600}

footer{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;border-top:1px solid var(--line);padding:22px 20px 30px;color:var(--muted);font-size:15px}
footer a{color:var(--muted);display:inline-block;padding-block:6px}

@keyframes rise{from{opacity:0;transform:translateY(22px)}}

@media (max-width:900px){
  .page,.page.solo{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1;max-height:none;padding:12px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
  .toc summary{margin:0;cursor:pointer;display:flex;align-items:center;min-height:32px}
  .toc[open] summary{margin-bottom:10px}
  .toc summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
  .toc[open] summary::after{transform:rotate(-135deg)}
  .scroll{overflow:visible;background:none;box-shadow:none}
  .scroll table{min-width:0}
  .scroll table,.scroll tbody,.scroll tr,.scroll td{display:block}
  .scroll tr:first-child{display:none}
  .scroll tr{padding:6px 16px;margin-bottom:12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
  .scroll td{padding:9px 0;border-bottom:1px solid var(--line)}
  .scroll td:last-child{border-bottom:0}
  .scroll td[data-l]::before{content:attr(data-l);display:block;font:700 13px/1.4 var(--display);color:var(--muted);margin-bottom:2px}
}
@media (max-width:620px){
  .band{grid-template-columns:1fr;min-height:0}
  .band::after{display:none}
  .pair{position:absolute;inset-inline-end:0;inset-block:0;width:42%;background:none;z-index:1;align-items:end;padding-bottom:22px;pointer-events:none}
  .pair svg{width:84px}
  .pair .b{fill:#F2FAFF}
  .pair .e{stroke:#0F4F8C}
  .title{padding-inline-end:42%}
  .lang{color:var(--on-deep)}
  .band>header{z-index:3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media print{.progress,.toc,.pair{display:none}.band{display:block;min-height:0}.title{background:none;color:#000;padding:0 0 16px}.brand,.lang{display:none}}