/* Project index — desktop preview, mobile accordion. */
.works-wrap {
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.works-intro {
    padding-top: 170px;
    padding-bottom: 80px;
}

.works-intro h1 {
    white-space: normal;
    font-size: clamp(42px, 5.6vw, 80px);
    font-weight: 400;
    line-height: 1.12;
    margin: 30px 0;
}

.works-intro h1 em {
    font-style: normal;
    color: var(--gold);
}

.works-intro>p:not(.eyebrow) {
    color: var(--muted);
    max-width: 48ch;
    line-height: 1.8;
}

.project-index {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 85px);
    align-items: start;
    padding-bottom: 100px;
}

.project-index-list {
    border-top: 1px solid #9aa8ba40;
}

.project-index-row {
    border-bottom: 1px solid #9aa8ba40;
}

.project-index-row h2 {
    margin: 0;
}

.project-select {
    width: 100%;
    padding: 32px 0;
    display: grid;
    grid-template-columns: 26px 1fr 22px;
    align-items: baseline;
    gap: 18px;
    border: 0;
    background: none;
    color: var(--cream);
    text-align: left;
}

.index-number {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.index-name {
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.03em;
    transition: color 400ms;
}

.index-name small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0;
    margin-top: 13px;
    line-height: 1.6;
}

.index-arrow {
    font-size: 24px;
    transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
}

.project-select[aria-expanded="true"] .index-name,
.project-select:hover .index-name {
    color: var(--gold);
}

.project-select[aria-expanded="true"] .index-number {
    color: var(--gold);
}

.project-select:hover .index-arrow {
    transform: translate(3px, -3px);
}

.desktop-preview {
    position: sticky;
    top: 35px;
    min-width: 0;
}

.index-preview[hidden] {
    display: none;
}

.index-preview {
    opacity: 1;
}

.index-preview>img {
    width: 100%;
    height: clamp(260px, 29vw, 420px);
    object-fit: cover;
    display: block;
    background: #203547;
}

.preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    color: var(--muted);
    font-size: 11px;
}

.concept-tag {
    color: var(--gold);
    border: 1px solid #d4af3766;
    padding: 5px 9px;
    border-radius: 20px;
}

.index-preview h3 {
    font-size: 27px;
    font-weight: 400;
    margin: 18px 0 12px;
    letter-spacing: -.03em;
}

.index-preview>p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.index-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

.index-details {
    border: 1px solid var(--cream);
    border-radius: 30px;
    padding: 13px 22px;
    background: var(--cream);
    color: var(--navy);
    font-size: 13px;
}

.index-details:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.index-visit {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.index-visit:hover {
    color: var(--gold);
}

.index-unavailable {
    font-size: 11px;
    color: var(--muted);
}

.works-contact {
    padding-block: 60px 100px;
    text-align: center;
}

.works-contact h2 {
    font-size: clamp(36px, 4vw, 60px);
    font-weight: 400;
    letter-spacing: -.04em;
    margin: 25px 0 35px;
}

@keyframes preview-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media(max-width:700px) {
    .works-intro {
        padding-top: 130px;
        padding-bottom: 45px;
    }

    .project-index {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 40px;
    }

    .desktop-preview {
        display: none;
    }

    .project-select {
        padding-block: 25px;
        gap: 12px;
    }

    .index-name {
        font-size: 25px;
    }

    .mobile-preview-slot .index-preview {
        padding-bottom: 28px;
    }

    .index-preview>img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}


/* Compact, consistent project presentation. */
.preview-stage {
    display: grid;
    place-items: center;
    height: 300px;
    padding: 20px;
    background: #102235;
    overflow: hidden;
    border-radius: 8px;
}

.device {
    position: relative;
    width: 100%;
}

.device img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.device-browser {
    overflow: hidden;
    border: 1px solid #c2c6cc;
    border-radius: 9px;
    box-shadow: 0 12px 24px #0003;
}

.device-browser .device-chrome {
    height: 30px;
    background: radial-gradient(circle at 13px 15px, #ff6058 3px, transparent 4px), radial-gradient(circle at 25px 15px, #ffbd2e 3px, transparent 4px), radial-gradient(circle at 37px 15px, #28c840 3px, transparent 4px), #e8e9ed;
}

.device-browser .device-chrome::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 60px;
    right: 25px;
    height: 14px;
    background: #fafafa;
    border-radius: 4px;
}

.device-browser img {
    aspect-ratio: 16/9;
    max-height: 225px;
    object-position: top;
}

.recipe-stage {
    padding: 0;
    background: #eee8df;
}

.generated-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.device-polaroid {
    width: 210px;
    max-width: 80%;
    padding: 10px 10px 30px;
    background: var(--cream);
    transform: rotate(-5deg);
    box-shadow: 0 12px 24px #0004;
}

.device-polaroid img {
    aspect-ratio: 1;
}

.project-status {
    padding: 5px 10px;
    border: 1px solid #9aa8ba66;
    border-radius: 20px;
    color: var(--gold);
}

.explore-next {
    padding-block: 85px 95px;
    background: #f1eee6;
    color: #0b1b2a;
}

.explore-next .eyebrow {
    color: #80651c;
}

.explore-next h2 {
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin: 26px 0 44px;
}

.explore-columns {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 65px;
    align-items: start;
}

.explore-columns h3 {
    font-size: 21px;
    font-weight: 400;
    margin: 0 0 14px;
}

.explore-columns p {
    max-width: 48ch;
    color: #56616a;
    font-size: 14px;
    line-height: 1.8;
}

.experiment-list {
    margin-top: 28px;
    border-top: 1px solid #0b1b2a26;
}

.experiment-list article {
    padding: 24px 0;
    border-bottom: 1px solid #0b1b2a26;
}

.experiment-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.experiment-heading h4 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    letter-spacing: -.025em;
}

.experiment-heading span {
    font-size: 10px;
    color: #715a25;
    border: 1px solid #715a2550;
    border-radius: 20px;
    padding: 4px 8px;
}

.experiment-list small {
    display: block;
    color: #56616a;
    font-size: 11px;
}

.experiment-list button {
    display: inline-block;
    margin-top: 16px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #0b1b2a50;
    color: #0b1b2a;
    background: none;
    font: inherit;
    font-size: 12px;
}

.experiment-list button:hover {
    color: #80651c;
    border-color: currentColor;
}

.experiment-suggestion {
    background: #fff9;
    border: 1px solid #0b1b2a15;
    border-radius: 8px;
    padding: 28px;
}

.experiment-suggestion label {
    display: block;
    margin-bottom: 18px;
    font-size: 21px;
}

.experiment-suggestion textarea {
    width: 100%;
    padding: 18px;
    min-height: 180px;
    resize: vertical;
    font: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #0b1b2a;
    background: #fff;
    border: 1px solid #0b1b2a40;
    border-radius: 6px;
}

.experiment-suggestion textarea:focus-visible {
    outline: 2px solid #80651c;
    outline-offset: 3px;
}

.experiment-suggestion>button {
    margin-top: 20px;
    color: #f1eee6;
    background: #0b1b2a;
    border-color: #0b1b2a;
}

.experiment-suggestion>button:hover {
    background: #283e50;
}

.experiment-suggestion>p {
    font-size: 12px;
}

@media(max-width:700px) {
    .explore-columns {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .preview-stage {
        height: 240px;
        padding: 16px;
    }

    .recipe-stage {
        padding: 0;
    }

    .device-polaroid {
        width: 165px;
    }

    .explore-next {
        padding-block: 55px;
    }

    .experiment-suggestion {
        padding: 22px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .index-preview {
        animation: none;
    }
}