:root {
            --black: #000000;
            --void: #030303;
            --coal: #080808;
            --iron: #111111;
            --grave: #191714;
            --bone: #d8d0bd;
            --bone-dim: #8d8473;
            --ash: #5d564b;
            --blood: #4b0806;
            --rust: #8f2418;
            --rust-hot: #c0523a;
            --line: rgba(216, 208, 189, 0.13);
            --line-hard: rgba(216, 208, 189, 0.28);
            --red-glow: rgba(143, 36, 24, 0.28);
        }

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

        html,
        body {
            min-height: 100%;
        }

        body {
            min-height: 100vh;
            color: var(--bone);
            font-family: Georgia, "Times New Roman", serif;
            background:
                radial-gradient(circle at 50% 18%, rgba(75, 8, 6, 0.24), transparent 19%),
                radial-gradient(circle at 8% 92%, rgba(216, 208, 189, 0.035), transparent 16%),
                radial-gradient(circle at 92% 68%, rgba(75, 8, 6, 0.16), transparent 19%),
                linear-gradient(180deg, #010101 0%, #050403 38%, #000 100%);
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px),
                radial-gradient(circle at center, transparent 0 31%, rgba(0,0,0,0.86) 100%);
            background-size: 42px 42px, 42px 42px, 100% 100%;
            opacity: 0.88;
        }

        body::after {
            content: "";
            position: fixed;
            inset: -20%;
            z-index: 0;
            pointer-events: none;
            background:
                repeating-linear-gradient(112deg, rgba(216,208,189,0.018) 0 1px, transparent 1px 11px),
                repeating-linear-gradient(4deg, transparent 0 19px, rgba(0,0,0,0.62) 20px 22px),
                radial-gradient(circle, rgba(216,208,189,0.07) 0 1px, transparent 1px 37px);
            opacity: 0.22;
            animation: dirtDrift 28s linear infinite;
        }

        @keyframes dirtDrift {
            from { transform: translate3d(0, 0, 0) rotate(0deg); }
            to { transform: translate3d(-120px, 72px, 0) rotate(1.5deg); }
        }

        .page {
            position: relative;
            z-index: 1;
            width: min(1180px, calc(100% - 34px));
            min-height: calc(100vh - var(--nav-height));
            margin: 0 auto;
            display: grid;
            align-items: start;
            justify-items: center;
            padding: 14px 0 34px;
        }

        .shell {
            position: relative;
            width: 100%;
            min-height: 760px;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            overflow: hidden;
            border: 1px solid rgba(216, 208, 189, 0.16);
            background:
                linear-gradient(135deg, rgba(216,208,189,0.024), transparent 22%),
                linear-gradient(180deg, rgba(75,8,6,0.16), rgba(0,0,0,0.55)),
                repeating-linear-gradient(91deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 28px),
                rgba(1,1,1,0.96);
            box-shadow:
                0 55px 190px rgba(0,0,0,0.96),
                inset 0 0 160px rgba(0,0,0,0.94),
                0 0 65px rgba(75,8,6,0.16);
        }

        .shell::before {
            content: "";
            position: absolute;
            inset: 16px;
            z-index: 5;
            pointer-events: none;
            border: 1px solid rgba(216,208,189,0.08);
            box-shadow: inset 0 0 50px rgba(0,0,0,0.58);
        }

        .shell::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.58)),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px);
            mix-blend-mode: screen;
            opacity: 0.22;
        }

        .content {
            position: relative;
            z-index: 3;
            padding: clamp(34px, 6vw, 78px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 46px;
            background:
                radial-gradient(circle at 8% 22%, rgba(75,8,6,0.22), transparent 24%),
                linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.12));
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            width: fit-content;
            color: var(--bone);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.84rem;
            font-weight: 900;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            text-decoration: none;
        }

        .eyebrow:hover {
            border-color: rgba(216,208,189,0.38);
            color: #ded7c8;
            background: rgba(75,8,6,0.34);
        }

        .brand-mark {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 36% 30%, #cfc6b2, #5c554a 42%, #111 70%);
            border: 1px solid rgba(216,208,189,0.35);
            box-shadow: 0 0 40px rgba(143,36,24,0.34);
        }

        .brand-mark::before,
        .brand-mark::after {
            content: "";
            position: absolute;
            left: -9px;
            width: 66px;
            height: 14px;
            border-radius: 999px;
            border: 2px solid rgba(0,0,0,0.9);
            border-left-color: transparent;
            border-right-color: transparent;
            transform: rotate(-25deg);
        }

        .brand-mark::before { top: 13px; }
        .brand-mark::after { top: 25px; }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin-bottom: 28px;
            padding: 10px 14px;
            border: 1px solid rgba(143,36,24,0.72);
            color: #c7bba5;
            background: rgba(50,5,4,0.22);
            box-shadow: inset 0 0 24px rgba(0,0,0,0.55), 0 0 34px rgba(143,36,24,0.08);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            line-height: 1.35;
            text-transform: uppercase;
        }

        .pulse {
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
            background: var(--rust-hot);
            box-shadow: 0 0 24px var(--rust-hot);
            animation: pulse 1.6s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.6); opacity: 0.35; }
        }

        .home-title {
            max-width: 760px;
            margin-bottom: 28px;
            color: #ded7c8;
            font-size: clamp(2.4rem, 7vw, 4.8rem);
            line-height: 0.8;
            letter-spacing: -0.08em;
            text-transform: uppercase;
            text-shadow:
                0 2px 0 #000,
                -2px 0 0 rgba(75,8,6,0.72),
                0 0 2px rgba(255,255,255,0.24),
                0 0 34px rgba(75,8,6,0.34),
                12px 12px 0 rgba(0,0,0,0.42);
        }

        .lead {
            max-width: 630px;
            color: var(--bone-dim);
            font-size: clamp(1.05rem, 1.7vw, 1.24rem);
            line-height: 1.85;
        }

        .divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 34px 0 0;
            color: var(--ash);
            letter-spacing: 0.45em;
        }

        .divider::before,
        .divider::after {
            content: "";
            height: 1px;
            flex: 1;
            background: linear-gradient(90deg, transparent, rgba(216,208,189,0.26), transparent);
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 34px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0 24px;
            border: 1px solid rgba(216,208,189,0.22);
            color: var(--bone);
            background:
                linear-gradient(180deg, rgba(75,8,6,0.82), rgba(12,2,2,0.96)),
                repeating-linear-gradient(108deg, rgba(216,208,189,0.08) 0 1px, transparent 1px 9px);
            box-shadow: 0 18px 55px rgba(0,0,0,0.68), inset 0 0 32px rgba(0,0,0,0.42);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: none;
            transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
        }

        .btn:hover {
            transform: translateY(-1px) skewX(-1deg);
            border-color: rgba(216,208,189,0.42);
            background:
                linear-gradient(180deg, rgba(96,16,11,0.86), rgba(12,2,2,0.96)),
                repeating-linear-gradient(108deg, rgba(216,208,189,0.08) 0 1px, transparent 1px 9px);
        }

        .btn.secondary {
            background: rgba(255,255,255,0.02);
            color: var(--bone-dim);
            box-shadow: none;
        }

        .footer-note {
            color: var(--ash);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.74rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .art {
            position: relative;
            min-height: 760px;
            overflow: hidden;
            border-left: 1px solid var(--line);
            background:
                radial-gradient(circle at 48% 18%, rgba(216,208,189,0.09), transparent 18%),
                radial-gradient(circle at 46% 32%, rgba(75,8,6,0.22), transparent 30%),
                radial-gradient(circle at 42% 86%, rgba(216,208,189,0.026), transparent 22%),
                linear-gradient(180deg, rgba(255,255,255,0.008), rgba(0,0,0,0.82)),
                #010101;
        }

        .noise {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.16;
            background:
                repeating-linear-gradient(116deg, rgba(255,255,255,0.72) 0 1px, transparent 1px 10px),
                repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.045) 19px, transparent 20px);
        }

        .moon {
            position: absolute;
            top: 70px;
            left: 50%;
            width: 190px;
            height: 190px;
            transform: translateX(-50%);
            border-radius: 50%;
            opacity: 0.48;
            background:
                radial-gradient(circle at 36% 30%, #d9d0bd, #6d6253 42%, #080706 73%);
            box-shadow:
                inset -28px -36px 55px rgba(0,0,0,0.74),
                0 0 105px rgba(216,208,189,0.14),
                0 0 170px rgba(75,8,6,0.28);
        }

        .moon::after {
            content: "";
            position: absolute;
            inset: -80px;
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(216,208,189,0.14), transparent 52%),
                radial-gradient(circle, rgba(75,8,6,0.16), transparent 68%);
            filter: blur(18px);
        }

        .orb {
            position: absolute;
            top: 170px;
            left: 50%;
            width: 520px;
            height: 520px;
            transform: translateX(-50%);
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 40%, rgba(75,8,6,0.22), rgba(26,5,4,0.14) 34%, transparent 68%);
            box-shadow: inset 0 0 180px rgba(0,0,0,0.92), 0 0 110px rgba(75,8,6,0.12);
            opacity: 0.74;
        }

        .worm {
            position: absolute;
            border-radius: 999px;
            border: 5px solid rgba(216,208,189,0.14);
            border-left-color: transparent;
            border-right-color: transparent;
            filter: drop-shadow(0 0 22px rgba(75,8,6,0.46));
            animation: wormFloat 10s ease-in-out infinite;
        }

        .worm.one {
            width: 380px;
            height: 88px;
            top: 245px;
            left: calc(50% - 250px);
            transform: rotate(-18deg);
            opacity: 0.58;
        }

        .worm.two {
            width: 315px;
            height: 72px;
            top: 390px;
            right: -90px;
            transform: rotate(16deg);
            animation-delay: -2.2s;
            opacity: 0.42;
        }

        .worm.three {
            width: 285px;
            height: 64px;
            bottom: 240px;
            left: -30px;
            transform: rotate(-7deg);
            animation-delay: -4.1s;
            opacity: 0.34;
        }

        @keyframes wormFloat {
            0%, 100% { margin-top: 0; opacity: 0.78; }
            50% { margin-top: 18px; opacity: 0.42; }
        }

        .grave-lines {
            position: absolute;
            inset: 0;
            opacity: 0.25;
            background:
                linear-gradient(25deg, transparent 43%, rgba(216,208,189,0.13) 44% 45%, transparent 46%),
                linear-gradient(63deg, transparent 56%, rgba(216,208,189,0.1) 57% 58%, transparent 59%),
                linear-gradient(112deg, transparent 49%, rgba(216,208,189,0.09) 50% 51%, transparent 52%),
                repeating-linear-gradient(94deg, transparent 0 44px, rgba(0,0,0,0.52) 45px 52px);
        }

        .fog {
            position: absolute;
            left: -18%;
            right: -18%;
            height: 180px;
            bottom: 155px;
            z-index: 1;
            pointer-events: none;
            background:
                radial-gradient(ellipse at 30% 50%, rgba(216,208,189,0.06), transparent 58%),
                radial-gradient(ellipse at 70% 45%, rgba(75,8,6,0.14), transparent 56%);
            filter: blur(18px);
            opacity: 0.72;
            animation: fogDrift 18s ease-in-out infinite alternate;
        }

        .fog.second {
            bottom: 305px;
            height: 130px;
            opacity: 0.36;
            animation-delay: -8s;
        }

        @keyframes fogDrift {
            from { transform: translateX(-28px); }
            to { transform: translateX(34px); }
        }

        .warning-marks {
            position: absolute;
            left: 38px;
            right: 38px;
            bottom: 142px;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
            opacity: 0.2;
        }

        .warning-marks span {
            height: 58px;
            border-left: 2px solid rgba(216,208,189,0.22);
            transform: skewX(-16deg);
            box-shadow: 0 0 18px rgba(75,8,6,0.32);
        }

        .scene-copy {
            position: absolute;
            left: clamp(24px, 7vw, 62px);
            right: clamp(24px, 7vw, 62px);
            bottom: clamp(34px, 6vw, 62px);
            z-index: 3;
            display: grid;
            gap: 12px;
            max-width: 520px;
        }

        .scene-copy p {
            color: #968b78;
            font-size: clamp(1rem, 1.6vw, 1.12rem);
            line-height: 1.7;
            text-shadow: 0 2px 16px rgba(0,0,0,0.95);
        }

        .scene-stamp {
            width: fit-content;
            padding: 7px 11px 6px;
            border: 2px double rgba(143,36,24,0.66);
            color: rgba(192,82,58,0.72);
            background: rgba(0,0,0,0.34);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.7rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            line-height: 1.2;
            text-transform: uppercase;
            transform: rotate(-2deg);
            box-shadow: inset 0 0 18px rgba(75,8,6,0.24), 0 0 35px rgba(0,0,0,0.72);
        }

        @media (max-width: 920px) {
            .page {
                padding: 20px 0;
            }

            .shell {
                grid-template-columns: 1fr;
            }

            .art {
                min-height: 560px;
                border-left: 0;
                border-top: 1px solid var(--line);
            }

            .orb {
                width: 390px;
                height: 390px;
                top: 120px;
            }

            .worm.one {
                left: calc(50% - 205px);
                top: 205px;
                width: 330px;
            }
        }

        @media (max-width: 560px) {
            .page {
                width: min(100% - 22px, 1180px);
                padding: 12px 0;
            }

            .content {
                padding: 30px 24px;
            }

            .brand {
                font-size: 0.76rem;
                letter-spacing: 0.16em;
            }

            .eyebrow {
                font-size: 0.62rem;
                letter-spacing: 0.1em;
            }

            .home-title {
                font-size: clamp(3.2rem, 18vw, 5rem);
            }

            .art {
                min-height: 570px;
            }

            .moon {
                top: 52px;
                width: 132px;
                height: 132px;
            }

            .orb {
                width: 300px;
                height: 300px;
                top: 120px;
            }

            .worm.one {
                top: 188px;
                left: calc(50% - 190px);
                width: 285px;
                height: 68px;
            }

            .worm.two {
                top: 300px;
                width: 245px;
                height: 58px;
            }

            .worm.three {
                bottom: 202px;
                width: 220px;
                height: 52px;
            }

            .warning-marks {
                left: 24px;
                right: 24px;
                bottom: 150px;
                gap: 12px;
            }

            .scene-copy {
                left: 22px;
                right: 22px;
                bottom: 28px;
            }

            .scene-copy p {
                font-size: 0.96rem;
                line-height: 1.6;
            }
        }