/*
  =====================================================================================================================
  Fonts
  =====================================================================================================================
*/
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src:
    local("Lato Italic"),
    local("Lato-Italic"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src:
    local("Lato Italic"),
    local("Lato-Italic"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src:
    local("Lato Bold Italic"),
    local("Lato-BoldItalic"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src:
    local("Lato Bold Italic"),
    local("Lato-BoldItalic"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src:
    local("Lato Regular"),
    local("Lato-Regular"),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src:
    local("Lato Regular"),
    local("Lato-Regular"),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src:
    local("Lato Bold"),
    local("Lato-Bold"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src:
    local("Lato Bold"),
    local("Lato-Bold"),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  =====================================================================================================================
  Base / Global
  =====================================================================================================================
*/

* {
  box-sizing: border-box;
}

body,
td,
th,
tr,
p,
a {
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

strong {
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 24px;
}

.papertitle {
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/*
  =====================================================================================================================
  Links / Inline Highlights
  =====================================================================================================================
*/

a {
  color: #1772d0;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

highlight-accepted {
  color: #ef5c05;
  text-decoration: none;
  font-style: italic;
}

span.highlight {
  background-color: #ffffd0;
}

/*
  =====================================================================================================================
  Page Layout
  =====================================================================================================================
*/

.page {
  width: 100%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.wide-text-block {
  width: 100%;
  padding: 16px;
}

.wide-text-block--section-intro {
  padding-bottom: 0;
}

.wide-text-block__text--justify {
  text-align: justify;
}

/*
  =====================================================================================================================
  Profile / Intro
  =====================================================================================================================
*/

.name {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
  font-family: "Lato", Verdana, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 700;
}

.bio {
  display: grid;
  grid-template-areas:
    "name photo"
    "content photo";
  grid-template-columns: 63% 37%;
  align-items: start;
  width: 100%;
}

.bio-name {
  grid-area: name;
}

.bio-content {
  grid-area: content;
}

.bio-photo-frame {
  grid-area: photo;
}

.bio-name,
.bio-content,
.bio-photo-frame {
  padding: 16px;
}

.bio-name,
.bio-links {
  text-align: center;
}

.bio-text {
  text-align: justify;
}

.bio-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

/*
  =====================================================================================================================
  Research / Paper List
  =====================================================================================================================
*/

.publication {
  width: 100%;
}

.publication__intro,
.publication__list {
  width: 100%;
}

.paper-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.paper-entry {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  column-gap: 16px;
  align-items: stretch;
  padding: 16px;
  scroll-margin-top: 16px;
}

.paper-thumb {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #f4f4f4;
}

.paper-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-image--isac {
  object-position: 42% 50%;
}

.paper-image--ace {
  object-position: 50% 46%;
}

.paper-image--trace {
  object-position: 50% 47%;
}

.paper-content {
  min-width: 0;
  overflow-wrap: break-word;
}

.paper-title-link {
  display: block;
  line-height: 1.25;
  text-align: justify;
  text-justify: inter-word;
}

.paper-authors,
.paper-venue,
.paper-links {
  margin-top: 4px;
  line-height: 1.35;
}

.paper-authors {
  text-align: justify;
  text-justify: inter-word;
}

.paper-description {
  margin: 8px 0 0;
  line-height: 1.35;
  text-align: justify;
  text-justify: inter-word;
}

/*
  =====================================================================================================================
  Responsive
  =====================================================================================================================
*/

@media (min-width: 641px) {
  .page {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  body {
    margin: 0;
  }

  .page {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
  }

  .bio {
    grid-template-areas:
      "name"
      "photo"
      "content";
    grid-template-columns: minmax(0, 1fr);
  }

  .bio-photo {
    width: min(70%, 260px);
    margin: 0 auto;
  }

  .paper-entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding: 16px;
  }

  .paper-thumb {
    min-height: auto;
  }

  .paper-image {
    position: static;
    height: auto;
  }
}

/*
  =====================================================================================================================
  Image Zoom / Lightbox
  =====================================================================================================================
*/

#lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

#lightbox-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1200px;
  max-height: 80%;
  object-fit: contain;
}

#lightbox-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

#lightbox-close:hover,
#lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.zoomable-image {
  cursor: pointer;
  transition: 0.3s;
}

.zoomable-image:hover {
  opacity: 0.8;
}

#lightbox-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}