/* ---------- BASIC ---------- */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.85);
  background: white;
}

a {
  color: inherit;
  text-decoration: none;
}

a:active {
  opacity: 0.7;
}


/* ---------- NAV ---------- */

.nav {
  position: fixed;

  top: 17px;
  left: 13px;

  width: 25vw;
  max-width: 430px;

  line-height: 1.55;

  z-index: 10;
}

.name {
  font-weight: 700;
  margin-bottom: 27px;
}

.projects {
  margin-bottom: 27px;
}

.section {
  margin-bottom: 27px;
}


/* ---------- PROJECT PAGE ---------- */

.project-content {
  margin-left: 28vw;

  width: 47vw;
  max-width: 810px;

  padding-top: 68px;
  padding-bottom: 60px;

  box-sizing: border-box;
}

.project-header {
  margin-bottom: 31px;
}

.project-text {
  width: 100%;
  margin-bottom: 42px;
}

.project-text p {
  margin: 0 0 17px 0;
}

/* Portrait images */
.project-image {
  display: block;

  width: 65%;
  max-width: 540px;

  height: auto;

  margin: 0 0 16px 0;
  padding: 0;
  border: 0;
}

/* Landscape images */
.project-image.landscape {
  width: 88%;
  max-width: none;
}


/* ---------- COPYRIGHT ---------- */

.copyright {
  position: fixed;

  left: 13px;
  bottom: 12px;

  font-family: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;

  z-index: 20;
}


/* ---------- LANDING PAGE ---------- */

.landing-page {
  min-height: 100vh;
  overflow: hidden;
}

.landing-link {
  position: absolute;

  left: 57%;
  top: 48%;

  transform: translate(-50%, -50%);
}

.landing-image {
  display: block;

  width: 45vw;
  max-width: 765px;

  height: auto;
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  body {
    font-size: 13px;
  }

  .nav {
    position: relative;

    top: auto;
    left: auto;

    width: auto;
    max-width: none;

    padding: 14px;
  }

  .project-content {
    margin-left: 0;

    width: auto;
    max-width: none;

    padding: 30px 14px 60px 14px;
  }

  .project-image,
  .project-image.landscape {
    width: 100%;
    max-width: none;
  }

  .copyright {
    position: relative;

    left: auto;
    bottom: auto;

    margin: 50px 14px 14px 14px;
  }

  .landing-link {
    left: 50%;
    top: 45%;
  }

  .landing-image {
    width: 85vw;
    max-width: none;
  }
}


/* ---------- CUSTOM CURSOR ---------- */

html,
body,
a,
img {
  cursor: none !important;
}

.comet-cursor {
  position: fixed;

  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: #ffff00;

  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.25),
    0 0 4px #ffff00,
    0 0 8px rgba(255, 255, 0, 0.9),
    0 0 12px rgba(255, 255, 0, 0.5);

  pointer-events: none;
  z-index: 999999;

  transform: translate(-50%, -50%);
}

.comet-trail {
  position: fixed;

  width: 2px;
  height: 2px;
  border-radius: 50%;

  background: #ffff00;

  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.2),
    0 0 3px #ffff00,
    0 0 5px rgba(255, 255, 0, 0.8);

  pointer-events: none;
  z-index: 999998;

  transform: translate(-50%, -50%);

  animation: trailFade 1.8s linear forwards;
}

@keyframes trailFade {

  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
}

@media (hover: none) {

  html,
  body,
  a,
  img {
    cursor: auto !important;
  }

  .comet-cursor,
  .comet-trail {
    display: none !important;
  }
}


/* ---------- IMAGE LIGHTBOX ---------- */

.lightbox {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 30px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.96);
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  display: block;

  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 60px);

  width: auto;
  height: auto;

  object-fit: contain;
}

/* ---------- NEWS ---------- */

.news-section {
  margin-bottom: 30px;
}

.news-heading {
  margin-bottom: 14px;
}

.news-item p {
  margin: 17px 0 0 0;
}

/* ---------- CV ---------- */

.cv-intro {
  margin-bottom: 20px;
}

.cv-section {
  margin-bottom: 30px;
}

.cv-section > strong {
  display: block;
  margin-bottom: 4px;
}

.cv-lines {
  margin-top: 0;
}

.cv-year-group {
  margin-top: 18px;
}

.cv-year {
  margin-bottom: 4px;
}

.cv-indent {
  display: inline-block;
  margin-left: 48px;
}