/* Project detail sizing and spacing; inherit the existing palette. */
.project-story-page {
    --project-gutter: clamp(20px, 4vw, 64px);
}
.project-story-page *,
.project-story-page *::before,
.project-story-page *::after {
    box-sizing: border-box;
    min-width: 0;
}
.project-story-page .project-story-header,
.project-story-page .project-story-cover,
.project-story-page .project-story-intro,
.project-story-page .project-narrative-section,
.project-story-page .project-specs-section,
.project-story-page .projects-related {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: var(--project-gutter);
}
.project-story-page .project-story-header {
    padding-block: clamp(32px, 5vw, 64px) 32px;
}
.project-story-page .project-breadcrumb {
    flex-wrap: wrap;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.project-story-page h1,
.project-story-page h2,
.project-story-page h3 {
    overflow-wrap: anywhere;
}
.project-story-page .project-story-header h1 {
    font-size: clamp(34px, 4.8vw, 68px);
    line-height: 1.1;
}
.project-story-page .project-summary {
    max-width: 800px;
}
.project-story-page .project-meta-pill,
.project-story-page .project-hero-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.project-story-page .project-story-cover {
    margin-bottom: 12px;
    height: clamp(240px, 46vw, 600px);
}
.project-story-page .project-story-intro {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    padding-block: clamp(32px, 4vw, 56px);
}
.project-story-page .project-story-intro > *,
.project-story-page .project-narrative-grid > *,
.project-story-page .project-specs-grid > *,
.project-story-page .project-story-gallery > * {
    max-width: 100%;
}
.project-story-page .project-prose {
    max-width: 100%;
    overflow-x: visible;
    overflow-wrap: anywhere;
    line-height: 1.85;
}
.project-story-page .project-prose p,
.project-story-page .project-prose li {
    white-space: normal;
    overflow-wrap: anywhere;
}
.project-story-page .project-prose table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.project-story-page .project-prose td,
.project-story-page .project-prose th {
    padding: 12px;
    overflow-wrap: anywhere;
}
.project-story-page .project-prose pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.project-story-page .project-prose img,
.project-story-page .project-prose video,
.project-story-page .project-prose iframe {
    max-width: 100%;
}
.project-story-page .project-facts {
    padding: clamp(20px, 2.5vw, 30px);
}
.project-story-page .project-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    line-height: 1.6;
}
.project-story-page .project-facts dt,
.project-story-page .project-facts dd {
    white-space: normal;
    overflow-wrap: anywhere;
}
.project-story-page .project-narrative-grid,
.project-story-page .project-specs-grid,
.project-story-page .project-story-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.project-story-page .project-narrative-section,
.project-story-page .project-specs-section {
    padding-block: 32px;
}
.project-story-page .narrative-card,
.project-story-page .project-spec-card {
    padding: clamp(20px, 3vw, 32px);
}
.project-story-page .narrative-card-header,
.project-story-page .spec-card-header {
    gap: 14px;
}
.project-story-page .project-gallery-section,
.project-story-page .design-media-section,
.project-story-page .project-tour-section,
.project-story-page .projects-cta {
    padding: clamp(36px, 5vw, 64px) max(var(--project-gutter), calc((100% - 1232px) / 2));
}
.project-story-page .projects-section-heading {
    gap: 16px 24px;
    margin-bottom: 24px;
}
.project-story-page .projects-section-heading h2,
.project-story-page .project-story-intro h2 {
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.2;
}
.project-story-page .gallery-caption-text,
.project-story-page .floor-plan-caption-text {
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
    -webkit-line-clamp: unset;
}
.project-story-page .spec-pill {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.project-story-page .spec-pill i,
.project-story-page .project-meta-pill i {
    flex-shrink: 0;
}
.project-story-page .projects-cta-box {
    padding: clamp(24px, 4vw, 48px);
}
.project-story-page .portfolio-cta-btn-group > a {
    max-width: 100%;
    min-height: 54px;
    height: auto;
    padding: 14px 20px;
    line-height: 1.5;
    text-align: center;
}
@media (max-width: 991px) {
    .project-story-page .project-story-intro,
    .project-story-page .project-narrative-grid,
    .project-story-page .project-specs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    .project-story-page .project-story-gallery,
    .project-story-page .projects-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .project-story-page .project-story-meta {
        margin-top: 24px;
    }
    .project-story-page .project-story-header .project-summary {
        font-size: 14px;
        line-height: 1.8;
    }
    .project-story-page .project-story-intro .project-prose,
    .project-story-page .narrative-prose {
        font-size: 14px;
    }
    .project-story-page .comparison-figure {
        padding: 16px;
    }
    .project-story-page .design-comparison-control {
        flex-wrap: wrap;
        gap: 12px;
    }
    .project-story-page .design-comparison-range {
        max-width: 100%;
    }
}
