:root {
    --wall: #1b1713; /* raw umber — gallery wall at dusk */
    --linen: #ece4d4; /* unbleached linen */
    --dim: #94897a;
    --rule: #EFF2F6;
    --brass: #F38010; /* the picture light */
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    text-align: center;
    margin-bottom: 8px
}

h1 {
    font-weight: 400;
    font-size: clamp(26px,4.2vw,42px);
    letter-spacing: .03em;
    margin: 0
}

    h1 em {
        font-style: italic
    }

h2 {
    font-weight: 400;
    font-size: clamp(18px,3.2vw,24px);
    letter-spacing: .03em;
    margin: 0
}

    h2 em {
        font-style: italic
    }

.sub {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-top: 8px
}

.hint {
    font-size: 14px;
    font-style: italic;
    margin-top: 14px
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin: 22px 0 26px;
    width: 100%
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

.chip {
    background: none;
    border: 1px solid var(--rule);
    color: var(--dim);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: 2px;
}

    .chip:hover {
        border-color: var(--brass);
        color: var(--brass)

    }

    .chip.on {
        background: var(--rule);
        color: var(--brass);
        
    }
    .chip[data-mv=auto].on {
        border-color: var(--brass)
    }

details.curator {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 12px 16px
}

summary {
    cursor: pointer;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase
}

    summary:hover {
    }

.sliders {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap: 10px 26px;
    margin-top: 14px
}

    .sliders label {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .sliders .nm {
        width: 118px;
        font-size: 11.5px;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .sliders input[type=range] {
        flex: 1;
        accent-color: var(--brass)
    }

    .sliders .v {
        font-family: 'Courier New',monospace;
        width: 3em;
        text-align: right;
        color: var(--dim);
        font-size: 13px
    }

.cnote {
    font-size: 12.5px;
    font-style: italic;
    margin-top: 12px
}

.btn.small {
    padding: 8px 14px;
    margin-top: 10px
}

.frame {
    width: 100%;
    max-width: 980px;
    padding: 12px;
    border: 1px solid #40372c;
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
}

canvas {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 0 !important;
    background: #000
}

.placard {
    margin-top: 22px;
    text-align: center;
    max-width: 100%;
    border-top: 1px solid var(--rule);
    padding-top: 16px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 16px;
}

    .placard .t {
        font-style: italic;
        font-size: 17px
    }

    .placard .d {
        color: var(--dim);
        font-size: 12.5px;
        letter-spacing: .08em;
        margin-top: 6px;
        font-family: 'Courier New',monospace
    }

.bg-papaya {
    background-color: #F38010 !important
}

.text-papaya {
    color: #F38010 !important
}