/* Inner pages (About, Publications, Software and others). Restyles the theme's main.css to match the home page.
   Sizes are in px because the theme changes the root font size by screen width. */

:root {
  /* These pages are in panels, so the art needs no fade behind the text */
  --wash: none;
  --glass: rgba(255, 255, 255, 0.86);
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

/* Layout: profile card beside a content panel */
#main {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 88px);
}

#main::before,
#main::after {
  display: none;
}

/* Pages without a profile card get one centered panel, narrow enough for comfortable line lengths */
#main > .page:only-child,
#main > .archive:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 980px;
}

#main .page,
#main .archive,
#main .sidebar {
  float: none;
  width: auto;
  margin: 0;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  box-shadow: 0 18px 50px var(--shadow);
  opacity: 1;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

#main .page,
#main .archive {
  padding: clamp(24px, 4vw, 56px);
}

#main .page__inner-wrap {
  float: none;
  width: auto;
  margin: 0;
}

/* Profile card */
#main .sidebar {
  position: sticky;
  top: 84px;
  padding: 24px;
  font-family: var(--sans);
}

#main .sidebar .author__avatar,
#main .sidebar .author__content {
  display: block;
  width: auto;
  padding: 0;
}

#main .sidebar .author__avatar img {
  display: block;
  width: 100%;
  max-width: 180px;
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
}

#main .author__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#main .author__bio {
  margin: 6px 0 14px;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}

#main .author__urls {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--soft);
  font-size: 15px;
}

#main .author__urls li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 15px;
  white-space: normal;
}

#main .author__urls a,
#main .author__urls a:visited {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

#main .author__urls a:hover {
  color: var(--accent);
}

#main .author__urls-wrapper button {
  display: none;
}

/* Type */
#main .page__title {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

#main .page__content,
#main .archive {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}

#main .page__content p,
#main .archive p,
#main .page__content li,
#main .archive li {
  font-size: 17px;
}

#main .page__content h2,
#main .archive h2 {
  margin: 44px 0 16px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

#main .page__content a,
#main .page__content a:visited,
#main .archive a,
#main .archive a:visited {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#main .page__content a:focus-visible,
#main .archive a:focus-visible,
#main .author__urls a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Lists, including the numbered publications */
#main .page__content ul,
#main .page__content ol,
#main .archive ul,
#main .archive ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}

#main .page__content li,
#main .archive li {
  margin: 0 0 0.75em;
  padding-left: 0.2em;
}

#main .page__content li::marker,
#main .archive li::marker {
  color: var(--accent);
  font-weight: 600;
}

/* Software: dividers, package logos and GitHub chart */
#main .archive hr,
#main .page__content hr {
  height: 1px !important;
  margin: 36px 0;
  border: 0;
  background-color: color-mix(in srgb, var(--ink) 16%, transparent) !important;
}

#main .archive img,
#main .page__content img {
  max-width: 100%;
  height: auto;
}

#main .page footer.page__meta:empty {
  display: none;
}

/* Contact form */
#main .page__content .contact-form {
  display: grid;
  gap: 6px;
  max-width: 620px;
  margin: 0 0 24px;
}

#main .page__content .contact-form label {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

#main .page__content .contact-form input:not([type="hidden"]):not(.contact-form__trap),
#main .page__content .contact-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 12px;
  box-shadow: none;
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}

#main .page__content .contact-form textarea {
  resize: vertical;
}

#main .page__content .contact-form input:focus,
#main .page__content .contact-form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 0;
}

/* Hidden from people, as a trap for spam bots */
#main .page__content .contact-form .contact-form__trap {
  display: none;
}

#main .page__content .contact-form button {
  justify-self: start;
  width: auto;
  min-height: 50px;
  margin: 16px 0 0;
  padding: 0 26px;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--button-text);
  font: 700 16px var(--sans);
  cursor: pointer;
}

#main .page__content .contact-form button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

#main .page__content .contact-sent {
  max-width: 620px;
  padding: 14px 18px;
  background: color-mix(in srgb, #4fb893 16%, #ffffff);
  border: 1px solid color-mix(in srgb, #4fb893 50%, transparent);
  border-radius: 14px;
  font-weight: 600;
}

#main .page__content .contact-sent[hidden] {
  display: none;
}

#main .page__content .contact-alt {
  color: var(--soft);
  font-size: 15px;
}

/* Research area pages */
#main .archive .research-hero {
  display: block;
  width: 100%;
  height: 340px;
  margin: 0 0 24px;
  /* Shows the whole square image; the side bands match the image's own background */
  object-fit: contain;
  background: #fbfaff;
  border-radius: 22px;
}

/* Featured publications */
#main .archive .featured-pubs {
  margin: 0 0 36px;
}

#main .archive .featured-pubs h2 {
  margin-top: 8px;
}

#main .archive .featured-pubs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main .archive .featured-pub {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 16%, #ffffff), #ffffff 70%);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  border-top: 4px solid var(--tint);
  border-radius: 18px;
}

#main .archive .featured-pub:nth-child(3n + 1) { --tint: #e58aa8; }
#main .archive .featured-pub:nth-child(3n + 2) { --tint: #6fa8e0; }
#main .archive .featured-pub:nth-child(3n + 3) { --tint: #5fbf9f; }

#main .archive .featured-pub__journal {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

#main .archive .featured-pub__title {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

#main .archive .featured-pub__authors {
  margin: 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Sits at the bottom of each card, whatever the title and author lengths */
#main .archive .featured-pub__doi {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  #main .archive .featured-pubs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lab members on the About page */
#main .page__content .lab-members__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main .page__content .lab-member {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 20px;
}

#main .page__content .lab-member__photo {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  background: #a98be0;
  border-radius: 50%;
}

/* Placeholder photos cycle through the logo's colors. Real photos cover this. */
#main .page__content .lab-member:nth-child(6n + 1) .lab-member__photo { background: #e58aa8; }
#main .page__content .lab-member:nth-child(6n + 2) .lab-member__photo { background: #f0a868; }
#main .page__content .lab-member:nth-child(6n + 3) .lab-member__photo { background: #e3bf4f; }
#main .page__content .lab-member:nth-child(6n + 4) .lab-member__photo { background: #5fbf9f; }
#main .page__content .lab-member:nth-child(6n + 5) .lab-member__photo { background: #6fa8e0; }

#main .page__content .lab-member__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

#main .page__content .lab-member__role {
  margin: 2px 0 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

#main .page__content .lab-member__description {
  margin: 0;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.5;
}

/* PI block on the About page */
#main .page__content .lab-page__current {
  margin-top: 8px;
}

#main .page__content .pi {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 20px;
}

#main .page__content .pi__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

#main .page__content .pi__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#main .page__content .pi__role {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 4px 0 12px;
  color: var(--soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

#main .page__content .pi__role-label {
  color: var(--accent);
  font-weight: 700;
}

#main .page__content .pi__bio {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
}

#main .page__content .pi__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

#main .page__content .pi__links li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--soft);
  font-size: 15px;
}

#main .page__content .pi__links a,
#main .page__content .pi__links a:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

#main .page__content .pi__links a:hover {
  color: var(--accent);
}

#main .page__content .pi__interests-heading {
  margin: 4px 0 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#main .page__content .pi__interests {
  margin: 0;
}

#main .page__content .pi__interests li {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  #main .page__content .pi {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  #main .page__content .pi__photo {
    width: 140px;
  }
}

/* Footer: the theme pins its own to the page bottom; this page uses the shared one */
.page__footer {
  display: none;
}

@media (max-width: 925px) {
  #main {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }

  #main .sidebar {
    position: static;
    padding: 18px;
    border-radius: 24px;
  }

  /* Photo beside the name, links in a row underneath */
  #main .sidebar > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 18px;
    align-items: center;
  }

  #main .page,
  #main .archive {
    border-radius: 24px;
  }

  #main .sidebar .author__avatar img {
    max-width: 96px;
    margin: 0;
  }

  #main .author__urls-wrapper {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #main .author__urls {
    position: static;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 14px;
    width: auto;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #main .author__urls::before,
  #main .author__urls::after {
    display: none;
  }

  #main .author__urls a,
  #main .author__urls a:visited {
    min-height: 44px;
  }

  #main .page__content .lab-members__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep package logos from squeezing the text beside them */
  #main .archive img[align="right"] {
    width: 96px;
    margin-left: 12px;
  }
}

@media print {
  body::before {
    display: none;
  }

  #main {
    display: block;
  }

  #main .sidebar {
    display: none;
  }
}