/* Global styles */
:root {
  --nav-height: 60px;      /* adjust to your actual nav height */
  --banner-height: 60px;   /* adjust to your actual banner height */
}

/* Global reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;   /* optional: ensures full-height layout */
}

html {
  overflow-y: scroll; /* always reserve space for scrollbar */
}

body {
  font-family: "Garamond", serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #111;              /* near-black text */
  background-color: #fff;   /* white background */
  display: flex;     /* Flexbox layout for sticky footer */
  flex-direction: column;
}

hr {
  border: none;              /* remove default 3D border */
  border-top: 1px solid #ccc;/* add a clean divider line */
  margin: 1.5rem 0;          /* spacing above and below */
}

/* Navigation bar */
nav {
  position: fixed;       /* sticks to the top */
  top: 0;                /* align at very top */
  left: 0;               /* anchor to left edge */
  width: 100%;           /* always full width */
  padding: 10px 70px 10px 20px; /* top/bottom 10px, left 20px, right 70px */
  
  background-color: #f9f9f9; /* very light grey */

  display: flex;
  align-items: center;       /* vertically center contents */
  justify-content: space-between; /* brand left, links right */

  border-bottom: 1px solid #ccc; /* medium grey line */
  height: var(--nav-height);

  z-index: 1000;         /* stays above other content */

  font-size: 1rem; /* increase overall nav text size */
}

nav .brand {
  text-decoration: none; /* remove underline */
  font-weight: bold;
  font-size: 2rem;
  color: #111;
  margin-left: 15px; /* 7px from the left edge */
  white-space: nowrap; /* force text to stay on one line */
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;                /* remove extra vertical padding */
  display: flex;
  gap: 5rem;                 /* spacing between links */
}

nav a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;            /* prevent extra vertical space */
}

nav a:hover {
  color: #555;              /* dark grey hover */
}

/* Nav links and job-market banner unified */
nav a,
.job-market-banner {
  font-size: 1.2rem;   /* same as body text */
  font-weight: bold;
}

.job-market-banner {
  display: flex;   /* robust centering */
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
  
  height: var(--banner-height, 60px) !important;
  flex-shrink: 0 !important; /* prevent flexbox from squeezing it! */
  margin-top: var(--nav-height, 60px);
  
  background-color: #f9f9f9;   /* same very light grey as nav */
  padding: 0 20px;          /* horizontal padding only */
  
  border-bottom: 1px solid #ccc; /* same grey divider */
  font-weight: bold;           /* emphasize */
  color: #111;                 /* same black text as nav links */
}

nav, .job-market-banner {
  box-sizing: border-box;
}

/* Main content area */
main {
  padding-top: calc(var(--nav-height, 60px) + var(--banner-height, 60px)) !important;
  flex: 1; /* pushes footer down */
  margin: 0; /* prevent margin collapse */
    
  display: block; /* Force block-level layout so it doesn't shrink or overlap */
}

header, main {
  margin-top: 0;
}

.signature {
  height: 1.5em;       /* matches default h1 text height */
  width: auto;       /* keeps proportions */
  vertical-align: middle; /* aligns nicely with text baseline */
}

/* Header and Section containers */
header, section {
  max-width: 800px;
  margin-left: 40px;        /* push block closer to left edge */
  margin-right: auto;       /* no equal centering */
  padding: 20px 20px 20px 0; /* remove left padding, keep top/right/bottom */
  text-align: left;
}

/* Header text--set up a scale later */ 
header h1, header p {
  margin: 0;
  text-align: left;
}

.header-text h1 {
  margin-top: 0;        /* remove extra space above title */
  margin-bottom: 0.3em; /* keep a little space below */
}

.header-text p {
  margin-top: 0;        /* no extra space above */
  margin-bottom: 0.3em; /* same gap below as the title */
}

.header-text h2 {
  font-size: 1.85rem; /* ~29.6px */
  margin-top: 0;
  margin-bottom: 0.3em;
}

/* Section headings */
section h2 {
  margin: 0.5em 0;
  text-align: left;
}

/* Section lists */
section ul {
  list-style: none;   /* remove bullets */
  padding-left: 0;    /* remove indentation */
  margin-left: 0;     /* align flush with section edge */
}

section li, section p {
  margin: 0.3em 0;
  text-align: left;
}

/* Headings */
h1, h2 {
  color: #000;              /* pure black headings */
  margin-top: 0;            /* remove default extra spacing */
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: auto;
  padding: 1rem 0;
  border-top: 1px solid #ccc;
  background: #f9f9f9;
  margin-top: auto; /* ensures footer sits at bottom */
}

footer a {
  color: #333;
  text-decoration: none;
  margin: 0 0.3em;
}

footer a:hover i {
  color: #0077b5; /* LinkedIn blue on hover */
}

footer i {
  font-size: 1.2rem;   /* slightly larger icons */
  vertical-align: middle;
}

/* Header layout (text + photo side by side) */
.header-container {
  display: flex;
  justify-content: space-between; /* text left, photo right */
  align-items: center;            /* vertically center them */
  gap: 1rem;               /* flexible spacing */
  padding-top: 0;          /* ensure no extra space above */
}

.header-text {
  flex: 1;              /* let text take available space */
  min-width: 0;         /* allow wrapping instead of overflow */
  font-size: 1rem;   /* same as body text */
  line-height: 1.4;  /* natural spacing */
}

.header-text h1,
.header-text p {
  margin-top: 0;
  margin-bottom: 0.3em;   /* consistent spacing */
}

.header-photo {
  flex: 0;        /* don’t stretch */
  margin: 0;          /* auto left/right margins center it */
  display: flex;  /* allow centering inside */
  align-items: center; /* vertical centering */
}

/* Profile photo styling */
.profile-photo {
  width: 25%;          /* responsive size */
  max-width: 240px;    /* never larger than 240px */
  min-width: 160px;    /* never smaller than 160px */
  border-radius: 50%;  /* perfectly round */
  display: block;
}

/* Base styles remain the same */

/* Mobile overrides — clean version */
@media (max-width: 600px) {
  header, section {
    max-width: 100%;     /* allow full width */
    margin: 0;           /* remove forced left offset */
    padding: 10px;       /* balanced padding */
    text-align: left;    /* keep left alignment */
  }

  .header-container {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  .header-photo {
    display: block;
    margin: 15px auto; /* center photo with space above/below */
  }

 .header-text {
    font-size: inherit;   /* use body font size */
    line-height: inherit; /* use body line height */
    margin: 0;
    padding: 0;
  }
  
  nav {
    width: 100%;         /* full width */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;        /* enable flexbox */
    height: auto;        /* let height adjust naturally */
    flex-direction: column;   /* stack brand + links vertically */
    align-items: center;      /* center everything horizontally */
  }
  
  nav .brand {
    position: fixed;   /* pin it */
    top: 0;            /* stick to the very top */
    left: 0;
    right: 0;        /* force it to span full width */
    width: 100vw;    /* use viewport width */
    margin: 0;       /* remove any inherited margin */
    width: 100%;       /* span full width */
    background-color: #f9f9f9; /* match nav background */
    z-index: 1000;     /* keep above other elements */
    text-align: center;
    padding: 0.75rem 0; /* breathing room */
    text-decoration: none; /* remove underline */
  }

  nav ul {
    display: block;           /* stack links vertically */
    margin: 0;
    padding: 0;
    text-align: center;       /* center the whole list */
    list-style: none; /* clean bullets */
  }

 nav a {
    display: block;
    width: 100%;         /* links stretch across nav */
    text-align: center;
    line-height: 1.4;
    padding: 0.75rem 0;  /* vertical breathing room */
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* fluid scaling */
  }
  
  .job-market-banner {
    flex-wrap: wrap;       /* allow text to break into lines */
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    padding: 0.5rem 10px;  /* reduce padding */
    height: auto;          /* let height expand naturally */
    margin-top: 0;
    text-align: center;    /* keep content centered */
  }

  nav, .job-market-banner {
    position: static; /* scroll away naturally */
  }
  
  main {
    padding-top: 0;   /* text starts right after nav + banner */
  }
}

/* Tablet widths */
@media (max-width: 900px) {
  .job-market-banner {
    margin-top: 0; /* keep banner snug under nav */
    text-align: center;
  }

  nav .brand {
    position: fixed;   /* pin it */
    top: 0;            /* stick to the very top */
    left: 0;
    right: 0;        /* force it to span full width */
    width: 100%;       /* full width */
    margin: 0;       /* remove any inherited margin */
    background-color: #f9f9f9; /* match nav background */
    z-index: 1000;     /* keep above other elements */
    text-align: center;
    padding: 0.75rem 0; /* breathing room */
    text-decoration: none; /* remove underline */
  }

  nav {
    position: static;  /* scrolls with page */
    margin-top: var(--brand-height, 3rem); /* offset for brand bar */
    width: 100%;
    padding: 0.875rem 5%;/* balanced padding, avoids making bar too tall */
    box-sizing: border-box;
    display: flex;        /* enable flexbox */
    height: auto;        /* let height adjust naturally */
    flex-direction: column;   /* stack brand + links vertically */
    align-items: center;      /* center everything horizontally */
  }

  
  main {
    padding-top: 0;   /* text starts right after nav + banner */
  }
}

/* Extra small phones (≤400px) */
@media (max-width: 400px) {
  nav a {
    font-size: clamp(1rem, 2.5vw, 1.2rem);     /* slightly smaller text */
    line-height: 1.2;      /* keep readability */
    padding: 0.6rem 0;     /* keep touch-friendly spacing */
  }

  .header-text {
    font-size: inherit;   /* follow body font size */
    line-height: inherit; /* follow body line height */
    margin: 0;
    padding: 0;
  }

  .header-photo {
    max-width: 160px;      /* prevent photo from dominating */
  }
  
  nav, .job-market-banner {
    position: static; /* scroll away naturally */
  }

  .job-market-banner {
    margin-top: 0; /* keep banner snug under nav */
  }
  
  main {
    padding-top: 0;   /* text starts right after nav + banner */
  }
}

/* Mobile footer stacking */
@media (max-width: 600px) {
  footer p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
}

.small-gap {
  margin-top: 0.5em !important;
}

.paper {
  margin-bottom: 1.5rem; /* consistent blank line between papers */
}

.paper p {
  margin: 0.25rem 0;     /* tighter vertical spacing for title/journal lines */
  line-height: 1.4;      /* readable but compact */
}

/* Keep details/summary simple — no forced alignment overrides */
details {
  margin-top: 0.35rem;   /* small gap before the toggle */
}

summary {
  cursor: pointer;       /* makes toggle clickable */
  font-weight: bold;     /* emphasize the toggle text */
  line-height: 1.4;      /* consistent with paper text */
}