/**
 * Modern Design Fixes
 * Overrides and fixes for key visual issues
 *
 * Loaded last in the cascade (after base, components, features, homepage, pages).
 * Same-specificity selectors win by source order -- no !important needed in most cases.
 *
 * @version 2.0.0
 * @date 2026-02-18
 */

/* ── View Transitions API: enable MPA cross-page shared-element transitions ── */
@view-transition { navigation: auto; }

/* Shared-element transitions (album-*, etc.) — 450ms morph timing for all named elements.
   Root-specific rules below override this for the page cross-fade. */
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 450ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Root page cross-fade — full animation shorthand overrides the wildcard above */
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }
::view-transition-old(root) {
    animation: 250ms ease both vt-fade-out;
}
::view-transition-new(root) {
    animation: 350ms ease both vt-fade-in;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*), ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ========================================
   NAVIGATION FIX - SINGLE LINE HEADER
   ======================================== */

.site-navbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    max-width: 100%;
}

.nav-menu {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    min-width: 0;
    overflow: visible;
}

.nav-links,
.nav-links-minimal {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop: hide hamburger menu when desktop-nav is visible */
@media (min-width: 1024px) {
    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: none;
    }

    /* Hide the nav backdrop on desktop */
    /* !important: overrides JS-toggled inline display style */
    .nav-backdrop {
        display: none !important;
    }
}

/* Override .nav-item padding from pages.css (0.75rem 1.5rem) that doubles up with .nav-link padding */
.nav-item {
    padding: 0;
}

.nav-link {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    border-radius: 6px;
    transition: all 0.2s ease;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
    position: relative;
}

.nav-link:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--accent, #dc2626);
}

.nav-link.active,
.nav-link[aria-current="page"] {
    color: var(--accent, #dc2626);
    opacity: 1;
}

/* Fix header background positioning */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header, 1000);
}

.site-header .header-bg {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    background: rgba(10, 10, 15, 0.92);
    z-index: -1;
}

.site-header .site-navbar {
    position: relative;
    z-index: 1;
}

/* Brand styling */
.site-brand {
    flex-shrink: 0;
    gap: 0.5rem;
}

/* Controls area - never shrink */
.nav-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* ── User account nav widget ───────────────────────────────────── */
.user-nav { position: relative; display: flex; align-items: center; }
.user-nav__login {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: rgba(255,255,255,.7); transition: color .15s, background .15s;
    text-decoration: none;
}
.user-nav__login:hover { color: var(--text-primary); background: rgba(255,255,255,.08); }
.user-nav__dropdown { position: relative; }
.user-nav__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #c81e1e, #ff6b6b);
    border: none; cursor: pointer; color: var(--text-primary);
    font-size: .85rem; font-weight: 700; letter-spacing: .02em;
    transition: opacity .15s, transform .1s;
    display: flex; align-items: center; justify-content: center;
}
.user-nav__avatar:hover { opacity: .88; transform: scale(1.06); }
.user-nav__menu {
    position: absolute; top: calc(100% + .5rem); right: 0;
    min-width: 170px;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.6);
    overflow: hidden; z-index: 500;
    opacity: 0; transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.user-nav__avatar[aria-expanded="true"] + .user-nav__menu,
.user-nav__menu.is-open {
    opacity: 1; transform: none; pointer-events: auto;
}
.user-nav__menu-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1rem; font-size: .85rem; color: rgba(255,255,255,.8);
    text-decoration: none; background: none; border: none; width: 100%;
    cursor: pointer; text-align: left; transition: background .12s, color .12s;
    font-family: inherit;
}
.user-nav__menu-item:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.user-nav__logout { border-top: 1px solid rgba(255,255,255,.07); margin-top: .25rem; color: rgba(220,80,80,.8); }
.user-nav__logout:hover { color: rgba(255,100,100,1); background: rgba(220,38,38,.08); }

.brand-name {
    font-size: 0.95rem;
}

.brand-tagline {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ========================================
   HERO SECTION - MODERN CLEAN LOOK
   ======================================== */

.hero-section,
.hero-section.hero-modern {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
            #0a0a0a 0%,
            #121218 50%,
            #0a0a0a 100%);
    overflow: hidden;
}

/* Hero with animated WebP/image background */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-background picture {
    display: block;
    width: 100%;
    height: 100%;
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    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;
    padding: 1.5rem 2rem;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-brand {
    margin-bottom: 1.5rem;
}

.hero-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}

/* Hero Title - Bold, No WordArt */
.hero-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--text-primary);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    filter: none;
    margin-bottom: 1rem;
}

/* Remove the shimmer pseudo-element that creates a gray box behind the title */
.hero-title::after {
    content: none;
}

/* Scoped to homepage hero only - video page has its own hero-subtitle */
.hero-section .hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.hero-years {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-muted);
    text-shadow: none;
}

/* Hero Buttons */
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    border-radius: 8px;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: none;
    backdrop-filter: none;
    border: 1px solid;
    transition: all 0.25s ease;
}

.hero-actions .btn-primary {
    background: #ff3366;
    border-color: #ff3366;
    color: var(--text-primary);
}

.hero-actions .btn-primary:hover {
    background: #e62958;
    border-color: #e62958;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 51, 102, 0.35);
}

.hero-actions .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.hero-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-muted);
    transform: translateY(-2px);
}

/* ========================================
   ALBUM COVERS - ensure images on the listing page are always fully visible.
   Blur-up wrappers were removed from albums.ejs; this rule is a safety net
   in case any blur-up wrapper is reintroduced.
   Specificity must beat .blur-up:not(.blur-up--loaded) img (0,2,1).
   ======================================== */

.albums-page-modern .album-cover img,
.albums-page-modern .album-cover .blur-up img {
    filter: none;
    transform: none;
    opacity: 1;
}

/* ========================================
   ALBUM CARDS - GLASSMORPHISM
   ======================================== */

.album-card {
    position: relative;
    background: rgba(25, 25, 30, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.album-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 51, 102, 0.3);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 51, 102, 0.2);
}

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

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-card:hover .album-cover img {
    transform: scale(1.08);
}

.album-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.album-year {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ========================================
   SECTIONS - CLEAN MODERN LAYOUT
   ======================================== */

section {
    position: relative;
}

.section-header,
.block-header {
    margin-bottom: 2rem;
}

.section-title,
.block-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Remove dated outer glow from any elements */
* {
    text-shadow: none;
}

/* !important: utility overrides -- must beat any class that adds glow/neon effects */
.text-glow,
[class*="neon"],
[class*="glow"] {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* ========================================
   NEWS CARDS
   ======================================== */

.news-card,
.article-card {
    background: rgba(20, 20, 25, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255,255,255,0.02);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    border-left: 3px solid #dc2626;
}

.news-card:hover,
.article-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.15), 0 0 0 1px rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: #dc2626;
}

/* ========================================
   FOOTER - CLEAN
   ======================================== */

footer,
.footer-modern,
.site-footer {
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================
   MUSIC PLAYER - SUBTLE
   ======================================== */

.smp-player {
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

/* Tablet: switch to hamburger menu at 1200px since 8 Cyrillic nav items don't fit */
@media (max-width: 1200px) {
    .site-navbar {
        padding: 0.75rem 1rem;
    }

    .nav-links-minimal {
        display: none;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0a0a0a;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links,
    .nav-links-minimal {
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }

    /* Override display:none when menu is toggled open */
    .nav-menu.active .nav-links-minimal {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }

    .nav-links-minimal a,
    .nav-link {
        font-size: 1rem;
        padding: 0.75rem 1rem;
        opacity: 0.9;
        color: var(--text-primary);
        display: block;
        width: 100%;
    }

    .nav-links-minimal a:hover,
    .nav-link:hover {
        opacity: 1;
        background: rgba(255, 51, 102, 0.1);
        color: #ff6b9d;
    }

    .nav-toggle {
        display: flex;
    }

    .brand-name {
        font-size: 0.85rem;
    }
}

/* Small mobile: shrink controls to fit on screen */
@media (max-width: 480px) {
    .nav-actions {
        gap: 0.25rem;
    }

    /* Theme toggle stays visible on mobile for accessibility */

    .language-switcher .lang-chevron {
        display: none;
    }

    .site-brand .brand-tagline {
        display: none;
    }

    .brand-name {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .hero-section .hero-subtitle {
        font-size: clamp(0.85rem, 2.2vw, 1.1rem);
        margin-bottom: 0.25rem;
    }

    .hero-content {
        padding: 1rem;
    }

    .hero-brand {
        margin-bottom: 0.75rem;
    }

    .hero-actions {
        margin-top: 0.75rem;
        gap: 0.5rem;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .scroll-hint {
        bottom: 0.75rem;
    }
}

/* ========================================
   ALBUM DETAIL PAGE - ROCK HERO DESIGN
   ======================================== */

/* Album Page Container */
#album-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Album Header - Hero with blurred cover background */
.album-header {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

/* Blurred cover art background */
.album-header::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image: var(--album-cover);
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.3) brightness(0.35);
    z-index: -2;
}

/* Dark gradient overlay for readability */
.album-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(14, 14, 17, 0.7) 70%),
        linear-gradient(180deg, rgba(14, 14, 17, 0.4) 0%, rgba(14, 14, 17, 0.85) 100%);
    z-index: -1;
}

.album-header .grid-2 {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 3rem;
    align-items: start;
}

/* Album Artwork - Hero element */
.album-artwork-large {
    position: sticky;
    top: 6rem;
}

.album-artwork-large img {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 80px color-mix(in oklch, var(--album-color, var(--accent)) 30%, transparent);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.album-artwork-large:hover img {
    transform: scale(1.03);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 100px color-mix(in oklch, var(--accent) 25%, transparent);
}

.album-placeholder-large {
    width: 360px;
    height: 360px;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Album Info */
.album-info h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    color: var(--text-primary);
    -webkit-text-fill-color: unset;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.album-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.album-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
}

.album-meta-item .meta-icon {
    font-size: 0.9rem;
    opacity: 0.8;
}

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

.album-description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

/* Album Controls */
.album-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2rem;
}

.album-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.album-controls .btn-primary {
    background: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--accent) 40%, transparent);
}

.album-controls .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px color-mix(in oklch, var(--accent) 50%, transparent);
    filter: brightness(1.1);
}

.album-controls .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.album-controls .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* ---- Tracklist Section ---- */
.album-tracks {
    background: rgba(20, 20, 28, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.album-tracks h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Track Items */
.track-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.track-item {
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

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

.track-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    transform: none;
}

.track-item:hover .track-title span {
    color: var(--text-primary);
}

/* Track Number - monospace, subtle */
.track-number {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border-radius: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.35);
    min-width: 28px;
    text-align: right;
    transition: color 0.2s ease;
}

.track-item:hover .track-number {
    color: var(--accent);
    background: none;
}

/* Track Title */
.track-title {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.track-title span {
    transition: color 0.2s ease;
}

/* Track Duration - right-aligned, muted, monospace */
.track-duration {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    min-width: 45px;
    text-align: right;
    letter-spacing: 0.03em;
}

/* Track Buttons */
.track-play-btn {
    width: 34px;
    height: 34px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
}

.track-item:hover .track-play-btn {
    opacity: 1;
}

.track-play-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--accent) 45%, transparent);
}

.track-add-to-queue-btn {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.track-save-btn {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.track-save-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.35);
    color: rgba(220, 100, 100, 0.9);
    transform: scale(1.1);
}

.track-save-btn.is-saved {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.35);
    color: rgba(220, 80, 80, 0.9);
}

.lyrics-btn {
    opacity: 0.4;
    transition: opacity 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
}

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

/* Track Lyrics */
.track-lyrics {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding: 1.5rem;
    background: rgba(10, 10, 15, 0.5);
    border-radius: 12px;
    border-left: 3px solid var(--accent);
}

.lyrics-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
    white-space: pre-line;
}

/* Album Interactions */
.album-interactions {
    background: rgba(20, 20, 28, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
}

.comments-section h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Loading State */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.5rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(20, 20, 28, 0.6);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 2rem;
}

/* ---- Album Page Responsive ---- */
@media (max-width: 900px) {
    .album-header .grid-2 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .album-artwork-large {
        position: static;
        display: flex;
        justify-content: center;
    }

    .album-artwork-large img,
    .album-placeholder-large {
        max-width: 300px;
        width: 300px;
        height: 300px;
    }

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

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

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

    .track-item {
        grid-template-columns: 36px 1fr auto;
        gap: 0.75rem;
    }

    .track-duration {
        display: none;
    }
}

@media (max-width: 480px) {
    #album-container {
        padding: 1rem 0.75rem;
    }

    .album-header {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .album-artwork-large img,
    .album-placeholder-large {
        max-width: 240px;
        width: 240px;
        height: 240px;
    }

    .album-info h1 {
        font-size: 1.75rem;
    }

    .album-tracks {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .track-item {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .track-number {
        font-size: 0.8rem;
        min-width: 24px;
    }

    .track-title {
        font-size: 0.875rem;
    }

    .track-play-btn {
        width: 34px;
        height: 34px;
        font-size: 0.7rem;
        /* Ensure 44px touch target via padding */
        position: relative;
    }

    .track-play-btn::before {
        content: '';
        position: absolute;
        inset: -5px;
        /* Expands touch target to ~44px without changing visual size */
    }
}

/* ========================================
   GALLERY PAGE - MODERN DESIGN
   ======================================== */

/* (Old gallery category/photo-grid design removed — unused since gallery redesign) */

/* Gallery Content Header */
.gallery-header {
    margin-bottom: 2rem;
}

.gallery-header h2 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1rem 0 0.5rem;
}

.gallery-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

/* (Old modal/gallery responsive rules removed — unused since gallery redesign) */

/* ========================================
   NEWS PAGE - PROPER CARD LAYOUT
   ======================================== */

/* Page header for news */
.page-header {
    padding: 6rem 2rem 2rem;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(255, 51, 102, 0.1) 0%, transparent 60%);
}

.page-header h1 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
}

/* Page hero (articles listing) */
.page-hero {
    position: relative;
    padding: 7rem 2rem 3rem;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(255, 51, 102, 0.12) 0%, transparent 65%);
}

.page-hero .page-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.page-hero .page-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

/* (Removed: .page-badge, .pulse-dot, .cards-grid-3 — unused) */

/* News card proper styling */
.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.news-meta time {
    color: var(--text-muted);
}

.news-category {
    background: rgba(255, 51, 102, 0.15);
    color: #ff6b9d;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    text-transform: none;
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.news-title a:hover {
    color: #ff6b9d;
}

.news-excerpt {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.8em;
}

/* Hide raw HTML tags in excerpts */
.news-excerpt p,
.news-excerpt div,
.news-excerpt span {
    display: inline;
    margin: 0;
    padding: 0;
}

/* !important: content sanitization -- must hide embedded media regardless of other styles */
.news-excerpt img,
.news-excerpt iframe,
.news-excerpt video,
.news-excerpt table {
    display: none !important;
}

/* News card footer */
.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.news-card-footer .reading-time {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.news-card-footer .reading-time i {
    font-size: 0.75rem;
}

/* (Removed: .search-container, .search-input-wrapper, .search-filters, .search-highlight,
   .pagination-container — unused old search/pagination design) */

.pagination-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ========================================
   ARTICLES PAGE - GRID & CARDS
   ======================================== */

/* (Removed: .articles-section, .page-count — unused) */

/* Articles grid layout */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

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

.article-header {
    margin-bottom: 0.25rem;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.article-category {
    background: rgba(255, 51, 102, 0.15);
    color: #ff6b9d;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.article-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    margin: 0;
}

.article-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.article-title a:hover {
    color: #ff6b9d;
}

.article-excerpt {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-author {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.article-views {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.article-views i,
.article-author i {
    font-size: 0.8rem;
}

.article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.read-more {
    color: #ff6b9d;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}

.read-more:hover {
    color: #ff3366;
}

.reading-time {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.filter-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-tab:hover,
.filter-tab.active {
    background: rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.4);
    color: var(--text-primary);
}

/* ========================================
   SINGLE ARTICLE PAGE (article.ejs)
   ======================================== */

.article-page-layout {
    min-height: 100vh;
}

/* Hero / Header */
.article-hero-single {
    position: relative;
    min-height: 35vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6rem 2rem 3rem;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
}

/* Taller hero when there is a background image */
.article-hero-single:has(.article-bg-image img) {
    min-height: 45vh;
}

.article-hero-single .article-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    filter: blur(2px);
}

.article-header-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    text-align: center;
}

/* Breadcrumbs */
.article-breadcrumbs-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.article-breadcrumbs-modern a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.article-breadcrumbs-modern a:hover {
    color: #ff6b9d;
}

.article-breadcrumbs-modern i,
.article-breadcrumbs-modern .icon {
    font-size: 0.65rem;
    opacity: 0.5;
    width: 0.65rem;
    height: 0.65rem;
}

/* Title */
.article-title-hero {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 1.5rem;
}

/* Meta Grid */
.article-meta-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item-modern {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.meta-item-modern i,
.meta-item-modern .icon {
    color: #ff6b9d;
}

/* Article Grid Layout */
.article-grid-layout {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Ensure grid children land in correct columns */
.article-grid-layout > .sticky-share-bar {
    grid-column: 1;
}

.article-grid-layout > .article-body-modern {
    grid-column: 2;
}

/* Time remaining indicator inside article body, not a grid child */
.article-body-modern > .article-time-remaining {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sticky Share Sidebar */
.sticky-share-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 100px;
    align-self: start;
}

.share-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    font-size: 1rem;
}

.share-btn-modern:hover {
    background: rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.4);
    color: var(--text-primary);
}

/* Related Section */
.related-section-modern {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .article-hero-single {
        min-height: 35vh;
        padding: 5rem 1rem 2rem;
    }

    .article-title-hero {
        font-size: 1.5rem;
    }

    .article-grid-layout {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }

    .sticky-share-bar {
        flex-direction: row;
        position: static;
        justify-content: center;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}

/* ========================================
   ARTICLE DETAIL PAGE ENHANCEMENTS
   ======================================== */

/* Reading Progress Bar */
.reading-progress-bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 100;
}

.reading-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff3366 0%, #ff6b9d 50%, #b366ff 100%);
    transition: width 0.1s linear;
}

/* Improved article body typography */
.article-body-modern .typography-content {
    font-size: 1.1rem;
    line-height: 1.85;
    letter-spacing: 0.01em;
    max-width: 100%;
    hyphens: none;
}

.article-body-modern .typography-content h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.article-body-modern .typography-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
}

.article-body-modern .typography-content blockquote {
    border-left: 3px solid #ff3366;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: rgba(255, 51, 102, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Article tags section */
.article-tags-section {
    margin-top: 3rem;
    justify-content: flex-start;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Article author block */
.article-author-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.article-author-block i,
.article-author-block .icon {
    color: #ff6b9d;
    font-size: 1rem;
}

/* Breadcrumb current item */
.breadcrumb-current {
    color: rgba(255, 255, 255, 0.4);
}

/* Share button success state */
/* !important: state override -- .success must beat the base .share-btn-modern:hover styles */
.share-btn-modern.success {
    background: rgba(39, 174, 96, 0.2) !important;
    border-color: rgba(39, 174, 96, 0.5) !important;
    color: #27ae60 !important;
}

/* Related heading */
.related-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

/* Previous / Next Article Navigation */
.article-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
}

.prev-next-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(25, 25, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.prev-next-link.empty {
    visibility: hidden;
}

.prev-next-link:hover {
    background: rgba(35, 35, 45, 0.8);
    border-color: rgba(255, 51, 102, 0.3);
    transform: translateY(-2px);
}

.prev-next-link.next-link {
    text-align: right;
}

.prev-next-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff6b9d;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.next-link .prev-next-label {
    justify-content: flex-end;
}

.prev-next-title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prev-next-link:hover .prev-next-title {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .article-prev-next {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem 2rem;
    }

    .prev-next-link.next-link {
        text-align: left;
    }

    .next-link .prev-next-label {
        justify-content: flex-start;
    }
}

/* ========================================
   GLOBAL HEADING FIX - NO ALL CAPS
   ======================================== */

/* !important: low-specificity element selectors must beat higher-specificity class selectors
   in earlier files that set text-transform: uppercase on headings */
h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
}

/* !important: utility classes that must enforce uppercase regardless of heading fix above */
.news-category,
.article-category,
.page-badge,
.filter-chip,
.featured-label,
.card-category-badge {
    text-transform: uppercase !important;
}

/* ========================================
   MOBILE HOMEPAGE FIXES
   Timeline contrast, gallery scroll hint,
   section spacing reduction
   ======================================== */

@media (max-width: 768px) {

    /* --- Reduce section padding on mobile --- */
    .homepage .on-this-day-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .homepage .featured-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .homepage .timeline-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        /* Override content-visibility:auto from components.css that causes height collapse
           when timeline content is loaded dynamically via JS */
        content-visibility: visible;
    }

    .homepage .stats-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .homepage .memorial-section.memorial-modern {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* --- Timeline: improve contrast on mobile --- */
    .homepage .timeline-section .timeline-container.compact .timeline-event-content {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .homepage .timeline-section .timeline-container.compact .timeline-event-title {
        color: #f0f0f5;
    }

    .homepage .timeline-section .timeline-container.compact .event-date {
        color: var(--text-secondary);
    }

    .homepage .timeline-section .timeline-container.compact .year-marker-label {
        color: #ff8888;
    }

    .homepage .timeline-section .timeline-container.compact .event-type-badge {
        opacity: 1;
    }

    /* Cap timeline height on mobile with fade-out gradient */
    .homepage .timeline-section .timeline-events {
        max-height: 320px;
        overflow: hidden;
        position: relative;
    }

    /* Gradient fade at bottom to hint at more content */
    .homepage .timeline-section .timeline-container.compact::after {
        content: '';
        display: block;
        height: 60px;
        margin-top: -60px;
        position: relative;
        background: linear-gradient(to bottom, transparent, #12121a);
        pointer-events: none;
    }

    /* --- Gallery: visible scroll indicator --- */
    .homepage .gallery-scroll-modern {
        /* Show a thin scrollbar on mobile for discoverability */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
        scroll-padding-inline-start: 1rem;
        padding-bottom: 0.75rem;
    }

    .homepage .gallery-scroll-modern::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .homepage .gallery-scroll-modern::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
    }

    .homepage .gallery-scroll-modern::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
    }

    /* Show partial next image as scroll hint */
    .homepage .gallery-scroll-modern a,
    .homepage .gallery-scroll-modern .gallery-photo-item {
        width: 75vw;
        scroll-snap-align: start;
    }

    /* --- Stats grid: 2 columns is fine, reduce card padding --- */
    .homepage .stats-section .stat-card {
        padding: 1rem 0.5rem;
    }

    .homepage .stats-section .block-title {
        margin-bottom: 1rem;
    }

    /* --- Memorial: tighter on mobile --- */
    .homepage .memorial-modern .memorial-content {
        padding: 0 0.5rem;
    }

    .homepage .memorial-modern .memorial-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .homepage .memorial-modern .memorial-title {
        font-size: 1.4rem;
    }

    .homepage .memorial-modern .memorial-quote blockquote {
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
    }

    /* --- Scroll hint: keep above fold --- */
    .hero-section .scroll-hint {
        bottom: 0.5rem;
        font-size: 0.75rem;
    }
}

/* Extra-small screens (375px and below) */
@media (max-width: 414px) {

    .homepage .gallery-scroll-modern a,
    .homepage .gallery-scroll-modern .gallery-photo-item {
        width: 80vw;
    }

    /* Even tighter padding for smallest screens */
    .homepage .on-this-day-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .homepage .stats-section .stats-grid-modern {
        gap: 0.5rem;
    }

    .homepage .stats-section .stat-card .stat-number {
        font-size: 1.4rem;
    }

    .homepage .stats-section .stat-card .stat-icon {
        font-size: 1.5rem;
    }
}

/* ============================================================
   HOMEPAGE CSS TRUNCATION FIX
   Rules below were at lines 4814-4975 of homepage.css but the
   browser silently stops parsing that file around rule 535.
   Moved here (modern-fixes.css loads last) so they take effect.
   ============================================================ */

/* (Removed: early content-visibility:auto rules — overridden by Phase 65 block at end of file) */

/* CLS: mobile overrides — rendered heights differ on narrow screens */
@media (max-width: 640px) {
    .homepage .on-this-day-section {
        min-height: 240px;
    }

    .homepage #homepage-timeline {
        min-height: 520px;
    }
}

/* Timeline Expand/Collapse Button */
.timeline-expand-btn {
    display: block;
    margin: 2rem auto 0;
    padding: 0.75rem 2rem;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.04);
    color: oklch(0.88 0.14 15);
    border: 1px solid oklch(0.65 0.14 15);
    border-radius: 6px;
    font-family: var(--font-secondary, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.timeline-expand-btn:hover {
    background: oklch(0.55 0.12 15 / 0.15);
    border-color: oklch(0.7 0.14 15);
    color: oklch(0.95 0.1 15);
}

.timeline-expand-btn:focus-visible {
    outline: 2px solid oklch(0.75 0.15 85);
    outline-offset: 2px;
}

/* Gallery Section Fix: Disable era-filters, title overlay, hover effects */
.homepage .gallery-scroll-modern .gallery-photo-item,
.homepage .gallery-scroll-modern a {
    position: relative;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden;
}

.homepage .gallery-scroll-modern .gallery-photo-item.era-grain::after,
.homepage .gallery-scroll-modern a.era-grain::after {
    display: none !important;
}

.homepage .gallery-scroll-modern [class*="era-filter-"] {
    filter: none !important;
}

.homepage .gallery-scroll-modern .gallery-photo-item img,
.homepage .gallery-scroll-modern a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.05) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.4s ease;
}

.homepage .gallery-scroll-modern .gallery-photo-item::after,
.homepage .gallery-scroll-modern a::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 60%);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.homepage .gallery-scroll-modern .gallery-photo-item:hover::after,
.homepage .gallery-scroll-modern a:hover::after {
    opacity: 1;
}

.homepage .gallery-scroll-modern .gallery-photo-item:hover img,
.homepage .gallery-scroll-modern a:hover img {
    transform: scale(1.08);
    filter: brightness(1.1) !important;
}

.homepage .gallery-scroll-modern .gallery-photo-item:focus-visible::after,
.homepage .gallery-scroll-modern a:focus-visible::after {
    opacity: 1;
}

.homepage .gallery-scroll-modern .gallery-photo-item:focus-visible img,
.homepage .gallery-scroll-modern a:focus-visible img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .homepage .gallery-scroll-modern .gallery-photo-item img,
    .homepage .gallery-scroll-modern a img {
        transition: none;
    }

    .homepage .gallery-scroll-modern .gallery-photo-item::after,
    .homepage .gallery-scroll-modern a::after {
        transition: none;
    }
}

/* ============================================================
   FEATURED CONTENT: 2-Column Desktop Layout
   ============================================================ */
@media (min-width: 1024px) {
    .homepage .featured-content > .container {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }

    .homepage .featured-content > .container > .content-block:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .homepage .featured-content > .container > .content-block:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    .homepage .featured-content > .container > .content-block:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: 0;
    }

    .homepage .featured-content .albums-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .homepage .featured-content .albums-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   HOMEPAGE SECTION SPACING & VISUAL POLISH
   Consistent vertical rhythm, clear section separation,
   improved contrast for memorial/timeline/footer.
   ============================================================ */

/* --- Uniform section vertical padding (desktop) --- */
.homepage .on-this-day-section {
    padding: 3rem 0;
}

.homepage .featured-content {
    padding: 4rem 0;
}

.homepage .stats-section {
    padding: 4rem 0;
}

.homepage .memorial-section.memorial-modern {
    padding: 5rem 1rem;
}

.homepage .timeline-section {
    padding: 4rem 0;
}

/* --- On This Day: polish the "no events" empty state --- */
.homepage .on-this-day-section #on-this-day-widget {
    max-width: 640px;
    margin: 0 auto;
}

/* --- Stats section: boost card visibility --- */
.homepage .stats-section {
    background: rgba(24, 24, 31, 0.95);
}

.homepage .stats-section .block-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.homepage .stats-section .stats-grid-modern {
    max-width: 960px;
    margin: 0 auto;
    gap: 1.25rem;
    grid-template-columns: repeat(6, 1fr);
}

.homepage .stats-section .stat-card {
    background: rgba(42, 42, 52, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
}

.homepage .stats-section .stat-card .stat-icon {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    opacity: 0.9;
}

.homepage .stats-section .stat-card .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: oklch(0.78 0.18 350);
}

.homepage .stats-section .stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

/* --- Memorial section: ensure readability against dark bg --- */
.homepage .memorial-section.memorial-modern {
    background: linear-gradient(180deg,
        rgba(26, 26, 36, 1) 0%,
        rgba(34, 34, 48, 1) 50%,
        rgba(26, 26, 36, 1) 100%);
}

.homepage .memorial-modern .memorial-content {
    max-width: 640px;
    margin: 0 auto;
}

.homepage .memorial-modern .memorial-icon {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
    display: block;
}

.homepage .memorial-modern .memorial-title {
    color: var(--text-primary);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.homepage .memorial-modern .memorial-dates {
    color: oklch(0.78 0.18 350);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.homepage .memorial-modern .memorial-role {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.homepage .memorial-modern .memorial-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, oklch(0.65 0.18 350), transparent);
    margin: 0 auto 1.25rem;
}

.homepage .memorial-modern .memorial-quote-text {
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    line-height: 1.7;
    padding: 1rem 1.5rem;
    border-left: 3px solid oklch(0.55 0.15 350);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

/* Date counter in memorial */
.homepage .memorial-modern .date-counter {
    margin: 1.5rem auto;
}

.homepage .memorial-modern .date-counter .counter-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: oklch(0.85 0.14 350);
}

.homepage .memorial-modern .date-counter .counter-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Memorial action links */
.homepage .memorial-modern .memorial-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.homepage .memorial-modern .memorial-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    color: oklch(0.9 0.1 350);
    background: rgba(255, 85, 136, 0.12);
    border: 1px solid rgba(255, 85, 136, 0.25);
}

.homepage .memorial-modern .memorial-link:hover {
    background: rgba(255, 85, 136, 0.2);
    border-color: rgba(255, 85, 136, 0.4);
}

.homepage .memorial-modern .memorial-link-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.homepage .memorial-modern .memorial-link-secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* --- Timeline section: improve contrast and readability --- */
.homepage .timeline-section {
    background: linear-gradient(180deg,
        rgba(28, 28, 36, 1) 0%,
        rgba(18, 18, 26, 1) 100%);
}

.homepage .timeline-section .block-title {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.homepage .timeline-section .view-all {
    color: oklch(0.78 0.14 15);
    font-size: 0.9rem;
}

/* Timeline event cards: lighten backgrounds */
.homepage .timeline-section .timeline-event-content {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.homepage .timeline-section .timeline-event-title {
    color: #f0f0f5;
    font-weight: 600;
}

.homepage .timeline-section .event-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.homepage .timeline-section .year-marker-label {
    color: oklch(0.78 0.18 15);
    font-weight: 700;
    font-size: 1.5rem;
}

.homepage .timeline-section .event-type-badge {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* "Show all events" button */
.homepage .timeline-section .timeline-expand-btn {
    margin-top: 1.5rem;
}

/* --- Footer: increase breathing room and contrast --- */
.site-footer .footer-content,
.footer-modern .footer-content {
    padding: 3rem 2rem 2rem;
}

.site-footer .footer-bottom,
.footer-modern .footer-bottom {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Section separators: upgrade gradient dividers --- */
.homepage .on-this-day-section::before,
.homepage .featured-content::before,
.homepage .stats-section::before,
.homepage .timeline-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 51, 102, 0.2) 30%,
        rgba(255, 51, 102, 0.35) 50%,
        rgba(255, 51, 102, 0.2) 70%,
        transparent);
    z-index: 1;
}

.homepage .memorial-section.memorial-modern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 200, 120, 0.2) 30%,
        rgba(255, 102, 153, 0.35) 50%,
        rgba(255, 200, 120, 0.2) 70%,
        transparent);
    z-index: 1;
    pointer-events: none;
}

/* (Removed: content-visibility:visible override — Phase 65 at end of file now controls this) */

/* --- Stats grid: 2 columns on tablets, revert to auto-fit on small --- */
@media (max-width: 768px) {
    .homepage .stats-section .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .homepage .stats-section .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* --- Mobile adjustments (section spacing) --- */
@media (max-width: 768px) {
    .homepage .on-this-day-section {
        padding: 2rem 0;
    }

    .homepage .featured-content {
        padding: 2.5rem 0;
    }

    .homepage .stats-section {
        padding: 2.5rem 0;
    }

    .homepage .memorial-section.memorial-modern {
        padding: 3rem 1rem;
    }

    .homepage .timeline-section {
        padding: 2.5rem 0;
    }

    .homepage .memorial-modern .memorial-quote-text {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}

/* ========================================
   MOBILE TOUCH TARGETS (WCAG 2.5.8 - 48px recommended)
   ======================================== */

@media (max-width: 768px) {
    /* Language switcher button: ensure 48px min touch target */
    .lang-toggle {
        min-height: 48px;
        min-width: 48px;
        padding: 10px 12px;
    }

    /* Hamburger menu nav links: ensure 48px min touch target */
    .nav-menu .nav-link,
    .nav-menu .nav-links-minimal a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    /* Language dropdown options */
    .lang-option {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Memorial action links */
    .memorial-link {
        min-height: 48px;
    }

    /* Nav toggle hamburger button: ensure 48px touch target */
    .nav-toggle {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Theme toggle on small mobile: keep at 44px minimum */
    .theme-toggle-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* Search button: ensure 48px touch target */
    .search-btn {
        min-width: 48px;
        min-height: 48px;
    }
}

@media (max-width: 380px) {
    /* Very small screens: compact header controls but keep usable */
    .theme-toggle-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .search-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .lang-toggle {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.8rem;
        min-width: auto;
    }
}

/* ============================================================
   GALLERY PHOTO COUNT BADGE
   Small badge in top-right corner of gallery preview items
   ============================================================ */

.homepage .gallery-scroll-modern .gallery-photo-count {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    line-height: 1.4;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
}

.homepage .gallery-scroll-modern .gallery-photo-count::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='rgba(255,255,255,0.85)'%3E%3Cpath d='M220.6 121.2L271.1 96 448 96l0 272-352 0 0-237.7 124.6-9.1zM0 128C0 92.7 28.7 64 64 64l164.2 0L287 33.5C297 23.5 311.1 16 326.8 16L448 16c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 464c-35.3 0-64-28.7-64-64L0 128z'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

.homepage .gallery-scroll-modern .gallery-photo-item:hover .gallery-photo-count {
    opacity: 0.7;
}

/* Use data-title for overlay text when present (overrides aria-label fallback) */
.homepage .gallery-scroll-modern .gallery-photo-item[data-title]::after {
    content: attr(data-title);
}

/* ========================================
   ROCK-THEMED VISUAL ENHANCEMENTS
   v2.1.0 - Subtle rock/vinyl aesthetics
   ======================================== */

/* --- 1. Hero Section: Cinematic Vignette & Depth --- */

/* Deep vignette overlay for dramatic hero framing */
.homepage .hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%,
            transparent 40%,
            rgba(0, 0, 0, 0.35) 75%,
            rgba(0, 0, 0, 0.65) 100%);
}

/* Hero title: subtle warm glow for rock feel */
.homepage .hero-title {
    text-shadow:
        0 2px 30px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(220, 38, 38, 0.08);
}

/* Scroll hint: gentle pulse to invite scrolling */
.homepage .scroll-hint {
    animation: scroll-hint-pulse 2.5s ease-in-out infinite;
}

@keyframes scroll-hint-pulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}

/* --- 2. Section Dividers: Vinyl Groove Motif --- */

/* Decorative separator between major homepage sections.
   A thin double-line evoking vinyl record grooves. */
.homepage .featured-content,
.homepage .stats-section,
.homepage .memorial-section,
.homepage .timeline-section {
    position: relative;
}

.homepage .featured-content::before,
.homepage .stats-section::before,
.homepage .timeline-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(120px, 30vw);
    height: 3px;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(220, 38, 38, 0.4) 20%,
            rgba(220, 38, 38, 0.6) 50%,
            rgba(220, 38, 38, 0.4) 80%,
            transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* --- 3. Album Card Hover: Premium Vinyl-Glow Effect --- */

/* Accent top-line that reveals on hover */
.homepage .album-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #dc2626, #ff6b9d, #dc2626);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.homepage .album-card-modern:hover::before {
    opacity: 1;
}

/* Enhanced hover: deeper shadow with warm red underglow */
.homepage .album-card-modern:hover {
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(220, 38, 38, 0.12),
        0 0 0 1px rgba(220, 38, 38, 0.25);
}

/* Vinyl-like circular reflection overlay on hover */
.homepage .album-card-modern::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.homepage .album-card-modern:hover::after {
    opacity: 1;
}

/* --- 4. Memorial Candle: Warm Flickering Glow --- */

/* Candle icon warm amber color and flicker animation */
.homepage .memorial-modern .memorial-icon {
    color: #f59e0b;
    filter: none;
}

.homepage .memorial-modern .memorial-icon .icon {
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5))
            drop-shadow(0 0 30px rgba(245, 158, 11, 0.2));
    animation: candle-flicker 3s ease-in-out infinite;
}

@keyframes candle-flicker {
    0%   { filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.2)); }
    25%  { filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.6)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.25)); }
    50%  { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.18)); }
    75%  { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.55)) drop-shadow(0 0 32px rgba(245, 158, 11, 0.22)); }
    100% { filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.2)); }
}

/* Memorial section: subtle warm radial glow behind candle */
.homepage .memorial-section.memorial-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.homepage .memorial-modern .memorial-content {
    position: relative;
    z-index: 1;
}

/* --- 5. Stat Card Icons: Visible Accent Color --- */

/* Ensure SVG icons in stat cards are visible with accent color */
.homepage .stats-section .stat-card .stat-icon {
    color: #ff6b9d;
    filter: none;
}

.homepage .stats-section .stat-card .stat-icon .icon {
    fill: currentColor;
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 2px 8px rgba(255, 107, 157, 0.25));
}

/* Stat cards: subtle border glow on hover */
.homepage .stats-section .stat-card:hover .stat-icon {
    color: #ff5588;
}

.homepage .stats-section .stat-card:hover .stat-icon .icon {
    filter: drop-shadow(0 2px 12px rgba(255, 85, 136, 0.4));
    transition: filter 0.3s ease;
}

/* --- 6. Rock Decorative Elements --- */

/* Vinyl groove ring: decorative circle behind stats section title */
.homepage .stats-section .block-title::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 2px solid rgba(220, 38, 38, 0.25);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(220, 38, 38, 0.08) 30%,
        transparent 31%,
        transparent 55%,
        rgba(220, 38, 38, 0.05) 56%,
        transparent 70%
    );
}

/* Timeline section: guitar-string inspired top border */
.homepage .timeline-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(120px, 30vw);
    height: 3px;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.15) 80%,
            transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* Gallery section: subtle accent corner brackets */
.homepage .gallery-scroll-modern .gallery-photo-item {
    position: relative;
}

.homepage .gallery-scroll-modern .gallery-photo-item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    border-top: 2px solid rgba(220, 38, 38, 0.3);
    border-left: 2px solid rgba(220, 38, 38, 0.3);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.homepage .gallery-scroll-modern .gallery-photo-item:hover::before {
    opacity: 1;
}

/* News items: accent bar on hover (left border glow) */
.homepage .news-item-modern::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #dc2626, #ff6b9d);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.homepage .news-item-modern {
    position: relative;
}

.homepage .news-item-modern:hover::before {
    height: 60%;
}

/* --- 7. Scroll Reveal Enhancement --- */
/* Boost the stagger delay slightly for a more dramatic cascade */
.homepage [data-stagger].revealed > *:nth-child(1) { transition-delay: 0.08s; }
.homepage [data-stagger].revealed > *:nth-child(2) { transition-delay: 0.18s; }
.homepage [data-stagger].revealed > *:nth-child(3) { transition-delay: 0.28s; }
.homepage [data-stagger].revealed > *:nth-child(4) { transition-delay: 0.38s; }
.homepage [data-stagger].revealed > *:nth-child(5) { transition-delay: 0.48s; }
.homepage [data-stagger].revealed > *:nth-child(6) { transition-delay: 0.58s; }

/* --- 8. Mobile: Reduce Effects for Performance --- */
@media (max-width: 768px) {
    .homepage .hero-section::after {
        background: radial-gradient(ellipse at 50% 50%,
            transparent 50%,
            rgba(0, 0, 0, 0.3) 100%);
    }

    .homepage .stats-section .block-title::before {
        width: 36px;
        height: 36px;
    }

    .homepage .gallery-scroll-modern .gallery-photo-item::before {
        display: none;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .homepage .scroll-hint {
        animation: none;
    }

    .homepage .memorial-modern .memorial-icon .icon {
        animation: none;
    }

    .homepage .album-card-modern::before,
    .homepage .album-card-modern::after {
        transition: none;
    }

    .homepage .news-item-modern::before {
        transition: none;
    }

    .homepage [data-stagger].revealed > * {
        transition-delay: 0s;
    }
}

/* ============================================================
   MEMBERS PAGE IMPROVEMENTS (Phase 35)
   ============================================================ */

/* Force dark theme for members page (prevent light OS theme issues) */
.members-page {
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.65);
    color: var(--text-primary);
}

/* Better subtitle visibility */
.members-page-header p {
    opacity: 0.65;
    color: rgba(255, 255, 255, 0.65);
}

/* Enhanced member card styling */
.members-page .member-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on hover */
.members-page .member-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(220, 38, 38, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.members-page .member-card:hover::before {
    opacity: 1;
}

/* Improved photo container with subtle vignette */
.members-page .member-photo-container {
    position: relative;
}

.members-page .member-photo-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
    pointer-events: none;
}

/* Better image presentation */
.members-page .member-photo-container img {
    filter: brightness(1.15) contrast(1.05) saturate(0.9);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.members-page .member-card:hover .member-photo-container img {
    filter: brightness(1.25) contrast(1.1) saturate(1);
    transform: scale(1.05);
}

/* Content area */
.members-page .member-content {
    position: relative;
    z-index: 2;
}

/* Member name styling */
.members-page .member-name {
    color: var(--text-primary);
    font-size: 1.2rem;
}

/* Role text: brighter red */
.members-page .member-card .member-role {
    color: var(--accent-red, #dc2626);
    opacity: 0.9;
}

/* Years active: better visibility */
.members-page .member-years {
    opacity: 0.55;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

/* Founder card: make it stand out */
.members-page .member-card.founder {
    border-color: rgba(220, 38, 38, 0.25);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    grid-column: 1 / -1;
}

@media (min-width: 601px) {
    .members-page .member-card.founder {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: 1 / -1;
    }

    .members-page .member-card.founder .member-photo-container {
        aspect-ratio: 4 / 3;
    }

    .members-page .member-card.founder .member-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
    }

    .members-page .member-card.founder .member-name {
        font-size: 1.75rem;
    }

    .members-page .member-card.founder .member-role {
        font-size: 0.9rem;
    }
}

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

/* Deceased card subtle styling */
.members-page .member-card.deceased .member-photo-container img {
    filter: brightness(1.1) contrast(1.05) saturate(0.6);
}

.members-page .member-card.deceased:hover .member-photo-container img {
    filter: brightness(1.2) contrast(1.1) saturate(0.75);
}

/* ============================================================
   MEMBER DETAIL PAGE IMPROVEMENTS (Phase 35)
   ============================================================ */

/* Force dark theme for member detail */
.member-detail {
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.65);
    color: var(--text-primary);
}

/* Better photo presentation */
.member-detail .member-photo-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.member-detail .member-photo-wrapper img {
    filter: brightness(1.2) contrast(1.05);
    transition: filter 0.4s ease;
}

/* Name heading with subtle text shadow */
.member-detail .member-info h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Better tab active indicator */
.member-detail .member-tab-list [role="tab"][aria-selected="true"]::after {
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* Tab hover: more visible */
.member-detail .member-tab-list [role="tab"]:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Biography text: warmer line height */
.member-detail .member-biography .bio-text {
    color: var(--text-secondary);
    line-height: 1.85;
    font-size: 1.05rem;
}

/* Better discography cards hover */
.member-detail .member-album-card:hover .member-album-cover {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.member-detail .member-album-title {
    color: var(--text-primary);
}

.member-detail .member-album-year {
    color: var(--text-muted);
}

/* Other members section: better spacing */
.member-detail .other-members {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Other members: hide scrollbar on hover, show scroll hint */
.member-detail .other-members-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(220, 38, 38, 0.3) transparent;
    padding-bottom: 1rem;
}

.member-detail .other-members-grid::-webkit-scrollbar {
    height: 4px;
}

.member-detail .other-members-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
}

.member-detail .other-members-grid::-webkit-scrollbar-thumb {
    background: rgba(220, 38, 38, 0.3);
    border-radius: 2px;
}

/* Other member card: better hover */
.member-detail .other-member-card .other-photo {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.member-detail .other-member-card:hover .other-photo {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.15);
}

.member-detail .other-member-card .other-name {
    color: var(--text-primary);
}

.member-detail .other-member-card .other-role {
    opacity: 0.5;
    color: var(--text-muted);
}

/* ============================================================
   ABOUT PAGE IMPROVEMENTS (Phase 35)
   ============================================================ */

/* Force dark theme for about page */
.about-page {
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.65);
    color: var(--text-primary);
}

/* Hero section */
.about-page .about-hero h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.about-page .about-hero p {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

/* Section headings visibility */
.about-page .about-section h2 {
    color: var(--accent-red, #dc2626);
}

/* Body text */
.about-page .about-section p {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* Quote styling: better presentation */
.about-page .about-quote {
    border-left: 3px solid var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.04);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.75rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* Stats: better visibility */
.about-page .about-stat .stat-label {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

/* Lineup list: make names link-worthy */
.about-page .about-lineup-list li {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 0;
    transition: background 0.2s ease;
}

.about-page .about-lineup-list li strong {
    color: var(--text-primary);
}

/* Lineup list links */
.about-page .about-lineup-list a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(220, 38, 38, 0.3);
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   Phase 35: Concert Map & Video/Events Page Fixes
   ========================================================================== */

/* Concert map: clear Leaflet default divIcon background */
.concert-marker {
    background: none;
    border: none;
}

/* Events page: ensure timeline items animate in even without JS */
@media (prefers-reduced-motion: reduce) {
    .timeline__item {
        opacity: 1;
        transform: none;
    }
}

/* Events page: timeline line visibility fix in light theme */
[data-theme="light"] .timeline__line,
[data-theme="light"] .timeline::before {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.3) 4%,
        rgba(220, 38, 38, 0.15) 50%,
        rgba(220, 38, 38, 0.3) 96%,
        transparent 100%
    );
}

/* Events page: timeline dot visibility in light theme */
[data-theme="light"] .timeline__dot {
    border-color: rgba(220, 38, 38, 0.2);
}

/* Events page: filter buttons dark theme consistency */
.events-filter-btn,
.events-type-btn {
    color: var(--text-secondary);
}

.events-filter-btn.active,
.events-type-btn.active {
    color: var(--text-primary);
}

/* Video page: tabs scrollbar on mobile for accessibility */
.vp-tabs__list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Video page: ensure hero background covers on all viewports */
.vp-hero {
    overflow: hidden;
}

/* Video page: fix stats layout on mobile - prevent wrapping */
@media (max-width: 480px) {
    .vp-hero__stats {
        gap: 0.75rem;
    }
    .vp-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.75rem 0.5rem;
    }
    .vp-stat__number {
        font-size: 1.4rem;
    }
    .vp-stat__label {
        font-size: 0.65rem;
        letter-spacing: 0.03em;
    }
}

.about-page .about-lineup-list a:hover {
    color: var(--accent-red, #dc2626);
    border-color: var(--accent-red, #dc2626);
}

/* Album placeholder in discography tab: dark background */
.member-detail .member-album-cover .album-placeholder {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.15);
}

/* Empty tab state */
.member-detail .member-tab-empty {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive: founder card on small screens */
@media (max-width: 600px) {
    .members-page .member-card.founder {
        grid-column: 1 / -1;
    }
}

/* ========================================
   ARTICLE PAGE QUALITY FIXES (Phase 35)
   ======================================== */

/* Safety net: hide dead Flash/plugin embeds in article content */
.typography-content object,
.typography-content embed,
.typography-content applet {
    display: none;
}

/* Bookmark button in article hero */
.bookmark-btn-wrapper--article {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.bookmark-btn-wrapper--article .bookmark-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bookmark-btn-wrapper--article .bookmark-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.bookmark-btn-wrapper--article .bookmark-btn.bookmarked {
    color: #ff6b9d;
    border-color: rgba(255, 107, 157, 0.3);
    background: rgba(255, 107, 157, 0.08);
}

.bookmark-btn-wrapper--article .bookmark-btn .icon {
    width: 1rem;
    height: 1rem;
}

/* Article detail: improve spacing after TTS reader toolbar */
.article-body-modern [role="toolbar"] {
    margin-bottom: 2rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

/* Article prev/next navigation improvements */
.article-prev-next .prev-next-link {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.article-prev-next .prev-next-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Tone down bento-card hover (was too aggressive with scale) */
.bento-card:hover {
    transform: translateY(-4px);
}

/* Article content: ensure inline Joomla images never overflow */
.typography-content img[style*="width"] {
    max-width: 100%;
}

/* ============================================================
   HOMEPAGE GALLERY SCROLL: Fix white overflow on right edge
   The horizontal scroll container can expose the body's light
   background when scrolled to the end. Fix by ensuring dark
   backgrounds throughout the ancestry chain, and adding a
   right-edge fade mask.
   ============================================================ */

/* Ensure homepage always has a dark background (overrides light theme body bg) */
.homepage {
    background-color: #0a0a0f;
}

/* The featured-content section: dark bg with overflow-x hidden */
.homepage .featured-content {
    background-color: #1a1a1f;
    overflow-x: hidden;
}

/* Gallery scroll container: right-edge fade mask for clean blending */
.homepage .gallery-scroll-modern {
    background: transparent;
    scroll-padding-inline: 1rem;
    mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
    padding-inline-end: 2rem;
}

/* Invisible spacer to ensure scroll-end padding works across browsers */
.homepage .gallery-scroll-modern::after {
    content: '';
    flex: 0 0 1px;
}

/* ============================================================
   GALLERY DETAIL PAGE: Dark theme consistency & polish
   ============================================================ */

/* Gallery page: dark background */
.gallery-page-container {
    background-color: #030303;
}

/* Fix: aurora glow pseudo-elements (140vw) cause horizontal overflow */
.gallery-bg-glow {
    overflow: hidden;
}

/* Masonry grid placeholder: dark */
.photo-masonry-item__placeholder {
    background: #1a1a24;
}

/* Gallery lightbox: dark backdrop and content bg */
.gallery-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.gallery-lightbox {
    background: #0a0a0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gallery cards: dark backgrounds */
.gallery-card {
    background: #12121a;
}

/* Gallery card overlay: readable text */
.gallery-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

/* ============================================================
   ARTICLE PAGE: Force dark theme for article content area
   The article page CSS (articles-extended.css, modern-fixes.css)
   uses hardcoded white text colors designed for dark backgrounds.
   Force the content area dark regardless of OS theme preference.
   ============================================================ */
.article-page-layout {
    background: #0a0a0f;
    color: var(--text-primary);
}

.article-page-layout .article-grid-layout {
    background: #0a0a0f;
}

/* Ensure article body text is readable on dark background */
.article-page-layout .article-body-modern {
    color: var(--text-primary);
}

/* Article prev/next nav: dark background */
.article-page-layout .article-prev-next {
    background: #0a0a0f;
}

/* News/articles listing pages: force dark for bento cards area */
.articles-hero-modern,
.bento-grid,
.controls-modern,
.pagination-modern,
.container.sticky-wrapper {
    color: var(--text-primary);
}

/* News/articles listing: dark background below hero */
.bento-grid {
    background: transparent;
}

/* Ensure article footer/author block readable */
.article-page-layout .article-author-block {
    color: rgba(255, 255, 255, 0.6);
}

/* Related content section: dark */
.article-page-layout .container {
    background: transparent;
}

/* Collapse truly empty paragraphs in article content */
.typography-content p:empty {
    display: none;
}

/* Images in article content: prevent overflow */
.typography-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ========================================
   PHASE 36: MOBILE RESPONSIVE FIXES (375px audit)
   ======================================== */

@media (max-width: 768px) {
    /* --- Track buttons: meet 44px min touch target --- */
    .track-play-btn {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .track-add-to-queue-btn {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .lyrics-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Footer links: meet 44px min touch target --- */
    footer li a,
    .site-footer li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Pagination links: meet 44px min touch target --- */
    .pagination-modern a,
    .pagination-modern span {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Memorial timeline: prevent text overflow --- */
    .timeline-description {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Memorial timeline container: constrain width */
    .memorial-timeline .timeline-content,
    .memorial-timeline .timeline-item {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Header button touch targets for small screens (375px and below) */
@media (max-width: 480px) {
    .theme-toggle-btn,
    .search-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .lang-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Social share bar buttons: meet 44px touch target */
    .social-share-bar__btn {
        width: 44px;
        height: 44px;
    }
}

/* =======================================================
   CLS (Cumulative Layout Shift) Fixes
   Reserve space for dynamically injected content to
   prevent layout shifts after page load.
   ======================================================= */

/* --- Albums page: reserve space for JS-injected filter bar + count --- */
.albums-page-modern .albums-bento-grid {
    /* The album-filters component inserts a toolbar (~56px) and a count line (~28px) above the grid.
       Reserve that space so the grid doesn't jump down when JS runs. */
    scroll-margin-top: 100px;
}

/* Pre-allocate space for the filter bar that album-filters.component.js injects */
.albums-page-modern {
    /* min-height avoids collapse before JS populates filters */
    min-height: 200px;
}

/* The discography-timeline element is empty in HTML and gets content via JS.
   Measured actual rendered height at 1440px: 153px (track 48px + padding 64px + legend ~25px + border 2px).
   Reserve accurate space to prevent 105px+ CLS when JS populates the timeline. */
[data-discography-timeline] {
    min-height: 155px;
    margin-bottom: 1rem;
    contain: layout style;
}

/* The filter bar: server-rendered placeholder shell is populated by JS.
   Measured actual height at 1440px: 72px (padding 1rem * 2 + button row ~36px). */
.album-filters {
    min-height: 72px;
    contain: layout style;
}

/* Count line below filter bar: "Showing X of Y albums".
   Measured actual height: 30px. */
.album-filters__count {
    min-height: 30px;
    contain: layout style;
}

/* Mobile: smaller timeline has reduced padding + track height.
   Filter bar wraps era buttons to a second row on mobile. */
@media (max-width: 768px) {
    [data-discography-timeline] {
        min-height: 120px;  /* padding 1rem+2rem = 48px, track 40px, legend ~20px, border 2px */
    }

    .album-filters {
        min-height: 128px;  /* 2 rows: controls (sort+view) + era buttons wrap */
    }
}

@media (max-width: 480px) {
    [data-discography-timeline] {
        min-height: 105px;  /* track 36px, reduced padding */
    }

    .album-filters {
        min-height: 120px;  /* view toggle hidden at 480px, but era buttons still wrap */
    }
}

/* --- Albums page: album card CLS & LCP optimisation --- */

/* Stable card dimensions: style containment only — layout containment is
   incompatible with CSS subgrid (pages.css @supports block) which needs the
   card's internal rows to participate in the parent grid's row sizing.
   The .magnetic-grid-item.mag-idle selector (cinematic-bundle.css) would
   re-add contain:layout — override it here with matching specificity. */
.album-card-modern,
.album-card-modern.magnetic-grid-item.mag-idle {
    contain: style;
}

/* Skeleton placeholder while images load: subtle shimmer on the background-color
   already set via inline style (dominant_color). The aspect-ratio in pages.css
   reserves the correct space; reinforce it here for specificity. */
.album-card-modern .album-cover {
    aspect-ratio: 1 / 1;
    background: var(--album-skeleton, #1a1a2e);
}

/* Ensure images fill the reserved space without CLS */
.album-card-modern .album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lighten the hover play-icon overlay (was 0.35 opacity background) */
.album-card-modern .album-cover::after {
    background: rgba(0, 0, 0, 0.2);
}

/* --- Gallery detail: photos loaded dynamically into masonry grid --- */
/* NOTE: Gallery detail CLS (~0.28) is partly caused by JS-fetched photos populating
   a CSS columns masonry layout. Mitigated by inline critical CSS in gallery.ejs and
   display:none batching in renderPhotos(). Full fix requires server-side photo rendering. */

/* Gallery card images: aspect-ratio instead of fixed height prevents CLS.
   pages.css sets height:500px which blocks aspect-ratio; override with auto. */
.gallery-card {
    height: auto;
    aspect-ratio: 6 / 5;
    contain: layout style;
    overflow: hidden;
}

.gallery-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Articles page: images without explicit dimensions --- */
.bento-card .card-image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    contain: layout style;
}

.bento-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- News page: same card pattern --- */
.news-card .card-image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    contain: layout style;
}

.news-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Member cards: reserve space for images --- */
.member-card img,
.members-grid img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* --- Breadcrumb: stable height to prevent shifts --- */
.breadcrumb-container {
    min-height: 40px;
    contain: layout style;
}

/* --- Sticky filter/control bars: stable positioning --- */
.sticky-wrapper {
    min-height: 56px;
    contain: layout style;
}

/* --- Page headers with animation: reserve full space immediately --- */
.page-header,
.gallery-page-header,
.articles-hero-modern {
    contain: layout style;
}

/* =======================================================
   LIGHT THEME COMPREHENSIVE FIXES
   Override hardcoded dark-theme colors for [data-theme="light"].
   Scoped under the attribute selector so dark theme is unaffected.
   ======================================================= */

/* --- About Page --- */
/* About page forces dark CSS vars at .about-page - reset them for light theme */
[data-theme="light"] .about-page {
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    color: var(--text-inverse);
}

/* (original about-page rule merged above with variable resets) */

[data-theme="light"] .about-hero h1 {
    color: var(--text-primary);
}

[data-theme="light"] .about-hero p {
    color: var(--text-secondary);
}

[data-theme="light"] .about-section h2 {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .about-section p {
    color: var(--text-primary);
}

[data-theme="light"] .about-stat {
    background: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .about-stat-number {
    color: var(--accent-red);
}

[data-theme="light"] .about-stat-label {
    color: var(--text-inverse);
}

[data-theme="light"] .about-quote,
[data-theme="light"] .about-section blockquote {
    color: var(--text-secondary);
    border-left-color: var(--accent);
    background: var(--bg-tertiary);
}

[data-theme="light"] .about-member-list li {
    color: var(--text-inverse);
}

[data-theme="light"] .about-member-list li strong {
    color: var(--text-inverse);
}

[data-theme="light"] .about-member-list a {
    color: var(--accent-red);
}

/* --- Members Page --- */
[data-theme="light"] .members-page {
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    color: var(--text-primary);
}

[data-theme="light"] .members-page-header h1 {
    color: var(--text-primary);
}

[data-theme="light"] .members-page-header p {
    color: var(--text-secondary);
}

[data-theme="light"] .member-card {
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .member-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .member-card h2 {
    color: var(--text-primary);
}

[data-theme="light"] .member-card .member-role {
    color: var(--accent);
}

[data-theme="light"] .member-card p {
    color: var(--text-secondary);
}

[data-theme="light"] .member-card .member-years {
    color: var(--text-muted);
}

[data-theme="light"] .member-photo-container {
    background: var(--bg-tertiary);
    box-shadow: none;
}

[data-theme="light"] .member-photo-container img {
    filter: none;
}

[data-theme="light"] .member-card:hover .member-photo-container img {
    filter: brightness(1.05);
}

/* --- Member Detail Page --- */
[data-theme="light"] .member-detail {
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    color: var(--text-primary);
}

[data-theme="light"] .member-detail .member-photo-wrapper {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Album Detail Page --- */
[data-theme="light"] .album-tracks {
    background: var(--bg-tertiary);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-tracks h3 {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .track-list {
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--bg-elevated);
}

[data-theme="light"] .track-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .track-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Phase 41 fix: track text invisible in light theme (white-on-white) */
[data-theme="light"] .track-number {
    color: var(--text-muted);
}

[data-theme="light"] .track-title {
    color: var(--text-primary);
}

[data-theme="light"] .track-duration {
    color: var(--text-muted);
}

[data-theme="light"] .track-add-to-queue-btn {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .track-add-to-queue-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .track-item:hover .track-title span {
    color: var(--text-primary);
}

[data-theme="light"] .track-item:hover .track-number {
    color: var(--accent);
}

[data-theme="light"] .album-description {
    color: var(--text-secondary);
}

[data-theme="light"] .album-meta-item {
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="light"] .album-meta-item .meta-value {
    color: var(--text-primary);
}

[data-theme="light"] .lyrics-btn {
    color: var(--text-muted);
}

[data-theme="light"] .track-lyrics {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

[data-theme="light"] .album-controls .btn-secondary {
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

[data-theme="light"] .album-controls .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.25);
}

/* --- News / Articles Page --- */
[data-theme="light"] .news-meta time {
    color: var(--text-muted);
}

[data-theme="light"] .news-category {
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent);
}

[data-theme="light"] .news-title a {
    color: var(--text-primary);
}

[data-theme="light"] .news-title a:hover {
    color: var(--accent);
}

[data-theme="light"] .news-excerpt {
    color: var(--text-secondary);
}

[data-theme="light"] .news-card {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .news-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .news-card-footer {
    color: var(--text-muted);
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .news-page .page-header p {
    color: var(--text-secondary);
}

[data-theme="light"] .filter-tab {
    color: var(--text-secondary);
}

[data-theme="light"] .filter-tab[aria-selected="true"] {
    color: var(--accent);
}

[data-theme="light"] .sort-select {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- Timeline Page --- */
[data-theme="light"] .timeline__card {
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

[data-theme="light"] .timeline__card:hover {
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .timeline__card h3 {
    color: var(--text-primary);
}

[data-theme="light"] .timeline__card p {
    color: var(--text-secondary);
}

[data-theme="light"] .timeline__date {
    color: var(--text-muted);
}

[data-theme="light"] .timeline__year-marker h2 {
    color: var(--text-primary);
}

/* --- Gallery Page --- */
[data-theme="light"] .gallery-page .page-header p {
    color: var(--text-secondary);
}

[data-theme="light"] .gallery-header p {
    color: var(--text-secondary);
}

/* --- Events Page --- */
[data-theme="light"] .events-filter-btn,
[data-theme="light"] .events-type-btn {
    color: var(--text-secondary);
}

[data-theme="light"] .events-filter-btn.active,
[data-theme="light"] .events-type-btn.active {
    color: var(--text-inverse);
}

/* --- Shared: page headers with white text --- */
[data-theme="light"] .page-header h1 {
    color: var(--text-primary);
}

[data-theme="light"] .page-header p {
    color: var(--text-secondary);
}

/* Footer: keep dark regardless of theme */
[data-theme="light"] .site-footer {
    background: rgb(10, 10, 10);
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .site-footer a {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .site-footer a:hover {
    color: var(--text-primary);
}

[data-theme="light"] .footer-bottom {
    color: rgba(255, 255, 255, 0.4);
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* --- Article Detail Page (override forced dark at line ~3953) --- */
[data-theme="light"] .article-page-layout {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .article-page-layout .article-hero-single {
    background: linear-gradient(var(--bg-tertiary) 0%, var(--bg-secondary, #f3f4f6) 100%);
}

[data-theme="light"] .article-page-layout .article-header-content {
    color: var(--text-primary);
}

[data-theme="light"] .article-page-layout .article-meta span,
[data-theme="light"] .article-page-layout .article-meta time {
    color: var(--text-secondary);
}

[data-theme="light"] .article-page-layout .article-grid-layout {
    background: var(--bg-primary);
}

[data-theme="light"] .article-page-layout .article-body-modern {
    color: var(--text-primary);
}

[data-theme="light"] .article-page-layout .typography-content {
    color: var(--text-primary);
}

[data-theme="light"] .article-page-layout .article-prev-next {
    background: var(--bg-primary);
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .article-page-layout .article-author-block {
    color: var(--text-secondary);
}

[data-theme="light"] .article-page-layout h1 {
    color: var(--text-primary);
}

[data-theme="light"] .article-page-layout .container {
    background: transparent;
}

/* --- Articles / News Listing (bento grid override forced dark at line ~3972) --- */
[data-theme="light"] .articles-hero-modern,
[data-theme="light"] .bento-grid,
[data-theme="light"] .controls-modern,
[data-theme="light"] .pagination-modern,
[data-theme="light"] .container.sticky-wrapper {
    color: var(--text-primary);
}

[data-theme="light"] .bento-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

[data-theme="light"] .bento-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .bento-card .card-content {
    color: var(--text-primary);
}

/* Search highlight in article cards */
mark.search-highlight {
    background: rgba(255, 200, 50, 0.25);
    color: #ffe066;
    padding: 0 2px;
    border-radius: 2px;
}
[data-theme="light"] mark.search-highlight {
    background: rgba(255, 200, 0, 0.3);
    color: #92400e;
}

[data-theme="light"] .bento-card .card-title {
    color: var(--text-primary);
}

[data-theme="light"] .bento-card .card-excerpt,
[data-theme="light"] .bento-card .card-meta {
    color: var(--text-secondary);
}

[data-theme="light"] .bento-card .card-category {
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent);
}

/* --- Albums Page: lighten card backgrounds --- */
[data-theme="light"] .album-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-card:hover {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .album-card .album-info h3,
[data-theme="light"] .album-card-modern .album-info h3 {
    color: var(--text-primary);
}

[data-theme="light"] .album-card .album-info .album-meta,
[data-theme="light"] .album-card-modern .album-info .album-meta {
    color: var(--text-secondary);
}

/* --- Album Detail: breadcrumb and meta --- */
[data-theme="light"] .breadcrumb-current {
    color: var(--text-secondary);
}

[data-theme="light"] .album-meta-item {
    color: var(--text-secondary);
}

[data-theme="light"] .meta-icon {
    color: var(--text-muted);
}

/* --- News/Articles Hero Section (need !important to beat inline styles in EJS) --- */
[data-theme="light"] .hero-content p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .controls-modern {
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .search-pill input {
    background: var(--bg-tertiary);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

[data-theme="light"] .search-pill input:focus {
    background: var(--bg-primary);
    border-color: var(--accent);
}

[data-theme="light"] .search-icon {
    color: var(--text-muted);
}

[data-theme="light"] .filter-pill {
    background: var(--bg-tertiary);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .filter-pill:hover,
[data-theme="light"] .filter-pill.active {
    color: var(--text-inverse, #fff);
}

[data-theme="light"] .controls-modern .filter-btn,
[data-theme="light"] .controls-modern .sort-btn {
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .controls-modern .filter-btn.active {
    color: var(--accent);
    border-color: var(--accent);
}

/* Glitch title: use solid dark text instead of gradient in light theme */
[data-theme="light"] .glitch-title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}

/* --- Video Page --- */
[data-theme="light"] .vp-hero {
    background: linear-gradient(var(--bg-tertiary), var(--bg-primary));
}

[data-theme="light"] .vp-hero__title {
    color: var(--text-primary);
}

[data-theme="light"] .vp-hero__subtitle {
    color: var(--text-secondary);
}

[data-theme="light"] .vp-section__header h2 {
    color: var(--text-primary);
}

[data-theme="light"] .vp-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vp-card:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .vp-card__title {
    color: var(--text-primary);
}

[data-theme="light"] .vp-card__meta {
    color: var(--text-secondary);
}

[data-theme="light"] .vp-card__info {
    color: var(--text-primary);
}

[data-theme="light"] .vp-section {
    color: var(--text-primary);
}

/* ========================================
   UX IMPROVEMENTS - Phase 38
   Smooth scrolling, focus styles, nav indicator,
   gallery touch support, theme transition
   ======================================== */

/* --- 1. Smooth Scrolling (respects reduced-motion) --- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- 2. Consistent Focus-Visible Outlines --- */
/* Keyboard-only focus ring across all interactive elements */
:focus-visible {
    outline: 2px solid var(--color-primary, #dc2626);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default outline for mouse/touch users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Buttons and interactive cards get a rounded focus ring */
button:focus-visible,
[role="button"]:focus-visible,
.album-card:focus-visible,
.gallery-category:focus-visible,
.photo-item:focus-visible {
    outline-offset: 3px;
    border-radius: 8px;
}

/* --- 3. Active Nav Link Indicator --- */
/* Subtle bottom bar on the active nav item for wayfinding */
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--accent, #dc2626);
    border-radius: 2px;
    opacity: 0.8;
}

/* --- 4. Gallery Overlay - Partial Visibility for Touch Devices --- */
/* Show a gradient hint at bottom of gallery photos so users know there's info */
@media (hover: none) {
    .photo-overlay {
        transform: translateY(0);
        background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
        padding-top: 3rem;
    }
}

/* On desktop: show a subtle gradient hint even without hover */
@media (hover: hover) {
    .photo-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .photo-item:hover::after {
        opacity: 0;
    }
}

/* --- 5. Theme Switch Transition --- */
/* Smooth color transitions when toggling themes */
body,
.site-header,
.site-footer,
main,
.album-card,
.news-card,
.article-card,
.gallery-category,
.track-item,
.breadcrumb .breadcrumb-list {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* --- 6. Scroll-to-Top Button - Better Player Clearance --- */
/* Ensure the scroll-to-top button sits above the music player */
[data-scroll-top] {
    bottom: calc(220px + 1.5rem);
}

@media (max-width: 768px) {
    [data-scroll-top] {
        bottom: calc(140px + 1rem);
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* --- 7. Active/Playing Track in Playlist Highlight --- */
/* The player's playlist active track */
.smp-track-item.active {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--accent, #dc2626);
    padding-left: calc(1rem - 3px);
}

.smp-track-item.active .smp-track-title {
    color: var(--accent, #dc2626);
    font-weight: 600;
}

/* --- 8. Gallery Card Keyboard Navigation --- */
/* Make gallery category items focusable and navigable */
.gallery-category:focus-within {
    border-color: rgba(255, 51, 102, 0.3);
    box-shadow: 0 0 0 2px rgba(255, 51, 102, 0.2);
}

/* --- 9. Better Link Underline for Article Content --- */
/* Links inside article body get a subtle underline for clarity */
.typography-content a:not(.btn):not([class*="card"]) {
    text-decoration-line: underline;
    text-decoration-color: rgba(220, 38, 38, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.typography-content a:not(.btn):not([class*="card"]):hover {
    text-decoration-color: var(--accent, #dc2626);
}

/* --- 10. Light Theme: UX Improvement Overrides --- */
[data-theme="light"] :focus-visible {
    outline-color: var(--color-primary, #dc2626);
}

[data-theme="light"] .smp-track-item.active {
    background: rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .typography-content a:not(.btn):not([class*="card"]) {
    text-decoration-color: rgba(220, 38, 38, 0.4);
}

[data-theme="light"] .typography-content a:not(.btn):not([class*="card"]):hover {
    text-decoration-color: var(--color-primary, #dc2626);
}

/* ========================================
   NOW-PLAYING INDICATOR - Album Track List
   Highlights the currently playing track
   ======================================== */

.track-item.track-now-playing {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--accent, #dc2626);
    padding-left: calc(0.75rem - 3px);
}

.track-item.track-now-playing .track-number {
    color: var(--accent, #dc2626);
    font-weight: 700;
    position: relative;
}

/* Animated equalizer bars replacing the track number when playing */
.track-item.track-now-playing:not(.track-is-paused) .track-number::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent, #dc2626);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='4' width='2' height='10' rx='1'%3E%3Canimate attributeName='height' values='10;4;8;10' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;10;6;4' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='5' y='2' width='2' height='12' rx='1'%3E%3Canimate attributeName='height' values='12;6;10;12' dur='0.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='2;8;4;2' dur='0.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='5' width='2' height='9' rx='1'%3E%3Canimate attributeName='height' values='9;3;7;9' dur='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='5;11;7;5' dur='1.1s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
    mask-size: 14px 14px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='4' width='2' height='10' rx='1'%3E%3Canimate attributeName='height' values='10;4;8;10' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;10;6;4' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='5' y='2' width='2' height='12' rx='1'%3E%3Canimate attributeName='height' values='12;6;10;12' dur='0.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='2;8;4;2' dur='0.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='5' width='2' height='9' rx='1'%3E%3Canimate attributeName='height' values='9;3;7;9' dur='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='5;11;7;5' dur='1.1s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
    -webkit-mask-size: 14px 14px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* When paused, show a static pause-like indicator */
.track-item.track-now-playing.track-is-paused .track-number {
    opacity: 0.6;
}

.track-item.track-now-playing .track-title span {
    color: var(--accent, #dc2626);
    font-weight: 600;
}

.track-item.track-now-playing .track-play-btn {
    opacity: 1;
    background: var(--accent, #dc2626);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--accent, #dc2626) 35%, transparent);
}

/* Light theme overrides */
[data-theme="light"] .track-item.track-now-playing {
    background: rgba(220, 38, 38, 0.06);
}

/* Mobile: adjust padding for the left border */
@media (max-width: 900px) {
    .track-item.track-now-playing {
        padding-left: calc(0.625rem - 3px);
    }
}

@media (max-width: 600px) {
    .track-item.track-now-playing {
        padding-left: calc(0.5rem - 3px);
    }
}

/* ========================================
   FIX 1: STICKY DESKTOP NAVIGATION
   Disable auto-hide on scroll for desktop.
   Keep the header always visible with a
   glassmorphism effect and scroll shadow.
   ======================================== */

@media (min-width: 1024px) {
    /* Prevent header from hiding on scroll-down */
    .site-header.header-hidden {
        transform: none;
    }

    /* Enhanced glassmorphism on scroll */
    .site-header.scrolled {
        backdrop-filter: blur(16px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 4px 24px rgba(0, 0, 0, 0.4);
    }

    .site-header.scrolled .header-bg {
        background: rgba(8, 8, 12, 0.88);
        backdrop-filter: blur(20px);
    }
}

/* ========================================
   FIX 2: FOOTER READABILITY
   Improve font sizes and contrast for the
   footer at 1440px desktop widths.
   ======================================== */

/* Footer brand section */
.footer-brand h3,
.footer-brand .footer-brand-name {
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.footer-brand p {
    font-size: 0.9375rem;
    color: #b4b4be;
    line-height: 1.7;
}

.footer-brand .footer-years {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Footer nav headings */
.footer-nav h4,
.footer-nav .footer-heading {
    font-size: 1rem;
    color: #d1d5db;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

/* Footer nav links -- larger and better contrast */
.footer-nav a {
    font-size: 0.9375rem;
    color: #a1a1aa;
    line-height: 1.8;
}

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

/* Footer nav list item spacing */
.footer-nav li {
    margin-bottom: 0.625rem;
}

/* Footer bottom bar (match specificity of earlier .site-footer .footer-bottom rule) */
.site-footer .footer-bottom,
.footer-modern .footer-bottom {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-bottom .memory-text {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* Light theme footer overrides (keep dark footer, but improve text) */
[data-theme="light"] .footer-nav a {
    color: rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .footer-nav a:hover {
    color: var(--text-primary);
}

[data-theme="light"] .footer-nav h4,
[data-theme="light"] .footer-nav .footer-heading {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .footer-bottom {
    color: var(--text-muted);
}

/* ========================================
   FIX 3: PWA INSTALL BUTTON POSITIONING
   Move to bottom-right as a non-intrusive
   toast, clear of content and music player.
   ======================================== */

.pwa-install-btn {
    position: fixed;
    bottom: calc(220px + 1rem);
    right: 1.5rem;
    left: auto;
    top: auto;
    z-index: calc(var(--z-header, 1000) + 2);
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    border-radius: 8px;
    background: rgba(20, 20, 28, 0.92);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    max-width: 220px;
}

.pwa-install-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.5);
}

/* On mobile, position above the bottom nav/player */
@media (max-width: 768px) {
    .pwa-install-btn {
        bottom: calc(140px + 1rem);
        right: 1rem;
        font-size: 0.75rem;
        padding: 0.625rem 1rem;
    }
}

/* ========================================
   MOBILE TOUCH TARGET FIXES (44px minimum)
   Phase 39 - Mobile UX Audit
   ======================================== */

/* --- Discography timeline dots: enlarge touch area without changing visual size --- */
@media (max-width: 768px) {
    .discography-timeline__dot {
        /* Keep visual dot small but add touch-friendly hit area */
        position: absolute;
    }

    .discography-timeline__dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        /* Invisible touch target */
    }
}

/* --- Lyrics button: ensure adequate touch target --- */
@media (max-width: 768px) {
    .lyrics-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Album detail track rows: ensure comfortable tap height --- */
@media (max-width: 480px) {
    .track-item {
        min-height: 48px;
    }
}

/* ========================================
   PHASE 39: COMPREHENSIVE LIGHT THEME AUDIT
   Fix contrast/readability issues across all
   pages when [data-theme="light"] is active.
   ======================================== */

/* --- Navigation Header: light glassmorphism --- */
[data-theme="light"] .site-header .header-bg {
    background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .site-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

@media (min-width: 1024px) {
    [data-theme="light"] .site-header.scrolled .header-bg {
        background: rgba(255, 255, 255, 0.92);
    }

    [data-theme="light"] .site-header.scrolled {
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.04),
            0 4px 24px rgba(0, 0, 0, 0.08);
    }
}

/* Desktop nav links: dark text on light header */
[data-theme="light"] .desktop-nav__link {
    color: var(--text-inverse);
}

[data-theme="light"] .desktop-nav__link:hover {
    color: var(--text-inverse);
}

[data-theme="light"] .desktop-nav__link.active,
[data-theme="light"] .desktop-nav__link[aria-current="page"] {
    color: var(--accent, #dc2626);
}

/* Nav brand text */
[data-theme="light"] .site-brand {
    color: var(--text-inverse);
}

[data-theme="light"] .nav-brand-text {
    color: var(--text-inverse);
}

/* Header action buttons */
[data-theme="light"] .theme-toggle-btn,
[data-theme="light"] .search-btn {
    color: var(--text-inverse);
}

[data-theme="light"] .lang-toggle {
    color: var(--text-inverse);
    border-color: rgba(0, 0, 0, 0.15);
}

/* --- Homepage: Override hardcoded dark backgrounds --- */

/* The homepage wrapper forces dark via CSS variables in homepage.css.
   We must reset ALL those variables here so var() references resolve
   to light values, AND set explicit background-color. */
[data-theme="light"] .homepage {
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --border-secondary: rgba(0, 0, 0, 0.08);
    --border-color: rgba(0, 0, 0, 0.08);
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-elevated: #ffffff;
    color-scheme: light;
    background-color: var(--text-primary);
    color: var(--text-inverse);
}

/* Featured content section - explicit color */
[data-theme="light"] .homepage .featured-content {
    background-color: #f9fafb;
}

/* Gallery scroll: no dark mask needed */
[data-theme="light"] .homepage .gallery-scroll-modern {
    mask-image: none;
    -webkit-mask-image: none;
}

/* On-this-day section - explicit colors since homepage.css forces dark vars */
[data-theme="light"] .homepage .on-this-day-section {
    background: #f3f4f6;
}

[data-theme="light"] .homepage .on-this-day-section .on-this-day-label {
    color: #92400e;
}

[data-theme="light"] .homepage .on-this-day-section .on-this-day-date {
    color: var(--accent-red);
}

/* Stats section - explicit colors */
[data-theme="light"] .homepage .stats-section {
    background: #f9fafb;
}

[data-theme="light"] .homepage .stats-section .section-title,
[data-theme="light"] .homepage .stats-section .block-title {
    color: var(--text-primary, #111827);
    text-shadow: none;
}

[data-theme="light"] .stats-section .stat-card,
[data-theme="light"] .homepage .stats-section .stat-card {
    background: var(--bg-primary);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .stats-section .stat-card:hover,
[data-theme="light"] .homepage .stats-section .stat-card:hover {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stats-section .stat-card .stat-number,
[data-theme="light"] .homepage .stats-section .stat-card .stat-number {
    color: var(--accent, #dc2626);
    text-shadow: none;
}

[data-theme="light"] .stats-section .stat-card .stat-label,
[data-theme="light"] .homepage .stats-section .stat-card .stat-label {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .stats-section .stat-card .stat-icon {
    filter: none;
}

/* Memorial section on homepage - must use explicit bg to override
   homepage.css gradient which has .homepage .memorial-section.memorial-modern specificity */
[data-theme="light"] .homepage .memorial-section.memorial-modern,
[data-theme="light"] .memorial-section.memorial-modern {
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 50%, #fef3c7 100%) !important;
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .homepage .memorial-section .block-title,
[data-theme="light"] .homepage .memorial-section h2 {
    color: #92400e;
    text-shadow: none;
}

[data-theme="light"] .homepage .memorial-section p {
    color: #78350f;
}

[data-theme="light"] .homepage .memorial-section blockquote {
    color: #92400e;
    border-left-color: #d97706;
}

[data-theme="light"] .homepage .memorial-section .memorial-link,
[data-theme="light"] .homepage .memorial-section a {
    color: #b45309;
}

[data-theme="light"] .homepage .memorial-section .memorial-link:hover,
[data-theme="light"] .homepage .memorial-section a:hover {
    color: #92400e;
}

/* Date counter on homepage */
[data-theme="light"] .date-counter__box {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .date-counter__digits {
    color: var(--accent, #dc2626);
}

[data-theme="light"] .date-counter__label {
    color: var(--text-secondary, #374151);
}

/* Timeline section on homepage - explicit colors */
[data-theme="light"] .homepage .timeline-section {
    background: #f3f4f6;
    border-top-color: rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .homepage .timeline-section .block-title {
    color: var(--text-inverse);
}

/* Section separator lines - make subtle for light theme */
[data-theme="light"] .homepage .on-this-day-section::before,
[data-theme="light"] .homepage .timeline-section::before,
[data-theme="light"] .homepage .stats-section::before,
[data-theme="light"] .homepage .memorial-section.memorial-modern::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

/* Featured content separator */
[data-theme="light"] .homepage .featured-content::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

/* Homepage section headings and link arrows */
[data-theme="light"] .homepage .section-header h2,
[data-theme="light"] .homepage .block-title {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .homepage .section-header .view-all {
    color: var(--accent, #dc2626);
}

/* Homepage news/article items */
[data-theme="light"] .homepage .news-item-modern {
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .homepage .news-item-modern:hover {
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .homepage .news-item-modern h3 {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .homepage .news-item-modern .news-date {
    color: var(--text-muted);
}

/* On-this-day text */
[data-theme="light"] .homepage .on-this-day-section h3 {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .homepage .on-this-day-section p {
    color: var(--text-secondary, #374151);
}

/* --- Albums Page: album-card-modern --- */
[data-theme="light"] .album-card-modern,
[data-theme="light"] a.album-card-modern {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-card-modern:hover,
[data-theme="light"] a.album-card-modern:hover {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-card-modern .album-info h3 {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .album-card-modern .album-meta {
    color: var(--text-secondary, #374151);
}

/* Albums page header text */
[data-theme="light"] .albums-page-header h1 {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .albums-page-header p {
    color: var(--text-secondary, #374151);
    opacity: 1;
}

/* Album filters */
[data-theme="light"] .album-filters {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-filters .filter-btn {
    color: var(--text-secondary, #374151);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-filters .filter-btn.active {
    color: var(--accent, #dc2626);
    border-color: var(--accent, #dc2626);
}

[data-theme="light"] .album-filters__count {
    color: var(--text-muted);
}

/* Discography timeline chart area */
[data-theme="light"] [data-discography-timeline] {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(0, 0, 0, 0.08);
}

/* --- Contacts Page: fix invisible borders and backgrounds --- */
[data-theme="light"] .contacts-page .contact-item {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contacts-page .contact-item:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .contacts-page .contact-item h3 {
    color: var(--accent, #dc2626);
}

[data-theme="light"] .contacts-page .contact-item p {
    color: var(--text-secondary, #374151);
    opacity: 1;
}

[data-theme="light"] .contacts-page .contacts-page-header h1 {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .contacts-page .contacts-page-header p {
    color: var(--text-secondary, #374151);
    opacity: 1;
}

[data-theme="light"] .contacts-page .social-link {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .contacts-page .social-link:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .contacts-page .contact-form-section {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contacts-page .contact-form-section h3 {
    color: var(--text-primary, #111827);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .contacts-page .contact-form .form-group label {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .contacts-page .contact-form .form-group input,
[data-theme="light"] .contacts-page .contact-form .form-group textarea {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .contacts-page .contact-form .form-group input:focus,
[data-theme="light"] .contacts-page .contact-form .form-group textarea:focus {
    border-color: var(--accent, #dc2626);
    background: var(--bg-elevated, #ffffff);
}

/* --- Guestbook Page: fix invisible borders and backgrounds --- */
[data-theme="light"] .guestbook-form-section {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .guestbook-form-section h3 {
    color: var(--text-primary, #111827);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .guestbook-form .form-group label {
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .guestbook-form .form-group input,
[data-theme="light"] .guestbook-form .form-group textarea {
    background: var(--bg-elevated, #ffffff);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .guestbook-form .form-group input:focus,
[data-theme="light"] .guestbook-form .form-group textarea:focus {
    border-color: var(--accent, #dc2626);
    background: var(--bg-elevated, #ffffff);
}

[data-theme="light"] .guestbook-entry .entry-date {
    color: var(--text-muted);
}

[data-theme="light"] .guestbook-entry .entry-message {
    color: var(--text-secondary, #374151);
}

/* --- Gallery Page: keep intentionally dark (cinematic design) --- */
[data-theme="light"] .gallery-page-container {
    background: #030303;
    color: var(--text-primary);
}

/* --- Article bookmark/share buttons in light mode --- */
[data-theme="light"] .bookmark-btn-wrapper--article .bookmark-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary, #374151);
}

[data-theme="light"] .bookmark-btn-wrapper--article .bookmark-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .bookmark-btn-wrapper--article .bookmark-btn.bookmarked {
    color: var(--accent-red);
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
}

/* Article toolbar (TTS reader) */
[data-theme="light"] .article-body-modern [role="toolbar"] {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Article prev/next navigation */
[data-theme="light"] .article-prev-next .prev-next-link {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .article-prev-next .prev-next-link:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

/* --- Member Detail Page: light override for discography tab --- */
[data-theme="light"] .member-detail .member-album-cover .album-placeholder {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}

[data-theme="light"] .member-detail .member-tab-empty {
    color: var(--text-muted);
}

/* --- PWA Install Button: light theme --- */
[data-theme="light"] .pwa-install-btn {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--text-primary, #111827);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pwa-install-btn:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.4);
}

/* --- Scroll-to-top button: light theme --- */
[data-theme="light"] [data-scroll-top] {
    background: var(--bg-elevated, #ffffff);
    color: var(--text-primary, #111827);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] [data-scroll-top]:hover {
    background: var(--bg-tertiary, #f3f4f6);
    border-color: rgba(0, 0, 0, 0.15);
}

/* --- Mobile Nav Drawer: light theme --- */
[data-theme="light"] .mobile-nav-drawer,
[data-theme="light"] .mobile-menu {
    background: var(--bg-elevated, #ffffff);
    color: var(--text-primary, #111827);
}

[data-theme="light"] .mobile-nav-drawer a,
[data-theme="light"] .mobile-menu a {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .mobile-nav-drawer a:hover,
[data-theme="light"] .mobile-menu a:hover {
    color: var(--accent, #dc2626);
}

/* ========================================
   Phase 41: COMPREHENSIVE LIGHT THEME FIX
   Fix all remaining contrast issues found
   by automated WCAG audit across all pages.
   ======================================== */

/* --- Album Detail: Track list (white text on white bg) --- */
[data-theme="light"] .track-number {
    color: var(--text-muted);
}

[data-theme="light"] .track-title,
[data-theme="light"] .track-title span {
    color: var(--text-inverse);
}

[data-theme="light"] .track-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .track-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .track-item:hover .track-number {
    color: var(--accent-red);
}

[data-theme="light"] .track-item:hover .track-title span {
    color: var(--text-inverse);
}

[data-theme="light"] .track-duration {
    color: var(--text-muted);
}

[data-theme="light"] .track-play-btn {
    color: var(--accent-red);
}

[data-theme="light"] .album-description {
    color: var(--text-inverse);
}

/* --- Article page: breadcrumbs and meta (white on white) --- */
[data-theme="light"] .article-breadcrumbs-modern a {
    color: var(--text-muted);
}

[data-theme="light"] .article-breadcrumbs-modern a:hover {
    color: var(--accent-red);
}

[data-theme="light"] .article-breadcrumbs-modern .breadcrumb-separator {
    color: var(--text-muted);
}

[data-theme="light"] .article-page-layout .article-hero-single .article-header-content h1 {
    color: var(--text-inverse);
}

/* --- Gallery page: intentionally dark, but ensure ALL text is white --- */
[data-theme="light"] .gallery-page-container h1,
[data-theme="light"] .gallery-page-container h2,
[data-theme="light"] .gallery-page-container h3,
[data-theme="light"] .gallery-page-container p,
[data-theme="light"] .gallery-page-container span,
[data-theme="light"] .gallery-page-container .gallery-title-main {
    color: var(--text-primary);
}

[data-theme="light"] .gallery-page-container .stat-value {
    color: #ff6b6b;
}

/* --- News page: category/tag badges contrast --- */
[data-theme="light"] .card-category,
[data-theme="light"] .news-category {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .smart-tag {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

/* --- News page: pagination buttons --- */
[data-theme="light"] .page-btn {
    color: var(--text-inverse);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .page-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-inverse);
}

/* --- Members page: founder badge --- */
[data-theme="light"] .member-founder-label {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

/* --- Footer: ensure text is always readable on dark bg --- */
[data-theme="light"] .site-footer p,
[data-theme="light"] .footer-bottom p {
    color: rgba(255, 255, 255, 0.65);
}

/* --- Player EQ button --- */
[data-theme="light"] .smp-btn {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Skip link contrast --- */
[data-theme="light"] .skip-link {
    color: var(--text-primary);
    background: #dc2626;
}

/* --- Bookmark button on article --- */
[data-theme="light"] .bookmark-btn__label {
    color: var(--text-inverse);
}

/* =====================================================================
   Phase 40: Scroll-Driven Animations (progressive enhancement)
   Only activates in browsers that support animation-timeline: scroll()
   ===================================================================== */

@supports (animation-timeline: scroll()) {
    /* --- Keyframes for scroll-driven reveals --- */
    @keyframes sda-fade-slide-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes sda-scale-in {
        from { opacity: 0; transform: scale(0.95); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* --- Stat counter cards: fade-in + slide-up on scroll --- */
    .stat-card.stat-item-modern {
        animation: sda-fade-slide-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    /* Stagger stat cards */
    .stat-card.stat-item-modern:nth-child(2) { animation-delay: 50ms; }
    .stat-card.stat-item-modern:nth-child(3) { animation-delay: 100ms; }
    .stat-card.stat-item-modern:nth-child(4) { animation-delay: 150ms; }
    .stat-card.stat-item-modern:nth-child(5) { animation-delay: 200ms; }
    .stat-card.stat-item-modern:nth-child(6) { animation-delay: 250ms; }

    /* --- Timeline items: SDA deliberately omitted ---
       Timeline items use IntersectionObserver-based animation (JS) which
       does not cause CLS. Scroll-driven animation here caused CLS because
       it starts items at opacity:0 on initial paint for above-fold items.
       The IntersectionObserver approach in events.ejs handles the reveal. */

    /* --- Album cards: scale-in on homepage and albums page --- */
    .albums-grid-modern .album-card-modern,
    .albums-bento-grid .album-card-modern {
        animation: sda-scale-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    /* --- News items on homepage: fade up --- */
    .news-item-modern {
        animation: sda-fade-slide-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }

    /* --- Bento grid items (articles / news pages) --- */
    .bento-grid > * {
        animation: sda-fade-slide-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
        .stat-card.stat-item-modern,
        .timeline-item,
        .timeline__item,
        .albums-grid-modern .album-card-modern,
        .albums-bento-grid .album-card-modern,
        .news-item-modern,
        .bento-grid > * {
            animation: none;
        }
    }
}

/* =====================================================================
   Phase 40: Container Queries for card grids
   ===================================================================== */

/* Albums bento grid as container */
.albums-bento-grid {
    container-type: inline-size;
    container-name: albums-grid;
}

@container albums-grid (max-width: 500px) {
    .album-card-modern {
        grid-column: span 1;
    }
    .album-card-modern .album-title {
        font-size: 0.85rem;
    }
    .album-card-modern .album-year {
        font-size: 0.75rem;
    }
}

@container albums-grid (min-width: 501px) and (max-width: 800px) {
    .album-card-modern .album-title {
        font-size: 0.95rem;
    }
}

/* Homepage albums grid as container */
.albums-grid-modern {
    container-type: inline-size;
    container-name: hp-albums;
}

@container hp-albums (max-width: 400px) {
    .album-card-modern {
        min-height: 180px;
    }
    .album-card-modern .album-title {
        font-size: 0.85rem;
    }
}

/* ========================================
   Spread-cover fix: album scans that include the spine strip on the left.
   Show the RIGHT side (front cover art) instead of the center seam.
   Applies to albums list, album detail, homepage featured, and related-content.
   ======================================== */
.spread-cover {
    object-position: right center;
}

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

@container news-grid (max-width: 500px) {
    .bento-grid > .bento-item,
    .bento-grid > article {
        grid-column: span 1;
    }
}

@container news-grid (min-width: 501px) and (max-width: 800px) {
    .bento-grid > .bento-item:first-child,
    .bento-grid > article:first-child {
        grid-column: span 2;
    }
}

/* ========================================
   CONTACTS FORM - SUPPRESS :invalid ON
   UNTOUCHED REQUIRED FIELDS
   base.css uses :not(:placeholder-shown) to
   gate :invalid borders, but contacts form
   inputs have no placeholder, so the gate
   fails and all empty required fields get
   a red border on page load. Fix: reset the
   error border and only show it via
   :user-invalid (after actual interaction).
   ======================================== */
.contact-form .form-group:has(input:invalid:not(:placeholder-shown)),
.contact-form .form-group:has(textarea:invalid:not(:placeholder-shown)) {
    --field-border: var(--border-secondary, rgba(255, 255, 255, 0.08));
}

/* Once the user actually touches and leaves a field invalid, show the error */
.contact-form .form-group:has(input:user-invalid),
.contact-form .form-group:has(textarea:user-invalid) {
    --field-border: var(--error, #ef4444);
}

.contact-form .form-group input:user-invalid,
.contact-form .form-group textarea:user-invalid {
    border-color: var(--error, #ef4444);
}

/* ============================================================
   CLS FIX: Scroll-reveal and scroll-hint (Phase 41)
   homepage.css loads async (media="print" trick), so any layout-
   affecting properties it defines can cause CLS. We duplicate
   the critical position/contain rules here (modern-fixes.css
   also loads async, but base.css is sync-loaded).
   ============================================================ */

/* 1. Scroll-hint: ensure it is taken out of flow immediately.
   homepage.css defines position:absolute, but loads async.
   Duplicate the critical rule here AND in base.css-level inline
   style (see index.ejs). Belt-and-suspenders approach. */
.hero-section .scroll-hint,
.hero-modern .scroll-hint {
    position: absolute;
    contain: layout style;
}

/* 2. data-reveal elements: use will-change so the browser
   promotes them to their own compositor layer. The translateY
   offset then never triggers a layout-shift because the element
   already occupies its full box in the flow. */
/* Phase 97: changed contain:layout style to contain:style only.
   contain:layout was preventing homepage sections from expanding
   to fit their content, making them appear as invisible dark boxes. */
[data-reveal] {
    will-change: transform, opacity;
    contain: style;
}

/* After reveal completes, remove will-change to free GPU memory */
[data-reveal].revealed {
    will-change: auto;
}

/* 3. On This Day section: reserve minimum height so dynamic
   content insertion does not push subsequent sections down.
   Typical rendered height is ~120-160px on desktop, ~140-180px on mobile. */
.homepage .on-this-day-section {
    min-height: 120px;
    contain: layout style;
}

/* 4. Content blocks with scroll-reveal: ensure they don't shift
   by containing their layout. */
.homepage .content-block.scroll-reveal,
.homepage .stats-section.scroll-reveal,
.homepage .memorial-section.scroll-reveal,
.homepage .timeline-section.scroll-reveal {
    contain: layout style;
}

@media (max-width: 768px) {
    .homepage .on-this-day-section {
        min-height: 140px;
    }
}

/* =====================================================================
   Phase 41: Guestbook & Events page improvements
   ===================================================================== */

/* --- Guestbook: light theme overrides --- */
[data-theme="light"] .guestbook-form-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .guestbook-form-section::before {
    background: linear-gradient(90deg, var(--accent-red, #dc2626), rgba(220, 38, 38, 0.2));
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
    border-color: var(--accent-red, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .guestbook-entry {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .guestbook-entry:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .entry-message {
    opacity: 0.75;
}

[data-theme="light"] .form-message.success {
    background: rgba(34, 197, 94, 0.06);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="light"] .form-message.error {
    background: rgba(239, 68, 68, 0.06);
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .page-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}

[data-theme="light"] .no-content {
    color: var(--text-secondary);
}

/* --- Events page: hero section light theme --- */
[data-theme="light"] .events-hero {
    background: linear-gradient(135deg, #fff5f5, #fef2f2, #fff);
}

[data-theme="light"] .events-hero__title {
    color: var(--text-primary);
}

[data-theme="light"] .events-hero__subtitle {
    color: var(--text-secondary);
}

[data-theme="light"] .events-hero__badge {
    color: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .events-hero__stat-value {
    color: var(--text-primary);
}

[data-theme="light"] .events-hero__stat-label {
    color: var(--text-secondary);
}

/* --- Events page: timeline section heading --- */
.events-timeline h2 {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 2rem;
}

/* --- Events page: memorial card emphasis --- */
.timeline__card--memorial {
    border-left: 3px solid rgba(220, 38, 38, 0.5);
}

[data-theme="light"] .timeline__card--memorial {
    border-left-color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.03);
}

/* --- Events page: concert cards link styling --- */
.timeline__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-red, #dc2626);
    text-decoration: none;
    transition: opacity 0.2s;
}

.timeline__link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* --- Events page: decade marker emphasis --- */
.timeline__decade-marker {
    position: relative;
    z-index: 2;
}

.timeline__decade-label {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.06em;
}

/* --- Events page: CLS fix for timeline items (Phase 43)
   pages.css sets opacity:0 + translateY(30px) as initial state, causing CLS.
   Fix 1: Override to opacity:1 / transform:none so items are visible by default.
   Fix 2: SDA block above uses fill-mode:forwards (not both) so the "from" keyframe
          (opacity:0) is NOT applied before the element enters the animation range.
   Result: Items are visible immediately, then animate as they scroll into view.
   --- */
.timeline__item {
    opacity: 1;
    transform: none;
    transition: none;
}

/* --- Guestbook mobile: stacked form row already handled in inline CSS --- */
/* Additional mobile polish for guestbook */
@media (max-width: 600px) {
    .guestbook-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .guestbook-form-section {
        padding: 1.25rem;
    }

    .guestbook-entry {
        padding: 1rem 1.125rem;
    }
}

/* ========================================
   ACCESSIBILITY: FOCUS-VISIBLE INDICATORS
   WCAG 2.1 AA - 2.4.7 Focus Visible
   ======================================== */

/* Global focus-visible: high-contrast outline on all interactive elements.
   Uses :focus-visible so mouse clicks keep the UI clean, keyboard-only gets
   a strong 2px red outline with 2px offset. */
:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Remove default focus ring on mouse click (let focus-visible handle it) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure skip-link and skip-link-player are accessible and visible on focus */
.skip-link:focus,
.skip-link-player:focus {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 0;
}

.skip-link-player {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    padding: 0.75rem 1.5rem;
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link-player:focus {
    top: 0;
}

/* Navigation links: ensure focus outline is visible */
.desktop-nav__link:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons: consistent focus ring */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.submit-btn:focus-visible,
.filter-pill:focus-visible,
.page-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Music player controls: visible focus */
.smp-btn:focus-visible,
.smp-track-item:focus-visible,
.smp-track-remove:focus-visible,
.smp-track-share:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Album and gallery cards: visible focus ring */
.album-card:focus-visible,
.album-card-modern:focus-visible,
.gallery-card:focus-visible,
.photo-masonry-item:focus-visible,
.member-card:focus-visible,
.bento-card:focus-visible,
.news-item-modern:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Form controls: ensure visible focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Scroll-to-top button focus */
.scroll-to-top-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Theme toggle button focus */
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Search button focus */
.search-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Language switcher focus */
.language-switcher button:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Gallery lightbox navigation focus */
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__nav:focus-visible,
.gallery-lightbox__action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* High contrast mode adjustments */
@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid ButtonText;
    }
}

/* ========================================
   ACCESSIBILITY: SCREEN READER UTILITIES
   ======================================== */

/* Ensure .sr-only class exists for screen-reader-only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   ACCESSIBILITY: REDUCED MOTION
   WCAG 2.1 AA - 2.3.3 Animation from Interactions
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-reveal,
    .scroll-reveal-scale,
    .scroll-reveal-left,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   GALLERY PAGE IMPROVEMENTS (Phase 41)
   ======================================== */

/* Gallery card hover: smoother, more refined interaction */
.gallery-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(220, 38, 38, 0.2);
}

.gallery-card:active {
    transform: translateY(-2px) scale(0.99);
}

/* Gallery card image: subtle zoom on hover */
.gallery-card-bg {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s ease;
}

.gallery-card:hover .gallery-card-bg {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Gallery card overlay: gradient enhancement on hover */
.gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 100%
    );
    transition: background 0.4s ease;
}

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

/* Gallery card title: subtle shift on hover */
.gallery-card-title {
    transition: transform 0.3s ease, color 0.3s ease;
}

.gallery-card:hover .gallery-card-title {
    transform: translateY(-2px);
    color: var(--accent-red, #dc2626);
}

/* Gallery card photo count: accent on hover */
.gallery-card-count {
    transition: color 0.3s ease;
}

.gallery-card:hover .gallery-card-count {
    color: rgba(220, 38, 38, 0.9);
}

/* Photo masonry items: refined hover */
.photo-masonry-item {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
    cursor: pointer;
}

.photo-masonry-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Photo overlay: visible on hover with transition */
.photo-masonry-item__overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 0.75rem;
    pointer-events: none;
}

.photo-masonry-item:hover .photo-masonry-item__overlay {
    opacity: 1;
}

/* Photo masonry image: slight zoom on hover */
.photo-masonry-item__img {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-masonry-item:hover .photo-masonry-item__img {
    transform: scale(1.03);
}

/* Photo name/description in overlay */
.photo-masonry-item__name {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.photo-masonry-item__desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.2rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Lightbox image: larger on desktop */
@media (min-width: 1024px) {
    .gallery-lightbox__image {
        max-width: 92vw;
        max-height: calc(100vh - 100px);
    }
    .gallery-lightbox__image-wrap {
        max-width: 92vw;
        max-height: calc(100vh - 100px);
    }
}

/* Gallery detail header improvements */
.gallery-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-header #back-btn {
    flex-shrink: 0;
}

/* Light theme gallery adjustments */
[data-theme="light"] .gallery-card {
    background: #f5f5f5;
}

[data-theme="light"] .gallery-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .photo-masonry-item__name {
    color: var(--text-primary);
}

/* Mobile gallery improvements */
@media (max-width: 768px) {
    .gallery-card {
        aspect-ratio: 16/10;
    }

    .gallery-card-overlay {
        padding: 1.5rem 1rem;
    }

    .photo-masonry-item__overlay {
        /* Always show overlay on touch devices */
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
        padding: 1rem 0.75rem 0.5rem;
    }
}

/* =====================================================================
   Phase 41: Mobile UX Audit Fixes (375x812 viewport)
   ===================================================================== */

/* --- Fix 1: Nav logo touch target too small (was 136x13px, need 44px min) --- */
@media (max-width: 768px) {
    .nav-brand .brand-name,
    .site-name {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Fix 2: Track play button touch target (visual 34px, touch area 44px) --- */
@media (max-width: 768px) {
    .track-play-btn {
        position: relative;
        /* Keep visual size at 34px but expand touch area */
        min-width: 44px;
        min-height: 44px;
        /* Visual circle stays 34px via the background */
        width: 34px;
        height: 34px;
        /* Expand tap area with padding */
        padding: 5px;
        margin: -5px;
    }
}

/* --- Fix 3: Scroll-to-top button too small (was 35x35px) --- */
@media (max-width: 768px) {
    .scroll-top-btn,
    #scrollTopBtn,
    [aria-label*="Наверх"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- Fix 4: Albums grid 2 columns on small mobile --- */
@media (max-width: 480px) {
    .albums-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .albums-bento-grid .album-card-modern .album-title {
        font-size: 0.8rem;
    }

    .albums-bento-grid .album-card-modern .album-year {
        font-size: 0.7rem;
    }
}

/* --- Fix 5: Discography timeline chart right edge clipping --- */
@media (max-width: 480px) {
    .discography-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
}

/* --- Fix 6: Homepage gallery photo count badges too small (12px) --- */
@media (max-width: 768px) {
    .gallery-preview .photo-count,
    .gallery-card .photo-count,
    .gallery-item .photo-count {
        font-size: 0.875rem;
        min-width: 1.75rem;
        min-height: 1.75rem;
    }
}

/* ─── Album share bar ──────────────────────────────────────────────────────── */
.album-share-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.album-share-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #9ca3af);
    margin-right: 0.25rem;
}

.album-share-buttons .album-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0;
    line-height: 0;
}

.album-share-buttons .album-share-btn:hover {
    background: var(--accent, #dc2626);
    border-color: var(--accent, #dc2626);
    color: var(--text-primary);
}

.album-share-buttons .album-share-btn.copied {
    background: #16a34a;
    border-color: #16a34a;
    color: var(--text-primary);
}

/* Light theme overrides */
[data-theme="light"] .album-share-buttons .album-share-btn {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .album-share-buttons .album-share-btn:hover {
    background: var(--accent, #dc2626);
    border-color: var(--accent, #dc2626);
    color: var(--text-primary);
}

/* ─── Footer social links ──────────────────────────────────────────────────── */
.footer-social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.footer-social-link:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--accent, #dc2626);
}

.footer-social-link svg {
    flex-shrink: 0;
}

[data-theme="light"] .footer-social-link {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .footer-social-link:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--accent, #dc2626);
}

/* =====================================================================
   Phase 45: Light Theme Audit Fixes
   Targeted fixes for elements that remain dark in light mode.
   All overrides use [data-theme="light"] prefix.
   Never edit homepage.css or pages.css directly.
   ===================================================================== */

/* -------------------------------------------------------------------
   1. Video page: .vp-hero__bg is an absolutely-positioned div with a
      hardcoded dark-red gradient in pages.css. Override it in light mode.
   ------------------------------------------------------------------- */
[data-theme="light"] .vp-hero__bg {
    background: linear-gradient(135deg, var(--bg-tertiary, #f3f4f6) 0%, var(--bg-primary, #ffffff) 70%) !important;
    opacity: 0.9;
}

[data-theme="light"] .vp-hero__bg::after {
    opacity: 0;
}

/* Video stat boxes in the hero */
[data-theme="light"] .vp-stat {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .vp-stat strong {
    color: var(--text-primary);
}

/* Tab navigation on video page */
[data-theme="light"] .vp-tabs {
    background: var(--bg-secondary);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .vp-tab {
    color: var(--text-secondary);
}

[data-theme="light"] .vp-tab.active,
[data-theme="light"] .vp-tab[aria-selected="true"] {
    color: var(--text-primary);
}

/* (Removed: duplicate light-theme .album-header / ::before / ::after — Phase 49 below has final values) */

/* Ensure album title text is readable on the lighter background */
[data-theme="light"] .album-info h1 {
    background: linear-gradient(135deg, #111827 0%, #374151 50%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .album-info .album-description {
    color: var(--text-primary);
}

[data-theme="light"] .album-meta-item {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

/* -------------------------------------------------------------------
   3. Album interactions / comments area — has hardcoded dark background
      in modern-fixes.css itself (rgba(20,20,28,0.5)).
   ------------------------------------------------------------------- */
[data-theme="light"] .album-interactions {
    background: var(--bg-secondary, #f9fafb);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .comments-section h2 {
    color: var(--text-primary);
}

/* -------------------------------------------------------------------
   4. Music player bar (.smp-player) — fixed at bottom, uses hardcoded
      dark background rgba(10,10,10,0.95) and white text in features.css.
      Override for light mode with a white frosted-glass look.
   ------------------------------------------------------------------- */
[data-theme="light"] .smp-player {
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.06);
    color: var(--text-inverse);
}

/* Main controls row border */
[data-theme="light"] .smp-main-controls {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Track title and artist */
[data-theme="light"] .smp-title {
    color: var(--text-inverse);
}

[data-theme="light"] .smp-artist {
    color: var(--text-muted);
}

/* Control buttons */
[data-theme="light"] .smp-btn {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-inverse);
}

[data-theme="light"] .smp-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-inverse);
}

/* Album art placeholder bg */
[data-theme="light"] .smp-art {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Time display */
[data-theme="light"] .smp-time {
    color: var(--text-muted);
}

/* Mini bar (collapsed) */
[data-theme="light"] .smp-mini-bar {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .smp-mini-title {
    color: var(--text-inverse);
}

/* Playlist rows */
[data-theme="light"] .smp-playlist {
    background: rgba(0, 0, 0, 0.02);
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .smp-track-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
    color: var(--text-inverse);
}

[data-theme="light"] .smp-track-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .smp-track-name {
    color: var(--text-inverse);
}


/* =====================================================================
   End Phase 45
   ===================================================================== */

/* =====================================================================
   Gallery CLS Fix: SSR-rendered photos must not animate on first paint.
   The photoItemAppear keyframe starts at translateY(16px) scale(0.97)
   which causes layout shift as items animate into position after paint.
   When photos are SSR-rendered (photo-grid--ssr class), suppress the
   entrance animation entirely — items are already in the correct position.
   JS-inserted photos (no .photo-grid--ssr on parent) still get animation.
   ===================================================================== */
.photo-grid--ssr .photo-masonry-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* =====================================================================
   Phase 44: Mobile UX Audit Fixes (375px viewport)
   All overrides go here — never edit homepage.css / pages.css directly.
   ===================================================================== */

/* -------------------------------------------------------------------
   1. Homepage: Album cards grid — convert horizontal scroll to 2-col
      wrap on mobile so all 3 cards are visible without scrolling.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Featured albums strip on homepage */
    .homepage .featured-content .albums-grid-modern,
    .homepage .albums-grid-modern {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        gap: 0.75rem;
        padding-bottom: 0;
    }

    .homepage .albums-grid-modern .album-card-modern {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex-shrink: unset;
    }
}

/* -------------------------------------------------------------------
   2. Homepage: Gallery preview — convert horizontal scroll to 2-col
      grid so all 4 photos fit without horizontal overflow.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .homepage .gallery-scroll-modern,
    .homepage .gallery-preview.gallery-scroll-modern {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        gap: 0.5rem;
        padding-bottom: 0;
        /* Reset horizontal-scroll specific properties */
        -webkit-overflow-scrolling: unset;
        scroll-snap-type: none;
    }

    .homepage .gallery-scroll-modern .gallery-photo-item,
    .homepage .gallery-scroll-modern a {
        width: 100%;
        min-width: 0;
        flex-shrink: unset;
        aspect-ratio: 4 / 3;
    }
}

/* -------------------------------------------------------------------
   3. Homepage: "See all" links (Все альбомы, Все статьи, etc.)
      Enlarge touch target to minimum 44px height.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .homepage .section-header .view-all,
    .homepage .view-all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* -------------------------------------------------------------------
   4. Albums page: Era filter buttons — ensure 44px minimum height.
      The existing mobile rule shrinks padding too aggressively.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .album-filters__era-btn {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* -------------------------------------------------------------------
   5. Albums page: View-toggle buttons (grid/list) — enlarge to 44px.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .album-filters__view-btn {
        width: 44px;
        height: 44px;
    }
}

/* -------------------------------------------------------------------
   6. Albums page: Discography timeline — ensure the container clips
      properly at 375px. The inner track is min-width:600px and the
      outer container has overflow-x:auto, but the container itself
      must not exceed the viewport width.
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
    .discography-timeline {
        max-width: 100%;
        /* Ensure the container itself doesn't overflow the page */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [data-discography-timeline] {
        overflow: hidden;
        max-width: 100%;
    }
}

/* -------------------------------------------------------------------
   7. Articles / News page: Filter pills — allow wrapping so pills
      are visible without hidden horizontal scroll, and meet 44px.
      Note: articles-extended.css loads AFTER modern-fixes.css (it's
      injected by the EJS template), so we need !important here to
      win the cascade for the flex-wrap and overflow properties.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .filter-pills {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.5rem;
        padding-bottom: 0;
    }

    .filter-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
    }
}

/* -------------------------------------------------------------------
   8. PWA install button — ensure 44px minimum height on mobile.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pwa-install-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* -------------------------------------------------------------------
   9. 320px (iPhone SE) safety net — prevent any residual overflows
      and ensure body itself never gets horizontal scroll.
   ------------------------------------------------------------------- */
@media (max-width: 375px) {
    /* Tighten album grid to single column on the narrowest phones */
    .homepage .albums-grid-modern,
    .homepage .featured-content .albums-grid-modern {
        grid-template-columns: 1fr;
    }

    .homepage .gallery-scroll-modern,
    .homepage .gallery-preview.gallery-scroll-modern {
        grid-template-columns: 1fr;
    }

    /* Section headers: wrap text and keep full-width layout */
    .homepage .section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* =====================================================================
   End Phase 44
   ===================================================================== */

/* =====================================================================
   Phase 45 — Accessibility & Performance Fixes
   ===================================================================== */

/* Profile page: stat numbers use <p class="stat-number"> instead of <h3>
   Match the visual style that was on h3 */
.profile-page .stat-number {
    font-size: 2.5rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, var(--accent-red, #dc2626), #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* fallback for browsers without background-clip: text */
}

.profile-page .stat-label {
    color: var(--text-muted);
    margin: 0;
}

/* Profile tabpanel: honour the HTML `hidden` attribute for non-active panels
   (overrides any .tab-content display:block that may exist) */
.profile-page [role="tabpanel"][hidden] {
    display: none !important;
}

/* =====================================================================
   End Phase 45
   ===================================================================== */

/* =====================================================================
   Phase 46: Search Modal Light Theme
   ===================================================================== */

/* Main search modal container */
[data-theme="light"] .sme-container {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

/* Header border */
[data-theme="light"] .sme-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Search icon color */
[data-theme="light"] .sme-search-icon {
    color: rgba(0, 0, 0, 0.35);
}

/* Input field */
[data-theme="light"] .sme-input {
    color: var(--text-inverse);
}
[data-theme="light"] .sme-input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* Esc keyboard hint */
[data-theme="light"] .sme-kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.4);
}

/* Close button */
[data-theme="light"] .sme-close-btn {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .sme-close-btn:hover {
    color: var(--text-inverse);
    background: rgba(0, 0, 0, 0.06);
}

/* Category tabs */
[data-theme="light"] .sme-tab {
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .sme-tab:hover {
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--text-inverse);
}
/* Active tab stays red - no override needed */

/* Scrollbar in body */
[data-theme="light"] .sme-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sme-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Results count */
[data-theme="light"] .sme-results-count {
    color: rgba(0, 0, 0, 0.4);
}

/* Group label and count */
[data-theme="light"] .sme-group-label {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sme-group-count {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.4);
}

/* Result items */
[data-theme="light"] .sme-result {
    color: var(--text-inverse);
}
[data-theme="light"] .sme-result:hover,
[data-theme="light"] .sme-result.selected {
    background: rgba(220, 38, 38, 0.07);
}
[data-theme="light"] .sme-result-icon {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sme-result.selected .sme-result-icon,
[data-theme="light"] .sme-result:hover .sme-result-icon {
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent-red, #dc2626);
}
[data-theme="light"] .sme-result-desc {
    color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .sme-result-meta {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .sme-result-arrow {
    color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .sme-result:hover .sme-result-arrow,
[data-theme="light"] .sme-result.selected .sme-result-arrow {
    color: var(--accent-red, #dc2626);
}

/* Idle state */
[data-theme="light"] .sme-idle-icon {
    color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .sme-idle-text {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sme-idle-shortcut {
    color: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .sme-idle-shortcut kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Recent searches */
[data-theme="light"] .sme-recent-title {
    color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .sme-recent-clear {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .sme-recent-item {
    color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .sme-recent-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-inverse);
}
[data-theme="light"] .sme-recent-icon {
    color: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .sme-recent-arrow {
    color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .sme-recent-item:hover .sme-recent-arrow {
    color: rgba(0, 0, 0, 0.5);
}

/* Loading state */
[data-theme="light"] .sme-spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--accent-red, #dc2626);
}
[data-theme="light"] .sme-loading-text {
    color: rgba(0, 0, 0, 0.45);
}

/* Empty state */
[data-theme="light"] .sme-empty-icon {
    color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .sme-empty-title {
    color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .sme-empty-hint {
    color: rgba(0, 0, 0, 0.35);
}

/* Footer */
[data-theme="light"] .sme-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .sme-footer-hints {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .sme-footer-hints kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   End Phase 46
   ===================================================================== */

/* =====================================================================
   Phase 49: Album Detail Page Improvements
   - Reduced top padding (was clamp(6rem,10vw,10rem), too much dead space)
   - Prev/next album navigation
   - Light theme album header fix
   - CLS fix for bookmark button (reserve space)
   ===================================================================== */

/* (Removed: duplicate .album-detail-page padding — overridden by Phase 45 desktop UX audit below) */

/* --- Prev/Next Album Navigation --- */
.album-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.album-nav-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.album-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.album-nav-link img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.album-nav-next {
    flex-direction: row-reverse;
    text-align: right;
}

.album-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    overflow: hidden;
}

.album-nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    white-space: nowrap;
}

.album-nav-title {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-nav-disabled {
    visibility: hidden;
    pointer-events: none;
}

.album-nav-center {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* Mobile: stack nav vertically */
@media (max-width: 600px) {
    .album-navigation {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .album-nav-center {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: center;
        justify-self: center;
    }

    .album-nav-link img {
        width: 36px;
        height: 36px;
    }

    .album-nav-title {
        font-size: 0.8rem;
    }
}

/* Light theme album navigation */
[data-theme="light"] .album-navigation {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-nav-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .album-nav-link:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

[data-theme="light"] .album-nav-label {
    color: var(--text-muted);
}

/* Light theme album header: ensure blurred bg has some fallback */
[data-theme="light"] .album-header::before {
    filter: blur(40px) saturate(1.5) brightness(0.7);
}

[data-theme="light"] .album-header::after {
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(240, 240, 248, 0.75) 70%),
        linear-gradient(180deg, rgba(240, 240, 248, 0.55) 0%, rgba(240, 240, 248, 0.9) 100%);
}

[data-theme="light"] .album-info h1 {
    color: rgba(0, 0, 0, 0.88);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .album-meta-item {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .album-header {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Reserve space for bookmark button to prevent CLS.
   bookmarks.component.js injects a .bookmark-btn into .album-info after load. */
.album-info::after {
    content: '';
    display: block;
    height: 0;
    /* space-reservation handled by min-height on the bookmark wrapper */
}

/* =====================================================================
   Phase 50 - Article Page CLS Fixes & i18n
   ===================================================================== */

/* Reserve space for JS-populated prev/next navigation to prevent CLS.
   Height approximation: two nav links at ~90px each = ~185px. */
.article-prev-next:empty {
    min-height: 185px;
    contain: layout style;
}

/* Reserve space for related content section to prevent CLS.
   Approximate 4 cards at 2 rows with header ~= 550px. */
#related-content-article:has(.related-content--loading),
#related-content-article:empty {
    min-height: 500px;
    contain: layout style;
}

/* Article list: fix ==text== markers visible if JS clean-up hasn't fired */
.card-excerpt {
    /* The EJS template should strip ==...== but guard with CSS word-break */
    word-break: break-word;
}

/* Light theme: article page hero background */
[data-theme="light"] .article-page-layout {
    background: var(--bg-primary, #f8f8f8);
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .article-body-modern,
[data-theme="light"] .typography-content {
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .article-hero-single {
    background: #222;
}

/* =====================================================================
   End Phase 50
   ===================================================================== */

/* =====================================================================
   Phase 51 – Member pages light theme completeness fixes
   ===================================================================== */

/* Members list: member name is hardcoded #fff — override in light mode */
[data-theme="light"] .members-page .member-name {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .members-page .member-years {
    color: var(--text-muted, #6b7280);
    opacity: 1;
}

[data-theme="light"] .members-page .member-card.founder {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    border-color: rgba(220, 38, 38, 0.15);
}

/* Member detail: dark variables overriding light theme */
[data-theme="light"] .member-detail {
    --text-primary: #111827;
    --text-secondary: #374151;
    color: var(--text-primary);
}

[data-theme="light"] .member-detail .member-info h1 {
    color: var(--text-primary, #111827);
    text-shadow: none;
}

[data-theme="light"] .member-detail .member-tab-list [role="tab"] {
    color: var(--text-muted);
}

[data-theme="light"] .member-detail .member-tab-list [role="tab"][aria-selected="true"] {
    color: var(--text-inverse);
}

[data-theme="light"] .member-detail .member-tab-list [role="tab"]:hover {
    color: var(--text-inverse);
}

[data-theme="light"] .member-detail .member-biography .bio-text {
    color: var(--text-inverse);
}

[data-theme="light"] .member-detail .member-album-title {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .member-detail .member-album-year {
    color: var(--text-muted);
}

[data-theme="light"] .member-detail .other-members {
    border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .member-detail .other-member-card .other-name {
    color: var(--text-primary, #111827);
}

[data-theme="light"] .member-detail .other-member-card .other-role {
    color: var(--text-muted);
    opacity: 1;
}

[data-theme="light"] .member-detail .other-member-card .other-photo {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .member-detail .member-photo-wrapper img {
    filter: none;
}

/* Member detail back link */
[data-theme="light"] .member-back {
    color: var(--text-muted);
}

[data-theme="light"] .member-back:hover {
    color: var(--accent-red, #dc2626);
}

/* =====================================================================
   End Phase 51
   ===================================================================== */

/* =====================================================================
   VIDEO PAGE: Sticky tabs offset fix
   .vp-tabs uses position:sticky; top:0 in pages.css, but .site-header
   is position:fixed, so the sticky tab bar slides under the nav when
   the user scrolls. Fix: shift sticky top by the header height.
   ===================================================================== */

.vp-tabs {
    top: var(--header-height, 80px);
}


/* =====================================================================
   Phase 53 – Articles list page CLS fixes
   Root cause: .bento-grid > * scroll-driven animation uses translateY(20px)
   which shifts above-fold cards on initial paint, causing CLS > 0.2.
   Fix: Override bento-grid items to use opacity-only fade (no positional shift).
   Also removed the inline animation-delay from articles.ejs bento cards
   as it conflicted with the scroll-driven animation-timeline.
   ===================================================================== */

@supports (animation-timeline: scroll()) {
    /* Override Phase 40's bento-grid scroll animation:
       use opacity-only fade so no layout shifts occur on above-fold cards.
       Start at 0.8 (not 0.35) so pre-animation cards are clearly visible
       even before they scroll into view — fixes near-invisible card bug. */
    .bento-grid > * {
        animation: sda-bento-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    @keyframes sda-bento-fade {
        from { opacity: 0.8; }
        to   { opacity: 1; }
    }

    /* Respect reduced-motion: no animation at all */
    @media (prefers-reduced-motion: reduce) {
        .bento-grid > * {
            animation: none;
        }
    }
}

/* =====================================================================
   End Phase 53
   ===================================================================== */

/* =====================================================================
   HOMEPAGE 2026 IMPROVEMENTS (Phase 44)
   - Hero quick-play button
   - Album card quick-play overlay
   - Latest Album Showcase section
   - Guestbook Teaser section
   ===================================================================== */

/* ---- Hero Quick-Play Button ---- */
.hero-quick-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ff3366;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.hero-quick-play-btn:hover {
    background: #e62958;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 51, 102, 0.4);
}

.hero-play-icon {
    display: inline-flex;
    align-items: center;
}

/* ---- Album Card Quick-Play Overlay ---- */
.album-card-modern {
    position: relative;
}

.album-card-quick-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 64px;
    height: 64px;
    background: rgba(255, 51, 102, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    z-index: 5;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    /* Ensure this sits above album cover but below the info overlay */
}

.album-card-quick-play svg,
.album-card-quick-play img {
    width: 28px;
    height: 28px;
    /* Push play icon slightly right to optically center it */
    margin-left: 3px;
    filter: brightness(0) invert(1);
}

.album-card-modern:hover .album-card-quick-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.album-card-quick-play:hover {
    background: #ff3366;
    box-shadow: 0 8px 28px rgba(255, 51, 102, 0.5);
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* ---- Latest Album Showcase ---- */
.latest-album-showcase {
    padding: 3.5rem 0;
    background: linear-gradient(135deg,
        rgba(255, 51, 102, 0.06) 0%,
        rgba(10, 10, 15, 0) 60%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.latest-album-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    row-gap: 0.5rem;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.latest-album-badge {
    grid-column: 1 / -1;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #ff3366;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(255, 51, 102, 0.4);
    border-radius: 100px;
    width: fit-content;
}

.latest-album-cover-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}

.latest-album-cover {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    display: block;
}

.latest-album-cover.spread-cover {
    object-position: right center;
}

.latest-album-play-btn {
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 56px;
    height: 56px;
    background: #ff3366;
    border: 3px solid #0a0a0f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.45);
    z-index: 2;
}

.latest-album-play-btn svg,
.latest-album-play-btn img {
    width: 28px;
    height: 28px;
    margin-left: 3px;
    filter: brightness(0) invert(1);
}

.latest-album-play-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 30px rgba(255, 51, 102, 0.55);
    background: #e62958;
}

.latest-album-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.latest-album-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.latest-album-year {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.latest-album-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.latest-album-btn-play,
.latest-album-btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    border: 1px solid;
    text-decoration: none;
}

.latest-album-btn-play {
    background: #ff3366;
    border-color: #ff3366;
    color: var(--text-primary);
}

.latest-album-btn-play:hover {
    background: #e62958;
    border-color: #e62958;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.4);
}

.latest-album-btn-detail {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.latest-album-btn-detail:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.latest-album-btn-play svg,
.latest-album-btn-play img,
.latest-album-btn-detail svg,
.latest-album-btn-detail img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

@media (max-width: 640px) {
    .latest-album-inner {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 0;
    }

    .latest-album-badge {
        margin: 0 auto 1rem;
    }

    .latest-album-cover-wrap {
        width: 180px;
        height: 180px;
        margin: 0 auto 2rem;
    }

    .latest-album-cover {
        width: 180px;
        height: 180px;
    }

    .latest-album-actions {
        justify-content: center;
    }
}

/* ---- Guestbook Teaser ---- */
.guestbook-teaser-section {
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.guestbook-teaser-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.guestbook-teaser-header {
    margin-bottom: 1.75rem;
}

.guestbook-teaser-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.25);
    border-radius: 50%;
    margin-bottom: 0.875rem;
}

.guestbook-teaser-icon svg,
.guestbook-teaser-icon img {
    width: 24px;
    height: 24px;
    fill: #ff3366;
    color: #ff3366;
    stroke: #ff3366;
    opacity: 0.9;
}

.guestbook-teaser-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}

.guestbook-teaser-sub {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.guestbook-teaser-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    text-align: left;
}

.guestbook-teaser-entry {
    background: rgba(25, 25, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(255, 51, 102, 0.5);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.guestbook-teaser-entry:hover {
    background: rgba(30, 30, 42, 0.7);
    border-left-color: #ff3366;
}

.guestbook-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
    gap: 1rem;
}

.guestbook-entry-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.guestbook-entry-date {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

.guestbook-entry-msg {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

.guestbook-teaser-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.btn-guestbook {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #ff3366;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.btn-guestbook:hover {
    background: #e62958;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 51, 102, 0.4);
    color: var(--text-primary);
}

.btn-guestbook svg,
.btn-guestbook img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.guestbook-all-link {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.guestbook-all-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
    .guestbook-teaser-inner {
        text-align: left;
    }

    .guestbook-teaser-header {
        text-align: center;
    }

    .guestbook-teaser-cta {
        justify-content: flex-start;
    }
}

/* =====================================================================
   End Phase 44 (Homepage 2026 Improvements)
   ===================================================================== */

/* =====================================================================
   Phase 45: Desktop UX Audit – Reduce excessive top padding on inner pages
   All inner pages (those with breadcrumb above) had clamp(6rem,10vw,10rem)
   = 96–160px padding-top. Reduced to 2rem so content starts closer to
   the breadcrumb navigation without dead space.
   ===================================================================== */

/* --- Gallery page --- */
.gallery-page-container {
    padding-top: 2rem;
}

/* --- About page (inline style in about.ejs, override here) --- */
.about-page {
    padding-top: 2rem;
}

/* --- Members page --- */
.members-page {
    padding-top: 2rem;
}

/* --- News / Articles list page --- */
.news-page {
    padding-top: 2rem;
}

/* --- Album detail page --- */
.album-detail-page {
    padding-top: 2rem;
}

/* --- Events / Concert archive page hero --- */
.events-hero {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

/* --- Video page hero --- */
.vp-hero {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

/* --- Guestbook page (inline style override — !important needed as inline <style> in body wins cascade) --- */
.guestbook-page {
    padding-top: 2rem !important;
}

/* --- Search page (inline style override — !important needed as inline <style> in body wins cascade) --- */
.search-page {
    padding-top: 2rem !important;
}

/* --- Fan photos / fan stories pages --- */
.fan-photos-page {
    padding-top: 2rem;
}

.fan-stories-page {
    padding-top: 2rem;
}

/* =====================================================================
   End Phase 45 (Desktop UX Audit – Top Padding Reduction)
   ===================================================================== */

/* =====================================================================
   SPA NAVIGATION PROGRESS BAR (Phase 54)
   Thin top bar that animates during SPA page transitions
   ===================================================================== */

.spa-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent-red, #ff4757), var(--accent-orange, #ff6348));
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 8px var(--accent-red, #ff4757);
}

/* =====================================================================
   SPA SKELETON LOADING PLACEHOLDERS (Phase 74)
   Shown inside #swup while SPA fetches the next page.
   Page-type aware: album-grid, article-list, detail pages, etc.
   ===================================================================== */

@keyframes spa-skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

@keyframes spa-skeleton-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Container --- */

.spa-skeleton {
    padding: 2rem var(--container-padding, 1.5rem);
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    min-height: 60vh;
    animation: spa-skeleton-fadein .2s ease;
}

/* --- Base shimmer bar --- */

.spa-skeleton__bar {
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--color-bg-surface, rgba(255,255,255,.04)) 25%,
        var(--color-bg-elevated, rgba(255,255,255,.08)) 50%,
        var(--color-bg-surface, rgba(255,255,255,.04)) 75%
    );
    background-size: 600px 100%;
    animation: spa-skeleton-shimmer 1.6s ease-in-out infinite;
}

/* --- Common elements --- */

.spa-skeleton__breadcrumb {
    height: .75rem;
    width: 30%;
    margin-bottom: 2rem;
}

.spa-skeleton__title {
    height: 2rem;
    width: 45%;
    margin-bottom: 1.5rem;
}

.spa-skeleton__subtitle {
    height: 1.1rem;
    width: 25%;
    margin-bottom: 2rem;
}

.spa-skeleton__line {
    height: .85rem;
    margin-bottom: .75rem;
}

.spa-skeleton__line:nth-child(odd)  { width: 100%; }
.spa-skeleton__line:nth-child(even) { width: 80%; }

.spa-skeleton__block {
    height: 10rem;
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}

.spa-skeleton__paragraph {
    height: .85rem;
    width: 100%;
    margin-bottom: .65rem;
}

.spa-skeleton__paragraph:nth-child(3n) { width: 70%; }
.spa-skeleton__paragraph:nth-child(3n+1) { width: 95%; }

/* --- Generic grid (fallback) --- */

.spa-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.spa-skeleton__card {
    border-radius: 8px;
    height: 14rem;
}

/* --- Square card grid (albums, gallery, video) --- */

.spa-skeleton__grid--square {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.spa-skeleton__card-square {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-elevated, #222228);
    animation: none;
}

.spa-skeleton__card-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        90deg,
        var(--color-bg-surface, rgba(255,255,255,.04)) 25%,
        rgba(255,255,255,.06) 50%,
        var(--color-bg-surface, rgba(255,255,255,.04)) 75%
    );
    background-size: 600px 100%;
    animation: spa-skeleton-shimmer 1.6s ease-in-out infinite;
}

.spa-skeleton__card-body {
    padding: .75rem 1rem;
}

.spa-skeleton__card-title {
    height: .9rem;
    width: 75%;
    margin-bottom: .5rem;
}

.spa-skeleton__card-meta {
    height: .65rem;
    width: 50%;
}

/* --- Article list (news, events, lyrics) --- */

.spa-skeleton__list-item {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.spa-skeleton__list-thumb {
    width: 8rem;
    height: 6rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.spa-skeleton__list-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .25rem;
}

.spa-skeleton__list-title {
    height: 1rem;
    width: 60%;
}

.spa-skeleton__list-desc {
    height: .75rem;
    width: 90%;
}

.spa-skeleton__list-meta {
    height: .65rem;
    width: 30%;
    margin-top: auto;
}

/* --- Members grid --- */

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

.spa-skeleton__member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1rem;
    background: var(--color-bg-elevated, #222228);
    border-radius: 12px;
}

.spa-skeleton__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.spa-skeleton__member-name {
    height: .9rem;
    width: 70%;
}

.spa-skeleton__member-role {
    height: .65rem;
    width: 50%;
}

/* --- Album detail (cover + info + tracks) --- */

.spa-skeleton__detail-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.spa-skeleton__cover {
    width: 280px;
    height: 280px;
    border-radius: 10px;
    flex-shrink: 0;
}

.spa-skeleton__detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .5rem;
}

.spa-skeleton__detail-title {
    height: 1.8rem;
    width: 60%;
}

.spa-skeleton__detail-meta {
    height: .8rem;
    width: 35%;
}

.spa-skeleton__detail-desc {
    height: .75rem;
    width: 90%;
}

.spa-skeleton__track-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.spa-skeleton__track {
    height: 3rem;
    width: 100%;
    border-radius: 6px;
}

/* --- Article/member detail (content + sidebar) --- */

.spa-skeleton__content-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    margin-top: 1rem;
}

.spa-skeleton__main {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.spa-skeleton__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.spa-skeleton__sidebar-block {
    height: 12rem;
    border-radius: 10px;
}

/* --- Gallery detail (masonry-ish grid) --- */

.spa-skeleton__grid--gallery {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* --- Homepage hero block --- */

.spa-skeleton__hero-block {
    height: 50vh;
    border-radius: 0;
    margin: -2rem calc(-1 * var(--container-padding, 1.5rem)) 2rem;
    background: linear-gradient(
        90deg,
        var(--color-bg-surface, rgba(255,255,255,.04)) 25%,
        rgba(255,255,255,.05) 50%,
        var(--color-bg-surface, rgba(255,255,255,.04)) 75%
    );
    background-size: 600px 100%;
    animation: spa-skeleton-shimmer 1.6s ease-in-out infinite;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .spa-skeleton__detail-header {
        flex-direction: column;
        align-items: center;
    }

    .spa-skeleton__cover {
        width: 200px;
        height: 200px;
    }

    .spa-skeleton__detail-info {
        align-items: center;
        text-align: center;
    }

    .spa-skeleton__content-layout {
        grid-template-columns: 1fr;
    }

    .spa-skeleton__sidebar {
        display: none;
    }

    .spa-skeleton__list-item {
        flex-direction: column;
        gap: .75rem;
    }

    .spa-skeleton__list-thumb {
        width: 100%;
        height: 10rem;
    }

    .spa-skeleton__grid--square {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* --- Reduce motion: kill shimmer animation --- */

@media (prefers-reduced-motion: reduce) {
    .spa-skeleton__bar,
    .spa-skeleton__card-thumb,
    .spa-skeleton__hero-block {
        animation: none;
        background: rgba(255,255,255,.06);
    }

    .spa-skeleton {
        animation: none;
    }
}

/* =====================================================================
   End Phase 54 (SPA Navigation)
   ===================================================================== */

/* =====================================================================
   HOMEPAGE VISUAL IMPACT UPGRADE (Phase 55)
   Dark, powerful, atmospheric enhancements for a legendary rock band.
   All rules APPENDED — nothing above was changed.
   ===================================================================== */

/* --- HERO SECTION: More Dramatic --- */

/* Stronger text glow on the hero title for readability and drama */
.homepage .hero-section .hero-title {
    text-shadow:
        0 2px 30px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(220, 38, 38, 0.15),
        0 0 120px rgba(220, 38, 38, 0.06);
}

/* Smooth gradient overlay at bottom of hero for section transition */
.homepage .hero-section .hero-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(14, 14, 17, 0.3) 40%,
        rgba(14, 14, 17, 0.7) 70%,
        var(--bg-primary, #0e0e11) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Bigger CTA buttons with pulsing glow on hover */
.homepage .hero-actions .btn-primary,
.homepage .hero-actions .btn-secondary {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

.homepage .hero-actions .btn-primary:hover {
    box-shadow:
        0 8px 32px rgba(255, 51, 102, 0.4),
        0 0 60px rgba(255, 51, 102, 0.15);
    animation: hero-btn-pulse 2s ease-in-out infinite;
}

.homepage .hero-actions .btn-secondary:hover {
    box-shadow:
        0 8px 24px rgba(255, 255, 255, 0.08),
        0 0 40px rgba(255, 255, 255, 0.04);
}

@keyframes hero-btn-pulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(255, 51, 102, 0.4), 0 0 60px rgba(255, 51, 102, 0.15); }
    50% { box-shadow: 0 8px 40px rgba(255, 51, 102, 0.55), 0 0 80px rgba(255, 51, 102, 0.25); }
}

/* --- STATISTICS SECTION: Numbers Pop --- */

/* Subtle dark background for stats section */
.homepage .stats-section {
    background:
        linear-gradient(
            180deg,
            rgba(14, 14, 17, 0.4) 0%,
            rgba(20, 20, 28, 0.6) 50%,
            rgba(14, 14, 17, 0.4) 100%
        );
}

/* Make stat numbers larger, accent-colored, and bold */
.homepage .stats-section .stat-card .stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--accent-red, #dc2626);
    text-shadow: 0 0 30px rgba(220, 38, 38, 0.2);
    line-height: 1;
}

/* Stat icon gets a subtle glow matching the accent */
.homepage .stats-section .stat-card .stat-icon {
    color: var(--accent-red, #dc2626);
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.25));
}

/* --- ALBUM CARDS: More Engaging Hover --- */

/* Scale transform + enhanced glow + red accent bottom border on hover */
.homepage .album-card-modern {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    border-bottom: 3px solid transparent;
}

.homepage .album-card-modern:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 50px rgba(220, 38, 38, 0.15),
        0 0 0 1px rgba(220, 38, 38, 0.3);
    border-bottom-color: var(--accent-red, #dc2626);
}

/* --- MEMORIAL SECTION: Solemn and Elegant --- */

/* Warm candle glow animation - subtle flicker */
.homepage .memorial-modern .memorial-icon {
    animation: candle-warm-glow 3s ease-in-out infinite;
}

@keyframes candle-warm-glow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5))
                drop-shadow(0 0 30px rgba(245, 158, 11, 0.2));
    }
    33% {
        filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.6))
                drop-shadow(0 0 40px rgba(245, 158, 11, 0.25));
    }
    66% {
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45))
                drop-shadow(0 0 25px rgba(245, 158, 11, 0.15));
    }
}

/* Improved typography on memorial heading */
.homepage .memorial-modern .memorial-title {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Memorial dates: refined spacing */
.homepage .memorial-modern .memorial-dates {
    letter-spacing: 0.12em;
    opacity: 0.8;
}

/* Memorial divider: warm accent */
.homepage .memorial-modern .memorial-divider {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 158, 11, 0.4),
        transparent
    );
    height: 1px;
    margin: 1.5rem auto;
    max-width: 200px;
}

/* --- GALLERY SECTION: Better Preview Hover --- */

/* Enhanced zoom on gallery thumbnails */
.homepage .gallery-scroll-modern .gallery-photo-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.1) contrast(1.05);
}

.homepage .gallery-scroll-modern .gallery-photo-item img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s ease;
}

/* Photo count badge glow on hover */
.homepage .gallery-scroll-modern .gallery-photo-item:hover .gallery-photo-count {
    background: var(--accent-red, #dc2626);
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

/* --- LIGHT THEME OVERRIDES for Phase 55 --- */

[data-theme="light"] .homepage .hero-section .hero-overlay::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.5) 70%,
        var(--bg-primary, #ffffff) 100%
    );
}

[data-theme="light"] .homepage .stats-section {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(243, 244, 246, 0.6) 50%,
            rgba(255, 255, 255, 0.3) 100%
        );
}

[data-theme="light"] .homepage .stats-section .stat-card .stat-number {
    text-shadow: none;
}

[data-theme="light"] .homepage .album-card-modern:hover {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.12),
        0 0 30px rgba(220, 38, 38, 0.08),
        0 0 0 1px rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .homepage .hero-section .hero-title {
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.1);
}

/* --- MOBILE SAFETY for Phase 55 --- */

@media (max-width: 480px) {
    .homepage .hero-actions .btn-primary,
    .homepage .hero-actions .btn-secondary {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    .homepage .stats-section .stat-card .stat-number {
        font-size: 2rem;
    }

    .homepage .album-card-modern:hover {
        transform: translateY(-3px) scale(1.01);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .homepage .memorial-modern .memorial-icon {
        animation: none;
    }
    .homepage .hero-actions .btn-primary:hover {
        animation: none;
    }
    .homepage .album-card-modern:hover {
        transform: translateY(-3px);
    }
}

/* =====================================================================
   End Phase 55 (Homepage Visual Impact Upgrade)
   ===================================================================== */

/* =====================================================================
   Phase 56 - Mobile Responsive Fixes
   Comprehensive mobile audit fixes for 375px and 320px viewports.
   All fixes scoped to @media (max-width: 480px) to avoid breaking desktop.
   ===================================================================== */

/* --- Phase 56: CRITICAL FIX - Member detail overflow --- */
/* 1. other-members-grid: flex nowrap with 12+ cards overflows the page.
      Parent .other-members needs overflow:hidden to clip it.
   2. member-tab-list: 3 tabs (Биография+Дискография+Галерея = 391px)
      exceeds 327px container, causing 40px page overflow. */
@media (max-width: 480px) {
    .member-detail .other-members {
        overflow: hidden;
    }
    .member-detail .other-members-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .member-detail .other-member-card {
        scroll-snap-align: start;
    }

    /* Member tabs: make scrollable on mobile */
    .member-tabs {
        overflow: hidden;
    }
    .member-tab-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .member-tab-list::-webkit-scrollbar {
        display: none;
    }
}

/* --- Phase 56: Touch target fixes (minimum 44px) --- */
@media (max-width: 480px) {
    /* Site brand in header - increase touch area */
    .site-brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Breadcrumb links - increase touch area */
    .breadcrumb-link,
    .breadcrumb-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer social links - increase to 44px min height */
    .footer-social-link {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Album share buttons - increase from 36px to 44px */
    .album-share-btn {
        width: 44px;
        height: 44px;
    }

    /* Social share bar buttons - increase from 40px to 44px */
    .social-share-bar__btn {
        width: 44px;
        height: 44px;
    }

    /* Events filter/type buttons - increase from 30px to 44px height */
    .events-filter-btn,
    .events-type-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Timeline links - increase touch area */
    .timeline__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Member back link - increase from 24px height */
    .member-back {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Member detail tabs - increase from 40px to 44px */
    .member-tab-list li,
    .member-tab-list button,
    .member-tab-list a {
        min-height: 44px;
    }

    /* Gallery slideshow button - increase from 35px */
    .gallery-slideshow-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Pagination buttons - increase from 31px x 34px */
    .page-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* Guestbook send button - ensure 44px min height */
    .submit-btn {
        min-height: 44px;
    }

    /* Homepage guestbook button - increase from 27px height */
    .btn-guestbook {
        min-height: 44px;
        padding: 0.625rem 1.25rem;
        display: inline-flex;
        align-items: center;
    }

    /* Homepage guestbook all-messages link */
    .guestbook-all-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Bookmark button - increase from 41px */
    .bookmark-btn {
        min-height: 44px;
    }

    /* TTS reader buttons */
    .tts-reader__play {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    .tts-reader__stop {
        min-width: 44px;
        min-height: 44px;
    }
    .tts-reader__rate {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Error page pills */
    .error-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Scroll to top button */
    .scroll-to-top-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* RSS footer link */
    footer a[href*="rss"],
    .footer-nav a[href*="rss"] {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Phase 56: Font size fixes (minimum 14px for readability) --- */
@media (max-width: 480px) {
    /* Breadcrumb text */
    .breadcrumb-link,
    .breadcrumb-item,
    .breadcrumb-current {
        font-size: 0.875rem; /* 14px */
    }

    /* Footer social links text */
    .footer-social-link {
        font-size: 0.8125rem; /* 13px -> acceptable for small labels */
    }

    /* Member role and years on member cards */
    .member-role {
        font-size: 0.875rem;
    }
    .member-years {
        font-size: 0.8125rem;
    }
    .member-founder-label {
        font-size: 0.75rem; /* 12px - badge text, acceptable */
    }

    /* Track numbers in album detail */
    .track-number {
        font-size: 0.875rem;
    }

    /* Album share label */
    .album-share-label {
        font-size: 0.875rem;
    }

    /* Homepage section small text */
    .gallery-photo-count {
        font-size: 0.8125rem;
    }
    .latest-album-badge {
        font-size: 0.8125rem;
    }
    .stat-label {
        font-size: 0.875rem;
    }

    /* Music player text */
    .smp-mini-title {
        font-size: 0.875rem;
    }
    .smp-title {
        font-size: 0.875rem;
    }
    .smp-artist {
        font-size: 0.8125rem;
    }

    /* Video page stats and badges */
    .vp-stat__label {
        font-size: 0.75rem; /* badge label */
    }
    .vp-card__badge {
        font-size: 0.8125rem;
    }
    .vp-card__duration {
        font-size: 0.875rem;
    }

    /* Member detail other-members text */
    .other-name {
        font-size: 0.875rem;
    }
    .other-role {
        font-size: 0.8125rem;
    }
    .member-founder-badge {
        font-size: 0.75rem; /* badge text */
    }

    /* Guestbook entry date */
    .entry-date {
        font-size: 0.875rem;
    }
    .char-counter {
        font-size: 0.875rem;
    }

    /* Events page hero badge/stats */
    .events-hero__badge {
        font-size: 0.8125rem;
    }
    .events-hero__stat-label {
        font-size: 0.875rem;
    }

    /* Timeline type badges and dates */
    .timeline__date {
        font-size: 0.875rem;
    }
    .timeline__type-badge {
        font-size: 0.8125rem;
    }

    /* TTS reader labels */
    .tts-reader__label {
        font-size: 0.8125rem;
    }
    .tts-reader__rate-label {
        font-size: 0.8125rem;
    }

    /* Prev/next article labels */
    .prev-next-label {
        font-size: 0.875rem;
    }

    .error-pill {
        font-size: 0.8125rem;
    }

    /* About page stat labels */
    .about-stat .stat-label {
        font-size: 0.875rem;
    }
}

/* --- Phase 56: 320px ultra-small screen safety net --- */
@media (max-width: 320px) {
    /* Prevent any overflow on very small screens */
    body {
        overflow-x: hidden;
    }

    /* Hero section tighter spacing */
    .hero-section .hero-content {
        padding: 0 0.75rem;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 0.875rem;
    }
    .hero-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Reduce section padding on very small screens */
    .homepage section,
    .page-content,
    main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Stats grid - 2 columns instead of 3 on 320px */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Album cards - single column on 320px */
    .homepage .albums-grid-modern {
        grid-template-columns: 1fr;
    }

    /* Footer nav - single column */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Events filter buttons - smaller text to fit */
    .events-filter-btn,
    .events-type-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    /* Discography timeline - ensure scroll within bounds */
    .discography-timeline {
        max-width: 100%;
        overflow-x: auto;
    }

    /* On-this-day section tighter layout */
    .on-this-day-section {
        padding: 0.75rem;
    }

    /* Memorial section */
    .memorial-modern {
        padding: 1.5rem 0.75rem;
    }

    /* Member tabs scroll on 320px */
    .member-tab-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    /* Guestbook form */
    .guestbook-form {
        padding: 1rem;
    }

    /* Video cards */
    .vp-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   End Phase 56 (Mobile Responsive Fixes)
   ===================================================================== */

/* =====================================================================
   Phase 56b - Visual Polish: Members / Gallery / News / Timeline
   Subtle, classy enhancements for a legendary rock band's website.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. MEMBERS PAGE  (/ru/members)
   --------------------------------------------------------------- */

/* Page header: refined typography */
.members-page-header h1 {
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.members-page-header p {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Grid gap refinement */
.members-page .members-grid {
    gap: 1.75rem;
}

/* Card: enhanced lift & shadow on hover */
.members-page .member-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease;
    position: relative;
}

.members-page .member-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(220, 38, 38, 0.15);
}

/* Photo: refined zoom with brightness lift */
.members-page .member-photo-container {
    border-bottom: 2px solid transparent;
    transition: border-color 0.4s ease;
}

.members-page .member-card:hover .member-photo-container {
    border-bottom-color: rgba(220, 38, 38, 0.4);
}

/* Deceased members: respectful memorial indicator */
.members-page .member-card.deceased {
    border-color: rgba(255, 255, 255, 0.06);
}

.members-page .member-card.deceased .member-photo-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 70%,
        rgba(107, 114, 128, 0.15) 100%
    );
}

.members-page .member-card.deceased .deceased-badge {
    background: rgba(107, 114, 128, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.members-page .member-card.deceased:hover {
    border-color: rgba(107, 114, 128, 0.25);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(107, 114, 128, 0.2);
}

/* Founder card: warm accent enhancements */
.members-page .member-card.founder {
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.08);
}

.members-page .member-card.founder:hover {
    box-shadow:
        0 20px 50px rgba(220, 38, 38, 0.15),
        0 0 0 1px rgba(220, 38, 38, 0.3);
}

.members-page .member-card.founder .member-photo-container {
    border-bottom-color: rgba(220, 38, 38, 0.2);
}

.members-page .member-card.founder:hover .member-photo-container {
    border-bottom-color: rgba(220, 38, 38, 0.5);
}

/* Member name: subtle hover reveal */
.members-page .member-name {
    transition: color 0.3s ease;
}

.members-page .member-card:hover .member-name {
    color: var(--text-primary);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.1);
}

/* Role: accent glow on hover */
.members-page .member-card:hover .member-role {
    color: var(--accent-red-light);
}

/* Years: fade in slightly on hover */
.members-page .member-years {
    transition: opacity 0.3s ease;
}

.members-page .member-card:hover .member-years {
    opacity: 0.75;
}

/* Founder label: refined pill */
.members-page .member-founder-label {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: var(--accent-red-light);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

/* ---------------------------------------------------------------
   2. GALLERY PAGE  (/ru/gallery)
   --------------------------------------------------------------- */

/* Gallery header: dramatic spacing */
.gallery-page-header .gallery-title-main {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.gallery-page-header .gallery-subtitle {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
    opacity: 0.5;
}

/* Stats bar: subtle red line accent */
.gallery-stats-bar {
    border-left: 3px solid rgba(220, 38, 38, 0.4);
}

/* Gallery cards: refined border on hover */
.gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    z-index: 6;
    transition: border-color 0.4s ease;
}

.gallery-card:hover::after {
    border-color: rgba(220, 38, 38, 0.3);
}

/* Gallery card title: refined weight */
.gallery-card-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.01em;
}

/* Gallery card count: pill badge */
.gallery-card-count {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-card:hover .gallery-card-count {
    background: rgba(220, 38, 38, 0.25);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--text-primary);
}

/* Photo masonry: refined border radius and shadow */
.photo-masonry-item {
    border-radius: 10px;
    overflow: hidden;
}

.photo-masonry-item:hover {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(220, 38, 38, 0.15);
}

/* Photo overlay: smoother gradient */
.photo-masonry-item__overlay {
    padding: 1rem;
    padding-top: 2.5rem;
}

/* ---------------------------------------------------------------
   3. NEWS / ARTICLES PAGE  (/ru/news)
   --------------------------------------------------------------- */

/* Hero: better text hierarchy */
.articles-hero-modern .glitch-title {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Card category badge: refined appearance */
.bento-card .card-category {
    position: relative;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(220, 38, 38, 0.5);
    background: none;
    color: rgba(220, 38, 38, 0.85);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Date overlay: cleaner pill design */
.card-overlay-date {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    font-weight: 500;
    backdrop-filter: blur(12px);
    border-radius: 8px;
}

/* Card hover: image brightness lift */
.bento-card:hover .card-image-wrapper img {
    filter: brightness(1.08);
}

/* Card title: subtle underline effect on hover */
.bento-card .card-title {
    position: relative;
    /* Keep display: -webkit-box for line-clamping (do NOT use display: inline) */
    background-image: linear-gradient(rgba(220, 38, 38, 0.3), rgba(220, 38, 38, 0.3));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.bento-card:hover .card-title {
    background-size: 100% 2px;
    /* Reset transparent text fill from articles-extended.css gradient effect */
    -webkit-text-fill-color: currentcolor;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: var(--text-primary);
}

/* Smart tags (reading time, views): more refined */
.bento-card .smart-tags {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bento-card .smart-tag {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.bento-card:hover .smart-tag {
    opacity: 0.75;
}

/* Card excerpt: better readability */
.bento-card .card-excerpt {
    line-height: 1.65;
    font-size: 0.875rem;
}

/* --- Article Detail Page --- */

/* Article body: better typography */
.article-body-modern .typography-content {
    font-size: 1.05rem;
    line-height: 1.85;
}

/* Blockquotes: elegant left-border style */
.article-body-modern blockquote,
.typography-content blockquote {
    border-left: 3px solid rgba(220, 38, 38, 0.5);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-secondary);
    position: relative;
}

.article-body-modern blockquote::before,
.typography-content blockquote::before {
    content: '\201C';
    font-size: 3rem;
    position: absolute;
    top: -0.25rem;
    left: 0.5rem;
    color: rgba(220, 38, 38, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

/* Section separators for h2 in long articles */
.typography-content h2:not(:first-child) {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Images in articles: rounded, with subtle shadow */
.typography-content img {
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Article meta grid: better spacing */
.article-meta-grid {
    gap: 1.25rem;
}

.meta-item-modern {
    opacity: 0.7;
    font-size: 0.85rem;
    transition: opacity 0.3s ease;
}

.meta-item-modern:hover {
    opacity: 1;
}

/* ---------------------------------------------------------------
   4. TIMELINE / EVENTS PAGE  (/ru/events)
   --------------------------------------------------------------- */

/* Timeline line: gradient that fades at extremes */
.events-timeline .timeline__line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.15) 5%,
        rgba(220, 38, 38, 0.35) 20%,
        rgba(220, 38, 38, 0.35) 80%,
        rgba(220, 38, 38, 0.15) 95%,
        transparent 100%
    ) !important;
    width: 3px !important;
}

/* Timeline dots: pulse glow animation */
@keyframes phase56b-dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    }
}

.timeline__dot {
    animation: phase56b-dot-pulse 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.timeline__dot--milestone {
    animation-delay: 0s;
}

@keyframes phase56b-dot-pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}

.timeline__dot--album {
    animation-name: phase56b-dot-pulse-blue;
    animation-delay: 0.5s;
}

@keyframes phase56b-dot-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
}

.timeline__dot--concert {
    animation-name: phase56b-dot-pulse-green;
    animation-delay: 1s;
}

@keyframes phase56b-dot-pulse-gray {
    0%, 100% { box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(107, 114, 128, 0); }
}

.timeline__dot--memorial {
    animation-name: phase56b-dot-pulse-gray;
    animation-delay: 1.5s;
}

/* Decade markers: more dramatic styling */
.timeline__decade-marker {
    padding: 1.5rem 0;
}

.timeline__decade-label {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #fff 0%, rgba(220, 38, 38, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    position: relative;
}

.timeline__decade-label::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: rgba(220, 38, 38, 0.4);
    margin: 0.5rem auto 0;
    border-radius: 1px;
}

/* Timeline cards: refined hover */
.timeline__card {
    backdrop-filter: blur(4px);
}

.timeline__card:hover {
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(220, 38, 38, 0.1);
}

/* Timeline card title: subtle accent */
.timeline__title {
    transition: color 0.3s ease;
}

.timeline__card:hover .timeline__title {
    color: var(--text-primary);
}

/* Timeline type badges: refined pill */
.timeline__type-badge {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
}

/* Timeline date: mono-style for elegance */
.timeline__date {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* Timeline description: better line height */
.timeline__description {
    line-height: 1.7;
}

/* Timeline link: refined hover */
.timeline__link {
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.timeline__link:hover {
    letter-spacing: 0.02em;
}

/* Events hero stats: refined */
.events-hero__stat-value {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Events filter buttons: refined active state */
.events-filter-btn.active,
.events-type-btn.active {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

/* Events filter btn hover */
.events-filter-btn:not(.active):hover,
.events-type-btn:not(.active):hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

/* ---------------------------------------------------------------
   5. LIGHT THEME OVERRIDES
   --------------------------------------------------------------- */

/* Members */
[data-theme="light"] .members-page .member-card:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .members-page .member-card:hover .member-name {
    color: var(--text-primary);
    text-shadow: none;
}

[data-theme="light"] .members-page .member-card.deceased .deceased-badge {
    background: rgba(107, 114, 128, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .members-page .member-card.deceased:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(107, 114, 128, 0.2);
}

[data-theme="light"] .members-page .member-card.founder {
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .members-page .member-card.founder:hover {
    box-shadow:
        0 20px 50px rgba(220, 38, 38, 0.08),
        0 0 0 1px rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .members-page .member-card:hover .member-photo-container {
    border-bottom-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .members-page .member-founder-label {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-color: rgba(220, 38, 38, 0.2);
}

/* Gallery: kept intentionally dark in both themes, so minimal overrides */
[data-theme="light"] .gallery-card-count {
    background: rgba(0, 0, 0, 0.5);
}

/* News / Articles */
[data-theme="light"] .bento-card .card-category {
    border-left-color: rgba(220, 38, 38, 0.4);
    color: var(--accent);
}

[data-theme="light"] .bento-card .card-title {
    background-image: linear-gradient(rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.2));
}

[data-theme="light"] .bento-card .smart-tags {
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .article-body-modern blockquote,
[data-theme="light"] .typography-content blockquote {
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-secondary);
    border-left-color: rgba(220, 38, 38, 0.4);
}

[data-theme="light"] .article-body-modern blockquote::before,
[data-theme="light"] .typography-content blockquote::before {
    color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .typography-content img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Timeline / Events */
[data-theme="light"] .events-timeline .timeline__line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(220, 38, 38, 0.1) 5%,
        rgba(220, 38, 38, 0.25) 20%,
        rgba(220, 38, 38, 0.25) 80%,
        rgba(220, 38, 38, 0.1) 95%,
        transparent 100%
    ) !important;
}

[data-theme="light"] .timeline__decade-label {
    background: linear-gradient(135deg, var(--text-primary) 0%, rgba(220, 38, 38, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .timeline__decade-label::after {
    background: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .timeline__card:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .timeline__card:hover .timeline__title {
    color: var(--text-primary);
}

[data-theme="light"] .events-filter-btn.active,
[data-theme="light"] .events-type-btn.active {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .events-filter-btn:not(.active):hover,
[data-theme="light"] .events-type-btn:not(.active):hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

/* ---------------------------------------------------------------
   6. REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .timeline__dot {
        animation: none !important;
    }

    .members-page .member-card,
    .gallery-card,
    .bento-card,
    .photo-masonry-item,
    .timeline__card {
        transition-duration: 0.01ms !important;
    }

    .bento-card .card-title {
        background-size: 0% 2px !important;
        transition: none !important;
    }

    .bento-card:hover .card-title {
        background-size: 0% 2px !important;
    }

    .members-page .member-card:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   7. MOBILE SAFETY  (max-width: 480px)
   --------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Members: scale down hover effects */
    .members-page .member-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .members-page .members-grid {
        gap: 1rem;
    }

    .members-page .member-founder-label {
        font-size: 0.6rem;
        padding: 0.15rem 0.5rem;
    }

    /* Gallery: scale down */
    .gallery-card:hover {
        transform: translateY(-3px) scale(1.005);
    }

    .gallery-card-count {
        font-size: 0.65rem;
        padding: 0.2rem 0.45rem;
    }

    /* News: scale down */
    .bento-card:hover {
        transform: translateY(-2px);
    }

    .bento-card .card-title {
        background-image: none !important;
    }

    /* Timeline: simpler on mobile */
    .events-timeline .timeline__line {
        width: 2px !important;
    }

    .timeline__decade-label {
        font-size: 1.2rem;
    }

    .timeline__decade-label::after {
        width: 30px;
    }

    .timeline__dot {
        animation: none !important;
    }
}

/* =====================================================================
   End Phase 56b (Visual Polish: Members / Gallery / News / Timeline)
   ===================================================================== */

/* =====================================================================
   LYRICS BROWSER PAGE
   ===================================================================== */

.lyrics-page {
    padding-bottom: 4rem;
}

/* Hero */
.lyrics-hero {
    padding: 3rem 0 2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-secondary);
}

.lyrics-hero__title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.lyrics-hero__subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0 0 1.5rem;
    max-width: 600px;
    margin-inline: auto;
}

.lyrics-hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lyrics-hero__stat {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

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

.lyrics-hero__stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.lyrics-hero__stat-divider {
    color: var(--text-muted);
    font-size: 1.25rem;
    opacity: 0.5;
}

/* Controls: Search + Filter */
.lyrics-controls {
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-primary, #030303);
    border-bottom: 1px solid var(--border-secondary);
}

.lyrics-controls__bar {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.lyrics-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.lyrics-search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--text-muted);
    pointer-events: none;
}

.lyrics-search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    font-size: 1rem;
    background: var(--bg-tertiary, #18181b);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
    outline: none;
}

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

.lyrics-search-input:focus {
    border-color: var(--accent, #dc2626);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.lyrics-search-clear {
    position: absolute;
    right: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-elevated, #27272a);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lyrics-search-clear:hover {
    background: var(--accent, #dc2626);
    color: var(--text-primary);
}

.lyrics-album-filter {
    padding: 0.75rem 2rem 0.75rem 0.875rem;
    font-size: 0.95rem;
    background: var(--bg-tertiary, #18181b);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 200px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    outline: none;
}

.lyrics-album-filter:focus {
    border-color: var(--accent, #dc2626);
}

.lyrics-album-filter option {
    background: var(--bg-secondary, #0f0f0f);
    color: var(--text-primary);
}

.lyrics-search-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* No results */
.lyrics-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.lyrics-empty svg {
    margin-bottom: 1rem;
    opacity: 0.4;
}

.lyrics-empty p {
    font-size: 1.1rem;
}

/* Album groups */
.lyrics-results {
    padding-top: 1.5rem;
}

.lyrics-album {
    margin-bottom: 2rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--bg-secondary, #0f0f0f);
    transition: border-color var(--transition-fast);
}

.lyrics-album:hover {
    border-color: rgba(220, 38, 38, 0.3);
}

.lyrics-album__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary, #18181b);
    border-bottom: 1px solid var(--border-secondary);
}

.lyrics-album__cover {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm, 4px);
    object-fit: cover;
    flex-shrink: 0;
}

.lyrics-album__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated, #27272a);
    color: var(--text-muted);
}

.lyrics-album__info {
    flex: 1;
    min-width: 0;
}

.lyrics-album__title {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin: 0 0 0.15rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyrics-album__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.lyrics-album__separator {
    opacity: 0.4;
}

.lyrics-album__link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--bg-secondary, #0f0f0f);
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}

.lyrics-album__link:hover {
    background: var(--accent, #dc2626);
    color: var(--text-primary);
}

/* Track items */
.lyrics-album__tracks {
    padding: 0;
}

.lyrics-track {
    border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,0.05));
}

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

.lyrics-track__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    transition: background var(--transition-fast);
}

.lyrics-track__toggle:hover {
    background: rgba(220, 38, 38, 0.05);
}

.lyrics-track__toggle:focus-visible {
    outline: 2px solid var(--accent, #dc2626);
    outline-offset: -2px;
}

.lyrics-track__number {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1rem;
    color: var(--accent, #dc2626);
    min-width: 1.75rem;
    text-align: right;
    flex-shrink: 0;
    opacity: 0.7;
}

.lyrics-track__title {
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.lyrics-track__preview {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.6;
}

.lyrics-track__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.lyrics-track--open .lyrics-track__chevron {
    transform: rotate(180deg);
}

.lyrics-track--open .lyrics-track__toggle {
    background: rgba(220, 38, 38, 0.08);
    border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,0.05));
}

.lyrics-track--open .lyrics-track__preview {
    display: none;
}

/* Lyrics body */
.lyrics-track__body {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--bg-primary, #030303);
    border-top: none;
}

.lyrics-track__body[hidden] {
    display: none !important;
}

.lyrics-track__text {
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-width: 600px;
}

/* Search highlight */
.lyrics-highlight {
    background: rgba(220, 38, 38, 0.3);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0.05em 0.15em;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lyrics-hero {
        padding: 2rem 0 1.5rem;
    }

    .lyrics-hero__title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .lyrics-hero__stat-value {
        font-size: 1.5rem;
    }

    .lyrics-controls__bar {
        flex-direction: column;
    }

    .lyrics-album-filter {
        min-width: 100%;
    }

    .lyrics-album__header {
        padding: 0.75rem 1rem;
    }

    .lyrics-album__cover {
        width: 44px;
        height: 44px;
    }

    .lyrics-album__title {
        font-size: 1.15rem;
    }

    .lyrics-track__toggle {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .lyrics-track__preview {
        display: none;
    }

    .lyrics-track__body {
        padding: 1rem;
    }

    .lyrics-track__text {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .lyrics-hero__stats {
        gap: 0.5rem;
    }

    .lyrics-hero__stat-value {
        font-size: 1.25rem;
    }

    .lyrics-album__link {
        display: none;
    }
}

/* =====================================================================
   End Lyrics Browser Page
   ===================================================================== */

/* =====================================================================
   Music Stats & Fun Facts Section (About Page)
   ===================================================================== */

.music-stats-section {
    position: relative;
}

.music-stats-section > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.music-stats-section > h2 .icon {
    color: var(--color-accent, #e74c3c);
    flex-shrink: 0;
}

.music-stats-subtitle {
    color: var(--text-secondary, #aaa);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* --- Primary stats grid --- */
.music-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.music-stat-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent, #e74c3c);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.15);
}

.music-stat-card--primary {
    background: linear-gradient(
        135deg,
        rgba(231, 76, 60, 0.08) 0%,
        rgba(231, 76, 60, 0.02) 100%
    );
    border-color: rgba(231, 76, 60, 0.2);
}

.music-stat-value {
    font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent, #e74c3c);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}

.music-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* --- Fun facts heading --- */
.fun-facts-heading {
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #fff);
    position: relative;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-accent, #e74c3c);
}

/* --- Fun facts grid --- */
.fun-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.fun-fact-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.fun-fact-card:hover {
    border-color: rgba(231, 76, 60, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

/* Loading shimmer */
.fun-fact-card--loading {
    min-height: 72px;
    position: relative;
    overflow: hidden;
}

.fun-fact-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fun-fact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 8px;
    color: var(--color-accent, #e74c3c);
}

.fun-fact-icon .icon {
    width: 20px;
    height: 20px;
}

.fun-fact-content {
    flex: 1;
    min-width: 0;
}

.fun-fact-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.fun-fact-detail {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    line-height: 1.4;
    display: block;
}

a.fun-fact-detail {
    color: var(--color-accent, #e74c3c);
    text-decoration: none;
    transition: color 0.2s ease;
}

a.fun-fact-detail:hover {
    color: var(--color-accent-light, #ff6b5a);
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .music-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .fun-facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .fun-facts-grid {
        grid-template-columns: 1fr;
    }

    .music-stat-value {
        font-size: 2.25rem;
    }
}

@media (max-width: 480px) {
    .music-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .music-stat-card {
        padding: 1rem 0.75rem;
    }

    .music-stat-value {
        font-size: 2rem;
    }

    .music-stat-label {
        font-size: 0.75rem;
    }

    .fun-fact-card {
        padding: 0.85rem;
    }
}

/* --- Light theme overrides --- */
[data-theme="light"] .music-stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .music-stat-card--primary {
    background: linear-gradient(
        135deg,
        rgba(231, 76, 60, 0.06) 0%,
        rgba(231, 76, 60, 0.01) 100%
    );
}

[data-theme="light"] .music-stat-card:hover {
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.1);
}

[data-theme="light"] .fun-fact-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .fun-fact-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* =====================================================================
   End Music Stats & Fun Facts
   ===================================================================== */

/* =====================================================================
   Print Buttons — screen styles
   ===================================================================== */
.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-secondary, rgba(255,255,255,0.1));
    border-radius: var(--radius-sm, 4px);
    background: rgba(255,255,255,0.05);
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    font-family: var(--font-primary, sans-serif);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.print-btn:hover {
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,0.1);
    border-color: var(--border-primary, rgba(220,38,38,0.2));
}
.print-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}
.print-btn svg {
    flex-shrink: 0;
}

/* Light theme */
[data-theme="light"] .print-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.12);
    color: var(--text-muted, #6b7280);
}
[data-theme="light"] .print-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary, #111827);
}

/* Lyrics page: header row with print button */
.lyrics-hero__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Article print button - float right near top */
.print-article-btn {
    float: right;
    margin: 0 0 0.75rem 0.75rem;
}

/* Album tracks header with print button */
.album-tracks__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.album-tracks__header h2 {
    margin-bottom: 0;
}

/* Hide print source URL on screen */
.print-source-url {
    display: none;
}

/* =====================================================================
   Accessibility Enhancements
   ===================================================================== */

/* Ensure all form inputs have visible focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 1px;
    border-radius: var(--radius-sm, 4px);
}

/* Ensure interactive elements in track list have focus */
.lyrics-track__toggle:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Ensure .sr-only utility is defined (screen-reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   ACCESSIBILITY: Skip-link for music player (WCAG 2.2)
   ======================================== */
.skip-link-player {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    padding: 0.75rem 1.5rem;
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link-player:focus {
    top: 0;
}

/* ========================================
   ACCESSIBILITY: Enhanced focus indicators (WCAG 2.2 AA)
   ======================================== */

/* Ensure nav-toggle hamburger has visible focus ring */
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Language switcher button focus */
.lang-toggle:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Search button focus */
.search-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Scroll-to-top button focus */
.scroll-to-top-btn:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Footer links focus */
.footer-social-link:focus-visible,
.footer-links a:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Album card play button focus */
.album-card-quick-play:focus-visible,
.latest-album-play-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* =====================================================================
   2026 UI/UX POLISH — Micro-interactions & Smooth Transitions
   ===================================================================== */

/* --- Global smooth transitions for interactive elements --- */
.btn,
button:not([class*="scroll-to-top"]):not([class*="smp-"]):not([class*="player-"]) {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

/* Subtle press effect on buttons */
.btn:active,
.error-pill:active {
    transform: scale(0.97);
}

/* --- Article card hover lift (non-homepage) --- */
.article-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                background 0.25s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

/* --- News card hover lift refinement --- */
.news-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                background 0.25s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

/* --- Event card hover --- */
.event-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* --- Gallery card hover --- */
.gallery-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* --- Nav link smooth transition --- */
.nav-link {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* --- Footer link transitions --- */
.footer-link,
.site-footer a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* --- Error pill hover (404 page) --- */
.error-pill {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.error-pill:hover {
    transform: translateY(-2px);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .btn, button, .article-card, .news-card, .event-card, .gallery-card,
    .nav-link, .footer-link, .site-footer a, .error-pill {
        transition: none;
    }
    .btn:active, .error-pill:active, .article-card:hover, .news-card:hover,
    .event-card:hover, .gallery-card:hover, .error-pill:hover {
        transform: none;
    }
}

/* =====================================================================
   MOBILE UX AUDIT FIXES — Touch targets, overflow, readability
   ===================================================================== */

/* --- Lyrics panel close button: enlarge touch target on mobile (was 32x32) --- */
@media (max-width: 768px) {
    .lyrics-panel-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- Article content tables: prevent horizontal overflow on mobile --- */
.article-body-modern table,
.article-content table,
.typography-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* --- Article content images: prevent overflow on mobile --- */
.article-body-modern img,
.article-content img,
.typography-content img {
    max-width: 100%;
    height: auto;
}

/* --- Ensure iframes (embedded videos) don't overflow on mobile --- */
.article-body-modern iframe,
.article-content iframe,
.typography-content iframe {
    max-width: 100%;
}

/* --- Search input on mobile: prevent iOS zoom (font-size < 16px triggers zoom) --- */
@media (max-width: 768px) {
    .error-search-input,
    .search-modal input,
    .guestbook-form textarea,
    .guestbook-form input {
        font-size: 16px;
    }
}

/* --- Bottom nav + player stacking: ensure player doesn't overlap bottom nav --- */
@media (max-width: 768px) {
    /* Ensure the scroll-to-top button clears both player and bottom nav */
    body.has-bottom-nav [data-scroll-top] {
        bottom: calc(64px + 80px + 1rem);
    }
}

/* --- Gallery grid: ensure cards don't collapse on very small screens --- */
@media (max-width: 375px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Album grid: single column on tiny screens */
    .albums-grid,
    .album-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ========================================
   COOKIE CONSENT BANNER
   ======================================== */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-surface-elevated, #1a1a2e);
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
    color: var(--color-text-secondary, #b0b0b0);
    font-size: 0.875rem;
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent__text {
    margin: 0;
}

.cookie-consent__btn {
    flex-shrink: 0;
    padding: 0.4rem 1.2rem;
    border: none;
    border-radius: 4px;
    background: var(--color-primary, #e53935);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.cookie-consent__btn:hover,
.cookie-consent__btn:focus-visible {
    background: var(--color-primary-dark, #c62828);
}

@media (max-width: 600px) {
    .cookie-consent {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 0.75rem 1rem;
    }
}

/* ===== Albums List: IntersectionObserver fade-in for below-fold cards ===== */
.album-card-modern.album-reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.album-card-modern.album-reveal.album-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.album-card-modern.album-reveal[style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay, 0s);
}
.timeline-album.album-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.timeline-album.album-reveal.album-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .album-card-modern.album-reveal,
    .timeline-album.album-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   ABOUT PAGE - INTERACTIVE BAND TIMELINE
   ======================================== */

.about-timeline-section {
    padding-bottom: 3rem;
}

.about-timeline-intro {
    text-align: center;
    color: var(--text-secondary, #aaa);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* The vertical track line */
.about-timeline-track {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.about-timeline-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--accent-color, #c0392b) 5%,
        var(--accent-color, #c0392b) 95%,
        transparent 100%
    );
    transform: translateX(-50%);
}

/* Decade separator */
.about-timeline-decade {
    position: relative;
    text-align: center;
    margin: 2rem 0 1.5rem;
    z-index: 2;
}

.about-timeline-decade span {
    display: inline-block;
    background: var(--bg-primary, #1a1a2e);
    color: var(--accent-color, #c0392b);
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    padding: 0.3rem 1.5rem;
    border: 2px solid var(--accent-color, #c0392b);
    border-radius: 2rem;
}

/* Timeline item layout */
.about-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    width: 50%;
}

.about-timeline-item--left {
    left: 0;
    padding-right: 2.5rem;
    justify-content: flex-end;
}

.about-timeline-item--right {
    left: 50%;
    padding-left: 2.5rem;
    justify-content: flex-start;
}

/* Center dot on the line */
.about-timeline-dot {
    position: absolute;
    top: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-primary, #1a1a2e);
    border: 3px solid var(--accent-color, #c0392b);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--accent-color, #c0392b);
}

.about-timeline-item--left .about-timeline-dot {
    right: -18px;
}

.about-timeline-item--right .about-timeline-dot {
    left: -18px;
}

.about-timeline-item:hover .about-timeline-dot {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(192, 57, 43, 0.5);
}

/* Memorial item special styling */
.about-timeline-item--memorial .about-timeline-dot {
    border-color: #e8c547;
    color: #e8c547;
    background: #2a2520;
}

.about-timeline-item--memorial .about-timeline-card {
    border-color: rgba(232, 197, 71, 0.3);
    background: linear-gradient(135deg, rgba(42, 37, 32, 0.95), rgba(30, 25, 20, 0.95));
}

.about-timeline-item--memorial .about-timeline-year {
    color: #e8c547;
}

/* Origin item */
.about-timeline-item--origin .about-timeline-dot {
    border-color: #3498db;
    color: #3498db;
}

/* Milestone item */
.about-timeline-item--milestone .about-timeline-dot {
    border-color: #e67e22;
    color: #e67e22;
}

/* Card */
.about-timeline-card {
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    max-width: 360px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-timeline-item:hover .about-timeline-card {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.about-timeline-year {
    display: inline-block;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.3rem;
    color: var(--accent-color, #c0392b);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.about-timeline-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary, #eee);
}

.about-timeline-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary, #aaa);
    margin: 0;
}

.about-timeline-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--accent-color, #c0392b);
    text-decoration: none;
    font-weight: 600;
}

.about-timeline-link:hover {
    text-decoration: underline;
}

/* Scroll-reveal animation */
.about-timeline-item[data-reveal],
.about-timeline-decade[data-reveal] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--index, 0) * 0.08s);
}

.about-timeline-item--left[data-reveal] {
    transform: translateX(-30px);
}

.about-timeline-item--right[data-reveal] {
    transform: translateX(30px);
}

.about-timeline-decade[data-reveal] {
    transform: translateY(20px);
}

.about-timeline-item[data-reveal].revealed,
.about-timeline-decade[data-reveal].revealed {
    opacity: 1;
    transform: translate(0);
}

@media (prefers-reduced-motion: reduce) {
    .about-timeline-item[data-reveal],
    .about-timeline-decade[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Mobile: stack vertically on left */
@media (max-width: 768px) {
    .about-timeline-track::before {
        left: 20px;
    }

    .about-timeline-item {
        width: 100%;
        left: 0;
        padding-left: 3.5rem;
        padding-right: 0;
        justify-content: flex-start;
    }

    .about-timeline-item--left,
    .about-timeline-item--right {
        left: 0;
        padding-left: 3.5rem;
        padding-right: 0;
        justify-content: flex-start;
    }

    .about-timeline-item--left .about-timeline-dot,
    .about-timeline-item--right .about-timeline-dot {
        left: 2px;
        right: auto;
    }

    .about-timeline-item--left[data-reveal],
    .about-timeline-item--right[data-reveal] {
        transform: translateX(30px);
    }

    .about-timeline-card {
        max-width: 100%;
    }

    .about-timeline-decade span {
        font-size: 1.3rem;
        padding: 0.2rem 1.2rem;
    }
}

/* ===== Album Link Hover Preview Tooltip ===== */
.album-preview-tooltip {
    position: absolute;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    width: 260px;
    background: #1a1a24;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    overflow: hidden;
    font-family: var(--font-primary, system-ui, sans-serif);
}
.album-preview-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.album-preview-tooltip__cover {
    width: 100%;
    aspect-ratio: 1;
    background: #12121a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.album-preview-tooltip__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.album-preview-tooltip__cover .album-preview-placeholder {
    font-size: 2.5rem;
    color: rgba(255,255,255,0.15);
}
.album-preview-tooltip__body {
    padding: 0.75rem 1rem;
}
.album-preview-tooltip__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e0e0f0;
    margin: 0 0 0.25rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-preview-tooltip__meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.album-preview-tooltip__meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.album-preview-tooltip--loading .album-preview-tooltip__body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.album-preview-tooltip__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--color-accent, #e53e3e);
    border-radius: 50%;
    animation: albumPreviewSpin 0.6s linear infinite;
}
@keyframes albumPreviewSpin {
    to { transform: rotate(360deg); }
}
[data-theme="light"] .album-preview-tooltip {
    background: var(--bg-primary);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
[data-theme="light"] .album-preview-tooltip__title {
    color: #1a1a2e;
}
[data-theme="light"] .album-preview-tooltip__meta {
    color: rgba(0,0,0,0.5);
}
[data-theme="light"] .album-preview-tooltip__cover {
    background: #f0f0f5;
}
@media (hover: none) {
    .album-preview-tooltip {
        display: none !important;
    }
}

/* -------------------------------------------------------------------
   Homepage Featured Albums: Scroll-Snap Carousel on Mobile (<=480px)
   Converts the 2-col grid to a horizontal swipeable carousel with
   scroll-snap, edge fade indicators, and smooth momentum scrolling.
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
    .homepage .featured-content .albums-grid-modern,
    .homepage .albums-grid-modern {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 1rem;
        gap: 0.75rem;
        padding: 0.5rem 1rem 1.5rem;
        margin-inline: -1rem;
        scrollbar-width: none;
        /* Override grid from the 768px rule */
        grid-template-columns: unset;
    }

    .homepage .featured-content .albums-grid-modern::-webkit-scrollbar,
    .homepage .albums-grid-modern::-webkit-scrollbar {
        display: none;
    }

    .homepage .albums-grid-modern .album-card-modern {
        flex: 0 0 78vw;
        width: 78vw;
        min-width: 0;
        max-width: none;
        scroll-snap-align: center;
    }

    /* Right-edge fade hint: shows there are more items to swipe */
    .homepage .featured-content .albums-grid-modern::after {
        content: "";
        flex: 0 0 1rem; /* spacer so last card can center-snap */
    }

    /* Swipe indicator dots via box-shadow on a pseudo-element */
    .homepage .featured-content .content-block:first-child {
        position: relative;
    }

    .homepage .featured-content .content-block:first-child::after {
        content: "";
        display: block;
        margin: 0.5rem auto 0;
        width: 3.5rem;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.15);
        /* Visual hint that the strip is swipeable */
    }
}

/* On the narrowest phones (<=375px), keep carousel but make cards wider */
@media (max-width: 375px) {
    .homepage .albums-grid-modern .album-card-modern {
        flex: 0 0 85vw;
        width: 85vw;
    }
}

/* ========================================
   MEMORIAL PAGE ENHANCEMENTS
   ======================================== */

/* Portrait photo in hero */
.memorial-page .memorial-hero-portrait {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--memorial-gold, #d4a843);
    box-shadow: 0 0 40px rgba(212, 168, 67, 0.2), 0 0 80px rgba(212, 168, 67, 0.08);
}

.memorial-page .memorial-hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.15) contrast(1.05);
    transition: filter 0.6s ease;
}

.memorial-page .memorial-hero-portrait:hover img {
    filter: sepia(0) contrast(1);
}

/* Drop cap on first bio paragraph */
.memorial-page .memorial-bio-text:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display, 'Bebas Neue', serif);
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    color: var(--memorial-gold, #d4a843);
    font-weight: 400;
}

/* Timeline item hover effects */
.memorial-page .timeline-item {
    transition: transform 0.3s ease;
}

.memorial-page .timeline-item:hover {
    transform: translateX(4px);
}

.memorial-page .timeline-item:hover .timeline-dot {
    background: var(--memorial-amber, #b8860b);
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.5);
    transition: all 0.3s ease;
}

.memorial-page .timeline-dot {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Timeline album links */
.memorial-page .timeline-album-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--memorial-gold, #d4a843);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.memorial-page .timeline-album-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.memorial-page .timeline-album-link .icon {
    color: var(--memorial-amber, #b8860b);
}

/* Album gallery: play icon overlay on hover */
.memorial-page .album-grid-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 48px;
    height: 48px;
    background: rgba(212, 168, 67, 0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Play triangle via clip-path */
    clip-path: polygon(35% 25%, 75% 50%, 35% 75%);
}

.memorial-page .album-grid-item:hover::after {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
}

/* Enhanced quote styling */
.memorial-page .memorial-quote::before {
    content: '\201C';
    position: absolute;
    top: -0.3rem;
    left: 1rem;
    font-size: 4rem;
    color: var(--memorial-gold, #d4a843);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Responsive portrait */
@media (max-width: 480px) {
    .memorial-page .memorial-hero-portrait {
        width: 120px;
        height: 120px;
    }
}

/* Track download button */
.track-download-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.track-download-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #fff);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .track-download-btn {
        width: 36px;
        height: 36px;
    }
}

/* ========================================
   MOBILE UX ENHANCEMENTS (Phase 65)
   Touch targets, safe areas, player controls
   ======================================== */

/* --- iOS Safe Area Insets (requires viewport-fit=cover) --- */
@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .site-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Ensure player respects safe areas */
    .smp-player {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* --- Minimum 44px Touch Targets (WCAG 2.2 AAA) --- */
@media (max-width: 768px) {
    /* Nav toggle / hamburger - ensure 44x44 */
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Search button */
    .search-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Theme toggle */
    .theme-toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Language switcher trigger */
    .lang-current {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Scroll to top button */
    .scroll-to-top-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Cookie consent button */
    .cookie-consent__btn {
        min-height: 44px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Footer links */
    .footer-links a {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }

    /* Nav menu links in mobile hamburger */
    .nav-links-minimal .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
    }

    /* Form inputs - comfortable touch height */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
    }

    /* Submit/action buttons */
    .submit-btn,
    .btn,
    .btn-primary,
    .btn-block {
        min-height: 44px;
    }

    /* Category/filter tabs */
    .sme-tab {
        min-height: 44px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Pagination links */
    .pagination a,
    .pagination span,
    .pagination button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Gallery thumbnails - comfortable tap size */
    .gallery-item {
        min-height: 44px;
    }
}

/* --- Music Player Mobile Controls --- */
@media (max-width: 768px) {
    /* Ensure player control buttons are large enough */
    .smp-controls button,
    .smp-btn,
    .smp-play-btn,
    .smp-prev-btn,
    .smp-next-btn {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Volume slider - better touch grip */
    .smp-volume-slider,
    .smp-progress-bar {
        min-height: 44px;
        cursor: pointer;
        touch-action: none; /* Allow custom drag handling */
    }

    /* Track list items - comfortable tap */
    .smp-track-item {
        min-height: 48px;
        padding: 0.5rem 0.75rem;
    }
}

/* --- Prevent text size adjust on orientation change --- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --- Smooth scrolling with touch overscroll --- */
@media (max-width: 768px) {
    .sme-body,
    .sme-results-scroll,
    .nav-menu.active {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* --- Disable tap highlight and callout on interactive elements --- */
@media (pointer: coarse) {
    button,
    a,
    [role="button"],
    input[type="submit"],
    .smp-track-item,
    .bottom-nav-item {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ========================================
   MICRO-INTERACTIONS (Phase 65)
   ======================================== */

/* --- Card active/press feedback --- */
.album-card-modern:active,
.member-card:active,
.bento-card:active,
.guestbook-entry:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* --- Subtle nav link underline slide-in --- */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-red, #dc2626);
    transition: width 0.25s ease, left 0.25s ease;
    border-radius: 1px;
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    width: 60%;
    left: 20%;
}

/* --- Button press feedback --- */
.submit-btn:active:not(:disabled),
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled) {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

/* --- Form field focus glow --- */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1),
                0 0 12px rgba(220, 38, 38, 0.06);
}

/* --- Guestbook entry new-entry highlight animation --- */
@keyframes gb-newEntry {
    0% {
        opacity: 0;
        transform: translateY(-12px);
        border-color: rgba(220, 38, 38, 0.4);
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.1);
    }
    60% {
        border-color: rgba(220, 38, 38, 0.2);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow: none;
    }
}

.guestbook-entry--new {
    animation: gb-newEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Submit success pulse --- */
@keyframes submitSuccess {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.submit-btn--success {
    background: #059669 !important;
    animation: submitSuccess 0.4s ease;
}

/* ========================================================
   ARTICLE TOOLBAR (reading mode + print buttons)
   ======================================================== */
.article-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.article-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.article-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fafafa);
    border-color: rgba(255, 255, 255, 0.2);
}

.article-tool-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.article-tool-btn.active {
    background: rgba(220, 38, 38, 0.12);
    color: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.3);
}

/* Light theme */
[data-theme="light"] .article-tool-btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    color: #71717a;
}

[data-theme="light"] .article-tool-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #18181b;
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .article-tool-btn.active {
    background: rgba(220, 38, 38, 0.08);
    color: var(--accent-red);
    border-color: rgba(220, 38, 38, 0.25);
}

/* ========================================================
   READING MODE — strips UI, centers content, larger type
   ======================================================== */
.reading-mode .site-header,
.reading-mode footer,
.reading-mode .sticky-share-bar,
.reading-mode .bottom-nav-mobile,
.reading-mode .article-hero-single,
.reading-mode .article-sidebar,
.reading-mode .breadcrumb,
.reading-mode .reading-progress-bar,
.reading-mode .cookie-consent {
    display: none !important;
}

.reading-mode .article-grid-layout {
    display: block;
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

.reading-mode .article-body-modern {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-primary, #fafafa);
}

.reading-mode .article-body-modern h2,
.reading-mode .article-body-modern h3 {
    margin-top: 2em;
    margin-bottom: 0.8em;
}

.reading-mode .article-body-modern p {
    margin-bottom: 1.4em;
}

.reading-mode .article-body-modern img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
}

/* Reading mode exit hint */
.reading-mode .article-toolbar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    margin: 0;
    background: rgba(24, 24, 27, 0.9);
    backdrop-filter: blur(8px);
    padding: 0.35rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .reading-mode .article-toolbar {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Hide print button label in reading mode toolbar */
.reading-mode .article-tool-btn#print-article-btn span {
    display: none;
}

/* Mobile adjustments for reading mode */
@media (max-width: 768px) {
    .reading-mode .article-grid-layout {
        padding: 1.5rem 1rem;
    }

    .reading-mode .article-body-modern {
        font-size: 1.1rem;
        line-height: 1.75;
    }

    .reading-mode .article-toolbar {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* --- Reduced motion: respect user preferences --- */
@media (prefers-reduced-motion: reduce) {
    .smp-player *,
    .bottom-nav-mobile * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .album-card-modern:active,
    .member-card:active,
    .bento-card:active,
    .guestbook-entry:active {
        transform: none;
    }

    .nav-link::after {
        transition: none;
    }

    .submit-btn:active:not(:disabled),
    .btn:active:not(:disabled) {
        transform: none;
    }

    .guestbook-entry--new {
        animation: none;
    }

    .submit-btn--success {
        animation: none;
    }

    .reading-mode .article-toolbar {
        backdrop-filter: none;
    }
}

/* ============================================================
   HOMEPAGE CONTENT-VISIBILITY OPTIMIZATION (Phase 65)
   DISABLED by Phase 97: content-visibility:auto was making homepage
   sections invisible (dark boxes). Replaced with min-height in
   inline style and Phase 97 block at end of file.
   ============================================================ */
/* (Phase 97: removed content-visibility:auto from these selectors) */

/* Phase 65: Focus management for SPA navigation */
#main-content:focus {
    outline: none;
}

/* ===== Phase 65: Image CLS Prevention ===== */
/* Enforce aspect-ratio on img elements within key containers so the browser
   reserves the correct space even before images load. These complement the
   explicit width/height attributes on <img> tags. */

/* Video thumbnail cards (YouTube 4:3 aspect) */
.vp-card__thumb img,
.vp-featured__thumb img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Fan photo cards (JS-rendered without intrinsic dimensions) */
.fan-photos-grid .photo-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Fan photo lightbox image: scale responsively */
#fp-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Memorial hero portrait: circle crop with fixed aspect */
.memorial-hero-portrait img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* Lyrics page album cover thumbnails */
.lyrics-album__cover {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex-shrink: 0;
}

/* Member detail: hero photo */
.member-photo-wrapper img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Member detail: discography album covers */
.member-album-cover img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Other members small photos */
.other-photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Article/news card images */
.bento-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Timeline immersive era covers */
.era-parallax-cover img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Gallery masonry items: let natural aspect-ratio flow but reserve min space */
.photo-masonry-item__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Album cover lightbox */
.acl-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

/* Homepage latest album cover */
.latest-album-cover {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Homepage gallery preview thumbnails */
.gallery-photo-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* File upload preview image */
.file-preview img {
    max-width: 200px;
    max-height: 150px;
    object-fit: contain;
}

/* ═══════════════════════════════════════
   BROKEN IMAGE FALLBACK
   Graceful display when images fail to load
   ═══════════════════════════════════════ */

/* Article/news broken images — show alt text with styled fallback */
.article-content img,
.article-body img,
.news-card__image img {
    position: relative;
    background: var(--bg-secondary, #1a1a2e);
}

.article-content img[alt]::after,
.article-body img[alt]::after {
    content: attr(alt);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-secondary, #8a8a9a);
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem;
    border: 1px dashed var(--border-color, #333);
    border-radius: 4px;
}

/* ═══════════════════════════════════════
   CONTAINER QUERIES — Component-level responsive design
   Cards adapt to their container width, not viewport
   ═══════════════════════════════════════ */

/* Make card grids container query contexts */
.albums-grid,
.news-grid,
.members-grid,
.gallery-grid {
    container-type: inline-size;
    container-name: card-grid;
}

/* Album cards adapt to container width */
@container card-grid (max-width: 500px) {
    .album-card,
    .news-card,
    .member-card,
    .gallery-card {
        /* Stack to single column in narrow containers */
        grid-column: 1 / -1;
    }
    .album-card .album-info h3,
    .news-card .card-content h3 {
        font-size: var(--text-base, 1rem);
    }
}

@container card-grid (min-width: 501px) and (max-width: 800px) {
    .album-card .album-info h3,
    .news-card .card-content h3 {
        font-size: var(--text-lg, 1.15rem);
    }
}

@container card-grid (min-width: 801px) {
    .album-card .album-info h3 {
        font-size: var(--text-xl, 1.35rem);
    }
}

/* ═══════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS (2026 CSS)
   Progressive enhancement — only applies in supporting browsers
   ═══════════════════════════════════════ */

@supports (animation-timeline: view()) {
    /* Cards fade in and slide up as they enter the viewport */
    .album-card,
    .news-card,
    .member-card,
    .gallery-card {
        animation: card-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

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

    /* Section headings animate on scroll */
    .section-title,
    .page-title,
    h1.hero-title,
    .section-header h2 {
        animation: heading-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    @keyframes heading-reveal {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Timeline items stagger animation */
    .timeline-item {
        animation: timeline-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }

    @keyframes timeline-reveal {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Album cover zoom effect tied to scroll */
    .album-hero-cover img {
        animation: cover-parallax linear both;
        animation-timeline: view();
        animation-range: contain 0% contain 100%;
    }

    @keyframes cover-parallax {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.08);
        }
    }
}

/* ═══════════════════════════════════════
   FLUID TYPOGRAPHY — Apply design token scale
   ═══════════════════════════════════════ */

/* Hero titles */
.hero-title,
.hero-section h1 {
    font-size: var(--text-hero, clamp(2.5rem, 1.5rem + 5vw, 5rem));
    text-wrap: balance;
}

/* Page titles */
.page-title,
.section-title {
    font-size: var(--text-3xl, clamp(1.7rem, 1.2rem + 2.5vw, 2.5rem));
    text-wrap: balance;
}

/* Section headings */
.section-header h2,
.content-section h2 {
    font-size: var(--text-2xl, clamp(1.4rem, 1.1rem + 1.5vw, 2rem));
    text-wrap: balance;
}

/* Body text — ensure readability */
.article-content,
.article-body,
.lyrics-text,
.guestbook-message {
    font-size: var(--text-base, clamp(0.9rem, 0.85rem + 0.25vw, 1rem));
    text-wrap: pretty;
}

/* Small text */
.card-overlay-date,
.meta-info,
.breadcrumb,
time {
    font-size: var(--text-sm, clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem));
}

/* ── Lyrics lazy-load spinner ───────────────────────────────── */
.lyrics-track__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-red, #e53935);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
.lyrics-track__loading {
    padding: 1rem;
    color: var(--text-muted, #888);
    font-size: var(--text-sm, 0.875rem);
}

/* ========================================
   WCAG 2.2 AA ACCESSIBILITY FIXES
   ======================================== */

/* --- Footer heading hierarchy fix ---
   Replaced h3/h4 with <p> elements to avoid breaking heading hierarchy.
   These styles replicate the previous heading appearance. */
.footer-brand-name {
    font-family: var(--font-display, 'Bebas Neue', 'Arial Black', sans-serif);
    font-size: var(--font-size-h3, clamp(1.25rem, 2.5vw, 1.75rem));
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-weight: 400;
    color: var(--text-primary);
}

.footer-heading {
    font-family: var(--font-display, 'Bebas Neue', 'Arial Black', sans-serif);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* --- News filter pills: button reset ---
   Filter pills changed from <a> to <button> for proper semantics.
   Ensure button elements get same visual treatment as the old links. */
.filter-pills button.filter-pill {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.filter-pills button.filter-pill:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* --- Members page: h3 member name (was h2) ---
   Preserve visual sizing after heading level change. */
.member-card .member-name {
    font-size: var(--font-size-h3, clamp(1.25rem, 2.5vw, 1.75rem));
}

/* --- Ensure all interactive elements have visible focus indicators --- */
.filter-pill:focus-visible,
.bento-card:focus-visible,
.album-card:focus-visible,
.album-card-modern:focus-visible,
.member-card:focus-visible,
.page-btn:focus-visible,
.gallery-photo-item:focus-visible,
.news-item-modern:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* --- Gallery scroll container keyboard focus indicator --- */
.gallery-scroll-modern:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: var(--radius-md, 8px);
}

/* --- Skip to player link (matches skip-link style) --- */
.skip-link-player {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    padding: 0.75rem 1.5rem;
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link-player:focus {
    top: 0;
}

/* ========================================
   MOBILE UX 2026-2027 (Phase 65)
   Touch targets, safe areas, active states,
   input zoom prevention, tap feedback
   ======================================== */

/* --- 1. ADDITIONAL TOUCH TARGETS (WCAG 2.2 SC 2.5.8 — 44x44 minimum) --- */
@media (max-width: 768px) {
    /* Track download button: was 36px on mobile, needs 44px */
    .track-download-btn {
        width: 44px;
        height: 44px;
    }

    /* Footer social links: ensure comfortable tap height */
    .footer-social-link {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Breadcrumb links */
    .breadcrumb a,
    .breadcrumb span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Album cover lightbox thumbnails */
    .cover-lightbox-thumb {
        min-width: 44px;
        min-height: 44px;
    }

    /* Keyboard hint button in footer */
    .footer-keyboard-hint {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Events decade filter tabs */
    .decade-tab,
    .filter-tab {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Gallery detail photo items — ensure the clickable area is large enough */
    .gallery-detail-item a,
    .gallery-detail-item button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Streaming platform badge links on album pages */
    .streaming-link,
    .streaming-badge {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Video category tabs */
    .video-tab,
    .video-filter-btn {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Share popup buttons */
    .share-popup-btn,
    .share-option {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- 2. TAP FEEDBACK — custom active states for touch devices --- */
@media (pointer: coarse) {
    /* Links — brief opacity dim on tap */
    a:active:not(.skip-link):not(.skip-link-player) {
        opacity: 0.7;
        transition: opacity 0.05s ease;
    }

    /* Buttons — scale-down press effect */
    button:active:not(:disabled),
    [role="button"]:active:not(:disabled),
    input[type="submit"]:active:not(:disabled) {
        transform: scale(0.97);
        transition: transform 0.06s ease;
    }

    /* Nav links in mobile menu — highlight background on tap */
    .nav-links-minimal .nav-link:active {
        background: rgba(220, 38, 38, 0.18);
        opacity: 1;
    }

    /* Footer links — subtle highlight */
    .footer-links a:active,
    .footer-social-link:active {
        background: rgba(220, 38, 38, 0.2);
        opacity: 1;
    }

    /* Track list items — row highlight on tap */
    .track-item:active {
        background: rgba(220, 38, 38, 0.08);
    }

    /* Gallery items — dim on tap */
    .gallery-photo-item:active,
    .gallery-detail-item:active {
        opacity: 0.85;
        transition: opacity 0.05s ease;
    }

    /* Pagination buttons — press effect */
    .pagination a:active,
    .pagination-modern a:active,
    .page-btn:active {
        transform: scale(0.93);
        transition: transform 0.06s ease;
    }

    /* Cookie consent accept button */
    .cookie-consent__btn:active {
        transform: scale(0.95);
        background: var(--accent-hover, #b91c1c);
    }

    /* Bottom nav items — brief color flash */
    .bottom-nav-item:active {
        background: rgba(220, 38, 38, 0.15);
        transition: background 0.05s ease;
    }

    /* Album cards — press-down effect */
    .album-card-modern:active,
    .album-card:active {
        transform: scale(0.97);
        transition: transform 0.06s ease;
    }
}

/* --- 3. SAFE AREA INSETS — notched devices (iPhone X+, Dynamic Island) --- */
@supports (padding: env(safe-area-inset-bottom)) {
    /* Cookie consent banner — fixed at bottom, needs safe-area clearance */
    .cookie-consent {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        padding-left: calc(1.5rem + env(safe-area-inset-left));
        padding-right: calc(1.5rem + env(safe-area-inset-right));
    }

    /* Music player — fixed at bottom */
    .smp-player {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Bottom mobile navigation — fixed at bottom */
    .bottom-nav-mobile {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Scroll-to-top button — account for safe area */
    [data-scroll-top] {
        bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        [data-scroll-top] {
            bottom: calc(64px + 1rem + env(safe-area-inset-bottom));
        }
    }
}

/* --- 4. INPUT ZOOM PREVENTION — iOS auto-zooms when font-size < 16px --- */
@media (max-width: 768px) {
    /* Comprehensive selector for all form inputs */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

/* --- 5. overscroll-behavior for fixed/scrollable panels --- */
@media (max-width: 768px) {
    /* Prevent pull-to-refresh interference on scrollable panels */
    .smp-playlist,
    .gallery-slideshow,
    .search-results-scroll,
    .lyrics-accordion {
        overscroll-behavior-y: contain;
    }
}

/* --- 6. HOVER MEDIA QUERY — disable hover transforms on touch-only devices --- */
@media (hover: none) {
    /* Prevent sticky-hover on touch (where :hover stays after tap) */
    .track-play-btn:hover {
        transform: none;
    }

    .track-add-to-queue-btn:hover {
        transform: none;
    }

    .track-download-btn:hover {
        transform: none;
    }

    .album-card-modern:hover {
        transform: none;
    }

    .footer-social-link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.65);
    }

    .scroll-to-top-btn:hover {
        transform: none;
    }
}

/* ========================================
   BOTTOM MOBILE NAVIGATION (Phase 71)
   Fixed tab bar at viewport bottom for quick access on mobile.
   Rendered by partials/bottom-nav-mobile.ejs.
   ======================================== */

/* Only visible on mobile (<=768px) — critical CSS hides it on desktop */
.bottom-nav-mobile {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bottom-nav-container {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 100%;
    height: 60px;
    padding: 0;
    margin: 0 auto;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-muted, #9ca3af);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 4px;
    min-width: 48px;
    min-height: 48px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bottom-nav-item:hover {
    color: var(--text-secondary, #d1d5db);
}

.bottom-nav-item.active {
    color: var(--accent-red, #dc2626);
}

.bottom-nav-item:active {
    background: rgba(220, 38, 38, 0.08);
}

.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bottom-nav-icon svg {
    width: 22px;
    height: 22px;
}

.bottom-nav-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Body offset when bottom nav is present */
body.has-bottom-nav {
    padding-bottom: 60px;
}

body.has-bottom-nav .smp-player {
    bottom: 60px;
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav-mobile {
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.has-bottom-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    body.has-bottom-nav .smp-player {
        bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* Light theme */
:root[data-theme="light"] .bottom-nav-mobile {
    background: rgba(255, 255, 255, 0.97);
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item {
        transition: none;
    }
}

/* Hide bottom nav on desktop */
@media (min-width: 769px) {
    .bottom-nav-mobile {
        display: none !important;
    }

    body.has-bottom-nav {
        padding-bottom: 0;
    }

    body.has-bottom-nav .smp-player {
        bottom: 0;
    }
}

/* ========================================
   MOBILE MENU LANGUAGE SWITCHER (Phase 71)
   Inline language switcher inside hamburger menu.
   ======================================== */

.nav-menu-lang {
    display: none; /* hidden by default, shown when menu is active via critical CSS */
}

.nav-menu-lang__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted, #9ca3af);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 8px);
    transition: all 0.2s ease;
}

.nav-menu-lang__link:hover {
    color: var(--text-primary, #ffffff);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
}

.nav-menu-lang__link.active {
    color: var(--accent-red, #dc2626);
    border-color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .nav-menu-lang__link {
    color: var(--text-muted, #6b7280);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .nav-menu-lang__link:hover {
    color: var(--text-primary, #111827);
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-menu-lang__link.active {
    color: var(--accent-red, #dc2626);
    border-color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.06);
}

/* ========================================
   MOBILE MENU BODY LOCK (Phase 71)
   Prevent background scrolling when hamburger menu is open.
   ======================================== */

body.nav-open {
    overflow: hidden;
}

@media (max-width: 1200px) {
    /* Ensure nav backdrop covers screen when menu is open */
    .nav-menu.active .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    /* Make mobile menu scrollable if too many items */
    .nav-menu.active {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* ========================================================================
   Phase 72: Visual Polish
   Tasteful refinements for a rock band memorial/history site.
   Dark theme with red accents. Nothing flashy — respectful and elegant.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. Page Transitions — smooth fade-in on load
   --------------------------------------------------------------------------- */

@keyframes vp-page-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Animate the SPA swap container on every navigation/load */
#swup {
    animation: vp-page-fadein 0.4s ease-out both;
}

/* Respect reduced-motion globally for all Phase 72 animations */
@media (prefers-reduced-motion: reduce) {
    #swup,
    .vp-reveal,
    .vp-skeleton-shimmer,
    .vp-memorial-candle-glow .memorial-icon {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   2. Card Hover Effects — subtle lift + shadow (unified)
   These use low specificity so page-specific overrides still win.
   --------------------------------------------------------------------------- */

/* Album cards (non-homepage — homepage already has its own hover) */
.albums-page .album-card-modern {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.albums-page .album-card-modern:hover {
    transform: translateY(-5px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(220, 38, 38, 0.2);
}

/* Article / News bento cards */
.bento-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(220, 38, 38, 0.25);
}

/* Member cards */
.members-page .member-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Event cards */
.event-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

/* Light theme card hover adjustments */
[data-theme="light"] .bento-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .event-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------------------------------------
   3. Typography Polish — heading hierarchy, letter-spacing, hero text-shadow
   --------------------------------------------------------------------------- */

/* Section headings: slightly wider tracking for display font */
.section-title,
.page-header h1,
.page-title {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Hero section text-shadow for depth against video/image backgrounds */
.hero-title {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(220, 38, 38, 0.15);
}

.hero-subtitle {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Subheadings within articles: subtle accent underline */
.typography-content h2 {
    padding-bottom: 0.3em;
    border-bottom: 2px solid rgba(220, 38, 38, 0.15);
    margin-bottom: 1em;
}

.typography-content h3 {
    letter-spacing: 0.02em;
}

/* Light theme article heading border */
[data-theme="light"] .typography-content h2 {
    border-bottom-color: rgba(220, 38, 38, 0.12);
}

/* ---------------------------------------------------------------------------
   4. Image Treatments — grayscale-to-color on hover, consistent rounding
   --------------------------------------------------------------------------- */

/* Gallery thumbnails: desaturated at rest, full color on hover */
.gallery-card .gallery-card-bg {
    filter: grayscale(30%) brightness(0.9);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.gallery-card:hover .gallery-card-bg {
    filter: grayscale(0%) brightness(1);
}

/* Fan photos and gallery images */
.fan-photo-card img,
.gallery-thumbnail img {
    border-radius: var(--radius-md, 8px);
    transition: filter 0.35s ease, transform 0.35s ease;
    filter: grayscale(20%);
}

.fan-photo-card:hover img,
.gallery-thumbnail:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* Member photos: softer treatment */
.members-page .member-photo-container img {
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Deceased member photos stay slightly desaturated even on hover */
.members-page .member-card.deceased .member-photo-container img {
    filter: grayscale(40%) brightness(0.85);
}

.members-page .member-card.deceased:hover .member-photo-container img {
    filter: grayscale(20%) brightness(0.9);
}

/* ---------------------------------------------------------------------------
   5. Scroll-Driven Reveal Animations (progressive enhancement)
   Adds reveal for sections that don't already have scroll animations.
   --------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @keyframes vp-section-reveal {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Memorial section: solemn fade-in */
    .memorial-modern,
    .memorial-section {
        animation: vp-section-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    /* Gallery cards */
    .gallery-grid .gallery-card {
        animation: vp-section-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    /* Event cards */
    .events-list .event-card,
    .events-grid .event-card {
        animation: vp-section-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    /* Member cards on members page */
    .members-grid .member-card {
        animation: vp-section-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    @media (prefers-reduced-motion: reduce) {
        .memorial-modern,
        .memorial-section,
        .gallery-grid .gallery-card,
        .events-list .event-card,
        .events-grid .event-card,
        .members-grid .member-card {
            animation: none;
        }
    }
}

/* ---------------------------------------------------------------------------
   6. Button Polish — consistent red accent with hover glow
   --------------------------------------------------------------------------- */

/* Universal accent button style */
.btn-primary,
.btn-accent,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost) {
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-accent:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):hover {
    background: var(--accent-hover, #b91c1c);
    box-shadow:
        0 4px 16px rgba(220, 38, 38, 0.35),
        0 0 24px rgba(220, 38, 38, 0.15);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-accent:active,
button[type="submit"]:not(.btn-secondary):not(.btn-ghost):active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* Ghost / outline variant glow on hover */
.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover {
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.12);
}

/* ---------------------------------------------------------------------------
   7. Loading States — skeleton shimmer utility class
   --------------------------------------------------------------------------- */

@keyframes vp-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.vp-skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.04) 80%
    );
    background-size: 200% 100%;
    animation: vp-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-sm, 4px);
}

[data-theme="light"] .vp-skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.04) 80%
    );
    background-size: 200% 100%;
}

.vp-skeleton-shimmer--text {
    height: 1em;
    width: 60%;
    margin-bottom: 0.5em;
}

.vp-skeleton-shimmer--card {
    height: 200px;
    width: 100%;
}

.vp-skeleton-shimmer--avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .vp-skeleton-shimmer {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   8. Memorial Section — enhanced candle flicker, respectful dark tones
   --------------------------------------------------------------------------- */

/* More organic candle flicker with randomized feel */
@keyframes vp-candle-organic {
    0%   { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.15)); transform: scale(1); }
    15%  { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.6))  drop-shadow(0 0 35px rgba(245, 158, 11, 0.2));  transform: scale(1.02); }
    30%  { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4))   drop-shadow(0 0 20px rgba(245, 158, 11, 0.12)); transform: scale(0.99); }
    50%  { filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.65)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.25)); transform: scale(1.01); }
    70%  { filter: drop-shadow(0 0 11px rgba(245, 158, 11, 0.5))  drop-shadow(0 0 28px rgba(245, 158, 11, 0.18)); transform: scale(1); }
    85%  { filter: drop-shadow(0 0 13px rgba(245, 158, 11, 0.55)) drop-shadow(0 0 32px rgba(245, 158, 11, 0.22)); transform: scale(1.015); }
    100% { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.15)); transform: scale(1); }
}

/* Apply organic candle to memorial sections (overrides simpler Phase 55 animation) */
.memorial-modern .memorial-icon,
.memorial-section .memorial-icon,
.memorial-page .memorial-icon {
    animation: vp-candle-organic 4s ease-in-out infinite;
}

/* Memorial section: deeper dark background for solemnity */
.memorial-modern,
.memorial-section {
    background: linear-gradient(
        180deg,
        rgba(3, 3, 3, 0.95) 0%,
        rgba(15, 10, 5, 0.98) 50%,
        rgba(3, 3, 3, 0.95) 100%
    );
    border-top: 1px solid rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.08);
}

/* Memorial text: warm but muted tones */
.memorial-modern .memorial-dates,
.memorial-section .memorial-dates {
    color: rgba(245, 158, 11, 0.7);
    letter-spacing: 0.1em;
}

.memorial-modern .memorial-text,
.memorial-section .memorial-text {
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.8;
}

/* Light theme memorial: keep it dark and solemn regardless */
[data-theme="light"] .memorial-modern,
[data-theme="light"] .memorial-section {
    background: linear-gradient(
        180deg,
        #1a1510 0%,
        #0f0c08 50%,
        #1a1510 100%
    );
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .memorial-modern .memorial-title,
[data-theme="light"] .memorial-section .memorial-title {
    color: var(--text-primary);
}

[data-theme="light"] .memorial-modern .memorial-text,
[data-theme="light"] .memorial-section .memorial-text {
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   9. Footer Polish — link hover effects, social icon animations
   --------------------------------------------------------------------------- */

/* Footer navigation links: subtle underline slide effect */
.site-footer a:not(.footer-social-link) {
    position: relative;
    transition: color 0.2s ease;
}

.site-footer a:not(.footer-social-link)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-red, #dc2626);
    transition: width 0.3s ease;
}

.site-footer a:not(.footer-social-link):hover::after {
    width: 100%;
}

/* Social icons: slight scale bounce on hover */
.footer-social-link {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.footer-social-link:hover {
    transform: translateY(-2px);
}

.footer-social-link:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Footer section headings */
.site-footer h3,
.site-footer h4,
.footer-heading {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

[data-theme="light"] .site-footer h3,
[data-theme="light"] .site-footer h4,
[data-theme="light"] .footer-heading {
    color: rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
   10. Print Improvements — hide non-essential elements
   --------------------------------------------------------------------------- */

@media print {
    /* Hide interactive / decorative elements */
    .site-header,
    .site-footer,
    .bottom-nav-mobile,
    .reading-progress,
    .search-btn,
    .theme-toggle-btn,
    .nav-toggle,
    .skip-link,
    .skip-link-player,
    .cookie-consent,
    .toast-container,
    .share-popup,
    .keyboard-shortcuts-modal,
    .page-loader,
    #search-modal-container,
    .hero-background video,
    .hero-quick-play-btn,
    .album-card-quick-play,
    .btn-guestbook,
    .footer-social-links,
    .streaming-badges,
    .back-to-top,
    .smp-player,
    .gallery-slideshow,
    .scroll-indicator {
        display: none !important;
    }

    /* Ensure content fills the page */
    #swup {
        animation: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    /* Remove decorative borders and shadows */
    .bento-card,
    .album-card-modern,
    .member-card,
    .event-card,
    .gallery-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    /* Links: show URL */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
        word-break: break-all;
    }

    /* Ensure images print cleanly */
    img {
        filter: none !important;
        max-width: 100% !important;
    }

    /* Memorial section: print-friendly */
    .memorial-modern,
    .memorial-section {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        padding: 1rem !important;
    }

    .memorial-modern .memorial-title,
    .memorial-section .memorial-title {
        color: #000 !important;
    }

    .memorial-modern .memorial-text,
    .memorial-section .memorial-text {
        color: #333 !important;
        font-style: italic;
    }
}

/* === End Phase 72: Visual Polish === */

/* === Phase 73: Article Reading Experience === */

/* --- Article Hero Fallback for broken images --- */
.article-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 70%, #0f3460 100%);
    position: absolute;
    inset: 0;
}

.article-hero-fallback svg {
    opacity: 0.12;
    animation: p73-vinyl-spin 12s linear infinite;
}

@keyframes p73-vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Broken image fallback inside article content --- */
.article-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    max-width: 400px;
    margin: 1.5rem auto;
    padding: 2rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #111 0%, #1a1a2e 50%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.15);
}

.article-img-fallback svg {
    animation: p73-vinyl-spin 10s linear infinite;
}

/* --- Drop Cap for first paragraph --- */
.typography-content > p:first-of-type::first-letter {
    float: left;
    font-family: 'Cinzel', var(--font-heading, serif);
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.08em;
    padding-top: 0.05em;
    margin-right: 0.04em;
    color: var(--neon-red, #e63946);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(230, 57, 70, 0.3);
}

/* --- Improved Blockquote Styling --- */
.typography-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-left: 4px solid var(--neon-red, #e63946);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.typography-content blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.2em;
    left: 0.15em;
    font-size: 4em;
    font-family: 'Cinzel', serif;
    color: var(--neon-red, #e63946);
    opacity: 0.2;
    line-height: 1;
    pointer-events: none;
}

.typography-content blockquote p {
    margin: 0 0 0.5em;
}

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

/* Blockquote attribution (cite or footer inside blockquote) */
.typography-content blockquote cite,
.typography-content blockquote footer {
    display: block;
    margin-top: 1em;
    font-style: normal;
    font-size: 0.9em;
    color: var(--text-muted);
}

.typography-content blockquote cite::before,
.typography-content blockquote footer::before {
    content: '\2014\00a0';
}

/* --- Code / Pre Block Styling --- */
.typography-content pre {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: #e6edf3;
    -webkit-overflow-scrolling: touch;
}

.typography-content code {
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: #ff7b72;
}

.typography-content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

/* --- Article Meta Grid enhancements --- */
.article-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

.meta-item-modern {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.meta-item-modern .icon {
    opacity: 0.7;
    flex-shrink: 0;
}

/* --- Previous / Next Article Navigation --- */
.article-prev-next-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.prev-next-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.prev-next-link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--neon-red, #e63946);
    transform: translateY(-2px);
}

.prev-next-link.empty {
    visibility: hidden;
}

.prev-next-link.next-link {
    text-align: right;
    align-items: flex-end;
}

.prev-next-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neon-red, #e63946);
    font-weight: 600;
}

.next-link .prev-next-label {
    justify-content: flex-end;
}

.prev-next-title {
    font-size: 0.95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Back to Articles center link */
.back-to-articles-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    align-self: center;
}

.back-to-articles-link:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.back-to-articles-link .icon {
    opacity: 0.7;
    flex-shrink: 0;
}

/* --- Smooth scroll for article page --- */
.article-page-layout {
    scroll-behavior: smooth;
}

/* --- Article breadcrumb chevron icons --- */
.article-breadcrumbs-modern .icon {
    opacity: 0.5;
    margin: 0 0.15rem;
    vertical-align: middle;
}

/* --- Mobile responsive prev/next --- */
@media (max-width: 768px) {
    .article-prev-next-nav {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1.5rem 1rem;
    }

    .back-to-articles-link {
        order: -1;
        margin-bottom: 0.5rem;
    }

    .prev-next-link.next-link {
        text-align: left;
        align-items: flex-start;
    }

    .next-link .prev-next-label {
        justify-content: flex-start;
    }

    /* Drop cap smaller on mobile */
    .typography-content > p:first-of-type::first-letter {
        font-size: 2.8em;
    }
}

@media (max-width: 480px) {
    .typography-content > p:first-of-type::first-letter {
        font-size: 2.4em;
    }

    .article-img-fallback {
        min-height: 80px;
        max-width: 100%;
        padding: 1.5rem;
    }
}

/* --- Light theme overrides --- */
[data-theme="light"] .article-img-fallback {
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8f0 50%, #dde0e8 100%);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .typography-content blockquote {
    background: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .typography-content blockquote cite,
[data-theme="light"] .typography-content blockquote footer {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .typography-content pre {
    background: #f6f8fa;
    border-color: rgba(0, 0, 0, 0.1);
    color: #24292f;
}

[data-theme="light"] .typography-content code {
    background: rgba(0, 0, 0, 0.06);
    color: #cf222e;
}

[data-theme="light"] .prev-next-link {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .prev-next-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .back-to-articles-link {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .back-to-articles-link:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.04);
}

/* --- Series / Chapter Navigation --- */
.series-nav {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.5rem 2rem;
    margin: 0;
}

.series-nav__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.series-nav__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    flex: 1;
}

.series-nav__progress {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.series-nav__chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.series-nav__chapter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    max-width: 220px;
    overflow: hidden;
}

.series-nav__chapter:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    text-decoration: none;
}

.series-nav__chapter--current {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    font-weight: 600;
}

.series-nav__num {
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.series-nav__chapter--current .series-nav__num {
    color: var(--accent-red-light);
}

.series-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-nav__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.series-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.series-nav__btn:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
    color: var(--text-primary);
    text-decoration: none;
}

.series-nav__btn--disabled {
    visibility: hidden;
}

[data-theme="light"] .series-nav {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .series-nav__title {
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .series-nav__progress {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .series-nav__chapter {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .series-nav__chapter:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .series-nav__chapter--current {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
    color: #b91c1c;
}

[data-theme="light"] .series-nav__num {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .series-nav__chapter--current .series-nav__num {
    color: var(--accent-red);
}

[data-theme="light"] .series-nav__btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .series-nav__btn:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    .series-nav {
        padding: 1.25rem 1rem;
    }
    .series-nav__chapters {
        gap: 0.3rem;
    }
    .series-nav__chapter {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        max-width: 160px;
    }
    .series-nav__controls {
        flex-direction: row;
    }
}

@media print {
    .series-nav { display: none; }
}

[data-theme="light"] .meta-item-modern {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .article-hero-fallback {
    background: linear-gradient(135deg, #ddd 0%, #c8c8d8 40%, #b8c0d0 70%, #a0b0c8 100%);
}

/* --- Print: hide nav, show content cleanly --- */
@media print {
    .article-prev-next-nav,
    .sticky-share-bar,
    .related-section-modern {
        display: none !important;
    }

    .typography-content > p:first-of-type::first-letter {
        color: #000;
        text-shadow: none;
    }
}

/* === End Phase 73: Article Reading Experience === */

/* === Phase 74: Memorial Page Enhancement === */

/* -----------------------------------------------------------
   1. Floating Light Particles (pure CSS, no JS)
   ----------------------------------------------------------- */
.memorial-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.memorial-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.6), transparent);
    border-radius: 50%;
    animation: memorial-particle-float linear infinite;
    opacity: 0;
}

.memorial-particle:nth-child(1) {
    left: 10%;
    bottom: -5%;
    animation-duration: 18s;
    animation-delay: 0s;
    width: 2px;
    height: 2px;
}
.memorial-particle:nth-child(2) {
    left: 25%;
    bottom: -5%;
    animation-duration: 22s;
    animation-delay: 3s;
    width: 4px;
    height: 4px;
}
.memorial-particle:nth-child(3) {
    left: 40%;
    bottom: -5%;
    animation-duration: 16s;
    animation-delay: 1s;
}
.memorial-particle:nth-child(4) {
    left: 55%;
    bottom: -5%;
    animation-duration: 24s;
    animation-delay: 5s;
    width: 2px;
    height: 2px;
}
.memorial-particle:nth-child(5) {
    left: 70%;
    bottom: -5%;
    animation-duration: 20s;
    animation-delay: 2s;
    width: 4px;
    height: 4px;
}
.memorial-particle:nth-child(6) {
    left: 85%;
    bottom: -5%;
    animation-duration: 19s;
    animation-delay: 7s;
}
.memorial-particle:nth-child(7) {
    left: 15%;
    bottom: -5%;
    animation-duration: 25s;
    animation-delay: 4s;
    width: 2px;
    height: 2px;
}
.memorial-particle:nth-child(8) {
    left: 65%;
    bottom: -5%;
    animation-duration: 21s;
    animation-delay: 6s;
}

@keyframes memorial-particle-float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.3;
        transform: translateY(-50vh) translateX(20px);
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(-110vh) translateX(-15px);
        opacity: 0;
    }
}

/* -----------------------------------------------------------
   2. Enhanced Candle/Flame Animation (multi-layer realistic)
   ----------------------------------------------------------- */

/* New flame-mid layer for depth */
.memorial-page .candle-flame .flame-mid {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 30px;
    background: radial-gradient(ellipse at center bottom, #ffe080 0%, #ff9500 50%, transparent 100%);
    border-radius: 50% 50% 35% 35%;
    animation: memorial-flame-mid 1.8s ease-in-out infinite alternate;
    z-index: 1;
}

/* Sparks rising from the flame */
.memorial-page .flame-spark {
    position: absolute;
    bottom: 32px;
    left: 50%;
    width: 2px;
    height: 2px;
    background: #ffcc44;
    border-radius: 50%;
    opacity: 0;
    animation: memorial-flame-spark 3s ease-out infinite;
    z-index: 3;
}

.memorial-page .flame-spark-2 {
    animation-delay: 1.5s;
    left: calc(50% + 4px);
}

/* Candle smoke above the flame */
.memorial-page .candle-smoke {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 30px;
    background: linear-gradient(to top, rgba(200, 180, 160, 0.08), transparent);
    border-radius: 50%;
    filter: blur(3px);
    animation: memorial-smoke-rise 4s ease-out infinite;
    opacity: 0.3;
}

/* Candle wax drips */
.memorial-page .candle-drip {
    position: absolute;
    top: 2px;
    right: -2px;
    width: 5px;
    height: 12px;
    background: linear-gradient(180deg, #f5e6c8, #e8d5b0);
    border-radius: 0 0 50% 50%;
    animation: memorial-drip 8s ease-in-out infinite;
}

.memorial-page .candle-drip-2 {
    right: auto;
    left: -1px;
    width: 4px;
    height: 8px;
    animation-delay: 4s;
    animation-duration: 10s;
}

/* Override base flame-outer for more realistic motion */
.memorial-page .flame-outer {
    animation: memorial-flame-outer 2.2s ease-in-out infinite alternate !important;
}

.memorial-page .flame-inner {
    animation: memorial-flame-inner 1.4s ease-in-out infinite alternate !important;
}

.memorial-page .flame-glow {
    animation: memorial-glow-enhanced 3.5s ease-in-out infinite alternate !important;
    width: 100px !important;
    height: 100px !important;
    background: radial-gradient(circle, rgba(255, 204, 68, 0.2) 0%, rgba(255, 153, 0, 0.08) 40%, transparent 70%) !important;
}

@keyframes memorial-flame-outer {
    0%   { transform: translateX(-50%) scale(1) rotate(-1.5deg); opacity: 1; }
    12%  { transform: translateX(-50%) scale(1.04) rotate(1deg); opacity: 0.94; }
    28%  { transform: translateX(-50%) scale(0.96) rotate(-0.5deg); opacity: 1; }
    45%  { transform: translateX(-50%) scale(1.06) rotate(1.5deg); opacity: 0.9; }
    62%  { transform: translateX(-50%) scale(0.98) rotate(-1deg); opacity: 0.97; }
    78%  { transform: translateX(-50%) scale(1.02) rotate(0.5deg); opacity: 0.93; }
    100% { transform: translateX(-50%) scale(0.97) rotate(-2deg); opacity: 1; }
}

@keyframes memorial-flame-inner {
    0%   { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
    20%  { transform: translateX(-50%) scaleY(1.1) scaleX(0.95); opacity: 1; }
    40%  { transform: translateX(-50%) scaleY(0.92) scaleX(1.05); opacity: 0.88; }
    60%  { transform: translateX(-50%) scaleY(1.08) scaleX(0.98); opacity: 0.95; }
    80%  { transform: translateX(-50%) scaleY(0.96) scaleX(1.02); opacity: 0.85; }
    100% { transform: translateX(-50%) scaleY(1.05) scaleX(0.97); opacity: 0.92; }
}

@keyframes memorial-flame-mid {
    0%   { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.85; }
    33%  { transform: translateX(-50%) scale(1.05) rotate(1deg); opacity: 0.9; }
    66%  { transform: translateX(-50%) scale(0.95) rotate(-1deg); opacity: 0.82; }
    100% { transform: translateX(-50%) scale(1.02) rotate(0.5deg); opacity: 0.88; }
}

@keyframes memorial-glow-enhanced {
    0%   { opacity: 0.4; transform: translateX(-50%) scale(1); }
    30%  { opacity: 0.65; transform: translateX(-50%) scale(1.08); }
    60%  { opacity: 0.45; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 0.7; transform: translateX(-50%) scale(1.12); }
}

@keyframes memorial-flame-spark {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
        transform: translateX(calc(-50% + 5px)) translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-50% - 3px)) translateY(-40px);
    }
}

@keyframes memorial-smoke-rise {
    0% {
        transform: translateX(-50%) translateY(0) scaleX(1);
        opacity: 0.15;
    }
    50% {
        transform: translateX(calc(-50% + 5px)) translateY(-15px) scaleX(1.5);
        opacity: 0.08;
    }
    100% {
        transform: translateX(calc(-50% - 3px)) translateY(-30px) scaleX(2);
        opacity: 0;
    }
}

@keyframes memorial-drip {
    0%, 70% {
        height: 12px;
        opacity: 0.8;
    }
    85% {
        height: 18px;
        opacity: 0.6;
    }
    100% {
        height: 12px;
        opacity: 0.8;
    }
}

/* -----------------------------------------------------------
   3. Enhanced Portrait Photo Presentation
   ----------------------------------------------------------- */
.memorial-page .memorial-hero-portrait {
    width: 180px !important;
    height: 180px !important;
    border: 3px solid var(--memorial-gold, #d4a843) !important;
    box-shadow:
        0 0 0 6px rgba(212, 168, 67, 0.1),
        0 0 40px rgba(212, 168, 67, 0.25),
        0 0 80px rgba(212, 168, 67, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
    transition: box-shadow 0.6s ease, transform 0.6s ease !important;
}

.memorial-page .memorial-hero-portrait:hover {
    box-shadow:
        0 0 0 6px rgba(212, 168, 67, 0.15),
        0 0 50px rgba(212, 168, 67, 0.35),
        0 0 100px rgba(212, 168, 67, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.03);
}

/* -----------------------------------------------------------
   4. Enhanced Quote Typography
   ----------------------------------------------------------- */
.memorial-page .memorial-quote-enhanced {
    position: relative;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
    padding: 3rem 3rem 3rem 3.5rem !important;
    margin: 3rem 0 !important;
    border-left: 4px solid var(--memorial-amber, #b8860b) !important;
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.06) 0%, rgba(212, 168, 67, 0.02) 100%) !important;
    border-radius: 0 12px 12px 0 !important;
}

.memorial-page .memorial-quote-enhanced .memorial-quote-mark::before {
    content: '\201C';
    position: absolute;
    top: 0.5rem;
    left: 0.8rem;
    font-size: 5rem;
    color: var(--memorial-gold, #d4a843);
    opacity: 0.15;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
}

.memorial-page .memorial-quote-enhanced .memorial-quote-text {
    position: relative;
    font-style: italic;
    color: var(--memorial-gold, #d4a843);
    line-height: 1.8;
    letter-spacing: 0.01em;
    margin: 0;
}

/* -----------------------------------------------------------
   5. Years of Creation Counter (CSS-only animation)
   ----------------------------------------------------------- */
.memorial-creation-counter {
    background: var(--memorial-dark, #1a1510);
    border-top: 1px solid var(--memorial-border, rgba(212, 168, 67, 0.2));
    border-bottom: 1px solid var(--memorial-border, rgba(212, 168, 67, 0.2));
}

.creation-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.creation-stat-card {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(212, 168, 67, 0.04);
    border: 1px solid var(--memorial-border, rgba(212, 168, 67, 0.15));
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.creation-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(212, 168, 67, 0.12);
}

.creation-stat-card.creation-stat-primary {
    background: rgba(212, 168, 67, 0.08);
    border-color: rgba(212, 168, 67, 0.3);
}

.creation-stat-number {
    font-family: var(--font-primary, 'Bebas Neue', sans-serif);
    font-size: clamp(2.8rem, 5vw, 4rem);
    color: var(--memorial-gold, #d4a843);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

/* CSS @property counter animation */
@property --memorial-counter-num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.counter-animated {
    font-variant-numeric: tabular-nums;
}

.creation-stat-label {
    font-family: var(--font-secondary, 'Inter', sans-serif);
    font-size: 0.95rem;
    color: var(--memorial-text, #e8dcc8);
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.creation-stat-sublabel {
    font-family: var(--font-secondary, 'Inter', sans-serif);
    font-size: 0.8rem;
    color: var(--memorial-text-muted, #a89880);
    letter-spacing: 0.1em;
    margin-top: 0.35rem;
}

/* -----------------------------------------------------------
   6. Enhanced Timeline with Connecting Lines and Dot Pulses
   ----------------------------------------------------------- */
.memorial-page .timeline-enhanced .timeline-dot {
    position: relative;
}

.memorial-page .timeline-enhanced .timeline-dot-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--memorial-amber, #b8860b);
    opacity: 0;
    animation: memorial-dot-pulse 3s ease-out infinite;
}

.memorial-page .timeline-enhanced .timeline-item:hover .timeline-dot-pulse {
    animation-duration: 1.5s;
}

@keyframes memorial-dot-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Timeline content wrapper for card styling */
.memorial-page .timeline-enhanced .timeline-content {
    background: rgba(212, 168, 67, 0.03);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.memorial-page .timeline-enhanced .timeline-item:hover .timeline-content {
    background: rgba(212, 168, 67, 0.06);
    border-color: var(--memorial-border, rgba(212, 168, 67, 0.15));
}

/* Year marker decorative line from dot to content */
.memorial-page .timeline-enhanced .timeline-item::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 13px;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--memorial-amber, #b8860b), transparent);
    opacity: 0.3;
}

/* Override final timeline item dot animation */
.memorial-page .timeline-enhanced .timeline-final .timeline-dot {
    background: var(--memorial-amber, #b8860b);
}

.memorial-page .timeline-enhanced .timeline-final .timeline-dot-pulse {
    animation: memorial-dot-pulse-final 2s ease-out infinite;
}

@keyframes memorial-dot-pulse-final {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.4);
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
        box-shadow: 0 0 15px 5px rgba(212, 168, 67, 0);
    }
}

/* Data-year attribute display (decorative large year behind) */
.memorial-page .timeline-enhanced .timeline-item[data-year]::before {
    content: attr(data-year);
    position: absolute;
    right: 0;
    top: 0.5rem;
    font-family: var(--font-primary, 'Bebas Neue', sans-serif);
    font-size: 4rem;
    color: var(--memorial-gold, #d4a843);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
    letter-spacing: 0.05em;
}

/* -----------------------------------------------------------
   7. Share Your Memories CTA Section
   ----------------------------------------------------------- */
.memorial-memories-cta {
    background: linear-gradient(180deg, var(--memorial-dark, #1a1510), var(--memorial-dark-warm, #2a2118));
}

.memories-cta-card {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: rgba(212, 168, 67, 0.04);
    border: 1px solid var(--memorial-border, rgba(212, 168, 67, 0.15));
    border-radius: 16px;
    transition: border-color 0.3s ease;
}

.memories-cta-card:hover {
    border-color: rgba(212, 168, 67, 0.3);
}

.memories-cta-icon {
    margin-bottom: 1.5rem;
    color: var(--memorial-gold, #d4a843);
    opacity: 0.7;
}

.memories-cta-icon .icon {
    width: 36px;
    height: 36px;
}

.memories-cta-title {
    font-family: var(--font-primary, 'Bebas Neue', sans-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--memorial-gold, #d4a843);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.memories-cta-text {
    font-family: var(--font-secondary, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--memorial-text, #e8dcc8);
    margin-bottom: 2rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.memories-cta-button {
    background: rgba(212, 168, 67, 0.08) !important;
    border-color: var(--memorial-amber, #b8860b) !important;
    padding: 1rem 2rem !important;
    font-size: 0.95rem !important;
}

.memories-cta-button:hover {
    background: rgba(212, 168, 67, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.15);
}

/* -----------------------------------------------------------
   8. Footer Note Enhancement
   ----------------------------------------------------------- */
.memorial-page .memorial-footer-note {
    position: relative;
}

.memorial-page .memorial-footer-candle {
    display: block;
    width: 4px;
    height: 4px;
    background: var(--memorial-candle, #ffcc44);
    border-radius: 50%;
    margin: 0 auto 1rem;
    box-shadow: 0 0 8px rgba(255, 204, 68, 0.4), 0 0 20px rgba(255, 204, 68, 0.15);
    animation: memorial-footer-glow 3s ease-in-out infinite alternate;
}

@keyframes memorial-footer-glow {
    0%   { box-shadow: 0 0 6px rgba(255, 204, 68, 0.3), 0 0 15px rgba(255, 204, 68, 0.1); }
    100% { box-shadow: 0 0 10px rgba(255, 204, 68, 0.5), 0 0 25px rgba(255, 204, 68, 0.2); }
}

/* -----------------------------------------------------------
   9. Responsive Adjustments for Memorial Enhancements
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .creation-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 300px;
    }

    .creation-stat-card {
        padding: 1.5rem 1rem;
    }

    .creation-stat-number {
        font-size: 2.5rem;
    }

    .memories-cta-card {
        padding: 2rem 1.5rem;
    }

    .memorial-page .timeline-enhanced .timeline-item[data-year]::before {
        display: none;
    }

    .memorial-page .timeline-enhanced .timeline-item::after {
        display: none;
    }

    .memorial-page .memorial-hero-portrait {
        width: 140px !important;
        height: 140px !important;
    }

    .memorial-page .memorial-quote-enhanced {
        padding: 2rem 1.5rem 2rem 2rem !important;
        font-size: 1.1rem !important;
    }

    .memorial-particle:nth-child(n+6) {
        display: none;
    }
}

@media (max-width: 480px) {
    .creation-stats-grid {
        max-width: 250px;
    }

    .creation-stat-number {
        font-size: 2.2rem;
    }

    .memories-cta-card {
        padding: 1.5rem 1rem;
    }

    .memorial-page .memorial-hero-portrait {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .memorial-particle,
    .memorial-page .flame-spark,
    .memorial-page .candle-smoke,
    .memorial-page .candle-drip,
    .memorial-page .timeline-dot-pulse,
    .memorial-page .memorial-footer-candle {
        animation: none !important;
    }

    .memorial-particle {
        display: none;
    }

    .memorial-page .flame-outer,
    .memorial-page .flame-inner,
    .memorial-page .flame-mid,
    .memorial-page .flame-glow {
        animation: none !important;
    }
}

/* === End Phase 74: Memorial Page Enhancement === */

/* === Phase 73b: Homepage Polish === */

/* --- Hero Section Impact Typography --- */
.hero-title-impact {
    font-size: clamp(3rem, 8vw, 7rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 0 40px rgba(200, 30, 30, 0.4),
        0 4px 20px rgba(0, 0, 0, 0.6) !important;
    line-height: 1 !important;
    margin-bottom: 0.3rem !important;
}

.hero-tagline {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: var(--text-secondary);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 300;
    animation: heroTaglineFadeIn 1.2s ease-out 0.5s both;
}

@keyframes heroTaglineFadeIn {
    from {
        opacity: 0;
        letter-spacing: 0.6em;
    }
    to {
        opacity: 1;
        letter-spacing: 0.25em;
    }
}

/* --- Hero CTA Buttons --- */
.hero-actions-prominent {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.hero-btn-glow {
    position: relative;
    padding: 0.85rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #c81e1e, #e63946) !important;
    border: none !important;
    color: var(--text-primary) !important;
    box-shadow:
        0 0 20px rgba(200, 30, 30, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.hero-btn-glow:hover,
.hero-btn-glow:focus-visible {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 0 35px rgba(200, 30, 30, 0.6),
        0 8px 25px rgba(0, 0, 0, 0.4) !important;
    background: linear-gradient(135deg, #e63946, #ff4d5a) !important;
}

.hero-btn-glow:active {
    transform: translateY(0) scale(0.98) !important;
}

.hero-btn-outline {
    padding: 0.8rem 1.6rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.hero-btn-outline:hover,
.hero-btn-outline:focus-visible {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hero-btn-outline:active {
    transform: translateY(0) !important;
}

/* Hero mobile adjustments */
@media (max-width: 640px) {
    .hero-title-impact {
        font-size: clamp(2.5rem, 12vw, 4rem) !important;
    }

    .hero-tagline {
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }

    .hero-actions-prominent {
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    .hero-btn-glow,
    .hero-btn-outline {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }
}

/* --- Quick Facts Banner --- */
.quick-facts-banner {
    padding: 0;
    margin: 0;
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.15), rgba(30, 30, 30, 0.9));
    border-top: 1px solid rgba(200, 30, 30, 0.2);
    border-bottom: 1px solid rgba(200, 30, 30, 0.2);
}

.quick-facts-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 1rem 0;
}

.quick-fact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    opacity: 0;
    animation: quickFactSlideIn 0.6s ease-out forwards;
}

.quick-fact-item:nth-child(1) { animation-delay: 0.1s; }
.quick-fact-item:nth-child(3) { animation-delay: 0.2s; }
.quick-fact-item:nth-child(5) { animation-delay: 0.3s; }
.quick-fact-item:nth-child(7) { animation-delay: 0.4s; }

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

.quick-fact-icon {
    color: #e63946;
    flex-shrink: 0;
}

.quick-fact-icon svg {
    width: 20px;
    height: 20px;
}

.quick-fact-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.quick-fact-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(200, 30, 30, 0.5);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .quick-facts-strip {
        gap: 0;
        padding: 0.5rem 0;
    }

    .quick-fact-item {
        padding: 0.4rem 0.8rem;
    }

    .quick-fact-text {
        font-size: 0.8rem;
    }

    .quick-fact-divider {
        display: none;
    }

    .quick-facts-strip {
        justify-content: space-around;
    }
}

@media (max-width: 480px) {
    .quick-facts-strip {
        flex-direction: column;
        gap: 0;
    }

    .quick-fact-item {
        padding: 0.35rem 0.5rem;
    }
}

/* --- Albums Count Badge --- */
.albums-count-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(200, 30, 30, 0.15);
    border: 1px solid rgba(200, 30, 30, 0.25);
    border-radius: 20px;
    padding: 0.2rem 0.8rem;
    letter-spacing: 0.03em;
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* --- Album Card Year Badge --- */
.album-card-modern {
    position: relative;
}

.album-card-year-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 5;
    background: rgba(0, 0, 0, 0.7);
    color: #e63946;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(200, 30, 30, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* --- Archive Section (Latest from the Archive) --- */
.archive-section {
    padding: 3rem 0;
}

.archive-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.archive-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 30, 30, 0.3);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(200, 30, 30, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.archive-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.archive-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-card:hover .archive-card-thumb img {
    transform: scale(1.05);
}

.archive-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.1), rgba(30, 30, 30, 0.5));
    color: rgba(255, 255, 255, 0.2);
}

.archive-card-thumb-placeholder svg {
    width: 40px;
    height: 40px;
}

.archive-card-body {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.archive-card-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.archive-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-card:hover .archive-card-title {
    color: var(--text-primary);
}

.archive-card-excerpt {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-card-link {
    font-size: 0.85rem;
    color: #e63946;
    font-weight: 600;
    margin-top: auto;
    padding-top: 0.5rem;
    transition: color 0.2s;
}

.archive-card:hover .archive-card-link {
    color: #ff4d5a;
}

@media (max-width: 900px) {
    .archive-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .archive-card {
        flex-direction: row;
        align-items: stretch;
    }

    .archive-card-thumb {
        width: 140px;
        min-width: 140px;
        aspect-ratio: auto;
    }

    .archive-card-body {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 480px) {
    .archive-card {
        flex-direction: column;
    }

    .archive-card-thumb {
        width: 100%;
        min-width: unset;
        aspect-ratio: 16 / 9;
    }
}

/* --- Memorial Section Enhancement --- */
.memorial-enhanced {
    background:
        radial-gradient(ellipse at center bottom, rgba(200, 30, 30, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(15, 15, 15, 0.95), rgba(10, 10, 10, 1)) !important;
    padding: 4rem 0 !important;
}

.memorial-content-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.memorial-photo-frame {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    overflow: visible;
}

.memorial-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(200, 30, 30, 0.4);
    filter: grayscale(30%) contrast(1.1);
    position: relative;
    z-index: 2;
}

.memorial-photo-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 30, 30, 0.2), transparent 70%);
    z-index: 1;
    animation: memorialPhotoGlowHP 4s ease-in-out infinite alternate;
}

@keyframes memorialPhotoGlowHP {
    from { opacity: 0.5; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
}

.memorial-subtitle-enhanced {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.memorial-tribute-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 550px;
    margin: 0.75rem auto;
}

.memorial-link-primary {
    background: rgba(200, 30, 30, 0.15) !important;
    border: 1px solid rgba(200, 30, 30, 0.3) !important;
    padding: 0.6rem 1.5rem !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}

.memorial-link-primary:hover {
    background: rgba(200, 30, 30, 0.25) !important;
    border-color: rgba(200, 30, 30, 0.5) !important;
    box-shadow: 0 0 20px rgba(200, 30, 30, 0.15) !important;
}

@media (max-width: 640px) {
    .memorial-photo-frame {
        width: 120px;
        height: 120px;
    }

    .memorial-photo {
        width: 120px;
        height: 120px;
    }

    .memorial-enhanced {
        padding: 2.5rem 0 !important;
    }
}

/* Phase 73b reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-tagline {
        animation: none;
        opacity: 1;
    }

    .quick-fact-item {
        animation: none;
        opacity: 1;
    }

    .memorial-photo-glow {
        animation: none;
        opacity: 0.7;
    }
}

/* Phase 73b light theme adjustments */
[data-theme="light"] .quick-facts-banner {
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.08), rgba(245, 245, 245, 0.95));
    border-color: rgba(200, 30, 30, 0.15);
}

[data-theme="light"] .quick-fact-text {
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .archive-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .archive-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(200, 30, 30, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .archive-card-title {
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .archive-card-excerpt {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .archive-card-date {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .album-card-year-badge {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(200, 30, 30, 0.2);
}

[data-theme="light"] .albums-count-badge {
    color: rgba(0, 0, 0, 0.55);
    background: rgba(200, 30, 30, 0.08);
    border-color: rgba(200, 30, 30, 0.15);
}

[data-theme="light"] .memorial-enhanced {
    background:
        radial-gradient(ellipse at center bottom, rgba(200, 30, 30, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(245, 245, 245, 0.98), rgba(240, 240, 240, 1)) !important;
}

[data-theme="light"] .memorial-subtitle-enhanced {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .memorial-tribute-text {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .archive-card-thumb-placeholder {
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.05), rgba(230, 230, 230, 0.8));
    color: rgba(0, 0, 0, 0.15);
}

/* === End Phase 73b: Homepage Polish === */

/* ============================================================
   Phase 75: Cinematic Homepage Hero Effects
   ============================================================ */

/* --- 1. Animated Gradient Background Layer --- */
.hero-gradient-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        135deg,
        #0a0000 0%,
        #1a0a14 15%,
        #2d0a0a 30%,
        #120818 50%,
        #1a0505 70%,
        #0d0010 85%,
        #0a0000 100%
    );
    background-size: 400% 400%;
    animation: heroGradientShift 20s ease infinite;
    pointer-events: none;
}

@keyframes heroGradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 25%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 0% 75%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- 2. Cinematic Vignette Overlay --- */
.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        ellipse 70% 60% at 50% 45%,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.55) 80%,
        rgba(0, 0, 0, 0.85) 100%
    );
    pointer-events: none;
}

/* --- 3. Floating Dust Particles --- */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    display: block;
    bottom: -10%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    opacity: 0;
    animation: heroParticleFloat 12s ease-in-out infinite;
}

@keyframes heroParticleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }
    10% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translateY(-110vh) translateX(40px);
    }
}

/* Particle 1 */
.hero-particle:nth-child(1) {
    left: 8%;
    width: 2px;
    height: 2px;
    animation-delay: 0s;
    animation-duration: 10s;
}

/* Particle 2 */
.hero-particle:nth-child(2) {
    left: 18%;
    width: 4px;
    height: 4px;
    background: rgba(200, 30, 30, 0.3);
    animation-delay: 1.5s;
    animation-duration: 13s;
}

/* Particle 3 */
.hero-particle:nth-child(3) {
    left: 30%;
    width: 2px;
    height: 2px;
    animation-delay: 3s;
    animation-duration: 11s;
}

/* Particle 4 */
.hero-particle:nth-child(4) {
    left: 40%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 0.8s;
    animation-duration: 14s;
}

/* Particle 5 */
.hero-particle:nth-child(5) {
    left: 52%;
    width: 3px;
    height: 3px;
    animation-delay: 4s;
    animation-duration: 10.5s;
}

/* Particle 6 */
.hero-particle:nth-child(6) {
    left: 62%;
    width: 6px;
    height: 6px;
    background: rgba(200, 30, 30, 0.2);
    animation-delay: 2s;
    animation-duration: 15s;
}

/* Particle 7 */
.hero-particle:nth-child(7) {
    left: 72%;
    width: 2px;
    height: 2px;
    animation-delay: 5.5s;
    animation-duration: 11.5s;
}

/* Particle 8 */
.hero-particle:nth-child(8) {
    left: 82%;
    width: 4px;
    height: 4px;
    animation-delay: 1s;
    animation-duration: 12.5s;
}

/* Particle 9 */
.hero-particle:nth-child(9) {
    left: 15%;
    width: 3px;
    height: 3px;
    background: rgba(200, 30, 30, 0.25);
    animation-delay: 6s;
    animation-duration: 13.5s;
}

/* Particle 10 */
.hero-particle:nth-child(10) {
    left: 45%;
    width: 2px;
    height: 2px;
    animation-delay: 3.5s;
    animation-duration: 10s;
}

/* Particle 11 */
.hero-particle:nth-child(11) {
    left: 88%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    animation-delay: 7s;
    animation-duration: 14.5s;
}

/* Particle 12 */
.hero-particle:nth-child(12) {
    left: 55%;
    width: 3px;
    height: 3px;
    animation-delay: 2.5s;
    animation-duration: 11s;
}

/* --- 4. Text Reveal Animations --- */
.hero-title-impact {
    animation: heroTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes heroTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(40px);
        clip-path: inset(100% 0 0 0);
    }
    60% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Override Phase 73b heroTaglineFadeIn with enhanced version */
.hero-tagline {
    animation: heroTaglineReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both !important;
}

@keyframes heroTaglineReveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
        letter-spacing: 0.6em;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0.25em;
    }
}

.hero-subtitle {
    animation: heroSubtitleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

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

.hero-years {
    animation: heroSubtitleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

.hero-actions-prominent {
    animation: heroSubtitleReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
}

/* --- 5. Glowing CTA Button Pulse --- */
.hero-btn-glow {
    animation: heroBtnGlowPulse 3s ease-in-out 2s infinite !important;
}

@keyframes heroBtnGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(200, 30, 30, 0.4),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 35px rgba(200, 30, 30, 0.65),
            0 0 60px rgba(200, 30, 30, 0.2),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
}

/* Outline button border shimmer */
.hero-btn-outline {
    animation: heroBtnBorderShimmer 4s ease-in-out 2.5s infinite !important;
}

@keyframes heroBtnBorderShimmer {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
    }
}

/* --- 6. Scroll Indicator Bounce --- */
.hero-scroll-indicator {
    animation: heroScrollBounce 2.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2s infinite;
}

@keyframes heroScrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-12px);
    }
    60% {
        transform: translateX(-50%) translateY(-6px);
    }
}

.scroll-chevron {
    animation: heroChevronFade 2.5s ease-in-out 2s infinite;
}

@keyframes heroChevronFade {
    0%, 100% {
        opacity: 0.5;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 0.8;
    }
}

/* --- 7. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .hero-gradient-layer {
        animation: none;
    }

    .hero-vignette {
        /* Static vignette is fine, no animation to remove */
    }

    .hero-particle {
        display: none;
    }

    .hero-title-impact {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .hero-tagline {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .hero-subtitle {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-years {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-actions-prominent {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-btn-glow {
        animation: none !important;
    }

    .hero-btn-outline {
        animation: none !important;
    }

    .hero-scroll-indicator {
        animation: none;
    }

    .scroll-chevron {
        animation: none;
        opacity: 0.6;
    }
}

/* === End Phase 75: Cinematic Homepage Hero Effects === */

/* ========================================
   HORIZONTAL ERA TIMELINE — About Page
   ======================================== */

.band-timeline-horizontal {
    position: relative;
    padding: 2.5rem 0 2rem;
    margin: 0 auto 1rem;
    max-width: var(--max-width, 1200px);
}

.timeline-h-heading {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 1.25rem;
    padding: 0 1rem;
}

/* Scrollable container */
.timeline-h-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding: 0.5rem 1.5rem 1rem;
    /* Edge fade gradients */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
    );
}

.timeline-h-scroll::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* Flex track */
.timeline-h-track {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    /* The connecting line behind cards */
    position: relative;
}

.timeline-h-track::before {
    content: '';
    position: absolute;
    top: 1.1rem;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #4a9eff 0%,
        #ffd700 25%,
        #dc2626 50%,
        #22c55e 75%,
        #a855f7 100%
    );
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* Individual era card */
.timeline-h-era {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 280px;
    scroll-snap-align: start;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--era-color, #888);
    border-radius: 8px;
    padding: 1.25rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    cursor: default;
}

.timeline-h-era:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.07);
}

.timeline-h-era:focus-within {
    outline: 2px solid var(--era-color, #4a9eff);
    outline-offset: 2px;
}

/* Years badge */
.timeline-h-years {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--era-color, #ccc);
    background: color-mix(in srgb, var(--era-color, #888) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--era-color, #888) 25%, transparent);
    border-radius: 100px;
    padding: 0.2rem 0.7rem;
    line-height: 1.4;
}

/* Title */
.timeline-h-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.3;
}

/* Description */
.timeline-h-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    flex: 1;
}

/* "Jump to section" link arrow */
.timeline-h-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--era-color, #888) 15%, transparent);
    color: var(--era-color, #ccc);
    transition: background 0.2s ease, transform 0.2s ease;
    margin-top: 0.25rem;
    text-decoration: none;
}

.timeline-h-link:hover {
    background: color-mix(in srgb, var(--era-color, #888) 30%, transparent);
    transform: translateY(2px);
}

.timeline-h-link .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Scroll hint arrows */
.timeline-h-scrollhint {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    opacity: 0.3;
    font-size: 1.1rem;
    color: var(--text-muted);
    pointer-events: none;
    animation: timeline-h-hint-pulse 2.5s ease-in-out infinite;
}

@keyframes timeline-h-hint-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* --- Light theme --- */
[data-theme="light"] .timeline-h-heading {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .timeline-h-era {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    border-left-color: var(--era-color, #888);
}

[data-theme="light"] .timeline-h-era:hover {
    background: rgba(0, 0, 0, 0.05);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .timeline-h-title {
    color: rgba(0, 0, 0, 0.88);
}

[data-theme="light"] .timeline-h-desc {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .timeline-h-scrollhint {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .timeline-h-track::before {
    opacity: 0.25;
}

/* --- Mobile: smaller cards, tighter spacing --- */
@media (max-width: 767px) {
    .band-timeline-horizontal {
        padding: 1.5rem 0 1rem;
    }

    .timeline-h-heading {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .timeline-h-scroll {
        padding: 0.25rem 1rem 0.75rem;
    }

    .timeline-h-track {
        gap: 0.75rem;
    }

    .timeline-h-era {
        min-width: 200px;
        max-width: 230px;
        padding: 1rem 0.9rem 0.85rem;
    }

    .timeline-h-years {
        font-size: 0.65rem;
        padding: 0.15rem 0.55rem;
    }

    .timeline-h-title {
        font-size: 0.95rem;
    }

    .timeline-h-desc {
        font-size: 0.78rem;
    }
}

/* Very small screens: even more compact */
@media (max-width: 400px) {
    .timeline-h-era {
        min-width: 180px;
        max-width: 200px;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .timeline-h-era {
        transition: none;
    }

    .timeline-h-link {
        transition: none;
    }

    .timeline-h-scrollhint {
        animation: none;
        opacity: 0.3;
    }

    .timeline-h-scroll {
        scroll-snap-type: none;
    }
}

/* --- Fallback for browsers without color-mix --- */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .timeline-h-years {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .timeline-h-link {
        background: rgba(255, 255, 255, 0.08);
    }

    .timeline-h-link:hover {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* === End Horizontal Era Timeline === */

/* ============================================================
   CINEMATIC VIEW TRANSITIONS — Phase 74
   Overrides the basic transitions in features.css with
   more cinematic fade+slide+scale effects.
   ============================================================ */
@supports (view-transition-name: test) {

    /* --- Root transition: cinematic fade + slide-up --- */
    ::view-transition-old(root) {
        animation: 280ms cubic-bezier(0.4, 0, 0.6, 1) both vt-cine-out;
    }

    ::view-transition-new(root) {
        animation: 320ms cubic-bezier(0.0, 0, 0.2, 1) 60ms both vt-cine-in;
    }

    @keyframes vt-cine-out {
        to {
            opacity: 0;
            transform: scale(0.98) translateY(-8px);
            filter: blur(2px);
        }
    }

    @keyframes vt-cine-in {
        from {
            opacity: 0;
            transform: scale(1.01) translateY(12px);
            filter: blur(2px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
        }
    }

    /* --- Page heading: slide + morph --- */
    ::view-transition-old(page-title) {
        animation: 220ms ease-out both vt-heading-out;
    }

    ::view-transition-new(page-title) {
        animation: 340ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both vt-heading-in;
    }

    @keyframes vt-heading-out {
        to {
            opacity: 0;
            transform: translateY(-16px) scale(0.97);
        }
    }

    @keyframes vt-heading-in {
        from {
            opacity: 0;
            transform: translateY(24px) scale(1.03);
        }
    }

    /* --- Nav brand: hold steady, no animation --- */
    ::view-transition-old(brand),
    ::view-transition-new(brand) {
        animation: none;
        mix-blend-mode: normal;
    }

    /* --- Album covers: pure geometry morph, no fade --- */
    ::view-transition-old(*.album-cover) {
        animation: 300ms cubic-bezier(0.2, 0, 0, 1) both vt-album-morph-out;
        mix-blend-mode: normal;
    }

    ::view-transition-new(*.album-cover) {
        animation: 380ms cubic-bezier(0.16, 1, 0.3, 1) both vt-album-morph-in;
        mix-blend-mode: normal;
    }

    @keyframes vt-album-morph-out {
        to {
            opacity: 0.4;
        }
    }

    @keyframes vt-album-morph-in {
        from {
            opacity: 0.4;
        }
        to {
            opacity: 1;
        }
    }

    /* --- View transition group sizing for album covers --- */
    ::view-transition-group(*.album-cover) {
        animation-duration: 350ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- Site header & music player: persist, no animation --- */
    ::view-transition-old(site-header),
    ::view-transition-new(site-header),
    ::view-transition-old(music-player),
    ::view-transition-new(music-player) {
        animation: none;
        mix-blend-mode: normal;
    }

} /* end @supports */

/* --- Reduced motion: instant transitions --- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(page-title),
    ::view-transition-new(page-title),
    ::view-transition-old(*.album-cover),
    ::view-transition-new(*.album-cover),
    ::view-transition-group(*.album-cover) {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}

/* === Variable Inter Font & Typography Elevation === */

body { font-optical-sizing: auto; }

@supports (font-variation-settings: 'wght' 400) {
    h1, h2, h3, h4, h5, h6 { font-optical-sizing: auto; }
    /* Interactive heading weight shift */
    .card-title {
        transition: font-variation-settings var(--duration-standard, 300ms) var(--ease-standard, ease);
    }
    .card-title:hover { font-variation-settings: 'wght' 700; }
    /* Smart tracking: tight for display, wide for small text */
    .hero-title, .glitch-title, .memorial-hero-name { letter-spacing: -0.03em; }
    .text-sm, .text-xs, figcaption, .breadcrumb { letter-spacing: 0.01em; }
}

/* Glitch-title outline for hero sections */
.glitch-title {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    paint-order: stroke fill;
}

/* Memorial hero name: letter-spacing reveal on load */
.memorial-hero-name {
    animation: memorial-name-reveal var(--duration-memorial, 1000ms) var(--ease-memorial, ease) both;
}
@keyframes memorial-name-reveal {
    from { letter-spacing: 0.3em; opacity: 0; filter: blur(4px); }
    to   { letter-spacing: -0.02em; opacity: 1; filter: blur(0); }
}

/* Album detail: black weight emphasis */
.album-detail-title, .album-hero-title { font-variation-settings: 'wght' 800; }

/* Card title weight shift on hover */
.album-card-title, .news-card-title, .gallery-card-title {
    transition: font-variation-settings var(--duration-standard, 300ms) var(--ease-standard, ease);
}
.album-card-title:hover, .news-card-title:hover, .gallery-card-title:hover {
    font-variation-settings: 'wght' 700;
}

/* Reduced motion: disable typography animations */
@media (prefers-reduced-motion: reduce) {
    .memorial-hero-name { animation: none; }
    .card-title, .album-card-title, .news-card-title, .gallery-card-title { transition: none; }
}

/* ===================================================
   Easter Eggs & Micro-Interactions (v1)
   =================================================== */

/* A. Konami Code glitch */
@keyframes easter-glitch {
    0%, 100% { transform: translate(0); filter: none; }
    10% { transform: translate(-2px, 1px); }
    30% { transform: translate(2px, -1px); filter: hue-rotate(15deg); }
    50% { transform: translate(-1px, -1px); }
    70% { transform: translate(1px, 2px); filter: hue-rotate(-10deg); }
    90% { transform: translate(-1px, 0); }
}
.easter-glitch { animation: easter-glitch 0.15s ease 6; }

/* B. Logo spin */
@keyframes easter-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.easter-spin { animation: easter-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1; }

/* C. Album cover 3D tilt */
.album-card-3d { transition: transform 0.15s ease-out; will-change: transform; }

/* D. Memorial floating note */
@keyframes memorial-note-rise {
    0% { opacity: 0; transform: translateY(0) scale(0.6); }
    15% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-80px) scale(1.2) rotate(15deg); }
}
.memorial-note-float {
    position: absolute; bottom: 20%; left: 50%;
    font-size: 1.6rem; color: rgba(255, 180, 80, 0.85);
    pointer-events: none; z-index: 5;
    animation: memorial-note-rise 4s ease-out forwards;
}

/* Toast */
.easter-toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    background: rgba(20, 20, 30, 0.92); color: #f0f0f0;
    padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); border: 1px solid rgba(255,51,102,0.3);
    opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 10000;
    pointer-events: none; white-space: nowrap;
}
.easter-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Reduced motion: disable all easter-egg animations */
@media (prefers-reduced-motion: reduce) {
    .easter-glitch, .easter-spin, .memorial-note-float { animation: none !important; }
    .album-card-3d { transition: none !important; }
}

/* ========================================================================
   MEMORIAL PAGE — Atmospheric Fog, Scroll Reveals & Cinematic Effects
   Respectful, quiet, contemplative — like entering a chapel.
   ======================================================================== */

/* --- Fog Layers: slow-drifting translucent veils --- */
.memorial-fog {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.fog-layer {
    position: absolute;
    inset: -20% -50%;
    width: 200%;
    height: 140%;
    background: linear-gradient(90deg,
        transparent 0%, rgba(200,195,185,0.04) 20%,
        rgba(200,195,185,0.07) 50%, rgba(200,195,185,0.04) 80%, transparent 100%);
    animation: fog-drift-1 45s linear infinite;
    will-change: transform;
}
.fog-layer-2 {
    opacity: 0.6;
    animation: fog-drift-2 60s linear infinite;
    background: linear-gradient(90deg,
        transparent 0%, rgba(180,175,165,0.03) 30%,
        rgba(180,175,165,0.06) 55%, rgba(180,175,165,0.03) 75%, transparent 100%);
}
@keyframes fog-drift-1 {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
}
@keyframes fog-drift-2 {
    0%   { transform: translateX(20%) translateY(-5%); }
    100% { transform: translateX(-25%) translateY(5%); }
}
/* --- Film grain overlay via repeating-conic-gradient --- */
.memorial-page::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.025;
    background: repeating-conic-gradient(
        rgba(200,195,185,0.08) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    mix-blend-mode: overlay;
}
/* --- Glowing section dividers: gentle pulse --- */
.memorial-page .memorial-divider {
    position: relative;
    overflow: visible;
}
.memorial-page .memorial-divider::after {
    content: '';
    position: absolute;
    inset: -2px 25% -2px 25%;
    background: radial-gradient(ellipse, rgba(212,168,67,0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: memorial-divider-glow 4s ease-in-out infinite alternate;
}
@keyframes memorial-divider-glow {
    0%   { opacity: 0.4; }
    100% { opacity: 0.8; }
}
/* --- Scroll-driven biography text reveals --- */
@supports (animation-timeline: view()) {
    @keyframes memorial-text-reveal {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .memorial-page .memorial-bio-text {
        animation: memorial-text-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }
    .memorial-page .memorial-bio-text:nth-child(2) { animation-range: entry 8% cover 33%; }
    .memorial-page .memorial-bio-text:nth-child(3) { animation-range: entry 12% cover 36%; }
    .memorial-page .timeline-item {
        animation: memorial-text-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 35%;
    }
}
/* --- Hero portrait parallax: gentle scale on scroll --- */
@supports (animation-timeline: scroll()) {
    @keyframes memorial-portrait-parallax {
        from { transform: scale(1); }
        to   { transform: scale(1.05); }
    }
    .memorial-page .memorial-hero-portrait img {
        animation: memorial-portrait-parallax linear both;
        animation-timeline: scroll();
    }
}
/* --- Ambient hue shift as page scrolls deeper --- */
@property --memorial-bg-hue {
    syntax: '<number>';
    inherits: true;
    initial-value: 30;
}
@supports (animation-timeline: scroll()) {
    @keyframes memorial-hue-shift {
        from { --memorial-bg-hue: 30; }
        to   { --memorial-bg-hue: 22; }
    }
    .memorial-page {
        animation: memorial-hue-shift linear both;
        animation-timeline: scroll();
        background: hsl(var(--memorial-bg-hue) 30% 8%);
    }
}
/* --- Light theme: darker fog for legibility --- */
[data-theme="light"] .fog-layer {
    background: linear-gradient(90deg,
        transparent 0%, rgba(60,55,50,0.04) 20%,
        rgba(60,55,50,0.06) 50%, rgba(60,55,50,0.04) 80%, transparent 100%);
}
[data-theme="light"] .fog-layer-2 {
    background: linear-gradient(90deg,
        transparent 0%, rgba(50,45,40,0.03) 30%,
        rgba(50,45,40,0.05) 55%, rgba(50,45,40,0.03) 75%, transparent 100%);
}
[data-theme="light"] .memorial-page::after {
    opacity: 0.018;
    background: repeating-conic-gradient(
        rgba(40,35,30,0.06) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
}
/* --- Reduced motion: disable all memorial atmosphere --- */
@media (prefers-reduced-motion: reduce) {
    .memorial-fog,
    .memorial-page::after { display: none; }
    .memorial-page .memorial-divider::after { animation: none; opacity: 0.6; }
    .memorial-page .memorial-bio-text,
    .memorial-page .timeline-item,
    .memorial-page .memorial-hero-portrait img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .memorial-page {
        animation: none !important;
        background: var(--memorial-dark) !important;
    }
}

/* ========================================
   WCAG 2.2 Accessibility & Mobile UX Fixes
   Phase 74 — March 2026
   ======================================== */

/* --- 1. Touch Target Sizes (WCAG 2.5.8) ---
   Minimum 44x44px for all interactive elements on touch devices.
   Applied via media query to avoid bloating desktop layout. */

/* Track play button: 30px -> 44px on mobile */
@media (pointer: coarse) {
    .track-play-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Track queue button: 28px -> 44px on mobile */
    .track-add-to-queue-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }

    /* Lyrics button: increase touch target */
    .lyrics-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Pagination buttons: ensure minimum touch target */
    .page-btn,
    .page-current {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    /* Navigation links in footer */
    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Bottom mobile nav items already 48px+ via existing CSS */

    /* Filter buttons on albums page */
    .album-filters button,
    .album-filters .filter-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Disco stats toggle */
    .disco-stats__toggle {
        min-height: 48px;
    }

    /* Share buttons in lightbox */
    .gallery-lightbox__action {
        min-width: 44px;
        min-height: 44px;
    }

    /* Gallery lightbox nav buttons */
    .gallery-lightbox__nav {
        min-width: 48px;
        min-height: 48px;
    }

    /* Scroll to top button */
    .scroll-to-top-btn {
        min-width: 48px;
        min-height: 48px;
    }

    /* Cookie consent button */
    .cookie-consent__btn {
        min-height: 44px;
        min-width: 80px;
        padding: 0.6rem 1.25rem;
    }

    /* Album action buttons: already have good padding, ensure min-height */
    .album-play-all-btn,
    .album-queue-btn,
    .album-share-btn {
        min-height: 44px;
    }

    /* Guestbook submit button */
    .guestbook-form .submit-btn,
    .contact-form .submit-btn {
        min-height: 48px;
    }

    /* Preview toggle button */
    .preview-toggle-btn {
        min-height: 44px;
    }

    /* Track items: increase tap area */
    .track-item {
        min-height: 48px;
        padding: 0.65rem 0.75rem;
    }
}

/* --- 2. Color Contrast Fixes (WCAG AA 4.5:1) --- */

/* Lyrics button: opacity 0.5 fails contrast — raise to 0.7 */
.lyrics-btn {
    opacity: 0.7;
}

/* Track number: opacity too low for contrast — raise from 0.35 to 0.55 */
.track-number {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

/* Track duration: opacity too low — raise from 0.4 to 0.55 */
.track-duration {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

/* Album meta separator: opacity 0.4 is decorative-only, acceptable */

/* Entry date text: opacity 0.5 fails contrast */
.entry-date-relative {
    opacity: 0.65;
}

.entry-date-full {
    opacity: 0.65;
}

/* Guestbook char counter: opacity 0.6 borderline, ensure higher */
.char-counter {
    opacity: 0.7;
}

/* Album total duration in track header: 0.5 opacity too low */
.album-tracks-total-duration {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

/* Footer subtitle text: ensure contrast */
.footer-brand p {
    opacity: 0.75;
}

/* Decade group header label: ensure readable */
.decade-group-header__label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

/* --- 3. Focus Indicators for Track Items --- */

/* Track items use tabindex="0" and need visible focus */
.track-item:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: -2px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.06);
}

/* Gallery card focus: visible ring for keyboard users */
.gallery-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Photo masonry items: focus indicator */
.photo-masonry-item:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Member card: focus indicator for keyboard nav */
.member-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Album card: ensure focus ring is prominent */
a.album-card-modern:focus-visible,
.album-card-modern:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Other member cards */
.other-member-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Album nav links */
.album-nav__link:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Related article cards */
.related-article-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
    border-radius: 10px;
}

/* --- 4. Skip-link Player Visibility Fix --- */
/* Ensure skip-link-player is consistently styled */
.skip-link-player {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #dc2626);
    color: var(--text-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
    white-space: nowrap;
}
.skip-link-player:focus {
    top: 0;
}

/* --- 5. Form Accessibility Enhancements --- */

/* Field error styling for guestbook inline validation */
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
    border-color: var(--accent-red-light);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field-error {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Required field asterisk styling — ensure visible */
.form-group label span[aria-hidden="true"] {
    color: var(--accent-red, #dc2626);
    margin-left: 0.15em;
}

/* --- 6. Screen Reader Utilities --- */

/* Ensure sr-only class is comprehensive */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --- 7. High Contrast Mode Support --- */
@media (forced-colors: active) {
    .track-play-btn,
    .track-add-to-queue-btn,
    .lyrics-btn,
    .submit-btn,
    .btn-primary,
    .album-play-all-btn {
        border: 2px solid ButtonText;
    }

    .track-item:focus-visible,
    .gallery-card:focus-visible,
    .photo-masonry-item:focus-visible,
    .member-card:focus-visible {
        outline: 3px solid Highlight;
    }

    .skip-link:focus,
    .skip-link-player:focus {
        outline: 3px solid Highlight;
        background: Highlight;
        color: HighlightText;
    }
}

/* --- 8. Reduced Motion: Disable non-essential animations --- */
@media (prefers-reduced-motion: reduce) {
    .track-play-btn,
    .track-add-to-queue-btn,
    .album-play-all-btn,
    .album-queue-btn,
    .album-share-btn,
    .album-nav__link,
    .disco-stat-card,
    .guestbook-entry,
    .gallery-card,
    .photo-masonry-item {
        transition: none !important;
        animation: none !important;
    }

    .vinyl-record {
        animation: none !important;
    }

    .scroll-reveal,
    .scroll-reveal-scale,
    .scroll-reveal-left {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   PHASE 78: Homepage Hero Description
   ======================================== */

.hero-description {
    max-width: 600px;
    margin: 0.75rem auto 0;
    font-size: clamp(0.875rem, 1.5vw, 1.05rem);
    color: var(--text-secondary);
    line-height: 1.6;
    font-family: var(--font-secondary, 'Inter', sans-serif);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Ensure the "About the Band" hero CTA matches the other outline buttons */
.hero-story-btn {
    border-color: rgba(255, 255, 255, 0.25);
}

.hero-story-btn:hover {
    border-color: var(--text-muted);
    background: rgba(255, 255, 255, 0.08);
}

/* Hero actions: wrap nicely on mobile */
.hero-actions-prominent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    .hero-description {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }

    .hero-actions-prominent {
        gap: 0.5rem;
    }

    .hero-actions-prominent .btn-primary,
    .hero-actions-prominent .btn-secondary {
        font-size: 0.75rem;
        padding: 0.5rem 0.875rem;
    }
}

/* ========================================
   PHASE 78+95: Desktop nav with 12 items
   (Home, Albums, Lyrics, News, Video, Gallery,
    Articles, Members, Events, About, Memorial, Contacts)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1100px) {
    .desktop-nav {
        gap: 0.1rem;
    }
    .desktop-nav__link {
        font-size: 0.6rem;
        padding: 0.25rem 0;
        letter-spacing: 0.01em;
    }
}

@media (min-width: 1101px) and (max-width: 1279px) {
    .desktop-nav {
        gap: 0.2rem;
    }
    .desktop-nav__link {
        font-size: 0.65rem;
        padding: 0.25rem 0;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .desktop-nav {
        gap: 0.375rem;
    }
    .desktop-nav__link {
        font-size: 0.7rem;
    }
}

@media (min-width: 1440px) {
    .desktop-nav {
        gap: 0.625rem;
    }
    .desktop-nav__link {
        font-size: 0.75rem;
    }
}

/* ========================================
   Category-Aware Placeholders for Article Cards
   Visually distinct placeholders when articles lack images
   ======================================== */

.card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--cat-grad, linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative diagonal stripe pattern */
.card-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.015) 20px,
        rgba(255, 255, 255, 0.015) 22px
    );
    pointer-events: none;
}

/* Subtle radial glow behind the icon */
.card-placeholder::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(var(--cat-hue, 220), 50%, 50%, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* Large faint category label — visual identity for the card */
.card-placeholder__label {
    position: absolute;
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsla(var(--cat-hue, 220), 40%, 70%, 0.1);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    line-height: 1;
    /* Position behind icon, slightly offset for depth */
    transform: rotate(-8deg) translateY(-8px);
}

/* SVG icon — subtle and centered */
.card-placeholder__icon {
    position: relative;
    z-index: 1;
    fill: hsla(var(--cat-hue, 220), 30%, 65%, 0.15);
    opacity: 0.9;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Hover: lift the icon slightly and brighten */
.bento-card:hover .card-placeholder__icon,
.bento-card:focus .card-placeholder__icon {
    transform: scale(1.1) translateY(-2px);
    opacity: 1;
    fill: hsla(var(--cat-hue, 220), 40%, 70%, 0.22);
}

.bento-card:hover .card-placeholder__label,
.bento-card:focus .card-placeholder__label {
    color: hsla(var(--cat-hue, 220), 40%, 70%, 0.15);
}

/* Wide card: larger label */
.bento-card.wide .card-placeholder__label {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

/* ========================================
   Article Detail Hero Fallback — Category-Aware
   ======================================== */

/* Override the default gradient with category-specific one (set via inline style) */
.article-hero-fallback {
    flex-direction: column;
    gap: 0.75rem;
}

.article-hero-fallback__icon {
    fill: rgba(255, 255, 255, 0.08);
    animation: p73-vinyl-spin 20s linear infinite;
}

.article-hero-fallback__cat {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    user-select: none;
}

/* Light theme adjustments */
[data-theme="light"] .card-placeholder {
    filter: brightness(1.6) saturate(0.7);
}

[data-theme="light"] .card-placeholder__label {
    color: hsla(var(--cat-hue, 220), 30%, 40%, 0.12);
}

[data-theme="light"] .card-placeholder__icon {
    fill: hsla(var(--cat-hue, 220), 25%, 40%, 0.15);
}

[data-theme="light"] .article-hero-fallback__icon {
    fill: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .article-hero-fallback__cat {
    color: rgba(0, 0, 0, 0.06);
}

/* Mobile: slightly smaller label to fit card width */
@media (max-width: 480px) {
    .card-placeholder__label {
        font-size: 1.5rem;
    }
}

/* Reduced motion: no spinning icon in hero */
@media (prefers-reduced-motion: reduce) {
    .article-hero-fallback__icon {
        animation: none;
    }
}

/* ========================================
   PHASE 79: MOBILE UX & RESPONSIVE AUDIT
   2026-2027 Best Practices
   ======================================== */

/* --- 1. Touch Targets: WCAG 2.5.8 (44x44px minimum) --- */

/* Desktop nav links: on touch-capable devices near the 1024px breakpoint
   (e.g. tablets in landscape), ensure comfortable tap targets. */
@media (pointer: coarse) and (min-width: 1024px) {
    .desktop-nav__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.375rem;
    }
}

/* Password toggle buttons - ensure 44x44 touch target */
.toggle-password {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Auth form checkboxes - enlarge for touch */
@media (pointer: coarse) {
    .checkbox-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--accent-red, #dc2626);
    }

    .checkbox-label {
        gap: 0.75rem;
        min-height: 44px;
        align-items: center;
    }
}

/* Footer social links - enforce 44px touch targets */
.footer-social-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

/* Footer keyboard hint button */
.footer-keyboard-hint {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}

/* Page buttons / pagination - ensure 44px on mobile */
@media (max-width: 768px) {
    .page-btn,
    .page-current {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    /* Gallery category links */
    .gallery-category a,
    .gallery-category button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Track items on album pages - enlarge tap area */
    .track-item {
        min-height: 48px;
    }

    /* Decade filter tabs on events/albums pages */
    .decade-tab,
    .filter-tab,
    .category-tab,
    .timeline-filter-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }

    /* Lyrics accordion headers */
    .lyrics-album-header,
    .lyrics-toggle-btn {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Breadcrumb links */
    .breadcrumb-item a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Community nav tabs */
    .community-nav__link {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/* --- 2. Mobile Navigation: Prevent Horizontal Overflow --- */

/* Overflow containment on major wrappers */
.container,
main,
.page-content,
#swup {
    max-width: 100%;
    overflow-x: clip; /* Better than hidden: doesn't create scroll context */
}

/* Ensure fixed-width elements can't break out */
@media (max-width: 768px) {
    .album-header .grid-2,
    .track-list,
    .album-tracks,
    pre,
    code,
    table {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Prevent wide images from causing overflow */
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
    }

    /* Album meta items can wrap to avoid overflow */
    .album-meta {
        flex-wrap: wrap;
    }

    /* News search / filter bars */
    .news-filters,
    .articles-filters,
    .filter-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* --- 3. Typography: Fluid Scaling for 320px screens --- */

/* Ensure body text never falls below 16px (avoids iOS zoom) */
body {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

/* Tighter section titles on very small screens */
@media (max-width: 375px) {
    .section-title,
    .block-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .page-header h1,
    .page-hero .page-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    /* Album detail page title */
    .album-info h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    /* Auth pages */
    .auth-header h1 {
        font-size: 1.5rem;
    }

    .auth-card {
        padding: var(--space-4);
    }
}

/* Small text elements: clamp to prevent unreadable sizes */
.album-year,
.track-duration,
.entry-date-full,
.entry-date-relative,
.char-counter,
.bottom-nav-label {
    font-size: clamp(0.625rem, 1.5vw, 0.8rem);
}

/* --- 4. Responsive Images: Better Aspect Ratios --- */

/* Album covers in grid: maintain 1:1 but with content-visibility for perf */
.album-card .album-cover {
    aspect-ratio: 1;
    content-visibility: auto;
    contain-intrinsic-size: 300px 300px;
}

/* Gallery images: lazy load with intrinsic size hint */
.gallery-photo img,
.gallery-item img {
    aspect-ratio: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* Member photos */
.member-photo img,
.member-avatar img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* --- 5. Auth Forms: Mobile-Optimized Layout --- */

@media (max-width: 480px) {
    .auth-page {
        padding: 5rem 1rem 2rem;
        align-items: flex-start;
    }

    .auth-card {
        border-radius: 12px;
    }

    /* Form options row: stack on small screens */
    .form-options {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    /* Make login/register buttons full-width and comfortable */
    .btn-block {
        min-height: 48px;
        font-size: 1rem;
    }

    /* Password toggle: larger touch target on small screens */
    .toggle-password {
        right: 4px;
        min-width: 48px;
        min-height: 48px;
    }
}

/* --- 6. Guestbook Form: Mobile Column Layout --- */

@media (max-width: 480px) {
    .guestbook-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .guestbook-form-section {
        padding: 1.25rem;
    }

    /* All form row inputs stack to single column */
    .guestbook-form .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --- 7. Container Queries: Responsive Components (2026) --- */

/* Auth card container query */
.auth-container {
    container-type: inline-size;
    container-name: auth-layout;
}

@container auth-layout (max-width: 700px) {
    .auth-container {
        grid-template-columns: 1fr;
    }

    .auth-benefits {
        display: none;
    }
}

/* Album tracks container query */
.album-tracks {
    container-type: inline-size;
    container-name: tracklist;
}

@container tracklist (max-width: 500px) {
    .track-item {
        grid-template-columns: 32px 1fr auto;
        gap: 0.5rem;
    }

    .track-duration {
        display: none;
    }
}

/* Guestbook entries container query */
.guestbook-entries-section {
    container-type: inline-size;
    container-name: guestbook-entries;
}

@container guestbook-entries (max-width: 500px) {
    .entry-header {
        flex-direction: column;
    }

    .entry-meta {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Footer container query for responsive columns */
.footer-grid {
    container-type: inline-size;
    container-name: footer-layout;
}

@container footer-layout (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* --- 8. Safe Area Insets: Notched Devices --- */

@supports (padding: env(safe-area-inset-left)) {
    /* Prevent content from being hidden behind notch */
    .container,
    .site-navbar,
    .hero-content,
    #album-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Mobile nav: extend to edges but pad content */
    .nav-menu.active {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* --- 9. Interactive Widget Viewport: Mobile Keyboard --- */

/* When virtual keyboard opens, ensure the focused input is visible */
@media (max-width: 768px) {
    /* Smooth scroll to focused input */
    input:focus,
    textarea:focus,
    select:focus {
        scroll-margin-bottom: 2rem;
        scroll-padding-bottom: 2rem;
    }

    /* Prevent fixed bottom elements from overlapping keyboard */
    @supports (height: 100dvh) {
        .bottom-nav-mobile {
            position: fixed;
            bottom: 0;
        }
    }
}

/* --- 10. Print: Hide Mobile-Only Elements --- */

@media print {
    .bottom-nav-mobile,
    .nav-toggle,
    .scroll-to-top-btn,
    .cookie-consent {
        display: none !important;
    }
}

/* --- 11. Horizontal Overflow Prevention for 320px --- */

@media (max-width: 320px) {
    /* Extra small screens: tighten up spacing */
    .site-navbar {
        padding: 0.5rem 0.5rem;
    }

    .brand-name {
        font-size: 0.7rem;
    }

    .nav-actions {
        gap: 0.125rem;
    }

    /* Hero: minimal padding */
    .hero-content {
        padding: 0.75rem;
    }

    .hero-title {
        font-size: clamp(1.8rem, 12vw, 2.5rem);
    }

    /* Reduce album card border radius */
    .album-card {
        border-radius: 10px;
    }

    /* Tighter container padding */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Footer: reduce padding */
    .footer-grid {
        padding: 2rem 0.75rem;
    }
}

/* --- 12. Forced Dark Color Scheme for PWA --- */

@media (display-mode: standalone) {
    /* When running as installed PWA, ensure consistent experience */
    body {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Hide browser-only UI hints */
    .footer-keyboard-hint {
        display: none;
    }
}

/* --- 13. Hover-Only Interactions: Don't Apply on Touch --- */

@media (hover: none) {
    /* Disable hover transforms on touch devices to prevent sticky states */
    .album-card:hover {
        transform: none;
    }

    .news-card:hover,
    .article-card:hover {
        transform: none;
    }

    .album-card:hover .album-cover img {
        transform: none;
    }

    /* Instead, provide active/pressed state for touch feedback */
    .album-card:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    .news-card:active,
    .article-card:active {
        transform: scale(0.99);
        transition-duration: 0.1s;
    }
}

/* ========================================
   PWA INSTALL BANNER (install-prompt.component.js)
   ======================================== */
.pwa-install-banner {
    position: fixed;
    bottom: calc(220px + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 22, 0.95);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9000;
    max-width: min(440px, calc(100% - 2rem));
}
.pwa-install-banner--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.pwa-install-banner--hiding { opacity: 0; pointer-events: none; }
.pwa-install-banner__icon { font-size: 1.5rem; flex-shrink: 0; }
.pwa-install-banner__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pwa-install-banner__text strong { font-size: 0.8125rem; color: var(--text-primary, #f3f4f6); }
.pwa-install-banner__text span { font-size: 0.75rem; color: var(--text-muted, #9ca3af); }
.pwa-install-banner__btn {
    flex-shrink: 0;
    padding: 0.4375rem 1rem;
    background: var(--color-primary, #dc2626);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pwa-install-banner__btn:hover { background: var(--color-primary-hover, #b91c1c); }
.pwa-install-banner__dismiss {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #333;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #999;
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pwa-install-banner__dismiss:hover { background: #555; color: var(--text-primary); }
@media (max-width: 768px) {
    .pwa-install-banner { bottom: calc(140px + 1rem); }
}

/* ═══════════════════════════════════════
   ARTICLE IMAGE PLACEHOLDER
   Replaces missing /images/publ/ photos in book chapter articles.
   These historical photos were never migrated from the old Joomla site.
   ═══════════════════════════════════════ */

.article-image-placeholder {
    display: inline-block;
    width: 120px;
    height: 90px;
    margin: 0.5em 1em 0.5em 0;
    float: left;
    background: var(--bg-tertiary, #1e1e2e);
    border: 1px dashed var(--border-color, #444);
    border-radius: 6px;
    position: relative;
    opacity: 0.5;
}

.article-image-placeholder::after {
    content: "\1F4F7";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════════
   WCAG 2.2 ACCESSIBILITY AUDIT FIXES — Phase 78
   Addresses color contrast, touch targets, reduced motion gaps,
   form accessibility hints, and link distinguishability.
   ═══════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------
   1. COLOR CONTRAST FIXES (WCAG 2.1 SC 1.4.3 — AA 4.5:1 normal text)
   ------------------------------------------------------------------- */

/* Desktop nav links: 0.75rem (12px) is normal text, needs 4.5:1.
   oklch(70% ...) on #0a0a0f is ~5.5:1 but factor in backdrop blur opacity.
   Bump to oklch(78% ...) for guaranteed 7:1+ on any dark background. */
.desktop-nav__link {
    color: oklch(78% 0.01 260);
}
.desktop-nav__link:hover {
    color: oklch(90% 0.01 260);
}

/* Guestbook / community page low-opacity text: replace opacity hacks
   with explicit high-contrast colors. opacity:0.5 on white text (#fff)
   yields ~#808080 on #0e0e11 = ~4.0:1 FAIL.
   Fix: use --text-muted (already boosted to #b0b5bd = ~7:1) */
.entry-date-relative,
.entry-date-full {
    opacity: 1;
    color: var(--text-muted, #b0b5bd);
}
.entry-date-full {
    font-size: 0.75rem;
}

.entries-count,
.char-counter,
.preview-label {
    opacity: 1;
    color: var(--text-muted, #b0b5bd);
}

/* Contact form labels: opacity 0.75 is borderline on dark.
   Replace with explicit color. */
.contact-form .form-group label,
.guestbook-form .form-group label {
    opacity: 1;
    color: var(--text-secondary, #d4d4d8);
}

/* Guestbook page header subtitle opacity 0.7 */
.guestbook-page-header p,
.contacts-page-header p {
    opacity: 1;
    color: var(--text-muted, #b0b5bd);
}

/* Loading / no-content text: opacity 0.5 fails */
.loading,
.no-content {
    opacity: 1;
    color: var(--text-muted, #b0b5bd);
}

/* Page dots in pagination */
.page-dots {
    opacity: 1;
    color: var(--text-disabled, #8b919a);
}

/* Guestbook entry message opacity 0.8 on white = ~#ccc on dark bg OK,
   but ensure it's explicit */
.entry-message {
    opacity: 1;
    color: var(--text-secondary, #d4d4d8);
}

/* Preview content opacity */
.preview-content {
    opacity: 1;
    color: var(--text-secondary, #d4d4d8);
}

/* Light theme: same fixes */
[data-theme="light"] .entry-date-relative,
[data-theme="light"] .entry-date-full,
[data-theme="light"] .entries-count,
[data-theme="light"] .char-counter,
[data-theme="light"] .preview-label {
    color: var(--text-muted, #595f69);
}
[data-theme="light"] .contact-form .form-group label,
[data-theme="light"] .guestbook-form .form-group label {
    color: var(--text-secondary, #374151);
}
[data-theme="light"] .entry-message,
[data-theme="light"] .preview-content {
    color: var(--text-secondary, #374151);
}

/* -------------------------------------------------------------------
   2. LINK DISTINGUISHABILITY (WCAG 2.1 SC 1.4.1)
   Links within body text must be distinguishable from surrounding text
   by more than just color (underline, or 3:1 contrast with surrounding text).
   ------------------------------------------------------------------- */

/* Footer links: add underline on focus/hover for distinguishability */
.footer-nav a:hover,
.footer-nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Contact page links in body text */
.contact-item a {
    text-decoration: underline;
    text-decoration-color: rgba(220, 38, 38, 0.4);
    text-underline-offset: 0.15em;
}
.contact-item a:hover {
    text-decoration-color: var(--accent-red, #dc2626);
}

/* -------------------------------------------------------------------
   3. FORM ACCESSIBILITY ENHANCEMENTS (WCAG 2.1 SC 1.3.5, 3.3.2)
   ------------------------------------------------------------------- */

/* Visible required field indicator: ensure * is red for sighted users */
.form-group label span[aria-hidden="true"] {
    color: var(--accent-red, #dc2626);
    font-weight: 700;
}

/* Field validation error styling */
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
    border-color: var(--accent-red-light);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Ensure form submit buttons meet minimum touch target on all devices */
.submit-btn,
.contact-form .submit-btn,
.guestbook-form .submit-btn {
    min-height: 44px;
    min-width: 44px;
}

/* -------------------------------------------------------------------
   4. MOBILE TOUCH TARGETS (WCAG 2.2 SC 2.5.8 — 24px minimum, 44px enhanced)
   ------------------------------------------------------------------- */

/* Footer links on mobile: ensure adequate tap targets */
@media (max-width: 768px) {
    .footer-nav a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding-inline: 0.25rem;
    }

    /* Pagination buttons */
    .page-btn,
    .page-current {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Guestbook social links */
    .social-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Cookie consent button */
    .cookie-consent__btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Language switcher links in mobile menu */
    .nav-menu-lang__link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* PWA install banner dismiss */
    .pwa-install-banner__dismiss {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Scroll-to-top button: always 44px+ */
.scroll-to-top-btn {
    min-width: 44px;
    min-height: 44px;
}

/* -------------------------------------------------------------------
   5. REDUCED MOTION ENHANCEMENTS (WCAG 2.2 SC 2.3.3)
   Catch animations in modern-fixes.css not covered by base.css
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Hero button pulse */
    .homepage .hero-actions .btn-primary:hover {
        animation: none;
    }

    /* Guestbook entry fade-in */
    .guestbook-entry {
        animation: none;
    }

    /* Album card reveal animations */
    .album-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disco stats reveal */
    .disco-stats__content {
        animation: none;
    }

    /* Disco spinner */
    .disco-stats__spinner {
        animation: none;
        border-top-color: var(--accent, #dc2626);
    }

    /* Counter animations: show final value immediately */
    .disco-banner__value[data-count-target] {
        transition: none;
    }

    /* All card hover lifts — disable transform */
    .album-card-modern:hover,
    .news-card:hover,
    .guestbook-entry:hover,
    .disco-stat-card:hover,
    .contact-item:hover {
        transform: none;
    }

    /* Smooth scroll override for in-page anchors */
    html {
        scroll-behavior: auto !important;
    }

    /* View transitions */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0.01ms !important;
    }

    /* Preview panel slide */
    .preview-panel {
        animation: none;
    }
}

/* -------------------------------------------------------------------
   6. FOCUS MANAGEMENT IMPROVEMENTS
   ------------------------------------------------------------------- */

/* Search modal: ensure focus trap is visible */
.search-modal-enhanced:focus-visible {
    outline: none; /* Dialog itself doesn't need outline; inner input gets it */
}

/* Tab buttons in search modal: visible focus */
.sme-tab:focus-visible {
    outline: 2px solid var(--focus-ring-color, #d4a020);
    outline-offset: 2px;
}

/* Disco stats toggle: visible focus */
.disco-stats__toggle:focus-visible {
    outline: 2px solid var(--focus-ring-color, #d4a020);
    outline-offset: 2px;
}

/* Album filter tabs: visible focus */
.album-filters button:focus-visible {
    outline: 2px solid var(--focus-ring-color, #d4a020);
    outline-offset: 2px;
}

/* Preview toggle and guestbook buttons */
.preview-toggle-btn:focus-visible {
    outline: 2px solid var(--focus-ring-color, #d4a020);
    outline-offset: 2px;
}

/* Ensure empty-cta-btn (guestbook) is keyboard accessible */
.empty-cta-btn:focus-visible {
    outline: 2px solid var(--focus-ring-color, #d4a020);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   7. HIGH CONTRAST MODE ADDITIONS
   ------------------------------------------------------------------- */

@media (forced-colors: active) {
    .entry-date-relative,
    .entry-date-full,
    .entries-count,
    .char-counter,
    .preview-label {
        color: CanvasText;
    }

    .field-error {
        color: LinkText;
    }

    .form-group--error input,
    .form-group--error textarea {
        border-color: LinkText;
    }

    .guestbook-entry,
    .contact-item,
    .contact-form-section,
    .guestbook-form-section {
        border: 1px solid CanvasText;
    }

    .submit-btn {
        border: 1px solid ButtonText;
    }

    .preview-toggle-btn {
        border: 1px solid ButtonText;
    }

    .page-btn {
        border: 1px solid ButtonText;
    }
}

/* ================================================================
   Phase 91 — Article Engagement Badges
   - Content freshness border-left (red=fresh, fades over 90 days)
   - "NEW" badge for articles < 30 days old
   - "Popular" fire badge for articles with high view counts
   - Reading time badge refinement
   ================================================================ */

/* Freshness indicator: left border that glows for fresh content */
.bento-card[style*="--freshness-opacity"] {
    border-left: 3px solid rgba(220, 38, 38, var(--freshness-opacity, 0));
    transition: border-left-color 0.3s ease;
}

/* Badge base: positioned in the card image area */
.card-badge {
    position: absolute;
    z-index: 3;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* NEW badge: top-left, green accent */
.card-badge--new {
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(16, 185, 129, 0.9);
    color: var(--text-primary);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    animation: engagement-pulse 2s ease-in-out infinite;
}

/* Popular badge: bottom-left, warm amber/fire */
.card-badge--popular {
    bottom: 0.75rem;
    left: 0.75rem;
    background: rgba(245, 158, 11, 0.9);
    color: var(--text-primary);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.card-badge--popular svg {
    flex-shrink: 0;
}

/* Subtle pulse animation for NEW badge */
@keyframes engagement-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Reading time badge: slightly distinct style */
.smart-tag--reading-time {
    color: var(--text-secondary);
}

/* Hover: badges get slightly more prominent */
.bento-card:hover .card-badge--new {
    background: rgba(16, 185, 129, 1);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.45);
}

.bento-card:hover .card-badge--popular {
    background: rgba(245, 158, 11, 1);
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.45);
}

/* When both badges are present, stack them cleanly */
.card-image-wrapper .card-badge--new + .card-badge--popular {
    bottom: 0.75rem;
}

/* Light theme adjustments */
[data-theme="light"] .card-badge--new {
    background: rgba(5, 150, 105, 0.92);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

[data-theme="light"] .card-badge--popular {
    background: rgba(217, 119, 6, 0.92);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .bento-card[style*="--freshness-opacity"] {
    border-left-color: rgba(220, 38, 38, var(--freshness-opacity, 0));
}

[data-theme="light"] .smart-tag--reading-time {
    color: rgba(0, 0, 0, 0.6);
}

/* Mobile: slightly smaller badges */
@media (max-width: 640px) {
    .card-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.45rem;
    }

    .card-badge--popular svg {
        width: 10px;
        height: 10px;
    }
}

/* Reduced motion: disable pulse animation */
@media (prefers-reduced-motion: reduce) {
    .card-badge--new {
        animation: none;
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    .card-badge {
        border: 1px solid CanvasText;
    }

    .bento-card[style*="--freshness-opacity"] {
        border-left: 3px solid CanvasText;
    }
}

/* =====================================================================
   Phase 92 — Video Page Enhancements
   - Pill-shaped category tabs with count badges
   - Enhanced thumbnail hover with play overlay scale animation
   - More prominent featured video hero with gradient overlay
   - Explicit responsive 1-2-3 column grid
   - Lazy-loading aspect-ratio for YouTube thumbnails
   ===================================================================== */

/* --- 1. Category Pill Tabs --- */
.vp-tabs__list {
    gap: 0.5rem;
    padding: 0.75rem 0;
    justify-content: center;
}

.vp-tabs__tab {
    border: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
    border-bottom: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.vp-tabs__tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.vp-tabs__tab.active {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--vp-gold, #f59e0b);
    color: var(--vp-gold, #f59e0b);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
    border-bottom-color: var(--vp-gold, #f59e0b);
}

/* Count badges inside pills */
.vp-tabs__count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--vp-text-muted, #9ca3af);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
    line-height: 1.3;
}

.vp-tabs__tab.active .vp-tabs__count {
    background: rgba(245, 158, 11, 0.3);
    color: var(--vp-gold, #f59e0b);
}

/* Mobile: show icons + counts, hide text */
@media (max-width: 600px) {
    .vp-tabs__list {
        justify-content: flex-start;
        gap: 0.35rem;
        padding: 0.6rem 0;
    }

    .vp-tabs__tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .vp-tabs__count {
        display: inline-block;
        font-size: 0.6rem;
        padding: 0.1rem 0.4rem;
    }
}

/* --- 2. Enhanced Thumbnail Hover with Play Overlay --- */
.vp-card__thumb {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

/* Gradient overlay on bottom of thumbnails for better text readability */
.vp-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.vp-card:hover .vp-card__thumb::after {
    opacity: 0.4;
}

/* Smoother thumbnail scale on hover */
.vp-card__thumb img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vp-card:hover .vp-card__thumb img {
    transform: scale(1.08);
}

/* Play button overlay - enhanced entrance animation */
.vp-card__overlay {
    z-index: 2;
}

.vp-card__play {
    width: 56px;
    height: 56px;
    background: rgba(220, 38, 38, 0.9);
    color: var(--text-primary);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.vp-card:hover .vp-card__play {
    transform: scale(1);
    box-shadow:
        0 4px 20px rgba(220, 38, 38, 0.4),
        0 0 40px rgba(220, 38, 38, 0.15);
}

.vp-card:focus-visible .vp-card__overlay {
    opacity: 1;
}

.vp-card:focus-visible .vp-card__play {
    transform: scale(1);
}

/* Pulse animation on the play button when hovered */
@keyframes vp-play-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}

.vp-card:hover .vp-card__play {
    animation: vp-play-pulse 2s ease-in-out infinite;
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .vp-card:hover .vp-card__play {
        animation: none;
    }

    .vp-card__thumb img {
        transition: none;
    }

    .vp-card__play {
        transition: none;
    }
}

/* Duration badge styling enhancement */
.vp-card__duration {
    z-index: 2;
    font-variant-numeric: tabular-nums;
}

.vp-card__badge {
    z-index: 2;
}

/* --- 3. Featured Video Hero Enhancement --- */
.vp-featured {
    position: relative;
    padding: 1rem 0 3rem;
}

/* Decorative top gradient for featured section */
.vp-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(153, 27, 27, 0.08) 0%,
        transparent 40%,
        transparent 60%,
        rgba(15, 15, 15, 0.5) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.vp-featured > .container {
    position: relative;
    z-index: 1;
}

/* Larger featured card with more visual weight */
.vp-featured__inner {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vp-featured__inner:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(245, 158, 11, 0.1);
}

/* Gradient overlay on featured thumbnail */
.vp-featured__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(153, 27, 27, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(245, 158, 11, 0.1) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.vp-featured__inner:hover .vp-featured__thumb::after {
    opacity: 0.5;
}

/* Featured play overlay - always subtly visible */
.vp-featured__play-overlay {
    z-index: 2;
    opacity: 0.6;
}

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

.vp-featured__play-btn {
    width: 76px;
    height: 76px;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.4);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

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

/* Featured tag shimmer */
@keyframes vp-featured-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.vp-featured__tag {
    background: linear-gradient(
        90deg,
        rgba(245, 158, 11, 0.15) 0%,
        rgba(245, 158, 11, 0.25) 50%,
        rgba(245, 158, 11, 0.15) 100%
    );
    background-size: 200% 100%;
    animation: vp-featured-shimmer 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .vp-featured__tag {
        animation: none;
    }
}

/* --- 4. Responsive Grid — Explicit 1-2-3 Columns --- */
.vp-grid {
    display: grid;
    gap: 1.5rem;
}

/* 3 columns on large screens */
@media (min-width: 1024px) {
    .vp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 columns on tablets */
@media (min-width: 640px) and (max-width: 1023px) {
    .vp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 column on mobile */
@media (max-width: 639px) {
    .vp-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 5. YouTube Thumbnails — Aspect Ratio + Lazy Loading --- */
.vp-card__thumb {
    aspect-ratio: 16 / 9;
}

.vp-card__thumb img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-featured__thumb {
    aspect-ratio: 16 / 9;
}

.vp-featured__thumb img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 6. Light Theme Overrides --- */
[data-theme="light"] .vp-tabs__tab {
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .vp-tabs__tab:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vp-tabs__tab.active {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--color-primary, #dc2626);
    color: var(--color-primary, #dc2626);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .vp-tabs__count {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .vp-tabs__tab.active .vp-tabs__count {
    background: rgba(220, 38, 38, 0.12);
    color: var(--color-primary, #dc2626);
}

[data-theme="light"] .vp-card__play {
    background: rgba(220, 38, 38, 0.95);
}

[data-theme="light"] .vp-featured__inner {
    border-color: rgba(0, 0, 0, 0.1);
    background: var(--bg-elevated, #ffffff);
}

[data-theme="light"] .vp-featured__inner:hover {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .vp-featured__tag {
    background: linear-gradient(
        90deg,
        rgba(220, 38, 38, 0.08) 0%,
        rgba(220, 38, 38, 0.15) 50%,
        rgba(220, 38, 38, 0.08) 100%
    );
    background-size: 200% 100%;
    color: var(--color-primary, #dc2626);
}

/* --- 7. Card hover info enhancement --- */
.vp-card__info h3 {
    transition: color 0.25s ease;
}

.vp-card:hover .vp-card__info h3 {
    color: var(--vp-gold, #f59e0b);
}

[data-theme="light"] .vp-card:hover .vp-card__info h3 {
    color: var(--color-primary, #dc2626);
}

/* Card action buttons - subtle hover enhancements */
.vp-card__action {
    transition: color 0.2s ease, transform 0.2s ease;
}

.vp-card__action:hover {
    transform: scale(1.15);
}

/* --- 8. Staggered card entrance animation --- */
@keyframes vp-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vp-section--visible .vp-card {
    animation: vp-card-enter 0.4s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
    .vp-section--visible .vp-card {
        animation: none;
    }
}

/* =====================================================================
   End Phase 92 — Video Page Enhancements
   ===================================================================== */

/* ==========================================================================
   Phase 92b — Search UX Enhancements
   - Results count with query text
   - Empty state suggestion chips
   - Individual recent search removal
   - Keyboard navigation focus ring
   - ARIA & accessibility improvements
   ========================================================================== */

/* --- Results count: show query in guillemets --- */
.sme-results-count {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 6px 12px 10px;
    letter-spacing: 0.01em;
}

/* --- Keyboard-selected result: visible focus ring --- */
.sme-result.selected {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: -2px;
    background: rgba(220, 38, 38, 0.12);
}

/* --- No-results suggestion chips --- */
.sme-suggestions {
    margin-top: 20px;
    text-align: center;
}

.sme-suggestions-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
}

.sme-suggestions-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sme-suggestion-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sme-suggestion-chip:hover,
.sme-suggestion-chip:focus-visible {
    background: rgba(220, 38, 38, 0.15);
    border-color: var(--accent-red, #dc2626);
    color: var(--text-primary);
}

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

/* --- Recent search item: row with remove button --- */
.sme-recent-item-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.sme-recent-item-row .sme-recent-item {
    flex: 1;
    min-width: 0;
}

.sme-recent-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

.sme-recent-remove:hover,
.sme-recent-remove:focus-visible {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.1);
}

.sme-recent-remove:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: -1px;
}

/* --- Light theme overrides for Phase 92b --- */
[data-theme="light"] .sme-suggestions-label {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .sme-suggestion-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .sme-suggestion-chip:hover,
[data-theme="light"] .sme-suggestion-chip:focus-visible {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--accent-red, #dc2626);
    color: #1a1a1a;
}

[data-theme="light"] .sme-recent-remove {
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .sme-recent-remove:hover,
[data-theme="light"] .sme-recent-remove:focus-visible {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.06);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .sme-suggestion-chip {
        transition: none;
    }
    .sme-recent-remove {
        transition: none;
    }
}

/* --- High contrast mode --- */
@media (forced-colors: active) {
    .sme-suggestion-chip {
        border: 1px solid CanvasText;
    }
    .sme-result.selected {
        outline: 2px solid Highlight;
    }
    .sme-recent-remove {
        border: 1px solid CanvasText;
    }
}

/* =====================================================================
   End Phase 92b — Search UX Enhancements
   ===================================================================== */

/* =====================================================================
   Contacts Page v2 — Modern 2026 card-based redesign
   ===================================================================== */

/* Hero */
.contacts-page-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(6rem, 10vw, 10rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

.contacts-hero {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.contacts-hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #fff 60%, var(--accent-red, #dc2626));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contacts-hero__subtitle {
    opacity: 0.6;
    font-size: clamp(1rem, 2vw, 1.15rem);
    margin: 0;
    max-width: 480px;
    margin-inline: auto;
}

/* Grid: 2-col on desktop, 1-col on mobile */
.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

/* ---------- Contact cards ---------- */
.contacts-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.contact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.contact-card--email::after {
    background: radial-gradient(ellipse at top left, rgba(220, 38, 38, 0.06), transparent 70%);
}

.contact-card--social::after {
    background: radial-gradient(ellipse at top left, rgba(74, 118, 168, 0.06), transparent 70%);
}

.contact-card--archive::after {
    background: radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.06), transparent 70%);
}

.contact-card--info::after {
    background: radial-gradient(ellipse at top left, rgba(250, 204, 21, 0.06), transparent 70%);
}

.contact-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

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

.contact-card__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.contact-card:hover .contact-card__icon-wrap {
    transform: scale(1.08);
}

.contact-card__icon-wrap--email {
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent-red-light);
}

.contact-card__icon-wrap--social {
    background: rgba(74, 118, 168, 0.12);
    color: #6b9fd3;
}

.contact-card__icon-wrap--archive {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.contact-card__icon-wrap--info {
    background: rgba(250, 204, 21, 0.1);
    color: #facc15;
}

.contact-card__body {
    min-width: 0;
}

.contact-card__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-red, #dc2626);
    margin: 0 0 0.35rem;
}

.contact-card__text {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.75;
    margin: 0 0 0.75rem;
}

/* Email row with copy button */
.contact-card__email-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contact-card__email-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(220, 38, 38, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.contact-card__email-link:hover {
    color: var(--accent-red, #dc2626);
    border-color: var(--accent-red, #dc2626);
}

.contact-card__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.contact-card__copy-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.contact-card__copy-btn--success {
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
    opacity: 1;
}

/* Social media branded buttons */
.contact-social-links {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.contact-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    border: none;
}

.contact-social-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    color: var(--text-primary);
}

.contact-social-btn--vk {
    background: linear-gradient(135deg, #4a76a8, #5b8bb8);
    box-shadow: 0 2px 8px rgba(74, 118, 168, 0.25);
}

.contact-social-btn--vk:hover {
    box-shadow: 0 4px 16px rgba(74, 118, 168, 0.35);
}

.contact-social-btn--yt {
    background: linear-gradient(135deg, #cc0000, #e52d27);
    box-shadow: 0 2px 8px rgba(229, 45, 39, 0.25);
}

.contact-social-btn--yt:hover {
    box-shadow: 0 4px 16px rgba(229, 45, 39, 0.35);
}

.contact-social-btn--tg {
    background: linear-gradient(135deg, #0088cc, #229ed9);
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
}

.contact-social-btn--tg:hover {
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.35);
}

.contact-social-btn .icon {
    width: 1.1em;
    height: 1.1em;
}

/* Archive card inline links */
.contact-card__links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contact-card__inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    padding: 0.3rem 0;
}

.contact-card__inline-link:hover {
    opacity: 1;
    color: var(--accent-red, #dc2626);
}

.contact-card__inline-link .icon {
    width: 0.9em;
    height: 0.9em;
}

/* ---------- Form section ---------- */
.contacts-page-v2 .contact-form-section {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    overflow: hidden;
}

.contacts-page-v2 .contact-form-section::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.2));
}

.contacts-page-v2 .contact-form-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.contact-form-hint {
    font-size: 0.85rem;
    opacity: 0.55;
    margin: 0 0 1.5rem;
}

.contacts-page-v2 .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.contacts-page-v2 .contact-form .form-group {
    position: relative;
}

.contacts-page-v2 .contact-form .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contacts-page-v2 .contact-form .form-group input,
.contacts-page-v2 .contact-form .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contacts-page-v2 .contact-form .form-group input::placeholder,
.contacts-page-v2 .contact-form .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.contacts-page-v2 .contact-form .form-group input:focus,
.contacts-page-v2 .contact-form .form-group textarea:focus {
    border-color: var(--accent-red, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    outline: none;
}

.contacts-page-v2 .contact-form .form-group input:focus-visible,
.contacts-page-v2 .contact-form .form-group textarea:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.form-group__char-count {
    display: block;
    text-align: right;
    font-size: 0.72rem;
    opacity: 0.4;
    margin-top: 0.25rem;
    transition: opacity 0.2s, color 0.2s;
}

.form-group__char-count--warn {
    opacity: 0.8;
    color: #facc15;
}

.contacts-page-v2 .contact-form .submit-btn {
    padding: 0.85rem 1.5rem;
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    align-self: start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contacts-page-v2 .contact-form .submit-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.contacts-page-v2 .contact-form .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contacts-page-v2 .form-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
}

.contacts-page-v2 .form-message.success {
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.contacts-page-v2 .form-message.error {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* ---------- FAQ section ---------- */
.contacts-faq {
    margin-top: 1.5rem;
}

.contacts-faq__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contacts-faq__title::before {
    content: '?';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
    color: var(--accent-red, #dc2626);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.contacts-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contacts-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contacts-faq__item:last-child {
    border-bottom: none;
}

.contacts-faq__question {
    padding: 0.9rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
    user-select: none;
}

.contacts-faq__question::-webkit-details-marker {
    display: none;
}

.contacts-faq__question::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

.contacts-faq__item[open] > .contacts-faq__question::after {
    transform: rotate(-135deg);
    opacity: 0.7;
}

.contacts-faq__question:hover {
    color: var(--accent-red, #dc2626);
}

.contacts-faq__answer {
    padding: 0 0 1rem;
    animation: faqSlideIn 0.25s ease;
}

.contacts-faq__answer p {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.7;
    margin: 0;
}

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

/* ---------- Toast notification ---------- */
.contacts-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30, 30, 30, 0.95);
    color: var(--text-primary);
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.contacts-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .contacts-cards {
        order: 2;
    }

    .contacts-right-col {
        order: 1;
    }
}

@media (max-width: 520px) {
    .contact-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .contact-card__icon-wrap {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .contact-social-links {
        flex-direction: column;
    }

    .contact-social-btn {
        justify-content: center;
    }

    .contacts-hero__title {
        -webkit-text-fill-color: unset;
        background: none;
        color: var(--text-primary);
    }
}

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

[data-theme="light"] .contact-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .contacts-hero__title {
    background: linear-gradient(135deg, #1a1a2e 60%, var(--accent-red, #dc2626));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .contacts-page-v2 .contact-form-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contacts-page-v2 .contact-form .form-group input,
[data-theme="light"] .contacts-page-v2 .contact-form .form-group textarea {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .contacts-page-v2 .contact-form .form-group input::placeholder,
[data-theme="light"] .contacts-page-v2 .contact-form .form-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .contact-card__copy-btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .contacts-faq__item {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contacts-toast {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .contact-card {
        transition: none;
    }
    .contact-card:hover {
        transform: none;
    }
    .contact-card__icon-wrap {
        transition: none;
    }
    .contacts-faq__answer {
        animation: none;
    }
    .contacts-toast {
        transition: opacity 0.15s;
    }
}

/* ---------- High contrast ---------- */
@media (forced-colors: active) {
    .contact-card {
        border: 1px solid CanvasText;
    }
    .contact-social-btn {
        border: 1px solid CanvasText;
    }
    .contacts-faq__question::after {
        border-color: CanvasText;
    }
}

/* ---------- Print ---------- */
@media print {
    .contacts-page-v2 {
        padding: 1rem;
    }
    .contact-form-section,
    .contacts-faq {
        break-inside: avoid;
    }
    .contact-card:hover {
        transform: none;
        box-shadow: none;
    }
    .contact-card__copy-btn {
        display: none;
    }
}

/* =====================================================================
   End Contacts Page v2
   ===================================================================== */

/* =====================================================================
   Phase 93 — Video Page 2026 Enhancements
   - Keyboard shortcuts hint in hero section
   - View count badges on cards and featured section
   - Duration overlay visible on thumbnail hover
   - Enhanced card hover with play button + duration reveal
   - Featured video views meta styling
   ===================================================================== */

/* --- 1. Hero Keyboard Shortcuts Hint Bar --- */
.vp-hero__kbd-hint {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.vp-hero__kbd-hint:hover {
    opacity: 0.85;
}

.vp-hero__kbd-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--vp-text-muted, #9ca3af);
    letter-spacing: 0.02em;
}

.vp-hero__kbd-item kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--vp-text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    line-height: 1.4;
    min-width: 1.4em;
    text-align: center;
}

@media (max-width: 600px) {
    .vp-hero__kbd-hint {
        display: none;
    }
}

/* --- 2. View Count Badges on Cards --- */
.vp-card__views {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--vp-text-muted, #9ca3af);
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
    font-variant-numeric: tabular-nums;
}

.vp-card__views svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.vp-card:hover .vp-card__views {
    opacity: 1;
    color: var(--vp-gold, #f59e0b);
}

.vp-card:hover .vp-card__views svg {
    opacity: 1;
}

/* --- 3. Featured Video Views Styling --- */
.vp-featured__views {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--vp-text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
}

.vp-featured__views svg {
    opacity: 0.7;
}

/* --- 4. Duration Overlay on Thumbnail Hover --- */
.vp-card__duration-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}

.vp-card:hover .vp-card__duration-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Hide the static duration badge on hover to avoid duplication */
.vp-card:hover .vp-card__duration {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* --- 5. Enhanced Tab Transitions (smooth filter switching) --- */
.video-page .vp-section {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.video-page .vp-section--visible {
    animation: vp-section-reveal 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes vp-section-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 6. Keyboard Shortcut Hints in Modal --- */
.vp-kbd-hints {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.vp-kbd-hints:hover {
    opacity: 0.9;
}

.vp-kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.vp-kbd-hint kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    line-height: 1.4;
    min-width: 1.2em;
    text-align: center;
}

/* --- 7. Card Meta Row Improvements --- */
.video-page .vp-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.video-page .vp-card__meta .vp-card__actions {
    margin-left: auto;
}

/* --- 8. Light Theme Overrides for New Elements --- */
[data-theme="light"] .vp-hero__kbd-item kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .vp-hero__kbd-item {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .vp-hero__kbd-hint {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vp-card__views {
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .vp-card:hover .vp-card__views {
    color: var(--color-primary, #dc2626);
}

[data-theme="light"] .vp-card__duration-overlay {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .vp-featured__views {
    color: var(--text-secondary, #6b7280);
}

[data-theme="light"] .vp-kbd-hints {
    background: rgba(0, 0, 0, 0.04);
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vp-kbd-hint {
    color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .vp-kbd-hint kbd {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.55);
}

/* --- 9. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .video-page .vp-section--visible {
        animation: none;
    }
    .vp-card__duration-overlay {
        transition: none;
    }
    .vp-card__views {
        transition: none;
    }
    .vp-hero__kbd-hint {
        transition: none;
    }
}

/* --- 10. High Contrast Mode --- */
@media (forced-colors: active) {
    .vp-card__duration-overlay {
        border: 1px solid CanvasText;
    }
    .vp-card__views {
        color: CanvasText;
    }
    .vp-hero__kbd-item kbd,
    .vp-kbd-hint kbd {
        border: 1px solid CanvasText;
    }
}

/* =====================================================================
   End Phase 93 — Video Page 2026 Enhancements
   ===================================================================== */

/* =====================================================================
   Phase 94: Article Reading UX — 2026-2027 Enhancements
   Typography, pull quotes, drop caps, back-to-top, sticky share,
   image zoom, related cards, mobile share bar.
   ===================================================================== */

/* --- 1. Typography: Optimal Measure & Line Height --- */

.article-body-modern .typography-content {
    max-width: 85ch;
    margin-inline: auto;
    font-size: clamp(1.05rem, 1.5vw, 1.15rem);
    line-height: 1.9;
    letter-spacing: 0.01em;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- 2. Drop Cap for First Paragraph --- */

.article-body-modern .typography-content > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    font-weight: 800;
    font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
    color: var(--accent-red, #dc2626);
    margin-right: 0.08em;
    margin-top: 0.05em;
    text-shadow: 2px 2px 8px rgba(220, 38, 38, 0.25);
}

[data-theme="light"] .article-body-modern .typography-content > p:first-of-type::first-letter {
    color: var(--accent-red, #b91c1c);
    text-shadow: 1px 1px 4px rgba(185, 28, 28, 0.15);
}

/* --- 3. Pull Quote / Blockquote Styling --- */

.article-body-modern .typography-content blockquote,
.article-body-modern blockquote {
    position: relative;
    border-left: 4px solid var(--accent-red, #dc2626);
    padding: 1.75rem 2rem 1.75rem 2.5rem;
    margin: 2.5rem -1rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(220, 38, 38, 0.01) 100%);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.15em;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
}

.article-body-modern .typography-content blockquote::before,
.article-body-modern blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.15em;
    left: 0.4rem;
    font-size: 4rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--accent-red, #dc2626);
    opacity: 0.25;
    line-height: 1;
    pointer-events: none;
}

.article-body-modern .typography-content blockquote::after,
.article-body-modern blockquote::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at bottom right, rgba(220, 38, 38, 0.06) 0%, transparent 70%);
    border-radius: 0 0 12px 0;
    pointer-events: none;
}

.article-body-modern .typography-content blockquote p:last-child,
.article-body-modern blockquote p:last-child {
    margin-bottom: 0;
}

[data-theme="light"] .article-body-modern .typography-content blockquote,
[data-theme="light"] .article-body-modern blockquote {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
    color: rgba(0, 0, 0, 0.7);
    border-left-color: var(--accent-red, #b91c1c);
}

[data-theme="light"] .article-body-modern .typography-content blockquote::before,
[data-theme="light"] .article-body-modern blockquote::before {
    color: var(--accent-red, #b91c1c);
    opacity: 0.2;
}

/* --- 4. Heading Hierarchy with Decorative Elements --- */

.article-body-modern .typography-content h2 {
    font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.article-body-modern .typography-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-red, #dc2626) 0%, transparent 100%);
    border-radius: 2px;
}

.article-body-modern .typography-content h2:not(:first-child) {
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.article-body-modern .typography-content h3 {
    font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 600;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.01em;
}

.article-body-modern .typography-content h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 0.9em;
    background: var(--accent-red, #dc2626);
    border-radius: 2px;
    margin-right: 0.5rem;
    vertical-align: middle;
    opacity: 0.6;
}

[data-theme="light"] .article-body-modern .typography-content h2 {
    color: var(--text-primary, #1a1a2e);
}

[data-theme="light"] .article-body-modern .typography-content h2:not(:first-child) {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .article-body-modern .typography-content h3 {
    color: var(--text-primary, #2d2d44);
}

/* --- 5. Article Lead / Excerpt --- */

.article-body-modern .article-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-secondary);
    border-left: 3px solid rgba(220, 38, 38, 0.3);
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 65ch;
    margin-inline: auto;
}

[data-theme="light"] .article-body-modern .article-lead {
    color: rgba(0, 0, 0, 0.6);
}

/* --- 6. Image Enhancements: Full-width Breakout + Zoom --- */

.article-body-modern .typography-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem auto;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Full-width breakout for large images */
.article-body-modern .typography-content img[width],
.article-body-modern .typography-content .video-responsive {
    max-width: calc(65ch + 8rem);
    margin-left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

/* Zoomable image cursor */
.article-zoomable-img {
    cursor: zoom-in;
}

.article-zoomable-img:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Zoomed state */
.article-img-zoomed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    z-index: 10000;
    cursor: zoom-out !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
    object-fit: contain;
    animation: articleImgZoomIn 0.3s ease forwards;
}

@keyframes articleImgZoomIn {
    from { opacity: 0.8; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
}

/* Overlay behind zoomed image */
body.article-img-zoom-active::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: articleOverlayFadeIn 0.25s ease forwards;
}

@keyframes articleOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Figure + Figcaption styling */
.article-figure {
    margin: 2rem auto;
    max-width: calc(65ch + 8rem);
    text-align: center;
}

.article-figure img {
    margin-bottom: 0.5rem !important;
}

.article-figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    padding: 0 1rem;
}

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

/* --- 7. Mobile Share Bar --- */

.article-share-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .article-share-mobile {
        display: flex;
        gap: 0.5rem;
        margin-top: 1.25rem;
        flex-wrap: wrap;
    }
}

.share-btn-mobile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    min-height: 44px;
}

.share-btn-mobile:hover,
.share-btn-mobile:focus-visible {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--text-primary);
}

.share-btn-mobile.success {
    background: rgba(39, 174, 96, 0.15);
    border-color: rgba(39, 174, 96, 0.4);
    color: #27ae60;
}

[data-theme="light"] .share-btn-mobile {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .share-btn-mobile:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--accent-red, #b91c1c);
}

/* --- 8. Sticky Share Sidebar Enhancements --- */

.sticky-share-bar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    align-self: start;
}

.share-bar-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.35);
    writing-mode: vertical-rl;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

[data-theme="light"] .share-bar-label {
    color: rgba(0, 0, 0, 0.3);
}

.share-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
}

.share-btn-modern:hover,
.share-btn-modern:focus-visible {
    background: rgba(220, 38, 38, 0.15);
    border-color: var(--accent-red, #dc2626);
    color: var(--text-primary);
    transform: scale(1.1);
}

@media (max-width: 1024px) {
    .sticky-share-bar {
        display: none;
    }
}

/* --- 9. Back to Top Button --- */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(220, 38, 38, 0.4);
    background: rgba(10, 10, 15, 0.9);
    color: var(--accent-red, #dc2626);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    font-family: inherit;
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-red, #dc2626);
    border-color: var(--accent-red, #dc2626);
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* Fire effect glow on hover */
.back-to-top__fire {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 12px;
    background: radial-gradient(ellipse at bottom, rgba(255, 100, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.back-to-top:hover .back-to-top__fire {
    opacity: 1;
    animation: backToTopFireFlicker 0.4s ease-in-out infinite alternate;
}

@keyframes backToTopFireFlicker {
    0%   { transform: translateX(-50%) scale(1); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

[data-theme="light"] .back-to-top {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .back-to-top:hover {
    background: var(--accent-red, #dc2626);
    color: var(--text-primary);
}

/* Move above player on mobile */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 5rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* --- 10. Related Articles Section Enhancement --- */

.related-section__heading {
    font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.related-section__heading .icon {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .related-section__heading {
    color: var(--text-primary, #1a1a2e);
}

/* Horizontal scroll container on mobile */
.related-articles-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .related-articles-scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(220, 38, 38, 0.3) transparent;
    }

    .related-articles-scroll > * {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }

    .related-articles-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .related-articles-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .related-articles-scroll::-webkit-scrollbar-thumb {
        background: rgba(220, 38, 38, 0.3);
        border-radius: 4px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .related-articles-scroll {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Enhanced related card styling */
.related-articles-scroll .bento-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.related-articles-scroll .bento-card:hover {
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .related-articles-scroll .bento-card {
    background: var(--bg-primary);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .related-articles-scroll .bento-card:hover {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* --- 11. Prev/Next Navigation Enhancement --- */

.article-prev-next-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
    align-items: start;
}

.article-prev-next-nav .prev-next-link {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.article-prev-next-nav .prev-next-link:hover {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.04);
}

@media (max-width: 768px) {
    .article-prev-next-nav {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem 2rem;
    }
    .article-prev-next-nav .back-to-articles-link {
        order: -1;
    }
}

/* --- 12. Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
    .article-body-modern .typography-content img,
    .article-zoomable-img,
    .article-img-zoomed,
    .back-to-top,
    .back-to-top__fire,
    .share-btn-modern,
    .share-btn-mobile,
    body.article-img-zoom-active::before,
    .related-articles-scroll .bento-card {
        transition: none !important;
        animation: none !important;
    }
}

/* --- 13. Related card base styles (used in article related-albums section) --- */
.related-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.related-card:hover {
    border-color: rgba(220, 38, 38, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.related-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}
.related-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}
.related-card--album .related-card__image {
    aspect-ratio: 1 / 1;
}
.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.related-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    background: rgba(220, 38, 38, 0.06);
}
.related-card__body {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}
.related-card__category {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(220, 38, 38, 0.85);
}
.related-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-card__meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

/* Skeleton state */
.related-card--skeleton { pointer-events: none; }
.related-card--skeleton .related-card__image { animation: skeleton-pulse 1.5s ease-in-out infinite; }
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.25; }
}

/* --- 14. Print --- */

@media print {
    .sticky-share-bar,
    .article-share-mobile,
    .back-to-top,
    .article-img-zoomed {
        display: none !important;
    }

    .article-body-modern .typography-content {
        max-width: 100%;
        font-size: 11pt;
    }

    .article-body-modern .typography-content img[width],
    .article-body-modern .typography-content .video-responsive {
        max-width: 100%;
        margin-left: 0;
        transform: none;
    }
}

/* --- 14. High Contrast Mode --- */

@media (forced-colors: active) {
    .back-to-top {
        border: 2px solid CanvasText;
    }

    .share-btn-modern,
    .share-btn-mobile {
        border: 1px solid CanvasText;
    }

    .article-body-modern .typography-content blockquote {
        border-left-color: CanvasText;
    }
}

/* =====================================================================
   End Phase 94 — Article Reading UX
   ===================================================================== */

/* === Phase 96: API Documentation Page === */

/* Layout */
.api-docs-page {
    min-height: 100vh;
    background: var(--bg-primary, #0a0a0f);
    color: var(--text-primary, #e8e6e3);
}

.api-docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 80px);
    position: relative;
}

/* Sidebar */
.api-docs-sidebar {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--bg-secondary, #111118);
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    z-index: 10;
}

.api-docs-sidebar__header {
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #111118);
    padding: 1.25rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    z-index: 1;
}

.api-docs-sidebar__title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 0.75rem;
}

.api-docs-search__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary, #0a0a0f);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--text-primary, #e8e6e3);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.api-docs-search__input:focus {
    border-color: var(--accent-color, #dc2626);
}

.api-docs-search__input::placeholder {
    color: var(--text-muted, #666);
}

/* Navigation */
.api-docs-nav {
    padding: 0.5rem 0;
}

.api-docs-nav__group {
    margin-bottom: 0.25rem;
}

.api-docs-nav__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--text-primary, #e8e6e3);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    text-align: left;
}

.api-docs-nav__heading:hover {
    background: rgba(255,255,255,0.04);
}

.api-docs-nav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.api-docs-nav__count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted, #666);
    font-weight: 400;
}

.api-docs-nav__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
}

.api-docs-nav__group--collapsed .api-docs-nav__list {
    display: none;
}

.api-docs-nav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem 0.35rem 1.5rem;
    text-decoration: none;
    color: var(--text-secondary, #a0a0a0);
    font-size: 0.78rem;
    transition: color 0.15s, background 0.15s;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
}

.api-docs-nav__link:hover {
    color: var(--text-primary, #e8e6e3);
    background: rgba(255,255,255,0.04);
}

.api-docs-nav__path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

/* Sidebar toggle (mobile) */
.api-docs-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color, #dc2626);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
}

/* Main content */
.api-docs-content {
    padding: 2rem 2.5rem 4rem;
    max-width: 900px;
}

/* Hero */
.api-docs-hero {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.api-docs-hero__title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.api-docs-hero__desc {
    font-size: 1.05rem;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 1rem;
    line-height: 1.6;
}

.api-docs-hero__meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Badges */
.api-docs-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.api-docs-badge--version {
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
}

.api-docs-badge--base {
    background: rgba(244,114,182,0.15);
    color: #f472b6;
}

.api-docs-badge--format {
    background: rgba(52,211,153,0.15);
    color: #34d399;
}

.api-docs-badge--auth {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    margin-left: 0.5rem;
}

/* Info grid */
.api-docs-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.api-docs-info-card {
    background: var(--bg-secondary, #111118);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.api-docs-info-card h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 0.5rem;
}

.api-docs-info-card p {
    font-size: 0.85rem;
    color: var(--text-secondary, #a0a0a0);
    margin: 0;
    line-height: 1.5;
}

.api-docs-code-inline {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #60a5fa;
    word-break: break-all;
}

/* Sections */
.api-docs-section {
    margin-bottom: 2.5rem;
}

.api-docs-section__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.api-docs-section__desc {
    font-size: 0.9rem;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 1rem;
    line-height: 1.6;
}

/* Code blocks */
.api-docs-code-block {
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    line-height: 1.6;
}

.api-docs-code-block code {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
    color: #e6edf3;
    white-space: pre;
}

.api-docs-code-block--error {
    border-color: rgba(220,38,38,0.2);
}

/* Category sections */
.api-docs-category {
    margin-bottom: 3rem;
}

.api-docs-category__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cat-color, #60a5fa);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-docs-category__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Endpoint cards */
.api-docs-endpoint {
    background: var(--bg-secondary, #111118);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s;
    scroll-margin-top: 100px;
}

.api-docs-endpoint:target,
.api-docs-endpoint:hover {
    border-color: rgba(255,255,255,0.15);
}

.api-docs-endpoint__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.api-docs-endpoint__path {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #e8e6e3);
}

.api-docs-endpoint__summary {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text-primary, #e8e6e3);
}

.api-docs-endpoint__desc {
    font-size: 0.88rem;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 1rem;
    line-height: 1.6;
}

/* Method badges */
.api-docs-method-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.api-docs-method-badge--lg {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}

.api-docs-method--get {
    background: rgba(52,211,153,0.15);
    color: #34d399;
}

.api-docs-method--post {
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
}

.api-docs-method--put {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}

.api-docs-method--delete {
    background: rgba(248,113,113,0.15);
    color: #f87171;
}

/* Parameter tables */
.api-docs-params {
    margin: 1rem 0;
}

.api-docs-params__title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #a0a0a0);
    margin: 0 0 0.5rem;
}

.api-docs-params__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.api-docs-params__table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    color: var(--text-secondary, #a0a0a0);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-docs-params__table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-secondary, #a0a0a0);
    vertical-align: top;
}

.api-docs-params__table td code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #f472b6;
    font-size: 0.82rem;
}

/* Response sections */
.api-docs-response {
    margin: 1rem 0;
}

.api-docs-response__title {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-docs-status {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.api-docs-status--ok {
    background: rgba(52,211,153,0.15);
    color: #34d399;
}

.api-docs-status--err {
    background: rgba(248,113,113,0.15);
    color: #f87171;
}

/* Try it section */
.api-docs-try {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.api-docs-try-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.25);
    border-radius: 6px;
    color: #34d399;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
}

.api-docs-try-btn:hover:not(:disabled) {
    background: rgba(52,211,153,0.2);
    border-color: rgba(52,211,153,0.4);
}

.api-docs-try-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.api-docs-try__result {
    margin-top: 1rem;
}

.api-docs-try__status {
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #a0a0a0);
}

/* Loading & Error */
.api-docs-loading {
    color: var(--text-muted, #666);
    font-style: italic;
}

.api-docs-error {
    color: #f87171;
    font-size: 0.9rem;
}

/* Footer link */
.api-docs-footer-link {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.api-docs-json-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--text-secondary, #a0a0a0);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}

.api-docs-json-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e8e6e3);
}

/* Mobile responsive: sidebar -> top tabs */
@media (max-width: 900px) {
    .api-docs-layout {
        grid-template-columns: 1fr;
    }

    .api-docs-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 280px;
        height: 100vh;
        z-index: 200;
        transition: left 0.3s ease;
    }

    .api-docs-sidebar--open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }

    .api-docs-sidebar-toggle {
        display: flex;
    }

    .api-docs-content {
        padding: 1.5rem 1rem 4rem;
    }

    .api-docs-hero__title {
        font-size: 1.5rem;
    }

    .api-docs-info-grid {
        grid-template-columns: 1fr;
    }

    .api-docs-endpoint__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .api-docs-endpoint__path {
        font-size: 0.82rem;
        word-break: break-all;
    }

    .api-docs-params__table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .api-docs-content {
        padding: 1rem 0.75rem 3rem;
    }

    .api-docs-endpoint {
        padding: 1rem;
    }

    .api-docs-code-block {
        padding: 0.75rem;
        font-size: 0.75rem;
    }
}

/* Light theme support */
[data-theme="light"] .api-docs-page {
    background: #f8fafc;
    color: #1e293b;
}

[data-theme="light"] .api-docs-sidebar {
    background: var(--bg-primary);
    border-right-color: #e2e8f0;
}

[data-theme="light"] .api-docs-sidebar__header {
    background: var(--bg-primary);
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .api-docs-search__input {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

[data-theme="light"] .api-docs-endpoint {
    background: var(--bg-primary);
    border-color: #e2e8f0;
}

[data-theme="light"] .api-docs-code-block {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .api-docs-code-block code {
    color: #1e293b;
}

[data-theme="light"] .api-docs-info-card {
    background: var(--bg-primary);
    border-color: #e2e8f0;
}

[data-theme="light"] .api-docs-hero__title {
    background: linear-gradient(135deg, #1e293b 0%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Print styles */
@media print {
    .api-docs-sidebar,
    .api-docs-sidebar-toggle,
    .api-docs-try,
    .api-docs-search {
        display: none !important;
    }

    .api-docs-layout {
        grid-template-columns: 1fr;
    }

    .api-docs-endpoint {
        break-inside: avoid;
    }
}

/* =====================================================================
   End Phase 96 — API Documentation Page
   ===================================================================== */

/* =====================================================================
   Phase 97 — CLS (Cumulative Layout Shift) Prevention
   Target: reduce CLS from 0.735 to below 0.1 on homepage,
   and from 0.233/0.229 to below 0.1 on albums/members pages.
   ===================================================================== */

/* 1. FOOTER: disable content-visibility to prevent late-render CLS.
      The footer was rendering with a placeholder height (400px from base.css
      contain-intrinsic-size) and then shifting when real content appeared. */
.site-footer {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
}

/* 2. NEWSLETTER SECTION: reserve stable height so footer-bottom never shifts */
.newsletter-section {
    min-height: 90px;
    box-sizing: border-box;
}

/* 3. BODY PADDING: accommodate fixed music player bar at bottom.
      Without this, the last page content is hidden behind the player,
      and users scroll to reveal it — triggering a perceived shift. */
body {
    padding-bottom: 90px;
}

/* When bottom-nav is present on mobile, increase padding */
@media (max-width: 768px) {
    body.has-bottom-nav {
        padding-bottom: 150px; /* 90px player + 60px nav */
    }
}

/* 4. COOKIE CONSENT: ensure it's always fixed, never in document flow.
      Remove the content-visibility: auto from base.css that could cause
      the banner to have a placeholder in the layout. */
.cookie-consent {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
}

/* 5. HOMEPAGE SECTIONS: disable content-visibility:auto which was causing
      sections to render at contain-intrinsic-size height first, then snap
      to real height — a major CLS source.
      Instead, use min-height for space reservation. */
.homepage .stats-section,
.homepage .guestbook-teaser-section,
.homepage .archive-section,
.homepage .memorial-section,
.homepage .timeline-section,
.homepage .quote-rotator-section {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
}

/* Reserve approximate heights to prevent reflow */
.homepage .stats-section {
    min-height: 300px;
}

.homepage .guestbook-teaser-section {
    min-height: 250px;
}

.homepage .quote-rotator-section {
    min-height: 220px;
}

/* Track spotlight: hidden until JS populates it.
   Do NOT reserve space — it would create empty gap then collapse. */
.track-spotlight-section {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
}

/* 6. QUICK FACTS BANNER: near top of page, must not use content-visibility
      since it's frequently above-fold on many viewports. */
.quick-facts-banner {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
    min-height: 56px;
}

/* 7. ON THIS DAY section: SSR-rendered, needs stable height */
.on-this-day-section {
    min-height: 120px;
}

@media (max-width: 768px) {
    .on-this-day-section {
        min-height: 140px;
    }
}

/* 8. FEATURED CONTENT GRID: reserve height for album cards + news + gallery */
.featured-content {
    min-height: 500px;
}

/* 9. LATEST ALBUM SHOWCASE: reserve height */
.latest-album-showcase {
    min-height: 280px;
}

/* 10. ALBUMS PAGE: album grid cards — prevent reflow from async CSS grid */
.albums-grid-modern {
    min-height: 200px;
}

/* 11. MEMBERS PAGE: prevent member card grid CLS */
.members-grid {
    min-height: 200px;
}

/* 12. IMAGE ASPECT RATIOS: enforce ratios inline so async CSS
       doesn't cause images to snap from 0 height to rendered height */
.album-card-modern img,
.albums-grid-modern img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.gallery-photo-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* 13. NAVIGATION: prevent header collapse */
.site-header {
    min-height: 60px;
}

/* 14. Override the content-visibility:auto on community sections
       defined in base.css — these cause CLS on their respective pages */
.community-nav,
.community-section {
    content-visibility: visible !important;
    contain-intrinsic-size: none;
}

/* 15. Gallery grids: keep content-visibility but increase intrinsic size accuracy */
.gallery-grid,
.fan-photos-grid {
    contain-intrinsic-size: auto 600px;
}

/* =====================================================================
   End Phase 97 — CLS Prevention
   ===================================================================== */

/* === Phase 97: Critical Visibility Fixes === */
/* Root cause: content-visibility:auto + contain:layout style on homepage
   sections prevents them from rendering/expanding properly. Sections appear
   as empty dark boxes because:
   1) content-visibility:auto adds implicit size containment
   2) contain:layout style (from inline style in index.ejs) doubles up
   3) contain-intrinsic-size limits visible height while content is taller
   Fix: force content-visibility:visible on ALL homepage sections and remove
   the aggressive containment that was hiding content. */

/* --- 1. Override ALL content-visibility:auto on homepage sections --- */
/* These were set in inline <style> (index.ejs), modern-fixes.css Phase 65,
   and base.css Phase 78. The performance gain is not worth invisible content. */
.homepage .on-this-day-section,
.homepage .quick-facts-banner,
.homepage .track-spotlight-section,
.homepage .latest-album-showcase,
.homepage .featured-content,
.homepage .archive-section,
.homepage .stats-section,
.homepage .home-live-stats,
.homepage .guestbook-teaser-section,
.homepage .quote-rotator-section,
.homepage .memorial-section,
.homepage .timeline-section {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
}

/* --- 2. Remove overly aggressive containment from homepage sections --- */
/* The inline style ".homepage section[data-reveal]{contain:layout style}"
   combined with content-visibility:auto was the root cause of invisible sections.
   Layout containment prevents sections from growing to fit content. */
.homepage section[data-reveal],
.homepage .content-block {
    contain: style !important;
}

/* --- 3. Ensure text colors are explicitly set for dark theme readability --- */
.homepage .latest-album-showcase,
.homepage .latest-album-inner,
.homepage .latest-album-title,
.homepage .latest-album-info,
.homepage .latest-album-year,
.homepage .latest-album-badge {
    color: #e5e5e5;
}

.homepage .featured-content,
.homepage .featured-content .block-title,
.homepage .featured-content .section-header-modern,
.homepage .content-block {
    color: var(--text-primary, #e5e5e5);
}

.homepage .archive-section,
.homepage .archive-section .block-title,
.homepage .archive-card-title,
.homepage .archive-card-body {
    color: var(--text-primary, #e5e5e5);
}

.homepage .stats-section,
.homepage .stats-section .block-title,
.homepage .live-stat-card,
.homepage .live-stat-number,
.homepage .live-stat-label {
    color: var(--text-primary, #e5e5e5);
}

.homepage .guestbook-teaser-section,
.homepage .guestbook-teaser-title,
.homepage .guestbook-teaser-sub,
.homepage .guestbook-entry-msg {
    color: var(--text-primary, #e5e5e5);
}

.homepage .quote-rotator-section,
.homepage .quote-rotator-text,
.homepage .quote-rotator-author {
    color: var(--text-primary, #e5e5e5);
}

.homepage .memorial-section,
.homepage .memorial-title,
.homepage .memorial-subtitle-enhanced,
.homepage .memorial-dates,
.homepage .memorial-role,
.homepage .memorial-tribute-text {
    color: var(--text-primary, #e5e5e5);
}

.homepage .timeline-section,
.homepage .timeline-section .block-title {
    color: var(--text-primary, #e5e5e5);
}

/* --- 4. Explicit section backgrounds for contrast on dark body --- */
.homepage .latest-album-showcase {
    background: rgba(18, 18, 24, 0.95);
}

.homepage .archive-section {
    background: rgba(18, 18, 24, 0.9);
}

.homepage .stats-section {
    background: rgba(15, 15, 20, 0.95);
}

.homepage .guestbook-teaser-section {
    background: rgba(18, 18, 24, 0.9);
}

.homepage .memorial-section {
    background: rgba(12, 12, 18, 0.98);
}

.homepage .timeline-section {
    background: rgba(18, 18, 24, 0.9);
}

.homepage .quote-rotator-section {
    background: rgba(15, 15, 20, 0.95);
}

/* --- 5. CLS prevention: set min-height on sections instead of
   relying on content-visibility contain-intrinsic-size --- */
.homepage .latest-album-showcase {
    min-height: 280px;
}

.homepage .featured-content {
    min-height: 500px;
}

.homepage .archive-section {
    min-height: 400px;
}

.homepage .stats-section {
    min-height: 300px;
}

.homepage .guestbook-teaser-section {
    min-height: 250px;
}

.homepage .quote-rotator-section {
    min-height: 200px;
}

.homepage .memorial-section {
    min-height: 400px;
}

.homepage .timeline-section {
    min-height: 350px;
}

/* --- 6. Fix featured-content section clipping child content --- */
/* featured-content was getting content-visibility:auto from
   scoped-styles.css or components.css, clipping its 2000px+ container */
.homepage .featured-content {
    overflow: visible;
}

.homepage .featured-content .container {
    overflow: visible;
}

/* --- 7. Override data-reveal containment from modern-fixes.css:5669 --- */
/* [data-reveal] { contain: layout style } was creating layout containment
   on all reveal targets, preventing their parent sections from sizing properly */
.homepage [data-reveal] {
    contain: style !important;
}

/* === End Phase 97 === */

/* =====================================================================
   Phase 95: Visual Polish for Events & Gallery Pages
   ===================================================================== */

/* --- 1. Events Timeline: ensure items are VISIBLE ---
   The scroll-driven animation (animation-timeline: view()) starts items at
   opacity:0 and relies on scrolling to trigger the animation. But when items
   are already in the viewport on page load, scroll-driven animations may not
   fire properly (the entry range has already passed). The IntersectionObserver
   fallback only runs when animation-timeline is NOT supported.

   Fix: Give the IO fallback class higher specificity so it always wins,
   and add a reduced-motion safety net. */

/* Safety net: if an item has been observed and marked visible, ensure it shows */
.events-timeline__item.events-timeline__item--visible,
.events-timeline__decade-marker.events-timeline__item--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* For users who prefer reduced motion, show everything immediately */
@media (prefers-reduced-motion: reduce) {
    .events-timeline__item,
    .events-timeline__decade-marker {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* --- 2. Events Hero: enhance stat labels visibility --- */
.events-hero__stat-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.events-hero__stat-value {
    color: var(--text-primary);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.1;
}

/* --- 3. Events Hero badge polish --- */
.events-hero__badge {
    display: inline-block;
    padding: 0.4rem 1.5rem;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(220, 38, 38, 0.9);
    background: rgba(220, 38, 38, 0.08);
    margin-bottom: 1.5rem;
}

/* --- 4. Events On This Day section visual polish --- */
.events-otd__banner {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.events-otd__icon {
    color: var(--accent, #dc2626);
}

.events-otd__title {
    color: var(--text-primary, #fff);
    font-weight: 700;
}

.events-otd__subtitle {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.events-otd__item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: border-color 0.3s, background 0.3s;
}

.events-otd__item:hover {
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.events-otd__item--exact {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
}

.events-otd__item-year {
    color: var(--accent, #dc2626);
    font-weight: 800;
    font-size: 1.1rem;
}

.events-otd__item-title {
    color: var(--text-primary, #fff);
    font-weight: 600;
}

.events-otd__item-ago {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-size: 0.85rem;
}

.events-otd__item-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

/* --- 5. Events Filter buttons enhanced styling --- */
.events-filter-btn,
.events-type-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    border-radius: 100px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.events-filter-btn:hover,
.events-type-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--text-primary, #fff);
}

.events-filter-btn.active,
.events-type-btn.active {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--text-primary);
}

/* --- 6. Events timeline card backdrop blur --- */
.events-timeline__card {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- 7. Timeline "Read More" button visibility --- */
.timeline__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent, #dc2626);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.2s, gap 0.2s;
}

.timeline__read-more:hover {
    color: var(--accent-red-light);
    gap: 0.5rem;
}

.timeline__read-more svg {
    transition: transform 0.3s ease;
}

.timeline__read-more--expanded svg {
    transform: rotate(180deg);
}

/* --- 8. Gallery card overlay gradient for readability --- */
.gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        transparent 100%
    );
}

.gallery-card-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.4rem);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gallery-card-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

.gallery-card-count {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gallery-card:hover .gallery-card-cta,
.gallery-card:focus-visible .gallery-card-cta {
    opacity: 1;
    transform: translateY(0);
}

/* --- 9. Gallery detail view: header and photo grid --- */
.gallery-header {
    margin-bottom: 2rem;
}

#gallery-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 1rem 0 0.5rem;
}

#gallery-description {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 1rem;
    line-height: 1.6;
}

.gallery-detail-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.gallery-detail-counter .counter-value {
    font-weight: 700;
    color: var(--accent, #dc2626);
}

.gallery-kbd-hints {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

.gallery-kbd-hints kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Photo masonry item overlay and hover */
.photo-masonry-item__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.photo-masonry-item:hover .photo-masonry-item__overlay,
.photo-masonry-item:focus-visible .photo-masonry-item__overlay {
    opacity: 1;
}

.photo-masonry-item__name {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.photo-masonry-item__desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.photo-masonry-item {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-masonry-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* --- 10. Gallery lightbox polish --- */
.gallery-lightbox {
    background: rgba(0, 0, 0, 0.95);
    border: none;
    padding: 0;
    max-width: 100%;
    max-height: 100vh;
}

.gallery-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.gallery-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.gallery-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.gallery-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.15);
}

.gallery-lightbox__nav--prev { left: 1rem; }
.gallery-lightbox__nav--next { right: 1rem; }

.gallery-lightbox__counter {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    z-index: 10;
}

.gallery-lightbox__image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: opacity 0.15s ease;
}

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

.gallery-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-lightbox__title {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.gallery-lightbox__desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0.75rem;
}

.gallery-lightbox__action {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.gallery-lightbox__action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

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

.gallery-lightbox__action--primary:hover {
    background: rgba(220, 38, 38, 0.25);
    color: var(--text-primary);
}

.gallery-lightbox__action--copied {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
}

.gallery-lightbox__kbd-hint {
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    pointer-events: none;
}

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

/* --- 11. Light theme gallery overrides --- */
[data-theme="light"] .gallery-card-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .gallery-lightbox__bar {
    background: rgba(255, 255, 255, 0.95);
    border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .gallery-lightbox__title {
    color: #1a1a1a;
}

[data-theme="light"] .gallery-lightbox__desc {
    color: #666;
}

/* === End Phase 95 === */

/* === Phase 97: Sitewide scroll-reveal opacity fix === */
/* =====================================================================
   ROOT CAUSE: Three competing scroll-driven animation systems set elements
   to opacity:0 waiting for animation-timeline:view() to fire, but
   content-visibility:auto prevents the view timeline from progressing.
   Elements get stuck at near-zero opacity across multiple pages.

   Sources disabled:
   1. cinematic-scroll.css — [data-reveal], [data-stagger]>*, card-entrance
   2. modern-fixes.css ~L5481 — sda-fade-slide-up, sda-scale-in on stat/album/news/bento
   3. modern-fixes.css ~L7311 — sda-bento-fade on .bento-grid > *
   4. modern-fixes.css ~L12044 — card-reveal, heading-reveal, timeline-reveal
   5. modern-fixes.css ~L12887 — vp-section-reveal on memorial/gallery/events/members
   6. modern-fixes.css ~L15915 — memorial-text-reveal
   7. pages.css ~L6913 — evtDecadeIn on .events-timeline__decade-marker
   8. pages.css ~L6991 — evtFadeIn on .events-timeline__item
   9. pages.css ~L8162 — galleryScrollReveal on .gallery-card--entrance
   10. modern-fixes.css ~L10986 — about-timeline data-reveal transitions

   Principle: visible content always beats scroll animations.
   We can re-add a working scroll animation system later.
   ===================================================================== */

/* --- 1. Kill ALL animation-timeline:view() on every affected element --- */
/* NOTE: .albums-grid-modern/.albums-bento-grid .album-card-modern are
   excluded here — they are handled by pages.css FIX 3 (animation:none)
   and need opacity/transform to remain controllable by the JS-based
   .album-reveal entrance animation (IntersectionObserver). */
[data-reveal],
[data-reveal="up"],
[data-reveal="left"],
[data-reveal="right"],
[data-reveal="scale"],
[data-reveal="blur"],
[data-stagger] > *,
.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-img,
img[data-scroll-reveal],
.news-card,
.member-card,
.gallery-card,
.article-card,
.section-title,
.page-title,
h1.hero-title,
.section-header h2,
.timeline-item,
.stat-card.stat-item-modern,
.news-item-modern,
.bento-grid > *,
.memorial-modern,
.memorial-section,
.gallery-grid .gallery-card,
.events-list .event-card,
.events-grid .event-card,
.members-grid .member-card,
.memorial-page .memorial-bio-text,
.memorial-page .timeline-item,
.events-timeline__item,
.events-timeline__decade-marker,
.gallery-card--entrance,
.section-divider,
.album-hero-cover img,
.about-timeline-item[data-reveal],
.about-timeline-decade[data-reveal],
.about-timeline-item--left[data-reveal],
.about-timeline-item--right[data-reveal] {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Album cards on listing pages: kill scroll-driven animation but let
   JS-based .album-reveal handle opacity/transform entrance.
   .scroll-reveal-scale is the class added by albums.ejs to album cards.
   Must use !important to override the nuclear rule above (which catches
   these cards via [data-entrance] attribute set by cinematic-bundle.js)
   and the base.css .scroll-reveal-scale { opacity: 1 !important } rule. */
.scroll-reveal-scale,
.album-card,
.albums-grid-modern .album-card-modern,
.albums-bento-grid .album-card-modern {
    animation: none !important;
    animation-timeline: none !important;
}
/* Below-fold album cards: start invisible for JS reveal animation */
.albums-bento-grid .album-card-modern.album-reveal,
.albums-grid-modern .album-card-modern.album-reveal {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 500ms ease, transform 500ms ease !important;
    transition-delay: var(--reveal-delay, 0s) !important;
}
/* Once IntersectionObserver triggers, reveal them */
.albums-bento-grid .album-card-modern.album-reveal.album-visible,
.albums-grid-modern .album-card-modern.album-reveal.album-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Non-reveal album cards (above the fold) must be visible immediately */
.albums-grid-modern .album-card-modern:not(.album-reveal),
.albums-bento-grid .album-card-modern:not(.album-reveal),
.scroll-reveal-scale:not(.album-reveal) {
    opacity: 1 !important;
    transform: none !important;
}

/* --- 2. Restore hover transforms (the !important none above would break hovers) --- */
.member-card:hover {
    transform: translateY(-6px) !important;
}

.album-card:hover,
.album-card-modern:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

.gallery-card:hover {
    transform: translateY(-4px) !important;
}

.news-card:hover,
.article-card:hover {
    transform: translateY(-4px) !important;
}

.event-card:hover {
    transform: translateY(-3px) !important;
}

.stat-card.stat-item-modern:hover {
    transform: translateY(-4px) !important;
}

/* Album cover parallax zoom on detail page — harmless, keep it */
.album-hero-cover img:hover {
    transform: scale(1.03) !important;
}

/* Image hover zooms in containers */
.image-zoom-container:hover img {
    transform: scale(1.06) !important;
}

/* Gallery card background zoom on hover */
.gallery-card:hover .gallery-card-bg,
.gallery-card:focus-visible .gallery-card-bg {
    transform: scale(1.12) !important;
}

/* --- 3. Disable content-visibility:auto on elements that contain animated children --- */
/* These cause view() timeline to never progress, trapping children at opacity:0 */
.album-card .album-cover,
.album-card-modern .album-cover,
.gallery-item img,
.members-grid,
.events-timeline,
.gallery-grid,
.fan-photos-grid {
    content-visibility: visible !important;
}

/* --- 4. Fix about-timeline items that use data-reveal with CSS transitions (not animation-timeline) --- */
/* These start at opacity:0 and wait for JS to add .revealed class.
   If JS fails or runs late, content is invisible. Force visible. */
.about-timeline-item[data-reveal],
.about-timeline-decade[data-reveal],
.about-timeline-item[data-reveal].revealed,
.about-timeline-decade[data-reveal].revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* --- 5. Ensure gallery-card--entrance is visible even without scroll animation --- */
.gallery-card--entrance {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* --- 6. Ensure events timeline items are always visible regardless of IO state --- */
.events-timeline__item,
.events-timeline__decade-marker {
    opacity: 1 !important;
    transform: none !important;
}

/* === End Phase 97: Sitewide scroll-reveal opacity fix === */

/* === Phase 98: Hero background video visibility fix === */
/* The hero now uses background_video.webp (animated WebP showing Sergey Bogaev).
   Previous settings (opacity:0.65 + saturate(0.9) brightness(0.85) + dark overlay)
   made the person nearly invisible. Increase visibility while keeping text readable. */

/* Fix: cinematic-bundle.css sets `.hero-section > :not(.constellation-hero-canvas)`
   to position:relative (specificity 0,2,0), overriding all overlay layers that need
   position:absolute. The canvas (.hp26-epic-rain) and cursor-light with width/height:100%
   become full-size flex items when relative, displacing .hero-content.
   Force every decorative overlay layer back to absolute. */
.hero-section > .hero-background,
.hero-section > .hero-gradient-layer,
.hero-section > .hero-vignette,
.hero-section > .hp26-epic-rain,
.hero-section > .hp26-particles,
.hero-section > .hp-hero-floaters,
.hero-section > .hp-hero-curtain {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
 pointer-events: none; }

/* hp-cursor-light is a fixed 760×760px spotlight circle moved via transform —
   it must be absolute but must NOT get inset/width/height overrides. */
.hero-section > .hp-cursor-light {
    position: absolute !important;
}

.hero-section > .hero-background {
    z-index: 1;
}

.hero-section > .hero-gradient-layer {
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

.hero-section > .hero-vignette {
    z-index: 3;
    pointer-events: none;
}

.hero-background img,
.hero-background video,
.hero-video {
    opacity: 0.85;
    filter: saturate(1.05) brightness(0.95) contrast(1.05);
    object-position: center 20%;
}

/* Lighten the overlay so the person is visible through it */
.hero-overlay {
    background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.35) 0%,
            rgba(10, 10, 10, 0.1) 30%,
            rgba(10, 10, 10, 0.15) 60%,
            rgba(10, 10, 10, 0.5) 100%);
}

/* Reduce the bottom gradient overlay intensity */
.homepage .hero-section .hero-overlay::after {
    height: 30%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(14, 14, 17, 0.2) 50%,
        rgba(14, 14, 17, 0.55) 75%,
        var(--bg-primary, #0e0e11) 100%
    );
}

/* Light theme: adjust overlay for readability against bright background */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.08) 30%,
            rgba(0, 0, 0, 0.12) 60%,
            rgba(255, 255, 255, 0.3) 100%);
}

[data-theme="light"] .homepage .hero-section .hero-overlay::after {
    height: 30%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.4) 75%,
        var(--bg-primary, #ffffff) 100%
    );
}

/* === End Phase 98 === */

/* ============================================================
   Phase 99: Homepage Visual Coherence + Navigation Fix (Light Theme)
   ============================================================ */

/* --- 1. NAVIGATION: "More" Dropdown + Light Theme Header --- */

/* More dropdown container */
.desktop-nav__more {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* More button styling - matches nav links */
.desktop-nav__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.35rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: inherit;
}

.desktop-nav__more-btn svg {
    transition: transform 0.2s ease;
}

.desktop-nav__more:hover .desktop-nav__more-btn svg,
.desktop-nav__more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.desktop-nav__more-btn.active {
    color: var(--accent-red, #dc2626);
}

/* Dropdown panel */
.desktop-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    border-radius: 10px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.desktop-nav__more:hover .desktop-nav__dropdown,
.desktop-nav__more:focus-within .desktop-nav__dropdown,
.desktop-nav__more-btn[aria-expanded="true"] + .desktop-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown links */
.desktop-nav__dropdown-link {
    display: block;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.desktop-nav__dropdown-link.active,
.desktop-nav__dropdown-link[aria-current="page"] {
    color: var(--accent-red, #dc2626);
}

/* --- Dark theme dropdown --- */
[data-theme="dark"] .desktop-nav__more-btn {
    color: oklch(70% 0.01 260);
}

[data-theme="dark"] .desktop-nav__more-btn:hover {
    color: oklch(85% 0.01 260);
}

[data-theme="dark"] .desktop-nav__dropdown {
    background: rgba(20, 20, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}

[data-theme="dark"] .desktop-nav__dropdown-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .desktop-nav__dropdown-link:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--text-primary);
}

/* --- Light theme: header, nav, icons, dropdown --- */

[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
}

[data-theme="light"] .site-header .header-bg {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
}

[data-theme="light"] .desktop-nav__link {
    color: var(--text-inverse);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

[data-theme="light"] .desktop-nav__link:hover {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .desktop-nav__link.active,
[data-theme="light"] .desktop-nav__link[aria-current="page"] {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .desktop-nav__more-btn {
    color: var(--text-inverse);
}

[data-theme="light"] .desktop-nav__more-btn:hover,
[data-theme="light"] .desktop-nav__more-btn.active {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .desktop-nav__dropdown {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .desktop-nav__dropdown-link {
    color: var(--text-inverse);
}

[data-theme="light"] .desktop-nav__dropdown-link:hover {
    background: rgba(220, 38, 38, 0.06);
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .desktop-nav__dropdown-link.active,
[data-theme="light"] .desktop-nav__dropdown-link[aria-current="page"] {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.05);
}

/* Light theme: brand name */
[data-theme="light"] .site-brand {
    color: var(--text-inverse);
}

[data-theme="light"] .nav-brand-text {
    color: var(--text-inverse);
}

/* Light theme: nav action buttons (lang, theme, search) - ensure visible sizing */
[data-theme="light"] .nav-actions .theme-toggle-btn,
[data-theme="light"] .nav-actions .search-btn {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-inverse);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

[data-theme="light"] .nav-actions .theme-toggle-btn:hover,
[data-theme="light"] .nav-actions .search-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.2);
}

/* Light theme: language switcher button */
[data-theme="light"] .language-switcher .lang-current-btn {
    color: var(--text-inverse);
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    min-height: 38px;
}

[data-theme="light"] .language-switcher .lang-current-btn:hover {
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .lang-dropdown {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .lang-dropdown a {
    color: var(--text-inverse);
}

[data-theme="light"] .lang-dropdown a:hover {
    background: rgba(220, 38, 38, 0.06);
    color: var(--accent-red, #dc2626);
}

/* --- 2. HOMEPAGE LIGHT THEME: Section Visual Coherence --- */

/* Remove the forced dark background on homepage in light theme */
[data-theme="light"] .homepage {
    background-color: var(--text-primary);
}

[data-theme="light"] .homepage .featured-content {
    background-color: var(--bg-secondary);
}

/* Hero section keeps dark bg (it has video/image overlay, needs dark for contrast) */

/* Alternating section backgrounds for visual rhythm */
[data-theme="light"] .homepage .on-this-day-section {
    background: var(--bg-primary);
}

[data-theme="light"] .homepage .quick-facts-banner {
    background: #f8f9fa;
}

[data-theme="light"] .homepage .track-spotlight-section {
    background: var(--bg-primary);
}

[data-theme="light"] .homepage .latest-album-showcase {
    background: #f8f9fa;
}

[data-theme="light"] .homepage .featured-content {
    background: var(--bg-primary);
}

[data-theme="light"] .homepage .archive-section {
    background: #f8f9fa;
}

[data-theme="light"] .homepage .stats-section {
    background: var(--bg-primary);
}

[data-theme="light"] .homepage .guestbook-teaser-section {
    background: #f8f9fa;
}

[data-theme="light"] .homepage .quote-rotator-section {
    background: var(--bg-primary);
}

/* Memorial section keeps dark for solemn atmosphere */
[data-theme="light"] .homepage .memorial-section {
    background: #1a1a2e;
    color: var(--text-primary);
}

[data-theme="light"] .homepage .memorial-section h2,
[data-theme="light"] .homepage .memorial-section p,
[data-theme="light"] .homepage .memorial-section .memorial-dates,
[data-theme="light"] .homepage .memorial-section .memorial-role,
[data-theme="light"] .homepage .memorial-section .memorial-tribute-text,
[data-theme="light"] .homepage .memorial-section .memorial-subtitle-enhanced {
    color: var(--text-primary);
}

[data-theme="light"] .homepage .memorial-section .memorial-quote-text {
    color: var(--text-secondary);
    border-color: rgba(220, 38, 38, 0.4);
}

[data-theme="light"] .homepage .timeline-section {
    background: #f3f4f6;
}

/* Consistent section padding */
[data-theme="light"] .homepage > section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

[data-theme="light"] .homepage .hero-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* Subtle section separation */
[data-theme="light"] .homepage > section + hr {
    display: none;
}

/* Replace garish red gradient hr dividers with subtle separators in light theme */
[data-theme="light"] .homepage > hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);
    margin: 0;
    max-width: 100%;
}

/* Hide SVG morph wave dividers on homepage in light theme */
[data-theme="light"] .homepage .svg-morph-divider {
    display: none;
}

/* Section title text should be dark */
[data-theme="light"] .homepage .block-title {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .view-all {
    color: var(--accent-red, #dc2626);
}

/* --- 3. On This Day section: light theme readability --- */
[data-theme="light"] .homepage .on-this-day-card {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .homepage .on-this-day-header {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .on-this-day-label {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .on-this-day-date {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .otd-fact-label {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .homepage .otd-fact-text {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .otd-footer-link {
    color: var(--accent-red, #dc2626);
}

/* --- 4. Quick facts banner: light theme --- */
[data-theme="light"] .homepage .quick-facts-strip {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .quick-fact-icon {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .homepage .quick-fact-divider {
    background: rgba(0, 0, 0, 0.15);
}

/* --- 5. Track spotlight: light theme --- */
[data-theme="light"] .homepage .track-spotlight-card {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .track-spotlight-track-name {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .track-spotlight-album-name {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .track-spotlight-album-name a {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .homepage .track-spotlight-badge {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="light"] .homepage .track-spotlight-duration {
    color: var(--text-muted);
}

/* --- 6. Latest album showcase: light theme --- */
[data-theme="light"] .homepage .latest-album-showcase {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .latest-album-badge {
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .homepage .latest-album-title {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .latest-album-year {
    color: var(--text-muted);
}

/* --- 7. Featured content (albums, news, gallery): light theme --- */
[data-theme="light"] .homepage .album-card-modern {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

[data-theme="light"] .homepage .album-info-overlay h3 {
    color: var(--text-primary);
}

[data-theme="light"] .homepage .news-item-modern {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .news-item-modern h3 {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .news-item-modern .news-date {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .news-item-modern .news-arrow {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .homepage .news-item-modern:hover {
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Gallery photos */
[data-theme="light"] .homepage .gallery-photo-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- 8. Archive section: light theme --- */
[data-theme="light"] .homepage .archive-card {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .archive-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .homepage .archive-card-title {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .archive-card-date {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .archive-card-excerpt {
    color: #4b5563;
}

[data-theme="light"] .homepage .archive-card-link {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .homepage .archive-card-thumb-placeholder {
    background: #f3f4f6;
    color: var(--text-muted);
}

/* --- 9. Stats section: light theme --- */
[data-theme="light"] .homepage .live-stat-card {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .live-stat-number {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .live-stat-label {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .live-stat-icon {
    color: var(--accent-red, #dc2626);
}

/* --- 10. Guestbook teaser: light theme --- */
[data-theme="light"] .homepage .guestbook-teaser-inner {
    background: var(--bg-primary);
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .guestbook-teaser-title {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .guestbook-teaser-sub {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .guestbook-teaser-entry {
    border-color: rgba(0, 0, 0, 0.08);
    background: #fafafa;
}

[data-theme="light"] .homepage .guestbook-entry-name {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .guestbook-entry-date {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .guestbook-entry-msg {
    color: #4b5563;
}

[data-theme="light"] .homepage .guestbook-teaser-icon {
    color: var(--accent-red, #dc2626);
}

/* --- 11. Quote rotator: light theme --- */
[data-theme="light"] .homepage .quote-rotator-card {
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .quote-rotator-text p {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .quote-rotator-author {
    color: var(--text-muted);
}

[data-theme="light"] .homepage .quote-rotator-icon {
    color: var(--accent-red, #dc2626);
}

/* --- 12. Timeline section: light theme --- */
[data-theme="light"] .homepage .timeline-section {
    color: var(--text-inverse);
}

[data-theme="light"] .homepage .timeline-section h3 {
    color: var(--text-inverse);
}

/* --- 13. Global: gallery scroll modern - light theme bg fix --- */
[data-theme="light"] .homepage .gallery-scroll-modern {
    background: transparent;
}

/* --- 14. Wave dividers (JS-injected .wave-divider) - tone down in light theme --- */
[data-theme="light"] .homepage .wave-divider {
    opacity: 0.12 !important;
}

[data-theme="light"] .homepage .wave-divider__canvas {
    opacity: 0.12 !important;
}

/* Also tame pseudo-element separators from homepage.css in light theme */
[data-theme="light"] .homepage .animated-counters::before,
[data-theme="light"] .homepage .on-this-day-section::before,
[data-theme="light"] .homepage .timeline-section::before,
[data-theme="light"] .homepage .stats-section::before,
[data-theme="light"] .homepage .featured-content::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent) !important;
}

/* Cinematic scroll section-divider and hr overrides in light theme */
[data-theme="light"] .section-divider,
[data-theme="light"] hr {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent) !important;
}

/* === End Phase 99 === */

/* === Homepage album cover visibility fix ===
   In light theme, the dominant_color inline background on .album-card-modern
   shows as grey/white boxes while images are lazy-loaded. Fix:
   1. Make <picture> transparent to layout (display:contents) so <img>
      sizes against .album-card-modern directly.
   2. Ensure <img> always renders above the background with z-index.
   3. Add subtle border in light theme so cards are distinguishable.
   ============================================================ */

/* <picture> should not create its own box — let img fill card directly */
.homepage .albums-grid-modern .album-card-modern picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Image fills the card absolutely, sits above background-color */
.homepage .albums-grid-modern .album-card-modern > picture > img,
.homepage .albums-grid-modern .album-card-modern > picture > source + img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
    z-index: 1;
}

/* Overlay, play button, year badge must sit above the image */
.homepage .albums-grid-modern .album-card-modern .album-info-overlay {
    z-index: 2;
    position: relative;
}

.homepage .albums-grid-modern .album-card-modern .album-card-quick-play,
.homepage .albums-grid-modern .album-card-modern .album-card-year-badge {
    z-index: 3;
    position: relative;
}

/* Light theme: subtle border so cards are distinguishable from white bg */
[data-theme="light"] .homepage .albums-grid-modern .album-card-modern {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* === End homepage album cover fix === */

/* ============================================================
   Phase 100: Hero image LCP optimization + visibility fix
   Problem: 9MB animated WebP caused 11.8s LCP. Face too dark
   and cut off due to 6 stacking dark overlay layers.
   Fix: Load 125KB poster first, lazy-swap to 2MB animation.
   Reduce overlay opacity so Sergei Bogaev is clearly visible.
   ============================================================ */

/* --- 1. Hero image: full opacity, proper positioning --- */
/* Show more of the person's head (was cut off at top) */
.hero-background img,
.hero-background video,
.hero-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    opacity: 0.92 !important;
    filter: saturate(1.1) brightness(1.0) contrast(1.05) !important;
}

/* --- 2. Reduce the main overlay (was too gray) --- */
.hero-overlay {
    background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.2) 0%,
            rgba(10, 10, 10, 0.05) 30%,
            rgba(10, 10, 10, 0.05) 60%,
            rgba(10, 10, 10, 0.4) 100%) !important;
}

/* --- 3. Drastically reduce the radial vignette pseudo-element --- */
.homepage .hero-section::after {
    background:
        radial-gradient(ellipse at 50% 50%,
            transparent 50%,
            rgba(0, 0, 0, 0.15) 80%,
            rgba(0, 0, 0, 0.35) 100%) !important;
}

/* --- 4. Lighten the cinematic vignette overlay --- */
.hero-section > .hero-vignette {
    opacity: 0.4 !important;
}

/* --- 5. Reduce gradient layer behind image --- */
.hero-section > .hero-gradient-layer {
    opacity: 0.25 !important;
}

/* --- 6. Reduce the bottom transition gradient --- */
.homepage .hero-section .hero-overlay::after {
    height: 25% !important;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(14, 14, 17, 0.15) 50%,
        rgba(14, 14, 17, 0.45) 75%,
        var(--bg-primary, #0e0e11) 100%
    ) !important;
}

/* --- 7. Ensure hero section is full viewport height --- */
.hero-section,
.hero-section.hero-modern {
    min-height: 100vh !important;
    min-height: 100svh !important;
}

/* --- 8. Smooth crossfade when animated image loads --- */
#hero-bg-img {
    transition: opacity 0.6s ease;
}

/* --- 9. Light theme: keep overlays lighter too --- */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.03) 30%,
            rgba(0, 0, 0, 0.05) 60%,
            rgba(255, 255, 255, 0.2) 100%) !important;
}

[data-theme="light"] .homepage .hero-section .hero-overlay::after {
    height: 25% !important;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.3) 75%,
        var(--bg-primary, #ffffff) 100%
    ) !important;
}

[data-theme="light"] .homepage .hero-section::after {
    background:
        radial-gradient(ellipse at 50% 50%,
            transparent 50%,
            rgba(0, 0, 0, 0.08) 80%,
            rgba(0, 0, 0, 0.2) 100%) !important;
}

/* --- 10. Ensure hero title text is readable with text shadow --- */
.homepage .hero-section .hero-title {
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.9),
        0 4px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(220, 38, 38, 0.12) !important;
}

.homepage .hero-section .hero-subtitle,
.homepage .hero-section .hero-tagline,
.homepage .hero-section .hero-description,
.homepage .hero-section .hero-years {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8), 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* === End Phase 100 === */

/* === Phase 99: Dark Theme Regression Fix === */
/* Audit of Phases 97-100 found that all light-theme rules are properly
   scoped under [data-theme="light"]. However, three dark-theme issues
   remain that are NOT regressions from those phases but long-standing
   problems exposed when switching to dark theme:
   1. Hero title text is invisible (transparent) — homepage.css sets
      background-clip:text + text-fill-color:transparent for gradient
      text, but modern-fixes.css line 228-230 "unset" doesn't reliably
      override it when stylesheets load asynchronously.
   2. Hero content fade-in animation from homepage.css (.hero-modern
      .hero-content) can leave hero text at partial opacity if the
      animation is interrupted or delayed.
   3. Memorial section background can appear transparent when CSS
      loads asynchronously and the Phase 97 fix loses the specificity
      race against homepage.css's declaration.
   All fixes below use !important to guarantee dark-theme correctness
   regardless of stylesheet load order. */

/* --- 1. Hero title: force white text, remove gradient-text effect --- */
/* homepage.css line 154-157 sets background-clip:text with
   -webkit-text-fill-color:transparent for a white-to-red gradient.
   In dark theme we want a solid white title, not a gradient that can
   appear invisible if the background-image fails to load or is
   overridden by background:none. */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title-impact,
[data-theme="dark"] .homepage .hero-section .hero-title {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-image: none !important;
}

/* --- 2. Hero content: ensure full opacity in dark theme --- */
/* homepage.css line 3627 sets hero-fade-in animation (from opacity:0
   to 1) with fill-mode:both, which can leave hero content at partial
   opacity if JS or animation-timeline interferes. Force visible. */
[data-theme="dark"] .hero-content,
[data-theme="dark"] .hero-modern .hero-content {
    opacity: 1 !important;
}

/* Keep the hero-title-reveal animation for the title entrance */
[data-theme="dark"] .hero-modern .hero-title {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* --- 3. Memorial section: enforce dark background --- */
/* Ensure the memorial section always has a dark, solemn background
   regardless of stylesheet load order. */
[data-theme="dark"] .homepage .memorial-section {
    background: linear-gradient(135deg, #12121a 0%, #1a1a28 100%) !important;
}

/* --- 4. Homepage body background: reinforce dark --- */
[data-theme="dark"] .homepage {
    background-color: var(--bg-primary, #0a0a0f) !important;
    color: var(--text-primary, #ffffff) !important;
}

/* --- 5. Section separators (hr): subtle dark gradient, not bright --- */
[data-theme="dark"] .homepage > hr,
[data-theme="dark"] .section-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent) !important;
    border: none !important;
    height: 1px !important;
}

/* --- 6. SVG morph wave dividers: subtle in dark theme --- */
[data-theme="dark"] .homepage .svg-morph-divider {
    opacity: 0.3;
}

/* --- 7. Dark theme dropdown: ensure "More" button has correct color
   when no explicit [data-theme="dark"] rule has run yet --- */
.desktop-nav__more-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .desktop-nav__more-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .desktop-nav__more-btn:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .desktop-nav__dropdown {
    background: rgba(20, 20, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}

[data-theme="dark"] .desktop-nav__dropdown-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .desktop-nav__dropdown-link:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--text-primary);
}

/* === End Phase 99: Dark Theme Regression Fix === */

/* === Phase 101: Album Display Fixes === */
/* Fix 1: Albums listing — restore .album-reveal entrance animation
   The nuclear opacity reset (Phase 97) used opacity:1 !important on
   .albums-bento-grid .album-card-modern which killed the JS-based
   IntersectionObserver reveal. Fixed above by removing album selectors
   from the nuclear rule and splitting into animation-only + visibility rules.
*/

/* Fix 2: Album detail page — ensure .no-entrance sections are not
   hidden by any stray scroll-driven animation rule */
.album-detail-page .no-entrance {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Fix 3: Album detail — ensure track list is always visible.
   The .track-list-waveform decorative background should not block content. */
.album-tracks-section {
    position: relative;
}

.album-tracks-section .track-list-waveform {
    pointer-events: none;
    z-index: 0;
}

.album-tracks-section .track-list {
    position: relative;
    z-index: 1;
}

/* Fix 4: Ensure decade-group-header label is visible (was overridden
   to text-secondary which is low contrast on dark background) */
.decade-group-header__label {
    color: var(--accent-red, #dc2626) !important;
}
/* === End Phase 101 === */

/* ====================================================================
   Phase 102: Dark Theme Homepage Final Polish
   ====================================================================
   Fixes:
   1. ink-reveal--ready fallback — cinematic JS not promoting to revealed
   2. Section background alternation for visual rhythm
   3. Memorial section background enforcement
   4. Hero content sizing to fit viewport
   5. Latest album title readability
   6. Guestbook / Quote / Archive section background polish
   ==================================================================== */

/* --- 1. CRITICAL: ink-reveal safety fallback ---
   The cinematic-bundle.css sets .ink-reveal--ready { opacity: 0 } and
   expects JS (InkReveal class) to promote elements to .ink-reveal--revealed.
   If the JS fails to load or the IntersectionObserver never fires, headings
   stay permanently invisible. Force visibility for homepage headings.
   This uses an animation delay so if the JS does work, it reveals first. */
.homepage .ink-reveal--ready {
    animation: ink-reveal-fallback 0.6s ease-out 1.5s both !important;
}

@keyframes ink-reveal-fallback {
    from {
        opacity: 0;
        clip-path: circle(0% at 50% 50%);
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        clip-path: none;
        transform: translateX(0);
    }
}

/* If the cinematic JS has already revealed the element, don't re-animate */
.homepage .ink-reveal--revealed,
.homepage .ink-reveal--animating {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
}

/* --- 2. Section background alternation for visual rhythm ---
   Dark theme sections alternate between 3 shades:
   A = #0a0a0f (deepest black)
   B = #12121a (dark charcoal)
   C = #161622 (deep navy-black)
   Pattern: hero(black) > OTD(B) > quickfacts(accent) > spotlight(A) >
   latest(C) > featured(B) > archive(A) > stats(C) > guestbook(B) >
   quote(A) > memorial(C-gradient) > timeline(B) */

[data-theme="dark"] .homepage .on-this-day-section {
    background: #12121a !important;
}

[data-theme="dark"] .homepage .quick-facts-banner {
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.12) 0%,
        rgba(18, 18, 26, 0.95) 100%) !important;
    border-top: 1px solid rgba(220, 38, 38, 0.2);
    border-bottom: 1px solid rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .homepage .track-spotlight-section {
    background: #0a0a0f !important;
}

[data-theme="dark"] .homepage .latest-album-showcase {
    background: #161622 !important;
}

[data-theme="dark"] .homepage .featured-content {
    background: #12121a !important;
}

[data-theme="dark"] .homepage .archive-section {
    background: #0a0a0f !important;
}

[data-theme="dark"] .homepage .stats-section {
    background: #161622 !important;
}

[data-theme="dark"] .homepage .guestbook-teaser-section {
    background: #12121a !important;
}

[data-theme="dark"] .homepage .quote-rotator-section {
    background: #0a0a0f !important;
}

[data-theme="dark"] .homepage .memorial-section {
    background: linear-gradient(180deg,
        #161622 0%,
        #1a1a2e 40%,
        #1e1a28 60%,
        #161622 100%) !important;
}

[data-theme="dark"] .homepage .timeline-section {
    background: #12121a !important;
}

/* --- 3. Hero content: ensure it fits within 100vh ---
   The cinematic bundle injects .hero-canvas-nebula (800px tall, position:relative)
   which participates in flex layout and pushes hero-content down 800px.
   Fix: force all injected canvases to absolute positioning so they don't
   affect flex centering. Then reduce title size and hide verbose elements. */
[data-theme="dark"] .homepage .hero-section .hero-canvas-nebula,
[data-theme="dark"] .homepage .hero-section .constellation-hero-canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Also fix hero-particles which is position:relative */
[data-theme="dark"] .homepage .hero-section .hero-particles {
    position: absolute !important;
}

[data-theme="dark"] .homepage .hero-content {
    max-width: 900px;
    padding: 0 1.5rem;
}

[data-theme="dark"] .homepage .hero-title {
    font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .homepage .hero-tagline {
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.125rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Hide subtitle (redundant with tagline) and description (too verbose for hero) */
[data-theme="dark"] .homepage .hero-subtitle,
[data-theme="dark"] .homepage .hero-description {
    display: none;
}

[data-theme="dark"] .homepage .hero-years {
    display: inline-block;
    font-size: 0.9rem;
    color: rgba(220, 38, 38, 0.9);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

[data-theme="dark"] .homepage .hero-actions {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
}

[data-theme="dark"] .homepage .hero-actions .btn-primary,
[data-theme="dark"] .homepage .hero-actions .btn-secondary {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* Hide 3rd and 4th CTA buttons (Discover random + About) to keep hero clean */
[data-theme="dark"] .homepage .hero-actions .hero-discover-btn,
[data-theme="dark"] .homepage .hero-actions .hero-story-btn {
    display: none;
}

/* Scroll hint: ensure visible above fold */
[data-theme="dark"] .homepage .hero-section .scroll-hint {
    bottom: 0.75rem !important;
}

/* --- 4. Latest album title: ensure white and visible --- */
[data-theme="dark"] .homepage .latest-album-title {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .homepage .latest-album-year {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
}

[data-theme="dark"] .homepage .latest-album-badge {
    color: var(--text-primary);
    border-color: rgba(220, 38, 38, 0.5);
}

/* --- 5. Track spotlight: ensure track name is visible --- */
[data-theme="dark"] .homepage .track-spotlight-track-name {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* --- 6. Archive section cards: darker card background against #0a0a0f --- */
[data-theme="dark"] .homepage .archive-card {
    background: rgba(22, 22, 34, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .homepage .archive-card:hover {
    background: rgba(28, 28, 40, 0.95);
    border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .homepage .archive-card-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .homepage .archive-card-date {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .homepage .archive-card-excerpt {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .homepage .archive-card-link {
    color: var(--accent-red, #dc2626);
}

[data-theme="dark"] .homepage .archive-card-thumb-placeholder {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.15);
}

/* --- 7. Stats section: ensure cards contrast against #161622 --- */
[data-theme="dark"] .homepage .live-stat-card {
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .homepage .live-stat-card:hover {
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .homepage .live-stat-number {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .homepage .live-stat-label {
    color: rgba(255, 255, 255, 0.6);
}

/* --- 8. Guestbook: ensure entries contrast against #12121a --- */
[data-theme="dark"] .homepage .guestbook-teaser-entry {
    background: rgba(10, 10, 15, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(220, 38, 38, 0.5);
}

[data-theme="dark"] .homepage .guestbook-teaser-title {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
}

/* --- 9. Quote rotator: polish card against #0a0a0f --- */
[data-theme="dark"] .homepage .quote-rotator-card {
    background: rgba(22, 22, 34, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .homepage .quote-rotator-text p {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .homepage .quote-rotator-author {
    color: var(--text-muted);
}

/* --- 10. Memorial title: must be visible --- */
[data-theme="dark"] .homepage .memorial-title {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* --- 11. Timeline title: must be visible --- */
[data-theme="dark"] .homepage .timeline-section .block-title {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
}

/* --- 12. News list: ensure readable in dark theme --- */
[data-theme="dark"] .homepage .news-item-modern {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

[data-theme="dark"] .homepage .news-item-modern h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .homepage .news-item-modern .news-date {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .homepage .news-item-modern .news-arrow {
    color: var(--accent-red, #dc2626);
}

/* --- 13. Gallery section: ensure thumbnails are visible --- */
[data-theme="dark"] .homepage .gallery-photo-item {
    border-radius: 8px;
    overflow: hidden;
}

[data-theme="dark"] .homepage .gallery-photo-count {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
}

/* --- 14. Section header "view all" links: accent colored --- */
[data-theme="dark"] .homepage .view-all {
    color: var(--accent-red, #dc2626);
}

[data-theme="dark"] .homepage .view-all:hover {
    color: var(--accent-red-light, #ef4444);
}

/* --- 15. Block titles: ensure all are white --- */
[data-theme="dark"] .homepage .block-title {
    color: var(--text-primary) !important;
}

/* --- 16. Section dividers: subtle red glow between alternating bg sections --- */
[data-theme="dark"] .homepage .on-this-day-section,
[data-theme="dark"] .homepage .track-spotlight-section,
[data-theme="dark"] .homepage .latest-album-showcase,
[data-theme="dark"] .homepage .featured-content,
[data-theme="dark"] .homepage .archive-section,
[data-theme="dark"] .homepage .stats-section,
[data-theme="dark"] .homepage .guestbook-teaser-section,
[data-theme="dark"] .homepage .quote-rotator-section,
[data-theme="dark"] .homepage .memorial-section,
[data-theme="dark"] .homepage .timeline-section {
    position: relative;
}

/* === End Phase 102: Dark Theme Homepage Final Polish === */

/* ============================================================
   Homepage Interactive Timeline v3.0
   - Filter pills, expand/collapse, decade markers, typed badges
   ============================================================ */

/* --- Filter Pills --- */
.hp-tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0;
}

.hp-tl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 1rem;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-family: var(--font-primary, inherit);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.hp-tl-pill:hover {
    border-color: rgba(220, 38, 38, 0.5);
    color: var(--text-primary);
    background: rgba(220, 38, 38, 0.08);
}

.hp-tl-pill--active {
    background: var(--accent, #dc2626);
    color: var(--text-primary);
    border-color: var(--accent, #dc2626);
    font-weight: 600;
}

.hp-tl-pill--active:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: var(--text-primary);
}

/* --- Timeline Wrapper --- */
.hp-tl-wrapper {
    position: relative;
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-tl-wrapper--expanded {
    max-height: 5000px;
}

/* Gradient fade at bottom when collapsed */
.hp-tl-wrapper:not(.hp-tl-wrapper--expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--bg-primary, #111));
    pointer-events: none;
    z-index: 2;
}

/* --- Timeline Vertical Line --- */
.hp-tl-line {
    position: absolute;
    top: 0;
    left: 20px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom,
        transparent,
        rgba(220, 38, 38, 0.35) 5%,
        rgba(220, 38, 38, 0.35) 95%,
        transparent);
    border-radius: 2px;
    z-index: 0;
}

/* --- Timeline Events Container --- */
.hp-tl-events {
    position: relative;
    padding-left: 48px;
    z-index: 1;
}

/* --- Decade Marker --- */
.hp-tl-decade-marker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem -48px;
    padding-left: 0;
    position: relative;
}

.hp-tl-decade-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 0.65rem;
    background: rgba(220, 38, 38, 0.15);
    border: 1.5px solid rgba(220, 38, 38, 0.4);
    border-radius: 999px;
    color: var(--accent-red-light);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: relative;
    left: 8px;
}

.hp-tl-decade-marker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(220, 38, 38, 0.25), transparent);
}

/* --- Event Card --- */
.hp-tl-event {
    position: relative;
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(16px);
    animation: hpTlFadeIn 0.4s ease forwards;
}

.hp-tl-event--visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* Timeline dot */
.hp-tl-dot {
    position: absolute;
    left: -37px;
    top: 1rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #111);
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-tl-event:hover .hp-tl-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.25);
}

/* Card body */
.hp-tl-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.hp-tl-event:hover .hp-tl-card {
    border-color: var(--tl-color, rgba(220, 38, 38, 0.3));
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Card header: year + date + badge */
.hp-tl-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.hp-tl-year {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
}

.hp-tl-date {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Type badge */
.hp-tl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
    white-space: nowrap;
}

/* Album thumbnail */
.hp-tl-thumb {
    float: right;
    margin: 0 0 0.5rem 0.75rem;
}

.hp-tl-thumb img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Location line */
.hp-tl-location {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.25rem;
}

/* Title */
.hp-tl-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

/* Description */
.hp-tl-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 0.25rem;
}

/* --- Empty state --- */
.hp-tl-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}

/* --- Loading dots --- */
.hp-tl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2rem 0;
}

.hp-tl-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.5);
    animation: hpTlPulse 1.2s ease-in-out infinite;
}

.hp-tl-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.hp-tl-loading-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes hpTlPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}

/* --- Expand / Collapse Button --- */
.hp-tl-actions {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.hp-tl-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1.5px solid rgba(220, 38, 38, 0.35);
    border-radius: 999px;
    color: var(--accent-red-light);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-primary, inherit);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hp-tl-expand-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: var(--accent-red-light);
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.15);
}

.hp-tl-expand-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.hp-tl-expand-icon {
    transition: transform 0.3s ease;
}

/* --- Light theme overrides --- */
[data-theme="light"] .hp-tl-pill {
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .hp-tl-pill:hover {
    border-color: rgba(220, 38, 38, 0.4);
    color: rgba(0, 0, 0, 0.85);
    background: rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .hp-tl-pill--active {
    background: var(--accent, #dc2626);
    color: var(--text-primary);
    border-color: var(--accent, #dc2626);
}

[data-theme="light"] .hp-tl-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hp-tl-event:hover .hp-tl-card {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--tl-color, rgba(220, 38, 38, 0.25));
}

[data-theme="light"] .hp-tl-year { color: rgba(0, 0, 0, 0.85); }
[data-theme="light"] .hp-tl-date { color: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .hp-tl-title { color: rgba(0, 0, 0, 0.8); }
[data-theme="light"] .hp-tl-desc { color: rgba(0, 0, 0, 0.5); }
[data-theme="light"] .hp-tl-location { color: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .hp-tl-empty { color: rgba(0, 0, 0, 0.4); }
[data-theme="light"] .hp-tl-dot { border-color: var(--bg-primary, #fff); }

[data-theme="light"] .hp-tl-wrapper:not(.hp-tl-wrapper--expanded)::after {
    background: linear-gradient(to bottom, transparent, var(--bg-primary, #fff));
}

[data-theme="light"] .hp-tl-expand-btn {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--accent-red);
}

[data-theme="light"] .hp-tl-expand-btn:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: var(--accent-red);
}

[data-theme="light"] .hp-tl-decade-label {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="light"] .hp-tl-line {
    background: linear-gradient(to bottom,
        transparent,
        rgba(220, 38, 38, 0.2) 5%,
        rgba(220, 38, 38, 0.2) 95%,
        transparent);
}

/* --- Responsive: mobile (single column, no alternating) --- */
@media (max-width: 768px) {
    .hp-tl-filters {
        gap: 0.4rem;
    }

    .hp-tl-pill {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }

    .hp-tl-wrapper {
        max-height: 500px;
    }

    .hp-tl-line {
        left: 14px;
    }

    .hp-tl-events {
        padding-left: 36px;
    }

    .hp-tl-dot {
        left: -29px;
        width: 9px;
        height: 9px;
    }

    .hp-tl-decade-marker {
        margin-left: -36px;
    }

    .hp-tl-card {
        padding: 0.75rem;
    }

    .hp-tl-year {
        font-size: 1rem;
    }

    .hp-tl-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.45rem;
    }

    .hp-tl-thumb img {
        width: 40px;
        height: 40px;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .hp-tl-event {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hp-tl-wrapper {
        transition: none;
    }

    .hp-tl-expand-icon {
        transition: none;
    }

    .hp-tl-loading-dot {
        animation: none;
        opacity: 0.5;
    }
}

/* === End: Homepage Interactive Timeline v3.0 === */

/* ============================================================
   Enhanced Playlist UX — Phase 95
   Equalizer bars, queue section, total duration footer,
   favorite buttons, context menu, smooth animations
   ============================================================ */

/* --- Equalizer bars animation for currently playing track --- */
.smp-eq-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 14px;
}

.smp-eq-bars span {
    display: block;
    width: 3px;
    background: #ff6b6b;
    border-radius: 1px;
    animation: smp-eq-bar-bounce 0.8s ease-in-out infinite;
}

.smp-eq-bars span:nth-child(1) {
    height: 60%;
    animation-delay: 0s;
}

.smp-eq-bars span:nth-child(2) {
    height: 100%;
    animation-delay: 0.2s;
}

.smp-eq-bars span:nth-child(3) {
    height: 40%;
    animation-delay: 0.4s;
}

@keyframes smp-eq-bar-bounce {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}

.smp-track-number--playing {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Active track: brighter name and glow */
.smp-track-item.active .smp-track-name {
    color: #ff6b6b;
    font-weight: 600;
}

.smp-track-item.active .smp-track-number {
    color: #ff6b6b;
}

/* --- "Up Next" queue section header --- */
.smp-queue-header {
    padding: 6px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.05);
    border-bottom: 1px solid rgba(255, 107, 107, 0.12);
}

/* Queue items have a subtle distinct left border */
.smp-track-item.smp-queue-item {
    border-left: 3px solid rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.03);
}

.smp-track-item.smp-queue-item:hover {
    background: rgba(255, 107, 107, 0.08);
    border-left-color: #ff6b6b;
}

/* Divider between queue and main playlist */
.smp-queue-divider {
    height: 1px;
    margin: 4px 20px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 107, 107, 0.3),
        transparent
    );
}

/* --- Playlist footer with total duration --- */
.smp-playlist-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.smp-playlist-total-duration {
    font-variant-numeric: tabular-nums;
}

/* --- Favorite button styles --- */
#smp-playlist-save-fav {
    color: var(--text-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
}

#smp-playlist-save-fav:hover {
    color: #ff6b6b;
    transform: scale(1.15);
}

#smp-playlist-save-fav.active {
    color: #ff6b6b;
    animation: smp-heart-pulse 0.5s ease;
}

@keyframes smp-heart-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

#smp-playlist-load-fav {
    color: rgba(255, 107, 107, 0.5);
    transition: color 0.3s ease, transform 0.3s ease;
}

#smp-playlist-load-fav:hover {
    color: #ff6b6b;
    transform: scale(1.15);
}

/* --- Context menu for "Add to queue" --- */
.smp-context-menu {
    position: fixed;
    z-index: 1000002;
    background: rgba(15, 15, 25, 0.97);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 107, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 4px;
    min-width: 180px;
    animation: smp-ctx-fadein 0.15s ease;
}

@keyframes smp-ctx-fadein {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.smp-context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: left;
}

.smp-context-menu-item:hover {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
}

.smp-context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Smooth entry animation for track items --- */
.smp-track-item {
    animation: smp-track-fadein 0.2s ease;
}

@keyframes smp-track-fadein {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stagger animation for sequential items */
.smp-track-item:nth-child(1)  { animation-delay: 0s; }
.smp-track-item:nth-child(2)  { animation-delay: 0.02s; }
.smp-track-item:nth-child(3)  { animation-delay: 0.04s; }
.smp-track-item:nth-child(4)  { animation-delay: 0.06s; }
.smp-track-item:nth-child(5)  { animation-delay: 0.08s; }
.smp-track-item:nth-child(6)  { animation-delay: 0.1s; }
.smp-track-item:nth-child(7)  { animation-delay: 0.12s; }
.smp-track-item:nth-child(8)  { animation-delay: 0.14s; }
.smp-track-item:nth-child(9)  { animation-delay: 0.16s; }
.smp-track-item:nth-child(10) { animation-delay: 0.18s; }

/* Improved drag-and-drop feedback */
.smp-track-item[draggable].dragging {
    opacity: 0.3;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.smp-track-item.drag-over-top {
    box-shadow: inset 0 2px 0 #ff6b6b;
    transition: box-shadow 0.15s ease;
}

.smp-track-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 #ff6b6b;
    transition: box-shadow 0.15s ease;
}

.smp-track-item.drag-placeholder {
    background: rgba(255, 107, 107, 0.06);
    border: 1px dashed rgba(255, 107, 107, 0.25);
    border-radius: 6px;
    transition: background 0.2s ease;
}

/* --- Playlist scrollable content: smooth scroll --- */
.smp-playlist-content {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* --- Light theme overrides --- */
[data-theme="light"] .smp-queue-header {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.06);
    border-bottom-color: rgba(192, 57, 43, 0.12);
}

[data-theme="light"] .smp-track-item.smp-queue-item {
    border-left-color: rgba(192, 57, 43, 0.3);
    background: rgba(192, 57, 43, 0.03);
}

[data-theme="light"] .smp-track-item.smp-queue-item:hover {
    background: rgba(192, 57, 43, 0.08);
    border-left-color: #c0392b;
}

[data-theme="light"] .smp-queue-divider {
    background: linear-gradient(to right, transparent, rgba(192, 57, 43, 0.2), transparent);
}

[data-theme="light"] .smp-playlist-footer {
    background: rgba(0, 0, 0, 0.04);
    border-top-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .smp-eq-bars span {
    background: #c0392b;
}

[data-theme="light"] .smp-track-item.active .smp-track-name {
    color: #c0392b;
}

[data-theme="light"] .smp-track-item.active .smp-track-number {
    color: #c0392b;
}

[data-theme="light"] .smp-context-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(192, 57, 43, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .smp-context-menu-item {
    color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .smp-context-menu-item:hover {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

[data-theme="light"] #smp-playlist-save-fav:hover,
[data-theme="light"] #smp-playlist-save-fav.active {
    color: #c0392b;
}

[data-theme="light"] #smp-playlist-load-fav {
    color: rgba(192, 57, 43, 0.4);
}

[data-theme="light"] #smp-playlist-load-fav:hover {
    color: #c0392b;
}

/* --- Reduced motion: disable equalizer animation --- */
@media (prefers-reduced-motion: reduce) {
    .smp-eq-bars span {
        animation: none;
        transform: scaleY(0.7);
    }

    .smp-track-item {
        animation: none;
    }

    @keyframes smp-heart-pulse {
        from, to { transform: scale(1); }
    }

    .smp-context-menu {
        animation: none;
    }
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .smp-context-menu {
        min-width: 160px;
    }

    .smp-context-menu-item {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    .smp-queue-header {
        padding: 6px 14px;
        font-size: 10px;
    }

    .smp-playlist-footer {
        font-size: 11px;
        padding: 6px 12px;
    }
}

/* === End: Enhanced Playlist UX — Phase 95 === */

/* ============================================================
   Most Played Section & Play Count Badges — Phase 96
   ============================================================ */

/* --- Most Played Section (inside playlist panel) --- */
.smp-most-played {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0 6px;
    margin-bottom: 4px;
}

.smp-most-played-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #e53935);
}

.smp-most-played-icon {
    display: flex;
    align-items: center;
}

.smp-most-played-icon svg {
    width: 14px;
    height: 14px;
    color: var(--accent-red, #e53935);
}

.smp-most-played-title {
    flex: 1;
}

/* --- Individual Most Played item --- */
.smp-most-played-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.smp-most-played-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    outline: none;
}

.smp-most-played-item:hover,
.smp-most-played-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.smp-most-played-item:active {
    background: rgba(255, 255, 255, 0.1);
}

/* Cover thumbnail */
.smp-most-played-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.smp-most-played-cover-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.3);
}

.smp-most-played-cover-placeholder svg {
    width: 20px;
    height: 20px;
}

/* Track info inside most-played */
.smp-most-played-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.smp-most-played-track-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.smp-most-played-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Play count number badge */
.smp-most-played-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(229, 57, 53, 0.15);
    color: var(--accent-red, #e53935);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Play Count Badge on regular playlist tracks --- */
.smp-play-count-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: rgba(229, 57, 53, 0.85);
    background: rgba(229, 57, 53, 0.1);
    padding: 1px 5px;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* --- Light theme adjustments --- */
[data-theme="light"] .smp-most-played {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .smp-most-played-item:hover,
[data-theme="light"] .smp-most-played-item:focus-visible {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .smp-most-played-item:active {
    background: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .smp-most-played-cover-placeholder {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .smp-most-played-track-title {
    color: rgba(0, 0, 0, 0.87);
}

[data-theme="light"] .smp-most-played-meta {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .smp-most-played-count {
    background: rgba(229, 57, 53, 0.1);
}

[data-theme="light"] .smp-play-count-badge {
    color: rgba(183, 28, 28, 0.9);
    background: rgba(229, 57, 53, 0.08);
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .smp-most-played-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .smp-most-played-cover,
    .smp-most-played-cover-placeholder {
        width: 36px;
        height: 36px;
    }

    .smp-most-played-track-title {
        font-size: 12px;
    }

    .smp-most-played-header {
        padding: 0 12px 6px;
        font-size: 10px;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .smp-most-played-item {
        transition: none;
    }
}

/* === End: Most Played Section — Phase 96 === */

/* === Share Enhancements — Phase 97 === */

/* Memorial share section */
.memorial-share {
    padding: 2rem 0 0;
}

.memorial-share__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.memorial-share__label {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.memorial-share__buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.memorial-share .share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #aaa);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.memorial-share .share-btn:hover,
.memorial-share .share-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.memorial-share .share-btn--vk:hover {
    border-color: #4a76a8;
    color: #5d8fc4;
}

.memorial-share .share-btn--telegram:hover {
    border-color: #2aabee;
    color: #2aabee;
}

.memorial-share .share-btn--copied {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3);
}

/* Native share button (hidden by default, shown by JS) */
.share-btn--native {
    display: none;
}

/* Video card share button */
.vp-card__share-video {
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}

.vp-card__share-video:hover,
.vp-card__share-video:focus-visible {
    opacity: 1;
    color: var(--accent, #e74c3c);
}

/* Video modal share button */
.vp-modal__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #aaa);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vp-modal__share-btn:hover,
.vp-modal__share-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Article native share mobile button */
.share-btn-mobile--native {
    background: var(--accent, #e74c3c);
    color: var(--text-primary);
    border-color: var(--accent, #e74c3c);
}

.share-btn-mobile--native:hover {
    opacity: 0.9;
}

/* === End: Share Enhancements — Phase 97 === */

/* ========================================
   READING PROGRESS TRACKING — Phase 98
   Continue Reading toast, Time Remaining,
   Read badges, Recently Read section
   ======================================== */

/* --- Continue Reading Toast --- */
.continue-reading-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
    max-width: min(480px, calc(100% - 2rem));
    width: 100%;
}

.continue-reading-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.continue-reading-toast--hiding {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.continue-reading-toast__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(20, 20, 24, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.continue-reading-toast__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent-red-light);
}

.continue-reading-toast__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.continue-reading-toast__text strong {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.continue-reading-toast__text span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.continue-reading-toast__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.continue-reading-toast__btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.continue-reading-toast__btn:active {
    transform: scale(0.95);
}

.continue-reading-toast__btn--jump {
    background: #dc2626;
    color: var(--text-primary);
}

.continue-reading-toast__btn--jump:hover {
    background: #ef4444;
}

.continue-reading-toast__btn--dismiss {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.continue-reading-toast__btn--dismiss:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}

/* --- Time Remaining Indicator --- */
.article-time-remaining {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.article-time-remaining--done {
    color: #22c55e;
}

/* --- "Read" Badge on Article Cards --- */
.card-badge--read {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    background: rgba(34, 197, 94, 0.85);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bento-card--read .card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(34, 197, 94, 0.06);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* --- Recently Read Section --- */
.recently-read-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0.5rem;
}

.recently-read-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.recently-read-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
}

.recently-read-title svg {
    color: rgba(255, 255, 255, 0.4);
}

.recently-read-list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.recently-read-list::-webkit-scrollbar {
    display: none;
}

.recently-read-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.recently-read-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.recently-read-item__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.recently-read-item__date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

/* --- Responsive adjustments --- */
@media (max-width: 640px) {
    .continue-reading-toast {
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .continue-reading-toast__content {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .continue-reading-toast__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .recently-read-section {
        padding: 1rem 1rem 0.25rem;
    }

    .recently-read-container {
        padding: 1rem;
    }

    .recently-read-item {
        min-width: 160px;
    }
}

/* Reduced motion: skip toast slide animation */
@media (prefers-reduced-motion: reduce) {
    .continue-reading-toast {
        transition: opacity 0.2s ease;
        transform: translateX(-50%) translateY(0);
    }

    .continue-reading-toast--visible {
        opacity: 1;
    }

    .continue-reading-toast--hiding {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
}

/* === End: Reading Progress Tracking — Phase 98 === */

/* ========================================
   VIDEO PAGE: Watch Next, Watched Badges,
   Play All, Continue Watching, Playlist
   ======================================== */

/* --- Watched badge (checkmark on thumbnails) --- */
.vp-watched-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(76, 175, 80, 0.92);
    color: var(--text-primary);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    animation: vp-badge-pop 0.3s ease-out;
}

@keyframes vp-badge-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Play All button --- */
.vp-play-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--color-accent, #e53935);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.vp-play-all-btn:hover {
    background: #c62828;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(229, 57, 53, 0.3);
}

.vp-play-all-btn:active {
    transform: translateY(0);
}

.vp-play-all-btn--active {
    background: #2e7d32;
    animation: vp-playlist-pulse 1.5s ease-in-out infinite;
}

.vp-play-all-btn--active:hover {
    background: #1b5e20;
}

@keyframes vp-playlist-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}

/* Section header layout with Play All */
.vp-section__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vp-section__header-top h2 {
    margin: 0;
}

/* --- Playlist indicator in modal --- */
.vp-modal__playlist-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.vp-modal__playlist-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.vp-modal__playlist-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: rgba(229, 57, 53, 0.15);
    color: var(--color-accent, #e53935);
    border: 1px solid rgba(229, 57, 53, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.vp-modal__playlist-stop:hover {
    background: rgba(229, 57, 53, 0.3);
}

/* --- Watch Next overlay --- */
.vp-watch-next {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    z-index: 10;
    animation: vp-watchnext-fadein 0.3s ease-out;
}

@keyframes vp-watchnext-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vp-watch-next__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    max-width: 280px;
}

.vp-watch-next__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.vp-watch-next__thumb {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
}

.vp-watch-next__thumb:hover {
    transform: scale(1.03);
}

.vp-watch-next__thumb img {
    display: block;
    width: 160px;
    height: 90px;
    object-fit: cover;
}

.vp-watch-next__title {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vp-watch-next__countdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.vp-watch-next__ring {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
}

.vp-watch-next__ring-progress {
    transition: stroke-dashoffset 5s linear;
}

.vp-watch-next__seconds {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vp-watch-next__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.vp-watch-next__play-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-accent, #e53935);
    color: var(--text-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.vp-watch-next__play-now:hover {
    background: #c62828;
    transform: scale(1.1);
}

.vp-watch-next__cancel {
    padding: 0.35rem 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.vp-watch-next__cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* --- Continue Watching section --- */
.vp-continue-watching {
    padding: 1.5rem 0;
}

.vp-continue-watching__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vp-continue-watching__title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
}

.vp-continue-watching__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.vp-continue-watching__clear:hover {
    background: rgba(229, 57, 53, 0.15);
    color: var(--color-accent, #e53935);
    border-color: rgba(229, 57, 53, 0.3);
}

.vp-continue-watching__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* Mini card variant for continue watching */
.vp-card--mini .vp-card__thumb img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vp-card--mini .vp-card__info h3 {
    font-size: 0.82rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Light theme adjustments --- */
[data-theme="light"] .vp-watched-badge {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vp-modal__playlist-badge {
    background: rgba(76, 175, 80, 0.1);
}

[data-theme="light"] .vp-continue-watching__title {
    color: var(--text-primary, #1a1a1a);
}

[data-theme="light"] .vp-continue-watching__clear {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .vp-continue-watching__clear:hover {
    background: rgba(229, 57, 53, 0.08);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .vp-continue-watching__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .vp-watch-next__content {
        max-width: 220px;
    }

    .vp-watch-next__thumb img {
        width: 130px;
        height: 73px;
    }

    .vp-watch-next__title {
        font-size: 0.85rem;
    }

    .vp-play-all-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }

    .vp-section__header-top {
        gap: 0.5rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vp-watched-badge {
        animation: none;
    }

    .vp-watch-next {
        animation: none;
    }

    .vp-play-all-btn--active {
        animation: none;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
    }

    .vp-watch-next__ring-progress {
        transition-duration: 0.01s;
    }
}

/* === THIS DAY IN HISTORY === */
.this-day-section {
  padding: 3rem 0;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.this-day-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 700px;
}
.this-day-item {
  display: grid;
  grid-template-columns: 5rem 8rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border-left: 3px solid var(--color-accent, #e63946);
}
.this-day-concert { border-left-color: #f4a261; }
.this-day-article { border-left-color: #2ec4b6; }
.this-day-year {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent, #e63946);
  font-variant-numeric: tabular-nums;
}
.this-day-ago {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.this-day-text {
  font-size: 0.95rem;
}
.this-day-loading .skeleton-line {
  height: 3rem;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* === End: Video Watch Next & History === */

/* === SONG OF THE DAY === */
.sotd-section {
  padding: 3rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sotd-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 700px;
}
.sotd-cover img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.sotd-info { flex: 1; }
.sotd-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.sotd-track-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.75rem; }
.sotd-quote {
  font-style: italic;
  color: var(--text-secondary);
  border-left: 3px solid #e63946;
  padding-left: 1rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.sotd-link {
  font-size: 0.85rem;
  color: #e63946;
  text-decoration: none;
}
.sotd-link:hover { text-decoration: underline; }
.sotd-skeleton .skeleton-block {
  height: 120px;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  animation: skeleton-pulse 1.5s infinite;
}
@media (max-width: 500px) {
  .sotd-card { flex-direction: column; }
  .sotd-cover img { width: 80px; height: 80px; }
}
/* === End: Song of the Day === */

/* ========================================
   ARTICLE CONTENT VISIBILITY SAFETY NET
   Ensures article body text is always visible
   regardless of animation state or timing.
   ======================================== */
.article-body-modern,
.article-header-content,
.article-grid-layout > .sticky-share-bar,
.article-grid-layout > .article-body-modern,
.typography-content {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   HOMEPAGE: Duplicate Navigation Cleanup
   The homepage has its own ribbon-nav and
   hp-back-to-top, so we hide the generic
   global equivalents to prevent stacking.
   ======================================== */

/* Hide generic section-nav-dots on homepage — ribbon-nav provides this */
.homepage ~ .section-nav-dots,
body:has(.homepage) .section-nav-dots {
    display: none !important;
}

/* Hide global scroll-to-top on homepage — hp-back-to-top provides this */
.homepage ~ .scroll-to-top-btn,
body:has(.homepage) .scroll-to-top-btn {
    display: none !important;
}

/* Scrollytelling sidebar: ensure it never renders outside its page context.
   The sidebar uses position:fixed which can persist during SPA transitions. */
body:not(:has(.scrollytelling)) .scrollytelling-sidebar {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2026–2027 DESIGN POLISH — Conflict resolution & mobile-first overrides
   ══════════════════════════════════════════════════════════════════════════════ */

/* Bento grid: ensure album cards fill their grid cell (override flex sizing) */
@media (min-width: 640px) {
    .homepage .featured-content .albums-grid-modern .album-card-modern {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .homepage .featured-content .albums-grid-modern {
        overflow: visible !important;
        scrollbar-width: auto;
    }

    /* Gallery bento: cards fill grid cell */
    .homepage .gallery-preview .gallery-photo-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        aspect-ratio: unset !important;
        min-height: 130px;
    }

    .homepage .gallery-preview.gallery-scroll-modern {
        overflow: visible !important;
    }
}

/* Tilt: album-card-modern transform must not be cancelled by earlier modern-fixes rules */
@media (hover: hover) {
    .homepage .featured-content .album-card-modern {
        transform: perspective(900px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
        will-change: transform;
    }

    .homepage .featured-content .album-card-modern:hover {
        transform: perspective(900px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) scale(1.02);
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.6),
            0 0 50px rgba(220, 38, 38, 0.12),
            0 0 0 1px rgba(220, 38, 38, 0.25);
    }
}

/* Touch devices: restore flat hover (no 3D) */
@media (hover: none) {
    .homepage .featured-content .album-card-modern {
        transform: none !important;
    }
}

/* Gallery bento: first item tall on tablet+ */
@media (min-width: 640px) and (max-width: 899px) {
    .homepage .gallery-preview.gallery-scroll-modern {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(3, minmax(120px, 1fr)) !important;
    }

    .homepage .gallery-preview .gallery-photo-item:first-child {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 200px !important;
    }
}

/* Albums bento: 2 columns on tablet */
@media (min-width: 640px) and (max-width: 899px) {
    .homepage .featured-content .albums-grid-modern {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
    }

    .homepage .featured-content .album-card-modern:first-child {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 260px;
    }
}

/* Archive featured-first card: image must fill its area */
@media (min-width: 900px) {
    .homepage .archive-cards-grid .archive-card:first-child .archive-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .homepage .archive-cards-grid .archive-card:first-child {
        overflow: hidden;
    }
}

/* Stats card: ensure live-stat-card inherits the hover lift without display disruption */
.homepage .home-live-stats .live-stat-card {
    isolation: isolate;
}

/* Quote card decorative large quote mark — ensure it doesn't overflow on mobile */
@media (max-width: 479px) {
    .quote-rotator-card::before {
        font-size: 6rem;
        opacity: 0.5;
    }
}

/* Section rise animation: fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
    .homepage .archive-section,
    .homepage .home-live-stats,
    .homepage .guestbook-teaser-section,
    .homepage .quote-rotator-section,
    .homepage .memorial-section,
    .homepage .timeline-section {
        /* JS scroll-reveal handles these in non-supporting browsers */
    }
}

/* Latest album glow: prevent overflow clip issues */
.latest-album-cover-wrap {
    isolation: isolate;
}

/* Block title underline: only on homepage section headers to avoid affecting other pages */
.homepage .block-header .block-title {
    padding-bottom: 0.55rem;
}

/* Ensure album card glare doesn't interfere with quick-play button */
.album-card-glare {
    pointer-events: none;
    z-index: 6;
}

.album-card-quick-play {
    z-index: 7;
}

/* Facts ticker glass: don't overwrite background if color theme is light */
[data-theme="light"] .hp-facts-ticker {
    background: rgba(250, 250, 255, 0.88);
    border-color: rgba(220, 38, 38, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   2026–2027 DESIGN LAYER 2 — Conflict resolution
   ══════════════════════════════════════════════════════════════════════════════ */

/* --- Stats: override any earlier card styles that add box-shadow or backgrounds --- */
.homepage .home-live-stats .live-stat-card {
    box-shadow: none !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    transform: none;
}

.homepage .home-live-stats .live-stat-card:hover {
    transform: none !important;
}

/* Keep the gradient number visible (override -webkit-text-fill-color: initial) */
.homepage .live-stat-number {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
}

/* --- Memorial split: ensure the centered override from .memorial-section doesn't break layout --- */
@media (min-width: 768px) {
    .homepage .memorial-section .memorial-split {
        text-align: left;
    }

    .homepage .memorial-section .memorial-col-text .memorial-title,
    .homepage .memorial-section .memorial-col-text .memorial-subtitle-enhanced,
    .homepage .memorial-section .memorial-col-text .memorial-tribute-text,
    .homepage .memorial-section .memorial-col-text .memorial-quote-text {
        text-align: left;
    }

    /* Restore ::before radial glow — used in memorial section, now behind grid */
    .homepage .memorial-section.memorial-modern::before {
        z-index: 0;
    }

    /* Override .memorial-modern .memorial-content max-width for split */
    .homepage .memorial-section .memorial-split {
        max-width: 880px;
    }
}

/* --- hero-section::after for grain — must not conflict with existing hero overlays --- */
.hero-section::after {
    z-index: 5;
    pointer-events: none;
}

/* Ensure hero-content is above the grain */
.hero-content {
    z-index: 10;
}

/* --- Ghost text: clip overflow from container --- */
.homepage .home-live-stats,
.homepage .timeline-section,
.homepage .memorial-section,
.homepage .guestbook-teaser-section {
    overflow: hidden;
}

/* --- Animated border: prevent width restriction from earlier ::before rules --- */
.homepage .home-live-stats::before {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
}

.homepage .guestbook-teaser-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 51, 102, 0.0) 10%,
        rgba(255, 51, 102, 0.6) 30%,
        rgba(255, 150, 100, 0.8) 50%,
        rgba(255, 51, 102, 0.6) 70%,
        rgba(255, 51, 102, 0.0) 90%,
        transparent 100%);
    background-size: 300% 100%;
    animation: border-flow 6s ease-in-out infinite;
    z-index: 2;
}

.homepage .timeline-section::before {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 51, 102, 0.0) 10%,
        rgba(255, 51, 102, 0.55) 30%,
        rgba(255, 150, 100, 0.7) 50%,
        rgba(255, 51, 102, 0.55) 70%,
        rgba(255, 51, 102, 0.0) 90%,
        transparent 100%);
    background-size: 300% 100%;
    animation: border-flow 8s ease-in-out infinite;
    height: 1px !important;
}

/* --- Genre chips: don't show on mobile if they wrap oddly --- */
@media (max-width: 400px) {
    .hero-genre-chips {
        display: none;
    }
}

/* --- Section numbered labels: light mode override --- */
[data-theme="light"] .homepage .featured-content .block-header .block-title::before,
[data-theme="light"] .homepage .archive-section .block-header .block-title::before,
[data-theme="light"] .homepage .timeline-section .block-header .block-title::before {
    color: rgba(220, 38, 38, 0.5);
}

/* --- Block title: prevent the existing ::after underline from the prev session being doubled --- */
.homepage .block-header .block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.25rem;
    height: 2px;
    background: linear-gradient(90deg, #ff3366 0%, transparent 100%);
    border-radius: 2px;
}

/* --- Ghost text: hide on very narrow screens to prevent overflow --- */
@media (max-width: 479px) {
    .homepage .home-live-stats > .container::after,
    .homepage .timeline-section > .container::after,
    .homepage .memorial-section > .container::after,
    .homepage .guestbook-teaser-section > .container::after {
        display: none;
    }
}

/* --- HP-2026 Hotfixes: Centering, Glitches, Cursor, and Player position --- */
.homepage .hero-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    cursor: auto !important;
}

.homepage .hero-content {
    text-align: center !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.homepage #hero-title {
    pointer-events: none !important; /* Stops hover glitch on dynamic font */
}

.homepage .hp26-epic-rain {
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Ensure cursor is visible globally on homepage */
.homepage, .homepage * {
    cursor: auto;
}
.homepage a, .homepage button, .homepage .btn-primary, .homepage .btn-secondary, .homepage [role="button"], .homepage [onclick] {
    cursor: pointer !important;
}

/* =========================================================================
   Phase 3: 2026-2027 3D Modernizations
   ========================================================================= */

/* --- 1. Albums 3D Coverflow --- */
.albums-grid-modern {
    perspective: 1200px;
    transform-style: preserve-3d;
    overflow-x: auto;
    scroll-behavior: auto !important; /* JS smooths it */
}

.albums-grid-modern .album-card-modern {
    /* Base 3D coverflow transforms (overridden dynamically by JS variables) */
    --cf-ry: 0deg;
    --cf-s: 1;
    --cf-tz: 0px;
    transform: perspective(800px) rotateY(var(--cf-ry)) scale3d(var(--cf-s), var(--cf-s), 1) translateZ(var(--cf-tz));
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Ensure hover tilting still works gracefully with coverflow */
.albums-grid-modern .album-card-modern.hp26-tilting {
    /* We blend the coverflow scale/Z with the interactive glare tilt */
    transform: perspective(800px) rotateX(var(--card-rx, 0deg)) rotateY(calc(var(--cf-ry) + var(--card-ry, 0deg))) scale3d(1.1, 1.1, 1) translateZ(30px) !important;
    transition: transform 0.1s ease-out, box-shadow 0.2s ease-out !important;
}

/* --- 2. Bento Box Asymmetrical Glass Grid for News --- */
.homepage #latest-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    gap: 1.5rem;
}

/* Target specific children to make an asymmetrical bento grid */
@media (min-width: 900px) {
    .homepage #latest-news {
        grid-template-columns: 2fr 1fr 1fr;
        grid-auto-rows: 280px;
    }
    .homepage .news-item-modern:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
    .homepage .news-item-modern:nth-child(2) {
        grid-column: span 1;
        grid-row: span 1;
    }
    .homepage .news-item-modern:nth-child(3) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.homepage .news-item-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--hp26-spring), box-shadow 0.4s ease;
    /* 3D base */
    transform: perspective(1000px) translateZ(0);
}

.homepage .news-item-modern:hover {
    transform: perspective(1000px) translateZ(20px) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.homepage .news-item-modern h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Feature 1 text larger */
@media (min-width: 900px) {
    .homepage .news-item-modern:nth-child(1) h3 {
        font-size: 2.5rem;
    }
}

.homepage .news-item-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}

/* --- 3. Deep Space Parallax for Guestbook Quotes --- */
.guestbook-teaser-section {
    perspective: 1500px;
    transform-style: preserve-3d;
    position: relative;
    overflow: visible; /* Allow 3D elements to pop out */
}

/* Base style for deep space quote nodes */
.guestbook-quote-node {
    transform: translateZ(var(--gs-tz, 0px)) translateY(var(--gs-ty, 0px));
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Skip rendering off-screen content on content-heavy pages */
@supports (content-visibility: auto) {
    .lyrics-album {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }
    /* About page sections, events list, and timeline */
    .about-section--story,
    .events-timeline__item,
    .timeline-item {
        content-visibility: auto;
        contain-intrinsic-size: auto 300px;
    }
}

/* Search button keyboard shortcut hint (desktop only) */
.search-btn--with-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.search-btn__hint {
    display: none;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    line-height: 1.5;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.search-btn--with-hint:hover .search-btn__hint {
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1);
}
@media (min-width: 1200px) {
    .search-btn__hint { display: inline; }
}

/* ── Favorites toggle button ── */
.fav-toggle-btn .fav-icon { transition: fill .2s, stroke .2s; }
.fav-toggle-btn.is-favorited { border-color: rgba(220,38,38,.5); color: rgba(220,38,38,.9); }
.fav-toggle-btn.is-favorited:hover { background: rgba(220,38,38,.08); }
/* Article share-bar variant */
.share-btn-mobile.fav-toggle-btn { gap: .35rem; }
.share-btn-mobile.fav-toggle-btn.is-favorited { color: rgba(220,38,38,.9); }

/* ── Notification bell ── */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-secondary, #d4d4d8);
    cursor: pointer;
    position: relative;
    transition: color .2s, border-color .2s, background .2s;
}
.notif-bell-btn:hover { color: var(--text-primary, #fff); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent, #dc2626);
    color: var(--text-primary);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: var(--bg-elevated, #2a2a30);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.notif-mark-all {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent, #dc2626);
    font-size: .75rem;
    padding: .2rem .5rem;
    border-radius: 4px;
    transition: background .2s;
}
.notif-mark-all:hover { background: rgba(220,38,38,.1); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
    display: block;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.notif-item:hover { background: rgba(255,255,255,0.05); }
.notif-item--unread { background: rgba(220,38,38,0.05); border-left: 3px solid var(--accent, #dc2626); }
.notif-item--unread:hover { background: rgba(220,38,38,0.08); }
.notif-item__title { font-size: .85rem; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: .2rem; }
.notif-item__msg { font-size: .8rem; color: var(--text-muted, #b0b5bd); margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item__time { font-size: .7rem; color: var(--text-muted, #b0b5bd); }
.notif-empty, .notif-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #b0b5bd);
    font-size: .85rem;
}
@media (max-width: 480px) {
    .notif-dropdown { width: calc(100% - 2rem); right: -1rem; }
}

/* ── Notification tab badge (profile page) ── */
.notif-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #dc2626);
    color: var(--text-primary);
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    padding: 0 3px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}
.notif-item--unread {
    border-left: 3px solid var(--accent, #dc2626);
    background: rgba(220,38,38,0.04);
}

.notif-dropdown[hidden] { display: none !important; }




/* ── 2026-2027 GLOBAL NEO-GLASSMORPHISM FOR CARDS ─────────────── */
.news-card,
.article-card,
.album-card,
.hp-tl-item,
.archive-card,
.guestbook-teaser-entry,
.hp26-bento-card,
.on-this-day-card,
.quote-rotator-card {
    background: var(--hp26-glass-bg, rgba(255, 255, 255, 0.04)) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border: 1px solid var(--hp26-glass-border, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.4s var(--hp26-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.4s ease !important;
    overflow: hidden !important;
}

.news-card:hover,
.article-card:hover,
.album-card:hover,
.hp-tl-item:hover,
.archive-card:hover,
.guestbook-teaser-entry:hover,
.hp26-bento-card:hover,
.on-this-day-card:hover,
.quote-rotator-card:hover {
    transform: translateY(-6px) translateZ(10px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}


/* Hide old embedded related content from specialradio.ru */
.srp-block { display: none !important; }