/* ===========================================================================
   Shared stylesheet for mdabashar.github.io
   Extracted from index.html on 2026-08-20 when publications.html was added,
   so the two pages cannot drift apart visually.
   Redesigned 2026-11-02: navy hero band, timeline, cards, scroll reveal.
   =========================================================================== */

:root{
  --bg:#f6f7fb; --surface:#fff; --ink:#0f1b2d; --muted:#5a6578;
  --rule:#e3e7ef; --accent:#1f4fa8; --accent-2:#c8892b; --accent-soft:#eaf0fb;
  --hero-1:#0b1d3a; --hero-2:#143a6e; --hero-ink:#f3f6fb; --hero-muted:#b9c6db;
  --shadow:0 1px 2px rgba(15,27,45,.04), 0 6px 24px -8px rgba(15,27,45,.12);
  --shadow-lg:0 2px 4px rgba(15,27,45,.05), 0 18px 40px -14px rgba(15,27,45,.22);
  --radius:14px;
  --serif:"Source Serif 4",Charter,"Iowan Old Style",Georgia,Cambria,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220; --surface:#121b2c; --ink:#e7ecf4; --muted:#9aa6ba;
    --rule:#223049; --accent:#7fa9ff; --accent-2:#e6b05a; --accent-soft:#16233b;
    --hero-1:#060d1a; --hero-2:#10264a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 26px -10px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 20px 44px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.7;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; transition:color .15s}
a:hover{text-decoration:underline; text-underline-offset:3px}
strong{font-weight:600}
::selection{background:color-mix(in srgb, var(--accent) 25%, transparent)}

/* ---- navigation ---- */
nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.navin{
  max-width:1040px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px;
}
.brand{
  font-family:var(--serif); font-weight:700; font-size:1.05rem;
  color:var(--ink); white-space:nowrap; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.brand:hover{text-decoration:none; color:var(--accent)}
.brand i{
  font-style:normal; font-family:var(--sans); font-size:.6rem; font-weight:700;
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--hero-2),var(--accent));
  letter-spacing:.02em;
}
nav ul{
  margin:0 0 0 auto; padding:0;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 4px; list-style:none;
  font-size:13.5px;
}
nav li{margin:0}
nav ul a{
  display:block; padding:16px 9px; color:var(--muted); font-weight:500;
  position:relative;
}
nav ul a::after{
  content:""; position:absolute; left:9px; right:9px; bottom:9px; height:2px;
  border-radius:2px; background:var(--accent); transform:scaleX(0);
  transition:transform .2s ease;
}
nav ul a:hover{color:var(--ink); text-decoration:none}
nav ul a:hover::after, nav ul a.here::after{transform:scaleX(1)}
nav ul a.here{color:var(--ink)}

/* ---- hero ---- */
.hero{
  position:relative; overflow:hidden; color:var(--hero-ink);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(127,169,255,.28), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(200,137,43,.20), transparent 60%),
    linear-gradient(135deg,var(--hero-1),var(--hero-2));
}
.hero::before{
  /* faint dot grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
}
.hero-in{
  position:relative; max-width:1040px; margin:0 auto; padding:76px 24px 84px;
  display:flex; gap:44px; align-items:center; flex-wrap:wrap;
}
.photo{
  width:188px; height:188px; border-radius:50%; object-fit:cover; flex:none;
  border:4px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 8px rgba(255,255,255,.08), 0 24px 50px -16px rgba(0,0,0,.6);
  background:var(--hero-2);
}
.headtext{flex:1 1 420px; min-width:260px}
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 10px;
}
.hero h1{
  font-family:var(--serif); font-size:clamp(2.3rem,5vw,3.4rem); line-height:1.06;
  margin:0 0 14px; letter-spacing:-.02em; font-weight:700; color:#fff;
}
.role{font-size:1rem; color:var(--hero-muted); margin:0 0 22px; line-height:1.65}
.role strong{color:#fff; font-weight:600; font-size:1.08rem}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 26px}
.chips li{
  margin:0; font-size:.78rem; font-weight:500; padding:5px 12px; border-radius:999px;
  color:var(--hero-ink); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.cta{display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:10px; font-size:.88rem; font-weight:600;
  transition:transform .15s ease, background .15s, box-shadow .15s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:#fff; color:var(--hero-1); box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.btn-primary:hover{color:var(--hero-1); background:#eef3ff}
.btn-ghost{color:#fff; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.04)}
.btn-ghost:hover{color:#fff; background:rgba(255,255,255,.12)}

/* ---- layout ---- */
main{max-width:1040px; margin:0 auto; padding:0 24px 40px}
section{padding-top:72px}
h1{
  font-family:var(--serif); font-size:2.4rem; line-height:1.15; margin:0 0 10px;
  letter-spacing:-.02em; font-weight:700;
}
h2{
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2rem); font-weight:700;
  letter-spacing:-.015em; line-height:1.2; color:var(--ink);
  margin:0 0 26px; display:flex; align-items:center; gap:14px;
}
h2::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--rule),transparent);
}
h2::before{
  content:""; width:6px; height:26px; border-radius:3px; flex:none;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
h3{font-size:1.04rem; margin:0 0 4px; font-weight:600; line-height:1.4}
section > h3, .sub{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:34px 0 14px;
}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:1.15em}
li{margin-bottom:6px}
.lede{color:var(--muted); font-size:.98rem}

/* ---- about ---- */
#about p{font-size:1.04rem; max-width:72ch}
#about p:first-of-type{
  font-family:var(--serif); font-size:1.3rem; line-height:1.55; color:var(--ink);
}

/* ---- entries / experience timeline ---- */
.entry{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:14px; box-shadow:var(--shadow);
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.entry:hover{box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 30%, var(--rule))}
.entry-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:6px 14px; flex-wrap:wrap;
}
.when{
  font-size:.74rem; font-weight:600; color:var(--accent);
  white-space:nowrap; letter-spacing:.03em;
  background:var(--accent-soft); padding:3px 10px; border-radius:999px;
}
.where{color:var(--muted); font-size:.93rem; margin:0 0 6px}
.entry ul{margin:8px 0 0; font-size:.95rem}
.entry li::marker{color:var(--accent)}

.timeline{position:relative; padding-left:30px}
.timeline::before{
  content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2) 60%,var(--rule));
  border-radius:2px;
}
.timeline .entry{position:relative}
.timeline .entry::before{
  content:""; position:absolute; left:-29px; top:26px; width:14px; height:14px;
  border-radius:50%; background:var(--bg); border:3px solid var(--accent);
}
.timeline .entry.now::before{
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- awards ---- */
ul.awards{list-style:none; padding:0; display:grid; gap:10px}
ul.awards li{
  display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:baseline;
  margin:0; padding:14px 18px; background:var(--surface);
  border:1px solid var(--rule); border-radius:12px;
}
ul.awards li > strong:first-child{
  font-family:var(--serif); font-size:1.05rem; color:var(--accent-2);
}
.income{
  margin-top:18px; padding:20px 24px; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent-soft),var(--surface));
  border:1px solid var(--rule);
}

/* ---- cards (research interests, impact) ---- */
ul.cards{
  list-style:none; padding:0; margin:0 0 14px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px;
}
ul.cards li{
  margin:0; padding:20px 22px; background:var(--surface); font-size:.93rem;
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
  color:var(--muted); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
ul.cards li:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
ul.cards li::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
ul.cards li strong{display:block; color:var(--ink); font-size:1.02rem; margin-bottom:4px}
ul.cards.impact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
ul.cards.impact li strong{font-family:var(--serif); font-size:1.15rem}

/* ---- professional activities ---- */
#activities ul{
  list-style:none; padding:8px 24px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
}
#activities li{
  margin:0; padding:11px 0 11px 26px; position:relative; font-size:.95rem;
  border-bottom:1px solid var(--rule);
}
#activities li:last-child{border-bottom:0}
#activities li::before{
  content:""; position:absolute; left:2px; top:20px; width:8px; height:8px;
  border-radius:2px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}

/* ---- metrics ---- */
.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px; margin:0 0 18px;
}
.metric{
  background:var(--surface); padding:20px 14px; text-align:center;
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
}
.metric b{
  display:block; font-family:var(--serif); font-size:2.2rem; line-height:1.1; font-weight:700;
  color:var(--accent);
}
.metric span{
  font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted);
}

/* ---- publications ---- */
ol.pubs{list-style:none; counter-reset:pub; padding:0; margin:0 0 14px}
ol.pubs li{
  counter-increment:pub; position:relative;
  margin:0 0 10px; padding:14px 18px 14px 58px; font-size:.93rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
}
ol.pubs li::before{
  content:counter(pub,decimal-leading-zero); position:absolute; left:18px; top:14px;
  font-family:var(--serif); font-weight:700; color:var(--accent-2); font-size:1rem;
}
.venue{color:var(--muted); font-style:italic}
.cited{
  font-size:.7rem; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:2px 9px;
  margin-left:6px; white-space:nowrap; font-style:normal;
}
.more{
  margin-top:22px; padding:20px 24px; border-radius:var(--radius);
  border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--rule));
  background:color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
/* full publication list: year-grouped */
.yeargroup{margin:0 0 30px}
.yearhead{
  font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--ink);
  margin:0 0 12px; padding-bottom:6px; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline;
  text-transform:none; letter-spacing:-.01em;
}
.yearhead span{
  font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em;
}
ul.publist{list-style:none; padding:0; margin:0}
ul.publist li{
  margin:0 0 8px; padding:12px 16px 12px 96px; position:relative; font-size:.93rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
}
.tag{
  position:absolute; left:14px; top:14px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  border-radius:5px; padding:2px 7px; color:var(--muted);
  background:var(--bg); border:1px solid var(--rule);
}
.tag.j{border-color:transparent; color:var(--surface); background:var(--accent)}

/* ---- tables ---- */
.tablewrap{
  overflow-x:auto; margin:0 0 14px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%; font-size:.92rem; min-width:560px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--rule); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--accent-soft)}
td:first-child{font-weight:600}
#mentorship td:nth-child(4), #research td:nth-child(2){white-space:nowrap}
th{
  font-size:.68rem; text-transform:uppercase; background:var(--bg);
  letter-spacing:.09em; color:var(--muted); font-weight:700;
}

/* ---- misc ---- */
.note{
  position:relative; margin:22px 0 16px; padding:16px 20px 16px 22px; font-size:.96rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow); border-left:4px solid var(--accent-2);
}
.contact-panel{
  border-radius:20px; padding:40px 36px; color:var(--hero-ink); text-align:center;
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(127,169,255,.25), transparent 60%),
    linear-gradient(135deg,var(--hero-1),var(--hero-2));
  box-shadow:var(--shadow-lg);
}
.contact-panel p{color:var(--hero-muted); margin:0 auto 22px; max-width:52ch}
.contact-panel .big{font-family:var(--serif); font-size:1.6rem; color:#fff; margin-bottom:6px}
.contact{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  list-style:none; padding:0; margin:0;
}
.contact li{margin:0}
.contact a{
  display:inline-block; border-radius:10px; padding:9px 18px;
  font-size:.86rem; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);
  transition:background .15s, transform .15s;
}
.contact a:hover{background:rgba(255,255,255,.16); text-decoration:none; transform:translateY(-1px)}
.contact li:first-child a{background:#fff; color:var(--hero-1); border-color:#fff}
.outlets{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:4px 0 18px;
}
.outlets li{
  font-family:var(--serif); font-size:.95rem; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow);
  border-radius:10px; padding:8px 16px; margin:0;
}
footer{
  border-top:1px solid var(--rule); margin-top:64px; padding:24px 0 8px;
  font-size:.8rem; color:var(--muted); text-align:center;
}
footer a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* publications page header block */
#all{padding-top:56px}
#all h1{font-size:clamp(2.2rem,5vw,3rem)}

/* ---- scroll reveal (only when JS has opted in) ---- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media print{
  .js .reveal{opacity:1; transform:none}
  nav{position:static}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  *{transition:none !important}
}

@media (max-width:820px){
  .brand span{display:none}
  nav ul{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  nav ul::-webkit-scrollbar{display:none}
  nav ul a{white-space:nowrap; padding:15px 8px}
  .navin{gap:12px; padding:0 16px}
}
@media (max-width:560px){
  body{font-size:16px}
  html{scroll-padding-top:56px}
  main{padding:0 16px 32px}
  section{padding-top:52px}
  .hero-in{padding:44px 16px 52px; gap:24px; text-align:left}
  .photo{width:116px; height:116px}
  #about p:first-of-type{font-size:1.14rem}
  .entry{padding:16px 18px}
  .timeline{padding-left:22px}
  .timeline::before{left:4px}
  .timeline .entry::before{left:-24px}
  ul.awards li{grid-template-columns:1fr; gap:2px}
  ul.cards{grid-template-columns:1fr}
  ol.pubs li{padding-left:18px; padding-top:38px}
  ol.pubs li::before{top:12px}
  ul.publist li{padding-left:16px; padding-top:38px}
  .tag{top:12px; left:16px}
  .contact-panel{padding:30px 20px}
}