body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  background: #fdfdfd;
}

.container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: #1f2937;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  height: 100%;
  z-index: 1000; /* keep sidebar above content to avoid stacking issues */
}

.profile-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 2px solid #ccc;
}

.name {
  margin: 0;
  font-size: 1.3em;
  text-align: center;
}

.title {
  font-size: 0.9em;
  color: #ccc;
  text-align: center;
  /* comfortable spacing between name and socials for readability */
  margin-bottom: 8px;
}

.nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.nav a {
  color: #f3f4f6;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.nav a:hover {
  background: #374151;
}

.socials {
  margin-top: 6px; /* slightly more breathing room */
  /* add a little space below socials so page nav links start a bit lower */
  margin-bottom: 12px;
  text-align: center;
  /* balanced size so socials are visible but not dominant */
  font-size: 0.9em;
  display:flex;
  flex-direction:row; /* inline icons */
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.socials .social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: #e5e7eb;
  text-decoration:none;
  padding:6px 8px;
  border-radius:6px;
}
.socials .social-link i{ width:18px; height:18px; flex:0 0 18px; font-size:18px; display:inline-block; }
.socials .social-link span{ color:#e5e7eb; font-size:0.9rem }
.socials .social-link:hover{ background: rgba(255,255,255,0.03); color:#fff }

/* Main Content */
.content {
  margin-left: 260px; /* leave space for fixed sidebar (240px + 20px padding) */
  padding: 40px;
  max-width: 800px;
  width: calc(100% - 260px);
  box-sizing: border-box;
}

/* Responsive: collapse the sidebar on small screens so it doesn't overlap content */
@media (max-width: 900px) {
  .container { display: block; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 16px;
  }
  .content {
    margin-left: 0;
    width: 100%;
    padding: 20px;
  }
}

h2 {
  font-size: 1.6em;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 5px;
}

p {
  line-height: 1.6em;
  margin-top: 1em;
  /* make body/content paragraphs justified for better reading flow */
  text-align: justify;
  text-justify: inter-word;
}

/* Publications styling */
.publications-list {
  /* show ordered numbers and keep a smaller left indent for compact layout */
  list-style: decimal;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0;
}

.publication-item {
  margin: .25rem 0; /* vertical spacing between items (top and bottom) */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.pub-note {
  font-style: italic;
  color: #555;
  margin-top: 0.25rem;
  display: block;
}

.pub-authors strong {
  font-weight: 700;
}

/* Ensure publications content reads justified for better line lengths */
.publications-page,
.publications-page p,
.publications-page li,
.publication-item,
#publications {
  text-align: justify;
  text-justify: inter-word;
}

/* CV embed styling */
.cv-embed-wrap {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.cv-embed {
  width: 100%;
  /* fill the available vertical space inside the content area */
  height: calc(100vh - 140px);
  border: none;
}

/* Allow a wider content area specifically for pages that opt-in */
.content.content--wide {
  max-width: none; /* remove the 800px cap */
  width: calc(100% - 260px); /* keep space for sidebar */
}

/* Make the embedded CV expand but limit its maximum width for readability */
.content.content--wide .cv-embed {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  height: calc(100vh - 140px);
}

/* Make the CV HTML fallback readable */
.cv-html h2 { margin-top: 0; }
.cv-html ul { margin-left: 1rem; }

/* Talks page styling */
.talks-list {
  margin: 0;
  padding: 0;
}
.talk-item {
  margin: 1.25rem 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.talk-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
}
.talk-title a {
  color: #0b5fff; /* clear link color for titles */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.talk-title a:hover {
  color: #0846d1;
  text-decoration: underline;
}
.talk-title a::after {
  content: ' \2197'; /* Unicode NE arrow as external-link indicator */
  margin-left: 0.35rem;
  font-size: 0.85rem;
  color: #6b7280;
}
.talk-about {
  margin: 0 0 0.5rem 0;
  color: #333;
}
.talk-meta {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

/* Projects grid */
.projects-grid {
  display: grid;
  /* three equal columns that together fill the available content area (after sidebar)
     gap accounts for spacing between columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
}
.project-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  overflow: hidden;
}
.project-thumb-wrap{ width:100%; background:#f8fafc; display:flex; align-items:center; justify-content:center; position:relative; }
.project-thumb{ width:100%; height:320px; object-fit:contain; object-position:center; display:block; background: #f8fafc; }

/* In-card thumbnail navigation buttons (prev/next) */
.project-thumb-wrap button.thumb-prev,
.project-thumb-wrap button.thumb-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  color: #0b5fff;
  width:40px;
  height:40px;
  font-size:1.05rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  opacity: 1; /* always visible */
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.project-thumb-wrap button.thumb-prev{ left:10px; }
.project-thumb-wrap button.thumb-next{ right:10px; }
.project-thumb-wrap button.thumb-prev:focus,
.project-thumb-wrap button.thumb-next:focus{
  outline: 3px solid rgba(11,95,255,0.12);
  transform: translateY(-50%) scale(1.03);
}

.project-body{ padding:12px 16px; }
.project-title{ margin:0 0 8px 0; font-size:1.05rem; }
.project-title a{ color:#0b5fff; text-decoration:none; }
.project-desc{ margin:0 0 8px 0; color:#333; }
.project-meta{ margin:0 0 8px 0; color:#666; font-size:0.9rem }
.project-links a{ color:#0b5fff; text-decoration:none; margin-right:8px }

/* Responsive: collapse columns on narrower screens */
/* Responsive: fewer columns on narrower viewports */
@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* Modal slideshow styles */
.project-modal{ display:none; position:fixed; inset:0; z-index:2000; }
.project-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.project-modal-content{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:1200px; width:90%; background:#fff; padding:16px; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.3); display:flex; align-items:center; gap:12px; }
.modal-slide-wrap{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; max-height:80vh; overflow:hidden; }
.modal-img{ max-width:100%; max-height:80vh; object-fit:contain; display:block; }
.modal-prev, .modal-next, .modal-close{ background:transparent; border:0; font-size:1.2rem; cursor:pointer; padding:6px; }
.modal-prev, .modal-next{ color:#0b5fff; }
.modal-close{ position:absolute; right:8px; top:8px; color:#333; font-size:1.1rem; }
.modal-caption{ margin-top:8px; color:#333; font-size:0.95rem; }