/* ─────────────────────────────────────────────────────────────
   Tarikul Islam Papon — personal site
   Palette keyed to the UMass Boston blue (#005a8b).
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:       #10202c;   /* headings */
  --soft:      #37505f;   /* body copy */
  --mute:      #6b8296;   /* secondary text */
  --paper:     #ffffff;   /* page background */
  --card:      #ffffff;
  --line:      #eae5dc;   /* warm hairline */
  --hover:     #e9f0f7;   /* faint blue wash for hover / active */
  --accent:    #005a8b;   /* UMass Boston blue */
  --accent-hi: #0077b6;
  --nav-h:     62px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.72;
  color:var(--soft); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-hi); text-decoration:underline }
img{ max-width:100% }
b,strong{ color:var(--ink); font-weight:600 }

/* ── Nav ───────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1120px; margin:0 auto; padding:0 32px;
  height:var(--nav-h); display:flex; align-items:center; gap:6px;
}
.nav-name{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-size:17px; font-weight:600; color:var(--ink);
  margin-right:auto; white-space:nowrap;
}
.nav-name:hover{ text-decoration:none; color:var(--accent) }
.nav a{
  padding:6px 12px; border-radius:6px;
  font-size:15px; font-weight:500; color:var(--soft); white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav a:hover, .nav a.active{ background:var(--hover); color:var(--accent); text-decoration:none }
.nav-lab{ display:inline-flex; align-items:center; gap:7px }
.nav-lab img{ width:25px; height:25px; object-fit:contain }
.nav-pub{
  margin-left:6px; padding:6px 15px;
  border:1.5px solid var(--accent); border-radius:20px;
}
.nav-pub:hover, .nav-pub.active{ background:var(--accent); color:#fff }

/* ── Page shell: sticky profile column + content ───────────── */
.shell{
  max-width:1120px; margin:0 auto; padding:52px 32px 72px;
  display:grid; grid-template-columns:274px 1fr; gap:60px; align-items:start;
}
.side{ position:sticky; top:calc(var(--nav-h) + 40px) }
.photo{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(0,90,139,.08);
}
.side h1{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-size:1.6rem; font-weight:600; line-height:1.2;
  color:var(--ink); margin:20px 0 6px;
}
.role{ font-size:15px; color:var(--ink); font-weight:500 }
.affil{ font-size:14.5px; color:var(--mute); margin-bottom:16px }
.lns{ list-style:none; display:flex; flex-direction:column; gap:2px }
.ln{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px; margin-left:-8px; border-radius:7px;
  font-size:14.5px; font-weight:500; color:var(--soft);
  transition:background .15s, color .15s;
}
.ln svg, .ln img{
  width:21px; flex-shrink:0;      /* fixed slot keeps every label aligned */
  height:17px; object-fit:contain; fill:currentColor;
}
.ln-lab img{ height:21px }
.ln:hover{ background:var(--hover); color:var(--accent); text-decoration:none }

/* ── Sections ──────────────────────────────────────────────── */
main h2{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-size:1.45rem; font-weight:600; color:var(--ink);
  margin:0 0 22px; padding-top:14px;
  scroll-margin-top:calc(var(--nav-h) + 20px);
  position:relative;
}
main h2::before{
  content:""; position:absolute; top:0; left:0;
  width:38px; height:3px; border-radius:2px; background:var(--accent);
}
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin:38px 0 14px; padding-bottom:8px;
  border-bottom:2px solid var(--accent);
}
.sec-head:first-of-type{ margin-top:0 }
.sec-head h3{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-size:1.12rem; font-weight:600; color:var(--ink); letter-spacing:.01em;
}
.sec-head h3 span{
  display:block; font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:13.5px; font-weight:500; color:var(--mute); letter-spacing:0;
}
.sec-when{
  font-size:13.5px; color:var(--mute); white-space:nowrap;
  font-variant-numeric:tabular-nums; margin-left:auto; text-align:right;
}
section + section{ margin-top:52px }
section p + p{ margin-top:14px }

/* ── Experience ────────────────────────────────────────────── */
.exp{ border-top:1px solid var(--line) }
.exp-row{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
  padding:13px 2px; border-bottom:1px solid var(--line);
}
.exp-role{ font-weight:600; color:var(--ink); font-size:15.5px }
.exp-org{ font-size:14.5px; color:var(--mute) }
.exp-when{
  font-size:13.5px; color:var(--mute);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* ── News timeline ─────────────────────────────────────────── */
.news{ list-style:none; border-left:2px solid var(--line); padding-left:22px }
.news li{ position:relative; padding:0 0 20px }
.news li::before{
  content:""; position:absolute; left:-27px; top:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); outline:3px solid var(--paper);
}
.news .d{
  display:flex; align-items:center; gap:9px; margin-bottom:1px;
  font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--mute);
}
.tag{
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:none; padding:1px 8px; border-radius:4px;
}
.tag-publication{ background:#e7f2ea; color:#2c6b41 }
.tag-service    { background:#e5eef6; color:var(--accent) }
.tag-award      { background:#fbf0dc; color:#8a5a10 }
.tag-highlight  { background:#f7eaea; color:#9a3434 }
.news .t{ font-size:15.5px }
#more{ display:none }
#more.on{ display:block }
.more-btn{
  margin-top:2px; font:inherit; font-size:14px; font-weight:500;
  color:var(--soft); background:var(--card);
  border:1px solid var(--line); border-radius:7px;
  padding:7px 16px; cursor:pointer; transition:.15s;
}
.more-btn:hover{ border-color:var(--accent); color:var(--accent) }

/* ── Course lists (teaching page) ──────────────────────────── */
.course{
  padding:14px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
}
.course:first-of-type{ border-top:1px solid var(--line) }
.course-code{
  font-weight:600; color:var(--ink); font-size:15.5px;
}
.course-name{ font-size:14.5px; color:var(--mute) }
.course-terms{
  font-size:13.5px; color:var(--mute);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.terms-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px 40px; margin-top:4px;
}
.term h4{
  font-size:13px; font-weight:600; color:var(--accent);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px;
}
.term ul{ list-style:none; font-size:14.5px }
.term li{ padding:2px 0; color:var(--soft) }
/* ── Honors & Awards ───────────────────────────────────────── */
.honors{ list-style:none }
.honors li{
  display:flex; align-items:baseline; gap:16px;
  padding:5px 0; font-size:15.5px;
}
.honors .h-what{ color:var(--soft) }
.honors .h-what b{ color:var(--ink); font-weight:600 }
.honors .h-when{
  margin-left:auto; white-space:nowrap; text-align:right;
  font-size:13.5px; color:var(--mute); font-variant-numeric:tabular-nums;
}

/* ── Service page ──────────────────────────────────────────── */
.sec-head + .honors{ margin-bottom:6px }

.matlist{ list-style:none; font-size:15.5px }
.matlist li{ padding:5px 0 }

/* ── Contact ───────────────────────────────────────────────── */
.contact{
  display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:15.5px;
}
.contact dt{
  color:var(--mute); font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; padding-top:4px;
}

/* ── Footer ────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line); padding:22px 32px;
  text-align:center; font-size:13.5px; color:var(--mute);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; gap:36px; padding:32px 22px 56px }
  .side{
    position:static;
    display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:center;
  }
  .side h1{ margin-top:0 }
  .nav-in{ padding:0 18px; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .nav-in::-webkit-scrollbar{ display:none }
  .nav a{ padding:6px 10px; font-size:14.5px }
}
@media (max-width:560px){
  .side{ grid-template-columns:1fr }
  .photo{ max-width:230px }
  .exp-row, .course{ grid-template-columns:1fr; gap:2px }
  .exp-when, .course-terms{ font-size:13px }
}


/* ── Publications ──────────────────────────────────────────── */
.pub-filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 26px;
}
.pub-search{ position:relative; flex:1 1 260px; min-width:200px }
.pub-search-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.5; pointer-events:none;
}
.pub-search input{
  width:100%; padding:9px 12px 9px 34px;
  font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:8px;
  -webkit-appearance:none; appearance:none; transition:.15s;
}
.pub-search input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,90,139,.12);
}
.pub-filters select{
  padding:9px 30px 9px 12px;
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--card) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b8296' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 11px center/11px 7px;
  border:1px solid var(--line); border-radius:8px;
  cursor:pointer; -webkit-appearance:none; appearance:none; transition:.15s;
}
.pub-filters select:hover{ border-color:var(--accent) }
.pub-filters select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,90,139,.12);
}
.pub-clear{
  padding:9px 15px; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--soft); background:var(--card);
  border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:.15s;
}
.pub-clear:hover{ border-color:var(--accent); color:var(--accent) }
.pub-clear[hidden]{ display:none }
.pub-count{
  font-size:12.5px; color:var(--mute); margin-left:auto; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pub-list{ list-style:none }
.pub-year{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-size:1.25rem; font-weight:600; color:var(--ink);
  margin:30px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--accent);
}
.pub-year:first-child{ margin-top:0 }
.pub-item{ padding:16px 0; border-bottom:1px solid var(--line) }
.pub-badge, .pub-item .badge-high{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.03em;
  padding:2px 9px; border-radius:4px; margin-bottom:7px;
}
.pub-badge{ background:var(--hover); color:var(--accent) }
.pub-item .badge-high{ background:#f7eaea; color:#9a3434; margin-left:5px }
.pub-title{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.5 }
.pub-authors{ font-size:15px; margin-top:2px }
.pub-venue{ font-size:14.5px; color:var(--mute); font-style:italic; margin-top:2px }
.pub-links{ margin-top:7px; font-size:16px }
.pub-links a{ margin-right:9px }
.pub-links a:hover{ text-decoration:none; color:var(--accent-hi) }
.pub-icon{ padding:0 2px }
.pub-item[hidden], .pub-year[hidden]{ display:none }
@media (max-width:620px){
  .pub-filters select, .pub-clear{ flex:1 1 auto }
  .pub-count{ margin-left:0; width:100% }
}