/* =========================================================
   Dr. Haresh Selvaskandan — Editorial Prestige system
   ========================================================= */
:root{
  --navy: #0B1B33;
  --navy-2: #11254A;
  --ink: #15192A;
  --cream: #F6F1E6;
  --cream-2: #FBF8F1;
  --paper: #FFFFFF;
  --gold: #B08D57;
  --gold-2: #C9A66B;
  --slate: #4A5468;
  --slate-2: #6B7588;
  --rule: #DCD3BE;
  --rule-2: #EAE3D2;
  --max: 1180px;
  --max-narrow: 920px;
  --radius: 2px;
  --shadow-sm: 0 1px 2px rgba(11,27,51,.05);
  --shadow-md: 0 12px 30px rgba(11,27,51,.08);
  --shadow-lg: 0 24px 60px rgba(11,27,51,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--cream-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

img{max-width:100%; display:block}

/* ---------- Layout ---------- */
.container{max-width:var(--max); margin:0 auto; padding: 0 32px}
.container-narrow{max-width: var(--max-narrow); margin:0 auto; padding: 0 32px}
section{padding: 96px 0; position:relative}
section + section{border-top: 1px solid rgba(11,27,51,.06)}
.section-tight{padding: 72px 0}

/* ---------- Type ---------- */
.display{font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; letter-spacing:-.005em}
h1, h2, h3, h4{font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; color:var(--navy); margin:0}
h1{font-size: clamp(40px, 5.6vw, 68px); line-height:1.05; letter-spacing:-.012em}
h2{font-size: clamp(28px, 3.4vw, 40px); line-height:1.15}
h3{font-size: 22px; line-height:1.3}
h4{font-size: 18px; line-height:1.4}
p{margin: 0 0 14px}
.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  font-weight:600;
  color:var(--gold);
}
.lead{font-size: 19px; color: #2C3447; max-width: 64ch}
.lead-wide{max-width: 78ch}
a{color: inherit}
.muted{color: var(--slate)}
.serif-italic{font-family:'Cormorant Garamond', serif; font-style: italic; font-weight: 400}

/* Section title block */
.section-head{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom: 56px;
  max-width: 760px;
}
.section-head .rule{
  width: 56px; height: 1px; background: var(--gold);
  margin-top: 8px;
}

/* ---------- Top Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,248,241,.93);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(11,27,51,.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  max-width: 1280px; margin:0 auto;
  gap: 24px;
}
.brand{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600; font-size: 19px; color: var(--navy);
  letter-spacing:.01em;
  display:flex; align-items:center; gap: 12px;
  text-decoration: none;
}
.brand .mono{
  font-family:'Inter',sans-serif; font-weight:600; font-size: 11px;
  color: var(--gold); letter-spacing:.24em; text-transform:uppercase;
}
.nav-links{display:flex; gap: 26px; align-items:center}
.nav-links a{
  text-decoration:none; color: var(--navy);
  font-size: 13px; font-weight: 500; letter-spacing:.02em;
  opacity:.78; transition: opacity .2s ease, color .2s ease;
}
.nav-links a:hover{opacity:1; color: var(--gold)}
.nav-links a.active{opacity:1; color: var(--navy); position: relative}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height: 1px; background: var(--gold);
}
.nav-cta{
  display:inline-flex; align-items:center; gap: 8px;
  background: var(--navy); color: var(--cream) !important;
  padding: 10px 18px; text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius: var(--radius);
  transition: background .2s ease, transform .2s ease;
  opacity: 1 !important;
}
.nav-cta:hover{background: var(--navy-2); color: var(--cream) !important}
.nav-toggle{
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: 8px; color: var(--navy);
}
@media (max-width: 980px){
  .nav-links{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream-2);
    border-bottom: 1px solid rgba(11,27,51,.06);
    flex-direction: column; align-items: flex-start;
    padding: 24px 32px;
    display: none;
  }
  .nav-links.open{display: flex}
  .nav-links a{padding: 8px 0; font-size: 14px}
  .nav-toggle{display: block}
}

/* ---------- Buttons ---------- */
.cta-row{margin-top: 32px; display:flex; gap: 14px; flex-wrap: wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px; border-radius: var(--radius);
  text-decoration:none; font-size: 13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer; border: 0; font-family: inherit;
}
.btn-primary{background: var(--navy); color: var(--cream)}
.btn-primary:hover{background: var(--navy-2)}
.btn-ghost{
  background: transparent; color: var(--navy);
  border: 1px solid rgba(11,27,51,.2);
}
.btn-ghost:hover{border-color: var(--gold); color: var(--gold)}
.arrow{display:inline-block; transition: transform .2s ease}
.btn:hover .arrow{transform: translateX(3px)}

/* ---------- Page header (sub pages) ---------- */
.page-head{
  background:
    radial-gradient(900px 360px at 90% 0%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  padding: 84px 0 64px;
  border-bottom: 1px solid rgba(11,27,51,.06);
}
.page-head .crumb{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  font-weight:600;
  color:var(--gold);
  margin-bottom: 14px;
}
.page-head h1{font-size: clamp(34px, 4.6vw, 56px); max-width: 22ch}
.page-head .lead{margin-top: 18px; max-width: 70ch; color: #2C3447}
.page-head .rule{width:56px; height:1px; background: var(--gold); margin-top: 22px}

/* ---------- Hero (homepage) ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  padding: 88px 0 88px;
  border-top: 1px solid rgba(11,27,51,.04);
}
.hero-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items:center;
}
@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr; gap: 36px}
}
.hero h1 .accent{color: var(--gold)}
.hero .credentials{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 19px; color: var(--slate);
  margin: 18px 0 0;
}
.hero .roles{
  margin-top: 22px;
  display:grid; gap: 6px;
  font-size: 14.5px; color: #2C3447;
}
.hero .roles .role-line{display:flex; gap:10px; align-items:flex-start}
.hero .roles .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); margin-top: 9px; flex: 0 0 5px;
}
.hero .role-line strong{color: var(--navy); font-weight: 600}

/* Headshot card */
.portrait-card{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0;
}
.portrait-frame{
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.portrait-frame::before{
  content:""; position:absolute; left: -10px; top: -10px;
  width: 100%; height: 100%;
  border: 1px solid var(--gold);
  border-radius: 3px; z-index: -1;
}
.portrait-frame img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  filter: saturate(0.96) contrast(1.02);
}
.portrait-meta{
  margin-top: 28px;
  font-family:'Cormorant Garamond', serif;
  font-size: 18px; color: var(--navy);
  letter-spacing: .01em;
}
.portrait-meta .role{
  display:block; font-family:'Inter',sans-serif;
  font-size: 11px; color: var(--gold);
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: 8px; font-weight: 600;
}

/* ---------- Stats strip ---------- */
.stats{
  background: var(--navy);
  color: var(--cream);
  padding: 56px 0;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
@media (max-width: 820px){.stats-grid{grid-template-columns: repeat(2,1fr); gap: 32px}}
.stat-cell{
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 22px;
}
.stat-cell .num{
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(34px, 4vw, 46px);
  color: var(--cream);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}
.stat-cell .num .small{font-size: 22px; color: var(--gold-2); margin-left: 2px}
.stat-cell .lbl{
  font-size: 11px; text-transform:uppercase; letter-spacing:.2em;
  color: rgba(246,241,230,.7);
  margin-top: 10px;
}

/* ---------- Signpost grid (homepage section links) ---------- */
.signposts{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 920px){.signposts{grid-template-columns: 1fr}}
.signpost{
  display:block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 28px 26px;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.signpost:hover{transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(176,141,87,.4)}
.signpost .num{
  font-family:'Inter',sans-serif;
  font-size: 11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold); font-weight: 600;
}
.signpost h3{margin: 10px 0 8px; color: var(--navy)}
.signpost p{font-size: 14px; color: var(--slate); margin: 0}
.signpost .more{
  margin-top: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
  display: inline-flex; gap: 8px; align-items: center;
}

/* ---------- About / Pull quote ---------- */
.about-grid{display:grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items:start}
@media (max-width: 920px){.about-grid{grid-template-columns: 1fr; gap: 36px}}
.pull-quote{
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 22px;
  font-family:'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.45;
}
.chips{display:flex; flex-wrap:wrap; gap: 8px; margin-top: 24px}
.chip{
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 7px 12px; border-radius: 999px;
  font-size: 12px; color: var(--navy); font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- Two-col / List ---------- */
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap: 56px}
@media (max-width: 820px){.two-col{grid-template-columns:1fr; gap: 28px}}
.row-list{display:grid; gap: 0}
.row{
  display:grid; grid-template-columns: 92px 1fr; gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(11,27,51,.08);
}
.row .yr{
  font-family:'Cormorant Garamond',serif; color: var(--gold);
  font-size: 18px; font-weight: 600; letter-spacing: .02em;
}
.row .body strong{display:block; color: var(--navy); font-weight: 600; font-size: 15px; margin-bottom: 2px}
.row .body em{font-style: normal; color: var(--slate); font-size: 13px}
.row .body p{font-size: 14px; color: #2F384C; margin-top: 6px; margin-bottom: 0}
.row:last-child{border-bottom: 0}

/* ---------- Cards ---------- */
.grant-grid{display:grid; grid-template-columns: repeat(2,1fr); gap: 18px}
@media (max-width: 820px){.grant-grid{grid-template-columns: 1fr}}
.grant{
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 24px;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.grant:hover{transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(176,141,87,.4)}
.grant .yr{font-size: 12px; color: var(--gold); font-weight: 600; letter-spacing:.18em; text-transform:uppercase}
.grant h4{margin: 8px 0 4px; font-size: 20px; color: var(--navy)}
.grant .amount{font-family:'Cormorant Garamond',serif; font-size: 22px; color: var(--navy); font-weight: 600; margin-bottom: 8px}
.grant p{font-size: 14px; color: var(--slate); margin-bottom: 10px}
.grant .keys{font-size: 11px; color: var(--navy); letter-spacing: .14em; text-transform:uppercase; font-weight: 600}

/* ---------- Funding tabs ---------- */
.grants-tabs{display:flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap}
.tab{
  background: transparent; border: 1px solid var(--rule);
  padding: 10px 18px; cursor:pointer; border-radius: var(--radius);
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy); font-family: inherit;
  transition: background .2s, color .2s, border-color .2s;
}
.tab.active{background: var(--navy); color: var(--cream); border-color: var(--navy)}
.tab:hover:not(.active){border-color: var(--gold); color: var(--gold)}
.grant-set{display:none}
.grant-set.active{display:block}

/* ---------- Publications ---------- */
.pub-group{margin-bottom: 56px}
.pub-group .group-title{
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.pub-group .group-title h3{font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--navy)}
.pub-group .group-title .count{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.pub{
  padding: 16px 0;
  border-bottom: 1px solid rgba(11,27,51,.06);
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
}
.pub:last-child{border-bottom: 0}
.pub .pub-yr{
  font-family:'Cormorant Garamond',serif; color: var(--gold);
  font-size: 17px; font-weight: 600;
}
.pub .title{color: var(--navy); font-weight: 600; font-size: 15px; margin-bottom: 4px; line-height: 1.45}
.pub .meta{font-size: 13px; color: var(--slate); line-height: 1.55}
.pub .meta em{color: var(--navy); font-style: normal; font-weight: 600}
.pub .journal{color: var(--gold); font-style: italic; font-weight: 500}

/* ---------- Awards / Compact ---------- */
.compact{display:grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(11,27,51,.07)}
.compact:last-child{border-bottom:0}
.compact .yr{font-family:'Cormorant Garamond',serif; color: var(--gold); font-size: 17px; font-weight: 600}
.compact .body strong{color: var(--navy); font-weight: 600; font-size: 14.5px; display:block; margin-bottom: 2px}
.compact .body span{color: var(--slate); font-size: 13.5px}
.compact .body em{color: var(--slate-2); font-style: italic; font-size: 13px}

/* ---------- Supervision tiles ---------- */
.supervision-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
@media (max-width: 920px){.supervision-grid{grid-template-columns: 1fr}}
.sup-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px;
  border-radius: var(--radius);
  position: relative;
}
.sup-card .role-tag{
  font-family:'Inter',sans-serif;
  font-size: 11px; color: var(--gold);
  letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 10px; display: block;
}
.sup-card .count-num{
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px; line-height: 1; color: var(--navy);
  font-weight: 500;
}
.sup-card h3{margin-top: 12px}
.sup-card p{font-size: 14px; color: var(--slate); margin-top: 10px; margin-bottom: 0}
.sup-card.dark{background: var(--navy); color: var(--cream); border-color: var(--navy)}
.sup-card.dark .count-num{color: var(--cream)}
.sup-card.dark h3{color: var(--cream)}
.sup-card.dark p{color: rgba(246,241,230,.78)}
.sup-card.dark .role-tag{color: var(--gold-2)}

.sup-summary{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 32px;
}
@media (max-width: 820px){.sup-summary{grid-template-columns: repeat(2, 1fr)}}
.sup-stat{
  border: 1px solid var(--rule); background: var(--paper);
  padding: 22px; text-align: left; border-radius: var(--radius);
}
.sup-stat .n{font-family:'Cormorant Garamond',serif; font-size: 36px; color: var(--navy); line-height: 1}
.sup-stat .l{font-size: 11px; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; margin-top: 10px}

/* ---------- Contact / footer banner ---------- */
.contact{
  background: var(--navy);
  color: var(--cream);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.contact::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(800px 300px at 80% 20%, rgba(176,141,87,.18), transparent 60%);
  pointer-events:none;
}
.contact .container{position: relative; z-index: 1}
.contact h2{color: var(--cream); font-size: clamp(34px, 4.4vw, 56px)}
.contact .lead{color: rgba(246,241,230,.78); max-width: 60ch; margin-top: 18px}
.contact-cta{margin-top: 36px; display:flex; gap: 14px; flex-wrap: wrap}
.contact .btn-primary{background: var(--gold); color: var(--navy)}
.contact .btn-primary:hover{background: var(--gold-2)}
.contact .btn-ghost{color: var(--cream); border-color: rgba(246,241,230,.3)}
.contact .btn-ghost:hover{border-color: var(--gold); color: var(--gold)}

footer{
  background: var(--navy-2);
  color: rgba(246,241,230,.7);
  padding: 28px 0;
  font-size: 12px;
  text-align: center;
  letter-spacing: .04em;
}
footer a{color: var(--gold); text-decoration:none}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform: none}

/* ---------- Filter pills (publications) ---------- */
.filter-bar{
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.filter-bar .pill{
  background: transparent; border: 1px solid var(--rule);
  padding: 8px 14px; cursor: pointer; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); font-family: inherit;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-bar .pill.active{background: var(--navy); color: var(--cream); border-color: var(--navy)}
.filter-bar .pill:hover:not(.active){border-color: var(--gold); color: var(--gold)}