/* ========== Mobile-first, responsive CSS ========== */
:root{
  --fg:#2c3e50;
  --muted:#7f8c8d;
  --bg:#f5f5f5;
  --card:#fff;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --radius:12px;
  --pad-x:16px;
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;
  line-height:1.65; color:var(--fg); background:var(--bg);
  -webkit-text-size-adjust:100%;
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x)}

/* ========== Tab Navigation ========== */
.tab-navigation{background:var(--card); box-shadow:0 2px 10px rgba(0,0,0,.05); position:sticky; top:0; z-index:1000}
.tab-nav-container{
  max-width:var(--maxw); margin:0 auto; display:flex; gap:4px; padding:0 var(--pad-x);
}
.tab-button{
  flex:1 1 0; padding:14px 8px; background:none; border:none;
  font-size:.85rem; cursor:pointer; color:var(--muted); border-bottom:3px solid transparent;
  position:relative; border-radius:10px 10px 0 0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-width:0;
}
.tab-button:hover{color:var(--fg); background:#f8f9fa}
.tab-button.active{color:var(--fg); font-weight:600}
.tab-button.active::before{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--fg)}

/* ========== Tabs Content ========== */
.tab-content{display:none; animation:fadeIn .4s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

/* ========== Sections ========== */
.overview-section,.publications-section{padding:24px 0 40px}

.hero,.toc-section,.paper-block{
  background:var(--card); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero{margin:16px 0 20px; transition:transform .25s ease, box-shadow .25s ease}
.hero:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}

/* Profile Header Layout */
.profile-header{display:flex; flex-direction:row; align-items:flex-start; gap:16px; margin-top:0}

/* Mobile: small round image on left */
.profile-image-container{
  width:80px; height:80px; border-radius:50%; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.15); border:3px solid #fff;
  flex-shrink:0; background:#f0f0f0;
}
.profile-image{width:100%; height:100%; object-fit:cover; display:block}
.profile-info{text-align:left; width:100%; flex:1}

/* Headings */
h1{font-size:1.6rem; letter-spacing:-.3px; font-weight:700; margin-bottom:8px}
h2{font-size:1.35rem; font-weight:700; margin-bottom:12px}
.category-header h2{font-size:1.4rem}

/* Contact */
.contact-info{color:var(--muted); font-size:.88rem; margin-top:4px; text-align:left}
.contact-info p{margin:4px 0}
.contact-info a{color:#34495e; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s}
.contact-info a:hover{border-bottom-color:#34495e}

/* Personal Statement */
.personal-statement{
  background:#fafafa; padding:14px; border-left:3px solid var(--fg); margin-top:14px;
  max-height:clamp(160px, 35vh, 280px);
  overflow:auto;
  transition:background .2s, padding-left .2s, border-color .2s;
}
.personal-statement h3{font-size:1.1rem; margin-bottom:8px}
.personal-statement:hover{background:#f5f5f5; padding-left:18px}
.personal-statement::-webkit-scrollbar{width:8px}
.personal-statement::-webkit-scrollbar-track{background:#ecf0f1}
.personal-statement::-webkit-scrollbar-thumb{background:#95a5a6; border-radius:4px}
.personal-statement::-webkit-scrollbar-thumb:hover{background:#7f8c8d}

.toc-section{margin-bottom:16px}
.toc-hint,.paper-meta{color:var(--muted); font-size:.9rem}
.research-category{margin:18px 0}
.research-category:not(:last-child){border-bottom:1px solid #e6e6e6; padding-bottom:12px}
.category-title{color:var(--fg); font-size:1rem; font-weight:700; margin:12px 0 8px; padding-bottom:6px; border-bottom:1px solid #ecf0f1}

.toc-list{list-style:none}
.toc-list li{
  padding:10px 12px; margin-bottom:8px; border-left:2px solid transparent; border-radius:8px;
  transition:background .2s, padding-left .2s, border-color .2s;
}
.toc-list li:hover{background:#fafafa; border-left-color:var(--fg); padding-left:16px}
.toc-list a{color:#34495e; text-decoration:none; font-size:.98rem; cursor:pointer}

/* ========== Publications & Papers ========== */
.category-section{margin:28px 0 40px}
.category-header{margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid #e0e0e0}

.paper-block{
  margin:18px 0; transition:transform .2s ease, box-shadow .25s ease, border-left-color .25s ease;
  border-left:3px solid transparent;
}
.paper-block:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-left-color:var(--fg)}
.paper-title{color:var(--fg); font-size:1.15rem; margin-bottom:10px; font-weight:700; line-height:1.45}

.keywords{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.keyword-tag{background:#ecf0f1; padding:6px 10px; border-radius:999px; font-size:.8rem; color:#34495e; transition:all .2s}
.keyword-tag:hover{background:#34495e; color:#fff; transform:translateY(-1px)}

.abstract-container{margin:12px 0}
.abstract-label{font-weight:700; color:var(--fg); margin-bottom:6px; font-size:.98rem}
.abstract-text{
  background:#fafafa; padding:14px; border-radius:10px; max-height:180px; overflow:auto; line-height:1.85;
  border-left:2px solid #e0e0e0; transition:background .2s, border-color .2s;
}
.abstract-text:hover{background:#f5f5f5; border-left-color:#95a5a6}
.abstract-text::-webkit-scrollbar{width:8px}
.abstract-text::-webkit-scrollbar-track{background:#ecf0f1}
.abstract-text::-webkit-scrollbar-thumb{background:#95a5a6; border-radius:4px}
.abstract-text::-webkit-scrollbar-thumb:hover{background:#7f8c8d}

/* ========== PDF Embeds ========== */
.pdf-actions{display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid #d0d7de; background:#fff; color:#0f172a;
  padding:8px 12px; border-radius:10px; font-size:.9rem; cursor:pointer; transition:background .2s, transform .1s;
  text-decoration:none; display:inline-block;
}
.btn:hover{background:#f6f8fa}
.btn:active{transform:translateY(1px)}
.pdf-embed{
  width:100%; height:clamp(320px, 70vh, 820px);
  border:1px solid #e0e0e0; border-radius:10px; margin-top:10px; transition:box-shadow .2s ease;
}
.pdf-embed:hover{box-shadow:0 5px 20px rgba(0,0,0,.08)}

/* Mobile PDF notice */
.mobile-pdf-notice{
  display:block; padding:16px; background:#f0f8ff; border-radius:8px;
  text-align:center; margin-top:10px; color:var(--muted);
}

/* ========== Footer ========== */
footer{
  text-align:center; color:var(--muted); padding:28px; margin:10px 0 60px;
  background:var(--card); border-top:1px solid #e0e0e0; border-radius:12px;
}

/* ========== Fade-in utility ========== */
.fade-in{opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease}
.fade-in.visible{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ========== Mobile Breakpoints ========== */
@media (max-width:767px){
  .pdf-embed{display:none}
}

@media (min-width:480px){
  .hero,.toc-section,.paper-block{padding:22px}
  h1{font-size:1.8rem}
  .paper-title{font-size:1.2rem}
  .contact-info{font-size:.9rem}
}

@media (min-width:768px){
  :root{ --pad-x:24px; --maxw:1280px }
  .tab-nav-container{gap:12px}
  .tab-button{padding:18px 24px; font-size:1rem; flex:0 0 auto}
  .overview-section,.publications-section{padding:28px 0 48px}
  .hero,.toc-section,.paper-block{padding:28px}
  h1{font-size:2.4rem}
  h2{font-size:1.6rem}
  .paper-title{font-size:1.35rem}
  .abstract-text{max-height:200px}
  .personal-statement{max-height:none; overflow:visible}
  .contact-info{font-size:.95rem}
  .mobile-pdf-notice{display:none}
  .pdf-embed{display:block}
  
  /* Desktop: larger oval on left */
  .profile-header{gap:24px}
  .profile-image-container{width:150px; height:190px; border:4px solid #fff}
}

@media (min-width:1024px){
  :root{ --pad-x:28px; --maxw:1400px }
  .paper-block{padding:34px}
  .paper-block:hover{transform:translateY(-3px)}
}

/* ========== iOS notch safe areas ========== */
.safe-padding{
  padding-left:calc(env(safe-area-inset-left) + var(--pad-x));
  padding-right:calc(env(safe-area-inset-right) + var(--pad-x));
}