@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/Neue Haas Grotesk Display Pro 25 Thin.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/Neue Haas Grotesk Display Pro 35 Extra Light.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("fonts/Neue Haas Grotesk Display Pro 45 Light.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --edge: 45px;
  --gap: 26px;
  --serif: "Old Standard TT", Georgia, serif;
  --sans: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--sans);
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 19px 0 40px;
}

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 58px 0 34px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 30px;
  color: inherit;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 50px;
  font-size: 22px;
}

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

.nav a:hover {
  text-decoration: underline;
}

.intro {
  width: 108px;
  margin: 45px 0 0 171px;
  font-size: 15px;
  line-height: 1.2;
}

.intro em {
  font-style: normal;
  font-weight: 400;
}

.gallery {
  display: flex;
  gap: var(--gap);
  align-items: flex-end;
  margin-top: auto;
  padding: 0 var(--edge);
  overflow-x: auto;
  scrollbar-width: thin;
}

.project {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.caption {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.2;
}

.caption-title {
  font-weight: 300;
}

.thumb {
  width: var(--w);
  height: 403px;
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 12px,
    #e6e6e6 12px,
    #e6e6e6 24px
  );
}