:root {
    --walnut: #3A2418;
    --cream: #F3E6CF;
    --persimmon: #C65A32;
    --brass: #B98B45;
    --teal: #214E4A;
    --amber: #F2B84B;
    --night: #111C2E;
    --mauve: #7B5F68;
    --scroll: 0;
    --lamp: 0;
    --mx: 50vw;
    --my: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--walnut);
    background: var(--cream);
    font-family: "Plus Jakarta Sans", sans-serif;
    overflow-x: hidden;
}

.grain-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .22;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(242,184,75,.28), transparent 18rem),
        repeating-linear-gradient(90deg, rgba(58,36,24,.05) 0 1px, transparent 1px 9px),
        radial-gradient(circle, rgba(58,36,24,.12) 0 1px, transparent 1px 100%);
    background-size: auto, auto, 17px 17px;
    mix-blend-mode: multiply;
}

.drawer-nav {
    position: fixed;
    left: 3vw;
    bottom: 5vh;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.drawer-pull {
    position: relative;
    width: 7.7rem;
    height: 1.36rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--walnut);
    text-decoration: none;
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #7b5f2f, var(--brass), #f6d987, var(--brass), #69451f);
    box-shadow: inset 0 -2px 3px rgba(58,36,24,.35), 0 7px 18px rgba(58,36,24,.22);
    overflow: hidden;
}

.drawer-pull::before,
.brass-pulls i::before,
.engraved-pull::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(calc(var(--shine, -120%) * 1));
    background: linear-gradient(110deg, transparent 20%, rgba(255,245,198,.78), transparent 60%);
    transition: transform .45s ease;
}

.drawer-pull.is-active { transform: translateX(1rem); }
.drawer-pull span { position: relative; z-index: 1; }

.room {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: 8vh 7vw;
}

.room::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24vh;
    height: 7px;
    background: linear-gradient(90deg, transparent, rgba(58,36,24,.16), rgba(58,36,24,.04));
}

.vertical-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.15rem;
    background: repeating-linear-gradient(180deg, #2a170f 0 9px, #4a2c1b 10px 17px, #301b11 18px 34px);
    box-shadow: 10px 0 30px rgba(58,36,24,.2);
}

.rail-one { left: 28vw; }
.rail-two { left: 34vw; width: .55rem; opacity: .85; }

.foyer-room {
    background:
        radial-gradient(circle at 15% 40%, rgba(242,184,75,.34), transparent 27rem),
        linear-gradient(160deg, var(--cream) 0%, #f7ecd8 55%, rgba(123,95,104,.18) 100%);
}

.lamp-glow {
    position: absolute;
    width: 44vmin;
    height: 44vmin;
    border-radius: 50%;
    filter: blur(16px);
    background: radial-gradient(circle, rgba(242,184,75,.72), rgba(242,184,75,.22) 44%, transparent 70%);
    transform: scale(calc(1 + var(--lamp) * .08));
}

.foyer-glow { left: 6vw; top: 15vh; animation: breathe 5.8s ease-in-out infinite; }

@keyframes breathe { 50% { transform: scale(1.12); opacity: .82; } }

.cabinet-door {
    position: absolute;
    bottom: 16vh;
    width: 31vw;
    height: 42vh;
    background: linear-gradient(110deg, rgba(58,36,24,.92), rgba(75,44,25,.86));
    border: 1px solid rgba(185,139,69,.28);
    box-shadow: 0 30px 80px rgba(58,36,24,.26);
    transform: translateX(calc(var(--scroll) * -12vw));
}

.left-door { left: 29vw; border-radius: 1.2rem 0 0 1.2rem; }
.right-door { right: 4vw; border-radius: 0 1.2rem 1.2rem 0; transform: translateX(calc(var(--scroll) * 12vw)); }

.room-caption {
    position: absolute;
    top: 8vh;
    right: 10vw;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .72rem;
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--mauve);
}

.credenza {
    position: absolute;
    left: 16vw;
    right: 5vw;
    bottom: 11vh;
    height: 27vh;
    border-radius: 1.8rem 1.8rem .7rem .7rem;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 15px),
        linear-gradient(135deg, #2b170f, var(--walnut) 42%, #5c3621 100%);
    box-shadow: 0 34px 60px rgba(58,36,24,.32);
}

.credenza::before,
.low-credenza::before,
.silhouette-console::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: -2.2rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(58,36,24,.24);
    filter: blur(12px);
}

.nameplate {
    position: absolute;
    left: 7%;
    bottom: 38%;
    padding: .42rem 2rem .58rem;
    min-width: 48vw;
    border-radius: 999px;
    color: var(--brass);
    font-family: "Gloock", serif;
    font-size: clamp(3.2rem, 11vw, 10rem);
    letter-spacing: -.07em;
    line-height: .9;
    background: linear-gradient(90deg, rgba(17,28,46,.24), rgba(185,139,69,.14), rgba(17,28,46,.2));
    box-shadow: inset 0 0 0 1px rgba(185,139,69,.42), inset 0 10px 25px rgba(0,0,0,.28);
    text-shadow: 0 2px 0 rgba(255,224,147,.16), 0 -2px 0 rgba(58,36,24,.5);
}

.dot-switch { color: var(--amber); text-shadow: 0 0 25px rgba(242,184,75,.88); }

.brass-pulls {
    position: absolute;
    right: 6vw;
    bottom: 4.8vh;
    display: flex;
    gap: 1.7rem;
}

.brass-pulls i {
    position: relative;
    display: block;
    width: 4.6rem;
    height: .78rem;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, #70501f, var(--brass), #ffe096, var(--brass));
}

.drawer-line { position: absolute; left: 0; right: 0; top: 48%; height: 1px; background: rgba(185,139,69,.34); }
.foyer-note { position: absolute; right: 10vw; bottom: 43vh; }
.room-note { font-family: "Fraunces", serif; font-size: clamp(1.4rem, 3vw, 3.6rem); color: var(--mauve); }
.floor-shadow { position: absolute; left: 8vw; right: 5vw; bottom: 4vh; height: 7vh; border-radius: 50%; background: rgba(58,36,24,.14); filter: blur(18px); }

.console-room { background: linear-gradient(180deg, #f6ead5, var(--cream) 50%, #e9d7bd); }
.room-number { font-family: "Fraunces", serif; font-size: clamp(4rem, 12vw, 12rem); color: rgba(185,139,69,.42); line-height: .8; }
.room h1 { margin: 0; font-family: "Gloock", serif; font-size: clamp(3rem, 8vw, 8rem); font-weight: 400; letter-spacing: -.05em; }

.slat-wall {
    position: absolute;
    left: 34vw;
    bottom: 13vh;
    height: 68vh;
    display: flex;
    gap: .8rem;
    align-items: flex-end;
}

.slat {
    width: clamp(2.8rem, 5vw, 5rem);
    height: var(--h, 56vh);
    border-radius: 1rem 1rem .25rem .25rem;
    background: repeating-linear-gradient(180deg, #2b170f 0 8px, #4f2e1d 9px 15px, #382013 16px 28px);
    transform: translateY(var(--slatShift, 0));
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.slat:nth-child(2) { --h: 64vh; }
.slat:nth-child(3) { --h: 46vh; }
.slat:nth-child(4) { --h: 70vh; }
.slat:nth-child(5) { --h: 52vh; }
.slat:nth-child(6) { --h: 61vh; }
.slat span { writing-mode: vertical-rl; display: block; margin: 1.2rem auto; color: var(--brass); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; clip-path: inset(0 0 var(--clip, 100%) 0); transition: clip-path .7s ease; }
.console-room.is-active .slat span { --clip: 0%; }

.smoked-panel { position: absolute; right: 7vw; top: 24vh; width: 26vw; padding: 2rem; border-radius: 1.4rem; color: var(--cream); background: linear-gradient(135deg, rgba(33,78,74,.74), rgba(17,28,46,.48)); box-shadow: inset 0 0 0 1px rgba(243,230,207,.18), 0 24px 60px rgba(17,28,46,.18); backdrop-filter: blur(9px); }
.smoked-panel p { margin: 0; line-height: 1.75; }
.speaker-cloth { position: absolute; left: 10vw; bottom: 18vh; width: 17vw; height: 21vh; border-radius: 1rem; background: radial-gradient(circle, rgba(185,139,69,.5) 0 1px, transparent 1.8px), var(--teal); background-size: 10px 10px; box-shadow: 0 24px 55px rgba(58,36,24,.18); }
.low-credenza { position: absolute; left: 7vw; right: 7vw; bottom: 6vh; height: 9vh; border-radius: 1rem; background: var(--walnut); }
.low-credenza span { position: absolute; top: 2vh; width: 4rem; height: .65rem; border-radius: 999px; background: var(--brass); }
.low-credenza span:nth-child(1) { left: 28%; } .low-credenza span:nth-child(2) { left: 54%; } .low-credenza span:nth-child(3) { left: 80%; }

.lamp-room { background: radial-gradient(circle at 57% 50%, rgba(242,184,75,.35), transparent 24rem), linear-gradient(120deg, var(--cream), #ebd8bd 62%, rgba(123,95,104,.26)); }
.lamp-stage { position: absolute; left: 39vw; top: 18vh; width: 46vw; height: 62vh; }
.lamp-halo { position: absolute; inset: 4% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(242,184,75,.72), rgba(242,184,75,.24) 48%, transparent 70%); filter: blur(3px); transform: scale(calc(1 + var(--lamp) * .18)); }
.lamp-shade { position: absolute; left: 34%; top: 22%; width: 15rem; height: 10rem; border-radius: 50% 50% 18% 18%; background: linear-gradient(180deg, #ffe6a2, var(--amber) 42%, #c7892b); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); box-shadow: 0 0 55px rgba(242,184,75,.65); }
.lamp-switch { position: absolute; left: 49%; bottom: 18%; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 10px rgba(185,139,69,.12), 0 0 36px rgba(242,184,75,.8); cursor: pointer; }
.lamp-switch span { display: block; width: .78rem; height: .78rem; margin: auto; border-radius: 50%; background: var(--amber); }
.orbit-note { position: absolute; font-family: "Fraunces", serif; color: var(--walnut); }
.orbit-one { left: 6%; top: 22%; font-size: 2rem; }
.orbit-two { right: 3%; top: 45%; font-size: 1.55rem; }
.orbit-three { left: 18%; bottom: 12%; font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; color: var(--mauve); }
blockquote { position: absolute; left: 8vw; bottom: 17vh; width: 29vw; margin: 0; font-family: "Fraunces", serif; font-size: clamp(1.8rem, 4vw, 4.4rem); line-height: 1; color: var(--persimmon); }
.glass-strip { position: absolute; right: 0; top: 0; width: 16vw; height: 100%; background: linear-gradient(90deg, transparent, rgba(33,78,74,.32)); }

.record-room { background: linear-gradient(180deg, #ead8be 0%, var(--cream) 45%, #d9bea0 100%); }
.record-table { position: absolute; left: 7vw; bottom: 12vh; width: 34vw; height: 38vh; border-radius: 2rem; background: linear-gradient(145deg, var(--walnut), #57331f); box-shadow: 0 32px 80px rgba(58,36,24,.28); }
.vinyl { position: absolute; left: 14%; top: 12%; width: 28vmin; height: 28vmin; border-radius: 50%; background: repeating-radial-gradient(circle, var(--night) 0 4px, #18243a 5px 6px, var(--night) 7px 10px); box-shadow: inset 0 0 0 2rem rgba(0,0,0,.12); animation: spin 18s linear infinite; }
.vinyl span { position: absolute; inset: 42%; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1.2rem var(--brass); }
@keyframes spin { to { transform: rotate(360deg); } }
.tonearm { position: absolute; right: 18%; top: 15%; width: .55rem; height: 24vmin; border-radius: 999px; background: var(--brass); transform: rotate(31deg); transform-origin: top; }
.spine-rack { position: absolute; right: 5vw; bottom: 10vh; height: 70vh; display: flex; align-items: flex-end; gap: .9rem; }
.record-spine { width: clamp(4.2rem, 7vw, 7rem); height: 52vh; padding: 1rem .75rem; border-radius: .7rem .7rem .18rem .18rem; background: linear-gradient(180deg, var(--teal), #163330); color: var(--cream); transform: translateY(var(--spineShift, 0)); box-shadow: 0 22px 45px rgba(58,36,24,.2); }
.record-spine.tall { height: 66vh; } .record-spine.mid { height: 57vh; } .record-spine.short { height: 43vh; } .record-spine.persimmon { background: linear-gradient(180deg, var(--persimmon), #8e371f); }
.record-spine b { display: block; font-family: "Gloock", serif; font-size: 2.2rem; writing-mode: vertical-rl; }
.record-spine span { display: block; margin-top: 1rem; font-size: .66rem; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
.rack-note { position: absolute; left: 44vw; top: 30vh; width: 18vw; font-family: "Fraunces", serif; font-size: 1.8rem; color: var(--mauve); }

.window-room { min-height: 100vh; color: var(--cream); background: radial-gradient(circle at 74% 40%, rgba(242,184,75,.18), transparent 18rem), linear-gradient(180deg, var(--night), #0b111d 72%, var(--walnut)); }
.night-window { position: absolute; right: 9vw; top: 10vh; width: 42vw; height: 57vh; border-radius: 1.2rem; background: linear-gradient(135deg, rgba(33,78,74,.28), rgba(17,28,46,.76)); box-shadow: inset 0 0 0 1px rgba(243,230,207,.22), 0 40px 100px rgba(0,0,0,.34); overflow: hidden; }
.window-reflection { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 18%, rgba(243,230,207,.12) 19% 24%, transparent 25% 55%, rgba(242,184,75,.18) 56% 58%, transparent 59%); }
.window-light { position: absolute; right: 18%; bottom: 20%; width: 2rem; height: 2rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 46px var(--amber); }
.window-bars { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(243,230,207,.16) 49% 51%, transparent 52%), linear-gradient(180deg, transparent 48%, rgba(243,230,207,.16) 49% 51%, transparent 52%); }
.silhouette-console { position: absolute; left: 4vw; right: 8vw; bottom: 8vh; height: 18vh; border-radius: 1rem 1rem .2rem .2rem; background: rgba(12,8,6,.72); }
.window-room h1 { position: absolute; left: 8vw; top: 18vh; color: var(--cream); }
.window-room p { position: absolute; left: 9vw; top: 38vh; font-family: "Fraunces", serif; color: var(--amber); font-size: 2rem; }
.engraved-pull { position: absolute; left: 9vw; bottom: 19vh; padding: .7rem 2rem; border-radius: 999px; color: var(--walnut); text-decoration: none; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; background: linear-gradient(90deg, #76501d, var(--brass), #f5da91, var(--brass)); overflow: hidden; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.closing-monogram { position: absolute; right: 12vw; bottom: 10vh; font-family: "Gloock", serif; font-size: clamp(3rem, 8vw, 8rem); color: rgba(243,230,207,.18); }
.closing-monogram span { color: var(--amber); text-shadow: 0 0 28px rgba(242,184,75,.8); }

body.lamp-on { --lamp: 1; }
body.lamp-on .lamp-room { background: radial-gradient(circle at 57% 50%, rgba(242,184,75,.55), transparent 31rem), linear-gradient(120deg, var(--cream), #f2ddb8 62%, rgba(123,95,104,.18)); }

@media (max-width: 800px) {
    .drawer-nav { left: 1rem; bottom: 1rem; transform: scale(.82); transform-origin: bottom left; }
    .room { padding: 7vh 6vw 18vh; }
    .rail-one { left: 18vw; } .rail-two { left: 24vw; }
    .credenza { left: 8vw; right: 4vw; }
    .nameplate { min-width: 70vw; font-size: 18vw; }
    .smoked-panel, blockquote, .rack-note { position: relative; width: auto; left: auto; right: auto; top: auto; bottom: auto; margin-top: 2rem; }
    .slat-wall, .lamp-stage, .record-table, .spine-rack, .night-window { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 3rem; }
    .spine-rack { height: 58vh; overflow: hidden; }
    .window-room h1, .window-room p, .engraved-pull { left: 6vw; }
}