/* Let the stage portrait dissolve into the theme's textured charcoal backdrop. */
#music .el-image {
    mix-blend-mode: lighten;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 13%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 13%, #000 76%, transparent 100%);
    mask-composite: intersect;
}

#music h2 {
    font-size: clamp(2.6rem, 5vw, 5.4rem);
    line-height: 1.06;
    letter-spacing: -.045em;
}

@media (max-width: 639px) {
    #music .el-image {
        max-height: 580px;
        object-fit: cover;
    }
}

/* Keep photography integrated with the same charcoal surface throughout. */
#tm-main img.el-image:not([src*="-cover.svg"]),
#gallery .el-image,
#about .el-image,
#performances .el-image:not([src*="-cover.svg"]) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 82%, transparent);
    mask-composite: intersect;
}

#about .el-image {
    mix-blend-mode: lighten;
    filter: saturate(.72);
}

/* A gentler fade for the designed acoustic sleeves, keeping titles readable. */
#performances .el-image[src*="-cover.svg"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
}

#performances .el-item:has(img[src*="-cover.svg"]) {
    border-color: transparent !important;
}

#about h2 {
    font-size: clamp(2.6rem, 5vw, 5.4rem);
    line-height: 1.06;
    letter-spacing: -.045em;
}

/* Keep the theme's bold navigation inside portrait phone and tablet screens. */
@media (max-width: 959px) {
    #tm-dialog-mobile {
        box-sizing: border-box;
        padding-inline: clamp(20px, 5vw, 40px);
        background: rgba(18, 18, 18, .97);
    }

    #tm-dialog-mobile .uk-panel,
    #tm-dialog-mobile .uk-nav {
        min-width: 0;
        max-width: 100%;
    }

    #tm-dialog-mobile .uk-nav-primary > li > a {
        font-size: clamp(1.4rem, 7vw, 2.75rem);
        line-height: 1.22;
        white-space: normal;
        overflow-wrap: anywhere;
        text-wrap: balance;
        padding-block: .35em;
        justify-content: center;
    }
}

/* Listen and support use the native dark surface and the site's orange accent. */
#listen h2 {font-size:clamp(2.6rem,5vw,5.4rem);line-height:1.06;letter-spacing:-.045em;}
#listen .uk-text-lead {font-family:"Source Sans 3",sans-serif;font-size:1.125rem;line-height:1.7;text-transform:none;font-weight:400;max-width:39ch;}
.clark-spotify-player {display:block;width:100%;max-width:100%;min-height:352px;color-scheme:dark;}
#listen .uk-button {white-space:normal;}

/* Inquiry form: the theme's dark inputs with the orange accent on focus. */
#inquiry h2 {font-size:clamp(2.6rem,5vw,5.4rem);line-height:1.06;letter-spacing:-.045em;}
#inquiry .uk-text-lead {font-family:"Source Sans 3",sans-serif;font-size:1.125rem;line-height:1.7;text-transform:none;font-weight:400;max-width:32ch;}
.clark-inquiry .uk-form-label {font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.clark-inquiry-optional {text-transform:none;letter-spacing:0;color:rgba(255,255,255,.45);}
.clark-inquiry .uk-input,.clark-inquiry .uk-textarea {background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1rem;}
.clark-inquiry .uk-input {padding:0 16px;}
.clark-inquiry .uk-textarea {min-height:12rem;resize:vertical;line-height:1.6;padding:12px 16px;}
.clark-inquiry .uk-input:focus,.clark-inquiry .uk-textarea:focus {border-color:#da6345;background:rgba(255,255,255,.07);outline:none;}
.clark-inquiry ::placeholder {color:rgba(255,255,255,.38);}
.clark-inquiry-trap {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.clark-inquiry .uk-alert {margin-bottom:20px;background:rgba(255,255,255,.05);color:#fff;border-left:3px solid #da6345;}
.clark-inquiry .uk-alert-danger {border-left-color:#e5484d;}
.clark-inquiry-done {margin:auto !important;inset:0;height:fit-content;border:1px solid rgba(255,255,255,.14);border-top:3px solid #da6345;border-radius:4px;background:rgba(24,24,24,.92);color:#fff;padding:48px 56px;max-width:min(520px,calc(100vw - 32px));box-sizing:border-box;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.clark-inquiry-done::backdrop {background:rgba(10,10,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.clark-inquiry-done h3 {color:#fff;margin:0 0 12px;}
.clark-inquiry-done p {font-size:1.125rem;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 28px;}
.clark-inquiry-done[open] {animation:clark-inquiry-in .25s ease-out;}
@keyframes clark-inquiry-in {from {opacity:0;transform:translateY(12px);}}
@media (max-width: 639px) {.clark-inquiry-done {padding:36px 24px;}}