/* =========================================================
   Gaurav Dixit — Faculty site
   Design tokens
   ========================================================= */
:root{
  /* deep umber / saffron-dark family (hero + dark accents — warm, not black) */
  --navy-950:#241206;
  --navy-900:#2E1808;
  --navy-800:#3B2210;
  --navy-700:#4A2C14;
  --navy-line:#5C3B1D;

  /* ink for light surfaces */
  --ink-900:#211A12;
  --ink-700:#4A3E32;
  --ink-500:#7A6A58;

  /* paper family (warm neutral, saffron-friendly) */
  --paper-0:#FFFFFF;
  --paper-50:#F8F4EC;
  --paper-100:#F0E8D8;
  --paper-line:#E2D5BC;

  /* accents */
  --gold-500:#F2932B;
  --gold-600:#D97B12;
  --gold-100:#FCE7C8;
  --teal-500:#3E8E63;
  --teal-100:#DCEEDF;

  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', Menlo, Consolas, monospace;

  --measure:64ch;
  --radius-s:3px;
  --radius-m:6px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--paper-50);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}
li{list-style:none;}

:focus-visible{
  outline:2.5px solid var(--gold-500);
  outline-offset:3px;
}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow-note{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.02em;
  color:var(--teal-500);
}

/* =========================================================
   Skip link
   ========================================================= */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold-500); color:var(--navy-950);
  padding:10px 18px; z-index:200; font-family:var(--font-body); font-weight:600;
  border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{left:0;}

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(245,245,241,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--paper-line);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:17px;
  text-decoration:none; color:var(--ink-900);
  white-space:nowrap;
}
.nav-mark svg{flex:none;}
.nav-links{
  display:flex; gap:28px;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  font-size:14.5px; text-decoration:none; color:var(--ink-700);
  white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.is-active{
  color:var(--ink-900); border-color:var(--gold-500);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background:radial-gradient(120% 140% at 78% -10%, #6B3D14 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color:var(--paper-50);
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
  padding-top:76px;
  padding-bottom:76px;
  min-height:640px;
}
.hero-copy .eyebrow-note{color:var(--teal-500);}
.hero-copy h1{
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);
  margin:14px 0 6px;
  color:var(--paper-0);
}
.hero-copy .hero-role{
  font-size:18px;
  color:#E8D9C4;
  max-width:46ch;
  margin-bottom:22px;
}
.hero-copy .hero-role strong{color:var(--paper-0); font-weight:600;}
.hero-tags{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-bottom:28px;
}
.hero-tags li{
  font-family:var(--font-mono); font-size:12.5px;
  border:1px solid var(--navy-line); color:#D8C6AC;
  padding:5px 11px; border-radius:999px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:var(--radius-s);
  text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gold-500); color:var(--navy-950);}
.btn-primary:hover{background:var(--gold-600);}
.btn-ghost{border-color:var(--navy-line); color:var(--paper-50);}
.btn-ghost:hover{border-color:var(--teal-500); color:var(--teal-500);}

.hero-art{position:relative;}
.hero-art svg{width:100%; height:auto;}

.hero-node{opacity:0; transform:scale(.5); transform-origin:center; transform-box:fill-box;
  animation:node-in .55s cubic-bezier(.2,.9,.3,1) forwards;}
.hero-core{opacity:0; transform:scale(.6); transform-origin:center; transform-box:fill-box;
  animation:node-in .6s cubic-bezier(.2,.9,.3,1) forwards; animation-delay:.05s;}
.hero-edge{stroke-dasharray:340; stroke-dashoffset:340; animation:edge-draw 1s ease forwards;}
.hero-dot{opacity:0; animation:dot-in .8s ease forwards;}
@keyframes node-in{to{opacity:1; transform:scale(1);}}
@keyframes edge-draw{to{stroke-dashoffset:0;}}
@keyframes dot-in{to{opacity:.55;}}

/* =========================================================
   Section scaffolding
   ========================================================= */
section{padding:88px 0;}
.section-alt{background:var(--paper-100);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.7rem, 2.6vw, 2.1rem);}
.section-kicker{
  font-family:var(--font-mono); font-size:12.5px; color:var(--gold-600);
  letter-spacing:.02em; display:block; margin-bottom:10px;
}
.section-intro{max-width:var(--measure); color:var(--ink-700);}

/* =========================================================
   About
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:56px;
}
.about-copy p{color:var(--ink-700); max-width:66ch;}
.about-copy p strong{color:var(--ink-900);}
.pull-quote{
  font-family:var(--font-display); font-style:italic; font-size:1.3rem;
  color:var(--navy-800); border-left:3px solid var(--gold-500);
  padding-left:20px; margin:28px 0; max-width:56ch;
}
.about-side{display:flex; flex-direction:column; gap:20px;}
.profile-card{
  background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m);
  padding:22px; display:flex; gap:16px; align-items:flex-start;
}
.profile-card img{
  width:78px; height:78px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold-500);
}
.profile-card h3{font-size:16px; margin-bottom:2px;}
.profile-card .role{font-size:13.5px; color:var(--ink-500); line-height:1.45;}

.timeline{border-left:1px solid var(--paper-line); padding-left:22px; display:flex; flex-direction:column; gap:22px;}
.timeline li{position:relative;}
.timeline li::before{
  content:''; position:absolute; left:-27px; top:5px;
  width:9px; height:9px; border-radius:50%; background:var(--gold-500);
  border:2px solid var(--paper-100);
}
.timeline .t-date{font-family:var(--font-mono); font-size:12px; color:var(--teal-500); display:block; margin-bottom:2px;}
.timeline .t-role{font-weight:600; font-size:15px;}
.timeline .t-org{font-size:13.5px; color:var(--ink-500);}

.edu-list{display:flex; flex-direction:column; gap:16px;}
.edu-list li{
  background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m);
  padding:16px 18px;
}
.edu-list .e-deg{font-weight:600; font-size:15px;}
.edu-list .e-inst{font-size:13.5px; color:var(--ink-500);}
.edu-list .e-year{font-family:var(--font-mono); font-size:12px; color:var(--gold-600); float:right;}

/* =========================================================
   Research
   ========================================================= */
.interest-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:56px;
}
.interest-card{
  border:1px solid var(--paper-line); border-radius:var(--radius-m);
  padding:20px 16px; background:var(--paper-0);
  transition:border-color .15s ease, transform .15s ease;
}
.interest-card:hover{border-color:var(--gold-500); transform:translateY(-2px);}
.interest-card .i-num{font-family:var(--font-mono); font-size:12px; color:var(--teal-500); display:block; margin-bottom:10px;}
.interest-card h3{font-size:15px; font-weight:600; line-height:1.35;}

.call-box{
  background:var(--navy-950); color:var(--paper-50);
  border-radius:var(--radius-m); padding:30px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  margin-bottom:64px;
}
.call-box h3{color:var(--paper-0); font-size:1.2rem; margin-bottom:6px;}
.call-box p{color:#D8C6AC; margin:0; max-width:56ch; font-size:14.5px;}

.table-wrap{overflow-x:auto; border:1px solid var(--paper-line); border-radius:var(--radius-m); background:var(--paper-0);}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:760px;}
thead th{
  text-align:left; font-family:var(--font-mono); font-weight:500; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500);
  padding:14px 16px; border-bottom:1px solid var(--paper-line); background:var(--paper-100);
}
tbody td{padding:14px 16px; border-bottom:1px solid var(--paper-line); vertical-align:top; color:var(--ink-700);}
tbody tr:last-child td{border-bottom:none;}
tbody td.proj-topic{color:var(--ink-900); font-weight:500; max-width:280px;}
tbody td.proj-role{font-family:var(--font-mono); font-size:12.5px; color:var(--gold-600);}

.collab-list{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px;}
.collab-list li{
  background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m);
  padding:16px 18px;
}
.collab-list .c-topic{font-weight:600; font-size:14.5px; margin-bottom:4px;}
.collab-list .c-person{font-size:13.5px; color:var(--ink-500);}

/* =========================================================
   Publications
   ========================================================= */
.pub-tabs{display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap;}
.pub-tab{
  font-family:var(--font-mono); font-size:13px; padding:8px 16px;
  border:1px solid var(--paper-line); border-radius:999px; background:var(--paper-0);
  cursor:pointer; color:var(--ink-700);
}
.pub-tab.is-active{background:var(--navy-950); color:var(--paper-50); border-color:var(--navy-950);}
.pub-group{display:none;}
.pub-group.is-active{display:block;}
.pub-year{
  display:flex; gap:24px; padding:20px 0; border-bottom:1px solid var(--paper-line);
}
.pub-year:first-child{padding-top:0;}
.pub-year .y-mark{
  font-family:var(--font-mono); font-size:15px; color:var(--gold-600); flex:none; width:52px; padding-top:2px;
}
.pub-year .y-items{flex:1; display:flex; flex-direction:column; gap:18px;}
.pub-item .p-title{font-family:var(--font-display); font-size:16.5px; font-weight:500; color:var(--ink-900); line-height:1.4;}
.pub-item .p-meta{font-size:13.5px; color:var(--ink-500); margin-top:3px;}
.pub-item .p-meta a{color:var(--teal-500); text-decoration:none; border-bottom:1px solid transparent;}
.pub-item .p-meta a:hover{border-color:var(--teal-500);}

/* =========================================================
   Students
   ========================================================= */
.student-groups{display:grid; grid-template-columns:1fr 1fr; gap:40px 48px;}
.student-group h3{font-size:15.5px; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--paper-line);}
.student-group ul{display:flex; flex-direction:column; gap:12px;}
.student-group .s-name{font-weight:600; font-size:14.5px;}
.student-group .s-meta{font-size:13px; color:var(--ink-500);}
.student-group .s-meta a{color:var(--teal-500); text-decoration:none;}

.awarded-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px;}
.awarded-card{
  background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:18px 20px;
}
.awarded-card .a-name{font-weight:600; font-size:15px;}
.awarded-card .a-name a{color:var(--teal-500); text-decoration:none;}
.awarded-card .a-span{font-family:var(--font-mono); font-size:12px; color:var(--gold-600); margin:3px 0 8px;}
.awarded-card .a-note{font-size:13.5px; color:var(--ink-500);}

.intern-years{margin-top:56px;}
.intern-year{display:flex; gap:20px; padding:14px 0; border-bottom:1px solid var(--paper-line);}
.intern-year .iy-year{font-family:var(--font-mono); font-size:13px; color:var(--gold-600); width:52px; flex:none;}
.intern-year .iy-list{font-size:13.5px; color:var(--ink-700); line-height:1.8;}

/* =========================================================
   Honors / Teaching
   ========================================================= */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.honor-list{display:flex; flex-direction:column;}
.honor-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--paper-line);
}
.honor-list li:first-child{padding-top:0;}
.honor-list .h-what{font-weight:600; font-size:14.5px;}
.honor-list .h-org{font-size:13px; color:var(--ink-500);}
.honor-list .h-year{font-family:var(--font-mono); font-size:12.5px; color:var(--gold-600); flex:none;}

.course-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.course-card{
  background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:16px 18px;
}
.course-card .c-name{font-weight:600; font-size:14.5px;}
.course-card .c-meta{font-family:var(--font-mono); font-size:12px; color:var(--teal-500); margin-top:4px;}

.nptel-list{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.nptel-list a{
  display:flex; justify-content:space-between; gap:12px; text-decoration:none; color:var(--ink-900);
  font-size:14px; padding:12px 16px; border:1px solid var(--paper-line); border-radius:var(--radius-s);
  background:var(--paper-0);
}
.nptel-list a:hover{border-color:var(--gold-500);}
.nptel-list .n-go{color:var(--teal-500); font-family:var(--font-mono); font-size:12px;}

/* =========================================================
   Gallery
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gallery-item{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  height:280px; background:var(--navy-800);
  display:flex; align-items:center; justify-content:center;
}
.gallery-item img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block;
}
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 14px 12px;
  background:linear-gradient(0deg, rgba(10,15,28,.88), rgba(10,15,28,0));
  color:var(--paper-50); font-size:12.5px; line-height:1.4;
}

/* =========================================================
   Contact / footer
   ========================================================= */
.contact{
  background:var(--navy-950); color:var(--paper-50);
}
.contact .section-kicker{color:var(--teal-500);}
.contact h2{color:var(--paper-0);}
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
.contact-copy p{color:#D8C6AC; max-width:52ch;}
.contact-list{display:flex; flex-direction:column; gap:18px; margin-top:26px;}
.contact-list li{display:flex; gap:14px; align-items:flex-start;}
.contact-list .c-label{font-family:var(--font-mono); font-size:11.5px; color:var(--teal-500); width:74px; flex:none; padding-top:2px;}
.contact-list a, .contact-list span{color:var(--paper-0); font-size:14.5px; text-decoration:none;}
.contact-list a:hover{color:var(--gold-500);}

.social-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.social-link{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--navy-line); border-radius:var(--radius-s);
  padding:14px 16px; text-decoration:none; color:var(--paper-0); font-size:14px;
  transition:border-color .15s ease, background .15s ease;
}
.social-link:hover{border-color:var(--gold-500); background:var(--navy-800);}
.social-link .arrow{color:var(--gold-500); font-family:var(--font-mono);}

.site-footer{
  border-top:1px solid var(--navy-line);
  padding:22px 0; font-size:12.5px; color:#A99274;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr; padding-top:52px; padding-bottom:52px; min-height:0;}
  .hero-art{order:-1; max-width:340px; margin:0 auto 12px;}
  .about-grid, .two-col, .contact-grid{grid-template-columns:1fr;}
  .interest-grid{grid-template-columns:repeat(2,1fr);}
  .student-groups{grid-template-columns:1fr;}
  .collab-list, .awarded-grid, .course-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-item{height:220px;}
}
@media (max-width:600px){
  .container{padding:0 20px;}
  section{padding:64px 0;}
  .interest-grid{grid-template-columns:1fr 1fr;}
  .pub-year{gap:14px;}
  .honor-list li{flex-direction:column; gap:4px;}
}