/*
 * Project detail page - Figma 3378 family.
 *
 * Layout (Figma @ 1728px wide):
 *   --proj-container-max = 1468px  (1728 - 2 × 130)
 *   --proj-side-pad      = 130px gutter, fluid down to 1.25rem
 *
 * Theming:
 *   Light shell (default)            - plain white #ffffff background, dark heading
 *                                       text, Plex Sans/Serif type stack.
 *   Dark shell (`.proj--technology`) - near-black #0e0e0e background, light body,
 *                                       Plex Mono body for the tech aesthetic.
 *
 * Accent color is a per-vertical hairline rule sitting *below* every section title.
 * The small orange squares in the Figma left gutter are layout guides only - they
 * are not implemented here.
 *
 *   .proj--architecture     → --proj-accent: var(--accent-blue)
 *   .proj--urban-planning   → --proj-accent: var(--accent-green)
 *   .proj--technology       → --proj-accent: var(--accent-orange)
 */

.proj {
    --proj-bg: #ffffff;
    --proj-text-heading: var(--color-text-heading);
    --proj-text-body: var(--color-text-body);
    --proj-text-muted: var(--color-text-muted);
    --proj-text-on-pill: var(--color-text-body);
    --proj-border-pill: rgba(75, 65, 53, 0.45);
    --proj-accent: var(--accent-orange); /* overridden by .proj--<vertical> */
    --proj-rule-height: 4px;

    --proj-container-max: 1468px;
    /* ~75% of content column - paired-band main text width @ 1728px Figma */
    --proj-text-band-max: 62rem;
    --proj-side-pad: clamp(1.25rem, 7.5vw, 8.125rem);
    --proj-rail-width: clamp(15rem, 18vw, 23.5rem);
    --proj-col-gap: clamp(2rem, 6vw, 5.625rem);
    --proj-section-gap: clamp(3rem, 6vw, 7rem);

    background: var(--proj-bg);
    color: var(--proj-text-body);
    font-family: var(--font-sans);
}

/* ── Per-vertical accent (canonical token from design-tokens.css) ─────── */

.proj--architecture {
    --proj-accent: var(--accent-blue);
}

.proj--urban-planning {
    --proj-accent: var(--accent-green);
}

.proj--technology {
    --proj-accent: var(--accent-orange);
}

/* ── Dark shell for technology pages ─────────────────────────────────── */

.proj--technology {
    --proj-bg: #0e0e0e;
    --proj-text-heading: #ffffff;
    --proj-text-body: #d9d9d9;
    --proj-text-muted: #9a9a9a;
    --proj-text-on-pill: #d9d9d9;
    --proj-border-pill: rgba(255, 255, 255, 0.35);
}

.proj--technology .proj-body,
.proj--technology .proj-body p,
.proj--technology .proj-body-stream .markdown-body > p,
.proj--technology .proj-stat__label,
.proj--technology .proj-stat__desc,
.proj--technology .proj-highlights__list li,
.proj--technology .proj-compare__col,
.proj--technology .proj-figure figcaption {
    font-family: var(--font-mono);
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
    line-height: 1.7;
    letter-spacing: 0;
}

.proj--technology .proj-lead,
.proj--technology .proj-highlights__title,
.proj--technology .proj-compare__title,
.proj--technology .proj-hero__title {
    font-family: var(--font-sans);
}

.proj--technology .fig__caption,
.proj--technology .fig__link,
.proj--technology .fig__link a {
    font-family: var(--font-mono);
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
    font-style: normal;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.proj-hero__container {
    max-width: var(--proj-container-max);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--proj-side-pad) clamp(1.5rem, 3vw, 2.5rem);
}

.proj-hero__back {
    margin: 0 0 clamp(1.5rem, 2.5vw, 3.5rem);
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    line-height: 1.2;
}

.proj-hero__back a {
    color: var(--proj-text-muted);
    text-decoration: underline;
    font-weight: var(--font-weight-regular);
}

.proj-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1rem;
    align-items: start;
}

.proj-hero__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(2.25rem, 4.4vw, 4rem); /* Figma 64px */
    line-height: 1.05;
    color: var(--proj-text-heading);
    letter-spacing: -0.005em;
}

.proj-hero__period {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    line-height: 1.2;
    color: var(--proj-text-muted);
    text-align: right;
}

.proj-hero__scope {
    margin: clamp(1rem, 2vw, 2rem) 0 0;
    max-width: 64rem;
    font-size: clamp(1.1rem, 1.7vw, 2rem);
    line-height: 1.25;
    color: var(--proj-text-muted);
}

.proj-hero__pills {
    margin: clamp(1rem, 2vw, 1.875rem) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.proj-hero__pills li {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--proj-border-pill);
    color: var(--proj-text-on-pill);
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: 2px;
}

.proj-hero__media {
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

.proj-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

.proj-hero__media--inset {
    max-width: var(--proj-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--proj-side-pad);
}

.proj-hero__media--inset img {
    border-radius: 4px;
}

/* Crop hero image to 80% of its natural displayed height - top + bottom 10%
 * trimmed equally, image stays centered, never stretches. Uses an inner
 * wrapper so the height cap composes cleanly with the layout caps below. */
.proj-hero__media-frame {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 7.2;
}

.proj-hero__media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* On 4K+ viewports the hero stops growing past its 1920×1080 reference size
 * (no stretching beyond ~1920px wide); image stays centered in the frame. */
@media (min-width: 1920px) {
    .proj-hero__media,
    .proj-hero__media--inset {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }

    .proj-hero__media-frame {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Section primitives ────────────────────────────────────────────────── */

.proj-section {
    padding-top: var(--proj-section-gap);
    padding-bottom: var(--proj-section-gap);
}

.proj-container {
    max-width: var(--proj-container-max);
    margin: 0 auto;
    padding: 0 var(--proj-side-pad);
}

/* Accent hairline rule that sits below each section title. */
.proj-section__title-with-rule {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.proj-section__title-with-rule::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--proj-rule-height);
    background: var(--proj-accent);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

/* ── Story (lead + intro + stats rail + body) ──────────────────────────── */

.proj-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--proj-rail-width);
    column-gap: var(--proj-col-gap);
    row-gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

.proj-story__grid--no-rail {
    grid-template-columns: minmax(0, 1fr);
}

/* Lead + intro stack above the media / stats row. */
.proj-story__preface {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
    min-width: 0;
}

/* Story image (+ optional body copy) shares a row with the stats rail. */
.proj-story__media {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
    min-width: 0;
}

.proj-story__grid:has(.proj-story__preface) .proj-story__media {
    grid-row: 2;
}

.proj-story__grid:not(:has(.proj-story__preface)) .proj-story__media {
    grid-row: 1;
}

.proj-story__grid:not(.proj-story__grid--no-rail) .proj-story__rail {
    grid-column: 2;
    align-self: start;
}

.proj-story__grid:has(.proj-story__preface) .proj-story__rail {
    grid-row: 2;
}

.proj-story__grid:not(:has(.proj-story__preface)) .proj-story__rail {
    grid-row: 1;
}

/* Stats with no story image - rail tops align with preface instead. */
.proj-story__grid:has(.proj-story__preface):not(:has(.proj-story__media)) .proj-story__rail {
    grid-row: 1;
}

.proj-story__main {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
    min-width: 0;
}

.proj-story__grid--no-rail:has(.proj-story__preface) .proj-story__main {
    grid-row: 2;
}

.proj-lead {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 3rem);
    line-height: 1.3;
    color: var(--proj-text-heading);
}

.proj-body,
.proj-body p {
    font-size: clamp(1.1rem, 1.6vw, 1.75rem);
    line-height: 1.6;
    color: var(--proj-text-body);
    margin: 0 0 1rem;
}

.proj-body > *:last-child {
    margin-bottom: 0;
}

.proj-body strong,
.proj-body b {
    color: var(--proj-text-heading);
    font-weight: var(--font-weight-semibold);
}

.proj-figure {
    margin: 0;
}

.proj-figure img,
.proj-figure video {
    display: block;
    width: 100%;
    height: auto;
}

.proj-figure figcaption {
    margin-top: 0.75rem;
    font-size: clamp(0.875rem, 1.05vw, 1.125rem);
    color: var(--proj-text-muted);
    line-height: 1.5;
}

/* Right rail */

.proj-story__rail {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 3vw, 3.5rem);
}

.proj-stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.proj-stat__value {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    line-height: 1.2;
    color: var(--proj-text-heading);
}

.proj-stat__label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    line-height: 1.4;
    color: var(--proj-text-body);
}

.proj-stat__desc {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 1.05vw, 1.125rem);
    line-height: 1.5;
    color: var(--proj-text-muted);
}

/* ── Highlights band ───────────────────────────────────────────────────── */

.proj-section--highlights .proj-container {
    max-width: var(--proj-container-max);
}

.proj-highlights__title {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    max-width: none;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.75rem, 3vw, 3rem); /* Figma section heading 48px */
    line-height: 1.2;
    color: var(--proj-text-heading);
}

.proj-highlights__title::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--proj-rule-height);
    background: var(--proj-accent);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.proj-highlights__list,
.proj-highlights__body ul {
    list-style: disc;
    padding-left: 2.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-width: none;
}

.proj-highlights__list li,
.proj-highlights__body li,
.proj-highlights__body > p {
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
    max-width: none;
}

.proj-highlights__body > p {
    margin: 0 0 1em;
}

.proj-highlights__body > p:last-child {
    margin-bottom: 0;
}

.proj-highlights__list li strong,
.proj-highlights__list li b,
.proj-highlights__body li strong,
.proj-highlights__body li b,
.proj-highlights__body p strong,
.proj-highlights__body p b {
    color: var(--proj-text-heading);
    font-weight: var(--font-weight-semibold);
}

/* Highlights/Context bands upgraded by arpm-project-video.js when paired with a portrait :::video. */
.proj-section--highlights .proj-paired-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--proj-col-gap);
    align-items: start;
    max-width: var(--proj-container-max);
}

/* Title row 1 col 1; body + sidebar media share row 2 so video tops align below title rule. */
.proj-paired-band .proj-paired-band__main {
    display: contents;
}

.proj-paired-band__main > .proj-highlights__title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.proj-paired-band__main > .proj-highlights__list,
.proj-paired-band__main > .proj-highlights__body {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.proj-paired-band__media {
    min-width: 0;
    align-self: start;
    grid-column: 2;
    grid-row: 2;
}

.proj-paired-band__media .vid-block {
    display: block;
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
    grid-template-columns: none;
}

.proj-paired-band__media .vid-block .vid {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    max-height: min(75vh, 40rem);
    object-fit: contain;
}

/* Titled prose bands (Approach / Solution on tech pages) - paragraphs only, no list margin */
.proj-section--prose .proj-prose {
    max-width: none;
}

.proj-prose p {
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
    margin: 0 0 1.25em;
}

.proj-prose p:last-child {
    margin-bottom: 0;
}

.proj-prose ul,
.proj-prose ol {
    margin: 0 0 1.25em;
    padding-left: 1.5rem;
}

.proj-prose li {
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
    margin-bottom: 0.5em;
}

.proj--technology .proj-prose p,
.proj--technology .proj-prose li {
    font-family: var(--font-mono);
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
    line-height: 1.7;
}

/* Untitled :::prose in the body stream - container-width copy with section padding. */
.proj-body-stream .markdown-body > .proj-section--prose-body {
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--proj-container-max);
    box-sizing: border-box;
}

.proj-body-stream .markdown-body > .proj-section--prose-body .proj-container {
    max-width: none;
    margin: 0 auto;
    padding-left: var(--proj-side-pad);
    padding-right: var(--proj-side-pad);
    box-sizing: border-box;
}

/* Solo prose band - full content column; 75% when paired in a vid-inline-row. */
.proj-body-stream .markdown-body > .proj-section--prose-body .proj-prose {
    max-width: none;
}

.vid-inline-row__main > .proj-section--prose-body .proj-prose,
.vid-inline-row__main > .proj-section--prose.proj-section--prose-body .proj-prose {
    max-width: none;
}

.proj-body-stream .markdown-body > .md-carousel + .proj-section--prose-body,
.proj-body-stream .markdown-body > .proj-section--prose-body:first-child {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.proj-body-stream .markdown-body > .proj-section--prose-body + .proj-section--prose-body {
    padding-top: clamp(1rem, 2vw, 1.5rem);
}

.proj-body-stream .markdown-body > .proj-section--prose-body:last-of-type {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ── Compare (Before / After two-column band) ─────────────────────────── */

.proj-compare {
    padding-top: var(--proj-section-gap);
    padding-bottom: var(--proj-section-gap);
}

.proj-compare__title {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    max-width: none;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1.2;
    color: var(--proj-text-heading);
}

.proj-compare__title::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--proj-rule-height);
    background: var(--proj-accent);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.proj-compare__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: clamp(2rem, 4vw, 3rem);
}

.proj-compare__heading {
    margin: 0 0 0.75rem;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.3;
    color: var(--proj-text-heading);
}

.proj-compare__col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

.proj-compare__col ul {
    padding-left: 1.5rem;
    margin: 0;
}

.proj-compare__col li + li {
    margin-top: 0.5em;
}

.proj-compare__col img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0.25rem;
}

.proj-compare__col p + p {
    margin-top: 0.75rem;
}

@media (max-width: 760px) {
    .proj-compare__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Body markdown stream (carousels + custom containers + loose prose) ── *
 * MarkdownBodyView wraps HTML in <article class="markdown-body">; override the
 * global 72ch cap from project-content.css so carousels and section bands can
 * use the full project container width.
 */

.proj-body-stream {
    display: flex;
    flex-direction: column;
}

.proj-body-stream .markdown-body {
    max-width: none;
    width: 100%;
    margin: 0;
}

.proj-body-stream .markdown-body > p,
.proj-body-stream .markdown-body > ul,
.proj-body-stream .markdown-body > ol,
.proj-body-stream .markdown-body > blockquote,
.proj-body-stream .markdown-body > h2,
.proj-body-stream .markdown-body > h3 {
    max-width: var(--proj-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--proj-side-pad);
    padding-right: var(--proj-side-pad);
    box-sizing: border-box;
}

.proj-body-stream .markdown-body > p {
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
    margin-top: 0;
    margin-bottom: 1.25em;
}

.proj-body-stream .markdown-body > h2,
.proj-body-stream .markdown-body > h3 {
    font-family: var(--font-sans);
    color: var(--proj-text-heading);
}

/* Custom bands (highlights, compare, titled prose) span the content shell. */
.proj-body-stream .markdown-body > .proj-section:not(.proj-section--prose-body) {
    width: 100%;
    max-width: none;
}

.proj-body-stream .markdown-body > .md-carousel {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Standalone `:::video` blocks - layout set by arpm-project-video.js from aspect ratio. */
.proj-body-stream .markdown-body > .vid-block,
.proj-body-stream .markdown-body > .vid-inline-row {
    width: 100%;
    max-width: var(--proj-container-max);
    margin: clamp(2rem, 4vw, 3rem) auto;
    padding: 0 var(--proj-side-pad);
    box-sizing: border-box;
}

.vid-block .vid {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(85vh, 56rem);
    background: #000;
}

/* Landscape: centered, full content column width. */
.vid-block--landscape {
    display: flex;
    justify-content: center;
}

.vid-block--landscape .vid {
    max-width: 100%;
}

/* Portrait alone (no adjacent prose): right-hand 25% column. */
.vid-block--portrait {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    column-gap: var(--proj-col-gap);
    align-items: start;
}

.vid-block--portrait .vid {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-height: min(75vh, 40rem);
    object-fit: contain;
}

/* Paired with prose - row grid owns columns; reset solo portrait grid. */
.vid-inline-row > .vid-block--portrait {
    display: block;
}

.vid-inline-row > .vid-block--portrait .vid {
    grid-column: auto;
    grid-row: auto;
}

/* Portrait + adjacent prose: shared 75/25 row (built by arpm-project-video.js). */
.vid-inline-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    column-gap: var(--proj-col-gap);
    align-items: start;
}

.vid-inline-row__main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    min-width: 0;
}

.vid-inline-row__main > :first-child {
    margin-top: 0;
}

.vid-inline-row__main > :last-child {
    margin-bottom: 0;
}

/* Prose moved into the row - drop duplicate container padding from body rules. */
.vid-inline-row__main > p,
.vid-inline-row__main > ul,
.vid-inline-row__main > ol,
.vid-inline-row__main > blockquote,
.vid-inline-row__main > h2,
.vid-inline-row__main > h3 {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.vid-inline-row__main > p {
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

.vid-inline-row .vid-block {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
    align-self: start;
}

.vid-inline-row .vid-block .vid {
    max-height: min(75vh, 40rem);
    object-fit: contain;
}

/* Sidebar :::figure paired with :::prose (arpm-project-figure.js) */
.vid-inline-row .fig--sidebar {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.vid-inline-row .fig--sidebar img {
    width: 100%;
    max-width: none;
}

.vid-inline-row .fig--sidebar .fig__caption,
.vid-inline-row .fig--sidebar .fig__link {
    width: 100%;
    max-width: none;
}

.vid-inline-row__main > .proj-section--prose {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.vid-inline-row__main > .proj-section--prose .proj-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Titled :::prose + portrait video / sidebar figure - media tops align below title rule. */
.vid-inline-row:has(.proj-highlights__title) {
    grid-template-rows: auto auto;
}

.vid-inline-row:has(.proj-highlights__title) .vid-inline-row__main {
    display: contents;
}

.vid-inline-row:has(.proj-highlights__title) .vid-inline-row__main > .proj-section--prose {
    display: contents;
}

.vid-inline-row:has(.proj-highlights__title) .vid-inline-row__main > .proj-section--prose .proj-container {
    display: contents;
}

.vid-inline-row:has(.proj-highlights__title) .proj-highlights__title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.vid-inline-row:has(.proj-highlights__title) .proj-prose {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.vid-inline-row:has(.proj-highlights__title) > .vid-block,
.vid-inline-row:has(.proj-highlights__title) > .fig--sidebar {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

/* Minimal native controls - play/pause + seek bar only (WebKit). */
.vid-block .vid::-webkit-media-controls-volume-slider,
.vid-block .vid::-webkit-media-controls-mute-button,
.vid-block .vid::-webkit-media-controls-fullscreen-button,
.vid-block .vid::-webkit-media-controls-playback-rate-button,
.vid-block .vid::-webkit-media-controls-picture-in-picture-button,
.vid-block .vid::-webkit-media-controls-overflow-button {
    display: none !important;
}

@media (max-width: 960px) {
    .vid-block--portrait {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .vid-block--portrait .vid {
        grid-column: 1;
        max-width: min(100%, 18rem);
    }

    .vid-inline-row > .vid-block--portrait {
        display: block;
        justify-self: center;
    }

    .vid-inline-row > .vid-block--portrait .vid {
        max-width: min(100%, 18rem);
    }

    .vid-inline-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }

    .vid-inline-row__main {
        grid-column: 1;
        grid-row: 2;
    }

    .vid-inline-row .vid-block {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        max-width: min(100%, 18rem);
    }

    .vid-inline-row:has(.proj-highlights__title) .proj-highlights__title,
    .vid-inline-row:has(.proj-highlights__title) .proj-prose {
        grid-column: 1;
        grid-row: auto;
    }

    .vid-inline-row:has(.proj-highlights__title) > .vid-block,
    .vid-inline-row:has(.proj-highlights__title) > .fig--sidebar {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        max-width: min(100%, 18rem);
    }
}

/* ── Footer image ──────────────────────────────────────────────────────── */

.proj-footer-image {
    margin: 0;
}

.proj-footer-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Project endorsements (compact cards) ───────────────────────────────── */

.proj-endorsements {
    padding-top: var(--proj-section-gap);
    padding-bottom: var(--proj-section-gap);
}

.proj-endorsements__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 3rem);
}

.proj-endorsements__title {
    margin: 0;
    width: 100%;
    max-width: none;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: var(--line-height-ui);
    color: var(--proj-text-heading);
    text-align: left;
}

.proj-endorsements__title::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--proj-rule-height);
    background: var(--proj-accent);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.proj-endorsements__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.proj-endorsements__list > li {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ── CTA ───────────────────────────────────────────────────────────────── */

.proj-section--cta {
    text-align: center;
}

.proj-section--cta .proj-cta-btn {
    min-width: 14.125rem;
}

/* Body `:::cta` blocks - same orange button as YAML footer CTA. */
.proj-body-stream .cta-wrap {
    margin: clamp(2rem, 4vw, 3rem) auto;
    max-width: var(--proj-container-max);
    padding: 0 var(--proj-side-pad);
    box-sizing: border-box;
    text-align: center;
}

.proj-body-stream .cta-wrap .arpm-btn,
.proj-body-stream .cta-wrap a.arpm-btn {
    min-width: 14.125rem;
}

/* ── Responsive: collapse rail under ~960px ───────────────────────────── */

@media (max-width: 960px) {
    .proj-hero__heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .proj-hero__period {
        text-align: left;
    }

    /* Flex stack - avoids implicit grid col 2 squeezing preface/media when rail is present. */
    .proj-story__grid {
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 4vw, 3rem);
    }

    .proj-story__preface,
    .proj-story__media,
    .proj-story__main,
    .proj-story__grid:not(.proj-story__grid--no-rail) .proj-story__rail {
        width: 100%;
        min-width: 0;
    }

    .proj-story__rail {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 0;
    }

    .proj-stat {
        flex: 1 1 12rem;
    }

    .proj-section--highlights .proj-paired-band__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 1.5rem;
    }

    .proj-paired-band__main > .proj-highlights__title,
    .proj-paired-band__main > .proj-highlights__list,
    .proj-paired-band__main > .proj-highlights__body {
        grid-column: 1;
        grid-row: auto;
    }

    .proj-paired-band__media {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        max-width: min(100%, 18rem);
    }
}

/* ── Custom markdown containers (:::figure, :::section, :::callout, …) ─── *
 * Align with project content margins (--proj-container-max + --proj-side-pad).
 */

.proj-body-stream .markdown-body .fig,
.proj-body-stream .markdown-body > .sec,
.proj-body-stream .markdown-body > .col-right,
.proj-body-stream .markdown-body > .callout,
.proj-body-stream .markdown-body > .embed,
.proj-body-stream .markdown-body > .testimonial,
.proj-body-stream .markdown-body > .benefits,
.proj-body-stream .markdown-body > .process-steps,
.proj-body-stream .markdown-body > .lead-serif,
.proj-body-stream .markdown-body > .stats,
.proj-body-stream .markdown-body > .stat {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--proj-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--proj-side-pad);
    padding-right: var(--proj-side-pad);
}

/* ── Figures (:::figure layout="wide" | "sidebar") ─────────────────────── */

.proj-body-stream .markdown-body .fig {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.proj-body-stream .markdown-body .fig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.proj-body-stream .markdown-body .fig__caption {
    margin: 0.75rem 0 0;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
    line-height: 1.5;
    color: var(--proj-text-muted);
}

.proj-body-stream .markdown-body .fig__link {
    margin: 0.5rem 0 0;
}

.proj-body-stream .markdown-body .fig__link a {
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    color: var(--proj-text-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.proj-body-stream .markdown-body .fig__link a:hover {
    color: var(--proj-text-heading);
}

/* Wide / default - full content column width */
.proj-body-stream .markdown-body .fig--wide,
.proj-body-stream .markdown-body .fig--default {
    display: block;
}

/* Sidebar - solo right 25% column when not paired with prose (paired rows use .vid-inline-row) */
.proj-body-stream .markdown-body > .fig--sidebar {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    column-gap: var(--proj-col-gap);
    align-items: start;
}

.proj-body-stream .markdown-body > .fig--sidebar img,
.proj-body-stream .markdown-body > .fig--sidebar .fig__caption,
.proj-body-stream .markdown-body > .fig--sidebar .fig__link {
    grid-column: 2;
    width: 100%;
    max-width: none;
}

.proj-body-stream .markdown-body > .fig--sidebar .fig__caption {
    margin-top: 0.75rem;
}

@media (max-width: 960px) {
    .proj-body-stream .markdown-body > .fig--sidebar {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .proj-body-stream .markdown-body > .fig--sidebar img,
    .proj-body-stream .markdown-body > .fig--sidebar .fig__caption,
    .proj-body-stream .markdown-body > .fig--sidebar .fig__link {
        grid-column: 1;
        max-width: min(100%, 18rem);
        justify-self: center;
    }

    .vid-inline-row .fig--sidebar {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        max-width: min(100%, 18rem);
    }

    .vid-inline-row.proj-inline-row--figure .vid-inline-row__main {
        grid-column: 1;
        grid-row: 2;
    }
}

/* ── Generic :::section bands ─────────────────────────────────────────── */

.proj-body-stream .markdown-body > .sec {
    margin-top: var(--proj-section-gap);
    margin-bottom: 0;
}

.proj-body-stream .markdown-body .sec__title {
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    max-width: none;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1.2;
    color: var(--proj-text-heading);
}

.proj-body-stream .markdown-body .sec__title::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--proj-rule-height);
    background: var(--proj-accent);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.proj-body-stream .markdown-body .sec p,
.proj-body-stream .markdown-body .sec ul,
.proj-body-stream .markdown-body .sec ol {
    max-width: none;
    font-size: clamp(1.05rem, 1.5vw, 1.625rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body .sec ul,
.proj-body-stream .markdown-body .sec ol {
    padding-left: 1.5rem;
}

/* ── column-right, callout, embed ─────────────────────────────────────── */

.proj-body-stream .markdown-body > .col-right {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.proj-body-stream .markdown-body > .col-right > * {
    width: min(25%, 22.5rem);
    max-width: 100%;
    margin: 0;
}

.proj-body-stream .markdown-body > .col-right .cta-wrap {
    padding: 0;
    max-width: none;
    text-align: left;
}

.proj-body-stream .markdown-body > .callout {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.5rem);
    border-left: 4px solid var(--proj-accent);
    background: rgba(75, 65, 53, 0.06);
    max-width: var(--proj-container-max);
}

.proj--technology .proj-body-stream .markdown-body > .callout {
    background: rgba(255, 255, 255, 0.06);
}

.proj-body-stream .markdown-body > .callout.callout--warning {
    border-left-color: var(--accent-orange);
}

.proj-body-stream .markdown-body > .callout p {
    margin: 0 0 0.75em;
    max-width: none;
    padding: 0;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body > .callout p:last-child {
    margin-bottom: 0;
}

.proj-body-stream .markdown-body > .embed {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.proj-body-stream .markdown-body > .embed.embed--youtube {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: min(var(--proj-container-max), 56rem);
}

.proj-body-stream .markdown-body > .embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-sm);
}

/* ── lead, stats, testimonial, benefits, steps (tag-reference / services) */

.proj-body-stream .markdown-body > .lead-serif {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.proj-body-stream .markdown-body > .lead-serif p {
    margin: 0;
    max-width: none;
    padding: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 3rem);
    line-height: 1.3;
    color: var(--proj-text-heading);
}

.proj-body-stream .markdown-body > .stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.proj-body-stream .markdown-body > .stat,
.proj-body-stream .markdown-body .stats .stat {
    padding-left: 0;
    padding-right: 0;
    max-width: min(25%, 18rem);
    margin-left: auto;
    margin-right: var(--proj-side-pad);
}

.proj-body-stream .markdown-body .stat__value {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    color: var(--proj-text-heading);
}

.proj-body-stream .markdown-body .stat__label {
    margin: 0.35rem 0 0;
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    line-height: 1.45;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body > .testimonial {
    margin: clamp(2rem, 4vw, 3rem) auto;
    padding: 0 var(--proj-side-pad);
    max-width: var(--proj-container-max);
    border: none;
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
}

.proj-body-stream .markdown-body .testimonial__photo {
    width: 100%;
    max-width: 9rem;
    height: auto;
    aspect-ratio: 145 / 186;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-sm);
}

.proj-body-stream .markdown-body .testimonial__quote {
    margin: 0;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.375rem);
    line-height: 1.65;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body .testimonial__name,
.proj-body-stream .markdown-body .testimonial__role {
    margin: 0.25rem 0 0;
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.5;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body > .benefits {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    max-width: none;
}

.proj-body-stream .markdown-body .benefit__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.3;
    color: var(--proj-text-heading);
}

.proj-body-stream .markdown-body .benefit__body p {
    margin: 0 0 0.75em;
    padding: 0;
    max-width: none;
    font-size: clamp(1.05rem, 1.5vw, 1.5rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

.proj-body-stream .markdown-body > .process-steps {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    list-style: none;
    padding-left: var(--proj-side-pad);
    padding-right: var(--proj-side-pad);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: none;
}

.proj-body-stream .markdown-body .process-step {
    display: grid;
    grid-template-columns: clamp(3rem, 6vw, 5rem) minmax(0, 1fr);
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.proj-body-stream .markdown-body .process-step__num {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    color: rgba(75, 65, 53, 0.45);
    text-align: center;
}

.proj--technology .proj-body-stream .markdown-body .process-step__num {
    color: rgba(255, 157, 40, 0.65);
}

.proj-body-stream .markdown-body .process-step--highlight .process-step__num {
    color: var(--proj-accent);
}

.proj-body-stream .markdown-body .process-step__card {
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.5rem);
    background: #f7f7f7;
    border-radius: var(--radius-sm);
}

.proj--technology .proj-body-stream .markdown-body .process-step__card {
    background: rgba(255, 255, 255, 0.06);
}

.proj-body-stream .markdown-body .process-step--highlight .process-step__card {
    background: #fff6eb;
}

.proj--technology .proj-body-stream .markdown-body .process-step--highlight .process-step__card {
    background: rgba(255, 157, 40, 0.12);
}

.proj-body-stream .markdown-body .process-step__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    color: var(--proj-text-heading);
}

.proj-body-stream .markdown-body .process-step__body p {
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.6;
    color: var(--proj-text-body);
}

@media (max-width: 960px) {
    .proj-body-stream .markdown-body > .col-right,
    .proj-body-stream .markdown-body > .col-right > * {
        width: 100%;
        max-width: 100%;
        align-items: stretch;
    }

    .proj-body-stream .markdown-body > .stat,
    .proj-body-stream .markdown-body .stats .stat {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .proj-body-stream .markdown-body > .testimonial {
        grid-template-columns: minmax(0, 1fr);
    }

    .proj-body-stream .markdown-body .testimonial__photo {
        max-width: 7rem;
    }
}

/* ── Carousel (custom :::carousel markdown tag) ───────────────────────── *
 * Full content width (1468px container), centered; one slide fills the track.
 * Overlay chevrons sit on the gutter edges. Video autoplay: arpm-carousel.js.
 */

.proj-body-stream .md-carousel,
.proj .md-carousel {
    position: relative;
    width: 100%;
    max-width: var(--proj-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--proj-side-pad);
    box-sizing: border-box;
    outline: none;
}

.md-carousel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.md-carousel__track::-webkit-scrollbar {
    display: none;
}

.md-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.md-carousel__slide img,
.md-carousel__slide video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: transparent;
}

/* Tidy native video controls - match old project-media.razor.css. */
.md-carousel__slide video::-webkit-media-controls-volume-slider,
.md-carousel__slide video::-webkit-media-controls-mute-button,
.md-carousel__slide video::-webkit-media-controls-fullscreen-button,
.md-carousel__slide video::-webkit-media-controls-playback-rate-button,
.md-carousel__slide video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

.md-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--proj-bg);
    border: 1px solid var(--proj-border-pill);
    border-radius: 0;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    opacity: 0.9;
    padding: 0;
}

.md-carousel__btn:hover {
    background: var(--proj-text-heading);
    opacity: 1;
}

.md-carousel__btn--prev {
    left: calc(var(--proj-side-pad) - 1.25rem);
}

.md-carousel__btn--next {
    right: calc(var(--proj-side-pad) - 1.25rem);
}

.md-carousel__chev {
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 2px solid var(--proj-text-heading);
    border-right: 2px solid var(--proj-text-heading);
    transition: border-color 120ms ease;
}

.md-carousel__btn--prev .md-carousel__chev {
    transform: rotate(-135deg);
    margin-left: 0.125rem;
}

.md-carousel__btn--next .md-carousel__chev {
    transform: rotate(45deg);
    margin-right: 0.125rem;
}

.md-carousel__btn:hover .md-carousel__chev {
    border-color: var(--proj-bg);
}

.md-carousel__btn[hidden] {
    display: none;
}

@media (max-width: 960px) {
    .md-carousel__btn {
        width: 2rem;
        height: 2rem;
    }

    .md-carousel__btn--prev {
        left: 0.5rem;
    }

    .md-carousel__btn--next {
        right: 0.5rem;
    }
}