@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Charter/charter_regular.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Charter/charter_italic.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Charter/charter_bold.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: bold;
  src: url("../fonts/Charter/charter_bold_italic.woff2") format("woff2");
}

.columns-12 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(12, 1fr);
}

.columns-10 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(10, 1fr);
}

.columns-8 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(8, 1fr);
}

.columns-6 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(6, 1fr);
}

.columns-5 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(5, 1fr);
}

.columns-4 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(4, 1fr);
}

.columns-3 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(3, 1fr);
}

.columns-2 {
  display: grid;
  -moz-column-gap: 2vw;
  column-gap: 2vw;
  grid-template-columns: repeat(2, 1fr);
}

/* clarity.html CSS */

.title {
  view-transition-name: project-title-morph;
}

.author {
  view-transition-name: project-authors-move;
}

/* Optional: Make the header background expand too */
#first-content {
  view-transition-name: project-card-expand;
}

::view-transition-group(project-title-morph),
::view-transition-group(project-authors-move) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth cross-fade for the rest of the page content */
::view-transition-old(root) {
  animation: 200ms ease-out both fade-out;
}

::view-transition-new(root) {
  animation: 400ms ease-in both fade-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media screen and (max-width: 992px) {
  .columns-12 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(6, 1fr);
  }

  .columns-10 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(5, 1fr);
  }

  .columns-8 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(4, 1fr);
  }

  .columns-6 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
  }

  .columns-5 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 769px) {
  .columns-12 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
  }

  .columns-2 {
    display: grid;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    grid-template-columns: repeat(1, 1fr);
  }
}

/*# sourceMappingURL=clarity.css.map */
@view-transition {
  navigation: auto;
}

.ortho-title {
  view-transition-name: ortho-title;
}

/* Keep the whole page transition subtle */
::view-transition-old(root) {
  animation: root-out 180ms ease-out both;
}

::view-transition-new(root) {
  animation: root-in 220ms ease-out both;
}

/* Make the title the main actor */
::view-transition-group(ortho-title) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20;
}

::view-transition-old(ortho-title) {
  animation: ortho-title-out 240ms ease-out both;
}

::view-transition-new(ortho-title) {
  animation: ortho-title-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Everything else on the destination page fades in later */
.page-content {
  opacity: 0;
  animation: page-content-in 420ms ease-out 260ms forwards;
}

@keyframes root-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.97;
  }
}

@keyframes root-in {
  from {
    opacity: 0.95;
  }

  to {
    opacity: 1;
  }
}

@keyframes ortho-title-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0.85;
    transform: translateY(-4px) scale(0.985);
  }
}

@keyframes ortho-title-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(1.02);
  }

  70% {
    opacity: 1;
    transform: translateY(-1px) scale(1.003);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes page-content-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.author-link {
  color: inherit;
  text-decoration: underline;

  /* IMPORTANT: reset all typography */
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;

  /* optional: nicer underline */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.author-link:hover {
  opacity: 0.7;
}

.author-link {
  color: #007bff;
  /* A professional academic blue */
  /* text-decoration: none; */
  /* Removes underline if desired */
  transition: color 0.2s ease;
}

.author-link:hover {
  color: #0056b3;
  /* Darker blue on hover */
  text-decoration: underline;
}

.author {
  color: #007bff;
  /* This makes all text blue */
}

.author-affiliation {
  color: #666666 !important;
  /* Forces the text to pure black */
  font-size: 13px;
  /* Makes the letters smaller (standard is 16px) */
  line-height: 1.5;
  /* Adjusts spacing between lines */
  font-weight: 400;
  /* Ensures it's not too bold */
  margin-top: 5px;
}

/* Optional: Make the superscript numbers slightly smaller to match */
.author-affiliation sup {
  font-size: 0.75em;
  color: #666666;
}