/* Touch carousel — native scrolling, glass members */
        .carousel-container {
            position: relative;
            margin: 1.5rem 0;
            overflow: hidden;
            width: 100%;
            padding: 0.5rem 0;
        }

        /* ── THE TRACK — no side padding, so a carousel card lines up EXACTLY with the .card-grid
              cards above and below it. It used to carry `padding: 1rem 0.5rem`, which inset every
              card 8px and is half of why they measured narrower than their neighbours. */
        .carousel-track {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 1rem 0;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            width: 100%;
            cursor: grab;
        }

        /* ── THE RAIL — the affordance that REPLACES the peek (operator 2026-08-11: "shit doesn't
              go full width").

           A full-width card removes the sliver of the next card that used to show at the edge, and
           that sliver was doing real work: it was the only thing on screen saying "this row
           scrolls". Deleting it without a replacement would make the row look like a single static
           card with four siblings nobody ever finds.

           So the scrollbar — which this file previously HID with `scrollbar-width: none` and a
           `::-webkit-scrollbar { display: none }` — is restyled instead of suppressed. It is the
           honest affordance: it shows position AND extent, it is native, it costs no JS, and it
           cannot drift out of sync with the content the way a hand-maintained dot row can. */
        .carousel-track {
            scrollbar-width: thin;
            scrollbar-color: rgba(212, 175, 55, 0.55) transparent;
        }
        .carousel-track::-webkit-scrollbar {
            height: 3px;
        }
        .carousel-track::-webkit-scrollbar-track {
            background: rgba(192, 192, 192, 0.08);
            border-radius: 2px;
        }
        .carousel-track::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
            border-radius: 2px;
        }

        .carousel-track:active {
            cursor: grabbing;
        }

        /* ── THE CARD IS THE COLUMN WIDTH (operator 2026-08-11: "index/ has a weird box … shit
              doesn't go full width.. bad").

           MEASURED, so the fix is arithmetic rather than taste: a `.card-grid` card renders 351px
           at 390px, a carousel card rendered **332px** — and 332 + the 16px gap = 348 inside a 351px
           window, so 3px of the NEXT card was permanently visible at the right edge. That sliver IS
           the "weird box": not a stray element, a neighbour showing through a gap too small to read
           as a gap and too big to be nothing.

           `85vw` was measuring the WRONG BOX. It is 85% of the VIEWPORT, while every other card on
           the page is 100% of the CARD COLUMN — two different quantities that only coincide at one
           screen width. `100%` here is the track's own content box, which IS the column, so a
           carousel card and a grid card are now the same width BY CONSTRUCTION at every size
           instead of by a constant that happens to be close at 390px. */
        .carousel-card {
            flex: 0 0 auto;
            min-width: 100%;
            max-width: 100%;
            background: var(--glass-bg);
            border-radius: 16px;
            padding: 1.5rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--glass-border);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-shine);
            scroll-snap-align: center;
            box-sizing: border-box;
            user-select: none;
        }

        .carousel-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-red), var(--accent-gold), transparent);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.4s ease;
        }

        @media (hover: hover) and (pointer: fine) {
            .carousel-card:hover::before {
                transform: scaleX(1);
            }

            .carousel-card:hover {
                border-color: var(--glass-border-active);
                box-shadow: var(--glow-gold), 0 8px 32px rgba(0, 0, 0, 0.4);
                transform: translateY(-3px);
            }
        }

        .carousel-card:active {
            transform: translateY(-1px);
        }