/* =========================
   GLOBAL
========================= */

:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --rule:#e5e7eb;
  --accent:#6B8F66;
  --sidebar-w: 20rem;
  --shadow: 0 0.625rem 1.5625rem rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }

html{
  font-size:16px;
  overflow-x: hidden;   /* or hidden if clip causes issues */
}

body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:"Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden;   /* or hidden */
}


/* Safe global image behavior (prevents mobile blow-ups) */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* =========================
   LAYOUT
========================= */

.page{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  max-width:84rem;
  width:100%;
  margin:1.5rem 0; /* flush left */
  align-items: start;   /* <-- add this line (see next step) */
}

.sidebar{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 1.5rem;
  align-self: start;        /* extra safety in grid */

  padding: 3.25rem 3rem;
  border-right: 0.375rem solid var(--rule);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;       /* centers text consistently */
  gap: 0.9rem;
  min-width: 0;
}

.avatar-wrap{
  width:13.75rem;   /* 220px */
  height:13.75rem;
  border-radius:999px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
}

.name{
  width:100%;
  margin:1.2rem 0 0 0;
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  font-size:1.2rem;          /* slightly smaller */
  text-align:center;
  
  white-space:nowrap;         /* force single line */
  overflow:hidden;
  text-overflow:ellipsis;     /* safety if it truly can’t fit */
  max-width:100%;
}

.degree{
  font-size:0.8em;
  font-weight:600;
  letter-spacing:0.02em;
}

.meta{
  width:100%;
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  text-align:center;
  line-height:1.2;
  max-width:100%;
}

.icon-row{
  margin-top:1.2rem;
  width:100%;
  display:flex;
  justify-content:center;   /* <-- key */
  gap:0.75rem;
}

.icon-btn{
  width:2.75rem;
  height:2.75rem;
  border-radius:999px;
  border:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}

.icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.icon-btn svg{
  width:1.4rem;
  height:1.4rem;
  fill:#111;
  opacity:.85;
}

/* =========================
   MAIN CONTENT
========================= */

.main{
  padding:0.9rem 3rem 2.5rem 3rem; /* reduced so content extends right */
  min-width:0;
}

.topnav{
  display:flex;
  justify-content:flex-end;
  margin-top:-0.2rem;
}

.topnav nav{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}

.topnav a{
  font-size:1.05rem;
  color:var(--text);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:0.35rem;
}

.topnav a:hover{ border-bottom-color:var(--rule); }
.topnav a.active{ border-bottom-color:var(--text); }

.content{
  max-width:60rem;     /* wider text column */
  width:100%;
  padding-top:0.35rem;
  font-size:1.06rem;
  min-width:0;
}

.content p{
  margin:0 0 1.4rem 0;
  line-height:1.7;
}

.lede{
  font-size:1.35rem;
  line-height:1.6;
  margin:0 0 1.6rem 0;
  font-weight:400;
}

.section-title{
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  font-size:2.75rem;
  margin:0.35rem 0 1rem 0;
  color:var(--accent);
}

.section-divider{
  border:0;
  border-top:1px solid var(--rule);
  margin:1.8rem 0;
}

.note{
  color:var(--muted);
  margin-top:1.2rem;
}

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

.content a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

strong{ font-weight:600; }

/* =========================
   ABOUT BOTTOM LAYOUT
========================= */

.about-bottom{
  margin:4rem 0 2rem 0;
  display:grid;
  grid-template-columns: 18rem 1fr;
  gap:2.5rem;
}

.about-image{ margin:0; }

/* Restore controlled About figure size */
.about-image img{
  width:100%;
  max-width:15rem;
  height:auto;
  filter:saturate(70%);
  margin: 0; 
}

.about-question{
  border-right:3px solid var(--accent);
  padding-right:1.2rem;
  margin-top: 0;  
  transform: translateY(2.25rem); /* adjust this to taste */
}


.about-question p{
  margin:0;
  font-size:0.95rem;
  line-height:1.6;
  font-style:italic;
  color:var(--muted);
}


.about-figure-block{
  display: flex;
  flex-direction: column;
}



/* =========================
   CV (FULL WIDTH)
========================= */

/* override .content max-width when both classes are present */
.content.cv-content{
  max-width:none;
  width:100%;
}

.cv-actions{ margin-bottom:1rem; }

.cv-download{
  display:inline-block;
  padding:0.5rem 0.9rem;
  border:1px solid var(--rule);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}

.cv-download:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

/* make the PDF viewer use the full main column width */
.cv-viewer{
  margin-top: 1.5rem;
  width: 100%;
}

.cv-viewer iframe{
  width: 100%;
  height: 88vh;
  border: 0;
  display: block;
}

/* CV page: reduce side padding so the iframe can use the full column */
.cv-main{
  padding-left: 1.25rem;   /* was 3rem */
  padding-right: 1.25rem;  /* was 3rem */
}

/* =========================
   FUNDING
========================= */

/* Funding summary bullets: match regular body text (not .lede size) */
.funding-summary{
  font-size:1.06rem;     /* matches .content */
  line-height:1.7;
  margin:0 0 1.4rem 0;
  padding-left:1.2rem;   /* keep normal bullet indent */
}

.funding-total-line{
  font-size:1.06rem;      /* slightly larger but not huge */
  font-weight:400;
  color:var(--accent);    /* make it green */
  margin:0;
}
.funding-count-line{
  font-size:1rem;
  color:var(--muted);
  margin:0 0 1.75rem 0;
}


/* Greyed-out legend */
.funding-legend{
  margin-top:1.1rem;
  font-size:0.85rem;
  color:var(--muted);
  line-height:1.35;
  letter-spacing:0.01em;
}

.funding-legend p{
  margin:0;
}

.funding-legend p + p{
  margin-top:0.25rem;
}

/* Funding logos: restore controlled size */
.funding-logos{
  margin:1.2rem 0 2.2rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:2.2rem;
  align-items:center;
}

.funding-logos img{
  height:40px;
  max-width:140px;
  width:auto;
  object-fit:contain;
  opacity:0.9;
  transition:opacity .2s ease, filter .2s ease;
}

.funding-logos img:hover{
  opacity:1;
}

/* Funding tables: center TABLE content only */
.funding-table-wrap{
  overflow-x:auto;
  margin:1rem 0 1.25rem 0;
}

.funding-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.funding-table th,
.funding-table td{
  text-align:center;
  vertical-align:top;
  padding:0.85rem 0.5rem;
}

.funding-table thead th{
  font-weight:600;
  font-size:0.95rem;
  color:var(--muted);
  border-bottom:1px solid var(--rule);
}

.funding-table tbody td{
  border-bottom:1px solid var(--rule);
}

.funding-table tbody tr:last-child td{
  border-bottom:none;
}

.col-year{ width:5rem; }
.col-amount{ width:10rem; }
.col-scope{ width:8rem; }

.muted{ color:var(--muted); }

/* =========================
   RESEARCH
========================= */

.research-block{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:2.75rem;
  margin:2.75rem 0;
  align-items:center;
  min-width:0;
}

.research-block.reverse{
  grid-template-columns:0.8fr 1.2fr;
}

.research-block.reverse .research-text{ order:2; }
.research-block.reverse .research-image{ order:1; }

.research-content .theme-title{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  margin:0 0 0.5rem 0;
}

.research-content .theme-hook{
  margin:0 0 1rem 0;
  color:var(--muted);
}

/* Show research images full (no crop/zoom), shrink only when needed */
.research-image{
  margin:0;
  border-radius:14px;
  border:1px solid var(--rule);
  box-shadow:var(--shadow);
  background:#fff;
  justify-self:end;
}

.research-image img{
  width:auto;
  height:auto;
  max-width:100%;
}

.research-block.reverse .research-image{
  justify-self:start;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px){

  .page{
    grid-template-columns:1fr;
    margin:0;
    max-width:none;
  }

  .sidebar{
    position:static;
    height:auto;
    border-right:0;
    border-bottom:0.375rem solid var(--rule);
    padding: 2rem 1.5rem;
  }

  .main{
    padding:1.25rem 1.5rem 2.5rem 1.5rem;
  }

  /* About bottom stacks */
  .about-bottom{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .about-image img{
    margin:0 auto;
  }

  .about-question{
    border-right:0;
    padding-right:0;
    margin-top:0;
  }

  /* Slightly smaller logos on mobile */
  .funding-logos img{
    height:34px;
    max-width:120px;
  }

  /* Research stacks */
  .research-block,
  .research-block.reverse{
    grid-template-columns:1fr;
    margin: 1.6rem 0;     /* tighter */
    gap: 1.25rem;         /* tighter */
  }

  .research-block.reverse .research-text,
  .research-block.reverse .research-image{
    order:unset;
  }

  .research-image{
    justify-self:start;
    margin-top:0.5rem;    /* tighter */
  }

  .research-text p:last-child{
    margin-bottom:0.6rem;
  }

  .research-content .theme-hook{
    margin:0 0 0.6rem 0;
  }
}

.about-label{
  font-family:"Montserrat", sans-serif;  /* same as About Me */
  font-weight:700;                      /* same weight */
  font-size:1.35rem;                    /* smaller than 2.75rem */
  color:var(--accent);
  margin:0 0 0 0;
  white-space:nowrap;  
}