/* ============================================================
   ACADEMIC PROFILE · Roshan Amar Ujala
   Elite, restrained scholarly homepage. Sticky identity rail +
   reading column. Brand continuity via the serif display face;
   a calm paper-white palette with a single deep-blue accent.
   ============================================================ */
:root{
  --ink:#1c1a17;
  --ink-soft:#403c35;
  --muted:#6f685e;
  --faint:#787061;
  --bg:#fbfaf7;
  --paper:#ffffff;
  --accent:#1f3a66;          /* deep academic blue (the CV's link color) */
  --accent-deep:#15294a;
  --accent-tint:#eef2f8;
  --accent-line:#d6e0ef;
  --line:#e7e2d8;
  --line-soft:#f0ece3;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rail:300px;
  --read:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:16.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1px}
em{font-style:italic}

/* accessibility */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ====== LAYOUT ====== */
.layout{
  max-width:1160px;margin:0 auto;padding:0 36px;
  display:grid;grid-template-columns:var(--rail) 1fr;gap:60px;align-items:start;
}

/* ====== IDENTITY RAIL ====== */
.rail{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:46px 34px 30px 0;border-right:1px solid var(--line);
  scrollbar-width:thin;
}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.rail-photo{display:flex;justify-content:center;margin:0 0 22px}
.rail-photo img{
  width:138px;height:138px;object-fit:cover;object-position:center 12%;
  border-radius:14px;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(31,58,102,.16);
}
.rail-name{font-family:var(--serif);font-size:2rem;font-weight:600;line-height:1.04;letter-spacing:.3px;color:var(--ink)}
.rail-name a{color:inherit}
.rail-name a:hover{color:var(--ink);text-decoration:none}
.rail-role{font-size:.94rem;color:var(--ink-soft);margin-top:9px;font-weight:500}
.rail-affil{display:block;font-size:.88rem;color:var(--muted);margin-top:4px}
.rail-affil a{color:var(--muted)}
.rail-loc{display:block;font-size:.82rem;color:var(--faint);margin-top:6px;letter-spacing:.2px}
.rail-tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--accent);line-height:1.35;margin-top:16px}

/* icon link row */
.rail-icons{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.ic{
  width:38px;height:38px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);transition:.2s;
}
.ic svg{width:18px;height:18px;display:block}
/* brand colours at rest (ORCID is green via its own SVG fill); hover still turns white-on-accent because that rule follows */
.ic[aria-label="Email"]{color:#ea4335}
.ic[aria-label="LinkedIn"]{color:#0a66c2}
.ic[aria-label="X"]{color:#1d1d1f}
.ic:hover{color:#fff;background:var(--accent);border-color:var(--accent);transform:translateY(-2px);text-decoration:none}

/* CV button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:10px 18px;border-radius:8px;font-size:.85rem;font-weight:500;letter-spacing:.2px;
  transition:.2s;cursor:pointer;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-tint);color:var(--accent-deep)}
.btn svg{width:15px;height:15px}
.rail-cv{display:flex;margin-top:20px}
.rail-cv .btn{width:100%}

/* rail nav (scrollspy) */
.rail-nav{margin-top:26px;display:flex;flex-direction:column;gap:1px}
.rail-nav a{
  position:relative;font-size:.83rem;font-weight:500;color:var(--muted);
  padding:7px 0 7px 16px;border-left:2px solid transparent;transition:.18s;letter-spacing:.2px;
}
.rail-nav a::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:2px;height:0;background:var(--accent);transition:height .2s;
}
.rail-nav a:hover{color:var(--ink);text-decoration:none;padding-left:20px}
.rail-nav a.active{color:var(--accent);font-weight:600}
.rail-nav a.active::before{height:18px}
.rail-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:.8rem}
.rail-foot a{color:var(--muted);font-weight:500}

/* ====== CONTENT ====== */
.content{max-width:var(--read);padding:46px 0 0}
.lead-intro{
  font-family:var(--serif);font-size:1.6rem;line-height:1.4;color:var(--ink);
  font-weight:500;margin-bottom:6px;letter-spacing:.2px;
}
.lead-intro .hl{color:var(--accent)}

.sec{padding:34px 0;border-top:1px solid var(--line-soft);scroll-margin-top:24px}
.sec:first-of-type{border-top:0;padding-top:24px}
.sec h2{
  font-family:var(--serif);font-size:1.62rem;font-weight:600;color:var(--ink);
  letter-spacing:.3px;margin-bottom:18px;padding-bottom:11px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:12px;
}
.sec h2 .n{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:1.5px;color:var(--accent);
  background:var(--accent-tint);border-radius:5px;padding:3px 7px;transform:translateY(-3px)}
.sec p{margin-bottom:13px;color:var(--ink-soft)}
.sec p:last-child{margin-bottom:0}
#about .sec-body p{font-size:1.06rem;line-height:1.68}

/* research interest tags */
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tags li{
  list-style:none;font-size:.85rem;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);
  padding:6px 13px;border-radius:30px;transition:.2s;
}
.tags li:hover{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent-deep)}

/* highlighted doctoral-research block */
.feature-block{
  background:linear-gradient(180deg,var(--accent-tint),#fff);
  border:1px solid var(--accent-line);border-left:3px solid var(--accent);
  border-radius:12px;padding:24px 28px;
}
.feature-block .thesis-title{font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--accent-deep);line-height:1.3;margin-bottom:12px}
.feature-block p{color:var(--ink-soft)}
.feature-block .methods{font-size:.92rem;color:var(--muted);margin-top:14px;padding-top:13px;border-top:1px solid var(--accent-line)}
.feature-block .methods b{color:var(--ink-soft)}

/* NEWS / highlights */
.news{list-style:none;display:flex;flex-direction:column;gap:0}
.news li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.news li:last-child{border-bottom:0}
.news .when{font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);padding-top:2px}
.news .what{font-size:.96rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:520px){.news li{grid-template-columns:1fr;gap:3px}.news .when{padding-top:0}}

/* entries (title + right date + sub) */
.entry{margin-bottom:19px}
.entry:last-child{margin-bottom:0}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.entry-title{font-size:1.04rem;font-weight:600;color:var(--ink)}
.entry-date{font-size:.82rem;color:var(--faint);font-style:italic;white-space:nowrap}
.entry-sub{font-size:.95rem;color:var(--muted);margin-top:3px}
.entry ul{margin:8px 0 0;padding-left:0;list-style:none}
.entry ul li{position:relative;padding-left:17px;margin-bottom:5px;font-size:.95rem;color:var(--ink-soft)}
.entry ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent-line)}

/* subsection label (used inside Publications) */
.subhead{font-size:.71rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);font-weight:700;margin:22px 0 10px}
.subhead:first-child{margin-top:0}

/* publications */
.pubs{list-style:none;counter-reset:pub}
.pubs li{position:relative;padding:14px 0 14px 38px;border-bottom:1px solid var(--line-soft)}
.pubs li:last-child{border-bottom:0}
.pubs li::before{
  counter-increment:pub;content:counter(pub);
  position:absolute;left:0;top:15px;
  font-size:.72rem;font-weight:700;color:var(--accent);
  background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:50%;
  width:23px;height:23px;display:flex;align-items:center;justify-content:center;
}
.pub-title{font-size:1.02rem;color:var(--ink);font-weight:500;line-height:1.4}
.pub-title a{color:var(--ink)}
.pub-title a:hover{color:var(--accent)}
.pub-meta{font-size:.86rem;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.pub-venue{font-style:italic}
.pub-tag{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:var(--accent-tint);border-radius:4px;padding:2px 7px;font-style:normal}
.pub-read{font-weight:600;font-size:.84rem;white-space:nowrap}
.pub-read::after{content:" ↗"}
.more-writing{margin-top:16px;font-size:.92rem;color:var(--muted)}
.more-writing a{font-weight:600}

/* plain dashed list (talks, working paper, awards) */
.dlist{list-style:none}
.dlist li{position:relative;padding-left:19px;margin-bottom:11px;font-size:.97rem;color:var(--ink-soft);line-height:1.5}
.dlist li:last-child{margin-bottom:0}
.dlist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent-line)}
.dlist b{color:var(--ink)}
.dlist em{color:var(--ink);font-style:italic}
.outlet{color:var(--muted)}

/* key-value rows */
.kv{margin-bottom:13px;font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.kv:last-child{margin-bottom:0}
.kv b{display:block;font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-weight:700}

/* practice bridge */
.bridge-actions{margin-top:16px}

/* contact */
.contact-grid{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.98rem;margin-bottom:18px}
.contact-grid a{font-weight:500}
.refs{margin-top:6px}
.note{font-size:.9rem;color:var(--muted);margin-top:6px}

/* footer */
.afoot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 46px;font-size:.82rem;color:var(--faint);text-align:center}
.afoot a{color:var(--muted)}

/* back to top */
#toTop{
  position:fixed;bottom:22px;right:22px;z-index:80;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#fff;border:0;font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.3s;
  box-shadow:0 8px 22px rgba(31,58,102,.35);
}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{background:var(--accent-deep)}

/* reveal-on-scroll (only when JS active; otherwise content is visible) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ====== RESPONSIVE ====== */
/* Feminism in India author-profile card (the site blocks iframing, so we feature it and link out) */
.fii-card{margin:18px 0 6px;padding:18px 20px;border:1px solid var(--accent-line);border-left:4px solid var(--accent);border-radius:12px;background:var(--accent-tint)}
.fii-card .fii-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fii-card .fii-mark{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--accent);line-height:1}
.fii-card .fii-tag{font-size:.62rem;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:#fff;background:var(--accent);padding:3px 9px;border-radius:20px}
.fii-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin:0 0 12px}
.fii-card .fii-link{font-weight:600;color:var(--accent);text-decoration:none;font-size:.9rem}
.fii-card .fii-link:hover{text-decoration:underline}

@media(max-width:960px){
  .layout{grid-template-columns:1fr;gap:0;padding:0 26px}
  .rail,.content{min-width:0;overflow-wrap:anywhere}
  .rail{
    position:static;height:auto;overflow:visible;border-right:0;
    padding:34px 0 0;
  }
  .rail-photo{margin-bottom:16px}
  .rail-photo img{width:104px;height:104px}
  .rail-name{font-size:2.1rem}
  .rail-tag{display:none}
  /* nav becomes a sticky horizontal scroller under the identity block */
  .rail-nav{
    flex-direction:row;gap:4px;margin-top:24px;overflow-x:auto;
    position:sticky;top:0;z-index:50;background:rgba(251,250,247,.95);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);padding:8px 0;scrollbar-width:none;
  }
  .rail-nav::-webkit-scrollbar{display:none}
  .rail-nav a{
    border-left:0;border-bottom:2px solid transparent;padding:6px 12px;white-space:nowrap;border-radius:0;
  }
  .rail-nav a::before{display:none}
  .rail-nav a:hover{padding-left:12px}
  .rail-nav a.active{border-bottom-color:var(--accent)}
  .rail-foot{display:block;margin-top:14px;padding-top:14px}
  .content{max-width:none;padding:14px 0 0}
  .sec{scroll-margin-top:72px}  /* clear the sticky horizontal nav on anchor jumps */
  .lead-intro{font-size:1.42rem}
}
@media(max-width:560px){
  .layout{padding:0 18px}
  .rail-icons{gap:8px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ====== PRINT · clean CV ====== */
@media print{
  :root{--bg:#fff}
  body{font-size:10.3pt;line-height:1.4;color:#000;background:#fff}
  .rail-icons,.rail-cv,.rail-nav,.rail-foot,.rail-tag,#toTop,.skip,.bridge-actions,.afoot a{display:none!important}
  .layout{display:block;max-width:none;padding:0}
  .rail{border:0;padding:0 0 8pt;display:flex;gap:14px;align-items:center}
  .rail-photo{margin:0}
  .rail-photo img{width:84px;height:84px;box-shadow:none}
  .rail-name{font-size:20pt}
  .content{max-width:none;padding:0}
  .lead-intro{font-size:12pt}
  .sec{padding:8pt 0;border-color:#ccc;break-inside:avoid}
  .sec h2{font-size:12pt;color:#000;border-color:#bbb}
  .sec h2 .n{display:none}
  .entry,.pubs li,.news li,.feature-block{break-inside:avoid}
  .feature-block{background:#fff;border-color:#999}
  .tags li,.pub-tag{background:#fff;border:1px solid #999}
  a{color:#000;text-decoration:none}
  .pub-read{display:none}
}