/* SHARED tokens + social bar — every page.
   Loaded from the head by php/font-links.php so --font applies before paint.
   Markup still comes from php/social-links.php. To change the face or weights,
   edit php/font-links.php (Fontshare URL) and the --font* variables below. */

        :root {
            color-scheme: light dark;
            --font: 'Satoshi', sans-serif;
            --font-light: 300;
            --font-regular: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;
            --font-extrabold: 800;
            --font-black: 900;
            --font-track-wide: 0.075em;
            --font-track-tight: 0;
            --menu-pad: 20px;
            --menu-pad-top: 30px;
            --menu-pad-bottom: 20px;
            --menu-name: light-dark(#1A1A1A, #F4F1EA);
            --menu-link: light-dark(#8A8680, #A9A59E);
            --menu-label: light-dark(#B8B3AB, #6A6660);
            --menu-hot: light-dark(#1A1A1A, #F4F1EA);
            --menu-group: light-dark(#3F3B37, #D4D0C8);
            --menu-name-film: #F4F1EA;
            --menu-link-film: #ACACAC;
            --menu-hot-film: #F4F1EA;
            --rule-film: rgba(172, 172, 172, 0.35);
            --rule: light-dark(rgba(142, 138, 130, 0.4), rgba(169, 165, 158, 0.35));
            --card-radius: 9px;
            --page-pad: 10px;
            --page-pad-contact: 5vh;
            --thumb-inset: 4px;
            --thumb-ratio: 2.4 / 1;
            --card-face: light-dark(#F4F1EA, #1F2424);
            --social-icon-size: 20px;
            --social-icon-pad: 8px;
            --nav-arrow-size: 40px;
            --nav-arrow-inset: 30px;
            --nav-hit: 70px;
            --peek: 50px;
        }

        /* Site mobile cutoff — use 840px everywhere, do not invent others. */
        @media (max-width: 840px) {
            :root {
                --nav-arrow-inset: 5vw;
                --social-icon-pad: 10px;
                --page-pad: 5px;
                --page-pad-contact: 3vh;
            }
        }

        html, body {
            font-family: var(--font);
            font-optical-sizing: none;
        }

        .social-links-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: var(--menu-pad-bottom) var(--menu-pad) calc(var(--menu-pad-bottom) + env(safe-area-inset-bottom));
            z-index: 1;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        body:not(:has(.video-container)) .social-links-container {
            margin-top: auto;
        }

        body:has(.video-container) .social-links-container.reveal {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 150px;
            align-items: flex-end;
            padding: 0 var(--menu-pad) calc(var(--menu-pad) + env(safe-area-inset-bottom));
            z-index: 20;
        }

        body:has(.video-container) .social-links-container.reveal::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            transform: scaleY(-1);
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.02) 3%,
                rgba(0, 0, 0, 0.1) 18%,
                rgba(0, 0, 0, 0.2) 40%,
                rgba(0, 0, 0, 0.4) 70%,
                rgba(0, 0, 0, 0.6) 100%
            );
        }

        body.is-leaving-home .social-links-container.reveal.loaded {
            transform: translateY(110%);
            transition: transform 0.5s ease-in-out;
        }

        .social-links {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            width: 100%;
            white-space: nowrap;
        }

        .social-links::before,
        .social-links::after {
            content: '';
            flex: 1 1 0;
            height: 1px;
            background: var(--rule);
            pointer-events: none;
        }

        .social-links::before { margin-right: 16px; }
        .social-links::after { margin-left: 16px; }

        /* Home and Contact slide the whole bar in. Reel and the rest are already in place. */
        .social-links-container.reveal {
            transform: translateY(calc(100% + var(--menu-pad-bottom)));
            transition: transform 0.6s ease;
        }

        .social-links-container.reveal.loaded {
            transform: translateY(0);
        }

        /* Parked while a film or the image lightbox is open. */
        .social-links-container.covered {
            opacity: 0;
        }

        .social-links-container.covered .social-links a {
            pointer-events: none;
        }

        .social-links a,
        .social-links a:link,
        .social-links a:visited,
        .social-links a:active,
        .social-links a:focus {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--social-icon-pad);
            color: var(--menu-link);
            text-decoration: none;
        }

        .social-links i {
            color: var(--menu-link);
            display: block;
            font-size: var(--social-icon-size);
            line-height: 1;
            transform: translateZ(0);
            transform-origin: 50% 50%;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-links a:hover i {
            color: var(--menu-hot);
            transform: translateZ(0) scale(1.2);
        }

        .video-navigation.is-ready button i,
        .modal .prev i,
        .modal .next i {
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .site-close,
        .site-share {
            position: absolute;
            top: calc(20px + env(safe-area-inset-top));
            z-index: 2;
            padding: 8px;
            border: 0;
            background: none;
            color: rgba(255, 255, 255, 0.4);
            font-size: 18px;
            cursor: pointer;
        }

        .site-close:hover,
        .site-share:hover {
            color: rgba(255, 255, 255, 0.6);
        }

        .site-close {
            right: 8px;
        }

        .site-share {
            right: 48px;
        }