:root {
    --obsidian: #0B090A;
    --smoked: #2A2B31;
    --orange: #D46A2C;
    --seal: #8F1D2C;
    --green: #203C2E;
    --oxblood: #5A1721;
    --paper: #E7D8BA;
    --brass: #B8893B;
    --display: "Cormorant Garamond", serif;
    --body: "Manrope", sans-serif;
    --mono: "Chivo Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--paper);
    background: var(--obsidian);
    font-family: var(--body);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 76% 18%, rgba(32, 60, 46, .45), transparent 21rem),
        radial-gradient(circle at 18% 76%, rgba(90, 23, 33, .46), transparent 28rem),
        repeating-linear-gradient(102deg, rgba(231, 216, 186, .025) 0 1px, transparent 1px 13px),
        linear-gradient(90deg, rgba(0,0,0,.86), transparent 45%, rgba(0,0,0,.78));
    z-index: 1;
}

.cursor-pool {
    position: fixed;
    width: 28rem;
    height: 28rem;
    margin: -14rem 0 0 -14rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(212, 106, 44, .22), rgba(184, 137, 59, .08) 35%, transparent 67%);
    mix-blend-mode: screen;
    opacity: .55;
    z-index: 3;
    transform: translate3d(50vw, 50vh, 0);
}

.smoke {
    position: fixed;
    width: 38vw;
    height: 70vh;
    border-radius: 50%;
    filter: blur(34px);
    opacity: .18;
    pointer-events: none;
    z-index: 2;
    animation: drift 18s ease-in-out infinite alternate;
}

.smoke-a { left: -10vw; top: 8vh; background: rgba(231, 216, 186, .22); }
.smoke-b { right: -14vw; bottom: -4vh; background: rgba(42, 43, 49, .9); animation-duration: 23s; }

.evidence-string {
    position: fixed;
    left: 4.8vw;
    top: 0;
    width: 16vw;
    height: 100vh;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}

.evidence-string path {
    fill: none;
    stroke: var(--seal);
    stroke-width: .72;
    stroke-linecap: round;
    filter: drop-shadow(0 0 9px rgba(143, 29, 44, .7));
    stroke-dasharray: 9 8;
    animation: stringPulse 9s linear infinite;
}

.case-tabs {
    position: fixed;
    right: 2.1rem;
    top: 2rem;
    z-index: 20;
    display: flex;
    gap: .42rem;
    transform: rotate(1deg);
}

.case-tabs button,
.key-tag {
    border: 1px solid rgba(184, 137, 59, .55);
    background: rgba(11, 9, 10, .78);
    color: var(--paper);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: .62rem .72rem;
    cursor: pointer;
    box-shadow: inset 0 0 18px rgba(184, 137, 59, .08), 0 10px 30px rgba(0,0,0,.38);
    transition: transform .32s ease, background .32s ease, color .32s ease;
}

.case-tabs button.active,
.case-tabs button:hover,
.key-tag:hover {
    background: var(--paper);
    color: var(--oxblood);
    transform: translateY(4px);
}

.scene {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    display: grid;
    overflow: hidden;
    padding: 8vh 8vw;
    background:
        linear-gradient(128deg, rgba(11, 9, 10, .98), rgba(11, 9, 10, .76) 48%, rgba(42, 43, 49, .28)),
        radial-gradient(circle at var(--mx, 70%) var(--my, 48%), rgba(212, 106, 44, .12), transparent 24rem);
}

.scene::after {
    content: attr(data-verdict);
    position: absolute;
    right: -4vw;
    bottom: 3vh;
    font-family: var(--display);
    font-size: clamp(6rem, 16vw, 18rem);
    font-weight: 700;
    color: rgba(231, 216, 186, .035);
    letter-spacing: .06em;
    transform: skewX(-8deg);
    z-index: -1;
}

.mono-label {
    font-family: var(--mono);
    font-size: .7rem;
    line-height: 1.5;
    letter-spacing: .16em;
    color: var(--brass);
    text-transform: uppercase;
    margin: 0 0 1rem;
}

h1, h2, h3 { font-family: var(--display); margin: 0; }

h1 {
    font-size: clamp(4rem, 13vw, 13rem);
    font-weight: 600;
    line-height: .78;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--paper);
    text-shadow: 0 2px 0 rgba(184, 137, 59, .45), 0 22px 48px rgba(0,0,0,.75);
}

h1 span { color: var(--orange); }

h2 {
    font-size: clamp(2.8rem, 7vw, 7.4rem);
    line-height: .88;
    font-weight: 600;
    text-transform: uppercase;
}

h3 { font-size: clamp(2.4rem, 6vw, 6rem); font-style: italic; }

p { line-height: 1.75; font-size: clamp(.98rem, 1.28vw, 1.22rem); }

.scene-intro { place-items: center end; }

.brass-plaque {
    width: min(72vw, 980px);
    padding: clamp(2rem, 5vw, 4.8rem);
    border: 1px solid rgba(184, 137, 59, .72);
    background:
        linear-gradient(120deg, rgba(184, 137, 59, .22), rgba(11,9,10,.8) 28%, rgba(231,216,186,.07) 50%, rgba(90,23,33,.35)),
        repeating-linear-gradient(0deg, transparent 0 8px, rgba(184,137,59,.045) 8px 9px);
    box-shadow: inset 0 0 0 3px rgba(184, 137, 59, .08), 0 42px 100px rgba(0,0,0,.7);
    transform: rotate(-1.8deg);
}

.engraved { max-width: 34rem; margin: 1.4rem 0 0 auto; color: rgba(231, 216, 186, .74); }

.lamp { position: absolute; left: 15vw; top: 8vh; width: 18rem; height: 24rem; }
.lamp-shade { position: absolute; left: 2rem; top: 0; width: 14rem; height: 5rem; background: linear-gradient(#203C2E, #0f2118); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); border-bottom: 4px solid var(--brass); animation: breathe 4.8s ease-in-out infinite; }
.lamp-stem { position: absolute; left: 8.6rem; top: 5rem; width: .35rem; height: 12rem; background: var(--brass); }
.lamp-glow { position: absolute; left: -5rem; top: 2rem; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(32, 60, 46, .64), transparent 58%); filter: blur(8px); animation: breathe 4.8s ease-in-out infinite; }

.bench,
.rail-transform {
    position: absolute;
    left: 0;
    right: 0;
    height: 16vh;
    bottom: 12vh;
    background: linear-gradient(180deg, #2A2B31, #0B090A 35%, #050404 70%, #5A1721);
    border-top: 2px solid rgba(184,137,59,.58);
    box-shadow: 0 -20px 60px rgba(0,0,0,.74), inset 0 10px 30px rgba(184,137,59,.08);
    transform-origin: center bottom;
}

.robe-folds { position: absolute; inset: auto 0 0; height: 38vh; background: repeating-linear-gradient(100deg, rgba(42,43,49,.2) 0 28px, rgba(0,0,0,.42) 28px 54px), linear-gradient(#141115, #050404); clip-path: polygon(0 22%,100% 0,100% 100%,0 100%); z-index: -1; }

.wax-seal {
    position: absolute;
    right: 13vw;
    bottom: 16vh;
    width: 6.8rem;
    height: 6.8rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 2.2rem;
    color: var(--paper);
    background: radial-gradient(circle at 35% 35%, #8F1D2C, #5A1721 72%);
    box-shadow: 0 0 0 8px rgba(143,29,44,.12), 0 24px 45px rgba(0,0,0,.6);
    animation: waxPulse 3.2s ease-in-out infinite;
}

.verdict-tab {
    position: absolute;
    left: 11vw;
    top: 19vh;
    z-index: 10;
    padding: .78rem 1.2rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .18em;
    color: var(--oxblood);
    background: var(--paper);
    box-shadow: 0 14px 35px rgba(0,0,0,.5);
    transform: rotate(-7deg) translateY(20px);
    opacity: 0;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.scene.in-view .verdict-tab { opacity: 1; transform: rotate(-7deg) translateY(0); }

.scene-bench { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 6vw; }
.rail-transform { bottom: 27vh; height: 10vh; transform: perspective(700px) rotateX(48deg); }

.docket-card,
.sealed-folder,
.coaster-note,
.verdict-form {
    position: relative;
    max-width: 43rem;
    padding: clamp(1.8rem, 4vw, 4rem);
    color: var(--obsidian);
    background: linear-gradient(135deg, var(--paper), #d4bd8e);
    box-shadow: 0 38px 90px rgba(0,0,0,.62);
}

.folder-card { transform: rotate(-4deg); clip-path: polygon(0 9%, 24% 9%, 29% 0, 100% 0, 100% 100%, 0 100%); }
.folder-slit { position: absolute; inset: 32% 0 auto; height: 1.1rem; background: rgba(90,23,33,.18); box-shadow: inset 0 3px 8px rgba(0,0,0,.16); }
.stamp { display: inline-block; margin-top: 1.5rem; border: 3px solid var(--seal); color: var(--seal); padding: .5rem .9rem; font-family: var(--mono); letter-spacing: .16em; transform: rotate(-6deg); }

.tasting-plinth { min-height: 58vh; position: relative; background: radial-gradient(ellipse at center, rgba(184,137,59,.22), transparent 56%); }
.coupe-glass { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 17rem; height: 26rem; filter: drop-shadow(0 35px 40px rgba(0,0,0,.78)); }
.bowl { position: absolute; top: 1rem; left: 1rem; width: 15rem; height: 8.5rem; border: 2px solid rgba(231,216,186,.55); border-radius: 1rem 1rem 9rem 9rem; background: linear-gradient(160deg, rgba(231,216,186,.16), rgba(42,43,49,.22)); overflow: hidden; }
.amber { position: absolute; left: 2.2rem; top: 6.2rem; width: 12.8rem; height: 3.1rem; background: linear-gradient(90deg, #B8893B, #D46A2C); border-radius: 0 0 6rem 6rem; opacity: .78; }
.stem { position: absolute; left: 8.28rem; top: 9.4rem; width: .48rem; height: 10rem; background: rgba(231,216,186,.55); }
.base { position: absolute; left: 4.8rem; bottom: 2rem; width: 7.5rem; height: .7rem; background: rgba(231,216,186,.55); border-radius: 50%; }
.annotation { position: absolute; right: 7%; bottom: 17%; color: var(--brass); font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }

.scene-files { grid-template-columns: 1fr .82fr; align-items: center; gap: 5vw; background-color: var(--oxblood); }
.envelope-stack { position: relative; transform: rotate(3deg); }
.sealed-folder { clip-path: polygon(0 0, 64% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
.tab-notch { position: absolute; right: 0; top: 0; background: var(--brass); color: var(--obsidian); padding: .55rem 1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; }
.ruling-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.ruling-list li { border-top: 1px solid rgba(90,23,33,.28); padding-top: 1rem; line-height: 1.5; }
.ruling-list span { font-family: var(--mono); color: var(--seal); margin-right: .8rem; }
.subpoena-slip { position: absolute; right: -3rem; bottom: -3rem; max-width: 19rem; padding: 1rem; background: #0B090A; color: var(--paper); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); border-left: 4px solid var(--seal); }
.mirror-plaque { padding: 3rem; border: 1px solid rgba(231,216,186,.18); background: linear-gradient(135deg, rgba(42,43,49,.82), rgba(11,9,10,.44), rgba(231,216,186,.1)); box-shadow: inset 0 0 80px rgba(231,216,186,.05); transform: skewY(-5deg); }

.scene-witness { grid-template-columns: .9fr 1fr; align-items: center; gap: 6vw; }
.bottle-lineup { display: flex; align-items: end; gap: 2vw; height: 65vh; padding-left: 5vw; }
.bottle { width: clamp(4rem, 8vw, 7rem); height: 58%; border: 1px solid rgba(184,137,59,.44); background: linear-gradient(90deg, rgba(11,9,10,.98), rgba(42,43,49,.7), rgba(231,216,186,.08)); border-radius: 1.4rem 1.4rem .35rem .35rem; position: relative; box-shadow: 0 32px 55px rgba(0,0,0,.62); }
.bottle::before { content: ""; position: absolute; left: 32%; top: -20%; width: 36%; height: 22%; background: inherit; border: inherit; border-bottom: 0; }
.bottle span { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); font-family: var(--mono); color: var(--brass); }
.bottle.tall { height: 72%; }
.bottle.stout { height: 48%; width: clamp(5rem, 9vw, 8rem); }
.bottle.narrow { height: 64%; width: clamp(3.4rem, 6vw, 5rem); }
.bottle.dark { background: linear-gradient(90deg, #5A1721, #0B090A 72%); }
.coaster-note { transform: rotate(2.5deg); }
.coaster-ring { width: 12rem; height: 12rem; border-radius: 50%; border: 1.2rem double rgba(143,29,44,.24); margin-top: 2rem; }
.jury-tokens { position: absolute; right: 10vw; bottom: 8vh; display: flex; gap: .7rem; flex-wrap: wrap; width: 24rem; }
.jury-tokens span { border-radius: 50%; width: 5rem; height: 5rem; display: grid; place-items: center; color: var(--obsidian); background: var(--brass); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; box-shadow: 0 14px 30px rgba(0,0,0,.5); }

.scene-served { grid-template-columns: 1fr .95fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 30% 50%, rgba(212,106,44,.16), transparent 22rem), var(--obsidian); }
.final-still-life { height: 70vh; position: relative; }
.heavy-glass { position: absolute; left: 21%; top: 18%; width: clamp(13rem, 23vw, 22rem); height: clamp(14rem, 24vw, 23rem); border: 2px solid rgba(231,216,186,.48); border-radius: 2rem 2rem 4rem 4rem; background: linear-gradient(140deg, rgba(231,216,186,.12), rgba(42,43,49,.44)); box-shadow: inset 0 -4rem 4rem rgba(212,106,44,.24), 0 40px 80px rgba(0,0,0,.72); }
.heavy-glass span { position: absolute; inset: auto 1rem 1.2rem; height: 38%; border-radius: 0 0 3rem 3rem; background: linear-gradient(90deg, #B8893B, #D46A2C, #8F1D2C); opacity: .72; }
.citrus-peel { position: absolute; left: 49%; top: 21%; width: 9rem; height: 4rem; border-top: .75rem solid var(--orange); border-radius: 50%; transform: rotate(-25deg); }
.bar-spoon { position: absolute; left: 17%; top: 11%; width: .32rem; height: 35rem; background: linear-gradient(var(--brass), rgba(231,216,186,.5)); transform: rotate(24deg); }
.bar-spoon::after { content: ""; position: absolute; bottom: -2rem; left: -1rem; width: 2.3rem; height: 3.3rem; border-radius: 50%; background: var(--brass); }
.matchbook { position: absolute; right: 13%; bottom: 16%; padding: 1.2rem 1.5rem; background: var(--seal); color: var(--paper); font-family: var(--display); font-size: 1.8rem; line-height: .9; transform: rotate(8deg); box-shadow: 0 20px 35px rgba(0,0,0,.5); }
.verdict-form { background: linear-gradient(135deg, #E7D8BA, #cfae6a); }
.hanging-tag { position: absolute; right: 15vw; top: 18vh; padding: 1.2rem 2rem; background: var(--green); border: 1px solid var(--brass); color: var(--paper); font-family: var(--mono); letter-spacing: .18em; transform: translateY(-140vh) rotate(10deg); transition: transform .85s cubic-bezier(.2,.9,.24,1.18); box-shadow: 0 20px 45px rgba(0,0,0,.55); }
.hanging-tag.dropped { transform: translateY(0) rotate(10deg); }

.reveal-card { opacity: 0; transform: translateY(5rem) rotate(var(--r, -2deg)); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.scene.in-view .reveal-card { opacity: 1; transform: translateY(0) rotate(var(--r, -2deg)); }
.scene.in-view .folder-card { --r: -4deg; }
.scene.in-view .sealed-folder { --r: 0deg; }
.scene.in-view .coaster-note { --r: 2.5deg; }
.scene.in-view .verdict-form { --r: -1deg; }

@keyframes breathe { 0%,100% { opacity: .72; filter: brightness(.82); } 50% { opacity: 1; filter: brightness(1.28); } }
@keyframes drift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(8vw, -6vh, 0) rotate(12deg); } }
@keyframes waxPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes stringPulse { to { stroke-dashoffset: -90; } }

@media (max-width: 900px) {
    .case-tabs { left: 1rem; right: 1rem; top: 1rem; overflow-x: auto; }
    .scene { padding: 14vh 6vw 8vh; grid-template-columns: 1fr; gap: 2rem; }
    .brass-plaque { width: 100%; }
    .lamp { left: -3rem; top: 9vh; opacity: .68; transform: scale(.7); }
    .wax-seal { right: 7vw; bottom: 11vh; }
    .scene-bench, .scene-files, .scene-witness, .scene-served { grid-template-columns: 1fr; }
    .bottle-lineup, .final-still-life { height: 46vh; }
    .jury-tokens { position: relative; right: auto; bottom: auto; width: auto; }
}