@charset "UTF-8";
/* RESET */
* {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  border: none;
  box-sizing: border-box;
  text-decoration-thickness: 0.6px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

/* FONTS */
@font-face {
  font-family: "punctuation";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/MHurrell-Punctuation.woff2") format("woff2");
}
@font-face {
  font-family: "mono";
  font-style: normal;
  font-weight: 100 900;
  src: url("/assets/fonts/MHurrell_Mono_VariableVF.woff2") format("woff2");
}
@font-face {
  font-family: "core";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/mh_core_body_roman.otf") format("opentype");
}
@font-face {
  font-family: "core";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/mh_core_body.otf") format("opentype");
}
@font-face {
  font-family: "core";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/mh_core_header.otf") format("opentype");
}
@font-face {
  font-family: "core";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/mh_core_display.otf") format("opentype");
}
/* ROOT */
:root {
  --page-margin: 10vw;
}
@media (max-width: 700px) {
  :root {
    --page-margin: 5vw;
  }
}

/* TYPOGRAPHY */
a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-color: color(display-p3 1 0.4 0.4);
}
a:active {
  color: color(display-p3 1 0.4 0.4);
}

/* STICKY PROFILE */
html {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: punctuation, core, sans-serif;
  scroll-behavior: smooth;
  background: #fff;
}

body {
  position: relative;
  color: #000;
  background: #fff;
}

header {
  position: relative;
  overflow: visible;
  display: block;
  z-index: 1000;
}
header div {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
}
header div a {
  white-space: nowrap;
}

#profile h2 {
  position: fixed;
  top: 0;
  z-index: 90;
}

.homepage #profile h2 {
  opacity: 0;
}

#profile div {
  position: sticky;
  top: 0;
  z-index: 100;
}

header div a,
#profile div a {
  display: inline;
}
header div p,
#profile div p {
  display: inline;
}
header div .hidden,
#profile div .hidden {
  opacity: 0;
}

main {
  position: relative;
  z-index: 110;
  margin: 0 16px;
}

/* LAYOUT */
html {
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  html {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}

header div {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  header div {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  header div {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
header div {
  padding: 16px var(--page-margin);
}

#profile {
  display: flex;
  flex-direction: column;
  gap: 10vw;
}
#profile > div:last-child {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #profile > div:last-child {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #profile > div:last-child {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#profile > div:last-child {
  height: calc(100vh - 10vw);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 0 var(--page-margin);
}
@media (max-width: 700px) {
  #profile > div:last-child {
    visibility: hidden;
  }
}

#profile {
  counter-reset: figure;
}
#profile figure {
  counter-increment: figure;
}
#profile figcaption:before {
  content: counter(figure);
  font-weight: 300;
}

#profile-wrapper {
  counter-reset: caption;
}
#profile-wrapper .caption {
  counter-increment: caption;
}
#profile-wrapper .caption strong:before {
  content: counter(caption) ".";
  font-weight: 300;
}

#profile h2 div {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #profile h2 div {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #profile h2 div {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#profile h2 div {
  padding: 16px 10vw;
}

#profile div:not(:last-child) {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #profile div:not(:last-child) {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #profile div:not(:last-child) {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#profile div:not(:last-child) {
  padding: 16px var(--page-margin);
  mix-blend-mode: darken;
}
#profile div:not(:last-child) span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  top: -8px;
  padding: 2.5px 16px 0;
  font-size: 16px;
  font-weight: 400;
  background: #000;
  color: #fff;
  border-radius: 100000em;
}
@media (max-width: 1100px) {
  #profile div:not(:last-child) span {
    font-size: 14px;
    height: 21px;
    padding: 1.5px 8px 0;
    top: -5.5px;
  }
}
@media (max-width: 500px) {
  #profile div:not(:last-child) span {
    font-size: 10px;
    height: 16px;
    padding: 2px 8px 0;
    top: -5px;
  }
}

.figures {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 5vw 16px;
}
@media (orientation: portrait) {
  .figures {
    gap: 10vw 16px;
  }
}
.figures hr {
  display: block;
  flex-grow: 2;
  width: 100%;
  height: 0;
}
.figures figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.figures figure.s {
  width: 25%;
}
@media (max-width: 800px) {
  .figures figure.s {
    width: 33%;
  }
}
.figures figure.m {
  width: 40%;
}
@media (max-width: 800px) {
  .figures figure.m {
    width: 50%;
  }
}
.figures figure.l {
  width: 50%;
}
@media (max-width: 800px) {
  .figures figure.l {
    width: 75%;
  }
}
.figures figure.xl {
  width: 100%;
  padding: 0 calc(var(--page-margin) - 16px);
}
@media (max-width: 800px) {
  .figures figure.xl {
    width: 100vw;
    padding: 0;
  }
}
.figures figure figcaption {
  width: 100%;
}
@media (max-width: 720px) {
  .figures figure figcaption {
    display: none;
  }
}
.figures figure picture {
  display: flex;
  flex-direction: column;
}
.figures figure picture.inset {
  padding: 64px 72px;
  background: #f9f9f9;
}
@media (max-width: 720px) {
  .figures figure picture.inset {
    padding: 16px 20px;
  }
}
.figures figure picture.phone {
  max-width: 400px;
  margin: 0 auto;
}
.figures figure picture.phone + figcaption {
  max-width: 400px;
  margin: 0 auto;
}

.captions {
  position: relative;
  padding: 16px var(--page-margin);
  list-style: none;
  text-align: justify;
  hyphens: auto;
}
@media (max-width: 720px) {
  .captions {
    display: none;
  }
}
.captions li {
  display: inline;
}
.captions h4 {
  display: inline;
  text-transform: uppercase;
  font-weight: 300;
}
.captions p {
  display: inline;
}
.captions li:not(.caption) {
  display: block;
  margin-top: 16px;
}
.captions li:not(.caption) p {
  display: block;
}
.captions li:not(.caption) p strong {
  font-weight: 300;
  text-transform: uppercase;
}

img, video {
  display: block;
  width: 100%;
  height: auto;
}

figure {
  filter: contrast(70%) brightness(115%) saturate(125%);
}

#contact {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
@media (max-width: 720px) {
  #contact {
    padding-bottom: 32px;
  }
}
#contact > div {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 16px var(--page-margin) 24px;
  gap: 24px;
}
#contact > div ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: wrap;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #contact > div ul {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #contact > div ul {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#contact > div ul li:after {
  content: ",";
  padding-right: 0.25em;
}
#contact > div ul li:last-child:after {
  content: none;
}
#contact > div .small-print {
  display: flex;
  flex-direction: row-reverse;
  gap: 0 32px;
  padding-bottom: 4px;
  text-wrap: pretty;
}
@media (max-width: 1020px) {
  #contact > div .small-print p:nth-child(1) {
    display: none;
  }
}

#about {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 50vh 0;
  gap: 32px;
}
#about #about-now {
  display: flex;
  flex-direction: column;
  padding: 0 calc(var(--page-margin) - 16px);
  gap: 32px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #about #about-now {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #about #about-now {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#about #about-more {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 calc(var(--page-margin) - 16px) 16px;
}
@media (max-width: 1500px) {
  #about #about-more {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 1100px) {
  #about #about-more {
    grid-template-columns: 1fr 1fr;
  }
}
#about #about-more div {
  width: 100%;
  max-width: 300px;
}
#about #about-more h2 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #about #about-more h2 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #about #about-more h2 {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#about #about-more h3, #about #about-more p, #about #about-more cite {
  display: block;
  margin-top: 16px;
}
#about #about-more h3 {
  text-transform: uppercase;
  font-weight: 300;
}
#about #about-more li {
  list-style: none;
}
#about #about-more blockquote {
  position: relative;
}
#about #about-more blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  right: 100%;
}
#about #about-more blockquote:after {
  content: "”";
}
#about #about-more cite {
  text-transform: uppercase;
  font-weight: 300;
}
#about #about-images {
  display: grid;
  grid-template-columns: calc(var(--page-margin) - 16px) 1fr 1fr 1fr 1fr calc(var(--page-margin) - 16px);
  grid-auto-rows: 10vw;
  gap: 16px 0;
}
#about #about-images figure {
  display: flex;
  flex-direction: column;
}
#about #about-images figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#prospects-content,
.prospects-content {
  margin: 0 calc(var(--page-margin) - 16px);
  padding: 10vw 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-wrap: pretty;
}
#prospects-content h1,
.prospects-content h1 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #prospects-content h1,
  .prospects-content h1 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #prospects-content h1,
  .prospects-content h1 {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#prospects-content .date,
.prospects-content .date {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #prospects-content .date,
  .prospects-content .date {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #prospects-content .date,
  .prospects-content .date {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#prospects-content .date,
.prospects-content .date {
  position: relative;
  margin-top: -16px;
  margin-bottom: 5vw;
}
#prospects-content sup,
.prospects-content sup {
  font-size: 70%;
  position: relative;
  top: -0.4em;
  margin-left: -0.1em;
}
#prospects-content sup a,
.prospects-content sup a {
  text-decoration: none;
}
#prospects-content sup a:hover, #prospects-content sup a:focus,
.prospects-content sup a:hover,
.prospects-content sup a:focus {
  color: blue;
  color: color(display-p3 1 0.4 0.4);
}
#prospects-content p,
.prospects-content p {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  #prospects-content p,
  .prospects-content p {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
  }
}
#prospects-content p,
.prospects-content p {
  width: 100%;
  max-width: 35em;
}
#prospects-content p .full,
.prospects-content p .full {
  display: block;
  position: relative;
  width: calc(100vw - (10vw - 16px) * 2 - 32px);
  margin: 32px 0;
}
#prospects-content h2,
.prospects-content h2 {
  margin-top: 32px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #prospects-content h2,
  .prospects-content h2 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #prospects-content h2,
  .prospects-content h2 {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#prospects-content pre,
.prospects-content pre {
  font-family: mono;
  font-weight: 600;
  color: #fff;
  background: #000;
  padding: 16px;
  border-radius: 4px;
  margin: 16px 0;
  width: 100%;
  max-width: 50em;
}
#prospects-content ol, #prospects-content ul,
.prospects-content ol,
.prospects-content ul {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  #prospects-content ol, #prospects-content ul,
  .prospects-content ol,
  .prospects-content ul {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
  }
}
#prospects-content ol, #prospects-content ul,
.prospects-content ol,
.prospects-content ul {
  width: 100%;
  max-width: 35em;
}
#prospects-content ol li, #prospects-content ul li,
.prospects-content ol li,
.prospects-content ul li {
  margin-left: 32px;
}
#prospects-content .col-1,
.prospects-content .col-1 {
  display: block;
  width: 100%;
  margin: 16px 0;
}
#prospects-content img,
.prospects-content img {
  width: 100%;
  height: auto;
}
#prospects-content table,
.prospects-content table {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  #prospects-content table,
  .prospects-content table {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
  }
}
#prospects-content table,
.prospects-content table {
  width: 100%;
  max-width: 35em;
  text-align: left;
  margin: 16px 0;
}
#prospects-content table th, #prospects-content table td,
.prospects-content table th,
.prospects-content table td {
  border-top: 0.5px solid;
  padding: 8px 8px 8px 0;
}
#prospects-content table th:only-child, #prospects-content table td:only-child,
.prospects-content table th:only-child,
.prospects-content table td:only-child {
  border-top: 2px solid;
}
#prospects-content table th + td,
.prospects-content table th + td {
  border-left: 0.5px solid;
  padding-left: 8px;
}
#prospects-content blockquote,
.prospects-content blockquote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0 16px;
}
#prospects-content blockquote p,
.prospects-content blockquote p {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #prospects-content blockquote p,
  .prospects-content blockquote p {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #prospects-content blockquote p,
  .prospects-content blockquote p {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#prospects-content cite,
.prospects-content cite {
  display: block;
  margin-bottom: 32px;
}
#prospects-content picture,
.prospects-content picture {
  width: 100%;
  max-width: 100% !important;
  margin: 32px 0 !important;
}
#prospects-content .footnotes,
.prospects-content .footnotes {
  margin: 10vw 0;
}
#prospects-content .footnotes ol,
.prospects-content .footnotes ol {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 112px;
  max-width: 100%;
}
#prospects-content .footnotes ol li,
.prospects-content .footnotes ol li {
  width: 200px;
  margin: 0;
  display: flex;
}
#prospects-content .footnotes ol li img,
.prospects-content .footnotes ol li img {
  margin: 0 0 8px;
}
#prospects-content .footnotes ol li a.reversefootnote,
.prospects-content .footnotes ol li a.reversefootnote {
  text-decoration: none;
}
#prospects-content .footnotes ol *,
.prospects-content .footnotes ol * {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #prospects-content .footnotes ol *,
  .prospects-content .footnotes ol * {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}

#prospects-content,
.prospects-content:first-child {
  padding-top: 50vh;
}

#prospects-archive {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #prospects-archive {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #prospects-archive {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#prospects-archive {
  padding: 10vw 0 50vh;
}
#prospects-archive h2 {
  margin: 0 calc(var(--page-margin) - 16px);
}
#prospects-archive details {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 calc(var(--page-margin) - 16px) 8px;
  border-bottom: 0.5px solid;
  padding-bottom: 2px;
}
#prospects-archive details summary {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  align-self: stretch;
  cursor: pointer;
  gap: 12px;
  z-index: 10;
}
#prospects-archive details summary:hover:before {
  color: color(display-p3 1 0.4 0.4);
}
#prospects-archive details summary:hover span {
  background: color(display-p3 1 0.4 0.4);
}
#prospects-archive details summary:active:before {
  border-width: 2px;
  font-weight: 600;
}
#prospects-archive details summary span {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  top: -8px;
  padding: 2.5px 16px 0;
  font-size: 16px;
  font-weight: 400;
  background: #000;
  color: #fff;
  border-radius: 100000em;
}
@media (max-width: 1100px) {
  #prospects-archive details summary span {
    font-size: 14px;
    height: 21px;
    padding: 1.5px 8px 0;
    top: -5.5px;
  }
}
@media (max-width: 500px) {
  #prospects-archive details summary span {
    font-size: 10px;
    height: 16px;
    padding: 2px 8px 0;
    top: -5px;
  }
}
#prospects-archive details summary span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #prospects-archive details summary span {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}
#prospects-archive details summary span {
  position: relative;
  top: -4px;
}
#prospects-archive details summary:before {
  content: "+";
  position: relative;
  top: -3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  padding-bottom: 2px;
  border: 1.5px solid;
  border-radius: 10000em;
  line-height: 24px;
  font-family: mono;
  font-size: 24px;
  font-weight: 400;
}
#prospects-archive details[open] summary {
  position: sticky;
  top: 63px;
}
#prospects-archive details[open] summary:before {
  content: "×";
}
#prospects-archive section {
  display: flex;
  flex-direction: column;
  padding-top: 2px;
}
#prospects-archive .post {
  display: flex;
  flex-direction: column;
  margin-left: 5.8em;
  border-top: 0.5px solid;
  padding: 8px 0 2px;
}
#prospects-archive .post a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  align-self: start;
  gap: 8px;
  text-decoration: none;
}
#prospects-archive .post a span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #prospects-archive .post a span {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}
#prospects-archive .post a span {
  position: relative;
  top: 6px;
}

#work-images {
  position: relative;
  padding-top: 50vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 2px;
}
#work-images h1 {
  grid-column: 1/3;
  padding: 0 calc(var(--page-margin) - 16px);
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #work-images h1 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #work-images h1 {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#work-images figure {
  position: relative;
  grid-column: 1/3;
  align-content: center;
  background: #f9f9f9;
  padding: 32px;
}
#work-images figure.col-1 {
  grid-column: 1/2;
}
#work-images figure.col-2 {
  grid-column: 2/3;
}
#work-images figure.col-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#work-images figure.fullbleed {
  padding: 0;
}
#work-images figure.poster {
  padding: 64px;
}
#work-images figure.poster img {
  max-height: 70vh;
  object-fit: contain;
}

#work-information {
  padding: 10vw calc(var(--page-margin) - 16px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #work-information {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #work-information {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#work-information div {
  display: flex;
  flex-direction: column;
  gap: 32px;
  hyphens: auto;
}
#work-information div span {
  white-space: nowrap;
}
#work-information div hr + p {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #work-information div hr + p {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}

#work-list {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #work-list {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #work-list {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#work-list {
  padding: 10vw 0 50vh;
}
#work-list:first-child {
  padding-top: 50vh;
}
#work-list h2 {
  margin: 0 calc(var(--page-margin) - 16px) 8px;
}
#work-list h3 {
  margin: 32px calc(var(--page-margin) - 16px) 8px;
}
#work-list h3 span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  top: -8px;
  padding: 2.5px 16px 0;
  font-size: 16px;
  font-weight: 400;
  background: #000;
  color: #fff;
  border-radius: 100000em;
}
@media (max-width: 1100px) {
  #work-list h3 span {
    font-size: 14px;
    height: 21px;
    padding: 1.5px 8px 0;
    top: -5.5px;
  }
}
@media (max-width: 500px) {
  #work-list h3 span {
    font-size: 10px;
    height: 16px;
    padding: 2px 8px 0;
    top: -5px;
  }
}
#work-list details {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
#work-list details summary {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  align-self: start;
  cursor: pointer;
  gap: 12px;
  margin: 0 calc(var(--page-margin) - 16px);
  z-index: 10;
}
#work-list details summary:hover:before {
  color: color(display-p3 1 0.4 0.4);
}
#work-list details summary:active:before {
  border-width: 2px;
  font-weight: 600;
}
#work-list details summary span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #work-list details summary span {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}
#work-list details summary span {
  position: relative;
  top: 6px;
}
#work-list details summary:before {
  content: "+";
  position: relative;
  top: -3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  padding-bottom: 2px;
  border: 1.5px solid;
  border-radius: 10000em;
  line-height: 24px;
  font-family: mono;
  font-size: 24px;
  font-weight: 400;
}
#work-list details[open] summary {
  position: sticky;
  top: 64px;
}
#work-list details[open] summary:before {
  content: "×";
}
#work-list section {
  position: relative;
  padding: 16px 0 48px;
  display: grid;
  grid-template-columns: calc(var(--page-margin) - 16px) 1fr 1fr calc(var(--page-margin) - 16px);
  align-items: stretch;
  gap: 24px 1px;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.3s;
}
#work-list section figure {
  position: relative;
  display: none;
  flex-direction: column;
  background: #f9f9f9;
}
#work-list section figure figcaption {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #work-list section figure figcaption {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}
#work-list section figure figcaption {
  text-wrap: balance;
  padding: 0 16px 12px;
}
#work-list section figure.dark {
  background: #000;
}
#work-list section figure.dark figcaption {
  color: #fff;
}
#work-list section figure.white {
  background: transparent;
}
#work-list section figure.gradient_1 {
  background-image: url(/assets/gradients/gradient_1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#work-list section figure.gradient_2 {
  background-image: url(/assets/gradients/gradient_2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#work-list section figure.gradient_3 {
  background-image: url(/assets/gradients/gradient_3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#work-list section figure.inset picture {
  padding: 5vw;
}
#work-list section figure.phone picture {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5vw;
}
#work-list section figure.phone picture img {
  max-width: 300px;
}
#work-list section figure.cover picture {
  width: 100%;
  height: 100%;
}
#work-list section figure.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
#work-list section figure.cover.inset img, #work-list section figure.cover.poster img {
  object-fit: contain;
  object-position: center;
}
#work-list section figure.cover figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
#work-list section figure.poster {
  position: relative;
  height: 100%;
  justify-content: center;
}
#work-list section figure.poster picture {
  padding: 5vw;
  max-height: 90vh;
}
#work-list section figure.poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#work-list section p {
  grid-column: 2/3;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  #work-list section p {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
  }
}
#work-list section p {
  padding-right: 32px;
  max-width: 32em;
  hyphens: auto;
}
#work-list section figure + p {
  padding-top: 16px;
}
#work-list section hr + p {
  font-size: 13px;
  line-height: 16px;
  font-weight: 200;
  letter-spacing: 0;
}
@media (max-width: 800px) {
  #work-list section hr + p {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }
}
#work-list section hr + p {
  max-width: 40em;
}
#work-list section hr + p em {
  display: block;
  font-weight: 300;
}
#work-list details[open] section {
  opacity: 1;
}
#work-list details[open] figure {
  display: flex;
}

#work-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: #fff;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.0075em;
}
@media (max-width: 1100px) {
  #work-gate {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.01em;
  }
}
@media (max-width: 500px) {
  #work-gate {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
}
#work-gate ~ * {
  display: none;
  user-select: none;
}

#work-gate form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#work-gate input[type=password] {
  font: inherit;
  padding: 0.3em 0.5em;
  letter-spacing: 0.2em;
  border: 0.5px solid;
  background: transparent;
  border-radius: 4px;
  color: inherit;
}

#work-gate button {
  padding: 0.5em;
  border: none;
  border-radius: 10000px;
  background: #000;
  color: #fff;
  cursor: pointer;
  margin: 8px -0.1em 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  #work-gate button {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
  }
}

#work-gate-error {
  display: none;
  font-size: 0.875em;
}

/*# sourceMappingURL=main.css.map */