:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#000000;
  --border:#e6e6e6;
  --chip:#f4f4f4;
  --container: 1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:40px 0}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:32px}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

h1,h2,h3{color:var(--accent);margin:0 0 20px 0;line-height:1.2}
h1.hero-title{font-size:clamp(28px,5vw,44px);font-weight:800;margin-bottom:8px}
h2{font-size:1.8rem;font-weight:700}
h3{font-size:1.3rem;font-weight:600;margin-bottom:16px}
.hero-subtitle{font-weight:600;color:var(--muted);margin:0 0 8px 0}
.lead{font-size:1.05rem;color:#222}

/* Header / Nav with Active Indicator */
.site-header{
  position:sticky;top:0;z-index:10;background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-left{width:40px}
.nav-links{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center}
.nav-links li{position:relative}
.nav-link{
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  display:block;
  padding:4px 0;
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width .2s ease;
}
.nav-link.active::after{
  width:100%;
}
.nav-link:hover{opacity:.7}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:transparent;
  font-size:28px;
  padding:6px 10px;
  line-height:1;
  cursor:pointer;
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:56px;left:0;right:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);padding:12px 20px;
    flex-direction:column;align-items:flex-start;gap:12px;
  }
  .nav-links.open{display:flex}
  .nav-link::after{display:none} /* Hide underline on mobile */
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border:1px solid var(--accent);
  text-decoration:none;font-weight:600;border-radius:6px;
  transition:all .15s ease;
}
.btn-solid{background:var(--accent);color:#fff}
.btn-outline{background:transparent;color:var(--accent)}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-small{padding:8px 14px;font-size:.9rem}

/* Hero */
.hero-center{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 5px;
}

.hero-center p {
    margin-top: 5px; /* ensures minimal top margin for the bio paragraph */
}

.lead-narrow{ max-width: 680px; }

.headshot.round{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Social icons */
.social-icons{
  list-style:none;
  display:flex;
  gap: 16px;
  padding:0;
  margin: 12px 0;
}
.social-icons li{ display:inline-flex; }
.social-icons img{
  width:24px; height:24px;
  display:block;
  filter: grayscale(100%);
  opacity: .85;
  transition: all .15s ease;
}
.social-icons a:hover img{
  opacity: 1;
  transform: translateY(-2px);
}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.cta-center{ justify-content:center; }

/* Clean List Style - NO BOXES */
.clean-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.clean-list li{
  padding:0;
  border:none;
  background:transparent;
}

.item-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.item-title{
  font-weight:600;
  font-size:1.05rem;
  color:var(--text);
  line-height:1.4;
}

.item-meta{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:8px;
}

.item-desc{
  margin:8px 0 8px 0;
  color:#333;
  font-size:.96rem;
  line-height:1.6;
}

/* Links in items */
.item-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

.item-links a{
  color:var(--accent);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  border-bottom:1px solid var(--border);
  padding-bottom:1px;
  transition:all .15s ease;
}

.item-links a:hover{
  border-bottom-color:var(--accent);
}

/* Venue badges */
.venue-badge{
  font-size:.75rem;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:3px 10px;
  font-weight:600;
  white-space:nowrap;
}

.venue-badge.best-paper{
  background:var(--accent);
  color:#fff;
}

.project-meta{
  color:var(--muted);
  font-size:.85rem;
  font-weight:500;
}

.pub-year{
  margin-top:8px;
}

/* Experience with company logos */
.experience-list li{
  gap:12px;
}

.exp-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:8px;
}

.company-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid var(--border);
  padding:6px;
  background:#fff;
  flex-shrink:0;
}

.exp-title-group{
  flex:1;
}

/* CV Viewer - BIGGER SIZE */
.cv-section{
  padding:40px 0 60px 0;
}

.cv-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}

.cv-viewer{
  width:100%;
  height:90vh; /* Much bigger - 90% of viewport */
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:#f9f9f9;
  box-shadow:0 2px 16px rgba(0,0,0,.08);
}

.cv-viewer iframe{
  width:100%;
  height:100%;
  border:none;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:24px 0;
  background:#fafafa;
  margin-top:20px;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;font-size:.92rem;color:var(--muted);
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:var(--muted)}
.footer-links a:hover{color:var(--text)}

/* Mobile adjustments */
@media (max-width: 600px){
  .section{padding:32px 0}
  .headshot.round{width:160px;height:160px}
  .hero-title{font-size:32px}
  .cv-viewer{height:80vh} /* Slightly smaller on mobile but still big */
  .cv-header{flex-direction:column;align-items:flex-start}
  .company-logo{width:40px;height:40px}
  .exp-header{gap:10px}
  .item-title{font-size:1rem}
}


/* ===== Publications (minimal, left-thumb / right-details) ===== */

.pub-year h3 {
  margin: 1.5rem 0 1rem;
  font-weight: 700;
}

.pub-list {
  display: grid;
  gap: 1rem;
}

.pub-card {
  display: grid;
  grid-template-columns: 160px 1fr;       /* thumb | details */
  gap: 1.25rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.pub-card:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.pub-thumb {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f5f7;
}

.pub-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;      /* consistent thumbs */
  object-fit: cover;
  display: block;
  transform: scale(1.001);
}

.pub-body {
  min-width: 0;
}

.pub-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
}

.pub-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  font-size: .72rem;
  line-height: 1.2;
  border-radius: 6px;
  background: #ffe9b3;
  border: 1px solid #f3d27a;
  vertical-align: baseline;
}

.pub-meta {
  color: #57606a;
  font-size: .9rem;
  margin-bottom: .6rem;
}

.pub-venue {
  font-weight: 600;
}

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* Chips (small action buttons) */
.btn-chip {
  display: inline-block;
  font-size: .85rem;
  padding: .36rem .6rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: background .15s ease, border-color .15s ease, transform .02s ease;
}

.btn-chip:hover {
  background: #f6f8fa;
  border-color: rgba(0,0,0,0.18);
}

.btn-chip:active {
  transform: translateY(1px);
}

/* Responsive: stack on small screens */
@media (max-width: 720px) {
  .pub-card {
    grid-template-columns: 1fr;
  }
  .pub-thumb img { aspect-ratio: 16 / 9; }
}

/* Scrollable News list */
.news-list,
.news-list.scrollable {
  max-height: 320px;         /* adjust to taste */
  overflow-y: auto;
  padding-right: .5rem;      /* breathing room near scrollbar */
  margin: 0;
  list-style: none;
  scrollbar-gutter: stable;  /* avoids layout shift when scrollbar appears */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
}

/* Optional: make each item comfy */
.news-list li {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.news-list li:last-child { border-bottom: 0; }
.news-date { color: #57606a; white-space: nowrap; margin-right: .35rem; }

/* Minimal custom scrollbars */
.news-list {
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: #c7cbd1 transparent;      /* Firefox */
}
.news-list::-webkit-scrollbar { width: 8px; }
.news-list::-webkit-scrollbar-track { background: transparent; }
.news-list::-webkit-scrollbar-thumb {
  background: #c7cbd1;
  border-radius: 999px;
}
.news-list::-webkit-scrollbar-thumb:hover { background: #aeb4bc; }

/* Responsive: shorter panel on small screens */
@media (max-width: 720px) {
  .news-list,
  .news-list.scrollable { max-height: 240px; }
}

/* === Scroll card wrapper with fades + shadows === */
.scroll-card {
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  padding: 0;                /* the UL has its own padding */
  overflow: hidden;          /* contain fades */
}

/* the actual scrollable area */
.scroll-card .news-list {
  max-height: 320px;         /* tweak */
  overflow-y: auto;
  margin: 0;
  list-style: none;
  padding: .25rem 1rem;      /* room for scrollbar */
  scrollbar-gutter: stable;
}

/* items */
.news-list li {
  padding: .75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.news-list li:last-child { border-bottom: 0; }
.news-date { color: #57606a; white-space: nowrap; margin-right: .35rem; }

/* Always-visible minimal scrollbar */
.news-list { scrollbar-width: thin; scrollbar-color: #c7cbd1 transparent; }
.news-list::-webkit-scrollbar { width: 8px; }
.news-list::-webkit-scrollbar-track { background: transparent; }
.news-list::-webkit-scrollbar-thumb { background: #c7cbd1; border-radius: 999px; }
.news-list::-webkit-scrollbar-thumb:hover { background: #aeb4bc; }

/* Top/bottom gradient fades as affordances */
.scroll-card::before,
.scroll-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  pointer-events: none;
  transition: opacity .2s ease;
  opacity: 0;                /* hidden when not needed */
}
.scroll-card::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  box-shadow: 0 -6px 10px rgba(0,0,0,0.04) inset;
}
.scroll-card::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  box-shadow: 0 6px 10px rgba(0,0,0,0.04) inset;
}

/* Show fades when content overflows; hide at edges */
.scroll-card.is-scrollable::before,
.scroll-card.is-scrollable::after { opacity: 1; }
.scroll-card.at-top::before { opacity: 0; }
.scroll-card.at-bottom::after { opacity: 0; }

/* “Scroll” hint */
.scroll-hint {
  position: absolute;
  right: .75rem;
  top: .35rem;
  font-size: .78rem;
  color: #6b7280;
  background: rgba(247,248,250,.9);
  padding: .15rem .5rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  user-select: none;
  transition: opacity .3s ease, transform .3s ease;
  opacity: .95;
}
.prefers-reduced-motion .scroll-hint { transition: none; }

/* fade the hint after first scroll */
.scroll-card.scrolled .scroll-hint {
  opacity: 0;
  transform: translateY(-4px);
}

/* Mobile: shorter panel */
@media (max-width: 720px) {
  .scroll-card .news-list { max-height: 240px; }
}