:root, [data-mode=dark] {
    --color-bg-primary     : #000640;
    --color-bg-secondary   : #040d57;
    --color-bg-card        : #09156b;
    --color-bg-elevated    : #122282;
    --color-text-primary   : #f7f9ff;
    --color-text-secondary : #c7d1ff;
    --color-text-muted     : #93a4e6;
    --color-border         : rgba(143, 169, 255, 0.18)
}

:root, [data-accent=gold] {
    --color-accent-subtle : rgba(0, 174, 239, 0.18);
    --shadow-glow         : 0 0 40px rgba(0, 174, 239, 0.24)
}

.container, .nav__link.active::after, .nav__link:hover::after {
    width : 100%
}

.hero__image, .theme-panel {
    box-shadow : var(--shadow-lg)
}

.video-item, a {
    text-decoration : none
}

.about__image img, .gallery__item img, .hero__image img {
    object-fit : cover;
    transition : transform var(--transition-slow)
}

:root {
    --font-display       : "Cormorant Garamond", Georgia, serif;
    --font-body          : "DM Sans", system-ui, sans-serif;
    --space-1            : 0.25rem;
    --space-2            : 0.5rem;
    --space-3            : 0.75rem;
    --space-4            : 1rem;
    --space-5            : 1.25rem;
    --space-6            : 1.5rem;
    --space-8            : 2rem;
    --space-10           : 2.5rem;
    --space-12           : 3rem;
    --space-16           : 4rem;
    --space-20           : 5rem;
    --space-24           : 6rem;
    --max-width          : 1280px;
    --header-height      : 80px;
    --radius-sm          : 4px;
    --radius-md          : 8px;
    --radius-lg          : 12px;
    --radius-xl          : 20px;
    --radius-full        : 9999px;
    --transition-fast    : 150ms ease;
    --transition-base    : 250ms ease;
    --transition-slow    : 400ms ease;
    --color-accent       : #00aeef;
    --color-accent-hover : #33c7ff;
    --body-gradient      : radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 174, 239, 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(18, 34, 130, 0.32) 0%, transparent 50%)
}

[data-mode=dark] {
    --color-header-bg : rgba(0, 6, 64, 0.95);
    --shadow-sm       : 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md       : 0 4px 12px rgba(0, 0, 0, 0.42);
    --shadow-lg       : 0 8px 32px rgba(0, 0, 0, 0.52)
}

[data-mode=light] {
    --color-bg-primary     : #f8fafc;
    --color-bg-secondary   : #ffffff;
    --color-bg-card        : #ffffff;
    --color-bg-elevated    : #f1f5f9;
    --color-text-primary   : #0f172a;
    --color-text-secondary : #475569;
    --color-text-muted     : #64748b;
    --color-border         : rgba(0, 0, 0, 0.08);
    --color-header-bg      : rgba(255, 255, 255, 0.95);
    --shadow-sm            : 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md            : 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg            : 0 10px 15px rgba(0, 0, 0, 0.1)
}

[data-accent=gold] {
    --color-accent       : #d4a853;
    --color-accent-hover : #38c5ff
}

[data-accent=ocean] {
    --color-accent        : #0ea5e9;
    --color-accent-hover  : #38bdf8;
    --color-accent-subtle : rgba(14, 165, 233, 0.15);
    --shadow-glow         : 0 0 40px rgba(14, 165, 233, 0.2)
}

[data-accent=emerald] {
    --color-accent        : #10b981;
    --color-accent-hover  : #34d399;
    --color-accent-subtle : rgba(16, 185, 129, 0.15);
    --shadow-glow         : 0 0 40px rgba(16, 185, 129, 0.2)
}

[data-accent=ruby] {
    --color-accent        : #e11d48;
    --color-accent-hover  : #f43f5e;
    --color-accent-subtle : rgba(225, 29, 72, 0.15);
    --shadow-glow         : 0 0 40px rgba(225, 29, 72, 0.2)
}

[data-accent=violet] {
    --color-accent        : #8b5cf6;
    --color-accent-hover  : #a78bfa;
    --color-accent-subtle : rgba(139, 92, 246, 0.15);
    --shadow-glow         : 0 0 40px rgba(139, 92, 246, 0.2)
}

[data-accent=sunset] {
    --color-accent        : #f97316;
    --color-accent-hover  : #fb923c;
    --color-accent-subtle : rgba(249, 115, 22, 0.15);
    --shadow-glow         : 0 0 40px rgba(249, 115, 22, 0.2)
}

[data-accent=rose] {
    --color-accent        : #f43f5e;
    --color-accent-hover  : #fb7185;
    --color-accent-subtle : rgba(244, 63, 94, 0.15);
    --shadow-glow         : 0 0 40px rgba(244, 63, 94, 0.2)
}

[data-accent=lime] {
    --color-accent        : #84cc16;
    --color-accent-hover  : #a3e635;
    --color-accent-subtle : rgba(132, 204, 22, 0.15);
    --shadow-glow         : 0 0 40px rgba(132, 204, 22, 0.2)
}

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

:focus-visible {
    outline        : 2px solid var(--color-accent);
    outline-offset : 3px
}

:focus:not(:focus-visible) {
    outline : 0
}

html {
    scroll-behavior    : smooth;
    scroll-padding-top : var(--header-height)
}

body {
    overflow-x             : hidden;
    color                  : var(--color-text-primary);
    font-family            : var(--font-body);
    font-size              : 1rem;
    line-height            : 1.6;
    background-color       : var(--color-bg-primary);
    transition             : background-color .4s, color .4s;
    -webkit-font-smoothing : antialiased
}

body::before {
    content        : "";
    opacity        : .6;
    position       : fixed;
    inset          : 0;
    z-index        : -1;
    background     : var(--body-gradient);
    pointer-events : none
}

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

a {
    color      : var(--color-accent);
    transition : color var(--transition-fast)
}

.genre-tab:hover, .nav__link.active, .nav__link:hover, h1, h2, h3, h4 {
    color : var(--color-text-primary)
}

a:hover {
    color : var(--color-accent-hover)
}

button {
    font-family : inherit;
    border      : none;
    background  : 0 0;
    cursor      : pointer
}

.events__month-display, .footer__logo, .hero__stat-value, h1, h2, h3, h4 {
    font-family : var(--font-display)
}

ol, ul {
    list-style : none
}

.skip-link {
    padding       : var(--space-3) var(--space-6);
    position      : absolute;
    top           : -100%;
    left          : var(--space-4);
    z-index       : 10000;
    color         : var(--color-bg-primary);
    font-weight   : 600;
    border-radius : var(--radius-md);
    background    : var(--color-accent);
    transition    : top var(--transition-fast)
}

.skip-link:focus {
    top : var(--space-4)
}

h1, h2, h3, h4 {
    font-weight : 600;
    line-height : 1.2
}

h1 {
    font-size : 3.5rem
}

h2 {
    font-size : 2.5rem
}

h3 {
    font-size : 1.5rem
}

.section-label {
    display        : inline-block;
    margin-bottom  : var(--space-4);
    color          : var(--color-accent);
    font-size      : .75rem;
    font-weight    : 600;
    letter-spacing : .15em;
    text-transform : uppercase
}

.hero__stat-label, .theme-panel__label {
    letter-spacing : .1em;
    text-transform : uppercase
}

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

.section {
    padding : var(--space-24) 0
}

.header {
    height                  : var(--header-height);
    position                : fixed;
    top                     : 0;
    right                   : 0;
    left                    : 0;
    z-index                 : 1000;
    border-bottom           : 1px solid var(--color-border);
    background              : var(--color-header-bg);
    transition              : background .3s;
    -webkit-backdrop-filter : blur(20px);
    backdrop-filter         : blur(20px)
}

.nav__cta, .nav__link::after {
    background : var(--color-accent)
}

.header__inner {
    height          : 100%;
    display         : flex;
    justify-content : space-between;
    align-items     : center
}

.logo, .testimonial-card__author {
    display     : flex;
    align-items : center;
    gap         : var(--space-3)
}

.logo__img {
    width  : auto;
    height : 50px
}

.nav {
    display     : flex;
    align-items : center;
    gap         : var(--space-8)
}

.nav__link {
    padding     : var(--space-2) 0;
    position    : relative;
    color       : var(--color-text-secondary);
    font-size   : .875rem;
    font-weight : 500;
    transition  : color var(--transition-fast)
}

.nav__cta, .theme-toggle-btn {
    transition : all var(--transition-fast)
}

.nav__link::after {
    content    : "";
    width      : 0;
    height     : 2px;
    position   : absolute;
    bottom     : 0;
    left       : 0;
    transition : width var(--transition-base)
}

.nav__cta, .nav__cta:hover {
    color : var(--color-bg-primary)
}

.nav__cta {
    padding       : var(--space-3) var(--space-6);
    font-size     : .875rem;
    font-weight   : 600;
    border-radius : var(--radius-full)
}

.theme-panel, .theme-toggle-btn {
    background : var(--color-bg-card)
}

.nav__cta:hover {
    background : var(--color-accent-hover);
    box-shadow : var(--shadow-glow);
    transform  : translateY(-2px)
}

.header__actions {
    display     : flex;
    align-items : center;
    gap         : var(--space-2)
}

.btn, .theme-toggle-btn {
    justify-content : center
}

.theme-toggle-btn {
    width         : 40px;
    height        : 40px;
    display       : flex;
    position      : relative;
    align-items   : center;
    color         : var(--color-text-primary);
    border        : 1px solid var(--color-border);
    border-radius : 50%
}

.mode-btn, .theme-panel__label {
    color       : var(--color-text-muted);
    font-size   : .75rem;
    font-weight : 600
}

.theme-toggle-btn:hover {
    color        : var(--color-accent);
    border-color : var(--color-accent)
}

.theme-toggle-btn svg {
    width  : 20px;
    height : 20px
}

.theme-panel {
    width         : 240px;
    visibility    : hidden;
    opacity       : 0;
    padding       : var(--space-4);
    position      : absolute;
    top           : calc(100% + 10px);
    right         : 0;
    z-index       : 1100;
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    transition    : all var(--transition-base);
    transform     : translateY(-10px)
}

.color-swatch, .mode-btn {
    transition : all var(--transition-fast)
}

.theme-panel.open {
    visibility : visible;
    opacity    : 1;
    transform  : translateY(0)
}

.color-swatch:hover, .song-card:hover .song-card__play {
    transform : scale(1.1)
}

.theme-panel__section {
    margin-bottom : var(--space-4)
}

.theme-panel__label {
    margin-bottom : var(--space-2)
}

.about__content h2, .contact__content h2, .hero__label, .hero__title {
    margin-bottom : var(--space-6)
}

.color-grid {
    display               : grid;
    gap                   : var(--space-2);
    grid-template-columns :repeat(4, 1fr)
}

.color-swatch {
    width         : 100%;
    aspect-ratio  : 1;
    border        : 2px solid transparent;
    border-radius : var(--radius-md);
    cursor        : pointer
}

.mode-btn, .mode-switch {
    border-radius : var(--radius-full)
}

.color-swatch.active {
    border-color : var(--color-text-primary);
    box-shadow   : 0 0 0 2px var(--color-bg-card), 0 0 0 4px var(--color-text-primary)
}

.mode-switch {
    display    : flex;
    padding    : 4px;
    background : var(--color-bg-primary)
}

.mode-btn {
    padding    : var(--space-2);
    flex       : 1;
    text-align : center
}

.btn--primary, .genre-tab[aria-selected=true], .mode-btn.active, .social-link:hover {
    color      : var(--color-bg-primary);
    background : var(--color-accent)
}

.menu-toggle__line, .song-card.playing .song-card__play {
    background : var(--color-text-primary)
}

.menu-toggle {
    width           : 44px;
    height          : 44px;
    display         : none;
    padding         : 0;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 6px
}

@media (max-width : 1000px) {
    .nav {
        display : none
    }

    .menu-toggle {
        display : flex
    }
}

.menu-toggle__line {
    width            : 24px;
    height           : 2px;
    border-radius    : 2px;
    transition       : all var(--transition-base);
    transform-origin : center
}

.menu-toggle[aria-expanded=true] .menu-toggle__line:first-child {
    transform : translateY(8px) rotate(45deg)
}

.menu-toggle[aria-expanded=true] .menu-toggle__line:nth-child(2) {
    opacity : 0
}

.menu-toggle[aria-expanded=true] .menu-toggle__line:nth-child(3) {
    transform : translateY(-8px) rotate(-45deg)
}

.mobile-nav {
    padding    : var(--space-8);
    position   : fixed;
    top        : var(--header-height);
    right      : 0;
    bottom     : 0;
    left       : 0;
    z-index    : 999;
    overflow-y : auto;
    background : var(--color-bg-primary);
    transition : transform var(--transition-base);
    transform  : translateX(100%)
}

.about__image, .event-list, .gallery__item, .hero, .hero__image, .song-card__title, .testimonials {
    overflow : hidden
}

.btn, .genre-tab, .song-card, .song-card__play {
    transition : all var(--transition-fast)
}

.mobile-nav.open {
    transform : translateX(0)
}

.mobile-nav__list {
    display        : flex;
    flex-direction : column;
    gap            : var(--space-2)
}

.mobile-nav__link {
    display       : block;
    padding       : var(--space-4) 0;
    color         : var(--color-text-primary);
    font-size     : 1.25rem;
    font-weight   : 500;
    border-bottom : 1px solid var(--color-border)
}

.mobile-nav__link:hover {
    color : var(--color-accent)
}

.mobile-nav__cta {
    display       : inline-block;
    margin-top    : var(--space-8);
    padding       : var(--space-4) var(--space-8);
    color         : var(--color-bg-primary);
    font-weight   : 600;
    border-radius : var(--radius-full);
    background    : var(--color-accent)
}

.hero__label, .hero__title span {
    color : var(--color-accent)
}

.hero {
    min-height  : 100vh;
    display     : flex;
    padding-top : var(--header-height);
    position    : relative;
    align-items : center
}

.hero__decor {
    position      : absolute;
    z-index       : -1;
    border-radius : 50%;
    background    : radial-gradient(circle, var(--color-accent-subtle) 0, transparent 70%);
    animation     : 20s ease-in-out infinite float
}

.hero__decor--1 {
    width  : 600px;
    height : 600px;
    top    : -200px;
    right  : -200px
}

.hero__decor--2 {
    width           : 400px;
    height          : 400px;
    bottom          : -100px;
    left            : -100px;
    animation-delay : -10s
}

@keyframes float {
    0%, 100% {
        transform : translate(0, 0) scale(1)
    }
    33% {
        transform : translate(30px, -30px) scale(1.05)
    }
    66% {
        transform : translate(-20px, 20px) scale(.95)
    }
}

.about__grid, .hero__inner {
    display               : grid;
    align-items           : center;
    gap                   : var(--space-16);
    grid-template-columns :1fr 1fr
}

.hero__content {
    max-width : 560px
}

.hero__label {
    display       : inline-flex;
    padding       : var(--space-2) var(--space-4);
    align-items   : center;
    gap           : var(--space-2);
    font-size     : .875rem;
    font-weight   : 500;
    border        : 1px solid var(--color-accent);
    border-radius : var(--radius-full);
    background    : var(--color-accent-subtle)
}

.hero__title {
    font-size   : 4.5rem;
    font-weight : 700;
    line-height : 1.1
}

.about__content p, .hero__description {
    color     : var(--color-text-secondary);
    font-size : 1.125rem
}

.hero__description {
    margin-bottom : var(--space-8);
    line-height   : 1.7
}

.hero__actions {
    display   : flex;
    flex-wrap : wrap;
    gap       : var(--space-4)
}

.btn {
    min-height    : 48px;
    display       : inline-flex;
    padding       : var(--space-4) var(--space-8);
    align-items   : center;
    gap           : var(--space-2);
    font-size     : 1rem;
    font-weight   : 600;
    border-radius : var(--radius-full)
}

.btn--secondary, .hero__image, .hero__stats {
    border : 1px solid var(--color-border)
}

.btn--primary:hover {
    color      : var(--color-bg-primary);
    background : var(--color-accent-hover);
    box-shadow : var(--shadow-glow);
    transform  : translateY(-2px)
}

.btn--secondary {
    color      : var(--color-text-primary);
    background : 0 0
}

.btn--secondary:hover {
    border-color : var(--color-accent);
    background   : var(--color-bg-elevated)
}

.hero__image {
    position      : relative;
    border-radius : var(--radius-xl)
}

.hero__image img {
    width        : 100%;
    height       : auto;
    aspect-ratio : 4/5
}

.hero__image:hover img {
    transform : scale(1.03)
}

.about__image:hover img, .gallery__item:hover img {
    transform : scale(1.05)
}

.hero__stats {
    display         : flex;
    opacity         : 0;
    padding         : var(--space-6);
    position        : absolute;
    right           : var(--space-4);
    bottom          : var(--space-8);
    left            : var(--space-4);
    justify-content : center;
    gap             : var(--space-4);
    border-radius   : var(--radius-lg);
    background      : var(--color-header-bg);
    animation       : .6s .4s forwards slideUp;
    transform       : translateY(50%);
    backdrop-filter : blur(10px)
}

.about__image, .feature {
    border : 1px solid var(--color-border)
}

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

.hero__stat {
    padding    : 0 var(--space-4);
    text-align : center
}

.hero__stat:not(:last-child) {
    border-right : 1px solid var(--color-border)
}

.hero__stat-value {
    color       : var(--color-accent);
    font-size   : 2rem;
    font-weight : 700;
    line-height : 1
}

.hero__stat-label {
    margin-top : var(--space-1);
    color      : var(--color-text-muted);
    font-size  : .75rem
}

.about, .contact, .gallery, .videos {
    background : var(--color-bg-secondary)
}

.about__content p, .music__header h2 {
    margin-bottom : var(--space-4)
}

.about__content p {
    line-height : 1.8
}

.about__features {
    display               : grid;
    margin-top            : var(--space-8);
    gap                   : var(--space-4);
    grid-template-columns :repeat(2, 1fr)
}

.feature {
    display       : flex;
    padding       : var(--space-4);
    align-items   : flex-start;
    gap           : var(--space-3);
    border-radius : var(--radius-md);
    background    : var(--color-bg-card)
}

.feature__icon {
    width           : 40px;
    height          : 40px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-shrink     : 0;
    color           : var(--color-accent);
    border-radius   : var(--radius-md);
    background      : var(--color-accent-subtle)
}

.feature__text {
    color       : var(--color-text-primary);
    font-size   : .875rem;
    font-weight : 500
}

.genre-tab, .music__header p {
    color : var(--color-text-secondary)
}

.about__images {
    display               : grid;
    gap                   : var(--space-4);
    grid-template-columns :repeat(2, 1fr)
}

.about__image {
    border-radius : var(--radius-lg)
}

.about__image:first-child {
    grid-row : span 2
}

.about__image img {
    width  : 100%;
    height : 100%
}

.events, .music {
    position : relative
}

.music__header {
    max-width  : 600px;
    margin     : 0 auto var(--space-12);
    text-align : center
}

.music__header p {
    font-size : 1.125rem
}

.genre-tabs {
    width           : fit-content;
    display         : flex;
    margin-right    : auto;
    margin-bottom   : var(--space-10);
    margin-left     : auto;
    padding         : var(--space-2);
    flex-wrap       : wrap;
    justify-content : center;
    gap             : var(--space-2);
    border          : 1px solid var(--color-border);
    border-radius   : var(--radius-full);
    background      : var(--color-bg-card)
}

.genre-tab {
    padding       : var(--space-3) var(--space-6);
    font-size     : .875rem;
    font-weight   : 500;
    white-space   : nowrap;
    border-radius : var(--radius-full);
    background    : 0 0
}

.song-panel {
    display : none
}

.song-panel.active {
    display   : block;
    animation : .3s fadeIn
}

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

.song-grid {
    display               : grid;
    gap                   : var(--space-4);
    grid-template-columns :repeat(auto-fill, minmax(280px, 1fr))
}

.song-card {
    display       : flex;
    padding       : var(--space-4);
    align-items   : center;
    gap           : var(--space-4);
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card);
    cursor        : pointer
}

.song-card:hover {
    border-color : var(--color-accent);
    background   : var(--color-bg-elevated);
    transform    : translateY(-2px)
}

.song-card.playing {
    border-color : var(--color-accent);
    background   : var(--color-accent-subtle)
}

.song-card__play {
    width           : 48px;
    height          : 48px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-shrink     : 0;
    color           : var(--color-bg-primary);
    border-radius   : 50%;
    background      : var(--color-accent)
}

.song-card__title {
    margin-bottom : var(--space-1);
    color         : var(--color-text-primary);
    font-weight   : 600;
    white-space   : nowrap;
    text-overflow : ellipsis
}

.footer__copy, .song-card__artist, .testimonial-card__role, .video-item__desc {
    color     : var(--color-text-muted);
    font-size : .875rem
}

.audio-player {
    padding    : var(--space-4);
    position   : fixed;
    right      : 0;
    bottom     : 0;
    left       : 0;
    z-index    : 900;
    border-top : 1px solid var(--color-border);
    background : var(--color-bg-secondary);
    transition : transform var(--transition-base);
    transform  : translateY(100%)
}

.lightbox__close, .lightbox__nav--next {
    right : var(--space-4)
}

.audio-player.visible {
    transform : translateY(0)
}

.audio-player__inner {
    max-width   : var(--max-width);
    display     : flex;
    margin      : 0 auto;
    align-items : center;
    gap         : var(--space-6)
}

.audio-player__title, .contact-method__value, .event-text strong, .testimonial-card__name {
    color       : var(--color-text-primary);
    font-weight : 600
}

.audio-player__genre {
    color     : var(--color-accent);
    font-size : .875rem
}

.audio-player__btn {
    width           : 44px;
    height          : 44px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : var(--color-text-primary);
    border-radius   : 50%;
    background      : 0 0;
    transition      : all var(--transition-fast)
}

.audio-player__btn--play {
    width      : 52px;
    height     : 52px;
    color      : var(--color-bg-primary);
    background : var(--color-accent)
}

.audio-player__seek, .event-row:hover, .video-item:hover {
    background : var(--color-bg-elevated)
}

.audio-player__progress {
    display     : flex;
    flex        : 1;
    align-items : center;
    gap         : var(--space-3)
}

.audio-player__time {
    min-width            : 45px;
    color                : var(--color-text-muted);
    font-size            : .875rem;
    font-variant-numeric : tabular-nums
}

.audio-player__seek {
    height        : 6px;
    position      : relative;
    overflow      : hidden;
    flex          : 1;
    border-radius : var(--radius-full);
    cursor        : pointer
}

.audio-player__seek-fill {
    width         : 0%;
    height        : 100%;
    position      : absolute;
    top           : 0;
    left          : 0;
    border-radius : var(--radius-full);
    background    : var(--color-accent);
    transition    : width .1s linear
}

.events__nav-btn, .video-item {
    border : 1px solid var(--color-border)
}

.audio-player__close {
    padding    : var(--space-2);
    color      : var(--color-text-muted);
    transition : color var(--transition-fast)
}

.events__nav-btn, .video-item, .video-item__arrow, .video-item__play {
    transition : all var(--transition-fast)
}

.events__header, .videos__header {
    margin-bottom : var(--space-10);
    text-align    : center
}

.video-list {
    max-width      : 700px;
    display        : flex;
    margin         : 0 auto;
    flex-direction : column;
    gap            : var(--space-3)
}

.events__nav, .video-item {
    gap     : var(--space-4);
    display : flex
}

.video-item {
    padding       : var(--space-4);
    align-items   : center;
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card)
}

.video-item:hover {
    border-color : var(--color-accent);
    transform    : translateX(4px)
}

.video-item__play {
    width           : 56px;
    height          : 56px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-shrink     : 0;
    color           : var(--color-bg-primary);
    border-radius   : 50%;
    background      : var(--color-accent)
}

.event-list, .events__nav-btn {
    background : var(--color-bg-card)
}

.video-item:hover .video-item__play {
    box-shadow : var(--shadow-glow);
    transform  : scale(1.1)
}

.video-item__title {
    margin-bottom : var(--space-1);
    color         : var(--color-text-primary);
    font-size     : 1.125rem;
    font-weight   : 600
}

.video-item__arrow {
    width           : 32px;
    height          : 32px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-shrink     : 0;
    color           : var(--color-text-muted)
}

.video-item:hover .video-item__arrow {
    color     : var(--color-accent);
    transform : translateX(4px)
}

.events__nav {
    margin-bottom   : var(--space-6);
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : center
}

.events__nav-btn {
    width           : 40px;
    height          : 40px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : var(--color-text-primary);
    border-radius   : 50%
}

.events__nav-btn:hover:not(:disabled) {
    color        : var(--color-bg-primary);
    border-color : var(--color-accent);
    background   : var(--color-accent)
}

.events__nav-btn:disabled {
    opacity : .3;
    cursor  : not-allowed
}

.events__month-display {
    min-width   : 180px;
    color       : var(--color-text-primary);
    font-size   : 1.5rem;
    font-weight : 600;
    text-align  : center
}

.event-list {
    max-width     : 700px;
    margin        : 0 auto;
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg)
}

.event-row {
    display       : flex;
    padding       : var(--space-3) var(--space-4);
    align-items   : flex-start;
    gap           : var(--space-3);
    border-bottom : 1px solid var(--color-border);
    transition    : background var(--transition-fast)
}

.event-row:last-child {
    border-bottom : none
}

.event-row--public {
    border-left : 3px solid var(--color-accent)
}

.contact-method:hover, .testimonial-card:hover {
    border-color : var(--color-accent)
}

.event-label {
    padding        : var(--space-1) var(--space-2);
    flex-shrink    : 0;
    font-size      : .7rem;
    font-weight    : 600;
    letter-spacing : .05em;
    text-transform : uppercase;
    border-radius  : var(--radius-sm)
}

.lightbox, .no-events, .testimonial-card {
    padding : var(--space-8)
}

.event-label--public {
    color      : var(--color-accent);
    background : var(--color-accent-subtle)
}

.event-label--private {
    color      : var(--color-text-muted);
    background : var(--color-bg-elevated)
}

.event-text {
    flex        : 1;
    color       : var(--color-text-secondary);
    font-size   : .875rem;
    line-height : 1.5
}

.event-text .time, .no-events {
    color : var(--color-text-muted)
}

.no-events {
    text-align : center
}

.tip-jar {
    background : var(--color-bg-secondary);
}

.tip-jar__qr img {
    inline-size     : 100%;
    max-inline-size : 300px;
    padding         : var(--space-4);
    border-radius   : var(--radius-lg);
    background      : #ffffff;
    box-shadow      : var(--shadow-lg);
    position        : relative;
    z-index         : 1;
    animation       : tipFloat 6s ease-in-out infinite;
    transition      : transform var(--transition-fast);
}

.tip-jar__card {
    display               : grid;
    grid-template-columns : 1.2fr 320px;
    align-items           : center;
    gap                   : var(--space-10);
    padding               : var(--space-10);
    border                : 1px solid var(--color-border);
    border-radius         : var(--radius-xl);
    background            : var(--color-bg-card);
    box-shadow            : var(--shadow-md);
    transition            : transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.tip-jar__card:hover {
    border-color : var(--color-accent);
    box-shadow   : var(--shadow-lg);
    transform    : translateY(-4px);
}

.tip-jar__content {
    text-align : start;
}

.tip-jar__content h2 {
    margin-block-end : var(--space-4);
}

.tip-jar__content p {
    margin-block-end : var(--space-4);
    color            : var(--color-text-secondary);
    font-size        : 1.05rem;
    line-height      : 1.7;
}

.tip-jar__note {
    color     : var(--color-text-muted);
    font-size : 0.85rem;
}

.tip-jar__qr {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.tip-jar__qr::before {
    content       : "";
    position      : absolute;
    inset         : -20px;
    z-index       : 0;
    border-radius : var(--radius-xl);
    opacity       : 0.6;
    background    : radial-gradient(circle, var(--color-accent-subtle) 0%, transparent 70%);
    animation     : tipGlowPulse 4s ease-in-out infinite;
}

.tip-jar__qr:hover::before {
    opacity : 1;
    filter  : blur(8px);
}

.gallery__header, .testimonials__header {
    margin-bottom : var(--space-12);
    text-align    : center
}

.gallery__grid {
    display               : grid;
    gap                   : var(--space-4);
    grid-template-columns :repeat(4, 1fr);
    grid-auto-rows        : 200px
}

@media (max-width : 920px) {
    .hero__inner {
        gap                   : var(--space-12);
        grid-template-columns :1fr;
        text-align            : center
    }

    .hero__actions {
        justify-content : center
    }

    .hero__stats {
        opacity    : 1;
        margin-top : var(--space-8);
        position   : relative;
        right      : auto;
        bottom     : auto;
        left       : auto;
        animation  : none;
        transform  : none
    }

    .about__grid {
        gap                   : var(--space-12);
        grid-template-columns :1fr
    }

    .gallery__grid {
        grid-template-columns :repeat(2, 1fr)
    }
}

.gallery__item {
    position      : relative;
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card);
    cursor        : pointer
}

.gallery__item:first-child {
    grid-column : span 2;
    grid-row    : span 2
}

@media (max-width : 640px) {
    .container {
        padding : 0 var(--space-4)
    }

    .about__features {
        grid-template-columns :1fr
    }

    .audio-player__inner {
        flex-wrap : wrap;
        gap       : var(--space-3)
    }

    .gallery__grid {
        grid-template-columns :1fr;
        grid-auto-rows        : 250px
    }

    .gallery__item:first-child {
        grid-column : span 1;
        grid-row    : span 1
    }
}

.gallery__item img {
    width           : 100%;
    height          : 100%;
    object-position : top center
}

.lightbox {
    display         : flex;
    visibility      : hidden;
    opacity         : 0;
    position        : fixed;
    inset           : 0;
    z-index         : 2000;
    justify-content : center;
    align-items     : center;
    background      : rgba(0, 0, 0, .95);
    transition      : all var(--transition-base)
}

.lightbox.open {
    visibility : visible;
    opacity    : 1
}

.lightbox__content {
    max-width  : 90vw;
    max-height : 90vh;
    position   : relative
}

.lightbox__img {
    max-width     : 100%;
    max-height    : 85vh;
    border-radius : var(--radius-lg)
}

.lightbox__close, .lightbox__nav {
    display         : flex;
    position        : absolute;
    justify-content : center;
    color           : var(--color-text-primary);
    border-radius   : 50%;
    transition      : all var(--transition-fast);
    background      : var(--color-bg-card)
}

.lightbox__close {
    width       : 44px;
    height      : 44px;
    top         : var(--space-4);
    align-items : center
}

.lightbox__nav {
    width       : 48px;
    height      : 48px;
    top         : 50%;
    align-items : center;
    transform   : translateY(-50%)
}

.lightbox__nav--prev {
    left : var(--space-4)
}

.testimonials {
    position : relative
}

.testimonials__grid {
    display               : grid;
    gap                   : var(--space-6);
    grid-template-columns :repeat(auto-fit, minmax(320px, 1fr))
}

.testimonial-card {
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card);
    transition    : all var(--transition-base)
}

.contact-method, .social-link {
    transition : all var(--transition-fast)
}

.testimonial-card:hover {
    transform : translateY(-4px)
}

.testimonial-card__quote {
    margin-bottom : var(--space-4);
    color         : var(--color-accent);
    font-size     : 2.5rem;
    line-height   : 1
}

.testimonial-card__text {
    margin-bottom : var(--space-6);
    color         : var(--color-text-secondary);
    font-size     : 1rem;
    line-height   : 1.8
}

.testimonial-card__avatar {
    width           : 48px;
    height          : 48px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : var(--color-accent);
    font-weight     : 600;
    border-radius   : 50%;
    background      : var(--color-accent-subtle)
}

.contact__grid {
    display               : grid;
    gap                   : var(--space-16);
    grid-template-columns :1fr 1fr
}

@media (max-width : 920px) {
    .contact__grid {
        gap                   : var(--space-12);
        grid-template-columns :1fr
    }
}

.contact-method, .contact__methods, .social-links {
    gap     : var(--space-4);
    display : flex
}

.contact__content p {
    margin-bottom : var(--space-8);
    color         : var(--color-text-secondary);
    font-size     : 1.125rem
}

.contact-method__icon, .footer__logo span {
    color : var(--color-accent)
}

.contact__methods {
    flex-direction : column
}

.contact-method {
    padding       : var(--space-4);
    align-items   : center;
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card)
}

.contact-method__icon {
    width           : 48px;
    height          : 48px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border-radius   : var(--radius-md);
    background      : var(--color-accent-subtle)
}

.footer__logo, .social-link {
    color : var(--color-text-primary)
}

.info-card {
    margin-bottom : var(--space-6);
    padding       : var(--space-6);
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    background    : var(--color-bg-card)
}

.social-links {
    margin-top : var(--space-6)
}

.social-link {
    width           : 48px;
    height          : 48px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border-radius   : var(--radius-md);
    background      : var(--color-bg-elevated)
}

.footer {
    padding    : var(--space-12) 0;
    border-top : 1px solid var(--color-border)
}

.footer__inner {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    align-items     : center;
    gap             : var(--space-6)
}

.footer__logo {
    font-size   : 1.25rem;
    font-weight : 700
}

.reveal {
    opacity    : 0;
    transition : opacity .6s, transform .6s;
    transform  : translateY(30px)
}

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

.reveal-delay-1 {
    transition-delay : 0.1s
}

.reveal-delay-2 {
    transition-delay : 0.2s
}

@keyframes tipGlowPulse {
    0%, 100% {
        transform : scale(1);
        opacity   : 0.5;
    }
    50% {
        transform : scale(1.08);
        opacity   : 0.8;
    }
}

@keyframes tipFloat {
    0%, 100% {
        transform : translateY(0);
    }
    50% {
        transform : translateY(-6px);
    }
}

@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;
    }
}

@media (max-width : 768px) {
    .hero__title, h1 {
        font-size : 2.5rem
    }

    h2 {
        font-size : 2rem
    }

    .section {
        padding : var(--space-16) 0
    }
	
	.tip-jar__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tip-jar__content {
        text-align: center;
    }
}