/* :root {
  --page-padding-right: 3rem;
}
@media (max-width: 720px) {
  :root {
    --page-padding-right: 2rem;
  }
} */



.project {
  --button-margin-top: 2rem;
  --minimized-images-width: 40%;
  --minimized-font-size-factor: .4; /* same as --minimized-images-width */
  --project-transition: .35s;
}

#project_title {
  display: inline;
  cursor: pointer;
  pointer-events: auto;
}
#project_date {
  display: inline;
}
#project_header {
  font-size: var(--font-size-h1);
  margin-bottom: 3rem;
}
/* click through */
#project, #project_text_wrapper {
  pointer-events: none;
}
#project_tags {
  font-size: var(--smaller);
}
#project_tags {
  display: inline-block;
  pointer-events: auto;
}
#project_text_inner {
  pointer-events: auto;
}
#project_table #project_text p:last-child {
  margin-bottom: .5em;
}
#project {
  position: sticky;
  top: calc(var(--nav-height) + var(--page-padding-top));
}
#project_text_wrapper {
  transition: height .35s;
  will-change: height;
  height: var(--text-collapsed-height);
}
.expanded #project_text_wrapper {
  height: var(--text-expanded-height);
}
#project_text_inner {
  width: 70%;
  max-width: 50rem;
  transform: scale(0.33);
  transform-origin: left top;
  transition: transform var(--project-transition);
  will-change: transform;
  position: relative;
  text-wrap: pretty;
  line-height: var(--line-height-regular)
}
.expanded #project_text_inner {
  transform: scale(1);
}
#project_text_inner p:last-child {
  margin-bottom: 0;
}
#project_images {
  margin-top: calc(var(--text-collapsed-height) * -1 - var(--btn-height) - var(--button-margin-top));
  padding-right: var(--site-padding);
  text-align: right;
  padding-bottom: 2rem;
  min-height: 100vh;
  transition: margin-top var(--project-transition);
  will-change: margin-top;
}
.expanded #project_images {
  margin-top: calc(var(--text-expanded-height) * -1 - var(--btn-height) - var(--button-margin-top));
}
#project_images_wrapper {
  margin-right: calc(var(--image-bleed) * -1);
  display: inline-block;
  width: 100%;
  transition: width var(--project-transition);
  will-change: width;
}
#project_images_list {
  padding: 0;
  list-style: none;
}
.expanded #project_images_wrapper {
  width: var(--minimized-images-width);
}
.project_image_item:not(:last-of-type) {
  margin-bottom: 8%;
}
.project_image_item .figure {
  display: inline;
}
.project_image_item .figure img {
  width: var(--width);
}
.project_image_item .figure .caption_inner {
  width: var(--width);
  transition: font-size var(--project-transition);
  will-change: font-size;
}
.expanded .project_image_item .figure .caption_inner {
  font-size: calc(var(--font-size-regular) * var(--minimized-font-size-factor));
}

#project_text_btn_area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}
.expanded #project_text_btn_area {
  display: none;
}
#project_text_btn {
  margin-top: var(--button-margin-top);
}


#back_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


@media (max-width: 720px) {
  #prev_project_btn .btn_text,
  #next_project_btn .btn_text {
	  text-indent: -9999px;
	  display: inline-block;
	  width: 0;
  }
  #prev_project_btn,
  #next_project_btn {
	  gap: 0;
  }
  .bullet.arrow_right:before,
	.bullet.arrow_left:after,
	.bullet.arrow_right:after,
	.bullet.arrow_left:before {
	  opacity: 1;
	}
}