:root {
    --indigo: #10162F;
    --broker-blue: #253E6B;
    --vellum: #F1E5C8;
    --brass: #B8863B;
    --wax: #8F1F2D;
    --pearl: #C9D7DC;
    --violet: #5B3C88;
    --serif: "Cormorant Garamond", serif;
    --label: "Unbounded", sans-serif;
    --body: "Noto Sans", sans-serif;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    color: var(--vellum);
    font-family: var(--body);
    background:
        radial-gradient(circle at 18% 8%, rgba(91, 60, 136, .42), transparent 34rem),
        radial-gradient(circle at 86% 42%, rgba(37, 62, 107, .72), transparent 28rem),
        linear-gradient(125deg, #10162F 0%, #111A38 47%, #080C1F 100%);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: .17;
    background-image:
        repeating-linear-gradient(36deg, rgba(241,229,200,.08) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(96deg, rgba(201,215,220,.05) 0 1px, transparent 1px 5px);
    mix-blend-mode: overlay;
}

.chamber-lamp {
    position: fixed;
    width: 46vw;
    height: 46vw;
    right: -12vw;
    top: -10vw;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,215,220,.2), rgba(91,60,136,.14) 36%, transparent 70%);
    filter: blur(7px);
    transition: background 800ms ease, transform 900ms ease;
}

.broker-nav {
    position: fixed;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: grid;
    gap: .7rem;
    font-family: var(--label);
    font-size: .58rem;
    letter-spacing: .14em;
    color: rgba(201,215,220,.58);
}

.broker-nav span {
    width: 7.7rem;
    padding: .55rem .65rem;
    border-left: 2px solid rgba(184,134,59,.35);
    background: rgba(16,22,47,.46);
    cursor: pointer;
    transition: color 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.broker-nav span.active {
    color: var(--vellum);
    border-color: var(--wax);
    transform: translateX(.35rem);
}

.route-map {
    position: fixed;
    left: 8.7rem;
    top: 0;
    height: 100vh;
    width: 7rem;
    z-index: 4;
    opacity: .78;
    pointer-events: none;
}

.route-map svg {
    width: 100%;
    height: 100%;
}

.route-shadow,
.route-ink {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-shadow {
    stroke: rgba(241,229,200,.18);
    stroke-width: 15;
    stroke-dasharray: 1 24;
}

.route-ink {
    stroke: var(--brass);
    stroke-width: 4;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    filter: drop-shadow(0 0 12px rgba(184,134,59,.32));
}

.exchange-walkthrough {
    position: relative;
    z-index: 2;
}

.exchange-chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 7vw, 8rem) clamp(4rem, 7vw, 6rem) clamp(8rem, 16vw, 16rem);
    border-bottom: 1px solid rgba(201,215,220,.12);
    isolation: isolate;
}

.exchange-chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(100deg, rgba(16,22,47,.15), rgba(16,22,47,.86)),
        repeating-linear-gradient(90deg, rgba(241,229,200,.035) 0 1px, transparent 1px 84px);
}

.exchange-chamber::after {
    content: "";
    position: absolute;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    right: -10rem;
    bottom: -12rem;
    z-index: -1;
    background: radial-gradient(circle, rgba(91,60,136,.36), transparent 68%);
}

.desk-tableau {
    position: relative;
    min-height: 74vh;
    border: 1px solid rgba(184,134,59,.34);
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(37,62,107,.72), rgba(16,22,47,.92)),
        repeating-linear-gradient(22deg, rgba(241,229,200,.025) 0 2px, transparent 2px 12px);
    box-shadow: inset 0 0 0 8px rgba(16,22,47,.38), 0 2rem 5rem rgba(0,0,0,.42);
    transform: rotate(-1.2deg);
}

.brass-nameplate {
    position: absolute;
    left: 7%;
    top: 8%;
    padding: .75rem 1.4rem;
    color: #10162F;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 7vw, 6.8rem);
    font-weight: 700;
    letter-spacing: .08em;
    background: linear-gradient(110deg, #B8863B, #F1E5C8 46%, #B8863B);
    border: 1px solid rgba(241,229,200,.44);
    box-shadow: 0 .8rem 1.7rem rgba(0,0,0,.38), inset 0 0 0 2px rgba(16,22,47,.2);
}

.velvet-rope {
    position: absolute;
    width: 18rem;
    height: .7rem;
    border-radius: 2rem;
    background: linear-gradient(90deg, transparent, #8F1F2D, transparent);
    box-shadow: 0 0 1rem rgba(143,31,45,.5);
}

.rope-left { left: -4rem; bottom: 14%; transform: rotate(18deg); }
.rope-right { right: -3rem; top: 24%; transform: rotate(-24deg); }

.vellum-folio,
.contract-leaf,
.vault-ledger,
.final-license,
.broker-note {
    color: var(--indigo);
    background:
        radial-gradient(circle at 18% 20%, rgba(201,215,220,.36), transparent 12rem),
        repeating-linear-gradient(0deg, rgba(37,62,107,.08) 0 1px, transparent 1px 1.45rem),
        var(--vellum);
    border: 1px solid rgba(184,134,59,.56);
    box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.28);
}

.hero-folio {
    position: absolute;
    width: min(54rem, 72%);
    min-height: 28rem;
    left: 17%;
    top: 30%;
    padding: 4.8rem 4rem 3rem;
    transform: rotate(4deg);
    transition: transform 500ms ease;
}

.folio-corner,
.serial-medallion {
    position: absolute;
    display: grid;
    place-items: center;
    font-family: var(--label);
    color: var(--vellum);
    background: var(--broker-blue);
    border: 2px solid var(--brass);
}

.folio-corner {
    right: 1.2rem;
    top: 1.2rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.serial-mark,
.final-label,
.vault-ledger small,
.contract-leaf small,
.chamber-title b,
.broker-note b,
.inspection-rail,
.clause-tags span,
.seal-request {
    font-family: var(--label);
    letter-spacing: .14em;
    font-size: .68rem;
}

h1,
h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .045em;
    line-height: .94;
}

h1 { font-size: clamp(4rem, 8.6vw, 8.6rem); max-width: 11ch; }
h2 { font-size: clamp(3.2rem, 6vw, 6.6rem); }

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

.manifest-lines {
    display: grid;
    gap: .65rem;
    margin-top: 2rem;
}

.manifest-lines i {
    height: 2px;
    background: linear-gradient(90deg, rgba(37,62,107,.45), transparent);
}

.glass-weight {
    position: absolute;
    right: 16%;
    top: 23%;
    width: 10.5rem;
    height: 10.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(16,22,47,.68);
    font-family: var(--label);
    font-size: .65rem;
    text-align: center;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.76), rgba(201,215,220,.46) 30%, rgba(201,215,220,.14) 66%);
    border: 1px solid rgba(201,215,220,.75);
    box-shadow: 0 1rem 2.2rem rgba(0,0,0,.34), inset -.7rem -.8rem 1.6rem rgba(37,62,107,.16);
    transition: transform 500ms ease;
}

.wax-stamp {
    display: grid;
    place-items: center;
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 50%;
    color: var(--vellum);
    font-family: var(--label);
    font-size: .78rem;
    letter-spacing: .12em;
    background:
        radial-gradient(circle at 35% 28%, rgba(241,229,200,.16), transparent 18%),
        radial-gradient(circle at 72% 72%, rgba(16,22,47,.22), transparent 24%),
        var(--wax);
    border: .45rem double rgba(241,229,200,.24);
    box-shadow: 0 1.4rem 2.4rem rgba(143,31,45,.28), inset 0 0 1rem rgba(16,22,47,.25);
}

.hero-stamp {
    position: absolute;
    left: 59%;
    bottom: 11%;
    transform: rotate(-15deg) scale(.95);
}

.license-ribbon {
    display: flex;
    gap: .65rem;
    padding: .62rem .7rem;
    color: var(--indigo);
    font-family: var(--label);
    font-size: .68rem;
    letter-spacing: .1em;
    background: linear-gradient(90deg, #F1E5C8, #C9D7DC, #F1E5C8);
    border-top: 1px dashed rgba(37,62,107,.55);
    border-bottom: 1px dashed rgba(37,62,107,.55);
    box-shadow: 0 .8rem 1.4rem rgba(0,0,0,.22);
}

.license-ribbon span {
    padding: .48rem .65rem;
    border: 2px solid rgba(143,31,45,.62);
    color: var(--wax);
    transform: rotate(-2deg);
}

.desk-ribbon {
    position: absolute;
    left: 4%;
    bottom: 7%;
    min-width: 62rem;
    transform: rotate(-8deg) translateX(var(--ribbon-shift, 0px));
    transition: transform 250ms linear;
}

.tilted-note {
    position: absolute;
    right: 6vw;
    bottom: 8vh;
    width: 19rem;
    padding: 1.3rem;
    transform: rotate(-7deg);
}

.tilted-note span {
    display: block;
    margin-top: .8rem;
    line-height: 1.55;
}

.provenance-lantern {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 4rem;
}

.brass-rail {
    position: absolute;
    left: 14%;
    top: 15%;
    right: 7%;
    display: flex;
    justify-content: space-between;
    padding: .85rem 1.2rem;
    color: var(--indigo);
    background: var(--brass);
    box-shadow: 0 .8rem 1.5rem rgba(0,0,0,.36);
}

.lantern-folio {
    position: relative;
    grid-column: 2;
    padding: 5rem 3.4rem;
    transform: rotate(-3deg);
}

.guilloche-watermark {
    position: absolute;
    inset: 1.2rem;
    opacity: .22;
    background:
        repeating-radial-gradient(ellipse at 50% 50%, transparent 0 8px, rgba(37,62,107,.8) 9px 10px),
        repeating-conic-gradient(from 20deg, transparent 0 7deg, rgba(143,31,45,.45) 8deg 10deg);
    border-radius: 45%;
    pointer-events: none;
}

.serial-medallion {
    left: 1.2rem;
    top: 1.2rem;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: .6rem;
}

.inspection-lamp {
    position: absolute;
    left: 24%;
    top: 28%;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,215,220,.78), rgba(201,215,220,.14) 35%, transparent 66%);
    filter: blur(2px);
    transform: translateX(var(--lamp-x, 0px));
}

.drawer-reveal {
    position: absolute;
    display: grid;
    gap: .75rem;
    padding: 1rem;
    color: var(--vellum);
    font-family: var(--label);
    font-size: .66rem;
    letter-spacing: .1em;
    background: linear-gradient(135deg, #253E6B, #10162F);
    border: 1px solid rgba(184,134,59,.62);
    box-shadow: inset 0 0 0 5px rgba(16,22,47,.34), 0 1rem 2rem rgba(0,0,0,.3);
}

.drawer-reveal span {
    padding: .65rem 2rem .65rem .75rem;
    border: 1px solid rgba(201,215,220,.2);
    background: rgba(16,22,47,.38);
}

.drawer-left {
    left: calc(-8rem + var(--drawer-left, 0px));
    bottom: 18%;
    width: 16rem;
}

.chamber-ribbon {
    position: absolute;
    left: 18%;
    bottom: 14%;
    transform: rotate(8deg);
}

.negotiation-table {
    display: grid;
    place-items: center;
}

.table-oval {
    position: relative;
    width: min(66rem, 86vw);
    height: 36rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(37,62,107,.85), rgba(16,22,47,.92) 68%);
    border: 1px solid rgba(184,134,59,.48);
    box-shadow: inset 0 0 0 1rem rgba(16,22,47,.33), 0 2rem 4rem rgba(0,0,0,.42);
    transform: rotate(-5deg);
}

.contract-leaf {
    position: absolute;
    width: 22rem;
    padding: 2rem;
}

.leaf-a { left: 16%; top: 16%; transform: rotate(10deg); }
.leaf-b { right: 12%; bottom: 13%; transform: rotate(-12deg); }

.string-bundle {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 4rem;
    color: var(--indigo);
    font-family: var(--label);
    font-size: .68rem;
    background: var(--vellum);
    border: 1px solid var(--brass);
    box-shadow: 0 .8rem 1.5rem rgba(0,0,0,.3);
}

.string-bundle::after {
    content: "";
    position: absolute;
    inset: 48% -8%;
    height: 2px;
    background: var(--wax);
}

.bundle-one { left: 10%; bottom: 20%; transform: rotate(-8deg); }
.bundle-two { left: 45%; top: 10%; transform: rotate(5deg); }
.bundle-three { right: 16%; top: 25%; transform: rotate(-12deg); }

.drawer-right {
    right: calc(-10rem + var(--drawer-right, 0px));
    top: 20%;
    width: 20rem;
}

.chamber-title {
    position: absolute;
    left: 15%;
    bottom: 12%;
    max-width: 33rem;
}

.chamber-title b { color: var(--brass); }

.clause-scale {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 3rem;
}

.scale-apparatus {
    position: relative;
    height: 33rem;
}

.scale-beam {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 36%;
    height: .7rem;
    background: var(--brass);
    transform: rotate(var(--beam-rotate, -6deg));
    transform-origin: center;
    transition: transform 260ms linear;
    box-shadow: 0 .7rem 1rem rgba(0,0,0,.3);
}

.scale-pan {
    position: absolute;
    top: 2.7rem;
    width: 11rem;
    height: 6rem;
    display: grid;
    place-items: center;
    color: var(--indigo);
    font-family: var(--label);
    font-size: .7rem;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(#B8863B, #F1E5C8);
}

.left-pan { left: 3%; }
.right-pan { right: 3%; }

.scale-needle {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 2px;
    height: 15rem;
    background: var(--wax);
    transform-origin: top;
    transform: rotate(var(--needle-rotate, 8deg));
    box-shadow: 0 0 1rem rgba(143,31,45,.55);
}

.scale-base {
    position: absolute;
    left: 50%;
    bottom: 11%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    color: var(--indigo);
    font-family: var(--label);
    letter-spacing: .13em;
    background: var(--brass);
}

.scale-folio {
    position: relative;
    padding: 4rem 3rem;
    transform: rotate(3deg);
}

.perforation {
    position: absolute;
    left: 1.2rem;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 2px dashed rgba(37,62,107,.36);
}

.clause-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2rem;
}

.clause-tags span {
    padding: .65rem .8rem;
    color: var(--vellum);
    background: var(--broker-blue);
}

.seal-vault {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

.vault-ring {
    position: relative;
    width: min(37rem, 76vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.4rem double var(--brass);
    background:
        repeating-conic-gradient(from 0deg, rgba(184,134,59,.85) 0 4deg, rgba(16,22,47,.92) 4deg 10deg),
        radial-gradient(circle, #253E6B 0 42%, #10162F 43%);
    box-shadow: inset 0 0 3rem rgba(0,0,0,.58), 0 2rem 4rem rgba(0,0,0,.4);
    transform: rotate(var(--vault-rotate, 0deg));
    transition: transform 300ms linear;
}

.vault-door {
    position: absolute;
    inset: 24%;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    color: var(--vellum);
    font-family: var(--label);
    letter-spacing: .18em;
    background: radial-gradient(circle, #253E6B, #10162F 72%);
    border: .5rem solid var(--brass);
}

.vault-ring i {
    position: absolute;
    width: .75rem;
    height: 2.2rem;
    left: 50%;
    top: 3%;
    transform-origin: 0 calc(min(37rem, 76vw) / 2 - 1.5rem);
    background: var(--pearl);
}

.vault-ring i:nth-child(2) { transform: rotate(60deg); }
.vault-ring i:nth-child(3) { transform: rotate(120deg); }
.vault-ring i:nth-child(4) { transform: rotate(180deg); }
.vault-ring i:nth-child(5) { transform: rotate(240deg); }
.vault-ring i:nth-child(6) { transform: rotate(300deg); }

.vault-ledger {
    padding: 3rem;
    transform: rotate(-4deg);
}

.vault-stamp {
    position: absolute;
    right: 8%;
    bottom: 10%;
    transform: scale(var(--stamp-scale, .82)) rotate(-12deg);
    transition: transform 280ms linear;
}

.passage-window {
    display: grid;
    place-items: center;
}

.passage-frame {
    position: relative;
    width: min(78rem, 88vw);
    min-height: 70vh;
    border: 1px solid rgba(201,215,220,.24);
    background:
        linear-gradient(90deg, rgba(16,22,47,.94), rgba(37,62,107,.56)),
        repeating-linear-gradient(90deg, rgba(184,134,59,.08) 0 1px, transparent 1px 3.2rem);
    box-shadow: inset 0 0 0 .85rem rgba(184,134,59,.16), 0 2rem 5rem rgba(0,0,0,.5);
}

.window-glow {
    position: absolute;
    inset: 7% 8% 15% 46%;
    background: radial-gradient(circle at 50% 45%, rgba(201,215,220,.4), rgba(91,60,136,.18) 48%, transparent 76%);
    border: 1px solid rgba(201,215,220,.28);
}

.final-license {
    position: absolute;
    left: 7%;
    top: 12%;
    width: min(42rem, 70vw);
    padding: 4rem 3rem 3rem;
    transform: rotate(-2deg);
}

.final-watermark { opacity: .14; }

.seal-request {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 11rem;
    height: 11rem;
    margin-top: 1.6rem;
    border-radius: 50%;
    text-decoration: none;
    color: var(--vellum);
    background: var(--wax);
    border: .5rem double rgba(241,229,200,.36);
    transform: rotate(-8deg);
    box-shadow: 0 1rem 2rem rgba(143,31,45,.3);
}

.final-ribbon {
    position: absolute;
    right: -7rem;
    bottom: 12%;
    min-width: 45rem;
    transform: rotate(10deg);
}

.is-visible .vellum-folio,
.is-visible .contract-leaf,
.is-visible .vault-ledger,
.is-visible .final-license {
    animation: paperSettle 900ms cubic-bezier(.2,.8,.2,1) both;
}

.stamp-inked {
    animation: inkSoak 850ms ease both;
}

@keyframes paperSettle {
    from { opacity: .55; filter: blur(1px); translate: 0 1.4rem; }
    to { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes inkSoak {
    0% { filter: saturate(.7); box-shadow: 0 0 0 rgba(143,31,45,0); }
    55% { filter: saturate(1.5); box-shadow: 0 0 2.2rem rgba(143,31,45,.56); }
    100% { filter: saturate(1); }
}

@media (max-width: 900px) {
    .broker-nav,
    .route-map { display: none; }
    .exchange-chamber { padding-left: 1.2rem; padding-right: 1.2rem; }
    .hero-folio,
    .final-license { width: 86vw; left: 5%; padding: 3rem 1.5rem; }
    .brass-nameplate { font-size: 2.6rem; }
    .provenance-lantern,
    .clause-scale,
    .seal-vault { grid-template-columns: 1fr; }
    .drawer-reveal { display: none; }
    .table-oval { width: 92vw; }
    .contract-leaf { width: 18rem; }
}