/* ========================================================================== 
   Luis Aguiar website — main stylesheet
   --------------------------------------------------------------------------
   How to use this file:
   1. Save this file as `styles.css` in the same folder as your HTML files.
   2. Most visual changes can be made in SECTION 1: DESIGN VARIABLES.
   3. Search for "CHANGE HERE" to find the values you are most likely to edit.

   Structure of this CSS:
   1.  Design variables
   2.  Basic reset and page defaults
   3.  Links and typography
   4.  Header and navigation
   5.  General page layout
   6.  Homepage intro: text, UZH logo, portrait
   7.  Homepage funding strip
   8.  Profile/link buttons
   9.  Standard content sections and notes
   10. Research page, paper cards, and paper-link buttons
   11. Legacy paper-list compatibility
   12. Table-like lists
   13. Logo groups, contact grid, footer
   14. Media coverage / press links
   15. Contact page
   16. Responsive design
   ========================================================================== */


/* ========================================================================== 
   1. DESIGN VARIABLES
   --------------------------------------------------------------------------
   Change values here first. These variables are reused throughout the site.
   ========================================================================== */

:root {
  /* Main colors ------------------------------------------------------------ */
  --blue: rgb(35, 79, 210);                 /* CHANGE HERE: blue used for links, active nav, paper titles */
  --lightblueBG: #eef2fc;                 /* CHANGE HERE: blue used for links, active nav, paper titles */
  --ink: #333;                  /* Main text color */
  --muted: #777777;                /* Grey text, subtitles, metadata */
  --line: #e7e7e2;                 /* Thin dividers and subtle borders */
  --light: rgb(247, 247, 245);                /* Light background for notes and cards */
  --card-bg: #e8e8e8e7;              /* Background of paper cards/buttons */
  --card-border: #e4e1da;          /* Border of paper cards/buttons */
  --card-border2: rgba(48,98,255,.22);
  /* Fonts ----------------------------------------------------------------- */
  /* CHANGE HERE: main font for the whole site. */
  /* --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; */
  --sans: "DM Sans", sans-serif;

  /* Page width and side padding ------------------------------------------ */
  --max: 1080px;                   /* CHANGE HERE: maximum width of page content */
  --side-padding: 28px;            /* CHANGE HERE: left/right page padding on desktop */
  --side-padding-mobile: 20px;     /* CHANGE HERE: left/right page padding on phones */

  /* Header ---------------------------------------------------------------- */
  --header-logo-width: 44px;       /* CHANGE HERE: size of small LA logo in header */
  --header-padding-y: 20px;        /* CHANGE HERE: vertical padding in top navigation bar */
  --nav-font-size: 17px;           /* CHANGE HERE: navigation link size */
  --nav-gap: 20px;                 /* CHANGE HERE: space between navigation links */

  /* Homepage intro layout ------------------------------------------------- */
  --home-top-space: 44px;          /* CHANGE HERE: space between header and homepage intro */
  --home-right-column: 360px;      /* CHANGE HERE: width of right column with logo + portrait */
  --home-column-gap: 54px;         /* CHANGE HERE: horizontal gap between text and portrait column */
  --home-row-gap: 18px;            /* CHANGE HERE: vertical gap between intro rows, e.g. before funding */
  --bio-top-space: 36px;           /* CHANGE HERE: space between horizontal line and biography text */

  /* Homepage images ------------------------------------------------------- */
  --uzh-logo-width: 170px;         /* CHANGE HERE: size of UZH logo above portrait */
  --portrait-width: 270px;         /* CHANGE HERE: portrait size */
  --portrait-radius: 5px;          /* CHANGE HERE: portrait corner roundness */
  --image-gap: 36px;               /* CHANGE HERE: gap between UZH logo and portrait */
  --portrait-shift-y: 60px;        /* CHANGE HERE: move portrait down/up. Positive = down, negative = up */

  /* Text sizes ------------------------------------------------------------ */
  --body-font-size: 16px;          /* CHANGE HERE: main paragraph text size */
  --h1-size: 22px;                 /* CHANGE HERE: main page title size */
  --h2-size: 18px;                 /* CHANGE HERE: section heading size */
  --h3-size: 15px;                 /* CHANGE HERE: small heading size */
  --subtitle-size: 17px;           /* CHANGE HERE: subtitle under name on homepage */

  /* Profile/link buttons -------------------------------------------------- */
  --button-font-size: 15px;        /* CHANGE HERE: profile/research link button text size */
  --button-radius: 6px;            /* CHANGE HERE: roundness of profile/research buttons */
  --button-gap: 12px;              /* CHANGE HERE: gap between profile/research buttons */

  /* Funding strip --------------------------------------------------------- */
  --funding-top-space: 40px;        /* CHANGE HERE: space above funding block */
  --funding-bottom-space: 60px;    /* CHANGE HERE: space below funding block */
  --funding-logo-column: 190px;    /* CHANGE HERE: width of funding-logo column */
  --funding-column-gap: 10px;      /* CHANGE HERE: gap between funding logos and funding text */
  --funding-row-gap: 46px;         /* CHANGE HERE: vertical gap between ERC and SNSF rows */
  --funding-logo-width: 150px;     /* CHANGE HERE: default size of ERC/SNSF logos */
  --funding-text-size: 16px;       /* CHANGE HERE: size of funding text */

  /* Research page / paper cards ------------------------------------------ */
  --paper-card-padding-y: 15px;    /* CHANGE HERE: vertical padding inside each paper box */
  --paper-card-padding-x: 17px;    /* CHANGE HERE: horizontal padding inside each paper box */
  --paper-card-radius: 5px;        /* CHANGE HERE: corner roundness of paper boxes */
  --paper-card-gap: 20px;          /* CHANGE HERE: vertical gap between paper boxes */
  --paper-card-background: rgb(209, 209, 209, 0.055); /* CHANGE HERE: background color of paper card */

  
  --paper-title-size: 16px;      /* CHANGE HERE: paper title size */
  --paper-title-weight: 550;       /* CHANGE HERE: paper title boldness */
  --paper-meta-size: 14.5px;       /* CHANGE HERE: authors/journal text size */
  --journal-logo-width: 96px;      /* CHANGE HERE: journal logo width inside paper card */
  --journal-logo-height: 100px;     /* CHANGE HERE: journal logo max height inside paper card */

  /* Paper-card action buttons -------------------------------------------- */
  --paper-link-font-size: 12.5px;  /* CHANGE HERE: DOI/WP button text size inside paper cards */
  --paper-link-radius: 4px;        /* CHANGE HERE: DOI/WP button roundness; 999px = pill shape */
  --paper-link-padding-y: 3px;     /* CHANGE HERE: vertical padding inside DOI/WP buttons */
  --paper-link-padding-x: 9px;     /* CHANGE HERE: horizontal padding inside DOI/WP buttons */
  --paper-link-gap: 7px;           /* CHANGE HERE: gap between DOI/WP buttons */

  /* Media coverage page --------------------------------------------------- */
  --coverage-group-gap: 12px;      /* CHANGE HERE: vertical gap between language groups inside a card */
  --coverage-label-width: 42px;    /* CHANGE HERE: width reserved for language labels. This is the space between language and the buttons */
  --coverage-label-size: 12px;     /* CHANGE HERE: language label size, e.g. English, German */
  --coverage-label-weight: 650;    /* CHANGE HERE: language label boldness */
  --coverage-box-bg: rgba(35, 79, 210, 0.02);      /*  CHANGE HERE: subtle background behind media coverage links */
  /* --coverage-box-bg: rgb(209, 209, 209, 0.035);       CHANGE HERE: subtle background behind media coverage links */
  --coverage-box-border: rgba(35, 79, 210, 0.14);    /* CHANGE HERE: subtle border around media coverage block */
  --coverage-box-left-border: rgba(35, 79, 210, 0.35); /* CHANGE HERE: slightly stronger left accent for media block */
  --coverage-button-border: rgba(35, 79, 210, 0.28); /* CHANGE HERE: border color for media outlet buttons */
  --coverage-button-color: #5a557f;                  /* CHANGE HERE: text color for media outlet buttons */
}


/* ========================================================================== 
   2. BASIC RESET AND PAGE DEFAULTS
   --------------------------------------------------------------------------
   These rules make spacing and sizing more predictable across browsers.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  font-size: var(--body-font-size);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin-top: 0;
}


/* ========================================================================== 
   3. LINKS AND TYPOGRAPHY
   --------------------------------------------------------------------------
   Controls default text links, headings, subtitles, and common text blocks.
   ========================================================================== */

a {
  color: var(--ink);
  text-decoration-color: rgba(35, 79, 210, 0.35);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--h1-size);
  font-weight: 560;
  margin-bottom: 4px;
}

h2 {
  font-size: var(--h2-size);
  font-weight: 520;
  margin-bottom: 18px;
}

h3 {
  font-size: var(--h3-size);
  font-weight: 720;
}

.subtitle {
  font-size: var(--subtitle-size);
  line-height: 1.35;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 650px;
}

.page-intro {
  font-size: 16px;
  color: var(--muted);
  margin: -2px 0 24px;
  max-width: 720px;
}

.prose {
  max-width: 1000px;
}

.meta {
  color: var(--muted);
  font-size: 15.5px;
}


/* ========================================================================== 
   4. HEADER AND NAVIGATION
   --------------------------------------------------------------------------
   Controls the sticky top bar: LA logo, name, and menu links.
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--line); /* CHANGE HERE: set to `border-bottom: 0;` to remove header line */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--header-padding-y) var(--side-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;                    /* CHANGE HERE: space between LA logo and name */
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

.header-logo {
  width: var(--header-logo-width); /* Controlled by --header-logo-width */
  min-width: 0;
}

.logo-name {
  font-size: 19px;
  font-weight: 300;
}

.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--nav-gap);          /* Controlled by --nav-gap */
  flex-wrap: wrap;
}

.nav a {
  color: #333;
  text-decoration: none;
  font-size: var(--nav-font-size);
  font-weight: 520;
  line-height: 1.2;
  padding: 6px 0 5px;
  border-bottom: 2px solid transparent;
  font-variant: small-caps;

}

.nav a:hover,
.nav a.active {
  color: #333;
  /* border-bottom-color: var(--blue);*/  /* Blue underline under active/hovered menu item */
}

.nav a.active {
  font-weight: 650;
}


/* ========================================================================== 
   5. GENERAL PAGE LAYOUT
   --------------------------------------------------------------------------
   `.layout` centers page content and constrains its maximum width.
   ========================================================================== */

.layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.home-layout {
  padding-top: var(--home-top-space);
}

.page-layout {
  padding-top: 58px;           /* CHANGE HERE: top spacing on regular pages */
  padding-bottom: 40px;
}

.page-header {
  margin-bottom: 24px;
}

/* Pages without a visible title -----------------------------------------
   Add `no-page-title` to <main> when a page should start directly with text:
   <main class="layout page-layout no-page-title">
------------------------------------------------------------------------ */

.no-page-title {
  padding-top: 24px;           /* CHANGE HERE: space below header on no-title pages */
}

.no-page-title .content-section:first-child {
  padding-top: 0;
}


/* ========================================================================== 
   6. HOMEPAGE INTRO: TEXT + UZH LOGO + PORTRAIT
   --------------------------------------------------------------------------
   Expected homepage structure:

   <section class="intro-grid home-intro-combined">
     <div class="intro-text">
       <h1>...</h1>
       <p class="subtitle">...</p>
       <hr class="intro-rule">
       <div class="bio-copy">...</div>
     </div>
     <aside class="intro-side intro-media"> ... logo + portrait ... </aside>
     <div class="funding-strip">...</div>
     <div class="profile-buttons">...</div>
   </section>
   ========================================================================== */

.intro-grid,
.home-intro-combined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--home-right-column);
  column-gap: var(--home-column-gap); /* Horizontal gap between text and image column */
  row-gap: var(--home-row-gap);       /* Vertical gap before funding/buttons rows */
  align-items: start;
  padding-bottom: 56px;
  border-bottom: none;
}

.intro-text p {
  max-width: 680px;                    /* CHANGE HERE: width of homepage paragraphs */
}

.intro-rule {
  border: 0;
  border-top: 1px solid var(--line);   /* CHANGE HERE: horizontal line color/thickness */
  margin: 50px 0 0;                    /* CHANGE HERE: space above the line */
}

.bio-copy {
  margin-top: var(--bio-top-space);    /* Space between line and biography text */
}

.bio-copy p {
  font-size: var(--body-font-size);
  line-height: 1.62;
}

.bio-copy p,
.prose p {
  text-align: justify;
  /* hyphens: auto; */
}

.intro-side,
.intro-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--image-gap);               /* Space between UZH logo and portrait */
  padding-top: 0;
}

.uzh-logo {
  width: min(100%, var(--uzh-logo-width));
}

.hero-portrait {
  width: min(100%, var(--portrait-width));
  border-radius: var(--portrait-radius);
  transform: translateY(var(--portrait-shift-y));
}

/* Old text-link row. Kept for compatibility, but profile-buttons are preferred. */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
}

.link-row a {
  color: var(--blue);
  font-weight: 650;
}


/* ========================================================================== 
   7. HOMEPAGE FUNDING STRIP
   --------------------------------------------------------------------------
   Two-column block below the homepage intro:
   left column = funding logos; right column = text.
   ========================================================================== */

.funding-strip {
  grid-column: 1 / -1;                 /* Span across both homepage columns */
  margin-top: var(--funding-top-space);
  margin-bottom: var(--funding-bottom-space);
}

.funding-row {
  display: grid;
  grid-template-columns: var(--funding-logo-column) minmax(0, 1fr);
  gap: var(--funding-column-gap);
  align-items: center;
  margin-bottom: var(--funding-row-gap);
}

.funding-row:last-child {
  margin-bottom: 0;
}

.funding-logo-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.funding-logo {
  width: auto;
  max-width: var(--funding-logo-width);
  height: auto;
}

.erc-logo,
.snf-logo {
  max-width: var(--funding-logo-width);
}

.funding-text-cell p {
  margin: 0;
  font-size: var(--funding-text-size);
  line-height: 1.6; /* change spaceing between lines*/
  color: var(--ink);
}

.funding-text-cell a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ========================================================================== 
   8. PROFILE / EXTERNAL LINK BUTTONS
   --------------------------------------------------------------------------
   Used for Email, LinkedIn, Google Scholar, ORCID, SSRN, IDEAS RePEc, etc.
   Can be used on homepage and research page.
   ========================================================================== */

.profile-buttons,
.research-links {
  grid-column: 1 / -1;                 /* Makes buttons span full intro grid when inside homepage */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--button-gap);
  margin-top: 10px;
  padding-top: 4px;
}

/* Use this class when the buttons should align left, e.g. under a page intro. */
.research-links {
  justify-content: flex-start;
  margin: 12px 0 28px;
}

.profile-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  /* border: 1px solid #d8d4cc; */
  border: 1px solid rgba(48,98,255,.22);
  /*border-right: 1.5px solid var(--blue);*/  /* Subtle blue accent, matches current design */
  /*border-bottom: 1.5px solid var(--blue);*/ /*Subtle blue accent, matches current design */
  border-radius: var(--button-radius);
  background: #fff;
  color: #5a557f;
  text-decoration: none;
  font-size: var(--button-font-size);
  font-weight: 500;
  line-height: 1.2;
}

.profile-button:hover {
  color: var(--blue);
  border-color: var(--blue);
  text-decoration: none;
}

.profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 15px;
  line-height: 1;
  color: #8b88a8;
}

.profile-button:hover .profile-icon {
  color: var(--blue);
}

.profile-button-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.75;
}

.profile-button:hover .profile-button-icon-img {
  opacity: 1;
}

/* Left-align profile buttons on pages such as Research */
.profile-buttons-left {
  justify-content: flex-start;
}

/* ========================================================================== 
   9. STANDARD CONTENT SECTIONS AND NOTES
   --------------------------------------------------------------------------
   Used for ordinary page sections, two-column text blocks, notes, education,
   affiliations, etc.
   ========================================================================== */

.content-section {
  padding: 42px 0;
  /* border-bottom: 1px solid var(--line); */
}

.content-section:last-child {
  border-bottom: 0;
}

.split-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.simple-list p,
.text-list p {
  margin: 0 0 10px;
}

.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 34px;
}

.note {
  border: 1px solid var(--card-border2);
  border-left: 2px solid var(--blue);
  /* border-left: 2px solid var(--card-border2); */
  background: var(--paper-card-background);
  padding: 14px 18px;
  margin-top: 26px;
  border-radius: 5px;
  max-width: 400px;
}


/* ========================================================================== 
   10. RESEARCH PAGE AND PAPER CARDS
   --------------------------------------------------------------------------
   Minimalist card design for publications, working papers, and work in progress.

   Recommended HTML:

   <section class="content-section paper-section">
     <h2>Refereed journal publications</h2>
     <div class="paper-list">
       <article class="paper-card">
         <div class="paper-card-main">
           <h3 class="paper-title">Paper title</h3>
           <p class="paper-meta"><span class="journal-name">Journal</span>, year.</p>

           <div class="paper-actions" aria-label="Paper links">
             <a class="paper-link-button" href="..." target="_blank" rel="noopener">DOI</a>
             <a class="paper-link-button" href="..." target="_blank" rel="noopener">WP version</a>
           </div>
         </div>

         <div class="paper-logo-cell">
           <img class="journal-logo" src="assets/journals/journal-logo.png" alt="Journal logo">
         </div>
       </article>
     </div>
   </section>

   Paper links and journal logos are optional. If omitted, the card still looks good.
   ========================================================================== */

.paper-section {
  padding-top: 36px;
}

.paper-section h2,
.paper-section h1 {
  margin-bottom: 18px;
}

.paper-list {
  display: flex;
  flex-direction: column;
  gap: var(--paper-card-gap);
}

.paper-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: var(--paper-card-padding-y) var(--paper-card-padding-x);
  border: 1px solid var(--card-border2);
  /* border-left: 2px solid rgba(35, 79, 210, 0.35); */
  /* border-left: 2px solid var(--card-border2); */
  border-radius: var(--paper-card-radius);
  /* background: var(--card-bg); */
  /* background: var(--light); */
  background: var(--paper-card-background);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* .paper-card:hover { */
  /* border-color: var(--blue);          Full card border turns blue on hover */ */
  /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.035); */
  /* transform: translateY(-1px); */
/* } */

.paper-card-main {
  min-width: 0;
}

.paper-title {
  margin: 0;
  color: var(--blue);
  font-size: var(--paper-title-size);
  font-weight: var(--paper-title-weight);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.paper-title a {
  color: var(--blue);
  text-decoration-color: rgba(35, 79, 210, 0.28);
}

.paper-title a:hover {
  text-decoration-color: var(--blue);
}

.paper-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--paper-meta-size);
  line-height: 1.45;
}

.journal-name {
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.paper-logo-cell {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--journal-logo-width);

  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.journal-logo {
  width: auto;
  max-width: var(--journal-logo-width);
  max-height: var(--journal-logo-height);
  object-fit: contain;

  opacity: 1;
  filter: none;
  background: transparent;
}

.paper-card:hover .journal-logo {
  opacity: 1;
  filter: none;
}

/* Small label that can be used for working papers, revise-and-resubmit, etc. */
.paper-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

/* When media coverage is placed as a direct child of .paper-card,
   make it span the full card width, including the journal-logo column. */
.paper-card > .coverage-groups {
  grid-column: 1 / -1;
  width: 100%;
}



/* Paper-card action buttons -----------------------------------------------
   These small pill-shaped links sit inside each paper card, usually below the
   journal/author line. Use them for DOI, WP version, SSRN, NBER, CESifo, etc.

   Example HTML:
   <div class="paper-actions" aria-label="Paper links">
     <a class="paper-link-button" href="..." target="_blank" rel="noopener">DOI</a>
     <a class="paper-link-button" href="..." target="_blank" rel="noopener">WP version</a>
   </div>
------------------------------------------------------------------------- */

.paper-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--paper-link-gap);
  margin-top: 25px; /* CHANGE HERE: moves DOI/WP buttons lower */
}


.paper-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;
  padding: 0 var(--paper-link-padding-x);

  /* border: 1px solid var(--blue); */
  border: 1px solid var(--coverage-button-border);
  border-radius: var(--paper-link-radius);
  background: #fff;
  /* color: var(--blue); */
  color: var(--coverage-button-color);
  text-decoration: none;

  font-size: var(--paper-link-font-size);
  font-weight: 500;
  line-height: 1;
}


.paper-link-button:hover {
  color: var(--blue);
  border-color: var(--blue);
  text-decoration: none;
  background: var(--lightblueBG);
}

/* Optional quieter secondary button, for example for older WP versions. */
.paper-link-button.secondary {
  color: var(--muted);
}

.paper-link-button.secondary:hover {
  color: var(--blue);
}

/* ========================================================================== 
   11. LEGACY PAPER-LIST COMPATIBILITY
   --------------------------------------------------------------------------
   Older pages may still use <article class="paper-item">. These rules keep
   those pages readable. For the new research page, prefer `.paper-card`.
   ========================================================================== */

.paper-item {
  padding: 18px 0 20px;
  border-top: 1px solid var(--line);
}

.paper-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.paper-item p {
  margin: 7px 0 0;
}


/* ========================================================================== 
   12. TABLE-LIKE LISTS
   --------------------------------------------------------------------------
   Used when a page has rows with text on the left and year/date/meta on right.
   ========================================================================== */

.table-list {
  border-top: 1px solid var(--line);
}

.table-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.table-list span:last-child,
.empty-list span:first-child {
  color: var(--muted);
}


/* ========================================================================== 
   13. LOGO GROUPS, CONTACT GRID, FOOTER
   ========================================================================== */

.funding-logos {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.funding-logos img {
  width: auto;
  max-width: min(100%, 280px);
  max-height: 105px;
  object-fit: contain;
}

.funding-logos img:first-child {
  max-height: 56px;
}

.funding-logos.single img {
  max-width: min(100%, 390px);
  max-height: 100px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: start;
}

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--side-padding) 52px;
  color: var(--muted);
  font-size: 14px;
}

.footer-inner {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-inner p {
  margin: 0 0 4px;
}

.footer-name {
  color: var(--ink);
  font-weight: 700;
}

.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}




/* ========================================================================== 
   14. MEDIA COVERAGE / PRESS LINKS
   --------------------------------------------------------------------------
   Used in two places:
   1. On media-coverage.html, where each card lists outlets by language.
   2. Inside research paper cards, when a paper has press/media coverage.

   The media coverage area deliberately looks different from the DOI/WP buttons:
   it has a very light blue background, a subtle border, and quieter buttons.
   This keeps the academic paper links visually primary, while still making
   media coverage easy to find.
   ========================================================================== */

.coverage-groups {
  display: flex;
  flex-direction: column;
  gap: var(--coverage-group-gap);
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--paper-card-radius);

  border: 1px solid var(--coverage-box-border);
  /* border-left: 2px solid var(--coverage-box-left-border); */
  background: var(--coverage-box-bg);
}

/* Small uppercase label, e.g. "Media coverage". */
.coverage-note {
  margin: 0 0 2px;
  /* color: var(--blue); */
  color: var(--muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant: small-caps;
}

/* One language row: language label on the left, outlet buttons on the right. */
.coverage-group {
  display: grid;
  grid-template-columns: var(--coverage-label-width) minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

/* Language label, e.g. English, German, French, Spanish. */
.coverage-language {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--coverage-label-size);
  /* font-weight: var(--coverage-label-weight); */
  line-height: 1.2;
  letter-spacing: 0.03em;
  /* text-transform: uppercase; */
}

/* Remove the default top margin of paper actions when they sit inside
   language-grouped coverage rows. */
.coverage-groups .paper-actions,
.coverage-group .paper-actions {
  margin-top: 0;
  gap: 6px;
}

/* Media outlet buttons: intentionally quieter than DOI/WP buttons. */
.coverage-groups .paper-link-button,
.coverage-groups .media-link-button {
  border-color: var(--coverage-button-border);
  background: #fff;
  color: var(--coverage-button-color);
  font-size: 12px;
  font-weight: 500;
  border-radius: 150px;
  
}

.coverage-groups .paper-link-button.secondary {
  color: var(--coverage-button-color);
}

.coverage-groups .paper-link-button:hover,
.coverage-groups .media-link-button:hover {
  border-color: var(--blue);
  background: var(--lightblueBG);
  color: var(--blue);
  text-decoration: none;
}


/* ========================================================================== 
   15. CONTACT PAGE
   --------------------------------------------------------------------------
   Single minimalist card for all contact information.

   Expected HTML:

   <section class="contact-cards contact-cards-single">
     <article class="contact-card contact-card-single">
       ...
     </article>
   </section>

   Main controls:
   - max-width controls how wide the box is.
   - .contact-detail grid-template-columns controls the label column width.
   - border-left gives the card the same subtle blue accent as the paper cards.
   ========================================================================== */

.contact-header {
  margin-bottom: 30px;
}

/* Container for the single contact card.
   The box is left-aligned because there is no `margin: 0 auto`. */
.contact-cards-single {
  display: block;
  max-width: 760px; /* CHANGE HERE: width of the contact box */
}

/* Main contact card */
.contact-card-single {
  padding: 22px 24px;
  border: 1px solid var(--card-border2);
  border-left: 2px solid var(--card-border2);
  background: var(--paper-card-background);
  border-radius: 5px;
}

/* Small label at the top of the card */
.contact-card-label {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.2;
  /* font-variant: small-caps; */
}

/* Name/title inside the contact card */
.contact-card-title {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
}

/* Each row of contact information.
   First column = label, second column = value. */
.contact-detail {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr); /* CHANGE HERE: width of label column */
  gap: 22px;                                  /* CHANGE HERE: gap between label and value */
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.contact-detail:first-of-type {
  padding-top: 0;
}

.contact-detail:last-of-type {
  border-bottom: 0;
}

/* Labels such as Address, Office, Phone, Email */
.contact-detail-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

/* Values in the right column */
.contact-detail-value {
  color: var(--ink);
  line-height: 1.6;
}

/* Button row at bottom of contact card */
.contact-card-actions {
  margin-top: 18px;
}


/* ========================================================================== 
   16. RESPONSIVE DESIGN: TABLETS AND PHONES
   --------------------------------------------------------------------------
   Rules below override desktop layout on smaller screens.
   ========================================================================== */

@media (max-width: 760px) {
  body {
    font-size: 16px; /* Slightly larger on phones for readability */
  }

  .layout,
  .header-inner,
  .site-footer {
    padding-left: var(--side-padding-mobile);
    padding-right: var(--side-padding-mobile);
  }

  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .nav {
    justify-content: flex-start;
    gap: 10px 16px;
  }

  .home-layout,
  .page-layout {
    padding-top: 40px;
  }

  .split-section,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }


  /* -----------------------------------------------------------------------
     MOBILE HOMEPAGE
     -----------------------------------------------------------------------
     Order:
     1. Name/title on the left, UZH logo on the upper right
     2. Portrait
     3. Biography text
     4. Funding
     5. Buttons
  ----------------------------------------------------------------------- */

  .intro-grid,
  .home-intro-combined {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 4px; /* CHANGE HERE: space between name and subtitle */
  }

  /* Allows the h1, subtitle, rule, and bio text to be positioned separately */
  .home-intro-combined .intro-text {
    display: contents;
  }

  /* Allows the UZH logo and portrait to be positioned separately */
  .home-intro-combined .intro-media {
    display: contents;
  }

  .home-intro-combined .intro-text > h1 {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .home-intro-combined .intro-text > .subtitle {
    order: 2;
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  /* UZH logo: upper-right corner on mobile */
  .home-intro-combined .uzh-logo {
    order: 1;
    grid-column: 2;
    grid-row: 1 / span 2;

    justify-self: end;
    align-self: start;

    width: min(150px, 36vw); /* CHANGE HERE: mobile UZH logo size */
    margin-top: 2px;
  }

  /* Portrait: centered below the name/title/logo area */
  .home-intro-combined .hero-portrait {
    order: 3;
    grid-column: 1 / -1;

    justify-self: center;
    transform: none;
    margin-top: 18px;
  }

  .home-intro-combined .intro-text > .intro-rule {
    order: 4;
    grid-column: 1 / -1;
  }

  .home-intro-combined .bio-copy {
    order: 5;
    grid-column: 1 / -1;
    margin-top: 28px;
  }

  .funding-strip {
    order: 6;
    grid-column: 1 / -1;
  }

  .profile-buttons {
    order: 7;
    grid-column: 1 / -1;
  }


  /* Funding section on mobile -------------------------------------------- */

  .funding-row {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 34px;
  }

  .funding-logo-cell {
    justify-content: flex-start;
  }

  .funding-text-cell p {
    font-size: var(--funding-text-size);
  }


  /* Generic one-column layouts on mobile --------------------------------- */

  .columns {
    grid-template-columns: 1fr;
  }

  .table-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }


  /* -----------------------------------------------------------------------
     MOBILE RESEARCH CARDS
     -----------------------------------------------------------------------
     On mobile, cards with journal logos use two columns:
     - left: paper text and buttons
     - right: journal logo
     Media coverage, when present, spans below both.
  ----------------------------------------------------------------------- */

  .paper-card {
    grid-template-columns: 1fr;
    gap: 10px;
    position: relative;
    padding-bottom: var(--paper-card-padding-y);
  }

  /* Cards with a journal logo */
  .paper-card:has(.paper-logo-cell) {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 10px;
  }

  .paper-card:has(.paper-logo-cell) .paper-card-main {
    grid-column: 1;
    grid-row: 1;
  }

  .paper-card:has(.paper-logo-cell) .paper-logo-cell {
    position: static;
    grid-column: 2;
    grid-row: 1;

    justify-self: end;
    align-self: start; /* CHANGE HERE: use center/end if you want it lower */

    min-width: 0;
    width: auto;
    margin-left: 8px;
  }

  .journal-logo {
    max-width: 70px;
    max-height: 52px;
  }

  /* Media coverage box spans full card width below text + journal logo */
  .paper-card > .coverage-groups {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }

  .coverage-group {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .coverage-language {
    margin-top: 0;
  }


  /* Contact page on mobile ------------------------------------------------ */

  .contact-cards-single {
    max-width: none;
  }

  .contact-detail {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


@media (max-width: 520px) {
  :root {
    --side-padding-mobile: 20px;
    --home-top-space: 40px;
  }

  .nav a {
    font-size: 13.5px;
  }

  .profile-button {
    padding: 7px 11px;
  }
}