/**
 * Design Tokens
 *
 * CSS custom properties (variables) defining the design system foundation.
 * Includes color palettes, spacing scale, typography scale, z-index hierarchy,
 * transitions, shadows, and other reusable design tokens.
 *
 * These tokens ensure consistency across the application and enable
 * easy theme switching (light/dark mode).
 */

/* Theme Color Variables */
:root {
    /* Light Theme Colors - Premium Palette */
    --background-color: #FAFAF8;
    --text-color: #1A1A1A;
    --text-rgb: 26, 26, 26;
    --secondary-text: #5A5A5A; /* Enhanced contrast for premium readability */
    --accent-color: hsl(42, 45%, 45%);
    --accent-gold: hsl(45, 35%, 60%);
    --accent-champagne: hsl(48, 38%, 72%);
    --card-background: #FFFFFF;
    --header-background: rgba(250, 250, 248, 0.85);
    --border-color: #E8E6E0;
    --border-subtle: #F2F0EB;
    --shadow-color: rgba(0, 0, 0, 0.08);

    /* Premium Button Colors */
    --button-color: hsl(38, 35%, 48%);
    --button-color-hover: hsl(38, 40%, 42%);
    --button-text: #FFFFFF;

    /* Z-index scale - ordered hierarchy */
    --z-base: 1;
    --z-header: 100;
    --z-scroll-hint: 100;
    --z-scroll-top: 1000;
    --z-lightbox: 1000;
    --z-grain: 5000;        /* Decorative layer - below interactive elements */
    --z-overlay: 9999;      /* Mobile menu backdrop */
    --z-mobile-menu: 10000; /* Mobile navigation */
    --z-mobile-controls: 10001;
    --z-mobile-toggle: 10002;
    --z-skip-link: 10003;   /* Highest for accessibility */

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* Premium Easing Curves - World-Class Motion */
    --ease-out-back: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.15, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-premium: cubic-bezier(0.33, 0, 0.2, 1);
    --ease-elegant: cubic-bezier(0.65, 0, 0.35, 1);

    /* Apple-style easing curves */
    --ease-apple-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-apple-deceleration: cubic-bezier(0.33, 0, 0.2, 1);

    /* Transition Durations */
    --transition-instant: 0.1s;
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-medium: 0.4s;
    --transition-slow: 0.6s;
    --transition-slower: 0.8s;

    /* Premium Shadows - Subtle & Refined */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06),
                 0 8px 24px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05),
                 0 8px 32px rgba(0, 0, 0, 0.06),
                 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-premium: 0 2px 8px rgba(139, 120, 93, 0.08),
                      0 8px 24px rgba(139, 120, 93, 0.12),
                      0 16px 48px rgba(0, 0, 0, 0.06);

    /* Elevated surface shadows for dark mode cards/modals */
    --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.08),
                       0 8px 32px rgba(0, 0, 0, 0.06);

    /* Button hover lift shadow */
    --shadow-button-hover: 0 6px 20px rgba(139, 120, 93, 0.2),
                           0 12px 32px rgba(139, 120, 93, 0.12);

    /* Premium Spacing Scale - Generous Breathing Room */
    --spacing-xs: 0.5rem;     /* 8px */
    --spacing-sm: 0.75rem;    /* 12px */
    --spacing-md: 1.25rem;    /* 20px */
    --spacing-lg: 2rem;       /* 32px */
    --spacing-xl: 3rem;       /* 48px */
    --spacing-2xl: 4.5rem;    /* 72px */
    --spacing-3xl: 6rem;      /* 96px */
    --spacing-4xl: 8rem;      /* 128px */

    /* Typography Scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */

    /* Premium Typography Settings */
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    --leading-generous: 2.0;

    /* Letter Spacing - Elegant & Refined */
    --tracking-tight: -0.02em;
    --tracking-normal: 0.01em;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.15em;
}

/* Dark Theme - Premium */
[data-theme="dark"] {
    --background-color: #1C1917;
    --text-color: #FAF9F7;
    --text-rgb: 250, 249, 247;
    --secondary-text: #C7C5C0;
    --accent-color: hsl(43, 52%, 65%);
    --accent-gold: hsl(45, 45%, 72%);
    --accent-champagne: hsl(48, 40%, 78%);
    --card-background: #272421;
    --card-background-elevated: #302D29;
    --header-background: rgba(28, 25, 23, 0.9);
    --border-color: #3A3632;
    --border-subtle: #2E2B27;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --button-color: hsl(43, 52%, 65%);
    --button-color-hover: hsl(43, 55%, 70%);
    --button-text: #1C1917;

    /* Elevated surfaces in dark mode */
    --shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.3),
                       0 8px 40px rgba(0, 0, 0, 0.2);
}
/**
 * Base Styles & Reset
 *
 * Global HTML element styles, typography defaults, accessibility utilities,
 * smooth scrolling settings, and decorative background effects.
 *
 * This file provides the foundation layer that all other styles build upon,
 * including base typographic settings, scroll behavior optimizations,
 * and the film grain/organic texture visual effects.
 */

/* Smooth Scrolling Optimization for All Devices */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Account for sticky header on anchor jumps */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize for 120Hz displays (iPhone 13 Pro+, iPad Pro, high-end Android) */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }

    /* Use hardware acceleration for smoother 120Hz rendering */
    main,
    section {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
}

/* Enhanced momentum scrolling for iOS devices */
body {
    -webkit-overflow-scrolling: touch;
    /* Momentum scrolling on iOS */
    overscroll-behavior-y: none;
    /* Prevent pull-to-refresh while maintaining smooth scroll */
}

/* Performance optimization hints for scrolling elements */
main,
section,
.featured-grid,
.gallery-grid {
    will-change: scroll-position;
    /* Hint browser to optimize for scrolling */
}

/* Smooth out scroll animations */
@supports (scroll-timeline: --scroll) {
    html {
        scroll-timeline: --scroll block;
    }
}

/* Accessibility: Screen reader only content */
.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;
}

/* Accessibility: Skip navigation link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--accent-color);
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 600;
    z-index: var(--z-skip-link);
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--text-color);
    outline-offset: 2px;
}

/* General Body Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    letter-spacing: 0.01em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* Smooth 0.4s theme transition on all color properties */
    transition: background-color 0.4s var(--ease-gentle),
                color 0.4s var(--ease-gentle);
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

html {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Enhanced Film Grain Overlay - More visible organic texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: var(--z-grain);
    animation: grainSubtle 40s ease-in-out infinite;
    mix-blend-mode: overlay;
}

/* Organic Artwork Animation Layer */
body::after {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120vw;
    height: 120vh;
    background-image: url("data:image/svg+xml,%3Csvg width='1200' height='1200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='g1'%3E%3Cstop offset='0%25' style='stop-color:rgba(139,120,93,0.04)'/%3E%3Cstop offset='100%25' style='stop-color:rgba(139,120,93,0)'/%3E%3C/radialGradient%3E%3CradialGradient id='g2'%3E%3Cstop offset='0%25' style='stop-color:rgba(87,108,115,0.03)'/%3E%3Cstop offset='100%25' style='stop-color:rgba(87,108,115,0)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='300' r='180' fill='url(%23g1)'/%3E%3Cellipse cx='800' cy='500' rx='220' ry='180' fill='url(%23g2)' opacity='0.7'/%3E%3Ccircle cx='600' cy='800' r='150' fill='url(%23g1)' opacity='0.5'/%3E%3Cellipse cx='300' cy='900' rx='200' ry='140' fill='url(%23g2)' opacity='0.6'/%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
    z-index: calc(var(--z-grain) - 1);
    animation: organicFloat 60s ease-in-out infinite;
    mix-blend-mode: multiply;
}

[data-theme="dark"] body::after {
    mix-blend-mode: screen;
    opacity: 0.4;
}

@keyframes grainSubtle {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.025;
    }

    20% {
        transform: translate(-2%, -3%);
        opacity: 0.03;
    }

    40% {
        transform: translate(1%, 2%);
        opacity: 0.022;
    }

    60% {
        transform: translate(-1%, 1%);
        opacity: 0.028;
    }

    80% {
        transform: translate(2%, -1%);
        opacity: 0.026;
    }
}

/* Disable grain animation on mobile to save battery */
@media (max-width: 768px) {
    body::before {
        animation: none;
    }

    body::after {
        animation: none;
    }
}

/* Respect reduced motion preference */
@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;
    }

    body::before,
    body::after {
        animation: none !important;
    }

    .scroll-indicator {
        animation: none !important;
    }
}

@keyframes organicFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(3%, -2%) rotate(2deg) scale(1.05);
    }

    50% {
        transform: translate(-2%, 3%) rotate(-1deg) scale(0.98);
    }

    75% {
        transform: translate(2%, 1%) rotate(1deg) scale(1.02);
    }
}

/* Premium Typography Base Styles */
h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 300;
    letter-spacing: 0.04em;
}

h1,
h2 {
    line-height: 1.15;
    letter-spacing: 0.06em;
}

h3 {
    line-height: 1.3;
    letter-spacing: 0.03em;
    font-weight: 400;
}

h4,
h5,
h6 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

p,
li {
    letter-spacing: 0.02em;
    line-height: 1.75;
}

/* ========================================
   STYLED BLOCKQUOTES / PULL QUOTES
   Premium typography for artist statements
   ======================================== */

blockquote,
.pull-quote {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
    margin: 2.5rem 0;
    padding: 0 0 0 2rem;
    border-left: 3px solid var(--accent-color);
    position: relative;
}

blockquote::before,
.pull-quote::before {
    content: '\201C';
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    font-size: 4rem;
    color: var(--accent-color);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

blockquote p,
.pull-quote p {
    margin: 0;
    line-height: 1.6;
}

blockquote cite,
.pull-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 500;
    color: var(--secondary-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Centered pull quote variant */
.pull-quote-centered {
    text-align: center;
    border-left: none;
    padding: 0;
    max-width: 700px;
    margin: 3rem auto;
}

.pull-quote-centered::before {
    left: 50%;
    transform: translateX(-50%);
    top: -1rem;
}

/* ========================================
   SCROLL PROGRESS INDICATOR
   Shows page scroll progress at top
   ======================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: calc(var(--z-header) + 1);
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-gold));
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ========================================
   SECTION JUMP DOTS
   Floating vertical navigation for long pages
   ======================================== */

.section-dots {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: calc(var(--z-header) - 1);
    opacity: 0;
    transition: opacity 0.4s var(--ease-gentle);
    pointer-events: none;
}

.section-dots.visible {
    opacity: 1;
    pointer-events: auto;
}

.section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    position: relative;
}

.section-dot::before {
    content: attr(data-label);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--secondary-text);
    background: var(--card-background);
    padding: 4px 10px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.section-dot:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

.section-dot:hover {
    background: var(--accent-color);
    transform: scale(1.3);
}

.section-dot.active {
    background: var(--accent-color);
    transform: scale(1.2);
}

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

/* Hide section dots on mobile */
@media (max-width: 1024px) {
    .section-dots {
        display: none;
    }
}

/* Section Labels - Uppercase Small Text */
.section-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary-text);
    margin-bottom: 1rem;
}

/* Link Styles - Premium Underline Animation */
a {
    color: var(--accent-color);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-normal) var(--ease-gentle);
}

/* Elegant underline on hover - grows from center */
a:not(.btn-primary):not(.btn-secondary):not(.filter-btn):not(.gallery-item):not(.social-link)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--transition-normal) var(--ease-out-back),
                left var(--transition-normal) var(--ease-out-back);
}

a:not(.btn-primary):not(.btn-secondary):not(.filter-btn):not(.gallery-item):not(.social-link):hover::after {
    width: 100%;
    left: 0;
}

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

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

/* ========================================
   FOCUS INDICATORS - WCAG 2.1 AA COMPLIANT
   ======================================== */

/* Enhanced focus styles for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

/* Remove default focus outline for mouse users */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for form controls - keep their box-shadow */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Dark theme focus styles */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible,
[data-theme="dark"] [tabindex]:not([tabindex="-1"]):focus-visible {
    outline-color: var(--accent-color);
}
/* ========================================
   03-HEADER.CSS - COMPLETE REWRITE
   ========================================
   Clean mobile-first implementation
   ======================================== */

/* ========================================
   HEADER CONTAINER
   ======================================== */
header {
    padding: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--header-background);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(var(--text-rgb), 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02),
                0 4px 12px rgba(0, 0, 0, 0.03);
    /* Prevent layout shifts and jumps */
    min-height: 56px;
    height: 56px;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Smooth theme transition */
    transition: background-color 0.4s var(--ease-gentle),
                border-color 0.4s var(--ease-gentle),
                box-shadow 0.4s var(--ease-gentle);
}

/* ========================================
   NAV CONTAINER
   ======================================== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

/* ========================================
   MOBILE MENU TOGGLE (Hamburger Button)
   ======================================== */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 10002;
    border-radius: 4px;
    position: relative;
    transition: transform var(--transition-fast) var(--ease-out-back);
}

.mobile-menu-toggle:hover {
    transform: scale(1.05);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-color);
    border-radius: 2px;
    position: absolute;
    transition: transform var(--transition-normal) var(--ease-out-back),
                opacity var(--transition-normal) var(--ease-gentle);
}

.mobile-menu-toggle span:nth-child(1) { transform: translateY(-7px); }
.mobile-menu-toggle span:nth-child(2) { transform: translateY(0); }
.mobile-menu-toggle span:nth-child(3) { transform: translateY(7px); }

.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); }

/* Focus indicator for mobile menu toggle - WCAG 2.1 AA */
.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    background-color: rgba(139, 120, 93, 0.05);
}

.mobile-menu-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   LOGO (Desktop Only)
   ======================================== */
.header-logo {
    display: none; /* Hidden on mobile */
    align-items: center;
    text-decoration: none;
    z-index: 10001;
}

.header-logo .logo-image {
    height: 36px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
    display: block;
    /* Crisp rendering for small sizes */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Ensure no background */
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark theme: switch to dark logo */
:root[data-theme="dark"] .header-logo .logo-image,
html[data-theme="dark"] .header-logo .logo-image {
    content: url('../img/logo-dark.png?v=1764448781');
}

/* ========================================
   MOBILE PAGE TITLE (Center of header)
   ======================================== */
.mobile-page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    pointer-events: none;
}

body.menu-open .mobile-page-title {
    opacity: 0;
}

/* ========================================
   NAVIGATION MENU - BASE (HIDDEN)
   This is the key fix - hide by default
   ======================================== */
#mobile-nav-menu {
    /* Hidden by default - use display:none */
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* When menu is active on mobile - show fullscreen overlay */
#mobile-nav-menu.active {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 2rem 0 !important;
    padding-top: 80px !important;
    background: var(--background-color) !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    animation: menuFadeSlideIn 0.3s ease-out;
    margin: 0 !important;
}

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

/* Mobile menu list items */
#mobile-nav-menu.active li {
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
    text-align: center !important;
}

/* Mobile menu links - clean modern typography */
#mobile-nav-menu.active a {
    display: block !important;
    padding: 1.5rem 1rem !important;
    text-align: center !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--secondary-text) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(139, 120, 93, 0.15) !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Remove border from last item */
#mobile-nav-menu.active li:last-child a {
    border-bottom: none !important;
}

/* Hover state */
#mobile-nav-menu.active a:hover {
    color: var(--text-color) !important;
    background: transparent !important;
}

/* Focus state - WCAG 2.1 AA compliant */
#mobile-nav-menu.active a:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: -2px !important;
    color: var(--text-color) !important;
    background-color: rgba(139, 120, 93, 0.05) !important;
}

#mobile-nav-menu.active a:focus:not(:focus-visible) {
    outline: none !important;
}

/* Active/current page */
#mobile-nav-menu.active a.active {
    color: var(--text-color) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* ========================================
   MOBILE MENU OVERLAY
   ======================================== */
/* Overlay removed - menu itself provides clean fullscreen background */
.mobile-menu-overlay {
    display: none !important;
}

/* ========================================
   HEADER CONTROLS (Lang/Theme toggles)
   ======================================== */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10002;
}

.header-controls .social-links-minimal {
    display: none;
}

/* Language Toggle - Elegant minimal design with WCAG AA touch targets */
.lang-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0.625rem 0.875rem; /* Increased for 44x44px minimum */
    min-width: 44px;
    min-height: 44px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--secondary-text);
    border-radius: 22px; /* Adjusted for new padding */
    transition: all var(--transition-normal) var(--ease-gentle),
                transform var(--transition-fast) var(--ease-out-back);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.lang-toggle .lang-option {
    transition: color 0.2s ease;
}

.lang-toggle .active-lang {
    color: var(--text-color);
    font-weight: 600;
}

.lang-toggle .lang-divider {
    width: 1px;
    height: 12px;
    background: var(--border-color);
}

.lang-toggle:hover {
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 120, 93, 0.15);
}

.lang-toggle:hover .lang-option:not(.active-lang) {
    color: var(--accent-color);
}

.lang-toggle:active {
    transform: translateY(0);
}

/* Focus indicator for language toggle - WCAG 2.1 AA */
.lang-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-color: var(--accent-color);
}

.lang-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* Theme Toggle with WCAG AA touch targets */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px; /* WCAG 2.1 AA minimum */
    height: 44px; /* WCAG 2.1 AA minimum */
    padding: 10px; /* Adjusted for larger button */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    transition: transform var(--transition-fast) var(--ease-out-back),
                background-color var(--transition-normal) var(--ease-gentle);
}

.theme-toggle:hover {
    transform: scale(1.1);
    background-color: rgba(var(--text-rgb), 0.06);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--text-color);
    fill: var(--text-color);
    position: absolute;
    transition: opacity 0.5s var(--ease-spring),
                transform 0.5s var(--ease-spring);
}

.theme-toggle .moon-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-toggle .sun-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

[data-theme="dark"] .theme-toggle .moon-icon {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

[data-theme="dark"] .theme-toggle .sun-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Smooth rotation animation on theme change */
.theme-toggle.animating svg {
    transition: opacity 0.4s var(--ease-spring),
                transform 0.6s var(--ease-bounce);
}

/* Focus indicator for theme toggle - WCAG 2.1 AA */
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    background-color: rgba(139, 120, 93, 0.1);
}

.theme-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   DESKTOP STYLES (min-width: 769px)
   ======================================== */
@media (min-width: 769px) {
    header {
        padding: 0.5rem 2rem;
    }

    /* Desktop nav: 3-column grid */
    nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    /* Hide mobile-only elements */
    .mobile-menu-toggle,
    .mobile-page-title,
    .mobile-menu-overlay {
        display: none !important;
    }

    /* Desktop logo positioning - show only on desktop */
    .header-logo {
        display: flex;
        grid-column: 1;
        justify-self: start;
    }

    /* Desktop nav menu: horizontal, always visible */
    #mobile-nav-menu,
    #mobile-nav-menu.active {
        /* Override ALL mobile styles on desktop */
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2.5rem !important;
        padding: 0 !important;
        background: transparent !important;
        grid-column: 2;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
        overflow: visible !important;
    }

    #mobile-nav-menu li,
    #mobile-nav-menu.active li {
        width: auto !important;
        max-width: none !important;
    }

    #mobile-nav-menu a,
    #mobile-nav-menu.active a {
        display: inline-block !important;
        padding: 0.5rem 0 !important;
        font-size: 0.875rem !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--secondary-text) !important;
        position: relative !important;
        text-align: left !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    #mobile-nav-menu a::after,
    #mobile-nav-menu.active a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--accent-color);
        transition: width 0.3s ease;
    }

    #mobile-nav-menu a:hover,
    #mobile-nav-menu.active a:hover {
        color: var(--accent-color) !important;
        background: transparent !important;
        border: none !important;
    }

    #mobile-nav-menu a:focus,
    #mobile-nav-menu.active a:focus {
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 4px !important;
    }

    #mobile-nav-menu a:hover::after,
    #mobile-nav-menu.active a:hover::after {
        width: 100%;
    }

    #mobile-nav-menu a.active,
    #mobile-nav-menu.active a.active {
        color: var(--text-color) !important;
        background: transparent !important;
        border: none !important;
    }

    #mobile-nav-menu a.active::after,
    #mobile-nav-menu.active a.active::after {
        width: 100%;
        height: 3px;
    }

    /* Desktop header controls */
    .header-controls {
        grid-column: 3;
        justify-content: flex-end;
        gap: 1rem;
    }

    .header-controls .social-links-minimal {
        display: flex;
        gap: 0.5rem;
    }

    .social-links-minimal a {
        color: var(--secondary-text);
        transition: color 0.2s ease;
    }

    .social-links-minimal a:hover {
        color: var(--accent-color);
    }
}

/* ========================================
   TABLET (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    #mobile-nav-menu {
        gap: 1.5rem !important;
    }

    #mobile-nav-menu a {
        font-size: 0.8rem;
    }
}

/* ========================================
   MENU HOVER BACKGROUND (optional feature)
   ======================================== */
.menu-hover-bg {
    display: none;
}

/* ========================================
   MOBILE BOTTOM TAB BAR
   iOS-style fixed bottom navigation
   ======================================== */
.mobile-tab-bar {
    display: none; /* Hidden by default, shown on mobile */
}

@media (max-width: 768px) {
    .mobile-tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--header-background);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04),
                    0 -1px 2px rgba(0, 0, 0, 0.02);
        transition: transform 0.3s var(--ease-gentle),
                    background-color 0.4s var(--ease-gentle),
                    border-color 0.4s var(--ease-gentle);
    }

    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: var(--secondary-text);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        padding: 8px 12px;
        min-width: 64px;
        min-height: 44px; /* WCAG 2.1 AA touch target */
        border-radius: 8px;
        transition: color 0.2s ease,
                    background-color 0.2s ease,
                    transform 0.2s var(--ease-out-back);
        -webkit-tap-highlight-color: transparent;
    }

    .tab-item svg {
        width: 24px;
        height: 24px;
        stroke-width: 2;
        transition: transform 0.2s var(--ease-out-back);
    }

    .tab-item.active {
        color: var(--accent-color);
    }

    .tab-item.active svg {
        transform: scale(1.1);
    }

    .tab-item:active {
        transform: scale(0.95);
        background-color: rgba(var(--text-rgb), 0.05);
    }

    /* Add padding to main content to account for tab bar */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Ensure footer doesn't overlap tab bar */
    .site-footer {
        margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}
/**
 * Gallery Component Styles
 *
 * This file contains ALL gallery-related styles including:
 * - Gallery main layout and container
 * - Filter buttons with animations
 * - Gallery grid (responsive, mobile-first)
 * - Gallery items with hover effects and info overlays
 * - Skeleton loading states
 * - Error states
 * - Lightbox modal with image viewer and slider controls
 * - Status indicators (unavailable/sold dots)
 * - Inquire button
 *
 * Mobile-first approach:
 * - Base styles = mobile (320px+)
 * - @media (min-width: 769px) = tablet+
 * - @media (min-width: 1025px) = desktop
 */

/* ========================================
   GALLERY MAIN CONTAINER
   ======================================== */

.gallery-main {
    padding: 2rem 2rem 8rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* H2 hidden - styling kept for backwards compatibility if needed */
.gallery-main h2 {
    display: none;
}

/* ========================================
   GALLERY HEADER
   ======================================== */

.gallery-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.gallery-header h1 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 3rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.01em;
}

.gallery-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--secondary-text);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ========================================
   INQUIRY FAB (FLOATING ACTION BUTTON)
   Mobile-only quick access to favorites and contact
   ======================================== */

.inquiry-fab {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    z-index: var(--z-fixed, 100);
    display: none; /* Hidden by default, shown on mobile via media query */
}

@media (max-width: 768px) {
    .inquiry-fab {
        display: block;
    }
}

.inquiry-fab-main {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(139, 120, 93, 0.3),
                0 8px 24px rgba(139, 120, 93, 0.2);
    transition: all 0.3s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 2;
}

.inquiry-fab-main svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.inquiry-fab.expanded .inquiry-fab-main {
    background: var(--text-color);
    transform: scale(1.05);
}

.inquiry-fab.expanded .inquiry-fab-main svg {
    transform: rotate(45deg);
}

.inquiry-fab-main:active {
    transform: scale(0.95);
}

.inquiry-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: white;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    border: 2px solid var(--background-color);
    z-index: 3;
}

.inquiry-fab-options {
    position: absolute;
    bottom: 72px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 1;
}

.inquiry-fab.expanded .inquiry-fab-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.inquiry-fab-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    min-height: 44px;
}

.inquiry-fab-option:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: translateX(-4px) scale(1.02);
    box-shadow: 0 6px 16px rgba(139, 120, 93, 0.25),
                0 3px 8px rgba(139, 120, 93, 0.15);
}

.inquiry-fab-option:active {
    transform: translateX(-2px) scale(0.98);
}

.inquiry-fab-option svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Staggered animation for options */
.inquiry-fab.expanded .inquiry-fab-option:nth-child(1) {
    transition-delay: 0.05s;
}

.inquiry-fab.expanded .inquiry-fab-option:nth-child(2) {
    transition-delay: 0.1s;
}

/* Dark theme adjustments */
[data-theme="dark"] .inquiry-fab-option {
    background: rgba(50, 50, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .inquiry-fab-option:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

/* ========================================
   GALLERY FILTER
   ======================================== */

.gallery-filter {
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.gallery-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    background: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1),
        border-color var(--transition-normal) cubic-bezier(0.33, 0, 0.2, 1),
        color var(--transition-normal) cubic-bezier(0.33, 0, 0.2, 1),
        background-color var(--transition-normal) cubic-bezier(0.33, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

/* Premium lift effect on hover */
.filter-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow:
        0 6px 16px rgba(139, 120, 93, 0.18),
        0 3px 8px rgba(139, 120, 93, 0.1);
}

/* Press down effect */
.filter-btn:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 6px rgba(139, 120, 93, 0.12);
    transition-duration: 0.15s;
}

.filter-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    box-shadow:
        0 6px 18px rgba(139, 120, 93, 0.35),
        0 3px 8px rgba(139, 120, 93, 0.18);
    transform: scale(1.02);
}

.filter-btn.active:hover {
    transform: translateY(-3px) scale(1.03);
    background: var(--accent-color);
    color: white;
    box-shadow:
        0 8px 24px rgba(139, 120, 93, 0.4),
        0 4px 12px rgba(139, 120, 93, 0.22);
}

.filter-btn.active:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 4px 14px rgba(139, 120, 93, 0.32),
        0 2px 6px rgba(139, 120, 93, 0.16);
    transition-duration: 0.15s;
}

/* Filter count badge */
.filter-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(var(--text-rgb), 0.1);
    color: var(--secondary-text);
    transition: background-color 0.3s var(--ease-gentle),
                color 0.3s var(--ease-gentle);
}

.filter-btn:hover .filter-count {
    background: rgba(139, 120, 93, 0.15);
    color: var(--accent-color);
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Elegant focus state - subtle glow */
.filter-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--card-background),
        0 0 0 4px var(--accent-color),
        0 4px 12px rgba(139, 120, 93, 0.15);
}

/* ========================================
   SKELETON LOADING STATES
   ======================================== */

/* Wave pattern shimmer animation for better visual feedback */
@keyframes skeleton-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.05);
    min-height: 320px;
    aspect-ratio: 4/5; /* Match artwork card aspect ratio */
}

.skeleton-image {
    width: 100%;
    height: 280px;
    /* Wave pattern shimmer animation */
    background: linear-gradient(
        90deg,
        var(--card-background) 0%,
        var(--border-color) 20%,
        var(--card-background) 40%,
        var(--card-background) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s ease-in-out infinite;
}

.skeleton-info {
    padding: 1rem 1.5rem;
    background: var(--card-background);
}

.skeleton-title {
    width: 70%;
    height: 1.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--card-background) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 4px;
}

.skeleton-subtitle {
    width: 40%;
    height: 0.875rem;
    background: linear-gradient(90deg, var(--border-color) 25%, var(--card-background) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 4px;
}

/* Hide skeletons when gallery is loaded */
.gallery-loaded .skeleton-item {
    display: none;
}

/* ========================================
   ERROR STATE
   ======================================== */

.gallery-error {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
    color: var(--secondary-text);
}

.gallery-error p {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.gallery-error button {
    background: var(--button-color);
    color: var(--button-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.gallery-error button:hover {
    opacity: 0.9;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.gallery-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

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

.empty-state-icon {
    color: var(--secondary-text);
    opacity: 0.4;
    margin-bottom: 1.5rem;
}

.empty-state-icon svg {
    width: 64px;
    height: 64px;
}

.empty-state-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    letter-spacing: 0.01em;
}

.empty-state-message {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--secondary-text);
    margin: 0 0 2rem 0;
    max-width: 500px;
    line-height: 1.6;
}

.empty-state-button {
    margin-top: 0.5rem;
}

/* ========================================
   GALLERY GRID
   ======================================== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 4rem 4rem; /* Museum-quality generous spacing */
    grid-auto-flow: dense;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
    padding: 0 1rem;
}

/* Filter animation states - CSS-driven for performance */
.gallery-grid.filtering .gallery-item {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    contain: layout style paint;
}

.gallery-item.filtered-out {
    display: none !important;
}

/* Organic layout variations - creates natural asymmetry */
.gallery-item:nth-child(3n+1) {
    grid-row: span 1;
}

.gallery-item:nth-child(5n+2) {
    grid-column: span 1;
}

/* ========================================
   GALLERY ITEMS
   ======================================== */

.gallery-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 4px; /* Minimal gallery-style frame */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Museum frame border */
    background: var(--card-background);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.03),
        0 4px 16px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Inner highlight */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
    contain: layout style paint;
    will-change: transform;
}

.gallery-item:hover {
    transform: translateY(-12px); /* Dramatic museum lift */
    border-color: rgba(139, 120, 93, 0.2);
    box-shadow:
        0 8px 16px rgba(139, 120, 93, 0.12),
        0 16px 32px rgba(139, 120, 93, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.1),
        0 32px 64px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Elegant focus state - subtle glow instead of chunky outline */
.gallery-item:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--card-background),
        0 0 0 4px var(--accent-color),
        0 8px 24px rgba(139, 120, 93, 0.2),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

.gallery-item:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   Apple-style reveal on scroll
   Coordinates with AnimationManager.js
   ======================================== */

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

/*
 * Only hide elements marked as deferred (below viewport on page load).
 * Elements in viewport at load remain visible - no animation needed.
 * AnimationManager adds .animate-deferred to below-viewport elements.
 */
.gallery-item.animate-on-scroll.animate-deferred {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
}

/* Revealed state - triggered by IntersectionObserver when scrolled into view */
.gallery-item.animate-on-scroll.animate-deferred.is-visible {
    animation: scrollReveal 0.6s var(--ease-spring) forwards;
}

/* Staggered reveal - each item delays based on position for wave effect */
.gallery-item.animate-on-scroll.animate-deferred.is-visible:nth-child(4n+1) { animation-delay: 0ms; }
.gallery-item.animate-on-scroll.animate-deferred.is-visible:nth-child(4n+2) { animation-delay: 80ms; }
.gallery-item.animate-on-scroll.animate-deferred.is-visible:nth-child(4n+3) { animation-delay: 160ms; }
.gallery-item.animate-on-scroll.animate-deferred.is-visible:nth-child(4n+4) { animation-delay: 240ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .gallery-item.animate-on-scroll.animate-deferred {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .gallery-item.animate-on-scroll.animate-deferred.is-visible {
        animation: none;
    }
}

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease,
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* LQIP (Low-Quality Image Placeholder) styles */
.gallery-item img.lqip-loading {
    filter: blur(20px);
    transform: scale(1.1);
    will-change: filter, transform;
}

.gallery-item img.lqip-loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Subtle spotlight effect on hover - museum lighting */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, 0.03) 100%
    );
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.03); /* Refined scale for premium feel */
    filter: brightness(1.04) contrast(1.03) saturate(1.05); /* Museum-quality enhancement */
}

/* Image loading animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.image-loaded {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Gallery item info overlay */
.gallery-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.75) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    padding: 3rem 2rem 2rem 2rem; /* Museum-quality spacing */
    text-align: left;
    transform: translateY(32px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    z-index: 2;
}

.gallery-item:hover .gallery-item-info {
    opacity: 1;
    transform: translateY(0);
}

/* "View" indicator on hover - centered icon */
.gallery-item-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s var(--ease-gentle),
                transform 0.4s var(--ease-spring);
    z-index: 3;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
                0 8px 32px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.gallery-item-view svg {
    width: 24px;
    height: 24px;
    color: var(--text-color);
}

.gallery-item:hover .gallery-item-view {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-item:active .gallery-item-view {
    transform: translate(-50%, -50%) scale(0.95);
}

/* ========================================
   FAVORITES (HEART) BUTTON
   Save artwork to favorites with localStorage
   ======================================== */

.favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s var(--ease-gentle),
                transform 0.3s var(--ease-spring),
                background-color 0.3s var(--ease-gentle);
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item:hover .favorite-btn {
    opacity: 1;
    transform: scale(1);
}

.favorite-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.favorite-btn:active {
    transform: scale(0.95);
}

.favorite-btn svg {
    width: 20px;
    height: 20px;
    color: var(--secondary-text);
    transition: color 0.3s var(--ease-gentle),
                transform 0.3s var(--ease-spring);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.favorite-btn:hover svg {
    color: #e74c3c;
}

/* Favorited state - filled heart */
.favorite-btn.favorited svg {
    color: #e74c3c;
    fill: #e74c3c;
}

.favorite-btn.favorited:hover svg {
    transform: scale(1.1);
}

/* Heart beat animation on favorite */
@keyframes heartBeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.2); }
    60% { transform: scale(1); }
}

.favorite-btn.animating svg {
    animation: heartBeat 0.6s ease-in-out;
}

/* Always show favorite button for favorited items */
.gallery-item .favorite-btn.favorited {
    opacity: 1;
    transform: scale(1);
}

.favorite-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    opacity: 1;
}

/* Dark theme adjustments */
[data-theme="dark"] .favorite-btn {
    background: rgba(50, 50, 50, 0.9);
}

[data-theme="dark"] .favorite-btn:hover {
    background: rgba(70, 70, 70, 1);
}

[data-theme="dark"] .favorite-btn svg {
    color: var(--secondary-text);
}

.gallery-item-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.625rem;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.015em;
    line-height: 1.3;
}

.gallery-item-info p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    opacity: 0.92;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Scroll animation for gallery items - see 07-utilities.css */

/* ========================================
   STATUS INDICATORS
   ======================================== */

.unavailable-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: rgba(139, 120, 93, 0.7);
    border-radius: 50%;
    margin-left: 0.625rem;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 4px rgba(139, 120, 93, 0.15);
}

.sold-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    margin-left: 0.625rem;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 12px rgba(211, 47, 47, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 12px rgba(211, 47, 47, 0.6),
            0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.15);
        box-shadow:
            0 0 16px rgba(211, 47, 47, 0.8),
            0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

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

.lightbox {
    display: none;
    position: fixed;
    z-index: var(--z-lightbox);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.985); /* Ultra-deep museum backdrop */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(0px) saturate(110%);
    -webkit-backdrop-filter: blur(0px) saturate(110%);
}

/* Animated backdrop on open */
.lightbox.is-open {
    animation: backdropFadeIn 0.4s var(--ease-spring) forwards;
}

/* Animated backdrop on close */
.lightbox.is-closing {
    animation: backdropFadeOut 0.3s var(--ease-in-out-smooth) forwards;
}

/* Add noise to lightbox background */
.lightbox::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

.lightbox-content {
    background-color: var(--card-background);
    margin: auto;
    max-width: 1200px;
    width: 92vw;
    max-height: 92vh;
    display: flex;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.2),
        0 32px 64px rgba(0, 0, 0, 0.18),
        0 48px 96px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    position: relative;
    animation: contentSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; /* Museum-quality easing */
    border-radius: 8px; /* Minimal gallery frame */
    overflow: hidden;
    transition: background-color 0.4s ease;
    z-index: 2;
}

/* Closing animation for content */
.lightbox.is-closing .lightbox-content {
    animation: contentSlideDown 0.25s var(--ease-in-out-smooth) forwards;
}

/* Staggered caption element animations */
.lightbox.is-open #lightbox-title {
    animation: captionTitleIn 0.5s var(--ease-spring) 0.1s both;
}

.lightbox.is-open #lightbox-size,
.lightbox.is-open #lightbox-materials {
    animation: captionMetaIn 0.45s var(--ease-spring) 0.15s both;
}

.lightbox.is-open #lightbox-description {
    animation: captionMetaIn 0.45s var(--ease-spring) 0.2s both;
}

.lightbox.is-open .lightbox-price,
.lightbox.is-open .artwork-availability {
    animation: captionMetaIn 0.4s var(--ease-spring) 0.25s both;
}

.lightbox.is-open .inquire-btn {
    animation: buttonReveal 0.4s var(--ease-bounce) 0.3s both;
}

.lightbox.is-open .slider-btn {
    animation: buttonReveal 0.35s var(--ease-spring) 0.2s both;
}

/* ========================================
   APPLE-LEVEL ANIMATION SYSTEM
   Choreographed, physics-based animations
   ======================================== */

/* Spring easing curves */
:root {
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Backdrop fade with blur */
@keyframes backdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px) saturate(100%);
        -webkit-backdrop-filter: blur(0px) saturate(100%);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(32px) saturate(120%); /* More luxurious blur */
        -webkit-backdrop-filter: blur(32px) saturate(120%);
    }
}

@keyframes backdropFadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(32px) saturate(120%);
        -webkit-backdrop-filter: blur(32px) saturate(120%);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px) saturate(100%);
        -webkit-backdrop-filter: blur(0px) saturate(100%);
    }
}

/* Content rises with spring physics */
@keyframes contentSlideUp {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(24px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

/* Staggered caption animations */
@keyframes captionTitleIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.lightbox-image-container {
    position: relative;
    max-width: 60%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spotlight effect for private viewing atmosphere - museum lighting */
.lightbox-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(0, 0, 0, 0.4) 75%,
            rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.8;
}

.lightbox-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: grab;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

#lightbox-img:active {
    cursor: grabbing;
}

/* Cross-fade transition for image navigation - refined */
#lightbox-img.fading-out {
    opacity: 0.2;
    transform: scale(0.97);
}

/* Lightbox Video */
.lightbox-video {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

/* Gallery Video (thumbnail/preview) */
.gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video indicator badge on gallery items */
.gallery-item.has-video::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Play icon using CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-item.has-video:hover::after {
    opacity: 1;
    transform: scale(1.1);
}

/* ========================================
   ZOOM INDICATOR
   ======================================== */

.zoom-indicator {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 140px;
}

.zoom-indicator.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.zoom-level {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.zoom-hint {
    font-size: 0.75rem;
    opacity: 0.85;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ========================================
   LIGHTBOX LOADING INDICATOR
   ======================================== */

.lightbox-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.lightbox-loader.visible {
    opacity: 1;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   GESTURE HINT OVERLAY
   ======================================== */

.gesture-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.gesture-hint.visible {
    opacity: 1;
    pointer-events: auto;
}

.gesture-hint-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: white;
    text-align: center;
}

.gesture-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.gesture-item svg {
    opacity: 0.9;
}

/* ========================================
   LIGHTBOX SLIDER CONTROLS
   ======================================== */

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
}

.lightbox-image-container:hover .slider-btn {
    opacity: 0.85;
}

.slider-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

.slider-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.15);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 12px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.slider-btn:active {
    transform: translateY(-50%) scale(1.08);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.slider-btn svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.slider-btn-prev {
    left: 1rem;
}

.slider-btn-next {
    right: 1rem;
}

/* Dim navigation buttons when zoomed (swipe disabled) */
.slider-btn.disabled-by-zoom {
    opacity: 0.2 !important;
    pointer-events: none;
    transform: translateY(-50%) scale(0.9);
}

.slider-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    z-index: 10;
    display: none;
}

/* ========================================
   LIGHTBOX IMAGE COUNTER
   Shows "3 of 24" style indicator
   ======================================== */

.lightbox-counter {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    z-index: 10;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s var(--ease-gentle),
                transform 0.4s var(--ease-spring);
}

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

.lightbox-counter-current {
    font-weight: 600;
}

.lightbox-counter-separator {
    margin: 0 0.25rem;
    opacity: 0.6;
}

.lightbox-counter-total {
    opacity: 0.8;
}

/* ========================================
   LIGHTBOX THUMBNAIL STRIP
   Bottom navigation thumbnails
   ======================================== */

.lightbox-thumbnails {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s var(--ease-gentle),
                transform 0.4s var(--ease-spring);
    z-index: 10;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
    display: none;
}

.lightbox-image-container:hover .lightbox-thumbnails {
    opacity: 1;
    transform: translateY(0);
}

.lightbox-thumbnail {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.3s var(--ease-gentle),
                border-color 0.3s var(--ease-gentle),
                transform 0.3s var(--ease-spring);
}

.lightbox-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-thumbnail:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.lightbox-thumbnail.active {
    opacity: 1;
    border-color: white;
}

.lightbox-thumbnail:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ========================================
   LIGHTBOX SHARE BUTTON
   ======================================== */

.lightbox-share-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s var(--ease-gentle),
                transform 0.3s var(--ease-spring),
                background-color 0.3s var(--ease-gentle);
    z-index: 10;
}

.lightbox-image-container:hover .lightbox-share-btn {
    opacity: 0.8;
    transform: scale(1);
}

.lightbox-share-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.lightbox-share-btn:active {
    transform: scale(0.95);
}

.lightbox-share-btn svg {
    width: 20px;
    height: 20px;
}

.lightbox-share-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Share tooltip */
.share-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lightbox-share-btn.copied .share-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   LIGHTBOX CAPTION AREA
   ======================================== */

#lightbox-caption {
    padding: 4rem 3.5rem 3rem 4rem;
    width: 40%;
    overflow-y: auto;
    text-align: left;
    color: var(--text-color);
    transition: color 0.3s ease;
    position: relative;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.01) 0%,
        transparent 100%
    );
}

/* Add refined texture to caption area */
#lightbox-caption::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.012'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

#lightbox-caption > * {
    position: relative;
    z-index: 1;
}

#lightbox-title {
    font-size: 2.5rem;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    margin: 0 0 2rem 0;
    color: var(--text-color);
    letter-spacing: 0.02em;
    line-height: 1.25;
}

#lightbox-size,
#lightbox-materials {
    margin: 0 0 0.75rem 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--accent-color);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    opacity: 0.8;
}

#lightbox-description {
    margin: 2.5rem 0 2rem 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--secondary-text);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

.lightbox-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-color);
    margin: 0.5rem 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.lightbox-price:empty {
    display: none;
}

.lightbox-price.hidden {
    display: none;
}

/* ========================================
   PRINTS AVAILABILITY BADGE
   ======================================== */

.prints-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #4caf50;
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 1rem 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.prints-badge svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.prints-badge.hidden {
    display: none;
}

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

.lightbox-notes {
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.lightbox-note {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin: 0.5rem 0;
    font-style: italic;
}

/* ========================================
   LIGHTBOX CLOSE BUTTON (Mobile only - hidden on desktop)
   ======================================== */

.close-lightbox {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--text-rgb), 0.08);
    border: 1.5px solid rgba(var(--text-rgb), 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.close-lightbox svg {
    width: 22px;
    height: 22px;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.close-lightbox:hover {
    background: rgba(var(--text-rgb), 0.15);
    border-color: rgba(var(--text-rgb), 0.25);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.close-lightbox:hover svg {
    transform: rotate(90deg);
}

.close-lightbox:active {
    transform: scale(0.98);
}

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

/* ========================================
   INQUIRE BUTTON
   ======================================== */

.inquire-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 2.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    cursor: pointer;
    border: none;
    line-height: 1;
    background: var(--button-color);
    color: var(--button-text);
    box-shadow: 0 4px 12px rgba(139, 120, 93, 0.25),
                0 8px 24px rgba(139, 120, 93, 0.15);
    width: 100%;
    margin-top: 1rem;
}

.inquire-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

.inquire-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(139, 120, 93, 0.3),
                0 12px 32px rgba(139, 120, 93, 0.2);
    background: var(--button-color-hover);
}

.inquire-btn:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 12px rgba(139, 120, 93, 0.2);
}

/* ========================================
   DESKTOP FULL-SCREEN GALLERY VIEW
   Replaces modal with immersive 65/35 split layout
   ======================================== */

@media (min-width: 769px) {
    /* Transform lightbox from modal to full-screen view */
    .lightbox {
        background-color: var(--background-color);
    }

    /* Remove noise texture on desktop full-screen */
    .lightbox::before {
        display: none;
    }

    .lightbox-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        animation: none;
        flex-direction: row;
    }

    .lightbox.is-closing .lightbox-content {
        animation: none;
    }

    /* Image container takes 65% width */
    .lightbox-image-container {
        max-width: 65%;
        width: 65%;
        height: 100vh;
        background-color: #0a0a0a;
    }

    /* Reduce spotlight intensity for full-screen */
    .lightbox-image-container::after {
        background: radial-gradient(ellipse at center,
                transparent 40%,
                rgba(0, 0, 0, 0.15) 70%,
                rgba(0, 0, 0, 0.3) 100%);
    }

    .lightbox-image-wrapper {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    #lightbox-img {
        max-height: 100vh;
        max-width: 100%;
        object-fit: contain;
    }

    /* Caption/details sidebar takes 35% width */
    #lightbox-caption {
        width: 35%;
        height: 100vh;
        padding: 3rem 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
    }

    /* Hide X close button on desktop, use Back to Gallery instead */
    .close-lightbox {
        display: none;
    }

    /* Back to Gallery button styling */
    .back-to-gallery {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
        padding: 0.75rem 0;
        background: transparent;
        border: none;
        color: var(--accent-color);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: all 0.2s ease;
        align-self: flex-start;
    }

    .back-to-gallery:hover {
        color: var(--text-color);
        transform: translateX(-4px);
    }

    .back-to-gallery:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 4px;
        border-radius: 4px;
    }

    .back-to-gallery svg {
        width: 18px;
        height: 18px;
        transition: transform 0.2s ease;
    }

    .back-to-gallery:hover svg {
        transform: translateX(-2px);
    }

    /* Slider navigation adjustments for full-screen */
    .slider-btn {
        width: 56px;
        height: 56px;
    }

    .slider-btn-prev {
        left: 1.5rem;
    }

    .slider-btn-next {
        right: 1.5rem;
    }

    /* Slider indicator positioning */
    .slider-indicator {
        bottom: 1.5rem;
    }

    /* Gallery grid for desktop/tablet */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2.5rem 2rem;
        grid-auto-flow: row;
        align-items: start;
    }

    .gallery-item {
        width: 100%;
        height: auto;
        align-self: start;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* Hide back button on mobile (using X close instead) */
@media (max-width: 768px) {
    .back-to-gallery {
        display: none;
    }
}

/* Tablet: Gallery grid - 2 columns for better layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }
}

/* ========================================
   MOBILE BREAKPOINT (max-width: 768px)
   ======================================== */

@media (max-width: 768px) {
    .gallery-main {
        padding: 1.5rem 0 2rem;
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .gallery-main h2 {
        display: none;
    }

    /* Gallery Header Mobile Styles - Compact for more artwork visibility */
    .gallery-header {
        margin-bottom: 1rem;
        padding: 0 1rem;
    }

    .gallery-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .gallery-tagline {
        font-size: 0.8rem;
        opacity: 0.85;
    }

    /* Gallery Filter Mobile Styles */
    .gallery-filter {
        margin-bottom: 1rem;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
    }

    .gallery-filter::-webkit-scrollbar {
        display: none;
    }

    /* Scroll indicator - enhanced gradient fade on right edge for better visibility */
    .gallery-filter::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 64px;
        background: linear-gradient(to right, transparent 0%, var(--background-color) 75%);
        pointer-events: none;
        opacity: 1;
        z-index: 2;
    }

    /* Filter scroll hint - shows on first visit */
    .gallery-filter-scroll-hint {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-color);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        pointer-events: none;
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0.85;
        z-index: 3;
        animation: filterScrollHint 2s ease-in-out infinite;
        transition: opacity 0.3s ease;
    }

    .gallery-filter-scroll-hint.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .gallery-filter-scroll-hint svg {
        width: 16px;
        height: 16px;
    }

    /* Bouncing arrow animation for scroll hint */
    @keyframes filterScrollHint {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
            opacity: 0.7;
        }
        50% {
            transform: translateY(-50%) translateX(6px);
            opacity: 1;
        }
    }

    .gallery-filter-buttons {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0 1rem 0 1rem;
        padding-right: 2rem; /* Extra space for scroll fade */
        min-width: max-content;
        gap: 0.5rem;
        scroll-snap-type: x mandatory;
    }

    .filter-btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-sm);
        min-height: 44px; /* WCAG 2.1 AA touch target */
        scroll-snap-align: start;
    }

    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem 1rem 4rem;
        width: 100%;
        box-sizing: border-box;
    }

    .gallery-item {
        width: 100%;
        height: auto;
        aspect-ratio: 4/5;
        position: relative;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        opacity: 1;
        transform: none;
        display: block;
        max-width: 100%;
    }

    /* Elegant tap feedback */
    .gallery-item:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 16px;
        max-width: 100%;
        max-height: 100%;
    }

    /* Always show gallery info on mobile since hover doesn't work */
    .gallery-item-info {
        opacity: 1;
        transform: translateY(0);
        padding: 1.5rem 1rem 1rem;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.5) 50%,
                transparent 100%);
    }

    .gallery-item-info h3 {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .gallery-item-info p {
        font-size: 0.8rem;
    }

    /* Mobile skeleton styles */
    .skeleton-item {
        width: 100%;
        aspect-ratio: 4/5;
        border-radius: 16px;
        min-height: auto;
        max-width: 100%;
        display: block;
    }

    .skeleton-image {
        height: 100%;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    /* ========================================
       MOBILE BOTTOM SHEET LIGHTBOX
       iOS-style modal rising from bottom
       ======================================== */

    .lightbox {
        align-items: flex-end;
    }

    /* Bottom sheet container */
    .lightbox-content {
        flex-direction: column;
        max-height: 95vh;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 24px 24px 0 0;
        animation: bottomSheetSlideUp 0.4s var(--ease-spring) forwards;
    }

    /* Closing animation - slide down */
    .lightbox.is-closing .lightbox-content {
        animation: bottomSheetSlideDown 0.3s var(--ease-in-out-smooth) forwards;
    }

    @keyframes bottomSheetSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes bottomSheetSlideDown {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(100%);
        }
    }

    /* Drag handle indicator */
    .lightbox-content::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 5px;
        background: rgba(var(--text-rgb), 0.2);
        border-radius: 3px;
        z-index: 20;
    }

    .lightbox-image-container {
        max-width: 100%;
        max-height: 55vh;
        min-height: 40vh;
        border-radius: 16px 16px 0 0;
    }

    /* Remove spotlight effect on mobile for cleaner look */
    .lightbox-image-container::after {
        display: none;
    }

    #lightbox-img,
    .lightbox-video {
        max-width: 100%;
        max-height: 55vh;
    }

    #lightbox-caption {
        width: auto;
        padding: 1.5rem 1.5rem 2rem;
        max-height: 40vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Show subtle scroll indicator */
        scrollbar-width: thin;
        scrollbar-color: rgba(139, 120, 93, 0.4) transparent;
        /* Safe area padding for notched devices */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
    }

    /* Compact caption title on mobile */
    #lightbox-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    #lightbox-size,
    #lightbox-materials {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }

    #lightbox-description {
        font-size: 0.9rem;
        margin: 1rem 0;
        line-height: 1.6;
    }

    .lightbox-price {
        font-size: 1.125rem;
    }

    /* Webkit scroll indicator for mobile */
    #lightbox-caption::-webkit-scrollbar {
        width: 4px;
    }

    #lightbox-caption::-webkit-scrollbar-track {
        background: transparent;
    }

    #lightbox-caption::-webkit-scrollbar-thumb {
        background: rgba(139, 120, 93, 0.4);
        border-radius: 2px;
    }

    /* Scroll fade hint at bottom */
    #lightbox-caption::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: linear-gradient(to top, var(--card-background) 0%, transparent 100%);
        pointer-events: none;
        display: block;
        margin-top: -30px;
    }

    /* Close button - top right of sheet */
    .close-lightbox {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        background: rgba(var(--text-rgb), 0.08);
        border: none;
    }

    .close-lightbox svg {
        width: 20px;
        height: 20px;
    }

    .close-lightbox:hover {
        background: rgba(var(--text-rgb), 0.15);
        transform: scale(1.05);
    }

    /* Slider buttons - more compact */
    .slider-btn {
        width: 44px;
        height: 44px;
        opacity: 0.8;
    }

    .slider-btn svg {
        width: 18px;
        height: 18px;
    }

    .slider-btn-prev {
        left: 8px;
    }

    .slider-btn-next {
        right: 8px;
    }

    /* Inquire button - full width */
    .inquire-btn {
        margin-top: 1rem;
        padding: 0.875rem 1.5rem;
    }

    /* Zoom indicator mobile adjustments */
    .zoom-indicator {
        padding: 0.625rem 1rem;
        min-width: 120px;
    }

    .zoom-level {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }

    .zoom-hint {
        font-size: 0.7rem;
    }
}

/* ========================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    .gallery-main:not(.infinite-scroll-mode) {
        padding: 7rem 0 2rem;
    }
}

/* ========================================
   INFINITE SCROLL GALLERY (MOBILE ONLY)
   iOS/TikTok-style vertical scrolling experience
   ======================================== */

/* Base styles - hidden by default, shown only on mobile */
.gallery-infinite {
    display: none;
}

/* Hide existing gallery elements when infinite scroll is active */
.gallery-main.infinite-scroll-mode .gallery-header,
.gallery-main.infinite-scroll-mode .gallery-filter,
.gallery-main.infinite-scroll-mode .gallery-grid {
    display: none !important;
}

/* Reset gallery-main constraints for infinite scroll mode */
.gallery-main.infinite-scroll-mode {
    --header-height: 48px; /* Mobile header height with 0.5rem padding - measured */
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
    z-index: 50 !important;
}

@media (max-width: 768px) {
    /* Show infinite scroll container on mobile */
    .gallery-main.infinite-scroll-mode .gallery-infinite {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0;
        width: 100vw !important;
        height: 100%;
        min-height: 100%; /* Fallback for height inheritance */
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gallery-main.infinite-scroll-mode .gallery-infinite::-webkit-scrollbar {
        display: none;
    }

    /* Each artwork fills viewport - MUST use height not min-height for absolute children */
    .gallery-infinite-item {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--background-color);
        overflow: hidden;
    }

    /* Image container - MUST have explicit width/height for absolute positioning to work */
    .gallery-infinite-item-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .gallery-infinite-item img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
        transition: transform 0.3s var(--ease-spring);
        transform-origin: center center;
    }

    /* Zoomed state for images */
    .gallery-infinite-item.zoomed img {
        pointer-events: auto;
        cursor: grab;
    }

    .gallery-infinite-item.zoomed img:active {
        cursor: grabbing;
    }

    /* Hide overlay when zoomed */
    .gallery-infinite-item.zoomed .gallery-infinite-overlay {
        opacity: 0;
        pointer-events: none;
    }

    /* Zoom indicator */
    .gallery-infinite-zoom-indicator {
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: white;
        padding: 0.6rem 1rem;
        border-radius: 20px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        z-index: 15;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        text-align: center;
        letter-spacing: 0.02em;
    }

    .gallery-infinite-zoom-indicator.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Horizontal swipe container for multiple images */
    .gallery-infinite-slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .gallery-infinite-slider::-webkit-scrollbar {
        display: none;
    }

    .gallery-infinite-slider-item {
        flex: 0 0 100vw;
        width: 100vw !important;
        min-width: 100vw !important;
        height: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery-infinite-slider-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Swipe indicator dots */
    .gallery-infinite-dots {
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
        pointer-events: none;
    }

    .gallery-infinite-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transition: all 0.3s ease;
    }

    .gallery-infinite-dot.active {
        background: rgba(255, 255, 255, 0.9);
        width: 8px;
        height: 8px;
    }

    /* Minimal overlay at bottom - clickable for "Tap for details" */
    .gallery-infinite-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.5rem 1.5rem 2rem;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.5) 60%,
                transparent 100%);
        z-index: 5;
        pointer-events: auto; /* Clickable to open details */
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    /* Tap anywhere to toggle overlay visibility */
    .gallery-infinite-item.overlay-hidden .gallery-infinite-overlay {
        opacity: 0;
    }

    .gallery-infinite-overlay-title {
        font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        font-size: 1.75rem;
        font-weight: 600;
        color: #fff;
        margin: 0 0 0.5rem 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        letter-spacing: 0.01em;
    }

    .gallery-infinite-overlay-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .gallery-infinite-overlay-price {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 1.125rem;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .gallery-infinite-overlay-action {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        letter-spacing: 0.02em;
    }

    /* Active tap state for overlay feedback */
    .gallery-infinite-overlay:active {
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.6) 60%,
                transparent 100%);
    }

    /* Expanded details card */
    .gallery-infinite-details {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        background: var(--card-background);
        border-radius: 24px 24px 0 0;
        padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
        z-index: 1000;
        transform: translateY(100%);
        transition: transform 0.4s var(--ease-spring);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
    }

    .gallery-infinite-details.visible {
        transform: translateY(0);
    }

    /* Drag handle */
    .gallery-infinite-details::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 5px;
        background: rgba(var(--text-rgb), 0.2);
        border-radius: 3px;
    }

    .gallery-infinite-details-title {
        font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        font-size: 2rem;
        font-weight: 600;
        color: var(--text-color);
        margin: 0 0 1rem 0;
        letter-spacing: 0.01em;
    }

    .gallery-infinite-details-meta {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: var(--accent-color);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 500;
        margin: 0 0 0.5rem 0;
        opacity: 0.85;
    }

    .gallery-infinite-details-description {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: var(--secondary-text);
        font-size: 0.95rem;
        line-height: 1.7;
        margin: 1.5rem 0;
    }

    .gallery-infinite-details-price {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--accent-color);
        margin: 1rem 0;
    }

    .gallery-infinite-details-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .gallery-infinite-btn {
        flex: 1;
        padding: 0.875rem 1.5rem;
        border-radius: var(--radius-sm);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 500;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        border: none;
        transition: all var(--transition-normal) var(--ease-smooth);
        min-height: 44px;
    }

    .gallery-infinite-btn-primary {
        background: var(--button-color);
        color: var(--button-text);
        box-shadow: 0 2px 8px rgba(139, 120, 93, 0.2);
    }

    .gallery-infinite-btn-primary:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(139, 120, 93, 0.15);
    }

    .gallery-infinite-btn-secondary {
        background: transparent;
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }

    .gallery-infinite-btn-secondary:active {
        transform: scale(0.98);
        background: var(--border-color);
    }

    /* Backdrop overlay when details open */
    .gallery-infinite-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .gallery-infinite-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Sold indicator - positioned at bottom near overlay for less visual interference */
    .gallery-infinite-sold {
        position: absolute;
        bottom: 5.5rem; /* Above the overlay */
        right: 1rem;
        background: rgba(211, 47, 47, 0.9);
        color: white;
        padding: 0.4rem 0.875rem;
        border-radius: 16px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Progress indicator - "Artwork X of Y" */
    .gallery-infinite-progress {
        position: fixed;
        top: calc(var(--header-height, 48px) + 12px);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        z-index: 150;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        opacity: 0.9;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .gallery-infinite-progress-current {
        font-weight: 600;
        color: var(--accent-color, #8b785d);
    }

    /* Back to Grid View button */
    .gallery-infinite-back {
        position: fixed;
        top: calc(var(--header-height, 48px) + 12px);
        left: 12px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 150;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        transition: all 0.3s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
    }

    .gallery-infinite-back:active {
        transform: scale(0.95);
        background: rgba(0, 0, 0, 0.85);
    }

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

    .gallery-infinite-back:focus-visible {
        outline: 2px solid white;
        outline-offset: 2px;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .gallery-infinite {
            scroll-behavior: auto;
            scroll-snap-type: none;
        }

        .gallery-infinite-slider {
            scroll-behavior: auto;
        }

        .gallery-infinite-details {
            transition: none;
        }

        .gallery-infinite-backdrop {
            transition: none;
        }
    }
}
/**
 * 05-buttons.css
 * Button Styles and Variants
 *
 * Includes:
 * - Primary and secondary buttons
 * - Large button variants
 * - Text buttons
 * - Button states (hover, focus, active)
 */

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn-primary,
.btn-secondary,
.btn-primary-large,
.btn-secondary-large,
.submit-btn,
.inquire-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 2.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    transition: transform var(--transition-normal) var(--ease-spring),
                box-shadow var(--transition-normal) var(--ease-gentle),
                background-color var(--transition-normal) var(--ease-gentle);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    border: none;
    line-height: 1;
}

/* Focus states for accessibility - WCAG 2.1 AA Compliant */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-primary-large:focus-visible,
.btn-secondary-large:focus-visible,
.submit-btn:focus-visible,
.inquire-btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px rgba(139, 120, 93, 0.2);
}

/* Remove outline for mouse users */
.btn-primary:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.btn-primary-large:focus:not(:focus-visible),
.btn-secondary-large:focus:not(:focus-visible),
.submit-btn:focus:not(:focus-visible),
.inquire-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Dark theme focus indicators */
[data-theme="dark"] .btn-primary:focus-visible,
[data-theme="dark"] .btn-secondary:focus-visible,
[data-theme="dark"] .btn-primary-large:focus-visible,
[data-theme="dark"] .btn-secondary-large:focus-visible,
[data-theme="dark"] .submit-btn:focus-visible,
[data-theme="dark"] .inquire-btn:focus-visible {
    outline-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(139, 120, 93, 0.3);
}

/* Primary button variants - Premium Style */
.btn-primary,
.btn-primary-large,
.submit-btn,
.inquire-btn {
    background: var(--button-color);
    color: var(--button-text);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* Ripple effect base */
.btn-primary::before,
.btn-primary-large::before,
.submit-btn::before,
.inquire-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-out-back), height 0.6s var(--ease-out-back);
}

.btn-primary:hover,
.btn-primary-large:hover,
.submit-btn:hover,
.inquire-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-button-hover);
    background: var(--button-color-hover);
}

.btn-primary:hover::before,
.btn-primary-large:hover::before,
.submit-btn:hover::before,
.inquire-btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:active,
.btn-primary-large:active,
.submit-btn:active,
.inquire-btn:active {
    transform: translateY(-1px) scale(1.01);
    transition-duration: 0.1s;
}

/* Secondary button variants - Premium Style */
.btn-secondary,
.btn-secondary-large {
    background-color: transparent;
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    box-shadow: inset 0 0 0 1px transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Animated border glow on hover */
.btn-secondary::before,
.btn-secondary-large::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--accent-color), var(--accent-gold), var(--accent-champagne));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s var(--ease-gentle);
}

.btn-secondary:hover,
.btn-secondary-large:hover {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color: var(--background-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover::before,
.btn-secondary-large:hover::before {
    opacity: 0.15;
}

.btn-secondary:active,
.btn-secondary-large:active {
    transform: translateY(-1px) scale(1.01);
    transition-duration: 0.1s;
}

/* Large button variants */
.btn-primary-large,
.btn-secondary-large {
    padding: 1.375rem 3rem;
    font-size: 0.9375rem;
    letter-spacing: 0.18em;
}

/* Text button */
.btn-text {
    padding: 0.5rem 1rem;
    color: var(--accent-color);
    background: none;
    text-transform: none;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.btn-text:hover {
    transform: translateX(5px);
}

.btn-text:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: 4px;
}

.btn-text:focus:not(:focus-visible) {
    outline: none;
}
/**
 * 06-footer.css
 * Footer Component Styles
 *
 * Includes:
 * - Site footer layout and structure
 * - Footer sections (brand, navigation, social)
 * - Footer bottom bar
 * - Responsive footer layouts
 */

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

.site-footer {
  background-color: var(--card-background);
  border-top: 1px solid var(--border-color);
  margin-top: 6rem; /* More premium spacing */
  padding: 4.5rem 0 2.5rem; /* Increased breathing room */
  font-size: 0.95rem;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem; /* More luxurious spacing between sections */
  margin-bottom: 3rem;
}

/* Footer sections */
.footer-section h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.footer-section h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.footer-section p {
  color: var(--secondary-text);
  line-height: 1.6;
  margin: 0;
}

/* Footer Brand Section */
.footer-brand {
  grid-column: span 1;
}

/* Footer Navigation */
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 0.75rem;
}

.footer-nav a {
  color: var(--secondary-text);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: inline-block;
  position: relative;
  padding-left: 0;
}

.footer-nav a::before {
  content: '→';
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--accent-color);
  transform: translateX(6px);
  font-weight: 500;
}

.footer-nav a:hover::before,
.footer-nav a:focus::before {
  opacity: 1;
  left: -18px;
}

/* Footer Social Link - Premium Styling */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--secondary-text);
  text-decoration: none;
  padding: 0.75rem 1rem 0.75rem 0;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-radius: var(--radius-sm);
  position: relative;
}

.footer-social-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-social-link:hover::before,
.footer-social-link:focus::before {
  width: 100%;
}

.footer-social-link:hover,
.footer-social-link:focus {
  color: var(--accent-color);
  transform: translateY(-3px);
  padding-left: 0.5rem;
}

.footer-social-link svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-social-link:hover svg {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 2px 4px rgba(139, 120, 93, 0.3));
}

/* Footer Email Link */
.footer-email-link {
  margin-bottom: 0.75rem;
}

.footer-connect .footer-social-link + .footer-social-link {
  margin-top: 0.5rem;
}

/* Footer Bottom */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.footer-bottom p {
  color: var(--secondary-text);
  font-size: 0.875rem;
  margin: 0;
}

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

/* Mobile: Single column layout */
@media (max-width: 768px) {
  .site-footer {
    padding: 2rem 0 1rem;
    margin-top: 3rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }

  .footer-brand {
    grid-column: span 1;
    text-align: center;
  }

  .footer-nav,
  .footer-connect {
    text-align: center;
  }

  .footer-social-link {
    justify-content: center;
    min-height: 44px; /* Touch-friendly target */
    padding: 0.75rem 1rem;
  }

  .footer-nav a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 0.5rem;
  }

  .footer-bottom {
    padding: 1.5rem 1.5rem 0;
  }
}

/* Tablet: 2 column layout */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: span 2;
    text-align: center;
  }
}

/* Ensure main content has proper spacing from footer */
main {
  min-height: calc(100vh - 200px);
}
/**
 * 07-utilities.css
 * Utility Classes and Helper Styles
 *
 * Includes:
 * - Scroll to top button
 * - Scroll animations (animate-on-scroll)
 * - Scroll indicator
 * - Sold marker dot
 * - Animation keyframes
 */

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: var(--accent-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(139, 120, 93, 0.3);
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--text-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 120, 93, 0.4);
}

.scroll-to-top:active {
  transform: translateY(-2px);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* Hide on desktop (mobile-only) */
@media (min-width: 769px) {
  .scroll-to-top {
    display: none;
  }
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */

/* Desktop scroll animations - only for elements entering viewport AFTER load */
@media (min-width: 769px) {
    /* Initially all visible - no delay */
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

    /* Only elements marked for deferred animation get the effect */
    .animate-on-scroll.animate-deferred {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .animate-on-scroll.animate-deferred.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Mobile: no scroll animations */
@media (max-width: 768px) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Mobile: hide and disable animation */
@media (max-width: 768px) {
    .scroll-indicator {
        display: none;
        animation: none;
    }
}

/* ========================================
   SOLD MARKER (RED DOT)
   ======================================== */

.sold-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d32f2f;
  margin-left: 0.5rem;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(211, 47, 47, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}
/* ========================================
   08 - HERO SECTION
   Fullscreen hero with background image, gradients, and CTA
   ======================================== */

.hero-fullscreen {
    position: relative;
    width: 100%;
    height: 100vh; /* fallback */
    height: 100dvh;
    min-height: 600px;
    max-height: 100vh;
    max-height: 100dvh;
    /* Prevent Safari overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Safari-specific fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    min-height: 600px;
    max-height: 100vh;
    max-height: 100dvh;
    object-fit: cover;
    /* Fixed focal point on artist's face (60% from left, 30% from top) */
    object-position: 60% 30%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
    /* Premium Ken Burns effect - subtle zoom and pan */
    animation: kenBurns 30s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.08) translate(-1%, -1%);
    }
}

/* Gradient overlay on hero image - right fade on desktop */
@media (min-width: 769px) {
    .hero-bg-image::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to left, var(--background-color) 0%, transparent 100%);
        pointer-events: none;
    }
}

/* Gradient overlay on hero image - bottom fade on mobile */
@media (max-width: 768px) {
    .hero-bg-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, var(--background-color) 0%, transparent 100%);
        pointer-events: none;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Enhanced gradient overlay with subtle vignette effect */
    background:
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 60%,
            rgba(0, 0, 0, 0.4) 100%),
        radial-gradient(ellipse at center bottom,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.35) 40%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.05) 100%);
}

/* Top gradient for smooth header transition */
.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom,
            rgba(43, 45, 48, 0.6) 0%,
            rgba(43, 45, 48, 0.3) 50%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

[data-theme="light"] .hero-overlay {
    background:
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.15) 60%,
            rgba(0, 0, 0, 0.3) 100%),
        radial-gradient(ellipse at center bottom,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.25) 40%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.03) 100%);
}

[data-theme="light"] .hero-overlay::before {
    background: linear-gradient(to bottom,
            rgba(248, 248, 248, 0.5) 0%,
            rgba(248, 248, 248, 0.2) 50%,
            transparent 100%);
}

[data-theme="dark"] .hero-overlay {
    background:
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.25) 60%,
            rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(to bottom,
            rgba(43, 45, 48, 0.85) 0%,
            rgba(43, 45, 48, 0.55) 25%,
            rgba(43, 45, 48, 0.25) 50%,
            rgba(43, 45, 48, 0.08) 75%,
            transparent 100%);
}

/* Hero Specific Button Overrides - Premium Styling */
.hero-cta .btn-primary {
    background-color: var(--button-color);
    color: #ffffff;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(139, 120, 93, 0.2);
    border: none;
    font-weight: 600;
    transition:
        transform 0.4s var(--ease-premium),
        box-shadow 0.4s var(--ease-premium),
        background-color 0.3s var(--ease-premium);
}

.hero-cta .btn-primary:hover {
    background-color: #6F6049;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(139, 120, 93, 0.25);
}

.hero-cta .btn-secondary {
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.4s var(--ease-premium),
        background-color 0.3s var(--ease-premium),
        border-color 0.3s var(--ease-premium),
        box-shadow 0.4s var(--ease-premium);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.hero-cta .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    padding: 2rem;
    width: 100%;
    /* Ensure proper rendering in Safari */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Subtle parallax effect on scroll */
    transition: transform 0.3s var(--ease-premium);
    will-change: transform;
}

.hero-title {
    font-size: 0;
    letter-spacing: 0;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
}

.hero-name {
    display: block;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.4em;
    font-weight: 300;
    margin-bottom: 0.75rem;
    /* Premium text depth with layered shadows */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 16px 32px rgba(0, 0, 0, 0.15);
    /* Staggered reveal animation */
    opacity: 0;
    transform: translateY(30px);
    animation: revealText 1.2s var(--ease-elegant) 0.3s forwards;
}

.hero-subtitle {
    display: block;
    font-size: clamp(2rem, 6vw, 5rem);
    letter-spacing: 0.25em;
    font-weight: 300;
    position: relative;
    padding-bottom: 2rem;
    /* Premium text depth with enhanced shadows */
    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 20px 40px rgba(0, 0, 0, 0.2);
    /* Staggered reveal animation - appears after name */
    opacity: 0;
    transform: translateY(30px);
    animation: revealText 1.2s var(--ease-elegant) 0.7s forwards;
}

/* Elegant text reveal animation */
@keyframes revealText {
    0% {
        opacity: 0;
        transform: translateY(30px);
        clip-path: inset(0 0 100% 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Artistic handdrawn underline under BRANCHSTONE */
.hero-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 10%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.3) 90%,
            transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: drawLine 1.5s var(--ease-premium) 1.3s forwards;
}

@keyframes drawLine {
    from {
        width: 0%;
        opacity: 0;
    }

    to {
        width: 90%;
        opacity: 0.7;
    }
}

.hero-tagline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    color: rgba(255, 255, 255, 0.92);
    margin: 2rem auto;
    max-width: 600px;
    line-height: 1.5;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
    /* Staggered reveal animation - appears after subtitle */
    opacity: 0;
    transform: translateY(20px);
    animation: revealTagline 1s var(--ease-elegant) 1.3s forwards;
}

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

.hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    /* Staggered reveal animation - appears last */
    opacity: 0;
    transform: translateY(20px);
    animation: revealCTA 1s var(--ease-elegant) 1.8s forwards;
}

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

/* Premium Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    /* Refined styling */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    /* Smooth fade in */
    opacity: 0;
    animation:
        fadeInScroll 1s var(--ease-elegant) 2.5s forwards,
        elegantBounce 2.5s ease-in-out 3.5s infinite;
    /* Smooth transitions */
    transition: opacity 0.6s var(--ease-elegant), transform 0.3s var(--ease-premium);
}

/* Fade out on scroll */
.hero-scrolled .scroll-indicator {
    opacity: 0;
    pointer-events: none;
}

@keyframes fadeInScroll {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* More elegant, subtle bounce */
@keyframes elegantBounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

.scroll-indicator:hover {
    color: rgba(255, 255, 255, 1);
    transform: translateX(-50%) translateY(-4px);
}

.scroll-indicator svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Mobile: Hero section optimizations */
@media (max-width: 768px) {
    .hero-fullscreen {
        height: 100vh;
        height: calc(100vh - env(safe-area-inset-bottom, 0px));
        min-height: 85vh; /* Reduced from 100vh to hint at content below */
        max-height: none;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .hero-bg-image {
        max-height: none;
    }

    .hero-content {
        padding: 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    .hero-title {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-name {
        font-size: clamp(1rem, 4vw, 1.5rem);
        letter-spacing: 0.3em;
        margin-bottom: 0.5rem;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-subtitle {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        letter-spacing: 0.15em;
        padding-bottom: 1.5rem;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-tagline {
        font-size: clamp(0.95rem, 3.5vw, 1.25rem);
        margin: 1.5rem 0 !important;
        max-width: 90% !important;
        line-height: 1.6;
        text-align: center !important;
    }

    .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.875rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2rem 0 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .hero-cta > a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 80% !important;
        max-width: 280px !important;
        min-width: 200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1rem 2rem !important;
        text-align: center !important;
        font-size: 0.875rem !important;
        box-sizing: border-box !important;
    }

    .scroll-indicator {
        bottom: 1.5rem;
        font-size: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Very small screens - 100% wide buttons */
@media (max-width: 400px) {
    .hero-cta .btn-primary-large,
    .hero-cta .btn-secondary-large,
    .hero-cta > a {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .hero-name {
        font-size: 0.875rem;
        letter-spacing: 0.25em;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        letter-spacing: 0.1em;
    }

    .hero-tagline {
        font-size: 0.875rem;
    }

    .hero-cta a {
        padding: 0.875rem 1.25rem;
        font-size: 0.8125rem;
    }
}

/* Tablet: Hero section adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content {
        max-width: 700px;
        padding: 1.5rem;
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 4rem);
    }

    .hero-tagline {
        font-size: clamp(1rem, 2vw, 1.5rem);
        max-width: 500px;
    }

    .hero-cta {
        gap: 1rem;
        margin-top: 2rem;
    }
}
/* ========================================
   09 - FEATURED WORKS SECTION
   Gallery grid, carousel components, and featured item cards
   ======================================== */

/* Section top border decoration */
.featured-works::before,
.home-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border-color) 20%,
            var(--border-color) 80%,
            transparent 100%);
    opacity: 0.5;
}

/* Featured Works Section - Premium Spacing */
.featured-works {
    padding: var(--spacing-3xl) var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.section-header h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin: 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: 0.08em;
}

.view-all-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    cursor: pointer;
}

.view-all-link:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--text-color);
    background-color: var(--text-color);
    color: var(--background-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
                0 3px 8px rgba(0, 0, 0, 0.1);
}

.view-all-link:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12),
                0 2px 4px rgba(0, 0, 0, 0.08);
    transition-duration: 0.15s;
}

.view-all-link::after {
    content: '→';
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.view-all-link:hover::after {
    transform: translateX(5px);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* Varied aspect ratios for visual rhythm */
.featured-item:nth-child(3n+1) {
    aspect-ratio: 3/4;
}

.featured-item:nth-child(3n+2) {
    aspect-ratio: 4/5;
}

.featured-item:nth-child(3n) {
    aspect-ratio: 1/1;
}

.featured-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 2px; /* Minimal gallery frame */
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--card-background);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease;
}

.featured-item:hover {
    transform: translateY(-16px);
    border-color: rgba(139, 120, 93, 0.2);
    box-shadow:
        0 12px 24px rgba(139, 120, 93, 0.15),
        0 24px 48px rgba(139, 120, 93, 0.1),
        0 32px 64px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.featured-item:active {
    transform: translateY(-12px);
    box-shadow:
        0 8px 16px rgba(139, 120, 93, 0.12),
        0 16px 32px rgba(139, 120, 93, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition-duration: 0.15s;
}

.featured-item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

/* Museum spotlight effect */
.featured-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, 0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.featured-item:hover::before {
    opacity: 1;
}

/* Premium shimmer effect on hover */
.featured-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%
    );
    opacity: 0;
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition:
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.featured-item:hover::after {
    opacity: 1;
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Picture element needs to fill the container for responsive images */
.featured-item picture {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.featured-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* LQIP (Low-Quality Image Placeholder) styles for featured items */
.featured-item img.lqip-loading {
    filter: blur(20px);
    transform: scale(1.1);
    will-change: filter, transform;
}

.featured-item img.lqip-loaded {
    filter: blur(0);
    transform: scale(1);
}

.featured-item:hover img {
    transform: scale(1.04);
    filter: brightness(1.04) contrast(1.03) saturate(1.05);
}

/* Prevent LQIP blur from interfering with hover effects */
.featured-item:hover img.lqip-loaded,
.featured-item:hover img:not(.lqip-loading):not(.lqip-loaded) {
    transform: scale(1.04);
    filter: brightness(1.04) contrast(1.03) saturate(1.05);
}

.featured-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 2rem 1.5rem 1.5rem;
    color: #ffffff;
}

.featured-item-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.featured-item-info p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   CAROUSEL COMPONENT
   ======================================== */

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 2.5rem;
  cursor: grab;
}

.carousel-track:active {
  cursor: grabbing;
}

.carousel-item {
  flex: 0 0 100%;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: none;
}

.carousel-item.active {
  opacity: 1;
  transform: scale(1);
  display: block;
}

.carousel-clone {
  /* Clone items inherit styles from parent carousel-item */
}

/* Featured carousel specific styles - Multi-item horizontal layout */
#featured-carousel .carousel-track {
  overflow: visible;
}

#featured-carousel .carousel-item {
  flex: 0 0 calc((100% - 5rem) / 3);
  opacity: 1;
  transform: none;
  display: block;
  transition: none;
}

#featured-carousel .featured-item {
  display: block;
  width: 100%;
}

/* Desktop: 3 items per row */
@media (min-width: 1025px) {
  #featured-carousel .carousel-item {
    flex: 0 0 calc((100% - 5rem) / 3);
  }

  .carousel-track {
    gap: 2.5rem;
  }
}

/* Tablet: 2 items per row */
@media (min-width: 769px) and (max-width: 1024px) {
  #featured-carousel .carousel-item {
    flex: 0 0 calc((100% - 2.5rem) / 2);
  }

  .carousel-track {
    gap: 2.5rem;
  }
}

/* Mobile: 1.15 items per row with peek effect */
@media (max-width: 768px) {
  .featured-works {
    padding: 2rem 1rem;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0;
    width: 100%;
  }

  .section-header h2 {
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    margin: 0;
    width: 100%;
  }

  .view-all-link {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
  }

  .carousel {
    width: 100%;
    overflow: visible; /* Allow peek of next item */
  }

  .carousel-track {
    gap: 1rem;
    padding: 0;
  }

  #featured-carousel .carousel-item {
    flex: 0 0 calc(100% - 3rem); /* Show 85% + 15% peek */
    padding: 0 0.5rem;
    box-sizing: border-box;
    /* Reset to single-item mode: hide by default */
    opacity: 0;
    display: none;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  #featured-carousel .carousel-item.active {
    opacity: 1;
    display: block;
    transform: scale(1);
  }

  /* Show next item partially */
  #featured-carousel .carousel-item.active + .carousel-item {
    display: block;
    opacity: 0.5;
    transform: scale(0.95);
  }

  #featured-carousel .featured-item {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4/5;
    border-radius: 8px;
  }

  .featured-item-info {
    padding: 1.5rem 1rem 1rem;
  }

  .featured-item-info h3 {
    font-size: 1.125rem;
  }

  .featured-item-info p {
    font-size: 0.75rem;
  }

  .carousel-controls {
    display: none;
  }

  .carousel-indicators {
    margin-top: 1rem;
    gap: 0.375rem;
  }

  .carousel-indicator {
    width: 8px;
    height: 8px;
  }

  .carousel-indicator.active {
    width: 24px;
  }
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
  z-index: 10;
}

.carousel-prev,
.carousel-next {
  pointer-events: auto;
  background: rgba(var(--text-rgb), 0.06);
  border: 1.5px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.carousel-prev:hover,
.carousel-next:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(1.15);
  box-shadow:
      0 6px 16px rgba(139, 120, 93, 0.25),
      0 4px 8px rgba(139, 120, 93, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.carousel-prev:active,
.carousel-next:active {
  transform: scale(1.08);
  box-shadow:
      0 4px 12px rgba(139, 120, 93, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition-duration: 0.15s;
}

.carousel-prev svg,
.carousel-next svg {
  width: 26px;
  height: 26px;
  stroke: var(--text-color);
  transition:
      stroke 0.3s ease,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-prev:hover svg,
.carousel-next:hover svg {
  stroke: #ffffff;
}

.carousel-prev:hover svg {
  transform: translateX(-3px);
}

.carousel-next:hover svg {
  transform: translateX(3px);
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--text-rgb), 0.25);
  border: 1px solid rgba(var(--text-rgb), 0.15);
  padding: 0;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.carousel-indicator:hover {
  background: rgba(var(--text-rgb), 0.5);
  border-color: rgba(var(--text-rgb), 0.3);
  transform: scale(1.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.carousel-indicator:active {
  transform: scale(1.15);
  transition-duration: 0.15s;
}

.carousel-indicator.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  width: 28px;
  border-radius: 5px;
  box-shadow:
      0 3px 10px rgba(139, 120, 93, 0.3),
      0 1px 4px rgba(139, 120, 93, 0.2);
}

/* ========================================
   RESPONSIVE: TABLET
   ======================================== */

/* Tablet: Featured grid - adjust for moderate screen size */
@media (min-width: 769px) and (max-width: 1024px) {
    .featured-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }
}

/**
 * About Page Styles
 * Styles for the about page, home about section, and related components
 * Including content cards, carousels, image overlays, and responsive layouts
 */

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

.about-section-nav {
    position: sticky;
    top: 80px;
    z-index: calc(var(--z-header) - 1);
    background: var(--header-background);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    margin: 0;
}

.section-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 2rem;
}

.section-nav-container::-webkit-scrollbar {
    display: none;
}

.section-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--secondary-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast) ease;
    border-bottom: 2px solid transparent;
}

.section-nav-link:hover {
    color: var(--text-color);
}

.section-nav-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Subtle gradient edges for overflow indication on mobile */
.about-section-nav::before,
.about-section-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal) ease;
    z-index: 1;
}

.about-section-nav::before {
    left: 0;
    background: linear-gradient(90deg, var(--background-color), transparent);
}

.about-section-nav::after {
    right: 0;
    background: linear-gradient(270deg, var(--background-color), transparent);
}

@media (max-width: 768px) {
    .about-section-nav::before,
    .about-section-nav::after {
        opacity: 1;
    }
}

/* ========================================
   HOME ABOUT SECTION
   ======================================== */

/* Gradient section divider for home about */
.home-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border-color) 20%,
            var(--border-color) 80%,
            transparent 100%);
    opacity: 0.5;
}

.home-about {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10rem 2rem;
    align-items: center;
    position: relative;
}

.home-about::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border-color) 20%,
            var(--border-color) 80%,
            transparent 100%);
    opacity: 0.5;
}

.home-about-content h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
    line-height: 1.2;
}

.home-about-content p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.home-about-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transform: translateY(80px);
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0 12.5px 10px rgba(0, 0, 0, 0.035),
        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
        0 100px 80px rgba(0, 0, 0, 0.07);
}

.home-about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Tablet: Home about section - adjust spacing and layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .home-about {
        gap: 3rem;
        padding: 8rem 2rem;
    }

    .home-about-content h2 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    .home-about-content p {
        font-size: 1rem;
    }

    .home-about-image {
        transform: translateY(40px);
    }
}

/* ========================================
   ABOUT PAGE MAIN LAYOUT
   ======================================== */

.about-main {
    padding: 6rem 2rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

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

/* ========================================
   CONTENT CARD COMPONENT
   ======================================== */

.content-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0 12.5px 10px rgba(0, 0, 0, 0.035),
        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
        0 100px 80px rgba(0, 0, 0, 0.07);
    background-color: var(--card-background);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Add subtle noise to cards */
.content-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    border-radius: 16px;
}

/* Subtle artistic border */
.content-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(139, 120, 93, 0.1) 0%,
            transparent 40%,
            transparent 60%,
            rgba(139, 120, 93, 0.05) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

.card-content {
    position: relative;
    z-index: 2;
}

.content-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 3.5px 2.7px rgba(0, 0, 0, 0.024),
        0 8.4px 6.7px rgba(0, 0, 0, 0.035),
        0 15.8px 12.5px rgba(0, 0, 0, 0.042),
        0 28.2px 22.3px rgba(0, 0, 0, 0.05),
        0 52.8px 41.8px rgba(0, 0, 0, 0.06),
        0 126px 100px rgba(0, 0, 0, 0.085);
}

.card-media {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.content-card:hover .card-background-image {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--card-background) 10%, transparent);
}

.card-content {
    padding: 2rem 2.5rem 2.5rem;
    position: relative;
    z-index: 1;
}

.card-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    transition: color 0.3s ease;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.card-text {
    color: var(--text-color);
}

/* ========================================
   IMAGE OVERLAY (ZOOM FUNCTIONALITY)
   ======================================== */

.image-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: var(--z-lightbox);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    padding: 20px;
    box-sizing: border-box;
}

.image-overlay img {
    max-width: 95%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.close-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: calc(var(--z-lightbox) + 1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.close-overlay:hover {
    background-color: rgba(30, 30, 30, 0.8);
}

/* Zoom controls */
#image-zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

#image-zoom-controls button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image-zoom-controls button:hover {
    background-color: rgba(30, 30, 30, 0.8);
}

/* ========================================
   ABOUT TEXT SECTION
   ======================================== */

.about-text {
    flex: 1.2;
}

.about-text h2 {
    font-size: 3rem;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

/* ========================================
   SHIPPING & POLICIES SECTION
   ======================================== */

.policies-section {
    background: var(--card-background);
    border-radius: 16px;
    padding: 3rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 8px 16px rgba(0, 0, 0, 0.04);
}

.policies-section h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 2.5rem 0;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.policy-block {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.policy-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.policy-block h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    color: var(--accent-color);
}

.policy-block p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    color: var(--text-color);
}

.policy-block strong {
    color: var(--accent-color);
    font-weight: 600;
}

.policy-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

.policy-link:hover {
    opacity: 0.8;
}

/* ========================================
   GALLERY EXPERIENCE SECTION (Carousel)
   ======================================== */

.experience-section {
    background: var(--card-background);
    border-radius: 16px;
    padding: 3rem;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 8px 16px rgba(0, 0, 0, 0.04);
}

.experience-section h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 2rem 0;
    color: var(--text-color);
    letter-spacing: 0.01em;
    text-align: center;
}

.experience-carousel-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.experience-carousel {
    position: relative;
}

.experience-carousel .carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.experience-carousel .carousel-item {
    flex: 0 0 100%;
    min-width: 100%;
}

.experience-figure {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(0, 0, 0, 0.08);
}

.experience-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.experience-figure:hover .experience-image {
    transform: scale(1.02);
}

.experience-caption {
    background: var(--background-color);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.experience-caption-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--secondary-text);
    letter-spacing: 0.02em;
}

/* Experience carousel controls */
.experience-carousel .carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none;
}

.experience-carousel .carousel-prev,
.experience-carousel .carousel-next {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    color: var(--text-color);
}

.experience-carousel .carousel-prev:hover,
.experience-carousel .carousel-next:hover {
    background: #fff;
    transform: scale(1.1);
}

[data-theme="dark"] .experience-carousel .carousel-prev,
[data-theme="dark"] .experience-carousel .carousel-next {
    background: rgba(50, 50, 50, 0.9);
}

[data-theme="dark"] .experience-carousel .carousel-prev:hover,
[data-theme="dark"] .experience-carousel .carousel-next:hover {
    background: rgba(70, 70, 70, 1);
}

/* Experience carousel indicators (dots) */
.experience-carousel .carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.experience-carousel .carousel-indicators .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.experience-carousel .carousel-indicators .dot.active,
.experience-carousel .carousel-indicators .dot:hover {
    background: var(--accent-color);
    transform: scale(1.2);
}

/* Responsive experience section */
@media (max-width: 768px) {
    .experience-section {
        padding: 2rem 1.5rem;
    }

    .experience-section h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .experience-caption {
        padding: 1rem;
    }

    .experience-caption-text {
        font-size: 0.875rem;
    }

    .experience-carousel .carousel-prev,
    .experience-carousel .carousel-next {
        width: 36px;
        height: 36px;
    }

    .experience-carousel .carousel-controls {
        padding: 0 0.25rem;
    }
}

/* ========================================
   EXPERIENCE AND FEEDBACK SECTIONS (Carousels)
   ======================================== */

#experience,
#feedback {
    padding: 4rem 0;
    border-top: 1px solid #ddd;
    text-align: center;
}

#experience h2,
#feedback h2 {
    text-align: center;
    font-size: 3rem;
    letter-spacing: 0.02em;
    margin-bottom: 3rem;
    color: var(--text-color);
    transition: color 0.3s ease;
    font-weight: 700;
}

#feedback blockquote {
    border-left: none;
    padding-left: 0;
    margin: 0 auto 2.5rem auto;
    font-style: normal;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.8rem;
    color: var(--text-color);
    max-width: 600px;
}

#feedback cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-weight: 400;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--secondary-text);
}

/* ========================================
   ABOUT PAGE CAROUSEL
   ======================================== */

.about-carousel-section {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.about-carousel-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
}

.experience-card,
.feedback-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 0 auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--accent-color);
}

.experience-card .experience-venue {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.experience-card .experience-year {
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.experience-card p:last-child {
    margin: 0;
    line-height: 1.6;
}

.feedback-card {
    text-align: center;
}

.feedback-card p {
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.8;
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
}

.feedback-card cite {
    font-size: 1rem;
    font-style: normal;
    color: var(--secondary-text);
    font-weight: 500;
}

/* ========================================
   PACKING VIDEO
   ======================================== */

.packing-video {
    width: 100%;
    max-width: 600px;
    margin: 1.5rem auto 0;
    display: block;
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.packing-video:hover {
    transform: translateY(-4px);
    box-shadow:
        0 6px 8px rgba(0, 0, 0, 0.09),
        0 12px 20px rgba(0, 0, 0, 0.12);
}

/* ========================================
   RESPONSIVE STYLES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Section Navigation Mobile */
    .about-section-nav {
        top: 60px;
    }

    .section-nav-container {
        justify-content: flex-start;
        padding: 0 1rem;
        gap: 0;
    }

    .section-nav-link {
        padding: 0.875rem 1rem;
        font-size: 0.8rem;
    }

    /* Home About - Stack on Mobile */
    .home-about {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 1.5rem;
    }

    .home-about-content {
        order: 1;
    }

    .home-about-image {
        order: 2;
        transform: translateY(0);
    }

    /* About Page - Adjust for section nav */
    .about-main {
        padding-top: 2rem;
    }

    .about-main>h2:first-of-type,
    .card-content>h2:first-child {
        display: none;
        /* Hide main title on mobile, shown in header */
    }

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

    .card-content h2 {
        font-size: 2rem;
    }

    .card-media {
        height: 200px;
    }

    #experience h2,
    #feedback h2 {
        font-size: 2.5rem;
    }

    /* About carousel mobile styles */
    .about-carousel-section {
        padding: 0 1rem;
    }

    .experience-card,
    .feedback-card {
        padding: 2rem 1.5rem;
        min-height: 240px;
    }

    .feedback-card p {
        font-size: 1.1rem;
    }

    /* Policies section mobile */
    .policies-section {
        padding: 2rem 1.5rem;
    }

    .policies-section h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .policy-block {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .policy-block h3 {
        font-size: 1rem;
    }

    .policy-block p {
        font-size: 0.95rem;
    }

    /* Packing video mobile */
    .packing-video {
        margin: 1rem 0 0;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    /* Finer adjustments for small phones */
    h2,
    .card-content h2,
    #experience h2,
    #feedback h2 {
        font-size: 1.8rem;
    }

    .about-main {
        padding: 7rem 1rem 2.5rem;
    }

    .card-media {
        height: 180px;
    }

    .card-content {
        padding: 1rem 1.5rem 1.5rem;
    }

    .content-card {
        border-radius: 12px;
    }
}
/**
 * Contact Page Styles
 * Styles for the contact page including form inputs, validation, and responsive layouts
 */

/* ========================================
   CONTACT PAGE MAIN LAYOUT
   ======================================== */

.contact-main {
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.contact-container {
    display: flex;
    max-width: 1100px;
    width: 100%;
    background: var(--card-background);
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0 12.5px 10px rgba(0, 0, 0, 0.035),
        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
        0 100px 80px rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

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

.contact-info {
    flex: 1;
    padding: 4rem;
    background-color: var(--background-color);
    transition: background-color 0.3s ease;
}

.contact-info h2 {
    font-size: 3rem;
    letter-spacing: 1px;
    color: var(--text-color);
}

.contact-info p {
    color: var(--secondary-text);
    margin-bottom: 2rem;
    max-width: 400px;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.contact-info a[href^="mailto:"] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent-color);
}

/* ========================================
   CONTACT FORM
   ======================================== */

.contact-form {
    flex: 1.2;
    padding: 4rem;
}

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

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    min-height: 48px; /* Touch-friendly: WCAG 44px minimum + padding */
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: var(--card-background);
    color: var(--text-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color var(--transition-normal) var(--ease-gentle),
                box-shadow var(--transition-normal) var(--ease-gentle),
                background-color var(--transition-normal) var(--ease-gentle),
                transform var(--transition-fast) var(--ease-out-back);
    -webkit-appearance: none; /* Remove iOS styling */
    appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--secondary-text);
    opacity: 0.6;
    transition: opacity var(--transition-normal) var(--ease-gentle);
}

/* Elegant label float animation */
.form-group {
    position: relative;
}

.form-group label {
    transition: all var(--transition-normal) var(--ease-out-back);
}

/* Premium focus state with glow */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(139, 120, 93, 0.12),
                0 2px 8px rgba(139, 120, 93, 0.08),
                0 0 20px rgba(139, 120, 93, 0.06);
    transform: translateY(-2px);
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    opacity: 0.3;
    transform: translateX(4px);
}

/* Floating label effect */
.form-group.floating-label {
    position: relative;
    margin-top: 1.5rem;
}

.form-group.floating-label label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text);
    font-size: 1rem;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.3s var(--ease-spring);
    background: transparent;
    padding: 0 4px;
}

.form-group.floating-label textarea ~ label {
    top: 1.25rem;
    transform: translateY(0);
}

.form-group.floating-label input:focus ~ label,
.form-group.floating-label input:not(:placeholder-shown) ~ label,
.form-group.floating-label textarea:focus ~ label,
.form-group.floating-label textarea:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-color);
    background: var(--card-background);
    letter-spacing: 0.02em;
}

.form-group.floating-label input::placeholder,
.form-group.floating-label textarea::placeholder {
    opacity: 0;
}

.form-group.floating-label input:focus::placeholder,
.form-group.floating-label textarea:focus::placeholder {
    opacity: 0.4;
}

/* ========================================
   FORM VALIDATION STYLES
   ======================================== */

/* Form validation error styles */
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: #d32f2f;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
}

.form-group input.field-error,
.form-group textarea.field-error {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
    background-color: rgba(211, 47, 47, 0.02);
}

/* Shake animation for error feedback */
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.field-shake {
    animation: fieldShake 0.5s ease-in-out;
}

.error-message {
    display: block;
    color: #d32f2f;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    min-height: 1.2rem;
    font-weight: 500;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.error-message:not(:empty) {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-message:empty {
    display: none;
}

[data-theme="dark"] .error-message {
    color: #ff6b6b;
}

[data-theme="dark"] .form-group input[aria-invalid="true"],
[data-theme="dark"] .form-group textarea[aria-invalid="true"] {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.1);
}

[data-theme="dark"] .form-group input.field-error,
[data-theme="dark"] .form-group textarea.field-error {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
    background-color: rgba(255, 107, 107, 0.03);
}

/* Required field indicator */
.required-indicator {
    color: #d32f2f;
    margin-left: 0.25rem;
    font-weight: 700;
}

[data-theme="dark"] .required-indicator {
    color: #ff6b6b;
}

/* ========================================
   FORM MESSAGE (SUCCESS/ERROR)
   ======================================== */

/* Form success/error message container */
.form-message {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    display: none;
}

.form-message.show {
    display: block;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

[data-theme="dark"] .form-message.success {
    background-color: #1e4620;
    color: #8fd892;
    border-color: #2d5a2e;
}

[data-theme="dark"] .form-message.error {
    background-color: #4a1a1a;
    color: #ff9999;
    border-color: #6b2525;
}

/* ========================================
   HONEYPOT (SPAM PROTECTION)
   ======================================== */

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */

.submit-btn {
    background-color: var(--button-color);
    color: var(--button-text);
    border: none;
    padding: 1.1rem 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.875rem;
    width: 100%;
    border-radius: 8px;
    box-shadow:
        0 2px 4px rgba(0, 102, 204, 0.1),
        0 4px 8px rgba(0, 102, 204, 0.08);
    position: relative;
}

.submit-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(0, 102, 204, 0.15),
        0 8px 16px rgba(0, 102, 204, 0.12);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Loading button state */
.submit-btn.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    pointer-events: none;
}

/* Loading spinner */
.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   FORM HELPER TEXT
   ======================================== */

.form-helper-text {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--secondary-text);
    text-align: center;
    line-height: 1.5;
}

/* ========================================
   RESPONSIVE STYLES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Contact Page */
    .contact-main {
        padding-top: 7rem;
    }

    .contact-info h2 {
        display: none;
        /* Hide on mobile, shown in header */
    }

    .contact-container {
        flex-direction: column;
        background: transparent;
        box-shadow: none;
    }

    .contact-info,
    .contact-form {
        padding: 2.5rem 1.5rem;
        border-radius: 18px;
    }

    .contact-info {
        background-color: var(--card-background);
        box-shadow: 0 10px 30px var(--shadow-color);
        margin-bottom: 2rem;
    }

    .contact-form {
        background-color: var(--card-background);
        box-shadow: 0 10px 30px var(--shadow-color);
    }
}

@media (max-width: 480px) {
    /* Finer adjustments for small phones */
    .contact-info,
    .contact-form {
        padding: 2.5rem 1rem;
    }
}

/* ========================================
   COMMISSIONS PAGE
   ======================================== */

.commissions-main {
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.commissions-container {
    background: var(--card-background);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
        0 12.5px 10px rgba(0, 0, 0, 0.035),
        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
        0 100px 80px rgba(0, 0, 0, 0.07);
}

.commissions-hero {
    padding: 3rem 3rem 2rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.commissions-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.commissions-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--secondary-text);
    max-width: 600px;
    margin: 0 auto;
}

.commissions-content {
    padding: 2.5rem 3rem;
}

.commission-section {
    margin-bottom: 2.5rem;
}

.commission-section:last-child {
    margin-bottom: 0;
}

.commission-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    color: var(--accent-color);
}

.commission-section p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 0.75rem 0;
    color: var(--text-color);
}

.commission-section p:last-child {
    margin-bottom: 0;
}

.commission-section strong {
    color: var(--accent-color);
    font-weight: 600;
}

.commission-section a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

.commission-section a:hover {
    opacity: 0.8;
}

.commission-cta {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.commission-form-container {
    padding: 2.5rem 3rem 3rem;
    background: var(--background-color);
    border-top: 1px solid var(--border-color);
}

.commission-form-container h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 2rem 0;
    color: var(--text-color);
    text-align: center;
}

.commission-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Commissions */
@media (max-width: 768px) {
    .commissions-main {
        padding: 7rem 1.5rem 2rem;
    }

    .commissions-hero {
        padding: 2rem 1.5rem 1.5rem;
    }

    .commissions-hero h1 {
        font-size: 2rem;
    }

    .commissions-content {
        padding: 2rem 1.5rem;
    }

    .commission-form-container {
        padding: 2rem 1.5rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .commissions-main {
        padding: 7rem 1rem 2rem;
    }

    .commissions-hero,
    .commissions-content,
    .commission-form-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* ============================================
   12. SECTIONS & PAGE LAYOUT
   ============================================
   Main content area, section animations,
   gradient dividers, CTA sections, and
   responsive utilities
   ============================================ */

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

main {
    flex-grow: 1;
}

/* Ensure main content has proper spacing from footer */
main {
  min-height: calc(100vh - 200px);
}

/* Large Desktop: Constrain max width for very large screens */
@media (min-width: 1440px) {
    main {
        max-width: 1440px;
        margin: 0 auto;
    }
}

.home-main {
    padding: 0;
}

/* ========================================
   SECTION TRANSITIONS & ANIMATIONS
   ======================================== */

/* Section Transitions & Polish - Premium Luxury */
section {
    position: relative;
    isolation: isolate;
    padding: var(--spacing-4xl) var(--spacing-xl); /* Premium generous padding */
    animation: sectionFadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Premium section headings */
section h2 {
    margin-bottom: var(--spacing-2xl);
    position: relative;
    letter-spacing: 0.02em;
}

section h2::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
    border-radius: 2px;
}

/* ========================================
   GRADIENT SECTION DIVIDERS
   ======================================== */

/* Premium gradient section dividers */
.featured-works::before,
.home-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border-color) 15%,
            var(--accent-color) 50%,
            var(--border-color) 85%,
            transparent 100%);
    opacity: 0.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ========================================
   HOME CTA SECTION
   ======================================== */

/* Home CTA Section - Premium Spacing */
.home-cta {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: linear-gradient(135deg, var(--card-background) 0%, var(--background-color) 100%);
}

.home-cta h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: 0.08em;
}

.home-cta p {
    font-size: 1.125rem;
    color: var(--secondary-text);
    margin-bottom: var(--spacing-2xl);
    letter-spacing: 0.02em;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile: Home CTA - Mobile Optimized */
@media (max-width: 768px) {
    .home-cta {
        padding: 4rem 1.5rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        gap: 1rem;
    }

    .cta-buttons .btn-primary-large,
    .cta-buttons .btn-secondary-large {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 1.125rem 1.5rem;
        box-sizing: border-box;
        margin: 0;
    }
}

/* ========================================
   BACKGROUND TEXTURES
   ======================================== */

/* Logo watermark pattern */
.logo-pattern {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  height: auto;
  opacity: 0.008;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

/* ========================================
   ARTWORK AVAILABILITY DISPLAY
   ======================================== */

.artwork-availability {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.artwork-availability .sold-label {
  color: #d32f2f;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.artwork-availability .custom-message {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--secondary-text);
  font-style: italic;
}

[data-theme="dark"] .artwork-availability .sold-label {
  color: #ff6b6b;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Show/hide utilities - !important needed for utility override pattern */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}