* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: "Martian Mono", monospace;
  color: #111;
  background: #fff;
  font-weight: 200;
}

.social-link {
  display: block;
  width: fit-content;
  margin: 2.5rem auto 110px;
  color: #767676;
}

.social-link svg {
  width: 32px;
  height: 32px;
  display: block;
}

.social-link:hover {
  opacity: 0.6;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.name,
.name:visited {
  color: #000;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: 0.05em;
}

.name:hover {
  opacity: 0.6;
}

nav {
  display: flex;
  gap: 2rem;
}

nav a,
nav a:visited {
  color: #767676;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

nav a:hover {
  opacity: 0.6;
}

nav a.active,
nav a.active:visited {
  color: #000;
}

nav a.active {
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Home page */
.home header {
  padding-bottom: 0;
}

.home main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 100px;
}

.home .featured-image {
  width: 100%;
  max-width: 850px;
}

.featured-link {
  display: block;
}

/* Work page */
.work header {
  padding-bottom: 0;
}

.work-grid {
  position: relative;
  margin-top: 120px;
}

.work-grid .thumb {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.work-grid .thumb.visible {
  opacity: 1;
}

.work-grid .thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lightbox */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1000;
}

.lightbox.active {
  display: flex;
}

.lightbox-bar {
  flex: 0 0 auto;
  height: 78px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lightbox-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.lightbox-spacer {
  flex: 0 0 auto;
  height: 78px;
}

.lightbox-image {
  display: block;
  max-width: min(88vw, 1024px);
  max-height: 100%;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox-image.cursor-prev {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M15 10H5M9 5L4 10l5 5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M15 10H5M9 5L4 10l5 5' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") 10 10, auto;
}

.lightbox-image.cursor-next {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M5 10h10M11 5l5 5-5 5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 10h10M11 5l5 5-5 5' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") 10 10, auto;
}

.lightbox-close {
  background: none;
  border: none;
  color: #767676;
  font-family: "Martian Mono", monospace;
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lightbox-close:hover {
  opacity: 0.6;
}

.lightbox-counter {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #767676;
}

/* About page */
.about header {
  padding-bottom: 0;
}

.about main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 100px;
}

.about-photo {
  width: 400px;
  height: 400px;
  object-fit: cover;
  margin-bottom: 2rem;
}

.about p {
  max-width: 480px;
  line-height: 1.7;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.about main a {
  color: #111;
  font-size: 0.875rem;
}

.about main a:hover {
  opacity: 0.6;
}