.section-listening.section {
    display: block;
    padding: 0;
    max-width: none;
    min-height: 100svh;
    align-items: stretch;
}
.section-listening > .creative { width: 100%; min-height: 100svh; }

.section-listening {
--bg: #090806;
            --ink: #14110f;
            --paper: #f5efe3;
            --muted: rgba(245, 239, 227, 0.56);
            --faint: rgba(245, 239, 227, 0.14);
            --line: rgba(245, 239, 227, 0.15);
            --rust: #cc6849;
            --moss: #6f7b62;
            --gold: #ba8f54;
            --display: "Syne", system-ui, sans-serif;
            --serif: "Source Serif 4", Georgia, serif;
            --mono: "JetBrains Mono", ui-monospace, monospace;
}

        

        .section-listening * {
            box-sizing: border-box;
        }

        

        

        .section-listening a {
            color: inherit;
            text-decoration: none;
        }

        .section-listening .creative-nav {
            position: fixed;
            z-index: 50;
            top: 1.1rem;
            left: 50%;
            display: none;
            gap: 0.4rem;
            padding: 0.35rem;
            border: 1px solid rgba(245, 239, 227, 0.14);
            border-radius: 999px;
            background: rgba(9, 8, 6, 0.64);
            backdrop-filter: blur(16px);
            transform: translateX(-50%);
        }

        .section-listening .creative-nav a {
            display: grid;
            place-items: center;
            width: 2.15rem;
            height: 2rem;
            border-radius: 999px;
            font-family: var(--mono);
            font-size: 0.68rem;
            color: rgba(245, 239, 227, 0.62);
        }

        .section-listening .creative-nav a:hover {
            color: var(--paper);
            background: rgba(245, 239, 227, 0.08);
        }

        .section-listening .creative {
            position: relative;
            min-height: 100svh;
            padding: clamp(5rem, 8svh, 7.5rem) clamp(1.25rem, 5vw, 5rem);
            overflow: hidden;
            isolation: isolate;
        }

        .section-listening .creative::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: 0.12;
            background-image: radial-gradient(rgba(245, 239, 227, 0.16) 0.8px, transparent 0.8px);
            background-size: 5px 5px;
            pointer-events: none;
        }

        .section-listening .creative-inner {
            width: min(100%, 1360px);
            min-height: calc(100svh - clamp(10rem, 16svh, 15rem));
            margin: 0 auto;
        }

        .section-listening .concept-wave .creative-inner {
            display: flex;
            flex-direction: column;
            gap: clamp(1.6rem, 4svh, 3.2rem);
        }

        .section-listening .eyebrow, .section-listening .micro, .section-listening .track-num, .section-listening .time, .section-listening .period button, .section-listening .caption {
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .section-listening .eyebrow, .section-listening .micro {
            color: rgba(245, 239, 227, 0.48);
        }

        .section-listening .headline {
            margin: 0;
            font-family: var(--display);
            font-size: clamp(2.6rem, 6vw, 5.8rem);
            font-weight: 800;
            line-height: 0.88;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .section-listening .serif-title {
            margin: 0;
            font-family: var(--serif);
            font-size: clamp(4rem, 9vw, 9rem);
            font-style: italic;
            font-weight: 600;
            line-height: 0.9;
        }

        .section-listening .copy {
            max-width: 31rem;
            margin: 0;
            font-family: var(--serif);
            font-size: clamp(1.05rem, 1.28vw, 1.28rem);
            font-style: italic;
            line-height: 1.55;
            color: rgba(245, 239, 227, 0.62);
        }

        .section-listening .period {
            display: flex;
            gap: clamp(1rem, 2vw, 1.9rem);
            align-items: center;
        }

        .section-listening .period button {
            padding: 0 0 0.32rem;
            border: 0;
            border-bottom: 1px solid transparent;
            color: rgba(245, 239, 227, 0.38);
            background: transparent;
        }

        .section-listening .period button:first-child {
            color: var(--paper);
            border-bottom-color: rgba(204, 104, 73, 0.78);
        }

        .section-listening .mini-list {
            display: grid;
        }

        .section-listening .mini-row {
            display: grid;
            grid-template-columns: 2rem minmax(0, 1fr) max-content;
            gap: 1rem;
            align-items: start;
            padding: 0.88rem 0;
            border-bottom: 1px solid var(--line);
        }

        .section-listening .song {
            display: block;
            font-family: var(--display);
            font-size: clamp(1rem, 1.08vw, 1.14rem);
            font-weight: 700;
            line-height: 1.18;
        }

        .section-listening .artist {
            display: block;
            margin-top: 0.25rem;
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 700;
            color: rgba(245, 239, 227, 0.38);
            text-transform: uppercase;
        }

        .section-listening .track-num, .section-listening .time {
            color: rgba(245, 239, 227, 0.36);
            font-variant-numeric: tabular-nums;
        }

        /* 06 Waveform manuscript */
        .section-listening .concept-wave {
            background:
                radial-gradient(ellipse at 18% 8%, rgba(204, 104, 73, 0.28), transparent 34rem),
                radial-gradient(ellipse at 88% 88%, rgba(111, 123, 98, 0.2), transparent 36rem),
                linear-gradient(180deg, #18100b, #080604 68%, #050403);
        }

        .section-listening .concept-wave::before {
            display: block;
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.35;
            background:
                radial-gradient(ellipse at 18% 10%, rgba(204, 104, 73, 0.34), transparent 32rem),
                radial-gradient(ellipse at 86% 88%, rgba(111, 123, 98, 0.28), transparent 34rem);
            pointer-events: none;
        }

        .section-listening .blob-field {
            position: absolute;
            inset: -14%;
            z-index: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity 900ms ease;
        }

        .section-listening .blob-field span {
            position: absolute;
            display: block;
            width: var(--blob-size);
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--blob-color);
            filter: blur(var(--blob-blur)) saturate(1.35);
            mix-blend-mode: screen;
            transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            opacity: var(--blob-opacity);
            will-change: transform;
        }

        .section-listening .concept-wave.is-playing .blob-field, .section-listening .concept-wave.is-revealed .blob-field {
            opacity: 1;
        }

        .section-listening .concept-wave.is-playing .blob-field span:nth-child(1) {
            animation: blobOne 13s ease-in-out infinite;
        }

        .section-listening .concept-wave.is-playing .blob-field span:nth-child(2) {
            animation: blobTwo 16s ease-in-out infinite;
        }

        .section-listening .concept-wave.is-playing .blob-field span:nth-child(3) {
            animation: blobThree 18s ease-in-out infinite;
        }

        .section-listening .concept-wave.is-playing .blob-field span:nth-child(4) {
            animation: blobFour 15s ease-in-out infinite;
        }

        .section-listening .concept-wave::after {
            display: block;
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: 0;
            background-image: linear-gradient(rgba(245, 239, 227, 0.018) 1px, transparent 1px);
            background-size: 100% 0.5rem;
            pointer-events: none;
        }

        .section-listening .concept-wave.is-playing::before {
            opacity: 0.35;
        }

        .section-listening .concept-wave.is-playing::after {
            opacity: 0.55;
        }

        .section-listening .concept-wave.reveal-ready .headline, .section-listening .concept-wave.reveal-ready .copy, .section-listening .concept-wave.reveal-ready .wave-current, .section-listening .concept-wave.reveal-ready .wave-field, .section-listening .concept-wave.reveal-ready .wave-list-head, .section-listening .concept-wave.reveal-ready .wave-note {
            opacity: 0;
            will-change: transform, opacity, clip-path, filter;
        }

        .section-listening .concept-wave.reveal-ready::before {
            opacity: 0.18;
            transition: opacity 900ms ease;
        }

        .section-listening .concept-wave.reveal-ready .headline {
            clip-path: inset(100% 0 0 0);
            transform: translateY(2.4rem);
            transition: clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms ease, transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .section-listening .concept-wave.reveal-ready .copy, .section-listening .concept-wave.reveal-ready .wave-current {
            transform: translateY(1.15rem);
            filter: blur(8px);
            transition: opacity 650ms ease, transform 780ms cubic-bezier(0.16, 1, 0.3, 1), filter 780ms ease;
        }

        .section-listening .concept-wave.reveal-ready .wave-field {
            clip-path: inset(0 100% 0 0);
            transform: translateY(1.5rem);
            transition: clip-path 1200ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 600ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .section-listening .concept-wave.reveal-ready .wave-list-head, .section-listening .concept-wave.reveal-ready .wave-note {
            transform: translateY(1rem);
            filter: blur(6px);
            transition: opacity 560ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 720ms ease;
        }

        .section-listening .concept-wave.is-revealed::before {
            opacity: 0.35;
        }

        .section-listening .concept-wave.is-revealed .headline, .section-listening .concept-wave.is-revealed .copy, .section-listening .concept-wave.is-revealed .wave-current, .section-listening .concept-wave.is-revealed .wave-field, .section-listening .concept-wave.is-revealed .wave-list-head, .section-listening .concept-wave.is-revealed .wave-note {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
            clip-path: inset(0 0 0 0);
        }

        .section-listening .concept-wave.is-revealed .copy {
            transition-delay: 120ms;
        }

        .section-listening .concept-wave.is-revealed .wave-current {
            transition-delay: 210ms;
        }

        .section-listening .concept-wave.is-revealed .wave-field {
            transition-delay: 340ms;
        }

        .section-listening .concept-wave.is-revealed .wave-list-head {
            transition-delay: 650ms;
        }

        .section-listening .concept-wave.is-revealed .wave-note:nth-child(1) {
            transition-delay: 760ms;
        }

        .section-listening .concept-wave.is-revealed .wave-note:nth-child(2) {
            transition-delay: 850ms;
        }

        .section-listening .concept-wave.is-revealed .wave-note:nth-child(3) {
            transition-delay: 940ms;
        }

        .section-listening .concept-wave.is-revealed .wave-note:nth-child(4) {
            transition-delay: 1030ms;
        }

        .section-listening .concept-wave .creative-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-rows: auto minmax(8rem, 0.55fr) auto;
            gap: clamp(2rem, 5svh, 4rem);
        }

        .section-listening .wave-top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.22fr);
            gap: clamp(2rem, 7vw, 6rem);
            align-items: end;
        }

        .section-listening .concept-wave .eyebrow {
            display: none;
        }

        .section-listening .concept-wave .headline {
            width: 100%;
            max-width: 100%;
            overflow: visible;
            font-size: clamp(2.6rem, 5.5vw, 5.2rem);
            line-height: 0.88;
            word-break: keep-all;
        }

        .section-listening .concept-wave .copy {
            max-width: 23rem;
            margin-top: 1rem;
            color: rgba(245, 239, 227, 0.58);
        }

        .section-listening .wave-current {
            align-self: end;
            justify-self: end;
            display: grid;
            width: min(100%, 15rem);
            padding-bottom: 0.2rem;
        }

        .section-listening .wave-playing {
            display: grid;
            grid-template-columns: 2.75rem minmax(0, 1fr);
            gap: 0.85rem;
            align-items: center;
        }

        .section-listening .gramophone {
            position: relative;
            width: 2.75rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(8, 6, 4, 0.96) 0 20%, rgba(245, 239, 227, 0.7) 21% 23%, rgba(31, 24, 19, 0.94) 24% 58%, rgba(204, 104, 73, 0.28) 59% 62%, rgba(12, 9, 7, 0.96) 63%);
            box-shadow: 0 0 0 1px rgba(245, 239, 227, 0.14);
            animation: gramSpin 7s linear infinite;
        }

        .section-listening .gramophone::before {
            content: "";
            position: absolute;
            right: -0.34rem;
            top: 0.46rem;
            width: 1.45rem;
            height: 0.18rem;
            border-radius: 999px;
            background: rgba(245, 239, 227, 0.48);
            transform: rotate(28deg);
            transform-origin: right center;
            animation: gramArm 2.8s ease-in-out infinite;
        }

        .section-listening .gramophone::after {
            content: "";
            position: absolute;
            right: -0.5rem;
            top: 0.32rem;
            width: 0.36rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background: rgba(204, 104, 73, 0.74);
        }

        .section-listening .wave-live {
            display: inline-flex;
            gap: 0.45rem;
            align-items: center;
        }

        .section-listening .wave-live::before {
            content: "";
            width: 0.42rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background: rgba(204, 104, 73, 0.95);
            box-shadow: 0 0 0 rgba(204, 104, 73, 0.38);
            animation: livePulse 1.75s ease-out infinite;
        }

        .section-listening .wave-current strong {
            display: block;
            margin-top: 0.28rem;
            font-family: var(--serif);
            font-size: 1.42rem;
            font-style: italic;
            font-weight: 600;
            line-height: 0.95;
        }

        .section-listening .wave-current .artist {
            margin-top: 0.35rem;
        }

        .section-listening .wave-period {
            display: flex;
            gap: clamp(0.9rem, 1.7vw, 1.5rem);
            justify-self: end;
            width: auto;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .section-listening .wave-period button {
            border: 0;
            border-radius: 0;
            padding: 0;
            color: rgba(245, 239, 227, 0.4);
            background: transparent;
            font-family: var(--mono);
            font-size: 0.64rem;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
            cursor: pointer;
        }

        .section-listening .wave-period button:hover {
            color: var(--paper);
        }

        .section-listening .wave-period button.is-active {
            color: rgba(245, 239, 227, 0.92);
        }

        .section-listening .wave-period button:active {
            transform: translateY(1px) scale(0.98);
        }

        .section-listening .wave-progress {
            display: none;
        }

        .section-listening .wave-progress span {
            display: none;
        }

        .section-listening .wave-stats {
            display: none;
        }

        .section-listening .wave-field {
            position: relative;
            display: grid;
            align-items: center;
            min-height: clamp(8rem, 20svh, 14rem);
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }

        .section-listening .wave-field::before {
            display: none;
        }

        .section-listening .wave-axis {
            display: none;
        }

        .section-listening .wave-line {
            position: relative;
            display: grid;
            grid-template-columns: repeat(32, minmax(2px, 1fr));
            gap: clamp(0.24rem, 0.52vw, 0.58rem);
            align-items: center;
            width: 100%;
            isolation: isolate;
        }

        .section-listening .wave-line::before {
            display: none;
        }

        .section-listening .wave-line span {
            position: relative;
            z-index: 1;
            height: calc(var(--h) * 1px);
            min-height: 10px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(245, 239, 227, 0.72), rgba(204, 104, 73, 0.38) 74%, rgba(118, 64, 46, 0.42));
            opacity: 0.46;
            animation: wavePulse 3.2s ease-in-out infinite;
            animation-delay: calc((var(--h) * -11ms));
            transform-origin: center;
        }

        .section-listening .wave-line span:nth-child(n + 33) {
            display: none;
        }

        .section-listening .wave-playhead {
            display: none;
        }

        .section-listening .wave-playhead span {
            position: absolute;
            top: -0.2rem;
            left: 0.75rem;
            font-family: var(--mono);
            font-size: 0.66rem;
            font-weight: 700;
            color: rgba(245, 239, 227, 0.54);
            white-space: nowrap;
        }

        .section-listening .wave-caption {
            display: none;
        }

        .section-listening .wave-list {
            display: grid;
            width: 100%;
            gap: 1.05rem;
        }

        .section-listening .wave-list-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: clamp(1rem, 3vw, 2rem);
            align-items: center;
            width: 100%;
        }

        .section-listening .wave-list-title {
            display: block;
            margin: 0;
            color: rgba(245, 239, 227, 0.42);
        }

        .section-listening .wave-notes {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            width: 100%;
            gap: clamp(0.6rem, 1vw, 0.9rem);
        }

        .section-listening .wave-note {
            position: relative;
            display: grid;
            gap: 0.42rem;
            min-height: 5.7rem;
            padding: 1rem clamp(0.9rem, 1.4vw, 1.25rem);
            overflow: visible;
            border-radius: 6px;
            background: rgba(245, 239, 227, 0.026);
            transform: translateY(0);
            transition: opacity 220ms ease, transform 220ms ease, background 180ms ease;
        }

        .section-listening .wave-note::before {
            display: none;
        }

        .section-listening .wave-note:hover {
            background: rgba(245, 239, 227, 0.04);
        }

        .section-listening .wave-notes.is-changing .wave-note {
            opacity: 0;
            transform: translateY(0.35rem);
        }

        .section-listening .wave-tag {
            display: inline-flex;
            max-width: 100%;
            font-family: var(--mono);
            font-size: 0.6rem;
            font-weight: 700;
            color: rgba(245, 239, 227, 0.38);
            text-transform: uppercase;
        }

        .section-listening .wave-note-head {
            display: block;
        }

        .section-listening .wave-note-mark {
            display: none;
        }

        .section-listening .wave-note.is-active .wave-note-mark {
            display: none;
        }

        .section-listening .wave-note-body {
            align-self: start;
        }

        .section-listening .wave-note strong {
            display: block;
            font-family: var(--display);
            font-size: 1.02rem;
            line-height: 1.1;
            color: rgba(245, 239, 227, 0.78);
        }

        .section-listening .wave-note span {
            display: block;
            margin-top: 0.18rem;
            font-family: var(--mono);
            font-size: 0.64rem;
            color: rgba(245, 239, 227, 0.34);
            text-transform: uppercase;
        }

        .section-listening .song-viz {
            display: none;
        }

        .section-listening .song-viz i {
            display: block;
            height: calc(var(--v) * 1%);
            min-height: 0.25rem;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(245, 239, 227, 0.62), rgba(204, 104, 73, 0.46));
            animation: miniWave 2.4s ease-in-out infinite;
            animation-delay: calc(var(--v) * -12ms);
            transform-origin: bottom;
        }

        .section-listening .wave-index, .section-listening .wave-time {
            font-family: var(--mono);
            font-size: 0.68rem;
            font-weight: 700;
            color: rgba(245, 239, 227, 0.34);
            font-variant-numeric: tabular-nums;
        }

        .section-listening .wave-note.is-active {
            color: var(--paper);
        }

        .section-listening .wave-note.is-active strong {
            color: rgba(245, 239, 227, 0.92);
        }

        .section-listening .wave-note.is-active .wave-index, .section-listening .wave-note.is-active .wave-time {
            color: rgba(204, 104, 73, 0.9);
        }

        @keyframes wavePulse {
            0%,
            100% {
                transform: scaleY(0.68);
                opacity: 0.42;
            }

            50% {
                transform: scaleY(1.08);
                opacity: 0.9;
            }
        }

        @keyframes waveSweep {
            0% {
                transform: translate(-12%, -50%);
                opacity: 0;
            }

            12%,
            74% {
                opacity: 1;
            }

            100% {
                transform: translate(740%, -50%);
                opacity: 0;
            }
        }

        @keyframes miniWave {
            0%,
            100% {
                transform: scaleY(0.55);
                opacity: 0.42;
            }

            50% {
                transform: scaleY(1);
                opacity: 0.95;
            }
        }

        @keyframes blobOne {
            0% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }

            25% {
                transform: translate3d(22vw, -5vh, 0) scale(1.08);
            }

            50% {
                transform: translate3d(30vw, 18vh, 0) scale(1.18);
            }

            75% {
                transform: translate3d(8vw, 22vh, 0) scale(1.1);
            }

            100% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }
        }

        @keyframes blobTwo {
            0% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }

            25% {
                transform: translate3d(-16vw, 6vh, 0) scale(1.12);
            }

            50% {
                transform: translate3d(-26vw, 24vh, 0) scale(1.04);
            }

            75% {
                transform: translate3d(-8vw, 34vh, 0) scale(1.16);
            }

            100% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }
        }

        @keyframes blobThree {
            0% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }

            25% {
                transform: translate3d(5vw, -18vh, 0) scale(1.08);
            }

            50% {
                transform: translate3d(-18vw, -8vh, 0) scale(1.2);
            }

            75% {
                transform: translate3d(-8vw, 14vh, 0) scale(1.1);
            }

            100% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }
        }

        @keyframes blobFour {
            0% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }

            25% {
                transform: translate3d(15vw, 8vh, 0) scale(1.15);
            }

            50% {
                transform: translate3d(26vw, -10vh, 0) scale(1.05);
            }

            75% {
                transform: translate3d(3vw, -20vh, 0) scale(1.18);
            }

            100% {
                transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0));
            }
        }

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

        @keyframes gramArm {
            0%,
            100% {
                transform: rotate(27deg);
            }

            50% {
                transform: rotate(32deg);
            }
        }

        @keyframes livePulse {
            70% {
                box-shadow: 0 0 0 0.45rem rgba(204, 104, 73, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(204, 104, 73, 0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .section-listening .gramophone, .section-listening .gramophone::before, .section-listening .wave-live::before, .section-listening .wave-line::before, .section-listening .wave-line span, .section-listening .wave-note.is-active .wave-note-mark, .section-listening .song-viz i, .section-listening .concept-wave.is-playing .blob-field span {
                animation: none;
            }

            .section-listening .concept-wave.reveal-ready .headline, .section-listening .concept-wave.reveal-ready .copy, .section-listening .concept-wave.reveal-ready .wave-current, .section-listening .concept-wave.reveal-ready .wave-field, .section-listening .concept-wave.reveal-ready .wave-list-head, .section-listening .concept-wave.reveal-ready .wave-note {
                clip-path: none;
                opacity: 1;
                filter: none;
                transform: none;
                transition: none;
            }
        }

        /* 07 Listening room */
        .section-listening .concept-room {
            background:
                radial-gradient(ellipse at 50% 0%, rgba(245, 239, 227, 0.1), transparent 34rem),
                linear-gradient(180deg, #100d0a, #060504);
        }

        .section-listening .concept-room .creative-inner {
            display: grid;
            grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 0.55fr);
            gap: clamp(3rem, 7vw, 8rem);
            align-items: center;
        }

        .section-listening .room-scene {
            position: relative;
            overflow: hidden;
            min-height: clamp(30rem, 70svh, 44rem);
            border-left: 1px solid rgba(245, 239, 227, 0.12);
            border-right: 1px solid rgba(245, 239, 227, 0.12);
            background:
                linear-gradient(90deg, transparent, rgba(245, 239, 227, 0.035), transparent),
                repeating-linear-gradient(90deg, transparent 0 18%, rgba(245, 239, 227, 0.045) 18% 18.15%, transparent 18.3% 36%);
        }

        .section-listening .lamp {
            position: absolute;
            left: 12%;
            top: 10%;
            width: 13rem;
            height: 13rem;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(245, 239, 227, 0.24), rgba(204, 104, 73, 0.08) 48%, transparent 70%);
            filter: blur(0.5px);
        }

        .section-listening .room-title {
            position: absolute;
            left: 7%;
            bottom: 8%;
            max-width: 7ch;
            font-family: var(--display);
            font-size: clamp(3.8rem, 5vw, 5rem);
            font-weight: 800;
            line-height: 0.88;
            text-transform: uppercase;
        }

        .section-listening .shelf-list {
            display: grid;
            gap: clamp(1rem, 2svh, 1.55rem);
        }

        .section-listening .shelf-item {
            display: grid;
            grid-template-columns: 2rem minmax(0, 1fr);
            gap: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(245, 239, 227, 0.16);
        }

        .section-listening .shelf-item strong {
            display: block;
            font-family: var(--serif);
            font-size: clamp(1.5rem, 2.2vw, 2.15rem);
            font-style: italic;
            font-weight: 600;
            line-height: 1;
        }

        /* 08 Cassette index */
        .section-listening .concept-cassette {
            color: #1a1410;
            background:
                radial-gradient(circle at 76% 26%, rgba(204, 104, 73, 0.16), transparent 28rem),
                linear-gradient(180deg, #e9dcc6, #c9b89c);
        }

        .section-listening .concept-cassette::before {
            opacity: 0.22;
            background-image: radial-gradient(rgba(26, 20, 16, 0.18) 0.8px, transparent 0.8px);
        }

        .section-listening .concept-cassette .creative-inner {
            display: grid;
            grid-template-columns: minmax(0, 0.56fr) minmax(26rem, 0.44fr);
            gap: clamp(3rem, 7vw, 7rem);
            align-items: center;
        }

        .section-listening .concept-cassette .copy, .section-listening .concept-cassette .eyebrow, .section-listening .concept-cassette .track-num, .section-listening .concept-cassette .time, .section-listening .concept-cassette .artist, .section-listening .concept-cassette .period button {
            color: rgba(26, 20, 16, 0.55);
        }

        .section-listening .concept-cassette .period button:first-child {
            color: #1a1410;
            border-bottom-color: rgba(204, 104, 73, 0.9);
        }

        .section-listening .concept-cassette .headline {
            max-width: 7.2ch;
            font-size: clamp(3.8rem, 5.9vw, 5.9rem);
            color: #1a1410;
        }

        .section-listening .cassette {
            position: relative;
            aspect-ratio: 1.62;
            border: 2px solid rgba(26, 20, 16, 0.28);
            border-radius: 8px;
            background:
                linear-gradient(180deg, rgba(255, 250, 238, 0.5), rgba(26, 20, 16, 0.08)),
                repeating-linear-gradient(0deg, rgba(26, 20, 16, 0.035) 0 1px, transparent 1px 8px);
            box-shadow: 0 30px 80px rgba(72, 48, 32, 0.24);
        }

        .section-listening .cassette::before, .section-listening .cassette::after {
            content: "";
            position: absolute;
            top: 36%;
            width: 20%;
            aspect-ratio: 1;
            border: 2px solid rgba(26, 20, 16, 0.3);
            border-radius: 50%;
            background:
                radial-gradient(circle, transparent 0 22%, rgba(26, 20, 16, 0.18) 23% 25%, transparent 26%),
                repeating-conic-gradient(rgba(26, 20, 16, 0.24) 0 8deg, transparent 8deg 18deg);
        }

        .section-listening .cassette::before {
            left: 18%;
        }

        .section-listening .cassette::after {
            right: 18%;
        }

        .section-listening .cassette-window {
            position: absolute;
            left: 19%;
            right: 19%;
            top: 37%;
            height: 18%;
            border: 1px solid rgba(26, 20, 16, 0.22);
            border-radius: 999px;
            background: rgba(26, 20, 16, 0.08);
        }

        .section-listening .cassette-label {
            position: absolute;
            left: 8%;
            right: 8%;
            top: 11%;
            display: flex;
            justify-content: space-between;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(26, 20, 16, 0.16);
            font-family: var(--mono);
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .section-listening .cassette-title {
            margin-top: clamp(2rem, 4vw, 3rem);
        }

        .section-listening .concept-cassette .track {
            border-bottom-color: rgba(26, 20, 16, 0.16);
        }

        .section-listening .concept-cassette .track-name {
            color: #1a1410;
        }

        /* 09 Orbit score */
        .section-listening .concept-orbit {
            background:
                radial-gradient(circle at 50% 50%, rgba(111, 123, 98, 0.14), transparent 32rem),
                linear-gradient(180deg, #0d0d0a, #050505);
        }

        .section-listening .concept-orbit .creative-inner {
            display: grid;
            grid-template-columns: minmax(0, 0.48fr) minmax(28rem, 0.52fr);
            gap: clamp(3rem, 7vw, 7rem);
            align-items: center;
        }

        .section-listening .orbit-copy {
            align-self: center;
        }

        .section-listening .orbit-copy .headline {
            max-width: 6.4ch;
            font-size: clamp(3.7rem, 5.35vw, 5.35rem);
        }

        .section-listening .orbit-map {
            position: relative;
            width: min(100%, 37rem);
            aspect-ratio: 1;
            justify-self: center;
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(245, 239, 227, 0.08) 0 1px, transparent 2px),
                repeating-radial-gradient(circle, transparent 0 4.7rem, rgba(245, 239, 227, 0.1) 4.78rem 4.86rem, transparent 4.95rem 7.5rem);
        }

        .section-listening .orbit-map::before {
            content: "";
            position: absolute;
            inset: 40%;
            border-radius: 50%;
            background: rgba(204, 104, 73, 0.8);
            box-shadow: 0 0 60px rgba(204, 104, 73, 0.22);
        }

        .section-listening .orbit-track {
            position: absolute;
            width: min(42%, 14rem);
            padding: 0.75rem 0;
            border-top: 1px solid rgba(245, 239, 227, 0.15);
        }

        .section-listening .orbit-track strong {
            display: block;
            font-family: var(--display);
            font-size: 1rem;
        }

        .section-listening .orbit-track span {
            display: block;
            margin-top: 0.25rem;
            font-family: var(--mono);
            font-size: 0.68rem;
            color: rgba(245, 239, 227, 0.38);
            text-transform: uppercase;
        }

        .section-listening .o1 { left: 2%; top: 16%; }
        .section-listening .o2 { right: 0; top: 24%; }
        .section-listening .o3 { left: 0; bottom: 18%; }
        .section-listening .o4 { right: 8%; bottom: 12%; }
        .section-listening .o5 { left: 36%; top: 2%; }
        .section-listening .o6 { left: 34%; bottom: 0; }

        /* 10 Marginalia */
        .section-listening .concept-margin {
            color: #15110f;
            background:
                linear-gradient(90deg, #efe5d3 0 54%, #15110f 54% 100%);
        }

        .section-listening .concept-margin::before {
            opacity: 0.18;
            background-image:
                linear-gradient(rgba(21, 17, 15, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(21, 17, 15, 0.035) 1px, transparent 1px);
            background-size: 6rem 6rem;
        }

        .section-listening .concept-margin .creative-inner {
            display: grid;
            grid-template-columns: minmax(0, 0.55fr) minmax(24rem, 0.45fr);
            gap: clamp(3rem, 7vw, 7rem);
            align-items: center;
        }

        .section-listening .margin-main .serif-title {
            max-width: 7.4ch;
            color: #15110f;
        }

        .section-listening .margin-main .copy, .section-listening .margin-main .eyebrow {
            color: rgba(21, 17, 15, 0.58);
        }

        .section-listening .margin-board {
            color: var(--paper);
        }

        .section-listening .margin-board .period {
            margin-bottom: 1rem;
        }

        .section-listening .margin-board .mini-list {
            border-top: 1px solid rgba(245, 239, 227, 0.16);
        }

        @media (max-width: 980px) {
            .section-listening .creative {
                padding: 5.5rem 1.3rem 4.5rem;
            }

            .section-listening .creative-inner, .section-listening .wave-top, .section-listening .concept-room .creative-inner, .section-listening .concept-cassette .creative-inner, .section-listening .concept-orbit .creative-inner, .section-listening .concept-margin .creative-inner {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .section-listening .headline, .section-listening .room-title, .section-listening .serif-title {
                font-size: clamp(3.1rem, 12.5vw, 5rem);
            }

            .section-listening .wave-notes {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .section-listening .concept-wave .headline {
                font-size: 5.1rem;
            }

            .section-listening .concept-wave .copy {
                justify-self: start;
            }

            .section-listening .wave-current {
                min-height: auto;
            }

            .section-listening .wave-playhead span {
                display: none;
            }

            .section-listening .room-scene {
                min-height: 28rem;
            }

            .section-listening .orbit-map {
                width: min(100%, 32rem);
            }

            .section-listening .concept-margin {
                background: #efe5d3;
            }

            .section-listening .concept-margin .margin-board {
                margin: 0 -1.3rem -4.5rem;
                padding: 3rem 1.3rem 4.5rem;
                background: #15110f;
            }
        }

        @media (max-width: 560px) {
            .section-listening .creative-nav {
                top: 0.75rem;
            }

            .section-listening .creative-nav a {
                width: 1.95rem;
            }

            .section-listening .headline {
                font-size: clamp(2.25rem, 8.7vw, 3rem);
            }

            .section-listening .concept-wave .headline, .section-listening .concept-cassette .headline, .section-listening .orbit-copy .headline {
                max-width: 100%;
                font-size: clamp(2.25rem, 8.7vw, 3rem);
            }

            .section-listening .concept-wave.is-playing::after {
                opacity: 0.42;
            }

            .section-listening .concept-wave.is-playing::before {
                opacity: 0.3;
            }

            .section-listening .blob-field {
                inset: -20%;
            }

            .section-listening .blob-field span {
                filter: blur(calc(var(--blob-blur) * 0.82)) saturate(1.25);
            }

            .section-listening .room-title {
                font-size: clamp(2.25rem, 8.5vw, 2.9rem);
            }

            .section-listening .serif-title {
                font-size: clamp(2.85rem, 11vw, 3.8rem);
            }

            .section-listening .copy {
                max-width: 21rem;
            }

            .section-listening .concept-wave .copy {
                justify-self: start;
                max-width: 21rem;
            }

            .section-listening .wave-current {
                justify-self: start;
                width: 100%;
            }

            .section-listening .wave-playing {
                grid-template-columns: 2.9rem minmax(0, 1fr);
                gap: 0.85rem;
            }

            .section-listening .gramophone {
                width: 2.85rem;
            }

            .section-listening .wave-period {
                justify-self: stretch;
                justify-content: space-between;
                max-width: 100%;
                width: 100%;
            }

            .section-listening .wave-list-head {
                grid-template-columns: 1fr;
                align-items: start;
                gap: 0.75rem;
            }

            .section-listening .wave-period button {
                padding: 0.48rem 0.5rem;
                font-size: 0.58rem;
            }

            .section-listening .wave-line {
                grid-template-columns: repeat(24, minmax(2px, 1fr));
            }

            .section-listening .wave-line span:nth-child(n + 25) {
                display: none;
            }

            .section-listening .wave-axis span:nth-child(2), .section-listening .wave-playhead span {
                display: none;
            }

            .section-listening .wave-caption {
                font-size: 0.58rem;
            }

            .section-listening .wave-notes {
                grid-template-columns: 1fr;
            }

            .section-listening .wave-note {
                min-height: 0;
                padding: 0.9rem 1rem;
            }

            .section-listening .mini-row {
                grid-template-columns: 1.8rem minmax(0, 1fr);
            }

            .section-listening .time {
                grid-column: 2;
                justify-self: start;
            }

            .section-listening .orbit-map {
                display: grid;
                width: 100%;
                aspect-ratio: auto;
                gap: 0.7rem;
                border-radius: 0;
                background: transparent;
            }

            .section-listening .orbit-map::before {
                display: none;
            }

            .section-listening .orbit-track {
                position: static;
                width: 100%;
            }
        }

        /* ── Live waveform — the pulsing line, redesigned as a full-bleed
              equalizer pinned to the foot of the screen. Edge-to-edge,
              no labels, symmetric bars with a slow light sweep. ── */
        .section-listening .concept-wave .wave-live-strip {
            position: absolute;
            left: 0;
            bottom: clamp(1.5rem, 4.5svh, 3.25rem);
            z-index: 3;
            width: 100%;
            pointer-events: none;
        }

        .section-listening .wls-wave {
            position: relative;
            width: 100%;
            height: clamp(3.6rem, 11svh, 6.75rem);
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        }

        /* faint centre baseline the bars sit on */
        .section-listening .wls-wave::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            z-index: 0;
            height: 1px;
            transform: translateY(-50%);
            background: linear-gradient(90deg, transparent, rgba(245, 239, 227, 0.12) 18%, rgba(245, 239, 227, 0.12) 82%, transparent);
        }

        .section-listening .wls-wave .wave-line {
            position: relative;
            z-index: 1;
            grid-template-columns: repeat(160, minmax(1px, 1fr));
            gap: 0;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-items: center;
            padding: 0;
        }

        .section-listening .wls-wave .wave-line span {
            width: clamp(1px, 0.11vw, 2px);
            height: calc(var(--h) * 0.4px);
            min-height: 5px;
            border-radius: 0.5px;
            background: linear-gradient(180deg, rgba(204, 104, 73, 0.5), rgba(245, 239, 227, 0.98) 50%, rgba(204, 104, 73, 0.5));
            opacity: 0.88;
            animation: wavePulse 3.4s ease-in-out infinite;
            animation-delay: calc(var(--h) * -9ms);
        }

        .section-listening .wls-wave .wave-line span:nth-child(n + 33) {
            display: block;
        }

        .section-listening .wls-glow {
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 2;
            width: 9%;
            height: 165%;
            transform: translate(-12%, -50%);
            background: radial-gradient(ellipse at center, rgba(245, 239, 227, 0.2), transparent 70%);
            pointer-events: none;
            animation: waveSweep 8s linear infinite;
        }

        /* Reveal — joins the concept-wave stagger as the final beat */
        .section-listening .concept-wave.reveal-ready .wave-live-strip {
            opacity: 0;
            transform: translateY(1.2rem);
            filter: blur(6px);
            transition: opacity 560ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 720ms ease;
        }

        .section-listening .concept-wave.is-revealed .wave-live-strip {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
            transition-delay: 1120ms;
        }

        @media (max-width: 640px) {
            .section-listening .wls-wave {
                height: clamp(3rem, 9svh, 4.5rem);
            }
            .section-listening .wls-wave .wave-line {
                grid-template-columns: repeat(80, minmax(1px, 1fr));
            }
            .section-listening .wls-wave .wave-line span:nth-child(n + 81) {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .section-listening .wls-glow {
                display: none;
            }
            .section-listening .concept-wave.reveal-ready .wave-live-strip {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }
        }