:root {
  --background: #ffffff;
  --text: #161616;
  --secondary-text: #6b6b6b;
  --placeholder: #eeeeec;
  --page-margin: clamp(20px, 4vw, 64px);
  --header-height: 72px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-margin);
  pointer-events: none;
}

.header a {
  pointer-events: auto;
}

.name,
nav {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.name {
  font-weight: 600;
}

nav {
  display: flex;
  gap: 28px;
}

.works {
  padding: 150px var(--page-margin) 80px;
}

/* Individual artworks */
.artwork {
  width: fit-content;
  max-width: min(92vw, 90vh, 1400px);
  margin: 0 auto 200px;
}

.artwork img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 90vh, 1400px);
  max-height: 90vh;
  margin: 0 auto;
  object-fit: contain;
}

.artwork figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 10px;
  color: var(--secondary-text);
  font-size: 13px;
}

.artwork figcaption span:first-child {
  color: var(--text);
}

/* Installation images */
.installation-shot {
  width: fit-content;
  margin: 0 auto 200px;
}

.installation-shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 100vh, 1000px);
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
}

/* Placeholder images */
.placeholder {
  display: grid;
  place-items: center;
  background: var(--placeholder);
  color: #8a8a86;
  letter-spacing: 0.04em;
}

.placeholder.landscape {
  aspect-ratio: 5 / 4;
}

.placeholder.portrait {
  aspect-ratio: 4 / 5;
}

.placeholder.install {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Info section */
h2 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.info {
  display: block;
  padding: 120px var(--page-margin) 160px;
}

.info > h2 {
  width: min(700px, calc(100vw - (2 * var(--page-margin))));
  margin: 0 0 52px clamp(250px, 29vw, 480px);
}

.info-content {
  width: min(700px, calc(100vw - (2 * var(--page-margin))));
  margin-left: clamp(250px, 29vw, 480px);
}

.bio {
  max-width: 680px;
  margin-bottom: 72px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
}

.bio p {
  margin: 0;
}

.links {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  font-size: 14px;
}

.cv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}

.cv-section h3 {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-entry {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.45;
}

.cv-year {
  color: var(--secondary-text);
  white-space: nowrap;
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--page-margin);
  padding: 24px 0 32px;
  border-top: 1px solid #ddddda;
  color: var(--secondary-text);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 700px) {
  .header {
    background: linear-gradient(white 75%, transparent);
  }

  .works {
    padding-top: 110px;
  }

  .artwork,
  .installation-shot {
    width: 100%;
    max-width: 100%;
    margin-bottom: 110px;
  }

  .artwork img {
    width: auto;
    max-width: 100%;
    max-height: none;
  }

  .artwork figcaption {
    display: block;
  }

  .artwork figcaption span {
    display: block;
  }

  .info {
    display: block;
    padding-top: 90px;
  }

  .info > h2 {
    width: 100%;
    margin: 0 0 36px;
  }

  .info-content {
    width: 100%;
    margin-left: 0;
  }

  .bio {
    margin-bottom: 56px;
  }

  .cv-grid {
    gap: 40px;
  }

  .cv-entry {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}