body {
            --case-a: #00d4ff;
            --case-b: #7cff72;
            --hero-image: url("images/spiritwood-tornado-hero.png");
            --line-left: 17%;
            --line-top: 58%;
            --line-width: 56%;
            --line-rotate: -28deg;
        }

        main {
            position: relative;
            isolation: isolate;
            padding-top: 74px;
        }

        main::before {
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0 0 auto 0;
            height: 1280px;
            background:
                linear-gradient(180deg, rgba(5, 7, 12, 0.1), rgba(5, 7, 12, 0.72) 42%, rgba(5, 7, 12, 0.96) 78%),
                radial-gradient(circle at 24% 24%, rgba(0, 212, 255, 0.18), transparent 28%),
                radial-gradient(circle at 82% 34%, rgba(124, 255, 114, 0.16), transparent 34%),
                var(--hero-image);
            background-size: cover;
            background-position: center top;
            opacity: 0.62;
            filter: saturate(0.95);
            pointer-events: none;
        }

        .page-shell {
            width: 100%;
            gap: 14px;
        }

        .hero-card {
            width: 100vw;
            min-height: clamp(300px, 32vw, 390px);
            margin: 0 calc(50% - 50vw);
            grid-template-columns: minmax(0, 1fr);
            align-items: end;
            padding: clamp(22px, 3vw, 42px) max(32px, calc((100vw - 1440px) / 2 + 32px));
            border-right: 0;
            border-left: 0;
            border-radius: 0;
            background:
                linear-gradient(90deg, rgba(3, 6, 10, 0.92) 0%, rgba(3, 6, 10, 0.66) 38%, rgba(3, 6, 10, 0.14) 78%),
                linear-gradient(0deg, rgba(3, 6, 10, 0.88) 0%, rgba(3, 6, 10, 0.16) 54%),
                var(--hero-image);
            background-size: cover;
            background-position: center;
        }

        .hero-card > div:first-child {
            max-width: 980px;
        }

        .hero-card .eyebrow {
            margin-bottom: 12px;
        }

        .hero-card .hero-title {
            margin-bottom: 10px;
            font-size: clamp(38px, 6vw, 74px);
        }

        .hero-card .hero-copy {
            max-width: 680px;
            font-size: 14px;
            line-height: 1.5;
        }

        .hero-card .stat-grid {
            width: min(980px, 100%);
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            margin-top: 16px;
        }

        .hero-card .stat {
            min-height: 0;
            padding: 12px;
            border-radius: 12px;
            background: rgba(5, 8, 12, 0.54);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .hero-card .stat .lab {
            margin-bottom: 6px;
            font-size: 8px;
            letter-spacing: 1.8px;
        }

        .hero-card .stat .val {
            font-size: clamp(11px, 1.1vw, 14px);
            line-height: 1.25;
        }

        .viewer-card,
        .media-card,
        .source-card {
            width: min(1560px, calc(100vw - 48px));
            margin-inline: auto;
        }

        .viewer-card {
            box-shadow:
                0 -80px 160px rgba(0, 212, 255, 0.08),
                0 40px 110px rgba(0, 0, 0, 0.48);
        }

        .cinematic-media-card {
            display: grid;
            gap: 18px;
            padding: clamp(18px, 2.4vw, 34px);
            border-radius: 0;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
                linear-gradient(135deg, rgba(0, 212, 255, 0.08), transparent 30%, rgba(124, 255, 114, 0.07)),
                rgba(3, 6, 10, 0.72);
        }

        .media-header {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
        }

        .media-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--case-b);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .media-kicker::before {
            content: '';
            width: 28px;
            height: 1px;
            background: var(--case-a);
        }

        .media-title {
            margin-top: 10px;
            max-width: 920px;
            font-size: clamp(36px, 5vw, 76px);
            font-weight: 250;
            line-height: 0.92;
            letter-spacing: -1px;
        }

        .media-title span {
            color: var(--case-a);
        }

        .cinema-frame {
            position: relative;
            min-height: clamp(360px, 48vw, 620px);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #020507;
        }

        .cinema-frame img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.82;
            filter: saturate(0.92) contrast(1.08);
        }

        .cinema-frame::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(2, 5, 7, 0.88) 0%, rgba(2, 5, 7, 0.32) 42%, rgba(2, 5, 7, 0.06) 100%),
                linear-gradient(0deg, rgba(2, 5, 7, 0.82) 0%, transparent 44%);
            pointer-events: none;
        }

        .cinema-overlay {
            position: absolute;
            z-index: 2;
            inset: auto auto 28px 28px;
            width: min(620px, calc(100% - 56px));
        }

        .cinema-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }

        .cinema-meta span,
        .field-note-tag {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(3, 6, 10, 0.62);
            color: rgba(247, 249, 252, 0.76);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .cinema-overlay h3 {
            max-width: 760px;
            font-size: clamp(34px, 5.4vw, 82px);
            font-weight: 250;
            line-height: 0.92;
            letter-spacing: -1px;
        }

        .cinema-overlay p {
            max-width: 560px;
            margin-top: 14px;
            color: rgba(247, 249, 252, 0.76);
            font-size: 14px;
            line-height: 1.65;
        }

        .cinema-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            margin-top: 18px;
            padding: 0 18px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 244, 228, 0.96);
            color: #05070c;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2.4px;
            text-transform: uppercase;
        }

        .media-notes {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 0;
        }

        .media-notes .media-note {
            border-radius: 0;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
                rgba(5, 8, 12, 0.64);
        }

        .field-notes-card {
            padding: clamp(18px, 2.4vw, 34px) 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .field-notes-layout {
            display: grid;
            grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
            gap: 24px;
            align-items: start;
        }

        .field-notes-card .section-title {
            margin-bottom: 12px;
            font-size: clamp(28px, 3.8vw, 52px);
        }

        .field-notes-panel {
            display: grid;
            gap: 8px;
            border-left: 1px solid rgba(0, 212, 255, 0.38);
            padding-left: 18px;
        }

        .field-notes-panel a {
            position: relative;
            display: grid;
            gap: 6px;
            padding: 13px 14px 13px 42px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background:
                linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent 42%),
                rgba(5, 8, 12, 0.54);
            color: rgba(247, 249, 252, 0.86);
            font-size: 12px;
            line-height: 1.35;
        }

        .field-notes-panel a::before {
            content: attr(data-index);
            position: absolute;
            left: 13px;
            top: 13px;
            color: var(--case-b);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1.6px;
        }

        .field-notes-panel a span {
            display: block;
            color: rgba(247, 249, 252, 0.45);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        #scene-root.case-mapbox-root {
            background: #020609;
            color: #f7f9fc;
        }

        .case-map,
        .case-map .mapboxgl-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .case-map .mapboxgl-ctrl-logo,
        .case-map .mapboxgl-ctrl-attrib {
            opacity: 0.58;
        }

        .case-map .mapboxgl-ctrl-attrib {
            background: rgba(3, 6, 10, 0.72);
            color: rgba(247, 249, 252, 0.72);
        }

        .case-map .mapboxgl-ctrl-attrib a {
            color: rgba(0, 212, 255, 0.86);
        }

        .case-map::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background:
                radial-gradient(circle at 48% 46%, rgba(0, 212, 255, 0.10), transparent 28%),
                linear-gradient(180deg, rgba(2, 6, 9, 0.10), rgba(2, 6, 9, 0.42) 70%, rgba(2, 6, 9, 0.76));
            mix-blend-mode: screen;
        }

        .case-map-vignette {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(2, 6, 9, 0.42), transparent 22%, transparent 76%, rgba(2, 6, 9, 0.44)),
                radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.58));
        }

        .mapbox-track-pulse {
            width: 62px;
            height: 62px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        #scene-root.is-three-active .mapbox-track-pulse {
            display: none !important;
            opacity: 0 !important;
        }

        .mapbox-track-pulse::before,
        .mapbox-track-pulse::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 999px;
        }

        .mapbox-track-pulse::before {
            border: 2px solid rgba(124, 255, 114, 0.72);
            background:
                radial-gradient(circle, rgba(240, 208, 96, 0.92) 0 8%, rgba(124, 255, 114, 0.28) 9% 28%, transparent 29%),
                conic-gradient(from 0deg, transparent 0 20deg, rgba(0, 212, 255, 0.9) 34deg, transparent 56deg, rgba(124, 255, 114, 0.72) 124deg, transparent 166deg, rgba(240, 208, 96, 0.72) 236deg, transparent 310deg);
            box-shadow: 0 0 20px rgba(124, 255, 114, 0.46), 0 0 42px rgba(0, 212, 255, 0.24);
            animation: spiritwoodTornadoSpin 1.1s linear infinite reverse;
        }

        .mapbox-track-pulse::after {
            inset: 20px;
            background: rgba(247, 249, 252, 0.88);
            box-shadow: 0 0 18px rgba(247, 249, 252, 0.58);
        }

        .mapbox-funnel {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 18px;
            height: 70px;
            transform: translate(-50%, -78%);
            pointer-events: none;
            filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.72));
        }

        .mapbox-funnel::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 16px;
            height: 68px;
            transform: translateX(-50%);
            clip-path: polygon(28% 100%, 72% 100%, 100% 8%, 0 8%);
            background:
                repeating-conic-gradient(from 0deg, rgba(247, 249, 252, 0.82) 0 16deg, rgba(0, 212, 255, 0.38) 17deg 35deg, rgba(124, 255, 114, 0.28) 36deg 52deg),
                linear-gradient(180deg, rgba(247, 249, 252, 0.28), rgba(124, 255, 114, 0.38) 52%, rgba(240, 208, 96, 0.62));
            opacity: 0.86;
            animation: spiritwoodFunnelTwist 0.8s linear infinite reverse;
        }

        .mapbox-road-label,
        .mapbox-town-label,
        .mapbox-damage-label {
            padding: 7px 10px;
            border: 1px solid rgba(247, 249, 252, 0.14);
            border-radius: 999px;
            background: rgba(3, 6, 10, 0.78);
            color: rgba(247, 249, 252, 0.86);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.7px;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .mapbox-road-label {
            color: #f0d060;
        }

        .mapbox-town-label {
            color: #7cff72;
        }

        .mapbox-damage-label {
            color: #00d4ff;
        }

        .mapbox-direction-arrow {
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 18px solid rgba(124, 255, 114, 0.92);
            filter: drop-shadow(0 0 10px rgba(124, 255, 114, 0.62));
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .mapbox-compass-ground {
            width: 94px;
            height: 94px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .mapbox-compass-ground::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid rgba(247, 249, 252, 0.24);
            border-radius: 999px;
            background:
                linear-gradient(90deg, transparent 48%, rgba(247, 249, 252, 0.68) 49% 51%, transparent 52%),
                linear-gradient(0deg, transparent 48%, rgba(247, 249, 252, 0.68) 49% 51%, transparent 52%),
                rgba(3, 16, 18, 0.26);
            box-shadow: inset 0 0 28px rgba(0, 212, 255, 0.16), 0 0 32px rgba(0, 212, 255, 0.12);
        }

        .mapbox-compass-ground::after {
            content: 'N';
            position: absolute;
            left: 50%;
            top: -18px;
            transform: translateX(-50%);
            color: rgba(247, 249, 252, 0.92);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 2px;
        }

        .mapbox-compass-ground span {
            position: absolute;
            color: rgba(247, 249, 252, 0.68);
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .mapbox-compass-ground .east { right: -13px; top: 42px; }
        .mapbox-compass-ground .south { left: 43px; bottom: -14px; }
        .mapbox-compass-ground .west { left: -13px; top: 42px; }

        .mapbox-start-marker,
        .mapbox-end-marker {
            width: 17px;
            height: 17px;
            border: 2px solid rgba(247, 249, 252, 0.82);
            border-radius: 999px;
            background: #7cff72;
            box-shadow: 0 0 20px rgba(124, 255, 114, 0.56);
            transform: translate(-50%, -50%);
        }

        .mapbox-end-marker {
            background: #00d4ff;
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.56);
        }

        @keyframes spiritwoodTornadoSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes spiritwoodFunnelTwist {
            to { filter: hue-rotate(12deg); transform: translateX(-50%) rotate(360deg); }
        }

        @media (max-width: 760px) {
            main {
                padding-top: 68px;
            }

            .hero-card {
                width: 100vw;
                margin: 0 calc(50% - 50vw);
                min-height: 0;
                padding: 20px;
                background-position: center top;
            }

            body.tornado-mapbox-page .hero-card .hero-title {
                font-size: clamp(26px, 7.5vw, 30px) !important;
                line-height: 0.96 !important;
                letter-spacing: 0 !important;
                word-break: keep-all;
                overflow-wrap: normal;
            }

            .hero-card .hero-copy {
                font-size: 13px;
                line-height: 1.45;
            }

            .hero-card .stat-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px;
            }

            .hero-card .stat {
                padding: 10px;
            }

            .hero-card .stat .lab {
                font-size: 7px;
                letter-spacing: 1.45px;
            }

            .hero-card .stat .val {
                font-size: 11px;
            }

            .viewer-card,
            .media-card,
            .source-card {
                width: min(100%, calc(100vw - 20px));
            }

            .media-header,
            .field-notes-layout {
                display: grid;
                gap: 14px;
            }

            .media-title {
                font-size: clamp(30px, 11vw, 44px);
            }

            .cinema-frame {
                min-height: 440px;
            }

            .cinema-overlay {
                inset: auto 16px 18px 16px;
                width: auto;
            }

            .cinema-overlay h3 {
                font-size: clamp(30px, 11vw, 48px);
            }

            .media-notes {
                grid-template-columns: 1fr;
            }

            .field-notes-panel {
                padding-left: 12px;
            }

            .mapbox-road-label,
            .mapbox-town-label,
            .mapbox-damage-label {
                font-size: 8px;
                letter-spacing: 1.2px;
                padding: 6px 8px;
            }

            .mapbox-compass-ground {
                width: 72px;
                height: 72px;
            }
        }