:root {
    --text-color: #e6e6e6;
    --bg-color: #050505;
    --accent-color: #888888;
    --transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --mouse-x: 50%;
    --mouse-y: 50%;
}

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

body.custom-cursor-active * { cursor: none !important; }

body, html {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    overflow-x: clip; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.vf-top-bar, .vf-bottom-bar, .timecode, .preview-role, .contact-label, .subtitle, .resume-date, .carousel-role, .mobile-menu-btn, .item-counter { 
    font-family: 'JetBrains Mono', monospace; 
}

h1, h2, h3 { font-weight: 800; letter-spacing: -1px; }

button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
.interactive, .carousel-nav, .lb-nav, .lb-close, .back-btn, .nav-links a { user-select: none; -webkit-user-select: none; }

/* Cursor & Overlays */
.custom-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; display: flex; justify-content: center; align-items: center; will-change: transform; opacity: 0; transition: opacity 0.3s; }
body.custom-cursor-active .custom-cursor { opacity: 1; }
.cursor-dot { width: 4px; height: 4px; background: white; border-radius: 50%; transition: transform 0.2s; }
.cursor-ring { position: absolute; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.custom-cursor.hovering .cursor-ring { width: 60px; height: 60px; background-color: rgba(255,255,255,0.05); border-color: white; transform: scale(1.1); }
.custom-cursor.hovering .cursor-dot { transform: scale(0); }

.page-transition-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-color); z-index: 9998; opacity: 1; pointer-events: none; transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.page-transition-overlay.fade-in { opacity: 0; }
.page-transition-overlay.fade-out { opacity: 1; pointer-events: all; }

.grain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9997; opacity: 0.06; }
.grain::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); animation: grain 0.8s steps(10) infinite; }
@keyframes grain { 
    0%, 100% { transform: translate(0, 0); } 
    10% { transform: translate(-1%, -1%); } 
    20% { transform: translate(-2%, 1%); } 
    30% { transform: translate(1%, -2%); } 
    40% { transform: translate(-1%, 2%); } 
    50% { transform: translate(-2%, 1%); } 
    60% { transform: translate(1%, 0%); } 
    70% { transform: translate(0, 2%); } 
    80% { transform: translate(1%, 1%); } 
    90% { transform: translate(-2%, 2%); } 
}

.global-spotlight { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), rgba(40, 40, 40, 0.5) 0%, rgba(15, 15, 15, 0.2) 40%, transparent 80%); display: none; }

/* Desktop Navigation Aligned to Top Right Bracket */
.desktop-nav { position: fixed; top: 32px; right: 220px; width: auto; height: auto; background-color: transparent; display: flex; align-items: center; z-index: 100; pointer-events: none; }
.nav-links { display: flex; gap: 15px; pointer-events: all; align-items: center; }
.nav-links a { text-decoration: none; font-family: 'JetBrains Mono', monospace; color: rgba(255,255,255,0.9); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: var(--transition); text-shadow: 0 2px 10px rgba(0,0,0,0.8); padding: 8px 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); border-radius: 2px; }
.nav-links a:hover, .nav-links a.active, .nav-links a:focus { background: white; color: black; text-shadow: none; border-color: white; outline: none; }

/* Mobile Menu Button & Overlay */
.mobile-menu-btn { display: none; position: fixed; top: 18px; right: 110px; z-index: 10002; font-size: 0.65rem; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); border-radius: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; color: rgba(255,255,255,0.9); font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.8); transition: var(--transition); }
.mobile-menu-btn:hover, .mobile-menu-btn:focus { background: white; color: black; text-shadow: none; border-color: white; outline: none; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(5,5,5,0.98); backdrop-filter: blur(15px); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.mobile-menu-overlay.active { opacity: 1; pointer-events: all; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 40px; text-align: center; }
.mobile-nav-link { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; text-decoration: none; color: white; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; letter-spacing: -1px;}
.mobile-menu-overlay.active .mobile-nav-link { opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(5) { transition-delay: 0.5s; }

/* --- VIEWFINDER --- */
.viewfinder { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; }

.bracket-tl, .bracket-tr, .bracket-bl, .bracket-br { position: absolute; width: 120px; height: 120px; }
.bracket-tl { top: 40px; left: 40px; border-top: 3px solid rgba(255,255,255,0.7); border-left: 3px solid rgba(255,255,255,0.7); }
.bracket-tr { top: 40px; right: 40px; border-top: 3px solid rgba(255,255,255,0.7); border-right: 3px solid rgba(255,255,255,0.7); }
.bracket-bl { bottom: 40px; left: 40px; border-bottom: 3px solid rgba(255,255,255,0.7); border-left: 3px solid rgba(255,255,255,0.7); }
.bracket-br { bottom: 40px; right: 40px; border-bottom: 3px solid rgba(255,255,255,0.7); border-right: 3px solid rgba(255,255,255,0.7); }

.battery-icon { width: 22px; height: 11px; border: 1.5px solid rgba(255,255,255,0.8); border-radius: 2px; position: relative; display: flex; padding: 1px; }
.battery-icon::after { content: ''; position: absolute; right: -4px; top: 1.5px; width: 2px; height: 4px; background: rgba(255,255,255,0.8); border-radius: 0 1px 1px 0; }
.battery-level { width: 75%; background: rgba(255,255,255,0.8); height: 100%; border-radius: 0.5px; }

.vf-top-bar { position: absolute; top: 35px; left: 220px; display: flex; gap: 120px; color: rgba(255,255,255,0.8); letter-spacing: 1px; text-transform: uppercase; align-items: center; font-size: 0.75rem; }
.vf-bottom-bar { position: absolute; bottom: 35px; left: 220px; right: 220px; display: flex; justify-content: space-between; color: rgba(255,255,255,0.8); letter-spacing: 1px; text-transform: uppercase; align-items: center; font-size: 0.75rem; }

.vf-bottom-left { display: flex; gap: 120px; align-items: center; }
.vf-bottom-right { display: flex; gap: 120px; align-items: center; }

.rec-indicator { display: flex; align-items: center; gap: 8px; color: #ff3333; font-weight: 700;}
@keyframes blink-rec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.rec-dot { width: 8px; height: 8px; background-color: #ff3333; border-radius: 50%; animation: blink-rec 1s infinite; }

#app-content { flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 10; }

/* Home */
.home-container { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: var(--bg-color); }
.reveal-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(100%) contrast(1.2); }
.home-spotlight-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; background: radial-gradient(circle 600px at var(--mouse-x) var(--mouse-y), transparent 0%, rgba(5, 5, 5, 0.95) 40%, var(--bg-color) 70%); }
.hero-editorial { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; pointer-events: none; z-index: 20; }
.title-sequence h1 { font-size: clamp(3.5rem, 11vw, 11rem); line-height: 0.85; text-transform: uppercase; color: #ffffff; margin: 0; display: flex; flex-direction: column; align-items: center; text-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.title-sequence .word { display: block; animation: breathe-spacing 15s ease-in-out infinite alternate; }
.title-sequence span { opacity: 0.2; animation: cinematic-flicker 6s infinite alternate; animation-delay: var(--delay); display: inline-block; }
@keyframes breathe-spacing { 0% { letter-spacing: -6px; } 100% { letter-spacing: 15px; } }
@keyframes cinematic-flicker { 0% { opacity: 0.15; filter: blur(2px); } 25% { opacity: 0.9; filter: blur(0px); } 50% { opacity: 0.3; filter: blur(1px); } 75% { opacity: 1; filter: blur(0px); } 100% { opacity: 0.2; filter: blur(1.5px); } }
.subtitle-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 35px; margin-left: 0; }
.subtitle-line { display: none !important; }
.hero-editorial .subtitle { font-size: 0.95rem; color: #dddddd; letter-spacing: 4px; text-transform: uppercase; margin: 0; text-align: center; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* Carousel */
.carousel-outer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; z-index: 5;}
.carousel-nav { position: absolute; top: 46%; transform: translateY(-50%); z-index: 20; font-family: sans-serif; font-size: 5rem; color: rgba(255,255,255,0.3); font-weight: 300; cursor: pointer; transition: var(--transition); text-shadow: 0 5px 20px rgba(0,0,0,0.8); width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.carousel-nav:hover, .carousel-nav:focus { color: #fff; transform: translateY(-50%) scale(1.1); outline: none;}
.carousel-nav.prev { left: 16vw; }
.carousel-nav.next { right: 16vw; }

.carousel-wrapper { display: flex; overflow-x: hidden; width: 100vw; padding: 0 25vw; gap: 5vw; -ms-overflow-style: none; scrollbar-width: none; align-items: flex-start; }
.carousel-wrapper::-webkit-scrollbar { display: none; }

.carousel-item { position: relative; flex: 0 0 50vw; transition: opacity 0.3s; opacity: 0.2; transform: scale(0.9); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.carousel-item.active { opacity: 1; transform: scale(1); z-index: 10; }

.item-counter { font-size: 0.9rem; letter-spacing: 2px; color: #ffffff; opacity: 0; transition: 0.4s; margin-bottom: 20px; pointer-events: none; }
.carousel-item.active .item-counter { opacity: 1; pointer-events: all; }

.carousel-media { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.05); }
.carousel-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.4s; }
.carousel-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: 0.4s; }
.carousel-item.active:hover .carousel-media img, .carousel-item.active:focus .carousel-media img { opacity: 0; }
.carousel-item.active:hover .carousel-media video, .carousel-item.active:focus .carousel-media video { opacity: 1; }

.carousel-info { width: 100%; text-align: center; opacity: 0; transition: 0.4s; pointer-events: none; }
.carousel-item.active .carousel-info { opacity: 1; pointer-events: all;}
.carousel-title { font-size: 3rem; text-transform: uppercase; color: white; margin: 0 0 10px 0; font-weight: 800; letter-spacing: -1px;}
.carousel-role { font-size: 0.8rem; color: var(--accent-color); letter-spacing: 2px; text-transform: uppercase;}

/* Contact Sheet */
.contact-sheet-container { width: 100%; padding: 150px 5vw 100px 5vw; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }
.contact-item { background: #0a0a0a; padding: 15px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; cursor: pointer; display: flex; flex-direction: column; text-align: left;}
.contact-item:hover, .contact-item:focus { background: #1a1a1a; transform: translateY(-5px); border-color: rgba(255,255,255,0.3); outline: none; }
.contact-img { width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 15px; }
.contact-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.4s; }
.contact-item:hover .contact-img img, .contact-item:focus .contact-img img { filter: grayscale(0%); transform: scale(1.05); }
.contact-label { font-size: 0.75rem; color: #888; display: flex; justify-content: space-between; letter-spacing: 1px;}
.contact-label .title { color: white; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 800;}

/* Project Detail */
.project-detail-container { max-width: 1600px; margin: 0 auto; padding: 150px 3vw 100px 3vw; width: 100%; text-align: left; position: relative; z-index: 20; }
.photo-detail-container { max-width: 100% !important; padding-left: 5vw; padding-right: 5vw; }

.project-top-wrapper { width: 100%; padding-bottom: 30px; text-align: left; }
.back-btn { display: inline-flex; align-items: center; color: var(--text-color); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 3px; opacity: 0.5; transition: var(--transition); cursor: pointer; }
.back-btn:hover, .back-btn:focus { opacity: 1; letter-spacing: 5px; outline: none;}
.project-content-wrapper { max-width: 900px; margin: 0 0 40px 0; width: 100%; text-align: left; }
.project-header { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 20px; }
.project-header h1 { font-size: 3rem; margin: 0; text-transform: uppercase; }
.project-header span { color: var(--accent-color); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; }
.project-description { font-weight: 300; color: #cccccc; line-height: 1.8; font-size: 1.1rem; white-space: pre-wrap; width: 100%; }

.project-media { width: 100%; max-width: 1600px; margin: 0 auto 50px auto; aspect-ratio: 16/9; background: #0a0a0a; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);}
.project-media iframe, .project-media video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: none; object-fit: cover; }

.album-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; width: 100%; max-width: 100%; margin: 0 auto; }
.album-grid button { width: 100%; display: block;}
.album-grid img { width: 100%; display: block; background-color: transparent; transition: filter 0.3s ease; cursor: pointer; }
.album-grid button:hover img, .album-grid button:focus img { filter: brightness(1.15); z-index: 2; position: relative; }

/* Lightbox */
.lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(3, 3, 3, 0.98); z-index: 10001; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.8); position: relative; z-index: 2;}
.lb-close { position: absolute; top: 30px; right: 40px; color: white; font-family: 'Inter', sans-serif; font-size: 3rem; cursor: pointer; text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-weight: 300; transition: var(--transition); opacity: 0.5; z-index: 10;}
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-family: 'Inter', sans-serif; font-size: 4rem; cursor: pointer; font-weight: 300; padding: 20px; transition: var(--transition); opacity: 0.3; z-index: 10;}
.lb-caption { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #e6e6e6; font-size: 0.85rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; text-transform: uppercase; pointer-events: none; opacity: 0.6; z-index: 10; width: 90%; text-align: center;}
.lb-nav:hover, .lb-nav:focus { opacity: 1; transform: translateY(-50%) scale(1.1); outline: none; }
.lb-close:hover, .lb-close:focus { opacity: 1; transform: scale(1.1); outline: none; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.mobile-tap-zones { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 5; }
.tap-zone { flex: 1; height: 100%; cursor: pointer; }

/* About Page */
.about-page-wrapper { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 150px 40px 100px 40px; position: relative; z-index: 20; }
.about-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; text-align: left; }
.about-text h2 { font-size: 2.2rem; margin-bottom: 30px; line-height: 1.2; text-transform: uppercase; color: white; font-weight: 800; letter-spacing: -1px;}
.about-text p { font-weight: 300; color: var(--accent-color); line-height: 1.8; margin-bottom: 20px; font-size: 1.05rem; }
.resume-block { margin-bottom: 50px; }
.resume-title { font-size: 0.8rem; color: var(--text-color); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; font-weight: 800; }
.resume-item { margin-bottom: 25px; }
.resume-item h4 { font-size: 1.1rem; font-weight: 400; margin-bottom: 5px; color: #ffffff; }
.resume-item p { font-weight: 300; font-size: 0.9rem !important; margin: 0 !important; }
.resume-date { font-size: 0.75rem; color: #666; margin-bottom: 5px; display: block; letter-spacing: 1px; }

/* Contact Page */
.contact-page-wrapper { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 150px 40px 100px 40px; position: relative; z-index: 20; }
.contact-content { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; text-align: left; }

.contact-info h2 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 20px; line-height: 1; text-transform: uppercase; color: white; font-weight: 800; letter-spacing: -1px; }
.contact-info p { font-weight: 300; color: var(--accent-color); line-height: 1.6; margin-bottom: 40px; font-size: 1.1rem; max-width: 400px; }

.contact-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.email-link { font-size: 1.5rem; color: white; text-decoration: none; transition: var(--transition); letter-spacing: -0.5px; }
.email-link:hover, .email-link:focus { color: var(--accent-color); outline: none; }
.location { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent-color); letter-spacing: 2px; text-transform: uppercase; }

.social-links { display: flex; gap: 20px; }
.social-links a { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: white; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border: 1px solid rgba(255,255,255,0.2); transition: var(--transition); border-radius: 2px; }
.social-links a:hover, .social-links a:focus { background: white; color: black; outline: none; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { width: 100%; }
.contact-form input, .contact-form textarea { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; padding: 18px 20px; color: white; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; outline: none; transition: var(--transition); resize: none; letter-spacing: 1px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.contact-form input:focus, .contact-form textarea:focus { border-color: white; background: rgba(255,255,255,0.03); }

.submit-btn { align-self: flex-start; padding: 15px 30px; background: transparent; border: 1px solid white; color: white; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: var(--transition); border-radius: 2px; font-weight: 700; }
.submit-btn:hover, .submit-btn:focus { background: white; color: black; outline: none; }

/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 1400px) {
    .bracket-tl, .bracket-tr, .bracket-bl, .bracket-br { width: 50px !important; height: 50px !important; border-width: 2px !important; }
    .bracket-tl { top: 35px !important; left: 35px !important; }
    .bracket-tr { top: 35px !important; right: 35px !important; }
    .bracket-bl { bottom: 35px !important; left: 35px !important; }
    .bracket-br { bottom: 35px !important; right: 35px !important; }
    
    .desktop-nav { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; top: 32px !important; }
    
    .vf-top-bar { display: block !important; position: static !important; }
    .battery-icon { position: fixed !important; top: 36px !important; left: 105px !important; transform: scale(0.9) !important; margin: 0 !important; }
    .rec-indicator { position: fixed !important; top: 34px !important; left: 155px !important; font-size: 0.65rem !important; margin: 0 !important; }
    #tc { position: fixed !important; top: 34px !important; right: 105px !important; left: auto !important; font-size: 0.65rem !important; margin: 0 !important; }
    
    .vf-bottom-bar { display: block !important; position: static !important; }
    .vf-bottom-left { position: fixed !important; bottom: 34px !important; left: 105px !important; display: flex !important; gap: 3vw !important; font-size: 0.65rem !important; width: auto !important; right: auto !important; }
    .vf-bottom-right { position: fixed !important; bottom: 34px !important; right: 105px !important; display: flex !important; gap: 3vw !important; font-size: 0.65rem !important; width: auto !important; left: auto !important; }
    
    .contact-sheet-container { grid-template-columns: repeat(4, 1fr) !important; padding: 120px 5vw !important; }
}

@media (max-width: 1024px) {
    .bracket-tl, .bracket-tr, .bracket-bl, .bracket-br { width: 40px !important; height: 40px !important; border-width: 1.5px !important; }
    .bracket-tl { top: 30px !important; left: 30px !important; }
    .bracket-tr { top: 30px !important; right: 30px !important; }
    .bracket-bl { bottom: 30px !important; left: 30px !important; }
    .bracket-br { bottom: 30px !important; right: 30px !important; }
    
    .desktop-nav { display: none !important; }
    .mobile-menu-btn { display: block !important; position: fixed !important; top: 26px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; font-size: 0.75rem !important; padding: 6px 10px !important; z-index: 10002 !important; }
    
    .vf-top-bar { display: block !important; position: static !important; }
    .battery-icon { position: fixed !important; top: 30px !important; left: 85px !important; transform: scale(0.9) !important; margin: 0 !important; }
    .rec-indicator { position: fixed !important; top: 28px !important; left: 130px !important; font-size: 0.6rem !important; margin: 0 !important; }
    #tc { position: fixed !important; top: 28px !important; right: 85px !important; left: auto !important; font-size: 0.6rem !important; margin: 0 !important; }
    
    .vf-bottom-bar { display: block !important; position: static !important; }
    .vf-bottom-left { position: fixed !important; bottom: 28px !important; left: 85px !important; display: flex !important; gap: 4vw !important; font-size: 0.6rem !important; width: auto !important; right: auto !important; }
    .vf-bottom-right { position: fixed !important; bottom: 28px !important; right: 85px !important; display: flex !important; gap: 4vw !important; font-size: 0.6rem !important; width: auto !important; left: auto !important; }
    
    .hero-editorial { left: 50% !important; right: auto !important; width: 84vw !important; transform: translate(-50%, -50%) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .title-sequence h1 { font-size: clamp(3rem, 8vw, 6rem) !important; letter-spacing: -2px !important; }
    .project-header h1 { font-size: 2.2rem !important; }
    .carousel-title { font-size: 2.2rem !important; }
    .about-text h2, .contact-info h2 { font-size: 2rem !important; }
    
    .contact-sheet-container, .project-detail-container { padding: 120px 8vw 60px 8vw !important; }
    .about-content, .contact-content { grid-template-columns: 1fr !important; gap: 60px !important; padding: 0 8vw !important; }
    .about-text[style] { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 50px !important; }
    .album-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .contact-details { padding-bottom: 30px !important; margin-bottom: 30px !important; }
}

@media (max-width: 768px) {
    .desktop-nav { display: none !important; }
    .mobile-menu-btn { display: block !important; position: fixed !important; top: 20px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; font-size: 0.6rem !important; padding: 5px 8px !important; z-index: 10002 !important; }
    
    .bracket-tl, .bracket-tr, .bracket-bl, .bracket-br { width: 30px !important; height: 30px !important; border-width: 1.5px !important; }
    .bracket-tl { top: 55px !important; left: 20px !important; }
    .bracket-tr { top: 55px !important; right: 20px !important; }
    .bracket-bl { bottom: 55px !important; left: 20px !important; }
    .bracket-br { bottom: 55px !important; right: 20px !important; }
    
    .vf-top-bar { display: block !important; position: static !important; }
    .battery-icon { position: fixed !important; top: 23px !important; left: 20px !important; transform: scale(0.8) !important; transform-origin: left center !important; margin: 0 !important; }
    .rec-indicator { position: fixed !important; top: 21px !important; left: 55px !important; font-size: 0.55rem !important; margin: 0 !important; }
    #tc { position: fixed !important; top: 22px !important; right: 20px !important; left: auto !important; transform: none !important; font-size: 0.55rem !important; margin: 0 !important; }
    
    .vf-bottom-bar { display: block !important; position: static !important; }
    .vf-bottom-left { position: fixed !important; bottom: 22px !important; left: 20px !important; right: 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; font-size: 0.55rem !important; width: auto !important; }
    .vf-bottom-right { display: none !important; }

    .hero-editorial { left: 50% !important; right: auto !important; width: 90vw !important; transform: translate(-50%, -50%) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } 
    .title-sequence h1 { font-size: clamp(2rem, 10vw, 3rem) !important; letter-spacing: -1px !important; }
    .subtitle-wrapper { justify-content: center !important; margin-left: 0 !important; margin-top: 15px !important; flex-direction: row !important; }
    .subtitle { font-size: 0.6rem !important; letter-spacing: 2px !important; text-align: center !important; line-height: 1.4 !important; }

    /* CAROUSEL (Vertical Layout for Mobile) */
    .carousel-wrapper { 
        flex-direction: column !important; 
        align-items: center !important; /* Centers the thumbnails horizontally */
        padding: 35vh 10vw !important; 
        gap: 6vh !important; 
        height: 100vh !important; 
        justify-content: flex-start !important;
    }
    
    .carousel-item { 
        flex: 0 0 auto !important; 
        width: 75vw !important; /* Slightly reduced base width */
        transform: scale(0.75) !important; /* Makes the "other" inactive thumbnails much smaller */
        transition: all 0.4s ease !important; /* Ensures smooth shrinking/growing */
    } 
    
    .carousel-item.active {
        transform: scale(1) !important; /* Pops the current active thumbnail back to full size */
    }
    
    .carousel-title { font-size: 1.5rem !important; word-wrap: break-word !important; }
    .carousel-media { margin-bottom: 15px !important; }
    
    .project-header h1 { font-size: 1.5rem !important; word-wrap: break-word !important; hyphens: auto !important; line-height: 1.2 !important; }
    .project-description { font-size: 0.9rem !important; line-height: 1.6 !important; }
    
    .contact-label { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; line-height: 1.3 !important; }
    .contact-label .title { word-wrap: break-word !important; hyphens: auto !important; }

    .about-text p, .contact-info p { font-size: 0.9rem !important; line-height: 1.6 !important; margin-bottom: 20px !important; }
    .about-text h2, .contact-info h2 { font-size: 1.6rem !important; line-height: 1.2 !important; margin-bottom: 20px !important; }
    
    .resume-item h4 { font-size: 1rem !important; }
    .resume-item p { font-size: 0.8rem !important; }
    .resume-title { font-size: 0.75rem !important; margin-bottom: 15px !important; }

    .contact-sheet-container { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 110px 8vw 140px 8vw !important; }
    .project-detail-container { padding: 110px 8vw 140px 8vw !important; }
    .album-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    
    .desktop-only { display: none !important; }
    .lb-caption { bottom: 20px !important; font-size: 0.6rem !important; width: 85% !important; line-height: 1.4 !important; }
    .lb-close { top: 20px !important; right: 20px !important; font-size: 2rem !important; }

    .about-content, .contact-content { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 8vw !important; }
    .contact-page-wrapper, .about-page-wrapper { padding: 110px 0 140px 0 !important; }
    .social-links { flex-wrap: wrap !important; }
    .submit-btn { width: 100% !important; text-align: center !important; }
}

@media (max-width: 480px) {
    .contact-sheet-container { grid-template-columns: 1fr !important; }
    .album-grid { grid-template-columns: 1fr !important; }
    .mobile-nav-link { font-size: 2rem; }
}

@media (pointer: coarse) {
    * { cursor: auto !important; }
    .custom-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .grain, .global-spotlight, .custom-cursor { display: none !important; }
    * { cursor: auto !important; }
}