.project-detail {
  --project-gutter: max(1rem, 2.2vw);
  background: #f4f2ed;
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 120;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: var(--red);
  pointer-events: none;
}

.project-header {
  position: absolute;
  color: var(--ink);
}

.project-intro {
  min-height: 100svh;
  padding: 16vh var(--project-gutter) 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-kicker {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid;
  padding-top: .75rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.project-intro h1 {
  margin: auto 0;
  font-size: clamp(5rem, 16vw, 16rem);
  font-weight: 500;
  line-height: .7;
  letter-spacing: -.09em;
  overflow-wrap: anywhere;
}

.project-intro h1::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.project-summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 6vw;
  align-items: start;
  border-top: 1px solid;
  padding-top: 1rem;
}

.project-summary > p {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.project-summary dl {
  margin: 0;
}

.project-summary dl > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}

.project-summary dt,
.project-summary dd {
  margin: 0;
  font-size: .7rem;
}

.project-summary dt {
  text-transform: uppercase;
  letter-spacing: .1em;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--project-gutter);
  padding: var(--project-gutter);
  background: #fff;
}

.project-gallery figure {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: #eeece6;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 2rem);
}

.project-gallery img,
.project-gallery video {
  width: 100%;
  height: auto;
}

.project-gallery img {
  width: 100%;
  height: min(64svh, 640px);
  object-fit: contain;
}

.project-gallery figure:hover img {
  transform: none;
}

.project-lead,
.project-wide,
.project-video {
  grid-column: 1 / -1;
}

.project-half:nth-of-type(odd) {
  grid-column: span 6;
}

.project-half:nth-of-type(even) {
  grid-column: span 6;
}

.project-gallery .gallery-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in}
.gallery-hint{display:block;padding-top:.8rem;font:10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#555;text-align:right}
.gallery-dialog{width:100vw;max-width:none;height:100svh;max-height:none;border:0;padding:4.5rem 4vw 3.5rem;margin:0;background:#f4f2ed;color:#111;overflow:hidden}
.gallery-dialog::backdrop{background:#111d}
.gallery-dialog img{display:block;width:100%;height:100%;object-fit:contain}
.gallery-close,.gallery-prev,.gallery-next{position:absolute;border:1px solid #777;background:#f4f2ed;color:#111;padding:.7rem 1rem;cursor:pointer;font:12px var(--sans)}
.gallery-close{right:1rem;top:1rem}.gallery-prev{left:1rem;bottom:1rem}.gallery-next{right:1rem;bottom:1rem}
.gallery-counter{position:absolute;left:1rem;top:1.4rem;font:12px var(--sans)}
body.gallery-is-open{overflow:hidden}

.project-video {
  padding: clamp(.5rem, 1.2vw, 1.2rem);
  background: #111 !important;
}

.project-video video {
  display: block;
  max-height: 90svh;
  background: #111;
  object-fit: contain;
}

.project-outro {
  min-height: 78svh;
  padding: 10vw var(--project-gutter) var(--project-gutter);
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-outro > p {
  max-width: 35rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-style: italic;
  line-height: 1;
}

.project-outro a {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  border-top: 1px solid #666;
  padding-top: 1rem;
}

.project-outro span {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.project-outro strong {
  font-size: clamp(3.5rem, 10vw, 10rem);
  line-height: .78;
  letter-spacing: -.075em;
  text-align: right;
  transition: font-style .25s;
}

.project-outro a:hover strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.project-outro-actions {
  display: grid;
  grid-template-columns: minmax(11rem, .55fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: stretch;
}

.project-outro-actions a {
  min-width: 0;
  height: 100%;
}

.project-outro-actions .project-home-link {
  align-items: flex-start;
}

.project-outro-actions .project-home-link strong {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-align: left;
}

@media (max-width: 800px) {
  .project-intro {
    min-height: 92svh;
    padding-top: 8rem;
  }

  .project-kicker span:last-child {
    display: none;
  }

  .project-intro h1 {
    font-size: clamp(4.4rem, 22vw, 8rem);
    line-height: .76;
  }

  .project-summary {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .project-gallery {
    display: block;
    padding: .5rem;
  }

  .project-gallery figure + figure {
    margin-top: .5rem;
  }

  .project-gallery img{height:min(62svh,540px)}

  .project-outro {
    min-height: 55svh;
    padding-top: 5rem;
  }

  .project-outro a {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-outro-actions {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .project-outro-actions .project-home-link {
    min-height: 6rem;
  }

  .project-outro strong {
    text-align: left;
    font-size: 17vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery img {
    transition: none;
  }
}