:root {
    --ledger-ink: #15121E;
    --oxide-verdigris: #2F6F5E;
    --wax-red: #B13A32;
    --receipt-bone: #F1E6D2;
    --token-brass: #D1A84B;
    --carbon-violet: #4A3B73;
    --mint-phosphor: #A7F0D2;
    --title-font: "Fraunces", serif;
    --label-font: "Syne", sans-serif;
    --text-font: "Newsreader", serif;
    --index-font: "Inter", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ledger-ink); }

body {
    margin: 0;
    color: var(--receipt-bone);
    background:
        radial-gradient(circle at 15% 20%, rgba(74, 59, 115, .48), transparent 32rem),
        radial-gradient(circle at 88% 35%, rgba(47, 111, 94, .26), transparent 30rem),
        linear-gradient(180deg, #15121E 0%, #1e1830 42%, #15121E 100%);
    font-family: var(--text-font);
    overflow-x: hidden;
}

.grain,
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

.grain {
    opacity: .24;
    mix-blend-mode: overlay;
    background-image:
        linear-gradient(90deg, rgba(241,230,210,.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(241,230,210,.045) 1px, transparent 1px),
        radial-gradient(circle, rgba(209,168,75,.08) 1px, transparent 1.5px);
    background-size: 31px 31px, 37px 37px, 13px 13px;
}

.vignette {
    box-shadow: inset 0 0 10rem 4rem rgba(0,0,0,.75);
    z-index: 99;
}

.room {
    min-height: 100vh;
    position: relative;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 7rem 8vw;
    isolation: isolate;
}

.room::before {
    content: "";
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(241,230,210,.09);
    pointer-events: none;
}

.exhibit-map {
    position: fixed;
    top: 50%;
    right: 1.4rem;
    transform: translateY(-50%);
    z-index: 90;
    display: grid;
    gap: .45rem;
    padding: .9rem .75rem;
    background: rgba(21,18,30,.72);
    border: 1px solid rgba(241,230,210,.18);
    box-shadow: 0 1.4rem 4rem rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
}

.exhibit-map a,
.map-pin,
.room-label,
.specimen-tags span,
.artifact b,
.artifact small,
.receipt-veil span,
.drawer span,
.poetic-cue {
    font-family: var(--label-font);
    text-transform: uppercase;
    letter-spacing: .13em;
}

.map-pin { color: var(--token-brass); font-size: .62rem; margin-bottom: .3rem; }

.exhibit-map a {
    color: rgba(241,230,210,.62);
    text-decoration: none;
    font-size: .7rem;
    border-left: 2px solid rgba(241,230,210,.16);
    padding: .28rem .6rem;
    transition: color .35s ease, border-color .35s ease, transform .35s ease;
}

.exhibit-map a.active {
    color: var(--mint-phosphor);
    border-color: var(--wax-red);
    transform: translateX(-.25rem);
}

h1,
h2 {
    font-family: var(--title-font);
    font-weight: 650;
    line-height: .9;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(4.5rem, 13vw, 14rem); max-width: 11ch; }
h2 { font-size: clamp(3rem, 8vw, 9rem); max-width: 10ch; }

p { font-size: clamp(1.15rem, 1.7vw, 1.75rem); line-height: 1.35; }

.room-label {
    position: absolute;
    top: 2.2rem;
    left: 8vw;
    color: var(--token-brass);
    font-size: .75rem;
    z-index: 3;
}

.stage-ghosts {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: .75;
}

.ghost-token {
    position: absolute;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid rgba(209,168,75,.5);
    background: radial-gradient(circle at 30% 30%, rgba(241,230,210,.45), rgba(209,168,75,.18) 42%, transparent 70%);
    filter: blur(.1px);
}

.ghost-token-one { left: 7vw; top: 25vh; }
.ghost-token-two { right: 12vw; bottom: 18vh; width: 2.6rem; height: 2.6rem; border-color: rgba(167,240,210,.45); }
.ghost-thread { position: absolute; left: 8vw; top: 52vh; width: 84vw; height: 2px; background: linear-gradient(90deg, transparent, var(--wax-red), transparent); transform: rotate(-7deg) scaleX(.55); opacity: .45; }

.vestibule { padding-top: 12vh; }

.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 23vw;
    background: repeating-linear-gradient(90deg, rgba(74,59,115,.35), rgba(74,59,115,.58) 2rem, rgba(21,18,30,.44) 2.4rem);
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    opacity: .72;
    z-index: -1;
}
.curtain-left { left: 0; }
.curtain-right { right: 0; transform: scaleX(-1); }

.title-strips {
    position: absolute;
    top: 14vh;
    left: 8vw;
    display: flex;
    gap: .5rem;
    z-index: 5;
}

.title-strips span {
    font-family: var(--title-font);
    font-size: clamp(1.3rem, 3.2vw, 4rem);
    color: var(--ledger-ink);
    background: var(--receipt-bone);
    padding: .35rem .75rem .5rem;
    box-shadow: .5rem .6rem 0 rgba(74,59,115,.65);
    transform: translateY(-6rem) rotate(var(--tilt, -3deg));
    opacity: 0;
    animation: stampIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}

.title-strips span:nth-child(2) { --tilt: 2deg; animation-delay: .2s; }
.title-strips span:nth-child(3) { --tilt: -1deg; animation-delay: .4s; }
.title-strips span:nth-child(4) { --tilt: 4deg; animation-delay: .6s; background: var(--mint-phosphor); }

@keyframes stampIn { to { transform: translateY(0) rotate(var(--tilt)); opacity: 1; } }

.room-kicker { font-family: var(--label-font); color: var(--token-brass); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; margin-top: 5rem; }
.curator-note { max-width: 36rem; color: rgba(241,230,210,.8); }
.poetic-cue { color: var(--mint-phosphor); text-decoration: none; width: max-content; border-bottom: 1px solid var(--mint-phosphor); padding-bottom: .35rem; font-size: .78rem; }

.procession { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hand { position: absolute; width: 19rem; height: 7rem; border-radius: 4rem; background: var(--receipt-bone); opacity: .18; filter: drop-shadow(1rem 1.2rem 0 rgba(74,59,115,.45)); }
.hand i { position: absolute; right: -2rem; top: 1rem; width: 5rem; height: 2rem; border-radius: 2rem; background: inherit; }
.hand-left { left: -4rem; top: 42%; animation: passLeft 16s linear infinite; }
.hand-right { right: -4rem; top: 32%; transform: scaleX(-1); animation: passRight 18s linear infinite; }
@keyframes passLeft { 50% { transform: translateX(50vw) rotate(5deg); } }
@keyframes passRight { 50% { transform: translateX(-48vw) scaleX(-1) rotate(-5deg); } }

.flying-object { position: absolute; font-family: var(--label-font); color: var(--ledger-ink); background: var(--token-brass); box-shadow: .45rem .55rem 0 rgba(74,59,115,.55); }
.coin { left: 18vw; top: 34vh; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; animation: arcOne 22s linear infinite; }
.ticket { right: 14vw; top: 24vh; padding: .65rem 1.4rem; transform: rotate(7deg); background: var(--receipt-bone); animation: arcTwo 20s linear infinite; }
.cord { left: 48vw; bottom: 21vh; width: 12rem; height: .35rem; background: var(--wax-red); transform: rotate(-19deg); animation: arcThree 17s ease-in-out infinite; }
.seal { right: 30vw; bottom: 28vh; width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; color: var(--receipt-bone); background: var(--wax-red); animation: pressSeal 7s ease-in-out infinite; }
@keyframes arcOne { 50% { transform: translate(46vw, 18vh) rotate(190deg); } }
@keyframes arcTwo { 50% { transform: translate(-38vw, 34vh) rotate(-13deg); } }
@keyframes arcThree { 50% { transform: translate(14vw, -38vh) rotate(21deg) scaleX(1.35); } }
@keyframes pressSeal { 0%, 100% { transform: scale(.9); opacity: .7; } 45%, 55% { transform: scale(1.1); opacity: 1; } }

.terms { background: linear-gradient(140deg, rgba(47,111,94,.18), transparent 42%), var(--ledger-ink); }
.diagonal-table { position: absolute; left: -7vw; top: 38%; width: 116vw; height: 22rem; background: linear-gradient(90deg, rgba(241,230,210,.16), rgba(209,168,75,.13), rgba(241,230,210,.08)); border: 1px solid rgba(241,230,210,.14); transform: rotate(-12deg); box-shadow: 0 3rem 6rem rgba(0,0,0,.45); }
.table-thread { position: absolute; top: 48%; left: 8%; width: 84%; height: 3px; background: var(--wax-red); transform-origin: left center; box-shadow: 0 0 1rem rgba(177,58,50,.45); }
.artifact { position: absolute; width: 12rem; min-height: 7rem; padding: 1rem; background: rgba(241,230,210,.9); color: var(--ledger-ink); border: 1px solid rgba(21,18,30,.22); box-shadow: .7rem .8rem 0 rgba(74,59,115,.55); transform: rotate(12deg); transition: transform .4s ease; }
.artifact::after { content: ""; position: absolute; inset: .6rem; border: 1px dashed rgba(177,58,50,.45); pointer-events: none; }
.artifact b { display: block; font-size: .72rem; color: var(--wax-red); margin-bottom: .55rem; }
.artifact small { font-size: .62rem; line-height: 1.35; color: var(--ledger-ink); }
.coin-artifact { left: 12%; top: -2.5rem; }
.cup-artifact { left: 30%; bottom: -2rem; }
.key-artifact { left: 48%; top: -3.7rem; }
.promise-artifact { left: 64%; bottom: -2.2rem; }
.barcode-artifact { left: 80%; top: -1.2rem; }
.panel-left { position: relative; z-index: 3; max-width: 39rem; margin-left: 2vw; margin-top: -20vh; }
.panel-left p { color: rgba(241,230,210,.82); }
.specimen-tags { position: absolute; left: 8vw; right: 11vw; bottom: 8vh; display: flex; flex-wrap: wrap; gap: .7rem; z-index: 3; }
.specimen-tags span { padding: .55rem .8rem; background: rgba(74,59,115,.65); color: var(--receipt-bone); border: 1px solid rgba(167,240,210,.22); font-size: .68rem; }

.receipts { background: radial-gradient(circle at 50% 100%, rgba(74,59,115,.42), transparent 42%), var(--ledger-ink); justify-items: center; text-align: center; }
.receipts h2 { z-index: 3; }
.receipt-corridor { position: absolute; inset: 12vh 6vw 10vh; perspective: 1000px; }
.receipt-veil { position: absolute; top: 5%; bottom: 0; width: 18%; padding: 4rem 1.2rem; color: var(--ledger-ink); background: linear-gradient(180deg, rgba(241,230,210,.78), rgba(241,230,210,.26)); border-left: 1px dashed rgba(21,18,30,.28); border-right: 1px dashed rgba(21,18,30,.2); box-shadow: 0 2rem 5rem rgba(0,0,0,.28); transform-origin: top center; animation: sway 6s ease-in-out infinite; }
.receipt-veil span { display: block; margin: 0 0 2.5rem; font-size: clamp(.68rem, 1vw, .9rem); }
.veil-one { left: 4%; transform: rotateY(28deg); }
.veil-two { left: 22%; animation-delay: -.9s; transform: translateZ(60px) rotateY(-10deg); }
.veil-three { left: 41%; animation-delay: -1.8s; background: linear-gradient(180deg, rgba(167,240,210,.48), rgba(241,230,210,.24)); }
.veil-four { left: 60%; animation-delay: -2.7s; transform: translateZ(-40px) rotateY(13deg); }
.veil-five { left: 78%; animation-delay: -3.6s; background: linear-gradient(180deg, rgba(241,230,210,.62), rgba(177,58,50,.2)); }
@keyframes sway { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 1.2rem .6rem; rotate: 2.5deg; } }
.corridor-caption { position: absolute; z-index: 4; bottom: 7vh; max-width: 38rem; color: rgba(241,230,210,.82); }

.orrery-room { background: radial-gradient(circle, rgba(167,240,210,.13), transparent 30rem), linear-gradient(180deg, #15121E, #1a1625); }
.orrery-wrap { display: grid; grid-template-columns: minmax(20rem, 47rem) minmax(18rem, 36rem); align-items: center; gap: 5vw; width: 100%; }
.orrery { width: min(70vw, 43rem); filter: drop-shadow(0 2rem 4rem rgba(0,0,0,.35)); overflow: visible; }
.orbit { fill: none; stroke: var(--token-brass); stroke-width: 2; stroke-dasharray: 8 12; opacity: .82; transform-origin: center; }
.orbit-two { stroke: var(--oxide-verdigris); animation: rotateReverse 26s linear infinite; }
.orbit-three { stroke: var(--carbon-violet); animation: rotateForward 38s linear infinite; }
.fulcrum { fill: var(--mint-phosphor); filter: drop-shadow(0 0 1rem rgba(167,240,210,.75)); }
.orbiter { font-family: var(--label-font); fill: var(--receipt-bone); font-size: 18px; letter-spacing: .08em; transform-origin: 300px 300px; }
.orbiter circle { fill: var(--token-brass); stroke: var(--receipt-bone); stroke-width: 2; }
.orbiter-two circle, .orbiter-four circle { fill: var(--wax-red); }
.orbiter-three circle, .orbiter-five circle { fill: var(--oxide-verdigris); }
.red-path { fill: none; stroke: var(--wax-red); stroke-width: 4; stroke-linecap: round; opacity: .8; }
@keyframes rotateForward { to { transform: rotate(360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }
.orrery-caption { max-width: 36rem; }
.orrery-caption p { color: rgba(241,230,210,.78); }

.archive { background: linear-gradient(180deg, #1b1726 0%, #15121E 70%); align-content: end; padding-bottom: 10vh; }
.archive h2 { position: relative; z-index: 3; margin-bottom: 8vh; }
.drawer-wall { position: absolute; inset: 20vh 8vw 14vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; transform: perspective(900px) rotateX(8deg); }
.drawer { position: relative; min-height: 11rem; background: linear-gradient(180deg, rgba(241,230,210,.16), rgba(47,111,94,.12)); border: 1px solid rgba(241,230,210,.17); box-shadow: inset 0 -1.2rem 0 rgba(0,0,0,.16), 0 2rem 4rem rgba(0,0,0,.28); transform: translateY(var(--settle, 0)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.drawer::before { content: ""; position: absolute; left: 12%; right: 12%; top: 1rem; height: .3rem; background: rgba(209,168,75,.55); }
.drawer span { position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem; color: var(--receipt-bone); }
.drawer i { position: absolute; left: 50%; top: 48%; width: 3rem; height: 3rem; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--token-brass); opacity: .7; }
.drawer-two i { border-radius: 0; border-color: var(--wax-red); transform: translate(-50%, -50%) rotate(12deg); }
.drawer-three i { width: 5rem; height: 2.6rem; border-radius: 0; border-color: var(--carbon-violet); }
.drawer-four i { border: 0; width: 5rem; height: .35rem; background: var(--wax-red); box-shadow: 0 .7rem 0 var(--wax-red), 0 -.7rem 0 var(--wax-red); }
.drawer-five i { border-color: var(--mint-phosphor); box-shadow: 0 0 1.2rem rgba(167,240,210,.35); }
.drawer-six i { border-radius: .2rem; border-color: var(--receipt-bone); }
.final-note { position: relative; z-index: 3; max-width: 52rem; color: rgba(241,230,210,.88); font-size: clamp(1.5rem, 2.6vw, 3rem); }

.is-visible .drawer:nth-child(odd) { --settle: 1.4rem; }
.is-visible .drawer:nth-child(even) { --settle: -.8rem; }

@media (max-width: 800px) {
    .room { padding: 6rem 6vw; }
    .exhibit-map { right: .5rem; transform: translateY(-50%) scale(.82); transform-origin: right center; }
    .title-strips { flex-wrap: wrap; right: 5rem; }
    .diagonal-table { top: 43%; height: 28rem; }
    .artifact { width: 9.4rem; }
    .receipt-corridor { inset-left: 0; inset-right: 0; }
    .receipt-veil { width: 28%; }
    .veil-four, .veil-five { display: none; }
    .orrery-wrap { grid-template-columns: 1fr; }
    .drawer-wall { grid-template-columns: repeat(2, 1fr); inset-left: 5vw; inset-right: 5vw; }
}