/* Reusable project presentation. Original proportions, no cropped banners. */
.project-page { background: var(--project-bg, #fff); }
.project-content { width: 100%; margin-inline: auto; }
.project-contained { max-width: var(--project-max-width, 1440px); }
.project-banners { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--project-gap, 24px); }
.project-banner { margin: 0; min-width: 0; }
.project-banner picture { display: block; }
.project-banner img { display: block; width: 100%; height: auto; max-width: 100%; }
.project-title { font-family: var(--font-body); font-size: clamp(28px, 4vw, 60px); line-height: 1.2; padding: 40px 5%; margin: 0; overflow-wrap: anywhere; }
.project-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.project-editor-note { padding: 48px 5%; font-size: 16px; line-height: 1.7; }
.project-back-wrap { padding: 32px 5%; }
.project-back-wrap a { color: var(--purple); text-decoration: underline; text-underline-offset: 5px; font-size: 16px; font-weight: 600; }
.project-back-wrap a:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
@media (max-width: 600px) {
    .project-banners { gap: var(--project-mobile-gap, 16px); }
    .project-title { padding-block: 28px; }
}