/* Theme */
:root {
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --brand: #2563eb;
  --border: #e5e7eb;

  --nav-bg: #0b1d4d;   /* DARK BLUE header band */
  --nav-ink: #ffffff;
  --nav-muted: #cbd5e1;

  --radius-lg: 24px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);

  --header-h: 140px;   /* doubled header height */
  --page-gap: 6rem;    /* widen the gap between sections */
}

/* Base */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;   /* snap each section into view */
  scroll-padding-top: var(--header-h); /* account for sticky header when jumping */
}
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
  "Apple Color Emoji","Segoe UI Emoji";
  font-size: 18px;     /* larger base */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.7rem 0; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; color: var(--muted); font-weight: 600; }

p { margin: 0 0 1rem 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }

/* Header / Nav (dark blue, doubled height) */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  min-height: var(--header-h);
  display: flex; align-items: center; /* vertically center content in tall band */
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.brand { font-weight: 800; color: var(--nav-ink); text-decoration: none; font-size: 1.2rem; }
nav a {
  color: var(--nav-muted);
  margin-left: 1rem; padding: 0.5rem 0.8rem;
  border-radius: 10px; font-size: 1.05rem; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
nav a:hover, nav a.active { color: var(--nav-ink); background: rgba(255,255,255,0.14); }

/* Sections */
.section {
  /* Each section occupies (at least) one full viewport minus the header,
     so you won't see the next section peeking below. */
  min-height: calc(100vh - var(--header-h));
  padding: var(--page-gap) 0;      /* bigger “gap” top/bottom */
  scroll-snap-align: start;
}
hr { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; }

/* ---- Hero: let portrait photo fit without cropping ---- */
.hero {
  display: grid;
  grid-template-columns: 420px 1fr;  /* width of the photo column (tweak as you like) */
  gap: 2rem;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-top: 0.5rem;
  padding-bottom: 3rem;
}

/* Make the image use its natural aspect ratio (no forced height) */
.headshot {
  width: 420px;          /* adjust this number for bigger/smaller frame (e.g., 440, 380) */
  max-width: 100%;
  height: auto;          /* key: keep natural aspect ratio */
  /* REMOVE or override any previous object-fit line */
  object-fit: unset;     /* ensures no cropping if an old rule exists */
  border-radius: var(--radius-lg);
  border: 3px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Optional: keep your intro nudge if you added .intro earlier */
.hero .intro { transform: translateY(24px); }

/* Responsive fallbacks */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .headshot { width: 340px; }   /* still keeps full aspect ratio */
}
@media (max-width: 480px) {
  .headshot { width: 260px; }
}


/* --- Teaching section spacing --- */
#teaching h1 {
  margin-bottom: 1.5rem;          /* space below "Teaching" */
}

#teaching .course {
  margin-top: 2rem;               /* space before each block (Instructor / TA) */
}

#teaching .course + .course {
  margin-top: 2.75rem;            /* extra space between Instructor and Teaching Assistant */
}

#teaching h2 {
  margin-bottom: 0.75rem;         /* space below "Instructor" / "Teaching Assistant" */
}

#teaching h3 {
  margin-top: 1.25rem;            /* space above "Undergraduate"/"Graduate" */
  margin-bottom: 0.5rem;
}

/* ===== CV page: make the PDF BIG ===== */
.cv-page .container {
  max-width: 1400px; /* wider canvas on the CV page only */
}

.cv-page .cv-embed {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cv-page .cv-embed iframe {
  width: 100%;
  height: 1600px; /* much taller viewport for the PDF */
  border: 0;
}

/* Responsive heights so it still looks good on smaller screens */
@media (max-width: 1200px) {
  .cv-page .cv-embed iframe { height: 1300px; }
}
@media (max-width: 900px) {
  .cv-page .cv-embed iframe { height: 1100px; }
}
@media (max-width: 600px) {
  .cv-page .cv-embed iframe { height: 900px; }
}

/* Big inline CV on the single-page view */
#cv .cv-embed {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Fill nearly all available viewport height so only this section shows */
#cv .cv-embed iframe {
  width: 100%;
  height: calc(100vh - var(--header-h) - 140px); /* tweak 140px if needed */
  border: 0;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  #cv .cv-embed iframe { height: calc(100vh - var(--header-h) - 120px); }
}
@media (max-width: 600px) {
  #cv .cv-embed iframe { height: calc(100vh - var(--header-h) - 100px); }
}


#research h1 {
  margin-bottom: 3rem;   /* increase or decrease to taste */
}