:root {
    --accent: #ff5138;
    --electric: #c6ff00;
    --violet: #7357ff;
    --font-xs: 16px;
    --font-sm: 16px;
    --font-md: 18px;
    --font-lg: 19px;
    --font-xl: 20px;
    --font-fullhd: 21px
}

.skinroot.light {
    --window-background: #f4eedf;
    --text: #11100f;
    --text-lo: #504a43;
    --border-color: #11100f;
    --accent: #d72e18;
    --accent-light: #ffb6a9;
    --text-over-accent: #111;
    --back-zero: #f4eedf;
    --back-one: #ff5138;
    --back-two: #c6ff00;
    --back-three: #7357ff
}

.skinroot.dark {
    --window-background: #0b0a0d;
    --window-background-0: #0b0a0d;
    --window-background-1: #15131a;
    --window-background-2: #211e29;
    --window-background-3: #2b2735;
    --text: #f4eedf;
    --text-lo: #c8c0b4;
    --border-color: #514c58;
    --accent: #ff634d;
    --text-over-accent: #0b0a0d;
    --back-zero: #0b0a0d;
    --back-one: #c63725;
    --back-two: #8fba00;
    --back-three: #4f3bb7
}

html {
    scroll-behavior: smooth
}

body {
    font-weight: 430
}

h1, h2, h3, h4 {
    font-family: "Archivo Black", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: -.055em
}

.feature-list .feature {
    background: none !important
}

.feature-list .body p {
    color: inherit;
    font-size: 1rem
}

.section-shell {
    max-width: 1220px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem
}

.bigpad {
    padding-top: clamp(4.5rem, 10vw, 9rem);
    padding-bottom: clamp(4.5rem, 10vw, 9rem)
}

.eyebrow {
    font-family: "Space Mono", monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.accent {
    color: var(--accent)
}

.display-heading {
    max-width: 1050px;
    font-size: clamp(3rem, 8vw, 7rem) !important;
    line-height: .83;
    margin: .7rem 0 2.5rem;
    text-transform: uppercase
}

.lead {
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    line-height: 1.45
}

.signal-hero {
    min-height: 94vh;
    display: grid;
    align-items: center;
    overflow: hidden;
    position: relative;
    color: #111;
    background: #ff5138;
    background-image: linear-gradient(90deg, transparent 49.5%, rgba(17, 16, 15, .14) 50%, transparent 50.5%), linear-gradient(rgba(17, 16, 15, .09) 1px, transparent 1px);
    background-size: 80px 100%, 100% 40px
}

.signal-hero:before, .signal-hero:after {
    content: "";
    position: absolute;
    border: 4px solid #111;
    border-radius: 50%;
    opacity: .75
}

.signal-hero:before {
    width: 48vw;
    height: 48vw;
    right: -13vw;
    bottom: -28vw;
    box-shadow: 0 0 0 34px #c6ff00, 0 0 0 38px #111, 0 0 0 72px #7357ff
}

.signal-hero:after {
    width: 24vw;
    height: 24vw;
    right: -2vw;
    top: 16%;
    box-shadow: 0 0 0 24px transparent, 0 0 0 28px #111
}

.hero-box {
    width: min(1220px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 7rem 0 6rem;
    z-index: 1
}

.feature-list h1.motto {
    max-width: 1080px;
    margin: 0;
    font-size: clamp(4rem, 10.5vw, 9.5rem);
    line-height: .79;
    text-transform: uppercase;
    letter-spacing: -.085em
}

.hot {
    color: #f4eedf;
    text-shadow: 5px 5px 0 #111
}

.hero-copy {
    max-width: 660px;
    margin: 2.5rem 0 !important;
    font-size: clamp(1.1rem, 2.1vw, 1.55rem) !important;
    font-weight: 680
}

.accentbutton {
    display: inline-flex;
    width: max-content;
    padding: 1rem 1.35rem;
    border: 2px solid currentColor;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 7px 7px 0 currentColor;
    transition: transform .15s, box-shadow .15s
}

.accentbutton:hover {
    transform: translate(5px, 5px);
    box-shadow: 2px 2px 0 currentColor
}

.hero-cta {
    background: #111 !important;
    color: #c6ff00 !important
}

.ticker {
    border-block: 2px solid var(--border-color);
    overflow: hidden
}

.ticker-inner {
    width: 100%;
    overflow: hidden
}

.ticker-copy {
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: .09em;
    padding: .75rem 0;
    margin: 0;
    font-size: .8rem !important
}

.signal-card, .travel-card {
    border: 2px solid var(--border-color);
    padding: 2rem !important;
    margin: .7rem;
    min-height: 250px;
    box-shadow: 9px 9px 0 var(--accent)
}

.signal-card h2, .travel-card h2 {
    font-size: 1.55rem !important
}

.icon-outline {
    color: var(--accent);
    font-size: 2rem
}

.lineup-zone {
    color: #111
}

.stage-board {
    padding: 2.5rem;
    border: 3px solid #111;
    background: #f4eedf;
    box-shadow: 10px 10px 0 #111
}

.stage-board.circuit {
    background: #111;
    color: #f4eedf;
    box-shadow: 10px 10px 0 #c6ff00
}

.stage-label, .artist-number {
    font-family: "Space Mono", monospace;
    letter-spacing: .08em;
    font-weight: 700
}

.stage-board h3 {
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    line-height: .85;
    margin: 1rem 0 2rem
}

.slot {
    display: flex;
    flex-direction: column;
    border-top: 2px solid currentColor;
    padding: 1rem 0
}

.slot b {
    color: #ff5138;
    font-family: "Space Mono", monospace;
    font-size: .72rem;
    letter-spacing: .06em;
    margin-bottom: .5rem
}

.slot span {
    font-size: 1.05rem;
    line-height: 1.55
}

.fineprint {
    margin-top: 2.5rem !important;
    font-size: .82rem !important
}

.artists-zone {
    color: #111
}

.video-wrap {
    margin-top: 3rem;
    padding: 0;
    min-height: 330px;
    border: 8px solid #111;
    background: #111
}

.video-wrap .youtube {
    min-height: 330px
}

.artist-copy {
    padding: 3rem;
    align-self: center
}

.artist-copy h3 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: .9;
    margin: .8rem 0 1.2rem
}

.artist-number {
    color: #7357ff
}

.travel-zone {
    color: #fff
}

.travel-zone .icon-outline {
    color: #c6ff00
}

.travel-card {
    border-color: #fff;
    box-shadow: 9px 9px 0 #c6ff00
}

.travel-note {
    margin-top: 3rem !important;
    padding: 1.2rem;
    border: 2px solid #c6ff00
}

.price-card {
    padding: 2rem;
    margin: 1rem 0;
    border: 2px solid var(--border-color);
    min-height: 240px
}

.price-card.featured {
    background: var(--accent);
    color: #111;
    transform: translateY(-12px)
}

.price-card p {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    letter-spacing: .08em
}

.price-card h3 {
    font-size: clamp(4rem, 7vw, 7rem);
    line-height: 1;
    margin: .5rem 0
}

.ticket-action {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-top: 2rem
}

.ticket-action p {
    max-width: 440px
}

.demo-note {
    color: #111
}

@media (max-width: 767px) {
    .section-shell {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .hero-box {
        width: calc(100% - 2rem);
        padding-top: 6rem
    }

    .mainlogo {
        margin-bottom: 2.5rem
    }

    .mainlogo .img {
        height: 70px
    }

    .signal-hero:before {
        width: 70vw;
        height: 70vw;
        right: -36vw;
        bottom: -32vw
    }

    .signal-hero:after {
        display: none
    }

    .display-heading {
        font-size: 3rem !important
    }

    .stage-board {
        padding: 1.5rem;
        margin-bottom: 2rem
    }

    .video-wrap {
        min-height: 220px
    }

    .video-wrap .youtube {
        min-height: 220px
    }

    .artist-copy {
        padding: 2rem 0 4rem
    }

    .price-card.featured {
        transform: none
    }
}