@import url('https://fonts.googleapis.com/css2?family=Saira:wdth,wght@50..125,300..800&family=Figtree:wght@400;500;600;700&display=swap');
/* Statik Entertainment. The site is Cody's deck: a booking page built in the grammar of the CDJ and mixer he plays. Palette contract (the logo's two inks on the deck's matte chassis): #0d0e10 chassis, #16171a panel, #07080b LCD the ground #e4e2df silver the logo's S, headings #7d2bc9 purple, #b47cf2 lavender the logo's T; lavender is the purple for text on dark cue/play/RGB waveform colors equipment LED states only, never fields Type: Saira (widths 60-118) for hardware labels and headings, Figtree for text. Every class carries stk-: the concept's plain names (.form, .alert) are platform classes on a hosted site. */ :root {
    --stk-chassis: #0d0e10;
    --stk-panel: #16171a;
    --stk-panel-2: #1e2024;
    --stk-key: #26282d;
    --stk-bezel: #2c2e34;
    --stk-line: #2b2d33;
    --stk-lcd: #07080b;
    --stk-silver: #e4e2df;
    --stk-text: #d9dade;
    --stk-muted: #9da1a9;
    --stk-label: #8c919a;
    --stk-purple: #7d2bc9;
    --stk-purple-hi: #8f3be0;
    --stk-violet: #b47cf2;
    --stk-cue: #ff8a1f;
    --stk-play: #2bd96b;
    --stk-wave-lo: #2f6dff;
    --stk-wave-mid: #ff9a3c;
    --stk-wave-hi: #eaf2ff;
    --stk-c-red: #ff4a4a;
    --stk-c-orange: #ff8a1f;
    --stk-c-yellow: #ffd23f;
    --stk-c-green: #2bd96b;
    --stk-c-cyan: #22d3ee;
    --stk-c-blue: #4f8bff;
    --stk-c-purple: #a35cf0;
    --stk-c-pink: #ff5cbc;
    --stk-display: "Saira", "Figtree", sans-serif;
    --stk-body: "Figtree", system-ui, sans-serif;
    --stk-gutter: clamp(16px, 4vw, 48px);
    --stk-max: 1280px;
    --stk-ease: cubic-bezier(.16, 1, .3, 1);
    --stk-logo-bg: var(--stk-chassis);
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    scrollbar-color: #3a3d44 var(--stk-chassis);
}

body {
    margin: 0;
    background: var(--stk-chassis);
    color: var(--stk-text);
    font: 400 17px/1.6 var(--stk-body);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--stk-violet);
}

::selection {
    background: var(--stk-purple);
    color: #fff;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

:focus-visible {
    outline: 2px solid var(--stk-violet);
    outline-offset: 3px;
    border-radius: 6px;
}

h1, h2, h3 {
    font-family: var(--stk-display);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--stk-silver);
    text-wrap: balance;
    font-variation-settings: "wdth" 108;
}

h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

h3 {
    font-size: 1.35rem;
    line-height: 1.15; margin-left: 10px;
}

p {
    margin: 0;
    text-wrap: pretty; margin-left: 10px;
}

.stk-wrap {
    width: 100%;
    max-width: var(--stk-max);
    margin: 0 auto;
    padding: 0 var(--stk-gutter);
}

.stk-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--stk-muted);
    max-width: 34em;
}

.stk-lbl {
    font: 600 11.5px/1 var(--stk-display);
    font-variation-settings: "wdth" 100;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stk-label);
}

.stk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Hardware surfaces */ .stk-chassis {
    background: linear-gradient(180deg, #1b1d21 0%, #141518 100%);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.9);
    position: relative;
}

.stk-screw {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5a5d64, #1d1f23 70%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}

.stk-screw::after {
    content: "";
    position: absolute;
    left: 1.5px;
    right: 1.5px;
    top: 4px;
    height: 1px;
    background: #0c0d0f;
    transform: rotate(35deg);
}

.stk-lcd {
    background: var(--stk-lcd);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #000, 0 0 0 6px #101114, 0 0 0 7px #2a2c31;
    position: relative;
    overflow: hidden;
}

.stk-lcd::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* Keys */ .stk-key {
    --k: var(--stk-key);
    --kf: var(--stk-silver);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font: 650 14px/1 var(--stk-display);
    font-variation-settings: "wdth" 104;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--k);
    color: var(--kf);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #050506, 0 8px 18px -10px rgba(0,0,0,.8);
    transition: transform .12s, box-shadow .12s, background-color .2s, filter .2s;
}

.stk-key:hover {
    filter: brightness(1.15);
}

.stk-key:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 #050506;
}

.stk-key svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.stk-key--lit {
    --k: var(--stk-purple);
    --kf: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.3), 0 2px 0 #2a0b47, 0 8px 18px -10px rgba(0,0,0,.8);
}

.stk-key--lit:hover {
    --k: var(--stk-purple-hi);
    filter: none;
}

.stk-key[disabled] {
    opacity: .75;
    cursor: progress;
}

.stk-key .stk-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }

}

/* Logo */ .stk-mono {
    display: block;
}

.stk-word {
    display: block;
    overflow: visible;
}

.stk-lockup {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.stk-lockup__ent {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font: 500 13px/1 var(--stk-display);
    font-variation-settings: "wdth" 118;
    letter-spacing: .42em;
    padding-left: .42em;
    color: var(--stk-violet);
    text-transform: uppercase;
}

.stk-lockup__ent::before, .stk-lockup__ent::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--stk-purple);
    opacity: .8;
}

/* Hero */ .stk-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 72px) 0 0;
}

.stk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 75% 20%, rgba(125,43,201,.16), transparent 70%);
    pointer-events: none;
}

.stk-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.stk-hero__copy {
    padding-top: clamp(8px, 3vw, 40px);
    display: grid;
    gap: 26px;
}

.stk-hero .stk-lockup {
    justify-items: center;
    width: max-content;
    max-width: 100%;
}

.stk-hero .stk-lockup .stk-mono {
    width: 92px;
    height: 92px;
}

.stk-hero .stk-lockup .stk-word {
    width: min(320px, 80vw);
    height: auto;
}

.stk-hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.1rem);
    font-variation-settings: "wdth" 112;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: .98;
}

.stk-hero h1 em {
    font-style: normal;
    color: var(--stk-violet);
}

.stk-facts {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    gap: 10px;
}

.stk-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--stk-muted);
}

.stk-facts i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--stk-c);
    box-shadow: 0 0 10px -1px var(--stk-c);
    flex: none;
}

.stk-deck {
    padding: 18px 18px 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: calc(-1 * var(--stk-gutter));
}

.stk-deck .stk-screw.stk-tl {
    left: 10px;
    top: 10px;
}

.stk-deck .stk-screw.stk-tr {
    right: 10px;
    top: 10px;
}

.stk-deck__screen {
    padding: 14px 16px 16px;
}

.stk-scr-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font: 600 11px/1 var(--stk-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8d929c;
}

.stk-scr-top .stk-on {
    color: var(--stk-play);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stk-scr-top .stk-on::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stk-play);
    box-shadow: 0 0 8px var(--stk-play);
}

.stk-scr-top span:last-child {
    margin-left: auto;
}

.stk-track {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 18px;
    margin: 14px 0 12px;
    align-items: end;
}

.stk-track__title {
    font: 650 clamp(1.3rem, 2.3vw, 1.9rem)/1.1 var(--stk-display);
    font-variation-settings: "wdth" 104;
    color: #fff;
}

.stk-track__artist {
    font-size: 14.5px;
    color: var(--stk-violet);
    font-weight: 600;
}

.stk-readouts {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    gap: 18px;
}

.stk-readout {
    display: grid;
    gap: 5px;
    text-align: right;
}

.stk-readout b {
    font: 600 clamp(1.15rem, 2vw, 1.6rem)/1 var(--stk-display);
    font-variation-settings: "wdth" 90;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.stk-readout b.stk-warn {
    color: var(--stk-cue);
}

.stk-readout span {
    font: 600 10px/1 var(--stk-display);
    letter-spacing: .14em;
    color: #7f8590;
}

.stk-wave {
    position: relative;
    height: 92px;
    border-radius: 6px;
    background: #030406;
    overflow: hidden;
}

.stk-wave svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 200%;
    animation: scroll 16s linear infinite;
}

.stk-wave::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    z-index: 2;
    box-shadow: 0 0 8px rgba(255,255,255,.6);
}

.stk-wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,.06);
    z-index: 1;
}

@keyframes scroll {
    to {
        transform: translateX(-50%);
    }

}

.stk-overview {
    margin-top: 8px;
    height: 22px;
    border-radius: 4px;
    background: #030406;
    position: relative;
    overflow: hidden;
}

.stk-overview svg {
    width: 100%;
    height: 100%;
    display: block;
}

.stk-overview i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 37%;
    width: 2px;
    background: var(--stk-c-red);
}

.stk-load {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.stk-load label {
    display: grid;
    gap: 6px;
}

.stk-load span {
    font: 600 10.5px/1 var(--stk-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d929c;
}

.stk-ctl {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #2d3036;
    background: #101216;
    color: #fff;
    font: 600 16px/1.2 var(--stk-body);
    outline: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}

.stk-ctl:hover {
    border-color: #444851;
}

.stk-ctl:focus {
    border-color: var(--stk-violet);
    box-shadow: 0 0 0 3px rgba(180,124,242,.25);
}

select.stk-ctl {
    background: #101216 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b47cf2' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 14px center no-repeat;
    padding-right: 36px;
    cursor: pointer;
}

input.stk-ctl[type=date] {
    color-scheme: dark;
}

.stk-ctl::placeholder {
    color: #7b808a;
}

.stk-deck__body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 22px 6px 0;
}

.stk-pads {
    display: grid;
    grid-template-columns: repeat(4, 46px);
    gap: 8px;
}

.stk-pad {
    width: 46px;
    height: 34px;
    border-radius: 6px;
    background: #222429;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #050506;
    position: relative;
}

.stk-pad::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--stk-c);
    box-shadow: 0 0 8px var(--stk-c);
    opacity: .9;
}

.stk-transport {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.stk-round {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #1d1f23;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 3px var(--stk-c), 0 0 22px -8px var(--stk-c), inset 0 2px 6px rgba(0,0,0,.6);
    color: var(--stk-c);
}

.stk-round svg {
    width: 24px;
    height: 24px;
}

.stk-round small {
    font: 700 10px/1 var(--stk-display);
    letter-spacing: .14em;
    color: var(--stk-c);
}

.stk-jogwrap {
    position: relative;
    justify-self: center;
    width: min(400px, 100%);
    aspect-ratio: 1;
    margin-bottom: 26px;
}

.stk-jog {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(#25272c 0 1.5deg, #1b1d21 1.5deg 3deg);
    box-shadow: inset 0 0 0 2px #000, inset 0 0 0 10px #111215, 0 20px 40px -10px rgba(0,0,0,.8);
}

.stk-jog__ring {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(163,92,240,.75), 0 0 24px -2px rgba(163,92,240,.55);
}

.stk-jog__plate {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 10deg, #3b3e44 0 .7deg, #33363b .7deg 1.4deg), #36393f;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -10px 30px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.6);
    animation: spin 1.8s linear infinite;
}

.stk-jog__plate::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6%;
    width: 6px;
    height: 16%;
    margin-left: -3px;
    border-radius: 3px;
    background: var(--stk-c-purple);
    box-shadow: 0 0 10px var(--stk-c-purple);
}

.stk-jog__center {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: #050608;
    box-shadow: inset 0 0 0 2px #2b2d33;
    display: grid;
    place-items: center;
}

.stk-jog__center .stk-mono {
    width: 46%;
    height: auto;
    --stk-logo-bg: #050608;
}

.stk-tempo {
    width: 46px;
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 6px;
}

.stk-tempo__track {
    width: 10px;
    height: 220px;
    border-radius: 5px;
    background: #050608;
    box-shadow: inset 0 0 0 1px #2b2d33;
    position: relative;
}

.stk-tempo__cap {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 40px;
    height: 20px;
    margin-left: -20px;
    border-radius: 4px;
    background: linear-gradient(#55585f, #2d3035);
    box-shadow: 0 3px 6px rgba(0,0,0,.6);
}

.stk-tempo__cap::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 9px;
    height: 2px;
    background: #fff;
}

/* Sections */ .stk-pad-y {
    padding: clamp(80px, 10vw, 140px) 0;
}

.stk-head {
    display: grid;
    gap: 18px;
    max-width: 760px;
    margin-bottom: clamp(36px, 5vw, 60px);
}

.stk-head--row {
    max-width: none;
    grid-template-columns: 1fr minmax(0, 30em);
    align-items: end;
    gap: 18px 60px;
}

/* Mixer (weddings) */ .stk-mixer {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stk-ch {
    background: #121316;
    border-radius: 12px;
    padding: 18px 18px 22px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 16px;
    box-shadow: inset 0 0 0 1px #24262b;
}

.stk-ch__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stk-ch__top b {
    font: 700 11px/1 var(--stk-display);
    letter-spacing: .16em;
    color: var(--stk-label);
}

.stk-ch__led {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
}

.stk-ch__led i {
    width: 14px;
    height: 3px;
    border-radius: 1px;
    background: #26282d;
}

.stk-ch__led i.stk-on {
    background: var(--stk-c-green);
    box-shadow: 0 0 6px var(--stk-c-green);
}

.stk-ch__led i.stk-on.stk-y {
    background: var(--stk-c-yellow);
    box-shadow: 0 0 6px var(--stk-c-yellow);
}

.stk-ch__knobs {
    display: flex;
    gap: 14px;
}

.stk-knob {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #4a4d54, #1d1f23 70%);
    box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 1px #000;
    position: relative;
    transform: rotate(var(--stk-r, 0deg));
}

.stk-knob::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    background: #fff;
    border-radius: 1px;
}

.stk-ch h3 {
    font-size: 1.3rem;
}

.stk-ch p {
    color: var(--stk-muted);
    font-size: 15.5px;
}

.stk-ch__fader {
    position: relative;
    height: 120px;
    width: 10px;
    border-radius: 5px;
    background: #050608;
    box-shadow: inset 0 0 0 1px #2b2d33;
    margin: 4px 0 0 12px;
}

.stk-ch__fader span {
    position: absolute;
    left: 50%;
    width: 38px;
    height: 18px;
    margin-left: -19px;
    border-radius: 4px;
    background: linear-gradient(#5c5f66, #2c2f34);
    box-shadow: 0 3px 6px rgba(0,0,0,.6);
    top: var(--stk-f, 20%);
    transition: top 1s var(--stk-ease);
}

.stk-ch__fader span::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 8px;
    height: 2px;
    background: #fff;
}

.stk-ch__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
}

.stk-rb {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
}

.stk-rb__copy {
    padding: clamp(26px, 4vw, 48px);
    display: grid;
    gap: 14px;
    align-content: center;
}

.stk-rb__copy p {
    color: var(--stk-muted);
}

.stk-rb__copy .stk-key {
    justify-self: start;
    margin-top: 8px;
}

.stk-rb__screen {
    margin: 28px 28px 0 0;
    padding: 16px 18px 0;
    border-radius: 12px 12px 0 0;
    box-shadow: inset 0 0 0 1px #000, 0 0 0 6px #101114, 0 0 0 7px #2a2c31;
}

.stk-mini__bar {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
}

.stk-mini__bar i {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #26282d;
}

.stk-mini__bar i.stk-done {
    background: #6b6f78;
}

.stk-mini__bar i.stk-now {
    background: var(--stk-violet);
}

.stk-mini__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 650 16px/1 var(--stk-display);
    color: #fff;
    margin-bottom: 12px;
}

.stk-mini__title small {
    font: 600 12px var(--stk-body);
    color: var(--stk-play);
}

.stk-mini__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 16px;
}

.stk-mini__f {
    border: 1px solid #2a2d33;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
}

.stk-mini__f span {
    display: block;
    font-size: 11px;
    color: #8d929c;
    font-weight: 600;
}

.stk-mini__f b {
    color: #fff;
    font-weight: 600;
}

/* Browser (bars & events) */ .stk-events {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
}

.stk-browser {
    padding: 0;
    overflow: hidden;
}

.stk-browser__head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid #23252a;
}

.stk-browser ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stk-browser li + li {
    border-top: 1px solid #1d1f23;
}

.stk-browser a {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 4px 16px;
    align-items: center;
    padding: 16px 18px;
    text-decoration: none;
    transition: background-color .2s;
}

.stk-browser a:hover, .stk-browser a:focus-visible {
    background: #141519;
}

.stk-browser .stk-n {
    font: 600 14px/1 var(--stk-display);
    color: #7b808a;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stk-browser .stk-n i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--stk-c);
}

.stk-browser b {
    font: 650 1.15rem/1.2 var(--stk-display);
    font-variation-settings: "wdth" 104;
    color: #fff;
}

.stk-browser small {
    grid-column: 2;
    color: var(--stk-muted);
    font-size: 14.5px;
}

.stk-browser .stk-ld {
    grid-row: 1 / span 2;
    grid-column: 3;
    font: 700 11px/1 var(--stk-display);
    letter-spacing: .14em;
    color: var(--stk-violet);
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(180,124,242,.45);
    transition: background-color .2s, color .2s;
}

.stk-browser a:hover .stk-ld {
    background: var(--stk-purple);
    color: #fff;
    box-shadow: none;
}

.stk-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
}

.stk-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* FX unit (photo booth) */ .stk-fx {
    padding: clamp(18px, 2.5vw, 28px);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(20px, 3vw, 40px);
}

.stk-fx__screen {
    min-height: 360px;
    display: grid;
}

.stk-fx__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80%;
    opacity: .92;
}

.stk-fx__overlay {
    position: relative;
    z-index: 2;
    align-self: end;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(0deg, rgba(3,4,6,.9), rgba(3,4,6,0));
}

.stk-fx__overlay {
    flex-wrap: wrap;
}

.stk-fx__overlay b {
    white-space: nowrap;
    font: 700 13px/1 var(--stk-display);
    letter-spacing: .16em;
    color: #fff;
}

.stk-fx__copy {
    display: grid;
    gap: 18px;
    align-content: start;
}

.stk-params {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    border-top: 1px solid var(--stk-line);
}

.stk-params li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--stk-line);
}

.stk-params li span {
    color: var(--stk-text);
    font-weight: 500;
}

.stk-params li em {
    font: 600 11px/1 var(--stk-display);
    font-style: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stk-violet);
}

.stk-fxon {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
}

.stk-fxbtn {
    width: 96px;
    height: 64px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    flex: none;
    background: #23252a;
    color: #9da1a9;
    font: 800 15px/1 var(--stk-display);
    letter-spacing: .14em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.4), 0 3px 0 #050506, 0 0 0 1px #000;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .1s;
}

.stk-fxbtn:active {
    transform: translateY(2px);
}

.stk-fxbtn[aria-pressed="true"] {
    background: var(--stk-purple);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.3), 0 3px 0 #2a0b47, 0 0 30px -6px var(--stk-c-purple);
}

.stk-fxon p {
    font-size: 15px;
    color: var(--stk-muted);
}

.stk-fxon p b {
    color: #fff;
    display: block;
    font-weight: 600;
}

/* Steps */ .stk-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    counter-reset: s;
}

.stk-steps li {
    counter-increment: s;
    padding: 24px;
    border-radius: 14px;
    background: var(--stk-panel);
    box-shadow: inset 0 0 0 1px #24262b;
    display: grid;
    gap: 10px;
    align-content: start;
}

.stk-steps li::before {
    content: "0" counter(s);
    font: 600 3.4rem/1 var(--stk-display);
    font-variation-settings: "wdth" 60;
    color: var(--stk-violet);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.stk-steps p {
    color: var(--stk-muted);
}

/* About */ .stk-about {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}

.stk-about .stk-photo {
    aspect-ratio: 1;
    min-height: 0;
}

.stk-about__copy {
    display: grid;
    gap: 18px;
}

.stk-about__copy p {
    color: var(--stk-muted);
    max-width: 34em;
}

.stk-quote {
    margin-top: 10px;
    padding: 20px 22px;
    border-radius: 12px;
    background: var(--stk-panel);
    box-shadow: inset 0 0 0 1px #24262b;
}

.stk-quote__by {
    font-size: 14px;
    font-weight: 600;
    color: var(--stk-muted);
}

.stk-quote blockquote {
    margin: 0 0 12px;
    font: 600 1.35rem/1.3 var(--stk-display);
    font-variation-settings: "wdth" 100;
    color: #a7abb3;
}

/* Memory (gallery) */ .stk-memory {
    padding: 16px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 10px;
}

.stk-mem {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: clamp(180px, 22vw, 300px);
}

.stk-mem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stk-mem span {
    position: absolute;
    left: 8px;
    top: 8px;
    font: 700 10.5px/1 var(--stk-display);
    letter-spacing: .14em;
    color: #fff;
    background: rgba(3,4,6,.7);
    padding: 5px 7px;
    border-radius: 4px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.stk-mem span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--stk-c);
}

.stk-memory__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-weight: 600;
}

.stk-memory__foot a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--stk-violet);
}

.stk-memory__foot a svg {
    width: 16px;
    height: 16px;
}

/* Contact */ .stk-contact {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.stk-contact__aside {
    display: grid;
    gap: 20px;
    position: sticky;
    top: 110px;
}

.stk-reach {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 14px;
}

.stk-reach li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.stk-reach svg {
    width: 20px;
    height: 20px;
    color: var(--stk-violet);
    flex: none;
}

.stk-inquiry {
    padding: clamp(18px, 3vw, 28px);
}

.stk-inquiry .stk-lcd {
    padding: clamp(18px, 3vw, 30px);
}

/* Footer */ .stk-site-footer {
    border-top: 1px solid var(--stk-line);
    padding: 72px 0 40px;
    color: var(--stk-muted);
    font-size: 15px;
}

.stk-site-footer .stk-wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
}

.stk-site-footer .stk-lockup {
    justify-items: center;
    width: max-content;
}

.stk-site-footer .stk-lockup .stk-mono {
    width: 120px;
    height: 120px;
}

.stk-site-footer .stk-lockup .stk-word {
    width: 260px;
    height: auto;
}

.stk-site-footer .stk-lockup .stk-lockup__ent {
    width: 290px;
    font-size: 11.5px;
}

.stk-lockup__dj {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 220px;
    font: 500 12px/1 var(--stk-display);
    letter-spacing: .4em;
     padding-left: .4em;
    color: var(--stk-silver);
}

.stk-lockup__dj::before, .stk-lockup__dj::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #4b4e55;
}

.stk-site-footer h4 {
    color: #fff;
    font: 600 11.5px/1 var(--stk-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 6px 0 16px;
}

.stk-site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.stk-site-footer a {
    text-decoration: none;
}

.stk-site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.stk-site-footer .stk-legal {
    grid-column: 1 / -1;
    border-top: 1px solid var(--stk-line);
    padding-top: 22px;
    font-size: 13px;
}

/* Responsive */ @media (max-width: 1080px) {
    .stk-hero__grid {
        grid-template-columns: 1fr;
    }

    .stk-deck {
        margin-left: calc(-1 * var(--stk-gutter));
        border-radius: 0;
    }

    .stk-mixer {
        grid-template-columns: 1fr 1fr;
    }

    .stk-events, .stk-fx, .stk-about, .stk-contact {
        grid-template-columns: 1fr;
    }

    .stk-contact__aside {
        position: static;
    }

}

/* ── Every form on the site (the platform's form classes) ─────────────────────── Any form Cody adds in the editor, and the "find your event page" form, get the deck's inputs and a lit key for the button. The date check below adds its two-column grid, chips and play button on top. */ .form {
    display: grid;
    gap: 18px;
    max-width: 640px;
}

.form-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.form-label {
    font: 600 11.5px/1.2 var(--stk-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a3a8b1;
}

.form-input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #2d3036;
    background: #101216;
    color: #fff;
    font: 600 16px/1.2 var(--stk-body);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

textarea.form-input {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.5;
}

.form-input:focus {
    border-color: var(--stk-violet);
    box-shadow: 0 0 0 3px rgba(180,124,242,.25);
}

.form-input::placeholder {
    color: #7b808a;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: var(--stk-purple);
    color: #fff;
    font: 650 14px/1 var(--stk-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.3), 0 2px 0 #2a0b47;
}

.form-submit:hover {
    background: var(--stk-purple-hi);
    color: #fff;
}

.form-message {
    padding: 14px 16px;
    border-radius: 10px;
    font-weight: 600;
}

.form-message--success {
    background: rgba(43,217,107,.1);
    color: #9ff0bd;
    box-shadow: inset 0 0 0 1px rgba(43,217,107,.4);
}

.form-message--error {
    background: rgba(255,90,70,.12);
    color: #ffb3a8;
}

/* ── The inquiry, on the platform's form classes ──────────────────────────────── The date check is an ordinary site form (site-forms.js submits it; the events module picks it up), so it is written in .form / .form-field / .form-label / .form-input and dressed here, scoped to .stk-inquiry. */ .stk-inquiry .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; max-width: none; } .stk-inquiry .form-field { display: grid; gap: 8px; min-width: 0; margin: 0; } .stk-inquiry .stk-field--full { grid-column: 1 / -1; } .stk-inquiry .form-label { font: 600 11.5px/1.2 var(--stk-display); letter-spacing: .12em; text-transform: uppercase; color: #a3a8b1; } .stk-inquiry .stk-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .stk-inquiry .stk-hint { text-transform: none; letter-spacing: 0; font: 400 12.5px var(--stk-body); color: #858a94; } .stk-inquiry .form-input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 8px; border: 1px solid #2d3036; background: #101216; color: #fff; font: 600 16px/1.2 var(--stk-body); outline: none; transition: border-color .15s, box-shadow .15s; } .stk-inquiry textarea.form-input { min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; } .stk-inquiry input[type=date].form-input { color-scheme: dark; } .stk-inquiry .form-input:hover { border-color: #444851; } .stk-inquiry .form-input:focus { border-color: var(--stk-violet); box-shadow: 0 0 0 3px rgba(180,124,242,.25); } .stk-inquiry .form-input::placeholder { color: #7b808a; } .stk-inquiry .form-radio-group { display: flex; flex-wrap: wrap; gap: 8px; } .stk-inquiry .form-radio-option { position: relative; } .stk-inquiry .form-radio-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .stk-inquiry .form-radio-option span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 8px; background: #17191d; box-shadow: inset 0 0 0 1px #2d3036; font: 600 14.5px/1 var(--stk-body); color: var(--stk-text); cursor: pointer; transition: box-shadow .15s, background-color .15s; } .stk-inquiry .form-radio-option span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #3a3d44; transition: background-color .15s, box-shadow .15s; } .stk-inquiry .form-radio-option:hover span { box-shadow: inset 0 0 0 1px #4a4e57; } .stk-inquiry .form-radio-option input:checked + span { background: #1f1630; box-shadow: inset 0 0 0 1px var(--stk-violet); color: #fff; } .stk-inquiry .form-radio-option input:checked + span::before { background: var(--stk-violet); box-shadow: 0 0 8px var(--stk-violet); } .stk-inquiry .form-radio-option input:focus-visible + span { outline: 2px solid var(--stk-violet); outline-offset: 2px; } .stk-inquiry .form-checkbox-option { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 10px; background: #111317; box-shadow: inset 0 0 0 1px #2d3036; cursor: pointer; } .stk-inquiry .form-checkbox-option input { width: 22px; height: 22px; margin: 0; accent-color: var(--stk-purple); flex: none; } .stk-inquiry .form-checkbox-option b { display: block; color: #fff; } .stk-inquiry .form-checkbox-option small { color: var(--stk-muted); font-size: 14px; } .stk-inquiry .form-checkbox-option:has(input:checked) { box-shadow: inset 0 0 0 1px var(--stk-violet); background: #1a1426; } .stk-inquiry .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; } .stk-inquiry .form-actions p { font-size: 13.5px; color: #858a94; max-width: 24em; } .stk-inquiry .form-submit { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; cursor: pointer; color: #fff; font: 650 15px/1 var(--stk-display); letter-spacing: .1em; text-transform: uppercase; } .stk-inquiry .form-submit:hover { background: none; color: #fff; } .stk-inquiry .form-submit .stk-round { --stk-c: var(--stk-play); width: 64px; height: 64px; transition: box-shadow .2s, transform .12s; } .stk-inquiry .form-submit:hover .stk-round { box-shadow: inset 0 0 0 3px var(--stk-c), 0 0 30px -4px var(--stk-c), inset 0 2px 6px rgba(0,0,0,.6); } .stk-inquiry .form-submit:active .stk-round { transform: scale(.96); } .stk-inquiry .form-submit[disabled] { cursor: progress; opacity: .8; } .stk-inquiry .form-message { grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px; font-weight: 600; } .stk-inquiry .form-message--success { background: rgba(43,217,107,.1); color: #9ff0bd; box-shadow: inset 0 0 0 1px rgba(43,217,107,.4); } .stk-inquiry .form-message--error { background: rgba(255,90,70,.12); color: #ffb3a8; } .stk-inquiry .field-error, .stk-inquiry .form-field-error { color: #ff8a7d; font-size: 13px; font-weight: 600; } .stk-inquiry .has-error .form-input, .stk-inquiry .form-input.has-error { border-color: #ff6b5b; } /* The "your event page" panel (.stk-rb, above) stacks on narrow screens. */ @media (max-width: 1080px) { .stk-rb { grid-template-columns: 1fr; } .stk-rb__screen { margin: 0 20px; } } /* ── The client event page (events module) in the deck's clothes ───────────────── The portal draws .evp-* markup over a :where() floor;
these rules win by plain specificity. Its custom properties carry most of it;
the rest borrows the deck's keys, cue pads and LCD bezel. */ .evp { --evp-accent: var(--stk-purple); --evp-on-accent: #fff; --evp-ink: var(--stk-text); --evp-muted: var(--stk-muted); --evp-line: var(--stk-line); --evp-surface: #121316; --evp-radius: 14px; --evp-ok: var(--stk-play); color: var(--stk-text); } .evp-title { font-family: var(--stk-display); font-weight: 700; font-variation-settings: "wdth" 112; color: var(--stk-silver); } .evp-h2, .evp-h3 { font-family: var(--stk-display); font-weight: 650; color: var(--stk-silver); } .evp-label { font-family: var(--stk-display); color: var(--stk-label); } .evp-tab { background: var(--stk-key); border-color: transparent; border-radius: 8px; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35); } .evp-tab b { border-radius: 5px; font-family: var(--stk-display); color: var(--stk-violet); border-color: currentColor; } .evp-tab.is-current { background: var(--stk-key); color: #fff; box-shadow: 0 0 0 1px var(--stk-c-purple), 0 0 18px -6px var(--stk-c-purple); } .evp-tab.is-current b { background: var(--stk-c-purple); border-color: var(--stk-c-purple); color: #0d0e10; } .evp-hero { background: var(--stk-lcd); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px #000, 0 0 0 6px #101114, 0 0 0 7px #2a2c31; margin: 7px; } .evp-hero-top { font-family: var(--stk-display); } .evp-when { color: var(--stk-violet); } .evp-stat b { font-family: var(--stk-display); color: #fff; } .evp-stat--count b { color: var(--stk-cue); } .evp-step--now .evp-step-bar { background: var(--stk-violet); box-shadow: 0 0 12px var(--stk-c-purple); } .evp-card, .evp-step-panel { background: var(--stk-panel); border: 0; box-shadow: inset 0 0 0 1px #24262b; } .evp-btn { background: var(--stk-key); border: 0; border-radius: 10px; color: var(--stk-silver); font: 650 14px/1 var(--stk-display); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #050506; } .evp-btn:hover { filter: brightness(1.15); } .evp-btn--primary { background: var(--stk-purple); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.3), 0 2px 0 #2a0b47; } .evp-input { background: #101216; border-color: #2d3036; color: #fff; } .evp-input:focus { border-color: var(--stk-violet); box-shadow: 0 0 0 3px rgba(180,124,242,.25); outline: none; } .evp-input[type=date], .evp-input[type=time] { color-scheme: dark; } .evp-chip span, .evp-seg span, .evp-option span { background: #17191d; border-color: #2d3036; } .evp-chip input:checked + span, .evp-seg input:checked + span { background: #1f1630; border-color: var(--stk-violet); color: #fff; } .evp-option input:checked + span { background: #1f1630; border-color: var(--stk-violet); box-shadow: inset 0 0 0 1px var(--stk-violet); } .evp-toc a[aria-current="step"] { background: #1f1630; } .evp-toc a[aria-current="step"] .evp-dot { background: var(--stk-purple); border-color: var(--stk-purple); box-shadow: 0 0 12px -2px var(--stk-c-purple); } .evp-toc a.is-done .evp-dot { background: #2b2d33; border-color: #2b2d33; color: var(--stk-play); } .evp-meter > span { background: var(--stk-violet); box-shadow: 0 0 10px var(--stk-c-purple); } .evp-note { background: #15101f; box-shadow: inset 0 0 0 1px #4b2a73; } .evp-note .evp-label { color: var(--stk-violet); } .evp-sec.is-done i { background: var(--stk-play); box-shadow: 0 0 8px var(--stk-play); } .evp-doc, .evp-address { background: #111317; border-color: #2d3036; } .evp p a, .evp dd a, .evp dt a { color: var(--stk-violet); } .evp-step-head .evp-h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.05; } .evp-card-head .evp-h2 { font-size: 1.5rem; } @media (max-width: 720px) { body { font-size: 16px; } .stk-hero .stk-lockup { justify-self: center; margin: 0 auto; text-align: center; } .stk-head--row { grid-template-columns: 1fr; } .stk-track { grid-template-columns: 1fr; } .stk-readouts { grid-row: auto; grid-column: 1; justify-content: space-between; margin-top: 10px; } .stk-readout { text-align: left; } .stk-load { grid-template-columns: 1fr 1fr; } .stk-load .stk-key { grid-column: 1 / -1; } .stk-deck__body { grid-template-columns: 1fr; padding-top: 18px; } .stk-deck__body > div:first-child { display: flex; gap: 14px; align-items: center; justify-content: space-between; } .stk-transport { display: flex; margin-top: 0; } .stk-round { width: 56px; height: 56px; } .stk-tempo { display: none; } .stk-jogwrap { width: 88%; } .stk-mixer { grid-template-columns: 1fr; padding: 14px; } .stk-ch__fader { height: 70px; } .stk-ch__knobs { display: none; } .stk-ch { gap: 10px; padding: 14px 16px 16px; } .stk-key { letter-spacing: .06em; padding: 0 18px; } .stk-steps { grid-template-columns: 1fr; } .stk-memory { grid-template-columns: 1fr 1fr; padding: 10px; } .stk-mem { height: 150px; } .stk-site-footer .stk-wrap { grid-template-columns: 1fr; } .stk-lg-only { display: none; } .stk-fxon { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media (max-width: 720px) { .stk-inquiry .form { grid-template-columns: 1fr; } }

.gs-margin-vvwfnb { margin-left: 10px !important; }

.gs-margin-t1w94u { margin-left: 10px !important; }

.gs-framing-pcd4yx { --frame-x: 79.3 !important; --frame-y: 0 !important; --frame-z: 1.279 !important; object-fit: cover !important; object-position: calc(var(--frame-x) * 1%) calc(var(--frame-y) * 1%) !important; scale: var(--frame-z) !important; transform-origin: calc(var(--frame-x) * 1%) calc(var(--frame-y) * 1%) !important; clip-path: inset(calc((1 - 1 / var(--frame-z)) * var(--frame-y) * 1%) calc((1 - 1 / var(--frame-z)) * (100 - var(--frame-x)) * 1%) calc((1 - 1 / var(--frame-z)) * (100 - var(--frame-y)) * 1%) calc((1 - 1 / var(--frame-z)) * var(--frame-x) * 1%)) !important; }
/* The header is the deck's hot cue pads: one pad per section of the home page, plus the client's own event page.
   Links point at /#section so they work from every page, the event pages included. Below 1080px a Menu button
   (a checkbox label, no script) opens the pads as a two-column drawer. Header CSS compiles after the site
   stylesheet, so every header rule, responsive ones included, lives here. */
/* Header + hot cue nav */ .stk-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13,14,16,.88);
    backdrop-filter: blur(10px) saturate(1.3);
    border-bottom: 1px solid var(--stk-line);
}

.stk-site-header .stk-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 72px;
}

.stk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.stk-brand .stk-word {
    width: 108px;
    height: auto;
}

.stk-brand .stk-mono {
    width: 34px;
    height: 34px;
}

.stk-cues {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.stk-cue {
    --stk-c: var(--stk-c-purple);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 8px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    background: var(--stk-key);
    color: var(--stk-text);
    font: 600 13.5px/1 var(--stk-body);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.4);
    transition: background-color .2s, box-shadow .2s, color .2s;
}

.stk-cue b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font: 700 11px/1 var(--stk-display);
    color: var(--stk-c);
    box-shadow: inset 0 0 0 1.5px var(--stk-c);
    transition: background-color .2s, color .2s;
}

.stk-cue:hover b, .stk-cue.stk-is-live b {
    background: var(--stk-c);
    color: #0d0e10;
}

.stk-cue.stk-is-live {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--stk-c), 0 0 18px -6px var(--stk-c);
}

.stk-site-header .stk-key {
    min-height: 40px;
    padding: 0 16px;
    font-size: 12.5px;
    white-space: nowrap;
}

.stk-menu-btn {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--stk-key);
    color: var(--stk-silver);
    border-radius: 10px;
    cursor: pointer;
}

.stk-menu-btn svg {
    width: 22px;
    height: 22px;
}

.stk-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.stk-nav-toggle:focus-visible + .stk-menu-btn {
    outline: 2px solid var(--stk-violet);
    outline-offset: 3px;
}

@media (max-width: 1080px) {
    .stk-cues, .stk-site-header .stk-key--head {
        display: none;
    }

    .stk-menu-btn {
        display: grid;
        place-items: center;
    }

    .stk-nav-toggle:checked ~ .stk-cues {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 12px var(--stk-gutter) 18px;
        background: #0d0e10;
        border-bottom: 1px solid var(--stk-line);
        gap: 8px;
    }

    .stk-nav-toggle:checked ~ .stk-cues .stk-cue {
        height: 48px;
    }

}

@media (max-width: 720px) {
    .stk-brand .stk-word {
        width: 92px;
    }

}