/* ========================================
   GOOGLE FONT
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap');


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

:root {
  --bg: #f5f5f5;
  --text: #222;
  --accent: #001f4d;
  --muted: #555;
  --paper-border: #d9d9d9;
  --paper-bg: rgba(255, 255, 255, 0.35);

  
  /* Harmonized typography */
  --font-main: 1.02rem;
  --font-title: 0.96rem;
  --font-small: 0.88rem;
}

:root[data-theme="dark"] {
  --bg: #1b1b1b;
  --text: #f3f3f3;
  --accent: #5da0ff;
  --muted: #aaa;
  --paper-border: #444;
  --paper-bg: rgba(255, 255, 255, 0.03);
}


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

html,
body {
  margin: 0;
  padding: 0;

  font-family: "Source Serif 4", serif;
  font-size: var(--font-main);

  background-color: var(--bg);
  color: var(--text);

  line-height: 1.5;
}

* {
  box-sizing: border-box;
}


/* ========================================
   HEADER
======================================== */

.site-header {
  text-align: center;
  padding: 50px 20px 30px;
}

.site-header h1 {
  font-size: 2rem;
  margin: 0;
  font-weight: normal;
}

.institution {
  color: var(--muted);
  font-style: italic;
  font-size: var(--font-main);
  margin: 8px 0 18px;
}


/* ========================================
   NAVIGATION
======================================== */

.main-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 2rem;
}



.nav-btn {
  background: none;
  border: none;

  font-family: inherit;
  font-size: var(--font-main);
  font-weight: bold;

  color: var(--accent);

  cursor: pointer;
  padding: 0;
}

.nav-btn:hover,
.nav-btn.active {
  text-decoration: underline;
}


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

.page-container {
  display: flex;
  justify-content: center;

  gap: 60px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 40px 80px;
}

.sidebar {
  flex: 0 0 30%;

  text-align: center;

  position: sticky;
  top: 40px;

  align-self: flex-start;
}

.photo {
  width: 100%;
  max-width: 220px;

  border-radius: 8px;

  margin-bottom: 20px;
}

.main-content {
  flex: 0 0 70%;

  max-width: 700px;

  min-width: 0;
}


/* ========================================
   SECTIONS
======================================== */

.section {
  display: none;
}

.section.active {
  display: block;
}


/* ========================================
   SECTION HEADERS
======================================== */

/*
   MAIN TYPOGRAPHY LEVEL

   Used for:
   - Navigation
   - About Me
   - Job Market Paper
   - Publications
   - Working Papers
   - Policy Work
   - Teaching
   - Teaching Grant
*/

.section h2,
.section h3 {
  font-size: var(--font-main);
  font-weight: bold;
}


/* Main section headings */

.section h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/*
   Subsection headings.

   Reduced top margin so that the first
   heading sits closer to the navigation bar.
*/

.section h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}


/*
   When an h3 follows another content block,
   maintain a little more breathing room.
*/

.section h3 + .chapter,
.section h3 + .teaching-entry {
  margin-top: 0;
}


/* ========================================
   ABOUT ME
======================================== */

/*
   SMALL TYPOGRAPHY LEVEL
*/

#about-me > p {
  font-size: var(--font-small);
  line-height: 1.6;
}


/* ========================================
   WORKING PAPERS / PUBLICATIONS
======================================== */

.chapter {
  margin-bottom: 1.6rem;
}

.chapter-title {
  font-weight: normal;
  margin: 0;
  line-height: 1.5;
}


/* ========================================
   PAPER / PUBLICATION / TEACHING TITLES
======================================== */

/*
   TITLE TYPOGRAPHY LEVEL

   Used for:
   - Paper titles
   - Publication titles
   - Teaching positions
   - Teaching Grant project title
*/

.paper-title {
  display: block;

  font-size: var(--font-title);
  font-weight: 600;

  line-height: 1.4;

  margin-bottom: 0;
}


/* ========================================
   SECONDARY INFORMATION
======================================== */

/*
   SMALL TYPOGRAPHY LEVEL

   Used for:
   - Authors
   - Publication information
   - Journals
   - Grant metadata
*/

.paper-meta {
  font-size: var(--font-small);

  color: var(--muted);

  font-style: italic;
  font-weight: 400;

  line-height: 1.5;
}


/* Publication metadata */

.publication-meta {
  display: block;

  font-size: var(--font-small);

  color: var(--muted);

  font-style: normal;
  font-weight: 400;

  line-height: 1.5;
}

.publication-name {
  display: block;
  font-style: italic;
}

.publication-details {
  font-style: normal;
}


/* ========================================
   PAPER ACTIONS
======================================== */

.paper-actions {
  font-size: var(--font-small);

  color: var(--muted);

  white-space: nowrap;
}

.paper-main {
  color: var(--accent);

  font-family: inherit;
  font-size: inherit;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;
}

.paper-main:hover {
  text-decoration: underline;
}

.abstract-toggle {
  color: var(--accent);

  font-family: inherit;
  font-size: inherit;

  font-style: normal;
  font-weight: 600;

  cursor: pointer;

  text-decoration: none;
}

.abstract-toggle:hover {
  text-decoration: underline;
}


/* ========================================
   EXPANDABLE CONTENT
======================================== */

.chapter-content {
  display: none;

  margin-top: 0.7rem;

  padding-left: 1rem;

  font-size: var(--font-small);
  font-style: normal;

  color: var(--text);

  text-align: justify;

  line-height: 1.6;
}


/*
   Job Market Paper abstract
*/

.chapter-content-job-market-paper {
  display: block;

  margin-top: 0.7rem;

  padding-left: 1rem;

  font-size: var(--font-small);

  font-style: normal;

  color: var(--text);

  text-align: justify;

  line-height: 1.6;
}


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

.abstract-flex {
  display: flow-root;

  width: 100%;
  max-width: 100%;

  padding-left: 1rem;

  border-left: 2px solid var(--paper-border);

  min-width: 0;
}


/* Abstract text */

.abstract-flex p {
  margin: 0;

  font-size: var(--font-small);

  line-height: 1.6;
}


/* ========================================
   PAPER IMAGES
======================================== */

.chapter-image {
  float: left;

  width: 35%;
  max-width: 400px;

  height: auto;

  margin: 0.25rem 20px 0 0;

  border-radius: 8px;

  object-fit: cover;
}


/* ========================================
   PAPER 1 KEY VISUALS
======================================== */

.paper1-visuals {
  float: left;

  width: 35%;
  max-width: 400px;

  margin: 0.25rem 20px 0 0;
}

.paper1-visual {
  display: block;

  width: 100%;
  height: auto;

  margin: 0 0 16px 0;

  border-radius: 8px;
}

.paper1-visual:last-child {
  margin-bottom: 0;
}


/* ========================================
   TEACHING GRANT VISUALS
======================================== */

.teaching-grant-visuals {
  display: flex;

  flex-direction: row;
  align-items: flex-start;

  width: 80%;
  max-width: 540px;

  gap: 12px;

  margin: 0 auto 20px;

  min-width: 0;
}

.teaching-grant-visual {
  display: block;

  height: 175px;
  width: auto;

  max-width: calc(50% - 6px);

  flex: 0 1 auto;

  min-width: 0;

  border-radius: 8px;

  object-fit: contain;
  object-position: center;
}


/* ========================================
   TEACHING
======================================== */

.teaching-entry {
  margin-bottom: 1.4rem;
}


/*
   Teaching position title
   uses the TITLE typography level.
*/

.teaching-entry p {
  margin: 0;

  font-size: var(--font-title);

  line-height: 1.5;
}


/* Teaching title */

.teaching-entry strong {
  font-size: inherit;
  font-weight: 600;
}


/*
   Teaching information
   uses the SMALL typography level.
*/

.teaching-meta {
  font-size: var(--font-small);

  color: var(--muted);

  font-weight: 400;

  line-height: 1.5;
}


/* Links within teaching metadata */

.teaching-meta a {
  font-size: inherit;

  color: var(--accent);

  font-weight: 600;
}


/* Semester / italic information */

.teaching-meta em {
  font-style: italic;
  font-weight: 400;
}


/* ========================================
   TEACHING GRANT
======================================== */

.teaching-entry .chapter-content {
  font-size: var(--font-small);

  line-height: 1.6;
}

.teaching-entry .chapter-content p {
  margin: 0;

  font-size: var(--font-small);

  line-height: 1.6;
}


/* "More." */

.teaching-entry .abstract-toggle {
  font-size: var(--font-small);
}


/* ========================================
   SOCIAL ICONS
======================================== */

.social-icons {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 12px;

  margin-top: 20px;
}

.social-icons a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  line-height: 0;

  padding: 0;
}

.social-icons img {
  width: 28px;
  height: 28px;

  max-width: 28px;
  max-height: 28px;

  object-fit: contain;

  display: block;
}

.social-icons img[src*="scholar"],
.social-icons a[title="Google Scholar"] img {
  width: 28px;
  height: 28px;

  object-fit: contain;

  display: block;
}


/* ========================================
   LINKS
======================================== */

a {
  color: var(--accent);

  text-decoration: none;

  font-family: inherit;
}

a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: underline;
}


/* ========================================
   CV LINK
======================================== */

.cv-link {
  font-size: var(--font-small);

  color: var(--accent);

  font-weight: bold;

  text-decoration: none;

  transition: color 0.2s ease;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 2px 4px;
}

.cv-link:hover {
  text-decoration: underline;

  color: var(--accent);
}


/* ========================================
   FOOTER
======================================== */

footer {
  text-align: center;

  margin-top: 60px;

  font-size: var(--font-small);

  color: var(--muted);

  line-height: 1.6;
}


/* ========================================
   RESPONSIVE — MEDIUM
======================================== */

@media (max-width: 1000px) {

  .chapter-image {
    float: none;

    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto 15px;
  }


  .paper1-visuals {
    float: none;

    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto 15px;
  }

  .paper1-visual {
    width: 100%;
    height: auto;

    margin: 0 auto 15px;
  }


  .teaching-grant-visuals {
    width: 82%;

    max-width: 450px;

    gap: 10px;
  }

  .teaching-grant-visual {
    height: 145px;

    max-width: calc(50% - 5px);
  }


  .abstract-flex p {
    text-align: left;
  }

  .teaching-entry .chapter-content p {
    text-align: left;
  }
}


/* ========================================
   RESPONSIVE — SMALL
======================================== */

@media (max-width: 900px) {

  .page-container {
    flex-direction: column;

    align-items: center;

    padding: 0 20px;
  }

  .sidebar {
    position: static;

    width: 100%;
  }

  .photo {
    max-width: 160px;
  }

  .main-content {
    width: 100%;

    max-width: 700px;
  }

  .main-nav {
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 0.5rem;
  }

  .paper-actions {
    white-space: normal;
  }

  .paper-link {
    color: var(--accent);

    text-decoration: none;

    font-weight: 600;

    padding: 0;
    margin: 0;

    display: inline;
  }


  .teaching-grant-visuals {
    width: 78%;

    max-width: 400px;

    gap: 10px;
  }

  .teaching-grant-visual {
    height: 130px;

    max-width: calc(50% - 5px);
  }
}


/* ========================================
   RESPONSIVE — VERY SMALL
======================================== */

@media (max-width: 650px) {

  .teaching-grant-visuals {
    flex-direction: column;

    width: 70%;

    max-width: 300px;

    gap: 14px;

    margin-left: auto;
    margin-right: auto;
  }

  .teaching-grant-visual {
    display: block;

    flex: none;

    width: 100%;

    max-width: 100%;

    height: auto;

    border-radius: 8px;

    object-fit: contain;
  }


  .abstract-flex {
    padding-left: 0.75rem;
  }

  .chapter-content,
  .chapter-content-job-market-paper {
    padding-left: 0.75rem;
  }
}