/* Basic reset */
:root{
    --accent: #DAA520;
    --bg: #000000;
    --muted: #B8860B;
    --header-height: 64px; /* matches header spacing used elsewhere */
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    line-height: 1.5;
    color: #ffffff;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
}

body{
    background-image: url('../images/swr bg pic.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main{flex:1 0 auto;display:flex;flex-direction:column}

/* Header */
.site-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(218,165,32,0.3);
    z-index: 60;
}
.header-inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
    width: 100%;
    max-width: none; /* allow header to span full viewport */
    margin: 0;
}
.header-inner .logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 70;
}
.header-right{display:flex;align-items:center;gap:1rem;justify-content:flex-start;flex:1;padding-left:0.5rem}
.header-right .container{padding:0;margin:0}
.logo img{height:40px;width:auto;display:block}

.primary-navigation ul{list-style:none;display:flex;gap:0.6rem;margin:0;padding:0;justify-content:flex-start;flex-wrap:wrap}
.primary-navigation a{color:var(--accent);text-decoration:none;padding:0.4rem 0.5rem;border-radius:6px;font-size:clamp(0.85rem,1.4vw,1rem)}
.primary-navigation a:hover{background:rgba(218,165,32,0.1)}

/* Override `.container` utility when applied to header-right so items
     do not get centered by the global `.container` rules. Keep nav items
     pinned to the left side of the header bar. */
.header-inner .header-right.container{
        max-width: none;
        margin: 0;
        width: auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        padding-left:0.5rem;
}

@media (max-width:900px){
    .primary-navigation a{font-size:clamp(0.78rem,1.8vw,0.95rem);padding:0.35rem 0.45rem}
}

.nav-toggle{display:none;background:none;border:0;padding:8px}
.nav-toggle .hamburger{width:24px;height:2px;background:var(--accent);display:block;position:relative}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';width:24px;height:2px;background:var(--accent);position:absolute;left:0}
.nav-toggle .hamburger::before{top:-8px}
.nav-toggle .hamburger::after{top:8px}

/* Hero */
.hero{
    /* Hero fills available space but never less than a comfortable size */
    padding-top: calc(var(--header-height) + 18px);
    min-height: calc(40vh - var(--header-height));
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.hero-content{
    text-align: center;
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem; /* tighten vertical whitespace */
}
.hero-logo{
    display: block;
    width: auto;
    height: auto;
    /* Make logo fit inside the hero area while leaving a margin for the header */
    max-height: calc(100vh - var(--header-height) - 4rem);
    margin-top: 6px; /* small offset so it clears the navbar visually */
    max-width: 90vw;
    object-fit: contain;
}

@media (max-width: 640px){
    .hero-logo{max-height: calc(100vh - var(--header-height) - 2rem); max-width:85vw}
}

/* Brand row in hero: logo and title side-by-side on wide screens, stacked on small screens */
.hero-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
}
.hero-title{
    font-size:2.25rem;
    color: #ffffff;
    margin:0;
    padding:0.25rem 0.5rem;
    white-space:nowrap;
}

@media (max-width:900px){
    .hero-title{font-size:1.8rem}
}
@media (max-width:640px){
    .hero-brand{flex-direction:column;gap:0.75rem}
    .hero-title{font-size:1.4rem}
}

.section{
    padding: 32px 0; /* reduced so headings sit closer to hero */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    scroll-margin-top: calc(var(--header-height) + 8px);
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px; /* unified thin gold separator */
    background: #8B6B00; /* darker gold */
    /* stronger glow: larger radii and slightly higher opacity */
    box-shadow:
        0 0 18px rgba(218,165,32,0.50),
        0 0 36px rgba(218,165,32,0.28),
        0 6px 32px rgba(218,165,32,0.12) inset;
    z-index: 1;
}
.section h2{
    position: relative;
    display: block;
    max-width: 1100px;
    margin: 0 auto 1rem auto;
    padding: 0.5em 1em;
    font-size: 2rem;
    text-align: center;
    background: rgba(218,165,32,0.2);
    border-top: 1px solid rgba(218,165,32,0.4);
    border-bottom: 1px solid rgba(218,165,32,0.4);
    box-sizing: border-box;
}

/* Make the background of the h2 stretch full-bleed */
.section h2::before{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    top: 0;
    bottom: 0;
    background: rgba(218,165,32,0.12);
    z-index: -1;
    /* soft outer glow */
    box-shadow: 0 6px 24px rgba(218,165,32,0.12), 0 0 18px rgba(218,165,32,0.08) inset;
    transition: box-shadow 220ms ease;
}

.section h2:hover::before{
    box-shadow: 0 12px 36px rgba(218,165,32,0.18), 0 0 28px rgba(218,165,32,0.14) inset;
}

/* fallback / generic h2 reset for other areas (no full-bleed) */
h2:not(.section h2){
    font-size: 2rem;
    margin-bottom: 1rem;
}

p{color:#ffffff}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Make artist profile pictures circular and centered inside the artists section */
#artists .grid{justify-items:center}
#artists .card{
    display:flex;
    flex-direction:column;
    align-items:center;
    background: transparent;
    border: none;
    box-shadow: none;
}
#artists .card img{
    width:200px;
    height:200px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border: 2px solid rgba(139,107,0,0.6); /* toned-down dark gold border */
    /* remove the bright gold glow; use a subtle dark drop shadow for depth */
    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
@media (max-width:900px){
    #artists .card img{width:160px;height:160px}
}
@media (max-width:640px){
    #artists .card img{width:120px;height:120px}
}
/* Make artist titles visually match release titles and add bordered label */
#artists .card-content h3{
    color: var(--accent);
    font-size: 1.5rem;
    text-transform: none;
    letter-spacing: 0.05em;
    margin: 0.5rem 0 0 0;
    display: inline-block; /* keep border tight to text */
    padding: 0.25rem 0.6rem; /* space inside the rectangle */
    border: 2px solid #000; /* black rectangular border */
    background: rgba(0,0,0,0.6); /* restore semi-transparent black fill for artist name */
    box-shadow: 0 6px 18px rgba(218,165,32,0.08); /* subtle gold glow */
    -webkit-text-stroke: 1px #000; /* black outline */
    text-stroke: 1px #000;
}

/* (removed duplicate small #artists rule) The main #artists block later in the file
   contains the authoritative background and overlay styles. */
@media (max-width:640px){
    #artists .card-content h3{font-size:1.1rem;padding:0.18rem 0.5rem;border-width:1.5px}
}
.releases-list{
    display: flex;
    gap: 0; /* no gap so a single card fills the viewport cleanly */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden; /* show one card at a time */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scroll-snap-type: x mandatory; /* snap horizontally to cards */
}

/* Hide scrollbar but keep functionality */
.releases-list::-webkit-scrollbar {
    display: none;
}
.releases-list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Container for scroll buttons and releases */
.releases-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Full-bleed overrides for releases hero so arrows sit at viewport edges */
#releases .releases-container{
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0; /* remove side padding so arrows align with edge */
}

/* Blurred side panels that reflect the active cover artwork */
.cover-side{
    position: absolute;
    top: calc(var(--header-height) + 8px);
    bottom: 12px;
    width: 12vw;
    min-width: 110px;
    max-width: 220px;
    background-image: var(--cover-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.05) brightness(0.55);
    transform-origin: center;
    pointer-events: none;
    z-index: 10; /* behind overlays but above page background */
    box-shadow: inset 0 0 80px rgba(0,0,0,0.45);
}
.cover-side.left{
    left: 0;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
}
.cover-side.right{
    right: 0;
    transform: scaleX(-1);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
}
@media (max-width: 900px){
    .cover-side{display:none}
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--accent);
    color: #111; /* keep text dark while glow remains visible */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.scroll-btn:hover {
    background: var(--accent);
    color: #000;
}

.scroll-btn.prev {
    left: 0;
}

.scroll-btn.next {
    right: 0;
}

.scroll-btn:disabled {
    opacity: 0.3;
    cursor: default; /* avoid showing the 'not-allowed' / error cursor on hover */
}

/* Normalize cursor behavior for all arrow-like controls across the site.
   Enabled controls should show pointer; disabled controls should not show
   the 'not-allowed' cursor (use default instead). */
.item-prev, .item-next, .nav-arrows button, .carousel-dot, .releases-container .scroll-btn, #merch .releases-container .scroll-btn {
    cursor: pointer;
}
.item-prev:disabled, .item-next:disabled, .nav-arrows button:disabled, .carousel-dot:disabled, .releases-container .scroll-btn:disabled, #merch .releases-container .scroll-btn:disabled {
    cursor: default !important;
}
.release-card{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
    width: 100vw; /* full viewport width so each card fills left/right margins */
    max-width: 100%;
    min-height: calc(60vh);
    scroll-snap-align: center;
}
.release-card:hover {
    transform: translateY(-4px);
}
.release-card img{
    width: auto;
    max-width: 100vw;
    height: auto;
    max-height: calc(100vh - var(--header-height) - 32px);
    object-fit: contain; /* show full artwork without cropping */
    display: block;
    margin: 0 auto;
}

/* Make the hero-content container full-bleed for releases */
#releases .hero-content.container{
    max-width: none;
    width: 100vw;
    padding: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#/* Position the prev/next buttons so they float over the edges of the hero
+   and move with the hero as the page scrolls (anchored to the hero). */
#releases .releases-container .scroll-btn{
    display:flex;
    position:absolute; /* anchor inside the hero container */
    top:50%;
    transform:translateY(-50%);
    z-index:50; /* sit above overlays but move with section */
    background: rgba(218,165,32,0.98); /* gold fill */
    border: 2px solid rgba(198,150,32,0.98); /* slightly darker gold edge */
    color: #000; /* black arrow glyph */
    font-weight:700;
    font-size:28px;
    line-height:1;
    width:60px;
    height:60px;
    border-radius:999px;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
    box-shadow: none; /* remove heavy shadow behind hero arrows for performance/visual */
}
#releases .releases-container .scroll-btn.prev{left:14px}
#releases .releases-container .scroll-btn.next{right:14px}

/* Slight hover brighten for hero arrows */
#releases .releases-container .scroll-btn:hover{
    background: rgba(255,215,102,0.98); /* slightly brighter gold on hover */
    color: #000; /* keep black glyph */
    transform: translateY(-50%) scale(1.03);
}

/* SVG arrow sizing inside hero scroll buttons */
#releases .releases-container .scroll-btn .arrow-icon{
    width: 28px;
    height: 28px;
    display: block;
}

/* ensure the svg stroke uses the button `color` (gold/black) */
#releases .releases-container .scroll-btn .arrow-icon path{
    stroke: currentColor;
}

/* default: hide hero arrows until the releases section is in view */
#releases .releases-container .scroll-btn{opacity:0;pointer-events:none;transition:opacity 220ms ease}
#releases .releases-container .scroll-btn.visible{opacity:1;pointer-events:auto}

/* When visible, ensure arrows show gold background and black glyph by default */
#releases .releases-container .scroll-btn.visible{
    background: rgba(218,165,32,0.98);
    border-color: rgba(198,150,32,0.98);
    color: #000;
}

/* Smooth slide easing + overlay */
.release-card{
    transition: transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
    will-change: transform, opacity;
}
.release-card:not(.active){
    opacity: 0.45;
    transform: scale(0.985);
}
.release-card.active{
    opacity: 1;
    transform: scale(1.02);
}

/* subtle gradient overlay that fades in on the active card for focus */
.release-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
    opacity: 0;
    transition: opacity 420ms ease;
    pointer-events: none;
}
.release-card.active::before{opacity: 1; z-index: 60}

/* pagination dots for slideshow */
.carousel-dots{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    display: flex;
    gap: 10px;
    z-index: 10005;
    align-items: center;
}
.carousel-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}
.carousel-dot.active{
    background: var(--accent);
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(218,165,32,0.25);
}

/* Hide the left/right circular scroll buttons in the releases hero
   (we'll provide drag and keyboard controls instead) */
/* Keep releases arrows visible for single-card navigation */

/* Show scroll arrows for merch carousel and style them similarly to hero arrows */
#merch .releases-container > .scroll-btn{display:flex}

#merch .releases-container .scroll-btn{
    display:flex;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:30;
    background: rgba(218,165,32,0.98);
    border: 2px solid rgba(198,150,32,0.98);
    color: #000;
    width:48px;
    height:48px;
    border-radius:999px;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
#merch .releases-container .scroll-btn.prev{left:8px}
#merch .releases-container .scroll-btn.next{right:8px}
#merch .releases-container .scroll-btn .arrow-icon{width:22px;height:22px}

/* Cursor affordance for dragging */
.releases-list{cursor: grab}
.releases-list.dragging{cursor: grabbing}
.release-card{position:relative}
.release-content{
    /* overlay at bottom-left of the image */
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0,0,0,0.55);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: #fff;
    width: auto;
    max-width: calc(100% - 32px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    opacity: 1; /* always visible */
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease;
}
.release-content{z-index:90;text-align:left}
/* Titles are always visible; hover/focus rules intentionally retained but not necessary */
.release-content h3{
    margin:0 0 0.5rem 0;
    color:var(--accent);
    font-size:1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.release-content p{
    margin:0;
    font-size:1rem;
    color:rgba(255,255,255,0.9);
}
.release-content .artist{
    margin-bottom:0.25rem;
    font-weight:500;
}
.release-content .release-date{
    margin-top: 0.5rem;
    font-size:0.9rem;
    color:rgba(255,255,255,0.7);
}
.card{
    background:#111111;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(218,165,32,0.1);
    border:1px solid rgba(218,165,32,0.2);
}
.card img{width:100%;height:auto;display:block}
.card-content{padding:0.75rem;color:#ffffff;text-align:center}

.site-footer{
    background:#111111;
    padding:60px 0;
    text-align:center;
    color:#ffffff;
    border-top:1px solid rgba(218,165,32,0.2);
    flex-shrink:0
}

.contact-form {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--accent);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(218,165,32,0.3);
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(218,165,32,0.2);
}

.form-group input::placeholder {
    color: rgba(255,255,255,0.5);
}

.submit-btn {
    background: var(--accent);
    color: #000000;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 1rem;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218,165,32,0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

.social-links {
    margin-top: 3rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.25rem; /* align with section headings */
}

.social-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(218,165,32,0.08);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: all 160ms ease;
    font-size: 1.05rem;
}
.social-btn svg{width:28px;height:28px;flex:0 0 28px}
.social-btn:hover{background: rgba(218,165,32,0.08);color:#fff}
.social-btn span{font-weight:700}

/* Remove inset shadow on release blurred side panels and arrow buttons */
#releases .cover-side{ box-shadow: none !important; }
#releases .releases-container .scroll-btn{ box-shadow: none !important; }

/* Minimal releases view: show only arrows, the releases list (images + title card), pagination dots, and background.
   Hide any other direct children inside the releases container (defensive) and remove card overlays/shadows. */
#releases .releases-container > :not(.scroll-btn):not(.releases-list):not(.carousel-dots) {
    display: none !important;
}
#releases .release-card::before { display: none !important; }
#releases .release-card { background: transparent !important; box-shadow: none !important; border: none !important; }
.cover-side { display: none !important; }

 

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .primary-navigation{position:absolute;top:64px;left:12px;right:auto;background:#fff;border-radius:8px;padding:12px;box-shadow:0 8px 30px rgba(2,6,23,0.08);display:none}
    .primary-navigation.open{display:block}
    .nav-toggle{display:block}
    .grid{grid-template-columns:1fr}
}

/* Disable fixed background on smaller viewports to avoid repaint jank on mobile */
@media (max-width: 900px){
    body { background-attachment: scroll; }
}

/* Make socials wrap and fit portrait mobile screens */
@media (max-width: 640px){
    .social-links{flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-top:1.25rem}
    .social-btn{flex:0 1 calc(50% - 0.75rem);padding:0.5rem 0.6rem;font-size:0.95rem;justify-content:center}
    .social-btn svg{width:20px;height:20px}
}

/* Socials background image and centered overlay */
#socials{padding:0;}
.socials-bg{position:relative;display:block;width:100%;max-width:100%;}
.socials-bg-img{display:block;width:100%;height:auto;max-width:1100px;margin:0 auto;}
.socials-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.socials-title{position:absolute;top:12px;left:12px;color:var(--accent);background:rgba(0,0,0,0.45);padding:0.25rem 0.5rem;border-radius:4px;font-size:1.1rem;pointer-events:none}
/* Ensure this title uses the written case (do not force uppercase) */
.socials-title{ text-transform: none !important; }
/* stronger gold border for social buttons within the socials section */
.socials-overlay .social-btn{border-color: rgba(218,165,32,0.98);}
.socials-overlay .social-links{pointer-events:auto;display:flex;gap:1rem;align-items:center;justify-content:center}
@media (max-width:900px){
    .socials-bg-img{max-width:100%;}
    .socials-overlay{padding:1rem}
}

/* Use modern scroll-margin-top on sections for fixed-header offset */
/* removed global :target spacer to avoid stacking pseudo-elements */

/* Merch section styles */
.merch-card {
    /* remove the dark canvas so merch items sit on the page background */
    background: transparent;
    transition: transform 0.18s ease;
    box-shadow: none;
    border: none;
}

.merch-card:hover {
    transform: translateY(-6px);
}

/* Vertical separators between merch cards (1px gold line) */
#merch .releases-list .merch-card{
    border-right: 1px solid rgba(218,165,32,0.22);
    padding-right: 0.4rem; /* tightened inner spacing so separators sit closer */
}
#merch .releases-list .merch-card:last-child{
    border-right: none;
}
@media (max-width: 640px){
    /* On narrow screens the cards stack; hide separators for a cleaner look */
    #merch .releases-list .merch-card{ border-right: none; padding-right: 0; }
}

.merch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem; /* tighter spacing */
    color: #ffffff;
    border: none; /* remove visible table border */
    background: transparent;
}

.merch-table th {
    /* remove header visual chrome to let items float freely */
    background: transparent;
    color: var(--accent);
    padding: 0; /* remove cell padding */
    text-align: left;
    border-bottom: none;
}

.merch-table td {
    padding: 0; /* remove cell padding so content can float */
    border-bottom: none;
}

.merch-table tr:last-child td {
    border-bottom: none;
}

.merch-table tr:hover td {
    background: transparent; /* no hover chrome */
}

/* Layout merch as a horizontal row on wide screens so new cards sit to the right of Caps */
#merch .releases-list{
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto; /* allow horizontal scroll if needed on small screens */
    align-items: start;
    -webkit-overflow-scrolling: touch;
}

/* default compact card basis (will be overridden on wide screens to show 3 at a time) */
#merch .releases-list .card{flex: 0 0 220px}
.merch-list .card{
    padding: 0.25rem;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.merch-list .card img{width:100%;height:auto;object-fit:contain;display:block;border-radius:6px}

/* T-Shirts images: allow them to scale to card width */
.merch-list .merch-tshirts img{width:100%;height:auto;object-fit:contain}

/* On wide screens show exactly 3 merch cards in the visible area */
    @media (min-width: 900px){
    /* ensure merch container padding matches page container so cards fit within margins */
    #merch .releases-container{ padding: 0 1rem; max-width: 1100px; margin: 0 auto; width:100%; }
    #merch .releases-list{
        overflow-x: auto; /* allow programmatic scroll while showing 4 cards */
    }
    /* account for side padding (2rem) + three gaps (3rem) = 5rem total when sizing four cards */
    #merch .releases-list .card{
        flex: 0 0 calc((100% - 5rem) / 4); /* four cards across, accounting for gaps and padding */
        max-width: calc((100% - 5rem) / 4);
    }
    /* position merch arrows flush to viewport edges (align with page margin) */
    #merch .releases-container .scroll-btn.prev{ left: calc(50% - 50vw + 14px); }
    #merch .releases-container .scroll-btn.next{ right: calc(50% - 50vw + 14px); }
}

/* Merch item carousel inside each card */
.merch-items{
    display: flex;
    flex-direction: column; /* stack image above info */
    align-items: center; /* center image and text */
    justify-content: center;
    gap: 0.35rem; /* tighter vertical gap */
}

/* Navigation arrows wrapper */
.merch-items .nav-arrows {
    display: flex;
    gap: 0.25rem; /* closer arrows */
    margin: 0.18rem auto; /* small vertical space and center horizontally */
    justify-content: center; /* center arrows under the image */
    width: auto; /* shrink to fit the arrow group so centering works reliably */
    max-width: none; /* no max constraint */
}

/* Ensure per-card mini arrows sit above the section-level merch arrows
   so clicks target the intended small controls. */
.merch-items .nav-arrows{ position: relative; z-index: 80; }
.merch-items .item-prev, .merch-items .item-next{ z-index: 81; pointer-events: auto; }

.merch-items .item-prev, .merch-items .item-next{
    background: rgba(0,0,0,0.4);
    color: var(--accent);
    border: 1px solid rgba(218,165,32,0.2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.merch-items .item-prev:hover, .merch-items .item-next:hover {
    background: transparent;
    border-color: var(--accent);
}
.merch-items .item-prev[disabled], .merch-items .item-next[disabled]{
    opacity:0.35;cursor:not-allowed;
}
.merch-items .item-details{
    text-align:center; /* place info under the image and centered */
    min-width: auto;
    flex: none;
}
.merch-items .item-name{font-size:1rem;margin:0;color:var(--accent)}
.merch-items .item-price{margin:0.25rem 0;color:rgba(255,255,255,0.9);font-weight:600}
.merch-items .item-image{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 0 0.6rem 0;
    border-radius:6px;
    background:none;
}

/* Tagline shown under item price (e.g., Limited Edition) */
.merch-items .item-tagline{
    margin: 0.25rem 0 0 0;
    color: #c0392b; /* red */
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
}

/* Make merch card content layout vertical: image above info */
.merch-card .card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem; /* compact padding */
}

/* Light gray background for the whole merch section and subtle 1px separators */
#merch{
    background: #f5f5f5; /* light gray */
    color: #111; /* dark text for contrast on light background */
    padding-top: 8px; /* reduce unused space above marquee/title */
}
#merch .container{padding:1.25rem 1rem}
#merch h2{color:#111}
#merch .container{position:relative}

/* Place merch title directly under the gold section line (thin gap) */
#merch h2{
    position: absolute;
    /* gold line is 1px tall via .section::before; place title just beneath it */
    top: 0.2rem; /* tightened gap under the gold line */
    left: 1rem; /* align with container padding */
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 5;
    font-size: 1.6rem;
    padding-bottom: 0.25rem; /* small gap below marquee/title */
    text-align: left;
    color: var(--accent);
    /* subtle layered gold glow */
    text-shadow:
      0 0 6px rgba(218,165,32,0.95),
      0 0 18px rgba(218,165,32,0.45),
      0 6px 18px rgba(0,0,0,0.35);
}
#visual-hidden, .visually-hidden{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}

/* Marquee-style animated title for Merch (full-bleed across viewport) */
.marquee{
    display:block;
    position:relative;
    overflow:hidden;
    width:100vw; /* full viewport width */
    left: 50%;
    transform: translateX(calc(-50% - 12px)); /* nudge left edge slightly to the left */
    margin: 0;
    box-sizing: border-box;
}

/* For the artists marquee remove the global nudge to ensure exact -50% animation aligns seamlessly */
#artists > .container > h2 .marquee{
    left: 50%;
    transform: translateX(-50%);
}
.marquee-track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    /* ensure the track is at least twice the viewport so the -50% translate
       loop covers the entire width smoothly */
    min-width: 200%;
}
.marquee-inner{
    display:inline-block;
    white-space:nowrap;
    color:var(--accent);
    font-size:2.1rem; /* increased marquee text for Artists/top edge fit */
    font-weight:700;
    letter-spacing:0.02em;
    text-transform:none;
    text-shadow:0 0 6px rgba(218,165,32,0.95);
    -webkit-text-stroke: 1px #000; /* black outline for marquee text */
    text-stroke: 1px #000;
    padding:0 2rem;
}

/* Merch-specific: remove stroke from merch title text but keep it on star glyphs */
#merch .marquee-inner{ -webkit-text-stroke: 0; text-stroke: 0; }
#merch .marquee-inner .star{ -webkit-text-stroke: 1px #000; text-stroke: 1px #000; display:inline-block; padding:0 0.25rem; }

/* BPM-driven control and token count */
.marquee{--bpm:60;--token-count:18}
/* Animate the track from 0% -> -50% so the second copy fills the gap for a seamless loop */
.marquee-track{animation:marquee-right calc((60s / var(--bpm)) * var(--token-count)) linear infinite}
/* Fallback for browsers without CSS variable/calc() support — provide a
    concrete animation duration so the marquee still scrolls on older
    or restricted-environment browsers (e.g. public library machines). */
.marquee-track{animation: marquee-right 30s linear infinite}

@keyframes marquee-right{
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-ping{
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* Make sure the marquee doesn't overlap the section title area */
/* tightened spacing so releases sit closer under the marquee/title */
#merch .releases-list{margin-top:0.2rem}

/* Responsive: reduce marquee text on smaller viewports so it fits nicely */
@media (max-width: 900px) {
    .marquee-inner{ font-size: 1.4rem; }
}
@media (max-width: 640px) {
    .marquee-inner{ font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce){
    .marquee-track{animation: none !important}
}
#artists h2{
    /* use normal flow positioning to avoid clipping marquee content */
    position: relative;
    top: 0; left: 0;
    margin: 0;
    padding: 6px 0 0 0; /* small top padding so title sits near edge but not clipped */
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 5;
    color: var(--accent);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    overflow: visible;
    line-height: 1;
}
/* Ensure the artist marquee animates continuously like the merch marquee */
#artists > .container > h2 .marquee{
    display:block;
    position:relative;
    overflow:hidden;
    width:100vw;
    left:50%;
    transform: translateX(-50%);
    box-sizing:border-box;
    --bpm:60; --token-count:18;
}
#artists > .container > h2 .marquee-track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    /* wider track for continuous left scroll and extra copies to fill background */
    min-width:400%;
    animation: marquee-right calc((60s / var(--bpm)) * var(--token-count)) linear infinite;
    will-change: transform;
}
/* tighten spacing for the artist marquee so the loop fills smoothly */
#artists > .container > h2 .marquee-inner{ padding: 0 1.2rem; }
#contact h2{
    position: absolute;
    /* align Socials title top-left of the footer section */
    top: 8px;
    left: 1rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 5;
    color: var(--accent);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}
#contact h2::before{display:none !important}
#socials h2{
    position: absolute;
    /* place title under the gold section line, aligned left like other headings */
    top: 8px;
    left: 1rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 5;
    color: var(--accent);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}
#socials h2::before{display:none !important}
#socials .social-links{margin-top:2.1rem}

/* Translucent gradient background for the socials section:
   reddish-brown -> sky-blue -> grayish with light transparency */
#socials{
    background-image: linear-gradient(135deg,
        rgba(139,62,47,0.60) 0%,    /* reddish-brown (darker) */
        rgba(117,163,216,0.42) 55%, /* sky-blue (darker) */
        rgba(107,112,117,0.28) 100% /* grayish (darker) */
    );
    background-color: rgba(139,62,47,0.18); /* slightly stronger fallback tint */
}

/* Make the socials section separator thicker and glowing (full-bleed) */
#socials::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* increased separator thickness */
    background: rgba(218,165,32,0.98);
    box-shadow: 0 8px 26px rgba(218,165,32,0.45), 0 0 18px rgba(218,165,32,0.28) inset;
    filter: drop-shadow(0 8px 20px rgba(218,165,32,0.35));
    z-index: 1;
    pointer-events: none;
}
#artists h2::before{
    /* remove the full-bleed gold background added by .section h2::before */
    display: none !important;
}
#merch h2::before{display:none !important}
/* push merch cards below the marquee/title so they don't sit underneath it */
#merch .releases-list{margin-top:3rem}

/* responsive: smaller top gap on narrower viewports */
@media (max-width: 900px){
    #merch .releases-list{margin-top:1.2rem}
}
@media (max-width: 640px){
    #merch .releases-list{margin-top:0.8rem}
}
#merch .releases-list{gap:0.5rem}

/* Remove heavy card surfaces; use 1px separators between items instead */
#merch .card{background:transparent;border:0;border-radius:0;padding:0}
#merch .releases-list{border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
#merch .releases-list .card{border-bottom:1px solid #e6e6e6;padding:0.4rem 0}
#merch .releases-list .card:last-child{border-bottom:0}
#merch .card .card-content{color:#111;padding:0 0.5rem}
#merch .merch-items .item-name, #merch .merch-items .item-price{color:#222}

.merch-item-list{list-style:none;padding:0;margin:0}

/* Responsive: reduce merch image canvases on smaller screens */
@media (max-width: 900px) {
    /* switch to grid on smaller screens for better wrapping */
    #merch .releases-list{display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
}
@media (max-width: 640px) {
    #merch .releases-list{grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
}

/* Orientation-specific adjustments:
   - Portrait on small screens: show one merch card at a time (full-viewport card)
   - Landscape on small screens: use the same multi-card layout as wide/PC view
*/
@media (max-width: 900px) and (orientation: portrait) {
    #merch .releases-list{
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    /* each card occupies the full viewport width so only one is visible */
    #merch .releases-list .card{
        flex: 0 0 100vw !important;
        max-width: 100vw !important;
        scroll-snap-align: center;
    }
    /* hide per-section separators and tighten spacing for single-item view */
    #merch .releases-list .card{border-right: none;padding-right:0}
}

/* Ensure merch items use the full viewport width inside portrait cards so
   product photos fit the available margin space without being cropped by
   container padding. This makes images edge-to-edge while keeping a small
   internal inset for safe-area where supported. */
@media (max-width: 900px) and (orientation: portrait) {
    /* make the merch container full-bleed so 100vw cards align with viewport */
    #merch .releases-container{
        max-width: none;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0; /* no outer padding so card can use full width */
    }
    /* ensure card content doesn't add extra side padding */
    #merch .releases-list .card .card-content{padding:0 !important}
    /* make merch images fill the card width (use safe-area insets when available) */
    .merch-items .item-image{
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 6px;
        object-fit: contain;
        display: block;
    }
    /* center item details and reduce side margins */
    .merch-items .item-details{padding:0 0.5rem}
}

@media (max-width: 900px) and (orientation: landscape) {
    /* mimic desktop multi-card layout when device is held in landscape */
    #merch .releases-list{
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem;
        overflow-x: auto;
        align-items: start;
        -webkit-overflow-scrolling: touch;
    }
    /* try to show four cards across similar to desktop. Values will clamp naturally on narrow devices. */
    #merch .releases-list .card{
        flex: 0 0 calc((100% - 3rem) / 4) !important;
        max-width: calc((100% - 3rem) / 4) !important;
    }
}

/* Make sure the prev/next buttons inside merch don't conflict with the outer scroll buttons */
.merch-container .scroll-btn{z-index:8}
.merch-items .item-prev, .merch-items .item-next{z-index:9}

/* System prefers reduced motion */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
html{scroll-behavior:smooth}

/* Release-1 accent: translucent greenish -> whitish -> gold background
   with tiny twinkling star overlay */
#releases-list #release-1 {
    position: relative;
    overflow: visible;
    border-radius: 8px;
    /* darker, more opaque accent gradient for Release-1 */
    background-image: linear-gradient(120deg,
        rgba(34,99,57,0.50) 0%,    /* deeper greenish */
        rgba(255,255,255,0.28) 50%, /* stronger mid highlight */
        rgba(218,165,32,0.42) 100%  /* richer goldish */
    );
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

#releases-list #release-1::after{
    /* Star overlay removed per request */
    content: "";
    display: none;
}

/* Ensure the main cover image inside release-1 appears above the sparkle overlay */
#releases-list #release-1 > img {
    position: relative;
    z-index: 2;
}

@keyframes release-sparkle{
    0%,100% { opacity: 0.6; transform: scale(1); filter: blur(0); }
    50%     { opacity: 1;   transform: scale(1.02); filter: blur(0.4px); }
}

/* Release-2 accent: translucent goldish -> reddish gradient */
#releases-list #release-2 {
    position: relative;
    overflow: visible;
    border-radius: 8px;
    background-image: linear-gradient(120deg,
        rgba(218,165,32,0.56) 0%,   /* goldish (darker) */
        rgba(189,119,66,0.42) 50%,  /* warm mid-tone (darker) */
        rgba(153,50,44,0.44) 100%   /* reddish (darker) */
    );
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Ensure exactly 4 merch cards are visible on wide viewports. This block is placed
   late in the stylesheet to override earlier sizing rules. */
@media (min-width: 900px) {
    #merch .releases-container { padding: 0 1rem; max-width: 1100px; margin: 0 auto; width: 100%; }
    #merch .releases-list { display: flex; flex-wrap: nowrap; gap: 1rem; overflow-x: auto; align-items: start; }
    /* 3 gaps of 1rem between 4 cards -> total gap = 3rem, use calc to size four equal cards */
    #merch .releases-list .card {
        flex: 0 0 calc((100% - 3rem) / 4) !important;
        max-width: calc((100% - 3rem) / 4) !important;
    }
}

/* Release-3 accent: translucent reddish -> orangish gradient */
#releases-list #release-3 {
    position: relative;
    overflow: visible;
    border-radius: 8px;
    background-image: linear-gradient(120deg,
        rgba(153,50,44,0.60) 0%,   /* deep reddish (darker) */
        rgba(217,95,27,0.52) 55%,  /* warm orange (darker) */
        rgba(246,153,45,0.36) 100% /* soft gold/orange (darker) */
    );
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Make social link borders gold and slightly thicker for better contrast */
#socials .social-btn{
    border: 2px solid rgba(218,165,32,0.98);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-color: rgba(0,0,0,0.42); /* slightly transparent inner background */
    color: #fff; /* ensure text/icon contrast */
}
#socials .social-btn svg{filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));}
#socials .social-btn:hover{border-color: rgba(198,150,32,0.98); background-color: rgba(0,0,0,0.56); transform: translateY(-2px);} 

/* Position socials links near the bottom of the socials background */
#socials .socials-overlay .social-links{
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0; /* cancel earlier margin */
    justify-content: center;
}
@media (max-width:640px){
    #socials .socials-overlay .social-links{bottom:12px;padding:0 1rem;gap:0.6rem}
}

/* Artists section background using the project's SWR artist image */
#artists{
    position: relative;
    padding: 2.25rem 0; /* vertical space for the section */
    background-image: url('../images/SWR artist  BG 2.png');
    /* Full-bleed background like the socials section */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 58vh; /* keep tall enough to show artwork */
    overflow: hidden;
    /* make section full-bleed so background fills viewport width */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
/* dark overlay for contrast so text and cards remain readable */
#artists::before{
    content: '';
    position: absolute;
    inset: 0;
    /* keep a light overlay so text remains readable but doesn't hide the artwork */
    background: rgba(0,0,0,0.12);
    z-index: 0;
    pointer-events: none;
}

/* Full-bleed gold separator at the very top of the artists section */
#artists::after{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 5px; /* increased to 5px per request */
    /* gold band with a 1px black inner edge (inside the section) */
    background: linear-gradient(to bottom,
        rgba(218,165,32,0.98) 0%,
        rgba(218,165,32,0.98) calc(100% - 1px),
        rgba(0,0,0,1) calc(100% - 1px) 100%
    );
    z-index: 2; /* above overlay but beneath the heading band */
    box-shadow: 0 8px 26px rgba(218,165,32,0.45), 0 0 18px rgba(218,165,32,0.28) inset;
    filter: drop-shadow(0 8px 20px rgba(218,165,32,0.35));
    pointer-events: none;
}
/* ensure inner content sits above the overlay */
#artists .container, #artists .grid, #artists .card, #artists .card-content{position:relative;z-index:1}

/* Artists section styles (new formal layout) */
#artists{ display: block !important; }

/* Full-bleed background using SWR artist image */
#artists{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-image: url('../images/SWR artist  BG 2.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.25rem 0;
    color: #fff;
}
#artists::before{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 0;
}
#artists .container{ position: relative; z-index: 1; }

/* Formal artist grid */
#artists .artists-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}
#artists .artist-card{
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1rem;
    border-radius: 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
#artists .artist-card img{
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border: 2px solid rgba(255,255,255,0.06);
}
#artists .artist-name{ font-size:1.1rem; font-weight:700; color:var(--accent); margin-bottom:0.25rem }
#artists .artist-role{ font-size:0.95rem; color: rgba(255,255,255,0.85); margin-bottom:0.6rem }
#artists .artist-bio{ font-size:0.9rem; color: rgba(255,255,255,0.82); line-height:1.3 }

@media (max-width:900px){
    #artists{ padding:2rem 0 }
    #artists .artist-card img{ width:120px;height:120px }
}

/* Make artist cards smaller and responsive so they fit inside the visible
   area of the background image without overlapping important artwork. */
#artists .grid{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
    padding: 0 1rem;
}
#artists .card{
    background: transparent;
    border: none;
    box-shadow: none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
#artists .card img{
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    display:block;
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
#artists .card-content{ padding-top: 0.6rem; text-align:center }

@media (max-width: 900px){
    #artists .card img{ width: 120px; height:120px }
    #artists .grid{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
@media (max-width: 640px){
    #artists .card img{ width: 96px; height:96px }
    #artists{ min-height: 48vh; padding: 1.25rem 0 }
}

@media (max-width:900px){
    /* keep bottom spacing but move top spacing into the heading band for small screens */
    #artists{padding:0 0 32px 0}
    #artists > .container > h2{padding-top:32px}
}

/* Ensure the marquee title sits above the artist cards and add a 1px gold separator */
#artists > .container > h2{
    position: relative;
    z-index: 3; /* above cards (which are z-index:1) and overlay (z-index:0) */
    /* make the band full-bleed across the viewport while keeping text aligned with the container */
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    align-self: flex-start;
    margin: 0 0 10px 0; /* reduced bottom gap */
    /* preserve spacing but remove the dark band so section BG is visible */
    padding: 8px 0 8px 0; /* keep vertical padding for visual spacing */
    background: transparent;
    border-bottom: none; /* use pseudo-element for exact full-bleed control */
}

/* Full-bleed gold separator line under the artist marquee band */
#artists > .container > h2::after{
    content: '';
    position: absolute;
    /* center a full-viewport width line so it reaches the page walls */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    bottom: 0;
    height: 5px; /* increased to 5px per request */
    /* gold band with a 1px black inner edge (inside the content) */
    background: linear-gradient(to bottom,
        rgba(0,0,0,1) 0px, /* 1px black line on the inner/top edge */
        rgba(0,0,0,1) 1px,
        rgba(218,165,32,0.98) 1px,
        rgba(218,165,32,0.98) 100%
    );
    pointer-events: none;
    /* glow effect */
    box-shadow:
        0 8px 26px rgba(218,165,32,0.45),
        0 0 18px rgba(218,165,32,0.28) inset;
    filter: drop-shadow(0 8px 20px rgba(218,165,32,0.35));
}
#artists > .container > h2 .marquee{display:block}

@media (max-width:640px){
    #artists > .container > h2{margin-bottom:12px;padding-bottom:8px}
}

/* Reverse the artists marquee so it scrolls to the right (animation runs in reverse) */
#artists > .container > h2 .marquee-track{
    animation-direction: reverse;
    /* ensure the track starts with no blank area: keep the initial frame applied,
       make the track wider so repeated content fills the viewport, and hint
       the browser to optimize transforms for smooth continuous animation */
    min-width: 300%;
    transform: translateX(0%); /* initial placement so the first frame is full */
    animation-fill-mode: both;
    will-change: transform;
}

/* Style for inline music SVG used in marquee titles */
.music-icon{width:1.05em;height:1.05em;vertical-align:middle;fill:rgba(218,165,32,0.98);margin:0 0.35em}