/* ==========================================================================
   CSS Variables & Base Styles
   ========================================================================== */
:root {
    --bg: #000000;
    --text: #ffffff;
    --accent1: #04e6b6; /* mint green */
    --accent2: #ff6d69; /* coral */
    --accent3: #ff6d69; /* coral */
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Font Variables */
    --font-mono: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;

    /* Consistent Spacing System */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
}

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

body {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    position: relative;
    /* Ensure full viewport height coverage */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 112px; /* Account for fixed header height (80px logo + 32px padding) */
}

/* Quick visual feedback on navigation */
body.page-loading header { opacity: 0.85; }
body.page-loading .menu-link,
body.page-loading .more-button { cursor: progress; }

/* Force body to always extend to full height on desktop */
@media (min-width: 768px) {
    body {
        min-height: 100vh;
        height: auto;
    }
}

/* Chrome-specific fix for viewport height calculation */
@supports (-webkit-appearance: none) {
    body {
        /* Ensure Chrome properly fills the viewport */
        min-height: -webkit-fill-available;
        min-height: 100vh;
    }
}

/* Hide default scrollbar completely */
html {
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
    /* Ensure html also has the background to prevent any gaps */
    background-color: var(--bg);
    min-height: 100vh;
}

/* Mobile viewport unit fix to avoid bottom gaps on iOS/Chrome (address bar) */
@supports (height: 100svh) {
    html, body {
        min-height: 100svh;
        background-color: var(--bg);
    }
}

/* Additional background fix for Chrome rendering issues */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    z-index: -1;
    pointer-events: none;
}

/* Redundant background layer to guarantee coverage in Chrome mobile emulation */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: var(--bg);
    z-index: -2;
    pointer-events: none;
}

/* ==========================================================================
   WebGL Shader Background Layer
   - Fixed, transparent canvas behind content but above base backgrounds
   ========================================================================== */
#shader-container {
    position: fixed;
    inset: 0;
    pointer-events: none; /* never block interaction */
    z-index: 0; /* above html/body backgrounds (-1/-2), below content */
}

/* Ensure all page content sits above the shader layer */
.page {
    position: relative;
    z-index: 1;
}

/* Removed problematic Chrome-specific fix that broke menu */

body::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

html::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* ==========================================================================
   Custom Cursor (scoped, removable)
   ========================================================================== */
/* Force-hide native cursor universally while enhanced is active, but exclude links for Safari URL preview */
/* Apply only on devices with a fine pointer (desktop/mice) */
@media (pointer: fine) {
  html.cursor-enhanced,
  html.cursor-enhanced body,
  html.cursor-enhanced button,
  html.cursor-enhanced [role="button"],
  html.cursor-enhanced input,
  html.cursor-enhanced select,
  html.cursor-enhanced textarea {
      cursor: none !important;
  }
  /* Hide native cursor on all descendants (we'll show URL in custom overlay) */
  html.cursor-enhanced *,
  html.cursor-enhanced *::before,
  html.cursor-enhanced *::after {
      cursor: none !important;
  }
}

/* Ensure iframes (e.g., YouTube embeds) also hide the native cursor */
@media (pointer: fine) {
  html.cursor-enhanced iframe { cursor: none !important; }
}

#custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--accent1);
    pointer-events: none;
    z-index: 2147483647; /* On top of all overlays/lightboxes; still non-interactive */
    transform: translate(-50%, -50%) scale(1);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px var(--accent1), 0 0 6px var(--accent1);
}

/* Custom bottom-left URL preview overlay (Safari-friendly) */
.url-preview-overlay {
    position: fixed;
    left: 10px;
    bottom: 8px;
    max-width: calc(100vw - 20px);
    padding: 6px 10px;
    background: rgba(20,20,20,0.8);
    color: #d9d9d9;
    font-family: 'Space Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 6px;
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    z-index: 2147483646; /* just under custom cursor */
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-preview-overlay.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover scale only when explicitly enabled via html.cursor-scale-on */
html.cursor-scale-on #custom-cursor.is-interactive {
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 0 14px var(--accent1), 0 0 8px var(--accent1);
}

@media (max-width: 768px) {
    /* Disable hover-style overlay on mobile completely */
    .gallery-item::before { opacity: 0 !important; }
    .gallery-item p { opacity: 0 !important; }
    .gallery-item:active::before,
    .gallery-item:active p { opacity: 0 !important; }
    .gallery-item:focus-visible::before,
    .gallery-item:focus-visible p { opacity: 0 !important; }
    #custom-cursor { display: none; }
    html.cursor-enhanced { cursor: default; }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
header {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-lg);
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10500; /* Above cookie popup */
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box; /* Ensure proper box model */
}

/* Prevent subpixel layout shift on late font/image loads
   Avoid paint containment so glows/box-shadows aren't clipped */
header, .logo, .logo img, .burger-menu { contain: layout; }

header.scrolled {
    background: rgba(0, 0, 0, 0.9);
}

.logo {
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 10500; /* Above cookie popup */
}

.logo img {
    height: 80px;
    width: auto;
    display: block;
    transition: var(--transition);
    position: relative;
    z-index: 2;
}

/* Create glow effect using pseudo-element for smooth transitions */
.logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/logo/logo.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 9px rgba(4, 230, 182, 0.55)) drop-shadow(0 0 17px rgba(4, 230, 182, 0.38)) drop-shadow(0 0 26px rgba(4, 230, 182, 0.28));
    mix-blend-mode: screen; /* smooth glow without hard rectangle */
    /* Fix Chrome rendering bug with glow effects */
    isolation: isolate;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    pointer-events: none;
}

.logo:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Burger Menu
   ========================================================================== */
.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: 6px;
    transition: var(--transition);
    border-radius: 8px;
    position: relative;
    z-index: 10500; /* Above cookie popup */
    overflow: visible;
    touch-action: manipulation; /* Improve touch responsiveness on mobile */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
}

.burger-line {
    width: 30px;
    height: 3px;
    background: var(--text);
    transition: var(--transition);
    border-radius: 2px;
    pointer-events: none; /* Prevent burger lines from intercepting clicks */
    position: relative;
    flex-shrink: 0; /* Prevent lines from shrinking and affecting layout */
}

.burger-menu:hover .burger-line {
    background: var(--accent1);
    box-shadow: 0 0 14px rgba(4, 230, 182, 0.76), 0 0 27px rgba(4, 230, 182, 0.57), 0 0 54px rgba(4, 230, 182, 0.38);
    filter: drop-shadow(0 0 9px rgba(4, 230, 182, 0.43));
    /* Fix Chrome rendering bug with glow effects */
    isolation: isolate;
    transform: translateZ(0);
}

.burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: var(--text);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
    background: var(--text);
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
    background: var(--text);
}

.burger-menu.active:hover .burger-line {
    background: var(--accent2);
    box-shadow:
        0 0 12px rgba(255, 109, 105, 0.81),
        0 0 25px rgba(255, 109, 105, 0.72),
        0 0 40px rgba(255, 109, 105, 0.54),
        0 0 55px rgba(255, 109, 105, 0.36);
}

/* ==========================================================================
   Full-screen Menu
   ========================================================================== */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92); /* Match header base color with more transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10400; /* Above cookie popup */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(10px);
}

.fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

/* Ensure inline head rule "#lightbox,#fullscreen-menu{opacity:0;visibility:hidden}"
   does not prevent the menu and lightbox from showing when active */
#fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

#lightbox.active {
    opacity: 1;
    visibility: visible;
}

.menu-content {
    text-align: center;
    transform: translateY(30px);
    transition: transform 0.5s ease;
    will-change: transform;
    position: relative;
    z-index: 10450; /* Above cookie popup */
    padding-top: clamp(100px, 12vh, 160px); /* More aggressive scaling for short screens */
    padding-bottom: clamp(20px, 5vh, 40px); /* Ensure content doesn't get cut off at bottom */
    max-height: calc(100vh - 20px); /* Prevent overflow */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Make clicks on padding areas count as background clicks (to close menu) */
.fullscreen-menu .menu-content { pointer-events: none; }
.fullscreen-menu .language-menu-toggle,
.fullscreen-menu .menu-nav,
.fullscreen-menu .social-menu-links,
.fullscreen-menu .menu-contact { pointer-events: auto; }

.fullscreen-menu.active .menu-content {
    transform: translateY(0);
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 4vh, 3.5rem); /* Even more compact gaps for very short screens */
    align-items: center;
    flex: 1;
    justify-content: center;
}

.menu-link {
    color: var(--text);
    text-decoration: none;
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(0.8rem, min(6vh, 10vw), 3rem); /* More aggressive scaling down on narrow screens */
    transition: var(--transition);
    position: relative;
    padding: clamp(0.4rem, 2.5vh, var(--spacing-md)) clamp(0.6rem, 3vh, var(--spacing-lg));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    letter-spacing: clamp(0.5px, min(0.8vh, 1vw), 4px);
    max-width: 95vw; /* Allow more width to prevent wrapping */
    text-align: center;
    white-space: nowrap; /* Prevent line breaks */
    overflow: visible; /* Ensure text remains visible */
}

.menu-link:hover {
    color: var(--accent1);
    text-shadow:
        0 0 10px rgba(4, 230, 182, 0.65),
        0 0 18px rgba(4, 230, 182, 0.5),
        0 0 28px rgba(4, 230, 182, 0.35);
}

.social-menu-links {
    display: flex;
    gap: clamp(0.5rem, 3vh, var(--spacing-xl)); /* More compact social icons */
    margin: clamp(0.2rem, 1vh, 0.5rem) 0; /* Minimal margins */
}

.menu-contact {
    margin-top: clamp(1.2rem, 3vh, 2rem);
    font-size: clamp(0.5rem, 2vh, 1.1rem); /* Even more aggressive scaling */
    color: var(--text);
    opacity: 0.8;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    margin-bottom: 0; /* Remove bottom margin to save space */
    padding-inline: clamp(0.75rem, 5vw, 2rem); /* Widen interactive hit area for easy selection */
    line-height: 1.6; /* Slightly taller for easier text selection */
    display: inline-block; /* Keep centered with extra padding width */
}

.social-icon {
    color: var(--text);
    transition: var(--transition);
    padding: clamp(0.5rem, 2vh, var(--spacing-md)); /* Responsive padding for social icons */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon:hover {
    color: var(--accent1);
    filter: drop-shadow(0 0 8px rgba(4, 230, 182, 0.8)) drop-shadow(0 0 16px rgba(4, 230, 182, 0.6));
}

.language-menu-toggle {
    display: flex;
    gap: clamp(0.3rem, 2vh, 1.2rem);
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: clamp(0.7rem, 3vh, 1.8rem); /* Even more aggressive scaling */
    align-items: center;
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
    justify-content: center;
}

.language-menu-toggle a {
    text-decoration: none;
    padding: clamp(0.1rem, 1vh, 0.6rem) clamp(0.2rem, 2vh, 1.2rem);
    transition: var(--transition);
    border-radius: 6px;
    font-weight: 700;
}

.language-menu-toggle a.active {
    color: var(--accent2);
    text-shadow:
        0 0 12px rgba(255, 109, 105, 0.7),
        0 0 24px rgba(255, 109, 105, 0.5),
        0 0 36px rgba(255, 109, 105, 0.3);
}

.language-menu-toggle a:not(.active) {
    color: rgba(255, 255, 255, 0.4);
}

.language-menu-toggle a:hover {
    color: var(--accent2);
    text-shadow:
        0 0 15px rgba(255, 109, 105, 0.9),
        0 0 30px rgba(255, 109, 105, 0.7),
        0 0 45px rgba(255, 109, 105, 0.5);
}

.language-menu-toggle span {
    color: rgba(255, 255, 255, 0.3);
    font-size: clamp(0.7rem, 3vh, 1.4rem); /* More aggressive scaling for separator */
}

/* ==========================================================================
   Page Navigation System
   ========================================================================== */
.page {
    display: none;
}

.page.active {
    display: block;
    flex: 1;
    min-height: 0; /* Chrome flexbox fix */
}

/* ==========================================================================
   Home Page Styles
   ========================================================================== */
.hero {
    display: flex;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg);
    gap: var(--spacing-xl);
    position: relative;
    z-index: 5;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.portrait {
    width: 350px;
    height: 500px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    flex-shrink: 0;
}

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

.hero-content {
    flex: 1;
    padding-top: var(--spacing-lg);
}

.hero-content h1 {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    margin-bottom: var(--spacing-xs);
    color: var(--accent1);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: left;
    display: block;
}

.hero-content h1 .hero-name {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.hero-content h1 .hero-title {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--accent2);
    margin-bottom: var(--spacing-md);
    display: block;
    text-align: left;
}

.hero-content h2 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--accent2);
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.hero-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 700px;
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.hero-content p a {
    color: var(--accent1);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
    /* Reduced subtle resting glow with expanded radius */
    text-shadow: 0 0 6px rgba(4, 230, 182, 0.15);
}

.hero-content p a:hover {
    color: var(--accent1);
    border-bottom-color: var(--accent1);
    /* Balanced multi-layer glow with expanded radius */
    text-shadow:
        0 0 10px rgba(4, 230, 182, 0.9),
        0 0 20px rgba(4, 230, 182, 0.8),
        0 0 30px rgba(4, 230, 182, 0.6);
}

.more-button {
    display: inline-block;
    color: var(--accent2);
    text-decoration: none;
    font-size: 1.5rem;
    padding: 1.5rem 2.5rem;
    border: 2px solid var(--accent2);
    transition: var(--transition);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    letter-spacing: 0.05em;
    width: fit-content; /* Ensure button is only as wide as its content */
    flex-shrink: 0; /* Prevent button from shrinking in flex containers */
    /* Fix Chrome rendering bug with glow effects */
    isolation: isolate;
    transform: translateZ(0);
}

.more-button:hover {
    box-shadow:
        0 0 12px rgba(255, 109, 105, 1),
        0 0 25px rgba(255, 109, 105, 1),
        0 0 55px rgba(255, 109, 105, 1),
        0 0 85px rgba(255, 109, 105, 0.8);
    color: var(--accent2);
    border-style: solid;
    text-shadow:
        0 0 14px rgba(255, 109, 105, 1),
        0 0 24px rgba(255, 109, 105, 1),
        0 0 36px rgba(255, 109, 105, 0.9);
}

.buttons-container {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.buttons-container .more-button {
    margin-top: 0;
    margin-bottom: 0;
}

/* Video Container Styles */
.video-container {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: 800px;
    position: relative;
    /* Let children (YouTube/Instagram) control their own radius/shadow */
    overflow: visible;
}

/* Scope fixed sizing to YouTube iframes only so Instagram can auto-size */
.video-container iframe[src*="youtube.com"],
.video-container iframe[src*="youtu.be"] {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 8px;
    /* Keep the soft drop shadow only for video iframes */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile responsiveness for video */
@media (max-width: 768px) {
    .video-container iframe[src*="youtube.com"],
    .video-container iframe[src*="youtu.be"] {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .video-container iframe[src*="youtube.com"],
    .video-container iframe[src*="youtu.be"] {
        height: 200px;
    }
}

/* Ensure Instagram blockquote centers nicely and can grow in height */
.video-container blockquote.instagram-media {
    margin-left: auto;
    margin-right: auto;
    max-width: 540px; /* matches Instagram inline style */
    width: 100%;
    /* Remove Instagram's inline box-shadow to avoid double/offset shadow */
    box-shadow: none !important;
}

/* ==========================================================================
   Carousel Gallery Styles
   ========================================================================== */
.carousel-section {
    padding: 0;
    width: 100%;
    margin: 0 0 var(--spacing-2xl) 0; /* Add consistent bottom spacing before footer */
}

.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    gap: 1rem;
    cursor: grab;
    user-select: none;
}

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

.carousel-slide {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.carousel-slide img {
    height: 650px; /* Taller height for desktop */
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

/* Narrower desktop/laptop screens - reduce height when gallery expands to edges */
@media (max-width: 1400px) and (min-width: 993px) {
    .carousel-slide img {
        height: 500px; /* Reduced height for narrower desktop screens */
    }
}

/* Tablet size - medium height */
@media (max-width: 992px) {
    .carousel-slide img {
        height: 400px;
    }
}

/* Mobile size - shorter height */
@media (max-width: 768px) {
    .carousel-slide img {
        height: 250px;
    }
}

/* Removed hover zoom effect for carousel images to prevent interference with dragging */

.carousel-nav {
    display: none;
}

/* Subtle double-sided arrow hint under carousel */
.carousel-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* further apart by default */
    margin-top: 1.25rem; /* further from carousel */
    margin-bottom: var(--spacing-2xl);
    padding-bottom: 1rem; /* Moderate extension below arrows for hover area */
    color: rgba(255, 255, 255, 0.6);
    opacity: 0; /* desktop: hidden by default; fades in on hover */
    pointer-events: none; /* disabled by default, enabled for arrows on desktop */
    user-select: none;
    font-size: 1.35rem;
    transition: gap 480ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: gap;
}

.carousel-hint .hint-arrow {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 6px rgba(4, 230, 182, 0.25));
    transform: translateX(0);
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    pointer-events: auto; /* Enable clicks on desktop */
    cursor: pointer; /* Show pointer cursor */
    padding: 14px; /* Increase clickable area - wider/taller */
    margin: -14px; /* Offset padding to maintain visual appearance */
}

/* Right arrow uses its own chevron angles; no flip needed */
.carousel-hint .hint-arrow.right { transform: translateX(0) scaleX(-1); }

.carousel-hint .hint-arrow::before,
.carousel-hint .hint-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px; /* thin arrow line */
    height: 2px;
    background: rgba(255, 255, 255, 0.45); /* base desktop color */
    border-radius: 2px;
    transform-origin: left center;
    transition: background 300ms ease;
}

.carousel-hint .hint-arrow.left::before { transform: translate(-50%, -50%) rotate(35deg); }
.carousel-hint .hint-arrow.left::after  { transform: translate(-50%, -50%) rotate(-35deg); }
.carousel-hint .hint-arrow.right::before { transform: translate(-50%, -50%) rotate(-35deg); }
.carousel-hint .hint-arrow.right::after  { transform: translate(-50%, -50%) rotate(35deg); }

/* Hovering the carousel section (images, space, or arrows) moves the arrows apart */
.carousel-section:hover .carousel-hint { gap: 2.2rem; opacity: 0.75; }
/* Keep arrow color constant on desktop hover */
.carousel-section:hover .carousel-hint .hint-arrow::before,
.carousel-section:hover .carousel-hint .hint-arrow::after { background: rgba(255, 255, 255, 0.45); }
.carousel-section:hover .carousel-hint .hint-arrow.left { transform: translateX(-4px); }
.carousel-section:hover .carousel-hint .hint-arrow.right { transform: translateX(4px) scaleX(-1); }

/* Hint arrow hover effect - make them brighter and slightly larger when hovered */
.carousel-hint .hint-arrow:hover {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(4, 230, 182, 0.4));
}

.carousel-hint .hint-arrow:hover::before,
.carousel-hint .hint-arrow:hover::after {
    background: rgba(255, 255, 255, 0.65);
}

.carousel-hint .hint-arrow.left:hover { transform: translateX(-6px); }
.carousel-hint .hint-arrow.right:hover { transform: translateX(6px) scaleX(-1); }

/* Hide hint on very small screens where space is tight */
@media (max-width: 380px) {
    .carousel-hint { display: none; }
}

/* Mobile: hide hint arrows (no hovering on mobile, so no need for them) */
@media (max-width: 768px) {
    .carousel-hint { display: none; }
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
footer {
    padding: var(--spacing-2xl) 0 var(--spacing-md) 0;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    /* Ensure footer background extends properly */
    background-color: var(--bg);
    /* Safe-area support to avoid bottom gap on iPhone 12 Pro and similar */
    padding-bottom: calc(var(--spacing-md) + constant(safe-area-inset-bottom));
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.copyright {
    font-size: 0.75rem;
    opacity: 0.5;
    font-style: italic;
}

.footer-contact {
    font-size: 0.75rem;
    color: var(--text);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    margin: 0;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: var(--text);
    transition: var(--transition);
    padding: 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    color: var(--accent1);
    filter: drop-shadow(0 0 5px rgba(4, 230, 182, 0.6)) drop-shadow(0 0 10px rgba(4, 230, 182, 0.4));
}

/* ==========================================================================
   Projects Page Styles
   ========================================================================== */
.projects-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl) 0;
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
    min-height: auto; /* Let content determine height */
    flex: 1; /* Allow the page to grow and fill available space */
}

/* Only add margins on super wide screens (>1400px) */
@media (min-width: 1401px) {
    .projects-page {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg);
    }
}

.projects-page h2 {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--accent1);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 100%;
    margin: 0;
}

/* Increase gap for desktop screens */
@media (min-width: 769px) {
    .projects-grid {
        gap: 6px;
    }
}

/* Medium screen title sizing */
@media (max-width: 1024px) and (min-width: 769px) {
    .project-item p {
        font-size: 1.3rem !important;
    }
}

/* Small screen title sizing (tablets and small desktops) */
@media (max-width: 768px) and (min-width: 481px) {
    .project-item p {
        font-size: 1.1rem !important;
        padding: 0 0.75rem;
    }
}

/* Mobile screen title sizing */
@media (max-width: 480px) and (min-width: 321px) {
    .project-item p {
        font-size: 0.75rem !important;
        padding: 0 0.5rem;
    }
}

.project-item {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    cursor: pointer;
    display: block;
    text-decoration: none;
}

/* Dark overlay - visible by default */
.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.project-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

/* Centered title text */
.project-item p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    z-index: 2;
    color: var(--text);
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 700;
    font-size: 1.8rem;
    text-align: center;
    margin: 0;
    padding: 0 1rem;
    transition: opacity 0.3s ease-in-out;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 4px 8px rgba(0, 0, 0, 0.8),
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 12px 24px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    letter-spacing: 0.05em;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    will-change: opacity;
}

/* Hover effect - hide overlay and text */
.project-item:hover::before {
    opacity: 0;
}

.project-item:hover p {
    opacity: 0;
}

/* ==========================================================================
   Chrome External Display Rendering Fixes
   ========================================================================== */
/* Optimize hover effects for Chrome external displays */
.burger-menu:hover .burger-line,
.more-button:hover {
    /* Force Chrome to use a single compositing layer */
    transform: translateZ(0);
    will-change: box-shadow;
}

/* Optimize carousel for Chrome */
.carousel-track {
    /* Use transform3d consistently */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Fix fullscreen menu layering */
.fullscreen-menu {
    /* Ensure proper stacking context */
    isolation: isolate;
}

/* ==========================================================================
   Artist Page Styles
   ========================================================================== */
.artist-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl) 0;
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
    min-height: calc(100vh - 200px); /* Ensure minimum height to prevent footer gaps */
    flex: 1; /* Allow the page to grow and fill available space */
}

/* Simple fix for collapsed lists background issue - only on desktop Chrome */
@media (min-width: 768px) {
    .artist-page {
        min-height: calc(100vh - 150px); /* Ensure sufficient height when lists are collapsed */
    }
}

/* Language-specific fix for Slovenian background issue */
body[data-lang="si"] .artist-page {
    min-height: 100vh !important;
    padding-bottom: 50px;
}

/* Ensure proper background coverage for Slovenian version */
body[data-lang="si"] {
    background: var(--bg) !important;
}

body[data-lang="si"] .page.active {
    background: transparent !important;
    min-height: 0 !important; /* Let content determine height, same as English */
}

/* Language-specific fix for projects page */
body[data-lang="si"] .projects-page {
    min-height: auto; /* Same as English - let content determine height */
    background: var(--bg) !important;
}

/* Mobile-specific language fix for projects page */
@media (max-width: 767px) {
    body[data-lang="si"] .projects-page {
        min-height: auto; /* Let content determine height */
        background: var(--bg) !important;
    }
    
    body[data-lang="en"] .projects-page {
        min-height: auto; /* Let content determine height */
        background: var(--bg) !important;
    }
    
    /* Ensure body fills viewport on mobile for background coverage */
    body[data-lang="si"],
    body[data-lang="en"] {
        min-height: 100vh !important;
        min-height: 100svh !important; /* iPhone 12 Pro emulation fix */
        background: var(--bg) !important;
    }
    
    /* Project detail page mobile background fix */
    body[data-lang="si"] .project-detail,
    body[data-lang="en"] .project-detail {
        min-height: calc(100vh - 150px); /* Mobile-specific minimum height like artist page */
        min-height: calc(100svh - 150px); /* iPhone 12 Pro emulation fix */
        background: var(--bg) !important;
    }
}

.artist-header {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    align-items: flex-start;
    padding: 0 var(--spacing-lg);
}

.artist-portrait {
    width: 350px;
    height: 500px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    flex-shrink: 0;
}

.artist-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}



.artist-info {
    flex: 1;
    padding-top: var(--spacing-lg);
}

.artist-info h1 {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--accent1);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: left;
}

.artist-info h2 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--accent2);
    margin-bottom: var(--spacing-md);
    text-align: left;
    max-width: 650px;
}

.artist-info p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 700px;
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.artist-info p.bio-description {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 400;
    max-width: 700px;
    margin-bottom: var(--spacing-md);
}

.artist-info p a {
    color: var(--accent1);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
    /* Add subtle resting glow */
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

.artist-info p a:hover {
    color: var(--accent1);
    border-bottom-color: var(--accent1);
    /* Balanced multi-layer neon glow effect */
    text-shadow:
        0 0 6px rgba(4, 230, 182, 1),
        0 0 12px rgba(4, 230, 182, 0.9),
        0 0 18px rgba(4, 230, 182, 0.8),
        0 0 24px rgba(4, 230, 182, 0.6),
        0 0 32px rgba(4, 230, 182, 0.4);
}

.contact-info {
    display: flex;
    gap: 1.5rem;
    margin: var(--spacing-xl) 0;
}

.contact-info a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 500;
    padding: 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info a:hover {
    color: var(--accent1);
    filter: drop-shadow(0 0 6px rgba(4, 230, 182, 0.7)) drop-shadow(0 0 12px rgba(4, 230, 182, 0.5));
}

.collapsible-list {
    margin: 4rem 0;
    max-width: 780px;
    padding: 0 var(--spacing-lg);
}

/* Target the last collapsible list to have smaller spacing before footer */
.collapsible-list:last-of-type {
    margin-bottom: var(--spacing-sm);
}

.collapsible-list h3 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--accent1);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    /* Ensure margin stays consistent during transitions */
    transition: none;
    letter-spacing: 0.05em;
}

.collapsible-list ul {
    list-style: none;
    padding-left: 1rem;
}

/* Hide items beyond 5th in collapsed state for artist bio lists */
.collapsible-list.collapsed ul li:nth-child(n+6) {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide items beyond 3rd in collapsed state for project detail lists only */
#project-exhibitions-list.collapsed ul li:nth-child(n+4),
#project-exhibitions-list.collapsed .project-exhibitions-en li:nth-child(n+4),
#project-exhibitions-list.collapsed .project-exhibitions-si li:nth-child(n+4),
#project-awards-list.collapsed ul li:nth-child(n+4),
#project-publications-list.collapsed ul li:nth-child(n+4),
#project-publications-list.collapsed .project-publications-en li:nth-child(n+4),
#project-publications-list.collapsed .project-publications-si li:nth-child(n+4),
#project-media-list.collapsed ul li:nth-child(n+4),
#project-media-list.collapsed .project-media-en li:nth-child(n+4),
#project-media-list.collapsed .project-media-si li:nth-child(n+4),
#byeyeworld-exhibitions-list.collapsed ul li:nth-child(n+4),
#byeyeworld-media-list.collapsed ul li:nth-child(n+4),
#fashion-project-media-list.collapsed ul li:nth-child(n+4),
#step-by-step-exhibitions-list.collapsed ul li:nth-child(n+4),
#step-by-step-media-list.collapsed ul li:nth-child(n+4),
#glitchoslava-exhibitions-list.collapsed ul li:nth-child(n+4),
#first-aid-media-list.collapsed ul li:nth-child(n+4) {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.collapsible-list li {
    margin: 0.8rem 0;
    padding-left: 1rem;
    position: relative;
    transition: opacity 0.3s ease;
}

/* Smooth hover transitions for all collapsible list links */
.collapsible-list li a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
    /* Ensure text-shadow interpolates (none → value is abrupt) */
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.collapsible-list li a:hover {
    /* Subtle unified glow; specific list rules below may override */
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.25);
}

.collapsible-list li:hover {
    /* Subtle unified glow for non-link list items */
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.25);
}

.collapsible-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent1);
}

.show-more {
    display: inline-block;
    margin: 1rem 0;
    color: var(--accent2);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    width: fit-content;
    padding: 0.3rem 0.6rem;
    /* Smooth hover like other buttons */
    transition: var(--transition);
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.show-more:hover {
    color: var(--accent2);
    /* Balanced neon glow effect with coral/orange color */
    text-shadow:
        0 0 8px rgba(255, 109, 105, 0.8),
        0 0 16px rgba(255, 109, 105, 0.6),
        0 0 24px rgba(255, 109, 105, 0.4),
        0 0 32px rgba(255, 109, 105, 0.25);
}

/* Awards list link styling - white color to match other text */
#awards-list li a,
#solo-exhibitions-list li a,
#group-exhibitions-list li a,
#media-list li a,
#project-exhibitions-list li a,
#project-awards-list li a,
#project-media-list li a,
#step-by-step-exhibitions-list li a,
#step-by-step-media-list li a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

#awards-list li a:hover,
#solo-exhibitions-list li a:hover,
#group-exhibitions-list li a:hover,
#media-list li a:hover,
#project-exhibitions-list li a:hover,
#project-awards-list li a:hover,
#project-media-list li a:hover,
#byeyeworld-exhibitions-list li a:hover,
#byeyeworld-media-list li a:hover,
#helloworld-exhibitions-list li a:hover,
#helloworld-media-list li a:hover,
#step-by-step-exhibitions-list li a:hover,
#step-by-step-media-list li a:hover,
#glitchoslava-exhibitions-list li a:hover {
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

/* Media list link styling - match other sections */
#media-list li a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

#media-list li a:hover {
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

/* Project exhibitions list link styling - match artist bio styling */
#project-exhibitions-list li a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

#project-exhibitions-list li a:hover {
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

/* Project awards list link styling - match artist bio styling */
#project-awards-list li a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

#project-awards-list li a:hover {
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

/* Project media list link styling - match artist bio styling */
#project-media-list li a {
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

#project-media-list li a:hover {
    color: var(--accent1);
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
}

/* ==========================================================================
   Project Detail Page Styles
   ========================================================================== */
.project-detail {
    padding: var(--spacing-lg) 0 var(--spacing-2xl) 0;
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
}

/* Make project detail carousel full-width like homepage carousel */
#project-detail .carousel-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Only add margins on super wide screens (>1400px) */
@media (min-width: 1401px) {
    .artist-page {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg);
    }
    
    .artist-header {
        padding: 0; /* Remove individual padding when container has padding */
    }
    
    .project-detail {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--spacing-lg) 0 var(--spacing-2xl) 0;
    }
}

.project-header {
    margin-bottom: 0;
    padding: 0 var(--spacing-lg);
}

.project-header img {
    width: calc(100% + 2 * var(--spacing-lg));
    aspect-ratio: 3.11 / 1;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    margin-bottom: 1.5rem;
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
}

/* Mobile-specific aspect ratio for project header image */
@media (max-width: 768px) {
    .project-header img {
        aspect-ratio: 2 / 1;
        margin-bottom: 0.5rem; /* Further reduced gap between cover and title on mobile */
    }
    
    .project-header h1 {
        margin-top: var(--spacing-sm); /* Further reduced top margin for title on mobile */
    }
}

/* On wide screens, only adjust header image */
@media (min-width: 1401px) {
    .project-header img {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

.project-header h1 {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 3.2rem; /* Back to original size */
    color: var(--accent2);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xs);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: left;
    margin-left: calc(var(--spacing-lg) + 350px + var(--spacing-xl)); /* Match homepage text alignment: hero padding + portrait width + gap */
}

.project-description h2 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--accent1);
    margin-bottom: var(--spacing-md);
    text-align: left;
}

/* Larger size for section subtitles */
.project-description h2[style*="color: #04e6b6"] {
    font-size: 2.25rem;
}

.project-description {
    margin-top: 0;
    margin-bottom: 6rem;
    max-width: 800px;
    padding: 0 var(--spacing-lg);
    margin-left: calc(var(--spacing-lg) + 350px + var(--spacing-xl)); /* Match homepage text alignment: hero padding + portrait width + gap */
}

/* Reset left margin on smaller screens for proper mobile layout */
@media (max-width: 1200px) {
    .project-description {
        margin-left: 0;
    }
    .colophon {
        margin-left: 0; /* Reset alignment on smaller screens */
    }
    
    .project-header h1 {
        margin-left: 0;
    }
}

.project-description p {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: var(--spacing-md);
}

/* Mobile-specific smaller font size for project description text */
@media (max-width: 768px) {
    .project-description p {
        font-size: 1rem;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-bottom: 6rem;
    width: 100%;
}

/* Increase gap for desktop screens */
@media (min-width: 769px) {
    .gallery-grid {
        gap: 6px;
    }
}

/* On wide screens, add padding to gallery to match text content width */
@media (min-width: 1401px) {
    .gallery-grid {
        padding: 0 var(--spacing-lg);
    }
}



.gallery-item {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    cursor: pointer;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    isolation: isolate;
}

/* Dark overlay - hidden by default, visible on hover */
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

/* Safari-specific fix for edge coverage - extend 1px on top and left */
@supports (-webkit-touch-callout: none) {
    .gallery-item::before {
        top: -1px;
        left: -1px;
        right: 0;
        bottom: 0;
    }
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

/* Centered title text - hidden by default, visible on hover */
.gallery-item p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    z-index: 2;
    color: var(--text);
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    margin: 0;
    padding: 0 1rem;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    letter-spacing: 0.05em;
    width: clamp(60%, 76%, 76%); /* allow slight narrowing via viewport scaling */
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}

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

/* Hover effect - show overlay */
.gallery-item:hover::before {
    opacity: 1;
}

/* Show only the caption for the active language to avoid overlaying two texts */
body[data-lang="en"] .gallery-item .caption-si { display: none; }
body[data-lang="si"] .gallery-item .caption-en { display: none; }

body[data-lang="en"] .project-title-si { display: none; }
body[data-lang="si"] .project-title-en { display: none; }

body[data-lang="en"] .description-si { display: none; }
body[data-lang="si"] .description-en { display: none; }

body[data-lang="en"] .subtitle-si { display: none; }
body[data-lang="si"] .subtitle-en { display: none; }

/* Show only the project title for the active language */
body[data-lang="en"] .title-si { display: none; }
body[data-lang="si"] .title-en { display: none; }

/* Show only the project subtitle for the active language */
body[data-lang="en"] .project-description h2 .subtitle-si { display: none; }
body[data-lang="si"] .project-description h2 .subtitle-en { display: none; }

/* Team member language switching */
body[data-lang="en"] .team-section .si { display: none !important; }
body[data-lang="en"] .team-section .en { display: block !important; }
body[data-lang="si"] .team-section .en { display: none !important; }
body[data-lang="si"] .team-section .si { display: block !important; }



.team-section {
    margin: 3rem 0 6rem 0;
    padding: 0 var(--spacing-lg);
}

.team-section h3 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 600;
    color: var(--accent1);
    margin-bottom: 2.5rem;
    font-size: 1.75rem;
    text-transform: lowercase;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;
}

.team-member {
    display: flex;
    gap: 1.5rem;
}

.team-photo {
    width: 120px;
    height: 120px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    flex-shrink: 0;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* When hovering over team photo, trigger name hover effect */
.team-photo:hover ~ .team-info .name a {
    /* Subtle neon glow effect when hovering over image */
    text-shadow: 
        0 0 5px rgba(255, 148, 77, 0.6),
        0 0 10px rgba(255, 148, 77, 0.4),
        0 0 15px rgba(255, 148, 77, 0.2);
}

.team-info p {
    margin: 0.3rem 0;
}

.team-info p:not(.name):not(.role) {
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
}

.team-info .name {
    color: var(--accent3);
    font-weight: bold;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 1.3rem;
}

.team-info .name a {
    color: var(--accent3);
    text-decoration: none;
    transition: var(--transition);
    /* Add subtle resting glow */
    text-shadow: 0 0 3px rgba(255, 148, 77, 0.2);
}

.team-info .name a:hover {
    color: var(--accent3);
    /* Subtle neon glow effect on hover */
    text-shadow: 
        0 0 5px rgba(255, 148, 77, 0.6),
        0 0 10px rgba(255, 148, 77, 0.4),
        0 0 15px rgba(255, 148, 77, 0.2);
}

/* Bio-link wrapper styling for clickable team descriptions */
.bio-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    margin: 0.5rem 0;
    line-height: 1.6;
    font-size: 0.9rem;
    font-family: 'Space Grotesk', 'Inter', 'SF Pro Display', 'Roboto', 'Helvetica Neue', 'Open Sans', sans-serif;
}

/* Style role links to match original role styling */
.bio-link-wrapper.role {
    color: var(--accent1);
    font-size: 0.9rem;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
    margin: 0.25rem 0 0.75rem 0;
}

/* Photo credit styling to match footer copyright */
.team-info .photo-credit {
    font-size: 0.8rem !important;
    opacity: 0.5;
    font-style: italic;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* When hovering anywhere in team-info, trigger name glow */
.team-info:hover .name a {
    text-shadow: 
        0 0 5px rgba(255, 148, 77, 0.6),
        0 0 10px rgba(255, 148, 77, 0.4),
        0 0 15px rgba(255, 148, 77, 0.2);
}

.team-info .role {
    color: var(--accent1);
    font-size: 0.9rem;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 500;
}

/* Medium screens: 2 columns to prevent text from becoming too narrow */
@media (max-width: 1275px) and (min-width: 819px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
        row-gap: 4rem;
    }
}

/* Mobile screens: 1 column */
@media (max-width: 818px) {
    .team-section {
        padding: 0;
    }
    
    .team-section h3 {
        padding: 0 var(--spacing-sm);
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
    
    .team-member {
        display: flex;
        gap: 1.5rem;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .team-info {
        max-width: 600px; /* Prevent text from becoming too wide on tablets */
        flex: 0 1 auto; /* Allow flex item to respect max-width */
    }
    
    .team-photo {
        width: 140px;
        height: 140px;
        margin-left: calc(-1 * var(--spacing-sm));
        flex-shrink: 0;
    }
}



.colophon {
    margin-top: 3rem;
    padding: 2rem var(--spacing-lg) 0 var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 0; /* Keep aligned to left page margin */
}

/* On wide screens (>1400px), constrain the colophon line to match content width */
@media (min-width: 1401px) {
    .colophon {
        position: relative;
    }
    
    .colophon::before {
        content: '';
        position: absolute;
        top: 0;
        left: var(--spacing-lg);
        right: var(--spacing-lg);
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .colophon {
        border-top: none;
    }
}

.colophon h3 {
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 600;
    color: var(--accent1);
    margin-bottom: 1rem;
    font-size: 1.75rem;
    text-transform: lowercase;
}

.colophon p {
    line-height: 1.6;
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

/* Colophon logos row */
.colophon-content { max-width: 920px; }
.colophon-logos {
    display: flex;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
    align-items: center;
    justify-content: flex-start; /* align left */
    flex-wrap: wrap; /* support 1-3 logos nicely */
}

.colophon-logos img {
    height: 84px; /* slightly smaller */
    width: auto;
    opacity: 0.85;
    transition: var(--transition);
}

.colophon-logos img:hover {
    opacity: 1;
}

/* ==========================================================================
   Lightbox Styles
   ========================================================================== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use dynamic viewport units for better mobile support */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    display: flex; /* Always flex for smooth animations */
    align-items: center;
    justify-content: center;
    z-index: 10600; /* Above header (10500) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out, backdrop-filter 0.25s ease-out;
    /* Ensure lightbox covers entire viewport on mobile */
    min-height: 100vh;
    min-height: 100dvh;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.lightbox-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none; /* Remove width constraint for full screen */
}

/* Image container for animations */
.lightbox-image-container {
    position: relative;
    width: 100vw;
    height: calc(85vh - 6rem); /* Account for caption space */
    height: calc(85dvh - 6rem); /* Dynamic viewport height with caption space */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Important for slide animation */
    /* Match the main lightbox background */
    background: transparent;
    border-radius: 0; /* Remove border radius for full screen */
    /* Enable touch handling for pinch-to-zoom on mobile */
    touch-action: pan-x pan-y;
}

/* Tablet styles - full width for better touch experience */
@media (min-width: 769px) and (max-width: 1199px) {
    .lightbox-image-container {
        width: 100vw;
        height: calc(85vh - 6rem); /* Consistent with desktop - account for caption space */
        height: calc(85dvh - 6rem); /* Dynamic viewport height with caption space */
        border-radius: 0;
        background: transparent;
    }
}

/* For larger desktop screens - always use full width edge-to-edge */
@media (min-width: 1200px) {
    .lightbox-image-container {
        width: 100vw; /* Full width edge-to-edge */
        max-width: none; /* No width constraint */
        border-radius: 0; /* No border radius for clean edge-to-edge look */
        background: transparent;
    }
}

/* Narrow desktop: scale captions for 900–1199px (larger for readability) */
@media (min-width: 900px) and (max-width: 1199px) {
    .gallery-item p { font-size: clamp(0.95rem, 1.35vw, 1.15rem); }
}

/* Very narrow desktop: 769–899px (increase further) */
@media (min-width: 769px) and (max-width: 899px) {
    .gallery-item p { font-size: clamp(0.9rem, 1.6vw, 1.2rem); }
}

.lightbox-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    /* Ensure crisp image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-contrast;
}

.lightbox-caption {
    text-align: center;
    color: #999999;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-style: italic;
    font-size: 0.9rem;
    max-width: 95vw;
    line-height: 1.4;
    transition: opacity 0.3s ease;
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Animation keyframes for smooth slide effects */
@keyframes slideInFromRight {
    from {
        transform: translate(100%, -50%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translate(-200%, -50%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: translate(-200%, -50%);
        opacity: 0;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: translate(100%, -50%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.close-lightbox {
    position: absolute;
    top: 3rem;
    right: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: var(--transition);
    z-index: 1001;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    gap: 0;
    padding: 0;
    overflow: visible;
    isolation: isolate; /* prevent parent blending artifacts with glow */
}

.close-line {
    width: 30px;
    height: 3px;
    background: var(--accent2);
    transition: var(--transition);
    border-radius: 2px;
    position: absolute;
}

.close-line:nth-child(1) {
    transform: rotate(45deg);
}

.close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.close-lightbox:hover {
    background: transparent;
}

.close-lightbox:hover .close-line {
    background: var(--accent2);
    box-shadow: 
        0 0 8px rgba(255, 109, 105, 0.9),
        0 0 15px rgba(255, 109, 105, 0.7),
        0 0 25px rgba(255, 109, 105, 0.5),
        0 0 35px rgba(255, 109, 105, 0.3);
}

.close-lightbox:focus {
    background: transparent;
}

.close-lightbox:focus .close-line {
    background: var(--accent2);
    /* Same color as default - no flash when focused */
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    color: transparent;
    border: none;
    font-size: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0.8;
}

.lightbox-nav::before,
.lightbox-nav::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: var(--transition);
}

.lightbox-nav.prev::before {
    transform: rotate(45deg) translate(3px, 5px);
}

.lightbox-nav.prev::after {
    transform: rotate(-45deg) translate(3px, -5px);
}

.lightbox-nav.next::before {
    transform: rotate(-45deg) translate(-3px, 5px);
}

.lightbox-nav.next::after {
    transform: rotate(45deg) translate(-3px, -5px);
}

.lightbox-nav:hover::before,
.lightbox-nav:hover::after {
    background: var(--accent1);
    box-shadow: 
        0 0 8px rgba(4, 230, 182, 0.9),
        0 0 15px rgba(4, 230, 182, 0.7),
        0 0 25px rgba(4, 230, 182, 0.5),
        0 0 35px rgba(4, 230, 182, 0.3);
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
    transform: translateY(-50%);
}

.lightbox-nav:active {
    transform: translateY(-50%);
}

.lightbox-nav.prev {
    left: 2rem;
}

.lightbox-nav.next {
    right: 2rem;
}

.lightbox-nav:disabled {
    opacity: 0;
    cursor: not-allowed;
}

.lightbox-nav:disabled::before,
.lightbox-nav:disabled::after {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav:disabled:hover::before,
.lightbox-nav:disabled:hover::after {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* Mobile responsive lightbox styles */
@media (max-width: 768px) {
    /* Enhanced mobile lightbox fixes */
    .lightbox {
        /* Force full coverage on mobile devices */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height */
        min-height: 100vh;
        min-height: 100dvh;
        /* Add transform to force GPU acceleration and prevent rendering glitches */
        transform: translateZ(0);
        will-change: opacity, visibility;
        /* Ensure no overflow */
        overflow: hidden;
    }
    
    .lightbox-content {
        /* Full screen on mobile */
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        padding: 0;
        box-sizing: border-box;
        justify-content: flex-start; /* Position images at top on mobile */
        align-items: center;
        padding-top: 5rem; /* Space for close button - increased for more breathing room */
    }
    
    .lightbox-image-container {
        width: 100vw;
        max-width: 100vw;
        max-height: calc(80vh - 5rem); /* Reduced to move lower edge higher, creating more space for text */
        max-height: calc(80dvh - 5rem);
        margin-bottom: 0;
        border-radius: 0;
        background: transparent;
        display: flex;
        align-items: flex-start; /* Align images to top */
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        /* Enable touch handling for pinch-to-zoom on mobile */
        touch-action: pan-x pan-y;
    }
    
    .lightbox-content img {
        width: 100vw; /* Fill width from edge to edge */
        max-width: 100vw;
        height: auto;
        max-height: calc(80vh - 5rem); /* Reduced to move lower edge higher, creating more space for text */
        max-height: calc(80dvh - 5rem);
        object-fit: contain;
        object-position: top center; /* Position images at top */
        display: block;
    }
    
    .lightbox-caption {
        font-size: 0.8rem;
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 0; /* No padding - container edge is 1.5rem from viewport, matching bottom spacing */
        max-width: calc(100vw - 3rem); /* 1.5rem spacing from left/right edges (matches bottom spacing of 1.5rem) */
        width: calc(100vw - 3rem);
        box-sizing: border-box;
        display: flex;
        align-items: flex-end; /* Align text to bottom of container - ensures consistent distance from viewport edge */
        justify-content: center;
        min-height: 4rem; /* Reduced height since less text expected */
        text-align: center;
        line-height: 1.4;
    }
    
    .close-lightbox {
        top: 1rem; /* Match right spacing for equal distance from viewport edges */
        right: 1rem;
        width: 45px;
        height: 45px;
        /* Reduce glow effects on mobile for better performance */
        box-shadow: none;
    }
    
    .close-line {
        width: 25px;
        height: 2px;
    }
    
    /* Simplify navigation on mobile */
    .lightbox-nav {
        width: 50px;
        height: 50px;
        /* Remove glow effects on mobile */
        box-shadow: none;
    }
    
    .lightbox-nav::before,
    .lightbox-nav::after {
        width: 18px;
        height: 2px;
    }
    
    .lightbox-nav.prev {
        left: 1rem;
    }
    
    .lightbox-nav.next {
        right: 1rem;
    }
    
    /* Hide navigation buttons on mobile but keep swiping functionality */
    .lightbox-nav {
        display: none !important;
    }
    
    .lightbox-caption {
        font-size: 0.8rem;
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 3rem); /* 1.5rem spacing from left/right edges (matches bottom spacing of 1.5rem) */
        width: calc(100vw - 3rem);
        padding: 0; /* No padding - container edge is 1.5rem from viewport, matching bottom spacing */
        box-sizing: border-box;
        display: flex;
        align-items: flex-end; /* Align text to bottom of container - ensures consistent distance from viewport edge */
        justify-content: center;
        min-height: 4rem; /* Reduced height since less text expected */
        text-align: center;
        line-height: 1.4;
    }
    
    /* MOBILE ONLY: Disable ALL glow effects in lightbox to prevent rendering issues */
    .lightbox .lightbox-nav::before,
    .lightbox .lightbox-nav::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .lightbox .lightbox-nav:hover::before,
    .lightbox .lightbox-nav:hover::after,
    .lightbox .lightbox-nav:active::before,
    .lightbox .lightbox-nav:active::after {
        box-shadow: none !important;
        text-shadow: none !important;
        /* Keep color changes but remove all glow effects */
        background: var(--accent1);
    }
    
    .lightbox .close-lightbox .close-line {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .lightbox .close-lightbox:hover .close-line,
    .lightbox .close-lightbox:active .close-line {
        box-shadow: none !important;
        text-shadow: none !important;
        /* Keep color changes but remove all glow effects */
        background: var(--accent2);
    }
    
    /* Prevent any inherited glow effects in lightbox content */
    .lightbox .lightbox-content,
    .lightbox .lightbox-content * {
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }
    
    /* NUCLEAR OPTION: Completely prevent any glow effects in lightbox on mobile */
    .lightbox,
    .lightbox * {
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
    }
    
    /* But preserve essential transforms for positioning and ensure slightly transparent background */
    .lightbox {
        transform: translateZ(0) !important;
        background: rgba(0, 0, 0, 0.95) !important; /* Slightly transparent background */
        backdrop-filter: blur(8px) !important; /* Add blur effect for better focus */
    }
    
    .lightbox .lightbox-content img {
        /* Preserve essential image properties */
        object-fit: contain !important;
    }
    
    /* Ensure buttons still work but with no glow effects */
    .lightbox .lightbox-nav {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .lightbox .close-lightbox {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    /* Optimize lightbox for mobile while keeping smooth animation */
    .lightbox.active {
        background: rgba(0, 0, 0, 0.95) !important; /* Slightly transparent background */
        backdrop-filter: blur(8px) !important; /* Add blur effect for better focus */
        /* Keep transitions but optimize for mobile performance */
        transition: opacity 0.2s ease-out, visibility 0.2s ease-out !important;
    }
}

/* ==========================================================================
   Homepage Hero Layout Fixes
   ========================================================================== */
#home .hero-content h1,
#home .hero-content p,
#home .more-button {
    text-align: left !important;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 993px) {
    #home .hero {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

@media (min-width: 993px) {
    #home .hero-content {
        padding-top: 0;
        flex: 1;
        margin-left: 2rem;
    }

    #home .portrait {
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   Artist Page Layout Fixes - Match Homepage Exactly
   ========================================================================== */
#artist .artist-info h1,
#artist .artist-info p,
#artist .contact-info {
    text-align: left !important;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 993px) {
    #artist .artist-header {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

@media (min-width: 993px) {
    #artist .artist-info {
        padding-top: 0;
        flex: 1;
        margin-left: 2rem;
    }

    #artist .artist-portrait {
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   Semi-narrow screens: Images touch left edge until content width limit
   ========================================================================== */
@media (min-width: 993px) and (max-width: 1400px) {
    /* Homepage - only affect hero section */
    .hero {
        padding-left: 0;
        margin-left: 0;
        position: relative;
    }
    
    #home .portrait {
        position: absolute;
        left: 0;
        margin-left: 0;
        border-radius: 0;
    }
    
    #home .hero-content {
        margin-left: 370px; /* Portrait width + gap */
        padding-left: var(--spacing-lg);
    }
    
    /* Bio page - make image stick to edge but keep lists properly spaced */
    .artist-page {
        padding-left: 0;
    }
    
    .artist-header {
        margin-left: 0;
        position: relative;
    }
    
    #artist .artist-portrait {
        position: absolute;
        left: 0;
        margin-left: 0;
        border-radius: 0;
    }
    
    #artist .artist-info {
        margin-left: 370px; /* Portrait width + gap */
        padding-left: var(--spacing-lg);
    }
    
    /* Restore normal spacing for lists and content below artist header */
    .collapsible-list {
        padding: 0 var(--spacing-lg);
        margin-left: 0;
    }
}

/* Slightly wider lists on medium-large desktops to reduce single-word wraps */
@media (min-width: 1200px) and (max-width: 1400px) {
    .collapsible-list {
        max-width: 820px;
    }
}

/* Override for screens wider than content width limit */
@media (min-width: 1401px) {
    .hero {
        margin-left: auto;
        margin-right: auto;
    }
    
    #home .portrait {
        position: static;
        left: auto;
    }
    
    #home .hero-content {
        margin-left: 2rem;
        padding-left: 0;
    }
    
    .artist-header {
        margin-left: auto;
        margin-right: auto;
    }
    
    #artist .artist-portrait {
        position: static;
        left: auto;
    }
    
    #artist .artist-info {
        margin-left: 2rem;
        padding-left: 0;
    }
    
    /* Reset collapsible lists to no padding when container has padding - but only on artist page */
    #artist .collapsible-list {
        padding: 0;
    }
    
    /* Keep padding for project detail lists to match other elements like colophon, gallery-grid */
    .project-detail .collapsible-list {
        padding: 0 var(--spacing-lg);
    }
}

/* ==========================================================================
   Custom Floating Scrollbar
   ========================================================================== */
.custom-scrollbar {
    position: fixed;
    top: 0;
    right: 8px;
    width: 6px;
    height: 100vh;
    z-index: 350;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Scrollbar only visible when actively scrolling - no default visibility */

.custom-scrollbar-track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    pointer-events: auto;
    cursor: pointer;
}

.custom-scrollbar-thumb {
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--accent1) 0%, var(--accent2) 100%);
    border-radius: 3px;
    min-height: 20px;
    cursor: grab;
    pointer-events: auto;
    transition: all 0.2s ease;
    box-shadow: 
        0 0 4px rgba(4, 230, 182, 0.2),
        0 0 8px rgba(4, 230, 182, 0.1);
}

/* Hover effect removed for more subtle appearance */

.custom-scrollbar-thumb:active,
.custom-scrollbar-thumb.dragging {
    cursor: grabbing;
}

/* Show scrollbar when scrolling - but only if it's needed */
.custom-scrollbar.scrolling {
    opacity: 0.35;
}

/* Hide scrollbar when fullscreen menu is active */
.fullscreen-menu.active ~ .custom-scrollbar {
    opacity: 0 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .custom-scrollbar {
        right: 4px;
        width: 4px;
    }
    
    .custom-scrollbar-track {
        top: 10px;
        bottom: 10px;
    }
    
    .custom-scrollbar-thumb {
        border-radius: 2px;
    }
    
    /* Mobile hover effect removed */
    
    .custom-scrollbar-thumb:active,
    .custom-scrollbar-thumb.dragging {
        cursor: grabbing;
    }
}

/* ==========================================================================
   Touch Device Hover Fix - Disable glow effects on touch devices
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Only disable the problematic glow effects, keep all other hover functionality */
    
    /* Fix stuck hover - use :active for touch devices */
    .logo:hover::before {
        opacity: 0;
    }
    
    .logo:active::before {
        opacity: 1;
    }
    
    /* Fix stuck hover - use :active for touch devices */
    .burger-menu:hover .burger-line {
        background: var(--accent1);
        box-shadow: none;
    }
    
    .burger-menu:active .burger-line {
        background: var(--accent1);
        box-shadow: 
            0 0 10px rgba(4, 230, 182, 1),
            0 0 20px rgba(4, 230, 182, 0.6),
            0 0 40px rgba(4, 230, 182, 0.3);
    }
    
    .burger-menu.active:hover .burger-line {
        background: var(--accent2);
        box-shadow: none;
    }
    
    .burger-menu.active:active .burger-line {
        background: var(--accent2);
        box-shadow: 
            0 0 8px rgba(255, 109, 105, 0.9),
            0 0 15px rgba(255, 109, 105, 0.7),
            0 0 25px rgba(255, 109, 105, 0.5),
            0 0 35px rgba(255, 109, 105, 0.3);
    }
    
    /* Fix stuck hover for show-more buttons */
    .show-more:hover {
        color: var(--accent2);
        text-shadow: none;
    }
    
    .show-more:active {
        color: var(--accent2);
        text-shadow:
            0 0 8px rgba(255, 109, 105, 0.8),
            0 0 16px rgba(255, 109, 105, 0.6),
            0 0 24px rgba(255, 109, 105, 0.4),
            0 0 32px rgba(255, 109, 105, 0.25);
    }
    
    /* Fix stuck hover for homepage buttons */
    .more-button:hover {
        color: var(--accent2);
        border-color: var(--accent2);
        box-shadow: none;
        text-shadow: none;
    }
    
    .more-button:active {
        box-shadow: 
            0 0 8px rgba(255, 109, 105, 1),
            0 0 25px rgba(255, 109, 105, 0.7),
            0 0 60px rgba(255, 109, 105, 0.4);
        color: var(--accent2);
        border-color: var(--accent2);
        text-shadow: 
            0 0 10px rgba(255, 109, 105, 1),
            0 0 20px rgba(255, 109, 105, 0.6);
        border: 2px solid rgba(255, 109, 105, 1);
    }
    
    /* Fix stuck hover for menu links */
    .menu-link:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    .menu-link:active {
        color: var(--accent1);
        text-shadow: 
            0 0 5px rgba(4, 230, 182, 0.7),
            0 0 10px rgba(4, 230, 182, 0.4),
            0 0 15px rgba(4, 230, 182, 0.2);
    }
    
    /* Fix stuck hover for language menu */
    .language-menu-toggle a:hover {
        color: var(--accent2);
        text-shadow: none;
    }
    
    .language-menu-toggle a:active {
        color: var(--accent2);
        text-shadow:
            0 0 15px rgba(255, 109, 105, 0.9),
            0 0 30px rgba(255, 109, 105, 0.7),
            0 0 45px rgba(255, 109, 105, 0.5);
    }
    
    /* Fix stuck hover for content links */
    .hero-content p a:hover {
        color: var(--accent1);
        border-bottom-color: var(--accent1);
        text-shadow: none;
    }
    
    .hero-content p a:active {
        color: var(--accent1);
        border-bottom-color: var(--accent1);
        text-shadow: 
            0 0 6px rgba(4, 230, 182, 0.8),
            0 0 12px rgba(4, 230, 182, 0.5),
            0 0 18px rgba(4, 230, 182, 0.3);
    }
    
    .artist-info p a:hover {
        color: var(--accent1);
        border-bottom-color: var(--accent1);
        text-shadow: none;
    }
    
    .artist-info p a:active {
        color: var(--accent1);
        border-bottom-color: var(--accent1);
        text-shadow: 
            0 0 5px rgba(4, 230, 182, 1),
            0 0 10px rgba(4, 230, 182, 0.8),
            0 0 15px rgba(4, 230, 182, 0.6),
            0 0 20px rgba(4, 230, 182, 0.4),
            0 0 30px rgba(4, 230, 182, 0.3),
            0 0 40px rgba(4, 230, 182, 0.2);
    }
    
    #awards-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #awards-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }
    
    #solo-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #solo-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }
    
    #project-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #project-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }
    
    #project-awards-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #project-awards-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }
    
    #project-media-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #project-media-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #byeyeworld-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }

    #byeyeworld-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #byeyeworld-media-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }

    #byeyeworld-media-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #helloworld-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }

    #helloworld-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #helloworld-media-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }

    #helloworld-media-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #step-by-step-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #step-by-step-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #step-by-step-media-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #step-by-step-media-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    #glitchoslava-exhibitions-list li a:hover {
        color: var(--accent1);
        text-shadow: none;
    }
    
    #glitchoslava-exhibitions-list li a:active {
        color: var(--accent1);
        text-shadow: 0 0 5px rgba(4, 230, 182, 0.3);
    }

    .close-lightbox:hover {
        background: rgba(0, 0, 0, 0.7);
    }
    
    .close-lightbox:hover .close-line {
        background: var(--accent2);
        box-shadow: none;
    }
    
    .close-lightbox:active {
        background: rgba(0, 0, 0, 0.7);
    }
    
    .close-lightbox:active .close-line {
        background: var(--accent2);
        box-shadow: 
            0 0 8px rgba(255, 109, 105, 0.9),
            0 0 15px rgba(255, 109, 105, 0.7),
            0 0 25px rgba(255, 109, 105, 0.5),
            0 0 35px rgba(255, 109, 105, 0.3);
    }
    
    /* Fix gallery hover effects on touch devices */
    .gallery-item:hover::before,
    .gallery-item:hover p {
        opacity: 0;
    }
    
    .gallery-item:active::before,
    .gallery-item:active p {
        opacity: 1;
    }
    
    /* TOUCH DEVICES: Disable glow effects ONLY in lightbox */
    .lightbox .lightbox-nav:hover::before,
    .lightbox .lightbox-nav:hover::after {
        background: white;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .lightbox .lightbox-nav:active::before,
    .lightbox .lightbox-nav:active::after {
        background: var(--accent1);
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .lightbox .close-lightbox:hover .close-line {
        background: var(--accent2);
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .lightbox .close-lightbox:active .close-line {
        background: var(--accent2);
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* Disable intensive glow effects that can cause mobile performance issues */
    .team-photo:hover ~ .team-info .name a {
        text-shadow: none;
    }
    
    .team-photo:active ~ .team-info .name a {
        text-shadow: 0 0 3px rgba(255, 148, 77, 0.4);
    }
    
    .team-info .name a:hover {
        text-shadow: none;
    }
    
    .team-info .name a:active {
        text-shadow: 0 0 3px rgba(255, 148, 77, 0.4);
    }
    
    /* Disable bio-link hover effects on mobile for performance */
    .team-info:hover .name a {
        text-shadow: none;
    }
    .team-info:active .name a {
        text-shadow: 0 0 3px rgba(255, 148, 77, 0.4);
    }
    
    /* Mobile photo credit styling */
    .team-info .photo-credit {
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   Mobile Viewport Unit Support
   ========================================================================== */
/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
    .lightbox {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    @media (max-width: 768px) {
        .lightbox-content {
            max-height: 95vh !important;
        }
        
        .lightbox-content img {
            max-height: 70vh !important;
        }
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 992px) {
    /* Make project header image extend to edges on tablets */
    .project-header img {
        width: calc(100% + 2 * var(--spacing-lg));
        margin-left: calc(-1 * var(--spacing-lg));
        margin-right: calc(-1 * var(--spacing-lg));
    }
    
    .hero,
    #home .hero {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .hero-content,
    #home .hero-content {
        padding-top: 0;
        width: 100%;
        max-width: 600px;
        margin-left: 0 !important;
    }
    
    .portrait,
    #home .portrait {
        width: 100vw;
        height: 100vw;
        margin-left: calc(-1 * var(--spacing-lg));
        margin-right: calc(-1 * var(--spacing-lg));
        margin-bottom: var(--spacing-md);
    }
    
    .artist-header,
    #artist .artist-header {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .artist-info,
    #artist .artist-info {
        padding-top: 0;
        width: 100%;
        max-width: 600px;
        margin-left: 0 !important;
    }
    
    .artist-portrait,
    #artist .artist-portrait {
        width: 100vw;
        height: 100vw;
        margin-left: calc(-1 * var(--spacing-lg));
        margin-right: calc(-1 * var(--spacing-lg));
        margin-bottom: var(--spacing-md);
    }
    
    .portrait img,
    .artist-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    #home .hero-content h1,
    #home .hero-content p,
    #home .more-button {
        text-align: left !important;
    }

    #artist .artist-info h1,
    #artist .artist-info p,
    #artist .contact-info {
        text-align: left !important;
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 76px; /* Adjusted for smaller mobile header */
        /* Keep body from extending past viewport height when header is fixed */
        min-height: calc(100vh - 76px);
    }
    
    header {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    .logo img {
        height: 60px;
    }

    .burger-menu {
        width: 45px;
        height: 45px;
    }

    .burger-line {
        width: 25px;
        height: 2px;
    }

    /* .menu-link font-size now handled by responsive clamp() in main styles */

    /* .social-menu-links gap now handled by responsive clamp() in main styles */

    .social-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .hero {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
    }
    
    /* Projects page mobile spacing to match homepage/bio */
    .projects-page {
        padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
        min-height: auto; /* Let content determine height on mobile */
    }
    
    /* Project detail page mobile spacing to match homepage/bio */  
    .project-detail {
        padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
    }
    
    .hero h1 {
        font-size: 2.6rem;
    }
    
    .hero-content p {
        font-size: 1.0rem;
    }
    
    /* Match homepage font sizes on mobile */
    .artist-info h1 {
        font-size: 2.6rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile screens - restore original layout styles */
@media (max-width: 768px) {
    body {
        padding-top: 76px; /* Adjusted for smaller mobile header */
        /* Keep body from extending past viewport height when header is fixed */
        min-height: calc(100vh - 76px);
    }
    
    header {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    .logo img {
        height: 60px;
    }

    .burger-menu {
        width: 45px;
        height: 45px;
    }

    .burger-line {
        width: 25px;
        height: 2px;
    }

    .social-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .hero {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
    }
    
    /* Projects page mobile spacing to match homepage/bio */
    .projects-page {
        padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
        min-height: auto; /* Let content determine height on mobile */
    }
    
    /* Project detail page mobile spacing to match homepage/bio */  
    .project-detail {
        padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
    }
    
    .hero h1 {
        font-size: 2.6rem;
    }
    
    .hero-content p {
        font-size: 1.0rem;
    }
    
    /* Match homepage font sizes on mobile */
    .artist-info h1 {
        font-size: 2.6rem;
    }
    
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .artist-header,
    #artist .artist-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-info {
        justify-content: center;
    }
    
    .buttons-container {
        justify-content: center;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }
    
    /* Smaller titles on mobile gallery for better fit */
    .gallery-item p {
        font-size: 0.6rem; /* even smaller on mobile */
        padding: 0 0.5rem;
        width: 74%; /* slightly narrower */
    }
    

    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-member {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .team-info {
        max-width: 600px; /* Prevent text from becoming too wide */
        flex: 0 1 auto; /* Allow flex item to respect max-width */
    }
    
    .team-photo {
        width: 140px;
        height: 140px;
        margin-left: calc(-1 * var(--spacing-sm));
        flex-shrink: 0;
    }



    .carousel-section {
        padding: 0;
    }

    .carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .carousel-nav.prev {
        left: 0.5rem;
    }

    .carousel-nav.next {
        right: 0.5rem;
    }

    /* Footer Mobile Styles */
    footer {
        padding: var(--spacing-lg) 0 var(--spacing-md) 0;
    }
    
    .footer-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0 var(--spacing-sm);
    }
    
    .footer-right {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        order: 1;
    }
    
    .footer-contact {
        font-size: 0.7rem;
    }
    
    .social-links {
        gap: 0.75rem;
    }
    
    .social-links a {
        padding: 0.25rem;
    }
    
    .copyright {
        font-size: 0.7rem;
        text-align: left;
        order: 2;
    }
    
    /* Collapsible lists mobile adjustments */
    .collapsible-list {
        margin: 2rem 0; /* Reduced margin for mobile */
        padding: 0 var(--spacing-sm); /* Match mobile horizontal padding */
    }
    
    /* Target the last collapsible list on mobile for smaller spacing */
    .collapsible-list:last-of-type {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Hide items beyond 4th in collapsed state on mobile for artist bio lists */
    .collapsible-list.collapsed ul li:nth-child(n+5) {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Hide items beyond 3rd in collapsed state on mobile for project detail lists */
    #project-exhibitions-list.collapsed ul li:nth-child(n+4),
    #project-exhibitions-list.collapsed .project-exhibitions-en li:nth-child(n+4),
    #project-exhibitions-list.collapsed .project-exhibitions-si li:nth-child(n+4),
    #project-awards-list.collapsed ul li:nth-child(n+4),
    #project-publications-list.collapsed ul li:nth-child(n+4),
    #project-publications-list.collapsed .project-publications-en li:nth-child(n+4),
    #project-publications-list.collapsed .project-publications-si li:nth-child(n+4),
    #project-media-list.collapsed ul li:nth-child(n+4),
    #project-media-list.collapsed .project-media-en li:nth-child(n+4),
    #project-media-list.collapsed .project-media-si li:nth-child(n+4),
    #byeyeworld-exhibitions-list.collapsed ul li:nth-child(n+4),
    #byeyeworld-media-list.collapsed ul li:nth-child(n+4),
    #first-aid-media-list.collapsed ul li:nth-child(n+4) {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .collapsible-list ul {
        padding-left: 0.5rem; /* Reduced padding for mobile */
    }
    
    .collapsible-list li {
        padding-left: 0.75rem; /* Adjusted for mobile */
        margin: 0.6rem 0; /* Slightly tighter spacing */
    }
    
    /* Artist page mobile adjustments - remove horizontal padding like project detail page */
    .artist-page {
        padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
        min-height: calc(100vh - 150px); /* Mobile-specific minimum height */
    }
    
    /* Project detail page mobile minimum height fix */
    .project-detail {
        min-height: calc(100vh - 150px); /* Mobile-specific minimum height to prevent footer gaps */
    }
    
    /* Give individual elements their own padding like project detail page */
    .artist-header {
        padding: 0 var(--spacing-sm);
    }
    
    /* Project detail page mobile adjustments - match homepage and bio page margins */
    .project-header {
        padding: 0 var(--spacing-sm); /* Use smaller mobile margins like homepage/bio */
    }
    
    /* Make header image extend to edges on mobile */
    .project-header img {
        width: calc(100% + 2 * var(--spacing-sm));
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
    }
    
    .project-description {
        padding: 0 var(--spacing-sm); /* Use smaller mobile margins like homepage/bio */
    }
    
    .team-section {
        padding: 0;
    }
    
    .team-section h3 {
        padding: 0 var(--spacing-sm);
    }
    
    .colophon {
        padding: 2rem var(--spacing-sm) 0 var(--spacing-sm);
    }
    .colophon-logos {
        gap: var(--spacing-lg);
        margin-top: var(--spacing-md);
    }
    .colophon-logos img {
        height: 60px; /* scale down a bit on mobile too */
    }
}

/* ==========================================================================
   Lazy Loading Styles
   ========================================================================== */

/* Base lazy loading styles - Chrome optimized */
img.lazy-load {
    background-color: #141414; /* Darker background to match theme */
    background-image: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.0) 0%, 
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 70%, 
        rgba(255, 255, 255, 0.0) 100%);
    background-size: 400px 100%;
    background-position: -400px 0;
    
    /* Hide broken image icon and alt text */
    color: transparent;
    overflow: hidden;
    position: relative;
    
    /* Sharp edges - no border radius */
    border-radius: 0;
    
    /* NO BORDER - clean rectangle */
    border: none;
    
    /* Combined animations for cross-browser compatibility */
    animation: loading-shimmer 2.0s infinite linear, loading-pulse 2.5s infinite ease-in-out;
    
    /* Base display properties - can be overridden by specific selectors */
    display: block;
    
    /* Chrome GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
}

/* Shimmer animation surface - this creates the animated rectangle */
img.lazy-load::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #141414;
    background-image: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.0) 0%, 
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 70%, 
        rgba(255, 255, 255, 0.0) 100%);
    background-size: 400px 100%;
    background-position: -400px 0;
    animation: loading-shimmer 2.0s infinite linear;
    z-index: 1;
    border-radius: inherit;
    
    /* Chrome GPU acceleration for the shimmer */
    transform: translateZ(0);
    will-change: background-position;
}

/* Loading shimmer animation - improved visibility and timing */
@keyframes loading-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: calc(400px + 100%) 0;
    }
}

/* Specific loading states for different image types - exact match */
.carousel-slide img.lazy-load {
    width: 100% !important; /* Ensure width matches final image */
    height: 650px !important; /* Match desktop carousel height exactly */
    object-fit: cover; /* Match final image behavior */
    display: block; /* Match final image display */
}

/* Responsive lazy loading heights for carousel - exact match */
@media (max-width: 1400px) and (min-width: 993px) {
    .carousel-slide img.lazy-load {
        height: 500px !important; /* Match narrower desktop carousel height exactly */
    }
}

@media (max-width: 992px) {
    .carousel-slide img.lazy-load {
        height: 400px !important; /* Match tablet carousel height exactly */
    }
}

@media (max-width: 768px) {
    .carousel-slide img.lazy-load {
        height: 250px !important; /* Match mobile carousel height exactly */
    }
}

/* Chrome-compatible sizing for project items - match final image exactly */
.project-item img.lazy-load {
    width: 100% !important; /* Ensure width matches final image */
    aspect-ratio: 1; /* Exact match with final image */
    height: auto; /* Let aspect-ratio control height */
    object-fit: cover; /* Match final image behavior */
    display: block; /* Match final image display */
}

/* Chrome-compatible sizing for gallery items - match final image exactly */
.gallery-item img.lazy-load {
    width: 100% !important; /* Ensure width matches final image */
    aspect-ratio: 1; /* Exact match with final image */
    height: auto; /* Let aspect-ratio control height */
    object-fit: cover; /* Match final image behavior */
    display: block; /* Match final image display */
}

/* Chrome-compatible sizing for team photos */
.team-photo img.lazy-load {
    width: 120px;
    height: 120px; /* Explicit square dimensions */
    min-height: 120px;
    max-height: 120px; /* Ensure exact size in Chrome */
    border-radius: 0; /* Override to sharp edges */
}

/* Chrome-compatible sizing for artist portraits - exact match */
.artist-portrait img.lazy-load {
    width: 100%; /* Match final image width */
    height: 100%; /* Match final image height */
    object-fit: cover; /* Match final image behavior */
    min-height: 300px; /* Fallback for older browsers */
}

/* Remove shimmer and overlay once image is loaded */
img:not(.lazy-load) {
    animation: none;
    background-image: none;
    background-color: transparent;
    color: initial;
    border-radius: 0;
    border: none;
}

img:not(.lazy-load)::before {
    display: none;
}

/* Fade-in transition for loaded images */
img[src] {
    transition: opacity 0.2s ease;
}

/* Enhanced loading states for different contexts - exact match */
.project-header img.lazy-load {
    width: calc(100% + 2 * var(--spacing-lg)); /* Match final image width exactly */
    aspect-ratio: 3.11 / 1; /* Match final image aspect ratio exactly */
    object-fit: cover; /* Match final image behavior */
    margin-left: calc(-1 * var(--spacing-lg)); /* Match final image margins */
    margin-right: calc(-1 * var(--spacing-lg)); /* Match final image margins */
    margin-bottom: 1.5rem; /* Match final image margin */
    min-height: 250px; /* Fallback for older browsers */
    border-radius: 0; /* Sharp edges */
}

/* Mobile-specific lazy loading for project header images to prevent layout shifts */
@media (max-width: 768px) {
    .project-header img.lazy-load {
        width: calc(100% + 2 * var(--spacing-sm)); /* Match mobile final image width */
        aspect-ratio: 2 / 1; /* Match mobile final image aspect ratio */
        margin-left: calc(-1 * var(--spacing-sm)); /* Match mobile final image margins */
        margin-right: calc(-1 * var(--spacing-sm)); /* Match mobile final image margins */
        margin-bottom: 0.5rem; /* Match mobile final image margin */
    }
}

.gallery-item img.lazy-load {
    border-radius: 0; /* Sharp edges */
}

.team-photo img.lazy-load {
    border-radius: 0; /* Sharp edges instead of circular */
}

/* Very small mobile screens - only affect project grid titles */
@media (max-width: 320px) {
    .project-item p {
        font-size: 0.75rem !important;
        padding: 0 0.4rem;
    }
}

@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}

/* Chrome-specific optimizations */
@supports (-webkit-appearance: none) {
    img.lazy-load {
        /* Enhanced Chrome GPU acceleration */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    img.lazy-load::before {
        /* Chrome shimmer animation optimization on the surface */
        -webkit-animation: loading-shimmer 2.0s infinite linear;
        animation: loading-shimmer 2.0s infinite linear;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Chrome shimmer animation optimization */
    @-webkit-keyframes loading-shimmer {
        0% {
            background-position: -400px 0;
        }
        100% {
            background-position: calc(400px + 100%) 0;
        }
    }
    
    @-webkit-keyframes loading-pulse {
        0%, 100% {
            opacity: 0.9;
        }
        50% {
            opacity: 1;
        }
    }
}

/* ==========================================================================
   Cookie Consent Banner - Minimal & Discrete
   ========================================================================== */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 50%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    /* Consistent orange outline matching button thickness */
    border-top: 1px solid var(--accent2);
    border-right: 1px solid var(--accent2);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    pointer-events: none; /* Don't interfere with page content when hidden */
    opacity: 0; /* Make completely invisible when hidden */
}

.cookie-consent-banner.show {
    transform: translateY(0);
    opacity: 1; /* Make visible when shown */
    pointer-events: none; /* Keep banner itself non-interactive to avoid blocking page content */
}

.cookie-consent-content {
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    pointer-events: auto; /* Re-enable pointer events for interactive content */
}

.cookie-consent-text {
    flex: 1;
    color: var(--text);
    opacity: 0.8;
}

.cookie-consent-text a {
    color: var(--accent1);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.cookie-consent-text a:hover {
    color: var(--accent1);
    border-bottom-color: var(--accent1);
    /* Neon glow effect matching homepage links */
    text-shadow:
        0 0 10px rgba(4, 230, 182, 0.9),
        0 0 20px rgba(4, 230, 182, 0.8),
        0 0 30px rgba(4, 230, 182, 0.6);
}

.cookie-consent-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.cookie-consent-btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 0;
}

.cookie-consent-btn:hover:not(.reject) {
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.cookie-consent-btn.accept {
    background: rgba(4, 230, 182, 0.18);
    border: 1px solid var(--accent1);
    color: var(--accent1);
}

.cookie-consent-btn.accept:hover {
    box-shadow: none !important; /* Override the general white glow */
    text-shadow:
        0 0 5px rgba(4, 230, 182, 1),
        0 0 10px rgba(4, 230, 182, 1),
        0 0 15px rgba(4, 230, 182, 0.9);
    border: 1px solid var(--accent1) !important; /* Force consistent thickness */
    background: rgba(4, 230, 182, 0.18) !important; /* Keep same fill on hover */
    color: var(--accent1) !important;
}

.cookie-consent-btn.reject {
    border: 1px solid var(--accent2);
    color: var(--accent2);
}

.cookie-consent-btn.reject:hover {
    box-shadow: none !important; /* Override the general white glow */
    text-shadow:
        0 0 5px rgba(255, 109, 105, 1),
        0 0 10px rgba(255, 109, 105, 1),
        0 0 15px rgba(255, 109, 105, 0.9);
    border: 1px solid var(--accent2) !important; /* Force consistent thickness */
    background: transparent !important; /* Ensure no background change */
    color: var(--accent2) !important;
}

/* Mobile/Tablet Responsive - Full Width */
@media (max-width: 1024px) {
    .cookie-consent-banner {
        width: 100% !important;
        left: 0;
        border-top: 1px solid var(--accent2) !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
    }

    .cookie-consent-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .cookie-consent-buttons {
        width: 100%;
        justify-content: center;
        margin-top: var(--spacing-xs);
    }

    .cookie-consent-banner {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
    }
}

/* Hide banner when consent is given */
.cookie-consent-banner.hidden {
    display: none;
}

/* ==========================================================================
   Cookie Privacy Modal - Compact & Styled
   ========================================================================== */

.cookie-privacy-modal {
    display: none;
    position: fixed;
    z-index: 10001; /* Above cookie banner */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.cookie-privacy-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-privacy-modal-content {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--accent2);
    border-radius: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
}

.cookie-privacy-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-privacy-modal-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--accent1);
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
}

.cookie-privacy-close {
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: var(--transition);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

.cookie-privacy-close-line {
    width: 25px;
    height: 2px;
    background: var(--accent2);
    transition: var(--transition);
    border-radius: 2px;
    position: absolute;
}

.cookie-privacy-close-line:nth-child(1) {
    transform: rotate(45deg);
}

.cookie-privacy-close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.cookie-privacy-close:hover {
    background: transparent;
}

.cookie-privacy-close:hover .cookie-privacy-close-line {
    background: var(--accent2);
    box-shadow: 
        0 0 8px rgba(255, 109, 105, 0.9),
        0 0 15px rgba(255, 109, 105, 0.7),
        0 0 25px rgba(255, 109, 105, 0.5);
}

.cookie-privacy-modal-body {
    padding: var(--spacing-md);
}

.cookie-privacy-modal-body p {
    margin: 0;
    font-size: 1rem; /* Even bigger text */
    line-height: 1.5;
    color: var(--text);
    opacity: 0.9;
    font-family: 'Space Mono', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Source Code Pro', monospace;
}

.cookie-privacy-modal-body p br {
    display: block;
    margin-bottom: 0.25rem;
}

/* Instagram Placeholder Styling */
.instagram-placeholder {
    width: 100%;
    margin: 1rem 0;
}

/* Video Placeholder Styling */
.video-placeholder {
    width: 100%;
    margin: 1rem 0;
}

/* Cookie consent link styles */
#cookie-privacy-link {
    text-decoration: none !important;
}

#cookie-privacy-link:hover {
    text-decoration: underline !important;
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.8), 0 0 10px rgba(4, 230, 182, 0.6);
}

/* YouTube and Instagram placeholder link hover effects */
.video-placeholder a:hover,
.instagram-placeholder a:hover {
    text-decoration: underline !important;
    text-shadow: 0 0 5px rgba(4, 230, 182, 0.8), 0 0 10px rgba(4, 230, 182, 0.6);
}

/* Hide Instagram embeds by default if no consent */
.instagram-media {
    display: none !important;
}

/* Show Instagram embeds only when consent is given */
body.cookie-consent-given .instagram-media {
    display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-privacy-modal-content {
        width: 95%;
        max-width: none;
        margin: var(--spacing-sm);
    }

    .cookie-privacy-modal-body {
        padding: var(--spacing-sm);
    }

    .cookie-privacy-modal-body p {
        font-size: 0.9rem; /* Bigger text on mobile too */
    }
}

+.project-cta {
+    margin: var(--spacing-lg) 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+}
+
+.project-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1.75rem;
+    border: 1px solid var(--accent1);
+    color: var(--text);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 0.9rem;
+    transition: var(--transition);
+    text-decoration: none;
+    background: rgba(4, 230, 182, 0.08);
+    box-shadow: 0 0 14px rgba(4, 230, 182, 0.2);
+}
+
+.project-button:hover,
+.project-button:focus {
+    color: #000;
+    background: var(--accent1);
+    box-shadow:
+        0 0 20px rgba(4, 230, 182, 0.45),
+        0 0 40px rgba(4, 230, 182, 0.35);
+}
+
+.project-button:focus {
+    outline: none;
+    border-color: var(--accent3);
+}
+
+.project-button:active {
+    transform: translateY(1px);
+}