/* ============================================================
   RESET & CUSTOM PROPERTIES
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --yellow:  #f5c518;
    --pink:    #e8187d;
    --black:   #0d0d0d;
    --dark:    #181818;
    --dark2:   #222;
    --gray:    #888;
    --white:   #fff;
    --font-display: 'Bebas Neue', Impact, sans-serif;
    --font-ui:      'Oswald', sans-serif;
    --font-body:    'Open Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   UTILITY
   ============================================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.c-yellow { color: var(--yellow); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 30px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/grunge-mask.png');
    background-blend-mode: multiply;
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { opacity: 1; }

.btn-yellow {
    background: var(--yellow);
    color: var(--black);
    border-color: var(--yellow);
}
.btn-yellow::before { background-color: var(--yellow); }
.btn-yellow:hover { border-color: transparent; }

.btn-lg { font-size: 1.15rem; padding: 17px 42px; }

.btn-dark-outline {
    background: transparent;
    color: #111;
    border-color: #111;
}
.btn-dark-outline::before { background-color: #111; }
.btn-dark-outline:hover { color: var(--white); border-color: transparent; }

.btn-light-outline {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}
.btn-light-outline::before { background-color: var(--white); }
.btn-light-outline:hover { color: var(--black); border-color: transparent; }


/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 1.5rem;
    transform: rotate(-3deg);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(13, 13, 13, 0.55);
    backdrop-filter: blur(10px);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 90px;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; margin-top: 10px; }

.logo-img {
    height: 62px;
    width: auto;
}
.logo-img--footer {
    height: 36px;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}
.nav-link {
    position: relative;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    transition: color 0.15s;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: -7px;
    height: 6px;
    background: var(--yellow);
    clip-path: polygon(0 25%, 100% 10%, 100% 80%, 0 90%);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--yellow); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); opacity: 1; }

.btn-book {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    background: var(--yellow);
    color: var(--black);
    padding: 8px 18px;
    border-radius: 4px;
    transition: background 0.15s;
}
.btn-book:hover { background: #d4ab14; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    margin-top: 70px;
    z-index: 2;
}
.hero-bg-img {
    display: block;
    width: 100%;
    height: auto;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, #111);
    pointer-events: none;
    z-index: 1;
}


.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 24px 24px 48px;
    gap: 16px;
}

.hero-title { margin: 0; }

.hero-cta {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 3;
    white-space: nowrap;
    font-size: 1.3rem;
    padding: 18px 48px;
    border-radius: 4px 6px 3px 5px / 5px 3px 6px 4px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    color: var(--yellow);
    border-width: 3px;
    border-color: var(--yellow);
    overflow: hidden;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--yellow);
    background-image: url('../images/grunge-mask.png');
    background-blend-mode: multiply;
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hero-cta span {
    position: relative;
    z-index: 1;
}
.hero-cta:hover {
    transform: translate(-50%, calc(50% - 3px));
    box-shadow: 6px 7px 0px rgba(0,0,0,0.5);
    background: transparent;
    color: var(--black);
    border-color: transparent;
}
.hero-cta:hover::before {
    opacity: 1;
}

.hero-logo-wrap {
    position: relative;
    display: inline-block;
}
.hero-logo-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-43%, -71%);
    width: 127%;
    height: 79%;
    pointer-events: none;
    opacity: 0.8;
    max-width: inherit;
}
.hero-logo {
    position: relative;
    width: min(640px, 82vw);
    height: auto;
}

.hero-subtitle {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    letter-spacing: 0.18em;
    color: var(--pink);
    text-shadow: 0 0 24px rgba(232,24,125,0.8);
}

/* ============================================================
   FEATURES
   ============================================================ */
.features {
    position: relative;
    background: linear-gradient(to bottom, #111111, #000000);
    color: var(--white);
    padding: 60px 0 35px;
}
.features::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: url('../images/divider.png') center / auto 100% repeat-x;
    transform: translateY(50%);
    pointer-events: none;
    z-index: 1;
}

.features-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.features-intro {
    flex: 0 0 360px;
}

.features-heading {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
    font-style: italic;
    transform: rotate(-3deg);
}

.features-intro p {
    color: #bbb;
    font-size: 0.95rem;
    margin-bottom: 28px;
    margin-top: 8px;
}

.features-columns {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr 2px 1fr;
    align-items: start;
    padding: 45px 0 0;
}

.feature-col {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
    align-items: center;
}

.feature-col:first-child { padding-left: 0; }
.feature-col:last-child  { padding-right: 0; }

.feature-col--pink  { color: #ec1580; }
.feature-col--yellow { color: #f5c518; }
.feature-col--green { color: #75c201; }
.feature-col--blue  { color: #0097ec; }

.feature-col-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-style: italic;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: inherit;
    margin-bottom: 12px;
    white-space: nowrap;
}

.feature-underline {
    width: 80px;
    height: 9px;
    display: block;
    margin-bottom: 12px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316.23 24.15' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M53.05,4.48c-1.05.56-2.24.81-4.09.01.65-.52,1.82-1.29,4.09-.01Z'/%3E%3Cpath fill='white' d='M197.52,23.18h-38.42c-3.56.01-6.4-.9-10.11-.27s-8.02.34-11.89.04c-13.16-1.04-28.45,1.25-35.9-.06-6.06-1.07-10.65-.9-16.43.29-5.22,1.08-11.14.73-16.7.8l-11.92.17-2.2-2.26-9.79.52c-3.07.16-5.87-.84-9.11-.73-8.53.28-15.87-.86-15.86-.86-2.26,1.09-4.58,1.33-6.8,1.15-.34-3.05,4.48-1.82,8.66-2.54,3.05-.52,5.85-1.33,8.99-1.15,4.6.25,8.54-.76,13.07-1.49,2.22-.36,4.47.08,6.1-1.69-5.06-.6-9.32.76-14.12.77l-33.47.04c-2.14.56-2.22-2.56,0-2.1,8.32.39,15.65.05,23.48-.85l5.5.6c3.39-2.61,10.06-2.14,17.52-3.2,6.36-.9,12.39-1.41,18.78-1.86,1.66-.12,3.31-1,5.17-.97,3.23.05,6.54,1.6,9.79-.85l-13.41-1.29c-3.14-.3-6.14-.78-9.85-.41-2.18.33-2.17-2.51-.02-2.2,4.6.52,8.51-.13,12.56-.27l39.87-1.38c2.93-.1,5.5-.42,8.3-.51l17.72-.55c8.49-.27,16.56.22,25.01.29,7.78.06,15.21-.37,22.99-.02l15.32.69-3.77,1.98,20.48.13c7.34.05,16.18-.81,21.25,1.54,1.15.53,2.26,1.85,3.91,2.08l5.99.85,23.85.23c12.81.12,25.11,2.41,37.99,1.99,2.41-.08,4.47.24,6.14,1.98l-22.17.33-15.14.41-16.31.39c2.61,2.15,9.44,1.76,15.42,2.2,4.01.3,7.9,1.25,12.51.64,2.19-.32,2.12,2.57.01,2.14-4.02.09-7.27-.53-10.69-.56l-12.79-.13c-3.75-.04-7.25.03-11-.13l-11.76-.5c-3-.13-5.64.16-8.67.07l-24.71-.68c2.67,2.3,5.87,1.59,9.14,1.9s5.74.93,9,1.4c1.23.18,2.82,2.36,5.51,1.18.81,1.14-.18,2.17-1.43,2.04-10.12-.37-20.05-2.78-29.39-1.67,3.07,1.65,6.03.49,9.38.97,1-.52,2.53-.21,2.21,1.56l-17.84-.2Z'/%3E%3Cpath fill='white' d='M258.1,5.55c-2.48.67-5.04.3-7.52.32-.38-.2-.51-.52-.53-.63l7.52-.32c.38.2.51.52.53.63Z'/%3E%3Cpath fill='white' d='M281.11,6.52c-1.81.69-3.72.39-5.52.35-.36-.22-.51-.52-.53-.59,1.81-.69,3.72-.39,5.52-.35.36.22.51.52.53.59Z'/%3E%3Cpath fill='white' d='M264.05,5.48c-1.05.56-2.24.81-4.09.01.65-.52,1.82-1.29,4.09-.01Z'/%3E%3Cpath fill='white' d='M285.05,5.85c1.26.13.88,1.49-.21,1.2-2.25.36-1.66-2.04.21-1.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316.23 24.15' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M53.05,4.48c-1.05.56-2.24.81-4.09.01.65-.52,1.82-1.29,4.09-.01Z'/%3E%3Cpath fill='white' d='M197.52,23.18h-38.42c-3.56.01-6.4-.9-10.11-.27s-8.02.34-11.89.04c-13.16-1.04-28.45,1.25-35.9-.06-6.06-1.07-10.65-.9-16.43.29-5.22,1.08-11.14.73-16.7.8l-11.92.17-2.2-2.26-9.79.52c-3.07.16-5.87-.84-9.11-.73-8.53.28-15.87-.86-15.86-.86-2.26,1.09-4.58,1.33-6.8,1.15-.34-3.05,4.48-1.82,8.66-2.54,3.05-.52,5.85-1.33,8.99-1.15,4.6.25,8.54-.76,13.07-1.49,2.22-.36,4.47.08,6.1-1.69-5.06-.6-9.32.76-14.12.77l-33.47.04c-2.14.56-2.22-2.56,0-2.1,8.32.39,15.65.05,23.48-.85l5.5.6c3.39-2.61,10.06-2.14,17.52-3.2,6.36-.9,12.39-1.41,18.78-1.86,1.66-.12,3.31-1,5.17-.97,3.23.05,6.54,1.6,9.79-.85l-13.41-1.29c-3.14-.3-6.14-.78-9.85-.41-2.18.33-2.17-2.51-.02-2.2,4.6.52,8.51-.13,12.56-.27l39.87-1.38c2.93-.1,5.5-.42,8.3-.51l17.72-.55c8.49-.27,16.56.22,25.01.29,7.78.06,15.21-.37,22.99-.02l15.32.69-3.77,1.98,20.48.13c7.34.05,16.18-.81,21.25,1.54,1.15.53,2.26,1.85,3.91,2.08l5.99.85,23.85.23c12.81.12,25.11,2.41,37.99,1.99,2.41-.08,4.47.24,6.14,1.98l-22.17.33-15.14.41-16.31.39c2.61,2.15,9.44,1.76,15.42,2.2,4.01.3,7.9,1.25,12.51.64,2.19-.32,2.12,2.57.01,2.14-4.02.09-7.27-.53-10.69-.56l-12.79-.13c-3.75-.04-7.25.03-11-.13l-11.76-.5c-3-.13-5.64.16-8.67.07l-24.71-.68c2.67,2.3,5.87,1.59,9.14,1.9s5.74.93,9,1.4c1.23.18,2.82,2.36,5.51,1.18.81,1.14-.18,2.17-1.43,2.04-10.12-.37-20.05-2.78-29.39-1.67,3.07,1.65,6.03.49,9.38.97,1-.52,2.53-.21,2.21,1.56l-17.84-.2Z'/%3E%3Cpath fill='white' d='M258.1,5.55c-2.48.67-5.04.3-7.52.32-.38-.2-.51-.52-.53-.63l7.52-.32c.38.2.51.52.53.63Z'/%3E%3Cpath fill='white' d='M281.11,6.52c-1.81.69-3.72.39-5.52.35-.36-.22-.51-.52-.53-.59,1.81-.69,3.72-.39,5.52-.35.36.22.51.52.53.59Z'/%3E%3Cpath fill='white' d='M264.05,5.48c-1.05.56-2.24.81-4.09.01.65-.52,1.82-1.29,4.09-.01Z'/%3E%3Cpath fill='white' d='M285.05,5.85c1.26.13.88,1.49-.21,1.2-2.25.36-1.66-2.04.21-1.2Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.feature-col p {
    color: var(--white);
    font-size: 0.875rem;
    line-height: 1.55;
}

.feature-divider {
    align-self: stretch;
    clip-path: polygon(0 2%, 100% 0%, 100% 100%, 0 98%);
}

/* ============================================================
   UPCOMING SHOWS
   ============================================================ */
.shows {
    position: relative;
    padding: 80px 0;
    background-image: url('../images/background-3.jpg');
    background-size: cover;
    background-position: center top;
}
.shows::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: url('../images/divider.png') center / auto 100% repeat-x;
    transform: translateY(50%) scaleY(-1);
    pointer-events: none;
    z-index: 0;
}

.shows-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 48px;
    align-items: center;
}

.shows-panel {
    position: relative;
}

.shows-heading {
    display: inline-block;
    background: url('../images/background-title.svg') center / cover no-repeat;
    color: #000;
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 100px 8px 42px;
    margin-bottom: -22px;
    position: relative;
    z-index: 2;
    transform: rotate(-3deg);
}

.shows-list {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 4px;
    overflow: hidden;
    padding-top: 30px;
}

.show-row {
    display: grid;
    grid-template-columns: 110px 180px 1fr 170px;
    align-items: center;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    min-height: 56px;
}

.show-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    min-width: 90px;
}
.show-date time { display: contents; }
.show-month {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
}
.show-day {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
}

.show-venue {
    padding: 6px 14px;
    font-family: var(--font-ui);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
}
.show-place {
    padding: 6px 14px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
}

/* Row colour theming */
.show-row--pink   .show-date { background: transparent; color: #ec1580; }
.show-row--yellow .show-date { background: transparent; color: #f5c518; }
.show-row--green  .show-date { background: transparent; color: #75c201; }
.show-row--blue   .show-date { background: transparent; color: #0097ec; }

/* Ticket button — angled right side via clip-path */
.btn-ticket {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 24px;
    margin: 0 16px;
    white-space: nowrap;
    text-decoration: none;
    background-image: url('../images/grunge-mask.png');
    background-blend-mode: multiply;
    background-size: 100% 100%;
    transition: opacity 0.15s;
}
.btn-ticket:hover { opacity: 0.82; }
.ticket-lightning {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.show-row--pink   .btn-ticket { background-color: #ec1580; color: #fff; }
.show-row--yellow .btn-ticket { background-color: #f5c518; color: #000; }
.show-row--green  .btn-ticket { background-color: #75c201; color: #fff; }
.show-row--blue   .btn-ticket { background-color: #0097ec; color: #fff; }

.show-row--pink   .btn-ticket--free { background: transparent; color: #ec1580; box-shadow: inset 0 0 0 2px #ec1580; }
.show-row--yellow .btn-ticket--free { background: transparent; color: #f5c518; box-shadow: inset 0 0 0 2px #f5c518; }
.show-row--green  .btn-ticket--free { background: transparent; color: #75c201; box-shadow: inset 0 0 0 2px #75c201; }
.show-row--blue   .btn-ticket--free { background: transparent; color: #0097ec; box-shadow: inset 0 0 0 2px #0097ec; }

/* CTA block */
.shows-cta {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px;
    text-align: left;
}
.shows-cta-text {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 12px 28px;
    transform: rotate(-3deg);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.shows-cta-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    z-index: -1;
    filter: url('../images/rough-edges.svg#rough-edges');
}
.shows-cta-text::after {
    content: '';
    position: absolute;
    inset: -7px -12px;
    background: #fff;
    z-index: -2;
    filter: url('../images/rough-edges.svg#rough-edges');
}
.cta-white { color: #fff; display: block; text-transform: uppercase; }
.cta-pink  { color: #ec1580; display: block; font-style: italic; font-size: 1.15em; text-transform: uppercase; }

/* ============================================================
   SETLIST & GALLERY
   ============================================================ */
.setlist-section {
    background: #000;
    padding: 0 0 20px;
}
.setlist-section .section-title { color: var(--white); }

.setlist-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.setlist-list {
    columns: 2;
    column-gap: 32px;
    margin-bottom: 28px;
}
.setlist-list li {
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
}
.setlist-list li::before {
    content: '★';
    color: var(--yellow);
    flex-shrink: 0;
}
.setlist-more {
    color: var(--white) !important;
    font-style: italic;
    letter-spacing: 0.04em;
}
.setlist-list .setlist-more::before { content: none; }
.setlist > .btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 28px;
}
.gallery-item {
    aspect-ratio: 4/3;
    border-radius: 4px;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    overflow: hidden;
}
/* Offset each thumbnail so they show different parts of the photo */
.gallery-item:nth-child(1) { background-position: 20% center; }
.gallery-item:nth-child(2) { background-position: center; }
.gallery-item:nth-child(3) { background-position: 80% center; }
.gallery-item:hover { transform: scale(1.04); filter: brightness(1.2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-cta {
    background: #000;

    padding: 20px 0 80px;
}
.footer-cta .btn { border: none; }

.footer-cta-wrap {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-message { flex: 1; min-width: 280px; }

.footer-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}

.footer-right {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.footer-right-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
.footer-logo-horizontal {
    width: 100%;
    max-width: 480px;
    height: auto;
    opacity: 0.85;
    align-self: center;
}

.footer-contacts {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    font-style: normal;
}

.footer-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0 16px;
}
.footer-contact-item--pink .contact-icon { color: #ec1580; }
.footer-contact-item--green .contact-icon { color: #75c201; }

.contact-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.contact-divider {
    width: 2px;
    height: 64px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.contact-label {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
}
.contact-value {
    font-size: 0.85rem;
    color: var(--gray);
    transition: color 0.15s;
    white-space: nowrap;
}
.contact-value:hover { color: var(--yellow); }

.social-label {
    display: block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    color: var(--yellow);
    margin-bottom: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 28px;
    text-align: center;
}
.social-links { display: flex; gap: 10px; }
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.social-btn:hover { background: #d4ab14; transform: scale(1.1); }

/* Footer bar */
.footer-bar {
    background: #000;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-copy { font-size: 0.8rem; color: var(--gray); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .features-wrap { flex-direction: column; gap: 40px; }
    .features-intro { flex: none; width: 100%; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .shows-wrap { grid-template-columns: 1fr; }
    .setlist-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 70px; left: 0; right: 0;
        background: rgba(13,13,13,0.98);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 12px 0 20px;
        border-bottom: 1px solid rgba(245,197,24,0.15);
    }
    .nav-links.is-open { display: flex; }
    .nav-link, .btn-book {
        display: block;
        padding: 12px 24px;
        width: 100%;
        border-radius: 0;
    }
    .hamburger { display: flex; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cta-wrap { flex-direction: column; }
    .footer-bar-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .show-row { flex-wrap: wrap; gap: 10px; }
}