.project-footer {
  container-type: inline-size;
  display: grid;
  width: 100%;
  margin: 0;
  padding: clamp(2rem, 5.4vw, 6rem) clamp(18px, 2.7vw, 56px) clamp(1.6rem, 3vw, 3.2rem);
  grid-template-rows: auto auto auto auto;
  background: #000;
  color: #f7f6f0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}

.project-footer,
.project-footer * { box-sizing: border-box; }
.project-footer a,
.project-footer button {
  color: inherit;
  font: inherit;
  text-transform: none;
}
.project-footer a { text-decoration: none; }
.reference-viewer .project-footer a,
.reference-viewer .project-footer button { text-transform: none; }
.reference-viewer > .project-footer { width: var(--reference-detail-width, 100%); margin-inline: auto; }

.project-footer__hero {
  display: grid;
  align-items: start;
  justify-items: start;
  min-height: clamp(11rem, 28vh, 19rem);
  padding-top: clamp(5rem, 11.5vw, 8rem);
}
.project-footer__logo { display: block; width: clamp(8rem, 10.5vw, 13.5rem); max-width: 100%; height: auto; }
.project-footer__rule { width: 100%; height: 1px; background: rgba(247, 246, 240, .2); }
.project-footer__main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(3rem, 7.5vh, 5.4rem);
}
.project-footer__group {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: .75rem;
  color: rgba(247, 246, 240, .62);
  font-size: clamp(.95rem, 1.25vw, 1.18rem);
  line-height: 1.15;
}
.project-footer__group strong { margin-bottom: .65rem; color: #f7f6f0; font-weight: 800; }
.project-footer .project-footer__group a,
.project-footer .project-footer__group button,
.project-footer .project-footer__back {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}
.project-footer .project-footer__group a:hover,
.project-footer .project-footer__group button:hover,
.project-footer .project-footer__back:hover,
.project-footer .project-footer__icp:hover { color: #fff000; }
.project-footer .project-footer__group a:hover,
.project-footer .project-footer__group button:hover { transform: translateX(.22rem); }
.project-footer .project-footer__group a:focus-visible,
.project-footer .project-footer__group button:focus-visible,
.project-footer .project-footer__back:focus-visible,
.project-footer .project-footer__icp:focus-visible { color: #fff000; outline: 1px solid #fff000; outline-offset: 6px; }
.project-footer__statement { gap: clamp(1.2rem, 2.4vw, 2rem); }
.project-footer__statement strong { max-width: 31rem; margin-bottom: 0; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.22; text-wrap: pretty; }
.project-footer__statement p { max-width: 33rem; margin: 0; color: rgba(247, 246, 240, .62); font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.35; }
.project-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2rem;
  margin-top: clamp(3rem, 5vw, 5rem);
  color: #f7f6f0;
  font-size: clamp(.95rem, 1.12vw, 1.08rem);
  font-weight: 800;
  line-height: 1;
}
.project-footer__bottom > * { min-width: 0; }
.project-footer__bottom > strong { font-weight: inherit; overflow-wrap: anywhere; }
.project-footer__icp { justify-self: center; white-space: nowrap; transition: color 180ms ease; }
.project-footer__back { justify-self: end; }
.project-footer .project-footer__back--mobile { display: none; }

.project-footer .project-footer__wechat {
  position: fixed;
  inset: 0;
  width: min(calc(100vw - 32px), 400px);
  max-width: none;
  height: fit-content;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 0;
  background: #fff;
  color: #080808;
  font: 16px Arial, Helvetica, sans-serif;
  text-align: center;
  color-scheme: light;
}
.project-footer__wechat::backdrop { background: rgba(0, 0, 0, .9); }
.project-footer__qr { display: block; width: 100%; height: auto; }
.project-footer .project-footer__wechat .project-footer__wechat-close {
  display: block;
  width: 44px;
  height: 44px;
  margin: 16px auto 0;
  padding: 0;
  border: 1px solid #080808;
  border-radius: 50%;
  background: transparent;
  color: #080808;
  font: 28px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.project-footer .project-footer__wechat .project-footer__wechat-close:focus-visible { outline: 2px solid #080808; outline-offset: 4px; }

@container (max-width: 960px) {
  .project-footer__bottom { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .project-footer__icp { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
  .project-footer__back--desktop { justify-self: start; }
}

@media (max-width: 767px) {
  .project-footer { padding: 7rem 1rem 1.5rem; }
  .project-footer__hero { min-height: 10rem; }
  .project-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 5.5rem; padding-top: 3rem; }
  .project-footer__statement { grid-column: 1 / -1; }
  .project-footer .project-footer__back--mobile { display: block; grid-column: 1 / -1; justify-self: start; font-size: clamp(.95rem, 1.12vw, 1.08rem); font-weight: 800; line-height: 1; }
  .project-footer .project-footer__back--desktop { display: none; }
  .project-footer__bottom { grid-template-columns: 1fr; gap: 1.4rem; margin: 5.5rem 0 0; }
  .project-footer__icp { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .project-footer .project-footer__group a,
  .project-footer .project-footer__group button,
  .project-footer .project-footer__back,
  .project-footer .project-footer__icp { transition: none; }
}