:root {
  --info-w: 38.4rem;
  --col-gap: var(--space-20);
  --media-w: calc(192rem - var(--edge) - var(--info-w) - var(--col-gap));
  --media-gap: 0;
  --info-top: 12rem;
}


.project {
  --p: 0;
  --title-big: 8rem;
  --title-small: 3.4rem;
  --shrink-dist: 15rem;
  --media-offset: 37rem;
  display: flex; align-items: flex-start; gap: var(--col-gap);
  padding: var(--info-top) 0 0 var(--edge);
}

.project__info {
  position: sticky; top: var(--info-top);
  width: var(--info-w);
  height: calc(100vh - var(--info-top));
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding-bottom: var(--edge);
}
.project__title {
  margin-top: var(--space-24);
  width: max-content;
  white-space: nowrap;
  font-size: calc(var(--title-big) + (var(--title-small) - var(--title-big)) * var(--p));
  line-height: 1.1; letter-spacing: -0.04em;
}

.project__meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16);
  margin-top: var(--space-24);
}
.project__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag {
  display: inline-flex; align-items: center;
  padding: var(--space-4) var(--space-12); border-radius: 0.6rem;
  border: 1px solid var(--black);
}

.project__back {
  align-self: flex-start;
  margin-top: var(--space-32);
}

.project__acc { width: 100%; margin-top: auto; }
.project__acc .acc__body { margin-left: 0; width: auto; }
.acc__link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.project__acc .acc__item.is-open .acc__panel { margin-top: 0; }
.project__acc .acc__body > :first-child { margin-top: var(--space-4); }
.project__acc .acc__head { gap: var(--space-12); align-items: center; }
.project__acc .acc__icon { order: -1; margin-top: 0; }
.project__acc .acc__body { padding-left: calc(0.8rem + var(--space-12)); }
.project__acc .acc__item:not(.is-open) .acc__head { padding-top: var(--space-8); }
.project__acc .acc__item:not(.is-open) .acc__panel { padding-bottom: var(--space-8); }
.project__acc .acc__head { transition: padding .5s var(--ease); }

.project__media {
  flex: 1 1 auto; min-width: 0;
  margin-top: var(--media-offset);
  display: flex; flex-direction: column; gap: var(--media-gap);
}
.media { width: 100%; background: var(--grey); overflow: hidden; }
.media img,
.media video { display: block; width: 100%; height: auto; }
.media--embed { position: relative; aspect-ratio: var(--ratio, 16 / 9); }
.media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.page-project .contact { padding-top: var(--edge); padding-left: calc(var(--edge) + var(--info-w) + var(--col-gap)); }

.next {
  display: flex; align-items: flex-start; gap: var(--col-gap);
  padding: var(--edge) 0 0 var(--edge);
}
.next__text {
  position: sticky; top: var(--info-top);
  width: var(--info-w); flex: 0 0 auto;
}
.next__title { margin-top: var(--space-24); }
.next__cat { margin-top: var(--space-24); }
.next__card { display: block; width: var(--media-w); }
.next__card .work__img img,
.next__card .work__img video { width: 100%; height: 100%; object-fit: cover; }

.next[data-reveal] .work__img { position: relative; }
.next[data-reveal] .work__img img,
.next[data-reveal] .work__img video {
  position: absolute; left: 0; top: calc(var(--parallax) * -100%);
  width: 100%; height: calc(100% + var(--parallax) * 200%);
  max-width: none;
  transform: var(--reveal-shift, none);
  will-change: transform;
}

.page-project .footer { margin-top: var(--edge); }

@media (max-width: 1023px) {

  .adaptive .project { display: block; padding: var(--space-80) var(--edge) 0; }
  .adaptive .project__info { position: static; width: auto; height: auto; padding-bottom: 0; }
  .adaptive .project__title {
    margin-top: var(--space-16);
    width: auto; white-space: normal;
    font-size: 3.2rem;
  }
  .adaptive .project__meta { margin-top: var(--space-12); gap: var(--space-12); }
  .adaptive .project__acc { margin-top: var(--space-80); }
  .adaptive .project__back { margin-top: var(--space-32); }
  .adaptive .project__media { margin: var(--space-32) calc(-1 * var(--edge)) 0; }

  .adaptive .page-project .contact { padding-top: var(--space-80); padding-left: var(--edge); }

  .adaptive .next { display: block; padding: var(--space-80) var(--edge) 0; }
  .adaptive .next__text { position: static; width: auto; }
  .adaptive .next__title { margin-top: var(--space-20); }
  .adaptive .next__cat { margin-top: var(--space-20); }
  .adaptive .next__card { width: 100%; margin-top: var(--space-32); }
}

@media (min-width: 1024px) {
  .page-project { --logo-w: 7rem; --logo-h: 4rem; --logo-x: var(--edge); --logo-y: var(--edge); }
  html.logo-footer .page-project { --logo-w: 18rem; --logo-h: 10.3rem; --logo-x: 0px; --logo-y: 0px; }
}