/*--------------------------------------------------------------
# Single Project Page
--------------------------------------------------------------*/

.project-single,
.project-single__media,
.project-single__content {
    width: 100%;
}


/*--------------------------------------------------------------
# Project Dark Intro
--------------------------------------------------------------*/

/* Dark background also covers overscroll. */

html:has(body.single-ka_project) {
    background-color: var(--color-dark-bg);
}

body.single-ka_project {
    background-color: var(--color-dark-bg);
    background-image: var(--background-dark);
}

.project-single__intro {
    display: flex;
    flex-direction: column;

    min-height: 100svh;

    background: transparent;
    color: var(--color-dark-text);
}

.single-ka_project .site-header,
.project-single__media,
.project-single__header {
    background: transparent;
}

.single-ka_project .site-header,
.single-ka_project .site-brand a,
.single-ka_project .site-nav a,
.project-single__media,
.project-single__header,
.project-single__title,
.project-single__type {
    color: var(--color-dark-text);
}

.single-ka_project .site-nav a::after {
    background: var(--color-dark-text);
}

.project-single__year,
.project-single__disciplines {
    color: var(--color-dark-text-muted);
}


/*--------------------------------------------------------------
# Primary Media
--------------------------------------------------------------*/

.project-single__media-inner,
.project-single__header-inner {
    width: calc(100% - (2 * var(--page-padding)));
    max-width: min(1040px, 92svh);
    margin-inline: auto;
}

.project-single__media-inner {
    padding-top:
        clamp(var(--space-xl), 6svh, var(--space-4xl));

    padding-bottom: var(--space-2xl);
}


/* Video */

.project-single__media--video .wp-video,
.project-single__media--video video,
.project-single__media--video iframe {
    width: 100% !important;
    max-width: none;
}

.project-single__media--video video,
.project-single__media--video iframe {
    display: block;

    aspect-ratio: 16 / 9;
    height: auto;

    border: 0;
    border-radius: var(--radius-xs);
}


/* Audio */

.project-single__media--audio iframe {
    display: block;

    width: 100%;
    max-width: none;

    border: 0;
    border-radius: var(--radius-md);
}

.project-single__media--audio .wp-audio-shortcode {
    width: 100% !important;
}


/* Projects without primary media */

.project-single__intro
> .project-single__header:first-child
.project-single__header-inner {
    padding-top: var(--space-4xl);
}


/*--------------------------------------------------------------
# Project Header
--------------------------------------------------------------*/

.project-single__header-inner {
    padding-bottom:
        clamp(var(--space-3xl), 12svh, var(--space-4xl));
}

.project-single__title {
    max-width: 32ch;

    margin: 0 0 var(--space-xs);

    color: var(--color-dark-text);

    font-size: var(--font-size-h1);
    font-weight: 600;
    line-height: 1.2;
}


/*--------------------------------------------------------------
# Project Metadata
--------------------------------------------------------------*/

.project-single__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-sm);
}


/* Year */

.project-single__year {
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-small);
}


/* Type + disciplines */

.project-single__meta-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap:
        var(--space-xs)
        var(--space-lg);

    width: 100%;

    padding-block: var(--space-sm);

    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: rgba(244, 241, 235, 0.18);
}

.project-single__type {
    color: var(--color-dark-text);

    font-size: var(--font-size-lead);
    font-weight: 500;
    line-height: var(--line-height-body);
}

.project-single__disciplines {
    display: flex;
    flex-wrap: wrap;

    margin: 0 0 0 auto;
    padding: 0;

    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-body);

    list-style: none;
}

.project-single__disciplines li + li::before {
    content: "·";

    margin-inline: 0.5em;

    color: var(--color-dark-text-muted);
}


/*--------------------------------------------------------------
# Project Summary
--------------------------------------------------------------*/

.project-single__summary {
    width: 100%;

    margin-top: var(--space-xl);

    color: var(--color-dark-text-muted);
}

.project-single__summary p {
    margin: 0;

    font-size: var(--font-size-body);
    line-height: 1.5;
}


/*--------------------------------------------------------------
# Project Attribution / Rights Note
--------------------------------------------------------------*/

.project-single__attribution {
    display: grid;
    gap: 0.15rem;

    width: 100%;
    margin-top: var(--space-md);

    color: var(--color-dark-text-muted);
}

.project-single__attribution p {
    margin: 0;

    font-size: var(--font-size-small);
    line-height: 1.5;
}

.project-single__attribution-credit {
    font-weight: 500;
}

.project-single__attribution a {
    color: inherit;

    text-decoration: underline;
    text-underline-offset: 0.15em;
}


/*--------------------------------------------------------------
# Dark → Light Project Transition
--------------------------------------------------------------*/

.project-single__content {
    position: relative;
    isolation: isolate;

    color: var(--color-text);

    background-color: var(--color-bg);
    background-image: var(--background-light);

    padding-block:
        clamp(var(--space-3xl), 8vw, var(--space-4xl));

    box-shadow:
        inset 0 36px 52px -24px rgba(8, 11, 18, 0.88),
        inset 0 -36px 52px -24px rgba(8, 11, 18, 0.88);
        
}
/*
.project-single__content::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0 0 auto;

    height: 72px;

    background:
        linear-gradient(
            to bottom,
            rgba(8, 11, 18, 0.42) 0%,
            rgba(8, 11, 18, 0.30) 18%,
            rgba(8, 11, 18, 0.16) 38%,
            rgba(8, 11, 18, 0.07) 60%,
            transparent 100%
        );

    pointer-events: none;
}
*/

/*--------------------------------------------------------------
# Project Body
--------------------------------------------------------------*/

.project-body {
    width: 100%;

    gap: clamp(var(--space-2xl), 7vw, var(--space-4xl));
}


/*--------------------------------------------------------------
# Project Body Shared Typography
--------------------------------------------------------------*/

/* Remove Elementor widget margins. */

.project-body__prose .elementor-widget-heading,
.project-body__prose .elementor-widget-text-editor,
.project-body__split-item .elementor-widget-heading,
.project-body__split-item .elementor-widget-text-editor {
    margin: 0;
}


/* Headings */

.project-body__prose h2,
.project-body__split-item h2 {
    margin: 0;

    font-size: var(--font-size-h4);
    font-weight: 500;
    line-height: 1.2;
}


/* Body copy */

.project-body__prose p,
.project-body__split-item p {
    margin: 0;

    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}


/* Paragraph spacing */

.project-body__prose p + p,
.project-body__split-item p + p {
    margin-top: var(--space-sm);
}


/* Links */

.project-body__prose a,
.project-body__split-item a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}


/*--------------------------------------------------------------
# Project Image / Caption
--------------------------------------------------------------*/

/*
 * Shared behavior for containers that contain
 * an image and optional caption.
 */

.project-image.e-con {
    gap: var(--space-xs);
}

.project-image .elementor-widget-image,
.project-image .project-body__media-caption {
    width: 100%;
}

.project-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: var(--radius-xs);
}

.project-body__media-caption {
    color: var(--color-text-muted);
}

.project-body__media-caption p {
    margin: 0;

    font-size: var(--font-size-caption);
    line-height: 1.45;
}


/*--------------------------------------------------------------
# Project Body Prose
--------------------------------------------------------------*/

.project-body__prose {
    width: calc(100% - (2 * var(--page-padding)));
    max-width: var(--content-width-narrow);
    margin-inline: auto;

    gap: var(--space-sm);
}


/* Prose Offset */

.project-body__prose.project-body__prose--offset {
    margin-left: auto;

    margin-right:
        max(
            var(--page-padding),
            calc(
                (100% - var(--portfolio-content-width)) / 2
            )
        );
}


/*--------------------------------------------------------------
# Project Body Lead
--------------------------------------------------------------*/

.project-body__prose.project-body__lead {
    max-width: 860px;
}

.project-body__prose.project-body__lead p {
    font-size:
        clamp(
            var(--font-size-lead),
            2vw,
            1.5rem
        );

    line-height: 1.5;
}


/*--------------------------------------------------------------
# Project Facts
--------------------------------------------------------------*/

.project-body__facts.e-con {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: calc(100% - (2 * var(--page-padding)));
    max-width: var(--portfolio-content-width);
    margin-inline: auto;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.project-body__fact {
    gap: var(--space-xs);

    padding-block:
        clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.project-body__fact + .project-body__fact {
    padding-left: var(--space-xl);

    border-left: 1px solid var(--color-border);
}

.project-body__fact .elementor-heading-title {
    margin: 0;

    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 500;
    line-height: 1;
}

.project-body__fact p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: var(--font-size-small);
}


/*--------------------------------------------------------------
# Project Split
--------------------------------------------------------------*/

.project-body__split.e-con {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));

    width: calc(100% - (2 * var(--page-padding)));
    max-width: var(--portfolio-content-width);
    margin-inline: auto;

    align-items: center;
}

.project-body__split-item {
    min-width: 0;
}

.project-body__split-item:not(.project-image) {
    gap: var(--space-sm);
}


/* Weighted Split */

.project-body__split--weighted.e-con {
    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 2fr);

    align-items: start;
}

.project-body__split--weighted .project-image {
    align-self: end;
    align-items: flex-end;

    width: min(100%, 420px);
}


/*--------------------------------------------------------------
# Project Content Cluster
--------------------------------------------------------------*/

.project-body__cluster.e-con {
    width: 100%;

    gap:
        clamp(
            var(--space-md),
            2vw,
            var(--space-xl)
        );
}


/*--------------------------------------------------------------
# Project Supporting Media
--------------------------------------------------------------*/

/*
 * Standalone supporting media positioned on the
 * wider project grid.
 */

.project-body__supporting-media.e-con {
    width: calc(100% - (2 * var(--page-padding)));
    max-width: var(--portfolio-content-width);
    margin-inline: auto;

    align-items: flex-start;
}

.project-body__supporting-media .elementor-widget-image,
.project-body__supporting-media .project-body__media-caption {
    width: min(100%, 900px);
}


/*--------------------------------------------------------------
# Project Credits
--------------------------------------------------------------*/

.project-body__credits {
    padding-top: var(--space-xl);

    border-top: 1px solid var(--color-border);
}

.project-body__credits > .elementor-widget-heading h2 {
    color: var(--color-text-muted);

    font-size: var(--font-size-small);
    font-weight: 500;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-credits__list.e-con {
    display: grid;

    gap: var(--space-sm);
}

.project-credits__item.e-con {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;
}

.project-body__credits .project-credits__label p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.15;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-body__credits .project-credits__name p {
    margin: 0;

    color: var(--color-text);
    opacity: 0.8;

    font-size: var(--font-size-lead);
    font-weight: 500;
    line-height: 1.2;

    letter-spacing: -0.015em;
}

.project-body__credits .project-credits__name a {
    color: inherit;
}


/*--------------------------------------------------------------
# Project-Specific Overrides
--------------------------------------------------------------*/

/*
 * Keep this section empty unless a project genuinely needs
 * behavior that cannot be expressed with the shared building blocks.
 */


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 784px) {

    /* Primary Media */

    .project-single__media-inner {
        padding-block: var(--space-2xl);
    }

    .project-single__media--video video,
    .project-single__media--video iframe,
    .project-single__media--audio iframe {
        border-radius: var(--radius-sm);
    }


    /* Project Metadata */

    .project-single__disciplines {
        display: grid;
        grid-template-columns:
            max-content
            max-content;

        column-gap: var(--space-xl);
        row-gap: var(--space-xs);

        width: 100%;
        margin-left: 0;
    }

    .project-single__disciplines li + li::before {
        content: none;
    }


    /* Project Body */

    .project-body {
        gap: var(--space-3xl);
    }


    /* Prose */

    .project-body__prose.project-body__prose--offset {
        margin-inline: auto;
    }


    /* Facts */

    .project-body__facts {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-body__fact {
        padding-block: var(--space-lg);
    }

    .project-body__fact + .project-body__fact {
        padding-left: var(--space-md);
    }


    /* Split */

    .project-body__split.e-con {
        grid-template-columns: 1fr;

        gap: var(--space-xl);

        align-items: start;
    }

    .project-body__split--weighted .project-image {
        align-self: start;
        align-items: flex-start;
    }

}