/* Consolidated stylesheet */

:root{
  /* Colors and layout variables tuned to match reference site */
  --bg: #ffffff;
  --muted: #6b7280; /* slightly warmer gray */
  --accent: #0b5ed7; /* link/accent blue */
  --text: #111827;
  --max-width:1100px; /* match reference narrower column */
  --left-col-width:256px; /* left/profile column width */
  --avatar-size:224px; /* avatar size */
  --name-size:30px; /* name size */
  --social-icon-size:30px; /* controls social SVG size */
  --social-gap:12px; /* gap between social icons */
  /* Publication thumbnail sizing (customize by changing --pub-thumb-base) */
  --pub-thumb-base:160px; /* change this single value to scale thumbnails */
  --pub-thumb-width: var(--pub-thumb-base);
  --pub-thumb-height: calc(var(--pub-thumb-base) * 0.69); /* ~130px when base=180 */
  --pub-thumb-width-sm: calc(var(--pub-thumb-base) * 0.56); /* ~100px */
  --pub-thumb-height-sm: calc(var(--pub-thumb-width-sm) * 0.8); /* ~80px */
  --pub-thumb-height-mobile: calc(var(--pub-thumb-base) * 0.888); /* ~160px */
  /* Default thumbnail object-fit/position: change to keep left side visible */
  /* show full image without cropping by default */
  --pub-thumb-object-fit: contain;
  --pub-thumb-object-position: center center;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:16px}

.wrap{max-width:var(--max-width);margin:18px auto;padding:20px 18px;display:grid;grid-template-columns:var(--left-col-width) 1fr;gap:28px}
header.side{padding:6px 8px 6px 0;border-right:1px solid #f1f5f9}

/* Header layout: name above avatar, left-aligned on desktop */
/* Header/profile column styling */
.header-inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-left:8px}
.header-inner .name{font-family:'Merriweather',Georgia,serif;margin:0 0 10px 0;font-size:var(--name-size);color:var(--text);font-weight:700}
/* Make the name link look like plain heading text */
.header-inner .name .home-link{color:inherit;text-decoration:none}
.header-inner .name .home-link:focus,.header-inner .name .home-link:hover{outline:none;text-decoration:underline}
.header-inner .photo{width:var(--avatar-size);height:var(--avatar-size);border-radius:6px;overflow:hidden;background:#eee;margin:8px 0}
.header-inner .photo img{width:100%;height:100%;object-fit:cover;display:block}
.header-inner .pos{margin:6px 0;color:var(--muted);font-size:13px}

.links{margin-top:10px}
.links a{font-size:13px;color:var(--accent);text-decoration:none;margin-right:10px}

.social{margin-top:12px;display:flex;gap:var(--social-gap);align-items:center;justify-content:flex-start}
.social .icon{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.social .icon svg{display:block;fill:currentColor;width:var(--social-icon-size);height:var(--social-icon-size)}
.social .icon:hover{color:var(--accent)}

.aside-section{margin-top:18px;font-size:14px;color:var(--muted);text-align:left;padding-left:8px}
.affiliations{margin-top:6px}
.affiliations a{display:block;color:var(--accent);text-decoration:none;margin:6px 0;font-size:14px}
.affiliations .inline-pair a{display:inline-block;margin-right:8px}

main.content{padding:6px 6px 6px 28px}
.section{margin-bottom:18px}
h3.section{
  margin-top:0;
  margin-bottom:10px;
  font-size:15px;
  color:var(--text);
  font-weight:700;
  padding-bottom:6px;
  border-bottom:1px solid #f1f5f9;
  letter-spacing:0.2px;
}
.section p, .section li{
  color:#343a40;
  line-height:1.6;
  font-size:14px;
  font-weight:400;
}

.pubs{font-size:14px}
.pubs-list{display:flex;flex-direction:column;gap:12px}
.pub{display:flex;gap:12px;align-items:flex-start;padding:10px 6px;border-radius:6px}
.pub-thumb{flex:0 0 var(--pub-thumb-width);width:var(--pub-thumb-width);height:var(--pub-thumb-height);max-width:100%;overflow:hidden;background:#eee;border-radius:4px}
.pub-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pub-thumb img{width:100%;height:100%;object-fit:var(--pub-thumb-object-fit,cover);object-position:var(--pub-thumb-object-position,center center);display:block}
.pub-meta{flex:1;min-width:0}
.pub-title{font-weight:700;margin-bottom:6px}
.pub-title a{color:var(--text);text-decoration:none}
.pub-authors{color:var(--muted);font-size:13px;margin-bottom:4px}
.pub-venue{font-size:13px;margin-bottom:6px}
.pub-links a{color:var(--accent);text-decoration:none;font-size:13px}

@media (max-width:720px){
  .pub{flex-direction:row;gap:10px}
  .pub-thumb{width:var(--pub-thumb-width-sm);height:var(--pub-thumb-height-sm)}
}

@media (max-width:520px){
  .pub{flex-direction:column}
  .pub-thumb{width:100%;height:var(--pub-thumb-height-mobile)}
}

.pubs a{color:var(--accent);text-decoration:none}

/* News list styling to match compact reference layout */
.news-list p{margin:6px 0;color:#333;font-size:14px}

/* Right-align news content: date stays bold, content aligned to the right edge */
.news-list p{ text-align:right }
.news-list p strong{color:#111;font-weight:700;margin-right:8px}

/* Use flex to keep the date on the left and the rest of the text on the right when possible */
.news-list p{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
.news-list p strong{ flex:0 0 auto }
.news-list p::after{ content:attr(data-tail); display:block; }

footer{margin-top:20px;font-size:13px;color:var(--muted)}

@media (max-width:820px){
  .wrap{grid-template-columns:1fr;padding:14px}
  header.side{border-right:none;border-bottom:1px solid #eee;padding-bottom:14px}
  main.content{padding-left:0}
  .header-inner{align-items:center;text-align:center}
  .social{justify-content:center}
  .aside-section{padding-left:0;text-align:center}
  /* make left column full width on small screens */
  :root{--left-col-width:100%}
}