/* =========================
   COLORS
========================= */

:root {
  --main-color: #5165D0;
  --sub-color: #9DA9EA;
  --light-color: #EEF0FF;

  --text-color: #222222;
  --subtext-color: #6F6F6F;
  --line-color: #DDE1F7;
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #ffffff;

  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;

  color: var(--text-color);
}

a {
  color: var(--main-color);
  text-decoration: none;

  transition: color 0.15s ease;
}

a:hover {
  color: #3F50B5;
  text-decoration: underline;
}


/* =========================
   CONTAINER
========================= */

.container {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;
  padding: 70px 28px 100px;
}


/* =========================
   ABOUT — DESKTOP
========================= */

.about {
  display: grid;

  grid-template-columns: 270px minmax(0, 1fr);

  column-gap: 50px;

  align-items: start;

  margin-bottom: 65px;
}


/* =========================
   PROFILE
========================= */

.profile-column {
  display: flex;
  flex-direction: column;

  width: 270px;
}

.profile-image {
  display: block;

  width: 270px;
  height: 270px;

  object-fit: cover;
  object-position: center;

  border-radius: 30px;
}


/* =========================
   PROFILE ICONS
========================= */

.profile-links {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 240px;

  gap: 18px;

  /* photo ↔ icons */
  margin-top: 18px;
}

.profile-links a {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 25px;
  line-height: 1;

  color: var(--main-color);
  text-decoration: none;

  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.profile-links a:hover {
  color: #3F50B5;
  text-decoration: none;

  transform: translateY(-2px);
}


/* =========================
   ABOUT CONTENT
========================= */

.about-content {
  min-width: 0;
}

.about-content h1 {
  margin: 0 0 24px;

  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;

  color: var(--text-color);
}

.bio p {
  margin: 0 0 20px;
}

.bio p:last-child {
  margin-bottom: 0;
}

.contact {
  color: var(--subtext-color);
}


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

.section {
  margin-top: 50px;
}

.section h2 {
  margin: 0;

  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;

  color: var(--text-color);
}

.section-line {
  width: 100%;
  height: 1px;

  margin: 9px 0 20px;

  background: var(--sub-color);
}


/* =========================
   NEWS
========================= */

.news-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.news-item {
  display: grid;

  grid-template-columns: 105px minmax(0, 1fr);

  align-items: baseline;
}

.news-date {
  font-size: 15px;
  font-weight: 700;

  color: var(--main-color);
}


/* =========================
   PUBLICATIONS — DESKTOP
========================= */

.publication {
  display: grid;

  grid-template-columns: 270px minmax(0, 1fr);

  column-gap: 24px;

  align-items: center;

  margin-bottom: 34px;
}

.publication:last-child {
  margin-bottom: 0;
}


/* Figure */

.paper-figure {
  width: 270px;
}

.paper-figure a {
  display: block;
  width: 100%;
}

.paper-figure img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* Paper Info */

.paper-info {
  min-width: 0;
}

.paper-title {
  margin-bottom: 5px;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;

  color: var(--text-color);
}

.authors {
  margin-bottom: 2px;

  color: #454545;
}

.venue {
  margin-bottom: 4px;

  color: #444444;
}

.paper-links {
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 16px;
}

/* =========================
   SELECTION
========================= */

::selection {
  background: var(--light-color);
  color: var(--text-color);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  body {
    font-size: 16px;
    line-height: 1.5;
  }

  .container {
    padding: 45px 22px 70px;
  }


  /* =========================
     ABOUT — MOBILE ONLY
  ========================= */

  .about {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 28px;

    margin-bottom: 50px;
  }


  /* Profile centered */

  .profile-column {
    width: 200px;

    align-items: center;
  }

  .profile-image {
    width: 200px;
    height: 200px;
  }

  .profile-links {
    width: 200px;

    gap: 18px;
    margin-top: 18px;
  }

  .profile-links a {
    font-size: 23px;
  }


  /* Name + bio below profile */

  .about-content {
    width: 100%;
  }

  .about-content h1 {
    margin: 0 0 22px;

    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;

    text-align: center;
  }

  .bio p {
    margin-bottom: 18px;
  }


  /* Sections */

  .section {
    margin-top: 42px;
  }

  .section h2 {
    font-size: 23px;
  }


  /* News */

  .news-item {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .news-date {
    font-size: 14px;
  }


  /* Publications stack only on mobile */

  .publication {
    display: block;

    margin-bottom: 42px;
  }

  .paper-figure {
    width: 100%;
    max-width: 520px;

    margin: 0 auto 16px;
  }

  .paper-figure img {
    width: 100%;
    height: auto;
  }

  .paper-title {
    font-size: 16px;
  }

  .paper-links {
    font-size: 15px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .profile-column {
    width: 180px;
  }

  .profile-image {
    width: 180px;
    height: 180px;
  }

  .profile-links {
    width: 180px;

    gap: 18px;
    margin-top: 18px;
  }

  .profile-links a {
    font-size: 22px;
  }

  .about-content h1 {
    font-size: 30px;
    font-weight: 400;
  }

  .news-item {
    display: block;
  }

  .news-date {
    display: block;

    margin-bottom: 2px;
  }
}