/* ============================================================
   DEVLOG VILLAGE
   Includes the Devlog overlay (the per-house popup) partway through -
   it's part of the Village experience, not a separate biome.
   ============================================================ */

        /* ── Village Scene ── */
        .village-scene {
            position: absolute;
            inset: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #f4ead9;
            font-family: 'Spectral', serif;
            overflow-y: auto;
            overflow-x: hidden;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .25s ease;
            background: var(--dusk-dark);
            z-index: 5;
            cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202L2%2011H5V21H10V15H14V21H19V11H22Z%22%20fill%3D%22%23ffb86b%22%20stroke%3D%22%232e2110%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 12 11, auto;
        }

        /* ── Parallax Wrapper ── */
        .parallax-wrap {
            position: relative;
            flex: 1;
            width: 100%;
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
            height: 100svh;
            overflow: hidden;
            isolation: isolate;
        }

        /* ── Layers ── */
        .layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            will-change: transform;
        }
        .layer-sky {
            z-index: 0;
            background: linear-gradient(180deg,
                    #0d0812 0%,
                    #1D1225 25%,
                    #2D1B36 50%,
                    #3D2238 72%,
                    #2D1B36 88%,
                    #1D1225 100%);
        }
        .layer-sky::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 55%;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 180, 110, .07), transparent 70%);
        }
        .layer-sky .moon {
            position: absolute;
            top: 7%;
            right: 10%;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: radial-gradient(circle at 32% 32%, #fffcf0, #f0e4c8 55%, #d4c8a8 100%);
            box-shadow: 0 0 60px 20px rgba(255, 230, 200, .12), 0 0 120px 50px rgba(255, 230, 200, .05);
            opacity: .75;
            animation: moonGlow 6s ease-in-out infinite alternate;
        }
        .layer-sky .moon::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle at 55% 40%, rgba(200, 190, 170, .25), transparent 45%),
                radial-gradient(circle at 30% 70%, rgba(200, 190, 170, .15), transparent 35%);
        }
        @keyframes moonGlow {
            0% {
                box-shadow: 0 0 60px 20px rgba(255, 230, 200, .12), 0 0 120px 50px rgba(255, 230, 200, .05);
            }
            100% {
                box-shadow: 0 0 80px 30px rgba(255, 230, 200, .18), 0 0 140px 60px rgba(255, 230, 200, .08);
            }
        }

        /* Stars */
        .stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            opacity: .3;
            animation: villageTwinkle var(--dur, 3s) ease-in-out infinite alternate;
        }
        @keyframes villageTwinkle {
            0% {
                opacity: .1;
                transform: scale(.8);
            }
            100% {
                opacity: .6;
                transform: scale(1.2);
            }
        }

        /* Layer: Distant Hills */
        .layer-hills {
            z-index: 1;
            bottom: 0;
            height: 70%;
            top: auto;
        }
        .hills-silhouette {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            background:
                /* far hills */
                radial-gradient(ellipse 120% 40% at 10% 100%, rgba(45, 27, 54, .6), transparent 70%),
                radial-gradient(ellipse 140% 35% at 40% 100%, rgba(35, 20, 45, .5), transparent 65%),
                radial-gradient(ellipse 110% 45% at 70% 100%, rgba(50, 30, 55, .55), transparent 70%),
                radial-gradient(ellipse 130% 30% at 90% 100%, rgba(30, 18, 40, .5), transparent 60%);
            filter: blur(2px);
        }
        .hills-silhouette::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background:
                /* mid hills - more defined */
                radial-gradient(ellipse 80% 30% at 5% 100%, rgba(30, 18, 38, .7), transparent 60%),
                radial-gradient(ellipse 90% 28% at 30% 100%, rgba(38, 22, 45, .65), transparent 55%),
                radial-gradient(ellipse 70% 32% at 55% 100%, rgba(28, 16, 36, .7), transparent 58%),
                radial-gradient(ellipse 85% 25% at 80% 100%, rgba(42, 26, 48, .6), transparent 55%),
                radial-gradient(ellipse 75% 30% at 95% 100%, rgba(32, 18, 40, .65), transparent 60%);
            filter: blur(1px);
        }
        .hills-silhouette::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background:
                /* near hills - sharp */
                radial-gradient(ellipse 60% 25% at 15% 100%, rgba(25, 14, 32, .8), transparent 55%),
                radial-gradient(ellipse 55% 28% at 45% 100%, rgba(30, 16, 35, .75), transparent 50%),
                radial-gradient(ellipse 65% 22% at 75% 100%, rgba(28, 14, 34, .8), transparent 55%);
            filter: blur(0.5px);
        }

        /* Layer: curved ground - a soft rolling horizon between the hills
           and the street so the scene has real terrain depth instead of a
           hard hill→street cut */
        .layer-ground {
            z-index: 1;
            bottom: 0;
            top: auto;
            height: 38%;
        }
        .layer-ground svg {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Layer: midground tree line - pine silhouettes tiling the horizon,
           sitting behind the houses for depth */
        .layer-trees-mid {
            z-index: 1;
            bottom: 0;
            top: auto;
            height: 22%;
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='150'%20viewBox='0%200%20140%20150'%3E%3Cpath%20d='M34%2038%20L50%2068%20L42%2068%20L60%2098%20L48%2098%20L68%20150%20L0%20150%20L20%2098%20L8%2098%20L26%2068%20L18%2068%20Z'%20fill='%23140c1c'%20opacity='.6'/%3E%3Cpath%20d='M104%2018%20L124%2054%20L114%2054%20L134%2090%20L120%2090%20L142%20150%20L66%20150%20L88%2090%20L74%2090%20L94%2054%20L84%2054%20Z'%20fill='%23190f24'%20opacity='.7'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-position: bottom left;
            background-size: 220px auto;
            filter: blur(.4px);
            opacity: .85;
        }

        /* Layer: drifting mist near ground level for atmosphere */
        .layer-mist {
            z-index: 2;
            bottom: 0;
            top: auto;
            height: 16%;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(220, 200, 220, .05) 20%,
                    rgba(220, 200, 220, .09) 45%,
                    rgba(220, 200, 220, .04) 70%,
                    transparent 100%);
            background-size: 200% 100%;
            animation: mistDrift 26s linear infinite;
            mix-blend-mode: screen;
        }
        @keyframes mistDrift {
            0% {
                background-position: 0% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* Foreground framing trees - sit in front of the street at the
           screen edges like a vignette, closest "camera" layer */
        .trees-front {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
        }
        .tf-tree {
            position: absolute;
            bottom: -2%;
            filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
            transform-origin: 50% 100%;
            animation: treeSway 7s ease-in-out infinite;
        }
        .tf-left {
            left: -3%;
            width: clamp(120px, 16vw, 240px);
            animation-delay: 0s;
        }
        .tf-right {
            right: -4%;
            width: clamp(140px, 19vw, 280px);
            animation-delay: -3.2s;
            transform: scaleX(-1);
        }
        @keyframes treeSway {
            0%,
            100% {
                transform: rotate(-0.6deg);
            }
            50% {
                transform: rotate(0.6deg);
            }
        }
        .tf-right {
            animation-name: treeSwayR;
        }
        @keyframes treeSwayR {
            0%,
            100% {
                transform: scaleX(-1) rotate(-0.6deg);
            }
            50% {
                transform: scaleX(-1) rotate(0.6deg);
            }
        }
        @media (max-width: 700px) {
            .tf-left,
            .tf-right {
                width: clamp(80px, 26vw, 150px);
                opacity: .8;
            }
        }

        /* Layer: Street (interactive) */
        .layer-street {
            z-index: 2;
            /* Natively scrollable so every house is reachable on any viewport
               width via touch swipe, trackpad, or click-drag - not just on
               desktop windows wide enough to fit the whole street at once. */
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            scrollbar-width: none;
            pointer-events: auto;
        }
        .layer-street::-webkit-scrollbar {
            display: none;
        }
        .street-track {
            display: flex;
            align-items: flex-end;
            justify-content: safe center;
            /* centered when it fits; falls back to reachable start-alignment
               when houses overflow, so scrollLeft:0 always shows the first
               house instead of clipping it off-screen to the left */
            min-height: 100%;
            padding: 0 clamp(20px, 8vw, 80px);
            gap: clamp(40px, 8vw, 100px);
            pointer-events: auto;
            position: relative;
        }
        /* ground path */
        .street-track::before {
            content: '';
            position: absolute;
            bottom: 8%;
            left: 0;
            right: 0;
            height: 12%;
            background:
                radial-gradient(ellipse at 20% 100%, rgba(90, 60, 40, .2), transparent 50%),
                radial-gradient(ellipse at 60% 100%, rgba(90, 60, 40, .15), transparent 45%),
                radial-gradient(ellipse at 90% 100%, rgba(90, 60, 40, .18), transparent 50%);
            border-radius: 50%;
            filter: blur(6px);
            pointer-events: none;
        }
        /* cobblestone hints */
        .street-track::after {
            content: '';
            position: absolute;
            bottom: 10%;
            left: 5%;
            right: 5%;
            height: 4%;
            background:
                repeating-linear-gradient(90deg,
                    transparent 0px,
                    rgba(120, 90, 70, .08) 2px,
                    transparent 6px,
                    rgba(120, 90, 70, .05) 8px,
                    transparent 14px);
            border-radius: 50%;
            filter: blur(1px);
            pointer-events: none;
        }

        /* ── House Marker ── */
        .house-marker {
            position: relative;
            flex-shrink: 0;
            z-index: 3;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 0 4px 16px;
            width: 180px;
            pointer-events: auto;
            transition: transform .35s cubic-bezier(.3, .6, .4, 1.8);
            outline: 2px solid transparent;
            border-radius: 6px;
            will-change: transform;
            touch-action: manipulation;
        }
        .house-marker:hover {
            transform: translateY(-8px) scale(1.02);
        }
        .house-marker:active {
            transform: scale(.95) translateY(-4px);
        }
        .house-marker:focus-visible {
            outline-color: var(--amber);
            outline-offset: 6px;
        }

        .house-svg-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 54 / 50;
            filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .4));
            transition: filter .4s ease;
        }
        .house-marker:hover .house-svg-wrap {
            filter: drop-shadow(0 10px 36px rgba(255, 179, 0, .12));
        }

        .house-svg-wrap svg {
            display: block;
            width: 100%;
            height: 100%;
            transition: transform .4s ease;
        }
        .house-marker:hover .house-svg-wrap svg {
            transform: scale(1.03);
        }

        /* house interactive parts */
        .hm-door {
            transform-origin: left center;
            transition: transform .5s cubic-bezier(.2, .9, .3, 1.3);
        }
        .house-marker:hover .hm-door {
            transform: scaleX(0.2);
        }
        .hm-door-glow {
            opacity: 0;
            transition: opacity .5s ease;
        }
        .house-marker:hover .hm-door-glow {
            opacity: 1;
        }

        .hm-window {
            transition: opacity .5s ease, fill .5s ease;
            opacity: .35;
        }
        .hm-window.lit {
            opacity: .85;
            fill: #FFE082;
        }
        .house-marker:hover .hm-window {
            opacity: .95;
            fill: #FFE082;
        }
        .hm-window-glow {
            opacity: 0;
            transition: opacity .6s ease;
        }
        .house-marker:hover .hm-window-glow {
            opacity: 1;
        }

        .hm-chimney {
            transform-origin: 50% 0%;
            transition: transform .4s ease;
        }
        .house-marker:hover .hm-chimney {
            transform: scale(1.06);
        }

        .hm-smoke {
            opacity: 0;
            transition: opacity .4s ease;
            transform-origin: 50% 100%;
        }
        .house-marker:hover .hm-smoke {
            opacity: 1;
            animation: smokeDrift 2.4s ease-out forwards;
        }
        @keyframes smokeDrift {
            0% {
                transform: translateY(0) scale(.6) translateX(0);
                opacity: .5;
            }
            40% {
                opacity: .7;
            }
            100% {
                transform: translateY(-28px) scale(1.5) translateX(8px);
                opacity: 0;
            }
        }

        /* status badge removed - no more Complete / In Progress text */

        .hm-read {
            position: absolute;
            bottom: 24%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 7px;
            opacity: 0;
            transition: opacity .5s ease;
            color: var(--amber-soft);
            text-shadow: 0 0 16px rgba(255, 179, 0, .3);
            font-family: 'Share Tech Mono', monospace;
            letter-spacing: .08em;
            pointer-events: none;
        }
        .house-marker.read .hm-read {
            opacity: 1;
        }

        .hm-label {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .04em;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.25;
            color: #f4ead9;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
            margin-top: 4px;
        }
        .hm-sub {
            font-family: 'Share Tech Mono', monospace;
            font-size: 9.5px;
            letter-spacing: .06em;
            color: rgba(244, 234, 217, .45);
            text-align: center;
        }

        /* ── String Lights ── */
        .string-lights {
            position: absolute;
            top: 6%;
            left: 4%;
            right: 4%;
            height: 2px;
            pointer-events: none;
            z-index: 4;
            opacity: .7;
        }
        .string-lights .wire {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: repeating-linear-gradient(90deg,
                    rgba(180, 140, 100, .15) 0 2px,
                    transparent 2px 18px);
            filter: blur(0.3px);
        }
        .string-lights .bulb {
            position: absolute;
            top: -4px;
            width: 6px;
            height: 8px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: radial-gradient(circle at 40% 30%, #fff8e0, #ffb300);
            box-shadow: 0 0 12px 4px rgba(255, 179, 0, .15);
            animation: bulbFlicker var(--dur, 2.4s) ease-in-out infinite alternate;
            transform-origin: 50% 0%;
        }
        .string-lights .bulb::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 6px;
            background: rgba(180, 140, 100, .2);
        }
        @keyframes bulbFlicker {
            0% {
                opacity: .6;
                transform: scale(.9) rotate(-2deg);
                box-shadow: 0 0 8px 2px rgba(255, 179, 0, .1);
            }
            40% {
                opacity: 1;
                transform: scale(1.05) rotate(1deg);
                box-shadow: 0 0 20px 8px rgba(255, 179, 0, .25);
            }
            70% {
                opacity: .85;
                transform: scale(.95) rotate(-1deg);
                box-shadow: 0 0 12px 4px rgba(255, 179, 0, .15);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
                box-shadow: 0 0 18px 6px rgba(255, 179, 0, .2);
            }
        }

        /* ── Canvas: Fireflies ── */
        #firefliesCanvas {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* ── Top Bar ── */
        .village-topbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 28px;
            background: linear-gradient(180deg, rgba(13, 8, 18, .7), transparent);
            backdrop-filter: blur(6px);
            pointer-events: none;
        }
        .village-topbar>* {
            pointer-events: auto;
        }
        .village-title {
            margin: 0;
            font-weight: 400;
            font-family: 'Cinzel', serif;
            letter-spacing: .22em;
            font-size: 12px;
            color: rgba(244, 234, 217, .6);
            text-transform: uppercase;
        }
        .village-title strong {
            color: var(--amber-soft);
        }
        .village-return {
            font-family: 'Oswald', sans-serif;
            letter-spacing: .1em;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: rgba(244, 234, 217, .7);
            background: transparent;
            border: 1px solid rgba(244, 234, 217, .15);
            border-radius: 2px;
            padding: 8px 16px;
            cursor: pointer;
            transition: all .25s ease;
        }
        .village-return:hover {
            color: #1D1225;
            background: var(--amber-soft);
            border-color: var(--amber-soft);
            transform: translateY(-1px);
        }

        .village-intro {
            position: absolute;
            top: clamp(90px, 30%, 240px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 6;
            text-align: center;
            padding: 18px 28px 22px;
            pointer-events: none;
            width: 100%;
            max-width: 560px;
            transition: opacity .6s ease, transform .6s ease;
        }
        .village-intro::before {
            content: '';
            position: absolute;
            inset: -10px -40px;
            background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(13, 8, 18, .38), transparent 75%);
            z-index: -1;
            filter: blur(2px);
        }
        .village-intro.faded {
            opacity: 0;
            transform: translateX(-50%) translateY(-14px);
        }
        .vi-eyebrow {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--amber-soft);
            margin-bottom: 4px;
            opacity: .7;
        }
        .village-intro p {
            font-style: italic;
            color: rgba(244, 234, 217, .55);
            font-size: 13px;
            line-height: 1.7;
            text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
        }

        /* ── Scroll hint ── */
        .scroll-hint {
            position: absolute;
            bottom: clamp(20px, 4%, 48px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 6;
            font-family: 'Share Tech Mono', monospace;
            font-size: 9px;
            letter-spacing: .15em;
            color: rgba(244, 234, 217, .2);
            animation: hintPulse 2.8s ease-in-out infinite;
            pointer-events: none;
            white-space: nowrap;
        }
        @keyframes hintPulse {
            0%,
            100% {
                opacity: .2;
                transform: translateX(-50%) translateY(0);
            }
            50% {
                opacity: .5;
                transform: translateX(-50%) translateY(-4px);
            }
        }

        /* ── responsive houses ── */
        @media (max-width: 860px) {
            .house-marker {
                width: 140px;
                padding-bottom: 10px;
            }
            .hm-label {
                font-size: 11px;
            }
            .hm-sub {
                font-size: 8px;
            }
            .street-track {
                gap: clamp(20px, 5vw, 50px);
                padding: 0 clamp(10px, 4vw, 40px);
            }
            .village-topbar {
                padding: 14px 18px;
            }
            .village-title {
                font-size: 10px;
            }
            .village-return {
                font-size: 9px;
                padding: 6px 12px;
            }
            .string-lights .bulb {
                width: 4px;
                height: 6px;
            }
            .village-intro p {
                font-size: 11px;
            }
        }
        @media (max-width: 540px) {
            .house-marker {
                width: 110px;
                padding-bottom: 6px;
            }
            .hm-label {
                font-size: 9px;
            }
            .hm-sub {
                font-size: 7px;
            }
            .hm-read {
                font-size: 5px;
                bottom: 20%;
            }
            .street-track {
                gap: 14px;
                padding: 0 8px;
            }
            .village-topbar {
                padding: 10px 14px;
            }
            .village-title {
                font-size: 8px;
                letter-spacing: .14em;
            }
            .village-return {
                font-size: 8px;
                padding: 4px 10px;
            }
            .village-intro {
                top: clamp(78px, 22%, 160px);
                padding: 14px 12px 18px;
                max-width: 90%;
            }
            .village-intro p {
                font-size: 10px;
                line-height: 1.5;
            }
            .vi-eyebrow {
                font-size: 8px;
            }
            .scroll-hint {
                font-size: 7px;
                bottom: 2%;
            }
            .string-lights .bulb {
                width: 3px;
                height: 5px;
            }
            .string-lights {
                top: 4%;
            }
        }

        /* ============================================================
           DEVLOG OVERLAY
           ============================================================ */
        .devlog-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: var(--cream);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.2), filter .4s ease;
            transform: scale(.92) rotate(-.5deg);
            filter: blur(6px);
            overflow-y: auto;
            cursor: default;
            color: #2a1f1a;
        }
        .devlog-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: scale(1) rotate(0deg);
            filter: blur(0);
        }

        .devlog-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--amber), var(--amber-soft));
            width: 0%;
            z-index: 12;
            transition: width .08s linear;
            box-shadow: 0 0 24px rgba(255, 179, 0, .2);
        }

        /* ── Hero band: full-bleed, per-project accent wash with a
           watermarked house icon - this is the "wow" first impression ── */
        .da-hero {
            --accent: #FFB300;
            position: relative;
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            margin-top: -70px;
            margin-bottom: 46px;
            padding: 104px max(30px, calc(50% - 360px)) 52px;
            background:
                radial-gradient(ellipse 60% 90% at 12% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%),
                linear-gradient(180deg, rgba(26, 18, 22, .025), transparent 60%);
            overflow: hidden;
            border-bottom: 1px solid rgba(26, 18, 22, .07);
        }
        .da-hero-icon {
            position: absolute;
            top: -10px;
            right: max(-10px, calc(50% - 380px));
            width: clamp(140px, 20vw, 220px);
            opacity: .1;
            transform: rotate(4deg);
            pointer-events: none;
        }
        .da-hero-icon svg {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .1));
        }
        .da-hero-icon svg [class*="hm-window"],
        .da-hero-icon svg [class*="hm-door"] {
            fill: var(--accent) !important;
        }
        .da-hero>.da-eyebrow,
        .da-hero>.da-title,
        .da-hero>.da-sub,
        .da-hero>.da-meta,
        .da-hero>.da-tags {
            position: relative;
            z-index: 1;
        }
        .da-hero .da-eyebrow::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            margin-right: 8px;
            box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 60%, transparent);
            vertical-align: middle;
        }
        .da-hero .da-tags {
            margin-bottom: 0;
        }
        .da-hero .da-tag {
            border-color: color-mix(in srgb, var(--accent) 35%, transparent);
            background: color-mix(in srgb, var(--accent) 10%, transparent);
        }

        /* ── Scroll-reveal: sections quietly rise into place as they enter
           view instead of just being "there" ── */
        .da-section,
        .da-links {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
        }
        .da-section.in-view,
        .da-links.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Drop cap on the opening pitch - makes the panel feel like a
           real piece of writing, not a form dump ── */
        .da-section .hook::first-letter {
            font-family: 'Cinzel', serif;
            font-size: 2.6em;
            font-weight: 700;
            float: left;
            line-height: .8;
            padding: 4px 8px 0 0;
            color: var(--terracotta);
        }

        /* ── Ornamental divider used between major sections ── */
        .da-ornament {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 40px 0;
            color: rgba(26, 18, 22, .25);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .7s ease, transform .7s ease;
        }
        .da-ornament.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .da-ornament::before,
        .da-ornament::after {
            content: '';
            width: 44px;
            height: 1px;
            background: currentColor;
        }
        .da-ornament span {
            font-size: 11px;
            transform: rotate(45deg);
        }

        .devlog-close {
            position: fixed;
            top: 20px;
            right: 24px;
            z-index: 12;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(26, 18, 22, .08);
            border: 1px solid rgba(26, 18, 22, .12);
            color: #2a1f1a;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s ease;
            backdrop-filter: blur(4px);
            font-family: 'Spectral', serif;
        }
        .devlog-close:hover {
            background: var(--amber);
            color: #1D1225;
            border-color: var(--amber);
            transform: rotate(90deg);
        }
        .devlog-close:active {
            transform: scale(.9) rotate(90deg);
        }

        .devlog-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 12;
            background: rgba(26, 18, 22, .06);
            border: 1px solid rgba(26, 18, 22, .08);
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            color: #2a1f1a;
            transition: all .25s ease;
            backdrop-filter: blur(4px);
            font-family: 'Spectral', serif;
            touch-action: manipulation;
        }
        .devlog-nav:hover {
            background: var(--amber);
            border-color: var(--amber);
            color: #1D1225;
        }
        .devlog-nav:active {
            transform: translateY(-50%) scale(.92);
        }
        .devlog-nav.prev {
            left: 16px;
        }
        .devlog-nav.next {
            right: 16px;
        }
        @media (max-width: 640px) {
            .devlog-nav {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
            .devlog-nav.prev {
                left: 8px;
            }
            .devlog-nav.next {
                right: 8px;
            }
            .devlog-close {
                top: 14px;
                right: 14px;
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
        }

        .devlog-article {
            max-width: 780px;
            margin: 0 auto;
            padding: 70px 30px 100px;
            color: #2a1f1a;
            font-family: 'Spectral', serif;
            background: var(--cream);
            min-height: 100vh;
        }
        .da-eyebrow {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--terracotta);
            margin-bottom: 8px;
        }
        .da-title {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            font-size: clamp(28px, 4vw, 42px);
            margin-bottom: 6px;
            line-height: 1.15;
            color: #1D1225;
        }
        .da-sub {
            font-size: 16px;
            color: rgba(26, 18, 22, .5);
            font-weight: 400;
            margin-bottom: 16px;
            font-style: italic;
        }
        .da-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 20px;
            margin-bottom: 28px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            color: rgba(26, 18, 22, .45);
            border-bottom: 1px solid rgba(26, 18, 22, .08);
            padding-bottom: 18px;
        }
        .da-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .da-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 28px;
        }
        .da-tag {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: .04em;
            padding: 4px 12px;
            border-radius: 2px;
            background: rgba(200, 90, 50, .08);
            border: 1px solid rgba(200, 90, 50, .15);
            color: #5C3D2E;
        }

        .da-section {
            margin-bottom: 34px;
        }
        .da-section h3 {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--terracotta);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .da-section h3::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(200, 90, 50, .15);
        }
        .da-section p {
            font-size: 15.5px;
            line-height: 1.8;
            color: rgba(26, 18, 22, .88);
            margin-bottom: 10px;
        }
        .da-section p:last-child {
            margin-bottom: 0;
        }
        .da-section .hook {
            font-size: 17px;
            font-style: italic;
            color: rgba(26, 18, 22, .7);
            border-left: 3px solid var(--amber);
            padding-left: 18px;
        }

        .da-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 6px 20px;
        }
        .da-list li {
            font-size: 13.5px;
            color: rgba(26, 18, 22, .82);
            line-height: 1.5;
            padding-left: 18px;
            position: relative;
        }
        .da-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--amber);
        }

        .da-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .da-tech span {
            font-family: 'Share Tech Mono', monospace;
            font-size: 11px;
            padding: 5px 14px;
            border-radius: 2px;
            color: #2a1f1a;
            background: rgba(26, 18, 22, .06);
            border: 1px solid rgba(26, 18, 22, .08);
        }

        .da-gallery {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .da-shot-wrap {
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(26, 18, 22, .08);
            background: #f5ede0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
            max-height: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
            transition: box-shadow .35s ease, transform .35s ease;
        }
        .da-shot-wrap:hover {
            box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
            transform: translateY(-3px);
        }
        .da-shot-wrap img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
            transition: transform .5s ease;
        }
        .da-shot-wrap:hover img {
            transform: scale(1.025);
        }
        .da-shot-cap {
            font-family: 'Share Tech Mono', monospace;
            font-size: 10.5px;
            color: rgba(26, 18, 22, .4);
            text-align: center;
            margin-top: -2px;
        }

        .da-links {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .da-github {
            font-family: 'Oswald', sans-serif;
            letter-spacing: .08em;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 2px;
            transition: all .2s ease;
        }
        .da-github.live {
            background: var(--amber);
            color: #1D1225;
        }
        .da-github.live:hover {
            filter: brightness(1.08);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255, 179, 0, .2);
        }
        .da-github.pending {
            background: transparent;
            color: rgba(26, 18, 22, .35);
            border: 1px dashed rgba(26, 18, 22, .2);
            cursor: default;
            pointer-events: none;
        }

        /* ── "Back to Village" button - fixed to viewport, outside the overlay ── */
        .devlog-back {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%) translateY(0);
            z-index: 210;
            font-family: 'Oswald', sans-serif;
            letter-spacing: .08em;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: rgba(26, 18, 22, .5);
            background: rgba(26, 18, 22, .04);
            border: 1px solid rgba(26, 18, 22, .08);
            border-radius: 40px;
            padding: 10px 28px;
            cursor: pointer;
            transition: all .25s ease;
            backdrop-filter: blur(8px);
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            will-change: transform, opacity;
            white-space: nowrap;
        }
        .devlog-back.visible {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        .devlog-back:hover {
            color: #1D1225;
            background: rgba(255, 179, 0, .12);
            border-color: var(--amber);
            transform: translateX(-50%) translateY(-2px);
        }
        .devlog-back:active {
            transform: translateX(-50%) scale(.96);
        }
        @media (max-width: 640px) {
            .devlog-back {
                bottom: 18px;
                padding: 8px 18px;
                font-size: 9px;
            }
        }

        @media (max-width: 640px) {
            .devlog-article {
                padding: 60px 18px 90px;
            }
            .da-section p {
                font-size: 14px;
            }
            .da-section .hook {
                font-size: 15px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            /* Narrow, deliberate exceptions only - never a blanket `*` rule.
               A blanket `*,*::before,*::after{ animation-duration:.001s!important }`
               rule used to live here and silently clamped every animation on
               the ENTIRE page (not just Village's own) whenever a visitor had
               this OS preference on - it broke the overworld's entrance fade,
               cloud drift, bird flight, and Castle's ambient effects all at
               once, since `*` matches every element site-wide, not just
               elements inside the Village scene. This is the same class of
               landmine documented earlier in this project's history. Village's
               own animated elements are all ambient loops, individually
               listed and disabled below - that's sufficient on its own. */
            .house-marker:hover .hm-door {
                transform: none !important;
            }
            .hm-smoke {
                animation: none !important;
            }
            .house-marker:hover .hm-smoke {
                opacity: 0 !important;
            }
            .string-lights .bulb {
                animation: none !important;
            }
            .star {
                animation: none !important;
            }
            .layer-sky .moon {
                animation: none !important;
            }
        }

#destPanel.show.village-mode .village-scene{ opacity:1; visibility:visible; pointer-events:auto; }
#destPanel.show.siteseeing-mode .siteseeing-scene{ opacity:1; visibility:visible; pointer-events:auto; }