:root {
    --archive-ink: #1E1A2B;
    --vellum-cream: #F4E8C8;
    --verdigris-green: #2F7D67;
    --carmine-stamp: #B7354A;
    --indigo-carbon: #343E8C;
    --ledger-gold: #D7A84F;
    --mist-glass: #DDE7DE;
    --display: "Cormorant Garamond", Cormorant, Lora, serif;
    --text: "Commissioner", Inter, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --mono-guidance: sparingly entry IDs;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    color: var(--archive-ink);
    font-family: var(--text);
    background:
        radial-gradient(circle at 18% 9%, rgba(215, 168, 79, .28), transparent 26rem),
        radial-gradient(circle at 82% 24%, rgba(47, 125, 103, .28), transparent 28rem),
        linear-gradient(130deg, #F4E8C8 0%, #DDE7DE 42%, #F4E8C8 68%, #1E1A2B 160%);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    z-index: 1;
    background-image:
        repeating-linear-gradient(90deg, rgba(30, 26, 43, .04) 0 1px, transparent 1px 20px),
        repeating-linear-gradient(0deg, rgba(183, 53, 74, .035) 0 1px, transparent 1px 28px);
    mix-blend-mode: multiply;
}

.glass-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    box-shadow: inset 0 0 9rem rgba(30, 26, 43, .48), inset 0 0 2rem rgba(244, 232, 200, .45);
    background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 34%, rgba(52,62,140,.08) 55%, transparent 80%);
}

.dust-field {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.dust-mote {
    position: absolute;
    width: .28rem;
    height: .28rem;
    border-radius: 50%;
    background: rgba(215, 168, 79, .52);
    transform: translate3d(0, 0, 0);
    animation: moteDrift linear infinite;
}

@keyframes moteDrift {
    from { transform: translateY(105vh) translateX(0); opacity: 0; }
    20% { opacity: .72; }
    to { transform: translateY(-12vh) translateX(4rem); opacity: 0; }
}

.polyledger-atrium {
    position: relative;
    z-index: 3;
}

.bookmark-spine {
    position: fixed;
    left: 50%;
    top: 0;
    width: .44rem;
    height: 100vh;
    transform: translateX(-50%);
    z-index: 5;
    background: linear-gradient(90deg, #B7354A, #D7A84F 38%, #F4E8C8 52%, #2F7D67 76%, #1E1A2B);
    box-shadow: 0 0 1.2rem rgba(215, 168, 79, .55), 0 0 0 .12rem rgba(30,26,43,.18);
    border-radius: 999px;
}

.spine-knot {
    position: absolute;
    left: 50%;
    top: 9vh;
    width: 2rem;
    height: 2rem;
    transform: translateX(-50%) rotate(45deg);
    border: .22rem solid var(--ledger-gold);
    background: var(--vellum-cream);
    box-shadow: 0 .7rem 1.8rem rgba(30,26,43,.28);
}

.spine-glint {
    position: absolute;
    left: -.55rem;
    width: 1.5rem;
    height: 20vh;
    background: linear-gradient(transparent, rgba(244,232,200,.92), transparent);
    animation: glintTravel 6s ease-in-out infinite;
}

@keyframes glintTravel {
    0%, 100% { top: -24vh; }
    55% { top: 92vh; }
}

.folio-meter {
    position: fixed;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: grid;
    justify-items: center;
    gap: .7rem;
    color: var(--vellum-cream);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-shadow: 0 .1rem .4rem var(--archive-ink);
}

.meter-line {
    display: block;
    width: .32rem;
    height: 10rem;
    padding: .08rem;
    border-radius: 999px;
    background: rgba(30,26,43,.34);
    border: 1px solid rgba(244,232,200,.38);
}

#meterFill {
    display: block;
    width: 100%;
    height: 0%;
    border-radius: inherit;
    background: linear-gradient(var(--carmine-stamp), var(--ledger-gold), var(--verdigris-green));
}

.scene {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 6vw, 7rem);
    overflow: hidden;
    perspective: 1100px;
    isolation: isolate;
}

.scene::after {
    content: attr(data-code);
    position: absolute;
    right: 6vw;
    bottom: 6vh;
    font-family: var(--mono);
    font-size: clamp(3rem, 12vw, 12rem);
    color: rgba(30, 26, 43, .045);
    letter-spacing: -.08em;
    z-index: -1;
}

.scene-chapter {
    position: absolute;
    top: 8vh;
    left: 7vw;
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 5.4rem);
    color: var(--carmine-stamp);
    opacity: .78;
    transform: rotate(-7deg);
}

h1, h2 {
    font-family: var(--display);
    line-height: .88;
    margin: 0;
    color: var(--archive-ink);
    font-weight: 600;
    text-wrap: balance;
}

h1 {
    font-size: clamp(4.6rem, 12vw, 13rem);
    max-width: 9ch;
    letter-spacing: -.06em;
}

h2 {
    font-size: clamp(3.6rem, 8vw, 8rem);
    letter-spacing: -.045em;
}

p {
    font-size: clamp(1rem, 1.45vw, 1.28rem);
    line-height: 1.55;
}

.lead {
    max-width: 39rem;
    color: rgba(30, 26, 43, .82);
}

.mono, .eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo-carbon);
}

.entrance {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
    gap: 6vw;
}

.ghost-pages {
    position: absolute;
    inset: 8vh 5vw 8vh auto;
    width: min(54vw, 45rem);
    opacity: .62;
    transform: rotateX(9deg) rotateZ(-4deg);
    z-index: -1;
}

.ghost-pages span {
    position: absolute;
    inset: calc(var(--i, 0) * 2rem);
    height: 72vh;
    border: 1px solid rgba(52, 62, 140, .24);
    background: rgba(221, 231, 222, .32);
    box-shadow: 0 2rem 6rem rgba(52, 62, 140, .12);
    backdrop-filter: blur(2px);
}

.ghost-pages span:nth-child(1) { --i: 0; transform: translateX(-7rem) rotate(-5deg); }
.ghost-pages span:nth-child(2) { --i: 1; transform: translateX(-2rem) rotate(4deg); }
.ghost-pages span:nth-child(3) { --i: 2; transform: translateX(3rem) rotate(-1deg); }
.ghost-pages span:nth-child(4) { --i: 3; transform: translateX(8rem) rotate(7deg); }

.intake-ritual {
    position: relative;
    height: 72vh;
    display: grid;
    place-items: end center;
}

.vellum-droplet {
    position: absolute;
    top: 6vh;
    left: 50%;
    width: 4.2rem;
    height: 5.6rem;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 70% 2% 70% 50%;
    background: radial-gradient(circle at 35% 35%, #F4E8C8, #DDE7DE 48%, rgba(215,168,79,.86));
    box-shadow: 0 0 2rem rgba(244,232,200,.9), 0 1rem 2.7rem rgba(30,26,43,.22);
    animation: dropletFall 5s ease-in-out infinite;
}

.vellum-droplet span {
    position: absolute;
    inset: .9rem 1.4rem 1.4rem .8rem;
    border-radius: inherit;
    background: rgba(255,255,255,.55);
}

@keyframes dropletFall {
    0%, 100% { transform: translateX(-50%) translateY(-1rem) rotate(45deg) scale(.92); }
    50% { transform: translateX(-50%) translateY(8rem) rotate(52deg) scale(1.04); }
}

.folio, .archive-drawer, .vellum-overlay, .ledger-room {
    border: 1px solid rgba(30, 26, 43, .18);
    box-shadow: 0 1.8rem 4rem rgba(30, 26, 43, .22), inset 0 0 0 1px rgba(244, 232, 200, .38);
}

.intake-book {
    position: relative;
    width: min(32rem, 82vw);
    height: 17rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: rotateX(58deg) rotateZ(-8deg);
    transform-style: preserve-3d;
}

.page {
    padding: 2rem;
    background: var(--vellum-cream);
    background-image: repeating-linear-gradient(0deg, transparent 0 1.55rem, rgba(30,26,43,.1) 1.6rem 1.65rem);
    font-family: var(--display);
    font-size: 1.5rem;
}

.right-page { border-left: .35rem solid var(--ledger-gold); }
.book-spine { position: absolute; inset: 0 auto 0 50%; width: .6rem; background: var(--carmine-stamp); transform: translateX(-50%); }

.archive-action {
    position: absolute;
    left: 7vw;
    bottom: 7vh;
    border: 1px solid rgba(30,26,43,.42);
    color: var(--archive-ink);
    background: linear-gradient(135deg, rgba(244,232,200,.92), rgba(215,168,79,.78));
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .95rem 1.2rem;
    cursor: pointer;
    box-shadow: .4rem .4rem 0 rgba(183,53,74,.5);
    transition: transform .35s ease, box-shadow .35s ease;
}

.archive-action:hover {
    transform: rotate(-2deg) translateY(-.3rem);
    box-shadow: .72rem .72rem 0 rgba(47,125,103,.55);
}

.split-index {
    grid-template-columns: .78fr 1.22fr;
    background: radial-gradient(circle at 12% 36%, rgba(183,53,74,.16), transparent 22rem), radial-gradient(circle at 82% 62%, rgba(52,62,140,.18), transparent 24rem);
}

.ledger-room {
    width: min(36rem, 88vw);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: rgba(244,232,200,.78);
    backdrop-filter: blur(8px);
}

.tilted {
    transform: rotateY(13deg) rotateZ(-3deg);
}

.index-stack {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2rem;
}

.index-tab {
    padding: .55rem .85rem;
    border-radius: 999px 999px .2rem .2rem;
    color: var(--vellum-cream);
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    animation: tabGrow 4s ease-in-out infinite alternate;
}

.index-tab.green { background: var(--verdigris-green); }
.index-tab.indigo { background: var(--indigo-carbon); animation-delay: .5s; }
.index-tab.carmine { background: var(--carmine-stamp); animation-delay: 1s; }
.index-tab.gold { background: var(--ledger-gold); color: var(--archive-ink); animation-delay: 1.5s; }

@keyframes tabGrow { to { transform: translateY(-.65rem) scaleY(1.08); } }

.many-spined-book {
    position: relative;
    height: 70vh;
    transform: rotateX(7deg) rotateZ(3deg);
}

.main-folio, .small-folio {
    position: absolute;
    background: var(--vellum-cream);
    padding: 1rem;
    font-family: var(--display);
}

.main-folio {
    left: 38%;
    top: 24%;
    width: 12rem;
    height: 18rem;
    border-left: 1.2rem solid var(--archive-ink);
    font-size: 2rem;
}

.small-folio { width: 10rem; height: 8rem; display: grid; place-items: center; text-align: center; }
.small-folio.ecological { left: 5%; top: 13%; border-left: .8rem solid var(--verdigris-green); }
.small-folio.machine { right: 8%; top: 34%; border-left: .8rem solid var(--indigo-carbon); }
.small-folio.disputed { left: 18%; bottom: 8%; border-left: .8rem solid var(--carmine-stamp); }

.branch, .thread-line {
    position: absolute;
    height: .22rem;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--ledger-gold), var(--carmine-stamp), var(--verdigris-green));
    box-shadow: 0 0 .8rem rgba(215,168,79,.6);
}

.branch-one { left: 20%; top: 29%; width: 22rem; transform: rotate(12deg); }
.branch-two { left: 51%; top: 42%; width: 19rem; transform: rotate(10deg); }
.branch-three { left: 30%; top: 65%; width: 18rem; transform: rotate(-24deg); }

.ledger-entry {
    position: fixed;
    top: 18vh;
    left: 50vw;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    z-index: 7;
    box-shadow: 0 0 1rem currentColor;
    transform: translate(-50%, -50%);
}

.entry-green { color: var(--verdigris-green); background: var(--verdigris-green); }
.entry-indigo { color: var(--indigo-carbon); background: var(--indigo-carbon); }
.entry-carmine { color: var(--carmine-stamp); background: var(--carmine-stamp); }
.entry-gold { color: var(--ledger-gold); background: var(--ledger-gold); }

.reconciliation {
    grid-template-columns: .8fr 1.2fr;
    background: linear-gradient(160deg, rgba(30,26,43,.92), rgba(52,62,140,.78));
    color: var(--vellum-cream);
}

.reconciliation h2, .reconciliation p { color: var(--vellum-cream); }
.reconciliation .eyebrow { color: var(--ledger-gold); }

.loom-heading { max-width: 34rem; }

.thread-loom {
    position: relative;
    min-height: 70vh;
    border: 1px solid rgba(244,232,200,.24);
    background: radial-gradient(circle, rgba(244,232,200,.12), transparent 70%);
}

.thread-line {
    left: 12%;
    top: 50%;
    width: 72%;
    animation: threadTension 3s ease-in-out infinite alternate;
}

.t1 { transform: rotate(-28deg); }
.t2 { transform: rotate(-7deg); background: var(--verdigris-green); animation-delay: .3s; }
.t3 { transform: rotate(17deg); background: var(--carmine-stamp); animation-delay: .6s; }
.t4 { transform: rotate(35deg); background: var(--ledger-gold); animation-delay: .9s; }

@keyframes threadTension { to { filter: brightness(1.5); height: .34rem; } }

.archive-drawer {
    position: absolute;
    width: 13rem;
    min-height: 6rem;
    padding: 1rem;
    background: linear-gradient(145deg, #F4E8C8, #D7A84F);
    color: var(--archive-ink);
    font-family: var(--mono);
    transform: translateZ(0) rotateZ(var(--r, 0deg));
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.archive-drawer b { display: block; font-family: var(--display); font-size: 2rem; }
.drawer-a { left: 3%; top: 12%; --r: -5deg; }
.drawer-b { right: 6%; top: 7%; --r: 4deg; }
.drawer-c { left: 13%; bottom: 9%; --r: 3deg; }
.drawer-d { right: 16%; bottom: 15%; --r: -7deg; }
.scene.active .archive-drawer { transform: translateZ(5rem) rotateZ(var(--r, 0deg)); }

.dispute {
    place-items: center;
    background: radial-gradient(circle at 60% 45%, rgba(183,53,74,.22), transparent 25rem), var(--vellum-cream);
}

.dispute-sheet {
    position: relative;
    width: min(58rem, 88vw);
    min-height: 68vh;
    padding: clamp(2rem, 5vw, 5rem);
    background: rgba(221,231,222,.68);
    backdrop-filter: blur(9px);
    transform: rotateX(6deg) rotateZ(2deg);
}

.margin-note {
    position: absolute;
    padding: .55rem .7rem;
    background: rgba(183,53,74,.12);
    border-left: .3rem solid var(--carmine-stamp);
    color: var(--carmine-stamp);
    font-family: var(--mono);
    font-size: .74rem;
    text-transform: uppercase;
    animation: annotationCrawl 5s ease-in-out infinite alternate;
}

.note-one { right: 4%; top: 18%; }
.note-two { left: -3%; bottom: 25%; animation-delay: .8s; }
.note-three { right: 10%; bottom: 8%; animation-delay: 1.5s; }

@keyframes annotationCrawl { to { transform: translateX(-1.2rem) rotate(-2deg); box-shadow: 0 0 2rem rgba(183,53,74,.24); } }

.stamp-mark {
    position: absolute;
    right: 12%;
    top: 45%;
    width: 12rem;
    height: 12rem;
    display: grid;
    place-items: center;
    text-align: center;
    border: .55rem double var(--carmine-stamp);
    border-radius: 50%;
    color: var(--carmine-stamp);
    font-family: var(--mono);
    transform: rotate(-18deg) scale(.88);
    opacity: .8;
    animation: stampImpression 4s ease-in-out infinite;
}

@keyframes stampImpression { 50% { transform: rotate(-18deg) scale(1); opacity: .98; } }

.ledger-moth {
    position: absolute;
    left: 12vw;
    top: 22vh;
    width: 4.4rem;
    height: 3rem;
    display: grid;
    place-items: center;
    color: var(--archive-ink);
    font-family: var(--mono);
    background: radial-gradient(ellipse at 30% 50%, #D7A84F 0 35%, transparent 36%), radial-gradient(ellipse at 70% 50%, #F4E8C8 0 35%, transparent 36%);
    animation: mothFloat 6s ease-in-out infinite;
}

.moth-two { left: auto; right: 14vw; top: 68vh; animation-delay: 1.5s; }
@keyframes mothFloat { 50% { transform: translateY(-2rem) rotate(9deg); } }

.compare { left: auto; right: 8vw; }

.common-archive {
    grid-template-columns: .72fr 1.28fr;
    background: linear-gradient(145deg, #DDE7DE, #F4E8C8 48%, rgba(215,168,79,.42));
}

.common-copy { max-width: 35rem; }

.light-table {
    position: relative;
    height: 74vh;
    border-radius: 2rem;
    background: radial-gradient(circle, rgba(255,255,255,.72), rgba(221,231,222,.42));
    border: 1px solid rgba(47,125,103,.24);
    box-shadow: inset 0 0 5rem rgba(244,232,200,.9), 0 2rem 5rem rgba(30,26,43,.2);
}

.layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(32rem, 62vw);
    height: 15rem;
    padding: 2rem;
    background: rgba(244,232,200,.58);
    transform: translate(-50%, -50%) rotate(var(--rot)) translate(var(--x), var(--y));
    transition: transform 1.2s cubic-bezier(.2,.9,.2,1), background .8s ease;
}

.layer b { display: block; font-family: var(--display); font-size: 3rem; }
.layer span { font-family: var(--mono); text-transform: uppercase; font-size: .8rem; }
.layer.legal { --rot: -9deg; --x: -5rem; --y: -8rem; border-left: .7rem solid var(--ledger-gold); }
.layer.ecological { --rot: 7deg; --x: 7rem; --y: -2rem; border-left: .7rem solid var(--verdigris-green); }
.layer.personal { --rot: -2deg; --x: -2rem; --y: 5rem; border-left: .7rem solid var(--carmine-stamp); }
.layer.machine { --rot: 11deg; --x: 4rem; --y: 9rem; border-left: .7rem solid var(--indigo-carbon); }
.light-table.sealed .layer { transform: translate(-50%, -50%) rotate(0deg) translate(0, 0); background: rgba(221,231,222,.42); }

.wax-seal {
    position: absolute;
    right: 12%;
    bottom: 12%;
    width: 7rem;
    height: 7rem;
    border-radius: 46% 54% 50% 44%;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--carmine-stamp);
    color: var(--vellum-cream);
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: .82;
    box-shadow: inset .4rem .4rem 1rem rgba(244,232,200,.18), 0 1rem 2rem rgba(30,26,43,.24);
}

.seal { left: 8vw; bottom: 10vh; }

.scene:not(.active) .ledger-room,
.scene:not(.active) .many-spined-book,
.scene:not(.active) .thread-loom,
.scene:not(.active) .dispute-sheet,
.scene:not(.active) .light-table {
    filter: saturate(.78) blur(.3px);
}

@media (max-width: 850px) {
    .entrance, .split-index, .reconciliation, .common-archive {
        grid-template-columns: 1fr;
    }
    .bookmark-spine { left: 1.1rem; }
    .folio-meter { display: none; }
    h1 { font-size: clamp(4rem, 20vw, 7rem); }
    .intake-ritual, .many-spined-book, .thread-loom, .light-table { min-height: 34rem; height: 58vh; }
    .entry-cloud { display: none; }
    .branch { opacity: .4; }
    .scene-chapter { left: 4rem; }
}