/*
=====================================================
AETHER MENU
=====================================================

Global archive navigation layer.

This file owns Menu-only layout, collection taxonomy,
and responsive geometry. Shared screen, content,
button, chrome, and motion rules live elsewhere.
=====================================================
*/


.aether-menu {

    z-index:
        80;

    color:
        #f1f2f4;

    --aether-ui-signal-rgb:
        200, 204, 211;

}


.aether-menu[hidden] {

    display:
        none !important;

}


.aether-menu-shell {

    z-index:
        1;

    inset:

        clamp(
            22px,
            4vh,
            54px
        )

        clamp(
            24px,
            4vw,
            70px
        );

    display:
        grid;

    grid-template-rows:
        auto 1fr auto;

    gap:

        clamp(
            18px,
            2.8vh,
            30px
        );

    padding:
        0;

}


.aether-menu-header {

    display:
        grid;

    height:
        var(--aether-perception-band-height);

    min-height:
        var(--aether-perception-band-height);

    box-sizing:
        border-box;

    align-items:
        end;

    grid-template-columns:

        minmax(
            0,
            1fr
        )

        auto;

    gap:
        24px;

    padding-bottom:
        14px;

}




.aether-menu-footer-left,
.aether-menu-footer-right {

    display:
        flex;

    gap:
        24px;

    opacity:
        0.58;

}


.aether-menu-control-key {

    color:
        var(
            --aether-ui-bright,
            #f1f2f4
        );

}


.aether-menu-kicker,
.aether-menu-panel-kicker,
.aether-menu-index-label {

    font-size:
        9px;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        var(
            --aether-ui-accent,
            #c8ccd3
        );

    opacity:
        0.62;

}


.aether-menu-title {

    margin:
        5px 0 0;

    font-size:
        12px;

    font-weight:
        400;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;

}


.aether-menu-close,
.aether-menu-return,
.aether-menu-index-item,
.aether-menu-floor-item {

    appearance:
        none;

    -webkit-appearance:
        none;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;

}


.aether-menu-close {

    padding:
        0;

    font-size:
        9px;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    opacity:
        0.55;

}


.aether-menu-close:hover,
.aether-menu-return:hover {

    opacity:
        1;

}


.aether-menu-return {

    padding:
        0;

    font-size:
        9px;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    opacity:
        0.62;

}


.aether-menu-main {

    --aether-index-level-width:
        var(--aether-index-root-width);

    --aether-index-root-width:
        clamp(300px, 32vw, 420px);

    --aether-menu-section-companion-width:
        min(420px, 38vw);

    --aether-index-gap:
        clamp(18px, 3vw, 42px);

    align-self:
        start;

    justify-self:
        start;

    width:
        min(940px, 100%);

}


.aether-menu.is-view-floors
.aether-menu-main,
.aether-menu.is-view-collection
.aether-menu-main {

    display:
        none;

}


.aether-menu-floors[hidden] {

    display:
        none !important;

}


.aether-menu-collection[hidden] {

    display:
        none !important;

}


.aether-menu-floors {

    align-self:
        start;

    width:
        min(760px, 100%);

    justify-self:
        start;

    display:
        grid;

    grid-template-columns:
        minmax(170px, 230px) minmax(0, 420px);

    column-gap:
        clamp(32px, 8vw, 110px);

    row-gap:
        10px;

}


.aether-menu-collection {

    --aether-index-root-width:
        clamp(230px, 24vw, 280px);

    --aether-collection-entity-column:
        clamp(230px, 26vw, 310px);

    --aether-collection-detail-column:
        clamp(320px, 34vw, 420px);

    --aether-index-gap:
        clamp(18px, 3vw, 42px);

    --aether-index-level-width:
        var(--aether-index-root-width);

    --aether-index-companion-width:
        var(--aether-collection-detail-column);

    align-self:
        start;

    width:
        min(1260px, 100%);

    justify-self:
        start;

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    grid-template-rows: auto 1fr;

    row-gap: 10px;

}


.aether-menu-floors
.aether-menu-mode-header,
.aether-menu-collection
.aether-menu-mode-header {

    grid-column:
        1 / -1;

    order:
        0;

    min-height:
        0;

    padding:
        0 0 8px;

    align-self:
        end;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-collection .aether-index-layout-stage {
    margin-top: 10px;
    width: max-content;
    max-width: 100%;
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 2;
}


.aether-menu-collection .aether-menu-collection-index {
    flex-basis: var(--aether-index-root-width);
}


.aether-menu-collection .aether-menu-collection-entity-index {
    flex-basis: var(--aether-collection-entity-column);
}


.aether-menu-collection .aether-menu-collection-entity-index {
    --aether-index-level-width:
        var(--aether-collection-entity-column);
}


.aether-menu-collection
.aether-menu-mode-title {

    color:
        rgba(3, 4, 7, 0.92);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.18);

}


.aether-menu.is-view-collection
.aether-menu-title,
.aether-menu.is-view-collection
.aether-menu-kicker,
.aether-menu.is-view-collection
.aether-menu-close,
.aether-menu.is-view-collection
.aether-menu-footer,
.aether-menu.is-view-collection
.aether-menu-footer-left,
.aether-menu.is-view-collection
.aether-menu-footer-right,
.aether-menu.is-view-collection
.aether-menu-control-key {

    color:
        rgba(2, 3, 6, 0.88);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.16);

}


.aether-menu.is-view-collection
.aether-menu-footer-left,
.aether-menu.is-view-collection
.aether-menu-footer-right {

    opacity:
        0.78;

}


.aether-menu-collection
.aether-menu-collection-index {

    grid-column:
        1 / 2;

    grid-row:
        2;

    position:
        relative;

    z-index:
        3;

    padding:
        8px 0;

    align-self:
        start;

    max-height:
        none;

    overflow:
        visible;

    scrollbar-width:
        none;

}


.aether-menu-collection-entity-index {

    grid-column:
        2 / 3;

    grid-row:
        2;

    position:
        relative;

    z-index:
        2;

    padding:
        8px 0;

    align-self:
        start;

    max-height:
        min(52vh, 460px);

    overflow:
        auto;

    scrollbar-width:
        none;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-collection-detail {

    grid-column:
        3 / 4;

    grid-row:
        2;

    order:
        3;

    position:
        relative;

    align-self:
        start;

    min-width:
        0;

    display:
        grid;

    gap:
        8px;

    isolation:
        isolate;

    width:
        min(
            100%,
            var(
                --aether-collection-detail-column
            )
        );

}


.aether-menu-collection-detail-glitch {

    grid-column:
        3 / 4;

    grid-row:
        2;

    order:
        4;

    position:
        relative;

    z-index:
        12;

    min-width:
        0;

    display:
        grid;

    gap:
        8px;

    align-self:
        start;

    margin-left:
        clamp(14px, 3vw, 42px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    isolation:
        isolate;

    width:
        min(
            100%,
            var(
                --aether-collection-detail-column
            )
        );

}


.aether-menu-collection-detail-glitch.is-active {

    opacity:
        1;

    visibility:
        visible;

}


.aether-menu-mode-header,
.aether-menu-floor-index {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    border:

        1px solid
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.13
        );

    background:

        linear-gradient(
            135deg,
            rgba(5, 8, 16, 0.28),
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.025
            )
        );

    box-shadow:

        0 14px 42px
        rgba(0, 0, 0, 0.08);

    backdrop-filter:

        blur(3px)
        brightness(0.94);

    -webkit-backdrop-filter:

        blur(3px)
        brightness(0.94);

}


.aether-menu-mode-header {

    display:
        flex;

    align-items:
        start;

    justify-content:
        space-between;

    gap:
        22px;

    padding:
        22px;

    align-self:
        center;

    min-height:
        150px;

}


.aether-menu-mode-title {

    margin:
        2px 0 0;

    font-size:
        34px;

    font-weight:
        400;

    letter-spacing:
        0;

    line-height:
        0.95;

    text-transform:
        uppercase;

}


.aether-menu-floor-index,
.aether-menu-collection-entity-index {

    padding:
        8px 0;

    align-self:
        start;

    max-height:
        min(52vh, 460px);

    overflow:
        auto;

    scrollbar-width:
        none;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-floor-index::-webkit-scrollbar,
.aether-menu-collection-index::-webkit-scrollbar,
.aether-menu-collection-entity-index::-webkit-scrollbar {

    width:
        0;

    height:
        0;

}


.aether-menu-scroll-indicator {

    position:
        absolute;

    left:
        var(
            --aether-scroll-x,
            0px
        );

    top:
        var(
            --aether-scroll-y,
            0px
        );

    z-index:
        8;

    width:
        7px;

    height:
        var(
            --aether-scroll-height,
            0px
        );

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity var(--aether-motion-scroll-indicator-duration) ease;

}


.aether-menu.is-pointer-input
.aether-menu-scroll-indicator.is-scrollable.is-hovered {

    opacity:
        1;

}


.aether-menu-scroll-indicator::before,
.aether-menu-scroll-indicator::after {

    content:
        "";

    position:
        absolute;

    border-radius:
        999px;

}


.aether-menu-scroll-indicator::before {

    top:
        0;

    bottom:
        0;

    left:
        3px;

    width:
        1px;

    background:
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.13
        );

}


.aether-menu-scroll-indicator::after {

    top:
        var(
            --aether-scroll-thumb-y,
            0px
        );

    left:
        2px;

    width:
        3px;

    height:
        var(
            --aether-scroll-thumb-height,
            24px
        );

    background:
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.26
        );

    box-shadow:
        0 0 10px
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.22
        );

}


.aether-menu.is-view-collection
.aether-menu-scroll-indicator::before {

    left:
        1px;

    width:
        5px;

    border:
        1px solid
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.16
        );

    background:
        rgba(255, 255, 255, 0.01);

    backdrop-filter:
        invert(1)
        contrast(2.05)
        saturate(1.35)
        blur(2px);

    -webkit-backdrop-filter:
        invert(1)
        contrast(2.05)
        saturate(1.35)
        blur(2px);

}


.aether-menu.is-view-collection
.aether-menu-scroll-indicator::after {

    left:
        2px;

    width:
        3px;

    background:
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.32
        );

    box-shadow:
        0 0 9px
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.18
        );

}


.aether-menu-collection-entity-index {

    padding:
        var(
            --aether-collection-entity-offset,
            8px
        )
        0
        8px;

}


.aether-menu-collection-entity-index {

    max-height:
        min(68vh, 532px);

}


.aether-menu-collection-detail {

    align-self:
        start;

    margin-left:
        0;

}


.aether-menu-mode-header {

    order:
        2;

}


.aether-menu-index {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    border:

        1px solid
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.13
        );

    background:

        linear-gradient(
            135deg,
            rgba(5, 8, 16, 0.28),
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.025
            )
        );

    box-shadow:

        0 14px 42px
        rgba(0, 0, 0, 0.08);

    backdrop-filter:

        blur(3px)
        brightness(0.94);

    -webkit-backdrop-filter:

        blur(3px)
        brightness(0.94);

}


.aether-menu-index {

    padding:
        10px 0;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-index-label {

    padding:
        0 0 0 22px;

    margin-bottom:
        14px;

    opacity:
        0.88;

    font-size:
        34px;

    font-weight:
        400;

    letter-spacing:
        0;

    line-height:
        0.95;

    color:
        var(
            --aether-ui-bright,
            #f1f2f4
        );

}


.aether-menu-index-list {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.aether-menu-main
.aether-menu-index-list {

    gap:
        7px;

}



.aether-menu-index-mark {

    display:
        none;

}


.aether-menu-index-item > *,
.aether-menu-floor-item > * {

    position:
        relative;

    z-index:
        1;

}


.aether-menu-index-item:hover,
.aether-menu-floor-item:hover {

    color:
        rgba(255, 255, 255, 0.82);

}




.aether-menu-index-item.is-selected
.aether-menu-index-mark {

    display:
        none;

}


.aether-menu-panel-content {

    margin-top:
        22px;

}


.aether-menu-commit-hint,
.aether-menu-empty {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        12px 0 0;

    border-top:

        1px solid
        rgba(255, 255, 255, 0.16);

    font-size:
        10px;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        rgba(255, 255, 255, 0.64);

}


.aether-menu-floor-list {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.aether-menu-floor-item {

    position:
        relative;

    width:
        calc(100% - 50px);

    margin-left:
        30px;

    display:
        flex;

    gap:
        0;

    align-items:
        center;

    padding:
        8px 24px 8px 12px;

    text-align:
        left;

    color:
        rgba(231, 233, 242, 0.58);

    background:

        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.11) 30%,
            rgba(0, 0, 0, 0.10) 68%,
            rgba(0, 0, 0, 0.40) 100%
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(5, 8, 16, 0.30) 13%,
            rgba(5, 8, 16, 0.18) 78%,
            rgba(255, 255, 255, 0.11) 100%
        );

    border:
        0;

    box-shadow:

        inset 0 2px 0
        rgba(255, 255, 255, 0.42),

        inset 0 10px 18px
        rgba(255, 255, 255, 0.10),

        inset 0 -12px 18px
        rgba(0, 0, 0, 0.32),

        inset 0 -4px 0
        rgba(0, 0, 0, 0.44),

        0 12px 24px
        rgba(0, 0, 0, 0.22);

    clip-path:
        none;

    backdrop-filter:

        blur(3px)
        brightness(0.96);

    -webkit-backdrop-filter:

        blur(3px)
        brightness(0.96);

    font:
        inherit;

    font-size:
        clamp(
            12px,
            1.15vw,
            16px
        );

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.aether-menu-floor-item:hover {

    color:
        rgba(255, 255, 255, 0.82);

}




.aether-menu-floor-mark {

    display:
        none;

}


.aether-menu-floor-item.is-selected
.aether-menu-floor-mark {

    display:
        none;

}


.aether-menu-floor-body {

    min-width:
        0;

    display:
        grid;

    gap:
        5px;

}


.aether-menu-floor-name,
.aether-menu-floor-mood,
.aether-menu-floor-meta {

    display:
        block;

    overflow-wrap:
        anywhere;

    text-transform:
        uppercase;

}


.aether-menu-floor-name {

    font-size:
        inherit;

    letter-spacing:
        inherit;

}


.aether-menu-floor-mood {

    font-size:
        8px;

    line-height:
        1.55;

    letter-spacing:
        0.08em;

    opacity:
        0.58;

}


.aether-menu-floor-meta {

    font-size:
        9px;

    letter-spacing:
        0.16em;

    color:
        var(
            --aether-ui-accent,
            #c8ccd3
        );

    opacity:
        0.72;

}


.aether-menu-floor-item.is-active-floor
.aether-menu-floor-meta {

    opacity:
        1;

}



/*
=====================================================
COLLECTION DETAIL
=====================================================
*/


.aether-menu-collection-portrait-slot,
.aether-menu-collection-overview-panel {

    position:
        relative;

    overflow:
        visible;

    isolation:
        isolate;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-collection-portrait-slot {

    aspect-ratio:
        1 / 1;

    padding:
        0;

}


.aether-menu-collection-overview-panel {

    min-height:
        0;

}


/*
=====================================================
AETHER INVERSION MATERIAL SYSTEM
=====================================================
*/


.aether-menu {

    --aether-lens-fill:
        rgba(255, 255, 255, 0.030);

}


.aether-menu-floor-index,
.aether-menu-mode-header {

    color:
        var(--aether-lens-ink);

    background:
        var(--aether-lens-fill);

    box-shadow:
        var(--aether-lens-shadow);

    backdrop-filter:
        var(--aether-lens-filter-soft);

    -webkit-backdrop-filter:
        var(--aether-lens-filter-soft);

}


.aether-menu-collection-type-list {

    box-sizing:
        border-box;

    width:
        100%;

    padding:
        0;

    max-height:
        none;

    overflow:
        visible;

}


.aether-menu-collection-portrait-slot,
.aether-menu-collection-overview-panel {

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

}


.aether-menu-index-item,
.aether-menu-floor-item,
.aether-index-row--parent,
.aether-index-row--child {

    color:
        var(--aether-lens-ink);

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


.aether-menu-floor-item,
.aether-index-row--parent,
.aether-index-row--child {

    min-height:
        46px;

    padding:
        8px 30px 8px 12px;

    font-size:
        clamp(
            16px,
            1.9vw,
            24px
        );

    letter-spacing:
        0.10em;

}


.aether-menu-index-item > *,
.aether-menu-floor-item > *,
.aether-index-row--parent > *,
.aether-index-row--child > * {

    position:
        relative;

    z-index:
        2;

}


.aether-menu-floor-name,
.aether-menu-floor-meta {

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.14);

}


@media (
    max-width: 820px
) {

    .aether-menu-shell {

        inset:
            24px;

    }

}


@media (
    max-width: 720px
) {

    .aether-menu-main {

        --aether-index-root-width:
            100%;

        --aether-menu-section-companion-width:
            100%;

        flex-direction:
            column;

        gap:
            18px;

    }


    .aether-menu-collection {

        --aether-index-root-width:
            100%;

        --aether-collection-entity-column:
            100%;

        --aether-index-gap:
            18px;

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .aether-menu-collection
    .aether-menu-collection-index,
    .aether-menu-collection-entity-index,
    .aether-menu-collection-detail,
    .aether-menu-collection-detail-glitch {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .aether-menu-collection-type-item.is-selected {

        width:
            calc(100% - 16px);

    }


    .aether-menu-index-label,
    .aether-menu-mode-title {

        font-size:
            26px;

    }


    .aether-menu-collection-detail,
    .aether-menu-collection-detail-glitch {

        margin-left:
            0;

    }

}