.project-detail-hero { background-image: linear-gradient(rgb(3 5 7 / 58%), rgb(3 5 7 / 68%)), var(--project-hero); }
.project-detail-hero h1 { font-size: clamp(2rem, 3.4vw, 3.5rem); }
.project-detail-gallery { padding: 64px clamp(20px, 5vw, 80px); background: #eef0f1; color: #101820; scroll-margin-top: 100px; }
.project-gallery-heading { max-width: 1400px; margin: 0 auto 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.project-gallery-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.project-gallery-heading p { margin: 0; color: #52616b; }
.project-photo-grid { max-width: 1400px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.project-photo { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #142633; aspect-ratio: 1.5; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.project-photo:hover img { transform: scale(1.025); }
.project-photo > span { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: rgb(3 5 7 / 75%); font-size: 24px; }
.project-more { max-width: 1400px; margin: 28px auto 0; }
.project-more summary { width: fit-content; margin: 0 auto 28px; cursor: pointer; padding: 14px 24px; border: 1px solid #005598; border-radius: 8px; color: #005598; font-weight: 650; list-style: none; }
.project-more summary::-webkit-details-marker { display: none; }
.project-more summary span { margin-left: 16px; display: inline-block; }
.project-more[open] summary span { transform: rotate(45deg); }
.project-neighbors { max-width: 1400px; margin: 50px auto 0; padding-top: 28px; border-top: 1px solid #cbd2d6; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.project-neighbors a:last-child { text-align: right; }
.project-neighbors span { display: block; font-size: .8rem; color: #52616b; margin-bottom: 8px; }
.project-neighbors strong { font-size: 1rem; }
.project-back { color: #005598; font-weight: 650; }
.project-detail :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.project-detail .project-detail-gallery :focus-visible { outline-color: #005598; }
.project-lightbox { position: fixed; inset: 0; margin: auto; width: min(96vw, 1600px); max-width: none; max-height: 95dvh; padding: 20px; border: 1px solid #35414c; border-radius: 16px; background: #080d12; color: #fff; }
.project-lightbox::backdrop { background: rgb(0 0 0 / 90%); }
.project-lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.project-lightbox-bar p { margin: 0; }
.project-lightbox button { border: 1px solid #53616e; border-radius: 8px; background: #17212b; color: #fff; cursor: pointer; min-width: 44px; min-height: 44px; padding: 8px 12px; }
.project-lightbox-stage { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; }
.project-lightbox-stage img { width: 100%; height: min(76dvh, 1000px); object-fit: contain; }
html.photo-gallery-open { overflow: hidden; }
.project-detail-hero h1 { max-width: 1100px; margin-inline: auto; text-wrap: balance; }
.project-detail-hero nav { flex-wrap: wrap; }
.project-details { max-width: 960px; margin: 56px auto 0; text-align: center; }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }
.project-details h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin: 0 0 20px; }
.project-details ul { margin: 0; padding-left: 22px; }
.project-details li { margin-bottom: 10px; line-height: 1.65; }
.project-details li a { color: #005598; text-decoration: underline; text-underline-offset: 3px; }
.project-narrative { max-width: 72ch; margin: 40px auto 0; font-size: 1.0625rem; line-height: 1.75; }
.project-narrative h2:not(:first-child) { margin-top: 36px; }
.project-narrative p { margin: 0 0 20px; }
.project-narrative blockquote { margin: 32px 0; padding: 24px 0; border-block: 1px solid #cbd2d6; }
.project-narrative blockquote p { font-size: 1.2rem; }
.project-narrative blockquote footer { color: #52616b; font-size: .95rem; }
.project-video { max-width: 960px; aspect-ratio: 16/9; margin: 32px auto 0; }
.project-video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 16px; }
.project-video-link { color: #005598; text-decoration: underline; }
@media(max-width:600px) {
  .project-facts { grid-template-columns: 1fr; gap: 28px; }
  .project-details { margin-top: 36px; }
  .project-detail-gallery { padding: 36px 16px; }
  .project-gallery-heading { display: block; }
  .project-gallery-heading p { margin-top: 8px; }
  .project-photo-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-neighbors { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .project-neighbors .project-back { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .project-lightbox { padding: 12px; }
  .project-lightbox-stage { grid-template-columns: 1fr 1fr; }
  .project-lightbox-stage img { grid-column: 1/-1; grid-row: 1; height: auto; max-height: 64dvh; }
  .project-lightbox-stage button { justify-self: center; }
}
@media(prefers-reduced-motion:reduce) { .project-photo img { transition: none; } }