:root {
    --bg: #0b0b0b;
    --card: #171112;
    --text: #f0e5df;
    --muted: #9f8b86;
    --primary: #7b1118;
    --primary2: #4a0a0e;
    --line: #3a2023;
    --danger: #a52b32;
    --shadow: 0 18px 50px rgba(0, 0, 0, .35);
    --datum: #d98e43;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #160b0d, #0b0b0b);
    color: var(--text)
}

a {
    color: #c18a52
}

.shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 60px
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px
}

.brand {
    font-weight: 800
}

.brand-logo {
    height: 72px;
    width: auto;
    display: block;
    border-radius: 8px
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px;
    box-shadow: var(--shadow)
}

.hero {
    padding: 42px 30px;
    text-align: center
}

h1 {
    font-size: clamp(32px, 5vw, 54px);
    margin: 0 0 12px
}

h2 {
    margin-top: 0
}

.sub {
    color: var(--muted);
    font-size: 18px
}

.date {
    font-size: 18px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--datum)
}

.form-row {
    display: flex;
    gap: 12px;
    max-width: 650px;
    margin: 28px auto 0
}

input {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #4a2b2f;
    border-radius: 13px;
    font-size: 18px;
    background: #100d0e;
    color: var(--text)
}

button,
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 13px;
    padding: 14px 19px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.btn.secondary {
    background: #221719;
    color: #c18a52;
    border: 1px solid #4a2a2f
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px
}

.status {
    border-radius: 16px;
    padding: 18px;
    margin-top: 22px;
    border: 1px solid var(--line);
    background: #140f10
}

.status.ok {
    border-color: #6c2b31;
    background: #211316
}

.status.warn {
    border-color: #6d4a2d;
    background: #211811
}

.status.bad {
    border-color: #7e2a30;
    background: #241214
}

.label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700
}

.big {
    font-size: 26px;
    font-weight: 800;
    margin-top: 5px
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.metric {
    background: #171112;
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 18px
}

.metric strong {
    display: block;
    font-size: 30px;
    margin-top: 6px
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px
}

th,
td {
    text-align: left;
    padding: 13px;
    border-bottom: 1px solid var(--line)
}

th {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted)
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.flash {
    padding: 13px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    background: #211711;
    border: 1px solid #5a3b25
}

.flash.error {
    background: #241214;
    border-color: #7e2a30
}

.login {
    max-width: 460px;
    margin: 60px auto
}

.footer {
    color: var(--muted);
    text-align: center;
    margin-top: 28px;
    font-size: 13px
}

@media(max-width:800px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .two-col {
        grid-template-columns: 1fr
    }

    .form-row {
        flex-direction: column
    }
}

/* =========================================================
   LAUT & STAUB HOMEPAGE
   ========================================================= */

.ls-home {
    margin: 0;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(105, 24, 17, .15),
            transparent 38%),
        #060708;

    color: #ead5b7;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.ls-page {
    min-height: 100vh;
}


/* =========================================================
   HEADER
   ========================================================= */

.ls-header {
    width:
        min(1500px, calc(100% - 48px));

    min-height:
        90px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    position:
        relative;

    z-index:
        20;
}

.ls-brand-main {
    color:
        #dda35f;

    font-size:
        24px;

    font-weight:
        900;

    letter-spacing:
        .04em;
}

.ls-brand-sub {
    margin-top:
        5px;

    color:
        #b7774d;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .24em;

    text-transform:
        uppercase;
}

.ls-eventim-top {
    min-width:
        160px;

    height:
        50px;

    padding:
        0 24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #f2dcc0;

    background:
        linear-gradient(180deg,
            #9d2418,
            #68140f);

    border:
        1px solid #d09650;

    border-radius:
        9px;

    text-decoration:
        none;

    font-size:
        16px;

    font-weight:
        800;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .4);
}


/* =========================================================
   PUBLIC MESSAGE
   ========================================================= */

.ls-public-message {
    width:
        min(1300px, calc(100% - 48px));

    margin:
        0 auto 24px;
}

.ls-message-prize {
    font-size:
        20px;
}


/* =========================================================
   STAGE
   ========================================================= */

.ls-stage {
    position:
        relative;

    width:
        min(1500px, calc(100% - 30px));

    min-height:
        650px;

    margin:
        0 auto;

    overflow:
        hidden;

    border:
        1px solid rgba(171, 103, 54, .32);

    border-radius:
        24px;

    background:
        radial-gradient(ellipse at 48% -10%,
            rgba(228, 156, 79, .22),
            transparent 32%),
        radial-gradient(ellipse at 50% 45%,
            rgba(100, 26, 17, .11),
            transparent 45%),
        linear-gradient(180deg,
            #17110d 0%,
            #090909 47%,
            #040506 100%);

    box-shadow:
        inset 0 0 180px rgba(0, 0, 0, .80),
        0 40px 90px rgba(0, 0, 0, .58);
}


/* =========================================================
   CURTAINS
   ========================================================= */

.ls-curtain {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    width:
        230px;

    z-index:
        2;

    background-image:
        url('/assets/vorhang.jpg');

    background-repeat:
        no-repeat;

    background-size:
        760px 100%;

    pointer-events:
        none;

    filter:
        brightness(.72) contrast(1.22) saturate(1.18);

    opacity:
        1;
}

.ls-curtain-left {
    left:
        0;

    background-position:
        left center;

    border-radius:
        24px 0 0 24px;

    box-shadow:
        45px 0 75px rgba(0, 0, 0, .78);
}

.ls-curtain-right {
    right:
        0;

    background-position:
        right center;

    border-radius:
        0 24px 24px 0;

    box-shadow:
        -45px 0 75px rgba(0, 0, 0, .78);
}

.ls-curtain-left::after,
.ls-curtain-right::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;
}

.ls-curtain-left::after {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .02),
            rgba(0, 0, 0, .08) 45%,
            rgba(0, 0, 0, .95));
}

.ls-curtain-right::after {
    background:
        linear-gradient(270deg,
            rgba(0, 0, 0, .02),
            rgba(0, 0, 0, .08) 45%,
            rgba(0, 0, 0, .95));
}


/* =========================================================
   STAGE LIGHT
   ========================================================= */

.ls-stage-glow {
    position:
        absolute;

    width:
        1100px;

    height:
        540px;

    left:
        46%;

    top:
        -300px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(ellipse,
            rgba(237, 163, 79, .24),
            rgba(157, 72, 28, .08) 38%,
            transparent 70%);

    filter:
        blur(8px);

    z-index:
        1;

    pointer-events:
        none;
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

.ls-stage-content {
    position:
        relative;

    z-index:
        4;

    min-height:
        650px;

    padding:
        48px 150px 54px;

    display:
        grid;

    grid-template-columns:
        minmax(290px, 31%) minmax(430px, 42%) minmax(300px, 27%);

    gap:
        34px;

    align-items:
        center;
}


/* =========================================================
   LOGO
   ========================================================= */

.ls-logo-area {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.ls-logo {
    display:
        block;

    width:
        100%;

    max-width:
        390px;

    border-radius:
        4px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .62);

    filter:
        contrast(1.06) saturate(.98);
}


/* =========================================================
   EVENT TITLE
   ========================================================= */

.ls-event-area {
    min-width:
        0;
}

.ls-kicker {
    margin-bottom:
        14px;

    color:
        #d94b36;

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        .24em;

    text-transform:
        uppercase;
}

.ls-title {
    margin:
        0;

    color:
        #c89454;

    font-size:
        clamp(54px, 6vw, 100px);

    line-height:
        .88;

    font-weight:
        1000;

    letter-spacing:
        -.025em;

    text-transform:
        uppercase;

    text-shadow:
        0 10px 32px rgba(0, 0, 0, .55);
}

.ls-title span {
    display:
        block;
}

.ls-title-red {
    margin-top:
        10px;

    color:
        #8f1d18;

    text-shadow:
        0 2px 0 #ad3328,
        0 10px 30px rgba(0, 0, 0, .60);
}

.ls-vol {
    margin-top:
        18px;

    color:
        #d49657;

    font-size:
        37px;

    font-style:
        italic;

    font-weight:
        800;
}

.ls-date {
    margin-top:
        12px;

    color:
        #e6c69c;

    font-size:
        clamp(38px, 4vw, 63px);

    font-weight:
        900;

    letter-spacing:
        .07em;
}

.ls-subtitle {
    margin-top:
        12px;

    color:
        #d5a66b;

    font-size:
        24px;

    line-height:
        1.3;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.ls-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        30px;
}

.ls-btn {
    min-height:
        58px;

    padding:
        0 32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    font-size:
        17px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform .15s ease,
        filter .15s ease;
}

.ls-btn:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}

.ls-btn-red {
    color:
        #f5dfc4;

    background:
        linear-gradient(180deg,
            #a6291b,
            #731713);

    border:
        1px solid #ce8d51;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .35);
}

.ls-btn-dark {
    color:
        #e3bb83;

    background:
        rgba(5, 5, 5, .75);

    border:
        1px solid rgba(211, 150, 82, .55);
}

.ls-btn-full {
    width:
        100%;

    box-sizing:
        border-box;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.ls-side-area {
    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    min-width:
        0;
}


/* BAND BUTTON */

.ls-band-popup {
    appearance: none;

    width: 100%;

    min-height: 130px;

    padding: 22px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 8px;

    color: inherit;

    background: rgba(12, 12, 11, .94);

    border: 1px solid rgba(194, 122, 61, .55);

    border-radius: 18px;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .38);
}

.ls-band-popup-main {
    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}

.ls-band-number {
    flex: 0 0 auto;

    color: #e1b97e;

    font-size: 48px;

    font-weight: 1000;

    line-height: 1;
}

.ls-band-name {
    min-width: 0;

    color: #edcfaa;

    font-size: 24px;

    font-weight: 900;

    line-height: 1.03;

    word-break: normal;
}

.ls-band-trigger {
    display: block;

    width: 100%;

    margin: 0;

    padding-left: 58px;

    color: #b98657;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;

    text-align: left;
}


/* SIDE INFO */

.ls-side-info {
    padding:
        26px 28px;

    background:
        linear-gradient(145deg,
            rgba(18, 13, 11, .97),
            rgba(7, 7, 7, .97));

    border:
        1px solid rgba(147, 84, 45, .36);

    border-radius:
        18px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .35);
}

.ls-side-info h2 {
    margin:
        0 0 22px;

    color:
        #df4f3c;

    font-size:
        27px;

    line-height:
        1.08;

    text-transform:
        uppercase;
}

.ls-side-fact {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        13px;

    color:
        #e6cba7;

    font-size:
        18px;
}

.ls-side-fact span {
    flex:
        0 0 20px;

    color:
        #b53225;

    font-size:
        20px;
}

.ls-social-links {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        22px;
}

.ls-social-links a {
    color:
        #d69b5d;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(214, 155, 93, .4);
}


/* =========================================================
   INFO STRIP
   ========================================================= */

.ls-info-strip {
    width:
        min(1450px, calc(100% - 50px));

    margin:
        26px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow:
        hidden;

    background:
        #090a0b;

    border:
        1px solid rgba(148, 84, 43, .30);

    border-radius:
        17px;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, .28);
}

.ls-info-item {
    min-height:
        190px;

    padding:
        25px 24px;

    display:
        flex;

    gap:
        18px;

    border-right:
        1px solid rgba(142, 79, 40, .27);
}

.ls-info-item:last-child {
    border-right:
        none;
}

.ls-info-symbol {
    flex:
        0 0 58px;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #f1cd9c;

    background:
        radial-gradient(circle at 35% 30%,
            #b83c25,
            #781711 65%);

    border:
        1px solid #d18e51;

    border-radius:
        50%;

    font-size:
        27px;
}

.ls-info-label {
    margin-bottom:
        10px;

    color:
        #c78f52;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}

.ls-info-item h3 {
    margin:
        0 0 8px;

    color:
        #f0d7b6;

    font-size:
        20px;
}

.ls-info-item p {
    margin:
        0;

    color:
        #d4b996;

    font-size:
        17px;

    line-height:
        1.5;
}

.ls-price-content {
    width:
        100%;
}

.ls-price-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px 0;

    color:
        #d9c0a1;

    border-bottom:
        1px solid rgba(255, 255, 255, .055);

    font-size:
        15px;
}

.ls-price-row strong {
    color:
        #f1dabb;

    white-space:
        nowrap;
}

.ls-text-link {
    display:
        inline-block;

    margin-top:
        12px;

    color:
        #d29455;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(210, 148, 85, .45);
}


/* =========================================================
   STORY
   ========================================================= */

.ls-story {
    width:
        min(1400px, calc(100% - 50px));

    margin:
        26px auto 0;

    padding:
        40px 42px;

    background:
        linear-gradient(180deg,
            rgba(11, 11, 11, .98),
            rgba(6, 7, 8, .98));

    border:
        1px solid rgba(148, 84, 43, .28);

    border-radius:
        20px;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .28);
}

.ls-story-heading {
    margin-bottom:
        30px;

    color:
        #d74b39;

    text-align:
        center;

    font-size:
        15px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}

.ls-story-layout {
    display:
        grid;

    grid-template-columns:
        1.45fr .65fr;

    gap:
        45px;
}

.ls-story-copy h2 {
    margin:
        0 0 24px;

    color:
        #e3bb86;

    font-size:
        38px;
}

.ls-story-copy p {
    max-width:
        800px;

    color:
        #ddc3a1;

    font-size:
        19px;

    line-height:
        1.58;
}

.ls-story-final {
    color:
        #dc5b43 !important;

    font-weight:
        900;
}

.ls-story-aside {
    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}

.ls-dark-box {
    padding:
        24px 26px;

    background:
        rgba(19, 15, 13, .75);

    border:
        1px solid rgba(151, 91, 50, .32);

    border-radius:
        15px;
}

.ls-dark-box h3 {
    margin:
        0 0 15px;

    color:
        #e1b77e;

    font-size:
        24px;
}

.ls-dark-box p {
    margin:
        0 0 15px;

    color:
        #d6bd9c;

    font-size:
        16px;

    line-height:
        1.5;
}

.ls-door-times {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        8px 20px;

    padding-top:
        12px;

    color:
        #d9be99;

    border-top:
        1px solid rgba(255, 255, 255, .08);
}


/* =========================================================
   FOOTER
   ========================================================= */

.ls-footer {
    width:
        min(1400px, calc(100% - 50px));

    margin:
        26px auto 0;

    padding:
        25px 0 45px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        28px;

    color:
        #9d8268;

    border-top:
        1px solid rgba(139, 77, 42, .26);

    font-size:
        13px;
}

.ls-footer-links {
    display:
        flex;

    gap:
        15px;
}

.ls-footer a {
    color:
        #bd8555;

    text-decoration:
        none;
}


/* =========================================================
   LINEUP MODAL
   ========================================================= */

.ls-lineup-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px;
}

.ls-lineup-modal.is-open {
    display:
        flex;
}

.ls-lineup-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(0, 0, 0, .88);

    backdrop-filter:
        blur(7px);
}

.ls-lineup-dialog {
    position:
        relative;

    z-index:
        2;

    width:
        min(900px, 100%);

    max-height:
        calc(100vh - 56px);

    overflow-y:
        auto;

    padding:
        42px;

    background:
        radial-gradient(circle at top center,
            rgba(139, 37, 22, .16),
            transparent 38%),
        linear-gradient(180deg,
            #15100e,
            #090909);

    border:
        1px solid rgba(204, 132, 67, .52);

    border-radius:
        20px;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .78),
        inset 0 0 90px rgba(0, 0, 0, .38);
}

.ls-lineup-close {
    position:
        absolute;

    top:
        14px;

    right:
        18px;

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #edcda4;

    background:
        rgba(115, 23, 19, .8);

    border:
        0;

    border-radius:
        50%;

    font-size:
        30px;

    cursor:
        pointer;
}

.ls-lineup-kicker {
    color:
        #d54e39;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}

.ls-lineup-dialog h2 {
    margin:
        10px 0 5px;

    color:
        #d8a161;

    text-align:
        center;

    font-size:
        54px;

    line-height:
        1;

    letter-spacing:
        .04em;
}

.ls-lineup-date {
    margin-bottom:
        34px;

    color:
        #e8c79e;

    text-align:
        center;

    font-size:
        22px;

    font-weight:
        800;
}

.ls-lineup-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        22px;
}

.ls-lineup-day {
    padding:
        26px;

    background:
        rgba(7, 7, 7, .72);

    border:
        1px solid rgba(154, 89, 46, .36);

    border-radius:
        14px;
}

.ls-lineup-day-title {
    color:
        #d74b37;

    font-size:
        28px;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.ls-lineup-day-date {
    margin:
        4px 0 19px;

    color:
        #a97850;

    font-size:
        13px;

    letter-spacing:
        .12em;
}

.ls-lineup-day ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.ls-lineup-day li {
    padding:
        10px 0;

    color:
        #ead0ad;

    border-bottom:
        1px solid rgba(255, 255, 255, .065);

    font-size:
        20px;

    font-weight:
        700;
}

.ls-lineup-day li::before {
    content:
        "★";

    margin-right:
        10px;

    color:
        #8f241b;

    font-size:
        12px;
}

.ls-lineup-day li:last-child {
    border-bottom:
        0;
}

.ls-lineup-footer {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        30px;
}

body.lineup-open {
    overflow:
        hidden;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1200px) {

    .ls-stage-content {
        padding:
            42px 100px 48px;

        grid-template-columns:
            minmax(260px, 36%) 1fr;

        gap:
            32px;
    }

    .ls-logo {
        max-width:
            330px;
    }

    .ls-side-area {
        grid-column:
            1 / -1;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            20px;
    }

    .ls-band-popup {
        min-height:
            170px;
    }

    .ls-info-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .ls-info-item:nth-child(2) {
        border-right:
            none;
    }

    .ls-info-item:nth-child(1),
    .ls-info-item:nth-child(2) {
        border-bottom:
            1px solid rgba(142, 79, 40, .27);
    }

    .ls-story-layout {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px) {

    /* HEADER */

    .ls-header {
        width:
            calc(100% - 28px);

        min-height:
            86px;

        padding:
            0;

        gap:
            14px;
    }

    .ls-brand-main {
        font-size:
            20px;
    }

    .ls-brand-sub {
        font-size:
            9px;

        letter-spacing:
            .20em;
    }

    .ls-eventim-top {
        min-width:
            auto;

        height:
            46px;

        padding:
            0 16px;

        font-size:
            14px;
    }


    /* STAGE */

    .ls-stage {
        width:
            calc(100% - 12px);

        min-height:
            auto;

        border-radius:
            16px;
    }


    /* MOBILE CURTAIN */

    .ls-curtain {
        width:
            58px;

        background-size:
            360px 100%;

        filter:
            brightness(.82) contrast(1.18) saturate(1.18);

        opacity:
            1;
    }

    .ls-curtain-left {
        border-radius:
            16px 0 0 16px;

        box-shadow:
            20px 0 35px rgba(0, 0, 0, .78);
    }

    .ls-curtain-right {
        border-radius:
            0 16px 16px 0;

        box-shadow:
            -20px 0 35px rgba(0, 0, 0, .78);
    }


    /* CONTENT */

    .ls-stage-content {
        min-height:
            auto;

        padding:
            34px 66px 42px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            28px;
    }


    /* LOGO FIRST, BUT SMALLER */

    .ls-logo-area {
        order:
            1;

        width:
            100%;
    }

    .ls-logo {
        width:
            100%;

        max-width:
            260px;

        margin:
            0 auto;
    }


    /* EVENT SECOND */

    .ls-event-area {
        order:
            2;

        width:
            100%;
    }

    .ls-kicker {
        margin-bottom:
            12px;

        font-size:
            10px;

        line-height:
            1.45;

        letter-spacing:
            .16em;
    }

    .ls-title {
        font-size:
            clamp(39px, 11.5vw, 55px);

        line-height:
            .93;

        letter-spacing:
            -.02em;
    }

    .ls-title-red {
        margin-top:
            7px;
    }

    .ls-vol {
        margin-top:
            15px;

        font-size:
            27px;
    }

    .ls-date {
        margin-top:
            12px;

        font-size:
            clamp(29px, 8.8vw, 40px);

        line-height:
            1.08;

        letter-spacing:
            .02em;
    }

    .ls-subtitle {
        margin-top:
            12px;

        font-size:
            16px;

        line-height:
            1.4;
    }

    .ls-hero-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            22px;
    }

    .ls-btn {
        width:
            100%;

        box-sizing:
            border-box;

        min-height:
            48px;

        padding:
            0 14px;

        font-size:
            14px;
    }


    /* RIGHT SIDE THIRD */

    .ls-side-area {
        order:
            3;

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        gap:
            14px;
    }


    /* MOBILE BAND BOX */

    .ls-band-popup {
        width: 100%;

        min-height: 0;

        padding: 18px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        text-align: left;
    }

    .ls-band-popup-main {
        width: 100%;

        display: flex;

        align-items: center;

        gap: 8px;
    }

    .ls-band-number {
        font-size: 38px;

        line-height: 1;
    }

    .ls-band-name {
        font-size: 21px;

        line-height: 1.02;
    }

    .ls-band-trigger {
        display: block;

        width: 100%;

        margin: 0;

        padding-left: 46px;

        color: #c18b59;

        font-size: 10px;

        line-height: 1.35;

        text-align: left;

        letter-spacing: .11em;
    }


    /* SIDE INFO */

    .ls-side-info {
        padding:
            20px;
    }

    .ls-side-info h2 {
        font-size:
            22px;
    }

    .ls-side-fact {
        font-size:
            15px;
    }


    /* INFO STRIP */

    .ls-info-strip {
        width:
            calc(100% - 22px);

        margin-top:
            18px;

        grid-template-columns:
            1fr;
    }

    .ls-info-item {
        min-height:
            auto;

        padding:
            20px;

        border-right:
            none;

        border-bottom:
            1px solid rgba(142, 79, 40, .27);
    }

    .ls-info-item:last-child {
        border-bottom:
            none;
    }

    .ls-info-symbol {
        flex-basis:
            48px;

        width:
            48px;

        height:
            48px;

        font-size:
            21px;
    }

    .ls-info-item h3 {
        font-size:
            18px;
    }

    .ls-info-item p {
        font-size:
            16px;
    }


    /* STORY */

    .ls-story {
        width:
            calc(100% - 22px);

        box-sizing:
            border-box;

        margin-top:
            18px;

        padding:
            28px 22px;
    }

    .ls-story-heading {
        font-size:
            12px;
    }

    .ls-story-layout {
        grid-template-columns:
            1fr;

        gap:
            26px;
    }

    .ls-story-copy h2 {
        font-size:
            29px;
    }

    .ls-story-copy p {
        font-size:
            16px;

        line-height:
            1.55;
    }


    /* FOOTER */

    .ls-footer {
        width:
            calc(100% - 28px);

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    /* LINEUP MODAL */

    .ls-lineup-modal {
        padding:
            12px;
    }

    .ls-lineup-dialog {
        padding:
            38px 18px 22px;
    }

    .ls-lineup-dialog h2 {
        font-size:
            37px;
    }

    .ls-lineup-grid {
        grid-template-columns:
            1fr;
    }

    .ls-lineup-day li {
        font-size:
            17px;
    }

    .ls-lineup-footer {
        flex-direction:
            column;
    }

    .ls-lineup-footer .ls-btn {
        width:
            100%;
    }
}