/* ================= RESET & CORE ================= */
        :root {
            --bg-dark: #050505;
            --panel-bg: #0a0a0a;
            --text-main: #e0e0e0;
            --accent: #ff3333;

            /* Dimensions */
            --cassette-width: 800px;
            --cassette-height: 450px;
            --film-width: 700px;

            --transition-speed: 0.8s;
            /* Vitesse du slide latéral */
        }

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

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Oswald', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            cursor: grab;
            /* Default for drag */
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        /* ... existing styles ... */

        .film-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 0);
            width: var(--film-width);
            z-index: 5;
            opacity: 0;
            padding-top: 400px;
            padding-bottom: 200px;
            transition: left var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        body.details-open .film-container {
            left: 25%;
        }

        body.site-ready .film-container {
            animation: dropFilm 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
        }

        /* ... existing styles ... */

        /* ================= SCÈNE FIXE (CORRECTION ICI) ================= */
        .fixed-stage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 10;
            perspective: 1000px;

            /* C'EST ICI QU'IL FALLAIT METTRE LA TRANSITION */
            /* Elle s'applique maintenant à l'aller ET au retour */
            transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--transition-speed) ease;
        }

        /* ... */

        /* ================= LE FILM ================= */
        .film-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #080808;
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #000 24px, #000 28px);
            border-left: 5px dotted rgba(255, 255, 255, 0.15);
            border-right: 5px dotted rgba(255, 255, 255, 0.15);
            z-index: -1;
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
        }

        /* ... existing styles ... */

        /* GLOBAL FILM GRAIN */
        .grain-overlay {
            display: none;
            /* Temporarily disabled per user request */
            position: fixed;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            pointer-events: none;
            z-index: 9990;
            opacity: 0.04;
            /* Slightly more subtle */
            /* baseFrequency increased to 1.5 for much finer grain */
            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='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            animation: grainAnim 0.5s steps(5) infinite;
        }

        /* ================= GEOMETRIC BACKGROUND ================= */
        /* ================= GEOMETRIC BACKGROUND ================= */
        .geometric-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            /* Brought to 0 to sit on top of body bg but behind content */
            pointer-events: none;
            overflow: hidden;
        }

        .shape {
            position: absolute;
            border: 2px solid rgba(255, 255, 255, 0.15);
            /* Slightly brighter border */
            background: rgba(255, 255, 255, 0.02);
            /* Stronger, layered glow */
            box-shadow:
                0 0 30px rgba(255, 255, 255, 0.15),
                0 0 60px rgba(255, 255, 255, 0.05),
                inset 0 0 20px rgba(255, 255, 255, 0.05);
            opacity: 0.9;
            /* Much more visible */
            filter: blur(0px);
            /* Sharp */
        }

        .shape-1 {
            top: 15%;
            left: 10%;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border-color: rgba(255, 255, 255, 0.15);
            animation: floatShape 25s infinite alternate ease-in-out;
        }

        .shape-2 {
            top: 60%;
            right: 10%;
            width: 400px;
            height: 400px;
            border: 2px solid rgba(200, 200, 200, 0.1);
            transform: rotate(45deg);
            animation: floatShape 35s infinite alternate-reverse ease-in-out;
        }

        .shape-3 {
            bottom: 50px;
            left: 20%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px dashed rgba(255, 255, 255, 0.15);
            animation: floatShape 20s infinite alternate ease-in-out;
            animation-delay: -5s;
        }

        .shape-4 {
            top: 25%;
            right: 25%;
            width: 150px;
            height: 150px;
            border: 2px solid rgba(0, 0, 0, 0.15);
            /* Red accent visible */
            animation: floatShape 28s infinite alternate-reverse ease-in-out;
            animation-delay: -10s;
        }

        .shape-5 {
            top: 50%;
            left: 50%;
            width: 700px;
            height: 700px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transform: translate(-50%, -50%);
            animation: pulseShape 15s infinite alternate ease-in-out;
        }

        @keyframes floatShape {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            100% {
                transform: translate(40px, 60px) rotate(10deg);
            }
        }

        @keyframes pulseShape {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.4;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.2;
            }
        }

        body.is-dragging {
            cursor: grabbing;
        }

        /* --- CUSTOM CURSOR (Overlay) --- */
        .custom-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 99999;
            /* Top of everything */
            display: none;
            /* JS will show it if non-touch */
        }

        @media (hover: hover) and (pointer: fine) {
            .custom-cursor {
                display: block;
            }

            /* Hide default cursor on interactive elements as well to ensure total replacement */
            body,
            a,
            button,
            .click-trigger,
            .gallery-item {
                cursor: none !important;
            }
        }

        .extra-media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .gallery-separator {
            grid-column: 1 / -1;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
            margin: 20px 0;
            position: relative;
        }

        .extra-media-item {
            width: 100%;
            height: auto;
            border-radius: 4px;
            display: block;
            cursor: zoom-in;
            transition: transform 0.2s;
        }

        .extra-media-item:hover {
            transform: scale(1.02);
        }

        .cursor-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            mix-blend-mode: difference;
            pointer-events: none;
        }

        .cursor-outline {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 1px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            mix-blend-mode: difference;
            pointer-events: none;
            transition: width 0.2s, height 0.2s;
        }

        /* Hover State */
        body.hovering .cursor-outline {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--accent);
        }

        /* ================= INTRO & UI ================= */
        .intro-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: overlayFadeOut 0.8s ease-out 3.5s forwards;
        }

        .intro-text {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 5rem;
            color: #fff;
            letter-spacing: 5px;
            opacity: 0;
            animation: textSequence 3s ease-in-out forwards;
        }

        @keyframes textSequence {
            0% {
                opacity: 0;
                transform: scale(0.9);
                filter: blur(5px);
            }

            20% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0px);
            }

            60% {
                opacity: 1;
                transform: scale(1);
            }

            70% {
                opacity: 1;
                transform: scaleX(1.2) scaleY(0.8) skewX(5deg);
                color: #fff;
            }

            100% {
                opacity: 0;
                transform: scaleX(3) scaleY(0.01);
                color: var(--accent);
                filter: blur(2px);
            }
        }

        @keyframes overlayFadeOut {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        .ui-header {
            position: fixed;
            top: 40px;
            left: 40px;
            z-index: 100;
            font-family: 'Space Mono', monospace;
            display: flex;
            flex-direction: column;
            gap: 15px;
            opacity: 0;
        }

        body.site-ready .ui-header {
            animation: fadeInUI 1s ease 1s forwards;
        }

        @keyframes fadeInUI {
            to {
                opacity: 1;
            }
        }

        .rec-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.8rem;
            letter-spacing: 2px;
            color: #fff;
            mix-blend-mode: difference;
            transition: color 0.5s ease;
        }

        .rec-dot {
            width: 12px;
            height: 12px;
            background: var(--accent);
            border-radius: 50%;
            animation: blink 2s infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        .filter-controls {
            display: flex;
            gap: 10px;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        body.details-open .filter-controls {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-10px);
        }

        .filter-btn {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid #666;
            color: #ccc;
            padding: 8px 18px;
            cursor: pointer;
            font-family: 'Space Mono';
            font-size: 0.75rem;
            letter-spacing: 1px;
            transition: all 0.3s;
            text-transform: uppercase;
            backdrop-filter: blur(4px);
            border-radius: 2px;
        }

        .filter-btn:hover {
            border-color: #fff;
            color: #fff;
        }

        .filter-btn.active {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

        .scroll-cta {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 90;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-family: 'Space Mono';
            font-size: 0.7rem;
            letter-spacing: 3px;
            pointer-events: none;
        }

        body.site-ready .scroll-cta {
            animation: fadeInUI 1s ease 1.5s forwards;
        }

        .scroll-arrow {
            display: block;
            font-size: 1.5rem;
            margin-top: 5px;
            animation: bounce 2s infinite;
        }

        body.has-scrolled .scroll-cta {
            opacity: 0 !important;
            transition: opacity 0.5s;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

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


        /* ================= SCÈNE FIXE (CORRECTION ICI) ================= */
        .fixed-stage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 10;
            perspective: 1000px;

            /* C'EST ICI QU'IL FALLAIT METTRE LA TRANSITION */
            /* Elle s'applique maintenant à l'aller ET au retour */
            transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--transition-speed) ease;
            pointer-events: none;
            /* Allow clicks to pass to film strip below */
        }

        /* Quand ouvert, on décale et on baisse l'opacité */
        /* Quand ouvert, on décale seulement (pas de transparence) */
        body.details-open .fixed-stage {
            transform: translateX(-25%);
            /* opacity: 0.3; REMOVED */
        }


        /* ================= LA CASSETTE (PHILIPS C-60 STYLE) ================= */
        .cassette-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* Removed skew from here */
            width: var(--cassette-width);
            height: var(--cassette-height);
            z-index: 50;
            opacity: 0;
            transform-origin: center center;
            /* filter: drop-shadow REMOVED for performance */
            pointer-events: auto;
            /* Removed transition: transform 0.1s ease-out; to fix conflict */
        }

        .cassette-skew-group {
            width: 100%;
            height: 100%;
            transform: skewY(var(--scroll-skew, 0deg));
            transform-origin: center center;
            will-change: transform;
            /* Hint for performance */
        }

        body.site-ready .cassette-wrapper {
            animation: loadCassette 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        @keyframes loadCassette {
            0% {
                transform: translate(-50%, -150%) rotate(-5deg);
                opacity: 0;
            }

            60% {
                transform: translate(-50%, -45%) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, -50%);
                opacity: 1;
            }
        }

        /* Corps Gris Plastique */
        /* Corps Gris Plastique */
        .cassette-body {
            width: 100%;
            height: 100%;
            background: #d4d4d4;
            /* Gris clair Philips ancien */
            border-radius: 12px;
            position: relative;
            /* Ombre et relief plastique global + PERFORMANCE SHADOW REPLACEMENT */
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.7), 0 20px 50px rgba(0, 0, 0, 0.8);
            overflow: hidden;
            /* Pour que les stickers ne dépassent pas */
            transition: background 0.5s ease;
        }

        /* Vis (Screws) */
        .screw {
            position: absolute;
            width: 18px;
            height: 18px;
            background: radial-gradient(circle at 30% 30%, #666, #222);
            border-radius: 50%;
            box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
            z-index: 20;
        }

        .screw::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 10%;
            width: 80%;
            height: 2px;
            background: #111;
            transform: translateY(-50%) rotate(45deg);
        }

        .screw.tl {
            top: 12px;
            left: 12px;
        }

        .screw.tr {
            top: 12px;
            right: 12px;
        }

        .screw.bl {
            bottom: 12px;
            left: 12px;
        }

        .screw.br {
            bottom: 12px;
            right: 12px;
        }

        .screw.bc {
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Etiquette Principale (Le Sticker à 3 bandes) */
        .sticker-area {
            position: absolute;
            top: 40px;
            left: 40px;
            right: 40px;
            bottom: 80px;
            background: #e8e8e8;
            /* Fond blanc cassé */
            border-radius: 15px 15px 8px 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            transition: background 0.5s ease;
        }

        /* Haut du sticker (Blanc) */
        .sticker-top {
            flex: 1.2;
            position: relative;
            border-bottom: 3px solid #111;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .brand-logo {
            font-family: 'Helvetica', sans-serif;
            font-weight: 900;
            font-size: 2.2rem;
            letter-spacing: -1px;
            color: #111;
            line-height: 1;
        }

        .brand-sub {
            font-size: 0.6rem;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 5px;
            color: #111;
        }

        .side-index {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            color: #111;
            text-align: right;
        }

        .index-word {
            font-size: 0.8rem;
            text-transform: lowercase;
        }

        .index-big {
            font-size: 2.5rem;
            line-height: 0.8;
        }

        .entry-lines {
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            width: 45%;
        }

        .line {
            width: 100%;
            height: 1px;
            background: #999;
            margin-bottom: 12px;
        }

        /* Milieu du sticker (Bande Rouge) */
        .sticker-middle {
            flex: 1.5;
            background: #d62222;
            /* Rouge Philips */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .model-text {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 3.5rem;
            color: #111;
            letter-spacing: -1px;
            text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
            /* Le "C-60" est noir sur la bande rouge dans certaines versions, ou blanc.
               Sur l'image envoyée c'est NOIR "C-60" sur fond rouge. */
        }

        .philips-shield {
            width: 40px;
            height: 45px;
            border: 2px solid #111;
            border-radius: 50% 50% 10px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #111;
        }

        /* Compteur Mécanique */
        .tape-counter {
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #111;
            color: #f0f0f0;
            font-family: 'Space Mono', monospace;
            font-size: 1.2rem;
            padding: 2px 8px;
            border: 2px solid #666;
            border-radius: 4px;
            box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.2);
            z-index: 20;
            letter-spacing: 2px;
            width: 80px;
            text-align: center;
        }

        /* Fenêtre centrale dans la bande rouge */
        .window-cutout {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 320px;
            height: 80px;
            background: #aaa;
            /* Plastique gris sous le sticker */
            border-radius: 40px;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid #e8e8e8;
            /* Bord blanc du sticker autour du trou */
        }

        /* Bobines */
        .tape-hub {
            width: 60px;
            height: 60px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tape-hub::after {
            content: '';
            width: 20px;
            height: 20px;
            background: #111;
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }

        .tape-hub.left {
            left: 30px;
        }

        .tape-hub.right {
            right: 30px;
        }

        .tape-connection {
            position: absolute;
            width: 100%;
            height: 40px;
            background: #331a00;
            opacity: 0.9;
            z-index: -1;
        }

        /* Bas du sticker (Points Rouges) */
        .sticker-bottom {
            flex: 1;
            background: #e8e8e8;
            border-top: 3px solid #111;
            position: relative;
            padding: 10px 25px;
            display: flex;
            align-items: center;
        }

        .red-dots {
            display: flex;
            gap: 8px;
        }

        .dot {
            width: 35px;
            height: 35px;
            background: #d62222;
            border-radius: 50%;
        }

        .tech-text {
            font-family: 'Helvetica', sans-serif;
            font-weight: 700;
            margin-left: 20px;
            font-size: 1rem;
            color: #111;
        }

        .compact-logo {
            margin-left: auto;
            border: 1px solid #111;
            padding: 2px 8px;
            font-family: 'Helvetica', sans-serif;
            font-style: italic;
            font-weight: bold;
            font-size: 0.9rem;
            color: #111;
            position: relative;
        }

        .compact-logo::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -60px;
            width: 50px;
            height: 2px;
            background: #111;
        }

        /* Bas de la cassette (Forme trapèze) */
        .tape-bottom-trapezoid {
            position: absolute;
            bottom: 0;
            left: 10%;
            width: 80%;
            height: 60px;
            background: linear-gradient(to bottom, #d4d4d4 0%, #c0c0c0 100%);
            border-top: 1px solid #aaa;
            clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
            z-index: 10;
            /* Fake shadow for performance since drop-shadow is removed */
            filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
        }

        /* Animations Rouleaux */
        body.site-ready .tape-hub {
            animation: spinHub 4s linear infinite;
        }

        @keyframes spinHub {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* ================= LE FILM ================= */
        /* --- VHS SCANLINES OVERLAY --- */
        .media-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 0) 50%,
                    rgba(0, 0, 0, 0.2) 50%,
                    rgba(0, 0, 0, 0.2));
            background-size: 100% 4px;
            z-index: 5;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .project-card:hover .media-container::after {
            opacity: 1;
            animation: vhsScan 0.5s linear infinite;
        }

        @keyframes vhsScan {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 0 4px;
            }
        }

        /* --- GLITCH EFFECT --- */
        .glitch-active .fixed-stage {
            animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        }

        @keyframes glitch-anim {
            0% {
                transform: translate(0);
            }

            20% {
                transform: translate(-5px, 5px);
                filter: hue-rotate(90deg);
            }

            40% {
                transform: translate(-5px, -5px);
            }

            60% {
                transform: translate(5px, 5px);
                filter: hue-rotate(-90deg);
            }

            80% {
                transform: translate(5px, -5px);
            }

            100% {
                transform: translate(0);
            }
        }

        .film-container {
            position: relative;
            left: 50%;
            transform: translateX(-50%) skewY(var(--scroll-skew, 0deg));
            width: 700px;
            max-width: 100%;
            z-index: 5;
            opacity: 0;
            padding-top: calc(50vh + 280px);
            padding-bottom: 300px;
            transition: left var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--transition-speed) ease, transform 0.1s ease-out;
        }

        body.site-ready .film-container {
            animation: dropFilm 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
        }

        body.details-open .film-container {
            left: 25%;
            /* transform reste à -50%, donc on bouge le point d'ancrage */
        }

        @keyframes dropFilm {
            from {
                opacity: 0;
                margin-top: -100px;
            }

            to {
                opacity: 1;
                margin-top: 0;
            }
        }

        /* ================= LE FILM (AMÉLIORÉ) ================= */
        /* ================= LE FILM ================= */
        .film-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #080808;
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #000 24px, #000 28px);
            border-left: 5px dotted rgba(255, 255, 255, 0.15);
            border-right: 5px dotted rgba(255, 255, 255, 0.15);
            z-index: -1;
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
            transition: background-color 0.5s ease, border-color 0.5s ease;
        }

        /* --- CARTE PROFIL --- */
        .profile-section {
            width: 100%;
            margin-bottom: 150px;
            padding: 40px 30px;
            border: 2px solid #444;
            background: #111;
            display: flex;
            gap: 30px;
            position: relative;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .profile-section:hover {
            transform: scale(1.02);
            border-color: #fff;
            background: #1a1a1a;
        }

        .profile-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #fff;
            color: #000;
            font-family: 'Space Mono';
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 8px;
        }

        .profile-section::before {
            content: 'ID_CARD // CLICK FOR INFO';
            position: absolute;
            top: -12px;
            left: 20px;
            background: #080808;
            padding: 0 10px;
            font-family: 'Space Mono';
            font-size: 0.7rem;
            color: #888;
        }

        .staple {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 8px;
            background: #666;
            border-radius: 2px;
        }

        .profile-photo {
            width: 140px;
            height: 180px;
            flex-shrink: 0;
            border: 2px solid #fff;
            overflow: hidden;
        }

        .profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: 0.5s;
        }

        .profile-section:hover .profile-img {
            filter: grayscale(0%);
        }

        .profile-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .profile-name {
            font-size: 2.5rem;
            text-transform: uppercase;
            line-height: 0.9;
            margin-bottom: 10px;
            color: #fff;
        }

        .profile-role {
            font-family: 'Space Mono';
            color: var(--accent);
            font-size: 0.9rem;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .profile-bio-short {
            font-family: 'Space Mono';
            font-size: 0.85rem;
            color: #ccc;
            line-height: 1.5;
        }


        /* --- CARTES PROJETS --- */
        .project-card {
            position: relative;
            width: 100%;
            height: 400px;
            margin-bottom: 120px;
            background: #000;
            border: 1px solid #333;
            cursor: pointer;
            transition: all 0.3s, color 0.5s, border-color 0.5s, background-color 0.5s;
        }

        .project-card.dimmed {
            opacity: 0.1;
            filter: grayscale(100%);
            pointer-events: none;
        }

        .project-card:hover {
            transform: scale(1.03);
            border-color: #fff;
            z-index: 10;
        }

        .media-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .media-container img,
        .media-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: filter 0.5s;
        }

        .project-card:hover .media-container img,
        .project-card:hover .media-container video {
            filter: grayscale(0%);
        }

        .type-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fff;
            color: #000;
            font-family: 'Space Mono';
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 8px;
            z-index: 20;
            /* Ensure on top of media */
        }

        .type-badge.vid {
            background: var(--accent);
            color: #fff;
        }

        .type-badge.pho {
            background: #3355ff;
            /* Blue for Photos */
            color: #fff;
        }

        .p-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, #000, transparent);
            padding: 15px;
            font-family: 'Space Mono';
            font-size: 1rem;
            color: #fff;
            /* Always white due to dark gradient background */
        }


        /* ================= SIDEBAR DÉTAILS ================= */
        .detail-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 50%;
            height: 100dvh;
            background: var(--panel-bg);
            border-left: 1px solid #333;
            transform: translateX(100%);
            /* Transition fluide */
            transition: transform var(--transition-speed) cubic-bezier(0.77, 0, 0.175, 1);
            z-index: 1100;
            padding: 60px;
            overflow-y: auto;
        }

        body.details-open .detail-panel {
            transform: translateX(0);
        }

        .close-btn {
            background: none;
            border: 1px solid #fff;
            color: #fff;
            padding: 10px 20px;
            cursor: pointer;
            font-family: 'Space Mono';
            margin-bottom: 40px;
            display: inline-block;
            transition: 0.3s;
        }

        .close-btn:hover {
            background: #fff;
            color: #000;
        }

        .detail-content {
            opacity: 0;
            transition: opacity 0.5s 0.3s;
        }

        body.details-open .detail-content {
            opacity: 1;
        }

        .detail-title {
            font-size: 3rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            line-height: 0.9;
        }

        .detail-meta {
            font-family: 'Space Mono';
            color: #666;
            margin-bottom: 30px;
            border-bottom: 1px solid #333;
            padding-bottom: 20px;
        }

        .detail-desc {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #ccc;
            margin-bottom: 40px;
        }

        .detail-gallery img {
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid #333;
        }

        .contact-links a {
            display: block;
            color: #fff;
            text-decoration: none;
            font-family: 'Space Mono';
            font-size: 1.2rem;
            margin-bottom: 15px;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
        }

        .contact-links a:hover {
            color: var(--accent);
            border-color: var(--accent);
        }

        /* Extra Media Grid for Details */
        .extra-media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 20px;
        }

        .extra-media-item {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4/3;
            /* Landscape 4/3 */
            object-fit: cover;
            border: 1px solid #333;
            filter: grayscale(100%);
            transition: all 0.3s ease;
        }

        .extra-media-item:hover {
            filter: grayscale(0%);
            border-color: #fff;
        }

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

        /* ================= LIGHT MODE / NEON ================= */
        body.light-mode {
            --bg-dark: #e0e0e0;
            --text-main: #111;
            --panel-bg: #f5f5f5;
        }

        body.light-mode .intro-overlay {
            background: #fff;
        }

        body.light-mode .intro-text {
            color: #000;
        }

        body.light-mode .cassette-body {
            background: #f0f0f0;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 1);
        }

        body.light-mode .film-bg {
            background-color: #ddd;
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #ccc 24px, #ccc 28px);
            border-left: 5px dotted rgba(0, 0, 0, 0.2);
            border-right: 5px dotted rgba(0, 0, 0, 0.2);
        }

        body.light-mode .sticker-area {
            background: #fff;
        }

        body.light-mode .rec-indicator {
            color: #000;
            mix-blend-mode: normal;
        }

        body.light-mode .project-card {
            background: #fff;
            border-color: #ccc;
        }

        body.light-mode .gallery-overlay {
            background: rgba(255, 255, 255, 0.95);
        }

        body.light-mode .gallery-title {
            color: #000;
        }

        body.light-mode .gallery-close,
        body.light-mode .gallery-item .item-meta {
            color: #000;
            border-color: #000;
        }

        body.light-mode .item-meta {
            background: linear-gradient(to top, #fff, transparent);
        }

        body.light-mode .detail-title,
        body.light-mode .detail-meta,
        body.light-mode .detail-desc {
            color: #000;
        }

        body.light-mode .close-btn {
            color: #000;
            border-color: #000;
        }

        body.light-mode .close-btn:hover {
            background: #000;
            color: #fff;
        }

        body.light-mode .contact-links a {
            color: #000;
            border-bottom: 1px solid #ccc;
        }

        body.light-mode .contact-links a:hover {
            border-color: #000;
        }

        /* Theme Toggle FLoating */
        .fixed-controls {
            position: fixed;
            top: 40px;
            right: 40px;
            z-index: 200;
            display: flex;
            gap: 10px;
        }

        .icon-btn {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #444;
            color: #fff;
            padding: 8px 16px;
            font-family: 'Space Mono';
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: all 0.3s;
            text-transform: uppercase;
            font-size: 0.8rem;
        }

        .icon-btn:hover {
            border-color: #fff;
            background: #fff;
            color: #000;
        }

        /* Light Mode Overrides */
        body.light-mode .icon-btn {
            background: rgba(255, 255, 255, 0.5);
            color: #000;
            border-color: #000;
        }

        body.light-mode .icon-btn:hover {
            background: #000;
            color: #fff;
            border-color: #000;
        }

        /* Light Mode Buttons */
        /* Light Mode Buttons */
        body.light-mode .filter-btn {
            background: rgba(255, 255, 255, 0.6);
            border-color: #999;
            color: #333;
        }

        body.light-mode .filter-btn:hover,
        body.light-mode .filter-btn.active {
            border-color: #000;
            color: #fff;
            background: #000;
        }

        body.light-mode .filter-btn.active {
            font-weight: bold;
            border-width: 1px;
        }

        /* Light Mode Cursor - Force Black */
        body.light-mode .cursor-dot {
            background: #000 !important;
            mix-blend-mode: normal !important;
        }

        body.light-mode .cursor-outline {
            border-color: #000 !important;
            mix-blend-mode: normal !important;
        }

        /* Light Mode Shapes Visibility */
        body.light-mode .shape {
            border-color: rgba(0, 0, 0, 0.15);
            background: rgba(0, 0, 0, 0.02);
            box-shadow:
                0 0 30px rgba(0, 0, 0, 0.05),
                inset 0 0 20px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .shape-4 {
            border-color: rgba(0, 0, 0, 0.15);
            /* Darker red for visibility */
        }

        body.light-mode.hovering .cursor-outline {
            background: rgba(0, 0, 0, 0.1);
            border-color: var(--accent);
        }

        /* NO END OF TAPE ANIMATION */

        .mobile-archive-btn {
            display: none;
        }

        /* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .theme-toggle-btn {
                top: 20px;
                right: 20px;
                padding: 5px 10px;
                font-size: 0.7rem;
            }

            .custom-cursor {
                display: none !important;
            }

            /* No cursor on touch */
            body,
            a,
            button,
            .click-trigger {
                cursor: auto !important;
            }

            .intro-text {
                font-size: 8rem;
            }

            /* WALKMAN MODE: Rotate Cassette Vertical */
            .cassette-wrapper {
                width: var(--cassette-width);
                height: var(--cassette-height);
                top: 35vh;
                /* Center dynamically based on viewport height */
                left: 50%;
                transform: translate(-50%, -50%) rotate(90deg) scale(0.65);
                /* Scale up to be visible but fit vertical screen */
            }

            /* Fix GSAP overriding transform - handled in JS mostly but CSS backup */

            /* Fix: Film container should not be "flattened". Give it a fixed width similar to visual cassette width.
             50vh width was bad. Let's force a "vertical" tape look. */
            /* Fix: Film container should not be "flattened". Give it a fixed width similar to visual cassette width.
             50vh width was bad. Let's force a "vertical" tape look. */
            .film-container {
                width: 90vw;
                max-width: none;
                margin: 0;
                left: 5vw;
                transform: none;
                padding-top: 75vh;
                /* Push down dynamically below the vertical cassette */
            }

            .project-card {
                height: auto;
                min-height: 60vh;
                /* Make cards dynamically taller */
                margin-bottom: 5vh;
            }

            /* Specifically target the FIRST card (Bio/Contact usually) to be full screen? */
            .project-card:first-child {
                min-height: 100dvh;
                /* Make bio/contact card take true full screen on mobile */
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-bottom: 2vh;
            }

            .video-item-no-click {
                cursor: default !important;
                pointer-events: none !important;
            }

            .video-item-no-click:hover {
                border-color: #333 !important;
            }

            .detail-panel {
                width: 100%;
                height: 100dvh;
                padding: 10vh 5vw;
                z-index: 300;
            }

            .gallery-item .item-meta {
                font-size: 5vw !important;
                padding: 4vw !important;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
            }

            .filter-controls {
                display: none;
            }

            /* --- MOBILE ARCHIVE BUTTON (x3 SIZE) --- */
            .mobile-archive-btn {
                display: flex;
                align-items: center;
                gap: 3vw;
                position: fixed;
                bottom: 8vh;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(10, 10, 10, 0.9);
                color: #fff;
                border: 0.5vw solid rgba(255, 255, 255, 0.5);
                padding: 2.5vh 6vw;
                /* RESPONSIVE PADDING */
                font-family: 'Space Mono', monospace;
                font-size: 4vw;
                /* RESPONSIVE FONT */
                letter-spacing: 0.5vw;
                z-index: 900;
                backdrop-filter: blur(10px);
                border-radius: 2vw;
                width: auto;
                min-width: 80vw;
                justify-content: center;
                box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.6);
                text-transform: uppercase;
                transition: all 0.3s ease;
            }

            /* --- THEME TOGGLE (x3 SIZE) --- */
            .theme-toggle-btn {
                top: 4vh;
                right: 5vw;
                padding: 2vh 4vw;
                font-size: 4vw;
                border-width: 0.5vw;
            }

            /* --- CLOSE BUTTONS (HUGE) --- */
            /* Generic Round Close Buttons (X) */
            .gallery-close,
            .detail-close-btn,
            .contact-close-btn,
            .close-btn {
                width: 14vw;
                height: 14vw;
                font-size: 6vw;
                line-height: normal;
                opacity: 1;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 0.5vw solid rgba(255, 255, 255, 0.3);
                color: #fff;
            }

            /* --- FULL SCREEN CONTACT POPUP --- */
            .contact-card.cassette-style {
                width: 100vw;
                height: 100dvh;
                border-radius: 0;
                top: 0;
                left: 0;
                transform: none;
                max-height: none;
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 10vh;
                /* Space for close button */
            }

            .contact-card .card-header-tape {
                margin-bottom: 2vh;
            }

            .contact-card .sticker-form-area {
                flex: 1;
                width: 90vw;
            }

            /* Floating Close for Contact Mobile */
            #closeContact {
                position: fixed;
                top: 3vh;
                right: 5vw;
                z-index: 1001;
            }

            /* --- MOBILE FONT SIZES --- */
            .icon-btn,
            .rec-indicator {
                font-size: 5vw !important;
                /* Force larger size on mobile */
            }

            .mobile-archive-btn:active {
                background: var(--accent);
                border-color: var(--accent);
                transform: translateX(-50%) scale(0.95);
            }

            body.light-mode .mobile-archive-btn {
                background: rgba(255, 255, 255, 0.9);
                color: #000;
                border-color: #ccc;
            }

            body.details-open .fixed-stage {
                transform: translateX(-15vw);
                opacity: 0.2;
            }

            .scroll-cta {
                bottom: 18vh;
                font-size: 3vw;
                letter-spacing: 0.5vw;
            }

            .profile-section {
                flex-direction: column;
                text-align: center;
                padding: 0 5vw;
            }

            .profile-photo {
                margin: 0 auto;
                width: 50vw;
                height: auto;
            }

            .profile-img {
                width: 100%;
                height: auto;
            }
        }



        /* ================= GALLERY POPUP ================= */
        /* ================= GALLERY POPUP ================= */
        .gallery-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100dvh;
            background: rgba(5, 5, 5, 0.95);
            backdrop-filter: blur(15px);
            z-index: 1000;

            /* Slide from Left Animation */
            transform: translateX(-100%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease,
                visibility 0.6s;

            overflow-y: auto;
            padding: 80px 40px;
        }

        .gallery-overlay.open {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, visibility 0.6s, background 0.5s ease;
        }

        .gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 60px;
            border-bottom: 1px solid #333;
            padding-bottom: 20px;
        }

        .gallery-title {
            font-size: 8rem;
            color: #fff;
            line-height: 0.8;
            text-transform: uppercase;
        }

        .gallery-close {
            background: transparent;
            border: 1px solid #fff;
            color: #fff;
            padding: 10px 20px;
            cursor: pointer;
            font-family: 'Space Mono';
            transition: 0.3s;
        }

        .gallery-close:hover {
            background: #fff;
            color: #000;
        }

        .category-block {
            margin-bottom: 80px;
        }

        .category-title {
            font-family: 'Space Mono';
            font-size: 3.2rem;
            color: var(--accent);
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            aspect-ratio: 16/9;
            border: 1px solid #333;
            overflow: hidden;
            cursor: pointer;
        }

        .gallery-item:hover {
            border-color: #fff;
        }

        .gallery-item img,
        .gallery-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: 0.5s;
        }

        .gallery-item:hover img,
        .gallery-item:hover video {
            filter: grayscale(0%);
        }

        .item-meta {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, #000, transparent);
            padding: 15px 10px;
            font-family: 'Space Mono';
            font-size: 1.2rem;
            color: #fff;
            transform: translateY(100%);
            transition: 0.3s;
        }

        .gallery-item:hover .item-meta {
            transform: translateY(0);
        }

        /* ================= HIGHLIGHTER EFFECT ================= */
        .highlighter-text {
            position: relative;
            display: inline-block;
            background-image: linear-gradient(rgba(255, 230, 0, 0.95), rgba(255, 230, 0, 0.95));
            background-size: 0% 100%;
            background-repeat: no-repeat;
            background-position: left center;
            transition: background-size 0.4s ease-out, color 0.1s ease-out 0.1s;
            padding: 0 4px;
            margin: 0 -4px;
            cursor: pointer;
            z-index: 10;
        }

        .highlighter-text:hover {
            background-size: 100% 100%;
            color: #000;
        }

        /* --- CTA OVERLAY --- */
        .cta-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(2px);
            z-index: 20;
        }

        .project-card:hover .cta-overlay {
            opacity: 1;
        }

        .cta-icon {
            font-size: 2rem;
            color: #fff;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 50, 50, 0.8);
        }

        .cta-text {
            font-family: 'Space Mono', monospace;
            font-size: 0.8rem;
            color: #fff;
            letter-spacing: 2px;
            background: #000;
            padding: 5px 10px;
            border: 1px solid #fff;
        }

        /* ================= CONTACT OVERLAY (CASSETTE STYLE) ================= */
        .contact-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100dvh;
            background: rgba(5, 5, 5, 0.9);
            backdrop-filter: blur(10px);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .contact-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* The Cassette Body (Black Plastic) */
        .contact-card.cassette-style {
            width: 70%;
            max-width: 550px;
            background: #1a1a1a;
            /* Black Plastic */
            border-radius: 15px;
            box-shadow:
                inset 0 0 20px rgba(255, 255, 255, 0.05),
                /* Plastic Shine */
                0 20px 60px rgba(0, 0, 0, 0.9),
                /* Deep Shadow */
                0 0 0 2px #111;
            /* Outline */
            font-family: 'Space Mono', monospace;
            transform: scale(0.95) rotate(-2deg);
            /* Slight jaunty angle */
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .contact-overlay.active .contact-card.cassette-style {
            transform: scale(1) rotate(0deg);
        }

        /* Header Tape Info */
        .card-header-tape {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 0 10px;
            border-bottom: 2px solid #222;
            padding-bottom: 10px;
        }

        .tape-brand {
            font-family: 'Helvetica', sans-serif;
            font-weight: 900;
            font-size: 1.2rem;
            letter-spacing: -1px;
            color: #ccc;
            text-shadow: 1px 1px 0 #000;
        }

        .side-label {
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            color: var(--accent);
            border: 2px solid var(--accent);
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
        }

        .contact-close-btn {
            background: #333;
            border: 1px solid #555;
            color: #fff;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-family: 'Space Mono', monospace;
            border-radius: 4px;
            font-weight: bold;
            transition: all 0.2s;
        }

        .contact-close-btn:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: #000;
        }

        /* The Writable Sticker Area */
        .sticker-form-area {
            background: #f0f0f0;
            /* White Sticker Paper */
            border-radius: 8px;
            padding: 20px;
            position: relative;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
            margin-bottom: 15px;
            /* Texture papier */
            background-image: url("https://www.transparenttextures.com/patterns/cardboard-flat.png");
        }

        .sticker-header {
            margin-bottom: 15px;
            border-bottom: 2px solid #333;
            padding-bottom: 5px;
        }

        .handwritten-note {
            font-family: 'Space Mono', monospace;
            /* Changed for legibility */
            color: #111;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        /* Form Lines looking like ruled paper */
        .form-line {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #99a;
            /* Hand write line color */
            margin-bottom: 10px;
            position: relative;
        }

        .form-line label {
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            color: #333;
            width: 60px;
            font-weight: bold;
            margin-right: 5px;
        }

        .form-line input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            font-family: 'Space Mono', monospace;
            /* Modern/Legible */
            font-size: 0.9rem;
            color: #000;
            padding: 5px;
            font-weight: bold;
        }

        .form-line input::placeholder {
            font-family: 'Space Mono', monospace;
            opacity: 0.4;
            font-size: 0.8rem;
            font-weight: normal;
        }

        /* Message Area */
        .form-area {
            background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #99a 30px);
            margin-bottom: 15px;
        }

        .form-area textarea {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: 'Space Mono', monospace;
            /* Modern/Legible */
            font-size: 0.9rem;
            /* Smaller for better fit */
            line-height: 30px;
            /* Match gradient */
            color: #000;
            min-height: 120px;
            resize: vertical;
            padding-top: 5px;
            font-weight: bold;
        }

        /* Submit Button as a Tape Button */
        .submit-tape-btn {
            width: 100%;
            background: #222;
            color: #fff;
            border: none;
            padding: 12px;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            font-size: 1rem;
            letter-spacing: 2px;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 0 5px 0 #000;
            transition: all 0.1s;
            margin-top: 5px;
        }

        .submit-tape-btn:active {
            transform: translateY(4px);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 #000;
            color: var(--accent);
        }

        /* Footer Tape Info */
        .card-footer-tape {
            display: flex;
            justify-content: space-between;
            color: #555;
            font-size: 0.6rem;
            padding: 0 10px;
        }

        .tape-duration {
            font-weight: bold;
            border: 1px solid #333;
            padding: 2px 5px;
            border-radius: 3px;
        }

        /* Screws positioning override inside relative card */
        .contact-card .screw {
            z-index: 10;
        }

        /* ================= FULLSCREEN VIEWER ================= */
        #fullscreen-viewer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100dvh;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        #fullscreen-viewer.active {
            opacity: 1;
            pointer-events: auto;
        }

        .fs-image-container {
            max-width: 90%;
            max-height: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #fs-image {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
            border: 1px solid #333;
        }

        .fs-btn {
            background: none;
            border: none;
            color: #fff;
            font-family: 'Space Mono';
            cursor: pointer;
            position: absolute;
            transition: color 0.3s;
            z-index: 10001;
        }

        .fs-btn:hover {
            color: var(--accent);
        }

        #fs-close {
            top: 30px;
            right: 30px;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-btn {
            font-size: 3rem;
            padding: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        #fs-prev {
            left: 20px;
        }

        #fs-next {
            right: 20px;
        }

        .fs-counter {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Space Mono';
            color: #888;
            font-size: 0.9rem;
            letter-spacing: 2px;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .nav-btn {
                font-size: 2rem;
                padding: 10px;
            }

            #fs-prev {
                left: 10px;
            }

            #fs-next {
                right: 10px;
            }
        }