/* Content-safe detail header and a hard guard against horizontal overflow. */
html, body { overflow-x: hidden; overflow-x: clip; }
.project-detail, .project-detail-shell { max-width: 100%; overflow-x: clip; }
.project-detail-shell { padding-inline: 2px; }
.project-back { margin-bottom: clamp(28px, 4vh, 42px); }
.detail-hero { grid-template-columns: minmax(0, 1.08fr) minmax(280px, .62fr); gap: clamp(36px, 7vw, 110px); }
.detail-hero h1 { max-width: 760px; font-size: clamp(44px, 4.85vw, 72px); letter-spacing: -.045em; overflow-wrap: anywhere; }
.detail-summary { min-width: 0; padding: 0 0 4px 28px; border-left: 1px solid rgba(103, 203, 236, .28); }
.detail-summary > p { max-width: 380px; margin: 0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.8; }
.detail-cover { width: 100%; max-width: 100%; }
.project-facts, .detail-story, .project-outcome { max-width: 100%; }
@media (max-width: 900px) { .detail-hero { grid-template-columns: 1fr; gap: 24px; } .detail-summary { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(103, 203, 236, .28); } .detail-hero h1 { max-width: none; } }