:root {
    /* typography notes: IBM Plex Sans Condensed for narrow annotations, Space Mono for measurement ticks */
    --cellar-black: #050409;
    --sub-indigo: #111A3A;
    --brass: #B9823E;
    --lime: #C7FF5A;
    --mauve: #6F5368;
    --chalk: #F1E9D2;
    --drain-blue: #2E8DBA;
    --rail-y: 79vh;
    --rail-thickness: 12px;
    --sink: 0px;
}

* { box-sizing: border-box; }

html {
    background: var(--cellar-black);
    color: var(--chalk);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 500vh;
    overflow-x: hidden;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    background:
        radial-gradient(circle at 18% 92%, rgba(46, 141, 186, 0.18), transparent 28%),
        linear-gradient(180deg, var(--cellar-black) 0%, #090716 34%, var(--sub-indigo) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 14%, rgba(111,83,104,0.09) 14.2% 14.6%, transparent 14.8% 48%, rgba(46,141,186,0.08) 48.2% 48.5%, transparent 48.8% 78%, rgba(185,130,62,0.08) 78.2% 78.5%, transparent 78.8%),
        radial-gradient(ellipse at 50% 112%, rgba(5,4,9,0.8), transparent 44%);
    z-index: 7;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    z-index: 20;
    background-image:
        radial-gradient(circle at 12% 24%, rgba(241,233,210,.18) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 64%, rgba(185,130,62,.16) 0 1px, transparent 1.4px),
        radial-gradient(circle at 42% 84%, rgba(46,141,186,.12) 0 1px, transparent 1.5px);
    background-size: 73px 91px, 109px 67px, 151px 127px;
    mix-blend-mode: screen;
}

.street-slit {
    position: fixed;
    top: 0;
    left: 8vw;
    right: 8vw;
    height: 9px;
    background: linear-gradient(90deg, transparent, rgba(241,233,210,.5), rgba(199,255,90,.28), rgba(46,141,186,.32), transparent);
    box-shadow: 0 0 42px rgba(241,233,210,.28);
    z-index: 8;
}

.descent { position: relative; z-index: 2; }

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 7vh 7vw 0;
    isolation: isolate;
    transform: translateY(calc(var(--sink) * .08));
}

.scene::before {
    content: attr(data-title);
    position: absolute;
    left: 7vw;
    top: calc(var(--rail-y) - 30px);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(241,233,210,.42);
    text-transform: lowercase;
}

.scene::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--rail-y);
    height: 28vh;
    background: linear-gradient(180deg, rgba(185,130,62,.11), rgba(5,4,9,.78) 38%, rgba(5,4,9,.96));
    z-index: -1;
}

.scene-street { background: radial-gradient(ellipse at 65% 92%, rgba(46,141,186,.1), transparent 35%); }
.scene-basement { background: linear-gradient(180deg, rgba(17,26,58,.18), rgba(5,4,9,0) 42%), radial-gradient(ellipse at 12% 88%, rgba(111,83,104,.2), transparent 34%); }
.scene-archive { background: radial-gradient(ellipse at 80% 82%, rgba(185,130,62,.12), transparent 32%); }
.scene-menu { background: radial-gradient(ellipse at 54% 83%, rgba(199,255,90,.08), transparent 30%), linear-gradient(180deg, rgba(17,26,58,.2), transparent); }
.scene-exit { background: radial-gradient(ellipse at 25% 86%, rgba(46,141,186,.18), transparent 34%); }

.persistent-rail {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--rail-y);
    height: var(--rail-thickness);
    background: linear-gradient(180deg, #d19a4c 0%, var(--brass) 42%, #6b421f 100%);
    box-shadow: 0 -2px 0 rgba(241,233,210,.14), 0 10px 34px rgba(185,130,62,.22), 0 18px 48px rgba(5,4,9,.75);
    z-index: 10;
    transform-origin: center;
    transition: height .35s ease, box-shadow .35s ease;
}

.persistent-rail.is-warm { box-shadow: 0 -2px 0 rgba(241,233,210,.24), 0 0 46px rgba(185,130,62,.38), 0 18px 48px rgba(5,4,9,.75); }
.persistent-rail.is-vibrating { animation: railBass .18s infinite alternate; }

.rail-scratches, .rail-glow, .rail-ticks { position: absolute; inset: 0; overflow: hidden; }
.rail-scratches {
    background: repeating-linear-gradient(104deg, transparent 0 26px, rgba(241,233,210,.25) 27px 28px, transparent 29px 71px);
    opacity: .35;
    mix-blend-mode: overlay;
}
.rail-glow { top: 100%; height: 20px; background: linear-gradient(180deg, rgba(199,255,90,.34), transparent); filter: blur(6px); }
.tick {
    position: absolute;
    top: -19px;
    width: 1px;
    height: 18px;
    background: rgba(241,233,210,.45);
    font-family: "Space Mono", monospace;
    color: rgba(241,233,210,.55);
    font-size: 9px;
}
.tick::after { content: attr(data-label); position: absolute; top: -13px; left: -10px; }

.wordmark-wrap {
    position: absolute;
    left: 8vw;
    top: calc(var(--rail-y) - clamp(88px, 12vw, 160px));
    width: min(84vw, 960px);
}
.wordmark {
    margin: 0;
    font-family: "Fraunces", serif;
    font-size: clamp(68px, 16vw, 210px);
    line-height: .78;
    font-weight: 900;
    letter-spacing: -.075em;
    color: var(--chalk);
    text-shadow: 0 18px 32px rgba(5,4,9,.9), 0 0 1px var(--brass);
    transform: translateY(calc(var(--sink) * .04));
}
.wordmark::after {
    content: "";
    display: block;
    width: 72%;
    height: 7px;
    margin-left: 2%;
    background: var(--brass);
    box-shadow: 0 0 18px rgba(185,130,62,.42);
}
.descender-pipes {
    position: absolute;
    left: 30%;
    top: 80%;
    width: 40%;
    height: 38vh;
    pointer-events: none;
}
.descender-pipes i {
    position: absolute;
    top: 0;
    width: 6px;
    height: calc(24vh + var(--sink) * .13);
    background: linear-gradient(180deg, var(--chalk), var(--mauve), transparent);
    border-radius: 0 0 12px 12px;
    opacity: .38;
}
.descender-pipes i:nth-child(1) { left: 4%; }
.descender-pipes i:nth-child(2) { left: 38%; height: calc(18vh + var(--sink) * .10); background: linear-gradient(180deg, var(--brass), transparent); }
.descender-pipes i:nth-child(3) { left: 78%; height: calc(30vh + var(--sink) * .16); background: linear-gradient(180deg, var(--drain-blue), transparent); }

.whisper, .scene-caption p, .receipt-strip p {
    font-size: clamp(17px, 2vw, 25px);
    line-height: 1.05;
    letter-spacing: .01em;
}
.whisper {
    position: absolute;
    right: 8vw;
    top: 16vh;
    width: 260px;
    color: rgba(241,233,210,.42);
}
.top-leak span {
    position: absolute;
    top: 4vh;
    width: 16vw;
    height: 1px;
    background: rgba(241,233,210,.32);
    box-shadow: 0 0 28px rgba(46,141,186,.35);
}
.top-leak span:nth-child(1) { left: 10vw; }
.top-leak span:nth-child(2) { left: 41vw; background: rgba(199,255,90,.22); }
.top-leak span:nth-child(3) { right: 9vw; }
.caption-left {
    position: absolute;
    left: 8vw;
    top: calc(var(--rail-y) + 42px);
    width: min(440px, 70vw);
}
.mono-code, .wave-readout {
    font-family: "Space Mono", monospace;
    font-size: 12px;
    color: var(--lime);
    letter-spacing: .12em;
}

.floor-buttons {
    position: fixed;
    right: 28px;
    top: calc(var(--rail-y) - 142px);
    z-index: 30;
    display: grid;
    gap: 7px;
}
.floor-button {
    width: 34px;
    height: 28px;
    border: 1px solid rgba(185,130,62,.55);
    background: rgba(5,4,9,.74);
    color: rgba(241,233,210,.62);
    font-family: "Space Mono", monospace;
    font-size: 10px;
    cursor: pointer;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.floor-button.is-active { color: var(--cellar-black); background: var(--lime); border-color: var(--lime); box-shadow: 0 0 18px rgba(199,255,90,.45); }

.shaft {
    position: absolute;
    top: 0;
    bottom: 14vh;
    width: 23px;
    border-left: 1px solid rgba(241,233,210,.12);
    border-right: 1px solid rgba(46,141,186,.18);
    background: linear-gradient(180deg, rgba(17,26,58,.16), rgba(5,4,9,.1));
}
.shaft span {
    writing-mode: vertical-rl;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    color: rgba(241,233,210,.44);
    font-size: 13px;
    letter-spacing: .17em;
    margin: 2vh auto;
}
.shaft-a { left: 22vw; }
.shaft-b { right: 26vw; }
.rail-plaque {
    position: absolute;
    top: calc(var(--rail-y) + 18px);
    left: 11vw;
    padding: 7px 18px;
    background: linear-gradient(180deg, rgba(185,130,62,.95), rgba(113,73,34,.92));
    color: var(--cellar-black);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: .1em;
    box-shadow: inset 0 0 0 1px rgba(241,233,210,.25);
}
.receipt-strip {
    position: absolute;
    top: calc(var(--rail-y) + 58px);
    width: min(520px, 72vw);
    padding: 18px 20px 20px;
    background: linear-gradient(180deg, rgba(241,233,210,.92), rgba(207,195,162,.86));
    color: var(--cellar-black);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 3% 100%);
    box-shadow: 0 22px 44px rgba(5,4,9,.55);
    transform: translateY(26px);
    opacity: .18;
    transition: transform .7s ease, opacity .7s ease;
}
.scene.is-visible .receipt-strip { transform: translateY(0); opacity: 1; }
.receipt-strip h2 {
    margin: 0 0 8px;
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(34px, 6vw, 76px);
    line-height: .78;
    letter-spacing: -.055em;
    text-transform: lowercase;
}
.receipt-strip p { margin: 0; max-width: 28rem; }
.strip-basement { right: 9vw; }
.strip-archive { left: 8vw; }
.strip-menu { right: 9vw; }
.strip-exit { left: 8vw; }

.elevator-indicator {
    position: absolute;
    right: 10vw;
    top: calc(var(--rail-y) - 96px);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid rgba(185,130,62,.72);
    display: grid;
    place-items: center;
    font-family: "Space Mono", monospace;
    color: var(--lime);
    background: radial-gradient(circle, rgba(199,255,90,.13), rgba(5,4,9,.86));
    box-shadow: inset 0 0 18px rgba(199,255,90,.1), 0 0 20px rgba(5,4,9,.9);
}
.hanging-sign {
    position: absolute;
    left: 36vw;
    top: calc(var(--rail-y) + 10px);
    height: 96px;
    padding: 42px 8px 0;
    border-left: 2px solid rgba(185,130,62,.5);
    color: rgba(241,233,210,.52);
    font-size: 13px;
    writing-mode: vertical-rl;
}

.scuffed-wall {
    position: absolute;
    left: 0;
    right: 0;
    top: 47vh;
    height: 24vh;
    background: repeating-linear-gradient(170deg, transparent 0 18px, rgba(111,83,104,.15) 19px 22px, transparent 23px 48px);
    opacity: .7;
}
.screw-row {
    position: absolute;
    left: 9vw;
    right: 9vw;
    top: calc(var(--rail-y) + 19px);
    display: flex;
    justify-content: space-between;
}
.screw-row i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, var(--chalk), var(--brass) 36%, #3d2614 80%);
    box-shadow: 0 0 10px rgba(185,130,62,.32);
}
.artifact {
    position: absolute;
    top: calc(var(--rail-y) + 70px);
    font-family: "Space Mono", monospace;
    font-size: 12px;
    line-height: 1.1;
    text-transform: lowercase;
}
.matchbook {
    right: 20vw;
    width: 92px;
    height: 68px;
    padding: 12px;
    color: var(--cellar-black);
    background: var(--lime);
    transform: rotate(-7deg);
}
.ticket {
    right: 9vw;
    width: 136px;
    padding: 12px;
    color: var(--chalk);
    border: 1px dashed rgba(241,233,210,.42);
    transform: rotate(4deg);
}
.stool-shadow {
    position: absolute;
    top: calc(var(--rail-y) - 30px);
    width: 84px;
    height: 190px;
    border-radius: 50% 50% 6px 6px;
    border-top: 8px solid rgba(241,233,210,.1);
    border-left: 10px solid rgba(5,4,9,.7);
    border-right: 10px solid rgba(5,4,9,.7);
    opacity: .75;
}
.stool-one { left: 44vw; }
.stool-two { left: 55vw; transform: scale(.82); opacity: .5; }

.basement-window {
    position: absolute;
    left: 8vw;
    top: 10vh;
    width: 42vw;
    height: 44px;
    border: 1px solid rgba(46,141,186,.42);
    background: linear-gradient(180deg, rgba(46,141,186,.2), rgba(5,4,9,.7));
    clip-path: polygon(2% 0, 100% 0, 97% 100%, 0 100%);
    box-shadow: 0 0 36px rgba(46,141,186,.2);
}
.basement-window span { display: inline-block; height: 100%; width: 31%; border-right: 1px solid rgba(241,233,210,.12); }
.shelf-labels {
    position: absolute;
    left: 8vw;
    top: calc(var(--rail-y) + 40px);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.shelf-labels div {
    width: 130px;
    padding: 9px 10px;
    background: rgba(17,26,58,.86);
    border: 1px solid rgba(185,130,62,.36);
    color: var(--chalk);
}
.shelf-labels b { display: block; font-size: 15px; }
.shelf-labels small { font-family: "Space Mono", monospace; color: var(--lime); }
.bottle-feet {
    position: absolute;
    left: 17vw;
    top: calc(var(--rail-y) - 80px);
    display: flex;
    gap: 18px;
    align-items: flex-end;
}
.bottle-feet i {
    display: block;
    width: 34px;
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(180deg, rgba(241,233,210,.08), rgba(46,141,186,.33));
    box-shadow: inset 0 -8px 0 rgba(199,255,90,.12);
}
.bottle-feet i:nth-child(1) { height: 66px; }
.bottle-feet i:nth-child(2) { height: 112px; }
.bottle-feet i:nth-child(3) { height: 88px; }
.bottle-feet i:nth-child(4) { height: 52px; }
.neon-drip {
    position: absolute;
    right: 25vw;
    top: calc(var(--rail-y) + 3px);
    display: flex;
    gap: 34px;
}
.neon-drip i {
    width: 5px;
    height: 92px;
    background: linear-gradient(180deg, var(--lime), transparent);
    filter: drop-shadow(0 0 12px var(--lime));
    animation: drip 2.7s infinite ease-in-out;
}
.neon-drip i:nth-child(2) { animation-delay: -.8s; height: 64px; }
.neon-drip i:nth-child(3) { animation-delay: -1.6s; height: 118px; }

.subwoofer {
    position: absolute;
    right: 11vw;
    top: calc(var(--rail-y) - 164px);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 2px solid rgba(46,141,186,.5);
    background: radial-gradient(circle, rgba(199,255,90,.08) 0 14%, rgba(5,4,9,.9) 15% 30%, rgba(46,141,186,.14) 31% 46%, rgba(5,4,9,.9) 47%);
    box-shadow: 0 0 60px rgba(46,141,186,.18);
    animation: speaker 1.4s infinite ease-in-out;
}
.subwoofer span { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(241,233,210,.13); }
.subwoofer span:nth-child(2) { inset: 34%; }
.subwoofer span:nth-child(3) { inset: 46%; background: rgba(199,255,90,.14); }
.wave-readout {
    position: absolute;
    right: 13vw;
    top: calc(var(--rail-y) + 96px);
}
.floor-grate {
    position: absolute;
    left: 38vw;
    bottom: 4vh;
    width: 46vw;
    height: 90px;
    transform: skewX(-18deg);
    background: rgba(5,4,9,.44);
    border: 1px solid rgba(46,141,186,.22);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 12px;
}
.floor-grate i { background: linear-gradient(180deg, rgba(46,141,186,.32), rgba(5,4,9,.85)); }
.match-tab {
    position: absolute;
    left: 8vw;
    bottom: 8vh;
    border: 0;
    padding: 13px 20px;
    background: var(--brass);
    color: var(--cellar-black);
    font-family: "Space Mono", monospace;
    text-transform: lowercase;
    cursor: pointer;
    clip-path: polygon(0 0, 94% 0, 100% 100%, 4% 100%);
}

@keyframes railBass { from { transform: translateY(-1px) scaleY(1); } to { transform: translateY(1px) scaleY(1.18); } }
@keyframes drip { 0%, 100% { opacity: .35; transform: scaleY(.78); } 50% { opacity: 1; transform: scaleY(1.08); } }
@keyframes speaker { 0%, 100% { transform: scale(.985); } 50% { transform: scale(1.015); } }

@media (max-width: 760px) {
    :root { --rail-y: 77vh; }
    .floor-buttons { right: 12px; }
    .receipt-strip { width: 82vw; left: 8vw; right: auto; }
    .artifact, .shelf-labels, .subwoofer { transform: scale(.78); transform-origin: top right; }
    .subwoofer { right: 1vw; }
    .bottle-feet { left: 8vw; }
    .whisper { right: auto; left: 8vw; top: 12vh; }
}