/**
 * PHASE V2.2 Homepage composition layer.
 *
 * Global tokens, primitives, Chrome, interaction semantics, and breakpoints
 * remain owned by the closed V2.1 Global System family.
 */

.home__section {
    position: relative;
    overflow: clip;
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-subtle);
}

.home-hero__layout,
.home-closing__content,
.home-project-preview__entry-layout {
    align-items: stretch;
}

.home-hero__title,
.home-project-preview__entry-title,
.home-method__stage-title,
.home-practice__principle-title,
.home-closing__narrative {
    overflow-wrap: anywhere;
}

.home-hero__line {
    display: block;
}

.home-hero__content {
    align-self: end;
}

.home-hero__disclosure {
    max-inline-size: var(--phase-measure-supporting);
    padding-inline-start: var(--space-disclosure);
    border-inline-start:
        var(--state-boundary-width)
        solid
        var(--border-strong);
}

.home-hero__system {
    align-content: space-between;
    min-inline-size: 0;
}

.home-hero__system-register,
.home-project-preview__entry-register,
.home-project-preview__material-register,
.home-method__stage-register,
.home-practice__principle-register {
    justify-content: space-between;
}

.home-hero__system-title,
.home-hero__system-state {
    margin-block: 0;
}

.home-hero__system-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.home-hero__system-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-component-md);
    align-items: baseline;
    padding-block: var(--space-stack-md);
    border-block-end:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.home__section--project-preview {
    color: var(--text-inverse);
    background-color: var(--surface-dark);
}

.home-project-preview__header {
    max-inline-size: var(--container-content);
}

.home-project-preview__registry,
.home-method__stages,
.home-practice__principles,
.home-closing__fit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-project-preview__registry {
    row-gap: var(--section-space-sm);
}

.home-project-preview__item,
.home-project-preview__entry,
.home-project-preview__entry-layout,
.home-project-preview__copy,
.home-project-preview__material {
    min-inline-size: 0;
}

.home-project-preview__entry {
    color: var(--text-primary);
    background-color: var(--surface-secondary);
    border-color: var(--border-inverse);
}

.home-project-preview__entry:focus-within {
    border-inline-start-width: var(--state-boundary-width);
    border-inline-start-color: var(--border-signal);
}

.home-project-preview__copy {
    align-self: center;
}

.home-project-preview__question,
.home-project-preview__truth,
.home-project-preview__index-route p {
    margin-block-end: 0;
}

.home-project-preview__question {
    padding-block: var(--space-stack-md);
    border-block:
        var(--border-width-1)
        solid
        var(--border-subtle);
}

.home-project-preview__metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-project-preview__status {
    align-items: flex-start;
}

.home-project-preview__entry-footer {
    margin-block-start: auto;
}

.home-project-preview__material {
    align-content: space-between;
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    overflow: clip;
}

.home-project-preview__material--flux {
    color: var(--text-primary);
    background-color: var(--surface-signal-transition);
    border-color: var(--surface-transparent);
}

.home-project-preview__material-mark {
    justify-self: center;
    margin-block: 0;
    text-align: center;
}

.home-project-preview__material-register {
    align-items: baseline;
}

.home-project-preview__index-route {
    align-items: end;
    padding-block-start: var(--space-component-lg);
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.home-project-preview__index-route a {
    color: inherit;
}

.home-method__header,
.home-practice__header {
    max-inline-size: var(--container-content);
}

.home-method__stages {
    row-gap: var(--grid-gap);
}

.home-method__stage-item,
.home-method__stage,
.home-method__stage-transition,
.home-method__route-panel,
.home-method__diagram-state {
    min-inline-size: 0;
}

.home-method__stage {
    block-size: 100%;
    border-block-start-width: var(--state-boundary-width);
    border-block-start-color: var(--border-strong);
}

.home-method__stage-register {
    align-items: flex-start;
}

.home-method__stage-ordinal {
    margin-block: 0;
    color: var(--text-secondary);
}

.home-method__stage-summary,
.home-method__stage-title {
    margin-block-end: 0;
}

.home-method__stage-transition {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block-start: var(--space-component-md);
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-subtle);
}

.home-method__route-panel {
    align-items: end;
}

.home-method__route-panel a {
    color: inherit;
}

.home-method__diagram-state,
.home-closing__route-state {
    display: grid;
    gap: var(--space-stack-sm);
    padding: var(--space-disclosure);
    border:
        var(--border-width-1)
        solid
        var(--border-inverse);
    border-radius: var(--phase-radius-surface);
}

.home__section--practice {
    background-color: var(--surface-secondary);
}

.home-practice__principles {
    row-gap: var(--grid-gap);
}

.home-practice__principle-item,
.home-practice__principle,
.home-practice__principle-title,
.home-practice__principle-term {
    min-inline-size: 0;
}

.home-practice__principle {
    block-size: 100%;
    border-inline-start-width: var(--state-boundary-width);
}

.home-practice__principle-register {
    align-items: flex-start;
}

.home-practice__principle-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-stack-xs);
    align-items: baseline;
    margin-block: 0;
}

.home-practice__principle-term:last-child {
    text-align: start;
}

.home-practice__principle-divider {
    display: none;
    color: var(--text-secondary);
}

.home-practice__principle-summary,
.home-practice__disclosure-route,
.home-practice__media-state {
    margin-block-end: 0;
}

.home-practice__route-panel {
    align-items: end;
    padding-block-start: var(--space-component-lg);
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-strong);
}

.home__section--closing {
    color: var(--text-inverse);
    background-color: var(--surface-dark);
    border-block-start-color: var(--border-inverse);
}

.home-closing__content {
    align-items: start;
}

.home-closing__fit-list {
    display: grid;
    gap: 0;
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.home-closing__fit-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-component-md);
    padding-block: var(--space-stack-md);
    border-block-end:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.home-closing__conversion {
    min-inline-size: 0;
}

.home-closing__actions {
    align-items: stretch;
}

.home-closing__actions > * {
    flex-grow: 1;
}

.home-closing__actions .button--secondary {
    color: var(--text-inverse);
    border-color: var(--border-inverse);
}

.home-closing__availability {
    margin-block-end: 0;
}

@media (hover: hover) and (pointer: fine) {
    .home-project-preview__entry:hover {
        border-color: var(--border-signal);
    }

    .home-project-preview__entry:hover
    .home-project-preview__material-mark {
        text-decoration-line: underline;
        text-decoration-style: double;
        text-decoration-thickness: var(--border-width-1);
        text-underline-offset: var(--space-link-underline-offset);
    }
}

@media (min-width: 48rem) {
    .home-hero__system {
        align-self: end;
    }

    .home-project-preview__metadata {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-method__stage-item:nth-child(2),
    .home-method__stage-item:nth-child(4),
    .home-practice__principle-item:nth-child(2),
    .home-practice__principle-item:nth-child(4) {
        margin-block-start: var(--space-component-lg);
    }
}

@media (min-width: 75rem) {
    .home-project-preview__entry-layout > :first-child,
    .home-project-preview__entry-layout > :last-child {
        grid-row: 1;
    }

    .home-project-preview__material {
        aspect-ratio: auto;
        block-size: 100%;
    }

    .home-project-preview__item--onyx-protocol {
        padding-inline: var(--space-component-lg);
    }

    .home-practice__principle-title {
        grid-template-columns:
            minmax(min-content, max-content)
            auto
            minmax(0, 1fr);
        gap: var(--space-component-sm);
    }

    .home-practice__principle-term:last-child {
        text-align: end;
    }

    .home-practice__principle-term {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .home-practice__principle-divider {
        display: inline;
    }
}

@media (forced-colors: active) {
    .home-project-preview__material,
    .home__section--project-preview,
    .home__section--closing,
    .home-hero__system {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
    }

    .home-project-preview__entry:focus-within {
        outline: var(--border-width-focus) solid Highlight;
        outline-offset: var(--focus-offset);
    }
}

@media print {
    .home__section--project-preview,
    .home__section--closing,
    .home-hero__system,
    .home-method__route-panel,
    .home-project-preview__material {
        color: var(--text-primary);
        background: transparent;
        border-color: var(--border-strong);
    }

    .home-project-preview__material {
        aspect-ratio: auto;
        min-block-size: 0;
    }
}