/* =========================================================
   A SICKNESS UNTO DEATH — Official Website
   High-end Doom Metal One-Pager
   ========================================================= */

:root {
    --color-white: #ffffff;
    --color-off-white: #fafafa;
    --color-cream: #f7f5f3;
    --color-gray-50: #f3f2f0;
    --color-gray-100: #ebe9e6;
    --color-gray-200: #d9d6d2;
    --color-gray-300: #b8b4ae;
    --color-gray-400: #8e8982;
    --color-gray-500: #6b6660;
    --color-gray-600: #4a4743;
    --color-gray-700: #2e2c2a;
    --color-gray-800: #1a1918;
    --color-black: #0a0a0a;
    --color-accent: #b22222;
    --color-accent-dark: #8b1a1a;
    --color-accent-light: #cc4444;

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4.5rem;
    --spacing-2xl: 6rem;

    --container-width: 1280px;
    --container-narrow: 960px;

    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--transition-smooth);
    --transition-base: 300ms var(--transition-smooth);
    --transition-slow: 600ms var(--transition-smooth);

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.12);
}

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

html {
    scroll-behavior: smooth;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1.22rem;
    line-height: 1.75;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-gray-800);
    letter-spacing: -0.01em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color var(--transition-base),
                padding var(--transition-base),
                box-shadow var(--transition-base),
                backdrop-filter var(--transition-base);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.875rem 0;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .nav-container {
        padding: 0 var(--spacing-lg);
    }
}

.nav-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    color: var(--color-white);
    transition: color var(--transition-base);
    white-space: nowrap;
}

.navbar.scrolled .nav-logo {
    color: var(--color-gray-800);
}

.nav-logo::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-slow);
}

.nav-logo:hover::after {
    width: 100%;
}

.nav-links {
    display: none;
    align-items: center;
    gap: var(--spacing-md);
    list-style: none;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }
}

.nav-link {
    font-family: var(--font-body);
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--color-white);
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--transition-base);
}

.navbar.scrolled .nav-link {
    color: var(--color-gray-600);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent);
}

.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
    color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-social {
    display: none;
    align-items: center;
    gap: 0.875rem;
}

@media (min-width: 1024px) {
    .nav-social {
        display: flex;
    }
}

.nav-social .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 22px;
    opacity: 0.9;
    transition: opacity var(--transition-fast), transform var(--transition-fast), filter var(--transition-base);
}

.social-logo {
    height: 100%;
    width: auto;
    display: block;
    filter: invert(1) brightness(1.1);
    transition: filter var(--transition-base);
    object-fit: contain;
}

.navbar.scrolled .social-logo {
    filter: none;
}

.nav-social .social-icon:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.nav-social .social-icon:hover .social-logo {
    filter: invert(1) brightness(1.1) drop-shadow(0 0 2px rgba(178, 34, 34, 0.8)) sepia(1) saturate(10) hue-rotate(-20deg);
}

.navbar.scrolled .nav-social .social-icon:hover .social-logo {
    filter: drop-shadow(0 0 2px rgba(178, 34, 34, 0.6)) sepia(1) saturate(8) hue-rotate(-25deg) brightness(0.9);
}

.nav-social .social-icon:nth-child(1) .social-logo {
    height: 22px;
    filter: brightness(0) invert(1);
}
.navbar.scrolled .nav-social .social-icon:nth-child(1) .social-logo {
    filter: brightness(0) invert(0);
}
.nav-social .social-icon:nth-child(1):hover .social-logo {
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(178, 34, 34, 0.8)) sepia(1) saturate(10) hue-rotate(-20deg) !important;
}
.navbar.scrolled .nav-social .social-icon:nth-child(1):hover .social-logo {
    filter: brightness(0) invert(0) drop-shadow(0 0 2px rgba(178, 34, 34, 0.6)) sepia(1) saturate(8) hue-rotate(-25deg) brightness(0.9) !important;
}
.nav-social .social-icon:nth-child(2) .social-logo { height: 24px; }
.nav-social .social-icon:nth-child(3) .social-logo { height: 24px; }
.nav-social .social-icon:nth-child(4) .social-logo { height: 26px; }
.nav-social .social-icon:nth-child(5) .social-logo { height: 26px; }

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    z-index: 1100;
    position: relative;
}

@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: transform var(--transition-base),
                opacity var(--transition-fast),
                background-color var(--transition-base);
}

.navbar.scrolled .nav-toggle span {
    background-color: var(--color-gray-800);
}

.nav-toggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile menu */
@media (max-width: 1023px) {
    .nav-links,
    .nav-social {
        position: fixed;
        left: 0;
        right: 0;
        display: none;
        background-color: var(--color-white);
        padding: var(--spacing-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        transform: translateY(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-md);
    }

    .nav-links {
        top: 72px;
    }

    .nav-social {
        top: auto;
        bottom: 0;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-gray-100);
    }

    .nav-links.open,
    .nav-social.open {
        display: flex;
        transform: translateY(0);
    }

    .nav-link {
        color: var(--color-gray-700);
        font-size: 1.25rem;
    }

    .nav-social .social-icon {
        height: 26px;
        opacity: 1;
    }

    .nav-social .social-logo {
        filter: none;
    }

    .nav-social .social-icon:nth-child(1) .social-logo {
        height: 24px;
        filter: brightness(0);
    }
    .nav-social .social-icon:nth-child(2) .social-logo { height: 26px; }
    .nav-social .social-icon:nth-child(3) .social-logo { height: 24px; }
    .nav-social .social-icon:nth-child(4) .social-logo { height: 26px; }
    .nav-social .social-icon:nth-child(5) .social-logo { height: 28px; }

    .nav-social .social-icon:hover .social-logo {
        filter: drop-shadow(0 0 2px rgba(178, 34, 34, 0.6)) sepia(1) saturate(8) hue-rotate(-25deg) brightness(0.9);
    }
}

/* =========================================================
   HEADER / HERO
   ========================================================= */

.header-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url('images/asicknessuntodeath_bandphoto.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.35) 40%,
        rgba(10, 10, 10, 0.55) 100%
    );
}

.header-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(178, 34, 34, 0.08) 0%,
        transparent 60%
    );
}

.header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    max-width: 900px;
}

.header-line {
    width: 60px;
    height: 1px;
    background-color: var(--color-accent);
    margin: 0 auto var(--spacing-md);
}

.header-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 6.5rem);
    letter-spacing: 0.04em;
    color: var(--color-white);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.header-title-accent {
    font-style: italic;
    font-weight: 400;
    color: var(--color-white);
    display: inline-block;
    position: relative;
}

.header-title-accent::before {
    content: '';
    position: absolute;
    bottom: 0.05em;
    left: -0.1em;
    right: -0.1em;
    height: 0.35em;
    background-color: var(--color-accent);
    opacity: 0.18;
    z-index: -1;
    transform: skewX(-8deg);
}

.header-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.15em;
    margin-bottom: var(--spacing-lg);
}

.header-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 2rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(178, 34, 34, 0.35);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-gray-800);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-gray-800);
    border-color: var(--color-gray-300);
}

.btn-outline:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.btn svg {
    width: 20px;
    height: 20px;
}

.header-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
}

.header-scroll span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.1); }
}

/* =========================================================
   SECTION BASE
   ========================================================= */

.section {
    padding: var(--spacing-2xl) 0;
    position: relative;
}

.section-alt {
    background-color: var(--color-off-white);
}

.section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-gray-200),
        transparent
    );
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.section-divider {
    width: 80px;
    height: 1px;
    background-color: var(--color-accent);
    margin: 0 auto;
    opacity: 0.6;
}

/* =========================================================
   NEWS SECTION
   ========================================================= */

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

.news-card {
    background-color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    border: 1px solid var(--color-gray-100);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
    position: relative;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-slow);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gray-200);
}

.news-card:hover::before {
    width: 100%;
}

.news-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-100);
}

.news-day-month {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.75rem;
}

.news-day {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-gray-800);
    line-height: 1;
}

.news-month {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0;
    line-height: 1;
}

.news-year {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-top: 0.4rem;
}

.news-content {
    flex: 1;
}

.news-title {
    font-size: 1.65rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.news-excerpt {
    font-size: 1.18rem;
    color: var(--color-gray-500);
    line-height: 1.75;
    margin-bottom: var(--spacing-sm);
}

.news-link {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    display: inline-block;
}

.news-link:hover {
    color: var(--color-accent-dark);
}

/* =========================================================
   LIVE SECTION
   ========================================================= */

.live-list {
    max-width: var(--container-narrow);
    margin: 0 auto var(--spacing-lg);
}

.live-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color var(--transition-fast);
}

.live-item:first-child {
    border-top: 1px solid var(--color-gray-200);
}

.live-item:hover {
    background-color: rgba(178, 34, 34, 0.02);
}

.live-item.live-placeholder {
    opacity: 0.7;
}

.live-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    text-align: center;
}

.live-day {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-gray-800);
    line-height: 1;
}

.live-month {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0.25rem;
}

.live-year {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-gray-400);
    letter-spacing: 0.1em;
    margin-top: 0.125rem;
}

.live-info {
    min-width: 0;
}

.live-venue {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.live-location {
    font-family: var(--font-body);
    font-size: 1.12rem;
    color: var(--color-gray-500);
    font-style: italic;
}

.live-action {
    display: flex;
    align-items: center;
}

.live-status {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-accent);
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-sm);
}

.live-placeholder .live-date {
    background-color: transparent;
    border-color: var(--color-gray-200);
    border-style: dashed;
}

.btn-text {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-gray-700);
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
}

.btn-text:hover {
    color: var(--color-accent);
}

.btn-ticket {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(178, 34, 34, 0.25);
}

.btn-ticket:hover {
    background-color: #8b1a1a;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(178, 34, 34, 0.4);
}

.live-note {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.live-note p {
    font-style: italic;
    color: var(--color-gray-500);
    font-size: 1.2rem;
}

.live-past-accordion {
    margin: 0 auto var(--spacing-lg);
    max-width: 100%;
}

.past-gigs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.past-gigs-list li {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--color-gray-600);
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--color-gray-100);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
}

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

.past-gigs-date {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-gray-800);
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    min-width: 6.2rem;
}

.past-gigs-sep {
    color: var(--color-gray-300);
    font-weight: 500;
}

@media (max-width: 640px) {
    .live-item {
        grid-template-columns: 84px 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm);
    }

    .live-date {
        padding: 0.75rem 0.5rem;
    }

    .live-day {
        font-size: 1.85rem;
    }

    .live-month {
        font-size: 0.8rem;
        letter-spacing: 0.15em;
    }

    .live-year {
        font-size: 0.75rem;
    }

    .live-venue {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    .live-location {
        font-size: 0.98rem;
    }

    .live-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: var(--spacing-xs);
        padding-left: 0;
    }
}

/* =========================================================
   BAND SECTION
   ========================================================= */

.band-bio {
    max-width: 820px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.band-bio-name {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--color-gray-800);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
}

.band-bio-tag {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-align: center;
    font-style: italic;
    margin-top: -0.3rem;
    margin-bottom: 0.4rem;
}

.band-bio p {
    font-size: 1.2rem;
    line-height: 1.85;
    color: var(--color-gray-600);
    font-style: normal;
    margin: 0;
}

.band-bio > p {
    max-width: 720px;
    margin: 0 auto;
}

.band-bio p em {
    font-style: italic;
    color: var(--color-gray-700);
}

.bio-closing-line {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-700);
    letter-spacing: 0.03em;
    text-align: center;
    font-style: italic;
    margin-top: 0.5rem;
}

.bio-accordions-wrap {
    max-width: var(--container-width);
    margin: 0 auto var(--spacing-2xl);
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

@media (min-width: 768px) {
    .bio-accordions-wrap {
        padding: 0 var(--spacing-lg);
    }
}

.bio-accordion {
    width: 100%;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-white);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.bio-accordion:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.bio-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.5rem;
    background: var(--color-gray-50);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-gray-800);
    letter-spacing: 0.04em;
    transition: background var(--transition-base), color var(--transition-base);
}

.bio-accordion-header:hover {
    background: #efe9e0;
    color: var(--color-accent);
}

.bio-accordion-header:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.bio-accordion[open] .bio-accordion-header,
.bio-accordion-header[aria-expanded="true"] {
    background: var(--color-accent);
    color: var(--color-white);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bio-accordion-icon {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    transition: transform var(--transition-base);
    color: var(--color-accent);
    flex-shrink: 0;
    margin-left: 1rem;
}

.bio-accordion-header[aria-expanded="true"] .bio-accordion-icon,
.bio-accordion[open] .bio-accordion-icon {
    color: var(--color-white);
    transform: rotate(45deg);
}

.bio-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease-in-out;
    background: var(--color-white);
}

.bio-accordion-panel:not([hidden]) {
    max-height: 2000px;
}

.bio-accordion-content {
    padding: 1.75rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bio-accordion-content p {
    font-size: 1.15rem;
    line-height: 1.85;
}

.band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    max-width: var(--container-width);
}

@media (min-width: 1024px) {
    .band-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.band-member {
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base);
}

.band-member:hover {
    transform: translateY(-6px);
}

.member-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--spacing-md);
    background-color: var(--color-gray-100);
}

.member-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
}

.member-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-gray-200);
    opacity: 0;
    transition: opacity var(--transition-base), inset var(--transition-base);
    z-index: 2;
    pointer-events: none;
}

.band-member:hover .member-photo::before {
    opacity: 1;
    inset: 8px;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), filter var(--transition-base);
    filter: grayscale(20%) contrast(1.02);
}

.band-member:hover .member-photo img {
    transform: scale(1.06);
    filter: grayscale(0%) contrast(1.05);
}

.member-info {
    text-align: center;
}

.member-name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.25rem;
}

.member-role {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: var(--color-gray-500);
    letter-spacing: 0.03em;
}

/* =========================================================
   DISCOGRAPHY SECTION
   ========================================================= */

.disco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.disco-item {
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base);
}

.disco-item:hover {
    transform: translateY(-6px);
}

.disco-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-md);
    background-color: var(--color-gray-100);
}

.disco-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), filter var(--transition-base);
}

.disco-item:hover .disco-cover img {
    transform: scale(1.08);
}

.disco-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0) 40%,
        rgba(10, 10, 10, 0.85) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--spacing-md);
}

.disco-item:hover .disco-overlay {
    opacity: 1;
}

.disco-streaming {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transform: translateY(20px);
    transition: transform var(--transition-base);
}

.disco-item:hover .disco-streaming {
    transform: translateY(0);
}

.stream-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.stream-link svg {
    width: 18px;
    height: 18px;
}

.stream-link:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.disco-info {
    text-align: left;
}

.disco-year {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.disco-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.375rem;
}

.disco-type {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: var(--color-gray-500);
    font-style: italic;
}

.disco-footer {
    text-align: center;
}

/* =========================================================
   SHOP SECTION
   ========================================================= */

.shop-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

.shop-lead {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--color-gray-600);
    margin: 0;
    max-width: 680px;
}

.shop-cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.shop-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.1rem 2.2rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.shop-bandcamp-logo {
    display: block;
    height: 28px;
    width: auto;
    background-color: var(--color-white);
    padding: 4px;
    border-radius: 50%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.shop-cta-btn:hover .shop-bandcamp-logo {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--spacing-2xl);
        align-items: start;
    }
}

.contact-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-200);
}

.contact-text {
    font-size: 1.22rem;
    line-height: 1.85;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-lg);
}

.contact-email {
    padding: var(--spacing-md);
    background-color: var(--color-off-white);
    border-left: 3px solid var(--color-accent);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-bottom: 0.5rem;
}

.contact-email-link {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-gray-800);
    transition: color var(--transition-fast);
    display: inline-block;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
}

.contact-email-link:hover {
    color: var(--color-accent);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-sm);
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.65rem;
    padding: var(--spacing-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 110px;
}

.social-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.social-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-200);
}

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

.social-card-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.social-card:nth-child(1) .social-card-logo {
    height: 28px;
    filter: brightness(0);
}
.social-card:nth-child(2) .social-card-logo { height: 32px; }
.social-card:nth-child(3) .social-card-logo { height: 28px; }
.social-card:nth-child(4) .social-card-logo { height: 32px; }
.social-card:nth-child(5) .social-card-logo { height: 34px; }

.social-card:hover .social-card-logo {
    transform: translateY(-2px);
}

.social-card span {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--color-gray-800);
}

.social-card small {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--color-gray-400);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-gray-800);
    color: rgba(255, 255, 255, 0.7);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
    align-items: center;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.footer-tagline {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
}

.footer-copy p {
    font-family: var(--font-body);
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.footer-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    font-size: 0.98rem;
}

.footer-legal-links a:hover {
    color: var(--color-accent);
    border-bottom-color: rgba(178, 34, 34, 0.6);
}

@media (max-width: 768px) {
    .footer-copy { align-items: center; text-align: center; }
}

/* =========================================================
   PRIVACY / LEGAL PAGE
   ========================================================= */

.legal-page {
    padding: 5rem 0 var(--spacing-2xl);
    background-color: var(--color-white);
    position: relative;
}

.legal-header {
    max-width: var(--container-narrow);
    margin: 0 auto var(--spacing-2xl);
    text-align: left;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.legal-header p.breadcrumbs {
    font-size: 1rem;
    color: var(--color-gray-400);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.legal-header p.breadcrumbs a {
    color: var(--color-accent);
    text-decoration: none;
}

.legal-header p.breadcrumbs a:hover {
    text-decoration: underline;
}

.legal-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-gray-800);
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.15;
}

.legal-content {
    max-width: var(--container-narrow);
    margin: 0 auto;
    color: var(--color-gray-700);
    line-height: 1.8;
    font-size: 1.12rem;
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 2.8rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-gray-100);
}

.legal-content h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 2rem 0 0.75rem;
}

.legal-content h4 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin: 1.4rem 0 0.5rem;
}

.legal-content p {
    margin: 0 0 1rem;
}

.legal-content ul {
    padding-left: 1.6rem;
    margin: 0.5rem 0 1.2rem;
}

.legal-content ul li {
    padding-left: 0.25rem;
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(178, 34, 34, 0.25);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.legal-content a:hover {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent);
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-slow),
                transform var(--transition-slow);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.news-card:nth-child(1) { transition-delay: 0ms; }
.news-card:nth-child(2) { transition-delay: 100ms; }
.news-card:nth-child(3) { transition-delay: 200ms; }

.band-member:nth-child(1) { transition-delay: 0ms; }
.band-member:nth-child(2) { transition-delay: 80ms; }
.band-member:nth-child(3) { transition-delay: 160ms; }
.band-member:nth-child(4) { transition-delay: 240ms; }
.band-member:nth-child(5) { transition-delay: 320ms; }

/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --spacing-2xl: 4rem;
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
    }

    .nav-container {
        gap: 0.75rem;
    }

    .nav-logo {
        font-size: 0.9rem;
        letter-spacing: 0.09em;
        min-width: 0;
    }

    .nav-toggle {
        width: 26px;
        height: 18px;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .navbar {
        padding: 1.125rem 0;
    }

    .navbar.scrolled {
        padding: 0.75rem 0;
    }

    .header-section {
        background-image: url('images/asicknessuntodeath_bandphoto_mobile.jpg');
        background-position: top center;
        align-items: flex-end;
        justify-content: center;
        min-height: 100svh;
    }

    .header-content {
        padding: 0 var(--spacing-md) 2.5rem;
        width: 100%;
    }

    .header-logo {
        max-width: 280px;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .header-subtitle {
        font-size: 1rem;
        letter-spacing: 0.12em;
        margin-bottom: var(--spacing-md);
    }

    .header-cta {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .header-cta .btn {
        width: 100%;
        max-width: 280px;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .contact-email {
        padding: 1.25rem;
    }

    .contact-email-link {
        font-size: 1.05rem;
    }

    .contact-text {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: var(--spacing-md);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Selection */
::selection {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* =========================================================
   HEADER LOGO
   ========================================================= */

.header-logo {
    max-width: 720px;
    width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
    margin: 0 auto var(--spacing-md);
    display: block;
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.4));
    animation: logoFadeIn 1.2s var(--transition-smooth) both;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   TRADEMARK ICONS
   ========================================================= */

.trademark-icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
    transition: fill var(--transition-fast), transform var(--transition-fast);
}

.trademark-icon * {
    fill: currentColor !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

.stream-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.stream-link svg * {
    fill: currentColor !important;
    stroke: none !important;
}

.btn svg {
    fill: currentColor;
}

.btn svg * {
    fill: currentColor !important;
    stroke: none !important;
}

/* =========================================================
   DISCOGRAPHY — VINTAGE MANSION GALLERY
   ========================================================= */

.section-disco-gallery {
    background-color: #e8dfd2;
    position: relative;
    isolation: isolate;
}

.section-disco-gallery::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(139, 90, 43, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(101, 67, 33, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 30%, rgba(178, 34, 34, 0.04) 0%, transparent 40%),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 40px,
            rgba(139, 90, 43, 0.025) 40px,
            rgba(139, 90, 43, 0.025) 80px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 60px,
            rgba(101, 67, 33, 0.02) 60px,
            rgba(101, 67, 33, 0.02) 120px
        );
    background-size: auto, auto, auto, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

.section-disco-gallery::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0);
    background-image:
        linear-gradient(180deg, rgba(60, 35, 15, 0.18) 0%, transparent 8%, transparent 92%, rgba(60, 35, 15, 0.22) 100%),
        linear-gradient(90deg, rgba(60, 35, 15, 0.10) 0%, transparent 12%, transparent 88%, rgba(60, 35, 15, 0.10) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23654321' fill-opacity='0.03'%3E%3Cpath d='M200 40c-44 0-80 36-80 80 0 28 14 52 36 68-30 6-56 30-56 60 0 34 28 62 62 62h76c34 0 62-28 62-62 0-30-26-54-56-60 22-16 36-40 36-68 0-44-36-80-80-80zM120 240c-27 0-50 23-50 50s23 50 50 50h50v-44l-24 16 6-26-30 10 16-24-26 6 20-22-32 10 26-20-24-6 30-14-26-2 32-8-24 2 32-2-24-12 40 0zm80 8h16v64h-16v-64zm80-8c0-10-2-20-6-28-4 8-6 18-6 28v12h12v-12zm6 40c0 12-4 24-12 32h18v-64h-6c8 8 12 18 12 32h-12z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, auto, 400px 400px;
    background-repeat: no-repeat, no-repeat, repeat;
    opacity: 1;
}

.section-disco-gallery > .container {
    position: relative;
    z-index: 1;
}

.section-disco-gallery .section-label,
.section-disco-gallery .section-title,
.section-disco-gallery .section-divider {
    position: relative;
    z-index: 1;
}

.section-disco-gallery .section-title {
    color: #3d2914;
    text-shadow: 1px 1px 0 rgba(255, 248, 235, 0.5);
}

.section-disco-gallery .section-label {
    color: #8b1a1a;
}

.gallery-wall {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem 1.5rem;
    padding: 2.5rem 0 3.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .gallery-wall {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.5rem 2.5rem;
    }
}

@media (min-width: 1100px) {
    .gallery-wall {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem 1.5rem;
        align-items: start;
    }
}

.gallery-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 400ms ease;
}

@media (min-width: 1100px) {
    .gallery-piece-1 {
        transform: translateY(-10px) rotate(-0.8deg);
    }
    .gallery-piece-1:hover {
        transform: translateY(-16px) rotate(-0.4deg);
    }
    .gallery-piece-2 {
        transform: translateY(14px) rotate(0.6deg);
    }
    .gallery-piece-2:hover {
        transform: translateY(8px) rotate(0.2deg);
    }
    .gallery-piece-3 {
        transform: translateY(-6px) rotate(0.9deg);
    }
    .gallery-piece-3:hover {
        transform: translateY(-12px) rotate(0.4deg);
    }
    .gallery-piece-4 {
        transform: translateY(18px) rotate(-0.5deg);
    }
    .gallery-piece-4:hover {
        transform: translateY(12px) rotate(-0.1deg);
    }
}

.ornate-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    padding: 14px;
    background:
        linear-gradient(135deg, #8b6914 0%, #c9a227 10%, #f2d57a 18%, #c9a227 26%, #7a5c10 38%, #a6801d 48%, #d9b342 58%, #a6801d 68%, #7a5c10 80%, #c9a227 92%, #8b6914 100%);
    box-shadow:
        0 30px 70px -20px rgba(40, 20, 5, 0.7),
        0 18px 40px -10px rgba(40, 20, 5, 0.45),
        inset 0 0 0 2px rgba(0, 0, 0, 0.35),
        inset 0 0 0 6px rgba(242, 213, 122, 0.35),
        inset 0 0 0 8px rgba(60, 40, 10, 0.6);
    border: 4px solid #8b6914;
    border-radius: 2px;
}

.ornate-frame::before {
    content: '';
    position: absolute;
    top: 10px; right: 10px; bottom: 10px; left: 10px;
    background: linear-gradient(180deg, #5a3e0a 0%, #9b7812 50%, #5a3e0a 100%);
    z-index: 0;
    pointer-events: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.3);
}

.ornate-frame::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 240, 190, 0.18) 0%, transparent 20%, transparent 80%, rgba(40, 20, 5, 0.18) 100%),
        linear-gradient(90deg, rgba(255, 240, 190, 0.12) 0%, transparent 15%, transparent 85%, rgba(40, 20, 5, 0.12) 100%);
}

.frame-corner {
    position: absolute;
    width: 54px;
    height: 54px;
    z-index: 5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23f2d57a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'%3E%3Cpath d='M2 2 L18 2 L18 8 L8 8 L8 18 L2 18 Z'/%3E%3Cpath d='M6 6 L14 6 L14 14 L6 14 Z' fill='%23c9a227' fill-opacity='0.4'/%3E%3Cpath d='M2 2 Q12 12 2 22'/%3E%3Cpath d='M2 2 Q22 12 22 2'/%3E%3Ccircle cx='2' cy='2' r='2.2' fill='%23f2d57a' stroke='%238b6914' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.frame-corner-tl { top: -10px; left: -10px; }
.frame-corner-tr { top: -10px; right: -10px; transform: rotate(90deg); }
.frame-corner-br { bottom: -10px; right: -10px; transform: rotate(180deg); }
.frame-corner-bl { bottom: -10px; left: -10px; transform: rotate(270deg); }

.frame-mat {
    position: relative;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    padding: 16px;
    background: linear-gradient(135deg, #f5efe0 0%, #ebe2cc 100%);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        inset 0 -1px 2px rgba(255, 255, 255, 0.8),
        0 0 0 1px rgba(120, 100, 60, 0.35);
}

.album-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 180px;
    overflow: hidden;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    display: block;
    color: #ffffff;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.album-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.album-poles {
    background:
        radial-gradient(circle at 30% 20%, rgba(178, 34, 34, 0.22), transparent 60%),
        linear-gradient(135deg, #17171a 0%, #2a1e1a 40%, #3a221a 70%, #1a1014 100%);
    background-size: cover, cover;
    position: relative;
}

.album-poles::before {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
}

.album-poles::after {
    content: "POLES  ·  2023";
    position: absolute;
    left: 0; right: 0; bottom: 10%;
    z-index: 1;
    font-size: clamp(0.8rem, 2vw, 1.15rem);
    color: #f5e5d6;
    opacity: 0.9;
    letter-spacing: 0.18em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.album-beyond {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(220, 220, 220, 0.16), transparent 55%),
        linear-gradient(160deg, #1f1f22 0%, #3a3a40 35%, #26262a 70%, #0e0e10 100%);
    position: relative;
}

.album-beyond::before {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.album-beyond::after {
    content: "BEYOND  ·  2018";
    position: absolute;
    left: 0; right: 0; bottom: 10%;
    z-index: 1;
    font-size: clamp(0.8rem, 2vw, 1.15rem);
    color: #e8e6dc;
    opacity: 0.9;
    letter-spacing: 0.18em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.album-tge {
    background:
        radial-gradient(circle at 20% 80%, rgba(160, 160, 160, 0.14), transparent 60%),
        linear-gradient(180deg, #1a1b1f 0%, #2e2b26 45%, #1e1a1a 80%, #0d0b0c 100%);
    position: relative;
}

.album-tge::before {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.album-tge::after {
    content: "THE GREAT ESCAPE  ·  2015";
    position: absolute;
    left: 0; right: 0; bottom: 10%;
    z-index: 1;
    font-size: clamp(0.7rem, 1.6vw, 0.95rem);
    color: #ebe3d2;
    opacity: 0.9;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.album-despair {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(200, 200, 200, 0.12), transparent 60%),
        linear-gradient(180deg, #201c1c 0%, #161618 50%, #0b0b0c 100%);
    position: relative;
}

.album-despair::before {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.32) 100%);
}

.album-despair::after {
    content: "DESPAIR  ·  2013";
    position: absolute;
    left: 0; right: 0; bottom: 10%;
    z-index: 1;
    font-size: clamp(0.8rem, 2vw, 1.15rem);
    color: #e4dfcd;
    opacity: 0.9;
    letter-spacing: 0.18em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.album-wrap::after {
    pointer-events: none;
}

.album-cover-art {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms ease, filter 400ms ease, opacity 400ms ease;
    filter: contrast(1.03) saturate(1.02);
    background-color: transparent;
}

.ornate-frame:hover .album-cover-art {
    transform: scale(1.05);
}

/* Guarantee section has real min height regardless of content load state */
.section-disco-gallery {
    min-height: 720px;
}

.gallery-wall {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem 1.5rem;
    padding: 2.5rem 0 3.5rem;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 420px;
}

.gallery-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 400ms ease;
    min-height: 360px;
}

.ornate-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    padding: 14px;
    background:
        linear-gradient(135deg, #8b6914 0%, #c9a227 10%, #f2d57a 18%, #c9a227 26%, #7a5c10 38%, #a6801d 48%, #d9b342 58%, #a6801d 68%, #7a5c10 80%, #c9a227 92%, #8b6914 100%);
    box-shadow:
        0 30px 70px -20px rgba(40, 20, 5, 0.7),
        0 18px 40px -10px rgba(40, 20, 5, 0.45),
        inset 0 0 0 2px rgba(0, 0, 0, 0.35),
        inset 0 0 0 6px rgba(242, 213, 122, 0.35),
        inset 0 0 0 8px rgba(60, 40, 10, 0.6);
    border: 4px solid #8b6914;
    border-radius: 2px;
    min-width: 180px;
    aspect-ratio: 1 / 1;
}

.disco-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 5, 2, 0) 45%,
        rgba(10, 5, 2, 0.88) 100%
    );
    opacity: 0;
    transition: opacity 400ms ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.25rem;
    z-index: 2;
    box-sizing: border-box;
}

.ornate-frame:hover .disco-overlay {
    opacity: 1;
}

.disco-streaming {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transform: translateY(20px);
    transition: transform 400ms ease 80ms;
}

.ornate-frame:hover .disco-streaming {
    transform: translateY(0);
}

.stream-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transition: all 300ms ease;
    box-sizing: border-box;
}

.stream-link:hover {
    background-color: #b22222;
    border-color: #b22222;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(178, 34, 34, 0.45);
}

.name-plaque {
    margin-top: 22px;
    position: relative;
    z-index: 1;
    min-width: 72%;
    max-width: 92%;
    padding: 14px 22px 16px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #cdb27a 0%, #a8884e 18%, #8a6d3b 45%, #a8884e 72%, #cdb27a 100%);
    border: 1px solid #5c4a26;
    box-shadow:
        0 10px 26px -8px rgba(40, 20, 5, 0.55),
        0 3px 6px rgba(40, 20, 5, 0.25),
        inset 0 1px 0 rgba(255, 235, 180, 0.55),
        inset 0 -1px 0 rgba(40, 20, 5, 0.4),
        inset 0 0 0 1px rgba(255, 220, 150, 0.25);
    text-align: center;
}

.name-plaque::before {
    content: '';
    position: absolute;
    top: 4px; right: 4px; bottom: 4px; left: 4px;
    border: 1px solid rgba(60, 40, 10, 0.45);
    pointer-events: none;
}

.name-plaque::after {
    content: '';
    position: absolute;
    top: 7px; right: 7px; bottom: 7px; left: 7px;
    border-top: 1px solid rgba(255, 225, 170, 0.35);
    border-bottom: 1px solid rgba(60, 40, 10, 0.35);
    pointer-events: none;
}

.plaque-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    color: #2b1d0a;
    text-shadow:
        0 1px 0 rgba(255, 230, 170, 0.5),
        0 -1px 0 rgba(40, 20, 5, 0.25);
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}

.plaque-desc {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #3d2a10;
    opacity: 0.92;
    line-height: 1.4;
    margin: 0;
    position: relative;
    z-index: 1;
}

.disco-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 3.5rem;
}

/* Gallery piece stagger on reveal */
.gallery-piece:nth-child(1) { transition-delay: 0ms; }
.gallery-piece:nth-child(2) { transition-delay: 80ms; }
.gallery-piece:nth-child(3) { transition-delay: 160ms; }
.gallery-piece:nth-child(4) { transition-delay: 240ms; }

/* =========================================================
   DISCOGRAPHY — CLEAN GRID
   ========================================================= */

.section-discography-clean {
    background:
        linear-gradient(180deg, #f8f4ef 0%, #f2ece4 100%);
}

#news.section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.82) 55%, rgba(250, 244, 235, 0.88) 100%),
        url('images/news-section-background.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

#news.section > .container {
    position: relative;
    z-index: 1;
}

#contact.section {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.72) 60%, rgba(242, 236, 228, 0.8) 100%),
        url('images/contact-section-back.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

#contact.section > .container {
    position: relative;
    z-index: 1;
}

.discography-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 680px) {
    .discography-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .discography-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.album-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.album-card-cover {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #111111;
    box-shadow:
        0 20px 40px -22px rgba(0, 0, 0, 0.45),
        0 8px 16px rgba(0, 0, 0, 0.12);
}

.album-card-title {
    margin: 1rem 0 0.25rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #141414;
}

.album-card-meta {
    margin: 0 0 1.1rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(20, 20, 20, 0.85);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

.album-streams {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
}

.album-streams .album-stream-btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.album-stream-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem 1.15rem;
    border: 1px solid rgba(178, 34, 34, 0.18);
    background: #ffffff;
    color: #141414;
    text-decoration: none;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        color 220ms ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    text-align: left;
    border-radius: 6px;
}

.stream-logo {
    height: 22px;
    width: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    transition: filter 220ms ease, transform 220ms ease;
    display: block;
}

.album-stream-btn:nth-child(1) .stream-logo { height: 24px; width: 28px; flex-basis: 28px; }
.album-stream-btn:nth-child(2) .stream-logo { height: 22px; width: 28px; flex-basis: 28px; }
.album-stream-btn:nth-child(3) .stream-logo { height: 26px; width: 28px; flex-basis: 28px; }
.album-stream-btn:nth-child(4) .stream-logo { height: 22px; width: 28px; flex-basis: 28px; }
.album-stream-btn:nth-child(5) .stream-logo { height: 26px; width: 28px; flex-basis: 28px; }

.album-stream-btn:hover .stream-logo {
    transform: scale(1.05);
}

.album-stream-btn:hover {
    transform: translateY(-2px);
    border-color: #b22222;
    box-shadow: 0 12px 24px rgba(178, 34, 34, 0.12);
    color: #b22222;
}

/* =========================================================
   FOCUS & FINAL BASE
   ========================================================= */

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

.member-photo.lightbox-trigger {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.lightbox.open {
    display: flex;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 300ms var(--transition-smooth);
}

.lightbox.open .lightbox-backdrop {
    opacity: 1;
}

.lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 350ms var(--transition-smooth),
                opacity 350ms var(--transition-smooth);
}

.lightbox.open .lightbox-content {
    transform: scale(1);
    opacity: 1;
}

.lightbox-figure {
    position: relative;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    padding: 10px;
    border: 1px solid rgba(178, 34, 34, 0.25);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(178, 34, 34, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.lightbox-image {
    max-width: 100%;
    max-height: 65vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    padding: 1.25rem 1rem 1rem;
    text-align: center;
}

.lightbox-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
}

.lightbox-role {
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
}

.lightbox-close {
    position: absolute;
    top: -3.5rem;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
}

.lightbox-close:hover {
    background: rgba(178, 34, 34, 0.9);
    border-color: rgba(178, 34, 34, 1);
    transform: rotate(90deg);
}

.lightbox-nav {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.lightbox-nav:hover {
    background: rgba(178, 34, 34, 0.85);
    border-color: rgba(178, 34, 34, 1);
    transform: scale(1.08);
}

.lightbox-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lightbox-content {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 1rem;
    }

    .lightbox-figure {
        max-width: 85vw;
        order: -1;
        flex: 1 1 100%;
    }

    .lightbox-close {
        top: -3rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox-title {
        font-size: 1.2rem;
    }

    .lightbox-role {
        font-size: 0.95rem;
    }
}