/* =====================================================================
   Dr. Sundara Pandiyan S — professional site
   Type: Source Serif 4 / Source Sans 3 (Adobe Originals, via Google Fonts)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root{
  color-scheme: light;
  --paper:#faf8f4;
  --surface:#ffffff;
  --surface-2:#f3f0e9;
  --line:#e2ddd2;
  --line-soft:#eeeae1;
  --ink:#1a1a17;
  --ink-2:#4a4741;
  --muted:#807b71;
  --accent:#1e3a5f;
  --accent-2:#2f5c96;
  --accent-soft:#e8eef6;
  --gold:#8a6d2f;
  --radius:12px;
  --shadow:0 1px 2px rgba(26,26,23,.05), 0 2px 8px rgba(26,26,23,.05);
  --shadow-lg:0 4px 24px rgba(26,26,23,.10);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#14140f;
    --surface:#1c1c18;
    --surface-2:#232320;
    --line:#32312c;
    --line-soft:#26261f;
    --ink:#f2efe8;
    --ink-2:#c9c4b8;
    --muted:#918b7f;
    --accent:#9bc0ea;
    --accent-2:#b7d3f6;
    --accent-soft:#1a2634;
    --gold:#d3ab5c;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 4px 24px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#14140f; --surface:#1c1c18; --surface-2:#232320;
  --line:#32312c; --line-soft:#26261f;
  --ink:#f2efe8; --ink-2:#c9c4b8; --muted:#918b7f;
  --accent:#9bc0ea; --accent-2:#b7d3f6; --accent-soft:#1a2634; --gold:#d3ab5c;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 4px 24px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ---------- skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{max-width:var(--wrap); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:22px}
.brand{font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink);
  letter-spacing:-.015em; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand small{display:block; font-family:var(--sans); font-weight:400; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:1px}
.nav nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.nav nav a{
  color:var(--ink-2); font-size:14.5px; font-weight:500;
  padding:7px 11px; border-radius:7px;
}
.nav nav a:hover{background:var(--surface-2); text-decoration:none; color:var(--ink)}
.nav nav a[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; padding:7px 11px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav nav{display:none; width:100%; margin:0; flex-direction:column; gap:2px; padding-top:10px}
  .nav.open nav{display:flex}
  .nav{flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding:64px 0 52px; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:center}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero{padding:40px 0 36px}
}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px}
.hero h1{font-size:clamp(34px, 5vw, 50px); font-weight:700; margin-bottom:14px}
.hero .role{font-size:19px; color:var(--ink-2); line-height:1.45; margin:0 0 6px}
.hero .role strong{color:var(--ink); font-weight:600}
.hero .place{font-size:15.5px; color:var(--muted); margin:0 0 20px}
.descriptors{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.descriptors span{font-size:13px; font-weight:500; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:20px}

/* portrait — image data lives in portrait.css */
.portrait{
  width:100%; max-width:300px; aspect-ratio:420/527;
  background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  filter:drop-shadow(0 12px 28px rgba(26,26,23,.18));
}
.portrait-round{
  width:168px; height:168px; border-radius:50%;
  background-size:150%; background-position:50% 12%; background-repeat:no-repeat;
  background-color:var(--surface-2); border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* ---------- buttons ---------- */
/* Solid buttons need text that contrasts with --accent, which flips between
   a dark navy (light mode) and a pale blue (dark mode). Ghost buttons always
   take the accent as their text colour, so they must be excluded from that. */
.btn{display:inline-block; border:1px solid var(--accent); background:var(--accent);
  padding:11px 20px; border-radius:9px; font-weight:600; font-size:15px}
.btn:not(.ghost){color:#fff}
.btn:not(.ghost):hover{background:var(--accent-2); border-color:var(--accent-2);
  text-decoration:none; color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn:not(.ghost),
  :root:not([data-theme="light"]) .btn:not(.ghost):hover{color:#10161d}
}
:root[data-theme="dark"] .btn:not(.ghost),
:root[data-theme="dark"] .btn:not(.ghost):hover{color:#10161d}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent); text-decoration:none}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- sections ---------- */
section.band{padding:56px 0; border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:0}
.band h2{font-size:27px; margin-bottom:8px}
.band .lede{color:var(--ink-2); font-size:17px; max-width:62ch; margin:0 0 30px}
.section-label{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; box-shadow:var(--shadow)}
.stat b{display:block; font-family:var(--serif); font-size:32px; font-weight:700;
  line-height:1.1; color:var(--accent)}
.stat span{display:block; font-size:13.5px; color:var(--muted); margin-top:5px}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow)}
.card h3{font-size:18px; margin-bottom:8px}
.card p{margin:0; color:var(--ink-2); font-size:15.5px}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--ink-2); font-size:15.5px}
.card ul li{margin-bottom:5px}
a.card{display:block; color:inherit}
a.card:hover{text-decoration:none; border-color:var(--accent); box-shadow:var(--shadow-lg)}
a.card .more{display:inline-block; margin-top:12px; color:var(--accent); font-weight:600; font-size:14.5px}

/* ---------- timeline ---------- */
.timeline{border-left:2px solid var(--line); padding-left:26px; margin-left:6px}
.tl-item{position:relative; padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-33px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--accent); border:2px solid var(--paper)}
.tl-item .yr{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--gold);
  text-transform:uppercase}
.tl-item h3{font-size:18px; margin:3px 0 2px}
.tl-item .org{color:var(--ink-2); font-size:15.5px; margin:0 0 8px}
.tl-item ul{margin:0; padding-left:18px; color:var(--ink-2); font-size:15px}
.tl-item ul li{margin-bottom:4px}

/* ---------- lists ---------- */
.pubs{list-style:none; margin:0; padding:0; counter-reset:pub}
.pubs li{background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin-bottom:12px; font-size:15.5px; color:var(--ink-2)}
.pubs li .t{color:var(--ink); font-weight:600; display:block; margin-bottom:4px;
  font-family:var(--serif); font-size:16.5px; line-height:1.35}
.pubs li .meta{display:block; margin-top:6px; font-size:13.5px; color:var(--muted)}
.tagrow{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.tag{font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; background:var(--accent-soft); color:var(--accent)}
.tag.q1{background:rgba(138,109,47,.14); color:var(--gold)}
.plain{list-style:none; margin:0; padding:0}
.plain li{padding:11px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2); font-size:15.5px}
.plain li:last-child{border-bottom:0}
.plain li strong{color:var(--ink); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips span{font-size:14px; font-weight:500; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); padding:8px 14px; border-radius:22px}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.idlist{list-style:none; margin:0; padding:0; font-size:15.5px}
.idlist li{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft);
  align-items:baseline; flex-wrap:wrap}
.idlist li:last-child{border-bottom:0}
.idlist .k{min-width:120px; color:var(--muted); font-size:13.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase}
.idlist .v{color:var(--ink-2); word-break:break-word}

/* ---------- footer ---------- */
footer.site{background:var(--surface-2); border-top:1px solid var(--line);
  padding:38px 0 30px; margin-top:0}
.foot{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start}
.foot .col{flex:1; min-width:210px}
.foot h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-family:var(--sans); font-weight:600; margin-bottom:10px}
.foot p, .foot a{font-size:14.5px; color:var(--ink-2); margin:0 0 6px; display:block}
.foot a:hover{color:var(--accent)}
.copyright{border-top:1px solid var(--line); margin-top:26px; padding-top:18px;
  font-size:13.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}

@media print{
  header.site, footer.site, .btn-row, .menu-btn{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .card, .stat, .pubs li{border:1px solid #ccc; box-shadow:none}
}