/* site.css — the design system for guptavis.com.
   Built 2026-10-22 from claude/site-css-starter.css (Session 3 approved mockups: home v4, publications option 1 revised).

   Rules
   - Color: black (--fg) = content you read (titles, sentences). Grey (--muted) = metadata (institutions,
     venues, years, co-authors). Maroon (--accent) = links and awards only.
   - Bold: role labels and V. Gupta in author lists. Nothing else.
   - Type: two families site-wide. Literata (serif) for the name, headings and paper titles; Public Sans for
     everything else.
   - Headings: title case. A section heading sits outside any box.
   - Papers: grey 2px left rule, maroon on hover. Awards: maroon pill with medal icon.
   - Home header: nav only. Other pages: name at left of nav.
   - At most one tinted box per page (home: Research).
*/
:root{
  --bg:#fafaf8; --surface:#f2f0ed; --fg:#22201e; --muted:#67625d; --rule:#dcd8d2; --accent:#8c1d2b; --accent-soft:#f6e9ea;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", "Helvetica Neue", Arial, sans-serif;
  --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; --t-lg:1.375rem; --t-xl:1.875rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171615; --surface:#201f1d; --fg:#ebe8e3; --muted:#a8a29b; --rule:#36332f; --accent:#e7929b; --accent-soft:#3a2427; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#171615; --surface:#201f1d; --fg:#ebe8e3; --muted:#a8a29b; --rule:#36332f; --accent:#e7929b; --accent-soft:#3a2427; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:var(--t-base); line-height:1.6; padding-inline:20px; padding-block:0 40px}
img{max-width:100%}
.wrap{max-width:52rem; margin:0 auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg.ic{width:1em; height:1em; flex:none; vertical-align:-.125em}

/* header */
header.site{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px; padding-block:22px 14px; border-bottom:1px solid var(--rule)}
header.site.landing{justify-content:flex-start}
.brand{font-family:var(--serif); font-size:var(--t-md); font-weight:500; color:var(--fg)}
.brand:hover{text-decoration:none; color:var(--accent)}
nav ul{display:flex; flex-wrap:wrap; gap:2px 20px; list-style:none; margin:0; padding:0; font-size:.9375rem}
nav a{color:var(--muted)} nav a:hover{color:var(--accent); text-decoration:none}
nav a[aria-current]{color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent)}

/* headings */
h2{font-family:var(--serif); font-weight:500; font-size:var(--t-lg); margin:0 0 18px; letter-spacing:-.005em; text-wrap:balance}
.ptitle{font-family:var(--serif); font-weight:500; font-size:var(--t-xl); margin:36px 0 14px; letter-spacing:-.01em}

/* paper entries (home + publications) */
.papers{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.papers > li{border-left:2px solid var(--rule); padding-left:16px; transition:border-color .15s}
.papers > li:hover{border-left-color:var(--accent)}
.pt{font-family:var(--serif); font-size:1.0625rem; font-weight:500; line-height:1.4; color:var(--fg)}
a.pt:hover{color:var(--accent); text-decoration:none}
.by{margin:2px 0 0; font-size:.9375rem; color:var(--muted)}
.by i{color:var(--fg)}
.by b{font-weight:600; color:var(--fg)}
.by sup, .anote sup{font-size:.7em; line-height:0}
.anote, .pnote{margin:2px 0 0; font-size:.8125rem; color:var(--muted)}
.anote{font-style:italic}
.awards{display:flex; flex-wrap:wrap; gap:6px}
.award{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:.8125rem; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:2px 10px 2px 8px; line-height:1.5; white-space:normal; text-align:left}
.award svg{width:13px; height:13px; flex:none}
.lk{display:flex; flex-wrap:wrap; gap:0 14px; align-items:baseline; margin-top:6px; font-size:.875rem}
details.ab summary{cursor:pointer; color:var(--accent); list-style:none; display:inline}
details.ab summary::-webkit-details-marker{display:none}
details.ab[open]{flex-basis:100%}
details.ab[open] summary{text-decoration:underline}
details.ab p{margin:6px 0 0; color:var(--muted); max-width:68ch; font-size:.875rem; line-height:1.55}

/* footer */
footer{margin-top:56px; padding-top:18px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 18px; font-size:.8125rem; color:var(--muted)}
.icons{display:flex; gap:16px; align-items:center}
.icons a{color:var(--muted); font-size:1.25rem; line-height:1; display:inline-flex}
.icons a:hover{color:var(--accent); text-decoration:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- home ---------- */
/* Photo spans from the title line to the end of the roles; the name sits above, the buttons below. */
.intro{display:grid; grid-template-columns:250px 1fr; grid-template-areas:". name" "photo who" ". btns"; column-gap:36px; padding-block:40px 32px}
.intro h1{grid-area:name; font-family:var(--serif); font-weight:500; font-size:var(--t-xl); line-height:1.15; margin:0 0 10px; letter-spacing:-.01em}
.intro img{grid-area:photo; width:250px; height:100%; min-height:200px; object-fit:cover; object-position:50% 30%; border-radius:6px; display:block}
.intro .who{grid-area:who; min-width:0}
.intro .btns{grid-area:btns}
.pos{margin:0; font-size:var(--t-md); line-height:1.45; color:var(--fg)}
.pos .org, .also .org{color:var(--muted)}
.pos.also{margin-top:10px}
.roles{list-style:none; margin:14px 0 0; padding:0; font-size:.9375rem; display:grid; gap:3px}
.roles li{color:var(--fg)}
.roles b{font-weight:600}
.btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.btn{display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; color:var(--fg); background:var(--bg); border:1px solid var(--rule); border-radius:6px; padding:6px 12px; line-height:1.3; text-decoration:none}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn svg{width:15px; height:15px; color:var(--accent)}

.recruit{text-align:center; margin:4px 0 28px; font-size:var(--t-md)}
.recruit a{margin-left:8px; font-weight:600; white-space:nowrap}

.research-h{margin-bottom:14px}
.research{background:var(--surface); border-radius:8px; padding:30px 32px 28px}
.lede{font-size:var(--t-base); line-height:1.6; margin:0 0 12px; text-wrap:pretty}
.framing{margin:0 0 26px}
.themes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.themes > div{min-width:0; border-top:2px solid var(--accent); padding-top:12px; display:flex; flex-direction:column}
.themes h3{font-family:var(--serif); font-size:1.0625rem; font-weight:600; line-height:1.35; margin:0 0 6px}
.themes p{margin:0 0 10px; font-size:.9375rem}
.themes .more{margin-top:auto; font-size:.875rem; font-weight:600}

.block{margin-top:52px}
.programs{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.programs > div{min-width:0; display:flex; flex-direction:column; align-items:flex-start}
.programs h3{font-family:var(--serif); font-size:1.0625rem; font-weight:600; margin:0 0 6px}
.programs p{margin:0 0 8px; font-size:.9375rem; flex:1}
.programs a.go{font-size:.875rem; font-weight:600}

@media (max-width:720px){
  .intro{grid-template-columns:1fr; grid-template-areas:"photo" "name" "who" "btns"; padding-block:28px 24px}
  .intro img{width:170px; height:170px; min-height:0; margin-bottom:20px}
  .intro h1{font-size:1.625rem}
  .themes{grid-template-columns:1fr; gap:22px}
  .research{padding:22px 18px}
  .recruit{font-size:1rem}
  .programs{grid-template-columns:1fr}
}

/* ---------- publications ---------- */
.thanks{margin:0 0 8px}
.scholar{margin:0 0 22px; font-size:.9375rem; font-weight:600}
.scholar svg{margin-right:4px}
.filter{margin:0 0 30px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.filter summary{cursor:pointer; list-style:none; padding:10px 0; font-size:.9375rem; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:8px}
.filter summary::-webkit-details-marker{display:none}
.filter summary::before{content:""; width:7px; height:7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); transition:transform .15s; margin-right:2px}
.filter[open] summary::before{transform:rotate(45deg)}
.filter summary .active{font-weight:400; color:var(--muted); font-size:.875rem}
.facets{display:grid; gap:10px; padding:2px 0 14px}
.facet{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.facet .lbl{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); min-width:6.5rem}
.chip{font:inherit; font-size:.8125rem; color:var(--fg); background:var(--bg); border:1px solid var(--rule); border-radius:999px; padding:3px 11px; cursor:pointer; line-height:1.5}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.vfacet{align-items:flex-start}
.vgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:4px 18px; flex:1; min-width:0}
.vbox{font-size:.875rem; display:flex; gap:8px; align-items:baseline; cursor:pointer}
.vbox input{accent-color:var(--accent); margin:0; transform:translateY(1px)}
.fstatus{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; font-size:.9375rem; padding-top:10px; border-top:1px dashed var(--rule)}
.fstatus span{font-weight:600}
.clear{font:inherit; font-size:.875rem; background:none; border:0; padding:0; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.legend{font-size:.9375rem; color:var(--muted); margin:0 0 26px}
.legend p{margin:0}
.empty{color:var(--muted)}
.second{margin-top:52px}
@media (max-width:720px){ .ptitle{font-size:1.625rem} .facet .lbl{min-width:0; flex-basis:100%} .vgrid{grid-template-columns:1fr} }

/* ---------- text pages (PhD, About) ---------- */
.prose{max-width:42rem}
.prose h2{margin-top:40px}
.prose p, .prose li{text-wrap:pretty}
.prose ul{padding-left:1.2em}
.prose li{margin:4px 0}
.prose .muted{color:var(--muted)}
.bio-photo{float:right; width:180px; border-radius:6px; margin:4px 0 16px 24px}
@media (max-width:720px){ .bio-photo{float:none; width:140px; margin:0 0 16px} }

/* PhD page */
.lbl{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.callout{border-left:3px solid var(--accent); background:var(--surface); border-radius:0 6px 6px 0; padding:16px 20px; margin:6px 0 24px}
.callout p{margin:0}
.callout-h{font-family:var(--serif); font-size:var(--t-lg); line-height:1.35; margin-bottom:6px!important}
.prog-cards{margin-top:4px}
.prog-cards > div{border-top:2px solid var(--accent); padding-top:12px}
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.people ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.people li{font-family:var(--serif); font-size:1.0625rem; line-height:1.35}
.people li span{display:block; font-family:var(--sans); font-size:.875rem; color:var(--muted)}
@media (max-width:720px){ .people{grid-template-columns:1fr; gap:20px} }
.orai{margin-top:22px}
.prog-cards a.go{margin-top:6px}
.people li a{color:var(--fg)} .people li a:hover{color:var(--accent); text-decoration:none}