/* =========================
   Global reset
   ========================= */

body {
  margin: 0;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background-color: #f5f6f4;
}

html {
  scroll-behavior: smooth;
}

/* =========================
   Sticky navigation
   ========================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #f5f6f4;
  border-bottom: 1px solid #e0e0e0;
}

.nav + .container {
  padding-top: 0.5em;
}

/* Navigation */

.nav-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em 1.25em;
  display: flex;
  justify-content: flex-end;
}

.nav a {
  margin-right: 1.5em;
  color: #1b4d3e;
  text-decoration: none;
  font-size: 1.25em;
}

.nav a:hover {
  opacity: 0.8;
}

.nav a.current {
  font-weight: bold;
}

/* =========================
   Page container
   ========================= */

.container {
  max-width: 1000px;
  margin: 0.9em auto;
  padding: 0 1.25em;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  padding-left: 1.4em;
}

.page-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25em;
}

.sidebar {
  position: fixed;
  top: 6.5em;

  /* anchor to content, not viewport */
  left: 50%;
  transform: translateX(-50%);

  /* push it left from the content center */
  margin-left: -520px;

  width: 170px;
  text-align: left;
}

.sidebar img {
  width: 155px;
  border-radius: 50%;
  display: block;
  margin-bottom: 0.6em;
  opacity: 0.95;
}

.sidebar-name {
  font-size: 1.5em;
  font-weight: 500;
  color: #1b4d3e;
  margin-bottom: 0.1em;
}

.sidebar-subtitle {
  font-size: 0.7em;
  color: #666;
  margin-bottom: 0.7em;
  margin-top: 0;   

}

.content {
  margin-top: 3em;   
  max-width: 750px;
  padding-left: 110px; /* creates clearance from sidebar */
}

/* =========================
   Name / headings
   ========================= */

.name {
  text-align: center;
  font-weight: normal;
  color: #1b4d3e;
  margin-top: 0.5em;
  margin-bottom: 1.75em;
}

#index .name {
  margin-top: 0.2em;
}

h2 {
  margin-bottom: 0.5em;
  font-weight: normal;
  color: #1b4d3e;
}

section > h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;

  font-weight: normal;
  color: #1b4d3e;
  line-height: 1.2;

  margin-top: 2.2em;
  margin-bottom: 1.2em;
}

section > h2::before,
section > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  min-height: 1px;
  background-color: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* =========================
   About section layout
   ========================= */

.about {
  display: flex;
  gap: 2.3em;
  align-items: flex-start;
  justify-content: flex-start;
}

#about p {
  font-size: 1.2rem;
}

.bio {
  max-width: 720px;
  flex: 0 1 720px;
}

.bio p:first-child {
  margin-top: 0;
}

.bio p {
  font-size: 1.3rem;
}

/* Photo + icons */

.photo-block {
  margin-top: 0.2em;
  text-align: center;
   position: sticky;
  top: 6.5em;        /* below the sticky nav */
}

.about img {
  width: 240px;
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

/* Icon links */

.icon-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18em;
  margin-top: 0.9em;
}

.icon-links a {
  display: grid;
  grid-template-columns: 1.6em auto; /* icon column + label column */
  column-gap: 0.6em;
  align-items: center;
  font-size: 0.95em;
  color: #1b4d3e;
  text-decoration: none;
}

.icon-links a:hover {
  opacity: 0.8;
}

.icon-links .icon {
  font-size: 1.2em;
  text-align: center;
}

.icon-links .label {
  text-align: left;
}

/* =========================
   Sections
   ========================= */

section {
scroll-margin-top: 6.5em;
  margin-top: 3em;
}

#index section#about {
  margin-top: 0;
}

/* Links */

a {
  color: #1b4d3e;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

.bio a,
section p a {
  color: #3a7f6a;
}

.bio a:hover,
section p a:hover {
  opacity: 0.85;
}

#cv {
  margin-top: 0.2em;
   font-size: 1.2rem;
}

/* =========================
   Research section (FIXED)
   ========================= */

/* spacing reset INSIDE research section */

section#research h1,
section#research h2,
section#research p,
section#research ul,
section#research li {
  margin-top: 0;
  margin-bottom: 0;
}

/* Centered research column */

section#research .research-content {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 0.5em;
}

/* Headings spacing */

section#research h2 {
  margin-top: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;

  text-align: center;
  font-weight: normal;
  color: #1b4d3e;
  line-height: 1.2;
}

section#research h2::before,
section#research h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.18); /* light grey */
  min-height: 1px;
  flex-shrink: 0;
}

section#research h2:first-of-type {
  margin-top: 1.1em;
}

/* Papers */

section#research .paper {
  margin-top: 1.2em;
}

.paper-title {
  font-weight: normal;
  margin-bottom: 0.3em;
   font-size: 1.2rem;
}

.paper-authors {
  margin: 0.2em 0;
   margin-left: 1.2em;
}

.paper-journal {
  margin: 0.2em 0 0.6em 0;
  font-style: italic;
  color: #555;
   margin-left: 1.2em;
}

/* =========================
   Buttons
   ========================= */

.paper-buttons {
  display: flex;
  gap: 0.75em;
  margin-bottom: 0.75em;
   margin-left: 1.2em;
}

.paper-buttons button,
.paper-buttons a {
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.25em 0.6em;
  border: 1px solid #ccc;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: #1b4d3e;
}

.paper-buttons button:hover,
.paper-buttons a:hover {
  background-color: #eef2ef;
}

/* Media / external links use same visual language as paper buttons */

.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.4em;
}

.link-buttons a {
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.2em 0.55em;
  border: 1px solid #ccc;
  background: none;
  color: #1b4d3e;
  text-decoration: none;
}

.link-buttons a:hover {
  background-color: #eef2ef;
}

/* =========================
   Toggle boxes
   ========================= */

.paper-box {
  display: none;
  padding: 1em;
  margin-top: 0.6em;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  background-color: #fafafa;
  scroll-margin-top: 7em;
}

.paper-box.open {
  display: block;

  width: calc(100% + 240px); /* extend to the right */
  max-width: calc(100% + 240px);

  margin-right: -240px;     /* pull into right margin */
  margin-left: 0;           /* DO NOT extend left */

  box-sizing: border-box;
}


/* Figures */

.paper-box img {
  max-width: 50%;
  height: auto;
  display: block;
  margin: 0.75em auto;
}

/* Side-by-side figure + caption */

.figure-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.25em;
  align-items: start;
}

.figure-row img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.figure-caption {
  font-size: 0.95em;
  color: #333;
  line-height: 1.5;
}

.figure-caption p {
  margin-bottom: 0.8em;
}

.figure-caption p:last-child {
  margin-bottom: 0;
}

/* Media section: tighten bullet spacing */
#media ul {
  margin-top: 0.5em;
}

#media li {
  margin-bottom: 1.6em; /* space between "On neuroscience" vs "On risk" */
}

#media li p {
  margin: 0.2em 0; /* tight spacing between links */
}

.media-topic {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.35em;
}

.teaching-role {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4em;
}

/* =========================
   Mobile layout fixes
   ========================= */

@media (max-width: 768px) {

  /* Container spacing */
  .container {
    margin: 1.5em auto;
    padding: 0 1em;
   border-left: none;
    padding-left: 0;
  }

  /* NAV: prevent clipping */
  .nav-inner {
    justify-content: center;
    padding: 0.75em 0.75em;
  }

  .nav a {
    font-size: 1.05em;
    margin: 0 0.6em;
  }

  /* Collapse two-column layout */
  .page-layout {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Sidebar becomes normal block */
  .sidebar {
    position: static;        /* remove fixed positioning */
    left: auto;
    transform: none;         
    margin-left: 0;          
    width: 100%;
    text-align: center;
  }

  /* Image sizing on mobile */
  .sidebar img {
    width: 180px;
    margin: 0 auto;
  }

  /* Sidebar links */
  .icon-links {
    margin-top: 0.75em;
    gap: 0.3em;
     align-items: flex-start;   
    width: fit-content;        
    margin-left: auto;
    margin-right: auto; 
  }

     .icon-links a {
    justify-items: start;      /* LEFT align icon + label */
    text-align: left;
  }

  /* Main content uses full width */
  .content {
    max-width: 100%;
   padding-left: 0.6em;   
    margin-left: 0;
  }

  /* Section spacing */
  section {
    margin-top: 2em;
  }

  /* Figures stack vertically */
  .figure-row {
    grid-template-columns: 1fr;
  }

  .figure-caption {
    margin-top: 0.75em;
  }

  section#research h2::before,
  section#research h2::after {
  display: none;
  }

  .section-divider::before,
  .section-divider::after {
  display: none;
}

}

/* =========================
   Medium screens (tablets)
   ========================= */

@media (max-width: 1200px) {
  section#research .paper-box.open {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}