@import '/fonts/arnhem/stylesheet.css';
@import '/fonts/haas/stylesheet.css';
html *:where(:not(audio, canvas, iframe, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

html *,
html *::before,
html *::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

a,
button {
  cursor: revert;
}

details summary,
menu,
ol,
ul {
  list-style: none;
}

img, video {
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

::placeholder {
  all: unset;
}

iframe {
  border: unset;
}

/* Disclosure triangles. */
details ::marker,
details ::-webkit-details-marker {
  display: none;
}

:root, body.home main .chronology dl dt h3, h1,
h2,
h3, body.home header article {
  --typography--shoulder: calc(1 - var(--typography--cap-height));
  --typography--shoulder--top: calc(var(--typography--shoulder) - var(--typography--shoulder--bottom));
}

h1,
h2,
h3, body.home header article {
  --typography--cap-height: 0.621;
  --typography--x-height: 0.456;
  --typography--shoulder--bottom: 0.265;
  --typography--inset--left: 0;
  --typography--inset--right: 0;
  --typography--tracking: -0.0222;
  --typography--underline: 0.06;
  --typography--underline--shift: -0.06;
  font-family: "Arnhem", serif, sans-serif;
}

:root, body.home main .chronology dl dt h3 {
  --typography--cap-height: 0.744;
  --typography--x-height: 0.537;
  --typography--shoulder--bottom: 0.133;
  --typography--inset--left: 0;
  --typography--inset--right: 0;
  --typography--tracking: .01;
  --typography--underline: 0.06;
  --typography--underline--shift: -0.06;
  font-family: "NeueHaas", sans-serif;
}

a, button:not([disabled]) {
  --typography--decoration-thickness: calc(var(--typography--underline) * 1em);
  --typography--underline-offset: calc(var(--typography--underline--shift) * 1em);
  text-decoration-color: var(--color);
  text-decoration-line: underline;
  text-decoration-thickness: var(--typography--decoration-thickness);
  text-underline-offset: calc(-1 * var(--typography--underline-offset) + var(--typography--decoration-thickness) + var(--typography--underline-offset--extra, 0em));
}

.no-underline {
  text-decoration: initial;
}

:root {
  font-feature-settings: "liga", "kern";
  font-size: 62.5%;
}

:root * {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-kerning: normal;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

em, article aside, .markdown aside,
em em em,
article aside em em,
.markdown aside em em,
em article aside em,
article em aside em,
article aside aside em,
em .markdown aside em,
.markdown em aside em,
article aside .markdown aside em,
.markdown aside aside em {
  font-style: italic;
}

em em, article aside em, .markdown aside em, em article aside, article em aside, article aside aside, em .markdown aside, .markdown em aside, article aside .markdown aside, .markdown aside aside {
  font-style: normal;
}

del {
  font-style: line-through;
}

nobr,
.nowrap {
  white-space: nowrap;
}

strong {
  --typography--weight: bold;
}
strong:not(._) {
  display: inline;
}
strong:not(._):before, strong:not(._):after {
  display: none;
}

article ul > dt,
article ul > dd,
article ul > li,
article ol > dt,
article ol > dd,
article ol > li,
article dl > dt,
article dl > dd,
article dl > li, .markdown ul > dt,
.markdown ul > dd,
.markdown ul > li,
.markdown ol > dt,
.markdown ol > dd,
.markdown ol > li,
.markdown dl > dt,
.markdown dl > dd,
.markdown dl > li, strong,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td {
  --typography--tracking--override: var(--typography--tracking);
  --typography--letter-spacing: calc(var(--typography--tracking--override, var(--typography--tracking, 0)) * 1em);
  --typography--margin--left: calc(var(--typography--inset--left) * 1em);
  --typography--margin--right: calc(var(--typography--inset--right) * 1em);
}

body.work dl, body.about .about__container, body.home main .work, body.home main .work__list li, nav a:first-of-type, article, .markdown, article ul,
article ol,
article dl, .markdown ul,
.markdown ol,
.markdown dl, figure, a:focus-visible, button:not([disabled]):focus-visible, svg.sprite--circle, svg.sprite--close, svg.sprite--arrow, svg.sprite--moma, article ul > dt,
article ul > dd,
article ul > li,
article ol > dt,
article ol > dd,
article ol > li,
article dl > dt,
article dl > dd,
article dl > li, .markdown ul > dt,
.markdown ul > dd,
.markdown ul > li,
.markdown ol > dt,
.markdown ol > dd,
.markdown ol > li,
.markdown dl > dt,
.markdown dl > dd,
.markdown dl > li, strong,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td {
  --typography--font-size: calc(var(--typography--scale, 1) * var(--typography--size--override, var(--typography--size)));
  --typography--line-height: calc(var(--typography--leading) * var(--typography--size--override, var(--typography--size)));
  --typography--leading--remainder: calc((var(--typography--leading) - 1) / 2);
  --typography--shift: calc((var(--typography--shoulder) + var(--typography--shoulder--top)) * (1 - var(--typography--scale, 1)));
  --typography--leading--bottom: calc(var(--typography--shoulder--bottom) + var(--typography--leading--remainder) + var(--typography--shift, 0));
  --typography--leading--top: calc(var(--typography--shoulder--top) + var(--typography--leading--remainder) - var(--typography--shift, 0));
  --typography--margin--bottom: calc(-1 * var(--typography--leading--bottom) * var(--typography--size--override, var(--typography--size)));
  --typography--margin--top: calc(-1 * var(--typography--leading--top) * var(--typography--size--override, var(--typography--size)));
}

article ul > dt,
article ul > dd,
article ul > li,
article ol > dt,
article ol > dd,
article ol > li,
article dl > dt,
article dl > dd,
article dl > li, .markdown ul > dt,
.markdown ul > dd,
.markdown ul > li,
.markdown ol > dt,
.markdown ol > dd,
.markdown ol > li,
.markdown dl > dt,
.markdown dl > dd,
.markdown dl > li, strong,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td {
  color: var(--color);
  display: block;
  font-size: var(--typography--font-size);
  font-weight: var(--typography--weight);
  letter-spacing: var(--typography--letter-spacing);
  line-height: var(--typography--line-height);
  margin-left: var(--typography--margin--left);
  margin-right: var(--typography--margin--right);
  max-width: calc(100% - var(--typography--margin--left) - var(--typography--margin--right) + 1px);
  overflow-wrap: break-word;
}
@supports (display: flow-root) {
  article ul > dt,
  article ul > dd,
  article ul > li,
  article ol > dt,
  article ol > dd,
  article ol > li,
  article dl > dt,
  article dl > dd,
  article dl > li, .markdown ul > dt,
  .markdown ul > dd,
  .markdown ul > li,
  .markdown ol > dt,
  .markdown ol > dd,
  .markdown ol > li,
  .markdown dl > dt,
  .markdown dl > dd,
  .markdown dl > li, strong,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  td {
    display: flow-root;
  }
}
article ul > dt:before,
article ul > dd:before,
article ul > li:before,
article ol > dt:before,
article ol > dd:before,
article ol > li:before,
article dl > dt:before,
article dl > dd:before,
article dl > li:before, .markdown ul > dt:before,
.markdown ul > dd:before,
.markdown ul > li:before,
.markdown ol > dt:before,
.markdown ol > dd:before,
.markdown ol > li:before,
.markdown dl > dt:before,
.markdown dl > dd:before,
.markdown dl > li:before, strong:before, article ul > dt:after,
article ul > dd:after,
article ul > li:after,
article ol > dt:after,
article ol > dd:after,
article ol > li:after,
article dl > dt:after,
article dl > dd:after,
article dl > li:after, .markdown ul > dt:after,
.markdown ul > dd:after,
.markdown ul > li:after,
.markdown ol > dt:after,
.markdown ol > dd:after,
.markdown ol > li:after,
.markdown dl > dt:after,
.markdown dl > dd:after,
.markdown dl > li:after, strong:after,
h1:before,
h1:after,
h2:before,
h2:after,
h3:before,
h3:after,
h4:before,
h4:after,
h5:before,
h5:after,
h6:before,
h6:after,
p:before,
p:after,
td:before,
td:after {
  content: "";
  display: block;
  visibility: hidden;
}
article ul > dt:before,
article ul > dd:before,
article ul > li:before,
article ol > dt:before,
article ol > dd:before,
article ol > li:before,
article dl > dt:before,
article dl > dd:before,
article dl > li:before, .markdown ul > dt:before,
.markdown ul > dd:before,
.markdown ul > li:before,
.markdown ol > dt:before,
.markdown ol > dd:before,
.markdown ol > li:before,
.markdown dl > dt:before,
.markdown dl > dd:before,
.markdown dl > li:before, strong:before,
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before,
p:before,
td:before {
  margin-top: calc(var(--typography--margin--top) - var(--typography--margin--top--shift, 0) * var(--typography--size--override, var(--typography--size)));
}
article ul > dt:after,
article ul > dd:after,
article ul > li:after,
article ol > dt:after,
article ol > dd:after,
article ol > li:after,
article dl > dt:after,
article dl > dd:after,
article dl > li:after, .markdown ul > dt:after,
.markdown ul > dd:after,
.markdown ul > li:after,
.markdown ol > dt:after,
.markdown ol > dd:after,
.markdown ol > li:after,
.markdown dl > dt:after,
.markdown dl > dd:after,
.markdown dl > li:after, strong:after,
h1:after,
h2:after,
h3:after,
h4:after,
h5:after,
h6:after,
p:after,
td:after {
  margin-bottom: var(--typography--margin--bottom);
}

td {
  display: table-cell;
}

body.work dl, body.about .about__container, body.home main .work, body.home main .work__list li, nav a:first-of-type, article, .markdown, article ul,
article ol,
article dl, .markdown ul,
.markdown ol,
.markdown dl, figure, a:focus-visible, button:not([disabled]):focus-visible, svg.sprite--circle, svg.sprite--close, svg.sprite--arrow, svg.sprite--moma {
  --typography--cap: calc(var(--typography--cap-height) * 1em);
  --typography--between: calc(var(--typography--font-size) * (var(--typography--leading) + var(--typography--shoulder) - 1));
  line-height: var(--typography--line-height);
  font-size: var(--typography--font-size);
}

svg.sprite--circle {
  width: var(--typography--cap);
  height: var(--typography--cap);
  fill: var(--color--blue);
}

svg.sprite--close {
  --typography--size: var(--typography--size--h2);
  width: var(--typography--cap);
  height: var(--typography--cap);
  stroke: var(--color--black);
  stroke-width: 0.08em;
}

svg.sprite--arrow {
  width: calc(1 * var(--typography--cap));
  height: calc(1 * var(--typography--cap));
  fill: none;
  stroke: var(--color--blue);
  stroke-width: 0.08em;
  display: inline-block;
  overflow: visible;
}
svg.sprite--arrow.upper-right {
  transform: rotate(-45deg);
}
a svg.sprite--arrow {
  margin-left: calc(0.25 * var(--typography--cap));
}

svg.sprite--moma {
  height: calc(1.5 * var(--typography--cap));
}

a:has(svg) nobr {
  white-space: nowrap;
}

a, button:not([disabled]) {
  transition: text-decoration-color linear calc(0.25 * var(--transition--timing));
  color: var(--color--link, var(--color--blue));
  display: inline-block;
  cursor: pointer;
}
a:visited, button:not([disabled]):visited {
  color: var(--color--link, var(--color--blue));
}
a:hover, button:not([disabled]):hover {
  text-decoration-color: rgba(0, 0, 0, 0);
}
a:hover video, a:hover img, button:not([disabled]):hover video, button:not([disabled]):hover img {
  transform: scale(1.025);
}
a video, a img, button:not([disabled]) video, button:not([disabled]) img {
  transition: transform linear calc(0.25 * var(--transition--timing));
}
a:focus-visible, button:not([disabled]):focus-visible {
  outline: calc(var(--typography--underline) * 2em) solid rgba(0, 0, 0, 0.7);
  outline-offset: calc(var(--typography--underline--shift) * -1em);
  border-radius: 0.25rem;
}
a:has(img, video):focus-visible, button:not([disabled]):has(img, video):focus-visible {
  outline-offset: calc(0.5 * var(--typography--cap));
}

figure {
  --typography--size: var(--typography--size--caption);
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: var(--typography--cap);
}
figure.not-loaded {
  opacity: 0;
}
figure button {
  height: 100%;
}
figure button:has(div.image-mat) {
  width: 100%;
}
figure div {
  height: 100%;
  border-radius: calc(0.5 * var(--typography--cap));
  overflow: hidden;
}
figure div.image-mat {
  width: 100%;
  background-color: var(--mat-color, #eee);
  padding: calc(1 * var(--gutter));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure div.image-mat:not(.plain) img, figure div.image-mat:not(.plain) video {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 1%/1.5%;
}
figure img, figure video {
  max-height: 80vh;
  width: auto;
  display: block;
}

.lightbox {
  display: none;
  z-index: 2;
  --margin--top: 0;
  background-color: var(--color--white);
  position: fixed;
  inset: 0;
  color: var(--color--black);
  justify-content: center;
  align-items: center;
}
.lightbox.active {
  display: flex;
}
.lightbox__close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
}
.lightbox figure {
  width: 100%;
  height: 100%;
  display: block;
}
.lightbox figure div {
  padding: calc(2 * var(--gutter));
  border-radius: unset;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.lightbox figure div:not(.image-mat) img, .lightbox figure div video {
  border-radius: calc(0.5 * var(--typography--cap));
}
.lightbox figure div > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

@keyframes animate-in {
  from {
    opacity: 0;
    transform: translateY(calc(0.5 * var(--gutter)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.transition-content {
  opacity: 0;
}
.transition-content.transition-active {
  animation: animate-in linear calc(0.5 * var(--transition--timing)) forwards;
  animation-delay: calc(500ms * var(--index, 0));
}

nav, section {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-width);
}

body {
  background-color: var(--color--white);
}

main {
  padding: var(--gutter);
  background-color: var(--color--white);
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--gutter));
  min-height: 100vh;
}
@supports (height: 100lvh) {
  main {
    min-height: 100lvh;
  }
}
main > section:last-of-type {
  margin-top: auto;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

article, .markdown {
  --typography--leading-shoulder: calc(var(--typography--between) + var(--typography--line-height));
}
article > *:not(:first-child), .markdown > *:not(:first-child) {
  margin-top: var(--margin--top, var(--typography--leading-shoulder));
}
article > figure, .markdown > figure {
  --margin--top: calc(2 * var(--gutter));
}
article > figure + *, .markdown > figure + * {
  --margin--top: calc(2 * var(--gutter));
}
article h2, .markdown h2 {
  --margin--top: calc(3 * var(--gutter));
}
article h3, .markdown h3 {
  --margin--top: calc(var(--typography--between) + (var(--typography--line-height) * 2));
}
article p:not(._), article li:not(._), .markdown p:not(._), .markdown li:not(._) {
  max-width: 75ch;
}
article aside, .markdown aside {
  --margin--top: calc(var(--typography--between) + (var(--typography--line-height) * 2));
}
article hr, .markdown hr {
  --margin--top: calc(2 * var(--gutter));
  border-top: 1px solid black;
}
article ul,
article ol, .markdown ul,
.markdown ol {
  gap: var(--typography--between);
}
article dl, .markdown dl {
  gap: var(--typography--leading-shoulder);
}
article ul,
article ol,
article dl, .markdown ul,
.markdown ol,
.markdown dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style-position: outside;
}
article ul > dt,
article ul > dd,
article ul > li,
article ol > dt,
article ol > dd,
article ol > li,
article dl > dt,
article dl > dd,
article dl > li, .markdown ul > dt,
.markdown ul > dd,
.markdown ul > li,
.markdown ol > dt,
.markdown ol > dd,
.markdown ol > li,
.markdown dl > dt,
.markdown dl > dd,
.markdown dl > li {
  margin-bottom: var(--typography--margin--bottom);
  margin-top: var(--typography--margin--top);
}
article ul > dt:has(p),
article ul > dd:has(p),
article ul > li:has(p),
article ol > dt:has(p),
article ol > dd:has(p),
article ol > li:has(p),
article dl > dt:has(p),
article dl > dd:has(p),
article dl > li:has(p), .markdown ul > dt:has(p),
.markdown ul > dd:has(p),
.markdown ul > li:has(p),
.markdown ol > dt:has(p),
.markdown ol > dd:has(p),
.markdown ol > li:has(p),
.markdown dl > dt:has(p),
.markdown dl > dd:has(p),
.markdown dl > li:has(p) {
  margin-bottom: unset;
}
article ul > dt:before, article ul > dt:after,
article ul > dd:before,
article ul > dd:after,
article ul > li:before,
article ul > li:after,
article ol > dt:before,
article ol > dt:after,
article ol > dd:before,
article ol > dd:after,
article ol > li:before,
article ol > li:after,
article dl > dt:before,
article dl > dt:after,
article dl > dd:before,
article dl > dd:after,
article dl > li:before,
article dl > li:after, .markdown ul > dt:before, .markdown ul > dt:after,
.markdown ul > dd:before,
.markdown ul > dd:after,
.markdown ul > li:before,
.markdown ul > li:after,
.markdown ol > dt:before,
.markdown ol > dt:after,
.markdown ol > dd:before,
.markdown ol > dd:after,
.markdown ol > li:before,
.markdown ol > li:after,
.markdown dl > dt:before,
.markdown dl > dt:after,
.markdown dl > dd:before,
.markdown dl > dd:after,
.markdown dl > li:before,
.markdown dl > li:after {
  display: none;
}
article ul > dt,
article ul > li,
article ol > dt,
article ol > li,
article dl > dt,
article dl > li, .markdown ul > dt,
.markdown ul > li,
.markdown ol > dt,
.markdown ol > li,
.markdown dl > dt,
.markdown dl > li {
  display: list-item;
}
article ul,
article dl, .markdown ul,
.markdown dl {
  list-style-type: "–";
  padding-left: 0.5em;
}
article ul > li, .markdown ul > li {
  padding-left: 0.666em;
}
article figure img, .markdown figure img {
  object-fit: contain;
}
article figure + div.lightbox, .markdown figure + div.lightbox {
  margin: unset;
}
article iframe, .markdown iframe {
  width: 100%;
  aspect-ratio: var(--aspect-ratio, 16/9);
}
article a, .markdown a {
  display: inline;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  background-color: var(--color--white);
}
nav a:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: var(--typography--cap);
}
nav a p {
  margin: unset;
}
nav ul {
  margin: unset;
}

footer {
  display: flex;
  justify-content: space-between;
}
footer p {
  margin: unset;
}

main footer {
  margin-top: calc(2 * var(--gutter));
}

:root {
  --card--main--height: 85vh;
  --card--footer--height: 10vh;
}
@supports (height: 100svh) {
  :root {
    --card--main--height: 85svh;
    --card--footer--height: 10svh;
  }
}

body.home header {
  --color: var(--color--white);
  --color--link: var(--color--white);
  background-color: var(--color--blue);
  display: grid;
  position: fixed;
  inset: 0;
  z-index: -1;
  grid-template-rows: var(--card--main--height) 1fr var(--card--footer--height);
  transition: var(--transition);
  text-wrap: balance;
}
body.home header > div {
  padding: var(--gutter);
  display: flex;
  align-items: center;
  opacity: 1;
  transition: var(--transition);
  opacity: 0;
}
body.home header > div:first-of-type {
  grid-row: span 1;
  animation: animate-in linear calc(0.5 * var(--transition--timing)) forwards;
}
body.home header > div:last-of-type {
  grid-row: 3/span 1;
}
body.home header.show-footer div:first-of-type {
  opacity: 0;
}
body.home header.show-footer div:last-of-type {
  opacity: 1;
}
body.home header article {
  --typography--leading: var(--typography--leading--heading);
  --typography--size: var(--typography--size--card);
}
body.home header article h1 {
  --typography--size: var(--typography--size--card);
}
body.home header + main {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
body.home main {
  margin-top: var(--card--main--height);
  margin-bottom: var(--card--footer--height);
  gap: calc(2 * var(--gutter));
}
body.home main > section:last-child {
  margin-top: unset;
}
body.home main .work {
  display: flex;
  flex-direction: column;
  row-gap: var(--gutter);
}
body.home main .work__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}
@media (min-width: 768px) {
  body.home main .work__list {
    grid-template-columns: repeat(var(--grid, 2), minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  body.home main .work__list li {
    grid-column: span var(--span, 1);
  }
}
body.home main .work__list li a {
  color: currentColor;
  display: grid;
  gap: calc(0.5 * var(--gutter));
  grid-template-rows: fit-content 1fr;
}
body.home main .work__list li a > figure {
  aspect-ratio: 3/2;
}
body.home main .work__list li a > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: unset;
}
body.home main .work__list li a > figure div {
  width: 100%;
}
body.home main .work__list li a > figure div.image-mat img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body.home main .work__list li h4 {
  color: var(--color--blue);
}
body.home main .work__list li h4 + p {
  margin-top: var(--typography--between);
}
body.home main .chronology {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--gutter));
}
body.home main .chronology dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  body.home main .chronology dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}
body.home main .chronology dl dt {
  padding-top: calc(1 * var(--gutter));
  border-top: 1px solid black;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (min-width: 768px) {
  body.home main .chronology dl dt {
    padding-top: calc(0.5 * var(--gutter));
    padding-bottom: calc(0.5 * var(--gutter));
  }
  body.home main .chronology dl dt:last-of-type {
    border-bottom: 1px solid black;
  }
}
body.home main .chronology dl dt h3 {
  --typography--size: revert;
  --typography--leading: revert;
  text-wrap: balance;
}
body.home main .chronology dl dd {
  padding-top: calc(1 * var(--gutter));
  padding-bottom: calc(1 * var(--gutter));
}
body.home main .chronology dl dd:last-of-type {
  border-bottom: 1px solid black;
}
@media (min-width: 768px) {
  body.home main .chronology dl dd {
    padding-top: calc(0.5 * var(--gutter));
    padding-bottom: calc(0.5 * var(--gutter));
    border-top: 1px solid black;
    padding-left: var(--gutter);
  }
}
body.home main .chronology dl dd + dd {
  border-top: none;
  padding-left: unset;
  padding-top: unset;
}
@media (min-width: 768px) {
  body.home main .chronology dl dd + dd {
    grid-column: span 2;
  }
}
body.home main .chronology dl dd + dd ul {
  display: flex;
  gap: calc(0.5 * var(--gutter));
  overflow-x: scroll;
  overflow-y: hidden;
}
body.home main .chronology dl dd + dd ul li {
  flex-shrink: 0;
  height: calc(7 * var(--gutter));
}
body.home main .chronology dl dd + dd ul li > figure {
  height: 100%;
}
body.home main .chronology dl dd + dd ul li > figure img {
  height: 100%;
  width: auto;
}

body.about .about__container {
  display: grid;
  align-items: start;
  grid-template-areas: "portrait" "about";
  column-gap: var(--gutter);
  row-gap: calc(var(--typography--between) + var(--typography--line-height));
}
@media (min-width: 768px) {
  body.about .about__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "portrait about";
  }
}
body.about .about__container article {
  grid-area: about;
}
body.about .about__container figure {
  grid-area: portrait;
}
@media (min-width: 768px) {
  body.about .about__container figure {
    position: sticky;
    top: var(--gutter);
  }
}
body.about .about__container figure img {
  max-height: 50vh;
}
@media (min-width: 768px) {
  body.about .about__container figure img {
    max-height: unset;
  }
}

body.work header {
  display: grid;
  gap: var(--gutter);
}
body.work dl {
  padding-top: calc(0.5 * var(--gutter));
  padding-bottom: calc(0.5 * var(--gutter));
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: grid;
  grid-template-columns: minmax(0, min-content) minmax(0, 2fr);
  column-gap: calc(1 * var(--gutter));
  row-gap: var(--typography--between);
}
body.work .hero {
  display: flex;
  justify-content: center;
}
body.work .hero > figure div {
  max-width: calc(var(--max-width) + 2 * var(--gutter));
}
body.work .hero > figure div img, body.work .hero > figure div video {
  max-width: min(100%, var(--max-width));
}

:root {
  --typography--leading: 1.3;
  --typography--leading--heading: 1.1;
  --typography--size: 1.6rem;
  --typography--size--card: calc(var(--typography--size) * 1.45);
  --typography--size--h1: calc(var(--typography--size) * 2.75);
  --typography--size--h2: calc(var(--typography--size) * 2.1);
  --typography--size--h3: calc(var(--typography--size) * 1.5);
  --typography--size--caption: calc(var(--typography--size) * 0.875);
  --gutter: 2.0rem;
  --max-width: 110.0rem;
  --color--white: #FBFBFB;
  --color--blue: #00F;
  --color--gray: #ddd;
  --color--black: #000;
  --transition--timing: 500ms;
  --transition: var(--transition--timing) all;
  scroll-behavior: smooth;
}
@media (max-width: 320px) {
  :root {
    --typography--size--card: calc(var(--typography--size) * 1.375);
  }
}
@media (min-width: 768px) {
  :root {
    --typography--size: 1.8rem;
    --typography--size--card: calc(var(--typography--size) * 2.5);
    --typography--size--h1: calc(var(--typography--size) * 3.5);
    --typography--size--h2: calc(var(--typography--size) * 2.5);
    --typography--size--h3: calc(var(--typography--size) * 1.6);
    --gutter: 4.0rem;
  }
}

h1,
h2,
h3 {
  --typography--leading: var(--typography--leading--heading);
  scroll-margin-top: calc(var(--margin--vertical--2) + var(--typography--size--base) * var(--typography--cap-height) * 3);
}

h1 {
  --typography--size: var(--typography--size--h1) ;
}

h2 {
  --typography--size: var(--typography--size--h2);
}

h2 span[id] {
  margin-top: calc(-1 * var(--gutter));
  padding-top: calc(1 * var(--gutter));
  width: fit-content;
}
h2[aria-label="MoMA logo"] {
  display: flex;
  align-items: center;
  height: var(--typography--cap);
}
h2:hover a {
  visibility: visible;
}
h2 a {
  margin-left: 0.5ch;
  display: inline-block;
  visibility: hidden;
}

h3 {
  --typography--size: var(--typography--size--h3);
}

body.frozen {
  overflow: hidden;
}

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