/* Layout: a scholar's profile card pinned at left (photo, identity, links), content in a calm reading column at right.
   Neutral paper, charcoal ink, one maroon accent from Qatar University. Two typefaces only. */
:root{
  --bg:#FBFBFA; --surface:#FFFFFF; --sunk:#F2F2F0;
  --ink:#1D1F24; --ink-2:#555B66; --ink-3:#7A808B; --line:#E3E3DF;
  --accent:#8A1538; --accent-ink:#FFFFFF; --accent-tint:#F6E9ED;
  --gold:#9A7330;
  --serif:"Literata", "Iowan Old Style", Georgia, serif;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r:6px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121417; --surface:#191C20; --sunk:#1F2328;
  --ink:#ECEDEF; --ink-2:#B3B8C1; --ink-3:#8A909B; --line:#2B3037;
  --accent:#E07D99; --accent-ink:#1A0B10; --accent-tint:#2A1A20; --gold:#D2AA62; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#121417; --surface:#191C20; --sunk:#1F2328;
  --ink:#ECEDEF; --ink-2:#B3B8C1; --ink-3:#8A909B; --line:#2B3037;
  --accent:#E07D99; --accent-ink:#1A0B10; --accent-tint:#2A1A20; --gold:#D2AA62; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.7 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; line-height:1.2; text-wrap:balance; color:var(--ink)}
p{margin:0}
.num{font-variant-numeric:tabular-nums lining-nums}
.label{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3)}

/* top bar */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top-in{max-width:76rem; margin-inline:auto; padding-inline:clamp(16px,3vw,32px); display:flex; align-items:center; gap:1.5rem; min-height:3.6rem}
.brand{font-family:var(--serif); font-weight:600; color:var(--ink); font-size:1.02rem; white-space:nowrap; flex:none}
.brand:hover{text-decoration:none; color:var(--accent)}
.menu{display:flex; gap:.25rem; margin-left:auto; overflow-x:auto; scrollbar-width:none; min-width:0}
.menu::-webkit-scrollbar{display:none}
.menu a{color:var(--ink-2); font-size:.9rem; font-weight:500; padding:.45rem .7rem; border-radius:var(--r); white-space:nowrap}
.menu a:hover{background:var(--sunk); color:var(--ink); text-decoration:none}
.menu a.on{color:var(--accent); background:var(--accent-tint)}
.icon-btn{flex:none; width:2.2rem; height:2.2rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink-2); cursor:pointer}
.icon-btn:hover{color:var(--accent); border-color:var(--accent)}

/* shell */
.shell{max-width:76rem; margin-inline:auto; padding-inline:clamp(16px,3vw,32px); padding-block:clamp(1.5rem,4vw,3rem) 0; display:grid; grid-template-columns:18.5rem minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}

/* profile card */
.card{position:sticky; top:calc(env(safe-area-inset-top,0px) + 5rem); display:flex; flex-direction:column; gap:1.1rem}
.photo{margin:0; border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--line); aspect-ratio:1/1.06; max-width:100%}
.photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 10%}
.card h1{font-size:1.6rem; line-height:1.2}
.card .postnom{font-size:.85rem; font-weight:600; letter-spacing:.04em; color:var(--accent); margin-top:-.6rem}
.card .role{color:var(--ink-2); font-size:.93rem; line-height:1.5}
.card .role .aff{display:block; margin-top:.4rem; font-size:.84rem; color:var(--ink-3)}
.creds{display:flex; flex-wrap:wrap; gap:.35rem}
.cred{font-size:.72rem; font-weight:600; letter-spacing:.03em; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--surface)}
.cred.hl{border-color:var(--accent); color:var(--accent)}
.links{list-style:none; padding:0; margin:0; display:grid; gap:.1rem; border-top:1px solid var(--line); padding-top:.9rem}
.links a,.links span.row{display:flex; align-items:center; gap:.65rem; color:var(--ink-2); font-size:.9rem; padding:.3rem 0}
.links a:hover{color:var(--accent); text-decoration:none}
.links svg{flex:none; color:var(--ink-3)}
.links a:hover svg{color:var(--accent)}
.links .row{user-select:all}

/* content */
.content{min-width:0}
section.sec{scroll-margin-top:5rem; padding-bottom:clamp(3rem,7vw,4.5rem)}
section.sec + section.sec{border-top:1px solid var(--line); padding-top:clamp(2.5rem,6vw,3.5rem)}
.sec-title{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem}
.sec-title h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.sec-title .meta{color:var(--ink-3); font-size:.88rem}
h3.sub{font-size:1.15rem; margin:2.25rem 0 1rem}

/* intro */
.hello{font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.65rem); line-height:1.45; font-weight:400; max-width:36em}
.hello em{color:var(--accent); font-style:italic}
.intro p:not(.hello){color:var(--ink-2); max-width:42em; margin-top:1rem}
.actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.75rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1rem; border-radius:var(--r); font-weight:500; font-size:.92rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-family:inherit}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08); color:var(--accent-ink)}

.intro{position:relative; isolation:isolate}
.motif{position:absolute; z-index:-1; left:0; right:0; top:-.5rem; width:100%; height:15rem; color:var(--accent); opacity:.07; pointer-events:none}
.motif line,.motif polyline{stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke}
.motif circle{fill:currentColor}
.creds-line{margin-top:1.25rem!important; line-height:2; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)!important}
.creds-line span{white-space:nowrap}
.creds-line span+span::before{content:"·"; margin:0 .55rem; color:var(--ink-3)}
@media (max-width:640px){ .creds-line span{white-space:normal} }
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.25rem}
.stat{background:var(--surface); padding:1rem 1.1rem}
.stat b{display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.45rem,2.2vw,1.85rem); line-height:1.1}
.stat span{color:var(--ink-2); font-size:.84rem; line-height:1.35; display:block; margin-top:.25rem}
.impact{margin-top:.75rem; color:var(--ink-2); font-size:.88rem}
.impact b{font-weight:600; color:var(--ink)}
.impact span{color:var(--ink-3)}
.skip{position:absolute; left:-999px; top:.5rem; z-index:60; background:var(--accent); color:var(--accent-ink); padding:.5rem .9rem; border-radius:var(--r)}
.skip:focus{left:.75rem}
.expertise{list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.expertise li{font-size:.8rem; padding:.25rem .65rem; border-radius:999px; background:var(--accent-tint); color:var(--accent); font-weight:500}
/* gentle fade-up on section headings: resting state is visible; JS adds .pre only when motion is allowed */
.sec-title{transition:opacity .6s ease, transform .6s ease}
.js-anim .sec-title.pre{opacity:0; transform:translateY(10px)}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.theme-go{align-self:start; margin-top:auto; font-size:.84rem; padding:.45rem .8rem}
.theme ul{margin-bottom:.5rem}
.tag{font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); background:var(--accent-tint); padding:.08rem .45rem; border-radius:999px; margin-right:.5rem; vertical-align:.1em}
/* my path */
.path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; position:relative}
.path::before{content:""; position:absolute; left:0; right:0; top:.45rem; height:2px; background:var(--line)}
.path li{position:relative; padding-top:1.6rem; display:grid; gap:.2rem; align-content:start}
.path li::before{content:""; position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--ink-3)}
.path li.now::before{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint)}
.path .place{font-family:var(--serif); font-size:1.08rem; color:var(--ink)}
.path li.now .place{color:var(--accent)}
.path .yrs{font-size:.8rem; color:var(--ink-3); font-weight:600; letter-spacing:.03em}
.path p{color:var(--ink-2); font-size:.88rem; line-height:1.5; margin-top:.2rem}
.path .inst{font-size:.8rem; margin-top:.3rem; display:block}
.path .inst+.inst{margin-top:.1rem}
/* most cited */
.cited{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
.cited li{display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:.9rem; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem}
.cited .n{font-family:var(--serif); font-size:1.55rem; line-height:1; color:var(--accent); text-align:right}
.cited .n small{display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:.3rem}
.cited .w{font-size:.9rem; line-height:1.45}
.cited .w i{display:block; font-style:normal; font-weight:600; color:var(--ink)}
.cited .w span{color:var(--ink-3); font-size:.82rem}
.cited-note{color:var(--ink-3); font-size:.8rem; margin-top:.6rem}
/* course sites */
.sites{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.site{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; display:grid; gap:.45rem; align-content:start; color:var(--ink)}
.site:hover{border-color:var(--accent); text-decoration:none}
.site .code{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.site h4{font-family:var(--serif); font-weight:500; font-size:1.08rem; margin:0}
.site p{color:var(--ink-2); font-size:.88rem; line-height:1.5}
.site .go{font-size:.84rem; color:var(--accent)}

/* news feed */
.feed{list-style:none; margin:0; padding:0}
.feed li{display:grid; grid-template-columns:6.5rem 6rem minmax(0,1fr); gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); align-items:baseline}
.feed li:first-child{border-top:1px solid var(--line)}
.feed .d{color:var(--ink-3); font-size:.85rem}
.pill{justify-self:start; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:999px; background:var(--sunk); color:var(--ink-2)}
.pill.book{background:var(--accent-tint); color:var(--accent)}
.pill.grant{color:var(--gold)}
.feed .t{font-size:.95rem}
.feed .t small{display:block; color:var(--ink-3); font-size:.84rem}

/* research themes */
.themes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.theme{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.6rem}
.theme .ix{font-family:var(--serif); color:var(--accent); font-size:.95rem; font-style:italic}
.th-head{display:flex; align-items:center; justify-content:space-between}
.theme .ico{display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:10px; background:var(--accent-tint); color:var(--accent)}
.theme .ico svg{width:28px; height:28px}
.theme h3{font-size:1.15rem}
.theme p{color:var(--ink-2); font-size:.92rem}
.theme ul{margin:.25rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem; border-top:1px solid var(--line); padding-top:.75rem}
.theme li{font-size:.85rem; line-height:1.45; color:var(--ink-2)}
.theme li i{color:var(--ink)}

/* figure: c-chart */
.figure{margin:2rem 0 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem 1rem}
.figure figcaption{display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; justify-content:space-between; color:var(--ink-2); font-size:.85rem; margin-top:.5rem}
.figure .fh{font-family:var(--serif); font-size:1rem}
.chart-scroll{overflow-x:auto}
#cchart{display:block; width:100%; min-width:560px; height:auto}
#cchart text{font-family:var(--sans); fill:var(--ink-3); font-size:11px}
#cchart .grid{stroke:var(--line)}
#cchart .lim{stroke:var(--gold); stroke-dasharray:5 4; stroke-width:1.2}
#cchart .cl{stroke:var(--ink-3); stroke-width:1}
#cchart .bar{fill:var(--ink-3); opacity:.35; transition:opacity .15s}
#cchart .bar.sig{fill:var(--accent); opacity:.9}
#cchart g.yr{cursor:pointer}
#cchart g.yr:hover .bar,#cchart g.yr:focus .bar{opacity:.85}
#cchart g.yr:focus{outline:none}
#cchart .lbl-lim{fill:var(--gold)} #cchart .lbl-sig{fill:var(--accent); font-weight:600}

/* books */
.books{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.book{display:flex; flex-direction:column; gap:.6rem}
.cover{aspect-ratio:2/3; max-width:100%; border-radius:3px 6px 6px 3px; padding:1rem .9rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.18) 0 6px,transparent 6px), var(--c,#33415C); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 18px -10px rgba(0,0,0,.35)}
.cover .ct{font-family:var(--serif); font-size:1.02rem; line-height:1.2; padding-left:.3rem}
.cover .ca{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; padding-left:.3rem}
.cover .cp{font-size:.72rem; opacity:.85; padding-left:.3rem; border-top:1px solid rgba(255,255,255,.35); padding-top:.5rem}
.book .meta{font-size:.84rem; color:var(--ink-2); line-height:1.45}
.book .meta b{display:block; font-weight:600; color:var(--ink)}
.book .meta .ar{display:block; font-size:.9rem; color:var(--ink)}
.book-img{display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:3px 6px 6px 3px; background:var(--sunk); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 18px -10px rgba(0,0,0,.35)}
a.book-link{display:block; transition:transform .15s}
a.book-link:hover{transform:translateY(-2px)}

/* publication list */
.tools{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:2.5rem 0 1rem}
.search{flex:1 1 15rem; min-width:0; display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.15rem .75rem}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1; min-width:0; border:0; background:none; font:inherit; color:var(--ink); padding:.45rem 0}
.search input:focus{outline:none}
.seg{display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.seg button{border:0; background:none; font:inherit; font-size:.85rem; color:var(--ink-2); padding:.5rem .8rem; cursor:pointer; border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.status{color:var(--ink-3); font-size:.85rem; min-height:1.5em; margin-bottom:.25rem}
.status button{border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; padding:0; text-decoration:underline}
.year-h{font-family:var(--serif); font-size:1.05rem; color:var(--ink-3); margin:1.25rem 0 .25rem; padding-bottom:.35rem; border-bottom:1px solid var(--line)}
.pubs{list-style:none; margin:0; padding:0}
.pub{padding:.7rem 0 .7rem 1rem; border-left:2px solid transparent; display:grid; gap:.3rem}
.pub:hover{border-left-color:var(--accent); background:linear-gradient(90deg,var(--sunk),transparent)}
.pub .c{font-size:.92rem; line-height:1.55; overflow-wrap:anywhere}
.pub .c b{font-weight:600}
.pub .c mark{background:var(--accent-tint); color:inherit}
.pub .acts{display:flex; gap:1rem; font-size:.8rem}
.pub .acts button{border:0; background:none; padding:0; font:inherit; color:var(--ink-3); cursor:pointer}
.pub .acts button:hover{color:var(--accent)}
.pub .kind{font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}

/* teaching & mentoring */
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem}
.rows{list-style:none; margin:0; padding:0}
.rows li{display:grid; grid-template-columns:5rem minmax(0,1fr); gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.92rem; line-height:1.5}
.rows li:first-child{border-top:1px solid var(--line)}
.rows .y{color:var(--ink-3); font-size:.85rem}
.rows small{display:block; color:var(--ink-3); font-size:.83rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chips span{font-size:.84rem; padding:.3rem .65rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.students{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
.stu{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.95rem 1.05rem; display:grid; gap:.3rem}
.stu .h{display:flex; justify-content:space-between; gap:.5rem; align-items:baseline}
.stu .h b{font-weight:600; font-size:.95rem}
.stu .h span{font-size:.78rem; color:var(--ink-3); white-space:nowrap}
.stu .deg{color:var(--accent); font-weight:600}
.stu p{font-family:var(--serif); font-style:italic; font-size:.93rem; line-height:1.45; color:var(--ink-2)}
.stu small{color:var(--ink-3); font-size:.8rem}

/* career */
.timeline{list-style:none; margin:0; padding:0 0 0 1.25rem; position:relative}
.timeline::before{content:""; position:absolute; left:.3rem; top:.5rem; bottom:.5rem; width:1px; background:var(--line)}
.timeline li{position:relative; padding:.2rem 0 1.25rem}
.timeline li::before{content:""; position:absolute; left:-1.2rem; top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--ink-3)}
.timeline li.now::before{border-color:var(--accent); background:var(--accent)}
.timeline .when{font-size:.82rem; color:var(--ink-3)}
.timeline b{display:block; font-weight:600; font-size:.97rem}
.timeline span.org{color:var(--ink-2); font-size:.9rem}

/* service */
.masthead{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:2rem}
.mast{border-radius:var(--r); padding:1.2rem 1.3rem; background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.mast .label{color:var(--accent)}
.mast h3{font-size:1.15rem; margin-top:.35rem}
.grants-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.grants{width:100%; border-collapse:collapse; font-size:.88rem; min-width:42rem}
.grants th{text-align:left; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--sunk)}
.grants td{padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45}
.grants tr:last-child td{border-bottom:0}
.grants td.p{white-space:nowrap; color:var(--ink-3)}
.grants td.f{color:var(--ink-2)}
.grants td.b{text-align:right; white-space:nowrap}
.grants th:last-child{text-align:right}
.more-row{margin-top:.75rem}

/* contact */
.audiences{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.aud{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; display:grid; gap:.4rem; align-content:start}
.aud h3{font-size:1.02rem}
.aud p{color:var(--ink-2); font-size:.9rem}
.cta-band{margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; padding:1.2rem 1.35rem; border-radius:var(--r); background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.cta-band h3{font-size:1.1rem}
.cta-band p{color:var(--ink-2); font-size:.9rem; margin-top:.2rem}
.foot-base .foot-cta{padding:.35rem .75rem; font-size:.8rem; margin-left:.4rem; color:var(--accent-ink)}
.bio{margin-top:2rem; background:var(--sunk); border-radius:var(--r); padding:1.25rem 1.35rem}
.bio-h{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem}
.bio p{font-family:var(--serif); font-size:.98rem; line-height:1.65; color:var(--ink)}
.bio-tools{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.bio-tools .seg button{padding:.42rem .75rem}
.bio-ar{font-family:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic","Segoe UI",Tahoma,serif!important; font-size:1.08rem!important; line-height:1.95!important; text-align:right}
.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 1.25rem); transform:translate(-50%,1rem); opacity:0; background:var(--ink); color:var(--bg); padding:.55rem 1rem; border-radius:999px; font-size:.88rem; transition:opacity .2s,transform .2s; pointer-events:none; z-index:50}
.toast.show{opacity:1; transform:translate(-50%,0)}

footer{border-top:1px solid var(--line); margin-top:1rem; background:var(--sunk)}
.foot{max-width:76rem; margin-inline:auto; padding:2.25rem clamp(16px,3vw,32px) 1.5rem; display:grid; grid-template-columns:1.3fr .8fr 1fr 1.2fr; gap:2rem; color:var(--ink-2); font-size:.88rem; line-height:1.6}
.foot .f-name{font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin-bottom:.35rem}
.foot .label{margin-bottom:.5rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--accent)}
.foot-base{max-width:76rem; margin-inline:auto; padding:1rem clamp(16px,3vw,32px) 2rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; color:var(--ink-3); font-size:.82rem}

/* responsive */
@media (max-width: 960px){
  .shell{grid-template-columns:1fr}
  .card{position:static; display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.4rem 1.25rem; align-items:start}
  .card .photo{grid-row:span 4}
  .card .links{grid-column:1 / -1}
  .books{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* print: a clean CV */
@media print{
  :root{--bg:#fff; --surface:#fff; --sunk:#fff; --ink:#000; --ink-2:#222; --ink-3:#555; --line:#ccc; --accent:#8A1538; --accent-tint:#fff}
  body{font-size:10.5pt; line-height:1.45}
  .top,.actions,.tools,.status,.more-row,.figure,.toast,.skip,.bio-h button,.pub .acts,.sites,.book-img,.cover,.expertise,.photo,.audiences,footer,.motif,.theme-go,.bio-tools,.bio-ar{display:none!important}
  .shell{display:block; padding:0}
  .card{position:static; display:block; border-bottom:1px solid #ccc; padding-bottom:.6rem; margin-bottom:1rem}
  .links{display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; border:0; padding:0}
  .links a::after{content:" (" attr(href) ")"; font-size:8pt; color:#555}
  section.sec{padding:0 0 1rem!important; border:0!important; break-inside:auto}
  h2,h3{break-after:avoid}
  .theme,.stu,.cited li,.mast,.stat,.rows li,.pub{break-inside:avoid}
  .themes,.students,.two,.masthead,.cited{gap:.5rem}
  .grants-wrap{overflow:visible; border:0}
  .grants{min-width:0; font-size:8.5pt}
  a{color:inherit}
}
@media (max-width: 640px){
  .card{grid-template-columns:6rem minmax(0,1fr)}
  .card h1{font-size:1.35rem}
  .card .creds{grid-column:1 / -1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .themes,.two,.students,.masthead,.audiences,.sites,.cited{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr; gap:1.4rem}
  .path{grid-template-columns:1fr; gap:0; padding-left:1.6rem}
  .path::before{left:.35rem; right:auto; top:.4rem; bottom:.4rem; width:2px; height:auto}
  .path li{padding:0 0 1.2rem}
  .path li::before{left:-1.6rem; top:.3rem}
  .feed li{grid-template-columns:auto minmax(0,1fr); gap:.3rem .75rem}
  .feed .t{grid-column:1 / -1}
  .rows li{grid-template-columns:1fr; gap:.1rem}
  .brand{display:none}
}

/* ===== multi-page layout (Phase 2, 11 Oct 2026) ===== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-999px; top:.5rem; z-index:60; background:var(--accent); color:var(--accent-ink); padding:.5rem .9rem; border-radius:var(--r)}
.skip:focus{left:.75rem}
.site-top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-top-in{max-width:80rem; margin-inline:auto; padding-inline:clamp(16px,3vw,32px); display:flex; align-items:center; gap:1rem; min-height:3.6rem}
.site-top .brand{font-family:var(--serif); font-weight:600; color:var(--ink); font-size:1.02rem; white-space:nowrap}
.site-top .brand:hover{color:var(--accent); text-decoration:none}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.1rem; flex-wrap:nowrap}
.site-nav a{display:block; color:var(--ink-2); font-size:.86rem; font-weight:500; padding:.45rem .5rem; border-radius:var(--r); white-space:nowrap}
.site-nav a:hover{background:var(--sunk); color:var(--ink); text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--accent); background:var(--accent-tint)}
.site-tools{display:flex; align-items:center; gap:.5rem; flex:none}
.nav-toggle{display:none; flex:none; width:2.5rem; height:2.5rem; place-items:center; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); cursor:pointer}
.nav-toggle .x{display:none}
.nav-open .nav-toggle .bars{display:none} .nav-open .nav-toggle .x{display:block}
@media (max-width:1279px){
  .site-top-in{flex-wrap:wrap}
  .site-tools{margin-left:auto}
  .nav-toggle{display:grid}
  .site-nav{order:3; flex-basis:100%; margin:0; display:none; padding:.25rem 0 .9rem}
  .nav-open .site-nav{display:block}
  .site-nav ul{flex-direction:column; gap:.1rem}
  .site-nav a{padding:.7rem .75rem; font-size:1rem}
}
main.page{max-width:76rem; margin-inline:auto; padding:clamp(1.75rem,4vw,3rem) clamp(16px,3vw,32px) clamp(2.5rem,6vw,4rem)}
.page-head{max-width:46rem; margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.page-head h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.page-head .lede{color:var(--ink-2); margin-top:.6rem; font-size:1.02rem}
.block{padding-block:clamp(1.75rem,4vw,2.5rem); border-top:1px solid var(--line); scroll-margin-top:5rem}
.block:first-of-type{border-top:0; padding-top:0}
.block > h2{font-size:clamp(1.35rem,2.4vw,1.65rem); margin-bottom:1.1rem}
.block-h{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; flex-wrap:wrap; margin-bottom:1.1rem}
.block-h h2{font-size:clamp(1.35rem,2.4vw,1.65rem)}
.more{font-weight:500; font-size:.92rem; white-space:nowrap}
.prose{max-width:46rem; color:var(--ink-2)} .prose p+p{margin-top:.9rem}
.hello{font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.45rem); line-height:1.5; max-width:40em; color:var(--ink)}
.hello em{color:var(--accent); font-style:italic}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,2.5rem)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.stats{margin-top:0}

/* hero */
.home-hero{display:grid; grid-template-columns:minmax(0,1fr) 15.5rem; gap:clamp(1.5rem,5vw,3.5rem); align-items:center; padding-bottom:clamp(1.75rem,4vw,2.5rem)}
.home-hero .kicker{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.home-hero h1{font-size:clamp(1.9rem,4.2vw,2.75rem); margin-top:.55rem}
.home-hero .postnom{color:var(--accent); font-weight:600; letter-spacing:.03em; margin-top:.35rem}
.home-hero .title{font-size:1.08rem; color:var(--ink); margin-top:.6rem; font-weight:500}
.home-hero .place{color:var(--ink-2); font-size:.95rem}
.home-hero .statement{color:var(--ink-2); margin-top:.95rem; max-width:40em; font-size:1rem; line-height:1.65}
.home-hero .actions{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.25rem}
.home-hero .portrait{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#fff; aspect-ratio:600/642}
.home-hero .portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%}
.idrow{list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .5rem}
.idrow a{display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:.28rem .7rem; background:var(--surface)}
.idrow a:hover{color:var(--accent); border-color:var(--accent); text-decoration:none}
.idrow svg{flex:none; color:var(--ink-3)}
@media (max-width:720px){
  .home-hero{grid-template-columns:1fr 6.5rem; gap:1rem; align-items:start}
  .home-hero .portrait{grid-column:2; grid-row:1}
  .home-hero .txt{grid-column:1 / -1; grid-row:1}
  .home-hero .txt > .kicker,.home-hero .txt > h1,.home-hero .txt > .postnom{margin-right:7.5rem}
  .home-hero h1{font-size:1.75rem}
  .home-hero .statement{font-size:.95rem; margin-top:.75rem}
  .home-hero .actions .btn{padding:.55rem .85rem}
}

/* home blocks */
.areas3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.area{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.25rem; display:flex; flex-direction:column; gap:.55rem}
.area .ico,.theme .ico{display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:10px; background:var(--accent-tint); color:var(--accent)}
.area h3{font-size:1.1rem}
.area p{color:var(--ink-2); font-size:.92rem}
.selpubs{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.selpubs li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.95rem 1.1rem; display:grid; gap:.25rem}
.selpubs .t{font-family:var(--serif); font-size:1.03rem; color:var(--ink)}
.selpubs .m{color:var(--ink-2); font-size:.88rem}
.selpubs .m b{font-weight:600; color:var(--ink)}
.awards{list-style:none; margin:0; padding:0}
.awards li{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.93rem}
.awards li:first-child{border-top:1px solid var(--line)}
.awards .y{color:var(--ink-3); font-size:.86rem}
.awards small{display:block; color:var(--ink-3); font-size:.83rem}
.teach-sum{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1.5rem; align-items:start}
.teach-sum p{color:var(--ink-2)}
.linkcards{display:grid; gap:.6rem}
.linkcards a{display:flex; justify-content:space-between; gap:1rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.8rem 1rem; color:var(--ink)}
.linkcards a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.linkcards small{display:block; color:var(--ink-3); font-size:.82rem}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(1.5rem,4vw,2.5rem); align-items:start}
.cbox{background:var(--sunk); border-radius:var(--r); padding:1.15rem 1.25rem; display:grid; gap:.5rem}
.cbox p{color:var(--ink-2)}
.idlist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.idlist li{background:var(--surface); padding:.75rem 1rem; display:grid; gap:.1rem}
.idlist b{font-weight:600; font-size:.92rem}
.idlist a{font-size:.88rem; overflow-wrap:anywhere}
.consult-card{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem 1.25rem; align-items:center; padding:1.3rem 1.4rem; border-radius:var(--r); background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.consult-card .ico{display:grid; place-items:center; width:3rem; height:3rem; border-radius:10px; background:var(--surface); color:var(--accent)}
.consult-card h2{font-size:1.25rem; margin:0}
.consult-card p{color:var(--ink-2); font-size:.93rem; margin-top:.2rem}
.theme .ix{margin-left:auto}
.theme-go{align-self:start; margin-top:auto}
#cchart a.yr:focus{outline:none} #cchart a.yr:focus .bar,#cchart a.yr:hover .bar{opacity:.85}
@media (max-width:960px){ .areas3,.grid3{grid-template-columns:1fr} .teach-sum,.contact-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .grid2,.idlist{grid-template-columns:1fr} .consult-card{grid-template-columns:1fr} .awards li{grid-template-columns:1fr; gap:.1rem} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* footer */
footer.site-foot{border-top:1px solid var(--line); background:var(--sunk)}
.foot{grid-template-columns:1.2fr .9fr 1fr 1.25fr}
@media (max-width:960px){ .foot{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .foot{grid-template-columns:1fr} }

/* no decorative motion */
.motif{display:none}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important} }

.home-hero .portrait-wrap{display:block; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#fff; aspect-ratio:600/642}
.home-hero .portrait-wrap img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%}
@media (max-width:720px){ .home-hero .portrait-wrap{grid-column:2; grid-row:1} }

/* ===== Phase 3 components ===== */
.crumbs{font-size:.86rem; color:var(--ink-3); margin-bottom:1rem} .crumbs a{color:var(--ink-2)}
.pub-head{max-width:52rem} .pub-head h1{font-size:clamp(1.45rem,2.8vw,2rem); line-height:1.25}
.pub-head .authors,.book-hero .authors{margin-top:.75rem; color:var(--ink-2)} .pub-head .authors b,.book-hero .authors b{color:var(--ink); font-weight:600}
.pub-head .venue{color:var(--ink-3); margin-top:.3rem}
.chips .chip{display:inline-block; font-size:.8rem; padding:.25rem .65rem; border-radius:999px; background:var(--accent-tint); color:var(--accent); margin:0 .35rem .35rem 0}
.facts{display:grid; grid-template-columns:9rem minmax(0,1fr); gap:.45rem 1rem; margin:0; max-width:46rem; font-size:.93rem}
.facts dt{color:var(--ink-3)} .facts dd{margin:0; overflow-wrap:anywhere}
.cite-box{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-top:.8rem; max-width:52rem}
.cite-h{display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.55rem .8rem; border-bottom:1px solid var(--line); flex-wrap:wrap}
.cite-box pre,.cite-apa{margin:0; padding:.75rem .9rem; font-size:.84rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere}
.cite-box pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.btn.sm{padding:.3rem .65rem; font-size:.8rem}
.src-note{color:var(--ink-3); font-size:.82rem; margin-top:.6rem}
.back{margin-top:1.5rem}
.book-hero{display:grid; grid-template-columns:13rem minmax(0,1fr); gap:clamp(1.25rem,4vw,2.5rem); align-items:start; margin-bottom:1.5rem}
.book-hero img{width:100%; height:auto; border-radius:3px 6px 6px 3px; border:1px solid var(--line); box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.book-hero h1{font-size:clamp(1.5rem,3vw,2.1rem)} .book-hero .lede{color:var(--ink-2); margin-top:.35rem}
.ar-title{font-family:"Noto Naskh Arabic","Traditional Arabic",serif; font-size:1.25rem; margin-top:.4rem}
.toc{margin:0; padding-left:1.3rem; display:grid; gap:.35rem; max-width:46rem}
.outputs{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; max-width:52rem}
.outputs li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .7rem; align-items:baseline}
.outputs li small{grid-column:2; color:var(--ink-3); font-size:.84rem}
.tag.ok{font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#1F6B3A; background:#E3F2E8; padding:.1rem .45rem; border-radius:999px}
:root[data-theme="dark"] .tag.ok{color:#9BDBB0; background:#16321F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tag.ok{color:#9BDBB0; background:#16321F} }
.refs{margin:0; padding:0; list-style:none; display:grid; gap:.5rem; max-width:52rem; font-size:.92rem}
.refs .n{color:var(--accent); font-weight:600}
.projects{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.proj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; color:var(--ink)}
.proj:hover{border-color:var(--accent); text-decoration:none} .proj h3{font-size:1.08rem} .proj p{color:var(--ink-2); font-size:.9rem} .proj .go{color:var(--accent); font-size:.86rem; margin-top:auto}
.gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem}
.gfig{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem}
.gfig figcaption{font-size:.84rem; color:var(--ink-2); margin-top:.4rem}
.gfx{width:100%; height:auto; display:block}
.gfx .g-axis{stroke:var(--ink-3); stroke-width:1} .gfx .g-grid{stroke:var(--line); stroke-width:1}
.gfx .g-tx{fill:var(--ink-3); font:11px var(--sans)} .gfx .g-lab{fill:var(--ink-2); font:12px var(--sans)}
.gfx .g-lim{fill:none; stroke:var(--gold); stroke-width:1.5; stroke-dasharray:6 4} .gfx .g-cl{stroke:var(--ink-3); stroke-dasharray:2 4}
.gfx .g-shift{stroke:var(--ink-3); stroke-dasharray:1 5; stroke-width:1.2}
.gfx .g-line{fill:none; stroke:var(--ink-2); stroke-width:1.6} .gfx .g-pt{fill:var(--ink-2)} .gfx .g-ooc{fill:var(--accent)}
.gfx .g-note{fill:var(--ink-2); font:11.5px var(--sans)} .gfx .g-note.ooc{fill:var(--accent); font-weight:600}
.gfx .g-prof{fill:none; stroke:var(--ink-3); stroke-width:1.2; opacity:.8} .gfx .g-prof-out{fill:none; stroke:var(--accent); stroke-width:2.4}
.gfx .g-fit-ls{stroke:var(--gold); stroke-width:2; stroke-dasharray:7 5} .gfx .g-fit-rob{stroke:var(--accent); stroke-width:2.4}
.gfx .g-note.rob{fill:var(--accent)} .gfx .g-note.ls{fill:var(--gold)}
.pub .pt{font-family:var(--serif); font-size:1rem; color:var(--ink); display:block}
.pub .pt:hover{color:var(--accent)} .pub .pa{font-size:.86rem; color:var(--ink-2)} .pub .pa b{color:var(--ink); font-weight:600}
.pub .pv{font-size:.84rem; color:var(--ink-3)}
.filters{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:.75rem 0 .25rem}
.filters label{display:grid; gap:.2rem; font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.filters select,.filters input{font:inherit; font-size:.9rem; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.45rem .55rem; min-width:0}
.yr2{display:flex; gap:.35rem; align-items:center} .yr2 select{flex:1}
.teach-groups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.tg{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.15rem} .tg h3{font-size:1.02rem; margin-bottom:.5rem}
.tg ul{margin:0; padding-left:1.1rem; color:var(--ink-2); font-size:.9rem}
.methods{display:grid; gap:.75rem}
.method{display:grid; grid-template-columns:2.75rem minmax(0,1fr); gap:.9rem; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem}
.method .ico{display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:10px; background:var(--accent-tint); color:var(--accent)}
.method h3{font-size:1.02rem} .method p{color:var(--ink-2); font-size:.92rem; margin-top:.2rem}
@media (max-width:960px){ .projects,.gallery,.teach-groups{grid-template-columns:1fr} .filters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .book-hero{grid-template-columns:8rem minmax(0,1fr)} .facts{grid-template-columns:1fr; gap:.1rem} .facts dd{margin-bottom:.45rem} .filters{grid-template-columns:1fr} }