:root {
            --brand-red: #d11313; /* Deep, aggressive red */
            --brand-red-glow: #7a0000;
            --brand-black: #030303;
            --font-display: 'Anton', sans-serif;
            --font-header: 'Bebas Neue', cursive;
            --font-mono: 'Space Mono', monospace;
            --font-sans: 'Inter', sans-serif;
        }

        body {
            background-color: var(--brand-black);
            color: white;
            font-family: var(--font-sans);
            overflow-x: hidden;
            cursor: none;
            margin: 0;
            padding: 0;
        }

        /* ==============================================================
           SMART CURSOR ENGINE
           ============================================================== */
        #custom-cursor, #cursor-follower { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: 99999; }
        #custom-cursor { display: none; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #000; }
        #cursor-follower { width: 180px; height: 180px; margin: -90px; z-index: 99998; mix-blend-mode: difference; }
        #cursor-follower canvas { display: block; width: 100%; height: 100%; }
        #cursor-follower::before { content: ''; position: absolute; inset: 86px; background: #fff; border-radius: 50%; box-shadow: 0 0 2px #0008; transition: transform .2s ease; }
        #cursor-follower.cursor-active::before { transform: scale(2); }
        .cursor-shader-ready #cursor-follower::before, .cursor-shader-ready #custom-cursor { display: none; }
        .cursor-text-inject { position: absolute; top: 108px; left: 108px; white-space: nowrap; font: 500 9px/1.4 'Manrope', sans-serif; letter-spacing: .16em; color: #fff; text-shadow: none; }
        .cursor-text-inject::after { content: attr(data-cursor-text); opacity: 0; transition: opacity .18s; }
        #cursor-follower.cursor-active .cursor-text-inject::after { opacity: 1; }
        .cursor-enhanced.cursor-visible #custom-cursor, .cursor-enhanced.cursor-visible #cursor-follower { opacity: 1; }
        html.cursor-enhanced, html.cursor-enhanced * { cursor: none !important; }
        html:not(.cursor-enhanced), html:not(.cursor-enhanced) * { cursor: auto !important; }
        html:not(.cursor-enhanced) a, html:not(.cursor-enhanced) button { cursor: pointer !important; }

        /* ==============================================================
           GLOBAL HORIZONTAL NAV
           ============================================================== */
        .global-nav { position: fixed; inset: 0 0 auto; z-index: 100; height: 90px; padding: 0 clamp(20px, 3.5vw, 64px); display: flex; align-items: center; gap: 32px; background: transparent; border-bottom: 0; backdrop-filter: none; box-sizing: border-box; }
        .nav-logo { flex-shrink: 0; font: 500 clamp(22px, 2vw, 30px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .035em; color: #f5efe4; text-decoration: none; pointer-events: auto; }
        .nav-logo small { display: block; margin-top: 8px; color: #ae9470; font: 500 8px/1 'Manrope', sans-serif; letter-spacing: .3em; }
        .nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 32px); margin-left: auto; pointer-events: auto; }
        .nav-link { position: relative; padding: 14px 0; white-space: nowrap; color: #b6b2aa; font: 500 10px/1.5 'Manrope', sans-serif; letter-spacing: .12em; text-decoration: none; --nav-line: 0; }
        .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 1px; background: #c6ad85; transform: scaleX(var(--nav-line)); transform-origin: left; }
        .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current] { color: #f5efe4; }
        .nav-link[aria-current]::before { content: ''; position: absolute; left: -9px; top: 20px; width: 3px; height: 3px; border-radius: 50%; background: #c6ad85; }
        .nav-right { display: flex; align-items: center; gap: 16px; pointer-events: auto; }
        .nav-btn-right { position: relative; overflow: hidden; padding: 14px 20px; border: 1px solid #c6ad8570; background: #c6ad850a; color: #e8d7ba; font: 600 10px/1.4 'Manrope', sans-serif; letter-spacing: .12em; white-space: nowrap; transition: background .2s, border-color .2s; }
        .nav-btn-right:hover { background: #c6ad8528; border-color: #c6ad85; }
        .nav-menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid #c6ad8550; background: transparent; color: #f5efe4; padding: 12px; }
        .nav-menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; }
        .nav-progress { position: absolute; bottom: -1px; left: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #8d2020, #c6ad85); pointer-events: none; }
        .global-nav a, .global-nav button { cursor: pointer; }
        .global-nav :focus-visible { outline: 1px solid #e8d7ba; outline-offset: 5px; }
        .nav-links[hidden] { display: none; }
        @media(max-width:1180px) {
          .global-nav { height: 76px; gap: 16px; }
          .nav-right { margin-left: auto; }
          .nav-menu-toggle { display: block; }
          .nav-links { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 22px 28px 30px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; background: transparent; border-bottom: 0; box-shadow: none; }
          .nav-link { font-size: 13px; padding: 15px 0; }
        }
        @media(max-width:480px) {
          .global-nav { padding: 0 16px; }
          .nav-logo { font-size: 21px; }
          .nav-logo small { font-size: 6px; letter-spacing: .22em; }
          .nav-right { gap: 10px; }
          .nav-btn-right { padding: 11px 10px; font-size: 8px; letter-spacing: .05em; }
        }

        /* ==============================================================
           PHASE 1 (HERO) - HIGH FIDELITY UPGRADE
           ============================================================== */
        #hero-viewport {
            position: relative; height: 100vh; width: 100%; overflow: hidden;
            background-color: var(--brand-black);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }

        /* Cinematic Radial Red Glow & Texture (Includes your background image) */
        .hero-texture {
            position: absolute; inset: 0; z-index: 1; pointer-events: none;
            background:
                url('./background3.png'),
                url('./images/dust.png'),
                url('./images/black-paper.png');
            background-size: cover, cover, auto, auto;
            background-position: center;
            background-blend-mode: normal, overlay, overlay, multiply;
            opacity: 0.95;
        }

        /* Distressed Text Mixin for Foreground */
        .distressed-white {
            background: url('./images/stucco.png'), #ffffff;
            background-size: 300px;
            background-blend-mode: multiply;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #ffffff; /* Fallback */
        }

        /* Canvas for Image Sequence */
        #hero-sequence-canvas {
            position: absolute; inset: 0; width: 100%; height: 100%;
            z-index: 5; pointer-events: none;
        }

        /* ----- Foreground Typography Bottom Left ----- */
        .hero-fg-bottom-left {
            position: absolute; bottom: 60px; left: 50px; z-index: 10;
            display: flex; flex-direction: column; align-items: flex-start;
            pointer-events: none;
        }
        .hero-year {
            font-family: var(--font-display); font-size: clamp(60px, 8vw, 120px); line-height: 0.85;
            letter-spacing: -0.02em; margin-bottom: 10px;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
        }
        .hero-subtitle {
            font-family: var(--font-header); font-size: 20px; color: var(--brand-red);
            letter-spacing: 4px; text-transform: uppercase;
        }

        /* ----- Foreground Typography Bottom Right ----- */
        .hero-fg-bottom-right {
            position: absolute; bottom: 50px; right: 100px; z-index: 10;
            width: 400px; display: flex; flex-direction: column;
            pointer-events: none; text-align: right; align-items: flex-end;
        }
        .hero-paragraph-box {
            border-left: 2px solid var(--brand-red);
            padding-left: 15px; margin-bottom: 20px;
            text-align: left; width: 100%;
        }
        .hero-paragraph {
            font-family: var(--font-mono); font-size: 12px; font-weight: 700;
            line-height: 1.6; color: white;
            text-transform: uppercase; letter-spacing: 0.1em;
            opacity: 0.8;
        }
        .hero-title-small {
            font-family: var(--font-display);
            font-size: clamp(40px, 2vw, 65px);
            line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; text-align: left;
            width: 100%; padding-left: 15px;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
        }
        .hero-wishlist-link {
            font-family: var(--font-header); font-size: 16px; color: #fff;
            letter-spacing: 2px; text-transform: uppercase; margin-top: 15px;
            padding-bottom: 4px; border-bottom: 1px solid var(--brand-red);
            width: fit-content; align-self: flex-start; margin-left: 15px;
            opacity: 0.7;
        }

        /* ----- Decorative UI Elements ----- */
        .ui-bottom-left-lines {
            position: absolute; bottom: 30px; left: 50px; z-index: 10;
            display: flex; gap: 10px; pointer-events: none;
        }
        .ui-line { width: 30px; height: 2px; background: rgba(255,255,255,0.2); }
        .ui-line.active { background: var(--brand-red); }

        .ui-right-edge {
            position: absolute; right: 25px; top: 0; height: 100%; z-index: 10;
            display: flex; flex-direction: column; justify-content: space-between; align-items: center;
            padding: 40px 0; pointer-events: none;
        }
        .ui-crest { width: 24px; height: 30px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 0L24 10V20L12 30L0 20V10L12 0Z" fill="%23d11313"/></svg>') no-repeat center; opacity: 0.8;}
        .ui-dots { display: flex; flex-direction: column; gap: 15px; align-items: center; }
        .ui-dot { width: 4px; height: 4px; border: 1px solid rgba(255,255,255,0.3); transform: rotate(45deg); }
        .ui-dot.active { background: var(--brand-red); border-color: var(--brand-red); box-shadow: 0 0 8px var(--brand-red); }
        .ui-arrows { display: flex; flex-direction: column; gap: 5px; color: rgba(255,255,255,0.3); font-size: 12px; }

        /* ==============================================================
           PHASE 2: CINEMATIC SCROLLTRIGGER MEDIA REEL
           ============================================================== */
        #media-viewport {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 680px;
            overflow: hidden;
            background: #020202;
            border-top: 1px solid rgba(209, 19, 19, 0.18);
            border-bottom: 1px solid rgba(209, 19, 19, 0.18);
        }

        .media-pin {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            isolation: isolate;
        }

        .media-atmosphere {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 72% 42%, rgba(209, 19, 19, 0.14), transparent 34%),
                radial-gradient(circle at 24% 76%, rgba(110, 0, 0, 0.13), transparent 38%),
                linear-gradient(115deg, #020202 0%, #090202 46%, #020202 100%);
        }

        .media-grid {
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: 0.17;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
        }

        .media-noise {
            position: absolute;
            inset: -50%;
            width: 200%;
            height: 200%;
            z-index: 12;
            pointer-events: none;
            opacity: 0.045;
            background-image: url('./images/dust.png');
            animation: mediaNoise 0.25s steps(2) infinite;
            mix-blend-mode: screen;
        }

        @keyframes mediaNoise {
            0%   { transform: translate3d(0,0,0); }
            25%  { transform: translate3d(1.5%,-1%,0); }
            50%  { transform: translate3d(-1%,1.5%,0); }
            75%  { transform: translate3d(1%,-1.5%,0); }
            100% { transform: translate3d(0,0,0); }
        }

        .media-topbar {
            position: absolute;
            top: 92px;
            left: 50px;
            right: 50px;
            z-index: 30;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            pointer-events: none;
        }

        .media-kicker {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
        }

        .media-kicker::before {
            content: '';
            width: 34px;
            height: 1px;
            background: var(--brand-red);
            box-shadow: 0 0 10px rgba(209,19,19,0.7);
        }

        .media-scroll-copy {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 0.22em;
            color: rgba(255,255,255,0.35);
            text-transform: uppercase;
            text-align: right;
            line-height: 1.7;
        }

        /* --- STAGE EXPANSION STYLES --- */
        .media-stage {
            position: absolute;
            z-index: 5;
            left: 50%;
            top: 52%;
            width: min(76vw, 1260px);
            height: min(68vh, 720px);
            transform: translate(-50%, -50%);
            perspective: 1400px;
            /* Smoothly grow out */
            transition: width 0.7s cubic-bezier(0.77, 0, 0.175, 1),
                        height 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .media-stage.is-expanded {
            width: 100vw !important;
            height: 100vh !important;
            z-index: 50 !important;
        }

        .media-frame {
            position: absolute;
            inset: 0;
            z-index: 20;
            pointer-events: none;
            border: 1px solid rgba(209, 19, 19, 0.28);
            box-shadow: 0 45px 120px rgba(0,0,0,0.78), inset 0 0 100px rgba(0,0,0,0.22);
            transition: opacity 0.5s ease 0.2s;
        }

        .media-frame::before, .media-frame::after {
            content: ''; position: absolute; width: 42px; height: 42px;
            border-color: var(--brand-red); opacity: 0.8;
        }
        .media-frame::before { top: -1px; left: -1px; border-top: 2px solid var(--brand-red); border-left: 2px solid var(--brand-red); }
        .media-frame::after { right: -1px; bottom: -1px; border-right: 2px solid var(--brand-red); border-bottom: 2px solid var(--brand-red); }

        /* Hide elements when expanded */
        .media-stage.is-expanded .media-frame,
        .media-stage.is-expanded .media-copy,
        .media-stage.is-expanded .media-meta {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .media-panel {
            position: absolute;
            inset: 0;
            z-index: 1;
            overflow: hidden;
            background: #050505;
            will-change: transform, opacity, clip-path;
            clip-path: inset(0% 0% 0% 0%);
            transform-origin: 50% 50%;
        }
        .media-panel:not(:first-child) {
            visibility: hidden;
        }

        /* Updated to handle IFrames while acting like object-fit: cover */
        .media-visual {
            position: absolute;
            inset: -15%;
            width: 130%;
            height: 130%;
            border: none;
            pointer-events: none; /* Keeps clicks on the panel so we can close */
            filter: brightness(0.52) contrast(1.22) saturate(0.62);
            transform: scale(1.04);
            will-change: transform, filter;
            transition: inset 0.7s cubic-bezier(0.77, 0, 0.175, 1),
                        width 0.7s cubic-bezier(0.77, 0, 0.175, 1),
                        height 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        }

        /* Force visual to fit exactly when expanded and remove filter/transforms */
        .media-stage.is-expanded .media-visual {
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            transform: none !important;
            filter: none !important;
        }

        .media-panel::before, .media-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .media-panel::before {
            z-index: 2;
            background:
                linear-gradient(90deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.28) 43%, rgba(0,0,0,0.08) 67%, rgba(0,0,0,0.45) 100%),
                linear-gradient(to top, rgba(0,0,0,0.90) 0%, transparent 56%);
        }

        .media-panel::after {
            z-index: 3;
            background: linear-gradient(105deg, transparent 0 48%, rgba(209,19,19,0.09) 49%, transparent 50% 100%);
            mix-blend-mode: screen;
        }

        .media-stage.is-expanded .media-panel::before,
        .media-stage.is-expanded .media-panel::after {
            opacity: 0; /* Clear out overlays for clear viewing */
        }

        .media-copy {
            position: absolute; left: 54px; bottom: 48px;
            z-index: 8; width: min(620px, 62%);
            pointer-events: none; transition: opacity 0.5s ease 0.2s;
        }
        .media-number { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--brand-red); text-transform: uppercase; }
        .media-title { margin: 0; font-family: var(--font-display); font-size: clamp(42px, 5.6vw, 88px); line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 14px 35px rgba(0,0,0,0.72); }
        .media-desc { margin-top: 18px; max-width: 560px; font-family: var(--font-mono); font-size: 10px; line-height: 1.7; letter-spacing: 0.12em; color: rgba(255,255,255,0.57); text-transform: uppercase; }

        .media-meta {
            position: absolute; right: 34px; bottom: 38px; z-index: 8;
            display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
            pointer-events: none; transition: opacity 0.5s ease 0.2s;
        }
        .media-meta strong { font-family: var(--font-header); font-size: 18px; letter-spacing: 0.16em; color: #fff; font-weight: 400; }
        .media-meta span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.35); }

        .media-progress-wrap { position: absolute; z-index: 35; right: 48px; top: 50%; transform: translateY(-50%); height: 42vh; min-height: 260px; display: flex; align-items: center; gap: 15px; pointer-events: none; }
        .media-progress-rail { position: relative; width: 1px; height: 100%; background: rgba(255,255,255,0.12); overflow: hidden; }
        .media-progress-fill { position: absolute; inset: 0; background: var(--brand-red); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 12px rgba(209,19,19,0.65); }
        .media-counter { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; }
        #media-current { color: #fff; font-size: 14px; }
        .media-counter-divider { width: 18px; height: 1px; background: rgba(255,255,255,0.25); transform: rotate(-35deg); }
        .media-counter-total { color: rgba(255,255,255,0.28); font-size: 9px; }

        .media-chapter-label { position: absolute; left: 22px; top: 50%; z-index: 28; transform: translateY(-50%) rotate(-90deg); transform-origin: center; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.32em; color: rgba(255,255,255,0.24); text-transform: uppercase; white-space: nowrap; pointer-events: none; }

        .media-audio-toggle { position: absolute; right: 50px; bottom: 34px; z-index: 40; border: 1px solid rgba(209,19,19,0.36); background: rgba(2,2,2,0.55); color: rgba(255,255,255,0.58); padding: 10px 14px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; cursor: none; backdrop-filter: blur(10px); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
        .media-audio-toggle:hover { color: #fff; border-color: var(--brand-red); background: rgba(209,19,19,0.10); }

        @media (max-width: 900px) {
            #media-viewport { min-height: 620px; }
            .media-topbar { top: 80px; left: 22px; right: 22px; }
            .media-scroll-copy { display: none; }
            .media-stage { width: calc(100vw - 38px); height: 66vh; top: 52%; }
            .media-copy { left: 24px; bottom: 30px; width: calc(100% - 48px); }
            .media-title { font-size: clamp(38px, 12vw, 68px); }
            .media-desc { max-width: 86%; font-size: 8px; }
            .media-meta { display: none; }
            .media-progress-wrap { right: 12px; height: 30vh; }
            .media-chapter-label { display: none; }
            .media-audio-toggle { right: 22px; bottom: 18px; }
        }

        /* ==============================================================
           PHASE 3: CINEMATIC GLB TRAILER SEQUENCE
           ============================================================== */
        #katana-sequence {
            position: relative;
            width: 100%;
            height: 520vh;
            background: #000;
            border-top: 1px solid rgba(209, 19, 19, 0.1);
            border-bottom: 1px solid rgba(209, 19, 19, 0.1);
        }

        .katana-sticky-container {
            position: sticky;
            top: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #000;
            isolation: isolate;
        }

        #katana-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            pointer-events: none;
        }

        .katana-cinema-vignette {
            position: absolute;
            inset: 0;
            z-index: 8;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 46%, transparent 28%, rgba(0,0,0,0.16) 55%, rgba(0,0,0,0.72) 100%),
                linear-gradient(90deg, rgba(0,0,0,0.52), transparent 25%, transparent 75%, rgba(0,0,0,0.52));
        }

        .katana-cinema-grain {
            position: absolute;
            inset: -40%;
            z-index: 9;
            width: 180%;
            height: 180%;
            pointer-events: none;
            opacity: 0.035;
            background-image: url('./images/dust.png');
            mix-blend-mode: screen;
            animation: mediaNoise 0.3s steps(2) infinite;
        }

        .katana-letterbox {
            position: absolute;
            left: 0;
            width: 100%;
            height: clamp(28px, 5.8vh, 68px);
            z-index: 40;
            background: #000;
            pointer-events: none;
        }
        .katana-letterbox.top { top: 0; }
        .katana-letterbox.bottom { bottom: 0; }

        .katana-trailer-ui {
            position: absolute;
            inset: 0;
            z-index: 20;
            pointer-events: none;
        }

        .katana-beat {
            position: absolute;
            top: 50%;
            left: clamp(28px, 7vw, 120px);
            width: min(760px, 72vw);
            transform: translateY(-50%);
            opacity: 0;
            visibility: hidden;
            will-change: transform, opacity;
        }

        .katana-beat.right {
            left: auto;
            right: clamp(28px, 7vw, 120px);
            text-align: right;
        }

        .katana-beat.center {
            left: 50%;
            width: min(960px, 86vw);
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .katana-beat-kicker {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.32em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .katana-beat.right .katana-beat-kicker { justify-content: flex-end; }
        .katana-beat.center .katana-beat-kicker { justify-content: center; }

        .katana-beat-kicker::before {
            content: '';
            width: 36px;
            height: 1px;
            background: var(--brand-red);
            box-shadow: 0 0 14px rgba(209,19,19,0.7);
        }

        .katana-beat-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(54px, 8.6vw, 138px);
            line-height: 0.82;
            letter-spacing: -0.015em;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 18px 55px rgba(0,0,0,0.85);
        }

        .katana-beat-title .katana-line {
            display: block;
            overflow: hidden;
            padding: 0.07em 0 0.04em;
        }

        .katana-beat-title .katana-line > span {
            display: block;
            will-change: transform, opacity;
        }

        .katana-beat-title .accent { color: var(--brand-red); }

        .katana-beat-sub {
            max-width: 620px;
            margin: 22px 0 0;
            font-family: var(--font-mono);
            font-size: clamp(9px, 0.75vw, 12px);
            line-height: 1.85;
            letter-spacing: 0.16em;
            color: rgba(255,255,255,0.58);
            text-transform: uppercase;
        }

        .katana-beat.right .katana-beat-sub { margin-left: auto; }
        .katana-beat.center .katana-beat-sub { margin-left: auto; margin-right: auto; }

        .katana-trailer-meta {
            position: absolute;
            left: clamp(24px, 4vw, 64px);
            right: clamp(24px, 4vw, 64px);
            bottom: clamp(42px, 8vh, 92px);
            z-index: 26;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.24em;
            color: rgba(255,255,255,0.34);
            text-transform: uppercase;
        }

        .katana-progress {
            position: absolute;
            left: clamp(24px, 4vw, 64px);
            right: clamp(24px, 4vw, 64px);
            bottom: clamp(30px, 6.3vh, 74px);
            height: 1px;
            z-index: 26;
            overflow: hidden;
            background: rgba(255,255,255,0.12);
        }

        .katana-progress-fill {
            position: absolute;
            inset: 0;
            background: var(--brand-red);
            transform: scaleX(0);
            transform-origin: left center;
            box-shadow: 0 0 12px rgba(209,19,19,0.65);
        }

        @media (max-width: 800px) {
            #katana-sequence { height: 470vh; }
            .katana-beat, .katana-beat.right {
                top: auto;
                bottom: 18vh;
                left: 24px;
                right: 24px;
                width: auto;
                text-align: left;
                transform: none;
            }
            .katana-beat.center {
                left: 24px;
                right: 24px;
                bottom: 21vh;
                width: auto;
                transform: none;
                text-align: left;
            }
            .katana-beat.right .katana-beat-kicker,
            .katana-beat.center .katana-beat-kicker { justify-content: flex-start; }
            .katana-beat.right .katana-beat-sub,
            .katana-beat.center .katana-beat-sub { margin-left: 0; margin-right: 0; }
            .katana-beat-title { font-size: clamp(48px, 15vw, 82px); }
            .katana-beat-sub { max-width: 88%; }
            .katana-trailer-meta { bottom: 76px; }
            .katana-progress { bottom: 62px; }
        }


        /* ==============================================================
           NEW SECTION: THE LEGENDS / PERSONNEL ARCHIVE
           ============================================================== */


    .enc-scene { background: #f5f4f1; height: 100svh; min-height: 480px; position: relative; overflow: hidden; }
    .enc-character { z-index: 2; position: absolute; top: -10%; height: 145%; width: 46%;  }
    .enc-left { left: -10%; }
    .enc-left .enc-portrait { object-position: right top; transform-origin: 70% 40%; }
    .enc-right { right: -10%; }
    .enc-right .enc-portrait { object-position: left top; transform-origin: 30% 40%; }
    .enc-title { position: absolute; left: 3%; right: 3%; bottom: 9%; display: grid; grid-template-columns: minmax(0, 1fr) 20% minmax(0, 1fr); align-items: center; z-index: 3; pointer-events: none; }
    .enc-name { margin: 0; padding: 10px 4px; font-family: Georgia, serif; font-size: clamp(16px, 1.65vw, 28px); font-weight: 400; line-height: 1.4; letter-spacing: .16em; text-align: center; color: #111; text-shadow: 0 1px 10px #f5f4f1; transition: color .35s ease, text-shadow .35s ease; }
    .enc-name-left { grid-column: 1; }
    .enc-name-right { grid-column: 3; }
    .enc-scene.enc-focus-left .enc-name-left, .enc-scene.enc-focus-right .enc-name-right { color: #fff; text-shadow: 0 1px 3px #111, 0 2px 14px #111; }
    .enc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .enc-thunder { position: absolute; inset: 0; background: url("./hampi_img/img_2.png") center / cover no-repeat; pointer-events: none; }
    .enc-side-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
    .enc-shade-left { background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.35) 27%, transparent 55%); }
    .enc-shade-right { background: linear-gradient(270deg, rgba(0,0,0,.58), rgba(0,0,0,.35) 27%, transparent 55%); }
    .enc-scene.enc-focus-left .enc-shade-left, .enc-scene.enc-focus-right .enc-shade-right { opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .enc-side-shade { transition: none; } }
    .enc-portrait { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;  }
    .enc-figure-inner { position: relative; width: 100%; height: 100%; isolation: isolate; }
    .enc-left .enc-figure-inner { transform-origin: 70% 40%; }
    .enc-right .enc-figure-inner { transform-origin: 30% 40%; }
    .enc-aura { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
    .enc-character.enc-is-active .enc-aura { opacity: 1; }
    /* REPLACE this existing rule */
.enc-aura .enc-portrait {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    animation: radiate 2.1s linear infinite;
    animation-play-state: paused;
}

/* Bodhidharman — BLUE smoke */
.enc-left .enc-aura .enc-portrait {
    filter:
        brightness(0)
        saturate(100%)
        invert(48%)
        sepia(96%)
        saturate(4600%)
        hue-rotate(198deg)
        brightness(35%)
        contrast(110%)
        blur(2px);
}

/* Shukracharya — RED smoke */
.enc-right .enc-aura .enc-portrait {
    filter:
        brightness(0)
        saturate(100%)
        invert(17%)
        sepia(99%)
        saturate(6200%)
        hue-rotate(357deg)
        brightness(35%)
        contrast(120%)
        blur(2px);
}
    .enc-character.enc-is-active .enc-aura .enc-portrait { animation-play-state: running; }
    .enc-aura .enc-portrait:nth-child(2) { animation-delay: -.7s; }
    .enc-aura .enc-portrait:nth-child(3) { animation-delay: -1.4s; }
    @keyframes radiate {
      0% { transform: scale(1); opacity: 0; }
      15% { opacity: .32; }
      100% { transform: scale(1.42); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .enc-aura { display: none; } }
    .enc-hint { position: absolute; bottom: 24px; width: 100%; text-align: center; font: 12px Arial, sans-serif; letter-spacing: .15em; }
    @media (max-width: 600px) {
      .enc-character { top: -6%; height: 125%; width: 80%; }
      .enc-left { left: -39%; } .enc-right { right: -39%; }
      .enc-title { left: 2%; right: 2%; bottom: 10%; grid-template-columns: minmax(0, 1fr) 4% minmax(0, 1fr); }
      .enc-name { font-size: clamp(12px, 3.1vw, 18px); letter-spacing: .035em; overflow-wrap: anywhere; }
    }
    @media (prefers-reduced-motion: reduce) { .enc-hint { display: none; } }

    .enc-team-trigger { position: absolute; top: 0; bottom: 0; width: 46%; z-index: 4; border: 0; padding: 0; background: transparent; cursor: pointer; }
    .enc-team-trigger[data-team="hero"] { left: 0; }
    .enc-team-trigger[data-team="villain"] { right: 0; }
    .enc-team-trigger:focus-visible { outline: 2px solid #777; outline-offset: -12px; }
    .enc-team-panel { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #eee; }
    .enc-team-panel[hidden] { display: none; }
    .enc-scene.enc-team-open { background: #0b0b0b; }
    .enc-team-open .enc-thunder, .enc-team-open .enc-side-shade, .enc-team-open .enc-title, .enc-team-open .enc-hint,
    .enc-team-open .enc-team-trigger, .enc-team-open .enc-aura { visibility: hidden; pointer-events: none; }
    .enc-team-hero .enc-character.enc-right, .enc-team-villain .enc-character.enc-left { visibility: hidden; pointer-events: none; }
    .enc-team-montage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .enc-team-grid { display: none; position: absolute; inset: 0; }
    .enc-team-hero .enc-hero-grid, .enc-team-villain .enc-villain-grid { display: block; }
    .enc-member-panel { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); clip-path: var(--cut); padding: 0; border: 0; background: #252525; color: white; cursor: pointer; pointer-events: auto; isolation: isolate; transition: background .3s ease, filter .3s ease; }
    .enc-team-villain .enc-member-panel { left: calc(100% - var(--x) - var(--w)); clip-path: var(--mirror); }
    .enc-member-panel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
    .enc-member-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), #ffffff23, #ffffff05 45%, transparent 72%); transition: opacity .3s ease; }
    .enc-member-panel.enc-is-hovered::before, .enc-member-panel:focus-visible::before { opacity: 1; }
    .enc-member-panel.enc-is-hovered img, .enc-member-panel:focus-visible img { transform: scale(1.045); }
    .enc-team-grid.enc-has-hover .enc-member-panel:not(.enc-is-hovered) { filter: brightness(.78); }
    @media(prefers-reduced-motion:reduce) { .enc-member-panel, .enc-member-panel img, .enc-member-panel::before { transition: none; } .enc-member-panel.enc-is-hovered img, .enc-member-panel:focus-visible img { transform: none; } }
    .enc-member-panel.enc-is-hovered { background: #383838; filter: brightness(1.05); }
    .enc-member-panel:focus-visible { outline: none; background: #555; box-shadow: inset 0 0 0 5px #ddd; }
    .enc-member-name { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 65%; z-index: 2; color: #fff; font-family: var(--font-header); font-size: clamp(10px, 1.5vw, 26px); line-height: 1.15; letter-spacing: .06em; text-align: center; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 8px #000; pointer-events: none; }
    .enc-panel-1 { --x: 42.8230%; --y: 0.0000%; --w: 31.5191%; --h: 36.6631%; --cut: polygon(18.596% 0.000%, 100.000% 0.000%, 79.886% 100.000%, 0.000% 77.391%); --mirror: polygon(81.404% 0.000%, 0.000% 0.000%, 20.114% 100.000%, 100.000% 77.391%); }
    .enc-panel-2 { --x: 69.1986%; --y: 0.0000%; --w: 30.8014%; --h: 38.5760%; --cut: polygon(20.777% 0.000%, 100.000% 0.000%, 100.000% 78.788%, 0.000% 100.000%); --mirror: polygon(79.223% 0.000%, 0.000% 0.000%, 0.000% 78.788%, 100.000% 100.000%); }
    .enc-panel-3 { --x: 37.7990%; --y: 30.1807%; --w: 34.1507%; --h: 38.0446%; --cut: polygon(12.960% 0.000%, 100.000% 27.374%, 81.436% 100.000%, 0.000% 73.743%); --mirror: polygon(87.040% 0.000%, 0.000% 27.374%, 18.564% 100.000%, 100.000% 73.743%); }
    .enc-panel-4 { --x: 66.8660%; --y: 32.1998%; --w: 33.1340%; --h: 42.0829%; --cut: polygon(19.495% 20.707%, 100.000% 0.000%, 100.000% 100.000%, 0.000% 87.374%); --mirror: polygon(80.505% 20.707%, 0.000% 0.000%, 0.000% 100.000%, 100.000% 87.374%); }
    .enc-panel-5 { --x: 31.7584%; --y: 60.1488%; --w: 36.1244%; --h: 39.8512%; --cut: polygon(21.358% 0.000%, 100.000% 26.667%, 81.457% 100.000%, 0.000% 100.000%); --mirror: polygon(78.642% 0.000%, 0.000% 26.667%, 18.543% 100.000%, 100.000% 100.000%); }
    .enc-panel-6 { --x: 62.3804%; --y: 71.3071%; --w: 37.6196%; --h: 28.6929%; --cut: polygon(17.488% 0.000%, 100.000% 17.037%, 100.000% 100.000%, 0.000% 100.000%); --mirror: polygon(82.512% 0.000%, 0.000% 17.037%, 0.000% 100.000%, 100.000% 100.000%); }
    .enc-close-team { opacity: .65; transition: opacity .2s; }
    .enc-close-team:hover, .enc-close-team:focus-visible { opacity: 1; }
    .enc-team-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: #eee; }
    .enc-team-ui[hidden] { display: none; }
    .enc-close-team { position: absolute; top: 24px; right: 4%; border: 1px solid #666; background: #111c; color: #eee; padding: 12px 16px; font: 13px Arial,sans-serif; pointer-events: auto; cursor: pointer; }
    .enc-team-villain .enc-close-team { right: auto; left: 4%; }
    .enc-team-ui button:focus-visible { outline: 2px solid white; outline-offset: 4px; }
    .enc-member-panel::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #000d); pointer-events: none; }
    .enc-member-panel .enc-member-name { top: 70%; }
    .enc-detail-overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: #030303d9; backdrop-filter: blur(12px); pointer-events: auto; }
    .enc-detail-overlay[hidden] { display: none; }
    .enc-member-detail { position: relative; margin: 0; width: min(1180px, calc(100vw - 64px)); height: min(740px, 86svh); max-height: 90svh; padding: 0; border: 1px solid #c4a77c45; background: radial-gradient(ellipse at 100% 0, #33291d55, transparent 65%), #10100f; color: #f5efe4; box-shadow: 0 40px 140px #000c, inset 0 0 0 7px #c4a77c06; pointer-events: auto; overflow: auto; }
    .enc-member-detail:not([hidden]) { display: grid; grid-template-columns: 48% 1fr; align-items: stretch; }
    .enc-detail-portrait { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 25%; mask-image: linear-gradient(to right, #000 78%, #000c 91%, transparent); }
    .enc-detail-content { align-self: center; padding: 64px clamp(28px, 4.5vw, 72px) 64px clamp(24px, 3vw, 48px); }
    .enc-member-detail[hidden] { display: none; }
    .enc-detail-role { margin: 0 0 22px; color: #c6ad85; font: 500 11px/1.8 'Manrope', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
    .enc-detail-name { margin: 0; color: #f5efe4; font: 500 clamp(38px, 4.7vw, 68px)/1.02 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
    .enc-detail-name::after { content: ''; display: block; width: 64px; height: 1px; margin: 30px 0; background: linear-gradient(to right, #c6ad85, #c6ad8533); }
    .enc-detail-copy { margin: 0; max-width: 36em; color: #c6c2ba; font: 400 clamp(16px, 1.45vw, 19px)/1.9 'Manrope', sans-serif; }
    .enc-detail-close { position: absolute; z-index: 1; right: 22px; top: 22px; width: 46px; height: 46px; border: 1px solid #c6ad8560; border-radius: 50%; background: #111b; color: #f5efe4; font: 300 28px/1 'Manrope', sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
    .enc-detail-close:hover { background: #53452d; border-color: #c6ad85; }
    @media(max-width:760px) {
      .enc-member-detail { width: calc(100vw - 28px); height: auto; max-height: 92svh; }
      .enc-member-detail:not([hidden]) { grid-template-columns: 1fr; }
      .enc-detail-portrait { height: 38svh; min-height: 0; object-position: 50% 30%; mask-image: linear-gradient(to bottom, #000 78%, transparent); }
      .enc-detail-content { padding: 12px 28px 34px; }
      .enc-detail-role { margin-bottom: 14px; font-size: 10px; }
      .enc-detail-name { font-size: clamp(36px, 8vw, 54px); }
      .enc-detail-name::after { margin: 20px 0; }
      .enc-detail-copy { font-size: 16px; line-height: 1.75; }
      .enc-detail-close { right: 14px; top: 14px; }
    }
    @media(max-width:640px) {
      .enc-close-team { top: 18px; }
    }
    .enc-ink-wash { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; background: #000; pointer-events: none; }
    .enc-scene.enc-is-transitioning .enc-team-trigger { pointer-events: none; }
    @media(prefers-reduced-motion:reduce) { .enc-ink-wash { display: none; } }

        /* A fixed ink overlay must never survive outside its scroll interval. */
        .enc-page-ink[hidden] { display: none !important; }
        html.legends-active .global-nav {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        /* One ink reveal begins exactly where the authored GLB scroll ends. */
        #legends-section { color: #111; font-family: Georgia, serif; isolation: isolate; }
        #legends-section *, #legends-section *::before, #legends-section *::after { box-sizing: border-box; }
        #legends-section .enc-name { font-family: Georgia, serif; }
        #legends-section .enc-portrait { max-width: none; }
        @media (prefers-reduced-motion: no-preference) {
          html.ink-journey #legends-section { height: 100vh; min-height: 0; margin-top: -100vh; z-index: 2; }
          html.ink-journey #archive-handoff-host { position: relative; display: flow-root; margin-top: -100vh; z-index: 3; }
          .enc-page-ink { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 90 !important; pointer-events: none; }
        }
        @media (prefers-reduced-motion: reduce) {
          #legends-section .enc-ink-wash { display: none; }
        }

        /* ==============================================================
           PHASE 4: GSAP CONCEPT ART ARCHIVE / 5 BATCHES / 10 STUDIES
           ============================================================== */
        #concept-gallery {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 760px;
            overflow: hidden;
            background: #020202;
            border-top: 1px solid rgba(209, 19, 19, 0.16);
            isolation: isolate;
        }

        .concept-gallery-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 16% 22%, rgba(209,19,19,0.16), transparent 27%),
                radial-gradient(circle at 82% 72%, rgba(100,0,0,0.11), transparent 31%),
                linear-gradient(120deg, #020202 0%, #090303 48%, #020202 100%);
        }

        .concept-gallery-gridlines {
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: 0.13;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
            background-size: 72px 72px;
            mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 90%, transparent 100%);
        }

        .concept-noise {
            position: absolute;
            inset: -40%;
            z-index: 2;
            width: 180%;
            height: 180%;
            pointer-events: none;
            opacity: 0.035;
            background-image: url('./images/dust.png');
            animation: conceptNoise 0.32s steps(2) infinite;
            mix-blend-mode: screen;
        }

        @keyframes conceptNoise {
            0% { transform: translate3d(0,0,0); }
            25% { transform: translate3d(1%,-1%,0); }
            50% { transform: translate3d(-1%,1%,0); }
            75% { transform: translate3d(1%,-0.5%,0); }
            100% { transform: translate3d(0,0,0); }
        }

        .concept-gallery-head {
            position: absolute;
            top: 88px;
            left: 50px;
            right: 50px;
            z-index: 20;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
            gap: 50px;
            align-items: end;
            pointer-events: none;
        }

        .concept-kicker {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 12px;
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .concept-kicker::before {
            content: '';
            width: 38px;
            height: 1px;
            background: var(--brand-red);
            box-shadow: 0 0 12px rgba(209,19,19,0.72);
        }

        .concept-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(48px, 6.2vw, 106px);
            line-height: 0.82;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 16px 40px rgba(0,0,0,0.72);
        }

        .concept-title .concept-title-outline {
            -webkit-text-stroke: 1px rgba(255,255,255,0.34);
            color: transparent;
        }

        .concept-intro {
            margin: 0;
            padding-left: 20px;
            border-left: 1px solid rgba(209,19,19,0.52);
            font-family: var(--font-mono);
            font-size: 9px;
            line-height: 1.75;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.42);
        }

        .concept-track-viewport {
            position: absolute;
            left: 0;
            right: 0;
            top: 29vh;
            bottom: 78px;
            z-index: 10;
            overflow: visible;
        }

        .concept-track {
            height: 100%;
            width: max-content;
            display: flex;
            align-items: stretch;
            gap: 34px;
            padding: 0 50px 8px;
            will-change: transform;
        }

        .concept-batch {
            position: relative;
            flex: 0 0 min(88vw, 1320px);
            height: 100%;
            min-height: 430px;
            display: grid;
            grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
            gap: 22px;
            padding: 22px;
            border: 1px solid rgba(255,255,255,0.09);
            background: linear-gradient(135deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
            overflow: hidden;
            isolation: isolate;
            will-change: transform, opacity;
        }

        .concept-batch::before {
            content: attr(data-ghost);
            position: absolute;
            right: -0.03em;
            top: -0.14em;
            z-index: 0;
            font-family: var(--font-display);
            font-size: clamp(110px, 15vw, 250px);
            line-height: 1;
            color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,0.035);
            white-space: nowrap;
            pointer-events: none;
        }

        .concept-batch::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 78px;
            height: 2px;
            z-index: 8;
            background: var(--brand-red);
            box-shadow: 0 0 18px rgba(209,19,19,0.6);
        }

        .concept-batch-info {
            position: relative;
            z-index: 4;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 8px 12px 8px 6px;
        }

        .concept-batch-index {
            margin-bottom: 12px;
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.24em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .concept-batch-title {
            margin: 0;
            max-width: 360px;
            font-family: var(--font-display);
            font-size: clamp(42px, 5vw, 82px);
            line-height: 0.84;
            letter-spacing: 0.015em;
            color: #fff;
            text-transform: uppercase;
        }

        .concept-batch-copy {
            margin: 18px 0 0;
            max-width: 350px;
            font-family: var(--font-mono);
            font-size: 8px;
            line-height: 1.7;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
        }

        .concept-batch-specs {
            margin-top: 22px;
            display: grid;
            gap: 7px;
        }

        .concept-batch-specs span {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: var(--font-mono);
            font-size: 7px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.3);
        }

        .concept-batch-specs span::before {
            content: '';
            width: 12px;
            height: 1px;
            background: rgba(209,19,19,0.55);
        }

        .concept-batch-artworks {
            position: relative;
            z-index: 3;
            min-width: 0;
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            gap: 14px;
        }

        .concept-card {
            position: relative;
            min-width: 0;
            height: 100%;
            min-height: 390px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.10);
            background: #070707;
            cursor: none;
            isolation: isolate;
            transform-style: preserve-3d;
            will-change: transform, opacity;
        }

        .concept-card:nth-child(even) { transform: translateY(18px); }

        .concept-card::before,
        .concept-card::after {
            content: '';
            position: absolute;
            z-index: 7;
            width: 32px;
            height: 32px;
            pointer-events: none;
            opacity: 0.24;
        }

        .concept-card::before {
            top: 14px;
            left: 14px;
            border-top: 1px solid var(--brand-red);
            border-left: 1px solid var(--brand-red);
        }

        .concept-card::after {
            right: 14px;
            bottom: 14px;
            border-right: 1px solid var(--brand-red);
            border-bottom: 1px solid var(--brand-red);
        }

        .concept-card-imgwrap {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 1;
        }

        .concept-card img {
            position: absolute;
            top: 0;
            left: -8%;
            width: 116%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: saturate(0.62) contrast(1.15) brightness(0.64);
            transform: scale(1.10);
            will-change: transform, filter;
        }

        .concept-card-shade {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.10) 56%, rgba(0,0,0,0.20) 100%),
                linear-gradient(115deg, rgba(209,19,19,0.10), transparent 44%);
        }

        .concept-card-scan {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            opacity: 0.23;
            background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,0.018) 3px 4px);
            mix-blend-mode: overlay;
        }

        .concept-card-meta {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 20px;
            z-index: 6;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
            pointer-events: none;
        }

        .concept-card-index {
            display: block;
            margin-bottom: 7px;
            font-family: var(--font-mono);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 0.20em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .concept-card-title {
            margin: 0;
            font-family: var(--font-header);
            font-size: clamp(28px, 2.45vw, 46px);
            font-weight: 400;
            line-height: 0.92;
            letter-spacing: 0.035em;
            color: #fff;
            text-transform: uppercase;
            text-shadow: 0 10px 28px rgba(0,0,0,0.75);
        }

        .concept-card-tag {
            flex: 0 0 auto;
            padding: 7px 9px;
            border: 1px solid rgba(255,255,255,0.18);
            font-family: var(--font-mono);
            font-size: 6px;
            letter-spacing: 0.15em;
            color: rgba(255,255,255,0.52);
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }

        .concept-card-focus {
            position: absolute;
            top: 19px;
            right: 19px;
            z-index: 8;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.56);
            font-size: 11px;
            opacity: 0;
            transform: translateY(8px);
            pointer-events: none;
        }

        .concept-card:hover .concept-card-focus { border-color: rgba(209,19,19,0.8); }

        .concept-gallery-bottom {
            position: absolute;
            left: 50px;
            right: 50px;
            bottom: 28px;
            z-index: 30;
            display: grid;
            grid-template-columns: auto minmax(180px, 520px) auto auto;
            align-items: center;
            gap: 18px;
            pointer-events: none;
        }

        .concept-progress-label,
        .concept-counter,
        .concept-batch-live {
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.19em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.32);
        }

        .concept-counter { color: rgba(255,255,255,0.56); }
        .concept-batch-live { color: rgba(255,255,255,0.48); min-width: 130px; text-align: right; }
        #concept-current { color: var(--brand-red); font-size: 12px; }

        .concept-progress-rail {
            position: relative;
            height: 1px;
            background: rgba(255,255,255,0.12);
            overflow: visible;
        }

        .concept-progress-fill {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background: var(--brand-red);
            transform: scaleX(0);
            transform-origin: left center;
            box-shadow: 0 0 10px rgba(209,19,19,0.72);
        }

        .concept-progress-fill::after {
            content: '';
            position: absolute;
            right: -3px;
            top: -3px;
            width: 7px;
            height: 7px;
            transform: rotate(45deg);
            background: var(--brand-red);
            box-shadow: 0 0 10px rgba(209,19,19,0.8);
        }


        .concept-card-popup-only { display: none !important; }

        .concept-lightbox {
            position: fixed;
            inset: 0;
            z-index: 2147483000;
            width: 100%;
            max-width: 100%;
            height: 100%;
            max-height: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
            background: rgba(0,0,0,0.98);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            overflow: hidden;
            overscroll-behavior: contain;
            contain: layout paint;
            box-sizing: border-box;
        }

        .concept-lightbox *,
        .concept-lightbox *::before,
        .concept-lightbox *::after { box-sizing: border-box; }

        .concept-lightbox.is-open { pointer-events: auto; }

        .concept-lightbox-visual {
            position: relative;
            min-width: 0;
            min-height: 0;
            width: 100%;
            max-width: 100%;
            display: grid;
            grid-template-rows: minmax(0, 1fr) auto;
            background: #000;
            overflow: hidden;
            contain: layout;
        }

        .concept-lightbox-stage {
            position: relative;
            min-height: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(20px, 3.2vw, 58px) clamp(54px, 5vw, 84px);
            background: radial-gradient(circle at 50% 45%, rgba(209,19,19,0.06), transparent 42%), #000;
        }

        .concept-lightbox-stage::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            box-shadow: inset 0 0 150px rgba(0,0,0,0.78);
        }

        #concept-lightbox-img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            object-position: center center;
            display: block;
            position: relative;
            z-index: 1;
            margin: auto;
            transform-origin: 50% 50%;
        }



        .concept-lightbox-stage::after {
            content: '';
            position: absolute;
            inset: clamp(14px, 2vw, 30px);
            z-index: 3;
            border: 1px solid rgba(255,255,255,0.07);
            pointer-events: none;
        }

        .concept-lightbox-arrow {
            position: absolute;
            top: 50%;
            z-index: 8;
            width: 48px;
            height: 64px;
            transform: translateY(-50%);
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(0,0,0,0.50);
            color: rgba(255,255,255,0.7);
            font-size: 17px;
            cursor: none;
            backdrop-filter: blur(10px);
            transition: border-color .25s ease, background .25s ease, color .25s ease;
        }
        .concept-lightbox-prev { left: 22px; }
        .concept-lightbox-next { right: 22px; }
        .concept-lightbox-arrow:hover,
        .concept-lightbox-arrow:focus-visible { border-color: var(--brand-red); background: rgba(209,19,19,0.18); color: #fff; outline: none; }

        .concept-lightbox-image-count {
            position: absolute;
            right: 24px;
            bottom: 22px;
            z-index: 8;
            padding: 8px 10px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(0,0,0,0.52);
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.18em;
            color: rgba(255,255,255,0.48);
            backdrop-filter: blur(8px);
        }
        #concept-lightbox-current { color: var(--brand-red); font-size: 11px; }

        .concept-lightbox-strip-wrap {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding: 12px 18px 16px;
            border-top: 1px solid rgba(255,255,255,0.09);
            background: linear-gradient(180deg, rgba(6,6,6,0.98), rgba(0,0,0,1));
            overflow: hidden;
        }

        .concept-lightbox-strip-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 9px;
            font-family: var(--font-mono);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.28);
        }
        #concept-lightbox-strip-batch { color: rgba(209,19,19,0.72); }

        .concept-lightbox-strip {
            display: flex;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            gap: 10px;
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: rgba(209,19,19,0.55) rgba(255,255,255,0.06);
            -webkit-overflow-scrolling: touch;
        }

        .concept-lightbox-thumb {
            position: relative;
            flex: 0 0 clamp(150px, 17vw, 210px);
            width: clamp(150px, 17vw, 210px);
            min-width: 0;
            max-width: 210px;
            height: 94px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.10);
            background: #050505;
            padding: 0;
            color: #fff;
            cursor: none;
            text-align: left;
        }
        .concept-lightbox-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(0.52) brightness(0.54) contrast(1.12);
            transition: filter .3s ease, transform .4s ease;
        }
        .concept-lightbox-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid transparent;
            pointer-events: none;
        }
        .concept-lightbox-thumb span {
            position: absolute;
            left: 9px;
            right: 9px;
            bottom: 7px;
            z-index: 2;
            font-family: var(--font-mono);
            font-size: 6px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            text-shadow: 0 2px 10px #000;
        }
        .concept-lightbox-thumb.is-active { border-color: rgba(209,19,19,0.78); }
        .concept-lightbox-thumb.is-active::after { border-color: rgba(209,19,19,0.42); box-shadow: inset 0 -3px 0 var(--brand-red); }
        .concept-lightbox-thumb.is-active img,
        .concept-lightbox-thumb:hover img { filter: saturate(0.86) brightness(0.78) contrast(1.05); transform: scale(1.04); }

        .concept-lightbox-info {
            position: relative;
            z-index: 3;
            min-width: 0;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 78px 34px 38px;
            border-left: 1px solid rgba(209,19,19,0.28);
            background: linear-gradient(180deg, #080808, #020202);
            overflow-y: auto;
        }

        .concept-lightbox-batch-kicker,
        .concept-lightbox-label {
            margin-bottom: 12px;
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--brand-red);
        }

        .concept-lightbox-batch-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(42px, 4vw, 66px);
            line-height: 0.88;
            letter-spacing: 0.015em;
            text-transform: uppercase;
            color: #fff;
        }

        .concept-lightbox-batch-copy,
        .concept-lightbox-copy {
            margin: 16px 0 0;
            font-family: var(--font-mono);
            font-size: 8px;
            line-height: 1.68;
            letter-spacing: 0.095em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.43);
        }

        .concept-lightbox-batch-specs {
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }
        .concept-lightbox-batch-specs span {
            padding: 6px 8px;
            border: 1px solid rgba(255,255,255,0.10);
            font-family: var(--font-mono);
            font-size: 6px;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.38);
        }

        .concept-lightbox-divider {
            width: 100%;
            height: 1px;
            margin: 24px 0 22px;
            background: linear-gradient(90deg, var(--brand-red), rgba(255,255,255,0.08) 28%, transparent);
        }

        .concept-lightbox-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(38px, 4vw, 62px);
            line-height: 0.9;
            text-transform: uppercase;
            color: #fff;
        }

        .concept-lightbox-details {
            margin-top: 22px;
            border-top: 1px solid rgba(255,255,255,0.10);
        }

        .concept-detail-row {
            display: grid;
            grid-template-columns: 92px minmax(0,1fr);
            gap: 14px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.075);
        }

        .concept-detail-row span {
            font-family: var(--font-mono);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(209,19,19,0.82);
        }

        .concept-detail-row strong {
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 400;
            line-height: 1.55;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.50);
        }

        .concept-lightbox-close {
            position: fixed;
            top: max(22px, env(safe-area-inset-top));
            right: max(22px, env(safe-area-inset-right));
            z-index: 2147483646;
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,0.32);
            background: rgba(0,0,0,0.82);
            color: #fff;
            font-size: 20px;
            cursor: none;
            pointer-events: auto;
            backdrop-filter: blur(12px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.45);
        }

        .concept-lightbox-close:hover,
        .concept-lightbox-close:focus-visible {
            border-color: var(--brand-red);
            background: var(--brand-red);
            outline: none;
        }

        body.concept-lightbox-open .global-nav,
        body.concept-lightbox-open .nav-btn-right {
            pointer-events: none !important;
            visibility: hidden !important;
        }

        @media (max-width: 1050px) {
            .concept-batch { flex-basis: 92vw; grid-template-columns: minmax(185px, 0.28fr) minmax(0, 1fr); gap: 14px; }
            .concept-batch-copy { font-size: 7px; }
            .concept-batch-specs { display: none; }
            .concept-card-meta { left: 17px; right: 17px; bottom: 17px; }
            .concept-card-tag { display: none; }
        }

        @media (max-width: 900px) {
            #concept-gallery { min-height: 700px; }
            .concept-gallery-head { top: 80px; left: 22px; right: 22px; grid-template-columns: 1fr; gap: 14px; }
            .concept-intro { display: none; }
            .concept-track-viewport { top: 27vh; bottom: 78px; }
            .concept-track { padding-left: 22px; padding-right: 22px; gap: 18px; }
            .concept-batch { flex-basis: 94vw; padding: 14px; grid-template-columns: 175px minmax(0,1fr); }
            .concept-batch-title { font-size: clamp(38px, 7vw, 64px); }
            .concept-batch-copy { display: none; }
            .concept-gallery-bottom { left: 22px; right: 22px; grid-template-columns: minmax(0,1fr) auto auto; }
            .concept-progress-label { display: none; }
            .concept-lightbox { grid-template-columns: minmax(0,1fr) minmax(320px, 390px); }
            .concept-lightbox-info { padding: 78px 24px 28px; }
            .concept-lightbox-batch-copy { display: none; }
            .concept-lightbox-details { margin-top: 16px; }
            .concept-lightbox-thumb { flex-basis: 150px; width: 150px; }
            .concept-lightbox-thumb { height: 82px; }
        }

        @media (max-width: 1024px) {
            #concept-gallery { height: auto; min-height: 0; padding: 100px 18px 82px; overflow: hidden; }
            .concept-gallery-head { position: relative; top: auto; left: auto; right: auto; margin-bottom: 34px; }
            .concept-title { font-size: clamp(58px, 20vw, 92px); }
            .concept-track-viewport { position: relative; top: auto; bottom: auto; }
            .concept-track { width: 100%; height: auto; display: grid; gap: 30px; padding: 0; }
            .concept-batch { width: 100%; height: auto; min-height: 0; display: block; padding: 16px; }
            .concept-batch::before { font-size: 26vw; top: 4px; right: 0; }
            .concept-batch-info { min-height: 210px; padding: 20px 8px 22px; justify-content: flex-end; }
            .concept-batch-copy { display: block; max-width: 90%; }
            .concept-batch-specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
            .concept-batch-artworks { grid-template-columns: 1fr; gap: 12px; }
            .concept-card { width: 100%; height: 58vh; min-height: 390px; }
            .concept-card:nth-child(even) { transform: none; }
            .concept-gallery-bottom { position: relative; left: auto; right: auto; bottom: auto; margin-top: 30px; grid-template-columns: 1fr auto; }
            .concept-batch-live { display: none; }
            .concept-card-meta { left: 18px; right: 18px; bottom: 18px; }
            .concept-lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(46vh, 1fr) auto; overflow-y: auto; }
            .concept-lightbox-visual { min-height: 46vh; grid-template-rows: minmax(300px, 1fr) auto; overflow: visible; }
            .concept-lightbox-stage { min-height: 300px; padding: 24px 48px; }
            .concept-lightbox-info { border-left: 0; border-top: 1px solid rgba(209,19,19,0.28); padding: 28px 20px 38px; overflow: visible; }
            .concept-lightbox-batch-title { font-size: clamp(38px, 13vw, 58px); }
            .concept-lightbox-title { font-size: clamp(34px, 11vw, 50px); }
            .concept-lightbox-batch-copy { display: block; }
            .concept-lightbox-strip-wrap { padding: 10px 12px 12px; }
            .concept-lightbox-thumb { flex-basis: min(42vw, 150px); width: min(42vw, 150px); }
            .concept-lightbox-thumb { height: 78px; }
            .concept-lightbox-arrow { width: 42px; height: 54px; }
            .concept-lightbox-prev { left: 10px; }
            .concept-lightbox-next { right: 10px; }
            .concept-lightbox-close { width: 46px; height: 46px; top: 14px; right: 14px; }
        }



        /* ==============================================================
           PHASE 5: GAME NEWS / EDITORIAL TRANSMISSIONS
           ============================================================== */
        #news-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 118px 50px 110px;
            overflow: hidden;
            background: #020202;
            border-top: 1px solid rgba(209,19,19,0.18);
            isolation: isolate;
        }

        .news-section-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 78% 16%, rgba(209,19,19,0.14), transparent 28%),
                radial-gradient(circle at 18% 82%, rgba(90,0,0,0.12), transparent 34%),
                linear-gradient(125deg, #020202 0%, #090303 47%, #020202 100%);
        }

        .news-section-grid {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.12;
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 72px 72px;
            mask-image: linear-gradient(to bottom, transparent, black 14%, black 88%, transparent);
        }

        .news-shell {
            position: relative;
            z-index: 5;
            width: min(1460px, 100%);
            margin: 0 auto;
        }

        .news-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
            gap: 56px;
            align-items: end;
            margin-bottom: 54px;
        }

        .news-kicker {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.3em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .news-kicker::before {
            content: '';
            width: 38px;
            height: 1px;
            background: var(--brand-red);
            box-shadow: 0 0 12px rgba(209,19,19,0.7);
        }

        .news-heading {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(66px, 9vw, 144px);
            line-height: 0.78;
            letter-spacing: -0.025em;
            text-transform: uppercase;
            color: #fff;
        }

        .news-heading span { color: var(--brand-red); }

        .news-head-copy {
            margin: 0;
            font-family: var(--font-mono);
            font-size: 10px;
            line-height: 1.85;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.48);
            text-transform: uppercase;
        }

        .news-feature {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.7fr);
            min-height: 560px;
            margin-bottom: 24px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.11);
            background: #050505;
            cursor: none;
        }

        .news-feature-media,
        .news-card-media {
            position: relative;
            min-width: 0;
            overflow: hidden;
            background: #080808;
        }

        .news-feature-media::after,
        .news-card-media::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(125deg, rgba(0,0,0,0.10), rgba(0,0,0,0.48));
        }

        .news-feature-img,
        .news-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(0.62) contrast(1.14) brightness(0.76);
            transform: scale(1.055);
            will-change: transform, filter;
        }

        .news-feature-copy {
            position: relative;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 46px 42px 42px;
            border-left: 1px solid rgba(209,19,19,0.22);
            background: linear-gradient(155deg, rgba(10,10,10,0.94), rgba(4,4,4,0.98));
        }

        .news-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            margin-bottom: 18px;
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.38);
        }
        .news-meta strong { color: var(--brand-red); font-weight: 700; }

        .news-feature-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(48px, 5.2vw, 86px);
            line-height: 0.88;
            text-transform: uppercase;
            color: #fff;
        }

        .news-feature-desc,
        .news-card-desc {
            margin: 20px 0 0;
            font-family: var(--font-mono);
            font-size: 9px;
            line-height: 1.75;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.53);
            text-transform: uppercase;
        }

        .news-read {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            width: fit-content;
            margin-top: 28px;
            font-family: var(--font-header);
            font-size: 15px;
            letter-spacing: 0.18em;
            color: #fff;
            text-transform: uppercase;
        }
        .news-read i { color: var(--brand-red); font-size: 11px; }

        .news-grid-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .news-card {
            position: relative;
            min-width: 0;
            min-height: 440px;
            display: grid;
            grid-template-rows: 235px 1fr;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.10);
            background: rgba(4,4,4,0.92);
            cursor: none;
            will-change: transform;
        }

        .news-card-body {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 24px 24px 26px;
        }

        .news-card-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(30px, 2.35vw, 42px);
            line-height: 0.94;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: #fff;
        }

        .news-card .news-read {
            margin-top: auto;
            padding-top: 22px;
            font-size: 13px;
            color: rgba(255,255,255,0.72);
        }

        .news-card-index {
            position: absolute;
            top: 13px;
            right: 15px;
            z-index: 4;
            font-family: var(--font-mono);
            font-size: 8px;
            letter-spacing: 0.18em;
            color: rgba(255,255,255,0.48);
            text-transform: uppercase;
        }

        .news-footer-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.08);
            font-family: var(--font-mono);
            font-size: 8px;
            letter-spacing: 0.2em;
            color: rgba(255,255,255,0.28);
            text-transform: uppercase;
        }

        /* Article reader */
        .news-reader {
            position: fixed;
            inset: 0;
            z-index: 96000;
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
            background: rgba(0,0,0,0.97);
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .news-reader.is-open { visibility: visible; pointer-events: auto; }

        .news-reader-visual {
            position: relative;
            min-width: 0;
            height: 100%;
            overflow: hidden;
            background: #050505;
        }

        .news-reader-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: saturate(0.72) contrast(1.12) brightness(0.72);
        }

        .news-reader-visual::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, transparent 52%, rgba(0,0,0,0.78) 100%), linear-gradient(to top, rgba(0,0,0,0.42), transparent 42%);
        }

        .news-reader-info {
            position: relative;
            min-width: 0;
            height: 100%;
            overflow-y: auto;
            padding: 100px 48px 60px;
            border-left: 1px solid rgba(209,19,19,0.25);
            background: #050505;
        }

        .news-reader-close {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(209,19,19,0.42);
            background: rgba(0,0,0,0.72);
            color: #fff;
            font-size: 18px;
            cursor: none;
            z-index: 10;
        }

        .news-reader-kicker {
            margin-bottom: 18px;
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: var(--brand-red);
            text-transform: uppercase;
        }

        .news-reader-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(48px, 5.2vw, 78px);
            line-height: 0.88;
            text-transform: uppercase;
            color: #fff;
        }

        .news-reader-lede {
            margin: 24px 0 28px;
            padding-left: 16px;
            border-left: 2px solid var(--brand-red);
            font-family: var(--font-mono);
            font-size: 10px;
            line-height: 1.8;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.62);
            text-transform: uppercase;
        }

        .news-reader-body {
            font-family: var(--font-sans);
            font-size: 14px;
            line-height: 1.85;
            color: rgba(255,255,255,0.64);
        }

        .news-reader-body p { margin: 0 0 18px; }

        .news-reader-facts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 10px;
            margin-top: 28px;
        }

        .news-reader-facts span {
            padding: 12px;
            border: 1px solid rgba(255,255,255,0.09);
            font-family: var(--font-mono);
            font-size: 8px;
            line-height: 1.55;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.46);
            text-transform: uppercase;
        }

        body.news-reader-open { overflow: hidden !important; }
        body.news-reader-open .global-nav { visibility: hidden !important; pointer-events: none !important; }

        @media (max-width: 1050px) {
            #news-section { padding-left: 28px; padding-right: 28px; }
            .news-feature { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); min-height: 500px; }
            .news-grid-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .news-reader { grid-template-columns: minmax(0,1fr) minmax(340px, 420px); }
        }

        @media (max-width: 760px) {
            #news-section { padding: 94px 18px 82px; }
            .news-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
            .news-head-copy { max-width: 92%; }
            .news-feature { display: grid; grid-template-columns: 1fr; grid-template-rows: 330px auto; min-height: 0; }
            .news-feature-copy { border-left: 0; border-top: 1px solid rgba(209,19,19,0.22); padding: 28px 24px 30px; }
            .news-grid-list { grid-template-columns: 1fr; }
            .news-card { min-height: 0; grid-template-rows: 280px auto; }
            .news-reader { display: block; overflow-y: auto; }
            .news-reader-visual { height: 44vh; min-height: 320px; }
            .news-reader-info { height: auto; min-height: 56vh; overflow: visible; border-left: 0; border-top: 1px solid rgba(209,19,19,0.25); padding: 76px 20px 42px; }
            .news-reader-close { position: fixed; top: 14px; right: 14px; }
            .news-reader-facts { grid-template-columns: 1fr; }
            .news-footer-line { align-items: flex-start; flex-direction: column; }
        }

        /* ==============================================================
           CINEMATIC GLB ENTRY LOADER
           ============================================================== */
        body.intro-active {
            overflow: hidden !important;
            height: 100vh;
        }

        #intro-loader {
            position: fixed;
            inset: 0;
            z-index: 90000;
            overflow: hidden;
            /* Stable loader backdrop. Swap this URL for any image you want. */
            background:
                linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.28)),
                url('./img_1.png') center center / cover no-repeat,
                #000;
            isolation: isolate;
        }

        #intro-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: block;
            /* Must stay transparent so the Three.js shadow catcher can
               composite the GLB shadow over the CSS background image. */
            background: transparent;
        }

        .intro-vignette {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0.86) 100%),
                linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 25%, transparent 72%, rgba(0,0,0,0.38));
        }

        /* Katana cut hit effects: these sit above the falling page but below
           the foreground sword so the slash reads with energy without hiding the blade. */
        #intro-cut-impact,
        #intro-cut-flash {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            will-change: opacity, transform;
        }

        #intro-cut-impact {
            z-index: 24;
            inset: -8%;
            mix-blend-mode: screen;
            transform: scale(0.94);
            background:
                radial-gradient(circle at 48% 44%, rgba(255,255,255,0.95) 0 2.2%, rgba(255,255,255,0.65) 2.8%, rgba(255,255,255,0.18) 7%, rgba(255,255,255,0) 16%),
                linear-gradient(154deg, transparent 43.5%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0.9) 49%, rgba(255,255,255,0.1) 51.3%, transparent 54%),
                repeating-linear-gradient(154deg, transparent 0 20px, rgba(255,255,255,0.14) 20px 22px, transparent 22px 44px);
            filter: saturate(1.08) blur(0.4px);
        }

        #intro-cut-flash {
            z-index: 25;
            mix-blend-mode: screen;
            background:
                radial-gradient(circle at 48% 44%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.84) 8%, rgba(255,255,255,0.32) 18%, rgba(255,255,255,0.0) 44%),
                linear-gradient(154deg, transparent 44%, rgba(255,255,255,0.14) 46%, rgba(255,255,255,1) 49.5%, rgba(255,255,255,0.14) 53%, transparent 55%);
        }

        /* Keep the GLB intro background clean and stable.
           The old animated dust layer intentionally jumped every 0.22s,
           which read as flicker/noise behind the model. */

        #intro-enter {
            position: absolute;
            left: 50%;
            bottom: 11vh;
            z-index: 6;
            transform: translateX(-50%);
            padding: 8px 12px;
            border: 0;
            outline: 0;
            background: transparent;
            color: #fff;
            font-family: var(--font-header);
            font-size: 20px;
            letter-spacing: 0.32em;
            text-indent: 0.32em;
            line-height: 1;
            cursor: none;
            text-shadow: 0 0 18px rgba(255,255,255,0.22);
            transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease, letter-spacing 0.3s ease;
        }

        #intro-enter:not(:disabled):hover {
            color: #fff;
            letter-spacing: 0.42em;
            text-shadow: 0 0 24px rgba(255,255,255,0.6), 0 0 40px rgba(209,19,19,0.28);
        }

        #intro-enter:disabled {
            opacity: 0.28;
        }

        .intro-ready-line {
            position: absolute;
            left: 50%;
            bottom: 6vh;
            z-index: 6;
            transform: translateX(-50%);
            font-family: var(--font-mono);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.34);
            white-space: nowrap;
        }

        /* ==============================================================
           PAPER-CUT HERO REVEAL
           The finished sword frame is duplicated into two jagged paper pieces.
           Those pieces physically separate to expose the hero underneath.
           ============================================================== */
        #intro-loader.paper-cut-active {
            background: transparent !important;
        }

        /* During the reveal the sword must remain physically in front of the
           sliced background. The hero sits underneath the transparent loader,
           the cloth pieces sit in the middle, and the WebGL sword stays on top. */
        #intro-loader.paper-cut-active #intro-canvas {
            z-index: 30;
        }

        #intro-loader.paper-cut-active .intro-vignette {
            z-index: 10;
        }

        #intro-paper-cut {
            position: absolute;
            inset: 0;
            z-index: 20;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            overflow: visible;
        }

        .intro-paper-piece {
            position: absolute;
            inset: 0;
            overflow: hidden;
            will-change: transform;
            backface-visibility: hidden;
            background:
                linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.28)),
                url('./img_1.png') center center / cover no-repeat,
                #000;
        }

        .intro-paper-piece::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0.86) 100%),
                linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 25%, transparent 72%, rgba(0,0,0,0.38));
        }

        .intro-paper-snapshot {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0;
            pointer-events: none;
        }

        /* A katana slash should feel fast and decisive, not zig-zagged.
           This seam is a clean rising diagonal with only a slight natural bow. */
        #intro-paper-top {
            clip-path: polygon(
                0 0, 100% 0,
                100% 24%, 84% 29%, 72% 34%, 60% 39%,
                48% 44%, 36% 50%, 24% 55%, 12% 59%, 0 64%
            );
            transform-origin: 50% 100%;
            filter: drop-shadow(0 12px 16px rgba(0,0,0,0.78));
            will-change: transform, clip-path, filter;
        }

        #intro-paper-bottom {
            clip-path: polygon(
                0 64%, 12% 59%, 24% 55%, 36% 50%, 48% 44%,
                60% 39%, 72% 34%, 84% 29%, 100% 24%,
                100% 100%, 0 100%
            );
            transform-origin: 50% 0%;
            filter: drop-shadow(0 -12px 16px rgba(0,0,0,0.78));
            will-change: transform, clip-path, filter;
        }

        #intro-paper-slash {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            overflow: visible;
        }

        #intro-paper-slash-shadow,
        #intro-paper-slash-line {
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            vector-effect: non-scaling-stroke;
        }

        #intro-paper-slash-shadow {
            stroke: rgba(0,0,0,0.92);
            stroke-width: 5px;
            opacity: 0.78;
        }

        #intro-paper-slash-line {
            stroke: rgba(255,255,255,0.96);
            stroke-width: 1.35px;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.45));
        }

        @media (prefers-reduced-motion: reduce) {
            #intro-paper-slash { display: none; }
            #intro-paper-top,
            #intro-paper-bottom {
                filter: none;
            }
        }

        @media (max-width: 700px) {
            #intro-enter { bottom: 10vh; font-size: 17px; }
            .intro-ready-line { bottom: 5vh; font-size: 7px; }
        }

        /* ==============================================================
           CONCEPT ARCHIVE UPDATE · 4 SIDE-SCROLLING RAILS / 16 PLATES
           ============================================================== */
        .concept-batch-artworks {
            display: flex;
            align-items: stretch;
            gap: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(209,19,19,0.55) rgba(255,255,255,0.05);
            padding-bottom: 6px;
        }

        .concept-batch-artworks::-webkit-scrollbar { height: 4px; }
        .concept-batch-artworks::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
        .concept-batch-artworks::-webkit-scrollbar-thumb { background: rgba(209,19,19,0.55); }

        .concept-batch-artworks .concept-card {
            flex: 0 0 calc(50% - 7px);
            min-width: 300px;
            scroll-snap-align: start;
        }

        @media (max-width: 1024px) {
            .concept-batch-artworks {
                display: flex;
                grid-template-columns: none;
                gap: 12px;
                overflow-x: auto;
            }
            .concept-batch-artworks .concept-card {
                flex: 0 0 min(82vw, 520px);
                width: auto;
                min-width: min(82vw, 520px);
            }
        }


        .concept-coming-soon .concept-card-imgwrap { background: #161716; }
        .concept-coming-soon .concept-card-imgwrap img { object-fit: cover; filter: none !important; opacity: 1 !important; }
        .concept-coming-soon .concept-card-scan { display: none; }