/* The project opening follows the same system theme as the rest of the site. */
.factories-page .site-header {
  position: absolute; inset: 0 0 auto; z-index: 3;
}
.project-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  padding: clamp(6rem, 11vh, 8rem) 2.5rem 2.5rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3rem;
  overflow: clip;
}
.hero-heading { position: absolute; top: calc(50% - 3em); left: 2.5rem; right: 2.5rem; transform: translateY(-50%); display: grid; justify-items: center; }
.project-hero h1 { max-width: 44rem; margin: 0; font: inherit; font-weight: 700; letter-spacing: normal; text-align: center; }
.hero-bottom p { margin: 0; }
.project-introduction {
  width: calc(100% - 6rem); max-width: 76rem; margin: clamp(7rem, 16vh, 12rem) auto;
  display: grid; grid-template-columns: 11.25rem minmax(0,35.5rem) 14rem;
  gap: clamp(1.5rem,3vw,3rem); justify-content: space-between; align-items: start;
  scroll-margin-top: 5rem;
}
.project-details p { margin: 0 0 1.5rem; }
.language-tabs { display: flex; gap: 1rem; margin-top: 3rem; }
.language-tabs button { appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; padding: .25rem 0; color: var(--muted); font: inherit; }
.language-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: currentColor; }
.language-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.project-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 8px; }
.project-copy[hidden] { display: none; }
.project-copy .description-heading { margin-bottom: 1.6em; text-align: left; }
.project-copy .project-prose p + p { margin-top: 0; }
.project-copy[lang="en"] .project-prose p + p { margin-top: 1.6em; }
.project-copy[lang="zh"] { line-height: 1.9; }
.project-copy[lang="zh"] p { word-break: normal; overflow-wrap: anywhere; }
.project-intro-image { margin-top: 8rem; }
.project-photo { margin: 0; min-width: 0; }
.project-photo img { display: block; width: 100%; height: auto; }
.project-photographs { width: calc(100% - 6rem); max-width: 76rem; margin: 0 auto; }
.photo-pair { display: flex; justify-content: space-between; align-items: flex-start; gap: 8%; margin: clamp(8rem,20vh,16rem) 0; }
.photo-pair .photo-small { width: 29%; margin-top: 12%; }
.photo-pair .photo-large { width: 53%; }
.pair-landscape { gap: 6%; }
.pair-landscape .photo-wide { width: 66%; }
.pair-landscape .photo-small { width: 25%; margin-top: 18%; }
.project-footer { width: calc(100% - 6rem); max-width: 76rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin: 7rem auto 4rem; }
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] { transform: translate3d(0,var(--project-shift,0px),0); }
}
@media (max-width: 64rem) {
  .project-introduction { width: calc(100% - 4rem); grid-template-columns: 9rem minmax(0,1fr); gap: 3rem; }
  .project-intro-image { grid-column: 2; width: 50%; margin-top: 1.5rem; }
  .project-photographs, .project-footer { width: calc(100% - 4rem); }
}
@media (max-width: 48rem) {
  .hero-heading { left: 1.25rem; right: 1.25rem; }
  .project-hero { padding: 9rem 1.25rem 2rem; gap: 3rem; }

  .project-introduction { display: block; width: calc(100% - 2.5rem); margin: 5rem auto 7rem; }
  .project-details { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 3rem; }
  .project-details p { margin: 0; }
  .language-tabs { margin: 0 0 0 auto; }
  .project-intro-image { width: 68%; max-width: 22rem; margin: 5rem 0 0 auto; }
  .project-photographs, .project-footer { width: calc(100% - 2.5rem); }
  .photo-pair { flex-direction: column; gap: 5rem; margin: 5rem 0; }
  .photo-pair .photo-small { width: 64%; margin: 0; }
  .photo-pair .photo-large { width: 88%; }
  .photo-pair .photo-wide { width: 100%; }
  .photo-pair .project-photo:nth-child(even) { align-self: flex-end; }
  .project-footer { margin-top: 5rem; }
}
@media (forced-colors: active) {
  .project-hero, .factories-page .site-header { color: CanvasText; background: Canvas; }
  [data-parallax] { transform: none; }
}
@media print {
  .hero-heading { position: static; transform: none; }
  .project-hero { min-height: 0; padding: 0; color: #000; background: #fff; }
  [data-parallax] { transform: none !important; }
  .project-introduction { display: block; width: 100%; margin: 3rem 0; }
  .project-details, .project-footer { display: none; }
  .project-intro-image { width: 40%; margin: 2rem 0; }
  .project-photo { break-inside: avoid; }
  .photo-pair { margin: 3rem 0; }
}

/* Photo credits appear only in the enlarged view. */
.project-image-button { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.project-image-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.photo-pointer-focus .project-image-button:focus { outline: none; }
html.photo-viewer-open { overflow: hidden; }
.photo-viewer { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1.25rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.photo-viewer[open] { display: grid; place-items: center; }
.photo-viewer::backdrop { background: rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.photo-viewer figure { margin: 0; max-width: 100%; }
.photo-viewer-image { display: block; width: auto; height: auto; max-width: calc(100vw - 2.5rem); max-height: calc(100svh - 5rem); object-fit: contain; }
.photo-viewer figcaption { margin-top: .75rem; font-size: inherit; color: #fff; text-shadow: 0 1px 4px #000, 0 0 10px #000; }
.photo-viewer-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media print { .photo-viewer { display: none; } }