/* =========================================================
   Hasin Rehana — Site Styles (v8, full file)
   ========================================================= */

/* ---------- THEME TOKENS ---------- */
:root{
  --bg:#ffffff;
  --text:#202124;
  --muted:#5f6368;
  --link:#1a73e8;
  --border:#e5e7eb;
  --card:#f8f9fa;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);

  /* timeline accent */
  --rail:#c7d2fe;
  --dot:#6366f1;
  --dot-halo:rgba(99,102,241,.22);
}
:root.dark{
  --bg:#0e131a;
  --text:#e5e7eb;
  --muted:#a3aab3;
  --link:#8ab4f8;
  --border:#1f2937;
  --card:#0b1016;
  --shadow:0 1px 3px rgba(0,0,0,.5);

  --rail:#334155;
  --dot:#8b8dfb;
  --dot-halo:rgba(139,141,251,.2);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--text); line-height:1.75;
}
a{color:var(--link); text-underline-offset:2px}
a:hover{text-decoration:underline}

.hr-container{max-width:1180px; margin:0 auto; padding:0 20px}
.hr-section{padding:56px 0; border-top:1px solid var(--border)}
.hr-section:first-of-type{border-top:none; padding-top:64px}
.h-title{font-size:42px; font-weight:800; margin:0 0 16px}
.muted-line{color:var(--muted); margin:-6px 0 16px}

/* ---------- HEADER / NAV ---------- */
.hr-header{position:sticky; top:0; z-index:1000; background:var(--bg); border-bottom:1px solid var(--border)}
.hr-header.scrolled{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.hr-nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.hr-brand{font-weight:900; font-size:22px; color:var(--text); text-decoration:none}
.hr-navlinks{display:flex; gap:22px; margin:0 auto}
.hr-navlink{color:var(--muted); text-decoration:none; font-weight:700; padding:6px 0; position:relative; letter-spacing:.1px}
.hr-navlink:hover{color:var(--text)}
.hr-navlink.active{color:var(--link)}
.hr-navlink.active::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; background:var(--link); border-radius:2px}
.hr-actions{display:flex; gap:10px; align-items:center}
.hr-ibtn{width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:transparent; display:grid; place-items:center; cursor:pointer}
.hr-ibtn svg{fill:var(--muted)}
.hr-hide-desktop{display:none}

/* mobile menu */
.hr-mobile-menu{display:none; position:fixed; inset:72px 0 auto 0; z-index:900; background:var(--bg); border-bottom:1px solid var(--border); padding:10px 18px; flex-direction:column; gap:8px}
.hr-mobile-menu.open{display:flex}
.hr-mlink{color:var(--muted); text-decoration:none; padding:8px 6px}
.hr-mlink:hover{color:var(--text)}

/* ---------- HERO (about + avatar) ---------- */
.hr-hero{
  display:grid;
  grid-template-columns:320px 1fr;   /* pulled earlier like Anish */
  gap:28px;
  align-items:flex-start;
}
.hr-bio{display:flex; flex-direction:column; align-items:center}
.hr-avatar{
  width:220px; height:220px; object-fit:cover; border-radius:999px;
  background:#ddd; border:6px solid #fff; box-shadow:var(--shadow);
}
.hr-name{font-size:36px; font-weight:900; margin:16px 0 6px; text-align:center}
.hr-role{color:var(--muted); font-size:18px; text-align:center}
.hr-affil{color:var(--link); text-decoration:none; margin:6px 0 14px}
.hr-affil:hover{text-decoration:underline}

/* socials */
.hr-socials{display:flex; gap:12px; margin-top:6px}
.hr-sbtn{
  width:40px; height:40px; border-radius:9999px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
  color:var(--text); text-decoration:none; font-weight:800;
}
.hr-sbtn svg{fill:var(--text)}

.about p{margin:0 0 14px; line-height:1.65; font-size:18px}
.updated{color:var(--muted); font-style:italic}

/* ---------- LISTS / PILLS ---------- */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.timeline .time{color:var(--link); font-weight:600}
.pubs{margin:0; padding-left:18px}
.pubs li{margin:0 0 10px}
.pill{
  display:inline-block; padding:.18rem .5rem; border:1px solid var(--border);
  border-radius:9999px; background:var(--card); text-decoration:none;
  margin-left:8px; font-size:.82rem;
}
.bullets{margin:0; padding-left:18px}
.subgroup{margin-top:18px}
.subhead{font-weight:800; margin-bottom:6px}

/* ---------- FOOTER ---------- */
.footer{padding:36px 0 60px; color:var(--muted); display:flex; justify-content:space-between; align-items:center}
.footer .small-links a{color:var(--muted); text-decoration:none}
.footer .small-links a:hover{color:var(--text)}

/* ---------- FULL-SCREEN SEARCH (Anish-style) ---------- */
.ani-search{position:fixed; inset:0; z-index:2000; background:var(--bg); color:var(--text); display:none}
.ani-search.open{display:block}
.ani-x{
  position:fixed; top:28px; right:28px; width:44px; height:44px;
  border-radius:50%; border:none; background:#6b7280; color:#fff;
  font-size:22px; line-height:44px; cursor:pointer; box-shadow:var(--shadow)
}
:root.dark .ani-x{background:#475569}
.ani-wrap{max-width:1200px; margin:64px auto; padding:0 24px}
.ani-title{font-size:56px; font-weight:800; margin:0 0 20px}
@media (max-width:720px){.ani-title{font-size:40px}}
.ani-input{
  display:flex; align-items:center; gap:10px; border:1px solid var(--border);
  background:var(--bg); border-radius:9999px; padding:12px 16px; height:56px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)
}
.ani-input svg{fill:var(--muted)}
#aniField{flex:1; border:none; outline:none; background:transparent; font-size:18px; color:var(--text)}
#aniField::placeholder{color:var(--muted)}
.ani-results{list-style:none; margin:22px 0 0; padding:0; max-height:55vh; overflow:auto; border-top:1px solid var(--border)}
.ani-results .item{padding:14px 6px; border-bottom:1px solid var(--border); cursor:pointer}
.ani-results .item:hover,.ani-results .item.active{background:var(--card)}
.ani-results .lab{font-size:12px; color:var(--muted); margin-bottom:4px}
.ani-results .txt{font-size:15px}
.ani-results .empty{padding:14px 0; color:var(--muted)}
.ani-hint{color:var(--muted); font-size:12px; margin-top:10px}

/* ---------- EXPERIENCE — TIMELINE CARDS ---------- */
/* Grid with title column + timeline column (like Anish) */
.exp-grid{display:grid; grid-template-columns:360px 1fr; gap:36px; align-items:start}
@media (max-width:980px){.exp-grid{grid-template-columns:1fr}}
.exp-title .h-title{line-height:1.05}

/* --- Robust rail/dot alignment using CSS variables --- */
.exp-timeline{
  position: relative;

  /* DESKTOP defaults */
  --pad: 112px;   /* left padding for timeline so cards start right of the dot */
  --rail-x: 56px; /* rail offset from the left edge of the timeline */

  /* dot left keeps it centered on the 4px rail (22px dot => 11px half => 11-2 = 9px) */
  --dot-left: calc(var(--rail-x) - var(--pad) - 9px);

  padding-left: var(--pad);
}
.exp-rail{
  position: absolute;
  left: var(--rail-x);
  top: 0; bottom: 0;
  width: 4px; border-radius: 2px;
  background: var(--rail);
  z-index: 1 !important;
}
.exp-item{ position: relative; margin: 22px 0 38px; }
.exp-dot{
  position: absolute;
  left: var(--dot-left);
  top: 18px;
  width: 22px; height: 22px; border-radius: 999px;
  border: 4px solid #fff; background: var(--dot);
  box-shadow: 0 0 0 8px var(--dot-halo), 0 1px 3px rgba(0,0,0,.18);
  z-index: 3 !important;  /* above cards */
}
:root.dark .exp-dot{ border-color: #0e131a; }

/* Card sits to the right; never overlaps the dot */
.exp-card{
  background:var(--bg); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 22px;
  position:relative; z-index:2 !important;   /* below dot, above rail */
}
.exp-role{font-size:20px; font-weight:800; margin-bottom:4px; color:var(--text)}
.exp-place{font-size:16px; font-weight:600; margin-bottom:2px}
.exp-place a{color:var(--text); text-decoration:none}
.exp-place a:hover{color:var(--link); text-decoration:underline}
.exp-meta{color:var(--muted); font-weight:600; margin-bottom:10px}
.exp-desc{margin:0}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (max-width:980px){
  .hr-hero{grid-template-columns:1fr; gap:18px}
  .hr-navlinks{display:none}
  .hr-hide-desktop{display:grid}

  /* comfy padding on mobile/tablet */
  .hr-container{padding:0 18px}
  .hr-section{padding:44px 0}

  .exp-timeline{
    --pad: 84px;
    --rail-x: 44px;
    --dot-left: calc(var(--rail-x) - var(--pad) - 9px);
    padding-left: var(--pad);
  }
  .exp-dot{ top: 16px; }
}
@media (max-width:560px){
  .hr-container{padding:0 16px}
  .h-title{font-size:34px}

  .exp-timeline{
    --pad: 68px;
    --rail-x: 32px;
    --dot-left: calc(var(--rail-x) - var(--pad) - 9px);
    padding-left: var(--pad);
  }
  .exp-dot{ top: 14px; }
}

/* ensure mobile menu is only visible when opened */
header .hr-mobile-menu{display:none !important}
header .hr-mobile-menu.open{display:flex !important}