/**
 * Consolidated Page Styles
 * Page-specific styles for OK Rock Band Website
 *
 * Combines:
 * - Admin Panel (admin.css)
 * - Homepage
 * - Modern Redesign
 *
 * Note: This file contains essential page-specific styles.
 * Consider lazy-loading for non-critical pages.
 *
 * @version 1.0.0
 * @date November 17, 2025
 */

/* ============================================================
   ADMIN PANEL
   ============================================================ */

/* ========================================
   ADMIN VARIABLES
   ======================================== */

:root {
    --admin-primary: #2c3e50;
    --admin-secondary: #3498db;
    --admin-success: #27ae60;
    --admin-warning: #f39c12;
    --admin-danger: #e74c3c;
    --admin-dark: #1a1a1a;
    --admin-light: #ecf0f1;
    --admin-border: #bdc3c7;
    --admin-text: #2c3e50;
    --admin-text-light: #7f8c8d;
    --admin-bg: #ffffff;
    --admin-sidebar-width: 250px;
}

/* ========================================
   ADMIN LOGIN PAGE
   ======================================== */

.login-page {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-secondary) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.login-form {
    background: var(--admin-light, #fff);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;

    & h1 {
        color: var(--admin-primary);
        margin-bottom: 0.5rem;
    }

    & p {
        color: var(--admin-text-light);
    }
}

.login-footer {
    text-align: center;
    margin-top: 2rem;

    & a {
        color: var(--admin-secondary);
        text-decoration: none;
    }
}

/* ========================================
   ADMIN LAYOUT
   ======================================== */

.admin-body {
    background-color: var(--admin-light);
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* ========================================
   ADMIN SIDEBAR
   ======================================== */

.admin-sidebar {
    width: var(--admin-sidebar-width);
    background: var(--admin-primary);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    transition: all 0.3s ease;
    z-index: var(--z-header, 1000);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    display: block;

    & small {
        display: block;
        font-size: 0.8rem;
        opacity: 0.7;
        font-weight: normal;
    }
}

.sidebar-nav {
    padding: 1rem 0;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;

    &:hover,
    &.active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-left-color: var(--admin-secondary);
    }
}

.nav-icon {
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

/* ========================================
   ADMIN MAIN CONTENT
   ======================================== */

.admin-main {
    margin-left: var(--admin-sidebar-width);
    flex: 1;
    min-height: 100vh;
    background: var(--admin-light);
}

.admin-topbar {
    background: var(--admin-light, #fff);
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    padding: 5px;
}

.sidebar-toggle span {
    width: 20px;
    height: 3px;
    background: var(--admin-text);
    margin: 2px 0;
    transition: all 0.3s ease;
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-content {
    padding: 2rem;
}

/* ========================================
   ADMIN RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: flex;
    }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ========================================
   HOMEPAGE VARIABLES
   ======================================== */

:root {
    --primary-color: #ff3366;
    --primary-dark: #d91e47;
    --secondary-color: #4ecdc4;
    --accent-color: #ffd93d;

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --container-max-width: 1200px;
    --header-height: 80px;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background picture {
    display: contents;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    filter: saturate(0.9) brightness(0.85);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.5) 0%,
            rgba(10, 10, 10, 0.15) 40%,
            rgba(10, 10, 10, 0.6) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: var(--space-md, 2rem);
}

.hero-brand {
    margin-bottom: var(--space-lg, 3rem);
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 var(--space-sm, 1rem) 0;
    background: linear-gradient(135deg, var(--white, #fff) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 500;
    color: var(--light-gray, #ccc);
    margin: 0 0 var(--space-xs, 0.5rem) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hero-years {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
    letter-spacing: 0.05em;
}

.hero-actions {
    display: flex;
    gap: var(--space-md, 2rem);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg, 3rem);
}

/* ========================================
   HOMEPAGE SECTIONS
   ======================================== */

.section {
    padding: clamp(3rem, 6vw, 6rem) 0;
    container-type: inline-size;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-lg, 3rem);
}

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--space-sm, 1rem);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--text-secondary, #ccc);
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   ALBUMS SECTION
   ======================================== */

.albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md, 2rem);
    margin-top: var(--space-lg, 3rem);
}

.album-item {
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);

    &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.album-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.album-item:hover .album-cover img {
    transform: scale(1.05);
}

.album-details {
    padding: var(--space-md, 2rem);
}

.album-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #fff);
}

.album-year {
    font-size: 0.9rem;
    color: var(--text-muted, #999);
}

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

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg, 3rem);
    margin-top: var(--space-lg, 3rem);
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 2rem);
}

.news-image {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
    transform: scale(1.03);
}

.news-content {
    flex: 1;
}

.news-date {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.news-excerpt {
    color: var(--text-secondary, #ccc);
    line-height: 1.6;
}

/* ============================================================
   MODERN REDESIGN
   ============================================================ */

/* ========================================
   ARTICLE PAGES
   ======================================== */

.article-page {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) var(--space-md, 2rem);
}

.article-header {
    text-align: center;
    margin-bottom: var(--space-lg, 3rem);
}

.article-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md, 2rem);
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-md, 2rem);
    font-size: 0.9rem;
    color: var(--text-muted, #999);
    flex-wrap: wrap;
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary, #ccc);

    & h2,
    & h3,
    & h4 {
        margin-top: var(--space-lg, 3rem);
        margin-bottom: var(--space-md, 2rem);
        color: var(--text-primary, #fff);
    }

    & p {
        margin-bottom: var(--space-md, 2rem);
    }

    & img {
        border-radius: 12px;
        margin: var(--space-lg, 3rem) 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    & blockquote {
        border-left: 4px solid var(--primary-color);
        padding-left: var(--space-md, 2rem);
        margin: var(--space-lg, 3rem) 0;
        font-style: italic;
        color: var(--text-muted, #999);
    }
}

/* ========================================
   BAND MEMBER PAGES
   ======================================== */

.member-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) var(--space-md, 2rem);
}

.member-hero {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-lg, 3rem);
    margin-bottom: var(--space-xl, 4rem);
}

.member-photo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.member-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.member-info h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.member-role {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: var(--space-md, 2rem);
}

.member-bio {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary, #ccc);
}

.member-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md, 2rem);
    margin-top: var(--space-xl, 4rem);
}

.stat-card {
    background: var(--bg-elevated, #2a2a30);
    padding: var(--space-md, 2rem);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #ff5588;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #c4c4cc;
    font-size: 0.9rem;
}

/* ========================================
   CONCERT PAGES
   ======================================== */

.concert-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) var(--space-md, 2rem);
}

.concert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-lg, 3rem);
}

.concert-card {
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, opacity 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.concert-poster {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.concert-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.concert-details {
    padding: var(--space-md, 2rem);
}

.concert-date {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.concert-venue {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.concert-location {
    color: var(--text-muted, #999);
    margin-bottom: var(--space-md, 2rem);
}

.concert-status {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;

    &.upcoming {
        background: rgba(78, 205, 196, 0.2);
        color: #4ecdc4;
    }

    &.past {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-muted, #999);
    }
}

/* ============================================================
   PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    /* Homepage */
    .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .albums-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    /* Member Page */
    .member-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .member-photo {
        max-width: 300px;
        margin: 0 auto;
    }

    /* Concert Page */
    .concert-grid {
        grid-template-columns: 1fr;
    }

    /* Article Page */
    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .member-stats {
        grid-template-columns: 1fr;
    }

    .article-page,
    .member-page,
    .concert-page {
        padding: var(--space-md, 2rem) var(--space-sm, 1rem);
    }
}

/* ============================================================
   GALLERY - ULTRA MODERN EDITION
   ============================================================ */
:root {
    --gallery-gap: 2rem;
    --card-radius: 24px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(20, 20, 20, 0.6);
    --neon-accent: #ff4444;
    --neon-secondary: #ff0055;
    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --aurora-1: #dc2626;
    --aurora-2: #991b1b;
    --aurora-3: #ff0055;
}

.gallery-page-container {
    padding-top: clamp(6rem, 10vw, 10rem);
    min-height: 100vh;
    background: #030303;
    color: #fff;
    position: relative;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

/* 🌌 Aurora Borealis Background */
.gallery-bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% -20%, #1a1a1a, #000);

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 140vw;
        height: 140vh;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.15;
        animation: aurora-float 20s infinite alternate ease-in-out;
    }

    &::before {
        background: radial-gradient(circle, var(--aurora-1), transparent 60%);
        top: -50%;
        left: -20%;
    }

    &::after {
        background: radial-gradient(circle, var(--aurora-3), transparent 60%);
        bottom: -50%;
        right: -20%;
        animation-delay: -10s;
    }
}

@keyframes aurora-float {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        transform: translate(-10%, 10%) rotate(5deg);
        opacity: 0.1;
    }
}

.gallery-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4vw;
}

/* ✨ Header Typography */
.gallery-page-header {
    text-align: center;
    margin-bottom: 6rem;
    position: relative;
    min-height: 200px;
}

.gallery-title-main {
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;

    &::after {
        content: attr(data-text);
        /* Requires JS to populate if dynamic, or just static */
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: blur(20px);
        opacity: 0.4;
        z-index: -1;
    }
}

.gallery-subtitle {
    font-size: 1rem;
    color: var(--neon-accent);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

/* Gallery Categories Grid - Modern Masonry Layout */
.gallery-categories-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    perspective: 2000px;
}

/* CSS Grid masonry (Firefox 77+, Chrome behind flag) with graceful fallback */
@supports (grid-template-rows: masonry) {
    .gallery-categories-modern {
        grid-template-rows: masonry;
    }
}

.gallery-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.5s var(--transition-smooth),
                box-shadow 0.5s var(--transition-smooth),
                border-color 0.4s ease;
    background: #0a0a0a;
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.5);
    border: var(--glass-border);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    &:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6),
                    0 0 0 1px rgba(220, 38, 38, 0.15);
        border-color: rgba(255, 255, 255, 0.15);
    }

    &:hover::before {
        opacity: 1;
    }

    &:hover .gallery-card-bg {
        transform: scale(1.08);
        filter: grayscale(0%) brightness(0.9) contrast(1.05);
    }

    &:hover .gallery-card-count {
        background: rgba(220, 38, 38, 0.3);
        border-color: rgba(220, 38, 38, 0.5);
        transform: translateY(0) scale(1.05);
    }

    &:hover .gallery-card-title {
        transform: translateY(-6px);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    }

    &:hover .gallery-card-desc {
        transform: translateY(0);
        opacity: 1;
    }

    /* Vary aspect ratios for visual interest in masonry */
    &:nth-child(3n+1) {
        aspect-ratio: 4 / 3;
    }
    &:nth-child(3n+2) {
        aspect-ratio: 3 / 2;
    }
    &:nth-child(3n) {
        aspect-ratio: 5 / 4;
    }
}

.gallery-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--transition-smooth), filter 0.5s ease;
    filter: grayscale(30%) brightness(0.7) contrast(1.1);
    will-change: transform;
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
    z-index: 5;
    transition: background 0.4s ease;
}

.gallery-card:hover .gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.gallery-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(220, 38, 38, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fff;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    width: fit-content;
    /* Always visible - count badge is key info */
    opacity: 1;
    transform: translateY(0);
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--transition-smooth);
}

.gallery-card-title {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.15;
    transition: transform 0.5s var(--transition-smooth),
                text-shadow 0.4s ease;
}

.gallery-card-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.75rem;
    max-width: 90%;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s var(--transition-smooth) 0.08s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 🖼️ Grid Layout (Masonry-style) */
.photos-grid-modern {
    display: block;
    /* Fallback */
    columns: 4 320px;
    column-gap: 2rem;
    margin-top: 4rem;
}

.photo-item-modern {
    break-inside: avoid;
    margin-bottom: 2rem;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.4s var(--transition-smooth);
    /* Glass border */
    border: 1px solid rgba(255, 255, 255, 0.05);

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    & img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.8s var(--transition-smooth);
        backface-visibility: hidden;
    }

    &:hover {
        transform: scale(1.02);
        z-index: 2;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    &:hover img {
        transform: scale(1.1);
    }

    &:hover::after {
        opacity: 1;
    }
}

/* 🎥 Cinematic Lightbox */
.lightbox-ultra {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 500);
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    &.active {
        opacity: 1;
        pointer-events: all;
    }

    &.active .lightbox-image {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    &.active .lightbox-caption {
        transform: translateY(0);
        opacity: 1;
    }
}

.lightbox-content {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.6s var(--transition-smooth), opacity 0.6s ease;
}

.lightbox-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4vw;
    pointer-events: none;
    transform: translateY(-50%);
}

.lightbox-btn {
    pointer-events: all;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-size: 1.5rem;

    &:hover {
        background: #fff;
        color: #000;
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    }
}

.lightbox-close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    z-index: calc(var(--z-modal, 500) + 1);
    border: none;
    background: transparent;
    font-size: 2rem;

    &:hover {
        background: transparent;
        color: var(--neon-secondary);
        transform: rotate(90deg);
    }
}

.lightbox-caption {
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.2s;
}

/* 🧬 Loaders */
.loader-modern {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loader-ring {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 4px solid #fff;
    border-radius: 50%;
    animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.loader-ring:nth-child(1) {
    animation-delay: -0.45s;
}

.loader-ring:nth-child(2) {
    animation-delay: -0.3s;
}

.loader-ring:nth-child(3) {
    animation-delay: -0.15s;
}

.loader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--neon-accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--neon-accent);
}

@keyframes loader-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 2rem;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .photos-grid-modern {
        columns: 2 160px;
        column-gap: 1rem;
    }

    .gallery-title-main {
        font-size: 3rem;
    }

    .lightbox-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

/* ============================================================
   VIDEO PAGE
   ============================================================ */

/* Shared page color variables */
:root {
    --primary-red: #dc2626;
    --primary-red-dark: #991b1b;
    --accent-gold: #f59e0b;
    --text-white: #ffffff;
    --text-gray: #9ca3af;
    --bg-dark: #0f0f0f;
    --bg-darker: #1a1a1a;
    --bg-card: rgba(255, 255, 255, 0.08);
    --bg-glass: rgba(255, 255, 255, 0.1);
    --border-glass: rgba(255, 255, 255, 0.2);
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.4);
    --gradient-red: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   VIDEO PAGE - vp- prefix (video.ejs)
   ============================================ */

.video-page {
    --vp-gold: #f59e0b;
    --vp-gold-dark: #d97706;
    --vp-red: #dc2626;
    --vp-bg: #0f0f0f;
    --vp-bg-card: rgba(255, 255, 255, 0.06);
    --vp-border: rgba(255, 255, 255, 0.12);
    --vp-text: #ffffff;
    --vp-text-muted: #9ca3af;
    --vp-radius: 12px;
    --vp-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: var(--vp-bg);
    color: var(--vp-text);
    min-height: 100vh;
}

/* -- vp- Hero Section -- */
.vp-hero {
    position: relative;
    padding: 5rem 0 3rem;
    text-align: center;
    overflow: hidden;
}

.vp-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #991b1b 0%, #0f0f0f 70%);
    z-index: 0;
}

.vp-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
}

.vp-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.vp-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--vp-text);
}

.vp-hero__subtitle {
    font-size: 1.1rem;
    color: var(--vp-text-muted);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.vp-hero__stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.vp-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    padding: 1rem 1.5rem;
    text-align: center;
    min-width: 100px;
    transition: transform var(--vp-transition), border-color var(--vp-transition);

    &:hover {
        transform: translateY(-2px);
        border-color: var(--vp-gold);
    }
}

.vp-stat__number {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--vp-gold);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.vp-stat__label {
    font-size: 0.75rem;
    color: var(--vp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -- vp- Tab Navigation -- */
.vp-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--vp-border);
}

.vp-tabs__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vp-tabs__list::-webkit-scrollbar { display: none; }

.vp-tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: none;
    color: var(--vp-text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color var(--vp-transition), border-color var(--vp-transition), background var(--vp-transition);
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;

    &:hover {
        color: var(--vp-text);
        background: rgba(255, 255, 255, 0.04);
    }

    &.active {
        color: var(--vp-gold);
        border-bottom-color: var(--vp-gold);
    }

    &.active .vp-tabs__count {
        background: rgba(245, 158, 11, 0.2);
        color: var(--vp-gold);
    }
}

.vp-tabs__icon { font-size: 1.1rem; }

.vp-tabs__count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--vp-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    min-width: 1.4rem;
    text-align: center;
    transition: background var(--vp-transition), color var(--vp-transition);
}

@media (max-width: 600px) {
    .vp-tabs__text { display: none; }
    .vp-tabs__count { display: none; }
    .vp-tabs__tab { padding: 1rem; }
    .vp-tabs__icon { font-size: 1.4rem; }
}

/* -- vp- Content Sections -- */
.vp-content {
    padding: 3rem 0 4rem;
    min-height: 50vh;
}

.vp-section {
    display: none;
    margin-bottom: 3rem;
}

.vp-section--visible {
    display: block;
    animation: vpFadeIn 0.4s ease-out;
}

@keyframes vpFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.vp-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.vp-section__header h2 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--vp-text);
}

.vp-section__header p {
    font-size: 1rem;
    color: var(--vp-text-muted);
    margin: 0;
}

/* -- vp- Video Grid -- */
.vp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Section divider between stacked sections */
.vp-section--visible + .vp-section--visible {
    padding-top: 2rem;
    border-top: 1px solid var(--vp-border);
}

@media (max-width: 500px) {
    .vp-grid { grid-template-columns: 1fr; }
}

/* -- vp- Video Card -- */
.vp-card {
    background: var(--vp-bg-card);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--vp-transition), box-shadow var(--vp-transition), border-color var(--vp-transition);

    &:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.4);
    }

    &:focus-visible {
        outline: 2px solid var(--vp-gold);
        outline-offset: 2px;
    }

    &:hover .vp-card__thumb img {
        transform: scale(1.06);
    }

    &:hover .vp-card__overlay {
        opacity: 1;
    }

    &:hover .vp-card__play {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
}

.vp-card--hero,
.vp-card--highlight {
    border-color: rgba(245, 158, 11, 0.3);
}

.vp-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
}

.vp-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vp-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--vp-transition);
}

.vp-card__play {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-red);
    transform: scale(0.85);
    transition: transform var(--vp-transition), box-shadow var(--vp-transition);
}

.vp-card__play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
}

.vp-card--hero .vp-card__play {
    width: 76px;
    height: 76px;
}

.vp-card--hero .vp-card__play svg {
    width: 34px;
    height: 34px;
}

.vp-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--vp-gold);
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 1;
}

.vp-card__duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1;
}

.vp-card__category-tag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--vp-text-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 1;
    backdrop-filter: blur(4px);
}

.vp-card__info { padding: 1.25rem; }
.vp-card--hero .vp-card__info { padding: 1.5rem; }

.vp-card__info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vp-text);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.vp-card--hero .vp-card__info h3 { font-size: 1.4rem; }

.vp-card__info p {
    color: var(--vp-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vp-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--vp-text-muted);
    flex-wrap: wrap;
}

.vp-card__meta-views {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.vp-card__meta-views svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.vp-card__quality {
    background: var(--vp-red);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
}

.vp-card__share {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.vp-card__share button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--vp-border);
    color: var(--vp-text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background var(--vp-transition), color var(--vp-transition);
}

.vp-card__share button:hover { color: #fff; }
.vp-card__share .share-fb:hover { background: #3b5998; }
.vp-card__share .share-tw:hover { background: #1da1f2; }
.vp-card__share .share-vk:hover { background: #4a76a8; }

/* -- vp- Empty State -- */
.vp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--vp-text-muted);
}

.vp-empty__icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.vp-empty p {
    font-size: 1rem;
    opacity: 0.7;
}

/* -- vp- Video Modal -- */
.vp-modal {
    border: none;
    padding: 1rem;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    &[open] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &::backdrop {
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

.vp-modal__container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    background: #111;
    border: 1px solid var(--vp-border);
    border-radius: 16px;
    overflow: hidden;
    animation: vpModalIn 0.3s ease-out;
    transition: max-width var(--vp-transition);
}

@keyframes vpModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vp-border);
    gap: 1rem;
}

.vp-modal__header-left {
    flex: 1;
    min-width: 0;
}

.vp-modal__title {
    color: var(--vp-text);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.vp-modal__meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--vp-text-muted);
}

.vp-modal__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.vp-modal__nav-btn,
.vp-modal__theater-btn,
.vp-modal__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    color: var(--vp-text-muted);
    cursor: pointer;
    transition: background var(--vp-transition), color var(--vp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-modal__nav-btn,
.vp-modal__theater-btn {
    &:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
}

.vp-modal__theater-btn.active {
    background: var(--vp-gold);
    color: #000;
    border-color: var(--vp-gold);
}

.vp-modal__close {
    &:hover {
        background: var(--vp-red);
        color: #fff;
        border-color: var(--vp-red);
    }
}

.vp-modal__close svg,
.vp-modal__nav-btn svg,
.vp-modal__theater-btn svg {
    width: 20px;
    height: 20px;
}

.vp-modal__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.vp-modal__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* -- YouTube Link in Modal Header -- */
.vp-modal__yt-link {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    color: var(--vp-text-muted);
    cursor: pointer;
    transition: background var(--vp-transition), color var(--vp-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &:hover {
        background: #ff0000;
        color: #fff;
        border-color: #ff0000;
    }
}

.vp-modal__yt-link svg {
    width: 20px;
    height: 20px;
}

/* -- Embed Error Fallback -- */
.vp-modal__error {
    position: absolute;
    inset: 0;
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.vp-modal__error-icon {
    color: var(--vp-text-muted);
    opacity: 0.5;
}

.vp-modal__error-icon svg {
    width: 48px;
    height: 48px;
}

.vp-modal__error-title {
    color: var(--vp-text);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.vp-modal__error-subtitle {
    color: var(--vp-text-muted);
    font-size: 0.9rem;
    margin: 0;
    max-width: 400px;
}

.vp-modal__error-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ff0000;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--vp-transition), transform var(--vp-transition);
    margin-top: 0.5rem;

    &:hover {
        background: #cc0000;
        transform: translateY(-2px);
    }
}

.vp-modal__error-btn svg {
    width: 20px;
    height: 20px;
}

/* -- Theater Mode -- */
.vp-modal--theater .vp-modal__container {
    max-width: 95vw;
    border-radius: 8px;
}

.vp-modal--theater .vp-modal__backdrop {
    background: rgba(0, 0, 0, 0.97);
}

.vp-modal--theater .vp-modal__header {
    padding: 0.75rem 1.5rem;
}

/* -- Keyboard Hints -- */
.vp-kbd-hints {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    z-index: calc(var(--z-modal, 500) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.vp-modal[open] .vp-kbd-hints {
    opacity: 1;
}

.vp-kbd-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--vp-text-muted);
}

.vp-kbd-hint kbd {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: inherit;
    font-size: 0.7rem;
    color: var(--vp-text);
}

/* -- Responsive Modal -- */
@media (max-width: 768px) {
    .vp-modal { padding: 0.5rem; }
    .vp-modal__header { padding: 0.75rem 1rem; }
    .vp-modal__title { font-size: 0.95rem; }
    .vp-kbd-hints { display: none; }
    .vp-modal__nav-btn { display: none; }
}

/* -- vp- Modal Description -- */
.vp-modal__desc {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--vp-text-muted);
    line-height: 1.4;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- vp- Hero CTA -- */
.vp-hero__cta {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.vp-yt-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: #ff0000;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--vp-transition), box-shadow var(--vp-transition), background var(--vp-transition);
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}

.vp-yt-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255, 0, 0, 0.45);
    background: #e60000;
    color: #fff;
}

.vp-yt-cta svg {
    flex-shrink: 0;
}

.vp-hero__cta-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--vp-text-muted);
    opacity: 0.7;
}

/* -- vp- Featured Video Banner -- */
.vp-featured {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 1) 100%);
    padding: 0 0 2rem;
}

.vp-featured__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vp-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--vp-transition), box-shadow var(--vp-transition), border-color var(--vp-transition);
}

.vp-featured__inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(245, 158, 11, 0.4);
}

.vp-featured__inner:focus-visible {
    outline: 2px solid var(--vp-gold);
    outline-offset: 2px;
}

.vp-featured__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.vp-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vp-featured__inner:hover .vp-featured__thumb img {
    transform: scale(1.04);
}

.vp-featured__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--vp-transition);
}

.vp-featured__inner:hover .vp-featured__play-overlay {
    opacity: 1;
}

.vp-featured__play-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform var(--vp-transition), box-shadow var(--vp-transition);
}

.vp-featured__inner:hover .vp-featured__play-btn {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
}

.vp-featured__play-btn svg {
    width: 32px;
    height: 32px;
    margin-left: 3px;
}

.vp-featured__info {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.vp-featured__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vp-gold);
    background: rgba(245, 158, 11, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    width: fit-content;
}

.vp-featured__title {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--vp-text);
    margin: 0;
}

.vp-featured__desc {
    font-size: 0.95rem;
    color: var(--vp-text-muted);
    line-height: 1.5;
    margin: 0;
}

.vp-featured__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--vp-text-muted);
    margin-top: 0.25rem;
}

.vp-featured__year,
.vp-featured__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.vp-featured__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.vp-featured__watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: var(--vp-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--vp-transition), transform var(--vp-transition);
}

.vp-featured__watch-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.vp-featured__yt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: transparent;
    color: var(--vp-text-muted);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--vp-transition), border-color var(--vp-transition), background var(--vp-transition);
}

.vp-featured__yt-btn:hover {
    color: #ff0000;
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .vp-featured__inner {
        grid-template-columns: 1fr;
    }

    .vp-featured__info {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .vp-featured__play-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.2);
    }
}

/* -- vp- Card Actions (YouTube link + copy) -- */
.vp-card__actions {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--vp-transition);
}

.vp-card:hover .vp-card__actions,
.vp-card:focus-within .vp-card__actions {
    opacity: 1;
}

.vp-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--vp-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--vp-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--vp-transition), background var(--vp-transition), border-color var(--vp-transition);
    padding: 0;
}

.vp-card__action:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

a.vp-card__action:hover {
    color: #ff0000;
    border-color: rgba(255, 0, 0, 0.4);
    background: rgba(255, 0, 0, 0.1);
}

.vp-card__action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.vp-card__action--copied {
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    background: rgba(34, 197, 94, 0.1) !important;
}

/* Show actions on touch devices */
@media (hover: none) {
    .vp-card__actions {
        opacity: 1;
    }
}

/* -- vp- Card Meta layout fix -- */
.vp-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* -- vp- Card stagger entrance -- */
.vp-section--visible .vp-card {
    animation: vpCardIn 0.4s ease-out both;
}

@keyframes vpCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   SECTION ANIMATIONS & POLISH
   ============================================ */

/* Animated section dividers */
.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(220, 38, 38, 0.3),
        transparent
    );
    margin: clamp(2rem, 4vw, 4rem) 0;
}

/* Hero section scroll indicator pulse */
.scroll-hint {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Section entry animations */
.section[data-reveal] {
    transition-duration: 0.8s;
}

/* Image hover zoom for gallery/album images */
.image-zoom-container {
    overflow: hidden;
    border-radius: 8px;

    & img {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    &:hover img {
        transform: scale(1.06);
    }
}

/* Smooth count-up animation for stats */
@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-animate {
    animation: count-up 0.6s ease forwards;
}

/* Content loading transition */
.content-enter {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    &.active {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Album page hover effects */
.album-card-modern:focus-visible {
    outline: 2px solid var(--accent, #dc2626);
    outline-offset: 2px;
}

/* Timeline section scroll animation */
.timeline-event[data-reveal] {
    transition-delay: calc(var(--index, 0) * 0.1s);
}

/* Full-bleed section utility */
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ============================================
   2026 Modern Page Enhancements
   ============================================ */

/* Album page - container queries for cards */
.albums-page .albums-grid {
  container-type: inline-size;
  container-name: albums;
}

@container albums (max-width: 500px) {
  .album-card {
    grid-template-columns: 1fr;
  }
  .album-card .album-cover {
    aspect-ratio: 1;
    max-height: 300px;
  }
}

/* News page - container queries */
.news-page .articles-grid {
  container-type: inline-size;
  container-name: news;
}

@container news (max-width: 600px) {
  .article-card {
    grid-template-columns: 1fr;
  }
}

/* About page - modern timeline subgrid */
.about-timeline {
  display: grid;
  grid-template-columns: auto 1fr;

  & > * {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0 2rem;
    align-items: start;
  }
}

/* Gallery - CSS columns masonry */
.gallery-page .gallery-grid {
  columns: 3 280px;
  column-gap: 1rem;

  & > * {
    break-inside: avoid;
    margin-bottom: 1rem;
  }
}

@container (max-width: 600px) {
  .gallery-page .gallery-grid {
    columns: 2 150px;
  }
}

/* Video page - modern card layout */
.video-page .vp-grid {
  container-type: inline-size;
  container-name: vpvideos;
}

@container vpvideos (max-width: 500px) {
  .vp-card .vp-card__thumb {
    aspect-ratio: 16 / 9;
  }
}

/* Members page - modern profile cards */
.members-grid {
  container-type: inline-size;
  container-name: members;
}

@container members (max-width: 400px) {
  .member-card {
    text-align: center;
  }
  .member-card .member-photo {
    margin-inline: auto;
  }
}

/* Article detail - modern reading experience */
.article-content {
  max-inline-size: 70ch;
  margin-inline: auto;

  & h2, & h3 {
    text-wrap: balance;
    margin-block-start: 2em;
  }

  & p {
    text-wrap: pretty;
    line-height: 1.8;
    hanging-punctuation: first last;
  }

  & blockquote {
    border-inline-start: 3px solid var(--accent, #f59e0b);
    padding-inline-start: 1.5em;
    font-style: italic;
    color: var(--text-secondary);
  }

  & img {
    border-radius: var(--radius-lg, 12px);
    max-width: 100%;
    height: auto;
  }

  & figure {
    margin-inline: 0;

    & figcaption {
      text-align: center;
      font-size: 0.875rem;
      color: var(--text-muted);
      margin-block-start: 0.5rem;
    }
  }
}

/* Contacts page - modern form styling */
.contact-form .form-group {
  position: relative;
}

.contact-form .form-group label {
  transition: transform 200ms ease, font-size 200ms ease;
}

.contact-form .form-group:has(input:focus, textarea:focus) label {
  color: var(--accent, #f59e0b);
}

.contact-form .form-group:has(input:user-valid) label::after {
  content: ' \2713';
  color: var(--success, #22c55e);
}

/* Search results - highlight animation */
.search-highlight {
  background: oklch(0.78 0.15 85 / 0.2);
  border-radius: 2px;
  padding-inline: 2px;
  animation: highlight-fade 2s ease-out;
}

@keyframes highlight-fade {
  from { background: oklch(0.78 0.15 85 / 0.5); }
  to { background: oklch(0.78 0.15 85 / 0.2); }
}

/* Guestbook - modern message cards */
.guestbook-entry {
  border-radius: var(--radius-lg, 12px);
  background: oklch(0.18 0.01 260 / 0.5);
  border: 1px solid oklch(1 0 0 / 0.06);
  padding: 1.5rem;
  transition: background 200ms ease;

  &:hover {
    background: oklch(0.20 0.01 260 / 0.6);
  }
}

[data-theme="light"] .guestbook-entry {
  background: oklch(0.98 0.005 260 / 0.8);
  border-color: oklch(0 0 0 / 0.06);
}

[data-theme="light"] .guestbook-entry:hover {
  background: oklch(0.96 0.005 260 / 0.9);
}

/* ============================================================
   ABOUT PAGE (extracted from about.ejs inline styles)
   ============================================================ */

.about-page {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(6rem, 10vw, 10rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

.about-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.about-hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    margin: 0 0 0.5rem;
}

.about-hero p {
    opacity: 0.5;
    font-size: 1.125rem;
}

.about-section {
    margin-bottom: 3rem;
}

.about-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
    color: var(--accent-red, #dc2626);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
}

.about-section p {
    line-height: 1.8;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    text-align: center;
}

.about-stat {
    padding: 1.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md, 8px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s ease, transform 0.3s ease;

    &:hover {
        border-color: rgba(220, 38, 38, 0.2);
        transform: translateY(-2px);
    }
}

.about-stat .stat-value {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--accent-red, #dc2626);
}

.about-stat .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
    margin-top: 0.25rem;
}

.about-quote {
    border-left: 3px solid var(--accent-red, #dc2626);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    opacity: 0.8;
}

.about-cta {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.about-cta a {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.2s, transform 0.2s;

    &:hover {
        transform: translateY(-2px);
    }
}

.about-cta .btn-primary {
    background: var(--accent-red, #dc2626);
    color: white;
}

.about-cta .btn-primary:hover {
    background: var(--accent-hover, #b91c1c);
}

.about-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
}

.about-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* About page lineup list */
.about-lineup-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;

    & li {
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    & li:last-child {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   ALBUMS PAGE (extracted from albums.ejs inline styles)
   ============================================================ */

.albums-page-modern {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

.albums-page-header {
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.albums-page-header h1 {
    font-size: clamp(2.25rem, 6vw, 4rem);
    margin: 0 0 0.25rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.albums-page-header p {
    opacity: 0.45;
    font-size: 0.95rem;
    margin: 0;
}

.albums-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

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

a.album-card-modern,
.album-card-modern {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(18, 18, 22, 0.9);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease;

    &:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(220, 38, 38, 0.2),
                    0 0 30px rgba(220, 38, 38, 0.1);
        border-color: rgba(220, 38, 38, 0.3);
    }

    &:hover .album-cover img {
        transform: scale(1.08);
        filter: brightness(1.1) saturate(1.1);
    }

    &:hover .album-year-badge {
        opacity: 1;
        transform: translateY(0);
    }

    &:hover .album-cover::after {
        opacity: 1;
    }
}

.album-card-modern .album-cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.album-card-modern .album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.5s ease;
}

.album-card-modern .album-overlay {
    display: none;
}

.album-card-modern .album-info {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.album-card-modern .album-info h3 {
    margin: 0;
    font-size: 0.95rem;
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
    text-transform: none;
    text-wrap: wrap;
    /* Reliable 2-line truncation: max-height fallback since text-wrap: balance
       from base h3 rules breaks -webkit-line-clamp (converts display to flow-root) */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(2 * 1.35em);
}

.album-card-modern .album-info .album-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.album-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
}

/* Year badge overlay on album cover */
.album-year-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-primary, 'Inter', sans-serif);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: none;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Play icon overlay on hover */
.album-card-modern .album-cover::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .albums-bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .albums-bento-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .albums-page-modern {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .albums-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .album-card-modern .album-info {
        padding: 0.6rem 0.75rem 0.75rem;
    }
    .album-card-modern .album-info h3 {
        font-size: 0.85rem;
    }
    .album-card-modern .album-info .album-meta {
        font-size: 0.72rem;
    }
}

/* ============================================================
   MEMBERS PAGE (extracted from members.ejs inline styles)
   ============================================================ */

.members-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(6rem, 10vw, 10rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

.members-page-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.members-page-header h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    margin: 0 0 0.5rem;
}

.members-page-header p {
    opacity: 0.5;
    font-size: 1.125rem;
    max-width: 500px;
    margin: 0 auto;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.member-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;

    &:hover {
        transform: translateY(-4px);
        border-color: rgba(220, 38, 38, 0.3);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
                    0 0 20px rgba(220, 38, 38, 0.08);
    }

    &.deceased {
        border-color: rgba(220, 38, 38, 0.15);
    }

    &:hover .member-photo-container img {
        transform: scale(1.06);
    }
}

.member-photo-container {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.member-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    filter: brightness(1.3) contrast(1.1);
}

.member-card:hover .member-photo-container img {
    filter: brightness(1.4) contrast(1.15);
}

.member-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(60, 60, 75, 0.9) 100%);

    & svg {
        width: 80px;
        height: 80px;
        color: rgba(255, 255, 255, 0.35);
    }
}

.deceased-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--accent-red, #dc2626);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}

.member-content {
    padding: 1.25rem;
}

.member-name {
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.02em;

    & a {
        color: inherit;
        text-decoration: none;

        &:hover {
            color: var(--accent-red, #dc2626);
        }
    }
}

.member-card .member-role {
    font-size: 0.8125rem;
    color: var(--accent-red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem;
}

.member-years {
    font-size: 0.8125rem;
    opacity: 0.5;
    margin: 0 0 1rem;
}

@media (max-width: 600px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .member-content {
        padding: 1rem;
    }
    .member-name {
        font-size: 1rem;
    }
}

@media (max-width: 380px) {
    .members-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   NEWS PAGE (extracted from news.ejs inline styles)
   ============================================================ */

/* News page layout */
.news-page {
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: 120px;
}

.news-page .page-header {
    margin-bottom: 2rem;
}

.news-page .search-input-wrapper {
    flex: 1;
}

/* Search highlighting */
.search-highlight {
    background: linear-gradient(120deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* News page search container */
.news-page .search-container,
.search-container {
    margin-top: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: rgba(220, 38, 38, 0.05);
    padding: var(--space-6);
    border-radius: 16px;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.search-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* News pagination */
.pagination-container {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.pagination-info {
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 var(--space-2);
}

@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
    }
    .pagination {
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }
    .pagination .btn {
        width: 100%;
    }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */

.gallery-page {
    margin-top: 100px;
}

/* --- Gallery Stats Bar --- */
.gallery-stats-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: var(--space-4);
    padding: 0.75rem 1.25rem;
    background: rgba(220, 38, 38, 0.04);
    border: 1px solid rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.gallery-stats-bar .stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-stats-bar .stat-value {
    font-weight: 700;
    color: var(--accent-red, #dc2626);
}

/* --- Gallery Category Filters --- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-6);
    padding-bottom: var(--space-2);
}

.gallery-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    user-select: none;

    &:hover {
        background: rgba(220, 38, 38, 0.08);
        border-color: rgba(220, 38, 38, 0.25);
        color: var(--text-primary);
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }

    &.active {
        background: rgba(220, 38, 38, 0.15);
        border-color: var(--accent-red, #dc2626);
        color: var(--accent-red, #dc2626);
        font-weight: 600;
    }

    & .filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 0.35rem;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 100px;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1;
    }

    &.active .filter-count {
        background: rgba(220, 38, 38, 0.2);
        color: var(--accent-red, #dc2626);
    }
}

/* Gallery comments section */
.gallery-comments {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 2px solid var(--border-color);
}

.gallery-comments h2 {
    margin-bottom: var(--space-4);
}

/* Members empty state */
.members-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    opacity: 0.5;
}

/* Member founder label */
.member-founder-label {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--accent-red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Member founder card */
.member-card.founder {
    border-color: rgba(220, 38, 38, 0.2);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.04) 0%, rgba(255, 255, 255, 0.025) 100%);
    position: relative;
}

.member-card.founder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-red, #dc2626), rgba(220, 38, 38, 0.3));
    border-radius: 12px 12px 0 0;
    z-index: 1;
}

/* --- Members Stats Bar --- */
.members-stats-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

.members-stats-count strong {
    color: var(--accent-red, #dc2626);
    font-weight: 700;
}

/* --- Members Era Filter Tabs --- */
.members-era-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.members-era-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    user-select: none;
    font-family: inherit;
}

.members-era-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--text-primary, #fff);
}

.members-era-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.members-era-btn.active {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--accent-red, #dc2626);
    font-weight: 600;
}

.members-era-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.members-era-btn.active .filter-count {
    background: rgba(220, 38, 38, 0.2);
    color: var(--accent-red, #dc2626);
}

/* --- Member Role Badges --- */
.member-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 0.35rem;
}

.member-role-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--accent-red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- Member Deceased Label --- */
.member-deceased-label {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-style: italic;
}

/* --- Member Bio Hover Overlay --- */
.member-hover-bio {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 0.75rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
    z-index: 2;
}

.member-hover-bio p {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.member-card:hover .member-hover-bio {
    transform: translateY(0);
    opacity: 1;
}

/* Hidden card transition for era filters */
.member-card--hidden {
    display: none;
}

/* --- Responsive Members Grid: 2-3-4 columns --- */
@media (min-width: 601px) and (max-width: 900px) {
    .members-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 901px) {
    .members-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .members-page {
        max-width: 1200px;
    }
}

@media (max-width: 600px) {
    .members-era-filters {
        border-radius: 12px;
        padding: 0.35rem;
        gap: 0.25rem;
    }
    .members-era-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
    }
    .member-role-badges {
        gap: 0.15rem;
    }
    .member-role-badge {
        font-size: 0.6rem;
        padding: 0.05rem 0.35rem;
    }
    .member-hover-bio {
        display: none;
    }
}

/* Light theme adjustments */
[data-theme="light"] .members-era-filters {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .members-era-btn {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .members-era-btn:hover {
    background: rgba(220, 38, 38, 0.06);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .members-era-btn.active {
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .member-deceased-label {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .members-stats-bar {
    color: rgba(0, 0, 0, 0.5);
}

/* --- Gallery Empty State --- */
.empty-state--hidden {
    display: none;
}

/* --- Gallery Categories Grid --- */
.gallery-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.gallery-category {
    background: linear-gradient(135deg, var(--bg-secondary), rgba(220, 38, 38, 0.05));
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 16px;
    padding: var(--space-6);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease, opacity 0.4s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: galleryCardAppear 0.5s ease forwards;

    &:nth-child(1) { animation-delay: 0.05s; }
    &:nth-child(2) { animation-delay: 0.1s; }
    &:nth-child(3) { animation-delay: 0.15s; }
    &:nth-child(4) { animation-delay: 0.2s; }
    &:nth-child(5) { animation-delay: 0.25s; }
    &:nth-child(6) { animation-delay: 0.3s; }
    &:nth-child(7) { animation-delay: 0.35s; }
    &:nth-child(8) { animation-delay: 0.4s; }
    &:nth-child(9) { animation-delay: 0.45s; }
    &:nth-child(10) { animation-delay: 0.5s; }
    &:nth-child(11) { animation-delay: 0.55s; }
    &:nth-child(n+12) { animation-delay: 0.6s; }

    &.filter-hidden {
        display: none;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--accent-red), #ff6b6b);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    &:hover,
    &:focus-visible {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
        border-color: var(--accent-red);
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }

    &:hover::before,
    &:focus-visible::before {
        opacity: 1;
    }
}

@keyframes galleryCardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-thumbnail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.category-icon {
    color: var(--accent-red, #dc2626);
    opacity: 0.85;
}

.photo-count {
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent-red);
    padding: var(--space-2) var(--space-4);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
}

.category-info h3 {
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.category-info p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Gallery Content (selected gallery) --- */
.gallery-content {
    animation: fadeIn 0.4s ease-out;
}

.gallery-content--hidden {
    display: none;
}

.gallery-header {
    margin-bottom: var(--space-8);
}

.gallery-header .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-header h2 {
    color: var(--text-primary);
    margin: var(--space-4) 0 var(--space-2) 0;
    font-size: 2rem;
    font-weight: 700;
}

.gallery-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin: 0;
}

/* --- Masonry Photo Grid (CSS columns) --- */
.photo-grid-masonry {
    columns: 4 280px;
    column-gap: 1rem;
}

.photo-masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: photoItemAppear 0.4s ease forwards;

    /* Staggered appearance for photo items */
    &:nth-child(1) { animation-delay: 0.02s; }
    &:nth-child(2) { animation-delay: 0.06s; }
    &:nth-child(3) { animation-delay: 0.1s; }
    &:nth-child(4) { animation-delay: 0.14s; }
    &:nth-child(5) { animation-delay: 0.18s; }
    &:nth-child(6) { animation-delay: 0.22s; }
    &:nth-child(7) { animation-delay: 0.26s; }
    &:nth-child(8) { animation-delay: 0.3s; }
    &:nth-child(9) { animation-delay: 0.34s; }
    &:nth-child(10) { animation-delay: 0.38s; }
    &:nth-child(11) { animation-delay: 0.42s; }
    &:nth-child(12) { animation-delay: 0.46s; }
    &:nth-child(n+13) { animation-delay: 0.5s; }

    &:hover,
    &:focus-visible {
        transform: scale(1.03);
        z-index: 2;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }

    &:hover .photo-masonry-item__img {
        transform: scale(1.06);
    }

    &:hover .photo-masonry-item__index {
        opacity: 1;
    }

    &:hover .photo-masonry-item__overlay,
    &:focus-visible .photo-masonry-item__overlay {
        transform: translateY(0);
    }
}

@keyframes photoItemAppear {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Blur-up placeholder */
.photo-masonry-item__img-wrap {
    position: relative;
    overflow: hidden;
}

.photo-masonry-item__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(40, 40, 60, 0.3));
    animation: placeholderPulse 1.5s ease-in-out infinite alternate;
    transition: opacity 0.6s ease;
}

@keyframes placeholderPulse {
    from { opacity: 0.4; }
    to { opacity: 0.8; }
}

.photo-masonry-item__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.photo-masonry-item__img.loaded {
    opacity: 1;
    transform: scale(1);
}

.photo-masonry-item:has(.photo-masonry-item__img.loaded) .photo-masonry-item__placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Photo index badge */
.photo-masonry-item__index {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Photo overlay */
.photo-masonry-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 2.5rem 1rem 1rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.photo-masonry-item__name {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.photo-masonry-item__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

/* ============================================================
   GALLERY LIGHTBOX (Enhanced with smooth transitions)
   ============================================================ */
.gallery-lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    &[open] {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &::backdrop {
        background: rgba(0, 0, 0, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }
}

.gallery-lightbox__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Close button */
.gallery-lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: rotate(90deg);
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }
}

/* Counter */
.gallery-lightbox__counter {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.4rem 1.2rem;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    font-variant-numeric: tabular-nums;
    transition: opacity 0.25s ease;
}

/* Keyboard navigation hint */
.gallery-lightbox__kbd-hint {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    white-space: nowrap;
}

.gallery-lightbox[open] .gallery-lightbox__kbd-hint {
    animation: kbdHintShow 4s ease 1s forwards;
}

@keyframes kbdHintShow {
    0% { opacity: 0; }
    15% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

.gallery-lightbox__kbd-hint kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.65rem;
    margin: 0 0.15rem;
}

/* Navigation arrows */
.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);

    &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-50%) scale(1.1);
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }

    &:active {
        transform: translateY(-50%) scale(0.95);
    }
}

.gallery-lightbox__nav--prev {
    left: 1.5rem;
}

.gallery-lightbox__nav--next {
    right: 1.5rem;
}

/* Image */
.gallery-lightbox__image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    touch-action: pan-y;
}

.gallery-lightbox__image {
    max-width: 90vw;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.7);
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}

/* Opening animation for lightbox image */
.gallery-lightbox__image--entering {
    opacity: 0;
    transform: scale(0.85);
}

.gallery-lightbox__image--visible {
    opacity: 1;
    transform: scale(1);
}

.gallery-lightbox__image--fade {
    opacity: 0.2;
}

/* Slide direction hints */
.gallery-lightbox__image--slide-left {
    opacity: 0;
    transform: translateX(-30px);
}

.gallery-lightbox__image--slide-right {
    opacity: 0;
    transform: translateX(30px);
}

/* Loading spinner for lightbox */
.gallery-lightbox__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-red, #dc2626);
    border-radius: 50%;
    animation: lbLoaderSpin 0.8s linear infinite;
    z-index: 5;
    display: none;
}

.gallery-lightbox__loader.visible {
    display: block;
}

@keyframes lbLoaderSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Bottom bar */
.gallery-lightbox__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    gap: 1rem;
    transition: transform 0.3s ease;
}

.gallery-lightbox__caption {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gallery-lightbox__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-lightbox__desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-lightbox__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gallery-lightbox__action {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
        background: rgba(255, 255, 255, 0.18);
        transform: translateY(-2px);
    }

    &:focus-visible {
        outline: 2px solid var(--accent-red, #dc2626);
        outline-offset: 2px;
    }
}

.gallery-lightbox__action--primary {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.4);
}

.gallery-lightbox__action--primary:hover {
    background: var(--accent-red, #dc2626);
}

.gallery-lightbox__action--copied {
    background: rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
}

/* --- Gallery Responsive --- */
@media (max-width: 1024px) {
    .photo-grid-masonry {
        columns: 3 240px;
    }
}

@media (max-width: 768px) {
    .gallery-categories {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .gallery-filters {
        gap: 0.35rem;
    }

    .gallery-filter-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .gallery-stats-bar {
        flex-wrap: wrap;
        gap: 0.75rem;
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }

    .photo-grid-masonry {
        columns: 2 160px;
        column-gap: 0.75rem;
    }

    .photo-masonry-item {
        margin-bottom: 0.75rem;
    }

    .photo-masonry-item__overlay {
        padding: 0.75rem;
    }

    .photo-masonry-item__name {
        font-size: 0.75rem;
    }

    .photo-masonry-item__index {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }

    .gallery-lightbox__nav {
        width: 40px;
        height: 40px;
    }

    .gallery-lightbox__nav--prev {
        left: 0.5rem;
    }

    .gallery-lightbox__nav--next {
        right: 0.5rem;
    }

    .gallery-lightbox__nav svg {
        width: 20px;
        height: 20px;
    }

    .gallery-lightbox__bar {
        flex-direction: column;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .gallery-lightbox__image {
        max-height: calc(100vh - 160px);
    }

    .gallery-lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
    }

    .gallery-lightbox__counter {
        top: 0.85rem;
        font-size: 0.75rem;
    }

    .gallery-lightbox__kbd-hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .photo-grid-masonry {
        columns: 2;
        column-gap: 0.5rem;
    }

    .photo-masonry-item {
        margin-bottom: 0.5rem;
        border-radius: 8px;
    }

    .photo-masonry-item__overlay {
        transform: translateY(0);
        background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7));
        padding: 0.5rem;
    }

    .gallery-lightbox__actions {
        gap: 0.35rem;
    }

    .gallery-lightbox__action {
        width: 34px;
        height: 34px;
    }
}

/* ============================================================
   GALLERY LIGHTBOX: ZOOM, INFO OVERLAY, DEEP LINK ENHANCEMENTS
   ============================================================ */

/* Zoom state: change cursor and allow overflow for panning */
.gallery-lightbox__image-wrap--zoomed {
    cursor: grab;
    overflow: visible;
}

.gallery-lightbox__image-wrap--zoomed .gallery-lightbox__image {
    cursor: grab;
    transition: transform 0.15s ease;
}

.gallery-lightbox__image-wrap--zoomed:active {
    cursor: grabbing;
}

/* Default cursor on non-zoomed image: zoom-in */
.gallery-lightbox__image {
    cursor: zoom-in;
}

.gallery-lightbox__image-wrap--zoomed .gallery-lightbox__image {
    cursor: grab;
}

/* Zoom hint overlay */
.gallery-lightbox__zoom-hint {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    white-space: nowrap;
}

.gallery-lightbox__zoom-hint--visible {
    animation: zoomHintFade 2.5s ease forwards;
}

@keyframes zoomHintFade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* Photo info overlay */
.gallery-lightbox__info {
    position: absolute;
    top: 4.5rem;
    right: 1.5rem;
    z-index: 12;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 0.8rem;
    min-width: 180px;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.gallery-lightbox__info--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.gallery-lightbox__info-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.gallery-lightbox__info-row + .gallery-lightbox__info-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
}

.gallery-lightbox__info-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    font-weight: 600;
}

.gallery-lightbox__info-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Active state for toggle buttons (info, zoom) */
.gallery-lightbox__action--active {
    background: rgba(220, 38, 38, 0.35) !important;
    border-color: rgba(220, 38, 38, 0.6) !important;
    color: #fff;
}

.gallery-lightbox__action--active:hover {
    background: rgba(220, 38, 38, 0.5) !important;
}

/* Lightbox responsive adjustments for new features */
@media (max-width: 768px) {
    .gallery-lightbox__zoom-hint {
        bottom: 4.5rem;
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    .gallery-lightbox__info {
        top: auto;
        bottom: 5rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
        font-size: 0.75rem;
    }

    .gallery-lightbox__info-label {
        font-size: 0.65rem;
    }

    .gallery-lightbox__info-value {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .gallery-lightbox__zoom-hint {
        display: none; /* touch users will discover double-tap naturally */
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gallery-lightbox__zoom-hint {
        transition: none;
        animation: none;
    }

    .gallery-lightbox__info {
        transition: none;
    }

    .gallery-lightbox__image-wrap--zoomed .gallery-lightbox__image {
        transition: none;
    }
}

/* Print: hide lightbox additions */
@media print {
    .gallery-lightbox__zoom-hint,
    .gallery-lightbox__info {
        display: none !important;
    }
}

/* ============================================================
   ALBUM DETAIL PAGE
   ============================================================ */

.album-detail-page {
    padding-top: clamp(6rem, 10vw, 10rem);
}

/* --- Album Header --- */

.album-header {
    margin-bottom: var(--space-12);
}

.album-header .grid-2 {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: var(--space-12);
    align-items: start;
}

.album-artwork-large {
    text-align: center;
    position: sticky;
    top: calc(var(--space-16) + 2rem);
}

.album-artwork-large img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(220, 38, 38, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.album-artwork-large img:hover {
    transform: scale(1.02);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(220, 38, 38, 0.12);
}

.album-placeholder-large {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-secondary);
    font-size: 4rem;
    color: var(--text-muted);
    border-radius: 12px;
    margin: 0 auto;
}

/* --- Album Info --- */

.album-info h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-4);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.album-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.album-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.album-meta-item .meta-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.album-meta-item .meta-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.album-meta-item .meta-value {
    color: var(--text-primary);
    font-weight: 500;
}

.album-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-size: 1rem;
}

/* --- Album Controls --- */

.album-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* --- Track List --- */

.album-tracks {
    margin-top: var(--space-12);
}

.album-tracks h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.track-list {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.track-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    transition: background-color 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.track-item:last-child {
    border-bottom: none;
}

.track-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.track-number {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.track-title {
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.track-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-duration {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: right;
}

/* --- Track Buttons --- */

.track-play-btn {
    background: var(--accent-red);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.track-play-btn:hover {
    background: var(--accent-red-dark);
    transform: scale(1.1);
}

.track-add-to-queue-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.track-add-to-queue-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    transform: scale(1.1);
}

/* --- Lyrics --- */

.lyrics-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    padding: 2px;
    flex-shrink: 0;
}

.lyrics-btn:hover {
    opacity: 1;
}

.lyrics-btn.active {
    opacity: 1;
}

.track-lyrics {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-red);
    animation: lyricsSlideDown 0.3s ease;
}

@keyframes lyricsSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.lyrics-content {
    line-height: 1.8;
    white-space: pre-line;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.lyrics-line.has-annotation {
    background-color: rgba(220, 38, 38, 0.1);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.lyrics-line.has-annotation:hover {
    background-color: rgba(220, 38, 38, 0.2);
}

.annotation-display {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent-blue, #3b82f6);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.annotation-display p {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.annotation-display strong {
    color: var(--accent-blue, #3b82f6);
}

/* --- Album Footer --- */

.album-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Album Interactions (Favorites/Comments) --- */

.album-interactions {
    margin-top: var(--space-12);
}

.album-interactions .comments-section {
    margin-top: var(--space-8);
}

.album-interactions .comments-section h2 {
    margin-bottom: var(--space-4);
}

/* --- Fade-in Animation --- */

.album-detail-fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: albumFadeInUp 0.5s ease forwards;
}

.album-detail-fade-in:nth-child(2) {
    animation-delay: 0.1s;
}

.album-detail-fade-in:nth-child(3) {
    animation-delay: 0.2s;
}

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

/* --- Loading State --- */

.album-loading-container {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

/* --- Responsive: Album Detail --- */

@media (max-width: 900px) {
    .album-header .grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .album-artwork-large {
        position: static;
        max-width: 350px;
        margin: 0 auto;
    }

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

    .album-meta {
        justify-content: center;
    }

    .album-controls {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .album-info h1 {
        font-size: 1.75rem;
    }

    .album-placeholder-large {
        width: 250px;
        height: 250px;
    }

    .track-item {
        grid-template-columns: 30px 1fr auto auto;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .track-duration {
        display: none;
    }

    .track-play-btn,
    .track-add-to-queue-btn {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .album-meta-item {
        font-size: 0.8rem;
        padding: var(--space-1) var(--space-3);
    }

    .track-lyrics {
        padding: var(--space-3);
    }
}

/* ========================================
   EVENTS PAGE - Historical Timeline
   ======================================== */

/* Hero Section */
.events-hero {
    position: relative;
    padding: clamp(6rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(220, 38, 38, 0.12) 0%, transparent 60%),
        var(--bg-primary);
    overflow: hidden;
}

.events-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.01) 2px,
        rgba(255, 255, 255, 0.01) 4px
    );
    pointer-events: none;
}

.events-hero__badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 100px;
    margin-bottom: 1.5rem;
    background: rgba(220, 38, 38, 0.08);
}

.events-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.events-hero__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.events-hero__stats {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    flex-wrap: wrap;
}

.events-hero__stat {
    text-align: center;
}

.events-hero__stat-value {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.events-hero__stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* Filters */
.events-filters {
    padding-top: 0;
    padding-bottom: 2rem;
}

.events-filters__bar,
.events-filters__types {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.events-filters__bar {
    margin-bottom: 0.75rem;
}

.events-filter-btn,
.events-type-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-secondary);
    border-radius: 100px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.events-filter-btn:hover,
.events-type-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(220, 38, 38, 0.05);
}

.events-filter-btn.active,
.events-type-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Timeline */
.events-timeline {
    position: relative;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--border-secondary) 5%,
        var(--accent) 50%,
        var(--border-secondary) 95%,
        transparent 100%
    );
    transform: translateX(-50%);
}

/* Decade Markers */
.timeline__decade-marker {
    position: relative;
    text-align: center;
    margin: 3rem 0 2rem;
    z-index: 2;
}

.timeline__decade-label {
    display: inline-block;
    padding: 0.5rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 2px solid var(--accent);
    border-radius: 100px;
    position: relative;
    z-index: 2;
}

/* Timeline Items */
.timeline__item {
    position: relative;
    width: 50%;
    padding: 0 2.5rem 3rem;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.timeline__item--left {
    left: 0;
    padding-right: 3.5rem;
    text-align: right;
}

.timeline__item--right {
    left: 50%;
    padding-left: 3.5rem;
    text-align: left;
}

/* Timeline Dots */
.timeline__dot {
    position: absolute;
    top: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    border: 3px solid var(--bg-primary);
    box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline__item--left .timeline__dot {
    right: -18px;
}

.timeline__item--right .timeline__dot {
    left: -18px;
}

.timeline__dot--milestone {
    background: var(--accent);
    color: #fff;
}

.timeline__dot--album {
    background: #2563eb;
    color: #fff;
}

.timeline__dot--concert {
    background: #059669;
    color: #fff;
}

.timeline__dot--memorial {
    background: #6b7280;
    color: #fff;
}

.timeline__item:hover .timeline__dot {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px var(--accent), 0 0 20px var(--accent-glow);
}

/* Timeline Cards */
.timeline__card {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.timeline__card:hover {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.timeline__card--memorial {
    border-color: rgba(107, 114, 128, 0.3);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(107, 114, 128, 0.05) 100%);
}

.timeline__card--concert {
    border-color: rgba(5, 150, 105, 0.2);
}

.timeline__card--concert:hover {
    border-color: rgba(5, 150, 105, 0.5);
}

.timeline__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.timeline__item--left .timeline__card-header {
    flex-direction: row-reverse;
}

.timeline__date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.timeline__type-badge {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
}

.timeline__type-badge--milestone {
    background: rgba(220, 38, 38, 0.15);
    color: #ef4444;
}

.timeline__type-badge--album {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

.timeline__type-badge--concert {
    background: rgba(5, 150, 105, 0.15);
    color: #34d399;
}

.timeline__type-badge--memorial {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.timeline__title {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.timeline__description {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.timeline__link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

.timeline__link:hover {
    color: var(--accent-red-light, #ef4444);
    text-decoration: underline;
}

/* Empty state */
.events-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ----------------------------------------
   Events Timeline Responsive
   ---------------------------------------- */

@media (max-width: 768px) {
    .timeline__line {
        left: 20px;
    }

    .timeline__decade-marker {
        text-align: left;
        padding-left: 50px;
    }

    .timeline__item {
        width: 100%;
        left: 0 !important;
        padding-left: 56px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .timeline__item--left .timeline__card-header {
        flex-direction: row;
    }

    .timeline__dot {
        left: 2px !important;
        right: auto !important;
    }

    .events-hero__stats {
        gap: 1.5rem;
    }

    .events-filter-btn,
    .events-type-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .events-hero {
        padding: 5rem 0 2.5rem;
    }

    .events-hero__title {
        font-size: 2rem;
    }

    .timeline__card {
        padding: 1.25rem;
    }

    .timeline__item {
        padding-bottom: 2rem;
    }
}

/* ============================================================
   CSS SUBGRID - Consistent card alignment across grid rows
   Progressive enhancement: only applies in supporting browsers
   ============================================================ */

@supports (grid-template-rows: subgrid) {

    /* --- Album cards (albums page) ---
       Children: .album-cover, .album-info
       Span 2 rows so covers and info sections align across cards */
    .albums-bento-grid {
        grid-template-rows: auto;
    }

    .albums-bento-grid > .album-card-modern {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }

    /* Decade group headers span full width AND 2 rows (matching album cards)
       so they don't break the subgrid row alignment */
    .albums-bento-grid > .decade-group-header {
        grid-row: span 2;
        align-self: end;
    }

    /* --- Member cards (members page) ---
       Children: .member-photo-container, .member-content
       Span 2 rows so photos and content sections align */
    .members-grid > .member-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }

    /* --- News cards (news page) ---
       Children: .news-meta, h3.news-title, p.news-excerpt, .news-card-footer
       Span 4 rows so dates, titles, excerpts, and footers align */
    .cards-grid-3 > .news-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
    }

    /* Push footer to last row within the subgrid */
    .cards-grid-3 > .news-card .news-card-footer {
        align-self: end;
    }

    /* --- Gallery category cards ---
       Children: .category-thumbnail, .category-info
       Span 2 rows so thumbnails and info align */
    .gallery-categories > .gallery-category {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
}


/* ============================================================
   ALBUMS TIMELINE VIEW
   Visual chronological timeline for the discography page.
   Added Phase 56.
   ============================================================ */

.albums-timeline {
    position: relative;
    padding: 0 0 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* ----- Decade group ----- */
.timeline-decade {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-decade__title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--accent-red, #dc2626);
    text-align: center;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.timeline-decade__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-red, #dc2626);
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

/* ----- Items container with central line ----- */
.timeline-decade__items {
    position: relative;
    padding-left: 50%;
}

/* Vertical line */
.timeline-decade__items::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(220, 38, 38, 0.4) 10%,
        rgba(220, 38, 38, 0.4) 90%,
        transparent
    );
    transform: translateX(-50%);
    z-index: 0;
}

/* ----- Individual album item ----- */
.timeline-album {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: inherit;
    padding-left: 2rem;
    transition: transform 0.25s ease;
}

/* Alternate left/right */
.timeline-album:nth-child(odd) {
    /* Right side (default padding-left already applies) */
    flex-direction: row;
}

.timeline-album:nth-child(even) {
    /* Left side: shift to the left of the center line */
    flex-direction: row-reverse;
    margin-left: -100%;
    padding-left: 0;
    padding-right: 2rem;
    text-align: right;
}

/* ----- Year badge ----- */
.timeline-album__year {
    position: absolute;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--accent-red, #dc2626);
    white-space: nowrap;
    font-weight: 700;
    z-index: 2;
}

.timeline-album:nth-child(odd) .timeline-album__year {
    right: calc(100% + 2.5rem);
    text-align: right;
}

.timeline-album:nth-child(even) .timeline-album__year {
    left: calc(100% + 2.5rem);
    text-align: left;
}

/* ----- Dot on the timeline ----- */
.timeline-album__dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-primary, #030303);
    border: 3px solid var(--accent-red, #dc2626);
    z-index: 2;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.timeline-album:nth-child(odd) .timeline-album__dot {
    left: -2rem;
    transform: translateX(-50%);
}

.timeline-album:nth-child(even) .timeline-album__dot {
    right: -2rem;
    transform: translateX(50%);
}

.timeline-album:hover .timeline-album__dot {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
}
.timeline-album:nth-child(even):hover .timeline-album__dot {
    transform: translateX(50%) scale(1.3);
}

/* ----- Card ----- */
.timeline-album__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(18, 18, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    max-width: 380px;
}

.timeline-album:nth-child(even) .timeline-album__card {
    flex-direction: row-reverse;
}

.timeline-album:hover .timeline-album__card {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

/* ----- Cover image ----- */
.timeline-album__cover {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.timeline-album__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.timeline-album:hover .timeline-album__cover img {
    transform: scale(1.05);
}

/* ----- Info ----- */
.timeline-album__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.timeline-album__title {
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    word-break: break-word;
}

.timeline-album__meta {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

/* ----- Timeline view button SVG styling ----- */
.album-filters__view-btn[data-view="timeline"] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.album-filters__view-btn[data-view="timeline"] svg circle {
    fill: currentColor;
    stroke: none;
}

/* ============================================================
   ALBUMS TIMELINE — RESPONSIVE
   ============================================================ */

/* Tablet and below: single column */
@media (max-width: 768px) {
    .timeline-decade__items {
        padding-left: 2.5rem;
    }

    .timeline-decade__items::before {
        left: 1rem;
    }

    /* All items on the right (no alternating) */
    .timeline-album,
    .timeline-album:nth-child(odd),
    .timeline-album:nth-child(even) {
        flex-direction: row;
        margin-left: 0;
        padding-left: 1.5rem;
        padding-right: 0;
        text-align: left;
    }

    .timeline-album__dot,
    .timeline-album:nth-child(odd) .timeline-album__dot,
    .timeline-album:nth-child(even) .timeline-album__dot {
        left: -1.5rem;
        right: auto;
        transform: translateX(-50%);
    }

    .timeline-album:hover .timeline-album__dot,
    .timeline-album:nth-child(even):hover .timeline-album__dot {
        transform: translateX(-50%) scale(1.3);
    }

    /* Year: above the card */
    .timeline-album__year,
    .timeline-album:nth-child(odd) .timeline-album__year,
    .timeline-album:nth-child(even) .timeline-album__year {
        position: relative;
        left: auto;
        right: auto;
        text-align: left;
        display: none; /* hide year label on mobile, card shows it */
    }

    .timeline-album__card,
    .timeline-album:nth-child(even) .timeline-album__card {
        flex-direction: row;
        max-width: 100%;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .timeline-album__cover {
        width: 64px;
        height: 64px;
    }

    .timeline-album__card {
        padding: 0.5rem;
        gap: 0.75rem;
    }

    .timeline-album__title {
        font-size: 0.85rem;
    }
}

/* ============================================================
   ALBUMS TIMELINE — LIGHT THEME
   ============================================================ */
[data-theme="light"] .timeline-album__card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .timeline-album:hover .timeline-album__card {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .timeline-album__dot {
    background: var(--bg-primary, #fff);
}
[data-theme="light"] .timeline-decade__items::before {
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(220, 38, 38, 0.25) 10%,
        rgba(220, 38, 38, 0.25) 90%,
        transparent
    );
}

/* ============================================================
   MEMBER DETAIL PAGE ENHANCEMENTS
   Activity timeline, enhanced discography, deceased markers
   ============================================================ */

/* --- Activity Timeline Section --- */
.member-activity-timeline {
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.activity-timeline__title {
    font-size: 1.1rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 1.25rem;
    color: var(--text-primary, #fff);
}

/* Timeline bar container */
.activity-timeline__bar-container {
    position: relative;
    padding: 0.75rem 0 2rem;
}

.activity-timeline__bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: visible;
}

/* Active range highlight */
.activity-timeline__active-range {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.7), rgba(220, 38, 38, 0.5));
    border-radius: 4px;
    transition: opacity 0.3s;
}

.activity-timeline__active-range::before,
.activity-timeline__active-range::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-red, #dc2626);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

.activity-timeline__active-range::before {
    left: -6px;
}

.activity-timeline__active-range::after {
    right: -6px;
}

/* Album dots on timeline */
.activity-timeline__dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    z-index: 2;
    text-decoration: none;
}

.activity-timeline__dot--active {
    background: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.3);
}

.activity-timeline__dot:hover {
    transform: translate(-50%, -50%) scale(1.6);
    background: var(--accent-red, #dc2626);
    border-color: #fff;
    z-index: 5;
}

/* Tooltip on hover */
.activity-timeline__dot::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 0.7rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 6px;
}

.activity-timeline__dot:hover::after {
    opacity: 1;
}

/* Timeline labels */
.activity-timeline__labels {
    position: relative;
    height: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.45));
}

.activity-timeline__label-start {
    position: absolute;
    left: 0;
}

.activity-timeline__label-end {
    position: absolute;
    right: 0;
}

.activity-timeline__label-member-start,
.activity-timeline__label-member-end {
    position: absolute;
    transform: translateX(-50%);
    color: var(--accent-red, #dc2626);
    font-weight: 600;
}

/* Timeline stats row */
.activity-timeline__stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.activity-timeline__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.activity-timeline__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    color: var(--text-primary, #fff);
    line-height: 1.2;
}

.activity-timeline__stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.45));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Enhanced Discography Tab --- */
.member-discography-heading {
    font-size: 1.1rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 1rem;
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-discography-heading::before {
    content: '';
    width: 3px;
    height: 1.1em;
    background: var(--accent-red, #dc2626);
    border-radius: 2px;
    flex-shrink: 0;
}

.member-discography-heading--other {
    margin-top: 2.5rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

.member-discography-heading--other::before {
    background: rgba(255, 255, 255, 0.15);
}

/* Dimmed grid for albums outside member period */
.member-discography-grid--dimmed {
    opacity: 0.5;
    transition: opacity 0.3s;
}

.member-discography-grid--dimmed:hover {
    opacity: 0.85;
}

/* --- Other Members Deceased Badge --- */
.other-member-card .other-photo {
    position: relative;
}

.other-photo__deceased-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--accent-red, #dc2626);
    line-height: 1;
}

.other-member-card--deceased .other-photo img {
    filter: grayscale(0.3);
    transition: filter 0.3s;
}

.other-member-card--deceased:hover .other-photo img {
    filter: grayscale(0);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .member-activity-timeline {
        padding: 1rem;
    }

    .activity-timeline__stats {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .activity-timeline__stat-value {
        font-size: 1.2rem;
    }

    .activity-timeline__dot::after {
        display: none;
    }

    .member-discography-heading {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .activity-timeline__stats {
        gap: 0.75rem;
    }

    .activity-timeline__label-member-start,
    .activity-timeline__label-member-end {
        font-size: 0.65rem;
    }
}

/* --- Light theme --- */
[data-theme="light"] .member-activity-timeline {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .activity-timeline__bar {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .activity-timeline__dot {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .activity-timeline__dot::after {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .other-photo__deceased-badge {
    background: rgba(220, 38, 38, 0.1);
}

/* ===============================================
   EVENTS TIMELINE ENHANCEMENTS (Phase 56)
   - Filter groups with labels and count badges
   - Smooth CSS filter animations
   - Read more / Read less toggles
   - Result counter
   - No results state
   - Scrollable filter bar on mobile
   =============================================== */

/* --- Filter Group Layout --- */
.events-filters__group {
    margin-bottom: 1rem;
    text-align: center;
}

.events-filters__group:last-of-type {
    margin-bottom: 0.75rem;
}

.events-filters__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* --- Filter Count Badges --- */
.events-filter-btn__count,
.events-type-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 100px;
    margin-left: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.events-filter-btn.active .events-filter-btn__count,
.events-type-btn.active .events-type-btn__count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.events-filter-btn:not(.active):hover .events-filter-btn__count,
.events-type-btn:not(.active):hover .events-type-btn__count {
    background: rgba(220, 38, 38, 0.1);
    color: var(--text-secondary);
}

/* --- Result Counter --- */
.events-filters__result-count {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.events-result-count__num {
    color: var(--accent);
    font-weight: 700;
}

/* --- Smooth Filter Animations --- */
.timeline__item--hidden {
    opacity: 0;
    transform: scale(0.95);
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.4s ease, padding 0.35s ease;
}

.timeline__item:not(.timeline__item--hidden) {
    max-height: 800px;
    transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s, max-height 0.4s ease;
}

.timeline__decade-marker--hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease, margin 0.3s ease;
}

.timeline__decade-marker:not(.timeline__decade-marker--hidden) {
    transition: opacity 0.3s ease 0.05s, max-height 0.35s ease;
}

/* --- Read More Toggle --- */
.timeline__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, gap 0.2s;
}

.timeline__read-more:hover {
    color: var(--accent-red-light, #ef4444);
}

.timeline__read-more svg {
    transition: transform 0.3s ease;
}

.timeline__read-more--expanded svg {
    transform: rotate(180deg);
}

.timeline__description--truncated,
.timeline__description--full {
    transition: opacity 0.3s ease;
}

.timeline__description--truncated[hidden],
.timeline__description--full[hidden] {
    display: none;
}

/* --- No Results State --- */
.events-no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.events-no-results[hidden] {
    display: none;
}

.events-no-results p {
    font-size: 1.05rem;
    margin: 1rem 0 1.5rem;
    line-height: 1.6;
}

.events-no-results__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.events-no-results__reset:hover {
    background: var(--accent-red-light, #ef4444);
    transform: translateY(-1px);
}

.events-no-results__reset:active {
    transform: translateY(0);
}

/* --- Mobile: Scrollable Filter Bars --- */
@media (max-width: 768px) {
    .events-filters__bar,
    .events-filters__types {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: 0.25rem;
        gap: 0.4rem;
    }

    .events-filters__bar::-webkit-scrollbar,
    .events-filters__types::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Gradient fade hints on edges */
    .events-filters__group {
        position: relative;
    }

    .events-filters__group::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        background: linear-gradient(to right, transparent, var(--bg-primary));
        pointer-events: none;
        opacity: 0.8;
        z-index: 1;
    }

    .events-filters__label {
        text-align: left;
        padding-left: 0.25rem;
    }

    .events-filter-btn__count,
    .events-type-btn__count {
        min-width: 1.1rem;
        height: 1.1rem;
        font-size: 0.6rem;
        margin-left: 0.25rem;
    }
}

@media (max-width: 480px) {
    .events-filter-btn,
    .events-type-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.75rem;
    }

    .events-no-results {
        padding: 3rem 1.5rem;
    }
}

/* --- Light Theme Adjustments --- */
[data-theme="light"] .events-filter-btn__count,
[data-theme="light"] .events-type-btn__count {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

[data-theme="light"] .events-filter-btn.active .events-filter-btn__count,
[data-theme="light"] .events-type-btn.active .events-type-btn__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

[data-theme="light"] .events-filters__group::after {
    background: linear-gradient(to right, transparent, var(--bg-primary));
}

[data-theme="light"] .events-no-results__reset {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

/* ============================================================
   Phase 72: Gallery & Media Enhancements
   - Gallery grid responsive improvements
   - Image hover zoom effect
   - Video card hover effects
   - Lightbox improvements
   - Gallery detail enhancements
   ============================================================ */

/* --- Gallery Card Focus-Visible Hover (Phase 72 enhanced) --- */
.gallery-card:focus-visible .gallery-card-bg {
    transform: scale(1.08);
    filter: grayscale(0%) brightness(0.9) contrast(1.05);
}

.gallery-card:focus-visible .gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.gallery-card:focus-visible .gallery-card-title {
    transform: translateY(-6px);
}

.gallery-card:focus-visible .gallery-card-count {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.5);
}

/* --- Gallery Grid Responsive Breakpoints (1-2-3-4 columns) --- */

/* 4 columns: extra large screens */
@media (min-width: 1600px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* 3 columns: large screens */
@media (min-width: 1100px) and (max-width: 1599px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* 2 columns: medium screens (default in base rule) */
@media (min-width: 640px) and (max-width: 1099px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .gallery-card {
        aspect-ratio: 4 / 3;
    }

    .gallery-card-overlay {
        padding: 2rem;
    }
}

/* 1 column: small screens */
@media (max-width: 639px) {
    .gallery-categories-modern {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .gallery-card {
        aspect-ratio: 16 / 10;
        border-radius: 12px;
    }

    .gallery-card:nth-child(n) {
        aspect-ratio: 16 / 10;
    }

    .gallery-card-overlay {
        padding: 1.5rem;
    }

    .gallery-card-title {
        font-size: 1.25rem;
    }

    .gallery-card-count {
        font-size: 0.7rem;
        padding: 5px 10px;
    }

    .gallery-card-desc {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
}

/* --- Gallery Focus Visible --- */
.gallery-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 3px;
}

/* --- Photo Masonry Item Hover Enhancements --- */
.photo-masonry-item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-masonry-item:hover,
.photo-masonry-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.photo-masonry-item:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.photo-masonry-item__img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.photo-masonry-item:hover .photo-masonry-item__img {
    transform: scale(1.04);
}

/* Photo overlay on hover */
.photo-masonry-item__overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 60%);
    padding: 1rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 12px;
}

.photo-masonry-item:hover .photo-masonry-item__overlay,
.photo-masonry-item:focus-visible .photo-masonry-item__overlay {
    opacity: 1;
}

.photo-masonry-item__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.photo-masonry-item__desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.15rem;
    line-height: 1.3;
}

/* --- Gallery Detail Photo Counter Badge --- */
.gallery-detail-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 100px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.75rem;
}

.gallery-detail-counter .counter-value {
    font-weight: 700;
    color: var(--accent-red, #dc2626);
}

/* --- Gallery Detail Keyboard Hints --- */
.gallery-kbd-hints {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.gallery-kbd-hints kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0.1rem;
}

@media (max-width: 768px) {
    .gallery-kbd-hints {
        display: none;
    }
}

/* --- Lightbox Enhancements --- */
.gallery-lightbox__counter {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.06em;
    font-size: 1rem;
}

.gallery-lightbox__bar {
    backdrop-filter: blur(12px);
}

.gallery-lightbox__action--primary {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.3);
}

.gallery-lightbox__action--primary:hover {
    background: rgba(220, 38, 38, 0.35);
}

/* Lightbox copied state feedback */
.gallery-lightbox__action--copied {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #22c55e !important;
}

.gallery-lightbox__kbd-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    padding: 0.5rem 0;
}

.gallery-lightbox__kbd-hint kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    margin: 0 0.1rem;
}

/* --- Video Card Hover Effects (Phase 72) --- */
.vp-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vp-card:hover,
.vp-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.vp-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 3px;
}

.vp-card__thumb img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vp-card:hover .vp-card__thumb img {
    transform: scale(1.05);
}

.vp-card__overlay {
    transition: opacity 0.3s ease, background 0.3s ease;
}

.vp-card:hover .vp-card__overlay {
    background: rgba(0, 0, 0, 0.4);
}

.vp-card__play {
    transition: transform 0.3s ease, background 0.3s ease;
}

.vp-card:hover .vp-card__play {
    transform: scale(1.15);
    background: rgba(220, 38, 38, 0.9);
}

/* Video card action button hover enhancement */
.vp-card__action {
    transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    border-radius: 6px;
    padding: 0.3rem;
}

.vp-card__action:hover {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.1);
    transform: scale(1.1);
}

/* Copy link copied state */
.vp-card__action--copied {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.15) !important;
}

/* --- Video Tabs Enhancement (Phase 72) --- */
.vp-tabs__tab {
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.vp-tabs__tab:hover:not(.active) {
    transform: translateY(-1px);
}

.vp-tabs__count {
    transition: background 0.2s ease, color 0.2s ease;
}

.vp-tabs__tab:hover:not(.active) .vp-tabs__count {
    background: rgba(220, 38, 38, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* --- Video Modal Copy Link Button (Phase 72) --- */
.vp-modal__copy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.vp-modal__copy-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.vp-modal__copy-link--copied {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.vp-modal__copy-link svg {
    flex-shrink: 0;
}

/* --- Light Theme Adjustments (Phase 72) --- */
[data-theme="light"] .gallery-card-count {
    background: rgba(220, 38, 38, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .gallery-detail-counter {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.12);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .gallery-kbd-hints {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .gallery-kbd-hints kbd {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .photo-masonry-item:hover,
[data-theme="light"] .photo-masonry-item:focus-visible {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vp-card:hover,
[data-theme="light"] .vp-card:focus-visible {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .vp-modal__copy-link {
    color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .vp-modal__copy-link:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.08);
}

/* === Phase 73: Events Timeline Enhancement === */

/* -----------------------------------------------
   ON THIS DAY BANNER
   ----------------------------------------------- */
.events-on-this-day {
    padding-top: 0;
    padding-bottom: 1.5rem;
}

.events-otd__banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.04) 100%);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.events-otd__banner--muted {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.events-otd__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent, #dc2626);
}

.events-otd__banner--muted .events-otd__icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.events-otd__title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--text-primary, #fff);
}

.events-otd__subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
}

.events-otd__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.events-otd__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.events-otd__item:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.08);
}

.events-otd__item--exact {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.04);
}

.events-otd__item-badge {
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.12);
    color: var(--accent, #dc2626);
    border: 1px solid rgba(220, 38, 38, 0.2);
    white-space: nowrap;
    margin-top: 0.2rem;
}

.events-otd__item-year {
    display: inline-block;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent, #dc2626);
    letter-spacing: 0.04em;
    margin-right: 0.5rem;
}

.events-otd__item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
    display: inline;
}

.events-otd__item-ago {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* -----------------------------------------------
   ENHANCED TIMELINE TRACK (Vertical Line)
   ----------------------------------------------- */
.events-timeline__track {
    position: relative;
    padding: 2rem 0;
}

/* The vertical connecting line */
.events-timeline__track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.15) 3%,
        rgba(220, 38, 38, 0.35) 15%,
        rgba(220, 38, 38, 0.35) 85%,
        rgba(220, 38, 38, 0.15) 97%,
        transparent 100%
    );
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 2px;
}

/* Subtle glow behind the timeline line */
.events-timeline__track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 14px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.05) 15%,
        rgba(220, 38, 38, 0.05) 85%,
        transparent 100%
    );
    transform: translateX(-50%);
    z-index: 0;
    filter: blur(6px);
    pointer-events: none;
}

/* -----------------------------------------------
   DECADE YEAR MARKERS (Prominent)
   ----------------------------------------------- */
.events-timeline__decade-marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2.5rem 0;
    margin: 1.5rem 0;
    /* scroll-reveal for decade markers too */
    opacity: 0;
    transform: scale(0.92);
    animation: evtDecadeIn 0.5s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

@keyframes evtDecadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@supports not (animation-timeline: view()) {
    .events-timeline__decade-marker {
        opacity: 1;
        transform: none;
    }
}

/* IO fallback visible state for decade markers */
.events-timeline__decade-marker.events-timeline__item--visible {
    opacity: 1;
    transform: none;
}

/* Decorative lines extending from decade year */
.events-timeline__decade-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to var(--dir, right),
        rgba(220, 38, 38, 0.4),
        transparent 80%
    );
    max-width: 180px;
}

.events-timeline__decade-line:first-child {
    --dir: left;
    background: linear-gradient(to left, rgba(220, 38, 38, 0.4), transparent 80%);
}

.events-timeline__decade-line:last-child {
    --dir: right;
    background: linear-gradient(to right, rgba(220, 38, 38, 0.4), transparent 80%);
}

.events-timeline__decade-year {
    display: inline-block;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-primary, #fff);
    background: var(--bg-primary, #0f0f0f);
    padding: 0.25rem 1.75rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(220, 38, 38, 0.3);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 6px;
}

/* -----------------------------------------------
   TIMELINE ITEMS (Alternating Left/Right)
   ----------------------------------------------- */
.events-timeline__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    width: 100%;
    /* Scroll-based fade-in animation */
    opacity: 0;
    transform: translateY(24px);
    animation: evtFadeIn 0.6s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

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

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
    .events-timeline__item {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
}

/* IntersectionObserver visible state */
.events-timeline__item.events-timeline__item--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Left items: content on left, dot center */
.events-timeline__item--left {
    flex-direction: row-reverse;
    text-align: right;
    padding-right: calc(50% + 1.5rem);
    padding-left: 0;
}

/* Right items: dot center, content on right */
.events-timeline__item--right {
    padding-left: calc(50% + 1.5rem);
    padding-right: 0;
}

/* -----------------------------------------------
   TIMELINE DOT (Type-colored)
   ----------------------------------------------- */
.events-timeline__dot {
    position: absolute;
    left: 50%;
    top: 1.25rem;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-primary, #0f0f0f);
    border: 2px solid rgba(220, 38, 38, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s;
}

.events-timeline__dot-icon {
    color: var(--accent, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Type-specific dot colors */
.events-timeline__dot--milestone {
    border-color: rgba(250, 204, 21, 0.5);
}

.events-timeline__dot--milestone .events-timeline__dot-icon {
    color: #facc15;
}

.events-timeline__dot--album {
    border-color: rgba(59, 130, 246, 0.5);
}

.events-timeline__dot--album .events-timeline__dot-icon {
    color: #60a5fa;
}

.events-timeline__dot--concert {
    border-color: rgba(220, 38, 38, 0.5);
}

.events-timeline__dot--concert .events-timeline__dot-icon {
    color: #f87171;
}

.events-timeline__dot--memorial {
    border-color: rgba(168, 85, 247, 0.5);
}

.events-timeline__dot--memorial .events-timeline__dot-icon {
    color: #c084fc;
}

.events-timeline__dot--festival {
    border-color: rgba(34, 197, 94, 0.5);
}

.events-timeline__dot--festival .events-timeline__dot-icon {
    color: #4ade80;
}

.events-timeline__item:hover .events-timeline__dot {
    transform: translateX(-50%) scale(1.2);
}

.events-timeline__item:hover .events-timeline__dot--milestone {
    border-color: #facc15;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}

.events-timeline__item:hover .events-timeline__dot--album {
    border-color: #60a5fa;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

.events-timeline__item:hover .events-timeline__dot--concert {
    border-color: #f87171;
    box-shadow: 0 0 18px rgba(220, 38, 38, 0.35);
}

.events-timeline__item:hover .events-timeline__dot--memorial {
    border-color: #c084fc;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.35);
}

.events-timeline__item:hover .events-timeline__dot--festival {
    border-color: #4ade80;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

/* -----------------------------------------------
   TIMELINE CARD (Enhanced hover)
   ----------------------------------------------- */
.events-timeline__card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s, background 0.35s;
    position: relative;
    overflow: hidden;
}

.events-timeline__item:hover .events-timeline__card {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.045);
}

/* Card header: date + type badge */
.events-timeline__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.events-timeline__item--left .events-timeline__card-header {
    flex-direction: row-reverse;
}

.events-timeline__card-date {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    letter-spacing: 0.04em;
}

/* Type badge */
.events-timeline__card-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    white-space: nowrap;
}

.events-timeline__card-type--milestone {
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.25);
}

.events-timeline__card-type--album {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.events-timeline__card-type--concert {
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.events-timeline__card-type--memorial {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.events-timeline__card-type--festival {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* -----------------------------------------------
   ALBUM COVER THUMBNAIL (in album-type cards)
   ----------------------------------------------- */
.events-timeline__album-thumb {
    display: inline-block;
    float: right;
    margin: 0 0 0.75rem 0.75rem;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.events-timeline__item--left .events-timeline__album-thumb {
    float: left;
    margin: 0 0.75rem 0.75rem 0;
}

.events-timeline__album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-timeline__item:hover .events-timeline__album-thumb {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

/* Card title */
.events-timeline__card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

/* Location info */
.events-timeline__card-location {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.events-timeline__card-location svg {
    color: var(--accent, #dc2626);
    flex-shrink: 0;
    opacity: 0.7;
}

/* Card description - expandable on hover */
.events-timeline__card-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

.events-timeline__item:hover .events-timeline__card-desc {
    color: var(--text-primary, #fff);
}

/* -----------------------------------------------
   MEMORIAL CARD SPECIAL STYLING
   ----------------------------------------------- */
.events-timeline__card--memorial {
    border-color: rgba(168, 85, 247, 0.15);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.04) 0%, rgba(168, 85, 247, 0.01) 100%);
}

.events-timeline__item:hover .events-timeline__card--memorial {
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.12);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(168, 85, 247, 0.02) 100%);
}

/* Concert card border accent */
.events-timeline__card--concert {
    border-color: rgba(220, 38, 38, 0.1);
}

.events-timeline__item:hover .events-timeline__card--concert {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.12);
}

/* Album card subtle blue accent */
.events-timeline__card--album {
    border-color: rgba(59, 130, 246, 0.08);
}

.events-timeline__item:hover .events-timeline__card--album {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.08);
}

/* Milestone card golden accent */
.events-timeline__card--milestone {
    border-color: rgba(250, 204, 21, 0.08);
}

.events-timeline__item:hover .events-timeline__card--milestone {
    border-color: rgba(250, 204, 21, 0.25);
    box-shadow: 0 8px 32px rgba(250, 204, 21, 0.06);
}

/* -----------------------------------------------
   RESPONSIVE: Tablet (single column, all right)
   ----------------------------------------------- */
@media (max-width: 900px) {
    .events-timeline__track::before,
    .events-timeline__track::after {
        left: 1.5rem;
    }

    .events-timeline__item--left,
    .events-timeline__item--right {
        flex-direction: row;
        text-align: left;
        padding-left: 4rem;
        padding-right: 0;
    }

    .events-timeline__item--left .events-timeline__card-header {
        flex-direction: row;
    }

    .events-timeline__item--left .events-timeline__album-thumb {
        float: right;
        margin: 0 0 0.75rem 0.75rem;
    }

    .events-timeline__dot {
        left: 1.5rem;
    }

    .events-timeline__decade-year {
        padding-left: 0;
        margin-left: 0;
    }

    .events-timeline__decade-marker {
        justify-content: flex-start;
        padding-left: 4rem;
    }

    .events-timeline__decade-line:first-child {
        display: none;
    }
}

/* -----------------------------------------------
   RESPONSIVE: Mobile
   ----------------------------------------------- */
@media (max-width: 600px) {
    .events-timeline__track::before,
    .events-timeline__track::after {
        left: 1rem;
    }

    .events-timeline__dot {
        left: 1rem;
        width: 28px;
        height: 28px;
    }

    .events-timeline__dot-icon svg {
        width: 12px;
        height: 12px;
    }

    .events-timeline__item--left,
    .events-timeline__item--right {
        padding-left: 3rem;
    }

    .events-timeline__decade-marker {
        padding-left: 3rem;
    }

    .events-timeline__card {
        padding: 1rem;
    }

    .events-timeline__card-date {
        font-size: 1.1rem;
    }

    .events-timeline__card-title {
        font-size: 0.95rem;
    }

    .events-timeline__card-desc {
        font-size: 0.85rem;
    }

    .events-timeline__album-thumb {
        width: 40px;
        height: 40px;
    }

    .events-otd__banner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 0.75rem;
    }

    .events-otd__item {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .events-timeline__decade-line {
        display: none;
    }
}

/* -----------------------------------------------
   LIGHT THEME
   ----------------------------------------------- */
[data-theme="light"] .events-otd__banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.02) 100%);
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .events-otd__banner--muted {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .events-otd__icon {
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .events-otd__item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .events-otd__item:hover {
    border-color: rgba(220, 38, 38, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .events-otd__item--exact {
    background: rgba(220, 38, 38, 0.03);
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .events-timeline__track::before {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.15) 5%,
        rgba(220, 38, 38, 0.15) 95%,
        transparent 100%
    );
}

[data-theme="light"] .events-timeline__track::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.04) 15%,
        rgba(220, 38, 38, 0.04) 85%,
        transparent 100%
    );
}

[data-theme="light"] .events-timeline__dot {
    background: var(--bg-primary, #fff);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .events-timeline__decade-year {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
    text-shadow: none;
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .events-timeline__decade-line {
    opacity: 0.6;
}

[data-theme="light"] .events-timeline__card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .events-timeline__item:hover .events-timeline__card {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .events-timeline__item:hover .events-timeline__card-desc {
    color: var(--text-primary, #111);
}

[data-theme="light"] .events-timeline__card--memorial {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.03) 0%, rgba(168, 85, 247, 0.01) 100%);
    border-color: rgba(168, 85, 247, 0.12);
}

[data-theme="light"] .events-timeline__item:hover .events-timeline__card--memorial {
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.06);
}

[data-theme="light"] .events-timeline__album-thumb {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === Phase 73b: About Page Enhancement === */

/* Enhanced About Page Layout */
.about-page--enhanced {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(5rem, 8vw, 8rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

/* Enhanced Hero */
.about-hero--enhanced {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.about-hero__years {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-red, #dc2626);
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

.about-hero--enhanced h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    margin: 0 0 0.75rem;
    line-height: 1.05;
}

.about-hero__subtitle {
    font-size: 1.125rem;
    opacity: 0.5;
    max-width: 500px;
    margin: 0 auto;
}

/* Story Sections with Side Markers */
.about-section--story {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0 1.5rem;
    margin-bottom: 3.5rem;
    position: relative;
}

.about-section__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
}

.about-section__year {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1rem;
    color: var(--accent-red, #dc2626);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.about-section__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-red, #dc2626);
    margin-top: 0.75rem;
    position: relative;
    flex-shrink: 0;
}

.about-section__dot::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: calc(100% + 3rem);
    background: linear-gradient(to bottom, rgba(220, 38, 38, 0.3), transparent);
    pointer-events: none;
}

.about-section__dot--memorial {
    background: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.about-section__dot--memorial::after {
    background: linear-gradient(to bottom, rgba(168, 85, 247, 0.3), transparent);
}

.about-section__content h2 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    margin-bottom: 1rem;
    color: var(--accent-red, #dc2626);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-section__content h2 .icon {
    opacity: 0.7;
    flex-shrink: 0;
}

.about-section__content p {
    line-height: 1.85;
    margin-bottom: 1rem;
    opacity: 0.85;
}

/* Pull Quote */
.about-pullquote {
    border-left: 3px solid var(--accent-red, #dc2626);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    background: rgba(220, 38, 38, 0.03);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

.about-pullquote p {
    margin: 0;
    font-size: 1.05rem;
    opacity: 0.9 !important;
}

/* ---- Band Members Section ---- */
.about-members-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--accent-red, #dc2626);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-members__subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.45;
    margin: 2rem 0 1rem;
}

.about-members__subtitle:first-of-type {
    margin-top: 0;
}

/* Core Members Grid */
.about-members-grid--core {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* Other Members Grid (compact) */
.about-members-grid--other {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

/* Member Card */
.about-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.about-member-card:hover {
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(220, 38, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.about-member-card--deceased {
    border-color: rgba(168, 85, 247, 0.1);
}

.about-member-card--deceased:hover {
    border-color: rgba(168, 85, 247, 0.25);
}

/* Compact card for non-core members */
.about-member-card--compact {
    flex-direction: row;
    text-align: left;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
}

/* Member Photo */
.about-member-card__photo {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
}

.about-member-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-member-card__photo--small {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
}

.about-member-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
}

/* Memorial indicator badge */
.about-member-card__memorial {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.about-member-card__memorial .icon {
    color: #fff;
}

.about-member-card__memorial--small {
    width: 18px;
    height: 18px;
    bottom: 0;
    right: 0;
}

/* Member Info */
.about-member-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.about-member-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.about-member-card__role {
    font-size: 0.8rem;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.about-member-card__years {
    font-size: 0.75rem;
    opacity: 0.35;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.05em;
}

/* ---- Discography Overview Section ---- */
.about-discography-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--accent-red, #dc2626);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-discography__subtitle {
    opacity: 0.5;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* Album strip - horizontal scroll */
.about-discography-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.about-album-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.3s ease;
}

.about-album-thumb:hover {
    transform: translateY(-4px);
}

.about-album-thumb__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease;
}

.about-album-thumb:hover .about-album-thumb__cover {
    border-color: rgba(220, 38, 38, 0.3);
}

.about-album-thumb__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-album-thumb__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.2;
}

.about-album-thumb__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.about-album-thumb:hover .about-album-thumb__overlay {
    opacity: 1;
}

.about-album-thumb__year {
    display: block;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 0.85rem;
    color: var(--accent-red, #dc2626);
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

.about-album-thumb__title {
    display: block;
    font-size: 0.75rem;
    opacity: 0.6;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Numbers / Stats Section ---- */
.about-numbers-section h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--accent-red, #dc2626);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.about-number-card {
    text-align: center;
    padding: 1.75rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md, 8px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.about-number-card:hover {
    border-color: rgba(220, 38, 38, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 16px rgba(220, 38, 38, 0.06);
}

.about-number-card--primary {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.12);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.about-number-card__value {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
    color: var(--accent-red, #dc2626);
    margin-bottom: 0.25rem;
}

.about-number-card__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

.about-number-card__sub {
    font-size: 0.75rem;
    opacity: 0.35;
    margin-top: 0.25rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.08em;
}

/* Arkhangelsk highlight */
.about-numbers-highlight {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 2rem;
}

.about-numbers-highlight__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent-red, #dc2626);
}

.about-numbers-highlight__text strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.about-numbers-highlight__text p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.55;
    line-height: 1.5;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 640px) {
    .about-section--story {
        grid-template-columns: 48px 1fr;
        gap: 0 1rem;
    }

    .about-section__year {
        font-size: 0.9rem;
    }

    .about-numbers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-members-grid--core {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-members-grid--other {
        grid-template-columns: 1fr;
    }

    .about-member-card--compact {
        flex-direction: row;
    }

    .about-discography-strip {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.75rem;
    }

    .about-numbers-highlight {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .about-section--story {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-section__marker {
        flex-direction: row;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .about-section__dot::after {
        display: none;
    }
}

/* ---- Light Theme Overrides ---- */
[data-theme="light"] .about-member-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .about-member-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .about-number-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .about-number-card--primary {
    background: rgba(220, 38, 38, 0.03);
    border-color: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .about-album-thumb__cover {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .about-album-thumb:hover .about-album-thumb__cover {
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .about-pullquote {
    background: rgba(220, 38, 38, 0.02);
}

[data-theme="light"] .about-numbers-highlight {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .about-numbers-highlight__icon {
    background: rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .about-member-card__photo {
    background: rgba(0, 0, 0, 0.03);
}

/* ============================================================
   GALLERY PAGE - 2026 UX ENHANCEMENTS
   Phase 74: Modern gallery card hover effects, entrance animations,
   "View Gallery" CTA, enhanced photo count badges, responsive grid
   ============================================================ */

/* --- Gallery Card Entrance Animation --- */
.gallery-card--entrance {
    opacity: 0;
    animation: galleryEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes galleryEntrance {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Scroll-driven entrance for browsers that support it (Chrome 115+) */
@supports (animation-timeline: view()) {
    .gallery-card--entrance {
        animation: galleryScrollReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    @keyframes galleryScrollReveal {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
            filter: blur(4px);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }
}

/* --- Enhanced Gallery Card Hover --- */

/* Stronger image zoom on hover with smoother easing */
.gallery-card:hover .gallery-card-bg,
.gallery-card:focus-visible .gallery-card-bg {
    transform: scale(1.12);
    filter: grayscale(0%) brightness(0.85) contrast(1.08) saturate(1.1);
}

/* More dramatic overlay on hover: deeper gradient with subtle red tint */
.gallery-card:hover .gallery-card-overlay,
.gallery-card:focus-visible .gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(10, 0, 0, 0.6) 40%,
        rgba(220, 38, 38, 0.05) 80%,
        transparent 100%
    );
}

/* --- Photo Count Badge Enhancement --- */
.gallery-card-count {
    position: relative;
    z-index: 6;
    transition: background 0.35s ease,
                border-color 0.35s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}

.gallery-card:hover .gallery-card-count,
.gallery-card:focus-visible .gallery-card-count {
    background: rgba(220, 38, 38, 0.35);
    border-color: rgba(220, 38, 38, 0.6);
    transform: translateY(0) scale(1.08);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
}

/* Count badge subtle pulse on idle to draw attention */
@keyframes countBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08); }
}

.gallery-card-count {
    animation: countBadgePulse 4s ease-in-out infinite;
    animation-delay: var(--pulse-delay, 0s);
}

.gallery-card:nth-child(1) .gallery-card-count { --pulse-delay: 0s; }
.gallery-card:nth-child(2) .gallery-card-count { --pulse-delay: 0.5s; }
.gallery-card:nth-child(3) .gallery-card-count { --pulse-delay: 1s; }
.gallery-card:nth-child(4) .gallery-card-count { --pulse-delay: 1.5s; }
.gallery-card:nth-child(5) .gallery-card-count { --pulse-delay: 2s; }
.gallery-card:nth-child(6) .gallery-card-count { --pulse-delay: 2.5s; }
.gallery-card:nth-child(7) .gallery-card-count { --pulse-delay: 3s; }

/* Stop pulse animation on hover to avoid conflicting with hover effect */
.gallery-card:hover .gallery-card-count {
    animation: none;
}

/* --- "View Gallery" CTA Overlay --- */
.gallery-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.75rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    position: relative;
    width: fit-content;
}

/* Arrow icon slides right on hover */
.gallery-card-cta svg {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

/* Underline effect on the CTA */
.gallery-card-cta::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--accent-red, #dc2626), rgba(220, 38, 38, 0.4));
    border-radius: 1px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* Show CTA on card hover/focus */
.gallery-card:hover .gallery-card-cta,
.gallery-card:focus-visible .gallery-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.gallery-card:hover .gallery-card-cta svg {
    transform: translateX(4px);
}

.gallery-card:hover .gallery-card-cta::after {
    width: 100%;
}

/* --- Enhanced Gallery Title Hover --- */
.gallery-card:hover .gallery-card-title,
.gallery-card:focus-visible .gallery-card-title {
    transform: translateY(-4px);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* --- Gallery Grid Responsive Enhancements --- */

/* 3-column layout for mid-width screens */
@media (min-width: 1100px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.25rem;
    }
}

/* 4-column layout for wide screens */
@media (min-width: 1600px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
}

/* Single column on mobile */
@media (max-width: 639px) {
    .gallery-categories-modern {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Uniform aspect ratio on mobile for cleaner look */
    .gallery-card,
    .gallery-card:nth-child(n) {
        aspect-ratio: 16 / 10;
    }

    .gallery-card-cta {
        /* Always visible on mobile since no hover */
        opacity: 0.85;
        transform: translateY(0);
        font-size: 0.75rem;
    }

    .gallery-card-cta::after {
        width: 100%;
    }

    .gallery-card-overlay {
        padding: 1.5rem;
    }
}

/* Tablet: 2-column with adjusted card spacing */
@media (min-width: 640px) and (max-width: 1099px) {
    .gallery-categories-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

/* --- Focus-Visible Accessibility --- */
.gallery-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 3px;
    border-radius: var(--card-radius);
}

/* --- Staggered Card Sizes for Visual Interest --- */
/* Feature the first card as a large hero spanning 2 columns on 3+ col grids */
@media (min-width: 1100px) {
    .gallery-categories-modern .gallery-card:first-child {
        grid-column: span 2;
        aspect-ratio: 21 / 9;
    }

    .gallery-categories-modern .gallery-card:first-child .gallery-card-title {
        font-size: clamp(2rem, 3.5vw, 3rem);
    }

    .gallery-categories-modern .gallery-card:first-child .gallery-card-overlay {
        padding: 3.5rem;
    }
}

/* --- Reduced Motion Preference --- */
@media (prefers-reduced-motion: reduce) {
    .gallery-card--entrance {
        animation: none;
        opacity: 1;
    }

    .gallery-card,
    .gallery-card-bg,
    .gallery-card-overlay,
    .gallery-card-title,
    .gallery-card-desc,
    .gallery-card-count,
    .gallery-card-cta,
    .gallery-card-cta svg,
    .gallery-card-cta::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .gallery-card-count {
        animation: none;
    }
}

/* --- Light Theme Adjustments --- */
[data-theme="light"] .gallery-card-cta {
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .gallery-card:hover .gallery-card-count,
[data-theme="light"] .gallery-card:focus-visible .gallery-card-count {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .gallery-card-cta::after {
    background: linear-gradient(90deg, var(--accent-red, #dc2626), rgba(220, 38, 38, 0.2));
}

/* ============================================================
   Phase 94: Homepage Dynamic Content
   Track Spotlight, Live Stats Counter, Quote Rotator
   ============================================================ */

/* ---- Track Spotlight ---- */
.track-spotlight-section {
    padding: 2.5rem 0;
}

.track-spotlight-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--card-radius, 12px);
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.track-spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.06), transparent 70%);
    pointer-events: none;
}

.track-spotlight-card:hover {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.08);
}

.track-spotlight-cover-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.track-spotlight-cover {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
}

.track-spotlight-vinyl {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #1a1a1a 0deg, #2a2a2a 30deg,
        #1a1a1a 60deg, #2a2a2a 90deg,
        #1a1a1a 120deg, #2a2a2a 150deg,
        #1a1a1a 180deg, #2a2a2a 210deg,
        #1a1a1a 240deg, #2a2a2a 270deg,
        #1a1a1a 300deg, #2a2a2a 330deg,
        #1a1a1a 360deg
    );
    z-index: 1;
    animation: spotlightVinylSpin 4s linear infinite;
    animation-play-state: paused;
}

.track-spotlight-card:hover .track-spotlight-vinyl {
    animation-play-state: running;
}

.track-spotlight-vinyl::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-red, #dc2626);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}

@keyframes spotlightVinylSpin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.track-spotlight-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.track-spotlight-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    width: fit-content;
}

.track-spotlight-track-name {
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    line-height: 1.2;
    margin: 0;
}

.track-spotlight-album-name {
    font-size: 0.9rem;
    color: var(--text-muted, #9ca3af);
    margin: 0;
}

.track-spotlight-album-name a {
    color: var(--text-secondary, #d1d5db);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.track-spotlight-album-name a:hover {
    color: var(--accent-red, #dc2626);
    text-decoration-color: var(--accent-red, #dc2626);
}

.track-spotlight-year {
    opacity: 0.6;
    font-size: 0.85rem;
}

.track-spotlight-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

.track-spotlight-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.track-spotlight-play-btn,
.track-spotlight-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.track-spotlight-play-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

/* ---- Live Stats Counter ---- */
.home-live-stats {
    padding: 3rem 0;
    background: linear-gradient(180deg, transparent, rgba(220, 38, 38, 0.02), transparent);
}

.live-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 1.5rem auto 0;
}

.live-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}

.live-stat-card:hover {
    border-color: rgba(220, 38, 38, 0.25);
    transform: translateY(-3px);
}

.live-stat-icon {
    color: var(--accent-red, #dc2626);
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.live-stat-number {
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary, #fff);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.live-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

.live-stat-accent {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-red, #dc2626), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.live-stat-card:hover .live-stat-accent {
    opacity: 1;
}

/* ---- Quote Rotator ---- */
.quote-rotator-section {
    padding: 2.5rem 0;
}

.quote-rotator-card {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
}

.quote-rotator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-red, #dc2626), transparent);
    opacity: 0.5;
}

.quote-rotator-icon {
    color: var(--accent-red, #dc2626);
    margin-bottom: 0.5rem;
}

.quote-rotator-text {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.quote-rotator-text p {
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-style: italic;
    font-weight: 400;
    color: var(--text-primary, #fff);
    line-height: 1.6;
    margin: 0;
}

.quote-rotator-author {
    display: block;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--accent-red, #dc2626);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.quote-rotator-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.quote-rotator-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.quote-arrow {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-arrow:hover,
.quote-arrow:focus-visible {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.1);
}

.quote-rotator-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 4px;
    border-radius: 8px;
}

.quote-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s, transform 0.3s;
}

.quote-dot.active {
    background: var(--accent-red, #dc2626);
    transform: scale(1.4);
}

/* ---- Responsive: Track Spotlight ---- */
@media (max-width: 640px) {
    .track-spotlight-card {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .track-spotlight-cover-wrap {
        width: 120px;
        height: 120px;
    }

    .track-spotlight-cover {
        width: 120px;
        height: 120px;
    }

    .track-spotlight-vinyl {
        display: none;
    }

    .track-spotlight-info {
        align-items: center;
    }

    .track-spotlight-actions {
        justify-content: center;
    }

    .track-spotlight-track-name {
        font-size: 1.2rem;
    }
}

/* ---- Responsive: Live Stats ---- */
@media (max-width: 640px) {
    .live-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .live-stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 360px) {
    .live-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Responsive: Quote Rotator ---- */
@media (max-width: 640px) {
    .quote-rotator-card {
        padding: 1.5rem 1.25rem;
    }

    .quote-rotator-text p {
        font-size: 1rem;
    }
}

/* ---- Light Theme ---- */
[data-theme="light"] .track-spotlight-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .track-spotlight-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .track-spotlight-vinyl {
    background: conic-gradient(
        from 0deg,
        #ccc 0deg, #ddd 30deg,
        #ccc 60deg, #ddd 90deg,
        #ccc 120deg, #ddd 150deg,
        #ccc 180deg, #ddd 210deg,
        #ccc 240deg, #ddd 270deg,
        #ccc 300deg, #ddd 330deg,
        #ccc 360deg
    );
}

[data-theme="light"] .live-stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .live-stat-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .quote-rotator-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.005));
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .quote-dot {
    background: rgba(0, 0, 0, 0.12);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    .track-spotlight-vinyl {
        animation: none;
    }

    .live-stat-card,
    .track-spotlight-card,
    .quote-rotator-card {
        transition-duration: 0.01ms !important;
    }

    .track-spotlight-play-btn:hover {
        transform: none;
    }
}

/* === Phase 97: Members & Albums Visibility Fixes === */

/* ---------------------------------------------------------------------------
   FIX 1: Members page — cards invisible due to scroll-driven animation

   Root cause: cinematic-scroll.css and modern-fixes.css both apply
   animation-timeline: view() with reveal-up / card-reveal / vp-section-reveal
   keyframes that start at opacity:0. Combined with content-visibility:auto
   and contain:layout on the .members-grid, the view() timeline never
   progresses past the entry range, leaving cards at opacity ~0.035.

   Fix: disable scroll-driven animations on member cards entirely and
   force them visible. Also override the data-stagger/data-reveal system
   on the members-grid container.
   --------------------------------------------------------------------------- */

/* Remove content-visibility:auto from members grid — it interferes with
   scroll animation timeline calculations for child elements */
.members-grid {
    content-visibility: visible !important;
    contain: none !important;
}

/* Kill all scroll-driven animations on member cards */
.members-grid .member-card,
.members-page .member-card {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Restore hover transform (overriding the !important none above only for hover) */
.members-page .member-card:hover {
    transform: translateY(-6px) !important;
}

/* Ensure the data-stagger/data-reveal on .members-grid does not hide children */
.members-grid[data-stagger] > *,
.members-grid[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: none !important;
}

/* Ensure text colors are explicitly set for dark theme */
.members-page .member-card {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.members-page .member-name {
    color: #fff;
}

.members-page .member-role-badge {
    color: var(--accent-red, #dc2626);
}

.members-page .member-years {
    color: rgba(255, 255, 255, 0.55);
}

.members-page .member-deceased-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------
   FIX 2: Albums page — covers show solid color instead of images

   Root cause: content-visibility:auto on .album-cover (from modern-fixes.css)
   causes the browser to skip rendering child content (the <img>) for
   off-screen album covers. The background-color (dominant_color) shows
   through as a solid rectangle.

   Fix: remove content-visibility:auto from album covers so images always
   render. The performance cost is negligible for 19 album cards.
   --------------------------------------------------------------------------- */

.album-card .album-cover,
.album-card-modern .album-cover {
    content-visibility: visible !important;
}

/* Ensure album cover images display properly */
.album-card .album-cover img,
.album-card-modern .album-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

/* <picture> elements inside .album-cover must be transparent to layout
   so that the child <img> sizes against .album-cover (which has aspect-ratio: 1),
   not against the <picture> block box (which has auto height).
   Without this, cover images may collapse or not fill the square container. */
.album-card .album-cover picture,
.album-card-modern .album-cover picture {
    display: contents;
}

/* ---------------------------------------------------------------------------
   FIX 3: Album cards — invisible due to scroll-driven animation

   modern-fixes.css applies scroll-driven card-reveal animation
   (opacity:0 -> 1) with animation-timeline: view() to .album-card and
   .album-card-modern. Off-screen cards never complete the animation.

   Fix: disable scroll-driven animations on album cards entirely.
   The JS IntersectionObserver reveal (album-reveal / album-visible classes)
   handles the entrance animation instead.
   --------------------------------------------------------------------------- */

.albums-page-modern .album-card,
.albums-page-modern .album-card-modern,
.album-card.scroll-reveal-scale {
    animation: none !important;
    animation-timeline: none !important;
}

/* Base state: cards are visible by default. The JS-based album-reveal class
   will override opacity/transform for below-fold cards that need entrance
   animation. Using !important only on animation props, NOT on
   opacity/transform, so the .album-reveal transition can still work. */
.albums-page-modern .album-card:not(.album-reveal),
.albums-page-modern .album-card-modern:not(.album-reveal) {
    opacity: 1;
    transform: none;
}

/* Restore hover transform for album cards */
.albums-page-modern .album-card:hover,
.albums-page-modern .album-card-modern:hover {
    transform: translateY(-6px) scale(1.02) !important;
}

/* Ensure revealed cards can still hover */
.albums-page-modern .album-card-modern.album-visible:hover {
    transform: translateY(-6px) scale(1.02) !important;
}

/* ============================================================
   VIDEO PAGE VISIBILITY FIXES
   Fix low-contrast text and ensure all elements are readable
   ============================================================ */

/* Ensure video card year badge is explicitly visible */
.vp-card__year {
    color: var(--vp-gold, #f59e0b);
    font-weight: 600;
}

/* Ensure featured video meta spans are visible */
.vp-featured__year,
.vp-featured__duration {
    color: var(--vp-text-muted, #9ca3af);
}

.vp-featured__tag {
    color: var(--vp-gold, #f59e0b);
}

/* Featured video title and description explicit colors */
.vp-featured__title {
    color: var(--vp-text, #fff);
}

.vp-featured__desc {
    color: var(--vp-text-muted, #9ca3af);
}

/* Keyboard hints in hero: ensure readable */
.vp-hero__kbd-hint {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.vp-hero__kbd-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.vp-hero__kbd-item kbd {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    font-family: inherit;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Hero CTA description text */
.vp-hero__cta-desc {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    margin: 0;
}

/* Video card action buttons (YT link, copy) - always visible on cards */
.vp-card__actions {
    margin-left: auto;
}

/* Copy link button and YT link in modal */
.vp-modal__copy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    color: var(--vp-text-muted, #9ca3af);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.vp-modal__copy-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.vp-modal__copy-link svg {
    flex-shrink: 0;
}

/* Light theme: video page featured section */
[data-theme="light"] .vp-featured__title {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .vp-featured__desc {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .vp-featured__tag {
    color: var(--accent, #dc2626);
}

[data-theme="light"] .vp-featured__year,
[data-theme="light"] .vp-featured__duration {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .vp-card__year {
    color: var(--accent, #dc2626);
}

/* ============================================================
   ABOUT PAGE VISIBILITY FIXES
   Fix low-opacity text, improve contrast and readability
   ============================================================ */

/* Hero subtitle: increase from 0.5 to fully readable */
.about-hero__subtitle {
    opacity: 0.75;
    color: rgba(255, 255, 255, 0.75);
}

/* Section subtitle labels: increase from 0.45 to readable */
.about-members__subtitle {
    opacity: 0.65;
    color: rgba(255, 255, 255, 0.65);
}

/* Member card role: increase from 0.55 */
.about-member-card__role {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Member card years active: increase from 0.35 */
.about-member-card__years {
    opacity: 0.55;
    color: rgba(255, 255, 255, 0.55);
}

/* Discography subtitle: increase from 0.5 */
.about-discography__subtitle {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Album thumb title: increase from 0.6 */
.about-album-thumb__title {
    opacity: 0.75;
    color: rgba(255, 255, 255, 0.75);
}

/* Stats number card label: increase from 0.5 */
.about-number-card__label {
    opacity: 0.65;
    color: rgba(255, 255, 255, 0.65);
}

/* Stats number card subtitle (e.g. "1978-2011"): increase from 0.35 */
.about-number-card__sub {
    opacity: 0.5;
    color: rgba(255, 255, 255, 0.5);
}

/* Arkhangelsk highlight description: increase from 0.55 */
.about-numbers-highlight__text p {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}

/* About CTA buttons: ensure visible text on both themes */
.about-cta .btn-primary {
    background: var(--accent-red, #dc2626);
    color: #fff;
    border: none;
}

.about-cta .btn-primary:hover {
    background: #b91c1c;
    color: #fff;
}

.about-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.about-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Timeline interactive section: ensure card text is visible */
.about-timeline-card-title {
    color: #fff;
}

.about-timeline-card p {
    color: rgba(255, 255, 255, 0.7);
}

/* Music stats section: ensure stat values are visible */
.music-stat-value {
    color: var(--accent-red, #dc2626);
}

.music-stat-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Fun fact card text visibility */
.fun-fact-title {
    color: rgba(255, 255, 255, 0.9);
}

.fun-fact-detail {
    color: rgba(255, 255, 255, 0.6);
}

/* Light theme overrides for about page visibility fixes */
[data-theme="light"] .about-hero__subtitle {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .about-members__subtitle {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .about-member-card__role {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .about-member-card__years {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .about-discography__subtitle {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .about-album-thumb__title {
    color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .about-number-card__label {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .about-number-card__sub {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .about-numbers-highlight__text p {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .about-cta .btn-secondary {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .about-cta .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .about-timeline-card-title {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .about-timeline-card p {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .music-stat-label {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .fun-fact-title {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .fun-fact-detail {
    color: var(--text-secondary, #374151);
}

/* ============================================================
   RELATED PROJECTS SECTION — About page
   ============================================================ */
.about-related-section {
    padding-block: 3rem 4rem;
}

.about-related__subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.05rem;
    max-width: 38em;
    margin: 0.5rem auto 2.5rem;
    text-align: center;
    line-height: 1.6;
}

.about-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.about-related-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.75rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.about-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

.about-related-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.about-related-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.about-related-card__title-block {
    min-width: 0;
}

.about-related-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
    line-height: 1.3;
}

.about-related-card__name-ru {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.15rem;
    font-style: italic;
}

.about-related-card__desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.about-related-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-block: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.about-related-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.about-related-card__meta-item .icon {
    flex-shrink: 0;
    margin-top: 0.2em;
    opacity: 0.6;
}

.about-related-card__meta-item strong {
    color: rgba(255, 255, 255, 0.75);
}

.about-related-card__articles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.about-related-card__articles-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
}

.about-related-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc2626;
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}

.about-related-card__link:hover {
    color: #ef4444;
    gap: 0.5rem;
}

/* Light theme overrides */
[data-theme="light"] .about-related__subtitle {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .about-related-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .about-related-card:hover {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .about-related-card__icon {
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .about-related-card__name {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .about-related-card__name-ru {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .about-related-card__desc {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .about-related-card__meta {
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .about-related-card__meta-item {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .about-related-card__meta-item strong {
    color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .about-related-card__articles-badge {
    color: rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.04);
}

/* Responsive: stack on narrow screens */
@media (max-width: 480px) {
    .about-related-card {
        padding: 1.25rem;
    }
    .about-related-card__header {
        gap: 0.75rem;
    }
    .about-related-card__icon {
        width: 40px;
        height: 40px;
    }
    .about-related-card__icon .icon {
        width: 22px;
        height: 22px;
    }
    .about-related-card__name {
        font-size: 1.1rem;
    }
    .about-related-card__articles {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =======================================================
   EVENTS PAGE ENHANCEMENTS — Phase 95
   Decade quick-jump nav, recording type, location links
   ======================================================= */

/* -----------------------------------------------
   DECADE QUICK-JUMP NAVIGATION (Sticky)
   ----------------------------------------------- */
.events-decade-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.65rem 0;
    transition: box-shadow 0.3s ease;
}

.events-decade-nav .container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.events-decade-nav__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    white-space: nowrap;
    flex-shrink: 0;
}

.events-decade-nav__buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.events-decade-nav__buttons::-webkit-scrollbar {
    display: none;
}

.events-decade-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}

.events-decade-nav__btn:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
    color: var(--text-primary, #fff);
    transform: translateY(-1px);
}

.events-decade-nav__btn--active {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--text-primary, #fff);
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.2);
}

.events-decade-nav__btn--active .events-decade-nav__btn-year {
    color: #f87171;
}

.events-decade-nav__btn-year {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    transition: color 0.25s ease;
}

.events-decade-nav__btn-count {
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.6;
    line-height: 1;
}

/* -----------------------------------------------
   RECORDING TYPE — Dot & Badge Styles
   ----------------------------------------------- */
.events-timeline__dot--recording {
    border-color: rgba(34, 197, 94, 0.5);
}

.events-timeline__dot--recording .events-timeline__dot-icon {
    color: #4ade80;
}

.events-timeline__item:hover .events-timeline__dot--recording {
    border-color: #4ade80;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

.events-timeline__card-type--recording {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.events-timeline__card--recording {
    border-color: rgba(34, 197, 94, 0.08);
}

.events-timeline__item:hover .events-timeline__card--recording {
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.08);
}

/* -----------------------------------------------
   LOCATION LINK (clickable, links to concert map)
   ----------------------------------------------- */
a.events-timeline__card-location {
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.25s ease, gap 0.25s ease;
    cursor: pointer;
}

a.events-timeline__card-location:hover {
    color: var(--accent, #dc2626);
}

a.events-timeline__card-location:hover svg {
    opacity: 1;
    transform: scale(1.15);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* -----------------------------------------------
   DECADE NAV — Light Theme
   ----------------------------------------------- */
[data-theme="light"] .events-decade-nav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .events-decade-nav__btn {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .events-decade-nav__btn:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--text-primary, #111);
}

[data-theme="light"] .events-decade-nav__btn--active {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--text-primary, #111);
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .events-decade-nav__btn--active .events-decade-nav__btn-year {
    color: #dc2626;
}

/* -----------------------------------------------
   DECADE NAV — Responsive
   ----------------------------------------------- */
@media (max-width: 600px) {
    .events-decade-nav .container {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .events-decade-nav__buttons {
        width: 100%;
    }

    .events-decade-nav__btn {
        padding: 0.35rem 0.65rem;
    }

    .events-decade-nav__btn-year {
        font-size: 0.9rem;
    }
}

/* ============================================================
   BAND LINEUP TIMELINE — Members page
   Horizontal Gantt-style chart showing member activity (1978-2011)
   ============================================================ */

.lineup-timeline {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lineup-timeline__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.lineup-timeline__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.35rem;
    color: var(--text-primary, #f5f5f5);
}

.lineup-timeline__subtitle {
    font-size: 1rem;
    opacity: 0.5;
    margin: 0;
}

/* Chart container — positions the gridlines behind the rows */
.lineup-timeline__chart {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

/* Year axis (top) */
.lineup-timeline__axis {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-left: 140px; /* matches member name column */
    position: sticky;
    top: 0;
    z-index: 3;
}

.lineup-timeline__axis-label {
    position: absolute;
    left: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    width: 130px;
    text-align: right;
    padding-right: 0.75rem;
}

.lineup-timeline__axis-track {
    position: relative;
    flex: 1;
    height: 1.5rem;
    min-width: 400px;
}

.lineup-timeline__year {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    opacity: 0.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lineup-timeline__year--decade {
    opacity: 0.7;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Role group */
.lineup-timeline__group {
    margin-bottom: 1.25rem;
}

.lineup-timeline__group-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    margin: 0 0 0.5rem;
    padding-left: 0;
    font-family: var(--font-primary, sans-serif);
    color: var(--accent-red, #dc2626);
    font-weight: 600;
}

/* Individual member row */
.lineup-timeline__rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lineup-timeline__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 32px;
    padding-left: 0;
    transition: background 0.2s ease;
    border-radius: 4px;
    cursor: default;
}

.lineup-timeline__row--highlight {
    background: rgba(220, 38, 38, 0.06);
}

.lineup-timeline__member-name {
    width: 130px;
    min-width: 130px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    padding-right: 0.75rem;
    color: var(--text-secondary, #a1a1aa);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.lineup-timeline__member-name:hover {
    color: var(--accent-red, #dc2626);
}

.lineup-timeline__member-name--deceased {
    color: rgba(220, 38, 38, 0.7);
}

.lineup-timeline__member-name--deceased:hover {
    color: #dc2626;
}

/* Bar track (the area where bars are drawn) */
.lineup-timeline__bar-track {
    position: relative;
    flex: 1;
    height: 22px;
    min-width: 400px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

/* The colored activity bar */
.lineup-timeline__bar {
    position: absolute;
    top: 2px;
    height: 18px;
    border-radius: 3px;
    opacity: 0.75;
    transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    cursor: pointer;
    min-width: 4px;
}

.lineup-timeline__bar:hover,
.lineup-timeline__row--highlight .lineup-timeline__bar {
    opacity: 1;
    transform: scaleY(1.25);
    box-shadow: 0 0 12px rgba(var(--bar-glow, 220, 38, 38), 0.35);
    z-index: 2;
}

/* Tooltip on bar hover */
.lineup-timeline__bar-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 25, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: nowrap;
    color: var(--text-primary, #f5f5f5);
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.lineup-timeline__bar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(20, 20, 25, 0.96);
}

.lineup-timeline__bar:hover .lineup-timeline__bar-tooltip {
    display: block;
}

/* Vertical gridlines (behind everything) */
.lineup-timeline__gridlines {
    position: absolute;
    top: 2.5rem;
    bottom: 0;
    left: 140px;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.lineup-timeline__gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.04);
}

.lineup-timeline__gridline--decade {
    background: rgba(255, 255, 255, 0.08);
}

/* Member card highlight from timeline hover */
.member-card--timeline-highlight {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 0 24px rgba(220, 38, 38, 0.15), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-3px);
}

/* -----------------------------------------------
   LINEUP TIMELINE — Light theme
   ----------------------------------------------- */
[data-theme="light"] .lineup-timeline {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lineup-timeline__title {
    color: var(--text-primary, #111);
}

[data-theme="light"] .lineup-timeline__bar-track {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .lineup-timeline__bar {
    opacity: 0.8;
}

[data-theme="light"] .lineup-timeline__bar:hover,
[data-theme="light"] .lineup-timeline__row--highlight .lineup-timeline__bar {
    opacity: 1;
}

[data-theme="light"] .lineup-timeline__bar-tooltip {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #111);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .lineup-timeline__bar-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.97);
}

[data-theme="light"] .lineup-timeline__gridline {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .lineup-timeline__gridline--decade {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .lineup-timeline__row--highlight {
    background: rgba(220, 38, 38, 0.04);
}

[data-theme="light"] .lineup-timeline__member-name {
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .lineup-timeline__member-name:hover {
    color: #dc2626;
}

/* -----------------------------------------------
   LINEUP TIMELINE — Responsive (vertical on mobile)
   ----------------------------------------------- */
@media (max-width: 768px) {
    .lineup-timeline__axis {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .lineup-timeline__axis-label {
        position: static;
        width: auto;
        text-align: left;
        padding-right: 0;
        margin-bottom: 0.25rem;
    }

    .lineup-timeline__axis-track {
        min-width: 100%;
        width: 100%;
        margin-left: 0;
    }

    .lineup-timeline__row {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 0.2rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .lineup-timeline__member-name {
        width: auto;
        min-width: 0;
        text-align: left;
        padding-right: 0;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .lineup-timeline__bar-track {
        width: 100%;
        min-width: 0;
        height: 26px;
    }

    .lineup-timeline__bar {
        top: 3px;
        height: 20px;
    }

    .lineup-timeline__gridlines {
        left: 0;
    }

    .lineup-timeline__bar-tooltip {
        left: 0;
        transform: none;
        font-size: 0.7rem;
    }

    .lineup-timeline__bar-tooltip::after {
        left: 1.5rem;
    }
}

@media (max-width: 480px) {
    .lineup-timeline__year {
        font-size: 0.6rem;
    }

    .lineup-timeline__group-label {
        font-size: 0.7rem;
    }

    .lineup-timeline__member-name {
        font-size: 0.78rem;
    }
}

/* Print styles for timeline */
@media print {
    .lineup-timeline__bar {
        opacity: 1 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .lineup-timeline__bar-tooltip {
        display: none !important;
    }

    .lineup-timeline__gridline--decade {
        background: rgba(0, 0, 0, 0.15);
    }
}

/* =============================================================================
   MEMBER DETAIL — Phase 107 Enhancements
   New: timeline badge, pull quote, gallery era link
   ============================================================================= */

/* --- Combined timeline badge: "1981 — 2011 • Вокал, гитара" --- */
.member-timeline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 100px;
    font-size: 0.875rem;
    line-height: 1.3;
    flex-wrap: wrap;
    max-width: fit-content;
}

.member-timeline-badge__years {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
}

.member-timeline-badge__sep {
    color: rgba(220, 38, 38, 0.7);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.member-timeline-badge__role {
    color: var(--accent-red, #dc2626);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

[data-theme="light"] .member-timeline-badge {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.02) 100%);
    border-color: rgba(220, 38, 38, 0.12);
}

[data-theme="light"] .member-timeline-badge__years {
    color: #1a1a1a;
}

/* --- Pull quote blockquote --- */
.member-pull-quote {
    position: relative;
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.5rem 1.25rem 2.25rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
    border-left: 3px solid var(--accent-red, #dc2626);
    border-radius: 0 8px 8px 0;
}

.member-pull-quote::before {
    content: '\201C';
    position: absolute;
    left: 0.35rem;
    top: 0.5rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--accent-red, #dc2626);
    font-family: Georgia, serif;
    opacity: 0.6;
}

.member-pull-quote p {
    margin: 0;
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .member-pull-quote {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(220, 38, 38, 0.01) 100%);
}

[data-theme="light"] .member-pull-quote p {
    color: rgba(0, 0, 0, 0.72);
}

/* --- Era gallery link section --- */
.member-gallery-link-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.member-gallery-link-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.member-gallery-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.member-gallery-link:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.28);
    color: #fff;
}

.member-gallery-link__icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

[data-theme="light"] .member-gallery-link-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .member-gallery-link-label {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .member-gallery-link {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.1);
    color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .member-gallery-link:hover {
    color: #1a1a1a;
}

@media (max-width: 700px) {
    .member-timeline-badge {
        font-size: 0.8125rem;
    }

    .member-timeline-badge__years {
        font-size: 0.9375rem;
    }

    .member-pull-quote {
        padding: 1rem 1.25rem 1rem 2rem;
    }

    .member-pull-quote p {
        font-size: 1rem;
    }

    .member-gallery-link-section {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-gallery-link,
    .member-timeline-badge {
        transition: none;
    }
}

/* ===================================================
   HISTORY TIMELINE PAGE
   =================================================== */

.history-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* Hero */
.history-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.history-hero__years {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--accent-red, #dc2626);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.history-hero__title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: 0.75rem;
}

.history-hero__subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

/* Stats bar */
.history-stats {
    display: inline-flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    min-height: 1.75rem;
    margin-top: 0.5rem;
}

.history-stats__skeleton {
    display: inline-block;
    width: 280px;
    height: 1em;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: historySkeletonPulse 1.4s ease infinite;
    border-radius: 4px;
}

/* Category legend */
.history-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.history-legend__item {
    font-size: 0.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 10px;
    border: 1px solid;
    opacity: 0.75;
}

.history-legend__item--formation {
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}
.history-legend__item--album {
    border-color: rgba(79, 195, 247, 0.4);
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.08);
}
.history-legend__item--concert {
    border-color: rgba(129, 199, 132, 0.4);
    color: #81c784;
    background: rgba(129, 199, 132, 0.08);
}
.history-legend__item--lineup {
    border-color: rgba(255, 183, 77, 0.4);
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.08);
}
.history-legend__item--memorial {
    border-color: rgba(239, 83, 80, 0.4);
    color: #ef5350;
    background: rgba(239, 83, 80, 0.08);
}

/* Category filter (replaces static legend) */
.history-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.history-filter-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-secondary, #999);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-filter-btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.history-filter-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.history-filter-btn--narrative.active { border-color: rgba(206, 147, 216, 0.6); color: #ce93d8; background: rgba(206, 147, 216, 0.12); box-shadow: 0 2px 12px rgba(206, 147, 216, 0.15); }
.history-filter-btn--album.active { border-color: rgba(79, 195, 247, 0.6); color: #4fc3f7; background: rgba(79, 195, 247, 0.12); box-shadow: 0 2px 12px rgba(79, 195, 247, 0.15); }
.history-filter-btn--concert.active { border-color: rgba(129, 199, 132, 0.6); color: #81c784; background: rgba(129, 199, 132, 0.12); box-shadow: 0 2px 12px rgba(129, 199, 132, 0.15); }

/* History share button */
.history-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #999);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}
.history-share-btn:hover {
    border-color: var(--accent-red, #dc2626);
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

/* History search */
.history-search {
    max-width: 400px;
    margin: 0 auto 1.5rem;
    position: relative;
}
.history-search__input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}
.history-search__input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.history-search__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.history-search__clear:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.history-search__input::placeholder {
    color: var(--text-secondary, #666);
}
.history-search__input:focus {
    border-color: var(--accent-red, #dc2626);
}

/* History photo lightbox */
.history-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.history-lightbox[hidden] { display: none; }
.history-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
.history-lightbox__img { position: relative; z-index: 1; max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
.history-lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background .2s; }
.history-lightbox__close:hover { background: var(--accent-red, #dc2626); border-color: var(--accent-red, #dc2626); }
.history-photo img { cursor: zoom-in; transition: transform .2s; }
.history-photo img:hover { transform: scale(1.02); }

/* Decade navigator */
.decade-nav {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    position: sticky;
    top: 4rem;
    z-index: 10;
    padding: 0.75rem 1rem;
    background: rgba(14, 14, 17, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.decade-nav-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.65);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}

.decade-nav-btn.active,
.decade-nav-btn:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: rgba(220, 38, 38, 0.6);
    color: #fff;
}

/* Vertical timeline */
.history-timeline {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 2rem;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 5%,
        rgba(255, 255, 255, 0.12) 95%,
        transparent 100%
    );
}

.history-item {
    position: relative;
    margin-bottom: 1.75rem;
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.history-dot {
    position: absolute;
    left: -1.85rem;
    top: 0.3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent, #dc2626);
    box-shadow: 0 0 8px var(--accent, #dc2626), 0 0 20px color-mix(in srgb, var(--accent, #dc2626) 30%, transparent);
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.history-item:hover .history-dot {
    box-shadow: 0 0 12px var(--accent, #dc2626), 0 0 28px color-mix(in srgb, var(--accent, #dc2626) 40%, transparent);
}

.history-content {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent, #dc2626);
    border-radius: 0 12px 12px 0;
    padding: 0.9rem 1.1rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.history-content:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 16px color-mix(in srgb, var(--accent, #dc2626) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.history-year {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent, #dc2626);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    font-family: var(--font-display, monospace);
}

.history-category-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.history-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-primary, inherit);
    color: var(--text-primary, #fff);
    line-height: 1.4;
}

.history-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.2rem 0 0.3rem;
    line-height: 1.5;
}

.history-link {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--accent, #dc2626);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: opacity 0.15s;
}

.history-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.history-venue {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.2rem;
}

/* Highlight animation on decade nav click */
.history-highlight .history-content {
    animation: historyPulse 2s ease;
}

@keyframes historyPulse {
    0%, 100% { background: rgba(255, 255, 255, 0.03); }
    50%       { background: rgba(220, 38, 38, 0.13); }
}

@keyframes historySkeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton loading */
.history-skeleton {
    padding-left: 2.5rem;
    position: relative;
}

.history-skeleton::before {
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.07);
}

.history-skeleton__item {
    position: relative;
    margin-bottom: 1.5rem;
    height: 72px;
    border-radius: 0 10px 10px 0;
    border-left: 3px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: historySkeletonPulse 1.4s ease infinite;
}

.history-skeleton__item::before {
    content: '';
    position: absolute;
    left: -1.85rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

/* Empty state */
.history-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

/* Bottom links */
.history-more-link {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0 1rem;
}

/* Responsive */
@media (min-width: 600px) {
    .history-timeline {
        padding-left: 3.5rem;
    }

    .history-timeline::before {
        left: 1.25rem;
    }

    .history-dot {
        left: -2.35rem;
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .history-hero {
        padding: 2rem 0.5rem 1.5rem;
    }

    .decade-nav {
        top: 3.5rem;
        padding: 0.5rem 0.5rem;
        gap: 0.35rem;
    }

    .decade-nav-btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-highlight .history-content,
    .history-skeleton__item,
    .history-stats__skeleton {
        animation: none;
    }
}