/* Import Google Fonts (Quicksand for body, Metal Mania for metal-style headings,
   Barlow Condensed for press kit labels) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800&family=Metal+Mania&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* Main CSS - Additional styles */

/* Press Kit Styles - WCAG AA Compliant */

/* Tablet and Mobile Responsive Styles */

.setlist-info {
    max-width: 75ch;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.8;
}

.setlist-info h3 {
    color: #ff6b35;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.setlist-info h3:first-child {
    margin-top: 0;
}

.setlist-info p {
    color: #f0f0f0;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.setlist-info ul {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.setlist-info .btn {
    display: inline-block;
    margin-top: 0.5rem;
}

.setlist-info li {
    color: #f0f0f0;
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.setlist-info strong {
    color: #ffffff;
    font-weight: 600;
}

.contact-info-item .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.contact-info-item .social-links a {
    color: #ff6b35;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    border: 2px solid #ff6b35;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 0.9375rem;
    font-weight: 500;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}

.contact-info-item .social-links a:hover,
.contact-info-item .social-links a:focus {
    background: #ff6b35;
    color: #000000;
    outline: 3px solid #ff8c5a;
    outline-offset: 2px;
}

/* Tablet breakpoint (768px - 968px) */

/* Mobile breakpoint (max-width: 768px) */
@media (max-width: 768px) {
    
    
    .setlist-info {
        font-size: 1rem;
    }
    
    .contact-info-item .social-links {
        flex-direction: column;
    }
    
    .contact-info-item .social-links a {
        width: 100%;
        min-width: auto;
    }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
    
    
    .setlist-info {
        font-size: 0.9375rem;
    }
    
    .setlist-info h3 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }
}

/* Extra small mobile (max-width: 360px) */

/* Custom Maiden Font */
@font-face {
    font-family: 'MaidenFont';
    src: url('../fonts/maidenfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Purgatory (Iron Maiden Font 2) - used for the band name display.
   Served from public/fonts (verbatim, unhashed) via an absolute path so it
   resolves regardless of where the bundled CSS lands. Falls back to MaidenFont. */
@font-face {
    font-family: 'Purgatory';
    src: url('/fonts/purgatory.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Reusable band-name display font */

/* ===== Full-page cutout hero ===== */

/* Transparent layer that centres the band name. The letters are filled with a
   photo via an SVG pattern, so the photo shows through the name while the
   surround shows the hero background artwork. */

/* Band name as scalable SVG so it fills ~80% of the hero at any size/ratio.
   textLength stretches each line to the same width; preserveAspectRatio keeps
   it within the hero height on short/wide viewports. */
.hero-cutout-svg {
    width: 84%;
    height: auto;
    max-height: 82%;
    display: block;
    /* Black outer border (logo style) built from offset zero-blur shadows,
       plus a soft drop shadow for depth. The white inner border is the SVG
       stroke on the text below; together they echo the Ey Up Maiden logo. */
    filter:
        drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000)
        drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)
        drop-shadow(1.4px 1.4px 0 #000) drop-shadow(-1.4px -1.4px 0 #000)
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.hero-cutout-svg-text {
    font-family: 'Purgatory', 'MaidenFont', 'Metal Mania', Impact, sans-serif;
    fill: #fff; /* fallback if the photo pattern fails to resolve */
    fill: url(#heroNamePhoto);
    /* White inner border behind the photo fill (paint-order keeps the photo
       crisp on top). Swap fill to var(--primary-color) for a solid-red,
       logo-exact look. */
    stroke: #ffffff;
    stroke-width: 2.2;
    stroke-linejoin: round;
    paint-order: stroke;
    font-size: 26px;
    font-weight: 400;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    margin-bottom: 40px;
}

/* Section Styles */

.news-preview,
.section {
    padding: 60px 0;
}

.section-dark {
    background: rgba(0, 0, 0, 0.3);
}

/* Quick Links CTA */

/* Button Large */
.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Override section padding for dark/photo gallery sections */
.photo-gallery-section {
    padding: 30px 0 !important;
}

/* Dark sections - but not hire pages, area pages, testimonials, or FAQ */
.section.section-dark:not(.hire-hero):not(.what-we-offer):not(.why-festival):not(.why-tribute):not(.why-wedding):not(.why-local):not(.festival-intro):not(.corporate-intro):not(.wedding-intro):not(.party-intro):not(.theatre-intro):not(.north-intro):not(.midlands-intro):not(.nationwide-intro):not(.yorkshire-intro):not(.pub-intro):not(.faq-section):not(.theatre-experience):not(.wedding-packages):not(.for-programmers):not(.areas-covered):not(.coverage):not(.regional-links):not(.upcoming-gigs):not(.yorkshire-testimonials):not(.north-testimonials):not(.midlands-testimonials) {
    padding: 30px 0 !important;
}

.photo-gallery-controls-section {
    padding: 20px 0 !important;
}

/* Grid Layouts */
.gigs-grid,
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .gigs-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (min-width: 1200px) {
    .gigs-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
}

/* Gig Cards */
.gig-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transform: scale(1);
}

.gig-card.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

.gig-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gig-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.05) 0%, rgba(0, 123, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.gig-card:hover::before {
    transform: scaleX(1);
}

.gig-card:hover::after {
    opacity: 1;
}

.gig-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.3);
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
}

.gig-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 4px;
    border-color: var(--primary-color);
}

.gig-date {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 12px;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
}

.gig-venue {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-light);
    line-height: 1.3;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
}

.gig-venue a {
    color: inherit;
    text-decoration: none;
}

.gig-venue a:hover,
.gig-venue a:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gig-location {
    color: var(--text-muted);
    margin-bottom: 18px;
    font-size: 1rem;
}

.gig-description {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-light);
    font-size: 1rem;
}

/* Expandable description styles */
.gig-description-container {
    margin-bottom: 20px;
}

.gig-description-container .gig-description {
    margin-bottom: 10px;
}

.description-toggle {
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    margin-top: 10px;
}

.description-toggle:hover {
    background: rgba(196, 30, 58, 0.2);
    border-color: var(--primary-color);
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2);
}

.description-toggle .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.description-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

.description-short,
.description-full {
    line-height: 1.6;
}

.gig-actions {
    margin-top: 25px;
    position: relative;
    z-index: 1;
}

.gig-ticket {
    display: block;
    width: 100%;
    background: var(--primary-color);
    color: var(--darker-bg);
    padding: 14px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
    position: relative;
    overflow: hidden;
}

.gig-ticket::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gig-ticket:hover::before {
    width: 300px;
    height: 300px;
}

.gig-ticket:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4);
}

.gig-ticket:active {
    transform: translateY(-1px);
}

.gig-ticket:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Free entry display */
.gig-free-entry {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    margin-top: 0;
    font-size: 1rem;
    border: 2px solid #218838;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    position: relative;
    overflow: hidden;
}

/* Ticket button variations */
.gig-ticket-free {
    background: linear-gradient(135deg, #28a745, #218838) !important;
    color: white !important;
    border-color: #218838 !important;
}

.gig-ticket-free:hover {
    background: linear-gradient(135deg, #218838, #1e7e34) !important;
    border-color: #1e7e34 !important;
}

.gig-ticket-paid {
    background: var(--primary-color) !important;
    color: var(--darker-bg) !important;
    border-color: var(--primary-color) !important;
}

.gig-ticket-paid:hover {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

.gig-ticket-unavailable {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    color: white !important;
    cursor: not-allowed;
    opacity: 0.8;
    border-color: #5a6268 !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2) !important;
}

.gig-ticket-unavailable:hover {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2) !important;
}

.artist-stats {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(196, 30, 58, 0.15);
    padding: 30px 0;
    margin: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

.artist-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.02) 0%, rgba(0, 123, 255, 0.02) 100%);
    pointer-events: none;
}

.artist-stats .container {
    position: relative;
    z-index: 1;
}

.artist-stats-header {
    text-align: center;
    margin-bottom: 25px;
}

.artist-stats-title {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 1.4rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.artist-stats-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    opacity: 0.8;
}

.artist-stats .stats-grid-large {
    max-width: 400px;
    margin: 0 auto;
    gap: 20px;
}

.artist-stats .stat-card {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(196, 30, 58, 0.2);
}

.artist-stats .stat-number {
    font-size: 1.8rem;
}

.artist-stats .stat-label {
    font-size: 0.85rem;
}

.artist-stats-cta {
    text-align: center;
    margin-top: 25px;
}

.artist-stats-cta .btn {
    font-size: 0.9rem;
    padding: 10px 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    text-align: center;
}

.bandsintown-widget-container {
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 10px;
    padding: 40px 0;
    margin: 40px 0;
}

.bandsintown-widget {
    text-align: center;
    color: var(--text-color);
}

.bandsintown-widget h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
}

.bandsintown-widget p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

.bandsintown-widget .btn {
    background: var(--primary-color);
    color: var(--darker-bg);
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
}

.bandsintown-widget .btn:hover {
    background: var(--accent-blue);
    color: var(--darker-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(196, 30, 58, 0.2);
    border-color: var(--accent-blue);
}

/* Featured Tour Section */
.featured-tour {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(26, 0, 0, 0.5));
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.featured-tour::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(196,30,58,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.featured-tour-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.album-artwork-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    perspective: 1000px;
}

.album-art {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 3px solid rgba(196, 30, 58, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--dark-bg);
}

.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder swapped in for missing/broken images (see main.js). The SVG is a
   full artwork tile, so contain it rather than cropping like a real cover. */
.img-fallback {
    object-fit: contain !important;
    background: #111111;
}

.album-art:hover {
    transform: translateY(-10px) rotateY(5deg);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.3);
}

/* Section Headers */
.section-header-centered {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-top: 18px;
    font-weight: 400;
    line-height: 1.75;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Band Stats Section */

.stats-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Band Introduction */

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* News Cards */
.news-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 25px;
}

.news-date {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.news-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-light);
}

.news-excerpt {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Testimonials Section */
.testimonials-section {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(30, 58, 138, 0.2));
}

.testimonials-page-section {
    padding: 60px 0;
}

.testimonials-intro {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.testimonial-card:hover::before {
    transform: scaleX(1);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.testimonial-rating {
    margin-bottom: 20px;
}

.stars {
    color: var(--primary-color);
    font-size: 1.5rem;
    letter-spacing: 2px;
    display: block;
}

.testimonial-text {
    flex: 1;
    margin: 0 0 25px 0;
    padding: 0;
    border: none;
}

.testimonial-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
    font-style: italic;
    margin: 0;
}

.testimonial-author {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(196, 30, 58, 0.2);
}

.testimonial-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    font-style: normal;
    margin-bottom: 5px;
}

.testimonial-venue {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: normal;
}

.testimonials-cta {
    text-align: center;
    margin-top: 40px;
}

.testimonials-cta-section {
    padding: 60px 0;
}

.testimonials-cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.testimonials-cta-content .section-title {
    margin-bottom: 20px;
}

.testimonials-cta-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    line-height: 1.8;
}

.testimonials-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.page-description {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Newsletter */

/* Unified Form Styles */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.form-input,
input[type="text"],
input[type="email"],
input[type="file"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus,
.form-input:focus-visible,
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="file"]:focus,
input[type="file"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(196, 30, 58, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.form-input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

label {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Footer */
.footer {
    background: var(--darker-bg);
    padding: 60px 0 20px;
    border-top: 1px solid rgba(196, 30, 58, 0.2);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
}

.footer-section p {
    color: var(--text-muted);
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(196, 30, 58, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    min-width: 44px;
    min-height: 44px;
    border: 2px solid transparent;
}

.social-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

.social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.icon {
    width: 20px;
    height: 20px;
    fill: var(--text-light);
}

.social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.social-links a:hover .social-icon {
    transform: scale(1.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    color: var(--text-muted);
}

.footer-bottom a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* Loading states */
.loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    position: relative;
    font-style: normal;
}

.loading::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

/* Error states */
.error {
    text-align: center;
    padding: 2rem;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid rgba(220, 53, 69, 0.3);
    border-radius: 15px;
    margin: 1rem 0;
    font-size: 1.1rem;
}

/* Optimize gig card loading */
.gigs-grid {
    min-height: 200px;
    position: relative;
}

/* Skeleton loading state */
.gig-card-skeleton {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.gig-card-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.gig-card-skeleton .skeleton-line {
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}

.gig-card-skeleton .skeleton-line:nth-child(1) {
    width: 40%;
    height: 20px;
}

.gig-card-skeleton .skeleton-line:nth-child(2) {
    width: 80%;
    height: 24px;
}

.gig-card-skeleton .skeleton-line:nth-child(3) {
    width: 60%;
}

.gig-card-skeleton .skeleton-line:nth-child(4) {
    width: 100%;
    height: 80px;
}

.gig-card.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
}

.gig-card.fade-in-up:nth-child(1) { animation-delay: 0.05s; }
.gig-card.fade-in-up:nth-child(2) { animation-delay: 0.1s; }
.gig-card.fade-in-up:nth-child(3) { animation-delay: 0.15s; }
.gig-card.fade-in-up:nth-child(4) { animation-delay: 0.2s; }
.gig-card.fade-in-up:nth-child(5) { animation-delay: 0.25s; }
.gig-card.fade-in-up:nth-child(6) { animation-delay: 0.3s; }
.gig-card.fade-in-up:nth-child(n+7) { animation-delay: 0.35s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for multiple cards */
.gig-card:nth-child(1) { animation-delay: 0.1s; }
.gig-card:nth-child(2) { animation-delay: 0.2s; }
.gig-card:nth-child(3) { animation-delay: 0.3s; }
.gig-card:nth-child(4) { animation-delay: 0.4s; }
.gig-card:nth-child(5) { animation-delay: 0.5s; }
.gig-card:nth-child(6) { animation-delay: 0.6s; }

/* Utility classes */

.hidden { display: none; }
.visible { display: block; }

/* Page Header */
.page-header {
    background: linear-gradient(45deg, var(--secondary-color), var(--darker-bg));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 120px 0 80px;
    text-align: center;
    animation: fadeInDown 0.8s ease-out;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.page-header .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--primary-color);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: fadeInUp 0.8s ease-out 0.2s both;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.page-description {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.75;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gigs Filter */
.gigs-filter {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 50px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.filter-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 12px 24px;
    background: rgba(196, 30, 58, 0.1);
    border: 2px solid rgba(196, 30, 58, 0.3);
    color: var(--text-light);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(196, 30, 58, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.filter-btn:hover::before {
    width: 200px;
    height: 200px;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.2);
}

.filter-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--primary-color), #d6283a);
    border-color: var(--primary-color);
    color: var(--darker-bg);
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
    font-weight: 700;
}

.filter-btn.active::before {
    display: none;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 45px 12px 20px;
    border: 2px solid rgba(196, 30, 58, 0.3);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

.search-box input:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.search-box .search-clear:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.search-box .search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
}

.search-box input:not(:placeholder-shown) ~ .search-clear,
.search-box.has-value .search-clear {
    opacity: 1;
    pointer-events: all;
}

.search-box .search-clear:hover {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.search-results-count {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-box.has-results .search-results-count {
    opacity: 1;
}

/* Gigs Section */
.gigs-section {
    margin-bottom: 80px;
    padding: 40px 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gigs-section:nth-child(1) {
    animation-delay: 0.1s;
}

.gigs-section:nth-child(2) {
    animation-delay: 0.2s;
}

.gigs-section:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    padding: 50px 0;
}

.gigs-section .section-title {
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
}

.gigs-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue));
    border-radius: 2px;
    animation: expandWidth 0.6s ease-out 0.3s both;
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 80px;
    }
}

.no-gigs-message {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    margin: 40px 0;
    position: relative;
    animation: fadeIn 0.6s ease-out;
}

.no-gigs-message::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 3px solid rgba(196, 30, 58, 0.3);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.no-gigs-message p {
    margin-bottom: 20px;
}

.no-gigs-message a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 10px;
    padding: 12px 24px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.no-gigs-message a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(196, 30, 58, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.no-gigs-message a:hover::before {
    width: 300px;
    height: 300px;
}

.no-gigs-message a:hover {
    background: var(--primary-color);
    color: var(--darker-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

/* Gig Card Variations */
.gig-card.upcoming {
    border-color: rgba(196, 30, 58, 0.4);
}

.gig-card.upcoming:hover {
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.4);
}

.gig-card.past {
    opacity: 0.75;
    border-color: rgba(255, 255, 255, 0.1);
}

.gig-card.past:hover {
    opacity: 0.9;
    border-color: rgba(255, 255, 255, 0.2);
}

.gig-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gig-card.upcoming .gig-status {
    background: linear-gradient(135deg, var(--primary-color), #d6283a);
    color: var(--darker-bg);
    box-shadow: 0 2px 10px rgba(196, 30, 58, 0.4);
}

.gig-card.past .gig-status {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.support-acts {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 2px solid rgba(196, 30, 58, 0.2);
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
}

.support-acts strong {
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gig-setlist {
    display: inline-block;
    background: rgba(196, 30, 58, 0.1);
    color: var(--primary-color);
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.gig-setlist:hover {
    background: var(--primary-color);
    color: var(--darker-bg);
}

/* Booking CTA */
.booking-cta {
    background: linear-gradient(45deg, var(--secondary-color), var(--darker-bg));
    padding: 80px 0;
    text-align: center;
}

.feature h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.feature p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Featured Setlist */
.featured-setlist {
    margin-bottom: 60px;
}

.featured-setlist-card {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.15) 0%, rgba(0, 123, 255, 0.1) 100%);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(196, 30, 58, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-setlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue), var(--primary-color));
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

.featured-setlist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(196, 30, 58, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-color: var(--primary-color);
}

.featured-setlist-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.badge-text {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-blue));
    color: var(--darker-bg);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.featured-setlist-content {
    padding: 50px 40px;
    position: relative;
}

.featured-setlist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid rgba(196, 30, 58, 0.3);
    flex-wrap: wrap;
    gap: 20px;
}

.featured-setlist-title-group {
    flex: 1;
    min-width: 300px;
}

.featured-setlist-title {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 3rem;
    color: var(--text-light);
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.featured-setlist-year {
    display: inline-block;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.3), rgba(196, 30, 58, 0.2));
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid rgba(196, 30, 58, 0.4);
}

.featured-setlist-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.featured-setlist-duration {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.25), rgba(196, 30, 58, 0.15));
    color: var(--primary-color);
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid rgba(196, 30, 58, 0.4);
}

.featured-setlist-description {
    margin-bottom: 35px;
    padding: 20px 25px;
    background: rgba(196, 30, 58, 0.15);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
}

.featured-setlist-description p {
    margin: 0;
    color: var(--text-light);
    font-size: 1.15rem;
    line-height: 1.7;
    font-style: italic;
}

.featured-setlist-songs {
    margin-bottom: 30px;
}

.songs-heading {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(196, 30, 58, 0.3);
}

.featured-songs-list {
    list-style: none;
    counter-reset: featured-song-counter;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.featured-song-item {
    counter-increment: featured-song-counter;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(196, 30, 58, 0.2);
    transition: all 0.3s ease;
}

.featured-song-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.song-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-blue));
    color: var(--darker-bg);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.song-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.song-details .song-title {
    color: var(--text-light);
    font-weight: 600;
    font-size: 1rem;
}

.song-details .song-album {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.featured-setlist-notes {
    margin-top: 30px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 12px;
}

.featured-setlist-notes p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.05rem;
}

@media (max-width: 968px) {
    .featured-setlist-content {
        padding: 40px 30px;
    }
    
    .featured-setlist-title {
        font-size: 2.25rem;
    }
    
    .featured-setlist-header {
        flex-direction: column;
    }
    
    .featured-setlist-meta {
        align-items: flex-start;
    }
    
    .featured-songs-list {
        grid-template-columns: 1fr;
    }
    
    .featured-setlist-badge {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 20px;
    }
}

/* Setlist Grid */
.setlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.setlist-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(196, 30, 58, 0.15);
    backdrop-filter: blur(5px);
}

.setlist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.2);
    border-color: rgba(196, 30, 58, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.setlist-card-featured {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.15), rgba(59, 130, 246, 0.1));
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(196, 30, 58, 0.3);
    position: relative;
}

.setlist-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue), var(--primary-color));
    border-radius: 10px 10px 0 0;
}

.setlist-badge {
    display: inline-block;
    background: var(--primary-color);
    color: var(--darker-bg);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 10px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.setlist-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.4);
    border-color: var(--accent-blue);
}

.setlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setlist-header h3 {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    display: inline-block;
    margin-bottom: 0;
    font-size: 1.3rem;
    color: var(--text-light);
}

.setlist-duration {
    background: rgba(196, 30, 58, 0.1);
    color: var(--text-muted);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.setlist-songs ol {
    list-style: none;
    counter-reset: song-counter;
}

.setlist-songs li {
    counter-increment: song-counter;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    padding-left: 30px;
}

.setlist-songs li::before {
    content: counter(song-counter);
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.setlist-songs .song-title {
    color: var(--text-light);
    font-weight: 500;
}

.setlist-songs .song-album {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin-left: 8px;
}

.setlist-description {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(196, 30, 58, 0.08);
    border-left: 3px solid rgba(196, 30, 58, 0.3);
    border-radius: 0 5px 5px 0;
}

.setlist-description p {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    font-size: 0.95rem;
}

.setlist-notes {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 5px;
}

.setlist-notes p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.song-title {
    font-weight: 600;
    color: var(--text-color);
}

.song-album {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-left: 8px;
}

/* Repertoire Controls */
.repertoire-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 12px 15px;
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

.filter-select {
    padding: 12px 15px;
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

/* Navigation Dropdown Styles */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    padding: 12px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus {
    color: var(--primary-color);
    background-color: rgba(196, 30, 58, 0.1);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-dropdown-toggle[aria-expanded="true"] {
    color: var(--primary-color);
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-arrow {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 8px;
    min-width: 200px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu,
.nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu li {
    margin: 0;
}

.nav-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
    background-color: rgba(196, 30, 58, 0.2);
    color: var(--primary-color);
    outline: none;
}

.nav-dropdown-menu a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Mobile dropdown styles */
@media (max-width: 767px) {
    .nav-dropdown {
        width: 100%;
    }
    
    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 16px 12px;
        min-height: 48px;
        font-size: 16px;
    }
    
    .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0;
        margin-left: 20px;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-top: 1px solid rgba(196, 30, 58, 0.3);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    
    .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu {
        max-height: 500px;
        padding: 8px 0;
    }
    
    .nav-dropdown-menu a {
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* Fix select dropdown options */
.filter-select option {
    background: var(--darker-bg);
    color: var(--text-light);
    padding: 8px;
}

/* General select styling for all select elements */
select {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 1rem;
}

select option {
    background: var(--darker-bg);
    color: var(--text-light);
    padding: 8px;
}

select:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

/* Song Grid */
.song-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.song-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(196, 30, 58, 0.1);
    overflow: hidden;
    min-height: 150px;
}

.song-info {
    flex: 2 1 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.song-album-art {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: #111;
}

.song-album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.song-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(196, 30, 58, 0.15);
    border-color: var(--primary-color);
}

.song-card h4 {
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.song-album {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 0;
}

/* Setlist Builder */
.setlist-builder {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
}

/* Featured Article */
.featured-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 60px;
    border: 2px solid rgba(196, 30, 58, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue), var(--primary-color));
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.featured-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(196, 30, 58, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-color: var(--primary-color);
}

.article-image {
    position: relative;
    overflow: hidden;
}

.article-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.article-image img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-article:hover .article-image img {
    transform: scale(1.08);
}

.article-content {
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

.article-date {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-date::before {
    content: '📅';
    font-size: 1rem;
}

.article-category {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.2), rgba(196, 30, 58, 0.1));
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(196, 30, 58, 0.3);
    box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2);
}

.article-content h2 {
    color: var(--text-light);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    display: inline-block;
    margin-bottom: 20px;
    font-size: 2rem;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.featured-article:hover .article-content h2 {
    transform: translateX(4px);
}

.article-content p {
    color: var(--text-muted);
    line-height: 1.75;
    margin-top: 0;
    margin-bottom: 28px;
    font-size: 1.05rem;
}

@media (max-width: 968px) {
    .featured-article {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .article-image img {
        min-height: 300px;
    }
    
    .article-content {
        padding: 40px 30px;
    }
    
    .article-content h2 {
        font-size: 1.75rem;
    }
}

/* Article Body Content (for full article pages) */
.article-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.article-body h2 {
    color: var(--text-light);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.article-body h3 {
    color: var(--text-light);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

.article-body p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
    margin-left: 30px;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.article-body li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.article-body strong {
    color: var(--text-light);
    font-weight: 600;
}

.article-body a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.article-body a:hover {
    color: var(--accent-blue);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 60px;
    transition: all 0.3s ease;
    align-items: stretch;
}

@media (min-width: 768px) {
    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 36px;
    }
}

@media (min-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 40px;
    }
}

.news-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 2px solid rgba(196, 30, 58, 0.25);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-blue), var(--primary-color));
    background-size: 200% 100%;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.news-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.08) 0%, rgba(0, 123, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.news-card:hover::before {
    transform: scaleX(1);
    animation: shimmer 2s ease-in-out infinite;
}

.news-card:hover::after {
    opacity: 1;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(196, 30, 58, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.news-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.news-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.2), rgba(0, 123, 255, 0.1));
}

.news-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 0;
}

.news-card:hover .news-image img {
    transform: scale(1.1);
}

.news-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    align-items: center;
}

.news-date {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-date::before {
    content: '📅';
    font-size: 0.9rem;
}

.news-category {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.25), rgba(196, 30, 58, 0.15));
    color: var(--primary-color);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(196, 30, 58, 0.4);
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.2);
    transition: all 0.3s ease;
}

.news-card:hover .news-category {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.35), rgba(196, 30, 58, 0.25));
    transform: scale(1.05);
}

.news-author {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-left: auto;
}

.news-content h3 {
    color: var(--text-light);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    transform: none;
    display: inline-block;
    margin-bottom: 16px;
    font-size: 1.4rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.news-card:hover .news-content h3 {
    color: var(--primary-color);
}

.news-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0;
    flex-grow: 1;
    font-size: 0.95rem;
}

.news-excerpt {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-link::after {
    content: 'Read More →';
    display: block;
    margin-top: auto;
    padding-top: 16px;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.news-card:hover .news-card-link::after {
    opacity: 1;
    transform: translateY(0);
}

/* Section Header Styling */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 30px;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    border-radius: 2px;
}

.section-header h2 {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 2.5rem;
    color: var(--text-light);
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .section-header {
        margin-bottom: 40px;
        padding-bottom: 24px;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
}

.news-content-container {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(196, 30, 58, 0.2);
    width: 100%;
    box-sizing: border-box;
}

.news-content-container p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-content-container h2,
.news-content-container h3,
.news-content-container h4 {
    color: var(--text-light);
    margin-top: 20px;
    margin-bottom: 10px;
}

.news-content-container ul,
.news-content-container ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.news-content-container li {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 5px;
}

.news-card.expanded .news-content-container {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Make expanded cards take full width */
.news-card.expanded {
    grid-column: 1 / -1;
    max-width: none;
    transform: none;
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.3);
    border-color: var(--accent-blue);
    z-index: 10;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    height: auto;
    min-height: unset;
}

/* Newsletter Signup */

.newsletter-form .form-group {
    flex: 1;
}

.newsletter-form .form-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
}

.newsletter-form .form-input::placeholder {
    color: var(--text-muted);
}

.newsletter-form .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

/* Gallery Controls */

.filter-btn {
    padding: 8px 16px;
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid rgba(196, 30, 58, 0.3);
    color: var(--text-light);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    color: var(--darker-bg);
}

/* Photo Gallery */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Press kit photos: larger display and no link underline on anchors */
.press-photo-gallery {
    margin-top: 2rem;
}

.press-photo-gallery .photo-item {
    display: block;
    text-decoration: none;
}

.press-photo-gallery .photo-item img {
    height: 320px;
}

.photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-item:hover {
    transform: scale(1.02);
}

.photo-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.photo-item:hover img {
    transform: scale(1.1);
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.photo-item:hover .photo-overlay {
    transform: translateY(0);
}

.photo-overlay h3 {
    color: var(--text-light);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 5px;
}

.photo-overlay p {
    color: var(--text-muted);
    font-size: 0.9rem;
}


@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Featured Album */
.featured-album {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
}

.album-preview {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: center;
}

.album-cover img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.album-info h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 10px;
}

.album-info p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.album-stats {
    display: flex;
    gap: 30px;
}

.album-stats span {
    display: block;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.album-stats span::after {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: normal;
    margin-top: 5px;
}

/* Photo Upload */
.photo-upload {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
}

.social-share-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-social .social-icon {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0;
    /* filter removed for original brand color */
}

.btn-social .social-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-light);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.photo-guidelines {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    text-align: left;
}

.photo-guidelines h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.photo-guidelines p {
    color: var(--text-muted);
    margin-bottom: 15px;
}

.photo-guidelines ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.photo-guidelines li {
    color: var(--text-muted);
    padding: 8px 0;
    position: relative;
    padding-left: 25px;
}

.photo-guidelines li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.upload-form .form-group {
    margin-bottom: 20px;
}

.upload-form .form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1rem;
}

.upload-form .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--primary-color);
    color: var(--darker-bg);
    border: none;
    padding: 10px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: var(--accent-blue);
}

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.8);
    padding: 15px;
    border-radius: 5px;
}

.lightbox-caption h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 5px;
}

.lightbox-caption p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(196, 30, 58, 0.2);
    color: var(--darker-bg);
    border: none;
    padding: 15px 20px;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--primary-color);
}

.lightbox-prev {
    left: -60px;
}

.lightbox-next {
    right: -60px;
}

/* Hero title main image */

/* Hero title styling */
.hero-title {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    display: inline-block;
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Contact Page Styles */

.contact-form-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 40px;
    border: 1px solid rgba(196, 30, 58, 0.2);
}

.contact-form-section .section-title {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 30px;
    font-size: 2rem;
}

/* Booking form
   Scoped under .booking-form so the site-wide input/.error rules can't leak in.
   Every field is a native control; these rules only tune readability. */

.booking-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
}

.booking-form[hidden],
.form-success[hidden] {
    display: none;
}

.booking-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.booking-form .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.booking-form label {
    margin: 0;
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.booking-form .field-optional {
    color: var(--text-muted);
    font-weight: 400;
}

.booking-form .field-hint,
.booking-form .field-count {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.booking-form .field-count:empty,
.booking-form [aria-invalid="true"] ~ .field-count {
    display: none;
}

.booking-form .field input,
.booking-form .field select,
.booking-form .field textarea {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    background: #1c1c1c;
    color: var(--text-light);
    font-family: inherit;
    font-size: 1rem; /* 16px: also stops iOS zooming on focus */
    line-height: 1.5;
    text-align: left;
    box-shadow: none;
    box-sizing: border-box;
    /* Native date pickers and select menus render in dark mode to match */
    color-scheme: dark;
}

.booking-form .field textarea {
    min-height: 180px;
    resize: vertical;
}

.booking-form .field input:hover,
.booking-form .field select:hover,
.booking-form .field textarea:hover {
    border-color: rgba(255, 255, 255, 0.65);
}

.booking-form .field input:focus-visible,
.booking-form .field select:focus-visible,
.booking-form .field textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 1px;
    border-color: var(--text-light);
    box-shadow: none;
    background: #1c1c1c;
}

.booking-form .field [aria-invalid="true"] {
    border-color: #ff6b6b;
    border-width: 2px;
}

.booking-form .field-error {
    margin: 0;
    color: #ff8a8a;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.booking-form .form-status {
    padding: 14px 16px;
    border: 2px solid #ff6b6b;
    border-radius: 6px;
    background: rgba(255, 107, 107, 0.08);
    color: var(--text-light);
    line-height: 1.5;
}

.booking-form .form-status ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.booking-form .form-status a {
    color: #ff8a8a;
    text-decoration: underline;
}

.booking-form .form-actions .btn {
    min-width: 220px;
}

.form-success {
    max-width: 640px;
    padding: 24px;
    border: 2px solid #2ecc71;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.08);
}

.form-success:focus {
    outline: none;
}

.form-success h3 {
    margin: 0 0 10px;
    font-family: inherit;
    font-weight: 700;
    color: var(--text-light);
    font-size: 1.3rem;
}

.form-success p {
    margin: 0 0 20px;
    color: var(--text-light);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .booking-form .field-row {
        grid-template-columns: 1fr;
    }

    .booking-form .form-actions .btn {
        width: 100%;
    }
}

/* Honeypot field: off-screen rather than display:none, which some bots skip */
.form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.turnstile-widget:empty {
    display: none;
}

/* Loading state */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Shop Page Styles */
.shop-section {
    padding: 80px 0;
    min-height: calc(100vh - 200px);
}

.shop-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 100%;
}

.shop-images {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.shop-image-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    border: 2px solid rgba(196, 30, 58, 0.25);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.shop-image-wrapper:hover {
    border-color: rgba(196, 30, 58, 0.5);
    box-shadow: 0 8px 30px rgba(196, 30, 58, 0.4);
}

.shop-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: var(--dark-bg);
}

.shop-image-thumbnails {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.thumbnail-button {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.3);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-button:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.thumbnail-button.active {
    border-color: var(--primary-color);
    background: rgba(196, 30, 58, 0.2);
    box-shadow: 0 0 15px rgba(196, 30, 58, 0.4);
}

.thumbnail-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.shop-details {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.product-title {
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.2;
}

.product-price {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.product-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-light);
}

.product-price-note {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.product-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 0;
}

.product-returns {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.product-returns a {
    color: var(--primary-color);
}

.shop-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-label {
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 8px;
    display: block;
}

.form-select {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(196, 30, 58, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.form-select.error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.form-select option {
    background: var(--darker-bg);
    color: var(--text-light);
    padding: 12px;
}

.size-quantities {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    border: 2px solid rgba(196, 30, 58, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.size-quantities.error .size-row {
    border-color: #e74c3c;
}

.size-label {
    color: var(--text-light);
    font-size: 1.05rem;
    font-weight: 500;
}

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.qty-button {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(196, 30, 58, 0.5);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.qty-button:hover {
    background: rgba(196, 30, 58, 0.35);
}

.qty-button:focus-visible,
.qty-stepper .qty-input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Two classes so this outranks the site-wide input[type="number"] rules. */
.qty-stepper .qty-input {
    flex: none;
    width: 52px;
    height: 40px;
    min-height: 40px;
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1.1rem;
    text-align: center;
    -moz-appearance: textfield;
}

.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.order-total {
    margin: 0;
    min-height: 1.5em;
    color: var(--text-light);
    font-weight: 600;
}

.form-error {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
    display: block;
    min-height: 20px;
}

.shop-messages {
    padding: 15px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-messages.success {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.shop-messages.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.shop-messages.warning {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.button-loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--text-light);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

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

.button-text {
    display: inline-block;
}

@media (max-width: 968px) {
    .shop-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .shop-images {
        position: static;
    }

    .product-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .shop-section {
        padding: 60px 0;
    }

    .shop-container {
        gap: 40px;
    }

    .shop-image-wrapper {
        padding: 16px;
    }

    .shop-image-thumbnails {
        gap: 12px;
    }

    .thumbnail-button {
        width: 80px;
        height: 80px;
    }

    .product-title {
        font-size: 1.75rem;
    }

    .product-description {
        font-size: 1rem;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.social-contact h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    display: inline-block;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.social-contact .social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.social-contact .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 110px;
    background: rgba(196, 30, 58, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    padding: 10px;
}

.social-contact .social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.social-contact .social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* FAQ Section */
.faq-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
}

.faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 30px;
    border: 1px solid rgba(196, 30, 58, 0.2);
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(196, 30, 58, 0.15);
    border-color: var(--primary-color);
}

.faq-item h3 {
    color: var(--primary-color);
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    display: inline-block;
    margin-bottom: 18px;
    font-size: 1.25rem;
    line-height: 1.4;
}

.faq-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

/* Videos Section */
.videos-section {
    padding: 80px 0;
    background: rgba(255, 255, 255, 0.02);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Videos Preview Section */

/* Responsive Design */
@media (max-width: 768px) {
    /* Enhanced touch targets and spacing */
    .nav-container {
        padding: 0 16px;
    }
    
    .nav-link {
        padding: 16px 12px;
        min-height: 48px;
    }
    
    .form-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="file"],
    input[type="number"],
    textarea,
    select {
        padding: 16px;
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .gigs-grid,
    .news-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .gig-card,
    .news-card {
        padding: 24px;
    }
    
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }


    .bandsintown-widget h3 {
        font-size: 1.5rem;
    }

    .bandsintown-widget p {
        font-size: 1rem;
    }

    .gig-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .filter-btn {
        padding: 16px 24px;
        min-height: 48px;
        font-size: 16px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        padding: 16px;
        min-height: 48px;
        font-size: 16px;
    }
    
    /* Make all buttons full width on mobile */
    .btn {
        width: 100%;
        max-width: none;
    }
    
    .setlist-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .repertoire-controls {
        flex-direction: column;
        gap: 16px;
    }
    
    .song-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    
    .featured-article {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
    
    .album-preview {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .album-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin: 10px;
        min-width: 48px;
        min-height: 48px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 80%;
    }
    
    /* Contact page responsive */
    
    .contact-form-section {
        padding: 25px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .social-contact .social-links {
        justify-content: center;
        gap: 12px;
    }
    
    .social-contact .social-links a {
        flex: 0 1 calc(50% - 6px);
        min-width: 120px;
        height: 60px;
    }
    
    /* Share options mobile optimization */
    
    .social-share-buttons {
        gap: 10px;
    }
    
    .btn-secondary {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .photo-guidelines {
        padding: 20px;
        margin-top: 20px;
        text-align: center;
    }
    
    .photo-guidelines h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .photo-guidelines li {
        padding: 6px 0;
        padding-left: 22px;
        text-align: left;
    }
    
    /* Enhanced footer for mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-section ul li a {
        padding: 8px 0;
        min-height: 32px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile optimizations */
    .container {
        padding: 0 16px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .btn {
        padding: 16px 24px;
        font-size: 16px;
        min-height: 48px;
        width: 100%;
        max-width: none;
    }
    
    .setlist-card,
    .news-card,
    .photo-item {
        margin-bottom: 20px;
    }
    
    .song-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .photo-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .filter-btn {
        text-align: center;
        padding: 16px 20px;
        min-height: 48px;
    }
    
    /* Enhanced form inputs for small screens */
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="file"],
    input[type="number"],
    textarea,
    select {
        padding: 16px;
        min-height: 48px;
        font-size: 16px;
    }
    
    /* Better spacing for small screens */
    
    .news-preview,
    .section {
        padding: 30px 0;
    }
    
    /* Hero content overflow protection */
    
    .gig-card,
    .news-card {
        padding: 20px;
    }
    
    /* Share options extra small mobile optimization */
    
    
    .btn-secondary {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
    
    .photo-guidelines {
        padding: 16px;
        margin-top: 16px;
    }
    
    /* Improved navigation for small screens */
    .nav-menu {
        padding: 16px;
    }
    
    .nav-link {
        padding: 16px 12px;
        min-height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    /* Extra small mobile devices */
    
    .btn {
        padding: 14px 20px;
        font-size: 14px;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 320px) {
    /* Very small mobile devices */
}

/* About Page Styles */

.community {
    padding: 80px 0;
    background: rgba(255, 255, 255, 0.02);
}

.community .section-title {
    text-align: center;
    display: block;
    width: 100%;
    transform: none;
    margin-left: auto;
    margin-right: auto;
}

.page-motto {
    font-size: 1.3rem;
    color: var(--accent-blue);
    margin-top: 20px;
    font-weight: 600;
    font-family: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    
    animation: pulse 2s infinite;
}

@media print {
    .header,
    .footer,
    .nav-toggle {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .hero {
        height: auto;
        padding: 40px 0;
    }
}

/* Privacy Policy Page Styles */

/* Cookie Notice Styles */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-top: 2px solid var(--accent-gold);
    color: var(--text-color);
    padding: 15px 20px;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.cookie-notice.show {
    transform: translateY(0);
}

.cookie-notice-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cookie-text a {
    color: var(--accent-blue);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cookie-text a:hover {
    color: var(--primary-color);
}

.cookie-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.cookie-btn {
    background: transparent;
    border: 1px solid var(--accent-gold);
    color: var(--accent-blue);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-btn:hover {
    background: var(--accent-blue);
    color: var(--bg-dark);
}

.cookie-btn.cookie-btn-primary {
    background: var(--accent-blue);
    color: var(--bg-dark);
}

.cookie-btn.cookie-btn-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-dark);
}

.cookie-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cookie-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-blue);
}

/* Adjust body padding when cookie notice is shown */
body.cookie-notice-active {
    padding-bottom: 80px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-notice-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .cookie-text {
        font-size: 0.85rem;
    }
    
    .cookie-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cookie-btn {
        width: 100%;
        padding: 10px 16px;
    }
    
    body.cookie-notice-active {
        padding-bottom: 120px;
    }
}

/* Responsive styles for new homepage sections */
@media (max-width: 968px) {
    .featured-tour-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .album-artwork-grid {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .stats-grid-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-tour {
        padding: 60px 0;
    }
    
    .stats-grid-large {
        grid-template-columns: 1fr;
    }
    
    .section-header-centered {
        margin-bottom: 30px;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-card {
        padding: 25px;
    }
    
    .testimonials-cta-buttons {
        flex-direction: column;
    }
    
    .testimonials-cta-buttons .btn {
        width: 100%;
    }
    
    /* News page responsive */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .news-card {
        min-height: auto;
    }
    
    .news-image {
        height: 200px;
    }
    
    .news-content {
        padding: 20px;
    }
    
    .news-content h3 {
        font-size: 1.2rem;
    }
    
    .featured-article {
        margin-bottom: 40px;
    }
    
    .article-content {
        padding: 30px 24px;
    }
    
    .article-content h2 {
        font-size: 1.5rem;
    }
}

/* Hire Page Styles */

.what-we-offer {
    padding: 100px 0;
}

.hire-testimonials {
    padding: 100px 0;
}

/* Features Grid (used in hire subpages) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    padding: 0 20px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 35px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.2);
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    line-height: 1.4;
    font-weight: 600;
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Event Types Grid (used in corporate page) */
.event-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.event-type-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 25px;
}

.event-type-item h3 {
    font-size: 1.125rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.event-type-item p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Section Content (used in various hire pages) */
.section-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.section-content p {
    margin-bottom: 28px;
    line-height: 1.85;
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-content p:last-child {
    margin-bottom: 0;
}

.section-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.section-content a:hover {
    color: var(--accent-blue);
    text-decoration-thickness: 2px;
}

/* Packages Grid (used in weddings page) */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.package-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 30px;
}

.package-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.package-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Occasions Grid (used in private parties page) */
.occasions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.occasion-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 25px;
}

.occasion-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.occasion-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Practical/Requirements Content */
.practical-content,
.requirements-content,
.tech-content,
.venue-content,
.travel-content,
.programmers-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.tech-item {
    margin-bottom: 40px;
}

.tech-item:last-child {
    margin-bottom: 0;
}

.tech-item h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.tech-item p {
    color: var(--text-light);
    line-height: 1.7;
}

.practical-item,
.venue-item,
.travel-item,
.programmers-item {
    margin-bottom: 40px;
}

.practical-item:last-child,
.venue-item:last-child,
.travel-item:last-child,
.programmers-item:last-child {
    margin-bottom: 0;
}

.practical-item h3,
.venue-item h3,
.travel-item h3,
.programmers-item h3 {
    font-size: 1.25rem;
    margin-bottom: 18px;
    color: var(--primary-color);
}

.practical-item p,
.venue-item p,
.travel-item p,
.programmers-item p {
    color: var(--text-light);
    line-height: 1.85;
    font-size: 1.05rem;
    margin-bottom: 0;
}

.practical-item ul,
.tech-item ul,
.venue-item ul {
    list-style: none;
    padding: 0;
}

.practical-item ul li,
.tech-item ul li,
.venue-item ul li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: var(--text-light);
}

.practical-item ul li::before,
.tech-item ul li::before,
.venue-item ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Areas Grid (used in location pages) */
.areas-covered {
    padding: 80px 0;
}

.areas-covered .section-title {
    margin-bottom: 50px;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    margin-top: 50px;
    padding: 0 20px;
}

.area-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 40px 35px;
}

.area-item h3 {
    font-size: 1.3rem;
    margin-bottom: 22px;
    color: var(--primary-color);
    line-height: 1.4;
    font-weight: 600;
}

.area-item ul {
    list-style: none;
    padding: 0;
}

.area-item ul li {
    padding: 12px 0;
    color: var(--text-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.7;
    font-size: 1.05rem;
}

.area-item ul li:last-child {
    border-bottom: none;
}

/* Venues/Regional Content */
.venues-content,
.regional-grid,
.coverage-grid {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.venues-content ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.venues-content ul li {
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 1.05rem;
    transition: background 0.3s ease;
}

.venues-content ul li:hover {
    background: rgba(255, 255, 255, 0.08);
}

.regional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    padding: 0 20px;
}

.regional-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(196, 30, 58, 0.2);
    border-radius: 15px;
    padding: 35px;
    text-decoration: none;
    color: var(--text-light);
    transition: all 0.3s ease;
    display: block;
}

.regional-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.3);
}

.regional-card h3 {
    font-size: 1.5rem;
    margin-bottom: 18px;
    color: var(--primary-color);
}

.regional-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

.coverage {
    padding: 80px 0;
}

.coverage-content {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
}

.coverage-content > p {
    margin-bottom: 35px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--text-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.coverage-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: 12px;
    padding: 35px;
}

.coverage-item h3 {
    font-size: 1.25rem;
    margin-bottom: 18px;
    color: var(--primary-color);
}

.coverage-item p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

.coverage-motto {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 50px;
    font-style: italic;
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* Travel Logistics Section */
.travel-logistics {
    padding: 80px 0;
}

.travel-content {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
}

.travel-content .section-title {
    margin-bottom: 45px;
}

/* Regional Links Section */
.regional-links {
    padding: 80px 0;
}

.regional-links .section-title {
    margin-bottom: 35px;
}

.regional-links .container > p {
    text-align: center;
    margin-bottom: 45px;
    font-size: 1.15rem;
    line-height: 1.85;
    padding: 0 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-light);
}

/* CTA Content */
.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-content .section-title {
    margin-bottom: 35px;
    line-height: 1.3;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: var(--text-light);
    line-height: 1.85;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Included List */
.included-list {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
}

.included-list li {
    padding: 15px 0;
    padding-left: 35px;
    position: relative;
    color: var(--text-light);
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.included-list li:last-child {
    border-bottom: none;
}

.included-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.5rem;
}

/* Promoters CTA */
.promoters-cta,
.programmers-cta {
    margin-top: 40px;
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Availability CTA */
.availability-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Mobile Responsive for Hire Pages */
@media (max-width: 768px) {
    
    
    .features-grid,
    .event-types-grid,
    .packages-grid,
    .occasions-grid,
    .areas-grid,
    .regional-grid,
    .coverage-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    
    .availability-cta {
        flex-direction: column;
    }
    
    
    .what-we-offer,
    .hire-testimonials {
        padding: 60px 0;
    }
    
    .festival-intro,
    .corporate-intro,
    .wedding-intro,
    .party-intro,
    .theatre-intro,
    .north-intro,
    .midlands-intro,
    .nationwide-intro,
    .yorkshire-intro,
    .pub-intro,
    .technical-specs,
    .venue-requirements,
    .practical-info,
    .technical-requirements,
    .for-promoters,
    .venues-played,
    .why-festival,
    .why-tribute,
    .why-wedding,
    .why-local,
    .theatre-experience,
    .wedding-packages,
    .for-programmers,
    .upcoming-gigs,
    .yorkshire-testimonials,
    .north-testimonials,
    .midlands-testimonials,
    .areas-covered,
    .coverage,
    .travel-logistics,
    .regional-links,
    .festival-cta,
    .corporate-cta,
    .wedding-cta,
    .party-cta,
    .theatre-cta,
    .yorkshire-cta,
    .north-cta,
    .midlands-cta,
    .nationwide-cta,
    .availability {
        padding: 50px 0;
    }
    
    .faq-section {
        padding: 60px 0;
    }
    
    .faq-item {
        padding: 25px;
    }
}

/* Intro sections for hire subpages */
.festival-intro,
.corporate-intro,
.wedding-intro,
.party-intro,
.theatre-intro,
.north-intro,
.midlands-intro,
.nationwide-intro,
.yorkshire-intro,
.pub-intro {
    padding: 80px 0;
}

.theatre-intro .container,
.wedding-intro .container,
.yorkshire-intro .container,
.north-intro .container,
.midlands-intro .container,
.nationwide-intro .container {
    padding: 0 20px;
}

.theatre-intro .section-title,
.wedding-intro .section-title,
.yorkshire-intro .section-title,
.north-intro .section-title,
.midlands-intro .section-title,
.nationwide-intro .section-title {
    margin-bottom: 35px;
    line-height: 1.3;
}

.festival-intro .section-content,
.corporate-intro .section-content,
.wedding-intro .section-content,
.party-intro .section-content,
.theatre-intro .section-content,
.north-intro .section-content,
.midlands-intro .section-content,
.nationwide-intro .section-content,
.yorkshire-intro .section-content,
.pub-intro .section-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.theatre-intro .lead,
.wedding-intro .lead,
.yorkshire-intro .lead,
.north-intro .lead,
.midlands-intro .lead,
.nationwide-intro .lead {
    font-size: 1.25rem;
    line-height: 1.85;
    margin-top: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Technical specs sections */
.technical-specs,
.venue-requirements,
.practical-info,
.technical-requirements {
    padding: 80px 0;
}

.specs-content,
.requirements-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.specs-list {
    display: grid;
    gap: 40px;
    margin-top: 30px;
}

.specs-list h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    margin-top: 0;
}

.specs-list ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    margin-top: 15px;
}

.specs-list ul li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: var(--text-light);
}

.specs-list ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.specs-cta {
    margin-top: 40px;
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* For promoters section */
.for-promoters {
    padding: 80px 0;
}

.promoters-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.promoters-content ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.promoters-content ul li {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: var(--text-light);
}

.promoters-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Venues played section */
.venues-played {
    padding: 80px 0;
}

.venues-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.venues-played .section-title {
    margin-bottom: 45px;
}

.venues-content ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.venues-content ul li {
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 1.05rem;
    transition: background 0.3s ease;
}

.venues-content ul li:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Why sections */
.why-festival,
.why-tribute,
.why-wedding,
.why-local {
    padding: 80px 0;
}

/* Theatre and wedding specific sections */
.theatre-experience,
.wedding-packages,
.for-programmers {
    padding: 80px 0;
}

/* Area page specific sections */
.upcoming-gigs {
    padding: 80px 0;
}

.yorkshire-testimonials,
.north-testimonials,
.midlands-testimonials {
    padding: 80px 0;
}

/* Typography optimizations for area pages */
.areas-covered p,
.venues-played p,
.coverage p,
.travel-logistics p,
.regional-links p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-light);
}

/* Improve readability of all text content on area pages */
.area-item p,
.coverage-item p,
.regional-card p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Better spacing for paragraphs in area page sections */
.areas-covered .container > p,
.venues-played .container > p,
.coverage .container > p {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    text-align: center;
    padding: 0 20px;
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-light);
}

/* Optimize body text readability across area pages */
.areas-covered,
.venues-played,
.coverage,
.travel-logistics,
.regional-links,
.upcoming-gigs {
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Ensure proper text contrast */
.area-item,
.coverage-item,
.regional-card,
.feature-card {
    color: var(--text-light);
}

/* Optimize text block widths for readability (65-75 characters) */
.areas-covered .container,
.venues-played .container,
.coverage .container,
.travel-logistics .container,
.regional-links .container,
.upcoming-gigs .container {
    max-width: 850px;
}

/* Better paragraph spacing */
.areas-covered p,
.venues-played p,
.coverage p,
.travel-logistics p,
.regional-links p,
.upcoming-gigs p {
    margin-bottom: 25px;
}

.areas-covered p:last-child,
.venues-played p:last-child,
.coverage p:last-child,
.travel-logistics p:last-child,
.regional-links p:last-child,
.upcoming-gigs p:last-child {
    margin-bottom: 0;
}

/* Improve list readability */
.area-item ul,
.coverage-item ul {
    margin-top: 10px;
}

.area-item ul li:first-child,
.coverage-item ul li:first-child {
    padding-top: 0;
}

/* Better link readability */
.venues-content a,
.section-content a,
.coverage-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
    font-weight: 500;
}

.venues-content a:hover,
.section-content a:hover,
.coverage-content a:hover {
    color: var(--accent-blue);
    text-decoration-thickness: 2px;
}


/* Where We Play section on hire page */

/* CTA sections */
.festival-cta,
.corporate-cta,
.wedding-cta,
.party-cta,
.theatre-cta,
.yorkshire-cta,
.north-cta,
.midlands-cta,
.nationwide-cta {
    padding: 80px 0;
}

/* Availability section */
.availability {
    padding: 80px 0;
}

/* Mobile responsive for hire subpages */
@media (max-width: 768px) {
    .festival-intro,
    .corporate-intro,
    .wedding-intro,
    .party-intro,
    .theatre-intro,
    .north-intro,
    .midlands-intro,
    .nationwide-intro,
    .yorkshire-intro,
    .pub-intro,
    .technical-specs,
    .venue-requirements,
    .practical-info,
    .for-promoters,
    .venues-played,
    .why-festival,
    .why-tribute,
    .why-wedding,
    .why-local,
    .festival-cta,
    .corporate-cta,
    .wedding-cta,
    .party-cta,
    .theatre-cta,
    .yorkshire-cta,
    .north-cta,
    .midlands-cta,
    .nationwide-cta,
    .availability {
        padding: 40px 0;
    }
    
    .specs-list {
        gap: 20px;
    }
}


/* ==========================================================================
   Press kit (press-kit.html): "Headliner" layout with role picker
   ========================================================================== */
.pk {
    --pk-accent: var(--primary-color);
    --pk-ink: #f2efe9;
    --pk-muted: #a9a39a;
    --pk-soft: #d8d3cb;
    --pk-line: #2a2a2a;
    --pk-card: #151515;
    --pk-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --pk-display: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    background: #0a0a0a;
    color: var(--pk-ink);
    font-size: 17px;
}

.pk h1, .pk h2, .pk h3 { margin: 0; }
.pk p { margin: 0; }
.pk a { color: #ff6b6b; }
.pk a:hover, .pk a:focus { color: #ff9a9a; }
.pk strong { color: #fff; }
.pk [hidden] { display: none !important; }

.pk-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: max(16px, 5vw);
    padding-right: max(16px, 5vw);
    box-sizing: border-box;
}

.pk-accent { color: var(--pk-accent); }
.pk-muted { color: var(--pk-muted); }

.pk-eyebrow,
.pk-label {
    font-family: var(--pk-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    color: var(--pk-accent);
}

.pk-h2 {
    font-family: var(--pk-display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.05;
    color: #fff;
}

.pk-h3 {
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;
}

.pk .pk-h3 { margin-bottom: 8px; }
.pk-h3-lg { font-size: 30px; }

/* Hero */
.pk-hero {
    position: relative;
    min-height: min(720px, 92vh);
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.pk-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.pk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.35) 45%, #0a0a0a 100%);
}

.pk-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 56px;
}

.pk .pk-eyebrow-light {
    color: #ffb3b3;
    letter-spacing: 0.24em;
    font-size: 15px;
    margin-bottom: 14px;
}

.pk-hero-logo {
    width: min(560px, 80vw);
    display: block;
    margin-bottom: 18px;
}

.pk-hero-title {
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 66px);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.pk .pk-hero-lede {
    margin-top: 18px;
    max-width: 640px;
    font-size: 19px;
    color: var(--pk-soft);
}

/* Role picker */
.pk-roles {
    background: #141414;
    border-top: 1px solid var(--pk-line);
    border-bottom: 1px solid var(--pk-line);
}

.pk-roles-inner {
    padding-top: 28px;
    padding-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.pk-roles-title {
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: 30px;
    text-transform: uppercase;
}

.pk-role-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pk-role {
    min-height: 48px;
    padding: 0 22px;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: 2px solid #555;
    background: transparent;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pk-role:hover { border-color: var(--pk-accent); }

.pk-role[aria-pressed="true"] {
    background: var(--pk-accent);
    border-color: var(--pk-accent);
}

.pk-role:focus-visible,
.pk-tab:focus-visible,
.pk-btn-outline:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Quick facts */
.pk-facts {
    background: #111;
    border-bottom: 1px solid var(--pk-line);
}

.pk-facts-grid,
.pk-timings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.pk .pk-facts-grid {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.pk-facts-grid > div {
    padding: 24px;
    border-right: 1px solid var(--pk-line);
}

.pk-facts-grid > div:last-child { border-right: 0; }

.pk-facts dt,
.pk-timings dt {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pk-muted);
}

.pk-facts dd,
.pk-timings dd {
    margin: 4px 0 0;
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
}

/* Sections and layout */
.pk-section { padding: 88px 0 24px; }

.pk-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}

.pk .pk-section-head .pk-h2 + p { margin-top: 8px; }
.pk-head-note { max-width: 440px; }
.pk-head-note-wide { max-width: 720px; }

.pk-grid { display: grid; gap: 20px; }
.pk-grid-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.pk-grid-210 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.pk-grid-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pk-grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.pk-grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.pk-grid-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.pk-card {
    background: var(--pk-card);
    border: 1px solid var(--pk-line);
    padding: 22px;
}

.pk .pk-card p + p { margin-top: 10px; }

.pk-btn-outline {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    background: transparent;
    color: var(--pk-ink);
    border: 1px solid #555;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.pk-btn-outline:hover { border-color: var(--pk-ink); }

.pk-link-caps {
    font-family: var(--pk-condensed);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
}

.pk-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--pk-soft);
}

/* Copy and paste */
.pk-blurb {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pk-blurb-text {
    flex-grow: 1;
    white-space: pre-line;
}

.pk-blurb .pk-btn-outline { align-self: flex-start; }

/* Story */
.pk-split,
.pk-two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 48px;
}

.pk-split-narrow {
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pk-split-wide {
    flex: 2 1 520px;
    min-width: 0;
}

.pk-bio-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--pk-soft);
    padding-top: 76px;
}

.pk .pk-lead {
    font-size: 21px;
    line-height: 1.5;
    color: #fff;
}

.pk-bio-img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}

.pk-pull {
    margin: 0;
    border-top: 4px solid var(--pk-accent);
    padding-top: 16px;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    text-transform: uppercase;
}

/* Line-up */
.pk-section .pk-h2 + .pk-grid { margin-top: 28px; }

.pk .pk-member {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pk-member img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: #1d1d1d;
}

.pk-member-body { padding: 18px; }
.pk .pk-member-body .pk-h3 { font-size: 26px; margin-bottom: 4px; }
.pk .pk-member-body p:last-child { margin-top: 6px; font-size: 15px; color: #c9c3ba; line-height: 1.5; }

/* Photos */
.pk-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 12px;
}

.pk-mosaic a { display: block; overflow: hidden; }

.pk-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pk-mosaic a:hover img { transform: scale(1.04); }
.pk-mosaic-hero { grid-column: span 2; grid-row: span 2; }
.pk-mosaic-tall { grid-row: span 2; }
.pk-mosaic-wide { grid-column: span 2; }

.pk-all-photos { margin-top: 20px; }
.pk-all-photos summary { list-style: none; }
.pk-all-photos summary::-webkit-details-marker { display: none; }
.pk-all-photos[open] summary { margin-bottom: 8px; }
.pk .pk-credit { margin-top: 16px; font-size: 15px; }

/* Quotes */
.pk-col {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pk-quote {
    margin: 0;
    padding: 24px 26px;
    background: var(--pk-card);
    font-family: var(--pk-condensed);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 500;
}

.pk-quote footer {
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--pk-muted);
    margin-top: 10px;
}

.pk-col .pk-h3-lg { padding-top: 14px; }

.pk-describe {
    border-left: 4px solid var(--pk-accent);
    padding: 4px 0 4px 18px;
}

/* Setlist */
.pk .pk-setlist {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.pk-setlist img {
    flex: 1 1 320px;
    max-width: 460px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.pk-setlist-body {
    flex: 2 1 420px;
    min-width: 0;
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--pk-soft);
}

.pk-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pk-chips li {
    padding: 8px 14px;
    border: 1px solid #555;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
}

/* Logos and artwork */
.pk .pk-asset {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pk-asset-preview {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #1e1e1e;
}

.pk-asset-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.pk-asset-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pk-asset-name { font-weight: 600; }
.pk-asset-meta { font-size: 14px; color: var(--pk-muted); flex-grow: 1; }

.pk-asset-body a {
    margin-top: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

/* Tech and stage */
.pk .pk-timings {
    gap: 1px;
    background: var(--pk-line);
    border: 1px solid var(--pk-line);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0 0 32px;
}

.pk-timings > div { background: #111; padding: 18px 20px; }
.pk .pk-timings .pk-timing-note { font-family: var(--font-secondary); font-weight: 400; font-size: 13px; color: var(--pk-muted); }
.pk-tech-notes { margin-bottom: 32px; }
.pk-tech-notes .pk-card p { color: var(--pk-soft); }

.pk-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pk-line);
    margin-bottom: 32px;
}

.pk-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 16px;
}

.pk-table caption {
    text-align: left;
    padding: 18px 20px;
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--pk-accent);
}

.pk-table th {
    background: #1a1a1a;
    text-align: left;
    padding: 12px 20px;
}

.pk-table td {
    padding: 12px 20px;
    border-top: 1px solid var(--pk-line);
    color: #c9c3ba;
}

.pk-table td:first-child { color: #fff; font-weight: 600; }

.pk-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--pk-line);
    margin-bottom: 24px;
}

.pk-tab {
    min-height: 48px;
    padding: 0 22px;
    background: transparent;
    color: var(--pk-muted);
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
}

.pk-tab[aria-selected="true"] {
    color: #fff;
    border-bottom-color: var(--pk-accent);
}

/* More media */
.pk-media-section { padding-bottom: 96px; }

.pk-media-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    text-decoration: none;
}

.pk .pk-media-card,
.pk .pk-media-card:hover,
.pk .pk-media-card:focus { color: #fff; }

.pk-media-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}

.pk-media-card:hover img { opacity: 0.6; }
.pk-media-card span { position: relative; }

.pk-media-title {
    font-family: var(--pk-condensed);
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
}

/* Contact */
.pk-cta { background: var(--pk-accent); color: #fff; }

.pk-cta-inner {
    padding-top: 72px;
    padding-bottom: 72px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.pk-cta-copy { flex: 1 1 420px; }

.pk-cta-title {
    font-family: var(--pk-condensed);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.95;
    color: #fff;
}

.pk .pk-cta-copy p { margin-top: 12px; font-size: 18px; max-width: 520px; }

.pk-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pk .pk-cta-email,
.pk .pk-cta-secondary {
    min-height: 56px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    font-family: var(--pk-condensed);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.pk .pk-cta-email { background: #0a0a0a; color: #fff; }
.pk .pk-cta-secondary { border: 2px solid #fff; color: #fff; font-size: 18px; min-height: 48px; }
.pk .pk-cta-email:hover,
.pk .pk-cta-email:focus,
.pk .pk-cta-secondary:hover,
.pk .pk-cta-secondary:focus { color: #fff; opacity: 0.85; }

.pk-cta-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-weight: 600;
}

.pk .pk-cta-social a { color: #fff; }

.pk .pk-thanks {
    padding-top: 32px;
    padding-bottom: 32px;
    color: var(--pk-muted);
    font-size: 15px;
}

@media (max-width: 600px) {
    .pk-section { padding-top: 64px; }
    .pk-bio-text { padding-top: 0; }
    .pk-bio-img { height: 360px; }
    .pk-facts-grid > div { border-right: 0; border-bottom: 1px solid var(--pk-line); }
    .pk-role { flex: 1 1 calc(50% - 10px); padding: 0 12px; font-size: 18px; }
    .pk-mosaic-hero { grid-column: auto; grid-row: span 1; }
    .pk-mosaic-tall { grid-row: span 1; }
    .pk-mosaic-wide { grid-column: auto; }
    .pk .pk-cta-email { font-size: 18px; padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-mosaic img,
    .pk-media-card img,
    .pk-role { transition: none; }
}

/* ==========================================================================
   Site design framework ("ui-"): shared building blocks for the redesigned
   pages. Same look as the press kit: black ground, red accent, MaidenFont
   section titles, Barlow Condensed labels and buttons, Quicksand body.
   ========================================================================== */
.ui {
    --ui-accent: var(--primary-color);
    --ui-ink: #f2efe9;
    --ui-muted: #a9a39a;
    --ui-soft: #d8d3cb;
    --ui-line: #2a2a2a;
    --ui-card: #151515;
    --ui-panel: #111;
    --ui-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --ui-display: 'MaidenFont', 'Metal Mania', cursive, sans-serif;
    background: #0a0a0a;
    color: var(--ui-ink);
    font-size: 17px;
    line-height: 1.6;
}

.ui h1, .ui h2, .ui h3, .ui h4 { margin: 0; }
.ui p { margin: 0; }
.ui a { color: #ff6b6b; }
.ui a:hover, .ui a:focus { color: #ff9a9a; }
.ui strong { color: #fff; }
.ui [hidden] { display: none !important; }

.ui-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: max(16px, 5vw);
    padding-right: max(16px, 5vw);
    box-sizing: border-box;
}

.ui-section { padding: 88px 0 24px; }
.ui-section--last { padding-bottom: 96px; }
.ui-section--tight { padding-top: 32px; }

/* Type */
.ui .ui-eyebrow,
.ui .ui-label {
    font-family: var(--ui-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    color: var(--ui-accent);
}

.ui .ui-eyebrow { letter-spacing: 0.24em; font-size: 15px; margin-bottom: 12px; }
.ui .ui-eyebrow--light { color: #ffb3b3; }

.ui-display {
    font-family: var(--ui-display);
    font-weight: 400;
    font-size: clamp(56px, 8vw, 104px);
    line-height: 0.98;
    color: #fff;
}

.ui-shout {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: clamp(36px, 5.5vw, 72px);
    line-height: 0.98;
    text-transform: uppercase;
    color: #fff;
}

.ui-h2 {
    font-family: var(--ui-display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.05;
    color: #fff;
}

.ui-h3 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}

.ui .ui-h3 + p { margin-top: 8px; }
.ui .ui-lede { font-size: 19px; color: var(--ui-soft); max-width: 640px; margin-top: 16px; }
.ui .ui-lead { font-size: 21px; line-height: 1.5; color: #fff; }
.ui-muted { color: var(--ui-muted); }
.ui-accent { color: var(--ui-accent); }

.ui-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}

.ui .ui-section-head p { margin-top: 8px; max-width: 600px; }

.ui-more {
    font-family: var(--ui-condensed);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
}

/* Buttons */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border: 2px solid transparent;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.ui-btn--sm { min-height: 44px; padding: 0 18px; font-size: 17px; }
.ui .ui-btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.ui .ui-btn--outline { background: transparent; border-color: #fff; color: #fff; }
.ui .ui-btn--quiet { background: transparent; border: 1px solid #555; color: var(--ui-ink); }
.ui .ui-btn--dark { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.ui .ui-btn:hover, .ui .ui-btn:focus { color: #fff; opacity: 0.88; }
.ui .ui-btn--quiet:hover { border-color: var(--ui-ink); opacity: 1; }

.ui-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.ui-btn:focus-visible,
.ui-tab:focus-visible,
.ui-chip:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Hero */
.ui-hero {
    position: relative;
    min-height: min(680px, 90vh);
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-hero--mid { min-height: 600px; }
.ui-hero--short { min-height: 420px; }

.ui-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.ui-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.4) 50%, #0a0a0a 100%);
}

.ui-hero--side::after {
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.45) 55%, rgba(10, 10, 10, 0.1) 100%);
}

.ui-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 56px;
}

.ui-hero-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.ui-hero-split > :first-child { flex: 1 1 520px; min-width: 0; }

.ui-hero-logo {
    width: min(560px, 80vw);
    display: block;
    margin-bottom: 18px;
}

/* Plain page header (no photo) */
.ui-page-head { padding: 140px 0 24px; }

/* Next-gig card in the home hero */
.ui .ui-next {
    flex: 0 1 320px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid #3a3a3a;
    border-top: 4px solid var(--ui-accent);
    padding: 20px 22px;
    color: var(--ui-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ui .ui-next:hover { color: var(--ui-ink); border-color: #555; border-top-color: var(--ui-accent); }
.ui-next-date { font-family: var(--ui-condensed); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.ui-next-venue { font-weight: 600; }
.ui-next-meta { font-size: 15px; color: var(--ui-muted); }

/* Stats / fact strips */
.ui-strip {
    background: var(--ui-panel);
    border-top: 1px solid var(--ui-line);
    border-bottom: 1px solid var(--ui-line);
}

.ui .ui-stats {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ui-stats > div { padding: 26px 24px; border-right: 1px solid var(--ui-line); }
.ui-stats > div:last-child { border-right: 0; }
.ui-stats dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ui-muted); }
.ui-stats dd { margin: 4px 0 0; font-family: var(--ui-condensed); font-weight: 800; font-size: 40px; line-height: 1; color: var(--ui-accent); }

/* Stats where the big text leads (hire page) */
.ui-stats--lead dt { font-family: var(--ui-condensed); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ui-accent); }
.ui-stats--lead dd { font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ui-muted); margin-top: 6px; }

/* Milestones (about) */
.ui .ui-milestones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--ui-line);
    border: 1px solid var(--ui-line);
}

.ui-milestones li { background: var(--ui-panel); padding: 22px; color: var(--ui-soft); }
.ui-milestones strong { display: block; font-family: var(--ui-condensed); font-weight: 800; font-size: 40px; line-height: 1; color: var(--ui-accent); margin-bottom: 6px; }

/* Grids and cards */
.ui-grid { display: grid; gap: 16px; }
.ui-grid--180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ui-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ui-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.ui-grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.ui-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    padding: 22px;
}

.ui .ui-card p { color: var(--ui-soft); }
.ui .ui-card p + p { margin-top: 10px; }
.ui .ui-card .ui-label + .ui-h3 { margin-top: 6px; }

.ui .ui-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ui-soft);
}

.ui .ui-card .ui-h3.ui-accent { color: var(--ui-accent); margin-bottom: 10px; }

.ui-split {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
}

.ui-split > .ui-narrow { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ui-split > .ui-wide { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; color: var(--ui-soft); }
.ui-split > .ui-half { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.ui-pull {
    margin: 0;
    border-top: 4px solid var(--ui-accent);
    padding-top: 16px;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    text-transform: uppercase;
}

/* Gig rows */
.ui-gig-list { display: flex; flex-direction: column; gap: 10px; }
.ui-gig-empty { background: var(--ui-card); border: 1px dashed #444; padding: 28px; color: var(--ui-soft); }

/* Feature panel (image + copy) */
.ui .ui-feature {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.ui-feature > img {
    flex: 1 1 320px;
    max-width: 460px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ui-feature-body {
    flex: 2 1 420px;
    min-width: 0;
    padding: clamp(24px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--ui-soft);
}

.ui-feature-body .ui-btn-row { margin-top: 4px; }

/* Band members */
.ui .ui-member {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    color: var(--ui-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.ui .ui-member:hover { color: var(--ui-ink); border-color: #444; }
.ui-member img { width: 100%; height: 230px; object-fit: cover; object-position: center top; display: block; background: #1d1d1d; }
.ui-member-name { padding: 14px 16px 0; font-family: var(--ui-condensed); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.ui-member-role { padding: 0 16px 16px; color: var(--ui-muted); font-size: 15px; }

.ui-member-row {
    display: flex;
    flex-wrap: wrap;
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    overflow: hidden;
}

.ui-member-row:nth-child(even) { flex-direction: row-reverse; }
.ui-member-row > img { flex: 0 1 300px; min-width: 0; height: 300px; object-fit: cover; object-position: center top; background: #1d1d1d; }
.ui-member-row > div { flex: 1 1 360px; min-width: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ui-member-row h3 { font-family: var(--ui-condensed); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; }
.ui .ui-member-row p:last-child { margin-top: 8px; color: var(--ui-soft); max-width: 620px; }

/* Photo tiles with a title over them */
.ui .ui-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-sizing: border-box;
}

.ui .ui-tile:hover, .ui .ui-tile:focus { color: #fff; }
.ui-tile--tall { min-height: 260px; justify-content: flex-end; border: 1px solid var(--ui-line); }
.ui-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; transition: opacity 0.3s ease; }
.ui-tile:hover img { opacity: 0.6; }
.ui-tile span { position: relative; }
.ui-tile-title { font-family: var(--ui-condensed); font-weight: 800; font-size: 34px; text-transform: uppercase; }
.ui-tile--tall .ui-tile-title { font-size: 32px; }

/* Quotes */

.ui-quote footer { font-family: var(--font-secondary); font-size: 14px; color: var(--ui-muted); margin-top: 10px; }

/* Numbered steps */
.ui .ui-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ui-steps li { display: flex; gap: 18px; background: var(--ui-card); border: 1px solid var(--ui-line); padding: 20px 22px; }
.ui-step-n { font-family: var(--ui-condensed); font-weight: 800; font-size: 40px; line-height: 1; color: var(--ui-accent); }
.ui-steps strong { display: block; }
.ui-steps li > span:last-child { color: var(--ui-soft); }

/* Video thumbnails */
.ui .ui-video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.ui-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.ui-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ui-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tabs and chips */
.ui-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ui-line); }

.ui .ui-tab {
    min-height: 48px;
    padding: 0 22px;
    background: transparent;
    color: var(--ui-muted);
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ui .ui-tab[aria-selected="true"],
.ui .ui-tab[aria-current="page"] { color: #fff; border-bottom-color: var(--ui-accent); }

.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ui .ui-chip {
    min-height: 40px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid #555;
    color: var(--ui-ink);
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}

.ui .ui-chip.active,
.ui .ui-chip[aria-pressed="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: #0a0a0a; }

/* Call-to-action band */
.ui-cta { background: var(--ui-accent); color: #fff; }

.ui-cta-inner {
    padding-top: 72px;
    padding-bottom: 72px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.ui-cta-copy { flex: 1 1 420px; }
.ui-cta-title { font-family: var(--ui-condensed); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; color: #fff; }
.ui .ui-cta-copy p { margin-top: 12px; font-size: 18px; max-width: 520px; }
.ui-cta .ui-btn-row { margin-top: 0; }

/* Panel with copy and a button (e.g. "Not coming to your town yet?") */
.ui .ui-panel {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.ui-panel > div:first-child { flex: 1 1 420px; }
.ui-panel h2 { font-family: var(--ui-condensed); font-weight: 800; font-size: 34px; text-transform: uppercase; color: #fff; }
.ui .ui-panel p { margin-top: 8px; color: var(--ui-soft); }
.ui-panel .ui-btn-row { margin-top: 0; }

/* Mosaic of photos */

@media (max-width: 600px) {
    .ui-section { padding-top: 64px; }
    .ui-page-head { padding-top: 110px; }
    .ui-stats > div { border-right: 0; border-bottom: 1px solid var(--ui-line); }
    .ui-member-row > img { flex-basis: 100%; height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-tile img { transition: none; }
}

/* Header and footer in the redesigned style (shared by every page) */
.nav-link {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-link.active { color: #fff; }
.nav-link.active::after { height: 3px; bottom: -2px; }

.nav-link.nav-cta {
    background: var(--primary-color);
    color: #fff;
    padding: 0 18px;
    border-radius: 0;
}

.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover,
.nav-link.nav-cta:focus-visible { background: var(--primary-color); color: #fff; opacity: 0.88; }

.footer {
    background: #0a0a0a;
    border-top: 1px solid #1f1f1f;
}

.footer-content {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 32px;
}

.footer-brand { grid-column: span 2; max-width: 360px; }
.footer-logo { height: 40px; width: auto; display: block; margin-bottom: 14px; }

.footer-section h4 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.0625rem;
    color: #fff;
    margin-bottom: 14px;
}

.footer-section ul li { margin-bottom: 6px; }

@media (max-width: 600px) {
    .footer-brand { grid-column: auto; }
}

/* Script-rendered gig cards (js/gigs.js, build-time pre-render) shown as
   rows inside redesigned pages */
.ui .gigs-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    min-height: 0;
}

.ui .gig-card {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) auto;
    grid-template-areas:
        "date flag actions"
        "date venue actions"
        "date location actions"
        "date desc actions"
        "date support actions";
    align-items: center;
    column-gap: 28px;
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    border-radius: 0;
    padding: 18px 22px;
    box-shadow: none;
    text-align: left;
}

.ui .gig-card::before,
.ui .gig-card::after { display: none; }
.ui .gig-card:hover { transform: none; box-shadow: none; border-color: #444; }
.ui .gig-card.hidden { display: none; }
.ui .gig-card.upcoming:first-child { border-left: 4px solid var(--ui-accent); }

.ui .gig-status { grid-area: flag; display: none; }

.ui .gig-card.past .gig-status {
    display: block;
    font-family: var(--ui-condensed);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--ui-muted);
    background: none;
    padding: 0;
    position: static;
}

.ui .gig-date {
    grid-area: date;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 22px;
    border-right: 1px solid var(--ui-line);
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ui-accent);
    margin: 0;
}

.ui .gig-venue {
    grid-area: venue;
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.ui .gig-venue a { color: #fff; text-decoration: none; }
.ui .gig-venue a:hover { color: #ffb3b3; }
.ui .gig-location { grid-area: location; color: var(--ui-muted); margin: 0; }

.ui .gig-description,
.ui .gig-description-container {
    grid-area: desc;
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--ui-soft);
}

.ui .support-acts { grid-area: support; margin-top: 6px; font-size: 15px; color: var(--ui-soft); }

.ui .gig-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    justify-content: flex-end;
}

.ui .gig-ticket,
.ui .gig-free-entry {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #555;
    border-radius: 0;
    background: transparent;
    color: var(--ui-ink);
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    box-shadow: none;
}

.ui .gig-ticket-paid { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.ui .gig-ticket:hover { color: #fff; border-color: var(--ui-ink); transform: none; }
.ui .gig-ticket-paid:hover { opacity: 0.88; border-color: var(--ui-accent); }
.ui .gig-free-entry { border-color: var(--ui-accent); color: #ffb3b3; }
.ui .gig-ticket-unavailable { color: var(--ui-muted); }

/* Keep home page rows short */
.ui-home .gig-description,
.ui-home .gig-description-container,
.ui-home .support-acts { display: none; }

.ui .gigs-grid .loading,
.ui .gigs-grid .no-gigs { color: var(--ui-soft); padding: 24px; background: var(--ui-card); border: 1px dashed #444; margin: 0; }

@media (max-width: 700px) {
    .ui .gig-card {
        grid-template-columns: 1fr;
        grid-template-areas: "flag" "date" "venue" "location" "desc" "support" "actions";
        row-gap: 4px;
    }

    .ui .gig-date { border-right: 0; padding-right: 0; font-size: 18px; }
    .ui .gig-actions { justify-content: flex-start; margin-top: 10px; }
}

/* Script-rendered testimonial cards (js/testimonials.js) */
.ui .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
    margin: 0;
}

.ui .testimonial-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    border-radius: 0;
    padding: 24px 26px;
    box-shadow: none;
}

.ui .testimonial-card::before { display: none; }
.ui .testimonial-card:hover { transform: none; box-shadow: none; }

.ui .testimonial-text,
.ui .testimonial-text p {
    font-family: var(--ui-condensed);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    font-style: normal;
    color: var(--ui-ink);
    margin: 0;
}

.ui .testimonial-name { font-style: normal; font-weight: 600; color: #fff; }
.ui .testimonial-venue,
.ui .testimonial-meta { color: var(--ui-muted); font-size: 14px; }
.ui .testimonial-rating .stars { color: var(--ui-accent); }

/* Gigs page filter bar and FAQ (redesigned pages) */
.ui .gigs-filter { background: var(--ui-panel); border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); padding: 0; position: static; }

.ui-filter-bar {
    padding-top: 18px;
    padding-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ui .filter-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; justify-content: flex-start; }
.ui .filter-btn { border-radius: 0; box-shadow: none; transform: none; }

.ui .search-box { position: relative; flex: 0 1 340px; margin: 0; }

.ui .search-box input {
    width: 100%;
    min-height: 44px;
    padding: 0 40px 0 14px;
    background: #0f0f0f;
    border: 1px solid #555;
    border-radius: 0;
    color: #fff;
    font: inherit;
    box-sizing: border-box;
}

.ui .search-box input:focus { outline: 3px solid #fff; outline-offset: 1px; border-color: #fff; }
.ui .ui-gigs-title { margin-bottom: 24px; }
.ui .ui-faq-title { margin-bottom: 24px; }

.ui .faq-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.ui .faq-item {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.ui .faq-item summary {
    cursor: pointer;
    padding: 20px 22px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ui .faq-item summary::-webkit-details-marker { display: none; }

.ui .faq-item summary::after {
    content: "+";
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--ui-accent);
}

.ui .faq-item[open] summary::after { content: "–"; }

.ui .faq-item summary h3 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.ui .faq-item p { padding: 0 22px 20px; color: var(--ui-soft); margin: 0; }

.ui .booking-cta { text-align: left; padding: 0; margin: 0; }

.ui .ui-area { display: flex; flex-direction: column; gap: 6px; color: var(--ui-soft); text-decoration: none; }
.ui .ui-area:hover { color: var(--ui-soft); border-color: #555; }

.ui-about .ui-gig-list { gap: 16px; }

/* Photos and video pages */
.ui-media-tabs { margin-top: 28px; align-items: center; }
.ui .ui-media-follow { margin-left: auto; padding: 8px 0; }
.ui .ui-photo-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ui .ui-photo-grid .photo-item { border-radius: 0; aspect-ratio: 4 / 3; }
.ui .ui-photo-grid .photo-item img { height: 100%; }
.ui .ui-photo-grid .photo-overlay h3 { font-family: var(--ui-condensed); font-weight: 700; font-size: 16px; text-transform: none; margin: 0 0 2px; }
.ui .ui-photo-grid .photo-overlay p { font-size: 13px; margin: 0; }
.ui .ui-credit { margin-top: 16px; font-size: 15px; }

@media (max-width: 600px) {
    .ui .ui-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ui .ui-media-follow { margin-left: 0; width: 100%; }
}

.ui-video-frame { position: relative; aspect-ratio: 16 / 9; background: #111; border: 1px solid var(--ui-line); }
.ui-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ui-video-feature { margin-bottom: 28px; }
.ui .ui-video-feature .ui-label { margin-top: 14px; }
.ui .ui-video-title { margin-top: 10px; }
.ui-video-feature .ui-video-title { font-size: 34px; margin-top: 4px; }

/* Contact page */
.ui-contact-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.ui .ui-form-card { flex: 3 1 560px; min-width: 0; padding: clamp(22px, 3vw, 36px); }
.ui .ui-form-card .ui-h2 { margin-bottom: 20px; }
.ui-contact-aside { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ui .ui-contact-aside .ui-h3 { margin-bottom: 12px; }
.ui .ui-contact-btn { width: 100%; justify-content: flex-start; margin-top: 10px; font-size: 18px; }
.ui .ui-contact-links { display: flex; flex-direction: column; gap: 8px; }
.ui .ui-contact-links a { font-weight: 600; }
.ui-contact-social { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; padding: 4px 2px; }

.ui .booking-form { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

.ui .booking-form input:not([type="checkbox"]):not([type="radio"]),
.ui .booking-form select,
.ui .booking-form textarea {
    background: #0f0f0f;
    border: 1px solid #555;
    border-radius: 0;
    color: #fff;
}

.ui .booking-form input:focus,
.ui .booking-form select:focus,
.ui .booking-form textarea:focus { outline: 3px solid #fff; outline-offset: 1px; border-color: #fff; }

.ui .booking-form label { font-weight: 600; color: #fff; }
.ui .booking-form .field-hint,
.ui .booking-form .field-optional,
.ui .booking-form .field-count { color: var(--ui-muted); }

.ui .booking-form .btn-primary,
.ui .form-success .btn {
    min-height: 56px;
    padding: 0 32px;
    border-radius: 0;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.ui .booking-form .btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.ui .form-success { background: none; border: 0; padding: 0; }
.ui .form-success h3 { font-family: var(--ui-condensed); font-weight: 800; font-size: 30px; text-transform: uppercase; color: #fff; }

@media (max-width: 600px) {
    .ui-hero-logo { display: none; }
}

/* ==========================================================================
   Legacy bridge: restyles the template-built pages (hire sub-pages, area
   pages, news articles, gig detail pages, privacy) in the new look without
   rewriting their markup. Opt in with class="ui ui-legacy" on <main>.
   ========================================================================== */
.ui-legacy .container {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: max(16px, 5vw);
    padding-right: max(16px, 5vw);
    box-sizing: border-box;
}

.ui-legacy > section,
.ui-legacy > article > section,
.ui-legacy > .section {
    padding: 72px 0 8px;
    background: transparent;
    text-align: left;
}

.ui-legacy .section-dark { background: transparent; }
.ui-legacy > section:last-child { padding-bottom: 88px; }

/* Page header becomes a short photo hero (photo set by js/main.js) */
.ui-legacy .page-header {
    position: relative;
    min-height: 380px;
    padding: 140px 0 44px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    background-size: cover;
    background-position: center 35%;
    animation: none;
    box-sizing: border-box;
}

.ui-legacy .page-header::before { display: none; }
.ui-legacy .page-header .container { position: relative; z-index: 1; width: 100%; }

.ui-legacy .page-title {
    font-family: var(--ui-display);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 88px);
    line-height: 1;
    color: #fff;
    margin: 0;
    text-align: left;
}

.ui-legacy .page-subtitle,
.ui-legacy .page-motto {
    font-family: var(--ui-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 17px;
    color: #ffb3b3;
    margin: 12px 0 0;
}

.ui-legacy .page-description { font-size: 19px; color: var(--ui-soft); max-width: 680px; margin: 12px 0 0; }

/* Headings and copy */
.ui-legacy .section-title {
    font-family: var(--ui-display);
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 52px);
    line-height: 1.05;
    color: #fff;
    text-align: left;
    margin: 0 0 24px;
}

.ui-legacy .section-title::after,
.ui-legacy .section-title::before { display: none; }
.ui-legacy .section-header-centered,
.ui-legacy .section-header { text-align: left; margin-bottom: 24px; }
.ui-legacy .section-header-centered .section-title,
.ui-legacy .section-header .section-title { margin-bottom: 8px; }
.ui-legacy .section-subtitle { color: var(--ui-muted); margin: 0; max-width: 640px; }
.ui-legacy .lead { font-size: 21px; line-height: 1.5; color: #fff; max-width: 860px; }
.ui-legacy p { color: var(--ui-soft); }
.ui-legacy .section-content,
.ui-legacy .venues-content,
.ui-legacy .specs-content,
.ui-legacy .requirements-content,
.ui-legacy .promoters-content,
.ui-legacy .practical-content,
.ui-legacy .venue-content,
.ui-legacy .tech-content,
.ui-legacy .programmers-content,
.ui-legacy .coverage-content,
.ui-legacy .travel-content { max-width: none; margin: 0; text-align: left; }

.ui-legacy h3 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
}

.ui-legacy ul,
.ui-legacy ol { color: var(--ui-soft); }

/* Grids of cards */
.ui-legacy .features-grid,
.ui-legacy .packages-grid,
.ui-legacy .occasions-grid,
.ui-legacy .event-types-grid,
.ui-legacy .areas-grid,
.ui-legacy .coverage-grid,
.ui-legacy .regional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
    margin: 0;
}

.ui-legacy .feature-card,
.ui-legacy .package-card,
.ui-legacy .occasion-card,
.ui-legacy .event-type-item,
.ui-legacy .area-item,
.ui-legacy .coverage-item,
.ui-legacy .travel-item,
.ui-legacy .practical-item,
.ui-legacy .venue-item,
.ui-legacy .tech-item,
.ui-legacy .programmers-item,
.ui-legacy .regional-card,
.ui-legacy .specs-list,
.ui-legacy .requirements-list,
.ui-legacy .included-list,
.ui-legacy .gig-detail-section {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    border-radius: 0;
    padding: 22px;
    box-shadow: none;
    transform: none;
    text-align: left;
}

.ui-legacy .feature-card::before,
.ui-legacy .package-card::before,
.ui-legacy .occasion-card::before { display: none; }
.ui-legacy .feature-card:hover,
.ui-legacy .package-card:hover,
.ui-legacy .occasion-card:hover,
.ui-legacy .regional-card:hover { transform: none; box-shadow: none; border-color: #444; }

.ui-legacy .travel-content,
.ui-legacy .practical-content,
.ui-legacy .venue-content,
.ui-legacy .tech-content,
.ui-legacy .programmers-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.ui-legacy .regional-card { color: var(--ui-soft); text-decoration: none; display: block; }
.ui-legacy .specs-list,
.ui-legacy .requirements-list,
.ui-legacy .included-list { list-style: disc; padding-left: 40px; }
.ui-legacy .gig-detail-section { margin-bottom: 16px; }
.ui-legacy .coverage-motto { font-family: var(--ui-condensed); font-weight: 700; font-size: 22px; text-transform: uppercase; color: #fff; }

/* Buttons */
.ui-legacy .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

.ui-legacy .btn::before,
.ui-legacy .btn::after { display: none; }
.ui-legacy .btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-legacy .btn:hover,
.ui-legacy .btn:focus { color: #fff; opacity: 0.88; transform: none; box-shadow: none; }
.ui-legacy .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* CTA blocks become the red band */
.ui-legacy > section:has(.cta-content),
.ui-legacy > section:has(.availability-cta) {
    background: var(--ui-accent);
    padding: 72px 0;
    margin-top: 72px;
}

.ui-legacy .cta-content,
.ui-legacy .availability-cta { text-align: left; max-width: none; }

.ui-legacy .cta-content h2,
.ui-legacy .availability-cta h2 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 0.95;
    color: #fff;
    margin: 0 0 12px;
}

.ui-legacy .cta-content p,
.ui-legacy .availability-cta p { color: #fff; font-size: 18px; max-width: 640px; }
.ui-legacy .cta-content .btn,
.ui-legacy .availability-cta .btn { margin: 16px 12px 0 0; }
.ui-legacy .cta-content .btn-primary,
.ui-legacy .availability-cta .btn-primary { background: #0a0a0a; border-color: #0a0a0a; }

/* Testimonials on area pages */
.ui-legacy .testimonials-cta { margin-top: 20px; text-align: left; }

/* Articles */
.ui-legacy .article-meta {
    justify-content: flex-start !important;
    gap: 6px 18px;
    margin-top: 14px !important;
    flex-wrap: wrap;
    font-family: var(--ui-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 15px;
    color: var(--ui-soft);
}

.ui-legacy .article-meta time { color: #ffb3b3 !important; margin-right: 0 !important; }

.ui-legacy .article-category {
    background: transparent !important;
    border: 1px solid #ffb3b3;
    color: #ffb3b3 !important;
    padding: 2px 10px !important;
    border-radius: 0 !important;
}

.ui-legacy .article-body {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: var(--ui-soft);
}

.ui-legacy .article-body h2 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 40px 0 12px;
}

.ui-legacy .article-body h3 { font-size: 24px; margin: 28px 0 8px; }
.ui-legacy .article-body p { margin: 0 0 18px; }
.ui-legacy .article-body strong { color: #fff; }
.ui-legacy .article-body hr { border: 0; border-top: 1px solid var(--ui-line); margin: 36px 0; }
.ui-legacy .article-body ul,
.ui-legacy .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.ui-legacy .article-body li { margin-bottom: 6px; }
.ui-legacy .article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; display: block; overflow-x: auto; }
.ui-legacy .article-body th,
.ui-legacy .article-body td { border: 1px solid var(--ui-line); padding: 10px 14px; text-align: left; }
.ui-legacy .article-body th { background: #1a1a1a; color: #fff; }

.ui-legacy .article-cta {
    max-width: 760px;
    margin: 48px 0 0 !important;
    padding: 28px !important;
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-line) !important;
    border-left: 4px solid var(--ui-accent) !important;
    border-radius: 0 !important;
    text-align: left !important;
}

.ui-legacy .article-cta h2 {
    font-family: var(--ui-condensed) !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px !important;
    color: #fff !important;
    margin: 0 0 10px !important;
}

.ui-legacy .article-cta .btn { margin: 12px 12px 0 0; }

.ui-legacy .related-articles { max-width: 760px; margin-top: 40px; }
.ui-legacy .related-articles h2 { font-family: var(--ui-condensed); font-weight: 800; font-size: 26px; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.ui-legacy .related-articles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ui-legacy .related-articles a { font-weight: 600; }

/* Gig detail pages */
.ui-legacy .breadcrumb { font-size: 14px; color: var(--ui-muted); margin-bottom: 10px; }
.ui-legacy .breadcrumb a { color: var(--ui-soft); }
.ui-legacy .page-header .gig-actions { margin-top: 18px !important; }
.ui-legacy .gig-map { border: 1px solid var(--ui-line); border-radius: 0 !important; overflow: hidden; }

.ui-legacy .gig-ticket,
.ui-legacy .gig-free-entry {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--ui-condensed);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
}

.ui-legacy .gig-ticket-paid { background: var(--ui-accent); border-color: var(--ui-accent); }

/* Privacy and other long-form text pages */

@media (max-width: 600px) {
    .ui-legacy .page-header { min-height: 300px; padding-top: 110px; }
    .ui-legacy > section,
    .ui-legacy > .section { padding-top: 56px; }
}

/* Long article titles in the page header */
.ui-legacy .page-header:has(.article-meta) .page-title,
.ui-legacy .page-header:has(.breadcrumb) .page-title { font-size: clamp(34px, 4.2vw, 58px); max-width: 980px; }

/* News page */
.ui .featured-article { display: flex; grid-template-columns: none; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 0; box-shadow: none; }
.ui .featured-article .article-image { flex: 1 1 360px; max-width: 520px; min-width: 0; min-height: 280px; }
.ui .featured-article .article-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.ui .featured-article .article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--ui-muted); font-size: 15px; }
.ui .featured-article .article-category { background: none; padding: 0; border-radius: 0; }
.ui .featured-article .btn { align-self: flex-start; }

.ui .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0; }
.ui .news-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 0; box-shadow: none; transform: none; }
.ui .news-card::before, .ui .news-card::after { display: none; }
.ui .news-card:hover { transform: none; box-shadow: none; border-color: #444; }
.ui .news-card-link { color: var(--ui-ink); text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.ui .news-card-link:hover { color: var(--ui-ink); }
.ui .news-image { aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
.ui .news-image img { border-radius: 0; }
.ui .news-content { padding: 20px 22px; }
.ui .news-meta { font-size: 14px; color: var(--ui-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.ui .news-content h3 { font-family: var(--ui-condensed); font-weight: 800; font-size: 24px; line-height: 1.15; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.ui .news-excerpt { color: var(--ui-soft); font-size: 16px; }

/* Setlists page */
.ui-setlists .featured-setlist-card,
.ui-setlists .setlist-card,
.ui-setlists .song-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.ui-setlists .featured-setlist-card { padding: clamp(22px, 3vw, 36px); border-left: 4px solid var(--ui-accent); }
.ui-setlists .featured-setlist-card::before,
.ui-setlists .setlist-card::before,
.ui-setlists .song-card::before { display: none; }
.ui-setlists .featured-setlist-badge { position: static; margin-bottom: 12px; }
.ui-setlists .badge-text { background: none; padding: 0; border-radius: 0; font-family: var(--ui-condensed); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; color: var(--ui-accent); }
.ui-setlists .featured-setlist-title,
.ui-setlists .setlist-header h3 { font-family: var(--ui-condensed); font-weight: 800; text-transform: uppercase; color: #fff; }
.ui-setlists .featured-setlist-title { font-size: clamp(30px, 3.5vw, 44px); }
.ui-setlists .featured-setlist-year,
.ui-setlists .featured-setlist-duration,
.ui-setlists .setlist-duration { color: var(--ui-muted); background: none; }
.ui-setlists .songs-heading { color: var(--ui-accent); }
.ui-setlists .featured-song-item { border-radius: 0; background: #111; border: 1px solid var(--ui-line); }
.ui-setlists .song-number { font-family: var(--ui-condensed); font-weight: 800; color: var(--ui-accent); background: none; border-radius: 0; }
.ui-setlists .song-title { color: #fff; }
.ui-setlists .song-album { color: var(--ui-muted); }
.ui-setlists .setlist-card { padding: 22px; }
.ui-setlists .setlist-card:hover,
.ui-setlists .song-card:hover { transform: none; box-shadow: none; border-color: #444; }
.ui-setlists .song-card h4 { font-family: var(--ui-condensed); font-weight: 700; font-size: 20px; text-transform: uppercase; color: #fff; margin: 0; }
.ui-setlists .song-album-art img { border-radius: 0; }
.ui-setlists .repertoire-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.ui-setlists .search-input,
.ui-setlists .filter-select {
    min-height: 48px;
    padding: 0 14px;
    background: #0f0f0f;
    border: 1px solid #555;
    border-radius: 0;
    color: #fff;
    font: inherit;
}

.ui-setlists .search-input { flex: 1 1 280px; }
.ui-setlists .search-input:focus,
.ui-setlists .filter-select:focus { outline: 3px solid #fff; outline-offset: 1px; }
.ui-setlists .section-header h2 { font-family: var(--ui-display); font-weight: 400; font-size: clamp(36px, 4.5vw, 52px); color: #fff; margin: 0 0 8px; }
.ui-setlists .featured-setlist-badge,
.ui-setlists .featured-setlist-year,
.ui-setlists .featured-setlist-duration { border: 0; padding: 0; background: none; }
.ui-setlists .featured-setlist-title { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.ui-setlists .featured-setlist-description,
.ui-setlists .featured-setlist-notes { background: none; border: 0; border-left: 3px solid var(--ui-accent); border-radius: 0; padding: 4px 0 4px 16px; }
.ui-setlists .featured-setlist-description p,
.ui-setlists .featured-setlist-notes p { font-style: normal; color: var(--ui-soft); }

/* Shop page (markup and checkout flow unchanged) */
.ui-shop .shop-container { gap: 40px; }
.ui-shop .shop-image-wrapper,
.ui-shop .shop-image,
.ui-shop .thumbnail-button,
.ui-shop .thumbnail-button img { border-radius: 0; }
.ui-shop .shop-image-wrapper { background: var(--ui-card); border: 1px solid var(--ui-line); }
.ui-shop .thumbnail-button { border: 1px solid var(--ui-line); }
.ui-shop .thumbnail-button.active { border-color: var(--ui-accent); }
.ui-shop .product-title { font-family: var(--ui-condensed); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1; text-transform: uppercase; color: #fff; }
.ui-shop .product-price-amount { font-family: var(--ui-condensed); font-weight: 800; color: var(--ui-accent); }
.ui-shop .size-quantities { border: 1px solid var(--ui-line); border-radius: 0; background: var(--ui-card); }
.ui-shop .size-label { font-family: var(--ui-condensed); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.ui-shop .qty-button,
.ui-shop .qty-input { border-radius: 0; }
.ui-shop .order-total { font-family: var(--ui-condensed); font-weight: 700; font-size: 22px; text-transform: uppercase; color: #fff; }
.ui-shop .shop-messages { border-radius: 0; }
.ui-setlists .featured-setlist-header,
.ui-setlists .featured-setlist-title-group { flex-wrap: wrap; min-width: 0; gap: 6px 14px; }
.ui-setlists .featured-setlist-title { overflow-wrap: anywhere; }

/* News: magazine layout (news page and the home page news strip) */
.ui-news-head { padding-bottom: 20px; }
.ui-news-head-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.ui-news-top-section { padding: 20px 0 32px; margin-bottom: 25px; }
.ui-news-top { display: flex; flex-wrap: wrap; gap: 16px; }
.ui-story-stack { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.ui .ui-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #151515;
}

.ui .ui-story:hover,
.ui .ui-story:focus { color: #fff; }
.ui-story--lead { flex: 2 1 560px; min-height: 560px; }
.ui-story--side { flex: 1; min-height: 272px; }

.ui-story > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ui-story:hover > img { transform: scale(1.03); }

.ui-story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 25%, rgba(10, 10, 10, 0.92) 100%);
}

.ui-story-body { position: relative; z-index: 1; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ui-story--lead .ui-story-body { padding: 32px; gap: 10px; }

.ui-story-tag {
    font-family: var(--ui-condensed);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 13px;
    color: #ffb3b3;
}

.ui-story--lead .ui-story-tag { align-self: flex-start; background: var(--ui-accent); color: #fff; padding: 4px 12px; font-size: 14px; }
.ui-story-title { font-family: var(--ui-condensed); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.ui-story--lead .ui-story-title { font-size: clamp(34px, 4vw, 56px); line-height: 0.98; }
.ui-story-excerpt { color: var(--ui-soft); max-width: 640px; }
.ui-story-meta { font-size: 14px; color: var(--ui-muted); }
.ui-story--lead .ui-story-meta { font-size: 15px; }

.ui .ui-news-strip { display: block; background: var(--ui-accent); color: #fff; text-decoration: none; }
.ui .ui-news-strip:hover { color: #fff; }

.ui-news-strip-inner {
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    font-family: var(--ui-condensed);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.ui .ui-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }

.ui .ui-news-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-line);
    color: var(--ui-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.ui .ui-news-card:hover { color: var(--ui-ink); border-color: #444; }
.ui-news-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ui-news-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ui-news-card .ui-story-tag { color: var(--ui-accent); }
.ui-news-card-title { font-family: var(--ui-condensed); font-weight: 800; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: #fff; }
.ui-news-more { display: flex; justify-content: center; margin-top: 28px; }

.ui .ui-guides {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1px;
    background: var(--ui-line);
    border: 1px solid var(--ui-line);
}

.ui-guides li { background: var(--ui-panel); padding: 22px; display: flex; gap: 16px; }
.ui-guides .ui-step-n { font-size: 44px; }
.ui .ui-guides a { color: #fff; text-decoration: none; font-family: var(--ui-condensed); font-weight: 800; font-size: 22px; line-height: 1.15; text-transform: uppercase; }
.ui .ui-guides a:hover { color: #ffb3b3; }

@media (max-width: 600px) {
    .ui-story--lead { min-height: 440px; }
    .ui-story--lead .ui-story-body { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-story > img { transition: none; }
}

/* Article pages (magazine style, scripts/generate-article-pages.js) */
.ui-article-hero { min-height: min(640px, 88vh); }
.ui-article-hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 1240px; }
.ui-crumbs { display: flex; gap: 10px; font-family: var(--ui-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; color: var(--ui-soft); }
.ui .ui-crumbs a { color: #fff; text-decoration: none; }
.ui .ui-crumbs a:hover { color: #ffb3b3; }
.ui .ui-tag-solid { background: var(--ui-accent); color: #fff; padding: 4px 12px; font-size: 14px; }

.ui-article-title {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: clamp(38px, 5.5vw, 76px);
    line-height: 0.96;
    text-transform: uppercase;
    color: #fff;
    max-width: 1000px;
}

.ui .ui-article-standfirst { font-size: 20px; line-height: 1.5; color: var(--ui-soft); max-width: 760px; }
.ui .ui-article-meta { font-size: 15px; color: var(--ui-muted); }

.ui-article-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 64px;
    padding-top: 56px;
    padding-bottom: 24px;
}

.ui .ui-article-body {
    flex: 999 1 560px;
    min-width: 0;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--ui-soft);
}

.ui-article-body > p:first-child { font-size: 21px; line-height: 1.6; color: #fff; }

.ui .ui-article-body h2 {
    font-family: var(--ui-condensed);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 44px 0 12px;
    padding-top: 14px;
    border-top: 3px solid var(--ui-accent);
    max-width: max-content;
}

.ui .ui-article-body h3 { font-family: var(--ui-condensed); font-weight: 800; font-size: 24px; text-transform: uppercase; color: #fff; margin: 28px 0 8px; }
.ui .ui-article-body p { margin: 0 0 18px; }
.ui .ui-article-body ul,
.ui .ui-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.ui .ui-article-body li { margin-bottom: 6px; }
.ui .ui-article-body li::marker { color: var(--ui-accent); }
.ui .ui-article-body hr { border: 0; border-top: 1px solid var(--ui-line); margin: 36px 0; }
.ui .ui-article-body blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--ui-accent); font-family: var(--ui-condensed); font-size: 26px; line-height: 1.25; color: #fff; }
.ui .ui-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; display: block; overflow-x: auto; }
.ui .ui-article-body th,
.ui .ui-article-body td { border: 1px solid var(--ui-line); padding: 10px 14px; text-align: left; }
.ui .ui-article-body th { background: #1a1a1a; color: #fff; }

.ui-article-aside {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
}

.ui .ui-article-aside .ui-next { flex: none; }
.ui .ui-article-cta p { margin: 8px 0 0; }
.ui .ui-article-cta .ui-btn-row { margin-top: 16px; }
.ui-article-related { padding-bottom: 88px; }

@media (max-width: 960px) {
    .ui-article-aside { position: static; max-width: none; }
}